bandhuBuy-admin/src/app/admin/views/auth/role/index.vue

<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>