浏览代码

切换分支

朱鑫波 4 年之前
父节点
当前提交
d00bfd5f00

+ 18 - 6
src/views/modules/Statistics/components/selectPagination.vue

@@ -29,11 +29,11 @@
     style="width:100%"
     class="select-table"
   >
-    <a-input placeholder="请选择项目" @focus="topMiddle = true" v-model="keyValue" @change="getData" />
+    <a-input placeholder="请选择项目" @focus="topMiddle = true" v-model="keyValue" @change="getData" :disabled="disabled"/>
     <div
       v-show="topMiddle"
       v-infinite-scroll="handleInfiniteOnLoad"
-      style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);position:relative;z-index:1000"
+      style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);position:absolute;z-index:1000;width:100%"
       class="demo-infinite-container"
       :infinite-scroll-disabled="busy"
       :infinite-scroll-distance="80"
@@ -103,16 +103,28 @@ export default {
         return ''
       },
     },
+    labelCol: {
+      type: Object,
+      default() {
+        return {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        }
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default() {
+        return false
+      }
+
+    }
   },
 
   data() {
     return {
       loading: false,
       busy: false,
-      labelCol: {
-        xs: { span: 24 },
-        sm: { span: 5 },
-      },
       wrapperCol: {
         xs: { span: 24 },
         sm: { span: 12 },

+ 429 - 0
src/views/modules/autoLaunch/directional/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>

文件差异内容过多而无法显示
+ 1262 - 0
src/views/modules/autoLaunch/directional/components/targetedPopulation.vue


+ 16 - 15
src/views/modules/autoLaunch/directional/components/templateModal.vue

@@ -25,19 +25,24 @@
 }
 </style>
 <template>
-  <a-modal v-model="visible" title="定向模板" :width="1100" v-if="visible">
+  <a-modal v-model="visible" title="定向模板" :width="1100" v-if="visible" >
     <a-spin :spinning="spinning">
       <a-form @submit="handleSubmit" :form="form">
         <a-form-item
           label="模板名称"
           :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
-          :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
+          :wrapperCol="{ lg: { span: 12 }, sm: { span: 12 } }"
         >
           <a-input
             v-decorator="['templateName', { rules: [{ required: true, message: '模板名称必填' }] }]"
             :disabled="type == 'look'"
           ></a-input>
         </a-form-item>
+        <a-row :gutter="24">
+          <a-col :md="24" :sm="24" :xxl="24">
+            <selectTable :projectId.sync="projectId" :labelCol="labelCol" :disabled="disabled"></selectTable>
+          </a-col>
+        </a-row>
         <targeted-population ref="population" :populationData.sync="populationData" />
       </a-form>
     </a-spin>
@@ -54,25 +59,28 @@ import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
 import moment from 'moment'
 import { mapGetters } from 'vuex'
 import jq from 'jquery'
-
-import targetedPopulation from '@/views/modules/kuaishouapp/account/stepForm/stepModule/targetedPopulation.vue'
+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,
       form: this.$form.createForm(this),
-
+      projectId: '',
       populationData: {},
       accountId: '',
       templateId:undefined,
       type: 'add',
       loading: false,
+      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
+      disabled: false
     }
   },
   computed: {},
@@ -174,18 +182,11 @@ export default {
           }
           console.log(params)
           if (this.type == 'add') {
-            postAction('/batch/kuaishouTemplate/createTemplate', params).then((res) => {
+            postAction('/kuaishouDirectionalPackage/createDirectionalPackage', params).then((res) => {
               if (res.success) {
                 this.visible = false
-                this.loading = false
-
-                getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
-                  accountId: this.accountId,
-                }).then((res) => {
-                  if (res.success) {
-                    this.$emit('getData', this.accountId)
-                  }
-                })
+                this.loading = false;
+                this.$emit('getData', this.accountId)
               } else {
                 this.loading = false
                 this.$message.error(res.result.message)

+ 4 - 2
src/views/modules/autoLaunch/directional/directional.vue

@@ -358,10 +358,12 @@ export default {
     },
     methods: {
         getTemplateList() {
-
+            this.form.resetFields();
+            this.projectId = undefined;
+            this.handleGetTableList({});
         },
         addNewTemplate(accountId) {
-            this.$refs.templateModal.create(localStorage.getItem('campaignAccountId'), 'add')
+            this.$refs.templateModal.create(null, 'add')
         },
         onShowSizeChange(current, pageSize) {
             const paramsData = this.form.getFieldsValue();