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