src/api/index.ts

@@ -33,7 +33,7 @@ export const getDeliveryBookList = (
   query: Partial<{
     official_name: string;
     book_name: string;
-    page: 1;
+    page: number;
   }>
 ): AxiosPromise<IList<IDeliveryBook>> => {
   return axios("/getUserDeliveryBooks", {
@@ -204,7 +204,6 @@ export const adChangeCrem = (data: {
   return axios.post("/api/updateAdBid", data);
 };
 
-
 /* 修改广告状态
  * @param null
  */
@@ -214,6 +213,3 @@ export const statusChange = (data: {
 }) => {
   return axios.post("/ad/updateAdStatus", data);
 };
-
-
-

src/components/drawer-wrapper/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            :title="title"
+            :width="width"
+            :destroy-on-close="destroyOnClose"
+            :placement="placement">
+    <a-table :rowKey="rowKey"
+             :columns="columns"
+             :data-source="source"
+             :pagination="tablePageOptions"
+             @change="onPageChange">
+      <template #operator="{ record }">
+        <slot :data="record"></slot>
+      </template>
+    </a-table>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, watchEffect } from "vue";
+
+import usePagination from "@/hooks/usePagination";
+
+import { IMeta, PageOptions } from "@/types/api";
+
+const DrawerWrapper = defineComponent({
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    destroyOnClose: {
+      type: Boolean,
+      default: true,
+    },
+    width: {
+      type: [Number, String],
+      default: "70%",
+    },
+    placement: {
+      type: String,
+      default: "right",
+    },
+    rowKey: {
+      type: String,
+      default: "id",
+    },
+    title: String,
+    source: Array,
+    columns: Array,
+    meta: {
+      type: Object as PropType<Partial<IMeta>>,
+      default: {},
+    },
+  },
+  emits: ["update:show", "pageChange"],
+  setup(props, { emit }) {
+    const { meta, tablePageOptions } = usePagination();
+
+    let visible = ref(props.show);
+
+    watchEffect(() => (meta.value = props.meta));
+
+    watchEffect(() => (visible.value = props.show));
+
+    watchEffect(() => emit("update:show", visible.value));
+
+    const onPageChange = (pagination: PageOptions) => {
+      emit("pageChange", pagination.current);
+    };
+
+    return { visible, tablePageOptions, onPageChange };
+  },
+});
+
+export default DrawerWrapper;
+</script>

src/plugins/install.ts

@@ -12,7 +12,8 @@ import {
   Popover,
   Select,
   Table,
-  Switch
+  Switch,
+  Drawer,
 } from "ant-design-vue";
 
 import VueClipboard3 from "./vue-clipboard";
@@ -41,7 +42,8 @@ const install = (app: App<Element>) => {
     .use(Table)
     .use(Popover)
     .use(Switch)
-    .use(Modal);
+    .use(Modal)
+    .use(Drawer);
 };
 
 export default install;

src/scss/index.scss

@@ -18,7 +18,7 @@ body {
 }
 
 .title-font {
-  font-family: "WebTitle";
+  // font-family: "WebTitle";
 }
 
 .web-wrapper {

src/views/account/account.vue

@@ -30,7 +30,6 @@ import {
   inject,
   onMounted,
   reactive,
-  Ref,
   ref,
   toRefs,
 } from "vue";

src/views/put/put-book.vue

@@ -138,7 +138,7 @@ const PutBooks = defineComponent({
       onBookLoaded();
     };
 
-    const onBookLoaded = async (query?: { current: 1 }) => {
+    const onBookLoaded = async (query?: { current: number }) => {
       try {
         console.log(query);
         loading.value = true;