远程配网

src/api/system/device.js

@@ -186,3 +186,12 @@ export function updateDeviceServiceRate(deviceId, serviceRate) {
     }
   })
 }
+
+// 远程配网
+export function deviceSetWifi(data) {
+  return request({
+    url: "/system/device/setWifi",
+    method: 'put',
+    data
+  })
+}

src/views/system/device/components/DeviceSetWifiDialog.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-dialog :visible.sync="visible" title="远程配网" width="400px">
+    <el-form :model="form" ref="form" :rules="rules" label-position="top">
+      <el-row>
+        <form-col :span="24" label="WIFI名称" prop="wifiName">
+          <el-input v-model="form.wifiName" placeholder="请输入WIFI名称"/>
+        </form-col>
+        <form-col :span="24" label="WIFI密码" prop="wifiPwd">
+          <el-input v-model="form.wifiPwd" placeholder="请输入WIFI密码" type="password"/>
+        </form-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <el-button plain @click="cancel">取 消</el-button>
+      <el-button plain type="primary" @click="submit" :loading="submitLoading">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { deviceSetWifi } from '@/api/system/device'
+
+export default {
+  name: "DeviceSetWifiDialog",
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    deviceId: {
+      type: String,
+      default: null,
+    }
+  },
+  data() {
+    return {
+      submitLoading: false,
+      form: {
+        wifiName: null,
+        wifiPwd: null
+      },
+      rules: {
+        wifiName: [
+          { required: true, message: '请输入WIFI名称', trigger: 'blur' }
+        ],
+        wifiPwd: [
+          { required: true, message: '请输入WIFI密码', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  computed: {
+    visible: {
+      set(val) {
+        this.$emit('update:show', val);
+      },
+      get() {
+        return this.show;
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.visible = false
+    },
+    submit(){
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          let data = {deviceId: this.deviceId, ...this.form};
+          this.submitLoading = true;
+          deviceSetWifi(data).then(res => {
+            if (res.code === 200) {
+              this.$message.success(`配网成功！新的WIFI为：${data.wifiName}`);
+              this.$emit('success', data);
+              this.visible = false;
+            }
+          }).finally(() => {
+            this.submitLoading = false;
+          })
+        }
+      })
+    }
+  }
+}
+</script>

src/views/system/device/detail.vue

@@ -103,7 +103,10 @@
               <el-descriptions-item label="版本号">
                 {{deviceData.version | defaultValue}}
               </el-descriptions-item>
-              <el-descriptions-item label="WIFI">{{deviceData.wifi | defaultValue}}</el-descriptions-item>
+              <el-descriptions-item label="WIFI" v-if="deviceData.modelTags.includes(ModelTag.WIFI)">
+                {{deviceData.wifi | defaultValue}}
+                <el-link @click="handleSetWifi" type="primary" icon="el-icon-link" style="margin-left: 0.5em">远程配网</el-link>
+              </el-descriptions-item>
               <el-descriptions-item label="开关状态">
                 <el-tag :type="isOpen ? 'success' : 'danger'" size="mini">{{isOpen ? '已开启' : '已关闭'}}</el-tag>
               </el-descriptions-item>
@@ -183,6 +186,8 @@
         <el-button plain @click="showAddElectricity = false">取消</el-button>
       </template>
     </el-dialog>
+
+    <device-set-wifi-dialog :show.sync="showSetWifi" :device-id="deviceData.deviceId" @success="onSetWifiSuccess"/>
   </div>
 </template>
 
@@ -221,12 +226,14 @@ import { isEmpty } from '@/utils'
 import BindMchButton from '@/views/system/device/components/BindMchButton.vue'
 import BindAgentButton from '@/views/system/device/components/BindAgentButton.vue'
 import LineField from '@/components/LineField/index.vue'
+import DeviceSetWifiDialog from '@/views/system/device/components/DeviceSetWifiDialog.vue'
 
 export default {
   name: 'Device/:deviceId',
   mixins: [$serviceType, $view],
   dicts: ['sm_device_status', 'sm_device_outage_way', 'sm_device_notice_way', 'sm_model_tag', 'sm_device_online_status', 'service_type', 'device_service_mode', 'time_unit', 'bonus_arrival_type'],
   components: {
+    DeviceSetWifiDialog,
     LineField,
     BindAgentButton,
     BindMchButton,
@@ -240,6 +247,7 @@ export default {
     TenantList, ResetRecord, BindRecord, ReadingRecord, MeterRecordReport, QrCode, RechargeRecord, LineChart},
   data() {
     return {
+      showSetWifi: false,
       loading: false,
       deviceData: {
         modelTags: [],
@@ -300,6 +308,12 @@ export default {
     clearInterval(this.timer);
   },
   methods: {
+    onSetWifiSuccess(data) {
+      this.deviceData.wifi = data.wifiName;
+    },
+    handleSetWifi() {
+      this.showSetWifi = true;
+    },
     isEmpty,
     handleUnbind() {
       this.$confirm('是否强制解绑该商户？', '警告', {