|
@@ -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>
|