src/views/data/channel/modbus/ModBusDeviceForm.vue

@@ -10,62 +10,62 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入设备名称" />
            <el-input v-model="formData.name" placeholder="请输入设备名称"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="IP地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入IP地址" />
            <el-input v-model="formData.address" placeholder="请输入IP地址"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="端口" prop="port">
            <el-input v-model="formData.port" placeholder="请输入端口" />
            <el-input v-model="formData.port" placeholder="请输入端口"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="不活动超时(ms)" prop="connectInactivityTimeout">
            <el-input v-model="formData.connectInactivityTimeout" placeholder="请输入不活动超时" />
            <el-input v-model="formData.connectInactivityTimeout" placeholder="请输入不活动超时"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="重连超时(ms)" prop="reconnectInterval">
            <el-input v-model="formData.reconnectInterval" placeholder="请输入重连超时" />
            <el-input v-model="formData.reconnectInterval" placeholder="请输入重连超时"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="重试次数" prop="attemptsBeforeTimeout">
            <el-input v-model="formData.attemptsBeforeTimeout" placeholder="请输入重试次数" />
            <el-input v-model="formData.attemptsBeforeTimeout" placeholder="请输入重试次数"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="重试间隔(ms)" prop="waitToRetryMilliseconds">
            <el-input v-model="formData.waitToRetryMilliseconds" placeholder="请输入重试间隔" />
            <el-input v-model="formData.waitToRetryMilliseconds" placeholder="请输入重试间隔"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="读超时(ms)" prop="readTimeout">
            <el-input v-model="formData.readTimeout" placeholder="请输入读超时" />
            <el-input v-model="formData.readTimeout" placeholder="请输入读超时"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="写超时(ms)" prop="writeTimeout">
            <el-input v-model="formData.writeTimeout" placeholder="请输入写超时" />
            <el-input v-model="formData.writeTimeout" placeholder="请输入写超时"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否使用优化" prop="useOptimizedBlockRead">
            <el-input v-model="formData.useOptimizedBlockRead" placeholder="请输入是否使用优化" />
            <el-input v-model="formData.useOptimizedBlockRead" placeholder="请输入是否使用优化"/>
          </el-form-item>
        </el-col>
      </el-row>
@@ -77,11 +77,12 @@
  </Dialog>
</template>
<script lang="ts" setup>
import * as ModBusApi from '@/api/data/channel/modbus'
  import * as ModBusApi from '@/api/data/channel/modbus'
  import {isIP, isPositiveInteger} from '@/utils/validate'

defineOptions({ name: 'DataModBusDeviceForm' })
  defineOptions({name: 'DataModBusDeviceForm'})

  const { t } = useI18n() // 国际化
  const {t} = useI18n() // 国际化
  const message = useMessage() // 消息弹窗
  const dialogVisible = ref(false) // 弹窗的是否展示
  const dialogTitle = ref('') // 弹窗的标题
@@ -92,21 +93,43 @@
    name: undefined,
    address: undefined,
    port: undefined,
    connectInactivityTimeout: undefined,
    reconnectInterval: undefined,
    attemptsBeforeTimeout: undefined,
    waitToRetryMilliseconds: undefined,
    readTimeout: undefined,
    writeTimeout: undefined,
    useOptimizedBlockRead: undefined,
    projectReference: undefined
    connectInactivityTimeout: "",
    reconnectInterval: "5000",
    attemptsBeforeTimeout: "3",
    waitToRetryMilliseconds: "250",
    readTimeout: "3000",
    writeTimeout: "3000",
    useOptimizedBlockRead: "true",
    projectReference: ''
  })
  const validateIP = (rule, value, callback) => {
    if (!isIP(value)) {
      callback(new Error('IP地址不正确'))
    } else {
      callback()
    }
  }
  const validateNum = (rule, value, callback) => {
    if (!isPositiveInteger(value)) {
      callback(new Error('格式不正确'))
    } else {
      callback()
    }
  }

  const formRules = reactive({
    name: [{ required: true, message: '设备名称不能为空', trigger: 'blur' }],
    address: [{ required: true, message: 'IP地址不能为空', trigger: 'blur' }],
    port: [{ required: true, message: '端口不能为空', trigger: 'blur' }]
    name: [{required: true, message: '设备名称不能为空', trigger: 'blur'}],
    address: [
      {required: true, message: 'IP地址不能为空', trigger: 'blur'},
      {validator: validateIP, trigger: 'blur'}
    ],
    port: [
      {required: true, message: '端口不能为空', trigger: 'blur'},
      {validator: validateNum, trigger: 'blur'}
    ]
  })
  const formRef = ref() // 表单 Ref


  /** 打开弹窗 */
  const open = async (type: string, id?: number) => {
@@ -124,7 +147,7 @@
      }
    }
  }
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗
  defineExpose({open}) // 提供 open 方法，用于打开弹窗

  /** 提交表单 */
  const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
@@ -159,14 +182,14 @@
      name: undefined,
      address: undefined,
      port: undefined,
      connectInactivityTimeout: undefined,
      reconnectInterval: undefined,
      attemptsBeforeTimeout: undefined,
      waitToRetryMilliseconds: undefined,
      readTimeout: undefined,
      writeTimeout: undefined,
      useOptimizedBlockRead: undefined,
      projectReference: undefined
      connectInactivityTimeout: "",
      reconnectInterval: "5000",
      attemptsBeforeTimeout: "3",
      waitToRetryMilliseconds: "250",
      readTimeout: "3000",
      writeTimeout: "3000",
      useOptimizedBlockRead: "true",
      projectReference: ''
    }
    formRef.value?.resetFields()
  }