优化企业信息表单，调整字段名称，添加企业详情查询功能，改进文件上传逻辑

src/api/enterprises/index.ts

@@ -9,15 +9,15 @@ export interface EnterprisesVO {
   region: string // 企业所属区域
   enterprisesName: string // 企业名称
   address: string // 企业地址
-  enterprisesStatus//企业状态
+  enterprisesStatus //企业状态
   contactName: string // 环保负责人姓名
   environmentalContactPhone: string // 企业环保负责人联系电话
   registrationNumber: string // 企业注册号
   introduction: string // 企业图文介绍
   establishmentDate: Date // 企业成立时间
   gpsLocation: string // 企业经纬度
-  signRadius:string//签到半径
-  managerDeptId: number, // 管理部门
+  signRadius: string //签到半径
+  managerDeptId: number // 管理部门
   tagList: any
 }
 
@@ -66,4 +66,11 @@ export const EnterprisesApi = {
     return await request.get({ url: `"/system/system/tag-library/list`, params })
   },
 
+  /**
+   * 查询企业详情
+   * @param id 企业ID
+   */
+  enterpriseDetail: async (id: any) => {
+    return await request.get({ url: `/system/enterprise/pcget?id=` + id })
+  }
 }

src/api/qualification/index.ts

@@ -20,13 +20,13 @@ export const EnterpriseQualificationApi = {
     return await request.get({ url: `/system/enterprise-qualification/page`, params })
   },
 
-    // 查询企业资质分页
-    getEnterpriseQualificationPageEnterprise: async (params: any) => {
-      return await request.get({ url: `/system/enterprise-qualification/pageEnterprise`, params })
-    },
+  // 查询企业资质分页
+  getEnterpriseQualificationPageEnterprise: async (params: any) => {
+    return await request.get({ url: `/system/enterprise-qualification/pageEnterprise`, params })
+  },
 
   // 查询企业资质详情
-  getEnterpriseQualification: async (id: number) => {
+  getEnterpriseQualification: async (id: any) => {
     return await request.get({ url: `/system/enterprise-qualification/get?id=` + id })
   },
 
@@ -48,5 +48,5 @@ export const EnterpriseQualificationApi = {
   // 导出企业资质 Excel
   exportEnterpriseQualification: async (params) => {
     return await request.download({ url: `/system/enterprise-qualification/export-excel`, params })
-  },
+  }
 }

src/components/UploadFile/src/FileUploader.vue

@@ -172,8 +172,10 @@ const handleExceed = () => {
 }
 
 const handlerUpload = async () => {
+  if (fileList.value.filter((i) => i.status == 'ready').length == 0) return
   const formData = new FormData()
   fileList.value.forEach((file: any) => {
+    if (file.status == 'success') return
     formData.append('files', file.raw)
   })
   let res = await batchUploadFile(formData)

src/views/enterprises/update.vue

@@ -1,6 +1,6 @@
 <template>
   <content-wrap>
-    <section class="view-wrapper">
+    <section class="view-wrapper" v-loading="loading">
       <section class="flex-1">
         <section class="mb-40px">
           <section class="title-wrapper"> 基本信息</section>
@@ -31,9 +31,9 @@
                   </template>
                 </el-input>
               </el-form-item>
-              <el-form-item label="行业类别" prop="tags">
+              <el-form-item label="行业类别" prop="tagIds">
                 <el-select
-                  v-model="formData.tags"
+                  v-model="formData.tagIds"
                   placeholder="请选择行业类型"
                   clearable
                   multiple
@@ -116,7 +116,12 @@
       <section>
         <section class="title-wrapper"> 相关资质 </section>
         <section class="prove-wrapper">
-          <section class="prove" v-for="(prove, index) in proveList" :key="index">
+          <section
+            class="prove"
+            v-for="(prove, index) in proveList"
+            :key="index"
+            @click="editProve(prove.id)"
+          >
             <el-image
               :src="prove.files[0].url"
               :preview-src-list="prove.files[0]"
@@ -140,14 +145,15 @@
         </section>
       </section>
     </section>
-    <section>
-      <el-button @click="submit">保存</el-button>
+    <section class="flex items-center justify-center gap-20px">
+      <el-button @click="submit" type="primary">保存信息</el-button>
+      <el-button @click="router.go(-1)">返回列表</el-button>
     </section>
   </content-wrap>
-
   <GpsDialog ref="GpsDialogRef" @success="setGps" />
-  <ProveForm ref="proveFormRef" @add-prove="setProve" />
+  <ProveForm ref="proveFormRef" @add-prove="setProve" @success="getProveList" />
 </template>
+
 <script setup lang="ts">
 import { getStrDictOptions, DICT_TYPE, getDictLabel } from '@/utils/dict'
 import { TagLibraryApi } from '@/api/system/taglibrary'
@@ -156,13 +162,19 @@ import GpsDialog from './components/getGpsByAmap.vue'
 import ProveForm from '@/views/qualification/prove.vue'
 import { formatDate } from '@/utils/formatTime'
 import { EnterprisesApi } from '@/api/enterprises'
+import { EnterpriseQualificationApi } from '@/api/qualification'
+
 /** 企业 表单 */
 defineOptions({ name: 'UpdateEnterprises' })
 //行业类别
 const typeList = ref([] as any)
 const userList = ref([] as any)
+const message = useMessage()
 const GpsDialogRef = ref()
+const router = useRouter()
 const proveFormRef = ref()
+const route = useRoute()
+const loading = ref(false)
 const formRef = ref()
 const formData = ref({
   id: undefined,
@@ -184,7 +196,7 @@ const formData = ref({
   ides: undefined,
   startUserSelectAssignees: undefined,
   enterpriseUserId: undefined,
-  tags: undefined,
+  tagIds: undefined,
   photo: [] as any,
   signRadius: 30
 } as any)
@@ -236,7 +248,7 @@ const formRules = reactive({
       trigger: 'change'
     }
   ],
-  tags: [
+  tagIds: [
     {
       required: true,
       message: '请选择行业类别',
@@ -250,7 +262,7 @@ const formRules = reactive({
       trigger: 'change'
     }
   ]
-})
+} as any)
 const fileUploadRef = ref()
 const proveList: any = ref([])
 /** 查询搜索项列表 */
@@ -286,21 +298,30 @@ const getGaps = () => {
 }
 
 const addProve = () => {
-  unref(proveFormRef).open()
+  unref(proveFormRef).open({ enterpriseId: formData.value.id })
 }
 
 const submit = async () => {
   const validate = await unref(formRef).validate()
   if (!validate) return
+  loading.value = true
   await unref(fileUploadRef).handlerUpload()
-  console.log(formData.value, proveList.value)
   if (formData.value.id) {
-    await EnterprisesApi.updateEnterprises(formData.value)
+    const data = {
+      ...formData.value,
+      fileIds: formData.value.photo.map((i) => i.id),
+      gpsLocation: formData.value.gpsLocation.join(',')
+    }
+    EnterprisesApi.updateEnterprises(data).then(() => {
+      message.success('保存成功')
+      loading.value = false
+      getDetail()
+    })
   } else {
     const data = {
       ...formData.value,
-	    fileIds: formData.value.photo.map((i) => i.id),
-	    gpsLocation:formData.value.gpsLocation.join(','),
+      fileIds: formData.value.photo.map((i) => i.id),
+      gpsLocation: formData.value.gpsLocation.join(','),
       qualis: proveList.value.map((p) => {
         return {
           ...p,
@@ -308,7 +329,11 @@ const submit = async () => {
         }
       })
     }
-    await EnterprisesApi.createEnterprises(data)
+    EnterprisesApi.createEnterprises(data).then((res) => {
+      formData.value.id = res
+      message.success('保存成功')
+      loading.value = false
+    })
   }
 }
 
@@ -316,8 +341,41 @@ const setProve = (prove) => {
   proveList.value.push(prove)
 }
 
+const editProve = (id) => {
+  unref(proveFormRef).open({ id })
+}
+
+const getDetail = () => {
+  EnterprisesApi.enterpriseDetail(formData.value.id).then((res) => {
+    formData.value = res
+    formData.value.photo = formData.value.files
+    formData.value.gpsLocation = formData.value.gpsLocation.split(',')
+    formData.value.tagIds = res.tagObjList.map((i) => i.id)
+  })
+}
+
+const getProveList = () => {
+  EnterpriseQualificationApi.getEnterpriseQualificationPage({
+    pageSize: -1,
+    enterpriseId: formData.value.id
+  }).then((res) => {
+    proveList.value = res.list.map((i) => {
+      return {
+        ...i,
+        files: i.qualificationFiles
+      }
+    })
+  })
+}
+
 getSelectOption()
-onMounted(() => {})
+onMounted(() => {
+  if (route.query.id) {
+    formData.value.id = route.query.id
+    getDetail()
+    getProveList()
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -381,6 +439,9 @@ onMounted(() => {})
     :deep(.el-input__suffix-inner > :first-child) {
       margin-right: 8px;
     }
+    :deep(.el-input-number .el-input__inner) {
+      text-align: left;
+    }
   }
   .prove-wrapper {
     display: grid;

src/views/qualification/prove.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="30vw">
     <el-form
       ref="formRef"
       :model="formData"
@@ -7,8 +7,8 @@
       v-loading="formLoading"
       label-width="auto"
     >
-      <el-form-item label="选择企业" prop="enterpriseId" v-if="formData.id">
-        <span></span>
+      <el-form-item label="企业名称" v-if="formData.id">
+        <el-input v-model="formData.enterpriseName" readonly />
       </el-form-item>
       <el-form-item label="资质名称" prop="qualificationName">
         <el-select v-model="formData.qualificationName" placeholder="请选择资质名称">
@@ -56,7 +56,8 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formData = ref({
   id: undefined,
   enterpriseId: undefined,
-  qualificationName: undefined,
+  qualificationName: undefined as any,
+  enterpriseName: undefined,
   expiryDate: undefined,
   qualificationDescription: undefined,
   updateBy: undefined,
@@ -86,17 +87,28 @@ const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
 const open = async (params) => {
-  dialogVisible.value = true
   resetForm()
-  if (params) {
+	dialogTitle.value = '新增资质'
+  if (params.enterpriseId) {
+    formData.value.enterpriseId = params.enterpriseId
+  }
+  if (params.id) {
     dialogTitle.value = '编辑资质'
-    formData.value.enterpriseId = params.enterpriseId || undefined
-    formData.value.id = params.id || undefined
+    formData.value.id = params.id
+    getDetail()
   }
+  dialogVisible.value = true
 }
 
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
+const getDetail = () => {
+  formLoading.value = true
+  EnterpriseQualificationApi.getEnterpriseQualification(formData.value.id).then((res) => {
+    formData.value = res
+    formData.value.photo = res.files
+    formData.value.qualificationName = Number(res.qualificationName)
+    formLoading.value = false
+  })
+}
 /** 提交表单 */
 const emit = defineEmits(['success', 'addProve']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -118,6 +130,7 @@ const submitForm = async () => {
     data.files = data.photo
     emit('addProve', data)
   }
+  formLoading.value = false
   message.success('操作成功')
   dialogVisible.value = false
 }
@@ -138,4 +151,6 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>