agilebuilder-ui 1.0.0

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

@@ -0,0 +1,539 @@
+<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">
+						<el-autocomplete
+								v-model="filterText"
+								:fetch-suggestions="querySearch"
+								:placeholder="$t('imatrixUIMessage.pleaseEnterTeamName')"
+								:trigger-on-focus="false"
+								class="inline-input inline-input-custom"
+								select-when-unmatched
+								@select="handleSelect"
+								@keyup.enter="clickSearch"
+						>
+							<template v-slot:append>
+								<el-button :icon="ElIconSearch" @click="clickSearch"/>
+							</template>
+						</el-autocomplete>
+					</el-header>
+					<el-main>
+						<div
+								v-if="!searchValue"
+								style="
+                padding-top: 5px;
+                overflow: auto;
+                width: auto;
+                display: inline-block !important;
+              "
+						>
+							<el-tree
+									ref="workgroupTree"
+									:filter-node-method="filterNode"
+									:load="loadNode"
+									:props="defaultProps"
+									:show-checkbox="multiple"
+									lazy
+									node-key="id"
+									@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 === 'WORKGROUP' && 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"
+						>
+							<workgroup-result
+									ref="workgroupResult"
+									:grid-data="searchResult"
+									:height="height"
+									:is-search-result="true"
+									:multiple="multiple"
+									:select-result="selectResult"
+									@addWorkgroup="addWorkgroup"
+									@resultRowDblclick="resultRowDblclick"
+									@selectResult="getSelectWorkgroup"
+							/>
+						</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('imatrixUIMessage.selectedWorkingGroup') }}:
+					</div>
+					<div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
+						<workgroup-result
+								:grid-data="selectResult"
+								:height="height"
+								:is-search-result="false"
+								:multiple="multiple"
+								@removeWorkgroup="removeWorkgroup"
+								@resultRowDblclick="resultRowDblclick"
+								@selectResult="getSelectWorkgroup"
+						/>
+					</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 workgroupTreeService from './workgroup-tree-service'
+import WorkgroupResult from './search-result.vue'
+
+export default {
+	data() {
+		return {
+			filterText: '',
+			defaultProps: {
+				id: 'id',
+				label: 'name',
+				children: 'children',
+				isLeaf: 'leaf',
+			},
+			// 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给工作组，例如：部门1(分支1)
+			containBranch: false,
+			// 公司节点的id
+			tenantNodeId: -1,
+			// 查询的备选值
+			restaurants: [],
+			// 查询条件
+			searchValue: null,
+			// 工作组的查询结果
+			searchResult: [],
+			// 工作组的选中结果
+			selectResult: [],
+			searchStoreKey: 'searchWorkgroup',
+			// 单选时，选择的工作组信息
+			selectNodeInfo: null,
+			selectWorkgroupData: null,
+			// 公司根节点信息
+			tenantInfo: {},
+			ElIconSearch,
+		}
+	},
+	name: 'InlineWorkgroupTree',
+	components: {
+		WorkgroupResult,
+	},
+	props: {
+		// 是否是多选树，默认是true
+		multiple: {
+			type: Boolean,
+			default: true,
+		},
+		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+		branchInfo: {
+			type: Array,
+			default: null,
+		},
+	},
+	computed: {},
+	watch: {
+		filterText(val) {
+			if (!val) {
+				this.searchValue = val
+				// 清空查询内容时，重新加载整个树
+				this.loadWorkgroup(this.tenantNodeId)
+			}
+		},
+	},
+	mounted() {
+		var searchWorkgroup = localStorage.getObject(this.searchStoreKey)
+		if (searchWorkgroup) {
+			this.restaurants = searchWorkgroup
+		} else {
+			this.restaurants = []
+		}
+	},
+	methods: {
+		...utils,
+		...workgroupTreeService,
+		// 将查询结果中指定工作组添加到已选择工作组集合中
+		addWorkgroup(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
+			}
+		},
+		removeWorkgroup(index, workgroup) {
+			if (this.$refs.workgroupTree) {
+				// 通过查询结果添加的工作组，在返回到组织结构树时，也选中了该工作组，在移除该工作组时，需要去掉复选框的选中状态
+				const checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
+				const currentCheckedWorkgroupNodeIds = checkedKeys.filter(
+						this.filterWorkgroupNode(workgroup)
+				)
+				if (currentCheckedWorkgroupNodeIds.length > 0) {
+					// 表示当前工作组是选中的状态，需要去掉
+					currentCheckedWorkgroupNodeIds.forEach((workgroupNodeId) => {
+						this.$refs.workgroupTree.setChecked(workgroupNodeId, false)
+					})
+				}
+			}
+			this.selectResult = this.removeRow(this.selectResult, workgroup)
+			if (!this.selectResult || this.selectResult.length === 0) {
+				// 已选结果面板没有内容，则左侧树节点也不要有选中节点了
+				if (this.$refs.workgroupTree) {
+					this.$refs.workgroupTree.setCheckedKeys([])
+				}
+			}
+		},
+		filterWorkgroupNode(queryWorkgroup) {
+			return (workgroupNodeId) => {
+				return workgroupNodeId === queryWorkgroup.id
+			}
+		},
+		getSelectWorkgroup(workgroup) {
+			this.packageSelectResult(workgroup)
+		},
+		resultRowDblclick(workgroup) {
+			this.packageSelectResult(workgroup)
+			$emit(this, 'result', this.selectNodeInfo)
+		},
+		packageSelectResult(workgroup) {
+			workgroup.tenantCode = this.tenantInfo.code
+			workgroup.tenantName = this.tenantInfo.tenantName
+			const selectNodeInfo = {
+				id: workgroup.id,
+				name: workgroup.name,
+				code: workgroup.code,
+				subCompanyName: workgroup.subCompanyName,
+				workgroup: workgroup,
+			}
+			// 表示是勾选单选按钮或 选中树节点
+			this.selectNodeInfo = selectNodeInfo
+		},
+		handleSelect(item) {
+			this.handleSelectUtil(item, localStorage)
+		},
+		search(value) {
+			this.searchValue = value
+			this.$refs.workgroupTree.filter(value)
+		},
+		// 点击查询按钮调用的方法
+		clickSearch() {
+			this.storeSeachValue(localStorage, this.searchStoreKey, this.filterText)
+			this.search(this.filterText)
+		},
+		filterNode(value, data, node) {
+			if (!value) {
+				return true
+			} else {
+				var workgroupName = data.name
+				if (data.id === this.tenantNodeId) {
+					// 表示是根节点公司节点
+					return false
+				} else if (this.containBranch) {
+					// 如果包含分支，工作组节点显示的格式为：工作组名称(分支名称)
+					workgroupName = workgroupName.substring(
+							0,
+							workgroupName.lastIndexOf('(')
+					)
+				}
+				return workgroupName.indexOf(value) !== -1
+			}
+		},
+		// 点击复选框时处理
+		handleCheckNode(data, checkObj) {
+			if (checkObj.checkedKeys.indexOf(data.id) > -1) {
+				// 表示正选中data节点
+				if (data.id === this.tenantNodeId) {
+					// 表示选中了公司节点
+					this.checkedAllWorkgroups(data)
+				} else {
+					this.selectResult.push(JSON.parse(data.data))
+				}
+			} else {
+				// 表示正取消选中data节点，同时要取消其子节点的选中状态
+				if (data.id === this.tenantNodeId) {
+					// 表示取消公司节点的选中状态，即取消所有节点的勾选状态
+					this.$refs.workgroupTree.setCheckedKeys([])
+				} else {
+					this.selectResult = this.removeRow(
+							this.selectResult,
+							JSON.parse(data.data)
+					)
+				}
+			}
+		},
+		// 选中了根节点公司节点时，选中所有工作组
+		checkedAllWorkgroups(root) {
+			const children = root.children
+			if (children) {
+				children.forEach((workgroupNode) => {
+					this.$refs.workgroupTree.setChecked(workgroupNode.id, true)
+				})
+			}
+		},
+		handleNodeClick(data, node, nodeTree) {
+			if (this.multiple) {
+				// 多选部门树时，处理点击节点事件
+				this.clickNodeWhenMultiple(data)
+			}
+			this.selectSingleNode(data, false)
+		},
+		selectSingleNode(data, isClickOkBtn) {
+			if (this.isWorkgroupNode(data) && !this.multiple) {
+				// 点击的是工作组节点，并且是单选树时，点击部门节点直接关闭弹框
+				const workgroup = JSON.parse(data.data)
+				workgroup.tenantCode = this.tenantInfo.code
+				workgroup.tenantName = this.tenantInfo.tenantName
+				var selectNodeInfo = {
+					id: data.id,
+					name: data.name,
+					code: workgroup.code,
+					containBranch: this.containBranch,
+					workgroup: workgroup,
+				}
+				this.selectNodeInfo = selectNodeInfo
+				if (isClickOkBtn === true) {
+					// 点击确定按钮时才需要调result回调事件，关闭弹框
+					$emit(this, 'result', selectNodeInfo)
+				}
+			}
+		},
+		// 多选树时，点击节点处理复选框的选中状态
+		clickNodeWhenMultiple(data) {
+			var checkedKeys = []
+			if (this.$refs.workgroupTree) {
+				checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
+			}
+			// 取消选中状态时，保持节点是展开的状态，不要折叠
+			this.$refs.workgroupTree.store.nodesMap[data.id].expanded = true
+			if (checkedKeys.indexOf(data.id) > -1) {
+				// 表示当前节点是选中状态，则需要取消其选中状态
+				// 取消当前节点的勾选状态
+				this.$refs.workgroupTree.setChecked(data.id, false)
+				if (data.id === this.tenantNodeId) {
+					// 表示取消公司节点的选中状态，即取消所有节点的勾选状态
+					this.$refs.workgroupTree.setCheckedKeys([])
+				} else {
+					this.selectResult = this.removeRow(
+							this.selectResult,
+							JSON.parse(data.data)
+					)
+				}
+			} else {
+				// 表示当前节点不是选中的状态，需要勾选该节点
+				this.$refs.workgroupTree.setChecked(data.id, true)
+				if (data.id === this.tenantNodeId) {
+					// 表示当前正选中根节点公司节点，则需要勾选所有节点的选中状态
+					this.checkedAllWorkgroups(data)
+				} else {
+					this.selectResult.push(JSON.parse(data.data))
+				}
+			}
+		},
+		isWorkgroupNode(data) {
+			// 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
+			return (
+					data.id !== this.tenantNodeId &&
+					data.nodeType &&
+					data.nodeType === 'WORKGROUP'
+			)
+		},
+		singleSetValue() {
+			let showTip = false
+			if (this.searchValue) {
+				if (this.selectNodeInfo) {
+					$emit(this, 'result', this.selectNodeInfo)
+				} else {
+					showTip = true
+				}
+			} else {
+				const data = this.$refs.workgroupTree.getCurrentNode()
+				if (data && data !== null && this.isWorkgroupNode(data)) {
+					this.selectSingleNode(data, true)
+				} else {
+					showTip = true
+				}
+			}
+			this.showTip(showTip)
+		},
+		multipleSetValue() {
+			let showTip = false
+			var selectNodeInfo = {
+				ids: [],
+				names: [],
+				codes: [],
+				workgroups: [],
+			}
+			if (this.searchValue) {
+				if (this.selectResult.length > 0) {
+					this.selectResult.forEach((workgroupData) => {
+						const node = {
+							id: workgroupData.id,
+							name: workgroupData.name,
+							code: workgroupData.code,
+						}
+						this.addSelectedWorkgroupInfo(selectNodeInfo, node, workgroupData)
+					})
+					$emit(this, 'result', selectNodeInfo)
+				} else {
+					showTip = true
+				}
+			} else {
+				var nodes = this.$refs.workgroupTree.getCheckedNodes()
+				if (nodes) {
+					if (nodes.length === 0) {
+						// 没有选择任何节点
+						showTip = true
+					} else {
+						for (var i = 0; i < nodes.length; i++) {
+							var node = nodes[i]
+							if (node.id !== this.tenantNodeId) {
+								// 不是公司根节点，表示是工作组节点，直接存到结果集合中
+								// node.data是部门对象的json字符串信息，通过JSON.parse(node.data)将json字符串转为对象
+								const workgroupData = JSON.parse(node.data)
+								this.addSelectedWorkgroupInfo(
+										selectNodeInfo,
+										node,
+										workgroupData
+								)
+							}
+						}
+						if (selectNodeInfo.ids.length > 0) {
+							$emit(this, 'result', selectNodeInfo)
+						} else {
+							showTip = true
+						}
+					}
+				} else {
+					showTip = true
+				}
+			}
+			this.showTip(showTip)
+		},
+		selectWorkgroup() {
+			if (this.multiple) {
+				this.multipleSetValue()
+			} else {
+				this.singleSetValue()
+			}
+		},
+		showTip(showTip) {
+			// 是否需要显示提示框，默认不显示
+			if (showTip) {
+				this.$alert(
+						this.$t('imatrixUIMessage.pleaseSelectATeam'),
+						this.$t('imatrixUIMessage.tips'),
+						{
+							confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+						}
+				)
+			}
+		},
+		// 将选中的部门节点添加到结果集合中
+		addSelectedWorkgroupInfo(result, node, workgroup) {
+			workgroup.tenantCode = this.tenantInfo.code
+			workgroup.tenantName = this.tenantInfo.tenantName
+			result.containBranch = this.containBranch
+			result.ids.push(node.id)
+			result.workgroups.push(workgroup)
+			result.codes.push(workgroup.code)
+			result.names.push(node.name)
+		},
+		// 初始化树 或 点击三角展开节点时动态加载子节点
+		loadNode(node, resolve) {
+			var parentId = 0
+			if (node.level === 0) {
+				// 表示初始化树
+				parentId = 0
+			} else {
+				parentId = node.data.id
+			}
+			var checkedKeys = []
+			if (this.$refs.workgroupTree) {
+				checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
+			}
+			// 初始化部门树
+			this.initLoad(parentId, node, resolve, checkedKeys)
+		},
+		// 给节点添加自定义图标
+		// 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 === 'WORKGROUP' &&
+		// 			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>`
+		// },
+	},
+	emits: ['result'],
+}
+</script>
+
+<style>
+.searchResult {
+	color: red;
+}
+
+.inline-input-custom {
+	width: 90%;
+}
+</style>

package/packages/workgroup-tree-inline/src/workgroup-tree-service.js

@@ -0,0 +1,93 @@
+import * as Vue from 'vue'
+import { getI18n } from '../../../src/utils/util'
+const workgroupTreeService = {
+  // 初始化部门树
+  initLoad(parentId, node, resolve, checkedKeys) {
+    const param = {
+      parentId: parentId,
+      departmentInfo: this.branchInfo,
+    }
+    this.$http
+      .post(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/workgroups',
+        param
+      )
+      .then((data) => {
+        resolve(data)
+        // 更新当前点击的节点的子节点
+        this.$refs.workgroupTree.updateKeyChildren(parentId, data)
+        if (parentId === 0) {
+          // 初始化树时，展开公司节点
+          const tenantData = data[0].data
+          this.tenantInfo = JSON.parse(tenantData)
+          this.containBranch = data[0].containBranch
+          // 加载整个组织结构树时，展开公司节点
+          this.loadWorkgroup(this.tenantNodeId)
+        }
+        // 表示是点击三角展开节点时
+        if (
+          checkedKeys &&
+          checkedKeys.indexOf(parentId) > -1 &&
+          parentId === this.tenantNodeId
+        ) {
+          // 点击公司名称前的三角标识展开节点时，保持当前节点的选中状态
+          // 表示当前展开的节点是选中状态，则应保持其选中状态，并选中其子节点
+          this.checkedAllWorkgroups(node.data)
+        }
+      })
+  },
+  // 加载当前节点的子节点
+  loadWorkgroup(parentId) {
+    const param = {
+      parentId: parentId,
+      departmentInfo: this.branchInfo,
+    }
+    this.$http
+      .post(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/workgroups',
+        param
+      )
+      .then((children) => {
+        this.$refs.workgroupTree.updateKeyChildren(parentId, children)
+        if (this.$refs.workgroupTree.store.nodesMap[parentId]) {
+          this.$refs.workgroupTree.store.nodesMap[parentId].expanded = true
+        }
+      })
+  },
+  querySearch(queryString, cb) {
+    this.searchValue = queryString
+    this.searchResult = []
+    this.selectNodeInfo = null
+    if (queryString && queryString.length > 0) {
+      this.filterAppendNodes(queryString)
+      cb([])
+    } else {
+      cb([])
+    }
+  },
+  filterAppendNodes(value) {
+    const param = {
+      searchValue: value,
+    }
+    this.$http
+      .post(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/search-workgroups',
+        param
+      )
+      .then((result) => {
+        this.searchResult = result
+        if (this.searchResult.length === 0) {
+          this.$message({
+            showClose: true,
+            type: 'error',
+            message: getI18n().t('imatrixUIMessage.queryResultIsEmpty'),
+          })
+          return
+        }
+      })
+  },
+}
+export default workgroupTreeService

package/packages/workgroup-user-tree/index.js

@@ -0,0 +1,6 @@
+import WorkgroupUserTree from './src/workgroup-user-tree.vue'
+WorkgroupUserTree.install = function (Vue) {
+  Vue.component(WorkgroupUserTree.name, WorkgroupUserTree)
+}
+
+export default WorkgroupUserTree