From d4d50a62a6799038f34314a79af14538b7dcda6a Mon Sep 17 00:00:00 2001 From: RogerWork Date: Mon, 15 Jan 2024 09:31:52 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BD=B1=E9=99=A2=E5=88=97?= =?UTF-8?q?=E8=A1=A8vue=E6=96=87=E4=BB=B6=E7=9A=84=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E7=BB=93=E6=9E=84=E9=80=9A=E8=BF=87region=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8A=98=E5=8F=A0=E7=9B=92=E5=88=86=E5=8C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/update/index.vue | 51 +++++++++++++++++++++++++------------- 1 file changed, 34 insertions(+), 17 deletions(-) diff --git a/src/views/update/index.vue b/src/views/update/index.vue index 5b8422b..e63ec59 100644 --- a/src/views/update/index.vue +++ b/src/views/update/index.vue @@ -3,21 +3,17 @@ import {onBeforeMount, onMounted, reactive, ref, unref} from 'vue'; import {cinema_list, cinema_search} from "@/apis/update.js"; -// 表单部分 +// region 表单代码 +// 搜索条件字段 const cinemaSearch = reactive({ ip: '', version: '', }) +// 点击搜索时提交的数据 const cinemaSearchRef = ref() -// 定义表格数据 -const tableData = ref([]) - -let refresh_disable = ref(false) -let refresh_loading = ref(false) - -// 数据校验部分 +// 数据校验部分 校验ip地址是否合法 const ip_validate = (rule, value, callback) => { 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 === '') { @@ -30,11 +26,12 @@ const ip_validate = (rule, value, callback) => { } } +// 指定表单的校验规则， 仅对ip进行校验 const ipRule = reactive({ ip: [{validator: ip_validate, trigger: 'change'}] }) -// 数据提交 +// 数据提交 点击搜索按键提交数据 const submitSearch = async (formEl) => { console.log('至少执行了') console.log(cinemaSearch.ip) @@ -55,7 +52,6 @@ const submitSearch = async (formEl) => { console.log(err) } ) - // console.log(formEl) console.log(ip, version) if (!formEl) return @@ -69,6 +65,7 @@ const submitSearch = async (formEl) => { }) } +// 重置搜索数据的逻辑 const resetSearch = (formEl) => { console.log(formEl) if (!formEl) return @@ -76,20 +73,29 @@ const resetSearch = (formEl) => { formEl.resetFields() } +// 刷新逻辑 const refresh = (formEL) => { formEL.resetFields() refresh_disable.value = true; refresh_loading.value = true; get_table_data() - setTimeout(()=>{ + setTimeout(() => { refresh_disable.value = false; refresh_loading.value = false; }, 5000) } +// endregion -// 表格部分 +// region 表格数据代码 +// 表格展示的数据 +const tableData = ref([]) +// 定义开关控制刷新按键的状态 disable和loading +let refresh_disable = ref(false) +let refresh_loading = ref(false) + +// 通过异步请求获取影院列表数据 async function get_table_data() { tableData.value = [] await cinema_list().then(res => { @@ -106,6 +112,7 @@ async function get_table_data() { ) } +// 定义生命周期，在加载时获取一次表格数据 onMounted( async () => { await get_table_data(); @@ -113,6 +120,7 @@ onMounted( } ) +// endregion