bom处理拆分组件

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

@@ -0,0 +1,142 @@
+<!-- 当新旧质保单不一致时, 需要用户选择处理方式, 在这个组件内处理通过confirm回调来通知父组件完成 -->
+<template>
+  <div>
+    <el-row>
+      <el-alert title="质保单处理结果与历史质保单不一致，请选择处理方式" type="warning" />
+    </el-row>
+    <el-row :gutter="20" style="margin-top: 20px;">
+      <el-col :span="12">
+        <el-table :data="oldResult" style="width: 100%">
+          <el-table-column prop="attrKey" label="属性名称" />
+          <el-table-column prop="attrValue" label="属性值" />
+        </el-table>
+      </el-col>
+      <el-col :span="12">
+        <el-table :data="newResult" style="width: 100%">
+          <el-table-column prop="attrKey" label="属性名称" />
+          <el-table-column prop="attrValue" label="属性值" />
+        </el-table>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 20px;">
+      <el-col>
+        <el-radio-group v-model="uploadQualityCertificateForm.qualityCertificateType">
+          <el-radio v-for="item in options" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
+        </el-radio-group>
+      </el-col>
+    </el-row>
+    <el-button type="primary" @click="handleConfirm">确认</el-button>
+  </div>
+</template>
+
+<script>
+import { addBomItem } from '@/api/wms/bomItem'
+import { addBom } from '@/api/wms/bom'
+import { updateRawMaterial, addRawMaterial, getRawMaterial } from '@/api/wms/rawMaterial'
+
+export default {
+  name: 'Merger',
+  props: {
+    oldResult: {
+      type: Array,
+      required: true
+    },
+    newResult: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      options: [
+        {
+          label: '使用旧的质保单',
+          value: 1
+        },
+        {
+          label: '使用新的质保单',
+          value: 2
+        },
+        {
+          label: '创建新物料',
+          value: 3
+        }
+      ],
+      uploadQualityCertificateForm: {
+        qualityCertificateType: 1
+      }
+    }
+  },
+  methods: {
+    async handleConfirm() {
+      if (!this.uploadQualityCertificateForm.qualityCertificateType) {
+        this.$modal.msgError('请选择处理方式');
+        return;
+      }
+      this.$emit('confirm', {
+        status: 'start',
+      })
+      try {
+        if (this.uploadQualityCertificateForm.qualityCertificateType === 1) {
+          // 什么都不需要做,直接完成就可以
+          console.log('使用旧的质保单');
+        } else if (this.uploadQualityCertificateForm.qualityCertificateType === 2) {
+          // 创建一个新的BOM
+          const bom = await addBom({
+            bomName: 'N' + new Date().getTime(),
+            bomCode: 'N' + new Date().getTime(),
+          })
+          // 将BOMID赋值给对应的materialId
+          await updateRawMaterial({
+            rawMaterialId: this.info.rawMaterialId,
+            bomId: bom.data.bomId,
+          })
+          // 逐项创建BOMItem
+          for (let i = 0; i < this.newResult.length; i++) {
+            await addBomItem({
+              bomId: bom.data.bomId,
+              attrKey: this.newResult[i].attrKey,
+              attrValue: this.newResult[i].attrValue,
+            })
+          }
+          console.log('使用新的质保单');
+        } else if (this.uploadQualityCertificateForm.qualityCertificateType === 3) {
+          console.log('创建新物料');
+          // 创建一个新的BOM
+          const bom = await addBom({
+            bomName: 'N' + new Date().getTime(),
+            bomCode: 'N' + new Date().getTime(),
+          })
+          // 逐项创建BOMItem
+          for (let i = 0; i < this.newResult.length; i++) {
+            await addBomItem({
+              bomId: bom.data.bomId,
+              attrKey: this.newResult[i].attrKey,
+              attrValue: this.newResult[i].attrValue,
+            })
+          }
+          // 创建一个新的物料,使用原有物料的信息, code使用时间戳
+          const { rawMaterialId, rawMaterialCode, ...rawMaterial } = (await getRawMaterial(this.info.rawMaterialId)).data
+          const newMaterial = await addRawMaterial({
+            ...rawMaterial,
+            bomId: bom.data.bomId,
+            rawMaterialCode: 'N' + new Date().getTime(),
+          })
+          // 修改采购单据赋值为新的物料
+          await updatePurchasePlanDetail({
+            detailId: this.info.detailId,
+            rawMaterialId: newMaterial.data.rawMaterialId,
+          })
+        }
+        this.$emit('confirm', {
+          status: 'success',
+        })
+      } catch {
+        this.$emit('confirm', {
+          status: 'error',
+        })
+      }
+    }
+  }
+}
+</script>

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

@@ -20,14 +20,14 @@
             <!-- 卡片按钮,点击后调用ocr -->
             <div style="height: 300px; border: 1px solid #ccc; border-radius: 10px; padding: 20px; cursor: pointer;" @click="handleOcr">
               OCR识别
-              <img src="@/assets/images/ocr.png" alt="ocr" style="width: 100%; height: 100%;" />
+              <img :src="ocrImage" alt="ocr" style="width: 100%; height: 100%;" />
             </div>
           </el-col>
           <el-col :span="12">
             <!-- 卡片按钮,点击后调用大模型 -->
             <div style="height: 300px; border: 1px solid #ccc; border-radius: 10px; padding: 20px; cursor: pointer;" @click="handleModel">
               大模型识别
-              <img src="@/assets/images/model.png" alt="model" style="width: 100%; height: 100%;" />
+              <img :src="modelImage" alt="model" style="width: 100%; height: 100%;" />
             </div>
           </el-col>
         </el-row>
@@ -35,34 +35,7 @@
 
       <div v-if="active === 2">
         <div v-if="resultDiff">
-          <el-row>
-            <el-alert title="质保单处理结果与历史质保单不一致，请选择处理方式" type="warning" />
-          </el-row>
-          
-          <el-row>
-            <el-col :span="12">
-              <el-table :data="oldResult" style="width: 100%">
-                <el-table-column prop="attrKey" label="属性名称" />
-                <el-table-column prop="attrValue" label="属性值" />
-              </el-table>
-            </el-col>
-            <el-col :span="12">
-              <el-table :data="newResult" style="width: 100%">
-                <el-table-column prop="attrKey" label="属性名称" />
-                <el-table-column prop="attrValue" label="属性值" />
-              </el-table>
-            </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>
+          <merger :old-result="oldResult" :new-result="newResult" @confirm="handleMergerConfirm" />
         </div>
         <div v-else>
           <el-row>
@@ -70,7 +43,10 @@
           </el-row>
           <el-row :gutter="20">
             <el-col :span="12">
-                质保单内容
+              <el-table :data="newResult" style="width: 100%">
+                <el-table-column prop="attrKey" label="属性名称" />
+                <el-table-column prop="attrValue" label="属性值" />
+              </el-table>
             </el-col>
             <el-col :span="12">
               <div>
@@ -89,9 +65,12 @@ import FileUpload from '@/components/FileUpload'
 import { listByIds } from '@/api/system/oss'
 import { updatePurchasePlanDetail } from '@/api/wms/purchasePlanDetail'
 import { recognizeText, recognizeBomByModel } from '@/api/system/ocr'
-import { listBomItem, addBomItem } from '@/api/wms/bomItem'
-import { addBom } from '@/api/wms/bom'
-import { updateRawMaterial, addRawMaterial, getRawMaterial } from '@/api/wms/rawMaterial'
+import { listBomItem } from '@/api/wms/bomItem'
+import { getRawMaterial } from '@/api/wms/rawMaterial'
+import Merger from './merger.vue'
+
+import modelImage from '@/assets/images/model.png'
+import ocrImage from '@/assets/images/ocr.png'
 
 const so = {
   annex: {
@@ -146,6 +125,11 @@ const so = {
   }
 }
 
+// 原子操作, 用于细化的进度展示, 无论其同步还是异步一律视作异步函数执行, 并返回一个Promise
+const atoms = {
+
+}
+
 export default {
   name: 'QualityCerticate',
   components: {
@@ -193,6 +177,8 @@ export default {
       resultDiff: true,
       oldResult: [],
       newResult: [],
+      modelImage,
+      ocrImage,
     }
   },
   methods: {
@@ -205,7 +191,6 @@ export default {
       })
     },
     handleModel() {
-
       this.loadingMethod('model', async (res) => {
         await this.loadingMethod('old')
         console.log(this);
@@ -215,74 +200,23 @@ export default {
       
     },
     async handleConfirm() {
-      // 确认内容，如果质保单内容与历史质保单内容不一致，则提示用户选择处理方式
-      if (this.resultDiff) {
-        // 需要选择处理方式
-        if (!this.uploadQualityCertificateForm.qualityCertificateType) {
-          this.$modal.msgError('请选择处理方式');
-          return;
-        }
-        this.loading = true;
-        this.loadingText = '正在处理产品BOM';
-        if (this.uploadQualityCertificateForm.qualityCertificateType === 1) {
-          // 什么都不需要做,直接完成就可以
-          console.log('使用旧的质保单');
-        } else if (this.uploadQualityCertificateForm.qualityCertificateType === 2) {
-          // 创建一个新的BOM
-          const bom = await addBom({
-            bomName: 'N' + new Date().getTime(),
-            bomCode: 'N' + new Date().getTime(),
-          })
-          // 将BOMID赋值给对应的materialId
-          await updateRawMaterial({
-            rawMaterialId: this.info.rawMaterialId,
-            bomId: bom.data.bomId,
-          })          
-          // 逐项创建BOMItem
-          for (let i = 0; i < this.newResult.length; i++) {
-            await addBomItem({
-              bomId: bom.data.bomId,
-              attrKey: this.newResult[i].attrKey,
-              attrValue: this.newResult[i].attrValue,
-            })
-          }
-          console.log('使用新的质保单');
-        } else if (this.uploadQualityCertificateForm.qualityCertificateType === 3) {
-          console.log('创建新物料');
-          // 创建一个新的BOM
-          const bom = await addBom({
-            bomName: 'N' + new Date().getTime(),
-            bomCode: 'N' + new Date().getTime(),
-          })
-          // 逐项创建BOMItem
-          for (let i = 0; i < this.newResult.length; i++) {
-            await addBomItem({
-              bomId: bom.data.bomId,
-              attrKey: this.newResult[i].attrKey,
-              attrValue: this.newResult[i].attrValue,
-            })
-          }
-          // 创建一个新的物料,使用原有物料的信息, code使用时间戳
-          const { rawMaterialId, rawMaterialCode, ...rawMaterial } = (await getRawMaterial(this.info.rawMaterialId)).data
-          const newMaterial = await addRawMaterial({
-            ...rawMaterial,
-            bomId: bom.data.bomId,
-            rawMaterialCode: 'N' + new Date().getTime(),
-          })
-          // 修改采购单据赋值为新的物料
-          await updatePurchasePlanDetail({
-            detailId: this.info.detailId,
-            rawMaterialId: newMaterial.data.rawMaterialId,
-          })
-        }
-      }
-
-      this.loading = false;
-
       // 变更状态
       this.active = 3;
       this.$emit('confirm')
     },
+    handleMergerConfirm(res) {
+      if (res.status === 'start') {
+        this.loading = true;
+        this.loadingText = '正在处理产品BOM';
+      } else if (res.status === 'success') {
+        this.loading = false;
+        this.active = 3;
+        this.$emit('confirm')
+      } else if (res.status === 'error') {
+        this.loading = false;
+        this.$modal.msgError('质保单处理失败');
+      }
+    },
     async loadingMethod(key, fn) {
       this.loading = true;
       this.loadingText = so[key].loading;