质保单上传整体结构

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>