erp-ui-m/components/thorui/tui-sel-cascade/tui-sel-cascade.vue

<template>
	<view class="abow-sel-cascade">
		<view @tap.stop="closemask">
			<slot :selData="seldata">
				<text>{{seldata&&seldata.fulltext?seldata.fulltext:placeholder}}</text>
			</slot>
		</view>
		<tui-bottom-popup class="page-popup" :title="title" :dotColor="dotColor" :show="isopen"
			backgroundColor="#ffffff" @close="closemask">
			<tui-cascade-selection :isshow="1" :size="26" request :receiveData="receiveData" :textSize="24"
				:itemList="itemList" :reset="resetid" @complete="complete" @change="change"></tui-cascade-selection>
			<view class="submit-frame">
				<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
					@buttonClick="buttonClick" />
			</view>
		</tui-bottom-popup>
	</view>
</template>
<script>
	let App = getApp()
		import request from '@/utils/request'
	export default {
		// mixins: [mixinsPage],
		components: {},
		data() {
			return {
				isopen: false,
				receiveData: [],
				itemList: [],
				seldata: {},
				options: [{
					// icon: 'close',
					text: '清空'
				}],
				resetid: 0,
				customButtonGroup: [],
			}
		},
		props: {
			// 手动设置根目录数据
			rootData: {
				type: Array,
				default: null,
			},
			//改变值则重置数据
			reset: {
				type: [Number, String],
				default: 0
			},
			// 占位符
			placeholder: {
				type: String,
				default: "无"
			},
			fulltext: {
				type: String,
				default: ""
			},
			disabled: {
				type: Boolean,
				default: false
			},
			value: {
				type: [Number, String],
				default: null
			},
			title: {
				type: String,
				default: "选择"
			},
			apiurl: {
				type: String,
				default: ""
			},
			leaf: {
				type: String,
				default: "leaf"
			},
			allSel: {
				type: String,
				default: "" // 选择全部
			},
			dotColor: {
				type: String,
				default: '#26ae7e'
			},
			postKey: {
				type: Array,
				default: () => {
					return [{
						key: 'induPid',
						type: 'par',
						value: 'induId'
					}, {
						key: 'induType',
						type: '',
						value: 1
					}]
				}
			},
			keyId: {
				type: String,
				default: "induId"
			},
			keyLabel: {
				type: String,
				default: "induName"
			},
			keyList: {
				type: String,
				default: ""
			},
			selLeaf: {
				type: [Boolean], // 是否要求选择叶子节点
				default: true
			},
			lvlLeaf: {
				type: [Number], // 数值则限制最大选择深度
				default: 0
			}
		},
		watch: {
			// value: {
			// 	handler(nval, oval) {},
			// 	immediate: true,
			// 	deep: true
			// }
			reset(val) {
				this.resetid = val
				this.clearData()
			}
		},
		created() {
			this.appData = App.globalData ? App.globalData : getApp().globalData;
			this.resetid = this.reset
			if (this.fulltext) {
				this.$set(this.seldata, "fulltext", this.fulltext)
			}
			this.customButtonGroup = [{
				text: '取消',
				backgroundColor: 'linear-gradient(90deg, #f4f4f4, #f4f4f4)',
				color: '#333'
			}]
			if (!this.selLeaf) {
				this.customButtonGroup.push({
					text: '确定',
					backgroundColor: 'linear-gradient(90deg, #26ae7e, #26ae7e)',
					color: '#fff'
				})
			}
				console.log(3333)
				this.loadData('rush');
		},
		methods: {
			// 弹窗选择
			closemask() {
				if (this.disabled) {
					return false
				}
				this.isopen = !this.isopen
			},
			complete(e) {
				if (this.selLeaf) {
					this.returndata()
				} else {
					// this.$api.toast("请选择数据")
				}
			},
			onClick(e) {
				// console.log('清空', e)
				this.resetid = this.resetid * -1
				this.clearData()
				this.closemask()
			},
			clearData() {
				const seldata = {
					id: 0,
					fullvalue: '',
					fulltext: ''
				}
				this.seldata = seldata
				this.$emit("change", seldata)
				this.$emit("input", '')
			},
			buttonClick(e) {
				if (e.index == 1) {
					// console.log('确认', e)
					this.returndata()
				} else {
					// console.log('取消', e)
					this.closemask()
				}
			},
			change(e) {
					console.log(5555)
				this.seldata = Object.assign({}, e)
				if (!e.leaf) {
					if (!this.selLeaf) {
						this.seldata = Object.assign({}, e)
					}
					if (this.selLeaf && this.lvlLeaf > 0 && this.lvlLeaf <= e.result.length) {
						// this.seldata = Object.assign({}, e)
						console.log(666)
						this.returndata()
						return false
					}
					if (this.lvlLeaf <= 0 || this.lvlLeaf > e.result.length) {
						this.loadData(e);
					}
				} else {
					// this.seldata = Object.assign({}, e)
					this.receiveData = this.receiveData == null ? [] : null;
				}
			},
			returndata() {
				// console.log(this.seldata)
				this.$emit("change", this.seldata)
				this.$emit("input", this.seldata[this.keyId])
				this.closemask()
			},
			//行业列表
			loadData(e = null, index = 0) {
				setTimeout(() => {
					if (e == 'rush' && this.rootData && this.rootData) {
						this.itemList = [].concat(this.rootData).map(item => {
							console.log(item,'itemitem')
							this.$set(item, "text", item[this.keyLabel])
							this.$set(item, "value", item[this.keyId])
							this.$set(item, "leaf", !!item[this.leaf])
							return item
						})
						console.log(this.rootData)
						return false
					}
				},300)
				if (!this.apiurl) {
					return false
				}
				const data = {}
				// { key: "", type: "par", value: "value|text|fullvalue|fulltext" }
				// this.postKey.forEach(item => {
				// 	if (item.type == "par" && e) {
				// 		this.$set(data, item.key, e[item.value])
				// 	} else if (!item.type) {
				// 		this.$set(data, item.key, item.value)
				// 	}
				// })
				// // console.log(e, data)
				request({
					'url': this.apiurl,
					'method': 'get',
					params: data
				}).then(res => {
					if (res.code == 200) {
						let list = res.data
						if (this.keyList) {
							list = res.items[this.keyList]
						}
						if (e) {
							console.log(list,'666')
							this.receiveData = [].concat(list).map(item => {
								this.$set(item, "text", item[this.keyLabel])
								this.$set(item, "value", item[this.keyId])
								this.$set(item, "leaf", !!item[this.leaf])
								return item
							})
						} else {
							console.log(list,'888')
							this.itemList = [].concat(list).map(item => {
								this.$set(item, "text", item[this.keyLabel])
								this.$set(item, "value", item[this.keyId])
								this.$set(item, "leaf", !!item[this.leaf])
								return item
							})
							if (this.allSel) {
								const al = {
									value: 0,
									text: this.allSel,
									leaf: true
								}
								this.itemList.unshift(al)
							}
							// console.log(this.itemList,this.receiveData,'this.receiveData')
						}
					}
				}).catch(res => {
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.abow-sel-cascade {

		.tui-header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			overflow: hidden;
			position: relative;
		}

		.tui-icon-close {
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.submit-frame {
			padding: 30rpx 30rpx;
			background-color: #FFFFFF;
			position: relative;

			&:before {
				content: ' ';
				position: absolute;
				left: 0;
				top: 0px;
				right: 0;
				height: 1rpx;
				z-index: 1;
				// border-bottom: 1rpx solid #e5e5e5;
				background-color: #e5e5e5;
				transform-origin: 0 100%;
				transform: scaleY(0.5);
			}

			.btn {
				flex: 1;
				margin-right: 30rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
</style>