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

<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>
      <div v-if="active === 0" style="padding: 30px;">
        <file-upload v-model="uploadQualityCertificateForm.qualityCertificate" />
      </div>

      <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识别
              <img src="@/assets/images/ocr.png" 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%;" />
            </div>
          </el-col>
        </el-row>
      </div>

      <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>
        </div>
        <div v-else>
          <el-row>
            <el-alert title="请核对识别结果是否正确" type="success" />
          </el-row>
          <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, 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'

const so = {
  annex: {
    loading: '正在保存质保单',
    handler: async (vm, newVal) => {
      return await updatePurchasePlanDetail({
        ...vm.info,
        annex: newVal
      })
    }
  },
  ocr: {
    loading: '等待ocr识别结果',
    handler: async (vm) => {
      const text = await recognizeText({ imgUrl: vm.file.url })
      return text;
    }
  },
  model: {
    loading: '等待大模型识别结果',
    handler: async (vm) => {
      const res = await recognizeBomByModel({ imageUrl: vm.file.url })
      vm.newResult = res.data.structuredResult.attributes;
      vm.$modal.msgSuccess(res.data.structuredResult.summary);
      return res;
    }
  },
  bom: {
    loading: '正在处理BOM'
  },
  oss: {
    loading: '正在获取质保单',
    handler: async (vm, newVal) => {
      const res = await listByIds(newVal)
      vm.file = res.data[0];
      vm.active = 1;
      return res.data[0];
    }
  },
  old: {
    loading: '正在获取历史质保单',
    handler: async (vm, newVal) => {
      // 查询对应的bomId
      const res = await getRawMaterial(vm.info.rawMaterialId)
      const bomId = res.data.bomId;
      const bomItemRes = await listBomItem({
        bomId,
      })
      vm.oldResult = bomItemRes.rows;
      return bomItemRes.rows;
    }
  }
}

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,
      oldResult: [],
      newResult: [],
    }
  },
  methods: {
    handleOcr() {
      this.loadingMethod('ocr', (res) => {
        this.loadingMethod('old').then(() => {
          this.handleCompareResult()
          this.active = 2;
        })
      })
    },
    handleModel() {

      this.loadingMethod('model', async (res) => {
        await this.loadingMethod('old')
        console.log(this);
        this.handleCompareResult()
        this.active = 2;
      })
      
    },
    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')
    },
    async loadingMethod(key, fn) {
      this.loading = true;
      this.loadingText = so[key].loading;
      try {
        const res = await so[key].handler(this, this.uploadQualityCertificateForm.qualityCertificate)
        fn && await fn(res)
        return res;
      } catch {
        this.$modal.msgError('操作失败');
      } finally {
        this.loading = false;
      }
    },
    // 比较新旧result是否一致
    handleCompareResult() {
      // 先检查新旧result是否一致
      if (this.oldResult.length !== this.newResult.length) {
        this.resultDiff = true;
        return;
      }
      // 比较新旧result是否一致
      for (let i = 0; i < this.oldResult.length; i++) {
        if (this.oldResult[i].attrKey !== this.newResult[i].attrKey || this.oldResult[i].attrValue !== this.newResult[i].attrValue) {
          this.resultDiff = true;
          return;
        }
      }
      this.resultDiff = false;
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  margin-top: 20px;
}
</style>