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