clsd/app/components/multiSelector/multiSelector.vue

<template>
	<view>
		<picker mode="multiSelector" :range="list" @columnchange="columnchange" @change="change">
			<input :placeholder="placeholder" v-model="title" :disabled="true" placeholder-class="pc" />
			<view class="icon more" v-if="icon">&#xe8f2;</view>
		</picker>
	</view>
</template>

<script>
export default {
	name: 'multiSelector',
	props: {
		range: {
			type: Array
		},
		name: {
			type: String,
			default: '时间段'
		},
		icon: {
			type: Boolean,
			default: true
		},
		placeholder: {
			type: String,
			default: '请选择'
		},
		value: {
			type: String
		}
	},
	data() {
		return {
			title: this.value,
			list: this.range,
			multiIndex: [0, 0]
		};
	},
	watch: {
		value(newValue) {
			this.title = newValue;
		}
	},
	mounted() {
		let year = parseInt(this.util.getDate('year'));
		let month = parseInt(this.util.getDate('month'));
		if (this.name == '出生年月') {
			for (let i = 1970; i <= year - 16; i++) {
				this.list[0].unshift(i + '年');
			}
			for (let i = 1; i <= 12; i++) {
				this.list[1].push((i < 10 ? '0' + i : i) + '月');
			}
		}
		if (this.name == '薪资') {
			for (let i = 1; i <= 250; i++) {
				this.list[0].push(i + 'k');
			}
		}
		if (this.name == '时间段') {
			for (let i = 1990; i <= year; i++) {
				this.list[0].unshift(i);
			}
			for (let i = year + 1; i <= year + 8; i++) {
				this.list[1].push(i);
			}
		}
		if (this.name == '开始时间') {
			for (let i = 1990; i <= year; i++) {
				this.list[0].unshift(i + '年');
			}
			for (let i = 1; i <= month; i++) {
				this.list[1].push((i < 10 ? '0' + i : i) + '月');
			}
		}
		if (this.name == '结束时间') {
			for (let i = 1990; i <= year; i++) {
				this.list[0].unshift(i + '年');
			}
			this.list[0].unshift('至今');
		}
	},
	methods: {
		columnchange(e) {
			this.multiIndex[e.detail.column] = e.detail.value;
			if (e.detail.column == 0) {
				this.list[0].forEach((item, index) => {
					if (this.multiIndex[0] == index) {
						let array = [];
						let year = this.util.getDate('year') + '年';
						let month = parseInt(this.util.getDate('month'));
						//选择教育经历时间段
						if (this.name == '时间段') {
							for (let i = parseInt(this.list[0][this.multiIndex[0]]) + 1; i <= parseInt(this.list[0][this.multiIndex[0]]) + 8; i++) {
								if (this.list[0][this.multiIndex[0]] == '1990以前') {
									array = ['1990以前'];
								} else {
									array.push(i);
								}
							}
							this.list[1] = array;
						}
						//选择薪资要求
						if (this.name == '薪资') {
							for (let i = parseInt(e.detail.value) + 1; i <= parseInt(e.detail.value) + 5; i++) {
								if (e.detail.value > 0) {
									array.push(i + 'k');
								}
							}
							this.list[1] = array;
						}
						//选择时间范围
						if (this.name == '开始时间' || this.name == '结束时间') {
							//如果是今年只取当前月以前月份
							month = this.list[0][this.multiIndex[0]] == year ? month : 12;
							for (let i = 1; i <= month; i++) {
								if (this.list[0][this.multiIndex[0]] != '1990以前' && this.list[0][this.multiIndex[0]] != '至今') {
									array.push((i < 10 ? '0' + i : i) + '月');
								}
							}
							this.list[1] = array;
						}
						//选择出生年月
						if (this.name == '出生年月') {
							for (let i = 1; i <= 12; i++) {
								array.push((i < 10 ? '0' + i : i) + '月');
							}
							this.list[1] = array;
						}
					}
				});
			}

			this.$forceUpdate();
		},
		change(e) {
			if (this.list[0][this.multiIndex[0]]) {
				this.title = this.list[0][this.multiIndex[0]];
			}
			if (this.list[1][this.multiIndex[1]]) {
				this.title = this.list[0][this.multiIndex[0]] + '-' + this.list[1][this.multiIndex[1]];
			}
			this.title = this.title.replace('年', '').replace('月', '');
			this.$emit('input', this.title);
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss"></style>