123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- <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>
- <template>
- <div class="transfer">
- <div class="transfer-box">
- <div class="content-box">
- <p class="content-title">省份</p>
- <div class="content">
- <p
- v-for="(item,index) of province"
- :key="item.id"
- @click="showCity(item,index)"
- :class="{backgroundOnly:provinceIndex == index}"
- >{{item.name}}</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 class="content-box" v-show="showClass" style="border-right:0px">
- <p class="content-title">区域</p>
- <div class="content">
- <!-- <p @click="allCheck">{{checkAll?"√":""}}全选</p> -->
- <p
- v-for="item of area"
- :key="item.id"
- @click="add(item)"
- :class="{backgroundOnly:checkMatched.indexOf( item.id )!=-1}"
- >{{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: []
- }
- },
- computed: {},
- mounted() {
- this.$nextTick(() => {
- this.getData()
- })
- },
- methods: {
- getData() {
- getProvince(this.CityData, { parentCode: '' }).then(res => {
- if (res.code == '0') {
- this.province.push(...res.result.records)
- }
- })
- },
- 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
- }
- })
- // }
- },
- 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>
|