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.
357 lines
16 KiB
357 lines
16 KiB
<template>
|
|
<div>
|
|
<!--执行框-->
|
|
<div class="node-wrap" v-if="nodeConfig.type<4">
|
|
<!--执行节点信息-->
|
|
<div class="node-wrap-box" :class="(nodeConfig.type==0?'start-node ':'')+(isTried&&nodeConfig.error?'active error':'')">
|
|
<div>
|
|
<!--执行框标题-->
|
|
<div class="title" :style="`background: rgb(${bgColor});`">
|
|
<span class="iconfont" v-if="nodeConfig.type==0"><i class="el-icon-video-play"></i></span> <!--开始图标-->
|
|
<span v-if="nodeConfig.type==0">{{nodeConfig.nodeName}}</span><!--开始名称-->
|
|
<template v-else><!--不是发起节点的话执行下面内容-->
|
|
<span class="iconfont"><!--节点图标-->
|
|
<i class="el-icon-s-check" v-if="nodeConfig.type==1"></i>
|
|
<i class="el-icon-s-promotion" v-if="nodeConfig.type!=1"></i>
|
|
</span>
|
|
<!--节点名称,单击可编辑-->
|
|
<input type="text"
|
|
v-if="isInput"
|
|
class="ant-input editable-title-input"
|
|
@blur="blurEvent()"
|
|
@focus="$event.currentTarget.select()"
|
|
v-focus
|
|
v-model="nodeConfig.nodeName"
|
|
:placeholder="defaultText"
|
|
>
|
|
<span v-else class="editable-title" @click="clickEvent()">{{nodeConfig.nodeName}}</span>
|
|
<i class="anticon anticon-close close" @click="delNode"></i>
|
|
</template>
|
|
</div>
|
|
<!--节点内容说明-->
|
|
<div class="content" @click="setPerson">
|
|
<div class="text">
|
|
<span class="placeholder" v-if="!showText">请选择{{defaultText}}</span>
|
|
{{showText}}
|
|
</div>
|
|
<i class="anticon anticon-right arrow"></i>
|
|
|
|
</div>
|
|
|
|
<!--错误提示-->
|
|
<div class="error_tip" v-if="isTried&&nodeConfig.error">
|
|
<i class="anticon anticon-exclamation-circle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text" style="padding: 0 2px; overflow: hidden;">
|
|
NO:{{nodeConfig.nodeNumber}}
|
|
</div>
|
|
<!--添加按钮-->
|
|
<addNode :childNodeP.sync="nodeConfig.childNode" :nodeConfig.sync="nodeConfig"></addNode>
|
|
</div>
|
|
<!--条件节点-->
|
|
<div class="branch-wrap" v-if="nodeConfig.type==4">
|
|
<div class="branch-box-wrap">
|
|
<!--条件主体-->
|
|
<div class="branch-box">
|
|
<button class="add-branch" @click="addTerm">添加条件</button> <!--添加条件按钮-->
|
|
<div class="col-box" v-for="(item,index) in nodeConfig.conditionNodes" :key="index"> <!--条件节点分支-->
|
|
<div class="condition-node">
|
|
<div class="condition-node-box">
|
|
<div class="auto-judge" :class="isTried&&item.error?'error active':''">
|
|
<div class="sort-left" v-if="index!=0" @click="arrTransfer(index,-1)"><</div>
|
|
<div class="title-wrapper"><!--条件标题-->
|
|
<input
|
|
v-if="isInputList[index]"
|
|
type="text"
|
|
class="ant-input editable-title-input"
|
|
@blur="blurEvent(index)"
|
|
@focus="$event.currentTarget.select()"
|
|
v-focus
|
|
v-model="item.nodeName"
|
|
>
|
|
<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="anticon anticon-close close" @click="delTerm(index)"></i>
|
|
</div>
|
|
<div class="sort-right" v-if="index!=nodeConfig.conditionNodes.length-1" @click="arrTransfer(index)">></div>
|
|
<div class="content" @click="setPerson(item.priorityLevel)">{{$func.conditionStr(nodeConfig,index)}}</div>
|
|
<div class="error_tip" v-if="isTried&&item.error">
|
|
<i class="anticon anticon-exclamation-circle"></i>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="text" style="padding: 0 2px; overflow: hidden;">
|
|
NO:{{nodeConfig.nodeNumber}}
|
|
</div>
|
|
<addNode :childNodeP.sync="item.childNode" :nodeConfig="item"></addNode>
|
|
</div>
|
|
</div>
|
|
<nodeWrap v-if="item.childNode" :nodeConfig.sync="item.childNode"></nodeWrap>
|
|
<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>
|
|
<!--添加按钮-->
|
|
<addNode :childNodeP.sync="nodeConfig.childNode" :nodeConfig.="nodeConfig" ></addNode>
|
|
</div>
|
|
</div>
|
|
<nodeWrap v-if="nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode"></nodeWrap>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { v4 } from 'uuid'
|
|
import { mapState, mapMutations } from 'vuex'
|
|
export default {
|
|
props: ["nodeConfig", "flowPermission"],
|
|
data() {
|
|
return {
|
|
placeholderList: ["发起人", "审核人", "抄送人", "执行人"],
|
|
isInputList: [], //节点条件是否可编辑数组
|
|
isInput: false, //节点标题是否可编辑
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.nodeConfig.type == 1 || this.nodeConfig.type == 3) {
|
|
this.nodeConfig.error = !this.$func.setApproverStr(this.nodeConfig)
|
|
} else if (this.nodeConfig.type == 2) {
|
|
this.nodeConfig.error = !this.$func.copyerStr(this.nodeConfig)
|
|
} else if (this.nodeConfig.type == 4) {
|
|
this.resetConditionNodesErr()
|
|
}
|
|
},
|
|
directives: {
|
|
focus: {
|
|
inserted: function (el) {
|
|
el.focus()
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState([
|
|
'isTried',
|
|
'flowPermission1', //开始节点
|
|
'approverConfig1', //执行节点
|
|
'copyerConfig1', //抄送
|
|
'conditionsConfig1' //抄送
|
|
]),
|
|
defaultText() { //节点内容选择提示语
|
|
return this.placeholderList[this.nodeConfig.type]
|
|
},
|
|
showText() { //节点内容文本
|
|
if (this.nodeConfig.type == 0) return this.$func.arrToStr(this.flowPermission) || '所有人'
|
|
if (this.nodeConfig.type == 1 || this.nodeConfig.type == 3) return this.$func.setApproverStr(this.nodeConfig)
|
|
return this.$func.copyerStr(this.nodeConfig)
|
|
},
|
|
bgColor() { //节点标题背景色
|
|
return ['87, 106, 149', '255, 148, 62', '50, 150, 250','255,102,0','255,255,255'][this.nodeConfig.type]
|
|
}
|
|
},
|
|
watch: {
|
|
//监听开始节点数据变化
|
|
flowPermission1(data){
|
|
// console.log("监听开始节点数据变化------data----------->",data,"-----_uid---->", this._uid)
|
|
if (data.flag && data.id === this._uid) {
|
|
this.$emit('update:flowPermission', data.value)
|
|
}
|
|
},
|
|
//监听执行节点数据变化
|
|
approverConfig1(data) {
|
|
if (data.flag && data.id === this._uid) {
|
|
this.$emit('update:nodeConfig', data.value)
|
|
}
|
|
},
|
|
copyerConfig1(data) {
|
|
// console.log("监听抄送节点---------->",date)
|
|
if (data.flag && data.id === this._uid) {
|
|
this.$emit('update:nodeConfig', data.value)
|
|
}
|
|
},
|
|
conditionsConfig1(data) {
|
|
if (data.flag && data.id === this._uid) {
|
|
// console.log("监听条件节点---------->",date)
|
|
this.$emit('update:nodeConfig', data.value)
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
...mapMutations([
|
|
'setPromoter', //开始节点
|
|
'setFlowPermission', //开始节点
|
|
'setApprover', //执行节点
|
|
'setApproverConfig', //执行节点
|
|
'setCopyer', //抄送节点
|
|
'setCopyerConfig', //抄送节点
|
|
'setCondition', //条件
|
|
'setConditionsConfig', //条件
|
|
]),
|
|
//设置当前节点标题可编辑
|
|
clickEvent(index) {
|
|
// console.log("设置当前节点标题可编辑",index)
|
|
if (index || index === 0) {
|
|
this.$set(this.isInputList, index, true)
|
|
} else {
|
|
this.isInput = true;
|
|
}
|
|
},
|
|
//节点编辑标题失去焦点时
|
|
blurEvent(index) {
|
|
if (index || index === 0) {
|
|
this.$set(this.isInputList, index, false)
|
|
this.nodeConfig.conditionNodes[index].nodeName = this.nodeConfig.conditionNodes[index].nodeName || "条件"
|
|
} else {
|
|
this.isInput = false;
|
|
this.nodeConfig.nodeName = this.nodeConfig.nodeName || this.defaultText
|
|
}
|
|
},
|
|
//删除节点
|
|
delNode() {
|
|
this.$emit("update:nodeConfig", this.nodeConfig.childNode);
|
|
},
|
|
//打开节点操作抽屉
|
|
setPerson(priorityLevel) {
|
|
console.log("打开节点操作抽屉------------>",priorityLevel)
|
|
var { type } = this.nodeConfig;
|
|
console.log("打开节点操作抽屉-----1------->",type,this.nodeConfig)
|
|
if (type == 0) {
|
|
this.setPromoter(true)
|
|
this.setFlowPermission({
|
|
value: this.flowPermission,
|
|
flag: false,
|
|
id: this._uid
|
|
})
|
|
} else if (type == 1 || type == 3) { //打开执行节点
|
|
this.setApprover(true)
|
|
this.setApproverConfig({
|
|
value: {
|
|
...JSON.parse(JSON.stringify(this.nodeConfig)),
|
|
...{ settype: this.nodeConfig.settype ? this.nodeConfig.settype : 1 }
|
|
},
|
|
flag: false,
|
|
id: this._uid
|
|
})
|
|
} else if (type == 2) {
|
|
this.setCopyer(true)
|
|
|
|
this.setCopyerConfig({
|
|
value: JSON.parse(JSON.stringify(this.nodeConfig)),
|
|
flag: false,
|
|
id: this._uid
|
|
})
|
|
} else {
|
|
//条件
|
|
this.setCondition(true)
|
|
this.setConditionsConfig({
|
|
value: JSON.parse(JSON.stringify(this.nodeConfig)),
|
|
priorityLevel,
|
|
flag: false,
|
|
id: this._uid
|
|
})
|
|
}
|
|
},
|
|
//添加条件
|
|
addTerm() {
|
|
const snowflake = v4().replaceAll('-','').toString();
|
|
let len = this.nodeConfig.conditionNodes.length + 1
|
|
this.nodeConfig.gotoNode.push(snowflake);
|
|
this.nodeConfig.conditionNodes.push({
|
|
"nodeNumber":snowflake,
|
|
"nodeName": "条件" + len,
|
|
"type": 5,
|
|
"priorityLevel": len,
|
|
"conditionList": [],
|
|
"nodeUserList": [],
|
|
"databasecondition":[],
|
|
"childNode": null,
|
|
"fromNode": this.nodeConfig.nodeNumber,
|
|
"gotoNode":[]
|
|
});
|
|
this.resetConditionNodesErr()
|
|
this.$emit("update:nodeConfig", this.nodeConfig);
|
|
},
|
|
//检验是否设置条件
|
|
resetConditionNodesErr() {
|
|
for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
|
|
this.nodeConfig.conditionNodes[i].error = this.$func.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
|
|
}
|
|
},
|
|
//增加或减少提交
|
|
arrTransfer(index, type = 1) {//向左-1,向右+1
|
|
this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0];
|
|
this.nodeConfig.conditionNodes.map((item, index) => {
|
|
item.priorityLevel = index + 1
|
|
})
|
|
this.$emit("update:nodeConfig", this.nodeConfig);
|
|
},
|
|
//删除提交
|
|
delTerm(index) {
|
|
this.nodeConfig.conditionNodes.splice(index, 1)
|
|
this.nodeConfig.conditionNodes.map((item, index) => {
|
|
item.priorityLevel = index + 1
|
|
item.nodeName = `条件${index + 1}`
|
|
});
|
|
this.resetConditionNodesErr()
|
|
this.$emit("update:nodeConfig", this.nodeConfig);
|
|
if (this.nodeConfig.conditionNodes.length == 1) {
|
|
if (this.nodeConfig.childNode) {
|
|
if (this.nodeConfig.conditionNodes[0].childNode) {
|
|
this.reData(this.nodeConfig.conditionNodes[0].childNode, this.nodeConfig.childNode)
|
|
} else {
|
|
this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode
|
|
}
|
|
}
|
|
this.$emit("update:nodeConfig", this.nodeConfig.conditionNodes[0].childNode);
|
|
}
|
|
},
|
|
//删除提交(副本)
|
|
reData(data, addData) {
|
|
if (!data.childNode) {
|
|
data.childNode = addData
|
|
} else {
|
|
this.reData(data.childNode, addData)
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.error_tip {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
transform: translate(150%, 0px);
|
|
font-size: 24px;
|
|
}
|
|
|
|
.promoter_person .el-dialog__body {
|
|
padding: 10px 20px 14px 20px;
|
|
}
|
|
|
|
.selected_list {
|
|
margin-bottom: 20px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.selected_list span {
|
|
margin-right: 10px;
|
|
padding: 3px 6px 3px 9px;
|
|
line-height: 12px;
|
|
white-space: nowrap;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(220, 220, 220, 1);
|
|
}
|
|
|
|
.selected_list img {
|
|
margin-left: 5px;
|
|
width: 7px;
|
|
height: 7px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|