agilebuilder-ui 1.0.0

package/packages/workgroup-user-tree-inline/src/workgroup-user-tree-inline.vue

@@ -0,0 +1,681 @@
+<template>
+	<div>
+		<el-container style="height: 395px">
+			<el-aside width="430px">
+				<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('departmentUserTree.pleaseEnterUserInformation')"
+								:trigger-on-focus="false"
+								class="inline-input inline-input-custom"
+								select-when-unmatched
+								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="workgroupUserTree"
+									:filter-node-method="filterNode"
+									:load="loadNode"
+									:props="defaultProps"
+									:show-checkbox="multiple"
+									lazy
+									node-key="nodeId"
+									@check="handleCheckNode"
+									@node-click="handleNodeClick"
+							>
+								<template #default="{ node, data }">
+							   <span>
+								   <el-icon>
+								   	<Menu v-if="node.data.id === -1"/>
+								   	<Calendar v-else/>
+								   </el-icon>
+								   <span :class="data.nodeType && data.nodeType === 'USER' && searchValue && filterUserVal(data, searchValue)?'searchResult': '' " :title="node.label">
+								   	{{ node.label }}
+								   </span>
+							    </span>
+								</template>
+							</el-tree>
+						</div>
+						<div
+								v-if="searchValue && searchValue.length > 0"
+								style="height: 100%; overflow: hidden"
+						>
+							<workgroup-user-result
+									ref="workgroupUserResult"
+									:grid-data="searchResult"
+									:height="height"
+									:is-search-result="true"
+									:multiple="multiple"
+									:select-result="selectResult"
+									@addWorkgroupUser="addWorkgroupUser"
+									@resultRowDblclick="resultRowDblclick"
+									@selectResult="getSelectWorkgroupUser"
+							/>
+						</div>
+					</el-main>
+				</el-container>
+			</el-aside>
+			<el-container v-if="multiple">
+				<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;'">
+						<workgroup-user-result
+								:grid-data="selectResult"
+								:height="height"
+								:is-search-result="false"
+								:multiple="multiple"
+								@removeWorkgroupUser="removeWorkgroupUser"
+								@resultRowDblclick="resultRowDblclick"
+								@selectResult="getSelectWorkgroupUser"
+						/>
+					</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 workgroupTreeInlineService from './workgroup-tree-inline-service'
+import WorkgroupUserResult from './search-result.vue'
+
+export default {
+	data() {
+		return {
+			filterText: '',
+			defaultProps: {
+				id: 'id',
+				label: 'name',
+				children: 'children',
+				isLeaf: 'leaf',
+			},
+			searchParam: {
+				userField: null,
+				searchValue: null,
+				treeType: 'MAN_GROUP_TREE',
+				departmentInfo: null,
+			},
+			// 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给用户，例如：部门1(分支1)
+			containBranch: false,
+			// 公司节点的id
+			tenantNodeId: -1,
+			// 用于保存所有查询出的节点id
+			allSearchNodeIds: [],
+			// 用于保存allSearchNodeIds中所有已加载子节点的id集合
+			allExpandNodeIds: [],
+			isClickNode: false,
+			// 查询的备选值
+			restaurants: [],
+			// 查询条件
+			searchValue: null,
+			// 工作组的查询结果
+			searchResult: [],
+			// 工作组的选中结果
+			selectResult: [],
+			searchStoreKey: 'searchWorkgroupUser',
+			// 单选时，选择的用户信息
+			selectNodeInfo: null,
+			// 公司根节点信息
+			tenantInfo: {},
+			ElIconSearch,
+		}
+	},
+	name: 'InlineWorkgroupUserTree',
+	components: {
+		WorkgroupUserResult,
+	},
+	props: {
+		// 是否是多选树，默认是true
+		multiple: {
+			type: Boolean,
+			default: true,
+		},
+		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+		branchInfo: {
+			type: Array,
+			default: null,
+		},
+		// 多选用户树时，已选择用户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
+				// 清空查询内容时，重新加载整个树
+				this.loadWorkgroup(this.tenantNodeId, this.tenantNodeId + '')
+			}
+		},
+	},
+	created() {
+	},
+	mounted() {
+		var searchWorkgroup = localStorage.getObject(this.searchStoreKey)
+		if (searchWorkgroup) {
+			this.restaurants = searchWorkgroup
+		} else {
+			this.restaurants = []
+		}
+	},
+	methods: {
+		...utils,
+		...workgroupTreeInlineService,
+		// 将查询结果中指定工作组添加到已选择工作组集合中
+		addWorkgroupUser(index, workgroup) {
+			const containWorkgroups = this.selectResult.filter(
+					this.filterWorkgroup(workgroup)
+			)
+			if (containWorkgroups && containWorkgroups.length === 0) {
+				this.selectResult.push(workgroup)
+			}
+		},
+		filterWorkgroup(queryWorkgroup) {
+			return (workgroup) => {
+				return workgroup.id === queryWorkgroup.id
+			}
+		},
+		removeWorkgroupUser(index, workgroup) {
+			if (this.$refs.workgroupUserTree) {
+				// 通过查询结果添加的工作组，在返回到组织结构树时，也选中了该工作组，在移除该工作组时，需要去掉复选框的选中状态
+				const checkedKeys = this.$refs.workgroupUserTree.getCheckedKeys()
+				const currentCheckedWorkgroupNodeIds = checkedKeys.filter(
+						this.filterUserNode(workgroup)
+				)
+				if (currentCheckedWorkgroupNodeIds.length > 0) {
+					// 表示当前工作组是选中的状态，需要去掉
+					currentCheckedWorkgroupNodeIds.forEach((workgroupNodeId) => {
+						this.$refs.workgroupUserTree.setChecked(workgroupNodeId, false)
+					})
+				}
+			}
+			this.selectResult = this.removeRow(this.selectResult, workgroup)
+			if (!this.selectResult || this.selectResult.length === 0) {
+				// 已选结果面板没有内容，则左侧树节点也不要有选中节点了
+				if (this.$refs.workgroupUserTree) {
+					this.$refs.workgroupUserTree.setCheckedKeys([])
+				}
+			}
+		},
+		getSelectWorkgroupUser(workgroup) {
+			this.packageSelectResult(workgroup)
+		},
+		resultRowDblclick(workgroup) {
+			this.packageSelectResult(workgroup)
+			$emit(this, 'result', this.selectNodeInfo)
+		},
+		packageSelectResult(user) {
+			user.tenantCode = this.tenantInfo.code
+			user.tenantName = this.tenantInfo.tenantName
+			let name = user.name
+			if (user.enName && user.enName.trim() !== '') {
+				name = name + '(' + user.enName + ')'
+			}
+			const selectNodeInfo = {
+				id: user.id,
+				name: name,
+				loginName: user.loginName,
+				email: user.email,
+				telephone: user.telephone,
+				containBranch: this.containBranch,
+				user: user,
+				enName: user.enName,
+				subCompanyName: user.subCompanyName,
+			}
+			// 表示是勾选单选按钮或 选中树节点
+			this.selectNodeInfo = selectNodeInfo
+		},
+		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.branchInfo
+			// // this.searchParam.userField = this.searchField
+			// // 后台查询部门，并拼接树节点
+			// this.filterAppendNodes(value)
+			this.$refs.workgroupUserTree.filter(value)
+		},
+		// 点击查询按钮调用的方法
+		clickSearch() {
+			this.storeSeachValue(localStorage, this.searchStoreKey, this.filterText)
+			this.search(this.filterText)
+		},
+		filterNode(value, data, node) {
+			if (!value) {
+				return true
+			} else {
+				if (data.nodeType && data.nodeType === 'USER') {
+					// data.data是用户的所有数据
+					const user = JSON.parse(data.data)
+					return this.filterUserVal(user, value)
+				} else {
+					// 表示不是用户节点
+					return false
+				}
+			}
+		},
+		filterUserVal(user, searchVal) {
+			const searchFields = [
+				'name',
+				'loginName',
+				'email',
+				'telephone',
+				'jobNumber',
+				'honorificName',
+			]
+			let isHasVal = false
+			for (let i = 0; i < searchFields.length; i++) {
+				const searchField = searchFields[i]
+				const userValue = user[searchField]
+				if (
+						userValue.indexOf(searchVal) !== -1 ||
+						(searchField === 'name' &&
+								user['enName'] &&
+								user['enName'].indexOf(searchVal) !== -1)
+				) {
+					isHasVal = true
+				} else {
+					isHasVal = false
+					break
+				}
+			}
+			return isHasVal
+		},
+		// 点击复选框时处理
+		handleCheckNode(data, checkObj) {
+			if (checkObj.checkedKeys.indexOf(data.nodeId) > -1) {
+				// 表示正选中data节点
+				this.checkedNode(data, false)
+			} else {
+				// 表示正取消选中data节点，同时要取消其子节点的选中状态
+				this.cancelCheckedNode(data)
+			}
+		},
+		// 选中当前节点及其子节点
+		checkedNodeAndChildren(data) {
+			// 取消选中状态时，保持节点是展开的状态，不要折叠
+			this.$refs.workgroupUserTree.store.nodesMap[data.nodeId].expanded = true
+			// 获得所有应该选中的节点
+			this.$refs.workgroupUserTree.setChecked(data.nodeId, true)
+			const children = data.children
+			if (children) {
+				// 递归设置子子节点的选中状态
+				children.forEach((nodeData) => {
+					this.checkedNodeAndChildren(nodeData)
+					this.selectResult.push(JSON.parse(nodeData.data))
+				})
+			}
+		},
+		// 取消节点选中状态时
+		cancelCheckedNode(data) {
+			if (data.id === this.tenantNodeId) {
+				// 表示取消公司节点的选中状态，即取消所有节点的勾选状态
+				this.$refs.workgroupUserTree.setCheckedKeys([])
+			} else if (data.nodeType && data.nodeType === 'WORKGROUP') {
+				this.cancelCheckedUserNodesWithWorkgroup(data)
+			} else {
+				this.selectResult = this.removeRow(
+						this.selectResult,
+						JSON.parse(data.data)
+				)
+			}
+		},
+		// 选中了根节点公司节点时，选中所有工作组
+		checkedAllWorkgroups(root) {
+			const children = root.children
+			if (children) {
+				children.forEach((workgroupNode) => {
+					this.$refs.workgroupUserTree.setChecked(workgroupNode.nodeId, true)
+				})
+			}
+		},
+		// 取消指定工作组下的用户节点的选中状态
+		cancelCheckedUserNodesWithWorkgroup(workgroupData) {
+			const children = workgroupData.children
+			if (children) {
+				children.forEach((userNode) => {
+					this.$refs.workgroupUserTree.setChecked(userNode.nodeId, false)
+					this.selectResult = this.removeRow(
+							this.selectResult,
+							JSON.parse(userNode.data)
+					)
+				})
+			}
+		},
+		handleNodeClick(data, node, nodeTree) {
+			if (this.multiple) {
+				// 多选部门树时，处理点击节点事件
+				this.clickNodeWhenMultiple(data)
+			}
+			this.selectSingleNode(data, false)
+		},
+		selectSingleNode(data, isClickOkBtn) {
+			if (this.isUserNode(data) && !this.multiple) {
+				// 点击的是工作组节点，并且是单选树时，点击部门节点直接关闭弹框
+				const user = JSON.parse(data.data)
+				user.tenantCode = this.tenantInfo.code
+				user.tenantName = this.tenantInfo.tenantName
+				let name = user.name
+				if (user.enName && user.enName.trim() !== '') {
+					name = name + '(' + user.enName + ')'
+				}
+				const selectNodeInfo = {
+					id: user.id,
+					name: name,
+					loginName: user.loginName,
+					email: user.email,
+					telephone: user.telephone,
+					containBranch: this.containBranch,
+					user: user,
+					enName: user.enName,
+					subCompanyName: user.subCompanyName,
+				}
+				this.selectNodeInfo = selectNodeInfo
+				if (isClickOkBtn === true) {
+					// 点击确定按钮时才需要调result回调事件，关闭弹框
+					$emit(this, 'result', selectNodeInfo)
+					console.log('3=====setSelectNodeInfo=====', selectNodeInfo)
+				}
+			}
+		},
+		// 多选树时，点击节点处理复选框的选中状态
+		clickNodeWhenMultiple(data) {
+			var checkedKeys = []
+			if (this.$refs.workgroupUserTree) {
+				checkedKeys = this.$refs.workgroupUserTree.getCheckedKeys()
+			}
+			// 取消选中状态时，保持节点是展开的状态，不要折叠
+			this.$refs.workgroupUserTree.store.nodesMap[data.nodeId].expanded = true
+			if (checkedKeys.indexOf(data.nodeId) > -1) {
+				// 表示当前节点是选中状态，则需要取消其选中状态
+				// 取消当前节点的勾选状态
+				this.$refs.workgroupUserTree.setChecked(data.nodeId, false)
+				this.cancelCheckedNode(data)
+			} else {
+				// 表示当前节点不是选中的状态，需要勾选该节点
+				this.$refs.workgroupUserTree.setChecked(data.nodeId, true)
+				this.checkedNode(data, true)
+			}
+		},
+		isUserNode(data) {
+			// 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
+			return (
+					data.id !== this.tenantNodeId &&
+					data.nodeType &&
+					data.nodeType === 'USER'
+			)
+		},
+		singleSetValue() {
+			let showTip = false
+			if (this.searchValue) {
+				console.log('this.selectNodeInfo', this.selectNodeInfo)
+				if (this.selectNodeInfo) {
+					$emit(this, 'result', this.selectNodeInfo)
+				} else {
+					showTip = true
+				}
+			} else {
+				const data = this.$refs.workgroupUserTree.getCurrentNode()
+				if (data && data !== null && this.isUserNode(data)) {
+					this.selectSingleNode(data, true)
+				} else {
+					showTip = true
+				}
+			}
+			this.showTip(showTip)
+		},
+		multipleSetValue() {
+			let showTip = false
+			// 选中的用户结果
+			var selectNodeInfo = {
+				userIds: [],
+				userNames: [],
+				loginNames: [],
+				emails: [],
+				telephones: [],
+				users: [],
+			}
+			if (this.searchValue) {
+				if (this.selectResult.length > 0) {
+					this.selectResult.forEach((workgroupData) => {
+						this.addSelectedUserInfo(selectNodeInfo, workgroupData)
+					})
+					$emit(this, 'result', selectNodeInfo)
+				} else {
+					showTip = true
+				}
+			} else {
+				var parentIds = []
+				var nodes = this.$refs.workgroupUserTree.getCheckedNodes()
+				if (nodes) {
+					if (nodes.length === 0) {
+						// 没有选择任何节点
+						showTip = true
+					} else {
+						for (var i = 0; i < nodes.length; i++) {
+							var node = nodes[i]
+							if (this.isSelectTenantNode(node.id)) {
+								// 表示选择了所有工作组人员
+								selectNodeInfo.userIds = []
+								selectNodeInfo.userNames = []
+								selectNodeInfo.userIds.push(node.id)
+								selectNodeInfo.userNames.push('所有工作组人员')
+								break
+							} else if (node.id !== this.tenantNodeId) {
+								// 不是公司根节点
+								if (node.leaf) {
+									// 如果是叶子节点
+									if (this.isUserNode(node)) {
+										const user = JSON.parse(node.data)
+										this.addSelectedUserInfo(selectNodeInfo, user)
+									}
+								} else {
+									// 表示是工作组节点，且该节点下存在用户
+									const userDatas = node.children
+									if (userDatas && userDatas.length > 0) {
+										// 表示已展开过该工作组
+										userDatas.forEach((userData) => {
+											const user = JSON.parse(userData.data)
+											this.addSelectedUserInfo(selectNodeInfo, user)
+										})
+									} else {
+										// 表示没有展开过该节点，需要去后台获得该工作组下的人员信息
+										parentIds.push(node.id)
+									}
+								}
+							}
+						}
+						if (parentIds.length > 0) {
+							// 表示选中的工作组节点未展开过，则需要去后台查询获得这些工作组下的人员集合
+							this.getAllSelectedWorkgroupUsers(parentIds, selectNodeInfo)
+							showTip = false
+						} else {
+							if (selectNodeInfo.userIds.length > 0) {
+								$emit(this, 'result', selectNodeInfo)
+								console.log('1=====setSelectNodeInfo=====', selectNodeInfo)
+							} else {
+								showTip = true
+							}
+						}
+					}
+				} else {
+					showTip = true
+				}
+			}
+			this.showTip(showTip)
+		},
+		showTip(showTip) {
+			// 是否需要显示提示框，默认不显示
+			if (showTip) {
+				this.$alert(
+						this.$t('imatrixUIMessage.pleaseSelectPersonnel'),
+						this.$t('imatrixUIMessage.tips'),
+						{
+							confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+						}
+				)
+			}
+		},
+		selectWorkgroupUser() {
+			if (this.multiple) {
+				this.multipleSetValue()
+			} else {
+				this.singleSetValue()
+			}
+		},
+		// 是否选中了公司节点
+		isSelectTenantNode(dataId) {
+			return (
+					dataId === this.tenantNodeId &&
+					(!this.branchInfo || this.branchInfo.length === 0)
+			)
+		},
+		// 将选中的部门节点添加到结果集合中
+		addSelectedUserInfo(result, user) {
+			const filterResult = result.userIds.filter(this.filterUserId(user))
+			if (filterResult.length === 0) {
+				let name = user.name
+				if (user.enName && user.enName !== '') {
+					name = name + '(' + user.enName + ')'
+				}
+				// if (this.containBranch && user.subCompanyName) {
+				// // 如果包含分支机构，则拼接分支机构名称
+				//   name = name + '（' + user.subCompanyName + '）'
+				// }
+				user.tenantCode = this.tenantInfo.code
+				user.tenantName = this.tenantInfo.tenantName
+				result.containBranch = this.containBranch
+				result.users.push(user)
+				result.userIds.push(user.id)
+				result.loginNames.push(user.loginName)
+				result.userNames.push(name)
+				result.emails.push(user.email)
+				result.telephones.push(user.telephone)
+			}
+		},
+		filterUserId(queryWorkgroup) {
+			return (workgroupNodeId) => {
+				return workgroupNodeId === queryWorkgroup.id
+			}
+		},
+		filterUserNode(queryUser) {
+			return (userNodeId) => {
+				// 用户节点的id的分隔符，USER~departmentId~userId
+				const nodeIdSeparator = '~'
+				const userId = userNodeId.substring(
+						userNodeId.lastIndexOf(nodeIdSeparator) + 1
+				)
+				return userId === queryUser.id + ''
+			}
+		},
+		// 给节点添加自定义图标
+		// renderContent(h, {node, data, store}) {
+		// 	var className
+		// 	if (node.data.id === -1) {
+		// 		// node.id ===-1表示公司节点，node.branch表示是分支机构节点
+		// 		className = 'Menu'
+		// 	} else {
+		// 		// 表示是工作组节点
+		// 		className = 'Date'
+		// 	}
+		// 	if (
+		// 			data.nodeType &&
+		// 			data.nodeType === 'USER' &&
+		// 			this.searchValue &&
+		// 			this.filterUserVal(data, this.searchValue)
+		// 	) {
+		// 		// 如果是查询条件
+		// 		return h(
+		// 				'span',
+		// 				h('el-icon', h(className)),
+		// 				h('span', {class: searchResult, title: node.label}, node.label)
+		// 		)
+		// 		//     return `<span>
+		// 		//   <i class={className}></i>
+		// 		//   <span class="searchResult" title={node.label}>
+		// 		//     {node.label}
+		// 		//   </span>
+		// 		// </span>`
+		// 	}
+		// 	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-input-custom {
+	width: 90%;
+}
+</style>

package/packages/year-range-picker/index.js

@@ -0,0 +1,6 @@
+import YearRangePicker from './src/year-range-picker.vue'
+YearRangePicker.install = function (Vue) {
+  Vue.component(YearRangePicker.name, YearRangePicker)
+}
+
+export default YearRangePicker