aiot-app/pages/home/components/deviceScreen.vue

<template>
	<view>
		<u-popup :show="show" closeOnClickOverlay mode="top" @close="closePopup">
			<view class="search_list">
				<u-form labelPosition="left" :model="form" labelWidth="180" labelAlign="left" class="baseForm">
					<!-- <u-form-item label="创建时间:" class="required-form" borderBottom prop="rangeDate">
						<uni-datetime-picker v-model="rangeDate" :border="true" :icon="false" type="daterange" />
					</u-form-item> -->
					<u-form-item label="使用单位:" class="required-form" borderBottom prop="postName">
						<!-- <u-input v-model="form.postId" placeholder="请选择" type="text" @click.stop="openDepartmentPicker" /> -->
						 <view :style="{ color: form.postName ? 'black' : '#c0c4cc' }" class="assetType_box"
							@click="openDepartmentPicker">
							{{ form.postName ? form.postName : '请选择使用单位' }}
						</view>
					</u-form-item>
					
				</u-form>
			</view>
			<view class="operate_box rx-bc">
				<u-button size="small" class="u-reset-button" @click="reset">
					重置
				</u-button>
				<u-button type="success" size="small" class="u-reset-button" @click="submit">
					确定
				</u-button>
			</view>
		</u-popup>

		<ba-tree-picker ref="departmentPicker" :multiple="false" @select-change="departmentConfirm" title="选择领料部门"
			:localdata="departmentOption" valueKey="id" textKey="name" childrenKey="children" />
	</view>
</template>

<script>
	import {
		getWarehouseList,
		getProduceTreeByPid
	} from '@/api/warehouseManagement'
	import {
		post,
		get
	} from '@/utils/api.js'
	import DictSelection from "@/components/Dict/DictSelection.vue";
	import dictMxins from "@/mixins/dictMixins";
	import { orderTypeEnum, saleOrderProgressStatusEnum, reviewStatusEnum } from '@/enum/dict.js'
	import {
		listOrganizations
	} from '@/api/common'
	import {
		toTreeData
	} from '@/utils/utils.js'
	export default {
		mixins: [dictMxins],
		components: {
			DictSelection
		},
		props: ['type', 'postId', 'postName'],

		data() {
			return {
				show: false,
				rangeDate: [],
				form: {
					postId: '',
					postName: ''
				},
				orderTypeEnum,
				saleOrderProgressStatusEnum,
				reviewStatusEnum,
				departmentOption: []
			}
		},
		created() {
			this.initDeptData()
		},
		methods: {
			openDepartmentPicker() {
				this.$refs.departmentPicker._show()
			},
			// 部门列表
			async initDeptData() {
				let deptTreeList = await listOrganizations()
				this.departmentOption = toTreeData({
					data: deptTreeList,
					idField: 'id',
					parentIdField: 'parentId'
				})
			},
			departmentConfirm(data, name, allList) {
				console.log(data, name, allList)
				this.form.postId = data[0]
				this.form.postName = name
			},
			handleSaleTypeChange(val) {
				console.log(val)
			},
			open() {
				this.show = true
				for (let key of Object.keys(this.form)) {
					this.form[key] = this[key]
				}

				// if(this.createTimeStart && this.createTimeEnd) {
				// this.rangeDate = [this.createTimeStart, this.createTimeEnd]
				// } else {
				// 	this.setDefaultRangeDate()
				// }
			},
			setDefaultRangeDate() {
				const now = new Date()
				const year = now.getFullYear()
				const month = String(now.getMonth() + 1).padStart(2, '0')
				const day = String(now.getDate()).padStart(2, '0')
				const today = `${year}-${month}-${day}`
				if (this.type === 'year') {
					this.rangeDate = [`${year}-01-01`, today]
				} else if (this.type === 'month') {
					this.rangeDate = [`${year}-${month}-01`, today]
				}
			},
			closePopup() {
				this.show = false
			},
			reset() {
				this.form = {
					postId: '',
					postName: ''
				}
				this.rangeDate = [],
				this.$emit('succeed', this.form)
				this.closePopup()
			},
			submit() {
				// if(this.rangeDate.length) {
				// 	this.form.createTimeStart = this.rangeDate[0]
				// 	this.form.createTimeEnd = this.rangeDate[1]
				// }
				this.$emit('succeed', this.form)
				this.closePopup()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search_list {
		min-height: 100rpx;

		/deep/ .baseForm {
			padding: 0 20rpx;
		}
	}

	.operate_box {
		padding: 10rpx 32rpx;

		/deep/ .u-button {
			width: 40%;
		}
	}
	/deep/.baseForm {
		.u-form-item__body {
			padding: 4px !important;
		}

		.assetType_box {
			padding: 12rpx 18rpx;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 30rpx;
		}
	}
</style>