equipment/src/views/user/role.vue

<template>
  <div class="app-container">
    <!--头部选项-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input v-model="query.roleName" placeholder="角色名称" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="crud.toQuery" />
        <query :crud="crud" />
      </div>
      <crud :permission="permission" />
    </div>
    <!--表格内容-->
    <CustomTable ref="customTable" :col-configs="colConfigs" :columns="columns" :crud="crud">
      <el-table-column v-if="checkPermission(permission.edit)" slot="operation" align="center" width="100" label="操作">
        <template slot-scope="scope">
          <Edit :permission="permission" :data="scope.row" :disabled-edit="false" />
        </template>
      </el-table-column>
    </CustomTable>
    <pagination />
    <!--弹出框内容-->
    <el-dialog
      width="80%"
      :before-close="crud.cancelCU"
      :visible="crud.status.editor > 0"
      :title="crud.status.title"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="角色名称：" prop="roleName">
          <el-input v-model="form.roleName" placeholder="填写角色名称" type="text" />
        </el-form-item>
        <el-form-item label="角色代码：" prop="roleCode">
          <el-input v-model="form.roleCode" placeholder="填写角色代码" type="text" />
        </el-form-item>
        <el-form-item label="功能权限：">
          <el-table
            ref="menuList"
            :data="menuList"
            border
            fit
            highlight-current-row
            row-key="permission.id"
            :default-expand-all="true"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column label="菜单名称" width="400">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.checked" :indeterminate="scope.row.indeterminate" @change="handleCheckAllChange(scope.row, $event)">
                  {{ scope.row.permission.title }}
                </el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="功能选项">
              <template v-if="scope.row.children.length === 0" slot-scope="scope">
                <el-checkbox
                  v-for="options in scope.row.resourcePermissions"
                  :key="options.id"
                  v-model="options.checked"
                  :label="options.permissionType"
                  @change="handleCheckChange(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="crud.cancelCU">
          取 消
        </el-button>
        <el-button type="primary" @click="crud.submitCU">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CRUD, { form, header, presenter } from '@/components/Crud/crud'
import Crud from '@/components/Crud'
import Query from '@/components/Crud/Query'
import Edit from '@/components/Crud/Edit'
import CustomTable from '@/components/Crud/Table'
import Pagination from '@/components/Crud/Pagination'
import CrudRole from '@/api/role'
import { getPermissionsByRoleId, getTree } from '@/api/permission'

// crud交由presenter持有
const defaultCrud = presenter(CRUD({
  title: '角色',
  url: '/role/list',
  orderBy: ['id asc'],
  crudMethod: { ...CrudRole }
}))

// 设置初始form
const defaultForm = form({
  id: null,
  roleName: '',
  roleCode: '',
  menuOptionIds: {}
})

export default {
  name: 'RoleList',
  components: { Pagination, Query, Crud, CustomTable, Edit },
  mixins: [defaultCrud, defaultForm, header()],
  data() {
    return {
      menuList: [],
      colConfigs: [
        { prop: 'roleName', label: '角色名称', align: 'center' },
        { prop: 'roleCode', label: '角色代码', align: 'center' },
        { slot: 'operation' }
      ],
      permission: {
        add: ['role:add'],
        edit: ['role:update'],
        del: ['role:delete']
      },
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        roleCode: [
          { required: true, message: '请输入角色代码', trigger: 'blur' }
        ]
      },
      checkedIds: new Set()
    }
  },
  mounted() {
    this.getAllMenu()
  },
  methods: {
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU]() {
      this.clearChecked(this.menuList)
      this.checkedIds.clear()
    },
    // 编辑框打开后做的操作
    [CRUD.HOOK.afterToEdit](crud, form) {
      this.getRoleMenuList(form.id)
    },
    // 提交前的验证
    [CRUD.HOOK.afterValidateCU]() {
      this.form.menuOptionIds = Array.from(this.checkedIds)
    },
    // 获取菜单树
    getAllMenu() {
      getTree().then(data => {
        this.menuList = data
      })
    },
    getRoleMenuList(roleId) {
      getPermissionsByRoleId(roleId).then(data => {
        data = data.map(row => row.resourcePermissionId)
        this.menuList.forEach(permission => {
          if (permission.children.length > 0) {
            this.echoChildren(permission.children, data)
          } else {
            this.settingChecked(permission, data)
          }
        })
      })
    },
    handleCheckAllChange(val, checked) {
      // 有下级去处理下级
      if (val.children.length > 0) {
        if (checked) {
          this.checkedIds.add(val.resourcePermissions[0].id)
        } else {
          this.checkedIds.delete(val.resourcePermissions[0].id)
        }
        this.findChildren(val.children, checked)
      } else {
        // 无下级处理本级
        val.resourcePermissions.forEach(options => {
          options.checked = checked
          if (checked) {
            this.checkedIds.add(options.id)
          } else {
            this.checkedIds.delete(options.id)
          }
        })
      }
      // 处理上级
      if (val.permission.pid !== 0) {
        this.findParent(this.menuList, val.permission.pid)
      }
      val.indeterminate = false
    },
    handleCheckChange(val) {
      const length = val.resourcePermissions.length
      let checkedLength = 0
      val.resourcePermissions.forEach(options => {
        if (options.checked) {
          this.checkedIds.add(options.id)
          checkedLength++
        } else {
          this.checkedIds.delete(options.id)
        }
      })
      val.checked = checkedLength === length
      val.indeterminate = checkedLength > 0 && checkedLength < length
      // 处理上级
      if (val.permission.pid !== 0) {
        this.findParent(this.menuList, val.permission.pid)
      }
    },
    findChildren(list, checked) {
      list.forEach(children => {
        children.checked = checked
        children.indeterminate = false
        children.resourcePermissions.forEach(options => {
          options.checked = checked
          if (checked) {
            this.checkedIds.add(options.id)
          } else {
            this.checkedIds.delete(options.id)
          }
          if (children.children.length > 0) {
            this.findChildren(children.children, checked)
          }
        })
      })
    },
    findParent(list, pid) {
      list.forEach(result => {
        let parentCheckedLength = 0
        let parentIndeterminateLength = 0
        // 对当前层级的上级操作
        if (result.permission.id === pid) {
          // 判断下级的状态，用来为父级的状态做判断
          result.children.forEach(children => {
            if (children.indeterminate) {
              parentIndeterminateLength++
            } else if (children.checked) {
              parentCheckedLength++
            }
          })
          result.checked = parentCheckedLength === result.children.length
          result.indeterminate = (parentIndeterminateLength > 0 || parentCheckedLength > 0) && parentCheckedLength < result.children.length
          if (result.permission.component !== 'Layout') {
            if (result.checked || result.indeterminate) {
              this.checkedIds.add(result.resourcePermissions[0].id)
            } else {
              this.checkedIds.delete(result.resourcePermissions[0].id)
            }
          }
          // 如果还有上级，继续操作
          if (result.permission.pid !== 0) {
            this.findParent(this.menuList, result.permission.pid)
          }
        } else if (result.children.length > 0) {
          this.findParent(result.children, pid)
        }
      })
    },
    echoChildren(list, optionsIds) {
      list.forEach(result => {
        if (result.children.length === 0) {
          this.settingChecked(result, optionsIds)
        } else {
          this.echoChildren(result.children, optionsIds)
        }
      })
    },
    settingChecked(result, optionsIds) {
      let matching = false
      result.resourcePermissions.forEach(options => {
        optionsIds.forEach(optionsId => {
          if (options.id === optionsId) {
            options.checked = true
            matching = true
          }
        })
      })
      if (matching) {
        this.handleCheckChange(result)
      }
    },
    // 递归清空菜单和选项
    clearChecked(menuList) {
      menuList.forEach(permission => {
        permission.checked = false
        permission.indeterminate = false
        permission.resourcePermissions.forEach(options => {
          options.checked = false
        })
        if (permission.children.length > 0) {
          this.clearChecked(permission.children)
        }
      })
    }
  }
}
</script>