agilebuilder-ui 1.0.0

package/packages/department-tree-inline/src/department-multi-tree-inline.vue

@@ -0,0 +1,494 @@
+<template>
+	<div>
+		<el-container style="height: 395px">
+			<el-aside width="350px">
+				<el-container style="height: 390px">
+					<el-header style="text-align: right; font-size: 12px; height: 35px">
+						<el-autocomplete
+								v-model="filterText"
+								:fetch-suggestions="querySearch"
+								:placeholder="
+                $t('departmentTreeInline.pleaseEnterDepartmentName')
+              "
+								class="inline-input inline-input-custom"
+								size="default"
+								@select="handleSelect"
+								@keyup.enter="clickSearch"
+						>
+							<template v-slot:append>
+								<el-button
+										:icon="ElIconSearch"
+										size="default"
+										@click="clickSearch"
+								/>
+							</template>
+						</el-autocomplete>
+					</el-header>
+					<el-main style="padding: 10px">
+						<div
+								v-if="!searchValue"
+								style="
+                padding-top: 5px;
+                overflow: auto;
+                width: 100%;
+                display: inline-block !important;
+              "
+						>
+							<el-tree
+									ref="deparmentTree"
+									:filter-node-method="filterNode"
+									:load="loadNode"
+									:props="defaultProps"
+									:show-checkbox="true"
+									check-strictly
+									lazy
+									node-key="id"
+									@check="handleCheckNode"
+									@check-change="handleCheckChange"
+									@node-expand="handleNodeExpand"
+									@node-click="handleNodeClick"
+							>
+								<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"/>
+											<Calendar v-else/>
+										</el-icon>
+										<span :title="node.label">
+											{{ node.label }}
+										</span>
+									</span>
+								</template>
+							</el-tree>
+						</div>
+
+						<div
+								v-if="searchValue && searchValue.length > 0"
+								style="height: 100%; overflow: hidden"
+						>
+							<user-result
+									: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('departmentTreeInline.selectedDept') }}:
+					</div>
+					<div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
+						<user-result
+								v-loading="isloading"
+								:grid-data="selectResult"
+								:height="height"
+								:is-search-result="false"
+								:multiple="true"
+								@removeUser="removeUser"
+						/>
+					</div>
+				</el-main>
+			</el-container>
+		</el-container>
+	</div>
+</template>
+
+<script>
+import {Search as ElIconSearch} from '@element-plus/icons-vue'
+import {$emit} from '../../utils/gogocodeTransfer'
+import localStorage from '../../../src/utils/local-storage'
+import utils from '../../utils/utils'
+import departmentTreeService from './department-tree-service'
+import UserResult from './search-result.vue'
+import memoryCacheUtils from '../../utils/memory-cache-utils'
+
+export default {
+	data() {
+		return {
+			filterText: '',
+			defaultProps: {
+				id: 'id',
+				label: 'showName',
+				children: 'childDepartments',
+				isLeaf: 'leaf',
+			},
+			searchParam: {
+				searchValue: null,
+				treeType: 'DEPARTMENT_TREE',
+				departmentInfo: null,
+			},
+			count: 0,
+			// 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给用户，例如：部门1(分支1)
+			containBranch: false,
+			// 公司节点的id
+			tenantNodeId: -1,
+			// 用于保存所有查询出的节点id
+			allSearchNodeIds: [],
+			// 用于保存allSearchNodeIds中所有已加载子节点的id集合
+			allExpandNodeIds: [],
+			isClickNode: false,
+			// 查询的备选值
+			restaurants: [],
+			// 查询条件
+			searchValue: null,
+			searchStoreKey: 'searchDepartment',
+			// 单选时，选择的部门信息
+			selectNodeInfo: null,
+			// 公司根节点信息
+			tenantInfo: {},
+			searchResult: [],
+			selectResult: [],
+			// 控制右侧选择区的loading状态
+			isloading: false,
+			multiple: true,
+			memoryCacheKey: 'DEPARTMENT_MEMORY_KEY',
+			// 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
+			memoryCacheData: [],
+			ElIconSearch,
+		}
+	},
+	name: 'InlineDepartmentMultiTree',
+	components: {
+		UserResult,
+	},
+	props: {
+		checkStrictly: {
+			type: Boolean,
+			default: false,
+		},
+		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+		departmentInfo: {
+			type: Array,
+			default: null,
+		},
+		// 弹框的高度
+		height: {
+			type: String,
+			default: '300px',
+		},
+		// 多选部门树时，已选择部门id或部门名称或编码集合，多个之间以逗号隔开
+		selectDepartmentInfo: {
+			type: [String, Number],
+			default: null,
+		},
+		// 移除部门时，部门属性名称：id、name、code，默认是id
+		searchField: {
+			type: String,
+			default: 'id',
+		},
+		// 多选树时结果之间的分隔符，默认是逗号分隔
+		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)
+				}
+			}
+		},
+	},
+	created() {
+		this.initSelectDepts(
+				this.searchField,
+				this.selectDepartmentInfo,
+				this.separator
+		).then((selectUsers) => {
+			if (selectUsers) {
+				this.selectResult = selectUsers
+			}
+		})
+	},
+	mounted() {
+		var searchDepartment = localStorage.getObject(this.searchStoreKey)
+		if (searchDepartment) {
+			this.restaurants = searchDepartment
+		} else {
+			this.restaurants = []
+		}
+		this.getMemoryCacheData('department')
+	},
+	methods: {
+		...utils,
+		...departmentTreeService,
+		...memoryCacheUtils,
+		filterNode(value, data, node) {
+			if (!value) {
+				return true
+			} else {
+				return data.name.indexOf(value) !== -1
+			}
+		},
+		// 选中当前节点及其子节点
+		checkedNodeAndChildren(data) {
+			// 取消选中状态时，保持节点是展开的状态，不要折叠
+			// this.$refs.deparmentTree.store.nodesMap[data.id].expanded = true
+			let department = data
+			if (data.data) {
+				department = JSON.parse(data.data)
+			}
+			this.selectUser(null, department)
+			// 获得所有应该选中的节点
+			this.$refs.deparmentTree.setChecked(data.id, true)
+			const childDepartments = data.childDepartments
+			if (childDepartments && !this.checkStrictly) {
+				// 递归设置子子节点的选中状态
+				childDepartments.forEach((nodeData) => {
+					this.checkedNodeAndChildren(nodeData)
+				})
+			}
+		},
+		// 取消当前节点的子节点的选中状态
+		cancelChildCheckedNodes(data) {
+			const department = JSON.parse(data.data)
+			this.selectResult = this.removeRow(this.selectResult, department)
+			if (data.id !== this.tenantNodeId) {
+				// 如果当前节点不是公司节点，需要将公司节点的选中状态去掉
+				this.$refs.deparmentTree.setChecked(this.tenantNodeId, false)
+			}
+			const childDepartments = data.childDepartments
+			if (childDepartments && !this.checkStrictly) {
+				childDepartments.forEach((nodeData) => {
+					// 取消节点的选中状态
+					this.$refs.deparmentTree.setChecked(nodeData.id, false)
+					// 递归取消子子节点的选中状态
+					this.cancelChildCheckedNodes(nodeData)
+				})
+			}
+		},
+		handleCheckChange(data, checked, indeterminate) {
+		},
+		handleNodeExpand(data, node, nodeTree) {
+		},
+		handleNodeClick(data, node, nodeTree) {
+			// 多选部门树时，处理点击节点事件
+			this.clickNodeWhenMultiple(data)
+		},
+		// 多选树时，点击节点处理复选框的选中状态
+		clickNodeWhenMultiple(data) {
+			var checkedKeys = []
+			if (this.$refs.deparmentTree) {
+				checkedKeys = this.$refs.deparmentTree.getCheckedKeys()
+			}
+			if (checkedKeys && checkedKeys.indexOf(data.id) > -1) {
+				// 表示当前节点是选中状态，则需要取消其选中状态
+				// 取消当前节点的勾选状态
+				this.$refs.deparmentTree.setChecked(data.id, false)
+				// 取消当前节点的子节点的勾选状态
+				if (!this.checkStrictly) {
+					this.cancelChildCheckedNodes(data)
+				}
+				// 取消选中状态时，保持节点是展开的状态，不要折叠
+				this.$refs.deparmentTree.store.nodesMap[data.id].expanded = true
+			} else {
+				// 表示当前节点不是选中的状态，需要勾选该节点
+				if (data.nodeType && data.nodeType === 'DEPARTMENT' && data.data) {
+					// 表示当前选中的节点是部门
+					const department = JSON.parse(data.data)
+					this.selectUser(null, department)
+				}
+				this.$refs.deparmentTree.setChecked(data.id, true)
+				// 点击树节点时添加并展开节点会走loadNode方法，因为设置了树组件的expand-on-click-node属性为true
+				const children = data.childDepartments
+				if (children && children.length > 0) {
+					// 表示加载过该节点，直接选中即可
+					if (!this.checkStrictly) {
+						this.checkedNodeAndChildren(data)
+					}
+				} else {
+					// 表示没有加载过该节点，是首次加载，需要走后台
+					// 会走loadNode方法，因为设置了树组件的expand-on-click-node属性为true
+					this.isClickNode = true
+				}
+			}
+		},
+		isDepartmentNode(data) {
+			// 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
+			return (
+					data.id !== this.tenantNodeId &&
+					data.nodeType &&
+					data.nodeType === 'DEPARTMENT' &&
+					!data.branch
+			)
+		},
+		selectDepartment() {
+			// 是否需要显示提示框，默认不显示
+			var showTip = false
+			var leafSelectNodeInfo = {
+				ids: [],
+				names: [],
+				codes: [],
+				zhNames: [],
+				enNames: [],
+				departments: [],
+			}
+			if (this.selectResult.length === 0) {
+				// 没有选择任何节点
+				showTip = true
+			} else {
+				for (var i = 0; i < this.selectResult.length; i++) {
+					var userData = this.selectResult[i]
+					// 不存在该用户则放到结果集合中，去掉重复使用
+					leafSelectNodeInfo.ids.push(userData.id)
+					leafSelectNodeInfo.codes.push(userData.code)
+					if (userData.enName) {
+						leafSelectNodeInfo.enNames.push(userData.enName)
+					} else {
+						leafSelectNodeInfo.enNames.push('')
+					}
+					if (userData.department) {
+						leafSelectNodeInfo.departments.push(userData.department)
+					} else {
+						leafSelectNodeInfo.departments.push(userData)
+					}
+					const name = userData.showName
+					leafSelectNodeInfo.names.push(name)
+					leafSelectNodeInfo.zhNames.push(userData.name)
+				}
+			}
+			if (leafSelectNodeInfo.ids.length > 0) {
+				leafSelectNodeInfo.containBranch = this.containBranch
+				$emit(this, 'result', leafSelectNodeInfo)
+			} else {
+				showTip = true
+			}
+			if (showTip) {
+				this.$alert(
+						this.$t('imatrixUIMessage.pleaseSelectDepartment'),
+						this.$t('imatrixUIMessage.tips'),
+						{
+							confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+						}
+				)
+			}
+		},
+		// 是否选中了公司节点
+		isSelectTenantNode(dataId) {
+			return (
+					dataId === this.tenantNodeId &&
+					(!this.departmentInfo || this.departmentInfo.length === 0)
+			)
+		},
+		// 给节点添加自定义图标
+		// 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 {
+		// 		// 表示是部门节点
+		// 		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>`
+		// 	// )
+		// },
+		// 将查询结果中指定用户添加到已选择用户集合中
+		selectUser(index, dept) {
+			// if (!this.isContainAllUser()) {
+			const containUsers = this.selectResult.filter(this.filterDept(dept))
+			if (containUsers && containUsers.length === 0) {
+				// 如果已选结果中不包含当前用户，则添加
+				// 将查询结果中的用户复制到已选择用户集合中
+				dept.tenantCode = this.tenantInfo.code
+				dept.tenantName = this.tenantInfo.tenantName
+				this.selectResult.push(dept)
+				// 搜索选中记忆
+				this.setMemoryCacheData(dept, 'department')
+			}
+			// } else {
+			//   this.alertByAllUser()
+			// }
+		},
+		// 判断用户是否存在的过滤器
+		filterDept(queryDept) {
+			return (dept) => {
+				return dept.id === queryDept.id
+			}
+		},
+		filterDeptNode(queryDept) {
+			return (deptNodeId) => {
+				return deptNodeId + '' === queryDept.id + ''
+			}
+		},
+		// 从已选择用户集合中移除指定用户，并添加到查询结果集合中
+		removeUser(index, dept) {
+			// 表示是在组织结构树页面，需要将树的人员节点的选中状态去掉
+			if (dept.nodeId) {
+				const nodeId = dept.nodeId
+				if (this.$refs.deparmentTree && nodeId) {
+					this.$refs.deparmentTree.setChecked(nodeId, false)
+				}
+			} else {
+				if (this.$refs.deparmentTree) {
+					// 通过查询结果添加的用户，在返回到组织结构树时，也选中了该用户，在移除该用户时，需要去掉复选框的选中状态
+					const checkedKeys = this.$refs.deparmentTree.getCheckedKeys()
+					const currentCheckedUserNodeIds = checkedKeys.filter(
+							this.filterDeptNode(dept)
+					)
+					if (currentCheckedUserNodeIds.length > 0) {
+						// 表示当前用户是选中的状态，需要去掉
+						currentCheckedUserNodeIds.forEach((userNodeId) => {
+							this.$refs.deparmentTree.setChecked(userNodeId, false)
+						})
+					}
+				}
+			}
+			this.selectResult = this.removeRow(this.selectResult, dept)
+			if (!this.selectResult || this.selectResult.length === 0) {
+				// 已选结果面板没有内容，则左侧树节点也不要有选中节点了
+				if (this.$refs.deparmentTree) {
+					this.$refs.deparmentTree.setCheckedKeys([])
+				}
+			}
+		},
+	},
+	emits: ['result'],
+}
+</script>
+
+<style>
+.searchResult {
+	color: red;
+}
+
+.inline-input-custom {
+	width: 90%;
+}
+
+.el-autocomplete-suggestion.el-popper {
+	min-width: 300px;
+}
+</style>