review: 分配菜单视图.

orion-ops-ui/src/views/user/role/components/role-menu-grant-modal.vue

@@ -3,9 +3,9 @@
            body-class="modal-form"
            title-align="start"
            title="分配菜单"
+           width="80%"
            :top="80"
-           :width="480"
-           :body-style="{padding: '16px 16px 0 16px'}"
+           :body-style="{padding: '16px 16px 0 16px', 'margin-bottom': '16px'}"
            :align-center="false"
            :draggable="true"
            :mask-closable="false"
@@ -14,25 +14,15 @@
            :cancel-button-props="{ disabled: loading }"
            :on-before-ok="handlerOk"
            @close="handleClose">
-    <a-spin :loading="loading">
-      <div class="role-menu-wrapper">
-        <!-- 角色名称 -->
-        <div class="item-wrapper">
-          <span class="item-label">角色名称</span>
-          <span class="item-value ml4">{{ roleRecord.name }}</span>
-        </div>
-        <!-- 角色编码 -->
-        <div class="item-wrapper">
-          <span class="item-label">角色编码</span>
-          <a-tag class="item-value">{{ roleRecord.code }}</a-tag>
-        </div>
-        <!-- 菜单 -->
-        <div class="menu-tree-wrapper item-wrapper">
-          <span class="item-label">菜单选择</span>
-          <menu-selector-tree ref="tree" class="item-value" />
-        </div>
-      </div>
-    </a-spin>
+    <div class="role-menu-wrapper">
+      <a-alert class="mb8 usn">
+        <span>{{ roleRecord.name }} {{ roleRecord.code }}</span>
+        <span class="mx8">-</span>
+        <span>菜单分配后需要用户手动刷新页面才会生效</span>
+      </a-alert>
+      <!-- 菜单 -->
+      <menu-grant-table ref="table" />
+    </div>
   </a-modal>
 </template>
 
@@ -51,13 +41,12 @@
   import { Message } from '@arco-design/web-vue';
   import { useCacheStore } from '@/store';
   import { getMenuList } from '@/api/system/menu';
-
-  import MenuSelectorTree from '@/components/system/menu/selector/menu-selector-tree.vue';
+  import MenuGrantTable from '@/components/system/menu/grant/menu-grant-table.vue';
 
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();
 
-  const tree = ref();
+  const table = ref();
   const roleRecord = ref<RoleQueryResponse>({} as RoleQueryResponse);
 
   // 打开新增
@@ -75,7 +64,7 @@
       }
       // 获取角色菜单
       const { data: roleMenuIdList } = await getRoleMenuId(record.id);
-      tree.value.init(roleMenuIdList);
+      table.value.init(roleMenuIdList);
     } catch (e) {
     } finally {
       setLoading(false);
@@ -96,7 +85,7 @@
       // 修改
       await grantRoleMenu({
         roleId: roleRecord.value.id,
-        menuIdList: [...tree.value.getValue()]
+        menuIdList: [...table.value.getValue()]
       } as RoleGrantMenuRequest);
       Message.success('分配成功');
       // 清空
@@ -123,25 +112,8 @@
 
 <style lang="less" scoped>
   .role-menu-wrapper {
-    min-width: 400px;
+    width: 100%;
     max-height: calc(100vh - 285px);
-
-    .item-wrapper {
-      display: flex;
-      margin-bottom: 16px;
-      align-items: baseline;
-
-      .item-label {
-        display: inline-block;
-        text-align: right;
-        width: 80px;
-        height: 32px;
-        margin-right: 12px;
-        line-height: 32px;
-        color: var(--color-text-2);
-      }
-
-    }
   }
 
 </style>