329 lines
9.7 KiB
Vue
329 lines
9.7 KiB
Vue
<template>
|
||
<div>
|
||
<el-button
|
||
size="small"
|
||
style="float: right; margin-top: 6px; margin-right: 6px"
|
||
@click="saveXML"
|
||
>导出XML</el-button
|
||
>
|
||
<el-button
|
||
size="small"
|
||
style="float: right; margin-top: 6px; margin-right: 6px"
|
||
@click="saveImg"
|
||
>导出图片</el-button
|
||
>
|
||
<el-popover placement="bottom" width="160" v-model="visible">
|
||
<p>确认流程无误并保存吗</p>
|
||
<div style="text-align: right; margin: 0">
|
||
<el-button size="mini" type="text" @click="visible = false"
|
||
>取消</el-button
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
size="mini"
|
||
@click="save"
|
||
:disabled="$route.query.type == 'view'"
|
||
>确定</el-button
|
||
>
|
||
</div>
|
||
<el-button
|
||
size="small"
|
||
slot="reference"
|
||
style="float: right; margin-top: 6px; margin-right: 6px"
|
||
>保存流程</el-button
|
||
>
|
||
</el-popover>
|
||
|
||
<gva-wfd
|
||
ref="wfd"
|
||
:data="demoData"
|
||
v-if="done"
|
||
:height="600"
|
||
:users="users"
|
||
:authorities="authorities"
|
||
:groups="groups"
|
||
:categorys="categorys"
|
||
:lang="lang"
|
||
:propProcessModel="processModel"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
findWorkflowProcess,
|
||
createWorkflowProcess
|
||
} from "@/api/workflowProcess"; // 此处请自行替换地址
|
||
import gvaWfd from "@/components/gva-wfd";
|
||
import { getUserList } from "@/api/user";
|
||
import { getAuthorityList } from "@/api/authority";
|
||
export default {
|
||
name: "Workflow",
|
||
components: {
|
||
gvaWfd
|
||
},
|
||
data() {
|
||
return {
|
||
visible: false,
|
||
lang: "zh",
|
||
done:false,
|
||
demoData: {
|
||
// nodes: [
|
||
// {
|
||
// clazz: "start",
|
||
// label: "发起请假",
|
||
// type: "start-node",
|
||
// shape: "start-node",
|
||
// x: 110,
|
||
// y: 195,
|
||
// id: "start1603681292875",
|
||
// style: {}
|
||
// },
|
||
// {
|
||
// clazz: "parallelGateway",
|
||
// label: "会签",
|
||
// type: "parallel-gateway-node",
|
||
// shape: "parallel-gateway-node",
|
||
// x: 228,
|
||
// y: 195,
|
||
// id: "parallelGateway1603681296419",
|
||
// style: {}
|
||
// },
|
||
// {
|
||
// clazz: "userTask",
|
||
// label: "审批人1",
|
||
// type: "user-task-node",
|
||
// shape: "user-task-node",
|
||
// x: 372,
|
||
// y: 84,
|
||
// id: "userTask1603681299962",
|
||
// style: {},
|
||
// assignValue: 1,
|
||
// assignType: "user"
|
||
// },
|
||
// {
|
||
// clazz: "userTask",
|
||
// label: "审批人2",
|
||
// type: "user-task-node",
|
||
// shape: "user-task-node",
|
||
// x: 370,
|
||
// y: 321,
|
||
// id: "userTask1603681302372",
|
||
// style: {},
|
||
// assignValue: 2,
|
||
// assignType: "user"
|
||
// },
|
||
// {
|
||
// clazz: "parallelGateway",
|
||
// label: "会签结果检测",
|
||
// type: "parallel-gateway-node",
|
||
// shape: "parallel-gateway-node",
|
||
// x: 519,
|
||
// y: 195,
|
||
// id: "parallelGateway1603681338222",
|
||
// style: {}
|
||
// },
|
||
// {
|
||
// clazz: "end",
|
||
// label: "请假失败",
|
||
// type: "end-node",
|
||
// shape: "end-node",
|
||
// x: 704,
|
||
// y: 317,
|
||
// id: "end1603681358043",
|
||
// style: {}
|
||
// },
|
||
// {
|
||
// clazz: "end",
|
||
// label: "请假成功",
|
||
// type: "end-node",
|
||
// shape: "end-node",
|
||
// x: 706.5,
|
||
// y: 55.5,
|
||
// id: "end1603681360882",
|
||
// style: {}
|
||
// }
|
||
// ],
|
||
// edges: [
|
||
// {
|
||
// id: "flow1603681320738",
|
||
// clazz: "flow",
|
||
// source: "parallelGateway1603681296419",
|
||
// target: "userTask1603681299962",
|
||
// sourceAnchor: 0,
|
||
// targetAnchor: 3,
|
||
// shape: "flow-polyline-round",
|
||
// style: {},
|
||
// startPoint: { x: 228, y: 169, index: 0 },
|
||
// endPoint: { x: 321.5, y: 84, index: 3 }
|
||
// },
|
||
// {
|
||
// id: "flow1603681321969",
|
||
// clazz: "flow",
|
||
// source: "parallelGateway1603681296419",
|
||
// target: "userTask1603681302372",
|
||
// sourceAnchor: 2,
|
||
// targetAnchor: 3,
|
||
// shape: "flow-polyline-round",
|
||
// style: {},
|
||
// startPoint: { x: 228, y: 221, index: 2 },
|
||
// endPoint: { x: 319.5, y: 321, index: 3 }
|
||
// },
|
||
// {
|
||
// id: "flow1603681323274",
|
||
// clazz: "flow",
|
||
// source: "start1603681292875",
|
||
// target: "parallelGateway1603681296419",
|
||
// sourceAnchor: 1,
|
||
// targetAnchor: 3,
|
||
// shape: "flow-polyline-round",
|
||
// style: {},
|
||
// startPoint: { x: 138, y: 195, index: 1 },
|
||
// endPoint: { x: 202, y: 195, index: 3 },
|
||
// label: "发起",
|
||
// conditionExpression: "complete"
|
||
// },
|
||
// {
|
||
// id: "flow1603681341777",
|
||
// clazz: "flow",
|
||
// source: "userTask1603681299962",
|
||
// target: "parallelGateway1603681338222",
|
||
// sourceAnchor: 1,
|
||
// targetAnchor: 3,
|
||
// shape: "flow-polyline-round",
|
||
// style: {},
|
||
// startPoint: { x: 422.5, y: 84, index: 1 },
|
||
// endPoint: { x: 493, y: 195, index: 3 }
|
||
// },
|
||
// {
|
||
// id: "flow1603681343425",
|
||
// clazz: "flow",
|
||
// source: "userTask1603681302372",
|
||
// target: "parallelGateway1603681338222",
|
||
// sourceAnchor: 1,
|
||
// targetAnchor: 3,
|
||
// shape: "flow-polyline-round",
|
||
// style: {},
|
||
// startPoint: { x: 420.5, y: 321, index: 1 },
|
||
// endPoint: { x: 493, y: 195, index: 3 }
|
||
// },
|
||
// {
|
||
// id: "flow1603681362913",
|
||
// clazz: "flow",
|
||
// source: "parallelGateway1603681338222",
|
||
// target: "end1603681360882",
|
||
// sourceAnchor: 0,
|
||
// targetAnchor: 2,
|
||
// shape: "flow-polyline-round",
|
||
// style: {},
|
||
// startPoint: { x: 519, y: 169, index: 0 },
|
||
// endPoint: { x: 678.5, y: 55.5, index: 2 },
|
||
// conditionExpression: "complete",
|
||
// label: "所有人同意"
|
||
// },
|
||
// {
|
||
// id: "flow1603681392729",
|
||
// clazz: "flow",
|
||
// source: "parallelGateway1603681338222",
|
||
// target: "end1603681358043",
|
||
// sourceAnchor: 2,
|
||
// targetAnchor: 2,
|
||
// shape: "flow-polyline-round",
|
||
// style: {},
|
||
// startPoint: { x: 519, y: 221, index: 2 },
|
||
// endPoint: { x: 676, y: 317, index: 2 },
|
||
// conditionExpression: "reject",
|
||
// label: "任何一人拒绝"
|
||
// }
|
||
// ],
|
||
},
|
||
wkType:"create",
|
||
users: [],
|
||
authorities: [],
|
||
processModel:{
|
||
id: '',
|
||
name: '',
|
||
category: '',
|
||
clazz: 'process',
|
||
dataObjs: [],
|
||
signalDefs: [],
|
||
messageDefs: [],
|
||
},
|
||
groups: [
|
||
{ id: "1", name: "组1" },
|
||
{ id: "2", name: "组2" },
|
||
{ id: "3", name: "组3" }
|
||
],
|
||
categorys: [
|
||
{ id: "1", name: "分类1" },
|
||
{ id: "2", name: "分类2" },
|
||
{ id: "3", name: "分类3" },
|
||
{ id: "4", 分组: "分组4" }
|
||
]
|
||
};
|
||
},
|
||
methods: {
|
||
async save() {
|
||
this.visible = false;
|
||
const obj = this.$refs["wfd"].graph.save()
|
||
const processModel = this.$refs["wfd"].processModel
|
||
processModel.edges = obj.edges
|
||
processModel.nodes = obj.nodes
|
||
if(!processModel.id){
|
||
this.$message({
|
||
type:"error",
|
||
message:"流程id必填，点击空白处填写流程基本信息"
|
||
})
|
||
return
|
||
}
|
||
// if(this.$route.query.type == 'edit'){
|
||
// // 等待调用编辑功能
|
||
// }else{
|
||
const res = await createWorkflowProcess(processModel)
|
||
if(res.success){
|
||
this.$message({
|
||
type:"success",
|
||
message:"创建成功"
|
||
})
|
||
}
|
||
// }
|
||
},
|
||
saveXML() {
|
||
console.log(this.$refs["wfd"].graph.saveXML());
|
||
},
|
||
saveImg() {
|
||
console.log(this.$refs["wfd"].graph.saveImg());
|
||
}
|
||
},
|
||
async created() {
|
||
const userRes = await getUserList({ page: 1, pageSize: 9999999 });
|
||
if (userRes.code == 0) {
|
||
userRes.data.list.map(item => {
|
||
this.users.push({ id: item.ID, name: item.nickName });
|
||
});
|
||
}
|
||
const authorityRes = await getAuthorityList({ page: 1, pageSize: 9999999 });
|
||
if (authorityRes.code == 0) {
|
||
authorityRes.data.list.map(item => {
|
||
this.authorities.push({
|
||
id: item.authorityId,
|
||
name: item.authorityName
|
||
});
|
||
});
|
||
}
|
||
if(this.$route.query.id){
|
||
const res = await findWorkflowProcess({ id: this.$route.query.id });
|
||
this.disabled = this.$route.query.type == "view"
|
||
if(res.code == 0){
|
||
this.demoData.nodes = res.data.reworkflowProcess.nodes
|
||
delete res.data.reworkflowProcess.nodes
|
||
this.demoData.edges = res.data.reworkflowProcess.edges
|
||
delete res.data.reworkflowProcess.edges
|
||
this.processModel = res.data.reworkflowProcess
|
||
}
|
||
this.wkType = this.$route.query.type
|
||
}
|
||
this.done = true
|
||
|
||
}
|
||
};
|
||
</script> |