修改计划

src/api/index.ts

@@ -183,3 +183,37 @@ export const getDeliveryMoreStatList = (
 export const getAdauth = () => {
   return axios("/oauth/accountGrant");
 };
+
+/* 广告预算修改
+ * @param null
+ */
+export const adChangeMoney = (data: {
+  ad_id: string | number;
+  budget: string | number;
+}) => {
+  return axios.post("/ad/updateAdBudget", data);
+};
+
+/* 广告出价修改
+ * @param null
+ */
+export const adChangeCrem = (data: {
+  ad_id: string | number;
+  bid: string | number;
+}) => {
+  return axios.post("/api/updateAdBid", data);
+};
+
+
+/* 修改广告状态
+ * @param null
+ */
+export const statusChange = (data: {
+  ad_id: string | number;
+  status: string;
+}) => {
+  return axios.post("/ad/updateAdStatus", data);
+};
+
+
+

src/components/edit-cell/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="editable-cell">
+        <div v-if="editable" class="editable-cell-input-wrapper">
+          <a-input v-model:value="value" @pressEnter="check" />
+          <check-outlined class="editable-cell-icon-check" @click="check" />
+        </div>
+        <div v-else class="editable-cell-text-wrapper">
+          {{value || ' '}}
+          <edit-outlined class="editable-cell-icon" @click="edit" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
+import { defineComponent, PropType, ref, watch, watchEffect } from "vue";
+const EditableCell  = defineComponent({
+  props: {
+    text:  Number,
+    onChange: Function,
+  },
+  components: {
+    CheckOutlined,
+    EditOutlined,
+  },
+  data() {
+    return {
+      value: this.text,
+      editable: false,
+    };
+  },
+  methods: {
+    handleChange(e:any) {
+      const value = e.target.value;
+      this.value = value;
+    },
+    check() {
+      this.editable = false;
+      this.$emit('change', this.value);
+    },
+    edit() {
+      this.editable = true;
+    },
+  },
+});
+
+export default EditableCell ;
+</script>
+<style lang="scss">
+.editable-cell {
+  position: relative;
+  .editable-cell-input-wrapper,
+  .editable-cell-text-wrapper {
+    padding-right: 24px;
+  }
+
+  .editable-cell-text-wrapper {
+    padding: 5px 24px 5px 5px;
+  }
+
+  .editable-cell-icon,
+  .editable-cell-icon-check {
+    position: absolute;
+    right: 0;
+    width: 20px;
+    cursor: pointer;
+  }
+
+  .editable-cell-icon {
+    line-height: 18px;
+    display: inline-block;
+  }
+
+  .editable-cell-icon-check {
+    line-height: 28px;
+  }
+
+  .editable-cell-icon:hover,
+  .editable-cell-icon-check:hover {
+    color: #108ee9;
+  }
+
+  .editable-add-btn {
+    margin-bottom: 8px;
+  }
+}
+.editable-cell:hover .editable-cell-icon {
+  display: inline-block;
+}
+</style>

src/plugins/install.ts

@@ -12,6 +12,7 @@ import {
   Popover,
   Select,
   Table,
+  Switch
 } from "ant-design-vue";
 
 import VueClipboard3 from "./vue-clipboard";
@@ -39,6 +40,7 @@ const install = (app: App<Element>) => {
     .use(DatePicker)
     .use(Table)
     .use(Popover)
+    .use(Switch)
     .use(Modal);
 };
 

src/types/api.d.ts

@@ -102,6 +102,8 @@ export interface ADPlanItem {
   end_time: string;
   budget: string;
   aim: string;
+  is_enable:number;
+  enable: boolean;
 }
 
 export interface deliveryPlanItem {

src/views/_pageOptions/table-put.ts

@@ -288,6 +288,9 @@ export const TableColumnOfPutAdPlan = [
     title: "",
     dataIndex: "check",
     width: 120,
+    slots:{
+      customRender: 'switch'
+    }
   },
   {
     fixed: "left",

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

@@ -3,12 +3,19 @@
     <tool-bar
       :text="['account_name', 'email', 'ad_name', 'campaign_name']"
       :label="['账户名', '邮箱', '计划名称', '广告组名称']"
-       v-model:loading="inSearching"
+      v-model:loading="inSearching"
       @confirm="onSearch"
     >
       <template #picker>
-        <p class="label" >日期</p>
-        <a-range-picker v-model:value="picker" :ranges="{ 本周: [moment(), moment().endOf('week')], '本月': [moment(), moment().endOf('month')] }" format="YYYY/MM/DD" />
+        <p class="label">日期</p>
+        <a-range-picker
+          v-model:value="picker"
+          :ranges="{
+            本周: [moment(), moment().endOf('week')],
+            本月: [moment(), moment().endOf('month')],
+          }"
+          format="YYYY/MM/DD"
+        />
       </template>
       <!-- <div class="tool-bar-item">
         <p class="label">计划状态</p>
@@ -24,28 +31,57 @@
       :loading="loading.value"
       @change="handleTableChange"
       rowKey="id"
-      :scroll="{ x: 2500 }"
-    ></a-table>
+      :scroll="{ x: 1500 }"
+    >
+      <template #switch="{ text, record }">
+        <a-switch v-model:checked="record.enable" @change="switchMethod(record)" />
+      </template>
+      <template #external_url="{ text, record }">
+        <p @click="onGo(record)"><a>前往落地页链接</a></p>
+      </template>
+
+      <template #cpa_bid="{ text, record }">
+        <editable-cell
+          :text="text"
+          @change="(val) => onCellChange(record, 'cpa_bid', val)"
+        />
+      </template>
+
+      <template #budget="{ text, record }">
+        <editable-cell
+          :text="text"
+          @change="(val) => onCellChange(record, 'budget', val)"
+        />
+      </template>
+    </a-table>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref ,unref} from "vue";
-import moment from 'moment';
+import { defineComponent, reactive, toRefs, ref, unref } from "vue";
+import moment from "moment";
 import ToolBar from "@/components/tool-bar/index.vue";
+import EditableCell from "@/components/edit-cell/index.vue";
 import usePagination from "@/hooks/usePagination";
 import {
   TableColumnOfPutAdPlan,
   ALLCloumnList,
 } from "../_pageOptions/table-put";
 
-import { getADPlanlist, getCustomColumn } from "@/api";
+import {
+  getADPlanlist,
+  getCustomColumn,
+  adChangeMoney,
+  adChangeCrem,
+  statusChange
+} from "@/api";
 
 import { ADPlanItem, PageOptions } from "@/types/api";
 
 const PutAdPlan = defineComponent({
   components: {
     ToolBar,
+    EditableCell,
   },
   setup() {
     let { loading, meta, tablePageOptions } = usePagination();
@@ -54,24 +90,18 @@ const PutAdPlan = defineComponent({
       list: ref<ADPlanItem[]>([]),
       inSearching: false,
       loading,
-      picker:[],
+      picker: [],
       tablePageOptions,
       columns: TableColumnOfPutAdPlan,
     });
 
     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;
-      let begin_date =  moment(begin_dates).format('YYYY-MM-DD');
-      let end_date =  moment(end_dates).format('YYYY-MM-DD');
+        const { email, account_name, ad_name, status, campaign_name } = fields;
+        const { picker } = state;
+        let [begin_dates, end_dates] = picker;
+        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,
@@ -82,7 +112,11 @@ const PutAdPlan = defineComponent({
           campaign_name,
           page: 1,
         });
-        state.list = data.list;
+        let newList: any[] = data.list.map((item) => {
+          item.enable = item.is_enable == 1 ? true : false;
+          return item;
+        });
+        state.list = newList;
         meta.value = data.meta;
       } catch (e) {
         console.log(e);
@@ -91,16 +125,32 @@ const PutAdPlan = defineComponent({
       }
     };
     getADPlanlist().then((res) => {
-      state.list = res.data.list;
+      let newList: any[] = res.data.list.map((item) => {
+        item.enable = item.is_enable == 1 ? true : false;
+        return item;
+      });
+      state.list = newList;
     });
 
     getCustomColumn().then((res) => {
       let columns: any[] = [];
       res.data.map((item: { desc: string; name: string }) => {
-        let lolumnItem = {
+        let lolumnItem: {
+          title: string;
+          dataIndex: string;
+          slots?: any;
+          width?: string | number;
+        } = {
           title: item.desc,
           dataIndex: item.name,
         };
+        if (item.name == "external_url") {
+          lolumnItem.slots = { customRender: "external_url" };
+        }
+        if (item.name == "cpa_bid" || item.name == "budget") {
+          lolumnItem.slots = { customRender: item.name };
+        }
+
         columns.push(lolumnItem);
       });
       state.columns.push(...columns);
@@ -109,15 +159,51 @@ const PutAdPlan = defineComponent({
     const handleTableChange = (pagination: PageOptions) => {
       const { current, pageSize, total } = pagination;
       getADPlanlist({ page: current }).then((res) => {
-        state.list = res.data.list;
+        let newList: any[] = res.data.list.map((item) => {
+          item.enable = item.is_enable == 1 ? true : false;
+          return item;
+        });
+        state.list = newList;
         meta.value = res.data.meta;
       });
     };
-    return { ...toRefs(state), handleTableChange,onSearch };
+    return { ...toRefs(state), handleTableChange, onSearch };
+  },
+  methods: {
+    moment,
+    onGo(record: any) {
+      window.open(record.external_url);
+    },
+    onCellChange(record: any, dataIndex: string, value: string) {
+      console.log(record);
+      let ad_id = record.ad_id;
+      if (dataIndex == "cpa_bid") {
+        adChangeCrem({ ad_id, bid: value })
+          .then((res) => {
+            location.reload();
+          })
+          .catch((e) => {
+            location.reload();
+          });
+      }
+      if (dataIndex == "budget") {
+        adChangeMoney({ ad_id, budget: value })
+          .then((res) => {
+            location.reload();
+          })
+          .catch((e) => {
+            location.reload();
+          });
+      }
+    },
+    switchMethod(record:any){
+      console.log(record);
+      let ad_id = record.ad_id;
+      statusChange({ ad_id, status: record.enable?'enable':'disable' }).then(res=>{
+        this.$message.error('修改广告状态成功！');
+      })
+    }
   },
-  methods:{
-     moment,
-  }
 });
 
 export default PutAdPlan;