<script>
import { getTree, getList } from '@/api/organization'
import { createUniqueString } from '@/utils'
export default {
  name: 'SelectUser',
  components: {},
  props: {
    // 添加标签显隐
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '组织架构',
    },
    // 是否 只选择叶子节点（人员节点）/禁止选择父节点（部门节点）
    isOnlyLeaf: {
      type: Boolean,
      default: true,
    },
    // 是否单选
    isSigleSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    let isOnlyLeaf = this.isOnlyLeaf
    return {
      treeData: [],
      userList: [],
      defaultProps: {
        label: 'name',
        children: 'children',
        disabled(data, node) {
          return isOnlyLeaf && !data.userId
        },
        isLeaf(data, node) {
          return !!data.userId
        },
      },
    }
  },
  watch: {},
  computed: {
    Pvisible: {
      get() {
        // this.getTree();
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.userList = []
        getTree().then(({ data }) => {
          data.forEach((element) => {
            element.key = createUniqueString()
          })
          let _data = this.handleTree(data)
          // console.log('d', data)
          resolve(_data)
          // api.getList({ department: _data[0].id }).then(({ rows, total }) => {
          //   _data && rows.unshift(..._data);
          //   resolve(rows);
          // });
        })
      } else {
        getList({ department: node.data.id }).then(({ rows }) => {
          rows.forEach((element) => {
            element.key = createUniqueString()
          })
          node.data.children && rows.push(...node.data.children)
          resolve(rows)
        })
      }
    },
    // 选择变化
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        if (this.isSigleSelect) {
          // 单选情况
          this.$refs.tree.setCheckedKeys([data.key])
        }
        this.userList.push(data)
      } else {
        this.userList.splice(this.userList.indexOf(data), 1)
      }
      // console.log(data, checked, indeterminate);
    },
    // 确 定
    submit() {
      this.Pvisible = false
      this.$emit('success', this.userList)
    },
    // 取消选择
    cancle(key) {
      this.$refs.tree.setChecked(key, false)
    },
  },
}
</script>
setChecked
<template>
  <el-dialog :title="title" :visible.sync="Pvisible">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="12" :xs="24">
        <div class="head-container">
          <!-- <div>部门架构</div> -->
          <!-- :filter-node-method="filterNode" -->
          <el-tree
            node-key="key"
            ref="tree"
            lazy
            accordion
            show-checkbox
            :check-on-click-node="false"
            :expand-on-click-node="true"
            :load="loadNode"
            :props="defaultProps"
            :check-strictly="!isOnlyLeaf"
            @check-change="handleCheckChange"
          ></el-tree>
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="12" :xs="24" class="user-list">
        <el-row :gutter="10">选择人员列表</el-row>
        <el-row v-for="(item, index) in userList" :key="index">
          <i class="el-icon-user-solid"></i>
          {{ item.name }}
          <i
            class="el-icon-minus fr cp"
            title="取消选择"
            @click="cancle(item.key)"
          ></i>
        </el-row>
      </el-col>
    </el-row>
    <div slot="footer">
      <el-button @click="Pvisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.user-list {
  .el-row {
    line-height: 26px;
  }
}
</style>
