朱鑫波 пре 3 година
родитељ
комит
22aff58dc7

+ 429 - 0
src/views/modules/autoLaunchRevision/components/selectRegion.vue

@@ -0,0 +1,429 @@
+<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>
+<style>
+  .transfer .ant-checkbox-group {
+    width: 100px;
+    overflow-x: hidden;
+  }
+
+  .transfer .ant-checkbox-group-item {
+    display: inline-block;
+    margin-right: 8px;
+    width: 100%;
+  }
+</style>
+
+<template>
+  <div class="transfer">
+    <div class="transfer-box">
+      <div class="content-box">
+        <p class="content-title">省份</p>
+        <div class="content" style="position:relative">
+          <!-- <div style="position:absolute;top:0;left:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.5)"
+            v-if="loading"></div> -->
+          <p><input type="checkbox" class="select_all" @change="checkAllBox" v-model="checkAll" /> 全选</p>
+
+          <p v-for="(item, index) of province" :key="item.value" :class="{ backgroundOnly: provinceIndex == index }">
+            <input class="checkItem" type="checkbox" :value="item.value" :id="item.value" v-model="checkMatched"
+              @change="checkOne(item, index)" />
+            <span @click="showCity(item, index)" style="color:black;display:inline-block;margin-left:5px;width:80%">{{
+              item.label
+            }}</span>
+          </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>
+            <input
+              type="checkbox"
+              class="select_all"
+              @change="checkAllBoxCity"
+              v-model="checkAllCity"
+            /> 全选
+          </p>-->
+          <p v-for="(item, index) of city" :key="item.id" :class="{ backgroundOnly: cityIndex == index }">
+            <input class="checkItem" type="checkbox" :value="item.value" :id="item.value" v-model="checkMatchedCity"
+              @change="checkOneCity(item, index)" />
+            {{ item.label }}
+          </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.label }}
+            <!-- <span
+              style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
+              @click="detele(item,index)"
+            >删除</span>-->
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    JeecgListMixin
+  } from '@/mixins/JeecgListMixin'
+  import {
+    getProvince,
+    postAction
+  } from '@/api/manage'
+  import $ from 'jquery'
+  export default {
+    name: 'ByteDanceUserOrientationTemplateList',
+    components: {},
+    props: ['dataValue'],
+    data() {
+      return {
+        showClass: false,
+        showCityData: false,
+        checkData: [],
+        checkMatched: [],
+        province: [],
+        city: [],
+        area: [],
+        CityData: '/kuaishou/batch/getRegion',
+        provinceIndex: null,
+        cityIndex: null,
+        checkAll: false,
+        checkMatchedCity: [],
+        checkAllCity: false,
+        nowProvince: null,
+        loading: false
+      }
+    },
+    computed: {},
+    mounted() {
+      this.$nextTick(() => {
+        this.getData().then(() => {
+            console.log(this.dataValue)
+          if (this.dataValue.length>0&&this.dataValue[0].value) {
+            return
+          } else {
+            postAction('/kuaishou/batch/getRegionDetail', {
+              regionArr: this.dataValue
+            }).then(res => {
+              if (res.success) {
+                //   this.populationData.allForm.region = res.result
+                this.checkData = res.result
+                this.checkMatched = res.result.map(item => {
+                  return item.value
+                })
+                this.checkMatchedCity = res.result.map(item => {
+                  return item.value
+                })
+                this.$emit('update:checkData', this.checkData)
+              }
+            })
+          }
+
+          //   if (this.dataValue.length > 0) {
+
+          //   }
+        })
+
+      })
+    },
+    watch: {
+      dataValue: {
+        deep: true,
+        immediate: true, // immediate选项可以开启首次赋值监听
+        handler(n, o) {
+          if (n.length > 0 && n[0].value) {
+            // this.getData().then(() => {
+            console.log(1)
+            //   if (n.length > 0) {
+            this.$nextTick(() => {
+              this.checkData = n
+              this.checkMatched = n.map(item => {
+                return item.value
+              })
+              this.checkMatchedCity = n.map(item => {
+                return item.value
+              })
+              this.$emit('update:checkData', this.checkData)
+            })
+            //   }
+            // })
+
+          }
+
+        }
+      }
+    },
+    methods: {
+      getData() {
+        this.loading = true
+        var that = this
+        return new Promise(function (resolve, reject) {
+          getProvince(that.CityData, {
+            level: 1
+          }).then(res => {
+            if (res.code == '0') {
+              //   this.province.push(...res.result.records)
+              that.province = res.result.map(item => {
+                return {
+                  label: item.name,
+                  value: item.regionId
+                }
+              })
+              that.province = that.province.filter(item => {
+                return item.label != '台湾' && item.label != '香港' && item.label != '澳门'
+              })
+              that.loading = false
+              resolve()
+            }
+          })
+        })
+
+      },
+      showCity(item, index) {
+        this.city = []
+        this.showCityData = false
+        this.showClass = false
+        this.provinceIndex = index
+        this.cityIndex = null
+        this.nowProvince = item
+        this.checkMatchedCity = []
+        getProvince(this.CityData, {
+          parent: item.value
+        }).then(res => {
+          if (res.code == '0') {
+            this.city = res.result.map(item => {
+              return {
+                label: item.name,
+                value: item.regionId
+              }
+            })
+            if (this.checkMatched.indexOf(item.value) != -1) {
+              this.checkAllCity = true
+              this.checkMatchedCity = this.city.map(item => {
+                return item.value
+              })
+            } else {
+              this.checkMatchedCity = this.checkData.map(item => {
+                return item.value
+              })
+            }
+            //   this.city.push(...res.result.records)
+            this.showCityData = true
+          }
+        })
+      },
+      checkAllBox() {
+        this.checkMatched = []
+        this.checkData = []
+        if (this.checkAll) {
+          this.checkMatched = this.province.map(item => {
+            return item.value
+          })
+          this.checkData.push(...this.province)
+        } else {
+          this.checkMatched = []
+          this.checkData = []
+          this.checkMatchedCity = []
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      checkOne(item, index) {
+        if (this.checkMatched.indexOf(item.value) == -1) {
+          var index1 = this.checkData.findIndex(v => v.value === item.value)
+          this.checkData.splice(index1, 1)
+          if (this.nowProvince) {
+            if (this.nowProvince.value == item.value) {
+              this.checkMatchedCity = []
+            }
+          }
+        } else {
+          this.checkData.push(item)
+          var data = []
+          getProvince(this.CityData, {
+            parent: item.value
+          }).then(res => {
+            if (res.code == '0') {
+              data = res.result.map(item => {
+                return {
+                  label: item.name,
+                  value: item.regionId
+                }
+              })
+              for (var i = 0; i < this.checkData.length; i++) {
+                for (let j = 0; j < data.length; j++) {
+                  if (this.checkData[i].value == data[j].value) {
+                    this.checkData.splice(i, 1)
+                  }
+                }
+              }
+            }
+          })
+
+          if (this.nowProvince) {
+            if (item.value == this.nowProvince.value) {
+              this.checkMatchedCity = this.city.map(item => {
+                return item.value
+              })
+            }
+          }
+        }
+        if (this.checkMatched.length == this.province.length) {
+          this.checkAll = true
+        } else {
+          this.checkAll = false
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      checkAllBoxCity() {
+        this.checkMatchedCity = []
+        if (this.checkAllCity) {
+          this.checkMatchedCity = this.city.map(item => {
+            return item.value
+          })
+          this.checkMatched.push(this.nowProvince.value)
+          this.checkData.push(this.nowProvince)
+        } else {
+          this.checkMatchedCity = []
+          var index = this.checkData.findIndex(v => v.value === this.nowProvince.value)
+          var index1 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
+          this.checkData.splice(index, 1)
+          this.checkMatched.splice(index1, 1)
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      checkOneCity(item, index) {
+        var allCity = this.checkMatchedCity.filter(v => {
+          return v.toString().slice(0, 2) == this.nowProvince.value
+        })
+
+        if (allCity.length == this.city.length) {
+          this.checkMatched.push(this.nowProvince.value)
+          this.checkData.push(this.nowProvince)
+          for (var i = 0; i < allCity.length; i++) {
+            for (var j = 0; j < this.checkData.length; j++) {
+              if (allCity[i] == this.checkData[j].value) {
+                this.checkData.splice(j, 1)
+                j--
+              }
+            }
+          }
+        }
+        if (this.checkMatchedCity.indexOf(item.value) != -1) {
+          if (allCity.length != this.city.length) {
+            this.checkData.push(item)
+          }
+          if (this.checkMatched.length == this.province.length) {
+            this.checkAll = true
+          } else {
+            this.checkAll = false
+          }
+        } else {
+          if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
+            var index1 = this.checkData.findIndex(v => v.value === this.nowProvince.value)
+            var index2 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
+            this.checkData.splice(index1, 1)
+            this.checkMatched.splice(index2, 1)
+            this.checkAll = false
+            var data = this.city.filter(v => {
+              return v.value != item.value
+            })
+            this.checkData.push(...data)
+          } else {
+            var index1 = this.checkData.findIndex(v => v.value === item.value)
+            this.checkData.splice(index1, 1)
+          }
+        }
+        this.$emit('update:checkData', this.checkData)
+      },
+      clear() {
+        this.checkData = []
+        this.checkMatched = []
+        this.checkMatchedCity = []
+        this.checkAll = false
+        this.$emit('update:checkData', this.checkData)
+      },
+      detele(item, index) {
+        //   if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
+        var index1 = this.checkMatched.findIndex(v => v === item.value)
+        var index2 = this.checkData.findIndex(v => v.value === item.value)
+        this.checkData.splice(index2, 1)
+        this.checkMatched.splice(index1, 1)
+        this.checkAll = false
+        //   } else {
+        //   }
+
+        this.$emit('update:checkData', this.checkData)
+      }
+    }
+  }
+</script>

Разлика између датотеке није приказан због своје велике величине
+ 1576 - 0
src/views/modules/autoLaunchRevision/components/targetedPopulation.vue


+ 318 - 0
src/views/modules/autoLaunchRevision/components/templateModal.vue

@@ -0,0 +1,318 @@
+<style>
+#table_time_selected1 tr {
+    border: 1px solid rgb(102, 162, 243);
+}
+
+.plug-timer-grid th {
+    line-height: 25px;
+}
+
+.group-creat .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;
+}
+.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: '*';
+}
+</style>
+<style lang="scss" scoped>
+.require-check {
+    /deep/ .ant-form-item-label {
+        label::before {
+            display: inline-block;
+            margin-right: 4px;
+            color: #f5222d;
+            font-size: 14px;
+            font-family: SimSun, sans-serif;
+            line-height: 1;
+            content: '*';
+        }
+    }
+}
+</style>
+<template>
+    <a-modal v-model="visible" :title="type === 'add' ? '新建定向包' : '修改定向包'" :width="1100" v-if="visible">
+        <a-spin :spinning="spinning">
+            <a-form @submit="handleSubmit" :form="form">
+                <a-row :gutter="24">
+                    <a-col :md="24" :sm="24" :xxl="24">
+                        <a-form-item
+                            label="账户ID"
+                            :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+                            :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
+                            class="require-check"
+                        >
+                            <!-- <a-input v-model="accountId" :disabled="disabled"></a-input> -->
+                            {{ accountId }}
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-form-item
+                    label="定向包名称"
+                    :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
+                    :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
+                >
+                    <a-input
+                        v-decorator="['templateName', { rules: [{ required: true, message: '模板名称必填' }] }]"
+                    ></a-input>
+                </a-form-item>
+
+                <targeted-population
+                    ref="population"
+                    :populationData.sync="populationData"
+                    :accountId.sync="accountId"
+                />
+            </a-form>
+        </a-spin>
+        <template slot="footer">
+            <!-- <a-button type="primary" @click="handleSubmit" :loading="loading"> 确定 </a-button> -->
+            <a-button
+                type="default"
+                @click="
+                    () => {
+                        this.visible = false
+                    }
+                "
+            >
+                取消
+            </a-button>
+            <a-button type="primary" @click="handleSubmit" :loading="loading">
+                {{ type == 'add' ? '确定' : '修改' }}
+            </a-button>
+        </template>
+    </a-modal>
+</template>
+
+<script>
+import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
+import moment from 'moment'
+import { mapGetters } from 'vuex'
+import jq from 'jquery'
+import selectTable from '@/views/modules/Statistics/components/selectPagination.vue'
+import targetedPopulation from './targetedPopulation.vue'
+import pick from 'lodash.pick'
+export default {
+    name: 'new-mould',
+    components: {
+        targetedPopulation,
+        selectTable
+    },
+    data() {
+        return {
+            visible: false,
+            spinning: false,
+            projectName: '',
+            form: this.$form.createForm(this),
+            projectId: '',
+            populationData: {},
+            accountId: '',
+            templateId: undefined,
+            type: 'add',
+            loading: false,
+            labelCol: { lg: { span: 7 }, sm: { span: 7 } },
+            disabled: false
+        }
+    },
+    computed: {},
+    methods: {
+        create(accountId, type) {
+            this.disabled = false
+            this.spinning = false
+            this.visible = true
+            this.type = type
+            this.populationData = {}
+            this.accountId = accountId
+        },
+        handleOk(item, type) {
+            this.spinning = true
+            this.visible = true
+            this.type = type
+            var params = {}
+            params.id = item.id
+            this.templateId = item.id
+            this.projectName = item.projectName
+            this.projectId = item.projectId
+            getAction('/kuaishouDirectionalPackage/queryById', params).then(res => {
+                if (res.success) {
+                    var dataJson = {
+                        ...res.result
+                    }
+
+                    this.populationData = dataJson
+
+                    this.populationData.devicePrice = dataJson.devicePrice ? JSON.parse(dataJson.devicePrice) : null
+                    this.populationData.appInterest = dataJson.appInterest ? JSON.parse(dataJson.appInterest) : null
+                    this.populationData.businessInterest = dataJson.businessInterest
+                        ? JSON.parse(dataJson.businessInterest)
+                        : null
+                    this.populationData.fansStar = dataJson.fansStar ? JSON.parse(dataJson.fansStar) : null
+                    this.populationData.interestVideo = dataJson.interestVideo
+                        ? JSON.parse(dataJson.interestVideo)
+                        : null
+                    this.populationData.deviceBrand = dataJson.deviceBrand ? JSON.parse(dataJson.deviceBrand) : null
+
+                    this.populationData.age = dataJson.min ? [dataJson.min, dataJson.max] : []
+                    this.populationData.agesRange = dataJson.agesRange ? JSON.parse(dataJson.agesRange) : []
+                    this.populationData.devicePrice = dataJson.devicePrice ? dataJson.devicePrice : null
+
+                    this.populationData.behavior = dataJson.label
+                    this.populationData.interest = dataJson.interestLabel
+
+                    this.populationData.sceneType = dataJson.sceneType ? JSON.parse(dataJson.sceneType) : []
+                    this.populationData.allForm = {}
+
+                    this.populationData.allForm.people =
+                        dataJson.population && dataJson.excludePopulation
+                            ? '3'
+                            : dataJson.population && !dataJson.excludePopulation
+                            ? '1'
+                            : !dataJson.population && dataJson.excludePopulation
+                            ? '2'
+                            : !dataJson.population && !dataJson.excludePopulation
+                            ? '0'
+                            : '0'
+                    this.populationData.allForm.incluedSelectedRowKeys =
+                        dataJson.population && dataJson.population.length > 0 ? dataJson.population : []
+                    this.populationData.allForm.incluedSelectedKeys =
+                        dataJson.population && dataJson.population.length > 0 ? dataJson.population : []
+                    this.populationData.allForm.excludeSelectedKeys =
+                        dataJson.excludePopulation && dataJson.excludePopulation.length > 0
+                            ? dataJson.excludePopulation
+                            : []
+                    this.populationData.allForm.excludeSelectedRowKeys =
+                        dataJson.excludePopulation && dataJson.excludePopulation.length > 0
+                            ? dataJson.excludePopulation
+                            : []
+                    this.populationData.allForm.regionType =
+                        dataJson.region && JSON.parse(dataJson.region).length > 0 ? 'limit' : 'noLimit'
+
+                    this.populationData.allForm.region = dataJson.region
+                    // postAction('/kuaishou/batch/getRegionDetail', {
+                    //   regionArr: dataJson.region
+                    // }).then(res => {
+                    //   console.log(res, 11111)
+                    //   if (res.success) {
+                    //     this.populationData.allForm.region = res.result
+                    //   }
+                    // })
+
+                    this.populationData.allForm.ageType =
+                        dataJson.agesRange.length > 0 ? 'ageLimit' : dataJson.min > 0 ? 'ageCustom' : 'noLimit'
+                    this.populationData.allForm.device =
+                        dataJson.deviceBrand && eval(dataJson.deviceBrand).length > 0 ? '1' : '0'
+                    this.populationData.allForm.price =
+                        dataJson.devicePrice && eval(dataJson.devicePrice).length > 0 ? '1' : '0'
+                    this.populationData.allForm.appType =
+                        dataJson.appInterest && eval(dataJson.appInterest).length > 0
+                            ? '1'
+                            : dataJson.appIds && eval(dataJson.appIds).length > 0
+                            ? '2'
+                            : '0'
+                    this.populationData.allForm.fansStar =
+                        dataJson.fansStar && eval(dataJson.fansStar).length > 0 ? '1' : '0'
+                    this.populationData.allForm.interestVideo =
+                        dataJson.interestVideo && eval(dataJson.interestVideo).length > 0 ? '1' : '0'
+                    this.populationData.allForm.platform_os = dataJson.platformOs
+                    this.populationData.allForm.businessInterestType = dataJson.businessInterestType
+                    this.populationData.allForm.isOpen = dataJson.isOpen
+                    this.populationData.allForm.noAgeBreak = dataJson.noAgeBreak + ''
+                    this.populationData.allForm.noGenderBreak = dataJson.noGenderBreak + ''
+                    this.populationData.allForm.noAreaBreak = dataJson.noAreaBreak + ''
+                    this.populationData.allForm.behaviorInterest = dataJson.label && dataJson.label != '[]' ? '1' : '0'
+                    this.populationData.allForm.checkArr =
+                        this.populationData.allForm.appType == '2' ? JSON.parse(dataJson.appIds) : []
+                    this.populationData.projectId = dataJson.projectId + ''
+
+                    this.disabled = true
+
+                    this.$nextTick(() => {
+                        console.log(dataJson)
+                        this.form.setFieldsValue(pick(dataJson, ['templateName']))
+                        this.spinning = false
+                    })
+                }
+            })
+        },
+        handleCancel(e) {
+            this.visible = false
+        },
+        handleSubmit(e) {
+            //   this.$refs.population.handleSubmit()
+
+            e.preventDefault()
+            this.$refs.population.handleSubmit()
+            this.$refs.population.formAll.validateFields((err, value) => {
+                if (this.populationData.allForm.appType == '2') {
+                    if (this.populationData.appIds.length == 0) {
+                        this.$message.error('APP名称未选择')
+                    }
+                }
+                if (!err) {
+                    this.form.validateFieldsAndScroll((err, values) => {
+                        if (!err) {
+                            // this.loading = true
+                            if (this.accountId) {
+                                var params = {
+                                    ...this.populationData,
+                                    targetName: values.templateName,
+                                    accountId: this.accountId
+                                }
+                                params.label = params.behavior ? JSON.stringify(params.behavior) : '[]'
+                                params.interestLabel = params.interest ? JSON.stringify(params.interest) : '[]'
+                                if (this.type == 'add') {
+                                    postAction('/auto/aiKuaishouAccountAutoTarget/addLocalTarget', params).then(
+                                        res => {
+                                            if (res.success) {
+                                                this.visible = false
+                                                this.loading = false
+                                                this.$emit('getData')
+                                            } else {
+                                                this.loading = false
+                                                this.$message.error(res.message)
+                                            }
+                                        }
+                                    )
+                                } else if (this.type == 'edit') {
+                                    params.id = this.templateId
+                                    postAction('/auto/aiKuaishouAccountAutoTarget/updateLocalTarget', params).then(
+                                        res => {
+                                            this.visible = false
+                                            if (res.success) {
+                                                this.loading = false
+                                                this.$emit('getData')
+                                            } else {
+                                                this.loading = false
+                                                this.$message.error(res.message)
+                                            }
+                                        }
+                                    )
+                                }
+                            } else {
+                                this.$message.error('请选择项目')
+                            }
+                        }
+                    })
+                }
+            })
+        }
+    }
+}
+</script>

+ 109 - 15
src/views/modules/autoLaunchRevision/createLaunch.vue

@@ -568,7 +568,7 @@ li.chouzhen.first:before {
                                         style="justify-content: flex-start;max-height:500px;overflow:auto"
                                     >
                                         <a-card
-                                            :title="item.templateName"
+                                            :title="item.targetName"
                                             class="card-person card-item-else"
                                             style="margin-right:10px"
                                             v-for="(item, index) in showCheckPerson"
@@ -588,6 +588,50 @@ li.chouzhen.first:before {
 
                                             <div class="card-main-case">
                                                 <a-row style="margin-top:10px">
+                                                    <a-col :xl="24" :md="24" class="flex-main" v-if="item">
+                                                        <span class="ant-descriptions-item-label"> 人群:</span>
+                                                        <div v-if="item" style="word-break: break-all;">
+                                                            >
+                                                            <span
+                                                                v-if="
+                                                                    (!item.population && !item.excludePopulation) ||
+                                                                        (item.population == '[]' &&
+                                                                            item.excludePopulation == '[]')
+                                                                "
+                                                            >
+                                                                不限
+                                                            </span>
+                                                            <span
+                                                                v-else-if="
+                                                                    item.population &&
+                                                                        (!item.excludePopulation ||
+                                                                            item.excludePopulation == '[]')
+                                                                "
+                                                            >
+                                                                定向人群:{{ JSON.parse(item.population).join() }}
+                                                            </span>
+                                                            <span
+                                                                v-else-if="
+                                                                    item.excludePopulation &&
+                                                                        (!item.population || item.population == '[]')
+                                                                "
+                                                            >
+                                                                排除人群:{{
+                                                                    JSON.parse(item.excludePopulation).join()
+                                                                }}
+                                                            </span>
+                                                            <span v-else>
+                                                                定向人群:{{ JSON.parse(item.population).join() }}
+                                                                <br />
+                                                                排除人群:{{
+                                                                    JSON.parse(item.excludePopulation).join()
+                                                                }}
+                                                            </span>
+                                                        </div>
+                                                        <p title="-" v-else>-</p>
+                                                    </a-col>
+                                                </a-row>
+                                                <a-row style="margin-top:10px">
                                                     <a-col :xl="24" :md="24" class="flex-main">
                                                         <span class="ant-descriptions-item-label"> 地区:</span>
                                                         <div v-if="item">
@@ -1712,15 +1756,7 @@ li.chouzhen.first:before {
                 </div>
                 <div style="display:flex">
                     <div style="line-height: 32px;font-weight: 700;margin:0 20px;">已选择({{ sumContent }})</div>
-                    <a-button
-                        type="primary"
-                        @click="
-                            searchTemplate = null
-                            ipagination.current = 1
-                            checkPerson = checkPersonElse
-                            getTargetPerson()
-                        "
-                    >
+                    <a-button type="primary" @click="addNewTemplate">
                         新增定向包
                     </a-button>
                 </div>
@@ -1728,7 +1764,7 @@ li.chouzhen.first:before {
             <a-checkbox-group v-model="checkPerson" style="width: 100%;" @change="setVideoData">
                 <div class="card-person-drawer info-detail">
                     <a-card
-                        :title="item.templateName"
+                        :title="item.targetName"
                         class="card-person card-item"
                         v-for="(item, index) in personList"
                         :key="index"
@@ -1736,10 +1772,50 @@ li.chouzhen.first:before {
                         <div slot="extra">
                             <a-checkbox :value="item.id" @change="setData(item.id)"></a-checkbox>
                         </div>
+                        <template slot="actions" class="ant-card-actions">
+                            <a-icon key="edit" type="edit" @click="editNewTemplate(item.id)" />
+                            <a-icon key="delete" type="delete" @click="deleteNewTemplate(item.id)" />
+                        </template>
 
                         <div class="card-main-case">
                             <a-row style="margin-top:10px">
                                 <a-col :xl="24" :md="24" class="flex-main">
+                                    <span class="ant-descriptions-item-label"> 人群:</span>
+                                    <div v-if="item" style="word-break: break-all;">
+                                        <span
+                                            v-if="
+                                                (!item.population && !item.excludePopulation) ||
+                                                    (item.population == '[]' && item.excludePopulation == '[]')
+                                            "
+                                        >
+                                            不限
+                                        </span>
+                                        <span
+                                            v-else-if="
+                                                item.population &&
+                                                    (!item.excludePopulation || item.excludePopulation == '[]')
+                                            "
+                                        >
+                                            定向人群:{{ JSON.parse(item.population).join() }}
+                                        </span>
+                                        <span
+                                            v-else-if="
+                                                item.excludePopulation && (!item.population || item.population == '[]')
+                                            "
+                                        >
+                                            排除人群:{{ JSON.parse(item.excludePopulation).join() }}
+                                        </span>
+                                        <span v-else>
+                                            定向人群:{{ JSON.parse(item.population).join() }} <br />排除人群:{{
+                                                JSON.parse(item.excludePopulation).join()
+                                            }}</span
+                                        >
+                                    </div>
+                                    <p title="-" v-else>-</p>
+                                </a-col>
+                            </a-row>
+                            <a-row style="margin-top:10px">
+                                <a-col :xl="24" :md="24" class="flex-main">
                                     <span class="ant-descriptions-item-label"> 地区:</span>
                                     <div v-if="item">
                                         <span
@@ -2366,6 +2442,7 @@ li.chouzhen.first:before {
             >
             </a-table>
         </a-modal>
+        <templateModal ref="templateModal" @getData="getTargetPerson" />
     </div>
 </template>
 
@@ -2385,6 +2462,7 @@ import selectTable from '@/views/modules/Statistics/components/selectPagination.
 import EditableCell from './components/editablCell'
 import selectTreeAccount from '@/components/formComponents/selectAccount.vue'
 import { getAction } from '../../../api/manage'
+import templateModal from './components/templateModal'
 // import lookPreviewVue from './lookPreview.vue'
 function tqFun(qcArr1) {
     var tempArr = []
@@ -2458,7 +2536,8 @@ export default {
         uploadFile,
         selectTable,
         EditableCell,
-        selectTreeAccount
+        selectTreeAccount,
+        templateModal
     },
     mixins: [mixin],
     props: {
@@ -3808,13 +3887,28 @@ export default {
             }
             this.checkPerson = []
         },
+        editNewTemplate(id) {},
+        deleteNewTemplate(id) {
+            var params = {}
+            params.ids = id
+            this.getAction('/auto/aiKuaishouAccountAutoTarget/deleteBatch', params).then(res => {
+                if (res.success) {
+                    this.getTargetPerson()
+                } else {
+                    this.$message.error(res.messsage)
+                }
+            })
+        },
+        addNewTemplate() {
+            this.$refs.templateModal.create(this.getFormData('formProject', 'accountId'), 'add')
+        },
         getTargetPerson() {
             let params = {}
             params.pageSize = this.ipagination.pageSize
             params.pageNo = this.ipagination.current
-            params.projectId = this.projectId
-            params.templateName = this.searchTemplate
-            this.getAction('/kuaishouDirectionalPackage/getProjectTarget', params).then(res => {
+            params.accountId = this.getFormData('formProject', 'accountId')
+            params.targetName = this.searchTemplate == '' ? null : this.searchTemplate
+            this.getAction('/auto/aiKuaishouAccountAutoTarget/list', params).then(res => {
                 if (res.success) {
                     this.personList = res.result.list.map(item => {
                         return {