iailab-plat-ui-vue3.git

Merge remote-tracking branch 'origin/master'

houzhongjian

2024-11-27 9e876a11f6f0b384d4b1f0a60e066944dbcdeaa5

提交 \| 用户 \| 时间
b05c43	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="device">
	13	<el-input v-model="formData.device" readonly/>
	14	</el-form-item>
	15	</el-col>
	16	</el-row>
	17	<el-row>
	18	<el-col :span="12">
	19	<el-form-item label="Tag名称" prop="tagName">
	20	<el-input v-model="formData.tagName" placeholder="请输Tag名称"/>
	21	</el-form-item>
	22	</el-col>
	23	<el-col :span="12">
	24	<el-form-item label="数据类型" prop="dataType">
	25	<el-select v-model="formData.dataType" placeholder="请选择">
	26	<el-option
	27	v-for="dict in getStrDictOptions(DICT_TYPE.TAG_DATA_TYPE)"
	28	:key="dict.value"
	29	:label="dict.label"
	30	:value="dict.value"
	31	/>
	32	</el-select>
	33	</el-form-item>
	34	</el-col>
	35	</el-row>
	36	<el-row>
	37	<el-col :span="12">
	38	<el-form-item label="地址" prop="address">
	39	<el-input v-model="formData.address" placeholder="请输入地址"/>
	40	</el-form-item>
	41	</el-col>
	42	<el-col :span="12">
	43	<el-form-item label="大小端" prop="format">
	44	<el-input v-model="formData.format" placeholder="请输入大小端" />
	45	</el-form-item>
	46	</el-col>
	47	</el-row>
	48	<el-row>
	49	<el-col :span="12">
	50	<el-form-item label="采集频率" prop="samplingRate">
	51	<el-input v-model="formData.samplingRate" placeholder="请输入采集频率"/>
	52	</el-form-item>
	53	</el-col>
	54	<el-col :span="12">
	55	<el-form-item label="是否启用" prop="enabled">
	56	<el-select v-model="formData.enabled" placeholder="请选择">
	57	<el-option
6c2636	58	v-for="dict in getIntDictOptions(DICT_TYPE.COM_IS_INT)"
b05c43	59	:key="dict.value"
潘	60	:label="dict.label"
	61	:value="dict.value"
	62	/>
	63	</el-select>
	64	</el-form-item>
	65	</el-col>
	66	</el-row>
	67	<el-row>
	68	<el-col :span="24">
	69	<el-form-item label="描述" prop="tagDesc">
	70	<el-input v-model="formData.tagDesc" placeholder="描述"/>
	71	</el-form-item>
	72	</el-col>
	73	</el-row>
	74	</el-form>
	75	<template #footer>
	76	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	77	<el-button @click="dialogVisible = false">取消</el-button>
	78	</template>
	79	</Dialog>
	80	</template>
	81	<script lang="ts" setup>
	82	import * as ModBusTagApi from '@/api/data/channel/modbus/tag'
	83	import { CommonEnabled } from '@/utils/constants'
	84	import {isPositiveInteger} from '@/utils/validate'
6c2636	85	import { DICT_TYPE, getStrDictOptions, getIntDictOptions } from '@/utils/dict'
b05c43	86
潘	87	defineOptions({name: 'ModBusTagForm'})
	88
	89	const {t} = useI18n() // 国际化
	90	const message = useMessage() // 消息弹窗
	91	const dialogVisible = ref(false) // 弹窗的是否展示
	92	const dialogTitle = ref('') // 弹窗的标题
	93	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	94	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	95	const formData = ref({
	96	id: undefined,
	97	tagName: undefined,
	98	dataType: undefined,
	99	enabled: CommonEnabled.ENABLE,
	100	format: undefined,
6c2636	101	device: '',
b05c43	102	address: '',
潘	103	samplingRate: undefined,
	104	tagDesc: '',
	105	})
	106	const validateNum = (rule, value, callback) => {
	107	if (!isPositiveInteger(value)) {
	108	callback(new Error('格式不正确'))
	109	} else {
	110	callback()
	111	}
	112	}
	113	const formRules = reactive({
	114	device: [{required: true, message: '关联设备不能为空', trigger: 'blur'}],
	115	address: [
	116	{required: true, message: '地址不能为空', trigger: 'blur'},
	117	{validator: validateNum, trigger: 'blur'}],
	118	dataType: [{required: true, message: '数据类型不能为空', trigger: 'blur'}]
	119	})
	120	const formRef = ref() // 表单 Ref
	121
	122	/** 打开弹窗 */
	123	const open = async (type: string, id?: number, device?: string) => {
	124	dialogVisible.value = true
	125	dialogTitle.value = t('action.' + type)
	126	formType.value = type
	127	resetForm()
	128	if (device) {
	129	formData.value.device = device
	130	}
	131	// 修改时，设置数据
	132	if (id) {
	133	formLoading.value = true
	134	try {
	135	formData.value = await ModBusTagApi.getModBusTag(id)
	136	} finally {
	137	formLoading.value = false
	138	}
	139	}
	140	}
	141	defineExpose({open}) // 提供 open 方法，用于打开弹窗
	142
	143	/** 提交表单 */
	144	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	145	const submitForm = async () => {
	146	// 校验表单
	147	if (!formRef) return
	148	const valid = await formRef.value.validate()
	149	if (!valid) return
	150	// 提交请求
	151	formLoading.value = true
	152	try {
	153	const data = formData.value as unknown as ModBusTagApi.ModBusTagVO
	154	if (formType.value === 'create') {
	155	await ModBusTagApi.createModBusTag(data)
	156	message.success(t('common.createSuccess'))
	157	} else {
	158	await ModBusTagApi.updateModBusTag(data)
	159	message.success(t('common.updateSuccess'))
	160	}
	161	dialogVisible.value = false
	162	// 发送操作成功的事件
	163	emit('success')
	164	} finally {
	165	formLoading.value = false
	166	}
	167	}
	168
	169	/** 重置表单 */
	170	const resetForm = () => {
	171	formData.value = {
	172	id: undefined,
	173	tagName: undefined,
	174	dataType: undefined,
	175	enabled: CommonEnabled.ENABLE,
	176	format: undefined,
	177	device: '',
	178	address: '',
	179	samplingRate: undefined,
	180	tagDesc: '',
	181	}
	182	formRef.value?.resetFields()
	183	}
	184	</script>