完善权限步骤的不同树选择，记录选择，上一步下一步回显，数据组合等

src/api/system/index.ts

@@ -45,7 +45,7 @@ export default {
     deleteRole: (id: number) => del('/system/role/delInfoById', { id }),
     editRole: (data: object) => put('/system/role/edit', data),
     auth: {
-      getList: (itemsType: 'menu' | 'button' | 'column' | 'api' | string, menuIds?: number[] | string) => get('/system/authorize/query', { itemsType, menuIds }),
+      getList: (itemsType: 'menu' | 'button' | 'column' | 'api' | string, menuIds?: number[]) => get('/system/authorize/query', { itemsType, menuIds }),
     }
   },
   org: {

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

@@ -16,9 +16,9 @@
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <el-button :disabled="step <= 0" @click="step--">上一步</el-button>
+      <el-button :disabled="step <= 0" @click="prev">上一步</el-button>
       <el-button :disabled="step >= 3" @click="next">下一步</el-button>
-      <el-button type="primary" :loading="btnLoading" :disabled="step < 3">确定</el-button>
+      <el-button type="primary" :loading="btnLoading" :disabled="step < 3" @click="submit">确定</el-button>
       <el-button @click="cancel">取消</el-button>
     </div>
     <el-steps :active="step" simple>
@@ -28,7 +28,7 @@
       <el-step title="接口权限" />
     </el-steps>
     <div class="scroll-part mt-3">
-      <el-tree ref="treeRef" :data="menuData" show-checkbox default-expand-all node-key="id" highlight-current :props="defaultProps" check-on-click-node :expand-on-click-node="false" />
+      <el-tree ref="treeRef" :data="treeData" show-checkbox default-expand-all node-key="id" highlight-current :props="defaultProps" check-on-click-node :expand-on-click-node="false" @check-change="checkChange" />
     </div>
   </el-dialog>
 </template>
@@ -41,10 +41,20 @@ const btnLoading = ref(false);
 const step = ref(0);
 const treeRef = ref();
 const title = ref('角色权限设置');
+const roleId = ref(0);
+const treeData = ref([]);
 const menuData = ref([]);
+const buttonData = ref([]);
+const listData = ref([]);
+const apiData = ref([]);
 const menuIds = ref([]);
+const buttonIds = ref([]);
+const columnIds = ref([]);
+const apiIds = ref([]);
 
 const typeList = ['menu', 'button', 'column', 'api'];
+const idsList = [menuIds, buttonIds, columnIds, apiIds];
+const treeDataList = [menuData, buttonData, listData, apiData];
 const defaultProps = {
 	children: 'children',
 	label: 'name',
@@ -52,25 +62,54 @@ const defaultProps = {
 
 const openDialog = async (row: any) => {
 	title.value = '角色权限设置 - ' + row.name;
+	roleId.value = row.id;
 	isShowDialog.value = true;
 	let res = await api.role.auth.getList(typeList[step.value]);
-	console.log(res);
+	// console.log(res);
+	treeData.value = res;
 	menuData.value = res;
 };
 const cancel = () => {
 	isShowDialog.value = false;
 };
+
+const prev = async () => {
+	const currentStep = step.value;
+	const prevStep = step.value - 1;
+	// 获取选中id
+	const val = treeRef.value.getCheckedKeys(currentStep === 0 ? false : true);
+	idsList[currentStep].value = val;
+	treeData.value = treeDataList[prevStep].value;
+	treeRef.value.setCheckedKeys(idsList[prevStep].value);
+	step.value = prevStep;
+};
+
 const next = async () => {
-	if (step.value === 0) {
-		const val = treeRef.value.getCheckedKeys(true);
-		console.log(val);
-		menuIds.value = val;
-		let res = await api.role.auth.getList(typeList[step.value + 1], JSON.stringify(val ));
-		console.log(res);
-	}
+	const nextStep = step.value + 1;
+	let res = await api.role.auth.getList(typeList[nextStep], menuIds.value);
+	// console.log(res);
+	treeData.value = res;
+	treeDataList[nextStep].value = res;
+	treeRef.value.setCheckedKeys(idsList[nextStep].value);
+
+	step.value = nextStep;
+};
+
+const checkChange = () => {
+	idsList[step.value].value = treeRef.value.getCheckedKeys(step.value === 0 ? false : true);
+};
+const submit = async () => {
+	const data = {
+		menuIds: menuIds.value,
+		buttonIds: buttonIds.value,
+		columnIds: columnIds.value,
+		apiIds: apiIds.value,
+		roleId: roleId.value,
+	};
+	console.log(data);
 };
 
-openDialog({ name: '超级管理员' });
+openDialog({ name: '超级管理员', id: 3 });
 
 defineExpose({ openDialog });
 </script>