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