You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
358 lines
9.4 KiB
358 lines
9.4 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2023-10-10 14:23:45
|
|
@ 备注: 添加节点弹窗
|
|
-->
|
|
<script lang="ts" setup>
|
|
import { v4 as uuidv4 } from "uuid";
|
|
let props = defineProps({
|
|
nodeConfig: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
childNodeP: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
let emits = defineEmits(["update:childNodeP"]);
|
|
let visible = ref(false);
|
|
//添加节点
|
|
const addType = (type: any) => {
|
|
// console.log("props.nodeConfig",props.nodeConfig)
|
|
// console.log("props.childNodeP",props.childNodeP)
|
|
visible.value = false;
|
|
let onlyNumber = uuidv4().replaceAll("-", "").toString(); //获取唯一编码
|
|
// console.log('136', onlyNumber,props.nodeConfig,props.childNodeP)
|
|
let fromNodeNumber = ""; //来源
|
|
let gotoNodeNumber = ""; //去向
|
|
if (
|
|
props.nodeConfig != null &&
|
|
props.nodeConfig.nodeNumber != null &&
|
|
props.nodeConfig.nodeNumber != ""
|
|
) {
|
|
fromNodeNumber = props.nodeConfig.nodeNumber;
|
|
// eslint-disable-next-line vue/no-mutating-props
|
|
props.nodeConfig.gotoNode = [onlyNumber];
|
|
// console.log("p1",props.nodeConfig)
|
|
}
|
|
if (props.childNodeP != null) {
|
|
if (props.childNodeP.nodeNumber != null && props.childNodeP.nodeNumber != "") {
|
|
gotoNodeNumber = props.childNodeP.nodeNumber;
|
|
// console.log("p2",props.nodeConfig)
|
|
}
|
|
// eslint-disable-next-line vue/no-mutating-props
|
|
props.childNodeP.fromNode = onlyNumber;
|
|
if (props.childNodeP.childNode) {
|
|
if (
|
|
props.childNodeP.childNode.nodeNumber != null &&
|
|
props.childNodeP.childNode.nodeNumber != ""
|
|
) {
|
|
// eslint-disable-next-line vue/no-mutating-props
|
|
props.childNodeP.gotoNode = [props.childNodeP.childNode.nodeNumber];
|
|
// console.log("p3",props.childNodeP)
|
|
}
|
|
}
|
|
}
|
|
if (type != 4) {
|
|
var data;
|
|
if (type == 1) {
|
|
data = {
|
|
nodeNumber: onlyNumber, //节点标识
|
|
nodeName: "审核人", //节点名称
|
|
error: true, //当前审批是否通过校验
|
|
type: 1, // 0 发起人 1审批 2抄送 3执行人 4条件 5路由
|
|
settype: 1,
|
|
selectMode: 0,
|
|
selectRange: 0,
|
|
directorLevel: 1,
|
|
examineMode: 1,
|
|
noHanderAction: 1,
|
|
examineEndDirectorLevel: 0,
|
|
childNode: props.childNodeP,
|
|
nodeUserList: [],
|
|
fromNode: fromNodeNumber,
|
|
gotoNode: gotoNodeNumber != "" ? [gotoNodeNumber] : [],
|
|
sendBackNode: "beginnode",
|
|
attribute: 1,
|
|
matrix: {
|
|
matrixid: 0,
|
|
matrixName: "",
|
|
factorid: 0,
|
|
factorName: "",
|
|
outcomeid: 0,
|
|
outcomeName: "",
|
|
list: [],
|
|
},
|
|
};
|
|
// console.log("p4",data)
|
|
} else if (type == 2) {
|
|
data = {
|
|
nodeNumber: onlyNumber,
|
|
nodeName: "抄送人",
|
|
type: 2,
|
|
ccSelfSelectFlag: 1,
|
|
childNode: props.childNodeP,
|
|
nodeUserList: [],
|
|
fromNode: fromNodeNumber,
|
|
gotoNode: gotoNodeNumber != "" ? [gotoNodeNumber] : [],
|
|
settype: 1,
|
|
selectMode: 0,
|
|
selectRange: 0,
|
|
directorLevel: 1,
|
|
examineMode: 1,
|
|
noHanderAction: 1,
|
|
examineEndDirectorLevel: 0,
|
|
matrix: {
|
|
matrixid: 0,
|
|
matrixName: "",
|
|
factorid: 0,
|
|
factorName: "",
|
|
outcomeid: 0,
|
|
outcomeName: "",
|
|
list: [],
|
|
},
|
|
};
|
|
// console.log("p5",data)
|
|
} else if (type == 3) {
|
|
data = {
|
|
nodeNumber: onlyNumber,
|
|
nodeName: "执行人",
|
|
error: true,
|
|
type: 3,
|
|
settype: 1,
|
|
selectMode: 0,
|
|
selectRange: 0,
|
|
directorLevel: 1,
|
|
examineMode: 1,
|
|
noHanderAction: 1,
|
|
examineEndDirectorLevel: 0,
|
|
childNode: props.childNodeP,
|
|
nodeUserList: [],
|
|
fromNode: fromNodeNumber,
|
|
gotoNode: gotoNodeNumber != "" ? [gotoNodeNumber] : [],
|
|
sendBackNode: "beginnode",
|
|
attribute: 1,
|
|
matrix: {
|
|
matrixid: 0,
|
|
matrixName: "",
|
|
factorid: 0,
|
|
factorName: "",
|
|
outcomeid: 0,
|
|
outcomeName: "",
|
|
list: [],
|
|
},
|
|
};
|
|
// console.log("p6",data)
|
|
}
|
|
emits("update:childNodeP", data);
|
|
} else {
|
|
const snowflake1 = uuidv4().replaceAll("-", "").toString();
|
|
const snowflake2 = uuidv4().replaceAll("-", "").toString();
|
|
if (props.childNodeP) {
|
|
// eslint-disable-next-line vue/no-mutating-props
|
|
props.childNodeP.fromNode = snowflake1; //默认第一个分支指向条件1
|
|
}
|
|
let data = {
|
|
nodeNumber: onlyNumber,
|
|
nodeName: "路由",
|
|
type: 5,
|
|
childNode: null,
|
|
fromNode: fromNodeNumber,
|
|
gotoNode: [snowflake1, snowflake2],
|
|
conditionNodes: [
|
|
{
|
|
nodeNumber: snowflake1,
|
|
nodeName: "条件1",
|
|
error: true,
|
|
type: 4,
|
|
priorityLevel: 1,
|
|
conditionList: [],
|
|
nodeUserList: [],
|
|
childNode: props.childNodeP,
|
|
fromNode: onlyNumber,
|
|
gotoNode: gotoNodeNumber != "" ? [gotoNodeNumber] : [],
|
|
},
|
|
{
|
|
nodeNumber: snowflake2,
|
|
nodeName: "条件2",
|
|
type: 4,
|
|
priorityLevel: 2,
|
|
conditionList: [],
|
|
nodeUserList: [],
|
|
childNode: null,
|
|
fromNode: onlyNumber,
|
|
gotoNode: [],
|
|
},
|
|
],
|
|
};
|
|
// console.log("p7",data)
|
|
emits("update:childNodeP", data);
|
|
}
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="add-node-btn-box">
|
|
<div class="add-node-btn">
|
|
<el-popover v-model="visible" placement="right-start" width="auto">
|
|
<div class="add-node-popover-body">
|
|
<a class="add-node-popover-item approver" @click="addType(1)">
|
|
<div class="item-wrapper">
|
|
<span class="iconfont"
|
|
><el-icon><Stamp /></el-icon
|
|
></span>
|
|
</div>
|
|
<p>审批人</p>
|
|
</a>
|
|
<a class="add-node-popover-item notifier" @click="addType(2)">
|
|
<div class="item-wrapper">
|
|
<span class="iconfont"><i class="fa fa-send"></i></span>
|
|
</div>
|
|
<p>抄送人</p>
|
|
</a>
|
|
<a class="add-node-popover-item approver" @click="addType(3)">
|
|
<div class="item-wrapper">
|
|
<span class="iconfont"><i class="fa fa-pencil-square-o"></i></span>
|
|
</div>
|
|
<p>处理</p>
|
|
</a>
|
|
<a class="add-node-popover-item condition" @click="addType(4)">
|
|
<div class="item-wrapper">
|
|
<span class="iconfont"><i class="fa fa-sitemap"></i></span>
|
|
</div>
|
|
<p>条件分支</p>
|
|
</a>
|
|
</div>
|
|
<template #reference>
|
|
<button class="btn" type="button">
|
|
<span class="iconfont"><i class="fa fa-plus"></i></span>
|
|
</button>
|
|
</template>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped></style>
|
|
<style scoped lang="less">
|
|
.add-node-btn-box {
|
|
width: 240px;
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
position: relative;
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
margin: auto;
|
|
width: 2px;
|
|
height: 100%;
|
|
background-color: #cacaca;
|
|
}
|
|
.add-node-btn {
|
|
user-select: none;
|
|
width: 240px;
|
|
padding: 20px 0 32px;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
-webkit-box-flex: 1;
|
|
flex-grow: 1;
|
|
.btn {
|
|
outline: none;
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
|
width: 30px;
|
|
height: 30px;
|
|
background: #3296fa;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
border: none;
|
|
line-height: 30px;
|
|
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
.iconfont {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
}
|
|
&:hover {
|
|
transform: scale(1.3);
|
|
box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
&:active {
|
|
transform: none;
|
|
background: #1e83e9;
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="less">
|
|
.add-node-popover-body {
|
|
display: flex;
|
|
.add-node-popover-item {
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
flex: 1;
|
|
color: #191f25 !important;
|
|
.item-wrapper {
|
|
user-select: none;
|
|
display: inline-block;
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-bottom: 5px;
|
|
background: #fff;
|
|
border: 1px solid #e2e2e2;
|
|
border-radius: 50%;
|
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
.iconfont {
|
|
font-size: 35px;
|
|
line-height: 80px;
|
|
}
|
|
}
|
|
&.approver {
|
|
.item-wrapper {
|
|
color: #ff943e;
|
|
}
|
|
}
|
|
&.notifier {
|
|
.item-wrapper {
|
|
color: #3296fa;
|
|
}
|
|
}
|
|
&.condition {
|
|
.item-wrapper {
|
|
color: #15bc83;
|
|
}
|
|
}
|
|
&:hover {
|
|
.item-wrapper {
|
|
background: #3296fa;
|
|
box-shadow: 0 10px 20px 0 rgba(50, 150, 250, 0.4);
|
|
}
|
|
.iconfont {
|
|
color: #fff;
|
|
}
|
|
}
|
|
&:active {
|
|
.item-wrapper {
|
|
box-shadow: none;
|
|
background: #eaeaea;
|
|
}
|
|
.iconfont {
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|