imatrix-ui 0.0.1-dsn

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

@@ -0,0 +1,357 @@
+<template>
+	<div>
+		<el-container style="height: 395px">
+			<el-header style="font-size: 12px; height: 35px">
+				<el-autocomplete
+						v-model="filterText"
+						:fetch-suggestions="querySearch"
+						:placeholder="$t('departmentUserTree.pleaseEnterUserInformation')"
+						class="inline-input 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; width: 100%">
+				<div
+						v-if="!searchValue || searchResult.length === 0"
+						style="
+            padding-top: 5px;
+            overflow: auto;
+            width: auto;
+            display: inline-block !important;
+          "
+				>
+					<el-tree
+							ref="deparmentUserTree"
+							:load="loadNode"
+							:props="defaultProps"
+							lazy
+							node-key="nodeId"
+							@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"/>
+									<User v-else-if="node.data.nodeType === 'USER'"/>
+									<Calendar v-else/>
+								</el-icon>
+								<span :title="node.label">
+									{{ node.label }}
+								</span>
+							</span>
+						</template>
+					</el-tree>
+				</div>
+				<div
+						v-if="
+            searchValue && searchValue.length > 0 && searchResult.length > 0
+          "
+						style="height: 100%; overflow: hidden"
+				>
+					<user-result
+							ref="userResult"
+							:contain-branch="containBranch"
+							:grid-data="searchResult"
+							:height="height"
+							:multiple="false"
+							@resultRowDblclick="resultRowDblclick"
+							@selectResult="getSelectUser"
+					/>
+				</div>
+			</el-main>
+		</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 UserResult from './search-result.vue'
+import utils from '../../utils/utils'
+import departmentUserTreeSingleService from './department-user-tree-single-service'
+import memoryCacheUtils from '../../utils/memory-cache-utils'
+
+export default {
+	data() {
+		return {
+			filterText: '',
+			defaultProps: {
+				id: 'id',
+				label: 'showName',
+				children: 'children',
+				isLeaf: 'leaf',
+			},
+			searchParam: {
+				userField: null,
+				searchValue: null,
+				treeType: 'MAN_DEPARTMENT_TREE',
+				departmentInfo: null,
+			},
+			count: 0,
+			// 当前租户内是否包含分支机构。获得当前选中用户名称时，如果有分支，则需要将分支名称返回给用户，例如：张三(分支1)
+			containBranch: false,
+			// 公司节点的id
+			tenantNodeId: -1,
+			// 查询的用户属性集合
+			searchFields: [],
+			searchField: 'name',
+			// 查询的备选值
+			restaurants: [],
+			// 查询条件
+			searchValue: null,
+			// 用户的查询结果
+			searchResult: [],
+			searchStoreKey: 'searchDepartmentUser',
+			// 公司根节点信息
+			tenantInfo: {},
+			// 选择的用户原信息
+			selectUser: null,
+			// 封装后的用户信息，即用户结果
+			selectNodeInfo: null,
+			// 节点没有双击事件，手动实现双击事件，参数用来记录次数
+			notMultipleClickNum: null,
+			// 节点没有双击事件，手动实现双击事件，参数用来记录节点
+			notMultipleClickNode: null,
+			memoryCacheKey: 'DEPARTMENT_USER_MEMORY_KEY',
+			// 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
+			memoryCacheData: [],
+			ElIconSearch,
+		}
+	},
+	name: 'InlineDepartmentUserSingleTree',
+	components: {
+		UserResult,
+	},
+	props: {
+		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+		departmentInfo: {
+			type: Array,
+			default: null,
+		},
+		// 弹框的高度
+		height: {
+			type: String,
+			default: '300px',
+		},
+		// 是否需要显示虚拟用户
+		isNeedVirtualUser: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {},
+	watch: {
+		filterText(val) {
+			if (!val) {
+				this.searchValue = val
+				// 清空查询内容时，重新加载整个树
+				if (this.departmentInfo && this.departmentInfo.length > 0) {
+					// 加载指定部门时，展开公司节点
+					this.loadPointDepartments(this)
+				} else {
+					// 加载整个组织结构树时，展开公司节点
+					this.loadDepartment(this.tenantNodeId, this.tenantNodeId + '')
+				}
+			}
+		},
+	},
+	created() {
+		this.searchFields = this.getSearchUserFields()
+	},
+	mounted() {
+		var searchDepartmentUser = localStorage.getObject(this.searchStoreKey)
+		if (searchDepartmentUser) {
+			this.restaurants = searchDepartmentUser
+		} else {
+			this.restaurants = []
+		}
+		this.getMemoryCacheData('departmentUser')
+	},
+	methods: {
+		...utils,
+		...departmentUserTreeSingleService,
+		...memoryCacheUtils,
+		// selectUser(row, column, event) {
+		//   this.packageSelectResult(row)
+		// },
+		handleNodeClick(data, node, nodeTree) {
+			if (this.isUserNode(data)) {
+				const user = JSON.parse(data.data)
+				user.tenantName = this.tenantInfo.tenantName
+				user.tenantCode = this.tenantInfo.code
+				// 搜索选中记忆
+				this.setMemoryCacheData(user, 'departmentUser')
+				// 点击的是用户节点，并且是单选树时，点击部门节点直接关闭弹框
+				this.packageSelectResult(user)
+				if (
+						this.notMultipleClickNode &&
+						this.notMultipleClickNode.id === node.id
+				) {
+					this.notMultipleClickNum++
+					// 表示第二次点击
+					// 判断次数
+					if (this.notMultipleClickNum === 2) {
+						this.notMultipleClickNum = 0
+						this.notMultipleClickNode = null
+						// 关闭弹窗
+						$emit(this, 'result', this.selectNodeInfo)
+					}
+				} else {
+					this.notMultipleClickNode = node
+					this.notMultipleClickNum = 1
+				}
+				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 + ')'
+			}
+			if (this.containBranch && user.subCompanyName) {
+				// 如果包含分支机构，则拼接分支机构名称
+				// name = name + '（' + user.subCompanyName + '）'
+			}
+			const selectNodeInfo = {
+				id: user.id,
+				name: name,
+				zhName: user.name,
+				loginName: user.loginName,
+				email: user.email,
+				telephone: user.telephone,
+				containBranch: this.containBranch,
+				user: user,
+				enName: user.enName,
+				subCompanyName: user.subCompanyName,
+			}
+			// 表示是勾选单选按钮或 选中树节点
+			this.selectNodeInfo = selectNodeInfo
+		},
+		isUserNode(data) {
+			// 当前节点不是公司节点，节点类型是用户类型时，表示点击的是用户节点
+			return (
+					data.id !== this.tenantNodeId &&
+					data.nodeType &&
+					data.nodeType === 'USER'
+			)
+		},
+		confirmSelectUser() {
+			if (this.selectNodeInfo) {
+				$emit(this, 'result', this.selectNodeInfo)
+			} else {
+				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>`
+		// 	// )
+		// },
+		getSelectUser(selectUser) {
+			// console.log('getSelectUser==', selectUser)
+			this.selectUser = selectUser
+			// 搜索选中记忆
+			this.setMemoryCacheData(selectUser, 'departmentUser')
+			// true参数表示是否是勾选单选框，是勾选单选框时不关闭弹框
+			this.packageSelectResult(selectUser)
+		},
+		resultRowDblclick(user) {
+			this.packageSelectResult(user)
+			$emit(this, 'result', this.selectNodeInfo)
+		},
+	},
+	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>

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

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <inline-department-user-multi-tree
+      v-if="multiple"
+      ref="userTree"
+      :height="height"
+      :department-info="departmentInfo"
+      :select-user-info="selectUserInfo"
+      :search-field="searchField"
+      :separator="separator"
+      @result="result"
+    />
+    <inline-department-user-single-tree
+      v-if="!multiple"
+      ref="userTree"
+      :height="height"
+      :department-info="departmentInfo"
+      @result="result"
+    />
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import InlineDepartmentUserSingleTree from './department-user-single-tree-inline.vue'
+import InlineDepartmentUserMultiTree from './department-user-multiple-tree-inline.vue'
+export default {
+  name: 'InlineDepartmentUserTree',
+  components: {
+    InlineDepartmentUserSingleTree,
+    InlineDepartmentUserMultiTree,
+  },
+  props: {
+    // 是否是多选树，默认是true
+    multiple: {
+      type: Boolean,
+      default: true,
+    },
+    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+    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: ',',
+    },
+  },
+  data() {
+    return {
+      selectNodeInfo: null, // 单选时，选择的用户信息
+    }
+  },
+  methods: {
+    result(selectNodeInfo) {
+      this.selectNodeInfo = selectNodeInfo
+      $emit(this, 'result', selectNodeInfo)
+    },
+    // 嵌入树，多选时，点击确定时调用的方法
+    confirmSelectUser() {
+      this.$refs.userTree.confirmSelectUser()
+    },
+  },
+  emits: ['result'],
+}
+</script>