|
|
|
|
<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">
|
|
|
|
|
<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 { reactive, ref } from 'vue';
|
|
|
|
|
|
|
|
|
|
const data = reactive({
|
|
|
|
|
ip1: '',
|
|
|
|
|
port1: '',
|
|
|
|
|
ip2: '',
|
|
|
|
|
port2: '',
|
|
|
|
|
ip3: '',
|
|
|
|
|
port3: '',
|
|
|
|
|
ipBackup: '',
|
|
|
|
|
portBackup: '',
|
|
|
|
|
account: '',
|
|
|
|
|
password: '',
|
|
|
|
|
apn: '',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const networkForm = ref(null); // form
|
|
|
|
|
|
|
|
|
|
// 提交表单
|
|
|
|
|
const onSubmit = () => {
|
|
|
|
|
networkForm.value.validate(valid => {
|
|
|
|
|
console.log(valid, { ...data });
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 重置表单
|
|
|
|
|
const onReset = () => {
|
|
|
|
|
networkForm.value.resetFields();
|
|
|
|
|
};
|
|
|
|
|
</script>
|
