一、 先讲解tree树形结构：
1. key是唯一值，也就是后端接口返回的id， 

1. 5.2接口

 1.1 调5.2接口，获取treeData格式，赋值就展示出来tree的样子了

 主要是用replaceFields替换key title value标识
Ant Design 必须再data中用这个树形进行key 和title 和value的标识，对上之后就可以展示出来tree

 
1.2 展示出来

 
1.3 传id的时候看下面 2.2 怎么把id传给 后端的

 二、 角色权限，看看怎么调接口

1. 先调分页列表接口：2.6



2.1 新增调 2.2 接口： 获取下拉框和tree的数据

接口 2.2，新增调这个接口，传这些参数

 

 
2.2 赋值

 

 3. 编辑调接口： 
编辑调2.1 接口，传id，

拿到回显数据

 

 3.1 回显数据赋值

 3.2 tree树形结构的赋值

修改的时候调2.3 ，修改角色

 

三、 所有代码：

 

list.vue:
 

<template>

  <div>

    <div class="pageTitle">

      <div class="title">

        <span class="titleName">角色管理</span>

        <span class="content">系统当前所有用户</span>

      </div>

    </div>

    <div class="wrap">

      <div class="sea">

        <Input

          class="search"

          v-model="inputValue"

          placeholder="输入搜索条件"

          @keyup.enter="searchEnterFun"

        >

          搜索

        </Input>

      </div>

      <base-table

        ref="roleList"

        @onAction="onAction"

        :table="table"

        :removeUrl="removeUrl"

        :removeMsg="'是否删除该角色？'"

      ></base-table>

    </div>

  </div>

</template>

<script>

import path from '@/api/index.js'

import { BaseTable } from '@/components/index.js'

export default {

  name: 'UserList',

  components: {

    BaseTable

  },

  props: {},

  data() {

    return {

      removeUrl: path.set.role.base,

      // removeUrl: '/callsys/role/', //传接口路径-》BaseTable || 删除的接口，成功后直接删除

      table: {

        url: path.set.role.list,

        // url: '/callsys/role/page', // 传接口路径-》BaseTable || table数据的接口，成功后直接拿到数组数据 -558行 527行

        rowKey: 'roleId',

        selectable: false,

        columns: [

          {

            title: '角色名称',

            dataIndex: 'roleName'

          },

          {

            title: '处室名称',

            dataIndex: 'tcq'

          },

          {

            title: '描述',

            dataIndex: 'roleDesc',

            maxLength: 30

          }

        ]

      },

      inputValue: ''

    }

  },

  watch: {},

  computed: {},

  mounted() {},

  methods: {

    onAction({ name = '', data = {} }) {

      const actionMap = {

        onCreate: this.doCreate.bind(this), //绑定

        onEdit: this.doEdit.bind(this, data.original)

      }

      actionMap.hasOwnProperty(name) && actionMap[name]()

    },

    doCreate() {

      this.$router.push({

        path: '/home/system/roleForm',

        query: {

          mode: 'create'

        }

      })

    },

    // 1.点击编辑按钮跳转传id获取列表数据回显

    doEdit(data) {

      this.$router.push({

        path: '/home/system/roleForm',

        query: {

          mode: 'edit',

          id: data.roleId

        }

      })

    },

    // 回车搜索

    searchEnterFun() {

      console.log('调接口')

      // this.getDictys()

    }

  }

}

</script>


form.vue:
 

<template>

  <div class="formPage">

    <div class="pageTitle">角色详细信息</div>

    <a-form-model

      class="pageContent"

      ref="form"

      v-bind="formItemLayout"

      :model="formModel"

      :rules="rules"

    >

      <div class="formContent">

        <div class="fomrLeft">

          <div class="fomrLeft_box">

            <h2>角色信息</h2>

            <a-form-model-item label="名称" prop="roleName">

              <a-input v-model="formModel.roleName" placeholder="请输入角色名称"></a-input>

            </a-form-model-item>

            <a-form-model-item label="处室名称" prop="tcq">

              <a-select v-model="formModel.tcq" palaceholder="请选择处室" :allowClear="true">

                <a-select-option v-for="item in tcqList" :key="item.name" :value="item.name">{ {

                  item.name

                }}</a-select-option>

              </a-select>

            </a-form-model-item>

            <a-form-model-item label="描述" prop="roleDesc">

              <a-textarea

                v-model="formModel.roleDesc"

                palaceholder="角色描述"

                :auto-size="{ minRows: 3, maxRows: 5 }"

              ></a-textarea>

            </a-form-model-item>

          </div>

        </div>

        <div class="fomrRight">

          <div class="fomrRight_box">

            <h2>拥有的权限</h2>

            <div class="permissions">功能权限</div>

            <div class="treeing">

              <!--expandedKeys=选中的id/; autoExpandParent=true/false; onExpand/onSelect=函数;

                 replaceFields: 替换treeNode中title,key,children 字段为treeData中对应的字段 -->

              <a-tree

                v-model="checkedKeys"

                :tree-data="treeData"

                :replaceFields="replaceFields"

                checkable

                :expanded-keys="expandedKeys"

                :auto-expand-parent="autoExpandParent"

                :selected-keys="selectedKeys"

                @expand="onExpand"

              />

            </div>

          </div>

        </div>

      </div>

    </a-form-model>

    <div class="pageFoot">

      <a-button type="primary" class="saveBtn" @click="save">确定</a-button>

      <a-button @click="cancle">取消</a-button>

    </div>

  </div>

</template>

<script>

import { formItemLayout } from '@/constants/base'

import SystemService from '@/service/system.js'

import cdgl from '@/service/cdgl.js'

export default {

  name: 'RoleForm',

  components: {},

  props: {},

  data() {

    return {

      formItemLayout,

      tcqList: [],

      menuList: [],

      formModel: {

        roleName: '',

        tcq: '',

        roleDesc: '',

        permissions: [],

        tcqList: []

      },

      rules: {

        roleName: [{ required: true, message: '请填写角色名称', trigger: 'blur' }],

        tcq: [{ required: true, message: '请选择', trigger: 'blur' }],

        permissions: [{ required: true, message: '请选择', trigger: 'blur' }],

        tcqList: [{ required: true, message: '请选择', trigger: 'blur' }]

      },

      // 1. tree

      replaceFields: {

        children: 'children',

        title: 'name',

        key: 'id',

        value: 'id'

      },

      treeData: [],

      expandedKeys: ['802'], //默认打开tree - 这是key值，也就是后端返回的id

      autoExpandParent: true,

      checkedKeys: [], //3. 选中的tree-id，

      selectedKeys: []

    }

  },

  // 3. 新增-tree树形结构传选中的id

  watch: {

    checkedKeys(val) {

      // console.log(val, 'val----tree树形结构选中的id')

      this.formModel.permissions = val

    }

  },

  computed: {},

  mounted() {

    this.getAllTcqData()

    this.getAllMenu()

    this.getTrees() //1.

    if (this.$route.query.mode === 'edit') {

      this.getDetail(this.$route.query.id)

    }

  },

  methods: {

    // 1. tree-获取所有菜单tree树形结构

    getTrees() {

      cdgl.getTree().then((res) => {

        this.treeData = res

      })

    },

    // 1. tree右箭头

    onExpand(expandedKeys) {

      this.expandedKeys = expandedKeys

      this.autoExpandParent = true

      // console.log(this.autoExpandParent, 'tree-----true/false-默认打开所有选项')

    },

    // 3. 编辑回显数据(包括tree)

    getDetail(id) {

      SystemService.getRoleDetail(id).then((res) => {

        this.formModel.roleName = res.sysRole.roleName

        this.formModel.roleDesc = res.sysRole.roleDesc

        this.formModel.roleId = res.sysRole.roleId

        this.formModel.tcq = res.sysRole.tcq

        this.formModel.tcqList = res.tcqList

        res.permissions.length > 0 &&

          res.permissions.forEach((item) => {

            this.formModel.permissions.push(item.menuId)

            this.checkedKeys = this.formModel.permissions //3.1 选中的tree回显

          })

      })

    },

    // 2.获取下拉框处室名称

    getAllTcqData() {

      SystemService.getAllTcq().then((res) => {

        this.tcqList = [...res]

        // console.log(res, 'res----处室名称')

      })

    },

    // 没用

    getAllMenu() {

      SystemService.getAllMenu().then((res) => {

        this.menuList = [...res]

      })

    },

    save() {

      this.$refs.form.validate((valid) => {

        if (valid) {

          if (this.$route.query.mode === 'create') {

            SystemService.addRole(this.formModel).then((res) => {

              this.$message.success('操作成功')

              this.$router.push('/home/system/role')

            })

          } else if (this.$route.query.mode === 'edit') {

            SystemService.updateRole(this.formModel).then((res) => {

              this.$message.success('操作成功')

              this.$router.push('/home/system/role')

            })

          }

        } else {

          return false

        }

      })

    },

    cancle() {

      this.$refs.form.resetFields()

      this.$router.go(-1)

    }

  }

}

</script>