feat: device replacement

src/api/device.js

@@ -87,6 +87,14 @@ export function updateDevice (data) {
   })
 }
 
+export function replaceDevice (id, data) {
+  return update({
+    url: `/device/${id}/replace`,
+    method: 'POST',
+    data
+  })
+}
+
 function deleteDeviceById (id) {
   return messageSend({
     url: `/device/${id}`,

src/views/external/box/components/Device.vue

@@ -9,75 +9,102 @@
       :title="dialogTitle"
       @confirm="onSave"
     >
-      <div class="c-grid-form u-align-self--center">
-        <span class="c-grid-form__label u-required">名称</span>
-        <el-input
-          v-model.trim="currObj.name"
-          placeholder="最多30个字符"
-          maxlength="30"
-          clearable
-        />
-        <span class="c-grid-form__label u-required">配置</span>
-        <schema-select
-          v-model="currObj.productId"
-          class="u-width"
-          :schema="productSelectSchema"
-          placeholder="请选择配置"
-        />
-        <span class="c-grid-form__label u-required">型号</span>
-        <el-autocomplete
-          v-model="currObj.remark"
-          class="u-width"
-          :fetch-suggestions="querySearch"
-          placeholder="播控器的系列或型号"
-        />
-        <span class="c-grid-form__label u-required">序列号</span>
-        <el-input
-          v-model.trim="currObj.serialNumber"
-          placeholder="最多50个字符"
-          maxlength="50"
-          clearable
-        />
-        <span class="c-grid-form__label u-required">MAC</span>
-        <el-input
-          v-model.trim="currObj.mac"
-          class="u-width--sm"
-          placeholder="ff:ff:ff:ff:ff:ff"
-          maxlength="17"
-          clearable
-        />
-        <div class="c-grid-form__label u-required">开关机时间</div>
-        <el-time-picker
-          v-model="currObj.range"
-          class="u-width u-pointer"
-          is-range
-          value-format="HH:mm:ss"
-          :clearable="false"
-        />
-        <span class="c-grid-form__label u-required">地址</span>
-        <el-input
-          v-model.trim="currObj.address"
-          type="textarea"
-          placeholder="最多100个字符"
-          maxlength="100"
-          :rows="2"
-          show-word-limit
-        />
-        <span class="c-grid-form__label">坐标</span>
-        <div class="l-flex--row c-grid-form__option">
-          <span class="c-sibling-item">{{ currObj.longitude }},{{ currObj.latitude }}</span>
-          <i
-            class="c-sibling-item el-icon-edit u-color--blue has-active"
-            @click="onEditCoordinate"
+      <template #default>
+        <div class="c-grid-form u-align-self--center">
+          <span class="c-grid-form__label u-required">名称</span>
+          <el-input
+            v-model.trim="currObj.name"
+            placeholder="最多30个字符"
+            maxlength="30"
+            clearable
           />
+          <span class="c-grid-form__label u-required">配置</span>
+          <schema-select
+            v-model="currObj.productId"
+            class="u-width"
+            :schema="productSelectSchema"
+            placeholder="请选择配置"
+          />
+          <span class="c-grid-form__label u-required">型号</span>
+          <el-autocomplete
+            v-model="currObj.remark"
+            class="u-width"
+            :fetch-suggestions="querySearch"
+            placeholder="播控器的系列或型号"
+          />
+          <span class="c-grid-form__label u-required">序列号</span>
+          <el-input
+            v-model.trim="currObj.serialNumber"
+            placeholder="最多50个字符"
+            maxlength="50"
+            clearable
+          />
+          <span class="c-grid-form__label u-required">MAC</span>
+          <el-input
+            v-model.trim="currObj.mac"
+            class="u-width--sm"
+            placeholder="ff:ff:ff:ff:ff:ff"
+            maxlength="17"
+            clearable
+          />
+          <div class="c-grid-form__label u-required">开关机时间</div>
+          <el-time-picker
+            v-model="currObj.range"
+            class="u-width u-pointer"
+            is-range
+            value-format="HH:mm:ss"
+            :clearable="false"
+          />
+          <span class="c-grid-form__label u-required">地址</span>
+          <el-input
+            v-model.trim="currObj.address"
+            type="textarea"
+            placeholder="最多100个字符"
+            maxlength="100"
+            :rows="2"
+            show-word-limit
+          />
+          <span class="c-grid-form__label">坐标</span>
+          <div class="l-flex--row c-grid-form__option">
+            <span class="c-sibling-item">{{ currObj.longitude }},{{ currObj.latitude }}</span>
+            <i
+              class="c-sibling-item el-icon-edit u-color--blue has-active"
+              @click="onEditCoordinate"
+            />
+          </div>
         </div>
-      </div>
+      </template>
     </confirm-dialog>
     <coordinate-dialog
       ref="coordinateDialog"
       @confirm="onChangeCoordinate"
     />
     <mesh-dialog ref="meshDialog" />
+    <confirm-dialog
+      ref="replaceDialog"
+      title="设备替换"
+      @confirm="onConfirmReplace"
+    >
+      <template #default>
+        <div class="c-grid-form u-align-self--center">
+          <span class="c-grid-form__label u-required">序列号</span>
+          <el-input
+            v-model.trim="currObj.serialNumber"
+            placeholder="最多50个字符"
+            maxlength="50"
+            clearable
+          />
+          <span class="c-grid-form__label u-required">MAC</span>
+          <el-input
+            v-model.trim="currObj.mac"
+            class="u-width--sm"
+            placeholder="ff:ff:ff:ff:ff:ff"
+            maxlength="17"
+            clearable
+          />
+        </div>
+      </template>
+    </confirm-dialog>
   </schema-table>
 </template>
 
@@ -97,7 +124,8 @@ import {
   activateDevice,
   deactivateDevice,
   getProducts,
-  updateDevice
+  updateDevice,
+  replaceDevice
 } from '@/api/device'
 import MeshDialog from '../../components/MeshDialog.vue'
 
@@ -168,8 +196,8 @@ export default {
               on: { edit: val => this.onEditRemark(data, val) }
             }), 'class-name': 'c-edit-column' },
           { prop: 'productName', label: '配置' },
-          { prop: 'serialNumber', label: '序列号', 'min-width': 140 },
-          { prop: 'mac', label: 'MAC', 'min-width': 140 },
+          { prop: 'serialNumber', label: '序列号', 'min-width': 160 },
+          { prop: 'mac', label: 'MAC', 'min-width': 120 },
           { type: 'tag', render: ({ empty, activate, onlineStatus }) => empty
             ? null
             : activate
@@ -180,17 +208,17 @@ export default {
                   : { type: 'danger', label: '离线' }
               : { type: 'warning', label: '未激活' },
             on: this.onTagClick },
-          { label: '使用情况', type: 'tag', render: ({ empty, bound }) => empty
+          { label: '使用情况', type: 'tag', render: ({ empty, isMaster, bound }) => empty || !isMaster
             ? null
             : bound
               ? { type: 'success', label: '已使用' }
-              : { type: 'primary', label: '未使用' } },
+              : { type: 'primary', label: '未使用' }, on: this.onViewMesh },
           { type: 'invoke', render: [
             { label: '配置', render: ({ isMaster }) => isMaster, on: this.onSettingDevice },
-            __SUB_DEVICE__ && { label: '添加备份', render: ({ isMaster }) => isMaster, on: this.onAddSubDevice },
-            { label: '所属网点', render: ({ isMaster }) => isMaster, allow: ({ bound }) => bound, on: this.onViewMesh },
+            { label: '替换', render: ({ isMaster }) => isMaster, on: this.onReplace },
+            __SUB_DEVICE__ && { label: '备机', render: ({ isMaster }) => isMaster, on: this.onAddSubDevice },
             { label: '删除', render: ({ empty }) => !empty, on: this.onDelDevice }
-          ].filter(Boolean), width: __SUB_DEVICE__ ? 240 : 180 }
+          ].filter(Boolean), width: __SUB_DEVICE__ ? 180 : 140 }
         ]
       }
     }
@@ -470,8 +498,10 @@ export default {
         params: { id }
       })
     },
-    onViewMesh ({ id }) {
-      this.$refs.meshDialog.show(id)
+    onViewMesh ({ id, bound }) {
+      if (bound) {
+        this.$refs.meshDialog.show(id)
+      }
     },
     onEditRemark (device, { newVal, oldVal }) {
       if (newVal === oldVal) {
@@ -484,6 +514,48 @@ export default {
       }).catch(() => {
         device.remark = oldVal
       })
+    },
+    onReplace (device) {
+      this.$device = device
+      this.currObj = {
+        serialNumber: '',
+        mac: ''
+      }
+      this.$refs.replaceDialog.show()
+    },
+    onConfirmReplace (done) {
+      const { serialNumber, mac } = this.currObj
+      if (!serialNumber) {
+        this.$message({
+          type: 'warning',
+          message: '序列号不能为空'
+        })
+        return
+      }
+      if (!mac) {
+        this.$message({
+          type: 'warning',
+          message: 'MAC不能为空'
+        })
+        return
+      }
+      if (!validMAC(mac)) {
+        this.$message({
+          type: 'warning',
+          message: 'MAC格式不正确，例 ff:ff:ff:ff:ff:ff'
+        })
+        return
+      }
+      if (serialNumber === this.$device.serialNumber && mac === this.$device.mac) {
+        done()
+        return
+      }
+      replaceDevice(this.$device.id, { serialNumber, mac }).then(() => {
+        this.$device.serialNumber = serialNumber
+        this.$device.mac = mac
+        this.$device = null
+        done()
+      })
     }
   }
 }