feat: 角色权限demo优化更新接口，优化样式

meadmin-cn · Sep 22, 2022 · 7815394 · 7815394
1 parent ebedfb3
commit 7815394
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 70 deletions.
diff --git a/mock/apiDemo/menu.ts b/mock/apiDemo/menu.ts
@@ -306,9 +306,17 @@ export default [
     timeout: 500 + Math.floor(Math.random() * 1000),
     response: (req: any) => {
       const id = +req.url.replace('/api/admin/menu/', '');
+      const info = req.body;
+      delete info._X_ROW_KEY;
+      const item = getMenuItem(id, menu);
+      if (!item) {
+        return fail('错误的id');
+      }
+      if (item?.parentId === info.parentId) {
+        Object.assign(item, info);
+        return success('操作成功');
+      }
       try {
-        const info = req.body;
-        delete info._X_ROW_KEY;
         const item = delMenu(id);
         Object.assign(item, info);
         addMenu(item);

diff --git a/src/views/rolePermissions.vue b/src/views/rolePermissions.vue
diff --git a/src/views/rolePermissions/components/group/group.vue b/src/views/rolePermissions/components/group/group.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="group">
     <me-vxe-table
       ref="groupRef"
       :data="group.data.value ?? []"
@@ -10,8 +10,8 @@
       :print="false"
       :export-menu="[]"
       show-overflow
-      :height="height"
-      me-class="group"
+      height="auto"
+      me-class="table-group"
       @current-change="groupChange"
       @add="showAddOrEditor()"
       @refresh="getGroup"
@@ -47,7 +47,6 @@ import { omit } from 'lodash-es';
 const emit = defineEmits({
   currentChange: (row: string[]) => true,
 });
-const height = Math.max(window.innerHeight - 180, 600);
 const showAdd = ref(false);
 const groupRef = ref<MeVxeTableInstance>();
 const group = groupListApi();
@@ -93,18 +92,26 @@ defineExpose({ setGroupRules });
 </script>
 <style lang="scss" scoped>
 .group {
-  .group-item {
+  .table-group {
+    height: 100%;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    .group-item-btn {
-      display: none;
+    flex-direction: column;
+    :deep(.me-vxe-body) {
+      flex-grow: 1;
     }
-  }
-  :deep(.row--current) {
-    .group-item-btn {
-      display: block;
+    .group-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      .group-item-btn {
+        display: none;
+      }
+    }
+    :deep(.row--current) {
+      .group-item-btn {
+        display: block;
+      }
     }
   }
 }

diff --git a/src/views/rolePermissions/components/menu/menu.vue b/src/views/rolePermissions/components/menu/menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div clss="menu">
     <me-vxe-table
       ref="menuRef"
       :data="menu.data.value ?? []"
@@ -9,8 +9,9 @@
       :checkbox-config="{ labelField: 'id' }"
       :row-config="{ keyField: 'rule', useKey: true }"
       align="center"
-      border="full"
-      :height="height"
+      border
+      me-class="table-menu"
+      height="auto"
       show-overflow
       @refresh="getMenu"
       @quick-search="search"
@@ -51,7 +52,7 @@
         >
       </template>
     </me-vxe-table>
-    <add v-model:show="showAdd" :data="editorInfo"></add>
+    <add v-model:show="showAdd" :data="editorInfo" @success="getMenu()"></add>
   </div>
 </template>
 <script setup lang="ts" name="Menu">
@@ -68,7 +69,6 @@ const props = defineProps({
   },
 });
 const emit = defineEmits(['subRules']);
-const height = Math.max(window.innerHeight - 180, 600);
 const showAdd = ref(false);
 const menuRef = ref<MeVxeTableInstance>();
 const menu = menuListApi();
@@ -117,3 +117,15 @@ const del = (id: number) => {
     });
 };
 </script>
+<style lang="scss" scoped>
+.menu {
+  .table-menu {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    :deep(.me-vxe-body) {
+      flex-grow: 1;
+    }
+  }
+}
+</style>
diff --git a/src/views/rolePermissions/rolePermissions.vue b/src/views/rolePermissions/rolePermissions.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="role-permissions">
-    <group class="group" @current-change="checkedRules = $event" ref="group"></group>
-    <Menu class="menu" :checked-rules="checkedRules" @subRules="($refs.group as any).setGroupRules($event)"></Menu>
+    <el-scrollbar always view-class="body">
+      <group class="group" @current-change="checkedRules = $event" ref="group"></group>
+      <Menu class="menu" :checked-rules="checkedRules" @subRules="($refs.group as any).setGroupRules($event)"></Menu>
+    </el-scrollbar>
   </div>
 </template>
 <script lang="ts" setup name="RulePermissions">
@@ -11,23 +13,33 @@ const checkedRules = shallowRef([] as string[]);
 </script>
 <style lang="scss" scoped>
 .role-permissions {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -10px;
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  :deep(.body) {
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 100%;
+    padding: calc($page-padding - 10px);
+    .group {
+      flex: 1;
+      margin: 10px;
+      min-width: 300px;
+      min-height: 600px;
+    }
 
-  .group {
-    flex: 1;
-    margin: 10px;
-    min-width: 300px;
-  }
-
-  .menu {
-    flex: 3;
-    margin: 10px;
-  }
+    .menu {
+      flex: 3;
+      margin: 10px;
+      min-height: 600px;
+    }
 
-  :deep(.keyword-lighten) {
-    background-color: var(--el-color-warning-light-3);
+    :deep(.keyword-lighten) {
+      background-color: var(--el-color-warning-light-3);
+    }
   }
 }
 </style>