重构组合式api

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

@@ -0,0 +1,273 @@
+<template>
+	<div class="system-edit-role-container">
+		<el-dialog :title="(formData.id === 0 ? '添加' : '修改') + '角色'" v-model="isShowDialog" width="769px">
+			<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="角色名称" prop="name">
+							<el-input v-model="formData.name" placeholder="请输入角色名称" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="排序">
+							<el-input-number v-model="formData.listOrder" :min="0" controls-position="right" placeholder="请输入排序" class="w100" />
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+						<el-form-item label="角色状态">
+							<el-switch
+								v-model="formData.status"
+								:active-value="1"
+								:inactive-value="0"
+								inline-prompt
+								active-text="启"
+								inactive-text="禁"
+							></el-switch>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="角色描述">
+							<el-input v-model="formData.remark" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+						<el-form-item label="菜单权限">
+							<el-row :gutter="35">
+								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+									<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
+									<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
+									<el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
+								</el-col>
+								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+									<el-tree
+										:data="menuData"
+										ref="menuRef"
+										:props="menuProps"
+										:default-checked-keys="formData.menuIds"
+										node-key="id"
+										show-checkbox
+										class="menu-data-tree tree-border"
+										:check-strictly="!menuCheckStrictly"
+									/>
+								</el-col>
+							</el-row>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{ formData.id === 0 ? '新 增' : '修 改' }}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, getCurrentInstance, unref } from 'vue';
+import { addRole, editRole, getRole, getRoleParams } from '/@/api/system/role';
+import { ElMessage } from 'element-plus';
+import { refreshBackEndControlRoutes } from '/@/router/backEnd';
+
+// 定义接口来定义对象的类型
+interface MenuDataTree {
+	id: number;
+	pid: number;
+	title: string;
+	children?: MenuDataTree[];
+}
+interface DialogRow {
+	id: number;
+	name: string;
+	status: number;
+	listOrder: number;
+	remark: string;
+	menuIds: Array<number>;
+}
+interface RoleState {
+	loading: boolean;
+	isShowDialog: boolean;
+	formData: DialogRow;
+	menuData: Array<MenuDataTree>;
+	menuExpand: boolean;
+	menuNodeAll: boolean;
+	menuCheckStrictly: boolean;
+	menuProps: {
+		children: string;
+		label: string;
+	};
+	rules: object;
+}
+
+export default defineComponent({
+	name: 'systemEditRole',
+	setup(props, { emit }) {
+		const { proxy } = getCurrentInstance() as any;
+		const formRef = ref<HTMLElement | null>(null);
+		const menuRef = ref();
+		const state = reactive<RoleState>({
+			loading: false,
+			isShowDialog: false,
+			formData: {
+				id: 0,
+				name: '',
+				status: 1,
+				listOrder: 0,
+				remark: '',
+				menuIds: [],
+			},
+			// 表单校验
+			rules: {
+				name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+			},
+			menuData: [],
+			menuExpand: false,
+			menuNodeAll: false,
+			menuCheckStrictly: false,
+			menuProps: {
+				children: 'children',
+				label: 'title',
+			},
+		});
+		// 打开弹窗
+		const openDialog = (row?: DialogRow) => {
+			resetForm();
+			getMenuData();
+			if (row) {
+				getRole(row.id).then((res: any) => {
+					if (res.data.role) {
+						state.formData = res.data.role;
+						state.formData.menuIds = res.data.menuIds ?? [];
+					}
+				});
+			}
+			state.isShowDialog = true;
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+			const formWrap = unref(formRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					state.loading = true;
+					state.formData.menuIds = getMenuAllCheckedKeys();
+					if (state.formData.id === 0) {
+						//添加
+						addRole(state.formData)
+							.then(() => {
+								ElMessage.success('角色添加成功');
+								closeDialog(); // 关闭弹窗
+								resetMenuSession();
+								emit('getRoleList');
+							})
+							.finally(() => {
+								state.loading = false;
+							});
+					} else {
+						//修改
+						editRole(state.formData)
+							.then(() => {
+								ElMessage.success('角色修改成功');
+								closeDialog(); // 关闭弹窗
+								resetMenuSession();
+								emit('getRoleList');
+							})
+							.finally(() => {
+								state.loading = false;
+							});
+					}
+				}
+			});
+		};
+		// 获取菜单结构数据
+		const getMenuData = () => {
+			getRoleParams().then((res: any) => {
+				state.menuData = proxy.handleTree(res.data.menu, 'id', 'pid');
+			});
+		};
+		const resetForm = () => {
+			state.menuCheckStrictly = false;
+			state.menuExpand = false;
+			state.menuNodeAll = false;
+			state.formData = {
+				id: 0,
+				name: '',
+				status: 1,
+				listOrder: 0,
+				remark: '',
+				menuIds: [],
+			};
+		};
+		/** 树权限（展开/折叠）*/
+		const handleCheckedTreeExpand = (value: any) => {
+			let treeList = state.menuData;
+			for (let i = 0; i < treeList.length; i++) {
+				menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
+			}
+		};
+
+		/** 树权限（全选/全不选） */
+		const handleCheckedTreeNodeAll = (value: any) => {
+			menuRef.value.setCheckedNodes(value ? state.menuData : []);
+		};
+
+		/** 树权限（父子联动） */
+		const handleCheckedTreeConnect = (value: any) => {
+			state.menuCheckStrictly = value ? true : false;
+		};
+
+		/** 所有菜单节点数据 */
+		function getMenuAllCheckedKeys() {
+			// 目前被选中的菜单节点
+			let checkedKeys = menuRef.value.getCheckedKeys();
+			// 半选中的菜单节点
+			let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
+			checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+			return checkedKeys;
+		}
+
+		// 重置菜单session
+		const resetMenuSession = () => {
+			refreshBackEndControlRoutes();
+		};
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+			menuRef,
+			formRef,
+			handleCheckedTreeExpand,
+			handleCheckedTreeNodeAll,
+			handleCheckedTreeConnect,
+			resetMenuSession,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.tree-border {
+	margin-top: 5px;
+	border: 1px solid #e5e6e7 !important;
+	border-radius: 4px;
+}
+.system-edit-role-container {
+	.menu-data-tree {
+		border: var(--el-input-border, var(--el-border-base));
+		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+		padding: 5px;
+	}
+}
+</style>

src/views/system/role/index.vue

@@ -2,31 +2,31 @@
 	<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-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-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="default" type="primary" class="ml10" @click="roleList">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
-              <el-icon>
-                <ele-FolderAdd />
-              </el-icon>
-              新增角色
-            </el-button>
-          </el-form-item>
-        </el-form>
+				<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-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-select>
+					</el-form-item>
+					<el-form-item>
+						<el-button size="default" type="primary" class="ml10" @click="roleList">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+						<el-button size="default" type="success" class="ml10" @click="onOpenAddRole">
+							<el-icon>
+								<ele-FolderAdd />
+							</el-icon>
+							新增角色
+						</el-button>
+					</el-form-item>
+				</el-form>
 			</div>
 			<el-table :data="tableData.data" style="width: 100%">
 				<el-table-column type="index" label="序号" width="60" />
@@ -34,45 +34,49 @@
 				<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="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 prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
 				<el-table-column label="操作" width="220">
 					<template #default="scope">
-						<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)"><el-icon><ele-EditPen /></el-icon>修改</el-button>
-						<el-button size="small" text type="primary" @click="onRowDel(scope.row)"><el-icon><ele-DeleteFilled /></el-icon>删除</el-button>
+						<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)"
+							><el-icon><ele-EditPen /></el-icon>修改</el-button
+						>
+						<el-button size="small" text type="primary" @click="onRowDel(scope.row)"
+							><el-icon><ele-DeleteFilled /></el-icon>删除</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"
-      />
+			<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"/>
+		<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: {
@@ -80,8 +84,8 @@ interface TableDataState {
 		total: number;
 		loading: boolean;
 		param: {
-      roleName:string;
-      roleStatus:string;
+			roleName: string;
+			roleStatus: string;
 			pageNum: number;
 			pageSize: number;
 		};
@@ -90,20 +94,20 @@ 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 dataScopeRef =ref();
+		const dataScopeRef = ref();
 		const state = reactive<TableDataState>({
 			tableData: {
 				data: [],
 				total: 0,
 				loading: false,
 				param: {
-          roleName:'',
-          roleStatus:'',
+					roleName: '',
+					roleStatus: '',
 					pageNum: 1,
 					pageSize: 10,
 				},
@@ -111,30 +115,30 @@ export default defineComponent({
 		});
 		// 初始化表格数据
 		const initTableData = () => {
-			roleList()
+			roleList();
+		};
+		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 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) => {
@@ -149,11 +153,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(() => {});
 		};
@@ -172,13 +176,13 @@ export default defineComponent({
 		return {
 			addRoleRef,
 			editRoleRef,
-      dataScopeRef,
+			dataScopeRef,
 			onOpenAddRole,
 			onOpenEditRole,
 			onRowDel,
 			onHandleSizeChange,
 			onHandleCurrentChange,
-      roleList,
+			roleList,
 			...toRefs(state),
 		};
 	},