ソースを参照

修改智能定向

朱鑫波 4 年 前
コミット
f7045aa3e7

+ 0 - 1
src/components/menu/index.js

@@ -59,7 +59,6 @@ export default {
   methods: {
     // select menu item
     onOpenChange (openKeys) {
-
       // 在水平模式下时执行,并且不再执行后续
       if (this.mode === 'horizontal') {
         this.openKeys = openKeys

+ 1 - 1
src/views/modules/Statistics/components/Treeselect.vue

@@ -105,7 +105,7 @@ export default {
     $route(n, o) {},
     appId: {
       handler(n, o) {
-        console.log(n)
+
         if (n.length == 0) {
           if (this.multiple) {
             this.value = []

+ 1 - 1
src/views/modules/earlyWarningRules/pushTreeSelect.vue

@@ -65,7 +65,7 @@ export default {
     },
     appId: {
       handler(n, o) {
-        console.log(n)
+        
         if (n.length == 0) {
           if (this.multiple) {
             this.value = []

+ 76 - 24
src/views/modules/kuaishouapp/account/stepForm/Step2.vue

@@ -133,16 +133,47 @@
       <div style="text-align:center;font-size:16px;margin-bottom:10px">
         目标人群
       </div>
+      <a-form-item  label="定向方式" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
+        <a-radio-group buttonStyle="solid" @change="getTemplateTypeList"
+          v-decorator="['autoTarget', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: false }]">
+          <a-radio-button :value="false">自定义</a-radio-button>
+          <a-radio-button :value="true">智能定向</a-radio-button>
+        </a-radio-group>
+
+      </a-form-item>
       <a-form-item label="选择模板" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
         :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
-        <a-select showSearch allowClear placeholder="选择模板" optionFilterProp="children" style="width: 500px"
+        <!-- <a-select showSearch allowClear placeholder="选择模板" optionFilterProp="children" style="width: 500px"
           @change="handleChangeMould" :filterOption="filterOption">
           <a-select-option v-for="(appModel, index) in dataList" :key="index" :value="appModel.id">
             {{ appModel.templateName }}
           </a-select-option>
+        </a-select> -->
+
+        <a-select
+          v-decorator="['templateId']"
+          showSearch
+          allowClear
+          placeholder="选择定向模板"
+          optionFilterProp="children"
+          style="width: 500px"
+          :filterOption="filterOption"
+        >
+          <a-select-option v-for="appModel in templateList" :key="appModel.templateId" :value="appModel.templateId">
+            {{ appModel.templateName }}
+          </a-select-option>
         </a-select>
+        <a-button type="primary" @click="getTemplate(null)" :loading="templateLoading"> 刷新模板</a-button>
+        <br>
+        <a style="margin: 0 10px 0 0" @click="addTemplate(null)">新增模板</a>
+        <a
+          @click="lookTemplate(null, getData('templateId'))"
+          :disabled="getData('templateId') == '' || getData('templateId') == null"
+          >查看模板</a
+        >
       </a-form-item>
-      <targeted-population ref="population" :populationData.sync="populationData"
+      <!-- <targeted-population ref="population" :populationData.sync="populationData"
         :platform="getPlatForm(getData('appId'))" :lol="allForm.allianceAccount"/>
       <a-form-item label=" " :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
         :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label">
@@ -152,7 +183,7 @@
           </a-checkbox>
           <a-input v-model="nameValue" v-if="checkedTrue" placeholder="请输入模板名称" style="width:70%" />
         </div>
-      </a-form-item>
+      </a-form-item> -->
 
       <div style="text-align:center;font-size:16px">
         预算和排期
@@ -410,6 +441,7 @@
         </a-button>
       </template>
     </a-modal>
+    <templateModal ref="templateModal" @getData="getTemplateList" />
   </a-card>
 </template>
 
@@ -426,7 +458,7 @@
 
   import creatApplication from './stepModule/creatApplication.vue'
   import targetedPopulation from './stepModule/targetedPopulation.vue'
-
+  import templateModal from '@/views/modules/kuaishouapp/crossAccount/templateModal'
   import selectCheckAll from './stepModule/test'
   let dateQuantumRangeConst = ''
   const columns = [{
@@ -535,6 +567,7 @@
       creatApplication,
       targetedPopulation,
       selectCheckAll,
+      templateModal
     },
     props: {
       campaignId: {
@@ -599,7 +632,8 @@
           allianceAccount:"1"
         },
         convertType: '1',
-        dataList: []
+        templateList: [],
+        templateLoading:false
       }
     },
     computed: {
@@ -1005,17 +1039,6 @@
           }
         })
       },
-      handleChangeMould(value) {
-        if (value) {
-          this.populationData = JSON.parse(
-            this.dataList.filter(item => {
-              return item.id == value
-            })[0].templateContent
-          )
-        } else {
-          this.populationData = {}
-        }
-      },
       getPlatForm(appId) {
         if (appId) {
           var data = this.appList.filter(item => {
@@ -1036,18 +1059,47 @@
       prevStep() {
         this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignId'))
       },
-      getMould() {
-        let params = {}
-        params.accountId = localStorage.getItem('accountId')
-        getAction('/kuaishou/batch/getDirectionalTemplate', params).then(res => {
-          console.log(res)
+      lookTemplate(accountId, templateId) {
+        this.$refs.templateModal.handleOk(localStorage.getItem('accountId'), templateId, 'look')
+      },
+      addTemplate(accountId) {
+        this.$refs.templateModal.create(localStorage.getItem('accountId'), 'add')
+      },
+      getTemplateTypeList(e){
+        this.getTemplate()
+      },
+      getTemplate(accountId) {
+        var data = null
+        if (accountId) {
+          data = accountId
+        } else {
+          this.templateLoading = true
+          data = localStorage.getItem('accountId')
+        }
+        getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
+          accountId: data,
+        }).then((res) => {
           if (res.success) {
-            this.dataList = res.result.map((item, index) => {
+            this.getTemplateList(data)
+          }
+        })
+      },
+      getTemplateList(accountId) {
+        this.templateList = []
+        getAction('/batch/kuaishouTemplate/list', {
+          accountId: accountId,
+          autoTarget:this.getData('autoTarget')
+        }).then((res) => {
+          if (res.success) {
+            this.templateList = res.result.map((item, index) => {
               return {
                 ...item,
-                key: index
+                key: index,
               }
             })
+            this.templateLoading = false
+          } else {
+            this.templateLoading = false
           }
         })
       },
@@ -1103,7 +1155,7 @@
       this.step = localStorage.getItem('step')
       this.getAppList()
       this.getCampaignList()
-      this.getMould()
+      this.getTemplate(localStorage.getItem('accountId'))
 
 
 

+ 810 - 0
src/views/modules/kuaishouapp/account/stepForm/stepModule/newTarget.vue

@@ -0,0 +1,810 @@
+<style>
+#table_time_selected1 tr {
+  border: 1px solid rgb(102, 162, 243);
+}
+
+.plug-timer-grid th {
+  line-height: 25px;
+}
+
+.module-form .ant-form-item-required::before {
+  display: inline-block;
+  margin-right: 4px;
+  color: #f5222d;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: '';
+}
+.else-label .ant-form-item-label label::after {
+  content: '';
+  position: relative;
+  top: -0.5px;
+  margin: 0 8px 0 2px;
+}
+</style>
+<style scoped>
+ul {
+  padding-left: 0;
+}
+li {
+  list-style: none;
+}
+li:hover {
+  background: #f2f2f2;
+}
+</style>
+<template>
+  <a-form :form="formAll" class="module-form" @submit="handleSubmit">
+    <a-form-item
+      label="定向逻辑"
+      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+      :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
+    >
+      <a-radio-group buttonStyle="solid" v-model="targeted" @change="radioChange">
+        <a-radio-button value="3">排除</a-radio-button>
+      </a-radio-group>
+      <div
+        :style="{
+          border: targeted == '4' ? '1px solid #f2f2f2' : '0',
+          padding: targeted == '4' ? '20px' : '0',
+        }"
+        v-clickoutside="targetedShow"
+      >
+        <div style="display: flex; margin-top: 15px" v-if="targeted == '4' || targeted == '3'">
+          <a-input
+            placeholder="请至少选择一个自定义人群"
+            @focus="
+              topMiddleNo = true
+              topMiddle = false
+              dataList = dataElse
+            "
+            v-model="keyValueNo"
+            @change="showTwo"
+          />
+        </div>
+
+        <div
+          style="background: white; padding: 10px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15)"
+          :style="{ width: targeted == '4' ? '90%' : '100%', marginLeft: targeted == '4' ? '10%' : '0' }"
+          v-show="topMiddleNo"
+        >
+          <a-table
+            :columns="columns"
+            :dataSource="dataList"
+            bordered
+            :pagination="false"
+            :scroll="{ y: 300, x: true }"
+            :rowSelection="{
+              selectedRowKeys: selectedRowKeysNo,
+              onChange: onSelectChangeNo,
+              getCheckboxProps: getCheckboxPropsNo,
+            }"
+          >
+            <span slot="orientationName" slot-scope="text, record">{{ text }}({{ record.orientationId }})</span>
+            <span slot="populationType" slot-scope="text">{{ text | population_type }}</span>
+            <span slot="putTime" slot-scope="text">{{ text | getDate }}</span>
+          </a-table>
+          <div style="text-align: right">
+            <a-button style="margin-right: 5px" @click="topMiddleNo = false">取消</a-button>
+            <a-button type="primary" @click="okSelectNo">确定</a-button>
+          </div>
+        </div>
+      </div>
+    </a-form-item>
+    <a-form-item
+      label="地区"
+      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+      :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
+    >
+      <a-radio-group @change="regionChange" v-model="allForm.regionType" buttonStyle="solid">
+        <a-radio-button value="noLimit">不限</a-radio-button>
+        <a-radio-button value="limit">指定地区</a-radio-button>
+      </a-radio-group>
+      <div v-if="allForm.regionType == 'limit'" style="margin-top: 10px">
+        <select-region :checkData.sync="allForm.region" :dataValue="allForm.region" />
+      </div>
+    </a-form-item>
+    <a-form-item
+      label="年龄"
+      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+      :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
+    >
+      <a-radio-group v-model="allForm.ageType" buttonStyle="solid">
+        <a-radio-button value="noLimit">不限</a-radio-button>
+        <a-radio-button value="ageLimit">限定年龄段</a-radio-button>
+        <a-radio-button value="ageCustom">自定义年龄段</a-radio-button>
+      </a-radio-group>
+      <div v-if="allForm.ageType == 'ageLimit'" style="margin-top: 5px">
+        <a-checkbox-group v-decorator="['agesRange', { rules: [{ required: true, message: '请选择年龄段' }] }]">
+          <!-- <a-checkbox :value="0">0-11岁</a-checkbox>
+          <a-checkbox :value="12">12-17岁</a-checkbox> -->
+          <a-checkbox :value="18">18-23岁</a-checkbox>
+          <a-checkbox :value="24">24-30岁</a-checkbox>
+          <a-checkbox :value="31">31-40岁</a-checkbox>
+          <a-checkbox :value="41">41-49岁</a-checkbox>
+          <a-checkbox :value="50">50+</a-checkbox>
+        </a-checkbox-group>
+      </div>
+      <div v-if="allForm.ageType == 'ageCustom'">
+        <a-slider
+          range
+          :marks="marks"
+          :min="5"
+          :max="55"
+          v-decorator="[
+            'age',
+            {
+              rules: [{ required: true, message: '请选择年龄段' }, { validator: handleConfirmValue }],
+              initialValue: [10, 50],
+            },
+          ]"
+        />
+      </div>
+    </a-form-item>
+    <a-form-item
+      label="性别"
+      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+      :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
+    >
+      <a-radio-group
+        buttonStyle="solid"
+        v-decorator="[
+          'gender',
+          {
+            initialValue: 0,
+          },
+        ]"
+      >
+        <a-radio-button :value="0">不限</a-radio-button>
+        <a-radio-button :value="1">女性</a-radio-button>
+        <a-radio-button :value="2">男性</a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+    <a-form-item
+      label="最低版本"
+      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
+    >
+      <a-radio-group buttonStyle="solid" v-model="allForm.platform_os">
+        <a-radio-button :value="0" v-if="getApp == '0'">不限</a-radio-button>
+        <a-radio-button :value="1" v-if="getApp == '0' || getApp == '1'">Android系统</a-radio-button>
+        <a-radio-button :value="2" v-if="getApp == '0' || getApp == '2'">IOS系统</a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+    <a-form-item
+      label=" "
+      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
+      v-if="allForm.platform_os == 1"
+      class="else-label"
+      style="margin-top: -16px"
+    >
+      <a-radio-group
+        v-decorator="[
+          'androidOsv',
+          {
+            initialValue: 3,
+          },
+        ]"
+      >
+        <a-radio :value="3">不限</a-radio>
+        <a-radio :value="4">4X+</a-radio>
+        <a-radio :value="5">5x+</a-radio>
+        <a-radio :value="6">6x+</a-radio>
+        <a-radio :value="7">7x+</a-radio>
+      </a-radio-group>
+    </a-form-item>
+    <a-form-item
+      label=" "
+      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+      :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
+      v-if="allForm.platform_os == 2"
+      class="else-label"
+      style="margin-top: -16px"
+    >
+      <a-radio-group
+        v-decorator="[
+          'iosOsv',
+          {
+            initialValue: 6,
+          },
+        ]"
+      >
+        <a-radio :value="6">不限</a-radio>
+        <a-radio :value="7">7X+</a-radio>
+        <a-radio :value="8">8x+</a-radio>
+        <a-radio :value="9">9x+</a-radio>
+        <a-radio :value="10">10x+</a-radio>
+      </a-radio-group>
+    </a-form-item>
+
+    <a-form-item
+      label="过滤已转化用户"
+      :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+      :wrapperCol="{ lg: { span: 15 }, sm: { span: 15 } }"
+    >
+      <a-radio-group buttonStyle="solid" v-decorator="['filterConvertedLevel', { initialValue: 0 }]">
+        <a-radio-button :value="0">不限</a-radio-button>
+        <a-radio-button :value="1">广告组</a-radio-button>
+        <a-radio-button :value="2">广告计划</a-radio-button>
+        <a-radio-button :value="3">本账户</a-radio-button>
+        <a-radio-button :value="4">公司主体</a-radio-button>
+        <a-radio-button :value="5">APP</a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+import { getAction, postAction } from '@/api/manage'
+import moment from 'moment'
+import { mapGetters } from 'vuex'
+import jq from 'jquery'
+
+import selectRegion from './selectRegion'
+import pick from 'lodash.pick'
+let dateQuantumRangeConst = ''
+const clickoutside = {
+  // 初始化指令
+  bind(el, binding, vnode) {
+    function documentHandler(e) {
+      // 这里判断点击的元素是否是本身,是本身,则返回
+      if (el.contains(e.target)) {
+        return false
+      }
+      // 判断指令中是否绑定了函数
+      if (binding.expression) {
+        // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
+        binding.value(e)
+      }
+    }
+    // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
+    el.__vueClickOutside__ = documentHandler
+    document.addEventListener('click', documentHandler)
+  },
+  update() {},
+  unbind(el, binding) {
+    // 解除事件监听
+    document.removeEventListener('click', el.__vueClickOutside__)
+    delete el.__vueClickOutside__
+  },
+}
+
+const columns = [
+  {
+    title: '人群',
+    dataIndex: 'orientationName',
+    scopedSlots: { customRender: 'orientationName' },
+    width: 150,
+  },
+  {
+    title: '属性',
+    dataIndex: 'populationType',
+    filters: [
+      { text: '上传人群', value: '1' },
+      { text: '广告人群', value: '2' },
+      { text: '主题专区', value: '3' },
+      { text: '逻辑规则', value: '4' },
+      { text: '人群扩展', value: '5' },
+      { text: '平台定制', value: '6' },
+      { text: '定制付费', value: '7' },
+      { text: '网红粉丝类别', value: '8' },
+      { text: '内容付费行为', value: '9' },
+      { text: '移动应用安装', value: '10' },
+      { text: '快手使用活跃度', value: '11' },
+      { text: '行业分类', value: '12' },
+      { text: '商业兴趣', value: '13' },
+      { text: '固化标签', value: '14' },
+      { text: '行业偏好', value: '15' },
+      { text: '第三方标签', value: '16' },
+      { text: '产品关键词', value: '17' },
+    ],
+    onFilter: (value, record) => record.populationType.toString().toLowerCase().includes(value.toLowerCase()),
+    scopedSlots: { customRender: 'populationType' },
+    width: 150,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'putTime',
+    scopedSlots: { customRender: 'putTime' },
+    sorter: (a, b) => a.putTime - b.putTime,
+  },
+]
+
+export default {
+  name: 'BaseForm',
+  components: { selectRegion },
+  props: {
+    campaignId: {
+      type: String,
+      default() {
+        return null
+      },
+    },
+    platform: {
+      default() {
+        return null
+      },
+    },
+    populationData: {},
+    lol: {
+      type: String,
+      default() {
+        return '1'
+      },
+    },
+  },
+  filters: {
+    getDate(value) {
+      let date = new Date(value)
+      let y = date.getFullYear()
+      let MM = date.getMonth() + 1
+      MM = MM < 10 ? '0' + MM : MM
+      let d = date.getDate()
+      d = d < 10 ? '0' + d : d
+      return y + '-' + MM + '-' + d
+    },
+    platform(str) {
+      var data = {
+        1: 'Android应用下载',
+        2: 'Android网页游戏',
+        3: 'iOS应用下载',
+        4: 'iOS网页游戏',
+      }
+      return data[str]
+    },
+    population_type(str) {
+      var data = {
+        1: '上传人群',
+        2: '广告人群',
+        3: '主题专区',
+        4: '逻辑规则',
+        5: '人群扩展',
+        6: '平台定制',
+        7: '定制付费',
+        8: '网红粉丝类别',
+        9: '内容付费行为',
+        10: '移动应用安装',
+        11: '快手使用活跃度',
+        12: '行业分类',
+        13: '商业兴趣',
+        14: '固化标签',
+        15: '行业偏好',
+        16: '第三方标签',
+        17: '产品关键词',
+      }
+      return data[str]
+    },
+  },
+  watch: {
+    platform(n, o) {
+      if (n == 1 || n == 2) {
+        // platform_os
+        this.allForm.platform_os = 1
+        // this.form.setFieldsValue({ platform_os: '1' })
+      } else if (n == 3 || n == 4) {
+        this.allForm.platform_os = 2
+        // this.form.setFieldsValue({ platform_os: '2' })
+      } else {
+        this.allForm.platform_os = 0
+        // this.form.setFieldsValue({ platform_os: '0' })
+      }
+    },
+    populationData: {
+      immediate: true, // immediate选项可以开启首次赋值监听
+      handler(n, oldVal) {
+        console.log(n)
+        if (n.allForm) {
+          this.allForm = n.allForm
+          this.allForm.noAgeBreak = n.noAgeBreak == '0' ? false : true
+          this.allForm.noGenderBreak = n.noGenderBreak == '0' ? false : true
+          this.allForm.noAreaBreak = n.noAreaBreak == '0' ? false : true
+          //   this.selectedRowKeys = n.population ? n.population : []
+          this.selectedRowKeysNo = n.excludePopulation ? n.excludePopulation : []
+          this.optionsAll = n.appIds ? (typeof n.appIds == 'string' ? JSON.parse(n.appIds) : n.appIds) : []
+          this.targeted = '3'
+          this.people = n.excludePopulation ? '3' : n.population ? '3' : '2'
+          this.getPeople().then((res) => {
+            if (n.excludePopulation) {
+              this.keyValueNo = ''
+              this.selectedRowKeysValueNo = []
+              for (let i = 0; i < res.length; i++) {
+                for (let j = 0; j < n.excludePopulation.length; j++) {
+                  if (res[i].orientationId == n.excludePopulation[j]) {
+                    this.keyValueNo += res[i].orientationName + '   '
+                    this.selectedRowKeysValueNo.push({
+                      orientationId: res[i].orientationId,
+                      orientationName: res[i].orientationName,
+                    })
+                    this.selectedRowKeysNo.push()
+                  }
+                }
+              }
+            }
+            if (n.population) {
+              this.keyValue = ''
+              this.selectedRowKeysValue = []
+              for (let i = 0; i < res.length; i++) {
+                for (let j = 0; j < n.population.length; j++) {
+                  if (res[i].orientationId == n.population[j]) {
+                    this.keyValue += res[i].orientationName + '   '
+                    this.selectedRowKeysValue.push({
+                      orientationId: res[i].orientationId,
+                      orientationName: res[i].orientationName,
+                    })
+                  }
+                }
+              }
+            }
+          })
+          this.$nextTick(() => {
+            this.formAll.setFieldsValue(
+              pick(n, [
+                'appInterest',
+                'gender',
+                'network',
+                'agesRange',
+                'age',
+                'androidOsv',
+                'iosOsv',
+                'deviceBrand',
+                'devicePrice',
+                'filterConvertedLevel',
+              ])
+            )
+          })
+        } else {
+          this.formAll.resetFields()
+          this.selectedRowKeys = []
+          this.selectedRowKeysNo = []
+          this.selectedRowKeysValueNo = []
+          this.selectedRowKeysValue = []
+          this.targeted = '2'
+          this.people = '2'
+          this.allForm = {
+            regionType: 'noLimit',
+            region: [],
+            ageType: 'noLimit',
+            age: [],
+            device: '0',
+            price: '0',
+            appType: '0',
+            platform_os: 0,
+            isOpen: 0,
+            noAgeBreak: false,
+            noGenderBreak: false,
+            noAreaBreak: false,
+          }
+        }
+      },
+    },
+    checkArr(n, o) {
+      console.log(n, o)
+      this.optionsAll.push(...n)
+      this.optionsAll = [...new Set(this.optionsAll)]
+      if (n.length != o.length) {
+        if (n.length < o.length) {
+          var a = new Set(n)
+          var b = new Set(o)
+          var c = new Set([...b].filter((item) => !a.has(item))) // {1}
+          console.log(...c)
+          var d = this.optionsAll.indexOf(...c)
+          if (d > 0) {
+            this.optionsAll.splice(d, 1)
+          }
+        }
+      }
+    },
+    'allForm.isOpen': function (n, o) {
+      console.log(n, o)
+      if (n == 0) {
+        this.allForm.noAgeBreak = false
+        this.allForm.noGenderBreak = false
+        this.allForm.noAreaBreak = false
+      }
+    },
+  },
+  directives: { clickoutside },
+  data() {
+    return {
+      optionsAll: [],
+      formAll: this.$form.createForm(this),
+      marks: {
+        5: '5岁',
+        10: '10岁',
+        15: '15岁',
+        20: '20岁',
+        25: '25岁',
+        30: '30岁',
+        35: '35岁',
+        40: '40岁',
+        45: '45岁',
+        50: '50岁',
+        55: '55岁',
+      },
+      step: 0,
+      loading: false,
+      checkArr: [],
+      appListValue: '',
+      checkAll: false,
+      allForm: {
+        regionType: 'noLimit',
+        region: [],
+        ageType: 'noLimit',
+        age: [],
+        device: '0',
+        price: '0',
+        appType: '0',
+        platform_os: 0,
+        isOpen: 0,
+        noAgeBreak: false,
+        noGenderBreak: false,
+        noAreaBreak: false,
+        people: '2',
+        targeted: '3',
+        topMiddle: false,
+        topMiddleNo: false,
+        keyValue: '',
+        keyValueNo: '',
+      },
+      options: [],
+      optionsAll: [],
+      optionProps: {
+        value: 'regionId',
+        label: 'name',
+        children: 'children',
+        multiple: true,
+        emitPath: false,
+        // checkStrictly: true
+      },
+      checkOptions: [],
+      businessOptions: [],
+      optionPropsApp: {
+        value: 'tagId',
+        label: 'tagName',
+        children: 'children',
+        multiple: true,
+        emitPath: false,
+      },
+      getApp: '0',
+      closeDialog: false,
+      indeterminate: false,
+      checkAll: false,
+      people: '2',
+      targeted: '3',
+      topMiddle: false,
+      topMiddleNo: false,
+      keyValue: '',
+      keyValueNo: '',
+      columns,
+      selectedRowKeys: [],
+      selectedRowKeysValue: [],
+      selectedRowKeysNo: [],
+      selectedRowKeysValueNo: [],
+      dataList: [],
+      dataElse: [],
+    }
+  },
+  computed: {},
+  methods: {
+    getPeople() {
+      var data = ''
+      if (this.$route.path == '/creat/creatUnit') {
+        data = localStorage.getItem('campaignAccountId')
+      } else {
+        data = localStorage.getItem('accountId')
+      }
+      return new Promise((resolve, reject) => {
+        getAction('/kuaishou/batch/getPopulationList', { accountId: data }).then((res) => {
+          if (res.success) {
+            if (res.result) {
+              this.dataList = res.result.map((item, index) => {
+                return {
+                  ...item,
+                  key: index,
+                }
+              })
+              this.dataElse = this.dataList
+              resolve(res.result)
+            }
+          }
+        })
+      })
+    },
+    radioChange() {
+      this.selectedRowKeys = []
+      this.selectedRowKeysValue = []
+      this.selectedRowKeysNo = []
+      this.selectedRowKeysValueNo = []
+      this.keyValue = ''
+      this.keyValueNo = ''
+    },
+    onSelectChangeNo(selectedRowKeys, selectionRows) {
+      this.selectedRowKeysNo = selectedRowKeys
+      this.selectedRowKeysValueNo = selectionRows.map((item) => {
+        return { orientationId: item.orientationId, orientationName: item.orientationName }
+      })
+    },
+    getCheckboxPropsNo(record) {
+      return {
+        props: {
+          disabled: this.selectedRowKeysValue.some((item) => item.orientationId === record.orientationId),
+        },
+      }
+    },
+    okSelect() {
+      this.keyValue = ''
+      this.topMiddle = false
+      for (let i = 0; i < this.selectedRowKeysValue.length; i++) {
+        this.keyValue += this.selectedRowKeysValue[i].orientationName + '   '
+      }
+    },
+    showTwo() {
+      //    this.keyValueNo =orientationName
+      var data = this.keyValueNo.split('   ')
+      this.dataList = this.dataElse.filter((item) => {
+        return item.orientationName.toLowerCase().indexOf(data[data.length - 1].toLowerCase()) > -1
+      })
+    },
+    getRegion(data) {
+      this.$refs.cascaderRegion.getCheckedNodes()
+      var dataName = this.$refs.cascaderRegion.getCheckedNodes()
+      var jsonArr = data
+      for (let i = 0; i < dataName.length; i++) {
+        for (let j = 0; j < data.length; j++) {
+          if (dataName[i].children.length > 0) {
+            if (data[j].substring(0, 2) == dataName[i].value) {
+              jsonArr.splice(j, 1)
+            }
+          }
+        }
+      }
+    },
+    handleClose(e) {
+      this.closeDialog = false
+    },
+    targetedShow(e) {
+      this.topMiddleNo = false
+    },
+    handleSubmit() {
+      //   e.preventDefault()
+      this.formAll.validateFields((err, values) => {
+        if (!err) {
+          //   this.checkArr
+          if (values.age) {
+            values.min = values.age[0]
+            values.max = values.age[1]
+          }
+          var json = {}
+          if (this.allForm.appType == '2') {
+            json.appIds = this.optionsAll
+          }
+          if (this.allForm.regionType == 'limit') {
+            json.region = this.allForm.region.map((item) => {
+              return item.value
+            })
+          }
+          var jsonData = {}
+          if (this.people == '3') {
+            if (this.targeted == '2') {
+              jsonData.population = this.selectedRowKeysValue.map((item) => {
+                return item.orientationId
+              })
+            } else if (this.targeted == '3') {
+              jsonData.excludePopulation = this.selectedRowKeysValueNo.map((item) => {
+                return item.orientationId
+              })
+            } else if (this.targeted == '4') {
+              jsonData.population = this.selectedRowKeysValue.map((item) => {
+                return item.orientationId
+              })
+              jsonData.excludePopulation = this.selectedRowKeysValueNo.map((item) => {
+                return item.orientationId
+              })
+            } else {
+              jsonData = {}
+            }
+          }
+
+          var dataJson = {
+            ...values,
+            platformOs: this.allForm.platform_os,
+            isOpen: this.allForm.isOpen,
+            ...json,
+            noAgeBreak: this.allForm.noAgeBreak ? 1 : 0,
+            noGenderBreak: this.allForm.noGenderBreak ? 1 : 0,
+            noAreaBreak: this.allForm.noAreaBreak ? 1 : 0,
+            allForm: this.allForm,
+            ...jsonData,
+          }
+          this.$emit('update:populationData', dataJson)
+        }
+      })
+    },
+    handleConfirmValue(rule, value, callback) {
+      if (Math.abs(value[0] - value[1]) < 5) {
+        callback('自定义年龄段需要间隔大于5岁')
+      }
+      callback()
+    },
+
+    regionChange() {
+      this.allForm.region = []
+    },
+    search(e) {},
+    // put() {
+    //   var data = this.allForm.region.map((item) => {
+    //     return item[1] + ''
+    //   })
+    //   var dataElse = data.map((item) => {
+    //     return [item.substring(0, 2), item]
+    //   })
+    // },
+
+
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    getData(className) {
+      return this.formAll.getFieldValue(className)
+    },
+  },
+  mounted: function () {
+    
+  },
+}
+</script>
+
+<style type="text/css">
+.plug-timer-grid {
+  width: 100%;
+}
+
+.plug-timer-grid td,
+.plug-timer-grid th {
+  border: 1px solid #97b4d1;
+  text-align: center; /*cursor:pointer;*/
+  font-size: 10px;
+  line-height: 10px;
+}
+
+.Selected {
+  background-color: rgb(102, 162, 243);
+  opacity: 0.5;
+}
+
+.plug-timer-grid {
+  border-collapse: collapse;
+  z-index: 4;
+}
+
+.plug-timer-grid thead tr {
+  display: table-row;
+  vertical-align: inherit;
+  border-color: inherit;
+}
+
+.group-creat table td {
+  height: 20px;
+  max-width: 5px;
+  font-size: 12px;
+  text-align: center;
+  vertical-align: middle;
+  overflow: hidden;
+  transition: background 0.5s;
+  -webkit-transition: background 0.5s;
+}
+
+.plug-timer-grid tbody th {
+  width: 4%;
+}
+
+.plug-timer-grid tbody tr td {
+  width: 2%;
+}
+
+/*.clear{*/
+/*  margin:20px 0px 20px 0px;*/
+/*}*/
+</style>