对接角色列表接口，及新增角色弹窗报错问题

src/api/system/role/index.ts

@@ -1,12 +1,10 @@
-import request from '/@/utils/request';
+import request, { get } from '/@/utils/request';
+
+
+
+
+export const getRoleList = (params: object) => get('/system/role/tree', params)
 
-export function getRoleList(query:Object) {
-    return request({
-        url: '/system/role/list',
-        method: 'get',
-        params:query
-    })
-}
 
 export function getRoleParams() {
     return request({
@@ -15,36 +13,36 @@ export function getRoleParams() {
     })
 }
 
-export function addRole(data:object) {
+export function addRole(data: object) {
     return request({
         url: '/system/role/add',
         method: 'post',
-        data:data
+        data: data
     })
 }
 
-export function getRole(id:number) {
+export function getRole(id: number) {
     return request({
         url: '/system/role/get',
         method: 'get',
-        params:{id}
+        params: { id }
     })
 }
 
 
-export function editRole(data:object) {
+export function editRole(data: object) {
     return request({
         url: '/system/role/edit',
         method: 'put',
-        data:data
+        data: data
     })
 }
 
 
-export function deleteRole(id:number) {
+export function deleteRole(id: number) {
     return request({
         url: '/system/role/delete',
         method: 'delete',
-        data:{ids:[id]}
+        data: { ids: [id] }
     })
 }

src/utils/request.ts

@@ -61,7 +61,7 @@ service.interceptors.response.use(
 // 导出 axios 实例
 export default service;
 
-export function get(url: string, params?: any) {
+export function get(url: string, params?: any): any {
 	return service({
 		url,
 		method: "get",
@@ -69,21 +69,21 @@ export function get(url: string, params?: any) {
 	})
 }
 
-export function post(url: string, data?: any) {
+export function post(url: string, data?: any): any {
 	return service({
 		url,
 		method: "post",
 		data
 	})
 }
-export function put(url: string, data?: any) {
+export function put(url: string, data?: any): any {
 	return service({
 		url,
 		method: "put",
 		data
 	})
 }
-export function del(url: string, data?: any) {
+export function del(url: string, data?: any): any{
 	return service({
 		url,
 		method: "delete",

src/views/system/role/component/editRole.vue

@@ -58,7 +58,8 @@
 
 <script lang="ts">
 import { reactive, toRefs, defineComponent,ref,getCurrentInstance,unref } from 'vue';
-import {addRole, editRole, getRole, getRoleParams} from "/@/api/system/role";
+import {addRole, editRole, getRole} from "/@/api/system/role";
+import {  getMenuList } from '/@/api/system/menu';
 import {ElMessage} from "element-plus";
 import {getBackEndControlRoutes} from "/@/router/backEnd";
 
@@ -181,8 +182,8 @@ export default defineComponent({
 		};
 		// 获取菜单结构数据
 		const getMenuData = () => {
-      getRoleParams().then((res:any)=>{
-        state.menuData = proxy.handleTree(res.data.menu, "id","pid");
+      getMenuList({status: -1}).then((res:any)=>{
+        state.menuData = res
       })
 		};
     const resetForm = ()=>{

src/views/system/role/index.vue

@@ -1,15 +1,15 @@
 <template>
-	<div class="system-role-container">
-		<el-card shadow="hover">
-			<div class="system-user-search mb15">
+  <div class="system-role-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
         <el-form :inline="true">
           <el-form-item label="角色名称">
-            <el-input size="default" v-model="tableData.param.roleName" placeholder="请输入角色名称" class="w-50 m-2" clearable/>
+            <el-input size="default" v-model="tableData.param.roleName" placeholder="请输入角色名称" class="w-50 m-2" clearable />
           </el-form-item>
           <el-form-item label="状态">
             <el-select size="default" placeholder="请选择状态" class="w-50 m-2" v-model="tableData.param.roleStatus" clearable>
-              <el-option label="启用"  value="1" />
-              <el-option label="禁用"  value="0" />
+              <el-option label="启用" value="1" />
+              <el-option label="禁用" value="0" />
             </el-select>
           </el-form-item>
           <el-form-item>
@@ -27,61 +27,55 @@
             </el-button>
           </el-form-item>
         </el-form>
-			</div>
-			<el-table :data="tableData.data" style="width: 100%">
-				<el-table-column type="index" label="序号" width="60" />
-				<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="listOrder" label="排序" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="status" label="角色状态" show-overflow-tooltip>
-					<template #default="scope">
-						<el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
-						<el-tag type="info" v-else>禁用</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="remark" label="角色描述" show-overflow-tooltip></el-table-column>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%">
+        <el-table-column type="index" label="序号" width="60" />
+        <el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="listOrder" label="排序" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
+          <template #default="scope">
+            <el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
+            <el-tag type="info" v-else>禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" label="角色描述" show-overflow-tooltip></el-table-column>
         <el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
-				<el-table-column label="操作" width="100">
-					<template #default="scope">
-						<el-button size="small" type="text" @click="onOpenEditRole(scope.row)">修改</el-button>
-						<el-button size="small" type="text" @click="onRowDel(scope.row)">删除</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-      <pagination
-          v-show="tableData.total>0"
-          :total="tableData.total"
-          v-model:page="tableData.param.pageNum"
-          v-model:limit="tableData.param.pageSize"
-          @pagination="roleList"
-      />
-		</el-card>
-		<EditRole ref="editRoleRef" @getRoleList="roleList"/>
-	</div>
+        <el-table-column label="操作" width="100">
+          <template #default="scope">
+            <el-button size="small" type="text" @click="onOpenEditRole(scope.row)">修改</el-button>
+            <el-button size="small" type="text" @click="onRowDel(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="roleList" /> -->
+    </el-card>
+    <EditRole ref="editRoleRef" @getRoleList="roleList" />
+  </div>
 </template>
 
 <script lang="ts">
-import {toRefs, reactive, onMounted, ref, defineComponent, toRaw,getCurrentInstance} from 'vue';
+import { toRefs, reactive, onMounted, ref, defineComponent, toRaw, getCurrentInstance } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import EditRole from '/@/views/system/role/component/editRole.vue';
-import {deleteRole, getRoleList} from "/@/api/system/role";
+import { deleteRole, getRoleList } from '/@/api/system/role';
 // 定义接口来定义对象的类型
 interface TableData {
-  id:number;
+	id: number;
 	status: number;
 	listOrder: number;
 	name: string;
-  remark: string;
-  dataScope:number;
-  createdAt: string;
+	remark: string;
+	dataScope: number;
+	createdAt: string;
 }
 interface TableDataState {
 	tableData: {
 		data: Array<TableData>;
-		total: number;
+		// total: number;
 		loading: boolean;
 		param: {
-      roleName:string;
-      roleStatus:string;
+			roleName: string;
+			roleStatus: string;
 			pageNum: number;
 			pageSize: number;
 		};
@@ -90,19 +84,19 @@ interface TableDataState {
 
 export default defineComponent({
 	name: 'apiV1SystemRoleList',
-	components: {EditRole},
+	components: { EditRole },
 	setup() {
-    const {proxy} = getCurrentInstance() as any;
+		const { proxy } = getCurrentInstance() as any;
 		const addRoleRef = ref();
 		const editRoleRef = ref();
 		const state = reactive<TableDataState>({
 			tableData: {
 				data: [],
-				total: 0,
+				// total: 0,
 				loading: false,
 				param: {
-          roleName:'',
-          roleStatus:'',
+					roleName: '',
+					roleStatus: '',
 					pageNum: 1,
 					pageSize: 10,
 				},
@@ -110,30 +104,30 @@ export default defineComponent({
 		});
 		// 初始化表格数据
 		const initTableData = () => {
-			roleList()
+			roleList();
+		};
+		const roleList = () => {
+			const data: Array<TableData> = [];
+			getRoleList(state.tableData.param).then((res: TableData[]) => {
+				const list = res || [];
+				list.map((item: TableData) => {
+					data.push({
+						id: item.id,
+						status: item.status,
+						listOrder: item.listOrder,
+						name: item.name,
+						remark: item.remark,
+						dataScope: item.dataScope,
+						createdAt: item.createdAt,
+					});
+				});
+				state.tableData.data = data;
+				// state.tableData.total = res.data.total;
+			});
 		};
-    const roleList = ()=>{
-      const data: Array<TableData> = [];
-      getRoleList(state.tableData.param).then(res=>{
-        const list = res.data.list??[]
-        list.map((item:TableData)=>{
-          data.push({
-            id:item.id,
-            status: item.status,
-            listOrder: item.listOrder,
-            name: item.name,
-            remark: item.remark,
-            dataScope:item.dataScope,
-            createdAt: item.createdAt,
-          });
-        })
-        state.tableData.data = data;
-        state.tableData.total = res.data.total;
-      })
-    };
 		// 打开新增角色弹窗
 		const onOpenAddRole = () => {
-      editRoleRef.value.openDialog();
+			editRoleRef.value.openDialog();
 		};
 		// 打开修改角色弹窗
 		const onOpenEditRole = (row: Object) => {
@@ -147,11 +141,11 @@ export default defineComponent({
 				type: 'warning',
 			})
 				.then(() => {
-          deleteRole(row.id).then(()=>{
-            ElMessage.success('删除成功');
-            proxy.$refs['editRoleRef'].resetMenuSession();
-            roleList();
-          })
+					deleteRole(row.id).then(() => {
+						ElMessage.success('删除成功');
+						proxy.$refs['editRoleRef'].resetMenuSession();
+						roleList();
+					});
 				})
 				.catch(() => {});
 		};
@@ -175,7 +169,7 @@ export default defineComponent({
 			onRowDel,
 			onHandleSizeChange,
 			onHandleCurrentChange,
-      roleList,
+			roleList,
 			...toRefs(state),
 		};
 	},