From d8944c4764c3fc4b7baf6b5c1586cf17c88b0bb1 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 23 三月 2022 22:38:20 +0800
Subject: [PATCH] 修改ztree复选框默认为父子联动
---
src/pages/settings/views/NetSettings.vue | 258 ++++++++++++++++++++++++++++++---------------------
1 files changed, 153 insertions(+), 105 deletions(-)
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index 5d283e1..93686c5 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -79,7 +79,11 @@
</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>
@@ -89,11 +93,7 @@
<div class="general-box">
<div class="in-title">閫氱敤</div>
- <el-form
- :model="wifiForm"
- ref="wifiForm"
- class="join-form"
- >
+ <el-form :model="wifiForm" ref="wifiForm" class="join-form">
<el-form-item prop="name">
<div class="p-title">鍚嶇О</div>
<!-- <div class="wifi-name">{{ 12123 }}</div> -->
@@ -116,21 +116,27 @@
</el-form>
</div>
- <switchBar
- :barName="`楂樼骇璁剧疆`"
- :value="isHighClass"
- ></switchBar>
+ <switchBar :barName="`楂樼骇璁剧疆`" :value="isHighClass"></switchBar>
- <div class="general-box fold" :class="{'hidden':IPV4_hid}" >
- <div class="in-title">IPV4
- <span class="icon iconfont icon-fold"
- @click="toggleFold('IPV4_hid')"></span>
+ <div class="general-box fold" :class="{ hidden: IPV4_hid }">
+ <div class="in-title">
+ IPV4
+ <span
+ class="icon iconfont icon-fold"
+ @click="toggleFold('IPV4_hid')"
+ ></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">
+ <el-select
+ v-model="value"
+ placeholder="璇烽�夋嫨"
+ size="small"
+ :popper-append-to-body="false"
+ >
<el-option
v-for="item in options"
:key="item.value"
@@ -178,16 +184,29 @@
</el-form>
</div>
- <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')"></span>
+ <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')"
+ ></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">
+ <el-select
+ v-model="value"
+ placeholder="璇烽�夋嫨"
+ size="small"
+ :popper-append-to-body="false"
+ >
<el-option
v-for="item in options"
:key="item.value"
@@ -207,18 +226,26 @@
<div class="p-title">鍓嶇紑</div>
<div style="display: flex; width: 100%">
<el-input
- v-model="wifiForm.password"
+ v-model="ipv6Form.prefix"
placeholder
size="small"
></el-input>
<div class="ad">
- <i class="el-icon-remove-outline"></i>
+ <i class="el-icon-remove-outline" @click="minusPrefix"></i>
</div>
<div class="ad">
- <i class="el-icon-circle-plus-outline"></i>
+ <i
+ class="el-icon-circle-plus-outline"
+ @click="+ipv6Form.prefix++"
+ ></i>
</div>
- <div class="ad"><i class="el-icon-refresh-left"></i></div>
+ <div class="ad">
+ <i
+ class="el-icon-refresh-left"
+ @click="ipv6Form.prefix = ''"
+ ></i>
+ </div>
</div>
</el-form-item>
@@ -285,38 +312,38 @@
<div class="wire-detail" v-if="activePage == 2 && inWireDetail">
<div class="title">缃戠粶璁剧疆</div>
<el-form :model="wireForm" :rules="wireFormRules" ref="wireForm">
- <el-form-item prop="name">
- <div class="p-title">缃戠粶鍚嶇О</div>
+ <el-form-item prop="name">
+ <div class="p-title">缃戠粶鍚嶇О</div>
<div class="wifi-name">{{ "缃戠粶" + activeWireItem.index }}</div>
</el-form-item>
- <el-form-item prop="ifname">
- <div class="p-title">缃戝崱</div>
+ <el-form-item prop="ifname">
+ <div class="p-title">缃戝崱</div>
<div class="wifi-name">{{ activeWireItem.name }}</div>
</el-form-item>
- <el-form-item prop="ip">
- <div class="p-title">IP</div>
+ <el-form-item prop="ip">
+ <div class="p-title">IP</div>
<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>
+ <div class="p-title">瀛愮綉鎺╃爜</div>
<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>
+ <el-form-item prop="gateway">
+ <div class="p-title">缃戝叧</div>
<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>
+ <el-form-item prop="dns">
+ <div class="p-title">DNS</div>
<ip-input
:ip="wireForm.dns"
@on-blur="wireForm.dns = arguments[0]"
@@ -329,6 +356,9 @@
<div class="ok" @click="saveWire">淇濆瓨</div>
</div>
</div>
+ <WifiGateway v-if="activePage == 3"></WifiGateway>
+ <LoraGateway v-if="activePage == 4"></LoraGateway>
+ <MqttGateway v-if="activePage == 5"></MqttGateway>
</div>
</div>
</div>
@@ -348,10 +378,17 @@
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";
+
export default {
components: {
ipInput,
switchBar,
+ WifiGateway,
+ LoraGateway,
+ MqttGateway,
},
data() {
const checkPwd = (rule, value, callback) => {
@@ -405,6 +442,9 @@
{ name: "缃戠粶璁剧疆", icon: "\ue6dd" },
{ name: "鏃犵嚎缃戠粶", icon: "\uea13" },
{ name: "鏈夌嚎缃戠粶", icon: "\ue73b" },
+ { name: "WiFi缃戝叧", icon: "\ue73b" },
+ { name: "LORA缃戝叧", icon: "\ue73b" },
+ { name: "MQTT缃戝叧", icon: "\ue73b" },
],
ipv6FormRules: {},
options: [
@@ -419,18 +459,18 @@
],
value: "",
IPV4_hid: false,
- IPV6_hid: false
+ IPV6_hid: false,
};
- },
- components: {
- ipInput,
- switchBar,
},
mounted() {
this.getCurServer();
this.fetchWireList();
},
methods: {
+ minusPrefix() {
+ debugger;
+ this.ipv6Form.prefix;
+ },
switchNetCard(item) {
if (item.active) {
upNetCard({ ifname: item.name }).then(
@@ -498,8 +538,8 @@
if (i == 0) {
this.ruleForm.deviceName = "";
this.ruleForm.port = "";
- this.getCurServer()
- }
+ this.getCurServer();
+ }
if (i == 1) {
this.inWifiDetail = false;
}
@@ -561,16 +601,18 @@
});
},
toggleFold(tog) {
- const demo = this.$refs.ipvHolder
- if(!(this.IPV4_hid&&!this.IPV6_hid)){
- setTimeout(() => {
- demo.scrollIntoView({block: "end", inline: "nearest",behavior: 'smooth'})
- }, 300);
- }
- this[tog] = !this[tog]
-
-
- }
+ const demo = this.$refs.ipvHolder;
+ if (!(this.IPV4_hid && !this.IPV6_hid)) {
+ setTimeout(() => {
+ demo.scrollIntoView({
+ block: "end",
+ inline: "nearest",
+ behavior: "smooth",
+ });
+ }, 300);
+ }
+ this[tog] = !this[tog];
+ },
},
computed: {
showStatus() {
@@ -583,22 +625,28 @@
.all {
width: 100%;
}
+.wire {
+ width: 456px;
+ margin: 0 auto;
+}
.wire-detail {
+ width: 456px;
+ margin: 0 auto;
.title {
font-size: 16px;
margin-bottom: 10px;
}
.ip-input-container {
- max-width: none !important;
- height: 32px;
- line-height: normal;
- box-sizing: border-box;
- // background-color: #f2f2f7;
- text-align: left;
- border-radius: 20px;
- border: 2px solid transparent; display: flex;
-
- }
+ max-width: none !important;
+ height: 32px;
+ line-height: normal;
+ box-sizing: border-box;
+ // background-color: #f2f2f7;
+ text-align: left;
+ border-radius: 20px;
+ border: 2px solid transparent;
+ display: flex;
+ }
.btns {
display: flex;
justify-content: space-between;
@@ -620,7 +668,7 @@
}
}
.net-set {
- max-width: 600px;
+ max-width: 456px;
margin: 0 auto;
.title {
font-size: 16px;
@@ -653,10 +701,11 @@
box-sizing: border-box;
flex-shrink: 0;
padding: 10px;
+ padding-top: 6px;
border-right: 4px solid #f2f2f7;
border-left: 4px solid #f2f2f7;
+ border-top: 4px solid #f2f2f7;
.menu-item {
- background: #f2f2f7;
height: 56px;
margin-bottom: 4px;
border-radius: 8px;
@@ -667,6 +716,11 @@
padding: 0 20px;
display: flex;
justify-content: space-between;
+
+ &:hover {
+ background: #f2f2f7;
+ }
+
.item-left {
display: flex;
align-items: center;
@@ -681,7 +735,7 @@
}
}
.menu-item-active {
- background-color: var(--colorCard);
+ background-color: var(--colorCard) !important;
color: #ffffff;
}
}
@@ -692,12 +746,20 @@
box-sizing: border-box;
position: relative;
padding: 10px;
+ padding-top: 6px;
+ border-top: 4px solid #f2f2f7;
+ overflow-y: overlay;
+ overflow-x: hidden;
+
.title {
height: 48px;
font-size: 16px;
line-height: 48px;
- color: #333333;
+ color: #4f4f4f;
font-weight: bold;
+ background: #f2f2f7;
+ border-radius: 8px;
+ margin-bottom: 4px;
}
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
@@ -710,7 +772,7 @@
width: 100%;
}
.el-form-item {
- margin-bottom: 16px;
+ margin-bottom: 4px;
}
.el-form-item__content {
line-height: 48px;
@@ -724,7 +786,7 @@
border: 2px solid #409eff !important;
}
.el-select-dropdown__item {
- color: #333333;
+ color: #4f4f4f;
height: 32px;
font-size: 12px;
line-height: 32px;
@@ -758,11 +820,10 @@
background-color: #ffffff;
border: 2px solid transparent;
border-radius: 20px;
- height: 32px;
+ height: 32px !important;
padding: 0 15px;
font-size: 14px;
line-height: 32px;
-
font-weight: bold;
}
.el-input__inner::placeholder {
@@ -774,7 +835,7 @@
width: 100%;
}
.el-select .el-input .el-select__caret {
- color: #333333;
+ color: #4f4f4f;
font-size: 14px;
font-weight: 600;
}
@@ -783,7 +844,7 @@
max-width: none !important;
}
.wifi-set {
- max-width: 600px;
+ max-width: 456px;
margin: 0 auto;
.switch-bar {
background: #f2f2f7;
@@ -791,7 +852,7 @@
}
.switch-bar .name {
font-size: 14px;
- color: #333;
+ color: #4f4f4f;
font-weight: bold;
}
.wifi-option {
@@ -802,12 +863,12 @@
align-items: center;
box-sizing: border-box;
padding: 0 20px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
background: #f2f2f7;
border-radius: 8px;
.name {
font-size: 14px;
- color: #333;
+ color: #4f4f4f;
font-weight: bold;
.icon {
color: #4e94ff;
@@ -834,7 +895,7 @@
}
}
.wifi-detail {
- max-width: 600px;
+ max-width: 454px;
margin: 0 auto;
transition: all 0.3s linear 0s;
.general-box {
@@ -845,7 +906,7 @@
padding-bottom: 10px;
margin-bottom: 20px;
&.fold {
- height: 342px;
+ height: 342px;
.icon-fold {
display: inline-block;
font-size: 14px;
@@ -855,10 +916,10 @@
}
}
&.hidden {
- height: 34px;
- .icon-fold {
- transform: rotate(180deg);
- }
+ height: 34px;
+ .icon-fold {
+ transform: rotate(180deg);
+ }
}
.el-form-item {
margin-bottom: 0px;
@@ -868,7 +929,7 @@
padding: 14px 20px;
font-weight: bold;
font-size: 14px;
- color: #333333;
+ color: #4f4f4f;
}
.ip-input-container {
max-width: none !important;
@@ -893,21 +954,12 @@
margin-top: 0;
display: flex;
justify-content: space-between;
- margin-bottom: 20px;
- .left {
- background-color: rgba(240, 240, 240, 1);
- height: 40px;
- line-height: 40px;
- width: 48%;
- border-radius: 10px;
+ margin-bottom: 4px;
+ .cancel {
+ width: 218px;
}
- .right {
- background-color: rgba(61, 104, 225, 1);
- height: 40px;
- line-height: 40px;
- width: 48%;
- color: #fff;
- border-radius: 10px;
+ .ok {
+ width: 218px;
}
}
.wifi-name {
@@ -920,15 +972,9 @@
line-height: 48px;
}
.ad {
- margin-top: 10px;
height: 32px;
- /* margin: 4px 0px 4px 5px; */
- /* border-radius: 5px; */
- line-height: 31px;
- /* width: 27px; */
text-align: center;
font-size: 17px;
- /* font-weight: bold; */
margin-left: 10px;
cursor: pointer;
}
@@ -943,19 +989,21 @@
align-items: center;
box-sizing: border-box;
padding: 0 20px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
border-radius: 8px;
.name {
font-size: 15px;
font-weight: bold;
font-size: 14px;
- color: #333333;
+ color: #4f4f4f;
}
.right {
display: flex;
align-items: center;
.el-switch__core {
height: 14px;
+ background-color: var(--colorCard) !important;
+ border-color: var(--colorCard) !important;
}
.el-switch.is-checked .el-switch__core::after {
left: 100%;
@@ -978,7 +1026,7 @@
margin-right: 15px;
}
.good {
- color: #4e94ff;
+ color: var(--colorCard);
font-size: 16px;
}
.bad {
--
Gitblit v1.8.0