agilebuilder-ui 1.0.0

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

@@ -0,0 +1,104 @@
+<template>
+	<div>
+		<el-dialog
+				:close-on-click-modal="false"
+				:title="myTitle"
+				:width="multiple ? '60%' : '40%'"
+				append-to-body
+				class="user-tree"
+				model-value
+				@close="$emit('close')"
+				@closed="$emit('closed')"
+				@open="$emit('open')"
+				@opend="$emit('opend')"
+		>
+			<inline-workgroup-user-tree
+					ref="workgroupUserTree"
+					:branch-info="branchInfo"
+					:multiple="multiple"
+					:search-field="searchField"
+					:select-user-info="selectUserInfo"
+					:separator="separator"
+					@result="result"
+			/>
+			<template v-slot:footer>
+				<div class="dialog-footer">
+					<el-button size="default" @click="$emit('close')">
+						{{ $t('imatrixUIPublicModel.cancel') }}
+					</el-button>
+					<el-button size="default" type="primary" @click="selectWorkgroupUser">
+						{{ $t('imatrixUIPublicModel.sure') }}
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
+import InlineWorkgroupUserTree from '../../workgroup-user-tree-inline/src/workgroup-user-tree-inline.vue'
+
+export default {
+	name: 'WorkgroupUserTree',
+	components: {
+		InlineWorkgroupUserTree,
+	},
+	props: {
+		// 是否是多选树，默认是true
+		multiple: {
+			type: Boolean,
+			default: true,
+		},
+		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+		branchInfo: {
+			type: Array,
+			default: null,
+		},
+		// 弹框的标题
+		title: {
+			type: String,
+			default: null,
+		},
+		// 弹框的宽度
+		width: {
+			type: String,
+			default: '30%',
+		},
+		// 多选用户树时，已选择用户id或登录名集合，多个之间以逗号隔开
+		selectUserInfo: {
+			type: [String, Number],
+			default: null,
+		},
+		// 移除用户时，用户属性名称：id、loginName、email、telephone，默认是loginName
+		searchField: {
+			type: String,
+			default: 'loginName',
+		},
+		// 多选树时结果之间的分隔符，默认是逗号分隔
+		separator: {
+			type: String,
+			default: ',',
+		},
+	},
+	data() {
+		let myTitle = this.$t('imatrixUIMessage.pleaseSelectATeam')
+		if (this.title) {
+			myTitle = this.title
+		}
+		return {
+			myTitle,
+		}
+	},
+	methods: {
+		result(selectNodeInfo) {
+			$emit(this, 'close', selectNodeInfo)
+		},
+		// 嵌入树，多选时，点击确定时调用的方法
+		selectWorkgroupUser() {
+			this.$refs.workgroupUserTree.selectWorkgroupUser()
+		},
+	},
+	emits: ['open', 'opend', 'close', 'closed', 'opend', 'close', 'closed'],
+}
+</script>

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

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

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

@@ -0,0 +1,270 @@
+<template>
+	<div style="height: 100%">
+		<el-table
+				ref="superGrid"
+				:data="gridData"
+				:max-height="myHeight"
+				:row-class-name="tableRowClassName"
+				border
+				fit
+				row-key="id"
+				@row-click="rowClick"
+				@row-dblclick="rowDblclick"
+		>
+			<el-table-column v-if="multiple === false" fixed width="60">
+				<template v-slot="scope">
+					<el-radio
+							v-model="singleUserIndex"
+							:label="scope.$index"
+							@change="selectWorkgroupUser"
+					>
+						{{ scope.$index + 1 }}
+					</el-radio>
+				</template>
+			</el-table-column>
+			<el-table-column
+					v-if="multiple && isSearchResult"
+					:label="$t('imatrixUIPublicModel.edit')"
+					align="center"
+					fixed
+					width="60px"
+			>
+				<template v-slot="scope">
+					<div>
+						<el-button
+								:disabled="isDisable(scope.row)"
+								:icon="ElIconPlus"
+								circle
+								size="default"
+								type="primary"
+								@click="addWorkgroupUser(scope.$index, scope.row)"
+						/>
+					</div>
+				</template>
+			</el-table-column>
+			<el-table-column
+					v-if="multiple && !isSearchResult"
+					:label="$t('imatrixUIPublicModel.edit')"
+					align="center"
+					fixed
+					width="60px"
+			>
+				<template v-slot="scope">
+					<div>
+						<el-button
+								:icon="ElIconDelete"
+								circle
+								size="default"
+								type="danger"
+								@click="removeWorkgroupUser(scope.$index, scope.row)"
+						/>
+					</div>
+				</template>
+			</el-table-column>
+			<el-table-column
+					v-if="multiple"
+					:label="$t('superGrid.index')"
+					align="center"
+					width="60px"
+			>
+				<template v-slot="scope">
+					{{ scope.$index + 1 }}
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('departmentUserTreeInline.name')"
+					:width="130"
+					prop="name"
+			>
+				<template v-slot="scope">
+          <span
+		          v-if="scope.row.enName && scope.row.enName.trim() !== ''"
+		          :title="scope.row.name + '(' + scope.row.enName + ')'"
+		          class="ellipsis cell--span"
+          >{{ scope.row.name + '(' + scope.row.enName + ')' }}</span
+          >
+					<span v-else :title="scope.row.name" class="ellipsis cell--span">{{
+            scope.row.name
+          }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('departmentUserTreeInline.loginName')"
+					:width="110"
+					prop="loginName"
+			>
+				<template v-slot="scope">
+          <span :title="scope.row.loginName" class="ellipsis cell--span">{{
+            scope.row.loginName
+          }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('departmentUserTreeInline.department')"
+					:min-width="160"
+					prop="mainDepartmentName"
+			>
+				<template v-slot="scope">
+          <span
+		          :title="
+              language && language !== 'cn' && scope.row.mainDepartmentEnName
+                ? scope.row.mainDepartmentEnName
+                : scope.row.mainDepartmentName
+            "
+		          class="ellipsis cell--span"
+          >{{
+              language && language !== 'cn' && scope.row.mainDepartmentEnName
+                ? scope.row.mainDepartmentEnName
+                : scope.row.mainDepartmentName
+            }}</span
+          >
+				</template>
+			</el-table-column>
+			<!--由于保密要求，邮箱不能显示，需要脱敏处理，暂时注释掉，不显示-->
+			<!-- <el-table-column
+							:label="$t('departmentUserTreeInline.email')"
+							:width="130"
+							prop="email"
+						>
+							<template slot-scope="scope">
+								<span class="ellipsis cell--span" :title="scope.row.email">{{ scope.row.email }}</span>
+							</template>
+						</el-table-column> -->
+			<el-table-column
+					v-if="containBranch"
+					:label="$t('departmentUserTreeInline.branch')"
+					:width="130"
+					prop="subCompanyName"
+			>
+				<template v-slot="scope">
+          <span :title="scope.row.subCompanyName" class="ellipsis cell--span">{{
+            scope.row.subCompanyName
+          }}</span>
+				</template>
+			</el-table-column>
+		</el-table>
+	</div>
+</template>
+
+<script>
+import {Plus as ElIconPlus, Delete as ElIconDelete} from '@element-plus/icons-vue'
+import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
+
+export default {
+	data() {
+		let tableHeight = this.height
+		tableHeight = tableHeight.substring(0, tableHeight.indexOf('px'))
+		const myHeight = parseInt(tableHeight) + 30 + 'px'
+		return {
+			// 选中的用户序号
+			singleUserIndex: null,
+			selectedUser: null,
+			myHeight,
+			language: !window.$locale ? 'cn' : window.$locale,
+			ElIconPlus,
+			ElIconDelete,
+		}
+	},
+	name: 'UserResult',
+	props: {
+		gridData: {
+			type: Array,
+			default: null,
+		},
+		containBranch: {
+			type: Boolean,
+			default: false,
+		},
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+		// 多选树时是否是查询结果列表，用于控制“操作”列按钮的显示
+		isSearchResult: {
+			type: Boolean,
+			default: true,
+		},
+		height: {
+			type: String,
+			default: '300px',
+		},
+		selectResult: {
+			type: Array,
+			default: function () {
+				return []
+			},
+		},
+	},
+	created() {
+	},
+	methods: {
+		// 单选树时，点击行事件
+		// rowClick(row, column, event) {
+		//   this.selectedUser = row
+		//   // this.$emit('rowClick', row, column, event)
+		// },
+		// 移除工作组
+		removeWorkgroupUser(index, row) {
+			$emit(this, 'removeWorkgroupUser', index, row)
+		},
+		// 添加工作组
+		addWorkgroupUser(index, row) {
+			$emit(this, 'addWorkgroupUser', index, row)
+		},
+		// 选中工作组
+		selectWorkgroupUser(selectVal) {
+			$emit(this, 'selectResult', this.gridData[selectVal])
+		},
+		rowClick(row, column, event) {
+			this.singleUserIndex = row.row_index
+			$emit(this, 'selectResult', row)
+		},
+		tableRowClassName({row, rowIndex}) {
+			row.row_index = rowIndex
+		},
+		rowDblclick(row, column, event) {
+			if (this.multiple) {
+				$emit(this, 'addWorkgroupUser', null, row)
+			} else {
+				$emit(this, 'resultRowDblclick', row)
+			}
+		},
+		isDisable(row) {
+			if (this.selectResult) {
+				const containUsers = this.selectResult.filter(this.filterDept(row))
+				if (containUsers && containUsers.length > 0) {
+					return true
+				}
+			}
+			return false
+		},
+		// 判断用户是否存在的过滤器
+		filterDept(queryDept) {
+			return (dept) => {
+				return dept.id === queryDept.id
+			}
+		},
+	},
+	emits: [
+		'removeWorkgroupUser',
+		'addWorkgroupUser',
+		'selectResult',
+		'resultRowDblclick',
+		,
+	],
+}
+</script>
+
+<style>
+.searchResult {
+	color: red;
+}
+
+.inline-select-custom {
+	width: 100px;
+}
+
+.inline-input-custom {
+	width: 98%;
+}
+</style>

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

@@ -0,0 +1,239 @@
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import * as Vue from 'vue'
+import { getI18n } from '../../../src/utils/util'
+const workgroupTreeInlineService = {
+  // 后台查询部门，并拼接树节点
+  filterAppendNodes(value) {
+    this.$http
+      .post(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/searches',
+        this.searchParam
+      )
+      .then((result) => {
+        if (result) {
+          if (result.length === 0) {
+            this.$message({
+              showClose: true,
+              type: 'error',
+              message: getI18n().t('imatrixUIMessage.queryResultIsEmpty'),
+            })
+            return
+          }
+          // result的格式为[WORKGROUP~1,WORKGROUP~4,WORKGROUP~10]
+          result.forEach((nodeId) => {
+            var dataId = nodeId
+            // 节点类型和数据id的分隔符
+            var nodeTypeAndDataIdSeparator = '~'
+            // nodeId格式为WORKGROUP~4
+            if (nodeId.indexOf(nodeTypeAndDataIdSeparator) > -1) {
+              dataId = nodeId.substring(nodeId.indexOf('~') + 1)
+            }
+            if (this.allSearchNodeIds.indexOf(nodeId) === -1) {
+              // 表示没有加载过该节点，需要放到allSearchNodeIds集合中,并加载该节点内容
+              this.allSearchNodeIds.push(nodeId)
+              this.loadWorkgroup(dataId, nodeId, true, value)
+            }
+          })
+        } else {
+          this.$message({
+            showClose: true,
+            type: 'error',
+            message: getI18n().t('imatrixUIMessage.queryResultIsEmpty'),
+          })
+        }
+      })
+  },
+  // 选中节点时
+  checkedNode(data, isClickNode) {
+    const children = data.children
+    if (children && children.length > 0) {
+      // 展开当前选中的节点
+      this.$refs.workgroupUserTree.store.nodesMap[data.nodeId].expanded = true
+      // 选中当前节点及其子节点
+      this.checkedNodeAndChildren(data)
+    } else {
+      if (!data.leaf) {
+        // 不是叶子节点，并且没有加载过该父节点的子节点时，需要走后台展开子节点
+        if (!isClickNode) {
+          var param = {
+            parentId: data.id,
+            departmentInfo: this.branchInfo,
+          }
+          this.$http
+            .post(
+              window.$vueApp.config.globalProperties.baseAPI +
+                '/component/organization-trees/workgroup-users',
+              param
+            )
+            .then((result) => {
+              // 更新当前点击的节点的子节点
+              this.$refs.workgroupUserTree.updateKeyChildren(
+                data.nodeId,
+                result
+              )
+              // 展开当前选中的节点
+              this.$refs.workgroupUserTree.store.nodesMap[
+                data.nodeId
+              ].expanded = true
+              // 获得所有应该选中的节点
+              this.checkedNodeAndChildren(data)
+            })
+        } else {
+          this.isClickNode = true
+        }
+      } else {
+        this.addWorkgroupUser(null, JSON.parse(data.data))
+      }
+    }
+  },
+  // 获得所有指定工作组下的用户信息
+  getAllSelectedWorkgroupUsers(parentIds, selectNodeInfo) {
+    this.$http
+      .post(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/user-in-workgroups',
+        parentIds
+      )
+      .then((users) => {
+        users.forEach((user) => {
+          this.addSelectedUserInfo(selectNodeInfo, user)
+        })
+        if (selectNodeInfo.userIds.length > 0) {
+          $emit(this, 'result', selectNodeInfo)
+        } else {
+          this.$alert(
+            getI18n().t('imatrixUIMessage.pleaseSelectPersonnel'),
+            getI18n().t('imatrixUIMessage.tips'),
+            {
+              confirmButtonText: getI18n().t('imatrixUIPublicModel.sure'),
+            }
+          )
+        }
+      })
+  },
+  // 初始化树 或 点击三角展开节点时动态加载子节点
+  loadNode(node, resolve) {
+    var parentId = 0
+    var parentNodeId = '0'
+    if (node.level === 0) {
+      // 表示初始化树
+      parentId = 0
+      parentNodeId = '0'
+    } else {
+      parentId = node.data.id
+      parentNodeId = node.data.nodeId
+    }
+    var checkedKeys = []
+    if (this.$refs.workgroupUserTree) {
+      checkedKeys = this.$refs.workgroupUserTree.getCheckedKeys()
+    }
+    // 初始化部门树
+    this.initLoad(parentId, parentNodeId, node, resolve, checkedKeys)
+  },
+  // 初始化部门树
+  initLoad(parentId, parentNodeId, node, resolve, checkedKeys) {
+    const param = {
+      parentId: parentId,
+      departmentInfo: this.branchInfo,
+    }
+    this.$http
+      .post(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/workgroup-users',
+        param
+      )
+      .then((data) => {
+        resolve(data)
+        // 更新当前点击的节点的子节点
+        this.$refs.workgroupUserTree.updateKeyChildren(parentNodeId, data)
+        if (parentId === 0) {
+          // 初始化树时，展开公司节点
+          const tenantData = data[0].data
+          this.tenantInfo = JSON.parse(tenantData)
+          this.containBranch = data[0].containBranch
+          // 加载整个组织结构树时，展开公司节点
+          this.loadWorkgroup(this.tenantNodeId, this.tenantNodeId + '')
+        }
+        if (this.isClickNode) {
+          // 表示点击工作组节点选中时展开
+          this.isClickNode = false
+          this.checkedNode(node.data)
+        } else {
+          // 表示是点击三角展开节点时
+          if (checkedKeys && checkedKeys.indexOf(parentNodeId) > -1) {
+            // 点击公司名称前的三角标识展开节点时，保持当前节点的选中状态
+            // 表示当前展开的节点是选中状态，则应保持其选中状态，并选中其子节点
+            this.checkedNode(node.data)
+          }
+        }
+      })
+  },
+  // 加载当前节点的子节点
+  loadWorkgroup(parentId, parentNodeId, isSearch, searchValue) {
+    const param = {
+      parentId: parentId,
+      departmentInfo: this.branchInfo,
+    }
+    this.$http
+      .post(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/workgroup-users',
+        param
+      )
+      .then((children) => {
+        this.$refs.workgroupUserTree.updateKeyChildren(parentNodeId, children)
+        if (this.$refs.workgroupUserTree.store.nodesMap[parentNodeId]) {
+          this.$refs.workgroupUserTree.store.nodesMap[parentNodeId].expanded =
+            true
+        }
+        if (isSearch) {
+          // 查询时处理
+          if (this.allExpandNodeIds.indexOf(parentNodeId) === -1) {
+            // allExpandNodeIds集合中是否包含当前parentId节点id
+            this.allExpandNodeIds.push(parentNodeId)
+          }
+          if (this.allExpandNodeIds.length === this.allSearchNodeIds.length) {
+            // 表示所有节点已展开，执行树的过滤方法
+            this.$refs.workgroupUserTree.filter(searchValue)
+            this.allExpandNodeIds = []
+            this.allSearchNodeIds = []
+          }
+        }
+      })
+  },
+  querySearch(queryString, cb) {
+    this.searchValue = queryString
+    this.searchResult = []
+    this.selectNodeInfo = null
+    if (queryString && queryString.length > 0) {
+      this.searchWorkgroupUsers(queryString)
+      cb([])
+    } else {
+      cb([])
+    }
+  },
+  searchWorkgroupUsers(value) {
+    const param = {
+      searchValue: value,
+    }
+    this.$http
+      .post(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/search-workgroup-users',
+        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 workgroupTreeInlineService