iailab-plat-ui-vue3.git

潘志宝

2024-08-22 8056c420566768c74bf3b75a5d2e6b46a0636742

提交 \| 用户 \| 时间
8056c4	1	<template>
潘	2	<Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
	3	<el-form
	4	ref="formRef"
	5	v-loading="formLoading"
	6	:model="formData"
	7	:rules="formRules"
	8	label-width="120px"
	9	>
	10	<el-row>
	11	<el-col :span="12">
	12	<el-form-item label="设备名称" prop="name">
	13	<el-input v-model="formData.name" placeholder="请输入设备名称" />
	14	</el-form-item>
	15	</el-col>
	16	</el-row>
	17	<el-row>
	18	<el-col :span="12">
	19	<el-form-item label="IP地址" prop="address">
	20	<el-input v-model="formData.address" placeholder="请输入IP地址" />
	21	</el-form-item>
	22	</el-col>
	23	<el-col :span="12">
	24	<el-form-item label="端口" prop="port">
	25	<el-input v-model="formData.port" placeholder="请输入端口" />
	26	</el-form-item>
	27	</el-col>
	28	</el-row>
	29	<el-row>
	30	<el-col :span="12">
	31	<el-form-item label="不活动超时(ms)" prop="connectInactivityTimeout">
	32	<el-input v-model="formData.connectInactivityTimeout" placeholder="请输入不活动超时" />
	33	</el-form-item>
	34	</el-col>
	35	<el-col :span="12">
	36	<el-form-item label="重连超时(ms)" prop="reconnectInterval">
	37	<el-input v-model="formData.reconnectInterval" placeholder="请输入重连超时" />
	38	</el-form-item>
	39	</el-col>
	40	</el-row>
	41	<el-row>
	42	<el-col :span="12">
	43	<el-form-item label="重试次数" prop="attemptsBeforeTimeout">
	44	<el-input v-model="formData.attemptsBeforeTimeout" placeholder="请输入重试次数" />
	45	</el-form-item>
	46	</el-col>
	47	<el-col :span="12">
	48	<el-form-item label="重试间隔(ms)" prop="waitToRetryMilliseconds">
	49	<el-input v-model="formData.waitToRetryMilliseconds" placeholder="请输入重试间隔" />
	50	</el-form-item>
	51	</el-col>
	52	</el-row>
	53	<el-row>
	54	<el-col :span="12">
	55	<el-form-item label="读超时(ms)" prop="readTimeout">
	56	<el-input v-model="formData.readTimeout" placeholder="请输入读超时" />
	57	</el-form-item>
	58	</el-col>
	59	<el-col :span="12">
	60	<el-form-item label="写超时(ms)" prop="writeTimeout">
	61	<el-input v-model="formData.writeTimeout" placeholder="请输入写超时" />
	62	</el-form-item>
	63	</el-col>
	64	</el-row>
	65	<el-row>
	66	<el-col :span="12">
	67	<el-form-item label="是否使用优化" prop="useOptimizedBlockRead">
	68	<el-input v-model="formData.useOptimizedBlockRead" placeholder="请输入是否使用优化" />
	69	</el-form-item>
	70	</el-col>
	71	</el-row>
	72	</el-form>
	73	<template #footer>
	74	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	75	<el-button @click="dialogVisible = false">取消</el-button>
	76	</template>
	77	</Dialog>
	78	</template>
	79	<script lang="ts" setup>
	80	import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
	81	import * as ModBusApi from '@/api/data/channel/modbus'
	82	import { CommonStatusEnum } from '@/utils/constants'
	83
	84	defineOptions({ name: 'DataModBusDeviceForm' })
	85
	86	const { t } = useI18n() // 国际化
	87	const message = useMessage() // 消息弹窗
	88	const dialogVisible = ref(false) // 弹窗的是否展示
	89	const dialogTitle = ref('') // 弹窗的标题
	90	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	91	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	92	const formData = ref({
	93	id: undefined,
	94	name: undefined,
	95	address: undefined,
	96	port: undefined,
	97	connectInactivityTimeout: undefined,
	98	reconnectInterval: undefined,
	99	attemptsBeforeTimeout: undefined,
	100	waitToRetryMilliseconds: undefined,
	101	readTimeout: undefined,
	102	writeTimeout: undefined,
	103	useOptimizedBlockRead: undefined,
	104	projectReference: undefined
	105	})
	106	const formRules = reactive({
	107	name: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
	108	address: [{ required: true, message: 'IP地址不能为空', trigger: 'blur' }],
	109	port: [{ required: true, message: '端口不能为空', trigger: 'blur' }]
	110	})
	111	const formRef = ref() // 表单 Ref
	112
	113	/** 打开弹窗 */
	114	const open = async (type: string, id?: number) => {
	115	dialogVisible.value = true
	116	dialogTitle.value = t('action.' + type)
	117	formType.value = type
	118	resetForm()
	119	// 修改时，设置数据
	120	if (id) {
	121	formLoading.value = true
	122	try {
	123	formData.value = await ModBusApi.getModBusDevice(id)
	124	} finally {
	125	formLoading.value = false
	126	}
	127	}
	128	}
	129	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
	130
	131	/** 提交表单 */
	132	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	133	const submitForm = async () => {
	134	// 校验表单
	135	if (!formRef) return
	136	const valid = await formRef.value.validate()
	137	if (!valid) return
	138	// 提交请求
	139	formLoading.value = true
	140	try {
	141	const data = formData.value as unknown as ModBusApi.ModBusDeviceVO
	142	if (formType.value === 'create') {
	143	await ModBusApi.createModBusDevice(data)
	144	message.success(t('common.createSuccess'))
	145	} else {
	146	await ModBusApi.updateModBusDevice(data)
	147	message.success(t('common.updateSuccess'))
	148	}
	149	dialogVisible.value = false
	150	// 发送操作成功的事件
	151	emit('success')
	152	} finally {
	153	formLoading.value = false
	154	}
	155	}
	156
	157	/** 重置表单 */
	158	const resetForm = () => {
	159	formData.value = {
	160	id: undefined,
	161	name: undefined,
	162	address: undefined,
	163	port: undefined,
	164	connectInactivityTimeout: undefined,
	165	reconnectInterval: undefined,
	166	attemptsBeforeTimeout: undefined,
	167	waitToRetryMilliseconds: undefined,
	168	readTimeout: undefined,
	169	writeTimeout: undefined,
	170	useOptimizedBlockRead: undefined,
	171	projectReference: undefined
	172	}
	173	formRef.value?.resetFields()
	174	}
	175	</script>