-
懒羊羊
2024-04-02 8f0f8d2d5e5492b1db16d5166a5e053511844522
提交 | 用户 | 时间
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"
adb3b5 138               :key="item.processesCode"
H 139               :label="item.processesCode"
e57a89 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,
adb3b5 209         processesCode: null,
e57a89 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) {
adb3b5 228       this.processesCodeQueryParams.processesCode = selectedOption;
H 229       listProcesses(this.processesCodeQueryParams).then(response => {
e57a89 230         this.form.processesName = response.rows[0].processesName;
231       });
adb3b5 232
e57a89 233     },
234     initProcesses(){
235       listProcesses(this.queryParams).then(response => {
236         this.options = response.rows;
237       });
238     },
239     /** 查询工位终端配置列表 */
240     getList() {
241       this.loading = true;
242       listStationConf(this.queryParams).then(response => {
243         this.stationConfList = response.rows;
244         this.total = response.total;
245         this.loading = false;
246       });
247     },
248     // 取消按钮
249     cancel() {
250       this.open = false;
251       this.reset();
252     },
253     // 表单重置
254     reset() {
255       this.form = {
256         id: null,
257         processesCode: null,
258         processesName: null,
259         processesType: null,
260         ipAddress: null,
261         spareField1: null,
262         spareField2: null,
263         spareField3: null,
264         spareField4: null,
265         createUser: null,
266         createTime: null,
267         updateUser: null,
268         updateTime: null,
269         remarks: null
270       };
271       this.resetForm("form");
272     },
273     /** 搜索按钮操作 */
274     handleQuery() {
275       this.queryParams.pageNum = 1;
276       this.getList();
277     },
278     /** 重置按钮操作 */
279     resetQuery() {
280       this.resetForm("queryForm");
281       this.handleQuery();
282     },
283     // 多选框选中数据
284     handleSelectionChange(selection) {
285       this.ids = selection.map(item => item.id)
286       this.single = selection.length!==1
287       this.multiple = !selection.length
288     },
289     /** 新增按钮操作 */
290     handleAdd() {
291       this.reset();
292       this.open = true;
293       this.titleName = "添加工位终端配置";
294     },
295     /** 修改按钮操作 */
296     handleUpdate(row) {
297       this.reset();
298       const id = row.id || this.ids
299       getStationConf(id).then(response => {
300         this.form = response.data;
301         this.open = true;
302         this.titleName = "修改工位终端配置";
303       });
304     },
305     /** 提交按钮 */
306     submitForm() {
307       this.$refs["form"].validate(valid => {
308         if (valid) {
309           if (this.form.id != null) {
310             updateStationConf(this.form).then(response => {
311               this.$modal.msgSuccess("修改成功");
312               this.open = false;
313               this.getList();
314             });
315           } else {
316             addStationConf(this.form).then(response => {
317               this.$modal.msgSuccess("新增成功");
318               this.open = false;
319               this.getList();
320             });
321           }
322         }
323       });
324     },
325     /** 删除按钮操作 */
326     handleDelete(row) {
327       const ids = row.id || this.ids;
328       this.$modal.confirm('是否确认删除工位终端配置编号为"' + ids + '"的数据项?').then(function() {
329         return delStationConf(ids);
330       }).then(() => {
331         this.getList();
332         this.$modal.msgSuccess("删除成功");
333       }).catch(() => {});
334     },
335     /** 导出按钮操作 */
336     handleExport() {
337       this.download('sc/stationConf/export', {
338         ...this.queryParams
339       }, `stationConf_${new Date().getTime()}.xlsx`)
340     }
341   }
342 };
343 </script>