fix : 单文件和多文件上传样式调整

2024-06-29 12:05:10 +08:00
parent 5d9331c23f
commit 12db4164d0
3 changed files with 53 additions and 44 deletions
--- a/src/components/AttachmentUpload.vue
+++ b/src/components/AttachmentUpload.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form :model="formData" ref="applyForm"  :rules="rules" :label-position="labelPosition">
+  <el-form :model="formData" ref="applyForm" :rules="rules" :label-position="labelPosition">
    <el-row>
      <el-col :span="24">
        <el-form-item :label="label" prop="attachment" label-width="125">
@@ -12,29 +12,29 @@
          </template>
          <template
              v-else-if="!preview||JSON.stringify(singleFile) == '{}'||singleFile==null||formData.singleFile==null">
-            <file-upload @getFile="getAttachment"  :multiple="false" :maxSize="1"  :showFileList="showFileList" @delete="deleteAttachment"
-                         :disabled="isSingleFile" />
-<!--           -->
-<!--            <fvTable style="width: 100%;max-height: 80px;" v-if="showSingleTable" :tableConfig="singleTableConfig"-->
-<!--                     :data="singleFileList" :isSettingCol="false" :pagination="false">-->
-<!--              <template #empty>-->
-<!--                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>-->
-<!--              </template>-->
-<!--            </fvTable>-->
+            <file-upload @getFile="getAttachment" :multiple="false"
+                         :disabled="isSingleFile" ref="fileUploadRef"/>
+            <!--           :showFileList="showFileList" @delete="deleteAttachment"-->
+            <fvTable style="width: 100%;max-height: 80px;" v-if="showSingleTable" :tableConfig="singleTableConfig"
+                     :data="singleFileList" :isSettingCol="false" :pagination="false">
+              <template #empty>
+                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+              </template>
+            </fvTable>
          </template>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="其他文件" label-width="125">
          <file-upload @getFile="getOtherFile"/>
-<!--          <el-card style="width: 100%;box-shadow: none">-->
-            <fvTable style="width: 100%;max-height: 300px;" v-if="showTable" :tableConfig="tableConfig"
-                     :data="allFileList" :isSettingCol="false" :pagination="false">
-              <template #empty>
-                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
-              </template>
-            </fvTable>
-<!--          </el-card>-->
+          <!--          <el-card style="width: 100%;box-shadow: none">-->
+          <fvTable style="width: 100%;max-height: 300px;" v-if="showTable" :tableConfig="tableConfig"
+                   :data="allFileList" :isSettingCol="false" :pagination="false">
+            <template #empty>
+              <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+            </template>
+          </fvTable>
+          <!--          </el-card>-->
        </el-form-item>
      </el-col>
    </el-row>
@@ -81,7 +81,7 @@ const props = defineProps({
  },
  labelPosition: {
    type: String,
-    default:''
+    default: ''
  }
 })
 const emit = defineEmits(["getAttachment", "getOtherFile"])
@@ -209,6 +209,7 @@ const singleTableConfig = reactive({
    }
  ]
 })
+const fileUploadRef=ref()
 const rules = reactive({
  attachment: [{required: true, message: '请上传附件', trigger: ['blur', 'change']}],
 })
@@ -216,8 +217,9 @@ const applyForm = ref()
 const singleFile = ref(props.formData.singleFile)
 const isSingleFile = ref(false)
 const allFileList = ref([])
+const deleteFileVal = ref({})
 const singleFileList = ref([])
-if(props.formData.fileList !== null && props.formData.fileList?.length > 0){
+if (props.formData.fileList !== null && props.formData.fileList?.length > 0) {
  allFileList.value = props.formData.fileList
 }
 watch(() => props.showTable, (newVal) => {
@@ -259,7 +261,7 @@ watch(() => props.formData.singleFile, (newVal) => {
 watch(() => isSingleFile.value, (newVal) => {
  isSingleFile.value = newVal
 }, {deep: true})
-const handleDelete = (row,type) => {
+const handleDelete = (row, type) => {
  deleteFile(row.fileId).then(res => {
    ElNotification({
      title: '提示',
@@ -267,21 +269,24 @@ const handleDelete = (row,type) => {
      type: res.code === 1000 ? 'success' : 'error'
    })
    if (res.code === 1000) {
-      if(type==='single'){
+      if (type === 'single') {
        singleFileList.value.splice(singleFileList.value.findIndex((item) => item.id === row.fileId), 1);
        isSingleFile.value = false
-      }else {
+      } else {
        allFileList.value.splice(allFileList.value.findIndex((item) => item.id === row.fileId), 1);
      }
    }
  });
 }
 const handleSingleDelete = (row) => {
- handleDelete(row,'single')
+  console.log('row',row)
+  // fileUploadRef.value.handleRemove(deleteFileVal.value.id)
+  handleDelete(row, 'single')
 }
 const getAttachment = (val) => {
-  console.log('getAttachment',val)
+  console.log('getAttachment', val)
  isSingleFile.value = true
+  // deleteFileVal.value=val
  emit('getAttachment', val)
 }
 const getOtherFile = (val) => {
--- a/src/components/FileUpload.vue
+++ b/src/components/FileUpload.vue
@@ -44,10 +44,12 @@ const props = defineProps({
  showFileList: {
    type: Boolean,
    default: false
-  }, disabled: {
+  },
+  disabled: {
    type: Boolean,
    default: false
-  }, multiple: {
+  },
+  multiple: {
    type: Boolean,
    default: true
  }
@@ -98,7 +100,9 @@ const uploadError = () => {
    type: 'error'
  })
 }
-
+defineExpose({
+  handleRemove
+})
 </script>

 <style lang="scss" scoped>
--- a/vite.config.js
+++ b/vite.config.js
@@ -68,31 +68,31 @@ export default defineConfig({
    strictPort: false,
    open: true,
    proxy: {
-      // '/api/workflow': {
-      //   // target: 'http://frp.feashow.cn:31800/',
-      //   target: 'http://clay.frp.feashow.cn/',
-      //   // target: 'http://192.168.31.175:8000',
-      //   changeOrigin: true,
-      //   rewrite: (path) => path.replace(/^\/api/, '')
-      // },
+      '/api/workflow': {
+        target: 'http://frp.feashow.cn:31800/',
+        // target: 'http://clay.frp.feashow.cn/',
+        // target: 'http://192.168.31.175:8000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      },
      // '/api/admin': {
      //   // target: 'http://frp.feashow.cn:31800/',
      //   target: 'http://clay.frp.feashow.cn/',
      //   // target: 'http://192.168.31.175:8000',
      //   changeOrigin: true,
-      //   rewrite: (path) => path.replace(/^\/api/, '')
+      //   rewrite: (path) => path.replace(/^\/summary/, '')
      // },
      '/api': {
-        // target: 'http://mosr.feashow.cn/',
-        target: 'http://10.7.127.57:8000',
+        target: 'http://mosr.feashow.cn',
+        // target: 'http://clay.frp.feashow.cn',
        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '')
+        // rewrite: (path) => path.replace(/^\/api/, '')
      },
-      '/api/notice-ws': {
-        target: 'ws://mosr.feashow.cn/api/notice-ws',
-        ws: true,
-        changeOrigin: true,
-      }
+      // '/api/notice-ws': {
+      //   target: 'ws://mosr.feashow.cn/summary/notice-ws',
+      //   ws: true,
+      //   changeOrigin: true,
+      // }
    }
  }
 })