质保单上传整体结构

klp-ui/src/api/system/ocr.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function recognizeText({ imgUrl }) {
+  return request({
+    url: '/wms/purchasePlan/recognizeText',
+    method: 'post',
+    data: { imgUrl }
+  })
+}

klp-ui/src/api/wms/stockIo.js

@@ -82,7 +82,25 @@ export function updateStockIoStatus(stockIoId, status) {
   })
 }
 
-
+/**
+ * 创建入库单，含明细
+ * 入库单主表：
+ * 单号：stockIoCode
+ * 类型: ioType,
+ * 业务类型：bizType,
+ * 状态：status,    
+ * 备注：remark,
+ * 
+ * 入库单明细：
+ * warehouseId: 仓库ID,
+ * itemType: 物料类型,
+ * itemId: 物料ID,
+ * quantity: 数量,
+ * unit: 单位,
+ * batchNo: 批次号,
+ * remark: 备注
+ * 
+ */
 export function addStockIoWithDetail(data) {
   return request({
     url: '/wms/stockIo/withDetail',

klp-ui/src/components/FileUpload/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="upload-file">
+  <div class="upload-file" v-loading="loading" element-loading-text="正在获取文件">
     <el-upload
       multiple
       :action="uploadFileUrl"
@@ -61,7 +61,7 @@ export default {
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
       type: Array,
-      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+      default: () => ["doc", "xls", "ppt", "txt", "pdf", 'png', 'jpg', 'jpeg', 'bmp', 'webp'],
     },
     // 是否显示提示
     isShowTip: {
@@ -79,6 +79,7 @@ export default {
         Authorization: "Bearer " + getToken(),
       },
       fileList: [],
+      loading: false,
     };
   },
   watch: {
@@ -91,11 +92,15 @@ export default {
           if (Array.isArray(val)) {
             list = val;
           } else {
+            this.loading = true;
             await listByIds(val).then(res => {
               list = res.data.map(oss => {
                 oss = { name: oss.originalName, url: oss.url, ossId: oss.ossId };
                 return oss;
               });
+
+            }).finally(() => {
+              this.loading = false;
             })
           }
           // 然后将数组转为对象数组

klp-ui/src/components/KLPService/Renderer/BomInfo.vue

@@ -78,7 +78,6 @@ export default {
           this.bomInfo = res.rows;
         })
       }
-      console.log(this.bomInfo, bomId, bomMap)
     }
   }
 }

klp-ui/src/components/KLPService/WarehouseTree/index.vue

@@ -0,0 +1,75 @@
+
+<template>
+  <el-tree
+    :data="treeData"
+    :props="treeProps"
+    node-key="warehouseId"
+    highlight-current
+    @node-click="handleNodeClick"
+    :expand-on-click-node="false"
+    :default-expand-all="true"
+    class="stock-tree"
+  />
+</template>
+
+<script>
+import { listWarehouse } from '@/api/wms/warehouse';
+
+export default {
+  name: "WarehouseTree",
+  props: {
+    treeProps: {
+      type: Object,
+      default: () => ({
+        children: 'children',
+        label: 'warehouseName',
+        isLeaf: () => false
+      })
+    }
+  },
+  data() {
+    return {
+      treeData: []
+    };
+  },
+  created() {
+    this.getWarehouseTree();
+  },
+  methods: {
+    getWarehouseTree() {
+      listWarehouse().then(response => {
+        this.treeData = this.handleTree(response.data, 'warehouseId', 'parentId');
+      });
+    },
+    handleTree(data, id, parentId) {
+      const cloneData = JSON.parse(JSON.stringify(data));
+      return cloneData.filter(father => {
+        const branchArr = cloneData.filter(child => father[id] === child[parentId]);
+        if (branchArr.length > 0) father.children = branchArr;
+        return father[parentId] === 0 || father[parentId] === null;
+      });
+    },
+    handleNodeClick(node) {
+      this.$emit('node-click', node);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.stock-tree-card {
+  height: 100%;
+  border: none;
+  box-shadow: none;
+}
+.stock-tree-title {
+  font-weight: bold;
+  font-size: 16px;
+  padding: 8px 0;
+}
+.stock-tree {
+  min-height: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+</style>

klp-ui/src/components/KLPService/index.js

@@ -7,3 +7,5 @@ export { default as UserSelect } from './UserSelect/index.vue';
 export { default as WarehouseSelect } from './WarehouseSelect/index.vue';
 export { default as ProductInfo } from './Renderer/ProductInfo.vue';
 export { default as RawMaterialInfo } from './Renderer/RawMaterialInfo.vue';
+export { default as BomInfoMini } from './Renderer/BomInfoMini.vue';
+export { default as WarehouseTree } from './WarehouseTree/index.vue';

klp-ui/src/store/modules/category.js

@@ -3,6 +3,9 @@ import { listProduct } from '@/api/wms/product';
 import { listRawMaterial } from '@/api/wms/rawMaterial';
 import { listBomItem } from '@/api/wms/bomItem';
 
+// 目前存在一个问题，当新增或删除，修改分类、产品、物料时，需要刷新整个页面，才能看到最新的数据
+// 需要优化，当新增或删除，修改分类、产品、物料时，只刷新相关的数据，而不是整个页面，修改和删除可以解决，新增由于没有返回id，所以需要重新获取整个列表
+
 const state = {
   categoryList: [],
   productMap: {},
@@ -16,6 +19,7 @@ const mutations = {
   SET_CATEGORY_LIST(state, list) {
     state.categoryList = list;
   },
+
   SET_PRODUCT_MAP(state, map) {
     state.productMap = map;
   },
@@ -89,6 +93,7 @@ const actions = {
     })
   }
 };
+
 export default {
   namespaced: true,
   state,

klp-ui/src/views/wms/purchasePlan/panels/detail.vue

@@ -119,12 +119,13 @@
             icon="el-icon-refresh"
             @click="handleStatusChange(scope.row, EPurchaseDetailStatus.REVIEW, '待审核')"
           >设为待审核</el-button>
-          <!-- <el-button
+          <el-button
             v-if="scope.row.status === EPurchaseDetailStatus.REVIEW || scope.row.status === EPurchaseDetailStatus.FINISH"
             size="mini"
             type="text"
             icon="el-icon-document"
-          >质保单</el-button> -->
+            @click="handleUploadQualityCertificate(scope.row)"
+          >质保单</el-button>
           <el-button
             v-if="scope.row.status === EPurchaseDetailStatus.REVIEW"
             size="mini"
@@ -175,6 +176,10 @@
       :selected-items="selectedArrivalItems"
       @success="handleStockInSuccess"
     />
+
+    <el-dialog title="上传质保单" :visible.sync="uploadQualityCertificateOpen" width="800px" append-to-body>
+      <quality-certicate :info="uploadQualityCertificateInfo" @confirm="handleUploadQualityCertificateConfirm" />
+    </el-dialog>
   </div>
 </template>
 
@@ -186,6 +191,7 @@ import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect';
 import UserSelect from '@/components/KLPService/UserSelect'
 import { RawMaterialInfo } from '@/components/KLPService';
 import BomInfoMini from '@/components/KLPService/Renderer/BomInfoMini.vue';
+import QualityCerticate from './qualityCerticate.vue'
 
 export default {
   name: "PurchasePlanDetail",
@@ -194,7 +200,8 @@ export default {
     RawMaterialSelect,
     UserSelect,
     RawMaterialInfo,
-    BomInfoMini
+    BomInfoMini,
+    QualityCerticate
   },
   props: {
     planId: {
@@ -258,7 +265,9 @@ export default {
       },
       // 入库单相关
       stockInVisible: false,
-      selectedArrivalItems: []
+      selectedArrivalItems: [],
+      uploadQualityCertificateOpen: false,
+      uploadQualityCertificateInfo: undefined
     };
   },
   computed: {
@@ -412,6 +421,9 @@ export default {
         });
       // });
     },
+    handleUploadQualityCertificateConfirm() {
+      this.handleStatusChange(this.uploadQualityCertificateInfo, EPurchaseDetailStatus.FINISH, '采购完成');
+    },
     /** 创建入库单按钮操作 */
     handleCreateStockIn() {
       // 获取用户选中的明细
@@ -443,6 +455,11 @@ export default {
       if (rawMaterial && rawMaterial.unit) {
         this.form.unit = rawMaterial.unit;
       }
+    },
+    handleUploadQualityCertificate(row) {
+      this.uploadQualityCertificateOpen = true;
+      console.log(row, 'row');
+      this.uploadQualityCertificateInfo = row;
     }
   }
 };

klp-ui/src/views/wms/purchasePlan/panels/qualityCerticate.vue

@@ -0,0 +1,221 @@
+<template>
+  <div v-loading="loading" :element-loading-text="loadingText">
+    <el-steps :active="1" align-center simple>
+      <el-step style="cursor: pointer;" @click.native="active = 0" title="上传质保单" icon="el-icon-upload" />
+      <el-step style="cursor: pointer;" @click.native="active = 1" title="质保单处理" icon="el-icon-edit" />
+      <el-step style="cursor: pointer;" @click.native="active = 2" title="质保单审核" icon="el-icon-check" />
+    </el-steps>
+      <file-upload v-if="active === 0" v-model="uploadQualityCertificateForm.qualityCertificate" />
+
+      <div v-if="active === 1">
+        <el-row>
+          <el-alert title="质保单处理" type="info" />
+        </el-row>
+        
+        <!-- 提取质保单信息,选择使用ocr还是使用大模型 -->
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <!-- 卡片按钮,点击后调用ocr -->
+            <div style="height: 300px; border: 1px solid #ccc; border-radius: 10px; padding: 20px; cursor: pointer;" @click="handleOcr">
+              OCR识别
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <!-- 卡片按钮,点击后调用大模型 -->
+            <div style="height: 300px; border: 1px solid #ccc; border-radius: 10px; padding: 20px; cursor: pointer;" @click="handleModel">
+              大模型识别
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <div v-if="active === 2">
+        <div v-if="resultDiff">
+          <el-alert title="质保单处理结果与历史质保单不一致，请选择处理方式" type="warning" />
+          <el-row>
+            <el-col :span="12">
+              历史质保单
+            </el-col>
+            <el-col :span="12">
+              新质保单
+            </el-col>
+          </el-row>
+          <el-row>
+              <!-- 单选框 -->
+              <el-radio-group v-model="uploadQualityCertificateForm.qualityCertificateType">
+                <el-radio :label="1">使用旧的质保单</el-radio>
+                <el-radio :label="2">使用新的质保单</el-radio>
+                <el-radio :label="3">创建新物料</el-radio>
+              </el-radio-group>
+
+          </el-row>
+          <el-button type="primary" @click="handleConfirm">确认</el-button>
+        </div>
+        <div v-else>
+          <el-row :gutter="20">
+            <el-col :span="12">
+                质保单内容
+            </el-col>
+            <el-col :span="12">
+              <div>
+                  <img style="width: 100%; height: 100%;" :src="file.url" alt="">
+                </div>
+            </el-col>
+          </el-row>
+          <el-button type="primary" @click="handleConfirm">确认</el-button>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import FileUpload from '@/components/FileUpload'
+import { listByIds } from '@/api/system/oss'
+import { updatePurchasePlanDetail } from '@/api/wms/purchasePlanDetail'
+import { recognizeText } from '@/api/system/ocr'
+import { listBomItem } from '@/api/wms/bomItem'
+
+const so = {
+  annex: {
+    loading: '正在保存质保单',
+    handler: (vm, newVal) => {
+      return updatePurchasePlanDetail({
+        ...vm.info,
+        annex: newVal
+      })
+    }
+  },
+  ocr: {
+    loading: '等待ocr识别结果',
+    handler: (vm) => {
+      console.log(vm.file, 'vm.file');
+      return recognizeText({ imgUrl: vm.file.url }).then(res => {
+        console.log(res, 'res');
+        return res;
+      })
+    }
+  },
+  model: {
+    loading: '等待大模型识别结果',
+  },
+  bom: {
+    loading: '正在处理BOM'
+  },
+  oss: {
+    loading: '正在获取质保单',
+    handler: (vm, newVal) => {
+      return listByIds(newVal).then(res => {
+        vm.file = res.data[0];
+        vm.active = 1;
+        return res.data[0];
+      })
+    }
+  },
+  old: {
+    loading: '正在获取历史质保单',
+    handler: (vm, newVal) => {
+      return listBomItem({
+        itemId: vm.info.rawMaterialId,
+      })
+    }
+  }
+}
+
+export default {
+  name: 'QualityCerticate',
+  components: {
+    FileUpload
+  },
+  props: {
+    info: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  watch: {
+    info: {
+      handler(newVal) {
+        this.active = 0;
+        if (newVal.annex) {
+          this.uploadQualityCertificateForm.qualityCertificate = newVal.annex;
+        } else {
+          this.uploadQualityCertificateForm.qualityCertificate = undefined;
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    'uploadQualityCertificateForm.qualityCertificate': {
+      handler(newVal) {
+        if (newVal) {
+          this.loadingMethod('oss')  
+        }
+        this.loadingMethod('annex')
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      uploadQualityCertificateForm: {
+        qualityCertificate: undefined,
+        qualityCertificateType: undefined,
+      },
+      active: 0,
+      file: undefined,
+      loading: false,
+      loadingText: '加载中...',
+      resultDiff: true
+    }
+  },
+  methods: {
+    handleOcr() {
+      this.loadingMethod('ocr', (res) => {
+        console.log(res, 'res');
+      })
+    },
+    handleModel() {
+      this.active = 2;
+    },
+    async handleConfirm() {
+      // 确认内容，如果质保单内容与历史质保单内容不一致，则提示用户选择处理方式
+      if (this.resultDiff) {
+        // 需要选择处理方式
+        if (!this.uploadQualityCertificateForm.qualityCertificateType) {
+          this.$modal.msgError('请选择处理方式');
+          return;
+        }
+        if (this.uploadQualityCertificateForm.qualityCertificateType === 1) {
+          console.log('使用旧的质保单');
+        } else if (this.uploadQualityCertificateForm.qualityCertificateType === 2) {
+          console.log('使用新的质保单');
+        } else if (this.uploadQualityCertificateForm.qualityCertificateType === 3) {
+          console.log('创建新物料');
+        }
+      }
+
+      // 变更状态
+      this.active = 3;
+      this.$emit('confirm')
+    },
+    loadingMethod(key, fn) {
+      this.loading = true;
+      this.loadingText = so[key].loading;
+      so[key].handler(this, this.uploadQualityCertificateForm.qualityCertificate).then((res) => {
+        fn && fn(res)
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+        this.$modal.msgError('操作失败');
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-row {
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+</style>

klp-ui/src/views/wms/stock/box.vue

@@ -308,8 +308,8 @@ export default {
     handleTreeNodeClick(node) {
       this.currentTreeNode = node;
       // 图表高亮并聚焦对应节点
-      if (node && node.id) {
+      if (node && node.warehouseId) {
-        this.highlightChartNode(node.id);
+        this.highlightChartNode(node.warehouseId);
       }
     },
     // 高亮并聚焦图表节点
@@ -323,7 +323,7 @@ export default {
       });
       // 聚焦节点（自动缩放到该节点）
       this.chart.dispatchAction({
-        type: 'zoomToNode',
+        type: 'treemapRootToNode',
         seriesIndex: 0,
         targetNodeId: id
       });

klp-ui/src/views/wms/stock/index.vue

@@ -4,8 +4,7 @@
     <div class="stock-tree-col">
       <el-card shadow="never" class="stock-tree-card">
         <div slot="header" class="stock-tree-title">仓库结构</div>
-        <el-tree :data="warehouseTreeData" :props="treeProps" node-key="warehouseId" highlight-current
+        <WarehouseTree @node-click="handleTreeSelect" />
-          @node-click="handleTreeSelect" :expand-on-click-node="false" :default-expand-all="true" class="stock-tree" />
       </el-card>
     </div>
     <!-- 右侧内容 -->
@@ -35,31 +34,21 @@
       </el-form>
 
       <el-row :gutter="10" class="mb8">
-        <!-- <el-col :span="1.5">
+        <el-col :span="1.5">
-          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
-            v-hasPermi="['wms:stock:add']">新增</el-button>
         </el-col>
         <el-col :span="1.5">
-          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleStockBox">添加暂存单据</el-button>
-            v-hasPermi="['wms:stock:edit']">修改</el-button>
         </el-col>
         <el-col :span="1.5">
-          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleViewStockBox">查看暂存单据</el-button>
-            v-hasPermi="['wms:stock:remove']">删除</el-button>
-        </el-col> -->
-        <el-col :span="1.5">
-          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-            v-hasPermi="['wms:stock:export']">导出</el-button>
         </el-col>
-        <!-- <el-col :span="1.5">
-          <el-button type="primary" plain icon="el-icon-data-analysis" size="mini" @click="showStockBox">库存分析</el-button>
-        </el-col> -->
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
 
       <el-table v-loading="loading" :data="stockList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="主键ID" align="center" prop="stockId" v-if="true" />
+        <el-table-column label="仓库" align="center" prop="warehouseName" />
         <el-table-column label="物品类型" align="center" prop="itemType">
           <template slot-scope="scope">
             <dict-tag :options="dict.type.stock_item_type" :value="scope.row.itemType" />
@@ -138,13 +127,17 @@
           <el-button @click="cancel">取 消</el-button>
         </div>
       </el-dialog>
+
+      <el-dialog :visible.sync="stockBoxVisible" title="暂存单据" width="800px" append-to-body>
+        <stock-io :data="stockBoxData" @generateBill="handleGenerateBill" />
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script>
-import { listStock, getStock, delStock, addStock, updateStock } from "@/api/wms/stock";
+import { listStock, delStock, addStock, updateStock } from "@/api/wms/stock";
-import { listWarehouse } from "@/api/wms/warehouse";
+import { addStockIoWithDetail } from "@/api/wms/stockIo";
 import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
 import ProductSelect from "@/components/KLPService/ProductSelect";
 import WarehouseSelect from "@/components/WarehouseSelect";
@@ -152,6 +145,8 @@ import StockBox from './box';
 import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
 import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
 import BomInfoMini from "@/components/KLPService/Renderer/BomInfoMini";
+import StockIo from './panels/stockIo.vue';
+import WarehouseTree from "@/components/KLPService/WarehouseTree/index.vue";
 
 export default {
   name: "Stock",
@@ -163,7 +158,9 @@ export default {
     StockBox,
     RawMaterialInfo,
     ProductInfo,
-    BomInfoMini
+    BomInfoMini,
+    StockIo,
+    WarehouseTree
   },
   data() {
     return {
@@ -223,17 +220,14 @@ export default {
           { required: true, message: "批次号不能为空", trigger: "blur" }
         ],
       },
-      // 仓库树数据
+      // 暂存用于创建出库单或移库单的数据
-      warehouseTreeData: [],
+      stockBoxData: [],
-      treeProps: {
+      stockBoxVisible: false,
-        children: 'children',
+      // 选中的数据
-        label: 'warehouseName',
+      selectedRows: []
-        isLeaf: () => false
-      },
     };
   },
   created() {
-    this.getWarehouseTree();
     this.getList();
   },
   methods: {
@@ -246,21 +240,6 @@ export default {
         this.loading = false;
       });
     },
-    // 获取仓库树数据
-    getWarehouseTree() {
-      listWarehouse().then(response => {
-        this.warehouseTreeData = this.handleTree(response.data, 'warehouseId', 'parentId');
-      });
-    },
-    // 处理树结构
-    handleTree(data, id, parentId) {
-      const cloneData = JSON.parse(JSON.stringify(data));
-      return cloneData.filter(father => {
-        const branchArr = cloneData.filter(child => father[id] === child[parentId]);
-        if (branchArr.length > 0) father.children = branchArr;
-        return father[parentId] === 0 || father[parentId] === null;
-      });
-    },
     // 树节点点击
     handleTreeSelect(node) {
       this.queryParams.warehouseId = node.warehouseId;
@@ -303,28 +282,11 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
+      this.selectedRows = selection;
       this.ids = selection.map(item => item.stockId)
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加库存：原材料/产品与库区/库位的存放关系";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.loading = true;
-      this.reset();
-      const stockId = row.stockId || this.ids
-      getStock(stockId).then(response => {
-        this.loading = false;
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改库存：原材料/产品与库区/库位的存放关系";
-      });
-    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
@@ -371,12 +333,26 @@ export default {
         ...this.queryParams
       }, `stock_${new Date().getTime()}.xlsx`)
     },
-    /** 显示库存分析图表 */
+    handleStockBox() {
-    showStockBox() {
+      // 添加到暂存单据中，并且去重,去重依据为stockId是否相同
-      this.stockBoxVisible = true;
+      const list = [...this.selectedRows, ...this.stockBoxData];
-      this.$nextTick(() => {
+      console.log(list);
-        this.$refs.stockBoxChart && this.$refs.stockBoxChart.refresh();
+      const uniqueStockBoxData = list.filter((item, index, self) =>
+        index === self.findIndex(t => t.stockId === item.stockId)
+      );
+      this.stockBoxData = uniqueStockBoxData;
+      
+      this.$modal.msgSuccess("暂存成功，请点击“暂存单据”按钮生成单据");
+    },
+    handleGenerateBill(data) {
+      addStockIoWithDetail(data).then(response => {
+        this.$modal.msgSuccess("生成单据成功");
       });
+    },
+    handleViewStockBox() {
+      // 查看暂存单据
+      console.log(this.stockBoxData);
+      this.stockBoxVisible = true;
     }
   }
 };

klp-ui/src/views/wms/stock/panels/stockIo.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <el-form :model="form" label-width="120px">
+      <el-form-item label="单号">
+        <el-input v-model="form.stockIoCode" placeholder="请输入单号" />
+      </el-form-item>
+      <el-form-item label="类型">
+        <el-select v-model="form.ioType" placeholder="请选择类型">
+          <el-option label="入库" value="in" />
+          <el-option label="出库" value="out" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="业务类型">
+        <el-select v-model="form.bizType" placeholder="请选择业务类型">
+          <el-option
+            v-for="dict in dict.type.stock_biz_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <el-table :data="stockBoxData" style="width: 100%">
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="warehouseName" label="仓库" />
+      <el-table-column prop="itemName" label="物料" />
+      <el-table-column prop="quantity" label="数量" width="200">
+        <template slot-scope="scope">
+          <el-input-number v-model="scope.row.count" :min="0" :step="1" :max="scope.row.quantity" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="unit" label="单位" />
+      <el-table-column label="操作" width="100">
+        <template slot-scope="scope">
+          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="text-align: right; margin-top: 10px;">
+      <el-button type="danger" @click="handleDeleteAll">清空</el-button>
+      <el-button type="primary" @click="handleGenerateBill">生成单据</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StockIo',
+  dicts: ['stock_biz_type'],
+  data() {
+    return {
+      stockBoxData: [],
+      form: {
+        stockIoCode: '',
+        ioType: 'in',
+        bizType: 'stock_io',
+        remark: '',
+      }
+    }
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    data: {
+      handler(newVal) {
+        this.stockBoxData = newVal.map(item => ({
+          ...item,
+          count: 0,
+        }));
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    handleDelete(row) {
+      this.stockBoxData = this.stockBoxData.filter(item => item.stockId !== row.stockId);
+    },
+    handleDeleteAll() {
+      this.stockBoxData = [];
+    },
+    handleGenerateBill() {
+      this.$emit('generateBill', {
+        ...this.form,
+        details: this.stockBoxData.map(item => ({
+          ...item,
+          status: 0,
+          quantity: item.count,
+          batchNo: item.batchNo,
+          remark: item.remark
+        }))
+      });
+    }
+  }
+}
+</script>