iailab-plat-ui-vue3.git

Jay

2024-11-01 6c26363653eff403da477c8681fa3723d87f4b99

提交 \| 用户 \| 时间
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">
b05c43	13	<el-input v-model="formData.name" placeholder="请输入设备名称"/>
8056c4	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">
b05c43	20	<el-input v-model="formData.address" placeholder="请输入IP地址"/>
8056c4	21	</el-form-item>
潘	22	</el-col>
	23	<el-col :span="12">
	24	<el-form-item label="端口" prop="port">
b05c43	25	<el-input v-model="formData.port" placeholder="请输入端口"/>
8056c4	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">
b05c43	32	<el-input v-model="formData.connectInactivityTimeout" placeholder="请输入不活动超时"/>
8056c4	33	</el-form-item>
潘	34	</el-col>
	35	<el-col :span="12">
	36	<el-form-item label="重连超时(ms)" prop="reconnectInterval">
b05c43	37	<el-input v-model="formData.reconnectInterval" placeholder="请输入重连超时"/>
8056c4	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">
b05c43	44	<el-input v-model="formData.attemptsBeforeTimeout" placeholder="请输入重试次数"/>
8056c4	45	</el-form-item>
潘	46	</el-col>
	47	<el-col :span="12">
	48	<el-form-item label="重试间隔(ms)" prop="waitToRetryMilliseconds">
b05c43	49	<el-input v-model="formData.waitToRetryMilliseconds" placeholder="请输入重试间隔"/>
8056c4	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">
b05c43	56	<el-input v-model="formData.readTimeout" placeholder="请输入读超时"/>
8056c4	57	</el-form-item>
潘	58	</el-col>
	59	<el-col :span="12">
	60	<el-form-item label="写超时(ms)" prop="writeTimeout">
b05c43	61	<el-input v-model="formData.writeTimeout" placeholder="请输入写超时"/>
8056c4	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">
b05c43	68	<el-input v-model="formData.useOptimizedBlockRead" placeholder="请输入是否使用优化"/>
8056c4	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>
b05c43	80	import * as ModBusApi from '@/api/data/channel/modbus'
潘	81	import {isIP, isPositiveInteger} from '@/utils/validate'
8056c4	82
b05c43	83	defineOptions({name: 'DataModBusDeviceForm'})
8056c4	84
b05c43	85	const {t} = useI18n() // 国际化
8056c4	86	const message = useMessage() // 消息弹窗
潘	87	const dialogVisible = ref(false) // 弹窗的是否展示
	88	const dialogTitle = ref('') // 弹窗的标题
	89	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	90	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	91	const formData = ref({
	92	id: undefined,
	93	name: undefined,
	94	address: undefined,
	95	port: undefined,
b05c43	96	connectInactivityTimeout: "",
潘	97	reconnectInterval: "5000",
	98	attemptsBeforeTimeout: "3",
	99	waitToRetryMilliseconds: "250",
	100	readTimeout: "3000",
	101	writeTimeout: "3000",
	102	useOptimizedBlockRead: "true",
	103	projectReference: ''
8056c4	104	})
b05c43	105	const validateIP = (rule, value, callback) => {
潘	106	if (!isIP(value)) {
	107	callback(new Error('IP地址不正确'))
	108	} else {
	109	callback()
	110	}
	111	}
	112	const validateNum = (rule, value, callback) => {
	113	if (!isPositiveInteger(value)) {
	114	callback(new Error('格式不正确'))
	115	} else {
	116	callback()
	117	}
	118	}
	119
8056c4	120	const formRules = reactive({
b05c43	121	name: [{required: true, message: '设备名称不能为空', trigger: 'blur'}],
潘	122	address: [
	123	{required: true, message: 'IP地址不能为空', trigger: 'blur'},
	124	{validator: validateIP, trigger: 'blur'}
	125	],
	126	port: [
	127	{required: true, message: '端口不能为空', trigger: 'blur'},
	128	{validator: validateNum, trigger: 'blur'}
	129	]
8056c4	130	})
潘	131	const formRef = ref() // 表单 Ref
b05c43	132
8056c4	133
潘	134	/** 打开弹窗 */
	135	const open = async (type: string, id?: number) => {
	136	dialogVisible.value = true
	137	dialogTitle.value = t('action.' + type)
	138	formType.value = type
	139	resetForm()
	140	// 修改时，设置数据
	141	if (id) {
	142	formLoading.value = true
	143	try {
	144	formData.value = await ModBusApi.getModBusDevice(id)
	145	} finally {
	146	formLoading.value = false
	147	}
	148	}
	149	}
b05c43	150	defineExpose({open}) // 提供 open 方法，用于打开弹窗
8056c4	151
潘	152	/** 提交表单 */
	153	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	154	const submitForm = async () => {
	155	// 校验表单
	156	if (!formRef) return
	157	const valid = await formRef.value.validate()
	158	if (!valid) return
	159	// 提交请求
	160	formLoading.value = true
	161	try {
	162	const data = formData.value as unknown as ModBusApi.ModBusDeviceVO
	163	if (formType.value === 'create') {
	164	await ModBusApi.createModBusDevice(data)
	165	message.success(t('common.createSuccess'))
	166	} else {
	167	await ModBusApi.updateModBusDevice(data)
	168	message.success(t('common.updateSuccess'))
	169	}
	170	dialogVisible.value = false
	171	// 发送操作成功的事件
	172	emit('success')
	173	} finally {
	174	formLoading.value = false
	175	}
	176	}
	177
	178	/** 重置表单 */
	179	const resetForm = () => {
	180	formData.value = {
	181	id: undefined,
	182	name: undefined,
	183	address: undefined,
	184	port: undefined,
b05c43	185	connectInactivityTimeout: "",
潘	186	reconnectInterval: "5000",
	187	attemptsBeforeTimeout: "3",
	188	waitToRetryMilliseconds: "250",
	189	readTimeout: "3000",
	190	writeTimeout: "3000",
	191	useOptimizedBlockRead: "true",
	192	projectReference: ''
8056c4	193	}
潘	194	formRef.value?.resetFields()
	195	}
	196	</script>