agilebuilder-ui 1.0.0

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

@@ -0,0 +1,344 @@
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import * as Vue from 'vue'
+import { getI18n } from '../../../src/utils/util'
+const departmentTreeService = {
+  // 后台查询部门，并拼接树节点
+  filterAppendNodes(value) {
+    this.$http
+      .post(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/search-pc-depts',
+        this.searchParam
+      )
+      .then((result) => {
+        if (result) {
+          if (result.length === 0) {
+            this.searchResult = []
+            this.$message({
+              showClose: true,
+              type: 'error',
+              message: getI18n().t('imatrixUIMessage.queryResultIsEmpty'),
+            })
+            return
+          }
+          this.searchResult = result
+          // result的格式为[DEPARTMENT~1,DEPARTMENT~1/DEPARTMENT~4,DEPARTMENT~10]
+          // result.forEach(nodeIds => {
+          //   // nodeId的分隔符
+          //   var nodeIdSeparator = '/'
+          //   const nodeIdArr = nodeIds.split(nodeIdSeparator)
+          //   if (nodeIdArr.length > 0) {
+          //     this.loadDepartmentWhenSearch(0, nodeIdArr)
+          //   }
+          // })
+        } else {
+          this.$message({
+            showClose: true,
+            type: 'error',
+            message: getI18n().t('imatrixUIMessage.queryResultIsEmpty'),
+          })
+        }
+      })
+  },
+  search(value) {
+    this.searchValue = value
+    let mySearchValue = value
+    if (mySearchValue) {
+      mySearchValue = mySearchValue.trim()
+    }
+    this.searchParam.searchValue = mySearchValue
+    this.searchParam.departmentInfo = this.departmentInfo
+    // 后台查询部门，并拼接树节点
+    this.filterAppendNodes(value)
+  },
+  handleSelect(item) {
+    // this.handleSelectUtil(item, localStorage)
+    // 查询最新部门信息替换,缓存为历史数据 数据库可能发生变化
+    this.$http
+      .get(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/api/departments?departmentCode=' +
+          item.code
+      )
+      .then((departmentDTO) => {
+        if (departmentDTO !== null) {
+          for (const dtoKey in departmentDTO) {
+            if (item.hasOwnProperty(dtoKey)) {
+              item[dtoKey] = departmentDTO[dtoKey]
+            }
+          }
+        }
+        this.filterText = ''
+        this.searchValue = ''
+        this.setMemoryCacheData(item, 'department')
+        if (this.multiple) {
+          const index = this.selectResult.findIndex(
+            (selectEntity) => selectEntity.code === item.code
+          )
+          if (index < 0) {
+            this.selectResult.push(item)
+          }
+        } else {
+          this.packageSelectResult(item)
+          // 关闭弹窗
+          $emit(this, 'result', this.selectNodeInfo)
+        }
+      })
+  },
+  querySearch(queryString, cb) {
+    if (!this.filterText && this.filterText.length === 0) {
+      this.memorySearch(queryString, cb)
+    } else {
+      this.search(this.filterText)
+      cb([])
+    }
+  },
+  // 点击查询按钮调用的方法
+  clickSearch() {
+    this.storeSeachValue()
+    this.search(this.filterText)
+  },
+  loadDepartmentWhenSearch(n, nodeIdArr) {
+    return new Promise((resolve, reject) => {
+      if (nodeIdArr.length === n) {
+        resolve()
+      } else {
+        const nodeId = nodeIdArr[n]
+        let dataId = nodeId
+        // 节点类型和数据id的分隔符
+        const nodeTypeAndDataIdSeparator = '~'
+        // nodeId格式为DEPARTMENT~4
+        if (nodeId.indexOf(nodeTypeAndDataIdSeparator) > -1) {
+          dataId = nodeId.substring(nodeId.indexOf('~') + 1)
+        }
+        this.loadDepartment(dataId)
+          .then(() => {
+            this.loadDepartmentWhenSearch(++n, nodeIdArr)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      }
+    })
+  },
+  // 点击复选框时处理
+  handleCheckNode(data, checkObj) {
+    if (checkObj.checkedKeys.indexOf(data.id) > -1) {
+      // 表示正选中data节点
+      this.isloading = true
+      if (data.nodeType && data.nodeType === 'DEPARTMENT' && data.data) {
+        // 表示当前选中的节点是部门
+        const department = JSON.parse(data.data)
+        this.selectUser(null, department)
+      }
+      if (data.childDepartments) {
+        // 如果已展开，不需要再走后台获得其子节点。只需要选中已有子节点
+        // 展开当前选中的节点
+        this.$refs.deparmentTree.store.nodesMap[data.id].expanded = true
+        // 选中当前节点及其子节点
+        this.checkedNodeAndChildren(data)
+        this.isloading = false
+      } else {
+        // 当前节点未展开。需要走后台获得当前节点的子节点，然后展开当前节点，然后选中这些子节点
+        if (!data.leaf) {
+          // 不是叶子节点，并且没有加载过该父节点的子节点时，需要走后台展开子节点
+          this.$http
+            .get(
+              window.$vueApp.config.globalProperties.baseAPI +
+                '/component/organization-trees/departments/' +
+                data.id
+            )
+            .then((result) => {
+              // 更新当前点击的节点的子节点
+              this.$refs.deparmentTree.updateKeyChildren(data.id, result)
+              // 展开当前选中的节点
+              this.$refs.deparmentTree.store.nodesMap[data.id].expanded = true
+              // 获得所有应该选中的节点
+              this.checkedNodeAndChildren(data)
+            })
+          this.$http
+            .get(
+              window.$vueApp.config.globalProperties.baseAPI +
+                '/component/organization-trees/child-departments/' +
+                data.id
+            )
+            .then((childDepts) => {
+              if (childDepts && !this.checkStrictly) {
+                childDepts.forEach((item) => {
+                  this.selectUser(null, item)
+                })
+                this.isloading = false
+              }
+            })
+        } else {
+          // 如果是叶子节点则不需要loading状态
+          this.isloading = false
+        }
+      }
+    } else {
+      // 表示正取消选中data节点，同时要取消其子节点的选中状态
+      this.cancelChildCheckedNodes(data)
+    }
+  },
+  // 初始化树 或 点击三角展开节点时动态加载子节点
+  loadNode(node, resolve) {
+    var parentId = 0
+    if (node.level === 0) {
+      // 表示初始化树
+      parentId = 0
+    } else {
+      parentId = node.data.id
+    }
+    var checkedKeys = []
+    if (this.$refs.deparmentTree) {
+      checkedKeys = this.$refs.deparmentTree.getCheckedKeys()
+    }
+    // 初始化部门树
+    this.initLoadDepartment(parentId, node, resolve, checkedKeys)
+  },
+  // 初始化部门树
+  initLoadDepartment(parentId, node, resolve, checkedKeys) {
+    this.$http
+      .get(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/departments/' +
+          parentId
+      )
+      .then((data) => {
+        resolve(data)
+        // 更新当前点击的节点的子节点
+        this.$refs.deparmentTree.updateKeyChildren(parentId, data)
+        if (parentId === 0) {
+          // 初始化树时，展开公司节点
+          const tenantData = data[0].data
+          data[0].disable = true
+          this.tenantInfo = JSON.parse(tenantData)
+          this.containBranch = data[0].containBranch
+          if (this.departmentInfo && this.departmentInfo.length > 0) {
+            // 加载指定部门时，展开公司节点
+            this.loadPointDepartments()
+          } else {
+            // 加载整个组织结构树时，展开公司节点
+            this.loadDepartment(this.tenantNodeId)
+          }
+        }
+
+        if (this.isClickNode) {
+          // 点击当前节点时，加载树节点时
+          // 注意不是点击复选框时
+          this.isClickNode = false
+          this.checkedNodeAndChildren(node.data)
+        } else {
+          // 表示是点击三角展开节点时
+          if (checkedKeys && checkedKeys.indexOf(parentId) > -1) {
+            // 点击部门名称前的三角标识展开节点时，保持当前节点的选中状态
+            // 表示当前展开的节点是选中状态，则应保持其选中状态，并选中其子节点
+            this.checkedNodeAndChildren(node.data)
+          }
+        }
+      })
+  },
+  // 加载当前节点的子节点
+  loadDepartment(parentId, isSearch, searchValue) {
+    return new Promise((resolve, reject) => {
+      this.$http
+        .get(
+          window.$vueApp.config.globalProperties.baseAPI +
+            '/component/organization-trees/departments/' +
+            parentId
+        )
+        .then((children) => {
+          this.$refs.deparmentTree.updateKeyChildren(parentId, children)
+          if (this.$refs.deparmentTree.store.nodesMap[parentId]) {
+            this.$refs.deparmentTree.store.nodesMap[parentId].expanded = true
+          }
+          resolve()
+        })
+        .catch((error) => {
+          console.log('error', error)
+        })
+    })
+  },
+  // 加载指定部门节点
+  loadPointDepartments() {
+    this.$http
+      .post(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/point-departments',
+        this.departmentInfo
+      )
+      .then((children) => {
+        this.$refs.deparmentTree.updateKeyChildren(this.tenantNodeId, children)
+        if (this.$refs.deparmentTree.store.nodesMap[this.tenantNodeId]) {
+          this.$refs.deparmentTree.store.nodesMap[this.tenantNodeId].expanded =
+            true
+        }
+      })
+  },
+  getSelectDepts(searchField, selectDeptInfo, separator) {
+    return new Promise((resolve, reject) => {
+      if (!searchField) {
+        resolve([])
+      } else if (!selectDeptInfo) {
+        resolve([])
+      } else {
+        this.$http
+          .get(
+            window.$vueApp.config.globalProperties.baseAPI +
+              '/component/organization-trees/select-departments?searchField=' +
+              searchField +
+              '&selectDeptInfo=' +
+              selectDeptInfo +
+              '&separator=' +
+              separator
+          )
+          .then((departments) => {
+            resolve(departments)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      }
+    })
+  },
+  // 选中了组织结构树的根节点
+  packageAllDept() {
+    // 表示集合中不存在该用户，则封装该用户
+    var allDept = {
+      id: this.tenantNodeId,
+      name: '所有部门',
+    }
+    return allDept
+  },
+  initSelectDepts() {
+    return new Promise((resolve, reject) => {
+      const selectDepts = []
+      if (this.selectDepartmentInfo) {
+        if (
+          this.selectDepartmentInfo === this.tenantNodeId ||
+          this.selectDepartmentInfo === '所有部门'
+        ) {
+          // 表示已选择所有用户
+          selectDepts.push(this.packageAllDept())
+          resolve(selectDepts)
+        } else {
+          // 表示不是选择的所有用户
+          this.getSelectDepts(
+            this.searchField,
+            this.selectDepartmentInfo,
+            this.separator
+          )
+            .then((departments) => {
+              resolve(departments)
+            })
+            .catch((error) => {
+              reject(error)
+            })
+        }
+      } else {
+        resolve(selectDepts)
+      }
+    })
+  },
+}
+export default departmentTreeService

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

@@ -0,0 +1,238 @@
+<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" width="60">
+				<template v-slot="scope">
+					<el-radio
+							v-model="singleUserIndex"
+							:label="scope.$index"
+							@change="selectUser"
+					>
+						{{ 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="addUser(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
+					v-if="multiple && !isSearchResult"
+					:label="$t('imatrixUIPublicModel.edit')"
+					align="center"
+					fixed="right"
+					width="60px"
+			>
+				<template v-slot="scope">
+					<div>
+						<el-button
+								:icon="ElIconDelete"
+								circle
+								size="default"
+								type="danger"
+								@click="removeUser(scope.$index, scope.row)"
+						/>
+					</div>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('departmentTreeInline.name')"
+					:width="170"
+					prop="name"
+			>
+				<template v-slot="scope">
+          <span :title="scope.row.showName" class="ellipsis cell--span">{{
+		          scope.row.showName
+	          }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('departmentTreeInline.code')"
+					:width="140"
+					prop="code"
+			>
+				<template v-slot="scope">
+          <span :title="scope.row.code" class="ellipsis cell--span">{{
+		          scope.row.code
+	          }}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+					:label="$t('departmentTreeInline.namePath')"
+					:width="140"
+					prop="namePath"
+			>
+				<template v-slot="scope">
+          <span :title="scope.row.namePath" class="ellipsis cell--span">{{
+		          scope.row.namePath
+	          }}</span>
+				</template>
+			</el-table-column>
+			<template v-slot:empty>
+				<div class="roleQuery_center_area" style="height: 395px">
+					<div
+							class="roleQuery_notAvailable"
+							style="width: 120px; height: 120px"
+					>
+            <span class="roleQuery_notAvailable_text">{{
+		            $t('imatrixUIPromptMessage.NoContent')
+	            }}</span>
+					</div>
+				</div>
+			</template>
+		</el-table>
+	</div>
+</template>
+
+<script>
+import {Delete as ElIconDelete, Plus as ElIconPlus} from '@element-plus/icons-vue'
+import {$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,
+			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() {
+		console.log('search-result---', this.gridData)
+	},
+	methods: {
+		// 单选树时，点击行事件
+		// rowClick(row, column, event) {
+		//   this.selectedUser = row
+		//   // this.$emit('rowClick', row, column, event)
+		// },
+		// 移除用户
+		removeUser(index, row) {
+			$emit(this, 'removeUser', index, row)
+		},
+		// 添加用户
+		addUser(index, row) {
+			$emit(this, 'addUser', index, row)
+		},
+		selectUser(selectVal) {
+			// console.log('selectUser', 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, 'addUser', 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: ['removeUser', 'addUser', 'selectResult', 'resultRowDblclick'],
+}
+</script>
+
+<style>
+.searchResult {
+	color: red;
+}
+
+.inline-select-custom {
+	width: 100px;
+}
+
+.inline-input-custom {
+	width: 98%;
+}
+</style>

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

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