erp-ui-m/components/thorui/tui-sel-load-list/tui-sel-load-list.vue

<template>
	<view class="gui-sel-load-list">
		<view @tap.stop="show">
			<slot :selData="selData" :selId="selData.id">
				<text v-if="maxCounts==1">{{selData&&selData.label?selData.label:placeholder}}</text>
				<block v-else>
					<text v-for="(item, index) in selData" :key="index">{{index>0?', ':''}}{{item.label}}</text>
					<text v-if="!selData || selData.length<=0">{{placeholder}}</text>
				</block>
			</slot>
		</view>

		<tui-bottom-popup class="page-popup" :title="title" :dotColor="dotColor" :show="visible"
			backgroundColor="#ffffff" @close="pickerCancel">
			<view class="pf-picker-cnt" @touchmove.stop.prevent>
				<view class="padding-30 pt-20 pb-20" v-if="searchKey">
					<uni-search-bar class="uni-mt-10" radius="100" placeholder="搜索" cancelButton="none"
						@confirm="search" />
				</view>
				<scroll-view style="height: 50vh;" scroll-y @scrolltolower="loadApiData">
					<tui-load-list ref="list" @change="changeData" :limit="maxCounts==1?20:1000" :postData="parPostData"
						:apiUrl="apiUrl">
						<block v-if="maxCounts==1">
							<radio-group @change="radioChange">
								<label
									class="df ai-center pt-24 pb-24 ml-30 uni-border-bottom font-26 uni-color-darkgrey"
									v-for="(item, index) in listData" :key="index">
									<view>
										<radio style="transform:scale(0.8)" :value="item.id" :color="dotColor"
											:checked="String(myvalue) === String(item.id)" />
									</view>
									<view class="ml-10">{{item.label}}</view>
								</label>
							</radio-group>
						</block>
						<block v-else>
							<checkbox-group @change="checkboxChange">
								<label
									class="df ai-center pt-24 pb-24 ml-30 uni-border-bottom font-26 uni-color-darkgrey"
									v-for="(item, index) in listData" :key="index">
									<view>
										<checkbox style="transform:scale(0.8)" :value="item.id" :color="dotColor"
											:checked="checkboxHas(item.id)" />
									</view>
									<view class="ml-10">{{item.label}}</view>
								</label>
							</checkbox-group>
						</block>
					</tui-load-list>
				</scroll-view>
				<view class="submit-frame">
					<view class="btn-frame">
						<view style="background:#f4f4f4;" v-if="!notClear" class="flex uni-tab__cart-button-right"
							@click="clearData">
							<text style="color:#333333;" class="uni-tab__cart-button-right-text">清除</text>
						</view>
						<view style="background:#f4f4f4;" v-else class="flex uni-tab__cart-button-right"
							@click="pickerCancel">
							<text style="color:#333333;" class="uni-tab__cart-button-right-text">取消</text>
						</view>
						<view style="background:#007aff;flex:3;" class="flex uni-tab__cart-button-right"
							@click="returndata">
							<text style="color:#ffffff;" class="uni-tab__cart-button-right-text">确认</text>
						</view>
						<!-- <uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="clearData"
						@buttonClick="buttonClick" /> -->
					</view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>
<script>
	let App = getApp()
	import mixinsPage from "@/common/mixins-model.js"
	export default {
		mixins: [mixinsPage],
		components: {},
		data() {
			return {
				datas: {
					years: [],
					months: [],
					hours: [],
					minutes: [],
					seconds: []
				},
				listData: [],
				_selData: {},
				selData: {},
				myvalue: '',
				parPostData: null,
				visible: false
			}
		},
		props: {
			title: {
				type: String,
				default: "选择行业"
			},
			dotColor: {
				type: String,
				default: '#2979ff'
			},
			notClear: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			// 占位符
			placeholder: {
				type: String,
				default: "无"
			},
			apiUrl: {
				type: String,
				default: ""
			},
			itemsKey: {
				type: String,
				default: "records"
			},
			postData: {
				type: Object,
				default: null
			},
			searchKey: {
				type: String,
				default: ""
			},
			keyLabel: {
				type: String,
				default: "name"
			},
			keyId: {
				type: String,
				default: "id"
			},
			initlist: {
				type: [Array],
				default: () => {
					return []
				}
			},
			list: {
				type: [Array],
				default: () => {
					return []
				}
			},
			maxCounts: {
				type: [Number, String],
				default: 1
			},
			value: {
				type: [Number, String, Array],
				default: ""
			}
		},
		watch: {
			value(val) {
				// console.log('=========>变化', val)
				this.myvalue = val;
				this.init()
			},
			postData: {
				handler: function() {
					if (this.apiUrl && JSON.stringify(this.parPostData) !== JSON.stringify(this.postData)) {
						this.parPostData = this.postData;
					}
				},
				deep: true
			},
			list(val) {
				this.initData()
			}
		},
		created() {
			this.appData = App.globalData ? App.globalData : getApp().globalData;
			this.parPostData = this.postData;
			this.initvalue();
			this.initData();
		},
		methods: {
			initvalue() {
				if (this.maxCounts == 1) {
					this.myvalue = this.value;
				} else {
					if (!this.value) {
						this.myvalue = []
					} else if (this.$api.isString(this.value)) {
						this.myvalue = String(this.value).split(',')
					} else {
						this.myvalue = this.value;
					}
					/* this.value.map(item => {
						this.$set(item, 'label', item[this.keyLabel])
						this.$set(item, 'id', item[this.keyId])
						return item
					}) */
				}
			},
			clearData() {
				if (this.maxCounts == 1) {
					this.selData = {
						id: '',
						label: ''
					}
					this.$emit("change", null);
					this.$emit("input", '');
				} else {
					this.selData = [];
					this.$emit("change", []);
					this.$emit("input", []);
				}
				this.pickerCancel();
			},
			buttonClick(index) {
				if (index == 1) {
					// console.log('确认', e)
					this.returndata()
				} else {
					// console.log('取消', e)
					this.pickerCancel()
				}
			},
			loadData() {
				// 默认的初始函数
			},
			initData() {
				if (this.apiUrl) {
					return false;
				} else if (this.list && this.list.length > 0) {
					this.listData = this.list.map(item => {
						this.$set(item, 'label', item[this.keyLabel])
						this.$set(item, 'id', item[this.keyId])
						return item
					})
					this.init()
				}
			},
			returndata() {
				if (!this.listData || this.listData.length <= 0) {
					this.$api.toast("没有可选择的数据项")
					return false
				}
				if (this.maxCounts == 1) {
					if (this._selData) {
						this.selData = Object.assign({}, this._selData)
						this.$emit("input", this.selData.id)
						this.$emit("change", this.selData)
					} else {
						this.$api.toast("请点击选择数据项")
						return false
					}
				} else {
					if (this.maxCounts > 1 && this._selData.length > this.maxCounts) {
						this.$api.toast("选项不能超过：" + this.maxCounts + "个！")
						return false
					}
					// console.log('当前选择数据：', this._selData)
					if (this._selData && this._selData.length > 0) {
						this.selData = [].concat(this._selData)
						this.$emit("input", this.selData.map(item => {
							return item.id
						}))
						this.$emit("change", this.selData)
					} else {
						this.selData = []
						this.$emit("input", [])
						this.$emit("change", [])
					}
				}
				this.visible = false;
			},
			checkboxChange(e) {
				const myvalue = e.detail.value;
				const id = [];
				const label = [];
				const data = this.listData.filter(item => {
					return myvalue.some(id => {
						return String(id) == String(item.id)
					})
				})
				this.myvalue = myvalue
				this._selData = [].concat(data)
			},
			radioChange(evt) {
				this.myvalue = evt.detail.value
				const data = this.listData.find(item => {
					return String(item.id) == String(this.myvalue)
				})
				this._selData = Object.assign({}, data)
				// console.log(this.selData)
			},
			loadApiData() {
				if (this.$refs.list) {
					this.$refs.list.loadData().then(res => {}).catch(res => {});
				}
			},
			search(res) {
				const keys = res.value
				this.$set(this.parPostData, this.searchKey, keys)
			},
			changeData(data) {
				var list = []
				if (data && data.list) {
					list = data.list
				}
				const listData = list.map((item, index) => {
					const items = Object.assign({}, item, {
						label: item[this.keyLabel],
						id: item[this.keyId]
					})
					return items
				});
				// console.log(listData)
				this.listData = this.initlist.concat(listData)
				this.init()
			},
			init() {
				if (!this.listData || this.listData.length <= 0) {
					// this.myvalue = '';
					this._selData = null;
					return false
				}
				if (this.maxCounts == 1) {
					this._selData = null;
					this.listData.forEach((item, index) => {
						if (String(this.myvalue) == String(item.id)) {
							this.myvalue = item.id
							this._selData = item
							// this.$emit("change", this.selData)
						}
					})
					this.selData = Object.assign({}, this._selData)
				} else {
					this._selData = this.listData.filter(item => {
						const hasvalue = this.myvalue ? this.myvalue.some(id => {
							return String(item.id) == String(id)
						}) : false
						if (hasvalue) {
							return true
						} else {
							return false
						}
					})
					// console.log(this.myvalue, '==========', this._selData)
					this.selData = [].concat(this._selData)
				}
			},
			checkboxHas(id) {
				if (!this.myvalue || this.myvalue.length <= 0) {
					return false
				}
				// console.log('======this.myvalue', this.myvalue)
				return this.myvalue ? this.myvalue.some(item => {
					return String(item) == String(id)
				}) : false
			},
			//显示
			show() {
				if (this.disabled) {
					return false
				}
				this.initvalue()
				this.visible = true;
			},
			//点击取消
			pickerCancel() {
				this.visible = false;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.submit-frame {
		background-color: #ffffff;
		padding: 24rpx 30rpx;
		box-shadow: 0 0 12rpx 12rpx rgba(0, 0, 0, 0.04);

		.btn-frame {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex: 1;
			flex-direction: row;
			border-radius: 88rpx;
			overflow: hidden;
		}

		.flex {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
		}

		.uni-tab__cart-button-right {
			height: 88rpx;
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			flex: 2;
			justify-content: center;
			align-items: center;
			/* #ifdef H5 */
			cursor: pointer;
			/* #endif */
		}

		.uni-tab__cart-button-right-text {
			font-size: 14px;
			color: #fff;
		}

		.uni-tab__cart-button-right:active {
			opacity: 0.7;
		}
	}

	.gui-sel-load-list {
		overflow: hidden;

		.pf-picker-hd {
			display: flex;
			padding: 30rpx;
			background-color: #fff;
			position: relative;
			text-align: center;
			font-size: 34rpx;
			justify-content: space-between;

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


		.item {
			text-align: center;
			line-height: 80rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 32rpx;
		}

		.pf-picker-view {
			width: 100%;
			height: 600rpx;
			overflow: hidden;
			background-color: rgba(255, 255, 255, 1);
			z-index: 666;
		}

		.pf-picker-btn {
			font-size: 32rpx;
			color: #888888;
		}

		.one-picker-view {
			height: 100%;
		}
	}

	.uni-border-bottom {
		position: relative;
	}

	.uni-border-bottom::after {
		content: ' ';
		position: absolute;
		left: 64rpx;
		bottom: 0;
		right: 0;
		height: 1rpx;
		z-index: 1;
		background-color: #e5e5e5;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}
</style>