hs_hzl_uniapp_ml/pageApp/components/input.vue

<template>
	<view class="desc">
		<uni-row>
			<uni-col :span="labelSize">
				<view class="desc" style="font-size: 25rpx;">
					{{label}}
				</view>
			</uni-col>
			<uni-col :span="inputSpan">
				<view style="padding: 0 10rpx 0 0;">
					<uni-easyinput v-if="model === 'input'" primaryColor="#37babd" v-model="val" @input="input"
						:disabled="disabled">
					</uni-easyinput>
					<uni-datetime-picker v-if="model === 'date'" type="date" :clear-icon="false" v-model="val"
						:disabled="disabled" />
					<view v-if="model === 'search'" class="pickerView pickerText">
						<view @click="openSearch" class="pickerText" v-if="val">
							{{val}}
						</view>
						<view @click="openSearch" class="pickerText" v-else>
							待 选 择
						</view>
					</view>
					<u-number-box v-if="model === 'number'" v-model="val" @change="changeNumber"></u-number-box>
				</view>
			</uni-col>
			<uni-col :span="2" v-if="unit">
				<view style="padding: 10rpx 5rpx 0 2rpx;color: #818181;font-size: 20rpx;">
					{{unit}}
				</view>
			</uni-col>
		</uni-row>
		<view class="desc">
			<uni-easyinput v-if="model === 'textarea'" type="textarea" primaryColor="#37babd" v-model="val"
				@input="input" :disabled="disabled" :placeholder="placeholder" maxlength="-1">
			</uni-easyinput>
		</view>
		<uni-popup ref="searchPopup" background-color="#fff">
			<view style="height: 800rpx;">
				<view style="padding: 30rpx;">
					<u-search v-model="searchText" :show-action="false" placeholder="快捷搜索" @change="getSearchApiData()">
					</u-search>
				</view>
				<view style="padding: 5rpx;">
					<uni-list v-for="item in searchData">
						<uni-list-item :clickable="true" @click="dataToValue(item)" :title="item[searchLabelKey]" />
					</uni-list>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'hs-input',
		props: {
			value: {
				Type: String,
				default: null
			},
			label: {
				Type: String,
				default: ''
			},
			unit: {
				Type: String,
				default: ''
			},
			model: {
				Type: String,
				default: 'input'
			},
			labelSize: {
				Type: Number,
				default: 5
			},
			inputSpan: {
				Type: Number,
				default: 19
			},
			searchLabelKey: {
				Type: String,
				default: 'name'
			},
			searchApi: {
				Type: String,
				default: null
			},
			placeholder: {
				Type: String,
				default: null
			},
			disabled: false
		},
		data() {
			return {
				val: '',
				searchText: ''
			}
		},
		watch: {
			value(newVal) {
				this.val = newVal
			},
			modelValue(newVal) {
				this.val = newVal
			}
		},
		mounted() {
			if(this.value){
				this.val = this.value
			}
		},
		methods: {
			input: function(e) {
				this.$emit('input', this.val)
			},
			openSearch() {
				console.log('click ---> Test')
				this.$refs.searchPopup.open('bottom')
			},
			changeNumber(e) {
				this.$emit('change', this.val)
			},
			//获取/查询 信息
			async getSearchApiData() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/' + this.searchApi + this.searchText,
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.searchData = res.data
				}
			},
			//选择赋值给value
			dataToValue(item) {
				this.$emit('input', item[this.searchLabelKey])
				this.$refs.searchPopup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.desc {
		padding: 10rpx 15rpx 0 15rpx;
		color: #818181;
		font-size: 20rpx;
	}

	.pickerView {
		// align-items: flex-end;
		padding: 10rpx 20rpx;
		border: 1rpx #eeeeee solid;
	}

	.pickerText {
		font-size: 26rpx;
		color: #b1b1b1;
	}
</style>