VPNWeb/src/views/network/wan.vue

<template>
  <el-container>
    <el-header class="header">
      <div class="headers">
        <h3>WAN配置</h3>
        <el-button class="rebootcard" size="mini" type="primary" @click="reboot">重启网络</el-button>
      </div>
    </el-header>
    <el-main class="main">
      <el-form :model="ruleForm" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" size="small">
        <el-form-item label="上网方式" prop="type">
          <el-select class="select" @change="typeChage" v-model="ruleForm.type" placeholder="请选择上网方式">
            <el-option label="自动获取IP" :value="'0'"></el-option>
            <el-option label="手动获取IP" :value="'1'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == '0'" label="静态DNS" prop="staticip">
          <el-switch v-model="ruleForm.staticip" :active-value="'0'" :inactive-value="'1'" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == '1'" label="IP地址" prop="address" :required="true">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == '1'" label="子网掩码" prop="netmask" :required="true">
          <el-input v-model="ruleForm.netmask"></el-input>
        </el-form-item>
        <el-form-item v-if="ruleForm.type == '1'" label="网关" prop="gateway" :required="true">
          <el-input v-model="ruleForm.gateway"></el-input>
        </el-form-item>
        <el-form-item v-if="ruleForm.staticip == '0'" label="DNS地址" prop="dns">
          <el-input v-model="ruleForm.dns"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'wan',
  components: {},
  computed: {
    ...mapState(['wandata'])
  },
  data () {
    const ipaddr = { pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, message: '请输入正确的IP地址' }

    return {
      ruleForm: {
        type: '0',
        staticip: '0'
      },
      rules: {
        address: [
          { required: true, message: 'IP地址不能为空' },
          ipaddr
        ],
        netmask: [
          { required: true, message: '子网掩码不能为空' },
          { pattern: /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/, message: '请输入正确掩码' }
        ],
        gateway: [
          { required: true, message: '网关不能为空' },
          ipaddr
        ],
        dns: [ipaddr]
      }
    }
  },
  async mounted () {
    const res = await this.wanquery()
    if (res && res.errcode === 0) {
      console.log(res)
      this.ruleForm = res.data
    }
  },
  methods: {
    ...mapActions(['setwan', 'wandown', 'wanup', 'wanquery']),
    // type类型改变
    typeChage () {
      this.ruleForm.staticip = 0
    },
    // 提交数据
    async onSubmit () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return false
        const res = await this.setwan(this.ruleForm)
        if (res && res.errcode === 0) {
          this.$message.success('设置成功')
        }
      })
    },
    // 重启网卡  （先调用停止，在调用启动）
    async reboot () {
      const dw = await this.wandown()
      if (dw && dw.errcode === 0) {
        const up = await this.wanup()
        if (up && up.errcode === 0) {
          this.$message.success('重启成功')
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.headers {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #999;
}
.rebootcard {
  line-height: 1em;
  height: 3em;
  margin-top: 1%;
}
h3 {
  width: 90%;
  text-align: left;
  text-indent: 1em;
}
.demo-ruleForm {
  width: 50%;
  margin: 5% auto;
  /deep/ .el-form-item .el-form-item__content .select {
    width: 100%;
  }
}
</style>