update:样式修改
This commit is contained in:
ltx
parent
245a15a5bc
commit
cbff1eea80
2
.env
2
.env
@ -8,4 +8,4 @@ VITE_OPEN = true
|
||||
VITE_OPEN_CDN = false
|
||||
|
||||
# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
|
||||
VITE_PUBLIC_PATH = 'https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_web/202606251400/'
|
||||
VITE_PUBLIC_PATH = 'https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/event_web/202606301530/'
|
||||
@ -302,6 +302,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ImageViewer 图片查看器层级修复
|
||||
------------------------------- */
|
||||
// 修复表格内 el-image 预览时被表格固定列/表头等遮挡的问题
|
||||
.el-image-viewer__wrapper {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
.el-image-viewer__mask {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
.el-image-viewer__canvas {
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
.el-image-viewer__img{
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
.el-image-viewer__close {
|
||||
z-index: 10001 !important;
|
||||
}
|
||||
.el-image-viewer__actions {
|
||||
z-index: 10001 !important;
|
||||
}
|
||||
|
||||
/* scrollbar
|
||||
------------------------------- */
|
||||
.el-scrollbar__bar {
|
||||
|
||||
@ -1,15 +1,7 @@
|
||||
<template>
|
||||
<div class="system-menu-container layout-padding">
|
||||
<ProTable
|
||||
ref="tableRef"
|
||||
:request-api="eventPagePost"
|
||||
:columns="columns"
|
||||
:pagination="true"
|
||||
:tool-button="false"
|
||||
:initParam="initParam"
|
||||
toolButton
|
||||
border
|
||||
>
|
||||
<ProTable ref="tableRef" :request-api="eventPagePost" :columns="columns" :pagination="true" :tool-button="false"
|
||||
:initParam="initParam" toolButton border>
|
||||
<template #tools>
|
||||
<el-button v-auth="'event:add'" type="primary" @click="onOpenMenu()"> 新增 </el-button>
|
||||
<el-button v-auth="'event:export'" type="primary" @click="showExport"> 导出 </el-button>
|
||||
@ -17,6 +9,9 @@
|
||||
<template #index="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
<template #eventName="scope">
|
||||
<div class="event-name-cell">{{ scope.row?.eventName || '-' }}</div>
|
||||
</template>
|
||||
<template #coverImage="scope">
|
||||
<el-image :src="scope.row.coverImage" style="height: 80px" fit="cover" />
|
||||
</template>
|
||||
@ -25,14 +20,34 @@
|
||||
{{ getEventStatusText(scope.row.eventStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<template #registrationTime="scope">
|
||||
<div v-if="scope.row.registrationStartTime && scope.row.registrationEndTime">
|
||||
<div>开始：{{ formatDateTime(scope.row.registrationStartTime) }}</div>
|
||||
<div>截止：{{ formatDateTime(scope.row.registrationEndTime) }}</div>
|
||||
</div>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
|
||||
<template #matchTime="scope">
|
||||
<div v-if="scope.row.matchStartTime && scope.row.matchEndTime">
|
||||
<div>开始：{{ formatDateTime(scope.row.matchStartTime) }}</div>
|
||||
<div>截止：{{ formatDateTime(scope.row.matchEndTime) }}</div>
|
||||
</div>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
|
||||
<template #action="scope">
|
||||
<el-button v-auth="'event:edit'" size="small" text type="primary" @click="onOpenMenu(scope.row.id)"> 编辑 </el-button>
|
||||
<el-button v-auth="'event:edit'" size="small" text type="primary" @click="onOpenMenu(scope.row.id)"> 编辑
|
||||
</el-button>
|
||||
<el-popconfirm title="确认删除吗？" @confirm="onDeleteMenu(scope.row.id)">
|
||||
<template #reference>
|
||||
<el-button v-auth="'event:delete'" size="small" text type="danger"> 删除 </el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-button v-auth="'event:workbench'" size="small" text type="primary" @click="onOpenWorkBench(scope.row.id)"> 赛事工作台 </el-button>
|
||||
<el-button v-auth="'event:workbench'" size="small" text type="primary"
|
||||
@click="onOpenWorkBench(scope.row.id)"> 赛事工作台
|
||||
</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
<MenuDialog ref="menuDialogRef" @refresh="tableRef?.reset" @update:table="refreshTable" />
|
||||
@ -49,7 +64,9 @@ import ProTable from '/@/components/ProTable/index.vue';
|
||||
import MenuDialog from './dialog.vue';
|
||||
import WorkDialog from './work.vue';
|
||||
import ExportDialog from './exportDialog.vue';
|
||||
import { eventPagePost , eventDeleteDelete , eventExportPost} from '/@/api/match/event';
|
||||
import { eventPagePost, eventDeleteDelete, eventExportPost } from '/@/api/match/event';
|
||||
import { formatDate } from '/@/utils/formatTime';
|
||||
|
||||
//table组件实例
|
||||
const tableRef = ref();
|
||||
const exportDialogRef = ref();
|
||||
@ -76,7 +93,16 @@ const getEventStatusText = (status) => {
|
||||
return eventStatusMap[normalizedStatus]?.text ?? (status ?? '-');
|
||||
};
|
||||
|
||||
const refreshTable = () =>{
|
||||
const formatDateTime = (v) => {
|
||||
if (!v) return '-';
|
||||
try {
|
||||
return formatDate(new Date(v), 'YYYY-mm-dd HH:MM:SS');
|
||||
} catch {
|
||||
return safeString(v);
|
||||
}
|
||||
};
|
||||
|
||||
const refreshTable = () => {
|
||||
initParam.value.refresh = !initParam.value.refresh
|
||||
}
|
||||
const columns = reactive([
|
||||
@ -96,7 +122,7 @@ const columns = reactive([
|
||||
},
|
||||
},
|
||||
{
|
||||
width: '120px',
|
||||
width: '160px',
|
||||
prop: 'coverImage',
|
||||
label: '封面',
|
||||
align: 'center',
|
||||
@ -165,6 +191,7 @@ const columns = reactive([
|
||||
type: 'date',
|
||||
},
|
||||
},
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
width: '160px',
|
||||
@ -176,6 +203,7 @@ const columns = reactive([
|
||||
type: 'date',
|
||||
},
|
||||
},
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
width: '160px',
|
||||
@ -187,6 +215,7 @@ const columns = reactive([
|
||||
type: 'date',
|
||||
},
|
||||
},
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
width: '160px',
|
||||
@ -198,6 +227,17 @@ const columns = reactive([
|
||||
type: 'date',
|
||||
},
|
||||
},
|
||||
isShow: false,
|
||||
},
|
||||
{
|
||||
width: '200px',
|
||||
prop: 'registrationTime',
|
||||
label: '报名时间',
|
||||
},
|
||||
{
|
||||
width: '200px',
|
||||
prop: 'matchTime',
|
||||
label: '比赛时间',
|
||||
},
|
||||
{ prop: 'action', label: '操作', align: 'center', width: 200, fixed: 'right', isShow: auths(['event:edit', 'event:delete', 'event:workbench']) },
|
||||
]);
|
||||
@ -287,7 +327,7 @@ const onOpenMenu = async (id) => {
|
||||
await menuDialogRef.value.openDialog(id);
|
||||
};
|
||||
|
||||
const onOpenWorkBench = async(id)=>{
|
||||
const onOpenWorkBench = async (id) => {
|
||||
await workDialogRef.value.openDialog(id);
|
||||
};
|
||||
|
||||
@ -305,20 +345,28 @@ const onDeleteMenu = async (id) => {
|
||||
<style scoped lang="scss">
|
||||
// 保留 border（拖拽宽度需要），表头显示竖线作为拖拽提示，数据行隐藏竖线
|
||||
:deep(.el-table--border) {
|
||||
// 数据行不显示竖线
|
||||
td.el-table__cell {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
// 表头保留竖线，作为可拖拽宽度的视觉提示
|
||||
th.el-table__cell {
|
||||
border-right: 1px solid #dcdfe6 !important;
|
||||
cursor: col-resize;
|
||||
}
|
||||
// 数据行不显示竖线
|
||||
td.el-table__cell {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
// 隐藏表格右侧外边框线
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
// 表头保留竖线，作为可拖拽宽度的视觉提示
|
||||
th.el-table__cell {
|
||||
border-right: 1px solid #dcdfe6 !important;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
// 隐藏表格右侧外边框线
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 赛事名称换行 */
|
||||
.event-name-cell {
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -54,11 +54,8 @@
|
||||
{{ scope.row.orderStatusText || '-' }}
|
||||
</template>
|
||||
<template #paymentProofUrl="scope">
|
||||
<el-image v-if="scope.row.paymentProofUrl"
|
||||
style="width: 40px; height: 40px"
|
||||
:src="scope.row.paymentProofUrl"
|
||||
:preview-src-list="[scope.row.paymentProofUrl]"
|
||||
fit="cover" />
|
||||
<PreviewImage v-if="scope.row.paymentProofUrl" :src="scope.row.paymentProofUrl" width="40px"
|
||||
height="40px" fit="cover" radius="4px" :show-zoom-icon="true" />
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<template #originalAmount="scope">
|
||||
@ -109,6 +106,7 @@ import { ref, computed } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Download } from '@element-plus/icons-vue';
|
||||
import ProTable from '/@/components/ProTable/index.vue';
|
||||
import PreviewImage from '/@/components/PreviewImage/index.vue';
|
||||
import { orderPageGet, orderDetailGet, orderExportGet, orderStatsGet } from '/@/api/match/order';
|
||||
|
||||
const tableRef = ref();
|
||||
|
||||
@ -2,8 +2,12 @@
|
||||
<div class="system-menu-container layout-padding">
|
||||
<ProTable ref="tableRef" :request-api="usereventregistrationListGet" :columns="columns" :pagination="true"
|
||||
:tool-button="false" :init-param="initParam" row-key="id">
|
||||
<template #name="scope">
|
||||
<div class="event-name-cell">{{ scope.row?.name || '-' }}</div>
|
||||
</template>
|
||||
|
||||
<template #coverImage="scope">
|
||||
<PreviewImage v-if="scope.row?.coverImage" :src="scope.row.coverImage" width="80px" height="60px"
|
||||
<PreviewImage v-if="scope.row?.coverImage" :src="scope.row.coverImage" width="180px" height="90px"
|
||||
fit="cover" radius="4px" :show-zoom-icon="true" />
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
@ -807,7 +811,7 @@ const columns = ref([
|
||||
fixed: 'left',
|
||||
minWidth: 170,
|
||||
},
|
||||
{ prop: 'coverImage', label: '封面', align: 'center', width: 110 },
|
||||
{ prop: 'coverImage', label: '封面', align: 'center', width: 200 },
|
||||
{ prop: 'type', label: '赛事类型', align: 'center', width: 120 },
|
||||
{ prop: 'registrationType', label: '报名方式', align: 'center', width: 120 },
|
||||
{ prop: 'chargeMode', label: '收费模式', align: 'center', width: 120 },
|
||||
@ -820,9 +824,9 @@ const columns = ref([
|
||||
{ label: '已结束', value: 4 },
|
||||
],
|
||||
},
|
||||
{ prop: 'registrationStartTime', label: '报名起止时间', align: 'center', minWidth: 320 },
|
||||
{ prop: 'matchStartTime', label: '比赛起止时间', align: 'center', minWidth: 320 },
|
||||
{ prop: 'action', label: '操作', align: 'center', fixed: 'right', width: 210 },
|
||||
{ prop: 'registrationStartTime', label: '报名起止时间', align: 'center', minWidth: 150 },
|
||||
{ prop: 'matchStartTime', label: '比赛起止时间', align: 'center', minWidth: 150 },
|
||||
{ prop: 'action', label: '操作', align: 'center', fixed: 'right', width: 180 },
|
||||
]);
|
||||
|
||||
// -------------------- 字段展示（列表） --------------------
|
||||
@ -4136,6 +4140,13 @@ const handleCreateOrderAndPay = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 赛事名称换行 */
|
||||
.event-name-cell {
|
||||
word-break: break-word;
|
||||
white-space: normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.edc-rule-grid {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user