|
|
@@ -0,0 +1,487 @@
|
|
|
+<template>
|
|
|
+ <div class="ele-body">
|
|
|
+ <el-card
|
|
|
+ shadow="never"
|
|
|
+ >
|
|
|
+ <div class="filter-container">
|
|
|
+ <el-form
|
|
|
+ class="ele-form-search"
|
|
|
+ @keyup.enter.native="reload"
|
|
|
+ @submit.native.prevent
|
|
|
+ >
|
|
|
+ <el-row
|
|
|
+ :gutter="15"
|
|
|
+ style="display: flex; align-items: center"
|
|
|
+ >
|
|
|
+ <!-- <el-col v-bind="{ span: 4 }">
|
|
|
+ <el-form-item label="分类:" label-width="60px">
|
|
|
+ <el-select v-model="params.dictType">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in dictList[
|
|
|
+ 'collaborative_type'
|
|
|
+ ]"
|
|
|
+ :key="index"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col> -->
|
|
|
+ <el-col v-bind="{ span: 6 }">
|
|
|
+ <el-form-item label="单据:" label-width="60px">
|
|
|
+ <el-select v-model="params.formId">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in templateList"
|
|
|
+ :key="index"
|
|
|
+ :value="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="{ span: 6 }">
|
|
|
+ <el-form-item
|
|
|
+ label="结果:"
|
|
|
+ prop="result"
|
|
|
+ label-width="60px"
|
|
|
+ >
|
|
|
+ <DictSelection
|
|
|
+ dictName="流程实例的结果"
|
|
|
+ clearable
|
|
|
+ v-model="params.result"
|
|
|
+ >
|
|
|
+ </DictSelection>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="{ span: 6 }">
|
|
|
+ <el-form-item
|
|
|
+ label="创建时间:"
|
|
|
+ prop="createTime1"
|
|
|
+ label-width="90px"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="createTime1"
|
|
|
+ style="width: 100%"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :default-time="['00:00:00', '23:59:59']"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col v-bind="{ span: 6 }">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ class="ele-btn-icon"
|
|
|
+ @click="reload"
|
|
|
+ >
|
|
|
+ 查询
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="reset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <ele-pro-table
|
|
|
+ ref="table"
|
|
|
+ height="calc(100vh - 350px)"
|
|
|
+ :columns="columns"
|
|
|
+ :datasource="datasource"
|
|
|
+ :init-load="false"
|
|
|
+ @columns-change="handleColumnChange"
|
|
|
+ :cache-key="cacheKeyUrl"
|
|
|
+ :page-size="20"
|
|
|
+ >
|
|
|
+ <template v-slot:toolbar="{ row }">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ class="ele-btn-icon"
|
|
|
+ @click="handleStartProcess"
|
|
|
+ >
|
|
|
+ 新建
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template v-slot:result="{ row }">
|
|
|
+ <el-tag
|
|
|
+ size="medium"
|
|
|
+ :type="
|
|
|
+ getTimelineItemType(
|
|
|
+ getDictValue('流程实例的结果', row.result)
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ getDictValue('流程实例的结果', row.result) }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ <template v-slot:dictType="{ row }">
|
|
|
+ {{ getDictV('collaborative_type', row.dictType) }}
|
|
|
+ </template>
|
|
|
+ <template v-slot:durationInMillis="{ row }">
|
|
|
+ {{ getDateTime(row.durationInMillis) }}
|
|
|
+ </template>
|
|
|
+ <template v-slot:name="{ row }">
|
|
|
+ <el-link
|
|
|
+ type="primary"
|
|
|
+ :underline="false"
|
|
|
+ @click="handleDetail(row)"
|
|
|
+ >
|
|
|
+ {{ row.name }}
|
|
|
+ </el-link>
|
|
|
+ </template>
|
|
|
+ <template
|
|
|
+ v-if="formColumnList.length"
|
|
|
+ v-for="(item, index) in formColumnList"
|
|
|
+ v-slot:[item.model]="{ row }"
|
|
|
+ >
|
|
|
+ <div v-if="item.type == 'imgupload'">
|
|
|
+ <el-image
|
|
|
+ v-if="row[item.model].length"
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
+ :src="row[item.model][0].url"
|
|
|
+ :preview-src-list="row[item.model].map((i) => i.url)"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="item.type == 'fileupload'">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ v-if="row[item.model]?.length"
|
|
|
+ @click="getFiles(row[item.model])"
|
|
|
+ >下载
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-else-if="item.type == 'userSelect'">
|
|
|
+ {{ getUserName(row[item.model]) }}
|
|
|
+ </div>
|
|
|
+ <div v-else-if="item.type == 'deptAndUserCascader'">
|
|
|
+ {{ getDeptAndUserName(row[item.model]) }}
|
|
|
+ </div>
|
|
|
+ <div v-else-if="item.type == 'deptCascader'">
|
|
|
+ {{ getDeptName(row[item.model]) }}
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ row[item.model] }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 操作列 -->
|
|
|
+ <!-- <template v-slot:action="{ row }">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleAudit(row)"
|
|
|
+ >详情
|
|
|
+ </el-button>
|
|
|
+ </template> -->
|
|
|
+ </ele-pro-table>
|
|
|
+ </el-card>
|
|
|
+ <add-dialog
|
|
|
+ :add-flag.sync="addFlag"
|
|
|
+ v-if="addFlag"
|
|
|
+ :list="templateList"
|
|
|
+ ref="addDialogRef"
|
|
|
+ @reload="reload"
|
|
|
+ ></add-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getBpmCustomFormList,
|
|
|
+ getProcessInstancePage
|
|
|
+ } from '@/api/bpm/task';
|
|
|
+ import { getDate } from '@/utils/dateUtils';
|
|
|
+ import dictMixins from '@/mixins/dictMixins';
|
|
|
+ // import detail from '@/views/bpm/processInstance/detail.vue';
|
|
|
+ // import formDetail from './detail.vue';
|
|
|
+ import { getByCode } from '@/api/system/dictionary-data';
|
|
|
+ import { getFile } from '@/api/system/file';
|
|
|
+ import { getUserPage } from '@/api/system/organization';
|
|
|
+ import { listOrganizations } from '@/api/system/organization';
|
|
|
+ import tabMixins from '@/mixins/tableColumnsMixin';
|
|
|
+ import addDialog from './components/addDialog.vue';
|
|
|
+
|
|
|
+ // 默认表单数据
|
|
|
+ const defaultParams = {
|
|
|
+ dictType: '5',
|
|
|
+ status: '',
|
|
|
+ name: '',
|
|
|
+ formId: ''
|
|
|
+ };
|
|
|
+ export default {
|
|
|
+ name: 'index',
|
|
|
+ components: {
|
|
|
+ addDialog
|
|
|
+ // detail,
|
|
|
+ // formDetail
|
|
|
+ },
|
|
|
+ mixins: [dictMixins, tabMixins],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ cacheKeyUrl: 'wt-eaf1548b-collaborative',
|
|
|
+ addFlag: false,
|
|
|
+ formDetailDialogFlag: false,
|
|
|
+ templateList: {},
|
|
|
+ dictList: {},
|
|
|
+ defaultTemplateList: [],
|
|
|
+ userList: [],
|
|
|
+ deptList: [],
|
|
|
+ params: { ...defaultParams },
|
|
|
+ statusList: [],
|
|
|
+ formColumnList: [],
|
|
|
+ createTime1: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 是否开启响应式布局
|
|
|
+ styleResponsive() {
|
|
|
+ return this.$store.state.theme.styleResponsive;
|
|
|
+ },
|
|
|
+ columns() {
|
|
|
+ let list = this.formColumnList.map((item) => {
|
|
|
+ return {
|
|
|
+ prop: item.model,
|
|
|
+ label: item.name,
|
|
|
+ align: 'center',
|
|
|
+ slot: item.model,
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120
|
|
|
+ };
|
|
|
+ });
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ columnKey: 'index',
|
|
|
+ label: '序号',
|
|
|
+ type: 'index',
|
|
|
+ width: 55,
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'dictType',
|
|
|
+ label: '分类',
|
|
|
+ align: 'center',
|
|
|
+ slot: 'dictType',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 70
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'formName',
|
|
|
+ label: '单据',
|
|
|
+ align: 'center',
|
|
|
+ slot: 'formName',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 70
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'name',
|
|
|
+ label: '名称',
|
|
|
+ align: 'center',
|
|
|
+ slot: 'name',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 80
|
|
|
+ },
|
|
|
+ ...list,
|
|
|
+ {
|
|
|
+ prop: 'result',
|
|
|
+ slot: 'result',
|
|
|
+ label: '结果',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'endTime',
|
|
|
+ label: '审批时间',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'createTime',
|
|
|
+ label: '创建时间',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ columnKey: 'action',
|
|
|
+ label: '操作',
|
|
|
+ width: 100,
|
|
|
+ align: 'center',
|
|
|
+ resizable: false,
|
|
|
+ slot: 'action',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ fixed: 'right'
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ getUserName() {
|
|
|
+ return (id) => {
|
|
|
+ if (!id) return '';
|
|
|
+ let find = this.userList.find((item) => item.id == id) || {};
|
|
|
+ return find.name;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ getDeptAndUserName() {
|
|
|
+ return (id = []) => {
|
|
|
+ if (!id.length) return '';
|
|
|
+ id = Array.isArray(id) ? id : [id];
|
|
|
+ let find =
|
|
|
+ this.userList.find((item) => item.id == id[id.length - 1]) || {};
|
|
|
+ return find.name;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ getDeptName() {
|
|
|
+ return (id = []) => {
|
|
|
+ if (!id.length) return '';
|
|
|
+ id = Array.isArray(id) ? id : [id];
|
|
|
+ let find =
|
|
|
+ this.deptList.find((item) => item.id == id[id.length - 1]) || {};
|
|
|
+ return find.name;
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'params.formId': {
|
|
|
+ handler(val) {
|
|
|
+ this.reload();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ await this.getDictList('collaborative_type');
|
|
|
+ await this.getTemplateList();
|
|
|
+ await this.getUserList();
|
|
|
+ await this.getDeptList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDictV(code, val) {
|
|
|
+ if (!this.dictList[code]) return '';
|
|
|
+ return this.dictList[code].find((item) => item.value == val)?.label;
|
|
|
+ },
|
|
|
+ async getDictList(code) {
|
|
|
+ let { data: res } = await getByCode(code);
|
|
|
+ this.dictList[code] = res.map((item) => {
|
|
|
+ let values = Object.keys(item);
|
|
|
+ return {
|
|
|
+ value: values[0],
|
|
|
+ label: item[values[0]]
|
|
|
+ };
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取人员数据
|
|
|
+ async getUserList() {
|
|
|
+ let params = { pageNum: 1, size: -1 };
|
|
|
+ let { list } = await getUserPage(params);
|
|
|
+ this.userList = list;
|
|
|
+ },
|
|
|
+ //获取部门数据
|
|
|
+ async getDeptList() {
|
|
|
+ this.deptList = await listOrganizations();
|
|
|
+ },
|
|
|
+ getFiles(row = []) {
|
|
|
+ row.forEach((item) => {
|
|
|
+ getFile({ objectName: item.storePath }, item.name);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async getTemplateList() {
|
|
|
+ this.defaultTemplateList = await getBpmCustomFormList({ status: 1 });
|
|
|
+ this.templateList = _.groupBy(this.defaultTemplateList, 'dictType')['5'];
|
|
|
+ // this.params.dictType = this.dictList['collaborative_type'][0].value;
|
|
|
+ this.params.formId = this.templateList[0]?.id;
|
|
|
+ let makingJson =
|
|
|
+ JSON.parse(this.defaultTemplateList[0].formJson.makingJson) || {};
|
|
|
+ this.formColumnList = makingJson.list;
|
|
|
+ console.log(this.formColumnList);
|
|
|
+ },
|
|
|
+ handleStartProcess() {
|
|
|
+ this.addFlag = true;
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.$refs.addDialogRef.init();
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ /* 表格数据源 */
|
|
|
+ async datasource({ page, limit, where, order }) {
|
|
|
+ let [createTimeBegin, createTimeEnd] = this.createTime1 || [];
|
|
|
+
|
|
|
+ let data = await getProcessInstancePage({
|
|
|
+ pageNo: page,
|
|
|
+ pageSize: limit,
|
|
|
+ ...this.params,
|
|
|
+ processType: '1',
|
|
|
+ createTimeBegin,
|
|
|
+ createTimeEnd
|
|
|
+ });
|
|
|
+ data = data.list.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ ...item.valueJson
|
|
|
+ };
|
|
|
+ });
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ /* 刷新表格 */
|
|
|
+ reload(where) {
|
|
|
+ let find =
|
|
|
+ this.defaultTemplateList.find(
|
|
|
+ (item) => item.id == this.params.formId
|
|
|
+ ) || {};
|
|
|
+ let makingJson = JSON.parse(find.formJson.makingJson) || {};
|
|
|
+ this.formColumnList = makingJson.list;
|
|
|
+ this.$refs.table.reload({ page: 1, where });
|
|
|
+ this.$refs.table.reRenderTable();
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 重置 */
|
|
|
+ reset() {
|
|
|
+ this.params = { ...defaultParams };
|
|
|
+ this.createTime1 = [];
|
|
|
+ this.params.dictType = this.dictList['collaborative_type'][0].value;
|
|
|
+ this.params.formId = this.templateList[this.params.dictType][0]?.id;
|
|
|
+
|
|
|
+ this.reload();
|
|
|
+ },
|
|
|
+ /** */
|
|
|
+ handleAudit(row) {
|
|
|
+ this.$refs.detailRef.open(row.id);
|
|
|
+ },
|
|
|
+ /** */
|
|
|
+ handleDetail(row) {
|
|
|
+ this.formDetailDialogFlag = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.formDetailDialogRef.open(row);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getTimelineItemType(result) {
|
|
|
+ if (result === '通过') {
|
|
|
+ return 'success';
|
|
|
+ }
|
|
|
+ if (result === '不通过') {
|
|
|
+ return 'danger';
|
|
|
+ }
|
|
|
+ if (result === '取消') {
|
|
|
+ return 'info';
|
|
|
+ }
|
|
|
+ if (result === '处理中') {
|
|
|
+ return 'warning';
|
|
|
+ }
|
|
|
+
|
|
|
+ return '';
|
|
|
+ },
|
|
|
+ getDateTime(ms) {
|
|
|
+ return getDate(ms);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+</style>
|