基于element封装的树形组件

该树形组件实现了左右联动，首先看效果图：

实现逻辑：左边未查询下级则仅选中当前组织，根据handleTreeCheck方法判断选中还是取消选中，如果选中则判断是否为一级组织，如果是那么全选该组织下子组织；根据checkChange取消选中。

全部代码如下：

<template>
  <el-dialog
      :visible="showDialog"
      :width="'720px'"
      :before-close="back"
      :title="title">
    <div class="main">
      <el-row :gutter="20" v-loading="loading" class="warp" style="margin: 0">
        <el-col :span="12" class="left-col">
          <div class="left-wrap">
            <el-tree :check-strictly="checkStrictly" ref="treeRef" class="cross-tree" :props="treeProps"
                     :load="loadNode" node-key="key" lazy show-checkbox @check="handleTreeCheck"
                     @check-change="checkChange">
              <template #default="{ node, data }">
                <div class="custom-tree-node">{{ node.label }}</div>
              </template>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="12" class="right-col">
          <template>
            <div class="check-num">
              已选：<span>{{ treeChecked.length }}</span> {{ checkedTitle }}
            </div>
            <div class="checked-wrap">
              <div v-for="item in treeChecked" :key="item.key" class="checked-row">
                <div class="row-left">
                  <div class="name">{{ item.organizationName }}</div>
                  <div class="label">{{ formatName(item.organizationFullName || '') }}</div>
                </div>
                <div class="delete-item" @click="setOrgChecked(item, false)">
                  <i class="el-icon-circle-close"></i>
                </div>
              </div>
            </div>
          </template>
          <div class="footer">
            <el-button @click="back">取消</el-button>
            <el-button type="primary" class="my-button" @click="crossBtnClick">确认</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import { getDeptOrganization } from '@/service/views/create/create'

export default {
  name: 'OrgSelectDialog',
  props: {
    title: {
      type: String
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    showDialog: {
      type: Boolean,
      default: false
    },
    // 传进来的数据
    checkedList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 仅可勾选最后一级组织
    canBeCheckedLast: {
      type: Boolean,
      default: false
    },
    checkedTitle: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      initCheckedNodes: [],
      // 选择的组织
      treeChecked: [],
      loading: false,
      treeProps: {
        label: 'labelName',
        children: 'children',
        isLeaf: 'leaf'
      }
    }
  },
  created () {},
  watch: {
    showDialog (value) {
      if (!value) {
        return
      }
      this.$nextTick(() => {
        this.initCheckedNodes = this.$refs.treeRef.getCheckedNodes()
      })
      this.treeChecked = [].concat(this.checkedList)
    }
  },
  computed: {},
  methods: {
    // 点击树节点时
    handleTreeCheck (currentNode, checkedNodes) {
      // 判断是选中还是取消选中
      const isCheck = checkedNodes.checkedKeys.indexOf(currentNode.key) > -1
      if (isCheck) {
        if (currentNode.type !== 3) { // 全选，根据数据结构改写全选逻辑
          let names = this.treeChecked.map(item => {return item.organizationFullName})
          const items = this.$refs.treeRef.getCheckedNodes()
          items.forEach(val => {
            if (!names.includes(val.organizationFullName)) this.treeChecked.push(val)
          })
        } else {
          this.treeChecked.push(currentNode)
        }
      } else {
        const index = this.treeChecked.findIndex((item) => {
          return item.key === currentNode.key
        })
        index > -1 && this.treeChecked.splice(index, 1)
      }
    },
    checkChange (data, checked) {
      if (checked) return
      this.$nextTick(() => {
        if (!checked) { // 全部取消
          const index = this.treeChecked.findIndex((item) => {
            return item.key === data.key
          })
          index > -1 && this.treeChecked.splice(index, 1)
        }
      })
    },
    // 懒加载节点
    async loadNode (node, resolve) {
      const data = node.data || {}
      if (!data.organizationNo) { // 首次进入显示loading
        this.loading = true
      }
      const params = {
        parentOrganizationNo: data.parentOrganizationNo,
        organizationNo: data.organizationNo,
        type: data.type
      }
      const nodeList = await this.getDeptTree(params)
      this.loading = false
      const list = this.$refs.treeRef.getCheckedNodes() || []
      this.checkedList.forEach((checkedItem) => {
        nodeList.forEach((item) => {
          if (checkedItem.key === item.key) {
            list.push(item)
          }
        })
      })
      this.$nextTick(() => {
        this.$refs.treeRef.setCheckedNodes(list)
        let names = this.treeChecked.map(item => {return item.organizationFullName})
        const items = this.$refs.treeRef.getCheckedNodes()
        items.forEach(val => {
          if (!names.includes(val.organizationFullName)) this.treeChecked.push(val)
        })
      })
      return resolve(nodeList)
    },
    // 切换选中状态
    setOrgChecked (node, checked) {
      const index = this.treeChecked.findIndex((obj) => {
        return node.key === obj.key
      })
      index > -1 && this.treeChecked.splice(index, 1)
      this.$refs.treeRef && this.$refs.treeRef.setChecked(node, checked, true)
      const list = this.$refs.treeRef.getCheckedNodes()
      this.treeChecked = list
    },
    closeCrossDialog () {
      this.$emit('close')
    },
    // 查询组架下的人员及子部门
    async getDeptTree (params) {
      try {
        const res = await getDeptOrganization(params)
        if (res.code === '200' && res.data) {
          const organizationList =
              (res.data &&
                  res.data.map((org) => {
                    return {
                      labelName: org.organizationName,
                      key: org.organizationNo, // 组架编码
                      disabled: this.canBeCheckedLast ? org.type !== 3 : false,
                      leaf: org.type === 3,
                      ...org
                    }
                  })) ||
              []
          return organizationList
        }
        return []
      } catch (error) {
        this.$message.error(error.message || '查询失败，请稍后再试！')
        return []
      }
    },
    back () {
      this.treeChecked = []
      this.$refs.treeRef.setCheckedNodes(this.initCheckedNodes)
      this.$emit('confirm', this.treeChecked)
      this.$emit('close')
    },
    crossBtnClick () {
      this.$emit('confirm', this.treeChecked)
      this.closeCrossDialog()
    },
    formatName (name) {
      return name.replace(/-/g, '/')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 0;
  border-radius: 6px;
}

::v-deep .el-dialog {
  border-radius: 6px;
}

::v-deep .el-dialog__header {
  text-align: left;
  height: 58px;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: #323232;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  justify-content: space-between;

  .text {
    display: flex;
    align-items: center;
  }
}

.main {
  background-color: #ffffff;

  .warp {
    overflow: hidden;

    .right-col {
      height: 472px;
      text-align: left;
      padding: 0 !important;
      position: relative;
      border-left: 1px solid #f5f5f5;

      .check-num {
        line-height: 28px;
        font-size: 14px;
        color: #848484;
        margin: 12px;

        span {
          color: #000;
        }
      }

      .checked-wrap {
        height: 358px;
        overflow: auto;

        .checked-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          padding: 0 15px;
          border-radius: 2px;

          &:last-child {
            margin-bottom: 0;
          }

          &:hover {
            background: rgba(0, 0, 0, 0.04);
          }

          .row-left {
            .name {
              font-size: 14px;
              line-height: 28px;
              color: #000;
            }

            .label {
              font-size: 12px;
              line-height: 20px;
              color: #999;
            }
          }
        }

        .delete-item {
          cursor: pointer;
        }
      }

      .footer {
        display: flex;
        align-items: center;
        justify-content: end;
        padding-top: 10px;
        margin-top: 5px;
        border-top: 1px solid #f5f5f5;

        .my-button {
          margin-right: 15px;
        }
      }
    }

    .left-col {
      height: 472px;
      display: flex;
      flex-direction: column;
      padding: 0 !important;

      .left-wrap {
        overflow: auto;
      }

      .cross-tree {
        ::v-deep &.el-tree {
          color: #323232;

          .is-disabled {
            display: none;
          }

          .el-checkbox__inner {
            width: 18px;
            height: 18px;
            border-color: #c1c1c1;
            border-radius: 3px;

            &:after {
              left: 6px;
              top: 3px;
            }
          }

          .el-checkbox__input.is-checked .el-checkbox__inner,
          .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            border-color: #007af5;
            background-color: #007af5;
          }

          .el-tree-node__content {
            height: 28px;
            padding-bottom: 14px;
          }

          .el-tree-node__content > label.el-checkbox {
            margin-right: 9px;
          }

          .el-tree-node__content > .el-tree-node__expand-icon {
            padding: 10px 9px 9px 8px;
          }

          .el-tree-node__expand-icon.is-leaf:before {
            background: transparent;
          }

          .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
            top: 6px;
          }
        }
      }
    }
  }
}

::v-deep .el-button {
  width: 120px;
  height: 36px;
  line-height: 36px;
  font-weight: 600;
  font-size: 14px;
  padding: 0;
  border-radius: 2px;
  cursor: pointer;

  &.el-button--small {
    width: 96px;
  }

  &.el-button--default {
    font-weight: 400;
    border: transparent;
    color: #323232;
    background-color: #f4f5f6;
  }

  &.el-button--primary {
    border-color: #007af5;
    background-color: #007af5;
    margin-left: 12px;
  }

  &.el-button--primary:focus {
    background: #0062c4;
    border-color: #0062c4;
  }

  &.el-button--primary:hover {
    background: #006edd;
    border-color: #006edd;
  }
}
</style>