销售出库-添加签单上传和查看弹窗

src/views/inventiry/salesOutbound/components/ViewFileListModal.vue

@@ -0,0 +1,66 @@
+<template>
+    <div ref="viewFileDetailRef">
+        <a-modal
+            :title="title"
+            width="40%"
+            :visible="visible"
+            :maskClosable="false"
+            :getContainer ='()=>$refs.viewFileDetailRef'
+            switchFullscreen
+            @cancel="handleCancel"
+            @ok="handleOk"
+            >
+                <div>
+                  <JUpload v-model:value="obj.attachs" />
+                </div>
+        </a-modal>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+      import {ref} from 'vue';
+      import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
+      import {editSignSing} from '../salesOutboundForm.api';
+      const emit = defineEmits([ 'success']); //定义emit
+      var visible = ref(false);
+      var title = ref('')
+      var fatherId = ref('')
+      var obj=ref({
+        attachs:'',
+      })
+      function getTable(record){
+          visible.value = true
+          title.value ='签单(Signing)'
+          obj.value.attachs = record.signing
+          fatherId.value = record.id
+      }
+      function handleCancel(){
+        visible.value = false;
+        emit('success')
+      }
+      async function handleOk(){
+        var params = {
+          id: fatherId.value,
+          signing: obj.value.attachs,
+        };
+        editSignSing(params,handleCancel);
+      }
+      defineExpose({
+        getTable
+      });
+    </script>
+  
+  <style lang="less" scoped>
+      /** 时间和数字输入框样式 */
+    :deep(.ant-input-number) {
+      width: 100%;
+    }
+  
+    :deep(.ant-calendar-picker) {
+      width: 100%;
+    }
+    /deep/.ant-modal-body{
+      padding: 14px !important;
+    }
+  </style>
+  

src/views/inventiry/salesOutbound/salesOutboundList.vue

@@ -148,16 +148,13 @@
       <template #bodyCell="{ column, record, index, text }"> </template>
 
       <template #signing="props">
-        <a-upload name="file" :showUploadList="false" :action="uploadUrl" :headers="headers" @change="(value) => handleChange(value, props)">
-          <a>上传(upload)</a>
-        </a-upload>
-        <a>/</a>
-        <a :href="baseUploadUrl + '/sys/common/static/' + props.record.signing">查看</a>
+        <a @click="viewFile(props)" >查看</a>
       </template>
     </BasicTable>
     <!-- 表单区域 -->
     <salesOutFormModal @register="registerModal" @success="handleSuccess" />
     <SetIsExport ref="setIsExportRef" @success="handleSuccess" />
+    <ViewFileListModal ref="ViewFileListModalRef" @success="handleSuccess"></ViewFileListModal>
   </div>
 </template>
 
@@ -168,6 +165,7 @@
   import { useModal } from '/@/components/Modal';
   import salesOutFormModal from './components/salesOutFormModal.vue';
   import SetIsExport from './components/SetIsExport.vue';
+  import ViewFileListModal from './components/ViewFileListModal.vue';
   import { columns } from './salesOutboundForm.data';
   import {
     list,
@@ -192,6 +190,7 @@
   const baseUploadUrl = globSetting.uploadUrl;
   const uploadUrl = `${baseUploadUrl}/sys/common/upload`;
   const headers = getHeaders();
+  var ViewFileListModalRef =ref<any>()
   var showField = ref('currency+name');
   const formRef = ref();
   const queryParam = reactive<any>({});
@@ -351,26 +350,8 @@
       setIsExportRef.value.getTable(ids);
     }
   }
-  function handleChange(info, props) {
-    if (info.file.status !== 'uploading') {
-      // console.log(info.file, info.fileList);
-    }
-    if (info.file.status === 'done') {
-      if (info.file.response.success) {
-        editSinging(info.file.response.message, props.record);
-      } else {
-        message.error(`${info.file.name} ${info.file.response.message}.`);
-      }
-    } else if (info.file.status === 'error') {
-      message.error(`文件上传失败: ${info.file.msg} `);
-    }
-  }
-  function editSinging(fileName, record) {
-    var params = {
-      id: record.id,
-      signing: fileName,
-    };
-    editSignSing(params, handleSuccess);
+  function viewFile(prop){
+    ViewFileListModalRef.value.getTable(prop.record);
   }
   /* ----------------------以下为原生查询需要添加的-------------------------- */
   const toggleSearchStatus = ref<boolean>(false);