663 lines
17 KiB
Vue
663 lines
17 KiB
Vue
<template>
|
||
<view class="w-process" v-if="!data.loading && data.processTasks.length > 0">
|
||
<view class="w-process-line"></view>
|
||
<view
|
||
class="w-process-render"
|
||
v-for="node in data.processTasks"
|
||
:key="node.id"
|
||
>
|
||
<process-node-render
|
||
:key="node.id"
|
||
:ref="node.id"
|
||
class="w-node-render"
|
||
:task="node"
|
||
@addOrg="addOrg"
|
||
@delOrg="delOrg"
|
||
/>
|
||
</view>
|
||
<org-picker
|
||
ref="orgPicker"
|
||
:type="data.selectedNode.type || 'user'"
|
||
:multiple="data.selectedNode.multiple || false"
|
||
:selected="data.selectedNode.users"
|
||
@ok="doAddOrg"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
nextTick,
|
||
reactive,
|
||
computed,
|
||
onBeforeMount,
|
||
onMounted,
|
||
getCurrentInstance,
|
||
watch,
|
||
ref,
|
||
} from "vue";
|
||
import { $deepCopy, getRes } from "@/utils/tool.js";
|
||
import ProcessNodeRender from "./ProcessNodeRender.vue";
|
||
import { forEachNode } from "@/utils/ProcessUtil.js";
|
||
import processApi from "@/api/process";
|
||
import OrgPicker from "@/components/OrgPicker.vue";
|
||
import { getGroupModels } from "@/api/model";
|
||
import { debounce } from "@/utils/tool.js";
|
||
|
||
const instance = getCurrentInstance();
|
||
|
||
//小程序端不支持jsx，真是艹了，这块要重写😂
|
||
const props = defineProps({
|
||
processDefId: String,
|
||
process: {
|
||
type: Object,
|
||
default: () => {
|
||
return {};
|
||
},
|
||
},
|
||
formData: {
|
||
type: Object,
|
||
default: () => {
|
||
return {};
|
||
},
|
||
},
|
||
modelValue: {
|
||
type: Object,
|
||
default: () => {
|
||
return {};
|
||
},
|
||
},
|
||
deptId: {
|
||
type: String,
|
||
default: null,
|
||
},
|
||
});
|
||
|
||
const _value = computed({
|
||
get() {
|
||
return props.modelValue;
|
||
},
|
||
set(val) {
|
||
emits("update:modelValue", val);
|
||
},
|
||
});
|
||
|
||
defineExpose({
|
||
validate,
|
||
});
|
||
const emits = defineEmits(["update:modelValue", "render-ok"]);
|
||
|
||
const loginUser = JSON.parse(uni.getStorageSync("loginUser"));
|
||
loginUser.value = {
|
||
id: loginUser.userId,
|
||
name: loginUser.realName,
|
||
avatar: getRes(loginUser.avatar),
|
||
sn: loginUser.sn,
|
||
};
|
||
|
||
const orgPicker = ref();
|
||
const data = reactive({
|
||
selectUserNodes: new Set(),
|
||
loading: true,
|
||
selectedNode: {},
|
||
reverse: false,
|
||
userCatch: {},
|
||
oldFormData: {},
|
||
models: null,
|
||
processTasks: [],
|
||
conditionFormItem: new Set(),
|
||
branchNodeMap: new Map(),
|
||
loadingReqs: [],
|
||
calls: [],
|
||
});
|
||
|
||
onBeforeMount(() => processRenderDebounce());
|
||
|
||
//流程渲染去抖动
|
||
const processRenderDebounce = debounce(() => loadProcessRender(), 500);
|
||
|
||
async function loadProcessRender() {
|
||
console.log("渲染流程");
|
||
data.loading = true;
|
||
data.processTasks.length = 0;
|
||
data.selectUserNodes.clear();
|
||
data.loadingReqs.length = 0;
|
||
//TODO 从这里可以使用去抖动函数 this.$debounce
|
||
await loadProcess(props.process, data.processTasks);
|
||
if (data.loadingReqs.length > 0) {
|
||
Promise.all(data.loadingReqs)
|
||
.then(() => {
|
||
setTimeout(() => {
|
||
data.processTasks.push({
|
||
title: "结束",
|
||
name: "END",
|
||
icon: "checkbox-filled",
|
||
enableEdit: false,
|
||
});
|
||
data.loading = false;
|
||
console.log("渲染完成11233");
|
||
}, 3500);
|
||
emits("render-ok");
|
||
})
|
||
.catch(() => (data.loading = false));
|
||
} else {
|
||
emits("render-ok");
|
||
setTimeout(() => {
|
||
data.processTasks.push({
|
||
title: "结束",
|
||
name: "END",
|
||
icon: "checkbox-filled",
|
||
enableEdit: false,
|
||
});
|
||
data.loading = false;
|
||
console.log("渲染完成11233");
|
||
}, 3500);
|
||
}
|
||
// console.log('渲染完成', data.loading)
|
||
}
|
||
|
||
function loadProcess(processNode, processTasks, bnode, bid) {
|
||
forEachNode(processNode, (node) => {
|
||
if (bnode) {
|
||
//如果是分支内子节点
|
||
data.branchNodeMap.set(node.id, {
|
||
node: bnode,
|
||
id: bid,
|
||
});
|
||
}
|
||
switch (node.type) {
|
||
case "ROOT":
|
||
processTasks.push({
|
||
id: node.id,
|
||
title: node.name,
|
||
name: "发起人",
|
||
desc: `${loginUser.value.name} 将发起本流程`,
|
||
icon: "contact-filled",
|
||
enableEdit: false,
|
||
users: [loginUser.value],
|
||
});
|
||
break;
|
||
case "APPROVAL":
|
||
processTasks.push(getApprovalNode(node));
|
||
break;
|
||
case "TASK":
|
||
processTasks.push(getApprovalNode(node, false));
|
||
break;
|
||
case "SUBPROC":
|
||
processTasks.push(getSubProcNode(node));
|
||
break;
|
||
case "CC":
|
||
processTasks.push(getCcNode(node));
|
||
break;
|
||
case "CONDITIONS": //条件节点选一项
|
||
processTasks.push(getConditionNode(node, bnode, bid));
|
||
loadProcess(node.children, processTasks);
|
||
return true;
|
||
case "INCLUSIVES": //包容分支会执行所有符合条件的分支
|
||
processTasks.push(getInclusiveNode(node, bnode, bid));
|
||
loadProcess(node.children, processTasks);
|
||
return true;
|
||
case "CONCURRENTS": //并行分支无条件执行所有分支
|
||
processTasks.push(getConcurrentNode(node, bnode, bid));
|
||
loadProcess(node.children, processTasks);
|
||
return true;
|
||
}
|
||
});
|
||
}
|
||
|
||
function getSubProcNode(node) {
|
||
let user = {};
|
||
//提取发起人
|
||
switch (node.props.staterUser.type) {
|
||
case "ROOT":
|
||
user = loginUser.value;
|
||
break;
|
||
case "FORM":
|
||
const fd = props.formData[node.props.staterUser.value];
|
||
user =
|
||
Array.isArray(fd) && fd.length > 0
|
||
? fd[0]
|
||
: {
|
||
name: "请选人",
|
||
};
|
||
break;
|
||
case "SELECT":
|
||
user = node.props.staterUser.value || {};
|
||
break;
|
||
}
|
||
const procNode = {
|
||
id: node.id,
|
||
title: `${node.name} [由${user.id ? user.name : "?"}发起]`,
|
||
name: "子流程",
|
||
desc: "",
|
||
icon: "more-filled",
|
||
enableEdit: false,
|
||
users: [user],
|
||
};
|
||
getSubModel(() => {
|
||
procNode.desc = `调用子流程 [${data.models[node.props.subProcCode]}]`;
|
||
});
|
||
return procNode;
|
||
}
|
||
|
||
function getApprovalNode(node, isApproval = true) {
|
||
let result = {
|
||
id: node.id,
|
||
title: node.name,
|
||
name: isApproval ? "审批人" : "办理人",
|
||
icon: isApproval ? "person-filled" : "calendar-filled",
|
||
enableEdit: false,
|
||
multiple: false,
|
||
mode: node.props.mode,
|
||
users: [],
|
||
desc: "",
|
||
};
|
||
let loadCatch = true;
|
||
switch (node.props.assignedType) {
|
||
case "ASSIGN_USER":
|
||
result.users = $deepCopy(node.props.assignedUser);
|
||
result.desc = isApproval ? "指定审批人" : "指定办理人";
|
||
break;
|
||
case "ASSIGN_LEADER":
|
||
data.loadingReqs.push(
|
||
processApi
|
||
.getLeaderByDepts((node.props.assignedDept || []).map((d) => d.id))
|
||
.then((res) => {
|
||
result.users = res.data;
|
||
})
|
||
);
|
||
result.desc = "指定部门的领导";
|
||
break;
|
||
case "SELF":
|
||
result.users = [loginUser.value];
|
||
result.desc = `发起人自己${isApproval ? "审批" : "办理"}`;
|
||
break;
|
||
case "SELF_SELECT":
|
||
result.enableEdit = true;
|
||
data.selectUserNodes.add(node.id);
|
||
result.multiple = node.props.selfSelect.multiple || false;
|
||
result.desc = isApproval ? "自选审批人" : "自选办理人";
|
||
break;
|
||
case "LEADER_TOP":
|
||
result.desc = `连续多级主管${isApproval ? "审批" : "办理"}`;
|
||
const leaderTop = node.props.leaderTop;
|
||
data.loadingReqs.push(
|
||
processApi
|
||
.getUserLeaders(
|
||
"TOP" === leaderTop.endCondition ? 0 : leaderTop.endLevel,
|
||
props.deptId,
|
||
leaderTop.skipEmpty
|
||
)
|
||
.then((res) => {
|
||
result.users = res.data;
|
||
})
|
||
);
|
||
break;
|
||
case "LEADER":
|
||
result.desc =
|
||
node.props.leader.level === 1
|
||
? `直接主管${isApproval ? "审批" : "办理"}`
|
||
: `第${node.props.leader.level}级主管${isApproval ? "审批" : "办理"}`;
|
||
data.loadingReqs.push(
|
||
processApi
|
||
.getUserLeader(
|
||
node.props.leader.level,
|
||
props.deptId,
|
||
node.props.leader.skipEmpty
|
||
)
|
||
.then((res) => {
|
||
result.users = res.data ? [res.data] : [];
|
||
})
|
||
);
|
||
break;
|
||
case "ROLE":
|
||
result.desc = `由角色[${(node.props.role || []).map((r) => r.name)}]${
|
||
isApproval ? "审批" : "办理"
|
||
}`;
|
||
data.loadingReqs.push(
|
||
processApi
|
||
.getUsersByRoles({
|
||
projectSn: loginUser.value.sn,
|
||
roleIds: (node.props.role || []).map((r) => r.id),
|
||
})
|
||
.then((res) => {
|
||
result.users = res.data;
|
||
})
|
||
);
|
||
break;
|
||
case "FORM_USER":
|
||
loadCatch = false;
|
||
result.desc = `由表单字段内人员${isApproval ? "审批" : "办理"}`;
|
||
data.conditionFormItem.add(node.props.formUser);
|
||
result.users = props.formData[node.props.formUser] || [];
|
||
break;
|
||
case "FORM_DEPT":
|
||
loadCatch = false;
|
||
result.desc = `由表单部门内主管${isApproval ? "审批" : "办理"}`;
|
||
data.conditionFormItem.add(node.props.formDept);
|
||
data.loadingReqs.push(
|
||
processApi
|
||
.getLeaderByDepts(
|
||
(props.formData[node.props.formDept] || []).map((d) => d.id)
|
||
)
|
||
.then((res) => {
|
||
result.users = res.data;
|
||
})
|
||
);
|
||
break;
|
||
case "REFUSE":
|
||
result.desc = `流程此处将被自动驳回`;
|
||
break;
|
||
}
|
||
if (data.userCatch[node.id] && data.userCatch[node.id].length > 0) {
|
||
result.users = data.userCatch[node.id];
|
||
}
|
||
if (loadCatch) {
|
||
data.userCatch[node.id] = result.users;
|
||
}
|
||
return result;
|
||
}
|
||
|
||
function getCcNode(node) {
|
||
let result = {
|
||
id: node.id,
|
||
title: node.name,
|
||
icon: "paperplane-filled",
|
||
name: "抄送人",
|
||
enableEdit: node.props.shouldAdd,
|
||
type: "org",
|
||
multiple: true,
|
||
desc: node.props.shouldAdd ? "可添加抄送人" : "流程将会抄送到他们",
|
||
users: $deepCopy(node.props.assignedUser),
|
||
};
|
||
if (data.userCatch[node.id] && data.userCatch[node.id].length > 0) {
|
||
result.users = data.userCatch[node.id];
|
||
}
|
||
data.userCatch[node.id] = result.users;
|
||
return result;
|
||
}
|
||
|
||
function getInclusiveNode(node, pbnode, pbid) {
|
||
let branchTasks = {
|
||
id: node.id,
|
||
title: node.name,
|
||
name: "包容分支",
|
||
icon: "tune-filled",
|
||
enableEdit: false,
|
||
active: node.branchs[0].id, //激活得分支
|
||
options: [], //分支选项，渲染单选框
|
||
desc: "满足条件的分支均会执行",
|
||
branchs: {}, //分支数据，不包含分支节点，key=分支子节点id，value = [后续节点]
|
||
};
|
||
const req = processApi
|
||
.getTrueConditions({
|
||
processDfId: props.processDefId,
|
||
conditionNodeId: node.id,
|
||
multiple: true,
|
||
context: {
|
||
...props.formData,
|
||
deptId: props.deptId,
|
||
},
|
||
})
|
||
.then((rsp) => {
|
||
//拿到满足的条件
|
||
const cds = new Set(rsp.data || []);
|
||
for (let i = 0; i < node.branchs.length; i++) {
|
||
const cdNode = node.branchs[i];
|
||
cdNode.skip = !cds.has(cdNode.id);
|
||
if (!cdNode.skip) {
|
||
branchTasks.active = cdNode.id;
|
||
}
|
||
}
|
||
node.branchs.forEach((nd) => {
|
||
branchTasks.options.push({
|
||
id: nd.id,
|
||
title: nd.name,
|
||
skip: nd.skip,
|
||
});
|
||
branchTasks.branchs[nd.id] = [];
|
||
//设置下子级分支的父级分支节点
|
||
data.branchNodeMap.set(nd.id, {
|
||
node: pbnode,
|
||
id: pbid,
|
||
});
|
||
loadProcess(
|
||
nd.children,
|
||
branchTasks.branchs[nd.id],
|
||
branchTasks,
|
||
nd.id
|
||
);
|
||
});
|
||
})
|
||
.catch((err) => {
|
||
branchTasks.desc = `<span style="color:#CE5266;">条件解析异常，渲染失败😢<span>`;
|
||
//
|
||
});
|
||
data.loadingReqs.push(req);
|
||
return branchTasks;
|
||
}
|
||
|
||
function getConditionNode(node, pbnode, pbid) {
|
||
let branchTasks = {
|
||
id: node.id,
|
||
title: node.name,
|
||
name: "条件分支",
|
||
icon: "tune",
|
||
enableEdit: false,
|
||
active: node.branchs[0].id, //激活得分支
|
||
options: [], //分支选项，渲染单选框
|
||
desc: "只执行第一个满足条件的分支",
|
||
branchs: {}, //分支数据，不包含分支节点，key=分支子节点id，value = [后续节点]
|
||
};
|
||
const req = processApi
|
||
.getTrueConditions({
|
||
processDfId: props.processDefId,
|
||
conditionNodeId: node.id,
|
||
multiple: false,
|
||
context: {
|
||
...props.formData,
|
||
deptId: props.deptId,
|
||
},
|
||
})
|
||
.then((rsp) => {
|
||
//拿到满足的条件
|
||
const cds = new Set(rsp.data || []);
|
||
for (let i = 0; i < node.branchs.length; i++) {
|
||
const cdNode = node.branchs[i];
|
||
cdNode.skip = !cds.has(cdNode.id);
|
||
if (!cdNode.skip) {
|
||
branchTasks.active = cdNode.id;
|
||
}
|
||
}
|
||
node.branchs.forEach((nd) => {
|
||
branchTasks.options.push({
|
||
id: nd.id,
|
||
title: nd.name,
|
||
skip: nd.skip,
|
||
});
|
||
branchTasks.branchs[nd.id] = [];
|
||
//设置下子级分支的父级分支节点
|
||
data.branchNodeMap.set(nd.id, {
|
||
node: pbnode,
|
||
id: pbid,
|
||
});
|
||
loadProcess(
|
||
nd.children,
|
||
branchTasks.branchs[nd.id],
|
||
branchTasks,
|
||
nd.id
|
||
);
|
||
});
|
||
})
|
||
.catch((err) => {
|
||
branchTasks.desc = `<span style="color:#CE5266;">条件解析异常，渲染失败😢<span>`;
|
||
//this.$err(err, "解析条件失败:")
|
||
});
|
||
data.loadingReqs.push(req);
|
||
return branchTasks;
|
||
}
|
||
|
||
function getConcurrentNode(node, pbnode, pbid) {
|
||
let concurrentTasks = {
|
||
id: node.id,
|
||
title: node.name,
|
||
name: "并行分支",
|
||
icon: "settings-filled",
|
||
enableEdit: false,
|
||
active: node.branchs[0].id, //激活得分支
|
||
options: [], //分支选项，渲染单选框
|
||
desc: "所有分支都将同时执行",
|
||
branchs: {}, //分支数据，不包含分支节点，key=分支子节点id，value = [后续节点]
|
||
};
|
||
node.branchs.forEach((nd) => {
|
||
concurrentTasks.options.push({
|
||
id: nd.id,
|
||
title: nd.name,
|
||
skip: false,
|
||
});
|
||
concurrentTasks.branchs[nd.id] = [];
|
||
//设置下子级分支的父级分支节点
|
||
data.branchNodeMap.set(nd.id, {
|
||
node: pbnode,
|
||
id: pbid,
|
||
});
|
||
loadProcess(
|
||
nd.children,
|
||
concurrentTasks.branchs[nd.id],
|
||
concurrentTasks,
|
||
nd.id
|
||
);
|
||
});
|
||
return concurrentTasks;
|
||
}
|
||
|
||
function selected(users) {
|
||
_value.value[data.selectedNode.id] = [];
|
||
users.forEach((u) => {
|
||
if (data.selectedNode.users.findIndex((v) => v.id === u.id) === -1) {
|
||
u.enableEdit = true;
|
||
data.selectedNode.users.push(u);
|
||
_value.value[data.selectedNode.id] = data.selectedNode.users;
|
||
}
|
||
});
|
||
}
|
||
|
||
function getSubModel(call) {
|
||
if (data.models) {
|
||
call();
|
||
} else {
|
||
data.calls.push(call);
|
||
if (data.calls.length === 1) {
|
||
getGroupModels({}, true).then((rsp) => {
|
||
data.models = {};
|
||
rsp.data.forEach((group) => {
|
||
group.items.forEach((v) => (data.models[v.procCode] = v.procName));
|
||
});
|
||
data.calls.forEach((callFun) => callFun());
|
||
data.calls.length = 0;
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
function addOrg(node) {
|
||
console.log(node, "node");
|
||
data.selectedNode = node;
|
||
orgPicker.value.show();
|
||
}
|
||
|
||
function doAddOrg(orgs) {
|
||
selected(orgs);
|
||
}
|
||
|
||
function delOrg(i, node) {
|
||
node.users.splice(i, 1);
|
||
}
|
||
|
||
//执行校验流程步骤设置
|
||
function validate(call) {
|
||
//遍历自选审批人节点
|
||
let isOk = true;
|
||
const activeProcessTasksList = data.processTasks.filter(
|
||
(item) => item.active
|
||
);
|
||
const selectUserNodes = new Set(
|
||
Array.from(data.selectUserNodes).sort((a, b) => {
|
||
return (
|
||
Number(a.replace(/[^0-9]/g, "")) - Number(b.replace(/[^0-9]/g, ""))
|
||
);
|
||
})
|
||
);
|
||
console.log(isOk, "我的OK");
|
||
for (let nodeId of selectUserNodes) {
|
||
if ((_value.value[nodeId] || []).length === 0) {
|
||
const branchNodeMap = new Map(
|
||
Array.from(data.branchNodeMap)
|
||
.reverse()
|
||
.map((i) => {
|
||
return {
|
||
...i,
|
||
};
|
||
})
|
||
);
|
||
//遍历所有的分支，从底部向上搜索进行自动切换分支渲染路线
|
||
let brNode = branchNodeMap.get(nodeId);
|
||
const option = brNode.node.options.find((i) => i.id === brNode.id);
|
||
const find = activeProcessTasksList.map((i) => {
|
||
const find = i.options.find((e) => e.id === i.active);
|
||
return find ? find : {};
|
||
})[0];
|
||
while (brNode && brNode.id && !option.skip && !find.skip) {
|
||
brNode.node.active = brNode.id;
|
||
brNode = data.branchNodeMap.get(brNode.id);
|
||
//没设置审批人员
|
||
isOk = false;
|
||
break;
|
||
}
|
||
|
||
nextTick(() => {
|
||
if (instance.refs[nodeId]) {
|
||
instance.refs[nodeId][0].errorShark();
|
||
}
|
||
});
|
||
// break
|
||
}
|
||
}
|
||
console.log(isOk, "我的OK");
|
||
if (call) {
|
||
call(isOk);
|
||
}
|
||
}
|
||
|
||
watch(
|
||
props.formData,
|
||
async () => {
|
||
console.log("数据变化");
|
||
//监听表单数据变化，对流程重渲染
|
||
processRenderDebounce();
|
||
},
|
||
{ deep: true }
|
||
);
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.w-process {
|
||
position: relative;
|
||
|
||
.w-process-line {
|
||
width: 4rpx;
|
||
top: 20px;
|
||
height: calc(100% - 80rpx);
|
||
background-color: #9e9e9e;
|
||
position: absolute;
|
||
left: 26rpx;
|
||
}
|
||
}
|
||
|
||
.w-process-render {
|
||
.w-node-render {
|
||
padding: 32rpx 0;
|
||
}
|
||
}
|
||
</style>
|