✨ feat<广告管理>: 自动化

自动化开关接口增加

src/views/adManage/sp/campaigns/campaignDetail/automation/api.ts

@@ -1,4 +1,5 @@
 import { request } from '/@/utils/service'
+import { apiPrefix } from '/@/views/adManage/sp/api';
 
 const urlPrefix = "/api/ad_manage/auto_plan_template/"
 
@@ -8,4 +9,12 @@ export function getCampaignRuleInfo (params: any) {
     method: 'get',
     params: params
   })
+}
+
+export function postCampaignStatus (body: any) {
+  return request({
+    url: '/api/ad_manage/campaign_rule/change_status',
+    method: 'post',
+    data: body,
+  })
 }

src/views/adManage/sp/campaigns/campaignDetail/automation/index.vue

@@ -12,7 +12,9 @@ import SwitchCampaign from '/@/views/components/auto/auto-campaigns/switch-campa
 import TargetRule from '/@/views/components/auto/auto-campaigns/target-rule.vue';
 import SearchTermRule from '/@/views/components/auto/auto-campaigns/search-term.vue';
 import NegKeywordRule from '/@/views/components/auto/auto-campaigns/neg-keyword.vue';
-import * as api from './api';
+import { postCampaignStatus } from './api';
+import { ElMessage } from 'element-plus';
+
 
 interface Props {
   campaignId: string;
@@ -23,34 +25,14 @@ const props = defineProps<Props>();
 const campaignType = 'sp';
 const activeTab = ref(1);
 const RuleStatusButton = ref({
-  '1': '-',
-  '2': '-',
-  '3': '-',
-  '4': '-',
-  '5': '-',
-  '6': '-',
-});
-// const height = ref(800)
-// const campaignRuleStatus = ref({
-//   campaignId: props.campaignId,
-//   campaignType: campaignType,
-//   profileId: props.profileId,
-//   ruleType: activeTab.value,
-//   templateName: '',
-//   useTmpl: false,
-//   template: null,
-//   rule: {
-//     type: activeTab.value,
-//     campaignType: campaignType,
-//     campaignAd: [],
-//     action: {},
-//     activeModel: '',
-//     setTime: '',
-//     weekdays: [],
-//     conditions: [],
-//   },
-//   RuleStatusButton: RuleStatusButton,
-// })
+  '1': 0,
+  '2': 0,
+  '3': 0,
+  '4': 0,
+  '5': 0,
+  '6': 0,
+})
+
 const baseData = ref({
   campaignId: props.campaignId,
   campaignType: campaignType,
@@ -58,22 +40,48 @@ const baseData = ref({
   ruleType: activeTab,
 });
 
-onMounted(async () => {
-  await initData();
-});
-
 async function initData() {
-  const resp = await api.getCampaignRuleInfo(baseData.value);
-  const info = resp.data[0];
-  if (info) {
-    for (const i of ['1', '2', '3', '4', '5', '6']) {
-      RuleStatusButton.value[i] = info.RuleStatusButton[i];
-    }
-  }
+  // const resp = await api.getCampaignRuleInfo(baseData.value);
+  // const info = resp.data[0];
+  // if (info) {
+  //   for (const i of ['1', '2', '3', '4', '5', '6']) {
+  //     RuleStatusButton.value[i] = info.RuleStatusButton[i];
+  //   }
+  //   console.log('Initialized RuleStatusButton', RuleStatusButton.value); // 添加调试信息
+  // }
 }
 
 async function changeTab() {
-  // await initData()
+  // await initData();
+}
+
+async function changeStatus(newStatus: number, tabIndex: string) {
+  const body = {
+    ...baseData.value,
+    ruleType: Number(tabIndex),
+    status: newStatus
+  };
+  try {
+    const response = await postCampaignStatus(body);
+    if (response.code === 2000) {
+      ElMessage.success('更新状态成功');
+      const resp = await getCampaignRuleInfo(baseData.value);
+      RuleStatusButton.value = resp.data[0].RuleStatusButton;
+    } else if (response.code == 5000) {
+      ElMessage.warning(`${ response.data.description }`);
+    } else {
+      ElMessage.error('状态更新失败');
+    }
+  } catch (error) {
+    console.log('error:', error);
+  }
+}
+function updateRuleStatusButton(newValue) {
+  if (newValue !== undefined) {
+    RuleStatusButton.value = { ...RuleStatusButton.value, ...newValue }
+  } else {
+    console.error('接收到的 newValue 是 undefined')
+  }
 }
 
 async function refresh(tab: number) {
@@ -82,64 +90,84 @@ async function refresh(tab: number) {
     activeTab.value = tab;
   });
 }
+
+onMounted(async () => {
+  // await initData();
+});
 </script>
 
 <template>
-  <el-tabs tab-position="left" v-model="activeTab" @tab-change="changeTab">
-    <el-tab-pane label="分时调价" :name="1">
+  <el-tabs v-model="activeTab" tab-position="left" @tab-change="changeTab">
+    <el-tab-pane :name="1" label="分时调价">
       <template #label>
         <div class="tab-label">
-          <el-switch size="small" v-model="RuleStatusButton['1']" :disabled="RuleStatusButton['1'] === '-'"></el-switch>
+          <el-switch v-model="RuleStatusButton['1']" :active-value="1" :disabled="RuleStatusButton['1'] === '-'"
+                     :inactive-value="0" size="small" @change="(val) => changeStatus(val, '1')" @click.stop="">
+          </el-switch>
           <span>分时调价</span>
         </div>
       </template>
-      <TimerBid :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(1)" v-if="activeTab === 1" />
+      <TimerBid v-if="activeTab === 1" :RuleStatusButton="RuleStatusButton" :data="baseData" @refresh="refresh(1)"  @updateRuleStatusButton="updateRuleStatusButton"/>
     </el-tab-pane>
-    <el-tab-pane label="分时预算" :name="2">
+    <el-tab-pane :name="2" label="分时预算">
       <template #label>
         <div class="tab-label">
-          <el-switch size="small" v-model="RuleStatusButton['2']" :disabled="RuleStatusButton['2'] === '-'"></el-switch>
+          <el-switch v-model="RuleStatusButton['2']" :active-value="1" :disabled="RuleStatusButton['2'] === '-'"
+                     :inactive-value="0" size="small" @change="(val) => changeStatus(val, '2')" @click.stop="">
+          </el-switch>
           <span>分时预算</span>
         </div>
       </template>
-      <TimerBudget :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(2)" v-if="activeTab === 2" />
+      <TimerBudget v-if="activeTab === 2" :RuleStatusButton="RuleStatusButton" :data="baseData" @refresh="refresh(2)" />
     </el-tab-pane>
-    <el-tab-pane label="广告活动" :name="3">
+    <el-tab-pane :name="3" label="广告活动">
       <template #label>
         <div class="tab-label">
-          <el-switch size="small" v-model="RuleStatusButton['3']" :disabled="RuleStatusButton['3'] === '-'"></el-switch>
+          <el-switch v-model="RuleStatusButton['3']" :active-value="1" :disabled="RuleStatusButton['3'] === '-'"
+                     :inactive-value="0" size="small" @change="(val) => changeStatus(val, '3')" @click.stop="">
+          </el-switch>
           <span>广告活动</span>
         </div>
       </template>
-      <SwitchCampaign :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(3)" v-if="activeTab === 3" />
+      <SwitchCampaign v-if="activeTab === 3" :RuleStatusButton="RuleStatusButton" :data="baseData"
+                      @refresh="refresh(3)" />
     </el-tab-pane>
-    <el-tab-pane label="定向规则" :name="4">
+    <el-tab-pane :name="4" label="定向规则">
       <template #label>
         <div class="tab-label">
-          <el-switch size="small" v-model="RuleStatusButton['4']" :disabled="RuleStatusButton['4'] === '-'"></el-switch>
+          <el-switch v-model="RuleStatusButton['4']" :active-value="1" :disabled="RuleStatusButton['4'] === '-'"
+                     :inactive-value="0" size="small" @change="(val) => changeStatus(val, '4')" @click.stop="">
+          </el-switch>
           <span>定向规则</span>
         </div>
       </template>
-      <TargetRule :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(4)" v-if="activeTab === 4"></TargetRule>
+      <TargetRule v-if="activeTab === 4" :RuleStatusButton="RuleStatusButton" :data="baseData"
+                  @refresh="refresh(4)"></TargetRule>
     </el-tab-pane>
-    <el-tab-pane label="添加搜索词" :name="5">
+    <el-tab-pane :name="5" label="添加搜索词">
       <template #label>
         <div class="tab-label">
-          <el-switch size="small" v-model="RuleStatusButton['5']" :disabled="RuleStatusButton['5'] === '-'"></el-switch>
+          <el-switch v-model="RuleStatusButton['5']" :active-value="1" :disabled="RuleStatusButton['5'] === '-'"
+                     :inactive-value="0" size="small" @change="(val) => changeStatus(val, '5')" @click.stop="">
+          </el-switch>
           <span>添加搜索词</span>
         </div>
       </template>
-      <SearchTermRule :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(5)" v-if="activeTab === 5">
+      <SearchTermRule v-if="activeTab === 5" :RuleStatusButton="RuleStatusButton" :data="baseData"
+                      @refresh="refresh(5)">
       </SearchTermRule>
     </el-tab-pane>
-    <el-tab-pane label="添加否定词" :name="6">
+    <el-tab-pane :name="6" label="添加否定词">
       <template #label>
         <div class="tab-label">
-          <el-switch size="small" v-model="RuleStatusButton['6']" :disabled="RuleStatusButton['6'] === '-'"></el-switch>
+          <el-switch v-model="RuleStatusButton['6']" :active-value="1" :disabled="RuleStatusButton['6'] === '-'"
+                     :inactive-value="0" size="small" @change="(val) => changeStatus(val, '6')" @click.stop="">
+          </el-switch>
           <span>添加否定词</span>
         </div>
       </template>
-      <NegKeywordRule :data="baseData" :RuleStatusButton="RuleStatusButton" @refresh="refresh(6)" v-if="activeTab === 6">
+      <NegKeywordRule v-if="activeTab === 6" :RuleStatusButton="RuleStatusButton" :data="baseData"
+                      @refresh="refresh(6)">
       </NegKeywordRule>
     </el-tab-pane>
   </el-tabs>
@@ -152,4 +180,4 @@ async function refresh(tab: number) {
   align-items: center;
   width: 120px;
 }
-</style>
+</style>

src/views/components/auto/auto-campaigns/common.ts

@@ -31,11 +31,12 @@ export const userFormData = (props: Props) => {
     },
     RuleStatusButton: props.RuleStatusButton,
   })
-
+  const ruleStatusButton = ref({})
   const initData = async () => {
     const resp = await api.getCampaignRuleInfo(props.data)
     const info = resp.data[0]
     if (info) {
+      ruleStatusButton.value = info.RuleStatusButton || {}
       delete info['RuleStatusButton']
       formData.value = info
       if (info.template) {
@@ -64,8 +65,8 @@ export const userFormData = (props: Props) => {
       delete body.rule['modifier_name']
       delete body.rule.id
     }
-    //console.log('body',body);
-    await api.saveCampaignRule(body)
+    console.log('body', body);
+    // await api.saveCampaignRule(body)
   }
 
   watch(
@@ -80,5 +81,5 @@ export const userFormData = (props: Props) => {
     await initData()
   })
 
-  return { formData, submitFormData }
+  return { formData, submitFormData ,ruleStatusButton}
 }

src/views/components/auto/auto-campaigns/save-rule-dialog.vue

@@ -4,7 +4,7 @@ import { ref, watch } from 'vue';
 interface Props {
   modelValue: boolean;
   formRef: any;
-  formData: any;
+  formData: AutoCampaignRule;
 }
 
 const props = defineProps<Props>();
@@ -28,12 +28,10 @@ watch(() => props.modelValue, (newValue) => {
 });
 
 function handleSave() {
+  props.formData.templateName=form.value.templateName;
   props.formRef.validate((valid: boolean) => {
     if (valid) {
-      emits('submit', {
-        selectedOption: selectedOption.value,
-        templateName: form.value.templateName,
-      });
+      emits('submit');
       dialogVisible.value = false;
     } else {
       console.log('验证失败');

src/views/components/auto/auto-campaigns/select-tmpl.vue

@@ -32,6 +32,7 @@ onMounted(async () => {
 watch(
     () => props.data.useTmpl,
     () => {
+      console.log("=>(select-tmpl.vue:26) props.data.useTmpl", props.data.useTmpl);
       if (props.data.useTmpl) {
         ruleUsage.value = 'tmpl';
         tmplId.value = props.data.template.id;

src/views/components/auto/auto-campaigns/timer-bid.vue

@@ -19,16 +19,16 @@ interface Props {
     ruleType: number;
   };
   RuleStatusButton?: { [key: string]: any };
-  //data: AutoCampaignRule;
+  // data: AutoCampaignRule;
 }
 
 const props = defineProps<Props>();
-const emits = defineEmits(['refresh']);
+const emits = defineEmits(['refresh','updateRuleStatusButton']);
 
 const formRef = ref();
-const { formData, submitFormData } = userFormData(props);
-const tableRef = ref(null);
+const { formData, submitFormData, ruleStatusButton } = userFormData(props)
 
+const tableRef = ref(null);
 const timeRange = ref('Option1');
 const schedule = ref('Option1');
 const bid = ref('1.0');
@@ -130,6 +130,10 @@ const handleApply = () => {
     tableRef.value.applyBid(timeRange.value, schedule.value, parseFloat(bid.value));
   }
 };
+
+watch(ruleStatusButton, (newValue) => {
+  emits('updateRuleStatusButton', newValue)
+}, { deep: true })
 </script>
 
 <template>