上传组件

2025-12-09 17:13:57 +08:00
parent c44db962c3
commit 9b43f5ed55
8 changed files with 142 additions and 43 deletions
--- a/src/views/sales/Customer/components/certificateModal.vue
+++ b/src/views/sales/Customer/components/certificateModal.vue
@ -33,9 +33,9 @@
        </a-col>
        <a-col :span="24">
          <a-form-item label="上传附件" name="fileList" :label-col="{ span: 4 }" :wrapper-col="{ span: 24 }">
-            <UploadNew :file-list="formState.fileList" :disabled="isDisable" @change="changeUplod" :multiple="true" :maxSize="200" :accept="accept" />
            <div style="color: #ccc; font-size: 12px">{{ fileTip }}</div>
-            
+            <Upload :disabled="isDisable" v-model:value="formState.filePath" v-model:tableName="tableName" v-model:columnName="columnName" 
+            :multiple="true" @change="changeUplod" :dataDelete="true" :file-list="formState.fileList" :maxSize="200" :accept="accept"></Upload>
          </a-form-item>
        </a-col>
      </a-row>
@ -50,11 +50,13 @@ import { Form, message } from 'ant-design-vue';
 import { useI18n } from '/@/hooks/web/useI18n';
 import type { Rule } from 'ant-design-vue/es/form';
 import { useMessage } from '/@/hooks/web/useMessage';
-import UploadNew from '/@/components/Form/src/components/UploadNew.vue';
 import { getDocCpList } from '/@/api/sales/Customer';
 import type { FormInstance } from 'ant-design-vue';
 import dayjs from 'dayjs';
+import Upload from '/@/components/Form/src/components/Upload.vue';

+const tableName = 'Customer'
+const columnName = 'fileList'
 const { t } = useI18n(); 
 const isUpdate = ref(true);
 const isDisable = ref(false);
@ -68,14 +70,18 @@ const emit = defineEmits(['success','register']);
 const getTitle = computed(() => (!unref(isUpdate) ? t('新增证书') : t('编辑证书')));
 let formState = reactive({
  docTypeCode: '',
-  fileList: []
+  fileList: [],
+  filePath: ''
 });
 const list = ref()
 const rules = {
  docTypeCode: [{ required: true, message: "该项为必填项", trigger: 'change' }],
 };
+const curData = ref()
   
 const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  curData.value = ''
+  formState.filePath = ''
  getOption()
  setModalProps({ confirmLoading: false });
  isUpdate.value = !!data?.isUpdate;
@ -85,7 +91,9 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
    let dateFrom = data.record?.dateFrom ? dayjs(data.record?.dateFrom) : null
    let dateTo = data.record?.dateTo ? dayjs(data.record?.dateTo) : null
    Object.assign(formState, {...data.record,dateFrom, dateTo})
-    formState.filePath = formState.fileList[0]?.xjrFileId
+    let json = JSON.parse(JSON.stringify(data.record))
+    formState.filePath = (json?.fileList||[])[0]?.tableId
+    curData.value = json?.docTypeCode
    }
  });

@ -108,7 +116,7 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
  }
  function changeUplod (val) {
    formState.fileList = val
-    console.log(val, 532, formState.filePath)
+    console.log(val, 532, )
  }
  async function getOption() {
    optionList = await getDocCpList({'valid': 'Y'})
@ -124,17 +132,10 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
        ...formState,
        dateFrom: formState.dateFrom ? dayjs(formState.dateFrom).format('YYYY-MM-DD') : '',
        dateTo: formState.dateTo ? dayjs(formState.dateTo).format('YYYY-MM-DD') : '',
-        fileList: formState.fileList.map(v => {
-          return {
-            fileOrg: v.name,
-            filePath: v.url,
-            fileSize: v.fileSize,
-            xjrFileId: v.tableId
-          }
-        })
+        fileList: formState.fileList || []
      }
      let idx =list.value.findIndex(v => v.docTypeCode == obj.docTypeCode)
-      if (idx > -1) {
+      if (idx > -1 && formState.docTypeCode !=curData.value) {
        message.warn('证书已存在')
        formRef.value.resetFields();
        closeModal();
--- a/src/views/sales/Customer/components/createForm.vue
+++ b/src/views/sales/Customer/components/createForm.vue
@ -284,11 +284,15 @@
              <span style="font-size: 12px;font-weight: normal;">（上传公司财报等附件）</span>
            </div>
          </template>
-          <UploadNew v-if="!isDisable" style="margin-bottom: 10px;" :file-list="dataFile" :showUploadList="false" :btnTip="btnTip" @change="changeUplod" :multiple="true"/>
+          <Upload v-if="!isDisable" style="margin-bottom: 10px;" :file-list="dataFile" :showUploadList="false" 
+            v-model:value="formState.filePath" v-model:tableName="tableName" v-model:columnName="columnName"
+            :btnTip="btnTip" @change="changeUplod" :multiple="true" :dataDelete="true"
+            :showDownloadIcon="false"
+            />
          <a-table :columns="columnsFile" :data-source="dataFile" >
            <template #bodyCell="{ column,record,index, text }">
              <template v-if="column.dataIndex === 'fileOrg'">
-                 <a :href="record.presignedUrl||record.filePath" :download="record.fileOrg" target="_blank">{{record.fileOrg}}</a>
+                 <a @click="handleDownload(record)">{{record.fileOrg}}</a>
              </template>
               <template v-if="column.dataIndex === 'docDesc' && !isDisable">
                <a-input :placeholder="t('请输入附件说明')" :disabled="isDisable" v-model:value="record.docDesc" />
@ -328,7 +332,12 @@
    import dayjs from 'dayjs';
    import { getAppEnvConfig } from '/@/utils/env';
    import { message } from 'ant-design-vue';
-    import UploadNew from '/@/components/Form/src/components/UploadNew.vue';
+    import Upload from '/@/components/Form/src/components/Upload.vue';
+    import { parseDownloadUrl} from '/@/api/system/file';
+    import { downloadByUrl } from '/@/utils/file/download';
+
+    const tableName = '1';
+    const columnName = '1'

    const formType = ref('2'); // 0 新建 1 修改 2 查看
    const formRef = ref();
@ -474,6 +483,11 @@
      }
   
    });
+    const handleDownload = (info) => {
+      const url = parseDownloadUrl(info.response ? info.response.data.fileUrl : info.fileUrl);
+      const fileName = info.response ? info.response.data.fileOrg : info.fileOrg;
+      downloadByUrl({ url, fileName: fileName});
+    };
    async function getList(id)  {
      spinning.value = true
      try {
@ -535,6 +549,7 @@
      if (type == 'certificate') {
        if (btn == 'edit' || btn == 'view') {
          openModalCertificate(true, {record: record,isUpdate: true, btnType: btn,  list: dataCertificate});
+          console.log(record, 'record', dataCertificate)
        }
        if (btn == 'delete') {
          dataCertificate.splice(index, 1)
@ -602,6 +617,7 @@
      if (idx <0) {
        dataCertificate.push(val)
      }
+      console.log(dataCertificate, 'dataCertificate')
    }
    const handleSuccessContact = (val)=> {
      if (curIdx.value != null) {
@ -657,20 +673,27 @@
          })
          return
        }
+        let arrCertificate = JSON.parse(JSON.stringify(dataCertificate))
+        arrCertificate.forEach(v => {
+          v.dateFrom =  v.dateFrom ? dayjs(v.dateFrom ).format('YYYY-MM-DD HH:mm:ss') : '';
+          v.dateTo = v.dateTo ? dayjs(v.dateTo ).format('YYYY-MM-DD HH:mm:ss'): '';
+          (v.fileList || []).forEach(i => {
+            i.id = ''
+          })
+        })
+        let arrUploadList = JSON.parse(JSON.stringify(dataFile.value))
+        arrUploadList.forEach(v => {
+          v.id= ''
+        })
        let obj = {
          ...formState,
          lngCustomerBankList: dataBank,
-          lngCustomerDocList: dataCertificate.map(v =>{
-            return {
-              ...v,
-              dateFrom: v.dateFrom ? dayjs(v.dateFrom ).format('YYYY-MM-DD HH:mm:ss') : '',
-              dateTo: v.dateTo ? dayjs(v.dateTo ).format('YYYY-MM-DD HH:mm:ss'): ''
-            }
-          }),
+          lngCustomerDocList: arrCertificate,
          lngCustomerContactList: dataContact,
-          lngFileUploadList: dataFile.value
+          lngFileUploadList: arrUploadList
          
        }
+        console.log(arrCertificate, 'arrCertificate')
        spinning.value = true;
        let request = !formState.id ? addLngCustomer :updateLngCustomer

--- a/src/views/sales/Customer/index.vue
+++ b/src/views/sales/Customer/index.vue
@ -126,7 +126,7 @@
      },
      schemas: customSearchFormSchema,
      fieldMapToTime: [],
-      showResetButton: false,
+      showResetButton: true,
    },
    beforeFetch: (params) => {
      return { ...params, FormId: formIdComputedRef.value, PK: 'id' };