vue-mes
查看 | 历史 | 提交 | 提交对比
hdy
2023-12-25 f2a092218ece0821351440331c90064c8cbd5241
提交 | 用户 | 时间
b51737 1 <template>
懒 2   <div class="app-container">
3     <el-card class="box-card">
4     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
5       <el-form-item label="设备编号" prop="equipmentCode">
6         <el-input
7           v-model="queryParams.equipmentCode"
8           placeholder="请输入设备编号"
9           clearable
10           @keyup.enter.native="handleQuery"
11         />
12       </el-form-item>
13       <el-form-item label="设备名称" prop="equipmentName">
14         <el-input
15           v-model="queryParams.equipmentName"
16           placeholder="请输入设备名称"
17           clearable
18           @keyup.enter.native="handleQuery"
19         />
20       </el-form-item>
21 <!--      <el-form-item label="设备类型" prop="equipmentType">-->
22 <!--        <el-select v-model="queryParams.equipmentType" placeholder="请选择设备类型" clearable>-->
23 <!--          <el-option-->
24 <!--            v-for="dict in dict.type.${dictType}"-->
25 <!--            :key="dict.value"-->
26 <!--            :label="dict.label"-->
27 <!--            :value="dict.value"-->
28 <!--          />-->
29 <!--        </el-select>-->
30 <!--      </el-form-item>-->
31       <el-form-item label="故障代码" prop="errorNo">
32         <el-input
33           v-model="queryParams.errorNo"
34           placeholder="请输入故障代码"
35           clearable
36           @keyup.enter.native="handleQuery"
37         />
38       </el-form-item>
39       <el-form-item>
40         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
41         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
42       </el-form-item>
43     </el-form>
44     </el-card>
45     <el-card style="margin-top: 10px" class="box-card">
46     <el-row :gutter="10" class="mb8">
47       <el-col :span="1.5">
48         <el-button
49           type="primary"
50           plain
51           icon="el-icon-plus"
52           size="mini"
53           @click="handleAdd"
54           v-hasPermi="['em:equipmentAlarm:add']"
55         >新增</el-button>
56       </el-col>
57       <el-col :span="1.5">
58         <el-button
59           type="success"
60           plain
61           icon="el-icon-edit"
62           size="mini"
63           :disabled="single"
64           @click="handleUpdate"
65           v-hasPermi="['em:equipmentAlarm:edit']"
66         >修改</el-button>
67       </el-col>
68       <el-col :span="1.5">
69         <el-button
70           type="danger"
71           plain
72           icon="el-icon-delete"
73           size="mini"
74           :disabled="multiple"
75           @click="handleDelete"
76           v-hasPermi="['em:equipmentAlarm:remove']"
77         >删除</el-button>
78       </el-col>
79       <el-col :span="1.5">
80         <el-button
81           type="warning"
82           plain
83           icon="el-icon-download"
84           size="mini"
85           @click="handleExport"
86           v-hasPermi="['em:equipmentAlarm:export']"
87         >导出</el-button>
88       </el-col>
89       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
90     </el-row>
91
92     <el-table border v-loading="loading" :data="equipmentAlarmList" @selection-change="handleSelectionChange">
93       <el-table-column type="selection" width="55" align="center" />
94       <el-table-column label="设备编号" width="120" align="center" prop="equipmentCode">
95       </el-table-column>
96       <el-table-column label="设备名称" width="150" align="center" prop="equipmentName">
97       </el-table-column>
98       <el-table-column label="设备类型" align="center" prop="equipmentType">
99       </el-table-column>
100       <el-table-column label="车间编号" width="80" align="center" prop="workshopCode">
101       </el-table-column>
102       <el-table-column label="产线编号" width="80" align="center" prop="lineCode">
103       </el-table-column>
104       <el-table-column label="工序编号" align="center" prop="processesCode">
105       </el-table-column>
106       <el-table-column label="故障代码" width="100" align="center" prop="errorNo">
107       </el-table-column>
108       <el-table-column label="故障描述" width="160" align="center" prop="errorDesc">
109       </el-table-column>
110       <el-table-column label="报警时间" width="160" align="center" prop="alarmTime">
111       </el-table-column>
112       <el-table-column label="是否恢复" align="center" prop="whetherRecovery">
113       </el-table-column>
114       <el-table-column label="恢复时间" width="160" align="center" prop="recoveryTime">
115       </el-table-column>
116       <el-table-column label="备注" align="center" prop="remarks">
117       </el-table-column>
118       <el-table-column fixed="right" width="200" label="操作" align="center" class-name="small-padding fixed-width">
119         <template slot-scope="scope">
120           <el-button
121             size="mini"
122             plain
123             type="success"
124             style="width: 72px"
125             icon="el-icon-edit"
126             @click="handleUpdate(scope.row)"
127             v-hasPermi="['em:equipmentAlarm:edit']"
128           >修改</el-button>
129           <el-button
130             size="mini"
131             plain
132             type="danger"
133             style="width: 72px"
134             icon="el-icon-delete"
135             @click="handleDelete(scope.row)"
136             v-hasPermi="['em:equipmentAlarm:remove']"
137           >删除</el-button>
138         </template>
139       </el-table-column>
140     </el-table>
141     </el-card>
142
143     <pagination
144       v-show="total>0"
145       :total="total"
146       :page.sync="queryParams.pageNum"
147       :limit.sync="queryParams.pageSize"
148       @pagination="getList"
149     />
150
151     <!-- 添加或修改设备报警对话框 -->
45a2ee 152     <el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="500px" append-to-body>
b51737 153       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
懒 154         <el-form-item label="设备编号" prop="equipmentCode">
155           <el-input v-model="form.equipmentCode" placeholder="请输入设备编号" />
156         </el-form-item>
157         <el-form-item label="设备名称" prop="equipmentName">
158           <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
159         </el-form-item>
160 <!--        <el-form-item label="设备类型" prop="equipmentType">-->
161 <!--          <el-select v-model="form.equipmentType" placeholder="请选择设备类型">-->
162 <!--            <el-option-->
163 <!--              v-for="dict in dict.type.${dictType}"-->
164 <!--              :key="dict.value"-->
165 <!--              :label="dict.label"-->
166 <!--              :value="dict.value"-->
167 <!--            ></el-option>-->
168 <!--          </el-select>-->
169 <!--        </el-form-item>-->
170         <el-form-item label="车间编号" prop="workshopCode">
171           <el-input v-model="form.workshopCode" placeholder="请输入车间编号" />
172         </el-form-item>
173         <el-form-item label="产线编号" prop="lineCode">
174           <el-input v-model="form.lineCode" placeholder="请输入产线编号" />
175         </el-form-item>
176 <!--        <el-form-item label="工序编号" prop="processesCode">-->
177 <!--          <el-select v-model="form.processesCode" placeholder="请选择工序编号">-->
178 <!--            <el-option-->
179 <!--              v-for="dict in dict.type.${dictType}"-->
180 <!--              :key="dict.value"-->
181 <!--              :label="dict.label"-->
182 <!--              :value="dict.value"-->
183 <!--            ></el-option>-->
184 <!--          </el-select>-->
185 <!--        </el-form-item>-->
186         <el-form-item label="故障代码" prop="errorNo">
187           <el-input v-model="form.errorNo" placeholder="请输入故障代码" />
188         </el-form-item>
189         <el-form-item label="故障描述" prop="errorDesc">
190           <el-input v-model="form.errorDesc" placeholder="请输入故障描述" />
191         </el-form-item>
192         <el-form-item label="是否恢复" prop="whetherRecovery">
193           <el-input v-model="form.whetherRecovery" placeholder="请输入是否恢复(0否1是)" />
194         </el-form-item>
195         <el-form-item label="备注" prop="remarks">
196           <el-input v-model="form.remarks" placeholder="请输入备注" />
197         </el-form-item>
198       </el-form>
199       <div slot="footer" class="dialog-footer">
200         <el-button type="primary" @click="submitForm">确 定</el-button>
201         <el-button @click="cancel">取 消</el-button>
202       </div>
203     </el-dialog>
204   </div>
205 </template>
206
207 <script>
208 import { listEquipmentAlarm, getEquipmentAlarm, delEquipmentAlarm, addEquipmentAlarm, updateEquipmentAlarm } from "@/api/main/em/equipmentAlarm/equipmentAlarm";
209
210 export default {
211   name: "EquipmentAlarm",
212   data() {
213     return {
214       // 遮罩层
215       loading: true,
216       // 选中数组
217       ids: [],
218       // 非单个禁用
219       single: true,
220       // 非多个禁用
221       multiple: true,
222       // 显示搜索条件
223       showSearch: true,
224       // 总条数
225       total: 0,
226       // 设备报警表格数据
227       equipmentAlarmList: [],
228       // 弹出层标题
229       title: "",
230       // 是否显示弹出层
231       open: false,
232       // 查询参数
233       queryParams: {
234         pageNum: 1,
235         pageSize: 10,
236         equipmentCode: null,
237         equipmentName: null,
238         equipmentType: null,
239         errorNo: null,
240       },
241       // 表单参数
242       form: {},
243       // 表单校验
244       rules: {
245         id: [
246           { required: true, message: "ID不能为空", trigger: "blur" }
247         ],
248         equipmentCode: [
249           { required: true, message: "设备编号不能为空", trigger: "blur" }
250         ],
251         equipmentName: [
252           { required: true, message: "设备名称不能为空", trigger: "blur" }
253         ],
254         equipmentType: [
255           { required: true, message: "设备类型不能为空", trigger: "change" }
256         ],
257         processesCode: [
258           { required: true, message: "工序编号不能为空", trigger: "change" }
259         ],
260         errorNo: [
261           { required: true, message: "故障代码不能为空", trigger: "blur" }
262         ],
263       }
264     };
265   },
266   created() {
267     this.getList();
268   },
269   methods: {
270     /** 查询设备报警列表 */
271     getList() {
272       this.loading = true;
273       listEquipmentAlarm(this.queryParams).then(response => {
274         this.equipmentAlarmList = response.rows;
275         this.total = response.total;
276         this.loading = false;
277       });
278     },
279     // 取消按钮
280     cancel() {
281       this.open = false;
282       this.reset();
283     },
284     // 表单重置
285     reset() {
286       this.form = {
287         id: null,
288         equipmentCode: null,
289         equipmentName: null,
290         equipmentType: null,
291         workshopCode: null,
292         lineCode: null,
293         processesCode: null,
294         errorNo: null,
295         errorDesc: null,
296         alarmTime: null,
297         whetherRecovery: null,
298         recoveryTime: null,
299         spareField1: null,
300         spareField2: null,
301         spareField3: null,
302         spareField4: null,
303         remarks: null
304       };
305       this.resetForm("form");
306     },
307     /** 搜索按钮操作 */
308     handleQuery() {
309       this.queryParams.pageNum = 1;
310       this.getList();
311     },
312     /** 重置按钮操作 */
313     resetQuery() {
314       this.resetForm("queryForm");
315       this.handleQuery();
316     },
317     // 多选框选中数据
318     handleSelectionChange(selection) {
319       this.ids = selection.map(item => item.id)
320       this.single = selection.length!==1
321       this.multiple = !selection.length
322     },
323     /** 新增按钮操作 */
324     handleAdd() {
325       this.reset();
326       this.open = true;
327       this.title = "添加设备报警";
328     },
329     /** 修改按钮操作 */
330     handleUpdate(row) {
331       this.reset();
332       const id = row.id || this.ids
333       getEquipmentAlarm(id).then(response => {
334         this.form = response.data;
335         this.open = true;
336         this.title = "修改设备报警";
337       });
338     },
339     /** 提交按钮 */
340     submitForm() {
341       this.$refs["form"].validate(valid => {
342         if (valid) {
343           if (this.form.id != null) {
344             updateEquipmentAlarm(this.form).then(response => {
345               this.$modal.msgSuccess("修改成功");
346               this.open = false;
347               this.getList();
348             });
349           } else {
350             addEquipmentAlarm(this.form).then(response => {
351               this.$modal.msgSuccess("新增成功");
352               this.open = false;
353               this.getList();
354             });
355           }
356         }
357       });
358     },
359     /** 删除按钮操作 */
360     handleDelete(row) {
361       const ids = row.id || this.ids;
362       this.$modal.confirm('是否确认删除设备报警编号为"' + ids + '"的数据项？').then(function() {
363         return delEquipmentAlarm(ids);
364       }).then(() => {
365         this.getList();
366         this.$modal.msgSuccess("删除成功");
367       }).catch(() => {});
368     },
369     /** 导出按钮操作 */
370     handleExport() {
371       this.download('em/equipmentAlarm/export', {
372         ...this.queryParams
373       }, `equipmentAlarm_${new Date().getTime()}.xlsx`)
374     }
375   }
376 };
377 </script>