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