imatrix-ui 2.8.97-dw-tmp26 → 2.8.97-dw-tmp29

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 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
+      this.$emit('result', selectNodeInfo)
+    },
+    selectDepartment() {
+      this.$refs.inlineDeparmentTree.selectDepartment()
+    }
+
+  }
+}
+</script>

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

@@ -0,0 +1,245 @@
+import Vue from 'vue'
+import { getI18n } from '../../../src/utils/util'
+const departmentTreeService = {
+  // 后台查询部门，并拼接树节点
+  filterAppendNodes(value) {
+    this.$http.post(Vue.prototype.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)
+  },
+  querySearch(queryString, cb) {
+    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(Vue.prototype.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(Vue.prototype.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 {
+      // 表示正取消选中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(Vue.prototype.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(Vue.prototype.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(Vue.prototype.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(Vue.prototype.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,176 @@
+<template>
+  <div style="height: 100%">
+    <el-table
+      ref="superGrid"
+      :data="gridData"
+      row-key="id"
+      :row-class-name="tableRowClassName"
+      :max-height="myHeight"
+      border
+      fit
+      @row-click="rowClick"
+      @row-dblclick="rowDblclick"
+    >
+      <el-table-column v-if="multiple === false" width="60">
+        <template slot-scope="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" fixed :label="$t('imatrixUIPublicModel.edit')" align="center" width="60px">
+        <template slot-scope="scope">
+          <div>
+            <el-button type="primary" size="mini" icon="el-icon-plus" :disabled="isDisable(scope.row)" circle @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 slot-scope="scope">
+          {{ scope.$index+1 }}
+        </template>
+      </el-table-column>
+      <el-table-column v-if="multiple && !isSearchResult" fixed :label="$t('imatrixUIPublicModel.edit')" align="center" width="60px">
+        <template slot-scope="scope">
+          <div>
+            <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="removeUser(scope.$index, scope.row)" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('departmentTreeInline.name')"
+        :width="170"
+        prop="name"
+      >
+        <template slot-scope="scope">
+          <span class="ellipsis cell--span" :title="scope.row.showName">{{ scope.row.showName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('departmentTreeInline.code')"
+        :width="140"
+        prop="code"
+      >
+        <template slot-scope="scope">
+          <span class="ellipsis cell--span" :title="scope.row.code">{{ scope.row.code }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('departmentTreeInline.namePath')"
+        :width="140"
+        prop="namePath"
+      >
+        <template slot-scope="scope">
+          <span class="ellipsis cell--span" :title="scope.row.namePath">{{ scope.row.namePath }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<style>
+.searchResult {
+  color:red
+}
+.inline-select-custom {
+  width : 100px
+}
+.inline-input-custom {
+  width : 98%
+}
+</style>
+<script>
+export default {
+  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 []
+      }
+    }
+
+  },
+  data() {
+    let tableHeight = this.height
+    tableHeight = tableHeight.substring(0, tableHeight.indexOf('px'))
+    const myHeight = (parseInt(tableHeight) + 30) + 'px'
+    return {
+      singleUserIndex: null, // 选中的用户序号
+      selectedUser: null,
+      myHeight
+    }
+  },
+  created() {
+    console.log('search-result---', this.gridData)
+  },
+  methods: {
+    // 单选树时，点击行事件
+    // rowClick(row, column, event) {
+    //   this.selectedUser = row
+    //   // this.$emit('rowClick', row, column, event)
+    // },
+    // 移除用户
+    removeUser(index, row) {
+      this.$emit('removeUser', index, row)
+    },
+    // 添加用户
+    addUser(index, row) {
+      this.$emit('addUser', index, row)
+    },
+    selectUser(selectVal) {
+      // console.log('selectUser', selectVal)
+      this.$emit('selectResult', this.gridData[selectVal])
+    },
+    rowClick(row, column, event) {
+      this.singleUserIndex = row.row_index
+      this.$emit('selectResult', row)
+    },
+    tableRowClassName({ row, rowIndex }) {
+      row.row_index = rowIndex
+    },
+    rowDblclick(row, column, event) {
+      if (this.multiple) {
+        this.$emit('addUser', null, row)
+      } else {
+        this.$emit('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)
+      }
+    }
+  }
+}
+</script>

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

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

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <el-dialog
+      ref="userDialog"
+      class="user-tree"
+      visible
+      :title="myTitle"
+      append-to-body
+      :close-on-click-modal="false"
+      :width="width"
+      @open="$emit('openDialog')"
+      @opend="$emit('opendDialog')"
+      @close="$emit('closeDialog')"
+      @closed="$emit('closedDialog')"
+    >
+      <inline-department-user-multi-tree
+        ref="inlineDepartmentUser"
+        :department-info="departmentInfo"
+        :is-need-virtual-user="isNeedVirtualUser"
+        :height="height"
+        :select-user-info="selectUserInfo"
+        :search-field="searchField"
+        :separator="separator"
+        @result="result"
+      />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="$emit('closeDialog')">
+          {{ $t('imatrixUIPublicModel.cancel') }}
+        </el-button>
+        <el-button size="small" type="primary" @click="confirmSelectUser">
+          {{ $t('imatrixUIPublicModel.sure') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<style>
+.searchResult {
+  color:red
+}
+.inline-select-custom {
+  width : 100px
+}
+.inline-input-custom {
+  width : 98%
+}
+</style>
+<script>
+import InlineDepartmentUserMultiTree from '../../department-user-tree-inline/src/department-user-multiple-tree-inline.vue'
+export default {
+  name: 'DepartmentUserMultiTree',
+  components: {
+    InlineDepartmentUserMultiTree
+  },
+  props: {
+    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+    departmentInfo: {
+      type: Array,
+      default: null
+    },
+    // 弹框的标题
+    title: {
+      type: String,
+      default: null
+    },
+    // 弹框的宽度
+    width: {
+      type: String,
+      default: '60%'
+    },
+    // 弹框的高度
+    height: {
+      type: String,
+      default: '300px'
+    },
+    // 是否需要显示虚拟用户
+    isNeedVirtualUser: {
+      type: Boolean,
+      default: false
+    },
+    // 多选用户树时，已选择用户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.pleaseSelectPersonnel')
+    if (this.title) {
+      myTitle = this.title
+    }
+    return {
+      myTitle
+    }
+  },
+  methods: {
+    result(selectNodeInfo) {
+      this.$emit('closeDialog', selectNodeInfo)
+    },
+    confirmSelectUser() {
+      this.$refs.inlineDepartmentUser.confirmSelectUser()
+    }
+
+  }
+}
+</script>