提交临时代码

src/layout/index.vue

@@ -1,5 +1,6 @@
 <script setup>
-import HelloWorld from "@/components/HelloWorld.vue";
+// import HelloWorld from "@/components/HelloWorld.vue";
+import Index from "@/views/update/index.vue";
 import PageHeader from "@/layout/components/PageHeader.vue";
 import PageAside from "@/layout/components/PageAside.vue";
 </script>
@@ -15,7 +16,7 @@ import PageAside from "@/layout/components/PageAside.vue";
           <PageHeader/>
         </el-header>
         <el-main>
-          <HelloWorld/>
+          <Index/>
         </el-main>
       </el-container>
     </el-container>

src/views/update/index.vue

@@ -1,9 +1,65 @@
 <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: 'blur'}]
+})
+
+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()
+}
 
 </script>
 
 <template>
-
+<el-form
+  ref="cinemaUpdate"
+  :model="cinemaSearch"
+  status-icon
+  :rules="ipRule"
+  label-width="120"
+  class="cinema-search"
+>
+  <el-form-item label="影院IP" prop="ip">
+    <el-input v-model="cinemaSearch.ip"></el-input>
+  </el-form-item>
+  <el-form-item label="版本" prop="ver">
+    <el-input v-model="cinemaSearch.version"></el-input>
+  </el-form-item>
+  <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-form>
 </template>
 
 <style scoped>