smart-bid-web/src/views/enterpriseLibrary/qualification/components/child/QualificationFormChild.vue

<template>
  <div class="qualification-form">
    <el-form
      :model="formData"
      :rules="rules"
      ref="qualificationForm"
      label-width="110px"
      label-position="top"
      class="form-wrapper"
    >
      <!-- 资质证书上传 -->
      <el-form-item label="资质证书附件" prop="files">
        <UploadFile
          ref="uploadFileComp"
          :fileList="formData.files"
          :fileUploadRule="qualificationUploadRule"
          @file-change="handleFileChange"
          @del-file="handleDelFile"
          :uploadType="uploadType"
          :maxFileTips="maxFileTips"
          type="qualification_certificate"
        />
      </el-form-item>

      <!-- 证书名称 -->
      <el-form-item label="证书名称" prop="certificateName">
        <el-input
          v-model="formData.certificateName"
          placeholder="文件上传后自动提取"
          class="form-control"
          maxlength="50"
        ></el-input>
      </el-form-item>

      <!-- 证书编号 -->
      <el-form-item label="证书编号" prop="certificateCode">
        <el-input
          v-model="formData.certificateCode"
          placeholder="文件上传后自动提取"
          class="form-control"
          maxlength="32"
        ></el-input>
      </el-form-item>

      <!-- 发证日期 -->
      <el-form-item label="发证日期" prop="certificateDate">
        <el-date-picker
          v-model="formData.certificateDate"
          type="date"
          placeholder="文件上传后自动提取"
          value-format="yyyy-MM-dd"
          class="form-control"
        />
      </el-form-item>

      <!-- 证书有效截止日期 -->
      <el-form-item label="证书有效截止日期" prop="certificateEndDate">
        <el-date-picker
          v-model="formData.certificateEndDate"
          type="date"
          placeholder="文件上传后自动提取"
          value-format="yyyy-MM-dd"
          class="form-control"
        />
      </el-form-item>

      <!-- 发证机构 -->
      <el-form-item label="发证机构" prop="certificateInstitution">
        <el-input
          v-model="formData.certificateInstitution"
          placeholder="文件上传后自动提取"
          class="form-control"
          maxlength="64"
        ></el-input>
      </el-form-item>

      <!-- 资质类型 -->
      <el-form-item label="资质类型" prop="qualificationType">
        <el-select
          v-model="formData.qualificationType"
          placeholder="请选择资质类型"
          clearable
          class="form-control"
        >
          <el-option
            v-for="item in qualificationTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploadFile from '@/views/common/UploadFile.vue'

// 工具函数：安全获取数组
const safeGetArray = (value) => Array.isArray(value) ? value : []

export default {
  name: 'QualificationFormChild',
  components: { UploadFile },
  dicts: ['identification_tag'],
  data() {
    return {
      uploadType: 'jpg、png、pdf',
      maxFileTips: '100MB',
      ocrRuleList: ['qualification_certificate'], // 资质证书OCR识别规则
      fileUploadList: [],
      // OCR识别结果映射关系
      ocrResultParams: {
        "证书名称": "certificateName",
        "证书编号": "certificateCode",
        "发证日期": "certificateDate",
        "证书有效截止日期": "certificateEndDate",
        "发证机构": "certificateInstitution"
      },
      formData: {
        files: [], // 证书文件列表
        certificateName: '',
        certificateCode: '',
        certificateDate: '',
        certificateEndDate: '',
        certificateInstitution: '',
        qualificationType: '',
        delFileList: [] // 被删除的文件路径列表（关键：记录替换/删除的文件）
      },
      qualificationTypeOptions: [],
      rules: {
        files: [
          { required: true, message: '请上传资质证书附件', trigger: 'change' }
        ],
        certificateName: [
          { required: true, message: '请输入证书名称', trigger: 'blur' }
        ],
        certificateCode: [
          { required: true, message: '请输入证书编号', trigger: 'blur' }
        ],
        certificateDate: [
          { required: true, message: '请选择发证日期', trigger: 'change' }
        ],
        certificateEndDate: [
          { required: true, message: '请选择有效截止日期', trigger: 'change' }
        ],
        qualificationType: [
          { required: true, message: '请选择资质类型', trigger: 'change' }
        ]
      }
    };
  },
  computed: {
    qualificationUploadRule() {
      return this.fileUploadList[0] || {};
    }
  },
  watch: {
    'dict.type.identification_tag': {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.addOcrRule();
        }
      },
      immediate: true
    }
  },
  methods: {
    // 加载资质类型字典
    loadQualificationTypeDict() {
      this.getDicts('qualification_type').then(response => {
        this.qualificationTypeOptions = response.data.map(item => ({
          label: item.dictLabel,
          value: item.dictValue
        }));
      }).catch(error => {
        console.error('加载资质类型字典失败：', error);
      });
    },

    // 接收父组件数据并回显（优化：确保文件路径完整）
    setFormData(data) {
      // 1. 过滤“资质证书类型”的文件
      const qualificationFiles = safeGetArray(data.fileList)
        .filter(file => file && file.businessType === 'qualification_certificate')
        .map(file => ({
          ...file,
          uid: file.uid || Date.now() + Math.random().toString(36).substr(2, 9), // 唯一ID
          name: file.fileName || file.name || '未命名文件',
          lsFilePath: file.lsFilePath || file.fileUrl || '', // 预览路径
          filePath: file.filePath || file.uploadPath || '', // 存储路径（用于删除）
          status: 'success', // 标记为已上传
          // 补充上传组件所需的响应结构（删除时需要）
          response: {
            fileRes: {
              uploadPath: file.filePath || file.uploadPath || '',
              filePath: file.filePath || file.uploadPath || ''
            }
          }
        }));

      // 2. 赋值表单数据
      this.formData = {
        ...data,
        files: qualificationFiles,
        delFileList: [] // 重置删除列表
      };

      // 3. 触发上传组件刷新
      this.$nextTick(() => {
        if (this.$refs.uploadFileComp?.updatePreview) {
          this.$refs.uploadFileComp.updatePreview(qualificationFiles);
        }
      });
    },

    // 处理文件变更（新增/替换文件时触发）
    handleFileChange(files) {
      // 标记文件业务类型
      const markedFiles = files.map(file => ({
        ...file,
        businessType: 'qualification_certificate'
      }));
      this.formData.files = markedFiles;

      // 处理替换场景：当上传新文件时，旧文件会被自动删除，需记录旧文件路径
      this.handleReplaceFile(markedFiles);

      // 触发OCR识别
      this.handleOcrResult(markedFiles);
    },

    // 关键：处理文件替换场景（新文件上传时，旧文件需加入删除列表）
    handleReplaceFile(newFiles) {
      // 新文件的唯一标识（uid）集合
      const newUids = newFiles.map(file => file.uid);
      // 旧文件中不在新文件列表的，即为被替换的文件
      const replacedFiles = this.formData.files.filter(oldFile =>
        !newUids.includes(oldFile.uid)
      );

      // 将被替换的文件路径加入删除列表（去重）
      replacedFiles.forEach(file => {
        const filePath = file.response?.fileRes?.uploadPath || file.filePath;
        if (filePath && !this.formData.delFileList.includes(filePath)) {
          this.formData.delFileList.push(filePath);
        }
      });
    },

    // 处理文件删除（用户主动删除时触发）
    handleDelFile(file) {
      const filePath = file.response?.fileRes?.uploadPath || file.filePath;
      if (filePath && !this.formData.delFileList.includes(filePath)) {
        this.formData.delFileList.push(filePath);
      }
      // 删除文件后清空关联字段
      if (this.formData.files.length === 0) {
        this.formData.certificateName = '';
        this.formData.certificateCode = '';
        this.formData.certificateDate = '';
        this.formData.certificateEndDate = '';
        this.formData.certificateInstitution = '';
      }
    },

    // 表单验证
    validate() {
      return new Promise((resolve, reject) => {
        if (!this.$refs.qualificationForm) {
          reject(new Error('表单实例未加载完成'));
          return;
        }

        this.$refs.qualificationForm.validate((valid) => {
          if (valid) {
            resolve(this.formData); // 返回包含delFileList的完整数据
          } else {
            reject(new Error('资质证书信息填写不完整'));
          }
        });
      });
    },

    // 重置表单（优化：确保删除列表被清空）
    resetForm() {
      this.$nextTick(async () => {
        // 清空上传组件的文件
        if (this.$refs.uploadFileComp) {
          this.$refs.uploadFileComp.clearFiles();
        }

        // 重置表单字段
        if (this.$refs.qualificationForm) {
          this.$refs.qualificationForm.resetFields();
        }

        // 清空删除列表和文件列表
        this.formData = {
          ...this.formData,
          files: [],
          delFileList: [],
          certificateName: '',
          certificateCode: '',
          certificateDate: '',
          certificateEndDate: '',
          certificateInstitution: '',
          qualificationType: ''
        };
      });
    },

    // 初始化OCR识别规则
    addOcrRule() {
      this.ocrRuleList.forEach(item => this.ocrRule(item));
    },

    // 获取OCR识别规则
    ocrRule(type) {
      const foundItem = this.dict.type.identification_tag?.find(item => item.value === type);
      if (!foundItem) {
        this.$message.warning(`未找到${type}的识别规则配置`);
        return;
      }

      this.fileUploadList.push({
        fileUploadType: foundItem.value,
        fields_json: foundItem.raw?.remark,
        suffix: 'mainDatabase'
      });
    },

    // 处理OCR识别结果
    handleOcrResult(files) {
      if (!files || files.length === 0) return;

      this.$bus.$emit('startUpload', '正在识别证书信息');

      try {
        const firstFile = files[0];
        if (firstFile.response?.ocrResult) {
          const ocrResult = firstFile.response.ocrResult;
          if (ocrResult.status_code === 200) {
            const chat_res = ocrResult.data?.chat_res;
            if (chat_res && typeof chat_res === 'object') {
              // 映射识别结果到表单字段
              Object.keys(chat_res).forEach(key => {
                const formField = this.ocrResultParams[key];
                if (formField && chat_res[key]) {
                  this.formData[formField] = chat_res[key];
                }
              });
              this.$message.success('OCR识别成功，已自动填充证书信息');
              // 触发表单验证
              Object.keys(this.ocrResultParams).forEach(key => {
                const formField = this.ocrResultParams[key];
                this.$refs.qualificationForm.validateField(formField);
              });
            }
          } else {
            this.$message.error(`识别失败: ${ocrResult.status_msg || '未知错误'}`);
          }
        }
      } catch (error) {
        this.$message.error(`处理识别结果失败: ${error.message}`);
      } finally {
        this.$bus.$emit('endUpload');
      }
    }
  },
  created() {
    this.loadQualificationTypeDict();
  }
};
</script>

<style scoped lang="scss">
.basic-info-title {
  display: flex;
  align-items: center;
  margin: 0 0 20px 0;
  span {
    margin: 0 5px;
    font-size: 20px;
    color: #333;
  }
  img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
}

.qualification-form {
  padding: 0;
}

.el-form {
  margin-top: 15px;
}

.form-control {
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}

::v-deep .el-form-item__label {
  color: #4e5969;
  font-weight: 500;
}

.form-wrapper {
  padding: 24px;
  background: #fff;
}
</style>