角色管理，增加数据权限设置，增加热更新配置，分布图空白页面

src/api/system/index.ts

@@ -42,6 +42,7 @@ export default {
     getList: (params: object) => get('/system/role/tree', params),
     getRole: (id: number) => get('/system/role/getInfoById', { id }),
     addRole: (data: object) => post('/system/role/add', data),
+    dataScope: (data: object) => post('/system/role/dataScope', data),
     deleteRole: (id: number) => del('/system/role/delInfoById', { id }),
     editRole: (data: object) => put('/system/role/edit', data),
     auth: {

src/theme/element.scss

@@ -185,6 +185,9 @@
 	overflow-y: auto;
 	overflow-x: hidden;
 }
+.custom-dialog .el-dialog__body {
+	max-height: none !important;
+}
 .el-dialog.is-fullscreen{
 	.el-dialog__body {
 		max-height: 100vh !important;

src/views/monitor/map.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="monitor">
+    分布图
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,130 @@
+<template>
+  <el-dialog custom-class="custom-dialog" title="分配数据权限" v-model="isShowDialog" width="500px">
+    <el-form ref="formRef" :model="ruleForm" label-width="90px">
+      <el-form-item label="角色名称" prop="name">
+        <el-input v-model="ruleForm.name" disabled placeholder="请输入账户名称" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="权限范围" prop="dataScope">
+        <el-select v-model="ruleForm.dataScope" placeholder="请选择" clearable class="w100">
+          <el-option label="全部数据权限" :value="1" />
+          <el-option label="自定数据权限" :value="2" />
+          <el-option label="本部门数据权限" :value="3" />
+          <el-option label="本部门及以下数据权限" :value="4" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="数据权限" prop="deptIds" v-if="ruleForm.dataScope===2">
+        <div class="tree">
+          <el-tree ref="treeRef" :data="deptData" show-checkbox default-expand-all node-key="deptId" highlight-current :props="defaultProps" check-on-click-node :expand-on-click-node="false" />
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="onCancel" size="default">取 消</el-button>
+        <el-button type="primary" @click="onSubmit" size="default">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, nextTick } from 'vue';
+import api from '/@/api/system';
+import { ElMessage } from 'element-plus';
+
+interface DialogRow {
+	id?: number;
+	name: string;
+	dataScope: 1 | 2 | 3 | 4; // 数据范围（1：全部数据权限 2：自定数据权限 3：本部门数据权限 4：本部门及以下数据权限）
+	deptIds: number[]; // 部门id
+}
+
+const baseForm: DialogRow = {
+	id: undefined,
+	name: '',
+	dataScope: 1,
+	deptIds: [],
+};
+
+export default defineComponent({
+	props: {
+		deptData: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	setup() {
+		const postList = ref([]);
+		const formRef = ref<HTMLElement | null>(null);
+		const defaultProps = {
+			children: 'children',
+			label: 'deptName',
+		};
+		const treeRef = ref();
+		const state = reactive({
+			isShowDialog: false,
+			ruleForm: {
+				...baseForm,
+			},
+		});
+		// 打开弹窗
+		const openDialog = async (row?: any) => {
+			resetForm();
+			const { id, name, dataScope, deptIds } = await api.role.getRole(row.id);
+			state.ruleForm = { id, name, dataScope, deptIds: deptIds || [] };
+			state.isShowDialog = true;
+			nextTick(() => {
+				if (deptIds && deptIds.length) {
+					treeRef.value.setCheckedKeys(deptIds);
+				}
+			});
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+			if (state.ruleForm.dataScope === 2) {
+				state.ruleForm.deptIds = treeRef.value.getCheckedKeys(true);
+			} else {
+				state.ruleForm.deptIds = [];
+			}
+
+			api.role.dataScope(state.ruleForm).then(() => {
+				ElMessage.success('设置数据权限成功');
+				closeDialog();
+			});
+		};
+		const resetForm = () => {
+			state.ruleForm = {
+				...baseForm,
+			};
+		};
+		return {
+			openDialog,
+			closeDialog,
+			defaultProps,
+			treeRef,
+			onCancel,
+			onSubmit,
+			postList,
+			formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.tree {
+	width: 100%;
+	max-height: 50vh;
+	overflow: auto;
+	padding-bottom: 5px;
+}
+</style>

src/views/system/role/index.vue

@@ -41,11 +41,12 @@
           </template>
         </el-table-column>
         <el-table-column prop="createdAt" label="创建时间" width="170" align="center"></el-table-column>
-        <el-table-column label="操作" width="160" align="center">
+        <el-table-column label="操作" width="220" align="center" fixed="right">
           <template #default="scope">
             <el-button size="small" type="text" @click="onOpenEditRole(scope.row)">修改</el-button>
             <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
             <el-button size="small" text type="success" @click="permission(scope.row)">角色权限</el-button>
+            <el-button size="small" text type="info" @click="dataPermission(scope.row)">数据权限</el-button>
             <!-- <el-dropdown size="small">
               <el-button type="text" size="small" style="margin-top:1px;margin-left:10px">更多
                 <el-icon>
@@ -66,6 +67,7 @@
     </el-card>
     <EditRole ref="editRoleRef" @getList="roleList" :list="tableData.data" />
     <permissionVue ref="permissionRef" />
+    <EditPer ref="dataPermissionRef" :dept-data="deptData" />
   </div>
 </template>
 
@@ -73,6 +75,7 @@
 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 EditPer from '/@/views/system/role/component/editPer.vue';
 import permissionVue from '/@/views/system/role/component/permission.vue';
 import api from '/@/api/system';
 // 定义接口来定义对象的类型
@@ -86,6 +89,7 @@ interface TableData {
 	createdAt: string;
 }
 interface TableDataState {
+	deptData: any[];
 	tableData: {
 		data: Array<TableData>;
 		// total: number;
@@ -99,13 +103,15 @@ interface TableDataState {
 
 export default defineComponent({
 	name: 'apiV1SystemRoleList',
-	components: { EditRole, permissionVue },
+	components: { EditRole, permissionVue, EditPer },
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
 		const addRoleRef = ref();
 		const editRoleRef = ref();
 		const permissionRef = ref();
+		const dataPermissionRef = ref();
 		const state = reactive<TableDataState>({
+			deptData: [],
 			tableData: {
 				data: [],
 				// total: 0,
@@ -119,6 +125,13 @@ export default defineComponent({
 		// 初始化表格数据
 		const initTableData = () => {
 			roleList();
+			api.dept
+				.getList({
+					status: 1,
+				})
+				.then((res: any) => {
+					state.deptData = res;
+				});
 		};
 		const roleList = () => {
 			api.role.getList(state.tableData.param).then((res: Array<TableData>) => {
@@ -157,6 +170,10 @@ export default defineComponent({
 				ElMessage.error('该角色禁止被授权');
 			}
 		};
+		// 设置数据权限
+		const dataPermission = async (row: any) => {
+			dataPermissionRef.value.openDialog(row);
+		};
 
 		// 页面加载时
 		onMounted(() => {
@@ -167,6 +184,8 @@ export default defineComponent({
 			addRoleRef,
 			editRoleRef,
 			permissionRef,
+			dataPermissionRef,
+			dataPermission,
 			permission,
 			onOpenAddRole,
 			onOpenEditRole,

src/views/system/user/index.vue

@@ -43,7 +43,7 @@
                   </el-icon>
                   重置
                 </el-button>
-                <el-button size="default" type="success" class="ml10" @click="onOpenAddUser"  v-auth="'add'">
+                <el-button size="default" type="success" class="ml10" @click="onOpenAddUser" v-auth="'add'">
                   <el-icon>
                     <ele-FolderAdd />
                   </el-icon>
@@ -74,13 +74,13 @@
               </template>
             </el-table-column>
             <el-table-column prop="createdAt" label="创建时间" width="180" align="center"></el-table-column>
-            <el-table-column label="操作" width="150" align="center" fixed="right">
+            <el-table-column label="操作" width="180" align="center" fixed="right">
               <template #default="scope">
                 <!-- <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auths="['edit','del']">修改</el-button>
                 <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auth-all="['edit','del']">修改</el-button> -->
                 <el-button size="small" text type="warning" @click="onOpenEditUser(scope.row)" v-auth="'edit'">修改</el-button>
                 <el-button size="small" text type="danger" @click="onRowDel(scope.row)" v-if="scope.row.id!==1" v-auth="'del'">删除</el-button>
-                <el-button size="small" text type="success" @click="handleResetPwd(scope.row)"  v-auth="'reset'">重置</el-button>
+                <el-button size="small" text type="success" @click="handleResetPwd(scope.row)" v-auth="'reset'">重置</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -89,6 +89,7 @@
       </el-col>
     </el-row>
     <EditUser ref="editUserRef" :dept-data="deptData" :post-data="postData" :role-data="roleData" @getUserList="userList" />
+    <EditPer ref="editPerRef" @getUserList="userList" />
   </div>
 </template>
 

vite.config.ts

@@ -25,6 +25,7 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 			host: '0.0.0.0',
 			port: env.VITE_PORT as unknown as number,
 			open: env.VITE_OPEN,
+			hmr: true,
 			proxy: {
 				'/gitee': {
 					target: 'https://gitee.com',