工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
潘志宝
2 天以前 346718058b6fd0d882385a549532adf384633ce6
提交 | 用户 | 时间
ebc552 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="预测项ID" prop="itemId">
13             <el-input v-model="formData.itemId" placeholder="请输入预测项ID"/>
14           </el-form-item>
15         </el-col>
16         <el-col :span="12">
17           <el-form-item label="输出ID" prop="outId">
18             <el-input v-model="formData.outId" placeholder="请输入输出ID"/>
19           </el-form-item>
20         </el-col>
21       </el-row>
22       <el-row>
23         <el-col :span="12">
24           <el-form-item label="取样长度" prop="sampleLength">
25             <el-input-number v-model="formData.sampleLength" :min="1" clearable controls-position="right" style="width: 100%"/>
26           </el-form-item>
27         </el-col>
28         <el-col :span="12">
29           <el-form-item label="值类型" prop="valueType">
30             <el-input v-model="formData.valueType" 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="beginTime">
37             <el-input v-model="formData.beginTime" placeholder="请输入开始统计时间"/>
38           </el-form-item>
39         </el-col>
40         <el-col :span="12">
41           <el-form-item label="精准误差" prop="inDeviation">
42             <el-input v-model="formData.inDeviation" 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="inAccuracyRate">
49             <el-input v-model="formData.inAccuracyRate" placeholder="请输入精准度"/>
50           </el-form-item>
51         </el-col>
52         <el-col :span="12">
53           <el-form-item label="不可信误差" prop="outDeviation">
54             <el-input v-model="formData.outDeviation" 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="outAccuracyRate">
61             <el-input v-model="formData.outAccuracyRate" placeholder="请输入不可信率"/>
62           </el-form-item>
63         </el-col>
64         <el-col :span="12">
65           <el-form-item label="是否启用" prop="isEnable">
66             <el-select v-model="formData.isEnable" placeholder="请选择">
67               <el-option
68                 v-for="dict in getIntDictOptions(DICT_TYPE.COM_IS_INT)"
69                 :key="dict.value"
70                 :label="dict.label"
71                 :value="dict.value"
72               />
73             </el-select>
74           </el-form-item>
75         </el-col>
76       </el-row>
77     </el-form>
78     <template #footer>
79       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
80       <el-button @click="dialogVisible = false">取 消</el-button>
81     </template>
82   </Dialog>
83 </template>
84 <script lang="ts" setup>
85 import * as MmItemAccuracyRate from '@/api/model/pre/accuracy/rate'
86 import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
87
88 defineOptions({name: 'DataMmItemAccuracyRateForm'})
89
90 const {t} = useI18n() // 国际化
91 const message = useMessage() // 消息弹窗
92 const dialogVisible = ref(false) // 弹窗的是否展示
93 const dialogTitle = ref('') // 弹窗的标题
94 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
95 const formType = ref('') // 表单的类型：create - 新增；update - 修改
96 const formData = ref({
97   id: undefined,
98   itemId: undefined,
99   outId: undefined,
100   sampleLength: undefined,
101   valueType: undefined,
102   beginTime: undefined,
103   inDeviation: undefined,
104   inAccuracyRate: undefined,
105   outDeviation: undefined,
106   outAccuracyRate: undefined,
107   isEnable: undefined,
108 })
109 const formRules = reactive({
110   itemId: [{required: true, message: '预测项ID不能为空', trigger: 'blur'}],
111   outId: [{required: true, message: '输出ID不能为空', trigger: 'blur'}],
112 })
113 const formRef = ref() // 表单 Ref
114
115 /** 打开弹窗 */
116 const open = async (type: string, id?: number) => {
117   dialogVisible.value = true
118   dialogTitle.value = t('action.' + type)
119   formType.value = type
120   resetForm()
121   // 修改时，设置数据
122   if (id) {
123     formLoading.value = true
124     try {
125       formData.value = await MmItemAccuracyRate.getMmItemAccuracyRate(id)
126     } finally {
127       formLoading.value = false
128     }
129   }
130 }
131 defineExpose({open}) // 提供 open 方法，用于打开弹窗
132
133 /** 提交表单 */
134 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
135 const submitForm = async () => {
136   // 校验表单
137   if (!formRef) return
138   const valid = await formRef.value.validate()
139   if (!valid) return
140   // 提交请求
141   formLoading.value = true
142   try {
143     const data = formData.value as unknown as MmItemAccuracyRate.MmItemAccuracyRateVO
144     if (formType.value === 'create') {
145       await MmItemAccuracyRate.createMmItemAccuracyRate(data)
146       message.success(t('common.createSuccess'))
147     } else {
148       await MmItemAccuracyRate.updateMmItemAccuracyRate(data)
149       message.success(t('common.updateSuccess'))
150     }
151     dialogVisible.value = false
152     // 发送操作成功的事件
153     emit('success')
154   } finally {
155     formLoading.value = false
156   }
157 }
158
159 /** 重置表单 */
160 const resetForm = () => {
161   formData.value = {
162     id: undefined,
163     itemId: undefined,
164     outId: undefined,
165     sampleLength: undefined,
166     valueType: undefined,
167     beginTime: undefined,
168     inDeviation: undefined,
169     inAccuracyRate: undefined,
170     outDeviation: undefined,
171     outAccuracyRate: undefined,
172     isEnable: undefined,
173   }
174   formRef.value?.resetFields()
175 }
176 </script>