index.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <template>
  2. <el-container class="role-view panel-block">
  3. <el-header class="sa-header">
  4. <div class="sa-title sa-flex sa-row-between">
  5. <div class="label sa-flex">角色列表</div>
  6. <div>
  7. <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
  8. <el-button icon="Plus" type="primary" @click="addRow">新建角色</el-button>
  9. </div>
  10. </div>
  11. </el-header>
  12. <el-main class="sa-p-0">
  13. <div class="sa-table-wrap panel-block panel-block--bottom" v-loading="loading">
  14. <el-table
  15. height="100%"
  16. class="sa-table"
  17. :data="table.data"
  18. @sort-change="fieldFilter"
  19. row-key="id"
  20. stripe
  21. >
  22. <template #empty>
  23. <sa-empty />
  24. </template>
  25. <el-table-column prop="id" label="ID" min-width="100" sortable="custom">
  26. </el-table-column>
  27. <el-table-column prop="name" label="角色名称" min-width="200" sortable="custom">
  28. <template #default="scope">
  29. <span class="sa-table-line-1">{{ scope.row.name || '-' }}</span>
  30. </template>
  31. </el-table-column>
  32. <el-table-column fixed="right" label="操作" min-width="120">
  33. <template #default="scope">
  34. <template v-if="scope.row.id != 1">
  35. <el-button link type="primary" @click="editRow(scope.row)">编辑</el-button>
  36. <el-popconfirm
  37. width="fit-content"
  38. confirm-button-text="确认"
  39. cancel-button-text="取消"
  40. title="确认删除这条记录?"
  41. @confirm="deleteApi(scope.row.id)"
  42. >
  43. <template #reference>
  44. <el-button link type="danger">删除</el-button>
  45. </template>
  46. </el-popconfirm>
  47. </template>
  48. </template>
  49. </el-table-column>
  50. </el-table>
  51. </div>
  52. </el-main>
  53. <sa-view-bar>
  54. <template #right>
  55. <sa-pagination :pageData="pageData" @updateFn="getData" />
  56. </template>
  57. </sa-view-bar>
  58. </el-container>
  59. </template>
  60. <script setup>
  61. import { onMounted, reactive, ref } from 'vue';
  62. import admin from '@/app/admin/api';
  63. import { useModal, usePagination } from '@/sheep/hooks';
  64. import RoleEdit from './edit.vue';
  65. const { pageData } = usePagination();
  66. // 列表
  67. const table = reactive({
  68. data: [],
  69. order: '',
  70. sort: '',
  71. });
  72. const loading = ref(true);
  73. // 获取数据
  74. async function getData(page, searchParams = {}) {
  75. if (page) pageData.page = page;
  76. loading.value = true;
  77. try {
  78. const { code, data } = await admin.auth.role.roleList({
  79. page: 0,
  80. size: pageData.size,
  81. ...searchParams,
  82. });
  83. if (code == 200) {
  84. table.data = data.list;
  85. pageData.page = data.pageNum;
  86. pageData.size = data.pageSize;
  87. pageData.total = data.total;
  88. }
  89. } catch (error) {
  90. console.error('获取数据失败:', error);
  91. } finally {
  92. loading.value = false;
  93. }
  94. }
  95. // table 字段排序
  96. function fieldFilter({ prop, order }) {
  97. table.order = order == 'ascending' ? 'asc' : 'desc';
  98. table.sort = prop;
  99. getData();
  100. }
  101. // 新建角色
  102. function addRow() {
  103. useModal(
  104. RoleEdit,
  105. { title: '新建角色', type: 'add' },
  106. {
  107. confirm: () => {
  108. getData();
  109. },
  110. },
  111. );
  112. }
  113. // 编辑角色
  114. function editRow(row) {
  115. useModal(
  116. RoleEdit,
  117. {
  118. title: '编辑角色',
  119. type: 'edit',
  120. id: row.id,
  121. },
  122. {
  123. confirm: () => {
  124. getData();
  125. },
  126. },
  127. );
  128. }
  129. // 删除api 单独批量可以直接调用
  130. async function deleteApi(id) {
  131. await admin.auth.role.delete(id);
  132. getData();
  133. }
  134. onMounted(() => {
  135. getData();
  136. });
  137. </script>
  138. <style lang="scss" scoped>
  139. .role-view {
  140. .el-header {
  141. height: auto;
  142. }
  143. .el-main {
  144. .sa-table-wrap {
  145. height: 100%;
  146. }
  147. }
  148. }
  149. </style>