Angular5、使用 EF 和 WEB API 的 ASP.NET Core CRUD 库存管理
4.93/5 (11投票s)
在本篇文章中，我们将深入探讨如何使用 Angular5 和 ASP.NET Core 应用程序，通过 WEB API 和 EF 来执行基于优先级的库存管理再订货点系统的 CRUD 操作。
引言
如果您是 Angular5 和 ASP.NET Core 的新手，请阅读我之前的文章
在我之前的文章中，我解释了如何开始使用 Angular5 和 ASP.NET Core。现在，在本文中，我们将深入探讨如何使用 WEB API 和 EF 为 Angular5 和 ASP.NET Core 应用程序执行 CRUD 操作。
为了在此处执行 CRUD 操作，我采用了基于优先级的库存管理再订货点系统作为概念。
背景
库存管理和再订货点
库存管理是维护和管理小型商店或大型仓库库存的重要组成部分。例如，让我们考虑一个销售牙膏、香皂、洗发水等物品的小商店。对于商店中的所有商品，他们会列出商品名称，并添加每种商品的可用库存总量、每种商品的销售总量以及需要添加到库存中的收货总量。如果商品数量很少，很容易找到需要再次购买的商品以维持库存量，如果是一个需要维护所有库存量的大型工厂，情况就不同了。使用库存管理软件，最终用户可以轻松跟踪库存商品、可用库存总量、已到货和已发出库存总量、每种商品的再订货点以及需要立即进货的商品的优先级再订货。
再订货点
在库存管理中，再订货点或再订货是重要的部分，它将指示客户该商品库存即将用完，需要购买或生产以供销售或交付给最终用户。
库存管理涉及许多需要处理的流程来维护软件，在本篇文章中，我们将创建一个简单的项目来显示基于优先级的库存管理再订货系统的基于 Web 的监控系统。
对于再订货点，有一些公式可以为需要进货的每种商品显示指示器。在我们简单的项目中，我使用了手动和自动两种类型的优先级指示来通知客户。
注意：在库存管理中，我们将拥有商品主表、商品明细表、库存表等。对于这个简单的项目，我只使用了一个表作为库存表，直接添加了商品名称、库存量、再订货量和优先级状态。用户可以通过优先级状态手动添加或编辑需要立即进货的商品的优先级。这里的优先级状态是手动添加或编辑需要进货的商品的优先级。
手动设置再订货点的优先级
当客户添加/编辑每件库存商品时，他们可以手动设置再订货的优先级。如果您问我为什么需要为再订货点设置手动优先级，请考虑这种情况：我们有 1000 件三星 S7 Edge 商品库存，假设这些库存可以用 2 个月。但是，三星 S7 Edge 手机的需求量很大，并且价格将在一周后上涨，现在我们需要立即增加库存量。我们在世界各地有许多分支机构，通过编辑库存优先级，我们所有的分支机构都可以从我们的 Web 应用程序中看到这一点，并为优先商品添加库存。或者考虑另一个例子，我们有 1000 件商品库存，我们的客户打电话要求我们在几天内交付 5000 件商品库存。在这种情况下，手动优先级将更有用。在许多场景中，最好为维护每件商品的库存设置手动优先级。这是一个简单的演示项目，所以我没有添加太多字段示例，我们还可以添加诸如需要增加库存量的再订货日期和优先级的备注等字段。
现在，让我们向库存中添加一个新商品，然后单击“保存”。这里我们在添加新商品时没有检查优先级状态，这意味着该商品库存量充足，目前不需要添加更多库存量。
我们可以看到“优先级状态”列具有红色和绿色背景，并带有复选框和未勾选的框。当我们添加或编辑商品时，如果我们勾选了“优先级状态”并保存，则商品列将显示为绿色，并带有复选框图像。如果商品未保存优先级状态，则显示为红色。在这里，我们使用绿色表示该商品具有高优先级，需要根据新的再订货量增加库存。
现在，让我们编辑该商品并设置其优先级状态。
当我们勾选优先级状态并保存相同的商品后，我们可以看到指示器为绿色，并带有勾选图像。
自动设置再订货点的优先级状态
正如我之前所说，对于再订货点，我们将使用公式来指示客户增加库存量和新的再订货量。
在这里，我们可以看到“所需优先级状态”列显示为天蓝色和浅绿色。浅蓝色表示商品不需要再订货，绿色表示商品需要再订货。
对于自动显示，我设置的公式是：如果 StockQty > ReorderQty + 50，则将“所需优先级状态”设置为浅蓝色，表示商品不需要再订货；如果 StockQty <= ReorderQty + 50，则将“所需优先级状态”设置为浅绿色，表示商品需要立即进行库存维护。
从上图可以看出，新添加的三星 S7 Edge 商品的库存量为 750，再订货量为 50，因此“所需优先级状态”显示为蓝色。
现在，让我们像下面这样编辑该商品，并将再订货量设置为 700 并保存以检查更改。
现在，我们可以看到“所需优先级状态”颜色已自动更改，因为库存量为 750，再订货量为 700。
现在，让我们看看如何使用 Angular5、ASP.NET Core、EF 和 Web API 来创建这个 Web 应用程序。
必备组件
请确保您已在计算机上安装了所有先决条件。如果没有，请逐一下载并安装所有软件。
使用代码
现在，是时候创建我们的第一个 Angular5 和 ASP.NET Core 应用程序了。
步骤 1 - 创建数据库和表
我们将使用我们的 SQL Server 数据库来开发 WEB API 和 EF。首先，我们创建一个名为 InventoryPDB 的数据库和一个名为 InventoryMaster 的表。以下是用于创建数据库表和在表中插入示例记录的 SQL 脚本。在您的本地 SQL Server 中运行以下查询，以创建将在我们的项目中使用的数据库和表。
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'InventoryPDB' )
DROP DATABASE InventoryPDB
GO
CREATE DATABASE InventoryPDB
GO
USE InventoryPDB
GO
-- 1) //////////// StudentMasters
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'InventoryMaster' )
DROP TABLE InventoryMaster
GO
CREATE TABLE [dbo].[InventoryMaster](
[InventoryID] INT IDENTITY PRIMARY KEY,
[ItemName] [varchar](100) NOT NULL,
[StockQty] int NOT NULL,
[ReorderQty] int NOT NULL,
[PriorityStatus] int NOT NULL -- 0 for low and 1 for High
)
-- insert sample data to Student Master table
INSERT INTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
VALUES ('HardDisk',500,300,0)
INSERT INTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
VALUES ('Mouse',600,550,1)
INSERT INTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
VALUES ('USB',3500,3000,0)
select * from InventoryMaster
步骤 2 - 创建 Angular5TemplateCore
安装上述所有必备软件和 Angular5TemplateCore 后，在桌面上单击“开始”>>“程序”>>“Visual Studio 2017”>>“Visual Studio 2017”。
单击“新建”>>“项目”。选择“Visual C#”>>选择“Angular5Core2”。输入您的项目名称，然后单击“确定”。
项目创建完成后，我们可以在解决方案资源管理器中看到“ClientApp”文件夹中包含 Angular5 示例组件、html 和 app，以及 Asp.NET Core 的 Controllers 和 view 文件夹。
这里的这些文件和文件夹与我们的 ASP.NET Core Angular2 模板包非常相似。
Package.json 文件
如果我们打开 package.Json 文件，可以看到 Angular5 和 Angular cli 所需的所有依赖项都已默认添加。
在 Package.json 中添加 Webpack
为了运行我们的 Angular5 应用程序，我们需要在我们的应用程序中安装 webpack。如果 webpack 未在 package.json 文件中默认添加，则需要手动添加。Webpack 是一个开源的 JavaScript 模块打包器。Webpack 接收带有依赖关系的模块，并生成代表这些模块的静态资源。要了解有关 Webpack 的更多信息，请单击此处 https://webpack.github.io/docs/what-is-webpack.html
打开我们的 package.json 文件，并在 scripts 下添加以下行。
"postinstall": "webpack --config webpack.config.vendor.js"
步骤 3 - 使用模型和上下文类
添加连接字符串
要添加 SQL 连接的连接字符串，请打开“appsettings.json”文件。是的，这是一个 JSON 文件，其外观如下所示。
在此 appsettings.json 文件中，我添加了连接字符串。
"ConnectionStrings": {
"DefaultConnection": "Server=SQLSERVERNAME;Database=InventoryPDB;user id=SQLID;password=SQLPWD;Trusted_Connection=True;MultipleActiveResultSets=true;"
}
注意 - 请根据您的本地连接更改 SQL 连接字符串。
下一步是创建一个名为 Data 的文件夹来创建我们的模型和 DBContext 类。
为库存创建模型类
我们可以在 Data 文件夹中添加一个新的类文件来创建一个模型。右键单击 Data 文件夹，单击“添加”>“类”。将类名输入为 InventoryMasters，然后单击“添加”。现在，在此类中，我们首先创建一个属性变量，添加 InventoryMaster。我们将在 WEB API 控制器中使用它。请注意，在这里我们将字段名称与数据库表列名称相同。
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
namespace Angular5Core2.Data
{
public class InventoryMaster
{
[Key]
public int InventoryID { get; set; }
[Required]
[Display(Name = "ItemName")]
public string ItemName { get; set; }
[Required]
[Display(Name = "StockQty")]
public int StockQty { get; set; }
[Required]
[Display(Name = "ReorderQty")]
public int ReorderQty { get; set; }
public int PriorityStatus { get; set; }
}
}
创建数据库上下文
DBContext 是 Entity Framework 类，用于建立与数据库的连接
我们可以通过在 Data 文件夹中添加一个新的类文件来创建 DBContext 类。右键单击 Data 文件夹，单击“添加”>“类”。将类名输入为 InventroyContext，然后单击“添加”。 在此类中，我们继承 DbContext 并为我们的学生表创建 Dbset。
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace Angular5Core2.Data
{
public class InventoryContext : DbContext
{
public InventoryContext(DbContextOptions<InventoryContext> options)
:base(options) { }
public InventoryContext() { }
public DbSet<InventoryMaster> InventoryMaster { get; set; }
}
}
Startup.CS
现在，我们需要添加我们的数据库连接字符串和提供程序（SQL SERVER）。要添加此项，请在 Startup.cs 文件中的 ConfigureServices 方法下添加以下代码。
public void ConfigureServices(IServiceCollection services)
{
// Add Entity framework .
services.AddDbContext<InventoryContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
services.AddMvc();
}
步骤 4 - 创建用于 CRUD 操作的 Web API
要创建我们的 WEB API Controller，请右键单击 Controllers 文件夹。单击“添加”>>“控制器”。选择“API Controller Empty”并单击“添加”按钮来创建我们的 Web API。
输入名称为“InventoryMasterAPI.cs”，然后单击“添加”。
正如我们所知，Web API 是一种简单易用的构建面向浏览器和移动设备的 HTTP 服务的方式。
Web API 具有以下四个方法：
- Get 是请求数据（SELECT）。
- Post 是创建数据（INSERT）。
- Put 是更新数据。
- Delete 是删除数据。
首先，我们在 Web API 类中为 DBContext 创建一个对象。
[Produces("application/json")]
[Route("api/InventoryMasterAPI")]
public class InventoryMasterAPIController : Controller
{
private readonly InventoryContext _context;
public InventoryMasterAPIController(InventoryContext context)
{
_context = context;
}
Get 方法（SELECT 操作）
Get 方法用于从我们选择的数据库请求单个项目或项目列表。在这里，我们将从 InventoryMasters 表获取所有库存信息。
// GET: api/InventoryMasterAPI
[HttpGet]
[Route("Inventory")]
public IEnumerable<InventoryMaster> GetInventoryMaster()
{
return _context.InventoryMaster;
}
Post 方法（INSERT 操作）
Post 方法将用于将数据插入我们的数据库。在 Post 方法中，我们还将检查 Inventory Id 是否已创建并返回消息。我们将传递所有 Inventory Master 列参数以插入到 Inventory Master 表中。
// POST: api/InventoryMasterAPI
[HttpPost]
public async Task<IActionResult> PostInventoryMaster([FromBody] InventoryMaster InventoryMaster)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
_context.InventoryMaster.Add(InventoryMaster);
try
{
await _context.SaveChangesAsync();
}
catch (DbUpdateException)
{
if (InventoryMasterExists(InventoryMaster.InventoryID))
{
return new StatusCodeResult(StatusCodes.Status409Conflict);
}
else
{
throw;
}
}
return CreatedAtAction("GetInventoryMaster", new { id = InventoryMaster.InventoryID }, InventoryMaster);
}
private bool InventoryMasterExists(int id)
{
return _context.InventoryMaster.Any(e => e.InventoryID == id);
}
Put 方法（UPDATE 操作）
Put 方法将用于将选定的库存数据更新到我们的数据库。在 Put 方法中，我们将传递 InventoryID 以及所有其他用于更新的参数。我们传递 InventoryID 以通过 InventoryID 更新 InventoryMaster 表。
// PUT: api/InventoryMasterAPI/2
[HttpPut("{id}")]
public async Task<IActionResult> PutInventoryMaster([FromRoute] int id, [FromBody] InventoryMaster InventoryMaster)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != InventoryMaster.InventoryID)
{
return BadRequest();
}
_context.Entry(InventoryMaster).State = EntityState.Modified;
try
{
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!InventoryMasterExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return NoContent();
}
Delete 方法（DELETE 操作）
Delete 方法将用于从我们的数据库中删除选定的库存数据。在 Delete 方法中，我们将传递 InventoryID 来删除记录。
// DELETE: api/InventoryMasterAPI/2
[HttpDelete("{id}")]
public async Task<IActionResult> DeleteInventoryMaster([FromRoute] int id)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
InventoryMaster InventoryMaster = await _context.InventoryMaster.SingleOrDefaultAsync(m => m.InventoryID == id);
if (InventoryMaster == null)
{
return NotFound();
}
_context.InventoryMaster.Remove(InventoryMaster);
await _context.SaveChangesAsync();
return Ok(InventoryMaster);
}
要测试 Get 方法，我们可以运行我们的项目并复制 GET 方法的 API 路径。在这里，我们可以看到获取 api/InventoryMasterAPI/Inventory/ 的 API 路径。
运行程序并粘贴 API 路径以测试我们的输出。
步骤 5：使用 Angular5
我们在 ClientApp/App 文件夹下创建所有 Angular5 相关的应用程序、模块、服务、组件和 HTML 模板。
在这里，我使用现有的 Home 组件和 html 来执行我们的库存 CRUD 操作。为每个操作创建单独的服务、组件和 html 文件总是好的。对于演示项目，我正在使用现有的 home 组件和 html。
Home.component
在现有的 home 组件 TypeScript 文件中，我添加了所有函数来执行库存管理的 CRUD 操作。
首先，在导入部分，我们添加了 HTTP 和 FormsModule，用于处理 WEB API 的 Get/Post/Put/Delete 操作以及表单以获取和设置用户的输入。
在 HomeComponent 类中，我声明了所有需要的变量，并创建了单独的函数来处理 Get/Post/Put 和 Delete 方法。在 get 方法中，我传递了 WEB API URL 以从数据库获取所有数据，并将结果 JSON 数据绑定到我们的 html 页面。在 Post 和 Put 方法中，我将用户在表单中输入的所有参数传递给 WEB API 以在数据库中执行更新和插入。同样，我们也创建了 delete 方法，通过将 Inventory ID 作为参数传递给我们的 Web API 来删除数据库中的库存列表。
import { Component, Input, Inject } from <a href="mailto:'@angular/core'">'@angular/core'</a>;
import { Http,Response, Headers, RequestOptions } from <a href="mailto:'@angular/http'">'@angular/http'</a>;
import { FormsModule } from <a href="mailto:'@angular/forms'">'@angular/forms'</a>;
@Component({
selector: 'home',
templateUrl: './home.component.html'
})
export class HomeComponent {
// to get the Student Details
public Inventory: InventoryMaster[] = [];
// to hide and Show Insert/Edit
AddTable: Boolean = false;
// To stored Student Informations for insert/Update and Delete
public sInventoryID : number = 0;
public sItemName = "";
public sStockQty : number = 0;
public sReorderQty : number = 0;
public sPriorityStatus: boolean = false;
//For display Edit and Delete Images
public imgchk = require("./Images/chk.png");
public imgunChk = require("./Images/unchk.png");
public bseUrl: string = "";
public schkName: string = "";
myName: string;
constructor(public http: Http, @Inject('BASE_URL') baseUrl: string) {
this.myName = "Shanu";
this.AddTable = false;
this.bseUrl = baseUrl;
this.getData();
}
//to get all the Inventory data from Web API
getData() {
this.http.get(this.bseUrl + 'api/InventoryMasterAPI/Inventory').subscribe(result => {
this.Inventory = result.json();
}, error => console.error(error));
}
// to show form for add new Student Information
AddInventory() {
this.AddTable = true;
// To stored Student Informations for insert/Update and Delete
this.sInventoryID = 0;
this.sItemName = "";
this.sStockQty = 50;
this.sReorderQty = 50;
this.sPriorityStatus = false;
}
// to show form for edit Inventory Information
editInventoryDetails(inventoryIDs : number, itemNames : string, stockQtys : number, reorderQtys : number , priorityStatus : number) {
this.AddTable = true;
this.sInventoryID = inventoryIDs;
this.sItemName = itemNames;
this.sStockQty = stockQtys;
this.sReorderQty = reorderQtys;
if (priorityStatus == 0)
{
this.sPriorityStatus = false;
}
else {
this.sPriorityStatus = true;
}
}
// If the InventoryId is 0 then insert the Inventory infromation using post and if the Inventory id is greater than 0 then edit using put mehod
addInventoryDetails(inventoryIDs: number, itemNames: string, stockQtys: number, reorderQtys: number, priorityStatus: boolean) {
var pStatus: number = 0;
this.schkName = priorityStatus.toString();
if (this.schkName == "true") {
pStatus = 1;
}
var headers = new Headers();
headers.append('Content-Type', 'application/json; charset=utf-8');
if (inventoryIDs == 0) {
this.http.post(this.bseUrl + 'api/InventoryMasterAPI/', JSON.stringify({ InventoryID: inventoryIDs, ItemName: itemNames, StockQty: stockQtys, ReorderQty: reorderQtys, PriorityStatus: pStatus }),
{ headers: headers }).subscribe(
response => {
this.getData();
}, error => {
}
);
}
else {
this.http.put(this.bseUrl + 'api/InventoryMasterAPI/' + inventoryIDs, JSON.stringify({ InventoryID: inventoryIDs, ItemName: itemNames, StockQty: stockQtys, ReorderQty: reorderQtys, PriorityStatus: pStatus }), { headers: headers })
.subscribe(response => {
this.getData();
}, error => {
}
);
}
this.AddTable = false;
//
//
//this.http.get(this.bseUrl + 'api/InventoryMasterAPI/Inventory').subscribe(result => {
// this.Inventory = result.json();
//}, error => console.error(error));
}
//to Delete the selected Inventory detail from database.
deleteinventoryDetails(inventoryIDs: number) {
var headers = new Headers();
headers.append('Content-Type', 'application/json; charset=utf-8');
this.http.delete(this.bseUrl + 'api/InventoryMasterAPI/' + inventoryIDs, { headers: headers }).subscribe(response => {
this.getData();
}, error => {
}
);
//this.http.get(this.bseUrl + 'api/InventoryMasterAPI/Inventory').subscribe(result => {
// this.Inventory = result.json();
//}, error => console.error(error));
}
closeEdits() {
this.AddTable = false;
// To stored Student Informations for insert/Update and Delete
this.sInventoryID = 0;
this.sItemName = "";
this.sStockQty = 50;
this.sReorderQty = 50;
this.sPriorityStatus = false;
}
}
export interface InventoryMaster {
inventoryID: number;
itemName: string;
stockQty: number;
reorderQty: number;
priorityStatus: number;
}
HTML 模板文件
在这里，我们使用 home.component.html 文件来执行库存管理的 CRUD 操作。
<div align="center">
<h1> ASP.NET Core,Angular5 CRUD for Invetory Management Priority based Reorder Level System, WEB API and EF </h1>
</div>
<div class="column">
<h2>Created by : {{myName}}</h2>
</div>
<hr style="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;" />
<p *ngIf="!Inventory"><em>Loading Inventory Details please Wait ! ...</em></p>
<table id="tblContainer" style='width: 99%;table-layout:fixed;'>
<tr>
<td>
<table style="background-color:#FFFFFF; border: dashed 3px #FFFFFF; padding: 5px;width: 99%;table-layout:fixed;" cellpadding="2"
cellspacing="2">
<tr style="height: 30px; color:#123455 ;border: solid 1px #659EC7;">
<td width="40px"> </td>
<td width="50%">
<h1> Add New Inventory Information <strong style="color:#0094ff"> </strong></h1>
</td>
<td align="right">
<button (click)=AddInventory() style="background-color:#f83500;color:#FFFFFF;font-size:large;width:260px;height:50px;
border-color:#a2aabe;border-style:dashed;border-width:2px;">
Add New Inventory Info
</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<hr style="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;" />
</td>
</tr>
<tr *ngIf="AddTable">
<td >
<table>
<tr>
<td>
<table style="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding :5px;width :99%;table-layout:fixed;" cellpadding="2" cellspacing="2">
<tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="40">
</td>
<td>
<h2>Insert/Edit Inventory Details : </h2>
</td>
</tr>
<tr>
<td width="100">
</td>
<td>
<table style="color:#9F000F;font-size:large; padding :5px;" cellpadding="12" cellspacing="16">
<tr>
<td><b>Inventory ID: </b> </td>
<td>
<input type="number" #InventoryID (ngModel)="sInventoryID" value="{{sInventoryID}}" style="background-color:tan" readonly>
</td>
<td width="20"> </td>
<td><b>Item Name: </b> </td>
<td>
<input type="text" #ItemName (ngModel)="sItemName" value="{{sItemName}}" required>
</td>
<td></td>
</tr>
<tr>
<td><b>Stock Quantity: </b> </td>
<td>
<input type="number" #StockQty (ngModel)="sStockQty" value="{{sStockQty}}" min="50" required>
</td>
<td width="20"> </td>
<td><b>Reorder Quantity: </b> </td>
<td>
<input type="number" #ReorderQty (ngModel)="sReorderQty" value="{{sReorderQty}}" min="50" required>
</td>
<td></td>
</tr>
<tr>
<td><b>Priority Status: </b> </td>
<td>
<input type="checkbox" #PriorityStatus (ngModel)="sPriorityStatus" value="{{sPriorityStatus}}" [checked]="sPriorityStatus"
(change)="sPriorityStatus = !sPriorityStatus" >
<!--<input type="text" #chkName (ngModel)="schkName" value="{{schkName}}">-->
</td>
<td width="20"> </td>
<td align="right" colspan="2">
<button (click)=addInventoryDetails(InventoryID.value,ItemName.value,StockQty.value,ReorderQty.value,PriorityStatus.value) style="background-color:#428d28;color:#FFFFFF;font-size:large;width:220px;
border-color:#a2aabe;border-style:dashed;border-width:2px;">
Save
</button>
</td>
<td>
<button (click)=closeEdits() style="background-color:#334668;color:#FFFFFF;font-size:large;width:180px;
border-color:#a2aabe;border-style:dashed;border-width:2px;">
Close
</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<hr style="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class='table' style="background-color:#FFFFFF; border:2px #6D7B8D; padding:5px;width:99%;table-layout:fixed;" cellpadding="2" cellspacing="2" *ngIf="Inventory">
<tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="70" align="center">Edit</td>
<td width="70" align="center">Delete</td>
<td width="70" align="center">Inventory ID</td>
<td width="120" align="center">Item Name</td>
<td width="120" align="center">StockQty</td>
<td width="120" align="center">ReorderQty</td>
<td width="120" align="center">Priority Status</td>
<td width="120" align="center">Required Priority Status</td>
</tr>
<tbody *ngFor="let INVY of Inventory">
<tr>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
<button (click)=editInventoryDetails(INVY.inventoryID,INVY.itemName,INVY.stockQty,INVY.reorderQty,INVY.priorityStatus)
style="background-color:#0d254f;color:#FFFFFF;font-size:large;width:80px;
border-color:#a2aabe;border-style:dashed;border-width:2px;">
Edit
</button>
<!-- <img src="{{imgEdit}}" style="height:32px;width:32px" (click)=editStudentsDetails(StudentMasters.stdID,StudentMasters.stdName,StudentMasters.email,StudentMasters.phone,StudentMasters.address)>-->
</span>
</td>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
<button (click)=deleteinventoryDetails(INVY.inventoryID)
style="background-color:#0d254f;color:#FFFFFF;font-size:large;width:80px;
border-color:#a2aabe;border-style:dashed;border-width:2px;">
Delete
</button>
<!-- <img src="{{imgDelete}}" style="height:32px;width:32px" (click)=deleteStudentsDetails(StudentMasters.stdID)>-->
</span>
</td>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{INVY.inventoryID}}</span>
</td>
<td align="left" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{INVY.itemName}}</span>
</td>
<td align="right" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{INVY.stockQty}}</span>
</td>
<td align="right" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{INVY.reorderQty}}</span>
</td>
<td align="center" [ngStyle]="INVY.priorityStatus==1 && {'background-color': 'green'} || INVY.priorityStatus==0 && {'background-color': 'red'} " style="height:42px;width:42px">
<!--<span style="color:#FFFFFF">{{INVY.priorityStatus}}</span>-->
<div [ngStyle]="INVY.priorityStatus==1 && {'background-image': 'url(' + imgchk + ')'} || INVY.priorityStatus==0 && {'background-image': 'url(' + imgunChk + ')'} " style="background-repeat: no-repeat;height:38px;width:38px" >
</div>
</td>
<td align="left" [ngStyle]="INVY.stockQty>INVY.reorderQty+50 && {'background-color': '#0094ff'} || INVY.stockQty<=INVY.reorderQty+50 && {'background-color': '#e5e800'} " style="border: solid 1px #ffffff; padding: 5px;table-layout:fixed;">
<!--<span style="color:#FFFFFF">{{INVY.priorityStatus}}</span>-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
手动设置再订货点的优先级逻辑
当用户添加或编辑库存主数据并且优先级状态被选中时，我将在数据库中插入状态为 1，如果优先级状态未被选中，我将保存状态为 0。在我们的 html 设计中，我将检查此 PriorityStatus 值，如果返回值为 1，我将设置表格 td 单元格的背景颜色为绿色并设置图像为已勾选图像。
<td align="center" [ngStyle]="INVY.priorityStatus==1 && {'background-color': 'green'} || INVY.priorityStatus==0 && {'background-color': 'red'} " style="height:42px;width:42px">
<!--<span style="color:#FFFFFF">{{INVY.priorityStatus}}</span>-->
<div [ngStyle]="INVY.priorityStatus==1 && {'background-image': 'url(' + imgchk + ')'} || INVY.priorityStatus==0 && {'background-image': 'url(' + imgunChk + ')'} " style="background-repeat: no-repeat;height:38px;width:38px" >
</div>
</td>
自动设置再订货点的优先级状态逻辑
在“所需优先级状态”列中，我检查 stockQty > reorderQty + 50 ，如果为真，则将 td 背景颜色设置为浅蓝色，否则设置为浅绿色。
<td align="left" [ngStyle]="INVY.stockQty>INVY.reorderQty+50 && {'background-color': '#0094ff'} || INVY.stockQty<=INVY.reorderQty+50 && {'background-color': '#e5e800'} " style="border: solid 1px #ffffff; padding: 5px;table-layout:fixed;">
<!--<span style="color:#FFFFFF">{{INVY.priorityStatus}}</span>-->
</td>
构建并运行应用程序
构建并运行应用程序，您将看到带有库存管理 CRUD 页面的主页。
关注点
首先，在您的 SQL Server 中创建数据库和表。您可以使用上述表创建脚本来创建具有示例插入的数据库和表。不要忘记在“appsettings.json”中更改数据库连接字符串。
历史
Angular5Core2.zip - 2017 年 12 月 7 日