文件上传。。。

src/components/Tinymce/src/ImgUpload.vue

@@ -4,7 +4,7 @@
       name="file"
       multiple
       @change="handleChange"
-      :action="uploadUrl"
+      :beforeUpload="beforeUpload"
       :showUploadList="false"
       accept=".jpg,.jpeg,.gif,.png,.webp"
     >
@@ -21,6 +21,7 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import { uploadApi } from '/@/api/sys/upload';
 
   export default defineComponent({
     name: 'TinymceImageUpload',
@@ -39,6 +40,7 @@
       let uploading = false;
 
       const { uploadUrl } = useGlobSetting();
+      const { imgUrlPrefix } = useGlobSetting();
       const { t } = useI18n();
       const { prefixCls } = useDesign('tinymce-img-upload');
 
@@ -49,6 +51,24 @@
         };
       });
 
+      function beforeUpload(file) {
+        const name = file.name;
+        emit('uploading', name);
+        uploading = true;
+        uploadApi({ file })
+          .then((res) => {
+            const url = imgUrlPrefix + res.data.result.url;
+            emit('done', name, url);
+            uploading = false;
+          })
+          .catch((err) => {
+            console.log(`err`, err);
+            emit('error');
+            uploading = false;
+          });
+        return false;
+      }
+
       function handleChange(info: Recordable) {
         const file = info.file;
         const status = file?.status;
@@ -71,6 +91,7 @@
 
       return {
         prefixCls,
+        beforeUpload,
         handleChange,
         uploadUrl,
         t,

src/components/Upload/src/BasicUpload.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
     <a-button-group>
-      <a-button type="primary" @click="openUploadModal" preIcon="carbon:cloud-upload">
+      <a-button
+        class="upload-btn"
+        type="primary"
+        @click="openUploadModal"
+        preIcon="carbon:cloud-upload"
+      >
         {{ t('component.upload.upload') }}
       </a-button>
       <Tooltip placement="bottom" v-if="showPreview">
@@ -121,3 +126,9 @@
     },
   });
 </script>
+<style scoped>
+  .upload-btn {
+    position: relative;
+    bottom: 4px;
+  }
+</style>

src/views/event/activity/data.ts

@@ -4,6 +4,7 @@ import { adapt } from '/@/utils/adapt';
 import moment from 'moment';
 import { Tinymce } from '/@/components/Tinymce/index';
 import { h } from 'vue';
+import UploadFile from '/@/views/general/config/customComponents/UploadFile.vue';
 
 const adaptWidth = adapt();
 
@@ -406,14 +407,21 @@ export const schemas: FormSchema[] = [
   },
   {
     field: 'attachment',
-    component: 'Input',
+    component: 'Select',
     label: '附件',
     labelWidth: adaptWidth.labelWidth,
     colProps: {
       span: adaptWidth.elContainer,
     },
-    componentProps: {
-      placeholder: '附件',
+    render: ({ model, field }) => {
+      return h(UploadFile, {
+        value: model.attachment,
+        type: 'files',
+        style: { width: '100%' },
+        onChange(value) {
+          model[field] = value;
+        },
+      });
     },
   },
   {

src/views/event/meeting/data.ts

@@ -4,6 +4,7 @@ import { adapt } from '/@/utils/adapt';
 import moment from 'moment';
 import { Tinymce } from '/@/components/Tinymce/index';
 import { h } from 'vue';
+import UploadFile from '/@/views/general/config/customComponents/UploadFile.vue';
 
 const adaptWidth = adapt();
 
@@ -381,14 +382,21 @@ export const schemas: FormSchema[] = [
   },
   {
     field: 'attachment',
-    component: 'Input',
+    component: 'Select',
     label: '附件',
     labelWidth: adaptWidth.labelWidth,
     colProps: {
       span: adaptWidth.elContainer,
     },
-    componentProps: {
-      placeholder: '附件',
+    render: ({ model, field }) => {
+      return h(UploadFile, {
+        value: model.attachment,
+        type: 'files',
+        style: { width: '100%' },
+        onChange(value) {
+          model[field] = value;
+        },
+      });
     },
   },
   {

src/views/general/config/customComponents/ChooseModal.vue

@@ -63,6 +63,7 @@
         if (rows.length) {
           emit('checked', rows);
           closeModal();
+          getTableAction().clearSelectedRowKeys();
         } else {
           error('请先选择文件!');
         }

src/views/general/config/customComponents/UploadFile.vue

@@ -24,7 +24,15 @@
     <div class="file-list" v-if="file_list.length">
       <div v-for="(item, index) in file_list" :key="index">
         <div class="file-item" v-if="item !== ''">
-          <div class="file-wrap"> <a-image width="70px" :src="imgUrlPrefix + item" /></div>
+          <div class="file-wrap">
+            <a-image v-if="isAssetTypeAnImage(item)" width="70px" :src="imgUrlPrefix + item" />
+            <a
+              v-if="!isAssetTypeAnImage(item)"
+              :href="imgUrlPrefix + item"
+              :download="getFilename(item)"
+              >{{ getFilename(item) }}</a
+            >
+          </div>
           <div class="dele-file" @click="deleteFile(item, index)">
             <Icon icon="ri:delete-bin-5-fill" />
           </div>
@@ -99,7 +107,25 @@
       watch(props, (props: PropsType) => {
         state.file_list = props.value.split(',');
       });
+      function getFilename(filePath) {
+        //获取最后一个\的位置
+        const index = filePath.lastIndexOf('\\');
+        //获取后缀
+        const filename = filePath.substr(index + 1);
+        return filename;
+      }
 
+      function isAssetTypeAnImage(filePath) {
+        //获取最后一个.的位置
+        const index = filePath.lastIndexOf('.');
+        //获取后缀
+        const ext = filePath.substr(index + 1);
+        return (
+          ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(
+            ext.toLowerCase()
+          ) !== -1
+        );
+      }
       return {
         handleChange: (list: string[]) => {
           if (props.type === 'file') {
@@ -111,6 +137,8 @@
         },
         checked,
         imgUrlPrefix,
+        getFilename,
+        isAssetTypeAnImage,
         openChooseModal,
         deleteFile,
         uploadApi,

src/views/general/config/customComponents/UploadImage.vue

@@ -7,6 +7,7 @@
         :maxNumber="10"
         @change="handleChange"
         :api="uploadApi"
+        :accept="['jpg', 'jpeg', 'gif', 'png', 'webp']"
         class="my-3"
       />
       <a-button

src/views/general/config/data.ts

@@ -14,6 +14,7 @@ import DatePicker from './customComponents/DatePicker.vue';
 import TimePicker from './customComponents/TimePicker.vue';
 import Switch from './customComponents/Switch.vue';
 import UploadImage from './customComponents/UploadImage.vue';
+import UploadFile from './customComponents/UploadFile.vue';
 import { configNameExist } from '/@/api/sys/general';
 
 export const columns: BasicColumn[] = [
@@ -180,6 +181,32 @@ export const columns: BasicColumn[] = [
             style: { width: '65%' },
             onChange: onImagesChange,
           });
+        case 'file':
+          const onFileChange = (val) => {
+            console.log(`file获取到的参数 =======》`, val);
+            record.value = val;
+          };
+          return h(UploadFile, {
+            value: record.value,
+            type: 'file',
+            tip: record.tip,
+            options: record.content,
+            style: { width: '65%' },
+            onChange: onFileChange,
+          });
+        case 'files':
+          const onFilesChange = (val) => {
+            console.log(`files获取到的参数 =======》`, val);
+            record.value = val;
+          };
+          return h(UploadFile, {
+            value: record.value,
+            type: 'files',
+            tip: record.tip,
+            options: record.content,
+            style: { width: '65%' },
+            onChange: onFilesChange,
+          });
       }
     },
   },

src/views/general/config/index.vue

@@ -278,6 +278,9 @@
     display: flex;
     justify-content: center;
   }
+  .upload-btn {
+    bottom: 0 !important;
+  }
 
   /* .current-btn {
     color: #3785cc;

src/views/money/bill/customCom/CustomInput.vue

@@ -159,7 +159,17 @@
   }
   @media screen and (max-width: 450px) {
     .input-width {
-      width: 49%;
+      width: 39%;
+    }
+  }
+  @media screen and (max-width: 380px) {
+    .input-width {
+      width: 35%;
+    }
+  }
+  @media screen and (max-width: 330px) {
+    .input-width {
+      width: 23%;
     }
   }
 </style>

src/views/money/bill/data.ts

@@ -4,11 +4,11 @@ import { adapt } from '/@/utils/adapt';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 import CustomInput from './customCom/CustomInput.vue';
-import CustomUpload from './customCom/CustomUpload.vue';
 import YearPicker from './customCom/YearPicker.vue';
 import moment from 'moment';
 import { getYearFee } from '/@/api/sys/money';
 import { useMessage } from '/@/hooks/web/useMessage';
+import UploadFile from '/@/views/general/config/customComponents/UploadFile.vue';
 
 const { createMessage } = useMessage();
 const { error } = createMessage;
@@ -476,9 +476,10 @@ export const schemas: FormSchema[] = [
       span: adaptWidth.elContainer,
     },
     render: ({ model, field }) => {
-      return h(CustomUpload, {
+      return h(UploadFile, {
         value: model.attachment,
-        placeholder: '添加附件',
+        type: 'files',
+        style: { width: '100%' },
         onChange(value) {
           model[field] = value;
         },

src/views/money/bill/popup.vue

@@ -132,7 +132,7 @@
     },
   });
 </script>
-<style lang="less">
+<style scoped lang="less">
   .ant-form-item-label {
     overflow: hidden;
     text-align: center !important;