zhuxinbo 5 years ago
parent
commit
9686458c56

+ 8 - 0
src/api/manage.js

@@ -112,3 +112,11 @@ export function downFile(url, parameter) {
   })
   })
 }
 }
 
 
+export function getProvince(url, parameter) {
+    return axios({
+      url: url,
+      method: 'get',
+      params: parameter
+    })
+  }
+

+ 1 - 1
src/views/modules/kuaishouapp/creativeCreate.vue

@@ -590,7 +590,7 @@ export default {
         getOptionsUrl: '/kuaishou/create/getOptions',
         getOptionsUrl: '/kuaishou/create/getOptions',
         getChildrenUrl: '/kuaishou/create/getChildren',
         getChildrenUrl: '/kuaishou/create/getChildren',
         videoListUrl: '/kuaishou/kuaiShouVideo/list',
         videoListUrl: '/kuaishou/kuaiShouVideo/list',
-        imageListUrl: '/kuaishou/kuaiShouImage//image/list',
+        imageListUrl: '/kuaishou/kuaiShouImage/image/list',
         actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
         actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
         getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
         getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
 
 

+ 117 - 39
src/views/template/creative/create.vue

@@ -190,34 +190,67 @@
       </a-form-item>
       </a-form-item>
       <a-form-item label="选择素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
       <a-form-item label="选择素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
         <a-radio-group v-model="materialType" @change="materialTypeChange">
         <a-radio-group v-model="materialType" @change="materialTypeChange">
-          <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
-          <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
-          <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
-          <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
-          <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
-          <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
+          <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'} "
+          >
+            <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>
         </a-radio-group>
       </a-form-item>
       </a-form-item>
-
       <!-- 创建大图横图创意 -->
       <!-- 创建大图横图创意 -->
-      <a-form-item label="创建大图横图创意" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="createLargeImageCreativeCon">
+      <a-form-item
+        label="创建大图横图创意"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol"
+        v-if="createLargeImageCreativeCon"
+      >
         <a-layout>
         <a-layout>
           <a-layout-content style="padding:10px;">
           <a-layout-content style="padding:10px;">
             <div :style="{ marginBottom: '16px' }">
             <div :style="{ marginBottom: '16px' }">
-              <a-button @click="addCreative()">添加创意</a-button>
+              <a-button @click="addCreative()" :disabled="count">添加创意</a-button>
             </div>
             </div>
             <a-row>
             <a-row>
               <a-col :span="8" v-for="(item,index) of HorizontalLargeImageList" :key="index">
               <a-col :span="8" 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)"/>
+                <a-card title :ref="item">
+                  <a-icon
+                    type="close"
+                    style="float:right;cursor: pointer;"
+                    @click="deleteCreative(index)"
+                  />
                   <div style="clear:both"></div>
                   <div style="clear:both"></div>
                   <div class="dynamically_add_form_item">
                   <div class="dynamically_add_form_item">
-                    <a-form-item
-                      class
-                      label="素材上传"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                    >
+                    <a-form-item class label="素材上传" :labelCol="labelCol" :wrapperCol="wrapperCol">
                       <upload-to-ali
                       <upload-to-ali
                         v-model="horizonImageUrlColl[index]"
                         v-model="horizonImageUrlColl[index]"
                         :customDomain="customDomain"
                         :customDomain="customDomain"
@@ -230,11 +263,7 @@
                         :accessKeySecret="accessKeySecret"
                         :accessKeySecret="accessKeySecret"
                       ></upload-to-ali>
                       ></upload-to-ali>
                     </a-form-item>
                     </a-form-item>
-                    <a-form-item
-                      label="创意标题"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                    >
+                    <a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
                       <a-input v-model="horizonImageCreativeTextColl[index]"></a-input>
                       <a-input v-model="horizonImageCreativeTextColl[index]"></a-input>
                     </a-form-item>
                     </a-form-item>
                   </div>
                   </div>
@@ -271,7 +300,7 @@
         :wrapperCol="wrapperCol"
         :wrapperCol="wrapperCol"
       >
       >
         <a-input v-model="horizonImageCreativeText"></a-input>
         <a-input v-model="horizonImageCreativeText"></a-input>
-      </a-form-item> -->
+      </a-form-item>-->
 
 
       <a-form-item
       <a-form-item
         v-if="showHorizonVideo"
         v-if="showHorizonVideo"
@@ -603,10 +632,16 @@ export default {
       },
       },
 
 
       // 创建大图横图创意
       // 创建大图横图创意
-      createLargeImageCreativeCon:true,
+      createLargeImageCreativeCon: true,
       HorizontalLargeImageList: [],
       HorizontalLargeImageList: [],
+      HorizontalLargeImageListBig: [],
+      HorizontalLargeImageListHeng: [],
+      HorizontalLargeImageListShu: [],
+      HorizontalLargeImageListZu: [],
+      HorizontalLargeImageListSmall: [],
+      HorizontalLargeImageListBigShu: [],
       horizonImageUrlColl: [], // 大图横图图片素材集合
       horizonImageUrlColl: [], // 大图横图图片素材集合
-      horizonImageCreativeTextColl:[] // 创意标题集合
+      horizonImageCreativeTextColl: [] // 创意标题集合
     }
     }
   },
   },
   components: {
   components: {
@@ -679,58 +714,64 @@ export default {
     materialTypeChange() {
     materialTypeChange() {
       let type = this.materialType
       let type = this.materialType
       if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
       if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
-          this.createLargeImageCreativeCon = false
+        // this.createLargeImageCreativeCon = false
         this.showLargeImage = false
         this.showLargeImage = false
         this.showLargeVerticalImage = false
         this.showLargeVerticalImage = false
         this.showHorizonVideo = false
         this.showHorizonVideo = false
         this.showVerticalVideo = false
         this.showVerticalVideo = false
         this.showGroupImage = false
         this.showGroupImage = false
         this.showSmallImage = true
         this.showSmallImage = true
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
       }
       }
       if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
       if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
-          this.createLargeImageCreativeCon = true
+        // this.createLargeImageCreativeCon = true
         this.showLargeImage = false
         this.showLargeImage = false
         this.showLargeVerticalImage = false
         this.showLargeVerticalImage = false
         this.showHorizonVideo = false
         this.showHorizonVideo = false
         this.showVerticalVideo = false
         this.showVerticalVideo = false
         this.showGroupImage = false
         this.showGroupImage = false
         this.showSmallImage = false
         this.showSmallImage = false
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
       }
       }
       if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
       if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
-          this.createLargeImageCreativeCon = false
+        // this.createLargeImageCreativeCon = false
         this.showLargeImage = false
         this.showLargeImage = false
         this.showLargeVerticalImage = false
         this.showLargeVerticalImage = false
         this.showHorizonVideo = false
         this.showHorizonVideo = false
         this.showVerticalVideo = false
         this.showVerticalVideo = false
         this.showGroupImage = true
         this.showGroupImage = true
         this.showSmallImage = false
         this.showSmallImage = false
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
       }
       }
       if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
       if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
-          this.createLargeImageCreativeCon = false
+        // this.createLargeImageCreativeCon = false
         this.showLargeImage = false
         this.showLargeImage = false
         this.showLargeVerticalImage = false
         this.showLargeVerticalImage = false
         this.showHorizonVideo = true
         this.showHorizonVideo = true
         this.showVerticalVideo = false
         this.showVerticalVideo = false
         this.showGroupImage = false
         this.showGroupImage = false
         this.showSmallImage = false
         this.showSmallImage = false
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
       }
       }
       if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
       if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
-          this.createLargeImageCreativeCon = false
+        // this.createLargeImageCreativeCon = false
         this.showLargeImage = false
         this.showLargeImage = false
         this.showLargeVerticalImage = true
         this.showLargeVerticalImage = true
         this.showHorizonVideo = false
         this.showHorizonVideo = false
         this.showVerticalVideo = false
         this.showVerticalVideo = false
         this.showGroupImage = false
         this.showGroupImage = false
         this.showSmallImage = false
         this.showSmallImage = false
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
       }
       }
       if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
       if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
-          this.createLargeImageCreativeCon = false
+        // this.createLargeImageCreativeCon = false
         this.showLargeImage = false
         this.showLargeImage = false
         this.showLargeVerticalImage = false
         this.showLargeVerticalImage = false
         this.showHorizonVideo = false
         this.showHorizonVideo = false
         this.showVerticalVideo = true
         this.showVerticalVideo = true
         this.showGroupImage = false
         this.showGroupImage = false
         this.showSmallImage = false
         this.showSmallImage = false
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
       }
       }
     },
     },
     moment,
     moment,
@@ -757,7 +798,6 @@ export default {
       this.form.validateFields((err, values) => {
       this.form.validateFields((err, values) => {
         if (!err) {
         if (!err) {
           console.log('Received values of form: ', values)
           console.log('Received values of form: ', values)
-
           let params = {}
           let params = {}
           params.campaignId = this.campaignId
           params.campaignId = this.campaignId
           params.deliveryRange = this.deliveryRange
           params.deliveryRange = this.deliveryRange
@@ -810,16 +850,39 @@ export default {
     onChange(value) {
     onChange(value) {
       console.log(value)
       console.log(value)
     },
     },
-
     //   创建大图横图创意
     //   创建大图横图创意
     addCreative() {
     addCreative() {
-      this.HorizontalLargeImageList.push({})
+      let type = this.materialType
+      if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
+        this.HorizontalLargeImageListSmall.push({})
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
+        this.HorizontalLargeImageListBig.push({})
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
+        this.HorizontalLargeImageListZu.push({})
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
+        this.HorizontalLargeImageListShu.push({})
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
+        this.HorizontalLargeImageListBigShu.push({})
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
+      }
+      if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
+        this.HorizontalLargeImageListHeng.push({})
+        this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
+      }
     },
     },
-    deleteCreative(index){
-        console.log(index)
-        console.log(this.HorizontalLargeImageList)
-        this.HorizontalLargeImageList.splice(index,1)
-        this.horizonImageCreativeTextColl.splice(index,1)
+    deleteCreative(index) {
+      console.log(index)
+      console.log(this.HorizontalLargeImageList)
+      this.HorizontalLargeImageList.splice(index, 1)
+      this.horizonImageCreativeTextColl.splice(index, 1)
     }
     }
   },
   },
   created: function() {
   created: function() {
@@ -875,6 +938,21 @@ export default {
         this.userorentationList = res.result.records
         this.userorentationList = res.result.records
       }
       }
     })
     })
+  },
+  computed: {
+    count: function() {
+      var bool =
+        this.HorizontalLargeImageListBig.length +
+          this.HorizontalLargeImageListHeng.length +
+          this.HorizontalLargeImageListShu.length +
+          this.HorizontalLargeImageListZu.length +
+          this.HorizontalLargeImageListSmall.length +
+          this.HorizontalLargeImageListBigShu.length >=
+        10
+          ? true
+          : false
+      return bool
+    }
   }
   }
 }
 }
 </script>
 </script>

+ 243 - 237
src/views/template/userorientation/list.vue

@@ -1,11 +1,9 @@
 <template>
 <template>
   <a-card :bordered="false">
   <a-card :bordered="false">
-
     <!-- 查询区域 -->
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
       <a-form layout="inline">
         <a-row :gutter="24">
         <a-row :gutter="24">
-
           <a-col :md="6" :sm="8">
           <a-col :md="6" :sm="8">
             <a-form-item label="头条账号id">
             <a-form-item label="头条账号id">
               <a-input placeholder="请输入头条账号id" v-model="queryParam.accountId"></a-input>
               <a-input placeholder="请输入头条账号id" v-model="queryParam.accountId"></a-input>
@@ -17,30 +15,33 @@
             </a-form-item>
             </a-form-item>
           </a-col>
           </a-col>
 
 
-            <a-col :md="6" :sm="8">
-              <a-form-item label="定向人群包列表">
-                <a-input placeholder="请输入定向人群包列表" v-model="queryParam.retargetingTagsInclude"></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :md="6" :sm="8">
-              <a-form-item label="排除人群包列表">
-                <a-input placeholder="请输入排除人群包列表" v-model="queryParam.retargetingTagsExclude"></a-input>
-              </a-form-item>
-            </a-col>
-            <a-col :md="6" :sm="8">
-              <a-form-item label="受众性别">
-                <a-input placeholder="请输入受众性别" v-model="queryParam.gender"></a-input>
-              </a-form-item>
-            </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="定向人群包列表">
+              <a-input placeholder="请输入定向人群包列表" v-model="queryParam.retargetingTagsInclude"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="排除人群包列表">
+              <a-input placeholder="请输入排除人群包列表" v-model="queryParam.retargetingTagsExclude"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="受众性别">
+              <a-input placeholder="请输入受众性别" v-model="queryParam.gender"></a-input>
+            </a-form-item>
+          </a-col>
 
 
-          <a-col :md="6" :sm="8" >
+          <a-col :md="6" :sm="8">
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-
+              <a-button
+                type="primary"
+                @click="searchReset"
+                icon="reload"
+                style="margin-left: 8px"
+              >重置</a-button>
             </span>
             </span>
           </a-col>
           </a-col>
-
         </a-row>
         </a-row>
       </a-form>
       </a-form>
     </div>
     </div>
@@ -49,10 +50,9 @@
     <div class="table-operator">
     <div class="table-operator">
       <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
       <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
     </div>
     </div>
-
+    <!-- <transfer :checkData.sync="dataBox" /> -->
     <!-- table区域-begin -->
     <!-- table区域-begin -->
     <div>
     <div>
-
       <a-table
       <a-table
         ref="table"
         ref="table"
         size="middle"
         size="middle"
@@ -63,12 +63,11 @@
         :pagination="ipagination"
         :pagination="ipagination"
         :loading="loading"
         :loading="loading"
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange">
-
+        @change="handleTableChange"
+      >
         <span slot="action" slot-scope="text, record">
         <span slot="action" slot-scope="text, record">
           <a @click="handleEdit(record)">编辑</a>
           <a @click="handleEdit(record)">编辑</a>
         </span>
         </span>
-
       </a-table>
       </a-table>
     </div>
     </div>
     <!-- table区域-end -->
     <!-- table区域-end -->
@@ -79,221 +78,228 @@
 </template>
 </template>
 
 
 <script>
 <script>
-  import ByteDanceUserOrientationTemplateModal from './modules/ByteDanceUserOrientationTemplateModal'
-  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import ByteDanceUserOrientationTemplateModal from './modules/ByteDanceUserOrientationTemplateModal'
+import transfer from './modules/transfer'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 
 
-  export default {
-    name: "ByteDanceUserOrientationTemplateList",
-    mixins:[JeecgListMixin],
-    components: {
-      ByteDanceUserOrientationTemplateModal
-    },
-    data () {
-      return {
-        description: '今日头条受众模板信息管理页面',
-        // 表头
-        columns: [
-          {
-            title: '#',
-            dataIndex: '',
-            key:'rowIndex',
-            width:60,
-            align:"center",
-            customRender:function (t,r,index) {
-              return parseInt(index)+1;
-            }
-          },
-          {
-            title: '头条账号id',
-            align:"center",
-            dataIndex: 'accountId'
-          },
-          {
-            title: '广告主id',
-            align:"center",
-            dataIndex: 'advertiserId'
-          },
-          {
-            title: '定向人群包列表',
-            align:"center",
-            dataIndex: 'retargetingTagsInclude'
-          },
-          {
-            title: '排除人群包列表',
-            align:"center",
-            dataIndex: 'retargetingTagsExclude'
-          },
-          {
-            title: '受众性别',
-            align:"center",
-            dataIndex: 'gender'
-          },
-          {
-            title: '年龄',
-            align:"center",
-            dataIndex: 'age'
-          },
-          {
-            title: '受众最低android版本',
-            align:"center",
-            dataIndex: 'androidOsv'
-          },
-          {
-            title: '受众最低ios版本',
-            align:"center",
-            dataIndex: 'iosOsv'
-          },
-          {
-            title: '运营商类型',
-            align:"center",
-            dataIndex: 'carrier'
-          },
-          {
-            title: '受众网络类型',
-            align:"center",
-            dataIndex: 'ac'
-          },
-          {
-            title: '手机品牌',
-            align:"center",
-            dataIndex: 'deviceBrand'
-          },
-          {
-            title: '受众文章分类',
-            align:"center",
-            dataIndex: 'articleCategory'
-          },
-          {
-            title: '用户首次激活时间',
-            align:"center",
-            dataIndex: 'activateType'
-          },
-          {
-            title: '受众平台',
-            align:"center",
-            dataIndex: 'platform'
-          },
-          {
-            title: '地域定向城市或者区县列表',
-            align:"center",
-            dataIndex: 'city'
-          },
-          {
-            title: '商圈ID数组',
-            align:"center",
-            dataIndex: 'businessIds'
-          },
-          {
-            title: '地域类型',
-            align:"center",
-            dataIndex: 'district'
-          },
-          {
-            title: '受众位置类型',
-            align:"center",
-            dataIndex: 'locationType'
-          },
-          {
-            title: '兴趣分类',
-            align:"center",
-            dataIndex: 'adTag'
-          },
-          {
-            title: '兴趣关键词, 传入具体的词id,非兴趣词包id',
-            align:"center",
-            dataIndex: 'interestTags'
-          },
-          {
-            title: '行为定向',
-            align:"center",
-            dataIndex: 'appBehaviorTarget'
-          },
-          {
-            title: 'APP行为定向,分类集合',
-            align:"center",
-            dataIndex: 'appCategory'
-          },
-          {
-            title: 'APP行为定向,APP集合',
-            align:"center",
-            dataIndex: 'appIds'
-          },
-          {
-            title: '产品目录ID(ID由查询产品目录接口得到)',
-            align:"center",
-            dataIndex: 'productPlatformId'
-          },
-          {
-            title: 'H5地址参数',
-            align:"center",
-            dataIndex: 'externalUrlParams'
-          },
-          {
-            title: '直达链接参数',
-            align:"center",
-            dataIndex: 'openUrlParams'
-          },
-          {
-            title: '是否自定义商品定向',
-            align:"center",
-            dataIndex: 'dpaLocalAudience'
-          },
-          {
-            title: '排除人群包',
-            align:"center",
-            dataIndex: 'excludeCustomActions'
-          },
-          {
-            title: '包含人群包',
-            align:"center",
-            dataIndex: 'includeCustomActions'
-          },
-          {
-            title: '精选流量包',
-            align:"center",
-            dataIndex: 'superiorPopularityType'
-          },
-          {
-            title: '定向流量包ID数组',
-            align:"center",
-            dataIndex: 'flowPackage'
-          },
-          {
-            title: '排除流量包ID数组',
-            align:"center",
-            dataIndex: 'excludeFlowPackage'
-          },
-          {
-            title: 'status',
-            align:"center",
-            dataIndex: 'status'
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align:"center",
-            scopedSlots: { customRender: 'action' },
+export default {
+  name: 'ByteDanceUserOrientationTemplateList',
+  mixins: [JeecgListMixin],
+  components: {
+    ByteDanceUserOrientationTemplateModal,
+    transfer
+  },
+  data() {
+    return {
+      description: '今日头条受众模板信息管理页面',
+      // 表头
+      columns: [
+        {
+          title: '#',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function(t, r, index) {
+            return parseInt(index) + 1
           }
           }
-        ],
-        url: {
-          list: "/ctop/byteDanceUserOrientationTemplate/list",
-          delete: "/ctop/byteDanceUserOrientationTemplate/delete",
-          deleteBatch: "/ctop/byteDanceUserOrientationTemplate/deleteBatch",
-          exportXlsUrl: "ctop/byteDanceUserOrientationTemplate/exportXls",
-          importExcelUrl: "ctop/byteDanceUserOrientationTemplate/importExcel",
-        },
-      }
-    },
-    computed: {
-      importExcelUrl: function(){
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
-      }
-    },
-    methods: {
-
+        },
+        {
+          title: '头条账号id',
+          align: 'center',
+          dataIndex: 'accountId'
+        },
+        {
+          title: '广告主id',
+          align: 'center',
+          dataIndex: 'advertiserId'
+        },
+        {
+          title: '定向人群包列表',
+          align: 'center',
+          dataIndex: 'retargetingTagsInclude'
+        },
+        {
+          title: '排除人群包列表',
+          align: 'center',
+          dataIndex: 'retargetingTagsExclude'
+        },
+        {
+          title: '受众性别',
+          align: 'center',
+          dataIndex: 'gender'
+        },
+        {
+          title: '年龄',
+          align: 'center',
+          dataIndex: 'age'
+        },
+        {
+          title: '受众最低android版本',
+          align: 'center',
+          dataIndex: 'androidOsv'
+        },
+        {
+          title: '受众最低ios版本',
+          align: 'center',
+          dataIndex: 'iosOsv'
+        },
+        {
+          title: '运营商类型',
+          align: 'center',
+          dataIndex: 'carrier'
+        },
+        {
+          title: '受众网络类型',
+          align: 'center',
+          dataIndex: 'ac'
+        },
+        {
+          title: '手机品牌',
+          align: 'center',
+          dataIndex: 'deviceBrand'
+        },
+        {
+          title: '受众文章分类',
+          align: 'center',
+          dataIndex: 'articleCategory'
+        },
+        {
+          title: '用户首次激活时间',
+          align: 'center',
+          dataIndex: 'activateType'
+        },
+        {
+          title: '受众平台',
+          align: 'center',
+          dataIndex: 'platform'
+        },
+        {
+          title: '地域定向城市或者区县列表',
+          align: 'center',
+          dataIndex: 'city'
+        },
+        {
+          title: '商圈ID数组',
+          align: 'center',
+          dataIndex: 'businessIds'
+        },
+        {
+          title: '地域类型',
+          align: 'center',
+          dataIndex: 'district'
+        },
+        {
+          title: '受众位置类型',
+          align: 'center',
+          dataIndex: 'locationType'
+        },
+        {
+          title: '兴趣分类',
+          align: 'center',
+          dataIndex: 'adTag'
+        },
+        {
+          title: '兴趣关键词, 传入具体的词id,非兴趣词包id',
+          align: 'center',
+          dataIndex: 'interestTags'
+        },
+        {
+          title: '行为定向',
+          align: 'center',
+          dataIndex: 'appBehaviorTarget'
+        },
+        {
+          title: 'APP行为定向,分类集合',
+          align: 'center',
+          dataIndex: 'appCategory'
+        },
+        {
+          title: 'APP行为定向,APP集合',
+          align: 'center',
+          dataIndex: 'appIds'
+        },
+        {
+          title: '产品目录ID(ID由查询产品目录接口得到)',
+          align: 'center',
+          dataIndex: 'productPlatformId'
+        },
+        {
+          title: 'H5地址参数',
+          align: 'center',
+          dataIndex: 'externalUrlParams'
+        },
+        {
+          title: '直达链接参数',
+          align: 'center',
+          dataIndex: 'openUrlParams'
+        },
+        {
+          title: '是否自定义商品定向',
+          align: 'center',
+          dataIndex: 'dpaLocalAudience'
+        },
+        {
+          title: '排除人群包',
+          align: 'center',
+          dataIndex: 'excludeCustomActions'
+        },
+        {
+          title: '包含人群包',
+          align: 'center',
+          dataIndex: 'includeCustomActions'
+        },
+        {
+          title: '精选流量包',
+          align: 'center',
+          dataIndex: 'superiorPopularityType'
+        },
+        {
+          title: '定向流量包ID数组',
+          align: 'center',
+          dataIndex: 'flowPackage'
+        },
+        {
+          title: '排除流量包ID数组',
+          align: 'center',
+          dataIndex: 'excludeFlowPackage'
+        },
+        {
+          title: 'status',
+          align: 'center',
+          dataIndex: 'status'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: '/ctop/byteDanceUserOrientationTemplate/list',
+        delete: '/ctop/byteDanceUserOrientationTemplate/delete',
+        deleteBatch: '/ctop/byteDanceUserOrientationTemplate/deleteBatch',
+        exportXlsUrl: 'ctop/byteDanceUserOrientationTemplate/exportXls',
+        importExcelUrl: 'ctop/byteDanceUserOrientationTemplate/importExcel'
+      },
+      widthCount: '100%',
+      showClass: false,
+      dataBox: []
+    }
+  },
+  computed: {
+    importExcelUrl: function() {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+    }
+  },
+  methods: {
+    a() {
+      this.showClass = true
     }
     }
   }
   }
+}
 </script>
 </script>
 <style scoped>
 <style scoped>
-  @import '~@assets/less/common.less'
+@import '~@assets/less/common.less';
 </style>
 </style>

+ 6 - 0
src/views/template/userorientation/modules/README.md

@@ -0,0 +1,6 @@
+# transfer 区域选择组件 使用文档
+  
+###### 说明: 
+## 参数配置
+| 参数           | 类型      | 必填 |说明|
+

+ 224 - 0
src/views/template/userorientation/modules/transfer.vue

@@ -0,0 +1,224 @@
+<style scoped>
+.transfer {
+  display: flex;
+}
+.transfer .transfer-box {
+  /* width: 350px; */
+  height: 250px;
+  border: 1px solid #dadfe3;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-sizing: border-box;
+  margin-right: 25px;
+}
+.content-box {
+  min-width: 174px;
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid #dadfe3;
+}
+.content-box .content-title {
+  width: 100%;
+  background: #f8f9fa;
+  border-bottom: 1px solid #dadfe3;
+  padding: 5px 15px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 30px;
+}
+.content-box .content {
+  width: 100%;
+  height: 85%;
+  overflow: auto;
+}
+.content-box .content p:hover {
+  background: #edf1f5;
+  cursor: pointer;
+}
+.content-box .content p:hover span {
+  display: inline-block;
+}
+.content-box .content p span {
+  display: none;
+}
+p {
+  padding: 5px;
+  margin-bottom: 0;
+  border-bottom: 1px solid #f2f2f2;
+}
+.backgroundOnly {
+  background: #edf1f5;
+}
+</style>
+
+<template>
+  <div class="transfer">
+    <div class="transfer-box">
+      <div class="content-box">
+        <p class="content-title">省份</p>
+        <div class="content">
+          <p
+            v-for="(item,index) of province"
+            :key="item.id"
+            @click="showCity(item,index)"
+            :class="{backgroundOnly:provinceIndex == index}"
+          >{{item.name}}</p>
+        </div>
+      </div>
+      <div
+        class="content-box"
+        :style="{borderRight:!showClass?'0px':'1px solid #dadfe3'}"
+        v-show="showCityData"
+      >
+        <p class="content-title">城市</p>
+        <div class="content">
+          <p
+            v-for="(item,index) of city"
+            :key="item.id"
+            @click="showRegion(item.code,index)"
+            :class="{backgroundOnly:cityIndex == index}"
+          >{{item.name}}</p>
+        </div>
+      </div>
+      <div class="content-box" v-show="showClass" style="border-right:0px">
+        <p class="content-title">区域</p>
+        <div class="content">
+          <!-- <p @click="allCheck">{{checkAll?"√":""}}全选</p> -->
+          <p
+            v-for="item of area"
+            :key="item.id"
+            @click="add(item)"
+            :class="{backgroundOnly:checkMatched.indexOf( item.id )!=-1}"
+          >{{item.name}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="transfer-box" style="width:176px">
+      <div class="content-box">
+        <p class="content-title">
+          已选
+          <span
+            style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
+            @click="clear"
+          >清空</span>
+        </p>
+        <div class="content">
+          <p v-for="(item,index) of checkData" :key="index">
+            {{item.name}}
+            <span
+              style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
+              @click="detele(index)"
+            >删除</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { getProvince } from '@/api/manage'
+export default {
+  name: 'ByteDanceUserOrientationTemplateList',
+  components: {},
+  data() {
+    return {
+      showClass: false,
+      showCityData: false,
+      checkData: [],
+      checkMatched: [],
+      province: [],
+      city: [],
+      area: [],
+      CityData: '/ctop/bytedanceAreaInfo/listbycode',
+      provinceIndex: null,
+      cityIndex: null,
+      checkAll: false,
+      arr: []
+    }
+  },
+  computed: {},
+  mounted() {
+    this.$nextTick(() => {
+      this.getData()
+    })
+  },
+  methods: {
+    getData() {
+      getProvince(this.CityData, { parentCode: '' }).then(res => {
+        if (res.code == '0') {
+          this.province.push(...res.result.records)
+        }
+      })
+    },
+    showCity(item, index) {
+      this.city = []
+      this.showCityData = false
+      this.showClass = false
+      this.provinceIndex = index
+      this.cityIndex = null
+      if (item.name == '北京') {
+        this.city.push(item)
+        this.showCityData = true
+      } else {
+        getProvince(this.CityData, { parentCode: item.code }).then(res => {
+          if (res.code == '0') {
+            this.city.push(...res.result.records)
+            this.showCityData = true
+          }
+        })
+      }
+    },
+    showRegion(item, index) {
+      this.area = []
+      this.cityIndex = index
+      getProvince(this.CityData, { parentCode: item }).then(res => {
+        if (res.code == '0') {
+          console.log(res)
+          this.area.push(...res.result.records)
+          this.arr = res.result.records
+          this.showClass = true
+        }
+      })
+    },
+    add(item) {
+      if (this.checkMatched.indexOf(item.id) != -1) {
+        var index = this.checkData.findIndex(v => v.id === item.id)
+        this.checkData.splice(index, 1)
+        this.checkMatched.splice(index, 1)
+        this.$emit('update:checkData', this.checkData)
+      } else {
+        this.checkData.push(item)
+        this.checkMatched.push(item.id)
+        this.$emit('update:checkData', this.checkData)
+      }
+    },
+    allCheck() {
+      this.checkAll = !this.checkAll
+      if (this.checkAll) {
+        this.checkData.push(...this.area)
+        var dataId = this.area.map(item => {
+          return item.id
+        })
+        this.checkMatched.push(...dataId)
+      } else {
+        this.checkData.splice(this.checkData.length - this.arr.length, this.arr.length)
+        this.checkMatched.splice(this.checkData.length - this.arr.length, this.arr.length)
+      }
+    },
+    clear() {
+      this.checkData = []
+      this.checkMatched = []
+      this.checkAll = false
+      this.$emit('update:checkData', this.checkData)
+    },
+    detele(index) {
+      this.checkData.splice(index, 1)
+      this.checkMatched.splice(index, 1)
+      this.$emit('update:checkData', this.checkData)
+    }
+  }
+}
+</script>