From eeef608ccd8c77c840c142343b84f2ce5c29dff4 Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Thu, 9 May 2024 13:46:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BF=AE=E6=94=B9=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Selector/userSelectorPlus.vue  |   1 +
 .../XnWorkflow/nodes/components/navTitle.vue  |  22 +
 .../XnWorkflow/nodes/exclusiveGateway.vue     |  12 +-
 .../XnWorkflow/nodes/parallelGateway.vue      |   2 +-
 .../nodes/prop/formUserSelector.vue           | 201 ++---
 .../XnWorkflow/nodes/serviceTask.vue          | 693 ++++++++++--------
 src/components/formContainer/index.vue        |   4 +-
 src/styles/element.scss                       |   4 +
 8 files changed, 535 insertions(+), 404 deletions(-)
 create mode 100644 src/components/XnWorkflow/nodes/components/navTitle.vue

diff --git a/src/components/Selector/userSelectorPlus.vue b/src/components/Selector/userSelectorPlus.vue
index 8aa17464..0e0e706e 100644
--- a/src/components/Selector/userSelectorPlus.vue
+++ b/src/components/Selector/userSelectorPlus.vue
@@ -7,6 +7,7 @@
 		:destroy-on-close="true"
 		@ok="handleOk"
 		@cancel="handleClose"
+		:append-to-body="true"
 	>
 		<el-row :gutter="10">
 			<el-col :span="7">
diff --git a/src/components/XnWorkflow/nodes/components/navTitle.vue b/src/components/XnWorkflow/nodes/components/navTitle.vue
new file mode 100644
index 00000000..bb1c5d78
--- /dev/null
+++ b/src/components/XnWorkflow/nodes/components/navTitle.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="nav_title" :style="{ borderLeft: `4px solid ${borderColor}` }">
+        <p><slot name="nav_name"></slot></p>
+    </div>
+</template>
+<script setup>
+import { useConfig } from '@/stores/config'
+import { ref } from 'vue'
+const configStore = useConfig()
+const borderColor =configStore.getColorVal('elementUiPrimary')
+</script>
+<style lang="scss" scoped>
+.nav_title {
+    padding-left: 8px;
+    margin-top: 10px;
+    p {
+        font-size: 15px;
+        color: #212121;
+        font-weight: 600;
+    }
+}
+</style>
diff --git a/src/components/XnWorkflow/nodes/exclusiveGateway.vue b/src/components/XnWorkflow/nodes/exclusiveGateway.vue
index ac1240bc..b8a79993 100644
--- a/src/components/XnWorkflow/nodes/exclusiveGateway.vue
+++ b/src/components/XnWorkflow/nodes/exclusiveGateway.vue
@@ -42,8 +42,9 @@
             <add-node v-model="childNode.childNode" :parent-data="childNode" />
         </div>
 
-        <xn-form-container
-            v-model:visible="drawer"
+        <formContainer
+            v-model="drawer"
+            :visible="visible"
             :destroy-on-close="true"
             :width="700"
             :body-style="{ 'padding-top': '0px' }"
@@ -64,7 +65,7 @@
                     />
                 </div>
             </template>
-            <el-layout-content>
+            <div>
                 <el-tabs v-model="activeKey">
                     <el-tab-pane name="1" label="条件配置" lazy>
                         <el-form layout="vertical">
@@ -199,12 +200,12 @@
                         />
                     </el-tab-pane>
                 </el-tabs>
-            </el-layout-content>
+            </div>
             <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>
+        </formContainer>
     </div>
 </template>
 
@@ -503,6 +504,7 @@ import tool from '@/utils/tool'
 import AddNode from './addNode.vue'
 import { ref, watch, onMounted } from 'vue'
 import PropListenerInfo from './prop/propListenerInfo.vue'
+import formContainer from '@/components/formContainer/index.vue';
 const props = defineProps({
     modelValue: { type: Object, default: () => {} },
     formFieldListValue: { type: Array, default: () => [] },
diff --git a/src/components/XnWorkflow/nodes/parallelGateway.vue b/src/components/XnWorkflow/nodes/parallelGateway.vue
index 17b24487..dceb7af2 100644
--- a/src/components/XnWorkflow/nodes/parallelGateway.vue
+++ b/src/components/XnWorkflow/nodes/parallelGateway.vue
@@ -2,7 +2,7 @@
 	<div class="branch-wrap">
 		<div class="branch-box-wrap">
 			<div class="branch-box">
-				<a-button class="add-branch" type="primary" shape="round" @click="addTerm">添加并行</a-button>
+				<el-button class="add-branch" type="primary" shape="round" @click="addTerm">添加并行</el-button>
 				<div v-for="(item, index) in childNode.conditionNodeList" :key="index" class="col-box">
 					<div class="condition-node">
 						<div class="condition-node-box">
diff --git a/src/components/XnWorkflow/nodes/prop/formUserSelector.vue b/src/components/XnWorkflow/nodes/prop/formUserSelector.vue
index 9b023312..3d327426 100644
--- a/src/components/XnWorkflow/nodes/prop/formUserSelector.vue
+++ b/src/components/XnWorkflow/nodes/prop/formUserSelector.vue
@@ -1,108 +1,117 @@
 <template>
-	<el-dialog
-		v-model="visible"
-		title="表单人员选择"
-		:mask-closable="false"
-		:destroy-on-close="true"
-		:width="600"
-		@ok="handleOk"
-		@cancel="handleCancel"
-	>
-		<div class="form-user-table">
-			<el-table
-				ref="table"
-				:columns="columns"
-				:datel-source="dataSource"
-				:row-key="(record) => record.model"
-				:expand-row-by-click="true"
-				:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
-				:pagination="false"
-				size="small"
-				bordered
-			/>
-		</div>
-	</el-dialog>
+    <el-dialog
+        v-model="visible"
+        title="表单人员选择"
+        :mask-closable="false"
+        :destroy-on-close="true"
+        :width="600"
+        @ok="handleOk"
+        @cancel="handleCancel"
+    >
+        <div class="form-user-table">
+            <el-table
+                ref="table"
+                :columns="columns"
+                :datel-source="dataSource"
+                :row-key="record => record.model"
+                :expand-row-by-click="true"
+                :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
+                :pagination="false"
+                size="small"
+                bordered
+            />
+        </div>
+    </el-dialog>
 </template>
 
 <script setup name="formUserSelector">
-	import workFlowUtils from '@/components/XnWorkflow/nodes/utils/index'
-	import { ElMessage } from 'element-plus'
-	import {ref,reactive} from 'vue'
-	const visible = ref(false)
+import workFlowUtils from '@/components/XnWorkflow/nodes/utils/index'
+import { ElMessage } from 'element-plus'
+import { ref, reactive } from 'vue'
+const visible = ref(false)
 
-	const columns = [
-		{
-			title: '字段名',
-			dataIndex: 'label'
-		},
-		{
-			title: '字段',
-			dataIndex: 'model'
-		}
-	]
+const columns = [
+    {
+        title: '字段名',
+        dataIndex: 'label'
+    },
+    {
+        title: '字段',
+        dataIndex: 'model'
+    }
+]
 
-	// 定义emit事件
-	const emit = defineEmits({ click: null })
-	const props = defineProps(['formFieldList'])
+// 定义emit事件
+const emit = defineEmits({ click: null })
+const props = defineProps(['formFieldList'])
 
-	const dataSource = ref([])
-	dataSource.value = workFlowUtils.getListField(props.formFieldList).filter((f) => {
-		// 判断如果是人员类型的，就让列表显示
-		if (f.type === 'xnUserSelector') {
-			return f
-		}
-	}).map((m) => {
-		return {
-			label: m.label,
-			model: m.model,
-			field: m.model,
-			type: m.type
-		}
-	})
-	const selectedRowKeys = ref([])
-	// 设置默认选中的
-	const state = reactive({
-		selectedRowKeys: selectedRowKeys.value,
-		loading: false
-	})
-	const showFormUserModal = (data = '') => {
-		if (dataSource.value.length === 0) {
-			message.warning('表单内无人员可提供选择！')
-			return
-		}
-		if (dataSource.value.length === 1) {
-			emit('click', dataSource.value[0])
-			message.success('表单内仅有一个人员选择，默认选中！')
-		} else {
-			visible.value = true
-			state.selectedRowKeys[0] = data
-		}
-	}
-	// 点击复选框回调
-	const onSelectChange = (selectedRowKeys) => {
-		state.selectedRowKeys = selectedRowKeys
-	}
-	// 确定
-	const handleOk = () => {
-		const result = dataSource.value.filter((item) => state.selectedRowKeys[0] === item.model)
-		emit('click', result[0])
-		visible.value = false
-		state.selectedRowKeys = []
-	}
-	// 关闭
-	const handleCancel = () => {
-		visible.value = false
-	}
+const dataSource = ref([])
+dataSource.value = workFlowUtils
+    .getListField(props.formFieldList)
+    .filter(f => {
+        // 判断如果是人员类型的，就让列表显示
+        if (f.type === 'xnUserSelector') {
+            return f
+        }
+    })
+    .map(m => {
+        return {
+            label: m.label,
+            model: m.model,
+            field: m.model,
+            type: m.type
+        }
+    })
+const selectedRowKeys = ref([])
+// 设置默认选中的
+const state = reactive({
+    selectedRowKeys: selectedRowKeys.value,
+    loading: false
+})
+const showFormUserModal = (data = '') => {
+    if (dataSource.value.length === 0) {
+        ElMessage({
+            message: '表单内无人员可提供选择！',
+            type: 'warning'
+        })
+        return
+    }
+    if (dataSource.value.length === 1) {
+        emit('click', dataSource.value[0])
+		ElMessage({
+            message: '表单内仅有一个人员选择，默认选中！',
+            type: 'success'
+        })
+    } else {
+        visible.value = true
+        state.selectedRowKeys[0] = data
+    }
+}
+// 点击复选框回调
+const onSelectChange = selectedRowKeys => {
+    state.selectedRowKeys = selectedRowKeys
+}
+// 确定
+const handleOk = () => {
+    const result = dataSource.value.filter(item => state.selectedRowKeys[0] === item.model)
+    emit('click', result[0])
+    visible.value = false
+    state.selectedRowKeys = []
+}
+// 关闭
+const handleCancel = () => {
+    visible.value = false
+}
 
-	// 抛出方法，让上个界面使用
-	defineExpose({
-		showFormUserModal
-	})
+// 抛出方法，让上个界面使用
+defineExpose({
+    showFormUserModal
+})
 </script>
 
 <style lang="less">
-	.form-user-table {
-		overflow: auto;
-		max-height: 400px;
-	}
+.form-user-table {
+    overflow: auto;
+    max-height: 400px;
+}
 </style>
diff --git a/src/components/XnWorkflow/nodes/serviceTask.vue b/src/components/XnWorkflow/nodes/serviceTask.vue
index 6b988dff..0ae9d48e 100644
--- a/src/components/XnWorkflow/nodes/serviceTask.vue
+++ b/src/components/XnWorkflow/nodes/serviceTask.vue
@@ -1,305 +1,398 @@
+<!-- 抄送人组件 -->
 <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>
+    <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" /> -->
+                <el-icon>
+                    <CloseBold @click="delNode()" />
+                </el-icon>
+            </div>
+            <div class="content">
+                <span v-if="toText(childNode)">{{ toText(childNode) }}</span>
+                <span v-else class="placeholder">请选择人员</span>
+            </div>
+        </div>
+        <addNode v-model="childNode.childNode"></addNode>
+        <formContainer
+            v-model="drawer"
+            :visibile="drawer"
+            :destroy-on-close="true"
+            :body-style="{ 'padding-top': '0px' }"
+        >
+            <template #title>
+                <div class="node-wrap-drawer__title">
+                    <label v-if="!isEditTitle" @click="editTitle">
+                        {{ form.title }}
+                        <el-icon>
+                            <EditPen />
+                        </el-icon>
+                        <!-- <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>
+            <div class="tab_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">
+                                <div class="please_choose">
+                                    <p>请选择抄送人员！</p>
+                                </div>
+                            </div>
+                            <div class="mb-2">
+                                <navTitle><template #nav_name>选择要抄送的人员</template></navTitle>
+                            </div>
+                            <!-- 选择抄送人员 -->
+                            <el-radio-group v-model="userSelectionType" @input="changeRadio" style="width: 100%">
+                                <el-radio
+                                    v-for="(item, index) in userSelectionTypeList"
+                                    :value="item.value"
+                                    :key="index"
+                                >
+                                    <!-- @click="selectionClick(item.value)" -->
+                                    {{ item.label }}
+                                </el-radio>
+                            </el-radio-group>
+                            <el-form-item v-if="userSelectionType === 'USER'">
+                                <el-button class="mt-2" type="primary" size="small" @click="openSelector">
+                                    <template #icon>
+                                        <el-icon>
+                                            <Search />
+                                        </el-icon>
+                                    </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>
+                                            <el-icon>
+                                                <Search />
+                                            </el-icon>
+                                        </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="userSelectionType === 'FORM_USER'"
+                                name="formUser"
+                                :rules="[{ required: true, message: '请输入人员变量' }]">
+                                <!-- recordData.formType === 'DEFINE' &&  -->
+                                <!-- <template #label> -->
+                                <!-- <el-tooltip>
+                                    <template #title></template>
+                                    <question-circle-outlined />
+                                    人员变量：
+                                </el-tooltip> -->
+                                <!-- </template> -->
+                                <el-tooltip
+                                    content="单个字段可以采用：字段名，多个采用：字段名1,字段名2,字段名3"
+                                    placement="top-start"
+                                >
+                                   <span class="user_icon">?</span>
+								   <span style="width: 100px;display:block;float: left;">
+								</span>人员变量：
+                                </el-tooltip>
+                                <el-input
+                                    v-model="userTypeForm.formUser"
+                                    clearable
+                                    @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>
+            </div>
+            <template #footer>
+                <el-button type="primary" style="margin-right: 8px" @click="save">保存</el-button>
+                <el-button @click="drawer = false">取消</el-button>
+            </template>
+        </formContainer>
+        <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
-				}
-			}
-		}
-	}
+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'
+import { CloseBold, EditPen, Search ,InfoFilled} from '@element-plus/icons-vue'
+import formContainer from '@/components/formContainer/index.vue'
+import navTitle from '../components/navTitle.vue'
+export default {
+    components: {
+        FormUserSelector,
+        addNode,
+        userSelectorPlus,
+        propTag,
+        PropListenerInfo,
+        formContainer,
+        navTitle,
+        CloseBold,
+        EditPen,
+        Search,
+		InfoFilled
+    },
+    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
+            }
+        },
+        changeRadio() {
+            console.log(this.userSelectionType, '99999')
+            this.form.properties.participateInfo = []
+            this.nodeLegal = true
+        },
+        // 选择抄送人员类型
+        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() {
+			// console.log(this.userTypeForm.formUser,"0000000");
+            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>
+<style lang="scss" scoped>
+.title {
+    position: relative;
+    .el-icon {
+        float: right;
+        position: absolute;
+        right: 13px;
+        top: 6px;
+        display: none;
+    }
+}
+.node-wrap-box:hover {
+    .el-icon {
+        display: block;
+    }
+}
+.node-wrap-drawer__title {
+    margin-bottom: 0 !important;
+}
+.el-tab_container {
+    width: 100%;
+}
+.please_choose {
+    width: 96%;
+    height: 40px;
+    margin-top: 20px;
+    background-color: #fff0f0;
+    border: 2px solid #ffa39e;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 8px 15px;
+    p {
+        font-size: 14px;
+        font-weight: 400;
+    }
+}
+.el-radio-group {
+    margin: 10px 0;
+}
+.user_icon{
+	display: block;
+	width:18px;
+	height: 18px;
+	border:1px solid #000;
+	border-radius:50%;
+	font-size: 14px;
+	line-height: 18px;
+	text-align: center;
+}
+</style>
diff --git a/src/components/formContainer/index.vue b/src/components/formContainer/index.vue
index d6a99862..e0ef7224 100644
--- a/src/components/formContainer/index.vue
+++ b/src/components/formContainer/index.vue
@@ -1,10 +1,10 @@
 <template>
-    <el-dialog v-if="isModal" v-model="visibles" @cancel="cancel" v-bind="$attrs">
+    <el-dialog v-if="isModal" size="50%" v-model="visibles" @cancel="cancel" v-bind="$attrs" :append-to-body="true">
         <template v-for="slotKey in slotKeys" #[slotKey]>
             <slot :name="slotKey" />
         </template>
     </el-dialog>
-    <el-drawer v-else v-model="visibles" v-bind="$attrs" :footer-style="{ textAlign: 'right' }">
+    <el-drawer v-else size="50%"  v-model="visibles" v-bind="$attrs"  :append-to-body="true" :footer-style="{ textAlign: 'right' }">
         <template v-for="slotKey in slotKeys" #[slotKey]>
             <slot :name="slotKey" />
         </template>
diff --git a/src/styles/element.scss b/src/styles/element.scss
index 6402998f..7e79f998 100644
--- a/src/styles/element.scss
+++ b/src/styles/element.scss
@@ -196,3 +196,7 @@
 .sgmap-ctrl-bottom-left{
     display: none !important;
 }
+
+.el-drawer__header{
+    margin-bottom: 0 !important;
+}
\ No newline at end of file