123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <template>
- <el-container class="role-view panel-block">
- <el-header class="sa-header">
- <div class="sa-title sa-flex sa-row-between">
- <div class="label sa-flex">角色列表</div>
- <div>
- <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
- <el-button icon="Plus" type="primary" @click="addRow">新建角色</el-button>
- </div>
- </div>
- </el-header>
- <el-main class="sa-p-0">
- <div class="sa-table-wrap panel-block panel-block--bottom" v-loading="loading">
- <el-table
- height="100%"
- class="sa-table"
- :data="table.data"
- @sort-change="fieldFilter"
- row-key="id"
- stripe
- >
- <template #empty>
- <sa-empty />
- </template>
- <el-table-column prop="id" label="ID" min-width="100" sortable="custom">
- </el-table-column>
- <el-table-column prop="name" label="角色名称" min-width="200" sortable="custom">
- <template #default="scope">
- <span class="sa-table-line-1">{{ scope.row.name || '-' }}</span>
- </template>
- </el-table-column>
- <el-table-column fixed="right" label="操作" min-width="120">
- <template #default="scope">
- <template v-if="scope.row.id != 1">
- <el-button link type="primary" @click="editRow(scope.row)">编辑</el-button>
- <el-popconfirm
- width="fit-content"
- confirm-button-text="确认"
- cancel-button-text="取消"
- title="确认删除这条记录?"
- @confirm="deleteApi(scope.row.id)"
- >
- <template #reference>
- <el-button link type="danger">删除</el-button>
- </template>
- </el-popconfirm>
- </template>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </el-main>
- <sa-view-bar>
- <template #right>
- <sa-pagination :pageData="pageData" @updateFn="getData" />
- </template>
- </sa-view-bar>
- </el-container>
- </template>
- <script setup>
- import { onMounted, reactive, ref } from 'vue';
- import admin from '@/app/admin/api';
- import { useModal, usePagination } from '@/sheep/hooks';
- import RoleEdit from './edit.vue';
- const { pageData } = usePagination();
- // 列表
- const table = reactive({
- data: [],
- order: '',
- sort: '',
- });
- const loading = ref(true);
- // 获取数据
- async function getData(page, searchParams = {}) {
- if (page) pageData.page = page;
- loading.value = true;
- try {
- const { code, data } = await admin.auth.role.roleList({
- page: 0,
- size: pageData.size,
- ...searchParams,
- });
- if (code == 200) {
- table.data = data.list;
- pageData.page = data.pageNum;
- pageData.size = data.pageSize;
- pageData.total = data.total;
- }
- } catch (error) {
- console.error('获取数据失败:', error);
- } finally {
- loading.value = false;
- }
- }
- // table 字段排序
- function fieldFilter({ prop, order }) {
- table.order = order == 'ascending' ? 'asc' : 'desc';
- table.sort = prop;
- getData();
- }
- // 新建角色
- function addRow() {
- useModal(
- RoleEdit,
- { title: '新建角色', type: 'add' },
- {
- confirm: () => {
- getData();
- },
- },
- );
- }
- // 编辑角色
- function editRow(row) {
- useModal(
- RoleEdit,
- {
- title: '编辑角色',
- type: 'edit',
- id: row.id,
- },
- {
- confirm: () => {
- getData();
- },
- },
- );
- }
- // 删除api 单独批量可以直接调用
- async function deleteApi(id) {
- await admin.auth.role.delete(id);
- getData();
- }
- onMounted(() => {
- getData();
- });
- </script>
- <style lang="scss" scoped>
- .role-view {
- .el-header {
- height: auto;
- }
- .el-main {
- .sa-table-wrap {
- height: 100%;
- }
- }
- }
- </style>
|