imatrix-ui 2.8.97-dw-tmp40 → 2.8.97-dw-tmp41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imatrix-ui",
-  "version": "2.8.97-dw-tmp40",
+  "version": "2.8.97-dw-tmp41",
   "description": "前端组件库：表格、表单、组织结构树等",
   "main": "lib/super-ui.umd.min.js",
   "private": false,

package/packages/breadcrumb/index.js

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

package/packages/breadcrumb/src/breadcrumb.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelListWithTitle" :key="item.path">
+        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">
+          {{ item.meta.title }}
+        </span>
+        <router-link v-else :to="item.redirect||item.path">
+          {{ item.meta.title }}
+        </router-link>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from 'path-to-regexp'
+
+export default {
+  name: 'Breadcrumb',
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  computed: {
+    levelListWithTitle() {
+      return this.levelList.filter(item => item.meta.title !== undefined && item.meta.title !== null)
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      const { params } = this.$route
+      let matched = this.$route.matched.filter(item => {
+        if (item.name) {
+          // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+          var toPath = pathToRegexp.compile(item.path)
+          item.path = toPath(params)
+          return true
+        }
+      })
+      const first = matched[0]
+      if (first && first.name !== 'Dashboard') {
+        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+      }
+      this.levelList = matched
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-breadcrumb.el-breadcrumb {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 50px;
+    margin-left: 10px;
+    .no-redirect {
+      color: #97a8be;
+      cursor: text;
+    }
+  }
+</style>

package/packages/department-tree/index.js

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

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

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <el-dialog
+      class="user-tree"
+      visible
+      :title="myTitle"
+      :close-on-click-modal="false"
+      append-to-body
+      :width="multiple?'50%':'30%'"
+      @open="$emit('open')"
+      @opend="$emit('opend')"
+      @close="$emit('close')"
+      @closed="$emit('closed')"
+    >
+      <inline-department-tree
+        ref="inlineDeparmentTree"
+        :check-strictly="checkStrictly"
+        :multiple="multiple"
+        :height="height"
+        :department-info="departmentInfo"
+        :select-department-info="selectDepartmentInfo"
+        :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="selectDepartment">
+          {{ $t('imatrixUIPublicModel.sure') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import InlineDepartmentTree from '../../department-tree-inline/src/department-tree-inline.vue'
+export default {
+  name: 'DepartmentTree',
+  components: {
+    InlineDepartmentTree
+  },
+  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: ','
+    }
+  },
+  data() {
+    let myTitle = this.$t('imatrixUIMessage.pleaseSelectDepartment')
+    if (this.title) {
+      myTitle = this.title
+    }
+    return {
+      myTitle
+    }
+  },
+  methods: {
+    result(selectNodeInfo) {
+      this.$emit('close', selectNodeInfo)
+    },
+    selectDepartment() {
+      this.$refs.inlineDeparmentTree.selectDepartment()
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,402 @@
+<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"
+              size="small"
+              select-when-unmatched
+              class="inline-input inline-input-custom"
+              :fetch-suggestions="querySearch"
+              :placeholder="$t('departmentTreeInline.pleaseEnterDepartmentName')"
+              :trigger-on-focus="false"
+              @keyup.enter.native="clickSearch"
+              @select="handleSelect"
+            >
+              <el-button slot="append" icon="el-icon-search" @click="clickSearch" />
+            </el-autocomplete>
+          </el-header>
+          <el-main style="padding: 10px">
+            <div v-if="!searchValue" style="padding-top:5px;overflow:auto;width: auto;display: inline-block !important;">
+              <el-tree
+                ref="deparmentTree"
+                :props="defaultProps"
+                :load="loadNode"
+                lazy
+                :show-checkbox="true"
+                node-key="id"
+                check-strictly
+                :render-content="renderContent"
+                :filter-node-method="filterNode"
+                @check-change="handleCheckChange"
+                @node-expand="handleNodeExpand"
+                @check="handleCheckNode"
+                @node-click="handleNodeClick"
+              />
+            </div>
+
+            <div v-if="searchValue && searchValue.length > 0" style="height:100%;overflow: hidden;">
+              <user-result :grid-data="searchResult" :select-result="selectResult" :height="height" :multiple="true" :is-search-result="true" @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" :multiple="true" :is-search-result="false" @removeUser="removeUser" />
+          </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 departmentTreeService from './department-tree-service'
+import UserResult from './search-result.vue'
+export default {
+  name: 'InlineDepartmentMultiTree',
+  components: {
+    UserResult
+  },
+  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: ','
+    }
+  },
+  data() {
+    return {
+      filterText: '',
+      defaultProps: {
+        id: 'id',
+        label: 'showName',
+        children: 'childDepartments',
+        isLeaf: 'leaf'
+      },
+      searchParam: {
+        searchValue: null,
+        treeType: 'DEPARTMENT_TREE',
+        departmentInfo: null
+      },
+      count: 0,
+      containBranch: false, // 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给用户，例如：部门1(分支1)
+      tenantNodeId: -1, // 公司节点的id
+      allSearchNodeIds: [], // 用于保存所有查询出的节点id
+      allExpandNodeIds: [], // 用于保存allSearchNodeIds中所有已加载子节点的id集合
+      isClickNode: false,
+      restaurants: [], // 查询的备选值
+      searchValue: null, // 查询条件
+      searchStoreKey: 'searchDepartment',
+      selectNodeInfo: null, // 单选时，选择的部门信息
+      tenantInfo: {}, // 公司根节点信息
+      searchResult: [],
+      selectResult: [],
+      isloading: false // 控制右侧选择区的loading状态
+    }
+  },
+  computed: {
+  },
+  watch: {
+    filterText(val) {
+      if (!val) {
+        this.searchValue = val
+        // 清空查询内容时，重新加载整个树
+        if (this.departmentInfo && this.departmentInfo.length > 0) {
+          // 加载指定部门时，展开公司节点
+          this.loadPointDepartments()
+        } else {
+          // 加载整个组织结构树时，展开公司节点
+          this.loadDepartment(this.tenantNodeId)
+        }
+      }
+    }
+  },
+  created() {
+    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 = []
+    }
+  },
+  methods: {
+    ...utils,
+    ...departmentTreeService,
+    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)
+          }
+          let name = userData.showName
+          leafSelectNodeInfo.names.push(name)
+          leafSelectNodeInfo.zhNames.push(userData.name)
+        }
+      }
+      if (leafSelectNodeInfo.ids.length > 0) {
+        leafSelectNodeInfo.containBranch = this.containBranch
+        this.$emit('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 = 'el-icon-menu'
+      } else if (node.data.id === -2 || node.data.id === -3) {
+        // node.id ===-2表示集团公司无部门用户节点,node.id ===-3表示是分支机构无部门用户节点
+        className = 'el-icon-tickets'
+      } else {
+        // 表示是部门节点
+        className = 'el-icon-date'
+      }
+      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)
+      }
+      // } 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([])
+        }
+      }
+    }
+
+  }
+}
+</script>