Procházet zdrojové kódy

Merge branch 'master' of http://git.tjyourong.com.cn/ctop/adsp-vue

zhuxinbo před 5 roky
rodič
revize
baeb2076a0

+ 1 - 1
src/components/DatePicker.vue

@@ -62,7 +62,7 @@ let pickOptions = [
     title: '一周',
     key: '3',
     value: 3,
-    dateValue: [moment().subtract(8, 'days'), moment().subtract(1, 'days')]
+    dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')]
   },
   {
     title: '一个月',

+ 29 - 15
src/views/modules/BatchCreate/MultiCheckBox.vue

@@ -62,37 +62,49 @@ import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
         plainOptions: [],
         layersNum: 0, //控制层级
         currentLayerNum: 0, //当前层级是多少层,
-        currentItem: null
+        currentItem: null,
+        labelList:[],//选中的文字的样式
       }
     },
     watch: {
-      checkAll: function (n, o) {
-        if (n != o) {
-          // this.onCheckAllChange()
-        }
-      },
+      checkedList: function (n, o) {
+      // this.labelList=[];
+      //   this.checkedList.forEach((item)=>{
+      //     this.listArr.forEach((ele,index)=>{
+      //       if(ele.code==item){
+      //         this.labelList.push(ele.name)
+      //       }
+      //     })
+      //  }) 
+     },
       listArr:{
           handler(n, o) {
               this.plainOptions=[];
+              this.checkedList=[];
             //   console.log(n,o,'------')
-            this.listArr.forEach(element => {
+              this.listArr.forEach(element => {
                 this.plainOptions.push(element.value)
                 if(element.checked){
                     let num = this.checkedList.indexOf(element.value)
                     if (num == -1) {
                         this.checkedList.push(element.value);
-                        console.log(this.checkedList,'--',this.curLayerNum)
-                    }
-                    
+                        this.labelList.push(element.name);
+                        // console.log(this.checkedList,'--',this.curLayerNum)
+                    }                
                 }else{
                     let num = this.checkedList.indexOf(element.value)
                     if (num > -1) {
                         this.checkedList.splice(num, 1)
                     }
+                    let n=this.labelList.indexOf(element.name)
+                    if (n > -1) {
+                        this.labelList.splice(n, 1)
+                    }
                 }
             });
            
-            // console.log(this.checkedList.length,this.plainOptions.length)
+            console.log(this.checkedList.length,this.plainOptions.length)
+            console.log(this.checkedList,this.plainOptions.length)
             this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
             this.checkAll = this.checkedList.length === this.plainOptions.length && this.plainOptions.length!=0
           },
@@ -104,6 +116,7 @@ import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
         //   console.log(n, o, '--parentChecked', this.curLayerNum,this.checkedList,this.plainOptions)
           if (n) {
             this.checkAll = true
+            this.checkedList=[];
             this.listArr.forEach((item, index) => {
                 item.checked = n
                 let num = this.checkedList.indexOf(item.value)
@@ -157,8 +170,7 @@ import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
         // this.listItemClick(e,item);
       },
       onCheckAllChange(e) {
-       
-       
+              
         console.log(event)
         Object.assign(this, {
           checkedList: e.target.checked ? this.plainOptions : [],
@@ -175,6 +187,7 @@ import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
             this.$set(item, 'checked', false)
           })
         }
+      
 
         this.listItemClick(event,{
             name:'全选',value:'all',checked:e.target.checked,indeterminates:false
@@ -189,7 +202,8 @@ import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
           data: item,
           curLayerNum:this.curLayerNum,
           checkList:this.checkedList,
-          plainOptions:this.plainOptions
+          plainOptions:this.plainOptions,
+          labelList:this.labelList
         })
       },
      
@@ -203,7 +217,7 @@ import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
       })
  
     
-       
+       console.log('zhixingle yici')
       if (this.$refs.checkList) {
         let refsCheckListArr = Array.from(this.$refs.checkList)
         refsCheckListArr.forEach((item, index) => {

+ 103 - 17
src/views/modules/BatchCreate/linkMultiSelect.vue

@@ -22,8 +22,12 @@
     </div>
 
     <div class="rightBox">
-      <div class="title">已选</div>
-      <div class="linkMulti_list"></div>
+      <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
+      <div class="linkMulti_list">
+          <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>
 </template>
@@ -54,7 +58,8 @@
        
 
         currentData: null,
-        layersNum: 0
+        layersNum: 0,
+        checkedShowList:[],
       }
     },
     watch: {},
@@ -78,8 +83,8 @@
                     }).then((res)=>{
                         console.log(res);
                         if(res.success){
-                            if(res.result.records.length>0){
-                                res.result.records.forEach((item,index)=>{
+                            if(res.data.length>0){
+                                res.data.forEach((item,index)=>{
                                     item.value=item.code
                                     item.checked=val.data.checked;
                                     item.indeterminates=false;
@@ -95,7 +100,7 @@
                                 this.parentChecked1 = val.data.checked
                                 this.parentChecked2 = val.data.checked
                                 this.parentChecked3 = val.data.checked
-                                this.listArr2=res.result.records
+                                this.listArr2=res.data
                                 this.title2 = val.data.name
                             }                    
                         };
@@ -109,8 +114,8 @@
                     this.listArr2 = []
                     this.title2 = ''
                     this.resetStyle(childrensArr, index)
-                    }  
-                        
+                }  
+                 this.checkedShowList=val.checkList     
             } else if (index == 2 || this.clickKey == 2) {
                 if(val.data.hasChild){
                     getAction(this.listUrl,{
@@ -119,8 +124,8 @@
                     }).then((res)=>{
                         console.log(res);
                         if(res.success){
-                            if(res.result.records.length>0){
-                                res.result.records.forEach((item,index)=>{
+                            if(res.data.length>0){
+                                res.data.forEach((item,index)=>{
                                     item.value=item.code
                                     item.checked=val.data.checked;
                                     item.indeterminates=false;
@@ -133,7 +138,7 @@
                                 this.styleHandle(childrensArr, index)
                                 this.parentChecked2 = val.data.checked
                                 this.parentChecked3 = val.data.checked
-                                this.listArr3=res.result.records
+                                this.listArr3=res.data
                                 this.title3 = val.data.name
                             }                    
                         };
@@ -169,14 +174,14 @@
                     }).then((res)=>{
                         console.log(res);
                         if(res.success){
-                            if(res.result.records.length>0){
-                                res.result.records.forEach((item,index)=>{
+                            if(res.data.length>0){
+                                res.data.forEach((item,index)=>{
                                     item.value=item.code
                                     item.checked=val.data.checked;
                                     item.indeterminates=false;
                                 
                                 })
-                                this.listArr4 = res.result.records
+                                this.listArr4 = res.data
                                 this.title4 = val.data.name
                                 this.$refs.mycheckBox.style.width = '200%'
                                 this.styleHandle(childrensArr, index)
@@ -318,7 +323,46 @@
             item.style.borderRight = 'none'
           }
         })
-      }
+      },
+      
+      
+      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
+          }
+      },
+
+      clearAll(){
+          this.listArr1.forEach((item)=>{
+              item.checked=false
+          })
+          this.listArr2.forEach((item)=>{
+              item.checked=false
+          })
+          this.listArr3.forEach((item)=>{
+              item.checked=false
+          })
+          this.listArr4.forEach((item)=>{
+              item.checked=false
+          })
+          this.checkedShowList=[]
+      },
+
+
     },
     mounted() {
         // this.listArr1=this.listArr;
@@ -331,14 +375,14 @@
             }).then((res)=>{
                 console.log(res);
                 if(res.success){
-                    res.result.records.forEach((item,index)=>{
+                    res.data.forEach((item,index)=>{
                         item.value=item.code
                         item.checked=false;
                         item.indeterminates=false;
                         
                     })
                 };
-                this.listArr1=res.result.records
+                this.listArr1=res.data
             })
         }
 
@@ -373,6 +417,42 @@
       width: 35%;
       border: 1px solid #ccc;
       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;
+                }
+            }
+      }
     }
 
     .title {
@@ -384,6 +464,12 @@
       background-color: rgb(248, 249, 250);
       padding: 0 15px;
       border-bottom: 1px solid #ccc;
+      position: relative;
+      .clear{
+          position: absolute;
+          top: 0px;
+          right: 0;
+      }
     }
 
     .big_item {

+ 288 - 76
src/views/modules/BatchCreate/newDirectedPackage.vue

@@ -1,7 +1,7 @@
 
 <style>
 .newDirectedPackage .ant-checkbox-group-item{
-        width: 100%;
+    width: 100%;
     display: block ;
     padding: 3px 0;
     margin-right: 0;
@@ -388,14 +388,36 @@
                 <a-form :form="form">
                     <a-form-item label="定向包名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input placeholder="请输入定向包名称,至多20个字符" style="width:40%" v-decorator="['name', { rules: [{ required: true, message: '请输入定向包名称' }] }]" />
+                    </a-form-item>                    
+                    <a-form-item label="定向包类型:" :label-col="labelCol" :wrapper-col="wrapperCol">
+                        <a-radio-group  v-decorator="['landingType', { initialValue:'EXTERNAL' }]" @change='landingTypeChange' button-style="solid">
+                            <a-radio-button value="EXTERNAL">落地页</a-radio-button>
+                            <a-radio-button value="APP_ANDROID">应用下载-安卓</a-radio-button>
+                            <a-radio-button value="APP_IOS">应用下载-IOS</a-radio-button>
+                            <a-radio-button value="AWEME">抖音推广</a-radio-button>
+                        </a-radio-group>
+                    </a-form-item>
+                    <a-form-item label="投放范围" :label-col="labelCol" :wrapper-col="wrapperCol">
+                        <a-radio-group  v-decorator="['deliveryRange', { initialValue:'DEFAULT' }]" @change='landingTypeChange' button-style="solid">
+                            <a-radio-button value="DEFAULT">默认</a-radio-button>
+                            <a-radio-button value="UNION">穿山甲
+                                <a-tooltip>
+                                    <template slot="title">
+                                        基于4亿日活跃用户大数据积累,顶尖AI智能推荐技术,今日头条与最广泛的合作伙伴携手打造全新移动生态联盟
+                                    </template>
+                                    <a-icon type="question-circle" />
+                                </a-tooltip>
+                            </a-radio-button>
+                            
+                        </a-radio-group>
                     </a-form-item>
                     <a-form-item label="媒体:" :label-col="labelCol" :wrapper-col="wrapperCol">
-                        <a-radio-group default-value="toutiao" v-decorator="['medialType', { rules: [{ required: true}] }]"  button-style="solid">
+                        <a-radio-group  v-decorator="['medialType', { initialValue:1 }]"  button-style="solid">
                             <a-radio-button :value="1">头条</a-radio-button>
                         </a-radio-group>
                     </a-form-item>
                     <a-form-item label="地域:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
-                        <a-radio-group default-value="" button-style="solid" v-model="regionValue">
+                        <a-radio-group  button-style="solid" v-model="regionValue">
                             <a-radio-button value="">不限</a-radio-button>
                             <a-radio-button value="REGION_LEVEL_PROVINCE">按省市</a-radio-button>
                             <a-radio-button value="REGION_LEVEL_DISTRICT">按区县</a-radio-button>
@@ -411,10 +433,10 @@
                                     <div class="tabBox">
                                         <a-tabs v-model="cityTab" @change="cityTabChange">
                                             <a-tab-pane key="geography" tab="地理划分">
-                                                <linkMultiSelect title='省份' :listArr='shengshiArr' :maxLayers='2' :listUrl='regionListUrl' @getSelectedArr='getSelectedCityArr'/>
+                                                <linkMultiSelect title='省份' :listArr='[]' :maxLayers='2' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
                                             </a-tab-pane>
                                             <a-tab-pane key="development" tab="发展划分" >
-                                                <linkMultiSelect title='等级' :listArr='[]' url='' :maxLayers='3' @getSelectedArr='getSelectedCityArr'/>
+                                                <linkMultiSelect title='等级' :listArr='[]' url='' :maxLayers='3'  @getSelectedArr='getSelectedCityArr'/>
                                             </a-tab-pane>
                                         </a-tabs>
                                     </div>
@@ -455,20 +477,20 @@
                         </div>                        
                     </a-form-item>
                     <a-form-item label="性别:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
-                         <a-radio-group default-value="" v-model="form.sex" button-style="solid">
-                            <a-radio-button value="">不限</a-radio-button>
-                            <a-radio-button value="men">男</a-radio-button>
-                            <a-radio-button value="women">女</a-radio-button>
+                         <a-radio-group  v-decorator="['gender', {initialValue:'NONE' }]"  button-style="solid">
+                            <a-radio-button value="NONE">不限</a-radio-button>
+                            <a-radio-button value="GENDER_MALE">男</a-radio-button>
+                            <a-radio-button value="GENDER_FEMALE">女</a-radio-button>
                         </a-radio-group>
                     </a-form-item>
                     <a-form-item label="年龄:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
-                        <radioCheck :checkArr='ageArr' @getSonValue='getNewUser' />
+                        <radioCheck :checkArr='ageArr' @getSonValue='getAgeSelect' />
                     </a-form-item>
                     <a-form-item label="精选流量包:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
-                        <a-radio-group default-value="" button-style="solid">
+                        <a-radio-group  button-style="solid" v-decorator="['medialType', { initialValue:''}]">
                             <a-radio-button value="">不限</a-radio-button>
-                            <a-radio-button value="men">应用软件精选</a-radio-button>
-                            <a-radio-button value="women">游戏精选</a-radio-button>
+                            <a-radio-button value="men" :disabled='getFormData("deliveryRange")!="UNION"'>应用软件精选</a-radio-button>
+                            <a-radio-button value="women" :disabled='getFormData("deliveryRange")!="UNION"'>游戏精选</a-radio-button>
                         </a-radio-group>
                         <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />精选流量包仅支持穿山甲、穿山甲-精选游戏广告位</span>
                     </a-form-item>
@@ -641,11 +663,35 @@
                     <a-form-item label="平台:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                         <radioCheck :checkArr='platformArr' @getSonValue='getNewUser' />
                     </a-form-item>
-                    <a-form-item label="过滤已安装:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
-                        <a-radio-group default-value="" button-style="solid">
-                            <a-radio-button value="">不过滤</a-radio-button>
-                            <a-radio-button value="filter">过滤</a-radio-button>
+                    <a-form-item label="过滤已安装:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_ANDROID'">
+                        <a-radio-group  button-style="solid" v-decorator="['hideIfExists', {initialValue:0 }]" >
+                            <a-radio-button :value='0'>不过滤</a-radio-button>
+                            <a-radio-button :value="1">过滤</a-radio-button>
+                        </a-radio-group>
+                    </a-form-item>
+                    <a-form-item label="安卓版本" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_ANDROID'">
+                        <a-select  style="width: 200px" v-decorator="['androidOsv', {initialValue:'0.0' }]" @change="androidOsvChange">
+                            <a-select-option v-for="(item,index) in androidOsvArr" :key="index" :value='item.value'>
+                               {{item.label}}
+                            </a-select-option>
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item label="IOS版本" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_IOS'">
+                        <a-select  style="width: 200px" v-decorator="['iosOsv', {initialValue:'0.0' }]" @change="iosOsvChange">
+                            <a-select-option v-for="(item,index) in iosOsvArr" :key="index" :value='item.value'>
+                               {{item.label}}
+                            </a-select-option>
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item label="过滤已转化用户" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
+                         <a-radio-group  v-decorator="['gender', {initialValue:'NO_EXCLUDE' }]"  button-style="solid">
+                            <a-radio-button value="NO_EXCLUDE">不过滤</a-radio-button>
+                            <a-radio-button value="AD">广告计划</a-radio-button>
+                            <a-radio-button value="CAMPAIGN">广告组</a-radio-button>
+                            <a-radio-button value="ADVERTISER">广告账户</a-radio-button>
                         </a-radio-group>
+                        <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />过滤已转化不支持投放目标为展示、点击计划,不支持受众预估
+                        </span>
                     </a-form-item>
                     <a-form-item label="运营商:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <radioCheck :checkArr='carrierArr' @getSonValue='getNewUser' />
@@ -654,12 +700,12 @@
                        <radioCheck :checkArr='networkArr' @getSonValue='getNewUser' />
                     </a-form-item>
                     <a-form-item label="文章类型:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
-                       <a-radio-group default-value="" button-style="solid" v-model="articleType">
+                       <a-radio-group  button-style="solid" v-model="articleType">
                             <a-radio-button value="">不限</a-radio-button>
                             <a-radio-button value="articleCategory">文章分类</a-radio-button>                          
                         </a-radio-group>
                         <div v-if="articleType=='articleCategory'" class="deviceBrand">
-                            <div class="selectBox">
+                            <!-- <div class="selectBox">
                                 <div class="selectLeft">
                                     <div class="title">文章分类</div>
                                     <div class="selectBox1">
@@ -673,17 +719,17 @@
                                         <span class="selectListitem" v-for="(item,index) in checkedList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
                                     </div>
                                 </div>
-                            </div>
-                            
+                            </div> -->
+                            <singleLayersSelecte  title='文章类型'  :listArr='articleCategoryOptions'  @getCheckedList='getArticleCategory'/>
                         </div>
                     </a-form-item>
                     <a-form-item label="手机品牌:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
-                       <a-radio-group default-value="" v-model="deviceBrand" button-style="solid">
+                       <a-radio-group  v-model="deviceBrandType" button-style="solid">
                             <a-radio-button value="">不限</a-radio-button>
                             <a-radio-button value="byBrand">按品牌</a-radio-button>
                         </a-radio-group>
-                        <div v-if="deviceBrand=='byBrand'" class="deviceBrand">
-                            <div class="selectBox">
+                        <div v-if="deviceBrandType=='byBrand'" class="deviceBrand">
+                            <!-- <div class="selectBox">
                                 <div class="selectLeft">
                                     <div class="title">手机品牌</div>
                                     <div class="selectBox1">
@@ -697,12 +743,12 @@
                                         <span class="selectListitem" v-for="(item,index) in checkedList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
                                     </div>
                                 </div>
-                            </div>
-                            
+                            </div> -->
+                            <singleLayersSelecte  title='手机品牌' :listArr='deviceBrandOptions'  @getCheckedList='getDeviceBrand' />
                         </div>
                     </a-form-item>
                     <a-form-item label="手机价格:"  class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
-                       <a-radio-group default-value="" v-model="launchPrice" button-style="solid">
+                       <a-radio-group  v-model="launchPrice" button-style="solid">
                             <a-radio-button value="">不限</a-radio-button>
                             <a-radio-button value="custom">自定义</a-radio-button>
                         </a-radio-group>
@@ -715,11 +761,15 @@
                         <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
                     </a-form-item>
                     <a-form-item label="智能放量:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
-                        <a-radio-group default-value="" button-style="solid">
-                            <a-radio-button value="">不启用</a-radio-button>
-                            <a-radio-button value="open">启用</a-radio-button>
+                        <a-radio-group  button-style="solid" v-model="autoExtendEnabled">
+                            <a-radio-button :value="0">不启用</a-radio-button>
+                            <a-radio-button :value="1">启用</a-radio-button>
                         </a-radio-group>
                         <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />智能放量不支持受众预估</span>
+                        <div v-if="autoExtendEnabled==1" class="deviceBrand">
+                            <singleLayersSelecte  title='可放开定向' :listArr='autoExtendOptions'  @getCheckedList='getAutoExtendEnabled'/>
+                            
+                        </div>
                     </a-form-item>
                     <a-form-item label="保存为模板:" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                         <a-radio-group default-value="no" button-style="solid">
@@ -769,6 +819,7 @@ const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
 const defaultCheckedList = ['Apple', 'Orange'];
 import radioCheck from './radioCheck';
 import linkMultiSelect from './linkMultiSelect'
+import singleLayersSelecte from './singleLayerSelecte'
 let newUser=[
     {
         value:'',
@@ -832,15 +883,18 @@ let carrierArr=[
 let platformArr=[
     {
         value:'',
-        title:'不限'
+        title:'不限',
+        disabled:false
     },
     {
         value:'ANDROID',
-        title:'Android'
+        title:'Android',
+        disabled:false
     },
     {
         value:'IOS',
-        title:'iOS'
+        title:'iOS',
+        disabled:false
     },
     
 ]
@@ -906,23 +960,49 @@ let options=[
         },
 ];
 
+let autoExtendOptions=[
+    {
+        label:'地域',
+        value:'REGION'
+    },
+    {
+        label:'性别',
+        value:'GENDER'
+    },
+    {
+        label:'年龄',
+        value:'AGE'
+    },
+    {
+        label:'行为兴趣',
+        value:'INTEREST_ACTION'
+    },
+    {
+        label:'自定义人群',
+        value:'CUSTOM_AUDIENCE'
+    },
+]
 
 export default {
     components:{
         radioCheck,
-        linkMultiSelect
+        linkMultiSelect,
+        singleLayersSelecte
     },
     data() {
         return {
             labelCol: { span: 4 },
             wrapperCol: { span: 14 },
             launchPrice:'',//手机价格
-            deviceBrand:'',//手机品牌
-            form:{
-                medialType:1,
-                sex:'',
-                launchPrice:[],//手机价格
-            },
+            deviceBrandType:'',
+            deviceBrand:[],//手机品牌
+            deviceBrandOptions:[],
+            form: this.$form.createForm(this),
+            // form:{
+            //     medialType:1,
+            //     sex:'',
+            //     launchPrice:[],//手机价格
+            // },
             marks: {
                 0: '0',
                 1000: '',
@@ -948,10 +1028,10 @@ export default {
                 },
             },
             //选择框
-            checkedList: defaultCheckedList,
-            indeterminate: true,
-            checkAll: false,
-            plainOptions,
+            // checkedList: defaultCheckedList,
+            // indeterminate: true,
+            // checkAll: false,
+            // plainOptions,
 
             newUser,//新用户的每一项值
             networkArr,//网络
@@ -976,12 +1056,76 @@ export default {
             keyWordValue:undefined,//行为下的关键词
             AIselect:true,//行为下的自动选词是否可用
 
-            shengshiArr,
-            regionListUrl:'ctop/bytedanceAreaInfo/list',
-            acticleType:'',//文章分类
+            regionCityListUrl:'ctop/bytedanceAreaInfo/list',
+            regionCountyListUrl:'ctop/bytedanceAreaInfo/list',
+            articleType:'',//文章分类
+
+            // flowPacket:true,//默认精选流量包不可修改 只有穿山甲是才可以修改
+
+            autoExtendEnabled:0,//智能放量是否开启
+            autoExtendOptions,//智能投放可选定向数组
+            autoExtendTarget:[],//智能放量开启后的选择数据----------需传递的参数
+
+            articleCategoryOptions:[],//文章分类
+            articleCategory:[],//  文章分类选中的数据-----------传递的参数
+            age:[],//选中的年龄段-------需要传递的参数
+            carrier:[], //选中的受众运营商----------需要传递的参数
+            ac:[], //选中的受众网络类型---------------需要传递的参数
+
+            landingTypeValue:'',//定向包类型的值  用来判断平台的值
+            androidOsvArr:[],//受众安卓版本号数组
+            iosOsvArr:[],//受众ios版本号数组
         }
     },
     methods: {
+        //获取表单的某一个属性值
+        getFormData(className) {
+            return this.form.getFieldValue(className)
+        },
+        //定向包类型
+        landingTypeChange(e){
+            console.log(e.target.value);     
+            this.landingTypeValue=e.target.value;  
+            if(e.target.value=='APP_ANDROID'){
+                this.platformArr.forEach((item)=>{
+                    if(item.value!="ANDROID"){
+                        item.disabled=true
+                    }else{
+                         item.disabled=false
+                    }
+                })
+            }else if(e.target.value=='APP_IOS'){
+                this.platformArr.forEach((item)=>{
+                    if(item.value!="IOS"){
+                        item.disabled=true
+                    }else{
+                         item.disabled=false
+                    }
+                })
+            }else{
+                this.platformArr.forEach((item)=>{                    
+                        item.disabled=false
+                    
+                })
+            } 
+        },
+
+        //安卓版本号
+        androidOsvChange(val){
+            // console.log(val);
+            this.form.setFieldsValue({
+                androidOsv: val 
+            });
+            // console.log(this.form.getFieldValue('androidOsv'))
+        },
+        //ios版本号
+        iosOsvChange(val){
+            // console.log(val);
+            this.form.setFieldsValue({
+                iosOsv: val 
+            });
+            // console.log(this.form.getFieldValue('androidOsv'))
+        },
         //应用按钮
         applicatiSubmit(){
             console.log('submit!', this.form);
@@ -999,34 +1143,7 @@ export default {
             console.log(e)
         },
 
-        //多选的事件
-        checkGroupChange(checkedList) {
-            this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
-            this.checkAll = checkedList.length === plainOptions.length;
-        },
-        onCheckAllChange(e) {
-            Object.assign(this, {
-                checkedList: e.target.checked ? plainOptions : [],
-                indeterminate: false,
-                checkAll: e.target.checked,
-            });
-        },
-
-        deleteItem(item){
-            console.log(item);
-            this.checkedList=this.checkedList.filter((element,index) => {
-                return element!=item
-            });
-            if(this.checkedList.length==0){
-                this.indeterminate=false
-                this.checkAll=false
-            }
-        },
-        clearAll(){
-            this.checkedList=[];
-            this.indeterminate=false;
-            this.checkAll=false
-        },
+        
         //获取新用户的选中值
         getNewUser(val){
             console.log(val);
@@ -1078,8 +1195,103 @@ export default {
             console.log(value);
             this.keyWordValue=value
         },
+        //获取智能放量定向的值
+        getAutoExtendEnabled(val){
+            console.log(val)
+            this.autoExtendTarget=[];
+            this.autoExtendTarget.push([...val])
+        },
+        //获取手机品牌的值
+        getDeviceBrand(val){
+            console.log(val);
+            this.deviceBrand=[];
+            this.deviceBrand.push([...val])
+        },
+        //获取文章分类的值
+        getArticleCategory(val){
+            console.log(val)
+            this.articleCategory=[];
+            this.articleCategory.push([...val])
+        },
 
-        
+        //获取选中的年龄段
+        getAgeSelect(val){
+            console.log(val)
+            if(val.length==1&&val[0]==""){
+                this.age=[]
+            }else{
+                this.age=val;
+            }
+            
+        },
+
+        //获取运行商
+        getCarrier(val){
+            if(val.length==1&&val[0]==""){
+                this.carrier=[]
+            }else{
+                this.carrier=val;
+            }
+        },
+
+        //获取受众网络
+        getAc(){
+            if(val.length==1&&val[0]==""){
+                this.ac=[]
+            }else{
+                this.ac=val;
+            }
+        },
+    },
+    mounted() {
+        //手机品牌
+        getAction('sys/dictItem/list?_t=1594263117&dictId=7f907c1dab0a65ce6d115e082cd79acf&pageSize=100',{}).then((res)=>{
+            console.log(res);
+            if(res.success){
+                res.result.records.forEach((item)=>{
+                    this.deviceBrandOptions.push({
+                        label:item.itemText,
+                        value:item.itemValue
+                    })
+                })
+            }
+        })
+        //文章分类
+        getAction('sys/dictItem/list?_t=1594263117&dictId=defad85851bf6b1751a49b33d8b13b3b&pageSize=100',{}).then((res)=>{
+            console.log(res)
+            if(res.success){
+                res.result.records.forEach((item)=>{
+                    this.articleCategoryOptions.push({
+                        label:item.itemText,
+                        value:item.itemValue
+                    })
+                })
+            }
+        })
+        //受众安卓版本号
+        getAction('sys/dictItem/list?dictId=bba60d87ced96be177a772102b44d0f2&pageSize=100',{}).then((res)=>{
+            console.log(res)
+            if(res.success){
+                res.result.records.forEach((item)=>{
+                    this.androidOsvArr.push({
+                        label:item.itemText,
+                        value:item.itemValue
+                    })
+                })
+            }
+        })
+        //受众安卓版本号
+        getAction('sys/dictItem/list?dictId=a989bb28cfba9f25b3711dfcd05281e7&pageSize=100',{}).then((res)=>{
+            console.log(res)
+            if(res.success){
+                res.result.records.forEach((item)=>{
+                    this.iosOsvArr.push({
+                        label:item.itemText,
+                        value:item.itemValue
+                    })
+                })
+            }
+        })
     },
 }
 </script>

+ 98 - 16
src/views/modules/BatchCreate/radioCheck.vue

@@ -1,11 +1,20 @@
 <template>
     <div class="radioCheck" >
-        <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1}" v-for="(item,index) in checkArr" :key="index" >
-            <span>
-                <input type="checkbox" :value="item.value" class="checkbox-button-input" @click="radioCheckChange">
-            </span>
-            <span>{{item.title}}</span>
-        </label>
+        
+            <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1,'bgcolor':item.disabled}" v-for="(item,index) in checkArr" :key="index">
+                
+                <span>
+                    <input type="checkbox" :value="item.value"  class="checkbox-button-input" @click="radioCheckChange($event,item)">
+                </span>
+                <span>{{item.title}}</span>
+                
+            </label>
+            <!-- <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1}" v-for="(item,index) in checkArr" :key="index" :disabled='item.disabled'>               
+                <span>
+                    <input type="checkbox" :value="item.value"  class="checkbox-button-input" @click="radioCheckChange">
+                </span>
+                <span>{{item.title}}</span>               
+            </label>        -->
     </div>
 </template>
 
@@ -19,11 +28,34 @@ export default {
     },
    
     props:['checkArr'],
+    watch:{
+        checkArr:{
+            handler(n,o){
+                // console.log(n==o)
+                this.checkArr.forEach((item,index)=>{
+                    if(!item.disabled){
+                        this.selectValue[0]=item.value;
+                        // console.log(this.selectValue)
+                    }else if(item.disabled==false){
+                        this.selectValue[0]='';
+                    }else if(item.disabled==undefined){
+                        this.selectValue[0]='';
+                    }
+                })
+                 console.log(this.selectValue)
+            },
+            deep:true,
+            // immediate: true
+
+        }
+    },
     methods: {
         //单选多选的事件
-        radioCheckChange(e){
-            // console.log(e.target);
+        radioCheckChange(e,item){
+            console.log(e.target,item);
             this.currentSelect=e.target.value;
+            if(!item.disabled){
+
             if(e.target.value=='' || this.selectValue.length==0 ){
                 this.selectValue=[''];
             }else{
@@ -35,12 +67,9 @@ export default {
                 if(this.selectValue.indexOf(e.target.value)==-1){
                     this.selectValue.push(e.target.value)
                 }else{
-                    let index=this.selectValue.indexOf(e.target.value);
-                    if(index==0){
-                        this.selectValue=[...this.selectValue.splice(1)]
-                    }else{
-                        this.selectValue=[...this.selectValue.splice(0,index),...this.selectValue.splice(index)]
-                    }
+                    this.selectValue=this.selectValue.filter((item)=>{
+                        return item!=e.target.value
+                    })  
                 }
 
                 if(this.selectValue.length==0){
@@ -49,11 +78,20 @@ export default {
                 
             }
             // console.log(this.currentSelect,this.selectValue);
+            }
             this.$emit('getSonValue',this.selectValue)
         },
     },
     mounted() {
-        
+        // this.selectValue=[]
+        this.checkArr.forEach((item,index)=>{
+            if(!item.disabled){
+                this.selectValue[0]=item
+            }else{
+                this.selectValue=['']
+            }
+        })
+        this.$emit('getSonValue',this.selectValue)
     },
 }
 </script>
@@ -62,6 +100,16 @@ export default {
 .radioCheck{        
     border-radius: 5px;
     height: 32px;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: transparent;
+    .btn{
+        background: transparent;
+        padding: 0;
+        margin: 0;
+        border: none;
+    }
     .item{
         min-width: 60px;
         padding: 0px 15px;
@@ -79,6 +127,12 @@ export default {
         }
 
     }
+    .bgcolor{
+        color:rgba(0, 0, 0, 0.25);
+        background-color: #f5f5f5;
+        border-color: #d9d9d9;
+        cursor: not-allowed;
+    }
     .item::after{
         content: "";
         position: absolute;
@@ -115,7 +169,35 @@ export default {
         // border-color: #40a9ff;
         border-left: 6px solid #40a9ff;
     }
-
+    .bgcolor:hover{
+        color:rgba(0, 0, 0, 0.25);
+        background-color: #f5f5f5;
+        border-color: #d9d9d9;
+        cursor: not-allowed;
+    }
+    .bgcolor:hover::after{
+        // border-color: #40a9ff;
+        border-left: 6px solid #e0e0e0;
+    }
+    .bgcolor.selection:after{
+        border-left: 6px solid #e0e0e0;
+    }
+    .bgcolor.selection{
+        color:rgba(0, 0, 0, 0.25);
+        background-color: #f5f5f5;
+        border-color: #d9d9d9;
+        cursor: not-allowed;
+    }
+    .bgcolor.selection:hover{
+        // color: #1890ff;
+        color:rgba(0, 0, 0, 0.25);
+        background-color: #f5f5f5;
+        border-color: #d9d9d9;
+        cursor: not-allowed;
+    }
+    .bgcolor.selection:after{
+        border-left: 6px solid #e0e0e0;
+    }
 }
 .radioCheck .item:first-child {
     border-radius: 5px 0 0 5px;

+ 192 - 0
src/views/modules/BatchCreate/singleLayerSelecte.vue

@@ -0,0 +1,192 @@
+<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>
+    </div>
+</template>
+
+<script>
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+// const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
+// const defaultCheckedList = ['Apple', 'Orange'];
+    export default {
+        data() {
+            return {
+               //选择框
+                checkedList: [],
+                checkedShowList:[],
+                indeterminate: false,
+                checkAll: false,
+                plainOptions:[],
+                valueOptions:[],
+            }
+        },
+        watch: {
+            checkedList:{
+                handler(n,o){
+                    if(n!=o){                      
+                        this.$emit('getCheckedList',n)            
+                    }
+                },
+                deep:true,
+                immediate:true,
+            }
+        },
+        props:['title','listArr'],
+        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)
+                        }
+                    })
+                })
+                
+            },
+            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)
+                        }
+                    })
+                })
+            },
+
+
+
+            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
+                }
+            },
+
+            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)
+            })
+        },
+    }
+</script>
+
+<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;
+                }
+            }
+        }
+
+    }
+}
+</style>