dingxin_toolbox_vue/src/views/update/index.vue

<script setup>
import {ref, reactive} from 'vue';

const cinemaSearch = reactive({
  ip: '',
  version: '',
})
const ruleFormRef = ref()
const ip_validate = (rule, value, callback) => {
  const regex = new RegExp('(^((2[0-4]\\d.)|(25[0-5].)|(1\\d{2}.)|(\\d{1,2}.))((2[0-5]{2}.)|(1\\d{2}.)|(\\d{1,2}.){2})((1\\d{2})|(2[0-5]{2})|(\\d{1,2})))');
  if (!regex.test(value)) {
    callback(new Error('请输入正确的IP地址'))
  } else {
    callback()
  }
}

const ipRule = reactive({
  ip: [{validator: ip_validate, trigger: 'change'}]
})

const submitSearch = (formData) => {
  console.log('至少执行了')
  console.log(formData)
  if (!formData)
    return formData.validate((valid) => {
      if (valid) {
        console.log('提交数据')
      } else {
        console.log('提交失败')
      }
    })
}

const resetSearch = (formData) => {
  if (!formData)
    return formData.resetFields()
}


const tableData = []
</script>

<template>
  <el-form
      ref="cinemaUpdate"
      :model="cinemaSearch"
      status-icon
      :rules="ipRule"
      label-width="120"
      class="cinema-search"
      :inline="true"
  >
    <el-row>
      <el-col span="4">
        <el-form-item label="影院IP" prop="ip">
          <el-input v-model="cinemaSearch.ip" placeholder="请输入完整的影院IP"></el-input>
        </el-form-item>
      </el-col>
      <el-col span="4">
        <el-form-item label="版本" prop="ver">
          <el-input v-model="cinemaSearch.version"></el-input>
        </el-form-item>
      </el-col>
      <el-col span="4">
        <el-form-item>
          <el-button type="primary" @click="submitSearch(ruleFormRef)">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="影院名称" width="240"></el-table-column>
    <el-table-column prop="ip" label="影院IP" width="240"></el-table-column>
    <el-table-column prop="zz_num" label="专资编码" width="120"></el-table-column>
    <el-table-column prop="inner_id" label="鼎新编码" width="120"></el-table-column>
    <el-table-column prop="db_user" label="数据库账号" width="120"></el-table-column>
    <el-table-column prop="db_pwd" label="数据库密码" width="120"></el-table-column>
    <el-table-column prop="sys_ver" label="系统版本" width="120"></el-table-column>
    <el-table-column prop="client_ver" label="客户端版本" width="120"></el-table-column>
  </el-table>
</template>

<style scoped>

</style>