树形结构对勾和半勾的回显问题

<template>
  <el-dialog :title="title"
             :visible.sync="showDialog"
             width="40%"
             @close='closeDialog'>
    <!-- 表单 -->
    <el-form :model="formData"
             ref="formRef"
             :rules="formRules"
             label-width="150px"
             :inline='false'
             size="normal">
      <el-form-item label="角色名称"
                    prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="角色描述"
                    prop="description">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>
      <el-form-item label="角色权限"
                    prop="username">
        <!-- 绘制展示树 -->
        <el-tree ref="tree"
                 :data="allAuth"
                 :props="{label:'title'}"
                 node-key="id"
                 show-checkbox>
        </el-tree>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary"
                 @click="btnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMenuListApi } from '@/api/menu'
import { addroleApi, editroleInfoApi } from '@/api/role'
export default {
  data () {
    return {
      showDialog: false,
      formData: {
        name: '',
        description: '',
        menuidas: [],  //获取所有打勾或者半勾的数据
      },
      formRules: {
        name: [{ required: true, message: "请输入", trigger: 'blur' }],
        description: [{ required: true, message: "请输入", trigger: 'blur' }],
      },
      allAuth: [],
      defaultCheckKeys: [], //默认选中的数据
    };
  },
  computed: {
    title () {
      return this.formData.id ? '修改角色' : '添加角色'
    }
  },
  mounted () { this.getAllMenu() },
  methods: {
    //获取所有权限
    async getAllMenu () {
      const res = await getMenuListApi()
      this.allAuth = res
    },

    closeDialog () {
      this.formData = {
        name: '',
        description: '',
        menuidas: [],
      }
      this.$refs.formRef.resetFields()
    },
    async btnOk () {
      console.log(999);
      //校验
      try {
        await this.$refs.formRef.validate()
      } catch (error) {
        return console.log(error);
      }
      //发起请求
      const checkKeys = this.$refs.tree.getCheckedKeys()  //对勾
      const halfKeys = this.$refs.tree.getCheckedKeys()  //半勾
      this.formData.menuidas = [...checkKeys, ...halfKeys]  //整理数据
      await addroleApi(this.formData)
      this.$emit('updateList')
      this.$message.success('新增成功')
      this.showDialog = false
    }
  }
}
</script>

<style>
</style>d

<template>
  <el-card>

    <!-- 表单筛选区域 -->
    <el-form label-width="80px"
             :inline='true'
             size="normal">
      <el-form-item label="角色名">
        <el-input size="small"
                  v-model="queryData.catename"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="samll"
                   type="primary"
                   @click="searchOk">搜索</el-button>
        <el-button size="small"
                   @click="searchCancel">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作区域 -->
    <el-row type="flex"
            justify="space-between">
      <div>
        <el-button type="warning"
                   size="small">导出</el-button>
      </div>
      <div>
        <el-button type="primary"
                   size="small"
                   @click="$refs.addRole.showDialog =true">新增</el-button>
      </div>
    </el-row>
    <br>
    <!-- 表格区域 -->
    <el-table :data="list"
              border.add
              stripe>
      <el-table-column type="index"
                       label="#"></el-table-column>
      <el-table-column prop="id"
                       label="角色ID"></el-table-column>
      <el-table-column prop="name"
                       label="角色名称"></el-table-column>
      <el-table-column prop="description"
                       label="角色描述"></el-table-column>
      <el-table-column prop="create_date"
                       label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button size="small"
                     type="primary"
                     @click="editRow(row.id)">编辑</el-button>
          <el-button size="small"
                     type="danger"
                     @click="delRow(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="sizeChange"
                   @current-change="currentChange"
                   :current-page.sync="queryData.page"
                   :page-sizes="[5, 10, 15,20]"
                   :page-size="queryData.limit"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
                   background>
    </el-pagination>
    <!-- 新增 修改的弹框组件 -->
    <addRole ref="addRole"
             @updateList='initData' />
  </el-card>
</template>

<script>
import addRole from './components/addRole.vue'
import { getroleListApi, getroleInfoApi, delroleInfoApi } from '@/api/role'
export default {
  name: "role",
  components: { addRole },
  data () {
    return {
      //列表变量
      list: [],
      queryData: {
        catename: '',
        page: 1,
        limit: 5
      },
      total: 0
    };
  },
  created () { this.initData() },
  methods: {
    async initData () {
      const res = await getroleListApi(this.queryData)
      console.log(res);
      this.list = res.data
      this.total = res.count
    },
    //【列表功能--分页】
    sizeChange (val) {
      this.queryData.limit = val
      this.initData()
    },
    //【列表功能--分页】
    currentChange (val) {
      this.queryData.page = val
      this.initData()
    },
    //【列表功能--搜索】
    searchOk () {
      this.queryData.page = 1
      this.initData()
    },
    //【列表功能--重置】
    searchCancel () {
      this.queryData.page = 1
      this.queryData.catename = ''
      this.initData()
    },
    //【弹框功能--修改 数据回显】
    async editRow (id) {
      const res = await getroleInfoApi(id)
      this.$refs.addRole.showDialog = true
      this.$refs.addRole.formData = res
      //获取树结构最底层的节点数据
      const menuSmallId = []
      res.authList.forEach((item) => {
        this.getDefaultCheck(item, menuSmallId)
      })
      this.$refs.addRole.defaultCheckKeys = menuSmallId
    },
    //获取树结构最底层的节点数据
    getDefaultCheck (node, arr) {
      //node是节点信息,arr是存储数组
      if (node.children && node.children.length) {
        node.children.forEach((val) => {
          this.getDefaultCheck(val, arr)
        })
      } else {
        return arr.push(node.id)
      }
    },
    //【列表功能--删除】
    async delRow (id) {
      try {
        await this.$confirm('确认删除吗？')
      } catch (error) {
        return console.log(error);
      }
      //发起删除的请求
      await delroleInfoApi(id)
      //删除成功的提示
      this.$message.success('删除成功')
      if (this.queryData.page !== 1 && this.list.length === 1) {
        this.queryData.page--
      }
      this.initData()
    }
  }
};
</script>

<style scoped></style>