添加登录

src/views/system/role/index.vue

@@ -11,22 +11,21 @@
       </ElCol>
     </ElRow>
 
-    <ArtTable :data="roleList" index>
+    <ArtTable ref="tableRef" row-key="id" :loading="loading" :data="roleList" :currentPage="pagination.currentPage"
+      :pageSize="pagination.pageSize" :total="pagination.total" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange">
       <template #default>
-        <ElTableColumn label="角色名称" prop="roleName" />
-        <ElTableColumn label="角色编码" prop="roleCode" />
-        <ElTableColumn label="描述" prop="des" />
+        <ElTableColumn label="角色名称" prop="name" />
+        <ElTableColumn label="角色编码" prop="id" />
+        <ElTableColumn label="描述" prop="desc" />
         <ElTableColumn label="启用" prop="enable">
           <template #default="scope">
-            <ElTag :type="scope.row.enable ? 'primary' : 'info'">
-              {{ scope.row.enable ? '启用' : '禁用' }}
+            <ElTag :type="scope.row.status ? 'primary' : 'info'">
+              {{ scope.row.status ? '启用' : '禁用' }}
             </ElTag>
           </template>
         </ElTableColumn>
-        <ElTableColumn label="创建时间" prop="date">
-          <template #default="scope">
-            {{ formatDate(scope.row.date) }}
-          </template>
+        <ElTableColumn label="创建时间" prop="created_at">
         </ElTableColumn>
         <ElTableColumn fixed="right" label="操作" width="200px">
           <template #default="scope">
@@ -122,9 +121,10 @@
   import { ElMessage, ElMessageBox } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import { formatMenuTitle } from '@/router/utils/utils'
+  import { UserService } from '@/api/usersApi'
   // import { ButtonMoreItem } from '@/components/core/forms/ArtButtonMore.vue'
   import { Role, ROLE_LIST_DATA } from '@/mock/temp/formData'
-
+  const loading = ref(false)
   defineOptions({ name: 'Role' })
 
   const dialogVisible = ref(false)
@@ -133,7 +133,11 @@
   const treeRef = ref()
   const isExpandAll = ref(true)
   const isSelectAll = ref(false)
-
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+  })
   // 处理菜单数据，将 authList 转换为子节点
   const processedMenuList = computed(() => {
     const processNode = (node: any) => {
@@ -188,10 +192,39 @@
     getTableData()
   })
 
-  const getTableData = () => {
-    roleList.value = ROLE_LIST_DATA
-  }
+  // const getTableData = () => {
+  //   roleList.value = ROLE_LIST_DATA
+  // }
+  // 获取列表数据
+const getTableData = async () => {
+  loading.value = true
+  try {
+    const { currentPage, pageSize } = pagination
 
+    const { records, current, size, total } = await UserService.getRoleList({
+      current: currentPage,
+      size: pageSize
+    })
+    roleList.value = records.map((item: any, index: number) => ({
+      ...item
+    }))
+    Object.assign(pagination, { currentPage: current, pageSize: size, total })
+  } catch (error) {
+    console.error('获取用户列表失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+// 处理表格分页变化
+const handleSizeChange = (newPageSize: number) => {
+  pagination.pageSize = newPageSize
+  getTableData()
+}
+
+const handleCurrentChange = (newCurrentPage: number) => {
+  pagination.currentPage = newCurrentPage
+  getTableData()
+}
   const dialogType = ref('add')
 
   const showDialog = (type: string, row?: any) => {
@@ -213,16 +246,6 @@
     }
   }
 
-  // const buttonMoreClick = (item: ButtonMoreItem, row: any) => {
-  //   if (item.key === 'permission') {
-  //     showPermissionDialog()
-  //   } else if (item.key === 'edit') {
-  //     showDialog('edit', row)
-  //   } else if (item.key === 'delete') {
-  //     deleteRole()
-  //   }
-  // }
-
   const showPermissionDialog = () => {
     permissionDialog.value = true
   }