herenshan112
/
hxgksystemapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'v3'

liwenxuan_v2
超级管理员 2 years ago
parent
97f5e2dbc4 a90b6db4c7
commit
cf305d236a
1 changed files with 332 additions and 251 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 581
      src/components/workflow/nodeWrap.vue

581
src/components/workflow/nodeWrap.vue
View File

@ -1,305 +1,386 @@
import { loginApi } from '@/api/auth'; import { loginApi } from '@/api/auth';
<!-- <!--
@ 作者: 秦东 @ 作者: 秦东
@ 时间: 2023-10-10 11:30:42 @ 时间: 2023-10-10 11:30:42
@ 备注: 工作流引擎主干 @ 备注: 工作流引擎主干
--> -->
<script lang='ts' setup> <script lang="ts" setup>
import $func from '@/utils/workflow/index' import $func from "@/utils/workflow/index";
import { useStore } from '@/store/workflow/index' import { useStore } from "@/store/workflow/index";
import { bgColors, placeholderList } from '@/utils/workflow/const' import { bgColors, placeholderList } from "@/utils/workflow/const";
let _uid = getCurrentInstance().uid; let _uid = getCurrentInstance().uid;
let props = defineProps({ let props = defineProps({
nodeConfig: { nodeConfig: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
flowPermission: { flowPermission: {
type: Object, type: Object,
// eslint-disable-next-line vue/require-valid-default-prop // eslint-disable-next-line vue/require-valid-default-prop
default: () => [], default: () => [],
}, },
}); });
//pinia 相关数据操作 //pinia 相关数据操作
let store = useStore(); let store = useStore();
let { let {
setPromoter, setPromoter,
setApprover, setApprover,
setCopyer, setCopyer,
setCondition, setCondition,
setFlowPermission, setFlowPermission,
setApproverConfig, setApproverConfig,
setCopyerConfig, setCopyerConfig,
setConditionsConfig, setConditionsConfig,
} = store; } = store;
let isTried = computed(()=> store.isTried) let isTried = computed(() => store.isTried);
let flowPermission1 = computed(()=> store.flowPermission1) let flowPermission1 = computed(() => store.flowPermission1);
let approverConfig1 = computed(()=> store.approverConfig1) let approverConfig1 = computed(() => store.approverConfig1);
let copyerConfig1 = computed(()=> store.copyerConfig1) let copyerConfig1 = computed(() => store.copyerConfig1);
let conditionsConfig1 = computed(()=> store.conditionsConfig1) let conditionsConfig1 = computed(() => store.conditionsConfig1);
let defaultText = computed(() => { let defaultText = computed(() => {
return placeholderList[props.nodeConfig.type] return placeholderList[props.nodeConfig.type];
}); });
let showText = computed(() => { let showText = computed(() => {
// console.log("props.nodeConfig.type===>",props.nodeConfig); // console.log("props.nodeConfig.type===>",props.nodeConfig);
if (props.nodeConfig.type == 0) return $func.arrToStr(props.flowPermission) || '所有人' if (props.nodeConfig.type == 0)
if (props.nodeConfig.type == 1) return $func.setApproverStr(props.nodeConfig) return $func.arrToStr(props.flowPermission) || "所有人";
// console.log("props.nodeConfig.type",props.nodeConfig.type); if (props.nodeConfig.type == 1) return $func.setApproverStr(props.nodeConfig);
return $func.copyerStr(props.nodeConfig) // console.log("props.nodeConfig.type",props.nodeConfig.type);
return $func.copyerStr(props.nodeConfig);
}); });
let isInputList = ref([]); let isInputList = ref([]);
let isInput = ref(false); let isInput = ref(false);
const resetConditionNodesErr = () => { const resetConditionNodesErr = () => {
for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) { for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes[i].error = $func.conditionStr(props.nodeConfig, i) == "请设置条件" && i != props.nodeConfig.conditionNodes.length - 1; props.nodeConfig.conditionNodes[i].error =
} $func.conditionStr(props.nodeConfig, i) == "请设置条件" &&
} i != props.nodeConfig.conditionNodes.length - 1;
}
};
const clickEvent = (index:any) => { const clickEvent = (index: any) => {
if (index || index === 0) { if (index || index === 0) {
isInputList.value[index] = true; isInputList.value[index] = true;
} else { } else {
isInput.value = true; isInput.value = true;
} }
}; };
const blurEvent = (index:any) => { const blurEvent = (index: any) => {
if (index || index === 0) { if (index || index === 0) {
isInputList.value[index] = false; isInputList.value[index] = false;
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes[index].nodeName = props.nodeConfig.conditionNodes[index].nodeName || "条件"; props.nodeConfig.conditionNodes[index].nodeName =
} else { props.nodeConfig.conditionNodes[index].nodeName || "条件";
isInput.value = false; } else {
// eslint-disable-next-line vue/no-mutating-props isInput.value = false;
props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText // eslint-disable-next-line vue/no-mutating-props
} props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText;
}
}; };
//删除节点 //删除节点
const delNode = () => { const delNode = () => {
emits("update:nodeConfig", props.nodeConfig.childNode); emits("update:nodeConfig", props.nodeConfig.childNode);
}; };
let emits = defineEmits(["update:flowPermission", "update:nodeConfig"]); let emits = defineEmits(["update:flowPermission", "update:nodeConfig"]);
const addTerm = () => { const addTerm = () => {
let len = props.nodeConfig.conditionNodes.length + 1; let len = props.nodeConfig.conditionNodes.length + 1;
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes.push({ props.nodeConfig.conditionNodes.push({
nodeName: "条件" + len, nodeName: "条件" + len,
type: 3, type: 3,
priorityLevel: len, priorityLevel: len,
conditionList: [], conditionList: [],
nodeUserList: [], nodeUserList: [],
childNode: null, childNode: null,
}); });
resetConditionNodesErr() resetConditionNodesErr();
emits("update:nodeConfig", props.nodeConfig); emits("update:nodeConfig", props.nodeConfig);
}; };
const delTerm = (index:any) => { const delTerm = (index: any) => {
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes.splice(index, 1); props.nodeConfig.conditionNodes.splice(index, 1);
props.nodeConfig.conditionNodes.map((item, index) => { props.nodeConfig.conditionNodes.map((item, index) => {
item.priorityLevel = index + 1; item.priorityLevel = index + 1;
item.nodeName = `条件${index + 1}`; item.nodeName = `条件${index + 1}`;
}); });
resetConditionNodesErr() resetConditionNodesErr();
emits("update:nodeConfig", props.nodeConfig); emits("update:nodeConfig", props.nodeConfig);
if (props.nodeConfig.conditionNodes.length == 1) { if (props.nodeConfig.conditionNodes.length == 1) {
if (props.nodeConfig.childNode) { if (props.nodeConfig.childNode) {
if (props.nodeConfig.conditionNodes[0].childNode) { if (props.nodeConfig.conditionNodes[0].childNode) {
reData(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode); reData(
} else { props.nodeConfig.conditionNodes[0].childNode,
// eslint-disable-next-line vue/no-mutating-props props.nodeConfig.childNode
props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode; );
} } else {
} // eslint-disable-next-line vue/no-mutating-props
emits("update:nodeConfig", props.nodeConfig.conditionNodes[0].childNode); props.nodeConfig.conditionNodes[0].childNode =
props.nodeConfig.childNode;
}
} }
emits("update:nodeConfig", props.nodeConfig.conditionNodes[0].childNode);
}
}; };
const reData = (data:any, addData:any) => { const reData = (data: any, addData: any) => {
if (!data.childNode) { if (!data.childNode) {
data.childNode = addData; data.childNode = addData;
} else { } else {
reData(data.childNode, addData); reData(data.childNode, addData);
} }
}; };
const setPerson = (priorityLevel:any) => { const setPerson = (priorityLevel: any) => {
var { type } = props.nodeConfig; var { type } = props.nodeConfig;
if (type == 0) { if (type == 0) {
setPromoter(true); setPromoter(true);
setFlowPermission({ setFlowPermission({
value: props.flowPermission, value: props.flowPermission,
flag: false, flag: false,
id: _uid, id: _uid,
}); });
} else if (type == 1 || type == 3) { } else if (type == 1 || type == 3) {
setApprover(true); setApprover(true);
setApproverConfig({ setApproverConfig({
value: { value: {
...JSON.parse(JSON.stringify(props.nodeConfig)), ...JSON.parse(JSON.stringify(props.nodeConfig)),
...{ settype: props.nodeConfig.settype ? props.nodeConfig.settype : 1 }, ...{ settype: props.nodeConfig.settype ? props.nodeConfig.settype : 1 },
}, },
flag: false, flag: false,
id: _uid, id: _uid,
}); });
} else if (type == 2) { } else if (type == 2) {
setCopyer(true); setCopyer(true);
setCopyerConfig({ setCopyerConfig({
value: JSON.parse(JSON.stringify(props.nodeConfig)), value: JSON.parse(JSON.stringify(props.nodeConfig)),
flag: false, flag: false,
id: _uid, id: _uid,
}); });
} else { } else {
setCondition(true); setCondition(true);
setConditionsConfig({ setConditionsConfig({
value: JSON.parse(JSON.stringify(props.nodeConfig)), value: JSON.parse(JSON.stringify(props.nodeConfig)),
priorityLevel, priorityLevel,
flag: false, flag: false,
id: _uid, id: _uid,
}); });
} }
}; };
const arrTransfer = (index:any, type = 1) => { const arrTransfer = (index: any, type = 1) => {
//向左-1,向右1 //向左-1,向右1
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice( props.nodeConfig.conditionNodes[index] =
index + type, props.nodeConfig.conditionNodes.splice(
1, index + type,
props.nodeConfig.conditionNodes[index] 1,
props.nodeConfig.conditionNodes[index]
)[0]; )[0];
props.nodeConfig.conditionNodes.map((item, index) => { props.nodeConfig.conditionNodes.map((item, index) => {
item.priorityLevel = index + 1; item.priorityLevel = index + 1;
}); });
resetConditionNodesErr() resetConditionNodesErr();
emits("update:nodeConfig", props.nodeConfig); emits("update:nodeConfig", props.nodeConfig);
}; };
//监听组块 //监听组块
watch(flowPermission1, (flow) => { watch(flowPermission1, (flow) => {
if (flow.flag && flow.id === _uid) { if (flow.flag && flow.id === _uid) {
emits("update:flowPermission", flow.value); emits("update:flowPermission", flow.value);
} }
}); });
watch(approverConfig1, (approver) => { watch(approverConfig1, (approver) => {
if (approver.flag && approver.id === _uid) { if (approver.flag && approver.id === _uid) {
emits("update:nodeConfig", approver.value); emits("update:nodeConfig", approver.value);
} }
}); });
watch(copyerConfig1, (copyer) => { watch(copyerConfig1, (copyer) => {
if (copyer.flag && copyer.id === _uid) { if (copyer.flag && copyer.id === _uid) {
emits("update:nodeConfig", copyer.value); emits("update:nodeConfig", copyer.value);
} }
}); });
watch(conditionsConfig1, (condition) => { watch(conditionsConfig1, (condition) => {
if (condition.flag && condition.id === _uid) { if (condition.flag && condition.id === _uid) {
emits("update:nodeConfig", condition.value); emits("update:nodeConfig", condition.value);
} }
}); });
onMounted(() => { onMounted(() => {
if (props.nodeConfig.type == 1) { if (props.nodeConfig.type == 1) {
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig); props.nodeConfig.error = !$func.setApproverStr(props.nodeConfig);
} else if (props.nodeConfig.type == 2) { } else if (props.nodeConfig.type == 2) {
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
props.nodeConfig.error = !$func.copyerStr(props.nodeConfig); props.nodeConfig.error = !$func.copyerStr(props.nodeConfig);
} else if (props.nodeConfig.type == 4) { } else if (props.nodeConfig.type == 4) {
resetConditionNodesErr() resetConditionNodesErr();
} }
}) });
</script> </script>
<template> <template>
<!--通用模块（0 发起人 1审批 2抄送 3处理 4条件 5路由）--> <!--通用模块（0 发起人 1审批 2抄送 3处理 4条件 5路由）-->
<div v-if="nodeConfig.type < 4" class="node-wrap" > <div v-if="nodeConfig.type < 4" class="node-wrap">
<div class="node-wrap-box" :class="(nodeConfig.type == 0 ? 'start-node ' : '') +(isTried && nodeConfig.error ? 'active error' : '')"> <div
<!--标签头部--> class="node-wrap-box"
<div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`"> :class="
<span v-if="nodeConfig.type == 0" class="iconfont"><i class="fa fa-play-circle-o"></i> {{ nodeConfig.nodeName }}</span> (nodeConfig.type == 0 ? 'start-node ' : '') +
<template v-else> (isTried && nodeConfig.error ? 'active error' : '')
<span v-if="nodeConfig.type==1" class="iconfont"><el-icon class="nodeIcon"><Stamp /></el-icon></span> "
<span v-if="nodeConfig.type==2" class="iconfont"><i class="fa fa-send"></i></span> >
<span v-if="nodeConfig.type==3" class="iconfont"><i class="fa fa-pencil-square-o"></i></span> <!--标签头部-->
<!--eslint-disable-next-line vue/no-mutating-props--> <div
<input v-if="isInput" v-model="nodeConfig.nodeName" v-focus:placeholder="defaultText" type="text" class="ant-input editable-title-input" @blur="blurEvent()" @focus="$event.currentTarget.select()" /> class="title"
:style="`background: rgb(${bgColors[nodeConfig.type]});`"
<span v-else class="editable-title" @click="clickEvent()">{{ nodeConfig.nodeName }}</span> >
<i class="anticon anticon-close close" @click="delNode"></i> <span v-if="nodeConfig.type == 0" class="iconfont"
</template> ><i class="fa fa-play-circle-o"></i> {{ nodeConfig.nodeName }}</span
</div> >
<!--标签主体--> <template v-else>
<div class="content" @click="setPerson"> <span v-if="nodeConfig.type == 1" class="iconfont"
<div class="text"> ><el-icon class="nodeIcon"><Stamp /></el-icon
<span v-if="!showText" class="placeholder">请选择{{defaultText}}</span> ></span>
{{showText}} <span v-if="nodeConfig.type == 2" class="iconfont"
</div> ><i class="fa fa-send"></i
<i class="anticon anticon-right arrow"></i> ></span>
</div> <span v-if="nodeConfig.type == 3" class="iconfont"
<!--标签错误提示--> ><i class="fa fa-pencil-square-o"></i
<div v-if="isTried && nodeConfig.error" class="error_tip"> ></span>
<i class="anticon anticon-exclamation-circle"></i> <!--eslint-disable-next-line vue/no-mutating-props-->
</div> <input
</div> v-if="isInput"
<!--eslint-disable-next-line vue/no-mutating-props--> v-model="nodeConfig.nodeName"
<addNode v-model:childNodeP="nodeConfig.childNode" :node-config="props.nodeConfig" /> v-focus:placeholder="defaultText"
</div> type="text"
<!--路由模块--> class="ant-input editable-title-input"
<div v-if="nodeConfig.type == 5" class="node-wrap" > @blur="blurEvent()"
<div class="branch-box-wrap"> @focus="$event.currentTarget.select()"
<div class="branch-box"> />
<button class="add-branch" @click="addTerm">添加条件</button>
<div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box" >
<div class="condition-node">
<div class="condition-node-box">
<div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
<div v-if="index != 0" class="sort-left" @click="arrTransfer(index, -1)">&lt;</div>
<div class="title-wrapper">
<input
v-if="isInputList[index]"
v-model="item.nodeName"
v-focus
type="text"
class="ant-input editable-title-input"
@blur="blurEvent(index)"
@focus="$event.currentTarget.select()"
/> <span v-else class="editable-title" @click="clickEvent()">{{
<span v-else class="editable-title" @click="clickEvent(index)">{{ item.nodeName }}</span> nodeConfig.nodeName
<span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{ item.priorityLevel }}</span> }}</span>
<i class="anticon anticon-close close" @click="delTerm(index)"></i> <i class="fa fa-close close" @click="delNode"></i>
</div> </template>
<div v-if="index != nodeConfig.conditionNodes.length - 1" class="sort-right" @click="arrTransfer(index)">&gt;</div> </div>
<div class="content" @click="setPerson(item.priorityLevel)">{{ $func.conditionStr(nodeConfig, index) }}</div> <!--标签主体-->
<div v-if="isTried && item.error" class="error_tip" > <div class="content" @click="setPerson">
<i class="anticon anticon-exclamation-circle"></i> <div class="text">
</div> <span v-if="!showText" class="placeholder"
</div> >请选择{{ defaultText }}</span
<addNode v-model:childNodeP="item.childNode" :node-config="item" /> >
</div> {{ showText }}
</div> </div>
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" /> <i class="fa fa-angle-right arrow"></i>
<template v-if="index == 0"> </div>
<div class="top-left-cover-line"></div> <!--标签错误提示-->
<div class="bottom-left-cover-line"></div> <div v-if="isTried && nodeConfig.error" class="error_tip">
</template> <i class="fa fa-exclamation-circle fa-2x"></i>
<template v-if="index == nodeConfig.conditionNodes.length - 1"> </div>
<div class="top-right-cover-line"></div> </div>
<div class="bottom-right-cover-line"></div> <!--eslint-disable-next-line vue/no-mutating-props-->
</template> <addNode
</div> v-model:childNodeP="nodeConfig.childNode"
</div> :node-config="props.nodeConfig"
<!--eslint-disable-next-line vue/no-mutating-props--> />
<addNode v-model:childNodeP="nodeConfig.childNode" :node-config="props.nodeConfig" /> </div>
</div> <!--路由模块-->
</div> <div v-if="nodeConfig.type == 5" class="node-wrap">
<!--循环组件--> <div class="branch-box-wrap">
<!--eslint-disable-next-line vue/no-mutating-props--> <div class="branch-box">
<nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode"/> <button class="add-branch" @click="addTerm">添加条件</button>
<div
v-for="(item, index) in nodeConfig.conditionNodes"
:key="index"
class="col-box"
>
<div class="condition-node">
<div class="condition-node-box">
<div
class="auto-judge"
:class="isTried && item.error ? 'error active' : ''"
>
<div
v-if="index != 0"
class="sort-left"
@click="arrTransfer(index, -1)"
>
&lt;
</div>
<div class="title-wrapper">
<input
v-if="isInputList[index]"
v-model="item.nodeName"
v-focus
type="text"
class="ant-input editable-title-input"
@blur="blurEvent(index)"
@focus="$event.currentTarget.select()"
/>
<span
v-else
class="editable-title"
@click="clickEvent(index)"
>{{ item.nodeName }}</span
>
<span
class="priority-title"
@click="setPerson(item.priorityLevel)"
>优先级{{ item.priorityLevel }}</span
>
<i class="fa fa-close close" @click="delTerm(index)"></i>
</div>
<div
v-if="index != nodeConfig.conditionNodes.length - 1"
class="sort-right"
@click="arrTransfer(index)"
>
&gt;
</div>
<div class="content" @click="setPerson(item.priorityLevel)">
{{ $func.conditionStr(nodeConfig, index) }}
</div>
<div v-if="isTried && item.error" class="error_tip">
<i class="fa fa-exclamation-circle fa-2x"></i>
</div>
</div>
<addNode
v-model:childNodeP="item.childNode"
:node-config="item"
/>
</div>
</div>
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
<template v-if="index == 0">
<div class="top-left-cover-line"></div>
<div class="bottom-left-cover-line"></div>
</template>
<template v-if="index == nodeConfig.conditionNodes.length - 1">
<div class="top-right-cover-line"></div>
<div class="bottom-right-cover-line"></div>
</template>
</div>
</div>
<!--eslint-disable-next-line vue/no-mutating-props-->
<addNode
v-model:childNodeP="nodeConfig.childNode"
:node-config="props.nodeConfig"
/>
</div>
</div>
<!--循环组件-->
<!--eslint-disable-next-line vue/no-mutating-props-->
<nodeWrap
v-if="nodeConfig.childNode"
v-model:nodeConfig="nodeConfig.childNode"
/>
</template> </template>
<style lang='scss' scoped> <style lang="scss" scoped>
.nodeIcon{ .nodeIcon {
font-size: 20px; margin-top: 5px;
margin-top: 5px; font-size: 20px;
}
.error_tip i {
color: #f00;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save