提交

src/api/index.ts

@@ -14,7 +14,7 @@ import {
   ADPlanItem,
   deliveryPlanItem,
   IPlatform,
-  adPlanLog
+  adPlanLog,
 } from "@/types/api";
 
 /**
@@ -101,7 +101,7 @@ export const getADPlanlist = (
     end_date: any;
     campaign_name: string;
     page: number;
-  }> = { page: 1 }
+  }> = { page: 1, status: "AD_STATUS_DELIVERY_OK" }
 ): AxiosPromise<IList<ADPlanItem>> => {
   return axios("/ad/adData", { params: query });
 };
@@ -205,7 +205,6 @@ export const adChangeCrem = (data: {
   return axios.post("/api/updateAdBid", data);
 };
 
-
 /* 修改广告状态
  * @param null
  */
@@ -229,3 +228,9 @@ export const opertaroLog = (
   return axios("/ad/adOptLogs", { params: query });
 };
 
+/* 获取广告状态
+ * @param null
+ */
+export const getAddStatus = (): AxiosPromise<any> => {
+  return axios("/ad/adStatus");
+};

src/views/put/put-ad-plan.vue

@@ -6,7 +6,7 @@
       v-model:loading="inSearching"
       @confirm="onSearch"
     >
-      <template #picker>
+      <!-- <template #picker>
         <p class="label">日期</p>
         <a-range-picker
           v-model:value="picker"
@@ -16,14 +16,28 @@
           }"
           format="YYYY/MM/DD"
         />
-      </template>
-      <!-- <div class="tool-bar-item">
+      </template> -->
+      <div class="tool-bar-item" v-if="optionList.length>0">
         <p class="label">计划状态</p>
-        <a-select class="full-width">
-          <a-select-option value="status1">状态一</a-select-option>
+        <a-select class="full-width" v-model:value="currentSelect">
+          <a-select-option  v-for="item in optionList" :value="item.name" :key="item.name">{{item.desc}}</a-select-option>
         </a-select>
-      </div> -->
+      </div>
     </tool-bar>
+
+    <div class="table-filter">
+      <span>筛选条件：</span>
+      <a-range-picker
+          v-model:value="pickerFilter"
+          @change="switchDate"
+          :ranges="{
+            本日: [moment(),moment()],
+            本周: [moment(), moment().endOf('week')],
+            本月: [moment(), moment().endOf('month')],
+          }"
+          format="YYYY/MM/DD"
+        />
+    </div>
     <a-table
       :columns="columns"
       :data-source="list"
@@ -58,6 +72,9 @@
           @change="(val) => onCellChange(record, 'budget', val)"
         />
       </template>
+       <template #opertate="{ text, record }">
+         <p @click="openDrawer(record)"><a>操作日志</a></p>
+      </template>
     </a-table>
   </div>
 </template>
@@ -66,6 +83,7 @@
 import { defineComponent, reactive, toRefs, ref, unref } from "vue";
 import moment from "moment";
 import ToolBar from "@/components/tool-bar/index.vue";
+import PutData from "@/views/put/put-log.vue"
 import EditableCell from "@/components/edit-cell/index.vue";
 import usePagination from "@/hooks/usePagination";
 import {
@@ -79,6 +97,7 @@ import {
   adChangeMoney,
   adChangeCrem,
   statusChange,
+  getAddStatus
 } from "@/api";
 
 import { ADPlanItem, PageOptions } from "@/types/api";
@@ -87,35 +106,44 @@ const PutAdPlan = defineComponent({
   components: {
     ToolBar,
     EditableCell,
+    PutData
   },
   setup() {
     let { loading, meta, tablePageOptions } = usePagination();
-    let list: any[] = [];
+    let list: any[] = [], opList: any[] = [];
     const state = reactive({
       platform: "platform1",
       list: ref<ADPlanItem[]>([]),
       inSearching: false,
       loading,
+      currentSelect:'AD_STATUS_DELIVERY_OK',
       picker: [],
+      pickerFilter:[],
       tablePageOptions,
       columns: list,
+      optionList:opList,
       defaultColumns: TableColumnOfPutAdPlan,
+      fields:{}
     });
-
+    getAddStatus().then(res=>{
+      state.optionList = res.data;
+    })
     const onSearch = async (fields: Record<string, string>) => {
       try {
         const { email, account_name, ad_name, status, campaign_name } = fields;
-        const { picker } = state;
-        let [begin_dates, end_dates] = picker;
+
+        const { pickerFilter } = state;
+        let [begin_dates, end_dates] = pickerFilter;
         let begin_date = moment(begin_dates).format("YYYY-MM-DD");
         let end_date = moment(end_dates).format("YYYY-MM-DD");
+
         const { data } = await getADPlanlist({
           email,
           account_name,
           ad_name,
           begin_date,
           end_date,
-          status,
+          status:state.currentSelect,
           campaign_name,
           page: 1,
         });
@@ -125,12 +153,18 @@ const PutAdPlan = defineComponent({
         });
         state.list = newList;
         meta.value = data.meta;
+        state.fields = fields;
       } catch (e) {
         console.log(e);
       } finally {
         state.inSearching = false;
       }
     };
+
+    const switchDate = (date:any, dateString:string) => {
+      onSearch(state.fields)
+    }
+
     getADPlanlist().then((res) => {
       let newList: any[] = res.data.list.map((item) => {
         item.enable = item.is_enable == 1 ? true : false;
@@ -160,10 +194,18 @@ const PutAdPlan = defineComponent({
         }
 
         columns.push(lolumnItem);
+        
       });
       state.columns = [];
       state.columns.push(...state.defaultColumns);
       state.columns.push(...columns);
+      state.columns.push({
+          title: '操作',
+          dataIndex: 'opertate',
+           fixed: "right",
+          slots: { customRender: "opertate" },
+          width: 100
+        })
     });
 
     const handleTableChange = (pagination: PageOptions) => {
@@ -178,13 +220,16 @@ const PutAdPlan = defineComponent({
       });
     };
 
-    return { ...toRefs(state), handleTableChange, onSearch };
+    return { ...toRefs(state), handleTableChange, onSearch,switchDate };
   },
   methods: {
     moment,
     onGo(record: any) {
       window.open(record.external_url);
     },
+    openDrawer(record:any){
+
+    },
     onCellChange(record: any, dataIndex: string, value: string) {
       console.log(record);
       let ad_id = record.ad_id;
@@ -221,4 +266,14 @@ const PutAdPlan = defineComponent({
 });
 
 export default PutAdPlan;
+
 </script>
+<style lang="scss">
+.table-filter{
+  display: flex;
+  justify-content: flex-end;
+  padding: 5px 30px 15px;
+  align-items: center;
+}
+
+</style>