feat: 完成菜单组件管理

src/api/menu.js

@@ -35,3 +35,11 @@ export function getRoleApi(id) {
 export function updateRoleApi(data) {
     return putReq('/api/v1/roles', data);
 }
+
+export function getMenuComponentApi(id) {
+    return getReq(`/api/v1/menus/${id}/components`);
+}
+
+export function addMenuComponentApi(id, data) {
+    return postReq(`/api/v1/menus/${id}/components`, data);
+}

src/components/action_button/index.vue

@@ -9,7 +9,7 @@
                 :onOk="btn.onOk"
                 :label="btn.label"
             />
-            <a v-else @click="() => btn.click(row)">{{ btn.label }}</a>
+            <a v-else @click="() => btn.click(row)" v-bind="btn.option">{{ btn.label }}</a>
             <a-divider type="vertical" v-if="moreBtns.length || index !== basicBtns.length - 1" />
         </span>
 
@@ -26,7 +26,7 @@
                                 :onOk="btn.onOk"
                                 :label="btn.label"
                             />
-                            <a v-else @click="() => btn.click(row)">{{ btn.label }}</a>
+                            <a v-else @click="() => btn.click(row)" v-bind="btn.option">{{ btn.label }}</a>
                         </span>
                     </a-space>
                 </template>
@@ -62,6 +62,7 @@ export default {
     },
     created() {
         this.init();
+        console.log(this.buttonsArr);
     },
     computed: {
         basicBtns() {
@@ -77,10 +78,10 @@ export default {
             return url;
         },
         init() {
-            this.buttons.map((i) => {
+            this.buttons.map(i => {
                 i.__hidden__ = i.isHidden && i.isHidden(this.row);
             });
-            this.buttonsArr = this.buttons.filter((i) => !i.__hidden__);
+            this.buttonsArr = this.buttons.filter(i => !i.__hidden__);
         },
     },
 };

src/components/table/table.vue

@@ -15,10 +15,14 @@
             </div>
         </my-card>
 
-        <my-card class="tw-mt-3">
-            <a-space class="tw-mb-2.5">
-                <slot name="action" />
+        <my-card>
+            <a-space :class="{ 'tw-mb-2.5': !!$scopedSlots.search }">
+                <a-button type="primary" v-if="addBtn" @click="addBtnClick">
+                    {{ typeof addBtn === 'object' ? addBtn.text : '新增' }}
+                </a-button>
+                <slot name="operation" />
             </a-space>
+
             <a-table
                 :data-source="data"
                 :loading="loading"
@@ -27,8 +31,26 @@
                 @change="pageChange"
             >
                 <slot />
+                <a-table-column title="操作" v-if="buttons">
+                    <template #default="row">
+                        <my-ac-btn :row="row" :buttons="buttons" />
+                    </template>
+                </a-table-column>
             </a-table>
         </my-card>
+
+        <a-drawer
+            placement="right"
+            :visible="visible"
+            :drawerStyle="drawerStyle"
+            :bodyStyle="bodyStyle"
+            destroyOnClose
+            :width="600"
+            @close="hidden"
+            :maskClosable="false"
+        >
+            <slot name="drawer" :hidden="hidden" />
+        </a-drawer>
     </div>
 </template>
 
@@ -43,6 +65,10 @@ const initQuery = {
 export default {
     props: {
         url: String,
+        addBtn: [Object, Boolean],
+        buttons: Array,
+        noPage: Boolean,
+        formatData: Function,
     },
 
     data() {
@@ -54,6 +80,17 @@ export default {
             queryForm: {},
             loading: false,
             total: 0,
+            visible: false,
+            title: '新增',
+            drawerStyle: {
+                display: 'flex',
+                flexDirection: 'column',
+                overflowY: 'hidden',
+            },
+            bodyStyle: {
+                flex: 1,
+                overflow: 'hidden',
+            },
         };
     },
 
@@ -63,12 +100,14 @@ export default {
 
     computed: {
         pagination() {
-            return {
-                current: this.initQuery.pageNum,
-                pageSize: this.initQuery.pageSize,
-                total: this.total,
-                showQuickJumper: true,
-            };
+            return this.noPage
+                ? false
+                : {
+                      current: this.initQuery.pageNum,
+                      pageSize: this.initQuery.pageSize,
+                      total: this.total,
+                      showQuickJumper: true,
+                  };
         },
     },
 
@@ -76,7 +115,7 @@ export default {
         async getData() {
             this.loading = true;
             try {
-                await this.getDataWithPage();
+                this.noPage ? await this.getDataNoPage() : await this.getDataWithPage();
             } catch (error) {
                 // todo
             }
@@ -90,10 +129,34 @@ export default {
             else this.data = res.records;
         },
 
+        async getDataNoPage() {
+            const res = await request(this.url, METHOD.GET, this.queryForm);
+            if (this.formatData) this.data = this.formatData(res);
+            else this.data = res;
+        },
+
         pageChange(page) {
             this.initQuery.pageNum = page.current;
             this.getData();
         },
+
+        hidden() {
+            this.visible = false;
+        },
+        show({ title } = {}) {
+            this.visible = true;
+            if (title) this.title = title;
+        },
+        reset() {
+            this.queryForm = {};
+            this.initQuery = { ...initQuery };
+            this.getData();
+        },
+        addBtnClick() {
+            const { click } = typeof this.addBtn === 'object' ? this.addBtn : {};
+            click && click();
+            this.visible = true;
+        },
     },
 };
 </script>

src/components/table/tableDrawer.vue

-<template>
-    <div>
-        <Drawer />
-        
-        <Table>
-            <template #search="query">
-                <slot name="search" :query="query" />
-            </template>
-
-            <slot name="table" />
-        </Table>
-    </div>
-</template>
-
-<script>
-import Table from './table.vue';
-import Drawer from './drawer.vue';
-
-export default {
-    components: { Table, Drawer },
-};
-</script>

src/components/table/wraper.vue

+<template>
+    <div class="tw-flex tw-flex-col tw-h-full">
+        <div class="tw-overflow-y-hidden tw-flex-1">
+            <div class="tw-overflow-y-auto tw-h-full">
+                <slot />
+            </div>
+        </div>
+        <template>
+            <a-divider />
+            <a-space class="tw-justify-end">
+                <a-button @click="cancel">取消</a-button>
+                <slot name="footer">
+                    <a-button type="primary" @click="ok" :loading="loading">确认</a-button>
+                </slot>
+            </a-space>
+        </template>
+    </div>
+</template>
+
+<script>
+import { EMPTY_FUN } from '@/utils';
+
+export default {
+    props: {
+        onOk: {
+            type: Function,
+            default: EMPTY_FUN,
+        },
+        onCancel: Function,
+        hidden: {
+            type: Function,
+            default: EMPTY_FUN,
+        },
+    },
+    data: () => ({
+        loading: false,
+    }),
+    methods: {
+        cancel() {
+            if (this.onCancel) this.onCancel();
+            this.hidden();
+        },
+
+        async ok() {
+            this.loading = true;
+            await this.onOk();
+            this.loading = false;
+            this.hidden();
+        },
+    },
+};
+</script>

src/pages/system/view/menu/MenuManagement.vue

@@ -8,7 +8,7 @@
         ref="table"
     >
         <template #drawer>
-            <AddCom v-if="addCom" />
+            <AddCom v-if="addCom" :row="currentClickRow" ref="addCom" />
             <Form ref="addForm" v-else />
         </template>
 
@@ -33,24 +33,31 @@ import AddCom from './add_com.vue';
 export default {
     data: vm => ({
         addCom: false,
+        currentClickRow: null,
         addBtn: {
             text: '新建',
             onOk() {
-                return vm.$refs['addForm']?.submit();
+                console.log(vm.addCom);
+                return vm.addCom ? vm.$refs['addCom']?.submit() : vm.$refs['addForm']?.submit();
             },
             onCancel() {
                 vm.addCom = false;
+                vm.currentClickRow = null;
             },
         },
         sortOrder: 'ascend',
         buttons: [
             {
                 label: '新增组件',
-                click() {
+                option: {
+                    type: 'danger',
+                },
+                click(row) {
                     vm.show();
                     vm.addCom = true;
+                    vm.currentClickRow = row;
                 },
-                isHidden: row => row.menuType === 'MENU',
+                isHidden: row => row.menuType !== 'MENU',
             },
             { label: '编辑', click: vm.edit },
             { type: 'confirm', url: row => `/api/v1/menus/${row.menuId}`, after: vm.refreshTable },
@@ -74,7 +81,7 @@ export default {
             });
         },
         show() {
-            this.$refs['table'].show();
+            this.$refs['table'].show({ title: '菜单组件' });
         },
     },
 };

src/pages/system/view/menu/add_com.vue

 <template>
-    <h1>addCom</h1>
+    <div>
+        <a-button type="primary" class="tw-mb-2" @click="add">新增</a-button>
+        <a-table :dataSource="components" :rowKey="getRowKey">
+            <a-table-column title="组件编码">
+                <template #default="row">
+                    <span v-if="row.componentId">{{ row.componentCode }}</span>
+                    <a-input v-else v-model="row.componentCode" />
+                </template>
+            </a-table-column>
+            <a-table-column title="组件名称">
+                <template #default="row">
+                    <span v-if="row.componentId">{{ row.componentName }}</span>
+                    <a-input v-else v-model="row.componentName" />
+                </template>
+            </a-table-column>
+            <a-table-column title="操作">
+                <template #default="row">
+                    <a @click="() => del(row)">删除</a>
+                </template>
+            </a-table-column>
+        </a-table>
+    </div>
 </template>
+
+<script>
+import { getMenuComponentApi, addMenuComponentApi } from '@/api';
+
+export default {
+    props: ['row'],
+
+    data: () => ({
+        components: [],
+    }),
+
+    mounted() {
+        this.getData();
+    },
+
+    methods: {
+        async getData() {
+            const { menuId } = this.row;
+            this.components = await getMenuComponentApi(menuId);
+        },
+        add() {
+            this.components.push({
+                componentCode: '',
+                componentName: '',
+                __key__: this.components.length,
+            });
+        },
+        del(row) {
+            this.components = this.components.filter(r => r !== row);
+        },
+        getRowKey(row) {
+            return row.__key__ ? row.__key__ : row.componentId;
+        },
+        submit() {
+            const { menuId } = this.row;
+
+            return addMenuComponentApi(
+                menuId,
+                this.components.map(i => {
+                    delete i.__key__;
+                    return i;
+                }),
+            );
+        },
+    },
+};
+</script>

src/pages/user/components/form.vue

+<template>
+    <Wraper :onCancel="hidden" :hidden="hidden">
+        <h1>这是内容</h1>
+    </Wraper>
+</template>
+
+<script>
+import Wraper from '@/components/table/wraper.vue';
+
+export default {
+    components: { Wraper },
+    props: ['hidden'],
+};
+</script>

src/pages/user/components/todo.vue

 <template>
-    <h1>TODO</h1>
+    <Table url="/api/v1/logger/login" rowKey="logId" addBtn :actions="actions" ref="table">
+        <template #search="{query}">
+            <my-form-item label="开始时间">
+                <a-date-picker
+                    class="tw-w-full"
+                    show-time
+                    v-model="query.startTime"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                />
+            </my-form-item>
+        </template>
+
+        <template #drawer="{hidden}">
+            <Form :hidden="hidden" />
+        </template>
+
+        <a-table-column title="用户Id" data-index="userId" />
+        <a-table-column title="登录用户" data-index="userName" />
+        <a-table-column title="登录IP" data-index="loginIp" />
+        <a-table-column title="事件类型" data-index="loginTypeName" />
+        <a-table-column title="事件状态" data-index="isSuccessName" />
+        <a-table-column title="登录时间" data-index="loginTime" />
+        <a-table-column title="说明" data-index="logResultContent" />
+    </Table>
 </template>
+
+<script>
+import Table from '@/components/table/table.vue';
+import Form from './form.vue';
+
+export default {
+    components: { Table, Form },
+    data: () => ({
+        addBtn: {
+            text: '新增',
+        },
+        actions: [],
+    }),
+};
+</script>