完成表格的前端功能

main
roger_home_pc 11 months ago
parent d39e5d5e3b
commit b8d9e3a6bf
  1. 8
      src/apis/update.js
  2. 38
      src/request/index.js
  3. 98
      src/views/update/index.vue

@ -7,3 +7,11 @@ export const cinema_list = () => {
method: 'get'
})
}
export const cinema_search = (params) => {
return request({
url: '/update/cinema/search',
method: 'get',
params: params
})
}

@ -4,21 +4,6 @@ import config from "@/request/config.js";
// import {rejects} from "node:assert";
// import router from "@/router";
// const config = {
// method: 'get',
// baseURL: 'http://127.0.0.1:8000',
// headers: {
// 'Content-Type': 'application/json;charset=UTF-8',
// 'Authorization': 'token 4e63b8854974c1fdac9deb891fd74dc145b53f85'
// },
// timeout: 10000,
// withCredentials: true,
// responseType: 'json',
// }
console.log('axios')
function request(options) {
const instance = axios.create({...config})
@ -64,8 +49,29 @@ function request(options) {
})
}
//
// // 调试信息
// const config = {
// method: 'get',
// baseURL: 'http://127.0.0.1:8000',
// headers: {
// 'Content-Type': 'application/json;charset=UTF-8',
// 'Authorization': 'token 4e63b8854974c1fdac9deb891fd74dc145b53f85'
// },
// timeout: 10000,
// withCredentials: true,
// responseType: 'json',
// }
//
// const params = {ip: '', version: '33'}
// // const params = {ip: '172.16.3.112'}
// // const ip = '172.16.3.112'
// // const version = '11'
// request({
// url: '/update/cinema/'
// // url: `/update/cinema/search/ip/${ip}/version/${version}/`,
// url: `update/cinema/search/`,
// method: 'get',
// params: params
// }).then(res => {
// console.log(res)
// })

@ -1,6 +1,6 @@
<script setup>
import {ref, reactive, unref, onMounted, onBeforeMount} from 'vue';
import {cinema_list} from "@/apis/update.js";
import {onBeforeMount, onMounted, reactive, ref, unref} from 'vue';
import {cinema_list, cinema_search} from "@/apis/update.js";
//
@ -29,9 +29,27 @@ const ipRule = reactive({
})
//
const submitSearch = (formEl) => {
const submitSearch = async (formEl) => {
console.log('至少执行了')
console.log(cinemaSearch.ip)
const {ip, version} = unref(cinemaSearch)
await cinema_search({ip, version}).then(
res => {
if (Array.isArray(res)) {
tableData.value = [...res]
console.log(tableData)
} else {
console.log('else')
}
}
).catch(
err => {
console.log('err')
console.log(err)
}
)
// console.log(formEl)
console.log(ip, version)
if (!formEl) return
@ -52,66 +70,32 @@ const resetSearch = (formEl) => {
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 () => {
const tableData = ref([])
async function get_table_data() {
await cinema_list().then(res => {
if (res.length > 0) {
console.log(res)
return reactive([...res])
// console.log(tableData)
if (Array.isArray(res)) {
tableData.value = [...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')
await get_table_data();
console.log(tableData)
}
)
</script>
<template>
@ -142,19 +126,23 @@ onMounted(
<el-form-item>
<el-button @click="resetSearch(cinemaSearchRef)">重置</el-button>
</el-form-item>
<el-form-item>
<el-button @click="get_table_data()">刷新</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-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="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>
<el-table-column prop="client_ver" label="客户端版本" min-width="200"></el-table-column>
<el-table-column prop="db_user" label="数据库账号" min-width="100"></el-table-column>
<el-table-column prop="db_pwd" label="数据库密码" min-width="120"></el-table-column>
</el-table>
</template>

Loading…
Cancel
Save