agilebuilder-ui 1.1.65-tmp3 → 1.1.65-tmp31

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

@@ -1,140 +0,0 @@
-<template>
-  <div>
-    <DepartmentMobileTree
-      v-if="isMobile"
-      ref="inlineDeparmentTree"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :department-info="departmentInfo"
-      :multiple="multiple"
-      :search-field="searchField"
-      :select-department-info="selectDepartmentInfo"
-      :separator="separator"
-      :limit-filter-column="limitFilterColumn"
-      @close="result"
-    />
-    <el-dialog
-      v-else
-      :close-on-click-modal="false"
-      :title="myTitle"
-      :width="multiple ? '920px' : '509px'"
-      append-to-body
-      class="user-tree"
-      model-value
-      @close="$emit('close')"
-      @closed="$emit('closed')"
-      @open="$emit('open')"
-      @opend="$emit('opend')"
-    >
-      <inline-department-tree
-        ref="inlineDeparmentTree"
-        :check-strictly="checkStrictly"
-        :department-info="departmentInfo"
-        :height="height"
-        :multiple="multiple"
-        :search-field="searchField"
-        :select-department-info="selectDepartmentInfo"
-        :separator="separator"
-        :limit-filter-column="limitFilterColumn"
-        @result="result"
-      />
-      <template v-slot:footer>
-        <div class="dialog-footer">
-          <el-button class="button--default" size="default" @click="$emit('close')">
-            {{ $t('imatrixUIPublicModel.cancel') }}
-          </el-button>
-          <el-button size="default" type="primary" @click="selectDepartment">
-            {{ $t('imatrixUIPublicModel.sure') }}
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { $emit } from '../../utils/gogocodeTransfer'
-import InlineDepartmentTree from '../../department-tree-inline/src/department-tree-inline.vue'
-import DepartmentMobileTree from '../../department-tree-mobile/src/department-tree-app.vue'
-import { isMobileBrowser } from '../../../src/utils/common-util'
-
-export default {
-  name: 'DepartmentTree',
-  components: {
-    InlineDepartmentTree,
-    DepartmentMobileTree
-  },
-  props: {
-    // 是否是多选树，默认是true
-    multiple: {
-      type: Boolean,
-      default: true
-    },
-    checkStrictly: {
-      type: Boolean,
-      default: false
-    },
-    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
-    departmentInfo: {
-      type: Array,
-      default: null
-    },
-    // 弹框的标题
-    title: {
-      type: String,
-      default: null
-    },
-    // 弹框的宽度
-    width: {
-      type: String,
-      default: '30%'
-    },
-    // 弹框的高度
-    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: ','
-    },
-    // 根据变量限制部门时，根据部门表的哪个字段进行过滤，默认是code
-    limitFilterColumn: {
-      type: String,
-      default: 'code'
-    }
-  },
-  data() {
-    const isMobile = isMobileBrowser()
-    console.log('部门树---isMobile=', isMobile)
-    let myTitle = this.$t('imatrixUIMessage.pleaseSelectDepartment')
-    if (this.title) {
-      myTitle = this.title
-    }
-    return {
-      myTitle,
-      isMobile
-    }
-  },
-  methods: {
-    result(selectNodeInfo) {
-      $emit(this, 'close', selectNodeInfo)
-    },
-    selectDepartment() {
-      this.$refs.inlineDeparmentTree.selectDepartment()
-    }
-  },
-  emits: ['open', 'opend', 'close', 'closed', 'opend', 'close', 'closed']
-}
-</script>

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

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

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

@@ -1,472 +0,0 @@
-<template>
-  <div>
-    <el-container style="height: 395px">
-      <el-aside width="350px">
-        <el-container style="height: 390px">
-          <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" size="default" @click="clickSearch" />
-              </template>
-            </el-autocomplete>
-          </el-header>
-          <el-main style="padding: 10px">
-            <template v-if="!searchValue">
-              <div
-                v-if="canShowOrgTree"
-                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="true"
-                  check-strictly
-                  lazy
-                  node-key="id"
-                  @check="handleCheckNode"
-                  @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 :title="node.label">
-                        {{ node.label }}
-                      </span>
-                    </span>
-                  </template>
-                </el-tree>
-              </div>
-              <!-- 暂无信息 -->
-              <EmptyState v-else style="width: 100%; height: 100%" />
-            </template>
-            <div v-if="searchValue && searchValue.length > 0" style="height: 100%; overflow: hidden">
-              <user-result
-                :grid-data="searchResult"
-                :height="height"
-                :is-search-result="true"
-                :multiple="true"
-                :select-result="selectResult"
-                @addUser="selectUser"
-              />
-            </div>
-          </el-main>
-        </el-container>
-      </el-aside>
-
-      <el-container>
-        <!-- <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('departmentTreeInline.selectedDept') }}:</div>
-          <div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
-            <user-result
-              v-loading="isloading"
-              :grid-data="selectResult"
-              :height="height"
-              :is-search-result="false"
-              :multiple="true"
-              @removeUser="removeUser"
-            />
-          </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 departmentTreeService from './department-tree-service'
-import UserResult from './search-result.vue'
-import memoryCacheUtils from '../../utils/memory-cache-utils'
-import EmptyState from '../../empty-state/index.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: [],
-      selectResult: [],
-      // 控制右侧选择区的loading状态
-      isloading: false,
-      multiple: true,
-      memoryCacheKey: 'DEPARTMENT_MEMORY_KEY',
-      // 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
-      memoryCacheData: [],
-      ElIconSearch,
-      canShowOrgTree: false,
-      initTreeFlag: false
-    }
-  },
-  name: 'InlineDepartmentMultiTree',
-  components: {
-    UserResult,
-    EmptyState
-  },
-  props: {
-    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: ','
-    },
-    // 根据变量限制部门时，根据部门表的哪个字段进行过滤，默认是code
-    limitFilterColumn: {
-      type: String,
-      default: 'code'
-    }
-  },
-  computed: {},
-  watch: {
-    filterText(val) {
-      if (!val) {
-        this.searchValue = val
-        // 清空查询内容时，重新加载整个树
-        if (this.departmentInfo && this.departmentInfo.length > 0) {
-          // 加载指定部门时，展开公司节点
-          this.loadPointDepartments()
-        } else {
-          // 加载整个组织结构树时，展开公司节点
-          this.loadDepartment(this.tenantNodeId)
-        }
-      }
-    }
-  },
-  created() {
-    utils.canShowOrgTree().then((showOrgTree) => {
-      this.canShowOrgTree = showOrgTree
-    })
-    this.initSelectDepts(this.searchField, this.selectDepartmentInfo, this.separator).then((selectUsers) => {
-      if (selectUsers) {
-        this.selectResult = selectUsers
-      }
-    })
-  },
-  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
-      let department = data
-      if (data.data) {
-        department = JSON.parse(data.data)
-      }
-      this.selectUser(null, department)
-      // 获得所有应该选中的节点
-      this.$refs.deparmentTree.setChecked(data.id, true)
-      const childDepartments = data.childDepartments
-      if (childDepartments && !this.checkStrictly) {
-        // 递归设置子子节点的选中状态
-        childDepartments.forEach((nodeData) => {
-          this.checkedNodeAndChildren(nodeData)
-        })
-      }
-    },
-    // 取消当前节点的子节点的选中状态
-    cancelChildCheckedNodes(data) {
-      const department = JSON.parse(data.data)
-      this.selectResult = this.removeRow(this.selectResult, department)
-      if (data.id !== this.tenantNodeId) {
-        // 如果当前节点不是公司节点，需要将公司节点的选中状态去掉
-        this.$refs.deparmentTree.setChecked(this.tenantNodeId, false)
-      }
-      const childDepartments = data.childDepartments
-      if (childDepartments && !this.checkStrictly) {
-        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.clickNodeWhenMultiple(data)
-    },
-    // 多选树时，点击节点处理复选框的选中状态
-    clickNodeWhenMultiple(data) {
-      var checkedKeys = []
-      if (this.$refs.deparmentTree) {
-        checkedKeys = this.$refs.deparmentTree.getCheckedKeys()
-      }
-      if (checkedKeys && checkedKeys.indexOf(data.id) > -1) {
-        // 表示当前节点是选中状态，则需要取消其选中状态
-        // 取消当前节点的勾选状态
-        this.$refs.deparmentTree.setChecked(data.id, false)
-        // 取消当前节点的子节点的勾选状态
-        if (!this.checkStrictly) {
-          this.cancelChildCheckedNodes(data)
-        }
-        // 取消选中状态时，保持节点是展开的状态，不要折叠
-        this.$refs.deparmentTree.store.nodesMap[data.id].expanded = true
-      } else {
-        // 表示当前节点不是选中的状态，需要勾选该节点
-        if (data.nodeType && data.nodeType === 'DEPARTMENT' && data.data) {
-          // 表示当前选中的节点是部门
-          const department = JSON.parse(data.data)
-          this.selectUser(null, department)
-        }
-        this.$refs.deparmentTree.setChecked(data.id, true)
-        // 点击树节点时添加并展开节点会走loadNode方法，因为设置了树组件的expand-on-click-node属性为true
-        const children = data.childDepartments
-        if (children && children.length > 0) {
-          // 表示加载过该节点，直接选中即可
-          if (!this.checkStrictly) {
-            this.checkedNodeAndChildren(data)
-          }
-        } else {
-          // 表示没有加载过该节点，是首次加载，需要走后台
-          // 会走loadNode方法，因为设置了树组件的expand-on-click-node属性为true
-          this.isClickNode = true
-        }
-      }
-    },
-    isDepartmentNode(data) {
-      // 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
-      return data.id !== this.tenantNodeId && data.nodeType && data.nodeType === 'DEPARTMENT' && !data.branch
-    },
-    selectDepartment() {
-      // 是否需要显示提示框，默认不显示
-      var showTip = false
-      var leafSelectNodeInfo = {
-        ids: [],
-        names: [],
-        codes: [],
-        zhNames: [],
-        enNames: [],
-        departments: []
-      }
-      if (this.selectResult.length === 0) {
-        // 没有选择任何节点
-        showTip = true
-      } else {
-        for (var i = 0; i < this.selectResult.length; i++) {
-          var userData = this.selectResult[i]
-          // 不存在该用户则放到结果集合中，去掉重复使用
-          leafSelectNodeInfo.ids.push(userData.id)
-          leafSelectNodeInfo.codes.push(userData.code)
-          if (userData.enName) {
-            leafSelectNodeInfo.enNames.push(userData.enName)
-          } else {
-            leafSelectNodeInfo.enNames.push('')
-          }
-          if (userData.department) {
-            leafSelectNodeInfo.departments.push(userData.department)
-          } else {
-            leafSelectNodeInfo.departments.push(userData)
-          }
-          const name = userData.showName
-          leafSelectNodeInfo.names.push(name)
-          leafSelectNodeInfo.zhNames.push(userData.name)
-        }
-      }
-      if (leafSelectNodeInfo.ids.length > 0) {
-        leafSelectNodeInfo.containBranch = this.containBranch
-        $emit(this, 'result', leafSelectNodeInfo)
-      } 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'
-    // 	}
-    // 	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>`
-    // 	// )
-    // },
-    // 将查询结果中指定用户添加到已选择用户集合中
-    selectUser(index, dept) {
-      // if (!this.isContainAllUser()) {
-      const containUsers = this.selectResult.filter(this.filterDept(dept))
-      if (containUsers && containUsers.length === 0) {
-        // 如果已选结果中不包含当前用户，则添加
-        // 将查询结果中的用户复制到已选择用户集合中
-        dept.tenantCode = this.tenantInfo.code
-        dept.tenantName = this.tenantInfo.tenantName
-        this.selectResult.push(dept)
-        // 搜索选中记忆
-        this.setMemoryCacheData(dept, 'department')
-      }
-      // } else {
-      //   this.alertByAllUser()
-      // }
-    },
-    // 判断用户是否存在的过滤器
-    filterDept(queryDept) {
-      return (dept) => {
-        return dept.id === queryDept.id
-      }
-    },
-    filterDeptNode(queryDept) {
-      return (deptNodeId) => {
-        return deptNodeId + '' === queryDept.id + ''
-      }
-    },
-    // 从已选择用户集合中移除指定用户，并添加到查询结果集合中
-    removeUser(index, dept) {
-      // 表示是在组织结构树页面，需要将树的人员节点的选中状态去掉
-      if (dept.nodeId) {
-        const nodeId = dept.nodeId
-        if (this.$refs.deparmentTree && nodeId) {
-          this.$refs.deparmentTree.setChecked(nodeId, false)
-        }
-      } else {
-        if (this.$refs.deparmentTree) {
-          // 通过查询结果添加的用户，在返回到组织结构树时，也选中了该用户，在移除该用户时，需要去掉复选框的选中状态
-          const checkedKeys = this.$refs.deparmentTree.getCheckedKeys()
-          const currentCheckedUserNodeIds = checkedKeys.filter(this.filterDeptNode(dept))
-          if (currentCheckedUserNodeIds.length > 0) {
-            // 表示当前用户是选中的状态，需要去掉
-            currentCheckedUserNodeIds.forEach((userNodeId) => {
-              this.$refs.deparmentTree.setChecked(userNodeId, false)
-            })
-          }
-        }
-      }
-      this.selectResult = this.removeRow(this.selectResult, dept)
-      if (!this.selectResult || this.selectResult.length === 0) {
-        // 已选结果面板没有内容，则左侧树节点也不要有选中节点了
-        if (this.$refs.deparmentTree) {
-          this.$refs.deparmentTree.setCheckedKeys([])
-        }
-      }
-    }
-  },
-  emits: ['result']
-}
-</script>
-
-<style>
-.searchResult {
-  color: red;
-}
-
-.inline-input-custom {
-  width: 90%;
-}
-
-.el-autocomplete-suggestion.el-popper {
-  min-width: 300px;
-}
-</style>