tall4-pc/src/views/network-config.vue

<template>
  <el-form label-position="top" :model="data" ref="networkForm">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="上报IP1地址" prop="ip1">
          <el-input v-model="data.ip1"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="上报端口号1" prop="port1">
          <el-input v-model="data.port1"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="上报IP2地址" prop="ip2">
          <el-input v-model="data.ip2"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="上报端口号2" prop="port2">
          <el-input v-model="data.port2"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="上报IP3地址" prop="ip3">
          <el-input v-model="data.ip3"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="上报端口号3" prop="port3">
          <el-input v-model="data.port3"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="备用ip地址" prop="ipBackup">
          <el-input v-model="data.ipBackup"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="备用端口号" prop="portBackup">
          <el-input v-model="data.portBackup"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="用户名" prop="account">
          <el-input v-model="data.account"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="密码" prop="password">
          <el-input v-model="data.password"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="APN" prop="apn">
          <el-input v-model="data.apn"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-5 pl-2">
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getConfigNetwork, createConfigNetwork } from 'apis/index';

const data = ref({
  ip1: '',
  port1: '',
  ip2: '',
  port2: '',
  ip3: '',
  port3: '',
  ipBackup: '',
  portBackup: '',
  account: '',
  password: '',
  apn: '',
});

const networkForm = ref(null); // form

// 提交表单
const onSubmit = () => {
  networkForm.value.validate(async valid => {
    console.log(valid, { ...data.value });
    const param = { ...data.value };
    try {
      await createConfigNetwork(param);
      ElMessage.success('提交成功');
    } catch (error) {
      console.log('error: ', error);
      ElMessage.error('提交失败, 请稍后重试');
    }
  });
};

// 重置表单
const onReset = () => {
  networkForm.value.resetFields();
};

// 获取网络配置数据 填入表单中
getConfigNetwork().then(res => {
  data.value = res;
});
</script>