春风项目四线(合箱线、总装线)
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="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         ],
ebf004 235         processesCode: [
J 236           { required: true, message: "工序编号不能为空", trigger: "blur" }
237         ],
238         ipAddress: [
239           { required: true, message: "IP地址不能为空", trigger: "blur" }
240         ],
241         macAddress: [
242           { required: true, message: "网卡地址不能为空", trigger: "blur" }
243         ],
fd2207 244       }
245     };
246   },
247   created() {
248     this.getList();
249     this.initProcesses();
250   },
251   methods: {
252
253     handleSelectChangeprocessesCode(selectedOption) {
3d8828 254       this.processesCodeQueryParams.processesCode = selectedOption;
H 255       listProcesses(this.processesCodeQueryParams).then(response => {
fd2207 256         this.form.processesName = response.rows[0].processesName;
257       });
258     },
259     initProcesses(){
260       listProcesses(this.queryParams).then(response => {
261         this.options = response.rows;
262       });
263     },
264     /** 查询工位终端配置列表 */
265     getList() {
266       this.loading = true;
267       listStationConf(this.queryParams).then(response => {
268         this.stationConfList = response.rows;
269         this.total = response.total;
270         this.loading = false;
271       });
272     },
273     // 取消按钮
274     cancel() {
275       this.open = false;
276       this.reset();
277     },
278     // 表单重置
279     reset() {
280       this.form = {
281         id: null,
282         processesCode: null,
283         processesName: null,
284         processesType: null,
285         ipAddress: null,
286         spareField1: null,
287         spareField2: null,
288         spareField3: null,
289         spareField4: null,
290         createUser: null,
291         createTime: null,
292         updateUser: null,
293         updateTime: null,
294         remarks: null
295       };
296       this.resetForm("form");
297     },
298     /** 搜索按钮操作 */
299     handleQuery() {
300       this.queryParams.pageNum = 1;
301       this.getList();
302     },
303     /** 重置按钮操作 */
304     resetQuery() {
305       this.resetForm("queryForm");
306       this.handleQuery();
307     },
308     // 多选框选中数据
309     handleSelectionChange(selection) {
310       this.ids = selection.map(item => item.id)
311       this.single = selection.length!==1
312       this.multiple = !selection.length
313     },
314     /** 新增按钮操作 */
315     handleAdd() {
316       this.reset();
317       this.open = true;
318       this.titleName = "添加工位终端配置";
319     },
320     /** 修改按钮操作 */
321     handleUpdate(row) {
322       this.reset();
323       const id = row.id || this.ids
324       getStationConf(id).then(response => {
325         this.form = response.data;
326         this.open = true;
327         this.titleName = "修改工位终端配置";
328       });
329     },
330     /** 提交按钮 */
331     submitForm() {
332       this.$refs["form"].validate(valid => {
333         if (valid) {
334           if (this.form.id != null) {
335             updateStationConf(this.form).then(response => {
336               this.$modal.msgSuccess("修改成功");
337               this.open = false;
338               this.getList();
339             });
340           } else {
341             addStationConf(this.form).then(response => {
342               this.$modal.msgSuccess("新增成功");
343               this.open = false;
344               this.getList();
345             });
346           }
347         }
348       });
349     },
350     /** 删除按钮操作 */
351     handleDelete(row) {
352       const ids = row.id || this.ids;
353       this.$modal.confirm('是否确认删除工位终端配置编号为"' + ids + '"的数据项?').then(function() {
354         return delStationConf(ids);
355       }).then(() => {
356         this.getList();
357         this.$modal.msgSuccess("删除成功");
358       }).catch(() => {});
359     },
360     /** 导出按钮操作 */
361     handleExport() {
362       this.download('sc/stationConf/export', {
363         ...this.queryParams
364       }, `stationConf_${new Date().getTime()}.xlsx`)
365     }
366   }
367 };
368 </script>