agilebuilder-ui 1.0.0

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

@@ -0,0 +1,367 @@
+<template>
+	<div>
+		<el-container style="height: 395px">
+			<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" @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="false"
+							check-strictly
+							lazy
+							node-key="id"
+							@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 :class="data.nodeType && data.nodeType === 'DEPARTMENT' && searchValue && data.name.indexOf(searchValue) > -1?'searchResult': '' " :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="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 utils from '../../utils/utils'
+import departmentTreeService from './department-tree-service'
+import memoryCacheUtils from '../../utils/memory-cache-utils'
+import UserResult from './search-result.vue'
+
+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: [],
+			memoryCacheKey: 'DEPARTMENT_MEMORY_KEY',
+			// 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
+			memoryCacheData: [],
+			ElIconSearch,
+		}
+	},
+	name: 'InlineDepartmentSingleTree',
+	components: {
+		UserResult,
+	},
+	props: {
+		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+		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)
+				}
+			}
+		},
+	},
+	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
+			// 获得所有应该选中的节点
+			this.$refs.deparmentTree.setChecked(data.id, true)
+			const childDepartments = data.childDepartments
+			if (childDepartments) {
+				// 递归设置子子节点的选中状态
+				childDepartments.forEach((nodeData) => {
+					this.checkedNodeAndChildren(nodeData)
+				})
+			}
+		},
+		// 取消当前节点的子节点的选中状态
+		cancelChildCheckedNodes(data) {
+			if (data.id !== this.tenantNodeId) {
+				// 如果当前节点不是公司节点，需要将公司节点的选中状态去掉
+				this.$refs.deparmentTree.setChecked(this.tenantNodeId, false)
+			}
+			const childDepartments = data.childDepartments
+			if (childDepartments) {
+				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.selectSingleNode(data, false)
+		},
+		selectSingleNode(data, isClickOkBtn) {
+			// 表示是部门树节点
+			if (this.isDepartmentNode(data)) {
+				// 点击的是部门节点，并且是单选树时，点击部门节点直接关闭弹框
+				const department = JSON.parse(data.data)
+				this.packageSelectResult(department)
+				this.setMemoryCacheData(department, 'department')
+				// if (this.selectNodeInfo && isClickOkBtn === true) {
+				// // 点击确定按钮时才需要调result回调事件，关闭弹框
+				//   this.$emit('result', this.selectNodeInfo)
+				// }
+			}
+		},
+		packageSelectResult(department) {
+			department.tenantName = this.tenantInfo.tenantName
+			department.tenantCode = this.tenantInfo.code
+			var selectNodeInfo = {
+				id: department.id,
+				name: department.showName,
+				code: department.code,
+				containBranch: this.containBranch,
+				zhName: department.name,
+				enName: department.enName,
+				department: department,
+			}
+			this.selectNodeInfo = selectNodeInfo
+		},
+		isDepartmentNode(data) {
+			// 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
+			return (
+					data.id !== this.tenantNodeId &&
+					data.nodeType &&
+					data.nodeType === 'DEPARTMENT' &&
+					!data.branch
+			)
+		},
+		selectDepartment() {
+			// 是否需要显示提示框，默认不显示
+			var showTip = false
+			// const data = this.$refs.deparmentTree.getCurrentNode()
+			if (this.selectNodeInfo) {
+				// this.selectSingleNode(data, true)
+				$emit(this, 'result', this.selectNodeInfo)
+			} 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'
+		// 	}
+		// 	if (
+		// 			data.nodeType &&
+		// 			data.nodeType === 'DEPARTMENT' &&
+		// 			this.searchValue &&
+		// 			data.name.indexOf(this.searchValue) > -1
+		// 	) {
+		// 		// 如果是查询条件
+		// 		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>`
+		// 	// )
+		// },
+		getSelectUser(selectUser) {
+			// console.log('getSelectUser==', selectUser)
+			// this.selectUser = selectUser
+			// true参数表示是否是勾选单选框，是勾选单选框时不关闭弹框
+			this.packageSelectResult(selectUser)
+			// 搜索选中记忆
+			this.setMemoryCacheData(selectUser, 'department')
+		},
+		resultRowDblclick(user) {
+			this.packageSelectResult(user)
+			$emit(this, 'result', this.selectNodeInfo)
+		},
+	},
+	emits: ['result'],
+}
+</script>
+
+<style>
+.searchResult {
+	color: red;
+}
+
+.inline-input-custom {
+	width: 100% !important;
+}
+
+.el-autocomplete-suggestion.el-popper {
+	min-width: 300px;
+}
+</style>

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

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <inline-department-multi-tree
+      v-if="multiple"
+      ref="inlineDeparmentTree"
+      :height="height"
+      :check-strictly="checkStrictly"
+      :department-info="departmentInfo"
+      :select-department-info="selectDepartmentInfo"
+      :search-field="searchField"
+      :separator="separator"
+      @result="result"
+    />
+    <inline-department-single-tree
+      v-if="!multiple"
+      ref="inlineDeparmentTree"
+      :department-info="departmentInfo"
+      @result="result"
+    />
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import InlineDepartmentMultiTree from './department-multi-tree-inline.vue'
+import InlineDepartmentSingleTree from './department-single-tree-inline.vue'
+export default {
+  name: 'InlineDepartmentTree',
+  components: {
+    InlineDepartmentMultiTree,
+    InlineDepartmentSingleTree,
+  },
+  props: {
+    // 是否是多选树，默认是true
+    multiple: {
+      type: Boolean,
+      default: true,
+    },
+    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: ',',
+    },
+  },
+  data() {
+    return {
+      selectNodeInfo: null, // 单选时，选择的用户信息
+    }
+  },
+  mounted() {},
+  methods: {
+    result(selectNodeInfo) {
+      this.selectNodeInfo = selectNodeInfo
+      $emit(this, 'result', selectNodeInfo)
+    },
+    selectDepartment() {
+      this.$refs.inlineDeparmentTree.selectDepartment()
+    },
+  },
+  emits: ['result'],
+}
+</script>