From 5d9d45b9ddc4d99aba2d9dd9d75fc4d7ebf639d1 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 20 五月 2022 18:10:37 +0800
Subject: [PATCH] 修改ip配置的交互

---
 src/pages/settings/views/NetSettings.vue |  516 ++++++++++++++++++++++++++++-----------------------------
 1 files changed, 254 insertions(+), 262 deletions(-)

diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index 93686c5..f115a26 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -20,28 +20,15 @@
       <div class="net-right">
         <div class="net-set" v-if="activePage == 0">
           <div class="title">缃戠粶璁剧疆</div>
-          <el-form
-            :model="ruleForm"
-            :rules="rules"
-            ref="joinForm"
-            class="join-form"
-          >
+          <el-form :model="ruleForm" :rules="rules" ref="joinForm" class="join-form">
             <el-form-item prop="deviceName">
               <div class="p-title">璁惧鍚嶇О</div>
-              <el-input
-                v-model="ruleForm.deviceName"
-                size="small"
-                placeholder="蹇呭~"
-              ></el-input>
+              <el-input v-model="ruleForm.deviceName" size="small" placeholder="蹇呭~"></el-input>
             </el-form-item>
 
             <el-form-item prop="port">
               <div class="p-title">绔彛</div>
-              <el-input
-                v-model="ruleForm.port"
-                placeholder="閫夊~锛屽閮ㄨ闂殑绔彛"
-                size="small"
-              ></el-input>
+              <el-input v-model="ruleForm.port" placeholder="閫夊~锛屽閮ㄨ闂殑绔彛" size="small"></el-input>
             </el-form-item>
           </el-form>
           <!-- <div class="save-btn" @click="saveServerName">淇濆瓨</div> -->
@@ -53,37 +40,22 @@
         <div class="wifi-set" v-if="activePage == 1 && !inWifiDetail">
           <div class="title">鏃犵嚎缃戠粶</div>
 
-          <switchBar
-            :barName="`鏃犵嚎缃戝崱`"
-            @switchChange="wifiControl"
-            :value="isOpenWifi"
-          ></switchBar>
+          <switchBar :barName="`鏃犵嚎缃戝崱`" @switchChange="wifiControl" :value="isOpenWifi"></switchBar>
 
           <div class="wifi-option" v-for="(item, i) in wifiList" :key="i">
             <div class="name">
-              <span class="icon iconfont" v-if="item.isConnected"
-                >&#xe676;</span
-              >
-              <span
-                :style="!item.isConnected ? { 'margin-left': '24px' } : {}"
-                >{{ item.name }}</span
-              >
+              <span class="icon iconfont" v-if="item.isConnected">&#xe676;</span>
+              <span :style="!item.isConnected ? { 'margin-left': '24px' } : {}">{{ item.name }}</span>
             </div>
 
             <div class="more-detail">
               <span class="icon iconfont lock">&#xe726;</span>
               <span class="icon iconfont signal">&#xe6e5;</span>
-              <span class="icon iconfont more-icon" @click="checkWifi(item)"
-                >&#xe640;</span
-              >
+              <span class="icon iconfont more-icon" @click="checkWifi(item)">&#xe640;</span>
             </div>
           </div>
         </div>
-        <div
-          class="wifi-detail"
-          v-if="activePage == 1 && inWifiDetail"
-          ref="ipvHolder"
-        >
+        <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail" ref="ipvHolder">
           <div class="title">鏃犵嚎缃戠粶</div>
           <div class="btns">
             <div class="cancel">鍒犻櫎</div>
@@ -97,21 +69,12 @@
               <el-form-item prop="name">
                 <div class="p-title">鍚嶇О</div>
                 <!-- <div class="wifi-name">{{ 12123 }}</div> -->
-                <el-input
-                  v-model="wifiForm.name"
-                  placeholder=""
-                  size="small"
-                ></el-input>
+                <el-input v-model="wifiForm.name" placeholder="" size="small"></el-input>
               </el-form-item>
 
               <el-form-item prop="password">
                 <div class="p-title">瀵嗙爜</div>
-                <el-input
-                  v-model="wifiForm.password"
-                  placeholder="璇疯緭鍏ュ瘑鐮�"
-                  size="small"
-                  show-password
-                ></el-input>
+                <el-input v-model="wifiForm.password" placeholder="璇疯緭鍏ュ瘑鐮�" size="small" show-password></el-input>
               </el-form-item>
             </el-form>
           </div>
@@ -121,22 +84,13 @@
           <div class="general-box fold" :class="{ hidden: IPV4_hid }">
             <div class="in-title">
               IPV4
-              <span
-                class="icon iconfont icon-fold"
-                @click="toggleFold('IPV4_hid')"
-                >&#xe757;</span
-              >
+              <span class="icon iconfont icon-fold" @click="toggleFold('IPV4_hid')">&#xe757;</span>
             </div>
 
             <el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form">
               <el-form-item>
                 <div class="p-title">鏂规硶</div>
-                <el-select
-                  v-model="value"
-                  placeholder="璇烽�夋嫨"
-                  size="small"
-                  :popper-append-to-body="false"
-                >
+                <el-select v-model="value" placeholder="璇烽�夋嫨" size="small" :popper-append-to-body="false">
                   <el-option
                     v-for="item in options"
                     :key="item.value"
@@ -147,66 +101,38 @@
               </el-form-item>
               <el-form-item prop="ip">
                 <div class="p-title">IP</div>
-                <ip-input
-                  :ip="ipv4Form.ip"
-                  @on-blur="ipv4Form.ip = arguments[0]"
-                ></ip-input>
+                <ip-input :ip="ipv4Form.ip" @on-blur="ipv4Form.ip = arguments[0]"></ip-input>
               </el-form-item>
               <el-form-item prop="subMask">
                 <div class="p-title">瀛愮綉鎺╃爜</div>
-                <ip-input
-                  :ip="ipv4Form.subMask"
-                  @on-blur="ipv4Form.subMask = arguments[0]"
-                ></ip-input>
+                <ip-input :ip="ipv4Form.subMask" @on-blur="ipv4Form.subMask = arguments[0]"></ip-input>
               </el-form-item>
 
               <el-form-item prop="gateway">
                 <div class="p-title">缃戝叧</div>
-                <ip-input
-                  :ip="ipv4Form.gateway"
-                  @on-blur="ipv4Form.gateway = arguments[0]"
-                ></ip-input>
+                <ip-input :ip="ipv4Form.gateway" @on-blur="ipv4Form.gateway = arguments[0]"></ip-input>
               </el-form-item>
               <el-form-item prop="dns">
                 <div class="p-title">棣栭�塂NS</div>
-                <ip-input
-                  :ip="ipv4Form.dns1"
-                  @on-blur="ipv4Form.dns1 = arguments[0]"
-                ></ip-input>
+                <ip-input :ip="ipv4Form.dns1" @on-blur="ipv4Form.dns1 = arguments[0]"></ip-input>
               </el-form-item>
               <el-form-item prop="dns">
                 <div class="p-title">澶囩敤DNS</div>
-                <ip-input
-                  :ip="ipv4Form.dns2"
-                  @on-blur="ipv4Form.dns2 = arguments[0]"
-                ></ip-input>
+                <ip-input :ip="ipv4Form.dns2" @on-blur="ipv4Form.dns2 = arguments[0]"></ip-input>
               </el-form-item>
             </el-form>
           </div>
 
-          <div
-            class="general-box fold"
-            :class="{ hidden: IPV6_hid }"
-            ref="ipv6Holder"
-          >
+          <div class="general-box fold" :class="{ hidden: IPV6_hid }" ref="ipv6Holder">
             <div class="in-title">
               IPV6
-              <span
-                class="icon iconfont icon-fold"
-                @click="toggleFold('IPV6_hid')"
-                >&#xe757;</span
-              >
+              <span class="icon iconfont icon-fold" @click="toggleFold('IPV6_hid')">&#xe757;</span>
             </div>
 
             <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv6Form">
               <el-form-item>
                 <div class="p-title">鏂规硶</div>
-                <el-select
-                  v-model="value"
-                  placeholder="璇烽�夋嫨"
-                  size="small"
-                  :popper-append-to-body="false"
-                >
+                <el-select v-model="value" placeholder="璇烽�夋嫨" size="small" :popper-append-to-body="false">
                   <el-option
                     v-for="item in options"
                     :key="item.value"
@@ -217,58 +143,36 @@
               </el-form-item>
               <el-form-item prop="ip">
                 <div class="p-title">IP</div>
-                <ip-input
-                  :ip="ipv6Form.ip"
-                  @on-blur="ipv6Form.ip = arguments[0]"
-                ></ip-input>
+                <ip-input :ip="ipv6Form.ip" @on-blur="ipv6Form.ip = arguments[0]"></ip-input>
               </el-form-item>
               <el-form-item prop="subMask">
                 <div class="p-title">鍓嶇紑</div>
                 <div style="display: flex; width: 100%">
-                  <el-input
-                    v-model="ipv6Form.prefix"
-                    placeholder
-                    size="small"
-                  ></el-input>
+                  <el-input v-model="ipv6Form.prefix" placeholder size="small"></el-input>
 
                   <div class="ad">
                     <i class="el-icon-remove-outline" @click="minusPrefix"></i>
                   </div>
                   <div class="ad">
-                    <i
-                      class="el-icon-circle-plus-outline"
-                      @click="+ipv6Form.prefix++"
-                    ></i>
+                    <i class="el-icon-circle-plus-outline" @click=";+ipv6Form.prefix++"></i>
                   </div>
                   <div class="ad">
-                    <i
-                      class="el-icon-refresh-left"
-                      @click="ipv6Form.prefix = ''"
-                    ></i>
+                    <i class="el-icon-refresh-left" @click="ipv6Form.prefix = ''"></i>
                   </div>
                 </div>
               </el-form-item>
 
               <el-form-item prop="gateway">
                 <div class="p-title">缃戝叧</div>
-                <ip-input
-                  :ip="ipv6Form.gateway"
-                  @on-blur="ipv6Form.gateway = arguments[0]"
-                ></ip-input>
+                <ip-input :ip="ipv6Form.gateway" @on-blur="ipv6Form.gateway = arguments[0]"></ip-input>
               </el-form-item>
               <el-form-item prop="dns">
                 <div class="p-title">棣栭�塂NS</div>
-                <ip-input
-                  :ip="ipv6Form.dns1"
-                  @on-blur="ipv6Form.dns1 = arguments[0]"
-                ></ip-input>
+                <ip-input :ip="ipv6Form.dns1" @on-blur="ipv6Form.dns1 = arguments[0]"></ip-input>
               </el-form-item>
               <el-form-item prop="dns">
                 <div class="p-title">澶囩敤DNS</div>
-                <ip-input
-                  :ip="ipv6Form.dns2"
-                  @on-blur="ipv6Form.dns2 = arguments[0]"
-                ></ip-input>
+                <ip-input :ip="ipv6Form.dns2" @on-blur="ipv6Form.dns2 = arguments[0]"></ip-input>
               </el-form-item>
             </el-form>
           </div>
@@ -281,25 +185,12 @@
 
         <div class="wire" v-if="activePage == 2 && !inWireDetail">
           <div class="title">鏈夌嚎缃戠粶</div>
-          <div
-            class="wire-bar"
-            v-for="(item, i) in wireArr"
-            :key="i"
-            @click.self="checkWire(item)"
-          >
+          <div class="wire-bar" v-for="(item, i) in wireArr" :key="i" @click.self="checkWire(item)">
             <div class="name">{{ "缃戠粶" + item.index }}</div>
 
             <div class="right">
-              <span
-                class="icon iconfont good"
-                v-if="item.lower_up && item.active"
-                >&#xe6f1;</span
-              >
-              <span
-                class="icon iconfont bad"
-                v-if="!item.lower_up && item.active"
-                >&#xe6e6;</span
-              >
+              <span class="icon iconfont good" v-if="item.lower_up && item.active">&#xe6f1;</span>
+              <span class="icon iconfont bad" v-if="!item.lower_up && item.active">&#xe6e6;</span>
               <el-switch
                 v-model="item.active"
                 active-color="#4E94FF"
@@ -322,32 +213,20 @@
             </el-form-item>
             <el-form-item prop="ip">
               <div class="p-title">IP</div>
-              <ip-input
-                :ip="wireForm.ip"
-                @on-blur="wireForm.ip = arguments[0]"
-              ></ip-input>
+              <ip-input :ip="wireForm.ip" @on-blur="wireForm.ip = arguments[0]"></ip-input>
             </el-form-item>
             <el-form-item prop="subMask">
               <div class="p-title">瀛愮綉鎺╃爜</div>
-              <ip-input
-                :ip="wireForm.subMask"
-                @on-blur="wireForm.subMask = arguments[0]"
-              ></ip-input>
+              <ip-input :ip="wireForm.subMask" @on-blur="wireForm.subMask = arguments[0]"></ip-input>
             </el-form-item>
 
             <el-form-item prop="gateway">
               <div class="p-title">缃戝叧</div>
-              <ip-input
-                :ip="wireForm.gateway"
-                @on-blur="wireForm.gateway = arguments[0]"
-              ></ip-input>
+              <ip-input :ip="wireForm.gateway" @on-blur="wireForm.gateway = arguments[0]"></ip-input>
             </el-form-item>
             <el-form-item prop="dns">
               <div class="p-title">DNS</div>
-              <ip-input
-                :ip="wireForm.dns"
-                @on-blur="wireForm.dns = arguments[0]"
-              ></ip-input>
+              <ip-input :ip="wireForm.dns" @on-blur="wireForm.dns = arguments[0]"></ip-input>
             </el-form-item>
           </el-form>
 
@@ -372,15 +251,17 @@
   getNetWorkCardInfo,
   getDevInfo,
   downNetCard,
-  upNetCard,
-} from "@/api/system";
+  upNetCard
+} from "@/api/system"
 
-import ipInput from "../components/IPInput";
-import switchBar from "../components/switchBar";
+import ipInput from "../components/IPInput"
+import switchBar from "../components/switchBar"
 
-import WifiGateway from "../components/WifiGateway";
-import LoraGateway from "../components/LoraGateway";
-import MqttGateway from "../components/MqttGateway";
+import WifiGateway from "../components/WifiGateway"
+import LoraGateway from "../components/LoraGateway"
+import MqttGateway from "../components/MqttGateway"
+
+import { isIPv4 } from "@/scripts/validate"
 
 export default {
   components: {
@@ -388,36 +269,36 @@
     switchBar,
     WifiGateway,
     LoraGateway,
-    MqttGateway,
+    MqttGateway
   },
   data() {
     const checkPwd = (rule, value, callback) => {
       if (!value) {
-        return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"));
+        return callback(new Error("瀵嗙爜涓嶈兘涓虹┖"))
       }
       setTimeout(() => {
         if (value.length != 6) {
-          callback(new Error("瀵嗙爜搴斾负6浣�!"));
+          callback(new Error("瀵嗙爜搴斾负6浣�!"))
         } else {
-          callback();
+          callback()
         }
-      }, 1000);
-    };
+      }, 1000)
+    }
     return {
       isHighClass: false,
       ruleForm: {
         deviceName: "",
-        port: "",
+        port: ""
       },
       wifiForm: {
         name: "",
-        password: "",
+        password: ""
       },
       wireArr: [],
       inWifiDetail: false,
       wifiList: [
         { name: "鏃犵嚎缃戠粶1", isConnected: false },
-        { name: "鏃犵嚎缃戠粶2", isConnected: true },
+        { name: "鏃犵嚎缃戠粶2", isConnected: true }
       ],
       isOpenWifi: false,
       inWireDetail: false,
@@ -425,15 +306,49 @@
         dns: "",
         subMask: "",
         gateway: "",
-        ip: "",
+        ip: ""
       },
-      wireFormRules: {},
+      originalConfig: {},
+      wireFormRules: {
+        ip: [
+          {
+            required: true,
+            message: "璇疯緭鍏P鍦板潃",
+            trigger: "change"
+          },
+          { validator: isIPv4, trigger: "change" }
+        ],
+
+        gateway: [
+          {
+            required: true,
+            message: "璇疯緭鍏ョ綉鍏�",
+            trigger: "change"
+          },
+          { validator: isIPv4, trigger: "change" }
+        ],
+        dns: [
+          {
+            required: true,
+            message: "璇疯緭鍏ns鍦板潃",
+            trigger: "change"
+          },
+          { validator: isIPv4, trigger: "change" }
+        ],
+
+        subMask: [
+          {
+            required: true,
+            message: "璇疯緭鍏ュ瓙缃戞帺鐮�",
+            trigger: "change"
+          },
+          { validator: isIPv4, trigger: "change" }
+        ]
+      },
       activePage: 0,
       activeWireItem: {},
       rules: {
-        deviceName: [
-          { required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" },
-        ],
+        deviceName: [{ required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" }]
       },
       ipv4Form: {},
       ipv6Form: {},
@@ -444,182 +359,247 @@
         { name: "鏈夌嚎缃戠粶", icon: "\ue73b" },
         { name: "WiFi缃戝叧", icon: "\ue73b" },
         { name: "LORA缃戝叧", icon: "\ue73b" },
-        { name: "MQTT缃戝叧", icon: "\ue73b" },
+        { name: "MQTT缃戝叧", icon: "\ue73b" }
       ],
       ipv6FormRules: {},
       options: [
         {
           value: "閫夐」1",
-          label: "鑷姩",
+          label: "鑷姩"
         },
         {
           value: "閫夐」2",
-          label: "鎵嬪姩",
-        },
+          label: "鎵嬪姩"
+        }
       ],
       value: "",
       IPV4_hid: false,
-      IPV6_hid: false,
-    };
+      IPV6_hid: false
+    }
   },
   mounted() {
-    this.getCurServer();
-    this.fetchWireList();
+    this.getCurServer()
+    this.fetchWireList()
   },
   methods: {
     minusPrefix() {
-      debugger;
-      this.ipv6Form.prefix;
+      debugger
+      this.ipv6Form.prefix
     },
     switchNetCard(item) {
       if (item.active) {
         upNetCard({ ifname: item.name }).then(
           (res) => {
             if (res.success) {
-              this.$message.success(res.data);
-              this.fetchWireList();
+              this.$message.success(res.data)
+              this.fetchWireList()
             }
           },
           (err) => {
-            item.active = false;
-            this.$message.error(err.msg);
+            item.active = false
+            this.$message.error(err.msg)
           }
-        );
+        )
       } else {
         downNetCard({ ifname: item.name }).then(
           (res) => {
             if (res.success) {
-              this.$message.success(res.data);
-              this.fetchWireList();
+              this.$message.success(res.data)
+              this.fetchWireList()
             }
           },
           (err) => {
-            item.active = true;
-            this.$message.error(err.msg);
+            item.active = true
+            this.$message.error(err.msg)
           }
-        );
+        )
       }
     },
     getCurServer() {
       getDevInfo().then((res) => {
-        this.ruleForm.deviceName = res.data.server_name;
-        this.ruleForm.port = res.data.server_port;
-      });
+        this.ruleForm.deviceName = res.data.server_name
+        this.ruleForm.port = res.data.server_port
+      })
     },
     fetchWireList() {
       getWireList().then((res) => {
         if (res && res.success) {
-          this.wireArr = res.data;
+          this.wireArr = res.data
           this.wireArr.forEach((x) => {
-            let t = x.flags.split("|")[0] == "up";
-            this.$set(x, "active", t);
-          });
+            let t = x.flags.split("|")[0] == "up"
+            this.$set(x, "active", t)
+          })
         }
-      });
+      })
     },
     cancelSaveWire() {
-      this.inWireDetail = false;
-      this.wireForm.ip = "";
-      this.wireForm.gateway = "";
-      this.wireForm.dns = "";
-      this.wireForm.subMask = "";
+      this.inWireDetail = false
+      this.wireForm.ip = ""
+      this.wireForm.gateway = ""
+      this.wireForm.dns = ""
+      this.wireForm.subMask = ""
+      this.originalConfig = this.wireForm
     },
     saveServerName() {
       setServerName({
         server_name: this.ruleForm.deviceName,
-        server_port: this.ruleForm.port,
+        server_port: this.ruleForm.port
       }).then((res) => {
         if (res && res.success) {
-          this.$message.success(res.data);
+          this.$message.success(res.data)
         }
-      });
+      })
     },
     openRight(i) {
       if (i == 0) {
-        this.ruleForm.deviceName = "";
-        this.ruleForm.port = "";
-        this.getCurServer();
+        this.ruleForm.deviceName = ""
+        this.ruleForm.port = ""
+        this.getCurServer()
       }
       if (i == 1) {
-        this.inWifiDetail = false;
+        this.inWifiDetail = false
       }
-      this.activePage = i;
+      this.activePage = i
     },
     saveWire(ifname) {
-      let data = {
-        ip: this.wireForm.ip,
-        gateway: this.wireForm.gateway,
-        dns: this.wireForm.dns,
-        subMask: this.wireForm.subMask,
-        ifname: this.activeWireItem.name,
-      };
-      setNetWorkCard(data).then(
-        (res) => {
-          if (res && res.success) {
-            this.$message.success(res.data);
+      // let data = {
+      //   ip: this.wireForm.ip,
+      //   gateway: this.wireForm.gateway,
+      //   dns: this.wireForm.dns,
+      //   subMask: this.wireForm.subMask,
+      //   ifname: this.activeWireItem.name,
+      // };
+      // setNetWorkCard(data).then(
+      //   (res) => {
+      //     if (res && res.success) {
+      //       this.$message.success(res.data);
+      //     }
+      //   },
+      //   (err) => {
+      //     this.$message.error("淇濆瓨澶辫触锛�" + err.msg);
+      //   }
+      // );
+
+      this.$refs["wireForm"].validate((valid) => {
+        if (valid) {
+          let data = {
+            ip: this.wireForm.ip,
+            gateway: this.wireForm.gateway,
+            dns: this.wireForm.dns,
+            subMask: this.wireForm.subMask,
+            ifname: this.activeWireItem.name
           }
-        },
-        (err) => {
-          this.$message.error("淇濆瓨澶辫触锛�" + err.msg);
+
+          let newUri = location.protocol + "//" + data.ip + location.port == 80 ? "" : ":" + location.port
+
+          if (this.wireForm.ip !== this.originalConfig.ip) {
+            var changeIPTimer = setTimeout(() => {
+              this.$alert(
+                '<strong>鎮ㄥ凡淇敼浜嗘湇鍔″櫒ip, 璇烽噸鏂扮櫥褰�</strong><a target="_parent" href="' +
+                  newUri +
+                  '"> ' +
+                  newUri +
+                  "<a/>",
+                "鎻愮ず",
+                {
+                  dangerouslyUseHTMLString: true,
+                  customClass: "noticeBox"
+                }
+              )
+            }, 10000)
+          }
+
+          this.$confirm("纭闇�瑕佷慨鏀规湇鍔″櫒閰嶇疆鍚楋紵", {
+            center: true,
+            cancelButtonClass: "comfirm-class-cancle",
+            confirmButtonClass: "comfirm-class-sure"
+          })
+            .then(() => {
+              setNetWorkCard(data)
+                .then((rsp) => {
+                  if (rsp && rsp.success) {
+                    this.$notify({
+                      type: "success",
+                      message: "鏈嶅姟鍣ㄩ厤缃垚鍔�"
+                    })
+                  }
+                })
+                .catch((err) => {
+                  clearTimeout(changeIPTimer)
+                  this.$notify({
+                    type: "error",
+                    message: "淇濆瓨澶辫触"
+                  })
+                })
+              this.$message({
+                message: "鎿嶄綔瀹屾垚,璇风◢鍚�",
+                type: "success"
+              })
+            })
+            .catch((err) => {})
+        } else {
+          return false
         }
-      );
+      })
     },
     wifiControl(val) {},
     checkWifi() {
-      this.inWifiDetail = true;
+      this.inWifiDetail = true
     },
     openWireDetail(item) {
-      this.inWireDetail = true;
-      this.activeWireItem = item;
+      this.inWireDetail = true
+      this.activeWireItem = item
       getNetWorkCardInfo({
-        ifname: item.name,
+        ifname: item.name
       }).then(
         (res) => {
           if (res && res.success) {
-            this.wireForm.ip = res.data.ip;
-            this.wireForm.gateway = res.data.gateway;
-            this.wireForm.dns = res.data.dns;
-            this.wireForm.subMask = res.data.subMask;
+            this.wireForm.ip = res.data.ip
+            this.wireForm.gateway = res.data.gateway
+            this.wireForm.dns = res.data.dns
+            this.wireForm.subMask = res.data.subMask
+            this.originalConfig = JSON.parse(JSON.stringify(this.wireForm))
           }
         },
         (err) => {
-          this.$message.error("鏌ユ壘涓嶅埌鏁版嵁: " + err.msg);
+          this.$message.error("鏌ユ壘涓嶅埌鏁版嵁: " + err.msg)
         }
-      );
+      )
     },
     checkWire(item) {
       if (item.addrs) {
-        this.openWireDetail(item);
-        return;
+        this.openWireDetail(item)
+        return
       }
       this.$confirm("鎮ㄨ繕鏈厤缃綉缁滀俊鎭紝鏄惁鐜板湪閰嶇疆锛�", "鎻愮ず", {
         confirmButtonText: "纭畾",
         cancelButtonText: "鍙栨秷",
         type: "warning",
+        customClass: "confirmBox"
       }).then(() => {
-        this.openWireDetail(item);
-      });
+        this.openWireDetail(item)
+      })
     },
     toggleFold(tog) {
-      const demo = this.$refs.ipvHolder;
+      const demo = this.$refs.ipvHolder
       if (!(this.IPV4_hid && !this.IPV6_hid)) {
         setTimeout(() => {
           demo.scrollIntoView({
             block: "end",
             inline: "nearest",
-            behavior: "smooth",
-          });
-        }, 300);
+            behavior: "smooth"
+          })
+        }, 300)
       }
-      this[tog] = !this[tog];
-    },
+      this[tog] = !this[tog]
+    }
   },
   computed: {
     showStatus() {
-      return this.wireArr.some((item) => item.lower_up == true);
-    },
-  },
-};
+      return this.wireArr.some((item) => item.lower_up == true)
+    }
+  }
+}
 </script>
 <style lang="scss">
 .all {
@@ -761,18 +741,15 @@
       border-radius: 8px;
       margin-bottom: 4px;
     }
-    .el-form-item.is-required:not(.is-no-asterisk)
-      > .el-form-item__label:before,
-    .el-form-item.is-required:not(.is-no-asterisk)
-      .el-form-item__label-wrap
-      > .el-form-item__label:before {
+    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
+    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
       display: none;
     }
     .el-select {
       width: 100%;
     }
     .el-form-item {
-      margin-bottom: 4px;
+      margin-bottom: 14px;
     }
     .el-form-item__content {
       line-height: 48px;
@@ -1045,4 +1022,19 @@
     }
   }
 }
+.noticeBox p {
+  text-align: center;
+}
+
+.confirmBox {
+  text-align: center;
+
+  p {
+    text-align: center;
+  }
+
+  .el-message-box__status.el-icon-warning {
+    margin-left: 75px;
+  }
+}
 </style>

--
Gitblit v1.8.0