vue-mes
查看 | 历史 | 提交 | 提交对比
hdy
2024-01-03 8043f5f0d90a652e90532421aaf5c5145e03305c
提交 | 用户 | 时间
3bbdaf 1 <template>
H 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 style="float: right">
22             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
23             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
24           </el-form-item>
25         </el-form>
26     </el-card>
27
28     <el-card style="margin-top: 10px" class="box-card">
29         <el-row :gutter="10" class="mb8">
30           <el-col :span="1.5">
31             <el-button
32               type="primary"
33               plain
34               icon="el-icon-plus"
35               size="mini"
36               @click="handleAdd"
37               v-hasPermi="['em:equipmentArchives:add']"
38             >新增</el-button>
39           </el-col>
40           <el-col :span="1.5">
41             <el-button
42               type="success"
43               plain
44               icon="el-icon-edit"
45               size="mini"
46               :disabled="single"
47               @click="handleUpdate"
48               v-hasPermi="['em:equipmentArchives:edit']"
49             >修改</el-button>
50           </el-col>
51           <el-col :span="1.5">
52             <el-button
53               type="danger"
54               plain
55               icon="el-icon-delete"
56               size="mini"
57               :disabled="multiple"
58               @click="handleDelete"
59               v-hasPermi="['em:equipmentArchives:remove']"
60             >删除</el-button>
61           </el-col>
62           <el-col :span="1.5">
63             <el-button
64               type="warning"
65               plain
66               icon="el-icon-download"
67               size="mini"
68               @click="handleExport"
69               v-hasPermi="['em:equipmentArchives:export']"
70             >导出</el-button>
71           </el-col>
72           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
73         </el-row>
74
75         <el-table border v-loading="loading" :data="equipmentArchivesList" @selection-change="handleSelectionChange">
76           <el-table-column type="selection" width="55" align="center" />
77           <el-table-column label="设备编码" align="center" prop="equipmentCode"/>
78           <el-table-column label="设备名称" align="center" prop="equipmentName"/>
79           <el-table-column label="品牌" align="center" prop="equipmentBrand"/>
80           <el-table-column label="规格型号" align="center" prop="equipmentSpec"/>
81           <el-table-column label="车间编码" align="center" prop="workshopCode"/>
8043f5 82           <el-table-column label="产线编码" align="center" prop="lineCode"/>
3bbdaf 83           <el-table-column label="设备状态" align="center" prop="status"/>
c6a3be 84           <el-table-column label="创建时间" width="160" align="center" prop="createTime"/>
3bbdaf 85           <el-table-column fixed="right" width="200" label="操作" align="center" class-name="small-padding fixed-width">
H 86             <template slot-scope="scope">
87               <el-button
88                 size="mini"
89                 type="success"
90                 plain
91                 style="width: 72px"
92                 icon="el-icon-edit"
93                 @click="handleUpdate(scope.row)"
94                 v-hasPermi="['em:equipmentArchives:edit']"
95               >修改</el-button>
96               <el-button
97                 size="mini"
98                 type="danger"
99                 plain
100                 style="width: 72px"
101                 icon="el-icon-delete"
102                 @click="handleDelete(scope.row)"
103                 v-hasPermi="['em:equipmentArchives:remove']"
104               >删除</el-button>
105             </template>
106           </el-table-column>
107         </el-table>
108     </el-card>
109
110     <pagination
111       v-show="total>0"
112       :total="total"
113       :page.sync="queryParams.pageNum"
114       :limit.sync="queryParams.pageSize"
115       @pagination="getList"
116     />
117
118     <!-- 添加或修改设备档案对话框 -->
119     <el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="500px" append-to-body>
120       <span slot="title">
121         <i class="el-icon-s-order"></i>
122         {{titleName}}
123       </span>
124       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
125         <el-form-item label="设备编码" prop="equipmentCode">
126           <el-input v-model="form.equipmentCode" placeholder="请输入设备编码" />
127         </el-form-item>
128         <el-form-item label="设备名称" prop="equipmentName">
129           <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
130         </el-form-item>
131         <el-form-item label="品牌" prop="equipmentBrand">
132           <el-input v-model="form.equipmentBrand" placeholder="请输入品牌" />
133         </el-form-item>
8043f5 134         <el-form-item label="设备类型" prop="equipmentTypeName">
3bbdaf 135           <el-input v-model="form.equipmentTypeName" placeholder="请输入设备类型名称" />
H 136         </el-form-item>
137         <el-form-item label="规格型号" prop="equipmentSpec">
138           <el-input v-model="form.equipmentSpec" placeholder="请输入规格型号" />
139         </el-form-item>
8043f5 140         <el-form-item label="车间编号" prop="workshopCode">
H 141           <el-select style="width: 100%" @change="handleSelectChange(form.processesCode)" v-model="form.workshopCode" placeholder="请选择车间编号">
142             <el-option
143               v-for="item in options"
144               :key="item.workshopCode"
145               :label="item.workshopCode"
146               :value="item.workshopCode">
147             </el-option>
148           </el-select>
149         </el-form-item>
150 <!--        <el-form-item label="产线编码" prop="lineCode">-->
151 <!--          <el-input v-model="form.lineCode" placeholder="请输入产线编码" />-->
152 <!--        </el-form-item>-->
153         <el-form-item label="产线编码" prop="lineCode">
154           <el-select style="width: 100%" @change="handleSelectChangelineCode(form.processesCode)" v-model="form.lineCode" placeholder="请输入产线编码">
155             <el-option
156               v-for="item in options"
157               :key="item.lineCode"
158               :label="item.lineCode"
159               :value="item.lineCode">
160             </el-option>
161           </el-select>
3bbdaf 162         </el-form-item>
H 163         <el-form-item label="备注" prop="remark">
164           <el-input v-model="form.remark" placeholder="请输入备注" />
165         </el-form-item>
166 <!--        <el-form-item label="设备类型ID" prop="equipmentTypeId">-->
167 <!--          <el-input v-model="form.equipmentTypeId" placeholder="请输入设备类型ID" />-->
168 <!--        </el-form-item>-->
169 <!--        <el-form-item label="设备类型编码" prop="equipmentTypeCode">-->
170 <!--          <el-input v-model="form.equipmentTypeCode" placeholder="请输入设备类型编码" />-->
171 <!--        </el-form-item>-->
172
173
174 <!--        <el-form-item label="产线编码" prop="lineCode">-->
175 <!--          <el-input v-model="form.lineCode" placeholder="请输入产线编码" />-->
176 <!--        </el-form-item>-->
177 <!--        <el-form-item label="工序编码" prop="processes">-->
178 <!--          <el-input v-model="form.processes" placeholder="请输入工序编码" />-->
179 <!--        </el-form-item>-->
180
181 <!--        <el-form-item label="创建人" prop="createUser">-->
182 <!--          <el-input v-model="form.createUser" placeholder="请输入创建人" />-->
183 <!--        </el-form-item>-->
184 <!--        <el-form-item label="更新人" prop="updateUser">-->
185 <!--          <el-input v-model="form.updateUser" placeholder="请输入更新人" />-->
186 <!--        </el-form-item>-->
187 <!--        <el-form-item label="预留字段1" prop="spareField1">-->
188 <!--          <el-input v-model="form.spareField1" placeholder="请输入预留字段1" />-->
189 <!--        </el-form-item>-->
190 <!--        <el-form-item label="预留字段2" prop="spareField2">-->
191 <!--          <el-input v-model="form.spareField2" placeholder="请输入预留字段2" />-->
192 <!--        </el-form-item>-->
193 <!--        <el-form-item label="预留字段3" prop="spareField3">-->
194 <!--          <el-input v-model="form.spareField3" placeholder="请输入预留字段3" />-->
195 <!--        </el-form-item>-->
196 <!--        <el-form-item label="预留字段4" prop="spareField4">-->
197 <!--          <el-input v-model="form.spareField4" placeholder="请输入预留字段4" />-->
198 <!--        </el-form-item>-->
199       </el-form>
200       <div slot="footer" class="dialog-footer">
201         <el-button type="primary" @click="submitForm">确 定</el-button>
202         <el-button @click="cancel">取 消</el-button>
203       </div>
204     </el-dialog>
205   </div>
206 </template>
207
208 <script>
209 import { listEquipmentArchives, getEquipmentArchives, delEquipmentArchives, addEquipmentArchives, updateEquipmentArchives } from "@/api/main/em/equipmentArchives/equipmentArchives";
8043f5 210 import {listWorkshop} from "@/api/main/bs/workshop/workshop";
H 211 import {listLineInfo} from "@/api/main/bs/lineInfo/lineInfo";
3bbdaf 212
H 213 export default {
214   name: "EquipmentArchives",
215   data() {
216     return {
217       // 遮罩层
218       loading: true,
219       titleName: "",
220       // 选中数组
221       ids: [],
8043f5 222       options: [],
3bbdaf 223       // 非单个禁用
H 224       single: true,
225       // 非多个禁用
226       multiple: true,
227       // 显示搜索条件
228       showSearch: true,
229       // 总条数
230       total: 0,
231       // 设备档案表格数据
232       equipmentArchivesList: [],
233       // 弹出层标题
234       title: "",
235       // 是否显示弹出层
236       open: false,
237       // 查询参数
238       queryParams: {
239         pageNum: 1,
240         pageSize: 10,
241         equipmentCode: null,
242         equipmentName: null,
243         equipmentBrand: null,
244         equipmentSpec: null,
245         equipmentTypeId: null,
246         equipmentTypeCode: null,
247         equipmentTypeName: null,
248         workshopCode: null,
249         lineCode: null,
250         processes: null,
251         status: null,
252         createUser: null,
253         updateUser: null,
254         spareField1: null,
255         spareField2: null,
256         spareField3: null,
257         spareField4: null
258       },
8043f5 259       equipmentArchivesQueryParams: {
H 260         pageNum: 1,
261         pageSize: 10,
262         workshopCode: null,
263         lineCode: null,
264       },
3bbdaf 265       // 表单参数
H 266       form: {},
267       // 表单校验
268       rules: {
269         id: [
270           { required: true, message: "ID不能为空", trigger: "blur" }
271         ],
272         equipmentCode: [
273           { required: true, message: "设备编码不能为空", trigger: "blur" }
274         ],
275         equipmentName: [
276           { required: true, message: "设备名称不能为空", trigger: "blur" }
277         ],
278         equipmentTypeId: [
279           { required: true, message: "设备类型ID不能为空", trigger: "blur" }
280         ],
281       }
282     };
283   },
284   created() {
285     this.getList();
8043f5 286     this.initWorkshop();
H 287     this.initLineInfo();
3bbdaf 288   },
H 289   methods: {
290     /** 查询设备档案列表 */
8043f5 291     handleSelectChange(selectedOption) {
H 292       this.equipmentArchivesQueryParams.workshopCode = selectedOption;
293       listWorkshop(this.equipmentArchivesQueryParams).then(response => {
294         this.form.workshopName = response.rows[0].workshopName;
295       });
296     },
297     handleSelectChangelineCode(selectedOption) {
298       this.equipmentArchivesQueryParams.lineCode = selectedOption;
299       listLineInfo(this.equipmentArchivesQueryParams).then(response => {
300         this.form.lineCode = response.rows[0].lineCode;
301       });
302     },
303
304     initWorkshop(){
305       listWorkshop(this.queryParams).then(response => {
306         this.options = response.rows;
307       });
308     },
309     initLineInfo(){
310       listLineInfo(this.queryParams).then(response => {
311         this.options = response.rows;
312       });
313     },
3bbdaf 314     getList() {
H 315       this.loading = true;
316       listEquipmentArchives(this.queryParams).then(response => {
317         this.equipmentArchivesList = response.rows;
318         this.total = response.total;
319         this.loading = false;
320       });
321     },
322     // 取消按钮
323     cancel() {
324       this.open = false;
325       this.reset();
326     },
327     // 表单重置
328     reset() {
329       this.form = {
330         id: null,
331         equipmentCode: null,
332         equipmentName: null,
333         equipmentBrand: null,
334         equipmentSpec: null,
335         equipmentTypeId: null,
336         equipmentTypeCode: null,
337         equipmentTypeName: null,
338         workshopCode: null,
339         lineCode: null,
340         processes: null,
341         status: null,
342         remark: null,
343         createUser: null,
344         createTime: null,
345         updateUser: null,
346         updateTime: null,
347         spareField1: null,
348         spareField2: null,
349         spareField3: null,
350         spareField4: null
351       };
352       this.resetForm("form");
353     },
354     /** 搜索按钮操作 */
355     handleQuery() {
356       this.queryParams.pageNum = 1;
357       this.getList();
358     },
359     /** 重置按钮操作 */
360     resetQuery() {
361       this.resetForm("queryForm");
362       this.handleQuery();
363     },
364     // 多选框选中数据
365     handleSelectionChange(selection) {
366       this.ids = selection.map(item => item.id)
367       this.single = selection.length!==1
368       this.multiple = !selection.length
369     },
370     /** 新增按钮操作 */
371     handleAdd() {
372       this.reset();
373       this.open = true;
374       this.titleName = "添加设备档案";
375     },
376     /** 修改按钮操作 */
377     handleUpdate(row) {
378       this.reset();
379       const id = row.id || this.ids
380       getEquipmentArchives(id).then(response => {
381         this.form = response.data;
382         this.open = true;
383         this.titleName = "修改设备档案";
384       });
385     },
386     /** 提交按钮 */
387     submitForm() {
388       this.$refs["form"].validate(valid => {
389         if (valid) {
390           if (this.form.id != null) {
391             updateEquipmentArchives(this.form).then(response => {
392               this.$modal.msgSuccess("修改成功");
393               this.open = false;
394               this.getList();
395             });
396           } else {
397             addEquipmentArchives(this.form).then(response => {
398               this.$modal.msgSuccess("新增成功");
399               this.open = false;
400               this.getList();
401             });
402           }
403         }
404       });
405     },
406     /** 删除按钮操作 */
407     handleDelete(row) {
408       const ids = row.id || this.ids;
409       this.$modal.confirm('是否确认删除设备档案编号为"' + ids + '"的数据项？').then(function() {
410         return delEquipmentArchives(ids);
411       }).then(() => {
412         this.getList();
413         this.$modal.msgSuccess("删除成功");
414       }).catch(() => {});
415     },
416     /** 导出按钮操作 */
417     handleExport() {
418       this.download('em/equipmentArchives/export', {
419         ...this.queryParams
420       }, `equipmentArchives_${new Date().getTime()}.xlsx`)
421     }
422   }
423 };
424 </script>