From df7f57d9637a91ae33cd0f9f6a5dc71b3012d8c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B4=E8=90=BD=28YangLei=29?= <lzi.love@icloud.com>
Date: Thu, 1 Jul 2021 16:37:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8A=BD=E5=B1=89=E6=8A=BD=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu_tree/index.vue    |  1 -
 src/components/table/drawer.vue       | 69 +++++++++++++++++++
 src/components/table/index.vue        |  4 +-
 src/components/table/table.vue        | 99 +++++++++++++++++++++++++++
 src/pages/system/view/role/form.vue   | 11 ++-
 src/pages/user/components/message.vue | 29 +++++++-
 6 files changed, 207 insertions(+), 6 deletions(-)
 create mode 100644 src/components/table/drawer.vue
 create mode 100644 src/components/table/table.vue

diff --git a/src/components/menu_tree/index.vue b/src/components/menu_tree/index.vue
index b3a255d..4bd300e 100644
--- a/src/components/menu_tree/index.vue
+++ b/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"
diff --git a/src/components/table/drawer.vue b/src/components/table/drawer.vue
new file mode 100644
index 0000000..ec7afca
--- /dev/null
+++ b/src/components/table/drawer.vue
@@ -0,0 +1,69 @@
+<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>
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index 29b8d60..cd63510 100644
--- a/src/components/table/index.vue
+++ b/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;
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
new file mode 100644
index 0000000..d3b6570
--- /dev/null
+++ b/src/components/table/table.vue
@@ -0,0 +1,99 @@
+<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>
diff --git a/src/pages/system/view/role/form.vue b/src/pages/system/view/role/form.vue
index ca4208b..9df4648 100644
--- a/src/pages/system/view/role/form.vue
+++ b/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) {
diff --git a/src/pages/user/components/message.vue b/src/pages/user/components/message.vue
index 487eee8..e3be9be 100644
--- a/src/pages/user/components/message.vue
+++ b/src/pages/user/components/message.vue
@@ -1,8 +1,33 @@
 <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" />
-- 
GitLab