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