agilebuilder-ui 1.0.621 → 1.0.962

package/packages/department-user-tree-inline/src/group-user-multiple-tree.vue

@@ -0,0 +1,304 @@
+<template>
+		<div>
+				<el-tree
+						ref="groupUserTree"
+						:props="defaultProps"
+						:load="loadNode"
+						:check-on-click-node="true"
+						lazy
+						show-checkbox
+						node-key="nodeId"
+						@check="handleCheckNode"
+						@check-change="handleCheckChange"
+				>
+						<template #default="{ node, data }">
+								<span>
+										<el-icon>
+												<Menu v-if="node.data.id === -1"/>
+												<Calendar v-else-if="node.data.nodeType === 'USER_GROUP'"/>
+												<User v-else-if="node.data.nodeType === 'USER'"/>
+										</el-icon>
+										<span :title="node.label">
+												{{ node.label }}
+										</span>
+								</span>
+						</template>
+				</el-tree>
+		</div>
+</template>
+<script>
+import {Calendar, Menu, User} from '@element-plus/icons-vue'
+import groupUserTreeService from './group-user-tree-service'
+import utils from '../../utils/utils'
+export default {
+		name: 'GroupUserMultipleTree',
+		components:{
+				Menu,
+				Calendar,
+				User
+		},
+		props: {
+		},
+		data() {
+				return {
+						defaultProps: {
+								id: 'id',
+								label: 'showName',
+								children: 'children',
+								isLeaf: 'leaf'
+						},
+						count: 0,
+						tenantNodeId: -10, // 公司节点的id
+						selectUser: null, // 选择的用户原信息
+						selectResult: [], // 已选用户结果
+						selectNodeInfo: null, // 封装后的用户信息，即用户结果
+						notMultipleClickNum: null, // 节点没有双击事件，手动实现双击事件，参数用来记录次数
+						notMultipleClickNode: null // 节点没有双击事件，手动实现双击事件，参数用来记录节点
+				}
+		},
+		computed: {
+		},
+		watch: {
+		},
+		created() {
+		},
+		mounted() {
+		},
+		methods: {
+				...utils,
+				...groupUserTreeService,
+				// 封装已选人员结果
+				packageSelectUser(user) {
+						const containUsers = this.selectResult.filter(this.filterUser(user))
+						if (containUsers && containUsers.length === 0) {
+								// 表示集合中不存在该用户，则封装该用户
+								var selectUser = {
+										id: user.id,
+										name: user.name,
+										zhName: user.name,
+										loginName: user.loginName,
+										email: user.email,
+										telephone: user.telephone,
+										mainDepartmentName: user.mainDepartmentName,
+										subCompanyName: user.subCompanyName,
+										user: user,
+										enName: user.enName,
+										superiorDeptNameFullPath: user.superiorDeptNameFullPath
+								}
+								return selectUser
+						}
+						return null
+				},
+				// 判断用户是否存在的过滤器
+				filterUser(queryUser) {
+						return (user) => {
+								return (user.id === queryUser.id)
+						}
+				},
+				handleCheckChange(data, checked, childrenChecked) {
+						if (this.isUserNode(data)) {
+								// 是否是人员节点
+								if (checked) {
+										// 当前节点是否被选中
+										const user = JSON.parse(data.data)
+										const selectUser = this.packageSelectUser(user)
+										if (selectUser) {
+												this.$emit('result', selectUser)
+												// this.selectResult.push(selectUser)
+										}
+								}
+						}
+				},
+				// 点击复选框时处理
+				handleCheckNode(data, checkObj) {
+						if (checkObj.checkedKeys.indexOf(data.nodeId) > -1) {
+								// 如果没有选择所有用户，则可以继续选择用户
+								this.checkedNodeToSelectResult(data)
+						} else {
+								this.cancelChildCheckedNodes(data)
+						}
+				},
+				// 选中树节点处理
+				checkedNodeToSelectResult(data) {
+						this.checkedNode(data)
+				},
+				// 取消当前节点及其子节点的选中状态
+				cancelCheckedNodeAndChildren(data) {
+						if (data.id !== this.tenantNodeId) {
+								// 如果当前节点不是公司节点，需要将公司节点的选中状态去掉
+								this.$refs.groupUserTree.setChecked(this.tenantNodeId + '', false)
+						}
+						const children = data.children
+						if (children) {
+								children.forEach(nodeData => {
+										// 取消节点的选中状态
+										this.$refs.groupUserTree.setChecked(nodeData.nodeId, false)
+										// 递归取消子子节点的选中状态
+										this.cancelCheckedNodeAndChildren(nodeData)
+								})
+						}
+				},
+				// 勾选节点时的操作
+				checkedNode(data) {
+						// 勾选当前节点
+						const isExpand = this.$refs.groupUserTree.store.nodesMap[data.nodeId].expanded
+						if (isExpand) {
+								// 如果已展开，不需要再走后台获得其子节点。只需要选中已有子节点
+								// 选中当前节点及其子节点
+								this.checkedChildrenUserNodes(data, data.children)
+						} else {
+								// 当前节点未展开。则再判断是否需要走后台加载叶子节点
+								if (!data.leaf) {
+										// 不是叶子节点
+										if (data.children) {
+												// 如果已经加载过该父节点的子节点，则只需展开，并选中人员节点
+												this.staticCheckedUserNodes(data)
+										} else {
+												// 没有加载过该父节点的子节点时，需要走后台获得该父节点的子节点，并展开子节点
+												this.dynamicCheckedUserNodes(data)
+										}
+								}
+						}
+				},
+				// 取消当前节点的子节点的勾选状态
+				cancelChildCheckedNodes(data) {
+						const children = data.children
+						if (children) {
+								children.forEach(nodeData => {
+										// 取消节点的选中状态
+										this.$refs.groupUserTree.setChecked(nodeData.nodeId, false)
+										// 递归取消子节点的孩子节点的选中状态
+										this.cancelChildCheckedNodes(nodeData)
+								})
+						}
+				},
+				// 勾选指定节点及其下的所有用户节点
+				checkedChildrenUserNodes(data, children) {
+						// 勾选指定节点
+						// 勾选指定节点下的用户节点
+						if (children) {
+								const groupIds = []
+								children.forEach(childData => {
+										if (childData.nodeType === 'USER') {
+												// 勾选用户节点
+												this.$refs.groupUserTree.setChecked(childData.nodeId, true)
+												const user = JSON.parse(childData.data)
+												const selectUser = this.packageSelectUser(user)
+												if (selectUser) {
+														selectUser.nodeId = childData.nodeId
+														this.$emit('result', selectUser)
+														// this.selectResult.push(selectUser)
+												}
+										} else if (childData.nodeType === 'USER_GROUP') {
+												this.$refs.groupUserTree.setChecked(childData.nodeId, true)
+												groupIds.push(childData.id)
+										} else {
+												this.$refs.groupUserTree.setChecked(childData.nodeId, false)
+										}
+										if (this.$refs.groupUserTree.store.nodesMap[childData.nodeId].expanded) {
+												// 如果当前子节点已展开，则选中子节点的孩子节点中的用户节点
+												this.checkedChildrenUserNodes(childData)
+										}
+								})
+								// 封装所有子部门及孙子部门的用户
+								this.packageChildrenDepartmentUsers(groupIds)
+						}
+						// 选中当前点击的节点，即使当前点击的是非用户节点也要选中
+						this.$refs.groupUserTree.setChecked(data.nodeId, true)
+				},
+				// 封装所有子部门及孙子部门的用户
+				packageChildrenDepartmentUsers(groupIds) {
+						if (groupIds && groupIds.length > 0) {
+								this.getGroupUsers(groupIds).then(users => {
+										users.forEach(user => {
+												const selectUser = this.packageSelectUser(user)
+												if (selectUser) {
+														// this.selectResult.push(selectUser)
+														this.$emit('result', selectUser)
+												}
+										})
+								})
+						}
+				},
+				// 选中非叶子类型的部门节点时，已加载过该节点下的子节点，只需展开该部门，且选中用户节点
+				staticCheckedUserNodes(data) {
+						// 展开当前选中的节点
+						this.$refs.groupUserTree.store.nodesMap[data.nodeId].expanded = true
+						// 选中用户节点
+						this.checkedChildrenUserNodes(data, data.children)
+				},
+				// 多选树时，点击节点处理复选框的选中状态
+				handleNodeClick(data, node, nodeTree) {
+						var checkedKeys = []
+						if (this.$refs.groupUserTree) {
+								checkedKeys = this.$refs.groupUserTree.getCheckedKeys()
+						}
+						if (checkedKeys.indexOf(data.nodeId) > -1) {
+								// 表示当前节点是选中状态，则需要取消其选中状态
+								// 取消当前节点的勾选状态
+								this.$refs.groupUserTree.setChecked(data.nodeId, false)
+								// 取消当前节点的子节点的勾选状态
+								this.cancelChildCheckedNodes(data)
+								// 取消选中状态时，保持节点是展开的状态，不要折叠
+								this.$refs.groupUserTree.store.nodesMap[data.nodeId].expanded = true
+						} else {
+								// 表示当前节点不是选中的状态，需要勾选该节点
+								// 点击树节点时添加并展开节点会走loadNode方法，因为设置了树组件的expand-on-click-node属性为true
+								const children = data.children
+								if (children && children.length > 0) {
+										// 表示加载过该节点，直接选中即可
+										this.staticCheckedUserNodes(data)
+								} else if (data.nodeType && data.nodeType === 'USER') {
+										// 表示是用户节点需要选中该节点
+										this.$refs.groupUserTree.setChecked(data.nodeId, true)
+								} else {
+										// 表示没有加载过该节点，是首次加载，需要走后台
+										// 会走loadNode方法，因为设置了树组件的expand-on-click-node属性为true
+										this.isClickNode = true
+								}
+						}
+				},
+				isUserNode(data) {
+						// 当前节点不是公司节点，节点类型是用户类型时，表示点击的是用户节点
+						return data.id !== this.tenantNodeId && data.nodeType && data.nodeType === 'USER'
+				},
+				// 初始化树 或 点击三角展开节点时动态加载子节点
+				loadNode(node, resolve) {
+						var parentId = 0
+						var parentNodeId = '0'
+						if (node.level === 0) {
+								// 表示初始化树
+								parentId = 0
+								parentNodeId = parentId + ''
+						} else {
+								parentId = node.data.id
+								parentNodeId = node.data.nodeId
+						}
+						var checkedKeys = []
+						if (this.$refs.groupUserTree) {
+								checkedKeys = this.$refs.groupUserTree.getCheckedKeys()
+						}
+						// 初始化部门人员树
+						this.initLoadDepartment(parentId, node, resolve, checkedKeys, parentNodeId)
+				},
+				// renderContent(h, { node, data, store }) {
+				// 		var className
+				// 		if (node.data.id === -1) {
+				// 				// node.id ===-1表示公司节点，node.branch表示是分支机构节点
+				// 				className = 'el-icon-menu'
+				// 		} else if (node.data.nodeType === 'USER_GROUP') {
+				// 				// node.id ===-2表示集团公司无部门用户节点,node.id ===-3表示是分支机构无部门用户节点
+				// 				className = 'el-icon-date'
+				// 		} else if (node.data.nodeType === 'USER') {
+				// 				className = 'el-icon-user'
+				// 		}
+				// 		return (
+				// 				<span>
+    //       <i class={className}></i>
+    //       <span title={node.label}>{node.label}</span>
+    //     </span>
+				// 		)
+				// }
+		}
+}
+</script>

package/packages/department-user-tree-inline/src/group-user-single-tree.vue

@@ -0,0 +1,155 @@
+<template>
+		<div>
+				<el-tree
+						ref="groupUserTree"
+						:props="defaultProps"
+						:load="loadNode"
+						lazy
+						node-key="nodeId"
+						@node-click="handleNodeClick"
+				>
+						<template #default="{ node, data }">
+								<span>
+										<el-icon>
+												<Menu v-if="node.data.id === -1"/>
+												<Calendar v-else-if="node.data.nodeType === 'USER_GROUP'"/>
+												<User v-else-if="node.data.nodeType === 'USER'"/>
+										</el-icon>
+										<span :title="node.label">
+												{{ node.label }}
+										</span>
+								</span>
+						</template>
+				</el-tree>
+		</div>
+</template>
+<script>
+import {Calendar, Menu, User} from '@element-plus/icons-vue'
+import groupUserTreeService from './group-user-tree-service'
+import utils from '../../utils/utils'
+export default {
+		name: 'GroupUserSingleTree',
+		components:{
+				Menu,
+				Calendar,
+				User
+		},
+		props: {
+		},
+		data() {
+				return {
+						defaultProps: {
+								id: 'id',
+								label: 'showName',
+								children: 'children',
+								isLeaf: 'leaf'
+						},
+						count: 0,
+						tenantNodeId: -10, // 公司节点的id
+						selectUser: null, // 选择的用户原信息
+						selectNodeInfo: null, // 封装后的用户信息，即用户结果
+						notMultipleClickNum: null, // 节点没有双击事件，手动实现双击事件，参数用来记录次数
+						notMultipleClickNode: null // 节点没有双击事件，手动实现双击事件，参数用来记录节点
+				}
+		},
+		computed: {
+		},
+		watch: {
+		},
+		created() {
+		},
+		mounted() {
+		},
+		methods: {
+				...utils,
+				...groupUserTreeService,
+				handleNodeClick(data, node, nodeTree) {
+						console.log('handleNodeClick---data=', data)
+						if (this.isUserNode(data)) {
+								const user = JSON.parse(data.data)
+								// 点击的是用户节点，并且是单选树时，点击部门节点直接关闭弹框
+								this.packageSelectResult(user)
+								if (this.notMultipleClickNode && this.notMultipleClickNode.id === node.id) {
+										this.notMultipleClickNum++
+										// 表示第二次点击
+										// 判断次数
+										if (this.notMultipleClickNum === 2) {
+												console.log('handleNodeClick--dblClick-----this.selectNodeInfo=', this.selectNodeInfo)
+												this.notMultipleClickNum = 0
+												this.notMultipleClickNode = null
+												// 关闭弹窗
+												this.$emit('dblClick', this.selectNodeInfo)
+										}
+								} else {
+										this.notMultipleClickNode = node
+										this.notMultipleClickNum = 1
+										console.log('handleNodeClick--singleClick----this.selectNodeInfo=', this.selectNodeInfo)
+										// 关闭弹窗
+										this.$emit('singleClick', this.selectNodeInfo)
+								}
+								const that = this
+								setTimeout(function() {
+										that.notMultipleClickNum = 0
+										that.notMultipleClickNode = null
+								}, 300)
+						}
+				},
+				packageSelectResult(user) {
+						let name = user.name
+						if (user.enName && user.enName.trim() !== '') {
+								name = name + '(' + user.enName + ')'
+						}
+						const selectNodeInfo = {
+								id: user.id,
+								name: name,
+								zhName: user.name,
+								loginName: user.loginName,
+								email: user.email,
+								telephone: user.telephone,
+								user: user,
+								enName: user.enName,
+								subCompanyName: user.subCompanyName
+						}
+						// 表示是勾选单选按钮或 选中树节点
+						this.selectNodeInfo = selectNodeInfo
+				},
+				isUserNode(data) {
+						// 当前节点不是公司节点，节点类型是用户类型时，表示点击的是用户节点
+						return data.id !== this.tenantNodeId && data.nodeType && data.nodeType === 'USER'
+				},
+				// 初始化树 或 点击三角展开节点时动态加载子节点
+				loadNode(node, resolve) {
+						var parentId = 0
+						var parentNodeId = '0'
+						if (node.level === 0) {
+								// 表示初始化树
+								parentId = 0
+								parentNodeId = parentId + ''
+						} else {
+								parentId = node.data.id
+								parentNodeId = node.data.nodeId
+						}
+						// 初始化部门人员树
+						this.initLoadDepartment(parentId, node, resolve, [], parentNodeId)
+				},
+				// renderContent(h, { node, data, store }) {
+				// 		var className
+				// 		if (node.data.id === -1) {
+				// 				// node.id ===-1表示公司节点，node.branch表示是分支机构节点
+				// 				className = 'el-icon-menu'
+				// 		} else if (node.data.nodeType === 'USER_GROUP') {
+				// 				// node.id ===-2表示集团公司无部门用户节点,node.id ===-3表示是分支机构无部门用户节点
+				// 				className = 'el-icon-date'
+				// 		} else if (node.data.nodeType === 'USER') {
+				// 				className = 'el-icon-user'
+				// 		}
+				// 		return (
+				// 				<span>
+    //       <i class={className}></i>
+    //       <span title={node.label}>{node.label}</span>
+    //     </span>
+				// 		)
+				// }
+		}
+}
+</script>

package/packages/department-user-tree-inline/src/group-user-tree-service.js

@@ -0,0 +1,74 @@
+const groupUserTreeService = {
+	// 选中非叶子类型的部门节点时，首次加载该节点的子节点，需要动态加载该部门下的用户节点及子部门节点，并展开该部门，且选中用户节点
+	dynamicCheckedUserNodes(data) {
+		const parentId = data.id
+		this.$http.get(window.$vueApp.config.globalProperties.baseAPI + '/component/organization-group-trees/' + parentId).then(result => {
+			// 更新当前点击的节点的子节点
+			this.$refs.groupUserTree.updateKeyChildren(data.nodeId, result)
+			this.$refs.groupUserTree.store.nodesMap[data.nodeId].expanded = true
+			this.staticCheckedUserNodes(data)
+		})
+	},
+	// 初始化部门人员树
+	initLoadDepartment(parentId, node, resolve, checkedKeys, parentNodeId) {
+		var children = []
+		if (node.data && node.data.children) {
+			children = node.data.children
+		}
+		if (children && children.length > 0) {
+			// 表示加载过该父节点的子节点，只需重新更新一下
+			resolve(children)
+			// 表示当前展开的节点是选中状态，则应保持其选中状态，并选中其子节点
+			if (checkedKeys && checkedKeys.indexOf(parentNodeId) > -1) {
+				// 点击部门名称前的三角标识展开节点时，保持当前节点的选中状态
+				// 表示当前展开的节点是选中状态，则应保持其选中状态，并选中其子节点
+				this.checkedChildrenUserNodes(node.data, node.data.children)
+			}
+		} else {
+			// 表示没有加载过该父节点的子节点集合时
+			this.$http.get(window.$vueApp.config.globalProperties.baseAPI + '/component/organization-group-trees/' + parentId).then(data => {
+				resolve(data)
+				// 更新当前点击的节点的子节点，必须加该方法，否则会导致子节点无法选中
+				this.$refs.groupUserTree.updateKeyChildren(parentNodeId, data)
+				if (parentId === 0) {
+					// 初始化树时，展开公司节点
+					// 加载整个组织结构树时，展开公司节点
+					this.loadDepartment(this.tenantNodeId, this.tenantNodeId + '')
+				}
+			})
+		}
+	},
+	loadDepartment(parentId, parentNodeId, isSearch, searchValue) {
+		this.$http.get(window.$vueApp.config.globalProperties.baseAPI + '/component/organization-group-trees/' + parentId).then(children => {
+			this.$refs.groupUserTree.updateKeyChildren(parentNodeId, children)
+			if (this.$refs.groupUserTree.store.nodesMap[parentNodeId]) {
+				this.$refs.groupUserTree.store.nodesMap[parentNodeId].expanded = true
+			}
+		})
+	},
+	getGroupUsers(groupIds) {
+		return this.$http.post(window.$vueApp.config.globalProperties.baseAPI + '/component/user-group-links/users', groupIds)
+	},
+	getUserGroupList() {
+		return this.$http.get(window.$vueApp.config.globalProperties.baseAPI + '/component/user-groups')
+	},
+	saveUserGroup(userGroup) {
+		return this.$http.post(window.$vueApp.config.globalProperties.baseAPI + '/component/user-groups', userGroup)
+	},
+	deleteUserGroup(groupId) {
+		return this.$http.delete(window.$vueApp.config.globalProperties.baseAPI + '/component/user-groups/' + groupId)
+	},
+	saveUserGroupLinks(groupId, loginNames) {
+		return this.$http.post(window.$vueApp.config.globalProperties.baseAPI + '/component/user-group-links/' + groupId, loginNames)
+	},
+	getUserGroupLinks(groupId) {
+		return this.$http.get(window.$vueApp.config.globalProperties.baseAPI + '/component/user-group-links/' + groupId)
+	},
+	deleteGroupUserLink(groupId, loginName) {
+		return this.$http.delete(window.$vueApp.config.globalProperties.baseAPI + '/component/user-groups/' + groupId + '/users/' + loginName)
+	},
+	getGroupById(groupId) {
+		return this.$http.get(window.$vueApp.config.globalProperties.baseAPI + '/component/user-groups/' + groupId)
+	}
+}
+export default groupUserTreeService

package/packages/department-user-tree-inline/src/search-result.vue

@@ -74,7 +74,7 @@
 					</div>
 				</template>
 			</el-table-column>
-			<el-table-column
+			<!-- <el-table-column
 					v-if="multiple"
 					:label="$t('superGrid.index')"
 					align="center"
@@ -83,25 +83,31 @@
 				<template v-slot="scope">
 					{{ scope.$index + 1 }}
 				</template>
-			</el-table-column>
+			</el-table-column> -->
 			<el-table-column
 					:label="$t('departmentUserTreeInline.name')"
-					:width="130"
 					prop="name"
 			>
 				<template v-slot="scope">
-          <span
-		          v-if="scope.row.enName && scope.row.enName.trim() !== ''"
-		          :title="scope.row.name + '(' + scope.row.enName + ')'"
-		          class="ellipsis cell--span"
-          >{{ scope.row.name + '(' + scope.row.enName + ')' }}</span
-          >
-					<span v-else :title="scope.row.name" class="ellipsis cell--span">{{
-							scope.row.name
-						}}</span>
+					<div v-if="scope.row.enName && scope.row.enName.trim() !== ''">
+						<div :title="scope.row.name +'('+scope.row.enName+')' +'['+scope.row.loginName+']'">
+						<span>{{ scope.row.name+'('+scope.row.enName+')' }}[{{ scope.row.loginName }}]</span>
+						</div>
+						<div style="color:#ccc" :title="getDeptName(scope.row)">
+						{{ getDeptName(scope.row) }}
+						</div>
+					</div>
+					<div v-else>
+						<div :title="scope.row.name +'['+scope.row.loginName+']'">
+						<span>{{ scope.row.name }}[{{ scope.row.loginName }}]</span>
+						</div>
+						<div style="color:#ccc" :title="getDeptName(scope.row)">
+						{{ getDeptName(scope.row) }}
+						</div>
+					</div>
 				</template>
 			</el-table-column>
-			<el-table-column
+			<!-- <el-table-column
 					:label="$t('departmentUserTreeInline.loginName')"
 					:width="110"
 					prop="loginName"
@@ -132,38 +138,17 @@
 	          }}</span
           >
 				</template>
-			</el-table-column>
+			</el-table-column> -->
 			<!--由于保密要求，邮箱不能显示，需要脱敏处理，暂时注释掉，不显示-->
 			<!-- <el-table-column
 							:label="$t('departmentUserTreeInline.email')"
 							:width="130"
 							prop="email"
 						>
-							<template slot-scope="scope">
+							<template #default="scope">
 								<span class="ellipsis cell--span" :title="scope.row.email">{{ scope.row.email }}</span>
 							</template>
 						</el-table-column> -->
-			<el-table-column
-        :label="$t('departmentUserTreeInline.superiorDeptNameFullPath')"
-        :width="130"
-        prop="superiorDeptNameFullPath"
-      >
-				<template v-slot="scope">
-          <span :title="scope.row.superiorDeptNameFullPath" class="ellipsis cell--span">{{ scope.row.superiorDeptNameFullPath }}</span>
-        </template>
-      </el-table-column>
-			<el-table-column
-					v-if="containBranch"
-					:label="$t('departmentUserTreeInline.branch')"
-					:width="130"
-					prop="subCompanyName"
-			>
-				<template v-slot="scope">
-          <span :title="scope.row.subCompanyName" class="ellipsis cell--span">{{
-		          scope.row.subCompanyName
-	          }}</span>
-				</template>
-			</el-table-column>
 		</el-table>
 	</div>
 </template>
@@ -269,6 +254,19 @@ export default {
 				return dept.id === queryDept.id
 			}
 		},
+		getDeptName(row) {
+			let deptName = row.superiorDeptNameFullPath
+			if (deptName) {
+				return deptName
+			}
+			if (this.language && this.language !== 'cn') {
+				deptName = row.mainDepartmentEnName
+			}
+			if (deptName) {
+				return deptName
+			}
+			return row.mainDepartmentName
+		}
 	},
 	emits: ['removeUser', 'addUser', 'selectResult', 'resultRowDblclick'],
 }

package/packages/department-user-tree-mobile/src/department-user-tree-app.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-drawer v-model="isShowForm" direction="btt" size="100%" class="organization-tree">
+    <el-drawer v-model="isShowForm" direction="btt" size="100%" class="organization-tree" @close="closeTree()">
     <template #header>
         <div style="text-align: center;">
             {{$t('imatrixUIMessage.pleaseSelect')}}
@@ -47,10 +47,10 @@ const props = defineProps<{
 		}
 	}>()
 	const emits = defineEmits(['close'])
-	let isShowForm = ref(false)
-	function showTree() {
-		isShowForm.value = true
-	}
+	let isShowForm = ref(true)
+	// function showTree() {
+	// 	isShowForm.value = true
+	// }
 	function closeTree(selectNodeInfo) {
 		emits('close', selectNodeInfo)
 		isShowForm.value = false
@@ -58,7 +58,7 @@ const props = defineProps<{
 	function selectDepartment() {
 		// this.$refs.inlineDeparmentTree.selectDepartment()
 	}
-	defineExpose({showTree})
+	// defineExpose({showTree})
 </script>
 <style>
 .organization-tree, .organization-tree .el-checkbox__label,.organization-tree .el-breadcrumb__inner,.organization-tree .el-tree {