imatrix-ui 0.0.1-dsn

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

@@ -0,0 +1,757 @@
+<template>
+	<div>
+		<el-container style="height: 395px">
+			<el-aside width="430px">
+				<el-container style="height: 390px">
+					<el-header style="font-size: 12px; height: 35px">
+						<el-autocomplete
+								v-model="filterText"
+								:fetch-suggestions="querySearch"
+								:placeholder="$t('departmentUserTree.pleaseEnterUserInformation')"
+								class="inline-input inline-input-custom searchDepartmentUser"
+								size="default"
+								@select="handleSelect"
+								@keyup.enter="clickSearch"
+						>
+							<template v-slot:append>
+								<el-button :icon="ElIconSearch" @click="clickSearch"/>
+							</template>
+						</el-autocomplete>
+					</el-header>
+					<el-main style="padding: 10px">
+						<div
+								v-if="!searchValue"
+								style="
+                padding-top: 5px;
+                overflow: auto;
+                width: auto;
+                display: inline-block !important;
+              "
+						>
+							<el-tree
+									ref="deparmentUserTree"
+									:check-on-click-node="true"
+									:load="loadNode"
+									:props="defaultProps"
+									lazy
+									node-key="nodeId"
+									show-checkbox
+									@check="handleCheckNode"
+									@check-change="handleCheckChange"
+							>
+								<template #default="{ node, data }">
+									<span>
+										<el-icon>
+											<Menu v-if="node.data.id === -1 || node.data.branch"/>
+										  <Tickets v-else-if="node.data.id === -2 || node.data.id === -3"/>
+											<User v-else-if="node.data.nodeType === 'USER'"/>
+											<Calendar v-else/>
+										</el-icon>
+										<span :title="node.label">
+											{{ node.label }}
+										</span>
+									</span>
+								</template>
+							</el-tree>
+							<!-- @node-click="handleNodeClick" 移除节点点击，不然会造成节点不可选择时，点击也会选择节点 -->
+						</div>
+
+						<div
+								v-if="searchValue && searchValue.length > 0"
+								style="height: 100%; overflow: hidden"
+						>
+							<user-result
+									:contain-branch="containBranch"
+									:grid-data="searchResult"
+									:height="height"
+									:is-search-result="true"
+									:multiple="true"
+									:select-result="selectResult"
+									@addUser="selectUser"
+							/>
+						</div>
+					</el-main>
+				</el-container>
+			</el-aside>
+
+			<el-container>
+				<el-aside width="2px">
+					<table
+							border="1px"
+							cellpadding="0"
+							cellspacing="0"
+							style="
+              height: 100%;
+              border-left-style: solid;
+              border-bottom-style: none;
+              border-right-style: none;
+              border-top-style: none;
+              border-left-color: #cccccc;
+            "
+					/>
+				</el-aside>
+				<el-main style="padding: 10px">
+					<div style="text-align: left; font-size: 16px">
+						{{ $t('departmentUserTree.selectedPeople') }}:
+					</div>
+					<div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
+						<user-result
+								:contain-branch="containBranch"
+								:grid-data="selectResult"
+								:height="height"
+								:is-search-result="false"
+								:multiple="true"
+								@removeUser="removeUser"
+						/>
+					</div>
+				</el-main>
+			</el-container>
+		</el-container>
+	</div>
+</template>
+
+<script>
+import {Calendar, Menu, Search as ElIconSearch, Tickets, User} from '@element-plus/icons-vue'
+import {$emit} from '../../utils/gogocodeTransfer'
+import localStorage from '../../../src/utils/local-storage'
+import UserResult from './search-result.vue'
+import utils from '../../utils/utils'
+import departmentUserTreeMultiService from './department-user-tree-multi-service'
+import memoryCacheUtils from '../../utils/memory-cache-utils'
+
+export default {
+	data() {
+		return {
+			filterText: '',
+			defaultProps: {
+				id: 'id',
+				label: 'showName',
+				children: 'children',
+				isLeaf: 'leaf',
+				disabled: 'disabled',
+			},
+			searchParam: {
+				userField: null,
+				searchValue: null,
+				treeType: 'MAN_DEPARTMENT_TREE',
+				departmentInfo: null,
+			},
+			// 当前租户内是否包含分支机构。获得当前选中用户名称时，如果有分支，则需要将分支名称返回给用户，例如：张三(分支1)
+			containBranch: false,
+			// 公司节点的id
+			tenantNodeId: -1,
+			// 用于保存所有查询出的节点id
+			allSearchNodeIds: [],
+			// 用于保存allSearchNodeIds中所有已加载子节点的id集合
+			allExpandNodeIds: [],
+			// 多选树时，是否点击当前的节点
+			isClickNode: false,
+			// 查询的备选值
+			restaurants: [],
+			// 查询条件
+			searchValue: null,
+			// 用户的查询结果
+			searchResult: [],
+			// 已选用户结果
+			selectResult: [],
+			searchStoreKey: 'searchDepartmentUser',
+			// 公司根节点信息
+			tenantInfo: {},
+			memoryCacheKey: 'DEPARTMENT_USER_MEMORY_KEY',
+			// 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
+			memoryCacheData: [],
+			ElIconSearch,
+		}
+	},
+	name: 'InlineDepartmentUserMultiTree',
+	components: {
+		UserResult,
+		Menu,
+		Tickets,
+		User,
+		Calendar
+	},
+	props: {
+		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+		departmentInfo: {
+			type: Array,
+			default: null,
+		},
+		// 弹框的高度
+		height: {
+			type: String,
+			default: '300px',
+		},
+		// 是否需要显示虚拟用户
+		isNeedVirtualUser: {
+			type: Boolean,
+			default: false,
+		},
+		// 多选用户树时，已选择用户id或登录名集合，多个之间以逗号隔开
+		selectUserInfo: {
+			type: [String, Number],
+			default: null,
+		},
+		// 移除用户时，用户属性名称：id、loginName、email、telephone，默认是loginName
+		searchField: {
+			type: String,
+			default: 'loginName',
+		},
+		// 多选树时结果之间的分隔符，默认是逗号分隔
+		separator: {
+			type: String,
+			default: ',',
+		},
+	},
+	computed: {},
+	watch: {
+		filterText(val) {
+			if (!val) {
+				this.searchValue = val
+				// 清空查询内容时，重新加载整个树
+				if (this.departmentInfo && this.departmentInfo.length > 0) {
+					// 加载指定部门时，展开公司节点
+					this.loadPointDepartments()
+				} else {
+					// 加载整个组织结构树时，展开公司节点
+					this.loadDepartment(this.tenantNodeId, this.tenantNodeId + '')
+				}
+			}
+		},
+	},
+	created() {
+		this.initSelectUsers(
+				this.searchField,
+				this.selectUserInfo,
+				this.separator
+		).then((selectUsers) => {
+			if (selectUsers) {
+				this.selectResult = selectUsers
+			}
+		})
+	},
+	mounted() {
+		var searchDepartmentUser = localStorage.getObject(this.searchStoreKey)
+		if (searchDepartmentUser) {
+			this.restaurants = searchDepartmentUser
+		} else {
+			this.restaurants = []
+		}
+		this.getMemoryCacheData('departmentUser')
+	},
+	methods: {
+		...utils,
+		...departmentUserTreeMultiService,
+		...memoryCacheUtils,
+		// 将查询结果中指定用户添加到已选择用户集合中
+		selectUser(index, user) {
+			if (!this.isContainAllUser()) {
+				const containUsers = this.selectResult.filter(this.filterUser(user))
+				if (containUsers && containUsers.length === 0) {
+					// 如果已选结果中不包含当前用户，则添加
+					// 将查询结果中的用户复制到已选择用户集合中
+					user.tenantCode = this.tenantInfo.code
+					user.tenantName = this.tenantInfo.tenantName
+					this.selectResult.push(user)
+					// 搜索选中记忆
+					this.setMemoryCacheData(user, 'departmentUser')
+				}
+			} else {
+				this.alertByAllUser()
+			}
+		},
+		// 从已选择用户集合中移除指定用户，并添加到查询结果集合中
+		removeUser(index, user) {
+			// 表示是在组织结构树页面，需要将树的人员节点的选中状态去掉
+			if (user.nodeId) {
+				const nodeId = user.nodeId
+				if (this.$refs.deparmentUserTree && nodeId) {
+					this.$refs.deparmentUserTree.setChecked(nodeId, false)
+				}
+			} else {
+				if (this.$refs.deparmentUserTree) {
+					// 通过查询结果添加的用户，在返回到组织结构树时，也选中了该用户，在移除该用户时，需要去掉复选框的选中状态
+					const checkedKeys = this.$refs.deparmentUserTree.getCheckedKeys()
+					const currentCheckedUserNodeIds = checkedKeys.filter(
+							this.filterUserNode(user)
+					)
+					if (currentCheckedUserNodeIds.length > 0) {
+						// 表示当前用户是选中的状态，需要去掉
+						currentCheckedUserNodeIds.forEach((userNodeId) => {
+							this.$refs.deparmentUserTree.setChecked(userNodeId, false)
+						})
+					}
+				}
+			}
+			this.selectResult = this.removeRow(this.selectResult, user)
+			if (!this.selectResult || this.selectResult.length === 0) {
+				// 已选结果面板没有内容，则左侧树节点也不要有选中节点了
+				if (this.$refs.deparmentUserTree) {
+					this.$refs.deparmentUserTree.setCheckedKeys([])
+				}
+			}
+		},
+		filterUserNode(queryUser) {
+			return (userNodeId) => {
+				// 用户节点的id的分隔符，USER~departmentId~userId
+				const nodeIdSeparator = '~'
+				const userId = userNodeId.substring(
+						userNodeId.lastIndexOf(nodeIdSeparator) + 1
+				)
+				return userId === queryUser.id + ''
+			}
+		},
+		// handleSelect(item) {
+		//   this.handleSelectUtil(item, localStorage)
+		// },
+		search(value) {
+			this.searchValue = value
+			let mySearchValue = value
+			if (mySearchValue) {
+				mySearchValue = mySearchValue.trim()
+			}
+			this.searchParam.searchValue = mySearchValue
+			this.searchParam.departmentInfo = this.departmentInfo
+			// TODO: 查询的信息，不需要该属性了，默认自动匹配姓名、登录名等
+			// this.searchParam.userField = this.searchField
+			// 后台查询部门，并拼接树节点
+			this.filterAppendNodes(value)
+		},
+		// 点击查询按钮调用的方法
+		clickSearch() {
+			this.storeSeachValue(localStorage, this.searchStoreKey, this.filterText)
+			this.search(this.filterText)
+		},
+		handleCheckChange(data, checked, childrenChecked) {
+			if (this.isUserNode(data)) {
+				// 是否是人员节点
+				if (checked) {
+					// 当前节点是否被选中
+					const user = JSON.parse(data.data)
+					const selectUser = this.packageSelectUser(user)
+					if (selectUser) {
+						this.selectResult.push(selectUser)
+						// 搜索选中记忆
+						this.setMemoryCacheData(user, 'departmentUser')
+					}
+				}
+			}
+		},
+		// 封装已选人员结果
+		packageSelectUser(user) {
+			if (!this.isContainAllUser()) {
+				const containUsers = this.selectResult.filter(this.filterUser(user))
+				if (containUsers && containUsers.length === 0) {
+					user.tenantName = this.tenantInfo.tenantName
+					user.tenantCode = this.tenantInfo.code
+					// 表示集合中不存在该用户，则封装该用户
+					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,
+					}
+					return selectUser
+				}
+				return null
+			} else {
+				this.alertByAllUser()
+			}
+		},
+		isContainAllUser() {
+			if (this.selectResult.length > 0) {
+				return this.selectResult[0].id === this.tenantNodeId
+			}
+			return false
+		},
+		// 选中了组织结构树的根节点
+		packageAllUserToResult() {
+			if (!this.isContainAllUser()) {
+				// 表示集合中不存在该用户，则封装该用户
+				var allUser = {
+					id: this.tenantNodeId,
+					name: '所有用户',
+				}
+				return allUser
+			}
+			return null
+		},
+		// 判断用户是否存在的过滤器
+		filterUser(queryUser) {
+			return (user) => {
+				return user.id === queryUser.id
+			}
+		},
+		// 点击复选框时处理
+		handleCheckNode(data, checkObj) {
+			if (checkObj.checkedKeys.indexOf(data.nodeId) > -1) {
+				if (!this.isContainAllUser()) {
+					// 如果没有选择所有用户，则可以继续选择用户
+					this.checkedNodeToSelectResult(data)
+				} else {
+					// 如果已选择所有用户，提示用户，先移除所有用户
+					this.alertByAllUser()
+				}
+			} else {
+				this.cancelChildCheckedNodes(data)
+			}
+		},
+		// 由于选择了所有用户，再次选择时的提示信息
+		alertByAllUser() {
+			this.$alert(
+					this.$t(
+							'imatrixUIMessage.pleaseRemoveallpersonnelBeforeSelectingSpecificPersonnel'
+					),
+					this.$t('imatrixUIMessage.tips'),
+					{
+						confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+					}
+			).then(() => {
+				if (this.$refs.deparmentUserTree) {
+					this.$refs.deparmentUserTree.setCheckedKeys([])
+				}
+			})
+		},
+		// 选中树节点处理
+		checkedNodeToSelectResult(data) {
+			if (this.isSelectTenantNode(data.id)) {
+				// 如果选中了公司节点，表示选择了所有人
+				const selectUser = this.packageAllUserToResult()
+				if (selectUser) {
+					this.selectResult = []
+					selectUser.nodeId = this.tenantNodeId + ''
+					this.selectResult.push(selectUser)
+				}
+			} else {
+				this.checkedNode(data)
+			}
+		},
+		// 取消当前节点及其子节点的选中状态
+		cancelCheckedNodeAndChildren(data) {
+			if (data.id !== this.tenantNodeId) {
+				// 如果当前节点不是公司节点，需要将公司节点的选中状态去掉
+				this.$refs.deparmentUserTree.setChecked(this.tenantNodeId + '', false)
+			}
+			const children = data.children
+			if (children) {
+				children.forEach((nodeData) => {
+					// 取消节点的选中状态
+					this.$refs.deparmentUserTree.setChecked(nodeData.nodeId, false)
+					// 递归取消子子节点的选中状态
+					this.cancelCheckedNodeAndChildren(nodeData)
+				})
+			}
+		},
+		// 勾选节点时的操作
+		checkedNode(data) {
+			// 勾选当前节点
+			const isExpand =
+					this.$refs.deparmentUserTree.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.deparmentUserTree.setChecked(nodeData.nodeId, false)
+					// 递归取消子节点的孩子节点的选中状态
+					this.cancelChildCheckedNodes(nodeData)
+				})
+			}
+		},
+		// 勾选指定节点及其下的所有用户节点
+		checkedChildrenUserNodes(data, children) {
+			// 勾选指定节点
+			// 勾选指定节点下的用户节点
+			if (children) {
+				const childrenDepartmentIds = []
+				children.forEach((childData) => {
+					if (childData.nodeType === 'USER') {
+						// 勾选用户节点
+						this.$refs.deparmentUserTree.setChecked(childData.nodeId, true)
+						const user = JSON.parse(childData.data)
+						const selectUser = this.packageSelectUser(user)
+						if (selectUser) {
+							selectUser.nodeId = childData.nodeId
+							this.selectResult.push(selectUser)
+						}
+					} else if (childData.nodeType === 'DEPARTMENT') {
+						this.$refs.deparmentUserTree.setChecked(childData.nodeId, true)
+						childrenDepartmentIds.push(childData.id)
+					} else {
+						this.$refs.deparmentUserTree.setChecked(childData.nodeId, false)
+					}
+					if (
+							this.$refs.deparmentUserTree.store.nodesMap[childData.nodeId]
+									.expanded
+					) {
+						// 如果当前子节点已展开，则选中子节点的孩子节点中的用户节点
+						this.checkedChildrenUserNodes(childData)
+					}
+				})
+				// 封装所有子部门及孙子部门的用户
+				this.packageChildrenDepartmentUsers(childrenDepartmentIds)
+			}
+			if (data.id === this.tenantNodeId) {
+				// 如果是公司节点，清除其它所有节点的选中状态，只选中公司节点，表示选择了所有用户
+				this.$refs.deparmentUserTree.setCheckedKeys([])
+			}
+			// 选中当前点击的节点，即使当前点击的是非用户节点也要选中
+			this.$refs.deparmentUserTree.setChecked(data.nodeId, true)
+		},
+		// 封装所有子部门及孙子部门的用户
+		packageChildrenDepartmentUsers(childrenDepartmentIds) {
+			if (childrenDepartmentIds && childrenDepartmentIds.length > 0) {
+				this.getChildrenDepartmentUsers(childrenDepartmentIds).then((users) => {
+					users.forEach((user) => {
+						const selectUser = this.packageSelectUser(user)
+						if (selectUser) {
+							this.selectResult.push(selectUser)
+						}
+					})
+				})
+			}
+		},
+		// 选中非叶子类型的部门节点时，已加载过该节点下的子节点，只需展开该部门，且选中用户节点
+		staticCheckedUserNodes(data) {
+			// 展开当前选中的节点
+			this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded = true
+			// 选中用户节点
+			this.checkedChildrenUserNodes(data, data.children)
+		},
+		// 多选树时，点击节点处理复选框的选中状态
+		handleNodeClick(data, node, nodeTree) {
+			var checkedKeys = []
+			if (this.$refs.deparmentUserTree) {
+				checkedKeys = this.$refs.deparmentUserTree.getCheckedKeys()
+			}
+			if (checkedKeys.indexOf(data.nodeId) > -1) {
+				// 表示当前节点是选中状态，则需要取消其选中状态
+				// 取消当前节点的勾选状态
+				this.$refs.deparmentUserTree.setChecked(data.nodeId, false)
+				// 取消当前节点的子节点的勾选状态
+				this.cancelChildCheckedNodes(data)
+				// 取消选中状态时，保持节点是展开的状态，不要折叠
+				this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded = true
+			} else {
+				// 表示当前节点不是选中的状态，需要勾选该节点
+				if (!this.isContainAllUser()) {
+					if (this.isSelectTenantNode(data.id)) {
+						// 如果选中了公司节点，表示选择了所有人
+						const selectUser = this.packageAllUserToResult()
+						if (selectUser) {
+							this.selectResult = []
+							selectUser.nodeId = this.tenantNodeId + ''
+							this.selectResult.push(selectUser)
+						}
+						this.staticCheckedUserNodes(data)
+					} 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.deparmentUserTree.setChecked(data.nodeId, true)
+						} else {
+							// 表示没有加载过该节点，是首次加载，需要走后台
+							// 会走loadNode方法，因为设置了树组件的expand-on-click-node属性为true
+							this.isClickNode = true
+						}
+					}
+				} else {
+					// 如果已选择所有用户，提示用户，先移除所有用户
+					// 当前节点的当前展开状态
+					const currentExpand =
+							this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded
+					// 当前节点的原展开状态
+					const originalExpand = !currentExpand
+					// 保持当前节点的原展开状态
+					this.$refs.deparmentUserTree.store.nodesMap[data.nodeId].expanded =
+							originalExpand
+					this.alertByAllUser()
+				}
+			}
+		},
+		isUserNode(data) {
+			// 当前节点不是公司节点，节点类型是用户类型时，表示点击的是用户节点
+			return (
+					data.id !== this.tenantNodeId &&
+					data.nodeType &&
+					data.nodeType === 'USER'
+			)
+		},
+		confirmSelectUser() {
+			// 选中的用户结果
+			var selectNodeInfo = {
+				userIds: [],
+				userNames: [],
+				userZhNames: [],
+				userEnNames: [],
+				loginNames: [],
+				emails: [],
+				telephones: [],
+				users: [],
+			}
+			// 是否需要显示提示框，默认不显示
+			var showTip = false
+			if (this.selectResult.length === 0) {
+				// 没有选择任何节点
+				showTip = true
+			} else {
+				for (var i = 0; i < this.selectResult.length; i++) {
+					var userData = this.selectResult[i]
+					// 不存在该用户则放到结果集合中，去掉重复使用
+					selectNodeInfo.userIds.push(userData.id)
+					selectNodeInfo.loginNames.push(userData.loginName)
+					if (userData.email && userData.email !== '') {
+						selectNodeInfo.emails.push(userData.email)
+					}
+					if (userData.telephone && userData.telephone !== '') {
+						selectNodeInfo.telephones.push(userData.telephone)
+					}
+					if (userData.user) {
+						selectNodeInfo.users.push(userData.user)
+					} else {
+						selectNodeInfo.users.push(userData)
+					}
+					var name = userData.name
+					selectNodeInfo.userZhNames.push(name)
+					if (userData.enName && userData.enName.trim() !== '') {
+						selectNodeInfo.userEnNames.push(userData.enName)
+						name = name + '(' + userData.enName + ')'
+					} else {
+						selectNodeInfo.userEnNames.push('')
+					}
+					// if (this.containBranch && userData.subCompanyName) {
+					//   // 如果包含分支机构，则拼接分支机构名称
+					//   name = name + '（' + userData.subCompanyName + '）'
+					// }
+					selectNodeInfo.userNames.push(name)
+				}
+			}
+			if (selectNodeInfo.userIds.length > 0) {
+				selectNodeInfo.containBranch = this.containBranch
+				$emit(this, 'result', selectNodeInfo)
+			} else {
+				showTip = true
+			}
+			if (showTip) {
+				this.$alert(
+						this.$t('imatrixUIMessage.pleaseSelectPersonnel'),
+						this.$t('imatrixUIMessage.tips'),
+						{
+							confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+						}
+				)
+			}
+		},
+		// 是否选中了公司节点
+		isSelectTenantNode(dataId) {
+			return (
+					dataId === this.tenantNodeId &&
+					(!this.departmentInfo || this.departmentInfo.length === 0)
+			)
+		},
+		// 初始化树 或 点击三角展开节点时动态加载子节点
+		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.deparmentUserTree) {
+				checkedKeys = this.$refs.deparmentUserTree.getCheckedKeys()
+			}
+			// 初始化部门人员树
+			this.initLoadDepartment(
+					parentId,
+					node,
+					resolve,
+					checkedKeys,
+					parentNodeId
+			)
+		},
+		// 给节点添加自定义图标
+		// renderContent(h, {node, data, store}) {
+		// 	var className
+		// 	if (node.data.id === -1 || node.data.branch) {
+		// 		// node.id ===-1表示公司节点，node.branch表示是分支机构节点
+		// 		className = 'Menu'
+		// 	} else if (node.data.id === -2 || node.data.id === -3) {
+		// 		// node.id ===-2表示集团公司无部门用户节点,node.id ===-3表示是分支机构无部门用户节点
+		// 		className = 'Tickets'
+		// 	} else if (node.data.nodeType === 'USER') {
+		// 		className = 'User'
+		// 	} else {
+		// 		className = 'Date'
+		// 	}
+		// 	return h(
+		// 			'span',
+		// 			h('el-icon', h(className)),
+		// 			h('span', {title: node.label}, node.label)
+		// 	)
+		// 	// return (
+		// 	//   `<span>
+		// 	//     <i class={className}></i>
+		// 	//     <span title={node.label}>{node.label}</span>
+		// 	//   </span>`
+		// 	// )
+		// },
+	},
+	emits: ['result'],
+}
+</script>
+
+<style>
+.searchResult {
+	color: red;
+}
+
+.inline-select-custom {
+	width: 100px;
+}
+
+.inline-input-custom {
+	width: 98%;
+}
+
+.searchDepartmentUser {
+	width: 250px;
+}
+
+.el-autocomplete-suggestion.el-popper {
+	min-width: 300px;
+}
+</style>