提交提交

src/components/tool-bar/index.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="tool-bar-wrap">
-    <div class="tool-bar-item"
-         v-show="showPickerSlots">
+    <div class="tool-bar-item" v-show="showPickerSlots">
       <slot name="picker" />
     </div>
-    <div class="tool-bar-item"
-         v-for="(field, index) in text"
-         :key="field">
-      <p class="label">{{label[index]}}</p>
-      <a-input v-model:value="fields[field]"
-               :placeholder="label[index]" />
+    <div class="tool-bar-item" v-for="(field, index) in text" :key="field">
+      <p class="label">{{ label[index] }}</p>
+      <a-input v-model:value="fields[field]" :placeholder="label[index]" />
     </div>
     <slot />
     <div class="tool-bar-item">
-      <a-button type="primary"
-                :loading="loading"
-                @click="onConfirm">
+      <a-button type="primary" :loading="loading" @click="onConfirm">
         <template #icon>
           <search-outlined />
         </template>
         查询
       </a-button>
+      <a-button type="primary" @click="reset" style="margin-left:10px">
+        <template #icon>
+          <reload-outlined />
+        </template>
+        重置
+      </a-button>
       <slot name="exbutton" />
     </div>
   </div>
@@ -28,12 +28,13 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref, watch, watchEffect } from "vue";
-import { SearchOutlined } from "@ant-design/icons-vue";
+import { SearchOutlined,ReloadOutlined } from "@ant-design/icons-vue";
 
 // TODO 可以考虑之后通过json生成
 const ToolBar = defineComponent({
   components: {
     SearchOutlined,
+    ReloadOutlined
   },
   props: {
     text: {
@@ -44,6 +45,10 @@ const ToolBar = defineComponent({
       type: Object as PropType<string[]>,
       default: () => ref<string[]>([]),
     },
+    defaultVal: {
+      type: Object,
+      default: () => ({}),
+    },
     loading: {
       type: Boolean,
       default: false,
@@ -51,26 +56,31 @@ const ToolBar = defineComponent({
   },
   emits: ["update:loading", "confirm"],
   setup(props, { emit, slots }) {
-    const fields = ref<{ [key: string]: string }>({});
+    let fields = ref<{ [key: string]: string }>({});
     let loading = ref(props.loading);
     let showPickerSlots = ref(!!slots.picker);
 
     props.text.forEach((field) => {
       fields.value[field] = "";
     });
-
+    for(let v in props.defaultVal){
+      fields.value[v] = props.defaultVal[v]
+    }
     watchEffect(() => (loading.value = props.loading));
-
     const onConfirm = () => {
       loading.value = true;
       emit("update:loading", loading.value);
       emit("confirm", fields.value);
-      setTimeout(()=>{
+      setTimeout(() => {
         loading.value = false;
-      },2000)
+      }, 2000);
     };
-
-    return { fields, showPickerSlots, loading, onConfirm };
+    const reset = () =>{
+      props.text.forEach((field) => {
+      fields.value[field] = "";
+    });
+    }
+    return { fields, showPickerSlots, loading, onConfirm,reset };
   },
 });
 
@@ -100,5 +110,8 @@ export default ToolBar;
       width: 30%;
     }
   }
+  .ant-btn{
+    margin-right: 10px;
+  }
 }
-</style>
+</style>

src/views/_pageOptions/table-put.ts

@@ -616,6 +616,9 @@ export const AdgroupCloumn = [
     title: "广告组名称",
     dataIndex: "campaign_name",
     width: 100,
+    slots: {
+      customRender: "adgroup",
+    },
   },
   {
     title: "消耗",

src/views/put/ad-countdata.vue

@@ -22,8 +22,12 @@
       @change="handleTableChange"
     >
       <template #info="{ text, record }">
-        <p>广告主名：{{ record.advertiser_name }}</p>
-        <p>广告主ID：{{ record.advertiser_id }}</p>
+        <p @click="goAdlgroup(record.advertiser_id)">
+          <a href="javascript:;">广告主名：{{ record.advertiser_name }}</a>
+        </p>
+        <p @click="goAdlgroup(record.advertiser_id)">
+          <a href="javascript:;">广告主ID：{{ record.advertiser_id }}</a>
+        </p>
       </template>
 
       <template #budget="{ text, record }">
@@ -49,8 +53,8 @@ import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";
 import { picker } from "@/helper/config/range";
 import ToolBar from "@/components/tool-bar/index.vue";
 import moment from "moment";
+import useApp from "@/hooks/useApp";
 import { AdCoundCloumn } from "../_pageOptions/table-put";
-
 import { getAdgroupData, setGroupStatus, setGroupDay } from "@/api";
 import usePagination from "@/hooks/usePagination";
 import EditableCell from "@/components/edit-cell/index.vue";
@@ -63,7 +67,7 @@ const Adgroup = defineComponent({
   },
   setup() {
     let { loading, meta, tablePageOptions } = usePagination();
-
+    const { router } = useApp();
     const state = reactive({
       inSearching: false,
       open: false,
@@ -116,6 +120,10 @@ const Adgroup = defineComponent({
       getData(data);
     };
 
+    const goAdlgroup = (id: string) => {
+      router.push({ path: "/put/datas/group", query: { advertiser_id: id } });
+    };
+
     onMounted(getData);
 
     return {
@@ -124,6 +132,7 @@ const Adgroup = defineComponent({
       tablePageOptions,
       onSearch,
       handleTableChange,
+      goAdlgroup,
     };
   },
   methods: {

src/views/put/ad-group.vue

@@ -3,6 +3,7 @@
     <tool-bar
       :text="['advertiser_id', 'campaign_id']"
       :label="['账户名称/ID', '广告组名称/ID']"
+      :defaultVal="defaultToolvalue"
       v-model:loading="inSearching"
       @confirm="onSearch"
     >
@@ -18,9 +19,12 @@
     <a-table
       :columns="columns"
       :data-source="list"
-      :scroll="{ x: true }"
+      :scroll="{ x: true,y:600 }"
       @change="handleTableChange"
     >
+    <template #adgroup="{ text, record }">
+       <p @click="goAdlgroup(record.advertiser_id)"><a href="javascript:;">{{record.campaign_name}} </a></p>
+      </template>
       <template #switch="{ text, record }">
         <a-switch
           v-model:checked="record.is_enable"
@@ -36,7 +40,7 @@ import { picker } from "@/helper/config/range";
 import ToolBar from "@/components/tool-bar/index.vue";
 import moment from "moment";
 import { AdgroupCloumn } from "../_pageOptions/table-put";
-
+import useApp from "@/hooks/useApp";
 import { getAdgroupList, setGroupStatus } from "@/api";
 import usePagination from "@/hooks/usePagination";
 
@@ -48,6 +52,7 @@ const Adgroup = defineComponent({
   },
   setup() {
     let { loading, meta, tablePageOptions } = usePagination();
+    const { router, route } = useApp();
 
     const state = reactive({
       inSearching: false,
@@ -58,8 +63,16 @@ const Adgroup = defineComponent({
       pickered: [moment().subtract(30, "d"), moment()],
       columns: AdgroupCloumn,
       fields: {},
+      defaultToolvalue: {},
     });
-
+    if (route.query && route.query.advertiser_id) {
+      state.defaultToolvalue = {
+        advertiser_id: route.query.advertiser_id as string,
+      };
+      state.fields = {
+        advertiser_id: route.query.advertiser_id as string,
+      }
+    }
     const onSearch = (fields: Record<string, string>) => {
       const { advertiser_id, campaign_id } = fields;
       state.fields = fields;
@@ -68,18 +81,18 @@ const Adgroup = defineComponent({
 
     const getData = async (query?: {
       current: number;
-      advertiser_id?: string;
-      campaign_id?:  string;
+      advertiser_id?: any;
+      campaign_id?: string;
     }) => {
       try {
         loading.value = true;
         let [begin_dates, end_dates] = state.pickered;
-        let  begin_date,end_date;
-        if(begin_dates && end_dates){
-             begin_date = moment(begin_dates).format("YYYY-MM-DD");
-             end_date = moment(end_dates).format("YYYY-MM-DD");
+        let begin_date, end_date;
+        if (begin_dates && end_dates) {
+          begin_date = moment(begin_dates).format("YYYY-MM-DD");
+          end_date = moment(end_dates).format("YYYY-MM-DD");
         }
-        
+
         const { data } = await getAdgroupList({
           begin_date,
           end_date,
@@ -102,31 +115,40 @@ const Adgroup = defineComponent({
     };
     const handleTableChange = (pagination: PageOptions) => {
       const { current, pageSize, total } = pagination;
-      let data = Object.assign({ current ,...state.fields} );
+      let data = Object.assign({ current, ...state.fields });
       getData(data);
     };
 
-    onMounted(getData);
+    onMounted(() => {
+      getData({
+        advertiser_id: route.query?.advertiser_id ?? "",
+        current: 1,
+      });
+    });
 
+    const goAdlgroup = (id: string) => {
+      router.push({ path: "/put/datas/ad-plan", query: { advertiser_id: id } });
+    };
     return {
       ...toRefs(state),
       loading,
       tablePageOptions,
       onSearch,
       handleTableChange,
+      goAdlgroup
     };
   },
   methods: {
     moment,
-    switchMethod(record:any){
-        let data = {
+    switchMethod(record: any) {
+      let data = {
         campaign_id: record.campaign_id,
-        status: Number(!record.is_enable)==1?'enable':'disable',
+        status: Number(!record.is_enable) == 1 ? "enable" : "disable",
       };
       setGroupStatus(data).then((res) => {
         this.$message.success("状态修改成功");
       });
-    }
+    },
   },
 });
 

src/views/put/ad_datas.vue

@@ -15,6 +15,7 @@
 <script lang="ts">
 import useApp from "@/hooks/useApp";
 import { defineComponent,reactive,toRefs } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
 
 const PutDataIndex = defineComponent({
   setup() {
@@ -25,7 +26,9 @@ const PutDataIndex = defineComponent({
     const changeTab = (key:string) => {
       router.replace({name:key})
     };
-
+    onBeforeRouteUpdate((to) => {
+      state.defaultKey = to.name
+    });
     return {...toRefs(state), changeTab };
   },
 });

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

@@ -3,6 +3,7 @@
     <tool-bar
       :text="['ad_id', 'advertiser_id', 'campaign_id']"
       :label="['计划ID', '账号', '广告组名称']"
+      :defaultVal="defaultToolvalue"
       v-model:loading="inSearching"
       @confirm="onSearch"
     >
@@ -235,10 +236,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref, unref } from "vue";
+import { defineComponent, reactive, toRefs, ref, unref,onMounted } from "vue";
 import moment from "moment";
 import ToolBar from "@/components/tool-bar/index.vue";
 import PutData from "@/views/put/put-log.vue";
+import useApp from "@/hooks/useApp";
 import PutCount from "@/views/put/put-ad-count.vue";
 import RegisterDatad from "@/views/put/register-data.vue";
 import EditableCell from "@/components/edit-cell/index.vue";
@@ -275,6 +277,9 @@ const PutAdPlan = defineComponent({
   },
   setup() {
     let { loading, meta, tablePageOptions } = usePagination();
+    const { router, route } = useApp();
+
+
     let list: any[] = [],
       opList: any[] = [],
       stList: any = [];
@@ -287,7 +292,7 @@ const PutAdPlan = defineComponent({
       currentSelect: "AD_STATUS_DELIVERY_OK",
       picker: [],
       currentId: "",
-
+      defaultToolvalue: {},
       visible: false,
       popconfirmShow: false,
       showPop: false,
@@ -327,6 +332,16 @@ const PutAdPlan = defineComponent({
       fields: {},
       rangePick: picker,
     });
+
+    if (route.query && route.query.advertiser_id) {
+      state.defaultToolvalue = {
+        advertiser_id: route.query.advertiser_id as string,
+      };
+      state.fields = {
+        advertiser_id: route.query.advertiser_id as string,
+      }
+    }
+
     getAddStatus().then((res) => {
       res.data.unshift({
         name: "",
@@ -456,8 +471,14 @@ const PutAdPlan = defineComponent({
       getData({ page: current });
     };
 
-    getData();
 
+    onMounted(() => {
+      getData({
+        advertiser_id: route.query?.advertiser_id ?? "",
+        current: 1,
+      });
+    });
+    
     return { ...toRefs(state), handleTableChange, onSearch, switchDate };
   },
   methods: {