功能变化: 授权页面

2023-02-06 22:21:55 +08:00
parent 4046bd0d0c
commit ef4660c1f1
8 changed files with 285 additions and 45 deletions
--- a/web/src/views/system/login/component/account.vue
+++ b/web/src/views/system/login/component/account.vue
@@ -116,7 +116,7 @@ export default defineComponent({
 		};
 		const loginClick = async () => {
 			loginApi.login({ ...state.ruleForm, password: Md5.hashStr(state.ruleForm.password) }).then((ret: any) => {
-				Session.set('token', ret.data.access);
+			  Session.set('token', ret.data.access);
 				Cookies.set('username', ret.data.name);
 				if (!themeConfig.value.isRequestRoutes) {
 					// 前端控制路由，2、请注意执行顺序
--- a/web/src/views/system/menu/index.vue
+++ b/web/src/views/system/menu/index.vue
@@ -64,12 +64,9 @@ import { RouteRecordRaw } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { useRoutesList } from '/@/stores/routesList';
-import AddMenu from '/@/views/system/menu/component/addMenu.vue';
-import EditMenu from '/@/views/system/menu/component/editMenu.vue';

 export default defineComponent({
 	name: 'systemMenu',
-	components: { AddMenu, EditMenu },
 	setup() {
 		const stores = useRoutesList();
 		const { routesList } = storeToRefs(stores);
--- a/web/src/views/system/role/curd.tsx
+++ b/web/src/views/system/role/curd.tsx
@@ -82,8 +82,10 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
                            placement: "top",
                            content: "删除"
                        },
-                        click: () => {
+                        click: (context:any) => {
+                            const {row} = context
                        	rolePermission.value.drawer=true
+                            rolePermission.value.editedRoleInfo = row
                            rolePermission.value.initGet()
                        }
                    }
--- a/web/src/views/system/rolePermission/api.ts
+++ b/web/src/views/system/rolePermission/api.ts
@@ -6,7 +6,20 @@ import { request } from "/@/utils/service";
 */
 export function GetMenu(params:any) {
    return request({
-        url: '/api/system/role/role_get_menu/',
+        url: '/api/system/role_menu_button_permission/role_get_menu/',
+        method: 'get',
+        params:params
+    });
+}
+
+/**
+ * 获取菜单下的按钮
+ * @param params
+ * @constructor
+ */
+export function GetMenuButton(params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_menu_get_button/',
        method: 'get',
        params:params
    });
@@ -17,11 +30,11 @@ export function GetMenu(params:any) {
 * 根据角色获取数据权限范围
 * @constructor
 */
-export function GetDataScope () {
+export function GetDataScope (params:any={}) {
    return request({
-        url: '/api/system/role/data_scope/',
+        url: '/api/system/role_menu_button_permission/data_scope/',
        method: 'get',
-        params: {}
+        params: params
    })
 }

--- a/web/src/views/system/rolePermission/index.vue
+++ b/web/src/views/system/rolePermission/index.vue
@@ -7,9 +7,10 @@
      :before-close="handleClose"
  >
    <template #header>
-      <h4>
-        <el-tag>当前角色:超管</el-tag>
-      </h4>
+      <el-button-group>
+        <el-button size="mini" plain type="primary">当前角色:{{editedRoleInfo.name}}</el-button>
+        <el-button size="mini" type="primary" @click="onSaveAuth">保存授权</el-button>
+      </el-button-group>
    </template>
    <div style="padding: 1em">
    <el-row :gutter="10">
@@ -22,10 +23,8 @@
                   highlight-current
                   :expand-on-click-node="false"
                   :check-on-click-node="true"
-                   :lazy="true"
-                   :load="loadMenuNone"
                   :props="defaultProps"
-                   @node-click="menuNodeClick"
+                   @current-change="menuNodeClick"
          />
        </el-card>
      </el-col>
@@ -34,7 +33,6 @@
          <template #header>
            <div class="card-header">
              <span>页面授权</span>
-              <el-button size="small" type="primary">保存授权</el-button>
            </div>
          </template>
          <div>
@@ -84,9 +82,8 @@
      <el-dialog v-model="dialogFormVisible" title="配置按钮权限">
        <el-form :model="buttonForm" :rules="buttonRules" label-width="120px">
          <el-form-item label="按钮">
-            <el-select v-model="buttonForm.name" placeholder="请选择按钮">
-              <el-option label="Zone No.1" value="shanghai" />
-              <el-option label="Zone No.2" value="beijing" />
+            <el-select v-model="buttonForm.name" placeholder="请选择按钮" @change="onChangeButton">
+              <el-option v-for="(item,index) in buttonOptions" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="权限范围">
@@ -111,9 +108,9 @@
        </el-form>
        <template #footer>
      <span class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="dialogFormVisible = false">
-          Confirm
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="onSaveButtonForm">
+          确定
        </el-button>
      </span>
        </template>
@@ -123,12 +120,16 @@
 </template>

 <script lang="ts" setup>
-import {ref, defineExpose,reactive} from 'vue'
+import {ref, defineExpose,reactive,toRefs} from 'vue'
 import {ElMessageBox} from 'element-plus'
 import * as api from './api'
 import type {  FormRules } from 'element-plus'
-import type Node from 'element-plus/es/components/tree/src/model/node'
+import XEUtils from 'xe-utils'
+//抽屉是否显示
 const drawer = ref(false)
+//当前编辑的角色信息
+const editedRoleInfo = ref({})
+
 //抽屉关闭确认
 const handleClose = (done: () => void) => {
  ElMessageBox.confirm('您确定要关闭?', {
@@ -154,40 +155,44 @@ const defaultProps = {
 interface Tree {
  name: string
  children?: Tree[],
-  isLeaf:boolean
+  id:number
 }
 let menuData= ref<Tree>()
 //获取菜单
 const getMenuData = () => {
  api.GetMenu({}).then((res:any)=>{
    const {data} = res
-    menuData.value = data
-  })
-}
-//懒加载菜单节点
-const loadMenuNone = (node: Node , resolve: (data: Tree[]) => void) => {
-  api.GetMenu({parent:node.id}).then((res:any)=>{
-    const {data} = res
-    resolve(data)
+    const list = XEUtils.toArrayTree(data,{parentKey:"parent",strict:true})
+    menuData.value = list
  })
 }
+
 let isCatalog = ref(true)
+let buttonOptions = ref<[]>()
+let checkedMenuId = ref()
+//菜单节点点击事件
 const menuNodeClick=(node:any)=>{
  isCatalog.value = node.is_catalog
+  if(!node.is_catalog){
+    buttonOptions.value = []
+    checkedMenuId.value = node.id
+    api.GetMenuButton({menu:node.id}).then((res:any)=>{
+      const {data} = res
+      buttonOptions.value = data
+    })
+  }
+
 }
+const menuTree = ref()
 /*****菜单的配置项***/
 /***按钮授权的弹窗****/
+//是否显示新增表单
 const dialogFormVisible = ref(false)
-const deptOptions = [{
-  name:"dvadmin"
-}]
+//自定义部门数据
+const deptOptions = ref()
+//选中的部门数据
 const deptCheckedKeys=[]
-const dataScopeOptions=ref<[]>()
-const getDataScope = ()=>{
-  api.GetDataScope().then((res:any)=>{
-    dataScopeOptions.value = res.data
-  })
-}
+

 //按钮表单
 const buttonForm = reactive({
@@ -208,9 +213,22 @@ const buttonRules = reactive<FormRules>({
 //新增按钮
 const createBtnPermission = ()=>{
  dialogFormVisible.value = true
-  getDataScope()
 }
-//按钮表格
+//权限范围数据
+const dataScopeOptions=ref<[]>()
+//按钮值变化事件
+const onChangeButton = (val:any)=>{
+  dataScopeOptions.value = []
+  //获取权限值范围
+  api.GetDataScope({menu_button:val}).then((res:any)=>{
+    dataScopeOptions.value = res.data
+  })
+}
+//保存按钮表单
+const onSaveButtonForm = ()=>{
+  console.log(editedRoleInfo)
+}
+//按钮表格数据
 const buttonPermissionData: any[] = [
  {
    name: "查询",
@@ -235,7 +253,21 @@ const crudPermissionData: any[] = [
  }
 ]

-defineExpose({drawer,initGet})
+/**
+ * 保存授权
+ */
+const onSaveAuth = ()=>{
+  //选中的菜单
+  const checkedList = menuTree.value.getCheckedKeys()
+  //半选中的菜单
+  const halfCheckedList = menuTree.value.getHalfCheckedKeys()
+  //合并的菜单数据
+  const menuIdList = [...checkedList,...halfCheckedList]
+  console.log(menuIdList)
+}
+
+
+defineExpose({drawer,editedRoleInfo,initGet})
 </script>

 <style scoped>