选煤厂生产管理平台前端代码
dongyukun
2024-12-11 121bafb30d19c8951812713f6a81d440d1149a97
提交 | 用户 | 时间
5d2541 1 <template>
J 2   <Dialog width="60%" v-model="dialogVisible" :title="dialogTitle">
3     <el-form :model="formData" :rules="dataRule" ref="formData" 
4              label-width="120px">
5       <el-row>
6         <el-col :span="12">
7           <el-form-item prop="ny" label="年月">
8             <el-date-picker
9               style="width: 100%;"
10               v-model="formData.ny"
11               type="month"
12               format="yyyy-MM"
13               value-format="yyyy-MM"
14               placeholder="年月"/>
15           </el-form-item>
16         </el-col>
17         <el-col :span="12">
18           <el-form-item prop="mz" label="煤种">
19             <dict-select-tag style="width: 100%"
20                              size="mini"
21                              v-model="formData.mz"
22                              placeholder="煤种"
23                              dictCode="ymmz"
24                              :clearable="true"/>
25           </el-form-item>
26         </el-col>
27       </el-row>
28       <el-row>
29         <el-col :span="12">
30           <el-form-item prop="ymdw" label="用煤单位">
31             <el-input size="mini" v-model="formData.ymdw" placeholder="用煤单位"/>
32           </el-form-item>
33         </el-col>
34         <el-col :span="12">
35           <el-form-item prop="cpl" label="产量">
36             <el-input-number size="mini" style="width: 100%;" v-model="formData.cpl" :controls="false"
37                              :precision="2" :min="0" :max="10000000"/>
38           </el-form-item>
39         </el-col>
40       </el-row>
41       <el-divider content-position="left">原煤指标</el-divider>
42       <el-row>
43         <el-col :span="12">
44           <el-form-item prop="ymSf" label="Mt%">
45             <el-input-number v-model="formData.ymSf"
46                              style="width: 100%;"
47                              size="mini"
48                              placeholder="Mt%"
49                              :precision="2"
50                              :controls="false"
51                              :min="0"
52                              :max="100"/>
53           </el-form-item>
54         </el-col>
55         <el-col :span="12">
56           <el-form-item prop="ymHf" label="Ad%">
57             <el-input-number v-model="formData.ymHf"
58                              style="width: 100%;"
59                              size="mini"
60                              placeholder="Ad%"
61                              :precision="2"
62                              :controls="false"
63                              :min="0"
64                              :max="100"/>
65           </el-form-item>
66         </el-col>
67       </el-row>
68       <el-row>
69         <el-col :span="12">
70           <el-form-item prop="ymLf" label="St.d%">
71             <el-input-number v-model="formData.ymLf"
72                              style="width: 100%;"
73                              size="mini"
74                              placeholder="Mt%"
75                              :precision="2"
76                              :controls="false"
77                              :min="0"
78                              :max="100"/>
79           </el-form-item>
80         </el-col>
81       </el-row>
82       <el-divider content-position="left">精煤指标</el-divider>
83       <el-row>
84         <el-col :span="12">
85           <el-form-item prop="jmSf" label="Ad%">
86             <el-input-number v-model="formData.jmSf"
87                              style="width: 100%;"
88                              size="mini"
89                              placeholder="Ad%"
90                              :precision="2"
91                              :controls="false"
92                              :min="0"
93                              :max="100"/>
94           </el-form-item>
95         </el-col>
96         <el-col :span="12">
97           <el-form-item prop="jmHff" label="Vdaf%">
98             <el-input-number v-model="formData.jmHff"
99                              style="width: 100%;"
100                              size="mini"
101                              placeholder="Vdaf%"
102                              :precision="2"
103                              :controls="false"
104                              :min="0"
105                              :max="100"/>
106           </el-form-item>
107         </el-col>
108       </el-row>
109       <el-row>
110         <el-col :span="12">
111           <el-form-item prop="jmLf" label="St.d%">
112             <el-input-number v-model="formData.jmLf"
113                              style="width: 100%;"
114                              size="mini"
115                              placeholder="St.d%"
116                              :precision="2"
117                              :controls="false"
118                              :min="0"
119                              :max="100"/>
120           </el-form-item>
121         </el-col>
122         <el-col :span="12">
123           <el-form-item prop="jmNj" label="GR.I">
124             <el-input-number v-model="formData.jmNj"
125                              style="width: 100%;"
126                              size="mini"
127                              placeholder="GR.I"
128                              :controls="false"
129                              :min="0"
130                              :max="1000"/>
131           </el-form-item>
132         </el-col>
133       </el-row>
134       <el-row>
135         <el-col :span="12">
136           <el-form-item prop="jmJzc" label="胶质层Y">
137             <el-input-number v-model="formData.jmJzc"
138                              style="width: 100%;"
139                              size="mini"
140                              placeholder="胶质层Y"
141                              :controls="false"
142                              :min="0"
143                              :max="1000"/>
144           </el-form-item>
145         </el-col>
146       </el-row>
147       <el-divider content-position="left">中煤指标</el-divider>
148       <el-row>
149         <el-col :span="12">
150           <el-form-item prop="zmHf" label="Ad%">
151             <el-input-number v-model="formData.zmHf"
152                              style="width: 100%;"
153                              size="mini"
154                              placeholder="Ad%"
155                              :precision="2"
156                              :controls="false"
157                              :min="0"
158                              :max="100"/>
159           </el-form-item>
160         </el-col>
161         <el-col :span="12">
162           <el-form-item prop="zmLf" label="St.d%">
163             <el-input-number v-model="formData.zmLf"
164                              style="width: 100%;"
165                              size="mini"
166                              placeholder="St.d%"
167                              :precision="2"
168                              :controls="false"
169                              :min="0"
170                              :max="100"/>
171           </el-form-item>
172         </el-col>
173       </el-row>
174       <el-divider content-position="left">矸石指标</el-divider>
175       <el-row>
176         <el-col :span="12">
177           <el-form-item prop="gsHf" label="Ad%">
178             <el-input-number v-model="formData.gsHf"
179                              style="width: 100%;"
180                              size="mini"
181                              placeholder="Ad%"
182                              :precision="2"
183                              :controls="false"
184                              :min="0"
185                              :max="100"/>
186           </el-form-item>
187         </el-col>
188       </el-row>
189     </el-form>
190     <template #footer>
191       <el-button :disabled="formLoading" type="primary" @click="submitForm()">确定</el-button>
192       <el-button @click="dialogVisible = false">取消</el-button>
193     </template>
194   </Dialog>
195 </template>
196
197 <script lang="ts" setup>
198
199   import * as WashTargetApi from '@/api/xmcpms/coal-quality/analysis/wash/target'
200
201
202   defineOptions({name: ' WashTargetForm'})
203
204   const {t} = useI18n() // 国际化
205   const message = useMessage() // 消息弹窗
206   const dialogVisible = ref(false) // 弹窗的是否展示
207   const dialogTitle = ref('') // 弹窗的标题
208   const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
209   const formType = ref('') // 表单的类型:create - 新增;update - 修改
210   const formRef = ref() // 表单 Ref
211   const formData = ref({
212     id: undefined,
213     ny: undefined,
214     mz: undefined,
215     ymdw: undefined,
216     cpl: undefined,
217     ymSf: undefined,
218     ymHf: undefined,
219     ymLf: undefined,
220     jmSf: undefined,
221     jmHf: undefined,
222     jmLf: undefined,
223     jmHff: undefined,
224     jmNj: undefined,
225     jmJzc: undefined,
226     zmHf: undefined,
227     zmLf: undefined,
228     gsHf: undefined
229   })
230
231   const open = async (type: string, id?: string) => {
232     dialogVisible.value = true
233     dialogTitle.value = t('action.' + type)
234     formType.value = type
235     resetForm()
236     //修改时,设置数据
237     if (id) {
238       formLoading.value = true
239       try {
240         formData.value = await WashTargetApi.getWashTarget(id)
241       } finally {
242         formLoading.value = false
243       }
244     }
245   }
246   defineExpose({ open }) // 提供 open 方法,用于打开弹窗
247
248   /** 提交表单 */
249   const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
250   const submitForm = async () => {
251     // 校验表单
252     if (!formRef) return
253     const valid = await formRef.value.validate()
254     if (!valid) return
255     // 提交请求
256     formLoading.value = true
257     try {
258       const data = formData.value as WashTargetApi.WashTargetVO
259       if (formType.value === 'create') {
260         await WashTargetApi.createWashTarget(data)
261         message.success(t('common.createSuccess'))
262       } else {
263         await WashTargetApi.updateWashTarget(data)
264         message.success(t('common.updateSuccess'))
265       }
266       dialogVisible.value = false
267       // 发送操作成功的事件
268       emit('success')
269     } finally {
270       formLoading.value = false
271     }
272   }
273
274   /** 重置表单 */
275   const resetForm = () => {
276     formData.value = {
277       id: undefined,
278       code: undefined,
279       ny: undefined,
280       syrq: undefined,
281       mz: undefined,
282       drl: undefined,
283       fcfa: undefined,
284       bz: undefined,
285       detList: []
286     }
287     formRef.value?.resetFields()
288   }
289
290 </script>
291 <style scoped>
292   .el-date-editor {
293     width: 100%;
294   }
295 </style>