春风项目四线(合箱线、总装线)
jiang
2024-01-26 2907adc5cea3d3cee48d758e2df7d9f55087cc55
提交 | 用户 | 时间
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">
f0b395 239           <el-input v-model="productCode" 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:  "",
340       // 配方配置子信息表格数据
341       formulaChildList: [],
342       // 弹出层标题
343       title: "",
344       // 是否显示弹出层
345       open: false,
346       // 查询参数
347       queryParams: {
348         pageNum: 1,
349         pageSize: 10,
350         workshopCode: null,
351         lineCode: null,
352         processesCode: null,
353         productCode: null,
354         operationType: null,
355         formulaCode: null,
356       },
357       // 表单参数
358       form: {},
359       // 表单校验
360       rules: {
361         id: [
362           { required: true, message: "id不能为空", trigger: "blur" }
363         ],
364       }
365     };
366   },
367   created() {
207eac 368     let formulaCode = this.$route.query.formulaCode;
fd2207 369     this.queryParams.formulaCode = formulaCode;
370     this.formulaCode = formulaCode;
a67111 371     this.form.formulaCode = formulaCode;
fd2207 372     this.headerInformation();
373     this.getList();
374   },
375   methods: {
1558d8 376
fd2207 377     /** 工艺流程表头信息 */
378     headerInformation() {
379       listFormula(this.queryParams).then(response => {
380         this.headerInformationData = response.rows[0];
381       });
382     },
383     /** 返回按钮操作 */
384     handleClose() {
385       const obj = { path: "/main/pm/formula" };
386       this.$tab.closeOpenPage(obj);
387     },
388     /** 查询配方配置子信息列表 */
389     getList() {
390       this.loading = true;
391       listFormulaChild(this.queryParams).then(response => {
392         this.formulaChildList = response.rows;
393         this.total = response.total;
394         this.loading = false;
395       });
396     },
397     // 取消按钮
398     cancel() {
399       this.open = false;
400       this.reset();
401     },
402     // 表单重置
403     reset() {
404       this.form = {
405         id: null,
406         workshopCode: null,
407         lineCode: null,
408         processesCode: null,
409         productCode: null,
410         operationSteps: null,
411         techRequirement: null,
412         operationType: null,
413         stepSort: null,
414         paramCode: null,
415         materialCode: null,
416         formulaCode: null,
417         picture: null,
418         remarks: null,
419         createUser: null,
420         createTime: null,
421         updateUser: null,
422         updateTime: null,
423         spareField1: null,
424         spareField2: null,
425         spareField3: null,
426         spareField4: null
427       };
428       this.resetForm("form");
429     },
430     /** 搜索按钮操作 */
431     handleQuery() {
432       this.queryParams.pageNum = 1;
433       this.getList();
434     },
435     /** 重置按钮操作 */
436     resetQuery() {
437       this.resetForm("queryForm");
438       this.handleQuery();
439     },
440     // 多选框选中数据
441     handleSelectionChange(selection) {
442       this.ids = selection.map(item => item.id)
443       this.single = selection.length!==1
444       this.multiple = !selection.length
445     },
446     /** 新增按钮操作 */
447     handleAdd() {
448       this.reset();
449       this.open = true;
1558d8 450       this.upload.fileList = [];
fd2207 451       this.titleName = "添加配方配置子信息";
452     },
453     /** 修改按钮操作 */
454     handleUpdate(row) {
1558d8 455       this.upload.fileList = []
456       console.log(row)
457       if(row.picture!==null && row.picture!==""){
458         this.upload.fileList = [{ name: row.spareField1, url: row.picture }];
459       }
fd2207 460       this.reset();
461       const id = row.id || this.ids
462       getFormulaChild(id).then(response => {
1558d8 463         console.log(response.data)
fd2207 464         this.form = response.data;
465         this.open = true;
466         this.titleName = "修改配方配置子信息";
467       });
468     },
1558d8 469     // 文件提交处理
470     submitUpload() {
471       this.$refs.upload.submit();
472     },
473     // 文件上传中处理
474     handleFileUploadProgress(event, file, fileList) {
475       this.upload.isUploading = true;
476     },
477     // 文件上传成功处理
478     handleFileSuccess(response, file, fileList) {
479       console.log(response)
480       this.upload.isUploading = false;
481       this.form.picture = response.url;
482       this.form.spareField1 = response.originalFilename;
483       this.msgSuccess(response.msg);
484     },
485     removes(){
486       this.form.spareField1 = '';
487       this.form.picture = '';
488     },
fd2207 489     /** 提交按钮 */
490     submitForm() {
491       this.form.formulaCode = this.formulaCode;
492       this.$refs["form"].validate(valid => {
493         if (valid) {
494           if (this.form.id != null) {
495             updateFormulaChild(this.form).then(response => {
496               this.$modal.msgSuccess("修改成功");
497               this.open = false;
498               this.getList();
499             });
500           } else {
501             addFormulaChild(this.form).then(response => {
502               this.$modal.msgSuccess("新增成功");
503               this.open = false;
504               this.getList();
505             });
506           }
507         }
508       });
509     },
510     /** 删除按钮操作 */
511     handleDelete(row) {
512       const ids = row.id || this.ids;
513       this.$modal.confirm('是否确认删除配方配置子信息编号为"' + ids + '"的数据项?').then(function() {
514         return delFormulaChild(ids);
515       }).then(() => {
516         this.getList();
517         this.$modal.msgSuccess("删除成功");
518       }).catch(() => {});
519     },
520     /** 导出按钮操作 */
521     handleExport() {
522       this.download('bs/formulaChild/export', {
523         ...this.queryParams
524       }, `formulaChild_${new Date().getTime()}.xlsx`)
525     }
526   }
527 };
528 </script>