工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
潘志宝
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="IP" prop="host">
18             <el-input v-model="formData.host" placeholder="请输入IP"/>
19           </el-form-item>
20         </el-col>
21       </el-row>
22       <el-row>
23         <el-col :span="12">
24           <el-form-item label="用户名" prop="user">
25             <el-input v-model="formData.user" placeholder="请输入用户名"/>
26           </el-form-item>
27         </el-col>
28         <el-col :span="12">
29           <el-form-item label="密码" prop="password">
30             <el-input type = "password" v-model="formData.password" 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="progId">
37             <el-input v-model="formData.progId" placeholder="请输入设备名"/>
38           </el-form-item>
39         </el-col>
40         <el-col :span="12">
41           <el-form-item label="设备注册表ID" prop="clsId">
42             <el-input type="password" v-model="formData.clsId" placeholder="请输入设备注册表ID"/>
43           </el-form-item>
44         </el-col>
45       </el-row>
46     </el-form>
47     <template #footer>
48       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
49       <el-button @click="dialogVisible = false">取 消</el-button>
50     </template>
51   </Dialog>
52 </template>
53 <script lang="ts" setup>
54 import * as OpcDaApi from '@/api/data/channel/opcda'
55
56 defineOptions({name: 'DataOpcDaDeviceForm'})
57
58 const {t} = useI18n() // 国际化
59 const message = useMessage() // 消息弹窗
60 const dialogVisible = ref(false) // 弹窗的是否展示
61 const dialogTitle = ref('') // 弹窗的标题
62 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
63 const formType = ref('') // 表单的类型：create - 新增；update - 修改
64 const formData = ref({
65   id: undefined,
66   serverName: undefined,
67   host: undefined,
68   user: undefined,
69   password: undefined,
70   progId: undefined,
71   clsId: undefined
72 })
73 const formRules = reactive({
74   serverName: [{required: true, message: '服务名不能为空', trigger: 'blur'}],
75   host: [{required: true, message: 'IP不能为空', trigger: 'blur'}],
76   user: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
77   password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
78 })
79 const formRef = ref() // 表单 Ref
80
81 /** 打开弹窗 */
82 const open = async (type: string, id?: number) => {
83   dialogVisible.value = true
84   dialogTitle.value = t('action.' + type)
85   formType.value = type
86   resetForm()
87   // 修改时，设置数据
88   if (id) {
89     formLoading.value = true
90     try {
91       formData.value = await OpcDaApi.getOpcDaDevice(id)
92     } finally {
93       formLoading.value = false
94     }
95   }
96 }
97 defineExpose({open}) // 提供 open 方法，用于打开弹窗
98
99 /** 提交表单 */
100 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
101 const submitForm = async () => {
102   // 校验表单
103   if (!formRef) return
104   const valid = await formRef.value.validate()
105   if (!valid) return
106   // 提交请求
107   formLoading.value = true
108   try {
109     const data = formData.value as unknown as OpcDaApi.OpcDaDeviceVO
110     if (formType.value === 'create') {
111       await OpcDaApi.createOpcDaDevice(data)
112       message.success(t('common.createSuccess'))
113     } else {
114       await OpcDaApi.updateOpcDaDevice(data)
115       message.success(t('common.updateSuccess'))
116     }
117     dialogVisible.value = false
118     // 发送操作成功的事件
119     emit('success')
120   } finally {
121     formLoading.value = false
122   }
123 }
124
125 /** 重置表单 */
126 const resetForm = () => {
127   formData.value = {
128     id: undefined,
129     serverName: undefined,
130     host: undefined,
131     user: undefined,
132     password: undefined,
133     progId: undefined,
134     clsId: undefined
135   }
136   formRef.value?.resetFields()
137 }
138 </script>