306 lines
9.3 KiB
Vue
306 lines
9.3 KiB
Vue
<template>
|
||
<div class="node-wrap">
|
||
<div class="node-wrap-box" @click="show">
|
||
<div class="title" style="background: #3296fa">
|
||
<send-outlined class="icon" />
|
||
<span>{{ childNode.title }}</span>
|
||
<close-outlined class="close" @click.stop="delNode()" />
|
||
</div>
|
||
<div class="content">
|
||
<span v-if="toText(childNode)">{{ toText(childNode) }}</span>
|
||
<span v-else class="placeholder">请选择人员</span>
|
||
</div>
|
||
</div>
|
||
<add-node v-model="childNode.childNode"></add-node>
|
||
<xn-form-container
|
||
v-model:visible="drawer"
|
||
:destroy-on-close="true"
|
||
:width="700"
|
||
:body-style="{ 'padding-top': '0px' }"
|
||
>
|
||
<template #title>
|
||
<div class="node-wrap-drawer__title">
|
||
<label v-if="!isEditTitle" @click="editTitle"
|
||
>{{ form.title }}<edit-outlined class="node-wrap-drawer-title-edit" />
|
||
</label>
|
||
<el-input
|
||
v-if="isEditTitle"
|
||
ref="nodeTitle"
|
||
v-model:value="form.title"
|
||
allow-clear
|
||
@blur="saveTitle"
|
||
@keyup.enter="saveTitle"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<el-container>
|
||
<el-tabs v-model="activeKey">
|
||
<el-tab-pane name="1" label="抄送配置" lazy>
|
||
<el-form layout="vertical" :model="userTypeForm">
|
||
<div v-show="nodeLegal" style="margin-bottom: 10px">
|
||
<el-alert message="请选择抄送人员！" type="error" />
|
||
</div>
|
||
<div class="mb-2">
|
||
<span class="left-span-label">选择要抄送的人员</span>
|
||
</div>
|
||
<el-radio-group v-model:value="userSelectionType" style="width: 100%">
|
||
<el-row style="padding-bottom: 10px">
|
||
<el-col :span="8" v-for="userSelectionType in userSelectionTypeList" :key="userSelectionType.value">
|
||
<el-radio :value="userSelectionType.value" @click="selectionClick(userSelectionType.value)">
|
||
{{ userSelectionType.label }}
|
||
</el-radio>
|
||
</el-col>
|
||
</el-row>
|
||
</el-radio-group>
|
||
<el-form-item v-if="userSelectionType === 'USER'">
|
||
<el-button class="mt-2" type="primary" size="small" round @click="openSelector">
|
||
<template #icon>
|
||
<search-outlined />
|
||
</template>
|
||
选择
|
||
</el-button>
|
||
<p />
|
||
<prop-tag :tag-list="getTagList('USER')" />
|
||
</el-form-item>
|
||
<el-form-item v-if="recordData.formType === 'DESIGN' && userSelectionType === 'FORM_USER'">
|
||
<div class="mt-2">
|
||
<el-button type="primary" @click="openSelector" size="small">
|
||
<template #icon>
|
||
<search-outlined />
|
||
</template>
|
||
选择
|
||
</el-button>
|
||
</div>
|
||
<div class="mt-2">
|
||
<prop-tag
|
||
v-if="form.properties.participateInfo.length > 0 && form.properties.participateInfo[0].value !== ''"
|
||
:tag-list="form.properties.participateInfo[0]"
|
||
/>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item
|
||
class="mt-2"
|
||
v-if="recordData.formType === 'DEFINE' && userSelectionType === 'FORM_USER'"
|
||
name="formUser"
|
||
:rules="[{ required: true, message: '请输入人员变量' }]"
|
||
>
|
||
<template #label>
|
||
<el-tooltip>
|
||
<template #title>单个字段可以采用：字段名，多个采用：字段名1,字段名2,字段名3</template>
|
||
<question-circle-outlined />
|
||
人员变量：
|
||
</el-tooltip>
|
||
</template>
|
||
<el-input
|
||
style="width: 50%"
|
||
v-model:value="userTypeForm.formUser"
|
||
allow-clear
|
||
@input="customFormUser"
|
||
@keyup.enter="customFormUser"
|
||
placeholder="请输入人员变量"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
<el-tab-pane name="2" label="执行监听" lazy>
|
||
<prop-listener-info
|
||
ref="propExecutionListenerInfoRef"
|
||
v-if="form&&form.properties&&form.properties.executionListenerInfo"
|
||
:listener-value="form.properties.executionListenerInfo"
|
||
:default-listener-list="executionListenerInfo"
|
||
:listener-value-array="executionListenerArray"
|
||
/>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-container>
|
||
<template #footer>
|
||
<el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
|
||
<el-button @click="drawer = false">取消</el-button>
|
||
</template>
|
||
</xn-form-container>
|
||
<form-user-selector ref="formUserSelectorRef" :form-field-list="formFieldListValue" @click="userCallBack" />
|
||
<user-selector-plus
|
||
ref="userselectorPlus"
|
||
:org-tree-api="selectorApiFunction.orgTreeApi"
|
||
:user-page-api="selectorApiFunction.userPageApi"
|
||
:checked-user-list-api="selectorApiFunction.checkedUserListApi"
|
||
:datel-is-converter-flw="true"
|
||
@onBack="userCallBack"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import addNode from './addNode.vue'
|
||
import userSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
|
||
import FormUserSelector from './prop/formUserSelector.vue'
|
||
import propTag from './prop/propTag.vue'
|
||
import { cloneDeep, isEmpty } from 'lodash-es'
|
||
import config from '@/components/XnWorkflow/nodes/config/config'
|
||
import PropListenerInfo from './prop/propListenerInfo.vue'
|
||
|
||
export default {
|
||
components: {
|
||
FormUserSelector,
|
||
addNode,
|
||
userSelectorPlus,
|
||
propTag,
|
||
PropListenerInfo
|
||
},
|
||
props: {
|
||
modelValue: { type: Object, default: () => {} },
|
||
recordData: { type: Object, default: () => {} },
|
||
executionListenerArray: { type: Array, default: () => [] },
|
||
selectorApiFunction: { type: Object, default: () => {} },
|
||
formFieldListValue: { type: Array, default: () => [] }
|
||
},
|
||
data() {
|
||
return {
|
||
childNode: {},
|
||
drawer: false,
|
||
isEditTitle: false,
|
||
activeKey: '1',
|
||
form: {},
|
||
nodeLegal: false,
|
||
userTypeForm: {},
|
||
executionListenerInfo: cloneDeep(config.listener.serviceTaskExecutionListenerInfo),
|
||
// 用户选择类型
|
||
userSelectionType: '',
|
||
userSelectionTypeList: cloneDeep(config.serviceTaskConfig.userSelectionTypeList)
|
||
}
|
||
},
|
||
watch: {
|
||
modelValue() {
|
||
this.childNode = this.modelValue
|
||
}
|
||
},
|
||
mounted() {
|
||
this.childNode = this.modelValue
|
||
},
|
||
methods: {
|
||
show() {
|
||
this.form = {}
|
||
this.form = cloneDeep(this.childNode)
|
||
this.drawer = true
|
||
if (!isEmpty(this.form.properties.participateInfo)) {
|
||
this.userSelectionType = this.form.properties.participateInfo[0].key
|
||
// 如果包含表单内的人
|
||
const formUserObj = this.form.properties.participateInfo.find((f) => f.key === 'FORM_USER')
|
||
if (formUserObj) {
|
||
this.userTypeForm.formUser = formUserObj.value
|
||
}
|
||
} else {
|
||
this.userSelectionType = 'USER'
|
||
this.userTypeForm = {}
|
||
this.nodeLegal = true
|
||
}
|
||
},
|
||
editTitle() {
|
||
this.isEditTitle = true
|
||
this.$nextTick(() => {
|
||
this.$refs.nodeTitle.focus()
|
||
})
|
||
},
|
||
saveTitle() {
|
||
this.isEditTitle = false
|
||
},
|
||
save() {
|
||
if (isEmpty(this.nodeLegal)) {
|
||
this.form.properties.executionListenerInfo = this.$refs.propExecutionListenerInfoRef.selectedListenerList()
|
||
this.form.dataLegal = true
|
||
this.$emit('update:modelValue', this.form)
|
||
this.drawer = false
|
||
}
|
||
},
|
||
delNode() {
|
||
this.$emit('update:modelValue', this.childNode.childNode)
|
||
},
|
||
selectHandle(data) {
|
||
this.$refs.userselectorPlus.showUserPlusModal(data)
|
||
},
|
||
// 选择器回调
|
||
userCallBack(value) {
|
||
if (isEmpty(value.label)) {
|
||
this.nodeLegal = true
|
||
} else {
|
||
this.nodeLegal = false
|
||
}
|
||
if (this.userSelectionType === 'USER') {
|
||
this.form.properties.participateInfo[0] = value
|
||
} else if (this.userSelectionType === 'FORM_USER') {
|
||
this.form.properties.participateInfo = [
|
||
{
|
||
key: 'FORM_USER',
|
||
label: this.userSelectionTypeList.filter((item) => item.value === 'FORM_USER')[0].label,
|
||
value: value.model
|
||
}
|
||
]
|
||
}
|
||
},
|
||
// 获取tag标签的内容
|
||
getTagList(type) {
|
||
const participateInfo = this.form.properties.participateInfo
|
||
if (participateInfo.length > 0) {
|
||
const obj = participateInfo.find((item) => item.key === type)
|
||
if (isEmpty(obj.label)) {
|
||
return undefined
|
||
} else {
|
||
return obj
|
||
}
|
||
} else {
|
||
return undefined
|
||
}
|
||
},
|
||
// 选择抄送人员类型
|
||
selectionClick(value) {
|
||
this.form.properties.participateInfo = []
|
||
this.userSelectionType = value
|
||
this.nodeLegal = true
|
||
},
|
||
// 打开选择器
|
||
openSelector() {
|
||
let data = this.form.properties.participateInfo
|
||
if (this.userSelectionType === 'USER') {
|
||
this.$refs.userselectorPlus.showUserPlusModal(data)
|
||
} else if (this.userSelectionType === 'FORM_USER') {
|
||
this.$refs.formUserSelectorRef.showFormUserModal(data[0])
|
||
}
|
||
},
|
||
// 监听自定义表单人员输入
|
||
customFormUser() {
|
||
if (this.userTypeForm.formUser) {
|
||
this.form.properties.participateInfo = [
|
||
{
|
||
key: 'FORM_USER',
|
||
label: '表单内的人',
|
||
value: this.userTypeForm.formUser
|
||
}
|
||
]
|
||
this.nodeLegal = false
|
||
} else {
|
||
this.nodeLegal = true
|
||
}
|
||
},
|
||
toText(childNode) {
|
||
if (!isEmpty(childNode)) {
|
||
const participateInfo = childNode.properties.participateInfo
|
||
if (participateInfo.length > 0) {
|
||
let resultArray = []
|
||
if (participateInfo[0].label.indexOf(',') !== -1) {
|
||
resultArray = participateInfo[0].label.split(',')
|
||
} else {
|
||
resultArray.push(participateInfo[0].label)
|
||
}
|
||
return resultArray.toString()
|
||
} else {
|
||
// return '未选择抄送人';
|
||
return false
|
||
}
|
||
} else {
|
||
return false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|