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