春风项目四线(合箱线、总装线)
cl
2024-01-16 b7ce0c733c97fab56004f38e8fc597d89e883a09
提交 | 用户 | 时间
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="processesCode">
6             <el-input
7               v-model="queryParams.processesCode"
8               placeholder="请输入工序编号"
9               clearable
10               @keyup.enter.native="handleQuery"
11             />
12           </el-form-item>
13           <el-form-item label="工序名称" prop="processesName">
14             <el-input
15               v-model="queryParams.processesName"
16               placeholder="请输入工序名称"
17               clearable
18               @keyup.enter.native="handleQuery"
19             />
20           </el-form-item>
21           <el-form-item label="IP地址" prop="ipAddress">
22             <el-input
23               v-model="queryParams.ipAddress"
24               placeholder="请输入IP地址"
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 icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
32           </el-form-item>
33         </el-form>
34     </el-card>
35
36     <el-card style="margin-top: 10px" class="box-card">
37         <el-row :gutter="10" class="mb8">
38           <el-col :span="1.5">
39             <el-button
40               type="primary"
41               plain
42               icon="el-icon-plus"
43               size="mini"
44               @click="handleAdd"
45               v-hasPermi="['sc:stationConf:add']"
46             >新增</el-button>
47           </el-col>
48           <el-col :span="1.5">
49             <el-button
50               type="success"
51               plain
52               icon="el-icon-edit"
53               size="mini"
54               :disabled="single"
55               @click="handleUpdate"
56               v-hasPermi="['sc:stationConf:edit']"
57             >修改</el-button>
58           </el-col>
59           <el-col :span="1.5">
60             <el-button
61               type="danger"
62               plain
63               icon="el-icon-delete"
64               size="mini"
65               :disabled="multiple"
66               @click="handleDelete"
67               v-hasPermi="['sc:stationConf:remove']"
68             >删除</el-button>
69           </el-col>
70           <el-col :span="1.5">
71             <el-button
72               type="warning"
73               plain
74               icon="el-icon-download"
75               size="mini"
76               @click="handleExport"
77               v-hasPermi="['sc:stationConf:export']"
78             >导出</el-button>
79           </el-col>
80           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
81         </el-row>
82
83         <el-table border v-loading="loading" :data="stationConfList" @selection-change="handleSelectionChange">
84           <el-form-item type="selection" width="55" align="center" >
85           </el-form-item>
86           <el-table-column label="工序编号" align="center" prop="processesCode">
87           </el-table-column>
88           <el-table-column label="工序名称" align="center" prop="processesName">
89           </el-table-column>
90           <el-table-column label="IP地址" align="center" prop="ipAddress">
91           </el-table-column>
14e848 92           <el-table-column label="网卡地址" align="center" prop="macAddress">
H 93           </el-table-column>
94
fd2207 95           <el-table-column label="备注" align="center" prop="remarks">
96           </el-table-column>
97           <el-table-column fixed="right" width="200" label="操作" align="center" class-name="small-padding fixed-width">
98             <template slot-scope="scope">
99               <el-button
100                 size="mini"
101                 type="success"
102                 plain
103                 style="width: 72px"
104                 icon="el-icon-edit"
105                 @click="handleUpdate(scope.row)"
106                 v-hasPermi="['sc:stationConf:edit']"
107               >修改</el-button>
108               <el-button
109                 size="mini"
110                 type="danger"
111                 plain
112                 style="width: 72px"
113                 icon="el-icon-delete"
114                 @click="handleDelete(scope.row)"
115                 v-hasPermi="['sc:stationConf:remove']"
116               >删除</el-button>
117             </template>
118           </el-table-column>
119         </el-table>
120     </el-card>
121
122     <pagination
123       v-show="total>0"
124       :total="total"
125       :page.sync="queryParams.pageNum"
126       :limit.sync="queryParams.pageSize"
127       @pagination="getList"
128     />
129
130     <!-- 添加或修改工位终端配置对话框 -->
131     <el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="500px" append-to-body>
132       <span slot="title">
133         <i class="el-icon-s-order"></i>
134         {{titleName}}
135       </span>
136       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
137         <el-form-item label="工序编号" prop="processesCode">
138           <el-select style="width: 100%" @change="handleSelectChangeprocessesCode(form.processesCode)" v-model="form.processesCode" placeholder="请选择工序编号">
139             <el-option
140               v-for="item in options"
3d8828 141               :key="item.processesCode"
H 142               :label="item.processesCode"
fd2207 143               :value="item.processesCode">
144             </el-option>
145           </el-select>
146         </el-form-item>
147         <el-form-item label="工序名称" prop="processesName">
148           <el-input  disabled v-model="form.processesName" placeholder="请输入工序名称" />
149         </el-form-item>
150         <el-form-item label="IP地址" prop="ipAddress">
151           <el-input v-model="form.ipAddress" placeholder="请输入IP地址" />
152         </el-form-item>
14e848 153         <el-form-item label="网卡地址" prop="macAddress">
H 154           <el-input v-model="form.macAddress" placeholder="请输入网卡地址" />
155         </el-form-item>
fd2207 156         <el-form-item label="备注" prop="remarks">
157           <el-input v-model="form.remarks" placeholder="请输入备注" />
158         </el-form-item>
159       </el-form>
160       <div slot="footer" class="dialog-footer">
161         <el-button type="primary" @click="submitForm">确 定</el-button>
162         <el-button @click="cancel">取 消</el-button>
163       </div>
164     </el-dialog>
165   </div>
166 </template>
167
168 <script>
169 import {listStationConf, getStationConf, delStationConf, addStationConf, updateStationConf} from "@/api/main/sc/stationConf";
170 import {listProcesses} from "@/api/main/bs/processes/processes";
171
172 export default {
173   name: "StationConf",
174   data() {
175     return {
176       options: [],
177       // 遮罩层
178       loading: true,
179       titleName: "",
180       // 选中数组
181       ids: [],
182       // 非单个禁用
183       single: true,
184       // 非多个禁用
185       multiple: true,
186       // 显示搜索条件
187       showSearch: true,
188       // 总条数
189       total: 0,
190       // 工位终端配置表格数据
191       stationConfList: [],
192       // 弹出层标题
193       title: "",
194       // 是否显示弹出层
195       open: false,
196       // 查询参数
197       queryParams: {
198         pageNum: 1,
199         pageSize: 10,
200         processesCode: null,
201         processesName: null,
202         processesType: null,
203         ipAddress: null,
14e848 204         macAddress: null,
fd2207 205         spareField1: null,
206         spareField2: null,
207         spareField3: null,
208         spareField4: null,
209         createUser: null,
210         updateUser: null,
211         remarks: null
212       },
213       processesCodeQueryParams:{
214         pageNum: 1,
215         pageSize: 10,
3d8828 216         processesCode: null,
H 217         processesName: null,
218         processesType: null,
219         ipAddress: null,
220         spareField1: null,
221         spareField2: null,
222         spareField3: null,
223         spareField4: null,
224         createUser: null,
225         updateUser: null,
226         remarks: null
fd2207 227       },
228       // 表单参数
229       form: {},
230       // 表单校验
231       rules: {
232         id: [
233           { required: true, message: "主键id不能为空", trigger: "blur" }
234         ],
235       }
236     };
237   },
238   created() {
239     this.getList();
240     this.initProcesses();
241   },
242   methods: {
243
244     handleSelectChangeprocessesCode(selectedOption) {
3d8828 245       this.processesCodeQueryParams.processesCode = selectedOption;
H 246       listProcesses(this.processesCodeQueryParams).then(response => {
fd2207 247         this.form.processesName = response.rows[0].processesName;
248       });
249     },
250     initProcesses(){
251       listProcesses(this.queryParams).then(response => {
252         this.options = response.rows;
253       });
254     },
255     /** 查询工位终端配置列表 */
256     getList() {
257       this.loading = true;
258       listStationConf(this.queryParams).then(response => {
259         this.stationConfList = response.rows;
260         this.total = response.total;
261         this.loading = false;
262       });
263     },
264     // 取消按钮
265     cancel() {
266       this.open = false;
267       this.reset();
268     },
269     // 表单重置
270     reset() {
271       this.form = {
272         id: null,
273         processesCode: null,
274         processesName: null,
275         processesType: null,
276         ipAddress: null,
277         spareField1: null,
278         spareField2: null,
279         spareField3: null,
280         spareField4: null,
281         createUser: null,
282         createTime: null,
283         updateUser: null,
284         updateTime: null,
285         remarks: null
286       };
287       this.resetForm("form");
288     },
289     /** 搜索按钮操作 */
290     handleQuery() {
291       this.queryParams.pageNum = 1;
292       this.getList();
293     },
294     /** 重置按钮操作 */
295     resetQuery() {
296       this.resetForm("queryForm");
297       this.handleQuery();
298     },
299     // 多选框选中数据
300     handleSelectionChange(selection) {
301       this.ids = selection.map(item => item.id)
302       this.single = selection.length!==1
303       this.multiple = !selection.length
304     },
305     /** 新增按钮操作 */
306     handleAdd() {
307       this.reset();
308       this.open = true;
309       this.titleName = "添加工位终端配置";
310     },
311     /** 修改按钮操作 */
312     handleUpdate(row) {
313       this.reset();
314       const id = row.id || this.ids
315       getStationConf(id).then(response => {
316         this.form = response.data;
317         this.open = true;
318         this.titleName = "修改工位终端配置";
319       });
320     },
321     /** 提交按钮 */
322     submitForm() {
323       this.$refs["form"].validate(valid => {
324         if (valid) {
325           if (this.form.id != null) {
326             updateStationConf(this.form).then(response => {
327               this.$modal.msgSuccess("修改成功");
328               this.open = false;
329               this.getList();
330             });
331           } else {
332             addStationConf(this.form).then(response => {
333               this.$modal.msgSuccess("新增成功");
334               this.open = false;
335               this.getList();
336             });
337           }
338         }
339       });
340     },
341     /** 删除按钮操作 */
342     handleDelete(row) {
343       const ids = row.id || this.ids;
344       this.$modal.confirm('是否确认删除工位终端配置编号为"' + ids + '"的数据项?').then(function() {
345         return delStationConf(ids);
346       }).then(() => {
347         this.getList();
348         this.$modal.msgSuccess("删除成功");
349       }).catch(() => {});
350     },
351     /** 导出按钮操作 */
352     handleExport() {
353       this.download('sc/stationConf/export', {
354         ...this.queryParams
355       }, `stationConf_${new Date().getTime()}.xlsx`)
356     }
357   }
358 };
359 </script>