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>
      <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>