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

This commit is contained in:
YunaiV 2022-02-16 21:34:17 +08:00
parent b267b2c347
commit c844c7ef19
11 changed files with 80 additions and 84 deletions

View File

@ -74,7 +74,7 @@
#elseif("" != $column.dictType)## 数据字典 #elseif("" != $column.dictType)## 数据字典
<el-table-column label="${comment}" align="center" prop="${javaField}"> <el-table-column label="${comment}" align="center" prop="${javaField}">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
#else #else

View File

@ -33,3 +33,18 @@ export function getProcessInstance(id) {
method: 'get', method: 'get',
}) })
} }
export class createProcessInstanceExt {
}
export class exportProcessInstanceExtExcel {
}
export class getProcessInstanceExtPage {
}
export class deleteProcessInstanceExt {
}
export class deleteProcessInstanceExt {
}

View File

@ -4,9 +4,7 @@
:action="uploadFileUrl" :action="uploadFileUrl"
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
:file-list="fileList" :file-list="fileList"
:limit="1"
:on-error="handleUploadError" :on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
:show-file-list="false" :show-file-list="false"
:headers="headers" :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"> <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"> <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
<el-link :href="file.url" :underline="false" target="_blank"> <el-link :href="`${baseUrl}${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span> <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link> </el-link>
<div class="ele-upload-list__item-content-action"> <div class="ele-upload-list__item-content-action">
@ -42,6 +40,7 @@
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
export default { export default {
name: "FileUpload",
props: { props: {
// //
value: [String, Object, Array], value: [String, Object, Array],
@ -63,6 +62,7 @@ export default {
}, },
data() { data() {
return { return {
baseUrl: process.env.VUE_APP_BASE_API,
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", //
headers: { headers: {
Authorization: "Bearer " + getToken(), Authorization: "Bearer " + getToken(),
@ -70,30 +70,35 @@ export default {
fileList: [], 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: { computed: {
// //
showTip() { showTip() {
return this.isShowTip && (this.fileType || this.fileSize); 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: { methods: {
// //
@ -124,10 +129,6 @@ export default {
} }
return true; return true;
}, },
//
handleExceed() {
this.$message.error(`只允许上传单个文件`);
},
// //
handleUploadError(err) { handleUploadError(err) {
this.$message.error("上传失败, 请重试"); this.$message.error("上传失败, 请重试");
@ -135,12 +136,13 @@ export default {
// //
handleUploadSuccess(res, file) { handleUploadSuccess(res, file) {
this.$message.success("上传成功"); 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) { handleDelete(index) {
this.fileList.splice(index, 1); this.fileList.splice(index, 1);
this.$emit("input", ''); this.$emit("input", this.listToString(this.fileList));
}, },
// //
getFileName(name) { getFileName(name) {
@ -149,11 +151,16 @@ export default {
} else { } else {
return ""; 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> </script>
@ -176,4 +183,4 @@ export default {
.ele-upload-list__item-content-action .el-link { .ele-upload-list__item-content-action .el-link {
margin-right: 10px; margin-right: 10px;
} }
</style> </style>

View File

@ -12,7 +12,7 @@
</el-table-column> </el-table-column>
<el-table-column label="定义分类" align="center" prop="category" width="100"> <el-table-column label="定义分类" align="center" prop="category" width="100">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column label="表单信息" align="center" prop="formType" width="200"> <el-table-column label="表单信息" align="center" prop="formType" width="200">

View File

@ -47,7 +47,7 @@
</el-table-column> </el-table-column>
<el-table-column label="流程分类" align="center" prop="category" width="100"> <el-table-column label="流程分类" align="center" prop="category" width="100">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column label="表单信息" align="center" prop="formType" width="200"> <el-table-column label="表单信息" align="center" prop="formType" width="200">
@ -291,7 +291,7 @@ export default {
// //
headers: getBaseHeader(), 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: {}, form: {},
// //

View File

@ -84,7 +84,7 @@
<script> <script>
import { getLeavePage } from "@/api/bpm/leave" 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"; import {cancelProcessInstance} from "@/api/bpm/processInstance";
export default { export default {
@ -171,13 +171,7 @@ export default {
this.getList(); this.getList();
this.msgSuccess("取消成功"); 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> </script>

View File

@ -12,7 +12,7 @@
</el-table-column> </el-table-column>
<el-table-column label="流程分类" align="center" prop="category" width="100"> <el-table-column label="流程分类" align="center" prop="category" width="100">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80"> <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">

View File

@ -52,7 +52,7 @@
<el-table-column label="流程名" align="center" prop="name" /> <el-table-column label="流程名" align="center" prop="name" />
<el-table-column label="流程分类" align="center" prop="category"> <el-table-column label="流程分类" align="center" prop="category">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column label="当前审批任务" align="center" prop="tasks"> <el-table-column label="当前审批任务" align="center" prop="tasks">
@ -64,14 +64,7 @@
</el-table-column> </el-table-column>
<el-table-column label="状态" align="center" prop="status"> <el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope"> <template slot-scope="scope">
<span> <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
<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>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="结果" align="center" prop="result"> <el-table-column label="结果" align="center" prop="result">
@ -106,16 +99,7 @@
</template> </template>
<script> <script>
import { import { getMyProcessInstancePage, cancelProcessInstance } from "@/api/bpm/processInstance";
getMyProcessInstancePage,
createProcessInstanceExt,
updateProcessInstanceExt,
deleteProcessInstanceExt,
getProcessInstanceExt,
getProcessInstanceExtPage,
exportProcessInstanceExtExcel, cancelProcessInstance
} from "@/api/bpm/processInstance";
import {deleteErrorCode} from "@/api/system/errorCode";
export default { export default {
name: "ProcessInstance", name: "ProcessInstance",

View File

@ -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="taskDefinitionKey" width="120" show-tooltip-when-overflow />
<el-table-column label="规则类型" align="center" prop="type" width="120"> <el-table-column label="规则类型" align="center" prop="type" width="120">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column label="规则范围" align="center" prop="options" width="440px"> <el-table-column label="规则范围" align="center" prop="options" width="440px">

View File

@ -63,7 +63,7 @@
<el-table-column label="异常名" align="center" prop="exceptionName" width="250" /> <el-table-column label="异常名" align="center" prop="exceptionName" width="250" />
<el-table-column label="处理状态" align="center" prop="processStatus"> <el-table-column label="处理状态" align="center" prop="processStatus">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <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.traceId }}</el-form-item>
<el-form-item label="应用名:">{{ form.applicationName }}</el-form-item> <el-form-item label="应用名:">{{ form.applicationName }}</el-form-item>
<el-form-item label="用户信息:"> <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>
<el-form-item label="请求信息:">{{ form.requestMethod }} | {{ form.requestUrl }} </el-form-item> <el-form-item label="请求信息:">{{ form.requestMethod }} | {{ form.requestUrl }} </el-form-item>
<el-form-item label="请求参数:">{{ form.requestParams }}</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-input type="textarea" :readonly="true" :autosize="{ maxRows: 20}" v-model="form.exceptionStackTrace"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="处理状态"> <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>
<el-form-item label="处理人">{{ form.processUserId }}</el-form-item> <el-form-item label="处理人">{{ form.processUserId }}</el-form-item>
<el-form-item label="处理时间">{{ parseTime(form.processTime) }}</el-form-item> <el-form-item label="处理时间">{{ parseTime(form.processTime) }}</el-form-item>

View File

@ -172,18 +172,9 @@
<!-- 用户导入对话框 --> <!-- 用户导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
ref="upload" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
:limit="1" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
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> <i class="el-icon-upload"></i>
<div class="el-upload__text"> <div class="el-upload__text">
将文件拖到此处 将文件拖到此处
@ -253,6 +244,7 @@ import {CommonStatusEnum} from "@/utils/constants";
import {DICT_TYPE, getDictDatas} from "@/utils/dict"; import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import {assignUserRole, listUserRoles} from "@/api/system/permission"; import {assignUserRole, listUserRoles} from "@/api/system/permission";
import {listSimpleRoles} from "@/api/system/role"; import {listSimpleRoles} from "@/api/system/role";
import {getBaseHeader} from "@/utils/request";
export default { export default {
name: "User", name: "User",
@ -306,9 +298,9 @@ export default {
// //
updateSupport: 0, 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: { queryParams: {
@ -626,6 +618,10 @@ export default {
}, },
// //
handleFileSuccess(response, file, fileList) { handleFileSuccess(response, file, fileList) {
if (response.code !== 0) {
this.msgError(response.msg)
return;
}
this.upload.open = false; this.upload.open = false;
this.upload.isUploading = false; this.upload.isUploading = false;
this.$refs.upload.clearFiles(); this.$refs.upload.clearFiles();