<li v-for="(item,index) in selectedList" :class="item.selected?'active':''" :key="index" @click="selectedAreaSingle(item)">{{item.regionName}}</li>
</ul>
</div>
<div class="item-footer">
<button class="button" @click="selectedAllArea()" :disabled="rightDataList.length=== 0" :class="selectedAllButtonStatus?'success':''">{{selectedAllButtonStatus?'反选':'全部'}}</button>
</div>
</div>
</div>
</template>
<script>
import _ from 'lodash';
export default {
name: 'manyAreaSelect',
data: function () {
return {
chinaArea: JSON.parse(window.localStorage.getItem('chinaArea')) || [], // 这是地区联动的JSON
notLimitButton: {
notLimitCity: false, // 城市不限
notLimitDistrict: false, // 地区不限
},
selectedAllButtonStatus: false, // 已选位置列表全部按钮的状态
selectItem: {
province: {},
city: {},
distric: {}
},
cityList: [], // 城市列表
districList: [], // 区域列表
rightDataList: [], // 选中项目组合成的渲染列表
rightData: [], // 选中需要移除的
leftData: [], // 左边选中的转发
}
},
props: {
selectedData: {
type: [String, Object, Array] },
iconDirection: {
type: Object,
default: function () { // 箭头图标
return {
left: 'fzicon fz-ad-you',
right: 'fzicon fz-ad-right'
}
}
}
},
computed: {
selectedList () { // 已选中列表
if (this.selectedData && this.selectedData !== '') {
this.rightDataList = this.selectedData;
return this.rightDataList;
} else {
return this.rightDataList;
}
},
direactionStatusToRight () { // 控制可以转移的箭头状态
if (this.notLimitButton.notLimitCity || this.notLimitButton.notLimitDistrict) {
if (this.notLimitButton.notLimitCity) {
this.removeAllSelected(this.cityList);
this.removeAllSelected(this.districList);
return false;
} else {
if (this.notLimitButton.notLimitDistrict) {
this.removeAllSelected(this.districList);
return false;
}
}
return false;
} else {
if (this.selectItem.distric.regionName) {
return false;
}
return true;
}
},
direactionStatusToLeft () { // 控制可以转移的箭头状态
if (this.rightData.length === 0) {
return true
} else {
return false
}
}
},
methods: {
mapSelect (list, value, type) { // 高亮选中
if (type) {
return list.map(pitem => {
if (pitem.regionId === value.regionId) {
if (value.selected && value.selected === true) {
this.$delete(pitem, 'selected');
} else {
