feat: 流程设计模块更新用户类型

This commit is contained in:
tony
2022-12-13 22:34:34 +08:00
parent e093855bd9
commit e37577f7fb
26 changed files with 2037 additions and 367 deletions

View File

@@ -6,6 +6,7 @@
:users="users"
:groups="groups"
:categorys="categorys"
:exps="exps"
:is-view="false"
@save="save"
@showXML="showXML"
@@ -24,7 +25,7 @@
</div>
</template>
<script>
import {readXml, roleList, saveXml, userList} from "@/api/flowable/definition";
import {readXml, roleList, saveXml, userList,expList} from "@/api/flowable/definition";
import bpmnModeler from '@/components/Process/index'
import vkbeautify from 'vkbeautify'
import Hljs from 'highlight.js'
@@ -55,6 +56,7 @@ export default {
users: [],
groups: [],
categorys: [],
exps: [],
};
},
@@ -112,12 +114,14 @@ export default {
})
this.groups = res.data;
});
expList().then(res =>{
this.exps = res.data;
});
},
/** 展示xml */
showXML(data){
this.xmlTitle = 'xml查看';
this.xmlOpen = true;
debugger
this.xmlContent = vkbeautify.xml(data);
},
/** 获取数据类型 */

View File

@@ -157,10 +157,6 @@ export default {
};
</script>
<style lang="scss">
@import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
.bjs-powered-by {
display: none;
}

View File

@@ -75,20 +75,16 @@
<script>
import {flowRecord} from "@/api/flowable/finished";
import Parser from '@/components/parser/Parser'
import {definitionStart, getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
import {complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate} from "@/api/flowable/todo";
import {getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
import flow from '@/views/flowable/task/record/flow'
import {treeselect} from "@/api/system/dept";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import {listUser} from "@/api/system/user";
export default {
name: "Record",
components: {
Parser,
flow,
Treeselect
},
props: {},
data() {

View File

@@ -157,10 +157,6 @@ export default {
};
</script>
<style lang="scss">
@import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
.bjs-powered-by {
display: none;
}

View File

@@ -157,10 +157,6 @@ export default {
};
</script>
<style lang="scss">
@import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
.bjs-powered-by {
display: none;
}

View File

@@ -157,10 +157,6 @@ export default {
};
</script>
<style lang="scss">
@import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
.bjs-powered-by {
display: none;
}

View File

@@ -157,10 +157,6 @@ export default {
};
</script>
<style lang="scss">
@import "../../../../../node_modules/bpmn-js/dist/assets/diagram-js.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "../../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
.bjs-powered-by {
display: none;
}

View File

@@ -5,7 +5,6 @@
<span class="el-icon-document">基础信息</span>
<el-button style="float: right;" type="primary" @click="goBack">返回</el-button>
</div>
<!--流程处理表单模块-->
<el-col :span="16" :offset="6">
<div>
@@ -65,12 +64,6 @@
{{item.comment.comment}}
</el-descriptions-item>
</el-descriptions>
<!-- <p v-if="item.comment">-->
<!-- <el-tag type="success" v-if="item.comment.type === '1'"> {{item.comment.comment}}</el-tag>-->
<!-- <el-tag type="warning" v-if="item.comment.type === '2'"> {{item.comment.comment}}</el-tag>-->
<!-- <el-tag type="danger" v-if="item.comment.type === '3'"> {{item.comment.comment}}</el-tag>-->
<!-- </p>-->
</el-card>
</el-timeline-item>
</el-timeline>
@@ -86,60 +79,62 @@
<!--审批正常流程-->
<el-dialog :title="completeTitle" :visible.sync="completeOpen" :width="checkSendUser? '60%':'40%'" append-to-body>
<el-form ref="taskForm" :model="taskForm" label-width="80px" >
<el-form-item v-if="checkSendUser" prop="targetKey">
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="6" :xs="24">
<h6>部门列表</h6>
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
default-expand-all
@node-click="handleNodeClick"
/>
</div>
</el-col>
<el-col :span="10" :xs="24">
<h6>待选人员</h6>
<el-table
ref="singleTable"
:data="userList"
border
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="用户名" align="center" prop="nickName" />
<el-table-column label="部门" align="center" prop="dept.deptName" />
</el-table>
</el-col>
<el-col :span="8" :xs="24">
<h6>已选人员</h6>
<el-tag
v-for="(user,index) in userData"
:key="index"
closable
@close="handleClose(user)">
{{user.nickName}} {{user.dept.deptName}}
</el-tag>
</el-col>
<el-form ref="taskForm" :model="taskForm">
<el-form-item v-if="checkSendUser" prop="targetKey">
<el-row :gutter="24">
<!-- <flow-user @handleUserSelect="handleUserSelect"></flow-user>-->
<flow-role @handleRoleSelect="handleRoleSelect"></flow-role>
<!-- &lt;!&ndash;部门数据&ndash;&gt;-->
<!-- <el-col :span="6" :xs="24">-->
<!-- <h6>部门列表</h6>-->
<!-- <div class="head-container">-->
<!-- <el-input-->
<!-- v-model="deptName"-->
<!-- placeholder="请输入部门名称"-->
<!-- clearable-->
<!-- size="small"-->
<!-- prefix-icon="el-icon-search"-->
<!-- style="margin-bottom: 20px"-->
<!-- />-->
<!-- </div>-->
<!-- <div class="head-container">-->
<!-- <el-tree-->
<!-- :data="deptOptions"-->
<!-- :props="defaultProps"-->
<!-- :expand-on-click-node="false"-->
<!-- :filter-node-method="filterNode"-->
<!-- ref="tree"-->
<!-- default-expand-all-->
<!-- @node-click="handleNodeClick"-->
<!-- />-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="10" :xs="24">-->
<!-- <h6>待选人员</h6>-->
<!-- <el-table-->
<!-- ref="singleTable"-->
<!-- :data="userList"-->
<!-- border-->
<!-- style="width: 100%"-->
<!-- @selection-change="handleSelectionChange">-->
<!-- <el-table-column type="selection" width="50" align="center" />-->
<!-- <el-table-column label="用户名" align="center" prop="nickName" />-->
<!-- <el-table-column label="部门" align="center" prop="dept.deptName" />-->
<!-- </el-table>-->
<!-- </el-col>-->
<!-- <el-col :span="8" :xs="24">-->
<!-- <h6>已选人员</h6>-->
<!-- <el-tag-->
<!-- v-for="(user,index) in userData"-->
<!-- :key="index"-->
<!-- closable-->
<!-- @close="handleClose(user)">-->
<!-- {{user.nickName}} {{user.dept.deptName}}-->
<!-- </el-tag>-->
<!-- </el-col>-->
</el-row>
</el-form-item>
<el-form-item label="处理意见" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
<el-form-item label="处理意见" label-width="80px" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
<el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
</el-form-item>
</el-form>
@@ -188,6 +183,8 @@
<script>
import {flowRecord} from "@/api/flowable/finished";
import FlowUser from '@/components/flow/User'
import FlowRole from '@/components/flow/Role'
import Parser from '@/components/parser/Parser'
import {definitionStart, getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
import {complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate} from "@/api/flowable/todo";
@@ -202,7 +199,9 @@ export default {
components: {
Parser,
flow,
Treeselect
Treeselect,
FlowUser,
FlowRole,
},
props: {},
data() {
@@ -330,7 +329,25 @@ export default {
}
},
// 多选框选中数据
handleSelectionChange(selection) {
handleUserSelect(selection) {
console.log(selection,"handleUserSelect")
if (selection) {
this.userData = selection
const selectVal = selection.map(item => item.userId);
if (selectVal instanceof Array) {
this.taskForm.values = {
"approval": selectVal.join(',')
}
} else {
this.taskForm.values = {
"approval": selectVal
}
}
}
},
// 多选框选中数据
handleRoleSelect(selection) {
console.log(selection,"handleRoleSelect")
if (selection) {
this.userData = selection
const selectVal = selection.map(item => item.userId);
@@ -421,7 +438,7 @@ export default {
/** 审批任务选择 */
handleComplete() {
this.completeOpen = true;
this.completeTitle = "审批流程";
this.completeTitle = "流程审批";
this.getTreeselect();
},
/** 审批任务 */

View File

@@ -0,0 +1,282 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入表达式名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
<el-option
v-for="dict in dict.type.sys_common_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:expression:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:expression:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:expression:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:expression:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="expressionList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键" align="center" prop="id" />
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="表达式内容" align="center" prop="expression" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:expression:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:expression:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改流程达式对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入表达式名称" />
</el-form-item>
<el-form-item label="内容" prop="expression">
<el-input v-model="form.expression" placeholder="请输入表达式内容" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.sys_common_status"
:key="dict.value"
:label="parseInt(dict.value)"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listExpression, getExpression, delExpression, addExpression, updateExpression } from "@/api/system/expression";
export default {
name: "FlowExp",
dicts: ['sys_common_status'],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 流程达式表格数据
expressionList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
expression: null,
status: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
},
methods: {
/** 查询流程达式列表 */
getList() {
this.loading = true;
listExpression(this.queryParams).then(response => {
this.expressionList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
expression: null,
createTime: null,
updateTime: null,
createBy: null,
updateBy: null,
status: null,
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加流程达式";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getExpression(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改流程达式";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateExpression(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addExpression(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除流程达式编号为"' + ids + '"的数据项?').then(function() {
return delExpression(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/expression/export', {
...this.queryParams
}, `expression_${new Date().getTime()}.xlsx`)
}
}
};
</script>