策略组

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

     <div class="areaTitle">
       配置区
       <el-button class="lMar20" type="primary" @click="openStrategyGroups">选择策略组</el-button>
+      <div class="strategy-title" v-if="pageInfo.groupsConfig && pageInfo.groupsConfig?.id">
+        已选：{{ pageInfo.groupsConfig.name }} 
+        <el-icon class="lMar8 pointer" @click="closeSeletedGroup"><Close /></el-icon>
+      </div>
       <span class="smallTitle lMarauto">预览广告数 : <span class="c-theme">{{NumberHandle(pageInfo.num_total.adNum)||0}}</span></span>
     </div>
     <div class="areaCon">
   <!-- 复用配置 -->
   <ResuseConfig ref="ResuseConfigRef" @aNewConfig="aNewConfigEvent" @reuse="reuseEvent"></ResuseConfig>
   <!-- 策略组列表 -->
-  <StrategyGroupsList ref="StrategyGroupsListRef"></StrategyGroupsList>
+  <StrategyGroupsList ref="StrategyGroupsListRef" @close="strategyGroupsUse"></StrategyGroupsList>
   <!-- 保存策略组弹框 -->
   <StrategyGroupsDialog ref="StrategyGroupsDialogRef"></StrategyGroupsDialog>
 </template>
     loadPageRule: 0, //0 全部相同 //1 按账户分配 //2 分配到计划 // 3分配到广告
   },
   acc_plan_ad_count: {}, //各账户对应的计划数、广告数；用于微信视频号的配置
+  groupsConfig: {},//已选择的策略组
 })
 
 //创意基本信息
   StrategyGroupsDialogRef,
   StrategyGroupsListRef,
   openStrategyGroups,
-  openSaveStrategyGroups
+  openSaveStrategyGroups,
+  closeSeletedGroup,
+  strategyGroupsUse
 } = strategyGroupsEvent({
+  targetRef,
+  accRef,
   cMaterial,
   basicInfoData,
   pageInfo,
   isMock,
   originalityBasicInfoData,
-  judgeEvent
+  judgeEvent,
+  aNewConfigEvent,
+  getAdPresetsInfo,
+  updateHaveContent,
+  clearOriginalityInfo
 })
 /**E 策略组 */
 
   height: 60px;
   border-radius: 6px;
 }
+.strategy-title{
+  margin-left: 16px;
+  font-weight: 400;
+  color: #666;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
 </style>

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

 const loading = ref<boolean>(true)
 const conLoading = ref<boolean>(false)
 const fullscreenLoading = ref<boolean>(false)
+const huxian_flag = ref(false)//解决 回显状态下 创意形式的问题
 const templateType = reactive<{ img: any[], video: any[] }>({
   img: [],
   video: []
       'copywriting': copywriting
     }
     if (i == 'originalityForm' && obj['originalityForm'] && obj['originalityForm'] != '') {//创意形式
-      if (form_main['originalityForm'] != obj[i]) {
-        onClickTemplate(templateType[obj[i]][0])
+      if(huxian_flag.value){
+        huxian_flag.value = false
+      }else{
+        if (form_main['originalityForm'] != obj[i]) {
+          onClickTemplate(templateType[obj[i]][0])
+        }
       }
     }
+    
     form_main[i] = obj[i]
   }
 }
   } else {
     site_set.value = props.adBasicInfo.site_ids.split(',')
   }
-
   loading.value = true;
   getAdcreativeTemplateList({
     account_ids: props.accIdsList.map((v) => v.id),
   visible.value = val
   if (val) {
     if (obj.fillback && JSON.stringify(obj.fillback) != '{}') { //回显状态下
+      huxian_flag.value = true
       fillBackInfo.value = _.cloneDeep(obj.fillback)
       templateCurr.value = _.cloneDeep(obj?.apiResult?.templateCurr)
       adTemplateItem.value = _.cloneDeep(obj?.apiResult?.adTemplateItem)
-      form_main['originalityForm'] = obj.fillback.originalityForm.api_value.originalityForm
-      JsonInfo.originalityForm.data.defaultValue = obj.fillback.originalityForm.api_value.originalityForm
+      if(obj.fillback.originalityForm && obj.fillback.originalityForm.api_value){
+        form_main['originalityForm'] = obj.fillback.originalityForm.api_value.originalityForm
+        JsonInfo.originalityForm.data.defaultValue = obj.fillback.originalityForm.api_value.originalityForm
+      }
+      if(JsonInfo.originalityForm.data.defaultValue == '' || !JsonInfo.originalityForm.data.defaultValue){
+        JsonInfo.originalityForm.data.defaultValue = templateCurr.value?.adcreative_template_style == '图片' ? 'img' : 'video'
+      }
+    }else{
+      huxian_flag.value = false
     }
     initEvent()
   }

src/components/businessMoudle/batchGdt/configArea/strategyGroups/list.vue

       <div class="flex tMar15 bMar15">
         <Select ref="targetRef" :clearFlag="true" title="推广目标" selectWidth="160px"
           :optObj="{ k: 'name', la: 'desc', val: 'name' }" @changeEvent="targetChange" :options="pageInfo.targetList" />
-        <el-input v-model="pageInfo.name" clearable @clear="handleCurrentChange(1)" @change="handleCurrentChange(1)" placeholder="搜索策略组名称" style="width: 230px;">
+        <el-input v-model="pageInfo.name" clearable @clear="handleCurrentChange(1)" @change="handleCurrentChange(1)"
+          placeholder="搜索策略组名称" style="width: 230px;">
           <template #append>
-            <el-button :icon="Search" @click="handleCurrentChange(1)"/>
+            <el-button :icon="Search" @click="handleCurrentChange(1)" />
           </template>
         </el-input>
       </div>
       <el-table ref="tableRef" :data="pageInfo?.list" :header-cell-style="tableHeaderStyle" border empty-text="暂无数据"
         height="60vh" style="width:100%">
-          <template v-for="item in pageInfo.descol">
-            <el-table-column :fixed="item.fixed" :prop="item.prop" :width="item.width ? item.width : 'auto'" :align="item.align || 'left'">
-              <template #header>
-                <div class="flex" :style="`justify-content:${item.align || 'left'}`">
-                  <span>{{ item.label }}</span>
-                </div>
-              </template>
-              <template #default="scope">
-                <div v-if="item.prop == 'radio'">
-                  <el-radio v-model="pageInfo.radioModel" :label="scope.row.id" size="large"><span></span></el-radio>
-                </div>
-                <!-- 操作 -->
-                <div v-else-if="item.prop == 'operate'">
-                  <span class="c-theme pointer">复制</span>
+        <template v-for="item in pageInfo.descol">
+          <el-table-column :fixed="item.fixed" :prop="item.prop" :width="item.width ? item.width : 'auto'"
+            :align="item.align || 'left'">
+            <template #header>
+              <div class="flex" :style="`justify-content:${item.align || 'left'}`">
+                <span>{{ item.label }}</span>
+              </div>
+            </template>
+            <template #default="scope">
+              <div v-if="item.prop == 'radio'">
+                <el-radio v-model="pageInfo.radioModel" @change="radioChange(scope.row)" :label="scope.row.id" size="large"><span></span></el-radio>
+              </div>
+              <!-- 操作 -->
+              <div v-else-if="item.prop == 'operate'">
+                <span class="c-theme pointer" @click="copyGroup(scope.row)">复制</span>
+                <span v-if="pageInfo.inUseGroup?.id != scope.row.id">
                   <Popconfirm key="dele" @confirm="deleteGroup(scope.row.id)" :slotFlag="true">
-                    <template #con>
-                      <span class="pointer lMar10 c-red">删除</span>
-                    </template>
-                  </Popconfirm>
-                </div>
-                <!-- 其他 -->
-                <div class="cellDiv" v-else>
-                  <el-tooltip :disabled="!(scope.row[item.prop] && scope.row[item.prop].length > 30)" effect="dark"
-                    :content="scope.row[item.prop] + ''">
-                    <div class="clampTwo line21" style="flex: 1">
-                      {{ scope.row[item.prop] || scope.row[item.prop] == 0 ? scope.row[item.prop] : '-' }}
-                    </div>
-                  </el-tooltip>
-                </div>
-              </template>
-            </el-table-column>
-          </template>
+                  <template #con>
+                    <span class="pointer lMar10 c-red">删除</span>
+                  </template>
+                </Popconfirm>
+                </span>
+                <span class="pointerDrop lMar10 c-666" v-else>删除</span>
+              </div>
+              <!-- 其他 -->
+              <div class="cellDiv" v-else>
+                <el-tooltip :disabled="!(scope.row[item.prop] && scope.row[item.prop].length > 30)" effect="dark"
+                  :content="scope.row[item.prop] + ''">
+                  <div class="clampTwo line21" style="flex: 1">
+                    {{ scope.row[item.prop] || scope.row[item.prop] == 0 ? scope.row[item.prop] : '-' }}
+                  </div>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+        </template>
       </el-table>
       <el-pagination class="tMar10" v-model:current-page="pageInfo.pagination.page"
         v-model:page-size="pageInfo.pagination.page_size" :page-sizes="[20, 50, 100, 200]" :small="true"
 import { exportDefine } from '@/components/businessMoudle/adTask/ts/define';
 import { nextTick, onBeforeMount, reactive, ref, watch } from 'vue';
 import Popconfirm from '@/components/capsulationMoudle/_popconfirm.vue'
-import { getStrategyGroupsList } from './ts/api'
-import { ElMessage } from 'element-plus';
+import { getStrategyGroupsList, getStrategyDetail, addStrategyGroups, strategyGroupsDel, getAccountStatus } from './ts/api'
+import { ElMessage, ElMessageBox } from 'element-plus';
+import _ from 'lodash';
 
 const emit = defineEmits<{
   (event: "close", val?: any): void;
 const loading = ref(false)
 const visible = ref(false)
 const targetRef = ref()
-const pageInfo = reactive({
+const pageInfo = reactive<any>({
   targetList: [],
   radioModel: '',
+  radioModelInfo: {},
   targetValue: '',
   name: '',
+  inUseGroup: {},//正在使用的策略组
   pagination: {
     page: 1,
     total: 0,
     page_size: 20,
   },
   descol: [
-    { prop: 'radio', label: '',align: 'center',  fixed: '', width: '60' },
-    { prop: 'name', label: '策略组', fixed: ''},
+    { prop: 'radio', label: '', align: 'center', fixed: '', width: '60' },
+    { prop: 'name', label: '策略组', fixed: '' },
     { prop: 'promoted_object_type_desc', label: '推广目标', fixed: '', width: '180' },
     { prop: 'note', label: '描述', fixed: '' },
-    { prop: 'operate', label: '操作', align: 'center',fixed: '' ,width: '120'},
+    { prop: 'operate', label: '操作', align: 'center', fixed: '', width: '120' },
   ],
   list: []
 })
   getList()
 }
 /**点击确定 */
-const submitEvent = () => {
-
+const submitEvent = async () => {
+  if(pageInfo.radioModel=='' || !pageInfo.radioModel || !pageInfo.radioModelInfo.id){
+    ElMessage.error('请选择策略组')
+    return
+  }
+  await getAccountStatus({ account_ids: pageInfo.radioModelInfo.account_ids })
+  emit('close', pageInfo.radioModelInfo)
+  visible.value = false
+}
+/**radio change */
+const radioChange = (info)=>{
+  pageInfo.radioModelInfo = info
 }
 
 const {
 }
 /**删除策略组 */
 const deleteGroup = (id) => {
-
+  loading.value = true;
+  strategyGroupsDel({ id }).then((res) => {
+    loading.value = false;
+    ElMessage.success('操作成功！')
+    getList()
+  }).catch(() => { loading.value = false; })
+}
+/**复制策略组 */
+const copyGroup = (info) => {
+  let title = info.name + '_副本'
+  loading.value = true;
+  getStrategyGroupsList({
+    page: 1,
+    pageSize: Number(pageInfo.pagination.page_size),
+    name: title,
+    promoted_object_type: pageInfo.targetValue
+  }).then((res: any) => {
+    if (res.data && Array.isArray(res.data) && res.data.length > 0) {
+      loading.value = false;
+      ElMessage.error('策略组名称重复！')
+    } else {
+      getStrategyDetailEvent(info.id, title)
+    }
+  }).catch(() => { loading.value = false; })
 }
+/**获取策略组详情 */
+const getStrategyDetailEvent = (id, name?) => {
+  loading.value = true;
+  getStrategyDetail({ id }).then(async (res: any) => {
+    loading.value = false;
+    await getAccountStatus({ account_ids: res.account_ids })
+    addStrategyGroupsEvent(Object.assign(res, { name }))
+  }).catch(() => { loading.value = false; })
+}
+/**新增策略组 */
+const addStrategyGroupsEvent = (info) => {
+  loading.value = true;
+  addStrategyGroups({
+    name: info.name,
+    note: info.note,
+    promoted_object_type: info.promoted_object_type,
+    account_ids: info.account_ids,
+    rule_conf: info.rule_conf,
+    ad_base: info.ad_base,
+    targetings_info: info.targetings_info,
+    creative_base: info.creative_base,
+    creative_info: info.creative_info,
+    paperwork: info.paperwork,
+    landing_page: info.landing_page,
+    user_action_sets: info.user_action_sets,
+    start_audience: info.start_audience,
+    wechat_channels: info.wechat_channels,
+    union_position: info.union_position
+  }).then((res:any) => {
+    loading.value = false;
+    pageInfo.pagination.page = 1;
+    getList()
+    ElMessageBox.confirm(
+      `<div>
+          <p style="margin-bottom: 12px;font-size: 16px;font-weight: 700;">策略组：${info.name} 复制成功</p>
+          <p style="color:#666;">你可以使用该策略组并调整广告内容，调整后再保存为新的策略</p>
+      </div>`,
+      '操作成功',
+      {
+        type: 'success',
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '立即使用',
+        cancelButtonText: '跳过',
+      }
+    ).then(() => {
+      pageInfo.radioModel = res.id
+      pageInfo.radioModelInfo = res
+      emit('close', pageInfo.radioModelInfo)
+      visible.value = false
+    }).catch(() => { })
+  }).catch(() => { loading.value = false; })
+}
+
 /**初始化 */
-const initFun = async (flag) => {
+const initFun = async (flag, groupsConfig) => {
   visible.value = flag
   if (flag) {
-    getList()
+    if (groupsConfig && groupsConfig.id) {
+      pageInfo.radioModel = groupsConfig.id
+      pageInfo.inUseGroup = _.cloneDeep(groupsConfig)
+      pageInfo.radioModelInfo = _.cloneDeep(groupsConfig)
+    }
     if (pageInfo.targetList.length == 0) { //获取推广目标类型
       await getPromotedObjectType().then((res) => {
         pageInfo.targetList = res
       })
+      getList()
     }
-
   }
 }
 // 暴露自己的属性供父组件使用
 :deep(.spanTitle) {
   font-size: 13px;
 }
+
+.box-hint {
+  color: #666;
+}
 </style>

src/components/businessMoudle/batchGdt/configArea/strategyGroups/ts/api.ts

     }
   })
 }
+/**更新策略组 */
+interface IEditStrategyGroups extends IAddStrategyGroups {
+  id: string
+}
+export function editStrategyGroups(params: IEditStrategyGroups) {
+  return new Promise(async (resolve,reject)=>{
+    const res: any = await http.post('/api/ad/editStrategyGroups', params)
+    if (res.errNo == 0) {
+      resolve(res.rst)
+    } else {
+      ElMessage.error(res.errMsg)
+      reject()
+    }
+  })
+}
 
 /**策略组详情 */
 interface IGetStrategyDetail {
     }
   })
 }
+
+/**获取账户投放状态 */
+interface IGetAccountStatus {
+  account_ids: string,
+}
+export function getAccountStatus(params: IGetAccountStatus) {
+  return new Promise(async (resolve,reject)=>{
+    const res: any = await http.get('/api/ad/getAccountStatus', params)
+    if (res.errNo == 0) {
+      resolve(res.rst)
+    } else {
+      ElMessage.error(res.errMsg)
+      reject()
+    }
+  })
+}

src/components/businessMoudle/batchGdt/configArea/ts/adBasic.ts

     basicInfoData.visible = false
   }
   /**广告预存信息获取 */
-  const getAdPresetsInfo = () => {
-    getAdPresets({ 'promoted_object_type': targetRef.value?.value }).then((res) => {
-      getButtonBasicOuter(res)
-      FillBackData({
-        data: res,
-        type: 'api',
-        cb: (data: { params: any, copywriting: [] }) => {
-          if (data.copywriting && Array.isArray(data.copywriting) && data.copywriting.length > 0) {
-            basicInfoData.copywriting = data.copywriting
-            for(let key in data.params) {
-              if(data.params[key] === null) {
-                data.params[key] = ''
-              }
+  const getAdPresetsInfo = (type?, info?) => {
+    if(type == 'strategyGroups'){
+      getAdBasicInfo(info)
+    }else{
+      getAdPresets({ 'promoted_object_type': targetRef.value?.value }).then((res) => {
+        getAdBasicInfo(res)
+      })
+    }
+  }
+  const getAdBasicInfo = (res) => {
+    getButtonBasicOuter(res)
+    FillBackData({
+      data: res,
+      type: 'api',
+      cb: (data: { params: any, copywriting: [] }) => {
+        if (data.copywriting && Array.isArray(data.copywriting) && data.copywriting.length > 0) {
+          basicInfoData.copywriting = data.copywriting
+          for(let key in data.params) {
+            if(data.params[key] === null) {
+              data.params[key] = ''
             }
-            basicInfoData.fillBack = data.params
-            updateHaveContent(2, -1, false)
           }
+          basicInfoData.fillBack = data.params
+          updateHaveContent(2, -1, false)
         }
-      })
+      }
     })
   }
   /**广告信息外部配置获取 */

src/components/businessMoudle/batchGdt/configArea/ts/strategyGroups.ts

 import { ref } from "vue"
+import { getStrategyDetail } from '../strategyGroups/ts/api'
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
+import _ from "lodash";
 
 interface IStrategyGroupsEvent {
   judgeEvent: (...args: any[]) => boolean,
+  aNewConfigEvent: (...args: any[]) => void,
+  getAdPresetsInfo: (...args: any[]) => void,
+  updateHaveContent: (...args: any[]) => void,
+  clearOriginalityInfo: (...args: any[]) => void,
   [propName: string]: any
 }
 
   basicInfoData,
   pageInfo,
   isMock,
-  judgeEvent
-}:IStrategyGroupsEvent) => {
+  accRef,
+  targetRef,
+  judgeEvent,
+  aNewConfigEvent,
+  getAdPresetsInfo,
+  updateHaveContent,
+  clearOriginalityInfo
+}: IStrategyGroupsEvent) => {
   const StrategyGroupsListRef = ref()
   const StrategyGroupsDialogRef = ref()
   /**打开策略组列表 */
   const openStrategyGroups = () => {
-    StrategyGroupsListRef.value?.initFun(true)
+    StrategyGroupsListRef.value?.initFun(true, pageInfo.groupsConfig)
   }
 
   /**打开保存策略组弹框 */
     })
   }
 
+  /**关闭选中的策略组 */
+  const closeSeletedGroup = () => {
+    accRef.value.value = []
+    pageInfo.accIdsList = []
+    pageInfo.accIdsList_copy_last = _.cloneDeep(pageInfo.accIdsList)
+    pageInfo.groupsConfig = {}
+    aNewConfigEvent()
+  }
+
+  /**策略组回调 */
+  const strategyGroupsUse = (info) => {
+    pageInfo.groupsConfig = info;
+    if (info.id == '' || !info.id) {
+      ElMessage.error('此策略组不存在')
+      return
+    }
+    const loading = ElLoading.service({
+      lock: true,
+      text: '策略组配置中',
+      background: 'rgba(255, 255, 255, 0.5)',
+    })
+    getStrategyDetail({
+      id: info.id
+    }).then((res: any) => {
+      loading.close()
+      console.log('111', res)
+      if (res.rule_conf) {//规则配置
+        pageInfo.RuleConfigObj = JSON.parse(res.rule_conf)
+      }
+      if (res.ad_base) {//广告基本信息
+        basicInfoData.fillBack = JSON.parse(res.ad_base)
+        getAdPresetsInfo('strategyGroups', basicInfoData.fillBack)
+      }
+      if (res?.account_ids && accRef.value) {//媒体账户
+        accRef.value.value = res?.account_ids.split(',')
+        pageInfo.accIdsList = res?.account_ids?.split(',')?.map((v) => {
+          return { 'name': v, 'id': v }
+        })
+        pageInfo.accIdsList_copy_last = _.cloneDeep(pageInfo.accIdsList)
+      }
+      if(res?.promoted_object_type && targetRef.value){//推广目标
+        pageInfo.targetValue = res?.promoted_object_type
+        targetRef.value.value = pageInfo.targetValue;
+      }
+      if(res?.creative_base){//创意基本信息
+        let creative_base = JSON.parse(res?.creative_base)
+        for(let key in originalityBasicInfoData){
+          originalityBasicInfoData[key] = creative_base[key]
+        }
+        updateHaveContent(5)
+      }else{
+        clearOriginalityInfo()
+      }
+      if(res?.targetings_info){//定向包
+        pageInfo.directObj = JSON.parse(res?.targetings_info)
+      }
+      if(res?.creative_info){//创意素材
+        let creative_info = JSON.parse(res?.creative_info)
+        for(let key in cMaterial){
+          cMaterial[key] = creative_info[key]
+        }
+      }
+    }).catch((err) => {
+      console.log(err)
+      ElMessage.error('策略组配置失败!')
+      loading.close()
+    })
+  }
   return {
     StrategyGroupsDialogRef,
     StrategyGroupsListRef,
     openStrategyGroups,
-    openSaveStrategyGroups
+    openSaveStrategyGroups,
+    closeSeletedGroup,
+    strategyGroupsUse
   }
 }