|
|
|
@ -1,46 +1,48 @@ |
|
|
|
|
<script setup> |
|
|
|
|
import {onBeforeMount, onMounted, reactive, ref, unref, computed} from 'vue'; |
|
|
|
|
import {useStore, mapGetters, mapState} from "vuex"; |
|
|
|
|
import {cinema_list, cinema_search, cinema_user, change_cinema_user, write_git_version_to_db} from "@/apis/update.js"; |
|
|
|
|
import CinemaUpdate from "@/components/update/CinemaUpdate.vue"; |
|
|
|
|
import {project_list, prd_list, prd_add, prd_get, prd_update, prd_delete} from "@/apis/product.js"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 注册vuex |
|
|
|
|
const store = useStore() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// region 表单代码 |
|
|
|
|
// 搜索条件字段 |
|
|
|
|
const cinemaSearch = reactive({ |
|
|
|
|
ip: '', |
|
|
|
|
version: '', |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 点击搜索时提交的数据 |
|
|
|
|
const cinemaSearchRef = ref() |
|
|
|
|
|
|
|
|
|
// 数据校验部分 校验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 === '') { |
|
|
|
|
callback() |
|
|
|
|
} |
|
|
|
|
if (!regex.test(value)) { |
|
|
|
|
callback(new Error('请输入正确的IP地址')) |
|
|
|
|
} else { |
|
|
|
|
callback() |
|
|
|
|
} |
|
|
|
|
const fromData = reactive({ |
|
|
|
|
project: '全部', |
|
|
|
|
}) |
|
|
|
|
// region 表格数据代码 |
|
|
|
|
// 表格展示的数据 |
|
|
|
|
const tableData = ref([]) |
|
|
|
|
|
|
|
|
|
// 过滤条件数据 |
|
|
|
|
const projectList = ref([]) |
|
|
|
|
|
|
|
|
|
const currentPage = ref(1) |
|
|
|
|
const pageSize = ref(20) |
|
|
|
|
|
|
|
|
|
const total = ref(0) |
|
|
|
|
|
|
|
|
|
// 处理翻页 |
|
|
|
|
const handleCurrentChange = (newPage) => { |
|
|
|
|
currentPage.value = newPage |
|
|
|
|
get_table_data(currentPage.value, pageSize.value, fromData.project) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handleSizeChange = (newPageSize) => { |
|
|
|
|
pageSize.value = newPageSize |
|
|
|
|
get_table_data(currentPage.value, pageSize.value, fromData.project) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 指定表单的校验规则, 仅对ip进行校验 |
|
|
|
|
const ipRule = reactive({ |
|
|
|
|
ip: [{validator: ip_validate, trigger: 'change'}] |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 数据提交 点击搜索按键提交数据 |
|
|
|
|
const submitSearch = async (formEl) => { |
|
|
|
|
const {ip, version} = unref(cinemaSearch) |
|
|
|
|
const submitSearch = async () => { |
|
|
|
|
tableData.value = [] |
|
|
|
|
await cinema_search({ip, version}).then( |
|
|
|
|
await get_table_data(currentPage.value, pageSize.value, fromData.project).then( |
|
|
|
|
res => { |
|
|
|
|
if (Array.isArray(res)) { |
|
|
|
|
tableData.value = [...res] |
|
|
|
@ -53,64 +55,37 @@ const submitSearch = async (formEl) => { |
|
|
|
|
err => { |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
if (!formEl) return |
|
|
|
|
formEl.validate((valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
console.log('提交数据') |
|
|
|
|
} else { |
|
|
|
|
console.log('提交失败') |
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 重置搜索数据的逻辑 |
|
|
|
|
const resetSearch = (formEl) => { |
|
|
|
|
if (!formEl) return |
|
|
|
|
formEl.resetFields() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 刷新逻辑 |
|
|
|
|
const refresh = (formEL) => { |
|
|
|
|
formEL.resetFields() |
|
|
|
|
refresh_disable.value = true; |
|
|
|
|
refresh_loading.value = true; |
|
|
|
|
get_table_data() |
|
|
|
|
update_git_version() |
|
|
|
|
setTimeout(() => { |
|
|
|
|
refresh_disable.value = false; |
|
|
|
|
refresh_loading.value = false; |
|
|
|
|
}, 5000) |
|
|
|
|
} |
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
// region |
|
|
|
|
const update_git_version = async () => { |
|
|
|
|
await write_git_version_to_db().then(res => { |
|
|
|
|
console.log(res) |
|
|
|
|
// 通过异步请求获取影院列表数据 |
|
|
|
|
async function get_project_data() { |
|
|
|
|
projectList.value = [] |
|
|
|
|
await project_list().then(res => { |
|
|
|
|
if (Array.isArray(res)) { |
|
|
|
|
projectList.value = [...res] |
|
|
|
|
projectList.value.unshift({'id': 0, 'project_name': '全部', is_delete: false}) |
|
|
|
|
} else { |
|
|
|
|
} |
|
|
|
|
}).catch(err => { |
|
|
|
|
console.log(err) |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// region 表格数据代码 |
|
|
|
|
// 表格展示的数据 |
|
|
|
|
const tableData = ref([]) |
|
|
|
|
|
|
|
|
|
// 定义开关控制刷新按键的状态 disable和loading |
|
|
|
|
let refresh_disable = ref(false) |
|
|
|
|
let refresh_loading = ref(false) |
|
|
|
|
|
|
|
|
|
// 通过异步请求获取影院列表数据 |
|
|
|
|
async function get_table_data() { |
|
|
|
|
async function get_table_data(page_num = currentPage.value, page_size = pageSize.value, project_val = fromData.project) { |
|
|
|
|
tableData.value = [] |
|
|
|
|
await cinema_list().then(res => { |
|
|
|
|
if (Array.isArray(res)) { |
|
|
|
|
tableData.value = [...res] |
|
|
|
|
console.log('get_table_data') |
|
|
|
|
console.log(project_val) |
|
|
|
|
project_val = project_val === '全部' ? '' : project_val |
|
|
|
|
console.log(project_val) |
|
|
|
|
await prd_list(page_num, page_size, project_val).then(res => { |
|
|
|
|
total.value = res['count'] |
|
|
|
|
if (Array.isArray(res['results'])) { |
|
|
|
|
tableData.value = [...res['results']] |
|
|
|
|
console.log(tableData.value) |
|
|
|
|
} else { |
|
|
|
|
console.log('get_table_data.res is not an array') |
|
|
|
|
} |
|
|
|
|
}).catch(err => { |
|
|
|
|
console.log(err) |
|
|
|
@ -121,120 +96,88 @@ async function get_table_data() { |
|
|
|
|
// 定义生命周期,在加载时获取一次表格数据 |
|
|
|
|
onMounted( |
|
|
|
|
async () => { |
|
|
|
|
await get_table_data(); |
|
|
|
|
await get_project_data(); |
|
|
|
|
await get_table_data(currentPage.value, pageSize.value, fromData.project); |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
// region 常用人代码 |
|
|
|
|
// 定义常用人代码被选中的结果 |
|
|
|
|
const selectedUser = ref('') |
|
|
|
|
// 定义变量用于接受返回数据 |
|
|
|
|
let userData = ref([]) |
|
|
|
|
// 定义用于展示的数据变量 |
|
|
|
|
onMounted(async () => { |
|
|
|
|
await cinema_user().then((res) => { |
|
|
|
|
const user_list = res.map((item, index) => { |
|
|
|
|
return {key: item.id, label: item.username, value: item.username} |
|
|
|
|
}) |
|
|
|
|
user_list.unshift({key: 0, label: '暂无', value: '暂无'}) |
|
|
|
|
userData.value = [...user_list] |
|
|
|
|
}).catch((err) => { |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const cinemaUserChange = (user, id) => { |
|
|
|
|
const params = {user, id} |
|
|
|
|
change_cinema_user(params).then(res => { |
|
|
|
|
}).catch(err => { |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
// region 升级相关代码 |
|
|
|
|
const update_ip = ref('') |
|
|
|
|
const ver_id = ref(0) |
|
|
|
|
|
|
|
|
|
const changeDialogStatus = (ip, ver) => { |
|
|
|
|
store.state.updateModule.update_dialog_show = true |
|
|
|
|
update_ip.value = ip |
|
|
|
|
ver_id.value = ver |
|
|
|
|
} |
|
|
|
|
// endregion |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<el-form |
|
|
|
|
ref="cinemaSearchRef" |
|
|
|
|
:model="cinemaSearch" |
|
|
|
|
status-icon |
|
|
|
|
:rules="ipRule" |
|
|
|
|
class="cinema-search" |
|
|
|
|
:model="fromData" |
|
|
|
|
:inline="true" |
|
|
|
|
class="search_form" |
|
|
|
|
> |
|
|
|
|
<el-row> |
|
|
|
|
<el-col :span="5"> |
|
|
|
|
<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="5"> |
|
|
|
|
<el-form-item label="系统版本" prop="version"> |
|
|
|
|
<el-input v-model="cinemaSearch.version" placeholder="支持模糊查询" style="width: 160px;"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<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-col> |
|
|
|
|
</el-row> |
|
|
|
|
<el-form-item label="所属项目" label-width="90"> |
|
|
|
|
<el-select v-model="fromData.project" placeholder="请选择"> |
|
|
|
|
<el-option v-for="item in projectList" :key="item['project_name']" :label="item['project_name']" |
|
|
|
|
:value="item['project_name']"/> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-button type="primary" @click="submitSearch">搜索</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
<!-- <el-button style="margin-right: 0">添加</el-button>--> |
|
|
|
|
</el-form> |
|
|
|
|
<el-table :data="tableData" style="width: 100%"> |
|
|
|
|
<el-table-column prop="update_time" label="最后查询时间" min-width="180"></el-table-column> |
|
|
|
|
<el-table-column prop="ip" label="操作" min-width="80"> |
|
|
|
|
<el-table-column prop="project" label="所属项目" min-width="200"></el-table-column> |
|
|
|
|
<el-table-column prop="prd_version" label="版本" min-width="200"></el-table-column> |
|
|
|
|
<el-table-column prop="prd_doc_link" label="产品原型链接" min-width="300"> |
|
|
|
|
<template v-slot="scope"> |
|
|
|
|
<el-button type="info" size="small" @click="changeDialogStatus(scope.row.ip, scope.row.ver_id)">更新</el-button> |
|
|
|
|
<a target="_blank" style="color:#007bff;" v-if="scope.row.prd_doc_link!=null" |
|
|
|
|
v-bind:href="scope.row.prd_doc_link"> |
|
|
|
|
{{ scope.row.prd_doc_link }} |
|
|
|
|
</a> |
|
|
|
|
<!-- <span v-else> {{ scope.row.prd_doc_link }}</span>--> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="selectedUser" label="当前使用人" min-width="120"> |
|
|
|
|
<template v-slot="scope"> |
|
|
|
|
<el-select v-model="scope.row.user" class="m-2" size="small" laceholder="请选择" style="width: 80px" |
|
|
|
|
@change="cinemaUserChange(scope.row.user, scope.row.id)"> |
|
|
|
|
<el-option v-for="data in userData" :key="data.id" :label="data.label" |
|
|
|
|
:value="data.value"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
<el-table-column prop="prd_comment" label="版本描述" min-width="300"> |
|
|
|
|
<template #default="{ row }"> |
|
|
|
|
<el-tooltip |
|
|
|
|
class="item" |
|
|
|
|
popper-class="custom-tooltip" |
|
|
|
|
effect="dark" |
|
|
|
|
:raw-content="true" |
|
|
|
|
:content="row.prd_comment" |
|
|
|
|
placement="top-end"> |
|
|
|
|
<span>{{ row.prd_comment.length > 10 ? row.prd_comment.slice(0, 10) + '...' : row.prd_comment }}</span> |
|
|
|
|
</el-tooltip> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="name" label="影院名称" min-width="250"></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="100"></el-table-column> |
|
|
|
|
<el-table-column prop="inner_id" label="鼎新编码" min-width="90"></el-table-column> |
|
|
|
|
<el-table-column prop="sys_ver" label="系统版本" min-width="175"></el-table-column> |
|
|
|
|
<el-table-column prop="client_ver" label="客户端版本" min-width="150"></el-table-column> |
|
|
|
|
<el-table-column prop="is_cloud" label="云版本" min-width="80"></el-table-column> |
|
|
|
|
<el-table-column prop="remote_label" label="远程办公识别码" min-width="160" class-name="remote"></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-column prop="update_at" label="最后更新时间" min-width="180"></el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<CinemaUpdate :ip="update_ip" :ver_id="ver_id"></CinemaUpdate> |
|
|
|
|
<div class="pagination-container"> |
|
|
|
|
<el-pagination |
|
|
|
|
v-model:current-page="currentPage" |
|
|
|
|
v-model:page-size="pageSize" |
|
|
|
|
:page-sizes="[10, 20, 50]" |
|
|
|
|
size="small" |
|
|
|
|
layout="sizes, prev, pager, next" |
|
|
|
|
:total="total" |
|
|
|
|
@size-change="handleSizeChange" |
|
|
|
|
@current-change="handleCurrentChange" |
|
|
|
|
> |
|
|
|
|
</el-pagination> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
:deep(td.remote div) { |
|
|
|
|
font-family: "YaHei Consolas Hybrid"; |
|
|
|
|
<style> |
|
|
|
|
.pagination-container { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.search_form { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-start; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.custom-tooltip { |
|
|
|
|
max-width: 500px; /* 设置最大宽度为 300px */ |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|