imatrix-ui 2.8.97-dw-tmp39 → 2.8.97-dw-tmp41

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

@@ -0,0 +1,436 @@
+<template>
+  <div>
+    <el-container style="height: 395px">
+      <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('departmentUserTree.pleaseEnterUserInformation')"
+          :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 style="padding: 10px">
+        <div style="padding-top:5px;overflow:auto;width: auto;display: inline-block !important;">
+          <el-tree
+            ref="workgroupUserTree"
+            :props="defaultProps"
+            :load="loadNode"
+            lazy
+            :show-checkbox="multiple"
+            node-key="nodeId"
+            :render-content="renderContent"
+            :filter-node-method="filterNode"
+            @check="handleCheckNode"
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-main>
+    </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 workgroupTreeInlineService from './workgroup-tree-inline-service'
+export default {
+  name: 'InlineWorkgroupUserTree',
+  props: {
+    // 是否是多选树，默认是true
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+    branchInfo: {
+      type: Array,
+      default: null
+    },
+    // 多选用户树时，已选择用户id或登录名集合，多个之间以逗号隔开
+    selectUserInfo: {
+      type: [String, Number],
+      default: null
+    },
+    // 移除用户时，用户属性名称：id、loginName、email、telephone，默认是loginName
+    searchField: {
+      type: String,
+      default: 'loginName'
+    },
+    // 多选树时结果之间的分隔符，默认是逗号分隔
+    separator: {
+      type: String,
+      default: ','
+    }
+
+  },
+  data() {
+    return {
+      filterText: '',
+      defaultProps: {
+        id: 'id',
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      searchParam: {
+        userField: null,
+        searchValue: null,
+        treeType: 'MAN_GROUP_TREE',
+        departmentInfo: null
+      },
+      containBranch: false, // 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给用户，例如：部门1(分支1)
+      tenantNodeId: -1, // 公司节点的id
+      allSearchNodeIds: [], // 用于保存所有查询出的节点id
+      allExpandNodeIds: [], // 用于保存allSearchNodeIds中所有已加载子节点的id集合
+      isClickNode: false,
+      restaurants: [], // 查询的备选值
+      searchValue: null, // 查询条件
+      searchStoreKey: 'searchWorkgroupUser',
+      selectNodeInfo: null, // 单选时，选择的用户信息
+      tenantInfo: {} // 公司根节点信息
+    }
+  },
+  computed: {
+  },
+  watch: {
+    filterText(val) {
+      if (!val) {
+        this.searchValue = val
+        // 清空查询内容时，重新加载整个树
+        this.loadWorkgroup(this.tenantNodeId, this.tenantNodeId + '')
+      }
+    }
+  },
+  created() {
+  },
+  mounted() {
+    var searchWorkgroup = localStorage.getObject(this.searchStoreKey)
+    if (searchWorkgroup) {
+      this.restaurants = searchWorkgroup
+    } else {
+      this.restaurants = []
+    }
+  },
+  methods: {
+    ...utils,
+    ...workgroupTreeInlineService,
+    handleSelect(item) {
+      this.handleSelectUtil(item, localStorage)
+    },
+    search(value) {
+      this.searchValue = value
+      let mySearchValue = value
+      if (mySearchValue) {
+        mySearchValue = mySearchValue.trim()
+      }
+      this.searchParam.searchValue = mySearchValue
+      this.searchParam.departmentInfo = this.branchInfo
+      // this.searchParam.userField = this.searchField
+      // 后台查询部门，并拼接树节点
+      this.filterAppendNodes(value)
+    },
+    // 点击查询按钮调用的方法
+    clickSearch() {
+      this.storeSeachValue(localStorage, this.searchStoreKey, this.filterText)
+      this.search(this.filterText)
+    },
+    filterNode(value, data, node) {
+      if (!value) {
+        return true
+      } else {
+        if (data.nodeType && data.nodeType === 'USER') {
+          // data.data是用户的所有数据
+          const user = JSON.parse(data.data)
+          return this.filterUserVal(user, value)
+        } else {
+          // 表示不是用户节点
+          return false
+        }
+      }
+    },
+    filterUserVal(user, searchVal) {
+      const searchFields = ['name', 'loginName', 'email', 'telephone', 'jobNumber', 'honorificName']
+      let isHasVal = false
+      for (let i = 0; i < searchFields.length; i++) {
+        const searchField = searchFields[i]
+        const userValue = user[searchField]
+        if (userValue.indexOf(searchVal) !== -1 || (searchField === 'name' && user['enName'] && user['enName'].indexOf(searchVal) !== -1)) {
+          isHasVal = true
+        } else {
+          isHasVal = false
+          break
+        }
+      }
+      return isHasVal
+    },
+    // 点击复选框时处理
+    handleCheckNode(data, checkObj) {
+      if (checkObj.checkedKeys.indexOf(data.nodeId) > -1) {
+        // 表示正选中data节点
+        this.checkedNode(data, false)
+      } else {
+        // 表示正取消选中data节点，同时要取消其子节点的选中状态
+        this.cancelCheckedNode(data)
+      }
+    },
+    // 选中当前节点及其子节点
+    checkedNodeAndChildren(data) {
+      // 取消选中状态时，保持节点是展开的状态，不要折叠
+      this.$refs.workgroupUserTree.store.nodesMap[data.nodeId].expanded = true
+      // 获得所有应该选中的节点
+      this.$refs.workgroupUserTree.setChecked(data.nodeId, true)
+      const children = data.children
+      if (children) {
+        // 递归设置子子节点的选中状态
+        children.forEach(nodeData => {
+          this.checkedNodeAndChildren(nodeData)
+        })
+      }
+    },
+    // 取消节点选中状态时
+    cancelCheckedNode(data) {
+      if (data.id === this.tenantNodeId) {
+        // 表示取消公司节点的选中状态，即取消所有节点的勾选状态
+        this.$refs.workgroupUserTree.setCheckedKeys([])
+      } else if (data.nodeType && data.nodeType === 'WORKGROUP') {
+        this.cancelCheckedUserNodesWithWorkgroup(data)
+      }
+    },
+    // 选中了根节点公司节点时，选中所有工作组
+    checkedAllWorkgroups(root) {
+      const children = root.children
+      if (children) {
+        children.forEach(workgroupNode => {
+          this.$refs.workgroupUserTree.setChecked(workgroupNode.nodeId, true)
+        })
+      }
+    },
+    // 取消指定工作组下的用户节点的选中状态
+    cancelCheckedUserNodesWithWorkgroup(workgroupData) {
+      const children = workgroupData.children
+      if (children) {
+        children.forEach(userNode => {
+          this.$refs.workgroupUserTree.setChecked(userNode.nodeId, false)
+        })
+      }
+    },
+    handleNodeClick(data, node, nodeTree) {
+      if (this.multiple) {
+        // 多选部门树时，处理点击节点事件
+        this.clickNodeWhenMultiple(data)
+      }
+      this.selectSingleNode(data, false)
+    },
+    selectSingleNode(data, isClickOkBtn) {
+      if (this.isUserNode(data) && !this.multiple) {
+        // 点击的是工作组节点，并且是单选树时，点击部门节点直接关闭弹框
+        const user = JSON.parse(data.data)
+        user.tenantCode = this.tenantInfo.code
+        user.tenantName = this.tenantInfo.tenantName
+        let name = user.name
+        if (user.enName && user.enName.trim() !== '') {
+          name = name + '(' + user.enName + ')'
+        }
+        const selectNodeInfo = {
+          id: user.id,
+          name: name,
+          loginName: user.loginName,
+          email: user.email,
+          telephone: user.telephone,
+          containBranch: this.containBranch,
+          user: user,
+          enName: user.enName,
+          subCompanyName: user.subCompanyName
+        }
+        this.selectNodeInfo = selectNodeInfo
+        if (isClickOkBtn === true) {
+          // 点击确定按钮时才需要调result回调事件，关闭弹框
+          this.$emit('result', selectNodeInfo)
+        }
+      }
+    },
+    // 多选树时，点击节点处理复选框的选中状态
+    clickNodeWhenMultiple(data) {
+      var checkedKeys = []
+      if (this.$refs.workgroupUserTree) {
+        checkedKeys = this.$refs.workgroupUserTree.getCheckedKeys()
+      }
+      // 取消选中状态时，保持节点是展开的状态，不要折叠
+      this.$refs.workgroupUserTree.store.nodesMap[data.nodeId].expanded = true
+      if (checkedKeys.indexOf(data.nodeId) > -1) {
+        // 表示当前节点是选中状态，则需要取消其选中状态
+        // 取消当前节点的勾选状态
+        this.$refs.workgroupUserTree.setChecked(data.nodeId, false)
+        this.cancelCheckedNode(data)
+      } else {
+        // 表示当前节点不是选中的状态，需要勾选该节点
+        this.$refs.workgroupUserTree.setChecked(data.nodeId, true)
+        this.checkedNode(data, true)
+      }
+    },
+    isUserNode(data) {
+      // 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
+      return data.id !== this.tenantNodeId && data.nodeType && data.nodeType === 'USER'
+    },
+    selectWorkgroupUser() {
+      // 是否需要显示提示框，默认不显示
+      var showTip = false
+      if (this.multiple) {
+        // 选中的用户结果
+        var selectNodeInfo = {
+          userIds: [],
+          userNames: [],
+          loginNames: [],
+          emails: [],
+          telephones: [],
+          users: []
+        }
+        var parentIds = []
+
+        var nodes = this.$refs.workgroupUserTree.getCheckedNodes()
+        if (nodes) {
+          if (nodes.length === 0) {
+          // 没有选择任何节点
+            showTip = true
+          } else {
+            for (var i = 0; i < nodes.length; i++) {
+              var node = nodes[i]
+              if (this.isSelectTenantNode(node.id)) {
+              // 表示选择了所有工作组人员
+                selectNodeInfo.userIds = []
+                selectNodeInfo.userNames = []
+                selectNodeInfo.userIds.push(node.id)
+                selectNodeInfo.userNames.push('所有工作组人员')
+                break
+              } else if (node.id !== this.tenantNodeId) {
+              // 不是公司根节点
+                if (node.leaf) {
+                // 如果是叶子节点
+                  if (this.isUserNode(node)) {
+                    const user = JSON.parse(node.data)
+                    this.addSelectedUserInfo(selectNodeInfo, user)
+                  }
+                } else {
+                // 表示是工作组节点，且该节点下存在用户
+                  const userDatas = node.children
+                  if (userDatas && userDatas.length > 0) {
+                  // 表示已展开过该工作组
+                    userDatas.forEach(userData => {
+                      const user = JSON.parse(userData.data)
+                      this.addSelectedUserInfo(selectNodeInfo, user)
+                    })
+                  } else {
+                  // 表示没有展开过该节点，需要去后台获得该工作组下的人员信息
+                    parentIds.push(node.id)
+                  }
+                }
+              }
+            }
+            if (parentIds.length > 0) {
+            // 表示选中的工作组节点未展开过，则需要去后台查询获得这些工作组下的人员集合
+              this.getAllSelectedWorkgroupUsers(parentIds, selectNodeInfo)
+              showTip = false
+            } else {
+              if (selectNodeInfo.userIds.length > 0) {
+                this.$emit('result', selectNodeInfo)
+              } else {
+                showTip = true
+              }
+            }
+          }
+        } else {
+          showTip = true
+        }
+      } else {
+        const data = this.$refs.workgroupUserTree.getCurrentNode()
+        if (data && data !== null) {
+          this.selectSingleNode(data, true)
+        } else {
+          showTip = true
+        }
+      }
+
+      if (showTip) {
+        this.$alert(this.$t('imatrixUIMessage.pleaseSelectPersonnel'), this.$t('imatrixUIMessage.tips'), {
+          confirmButtonText: this.$t('imatrixUIPublicModel.sure')
+        })
+      }
+    },
+    // 是否选中了公司节点
+    isSelectTenantNode(dataId) {
+      return dataId === this.tenantNodeId && (!this.branchInfo || this.branchInfo.length === 0)
+    },
+    // 将选中的部门节点添加到结果集合中
+    addSelectedUserInfo(result, user) {
+      const filterResult = result.userIds.filter(this.filterUserNode(user))
+      if (filterResult.length === 0) {
+        let name = user.name
+        if (user.enName && user.enName !== '') {
+          name = name + '(' + user.enName + ')'
+        }
+        // if (this.containBranch && user.subCompanyName) {
+        // // 如果包含分支机构，则拼接分支机构名称
+        //   name = name + '（' + user.subCompanyName + '）'
+        // }
+        user.tenantCode = this.tenantInfo.code
+        user.tenantName = this.tenantInfo.tenantName
+        result.containBranch = this.containBranch
+        result.users.push(user)
+        result.userIds.push(user.id)
+        result.loginNames.push(user.loginName)
+        result.userNames.push(name)
+        result.emails.push(user.email)
+        result.telephones.push(user.telephone)
+      }
+    },
+    filterUserNode(queryUser) {
+      return (userId) => {
+        return (userId === queryUser.id)
+      }
+    },
+    // 给节点添加自定义图标
+    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 === 'USER' &&
+      this.searchValue && this.filterUserVal(data, this.searchValue)) {
+        // 如果是查询条件
+        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/year-range-picker/index.js

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

package/packages/year-range-picker/src/year-range-picker.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <el-date-picker
+      v-model="value[0]"
+      style="width:47%"
+      value-format="yyyy"
+      type="year"
+      :placeholder="$t('imatrixUIMessage.selectYear')"
+      @change="changeStart"
+    />
+    -
+    <el-date-picker
+      v-model="value[1]"
+      style="width:47%"
+      value-format="yyyy"
+      type="year"
+      :placeholder="$t('imatrixUIMessage.selectYear')"
+      @change="changeEnd"
+    />
+  </div>
+</template>
+<script>
+export default {
+  name: 'YearRangePicker',
+  props: {
+    value: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      yearStart: '',
+      yearEnd: ''
+    }
+  },
+  methods: {
+    changeStart(value) {
+      this.value[0] = value
+      this.$emit('change', this.value)
+    },
+    changeEnd(value) {
+      this.value[1] = value
+      this.$emit('change', this.value)
+    }
+
+  }
+}
+</script>