feat: 流程优化

src/views/flow/stFormDesign/packages/UploadFile/uploadFile.vue

@@ -1,30 +1,32 @@
 <template>
-  <div :style='{ width: record.options.width }'>
+  <div :style="{ width: record.options.width }">
     <a-upload-dragger
         :class="{ 'hide-upload-drag': !(fileList.length < record.options.limit) }"
-        :disabled='record.options.disabled || parentDisabled'
-        :name='config.uploadFileName || record.options.fileName'
-        :data='config.uploadFileData || optionsData'
-        :headers='headers'
-        :action=getAction
-        :multiple='record.options.multiple'
-        :fileList='fileList'
-        @preview='handlePreview'
-        @change='handleChange'
-        :beforeUpload='beforeUpload'
+        :disabled="record.options.disabled || parentDisabled"
+        :name="config.uploadFileName || record.options.fileName"
+        :data="config.uploadFileData || optionsData"
+        :headers="headers"
+        :action="getAction"
+        :multiple="record.options.multiple"
+        :fileList="fileList"
+        @preview="handlePreview"
+        @change="handleChange"
+        :beforeUpload="beforeUpload"
     >
-      <p class='ant-upload-text'>单击或拖动文件到此区域</p>
+      <p v-if="!record.options.disabled" class="ant-upload-text">单击或拖动文件到此区域</p>
       <template #itemRender="{ file, actions }">
-        <div style="display: flex; justify-content: space-between; align-items: center;">
+        <div style="display: flex; justify-content: space-between; align-items: center">
           <a :style="file.status === 'error' ? 'color: red' : ''" @click="handlePreview(file)">{{ file.name }}</a>
           <a-space style="margin-right: 10px">
-            <a href="javascript:;" @click="handlePreview(file)">
+            <a style="font-size:16px;margin-right: 10px" href="javascript:;" @click="handlePreview(file)">
               <EyeOutlined/>
             </a>
-            <a-button v-if="!this.$route.query.isMobile" @click="handleDownload(file)">
+            <a style="font-size:16px;margin-right: 10px" v-if="!this.$route.query.isMobile"
+               @click="handleDownload(file)">
               <DownloadOutlined/>
-            </a-button>
-            <a style="color:red" href="javascript:;" @click="handleRemove(file)">
+            </a>
+            <a style="font-size:16px;color: red" href="javascript:;" v-if="!record.options.disabled"
+               @click="handleRemove(file)">
               <DeleteOutlined/>
             </a>
           </a-space>
@@ -42,16 +44,30 @@
         :bodyStyle="{
         height: 'calc(100vh - 95px)',
         padding: '0',
-        overflow: 'auto'
-    }"
+        overflow: 'auto',
+      }"
     >
-      <iframe
-          :src="previewUrl"
-          width="100%"
-          height="100%"
-          frameborder="0"
-      ></iframe>
+      <iframe :src="previewUrl" width="100%" height="100%" frameborder="0"></iframe>
     </a-modal>
+
+    <a-drawer
+        title="附件预览"
+        placement="bottom"
+        :visible="previewVisibleMobile"
+        @close="previewVisibleMobile = false"
+        height="90%"
+        width="100vw"
+        :closable="true"
+        :bodyStyle="{
+        padding: '0',
+        scrollbarWidth: 'none' /* Firefox */,
+      }"
+        :drawerStyle="{
+        scrollbarWidth: 'none' /* Firefox */,
+      }"
+    >
+      <iframe :src="previewUrl" width="100%" height="100%" frameborder="0"></iframe>
+    </a-drawer>
   </div>
 </template>
 <script>
@@ -59,9 +75,10 @@ import {fileApi} from '/@/api/support/file-api';
 import {localRead} from '/@/utils/local-util';
 import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
 import {useUserStore} from '/@/store/modules/system/user.js';
-import dayjs from "dayjs";
-import {Base64} from "js-base64";
+import dayjs from 'dayjs';
+import {Base64} from 'js-base64';
 import {message, Modal} from 'ant-design-vue';
+
 const fileUrl = import.meta.env.VITE_APP_API_FILE_VIEW_URL;
 export default {
   name: 'StUploadFile',
@@ -72,72 +89,79 @@ export default {
       getAction: import.meta.env.VITE_APP_API_URL + '/support/file/upload?folder=1',
       headers: {'x-access-token': localRead(LocalStorageKeyConst.USER_TOKEN)},
       previewVisible: false, // 控制弹框显示
+      previewVisibleMobile: false,
       previewUrl: '', // 预览的 URL
-    }
+    };
   },
   watch: {
     value: {
       // value 需要深度监听及默认先执行handler函数
       handler(val) {
         if (val) {
-          this.setFileList()
+          this.setFileList();
         }
       },
       immediate: true,
-      deep: true
-    }
+      deep: true,
+    },
   },
   computed: {
     optionsData() {
       try {
-        return this.record.options.data && JSON.parse(this.record.options.data)
+        return this.record.options.data && JSON.parse(this.record.options.data);
       } catch (err) {
-        console.error(err)
-        return {}
+        console.error(err);
+        return {};
       }
-    }
+    },
   },
   methods: {
     setFileList() {
       // 当传入value改变时，fileList也要改变
       // 如果传入的值为字符串，则转成json
       if (typeof this.value === 'string') {
-        if (this.value.indexOf("fakepath") < 0) {
-          this.fileList = JSON.parse(this.value)
+        if (this.value.indexOf('fakepath') < 0) {
+          this.fileList = JSON.parse(this.value);
           // 将转好的json覆盖组件默认值的字符串
-          this.handleSelectChange()
+          this.handleSelectChange();
         }
       } else {
-        this.fileList = this.value
+        this.fileList = this.value;
       }
     },
     handleSelectChange() {
       setTimeout(() => {
-        this.$emit("update:value", this.fileList)//主表，直接更新value
-        this.$emit('change', this.fileList)//如果是子表，则通过change更新
-        this.$emit('input', this.fileList)
-      }, 10)
+        this.$emit('update:value', this.fileList); //主表，直接更新value
+        this.$emit('change', this.fileList); //如果是子表，则通过change更新
+        this.$emit('input', this.fileList);
+      }, 10);
     },
     handleDownload(file) {
       fileApi.downLoadFile(file.response.data.fileKey);
     },
     handlePreview(file) {
       // 预览
-      const url = file.response.data.fileUrl || file.url || file.thumbUrl
+      const url = file.response.data.fileUrl || file.url || file.thumbUrl;
       const userStore = useUserStore();
-      const waterMark = [userStore.actualName + '-' + (userStore.phone == undefined ? "0000" : userStore.phone?.slice(-4)), dayjs().format('YYYY-MM-DD HH:mm:ss')];
-      const viewFile = fileUrl + "/onlinePreview?url=" + encodeURIComponent(Base64.encode(url)) + '&watermarkTxt=' + waterMark
+      const waterMark = [
+        userStore.actualName + '-' + (userStore.phone == undefined ? '0000' : userStore.phone?.slice(-4)),
+        dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      ];
+      const viewFile = fileUrl + '/onlinePreview?url=' + encodeURIComponent(Base64.encode(url)) + '&watermarkTxt=' + waterMark;
       if (this.$route.query.isMobile === 'true') {
-        window.open(viewFile)
+        // window.open(viewFile);
         this.previewVisible = false; // 显示弹框
+
+        this.previewUrl = viewFile;
+        this.previewVisibleMobile = true;
       } else {
-        this.previewUrl = viewFile
+        this.previewUrl = viewFile;
         this.previewVisible = true; // 显示弹框
       }
     },
     handleRemove(file) {
-      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
-      this.handleSelectChange()
+      this.fileList = this.fileList.filter((item) => item.uid !== file.uid);
+      this.handleSelectChange();
     },
     beforeUpload(e, files) {
       // if (files.length + this.fileList.length > this.record.options.limit) {
@@ -146,25 +170,25 @@ export default {
       // }
     },
     handleChange(info) {
-      this.fileList = info.fileList
+      this.fileList = info.fileList;
       if (info.file.status === 'done') {
-        const res = info.file.response
+        const res = info.file.response;
         if (res.code === 0) {
-          this.handleSelectChange()
+          this.handleSelectChange();
         } else {
-          this.fileList.pop()
-          this.$message.error(`文件上传失败`)
+          this.fileList.pop();
+          this.$message.error(`文件上传失败`);
         }
       } else if (info.file.status === 'error') {
-        this.$message.error(`文件上传失败`)
+        this.$message.error(`文件上传失败`);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style scoped>
-.ant-upload.ant-upload-btn {
-}
+/* .ant-upload.ant-upload-btn {
+} */
 
 .fullscreen-modal {
   width: 100vw !important;
@@ -184,8 +208,8 @@ export default {
   flex: 1;
 }
 
-:deep(.css-dev-only-do-not-override-1r8ax8d).ant-upload-wrapper .ant-upload-drag .ant-upload {
-  padding: 6px 0px 2px 0;
-  background-color: #e2e9f8;
+:deep(.ant-upload-wrapper) .ant-upload-drag .ant-upload {
+  padding: 0px 0px 0px 0;
+  background-color: #dde5f6;
 }
 </style>