春风项目四线(合箱线、总装线)
查看 | 历史 | 提交 | 提交对比
wujian
2024-01-19 23213c63022ee4dd7f4d8f678838865f01e9b2df
提交 | 用户 | 时间
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="module">
6         <el-input
7           v-model="queryParams.module"
8           placeholder="请输入所属模块"
9           clearable
10           @keyup.enter.native="handleQuery"
11         />
12       </el-form-item>
13       <el-form-item label="节点" prop="node">
14         <el-input
15           v-model="queryParams.node"
16           placeholder="请输入节点"
17           clearable
18           @keyup.enter.native="handleQuery"
19         />
20       </el-form-item>
21       <el-form-item label="长度" prop="length">
22         <el-input
23           v-model="queryParams.length"
24           placeholder="请输入长度"
25           clearable
26           @keyup.enter.native="handleQuery"
27         />
28       </el-form-item>
29       <el-form-item label="类型" prop="sysTypes">
30         <el-select v-model="queryParams.sysTypes" placeholder="请选择类型" clearable>
31 <!--          <el-option-->
32 <!--            v-for="dict in dict.type.${dictType}"-->
33 <!--            :key="dict.value"-->
34 <!--            :label="dict.label"-->
35 <!--            :value="dict.value"-->
36 <!--          />-->
37         </el-select>
38       </el-form-item>
39       <el-form-item style="float: right">
40         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
41         <el-button type="warning" icon="el-icon-copy-document" size="mini" @click="advancedQuery">高级查询</el-button>
42         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
43       </el-form-item>
44     </el-form>
45     <el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="advancedShowSearch" label-width="68px">
46       <el-form-item label="订阅响应模块" prop="rModule">
47         <el-input
48           v-model="queryParams.rModule"
49           placeholder="请输入订阅响应模块"
50           clearable
51           @keyup.enter.native="handleQuery"
52         />
53       </el-form-item>
54       <el-form-item label="订阅响应函数" prop="rFunction">
55         <el-input
56           v-model="queryParams.rFunction"
57           placeholder="请输入订阅响应函数"
58           clearable
59           @keyup.enter.native="handleQuery"
60         />
61       </el-form-item>
62       <el-form-item label="功能说明" prop="functionality">
63         <el-input
64           v-model="queryParams.functionality"
65           placeholder="请输入功能说明"
66           clearable
67           @keyup.enter.native="handleQuery"
68         />
69       </el-form-item>
70       <el-form-item label="是否订阅" prop="subscribe">
71         <el-select v-model="queryParams.subscribe" placeholder="请选择是否订阅" clearable>
72           <!--          <el-option-->
73           <!--            v-for="dict in dict.type.${dictType}"-->
74           <!--            :key="dict.value"-->
75           <!--            :label="dict.label"-->
76           <!--            :value="dict.value"-->
77           <!--          />-->
78         </el-select>
79       </el-form-item>
80     </el-form>
81     </el-card>
82
83     <el-card style="margin-top: 10px" class="box-card">
84     <el-row :gutter="10" class="mb8">
85       <el-col :span="1.5">
86         <el-button
87           type="primary"
88           plain
89           icon="el-icon-plus"
90           size="mini"
91           @click="handleAdd"
92           v-hasPermi="['da:opcuaconfig:add']"
93         >新增</el-button>
94       </el-col>
95       <el-col :span="1.5">
96         <el-button
97           type="success"
98           plain
99           icon="el-icon-edit"
100           size="mini"
101           :disabled="single"
102           @click="handleUpdate"
103           v-hasPermi="['da:opcuaconfig:edit']"
104         >修改</el-button>
105       </el-col>
106       <el-col :span="1.5">
107         <el-button
108           type="danger"
109           plain
110           icon="el-icon-delete"
111           size="mini"
112           :disabled="multiple"
113           @click="handleDelete"
114           v-hasPermi="['da:opcuaconfig:remove']"
115         >删除</el-button>
116       </el-col>
117       <el-col :span="1.5">
118         <el-button
119           type="warning"
120           plain
121           icon="el-icon-download"
122           size="mini"
123           @click="handleExport"
124           v-hasPermi="['da:opcuaconfig:export']"
125         >导出</el-button>
126       </el-col>
127       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
128     </el-row>
129
130     <el-table v-loading="loading" border :data="opcuaconfigList" @selection-change="handleSelectionChange" v-if="opcuaconfigList.length > 0">
131       <el-table-column type="selection" width="55" align="center" />
132 <!--      <el-table-column label="ID" align="center" prop="id" />-->
133       <el-table-column label="所属模块" align="center" prop="module">
134 <!--        <template slot-scope="scope">-->
135 <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.module"/>-->
136 <!--        </template>-->
137       </el-table-column>
138       <el-table-column label="节点" align="center" prop="node">
139 <!--        <template slot-scope="scope">-->
140 <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.node"/>-->
141 <!--        </template>-->
142       </el-table-column>
143       <el-table-column label="长度" align="center" prop="length">
144 <!--        <template slot-scope="scope">-->
145 <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.length"/>-->
146 <!--        </template>-->
147       </el-table-column>
148       <el-table-column label="类型" align="center" prop="sysTypes">
149 <!--        <template slot-scope="scope">-->
150 <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.sysTypes"/>-->
151 <!--        </template>-->
152       </el-table-column>
153       <el-table-column label="功能说明" align="center" prop="functionality">
154 <!--        <template slot-scope="scope">-->
155 <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.functionality"/>-->
156 <!--        </template>-->
157       </el-table-column>
158       <el-table-column label="是否订阅" align="center" prop="subscribe">
159 <!--        <template slot-scope="scope">-->
160 <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.subscribe"/>-->
161 <!--        </template>-->
162       </el-table-column>
163       <el-table-column label="订阅响应模块" align="center" prop="rModule">
164 <!--        <template slot-scope="scope">-->
165 <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.rModule"/>-->
166 <!--        </template>-->
167       </el-table-column>
168       <el-table-column label="订阅响应函数" align="center" prop="rFunction">
169 <!--        <template slot-scope="scope">-->
170 <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.rFunction"/>-->
171 <!--        </template>-->
172       </el-table-column>
173       <el-table-column label="备注" align="center" prop="remarks">
174 <!--        <template slot-scope="scope">-->
175 <!--          <dict-tag :options="dict.type.${column.dictType}" :value="scope.row.remarks"/>-->
176 <!--        </template>-->
177       </el-table-column>
178       <el-table-column fixed="right" label="操作" width="200" align="center" class-name="small-padding fixed-width">
179         <template slot-scope="scope">
180           <el-button
181             size="mini"
182             type="success"
183             plain
184             style="width: 72px"
185             icon="el-icon-edit"
186             @click="handleUpdate(scope.row)"
187             v-hasPermi="['da:opcuaconfig:edit']"
188           >修改</el-button>
189           <el-button
190             size="mini"
191             type="danger"
192             plain
193             style="width: 72px"
194             icon="el-icon-delete"
195             @click="handleDelete(scope.row)"
196             v-hasPermi="['da:opcuaconfig:remove']"
197           >删除</el-button>
198         </template>
199       </el-table-column>
200     </el-table>
201       <el-empty v-else>
202         <span slot="description">暂无数据</span>
203       </el-empty>
204     </el-card>
205
206     <pagination
207       v-show="total>0"
208       :total="total"
209       :page.sync="queryParams.pageNum"
210       :limit.sync="queryParams.pageSize"
211       @pagination="getList"
212     />
213
214     <!-- 添加或修改OPCUA参数设置对话框 -->
215     <el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="500px" append-to-body>
216       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
217         <el-form-item label="所属模块" prop="module">
218           <el-input v-model="form.module" placeholder="请输入所属模块" />
219         </el-form-item>
220         <el-form-item label="节点" prop="node">
221           <el-input v-model="form.node" placeholder="请输入节点" />
222         </el-form-item>
223         <el-form-item label="长度" prop="length">
224           <el-input v-model="form.length" placeholder="请输入长度" />
225         </el-form-item>
226         <el-form-item label="类型" prop="sysTypes">
227           <el-select v-model="form.sysTypes" placeholder="请选择类型">
228 <!--            <el-option-->
229 <!--              v-for="dict in dict.type.${dictType}"-->
230 <!--              :key="dict.value"-->
231 <!--              :label="dict.label"-->
232 <!--              :value="dict.value"-->
233 <!--            ></el-option>-->
234           </el-select>
235         </el-form-item>
236         <el-form-item label="功能说明" prop="functionality">
237           <el-input v-model="form.functionality" placeholder="请输入功能说明" />
238         </el-form-item>
239         <el-form-item label="是否订阅" prop="subscribe">
240           <el-select v-model="form.subscribe" placeholder="请选择是否订阅">
241 <!--            <el-option-->
242 <!--              v-for="dict in dict.type.${dictType}"-->
243 <!--              :key="dict.value"-->
244 <!--              :label="dict.label"-->
245 <!--              :value="parseInt(dict.value)"-->
246 <!--            ></el-option>-->
247           </el-select>
248         </el-form-item>
249         <el-form-item label="订阅响应模块" prop="rModule">
250           <el-input v-model="form.rModule" placeholder="请输入订阅响应模块" />
251         </el-form-item>
252         <el-form-item label="订阅响应函数" prop="rFunction">
253           <el-input v-model="form.rFunction" placeholder="请输入订阅响应函数" />
254         </el-form-item>
255         <el-form-item label="备注" prop="remarks">
256           <el-input v-model="form.remarks" placeholder="请输入备注" />
257         </el-form-item>
258       </el-form>
259       <div slot="footer" class="dialog-footer">
260         <el-button type="primary" @click="submitForm">确 定</el-button>
261         <el-button @click="cancel">取 消</el-button>
262       </div>
263     </el-dialog>
264   </div>
265 </template>
266
267 <script>
268 import { listOpcuaconfig, getOpcuaconfig, delOpcuaconfig, addOpcuaconfig, updateOpcuaconfig } from "@/api/main/da/opcuaconfig/opcuaconfig";
269
270 export default {
271   name: "Opcuaconfig",
272   data() {
273     return {
274       // 遮罩层
275       loading: true,
276       // 选中数组
277       ids: [],
278       // 非单个禁用
279       single: true,
280       // 非多个禁用
281       multiple: true,
282       // 显示搜索条件
283       showSearch: true,
284       // 总条数
285       total: 0,
286       // OPCUA参数设置表格数据
287       opcuaconfigList: [],
288       advancedShowSearch: false,
289       // 弹出层标题
290       title: "",
291       // 是否显示弹出层
292       open: false,
293       // 查询参数
294       queryParams: {
295         pageNum: 1,
296         pageSize: 10,
297         module: null,
298         node: null,
299         length: null,
300         sysTypes: null,
301         functionality: null,
302         subscribe: null,
303         rModule: null,
304         rFunction: null,
305       },
306       // 表单参数
307       form: {},
308       // 表单校验
309       rules: {
310         id: [
311           { required: true, message: "ID不能为空", trigger: "blur" }
312         ],
313       }
314     };
315   },
316   created() {
317     this.getList();
318   },
319   methods: {
320     advancedQuery(){
321       this.advancedShowSearch = (this.advancedShowSearch) ? this.advancedShowSearch = false : this.advancedShowSearch = true;
322     },
323     /** 查询OPCUA参数设置列表 */
324     getList() {
325       this.loading = true;
326       listOpcuaconfig(this.queryParams).then(response => {
327         this.opcuaconfigList = response.rows;
328         this.total = response.total;
329         this.loading = false;
330       });
331     },
332     // 取消按钮
333     cancel() {
334       this.open = false;
335       this.reset();
336     },
337     // 表单重置
338     reset() {
339       this.form = {
340         id: null,
341         module: null,
342         node: null,
343         length: null,
344         sysTypes: null,
345         functionality: null,
346         subscribe: null,
347         rModule: null,
348         rFunction: null,
349         remarks: null
350       };
351       this.resetForm("form");
352     },
353     /** 搜索按钮操作 */
354     handleQuery() {
355       this.queryParams.pageNum = 1;
356       this.getList();
357     },
358     /** 重置按钮操作 */
359     resetQuery() {
360       this.resetForm("queryForm");
361       this.handleQuery();
362     },
363     // 多选框选中数据
364     handleSelectionChange(selection) {
365       this.ids = selection.map(item => item.id)
366       this.single = selection.length!==1
367       this.multiple = !selection.length
368     },
369     /** 新增按钮操作 */
370     handleAdd() {
371       this.reset();
372       this.open = true;
373       this.title = "添加OPCUA参数设置";
374     },
375     /** 修改按钮操作 */
376     handleUpdate(row) {
377       this.reset();
378       const id = row.id || this.ids
379       getOpcuaconfig(id).then(response => {
380         this.form = response.data;
381         this.open = true;
382         this.title = "修改OPCUA参数设置";
383       });
384     },
385     /** 提交按钮 */
386     submitForm() {
387       this.$refs["form"].validate(valid => {
388         if (valid) {
389           if (this.form.id != null) {
390             updateOpcuaconfig(this.form).then(response => {
391               this.$modal.msgSuccess("修改成功");
392               this.open = false;
393               this.getList();
394             });
395           } else {
396             addOpcuaconfig(this.form).then(response => {
397               this.$modal.msgSuccess("新增成功");
398               this.open = false;
399               this.getList();
400             });
401           }
402         }
403       });
404     },
405     /** 删除按钮操作 */
406     handleDelete(row) {
407       const ids = row.id || this.ids;
408       this.$modal.confirm('是否确认删除OPCUA参数设置编号为"' + ids + '"的数据项？').then(function() {
409         return delOpcuaconfig(ids);
410       }).then(() => {
411         this.getList();
412         this.$modal.msgSuccess("删除成功");
413       }).catch(() => {});
414     },
415     /** 导出按钮操作 */
416     handleExport() {
417       this.download('da/opcuaconfig/export', {
418         ...this.queryParams
419       }, `opcuaconfig_${new Date().getTime()}.xlsx`)
420     }
421   }
422 };
423 </script>