imatrix-ui 0.2.6-up → 0.2.7-up

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

@@ -1,340 +1,340 @@
-<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"
-          class="inline-input inline-input-custom"
-          :fetch-suggestions="querySearch"
-          :placeholder="$t('departmentTreeInline.pleaseEnterDepartmentName')"
-          @keyup.enter="clickSearch"
-          @select="handleSelect"
-        >
-          <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: 100%;
-            display: inline-block !important;
-          "
-        >
-          <el-tree
-            ref="deparmentTree"
-            :props="defaultProps"
-            :load="loadNode"
-            lazy
-            :show-checkbox="false"
-            node-key="id"
-            check-strictly
-            :render-content="renderContent"
-            :filter-node-method="filterNode"
-            @check-change="handleCheckChange"
-            @node-expand="handleNodeExpand"
-            @node-click="handleNodeClick"
-          />
-        </div>
-        <div
-          v-if="searchValue && searchValue.length > 0"
-          style="height: 100%; overflow: hidden"
-        >
-          <user-result
-            :grid-data="searchResult"
-            :height="height"
-            :multiple="false"
-            :is-search-result="true"
-            @selectResult="getSelectUser"
-            @resultRowDblclick="resultRowDblclick"
-          />
-        </div>
-      </el-main>
-    </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 departmentTreeService from './department-tree-service'
-import memoryCacheUtils from '../../utils/memory-cache-utils'
-import UserResult from './search-result.vue'
-export default {
-  data() {
-    return {
-      filterText: '',
-      defaultProps: {
-        id: 'id',
-        label: 'showName',
-        children: 'childDepartments',
-        isLeaf: 'leaf',
-      },
-      searchParam: {
-        searchValue: null,
-        treeType: 'DEPARTMENT_TREE',
-        departmentInfo: null,
-      },
-      count: 0,
-      // 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给用户，例如：部门1(分支1)
-      containBranch: false,
-      // 公司节点的id
-      tenantNodeId: -1,
-      // 用于保存所有查询出的节点id
-      allSearchNodeIds: [],
-      // 用于保存allSearchNodeIds中所有已加载子节点的id集合
-      allExpandNodeIds: [],
-      isClickNode: false,
-      // 查询的备选值
-      restaurants: [],
-      // 查询条件
-      searchValue: null,
-      searchStoreKey: 'searchDepartment',
-      // 单选时，选择的部门信息
-      selectNodeInfo: null,
-      // 公司根节点信息
-      tenantInfo: {},
-      searchResult: [],
-      memoryCacheKey: 'DEPARTMENT_MEMORY_KEY',
-      // 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
-      memoryCacheData: [],
-      ElIconSearch,
-    }
-  },
-  name: 'InlineDepartmentSingleTree',
-  components: {
-    UserResult,
-  },
-  props: {
-    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
-    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: ',',
-    },
-  },
-  computed: {},
-  watch: {
-    filterText(val) {
-      if (!val) {
-        this.searchValue = val
-        // 清空查询内容时，重新加载整个树
-        if (this.departmentInfo && this.departmentInfo.length > 0) {
-          // 加载指定部门时，展开公司节点
-          this.loadPointDepartments()
-        } else {
-          // 加载整个组织结构树时，展开公司节点
-          this.loadDepartment(this.tenantNodeId)
-        }
-      }
-    },
-  },
-  mounted() {
-    var searchDepartment = localStorage.getObject(this.searchStoreKey)
-    if (searchDepartment) {
-      this.restaurants = searchDepartment
-    } else {
-      this.restaurants = []
-    }
-    this.getMemoryCacheData('department')
-  },
-  methods: {
-    ...utils,
-    ...departmentTreeService,
-    ...memoryCacheUtils,
-    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
-      // 获得所有应该选中的节点
-      this.$refs.deparmentTree.setChecked(data.id, true)
-      const childDepartments = data.childDepartments
-      if (childDepartments) {
-        // 递归设置子子节点的选中状态
-        childDepartments.forEach((nodeData) => {
-          this.checkedNodeAndChildren(nodeData)
-        })
-      }
-    },
-    // 取消当前节点的子节点的选中状态
-    cancelChildCheckedNodes(data) {
-      if (data.id !== this.tenantNodeId) {
-        // 如果当前节点不是公司节点，需要将公司节点的选中状态去掉
-        this.$refs.deparmentTree.setChecked(this.tenantNodeId, false)
-      }
-      const childDepartments = data.childDepartments
-      if (childDepartments) {
-        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.selectSingleNode(data, false)
-    },
-    selectSingleNode(data, isClickOkBtn) {
-      // 表示是部门树节点
-      if (this.isDepartmentNode(data)) {
-        // 点击的是部门节点，并且是单选树时，点击部门节点直接关闭弹框
-        const department = JSON.parse(data.data)
-        this.packageSelectResult(department)
-        this.setMemoryCacheData(department, 'department')
-        // if (this.selectNodeInfo && isClickOkBtn === true) {
-        // // 点击确定按钮时才需要调result回调事件，关闭弹框
-        //   this.$emit('result', this.selectNodeInfo)
-        // }
-      }
-    },
-    packageSelectResult(department) {
-      department.tenantName = this.tenantInfo.tenantName
-      department.tenantCode = this.tenantInfo.code
-      var selectNodeInfo = {
-        id: department.id,
-        name: department.showName,
-        code: department.code,
-        containBranch: this.containBranch,
-        zhName: department.name,
-        enName: department.enName,
-        department: department,
-      }
-      this.selectNodeInfo = selectNodeInfo
-    },
-    isDepartmentNode(data) {
-      // 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
-      return (
-        data.id !== this.tenantNodeId &&
-        data.nodeType &&
-        data.nodeType === 'DEPARTMENT' &&
-        !data.branch
-      )
-    },
-    selectDepartment() {
-      // 是否需要显示提示框，默认不显示
-      var showTip = false
-      // const data = this.$refs.deparmentTree.getCurrentNode()
-      if (this.selectNodeInfo) {
-        // this.selectSingleNode(data, true)
-        $emit(this, 'result', this.selectNodeInfo)
-      } 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'
-      }
-      if (
-        data.nodeType &&
-        data.nodeType === 'DEPARTMENT' &&
-        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>`
-      )
-    },
-    getSelectUser(selectUser) {
-      // console.log('getSelectUser==', selectUser)
-      // this.selectUser = selectUser
-      // true参数表示是否是勾选单选框，是勾选单选框时不关闭弹框
-      this.packageSelectResult(selectUser)
-      // 搜索选中记忆
-      this.setMemoryCacheData(selectUser, 'department')
-    },
-    resultRowDblclick(user) {
-      this.packageSelectResult(user)
-      $emit(this, 'result', this.selectNodeInfo)
-    },
-  },
-  emits: ['result'],
-}
-</script>
-
-<style>
-.searchResult {
-  color: red;
-}
-.inline-input-custom {
-  width: 100% !important;
-}
-.el-autocomplete-suggestion.el-popper {
-  min-width: 300px;
-}
-</style>
+<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"
+          class="inline-input inline-input-custom"
+          :fetch-suggestions="querySearch"
+          :placeholder="$t('departmentTreeInline.pleaseEnterDepartmentName')"
+          @keyup.enter="clickSearch"
+          @select="handleSelect"
+        >
+          <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: 100%;
+            display: inline-block !important;
+          "
+        >
+          <el-tree
+            ref="deparmentTree"
+            :props="defaultProps"
+            :load="loadNode"
+            lazy
+            :show-checkbox="false"
+            node-key="id"
+            check-strictly
+            :render-content="renderContent"
+            :filter-node-method="filterNode"
+            @check-change="handleCheckChange"
+            @node-expand="handleNodeExpand"
+            @node-click="handleNodeClick"
+          />
+        </div>
+        <div
+          v-if="searchValue && searchValue.length > 0"
+          style="height: 100%; overflow: hidden"
+        >
+          <user-result
+            :grid-data="searchResult"
+            :height="height"
+            :multiple="false"
+            :is-search-result="true"
+            @selectResult="getSelectUser"
+            @resultRowDblclick="resultRowDblclick"
+          />
+        </div>
+      </el-main>
+    </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 departmentTreeService from './department-tree-service'
+import memoryCacheUtils from '../../utils/memory-cache-utils'
+import UserResult from './search-result.vue'
+export default {
+  data() {
+    return {
+      filterText: '',
+      defaultProps: {
+        id: 'id',
+        label: 'showName',
+        children: 'childDepartments',
+        isLeaf: 'leaf',
+      },
+      searchParam: {
+        searchValue: null,
+        treeType: 'DEPARTMENT_TREE',
+        departmentInfo: null,
+      },
+      count: 0,
+      // 当前租户内是否包含分支机构。获得当前选中部门名称时，如果有分支，则需要将分支名称返回给用户，例如：部门1(分支1)
+      containBranch: false,
+      // 公司节点的id
+      tenantNodeId: -1,
+      // 用于保存所有查询出的节点id
+      allSearchNodeIds: [],
+      // 用于保存allSearchNodeIds中所有已加载子节点的id集合
+      allExpandNodeIds: [],
+      isClickNode: false,
+      // 查询的备选值
+      restaurants: [],
+      // 查询条件
+      searchValue: null,
+      searchStoreKey: 'searchDepartment',
+      // 单选时，选择的部门信息
+      selectNodeInfo: null,
+      // 公司根节点信息
+      tenantInfo: {},
+      searchResult: [],
+      memoryCacheKey: 'DEPARTMENT_MEMORY_KEY',
+      // 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
+      memoryCacheData: [],
+      ElIconSearch,
+    }
+  },
+  name: 'InlineDepartmentSingleTree',
+  components: {
+    UserResult,
+  },
+  props: {
+    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+    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: ',',
+    },
+  },
+  computed: {},
+  watch: {
+    filterText(val) {
+      if (!val) {
+        this.searchValue = val
+        // 清空查询内容时，重新加载整个树
+        if (this.departmentInfo && this.departmentInfo.length > 0) {
+          // 加载指定部门时，展开公司节点
+          this.loadPointDepartments()
+        } else {
+          // 加载整个组织结构树时，展开公司节点
+          this.loadDepartment(this.tenantNodeId)
+        }
+      }
+    },
+  },
+  mounted() {
+    var searchDepartment = localStorage.getObject(this.searchStoreKey)
+    if (searchDepartment) {
+      this.restaurants = searchDepartment
+    } else {
+      this.restaurants = []
+    }
+    this.getMemoryCacheData('department')
+  },
+  methods: {
+    ...utils,
+    ...departmentTreeService,
+    ...memoryCacheUtils,
+    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
+      // 获得所有应该选中的节点
+      this.$refs.deparmentTree.setChecked(data.id, true)
+      const childDepartments = data.childDepartments
+      if (childDepartments) {
+        // 递归设置子子节点的选中状态
+        childDepartments.forEach((nodeData) => {
+          this.checkedNodeAndChildren(nodeData)
+        })
+      }
+    },
+    // 取消当前节点的子节点的选中状态
+    cancelChildCheckedNodes(data) {
+      if (data.id !== this.tenantNodeId) {
+        // 如果当前节点不是公司节点，需要将公司节点的选中状态去掉
+        this.$refs.deparmentTree.setChecked(this.tenantNodeId, false)
+      }
+      const childDepartments = data.childDepartments
+      if (childDepartments) {
+        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.selectSingleNode(data, false)
+    },
+    selectSingleNode(data, isClickOkBtn) {
+      // 表示是部门树节点
+      if (this.isDepartmentNode(data)) {
+        // 点击的是部门节点，并且是单选树时，点击部门节点直接关闭弹框
+        const department = JSON.parse(data.data)
+        this.packageSelectResult(department)
+        this.setMemoryCacheData(department, 'department')
+        // if (this.selectNodeInfo && isClickOkBtn === true) {
+        // // 点击确定按钮时才需要调result回调事件，关闭弹框
+        //   this.$emit('result', this.selectNodeInfo)
+        // }
+      }
+    },
+    packageSelectResult(department) {
+      department.tenantName = this.tenantInfo.tenantName
+      department.tenantCode = this.tenantInfo.code
+      var selectNodeInfo = {
+        id: department.id,
+        name: department.showName,
+        code: department.code,
+        containBranch: this.containBranch,
+        zhName: department.name,
+        enName: department.enName,
+        department: department,
+      }
+      this.selectNodeInfo = selectNodeInfo
+    },
+    isDepartmentNode(data) {
+      // 当前节点不是公司节点，也不是分支机构节点，表示是部门节点
+      return (
+        data.id !== this.tenantNodeId &&
+        data.nodeType &&
+        data.nodeType === 'DEPARTMENT' &&
+        !data.branch
+      )
+    },
+    selectDepartment() {
+      // 是否需要显示提示框，默认不显示
+      var showTip = false
+      // const data = this.$refs.deparmentTree.getCurrentNode()
+      if (this.selectNodeInfo) {
+        // this.selectSingleNode(data, true)
+        $emit(this, 'result', this.selectNodeInfo)
+      } 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'
+      }
+      if (
+        data.nodeType &&
+        data.nodeType === 'DEPARTMENT' &&
+        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>`
+      )
+    },
+    getSelectUser(selectUser) {
+      // console.log('getSelectUser==', selectUser)
+      // this.selectUser = selectUser
+      // true参数表示是否是勾选单选框，是勾选单选框时不关闭弹框
+      this.packageSelectResult(selectUser)
+      // 搜索选中记忆
+      this.setMemoryCacheData(selectUser, 'department')
+    },
+    resultRowDblclick(user) {
+      this.packageSelectResult(user)
+      $emit(this, 'result', this.selectNodeInfo)
+    },
+  },
+  emits: ['result'],
+}
+</script>
+
+<style>
+.searchResult {
+  color: red;
+}
+.inline-input-custom {
+  width: 100% !important;
+}
+.el-autocomplete-suggestion.el-popper {
+  min-width: 300px;
+}
+</style>