QianNiaoShop/components/SelDepartment.vue

<template>
	<block v-if="!!list">
		<u-select
			:value="value"
			value-name="id"
			label-name="departmentName"
			child-name="children"
			mode="mutil-column-auto"
			:list="list"
			@confirm="confirm"
			@cancel="cancel"
		></u-select>
	</block>
</template>

<script>
export default {
	model: {
		prop: 'value',
		event: 'change'
	},
	props: {
		value: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			list: ''
		};
	},
	created() {
		this.getAllDepartment();
	},
	methods: {
		confirm(val) {
			this.cancel()
			this.$emit('confirm', val);
		},
		cancel(val) {
			this.$emit('cancel', val);
		},
		getAllDepartment() {
			this.$u.api.getAllDepartment().then(res => {
				// this.list = this.reduceList(res.data);
				this.list = res.data;
			});
		},
		reduceList(list) {
			list.unshift({
				id: 0,
				departmentName: '全部'
			});
			list.forEach(item => {
				if (item.children) {
					item.children = this.reduceList(item.children);
				}
			});
			return list;
		}
	}
};
</script>

<style></style>