功能变化: 授权页面

2023-02-07 20:58:15 +08:00
parent b65cc96df4
commit 1812619e6c
5 changed files with 231 additions and 181 deletions
--- a/backend/dvadmin/system/models.py
+++ b/backend/dvadmin/system/models.py
@@ -228,7 +228,7 @@ class RoleMenuButtonPermission(CoreModel):
    )
    data_range = models.IntegerField(default=0, choices=DATASCOPE_CHOICES, verbose_name="数据权限范围",
                                     help_text="数据权限范围")
-    dept = models.ManyToManyField(to="Dept", verbose_name="数据权限-关联部门", db_constraint=False,
+    dept = models.ManyToManyField(to="Dept",blank=True,null=True,verbose_name="数据权限-关联部门", db_constraint=False,
                                  help_text="数据权限-关联部门")
    class Meta:
        db_table = table_prefix + "role_menu_button_permission"
--- a/backend/dvadmin/system/views/role_menu_button_permission.py
+++ b/backend/dvadmin/system/views/role_menu_button_permission.py
@@ -181,3 +181,19 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
                    return DetailResponse(data=data)
        return ErrorResponse(msg="参数错误")

+    @action(methods=['get'],detail=False)
+    def menu_to_button(self,request):
+        params = request.query_params
+        if params:
+            menu_id = params.get('menu',None)
+            if menu_id is None:
+                return ErrorResponse(msg="未获取到参数")
+            role_id = params.get('role', None)
+            if role_id is None:
+                return ErrorResponse(msg="未获取到参数")
+            queryset = RoleMenuButtonPermission.objects.filter(role=role_id,menu=menu_id).values(
+                'data_range',
+                'menu_button'
+            )
+            return DetailResponse(data=queryset)
+        return ErrorResponse(msg="未获取到参数")
--- a/web/src/views/system/role/curd.tsx
+++ b/web/src/views/system/role/curd.tsx
@@ -1,70 +1,27 @@
 import {CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose} from '@fast-crud/fast-crud';
 import _ from 'lodash-es';
+import * as api from "./api";
 interface CreateCrudOptionsTypes {
    crudOptions: CrudOptions;
 }

 //此处为crudOptions配置
 export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExpose: CrudExpose,rolePermission:any}): CreateCrudOptionsTypes {
-    //本地模拟后台crud接口方法 ----开始
-    const records = [
-        {
-            id: 1,
-            modifier_name: '超级管理员',
-            creator_name: '超级管理员',
-            create_datetime: '2022-04-08 11:02:22',
-            update_datetime: '2022-05-31 02:09:00',
-            description: null,
-            modifier: '1',
-            dept_belong_id: '1',
-            name: '管理员',
-            key: 'admin',
-            sort: 1,
-            status: true,
-            admin: true,
-            data_range: 3,
-            remark: null,
-            creator: 1,
-            dept: [],
-            menu: [1, 2, 10, 20, 7, 8, 11, 16, 17, 5, 13, 15, 4, 18, 19, 3, 9],
-            permission: [
-                53, 4, 8, 13, 18, 32, 37, 42, 45, 49, 55, 2, 6, 11, 16, 21, 26, 30, 35, 40, 52, 1, 7, 12, 17, 22, 27, 31, 36, 41, 46, 50, 54, 3, 9, 14, 19,
-                23, 25, 33, 38, 43, 47, 48, 5, 10, 15, 20, 24, 28, 34, 39, 44, 51, 29,
-            ],
-        },
-    ];
+
    const pageRequest = async (query: any) => {
-        return {
-            records,
-            currentPage: 1,
-            pageSize: 20,
-            total: records.length,
+        return await api.GetList(query);
    };
+    const editRequest = async ({ form, row }: EditReq) => {
+        form.id = row.id;
+        return await api.UpdateObj(form);
    };
-    const editRequest = async (req: EditReq) => {
-        const target = _.find(records, (item) => {
-            return req.row.id === item.id;
-        });
-        _.merge(target, req.form);
-        return target;
+    const delRequest = async ({ row }: DelReq) => {
+        return await api.DelObj(row.id);
    };
-    const delRequest = async (req: DelReq) => {
-        _.remove(records, (item) => {
-            return item.id === req.row.id;
-        });
+    const addRequest = async ({ form }: AddReq) => {
+        return await api.AddObj(form);
    };

-    const addRequest = async (req: AddReq) => {
-        const maxRecord = _.maxBy(records, (item) => {
-            return item.id;
-        });
-        req.form.id = (maxRecord?.id || 0) + 1;
-        records.push(req.form);
-        return req.form;
-    };
-    //本地模拟后台crud接口方法 ----结束
-
-
    return {
        crudOptions: {
            request: {
--- a/web/src/views/system/rolePermission/api.ts
+++ b/web/src/views/system/rolePermission/api.ts
@@ -49,3 +49,28 @@ export function GetDataScopeDept () {
        params: {}
    })
 }
+
+/***
+ * 新增权限
+ * @param data
+ * @constructor
+ */
+export function CreateObj(data:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/',
+        method: 'post',
+        data:data
+    });
+}
+
+/***
+ * 根据菜单获取菜单下按钮
+ * @param params
+ */
+export function getObj(params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/menu_to_button/',
+        method: 'get',
+        params:params
+    });
+}
--- a/web/src/views/system/rolePermission/index.vue
+++ b/web/src/views/system/rolePermission/index.vue
@@ -24,12 +24,12 @@
                     :expand-on-click-node="false"
                     :check-on-click-node="true"
                     :props="defaultProps"
-                   @current-change="menuNodeClick"
+                     @node-click="menuNodeClick"
            />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18">
-        <el-card v-if="!isCatalog">
+          <el-card v-if="isBtnPermissionShow">
            <template #header>
              <div class="card-header">
                <span>页面授权</span>
@@ -37,10 +37,19 @@
            </template>
            <div>
              <el-divider content-position="left">按钮授权</el-divider>
-            <el-button type="primary" size="small" style="margin-bottom: 0.5em" @click="createBtnPermission">新增</el-button>
+              <el-button type="primary" size="small" style="margin-bottom: 0.5em" @click="createBtnPermission">新增
+              </el-button>
              <el-table size="small" :data="buttonPermissionData" border style="width: 100%">
-              <el-table-column prop="name" label="权限名称" width="100"/>
-              <el-table-column prop="datarange" label="权限范围" width="100"/>
+                <el-table-column prop="menu_button" label="权限名称" width="100">
+                  <template #default="scope">
+                    <div>{{formatMenuBtn(scope.row.menu_button)}}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="data_range" label="权限范围" width="140">
+                  <template #default="scope">
+                    <div>{{formatDataRange(scope.row.data_range)}}</div>
+                  </template>
+                </el-table-column>
                <el-table-column prop="dept" label="权限涉及部门"/>
                <el-table-column fixed="right" label="操作" width="120">
                  <template #default>
@@ -79,19 +88,19 @@
          </el-card>
        </el-col>
      </el-row>
-      <el-dialog v-model="dialogFormVisible" title="配置按钮权限">
+      <el-dialog v-model="dialogFormVisible" width="400px" title="配置按钮权限">
        <el-form :model="buttonForm" :rules="buttonRules" label-width="120px">
-          <el-form-item label="按钮">
-            <el-select v-model="buttonForm.name" placeholder="请选择按钮" @change="onChangeButton">
+          <el-form-item label="按钮" prop="menu_button">
+            <el-select v-model="buttonForm.menu_button" 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="权限范围">
+          <el-form-item label="权限范围" prop="data_range">
            <el-select v-model="buttonForm.data_range" placeholder="请选择按钮">
              <el-option v-for="(item,index) in dataScopeOptions" :key="index" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
-          <el-form-item label="数据部门"  v-show="buttonForm.data_range === 4">
+          <el-form-item label="数据部门" prop="dept" v-show="buttonForm.data_range === 4">
            <div class="dept-tree">
              <el-tree
                  :data="deptOptions"
@@ -157,6 +166,7 @@ interface Tree {
  children?: Tree[],
  id: number
 }
+
 let menuData = ref<Tree>()
 //获取菜单
 const getMenuData = () => {
@@ -167,19 +177,23 @@ const getMenuData = () => {
  })
 }

-let isCatalog = ref(true)
+let isBtnPermissionShow = ref(false)
 let buttonOptions = ref<[]>()
-let checkedMenuId = ref()
+let editedMenuInfo = ref()
 //菜单节点点击事件
-const menuNodeClick=(node:any)=>{
-  isCatalog.value = node.is_catalog
+const menuNodeClick = (node: any, obj: any) => {
+  isBtnPermissionShow.value = obj.checked && !node.is_catalog
  if (!node.is_catalog) {
    buttonOptions.value = []
-    checkedMenuId.value = node.id
+    editedMenuInfo.value = node
    api.GetMenuButton({menu: node.id}).then((res: any) => {
      const {data} = res
      buttonOptions.value = data
    })
+    api.getObj({menu: node.id,role:editedRoleInfo.value.id}).then((res:any)=>{
+      const {data} = res
+      buttonPermissionData.value = data
+    })
  }

 }
@@ -192,27 +206,36 @@ const dialogFormVisible = ref(false)
 const deptOptions = ref()
 //选中的部门数据
 const deptCheckedKeys = []
-
-
 //按钮表单
 const buttonForm = reactive({
-  menu_button:'',
-  role:'',
-  data_range:'',
+  menu_button: null,
+  role: null,
+  menu:null,
+  data_range: null,
  dept: []
 })
+//按钮表格数据
+let buttonPermissionData = ref([])
 //按钮表单验证
 const buttonRules = reactive<FormRules>({
-  name:[
+  menu_button: [
    {required: true, message: '必填项'}
  ],
  data_range: [
    {required: true, message: '必填项'}
-  ]
+  ],
+  dept: [
+    {required: true, message: '必填项'}
+  ],
 })
 //新增按钮
 const createBtnPermission = () => {
  dialogFormVisible.value = true
+  buttonForm.menu_button = null
+  buttonForm.menu = null
+  buttonForm.role = null
+  buttonForm.data_range = null
+  buttonForm.dept = []
 }
 //权限范围数据
 const dataScopeOptions = ref<[]>()
@@ -224,35 +247,63 @@ const onChangeButton = (val:any)=>{
    dataScopeOptions.value = res.data
  })
 }
+//过滤按钮名称
+const formatMenuBtn = (val:any)=>{
+  let obj:any = buttonOptions.value?.find((item:any)=>{
+    return item.id===val
+  })
+  return obj?obj.name:null
+}
+//过滤权限范围
+const formatDataRange = (val:any)=>{
+  let obj:any = [
+    {
+      "value": 0,
+      "label": '仅本人数据权限'
+    },
+    {
+      "value": 1,
+      "label": '本部门及以下数据权限'
+    },
+    {
+      "value": 2,
+      "label": '本部门数据权限'
+    },
+    {
+      "value": 3,
+      "label": '全部数据权限'
+    },
+    {
+      "value": 4,
+      "label": '自定义数据权限'
+    }
+  ].find((item:any)=>{
+    return item.value===val
+  })
+  return obj?obj.label:null
+}
 //保存按钮表单
 const onSaveButtonForm = () => {
-  console.log(editedRoleInfo)
+  //console.log(editedRoleInfo)
+  const {id:roleId} = editedRoleInfo.value
+  const {id:menuId} = editedMenuInfo.value
+  const form = Object.assign({},buttonForm)
+  form.role = roleId
+  form.menu = menuId
+  console.log(form)
+  api.CreateObj(form).then(res=>{
+    buttonPermissionData.value.push(form)
+    dialogFormVisible.value = false
+  })
+
 }
-//按钮表格数据
-const buttonPermissionData: any[] = [
-  {
-    name: "查询",
-    datarange: 1,
-    dept: ""
-  }
-]
+
 /***按钮授权的弹窗****/
 //初始化数据
 const initGet = () => {
  getMenuData()
 }

-
-//字段权限
-const crudPermissionData: any[] = [
-  {
-    field: "name",
-    table: true,
-    view: true,
-    edit: true
-  }
-]
-
 /**
 * 保存授权
 */
@@ -276,6 +327,7 @@ defineExpose({drawer,editedRoleInfo,initGet})
  justify-content: space-between;
  align-items: center;
 }
+
 .dept-tree::-webkit-scrollbar {
  display: none; /* Chrome Safari */
 }