朔黄和系统设置

heyujie

2021-06-24 7cea2db9d57b24d98e42b5207fa6f9a703362e26

 src/pages/systemSettings/views/NetSettings.vue

@@ -41,7 +41,7 @@
                size="small"

              ></el-input>

            </el-form-item>

            <div class="save-btn">保存</div>

            <div class="save-btn" @click="saveServerName">保存</div>

          </el-form>

        </div>



@@ -240,12 +240,13 @@


        <div class="wire" v-if="activePage == 'wire' && !inWireDetail">

          <div

            
            class="wire-bar"

            v-for="(item, i) in wireArr"

            :key="i"

            @click="checkWire(item)"

            @click.self="checkWire(item)"

          >

            <div class="name">{{ item.name }}</div>

            <div class="name">{{ "网络" + item.index }}</div>



            <div class="right">

              <span class="icon iconfont">&#xe676;</span>

@@ -260,18 +261,18 @@
          </div>

        </div>

        <div class="wire-detail" v-if="activePage == 'wire' && inWireDetail">

            <div class="title">网络设置</div>

          <div class="title">网络设置</div>

          <el-form

            :model="wireForm"

            :rules="wireFormRules"

            ref="wireForm"

            label-width="150px"

          >

     <el-form-item label="网络名称" prop="name">

              <div class="wifi-name">{{ 12123 }}</div>

            <el-form-item label="网络名称" prop="name">

              <div class="wifi-name">{{"网络" + activeWireItem.index }}</div>

            </el-form-item>

            <el-form-item label="网卡" prop="name">

              <div class="wifi-name">{{ 12123 }}</div>

            <el-form-item label="网卡" prop="ifname">

              <div class="wifi-name">{{ activeWireItem.name }}</div>

            </el-form-item>

            <el-form-item label="IP" prop="ip">

              <ip-input

@@ -288,23 +289,22 @@


            <el-form-item label="网关" prop="gateway">

              <ip-input

                :ip="ipv4Form.gateway"

                @on-blur="ipv4Form.gateway = arguments[0]"

                :ip="wireForm.gateway"

                @on-blur="wireForm.gateway = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item label="首选DNS" prop="dns">

            <el-form-item label="DNS" prop="dns">

              <ip-input

                :ip="ipv4Form.dns1"

                @on-blur="ipv4Form.dns1 = arguments[0]"

              ></ip-input>

            </el-form-item>

            <el-form-item label="备用DNS" prop="dns">

              <ip-input

                :ip="ipv4Form.dns2"

                @on-blur="ipv4Form.dns2 = arguments[0]"

                :ip="wireForm.dns"

                @on-blur="wireForm.dns = arguments[0]"

              ></ip-input>

            </el-form-item>

          </el-form>



          <div class="btns">

            <div class="cancel" @click="cancelSaveWire">取消</div>

            <div class="ok" @click="saveWire">保存</div>

          </div>

        </div>

      </div>

    </div>

@@ -328,6 +328,8 @@
  addESNode,

  getEsClusterInfo,

} from "@/api/clusterManage";

import { setServerName, getWireList, setNetWorkCard,getNetWorkCardInfo } from "@/api/system";



import cloudNode from "../components/CloudNode";

import ipInput from "@/components/subComponents/IPInput";

import { isIPv4 } from "@/scripts/validate";

@@ -358,18 +360,20 @@
        name: "",

        password: "",

      },

      wireArr: [{ name: "有线网络1" }, { name: "有线网络2" }],

      wireArr: [],

      inWifiDetail: false,

      wifiList: [{ name: "无线网络1" }, { name: "无线网络2" }],

      isOpenWifi: false,

      inWireDetail: false,

      wireForm:{



      wireForm: {

        dns:"",

        subMask:"",

        gateway:"",

        ip:"",

      },

      wireFormRules:{



      },

      wireFormRules: {},

      activePage: "net",

      activeWireItem: {},

      rules: {

        deviceName: [

          { required: true, message: "请输入设备名称", trigger: "change" },

@@ -401,8 +405,50 @@
  beforeDestroy() {},

  props: ["barName"],

  methods: {

    fetchWireList() {

      getWireList().then((res) => {

        if (res && res.success) {

          console.log(res);

          this.wireArr = res.data;

        }

      });

    },

    cancelSaveWire() {

      this.inWireDetail = false;

    },

    saveServerName() {

      setServerName({

        server_name: this.ruleForm.deviceName,

        server_port: this.ruleForm.port,

      }).then((res) => {

        console.log(res);

        if (res && res.success) {

          this.$message.success(res.data);

        }

      });

    },

    openRight(typ) {

      this.activePage = typ;

      if (typ == "wire") {

        this.fetchWireList();

      }

    },

    saveWire(ifname) {

      debugger

      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)

      });

    },

    wifiControl(val) {},

    checkWifi() {

@@ -410,6 +456,18 @@
    },

    checkWire(item) {

      this.inWireDetail = true;

      this.activeWireItem = item;

      getNetWorkCardInfo({

        ifname:item.name

      }).then((res) => {

        if (res&&res.success) {

          debugger

          this.wireForm.ip = res.data.ip

          this.wireForm.gateway = res.data.gateway

          this.wireForm.dns = res.data.dns

          this.wireForm.subMask = res.data.subMask

        }

      })

    },

  },

};

@@ -417,6 +475,27 @@
<style lang="scss">

.all {

  width: 100%;

}

.wire-detail {

  .btns {

    display: flex;

    justify-content: space-between;

    .cancel {

      background-color: rgba(240, 240, 240, 1);

      height: 40px;

      line-height: 40px;

      width: 48%;

      border-radius: 10px;

    }

    .ok {

      background-color: rgba(61, 104, 225, 1);

      height: 40px;

      line-height: 40px;

      width: 48%;

      color: #fff;

      border-radius: 10px;

    }

  }

}



.cluster-content {

@@ -432,7 +511,8 @@
    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;    border-right: 5px solid #f8f8f8;

    padding: 10px;

    border-right: 5px solid #f8f8f8;



    // background-color: lavender;

    .menu-item {