imatrix-ui 0.2.5-up → 0.2.7-up

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

@@ -1,657 +1,657 @@
-<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; 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="clickSearch"
-            >
-              <template v-slot:append>
-                <el-button :icon="ElIconSearch" @click="clickSearch" />
-              </template>
-            </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="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>
-            <div
-              v-if="searchValue && searchValue.length > 0"
-              style="height: 100%; overflow: hidden"
-            >
-              <workgroup-user-result
-                ref="workgroupUserResult"
-                :grid-data="searchResult"
-                :select-result="selectResult"
-                :height="height"
-                :multiple="multiple"
-                :is-search-result="true"
-                @selectResult="getSelectWorkgroupUser"
-                @resultRowDblclick="resultRowDblclick"
-                @addWorkgroupUser="addWorkgroupUser"
-              />
-            </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('departmentUserTree.selectedPeople') }}::
-          </div>
-          <div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
-            <workgroup-user-result
-              :grid-data="selectResult"
-              :height="height"
-              :multiple="multiple"
-              :is-search-result="false"
-              @selectResult="getSelectWorkgroupUser"
-              @resultRowDblclick="resultRowDblclick"
-              @removeWorkgroupUser="removeWorkgroupUser"
-            />
-          </div>
-        </el-main>
-      </el-container>
-    </el-container>
-  </div>
-</template>
-
-<script>
-import { Search as ElIconSearch } from '@element-plus/icons-vue'
-import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
-import localStorage from '../../../src/utils/local-storage'
-import utils from '../../utils/utils'
-import workgroupTreeInlineService from './workgroup-tree-inline-service'
-import WorkgroupUserResult from './search-result.vue'
-export default {
-  data() {
-    return {
-      filterText: '',
-      defaultProps: {
-        id: 'id',
-        label: 'name',
-        children: 'children',
-        isLeaf: 'leaf',
-      },
-      searchParam: {
-        userField: null,
-        searchValue: null,
-        treeType: 'MAN_GROUP_TREE',
-        departmentInfo: null,
-      },
-      // 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给用户，例如：部门1(分支1)
-      containBranch: false,
-      // 公司节点的id
-      tenantNodeId: -1,
-      // 用于保存所有查询出的节点id
-      allSearchNodeIds: [],
-      // 用于保存allSearchNodeIds中所有已加载子节点的id集合
-      allExpandNodeIds: [],
-      isClickNode: false,
-      // 查询的备选值
-      restaurants: [],
-      // 查询条件
-      searchValue: null,
-      // 工作组的查询结果
-      searchResult: [],
-      // 工作组的选中结果
-      selectResult: [],
-      searchStoreKey: 'searchWorkgroupUser',
-      // 单选时，选择的用户信息
-      selectNodeInfo: null,
-      // 公司根节点信息
-      tenantInfo: {},
-      ElIconSearch,
-    }
-  },
-  name: 'InlineWorkgroupUserTree',
-  components: {
-    WorkgroupUserResult,
-  },
-  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: ',',
-    },
-  },
-  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,
-    // 将查询结果中指定工作组添加到已选择工作组集合中
-    addWorkgroupUser(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
-      }
-    },
-    removeWorkgroupUser(index, workgroup) {
-      if (this.$refs.workgroupUserTree) {
-        // 通过查询结果添加的工作组，在返回到组织结构树时，也选中了该工作组，在移除该工作组时，需要去掉复选框的选中状态
-        const checkedKeys = this.$refs.workgroupUserTree.getCheckedKeys()
-        const currentCheckedWorkgroupNodeIds = checkedKeys.filter(
-          this.filterUserNode(workgroup)
-        )
-        if (currentCheckedWorkgroupNodeIds.length > 0) {
-          // 表示当前工作组是选中的状态，需要去掉
-          currentCheckedWorkgroupNodeIds.forEach((workgroupNodeId) => {
-            this.$refs.workgroupUserTree.setChecked(workgroupNodeId, false)
-          })
-        }
-      }
-      this.selectResult = this.removeRow(this.selectResult, workgroup)
-      if (!this.selectResult || this.selectResult.length === 0) {
-        // 已选结果面板没有内容，则左侧树节点也不要有选中节点了
-        if (this.$refs.workgroupUserTree) {
-          this.$refs.workgroupUserTree.setCheckedKeys([])
-        }
-      }
-    },
-    getSelectWorkgroupUser(workgroup) {
-      this.packageSelectResult(workgroup)
-    },
-    resultRowDblclick(workgroup) {
-      this.packageSelectResult(workgroup)
-      $emit(this, 'result', this.selectNodeInfo)
-    },
-    packageSelectResult(user) {
-      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
-    },
-    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)
-      this.$refs.workgroupUserTree.filter(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)
-          this.selectResult.push(JSON.parse(nodeData.data))
-        })
-      }
-    },
-    // 取消节点选中状态时
-    cancelCheckedNode(data) {
-      if (data.id === this.tenantNodeId) {
-        // 表示取消公司节点的选中状态，即取消所有节点的勾选状态
-        this.$refs.workgroupUserTree.setCheckedKeys([])
-      } else if (data.nodeType && data.nodeType === 'WORKGROUP') {
-        this.cancelCheckedUserNodesWithWorkgroup(data)
-      } else {
-        this.selectResult = this.removeRow(
-          this.selectResult,
-          JSON.parse(data.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)
-          this.selectResult = this.removeRow(
-            this.selectResult,
-            JSON.parse(userNode.data)
-          )
-        })
-      }
-    },
-    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回调事件，关闭弹框
-          $emit(this, 'result', selectNodeInfo)
-          console.log('3=====setSelectNodeInfo=====', 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'
-      )
-    },
-    singleSetValue() {
-      let showTip = false
-      if (this.searchValue) {
-        console.log('this.selectNodeInfo', this.selectNodeInfo)
-        if (this.selectNodeInfo) {
-          $emit(this, 'result', this.selectNodeInfo)
-        } else {
-          showTip = true
-        }
-      } else {
-        const data = this.$refs.workgroupUserTree.getCurrentNode()
-        if (data && data !== null && this.isUserNode(data)) {
-          this.selectSingleNode(data, true)
-        } else {
-          showTip = true
-        }
-      }
-      this.showTip(showTip)
-    },
-    multipleSetValue() {
-      let showTip = false
-      // 选中的用户结果
-      var selectNodeInfo = {
-        userIds: [],
-        userNames: [],
-        loginNames: [],
-        emails: [],
-        telephones: [],
-        users: [],
-      }
-      if (this.searchValue) {
-        if (this.selectResult.length > 0) {
-          this.selectResult.forEach((workgroupData) => {
-            this.addSelectedUserInfo(selectNodeInfo, workgroupData)
-          })
-          $emit(this, 'result', selectNodeInfo)
-        } else {
-          showTip = true
-        }
-      } else {
-        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) {
-                $emit(this, 'result', selectNodeInfo)
-                console.log('1=====setSelectNodeInfo=====', selectNodeInfo)
-              } else {
-                showTip = true
-              }
-            }
-          }
-        } else {
-          showTip = true
-        }
-      }
-      this.showTip(showTip)
-    },
-    showTip(showTip) {
-      // 是否需要显示提示框，默认不显示
-      if (showTip) {
-        this.$alert(
-          this.$t('imatrixUIMessage.pleaseSelectPersonnel'),
-          this.$t('imatrixUIMessage.tips'),
-          {
-            confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
-          }
-        )
-      }
-    },
-    selectWorkgroupUser() {
-      if (this.multiple) {
-        this.multipleSetValue()
-      } else {
-        this.singleSetValue()
-      }
-    },
-    // 是否选中了公司节点
-    isSelectTenantNode(dataId) {
-      return (
-        dataId === this.tenantNodeId &&
-        (!this.branchInfo || this.branchInfo.length === 0)
-      )
-    },
-    // 将选中的部门节点添加到结果集合中
-    addSelectedUserInfo(result, user) {
-      const filterResult = result.userIds.filter(this.filterUserId(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)
-      }
-    },
-    filterUserId(queryWorkgroup) {
-      return (workgroupNodeId) => {
-        return workgroupNodeId === queryWorkgroup.id
-      }
-    },
-    filterUserNode(queryUser) {
-      return (userNodeId) => {
-        // 用户节点的id的分隔符，USER~departmentId~userId
-        const nodeIdSeparator = '~'
-        const userId = userNodeId.substring(
-          userNodeId.lastIndexOf(nodeIdSeparator) + 1
-        )
-        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>`
-    },
-  },
-  emits: ['result'],
-}
-</script>
-
-<style>
-.searchResult {
-  color: red;
-}
-.inline-input-custom {
-  width: 90%;
-}
-</style>
+<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; 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="clickSearch"
+            >
+              <template v-slot:append>
+                <el-button :icon="ElIconSearch" @click="clickSearch" />
+              </template>
+            </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="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>
+            <div
+              v-if="searchValue && searchValue.length > 0"
+              style="height: 100%; overflow: hidden"
+            >
+              <workgroup-user-result
+                ref="workgroupUserResult"
+                :grid-data="searchResult"
+                :select-result="selectResult"
+                :height="height"
+                :multiple="multiple"
+                :is-search-result="true"
+                @selectResult="getSelectWorkgroupUser"
+                @resultRowDblclick="resultRowDblclick"
+                @addWorkgroupUser="addWorkgroupUser"
+              />
+            </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('departmentUserTree.selectedPeople') }}::
+          </div>
+          <div :style="'padding-top: 5px;height:90%;overflow: hidden;'">
+            <workgroup-user-result
+              :grid-data="selectResult"
+              :height="height"
+              :multiple="multiple"
+              :is-search-result="false"
+              @selectResult="getSelectWorkgroupUser"
+              @resultRowDblclick="resultRowDblclick"
+              @removeWorkgroupUser="removeWorkgroupUser"
+            />
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import { Search as ElIconSearch } from '@element-plus/icons-vue'
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import localStorage from '../../../src/utils/local-storage'
+import utils from '../../utils/utils'
+import workgroupTreeInlineService from './workgroup-tree-inline-service'
+import WorkgroupUserResult from './search-result.vue'
+export default {
+  data() {
+    return {
+      filterText: '',
+      defaultProps: {
+        id: 'id',
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf',
+      },
+      searchParam: {
+        userField: null,
+        searchValue: null,
+        treeType: 'MAN_GROUP_TREE',
+        departmentInfo: null,
+      },
+      // 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给用户，例如：部门1(分支1)
+      containBranch: false,
+      // 公司节点的id
+      tenantNodeId: -1,
+      // 用于保存所有查询出的节点id
+      allSearchNodeIds: [],
+      // 用于保存allSearchNodeIds中所有已加载子节点的id集合
+      allExpandNodeIds: [],
+      isClickNode: false,
+      // 查询的备选值
+      restaurants: [],
+      // 查询条件
+      searchValue: null,
+      // 工作组的查询结果
+      searchResult: [],
+      // 工作组的选中结果
+      selectResult: [],
+      searchStoreKey: 'searchWorkgroupUser',
+      // 单选时，选择的用户信息
+      selectNodeInfo: null,
+      // 公司根节点信息
+      tenantInfo: {},
+      ElIconSearch,
+    }
+  },
+  name: 'InlineWorkgroupUserTree',
+  components: {
+    WorkgroupUserResult,
+  },
+  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: ',',
+    },
+  },
+  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,
+    // 将查询结果中指定工作组添加到已选择工作组集合中
+    addWorkgroupUser(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
+      }
+    },
+    removeWorkgroupUser(index, workgroup) {
+      if (this.$refs.workgroupUserTree) {
+        // 通过查询结果添加的工作组，在返回到组织结构树时，也选中了该工作组，在移除该工作组时，需要去掉复选框的选中状态
+        const checkedKeys = this.$refs.workgroupUserTree.getCheckedKeys()
+        const currentCheckedWorkgroupNodeIds = checkedKeys.filter(
+          this.filterUserNode(workgroup)
+        )
+        if (currentCheckedWorkgroupNodeIds.length > 0) {
+          // 表示当前工作组是选中的状态，需要去掉
+          currentCheckedWorkgroupNodeIds.forEach((workgroupNodeId) => {
+            this.$refs.workgroupUserTree.setChecked(workgroupNodeId, false)
+          })
+        }
+      }
+      this.selectResult = this.removeRow(this.selectResult, workgroup)
+      if (!this.selectResult || this.selectResult.length === 0) {
+        // 已选结果面板没有内容，则左侧树节点也不要有选中节点了
+        if (this.$refs.workgroupUserTree) {
+          this.$refs.workgroupUserTree.setCheckedKeys([])
+        }
+      }
+    },
+    getSelectWorkgroupUser(workgroup) {
+      this.packageSelectResult(workgroup)
+    },
+    resultRowDblclick(workgroup) {
+      this.packageSelectResult(workgroup)
+      $emit(this, 'result', this.selectNodeInfo)
+    },
+    packageSelectResult(user) {
+      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
+    },
+    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)
+      this.$refs.workgroupUserTree.filter(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)
+          this.selectResult.push(JSON.parse(nodeData.data))
+        })
+      }
+    },
+    // 取消节点选中状态时
+    cancelCheckedNode(data) {
+      if (data.id === this.tenantNodeId) {
+        // 表示取消公司节点的选中状态，即取消所有节点的勾选状态
+        this.$refs.workgroupUserTree.setCheckedKeys([])
+      } else if (data.nodeType && data.nodeType === 'WORKGROUP') {
+        this.cancelCheckedUserNodesWithWorkgroup(data)
+      } else {
+        this.selectResult = this.removeRow(
+          this.selectResult,
+          JSON.parse(data.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)
+          this.selectResult = this.removeRow(
+            this.selectResult,
+            JSON.parse(userNode.data)
+          )
+        })
+      }
+    },
+    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回调事件，关闭弹框
+          $emit(this, 'result', selectNodeInfo)
+          console.log('3=====setSelectNodeInfo=====', 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'
+      )
+    },
+    singleSetValue() {
+      let showTip = false
+      if (this.searchValue) {
+        console.log('this.selectNodeInfo', this.selectNodeInfo)
+        if (this.selectNodeInfo) {
+          $emit(this, 'result', this.selectNodeInfo)
+        } else {
+          showTip = true
+        }
+      } else {
+        const data = this.$refs.workgroupUserTree.getCurrentNode()
+        if (data && data !== null && this.isUserNode(data)) {
+          this.selectSingleNode(data, true)
+        } else {
+          showTip = true
+        }
+      }
+      this.showTip(showTip)
+    },
+    multipleSetValue() {
+      let showTip = false
+      // 选中的用户结果
+      var selectNodeInfo = {
+        userIds: [],
+        userNames: [],
+        loginNames: [],
+        emails: [],
+        telephones: [],
+        users: [],
+      }
+      if (this.searchValue) {
+        if (this.selectResult.length > 0) {
+          this.selectResult.forEach((workgroupData) => {
+            this.addSelectedUserInfo(selectNodeInfo, workgroupData)
+          })
+          $emit(this, 'result', selectNodeInfo)
+        } else {
+          showTip = true
+        }
+      } else {
+        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) {
+                $emit(this, 'result', selectNodeInfo)
+                console.log('1=====setSelectNodeInfo=====', selectNodeInfo)
+              } else {
+                showTip = true
+              }
+            }
+          }
+        } else {
+          showTip = true
+        }
+      }
+      this.showTip(showTip)
+    },
+    showTip(showTip) {
+      // 是否需要显示提示框，默认不显示
+      if (showTip) {
+        this.$alert(
+          this.$t('imatrixUIMessage.pleaseSelectPersonnel'),
+          this.$t('imatrixUIMessage.tips'),
+          {
+            confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
+          }
+        )
+      }
+    },
+    selectWorkgroupUser() {
+      if (this.multiple) {
+        this.multipleSetValue()
+      } else {
+        this.singleSetValue()
+      }
+    },
+    // 是否选中了公司节点
+    isSelectTenantNode(dataId) {
+      return (
+        dataId === this.tenantNodeId &&
+        (!this.branchInfo || this.branchInfo.length === 0)
+      )
+    },
+    // 将选中的部门节点添加到结果集合中
+    addSelectedUserInfo(result, user) {
+      const filterResult = result.userIds.filter(this.filterUserId(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)
+      }
+    },
+    filterUserId(queryWorkgroup) {
+      return (workgroupNodeId) => {
+        return workgroupNodeId === queryWorkgroup.id
+      }
+    },
+    filterUserNode(queryUser) {
+      return (userNodeId) => {
+        // 用户节点的id的分隔符，USER~departmentId~userId
+        const nodeIdSeparator = '~'
+        const userId = userNodeId.substring(
+          userNodeId.lastIndexOf(nodeIdSeparator) + 1
+        )
+        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>`
+    },
+  },
+  emits: ['result'],
+}
+</script>
+
+<style>
+.searchResult {
+  color: red;
+}
+.inline-input-custom {
+  width: 90%;
+}
+</style>