IOT设备管理联调

sgzb-ui/src/api/store/iotManagement.js

@@ -0,0 +1,81 @@
+import request from '@/utils/request'
+
+// 新增或修改IOT
+export function addOrUpdate(data) {
+  return request({
+    url: '/material/iotMachine/addOrUpdate',
+    method: 'post',
+    data,
+  })
+}
+
+// IOT列表
+export function getIotList(params = {}) {
+  return request({
+    url: '/material/iotMachine/getIotList',
+    method: 'get',
+    params,
+  })
+}
+
+// 删除IOT /iotMachine/deleteById/{iotId}
+export function deleteIotById(params) {
+  return request({
+    url: '/material/iotMachine/deleteById/' + params,
+    method: 'delete',
+  })
+}
+
+// IOT下拉列表 /iotMachine/selectList
+export function selectList(params = {}) {
+  return request({
+    url: '/material/iotMachine/selectList',
+    method: 'get',
+    params,
+  })
+}
+
+// 绑定IOT /iotMachine/bind
+export function bindIot(data) {
+  return request({
+    url: '/material/iotMachine/bind',
+    method: 'post',
+    data,
+  })
+}
+
+// 解绑IOT /iotMachine/unbind
+export function unbindIot(data) {
+  return request({
+    url: '/material/iotMachine/unbind',
+    method: 'post',
+    data,
+  })
+}
+
+// 获取绑定IOT列表 /iotMachine/getTypeList
+export function getTypeList(params = {}) {
+  return request({
+    url: '/material/iotMachine/getTypeList',
+    method: 'get',
+    params,
+  })
+}
+
+// 绑定详情 /iotMachine/getRecordList
+export function getRecordList(params = {}) {
+  return request({
+    url: '/material/iotMachine/getRecordList',
+    method: 'get',
+    params,
+  })
+}
+
+// 所有绑定详情 /iotMachine/getRecordListAll
+export function getRecordListAll(params = {}) {
+  return request({
+    url: '/material/iotMachine/getRecordListAll',
+    method: 'get',
+    params,
+  })
+}

sgzb-ui/src/views/warehouseManage/machinery/IOTequipment/component/BindDetails.vue

@@ -22,13 +22,14 @@
         width="55"
         :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
       />
-      <el-table-column label="绑定设备名称" prop="name" align="center" />
+      <el-table-column label="绑定设备名称" prop="typeName" align="center" />
-      <el-table-column label="设备编号" prop="code" align="center" />
+      <el-table-column label="设备编号" prop="maCode" align="center" />
       <el-table-column label="绑定日期" prop="bindTime" align="center" />
-      <el-table-column label="解绑日期" prop="unbindTime" align="center" />
+      <el-table-column label="解绑日期" prop="unBindTime" align="center" />
     </el-table>
 
     <pagination
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -39,6 +40,8 @@
 
 <script>
 import PageHeader from '@/components/pageHeader'
+import { getRecordList } from '@/api/store/iotManagement'
+
 export default {
   name: 'BindDetails',
   props: {
@@ -46,6 +49,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    iotId: {
+      type: Number,
+      default: '',
+    },
   },
   components: {
     PageHeader,
@@ -61,14 +68,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
       },
-      tableData: [
+      tableData: [],
-        {
-          name: '设备1',
-          code: '001',
-          bindTime: '2021-08-01',
-          unbindTime: '2021-08-02',
-        },
-      ],
       pageContent: '绑定详情',
     }
   },
@@ -80,22 +80,20 @@ export default {
       console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.keyWord)
       this.getList()
     },
-    getList() {
+    async getList() {
-      const params = {
+      try {
-        keyWord: this.queryForm.keyWord || '',
+        const params = {
-        pageNum: this.queryParams.pageNum,
+          keyWord: this.queryForm.keyWord,
-        pageSize: this.queryParams.pageSize,
+          iotId: this.iotId,
+          ...this.queryParams
+        }
+        console.log('🚀 ~ getList ~ 获取列表', params)
+        const res = await getRecordList(params)
+        this.tableData = res.rows
+        this.total = res.total
+      } catch (err) {
+        console.log('🚀 ~ getList ~ err', err)
       }
-      console.log('🚀 ~ getList ~ 获取列表', params)
-
-      // 接口(params)
-      //   .then(res => {
-      //     this.tableData = res.data
-      //     this.total = res.total
-      //   })
-      //   .catch(err => {
-      //     console.log('🚀 ~ getList ~ err:', err)
-      //   })
     },
     goBack() {
       this.$tab.refreshPage()

sgzb-ui/src/views/warehouseManage/machinery/IOTequipment/index.vue

@@ -24,31 +24,55 @@
         width="55"
         :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
       />
-      <el-table-column label="设备类型" prop="type" align="center" />
+      <el-table-column label="设备类型" prop="iotTypeName" align="center" />
-      <el-table-column label="设备编号" prop="code" align="center" />
+      <el-table-column label="设备编号" prop="iotCode" align="center" />
-      <el-table-column label="设备状态" prop="equipmentStatus" align="center" />
+      <el-table-column label="设备状态" prop="iotStatus" align="center">
-      <el-table-column label="二维码" align="center">
+        <template v-slot="{ row }">
+          <el-tag v-if="row.iotStatus == 0" type="success">在线</el-tag>
+          <el-tag v-else type="danger">掉线</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="prCode" label="二维码" align="center">
         <template v-slot="{ row }">
           <el-button type="text" size="small" @click="showQrCode(row)">查看</el-button>
         </template>
       </el-table-column>
       <el-table-column label="状态" align="center">
         <template v-slot="{ row }">
-          <el-tag v-if="row.status == '已绑定'" type="success">{{ row.status }}</el-tag>
+          <el-tag v-if="row.bindStatus == 0" type="success">已绑定</el-tag>
-          <el-tag v-else type="danger">{{ row.status }}</el-tag>
+          <el-tag v-else type="danger">未绑定</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template v-slot="{ row }">
-          <el-button type="text" size="small" @click="handleCheck(row)">记录</el-button>
+          <el-button type="text" size="small" @click="handleCheck(row)" icon="el-icon-view">记录</el-button>
-          <el-button type="text" size="small" @click="handleEdit(row)">修改</el-button>
+          <el-button type="text" size="small" @click="handleEdit(row)" icon="el-icon-edit-outline">修改</el-button>
-          <el-button type="text" size="small" style="color: red" @click="handleDelete(row)">删除</el-button>
+          <el-button
-          <el-button type="text" size="small" style="color: red" @click="handleUnbind(row)">解绑</el-button>
+            type="text"
+            size="small"
+            style="color: red"
+            @click="handleDelete(row)"
+            v-if="row.bindStatus == 1"
+            icon="el-icon-delete"
+          >
+            删除
+          </el-button>
+          <el-button
+            type="text"
+            size="small"
+            style="color: red"
+            @click="handleUnbind(row)"
+            v-if="row.bindStatus == 0"
+            icon="el-icon-connection"
+          >
+            解绑
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -69,13 +93,23 @@
     <!-- 添加/修改 设备弹框 -->
     <el-dialog :title="title" :visible.sync="IOTOpen" width="500px" append-to-body>
       <el-form :model="IOTForm" ref="IOTForm" label-width="120px" size="small" :rules="rules">
-        <el-form-item label="设备类型" prop="type">
+        <el-form-item label="设备类型: " prop="iotType">
-          <el-select v-model="IOTForm.type" filterable clearable placeholder="请选择设备类型" style="width: 280px">
+          <el-select v-model="IOTForm.iotType" filterable clearable placeholder="请选择设备类型" style="width: 280px">
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
-        <el-form-item label="设备编号" prop="code">
+        <el-form-item label="设备编号: " prop="iotCode">
-          <el-input v-model="IOTForm.code" clearable placeholder="请输入设备编号" style="width: 280px" />
+          <el-input v-model="IOTForm.iotCode" clearable placeholder="请输入设备编号" style="width: 280px" />
+        </el-form-item>
+        <!-- 修改设备状态: 使用Switch开关 -->
+        <el-form-item label="设备状态: " prop="iotStatus" v-if="isEdit">
+          <el-switch
+            v-model="IOTForm.iotStatus"
+            active-text="在线"
+            inactive-text="掉线"
+            :active-value="0"
+            :inactive-value="1"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -85,13 +119,14 @@
     </el-dialog>
   </div>
   <div v-else>
-    <BindDetails ref="bindDetails" :isShow="isShow" />
+    <BindDetails ref="bindDetails" :isShow="isShow" :iotId="iotId" />
   </div>
 </template>
 
 <script>
 import BindDetails from './component/BindDetails'
 import QRCode from 'qrcodejs2'
+import { addOrUpdate, getIotList, deleteIotById, getRecordListAll, unbindIot } from '@/api/store/iotManagement.js'
 export default {
   name: 'IOTequipment',
   components: {
@@ -113,44 +148,28 @@ export default {
         pageNum: 1,
         pageSize: 10,
       },
-      tableData: [
+      tableData: [],
-        {
-          id: 1,
-          type: '设备1',
-          code: '001',
-          equipmentStatus: '正常',
-          qrCode: '2024-0701',
-          status: '已绑定',
-        },
-        {
-          id: 2,
-          type: '设备2',
-          code: '002',
-          equipmentStatus: '正常',
-          qrCode: '2024-0702',
-          status: '未绑定',
-        },
-      ],
       IOTForm: {
-        type: '',
+        iotType: '',
-        code: '',
+        iotCode: '',
+        iotStatus: '',
       },
       options: [
         {
-          value: '1',
+          value: '125',
-          label: '设备1',
+          label: '定位设备',
         },
         {
-          value: '2',
+          value: '126',
-          label: '设备2',
+          label: '检测设备',
         },
       ],
       title: '',
       IOTOpen: false,
       // 校验
       rules: {
-        type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
+        iotType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
-        code: [
+        iotCode: [
           { required: true, message: '请输入设备编号', trigger: 'blur' },
           {
             // 限制输入字母数字 短横线(-) 下划线(_)
@@ -160,6 +179,8 @@ export default {
           },
         ],
       },
+      isEdit: false,
+      iotId: undefined,
     }
   },
   created() {
@@ -178,14 +199,14 @@ export default {
       }
       console.log('🚀 ~ getList ~ 获取列表', params)
 
-      // 接口(params)
+      getIotList(params)
-      //   .then(res => {
+        .then(res => {
-      //     this.tableData = res.data
+          this.tableData = res.rows
-      //     this.total = res.total
+          this.total = res.total
-      //   })
+        })
-      //   .catch(err => {
+        .catch(err => {
-      //     console.log('🚀 ~ getList ~ err:', err)
+          console.log('🚀 ~ getList ~ err:', err)
-      //   })
+        })
     },
     // 获取设备类型
     getDeviceType() {
@@ -200,11 +221,12 @@ export default {
     addIOT() {
       this.title = '添加设备'
       this.IOTOpen = true
+      this.isEdit = false
       this.getDeviceType()
       this.$nextTick(() => {
         this.IOTForm = {
-          type: '',
+          iotType: '',
-          code: '',
+          iotCode: '',
         }
         this.$refs.IOTForm.resetFields()
       })
@@ -215,10 +237,10 @@ export default {
         cancelButtonText: '取消',
         type: 'warning',
       }).then(() => {
-        this.$message({
+        // this.$message({
-          type: 'success',
+        //   type: 'success',
-          message: '下载成功',
+        //   message: '下载成功',
-        })
+        // })
       })
     },
     showQrCode(row) {
@@ -231,6 +253,7 @@ export default {
       this.uploadOpen = true
       this.qrCode = row.qrCode
       let str = this.qrUrl + row.qrCode
+      console.log('🚀 ~ showQrCode ~ str:', str)
       this.$nextTick(() => {
         this.$refs.codeItem.innerHTML = ''
         var qrcode = new QRCode(this.$refs.codeItem, {
@@ -247,32 +270,87 @@ export default {
     handleCheck(row) {
       console.log('🚀 ~ handleCheck ~ 记录:', row)
       this.isShow = true
+      this.iotId = row.iotId
     },
     handleEdit(row) {
       console.log('🚀 ~ handleEdit ~ 修改:', row)
       // 修改IOT设备
       this.title = '修改设备'
       this.IOTOpen = true
+      this.isEdit = true
       this.getDeviceType()
-      this.IOTForm = {
+      this.$nextTick(() => {
-        type: row.type,
+        this.$refs.IOTForm.resetFields()
-        code: row.code,
+        this.IOTForm = {
-      }
+          iotId: row.iotId,
+          iotType: row.iotType,
+          iotCode: row.iotCode,
+          iotStatus: row.iotStatus,
+        }
+      })
     },
     handleDelete(row) {
       console.log('🚀 ~ handleDelete ~ 删除:', row)
-      const params = {
+      // 弹框提示
-        id: row.id,
+      this.$confirm('是否删除该设备？', '系统提示', {
-      }
+        confirmButtonText: '确定',
-      // 接口(params).then(res => {
+        cancelButtonText: '取消',
-      //   this.getList()
+        type: 'warning',
-      // })
+      })
+        .then(() => {
+          // 删除
+          deleteIotById(row.iotId).then(res => {
+            // 提示
+            this.$message({
+              type: 'success',
+              message: '删除成功',
+            })
+            this.getList()
+          })
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除',
+          })
+        })
     },
     handleUnbind(row) {
-      const params = {
+      try {
-        id: row.id,
+        const params = {
+          id: undefined,
+          iotId: row.iotId,
+          maCode: '',
+          typeId: undefined,
+        }
+        console.log('🚀 ~ handleUnbind ~ 解绑', row)
+        this.$confirm('确定解绑设备吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+          .then(async () => {
+            let { data } = await getRecordListAll({ iotId: params.iotId })
+            console.log('🚀 ~ .then ~ res:', data)
+            data.forEach(item => {
+              if (!item.unBindTime) {
+                params.maCode = item.maCode
+                params.typeId = item.typeId
+                params.id = item.id
+              }
+            })
+            console.log('🚀 ~ .then ~ maCode:', params)
+            await unbindIot(params)
+            this.$message.success('解绑成功')
+            this.getList()
+          })
+          .catch((err) => {
+            console.log('🚀 ~ handleUnbind ~ err:', err)
+            this.$message.info('已取消解绑')
+          })
+      } catch (err) {
+        console.log('🚀 ~ handleUnbind ~ error', err)
       }
-      console.log('🚀 ~ handleUnbind ~ 解绑', row)
     },
     selectionChange(val) {
       console.log('🚀 ~ selectionChange ~ val:', val)
@@ -282,18 +360,31 @@ export default {
       this.$refs.IOTForm.validate(valid => {
         if (valid) {
           console.log('🚀 ~ submit ~ 确认提交', this.IOTForm)
-          const params = {
+          let params = {}
-            type: this.IOTForm.type,
+          if (this.isEdit) {
-            code: this.IOTForm.code,
+            // 修改
+            params = {
+              ...this.IOTForm,
+            }
+          } else {
+            // 添加
+            params = {
+              ...this.IOTForm,
+            }
           }
-          // 接口(params)
+          addOrUpdate(params)
-          //   .then(res => {
+            .then(res => {
-          //     this.IOTOpen = false
+              this.IOTOpen = false
-          //     this.getList()
+              // 提示 isEdit ? '修改成功' : '添加成功'
-          //   })
+              this.$message({
-          //   .catch(err => {
+                type: 'success',
-          //     console.log('🚀 ~ submit ~ err:', err
+                message: this.isEdit ? '修改成功' : '添加成功',
-          //   })
+              })
+              this.getList()
+            })
+            .catch(err => {
+              console.log('🚀 ~ submit ~ err:', err)
+            })
         }
       })
     },

sgzb-ui/src/views/warehouseManage/machinery/coding/component/BindIOT.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container" v-if="isShow">
+  <div class="app-container" v-if="props.isShow">
     <PageHeader :pageContent="pageContent" @goBack="goBack" />
     <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="68px" v-show="showSearch">
       <el-form-item label="关键字" prop="keyWord">
@@ -23,19 +23,26 @@
         width="55"
         :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
       />
-      <el-table-column label="设备类型" prop="type" align="center" />
+      <el-table-column label="设备类型" prop="iotTypeName" align="center" />
-      <el-table-column label="设备编号" prop="code" align="center" />
+      <el-table-column label="设备编号" prop="iotCode" align="center" />
-      <el-table-column label="设备状态" prop="bindTime" align="center" />
+      <el-table-column label="设备状态" prop="iotStatus" align="center">
-      <el-table-column label="绑定日期" prop="unbindTime" align="center" />
+        <!-- iotStatus 0 在线 1 掉线 -->
+        <template v-slot="{ row }">
+          <el-tag v-if="row.iotStatus == 0" type="success">在线</el-tag>
+          <el-tag v-else type="danger">掉线</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="绑定日期" prop="bindTime" align="center" />
 
       <el-table-column label="操作" align="center">
         <template v-slot="{ row }">
-          <el-button type="text" size="small" @click="handleUnbind(row)" style="color: red;">解绑</el-button>
+          <el-button type="text" size="small" @click="handleUnbind(row)" style="color: red" icon="el-icon-connection">解绑</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -45,20 +52,32 @@
     <!-- 绑定设备 -->
     <el-dialog title="绑定设备" :visible.sync="IOTOpen" width="500px" append-to-body :rules="rules">
       <el-form :model="IOTForm" ref="IOTForm" label-width="120px" size="small" :rules="rules">
-        <el-form-item label="设备类型" prop="type">
+        <el-form-item label="设备类型" prop="iotType">
-          <el-select v-model="IOTForm.type" filterable clearable placeholder="请选择" style="width: 280px">
+          <el-select
-            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            v-model="IOTForm.iotType"
+            filterable
+            clearable
+            placeholder="请选择"
+            style="width: 280px"
+            @change="changeIotType"
+          >
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.iotTypeId"
+              :label="item.iotTypeName"
+              :value="item.iotTypeId"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item label="设备编号" prop="code">
+        <el-form-item label="设备编号" prop="iotId">
-          <el-select v-model="IOTForm.code" filterable clearable placeholder="请选择" style="width: 280px">
+          <el-select v-model="IOTForm.iotId" filterable clearable placeholder="请选择" style="width: 280px">
-            <el-option v-for="item in codeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            <el-option v-for="item in codeOptions" :key="item.iotId" :label="item.iotCode" :value="item.iotId" />
           </el-select>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="IOTOpen = false">取 消</el-button>
-        <el-button type="primary" @click="submit">确 定</el-button>
+        <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
       </div>
     </el-dialog>
   </div>
@@ -66,12 +85,14 @@
 
 <script>
 import PageHeader from '@/components/pageHeader'
+import { selectList, bindIot, getTypeList, unbindIot } from '@/api/store/iotManagement'
+
 export default {
   name: 'BindIOT',
   props: {
-    isShow: {
+    props: {
-      type: Boolean,
+      type: Object,
-      default: false,
+      default: () => {},
     },
   },
   components: {
@@ -79,6 +100,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       showSearch: true, // 是否显示搜索
       queryForm: {
         keyWord: '',
@@ -88,116 +110,140 @@ export default {
         pageNum: 1,
         pageSize: 10,
       },
-      tableData: [
+      tableData: [],
-        {
-          name: '设备1',
-          code: '001',
-          bindTime: '2021-08-01',
-          unbindTime: '2021-08-02',
-        },
-      ],
       pageContent: 'IOT设备查看',
       IOTForm: {
-        type: '',
+        iotType: '',
-        code: '',
+        iotId: '',
       },
       IOTOpen: false,
-      typeOptions: [
+      typeOptions: [], // 设备类型下拉
-        {
+      codeOptions: [], // 设备编号下拉
-          value: '1',
-          label: '设备1',
-        },
-        {
-          value: '2',
-          label: '设备2',
-        },
-      ],
-      codeOptions: [
-        {
-          value: '001',
-          label: '001',
-        },
-        {
-          value: '002',
-          label: '002',
-        },
-      ],
       rules: {
-        type: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
+        iotType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
-        code: [{ required: true, message: '请选择设备编号', trigger: 'change' }],
+        iotId: [{ required: true, message: '请选择设备编号', trigger: 'change' }],
       },
     }
   },
   created() {
+    console.log('🚀 ~ created ~ BindIOT', this.props)
     this.getList()
   },
   methods: {
+    // 查询
     handleQuery() {
       console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.keyWord)
       this.getList()
     },
-    getList() {
+    // 获取列表
-      const params = {
+    async getList() {
-        keyWord: this.queryForm.keyWord || '',
+      try {
-        pageNum: this.queryParams.pageNum,
+        const params = {
-        pageSize: this.queryParams.pageSize,
+          maCode: this.props.maCode,
-      }
+          ...this.queryForm,
-      console.log('🚀 ~ getList ~ 获取列表', params)
+          ...this.queryParams,
+        }
+        console.log('🚀 ~ getList ~ 获取列表', params)
 
-      // 接口(params)
+        const res = await getTypeList(params)
-      //   .then(res => {
+        this.tableData = res.rows
-      //     this.tableData = res.data
+        this.total = res.total
-      //     this.total = res.total
+      } catch (err) {
-      //   })
+        console.log('🚀 ~ getList ~ err:', err)
-      //   .catch(err => {
+      }
-      //     console.log('🚀 ~ getList ~ err:', err)
-      //   })
     },
+    // 返回
     goBack() {
       this.$tab.refreshPage()
     },
+    // 绑定新设备
     bindNewIOT() {
       console.log('🚀 ~ bindNewIOT ~ 绑定新设备')
       this.IOTOpen = true
-      this.getOptions()
+      this.getIotType()
       this.$nextTick(() => {
         this.$refs.IOTForm.resetFields()
       })
     },
-    handleUnbind() {
+    // 解绑
-      console.log('🚀 ~ handleUnbind ~ 解绑')
+    handleUnbind(row) {
-    },
+      console.log('🚀 ~ handleUnbind ~ 解绑', row)
-    submit() {
+      try {
-      console.log('🚀 ~ submit ~ 提交绑定设备')
+        const params = {
-      const params = {
+          maCode: this.props.maCode,
-        type: this.IOTForm.type,
+          typeId: this.props.typeId,
-        code: this.IOTForm.code,
+          id: row.id,
-      }
+          iotId: row.iotId,
-      // 校验
-      this.$refs.IOTForm.validate(valid => {
-        if (valid) {
-          console.log('🚀 ~ submit ~ 提交绑定设备', params)
-          // 接口(params)
-          //   .then(res => {
-          //     this.IOTOpen = false
-          //     this.getList()
-          //   })
-          //   .catch(err => {
-          //     console.log('🚀 ~ submit ~ err:', err)
-          //   })
-        } else {
-          return false
         }
-      })
+        this.$confirm('确定解绑设备吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+          .then(async () => {
+            await unbindIot(params)
+            this.$message.success('解绑成功')
+            this.getList()
+          })
+          .catch(() => {
+            this.$message.info('已取消解绑')
+          })
+      } catch (err) {
+        console.log('🚀 ~ handleUnbind ~ err:', err)
+      }
+    },
+    // 提交
+    submit() {
+      try {
+        // 校验
+        this.$refs.IOTForm.validate(async valid => {
+          if (valid) {
+            this.loading = true
+            const params = {
+              iotTypeId: this.IOTForm.iotType,
+              iotId: this.IOTForm.iotId,
+              maCode: this.props.maCode,
+              typeId: this.props.typeId,
+            }
+            console.log('🚀 ~ submit ~ 提交绑定设备', params, this.props)
+            await bindIot(params)
+            this.$message.success('绑定成功')
+            this.IOTOpen = false
+            this.loading = false
+            this.getList()
+          } else {
+            return false
+          }
+        })
+      } catch (err) {
+        console.log('🚀 ~ submit ~ err:', err)
+        this.loading = false
+      }
     },
     // 获取下拉
-    getOptions() {
+    async getIotType() {
-      // 接口().then(res => {
+      try {
-      //   this.typeOptions = res.typeOptions
+        const res = await selectList()
-      //   this.codeOptions = res.codeOptions
+        this.typeOptions = res.data
-      // }).catch(err => {
+      } catch (err) {
-      //   console.log('🚀 ~ getOptions ~ err:', err)
+        console.log('🚀 ~ getIotType ~ err:', err)
-      // })
+      }
+    },
+    // 设备类型改变
+    async changeIotType(iotTypeId) {
+      try {
+        this.codeOptions = []
+        this.IOTForm.iotId = ''
+        if (!iotTypeId) return
+        const params = {
+          iotTypeId,
+        }
+        // 获取设备编号
+        const res = await selectList(params)
+        this.codeOptions = res.data
+      } catch (err) {
+        console.log('🚀 ~ changeIotType ~ err:', err)
+      }
     },
   },
 }

sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 编码设备管理 -->
-    <div class="app-container" id="devices" v-if="!isShow">
+    <div class="app-container" id="devices" v-if="!props.isShow">
         <el-form
             :model="queryParams"
             ref="queryForm"
@@ -547,7 +547,7 @@
         <MapDialog ref="mapDialog" @getList="getList" />
     </div>
     <div v-else>
-        <BindIOT :isShow="isShow" />
+        <BindIOT :props="props" />
     </div>
 </template>
 
@@ -579,6 +579,11 @@ export default {
         return {
             openMap: false,
             isShow: false,
+            props: {
+                isShow: false,
+                typeId: '',
+                maCode: '',
+            },
             // 遮罩层
             loading: true,
             // 选中数组
@@ -827,7 +832,12 @@ export default {
             }, `编码设备管理_${new Date().getTime()}.xlsx`)
         },
         handleBindIOT(row) {
-            this.isShow = true
+            console.log('🚀 ~ handleBindIOT ~ row:', row)
+            this.props = {
+                isShow: true,
+                typeId: row.typeId,
+                maCode: row.maCode,
+            }
         },
         handleMap(row) {
             console.log('~ handleMap ~ 地图', row)

sgzb-ui/vue.config.js

@@ -46,7 +46,7 @@ module.exports = {
         // target: `http://10.40.92.8:8080`, //超
         // target: `http://10.40.92.81:8080`, //韩/
         // target: `http://10.40.92.74:8080`,//旭/
-        target: `http://192.168.2.246:28080`, //帅
+        target: `http://192.168.2.248:28080`, //帅
         // target: `http://10.40.92.253:28080`, //福
 
         //******** 注意事项  ********* */