Merge branch 'master' of https://gitee.com/huge-dream/django-vue3-admin into develop

# Conflicts:
#	backend/dvadmin/system/views/role_menu_button_permission.py
#	web/src/views/system/role/components/PermissionComNew/index.vue
#	web/src/views/system/role/components/PermissionComNew/types.ts

web/src/views/system/role/components/PermissionComNew/index.vue

@@ -1,8 +1,6 @@
 <template>
   <el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false"
-             :before-close="handleDrawerClose"
-             :destroy-on-close="true"
-  >
+    :before-close="handleDrawerClose" :destroy-on-close="true">
     <template #header>
       <el-row>
         <el-col :span="4">
@@ -19,82 +17,65 @@
       </el-row>
     </template>
     <div class="permission-com">
-      <el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion>
-        <el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex" style="background-color: #fafafa;">
-          <template #title>
-            <div>
-              <div class="pc-collapse-title">
-                <el-checkbox v-model="item.isCheck" @click.stop="null">
-                  <span>{{ item.name }}</span>
-                </el-checkbox>
-              </div>
-              <div v-show="!collapseCurrent.includes(mIndex)" @click.stop="null" style="text-align: left;">
-                <el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck">
-                  {{ btn.name }}
-                </el-checkbox>
-              </div>
-            </div>
-          </template>
-          <div class="pc-collapse-main">
-            <div class="pccm-item">
-              <p>允许对这些数据有以下操作</p>
-              <el-checkbox v-for="(btn,bIndex) in item.btns" :key="bIndex" v-model="btn.isCheck" :label="btn.value">
-                <div class="btn-item">
-                  {{ btn.data_range !== null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
-                  <span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(item, btn.id)">
-                    <el-icon><Setting/></el-icon>
-                  </span>
+      <el-tabs>
+        <el-tab-pane v-for="(item, mIndex) in menuData" :key="mIndex" :label="item.name">
+          <el-tabs tab-position="left">
+            <el-tab-pane v-for="(menu, mIndex) in item.menus" :key="mIndex" :label="menu.name" >
+              <el-checkbox v-model="menu.isCheck">页面显示权限</el-checkbox>
+              <div class="pc-collapse-main">
+                <div class="pccm-item">
+                  <div class="menu-form-alert"> 配置操作功能点权限 </div>
+                  <el-checkbox v-for="(btn, bIndex) in menu.btns" :key="bIndex" v-model="btn.isCheck"
+                    :label="btn.value">
+                    <div class="btn-item">
+                      {{ btn.data_range !== null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
+                      <span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(menu, btn.id)">
+                        <el-icon>
+                          <Setting />
+                        </el-icon>
+                      </span>
+                    </div>
+                  </el-checkbox>
                 </div>
-              </el-checkbox>
-            </div>
 
-            <div class="pccm-item" v-if="item.columns&&item.columns.length>0">
-              <p>对这些数据有以下字段权限</p>
+                <div class="pccm-item" v-if="menu.columns && menu.columns.length > 0">
+                  <div class="menu-form-alert"> 配置数据列字段权限 </div>
+                  <ul class="columns-list">
+                    <li class="columns-head">
+                      <div class="width-txt">
+                        <span>字段</span>
+                      </div>
+                      <div v-for="(head, hIndex) in column.header" :key="hIndex" class="width-check">
+                        <el-checkbox :label="head.value" @change="handleColumnChange($event, menu, head.value)">
+                          <span>{{ head.label }}</span>
+                        </el-checkbox>
+                      </div>
+                    </li>
 
-              <ul class="columns-list">
-                <li class="columns-head">
-                  <div class="width-txt">
-                    <span>字段</span>
-                  </div>
-
-                  <div v-for="(head,hIndex) in column.header" :key="hIndex" class="width-check">
-                    <el-checkbox :label="head.value" @change="handleColumnChange($event, item, head.value)">
-                      <span>{{ head.label }}</span>
-                    </el-checkbox>
-                  </div>
-                </li>
-
-                <li v-for="(c_item, c_index) in item.columns" :key="c_index" class="columns-item">
-                  <div class="width-txt">{{ c_item.title }}</div>
-                  <div v-for="(col,cIndex) in column.header" :key="cIndex" class="width-check">
-                    <el-checkbox v-model="c_item[col.value]" class="ci-checkout"></el-checkbox>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
+                    <li v-for="(c_item, c_index) in menu.columns" :key="c_index" class="columns-item">
+                      <div class="width-txt">{{ c_item.title }}</div>
+                      <div v-for="(col, cIndex) in column.header" :key="cIndex" class="width-check">
+                        <el-checkbox v-model="c_item[col.value]" class="ci-checkout"></el-checkbox>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-tab-pane>
+      </el-tabs>
 
       <el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false"
-                 :before-close="handleDialogClose">
+        :before-close="handleDialogClose">
         <div class="pc-dialog">
           <el-select v-model="dataPermission" @change="handlePermissionRangeChange" class="dialog-select"
-                     placeholder="请选择">
-            <el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value"/>
+            placeholder="请选择">
+            <el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
-          <el-tree-select
-              v-show="dataPermission === 4"
-              node-key="id"
-              v-model="customDataPermission"
-              :props="defaultTreeProps"
-              :data="deptData"
-              multiple
-              check-strictly
-              :render-after-expand="false"
-              show-checkbox
-              class="dialog-tree"
-          />
+          <el-tree-select v-show="dataPermission === 4" node-key="id" v-model="customDataPermission"
+            :props="defaultTreeProps" :data="deptData" multiple check-strictly :render-after-expand="false"
+            show-checkbox class="dialog-tree" />
         </div>
         <template #footer>
           <div>
@@ -108,9 +89,9 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted, defineProps, watch, computed, reactive} from 'vue';
+import { ref, onMounted, defineProps, watch, computed, reactive } from 'vue';
 import XEUtils from 'xe-utils';
-import {errorNotification} from '/@/utils/message';
+import { errorNotification } from '/@/utils/message';
 import {
   getDataPermissionRange,
   getDataPermissionDept,
@@ -118,8 +99,8 @@ import {
   setRolePremission,
   setBtnDatarange
 } from './api';
-import {MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType} from './types';
-import {ElMessage} from 'element-plus'
+import { MenuDataType, MenusType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types';
+import { ElMessage } from 'element-plus'
 
 const props = defineProps({
   roleId: {
@@ -139,12 +120,12 @@ const emit = defineEmits(['update:drawerVisible'])
 
 const drawerVisible = ref(false)
 watch(
-    () => props.drawerVisible,
-    (val) => {
-      drawerVisible.value = val;
-      getMenuBtnPermission()
-      fetchData()
-    }
+  () => props.drawerVisible,
+  (val) => {
+    drawerVisible.value = val;
+    getMenuBtnPermission()
+    fetchData()
+  }
 );
 const handleDrawerClose = () => {
   emit('update:drawerVisible', false);
@@ -174,7 +155,7 @@ let dataPermission = ref();
 let customDataPermission = ref([]);
 //获取菜单,按钮,权限
 const getMenuBtnPermission = async () => {
-  const resMenu = await getRolePremission({role: props.roleId})
+  const resMenu = await getRolePremission({ role: props.roleId })
   menuData.value = resMenu.data
 }
 
@@ -198,13 +179,13 @@ const handleCollapseChange = (val: number) => {
  * @param record 当前菜单
  * @param btnType  按钮类型
  */
-const handleSettingClick = (record: MenuDataType, btnId: number) => {
+const handleSettingClick = (record: MenusType, btnId: number) => {
   menuCurrent.value = record;
   menuBtnCurrent.value = btnId;
   dialogVisible.value = true;
 };
 
-const handleColumnChange = (val: boolean, record: MenuDataType, btnType: string) => {
+const handleColumnChange = (val: boolean, record: MenusType, btnType: string) => {
   for (const iterator of record.columns) {
     iterator[btnType] = val;
   }
@@ -213,7 +194,7 @@ const handleColumnChange = (val: boolean, record: MenuDataType, btnType: string)
 const handlePermissionRangeChange = async (val: number) => {
   if (val === 4) {
     const res = await getDataPermissionDept();
-    const data = XEUtils.toArrayTree(res.data, {parentKey: 'parent', strict: false});
+    const data = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false });
     deptData.value = data;
   }
 };
@@ -228,14 +209,16 @@ const handleDialogConfirm = () => {
   }
 
   //if (dataPermission.value !== 4) {}
-  for (const iterator of menuData.value) {
-    if (iterator.id === menuCurrent.value.id) {
-      for (const btn of iterator.btns) {
-        if (btn.id === menuBtnCurrent.value) {
-          const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
-          btn.data_range = findItem?.value || 0;
-          if (btn.data_range === 4) {
-            btn.dept = customDataPermission.value
+  for (const item of menuData.value) {
+    for (const iterator of item.menus) {
+      if (iterator.id === menuCurrent.value.id) {
+        for (const btn of iterator.btns) {
+          if (btn.id === menuBtnCurrent.value) {
+            const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
+            btn.data_range = findItem?.value || 0;
+            if (btn.data_range === 4) {
+              btn.dept = customDataPermission.value
+            }
           }
         }
       }
@@ -260,7 +243,7 @@ const handleSavePermission = () => {
 }
 
 const column = reactive({
-  header: [{value: 'is_create', label: '新增可见'}, {value: 'is_update', label: '编辑可见'}, {
+  header: [{ value: 'is_create', label: '新增可见' }, { value: 'is_update', label: '编辑可见' }, {
     value: 'is_query',
     label: '列表可见'
   }]
@@ -295,6 +278,15 @@ onMounted(() => {
     .pccm-item {
       margin-bottom: 10px;
 
+      .menu-form-alert {
+        color: #fff;
+        line-height: 24px;
+        padding: 8px 16px;
+        margin-bottom: 20px;
+        border-radius: 4px;
+        background-color: var(--el-color-primary);
+      }
+
       .btn-item {
         display: flex;
         align-items: center;

web/src/views/system/role/components/PermissionComNew/types.ts

@@ -19,11 +19,18 @@ export interface CustomDataPermissionMenuType {
   children: CustomDataPermissionMenuType[]
 }
 
-export interface MenuDataType {
+export interface MenusType{
   id: string;
   name: string;
   isCheck: boolean;
   radio: string;
-  btns: { id:number,label: string; value: string; isCheck: boolean; data_range: number; dept:object; name:string }[];
+  btns: { id:number,name: string; value: string; isCheck: boolean; data_range: number; dept:object; name:string }[];
   columns: { [key: string]: boolean | string; }[]
 }
+
+export interface MenuDataType {
+  id: string;
+  name: string;
+  menus:MenusType[];
+}
+