dingxin_toolbox_vue/src/views/update/index.vue

<script setup>
import {ref, reactive, unref, onMounted, onBeforeMount} from 'vue';
import {cinema_list} from "@/apis/update.js";


// 表单部分
const cinemaSearch = reactive({
  ip: '',
  version: '',
})

const cinemaSearchRef = ref()

//  数据校验部分
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 === '') {
    callback()
  }
  if (!regex.test(value)) {
    callback(new Error('请输入正确的IP地址'))
  } else {
    callback()
  }
}

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

// 数据提交
const submitSearch = (formEl) => {
  console.log('至少执行了')
  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 = (formEl) => {
  console.log(formEl)
  if (!formEl) return
  console.log("resetSearch")
  formEl.resetFields()
}

// const get_table_data = {
//   async
// }

// 表格部分
// const tableData = cinema_list().then(res => {
//
//   if (res.code === 200) {
//     console.log(res)
//     return res.data
//   }
// })
// // console.log(tableData)
//

const get_table_data = async () => {
  await cinema_list().then(res => {
    if (res.length > 0) {
      console.log(res)
      return reactive([...res])
      // console.log(tableData)
    } else {
      console.log('else')
      return reactive([]);
    }
  }).catch(err => {
        console.log('err')
        console.log(err)
        return reactive([]);
      }
  )
}
//
// let tableData = reactive(
//     [
//       {
//         'update_time': '2023-12-13 16:16:18',
//         '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'
//       }
//     ]
// )
// console.log(tableData)
//
onMounted(
    async () => {
      console.log('onMounted1')
      const tableData = await get_table_data();
      console.log('onMounted2')
    }
)



</script>

<template>
  <el-form
      ref="cinemaSearchRef"
      :model="cinemaSearch"
      status-icon
      :rules="ipRule"
      class="cinema-search"
      :inline="true"
      style="width: 100%"
  >
    <el-row>
      <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="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="6">
        <el-form-item>
          <el-button type="primary" @click="submitSearch(cinemaSearchRef)">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <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="update_time" label="更新时间" width="200"></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="100"></el-table-column>
    <el-table-column prop="sys_ver" label="系统版本" width="120"></el-table-column>
    <el-table-column prop="client_ver" label="客户端版本" width="200"></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>
</template>

<style scoped>

</style>