imatrix-ui 2.8.39-dw → 2.8.39-pvtmp

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

@@ -0,0 +1,197 @@
+<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" fixed>
+        <template slot-scope="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" 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="addWorkgroupUser(scope.$index, scope.row)" />
+          </div>
+        </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="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 slot-scope="scope">
+          {{ scope.$index+1 }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('departmentUserTreeInline.name')"
+        :width="130"
+        prop="name"
+      >
+        <template slot-scope="scope">
+          <span v-if="scope.row.enName && scope.row.enName.trim() !== ''" class="ellipsis cell--span" :title="scope.row.name+'('+scope.row.enName+')'">{{ scope.row.name+'('+scope.row.enName+')' }}</span>
+          <span v-else class="ellipsis cell--span" :title="scope.row.name">{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('departmentUserTreeInline.loginName')"
+        :width="110"
+        prop="loginName"
+      >
+        <template slot-scope="scope">
+          <span class="ellipsis cell--span" :title="scope.row.loginName">{{ scope.row.loginName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('departmentUserTreeInline.department')"
+        :min-width="160"
+        prop="mainDepartmentName"
+      >
+        <template slot-scope="scope">
+          <span class="ellipsis cell--span" :title="language && language !== 'cn' && scope.row.mainDepartmentEnName ? scope.row.mainDepartmentEnName : scope.row.mainDepartmentName">{{ 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 slot-scope="scope">
+          <span class="ellipsis cell--span" :title="scope.row.subCompanyName">{{ scope.row.subCompanyName }}</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,
+      language: !window.$locale ? 'cn' : window.$locale
+    }
+  },
+  created() {
+  },
+  methods: {
+    // 单选树时，点击行事件
+    // rowClick(row, column, event) {
+    //   this.selectedUser = row
+    //   // this.$emit('rowClick', row, column, event)
+    // },
+    // 移除工作组
+    removeWorkgroupUser(index, row) {
+      this.$emit('removeWorkgroupUser', index, row)
+    },
+    // 添加工作组
+    addWorkgroupUser(index, row) {
+      this.$emit('addWorkgroupUser', index, row)
+    },
+    // 选中工作组
+    selectWorkgroupUser(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('addWorkgroupUser', 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/workgroup-user-tree-inline/src/workgroup-tree-inline-service.js

@@ -0,0 +1,192 @@
+import Vue from 'vue'
+import { getI18n } from '../../../src/utils/util'
+const workgroupTreeInlineService = {
+  // 后台查询部门，并拼接树节点
+  filterAppendNodes(value) {
+    this.$http.post(Vue.prototype.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(Vue.prototype.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(Vue.prototype.baseAPI + '/component/organization-trees/user-in-workgroups', parentIds).then(users => {
+      users.forEach(user => {
+        this.addSelectedUserInfo(selectNodeInfo, user)
+      })
+      if (selectNodeInfo.userIds.length > 0) {
+        this.$emit('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(Vue.prototype.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(Vue.prototype.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(Vue.prototype.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