优化影院列表vue文件的代码结构通过region实现代码折叠盒分区

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()
 
-// 定义表格数据
+// 数据校验部分 校验ip地址是否合法
-const tableData = ref([])
-
-let refresh_disable = ref(false)
-let refresh_loading = ref(false)
-
-//  数据校验部分
 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,6 +73,7 @@ const resetSearch = (formEl) => {
   formEl.resetFields()
 }
 
+// 刷新逻辑
 const refresh = (formEL) => {
   formEL.resetFields()
   refresh_disable.value = true;
@@ -86,10 +84,18 @@ const refresh = (formEL) => {
     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
 </script>
 
 <template>
@@ -137,15 +145,24 @@ onMounted(
       <el-col :span="6">
         <el-button type="primary" @click="submitSearch(cinemaSearchRef)">搜索</el-button>
         <el-button @click="resetSearch(cinemaSearchRef)">重置</el-button>
-          <el-button v-bind:disabled="refresh_disable" @click="refresh(cinemaSearchRef)" v-bind:loading="refresh_loading">刷新</el-button>
+        <el-button v-bind:disabled="refresh_disable" @click="refresh(cinemaSearchRef)" v-bind:loading="refresh_loading">
+          刷新
+        </el-button>
       </el-col>
-
     </el-row>
   </el-form>
   <el-table :data="tableData" style="width: 100%">
     <el-table-column prop="update_time" label="最后查询时间" min-width="200"></el-table-column>
     <el-table-column prop="name" label="影院名称" min-width="200"></el-table-column>
-    <el-table-column prop="ip" label="影院IP" min-width="120"></el-table-column>
+    <el-table-column prop="ip" label="影院IP" min-width="120">
+      <template v-slot="scope">
+        <a target="_blank" style="color:#007bff;" v-if="scope.row.ip!=null"
+           v-bind:href="'http://'+scope.row.ip+'/?code=leying'">
+          {{ scope.row.ip }}
+        </a>
+        <span v-else> {{ scope.row.ip }}</span>
+      </template>
+    </el-table-column>
     <el-table-column prop="zz_num" label="专资编码" min-width="120"></el-table-column>
     <el-table-column prop="inner_id" label="鼎新编码" min-width="100"></el-table-column>
     <el-table-column prop="sys_ver" label="系统版本" min-width="200"></el-table-column>