element ui tree 高亮默认显示，this.$nextTick(() => { this.$refs.tree.setCurrentKey(value);}

 <!-- Unit.vue -->
<template>
  <div>
    <div class="container">
      <el-row :gutter="20">
        <!-- 左侧内容 -->
        <el-col :span="6">
          <el-card class="height">
            <!-- 单位组树 -->
            <el-row :span="24">
              <el-col>
                <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="stretchable">
                  <el-tab-pane label="内部单位" name="first"></el-tab-pane>
                  <el-tab-pane label="外部单位" name="second"></el-tab-pane>
                </el-tabs>
                <el-row class="btn" :span="24">
                  <el-col :span="8">
                    <el-button type="primary" @click="add">新增</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button plain :disabled="editDisabled" @click="edit">编辑</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button plain :disabled="editDisabled" @click="deletes">删除</el-button>
                  </el-col>
                </el-row>
                <!-- 单位组树列表 -->
                <el-tree ref="tree" :data="roleGroupData" :default-expanded-keys="keys" :default-checked-keys="key" @node-expand="changeNode" node-key="id" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="highlight" accordion></el-tree>
                <!-- 新建单位弹框 -->
                <!-- 新建单位弹框 -->
                <el-dialog :title="title" :visible.sync="dialog.dialogFormVisible" :width="DIALOG.width" :id="fileId" :before-close="cancel">
                  <!-- 新增单位 -->
                  <el-form label-width="80px" :model="formLabelAlign" ref="formLabelAlign" :rules="addUnitRules">
                    <el-form-item label="单位名称" prop="unitName">
                      <el-input v-model.trim="formLabelAlign.unitName"></el-input>
                    </el-form-item>
                    <el-form-item label="单位编码" prop="unitCode">
                      <el-input v-model.trim="formLabelAlign.unitCode"></el-input>
                    </el-form-item>
                    <el-form-item label="单位属性" prop="type">
                      <el-input v-model="type" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="上级单位" prop="parentName">
                      <el-input v-model="formLabelAlign.parentName" disabled></el-input>
                    </el-form-item>
                    <el-form-item class="dialogConfirm">
                      <el-button type="primary" @click="save('formLabelAlign')">确认</el-button>
                      <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-dialog>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <!-- 右侧内容 -->
        <el-col :span="18">
          <el-card class="height">
            <el-form :inline="true" :label-position="labelPosition" ref="searchForm" :model="searchForm" label-width="80px" class="topSearchForm" :rules="searchFormRule">
              <el-form-item label="用户姓名" prop="param.userFullname">
                <el-input v-model.trim="searchForm.param.userFullname" placeholder="请输入用户姓名"></el-input>
              </el-form-item>
              <el-form-item label="用户账号" prop="param.accountCode">
                <el-input v-model.trim="searchForm.param.accountCode" placeholder="请输入用户名/手机号码/邮箱地址" style="min-width:260px"></el-input>
              </el-form-item>
              <el-form-item label="" class="queryReset">
                <el-button type="primary" @click="toView('searchForm')">查询</el-button>
                <el-button @click="reset('searchForm')">重置</el-button>
              </el-form-item>
              <div class="clearfix"></div>
            </el-form>
            <div>
              <el-row class="btnGroup">
                <el-col :span="24">
                  <el-button type="primary" :disabled="addDisabledUser" @click="addList">新增</el-button>
                  <el-button @click="remove" :disabled="removeRole">删除</el-button>
                </el-col>
              </el-row>
              <!-- 单位列表 -->
              <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="userFullname" label="用户姓名">
                  <template slot-scope="scope">{{ scope.row.userFullname }}</template>
                </el-table-column>
                <el-table-column prop="unitName" label="所属单位">
                  <template slot-scope="scope">{{ scope.row.units[0].unit.unitName }}</template>
                </el-table-column>
                <el-table-column prop="userName" label="用户名">
                  <template slot-scope="scope">{{ scope.row.userName }}</template>
                </el-table-column>
                <el-table-column prop="userMobile" label="手机号码">
                  <template slot-scope="scope">{{ scope.row.userMobile | conceal }}</template>
                </el-table-column>
                <el-table-column prop="userEmail" label="邮箱地址">
                  <template slot-scope="scope">{{ scope.row.userEmail }}</template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <div class="page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PAGE_CONFIG.pageNum" :page-sizes="PAGE_CONFIG.sizes" :page-size="PAGE_CONFIG.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="PAGE_CONFIG.total" v-if="PAGE_CONFIG.total>0"></el-pagination>
              </div>
              <!-- 新增关联 -->
              <AddcontentVue ref="addContent" :dialogFormContent="dialog.dialogFormContent" :unitType="unitType" @updataContent="changeContent" @updataTable="changeTablie" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import '@/assets/styles/identity.styl'
import { IDENTITY_CLIENT, PAGE_CONFIG, DIALOG } from '@/utils/identity/constants'
// import { getErrorMessage } from '@/utils/i18n'
import { Message } from 'element-ui'
import { getMessagesFromError } from '@/utils/i18n'
import AddcontentVue from './components/AddContent'
import gql from 'graphql-tag'
export default {
  components: {
    AddcontentVue
  },

  filters: {
    // 隐藏手机号中间四位
    conceal: function (value) {
      if (value) {
        return (value = value.substr(0, 3) + '****' + value.substr(7))
      } else {
        return (value = '')
      }
    }
  },
  // props: {},

  data () {
    return {
      fileId: this.id || 'vue-filesone-' + +new Date() + +Math.random(),
      PAGE_CONFIG,
      DIALOG,
      activeName: 'first',
      unitType: '2',
      parentName: '',
      groupData: [],
      stretchable: true,
      getCurrentItem: {},
      editDisabled: true,
      // addDisabledUser: true,
      // 左侧属性单位列表
      roleGroupData: [],
      defaultProps: {
        children: 'children',
        label: 'unitName'
      },
      tabPosition: 'top',
      labelPosition: 'left',
      multipleSelection: [],
      // 编辑，新增必填
      addUnitRules: {
        unitName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        unitCode: [{ required: true, message: '请选择编码', trigger: 'blur' }]
      },
      // 左侧新增，编辑单位表单
      formLabelAlign: {
        id: '',
        unitName: '',
        unitCode: '',
        parentId: '',
        parentName: '组织机构'
      },
      // 弹出框标题
      title: '',
      // 右侧查询单位下单位列表
      searchForm: {
        pageNum: PAGE_CONFIG.pageNum,
        pageSize: PAGE_CONFIG.pageSize,
        param: {
          unitId: '',
          userType: '2',
          accountCode: '',
          userFullname: ''
        }
      },
      searchFormRule: {},
      // 右侧单位数组
      tableData: [],
      // 弹框关闭删除
      dialog: {
        dialogFormVisible: false,
        dialogFormContent: false
      },
      keys: [],
      key: [],
      highlight: true,
      nodeKey: ''
    }
  },
  computed: {
    // 多选删除是否能用
    removeRole () {
      return this.multipleSelection.length === 0
    },
    // 判断单位属性
    type () {
      return this.activeName === 'second' ? '外部单位' : '内部单位'
    },
    addDisabledUser () {
      return !this.getCurrentItem.children || (this.getCurrentItem.children.length > 0)
    }
  },

  // created () {},

  mounted () {
    this.getUnitList(this.unitType)
  },

  methods: {
    addList () {
      this.dialog.dialogFormContent = true
      this.$refs.addContent.searchUserList()
    },
    //  获取单位列表
    searchUserList () {
      this.$apollo
        .query({
          query: gql`
            query users ($unitUserInput:UnitUserInput, $pageInput:PageInput) {
              users (unitUserInput:$unitUserInput, pageInput:$pageInput) {
                total
                list {
                  id
                  userSex
                  userName
                  userFullname
                  userMobile
                  userEmail
                  units {
                    unit {
                      unitName
                    }
                  }
                }
              }
            }
          `,
          fetchPolicy: 'network-only',
          variables: {
            unitUserInput: {
              userFullname: this.searchForm.param.userFullname,
              accountCode: this.searchForm.param.accountCode,
              userType: this.searchForm.param.userType,
              unitId: this.searchForm.param.unitId
            },
            pageInput: {
              pageNum: this.searchForm.pageNum,
              pageSize: this.searchForm.pageSize
            }
          },
          client: IDENTITY_CLIENT
        })
        .then(res => {
          if (res.data.users) {
            this.tableData = JSON.parse(JSON.stringify(res.data.users.list))
            this.PAGE_CONFIG.total = res.data.users.total
          }
        })
        .catch(err => {
          Message.error(getMessagesFromError(err).join(';'))
        })
    },
    // 点击切换内部用户外部用户
    handleClick (tab, event) {
      // 1代表外部,2代表内部
      // this.addDisabledUser = true
      this.getCurrentItem = {}
      if (tab.name === 'first') {
        this.unitType = '2'
        this.getUnitList(this.unitType)
      } else {
        this.unitType = '1'
        this.getUnitList(this.unitType)
      }
      this.searchForm.param.userType = this.unitType
    },
    // 根据type查询内部机构单位
    getUnitList (type) {
      this.$apollo
        .query({
          query: gql`
            query units ($unitType:String){
              units (unitType: $unitType) {
                id
                parentId
                unitName
                unitCode
                children {
                  id
                  parentId
                  unitName
                  unitCode
                  children {
                    id
                    parentId
                    unitName
                    unitCode
                    children {
                      id
                      parentId
                      unitName
                      unitCode
                      children {
                        id
                        parentId
                        unitName
                        unitCode
                      }
                    }
                  }
                }
              }
            }`,
          fetchPolicy: 'network-only',
          variables: {
            unitType: type
          },
          client: IDENTITY_CLIENT
        }).then(res => {
          if (res.data.units.length) {
            let form = {}
            this.$set(form, 'unitName', '组织机构')
            this.$set(form, 'children', JSON.parse(JSON.stringify(res.data.units)))
            this.roleGroupData = []
            this.roleGroupData.push(form)
            // 暂时保留
            // this.$store.commit('SET_ID', this.roleGroupData[0].id)
            this.$store.commit('SET_ID', this.roleGroupData[0].children[0].id)
            this.keys = []
            this.keys.push(this.roleGroupData[0].children[0].id)
            this.key = []
            this.key.push(this.roleGroupData[0].children[0].id)
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.roleGroupData[0].children[0].id)
            })
            this.searchForm.param.unitId = this.roleGroupData[0].children[0] ? this.roleGroupData[0].children[0].id : ''
            this.searchUserList()
            this.groupData = JSON.parse(JSON.stringify(res.data.units))
            this.groupData.push({ unitName: '组织机构', id: 'ae60506073b14983868c8b752914f027' })
            this.groupData.push({ unitName: '组织机构', id: '1c0acfadb4fa4939b3a25330589de332' })
          }
        }).catch(err => {
          Message.error(getMessagesFromError(err).join(';'))
        })
    },
    // 单位树点击事件
    handleNodeClick (data, node) {
      this.getCurrentItem = {}
      this.formLabelAlign.parentId = ''
      this.formLabelAlign.parentName = ''
      // 判断点击结构组织中是不是有id 不调用接口
      if (data.id) {
        if (data.parentId) {
          this.editDisabled = false
        } else {
          // 一级组织机构不可编辑，删除
          this.editDisabled = true
        }
        this.getCurrentItem = data
        this.searchForm.param.unitId = data.id
        this.$store.commit('SET_ID', data.id)
        this.searchUserList()
      }
    },
    // 获取单位下的用户列表
    // 关闭弹框事件
    closeDialogHandle () {
      this.dialog.dialogFormVisible = false
    },
    // 展开事件
    changeNode () {
    },
    // 数据库删除
    // 删除
    deleteUnit () {
      this.$apollo
        .mutate({
          mutation: gql`mutation deleteUnit ($id:ID!){
            deleteUnit (id: $id)
          }
          `,
          variables: {
            id: this.getCurrentItem.id
          },
          client: IDENTITY_CLIENT
        })
        .then(res => {
          if (res.data.deleteUnit) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getUnitList(this.unitType)
            this.editDisabled = true
            this.getCurrentItem = {}
          }
        })
        .catch(err => {
          Message.error(getMessagesFromError(err).join(';'))
        })
    },
    // 删除事件
    deletes () {
      if (this.getCurrentItem.hasOwnProperty('children')) {
        if (this.tableData.length === 0) {
          this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 一级 无二级
            this.roleGroupData = this.roleGroupData.filter(
              item => item.id !== this.getCurrentItem.id
            )
            this.deleteUnit()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        } else {
          this.$message.error('该单位下有用户，不可删除')
        }
      } else {
        // 二级
        if (this.tableData.length === 0) {
          this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              // 一级 无二级
              this.deleteUnit()
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        } else {
          this.$message.error('该单位下有子单位，不可删除')
        }
      }
    },
    // 新增单位
    add () {
      this.dialog.dialogFormVisible = true
      this.title = '新增单位'
      this.formLabelAlign.id = ''
      this.formLabelAlign.unitName = ''
      this.formLabelAlign.unitCode = ''
      if (this.getCurrentItem.parentId) {
        this.formLabelAlign.parentId = this.getCurrentItem.id
        this.formLabelAlign.parentName = this.getCurrentItem.unitName
      } else {
        this.formLabelAlign.parentName = '组织机构'
      }
    },
    saveParentName (arr) {
      // var self = this
      arr.forEach(item => {
        if (item.id === this.getCurrentItem.parentId) {
          this.formLabelAlign.parentName = item.unitName
        } else {
          if (item.hasOwnProperty('children') && item.children.length !== 0) {
            this.saveParentName(item.children)
          }
        }
      })
    },
    // 编辑单位
    edit () {
      this.title = '编辑单位'
      this.dialog.dialogFormVisible = true
      this.formLabelAlign.id = this.getCurrentItem.id
      this.formLabelAlign.unitCode = this.getCurrentItem.unitCode
      this.formLabelAlign.unitName = this.getCurrentItem.unitName
      // fu 赋值parentId
      this.formLabelAlign.parentId = this.getCurrentItem.parentId
      if (this.getCurrentItem.parentId) {
        this.saveParentName(this.groupData)
      }
    },
    // 列表查询
    toView (searchForm) {
      this.$refs[searchForm].validate((valid) => {
        if (valid) {
          this.searchForm.pageNum = '1'
          this.searchForm.pageSize = '10'
          this.searchUserList()
        } else {
          return false
        }
      })
    },
    // 取消
    cancel () {
      this.dialog.dialogFormVisible = false
      this.$refs['formLabelAlign'].clearValidate()
    },
    // 重置
    reset (formData) {
      this.$refs[formData].resetFields()
      this.dialog.dialogFormVisible = false
    },
    // table多选
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 接收返回值
    changeContent () {
      this.dialog.dialogFormContent = false
    },
    changeTablie () {
      this.dialog.dialogFormContent = false
      this.searchUserList()
    },
    // 删除
    remove () {
      let arr = this.multipleSelection.map(value => {
        return value.id
      })
      this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$apollo
          .mutate({
            mutation: gql`mutation deleteUnitUser($unitId:ID, $userIds:[ID!]){
              deleteUnitUser(unitId: $unitId, userIds: $userIds)
            }`,
            variables: {
              unitId: this.searchForm.param.unitId,
              userIds: arr
            },
            client: IDENTITY_CLIENT
          })
          .then(res => {
            if (res.data.deleteUnitUser) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.multipleSelection = []
              this.searchUserList()
            }
          })
          .catch(err => {
            Message.error(getMessagesFromError(err).join(';'))
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑新增单位提交事件
    save (ruleForm) {
      // console.log(this.formLabelAlign)
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          this.$apollo
            .mutate({
              mutation: gql`mutation saveUnit($id:ID, $unit:UnitInput){
                saveUnit (id:$id, unit:$unit) {
                  id
                }
              }`,
              variables: {
                id: this.formLabelAlign.id,
                unit: {
                  unitType: this.unitType,
                  parentId: this.formLabelAlign.parentId,
                  unitName: this.formLabelAlign.unitName,
                  unitCode: this.formLabelAlign.unitCode
                }
              },
              client: IDENTITY_CLIENT
            })
            .then(res => {
              if (this.formLabelAlign.id) {
                if (res.data.saveUnit.id) {
                  this.$message({
                    message: '更新成功',
                    type: 'success'
                  })
                } else {
                  this.$message.error('更新失败')
                }
              } else {
                if (res.data.saveUnit.id) {
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  })
                } else {
                  this.$message.error('添加失败')
                }
              }
              this.$refs[ruleForm].resetFields()
              this.dialog.dialogFormVisible = false
              this.getCurrentItem = {}
              this.editDisabled = true
              this.getUnitList(this.unitType)
            })
            .catch(err => {
              Message.error(getMessagesFromError(err).join(';'))
            })
        } else {
          return false
        }
      })
    },
    // 一页几条查询事件
    handleSizeChange (val) {
      this.searchForm.pageSize = val
      this.searchUserList()
    },
    // 第几页查询事件
    handleCurrentChange (val) {
      this.searchForm.pageNum = val
      this.searchUserList()
    }
  }
}

</script>
<style lang='stylus'  rel='stylesheet/stylus' scoped>
.btn
  margin-bottom 20px
  .listBtn
    float right
</style>