admin
2024-04-24 363457b34e0e4f26ffe51aa80ecb227bf7873308
提交 | 用户 | 时间
363457 1 <template>
A 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-width="80" label="生产工单号" prop="workOrderNo">
6         <el-input
7           v-model="queryParams.workOrderNo"
8           placeholder="请输入生产工单号"
9           clearable
10           @keyup.enter.native="handleQuery"
11         />
12       </el-form-item>
13       <el-form-item label="产品名称" prop="productName">
14         <el-input
15           v-model="queryParams.productName"
16           placeholder="请输入产品名称"
17           clearable
18           @keyup.enter.native="handleQuery"
19         />
20       </el-form-item>
21       <el-form-item label="工单状态" prop="orderStatus">
22         <el-select v-model="queryParams.orderStatus" placeholder="请选择工单状态" clearable>
23           <el-option
24             v-for="dict in dict.type.order_state"
25             :key="dict.value"
26             :label="dict.label"
27             :value="dict.value"
28           />
29         </el-select>
30       </el-form-item>
31       <el-form-item style="float: right">
32         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
33         <el-button type="warning" icon="el-icon-copy-document" size="mini" @click="advancedQuery">高级查询</el-button>
34         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
35       </el-form-item>
36     </el-form>
37     <el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="advancedShowSearch" label-width="68px">
38       <el-form-item style="margin-left: 14px" label="产品编号" prop="productCode">
39         <el-input
40           v-model="queryParams.productCode"
41           placeholder="请输入产品编号"
42           clearable
43           @keyup.enter.native="handleQuery"
44         />
45       </el-form-item>
46       <el-form-item label="订单编号" prop="salesOrderCode">
47         <el-input
48           v-model="queryParams.salesOrderCode"
49           placeholder="请输入订单编号"
50           clearable
51           @keyup.enter.native="handleQuery"
52         />
53       </el-form-item>
54       <el-form-item label="车间编号" prop="workshopCode">
55         <el-input
56           v-model="queryParams.workshopCode"
57           placeholder="请输入车间编号"
58           clearable
59           @keyup.enter.native="handleQuery"
60         />
61       </el-form-item>
62       <el-form-item label="产线编号" prop="lineCode">
63         <el-input
64           v-model="queryParams.lineCode"
65           placeholder="请输入产线编号"
66           clearable
67           @keyup.enter.native="handleQuery"
68         />
69       </el-form-item>
70       <el-form-item style="margin-left: 7px" label-width="80" label="产品BOM" prop="bomCode">
71         <el-input
72           v-model="queryParams.bomCode"
73           placeholder="请输入产品BOM"
74           clearable
75           @keyup.enter.native="handleQuery"
76         />
77       </el-form-item>
78       <el-form-item label="工艺流程" prop="routeCode">
79         <el-input
80           v-model="queryParams.routeCode"
81           placeholder="请输入工艺流程"
82           clearable
83           @keyup.enter.native="handleQuery"
84         />
85       </el-form-item>
86
87       <el-form-item label="工艺配方" prop="recipeCode">
88         <el-input
89           v-model="queryParams.recipeCode"
90           placeholder="请输入工艺配方"
91           clearable
92           @keyup.enter.native="handleQuery"
93         />
94       </el-form-item>
95     </el-form>
96     </el-card>
97
98     <el-card style="margin-top: 10px" class="box-card">
99     <el-row :gutter="10" class="mb8">
100       <el-col :span="1.5">
101         <el-button
102           type="primary"
103           plain
104           icon="el-icon-plus"
105           size="mini"
106           @click="handleAdd"
107           v-hasPermi="['om:productionOrde:add']"
108         >新增</el-button>
109       </el-col>
110       <el-col :span="1.5">
111         <el-button
112           type="success"
113           plain
114           icon="el-icon-edit"
115           size="mini"
116           :disabled="single"
117           @click="handleUpdate"
118           v-hasPermi="['om:productionOrde:edit']"
119         >修改</el-button>
120       </el-col>
121       <el-col :span="1.5">
122         <el-button
123           type="danger"
124           plain
125           icon="el-icon-delete"
126           size="mini"
127           :disabled="multiple"
128           @click="handleDelete"
129           v-hasPermi="['om:productionOrde:remove']"
130         >删除</el-button>
131       </el-col>
132       <el-col :span="1.5">
133         <el-button
134           type="warning"
135           plain
136           icon="el-icon-download"
137           size="mini"
138           @click="handleExport"
139           v-hasPermi="['om:productionOrde:export']"
140         >导出</el-button>
141       </el-col>
142       <el-col :span="1.5">
143         <el-button
144           type="warning"
145           plain
146           icon="el-icon-upload2"
147           :disabled="move"
148           size="mini"
149           @click="moveUp(val => val, 'up')"
150         >上移</el-button>
151       </el-col>
152       <el-col :span="1.5">
153         <el-button
154           type="warning"
155           plain
156           icon="el-icon-download"
157           size="mini"
158           :disabled="move"
159           @click="moveUp(val => val, 'down')"
160         >下移</el-button>
161       </el-col>
162       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
163     </el-row>
164
165       <el-table border v-loading="loading" :data="productionOrdeList" @selection-change="handleSelectionChange">
166         <el-table-column type="selection" width="55" align="center" />
167         <el-table-column label="生产工单号" width="160" align="center">
168           <template slot-scope="scope">
169             <router-link :to="{path: '/main/workReport-data/index/', query: {workOrderNo: scope.row.workOrderNo} }" class="link-type">
170               <span>{{ scope.row.workOrderNo }}</span>
171             </router-link>
172           </template>
173         </el-table-column>
174         <el-table-column label="订单编号" width="140" align="center" prop="salesOrderCode">
175         </el-table-column>
176         <el-table-column label="产品编号" width="140" align="center" prop="productCode">
177         </el-table-column>
178         <el-table-column label="产品名称" width="160" align="center" prop="productName">
179         </el-table-column>
180         <el-table-column label="工单状态" align="center" prop="orderStatus">
181           <template slot-scope="scope">
182             <dict-tag :options="dict.type.order_state" :value="scope.row.orderStatus"/>
183           </template>
184         </el-table-column>
185         <el-table-column label="车间编号" align="center" prop="workshopCode">
186         </el-table-column>
187         <el-table-column label="产线编号" align="center" prop="lineCode">
188         </el-table-column>
189         <el-table-column label="工艺流程" width="140" align="center" prop="routeCode">
190         </el-table-column>
191         <el-table-column label="产品BOM" width="140" align="center" prop="bomCode">
192         </el-table-column>
193         <el-table-column label="工艺配方" width="140" align="center" prop="recipeCode">
194         </el-table-column>
195         <el-table-column label="计划数量" align="center" prop="planQty">
196         </el-table-column>
197         <el-table-column label="实际数量" align="center" prop="actualQty">
198         </el-table-column>
199         <el-table-column label="实际上线数量" width="100" align="center" prop="actualOnlineQty">
200         </el-table-column>
201         <el-table-column label="需求日期" align="center" prop="demandDate" width="180">
202         </el-table-column>
203         <el-table-column label="计划开始时间" width="160" align="center" prop="planStartTime">
204         </el-table-column>
205         <el-table-column label="计划结束时间" width="160" align="center" prop="planEndTime">
206         </el-table-column>
207         <el-table-column label="实际开始时间" width="160" align="center" prop="actualStartTime">
208         </el-table-column>
209         <el-table-column label="实际结束时间" width="160" align="center" prop="actualEndTime">
210         </el-table-column>
211         <el-table-column width="160" label="创建时间" align="center" prop="createTime">
212         </el-table-column>
213         <el-table-column width="160" label="更新时间" align="center" prop="updateTime">
214         </el-table-column>
215         <el-table-column label="创建人" width="80" align="center" prop="createUser">
216         </el-table-column>
217         <el-table-column label="修改人" width="80" align="center" prop="updateUser">
218         </el-table-column>
219         <el-table-column label="备注" width="100" align="center" prop="remarks">
220         </el-table-column>
221         <el-table-column label="流水号" align="center" prop="streamNumber">
222         </el-table-column>
223         <el-table-column label="客户" width="80" align="center" prop="custom">
224         </el-table-column>
225         <el-table-column fixed="right" width="350" label="操作" align="center" class-name="small-padding fixed-width">
226           <template slot-scope="scope">
227             <!--  工单状态(1创建、2已发布、3生产中、4已冻结、5已完工、6已关闭) -->
228             <el-button type="success" :disabled="scope.row.orderStatus !== '1'"  style="width: 72px" plain @click="handleCommand('3',scope.row.id)" size="mini">开始</el-button>
229             <el-button style="width: 72px" :disabled="scope.row.orderStatus !== '2' && scope.row.orderStatus !== '3'" v-if="scope.row.orderStatus !== '2'&&  scope.row.orderStatus !== '4'" plain @click="handleCommand('4',scope.row.id)" type="warning" size="mini">冻结</el-button>
230             <el-button style="width: 72px" :disabled="scope.row.orderStatus !== '4'" v-if="scope.row.orderStatus === '4'" plain @click="handleCommand('3',scope.row.id)" type="warning" size="mini">解冻</el-button>
231             <el-button style="width: 72px" :disabled="scope.row.orderStatus !== '1'" plain @click="handleCommand('6',scope.row.id)" v-if="scope.row.orderStatus === '1'||scope.row.orderStatus === '3'||scope.row.orderStatus === '4'||scope.row.orderStatus === '5'" type="danger" size="mini">关闭</el-button>
232             <el-button style="width: 72px" :disabled="scope.row.orderStatus !== '6'" plain @click="handleCommand('1',scope.row.id)" v-if="scope.row.orderStatus === '6' " type="success" size="mini">启用</el-button>
233 <!--            <el-button-->
234 <!--              :disabled="scope.row.orderStatus !== '1'"-->
235 <!--              size="mini"-->
236 <!--              type="success"-->
237 <!--              style="width: 72px"-->
238 <!--              icon="el-icon-edit"-->
239 <!--              @click="handleUpdate(scope.row)"-->
240 <!--              v-hasPermi="['om:productionOrde:edit']"-->
241 <!--            >修改</el-button>-->
242 <!--            <el-button-->
243 <!--              :disabled="scope.row.orderStatus !== '1'"-->
244 <!--              size="mini"-->
245 <!--              type="warning"-->
246 <!--              style="width: 72px"-->
247 <!--              icon="el-icon-delete"-->
248 <!--              @click="handleDelete(scope.row)"-->
249 <!--              v-hasPermi="['om:productionOrde:remove']"-->
250 <!--            >删除</el-button>-->
251             <el-button style="width: 72px" :disabled="scope.row.orderStatus === '4'||scope.row.orderStatus === '6'" v-if="scope.row.orderStatus !== '5'" @click="handleCommand('5',scope.row.id)" type="success" size="mini">完成</el-button>
252             <el-button style="width: 72px" :disabled="scope.row.orderStatus === '5'" v-if="scope.row.orderStatus === '5'" type="success" size="mini">已完工</el-button>            <el-button style="width: 72px" :disabled="scope.row.orderStatus !== '6'" plain @click="handleCommand('1',scope.row.id)" v-if="scope.row.orderStatus === '6' " type="success" size="mini">启用</el-button>
253           </template>
254         </el-table-column>
255       </el-table>
256     </el-card>
257
258
259     <pagination
260       v-show="total>0"
261       :total="total"
262       :page.sync="queryParams.pageNum"
263       :limit.sync="queryParams.pageSize"
264       @pagination="getList"
265     />
266
267     <!-- 添加或修改生产工单对话框 -->
268     <el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="1000px" append-to-body>
269        <span slot="title">
270         <i class="el-icon-s-order"></i>
271         {{titleName}}
272       </span>
273       <el-form ref="form" inline :model="form" :rules="rules" label-width="80px">
274         <el-form-item label="工单号" prop="workOrderNo">
275           <el-input v-model="form.workOrderNo" placeholder="请输入生产工单号" />
276         </el-form-item>
277         <el-form-item label="订单编号" prop="salesOrderCode">
278           <el-input v-model="form.salesOrderCode" placeholder="请输入订单编号" />
279         </el-form-item>
280         <el-form-item label="产品编号" prop="productCode">
281           <el-input v-model="form.productCode" placeholder="请选择产品" >
282             <el-button slot="append" @click="handleSelectProduct" icon="el-icon-search"></el-button>
283           </el-input>
284           <ItemSelect ref="itemSelect" @onSelected="onItemSelected" > </ItemSelect>
285         </el-form-item>
286         <el-form-item label="产品名称" prop="productName">
287           <el-input v-model="form.productName" disabled placeholder="请输入产品名称" />
288         </el-form-item>
289         <el-form-item label="车间编号" prop="workshopCode">
290           <el-select style="width: 93%" @change="handleSelectChange(form.workshopCode)" v-model="form.workshopCode" placeholder="请选择车间编号">
291             <el-option
292               v-for="item in options"
293               :key="item.workshopCode"
294               :label="item.workshopName"
295               :value="item.workshopCode">
296             </el-option>
297           </el-select>
298         </el-form-item>
299         <el-form-item style="margin-left: -15px" label="产线编号" prop="lineCode">
300           <el-select style="width: 93%" v-model="form.lineCode" placeholder="请选择产线编号">
301             <el-option
302               v-for="item in lineOptions"
303               :key="item.lineCode"
304               :label="item.lineName"
305               :value="item.lineCode">
306             </el-option>
307           </el-select>
308         </el-form-item>
309         <el-form-item label="工艺流程" prop="routeCode">
310           <el-input v-model="form.routeCode" disabled placeholder="请输入工艺流程" />
311         </el-form-item>
312         <el-form-item label="产品BOM" prop="bomCode">
313           <el-input v-model="form.bomCode" disabled placeholder="请输入产品BOM" />
314         </el-form-item>
315         <el-form-item label="工艺配方" prop="recipeCode">
316           <el-input v-model="form.recipeCode" placeholder="请输入工艺配方" />
317         </el-form-item>
318         <el-form-item label="计划数量" prop="planQty">
319           <el-input v-model="form.planQty" placeholder="请输入计划数量" />
320         </el-form-item>
321         <el-form-item label="需求日期" prop="demandDate">
322           <el-date-picker style="width: 88%" clearable
323             v-model="form.demandDate"
324             type="date"
325             value-format="yyyy-MM-dd"
326             placeholder="请选择需求日期">
327           </el-date-picker>
328         </el-form-item>
329         <el-form-item style="margin-left: -30px" label="备注" prop="remarks">
330           <el-input v-model="form.remarks" placeholder="请输入备注" />
331         </el-form-item>
332         <el-row>
333           <el-col :span="12">
334             <el-form-item style="margin-left: 10px" label-width="120" label="计划开始时间" prop="planStartTime">
335               <el-date-picker clearable
336                 v-model="form.planStartTime"
337                 type="date"
338                 value-format="yyyy-MM-dd"
339                 placeholder="请选择计划开始时间">
340               </el-date-picker>
341             </el-form-item>
342           </el-col>
343           <el-col :span="12">
344             <el-form-item style="margin-left: 76px" label-width="120" label="计划结束时间" prop="planEndTime">
345               <el-date-picker clearable
346                 v-model="form.planEndTime"
347                 type="date"
348                 value-format="yyyy-MM-dd"
349                 placeholder="请选择计划结束时间">
350               </el-date-picker>
351             </el-form-item>
352           </el-col>
353
354         </el-row>
355       </el-form>
356       <div slot="footer" class="dialog-footer">
357         <el-button type="primary" @click="submitForm">确 定</el-button>
358         <el-button @click="cancel">取 消</el-button>
359       </div>
360     </el-dialog>
361
362   </div>
363 </template>
364
365 <script>
366 import { listLineInfo } from "@/api/main/bs/lineInfo/lineInfo";
367 import { listWorkshop } from "@/api/main/bs/workshop/workshop";
368 import { listProductBom } from "@/api/main/bs/ProductBom/ProductBom";
369 import { listTechnologyRoute} from "@/api/main/bs/technologyRoute/technologyRoute";
370 import ItemSelect  from "@/components/itemSelect/single.vue";
371 import { upDownMove, listProductionOrde, getProductionOrde, delProductionOrde, addProductionOrde, updateProductionOrde } from "@/api/main/om/productionOrde/productionOrde";
372
373 export default {
374   name: "ProductionOrde",
375   dicts: ['order_state'],
376   components: {
377     ItemSelect ,
378   },
379   data() {
380     return {
381       titleName: '',
382       options: [],
383       lineOptions: [],
384       showFlag:false,
385       advancedShowSearch: false,
386       workOrder: {
387         status: 'ss'
388       },
389       // 遮罩层
390       loading: true,
391       // 选中数组
392       ids: [],
393       // 非单个禁用
394       single: true,
395       // 非多个禁用
396       multiple: true,
397       move: true,
398       selectedRowIndex: -1, // 存储选中行的索引
399       // 显示搜索条件
400       showSearch: true,
401       // 总条数
402       total: 0,
403       // 生产工单表格数据
404       productionOrdeList: [],
405       // 弹出层标题
406       title: "",
407       // 是否显示弹出层
408       open: false,
409       // 查询参数
410       queryParams: {
411         pageNum: 1,
412         pageSize: 10,
413         workOrderNo: null,
414         salesOrderCode: null,
415         productCode: null,
416         productName: null,
417         workshopCode: null,
418         lineCode: null,
419         routeCode: null,
420         bomCode: null,
421         recipeCode: null,
422         orderStatus: null,
423         custom: null,
424         marketAreaCode: null,
425         softwareVersionCode: null,
426         productCompanyCode: null,
427         frontEndId: 0,
428         idNums: null,
429         flag: null,
430
431       },
432       // 表单参数
433       form: {},
434       updateStatusParameter: {
435         id: null,
436         orderStatus: null
437       },
438       // 表单校验
439       rules: {
440         id: [
441           { required: true, message: "ID不能为空", trigger: "blur" }
442         ],
443       }
444     };
445   },
446   created() {
447     this.getList();
448     this.initWorkshop();
449   },
450   methods: {
451     moveUp(row, val){
452       console.log(val)
453       const ids = row.id || this.ids
454       let str = JSON.stringify(ids);
455       let num = BigInt(str.replace(/[\[\]]/g, ''));
456       this.queryParams.frontEndId = num
457       this.queryParams.idNums = ids
458       this.queryParams.flag = val
459       upDownMove(this.queryParams).then(response => {
460         this.$modal.msgSuccess("移动成功");
461         this.getList();
462       });
463     },
464     initWorkshop(){
465       listWorkshop(this.queryParams).then(response => {
466         this.options = response.rows;
467       });
468     },
469     // 在这里编写处理选中事件的逻辑
470     handleSelectChange(selectedOption) {
471       this.form.lineCode = null;
472       let params = {
473         workshopCode: selectedOption
474       };
475       listLineInfo(params).then(response => {
476         this.lineOptions = response.rows;
477       });
478     },
479     //物料选择弹出框
480     onItemSelected(obj){
481       if(obj !== undefined && obj !== null){
482         let productCode = obj.materialCode;
483         this.form.productCode = productCode;
484         this.form.productName = obj.materialName;
485         this.queryParams.productCode = productCode
486         listTechnologyRoute(this.queryParams).then(response => {
487           this.form.routeCode = response.rows[0].routeCode;
488         });
489         listProductBom(this.queryParams).then(response => {
490           this.form.bomCode = response.rows[0].bomCode;
491         });
492       }
493     },
494     handleSelectProduct(){
495       this.$refs.itemSelect.showFlag = true;
496     },
497     advancedQuery(){
498       this.advancedShowSearch = (this.advancedShowSearch) ? this.advancedShowSearch = false : this.advancedShowSearch = true;
499     },
500     handleCommand(status,id) {
501       console.log(status)
502       this.updateStatusParameter.id = id;
503       this.updateStatusParameter.orderStatus = status;
504       updateProductionOrde(this.updateStatusParameter).then(response => {
505         this.$modal.msgSuccess("修改成功");
506         this.open = false;
507         this.getList();
508       });
509     },
510     /** 查询生产工单列表 */
511     getList() {
512       this.loading = true;
513       listProductionOrde(this.queryParams).then(response => {
514         this.productionOrdeList = response.rows;
515         this.total = response.total;
516         this.loading = false;
517       });
518     },
519     // 取消按钮
520     cancel() {
521       this.open = false;
522       this.reset();
523     },
524     // 表单重置
525     reset() {
526       this.form = {
527         id: null,
528         workOrderNo: null,
529         salesOrderCode: null,
530         productCode: null,
531         productName: null,
532         workshopCode: null,
533         lineCode: null,
534         routeCode: null,
535         bomCode: null,
536         recipeCode: null,
537         planQty: null,
538         actualQty: null,
539         badQty: null,
540         scrapQty: null,
541         repairQty: null,
542         actualOnlineQty: null,
543         onlineCompletionMark: null,
544         demandDate: null,
545         planStartTime: null,
546         planEndTime: null,
547         actualStartTime: null,
548         actualEndTime: null,
549         serialNumber: null,
550         orderStatus: null,
551         createTime: null,
552         updateTime: null,
553         createUser: null,
554         updateUser: null,
555         remarks: null,
556         streamNumber: null,
557         custom: null,
558         marketAreaCode: null,
559         softwareVersionCode: null,
560         productCompanyCode: null,
561         spareField1: null,
562         spareField2: null,
563         spareField3: null,
564         spareField4: null
565       };
566       this.resetForm("form");
567     },
568     /** 搜索按钮操作 */
569     handleQuery() {
570       this.queryParams.pageNum = 1;
571       this.getList();
572     },
573     /** 重置按钮操作 */
574     resetQuery() {
575       this.resetForm("queryForm");
576       this.handleQuery();
577     },
578     // 多选框选中数据
579     handleSelectionChange(selection) {
580       this.ids = selection.map(item => item.id)
581       this.move = selection.length!==1
582       if(!selection.length){
583         this.single = true
584         this.multiple = true
585       }else {
586         if(selection[0].orderStatus === '1' && selection.length === 1){
587           this.single = false
588           this.multiple = false
589         }
590       }
591
592     },
593     /** 新增按钮操作 */
594     handleAdd() {
595       this.initWorkshop();
596       this.reset();
597       this.open = true;
598       this.titleName = "添加生产工单";
599     },
600     /** 修改按钮操作 */
601     handleUpdate(row) {
602       this.initWorkshop();
603       this.reset();
604       const id = row.id || this.ids
605       getProductionOrde(id).then(response => {
606         console.log(response.data)
607         this.form = response.data;
608         this.open = true;
609         this.titleName = "修改生产工单";
610       });
611     },
612     /** 提交按钮 */
613     submitForm() {
614       this.$refs["form"].validate(valid => {
615         if (valid) {
616           if (this.form.id != null) {
617             updateProductionOrde(this.form).then(response => {
618               this.$modal.msgSuccess("修改成功");
619               this.open = false;
620               this.getList();
621             });
622           } else {
623             addProductionOrde(this.form).then(response => {
624               this.$modal.msgSuccess("新增成功");
625               this.open = false;
626               this.getList();
627             });
628           }
629         }
630       });
631     },
632     /** 删除按钮操作 */
633     handleDelete(row) {
634       const ids = row.id || this.ids;
635       this.$modal.confirm('是否确认删除生产工单编号为"' + ids + '"的数据项?').then(function() {
636         return delProductionOrde(ids);
637       }).then(() => {
638         this.getList();
639         this.$modal.msgSuccess("删除成功");
640       }).catch(() => {});
641     },
642     /** 导出按钮操作 */
643     handleExport() {
644       this.download('om/productionOrde/export', {
645         ...this.queryParams
646       }, `productionOrde_${new Date().getTime()}.xlsx`)
647     }
648   }
649 };
650 </script>
651 <style lang="scss" scoped>
652 //::v-deep .el-dialog__header{
653 //  /*background-color: #f8f8f8;*/
654 //  background-color: #f8f8f9;
655 //}
656 </style>