完成影院列表相关的代码

src/router/index.js

@@ -3,7 +3,7 @@ import Layout from '@/layout/index.vue'
 
 const routes = [
     {
-        path: '/',
+        path: '/update',
         name: 'Home',
         component: Layout,
     }

src/views/update/index.vue

@@ -1,13 +1,20 @@
 <script setup>
-import {ref, reactive} from 'vue';
+import {ref, reactive, unref} from 'vue';
 
+// 表单部分
 const cinemaSearch = reactive({
   ip: '',
   version: '',
 })
-const ruleFormRef = ref()
+
+const cinemaSearchRef = 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})))');
+  const regex = new RegExp('((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})(\\.((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})){3}');
+  if (value === ''){
+    callback()
+  }
   if (!regex.test(value)) {
     callback(new Error('请输入正确的IP地址'))
   } else {
@@ -19,68 +26,86 @@ const ipRule = reactive({
   ip: [{validator: ip_validate, trigger: 'change'}]
 })
 
-const submitSearch = (formData) => {
+// 数据提交
+const submitSearch = (formEl) => {
   console.log('至少执行了')
-  console.log(formData)
-  if (!formData)
-    return formData.validate((valid) => {
+  const {ip, version} = unref(cinemaSearch)
+  // console.log(formEl)
+  console.log(ip, version)
+  if (!formEl) return
+  formEl.validate((valid) => {
       if (valid) {
         console.log('提交数据')
       } else {
         console.log('提交失败')
+        return false
       }
     })
 }
 
-const resetSearch = (formData) => {
-  if (!formData)
-    return formData.resetFields()
+const resetSearch = (formEl) => {
+  console.log(formEl)
+  if (!formEl) return
+  console.log("resetSearch")
+  formEl.resetFields()
 }
 
-
-const tableData = []
+// 表格部分
+const tableData = reactive(
+    [
+      {
+        'name': '鼎新测试环境3.112',
+        'ip': '172.16.3.112',
+        'zz_num': '14105121',
+        'inner_id': '2105',
+        'db_user': 'test',
+        'db_pwd': 'cine123456',
+        'sys_ver': '2.0.33.0337ZZ',
+        'client_ver': '2.033.0337.8894'
+      }
+    ]
+)
 </script>
 
 <template>
   <el-form
-      ref="cinemaUpdate"
+      ref="cinemaSearchRef"
       :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-col :span="8">
+        <el-form-item label="影院IP" prop="ip" label-width="60">
+          <el-input v-model="cinemaSearch.ip" placeholder="请输入完整的影院IP" style="width: 180px;"></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-col :span="8">
+        <el-form-item label="系统版本" prop="version">
+          <el-input v-model="cinemaSearch.version" style="width: 160px;"></el-input>
         </el-form-item>
       </el-col>
-      <el-col span="4">
+      <el-col :span="6">
         <el-form-item>
-          <el-button type="primary" @click="submitSearch(ruleFormRef)">搜索</el-button>
+          <el-button type="primary" @click="submitSearch(cinemaSearchRef)">搜索</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button @click="resetSearch(ruleFormRef)">重置</el-button>
+          <el-button @click="resetSearch(cinemaSearchRef)">重置</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="name" label="影院名称" width="200"></el-table-column>
+    <el-table-column prop="ip" label="影院IP" width="120"></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="inner_id" label="鼎新编码" width="100"></el-table-column>
+    <el-table-column prop="db_user" label="数据库账号" width="100"></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-column prop="client_ver" label="客户端版本" width="200"></el-table-column>
   </el-table>
 </template>