Merge branch 'master' of qk:zhuishuyun/precise_delivery_distribution_front

src/api/index.ts

@@ -14,7 +14,7 @@ import {
   ADPlanItem,
   deliveryPlanItem,
   IPlatform,
-  adPlanLog,
+  adPlanLog
 } from "@/types/api";
 
 /**
@@ -34,8 +34,8 @@ export const getDeliveryBookList = (
   query: Partial<{
     official_name: string;
     book_name: string;
-    page: 1;
-  }>
+    page: number;
+  }>   = { page: 1 }
 ): AxiosPromise<IList<IDeliveryBook>> => {
   return axios("/getUserDeliveryBooks", {
     params: query,
@@ -101,7 +101,7 @@ export const getADPlanlist = (
     end_date: any;
     campaign_name: string;
     page: number;
-  }> = { page: 1, status: "AD_STATUS_DELIVERY_OK" }
+  }> = { page: 1,status:'AD_STATUS_DELIVERY_OK' }
 ): AxiosPromise<IList<ADPlanItem>> => {
   return axios("/ad/adData", { params: query });
 };
@@ -117,7 +117,7 @@ export const getDeliveryStatList = (
     book_name: string;
     page: number;
   }> = { page: 1 }
-): AxiosPromise<IList<deliveryPlanItem>> => {
+): AxiosPromise<any> => {
   return axios("/delivery/stat", { params: query });
 };
 
@@ -205,6 +205,7 @@ export const adChangeCrem = (data: {
   return axios.post("/api/updateAdBid", data);
 };
 
+
 /* 修改广告状态
  * @param null
  */
@@ -233,4 +234,4 @@ export const opertaroLog = (
  */
 export const getAddStatus = (): AxiosPromise<any> => {
   return axios("/ad/adStatus");
-};
+};

src/components/drawer-wrapper/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            :title="title"
+            :width="width"
+            :destroy-on-close="destroyOnClose"
+            :placement="placement">
+    <slot name="tool-bar" />
+    <a-table :rowKey="rowKey"
+             :columns="columns"
+             :data-source="source"
+             :pagination="tablePageOptions"
+             :scroll="scroll"
+             @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: {},
+    },
+    scroll: Object,
+  },
+  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/helper/config/range.ts

@@ -0,0 +1,20 @@
+import moment from "moment";
+
+export const RangePicker = {
+  today: [moment(), moment()],
+  week: [moment().subtract(7, "days"), moment()],
+  month: [moment().subtract(30, "days"), moment()],
+  three_month: [
+    moment()
+      .subtract(3, "month")
+      .startOf("month"),
+    moment(),
+  ],
+};
+
+export const RangePickerText = {
+  today: "今天",
+  week: "一周前",
+  month: "一月前",
+  three_month: "3个月前",
+};

src/helper/index.ts

@@ -1,4 +1,5 @@
 const path = require("path");
+import { RangePicker, RangePickerText } from "./config/range";
 
 /**
  * json字符串格式化
@@ -74,3 +75,18 @@ export const formatSelectOptions = <T>(
     };
   });
 };
+
+/**
+ * 获取需要筛选的时间区间
+ * @param range eg: ["today", "month", "week", "three_month"]
+ */
+export const rangePicker = (range: string[]) => {
+  let rangeConfig: Record<string, moment.Moment[]> = Object.create({});
+
+  range.forEach((r: string) => {
+    const text = (<Record<string, string>>RangePickerText)[r];
+    rangeConfig[text] = (RangePicker as Record<string, moment.Moment[]>)[r];
+  });
+
+  return rangeConfig;
+};

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/antd.scss

@@ -39,3 +39,7 @@
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
+
+.ant-table td {
+  @include single-line();
+}

src/scss/index.scss

@@ -18,7 +18,7 @@ body {
 }
 
 .title-font {
-  font-family: "WebTitle";
+  // font-family: "WebTitle";
 }
 
 .web-wrapper {
@@ -101,3 +101,11 @@ body {
 .theme {
   color: $theme-color;
 }
+
+.popover-book-info {
+  line-height: 1.8;
+
+  span {
+    font-weight: bold;
+  }
+}

src/types/api.d.ts

@@ -124,7 +124,7 @@ export interface deliveryPlanItem {
   d30_recovery_rate: string;
 }
 
-export interface deliveryPlanItem {
+export interface moreStatPlanItem {
   date:               string;
   official_id:        number;
   official_name:      string;

src/views/_pageOptions/table-put.ts

@@ -2,10 +2,12 @@ export const TableColumnOfPutBooks = [
   {
     title: "ID",
     dataIndex: "id",
+    width: 100,
   },
   {
     title: "公众号名称",
     dataIndex: "official_name",
+    width: 150,
   },
   {
     title: "书籍",
@@ -14,20 +16,24 @@ export const TableColumnOfPutBooks = [
   {
     title: "流量平台",
     dataIndex: "delivery_platform",
+    width: 120,
   },
 
   {
     title: "开始时间",
     dataIndex: "start_time",
+    width: 200,
   },
   {
     title: "结束时间",
     dataIndex: "end_time",
+    width: 200,
   },
   {
     title: "操作",
     key: "operator",
     slots: { customRender: "operator" },
+    width: 100,
   },
 ];
 
@@ -329,10 +335,10 @@ export const TableColumnOfPutAdPlan = [
     fixed: "left",
     title: "",
     dataIndex: "check",
-    width: 100,
-    slots:{
-      customRender: 'switch'
-    }
+    width: 120,
+    slots: {
+      customRender: "switch",
+    },
   },
   {
     fixed: "left",

src/views/account/account.vue

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

src/views/put/put-book.vue

@@ -13,6 +13,7 @@
              :loading="loading"
              :columns="columns"
              :data-source="list"
+             :scroll="{ y: 500 }"
              @change="onBookLoaded">
       <template #operator="{record}">
         <confirm-button :label="record.status ? '停止' : '已停止'"
@@ -28,6 +29,7 @@
              destroy-on-close
              v-model:visible="open"
              :confirm-loading="inConfirm"
+             :after-close="onReset"
              @ok="onAdd">
       <a-form :model="addFormState"
               :labelCol="labelCol"
@@ -42,21 +44,33 @@
           </a-select>
         </a-form-item>
         <a-form-item label="书籍">
-          <a-select show-search
-                    placeholder="请输入要搜索的书名"
-                    not-found-content="暂无数据"
-                    :default-active-first-option="false"
-                    :filter-option="false"
-                    :show-arrow="false"
-                    :value="addFormState.book.bid"
-                    @search="onBookSearch"
-                    @change="onBookCheck">
-            <a-select-option v-for="book in addFormState.books"
-                             :value="book.bid"
-                             :key="book">
-              {{book.name}}
-            </a-select-option>
-          </a-select>
+          <a-popover :title="addFormState.book.name">
+            <template #content>
+              <div class="popover-book-info"
+                   v-if="addFormState.book.id">
+                <p>书籍Bid: <span>{{ addFormState.book.bid }}</span></p>
+                <p>书籍Channel: <span>{{ addFormState.book.channel_name }}</span></p>
+                <p>上架状态: <span>{{ addFormState.book.is_on_shelf }}</span></p>
+                <p>上架时间: <span>{{ addFormState.book.shelf_time }}</span></p>
+              </div>
+              <p v-else>请先输入要选择的书籍</p>
+            </template>
+            <a-select show-search
+                      placeholder="请输入要搜索的书名"
+                      not-found-content="暂无数据"
+                      :default-active-first-option="false"
+                      :filter-option="false"
+                      :show-arrow="false"
+                      :value="addFormState.book.bid"
+                      @search="onBookSearch"
+                      @change="onBookCheck">
+              <a-select-option v-for="book in addFormState.books"
+                               :value="book.bid"
+                               :key="book">
+                {{book.name}}
+              </a-select-option>
+            </a-select>
+          </a-popover>
         </a-form-item>
         <a-form-item label="流量平台">
           <a-select v-model:value="addFormState.platform">
@@ -138,7 +152,7 @@ const PutBooks = defineComponent({
       onBookLoaded();
     };
 
-    const onBookLoaded = async (query?: { current: 1 }) => {
+    const onBookLoaded = async (query?: { current: number }) => {
       try {
         console.log(query);
         loading.value = true;
@@ -201,7 +215,7 @@ const PutBooks = defineComponent({
         this.open = false;
         this.$message.success("添加成功");
         this.onBookLoaded();
-        this.addFormState = useReset(this.addFormState);
+        this.onReset();
       } catch (error) {
         console.log("error while add delivery book");
         error.message && this.$message.error(error.message);
@@ -209,6 +223,9 @@ const PutBooks = defineComponent({
         this.inConfirm = false;
       }
     },
+    onReset() {
+      this.addFormState = useReset(this.addFormState);
+    },
     onStop(data: IDeliveryBook) {
       const { id } = data;
       onStopDeliveryBook(id).then((_) => {

src/views/put/put-data-more.vue

@@ -25,7 +25,7 @@ import { TableColumnOfMoreStat } from "../_pageOptions/table-put";
 import { getDeliveryMoreStatList } from "@/api";
 import usePagination from "@/hooks/usePagination";
 
-import { deliveryPlanItem, PageOptions } from "@/types/api";
+import { moreStatPlanItem, PageOptions } from "@/types/api";
 
 const PutData = defineComponent({
   components: {
@@ -34,7 +34,7 @@ const PutData = defineComponent({
   setup() {
     let { loading, meta, tablePageOptions } = usePagination();
     const state = reactive({
-      list: ref<deliveryPlanItem[]>([]),
+      list: ref<moreStatPlanItem[]>([]),
       columns: TableColumnOfMoreStat,
       inSearching: false,
     });

src/views/put/put-data.vue

@@ -1,23 +1,42 @@
 <template>
   <div class="page-wrap page-wrap-put-books">
-    <tool-bar
-      :text="['official_name', 'book_name']"
-      :label="['公众号名称', '书名']"
-      @confirm="onSearch"
-      v-model:loading="inSearching"
-    >
+    <tool-bar :text="['official_name', 'book_name']"
+              :label="['公众号名称', '书名']"
+              @confirm="onSearch"
+              v-model:loading="inSearching">
       <template #picker>
         <p class="label">日期</p>
         <a-range-picker />
       </template>
     </tool-bar>
-    <a-table :columns="columns" :data-source="list" :scroll="{x: 1800}">
+    <a-table :columns="columns"
+             :data-source="list"
+             :scroll="{x: true}">
       <template #operator="data">
         <div class="confirm-button">
-          <a-button type="link" @click="more(data.record)">更多</a-button>
+          <a-button type="link"
+                    @click="more(data.record)">更多</a-button>
         </div>
       </template>
     </a-table>
+    <drawer-wrapper v-model:show="show"
+                    title="更多数据"
+                    :columns="drawercolumns"
+                    :source="drawerlist"
+                    :meta="meta"
+                    @page-change="onPageChange"
+                    :scroll="{x: true}"
+                    width="90%">
+      <template #tool-bar>
+        <tool-bar :text="['official_name', 'book_name']"
+                  :label="['公众号名称', '书名']"
+                  @confirm="draweronSearch"
+                  v-model:loading="drawerinSearching"></tool-bar>
+      </template>
+      <!-- <template #default="{ data }">
+        <p>{{ data.id }}</p>
+      </template>-->
+    </drawer-wrapper>
   </div>
 </template>
 
@@ -25,26 +44,36 @@
 import { defineComponent, reactive, toRefs, ref } from "vue";
 
 import ToolBar from "@/components/tool-bar/index.vue";
+import DrawerWrapper from "@/components/drawer-wrapper/index.vue";
 
-import { TableColumnOfPutData } from "../_pageOptions/table-put";
+import {
+  TableColumnOfPutData,
+  TableColumnOfMoreStat,
+} from "../_pageOptions/table-put";
 
-import { getDeliveryStatList } from "@/api";
+import { getDeliveryStatList, getDeliveryMoreStatList } from "@/api";
 import usePagination from "@/hooks/usePagination";
 
-import { deliveryPlanItem, PageOptions } from "@/types/api";
+import { deliveryPlanItem, PageOptions, moreStatPlanItem } from "@/types/api";
 import useApp from "@/hooks/useApp";
 
 const PutData = defineComponent({
   components: {
     ToolBar,
+    DrawerWrapper,
   },
   setup() {
     const { router } = useApp();
     let { loading, meta, tablePageOptions } = usePagination();
     const state = reactive({
-      list: ref<deliveryPlanItem[]>([]),
+      list: ref<any>([]),
+      drawerlist: ref<moreStatPlanItem[]>([]),
       columns: TableColumnOfPutData,
+      drawercolumns: TableColumnOfMoreStat,
       inSearching: false,
+      drawerinSearching: false,
+      drawermeta: {},
+      show: false,
     });
     const onSearch = async (fields: Record<string, string>) => {
       try {
@@ -76,10 +105,45 @@ const PutData = defineComponent({
       });
     };
     const more = (data: any) => {
-      console.log(data.date);
-      router.push({ path: "/put/datamore" });
+      // console.log(data.date);
+      // router.push({ path: "/put/datamore" });
+      state.show = true;
+      getDeliveryMoreStatList().then((r) => {
+        state.drawerlist = r.data.list;
+        state.drawermeta = r.data.meta;
+      });
+    };
+
+    const draweronSearch = async (fields: Record<string, string>) => {
+      try {
+        const { official_name, book_name, start_time, end_time } = fields;
+        const { data } = await getDeliveryMoreStatList({
+          start_time,
+          end_time,
+          official_name,
+          book_name,
+          page: 1,
+        });
+        state.drawerlist = data.list;
+        state.drawermeta = data.meta;
+      } catch (e) {
+        console.log(e);
+      } finally {
+        console.log(state.drawerinSearching);
+        state.drawerinSearching = false;
+      }
+    };
+    const onPageChange = (page: Number) => {};
+
+    return {
+      ...toRefs(state),
+      onSearch,
+      handleTableChange,
+      meta,
+      more,
+      onPageChange,
+      draweronSearch,
     };
-    return { ...toRefs(state), onSearch, handleTableChange, meta, more };
   },
 });