jfcloud-coldchain/snowy-admin-web/src/views/biz/monitor/mem/form.vue

<template>
	<xn-form-container
		:title="formData.id ? '编辑监测器' : '新增监测器'"
		:width="'800px'"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form
			ref="formRef"
			:model="formData"
			:rules="formRules"
			layout="inline"
			:label-col="{ style: { width: '105px', justifyContent: 'end' } }"
		>
			<a-row :gutter="10">
				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<a-form-item label="设备型号" name="modelName">
						<a-select
							ref="select"
							v-model:value="formData.modelName"
							:options="modeOptions"
							placeholder="请选择设备型号"
							@change="modelNameChange"
							:disabled="formData.id"
						/>
					</a-form-item>
				</a-col>

				<!-- 只做展示，不能做任何修改 -->
				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<a-form-item label="型号编码" name="deviceCode">
						<a-input v-model:value="formData.modelName" placeholder="请输入型号编码" allow-clear disabled />
					</a-form-item>
				</a-col>
				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<a-form-item label="设备编号" name="deviceCode">
						<a-input
							v-model:value="formData.deviceCode"
							placeholder="请输入设备编号"
							allow-clear
							:maxlength="10"
							@change="deviceCodeChange(formData.deviceCode)"
							:disabled="formData.id"
						/>
					</a-form-item>
				</a-col>
				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<a-form-item label="设备名称" name="deviceName">
						<a-input
							:value="formData.deviceName"
							:disabled="!formData.deviceCode"
							placeholder="请输入设备名称"
							allow-clear
							@input="deviceNameInput"
						/>
					</a-form-item>
				</a-col>

				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<a-form-item label="传感器总路数" name="sensorCount">
						<a-input-number
							v-model:value="formData.sensorCount"
							placeholder="请输入传感器总路数"
							allow-clear
							:min="1"
							:max="sensorRouteMax"
							style="width: 100%"
							:precision="0"
							disabled
						/>
					</a-form-item>
				</a-col>
				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<a-form-item label="设备状态" name="status">
						<a-select ref="select" v-model:value="formData.status" placeholder="请选择设备状态">
							<a-select-option value="1">正常</a-select-option>
							<a-select-option value="2">闲置</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>

				<div
					class="form_item"
					v-if="modeData.sensorType == 'W' || modeData.sensorType == 'WS' || modeData.sensorType == 'WSC'"
				>
					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<a-form-item label="温度上限" name="temperatureUp">
							<a-input-number
								id="inputNumber"
								v-model:value="formData.temperatureUp"
								placeholder="请输入温度上限"
								allow-clear
								disabled
								style="width: 100%"
							/>
						</a-form-item>
					</a-col>
					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<a-form-item label="温度下限" name="temperatureDown">
							<a-input-number
								id="inputNumber"
								v-model:value="formData.temperatureDown"
								placeholder="请输入温度下限"
								allow-clear
								disabled
								style="width: 100%"
							/>
						</a-form-item>
					</a-col>
				</div>
				<div class="form_item" v-if="modeData.sensorType == 'WS' || modeData.sensorType == 'WSC'">
					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<a-form-item label="湿度上限" name="humidityUp">
							<a-input-number
								id="inputNumber"
								v-model:value="formData.humidityUp"
								placeholder="请输入湿度上限"
								allow-clear
								disabled
								style="width: 100%"
							/>
						</a-form-item>
					</a-col>
					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<a-form-item label="湿度下限" name="humidityDown">
							<a-input-number
								id="inputNumber"
								v-model:value="formData.humidityDown"
								placeholder="请输入湿度下限"
								allow-clear
								disabled
								style="width: 100%"
							/>
						</a-form-item>
					</a-col>
				</div>
				<div class="form_item" v-if="modeData.sensorType == 'WSC'">
					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<a-form-item label="CO2上限" name="co2Up">
							<a-input-number
								id="inputNumber"
								v-model:value="formData.co2Up"
								placeholder="请输入CO2上限"
								allow-clear
								disabled
								style="width: 100%"
							/>
						</a-form-item>
					</a-col>
					<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<a-form-item label="CO2下限" name="co2Down">
							<a-input-number
								id="inputNumber"
								v-model:value="formData.co2Down"
								placeholder="请输入CO2下限"
								allow-clear
								disabled
								style="width: 100%"
							/>
						</a-form-item>
					</a-col>
				</div>

				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
					<a-form-item label="排序：" name="sortCode">
						<a-input-number class="xn-wd" v-model:value="formData.sortCode" :max="100" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>

		<template #footer>
			<a-button class="xn-mr8" @click="onClose">取消</a-button>
			<a-button type="primary" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup>
	import { message } from 'ant-design-vue'
	import { required, rules } from '@/utils/formRules'
	import devicetypeApi from '@/api/basicset/devicetypeApi'
	import memApi from '@/api/basicset/memApi'
	const emit = defineEmits({ successful: null })
	const visible = ref(false) // 默认是关闭状态
	const formRef = ref()
	const formData = ref({ sortCode: 99, status: '1' }) // 表单数据
	const modeOptions = ref([]) // 设备型号
	const sensorRouteMax = ref(1) //传感器最大值默认1

	// 默认要校验的
	const formRules = {
		deviceName: [required('请输入设备名称')],
		deviceCode: [required('请输入设备编号'), rules.number, { validator: maxCode, trigger: ['change', 'blur'] }],
		modelName: [required('请选择设备型号')],
		status: [required('请选择设备状态')],
		sensorCount: [required('请输入传感器总路数')]
	}

	// 设备编号最大值
	function maxCode(rule, value, callback) {
		const maxValue = 2147483647

		if (isNaN(value) || Number(value) > maxValue) {
			callback(new Error(`设备编码不能超过最大值 ${maxValue}`))
		} else {
			callback() // 校验通过
		}
	}

	// 获取设备型号
	const loadData = () => {
		devicetypeApi
			.devicetypeList()
			.then((res) => {
				modeOptions.value = (res || []).map((item) => {
					return {
						...item,
						value: item['code'],
						label: item['name']
					}
				})
			})
			.finally(() => {
				if (formData.value.modelName) {
					modelNameChange(formData.value.modelName)
				}
			})
	}

	const modeData = ref({ sensorType: '' }) //选中的设备型号

	// 选中设备型号获取上下限值
	const modelNameChange = (value) => {
		if (value) {
			const data = modeOptions.value.find((item) => item.value === value)
			modeData.value = data
			console.log()

			formData.value.temperatureUp = data.temperatureUp
			formData.value.temperatureDown = data.temperatureDown
			formData.value.humidityUp = data.humidityUp
			formData.value.humidityDown = data.humidityDown
			formData.value.co2Up = data.co2Up
			formData.value.co2Down = data.co2Down
			formData.value.sensorCount = data.sensorCount
			sensorRouteMax.value = data.sensorCount
		}
	}

	// 打开抽屉
	const onOpen = (record) => {
		modeData.value = { sensorType: '' }
		loadData()
		visible.value = true
		if (record) {
			formData.value = Object.assign({}, record)
		} else {
			formData.value = { sortCode: 99, status: '1' }
		}
	}

	// 设备名称同步设备编号
	const deviceCodeChange = (e) => {
		if (!formData.value.id) {
			formData.value.deviceName = e
		}
	}

	// 设备名称改变
	const deviceNameInput = (e) => {
		const val = e.target.value
		if (!val.startsWith(formData.value.deviceCode)) {
			formData.value.deviceName = formData.value.deviceCode
			message.warning({
				content: `设备名称必须以设备编号：${formData.value.deviceCode} 开头`,
				key: 'deviceName'
			})
		} else {
			formData.value.deviceName = val
		}
	}

	// 关闭抽屉
	const onClose = () => {
		formRef.value.resetFields()
		visible.value = false
	}

	// 验证并提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				memApi.submitForm(formData.value, formData.value.id).then(() => {
					onClose()
					emit('successful')
				})
			})
			.catch((error) => {
				console.log(error)
			})
	}

	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>

<style lang="less" scoped>
	:deep(.ant-form-item) {
		width: 100%;
		margin-bottom: 10px;
	}
	.form_item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
</style>