imatrix-ui 2.8.39-dw → 2.8.39-pvtmp

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

@@ -0,0 +1,458 @@
+<template>
+  <div>
+    <el-container style="height: 395px">
+      <el-aside width="430px">
+        <el-container style="height: 390px">
+          <el-header style="text-align: right; font-size: 12px">
+            <el-autocomplete
+              v-model="filterText"
+              select-when-unmatched
+              class="inline-input inline-input-custom"
+              :fetch-suggestions="querySearch"
+              :placeholder="$t('imatrixUIMessage.pleaseEnterTeamName')"
+              :trigger-on-focus="false"
+              @select="handleSelect"
+              @keyup.enter.native="clickSearch"
+            >
+              <el-button slot="append" icon="el-icon-search" @click="clickSearch" />
+            </el-autocomplete>
+          </el-header>
+          <el-main>
+            <div v-if="!searchValue" style="padding-top:5px;overflow:auto;width: auto;display: inline-block !important;">
+              <el-tree
+                ref="workgroupTree"
+                :props="defaultProps"
+                :load="loadNode"
+                lazy
+                :show-checkbox="multiple"
+                node-key="id"
+                :render-content="renderContent"
+                :filter-node-method="filterNode"
+                @check="handleCheckNode"
+                @node-click="handleNodeClick"
+              />
+            </div>
+            <div v-if="searchValue && searchValue.length > 0" style="height:100%;overflow: hidden;">
+              <workgroup-result
+                ref="workgroupResult"
+                :grid-data="searchResult"
+                :select-result="selectResult"
+                :height="height"
+                :multiple="multiple"
+                :is-search-result="true"
+                @selectResult="getSelectWorkgroup"
+                @resultRowDblclick="resultRowDblclick"
+                @addWorkgroup="addWorkgroup"
+              />
+            </div>
+          </el-main>
+        </el-container>
+      </el-aside>
+      <el-container v-if="multiple">
+        <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('imatrixUIMessage.selectedWorkingGroup') }}:
+          </div>
+          <div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
+            <workgroup-result
+              :grid-data="selectResult"
+              :height="height"
+              :multiple="multiple"
+              :is-search-result="false"
+              @selectResult="getSelectWorkgroup"
+              @resultRowDblclick="resultRowDblclick"
+              @removeWorkgroup="removeWorkgroup"
+            />
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<style>
+.searchResult {
+  color:red
+}
+.inline-input-custom {
+  width : 90%
+}
+</style>
+
+<script>
+import localStorage from '../../../src/utils/local-storage'
+import utils from '../../utils/utils'
+import workgroupTreeService from './workgroup-tree-service'
+import WorkgroupResult from './search-result.vue'
+export default {
+  name: 'InlineWorkgroupTree',
+  components: {
+    WorkgroupResult
+  },
+  props: {
+    // 是否是多选树，默认是true
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+    branchInfo: {
+      type: Array,
+      default: null
+    }
+
+  },
+  data() {
+    return {
+      filterText: '',
+      defaultProps: {
+        id: 'id',
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      containBranch: false, // 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给工作组，例如：部门1(分支1)
+      tenantNodeId: -1, // 公司节点的id
+      restaurants: [], // 查询的备选值
+      searchValue: null, // 查询条件
+      searchResult: [], // 工作组的查询结果
+      selectResult: [], // 工作组的选中结果
+      searchStoreKey: 'searchWorkgroup',
+      selectNodeInfo: null, // 单选时，选择的工作组信息
+      selectWorkgroupData: null,
+      tenantInfo: {} // 公司根节点信息
+    }
+  },
+  computed: {
+  },
+  watch: {
+    filterText(val) {
+      if (!val) {
+        this.searchValue = val
+        // 清空查询内容时，重新加载整个树
+        this.loadWorkgroup(this.tenantNodeId)
+      }
+    }
+  },
+  mounted() {
+    var searchWorkgroup = localStorage.getObject(this.searchStoreKey)
+    if (searchWorkgroup) {
+      this.restaurants = searchWorkgroup
+    } else {
+      this.restaurants = []
+    }
+  },
+  methods: {
+    ...utils,
+    ...workgroupTreeService,
+    // 将查询结果中指定工作组添加到已选择工作组集合中
+    addWorkgroup(index, workgroup) {
+      const containWorkgroups = this.selectResult.filter(this.filterWorkgroup(workgroup))
+      if (containWorkgroups && containWorkgroups.length === 0) {
+        this.selectResult.push(workgroup)
+      }
+    },
+    filterWorkgroup(queryWorkgroup) {
+      return (workgroup) => {
+        return (workgroup.id === queryWorkgroup.id)
+      }
+    },
+    removeWorkgroup(index, workgroup) {
+      if (this.$refs.workgroupTree) {
+        // 通过查询结果添加的工作组，在返回到组织结构树时，也选中了该工作组，在移除该工作组时，需要去掉复选框的选中状态
+        const checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
+        const currentCheckedWorkgroupNodeIds = checkedKeys.filter(this.filterWorkgroupNode(workgroup))
+        if (currentCheckedWorkgroupNodeIds.length > 0) {
+          // 表示当前工作组是选中的状态，需要去掉
+          currentCheckedWorkgroupNodeIds.forEach(workgroupNodeId => {
+            this.$refs.workgroupTree.setChecked(workgroupNodeId, false)
+          })
+        }
+      }
+      this.selectResult = this.removeRow(this.selectResult, workgroup)
+      if (!this.selectResult || this.selectResult.length === 0) {
+        // 已选结果面板没有内容，则左侧树节点也不要有选中节点了
+        if (this.$refs.workgroupTree) {
+          this.$refs.workgroupTree.setCheckedKeys([])
+        }
+      }
+    },
+    filterWorkgroupNode(queryWorkgroup) {
+      return (workgroupNodeId) => {
+        return (workgroupNodeId === queryWorkgroup.id)
+      }
+    },
+    getSelectWorkgroup(workgroup) {
+      this.packageSelectResult(workgroup)
+    },
+    resultRowDblclick(workgroup) {
+      this.packageSelectResult(workgroup)
+      this.$emit('result', this.selectNodeInfo)
+    },
+    packageSelectResult(workgroup) {
+      workgroup.tenantCode = this.tenantInfo.code
+      workgroup.tenantName = this.tenantInfo.tenantName
+      const selectNodeInfo = {
+        id: workgroup.id,
+        name: workgroup.name,
+        code: workgroup.code,
+        subCompanyName: workgroup.subCompanyName,
+        workgroup: workgroup
+      }
+      // 表示是勾选单选按钮或 选中树节点
+      this.selectNodeInfo = selectNodeInfo
+    },
+    handleSelect(item) {
+      this.handleSelectUtil(item, localStorage)
+    },
+    search(value) {
+      this.searchValue = value
+      this.$refs.workgroupTree.filter(value)
+    },
+    // 点击查询按钮调用的方法
+    clickSearch() {
+      this.storeSeachValue(localStorage, this.searchStoreKey, this.filterText)
+      this.search(this.filterText)
+    },
+    filterNode(value, data, node) {
+      if (!value) {
+        return true
+      } else {
+        var workgroupName = data.name
+        if (data.id === this.tenantNodeId) {
+          // 表示是根节点公司节点
+          return false
+        } else if (this.containBranch) {
+          // 如果包含分支，工作组节点显示的格式为：工作组名称(分支名称)
+          workgroupName = workgroupName.substring(0, workgroupName.lastIndexOf('('))
+        }
+        return workgroupName.indexOf(value) !== -1
+      }
+    },
+    // 点击复选框时处理
+    handleCheckNode(data, checkObj) {
+      if (checkObj.checkedKeys.indexOf(data.id) > -1) {
+        // 表示正选中data节点
+        if (data.id === this.tenantNodeId) {
+          // 表示选中了公司节点
+          this.checkedAllWorkgroups(data)
+        } else {
+          this.selectResult.push(JSON.parse(data.data))
+        }
+      } else {
+        // 表示正取消选中data节点，同时要取消其子节点的选中状态
+        if (data.id === this.tenantNodeId) {
+          // 表示取消公司节点的选中状态，即取消所有节点的勾选状态
+          this.$refs.workgroupTree.setCheckedKeys([])
+        } else {
+          this.selectResult = this.removeRow(this.selectResult, JSON.parse(data.data))
+        }
+      }
+    },
+    // 选中了根节点公司节点时，选中所有工作组
+    checkedAllWorkgroups(root) {
+      const children = root.children
+      if (children) {
+        children.forEach(workgroupNode => {
+          this.$refs.workgroupTree.setChecked(workgroupNode.id, true)
+        })
+      }
+    },
+    handleNodeClick(data, node, nodeTree) {
+      if (this.multiple) {
+        // 多选部门树时，处理点击节点事件
+        this.clickNodeWhenMultiple(data)
+      }
+      this.selectSingleNode(data, false)
+    },
+    selectSingleNode(data, isClickOkBtn) {
+      if (this.isWorkgroupNode(data) && !this.multiple) {
+        // 点击的是工作组节点，并且是单选树时，点击部门节点直接关闭弹框
+        const workgroup = JSON.parse(data.data)
+        workgroup.tenantCode = this.tenantInfo.code
+        workgroup.tenantName = this.tenantInfo.tenantName
+        var selectNodeInfo = {
+          id: data.id,
+          name: data.name,
+          code: workgroup.code,
+          containBranch: this.containBranch,
+          workgroup: workgroup
+        }
+        this.selectNodeInfo = selectNodeInfo
+        if (isClickOkBtn === true) {
+          // 点击确定按钮时才需要调result回调事件，关闭弹框
+          this.$emit('result', selectNodeInfo)
+        }
+      }
+    },
+    // 多选树时，点击节点处理复选框的选中状态
+    clickNodeWhenMultiple(data) {
+      var checkedKeys = []
+      if (this.$refs.workgroupTree) {
+        checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
+      }
+      // 取消选中状态时，保持节点是展开的状态，不要折叠
+      this.$refs.workgroupTree.store.nodesMap[data.id].expanded = true
+      if (checkedKeys.indexOf(data.id) > -1) {
+        // 表示当前节点是选中状态，则需要取消其选中状态
+        // 取消当前节点的勾选状态
+        this.$refs.workgroupTree.setChecked(data.id, false)
+        if (data.id === this.tenantNodeId) {
+          // 表示取消公司节点的选中状态，即取消所有节点的勾选状态
+          this.$refs.workgroupTree.setCheckedKeys([])
+        } else {
+          this.selectResult = this.removeRow(this.selectResult, JSON.parse(data.data))
+        }
+      } else {
+        // 表示当前节点不是选中的状态，需要勾选该节点
+        this.$refs.workgroupTree.setChecked(data.id, true)
+        if (data.id === this.tenantNodeId) {
+          // 表示当前正选中根节点公司节点，则需要勾选所有节点的选中状态
+          this.checkedAllWorkgroups(data)
+        } else {
+          this.selectResult.push(JSON.parse(data.data))
+        }
+      }
+    },
+    isWorkgroupNode(data) {
+      // 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
+      return data.id !== this.tenantNodeId && data.nodeType && data.nodeType === 'WORKGROUP'
+    },
+    singleSetValue() {
+      let showTip = false
+      if (this.searchValue) {
+        if (this.selectNodeInfo) {
+          this.$emit('result', this.selectNodeInfo)
+        } else {
+          showTip = true
+        }
+      } else {
+        const data = this.$refs.workgroupTree.getCurrentNode()
+        if ((data && data !== null) && this.isWorkgroupNode(data)) {
+          this.selectSingleNode(data, true)
+        } else {
+          showTip = true
+        }
+      }
+      this.showTip(showTip)
+    },
+    multipleSetValue() {
+      let showTip = false
+      var selectNodeInfo = {
+        ids: [],
+        names: [],
+        codes: [],
+        workgroups: []
+      }
+      if (this.searchValue) {
+        if (this.selectResult.length > 0) {
+          this.selectResult.forEach(workgroupData => {
+            const node = { id: workgroupData.id, name: workgroupData.name, code: workgroupData.code }
+            this.addSelectedWorkgroupInfo(selectNodeInfo, node, workgroupData)
+          })
+          this.$emit('result', selectNodeInfo)
+        } else {
+          showTip = true
+        }
+      } else {
+        var nodes = this.$refs.workgroupTree.getCheckedNodes()
+        if (nodes) {
+          if (nodes.length === 0) {
+          // 没有选择任何节点
+            showTip = true
+          } else {
+            for (var i = 0; i < nodes.length; i++) {
+              var node = nodes[i]
+              if (node.id !== this.tenantNodeId) {
+              // 不是公司根节点，表示是工作组节点，直接存到结果集合中
+              // node.data是部门对象的json字符串信息，通过JSON.parse(node.data)将json字符串转为对象
+                const workgroupData = JSON.parse(node.data)
+                this.addSelectedWorkgroupInfo(selectNodeInfo, node, workgroupData)
+              }
+            }
+            if (selectNodeInfo.ids.length > 0) {
+              this.$emit('result', selectNodeInfo)
+            } else {
+              showTip = true
+            }
+          }
+        } else {
+          showTip = true
+        }
+      }
+      this.showTip(showTip)
+    },
+    selectWorkgroup() {
+      if (this.multiple) {
+        this.multipleSetValue()
+      } else {
+        this.singleSetValue()
+      }
+    },
+    showTip(showTip) {
+      // 是否需要显示提示框，默认不显示
+      if (showTip) {
+        this.$alert(this.$t('imatrixUIMessage.pleaseSelectATeam'), this.$t('imatrixUIMessage.tips'), {
+          confirmButtonText: this.$t('imatrixUIPublicModel.sure')
+        })
+      }
+    },
+    // 将选中的部门节点添加到结果集合中
+    addSelectedWorkgroupInfo(result, node, workgroup) {
+      workgroup.tenantCode = this.tenantInfo.code
+      workgroup.tenantName = this.tenantInfo.tenantName
+      result.containBranch = this.containBranch
+      result.ids.push(node.id)
+      result.workgroups.push(workgroup)
+      result.codes.push(workgroup.code)
+      result.names.push(node.name)
+    },
+    // 初始化树 或 点击三角展开节点时动态加载子节点
+    loadNode(node, resolve) {
+      var parentId = 0
+      if (node.level === 0) {
+        // 表示初始化树
+        parentId = 0
+      } else {
+        parentId = node.data.id
+      }
+      var checkedKeys = []
+      if (this.$refs.workgroupTree) {
+        checkedKeys = this.$refs.workgroupTree.getCheckedKeys()
+      }
+      // 初始化部门树
+      this.initLoad(parentId, node, resolve, checkedKeys)
+    },
+    // 给节点添加自定义图标
+    renderContent(h, { node, data, store }) {
+      var className
+      if (node.data.id === -1) {
+        // node.id ===-1表示公司节点，node.branch表示是分支机构节点
+        className = 'el-icon-menu'
+      } else {
+        // 表示是工作组节点
+        className = 'el-icon-date'
+      }
+      if (data.nodeType && data.nodeType === 'WORKGROUP' &&
+      this.searchValue && data.name.indexOf(this.searchValue) > -1) {
+        // 如果是查询条件
+        return (
+          <span>
+            <i class={className}></i>
+            <span class='searchResult' title={node.label}>{node.label}</span>
+          </span>
+        )
+      }
+      return (
+        <span>
+          <i class={className}></i>
+          <span title={node.label}>{node.label}</span>
+        </span>
+      )
+    }
+
+  }
+}
+</script>

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

@@ -0,0 +1,71 @@
+import Vue from 'vue'
+import { getI18n } from '../../../src/utils/util'
+const workgroupTreeService = {
+  // 初始化部门树
+  initLoad(parentId, node, resolve, checkedKeys) {
+    const param = {
+      parentId: parentId,
+      departmentInfo: this.branchInfo
+    }
+    this.$http.post(Vue.prototype.baseAPI + '/component/organization-trees/workgroups', param).then(data => {
+      resolve(data)
+      // 更新当前点击的节点的子节点
+      this.$refs.workgroupTree.updateKeyChildren(parentId, data)
+      if (parentId === 0) {
+        // 初始化树时，展开公司节点
+        const tenantData = data[0].data
+        this.tenantInfo = JSON.parse(tenantData)
+        this.containBranch = data[0].containBranch
+        // 加载整个组织结构树时，展开公司节点
+        this.loadWorkgroup(this.tenantNodeId)
+      }
+      // 表示是点击三角展开节点时
+      if (checkedKeys && checkedKeys.indexOf(parentId) > -1 && parentId === this.tenantNodeId) {
+        // 点击公司名称前的三角标识展开节点时，保持当前节点的选中状态
+        // 表示当前展开的节点是选中状态，则应保持其选中状态，并选中其子节点
+        this.checkedAllWorkgroups(node.data)
+      }
+    })
+  },
+  // 加载当前节点的子节点
+  loadWorkgroup(parentId) {
+    const param = {
+      parentId: parentId,
+      departmentInfo: this.branchInfo
+    }
+    this.$http.post(Vue.prototype.baseAPI + '/component/organization-trees/workgroups', param).then(children => {
+      this.$refs.workgroupTree.updateKeyChildren(parentId, children)
+      if (this.$refs.workgroupTree.store.nodesMap[parentId]) {
+        this.$refs.workgroupTree.store.nodesMap[parentId].expanded = true
+      }
+    })
+  },
+  querySearch(queryString, cb) {
+    this.searchValue = queryString
+    this.searchResult = []
+    this.selectNodeInfo = null
+    if (queryString && queryString.length > 0) {
+      this.filterAppendNodes(queryString)
+      cb([])
+    } else {
+      cb([])
+    }
+  },
+  filterAppendNodes(value) {
+    const param = {
+      searchValue: value
+    }
+    this.$http.post(Vue.prototype.baseAPI + '/component/organization-trees/search-workgroups', 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 workgroupTreeService

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

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

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

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <el-dialog
+      class="user-tree"
+      visible
+      :title="myTitle"
+      :close-on-click-modal="false"
+      append-to-body
+      :width="multiple?'60%':'40%'"
+      @open="$emit('open')"
+      @opend="$emit('opend')"
+      @close="$emit('close')"
+      @closed="$emit('closed')"
+    >
+      <inline-workgroup-user-tree
+        ref="workgroupUserTree"
+        :multiple="multiple"
+        :branch-info="branchInfo"
+        :select-user-info="selectUserInfo"
+        :search-field="searchField"
+        :separator="separator"
+        @result="result"
+      />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="$emit('close')">
+          {{ $t('imatrixUIPublicModel.cancel') }}
+        </el-button>
+        <el-button size="small" type="primary" @click="selectWorkgroupUser">
+          {{ $t('imatrixUIPublicModel.sure') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+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) {
+      this.$emit('close', selectNodeInfo)
+    },
+    // 嵌入树，多选时，点击确定时调用的方法
+    selectWorkgroupUser() {
+      this.$refs.workgroupUserTree.selectWorkgroupUser()
+    }
+  }
+}
+</script>

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

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