Commit 71aaa774 authored by 黄同智's avatar 黄同智

全局表格替换自定义表格组件

parent 5cb0353f
<template>
<div class="common-table-wrapper">
<!-- 1. 表格主体 -->
<el-table :data="tableData" style="width: 100%" :border="border" :size="size" :stripe="stripe" v-loading="loading"
@selection-change="handleSelectionChange">
<el-table :data="tableData" style="width: 100%" :border="border" :size="size" :stripe="stripe"
:row-key="rowKey || undefined" v-loading="loading" @selection-change="handleSelectionChange">
<!-- 默认插槽:让父组件自定义列 -->
<slot></slot>
......@@ -14,7 +14,7 @@
</el-table>
<!-- 2. 分页组件 -->
<div class="pagination-container">
<div v-if="showPagination" class="pagination-container">
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
:page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
......@@ -58,6 +58,14 @@ const props = defineProps({
size: {
type: String,
default: ''
},
showPagination: {
type: Boolean,
default: true,
},
rowKey: {
type: [String, Function],
default: '',
}
});
......
......@@ -56,7 +56,7 @@
<el-alert v-if="settingVisible" class="mb-10" title="已打开字段配置面板" type="info" show-icon :closable="false" />
<el-table v-if="metric === '直播间汇总'" :data="pagedRows" class="analysis-table" row-key="room">
<SeTable v-if="metric === '直播间汇总'" :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
<el-table-column fixed prop="room" label="直播间" min-width="200" show-overflow-tooltip />
<el-table-column prop="owner" label="负责人" width="130" align="center" />
<el-table-column prop="cost" label="消耗 ↑↓" width="140" align="center">
......@@ -73,9 +73,9 @@
<el-table-column prop="rate" label="转化率" width="120" align="center" />
<el-table-column prop="unitCost" label="转化成本" width="130" align="center" />
<el-table-column prop="show" label="展示数" width="150" align="center" />
</el-table>
</SeTable>
<el-table v-else-if="metric === '人员数据'" :data="pagedRows" class="analysis-table" row-key="name">
<SeTable v-else-if="metric === '人员数据'" :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
<el-table-column fixed prop="name" label="人员名称" min-width="220">
<template #default="{ row }"><span :class="row.link ? 'link-text font-bold' : 'font-bold'">{{
row.name }}</span></template>
......@@ -94,9 +94,9 @@
<el-table-column prop="conversion" label="转化数" min-width="120" align="center" />
<el-table-column prop="rate" label="转化率" min-width="120" align="center" />
<el-table-column prop="unitCost" label="转化成本" min-width="130" align="center" />
</el-table>
</SeTable>
<el-table v-else-if="metric === '分类数据'" :data="pagedRows" class="analysis-table" row-key="firstCategory">
<SeTable v-else-if="metric === '分类数据'" :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
<el-table-column fixed prop="firstCategory" label="一级分类" min-width="180" />
<el-table-column prop="secondCategory" label="二级分类" min-width="200" />
<el-table-column prop="accountCount" label="关联账户数" min-width="130" align="center" />
......@@ -111,9 +111,9 @@
<el-table-column prop="amount" label="成交金额" min-width="150" align="center" />
<el-table-column prop="coupon" label="智能优惠券" min-width="150" align="center" />
<el-table-column prop="conversion" label="转化数" min-width="120" align="center" />
</el-table>
</SeTable>
<el-table v-else :data="pagedRows" class="analysis-table" row-key="account">
<SeTable v-else :data-list="pagedRows" class="analysis-table" :total="currentTableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
<el-table-column fixed prop="account" label="广告账户" min-width="240">
<template #default="{ row }">
<div class="font-bold">{{ row.account }}</div>
......@@ -147,13 +147,7 @@
</el-table-column>
<el-table-column prop="amount" label="成交金额" min-width="150" align="center" />
<el-table-column prop="coupon" label="智能优惠券" min-width="150" align="center" />
</el-table>
<div class="table-footer">
<el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
background layout="total, sizes, prev, pager, next, jumper" :total="currentTableRows.length"
:page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
</div>
</SeTable>
</el-card>
</div>
</template>
......@@ -263,8 +257,9 @@ const setMetric = (value: string) => {
metric.value = value;
pageData.currentPage = 1;
};
const handleSizeChange = () => {
pageData.currentPage = 1;
const handleTablePageChange = (page: number, size: number) => {
pageData.currentPage = page;
pageData.pageSize = size;
};
</script>
......
......@@ -38,7 +38,7 @@
<el-button @click="exportData">导出</el-button>
</div>
<el-table :data="pagedRows" class="analysis-table" row-key="name">
<SeTable :data-list="pagedRows" class="analysis-table" :total="tableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
<el-table-column fixed prop="name" label="广告账户" min-width="220">
<template #default="{ row }">
<div class="font-bold">{{ row.name }}</div>
......@@ -81,13 +81,7 @@
<el-table-column prop="standardCost" label="标准消耗" width="130" align="right" />
<el-table-column prop="globalCost" label="全域消耗" width="130" align="right" />
<el-table-column prop="remark" label="备注" width="100" align="center" />
</el-table>
<div class="flex justify-end">
<el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
background layout="total, sizes, prev, pager, next, jumper" :total="tableRows.length"
:page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
</div>
</SeTable>
</el-card>
</div>
</template>
......@@ -134,8 +128,9 @@ const reset = () => {
category.value = '';
date.value = '';
};
const handleSizeChange = () => {
pageData.currentPage = 1;
const handleTablePageChange = (page: number, size: number) => {
pageData.currentPage = page;
pageData.pageSize = size;
};
</script>
......
......@@ -48,7 +48,7 @@
<el-button class="w-34 p-0" @click="settingVisible = !settingVisible"></el-button>
</div>
<el-alert v-if="settingVisible" class="mb-10" title="已打开字段配置面板" type="info" show-icon :closable="false" />
<el-table :data="tableRows" class="analysis-table" row-key="department">
<SeTable :data-list="tableRows" class="analysis-table" :total="tableRows.length" :default-page-size="10">
<el-table-column prop="department" label="部门" min-width="260">
<template #default="{ row }"><span :class="row.link ? 'link-text font-bold' : 'font-bold'">{{ row.department }}</span></template>
</el-table-column>
......@@ -62,7 +62,7 @@
<el-table-column prop="deleted" label="已删除 ↑↓" align="center">
<template #default="{ row }"><span class="color-8aa">{{ row.deleted }}</span></template>
</el-table-column>
</el-table>
</SeTable>
<div class="scroll-bar mt-14"></div>
</el-card>
</div>
......
......@@ -64,7 +64,7 @@
<el-button type="primary" @click="exportData">导出</el-button>
</div>
<el-table :data="tableRows" class="analysis-table" row-key="name">
<SeTable :data-list="tableRows" class="analysis-table" :total="tableRows.length" :default-page-size="10">
<el-table-column label="店铺" align="center">
<el-table-column prop="name" label="名称" min-width="260" />
<el-table-column prop="code" label="code" min-width="180" />
......@@ -79,7 +79,7 @@
<el-table-column prop="payoutProcessing" label="Processing 待入账" min-width="160" align="right" />
<el-table-column prop="payoutFailed" label="Failed 入账失败" min-width="150" align="right" />
</el-table-column>
</el-table>
</SeTable>
</el-card>
</div>
</template>
......
......@@ -60,7 +60,7 @@
</div>
</div>
<el-alert v-if="fieldVisible" class="mb-10" title="已打开字段配置面板" type="info" show-icon :closable="false" />
<el-table :data="tableRows" class="analysis-table" row-key="department">
<SeTable :data-list="tableRows" class="analysis-table" :total="tableRows.length" :default-page-size="10" row-key="department">
<el-table-column prop="date" label="数据时间" min-width="190" />
<el-table-column prop="department" label="部门名称" min-width="160">
<template #default="{ row }"><span class="color-main font-bold">{{ row.department }}</span></template>
......@@ -75,7 +75,7 @@
<el-table-column prop="viral" label="爆款视频数 ↑↓" align="center">
<template #default="{ row }"><span class="color-8aa">{{ row.viral }}</span></template>
</el-table-column>
</el-table>
</SeTable>
</div>
</template>
......
......@@ -61,7 +61,7 @@
</div>
</div>
<el-alert v-if="fieldVisible" class="mb-10" title="已打开字段配置面板" type="info" show-icon :closable="false" />
<el-table :data="tableRows" class="analysis-table" row-key="department">
<SeTable :data-list="tableRows" class="analysis-table" :total="tableRows.length" :default-page-size="10" row-key="department">
<el-table-column prop="department" label="部门名称" min-width="180">
<template #default="{ row }"><span class="color-main font-bold">{{ row.department }}</span></template>
</el-table-column>
......@@ -81,7 +81,7 @@
</div>
</template>
</el-table-column>
</el-table>
</SeTable>
<TaskStatsDialog v-model:visible="statsVisible" :row="currentRow" />
<TaskDetailDialog v-model:visible="detailVisible" :department="currentRow?.department" />
......
......@@ -7,7 +7,7 @@
</div>
<div class="px-26 pt-16 pb-26">
<el-table :data="detailRows" class="detail-table" row-key="id">
<SeTable :data-list="detailRows" class="detail-table" :total="detailRows.length" :default-page-size="10" row-key="id">
<el-table-column prop="id" label="任务编号" min-width="130" />
<el-table-column prop="name" label="任务名称" min-width="170">
<template #default="{ row }">
......@@ -28,7 +28,7 @@
</template>
</el-table-column>
<el-table-column prop="time" label="时间" width="200" align="center" />
</el-table>
</SeTable>
<div class="flex justify-end mt-26">
<el-button type="primary" class="w-64" @click="visible = false">关闭</el-button>
......
......@@ -91,7 +91,8 @@
</div>
<el-button class="round-6" @click="query">⇩ 导出表格</el-button>
</div>
<el-table :data="pagedTableData" class="analysis-table">
<SeTable :data-list="pagedTableData" class="analysis-table" :total="tableData.length"
:default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
<el-table-column prop="account" label="广告账户" min-width="210" show-overflow-tooltip />
<el-table-column prop="subject" label="主体" min-width="180" show-overflow-tooltip />
<el-table-column prop="department" label="团队" width="130" />
......@@ -125,12 +126,7 @@
<el-table-column prop="risk" label="同质化素材风险-排队投放素材" width="230" align="center">
<template #default="{ row }"><span class="font-bold color-green">{{ row.risk }}</span></template>
</el-table-column>
</el-table>
<div class="py-12 flex justify-end table-footer">
<el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
:page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
</div>
</SeTable>
</el-card>
</div>
</template>
......@@ -161,7 +157,6 @@ const collapsed = ref(false);
const pageData = reactive({
currentPage: 1,
pageSize: 10,
pageSizes: [10, 20, 50, 100],
});
const platformTabs = [
{ label: '巨量千川', value: 'qianchuan', icon: 'Ⅲ' },
......@@ -207,24 +202,19 @@ const reset = () => {
category.value = '';
dateRange.value = '';
};
const handleSizeChange = () => {
pageData.currentPage = 1;
const handleTablePageChange = (page: number, size: number) => {
pageData.currentPage = page;
pageData.pageSize = size;
};
</script>
<style scoped lang="scss">
.filter-header,
.ratio-title,
.table-title,
.table-footer {
.table-title {
border-bottom: 1px solid #edf0f5;
}
.table-footer {
border-top: 1px solid #edf0f5;
border-bottom: none;
}
.platform-tab {
color: #607086;
......
......@@ -42,7 +42,8 @@
</div>
</div>
<el-table :data="pagedTableData" class="analysis-table">
<SeTable :data-list="pagedTableData" class="analysis-table" :total="tableData.length"
:default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
<el-table-column prop="department" label="团队" min-width="160" />
<el-table-column prop="cost" label="消耗" width="120" align="center" />
<el-table-column prop="roi" label="roi" width="90" align="center" />
......@@ -58,12 +59,7 @@
<el-table-column prop="clickRate" label="点击率" width="110" align="center" />
<el-table-column prop="avgPrice" label="平均点击单价" width="140" align="center" />
<el-table-column prop="play" label="播放量" width="130" align="center" />
</el-table>
<div class="py-12 flex justify-end table-footer">
<el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
:page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
</div>
</SeTable>
</el-card>
</div>
</template>
......@@ -80,7 +76,6 @@ const radioVal = ref(1)
const pageData = reactive({
currentPage: 1,
pageSize: 10,
pageSizes: [10, 20, 50, 100],
});
const platforms = ['巨量广告', '巨量千川', '磁力智投', '磁力金牛', '百度营销', '小红书'];
const scopes = ['团队', '分组', '个人', '明细', '分日', '分月'];
......@@ -96,8 +91,9 @@ const pagedTableData = computed(() => {
const start = (pageData.currentPage - 1) * pageData.pageSize;
return tableData.slice(start, start + pageData.pageSize);
});
const handleSizeChange = () => {
pageData.currentPage = 1;
const handleTablePageChange = (page: number, size: number) => {
pageData.currentPage = page;
pageData.pageSize = size;
};
</script>
......@@ -107,16 +103,10 @@ const handleSizeChange = () => {
border: 1px solid #dfe7f2;
}
.sub-tabs,
.table-footer {
.sub-tabs {
border-bottom: 1px solid #edf0f5;
}
.table-footer {
border-top: 1px solid #edf0f5;
border-bottom: none;
}
.header-tabs .active {
color: rgba(var(--main-color), 1);
border-bottom: 2px solid rgba(var(--main-color), 1);
......
......@@ -74,7 +74,8 @@
<el-button class="w-34 h-34 round-6"></el-button>
</div>
</div>
<el-table :data="pagedTableData" class="analysis-table">
<SeTable :data-list="pagedTableData" class="analysis-table" :total="tableData.length"
:default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
<el-table-column prop="name" label="模特姓名 / 标签" width="130" />
<el-table-column prop="videos" label="视频数量" width="100" align="center" />
<el-table-column prop="cost" label="消耗" width="130" align="center" />
......@@ -96,18 +97,7 @@
<el-table-column prop="orders" label="净成交订单数" width="130" align="center" />
<el-table-column prop="netRoi" label="净成交ROI" width="110" align="center" />
<el-table-column prop="unit" label="净成交订单成本" width="140" align="center" />
</el-table>
<div class="py-12 flex justify-end table-footer">
<el-pagination
v-model:current-page="pageData.currentPage"
v-model:page-size="pageData.pageSize"
background
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
:page-sizes="pageData.pageSizes"
@size-change="handleSizeChange"
/>
</div>
</SeTable>
</el-card>
</div>
</template>
......@@ -131,7 +121,6 @@ const costRange = ref('');
const pageData = reactive({
currentPage: 1,
pageSize: 10,
pageSizes: [10, 20, 50, 100],
});
const topTabs = ['标签分析', '潜力 / 当月爆款', '使用数据'];
const platforms = ['抖音', '腾讯', 'TikTok'];
......@@ -167,24 +156,19 @@ const pagedTableData = computed(() => {
const start = (pageData.currentPage - 1) * pageData.pageSize;
return tableData.slice(start, start + pageData.pageSize);
});
const handleSizeChange = () => {
pageData.currentPage = 1;
const handleTablePageChange = (page: number, size: number) => {
pageData.currentPage = page;
pageData.pageSize = size;
};
</script>
<style scoped lang="scss">
.header-tabs,
.section-title,
.table-title,
.table-footer {
.table-title {
border-bottom: 1px solid #edf0f5;
}
.table-footer {
border-top: 1px solid #edf0f5;
border-bottom: none;
}
.header-tabs .active {
color: rgba(var(--main-color), 1);
border-bottom: 2px solid rgba(var(--main-color), 1);
......
......@@ -34,7 +34,8 @@
<span class="fs-16 font-bold">汇总数据</span>
<el-button type="default" plain>导出数据</el-button>
</div>
<el-table :data="pagedTableData" class="analysis-table">
<SeTable :data-list="pagedTableData" class="analysis-table" :total="tableData.length"
:default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
<el-table-column prop="department" label="团队" min-width="180" />
<el-table-column prop="cost" label="消耗" align="center" />
<el-table-column prop="conversions" label="转化数" align="center" />
......@@ -46,12 +47,7 @@
<el-table-column prop="avgPrice" label="平均点击单价" align="center" />
<el-table-column prop="play" label="播放量" align="center" />
<el-table-column prop="complete" label="3S完播率" align="center" />
</el-table>
<div class="px-20 py-12 flex justify-end table-footer">
<el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
:page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
</div>
</SeTable>
</el-card>
</div>
</template>
......@@ -66,7 +62,6 @@ const radioVal = ref(1)
const pageData = reactive({
currentPage: 1,
pageSize: 10,
pageSizes: [10, 20, 50, 100],
});
const dataTabs = ['团队数据', '分组数据', '个人数据'];
const tableData = [
......@@ -80,23 +75,18 @@ const pagedTableData = computed(() => {
const start = (pageData.currentPage - 1) * pageData.pageSize;
return tableData.slice(start, start + pageData.pageSize);
});
const handleSizeChange = () => {
pageData.currentPage = 1;
const handleTablePageChange = (page: number, size: number) => {
pageData.currentPage = page;
pageData.pageSize = size;
};
</script>
<style scoped lang="scss">
.header-tabs,
.table-title,
.table-footer {
.table-title {
border-bottom: 1px solid #edf0f5;
}
.table-footer {
border-top: 1px solid #edf0f5;
border-bottom: none;
}
.header-tabs .active {
color: rgba(var(--main-color), 1);
border-bottom: 2px solid rgba(var(--main-color), 1);
......
......@@ -164,7 +164,7 @@
<el-button type="primary">导出</el-button>
</div>
</div>
<el-table :data="scTableData" style="width: 100%" size="small">
<SeTable :data-list="scTableData" size="small" :total="scTableData.length">
<el-table-column prop="date" label="广告账户" width="180" />
<el-table-column prop="name" label="媒体" width="180" />
<el-table-column prop="address" label="素材ID / 创意ID" width="180" />
......@@ -180,7 +180,7 @@
<el-button type="primary" size="small" link>取消关联</el-button>
</template>
</el-table-column>
</el-table>
</SeTable>
</div>
<div v-if="dialogIndex !== 3" class="flex justify-end gap-10 p-16" style="border-top: 1px solid #eee;">
<el-button plain>取消</el-button>
......
......@@ -74,7 +74,8 @@
画面时间轴
</div>
<div class="flex-1 hidden">
<el-table :data="form.list" style="width: 100%" border>
<SeTable :data-list="form.list" border :total="form.list.length"
:default-page-size="100" :show-pagination="false">
<el-table-column label="画面时间点 (秒)" align="center" width="200">
<template #default="{ row, $index }">
<el-form-item :prop="`list.${$index}.content1`"
......@@ -132,7 +133,7 @@
<el-button type="primary" size="small" @click="addRow($index)">新增</el-button>
</template>
</el-table-column>
</el-table>
</SeTable>
</div>
</div>
<el-form-item label="视频格式" prop="name">
......
......@@ -5,7 +5,8 @@
<el-button type="primary" @click="openDialog">上传文件</el-button>
</div>
<section class="mt-20 p-10 bg-fff round-12">
<el-table :data="tableData" style="width: 100%" size="large" @selection-change="handleSelectionChange">
<SeTable :data-list="tableData" size="large" :total="tableData.length"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column prop="title" label="脚本" width="300">
<template #default="{ row }">
......@@ -41,7 +42,7 @@
<ElButton type="primary" link>分享链接</ElButton>
</template>
</el-table-column>
</el-table>
</SeTable>
</section>
<UploadDialog v-model:visible="dialogVisible" />
<Dialog v-model="visibleLook" bg-color="#fff" width="800">
......
......@@ -72,8 +72,9 @@
</div>
</section>
<section class="mt-16 bg-fff round-10 hidden table-card">
<el-table :data="pageList" size="large" class="task-table" row-key="id">
<section class="mt-16 bg-fff round-10 hidden table-card pb-20">
<SeTable :data-list="pageList" class="task-table" row-key="id" :total="filteredList.length"
:default-page-size="pageSize" @update:page="handleTablePageChange">
<el-table-column prop="publisher" label="发布任务" width="170">
<template #default="{ row }">
<div>
......@@ -185,13 +186,7 @@
}}</el-button>
</template>
</el-table-column>
</el-table>
<div class="px-16 py-12 flex-between table-footer">
<span class="color-000">共 {{ filteredList.length }} 条</span>
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 50, 100]" background layout="sizes, prev, pager, next, jumper"
:total="filteredList.length" />
</div>
</SeTable>
</section>
<TaskPublishDialog v-model:visible="visiblePublish" @confirm="handlePublishConfirm" />
<ScriptBreakdownDialog v-model:visible="visibleBreakdown" :breakdown-id="currentBreakdownId"
......@@ -517,6 +512,11 @@ const openBreakdownDialog = (row: TaskItem) => {
visibleBreakdown.value = true;
};
const handleTablePageChange = (page: number, size: number) => {
currentPage.value = page;
pageSize.value = size;
};
const handleBreakdownSave = (form: any) => {
ElMessage.success(`已保存拆解表:${form.breakdownId}`);
};
......@@ -571,10 +571,6 @@ const exportTask = () => ElMessage.success('批量导出');
}
}
.table-footer {
border-top: 1px solid #edf0f5;
}
.dot {
display: inline-block;
width: 8px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment