You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.3 KiB
117 lines
3.3 KiB
<script setup> |
|
import {ref, reactive, unref} from 'vue'; |
|
|
|
// 表单部分 |
|
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 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' |
|
} |
|
] |
|
) |
|
</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>
|
|
|