iot设备修改调试

sgzb-ui/src/views/iotDevice/index.vue

@@ -12,7 +12,7 @@
                 <el-button size="mini" type="primary" @click="handelQuery()"
                     >搜索</el-button
                 >
-                <el-button size="mini" type="primary" @click="addDevice()"
+                <el-button size="mini" type="primary" @click="addDevice(null)"
                     >添加设备</el-button
                 >
                 <el-button size="mini" type="primary" @click="uploadCode()"
@@ -56,7 +56,13 @@
                     >
                 </template>
             </el-table-column>
-            <el-table-column prop="qrCode" align="center" label="二维码" />
+            <el-table-column align="center" label="二维码">
+                <template slot-scope="{ row }">
+                    <el-button type="text" @click="showQrCode(row)"
+                        >查看</el-button
+                    >
+                </template>
+            </el-table-column>
             <el-table-column align="center" label="绑定状态">
                 <template slot-scope="{ row }">
                     <el-tag
@@ -88,6 +94,13 @@
                         @click="handleDeleteAndUnbind(row.iotId, 1)"
                         >删除</el-button
                     >
+                    <el-button
+                        type="text"
+                        icon="el-icon-edit"
+                        style="color: #67c23a"
+                        @click="addDevice(row)"
+                        >修改</el-button
+                    >
                     <el-button
                         type="text"
                         icon="el-icon-document-delete"
@@ -115,7 +128,7 @@
         >
             <!-- 设备添加表单 -->
             <template slot="outerContent">
-                <template v-if="dialogConfig.outerTitle === '添加设备'">
+                <template v-if="dialogConfig.outerTitle !== '绑定记录'">
                     <el-form
                         label-width="80px"
                         :model="addDeviceParams"
@@ -166,12 +179,34 @@
                 />
             </template>
         </DialogModel>
+
+        <!-- 二维码弹框 -->
+        <el-dialog
+            title="查看二维码"
+            :visible.sync="uploadOpen"
+            v-if="uploadOpen"
+            width="500px"
+            append-to-body
+        >
+            <div style="text-align: center">
+                <div class="qrCodeImg">
+                    <div id="qrcode" class="qrcode" ref="codeItem"></div>
+                </div>
+                <div class="maCode">二维码编号：{{ rowObj.qrCode }}</div>
+            </div>
+            <div
+                slot="footer"
+                class="dialog-footer"
+                style="text-align: center"
+            ></div>
+        </el-dialog>
     </div>
 </template>
 
 <script>
 import DialogModel from '@/components/DialogModel' // 弹框组件
 import TableModel from '@/components/TableModel' // 表格组件
+import QRCode from 'qrcodejs2'
 import { dialogConfig } from './config'
 import {
     addDeviceInfoApi,
@@ -198,7 +233,7 @@ export default {
                 pageSize: 10,
                 keyWords: '',
             },
-            // 新增给设备数据源
+            // 新增/修改 设备数据源
             addDeviceParams: {
                 iotType: '',
                 iotCode: '',
@@ -230,6 +265,9 @@ export default {
             selectList: [],
             // 绑定记录Api
             getDeviceBindRecordApi,
+            uploadOpen: false,
+            rowObj: {},
+            qrCode: '',
         }
     },
 
@@ -246,12 +284,18 @@ export default {
         },
         /** 搜索按钮 */
         handelQuery() {
-            this.getDeviceList()
+            this.getDeviceList(this.queryParams)
         },
         /** 添加设备 */
-        addDevice() {
+        addDevice(row) {
+            if (!row) {
+                this.dialogConfig.outerTitle = '添加设备'
+            } else {
+                this.dialogConfig.outerTitle = '修改设备'
+                this.addDeviceParams.iotCode = row.iotCode
+                this.addDeviceParams.iotType = parseInt(row.iotType)
+            }
             this.dialogConfig.outerWidth = '40%'
-            this.dialogConfig.outerTitle = '添加设备'
             this.dialogConfig.outerVisible = true
         },
 
@@ -272,9 +316,12 @@ export default {
                 if (valid) {
                     // 1. 校验通过调后台Api
                     const res = await addDeviceInfoApi(this.addDeviceParams)
-
                     if (res.code === 200) {
-                        this.$message.success('新增成功！')
+                        let title =
+                            this.dialogConfig.outerTitle === '添加设备'
+                                ? '新增'
+                                : '修改'
+                        this.$message.success(`${title}成功！`)
                         this.dialogConfig.outerVisible = false
                         this.addDeviceParams.iotType = ''
                         this.addDeviceParams.iotCode = ''
@@ -303,36 +350,6 @@ export default {
             this.dialogConfig.outerVisible = false
         },
 
-        /** 删除按钮 */
-        handleDelete(id) {
-            this.$confirm('是否确定删除当前设备, 是否继续?', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning',
-            }).then(async () => {
-                const res = await deleteDeviceApi(id)
-                if (res.code === 200) {
-                    this.$message.success('删除成功！')
-                    this.getDeviceList()
-                }
-            })
-        },
-        /** 解绑按钮 */
-        handleUnbind(iotId) {
-            this.$confirm('是否确定解绑当前设备, 是否继续?', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning',
-            }).then(async () => {
-                const res = await unbindDeviceApi({ id: iotId, iotId })
-                console.log('解绑设备', res)
-                if (res.code === 200) {
-                    this.$message.success('解绑成功！')
-                    this.getDeviceList()
-                }
-            })
-        },
-
         /** 删除和解绑设备 */
         handleDeleteAndUnbind(id, type) {
             const title = type === 1 ? '删除' : '解绑'
@@ -370,6 +387,41 @@ export default {
                 }
             })
         },
+
+        /** 查看二维码 */
+        showQrCode(row) {
+            if (!row.qrCode) {
+                this.$message.error('当前设备没有二维码')
+                return
+            }
+            this.rowObj = row
+            this.uploadOpen = true
+            this.qrCode = row.qrCode
+            let str = this.qrUrl + row.qrCode
+            this.$nextTick(() => {
+                this.$refs.codeItem.innerHTML = ''
+                let qrCode = new QRCode(this.$refs.codeItem, {
+                    text: str, //二维码内容
+                    width: 256,
+                    height: 256,
+                    colorDark: '#000000',
+                    colorLight: '#ffffff',
+                    correctLevel: QRCode.CorrectLevel.H,
+                })
+            }, 500)
+        },
     },
 }
 </script>
+
+<style scoped>
+.qrCodeImg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.maCode {
+    margin-top: 15px;
+    font-size: 18px;
+}
+</style>