iailab-plat-ui-vue3.git

潘志宝

2024-11-22 df90c0c5cfa4de114798015b92120ad8ba8b4826

提交 \| 用户 \| 时间
325d3d	1	<template>
L	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="serverName">
	13	<el-input v-model="formData.serverName" placeholder="请输入服务名"/>
	14	</el-form-item>
	15	</el-col>
	16	<el-col :span="12">
	17	<el-form-item label="端点URL" prop="endpointUrl">
	18	<el-input v-model="formData.endpointUrl" placeholder="请输入端点URL"/>
	19	</el-form-item>
	20	</el-col>
	21	</el-row>
	22	<el-row>
	23	<el-col :span="12">
	24	<el-form-item label="安全策略" prop="securityPolicy">
dea4e4	25	<el-select v-model="formData.securityPolicy" placeholder="请选择">
潘	26	<el-option
	27	v-for="dict in getStrDictOptions(DICT_TYPE.OPCUA_SECURITY_POLICY)"
	28	:key="dict.value"
	29	:label="dict.label"
	30	:value="dict.value"
	31	/>
	32	</el-select>
325d3d	33	</el-form-item>
L	34	</el-col>
	35	<el-col :span="12">
	36	<el-form-item label="安全模式" prop="securityMode">
dea4e4	37	<el-select v-model="formData.securityMode" placeholder="请选择">
潘	38	<el-option
	39	v-for="dict in getStrDictOptions(DICT_TYPE.OPCUA_SECURITY_MODE)"
	40	:key="dict.value"
	41	:label="dict.label"
	42	:value="dict.value"
	43	/>
	44	</el-select>
325d3d	45	</el-form-item>
L	46	</el-col>
	47	</el-row>
	48	<el-row>
	49	<el-col :span="12">
	50	<el-form-item label="连接方式" prop="connectionType">
dea4e4	51	<el-select v-model="formData.connectionType" placeholder="请选择">
潘	52	<el-option
	53	v-for="dict in getStrDictOptions(DICT_TYPE.OPCUA_CONNECTION_TYPE)"
	54	:key="dict.value"
	55	:label="dict.label"
	56	:value="dict.value"
	57	/>
	58	</el-select>
325d3d	59	</el-form-item>
L	60	</el-col>
	61	</el-row>
	62	<el-row>
	63	<el-col :span="12">
dea4e4	64	<el-form-item label="用户名" prop="userName">
潘	65	<el-input v-model="formData.userName" placeholder="请输入用户名"/>
	66	</el-form-item>
	67	</el-col>
	68	<el-col :span="12">
325d3d	69	<el-form-item label="密码" prop="password">
L	70	<el-input type="password" v-model="formData.password" placeholder="请输入密码"/>
	71	</el-form-item>
	72	</el-col>
dea4e4	73	</el-row>
潘	74	<el-row>
	75	<el-col :span="24">
325d3d	76	<el-form-item label="安全证书路径" prop="certificatePath">
L	77	<el-input v-model="formData.certificatePath" placeholder="请输入安全证书路径"/>
	78	</el-form-item>
	79	</el-col>
	80	</el-row>
	81	<el-row>
	82	<el-col :span="12">
dea4e4	83	<el-form-item label="不活动超时" prop="connectInactivityTimeout">
潘	84	<el-input v-model="formData.connectInactivityTimeout" placeholder="请输入不活动超时"/>
325d3d	85	</el-form-item>
L	86	</el-col>
	87	<el-col :span="12">
	88	<el-form-item label="重连超时" prop="reconnectInterval">
	89	<el-input v-model="formData.reconnectInterval" placeholder="请输入重连超时"/>
	90	</el-form-item>
	91	</el-col>
	92	</el-row>
	93	</el-form>
	94	<template #footer>
	95	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	96	<el-button @click="dialogVisible = false">取消</el-button>
	97	</template>
	98	</Dialog>
	99	</template>
	100	<script lang="ts" setup>
	101	import * as OpcUaApi from '@/api/data/channel/opcua'
dea4e4	102	import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
325d3d	103
L	104	defineOptions({name: 'DataOpcUaDeviceForm'})
	105
	106	const {t} = useI18n() // 国际化
	107	const message = useMessage() // 消息弹窗
	108	const dialogVisible = ref(false) // 弹窗的是否展示
	109	const dialogTitle = ref('') // 弹窗的标题
	110	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	111	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	112	const formData = ref({
	113	id: undefined,
	114	serverName: undefined,
	115	endpointUrl: undefined,
	116	securityPolicy: undefined,
	117	securityMode: undefined,
	118	connectionType: undefined,
	119	userName: undefined,
	120	password: undefined,
	121	certificatePath: undefined,
	122	connectInactivityTimeout: undefined,
dea4e4	123	reconnectInterval: 5000,
325d3d	124	})
L	125	const formRules = reactive({
	126	serverName: [{required: true, message: '服务名不能为空', trigger: 'blur'}],
dea4e4	127	endpointUrl: [{required: true, message: '端点URL不能为空', trigger: 'blur'}],
潘	128	securityPolicy: [{required: true, message: '安全策略不能为空', trigger: 'blur'}],
	129	securityMode: [{required: true, message: '安全模式不能为空', trigger: 'blur'}],
	130	connectionType: [{required: true, message: '连接方式不能为空', trigger: 'blur'}],
325d3d	131	})
L	132	const formRef = ref() // 表单 Ref
	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 OpcUaApi.getOpcUaDevice(id)
	145	} finally {
	146	formLoading.value = false
	147	}
	148	}
	149	}
	150	defineExpose({open}) // 提供 open 方法，用于打开弹窗
	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 OpcUaApi.OpcUaDeviceVO
	163	if (formType.value === 'create') {
	164	await OpcUaApi.createOpcUaDevice(data)
	165	message.success(t('common.createSuccess'))
	166	} else {
	167	await OpcUaApi.updateOpcUaDevice(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	serverName: undefined,
	183	endpointUrl: undefined,
	184	securityPolicy: undefined,
	185	securityMode: undefined,
	186	connectionType: undefined,
	187	userName: undefined,
	188	password: undefined,
	189	certificatePath: undefined,
	190	connectInactivityTimeout: undefined,
dea4e4	191	reconnectInterval: 5000,
325d3d	192	}
L	193	formRef.value?.resetFields()
	194	}
	195	</script>