web-prod2/src/components/leftTree/index.vue

<template>
  <a-card title="部门">
    <div slot="extra" class="drawer-bootom-button">
      <a-dropdown :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button>
          树操作
          <a-icon type="up" />
        </a-button>
      </a-dropdown>
    </div>
    <div style="background: #fff;">
      <a-col :md="10" :sm="24">
        <template>
          <a-tree
            :selected-keys="selectedKeys"
            :checked-keys="checkedKeys"
            :tree-data="departTree"
            :check-strictly="checkStrictly"
            :expanded-keys="iExpandedKeys"
            :auto-expand-parent="autoExpandParent"
            @select="onSelect"
            @check="onCheck"
            @expand="onExpand"
          />
        </template>
      </a-col>
    </div>
  </a-card>
</template>

<script>
import { getAction } from '@/api/request'

export default {
  name: 'LeftTree',
  components: {},
  data() {
    return {
      iExpandedKeys: [],
      loading: false,
      autoExpandParent: true,
      currFlowId: '',
      currFlowName: '',
      treeData: [],
      departTree: [],
      hiding: true,
      checkedKeys: [],
      selectedKeys: ['1'],
      currSelected: {},
      allTreeKeys: [],
      checkStrictly: true,
      url: {
        tree: '/system/sjConfigProcess/queryTreeList'
      },
      orgCategoryDisabled: false
    }
  },
  computed: {},
  created() {
    this.currFlowId = this.$route.params.id
    this.currFlowName = this.$route.params.name
    // this.loadTree()
  },
  methods: {
    loadData() {
      this.refresh()
    },
    loadTree() {
      var that = this
      that.treeData = []
      that.departTree = []
      getAction(this.url.tree).then((res) => {
        if (res.success) {
          // 部门全选后，再添加部门，选中数量增多
          this.allTreeKeys = []
          for (let i = 0; i < res.result.length; i++) {
            const temp = res.result[i]
            that.treeData.push(temp)
            that.departTree.push(temp)
            that.setThisExpandedKeys(temp)
            that.getAllKeys(temp)
            // console.log(temp.id)
          }
          this.loading = false
        }
      })
    },
    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },
    refresh() {
      this.loading = true
      this.loadTree()
    },
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    nodeModalOk() {
      this.loadTree()
    },
    nodeModalClose() {
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
      this.hiding = false
      // ---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
      if (this.checkStrictly) {
        this.checkedKeys = checkedKeys.checked
      } else {
        this.checkedKeys = checkedKeys
      }
      // ---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
    },
    onSelect(selectedKeys, e) {
      console.log('selected', selectedKeys, e)
      this.hiding = false
      const record = e.node.dataRef
      console.log('onSelect-record', record)
      this.currSelected = Object.assign({}, record)
      this.selectedKeys = [record.key]
      this.$emit('selected', this.currSelected)
    },
    getCurrSelectedTitle() {
      return !this.currSelected.title ? '' : this.currSelected.title
    },
    onClearSelected() {
      this.hiding = true
      this.checkedKeys = []
      this.currSelected = {}
      this.selectedKeys = []
      this.$refs.departAuth.departId = ''
    },
    // ---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------
    expandAll() {
      this.iExpandedKeys = this.allTreeKeys
    },
    closeAll() {
      this.iExpandedKeys = []
    },
    getAllKeys(node) {
      // console.log('node',node);
      this.allTreeKeys.push(node.key)
      if (node.children && node.children.length > 0) {
        for (let a = 0; a < node.children.length; a++) {
          this.getAllKeys(node.children[a])
        }
      }
    }
    // ---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------

  }
}
</script>

<style lang="less" scoped>
  .ant-card {
    height: 100%;

    /deep/ .ant-card-head {
      padding: 0 15px;

      /deep/ .ant-card-head-title, /deep/ .ant-card-extra {
        padding: 10px 0;
      }
    }

    /deep/ .ant-card-body {
      padding: 10px;
      height: calc(100vh - 225px);
      overflow: auto;
    }
  }
</style>