选煤厂生产管理平台前端代码
dongyukun
2024-12-11 121bafb30d19c8951812713f6a81d440d1149a97
提交 | 用户 | 时间
58a8ee 1 <template>
J 2   <Dialog width="60%" v-model="dialogVisible" :title="dialogTitle">
3     <el-tabs>
4       <el-tab-pane label="浮沉实验台账">
5         <el-form :model="formData" :rules="formRules" ref="formRef"  v-loading="formLoading"
6                  label-width="120px">
7           <el-row>
8             <el-col :span="12">
9               <el-form-item prop="code" label="流水号">
10                 <el-input size="mini" disabled v-model="formData.code" placeholder="流水号"/>
11               </el-form-item>
12             </el-col>
13             <el-col :span="12">
14               <el-form-item prop="ny" label="年月">
15                 <el-date-picker
16                     style="width: 100%"
17                     v-model="formData.ny"
18                     type="month"
19                     value-format="YYYY-MM"
20                     placeholder="年月"/>
21               </el-form-item>
22             </el-col>
23           </el-row>
24           <el-row>
25             <el-col :span="12">
26               <el-form-item prop="syrq" label="实验日期">
27                 <el-date-picker
28                     style="width: 100%"
29                     v-model="formData.syrq"
30                     type="date"
31                     placeholder="实验日期"/>
32               </el-form-item>
33             </el-col>
34             <el-col :span="12">
35               <el-form-item prop="mz" label="煤种">
36                 <el-select v-model="formData.mz" placeholder="煤种"
37                            clearable >
38                   <el-option
121baf 39                     v-for="dict in getStrDictOptions(DICT_TYPE.PMS_YMMZ)"
58a8ee 40                     :key="dict.value"
J 41                     :label="dict.label"
42                     :value="dict.value"
43                   />
44                 </el-select>
45               </el-form-item>
46             </el-col>
47           </el-row>
48           <el-row>
49             <el-col :span="12">
50               <el-form-item prop="fcfa" label="浮沉方案">
51                 <el-select v-model="formData.fcfa" placeholder="浮沉方案"
52                            clearable >
53                   <el-option
54                     v-for="dict in getStrDictOptions(DICT_TYPE.FCFA)"
55                     :key="dict.value"
56                     :label="dict.label"
57                     :value="dict.value"
58                   />
59                 </el-select>
60               </el-form-item>
61             </el-col>
62             <el-col :span="12">
63               <el-form-item prop="drl" label="调入量">
64                 <el-input-number v-model="formData.drl" placeholder="调入量" :min="0"/>
65               </el-form-item>
66             </el-col>
67           </el-row>
68           <el-row>
69             <el-col :span="24">
70               <el-form-item prop="bz" label="备注">
71                 <el-input size="mini" v-model="formData.bz" placeholder="备注" type="textarea"
72                           :rows="2"/>
73               </el-form-item>
74             </el-col>
75           </el-row>
76         </el-form>
77       </el-tab-pane>
78       <el-tab-pane label="浮沉数据">
79         <el-form :inline="true">
80           <el-form-item>
81             <el-upload
82                 class="upload-demo"
83                 :action="action"
84                 :on-success="handleExcel"
85                 :multiple="false"
86                 :show-file-list="false"
87                 :on-change="changeFile"
88                 :file-list="fileList">
89               <el-button size="mini" type="primary">点击上传</el-button>
90             </el-upload>
91           </el-form-item>
92           <el-form-item>
93             <el-button size="mini" type="success" @click="downloadExcel">下载模板</el-button>
94           </el-form-item>
95         </el-form>
96         <el-form :model="formData" :rules="dataRule" ref="formDataDet"
97                  label-width="120px">
98           <el-table
99               :data="formData.detList"
100               border
101               height="400"
102               style="width: 100%;">
103             <el-table-column prop="mdjName" label="密度级" header-align="center"
104                              align="center"/>
105             <el-table-column label="综合累计" header-align="center">
106               <el-table-column prop="zhljcl" label="产率(%)" header-align="center" align="center">
107                 <template #default="scope">
108                   <el-input-number v-model="scope.row.zhljcl"
109                                    size="mini"
110                                    placeholder="产率(%)"
111                                    :precision="2"
112                                    :controls="false"
113                                    :min="0"
114                                    :max="100" class="curves-det-input"/>
115                 </template>
116               </el-table-column>
117               <el-table-column prop="zhljhf" label="灰分(%)" header-align="center" align="center">
118                 <template #default="scope">
119                   <el-input-number v-model="scope.row.zhljhf"
120                                    size="mini"
121                                    placeholder="灰分(%)"
122                                    :precision="2"
123                                    :controls="false"
124                                    :min="0"
125                                    :max="100" class="curves-det-input"/>
126                 </template>
127               </el-table-column>
128             </el-table-column>
129             <el-table-column label="浮物累计" header-align="center" >
130               <el-table-column prop="fwljcl" label="产率(%)" header-align="center" align="center">
131                 <template #default="scope">
132                   <el-input-number v-model="scope.row.fwljcl"
133                                    :disabled="true"
134                                    size="mini"
135                                    placeholder="产率(%)"
136                                    :precision="2"
137                                    :controls="false"
138                                    :min="0"
139                                    :max="100" class="curves-det-input"/>
140                 </template>
141               </el-table-column>
142               <el-table-column prop="fwljhf" label="灰分(%)" header-align="center" align="center">
143                 <template #default="scope">
144                   <el-input-number v-model="scope.row.fwljhf"
145                                    :disabled="true"
146                                    size="mini"
147                                    placeholder="灰分(%)"
148                                    :precision="2"
149                                    :controls="false"
150                                    :min="0"
151                                    :max="100" class="curves-det-input"/>
152                 </template>
153               </el-table-column>
154             </el-table-column>
155             <el-table-column label="沉物累计" header-align="center" >
156               <el-table-column prop="cwljcl" label="产率(%)" header-align="center" align="center">
157                 <template #default="scope">
158                   <el-input-number v-model="scope.row.cwljcl"
159                                    :disabled="true"
160                                    size="mini"
161                                    placeholder="产率(%)"
162                                    :precision="2"
163                                    :controls="false"
164                                    :min="0"
165                                    :max="100" class="curves-det-input"/>
166                 </template>
167               </el-table-column>
168               <el-table-column prop="cwljhf" label="灰分(%)" header-align="center" align="center">
169                 <template #default="scope">
170                   <el-input-number v-model="scope.row.cwljhf"
171                                    :disabled="true"
172                                    size="mini"
173                                    placeholder="灰分(%)"
174                                    :precision="2"
175                                    :controls="false"
176                                    :min="0"
177                                    :max="100" class="curves-det-input"/>
178                 </template>
179               </el-table-column>
180             </el-table-column>
181             <el-table-column prop="md" label="密度" header-align="center" align="center" >
182               <template #default="scope">
183                 <el-input-number v-model="scope.row.md"
184                                  size="mini"
185                                  placeholder="密度"
186                                  :precision="2"
187                                  :controls="false"
188                                  :min="0"
189                                  :max="100" class="curves-det-input"/>
190               </template>
191             </el-table-column>
192             <el-table-column prop="hl" label="±0.1含量" header-align="center" align="center" >
193               <template #default="scope">
194                 <el-input-number v-model="scope.row.hl"
195                                  :disabled="true"
196                                  size="mini"
197                                  placeholder="±0.1含量"
198                                  :precision="2"
199                                  :controls="false"
200                                  :min="0"
201                                  :max="100" class="curves-det-input"/>
202               </template>
203             </el-table-column>
204             <el-table-column prop="lf" label="硫分(%)" header-align="center" align="center" >
205               <template #default="scope">
206                 <el-input-number v-model="scope.row.lf"
207                                  size="mini"
208                                  placeholder="硫分(%)"
209                                  :precision="2"
210                                  :controls="false"
211                                  :min="0"
212                                  :max="100" class="curves-det-input"/>
213               </template>
214             </el-table-column>
215           </el-table>
216         </el-form>
217       </el-tab-pane>
218     </el-tabs>
219     <template #footer>
220       <el-button :disabled="formLoading" type="primary" @click="submitForm()">确定</el-button>
221       <el-button @click="dialogVisible = false">取消</el-button>
222     </template>
223   </Dialog>
224 </template>
225
226 <script lang="ts" setup>
227   import * as WashCurvesApi from '@/api/xmcpms/coal-quality/analysis/wash-curves/index'
228   import {DICT_TYPE, getStrDictOptions} from '@/utils/dict'
229
230   defineOptions({name: ' WashCurvesForm'})
231
232   const {t} = useI18n() // 国际化
233   const message = useMessage() // 消息弹窗
234   const dialogVisible = ref(false) // 弹窗的是否展示
235   const dialogTitle = ref('') // 弹窗的标题
236   const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
237   const formType = ref('') // 表单的类型:create - 新增;update - 修改
238   const formRef = ref() // 表单 Ref
239   const formData = ref({
240     id: undefined,
241     code: undefined,
242     ny: undefined,
243     syrq: undefined,
244     mz: undefined,
245     drl: undefined,
246     fcfa: undefined,
247     bz: undefined,
248     detList: []
249   })
250
251   const open = async (type: string, id?: string) => {
252     dialogVisible.value = true
253     dialogTitle.value = t('action.' + type)
254     formType.value = type
255     resetForm()
256     //修改时,设置数据
257     if (id) {
258       formLoading.value = true
259       try {
260         formData.value = await WashCurvesApi.getWashCurvesInfo(id)
261       } finally {
262         formLoading.value = false
263       }
264     }
265   }
266   defineExpose({ open }) // 提供 open 方法,用于打开弹窗
267
268   /** 提交表单 */
269   const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
270   const submitForm = async () => {
271     // 校验表单
272     if (!formRef) return
273     const valid = await formRef.value.validate()
274     if (!valid) return
275     // 提交请求
276     formLoading.value = true
277     try {
278       const data = formData.value as WashCurvesApi.WashCurvesVO
279       if (formType.value === 'create') {
280         await WashCurvesApi.createWashCurves(data)
281         message.success(t('common.createSuccess'))
282       } else {
283         await WashCurvesApi.updateWashCurves(data)
284         message.success(t('common.updateSuccess'))
285       }
286       dialogVisible.value = false
287       // 发送操作成功的事件
288       emit('success')
289     } finally {
290       formLoading.value = false
291     }
292   }
293
294   /** 重置表单 */
295   const resetForm = () => {
296     formData.value = {
297       id: undefined,
298       code: undefined,
299       ny: undefined,
300       syrq: undefined,
301       mz: undefined,
302       drl: undefined,
303       fcfa: undefined,
304       bz: undefined,
305       detList: []
306     }
307     formRef.value?.resetFields()
308   }
309
310 </script>
311 <style>
312   .curves-det-input {
313     width: 100%;
314   }
315 </style>