feat: 抽屉抽取

src/components/menu_tree/index.vue

@@ -5,7 +5,6 @@
         checkable
         :replaceFields="replaceFields"
         :tree-data="treeData"
-        style="max-height:400px"
         class="tw-overflow-y-auto"
         :expandedKeys.sync="expandedKeys"
         v-bind="$attrs"

src/components/table/drawer.vue

+<template>
+    <a-drawer
+        placement="right"
+        :visible="visible"
+        :drawerStyle="drawerStyle"
+        :bodyStyle="bodyStyle"
+        destroyOnClose
+        v-bind="$attrs"
+    >
+        <div class="tw-overflow-y-hidden">
+            <div class="tw-overflow-y-auto tw-h-full">
+                <slot />
+            </div>
+        </div>
+        <template>
+            <a-divider />
+            <a-space>
+                <slot name="footer">
+                    <a-button @click="cancel">取消</a-button>
+                    <a-button type="primary" @click="ok" :loading="loading">确认</a-button>
+                </slot>
+            </a-space>
+        </template>
+    </a-drawer>
+</template>
+
+<script>
+export default {
+    props: {
+        oncancel: Function,
+        onok: Function,
+    },
+    data() {
+        return {
+            visiable: false,
+            loading: false,
+            drawerStyle: {
+                display: 'flex',
+                flexDirection: 'column',
+                overflowY: 'hidden',
+            },
+            bodyStyle: {
+                flex: 1,
+                overflow: 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+            },
+        };
+    },
+    methods: {
+        show() {
+            this.visiable = true;
+        },
+        hidden() {
+            this.visiable = false;
+        },
+        cancel() {
+            this.oncancel && this.oncancel();
+            this.visiable = false;
+        },
+        async ok() {
+            this.loading = true;
+            await (this.onok && this.onok());
+            this.loading = false;
+            this.visiable = false;
+        },
+    },
+};
+</script>

src/components/table/index.vue

@@ -58,7 +58,7 @@
             :width="(addBtn && addBtn.width) || 600"
             destroyOnClose
         >
-            <div class="tw-overflow-y-hidden">
+            <div class="tw-overflow-y-hidden tw-flex-1">
                 <div class="tw-overflow-y-auto tw-h-full">
                     <slot name="drawer" />
                 </div>
@@ -179,6 +179,8 @@ export default {
 
         add() {
             this.addVisible = true;
+            this.type = 0;
+            this.noFooter = false;
         },
         addDrawerClose() {
             this.addVisible = false;

src/components/table/table.vue

+<template>
+    <div>
+        <my-card v-if="$scopedSlots.search">
+            <a-form-model :model="queryForm" layout="horizontal">
+                <a-row :gutter="16">
+                    <slot name="search" :query="queryForm" />
+                </a-row>
+            </a-form-model>
+
+            <div class="tw-text-right tw-mt-2">
+                <a-space>
+                    <a-button @click="reset">重置</a-button>
+                    <a-button type="primary" @click="getData">查询</a-button>
+                </a-space>
+            </div>
+        </my-card>
+
+        <my-card class="tw-mt-3">
+            <a-space class="tw-mb-2.5">
+                <slot name="action" />
+            </a-space>
+            <a-table
+                :data-source="data"
+                :loading="loading"
+                v-bind="$attrs"
+                :pagination="pagination"
+                @change="pageChange"
+            >
+                <slot />
+            </a-table>
+        </my-card>
+    </div>
+</template>
+
+<script>
+import { request, METHOD } from '@/utils/requestUtil';
+
+const initQuery = {
+    pageSize: 10,
+    pageNum: 1,
+};
+
+export default {
+    props: {
+        url: String,
+    },
+
+    data() {
+        return {
+            initQuery: {
+                ...initQuery,
+            },
+            data: [],
+            queryForm: {},
+            loading: false,
+            total: 0,
+        };
+    },
+
+    mounted() {
+        this.getData();
+    },
+
+    computed: {
+        pagination() {
+            return {
+                current: this.initQuery.pageNum,
+                pageSize: this.initQuery.pageSize,
+                total: this.total,
+                showQuickJumper: true,
+            };
+        },
+    },
+
+    methods: {
+        async getData() {
+            this.loading = true;
+            try {
+                await this.getDataWithPage();
+            } catch (error) {
+                // todo
+            }
+            this.loading = false;
+        },
+
+        async getDataWithPage() {
+            const res = await request(this.url, METHOD.GET, { ...this.initQuery, ...this.queryForm });
+            this.total = res.total;
+            if (this.formatData) this.data = this.formatData(res);
+            else this.data = res.records;
+        },
+
+        pageChange(page) {
+            this.initQuery.pageNum = page.current;
+            this.getData();
+        },
+    },
+};
+</script>

src/pages/system/view/role/form.vue

@@ -38,10 +38,17 @@ export default {
             defaultCheckedKeys: [],
         };
     },
-    computed: {},
     methods: {
         submit() {
-            const query = { ...this.form, functionAuthority: this.checkedKeys.map(i => i.toString()) };
+            const query = {
+                ...this.form,
+                authorityList: this.$refs['menuTree'].get().map(i => ({
+                    ...i,
+                    nodeId: i.menuId,
+                    parentNodeId: i.parentMenuId,
+                    nodeType: i.menuType,
+                })),
+            };
             return this.isEdit ? updateRoleApi(query) : addRoleApi(query);
         },
         setData(data, type) {

src/pages/user/components/message.vue

 <template>
-    <my-table url="/api/v1/messages/notice">
+    <my-table url="/api/v1/messages/notices">
+        <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>
+            <my-form-item label="结束时间">
+                <a-date-picker
+                    class="tw-w-full"
+                    show-time
+                    v-model="query.endTime"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                />
+            </my-form-item>
+            <my-form-item label="是否已读">
+                <a-select v-model="query.isRead" allowClear>
+                    <a-select-option :value="1">已读</a-select-option>
+                    <a-select-option :value="0">未读</a-select-option>
+                </a-select>
+            </my-form-item>
+        </template>
+
         <a-table-column title="标题" data-index="noticeTitle" />
         <a-table-column title="内容" data-index="noticeContent" />
-        <a-table-column title="创建时间" data-index="createTime"  />
+        <a-table-column title="创建时间" data-index="createTime" />
         <a-table-column title="发送者" data-index="noticeSenderName" />
         <a-table-column title="接受者" data-index="noticeReceiverName" />
         <a-table-column title="是否已读" data-index="isReadName" />