## **一、基本信息**

- **项目技术栈**：Vue2（前端） + SQL Server（数据库/存储过程）
- **开发日期**：2026-05-22
- **开发人员**：\[填写姓名]
- **任务总数**：2

***

## **二、任务一：存储过程 – 采购单历史价格曲线图数据**

### **2.1 需求描述**

编写/修改一个存储过程，统计指定采购单（或指定物料）的历史采购价格，返回用于前端绘制曲线图的数据结构（时间 + 价格）。

### **2.2 技术目标**

- 输入参数：`@MaterialID`（物料ID） 或 `@PurchaseOrderID`（采购单号）
- 输出数据集：`HistoryDate`（日期）、`UnitPrice`（单价）
- 按时间升序排列

### **2.3 存储过程实现（SQL Server）**

sql

```
CREATE OR ALTER PROC usp_GetPurchasePriceHistory
    @MaterialID INT
AS
BEGIN
    SET NOCOUNT ON;
    SELECT 
        CONVERT(DATE, po.OrderDate) AS HistoryDate,
        pod.UnitPrice
    FROM PurchaseOrderDetail pod
    INNER JOIN PurchaseOrder po ON pod.PurchaseOrderID = po.PurchaseOrderID
    WHERE pod.MaterialID = @MaterialID
      AND pod.UnitPrice IS NOT NULL
      AND po.OrderDate IS NOT NULL
    GROUP BY CONVERT(DATE, po.OrderDate), pod.UnitPrice
    ORDER BY HistoryDate ASC;
END
```

### **2.4 前端调用示例（Vue2 + axios）**

javascript

```
// API 服务层
getPriceHistory(materialId) {
  return axios.post('/api/getPriceHistory', { materialId });
}

// 组件中使用
async loadChartData() {
  const res = await getPriceHistory(this.selectedMaterialId);
  const chartData = {
    dates: res.data.map(item => item.HistoryDate),
    prices: res.data.map(item => item.UnitPrice)
  };
  this.renderLineChart(chartData);
}
```

### **2.5 曲线图组件建议**

- 使用 `echarts` 或 `chart.js`
- X轴：日期，Y轴：单价

***

## **三、任务二：员工组件 – 必填项改为选填项 + 存储过程修改**

### **3.1 需求描述**

员工信息组件中原有字段（如：手机号、备用邮箱等）为必填，现改为**选填**，并修改对应的**存储过程**以兼容空值写入/更新。

### **3.2 前端修改（Vue2）**

#### **3.2.1 表单校验规则调整**

javascript

```
// 原 rules
rules: {
  phone: [{ required: true, message: '请填写手机号' }],
  email: [{ required: true, message: '请填写邮箱' }]
}

// 改为选填（删除 required 或设为 false）
rules: {
  phone: [{ required: false, message: '请填写手机号' }],
  email: [{ required: false, message: '请填写邮箱' }]
}
```

#### **3.2.2 必填标识（星号）移除**

vue

```
<el-form-item label="手机号" prop="phone">
  <!-- 原 <span class="required-star">*</span> 移除或条件显示 -->
</el-form-item>
```

### **3.3 后端存储过程修改（SQL Server）**

#### **3.3.1 原存储过程（假设示例）**

sql

```
CREATE PROC usp_InsertEmployee
    @Name NVARCHAR(50),
    @Phone VARCHAR(20),
    @Email VARCHAR(100)
AS
BEGIN
    INSERT INTO Employee (Name, Phone, Email)
    VALUES (@Name, @Phone, @Email);
END
```

#### **3.3.2 修改后（支持选填字段）**

sql

```
ALTER PROC usp_InsertEmployee
    @Name NVARCHAR(50),
    @Phone VARCHAR(20) = NULL,   -- 允许为空
    @Email VARCHAR(100) = NULL   -- 允许为空
AS
BEGIN
    INSERT INTO Employee (Name, Phone, Email)
    VALUES (@Name, @Phone, @Email);
END
```

> 注：`ALTER PROC` 需确认参数名、顺序与原存储过程一致。

### **3.4 数据库表字段允许 NULL**

确保 `Phone`、`Email` 字段已设置为 `NULL`（若此前为 `NOT NULL` 需执行改表语句）：

sql

```
ALTER TABLE Employee ALTER COLUMN Phone VARCHAR(20) NULL;
ALTER TABLE Employee ALTER COLUMN Email VARCHAR(100) NULL;
```

***

## **四、测试要点**

**任务**

**测试项**

**预期结果**

曲线图

输入有效物料ID

返回正确的时间-价格序列

曲线图

输入无历史价格的物料

返回空数据集，前端提示无数据

员工组件

手机号、邮箱不填写提交

可成功提交，数据库对应字段为 NULL

员工组件

原有必填逻辑（如姓名）

仍保持必填

***

## **五、部署与回滚注意事项**

- **存储过程**：先备份原存储过程（`DROP` 前先 `CREATE` 备份脚本）
- **前端**：仅移除校验规则，不涉及路由或组件结构大改
- **数据库字段**：`ALTER COLUMN NULL` 操作不可逆，建议先在测试库执行

***

## **六、完成确认（Checklist）**

- 存储过程 `usp_GetPurchasePriceHistory` 已创建/修改并通过测试
- 前端曲线图可正常展示历史价格
- 员工组件校验规则已改为选填
- 员工组件对应存储过程已支持 `NULL`
- 数据库字段已允许 `NULL`
- 提交代码并备注今日工作计划完成