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

<template>
  <!-- 设置站点选择 和 设备下发状态 -->
  <DeviceSelectAndSelect @search="onSearch" :status="data.status" />

  <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>

  <!-- 刷新下发按钮 -->
  <Refresh @refresh="onSearch(currentDeviceId, 1)" />
</template>

<script setup>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { getConfigNetwork, createConfigNetwork } from 'apis/index';
import DeviceSelectAndSelect from 'components/device-select-and-status.vue';
import Refresh from 'components/refresh.vue';

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

const networkForm = ref(null); // form
const store = useStore();
const currentDeviceId = computed(() => store.state.device.currentDeviceId);

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

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

/**
 * 查询网络参数配置
 * @param {string} deviceId 设备id
 * @param {number} type 0数据库查询 1刷新查询
 */
const onSearch = async (deviceId, type = 0) => {
  const params = { deviceId, type };
  store.commit('device/setCurrentDeviceId', deviceId);
  const resData = await getConfigNetwork(params);
  data.value = resData;
};
</script>