2025-09-16 17:46:11 +08:00

144 lines
4.3 KiB
Vue

<template>
<div>
<!-- 搜索区域 -->
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px">
<el-form-item label="编号/名称" prop="roleName">
<el-input v-model="queryParams.roleName" placeholder="请输入集合编号/球队名称" clearable style="width: 240px"
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="联赛类型" prop="roleKey">
<el-select v-model="queryParams.roleKey" @change="handleQuery" style="width: 240px" clearable placeholder="请选择联赛类型">
<el-option
v-for="item in dataScopeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间">
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 表格数据 -->
<el-table v-loading="loading" :data="roleList">
<el-table-column label="赛事编号" prop="matchNumStr" />
<el-table-column label="联赛" prop="leagueAllName" :show-overflow-tooltip="true"/>
<el-table-column label="主队" prop="homeTeamAllName" :show-overflow-tooltip="true" />
<el-table-column label="客队" prop="awayTeamAbbName" />
<el-table-column label="固定奖金" prop="matchId">
<template #default="scope">
<el-button link type="primary" @click="handleJumpLink(scope.row)">查看</el-button>
</template>
</el-table-column>
<el-table-column label="比赛开始时间" align="center" prop="matchDateTime">
<template #default="scope">
<span>{{ parseTime(scope.row.matchDateTime) }}</span>
</template>
</el-table-column>
<el-table-column label="比赛状态" prop="matchStatus" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="查看" placement="top" v-if="scope.row.roleId !== 1">
<el-button link type="primary" icon="view" @click="handleView(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页区域 -->
<pagination
:show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList" />
</div>
</template>
<script setup name="Role">
import { Info } from "@/api/tc/eventAnalysisReport"
import { jumpLink } from "@/utils/tc"
import { onMounted } from "vue"
const router = useRouter()
const { proxy } = getCurrentInstance()
const roleList = ref([])
const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)
const dateRange = ref([])
/** 数据范围选项*/
const dataScopeOptions = ref([
{ value: "1", label: "全部数据权限" },
{ value: "2", label: "自定数据权限" },
{ value: "3", label: "本部门数据权限" },
{ value: "4", label: "本部门及以下数据权限" },
{ value: "5", label: "仅本人数据权限" }
])
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
roleName: undefined,
roleKey: undefined,
status: undefined
},
rules: {},
})
const { queryParams } = toRefs(data)
/** 跳转链接 */
function handleJumpLink(row) {
jumpLink(row.matchId, 1)
}
/** 查看详情 */
function handleView(row) {
router.push({
path: '/tc/videoScript/detail',
query: {
id: row.matchId
}
})
}
/** 查询角色列表 */
function getList() {
loading.value = true
Info(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
roleList.value = response.rows
total.value = response.total
}).finally(() => {
loading.value = false
})
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1
getList()
}
/** 重置按钮操作 */
function resetQuery() {
dateRange.value = []
proxy.resetForm("queryRef")
handleQuery()
}
onMounted(() => {
getList()
})
</script>