admin-sjzx/src/components/XnWorkflow/nodes/serviceTask.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>