<script lang="ts" setup name="NodeWrap">
import { onMounted, ref } from 'vue'
import addNode from './addNode.vue'
// import cptPopver from './cptPopver'
const props = defineProps({
nodeConfig: {
type: Object,
default: () => ({}),
},
dataFields: {
type: Array,
default: () => ([]),
} as any,
isTried: {
type: Boolean,
},
})
// import {
// companyRoles, //树状app角色
// companyUsersList, //用户列表
// } from '@/api/company'
const emits = defineEmits(['update:nodeConfig'])
const placeholderList = ['发起人', '审核人', '抄送人']
const directorLevelList = ref([{
value: '1',
label: '第一级主管',
},
{
value: '2',
label: '第二级主管',
},
])
// 审批弹框字段Obj
const approverConfig = ref({}) as any
const searchUser = ref('')
const directorLevel = ref('1') // 主管层级
const nodeUser = ref('') // 审批人（stringList）
const approverDrawer = ref(false) // 审批弹框
const defaultApprovalDrawer = ref(false) // 默认条件弹框
const conditionDrawer = ref(false) // 条件弹框
// 条件弹框字段
const conditionsConfig = ref({}) as any
const conditionConfig = ref({}) // 条件弹框item
const useroptions = ref([
{ name: 'admin', id: '1', userName: 'admin' },
{ name: 'Anna', id: '2', userName: 'Anna' },
])
const userInfo = ref({
data: [],
total: 0,
})
const examineModeList = ref([{
value: '1',
label: '会签审批',
mark: '需要所有审批人同意，该审批节点才通过',
},
{
value: '2',
label: '或签审批',
mark: '任意一名审批人同意，该审批节点即通过',
},
{
value: '3',
label: '逐级审批',
mark: '按人事部门层级逐级依次审批后，该审批节点才通过',
},
])
const operatorList = ['=', '!=', '>', '>=', '<', '<=']
const isInputList = ref([])
const isInput = ref(false)
const hasFlag = ref(false)
const conditionTip = ref('')
const bPriorityLevel = ref('')
const setTypeLabel = ref('')
const conditionList = ref([])
const pager = ref({
current: 1,
size: 10,
})
const selectionList = ref([]) // 表格选中id
const userOriginList = ref([])
watch(() => approverDrawer.value, (newValue) => {
if (!newValue) {
defaultApprovalDrawer.value = false
hasFlag.value = false
conditionTip.value = ''
}
})
watch(() => approverConfig.value, (newValue: any) => {
if (newValue.nodeUserType.type === 'manager') {
setTypeLabel.value = '部门主管：'
}
if (newValue.nodeUserType.type === 'role' && newValue.type === 1) {
setTypeLabel.value = '审批角色：'
}
if (newValue.nodeUserType.type === 'role' && newValue.type === 2) {
setTypeLabel.value = '抄送角色：'
}
if (newValue.nodeUserType.type === 'user') {
setTypeLabel.value = '指定用户：'
}
setTypeLabel.value = ''
})
const remoteMethod = (query: any) => {
searchUser.value = query
if (query !== '') {
if (approverConfig.value.nodeUserType.type === 'user') {
// this.companyUsersList();
}
}
else {
useroptions.value = userOriginList.value
}
}
const selectionChange = (val: any) => {
selectionList.value = val.map((item: any) => item.id)
}
const saveUserInfo = () => {
approverConfig.value.nodeUserType.valueList = selectionList.value
// this.dialogFlag = false;
}
// 删除条件组和条件
const removeCondition = (conditonflag: string | number, index: number | string, ind: number | string) => {
if (conditonflag === 'group') {
approverConfig.value.conditionList.splice(index, 1)
return
}
approverConfig.value.conditionList[
index
].conditionChildrenNodes.splice(ind, 1)
}
// 审批选择节点
const setExamineModeRadio = (val: string) => {
approverConfig.value.nodeUserType.value = ''
approverConfig.value.nodeUserType.valueList = []
if (val === '3') {
approverConfig.value.nodeUserType.type = 'manager'
}
}
// 添加条件组
const addConditionGroup = (flag: string | number, item: any) => {
if (flag === '1') {
item.conditionChildrenNodes.push({
conditionOperator: '',
leftFileds: '',
centerFileds: '',
rightFileds: '',
})
return
}
approverConfig.value.conditionList.push({
conditionChildrenNodes: [],
conditionGroupOperator: '',
})
}
// 节点类型
const setTypeRadio = (val: string) => {
if (approverConfig.value.nodeUserType.valueList.length > 0) {
approverConfig.value.nodeUserType.valueList = ''
}
// this.approverConfig.nodeUserType.value = ''
if (val === 'role') {
// this.companyRoles()
return
}
if (val === 'user') {
// this.companyUsersList()
return
}
if (val === 'manager') {
approverConfig.value.nodeUserType.value = '部门主管'
}
}
// 修改节点name
const editNodename = () => {
approverConfig.value.titleInputFlag = true
}
const nodeNameBlur = () => {
approverConfig.value.titleInputFlag = false
}
// 条件显示
const conditionStr = (item: any, index: number) => {
const {
conditionList, // 条件组
conditionString, // 条件数据
conditionStringName, // 条件显示
} = item
const arr = [true] // 判断条件是否有值
if (conditionList.length === 0 || conditionString === '') {
if (item.nodeName === '默认') {
return '其他情况'
}
return '请设置条件'
}
if (conditionList.length !== 0) {
if (conditionList.length === 1) {
// 当条件组为一个
conditionList[0].conditionChildrenNodes
&& conditionList[0].conditionChildrenNodes.forEach(
(item: any, index: number) => {
if (item.leftFileds == '' || item.centerFileds == '' || item.rightFileds == '') {
arr.push(false)
}
if (index !== 0 && item.conditionOperator == '') {
arr.push(false)
}
},
)
}
else {
// 当条件组为多个（判断是否有运算符）
conditionList.forEach((item: any, index: number) => {
if (index != conditionList.length - 1) {
// 条件组不为最后一个.校验是否有条件运算符
if (item.conditionGroupOperator == '') { arr.push(false) }
}
if (
item.conditionChildrenNodes
&& item.conditionChildrenNodes.length > 0
) {
item.conditionChildrenNodes.forEach((it: any, ind: number) => {
if (
it.leftFileds === ''
|| it.centerFileds === ''
|| it.rightFileds == ''
) { arr.push(false) }
if (ind !== 0 && it.conditionOperator == '') { arr.push(false) }
})
}
else if (
item.conditionChildrenNodes
&& item.conditionChildrenNodes.length == 0
) {
arr.push(false)
}
})
}
if (arr.includes(false)) {
return '请设置条件'
}
}
return conditionStringName
}
const dealStr = (str: string, obj: any) => {
const arr: any = []
const list = str.split(',')
for (const elem in obj) {
// list.map((item) => {
// if (item == elem) {
// arr.push(obj[elem].value)
// }
// })
list.forEach((item) => {
if (item == elem) {
arr.push(obj[elem].value)
}
})
}
return arr.join('或')
}
// 审批人抄送人显示和校验
const setApproverStr = (nodeConfig: any) => {
let type = '会签'
let role = '部门主管'
if (nodeConfig.nodeUserType.type === 'role') { role = '角色' }
if (nodeConfig.nodeUserType.type === 'user') { role = '用户' }
if (nodeConfig.nodeUserType.value == '') { return '' }
if (nodeConfig.type === 1) {
// 审批
if (nodeConfig.examineMode === '1') { type = '会签' }
if (nodeConfig.examineMode === '2') { type = '或签' }
if (nodeConfig.examineMode === '3') { type = '逐级审批' }
if (nodeConfig.nodeUserType.type === 'manager' && nodeConfig.examineMode === '3') {
if (nodeConfig.nodeUserType.value.includes('m')) {
return `由发起人向上的${nodeConfig.nodeUserType.valueName}审批`
}
else {
return `由${nodeConfig.nodeUserType.valueName}审批`
}
}
if (nodeConfig.nodeUserType.type === 'manager' && nodeConfig.examineMode !== '3') {
return `由${role}${type}`
}
return `由${role}：${nodeConfig.nodeUserType.valueName}${type}`
}
if (nodeConfig.type === 2) {
// 抄送
if (nodeConfig.nodeUserType.value == '') { return '' }
if (nodeConfig.nodeUserType.type === 'manager') {
// 主管
if (nodeConfig.nodeUserType.value.includes('m')) {
return `给发起人向上的${nodeConfig.nodeUserType.valueName}抄送`
}
else {
return `给${nodeConfig.nodeUserType.valueName}抄送`
}
}
// 角色、用户
return `给${role}：${nodeConfig.nodeUserType.valueName}抄送`
}
}
// 保存条件设置
const saveCondition = () => {
approverDrawer.value = false
let conditionString = '' // 后端要的数据
let conditionStringName = '' // 前端显示
// 条件循环设置
if (approverConfig.value.conditionList.length > 0) {
approverConfig.value.conditionList.forEach((item: any, indx: number) => {
if (item.conditionChildrenNodes && item.conditionChildrenNodes.length > 0) {
item.conditionChildrenNodes.forEach((it: any, ind: number) => {
conditionString = conditionString + it.conditionOperator + it.leftFileds + it.centerFileds + it.rightFileds
conditionStringName = conditionStringName + it.conditionOperator + it.leftFiledsName + it.centerFileds + it.rightFileds
})
}
conditionString = conditionString + item.conditionGroupOperator
conditionStringName = conditionStringName + item.conditionGroupOperator
})
}
approverConfig.value.conditionString = conditionString
approverConfig.value.conditionStringName = conditionStringName
for (let i = 0; i < conditionsConfig.value.conditionNodes.length; i++) {
conditionsConfig.value.conditionNodes[i].error
= conditionStr(conditionsConfig.value.conditionNodes[i], i) == '请设置条件'
}
// 区分添加节点后自动出现弹框及点击出现弹框
if (hasFlag.value) {
// 先注释-----------------------------
// props.nodeConfig.childNode = conditionsConfig.value
emits('update:nodeConfig', props.nodeConfig)
}
else {
emits('update:nodeConfig', conditionsConfig.value)
}
}
// 保存弹框设置
const saveApprover = () => {
if (approverConfig.value.type === 3) {
saveCondition()
return
}
const list = approverConfig.value.nodeUserType.valueList
const nameList: any = [] // 下拉框:审批角色是name，指定用户是userName
if (list.length > 0) {
useroptions.value.forEach((item) => {
list.forEach((i: string | number) => {
if (approverConfig.value.nodeUserType.type === 'role') {
if (item.id === i) { nameList.push(item.name) }
}
if (approverConfig.value.nodeUserType.type === 'user') {
if (item.id === i) { nameList.push(item.userName) }
}
})
})
approverConfig.value.nodeUserType.value = list.join(',')
approverConfig.value.nodeUserType.valueName = nameList.join(',')
}
else if (approverConfig.value.nodeUserType.type !== 'manager') {
approverConfig.value.nodeUserType.value = ''
approverConfig.value.nodeUserType.valueName = ''
}
if (approverConfig.value.nodeUserType.type === 'manager') {
// 抄送 、审批人逐级审批
if (approverConfig.value.type === 2 || approverConfig.value.type === 1) {
let num = approverConfig.value.nodeUserType.value
if (num.includes('m')) {
num = num.substring(2)
}
directorLevelList.value.forEach((item, index: number) => {
if (index === num - 1) { approverConfig.value.nodeUserType.valueName = item.label }
})
// 默认值
if (approverConfig.value.type === 1 && approverConfig.value.nodeUserType.type == 'manager' && !approverConfig.value.nodeUserType.value) {
approverConfig.value.nodeUserType.value = '主管'
}
}
else {
approverConfig.value.nodeUserType.value = '主管'
}
}
approverConfig.value.error = setApproverStr(approverConfig.value) === ''
// 通过hasFlag区分添加节点后自动出现弹框及点击出现弹框
if (hasFlag.value) {
if (props.nodeConfig.conditionNodes && props.nodeConfig.conditionNodes.length > 0 && conditionTip.value) { // 条件分支
props.nodeConfig.conditionNodes.forEach((element: any) => {
if (element.childNode && (!element.childNode.nodeUserType.value && element.childNode.nodeName === approverConfig.value.nodeName)) { // 条件分支节点赋值
element.childNode = approverConfig.value
}
})
}
// 先注释-------------------
// else {
// props.nodeConfig.childNode = approverConfig.value
// }
emits('update:nodeConfig', props.nodeConfig)
}
else {
emits('update:nodeConfig', approverConfig.value)
}
approverDrawer.value = false
}
// 条件字段显示name
const dataFieldsChange = (it: any) => {
props.dataFields.forEach((item: any) => {
if (item.key === it.leftFileds) {
it.leftFiledsName = item.name
it.leftFiledsType = item.type
}
})
}
// 删除节点
const delNode = () => {
emits('update:nodeConfig', props.nodeConfig.childNode)
}
// 添加条件
const addTerm = () => {
const len = props.nodeConfig.conditionNodes.length
// --------------------------------------------
// props.nodeConfig.conditionNodes.push({
// nodeName: `条件${len}`,
// type: 3,
// priorityLevel: len + 1,
// conditionList: [],
// childNode: null,
// })
// for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
// props.nodeConfig.conditionNodes[i].error
// = conditionStr(props.nodeConfig.conditionNodes[i], i)
// == '请设置条件'
// && i != props.nodeConfig.conditionNodes.length - 1
// }
// -------------------------------------------------
emits('update:nodeConfig', props.nodeConfig)
}
const reData = (data: any, addData: any) => {
if (!data.childNode) {
data.childNode = addData
}
else {
reData(data.childNode, addData)
}
}
// 删除条件
const delTerm = (index: number | string) => {
// ---------------------------------------------------
// props.nodeConfig.conditionNodes.splice(index, 1)
// for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
// props.nodeConfig.conditionNodes[i].error
// = conditionStr(props.nodeConfig.conditionNodes[i], i)
// == '请设置条件'
// && i != props.nodeConfig.conditionNodes.length - 1
// }
// ------------------------------------------------------------
emits('update:nodeConfig', props.nodeConfig)
if (props.nodeConfig.conditionNodes.length == 1) {
if (props.nodeConfig.childNode) {
if (props.nodeConfig.conditionNodes[0].childNode) {
reData(
props.nodeConfig.conditionNodes[0].childNode,
props.nodeConfig.childNode,
)
}
// ------------------------------------------------------
// else {
// props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode
// }
// ------------------------------------------------------
}
emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
}
}
// 打开弹框
const setPerson = (priorityLevel: any, item: any, data: any, tip: string) => {
approverDrawer.value = true
// 默认条件
if (item && item.nodeName === '默认') {
defaultApprovalDrawer.value = true
}
else {
defaultApprovalDrawer.value = false
}
if (tip) {
conditionTip.value = tip
}
if (data) { // 添加节点自动出现弹框传值
hasFlag.value = true
// 条件
if (priorityLevel == 1) {
bPriorityLevel.value = priorityLevel
conditionsConfig.value = JSON.parse(JSON.stringify(data))
approverConfig.value = conditionsConfig.value.conditionNodes[priorityLevel - 1]
return
}
// 审批人、抄送人
approverConfig.value = JSON.parse(JSON.stringify(data))
}
else { // 点击出现弹框
// 条件
const { type } = props.nodeConfig
if (type == 4) {
bPriorityLevel.value = priorityLevel
conditionsConfig.value = JSON.parse(JSON.stringify(props.nodeConfig))
approverConfig.value = conditionsConfig.value.conditionNodes[priorityLevel - 1]
return
}
// 审批人、抄送人
approverConfig.value = JSON.parse(JSON.stringify(props.nodeConfig))
}
if (approverConfig.value.nodeUserType && approverConfig.value.nodeUserType.type === 'role') {
// this.companyRoles()
return
}
if (approverConfig.value.nodeUserType && approverConfig.value.nodeUserType.type === 'user') {
// this.companyUsersList()
}
}
// 获取角色
// companyRoles() {
// companyRoles(this.$store.state.userInfo.companyId).then((res) => {
// res.data.forEach((item) => {
// if (item.application.appNum === this.$route.query.appNum) {
// this.useroptions = item.roleInfos
// }
// })
// })
// },
// 获取用户(有效)
// async companyUsersList() {
// let params = {
// companyId: this.$store.state.userInfo.companyId,
// // current: this.pager.current,
// size: 20000,
// status: "enable",
// nameLike: this.searchUser
// // ...this.filters //搜索条件
// }
// let res = await companyUsersList(params);
// if (res.code === '200') {
// res.data.records.forEach((item) => {
// item.name = item.nickName ? item.nickName : item.userName
// })
// this.useroptions = res.data.records;
// this.userInfo.data = res.data.records;
// this.userInfo.total = res.data.total;
// return res.data.records;
// }
// },
// -------------------------------------------------------------------------
// const arrTransfer = (index: number, type = 1) => {
// // 向左-1,向右1
// props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(index + type, 1, props.nodeConfig.conditionNodes[index])[0]
// props.nodeConfig.conditionNodes.map((item: any, index: number) => {
// item.priorityLevel = index + 1
// })
// for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
// props.nodeConfig.conditionNodes[i].error
// = conditionStr(props.nodeConfig.conditionNodes[i], i)
// == '请设置条件'
// && i != props.nodeConfig.conditionNodes.length - 1
// }
// emits('update:nodeConfig', props.nodeConfig)
// }
// -------------------------------------------------------------------------
onMounted(async () => {
if (props.nodeConfig.type == 1) {
// -------------------------------------------------
// props.nodeConfig.error = setApproverStr(props.nodeConfig) == ''
// -------------------------------------------------
}
else if (props.nodeConfig.type == 2) {
// -------------------------------------------------
// props.nodeConfig.error = setApproverStr(props.nodeConfig) === ''
// -------------------------------------------------
}
else if (props.nodeConfig.type == 4) {
// -------------------------------------------------
// for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
// props.nodeConfig.conditionNodes[i].error
// = conditionStr(props.nodeConfig.conditionNodes[i], i)
// == '请设置条件'
// }
// -------------------------------------------------
}
})
</script>
<template>
<div class="nodeflow-components">
<div v-if="nodeConfig.type !== 4" class="node-wrap">
<div v-if="nodeConfig.type && nodeConfig.type !== 0" class="node-wrap-box" :class=" (nodeConfig.type === 0 ? 'start-node ' : '') + (isTried && nodeConfig.error ? 'active error' : '') ">
<div @click="setPerson">
<div
class="title" :style="
`background: rgb(${['87, 106, 149', '230, 162, 60', '72, 128, 255'][nodeConfig.type]});` "
>
<span class="editable-title">{{ nodeConfig.nodeName }}</span>
<i v-if="nodeConfig.type !== 0" class="el-icon-close close" @click.stop="delNode()" />
</div>
<div class="content">
<div v-if="nodeConfig.type === 1" class="text">
<span v-if="setApproverStr(nodeConfig) === ''" class="placeholder">
请选择{{ placeholderList[nodeConfig.type] }}
</span>
{{ setApproverStr(nodeConfig) }}
</div>
<div v-if="nodeConfig.type === 2" class="text">
<span v-if="setApproverStr(nodeConfig) === ''" class="placeholder">
请选择{{ placeholderList[nodeConfig.type] }}
</span>
{{ setApproverStr(nodeConfig) }}
</div>
<i class="el-icon-arrow-right arrow" />
</div>
<div v-if="isTried && nodeConfig.error" class="error_tip">
<i class="el-icon-warning" style="color: rgb(242 86 67);" />
</div>
</div>
</div>
<button>+</button>
<!-- <addNode :childNodeP.sync="nodeConfig.childNode"></addNode> -->
</div>
<div v-if="nodeConfig.type === 4" class="branch-wrap">
<div class="branch-box-wrap">
<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' : '' " @click="setPerson(item.priorityLevel, item, '', '')">
<div v-if="index !== 0" class="sort-left" @click.stop="arrTransfer(index, -1)">
<
</div>
<div class="title-wrapper">
<span class="editable-title">{{ item.nodeName }}</span>
<span class="priority-title">优先级{{ item.priorityLevel }}</span>
<i class="el-icon-close close" @click.stop="delTerm(index)" />
</div>
<div v-if=" index !== nodeConfig.conditionNodes .length - 1 " class="sort-right" @click.stop="arrTransfer(index)">
>
</div>
<div class="content">
{{ conditionStr(item, index) }}
</div>
<div v-if="isTried && item.error" class="error_tip">
<i class="el-icon-warning" style="color: rgb(242 86 67);" />
</div>
</div>
<add-node v-model:child-node-p="item.childNode" tip="条件" />
</div>
</div>
<node-wrap v-if="item.childNode && item.childNode" v-model:node-config="item.childNode" :is-tried="isTried" :data-fields="dataFields" />
<div v-if="index === 0" class="top-left-cover-line" />
<div v-if="index === 0" class="bottom-left-cover-line" />
<div v-if="index === nodeConfig.conditionNodes.length - 1" class="top-right-cover-line" />
<div v-if="index === nodeConfig.conditionNodes.length - 1" class="bottom-right-cover-line" />
</div>
</div>
<!-- <add-node v-model:child-node-p="nodeConfig.childNode" /> -->
</div>
</div>
<node-wrap v-if="nodeConfig.childNode && nodeConfig.childNode" :node-config="nodeConfig.childNode" :is-tried="isTried" :data-fields="dataFields" />
<el-drawer v-model="approverDrawer" custom-class="set_promoter" append-to-body direction="rtl" size="560px" :before-close="saveApprover">
<!-- <div slot="title" class="title flex"> -->
<div class="title flex">
<span v-if="!approverConfig.titleInputFlag">{{ approverConfig.nodeName }}</span>
<el-input v-else v-model="approverConfig.nodeName" maxlength="20" autofocus placeholder="" @blur="nodeNameBlur" />
<!-- 默认条件不需编辑 -->
<i v-if="!defaultApprovalDrawer" class="iconfont icon-icon_edit1 mainColor" @click="editNodename" />
</div>
<div>
<div v-if="approverConfig.type === 1" class="drawer-content">
<el-tabs :is-hide-nav="true">
<el-tab-pane label="节点类型">
<el-radio-group v-model="approverConfig.examineMode" @change="setExamineModeRadio">
<el-radio v-for="item in examineModeList" :key="item.value" :label="item.value">
{{ item.label }}
<span class="mark">({{ item.mark }})</span>
</el-radio>
</el-radio-group>
</el-tab-pane>
<el-tab-pane label="审批人类型">
<div v-if="approverConfig.examineMode === '3'">
<p style="margin-bottom: 16px;">
连续多级部门主管<span style="color: #828282;margin-left: 8px;">(按照组织架构，发起人<span style="color: #4880ff;">向上的各级主管</span>依次审批)</span>
</p>
<el-radio-group v-model="approverConfig.nodeUserType.value">
<el-radio :label="`m-${directorLevel}`">
<span style="margin-right: 8px;">直到发起人向上的</span>
<el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择">
<el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
</el-select>
</el-radio>
<cpt-popver :type="true" />
<el-radio :label="directorLevel">
<span style="margin-right: 8px;">直到</span>
<el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择">
<el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
</el-select>
</el-radio>
<cpt-popver />
</el-radio-group>
</div>
<div v-else>
<el-radio-group v-model="approverConfig.nodeUserType.type" @change="setTypeRadio">
<el-radio label="manager">
部门主管
</el-radio>
<el-radio label="role">
审批角色
</el-radio>
<el-radio label="user">
指定用户
</el-radio>
</el-radio-group>
<div v-if=" approverConfig.nodeUserType.type && approverConfig.nodeUserType.type !== 'manager' ">
<el-form ref="form" label-width="90px">
<el-form-item :label="setTypeLabel">
<div v-if="approverConfig.nodeUserType.type === 'user'">
<el-select v-model="approverConfig.nodeUserType.valueList" remote :remote-method="remoteMethod" filterable multiple placeholder="请选择">
<el-option v-for="item in useroptions" :key="item.id" :label="item.userName" :value="item.id" />
</el-select>
</div>
<div v-if="approverConfig.nodeUserType.type === 'role'">
<el-select v-model="approverConfig.nodeUserType.valueList" filterable multiple placeholder="请选择">
<el-option v-for="item in useroptions" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
</el-form-item>
</el-form>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div v-if="approverConfig.type === 2" class="drawer-content">
<el-tabs :is-hide-nav="true">
<el-tab-pane label="抄送人类型">
<div>
<el-radio-group v-model="approverConfig.nodeUserType.type" @change="setTypeRadio">
<el-radio label="manager">
连续多级部门主管
</el-radio>
<el-radio label="role">
抄送角色
</el-radio>
<el-radio label="user">
指定用户
</el-radio>
</el-radio-group>
<div v-if=" approverConfig.nodeUserType.type !== 'manager' ">
<el-form v-if="approverConfig.nodeUserType.type" ref="form" label-width="90px">
<el-form-item :label="setTypeLabel">
<div v-if="approverConfig.nodeUserType.type === 'user'">
<el-select v-model="approverConfig.nodeUserType.valueList" remote :remote-method="remoteMethod" filterable multiple placeholder="请选择">
<el-option v-for="item in useroptions" :key="item.id" :label="item.userName" :value="item.id" />
</el-select>
</div>
<div v-if="approverConfig.nodeUserType.type === 'role'">
<el-select v-model="approverConfig.nodeUserType.valueList" filterable multiple placeholder="请选择">
<el-option v-for="item in useroptions" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
</el-form-item>
</el-form>
</div>
<div v-else>
<p style="margin-bottom: 16px;font-size: 14px;">
按组织架构，发起人<span style="color: #4880ff;">向上的各级主管</span>依次抄送
</p>
<el-radio-group v-model=" approverConfig.nodeUserType.value ">
<el-radio :label="`m-${directorLevel}`">
<span style="margin-right: 8px;">直到发起人向上的</span>
<el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择" @change=" approverConfig.nodeUserType.value = `m-${directorLevel}` ">
<el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
</el-select>
</el-radio>
<cpt-popver :type="true" />
<el-radio :label="directorLevel">
<span style="margin-right: 8px;">直到</span>
<el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择" @change=" approverConfig.nodeUserType.value = directorLevel ">
<el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
</el-select>
</el-radio>
<cpt-popver />
</el-radio-group>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div v-if="approverConfig.type === 3" class="drawer-content drawer-content-condition">
<!-- 默认条件 -->
<div v-if="defaultApprovalDrawer" class="default-style">
其他情况
</div>
<div v-else>
<div v-for="(item, index) in approverConfig.conditionList" :key="index">
<div class="condition-conent-group">
<div class="condition-group-title flex">
<div class="dang-style">
条件组
</div>
<div>
<i class="remove el-icon-delete" @click="removeCondition('group', index, 0)" />
</div>
</div>
<div v-for="(it, ind) in item.conditionChildrenNodes" :key="ind" class="condition-group-select">
<div class="mg-bot-10">
<div v-if="ind === 0" class="flex flex-style">
<span class="dang-style">当</span>
<i class="remove el-icon-delete" @click=" removeCondition('oneCondition', index, ind) " />
</div>
<div v-else class="flex">
<el-select v-model="it.conditionOperator" style="width: 110px;" placeholder="请选择">
<el-option label="且" value="&&" />
<el-option label="或" value="||" />
</el-select>
<i class="remove iconfont icon-icon_viewpicture_delete" @click=" removeCondition('oneCondition', index, ind) " />
</div>
</div>
<el-row :gutter="5" class="mg-bot-10">
<el-col :span="8">
<el-select v-model="it.leftFileds" placeholder="请选择" @change="dataFieldsChange(it)">
<el-option v-for="item in dataFields" :key="item.key" :label="item.name" :value="item.key" />
</el-select>
</el-col>
<el-col :span="5">
<el-select v-model="it.centerFileds" placeholder="请选择">
<el-option v-for="item in operatorList" :key="item" :label="item" :value="item" />
</el-select>
</el-col>
<el-col :span="10">
<el-date-picker v-if="it.leftFiledsType === 'date'" v-model="it.rightFileds" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
<el-input v-else v-model="it.rightFileds" placeholder="请输入" />
</el-col>
</el-row>
</div>
<div class="conditionbtn" @click="addConditionGroup('1', item)">
<el-button type="">
<i class="el-button-suffix el-icon-plus" />添加条件
</el-button>
</div>
</div>
<div v-if=" index === 0 && approverConfig.conditionList.length > 1 " class="flex" style="height: 54px;padding: 0 24px;">
<el-select v-model="item.conditionGroupOperator" style="width: 110px;margin-top: 7px;" placeholder="请选择">
<el-option label="且" value="&&" />
<el-option label="或" value="||" />
</el-select>
</div>
</div>
<div class="conditionbtn">
<el-button type="" @click="addConditionGroup('0', {})">
<i class="el-button-suffix el-icon-plus" />添加条件组
</el-button>
</div>
</div>
</div>
</div>
<div class="set_promoter_footer flex">
<!-- 默认条件弹框只展示关闭按钮 -->
<div v-if="defaultApprovalDrawer">
<el-button type="primary" @click="approverDrawer = false">
关闭
</el-button>
</div>
<div v-else class="flex">
<el-button type="primary" @click="saveApprover">
确定
</el-button>
<el-button @click="approverDrawer = false">
取消
</el-button>
</div>
</div>
</el-drawer>
</div>
</template>
<style lang="scss">
.el-dialog__title {
font-size: 18px !important;
font-weight: 600 !important;
}
.default-style {
margin-left: 25px;
}
.search-style {
label {
width: 50px !important;
}
.el-row {
padding-right: 0 !important;
}
.el-form-item__content {
margin-left: 50px !important;
}
}
.flex-style {
display: flex;
justify-content: space-between;
}
.dang-style {
font-size: 14px;
}
.dialog-style {
z-index: 99999 !important;
background: rgb(0 0 0 / 50%);
}
.v-modal {
background: none !important;
z-index: -1 !important;
}
.set_promoter {
.el-drawer__header {
margin-bottom: 0;
padding: 0 24px;
border-bottom: 1px solid #ebebeb;
.title {
height: 64px;
line-height: 64px;
font-size: 20px;
color: #333;
justify-content: flex-start;
i {
margin-left: 8px;
font-size: 30px;
}
}
}
.el-drawer__body {
overflow-y: auto;
max-height: calc(100% - 64px);
padding-bottom: 80px;
}
.drawer-content {
padding: 24px;
.el-radio {
margin-bottom: 16px;
.mark {
color: #828282;
}
&.is-checked {
.mark {
color: #4880ff;
}
}
&:last-child {
margin-bottom: 0;
}
}
}
.drawer-content-condition {
padding: 24px 0;
.condition-conent-group {
border-bottom: solid 1px #ebebeb;
padding-bottom: 20px;
.condition-group-title {
padding: 0 24px;
background: #f7f8fa;
height: 48px;
border-top: solid 1px #ebebeb;
border-bottom: solid 1px #ebebeb;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.condition-group-select {
padding: 0 24px;
}
.remove {
color: #828282;
&:hover {
cursor: pointer;
color: #4880ff;
}
}
.mg-bot-10 {
margin-bottom: 10px;
}
.conditionbtn {
.el-button {
border: 1px dashed #4880ff;
width: 110px;
}
}
}
.conditionbtn {
padding: 0 24px;
margin-top: 26px;
.el-button {
border: solid 1px #4880ff;
color: #4880ff;
width: 123px;
}
}
}
.set_promoter_footer {
height: 80px;
position: absolute;
bottom: 0;
left: 0;
padding: 24px;
justify-content: flex-end;
background: #fff;
width: 100%;
border-top: 1px solid #ebebeb;
z-index: 2;
}
.icon-icon_explain {
color: #bfbfbf;
}
}
.error_tip {
position: absolute;
top: 36px;
right: 0;
transform: translate(150%, 0);
i {
font-size: 24px;
}
}
.add-node-popover-body {
display: flex;
}
.el-drawer:focus,
.el-drawer__close-btn:focus {
outline: none;
}
</style>
