304 lines
12 KiB
Vue
304 lines
12 KiB
Vue
|
<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('+ ['87, 106, 149','255, 148, 62','50, 150, 250'][nodeConfig.type] +');'">
|
||
|
|
<span class="iconfont" v-show="nodeConfig.type==1"></span><!-- 审核人图标 -->
|
||
|
|
<span class="iconfont" v-show="nodeConfig.type==2"></span><!-- 抄送人图标 -->
|
||
|
|
<span v-if="nodeConfig.type == 0">{{nodeConfig.nodeName}}</span><!-- 基本为发起人 -->
|
||
|
|
|
||
|
|
<input type="text" class="ant-input editable-title-input" v-if="nodeConfig.type != 0 && isInput" @blur="blurEvent()" @focus="$event.currentTarget.select()" v-focus v-model="nodeConfig.nodeName" :placeholder="placeholderList[nodeConfig.type]">
|
||
|
|
<!-- <input type="text" class="ant-input editable-title-input" v-if="nodeConfig.type != 0 && isInput && isView" v-model="nodeConfig.nodeName" :placeholder="placeholderList[nodeConfig.type]"> -->
|
||
|
|
<!-- E 发起人双状态 -->
|
||
|
|
|
||
|
|
<!-- S 审批、抄送人双状态 -->
|
||
|
|
<span class="editable-title" @click="clickEvent()" v-if="nodeConfig.type != 0 && !isInput">{{nodeConfig.nodeName}}</span>
|
||
|
|
<!-- <span class="editable-title" v-show="(nodeConfig.type != 0 && !isInput) && isView == true">{{nodeConfig.nodeName}}222</span> -->
|
||
|
|
<!-- E 审批、抄送人双状态 -->
|
||
|
|
|
||
|
|
<!-- S 删除节点-->
|
||
|
|
<i class="anticon anticon-close close" v-if="nodeConfig.type != 0" @click="delNode()"></i>
|
||
|
|
<!-- E 删除节点-->
|
||
|
|
</div>
|
||
|
|
<div class="content" @click="setPerson">
|
||
|
|
<div class="text" v-if="nodeConfig.type == 0">{{$func.arrToStr(flowPermission)?$func.arrToStr(flowPermission):'所有人'}}</div>
|
||
|
|
<div class="text" v-if="nodeConfig.type==1">
|
||
|
|
<span class="placeholder" v-if="!$func.setApproverStr(nodeConfig)">请选择{{placeholderList[nodeConfig.type]}}</span>
|
||
|
|
{{$func.setApproverStr(nodeConfig)}}
|
||
|
|
</div>
|
||
|
|
<div class="text" v-if="nodeConfig.type==2">
|
||
|
|
<span class="placeholder" v-if="!$func.copyerStr(nodeConfig)">请选择{{placeholderList[nodeConfig.type]}}</span>
|
||
|
|
{{$func.copyerStr(nodeConfig)}}
|
||
|
|
</div>
|
||
|
|
<i class="anticon anticon-right arrow"></i>
|
||
|
|
</div>
|
||
|
|
<div class="error_tip" v-if="isTried && nodeConfig.error">
|
||
|
|
<i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<addNode :childNodeP.sync="nodeConfig.childNode" :class="{'hide-add-btn': isView}"></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 type="text" class="ant-input editable-title-input" v-if="isInputList[index]" @blur="blurEvent(index)" @focus="$event.currentTarget.select()" v-focus v-model="item.nodeName">
|
||
|
|
<span class="editable-title" @click="clickEvent(index)" v-if="!isInputList[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" style="color: rgb(242, 86, 67);"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<addNode :childNodeP.sync="item.childNode" :class="{'hide-add-btn': isView}"></addNode>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<nodeWrap v-if="item.childNode && item.childNode" :nodeConfig.sync="item.childNode" :tableId="tableId" :isTried.sync="isTried"></nodeWrap>
|
||
|
|
<div class="top-left-cover-line" v-if="index == 0"></div>
|
||
|
|
<div class="bottom-left-cover-line" v-if="index == 0"></div>
|
||
|
|
<div class="top-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
|
||
|
|
<div class="bottom-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<addNode :childNodeP.sync="nodeConfig.childNode" :class="{'hide-add-btn': isView}"></addNode>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<nodeWrap v-if="nodeConfig.childNode && nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode" :tableId="tableId" :isTried.sync="isTried"></nodeWrap>
|
||
|
|
|
||
|
|
<!-- <div class="mask-view" v-show="isView"></div> -->
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'nodeWrap',
|
||
|
|
props: ["nodeConfig", "flowPermission", "isTried", "tableId", "isView"],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
placeholderList: ["发起人", "审核人", "抄送人"],
|
||
|
|
isInputList: [],
|
||
|
|
isInput: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if (this.nodeConfig.type == 1) {
|
||
|
|
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) {
|
||
|
|
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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
flowPermission1() {
|
||
|
|
return this.$store.state.flowPath.flowPermission
|
||
|
|
},
|
||
|
|
approverConfig1() {
|
||
|
|
return this.$store.state.flowPath.approverConfig
|
||
|
|
},
|
||
|
|
copyerConfig1() {
|
||
|
|
return this.$store.state.flowPath.copyerConfig
|
||
|
|
},
|
||
|
|
conditionsConfig1() {
|
||
|
|
return this.$store.state.flowPath.conditionsConfig
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
flowPermission1(data) {
|
||
|
|
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) {
|
||
|
|
if (data.flag && data.id === this._uid) {
|
||
|
|
this.$emit('update:nodeConfig', data.value)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
conditionsConfig1(data) {
|
||
|
|
if (data.flag && data.id === this._uid) {
|
||
|
|
this.$emit('update:nodeConfig', data.value)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
clickEvent(index) {
|
||
|
|
// if (this.isView == false || this.isView == undefined) {
|
||
|
|
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 ? this.nodeConfig.conditionNodes[index].nodeName : "条件"
|
||
|
|
} else {
|
||
|
|
this.isInput = false;
|
||
|
|
this.nodeConfig.nodeName = this.nodeConfig.nodeName ? this.nodeConfig.nodeName : this.placeholderList[this.nodeConfig.type]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
delNode() {
|
||
|
|
this.$emit("update:nodeConfig", this.nodeConfig.childNode);
|
||
|
|
},
|
||
|
|
addTerm() {
|
||
|
|
let len = this.nodeConfig.conditionNodes.length + 1
|
||
|
|
this.nodeConfig.conditionNodes.push({
|
||
|
|
"nodeName": "条件" + len,
|
||
|
|
"type": 3,
|
||
|
|
"priorityLevel": len,
|
||
|
|
"conditionList": [],
|
||
|
|
"nodeUserList": [],
|
||
|
|
"childNode": null
|
||
|
|
});
|
||
|
|
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
|
||
|
|
}
|
||
|
|
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}`
|
||
|
|
});
|
||
|
|
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
|
||
|
|
}
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setPerson(priorityLevel) {
|
||
|
|
var {
|
||
|
|
type
|
||
|
|
} = this.nodeConfig;
|
||
|
|
if (type == 0) {
|
||
|
|
this.$store.commit('updatePromoter', true)
|
||
|
|
this.$store.commit('updateFlowPermission', {
|
||
|
|
value: this.flowPermission,
|
||
|
|
flag: false,
|
||
|
|
id: this._uid
|
||
|
|
})
|
||
|
|
} else if (type == 1) { //* 审核
|
||
|
|
this.$store.commit('updateApprover', true)
|
||
|
|
this.$store.commit('updateApproverConfig', {
|
||
|
|
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.$store.commit('updateCopyer', true)
|
||
|
|
this.$store.commit('updateCopyerConfig', {
|
||
|
|
// value: JSON.parse(JSON.stringify(this.nodeConfig)),
|
||
|
|
value: {
|
||
|
|
...JSON.parse(JSON.stringify(this.nodeConfig)),
|
||
|
|
...{
|
||
|
|
settype: this.nodeConfig.settype ? this.nodeConfig.settype : 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
flag: false,
|
||
|
|
id: this._uid
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
this.$store.commit('updateCondition', true)
|
||
|
|
this.$store.commit('updateConditionsConfig', {
|
||
|
|
value: JSON.parse(JSON.stringify(this.nodeConfig)),
|
||
|
|
priorityLevel,
|
||
|
|
flag: false,
|
||
|
|
id: this._uid
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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
|
||
|
|
})
|
||
|
|
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
|
||
|
|
}
|
||
|
|
this.$emit("update:nodeConfig", this.nodeConfig);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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>
|
||
|
|
<style src="../css/override-element-ui.css" scoped>
|
||
|
|
</style>
|