zhuxinbo 5 年之前
父節點
當前提交
afbc3d3900

+ 15 - 17
src/views/modules/kuaishouapp/creativeCreate.vue

@@ -1089,7 +1089,6 @@ export default {
       params.loginId = this.userInfo().id
       params.accountId = this.accountId
       postAction(this.url.getChildrenUrl, params).then(res => {
-          console.log(res,10000000)
         targetOption.children = res
         this.options = [...this.options]
         targetOption.loading = false
@@ -1247,7 +1246,6 @@ export default {
 
 //   多选框
 .checkbox_item_container {
-  width: 50%;
   .item_ul {
     margin: 0 -10px;
 
@@ -1304,24 +1302,24 @@ export default {
     //         width:70%
     //     }
     // } /*>=1100的设备*/
-    @media (min-width: 1280px) {
-        .checkbox_item_container {
-            width:70%
-        }
-    } /*>=1280的设备*/
+    // @media (min-width: 1280px) {
+    //     .checkbox_item_container {
+    //         width:70%
+    //     }
+    // } /*>=1280的设备*/
 
-    // @media (min-width: 1366px) {
-    // }  
+    // // @media (min-width: 1366px) {
+    // // }  
 
-    // @media (min-width: 1440px) {
-    // } 
+    // // @media (min-width: 1440px) {
+    // // } 
 
-    // @media (min-width: 1680px) {
+    // // @media (min-width: 1680px) {
 
+    // // } 
+    // @media (min-width: 1920px) {
+    //     .checkbox_item_container {
+    //         width:50%
+    //     }
     // } 
-    @media (min-width: 1920px) {
-        .checkbox_item_container {
-            width:50%
-        }
-    } 
 </style>

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

@@ -50,7 +50,7 @@
     <div class="table-operator">
       <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
     </div>
-    <!-- <transfer :checkData.sync="dataBox" /> -->
+    <transfer :checkData.sync="dataBox" />
     <!-- table区域-begin -->
     <div>
       <a-table
@@ -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 = []

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

@@ -0,0 +1,272 @@
+<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
+              v-model="isAllChecked"
+              type="checkbox"
+              @click="checkAll($event)"
+              class="select_all"
+            /> 全选
+          </p>
+
+          <p
+            v-for="(item,index) of province"
+            :key="item.value"
+            @click="showCity(item,index)"
+            :class="{backgroundOnly:provinceIndex == index}"
+          >
+            <input
+              class="checkItem"
+              type="checkbox"
+              v-model="checkeds"
+              :value="item.id"
+              @onClick="checkeda(item.id)"
+              @change="changChecked"
+              :id="item.id"
+            />
+            {{item.label}}
+          </p>
+        </div>
+      </div>
+      <div
+        class="content-box"
+        :style="{borderRight:!showClass?'0px':'1px solid #dadfe3'}"
+        v-show="showCityData"
+      >
+        <p class="content-title">城市</p>
+        <div class="content">
+          <p
+            v-for="(item,index) of city"
+            :key="item.id"
+            @click="showRegion(item.code,index)"
+            :class="{backgroundOnly:cityIndex == index}"
+          >{{item.name}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="transfer-box" style="width:176px">
+      <div class="content-box">
+        <p class="content-title">
+          已选
+          <span
+            style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
+            @click="clear"
+          >清空</span>
+        </p>
+        <div class="content">
+          <p v-for="(item,index) of checkData" :key="index">
+            {{item.name}}
+            <span
+              style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
+              @click="detele(index)"
+            >删除</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { getProvince } from '@/api/manage'
+export default {
+  name: 'ByteDanceUserOrientationTemplateList',
+  components: {},
+  data() {
+    return {
+      showClass: false,
+      showCityData: false,
+      checkData: [],
+      checkMatched: [],
+      province: [],
+      city: [],
+      area: [],
+      CityData: '/ctop/bytedanceAreaInfo/listbycode',
+      provinceIndex: null,
+      cityIndex: null,
+      checkAll: false,
+      arr: [],
+      checkeds: []
+    }
+  },
+  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
+      //   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
+        }
+      })
+      //   }
+    },
+    checkAll(e) {
+      // 点击全选事件函数
+      let checkObj = document.querySelectorAll('.checkItem') // 获取所有checkbox项
+      if (e.target.checked) {
+        // 判定全选checkbox的勾选状态
+        for (let i = 0; i < this.imageList.length; i++) {
+          if (!checkObj[i].checked) {
+            // 将未勾选的checkbox选项push到绑定数组中
+            this.checkeds.push(parseFloat(checkObj[i].value))
+            console.log(this.checkeds)
+          }
+        }
+      } else {
+        // 如果是去掉全选则清空checkbox选项绑定数组
+        this.checkeds = []
+      }
+    },
+    showRegion(item, index) {
+      this.area = []
+      this.cityIndex = index
+      getProvince(this.CityData, { parentCode: item }).then(res => {
+        if (res.code == '0') {
+          console.log(res)
+          this.area.push(...res.result.records)
+          this.arr = res.result.records
+          this.showClass = true
+        }
+      })
+    },
+    add(item) {
+      if (this.checkMatched.indexOf(item.id) != -1) {
+        var index = this.checkData.findIndex(v => v.id === item.id)
+        this.checkData.splice(index, 1)
+        this.checkMatched.splice(index, 1)
+        this.$emit('update:checkData', this.checkData)
+      } else {
+        this.checkData.push(item)
+        this.checkMatched.push(item.id)
+        this.$emit('update:checkData', this.checkData)
+      }
+    },
+    allCheck() {
+      this.checkAll = !this.checkAll
+      if (this.checkAll) {
+        this.checkData.push(...this.area)
+        var dataId = this.area.map(item => {
+          return item.id
+        })
+        this.checkMatched.push(...dataId)
+      } else {
+        this.checkData.splice(this.checkData.length - this.arr.length, this.arr.length)
+        this.checkMatched.splice(this.checkData.length - this.arr.length, this.arr.length)
+      }
+    },
+    clear() {
+      this.checkData = []
+      this.checkMatched = []
+      this.checkAll = false
+      this.$emit('update:checkData', this.checkData)
+    },
+    detele(index) {
+      this.checkData.splice(index, 1)
+      this.checkMatched.splice(index, 1)
+      this.$emit('update:checkData', this.checkData)
+    }
+  }
+}
+</script>