33

dist/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>广告系统</title>
       <script src="//open.thunderurl.com/thunder-link.js"></script>
-    <script type="module" crossorigin src="./assets/index.f57102f0.js"></script>
+    <script type="module" crossorigin src="./assets/index.e767eedc.js"></script>
     <link rel="modulepreload" href="./js/@vue/@vue.e7eafc10.js">
     <link rel="modulepreload" href="./js/vue-router/vue-router.647267ed.js">
     <link rel="modulepreload" href="./js/axios/axios.27022086.js">

src/components/businessMoudle/batchGdt/configArea/index.vue

@@ -178,7 +178,7 @@ const emit = defineEmits<{
   (event: "openPreEvent", val: boolean,arr:any): void; //打开预览区
 }>();
 
-const isMock = ref(false)
+const isMock = ref(true)
 // S 参数声明
 const {
   basicInfoData

src/components/businessMoudle/batchGdt/previewArea/index copy.vue

@@ -0,0 +1,630 @@
+<template>
+  <div class="areaBox" :key="`previewAreaTable_${updateKey}`">
+    <div class="empty-block"
+      v-if="!infoObj || !infoObj.campaign_list || !pageInfo.campaign_list || pageInfo.campaign_list.length == 0">
+      <h3 class="empty-title">预览区</h3>
+      <img src="@/assets/img/mobgi_ic_addata_nodata.png">
+      <p class="empty-description">请先完成相应模块配置后，再预览内容</p>
+    </div>
+    <div v-else>
+      <div class="areaTitle flex">
+        预览区
+        <div class="lMarauto flex f14" style="font-weight: initial">
+          <span>推广计划总数 : {{ pageInfo.num_total?.planNum }}</span>
+          <span class="lMar8">广告总数 : {{ pageInfo.num_total?.adNum }}</span>
+          <el-button type="primary" class="lMar20" @click="auditSubmitBtn"
+            v-loading.fullscreen.lock="submitLoading">全部提交审核</el-button>
+        </div>
+      </div>
+      <div class="areaCon">
+        <div class="flex">
+          <div class="accItem" v-for="item in pageInfo.accList" :key="item.id"
+            :class="pageInfo.accId == item.id ? 'active' : ''" @click="accItemEvent(item.id)">{{ item.name }}</div>
+        </div>
+        <div class=" flex chooseBox">
+          <!-- <div>已选 : <span>{{pageInfo.chooseList&&pageInfo.chooseList.length}}</span></div> -->
+          <div class="lMarauto flex">
+            <span>推广计划数量 : {{ pageInfo.accPlanAd.planNum }}</span>
+            <span class="lMar8">广告数量 : {{ pageInfo.accPlanAd.adNum }}</span>
+            <!--          <Dropdown title="批量操作" lMar="10px" :list="pageInfo.moreList" @close="dropdownEvent" :disabledFlag="pageInfo.chooseList&&pageInfo.chooseList.length == 0"></Dropdown>-->
+          </div>
+        </div>
+        <!-- <el-table :data="pageInfo.tableList" :header-cell-style="tableHeaderStyle"
+          style="width: 100%;" border empty-text="暂无数据" :row-key="rowKeyStr" @selection-change="selectionChangeEvent"
+          :span-method="objectSpanMethod" max-height="calc(100vh - 240px)">
+          <template v-for="bigItem in pageInfo.descol">
+            <el-table-column :label="bigItem.name">
+              <template v-for="item in bigItem.list">
+                <el-table-column v-if="item.column!='promoted_object_name' || (item.column=='promoted_object_name' && pageInfo.basicInfoData?.outerConfig?.weChatVideoAccount?.isComplete)" :fixed="item.isfixed" :min-width="item.minWidth ? item.minWidth : '130px'">
+                  <template #header>
+                    <div class="flex" :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'left' }">
+                      {{ item.name }}
+                      <el-tooltip v-if="item.notes" effect="dark" :content="item.notes"><i-ep-QuestionFilled
+                          class="lMar5 c-999 f14 pointer" /></el-tooltip>
+                    </div>
+                  </template>
+                  <template #default="scope">
+                    <div class="cellDiv" v-if="item.column == 'a1'">
+                      <div class="clampOne tMar10 flex">名称：
+                        <el-tooltip placement="top" :content="scope.row.main_info.campaign_name"
+                          :disabled="scope.row.main_info.campaign_name ? false : true">
+                          <div class="ellipsis">{{ scope.row.main_info.campaign_name || '-' }}</div>
+                        </el-tooltip>
+                        <el-icon color="#3173FF" class="pointer"
+                          @click="openSubDialogEvent(scope.row, 'campaign_name')"><i-ep-Edit /></el-icon>
+                      </div>
+                      <div class="clampOne">推广目标: {{ pageInfo?.target?.desc || '-' }} </div>
+                      <div class="clampOne flex">推广计划日预算：{{ scope.row.main_info.daily_budget == '' ||
+                        scope.row.main_info.daily_budget <= 0 ? '不限' : scope.row.main_info.daily_budget + '元' }} <el-icon
+                          color="#3173FF" class="pointer" @click="openSubDialogEvent(scope.row, 'PromotePlanBudget_day')">
+                          <i-ep-Edit /></el-icon>
+                      </div>
+                      <div class="clampOne flex">推广计划总预算：{{ scope.row.main_info.total_budget == '' ||
+                        scope.row.main_info.total_budget <= 0 ? '不限' : scope.row.main_info.total_budget }} <el-icon
+                          color="#3173FF" class="pointer"
+                          @click="openSubDialogEvent(scope.row, 'PromotePlanBudget_total')"><i-ep-Edit /></el-icon>
+                      </div>
+                      <div class="clampOne">投放方式：{{ scope.row.main_info.speed_mode == 'SPEED_MODE_FAST' ? '加速投放' :
+                        scope.row.main_info.speed_mode == 'SPEED_MODE_STANDARD' ? '标准投放' : '-' }} </div>
+                    </div>
+                    <div class="cellDiv flex" v-else-if="item.column == 'ad_name'">
+                      <el-tooltip placement="top" :content="scope.row.ad_name"
+                        :disabled="scope.row.ad_name ? false : true">
+                        <div class="ellipsis">{{ scope.row.ad_name || '-' }}</div>
+                      </el-tooltip>
+                      <el-icon color="#3173FF" class="pointer"
+                        @click="openSubDialogEvent(scope.row, 'ad_name')"><i-ep-Edit /></el-icon>
+                    </div>
+                    <div class="cellDiv flex" v-else-if="item.column == 'bid_amount'">
+                      <span>{{ scope.row.bid_amount || 0 }}元/{{ scope.row.optimization_goal_name || '千次曝光' }}</span>
+                      <el-icon color="#3173FF" class="pointer"
+                        @click="openSubDialogEvent(scope.row, 'bid_amount')"><i-ep-Edit /></el-icon>
+                    </div>
+                    <div class="cellDiv flex" v-else-if="item.column == 'adcreative_name'">
+                      <el-tooltip placement="top" :content="scope.row.adcreatives_info.adcreative_name"
+                        :disabled="scope.row.adcreatives_info.adcreative_name ? false : true">
+                        <div class="ellipsis">{{ scope.row.adcreatives_info.adcreative_name || '-' }}</div>
+                      </el-tooltip>
+                    </div>
+                    <div class="cellDiv flex" v-else-if="item.column == 'a5'">
+                      <span>暂未配置</span>
+                    </div>
+                    <div class="cellDiv pointer" style="color:#3173FF;" v-else-if="item.column == 'a7'"
+                      @click="openSubDialogEvent(scope.row, 'seeVideoImg')">已选
+                      <span>{{scope.row?.adcreatives_info.adcreative_elements.self_image_count != 'self_image_count' ? scope.row?.adcreatives_info.adcreative_elements.self_image_count : 0}}张图片,</span>
+                      <span>{{scope.row?.adcreatives_info.adcreative_elements.self_video_count != 'self_video_count' ? scope.row?.adcreatives_info.adcreative_elements.self_video_count : 0}}个视频</span>
+                    </div>
+                    <div class="cellDiv" v-else-if="item.column == 'description'">
+                      <el-tooltip placement="top"
+                        :content="scope.row?.adcreatives_info.adcreative_elements.description"
+                        :disabled="scope.row?.adcreatives_info.adcreative_elements.description ? false : true">
+                        <span>文案:已选{{ (scope.row?.adcreatives_info.adcreative_elements.description && 1) ||
+                          0 }}条文案</span>
+                      </el-tooltip>
+                    </div>
+                    <div class="cellDiv flex" v-else-if="item.column == 'page_spec'">
+                      <span>{{ scope.row.adcreatives_info.page_spec.page_name || '-' }}</span>
+                    </div>
+                    <div class="cellDiv" v-else-if="item.column == 'a10'">
+                      <Popconfirm @confirm="deleTextEvent(scope.row, scope.$index)" />
+                    </div>
+                    <div class="cellDiv" v-else-if="item.column == 'a11'">
+                      {{ scope.row.a11 == 1 ? '已提交' : '待提交' }}
+                    </div>
+                    <div class="cellDiv" v-else-if="item.column == 'promoted_object_name'">
+                      {{ scope.row?.adcreatives_info.adcreative_elements.self_promoted_object_name || '暂未配置' }}
+                    </div>
+                    <div class="cellDiv" :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'left' }" v-else>
+                      <el-tooltip :disabled="!(scope.row[item.column] && scope.row[item.column].length > 30)"
+                        effect="dark" :content="scope.row[item.column] + ''">
+                        <div class="clampTwo line21" style="flex: 1">
+                          {{ scope.row[item.column] || scope.row[item.column] == 0 ?
+                            (item.cancleForMat ? (scope.row[item.column] ? scope.row[item.column] : '-') :
+                              NumberHandle(scope.row[item.column], 2)) : '-' }}
+                        </div>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                </el-table-column>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table> -->
+      </div>
+    </div>
+  </div>
+  <!--修改推广计划名称-->
+  <EditPromotePlanName ref="EditPromotePlanNameRef" @confirm="val => echoVal(val, 'campaign_name')"></EditPromotePlanName>
+  <!--推广计划日预算-->
+  <PromotePlanBudget_day ref="PromotePlanBudget_dayRef" @confirm="val => echoVal(val, 'PromotePlanBudget_day')"></PromotePlanBudget_day>
+  <!--推广计划总预算-->
+  <PromotePlanBudget_total ref="PromotePlanBudget_totalRef" @confirm="val => echoVal(val, 'PromotePlanBudget_total')"></PromotePlanBudget_total>
+  <!--修改广告名称-->
+  <EditAdverteName ref="EditAdverteNameRef" @confirm="val => echoVal(val, 'ad_name')"></EditAdverteName>
+  <!--修改出价-->
+  <EditBid ref="EditBidRef" @confirm="val => echoVal(val, 'bid_amount')"></EditBid>
+  <!--查看视频/图片-->
+  <SeeVideoImg ref="SeeVideoImgRef" @confirm="val => echoVal(val, 'seeVideoImg')"></SeeVideoImg>
+  <!-- 提交审核弹框 -->
+  <AdCreateDialog ref="AdCreateDialogRef" @confirm="auditSubmitEvent"></AdCreateDialog>
+  <!-- loading -->
+  <LoadingMask ref="LoadingMaskRef" @confirm="loadingMaskConfirm"></LoadingMask>
+</template>
+<script setup lang="ts">
+import Popconfirm from '@/components/capsulationMoudle/_popconfirm.vue'
+import { nextTick, reactive, ref, watch } from "vue";
+import EditPromotePlanName from '@/components/businessMoudle/batchGdt/previewArea/dialog/editPromotePlanName.vue'
+import EditAdverteName from '@/components/businessMoudle/batchGdt/previewArea/dialog/EditAdverteName.vue'
+import EditBid from '@/components/businessMoudle/batchGdt/previewArea/dialog/editBid.vue'
+import PromotePlanBudget_day from '@/components/businessMoudle/batchGdt/previewArea/dialog/PromotePlanBudget_day.vue'
+import PromotePlanBudget_total from '@/components/businessMoudle/batchGdt/previewArea/dialog/PromotePlanBudget_total.vue'
+import SeeVideoImg from '@/components/businessMoudle/batchGdt/previewArea/dialog/SeeVideoImg.vue'
+import AdCreateDialog from '@/components/businessMoudle/batchGdt/previewArea/dialog/adCreate.vue'
+import LoadingMask from '@/components/businessMoudle/batchGdt/previewArea/dialog/loadingMask.vue'
+import { reactiveTableAndAny } from "@/api/ApiModel";
+import _ from "lodash";
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { adsCreate } from './api'
+import { NumberHandle } from '@/common/common'
+import { useRouter } from "vue-router";
+import { taskRecord } from "@/components/businessMoudle/adTask/ts/api"
+const router = useRouter();
+
+const props = withDefaults(defineProps<{
+  infoObj: any
+}>(), {
+  infoObj: {}
+})
+
+const submitLoading = ref<boolean>(false)
+const updateKey = ref<number>(1)
+const rowKeyStr = ref<string>('id')
+const pageInfo = reactive<reactiveTableAndAny>({
+  accId: 1,
+  tableList: [],
+  descol: [
+    {
+      name: '推广计划',
+      list: [{ name: '推广计划信息', column: 'a1', minWidth: '240px', isfixed: 'left' }]
+    },
+    {
+      name: '广告',
+      list: [
+        { name: '广告名称', column: 'ad_name' },
+        { name: '出价', column: 'bid_amount' },
+        { name: '定向', column: 'targeting_name' },
+        { name: '转化归因', column: 'a5' },
+      ]
+    },
+    {
+      name: '广告创意',
+      list: [
+        { name: '创意名称', column: 'adcreative_name' },
+        { name: '创意素材', column: 'a7' },
+        { name: '创意文案', column: 'description' },
+        { name: '落地页', column: 'page_spec' },
+        { name: '微信视频号', column: 'promoted_object_name' },
+      ]
+    },
+    {
+      name: '操作',
+      list: [
+        { name: '操作', column: 'a10' },
+        { name: '提交状态', column: 'a11' }
+      ]
+    },
+  ],
+  expandArrs: [],
+  promoteList: [
+    { k: 'new', la: '新建推广计划', val: 'new' },
+    { k: 'edit', la: '已有推广计划', val: 'edit' },
+  ],
+  chooseList: [],
+  moreList: [{ label: '修改推广计划', value: '1' }],
+  accList: [],
+  RuleConfigObj: {},//规则配置
+  choosePlanObj: {},//选择的计划项
+  planName: '',//推广计划的名称
+  adName: '',//广告名称
+  bid: '',//出价
+  imgList: [],//预览的图片
+  campaign_list: [],//广告
+  target: {},//推广目标
+  basicInfoData: {},//广告基本信息
+  accPlanAd: {//账号下的计划及广告数
+    planNum: 0,
+    adNum: 0,
+  }
+})
+
+//定时器
+let timer:any = null;
+
+//loading
+const LoadingMaskRef = ref<{ switchShow: (val: Boolean) => void }>()
+//提交广告弹框
+const AdCreateDialogRef = ref<{ switchShow: (val: Boolean) => void }>()
+//修改推广计划名称
+const EditPromotePlanNameRef = ref<{ switchShow: (val: Boolean, campaign_name: string) => void }>()
+//推广计划日预算
+const PromotePlanBudget_dayRef = ref<{ switchShow: (val: Boolean, daily_budget: string) => void }>()
+//推广计划总预算
+const PromotePlanBudget_totalRef = ref<{ switchShow: (val: Boolean, total_budget: string) => void }>()
+//修改广告名称
+const EditAdverteNameRef = ref<{ switchShow: (val: Boolean, ad_name: string) => void }>()
+//修改出价
+const EditBidRef = ref<{ switchShow: (val: Boolean, bid_amount: string) => void }>()
+//查看视频/图片
+const SeeVideoImgRef = ref<{ switchShow: (val: Boolean, imgList: string) => void }>()
+//批量选择推广计划
+// const batchChoosePromotePlanRef = ref<{switchShow:(val:Boolean)=>void}>()
+
+//打开相应弹框
+const openSubDialogEvent = (row: any, val: string) => {
+  pageInfo.choosePlanObj = row
+  if (val == 'campaign_name') {//推广计划名称
+    EditPromotePlanNameRef.value?.switchShow(true, row.main_info.campaign_name)
+  } else if (val == 'ad_name') {//广告名称
+    EditAdverteNameRef.value?.switchShow(true, row.ad_name)
+  } else if (val == 'bid_amount') {//出价
+    EditBidRef.value?.switchShow(true, row.bid_amount)
+  } else if (val == 'seeVideoImg') {//查看视频/图片
+    SeeVideoImgRef.value?.switchShow(true, row.adcreatives_info.adcreative_elements.self_info)
+  } else if (val == 'PromotePlanBudget_day') {//推广日预算
+    PromotePlanBudget_dayRef.value?.switchShow(true, row.main_info.daily_budget)
+  } else if (val == 'PromotePlanBudget_total') {//推广总预算
+    PromotePlanBudget_totalRef.value?.switchShow(true, row.main_info.total_budget)
+    // }else if(val == 'choosePlan'){
+    //   ChoosePromotePlanRef.value?.switchShow(true)
+  }
+}
+//弹框值回显
+const echoVal = (echoval: any, val: string) => {
+  if (!pageInfo.choosePlanObj) {
+    return
+  }
+  let list = pageInfo.campaign_list.filter((v) => {
+    return v.id == pageInfo.accId
+  })
+  if (list.length > 0) {
+    let info = list[0].chooseList[pageInfo.choosePlanObj.main_index]
+    if (val == 'campaign_name') {//推广计划名称
+      info.campaign_name = echoval
+    } else if (val == 'ad_name') {//广告名称
+      info.ad_list[pageInfo.choosePlanObj.ad_index].ad_name = echoval
+    } else if (val == 'bid_amount') {//出价
+      info.ad_list[pageInfo.choosePlanObj.ad_index].bid_amount = echoval
+    } else if (val == 'PromotePlanBudget_day') {//推广日预算
+      info.daily_budget = echoval
+    } else if (val == 'PromotePlanBudget_total') {//推广总预算
+      info.total_budget = echoval
+      // }else if(val == 'choosePlan'){
+      //   pageInfo.tableList.forEach(item=>{
+      //     if(item.id == pageInfo.choosePlanObj.id){
+      //       item.choosePlanVal = echoval
+      //     }
+      //   })
+    }
+    getPlanAdNum()
+  } else {
+    ElMessage.warning('删除失败！')
+  }
+}
+
+//点击全部提交按钮
+const auditSubmitBtn = () => {
+  AdCreateDialogRef.value?.switchShow(true)
+}
+//全部提交审核
+const auditSubmitEvent = (dialogInfo) => {
+  let campaign_list = [];
+  pageInfo.campaign_list.forEach((item) => {
+    campaign_list = campaign_list.concat(_.cloneDeep(item.chooseList))
+  })
+  //删除多余字段
+  campaign_list.forEach((main:any)=>{
+    for(let i = 0; i < main.ad_list.length; i++) {
+      let item = main.ad_list[i]
+      delete item.adcreatives_info.page_spec.page_name;
+      delete item.adcreatives_info.adcreative_elements.self_info;
+      delete item.adcreatives_info.adcreative_elements.self_image_count;
+      delete item.adcreatives_info.adcreative_elements.self_video_count;
+      delete item.adcreatives_info.adcreative_elements.self_promoted_object_name;
+    }
+  })
+  let ad_common = {}
+  ad_common = Object.assign(pageInfo.basicInfoData.fillBack, { ad_status: pageInfo.RuleConfigObj.ad_status, promoted_object_type: pageInfo.target.name })
+  let ad_outer = {
+    user_action_sets: {},//数据源
+    cold_start_audience: {},//扩量种子
+    start_audience: {},//一方助攻人群包
+    union_position_package: {},//优量汇流量包定投
+    exclude_union_position_package: {},//优量汇流量包屏蔽
+  }
+  for (let i in pageInfo.basicInfoData.outerConfig) {
+    if (pageInfo.basicInfoData.outerConfig[i].enabled && pageInfo.basicInfoData.outerConfig[i].value && JSON.stringify(pageInfo.basicInfoData.outerConfig[i].value != '{}')) {
+      let obj = {}
+      for (let j in pageInfo.basicInfoData.outerConfig[i].value) {
+        let item = pageInfo.basicInfoData.outerConfig[i].value[j]
+        if (i == 'attributionOuter') {//精准匹配归因
+          obj[j] = [{ "type": `USER_ACTION_SET_TYPE_${item?.type}`, "id": item.user_action_set_id }]
+        } else if (i == 'expandPopulation' || i == 'targetingPartyData') { // 扩量种子人群、一方数据助攻
+          obj[j] = item.join(',')
+        } else if (i == 'unionPosition') {//优量汇流量包
+          let unionObj = {}
+          for (let k in item) {
+            unionObj[k] = item[k].map((v) => { return v.union_package_id }).join(',')
+          }
+          obj[j] = unionObj
+        }
+      }
+      if (i == 'attributionOuter') {//精准匹配归因
+        ad_outer.user_action_sets = obj
+      } else if (i == 'expandPopulation') { // 扩量种子人群
+        ad_outer.cold_start_audience = obj
+      } else if (i == 'targetingPartyData') {//一方数据助攻
+        ad_outer.start_audience = obj
+      } else if (i == 'unionPosition') {//优量汇优量包
+        let union_package = {}
+        let exclude_union_package = {}
+        for (let w in obj) {
+          union_package[w] = obj[w][1]
+          exclude_union_package[w] = obj[w][2]
+        }
+        ad_outer.union_position_package = union_package
+        ad_outer.exclude_union_position_package = exclude_union_package
+      }
+    }
+  }
+  //添加创建广告任务
+  submitLoading.value = true
+  let params = {
+    campaign_list: JSON.stringify(campaign_list),
+    ad_common: JSON.stringify(ad_common),
+    ad_outer: JSON.stringify(ad_outer),
+    comtype: dialogInfo.comtype,
+  }
+  if(dialogInfo.comtype == 2) {
+    params['dotime'] = dialogInfo.dotime
+  }
+  adsCreate(params).then((res:any) => {
+    submitLoading.value = false
+    if(res.task_id && dialogInfo.comtype == 1){
+      LoadingMaskRef.value?.switchShow(true)
+      adTaskEvent(res.task_id)
+    }else{
+      goAdTask()
+    }
+  }).catch((err) => {
+    console.log(err,'提交失败')
+    submitLoading.value = false
+  })
+}
+
+/**广告任务执行记录 */
+const adTaskEvent = (task_id) => {
+  taskRecord({task_id}).then((res:any)=>{
+    if(res.status == 1 || res.status == 0) {
+      timer = setTimeout(()=>{
+        adTaskEvent(task_id)
+      },1000)
+    }else{
+      LoadingMaskRef.value?.switchShow(false)
+    }
+    if(res.status == 2) {
+      ElMessage.success('提交成功！')
+      router.push({ path: '/gdtList' })
+    }
+  }).catch(()=>{
+    LoadingMaskRef.value?.switchShow(false)
+  })
+}
+
+/**后台执行 */
+const loadingMaskConfirm = () => {
+  clearTimeout(timer)
+  LoadingMaskRef.value?.switchShow(false)
+  goAdTask()
+}
+
+/**去任务列表 */
+const goAdTask = () => {
+  router.push({ path: '/adTask' })
+}
+
+/**点击账号切换 */
+const accItemEvent = (id: number) => {
+  pageInfo.accId = id
+  getPlanAdNum()
+}
+
+/**获取帐号下广告及计划 */
+const getPlanAdNum = () => {
+  let list = _.cloneDeep(pageInfo.campaign_list.filter((v) => {
+    return v.id == pageInfo.accId
+  }))
+  if (list.length > 0) {
+    let tableList: any[] = []
+    list[0].chooseList.forEach((item, index) => {
+      for (let i = 0; i < item.ad_list.length; i++) {
+        let item_v = item.ad_list[i]
+        let obj = _.cloneDeep(item_v)
+        if (i == 0) {
+          obj = Object.assign(obj, { main_info: _.cloneDeep(item), main_index: index, ad_index: i })
+        } else {
+          obj = Object.assign(obj, { main_index: index, ad_index: i })
+        }
+        tableList.push(obj)
+      }
+    })
+    pageInfo.accPlanAd.planNum = list[0].chooseList.length;
+    pageInfo.accPlanAd.adNum = tableList.length;
+    pageInfo.tableList = tableList
+  } else {
+    pageInfo.accPlanAd.adNum = 0
+    pageInfo.accPlanAd.planNum = 0
+    pageInfo.tableList = []
+  }
+}
+/**删除广告 */
+const deleTextEvent = (item, index) => {
+  let list = pageInfo.campaign_list.filter((v) => {
+    return v.id == pageInfo.accId
+  })
+  if (list.length > 0) {
+    list[0].chooseList[item.main_index].ad_list.splice(item.ad_index, 1)
+    pageInfo.num_total.adNum -= 1
+    if (list[0].chooseList[item.main_index].ad_list.length == 0) {
+      list[0].chooseList.splice(item.main_index, 1)
+      pageInfo.num_total.planNum -= 1
+    }
+    if (list[0].chooseList.length == 0) {
+      pageInfo.campaign_list = pageInfo.campaign_list.filter((v) => {
+        return v.id != pageInfo.accId
+      })
+      pageInfo.accList = pageInfo.accList.filter((v) => {
+        return v.id != pageInfo.accId
+      })
+      if (pageInfo.campaign_list.length > 0) {
+        pageInfo.accId = pageInfo.campaign_list[0].id
+      }
+    }
+  } else {
+    ElMessage.warning('删除失败！')
+  }
+  getPlanAdNum()
+}
+const objectSpanMethod = ({
+  row,
+  column,
+  rowIndex,
+  columnIndex,
+}) => {
+  if (columnIndex === 0) {
+    if (row.main_info?.ad_list && row.main_info?.ad_list.length > 0) {
+      return {
+        rowspan: row.main_info.ad_list.length,
+        colspan: 1,
+      }
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0,
+      }
+    }
+  }
+}
+const selectionChangeEvent = (val: any) => {
+  pageInfo.chooseList = val
+}
+
+//表头样式
+const tableHeaderStyle = ({ row, column, rowIndex, columnIndex }: never) => {
+  return {
+    backgroundColor: '#fff',
+    color: '#161E46',
+    padding: '15px 0',
+    fontSize: '14px'
+  }
+}
+
+watch(() => props.infoObj.updateKey, () => {
+  nextTick(async () => {
+    //账号
+    pageInfo.accList = _.cloneDeep(props.infoObj.accVal)
+    if (!pageInfo.accList || pageInfo.accList.length == 0) return;
+    //广告计划
+    pageInfo.campaign_list = _.cloneDeep(props.infoObj.campaign_list)
+    //计划数等
+    pageInfo.num_total = _.cloneDeep(props.infoObj.num_total)
+    //推广目标
+    pageInfo.target = _.cloneDeep(props.infoObj.target)
+    //广告基本信息
+    pageInfo.basicInfoData = _.cloneDeep(props.infoObj.basicInfoData)
+    //规则配置
+    pageInfo.RuleConfigObj = _.cloneDeep(props.infoObj.RuleConfigObj)
+    accItemEvent(pageInfo.accList[0].id)
+  })
+}, { immediate: true, deep: true })
+
+</script>
+<style lang="scss" scoped>
+@import "src/assets/style/batchGdt.scss";
+
+.ellipsis {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.areaBox {
+  background-color: #ffffff;
+  min-height: 400px;
+}
+
+.areaCon {
+  background-color: #FBFBFB !important;
+
+  .accItem {
+    width: 237px;
+    height: 50px;
+    background: #f2f2f2;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: 1px solid #E2E2E2;
+    color: #161E46;
+    margin-right: 5px;
+    border-bottom: none;
+
+    &.active {
+      border: 1px solid #3173FF;
+      color: #3173FF;
+      background: rgba(155, 187, 255, 0.52);
+      border-bottom: none;
+    }
+  }
+
+  .chooseBox {
+    background-color: #fff;
+    padding: 10px;
+  }
+}
+
+.cellDiv {
+  color: #161E46;
+
+  .el-icon {
+    margin-left: 4px;
+  }
+}
+
+.empty-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 70px;
+
+  .empty-title {
+    margin: 0;
+    font-size: 48px;
+    line-height: 67px;
+    color: #e0e3e7;
+  }
+
+  .empty-description {
+    margin-top: 25px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: #808695;
+  }
+}
+</style>

src/components/businessMoudle/batchGdt/previewArea/index.vue

@@ -29,7 +29,7 @@
             <!--          <Dropdown title="批量操作" lMar="10px" :list="pageInfo.moreList" @close="dropdownEvent" :disabledFlag="pageInfo.chooseList&&pageInfo.chooseList.length == 0"></Dropdown>-->
           </div>
         </div>
-        <!-- <el-table :data="pageInfo.tableList" :header-cell-style="tableHeaderStyle"
+        <el-table :data="pageInfo.tableList" :header-cell-style="tableHeaderStyle"
           style="width: 100%;" border empty-text="暂无数据" :row-key="rowKeyStr" @selection-change="selectionChangeEvent"
           :span-method="objectSpanMethod" max-height="calc(100vh - 240px)">
           <template v-for="bigItem in pageInfo.descol">
@@ -44,7 +44,7 @@
                     </div>
                   </template>
                   <template #default="scope">
-                    <div class="cellDiv" v-if="item.column == 'a1'">
+                    <!-- <div class="cellDiv" v-if="item.column == 'a1'">
                       <div class="clampOne tMar10 flex">名称：
                         <el-tooltip placement="top" :content="scope.row.main_info.campaign_name"
                           :disabled="scope.row.main_info.campaign_name ? false : true">
@@ -113,9 +113,9 @@
                     </div>
                     <div class="cellDiv" v-else-if="item.column == 'promoted_object_name'">
                       {{ scope.row?.adcreatives_info.adcreative_elements.self_promoted_object_name || '暂未配置' }}
-                    </div>
-                    <div class="cellDiv" :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'left' }" v-else>
-                      <el-tooltip :disabled="!(scope.row[item.column] && scope.row[item.column].length > 30)"
+                    </div> -->
+                    <div class="cellDiv" :style="{ justifyContent: item.alignSelf ? item.alignSelf : 'left' }">
+                      <el-tooltip :disabled="!(scope.row[item.column] && scope.row[item.column]?.length > 30)"
                         effect="dark" :content="scope.row[item.column] + ''">
                         <div class="clampTwo line21" style="flex: 1">
                           {{ scope.row[item.column] || scope.row[item.column] == 0 ?
@@ -129,7 +129,7 @@
               </template>
             </el-table-column>
           </template>
-        </el-table> -->
+        </el-table>
       </div>
     </div>
   </div>