选煤厂生产管理平台前端代码
dongyukun
2024-12-10 3d178a4cc498beb3c5e2210f359bcf120616e384
提交 | 用户 | 时间
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="dataRule" ref="formData"
6                  v-loading="formLoading"
7                  label-width="120px">
8           <el-row>
9             <el-col :span="12">
10               <el-form-item prop="datetime" label="采样时间">
11                 <el-date-picker
12                   style="width: 100%"
13                   type="datetime"
14                   format="yyyy-MM-dd HH:mm:ss"
15                   value-format="yyyy-MM-dd HH:mm:ss"
16                   size="mini"
17                   v-model="formData.datetime"
18                   placeholder="采样时间"
19                 />
20               </el-form-item>
21             </el-col>
22             <el-col :span="12">
23               <el-form-item prop="mz" label="混煤煤种及比例">
24                 <el-input
25                   style="width: 100%"
26                   size="mini"
27                   v-model="formData.mz"
28                   placeholder="例: 五虎山#9:五虎山#12 = 1:2"
29                   clearable
30                 />
31               </el-form-item>
32             </el-col>
33           </el-row>
34         </el-form>
35       </el-tab-pane>
36       <el-tab-pane label="生产运行煤样快速检查详情">
37         <el-form :inline="true">
38           <el-form-item>
39             <el-upload
40               class="upload-demo"
41               :action="action"
42               :on-success="handleExcel"
43               :multiple="false"
44               :show-file-list="false"
45               :on-change="changeFile"
46               :file-list="fileList"
47             >
48               <el-button size="mini" type="primary">点击上传</el-button>
49             </el-upload>
50           </el-form-item>
51           <el-form-item>
52             <el-button size="mini" type="success" @click="downloadExcel"
53               >下载模板</el-button
54             >
55           </el-form-item>
56         </el-form>
57         <el-form
58           :model="formData"
59           :rules="dataRule"
60           ref="formDataDet"
61           label-width="120px"
62         >
63           <el-table
64             :data="formData.itemList"
65             border
66             height="400"
67             style="width: 100%"
68           >
69             <el-table-column
70               prop="xm"
71               label="项目"
72               header-align="center"
73               align="center"
74               min-width="150"
75             >
358c8e 76               <template #default="scope">
58a8ee 77                 <dict-select-tag
J 78                 style="width: 100%"
79                 size="mini"
80                 v-model="scope.row.xm"
81                 placeholder="项目"
82                 dictCode="sckjxm"
83                 clearable
84                 />
85               </template>
86               </el-table-column>
87             <el-table-column
88               prop="yl"
89               label="压力"
90               header-align="center"
91               align="center"
92               min-width="100"
93             >
358c8e 94               <template #default="scope">
58a8ee 95                 <el-input-number
J 96                   v-model="scope.row.yl"
97                   size="mini"
98                   placeholder="压力"
99                   :precision="2"
100                   :controls="false"
101                   :min="0"
102                   :max="100"
103                   class="curves-det-input"
104                 />
105               </template>
106             </el-table-column>
107             <el-table-column
108               prop="md"
109               label="密度"
110               header-align="center"
111               align="center"
112               min-width="100"
113             >
358c8e 114               <template #default="scope">
58a8ee 115                 <el-input-number
J 116                   v-model="scope.row.md"
117                   size="mini"
118                   placeholder="密度"
119                   :precision="2"
120                   :controls="false"
121                   :min="0"
122                   :max="100"
123                   class="curves-det-input"
124                 />
125               </template>
126             </el-table-column>
127             <el-table-column
128               prop="hf"
129               label="灰分"
130               header-align="center"
131               align="center"
132               min-width="100"
133             >
358c8e 134               <template #default="scope">
58a8ee 135                 <el-input-number
J 136                   v-model="scope.row.hf"
137                   size="mini"
138                   placeholder="灰分"
139                   :precision="2"
140                   :controls="false"
141                   :min="0"
142                   :max="100"
143                   class="curves-det-input"
144                 />
145               </template>
146             </el-table-column>
147             <el-table-column
148               prop="lf"
149               label="硫分"
150               header-align="center"
151               align="center"
152               min-width="100"
153             >
358c8e 154               <template #default="scope">
58a8ee 155                 <el-input-number
J 156                   v-model="scope.row.lf"
157                   size="mini"
158                   :placeholder="$t('washCurves.lf')"
159                   :precision="2"
160                   :controls="false"
161                   :min="0"
162                   :max="100"
163                   class="curves-det-input"
164                 />
165               </template>
166             </el-table-column>
167             <el-table-column label="-1.4浮沉" header-align="center">
168               <el-table-column
169                 prop="cl1"
170                 :label="$t('washCurves.cl')"
171                 header-align="center"
172                 align="center"
173                 min-width="100"
174               >
358c8e 175                 <template #default="scope">
58a8ee 176                   <el-input-number
J 177                     v-model="scope.row.cl1"
178                     size="mini"
179                     :placeholder="$t('washCurves.cl')"
180                     :precision="2"
181                     :controls="false"
182                     :min="0"
183                     :max="100"
184                     class="curves-det-input"
185                   />
186 =                </template>
187               </el-table-column>
188               <el-table-column
189                 prop="hf1"
190                 :label="$t('washCurves.hf')"
191                 header-align="center"
192                 align="center"
193                 min-width="100"
194               >
358c8e 195                 <template #default="scope">
58a8ee 196                   <el-input-number
J 197                     v-model="scope.row.hf1"
198                     size="mini"
199                     :placeholder="$t('washCurves.hf')"
200                     :precision="2"
201                     :controls="false"
202                     :min="0"
203                     :max="100"
204                     class="curves-det-input"
205                   />
206                 </template>
207               </el-table-column>
208             </el-table-column>
209             <el-table-column label="1.4-1.8浮沉" header-align="center">
210               <el-table-column
211                 prop="cl2"
212                 :label="$t('washCurves.cl')"
213                 header-align="center"
214                 align="center"
215                 min-width="100"
216               >
358c8e 217                 <template #default="scope">
58a8ee 218                   <el-input-number
J 219                     v-model="scope.row.cl2"
220                     size="mini"
221                     :placeholder="$t('washCurves.cl')"
222                     :precision="2"
223                     :controls="false"
224                     :min="0"
225                     :max="100"
226                     class="curves-det-input"
227                   />
228                 </template>
229               </el-table-column>
230               <el-table-column
231                 prop="hf2"
232                 :label="$t('washCurves.hf')"
233                 header-align="center"
234                 align="center"
235                 min-width="100"
236               >
358c8e 237                 <template #default="scope">
58a8ee 238                   <el-input-number
J 239                     v-model="scope.row.hf2"
240                     size="mini"
241                     :placeholder="$t('washCurves.hf')"
242                     :precision="2"
243                     :controls="false"
244                     :min="0"
245                     :max="100"
246                     class="curves-det-input"
247                   />
248                 </template>
249               </el-table-column>
250             </el-table-column>
251             <el-table-column label="+1.8浮沉" header-align="center">
252               <el-table-column
253                 prop="cl3"
254                 :label="$t('washCurves.cl')"
255                 header-align="center"
256                 align="center"
257                 min-width="100"
258               >
358c8e 259                 <template #default="scope">
58a8ee 260                   <el-input-number
J 261                     v-model="scope.row.cl3"
262                     size="mini"
263                     :placeholder="$t('washCurves.cl')"
264                     :precision="2"
265                     :controls="false"
266                     :min="0"
267                     :max="100"
268                     class="curves-det-input"
269                   />
270                 </template>
271               </el-table-column>
272               <el-table-column
273                 prop="hf3"
274                 :label="$t('washCurves.hf')"
275                 header-align="center"
276                 align="center"
277                 min-width="100"
278               >
358c8e 279                 <template #default="scope">
58a8ee 280                   <el-input-number
J 281                     v-model="scope.row.hf3"
282                     size="mini"
283                     :placeholder="$t('washCurves.hf')"
284                     :precision="2"
285                     :controls="false"
286                     :min="0"
287                     :max="100"
288                     class="curves-det-input"
289                   />
290                 </template>
291               </el-table-column>
292             </el-table-column>
293             <el-table-column
294               prop=""
295               label="操作"
296               min-width="100"
297               align="center"
298             >
358c8e 299               <template #default="scope">
58a8ee 300                 <el-button
358c8e 301                   @click="addExpressionRow(scope.$index, formData.itemList)"
58a8ee 302                   type="text"
J 303                   size="small"
304                 >
305                   添加
306                 </el-button>
307                 <el-button
358c8e 308                   @click="deleteExpressionRow(scope.$index, formData.itemList)"
58a8ee 309                   type="text"
J 310                   size="small"
311                 >
312                   删除
313                 </el-button>
314               </template>
315             </el-table-column>
316           </el-table>
317         </el-form>
318       </el-tab-pane>
319     </el-tabs>
320     <template #footer>
321       <el-button size="mini" :disabled="formLoading" type="primary" @click="formDataSubmitHandle()">确定</el-button>
322       <el-button size="mini" @click="dialogVisible = false">取消</el-button>
323     </template>
324   </Dialog>
325 </template>
326
327 <script lang="ts" setup>
328   import * as AnalysisApi from '@/api/xmcpms/coal-quality/analysis/full/index'
329
330   defineOptions({name: 'FullForm'})
331
332   const {t} = useI18n() // 国际化
333   const message = useMessage() // 消息弹窗
334   const dialogVisible = ref(false) // 弹窗的是否展示
335   const dialogTitle = ref('') // 弹窗的标题
336   const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
337   const formType = ref('') // 表单的类型:create - 新增;update - 修改
338   const formData = ref({
339     lsh:"",
340     datetime: "",
341     mz: "",
342   })
343
344   const open = async (type: string, id?: string) => {
345     dialogVisible.value = true
346     dialogTitle.value = t('action.' + type)
347     //修改时,设置数据
348     if (id) {
349       formLoading.value = true
350       try {
351         formData.value = await AnalysisApi.getAnalysis(id)
352       } finally {
353         formLoading.value = false
354       }
355     }
356   }
357   defineExpose({ open }) // 提供 open 方法,用于打开弹窗
358 </script>
359 <style>
360 .curves-det-input {
361   width: 100%;
362 }
363 </style>