platform-vue/src/views/basicSettings/tenants/components/qualification.vue

<template>
    <el-dialog v-model="visible" title="资质文件管理" width="650px" destroy-on-close>
      <el-form 
        ref="formRef" 
        :model="formData" 
        :rules="rules" 
        label-width="110px" 
        v-loading="loading"
        style="padding: 10px 20px"
      >
        <el-form-item label="租户名称">
          <el-input v-model="tenantName" disabled />
        </el-form-item>
  
        <el-form-item label="资质类型" prop="type">
          <el-select v-model="formData.type" placeholder="请选择资质类型" style="width: 100%">
            <el-option label="营业执照" value="business_license" />
            <el-option label="开户许可证" value="bank_account_permit" />
            <el-option label="行业许可证" value="industry_license" />
            <el-option label="其他资质" value="others" />
          </el-select>
        </el-form-item>
  
        <el-form-item label="资质图片" prop="file_url">
          <el-upload
            class="avatar-uploader"
            action="/api/platform/common/upload" 
            :show-file-list="false"
            :on-success="handleUploadSuccess"
            :before-upload="beforeAvatarUpload"
            name="file"
          >
            <img v-if="formData.file_url" :src="formData.file_url" class="qualification-img" />
            <el-icon v-else class="uploader-icon"><Plus /></el-icon>
          </el-upload>
          <div class="upload-tip">支持 jpg/png 格式，大小不超过 2MB</div>
        </el-form-item>
  
        <el-form-item label="有效期至" prop="expire_time">
          <el-date-picker
            v-model="formData.expire_time"
            type="date"
            placeholder="选择过期日期"
            style="width: 100%"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
  
        <el-form-item label="备注说明">
          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
  
      <template #footer>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="submitForm">保存资质</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { ElMessage } from 'element-plus';
  import { Plus } from '@element-plus/icons-vue';
  // 假设你有对应的资质接口
  // import { saveQualification, getQualificationDetail } from '@/api/tenant';
  
  const visible = ref(false);
  const loading = ref(false);
  const submitting = ref(false);
  const tenantName = ref('');
  const formRef = ref();
  
  const formData = reactive({
    tid: null,
    type: '',
    file_url: '',
    expire_time: '',
    remark: ''
  });
  
  const rules = {
    type: [{ required: true, message: '请选择资质类型', trigger: 'change' }],
    file_url: [{ required: true, message: '请上传资质图片', trigger: 'change' }],
    expire_time: [{ required: true, message: '请选择有效期', trigger: 'change' }]
  };
  
  // 打开弹窗
  const open = (row: any) => {
    visible.value = true;
    tenantName.value = row.tenant_name;
    formData.tid = row.id;
    
    // 如果后端有资质详情接口，可以在此获取回显数据
    // fetchDetail(row.id);
  };
  
  // 上传前的校验
  const beforeAvatarUpload = (rawFile: any) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
      ElMessage.error('图片必须是 JPG 或 PNG 格式!');
      return false;
    } else if (rawFile.size / 1024 / 1024 > 2) {
      ElMessage.error('图片大小不能超过 2MB!');
      return false;
    }
    return true;
  };
  
  // 上传成功回调
  const handleUploadSuccess = (response: any) => {
    // 根据你后端的上传接口返回结构调整
    formData.file_url = response.data.url; 
    ElMessage.success('上传成功');
  };
  
  const submitForm = async () => {
    await formRef.value.validate();
    submitting.value = true;
    try {
      // 模拟提交
      console.log('提交的数据：', formData);
      ElMessage.success('资质保存成功');
      visible.value = false;
    } finally {
      submitting.value = false;
    }
  };
  
  defineExpose({ open });
  </script>
  
  <style scoped>
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
    transition: border-color 0.3s;
  }
  .avatar-uploader:hover {
    border-color: #409eff;
  }
  .uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    line-height: 178px !important;
  }
  .qualification-img {
    width: 178px;
    height: 178px;
    display: block;
    object-fit: contain;
  }
  .upload-tip {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
  }
  </style>