Browse Source

提交代码

zhuxinbo 4 năm trước cách đây
mục cha
commit
b4e4f321d9

+ 227 - 66
src/views/modules/BatchCreate/TouTiaoBatch.vue

@@ -114,7 +114,7 @@
                             <a-button type='primary' @click="showPriceOk"  class="ok">保存</a-button>
                             <a-button type='primary' @click="showPriceOk"  class="ok">保存</a-button>
                         </div>
                         </div>
 
 
-                        <a-button type='default'  v-if="tabkey=='group'" class="ok">更改预算</a-button>
+                        <!-- <a-button type='default'  v-if="tabkey=='group'" class="ok">更改预算</a-button> -->
                     </a-popover>
                     </a-popover>
                     <a-button type='default' @click="changebudget" v-if="tabkey=='plan'" class="ok">更改预算</a-button>
                     <a-button type='default' @click="changebudget" v-if="tabkey=='plan'" class="ok">更改预算</a-button>
                     <a-button type='default' @click="changeofferPrice" v-show="tabkey=='plan'">更改出价</a-button>
                     <a-button type='default' @click="changeofferPrice" v-show="tabkey=='plan'">更改出价</a-button>
@@ -249,6 +249,7 @@ import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
 import { JeecgListMixin } from '@/mixins/ipagination'
 import { JeecgListMixin } from '@/mixins/ipagination'
 import editableCell from './editableCell'
 import editableCell from './editableCell'
 import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
 import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
+import qs from 'qs'
 let typeValue='预算'
 let typeValue='预算'
 let modifyTableCol=[
 let modifyTableCol=[
     {
     {
@@ -594,12 +595,15 @@ export default {
             }else if(key=='idea'){
             }else if(key=='idea'){
               this.columns=ideaColumns;
               this.columns=ideaColumns;
               let params = {};
               let params = {};
-              this.refreshCreativeList();
+            //   this.refreshCreativeList();
             }
             }
         },
         },
         //跳转到批量页面
         //跳转到批量页面
         goBatch(){
         goBatch(){
             this.$router.push('/modules/BatchCreate/newGroup')
             this.$router.push('/modules/BatchCreate/newGroup')
+            if(this.tabkey=='idea'){
+                 this.$router.push('/modules/BatchCreate/newCreate')
+            }
         },
         },
         //状态改变
         //状态改变
         statusChange(value){
         statusChange(value){
@@ -622,27 +626,35 @@ export default {
         //查询按钮事件
         //查询按钮事件
         search(){
         search(){
             // console.log(this.accountID,this.dateString,this.statusValue,this.optionId);
             // console.log(this.accountID,this.dateString,this.statusValue,this.optionId);
-             this.loading=true
-            if(this.tabkey=='group'){
-                this.refreshCampaignList({
-                    accountId:this.accountID,
-                    name:this.optionId,
-                    status:this.statusValue,
-                    startDate:this.dateString[0],
-                    endDate:this.dateString[1],
-                    pageNo:this.ipagination.current
-                })
-            }else if(this.tabkey=='plan'){
-                this.getplanList({
-                    accountId:this.accountID,
-                    name:this.optionId,
-                    status:this.statusValue,
-                    startDate:this.dateString[0],
-                    endDate:this.dateString[1],
-                    pageNo:this.ipagination.current
-                })
+             
+            if(this.accountID){
+                this.loading=true
+                if(this.tabkey=='group'){
+                    this.refreshCampaignList({
+                        accountId:this.accountID,
+                        name:this.optionId,
+                        status:this.statusValue,
+                        startDate:this.dateString[0],
+                        endDate:this.dateString[1],
+                        pageNo:this.ipagination.current
+                    })
+                }else if(this.tabkey=='plan'){
+                    this.getplanList({
+                        accountId:this.accountID,
+                        name:this.optionId,
+                        status:this.statusValue,
+                        startDate:this.dateString[0],
+                        endDate:this.dateString[1],
+                        pageNo:this.ipagination.current
+                    })
+                }else if(this.tabkey=='idea'){
+
+                }
+            }else{
+                this.$message.error('请选择账户后重试')
             }
             }
             
             
+            
             // postAction('',{
             // postAction('',{
 
 
             // }).then((res)=>{
             // }).then((res)=>{
@@ -670,18 +682,42 @@ export default {
             
             
             console.log(text,record);
             console.log(text,record);
             let recordData=JSON.parse(JSON.stringify(record))
             let recordData=JSON.parse(JSON.stringify(record))
-            if(text){
-                recordData.toutiaoStatus='AD_STATUS_DISABLE'
-            }else{
-                recordData.toutiaoStatus='AD_STATUS_DELIVERY_OK'
-            }
+            
+           if(this.tabkey=='group'){
+               let ids=record.id;
+               let status=text?'disable':'enable';
+               postAction('/ctop/byteDanceCampaign/editStatus',qs.stringify({
+                   accountId:this.accountID,
+                   ids:`${ids}`,
+                   status:status,
+               })).then((res)=>{
+                   console.log(res);
+                   if(res.success){
+                       this.data=[];
+                       this.refreshCampaignList({
+                            accountId:this.accountID,
+                            name:this.optionId,
+                            status:this.statusValue,
+                            startDate:this.dateString[0],
+                            endDate:this.dateString[1],
+                            pageNo:this.ipagination.current
+                        })
+                   }
+               })
+           }else if(this.tabkey=='plan'){
+                if(text){
+                    recordData.toutiaoStatus='AD_STATUS_DISABLE'
+                }else{
+                    recordData.toutiaoStatus='AD_STATUS_DELIVERY_OK'
+                }
+                postAction('/ctop/byteDanceAdvertisePlan/edit',recordData).then((res)=>{
+                    console.log(res);
+                    if(res.success){
+                        record.status=!text;
+                    }
+                })
+           }
            
            
-           postAction('/ctop/byteDanceAdvertisePlan/edit',recordData).then((res)=>{
-               console.log(res);
-               if(res.success){
-                    record.status=!text;
-               }
-           })
         },
         },
 
 
 
 
@@ -694,26 +730,82 @@ export default {
             console.log(value)
             console.log(value)
             this.optValue=value;
             this.optValue=value;
         },
         },
+        editGroupStatus(){
+            let ids='';
+            this.selectedRows.forEach((item,index)=>{
+                if(index==0){
+                    ids=`${item.id}`
+                }else{
+                        ids+=`,${item.id}`
+                }
+                
+            })
+            let status=''
+            if(this.optValue=='pause'){
+                status='disabled'
+            }else if(this.optValue=='open'){
+                status='enable'
+            }else if(this.optValue=='delete'){
+                status='delete'
+            }
+            postAction('/ctop/byteDanceCampaign/editStatus',qs.stringify({
+                accountId:this.accountID,
+                ids,
+                status,
+            })).then((res)=>{
+                console.log(res);
+                if(res.success){
+                    this.$message.success(res.message)
+                    this.data=[];
+                    this.refreshCampaignList({
+                            accountId:this.accountID,
+                            name:this.optionId,
+                            status:this.statusValue,
+                            startDate:this.dateString[0],
+                            endDate:this.dateString[1],
+                            pageNo:this.ipagination.current
+                    })
+                    this.selectedRows=[];
+                    this.selectedRowKeys=[];
+                }
+            })
+        },
         //批量操作的确定按钮
         //批量操作的确定按钮
         isOkHandle(){
         isOkHandle(){
             this.selectDisable=true;
             this.selectDisable=true;
             if(this.optValue){
             if(this.optValue){
-                if(this.optValue=='pause'){
-                    if(this.selectedRowKeys.length>0){                       
-                        this.selectedRows.forEach((item)=>{
-                            item.toutiaoStatus='AD_STATUS_DISABLE'
-                        })
-                    }
-                }else if(this.optValue=='open'){
-                   if(this.selectedRowKeys.length>0){
+                if(this.optValue=='pause'){   
+                    if(this.tabkey=='group'){
+                        console.log(this.selectedRows);
+                        this.editGroupStatus()
                         
                         
-                        this.selectedRows.forEach((item)=>{
-                            item.toutiaoStatus='AD_STATUS_DELIVERY_OK'
-                        })
-                    }
+                    }else if(this.tabkey=='plan'){
+                        if(this.selectedRowKeys.length>0){                       
+                            this.selectedRows.forEach((item)=>{
+                                item.toutiaoStatus='AD_STATUS_DISABLE'
+                            })
+                        }
+                        this.batchEditHttp(this.selectedRows)
+                    }else if(this.tabkey=='idea'){
+
+                    }               
+                    
+                }else if(this.optValue=='open'){
+                    if(this.tabkey=='group'){
+                        this.editGroupStatus();
+                    }else if(this.tabkey=='plan'){
+                        if(this.selectedRowKeys.length>0){                       
+                            this.selectedRows.forEach((item)=>{
+                                item.toutiaoStatus='AD_STATUS_DELIVERY_OK'
+                            })
+                        }
+                    }else if(this.tabkey=='idea'){
+
+                    }    
+                  
                 }
                 }
               
               
-                this.batchEditHttp(this.selectedRows)
+                
             }
             }
             // this.selectedRows=[];
             // this.selectedRows=[];
         },
         },
@@ -721,14 +813,23 @@ export default {
         confirm(e) {
         confirm(e) {
             // console.log(e);
             // console.log(e);
                 if(this.optValue=='delete'){
                 if(this.optValue=='delete'){
-                    if(this.selectedRowKeys.length>0){                        
-                        this.selectedRows.forEach((item)=>{
-                            item.toutiaoStatus='AD_STATUS_DELETE'
-                        })
-                    }
+                     if(this.tabkey=='group'){
+                         this.editGroupStatus()
+                    }else if(this.tabkey=='plan'){
+                        if(this.selectedRowKeys.length>0){                        
+                            this.selectedRows.forEach((item)=>{
+                                item.toutiaoStatus='AD_STATUS_DELETE'
+                            })
+                        }
+                        this.batchEditHttp(this.selectedRows)
+                        this.$message.success('删除成功');
+                    }else if(this.tabkey=='idea'){
+
+                    }    
+                    
                 }
                 }
-            this.batchEditHttp(this.selectedRows)
-            this.$message.success('删除成功');
+           
+            
 
 
         },
         },
         //取消删除
         //取消删除
@@ -873,19 +974,79 @@ export default {
             const dataSource = [...this.data];
             const dataSource = [...this.data];
             const target = dataSource.find(item => item.key === key);
             const target = dataSource.find(item => item.key === key);
             if (target) {
             if (target) {
-                target[dataIndex] = value;
+                
                 console.log(target)
                 console.log(target)
                 //单独修改预算
                 //单独修改预算
-                postAction('/ctop/byteDanceAdvertisePlan/edit',target).then((res)=>{
-                    console.log(res);
-                    if(res.success){
-                        // this.data = dataSource;
-                        this.$message.success({
-                            content:'修改成功!',
-                            duration:2
+                if(this.tabkey=='group'){
+                    if(dataIndex=='name'){
+                        postAction('/ctop/byteDanceCampaign/edit',{
+                            accountId:this.accountID,
+                            id:key,
+                            campaignName:value,
+                        }).then((res)=>{
+                            console.log(res);
+                            if(res.success){
+                                // this.data = dataSource;
+                                target[dataIndex] = value;
+                                this.$message.success({
+                                   content:res.message,
+                                    duration:2
+                                })
+                            }else{
+                                this.$message.error({
+                                    content:res.message,
+                                    duration:2
+                                })
+                                 this.data=[];
+                                this.refreshCampaignList({
+                                        accountId:this.accountID,
+                                        name:this.optionId,
+                                        status:this.statusValue,
+                                        startDate:this.dateString[0],
+                                        endDate:this.dateString[1],
+                                        pageNo:this.ipagination.current
+                                })
+                            }
+                        })
+                    }else if(dataIndex=='budget'){
+                        postAction('/ctop/byteDanceCampaign/edit',{
+                            accountId:this.accountID,
+                            id:key,
+                            budget:value,
+                        }).then((res)=>{
+                            console.log(res);
+                            if(res.success){
+                                // this.data = dataSource;
+                                target[dataIndex] = value;
+                                this.$message.success({
+                                    content:res.message,
+                                    duration:2
+                                })
+                            }else{
+                                this.$message.error({
+                                    content:res.message,
+                                    duration:2
+                                })
+                            }
                         })
                         })
                     }
                     }
-                })
+                    
+                }else if(this.tabkey=='plan'){
+                    postAction('/ctop/byteDanceAdvertisePlan/edit',target).then((res)=>{
+                        console.log(res);
+                        if(res.success){
+                            // this.data = dataSource;
+                            target[dataIndex] = value;
+                            this.$message.success({
+                                content:'修改成功!',
+                                duration:2
+                            })
+                        }
+                    })
+                }else if(this.tabkey=='idea'){
+
+                }
+                
                 
                 
             }
             }
             console.log(this.data)
             console.log(this.data)
@@ -975,10 +1136,10 @@ export default {
     mounted() {
     mounted() {
         console.log(this);
         console.log(this);
       
       
-        let params = {}
-        // this.dateString=[moment().format("YYYY-MM-DD"),moment().format("YYYY-MM-DD")]
-        //初始
-        this.refreshCampaignList(params);
+        // let params = {}
+        // // this.dateString=[moment().format("YYYY-MM-DD"),moment().format("YYYY-MM-DD")]
+        // //初始
+        // this.refreshCampaignList(params);
         this.accountHttp()
         this.accountHttp()
     },
     },
     filters: {
     filters: {
@@ -1073,7 +1234,7 @@ export default {
 }
 }
 </script>
 </script>
 <style lang="scss">
 <style lang="scss">
-     .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
+    .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
         background-color: #fff;
         background-color: #fff;
         color: #333;
         color: #333;
     }
     }

+ 808 - 0
src/views/modules/BatchCreate/components/material.vue

@@ -0,0 +1,808 @@
+<template>
+  <div class="input-item material-creat">
+    <a-form-item class="row-item">
+      <a-radio-group v-model="materialType" @change="materialTypeChange" class="row-item">
+        <a-badge :count="HorizontalLargeImageListBig.length" :numberStyle="{backgroundColor: '#52c41a'} ">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
+        </a-badge>
+        <a-badge :count="HorizontalLargeImageListShu.length" :numberStyle="{backgroundColor: '#52c41a'} ">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
+        </a-badge>
+        <a-badge :count="HorizontalLargeImageListHeng.length" :numberStyle="{backgroundColor: '#52c41a'} ">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
+        </a-badge>
+        <a-badge :count="HorizontalLargeImageListZu.length" :numberStyle="{backgroundColor: '#52c41a'} "
+          v-if="creativeType=='customCreativity'">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
+        </a-badge>
+        <a-badge :count="HorizontalLargeImageListSmall.length" :numberStyle="{backgroundColor: '#52c41a'} ">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
+        </a-badge>
+        <a-badge :count="HorizontalLargeImageListBigShu.length" :numberStyle="{backgroundColor: '#52c41a'} ">
+          <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
+        </a-badge>
+      </a-radio-group>
+      <div class="bui-tabs-scroll">
+        <a-layout
+          :style="{ height: '600px',width:'700px',border:'1px solid #ccc',overflow:'auto',padding:'0 15px 10px'}">
+          <a-layout-content style="padding:10px;">
+            <div :style="{ marginBottom: '16px' }">
+              <a-button @click="addCreative()" :disabled="count">添加创意</a-button>
+              <span style="color:black;margin-left:10px"
+                v-if="creativeType == 'customCreativity'">{{countMany}}/10</span>
+              <span style="color:black;margin-left:10px" v-else-if="creativeType == 'program'">视频数量:{{vadioMany}}/12
+                图片数量:{{imgMany}}/10</span>
+            </div>
+            <a-row>
+              <a-col :span="24" v-for="(item,index) of HorizontalLargeImageList" :key="index">
+                <a-card title :ref="item">
+                  <a-icon type="close" style="float:right;cursor: pointer;" @click="deleteCreative(index)" />
+                  <div style="clear:both"></div>
+                  <div class="dynamically_add_form_item">
+                    <a-form-item class label="素材选择" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                      <!-- <upload-to-ali v-model="item.vadioUrl" :customDomain="customDomain" preview :region="region"
+                        :bucket="bucket"
+                        :accept="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?acceptVideo:acceptImage"
+                        :size="102400" :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret"></upload-to-ali> -->
+                      <!-- <uploadFile :value.sync="item.vadioUrl" :fileCount="1"
+                        :uploadType="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'video':'image'" />
+                         -->
+                      <a
+                        @click="getVideoList(item)">{{materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'选择视频':'选择图片'}}</a>
+                    </a-form-item>
+
+                    <a-form-item label="封面上传" :labelCol="labelCol" :wrapperCol="wrapperCol"
+                      v-if="(materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'||materialType=='CREATIVE_IMAGE_MODE_VIDEO')">
+                      <!-- <upload-to-ali v-model="item.imageUrl" :customDomain="customDomain" preview :region="region"
+                        :bucket="bucket" :accept="acceptImage" :size="102400" :accessKeyId="accessKeyId"
+                        :accessKeySecret="accessKeySecret"></upload-to-ali> -->
+                      <uploadFile :value.sync="item.imageUrl" :fileCount="1" uploadType="image" :multiple="false" />
+                    </a-form-item>
+
+                    <a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol"
+                      v-if="creativeType == 'customCreativity'">
+                      <a-input v-model="item.text" style="width:400px" class="rending" @change="judge(item)"></a-input>
+                    </a-form-item>
+                    <a-form-item label="动态词包" :labelCol="labelCol" :wrapperCol="wrapperCol"
+                      v-if="creativeType == 'customCreativity'">
+                      <a-tag v-for="(itemTag,indexTag) of tags" :key="indexTag" v-show="indexTag<item.many"
+                        @click="getChange(item,itemTag,index)">{{itemTag.name}}</a-tag>
+                      <span @click="showElseClick(item)">{{item.showElse?"更多":"收起"}}</span>
+                    </a-form-item>
+
+                  </div>
+                </a-card>
+              </a-col>
+            </a-row>
+          </a-layout-content>
+        </a-layout>
+      </div>
+    </a-form-item>
+    <div v-if="creativeType == 'proceduralCreativity'">
+
+      <div style="display:block;font-size: 22px;margin-bottom: 20px;">程序化创意标题</div>
+      <a-button @click="addTitle" class="row-item">添加创意标题</a-button>
+      <br />
+      <div v-for="(item,index) of titleData" :key="index">
+        <a-input style="width:55%;margin-bottom:20px" v-model="item.text" class="rending-all" @change="judge(item)">
+        </a-input>
+        <a-icon type="delete" style="margin-left:20px;cursor: pointer;" v-show="titleData.length>1"
+          @click="tetleDetele(index)" />
+        <br />
+        <a-tag style="margin-bottom:10px" v-for="(itemTag,indexTag) of tags" :key="indexTag"
+          @click="getChangeAllTitle(item,itemTag,index)">
+          {{itemTag.name}}</a-tag>
+      </div>
+    </div>
+    <!-- 创建大图横图创意 -->
+    <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000">
+
+      <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
+      <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
+        <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
+          <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" style="height:350px;">
+
+            <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
+                  您的浏览器不支持 video 标签。
+                </video> -->
+            <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
+              <img :src="item.coverUrl" alt="" style="width:100%;margin-bottom:10px">
+            </a-checkbox>
+            <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a>
+          </li>
+        </a-checkbox-group>
+      </ul>
+      <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
+        <img
+          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
+          alt="" v-if="!loadingVideoList" />
+        <img v-else src="@/views/modules/material/loading.gif" />
+      </div>
+
+      <!-- <ul class="actor-photo-list">
+          <a-checkbox-group v-model="checkArr" style="width:100%;  display: flex;padding-left: 0;"
+            @change="onChangeCheck">
+            <li v-for="(item, index) of dataSource" :key="index">
+              <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
+
+              </a-checkbox>
+            </li>
+          </a-checkbox-group>
+        </ul> -->
+      <div style="text-align:right">
+        <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
+          showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
+          @change="getDataSource" />
+      </div>
+    </a-modal>
+    <a-modal title="查看视频" v-model="visibleVideo" :width="300" :footer="null">
+      <video class="video" :src="videoUrlShow" controls="controls" style="width:100%">
+        您的浏览器不支持 video 标签。
+      </video>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+  import UploadToAli from '@femessage/upload-to-ali'
+  import uploadFile from '@/components/uploadFile.vue'
+  import {
+    postAction,
+    getAction,
+    getPackage
+  } from '@/api/manage'
+  import {
+    stopOtherVideo,
+    closeAllVideoFun
+  } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
+  import moment from 'moment'
+  import AFormItem from 'ant-design-vue/es/form/FormItem'
+  import $ from 'jquery'
+  export default {
+    name: 'BaseForm',
+    props: {
+      accountId: {
+        default () {
+          return ''
+        }
+      },
+      creativeType: {
+        type: String,
+        default () {
+          return 'customCreativity'
+        }
+      }
+    },
+    components: {
+      AFormItem,
+      //   UploadToAli,
+      uploadFile
+    },
+    data() {
+      return {
+        visibleMatemal: false,
+        visibleVideo: false,
+        videoUrlShow: "",
+        dataSource: [],
+        time: [],
+        checkVideo: [],
+        labelCol: {
+          xs: {
+            span: 24
+          },
+          sm: {
+            span: 5
+          }
+        },
+        wrapperCol: {
+          xs: {
+            span: 24
+          },
+          sm: {
+            span: 16
+          }
+        },
+        accessKeyId: 'LTAIbNbqWzSOklQV',
+        accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+        bucket: 'ctop-media',
+        region: 'oss-cn-beijing',
+        acceptImage: 'image/jpeg,image/png',
+        acceptVideo: 'video/mpeg,video/mp4',
+        customDomain: '',
+        form: this.$form.createForm(this),
+        url: {
+          userAllocationList: '/template/allocation/list',
+          insertUrl: '/template/creative/insert',
+          industryListUrl: '/template/bytedance/industry/list',
+          campaignListUrl: '/template/campaign/list',
+          budgetTemplateListUrl: '/template/budget/list',
+          deliverytargetTemplateListUrl: '/template/deliverytarget/list',
+          userorentationTemplateListUrl: '/template/userorentation/list',
+          deliverytargetTemplateGetUrl: '/template/deliveryTarget/get',
+          convertList: 'template/convert/list'
+        },
+        materialType: 'CREATIVE_IMAGE_MODE_LARGE',
+        // 创建大图横图创意
+        createLargeImageCreativeCon: true,
+        HorizontalLargeImageList: [],
+        HorizontalLargeImageListBig: [],
+        HorizontalLargeImageListHeng: [],
+        HorizontalLargeImageListShu: [],
+        HorizontalLargeImageListZu: [],
+        HorizontalLargeImageListSmall: [],
+        HorizontalLargeImageListBigShu: [],
+        horizonImageUrlColl: [], // 大图横图图片素材集合
+        horizonImageCreativeTextColl: [], // 创意标题集合
+        itemIndex: null,
+        tags: [],
+        range: null,
+        countTag: 0,
+        titleData: [{
+          text: '',
+          showElse: true,
+          titleMany: 0
+        }],
+        nowItem: null,
+        ipagination: {
+          current: 1,
+          pageSize: 5,
+          //   pageSizeOptions: ['10', '20', '30'],
+          showTotal: (total, range) => {
+            return range[0] + '-' + range[1] + ' 共' + total + '条'
+          },
+          showQuickJumper: true,
+          //   showSizeChanger: true,
+          total: 0,
+          onChange: current => {
+            // 切换分页时的回调,
+            // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+            this.ipagination.current = current
+          }
+        },
+      }
+    },
+    methods: {
+      onChangeVideo() {
+        if (this.checkVideo.length > 1) {
+          this.checkVideo.shift()
+        }
+      },
+      matemalVideo(item, index) {
+        this.visibleVideo = true
+        this.videoUrlShow = item.url
+      },
+      handleOkShow() {
+
+      },
+      getVideoList(item) {
+        this.checkVideo = []
+        if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
+          'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
+          console.log('video', item)
+          this.nowItem = item
+          this.visibleMatemal = true
+        } else {
+          console.log('image', item)
+          this.nowItem = item
+          this.visibleMatemal = true
+        }
+
+      },
+      judge(item) {
+        var re = /{(.*?)}/g
+        var array = []
+        var temp
+        while ((temp = re.exec(item.text))) {
+          array.push(temp[1])
+        }
+        console.log(array)
+        item.countTag = array.length
+      },
+      getChange(item, tag, index) {
+        this.judge(item)
+        if (item.text == '') {
+          item.countTag = 0
+        }
+        if (item.countTag >= 2) {
+          this.$message.error('最多插入两条词包')
+          // item.countTag = 2
+          return
+        }
+        var node = document.getElementsByClassName('rending')[index]
+        var v = '{' + tag.name + '}'
+
+        if (document.selection) {
+          //IE
+          node.focus()
+          var sel = document.selection.createRange()
+          sel.text = v
+          sel.select()
+          item.textIds.push(tag.creative_word_id)
+        } else if (node.selectionStart || node.selectionStart == '0') {
+          //MOZILLA/GOOGLE
+          var startPos = node.selectionStart
+          var endPos = node.selectionEnd
+          var restoreTop = node.scrollTop
+          node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
+          if (restoreTop > 0) {
+            node.scrollTop = restoreTop
+          }
+          item.text = node.value
+          item.textIds.push(tag.creative_word_id)
+          node.focus()
+          node.selectionStart = startPos + v.length
+          node.selectionEnd = startPos + v.length
+        } else {
+          //OTHER
+          node.value += v
+          item.textIds.push(tag.creative_word_id)
+          item.text = node.value
+          node.focus()
+        }
+      },
+      getChangeAllTitle(item, tag, index) {
+        this.judge(item)
+        if (item.text == '') {
+          item.countTag = 0
+        }
+        if (item.countTag >= 2) {
+          this.$message.error('最多插入两条词包')
+          // item.countTag = 2
+          return
+        }
+        var node = document.getElementsByClassName('rending-all')[index]
+        var v = '{' + tag.name + '}'
+        item.textIds.push(tag.name)
+        if (document.selection) {
+          //IE
+          node.focus()
+          var sel = document.selection.createRange()
+          sel.text = v
+          sel.select()
+        } else if (node.selectionStart || node.selectionStart == '0') {
+          //MOZILLA/GOOGLE
+          var startPos = node.selectionStart
+          var endPos = node.selectionEnd
+          var restoreTop = node.scrollTop
+          node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
+          if (restoreTop > 0) {
+            node.scrollTop = restoreTop
+          }
+          item.text = node.value
+          node.focus()
+          node.selectionStart = startPos + v.length
+          node.selectionEnd = startPos + v.length
+        } else {
+          //OTHER
+          node.value += v
+          item.text = node.value
+          node.focus()
+        }
+      },
+      showElseClick(item) {
+        item.showElse = !item.showElse
+        if (!item.showElse) {
+          item.many = this.tags.length
+        } else {
+          item.many = 3
+        }
+      },
+      materialTypeChange() {
+        let type = this.materialType
+        if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
+          // this.createLargeImageCreativeCon = false
+          this.showLargeImage = false
+          this.showLargeVerticalImage = false
+          this.showHorizonVideo = false
+          this.showVerticalVideo = false
+          this.showGroupImage = false
+          this.showSmallImage = true
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
+          // this.createLargeImageCreativeCon = true
+          this.showLargeImage = false
+          this.showLargeVerticalImage = false
+          this.showHorizonVideo = false
+          this.showVerticalVideo = false
+          this.showGroupImage = false
+          this.showSmallImage = false
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
+          // this.createLargeImageCreativeCon = false
+          this.showLargeImage = false
+          this.showLargeVerticalImage = false
+          this.showHorizonVideo = false
+          this.showVerticalVideo = false
+          this.showGroupImage = true
+          this.showSmallImage = false
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
+          // this.createLargeImageCreativeCon = false
+          this.showLargeImage = false
+          this.showLargeVerticalImage = false
+          this.showHorizonVideo = true
+          this.showVerticalVideo = false
+          this.showGroupImage = false
+          this.showSmallImage = false
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
+          // this.createLargeImageCreativeCon = false
+          this.showLargeImage = false
+          this.showLargeVerticalImage = true
+          this.showHorizonVideo = false
+          this.showVerticalVideo = false
+          this.showGroupImage = false
+          this.showSmallImage = false
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
+          // this.createLargeImageCreativeCon = false
+          this.showLargeImage = false
+          this.showLargeVerticalImage = false
+          this.showHorizonVideo = false
+          this.showVerticalVideo = true
+          this.showGroupImage = false
+          this.showSmallImage = false
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
+        }
+      },
+      //   创建大图横图创意
+      addCreative() {
+        let type = this.materialType
+        this.getTags()
+        if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
+          this.HorizontalLargeImageListSmall.push({
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
+          this.HorizontalLargeImageListBig.push({
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
+          this.HorizontalLargeImageListZu.push({
+            creativeType: this.creativeType,
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
+          this.HorizontalLargeImageListShu.push({
+            creativeType: this.creativeType,
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
+          this.HorizontalLargeImageListBigShu.push({
+            creativeType: this.creativeType,
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
+        }
+        if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
+          this.HorizontalLargeImageListHeng.push({
+            creativeType: this.creativeType,
+            typeCode: type,
+            imageUrl: '',
+            text: '',
+            textIds: [],
+            vadioUrl: '',
+            multiple: [],
+            countTag: 0,
+            many: 3,
+            showElse: true
+          })
+          this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
+        }
+      },
+      deleteCreative(index) {
+        console.log(index)
+        console.log(this.HorizontalLargeImageList)
+        this.HorizontalLargeImageList.splice(index, 1)
+      },
+      getTags() {
+        // let accountInfo = localStorage.getItem('accountInfo')
+        // console.log(groupInfo)
+
+        getAction('/bytedance/batch/creative/words/get', {
+          accountId: '1649600126891015'
+        }).then(res => {
+          if (res.code == '0') {
+            this.tags = res.creative_word
+          } else {
+            this.tags = []
+          }
+        })
+      },
+      addTitle() {
+        this.titleData.push({
+          text: '',
+          titleMany: 0,
+          textIds: []
+        })
+      },
+      tetleDetele(index) {
+        this.titleData.splice(index, 1)
+      }
+    },
+    created: function () {
+      this.$nextTick(() => {
+        this.getTags()
+      })
+    },
+    watch: {
+      creativeType: function (n, o) {
+        console.log(n, o)
+        this.HorizontalLargeImageListBig = []
+        this.HorizontalLargeImageListHeng = []
+        this.HorizontalLargeImageListShu = []
+        this.HorizontalLargeImageListZu = []
+        this.HorizontalLargeImageListSmall = []
+        this.HorizontalLargeImageListBigShu = []
+        this.HorizontalLargeImageList = []
+      },
+      materialType: function (n, o) {
+        this.materialTypeChange()
+      },
+      visibleVideo(n, o) {
+        if (!n) {
+          closeAllVideoFun()
+        }
+      }
+    },
+    computed: {
+      count: function () {
+        var bool
+        if (this.creativeType == 'customCreativity') {
+          bool =
+            this.HorizontalLargeImageListBig.length +
+            this.HorizontalLargeImageListHeng.length +
+            this.HorizontalLargeImageListShu.length +
+            this.HorizontalLargeImageListZu.length +
+            this.HorizontalLargeImageListSmall.length +
+            this.HorizontalLargeImageListBigShu.length >=
+            10 ?
+            true :
+            false
+        } else {
+          if (
+            this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
+            this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO'
+          ) {
+            bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length >= 12 ? true :
+              false
+          } else {
+            bool =
+              this.HorizontalLargeImageListBig.length +
+              this.HorizontalLargeImageListZu.length +
+              this.HorizontalLargeImageListSmall.length +
+              this.HorizontalLargeImageListBigShu.length >=
+              10 ?
+              true :
+              false
+          }
+        }
+        return bool
+      },
+      countMany: function () {
+        var bool =
+          this.HorizontalLargeImageListBig.length +
+          this.HorizontalLargeImageListHeng.length +
+          this.HorizontalLargeImageListShu.length +
+          this.HorizontalLargeImageListZu.length +
+          this.HorizontalLargeImageListSmall.length +
+          this.HorizontalLargeImageListBigShu.length
+        return bool
+      },
+      vadioMany: function () {
+        var bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length
+        return bool
+      },
+      imgMany: function () {
+        var bool =
+          this.HorizontalLargeImageListBig.length +
+          this.HorizontalLargeImageListZu.length +
+          this.HorizontalLargeImageListSmall.length +
+          this.HorizontalLargeImageListBigShu.length
+        return bool
+      }
+    }
+  }
+</script>
+
+
+<style lang="scss">
+  .material-creat {
+    .ant-layout {
+      background: white;
+    }
+  }
+
+  .dynamically_add_form_item {
+    .ant-form-item-label {
+      width: auto !important;
+    }
+
+    .ant-form-item-control-wrapper {
+      width: auto !important;
+    }
+  }
+</style>
+<style lang="scss" scoped>
+  ul,
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  .moduler {
+    background: #fff;
+    margin-bottom: 16px;
+    position: relative;
+    padding: 32px 24px 48px 32px;
+    border-radius: 4px;
+    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
+
+    .moduler-title {
+      display: flex;
+      align-items: center;
+      font-size: 22px;
+      margin-bottom: 20px;
+    }
+
+    .row-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-bottom: 32px;
+    }
+
+    .row-item:last-of-type {
+      margin-bottom: 0;
+    }
+
+    .row-item .hint-item {
+      width: 24px;
+      min-width: 24px;
+      align-self: flex-start;
+      line-height: 20px;
+      height: 20px;
+      margin-top: 5px;
+    }
+
+    .row-item .label-item {
+      position: relative;
+      align-items: flex-start;
+      align-self: flex-start;
+      line-height: 20px;
+      height: 20px;
+      margin-top: 7px;
+      width: 80px;
+      min-width: 80px;
+
+      .text-item {
+        font-size: 14px;
+        width: 60px;
+      }
+    }
+
+    .row-item .required-item {
+      width: 4px;
+      height: 4px;
+      border-radius: 2px;
+      background: #f45858;
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .row-item .input-item {
+      min-width: 480px;
+      position: relative;
+
+      // height: 35px;
+      .tip {
+        font-size: 12px;
+        color: tomato;
+      }
+
+      .inventory-tags-lists-header {
+        background-color: #F8F9FA;
+        border: 1px solid #E4E9ED;
+        height: 36px;
+        line-height: 33px;
+        border-radius: 4px 4px 0 0;
+        font-weight: bold;
+        display: flex;
+      }
+
+      .inventory-tags-lists-container {
+        border: 1px solid #E4E9ED;
+        margin-top: -1px;
+        height: 100%;
+        padding: 4px 0px;
+        border-radius: 0 0 4px 4px;
+      }
+
+      .inventory-tags-lists-item {
+        width: 100%;
+        height: 37px;
+        line-height: 37px;
+        padding-left: 12px;
+        padding-right: 12px;
+        display: flex;
+        font-size: 14px;
+        color: #333;
+      }
+    }
+  }
+
+  .opt {
+    text-align: right;
+  }
+
+  .chouzhen {
+    border-style: solid;
+    border-width: 1px;
+    border-color: #e4e4e4;
+    width: calc(20% - 10px);
+    padding: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    position: relative;
+    z-index: 99;
+    float: left
+  }
+</style>

+ 206 - 90
src/views/modules/BatchCreate/directedPackage.vue

@@ -1,32 +1,62 @@
 <template>
 <template>
     <div class="directionalPackage">
     <div class="directionalPackage">
-        <div class="tableBOX">
-            <div class="tableOpt">
-                <a-button class="search" type='primary' @click="openDirectionalPackage">新建定向包</a-button>
+        <!-- <div class="topOptions">
+           
+                <span class="OptinItem topOpt">               
+                    <a-tree-select
+                        show-search
+                        allow-clear
+                        dropdownMatchSelectWidth
+                        v-model="accountID"
+                        style="width: 60%"
+                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+                        :tree-data="treeData"
+                        placeholder="请选择具体账户"                   
+                        :filterOption='filterOption'
+                        treeNodeFilterProp='title'
+                        @change='accountIDChange'                  
+                    >
+                        
+                    </a-tree-select>
+                </span>
+                <span class="timepcik">
 
 
-             
-                <a-button class="addCol" type='primary' @click="addcolumns">自定义列</a-button>
+                </span>
+                <span class="optionBtn">
+                    <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
+                    
+                </span>
+        </div> -->
+        <div class="tableBOX">
+           
+            <div class="newOpt">
+                    <a-button class="search" type='primary' @click="openDirectionalPackage">新建定向包</a-button>
             </div>
             </div>
             <div class="tableArea">
             <div class="tableArea">
                 <a-table 
                 <a-table 
                 :columns="columns" 
                 :columns="columns" 
                 :data-source="dataSource" 
                 :data-source="dataSource" 
-                :row-selection="rowSelection" 
+                :pagination="ipagination"
                 bordered
                 bordered
                 >
                 >
-                    <template slot="campaignName" slot-scope="text,record">                                       
-                        <editableCell :text="text" slotName='campaignName' @change="onCellChange(record.key, 'campaignName', $event)" />                       
-                    </template>
-                    <span slot="groupBudget" slot-scope="text,record">
-                       <editableCell :text="text" slotName='groupBudget' @change="onCellChange(record.key, 'groupBudget', $event)" /> 
+                    
+                    <span slot="landingType" slot-scope="text">
+                        <span v-if="text=='EXTERNAL'">落地页</span>
+                        <span v-if="text=='APP_ANDROID'">应用下载-安卓</span>
+                        <span v-if="text=='APP_IOS'">应用下载-IOS</span>
+                        <span v-if="text=='AWEME'">抖音推广</span>                       
+                    </span>
+                    <span slot="deliveryRange" slot-scope="text">
+                        <span v-if="text=='DEFAULT'">默认</span>
+                        <span v-if="text=='UNION'">穿山甲</span>                     
                     </span>
                     </span>
                     
                     
                     <span slot="operation" slot-scope="text,record">
                     <span slot="operation" slot-scope="text,record">
-                        <a href="javascript:;" style="margin-right:10px">推送</a>
+                        <a href="javascript:;" style="margin-right:10px" @click="editDirectedPackage(record.id)">编辑</a>
                         <a-popconfirm
                         <a-popconfirm
                             v-if="dataSource.length"
                             v-if="dataSource.length"
                             title="确定要删除吗?"
                             title="确定要删除吗?"
-                            @confirm="() => onDelete(record.key)"
+                            @confirm="() => onDelete(record)"
                         >
                         >
                             <a href="javascript:;">删除</a>
                             <a href="javascript:;">删除</a>
                         </a-popconfirm>        
                         </a-popconfirm>        
@@ -49,44 +79,45 @@
 <script>
 <script>
 import moment from 'moment';
 import moment from 'moment';
 import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
 import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+import { JeecgListMixin } from '@/mixins/ipagination'
+import qs from 'qs'
 const columns = [
 const columns = [
   {
   {
     title: '定向包名称',
     title: '定向包名称',
-    dataIndex: 'userName',
+    dataIndex: 'name',
     align: 'center',
     align: 'center',
-    key:'userName',
-    scopedSlots: { customRender: 'userName' }
+    key:'name',
+    scopedSlots: { customRender: 'name' }
   },
   },
   {
   {
     title: '定向描述',
     title: '定向描述',
-    dataIndex: 'department',
+    dataIndex: 'description',
     align: 'center', 
     align: 'center', 
-    key: 'department',
-    scopedSlots: { customRender: 'department' }
+    key: 'description',
+    scopedSlots: { customRender: 'description' }
   },
   },
   {
   {
     title: '定向包类型',
     title: '定向包类型',
-    dataIndex: 'roleName',
-    align: 'center',
-    
-    key: 'roleName',
-    scopedSlots: { customRender: 'roleName' }
+    dataIndex: 'landingType',
+    align: 'center',   
+    key: 'landingType',
+    scopedSlots: { customRender: 'landingType' }
   },
   },
   
   
   {
   {
     title: '投放范围',
     title: '投放范围',
-    dataIndex: 'cost',
+    dataIndex: 'deliveryRange',
     align: 'center',
     align: 'center',
-    scopedSlots: { customRender: 'cost' },
-    sorter:()=>{}
+    scopedSlots: { customRender: 'deliveryRange' },
+   
   },
   },
-  {
-    title: '关联计划',
-    dataIndex: 'accountName',
-    align: 'center',
-    scopedSlots: { customRender: 'accountName' },
-    
-  },   
+    // {
+    //     title: '关联计划',
+    //     dataIndex: 'accountName',
+    //     align: 'center',
+    //     scopedSlots: { customRender: 'accountName' },
+        
+    // },   
   {
   {
     title: '操作',
     title: '操作',
     dataIndex: 'operation',
     dataIndex: 'operation',
@@ -98,65 +129,131 @@ const columns = [
 
 
 
 
 export default {
 export default {
+    mixins: [JeecgListMixin],
     data() {
     data() {
         return {
         return {
              //主页的表格
              //主页的表格
-            dataSource:[
-                {
-                    userName:'人群纠错包1',
-                    department:'运算',
-                    roleName:'2020-6-10',
-                    cost:16897546322,
-                    accountName:'伊对-01',
-                    status:true,
-                    key:0
-                },
-                {
-                    userName:'人群纠错包2',
-                    department:'运算',
-                    roleName:'2020-6-10',
-                    cost:16897322,
-                    accountName:'伊对-02',
-                    status:false,
-                    key:1
-                },
-                {
-                    userName:'人群纠错包3',
-                    department:'运算',
-                    roleName:'2020-6-10',
-                    cost:16322,
-                    accountName:'伊对-03',
-                    status:true,
-                    key:2
-                },
-            ],
+            dataSource:[],
             columns,
             columns,
-            selectedRowKeys:[],
-            rowSelection:{
-                onChange: (selectedRowKeys, selectedRows) => {
-                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-                    console.log(selectedRowKeys);
-                    this.selectedRowKeys=selectedRowKeys;
-                },
-                onSelect: (record, selected, selectedRows) => {
-                    console.log(record, selected, selectedRows);
-                    
-                },
-                onSelectAll: (selected, selectedRows, changeRows) => {
-                    console.log(selected, selectedRows, changeRows);
-                    
-                },
-            },
+            accountID:undefined,
+            treeData:[],
+            userId:''
         }
         }
     }, 
     }, 
     methods: {
     methods: {
         openDirectionalPackage(){
         openDirectionalPackage(){
             this.$router.push({path:'/BatchCreate/newDirectedPackage'})
             this.$router.push({path:'/BatchCreate/newDirectedPackage'})
         },
         },
-        //自定义列
-        addcolumns(){
+        filterOption(input, option){
+            console.log(input, option)
+            return (
+                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            );
+        },
+        accountIDChange(val){
+            console.log(val);
+            let currentData=this.treeData.filter((item)=>{
+                return item.value==val
+            })
+            console.log(currentData);
+            if(currentData.length>0){
+                this.accountID=undefined;
+                this.openID=val
+            }
+        },
+        //请求项目和账户内容
+        accountHttp(){
+            this.treeData=[];
+            this.accountID=undefined;
+            getAction('/ctop/projectMember/getProjectAccountByUserId', {}).then(res => {
+            if(res.success){
+                    // console.log(res);
+                    if(res.result){
+                        res.result.forEach((element,index) => {
+                        if(element){                  
+                            this.treeData.push({});                    
+                            this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
+                            this.treeData[index].value='project'+element.project.projectId;
+                            this.treeData[index].key=element.project.projectId;
+                            this.treeData[index].mediaId=element.project.mediaId;
+                            this.treeData[index].children=[];
+                                                
+                            if(element.account.length){
+                            element.account.forEach((ele,i)=>{
+                                this.treeData[index].children.push({});
+                                this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
+                                this.treeData[index].children[i].value=ele.accountId;
+                                this.treeData[index].children[i].key=ele.accountId;
+                            })
+                                
+                            }                           
+                        }      
+                        });
+                        // console.log(this.treeData)
+                        
+                    }
+            }
+            })
+        },
+        sort(pagination, filters, sorter, { currentDataSource }){
+            // console.log(pagination, filters, sorter)
+            // if(sorter.order == 'ascend'){
+            //     this.HttpPost(sorter.columnKey+'+')
+            // }else if(sorter.order == 'descend'){
+            //     this.HttpPost(sorter.columnKey+'-')
+            // }
+            this.ipagination.current=pagination.current;
+            getAction('/ctop/audiencePackage/queryByUserId',{
+                userId:this.userId,
+                pageNo:this.ipagination.current
+            }).then((res)=>{
+                console.log(res);
+                this.dataSource=res.result.records;
+            })
+        },
+        search(){
+            this.dataSource=[];
+            if(this.accountID){
+                
+            }else{
+                this.$message.error('请先选择账户!')
+            }
+        },
+        onDelete(record){
+            console.log(record);
+            let params=qs.stringify({
+                id:record.id
+            })
+            postAction('/ctop/audiencePackage/delete',params).then((res)=>{
+                console.log(res);
+                if(res.success){
+                    this.getTableList()
+                }else{
+                    this.$message.error('删除失败,请稍后重试!')
+                }
+            })
+        },
+        editDirectedPackage(id){
+            this.$router.push(`/BatchCreate/newDirectedPackage?id=${id}`)
+        },
+        getTableList(){
+            getAction('/ctop/audiencePackage/queryByUserId',{
+                userId:this.userId
+            }).then((res)=>{
+                console.log(res);
+                this.dataSource=res.result.records;
+                this
+            })
+        },
+    },
+    mounted() {
+         this.accountHttp();
 
 
-        }
+         let userinfo=localStorage.getItem('pro__Login_Userinfo')
+         if(userinfo){
+             this.userId=JSON.parse(userinfo).value.id
+         }
+        this.getTableList()
     },
     },
     filters: {
     filters: {
         toPercentage(val) {
         toPercentage(val) {
@@ -252,19 +349,38 @@ export default {
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .directionalPackage{
 .directionalPackage{
-    .tableBOX{
-        background: #fff;
+    .topOptions{
         padding: 15px 15px;
         padding: 15px 15px;
-        .tableOpt{
+        background-color: #fff;
+        margin-bottom: 15px;
+        .topOpt{
+            width: 100%;
             margin-bottom: 10px;
             margin-bottom: 10px;
-            .search{
-                margin-right: 15px;
-            }
-            .addCol{
-                float:right;
+        }
+    
+        .search{
+            margin-right: 15px;
+        }
+        .addCol{
+            float:right;
 
 
+        }
+        .optionBtn{
+            // display: inline-block;
+            float: right;
+            .searchBtn{
+                margin-right: 10px;
             }
             }
         }
         }
+    }
+    .tableBOX{
+        background: #fff;
+        padding: 15px 15px;
+        
+        
+        .newOpt{
+            margin-bottom: 10px;
+        }
         
         
     }
     }
 
 

+ 2 - 3
src/views/modules/BatchCreate/linkMultiSelect.vue

@@ -98,8 +98,7 @@
                                             item.checked=true;
                                             item.checked=true;
                                             return
                                             return
                                         }
                                         }
-                                  })
-                                        
+                                  })        
                                 })
                                 })
                                 this.listArr3 = []
                                 this.listArr3 = []
                                 this.title3 = ''
                                 this.title3 = ''
@@ -321,7 +320,7 @@
              
              
             }
             }
           }, 100)
           }, 100)
-
+          this.$emit('getSelectedArr',val.checkList)
 
 
         })
         })
       },
       },

+ 817 - 6
src/views/modules/BatchCreate/newCreate.vue

@@ -1,15 +1,826 @@
 <template>
 <template>
-    <div>
-chuangyi
-    </div>
+  <div class="newCreate">
+    <a-form :form="form">
+      <div class="moduler">
+        <div class="moduler-title">计划名称</div>
+        <div>
+          广告计划名称:oCPM_07_31_11:02(1673699774773292)
+          <!-- <strong>{{groupInfo.campaignName||groupInfo.name}}</strong> -->
+        </div>
+      </div>
+
+      <!-- 设置投放位置 -->
+      <div class="moduler">
+        <div class="moduler-title">设置投放位置</div>
+        <div class="ad-range">
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">广告位置</div>
+              <div class="required-item"></div>
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-radio-group v-decorator="['adposition', { initialValue:'smartInventory' }]"
+                  @change="adPositionChange">
+                  <a-radio-button value="smartInventory">优选广告位</a-radio-button>
+                  <a-radio-button value="inventoryType">按媒体指定位置</a-radio-button>
+                  <a-radio-button value="sceneInventory">按场景指定位置</a-radio-button>
+                </a-radio-group>
+              </a-form-item>
+              <div style="width: 400px; margin-top: 24px;" v-if="getFormData('adposition')=='inventoryType'">
+                <div class="inventory-tags-lists-header">
+                  <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
+                  </a-checkbox>
+                  <div class="inventory-tags-lists-name"><strong>APP名称</strong></div>
+                </div>
+                <div class="inventory-tags-lists-container">
+                  <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
+                </div>
+              </div>
+              <div style="width: 400px; margin-top: 24px;" v-show="getFormData('adposition')=='sceneInventory'">
+                <div class="inventory-tags-lists-header">
+                  <div class="inventory-tags-lists-name" style="padding-left:15px"><strong>位置选择</strong></div>
+                </div>
+                <div class="inventory-tags-lists-container">
+                  <a-radio-group v-decorator="['sceneInventory', { initialValue:'VIDEO_SCENE' }]">
+                    <a-radio :style="radioStyle" value="VIDEO_SCENE">沉浸式竖版视频场景广告位</a-radio>
+                    <a-radio :style="radioStyle" value="FEED_SCENE">信息流场景广告位</a-radio>
+                    <a-radio :style="radioStyle" value="TAIL_SCENE">视频后贴和尾帧场景广告位</a-radio>
+                  </a-radio-group>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <!-- 制作创意 -->
+      <div class="moduler">
+        <div class="moduler-title">制作创意</div>
+        <div class="ad-range">
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">创意方式</div>
+              <div class="required-item"></div>
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-radio-group v-decorator="['creativeWay', { initialValue:'customCreativity' }]">
+                  <a-radio-button value="proceduralCreativity">程序化创意</a-radio-button>
+                  <a-radio-button value="customCreativity">自定义创意</a-radio-button>
+                </a-radio-group>
+              </a-form-item>
+            </div>
+          </div>
+
+          <div class="row-item" v-if="getFormData('creativeWay')=='proceduralCreativity'">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">素材添加方式</div>
+              <div class="required-item"></div>
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-radio-group v-decorator="['creativeWay', { initialValue:'DEFAULT' }]">
+                  <a-radio-button value="proceduralCreativity">自定义上传</a-radio-button>
+                  <a-tooltip>
+                    <template slot="title">暂未开启该功能</template>
+                    <a-radio-button value="customCreativity" :disabled="true">选择程序化创意包</a-radio-button>
+                  </a-tooltip>
+                </a-radio-group>
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">创意内容</div>
+              <div class="required-item"></div>
+            </div>
+            <!-- <div class="input-item">
+              <a-form-item>
+                <p v-if="getFormData('creativeWay')=='customCreativity'">创意个数: <strong>{{}}/10</strong></p>
+                <p v-else>
+                  <span>图片创意个数: <strong>{{}}/10</strong></span>
+                  <span>视频创意个数: <strong>{{}}/6</strong></span>
+                </p>
+                <div class="bui-tabs-scroll">
+                  <a-tabs
+                    :style="{ height: '500px',width:'700px',border:'1px solid #ccc',overflow:'auto',padding:'0 15px 10px'}">
+                    <a-tab-pane v-for="i in 10" :key="i" :tab="`Tab-${i}`">
+                      <div class="no">
+                      </div>
+                      <a-button type='primary' @click="addCreate">
+                        <a-icon type="plus" />添加创意
+                      </a-button>
+                    </a-tab-pane>
+                  </a-tabs>
+                </div>
+              </a-form-item>
+            </div> -->
+            <material ref="material" :creativeType="getFormData('creativeWay')"></material>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">品牌主页</div>
+              <div class="required-item"></div>
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-radio-group v-decorator="['deliveryRange', { initialValue:'DEFAULT' }]">
+                  <a-radio-button value="DEFAULT">不开启</a-radio-button>
+                  <a-radio-button value="UNION">开启抖音主页</a-radio-button>
+                </a-radio-group>
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">应用下载详情页</div>
+              <div class="required-item"></div>
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-input v-decorator="['webUrl', {rules:validationRules.url}]" />
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">行动号召</div>
+              <div class="required-item"></div>
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-select v-decorator="[
+                'actionText', // 给表单赋值或拉取表单时,该input对应的key
+                { rules: [{ required: true, message: '请选择剪辑!' }] }
+              ]" showSearch style="width: 480px">
+                  <a-select-option :value="item" v-for="(item,i) in actionTextList" :key="i">
+                    {{item}}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">应用名</div>
+              <div class="required-item"></div>
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-input placeholder="请输入2-10个字的应用名," :maxLength='10' v-decorator="['appName']" />
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">副标题</div>
+              <!-- <div class="required-item"></div> -->
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-input placeholder="请输入2-12个字的副标题," :maxLength='12' v-decorator="['advancedCreativeTitle']" />
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">广告评论</div>
+              <div class="required-item"></div>
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-radio-group v-decorator="['isCommentDisable', { initialValue:0 }]">
+                  <a-radio-button :value="0">关闭</a-radio-button>
+                  <a-radio-button :value="1">开启</a-radio-button>
+                </a-radio-group>
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">创意展示</div>
+              <div class="required-item"></div>
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-radio-group v-decorator="['creativeDisplayMode', { initialValue:'CREATIVE_DISPLAY_MODE_CTR' }]">
+                  <a-radio-button value="CREATIVE_DISPLAY_MODE_CTR">优选模式</a-radio-button>
+                  <a-radio-button value="CREATIVE_DISPLAY_MODE_RANDOM">轮播模式</a-radio-button>
+                </a-radio-group>
+              </a-form-item>
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <!-- 创意分类 -->
+      <div class="moduler">
+        <div class="moduler-title">创意分类</div>
+        <div class="ad-range">
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">创意分类</div>
+              <div class="required-item"></div>
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-cascader :options="createOptions" :fieldNames="fieldNames" v-decorator="['thirdIndustryId']"
+                  placeholder="请选择创意分类" />
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">创意标签</div>
+              <div class="required-item"></div>
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-input v-model="createTip" @keyup.enter="onSubmit"></a-input>
+                <div v-if="createTipList.length>0">
+                  <template v-for="(tag, index) in createTipList">
+                    <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
+                      <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
+                        {{ `${tag.slice(0, 20)}...` }}
+                      </a-tag>
+                    </a-tooltip>
+                    <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
+                      {{ tag }}
+                    </a-tag>
+                  </template>
+                </div>
+
+              </a-form-item>
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <!-- 监测链接 -->
+      <div class="moduler">
+        <div class="moduler-title">监测链接</div>
+        <div class="ad-range">
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">展示</div>
+              <!-- <div class="required-item"></div> -->
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-input v-decorator="['trackUrl', {rules:validationRules.url}]" />
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">点击</div>
+              <!-- <div class="required-item"></div> -->
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-input v-decorator="['actionTrackUrl', {rules:validationRules.url}]" />
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">视频播放</div>
+              <!-- <div class="required-item"></div> -->
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-input v-decorator="['videoPlayTrackUrl', {rules:validationRules.url}]" />
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">视频播完</div>
+              <!-- <div class="required-item"></div> -->
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-input v-decorator="['videoPlayDoneTrackUrl', {rules:validationRules.url}]" />
+              </a-form-item>
+            </div>
+          </div>
+          <div class="row-item">
+            <div class="hint-item"></div>
+            <div class="label-item">
+              <div class="text-item">视频有效播放</div>
+              <!-- <div class="required-item"></div> -->
+            </div>
+            <div class="input-item">
+              <a-form-item>
+                <a-input v-decorator="['videoPlayEffectiveTrackUrl', {rules:validationRules.url}]" />
+              </a-form-item>
+            </div>
+          </div>
+
+
+        </div>
+      </div>
+
+      <div class="moduler">
+        <!-- <div class="moduler-title"></div> -->
+        <div>
+          当前账户:
+          <strong>{{accountInfo.title}}</strong>
+        </div>
+      </div>
+      <!-- 操作 -->
+      <div class="moduler">
+        <!-- <div class="moduler-title">计划名称</div> -->
+        <div class="opt">
+          <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
+          <a-button type="primary" style="margin-right:15px" @click="goSave">保存并关闭</a-button>
+        </div>
+      </div>
+    </a-form>
+
+  </div>
 </template>
 </template>
 
 
 <script>
 <script>
-    export default {
-        
-    }
+  import moment from 'moment'
+  import {
+    getAction,
+    postAction,
+    downFile,
+    downFilePost
+  } from '@/api/manage'
+  import material from './components/material'
+
+  import qs from 'qs'
+  const plainOptions = [{
+      value: 'INVENTORY_FEED',
+      label: '今日头条'
+    },
+    {
+      value: 'INVENTORY_VIDEO_FEED',
+      label: '西瓜视频'
+    },
+    {
+      value: 'INVENTORY_AWEME_FEED',
+      label: '抖音'
+    },
+    {
+      value: 'INVENTORY_HOTSOON_FEED',
+      label: '抖音火山版'
+    },
+    {
+      value: 'INVENTORY_UNION_SLOT',
+      label: '穿山甲'
+    },
+  ];
+
+  export default {
+    data() {
+      return {
+        planInfo: {},
+        groupInfo: {},
+        accountInfo: {},
+        createTip: "",
+        createTipList: [],
+        actionTextList: [],
+        radioStyle: {
+          display: 'block',
+          height: '30px',
+          lineHeight: '30px',
+          padding: '0 15px'
+        },
+        checkedList: [],
+        indeterminate: false,
+        checkAll: false,
+        plainOptions,
+        form: this.$form.createForm(this),
+        positionvalue: undefined,
+        validationRules: {
+          url: [{
+              required: true,
+              message: '下载链接必须填写',
+            },
+            {
+              validator: this.validateURL,
+            },
+          ],
+        },
+        createType: undefined, //创意分类的页面
+        createOptions: [], //创意分类的数组
+        fieldNames: {
+          label: 'name',
+          value: 'id',
+          children: 'children'
+        }
+      }
+    },
+    components: {
+      material
+    },
+    methods: {
+      handleClose(removedTag) {
+        const tags = this.createTipList.filter(tag => tag !== removedTag)
+        this.createTipList = tags
+      },
+      onSubmit() {
+        //   this.createTip
+        if (this.createTip != '') {
+          console.log(this.createTip.split(/\s+/))
+          if (this.createTipList.length > 20) {
+            this.$message.error('最多只能建立20个创意标签')
+          } else {
+            this.createTipList.push(...this.createTip.split(/\s+/))
+          }
+          this.createTip = ''
+        }
+      },
+      onChange(checkedList) {
+        this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
+        this.checkAll = checkedList.length === plainOptions.length;
+      },
+      onCheckAllChange(e) {
+        let valueOption = [];
+        this.plainOptions.forEach((item) => {
+          valueOption.push(item.value)
+        })
+        Object.assign(this, {
+          checkedList: e.target.checked ? valueOption : [],
+          indeterminate: false,
+          checkAll: e.target.checked,
+        });
+      },
+      // tab切换
+      tabcallback() {
+
+      },
+      // 添加创意
+      addCreate() {
+
+      },
+      // //获取表单的某一个属性值
+      getFormData(className) {
+        return this.form.getFieldValue(className)
+      },
+      // 广告位置选择改变
+      adPositionChange(val) {
+        console.log(val)
+        if (val.target.value == 'smartInventory') {
+          this.form.setFieldsValue({
+            smartInventory: 1,
+            inventoryType: [],
+
+          })
+        } else if (val.target.value == 'inventoryType') {
+          this.form.setFieldsValue({
+            smartInventory: 0,
+            inventoryType: this.checkedList,
+          })
+        } else if (val.target.value == 'sceneInventory') {
+          this.form.setFieldsValue({
+            smartInventory: 0,
+            inventoryType: [],
+          })
+          console.log(this.getFormData('sceneInventory'))
+        }
+
+      },
+      // 注册表单的字段
+      initFormValue() {
+        this.form.getFieldDecorator('inventoryType')
+        this.form.getFieldDecorator('smartInventory')
+        // this.form.getFieldDecorator('sceneInventory')
+      },
+      // 验证网址
+      IsURL(res) {
+        //   var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
+        var strRegex =
+          /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+(.+[A-Za-z0-9-~\/])+$/
+        var re = new RegExp(strRegex)
+        // console.log(re.test(res))
+        if (re.test(res)) {
+          return true
+        } else {
+          return false
+        }
+      },
+      validateURL(rule, value, callback) {
+        // console.log(rule, value, callback);
+
+        if (this.IsURL(value)) {
+          callback()
+        } else if (value && !this.IsURL(value)) {
+          callback('链接地址无法访问,请正确输入')
+        } else {
+          //     callback('下载链接必须填写')
+        }
+      },
+      goBack() {
+        this.$router.replace('/modules/BatchCreate/TouTiaoBatch')
+        this.$bus.$emit('remove', '/modules/BatchCreate/newCreate')
+      },
+      goSave() {
+        this.$nextTick(() => {
+          var dataCreatives = this.$refs.material.HorizontalLargeImageListBig.concat(
+            this.$refs.material.HorizontalLargeImageListHeng,
+            this.$refs.material.HorizontalLargeImageListShu,
+            this.$refs.material.HorizontalLargeImageListZu,
+            this.$refs.material.HorizontalLargeImageListSmall,
+            this.$refs.material.HorizontalLargeImageListBigShu
+          )
+
+          console.log(dataCreatives, this.$refs.material.titleData)
+
+          //   "inventoryType": ["", "按媒体指定位置"],
+          //   "smartInventory": "类型数字:是否优选广告位 0,1",
+          //   "sceneInventory": "场景广告位",
+          //   "adKeywords": ["单个最多10个字符", "最多20个", "创意标签"],
+          //   "thirdIndustryId": "10,数字类型,创意分类",   最后id
+          //   "creativeDisplayMode": "创意展现方式:CREATIVE_DISPLAY_MODE_CTR(优选)CREATIVE_DISPLAY_MODE_RANDOM(轮播)",
+          //   "trackUrl": "展示监测链接",
+          //   "actionTrackUrl": "点击监测链接",
+          //   "videoPlayEffectiveTrackUrl": "视频有效播放监测链接",
+          //   "videoPlayDoneTrackUrl": "视频播放完毕监测链接",
+          //   "videoPlayTrackUrl": "视频播放监测链接",
+          //   "isCommentDisable": "数字类型 是否关闭评论0 开启 1关闭",
+          //   "closeVideoDetail": "数字类型,是否关闭视频详情页落地页 0,1",
+          //   "generateDerivedAd": "数字类型,是否开启衍生计划 0,1 默认0不开启",
+          //   "source": "广告来源 landType=app &&downloadType=EXTERNAL_URL 时必填",
+          //   "appName": "应用名 当计划 download_type为DOWNLOAD_URL时, 必填"
+          this.form.validateFieldsAndScroll((err, values) => {
+            if (!err) {
+              var params = {
+                ...values
+              }
+              params.thirdIndustryId = params.thirdIndustryId.pop()
+              var dataCreatives = this.$refs.material.HorizontalLargeImageListBig.concat(
+                this.$refs.material.HorizontalLargeImageListHeng,
+                this.$refs.material.HorizontalLargeImageListShu,
+                this.$refs.material.HorizontalLargeImageListZu,
+                this.$refs.material.HorizontalLargeImageListSmall,
+                this.$refs.material.HorizontalLargeImageListBigShu
+              )
+              console.log('Received values of form: ', values)
+              console.log(dataCreatives)
+              if (this.getFormData('creativeWay') == 'proceduralCreativity') {
+                //   params.titles = this.titleData
+                params.titles = this.$refs.material.titleData
+              }
+              //   postAction('/bytedance/batch/create/creative', {
+              //     accountId: '1649600126891015',
+              //     adIds: ["1673732908509245"],
+              //     ...values,
+              //     creatives: dataCreatives
+              //   }).then((res) => {
+              //     console.log(res)
+              //     if (res.success) {
+              //       if (res.code == 0) {} else {
+              //         this.$message.error(res.message)
+              //       }
+
+              //     } else {
+              //       this.$message.error('网络开小差了,等会再试试')
+              //     }
+              //   })
+            } else {
+              console.log(err)
+            }
+          })
+
+        })
+      }
+    },
+    mounted() {
+      this.initFormValue();
+
+      getAction('/bytedance/batch/industry/list').then(res => {
+        this.createOptions = res.data
+
+      })
+
+      this.$bus.$emit('remove', '/modules/BatchCreate/newPlan')
+      let planInfo = localStorage.getItem('planInfo')
+      // console.log(planInfo)
+      if (planInfo) {
+        this.planInfo = JSON.parse(planInfo)
+      }
+      console.log(this.planInfo)
+      let groupInfo = localStorage.getItem('groupInfo')
+      // console.log(groupInfo)
+      if (groupInfo) {
+        this.groupInfo = JSON.parse(groupInfo)
+      }
+      let accountInfo = localStorage.getItem('accountInfo')
+      // console.log(groupInfo)
+      if (accountInfo) {
+        this.accountInfo = JSON.parse(accountInfo)
+      }
+
+      getAction('/bytedance/batch/action/text', {
+        accountId: "1649600126891015",
+        landType: "APP"
+      }).then(res => {
+        if (res.code == '0') {
+          this.actionTextList = res.data
+        } else {
+          this.actionTextList = []
+        }
+
+      })
+    },
+  }
 </script>
 </script>
 
 
+<style lang="scss">
+  .ant-tooltip-inner,
+  .ant-tooltip,
+  .ant-tooltip-arrow::before {
+    background-color: #fff;
+    color: #333;
+  }
+
+  .ant-tooltip-inner {
+    span {
+      display: block;
+
+    }
+  }
+
+  .ant-tooltip {
+    max-width: 450px;
+  }
+
+  .newCreate {
+    .ant-radio-button-wrapper {
+      min-width: 80px;
+      text-align: center;
+    }
+
+    .ant-form-item {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 14px;
+      font-variant: tabular-nums;
+      line-height: 1.5;
+      list-style: none;
+      -webkit-font-feature-settings: 'tnum';
+      font-feature-settings: 'tnum';
+      vertical-align: top;
+    }
+
+    .directedBody {
+      .ant-form-item {
+        margin-bottom: 20px;
+      }
+    }
+
+    .ant-checkbox-wrapper,
+    .ant-checkbox-group-item {
+      display: block;
+      padding: 5px 15px;
+    }
+
+    .ant-checkbox-wrapper:first-child {
+      padding: 0 15px 5px;
+    }
+  }
+</style>
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+  .newCreate {
+    font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
+    color: #333;
+
+    ul,
+    li {
+      margin: 0;
+      padding: 0;
+    }
+
+    .moduler {
+      background: #fff;
+      margin-bottom: 16px;
+      position: relative;
+      padding: 32px 24px 48px 32px;
+      border-radius: 4px;
+      box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
 
 
+      .moduler-title {
+        display: flex;
+        align-items: center;
+        font-size: 22px;
+        margin-bottom: 20px;
+      }
+
+      .row-item {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-bottom: 32px;
+      }
+
+      .row-item:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .row-item .hint-item {
+        width: 24px;
+        min-width: 24px;
+        align-self: flex-start;
+        line-height: 20px;
+        height: 20px;
+        margin-top: 5px;
+      }
+
+      .row-item .label-item {
+        position: relative;
+        align-items: flex-start;
+        align-self: flex-start;
+        line-height: 20px;
+        height: 20px;
+        margin-top: 7px;
+        width: 80px;
+        min-width: 80px;
+
+        .text-item {
+          font-size: 14px;
+          width: 60px;
+        }
+      }
+
+      .row-item .required-item {
+        width: 4px;
+        height: 4px;
+        border-radius: 2px;
+        background: #f45858;
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      .row-item .input-item {
+        min-width: 480px;
+        position: relative;
+
+        // height: 35px;
+        .tip {
+          font-size: 12px;
+          color: tomato;
+        }
+
+        .inventory-tags-lists-header {
+          background-color: #F8F9FA;
+          border: 1px solid #E4E9ED;
+          height: 36px;
+          line-height: 33px;
+          border-radius: 4px 4px 0 0;
+          font-weight: bold;
+          display: flex;
+        }
+
+        .inventory-tags-lists-container {
+          border: 1px solid #E4E9ED;
+          margin-top: -1px;
+          height: 100%;
+          padding: 4px 0px;
+          border-radius: 0 0 4px 4px;
+        }
+
+        .inventory-tags-lists-item {
+          width: 100%;
+          height: 37px;
+          line-height: 37px;
+          padding-left: 12px;
+          padding-right: 12px;
+          display: flex;
+          font-size: 14px;
+          color: #333;
+        }
+      }
+    }
+
+    .opt {
+      text-align: right;
+    }
+  }
 </style>
 </style>

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 526 - 164
src/views/modules/BatchCreate/newDirectedPackage.vue


+ 410 - 12
src/views/modules/BatchCreate/newGroup.vue

@@ -1,40 +1,438 @@
 <template>
 <template>
     <div class="newGroup">
     <div class="newGroup">
         <div class="steps">
         <div class="steps">
-            <a-steps direction="vertical" :current="0">
+            <!-- <a-steps direction="vertical" :current="0">
                 <a-step title="广告组" description="推广目的" />
                 <a-step title="广告组" description="推广目的" />
                 <a-step title="广告计划"  description="所属广告组  投放范围  投放目标 用户定向 预算与出价 计划名称" />
                 <a-step title="广告计划"  description="所属广告组  投放范围  投放目标 用户定向 预算与出价 计划名称" />
                 <a-step title="广告创意" description="设置投放位置 制作创意 创意分类 监测链接" />
                 <a-step title="广告创意" description="设置投放位置 制作创意 创意分类 监测链接" />
-            </a-steps>
+            </a-steps> -->
         </div>
         </div>
         
         
-        <div class="currentAccount">
-
+        <div class="currentOPt">
+            <div class="currentAccount">
+                选择账号: 
+                <a-tree-select
+                    show-search
+                    allow-clear
+                    dropdownMatchSelectWidth
+                    v-model="accountID"
+                    style="width: 60%"
+                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+                    :tree-data="treeData"
+                    placeholder="请选择具体账户"                   
+                    :filterOption='filterOption'
+                    treeNodeFilterProp='title'
+                    @change='accountIDChange'                  
+                >
+                    
+                </a-tree-select>
+            </div>
+            <div class="tabBody">
+                <a-tabs default-active-key="create" @change="tabChange">
+                    <a-tab-pane key="create" tab="新建广告组">
+                        <a-form :form="form">
+                            <a-form-item label="推广目的" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+                                <a-radio-group   v-decorator="['landingType',{initialValue:'APP' }]" @change="landingTypeChange">
+                                    <a-radio-button value="APP">应用推广</a-radio-button>
+                                    <a-radio-button value="LINK">销售线索收集</a-radio-button>                                   
+                                </a-radio-group>
+                            </a-form-item>
+                            <a-form-item label="广告主预算" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+                                <a-radio-group  v-decorator="['budgetMode',{initialValue:'BUDGET_MODE_INFINITE' }]">
+                                    <a-radio-button value="BUDGET_MODE_INFINITE">不限</a-radio-button>
+                                    <a-radio-button value="BUDGET_MODE_DAY">指定日预算</a-radio-button>                                   
+                                </a-radio-group>
+                            </a-form-item>
+                            <a-form-item v-if="getFormData('budgetMode')=='BUDGET_MODE_DAY'" label="日预算" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+                                <a-input-number  :max="9999999.99" :step="0.1"  v-decorator="['budget',{initialValue:1000 }]" @change="budgetChange" @blur='budgetBlur' />
+                                <span class="tip" v-if="getFormData('budget')<1000">预算不少于1000.00元,不超过9999999.99元,请正确输入</span>
+                            </a-form-item>
+                            <a-form-item label="广告主名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+                               <a-input   v-decorator="['campaignName', { rules: [{ required: true ,message: '广告组名称必须填写'}] }]" />
+                            </a-form-item>
+                            <a-form-item label="广告组状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+                               <a-radio-group  v-decorator="['operation',{initialValue:'enable' }]">
+                                    <a-radio-button value="enable">开</a-radio-button>
+                                    <a-radio-button value="disable">关</a-radio-button>                                   
+                                </a-radio-group>
+                            </a-form-item>
+                           
+                        </a-form>
+                    </a-tab-pane>
+                    <a-tab-pane key="exist" tab="选择已有广告组" forceRender>
+                        <div class="selectedExist">
+                            <a-input v-model="selectedCampaignValue" class="input" placeholder="请输入广告组id或名称" @change="selectedCampaign">
+                                <a-icon slot="addonAfter" type="search" />
+                            </a-input>
+                            <div class="campaign-have-list">
+                                <div class="campaign-have-header">列表</div>
+                                <div class="hasAccountID" v-if="accountID">
+                                    <a-spin :spinning="spinning">
+                                        <ul v-if="campaignHaveList.length>0">
+                                            <li class="ad-d-flex ad-d-flex-between" v-for="(item,index) in campaignHaveList" :key="index" @click="goPlan(item)">
+                                                <span class="info">{{item.name}}</span>
+                                                <span class="landing-type">信息流_{{item.landingType_dictText}}</span>
+                                            </li>
+                                        </ul>
+                                        <div v-else class="noAccountID">
+                                            暂无数据
+                                        </div>
+                                    </a-spin>
+                                </div>
+                                <div class="noAccountID" v-else>
+                                    选择账户后,才能选择已有广告组
+                                </div>
+                                
+                            </div>
+                            <div class="fenye" v-if="totalPage">
+                                <a-pagination :current='currentPage' size='small' :total='totalPage' :pageSize='10' @change="pageNoChange" />
+                            </div>
+                        </div>
+                        
+                        
+                    </a-tab-pane>
+                
+                </a-tabs>
+            </div>
+            <div class="creatBody">
+                <a-button type='default' class="goback" @click="goback">返回</a-button>
+                <a-button type='danger' @click="nextHandle">创建并下一步</a-button>
+            </div>
         </div>
         </div>
     </div>
     </div>
 </template>
 </template>
 
 
 <script>
 <script>
+
+import moment from 'moment';
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+import qs from 'qs'
+const formItemLayout = {
+  labelCol: { span: 2 },
+  wrapperCol: { span: 8 },
+};
+
 export default {
 export default {
     data() {
     data() {
         return {
         return {
-            
+            tabKey:'create',
+            accountID:undefined,
+            treeData:[],
+            formItemLayout,
+            form: this.$form.createForm(this),
+            selectedCampaignValue:undefined,
+            spinning:false,
+            campaignHaveList:[],
+            currentPage:1,
+            totalPage:0
         }
         }
     },
     },
     methods: {
     methods: {
-        
+        tabChange(key){
+            console.log(key);
+            this.tabKey=key;
+            
+        },
+        accountIDChange(val){
+            console.log(val,this.accountID);
+            let currentData=this.treeData.filter((item)=>{
+                return item.value==val
+            })
+            // console.log(currentData);
+            if(currentData.length>0){
+                this.accountID=undefined;
+                this.openID=val
+            }
+            this.getExsitGroupList();
+            console.log(this.treeData)
+            this.treeData.forEach((item)=>{
+                item.children.forEach(ele=>{
+                    if(ele.value==val){
+                        localStorage.setItem('accountInfo',ele)
+                    }
+                })
+            })
+        },
+        getExsitGroupList(){
+            this.spinning=true;
+            getAction('/ctop/byteDanceCampaign/list',{
+                accountId:this.accountID,
+                pageNo:this.currentPage,
+                name:this.selectedCampaignValue
+            }).then(res=>{
+                console.log(res)
+                if(res.success){
+                    this.spinning=false;
+                    this.totalPage=res.result.total;
+                    this.campaignHaveList=res.result.records;
+                }
+            })
+        },
+        filterOption(input, option){
+            console.log(input, option)
+            return (
+                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            );
+        },
+         //请求项目和账户内容
+        accountHttp(){
+            this.treeData=[];
+            this.accountID=undefined;
+            getAction('/ctop/projectMember/getProjectAccountByUserId', {}).then(res => {
+            if(res.success){
+                    // console.log(res);
+                    if(res.result){
+                        res.result.forEach((element,index) => {
+                        if(element){                  
+                            this.treeData.push({});                    
+                            this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
+                            this.treeData[index].value='project'+element.project.projectId;
+                            this.treeData[index].key=element.project.projectId;
+                            this.treeData[index].mediaId=element.project.mediaId;
+                            this.treeData[index].children=[];
+                                                
+                            if(element.account.length){
+                            element.account.forEach((ele,i)=>{
+                                this.treeData[index].children.push({});
+                                this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
+                                this.treeData[index].children[i].value=ele.accountId;
+                                this.treeData[index].children[i].key=ele.accountId;
+                            })
+                                
+                            }                           
+                        }      
+                        });
+                        // console.log(this.treeData)
+                        
+                    }
+            }
+            })
+        },
+
+
+        //获取表单的某一个属性值
+        getFormData(className) {
+            return this.form.getFieldValue(className)
+        },
+        //推广目的改变
+        landingTypeChange(e){
+            console.log(e.target)
+            if(e.target.value=='APP'){
+                this.form.setFieldsValue({
+                    campaignName:`应用推广_${moment().format('MM_DD_HH:SS')}`
+                })
+            }else if(e.target.value=='LINK'){
+                this.form.setFieldsValue({
+                    campaignName:`销售线索收集_${moment().format('MM_DD_HH:SS')}`
+                })
+            }
+        },
+        //预算改变
+        budgetChange(val){
+            // console.log(val)           
+        },
+        budgetBlur(e){
+            console.log(e.target)
+            if(e.target.value==0){
+                this.form.setFieldsValue({
+                    budget:1000.0
+                })
+            }
+        },
+        nextHandle(){
+           if(this.accountID){
+                this.form.validateFields((err, values) => {
+                    if (!err) {
+                        console.log('Received values of form: ', values);
+                        if(values.budgetMode== "BUDGET_MODE_INFINITE" ){
+                            postAction('/ctop/byteDanceCampaign/add',qs.stringify({
+                                accountId:this.accountID,
+                                ...values
+                            })).then(res=>{
+                                console.log(res)
+                                if(res.success){
+                                    this.$message.success('广告组创建成功,2s后将跳转到新建计划页面');
+                                    values.id=res.campaign_id;
+                                    values.accountId=this.accountID
+                                    let groupInfo=JSON.stringify(values)
+                                    localStorage.setItem('groupInfo',groupInfo)
+                                    setTimeout(() => {
+                                        this.$router.replace(`/modules/BatchCreate/newPlan`)
+                                    },2000);                                
+                                }else{
+                                    this.$message.error(res.message) 
+                                }
+                            })
+                        }else if(values.budgetMode== "BUDGET_MODE_DAY" && (values.budget<1000||values.budget>9999999.99 )){
+                            this.$message.error('日预算不少于1000.00元,不超过9999999.99元,请正确输入')
+                        }
+                    }
+                });
+           }else{
+               this.$message.error('请选择具体的账户')
+           }
+            
+        },
+        goback(){
+            this.$router.replace('/modules/BatchCreate/TouTiaoBatch')
+            this.$bus.$emit('remove', '/modules/BatchCreate/newGroup')
+        },
+
+        selectedCampaign(e){
+            // console.log(e.target.value,this.selectedCampaignValue);
+            if(this.accountID){
+                this.getExsitGroupList();
+            }else{
+                this.$message.warning('请选择账户后重试!')
+                this.selectedCampaignValue=undefined;
+            }
+        },
+        goPlan(item){
+            console.log(item)
+            let groupInfo=JSON.stringify(item)
+            localStorage.setItem('groupInfo',groupInfo)
+            this.$router.replace(`/modules/BatchCreate/newPlan`)
+        },
+        //分页页码改变
+        pageNoChange(){
+
+        }
     },
     },
+    mounted() {
+        this.accountHttp();
+        let name=this.getFormData('landingType')
+        if(name=='APP'){
+            this.form.setFieldsValue({
+                campaignName:`应用推广_${moment().format('MM_DD_HH:SS')}`
+            })
+        }else{
+            this.form.setFieldsValue({
+                campaignName:`销售线索收集_${moment().format('MM_DD_HH:SS')}`
+            })
+        }
+    },
+    // beforeCreate() {
+    //     this.form = this.$form.createForm(this, { name: 'validate_other' });
+    // },
 }
 }
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .newGroup{
 .newGroup{
-    background: #FFF;
-    padding: 20px;
-    display: flex;
-    
-    .steps{
-        width: 8%;
+    ul, li {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    // background: rgb(249,249,249);
+
+    // padding: 20px; 
+    .currentOPt{             
+        .currentAccount{
+            height: 70px;
+            padding: 20px 30px;
+            background: #fff;
+            margin-bottom: 20px;
+        }
+        .tabBody{
+            background: #fff;
+            margin-bottom: 20px;
+            padding: 20px 30px;
+            .tip{
+                font-size: 12px;
+                color: tomato;
+                display: block;
+                margin-top: 5px;
+                height: 20px;
+                line-height: 20px;
+                
+            }
+            .selectedExist{
+                width: 600px;
+                .input{
+                    margin-bottom:16px ;
+                }
+                .campaign-have-list{
+                    font-family: PingFangSC-Regular;
+                    font-size: 14px;
+                    color: #333;
+                    border: 1px solid #DADFE3;
+                    border-radius: 4px;
+                    margin-bottom: 16px;
+                    height: 388px;
+                    .campaign-have-header {
+                        height: 38px;
+                        width: 100%;
+                        padding-left: 13px;
+                        line-height: 38px;
+                        background: #f8f9fa;
+                        border-radius: 4px 4px 0px 0px;
+                        border-bottom: 1px solid #DADFE3;
+                    }
+                    .campaign-have-list ul {
+                        width: 100%;
+                        height: 350px;
+                        padding-top: 6px;
+                        
+                    }
+                    li{
+                        padding: 6px 10px;
+                        cursor: pointer;
+                    }
+                    li:hover{
+                        background: #EDF1F5;
+                    }
+                    .ad-d-flex-between {
+                        justify-content: space-between !important;
+                    }
+
+                    .ad-d-flex, .ad-btn {
+                        display: flex;
+                        align-items: center;
+                    }
+                    .byted-loading-v {
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                        bottom: 0;
+                        left: 0;
+                        z-index: 996;
+                        background-color: hsla(0,0%,96%,.9);
+                    }
+                    .info{
+                        width: 60%;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                    .landing-type {
+                        color: #999;
+                        font-size: 12px;
+                        white-space: nowrap;
+                    }
+                }
+                .noAccountID{
+                    font-size: 14px;
+                    text-align: center;
+                    color: #999;
+                    line-height: 388px;
+                }
+                .fenye{
+                    height: 60px;
+                    padding-top: 12px;
+                    text-align: right;
+                }
+            }
+        }
+        .creatBody{
+            background: #fff;
+            margin-bottom: 20px;
+            padding: 20px 30px;
+            text-align: right;
+            .goback{
+                margin-right: 20px;
+            }
+        }
     }
     }
 }
 }
 </style>
 </style>

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1311 - 6
src/views/modules/BatchCreate/newPlan.vue


+ 21 - 8
src/views/modules/BatchCreate/radioCheck.vue

@@ -27,27 +27,40 @@ export default {
         }
         }
     },
     },
    
    
-    props:['checkArr'],
+    props:['checkArr','selectArr'],
     watch:{
     watch:{
         checkArr:{
         checkArr:{
             handler(n,o){
             handler(n,o){
-                // console.log(n==o)
+                // console.log(n,o)
+                this.selectValue=[];
+                let i=0;
                 this.checkArr.forEach((item,index)=>{
                 this.checkArr.forEach((item,index)=>{
-                    if(!item.disabled){
+                    // console.log(item)
+                    if(item.disabled==false){
+                        i++;
                         this.selectValue[0]=item.value;
                         this.selectValue[0]=item.value;
                         // console.log(this.selectValue)
                         // console.log(this.selectValue)
-                    }else if(item.disabled==false){
-                        this.selectValue[0]='';
                     }else if(item.disabled==undefined){
                     }else if(item.disabled==undefined){
-                        this.selectValue[0]='';
+                        if(item.checked){
+                            this.selectValue.push(item.value)
+                        }
+                        
                     }
                     }
                 })
                 })
-                 console.log(this.selectValue)
+                if(this.selectValue.length==0){
+                    this.selectValue=[''];
+                }
+                if(i==3){
+                    this.selectValue[0]='';
+                }
+                // console.log(this.selectValue)
+                this.$emit('getSonValue',this.selectValue)
             },
             },
             deep:true,
             deep:true,
             // immediate: true
             // immediate: true
 
 
-        }
+        },
+        
     },
     },
     methods: {
     methods: {
         //单选多选的事件
         //单选多选的事件

+ 244 - 167
src/views/modules/BatchCreate/singleLayerSelecte.vue

@@ -1,192 +1,269 @@
 <template>
 <template>
-    <div class="singleLayersSelecte">
-        <div class="selectBox">
-            <div class="selectLeft">
-                <div class="title">{{title}}</div>
-                <div class="selectBox1">
-                    <span class="selectLists">
-                        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" > 全选 </a-checkbox>
-                    </span> 
-                    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="checkGroupChange" class="selectList" ></a-checkbox-group>
-                </div>
-            </div>
-            <div class="selectRight">
-                <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
-                <div class="selectBox1">
-                    <span class="selectListitem" v-for="(item,index) in checkedShowList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
-                </div>
-            </div>
+  <div class="singleLayersSelecte">
+    <div class="selectBox">
+      <div class="selectLeft">
+        <div class="title">{{title}}</div>
+        <div class="selectBox1">
+          <span class="selectLists">
+            <a-checkbox
+              :indeterminate="indeterminate"
+              :checked="checkAll"
+              @change="onCheckAllChange"
+            >全选</a-checkbox>
+          </span>
+          <a-checkbox-group
+            v-model="checkedList"
+            :options="plainOptions"
+            @change="checkGroupChange"
+            class="selectList"
+          ></a-checkbox-group>
         </div>
         </div>
+      </div>
+      <div class="selectRight">
+        <div class="title">
+          已选
+          <a-button class="clear" type="link" @click="clearAll">清空</a-button>
+        </div>
+        <div class="selectBox1">
+          <span class="selectListitem" v-for="(item,index) in checkedShowList" :key="index">
+            {{item}}
+            <a-icon type="close" id="close" @click="deleteItem(item)" />
+          </span>
+        </div>
+      </div>
     </div>
     </div>
+  </div>
 </template>
 </template>
 
 
 <script>
 <script>
-import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
 // const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
 // const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
 // const defaultCheckedList = ['Apple', 'Orange'];
 // const defaultCheckedList = ['Apple', 'Orange'];
-    export default {
-        data() {
-            return {
-               //选择框
-                checkedList: [],
-                checkedShowList:[],
-                indeterminate: false,
-                checkAll: false,
-                plainOptions:[],
-                valueOptions:[],
-            }
+export default {
+  data() {
+    return {
+      //选择框
+      checkedList: [],
+      checkedShowList: [],
+      indeterminate: false,
+      checkAll: false,
+      plainOptions: [],
+      valueOptions: [],
+    }
+  },
+  watch: {
+    checkedList: {        
+        handler(n,o){
+            
+                this.$emit('getCheckedList', this.checkedList)
+            
         },
         },
-        watch: {
-            checkedList:{
-                handler(n,o){
-                    if(n!=o){                      
-                        this.$emit('getCheckedList',n)            
-                    }
-                },
-                deep:true,
-                immediate:true,
-            }
+        deep: true,
+        immediate: true,
+    },
+    listArr:{
+        handler(n,o){
+            this.plainOptions = this.listArr
+            this.listArr.forEach((item) => {
+                    this.valueOptions.push(item.value)
+            })
         },
         },
-        props:['title','listArr'],
-        methods: {
-                //手机品牌多选的事件
-            checkGroupChange(checkedList) {
+        deep: true,
+        immediate: true,
+    },
+    checked: {
+        handler(n, o) {     
+            
+                this.checkedList=[]
                 this.checkedShowList=[];
                 this.checkedShowList=[];
-                console.log(checkedList)
-                this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
-                this.checkAll = checkedList.length === this.plainOptions.length;
-                checkedList.forEach((ele,i)=>{
-                    this.plainOptions.forEach((item,index)=>{
-                        if(item.value==ele){
-                            this.checkedShowList.push(item.label)
-                        }
-                    })
+                this.plainOptions = this.listArr
+                this.listArr.forEach((item) => {
+                    this.valueOptions.push(item.value)
                 })
                 })
-                
-            },
-            onCheckAllChange(e) {
-                Object.assign(this, {
-                    checkedList: e.target.checked ? this.valueOptions : [],
-                    indeterminate: false,
-                    checkAll: e.target.checked,                  
-                });
-                this.checkedList.forEach((ele,i)=>{
-                    this.plainOptions.forEach((item,index)=>{
-                        if(item.value==ele){
-                            this.checkedShowList.push(item.label)
-                        }
+                 if (this.checked.length) {
+                    this.checkedList = this.checked;
+                    console.log(this.checkedList,this.plainOptions)
+                    this.checkedList.forEach((ele, i) => {
+                        this.plainOptions.forEach((item, index) => {
+                            if (item.value == ele) {
+                                this.checkedShowList.push(item.label)
+                            }
+                        })
                     })
                     })
-                })
-            },
+                    this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
+                    this.checkAll = this.checkedList.length === this.plainOptions.length
+                   
+                }             
+                                     
+        },
+        deep: true,
+        immediate: true,
+    },
+  },
+  props: ['title', 'listArr', 'checked'],
+  methods: {
+    //手机品牌多选的事件
+    checkGroupChange(checkedList) {
+        this.checkedShowList = []
+        console.log(checkedList)
+        this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length
+        this.checkAll = checkedList.length === this.plainOptions.length
+        checkedList.forEach((ele, i) => {
+            this.plainOptions.forEach((item, index) => {
+            if (item.value == ele) {
+                this.checkedShowList.push(item.label)
+            }
+            })
+        })
+            //  this.$emit('getCheckedList', this.checkedList)
 
 
+    },
+    onCheckAllChange(e) {
+    console.log(e.target.checked,this.valueOptions)
+      Object.assign(this, {
+        checkedList: e.target.checked ? this.valueOptions : [],
+        indeterminate: false,
+        checkAll: e.target.checked,
+      })
+      this.checkedList.forEach((ele, i) => {
+        this.plainOptions.forEach((item, index) => {
+          if (item.value == ele) {
+            this.checkedShowList.push(item.label)
+          }
+        })
+      })
+      if (!e.target.checked) {
+        this.checkedShowList = []
+      }
+      console.log(this.checkedList)
+        // this.$emit('getCheckedList', this.checkedList)
 
 
+    },
 
 
-            deleteItem(item){
-                console.log(item);
-                let val='';
-                this.plainOptions.forEach((ele,index)=>{
-                    if(ele.label==item){
-                        val=ele.value
-                    }
-                })
-                this.checkedList=this.checkedList.filter((element,index) => {
-                    return element!=val
-                });
-                this.checkedShowList=this.checkedShowList.filter((element,index) => {
-                    return element!=item
-                });
-                if(this.checkedList.length==0){
-                    this.indeterminate=false
-                    this.checkAll=false
-                }
-            },
+    deleteItem(item) {
+      console.log(item)
+      let val = ''
+      this.plainOptions.forEach((ele, index) => {
+        if (ele.label == item) {
+          val = ele.value
+        }
+      })
+      this.checkedList = this.checkedList.filter((element, index) => {
+        return element != val
+      })
+      this.checkedShowList = this.checkedShowList.filter((element, index) => {
+        return element != item
+      })
+      if (this.checkedList.length == 0) {
+        this.indeterminate = false
+        this.checkAll = false
+      }
+            // this.$emit('getCheckedList', this.checkedList)
 
 
-            clearAll(){
-                this.checkedList=[];
-                this.indeterminate=false;
-                this.checkAll=false;
-                this.checkedShowList=[];
-            },
+    },
 
 
-            
-        },
-        mounted() {
-            this.plainOptions=this.listArr;
-            this.listArr.forEach((item)=>{
-                this.valueOptions.push(item.value)
-            })
-        },
-    }
+    clearAll() {
+      this.checkedList = []
+      this.indeterminate = false
+      this.checkAll = false
+      this.checkedShowList = []
+        // this.$emit('getCheckedList', this.checkedList)
+
+    },
+  },
+  mounted() {
+    this.plainOptions = this.listArr
+    this.listArr.forEach((item) => {
+      this.valueOptions.push(item.value)
+    })
+    
+    // if (this.checked.length) {
+    //     this.checkedList = this.checked
+    //     this.checkedList.forEach((ele, i) => {
+    //         this.plainOptions.forEach((item, index) => {
+    //         if (item.value == ele) {
+    //             this.checkedShowList.push(item.label)
+    //         }
+    //         })
+    //     })
+    //     this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
+    //     this.checkAll = this.checkedList.length === this.plainOptions.length
+    // }else{
+    //     this.checkedList = []
+    // }
+    
+    
+  },
+}
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-.singleLayersSelecte{
-    margin-top: 20px;
-        .selectBox{
-        display: flex;
-        .title{
-            background: #f9f9f9;
-            font-size: 14px;
-            font-weight: 700;
-            padding:0 15px;
-            border-bottom: 1px solid #ddd;
-            text-align: left;
-            position: relative;
-            border-radius: 5px 5px 0 0;
-            .clear{
-                position: absolute;
-                top: 5px;
-                right: 0;
-            }
-        }
-        .selectLeft{
-            width: 40%;
-            margin-right: 2%;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-        }
-        .selectRight{
-            width: 20%;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-        }
-        .selectBox1{
-            height: 250px;
-            overflow: auto;
-            
-            .selectList{                      
-                display: block;
-                width: 100%;
-                // padding: 0 15px;
-                // padding: 3px 0;
-            }
-            .selectLists{
-                display: block;
-                width: 100%;
-                padding: 0 15px;
-            }
-            .selectLists:hover{
-                background-color: rgba(0,0,0,.1);
-            }
-            .selectListitem{
-                display: block;
-                height: 25px;
-                line-height: 25px;
-                background-color: #eee;
-                border-radius: 5px;
-                padding: 0 10px;
-                margin: 8px 10px;
-                position: relative;
-                #close{
-                    font-size: 12px;
-                    position: absolute;
-                    right: 10px;
-                    top: 5px;
-                    cursor: pointer;
-                }
-            }
-        }
+.singleLayersSelecte {
+  margin-top: 20px;
+  .selectBox {
+    display: flex;
+    .title {
+      background: #f9f9f9;
+      font-size: 14px;
+      font-weight: 700;
+      padding: 0 15px;
+      border-bottom: 1px solid #ddd;
+      text-align: left;
+      position: relative;
+      border-radius: 5px 5px 0 0;
+      .clear {
+        position: absolute;
+        top: 5px;
+        right: 0;
+      }
+    }
+    .selectLeft {
+      width: 40%;
+      margin-right: 2%;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+    }
+    .selectRight {
+      width: 20%;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+    }
+    .selectBox1 {
+      height: 250px;
+      overflow: auto;
 
 
+      .selectList {
+        display: block;
+        width: 100%;
+        // padding: 0 15px;
+        // padding: 3px 0;
+      }
+      .selectLists {
+        display: block;
+        width: 100%;
+        padding: 0 15px;
+      }
+      .selectLists:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+      .selectListitem {
+        display: block;
+        height: 25px;
+        line-height: 25px;
+        background-color: #eee;
+        border-radius: 5px;
+        padding: 0 10px;
+        margin: 8px 10px;
+        position: relative;
+        #close {
+          font-size: 12px;
+          position: absolute;
+          right: 10px;
+          top: 5px;
+          cursor: pointer;
+        }
+      }
     }
     }
+  }
 }
 }
 </style>
 </style>

src/views/modules/kuaishouapp/account/stepForm/stepModule/toutiaoTime.vue → src/views/modules/BatchCreate/toutiaoTime.vue


+ 2 - 2
vue.config.js

@@ -57,12 +57,12 @@ module.exports = {
     proxy: {
     proxy: {
       '/jeecg-boot': {
       '/jeecg-boot': {
         // target: 'http://192.168.1.90:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
         // target: 'http://192.168.1.90:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
-        // target: 'http://192.168.1.72:8088', //请求本地 需要jeecg-boot后台项目  英豪
+        target: 'http://192.168.1.72:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
         // target: 'http://192.168.1.94:8804', //请求本地 需要jeecg-boot后台项目  孙震
         // target: 'http://192.168.1.94:8804', //请求本地 需要jeecg-boot后台项目  孙震
         // target: 'http://192.168.1.51:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.51:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.165:8848', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.165:8848', //请求本地 需要jeecg-boot后台项目  毕洁泉
-        target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目 
+        // target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目 
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目 
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目 
         // target: 'http://192.168.1.251:8088', //请求本地 需要jeecg-boot后台项目 
         // target: 'http://192.168.1.251:8088', //请求本地 需要jeecg-boot后台项目 
         // target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目 
         // target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目