上传

src/views/expense/account_manage/customCom/Upload.vue

@@ -0,0 +1,80 @@
+<template>
+  <a-upload :before-upload="beforeUpload" v-model:file-list="fileList" @change="handleChange">
+    <a-button type="primary"> Upload </a-button>
+  </a-upload>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, toRefs } from 'vue';
+  import { Upload } from 'ant-design-vue';
+  import { uploadApi } from '/@/api/sys/upload';
+
+  interface FileItem {
+    uid: string;
+    name?: string;
+    status?: string;
+    response?: string;
+    url?: string;
+  }
+  interface FileInfo {
+    file: FileItem;
+    fileList: FileItem[];
+  }
+  interface State {
+    fileList: FileItem[];
+  }
+
+  export default defineComponent({
+    components: {
+      [Upload.name]: Upload,
+    },
+    setup() {
+      const state = reactive<State>({
+        fileList: [
+          {
+            uid: '1',
+            name: 'xxx.png',
+            status: 'done',
+            response: 'Server Error 500', // custom error message to show
+            url: 'http://www.baidu.com/xxx.png',
+          },
+          {
+            uid: '2',
+            name: 'yyy.png',
+            // status: 'done',
+            url: 'http://www.baidu.com/yyy.png',
+          },
+          {
+            uid: '3',
+            name: 'zzz.png',
+            status: 'error',
+            response: 'Server Error 500', // custom error message to show
+            url: 'http://www.baidu.com/zzz.png',
+          },
+        ],
+      });
+      function beforeUpload(file) {
+        console.log(`file`, file);
+        uploadApi({ file })
+          .then((res) => {
+            console.log(`res`, res);
+          })
+          .catch((err) => {
+            console.log(`err`, err);
+          });
+        return false;
+      }
+      const handleChange = ({ file, fileList }: FileInfo) => {
+        console.log(`file`, file);
+        console.log(`fileList`, fileList);
+        if (file.status !== 'uploading') {
+          console.log(file, fileList);
+        }
+      };
+      return {
+        beforeUpload,
+        handleChange,
+        ...toRefs(state),
+      };
+    },
+  });
+</script>

src/views/expense/account_manage/data.ts

@@ -2,6 +2,8 @@ import { FormProps, BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Form/index';
 import { adapt } from '/@/utils/adapt';
 import moment from 'moment';
+import { h } from 'vue';
+import Upload from './customCom/Upload.vue';
 
 const adaptWidth = adapt();
 
@@ -375,8 +377,14 @@ export const schemas: FormSchema[] = [
     colProps: {
       span: adaptWidth.elContainer,
     },
-    componentProps: {
-      placeholder: '上传',
+    render: ({ model, field }) => {
+      return h(Upload, {
+        value: '',
+        placeholder: '上传',
+        onChange(value) {
+          model[field] = value;
+        },
+      });
     },
   },
   {

src/views/general/attachment/index.vue

@@ -115,7 +115,7 @@
       });
       function afterFetch(res) {
         console.log(`res`, res);
-      };
+      }
       function getTableAction() {
         // 获取组件
         const tableAction = unref(tableRef);
@@ -234,19 +234,7 @@
         // 所有请求都存放这个promise中
         console.log(`list`, list);
         console.log(`total`, total);
-        // state.progress_show = true;
-        // let s = 1;
-        // let timer = setInterval(() => {
-        //   if (s <= 100) {
-        //     state.percent = s;
-        //     s++;
-        //   } else {
-        //     clearTimeout(timer);
-        //     state.progress_show = false;
-        //     state.percent = 0;
-        //     success('文件上传成功！');
-        //   }
-        // }, 10);
+        state.progress_show = true;
         return new Promise((resolve, reject) => {
           const handler = () => {
             if (list.length) {
@@ -258,6 +246,7 @@
                 .then((res) => {
                   console.log(`res`, res);
                   if (res) {
+                    state.percent = parseInt((finished / total) * 100);
                     currentFileInfo = formInfo;
                     finished++;
                     console.log(`finished`, finished);
@@ -283,6 +272,7 @@
             if (finished >= total) {
               state.progress_show = false;
               state.percent = 0;
+              getTableAction().reload();
               success('文件上传成功');
               resolve(currentFileInfo.md5); // 输出当前完成上传的文件信息
             }