|
@@ -8,38 +8,37 @@
|
|
|
</span>
|
|
|
<span v-else>
|
|
|
<span v-for="(item, index) in selected" :key="index" style="margin-right:0.1rem;font-size:0.75rem">
|
|
|
- {{ item.label }}
|
|
|
+ {{ item.name }}
|
|
|
</span>
|
|
|
</span>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-dialog title="选择城市" :visible.sync="dialog" :fullscreen="true" :show-close="false">
|
|
|
+ <el-dialog :visible.sync="dialog" :fullscreen="true" :show-close="false">
|
|
|
+ <template #title>
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-col :span="6" class="el-icon-back" style="zoom:1.5" @click.native="dialog = false"></el-col>
|
|
|
+ <el-col :span="12" style="text-align:center;">选择城市</el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
<el-row style="background:#ffffff;">
|
|
|
<el-col :span="24" v-if="selectList.length > 0">
|
|
|
<el-tag v-for="(item, index) in selected" :key="index" @click="tagClose(item)" style="margin-right:0.8rem;" :disable-transitions="true">
|
|
|
- {{ item.label }}
|
|
|
+ {{ item.name }}
|
|
|
</el-tag>
|
|
|
</el-col>
|
|
|
<el-col :span="24" style="width:100%;text-align:center;" v-else>请选择城市</el-col>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col :span="8">
|
|
|
- <el-menu
|
|
|
- background-color="#eee"
|
|
|
- @select="
|
|
|
- item => {
|
|
|
- selectChange(item, 'first');
|
|
|
- }
|
|
|
- "
|
|
|
- >
|
|
|
- <el-menu-item v-for="(item, index) in firstList" :key="index" :index="item.label">
|
|
|
- {{ item.label }}
|
|
|
- </el-menu-item>
|
|
|
- </el-menu>
|
|
|
+ <el-row class="firstMenu">
|
|
|
+ <el-col :span="24" v-for="(item, index) in firstList" :key="index" @click.native="selectChange(item.name, 'first')">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-col>
|
|
|
<el-col :span="15">
|
|
|
<span v-for="(item, index) in secondList" :key="index">
|
|
|
- <el-button class="word" type="primary" size="mini" @click="selectChange(item.label, 'second')">{{ item.label }}</el-button>
|
|
|
+ <el-button class="word" type="primary" size="mini" @click="selectChange(item.name, 'second')">{{ item.name }}</el-button>
|
|
|
</span>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -58,31 +57,30 @@ export default {
|
|
|
name: 'tag-all-select',
|
|
|
props: {
|
|
|
title: { type: String },
|
|
|
- selected: { type: Array, default: () => [] }, //已选项
|
|
|
+ selected: null, //已选项
|
|
|
placeholder: { type: String, default: '请选择' }, //提示
|
|
|
firstList: { type: Array, default: () => [] }, //一级选项列表
|
|
|
secondList: { type: Array, default: () => [] }, //二级选项列表
|
|
|
- type: { type: String, default: '' },
|
|
|
+ type: { type: String },
|
|
|
},
|
|
|
components: {},
|
|
|
data: () => ({
|
|
|
dialog: false,
|
|
|
+ activeNames: '',
|
|
|
selectList: [],
|
|
|
+ displayList: [],
|
|
|
}),
|
|
|
created() {
|
|
|
- if (this.selected.length > 0) {
|
|
|
+ if (this.selected && this.selected.length > 0) {
|
|
|
this.defaultProcess();
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
selected: {
|
|
|
handler(val, oval) {
|
|
|
- if (val.length > 0) {
|
|
|
- let dif = _.difference(val, oval);
|
|
|
- let key = Object.keys(val[0]);
|
|
|
- if (dif.length > 0) {
|
|
|
- this.defaultProcess();
|
|
|
- }
|
|
|
+ let dif = _.difference(val, oval);
|
|
|
+ if (dif.length > 0) {
|
|
|
+ this.defaultProcess();
|
|
|
}
|
|
|
},
|
|
|
},
|
|
@@ -90,94 +88,94 @@ export default {
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
//一/二级选择方法
|
|
|
- selectChange(value, type) {
|
|
|
- //先查下之前有没有,有的话就过滤出去
|
|
|
+ selectChange(val, type) {
|
|
|
+ this.checkSelect(val, type);
|
|
|
+ let list = _.get(this, `${type}List`);
|
|
|
+ let select = list.filter(fil => fil.name === val);
|
|
|
+ if (select.length > 0) {
|
|
|
+ val = select[0].code;
|
|
|
+ }
|
|
|
if (type === 'first') {
|
|
|
- this.processProvince(value, type);
|
|
|
+ this.processProvince(val);
|
|
|
} else {
|
|
|
- let result = this.checkHas(value);
|
|
|
- if (!result) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- this.processCity(value, type);
|
|
|
+ this.processCity();
|
|
|
}
|
|
|
},
|
|
|
//处理直辖/省份
|
|
|
- processProvince(value, type) {
|
|
|
- //换成dialog后,是自己添加自己删除,不能用之前的数据了
|
|
|
- //1,到这,说明这个数据没有被点过,应该看看此数据是被添加或者查找子列表
|
|
|
- let hasCity = this.haveCity(value);
|
|
|
- if (hasCity) {
|
|
|
- //这不是直辖市/城市,查城市列表,不能将此选项当做可选项添加
|
|
|
- let data = this.firstList.filter(item => item.label === value);
|
|
|
- this.$emit('listChange', { value: data.length > 0 ? data[0] : undefined, type: this.type });
|
|
|
- return;
|
|
|
- }
|
|
|
- //2直辖市查重
|
|
|
- let result = this.checkHas(value);
|
|
|
- if (!result) {
|
|
|
- return false;
|
|
|
+ processProvince(val) {
|
|
|
+ //查下这个值是不是省份,是省份就干掉,不是省份再看是不是直辖市
|
|
|
+ let res = this.haveCity(val);
|
|
|
+ if (res) {
|
|
|
+ //不是直辖市,干掉,查询
|
|
|
+ let newArr = _.difference(this.selectList, [val]);
|
|
|
+ this.$set(this, `selectList`, newArr);
|
|
|
+ this.$emit(`listChange`, { type: this.type, val: val });
|
|
|
+ } else {
|
|
|
+ this.processCity();
|
|
|
}
|
|
|
- //3说明这个选项是可以添加的选项,添加
|
|
|
- this.processCity(value, type);
|
|
|
},
|
|
|
- //看着名很咋地,其实就是同步数据
|
|
|
- processCity(value, type) {
|
|
|
- let filList = _.get(this, `${type}List`);
|
|
|
- let object = filList.filter(item => item.label === value)[0];
|
|
|
- this.selectList.push(object);
|
|
|
- this.disFilter();
|
|
|
- },
|
|
|
- //查重,取消选择
|
|
|
- checkHas(value) {
|
|
|
- let dataList = this.selected.filter(item => item.label !== value);
|
|
|
- //判断筛选后的数据和原数据是否一致,一致说明不是删除,需要继续处理;不一致说明这个选项之前选过了.干掉它,直接结束
|
|
|
- if (dataList.length !== this.selected.length) {
|
|
|
- //删除掉这个
|
|
|
- this.$set(this, `selectList`, dataList);
|
|
|
- this.$emit('selectChange', { value: dataList, type: this.type });
|
|
|
- return false; //删除,不用继续进行了
|
|
|
+ checkSelect(val, type) {
|
|
|
+ let arr = [];
|
|
|
+ let list = _.get(this, `${type}List`);
|
|
|
+ let select = list.filter(fil => fil.name === val);
|
|
|
+ if (!select.length > 0) {
|
|
|
+ return;
|
|
|
}
|
|
|
- return true;
|
|
|
- },
|
|
|
- //初始化处理
|
|
|
- defaultProcess() {
|
|
|
- //处理复选框
|
|
|
- let select = this.selected.filter(item => item.value !== undefined);
|
|
|
- if (select.length > 0) {
|
|
|
- // let result = this.selected.map(item => item.value);
|
|
|
- this.$set(this, `selectList`, select);
|
|
|
+ let result = this.selectList.filter(fil => fil === select[0].code);
|
|
|
+ if (result.length > 0) {
|
|
|
+ arr = this.selectList.filter(item => item !== result[0]);
|
|
|
+ this.$set(this, `selectList`, arr);
|
|
|
+ return false;
|
|
|
} else {
|
|
|
- let result = this.selected.map(item => {
|
|
|
- return this.defalutSearch(item);
|
|
|
- });
|
|
|
- this.disFilter(result);
|
|
|
+ this.selectList.push(select[0].code);
|
|
|
}
|
|
|
},
|
|
|
- //显示处理;选择值
|
|
|
- disFilter() {
|
|
|
- this.$emit('selectChange', { value: this.selectList, type: this.type });
|
|
|
+ //看着名很咋地,其实就是同步数据
|
|
|
+ processCity() {
|
|
|
+ let newArr = [];
|
|
|
+ this.selectList.map(item => {
|
|
|
+ let result = this.firstList.filter(fil => fil.code === item);
|
|
|
+ if (result.length > 0) {
|
|
|
+ result.forEach(res => {
|
|
|
+ newArr.push(res);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ result = this.secondList.filter(fil => fil.code === item);
|
|
|
+ if (result.length > 0) {
|
|
|
+ result.forEach(res => {
|
|
|
+ newArr.push(res);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ result = this.displayList.filter(fil => fil.code === item);
|
|
|
+ if (result.length > 0) {
|
|
|
+ result.forEach(res => {
|
|
|
+ newArr.push(res);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.disFilter(newArr);
|
|
|
},
|
|
|
//关闭标签方法
|
|
|
- tagClose(value) {
|
|
|
- console.log(value);
|
|
|
+ tagClose(val) {
|
|
|
//取消选择
|
|
|
- let leastList = this.selectList.filter(item => item.label !== value.label);
|
|
|
- console.log(leastList);
|
|
|
+ let leastList = this.selectList.filter(item => item !== val.code);
|
|
|
+ let leastDisplayList = this.displayList.filter(item => item.code !== val.code);
|
|
|
this.$set(this, `selectList`, leastList);
|
|
|
- this.disFilter();
|
|
|
+ this.disFilter(leastDisplayList);
|
|
|
},
|
|
|
//是不是直辖市
|
|
|
haveCity(item) {
|
|
|
- let value;
|
|
|
+ let code;
|
|
|
if (typeof item === 'object') {
|
|
|
- value = item.value;
|
|
|
+ code = item.code;
|
|
|
} else {
|
|
|
- value = item;
|
|
|
+ code = item;
|
|
|
}
|
|
|
- if (value === '北京市') {
|
|
|
+ if (code === '110000' || code === '120000' || code === '310000' || code === '500000' || code === '710000' || code === '810000' || code === '820000') {
|
|
|
return false;
|
|
|
- } else if (value === '吉林省' || value === '沈阳省') {
|
|
|
+ } else if (code.indexOf('0000') > 0) {
|
|
|
return true;
|
|
|
} else {
|
|
|
return false;
|
|
@@ -187,13 +185,34 @@ export default {
|
|
|
changeDisplay() {
|
|
|
this.$set(this, `dialog`, !this.dialog);
|
|
|
},
|
|
|
- defalutSearch(label) {
|
|
|
- console.log(label);
|
|
|
- let result = this.firstList.filter(fil => fil.label === label);
|
|
|
+ //初始化处理
|
|
|
+ defaultProcess() {
|
|
|
+ //处理复选框
|
|
|
+ if (!_.isObject(this.selected)) return;
|
|
|
+ let select = this.selected.filter(item => item.code !== undefined);
|
|
|
+ if (select.length > 0) {
|
|
|
+ let result = this.selected.map(item => item.code);
|
|
|
+ this.$set(this, `selectList`, result);
|
|
|
+ //处理显示
|
|
|
+ this.$set(this, `displayList`, this.selected);
|
|
|
+ } else {
|
|
|
+ let result = this.selected.map(item => {
|
|
|
+ return this.defalutSearch(item);
|
|
|
+ });
|
|
|
+ this.disFilter(result);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //显示处理;选择值
|
|
|
+ disFilter(val) {
|
|
|
+ this.$emit('selectChange', { val: val, type: this.type });
|
|
|
+ this.$set(this, `displayList`, val);
|
|
|
+ },
|
|
|
+ defalutSearch(name) {
|
|
|
+ let result = this.firstList.filter(fil => fil.name === name);
|
|
|
if (result.length > 0) {
|
|
|
return result[0];
|
|
|
} else {
|
|
|
- result = this.secondList.filter(fil => fil.label === label);
|
|
|
+ result = this.secondList.filter(fil => fil.name === name);
|
|
|
if (result.length > 0) {
|
|
|
return result[0];
|
|
|
}
|
|
@@ -209,7 +228,15 @@ export default {
|
|
|
}
|
|
|
.firstMenu {
|
|
|
background: #c9cacf;
|
|
|
- border: 0.0625rem solid #e7e8ec;
|
|
|
+ border: 1px solid #e7e8ec;
|
|
|
+ height: 50vh;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .el-col {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0.5rem 0;
|
|
|
+ height: 2rem;
|
|
|
+ border-bottom: 1px solid #aaa;
|
|
|
+ }
|
|
|
}
|
|
|
/deep/.el-collapse-item__header {
|
|
|
height: 0;
|