# 左侧状态树每个状态的页面说明：
## 待接单状态
### 页面布局
-- 分为上下两个表格，如图片1所示
### 主表格上面操作按钮栏，分别有如下按钮：
#### 确认接单

- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
- 点击确认接单按钮后，弹出 “确认接单弹框”
  - 确认接单弹框打开后，需要让用户选择发货仓库，使用下拉选择，数据源是仓库列表，仓库列表接口可调用 `src/api/common.ts` 中的 `loadWarehouseListApi` 接口
  - 点击确认后，调用后端的接口(后端接口暂未提供，可预留占位)
  - 加全局 loading 以防重复调用接口
  - 调用成功后，弹出"接单成功"，并刷新主表格数据
  - 调用失败后，弹出"接单失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
#### 取消订单

- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
- 点击取消订单按钮后，弹出 “取消订单弹框”
  - 取消订单弹框打开后，需要让用户选择取消原因，使用下拉选择，数据源是分别是 `协商取消`、`客户取消`、`其他`
  - 点击确认后，调用后端的接口(后端接口暂未提供，可预留占位)
  - 加全局 loading 以防重复调用接口
  - 调用成功后，弹出"取消订单成功"，并刷新主表格数据
  - 调用失败后，弹出"取消订单失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
#### 刷新商品信息

- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
- 点击刷新商品信息按钮后，调用后端的接口(后端接口暂未提供，可预留占位)
- 成功后，弹出"刷新商品信息成功"，并刷新主表格数据
- 失败则展示错误信息
## 待创建物流状态
### 页面布局
-- 分为上下两个表格，如图片1所示
### 主表格上面操作按钮栏，分别有如下按钮：
#### 物流接口
-- 此功能为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `物流接口` 功能拷贝过来
#### 挂起
-- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
-- 点击挂起按钮后，弹出 “挂起订单”弹框
  - 挂起订单弹框打开后，需要让用户选择挂起原因和是否需要客户处理，使用下拉选择，这两个字段都是必填的,其中挂起原因数据源是分别是 `客户拦截`、`地址异常`、`素材异常`、`其他`，是否需要客户处理数据源是分别是 `需要客户处理`、`无需客户处理`
  - 点击确认后，调用后端的接口(后端接口暂未提供，可预留占位)
  - 加全局 loading 以防重复调用接口
  - 调用成功后，弹出"挂起订单成功"，并刷新主表格数据
  - 调用失败后，弹出"挂起订单失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
#### 更新报关信息
-- 此功能为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `更新报关信息` 功能拷贝过来
## 待派单状态
### 页面布局
-- 卡片布局，页面样式如图片2所示
-- 注意：这里可用 `src/components/CommonCard.vue` 组件，使用时注意传递对应的 props 和插槽
-- 可参考 `src/views/order/podCN/index.vue` 中的卡片实现方法，但是内容需要根据图片2所示进行调整
### 该状态中的操作栏，分别有如下按钮：
#### 排单
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `排单` 功能拷贝过来
#### 下载素材
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `下载素材` 功能拷贝过来
## 批量管理状态
### 页面布局
-- 表格布局，页面样式如图片3所示
-- 注意：这里可封装组件，使代码更易维护
## 等待捕获
### 页面布局
-- 表格布局，页面样式如图片4所示
-- 注意：这里可封装组件，使代码更易维护
## 配货中状态
### 页面布局
-- 表格布局，页面样式如图片1所示
### 该状态中的操作栏，分别有如下按钮：
#### 挂起
-- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
-- 点击挂起按钮后，弹出 “挂起订单”弹框
  - 挂起订单弹框打开后，需要让用户选择挂起原因和是否需要客户处理，使用下拉选择，这两个字段都是必填的,其中挂起原因数据源是分别是 `客户拦截`、`地址异常`、`素材异常`、`其他`，是否需要客户处理数据源是分别是 `需要客户处理`、`无需客户处理`
  - 点击确认后，调用后端的接口(后端接口暂未提供，可预留占位)
  - 加全局 loading 以防重复调用接口
  - 调用成功后，弹出"挂起订单成功"，并刷新主表格数据
  - 调用失败后，弹出"挂起订单失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
### 配货中子状态
#### 待拣胚
##### 页面布局
-- 卡片布局，页面样式如图片2所示
-- 注意：这里可用 `src/components/CommonCard.vue` 组件，使用时注意传递对应的 props 和插槽
-- 可参考 `src/views/order/podCN/index.vue` 中的卡片实现方法，但是内容需要根据图片2所示进行调整
##### 该状态中的操作栏，分别有如下按钮：
###### DTF排版
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `DTF排版` 功能拷贝过来
###### 打印生产单
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `打印生产单` 功能拷贝过来
###### 打印拣胚单
-- 当选择卡片数量大于0时，可以点击该按钮，否则提示请先选择订单
-- 点击打印拣胚单后，调用后端接口(后端接口暂未提供，可预留占位)
-- 给按钮加loading效果，防止重复点击
-- 调用成功后，弹出"打印拣胚单成功"，并刷新主表格数据
-- 调用失败后，弹出"打印拣胚单失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
###### 拣胚完成
-- 当选择卡片数量大于0时，可以点击该按钮，否则提示请先选择订单
-- 当点击拣胚完成后，弹出“拣配完成”弹框，弹框页面如图片5所示(图片中紫色字体是描述和情况1文案，情况2文案，情况3文案都无需写上)
-- 此功能较难，可先实现页面
###### 拣胚失败
-- 当选择卡片数量大于0时，可以点击该按钮，否则提示请先选择订单
-- 当点击拣胚失败后，弹出“拣胚失败”弹框，弹框页面如图片6所示(图片中紫色字体是描述无需写上)
-- 此功能较难，可先实现页面
#### 待补胚
##### 页面布局
-- 卡片布局，页面样式如图片2所示
-- 注意：这里可用 `src/components/CommonCard.vue` 组件，使用时注意传递对应的 props 和插槽
-- 可参考 `src/views/order/podCN/index.vue` 中的卡片实现方法，但是内容需要根据图片2所示进行调整
##### 该状态中的操作栏和待拣胚一致：DTF排版、打印生产单、打印拣胚单、拣胚完成、拣胚失败
#### 生产中
-- -- 卡片布局，页面样式如图片2所示
-- 注意：这里可用 `src/components/CommonCard.vue` 组件，使用时注意传递对应的 props 和插槽
-- 可参考 `src/views/order/podCN/index.vue` 中的卡片实现方法，但是内容需要根据图片2所示进行调整
##### 该状态中的操作栏，分别有如下按钮：
###### 申请补胚
-- 当选择卡片数量大于0时，可以点击该按钮，否则提示请先选择订单
-- 点击申请补胚后，前端提示“确定申请补胚吗?”
-- 点击确认后，调用后端接口(后端接口暂未提供，可预留占位)
-- 点击取消后，关闭 `messageBox`，不进行任何操作
-- 加全局 loading 以防重复调用接口
-- 调用成功后，弹出"申请补胚成功"，并刷新主表格数据
-- 调用失败后，弹出"申请补胚失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
###### 生产完成
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `生产完成` 功能拷贝过来
###### 播种墙配货
-- 此为原有逻辑，可把 `src/views/order/podUs/index.vue` 中的 `播种墙配货` 功能拷贝过来

## 待发货
### 页面布局
-- 表格布局，页面样式如图片1所示
### 该状态中的操作栏，分别有如下按钮：
#### 称重分拣
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `称重分拣` 功能拷贝过来
#### 下载素材
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `下载素材` 功能拷贝过来
## 已完成状态
### 页面布局
-- 表格布局，页面样式如图片1所示
### 该状态中的操作栏，分别有如下按钮：
#### 下载素材
#### 订单归档
-- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
-- 点击订单归档按钮后，调用后端接口(后端接口暂未提供，可预留占位)
-- 加全局 loading 以防重复调用接口
-- 调用成功后，弹出"订单归档成功"，并刷新主表格数据
-- 调用失败后，弹出"订单归档失败"弹框(使用 `ElMessageBox.prompt` 显示)，并显示失败原因(这里是后端返回的错误信息)
## 挂起状态
### 页面布局
-- 表格布局，页面样式如图片1所示
-- 根据挂起原因，分多Tab展示
   - 放再操作栏的上面，数据源分别是`客户拦截`、`地址异常`、`其他`
   - 点击Tab后，表格数据会根据Tab切换，并刷新表格数据
   - 具体样式可以参考现在已有“待派单状态”Tab的样式
### 该状态中的操作栏，分别有如下按钮：
#### 取消挂起
-- 当主表格选中的数据大于 0 时，可以点击该按钮，否则提示请先选择订单
-- 点击取消挂起按钮后，调用后端接口(后端接口暂未提供，可预留占位)
-- 加全局 loading 以防重复调用接口
-- 调用成功后，弹出"取消挂起成功"，并刷新主表格数据
#### 同步收货地址
-- 此为原有逻辑，可把 `src/views/order/podCN/index.vue` 中的 `同步收货地址` 功能拷贝过来