v3.6.0 FileUpload组件支持多文件上传

YunaiV
1 parent b267b2c3
Showing 11 changed files with 80 additions and 84 deletions
yudao-module-tool/yudao-module-tool-impl/src/main/resources/codegen/vue/views/index.vue.vm
yudao-ui-admin/src/api/bpm/processInstance.js
yudao-ui-admin/src/components/FileUpload/index.vue
yudao-ui-admin/src/views/bpm/definition/index.vue
yudao-ui-admin/src/views/bpm/model/index.vue
yudao-ui-admin/src/views/bpm/oa/leave/index.vue
yudao-ui-admin/src/views/bpm/processInstance/create.vue
yudao-ui-admin/src/views/bpm/processInstance/index.vue
yudao-ui-admin/src/views/bpm/taskAssignRule/taskAssignRuleDialog.vue
yudao-ui-admin/src/views/infra/apiErrorLog/index.vue
yudao-ui-admin/src/views/system/user/index.vue
@@ -74,7 +74,7 @@
 #elseif("" != $column.dictType)## 数据字典
       <el-table-column label="${comment}" align="center" prop="${javaField}">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.$dictType.toUpperCase(), scope.row.${column.javaField}) }}</span>
+          <dict-type :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.${column.javaField}" />
         </template>
       </el-table-column>
 #else
@@ -33,3 +33,18 @@ export function getProcessInstance(id) {
     method: 'get',
   })
 }
+
+export class createProcessInstanceExt {
+}
+
+export class exportProcessInstanceExtExcel {
+}
+
+export class getProcessInstanceExtPage {
+}
+
+export class deleteProcessInstanceExt {
+}
+
+export class deleteProcessInstanceExt {
+}
@@ -4,9 +4,7 @@
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
-      :limit="1"
       :on-error="handleUploadError"
-      :on-exceed="handleExceed"
       :on-success="handleUploadSuccess"
       :show-file-list="false"
       :headers="headers"
@@ -26,8 +24,8 @@
     <!-- 文件列表 -->
     <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
-        <el-link :href="file.url" :underline="false" target="_blank">
+      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+        <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
@@ -42,6 +40,7 @@
 import { getToken } from "@/utils/auth";
 export default {
+  name: "FileUpload",
   props: {
     // 值
     value: [String, Object, Array],
@@ -63,6 +62,7 @@ export default {
   },
   data() {
     return {
+      baseUrl: process.env.VUE_APP_BASE_API,
       uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken(),
@@ -70,30 +70,35 @@ export default {
       fileList: [],
     };
   },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          let temp = 1;
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',');
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            if (typeof item === "string") {
+              item = { name: item, url: item };
+            }
+            item.uid = item.uid || new Date().getTime() + temp++;
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
   computed: {
     // 是否显示提示
     showTip() {
       return this.isShowTip && (this.fileType || this.fileSize);
     },
-    // 列表
-    list() {
-      let temp = 1;
-      if (this.value) {
-        // 首先将值转为数组
-        const list = Array.isArray(this.value) ? this.value : [this.value];
-        // 然后将数组转为对象数组
-        return list.map((item) => {
-          if (typeof item === "string") {
-            item = { name: item, url: item };
-          }
-          item.uid = item.uid || new Date().getTime() + temp++;
-          return item;
-        });
-      } else {
-        this.fileList = [];
-        return [];
-      }
-    },
   },
   methods: {
     // 上传前校检格式和大小
@@ -124,10 +129,6 @@ export default {
       }
       return true;
     },
-    // 文件个数超出
-    handleExceed() {
-      this.$message.error(`只允许上传单个文件`);
-    },
     // 上传失败
     handleUploadError(err) {
       this.$message.error("上传失败, 请重试");
@@ -135,12 +136,13 @@ export default {
     // 上传成功回调
     handleUploadSuccess(res, file) {
       this.$message.success("上传成功");
-      this.$emit("input", res.url);
+      this.fileList.push({ name: res.fileName, url: res.fileName });
+      this.$emit("input", this.listToString(this.fileList));
     },
     // 删除文件
     handleDelete(index) {
       this.fileList.splice(index, 1);
-      this.$emit("input", '');
+      this.$emit("input", this.listToString(this.fileList));
     },
     // 获取文件名称
     getFileName(name) {
@@ -149,11 +151,16 @@ export default {
       } else {
         return "";
       }
+    },
+    // 对象转成分隔字符串
+    listToString(list) {
+      let files = "";
+      for (let key in list) {
+        files += list[key].url + ",";
+      }
+      return files.substr(0, files.length - 1);
     }
-  },
-  created() {
-    this.fileList = this.list;
-  },
+  }
 };
 </script>
@@ -176,4 +183,4 @@ export default {
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
-</style>
 \ No newline at end of file
+</style>
@@ -12,7 +12,7 @@
       </el-table-column>
       <el-table-column label="定义分类" align="center" prop="category" width="100">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.BPM_MODEL_CATEGORY, scope.row.category) }}</span>
+          <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
         </template>
       </el-table-column>
       <el-table-column label="表单信息" align="center" prop="formType" width="200">
@@ -47,7 +47,7 @@
       </el-table-column>
       <el-table-column label="流程分类" align="center" prop="category" width="100">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.BPM_MODEL_CATEGORY, scope.row.category) }}</span>
+          <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
         </template>
       </el-table-column>
       <el-table-column label="表单信息" align="center" prop="formType" width="200">
@@ -291,7 +291,7 @@ export default {
         // 设置上传的请求头部
         headers: getBaseHeader(),
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + '/api/' + "/bpm/model/import",
+        url: process.env.VUE_APP_BASE_API + '/admin-api/' + "/bpm/model/import",
         // 表单
         form: {},
         // 校验规则
@@ -84,7 +84,7 @@
 <script>
 import { getLeavePage } from "@/api/bpm/leave"
-import { getDictDataLabel, getDictDatas, DICT_TYPE } from '@/utils/dict'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
 import {cancelProcessInstance} from "@/api/bpm/processInstance";
 export default {
@@ -171,13 +171,7 @@ export default {
         this.getList();
         this.msgSuccess("取消成功");
       })
-    },
-    resultFormat(row, column) {
-      return getDictDataLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, row.result)
-    },
-    typeFormat(row, column) {
-      return getDictDataLabel(DICT_TYPE.BPM_OA_LEAVE_TYPE, row.type)
-    },
+    }
   }
 };
 </script>
@@ -12,7 +12,7 @@
         </el-table-column>
         <el-table-column label="流程分类" align="center" prop="category" width="100">
           <template slot-scope="scope">
-            <span>{{ getDictDataLabel(DICT_TYPE.BPM_MODEL_CATEGORY, scope.row.category) }}</span>
+            <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
           </template>
         </el-table-column>
         <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
@@ -52,7 +52,7 @@
       <el-table-column label="流程名" align="center" prop="name" />
       <el-table-column label="流程分类" align="center" prop="category">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.BPM_MODEL_CATEGORY, scope.row.category) }}</span>
+          <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
         </template>
       </el-table-column>
       <el-table-column label="当前审批任务" align="center" prop="tasks">
@@ -64,14 +64,7 @@
       </el-table-column>
       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
-          <span>
-            <el-tag type="primary" v-if="scope.row.status === 1"> <!-- 进行中 -->
-              {{ getDictDataLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, scope.row.status) }}
-            </el-tag>
-             <el-tag type="success" v-if="scope.row.status === 2"> <!-- 已结束 -->
-              {{ getDictDataLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, scope.row.status) }}
-            </el-tag>
-          </span>
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="结果" align="center" prop="result">
@@ -106,16 +99,7 @@
 </template>
 <script>
-import {
-  getMyProcessInstancePage,
-  createProcessInstanceExt,
-  updateProcessInstanceExt,
-  deleteProcessInstanceExt,
-  getProcessInstanceExt,
-  getProcessInstanceExtPage,
-  exportProcessInstanceExtExcel, cancelProcessInstance
-} from "@/api/bpm/processInstance";
-import {deleteErrorCode} from "@/api/system/errorCode";
+import { getMyProcessInstancePage, cancelProcessInstance } from "@/api/bpm/processInstance";
 export default {
   name: "ProcessInstance",
@@ -7,7 +7,7 @@
         <el-table-column label="任务标识" align="center" prop="taskDefinitionKey" width="120" show-tooltip-when-overflow />
         <el-table-column label="规则类型" align="center" prop="type" width="120">
           <template slot-scope="scope">
-            <span>{{ getDictDataLabel(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE, scope.row.type) }}</span>
+            <dict-tag :type="DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE" :value="scope.row.type" />
           </template>
         </el-table-column>
         <el-table-column label="规则范围" align="center" prop="options" width="440px">
@@ -63,7 +63,7 @@
       <el-table-column label="异常名" align="center" prop="exceptionName" width="250" />
       <el-table-column label="处理状态" align="center" prop="processStatus">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS, scope.row.processStatus) }}</span>
+          <dict-tag :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS" :value="scope.row.processStatus" />
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -93,7 +93,7 @@
             <el-form-item label="链路追踪：">{{ form.traceId }}</el-form-item>
             <el-form-item label="应用名：">{{ form.applicationName }}</el-form-item>
             <el-form-item label="用户信息：">
-              {{ form.userId }} | {{ getDictDataLabel(DICT_TYPE.USER_TYPE, form.userType) }} | {{ form.userIp }} | {{ form.userAgent}}
+              {{ form.userId }} <dict-tag :type="DICT_TYPE.USER_TYPE" :value="form.userType" /> | {{ form.userIp }} | {{ form.userAgent}}
             </el-form-item>
             <el-form-item label="请求信息：">{{ form.requestMethod }} | {{ form.requestUrl }} </el-form-item>
             <el-form-item label="请求参数：">{{ form.requestParams }}</el-form-item>
@@ -103,7 +103,7 @@
               <el-input type="textarea" :readonly="true" :autosize="{ maxRows: 20}" v-model="form.exceptionStackTrace"></el-input>
             </el-form-item>
             <el-form-item label="处理状态">
-              {{ getDictDataLabel(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS, form.processStatus) }}
+              <dict-tag :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS" :value="form.processStatus" />
             </el-form-item>
             <el-form-item label="处理人">{{ form.processUserId }}</el-form-item>
             <el-form-item label="处理时间">{{ parseTime(form.processTime) }}</el-form-item>
@@ -172,18 +172,9 @@
     <!-- 用户导入对话框 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload
-        ref="upload"
-        :limit="1"
-        accept=".xlsx, .xls"
-        :headers="upload.headers"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport"
-        :disabled="upload.isUploading"
-        :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess"
-        :auto-upload="false"
-        drag
-      >
+      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">
           将文件拖到此处，或
@@ -253,6 +244,7 @@ import {CommonStatusEnum} from &quot;@/utils/constants&quot;;
 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
 import {assignUserRole, listUserRoles} from "@/api/system/permission";
 import {listSimpleRoles} from "@/api/system/role";
+import {getBaseHeader} from "@/utils/request";
 export default {
   name: "User",
@@ -306,9 +298,9 @@ export default {
         // 是否更新已经存在的用户数据
         updateSupport: 0,
         // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
+        headers: getBaseHeader(),
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + '/api/' + "/system/user/import"
+        url: process.env.VUE_APP_BASE_API + '/admin-api/' + "/system/user/import"
       },
       // 查询参数
       queryParams: {
@@ -626,6 +618,10 @@ export default {
     },
     // 文件上传成功处理
     handleFileSuccess(response, file, fileList) {
+      if (response.code !== 0) {
+        this.msgError(response.msg)
+        return;
+      }
       this.upload.open = false;
       this.upload.isUploading = false;
       this.$refs.upload.clearFiles();