工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
liriming
2024-08-29 325d3d48a79f8ccb42acf217abd0d229f26a64b0
提交 | 用户 | 时间
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">
25             <el-input v-model="formData.securityPolicy" placeholder="请输入安全策略"/>
26           </el-form-item>
27         </el-col>
28         <el-col :span="12">
29           <el-form-item label="安全模式" prop="securityMode">
30             <el-input v-model="formData.securityMode" placeholder="请输入安全模式"/>
31           </el-form-item>
32         </el-col>
33       </el-row>
34       <el-row>
35         <el-col :span="12">
36           <el-form-item label="连接方式" prop="connectionType">
37             <el-input v-model="formData.connectionType" placeholder="请输入连接方式"/>
38           </el-form-item>
39         </el-col>
40         <el-col :span="12">
41           <el-form-item label="用户名" prop="userName">
42             <el-input v-model="formData.userName" placeholder="请输入用户名"/>
43           </el-form-item>
44         </el-col>
45       </el-row>
46       <el-row>
47         <el-col :span="12">
48           <el-form-item label="密码" prop="password">
49             <el-input type="password" v-model="formData.password" placeholder="请输入密码"/>
50           </el-form-item>
51         </el-col>
52         <el-col :span="12">
53           <el-form-item label="安全证书路径" prop="certificatePath">
54             <el-input v-model="formData.certificatePath" placeholder="请输入安全证书路径"/>
55           </el-form-item>
56         </el-col>
57       </el-row>
58       <el-row>
59         <el-col :span="12">
60           <el-form-item label="连接方式" prop="connectInactivityTimeout">
61             <el-input v-model="formData.connectInactivityTimeout" placeholder="请输入连接方式"/>
62           </el-form-item>
63         </el-col>
64         <el-col :span="12">
65           <el-form-item label="重连超时" prop="reconnectInterval">
66             <el-input v-model="formData.reconnectInterval" placeholder="请输入重连超时"/>
67           </el-form-item>
68         </el-col>
69       </el-row>
70     </el-form>
71     <template #footer>
72       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
73       <el-button @click="dialogVisible = false">取 消</el-button>
74     </template>
75   </Dialog>
76 </template>
77 <script lang="ts" setup>
78 import * as OpcUaApi from '@/api/data/channel/opcua'
79
80 defineOptions({name: 'DataOpcUaDeviceForm'})
81
82 const {t} = useI18n() // 国际化
83 const message = useMessage() // 消息弹窗
84 const dialogVisible = ref(false) // 弹窗的是否展示
85 const dialogTitle = ref('') // 弹窗的标题
86 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
87 const formType = ref('') // 表单的类型：create - 新增；update - 修改
88 const formData = ref({
89   id: undefined,
90   serverName: undefined,
91   endpointUrl: undefined,
92   securityPolicy: undefined,
93   securityMode: undefined,
94   connectionType: undefined,
95   userName: undefined,
96   password: undefined,
97   certificatePath: undefined,
98   connectInactivityTimeout: undefined,
99   reconnectInterval: undefined,
100 })
101 const formRules = reactive({
102   serverName: [{required: true, message: '服务名不能为空', trigger: 'blur'}],
103 })
104 const formRef = ref() // 表单 Ref
105
106 /** 打开弹窗 */
107 const open = async (type: string, id?: number) => {
108   dialogVisible.value = true
109   dialogTitle.value = t('action.' + type)
110   formType.value = type
111   resetForm()
112   // 修改时，设置数据
113   if (id) {
114     formLoading.value = true
115     try {
116       formData.value = await OpcUaApi.getOpcUaDevice(id)
117     } finally {
118       formLoading.value = false
119     }
120   }
121 }
122 defineExpose({open}) // 提供 open 方法，用于打开弹窗
123
124 /** 提交表单 */
125 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
126 const submitForm = async () => {
127   // 校验表单
128   if (!formRef) return
129   const valid = await formRef.value.validate()
130   if (!valid) return
131   // 提交请求
132   formLoading.value = true
133   try {
134     const data = formData.value as unknown as OpcUaApi.OpcUaDeviceVO
135     if (formType.value === 'create') {
136       await OpcUaApi.createOpcUaDevice(data)
137       message.success(t('common.createSuccess'))
138     } else {
139       await OpcUaApi.updateOpcUaDevice(data)
140       message.success(t('common.updateSuccess'))
141     }
142     dialogVisible.value = false
143     // 发送操作成功的事件
144     emit('success')
145   } finally {
146     formLoading.value = false
147   }
148 }
149
150 /** 重置表单 */
151 const resetForm = () => {
152   formData.value = {
153     id: undefined,
154     serverName: undefined,
155     endpointUrl: undefined,
156     securityPolicy: undefined,
157     securityMode: undefined,
158     connectionType: undefined,
159     userName: undefined,
160     password: undefined,
161     certificatePath: undefined,
162     connectInactivityTimeout: undefined,
163     reconnectInterval: undefined,
164   }
165   formRef.value?.resetFields()
166 }
167 </script>