dataControl/src/views/Level.vue

<template>
  <el-card class="content-div">
    <div class="all-content">
      <el-form
        :model="formData"
        ref="ruleFormRef"
        :rules="addRules"
        label-width="160px"
        class="demo-ruleForm condition-div"
        size="large"
      >
        <div v-for="(item, index) of formData.ip" :key="index" :class="formData.ip.length ==1 ? 'ipDiv' : 'moreipDiv'">
          <p>{{ item.name || "网卡" }}</p>
          <div class="info-div">
            <div>
              <el-form-item
                label="模式："
                :prop="'ip.' + index + '.mode'"
                :rules="addRules.mode"
              >
                <el-select v-model="item.mode" placeholder="请选择">
                  <el-option
                    v-for="opt in modeOptions"
                    :key="opt.id"
                    :label="opt.name"
                    :value="opt.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item
                label="IP地址："
                :prop="'ip.' + index + '.ip'"
                :rules="addRules.ip"
              >
                <el-input v-model.trim="item.ip"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item
                label="子网掩码："
                :prop="'ip.' + index + '.mk'"
                :rules="addRules.mk"
              >
                <el-input v-model.trim="item.mk"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item
                label="网关地址："
                :prop="'ip.' + index + '.gw'"
                :rules="addRules.gw"
              >
                <el-input v-model.trim="item.gw"></el-input>
              </el-form-item>
            </div>
            <!-- 取消多IP绑定业务 -->
            <!-- <div v-if="formData.ip.length == 1">
              <div v-for="(list, i) of item.otherip" :key="i" class="addIp">
                <el-form-item label="多IP绑定：" prop="otherip">
                  <el-input v-model.trim="item.otherip[i]"></el-input>
                </el-form-item>
                <el-button
                  circle
                  icon="Plus"
                  class="add-btn"
                  @click="addIpData(index, i)"
                />
                <el-button
                  circle
                  icon="SemiSelect"
                  class="add-btn"
                  @click="delIpData(index, i)"
                />
              </div>
            </div> -->
          </div>
        </div>
        <div class="dnsDiv">
          <p>DNS</p>
          <div class="info-div">
            <div>
              <el-form-item label="首选：" prop="dns.dns1">
                <el-input v-model.trim="formData.dns.dns1"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="备选：" prop="dns.dns2">
                <el-input v-model.trim="formData.dns.dns2"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
      <el-button @click="saveData" type="primary">保存</el-button>
    </div>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage } from "element-plus";
// import { user, response, token, info,passwd, net_info,ip_info } from '../proto/data/pd'
export default {
  name: "level",
  setup() {
    const ruleFormRef = ref(null);
    var checkIp = (rule, value, callback) => {
      var ipRule =
        /^(\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])$/;
      if (!value || ipRule.test(value)) {
        // 规则校验通过，或者为空
        callback();
      } else {
        callback(new Error("格式不正确"));
      }
    };
    const state = reactive({
      modeOptions: [
        {
          id: '0',
          name: "STATIC",
        },
        {
          id: '1',
          name: "DHCP",
        },
        {
          id: '2',
          name: "DHCP_DNS",
        },
      ],
      formData: {
        ip: {},
        dns: {},
      },
      addRules: {
        mode: [{ required: true, message: "不能为空", trigger: "blur" }],
        ip: [
          { required: true, message: "不能为空", trigger: "blur" },
          { validator: checkIp, trigger: "blur" },
        ],
        mk: [
          { required: true, message: "不能为空", trigger: "blur" },
          { validator: checkIp, trigger: "blur" },
        ],
        gw: [
          { required: false, message: "不能为空", trigger: "blur" },
          { validator: checkIp, trigger: "blur" },
        ],
        dns: {
          dns1: [
            { required: true, message: "不能为空", trigger: "blur" },
            { validator: checkIp, trigger: "blur" },
          ],
          dns2: [
            { required: true, message: "不能为空", trigger: "blur" },
            { validator: checkIp, trigger: "blur" },
          ],
        },
      },
    });

    onMounted(() => {
      getNet();
    });
    const getNet = async () => {
      const res = await infoApi.getNet();
      if (res.code == 0) {
          // 获取数据
          state.formData = res.data;
      } else {
      }
    };

    // const addIpData = (index, i) => {
    //   state.formData.ip[index].otherip.push("");
    // };

    // const delIpData = (index, i) => {
    //   state.formData.ip[index].otherip.splice(i, 1);
    // };
    const saveData = () => {
      ruleFormRef.value.validate(async (valid) => {
        if (valid) {
          const res = await infoApi.saveNet(state.formData);
          if (res.code == 0) {
            ElMessage.success(res.message || "请求成功");
            getNet();
          } else {
            ElMessage.error(res.message);
          }
        } else {
        }
      });
    };

    return {
      ...toRefs(state),
      ruleFormRef,
      saveData,
      // addIpData,
      // delIpData,
    };
  },
};
</script>
<style lang="scss" scoped>
.all-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.condition-div {
  height: 95%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: auto;
  > div {
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 50%;
    margin-bottom: 10px;
    p {
      text-align: center;
      margin: 10px 0;
    }
    .info-div {
      width: 80%;
      height: 90%;
      overflow: auto;
      margin: 0 auto;
      > div {
        line-height: 60px;
        height: 60px;
      }
    }
  }
  .ipDiv {
    height: 60%;
  }
  .moreipDiv {
    height: 35%;
  }
  .dnsDiv {
    height: 25%;
  }
}
.el-button {
  margin: 0 auto;
}
.addIp {
  display: flex;
  .el-form-item {
    width: 100%;
  }
  .add-btn {
    margin-left: 5px;
  }
}
</style>