smsb-web-develop/src/views/device/detail/components/DeviceInvoke/DeviceNetwork/Wired.vue

<template>
  <div class="c-grid-form">
    <span class="c-grid-form__label u-bold">网口：</span>
    <schema-select
      :value="eth"
      :schema="ethSchema"
      @change="onChange"
    />
    <span class="c-grid-form__label u-bold">IP配置方式：</span>
    <schema-select
      v-model="wired.mode"
      :schema="modeSchema"
    />
    <template v-if="isMaunal">
      <!-- <span class="c-grid-form__label u-bold">IPv4：</span>
      <div class="l-flex--row c-grid-form__option">
        <el-switch
          v-model="wired.ip4.enable"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </div> -->
      <template v-if="wired.ip4.enable">
        <span class="c-grid-form__label required">IP地址：</span>
        <el-input
          v-model.trim="wired.ip4.address"
          placeholder="192.168.0.100"
          maxlength="15"
        />
        <span class="c-grid-form__label required">子网掩码：</span>
        <el-input
          v-model.trim="wired.ip4.mask"
          placeholder="255.255.255.0"
          maxlength="15"
        />
        <span class="c-grid-form__label">网关：</span>
        <el-input
          v-model.trim="wired.ip4.gateway"
          placeholder="192.168.0.1"
          maxlength="15"
        />
        <span class="c-grid-form__label">主DNS：</span>
        <el-input
          v-model.trim="wired.ip4.dns1"
          placeholder="192.168.0.10"
          maxlength="15"
        />
        <span class="c-grid-form__label">备DNS：</span>
        <el-input
          v-model.trim="wired.ip4.dns2"
          placeholder="192.168.0.11"
          maxlength="15"
        />
      </template>
      <!-- <span class="c-grid-form__label u-bold">IPv6：</span>
      <div class="l-flex--row c-grid-form__option">
        <el-switch
          v-model="wired.ip6.enable"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </div>
      <template v-if="wired.ip6.enable">
        <span class="c-grid-form__label required">IP地址：</span>
        <el-input
          v-model.trim="wired.ip4.address"
          placeholder="ffff:0000:0000:0000:0000:0000:0000:0000"
          maxlength="39"
        />
        <span class="c-grid-form__label required">子网前缀：</span>
        <el-input-number
          v-model="wired.ip6.mask"
          :min="1"
          :max="32"
          step-strictly
        />
        <span class="c-grid-form__label">网关：</span>
        <el-input
          v-model.trim="wired.ip6.gateway"
          placeholder="ffff:0000:0000:0000:0000:0000:0000:0000"
          maxlength="39"
        />
        <span class="c-grid-form__label">主DNS：</span>
        <el-input
          v-model.trim="wired.ip6.dns1"
          placeholder="ffff:0000:0000:0000:0000:0000:0000:0000"
          maxlength="39"
        />
        <span class="c-grid-form__label">备DNS：</span>
        <el-input
          v-model.trim="wired.ip6.dns2"
          placeholder="ffff:0000:0000:0000:0000:0000:0000:0000"
          maxlength="39"
        />
      </template> -->
    </template>
  </div>
</template>

<script>
export default {
  name: 'Wired',
  props: {
    eth: {
      type: String,
      required: true
    },
    eths: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      modeSchema: {
        options: [
          { value: 'dhcp', label: '自动(DHCP)' },
          { value: 'manual', label: '手动' }
        ]
      }
    }
  },
  computed: {
    ethSchema () {
      return {
        options: this.eths.map(({ name }, index) => {
          return {
            value: `${index}`,
            label: name
          }
        })
      }
    },
    wired () {
      return this.eths[this.eth]
    },
    isMaunal () {
      return this.wired.mode === 'manual'
    }
  },
  methods: {
    onChange (val) {
      this.$emit('update:eth', val)
    }
  }
}
</script>