联调

src/views/Basic/Role/index.vue

@@ -30,7 +30,7 @@
               class="ml-10px"
               style="padding: 0px"
               text
-              @click="handleDelete(index)"
+              @click="handleDelete(item.id)"
             >
               删除
             </el-button>
@@ -39,21 +39,33 @@
         <Pagination
           v-model:limit="queryParams.pageSize"
           v-model:page="queryParams.pageNo"
+          layout="total, prev, pager, next"
+          small
           :total="total"
           @pagination="getList"
         />
       </div>
     </el-card>
     <el-card class="ml-20px" style="flex: 1" shadow="always" :body-style="{ padding: '10px' }">
-      <el-tabs v-model="roleOperateIndex" type="card">
+      <el-tabs v-if="list && list.length" v-model="roleOperateIndex" type="card">
         <el-tab-pane label="角色用户" :name="1">
-          <RoleEmployee />
+          <RoleEmployee v-if="roleOperateIndex == 1" :roleId="list[libraryIndex].id" />
         </el-tab-pane>
         <el-tab-pane label="菜单权限" :name="2">
-          <RoleAssignMenuForm ref="assignMenuFormRef" @success="getList" />
+          <RoleAssignMenuForm
+            v-if="roleOperateIndex == 2"
+            ref="assignMenuFormRef"
+            :roleId="list[libraryIndex].id"
+            @success="getList"
+          />
         </el-tab-pane>
         <el-tab-pane label="数据权限" :name="3">
-          <RoleDataPermissionForm ref="dataPermissionFormRef" @success="getList" />
+          <RoleDataPermissionForm
+            v-if="roleOperateIndex == 3"
+            ref="dataPermissionFormRef"
+            :roleId="list[libraryIndex].id"
+            @success="getList"
+          />
         </el-tab-pane>
       </el-tabs>
     </el-card>
@@ -66,6 +78,7 @@ import RoleForm from './RoleForm.vue'
 import RoleEmployee from './Comp/RoleEmployee.vue'
 import RoleAssignMenuForm from './RoleAssignMenuForm.vue'
 import RoleDataPermissionForm from './RoleDataPermissionForm.vue'
+import * as RoleApi from '@/api/system/role'
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -76,14 +89,14 @@ const list = ref([]) // 列表的数据
 const libraryIndex = ref(0)
 const queryParams = reactive({
   pageNo: 1,
-  pageSize: 10
+  pageSize: 20
 })
 
 /** 查询角色列表 */
 const getList = async () => {
-  // const data = await RoleApi.getRolePage(queryParams)
-  list.value = [{ id: 1, name: '管理员' }]
-  total.value = 0
+  const data = await RoleApi.getRolePage(queryParams)
+  list.value = data.list
+  total.value = data.total
 }
 
 /** 添加/修改操作 */
@@ -101,12 +114,10 @@ const assignMenuFormRef = ref()
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
-    console.log(id)
-
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    // await RoleApi.deleteRole(id)
+    await RoleApi.deleteRole(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
@@ -121,4 +132,8 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.actived {
+  background-color: var(--el-color-primary-light-9);
+}
+</style>