春风项目四线(合箱线、总装线)
wujian
2024-01-31 c74dcb8dca7b9e3eded0d20299f19a26a6b70974
提交 | 用户 | 时间
fd2207 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="workshopCode">
6             <el-input
7               v-model="queryParams.workshopCode"
8               placeholder="请输入车间"
9               clearable
10               @keyup.enter.native="handleQuery"
11             />
12           </el-form-item>
13           <el-form-item label="产线" prop="lineCode">
14             <el-input
15               v-model="queryParams.lineCode"
16               placeholder="请输入产线"
17               clearable
18               @keyup.enter.native="handleQuery"
19             />
20           </el-form-item>
21           <el-form-item label="工序" prop="processesCode">
22             <el-input
23               v-model="queryParams.processesCode"
24               placeholder="请输入工序"
25               clearable
26               @keyup.enter.native="handleQuery"
27             />
28           </el-form-item>
29           <el-form-item label="产品编号" prop="productCode">
30             <el-input
31               v-model="queryParams.productCode"
32               placeholder="请输入产品编号"
33               clearable
34               @keyup.enter.native="handleQuery"
35             />
36           </el-form-item>
37 <!--          <el-form-item label="类型" prop="operationType">-->
38 <!--            <el-select v-model="queryParams.operationType" placeholder="请选择类型" clearable>-->
39 <!--              <el-option-->
40 <!--                v-for="dict in dict.type.${dictType}"-->
41 <!--                :key="dict.value"-->
42 <!--                :label="dict.label"-->
43 <!--                :value="dict.value"-->
44 <!--              />-->
45 <!--            </el-select>-->
46 <!--          </el-form-item>-->
47           <el-form-item style="float: right">
48             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
49             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
50           </el-form-item>
51         </el-form>
52     </el-card>
53
54     <el-card style="margin-top: 10px" class="box-card">
55         <el-row :gutter="10" class="mb8">
56           <el-col :span="1.5">
57             <el-button
58               type="primary"
59               plain
60               icon="el-icon-plus"
61               size="mini"
62               @click="handleAdd"
63               v-hasPermi="['bs:formulaChild:add']"
64             >新增</el-button>
65           </el-col>
66           <el-col :span="1.5">
67             <el-button
68               type="success"
69               plain
70               icon="el-icon-edit"
71               size="mini"
72               :disabled="single"
73               @click="handleUpdate"
74               v-hasPermi="['bs:formulaChild:edit']"
75             >修改</el-button>
76           </el-col>
77           <el-col :span="1.5">
78             <el-button
79               type="danger"
80               plain
81               icon="el-icon-delete"
82               size="mini"
83               :disabled="multiple"
84               @click="handleDelete"
85               v-hasPermi="['bs:formulaChild:remove']"
86             >删除</el-button>
87           </el-col>
88           <el-col :span="1.5">
89             <el-button
90               type="warning"
91               plain
92               icon="el-icon-download"
93               size="mini"
94               @click="handleExport"
95               v-hasPermi="['bs:formulaChild:export']"
96             >导出</el-button>
97           </el-col>
98           <el-col :span="1.5">
99             <el-button
100               type="warning"
101               plain
102               icon="el-icon-close"
103               size="mini"
104               @click="handleClose"
105             >关闭</el-button>
106           </el-col>
107           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
108         </el-row>
109
1558d8 110         <el-descriptions class="margin-top" :column="4" border>
fd2207 111           <el-descriptions-item :span="1">
112             <template slot="label">
113               <i class="el-icon-user"></i>
114               配方编码
115             </template>
116             {{headerInformationData.formulaCode}}
117           </el-descriptions-item>
118           <el-descriptions-item :span="1">
119             <template slot="label">
120               <i class="el-icon-mobile-phone"></i>
121               配方名称
122             </template>
123             {{headerInformationData.formulaName}}
124           </el-descriptions-item>
125           <el-descriptions-item :span="1">
126             <template slot="label">
127               <i class="el-icon-location-outline"></i>
128               产品编码
129             </template>
130             {{headerInformationData.productCode}}
131           </el-descriptions-item>
132           <el-descriptions-item :span="1">
133             <template slot="label">
134               <i class="el-icon-tickets"></i>
135               产品名称
136             </template>
137 <!--            {{headerInformationData.productName}}-->
138           </el-descriptions-item>
139         </el-descriptions>
140
141         <el-table border v-loading="loading" :data="formulaChildList" @selection-change="handleSelectionChange">
142           <el-table-column type="selection" width="55" align="center" />
143 <!--          <el-table-column label="车间" align="center" prop="workshopCode">-->
144 <!--          </el-table-column>-->
145 <!--          <el-table-column label="产线" align="center" prop="lineCode">-->
146 <!--          </el-table-column>-->
147           <el-table-column label="工序" width="90" align="center" prop="processesCode">
148           </el-table-column>
149           <el-table-column label="产品编号" width="150" align="center" prop="productCode">
150           </el-table-column>
e2f155 151 <!--          <el-table-column label="操作内容" :show-overflow-tooltip='true' width="150" align="center" prop="operationSteps">
C 152           </el-table-column>-->
153           <el-table-column label="排序" width="90" align="center" prop="stepSort">
fd2207 154           </el-table-column>
e2f155 155           <el-table-column label="技术要求" width="380" :show-overflow-tooltip='true' align="center" prop="techRequirement">
C 156           </el-table-column>
157           <el-table-column label="图片" :show-overflow-tooltip='true' width="130" align="center" prop="picture">
158             <!--            <template slot-scope="scope">-->
159             <!--              <el-image-->
160             <!--                style="width: 100px; height: 100px"-->
161             <!--                :src="pjtUrl+scope.row.picture"-->
162             <!--                :fit="fit">-->
163             <!--              </el-image>-->
164             <!--            </template>-->
fd2207 165           </el-table-column>
166           <el-table-column label="类型" width="90" align="center" prop="operationType">
167           </el-table-column>
e2f155 168
fd2207 169           <el-table-column label="参数编码" width="130" align="center" prop="paramCode">
170           </el-table-column>
171           <el-table-column label="物料编码" width="130" align="center" prop="materialCode">
172           </el-table-column>
173           <el-table-column label="配方编码" width="130" align="center" prop="formulaCode">
174           </el-table-column>
e2f155 175
fd2207 176           <el-table-column label="备注" width="130" align="center" prop="remarks">
177           </el-table-column>
178           <el-table-column label="创建用户" width="130" align="center" prop="createUser">
179           </el-table-column>
7df24f 180           <el-table-column label="创建时间" width="160" align="center" prop="createTime">
fd2207 181           </el-table-column>
182           <el-table-column label="更改用户" width="130" align="center" prop="updateUser">
183           </el-table-column>
184           <el-table-column label="更改时间" width="160" align="center" prop="updateTime">
185           </el-table-column>
186           <el-table-column fixed="right" width="200" label="操作" align="center" class-name="small-padding fixed-width">
187             <template slot-scope="scope">
188               <el-button
189                 size="mini"
190                 type="success"
191                 plain
192                 style="width: 72px"
193                 icon="el-icon-edit"
194                 @click="handleUpdate(scope.row)"
195                 v-hasPermi="['bs:formulaChild:edit']"
196               >修改</el-button>
197               <el-button
198                 size="mini"
199                 type="danger"
200                 plain
201                 style="width: 72px"
202                 icon="el-icon-delete"
203                 @click="handleDelete(scope.row)"
204                 v-hasPermi="['bs:formulaChild:remove']"
205               >删除</el-button>
206             </template>
207           </el-table-column>
208         </el-table>
209     </el-card>
210
211     <pagination
212       v-show="total>0"
213       :total="total"
214       :page.sync="queryParams.pageNum"
215       :limit.sync="queryParams.pageSize"
216       @pagination="getList"
217     />
218
219     <!-- 添加或修改配方配置子信息对话框 -->
220     <el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="500px" append-to-body>
221       <span slot="title">
222         <i class="el-icon-s-order"></i>
223         {{titleName}}
224       </span>
225       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
226 <!--        <el-form-item label="车间" prop="workshopCode">-->
227 <!--          <el-input v-model="form.workshopCode" placeholder="请输入车间" />-->
228 <!--        </el-form-item>-->
229 <!--        <el-form-item label="产线" prop="lineCode">-->
230 <!--          <el-input v-model="form.lineCode" placeholder="请输入产线" />-->
231 <!--        </el-form-item>-->
232         <el-form-item label="配方编码">
233           <el-input v-model="formulaCode" :disabled="true" />
234         </el-form-item>
235         <el-form-item label="工序" prop="processesCode">
236           <el-input v-model="form.processesCode" placeholder="请输入工序" />
237         </el-form-item>
238         <el-form-item label="产品编号" prop="productCode">
0e874c 239           <el-input v-model="headerInformationData.productCode" :disabled="true" placeholder="请输入产品编号" />
fd2207 240         </el-form-item>
241         <el-form-item label="操作内容" prop="operationSteps">
242           <el-input v-model="form.operationSteps" placeholder="请输入操作内容" />
243         </el-form-item>
244         <el-form-item label="技术要求" prop="techRequirement">
245           <el-input v-model="form.techRequirement" placeholder="请输入技术要求" />
246         </el-form-item>
247 <!--        <el-form-item label="类型" prop="operationType">-->
248 <!--          <el-select v-model="form.operationType" placeholder="请选择类型">-->
249 <!--            <el-option-->
250 <!--              v-for="dict in dict.type.${dictType}"-->
251 <!--              :key="dict.value"-->
252 <!--              :label="dict.label"-->
253 <!--              :value="dict.value"-->
254 <!--            ></el-option>-->
255 <!--          </el-select>-->
256 <!--        </el-form-item>-->
257         <el-form-item label="排序" prop="stepSort">
258           <el-input v-model="form.stepSort" placeholder="请输入排序" />
259         </el-form-item>
260         <el-form-item label="参数编码" prop="paramCode">
261           <el-input v-model="form.paramCode" placeholder="请输入参数编码" />
262         </el-form-item>
263         <el-form-item label="物料编码" prop="materialCode">
264           <el-input v-model="form.materialCode" placeholder="请输入物料编码" />
265         </el-form-item>
266 <!--        <el-form-item label="配方编码" prop="formulaCode">-->
267 <!--          <el-input v-model="form.formulaCode" placeholder="请输入配方编码" />-->
268 <!--        </el-form-item>-->
269         <el-form-item label="图片" prop="picture">
1558d8 270 <!--          <el-input v-model="form.picture" placeholder="请输入图片" />-->
271           <el-upload
272             ref="upload"
273             :limit="1"
274             accept=".jpg, .png"
275             :action="upload.url"
276             :headers="upload.headers"
277             :on-remove="removes"
278             :file-list="upload.fileList"
279             :on-progress="handleFileUploadProgress"
280             :on-success="handleFileSuccess"
281             :auto-upload="false">
282             <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
283             <el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading" @click="submitUpload">上传到服务器</el-button>
284             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
285           </el-upload>
fd2207 286         </el-form-item>
287         <el-form-item label="备注" prop="remarks">
288           <el-input v-model="form.remarks" placeholder="请输入备注" />
289         </el-form-item>
290       </el-form>
291       <div slot="footer" class="dialog-footer">
292         <el-button type="primary" @click="submitForm">确 定</el-button>
293         <el-button @click="cancel">取 消</el-button>
294       </div>
295     </el-dialog>
296   </div>
297 </template>
298
299 <script>
1558d8 300 import { getToken } from "@/utils/auth";
fd2207 301 import { listFormula} from "@/api/main/bs/formula/formula";
302 import { listFormulaChild, getFormulaChild, delFormulaChild, addFormulaChild, updateFormulaChild } from "@/api/main/bs/formulaChild/formulaChild";
303
304 export default {
305   name: "FormulaChild",
306   data() {
307     return {
1558d8 308       // 上传参数
309       upload: {
310         // 是否禁用上传
311         isUploading: false,
312         // 设置上传的请求头部
313         headers: { Authorization: "Bearer " + getToken() },
314         // 上传的地址
315         url: process.env.VUE_APP_BASE_API + "/common/upload",
316         // 上传的文件列表
317         fileList: []
318       },
fd2207 319       pjtUrl: process.env.VUE_APP_BASE_API,
320       headerInformationData:{
321         formulaCode: "",
322         formulaName: "",
323         productCode: "",
324         productName: ""
325       },
326       // 遮罩层
327       loading: true,
328       titleName: "",
329       // 选中数组
330       ids: [],
331       // 非单个禁用
332       single: true,
333       // 非多个禁用
334       multiple: true,
335       // 显示搜索条件
336       showSearch: true,
337       // 总条数
338       total: 0,
339       formulaCode:  "",
0e874c 340       productCode:   "",
fd2207 341       // 配方配置子信息表格数据
342       formulaChildList: [],
343       // 弹出层标题
344       title: "",
345       // 是否显示弹出层
346       open: false,
347       // 查询参数
348       queryParams: {
349         pageNum: 1,
350         pageSize: 10,
351         workshopCode: null,
352         lineCode: null,
353         processesCode: null,
354         productCode: null,
355         operationType: null,
356         formulaCode: null,
357       },
358       // 表单参数
359       form: {},
360       // 表单校验
361       rules: {
362         id: [
363           { required: true, message: "id不能为空", trigger: "blur" }
364         ],
365       }
366     };
367   },
368   created() {
207eac 369     let formulaCode = this.$route.query.formulaCode;
fd2207 370     this.queryParams.formulaCode = formulaCode;
371     this.formulaCode = formulaCode;
a67111 372     this.form.formulaCode = formulaCode;
0e874c 373
fd2207 374     this.headerInformation();
375     this.getList();
376   },
377   methods: {
1558d8 378
fd2207 379     /** 工艺流程表头信息 */
380     headerInformation() {
381       listFormula(this.queryParams).then(response => {
382         this.headerInformationData = response.rows[0];
383       });
384     },
385     /** 返回按钮操作 */
386     handleClose() {
387       const obj = { path: "/main/pm/formula" };
388       this.$tab.closeOpenPage(obj);
389     },
390     /** 查询配方配置子信息列表 */
391     getList() {
392       this.loading = true;
393       listFormulaChild(this.queryParams).then(response => {
394         this.formulaChildList = response.rows;
395         this.total = response.total;
396         this.loading = false;
397       });
398     },
399     // 取消按钮
400     cancel() {
401       this.open = false;
402       this.reset();
403     },
404     // 表单重置
405     reset() {
406       this.form = {
407         id: null,
408         workshopCode: null,
409         lineCode: null,
410         processesCode: null,
411         productCode: null,
412         operationSteps: null,
413         techRequirement: null,
414         operationType: null,
415         stepSort: null,
416         paramCode: null,
417         materialCode: null,
418         formulaCode: null,
419         picture: null,
420         remarks: null,
421         createUser: null,
422         createTime: null,
423         updateUser: null,
424         updateTime: null,
425         spareField1: null,
426         spareField2: null,
427         spareField3: null,
428         spareField4: null
429       };
430       this.resetForm("form");
431     },
432     /** 搜索按钮操作 */
433     handleQuery() {
434       this.queryParams.pageNum = 1;
435       this.getList();
436     },
437     /** 重置按钮操作 */
438     resetQuery() {
439       this.resetForm("queryForm");
440       this.handleQuery();
441     },
442     // 多选框选中数据
443     handleSelectionChange(selection) {
444       this.ids = selection.map(item => item.id)
445       this.single = selection.length!==1
446       this.multiple = !selection.length
447     },
448     /** 新增按钮操作 */
449     handleAdd() {
450       this.reset();
451       this.open = true;
1558d8 452       this.upload.fileList = [];
fd2207 453       this.titleName = "添加配方配置子信息";
454     },
455     /** 修改按钮操作 */
456     handleUpdate(row) {
1558d8 457       this.upload.fileList = []
458       console.log(row)
459       if(row.picture!==null && row.picture!==""){
460         this.upload.fileList = [{ name: row.spareField1, url: row.picture }];
461       }
fd2207 462       this.reset();
463       const id = row.id || this.ids
464       getFormulaChild(id).then(response => {
1558d8 465         console.log(response.data)
fd2207 466         this.form = response.data;
467         this.open = true;
468         this.titleName = "修改配方配置子信息";
469       });
470     },
1558d8 471     // 文件提交处理
472     submitUpload() {
473       this.$refs.upload.submit();
474     },
475     // 文件上传中处理
476     handleFileUploadProgress(event, file, fileList) {
477       this.upload.isUploading = true;
478     },
479     // 文件上传成功处理
480     handleFileSuccess(response, file, fileList) {
481       console.log(response)
482       this.upload.isUploading = false;
483       this.form.picture = response.url;
484       this.form.spareField1 = response.originalFilename;
485       this.msgSuccess(response.msg);
486     },
487     removes(){
488       this.form.spareField1 = '';
489       this.form.picture = '';
490     },
fd2207 491     /** 提交按钮 */
492     submitForm() {
493       this.form.formulaCode = this.formulaCode;
494       this.$refs["form"].validate(valid => {
495         if (valid) {
496           if (this.form.id != null) {
497             updateFormulaChild(this.form).then(response => {
498               this.$modal.msgSuccess("修改成功");
499               this.open = false;
500               this.getList();
501             });
502           } else {
503             addFormulaChild(this.form).then(response => {
504               this.$modal.msgSuccess("新增成功");
505               this.open = false;
506               this.getList();
507             });
508           }
509         }
510       });
511     },
512     /** 删除按钮操作 */
513     handleDelete(row) {
514       const ids = row.id || this.ids;
515       this.$modal.confirm('是否确认删除配方配置子信息编号为"' + ids + '"的数据项?').then(function() {
516         return delFormulaChild(ids);
517       }).then(() => {
518         this.getList();
519         this.$modal.msgSuccess("删除成功");
520       }).catch(() => {});
521     },
522     /** 导出按钮操作 */
523     handleExport() {
524       this.download('bs/formulaChild/export', {
525         ...this.queryParams
526       }, `formulaChild_${new Date().getTime()}.xlsx`)
527     }
528   }
529 };
530 </script>