Parcourir la source

Merge remote-tracking branch 'origin/test' into test

yumeng il y a 5 ans
Parent
commit
dd8a8ca1f3

+ 6 - 7
src/views/modules/kuaishouapp/creativeCreate.vue

@@ -129,7 +129,7 @@
               </a-radio-group>
             </template>
           </a-modal>
-          <div class="checkbox_item_container" v-if="videoUrl">
+          <div class="checkbox_item_container checkbox_item_container_size" v-if="videoUrl">
             <div class="item_ul">
               <div class="item_li" style="width:130px;height:180px;">
                 <a-col class="item">
@@ -191,7 +191,7 @@
               </div>
             </template>
           </a-modal>
-          <div class="checkbox_item_container">
+          <div class="checkbox_item_container checkbox_item_container_size">
             <div class="item_ul">
               <div
                 class="item_li"
@@ -288,7 +288,7 @@
               </div>
             </template>
           </a-modal>
-          <div class="checkbox_item_container">
+          <div class="checkbox_item_container checkbox_item_container_size">
             <div class="item_ul">
               <div
                 class="item_li"
@@ -406,7 +406,7 @@
               </div>
             </template>
           </a-modal>
-          <div class="checkbox_item_container">
+          <div class="checkbox_item_container checkbox_item_container_size">
             <div class="item_ul">
               <div
                 class="item_li"
@@ -1254,7 +1254,6 @@
 
   //   多选框
   .checkbox_item_container {
-    width: 50%;
 
     .item_ul {
       margin: 0 -10px;
@@ -1317,7 +1316,7 @@
   //     }
   // } /*>=1100的设备*/
   @media (min-width: 1280px) {
-    .checkbox_item_container {
+    .checkbox_item_container_size {
       width: 70%
     }
   }
@@ -1334,7 +1333,7 @@
 
   // }
   @media (min-width: 1920px) {
-    .checkbox_item_container {
+    .checkbox_item_container_size {
       width: 50%
     }
   }

+ 1 - 1
src/views/template/userorientation/list.vue

@@ -79,7 +79,7 @@
 
 <script>
 import ByteDanceUserOrientationTemplateModal from './modules/ByteDanceUserOrientationTemplateModal'
-import transfer from './modules/transfer'
+import transfer from './modules/transferCity'
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 
 export default {

+ 5 - 5
src/views/template/userorientation/modules/transfer.vue

@@ -159,17 +159,17 @@ export default {
       this.showClass = false
       this.provinceIndex = index
       this.cityIndex = null
-      if (item.name == '北京') {
-        this.city.push(item)
-        this.showCityData = true
-      } else {
+    //   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 = []

+ 246 - 0
src/views/template/userorientation/modules/transferCity.vue

@@ -0,0 +1,246 @@
+<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>
+.ant-checkbox-group {
+  width: 100px;
+  overflow-x: hidden;
+}
+.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">
+          <!-- <a-checkbox-group
+            :options="province"
+          >
+            <span style="color: red" slot="label" slot-scope="{value}">{{value}}</span>
+          </a-checkbox-group>-->
+          <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
+            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="checkMatched"
+              @change="checkOne(item,index)"
+            /> -->
+            {{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.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 } from '@/api/manage'
+import $ from 'jquery'
+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)
+          this.province = res.result.records.map(item => {
+            return {
+              label: item.name,
+              value: item.id
+            }
+          })
+        }
+      })
+    },
+    showCity(item, index) {
+      this.city = []
+      this.showCityData = false
+      this.showClass = false
+      this.provinceIndex = index
+      this.cityIndex = null
+      getProvince(this.CityData, { parentCode: item.value }).then(res => {
+        if (res.code == '0') {
+          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 = []
+      }
+    },
+    checkOne(item, index) {
+      if (this.checkMatched.indexOf(item.value) == -1) {
+        var index = this.checkData.findIndex(v => v.value === item.value)
+        this.checkData.splice(index, 1)
+        this.checkAll = false
+      } else {
+        this.checkData.push(item)
+      }
+      if(this.checkData.length == this.province.length){
+          this.checkAll = true
+      }
+    },
+    clear() {
+      this.checkData = []
+      this.checkMatched = []
+      this.checkAll = false
+      this.$emit('update:checkData', this.checkData)
+    },
+    detele(item,index) {
+      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
+      this.$emit('update:checkData', this.checkData)
+    }
+  }
+}
+</script>