mediaAll/src/view/allMedia/RoleManage.vue

<template>
  <div class="RoleManage">
    <header_local />
    <div style="padding: 0.5em">
      <br />
      <el-form :inline="true" :model="dataCol" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input
            v-model="dataCol.keyword"
            placeholder="请输入用户名"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getRoleList">查询</el-button>
          <el-button type="primary" @click="showRoleD">新增角色</el-button>
        </el-form-item>
      </el-form>
      <br />
      <el-table
        :data="dataCol.roleList"
        style="width: 100%"
        :header-cell-style="{
          backgroundColor: '#f4f5f7',
          color: '#606266',
        }"
        ref="table1"
        align="center"
        empty-text="暂无数据"
      >
        <el-table-column prop="name" label="角色" />
        <el-table-column fixed="right" label="权限">
          <template #default="scoped">
            {{ scoped.row.menus.map(v => v.title).join(',') }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scoped">
            <el-popconfirm
              @confirm="() => deleteRole(scoped)"
              title="确定删除角色?"
            >
              <template #reference>
                <el-button type="primary" link>删除</el-button>
              </template>
            </el-popconfirm>
            <el-button
              link
              type="primary"
              @click.prevent="() => showRoleD(scoped)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @current-change="e => changePageDisseminate(e)"
      background
      layout="prev, pager, next"
      :page-count="Math.ceil(dataCol.total / dataCol.size) || 1"
    />
    <!-- 新增/修改角色 -->
    <el-dialog v-model="showRole" title="角色">
      <el-form :model="dataCol" label-width="120px" status-icon>
        <el-form-item label="角色名">
          <el-input v-model="dataCol.roleName" />
        </el-form-item>
        <el-form-item label="菜单" prop="menu">
          <el-select
            multiple
            collapse-tags
            v-model="dataCol.menu"
            class="m-2"
            placeholder="选择菜单"
          >
            <el-option
              :label="item.title"
              :value="item.id"
              v-for="item in dataCol.menuList"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveRole"> 确定 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import header_local from './components/header.vue';
import { ElMessage } from 'element-plus';
import {
  getRoleListApi,
  deleteUserApi,
  getMenuApi,
  addRoleApi,
  chagneRoleApi,
} from '@/api/index';

const showRole = ref(false);
const dataCol = reactive({
  keyword: '',
  roleName: '',
  roleList: [],
  page: 1,
  size: 15,
  total: 0,
  menu: [],
  menuList: [],
});

getMenuApi().then(r => {
  dataCol.menuList = r || [];
});

const getRoleList = () => {
  getRoleListApi({
    keyword: dataCol.keyword,
    page: dataCol.page,
    pageSize: dataCol.size,
  }).then(r => {
    dataCol.roleList = r && r.records ? r.records : [];
    dataCol.total = r && r.total ? r.total : 0;
  });
};

const changePageDisseminate = page => {
  dataCol.page = page;
  getRoleList();
};

const showRoleD = data => {
  showRole.value = true;
  dataCol.id = !data ? '' : data.row.roleId;
  dataCol.menu = !data ? [] : data.row.menus.map(v => v.id);
  dataCol.roleName = !data ? '' : data.row.name;
};

const deleteRole = scoped => {
  deleteUserApi({
    id: scoped.row.roleId,
  }).then(() => {
    getRoleList();
  });
};

const saveRole = () => {
  if (!dataCol.roleName || !dataCol.menu.length)
    return ElMessage.error('请输入角色名或选择对应权限');
  if (!dataCol.id)
    addRoleApi({
      name: dataCol.roleName,
      menuId: dataCol.menu,
    }).then(() => {
      showRole.value = false;
      dataCol.menu = [];
      dataCol.roleName = '';
      getRoleList();
    });
  else
    chagneRoleApi({
      id: dataCol.id,
      name: dataCol.roleName,
      menuId: dataCol.menu,
    }).then(() => {
      showRole.value = false;
      dataCol.menu = [];
      dataCol.roleName = '';
      getRoleList();
    });
};

getRoleList();

document.title = '角色管理';
</script>

<style scoped></style>