Compare commits
4 Commits
master
...
zq-tableui
| Author | SHA1 | Date |
|---|---|---|
zq
|
5cdcbf484a | 2 months ago |
|
zq
|
5d012662a3 | 2 months ago |
|
zq
|
d694ed9343 | 2 months ago |
|
zq
|
5b95ce30b0 | 2 months ago |
10 changed files with 1680 additions and 224 deletions
@ -0,0 +1,197 @@ |
|||||
|
// 在有边框，可以进行拖拽的情况下，实现宽度跟随变化（不太行，基本pass）
|
||||
|
import ResizeObserver from 'resize-observer-polyfill'; |
||||
|
import { |
||||
|
debounce |
||||
|
} from 'lodash'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
tableResizeObserver: null, |
||||
|
tableWidth: 0, |
||||
|
isDragging: false, // 新增拖拽状态标志
|
||||
|
lastDragTime: 0 // 记录最后一次拖拽时间
|
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 销毁观察者
|
||||
|
destroyTableResizeObserver() { |
||||
|
if (this.tableResizeObserver) { |
||||
|
this.tableResizeObserver.disconnect(); |
||||
|
this.tableResizeObserver = null; |
||||
|
} |
||||
|
}, |
||||
|
// 初始化监听
|
||||
|
initTableResizeObserver(tableRef, containerRef) { |
||||
|
this.$nextTick(() => { |
||||
|
const container = containerRef ? this.$refs[containerRef] : this.$el; |
||||
|
if (!container) return; |
||||
|
|
||||
|
this.destroyTableResizeObserver(); |
||||
|
|
||||
|
this.tableResizeObserver = new ResizeObserver( |
||||
|
debounce(entries => { |
||||
|
if (this.isDragging || Date.now() - this.lastDragTime < 300) return; |
||||
|
|
||||
|
const entry = entries[0]; |
||||
|
const newWidth = entry.contentRect.width; |
||||
|
|
||||
|
if (Math.abs(newWidth - this.tableWidth) > 5) { |
||||
|
this.tableWidth = newWidth; |
||||
|
this.forceSyncTableLayout(tableRef); |
||||
|
} |
||||
|
}, 100) |
||||
|
); |
||||
|
|
||||
|
this.tableResizeObserver.observe(container); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 强制同步表头和表体布局
|
||||
|
forceSyncTableLayout(tableRef) { |
||||
|
const table = this.$refs[tableRef].$refs.guiptable; |
||||
|
if (!table) return; |
||||
|
|
||||
|
// 先获取当前实际宽度
|
||||
|
const currentWidths = this.getCurrentColumnWidths(table); |
||||
|
|
||||
|
// 计算理论宽度
|
||||
|
const calculatedWidths = this.calculateColumnWidths(); |
||||
|
if (!calculatedWidths) return; |
||||
|
|
||||
|
this.$nextTick(() => { |
||||
|
// 1. 设置列定义的宽度
|
||||
|
table.columns.forEach(column => { |
||||
|
const prop = column.property || column.id; |
||||
|
column.width = currentWidths[prop] || calculatedWidths[prop]; |
||||
|
}); |
||||
|
|
||||
|
// 2. 同步DOM宽度
|
||||
|
this.updateDOMWidths(table); |
||||
|
|
||||
|
// 3. 特殊处理固定列
|
||||
|
this.handleFixedColumns(table); |
||||
|
|
||||
|
// 4. 强制重新布局（两次确保生效）
|
||||
|
table.doLayout(); |
||||
|
setTimeout(() => table.doLayout(), 50); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 获取当前DOM中的实际列宽
|
||||
|
getCurrentColumnWidths(table) { |
||||
|
const widths = {}; |
||||
|
const headerCells = table.$el.querySelectorAll('.el-table__header .cell'); |
||||
|
|
||||
|
headerCells.forEach(cell => { |
||||
|
const col = cell.closest('th'); |
||||
|
if (col && col.style.width) { |
||||
|
const prop = col.getAttribute('data-property') || |
||||
|
col.querySelector('.cell').getAttribute('data-property'); |
||||
|
if (prop) { |
||||
|
widths[prop] = parseInt(col.style.width); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
return widths; |
||||
|
}, |
||||
|
|
||||
|
// 更新DOM元素宽度
|
||||
|
updateDOMWidths(table) { |
||||
|
const headerCols = table.$el.querySelectorAll('.el-table__header col'); |
||||
|
const bodyCols = table.$el.querySelectorAll('.el-table__body col'); |
||||
|
const headerCells = table.$el.querySelectorAll('.el-table__header th'); |
||||
|
const bodyCells = table.$el.querySelectorAll('.el-table__body td'); |
||||
|
|
||||
|
table.columns.forEach((column, index) => { |
||||
|
const width = column.width; |
||||
|
if (!width) return; |
||||
|
|
||||
|
// 设置colgroup中的宽度
|
||||
|
if (headerCols[index]) { |
||||
|
headerCols[index].width = width; |
||||
|
// headerCols[index].style.width = `${width}px`;
|
||||
|
headerCols[index].style.setProperty('width', `${width}px`, 'important'); |
||||
|
|
||||
|
} |
||||
|
if (bodyCols[index]) { |
||||
|
bodyCols[index].width = width; |
||||
|
// bodyCols[index].style.width = `${width}px`;
|
||||
|
bodyCols[index].style.setProperty('width', `${width}px`, 'important'); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 设置实际单元格宽度
|
||||
|
if (headerCells[index]) { |
||||
|
// headerCells[index].style.width = `${width}px`;
|
||||
|
headerCells[index].style.setProperty('width', `${width}px`, 'important'); |
||||
|
headerCells[index].style.minWidth = `${width}px`; |
||||
|
|
||||
|
} |
||||
|
if (bodyCells[index]) { |
||||
|
// bodyCells[index].style.width = `${width}px`;
|
||||
|
bodyCells[index].style.setProperty('width', `${width}px`, 'important'); |
||||
|
bodyCells[index].style.minWidth = `${width}px`; |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 处理固定列
|
||||
|
handleFixedColumns(table) { |
||||
|
const fixedLeft = table.$el.querySelector('.el-table__fixed'); |
||||
|
const fixedRight = table.$el.querySelector('.el-table__fixed-right'); |
||||
|
|
||||
|
if (fixedLeft) fixedLeft.style.height = 'auto'; |
||||
|
if (fixedRight) fixedRight.style.height = 'auto'; |
||||
|
}, |
||||
|
|
||||
|
// 处理拖拽开始
|
||||
|
handleHeaderDragStart() { |
||||
|
this.isDragging = true; |
||||
|
}, |
||||
|
|
||||
|
// 处理拖拽结束
|
||||
|
handleHeaderDragEnd(newWidth, oldWidth, column) { |
||||
|
this.isDragging = false; |
||||
|
this.lastDragTime = Date.now(); |
||||
|
|
||||
|
// 更新列比例配置
|
||||
|
const table = this.$refs[Object.keys(this.$refs).find(k => k.startsWith('myTable'))]; |
||||
|
if (!table || !this.tableWidth) return; |
||||
|
|
||||
|
const availableWidth = this.tableWidth - 20; |
||||
|
const newRatio = newWidth / availableWidth; |
||||
|
|
||||
|
// 更新当前列的ratio
|
||||
|
if (this.columnRatios && column.property) { |
||||
|
this.columnRatios[column.property] = newRatio; |
||||
|
} |
||||
|
|
||||
|
// 重新平衡其他列的比例
|
||||
|
this.balanceColumnRatios(column.property); |
||||
|
}, |
||||
|
|
||||
|
// 平衡其他列的比例
|
||||
|
balanceColumnRatios(changedColumnProp) { |
||||
|
if (!this.columnRatios) return; |
||||
|
|
||||
|
const otherColumns = Object.keys(this.columnRatios) |
||||
|
.filter(prop => prop !== changedColumnProp); |
||||
|
|
||||
|
const totalUsedRatio = Object.values(this.columnRatios).reduce((sum, r) => sum + r, 0); |
||||
|
const overflow = totalUsedRatio - 1; |
||||
|
|
||||
|
if (overflow > 0) { |
||||
|
const otherTotalRatio = otherColumns.reduce((sum, prop) => sum + this.columnRatios[prop], 0); |
||||
|
|
||||
|
otherColumns.forEach(prop => { |
||||
|
this.columnRatios[prop] -= (this.columnRatios[prop] / otherTotalRatio) * overflow; |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
@ -0,0 +1,149 @@ |
|||||
|
import ResizeObserver from 'resize-observer-polyfill'; |
||||
|
import { |
||||
|
debounce |
||||
|
} from 'lodash-es'; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
tableResizeObserver: null, |
||||
|
tableWidth: 0 |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 初始化表格宽度监听
|
||||
|
initTableResizeObserver(tableRef, containerRef) { |
||||
|
this.$nextTick(() => { |
||||
|
const container = containerRef ? this.$refs[containerRef] : this.$el; |
||||
|
if (!container) { |
||||
|
console.warn('Table container not found'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 先断开已有观察者
|
||||
|
this.destroyTableResizeObserver(); |
||||
|
|
||||
|
this.tableResizeObserver = new ResizeObserver( |
||||
|
debounce(entries => { |
||||
|
const entry = entries[0]; |
||||
|
const newWidth = entry.contentRect.width; |
||||
|
|
||||
|
if (Math.abs(newWidth - this.tableWidth) > 5) { |
||||
|
this.tableWidth = newWidth; |
||||
|
this.syncTableColumns(tableRef); |
||||
|
} |
||||
|
}, 100) |
||||
|
); |
||||
|
|
||||
|
try { |
||||
|
this.tableResizeObserver.observe(container); |
||||
|
} catch (err) { |
||||
|
console.error('Failed to observe table:', err); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 同步表头和表体列宽
|
||||
|
syncTableColumns(tableRef) { |
||||
|
// const table = this.$refs[tableRef];
|
||||
|
const table = this.$refs[tableRef].$refs.guiptable; |
||||
|
// console.log(table, 'table====--');
|
||||
|
if (!table) return; |
||||
|
let columns = table.columns; |
||||
|
// console.log(table,table['columns'],table.bodyWidth,'table.columns===');
|
||||
|
// 计算各列宽度（由具体组件实现）
|
||||
|
const columnWidths = this.calculateColumnWidths(); |
||||
|
if (!columnWidths) return; |
||||
|
// console.log(columnWidths, 'table.columns===');
|
||||
|
// 设置列宽并同步表头表体
|
||||
|
this.$nextTick(() => { |
||||
|
// 设置列定义中的宽度
|
||||
|
columns.forEach(column => { |
||||
|
// console.log(column.property,'columns====columns');
|
||||
|
if (columnWidths[column.property]) { |
||||
|
column.width = columnWidths[column.property]; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 同步DOM元素的宽度
|
||||
|
// const headerCols = table.$el.querySelectorAll('.el-table__header col');
|
||||
|
// const bodyCols = table.$el.querySelectorAll('.el-table__body col');
|
||||
|
|
||||
|
// columns.forEach((column, index) => {
|
||||
|
// if (columnWidths[column.property] && headerCols[index] && bodyCols[index]) {
|
||||
|
// const width = columnWidths[column.property];
|
||||
|
// headerCols[index].width = width;
|
||||
|
// headerCols[index].style.setProperty('width',`${width}px`, 'important');
|
||||
|
// // headerCols[index].style.width = `${width}px`;
|
||||
|
// bodyCols[index].width = width;
|
||||
|
// bodyCols[index].style.setProperty('width',`${width}px`, 'important');
|
||||
|
// // bodyCols[index].style.width = `${width}px`;
|
||||
|
// }
|
||||
|
// });
|
||||
|
|
||||
|
// 强制表格重新布局
|
||||
|
table.doLayout(); |
||||
|
// this.syncFixedColumns(table);
|
||||
|
this.$nextTick(() => { |
||||
|
// 3. 同步主表格
|
||||
|
this.syncColumns( |
||||
|
table.$el, |
||||
|
columnWidths, |
||||
|
table.columns |
||||
|
); |
||||
|
|
||||
|
// 4. 同步固定列
|
||||
|
const fixedLeft = table.$el.querySelector('.el-table__fixed'); |
||||
|
const fixedRight = table.$el.querySelector('.el-table__fixed-right'); |
||||
|
|
||||
|
if (fixedLeft) this.syncColumns(fixedLeft, columnWidths, table.columns); |
||||
|
if (fixedRight) this.syncColumns(fixedRight, columnWidths, table.columns); |
||||
|
|
||||
|
// 5. 强制布局更新（需要两次nextTick确保固定列更新）
|
||||
|
this.$nextTick(() => { |
||||
|
table.doLayout(); |
||||
|
setTimeout(() => table.doLayout(), 50); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
syncColumns(container, columnWidths, columns) { |
||||
|
const headerCols = container.querySelectorAll('.el-table__header col, [class*=-header-wrapper] col'); |
||||
|
const bodyCols = container.querySelectorAll('.el-table__body col, [class*=-body-wrapper] col'); |
||||
|
|
||||
|
columns.forEach((column, index) => { |
||||
|
const width = columnWidths[column.property]; |
||||
|
if (width && headerCols[index] && bodyCols[index]) { |
||||
|
headerCols[index].width = width; |
||||
|
// headerCols[index].style.width = `${width}px`;
|
||||
|
headerCols[index].style.setProperty('width',`${width}px`, 'important'); |
||||
|
|
||||
|
bodyCols[index].width = width; |
||||
|
// bodyCols[index].style.width = `${width}px`;
|
||||
|
bodyCols[index].style.setProperty('width',`${width}px`, 'important'); |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 销毁观察者
|
||||
|
destroyTableResizeObserver() { |
||||
|
if (this.tableResizeObserver) { |
||||
|
this.tableResizeObserver.disconnect(); |
||||
|
this.tableResizeObserver = null; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 需要组件自己实现的计算列宽方法
|
||||
|
calculateColumnWidths() { |
||||
|
throw new Error('Component must implement calculateColumnWidths method'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
beforeDestroy() { |
||||
|
this.destroyTableResizeObserver(); |
||||
|
} |
||||
|
}; |
||||
@ -0,0 +1,806 @@ |
|||||
|
<template> |
||||
|
<div class="demo-wrap min-flex-right"> |
||||
|
<div class="flex-between"> |
||||
|
<h2>{{ pageTitle }}</h2> |
||||
|
<CustomDropdown ref="dropdownRef" :placeholder="'（'+viewDesc[this.view]+')'+text" width="280px"> |
||||
|
<DateSelect slot="normal" :view="view" v-model="selectedDate" @update-count="handleUpdateView" |
||||
|
@change="handleDateChange" /> |
||||
|
</CustomDropdown> |
||||
|
</div> |
||||
|
<div v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" |
||||
|
style="margin-bottom: 20px;text-align: left"> |
||||
|
<el-alert type="info" :closable="false" show-icon> |
||||
|
<template #title> |
||||
|
未计成本 |
||||
|
</template> |
||||
|
<div style="margin-top: 8px; line-height: 1.6; font-size: 14px; color: #606266;"> |
||||
|
<template v-if="dataType == 'ver_type'"> |
||||
|
1. AI（服务器成本） <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br /> |
||||
|
2. Turnitin <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br /> |
||||
|
3. 学术（知网PMLC，硕博VIP）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br /> |
||||
|
</template> |
||||
|
<template v-if="dataType == 'check_type'"> |
||||
|
1. AI（服务器成本）<br /> |
||||
|
2. Turnitin国际版、TurnitinUK版、Turnitin国际版+AI<br /> |
||||
|
3. 知网PMLC，硕博VIP <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br /> |
||||
|
</template> |
||||
|
</div> |
||||
|
</el-alert> |
||||
|
</div> |
||||
|
<div class=" flex-common" id=""> |
||||
|
<el-form> |
||||
|
<div class="table-container" ref="tableContainer"> |
||||
|
<!-- @cell-mouse-enter="handleRowHover" --> |
||||
|
<GuipTable :tableData="tableData" style="width: 100%;" @sort-change="handleSortChange" |
||||
|
ref="elTable" :loading="tableLoading"> |
||||
|
<el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column> |
||||
|
<el-table-column |
||||
|
v-if="(dataRank == 1 || dataRank == 2) && (dataType == 'ver_type' || dataType == 'check_type')" |
||||
|
prop="name" :key="selectedType" :label="type_select[selectedType]"> |
||||
|
|
||||
|
<template slot="header"> |
||||
|
<el-select class="custom-select tableHeaderSelect" height="34px" popper-class="custom-select-dropdown" |
||||
|
v-model="selectedType" @change="changeRankType"> |
||||
|
<el-option v-for="(item,type) in type_select" :key="type" :label="item" |
||||
|
:value="type"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
|
||||
|
<template slot-scope="scope"> |
||||
|
<GuipToolTip :content="scope.row.name"> |
||||
|
<div class="cell-content nowrap">{{ scope.row.name }}</div> |
||||
|
</GuipToolTip> |
||||
|
</template> |
||||
|
|
||||
|
</el-table-column> |
||||
|
<el-table-column v-else prop="name" :label="type_desc[dataType]"> |
||||
|
<template slot-scope="scope"> |
||||
|
<GuipToolTip :content="scope.row.name"> |
||||
|
<div class="cell-content nowrap">{{ scope.row.name }}</div> |
||||
|
</GuipToolTip> |
||||
|
</template> |
||||
|
|
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column v-for="(field, index) in valueFields" :key="field" |
||||
|
:label="labels[index] + (index == 3 ? current_month : '')" :prop="'value_' + String(index + 1)" |
||||
|
sortable="custom"> |
||||
|
|
||||
|
<!--产品利润排行展示查看更多--> |
||||
|
<template v-slot="{ row, $index }" v-if="index == 3 && dataRank == 1"> |
||||
|
<el-popover popper-class="custom-popover" v-model="row.id_popover" placement="top" trigger="manual" |
||||
|
:ref="`popover-${row.id}`" :visible-arrow="true" :append-to-body="false" @show="popshow"> |
||||
|
|
||||
|
<div v-if="type != 'agent'" class="pop-wrap"> |
||||
|
<div class="flex-between flex pop-top"> |
||||
|
<h3> |
||||
|
{{ text }} {{ row.name }} |
||||
|
<span class="lookMore" @click="goLookMoreData(row.id)">查看更多</span> |
||||
|
</h3> |
||||
|
<span class="flex point" @click="closePop(row,'id')"> |
||||
|
关闭<img src="@/assets/register/close.svg"> |
||||
|
</span> |
||||
|
</div> |
||||
|
<el-table :data="tableData1" style="width: 100%"> |
||||
|
<el-table-column prop="value_1" width="200" label="日期"></el-table-column> |
||||
|
|
||||
|
<el-table-column width="200" :label="rank_type_desc[dataRank]"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.value_2 }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div v-else class="pop-wrap"> |
||||
|
<div class="flex-between flex pop-top"> |
||||
|
<h3> |
||||
|
{{ text }} {{ row.name }} |
||||
|
<span class="lookMore" @click="goLookCheckTypeRank(row.id)">查看更多</span> |
||||
|
</h3> |
||||
|
<span class="flex point" @click="closePop(row,'id')"> |
||||
|
关闭<img src="@/assets/register/close.svg"> |
||||
|
</span> |
||||
|
</div> |
||||
|
<el-table :data="tableData1" style="width: 100%"> |
||||
|
<el-table-column prop="sort" width="95" label="排序"></el-table-column> |
||||
|
<el-table-column prop="name" width="250" label="服务名称"></el-table-column> |
||||
|
<el-table-column prop="rate" width="130" label="毛利占比"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.rate }} % |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column width="150" :label="rank_type_desc[dataRank]"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.value_1 }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="value_2" width="130" label="订单数"></el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex" slot="reference"> |
||||
|
{{ row[field] }} |
||||
|
<svg-icon :size="16" :path="require('@/assets/super/list-detail.svg')" |
||||
|
:color="'#8A9099'" :hoverColor="'#006AFF'" |
||||
|
@click="handleClick(row, $index, 'id')" /> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
<template v-else slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row[field] }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!--产品利润排行展示代理商排行--> |
||||
|
<el-table-column v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" |
||||
|
key="top" prop="id" :label="'代理商排行'+current_month" :width="valueFields.id"> |
||||
|
<template v-slot="{ row, $index }"> |
||||
|
<el-popover v-model="row.id_popover_2" :append-to-body="false" |
||||
|
popper-class="custom-popover" trigger="manual" :visible-arrow="true" |
||||
|
:ref="`popover_2-${row.id}`" @show="popshow"> |
||||
|
<div class="pop-wrap"> |
||||
|
<div class="flex-between flex pop-top"> |
||||
|
<h3> |
||||
|
{{ row.name }} 代理商排行 |
||||
|
<span class="lookMore" @click="goLookAgentRank(row.id)">查看更多</span> |
||||
|
</h3> |
||||
|
<span class="flex point" @click="closePop(row,'id')"> |
||||
|
关闭<img src="@/assets/register/close.svg"> |
||||
|
</span> |
||||
|
</div> |
||||
|
<el-table :data="tableData1" style="width: 100%"> |
||||
|
<el-table-column prop="sort" width="100" label="排行"></el-table-column> |
||||
|
<el-table-column prop="name" width="200" label="代理商"></el-table-column> |
||||
|
<el-table-column prop="value_1" width="200" label="销售额"></el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div slot="reference"> |
||||
|
<GuipToolTip :content="' No.1 '+top_list[row.id]['name']" |
||||
|
v-if="top_list[row.id]"> |
||||
|
<div class="flex"> |
||||
|
<span class="cell-content nowrap"> No.1 {{ top_list[row.id]['name'] |
||||
|
}}</span> |
||||
|
<svg-icon :size="16" :path="require('@/assets/super/list-detail.svg')" |
||||
|
:color="'#8A9099'" :hoverColor="'#006AFF'" |
||||
|
@click="handleClick2(row, $index, 'id')" /> |
||||
|
</div> |
||||
|
</GuipToolTip> |
||||
|
|
||||
|
<span class="cell-content" v-else>暂无排行</span> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</GuipTable> |
||||
|
</div> |
||||
|
|
||||
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
||||
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" :total="total"> |
||||
|
</el-pagination> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import DateSelect from '@/components/super/DateSelect.vue'; |
||||
|
import CustomDropdown from '@/components/CustomDropdown.vue'; |
||||
|
import GuipTable from '@/components/GuipTable.vue'; |
||||
|
import GuipToolTip from '@/components/GuipToolTip.vue'; |
||||
|
import SvgIcon from '@/components/SvgIcon.vue'; |
||||
|
import tableResizeMixin from '@/mixins/tableResizeMixin' |
||||
|
export default { |
||||
|
name: 'rank_batch_list', |
||||
|
mixins: [tableResizeMixin], |
||||
|
props: { |
||||
|
pageTitle: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
rank_type: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
// HoverImage, |
||||
|
GuipToolTip, |
||||
|
DateSelect, |
||||
|
GuipTable, |
||||
|
SvgIcon, |
||||
|
CustomDropdown |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
popoverRefs: {}, |
||||
|
resizePending: false, |
||||
|
resizeObserver: null, |
||||
|
viewDesc: { |
||||
|
'month': '月份', |
||||
|
'monthTwo': '月份', |
||||
|
'year': '年份', |
||||
|
}, |
||||
|
rank_type_desc: { |
||||
|
1: '毛利润', |
||||
|
2: '订单数', |
||||
|
3: '退单数', |
||||
|
4: '充值金额', |
||||
|
}, |
||||
|
type_desc: { |
||||
|
'agent': '代理商昵称', |
||||
|
'ver_type': '品牌名称', |
||||
|
'check_type': '服务名称', |
||||
|
}, |
||||
|
type_select: { |
||||
|
'ver_type': '按品牌名称', |
||||
|
'check_type': '按服务名称', |
||||
|
}, |
||||
|
tableWidth: 0, |
||||
|
// 列宽比例配置 |
||||
|
columnRatios: { |
||||
|
sort: 0.08, // 20% |
||||
|
name: 0.12, // 30% |
||||
|
value_1: 0.14, // 50% |
||||
|
value_2: 0.14, // 50% |
||||
|
value_3: 0.16, // 50% |
||||
|
value_4: 0.18, // 50% |
||||
|
id: 0.18 // 50% |
||||
|
}, |
||||
|
// 列最小宽度配置 |
||||
|
minWidths: { |
||||
|
name: 120, // 30% |
||||
|
sort: 90, // 20% |
||||
|
value_1: 120, // 50% |
||||
|
value_2: 120, // 50% |
||||
|
value_3: 120, // 50% |
||||
|
value_4: 120, // 50% |
||||
|
id: 120 // 50% |
||||
|
}, |
||||
|
selectedType: 'check_type', |
||||
|
view: 'month', |
||||
|
labels: ['', '', '', ''], |
||||
|
current_month: '', |
||||
|
valueFields: ['value_1', 'value_2', 'value_3', 'value_4'], |
||||
|
currentPage: 1, //当前页 |
||||
|
pageSize: 20, //每页的容量 |
||||
|
total: 0, //列表总数 |
||||
|
sort_by: 4, |
||||
|
sort_order: 2, |
||||
|
text: '',//下拉框显示具体文案 |
||||
|
selectedDate: new Date(),//默认当天日期 |
||||
|
dataType: '', |
||||
|
dataRank: '', |
||||
|
tableData: [], |
||||
|
top_list: [], |
||||
|
tableData1: [], |
||||
|
show_detail_index: 0, |
||||
|
tableLoading:false |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.init() |
||||
|
this.$nextTick(() => { |
||||
|
this.initTableResizeObserver('elTable', 'tableContainer') |
||||
|
}); |
||||
|
}, |
||||
|
watch: { |
||||
|
'$route'() { |
||||
|
this.init() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
handleHeaderDragStart() { |
||||
|
this.$options.methods.handleHeaderDragStart.call(this); |
||||
|
}, |
||||
|
|
||||
|
handleHeaderDragEnd(newWidth, oldWidth, column) { |
||||
|
this.$options.methods.handleHeaderDragEnd.call(this, newWidth, oldWidth, column); |
||||
|
}, |
||||
|
// 覆盖方法 |
||||
|
calculateColumnWidths() { |
||||
|
if (!this.tableWidth) return {}; |
||||
|
const availableWidth = this.tableWidth ; |
||||
|
const widths = {}; |
||||
|
|
||||
|
Object.keys(this.columnRatios).forEach(prop => { |
||||
|
const calculatedWidth = Math.floor(availableWidth * this.columnRatios[prop]); |
||||
|
// acc[key] = Math.max(calculatedWidth, this.minWidths[key]); |
||||
|
widths[prop] = Math.max( |
||||
|
Math.floor(calculatedWidth, this.minWidths[prop]), |
||||
|
80 // 最小宽度 |
||||
|
); |
||||
|
}); |
||||
|
return widths; |
||||
|
|
||||
|
}, |
||||
|
init() { |
||||
|
document.title = this.pageTitle; |
||||
|
|
||||
|
this.text = this.getNowDate() |
||||
|
this.dataType = this.type |
||||
|
this.dataRank = this.rank_type |
||||
|
|
||||
|
this.getRankingData(); |
||||
|
}, |
||||
|
handleUpdateView(newView) { |
||||
|
this.view = newView; |
||||
|
}, |
||||
|
getNowDate() { |
||||
|
const now = new Date(); |
||||
|
const year = now.getFullYear(); |
||||
|
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，补零 |
||||
|
const currentYearMonth = `${year}-${month}`; |
||||
|
return `${currentYearMonth}` |
||||
|
}, |
||||
|
getDate(dateStr) { |
||||
|
const date = new Date(dateStr); |
||||
|
const year = date.getFullYear(); // 2025 |
||||
|
const month = date.getMonth() + 1; // 3 (表示3月) |
||||
|
if (this.view == 'year') { |
||||
|
return `${year}` |
||||
|
} else { |
||||
|
return `${year}-${month}` |
||||
|
} |
||||
|
}, |
||||
|
handleDateChange(date) { |
||||
|
this.text = this.getDate(date) |
||||
|
this.selectedDate = date; |
||||
|
localStorage.setItem('date', JSON.stringify(date)) |
||||
|
|
||||
|
this.$refs.dropdownRef.closeDropdown(); |
||||
|
|
||||
|
this.currentPage = 1; |
||||
|
this.getRankingData() |
||||
|
}, |
||||
|
goLookMoreData(id) { |
||||
|
let query = {} |
||||
|
query.date = this.text |
||||
|
query.rank_type = this.dataRank |
||||
|
if (this.dataType == 'agent') { |
||||
|
query.aid = id |
||||
|
} |
||||
|
if (this.dataType == 'ver_type') { |
||||
|
query.ver_type = id |
||||
|
} |
||||
|
if (this.dataType == 'check_type') { |
||||
|
query.check_type = id |
||||
|
} |
||||
|
window.open(this.$router.resolve({ |
||||
|
path: '/super/ranking/detail', |
||||
|
query: query |
||||
|
}).href, '_blank') |
||||
|
}, |
||||
|
goLookAgentRank(id) { |
||||
|
let query = {} |
||||
|
query.date = this.text |
||||
|
query.rank_type = this.dataRank |
||||
|
query.type = 'agent' |
||||
|
if (this.dataType == 'ver_type') { |
||||
|
query.ver_type = id |
||||
|
} |
||||
|
if (this.dataType == 'check_type') { |
||||
|
query.check_type = id |
||||
|
} |
||||
|
window.open(this.$router.resolve({ |
||||
|
path: '/super/ranking/list', |
||||
|
query: query |
||||
|
}).href, '_blank') |
||||
|
}, |
||||
|
goLookCheckTypeRank(id) { |
||||
|
let query = {} |
||||
|
query.date = this.text |
||||
|
query.rank_type = this.dataRank |
||||
|
query.type = 'check_type' |
||||
|
query.aid = id |
||||
|
window.open(this.$router.resolve({ |
||||
|
path: '/super/ranking/list', |
||||
|
query: query |
||||
|
}).href, '_blank') |
||||
|
}, |
||||
|
closePop(row, type) { |
||||
|
row[type + '_popover'] = false; |
||||
|
row[type + '_popover_2'] = false; |
||||
|
}, |
||||
|
setPopoverRef(id, el) { |
||||
|
if (el) { |
||||
|
this.popoverRefs[id] = el |
||||
|
} |
||||
|
}, |
||||
|
getPopoverRef(id) { |
||||
|
return this.popoverRefs[id] |
||||
|
}, |
||||
|
handleClick(row, index, type) { |
||||
|
// 关闭其他行的弹框 |
||||
|
this.tableData.forEach((item, i) => { |
||||
|
item[type + '_popover_2'] = false; |
||||
|
if (i !== index) { |
||||
|
item[type + '_popover'] = false; |
||||
|
} |
||||
|
}); |
||||
|
// // 打开当前行的弹框 |
||||
|
row[type + '_popover'] = true; |
||||
|
|
||||
|
let obj = {} |
||||
|
if (this.dataType == 'agent') { |
||||
|
obj.aid = row.id |
||||
|
} |
||||
|
if (this.dataType == 'ver_type') { |
||||
|
obj.ver_type = row.id |
||||
|
} |
||||
|
if (this.dataType == 'check_type') { |
||||
|
obj.check_type = row.id |
||||
|
} |
||||
|
if (this.dataType == 'agent') { |
||||
|
let obj = {} |
||||
|
obj.aid = row.id |
||||
|
this.getCheckTypeRankingList(obj); |
||||
|
} else { |
||||
|
this.getRankingDetail(obj); |
||||
|
} |
||||
|
}, |
||||
|
handleClick2(row, index, type) { |
||||
|
// 关闭其他行的弹框 |
||||
|
this.tableData.forEach((item, i) => { |
||||
|
item[type + '_popover'] = false; |
||||
|
if (i !== index) { |
||||
|
item[type + '_popover_2'] = false; |
||||
|
} |
||||
|
}); |
||||
|
// 打开当前行的弹框 |
||||
|
row[type + '_popover_2'] = true; |
||||
|
|
||||
|
let obj = {} |
||||
|
if (this.dataType == 'agent') { |
||||
|
obj.aid = row.id |
||||
|
} |
||||
|
if (this.dataType == 'ver_type') { |
||||
|
obj.ver_type = row.id |
||||
|
} |
||||
|
if (this.dataType == 'check_type') { |
||||
|
obj.check_type = row.id |
||||
|
} |
||||
|
this.getAgentRankingList(obj); |
||||
|
}, |
||||
|
popshow() { |
||||
|
var ariaEls = document.querySelectorAll('.el-popover') |
||||
|
ariaEls.forEach((item) => { |
||||
|
item.removeAttribute('aria-hidden') |
||||
|
}) |
||||
|
|
||||
|
ariaEls = document.querySelectorAll('.el-radio__original') |
||||
|
ariaEls.forEach((item) => { |
||||
|
item.removeAttribute('aria-hidden') |
||||
|
}) |
||||
|
}, |
||||
|
handleSortChange({ prop, order }) { |
||||
|
this.sort_by = 4; |
||||
|
this.sort_order = 2; |
||||
|
if (order == 'ascending') { |
||||
|
this.sort_by = prop; |
||||
|
this.sort_order = 1; |
||||
|
} |
||||
|
if (order == 'descending') { |
||||
|
this.sort_by = prop; |
||||
|
this.sort_order = 2; |
||||
|
} |
||||
|
this.currentPage = 1; |
||||
|
this.getRankingData() |
||||
|
}, |
||||
|
handleRowHover(row) { |
||||
|
this.show_detail_index = row.sort |
||||
|
}, |
||||
|
changeRankType() { |
||||
|
this.dataType = this.selectedType |
||||
|
this.getRankingData() |
||||
|
}, |
||||
|
getRankingData() { |
||||
|
this.setLabelText(); |
||||
|
|
||||
|
if (this.dataType == 'agent') { |
||||
|
this.getAgentRanking() |
||||
|
} |
||||
|
if (this.dataType == 'ver_type') { |
||||
|
this.getVerRanking() |
||||
|
} |
||||
|
if (this.dataType == 'check_type') { |
||||
|
this.getTypeRanking() |
||||
|
} |
||||
|
}, |
||||
|
setLabelText() { |
||||
|
const date = new Date(this.text); |
||||
|
const year = date.getFullYear(); |
||||
|
const month = date.getMonth() + 1; |
||||
|
|
||||
|
const currentYear = new Date().getFullYear(); |
||||
|
const currentMonth = new Date().getMonth() + 1; |
||||
|
|
||||
|
this.current_month = ''; |
||||
|
if (this.view === 'month' && year == currentYear && month == currentMonth) { |
||||
|
this.current_month = '(当月)'; |
||||
|
} |
||||
|
|
||||
|
this.labels = []; |
||||
|
if (this.view === 'year') { |
||||
|
for (let i = 3; i >= 0; i--) { |
||||
|
this.labels.push((year - i) + '年' + this.rank_type_desc[this.dataRank]); |
||||
|
} |
||||
|
} else { |
||||
|
const monthLabels = []; |
||||
|
for (let i = 3; i >= 0; i--) { |
||||
|
let m = month - i; |
||||
|
if (m <= 0) m += 12; |
||||
|
|
||||
|
monthLabels.push(m + '月' + this.rank_type_desc[this.dataRank]); |
||||
|
} |
||||
|
this.labels = monthLabels; |
||||
|
} |
||||
|
}, |
||||
|
getAgentRanking() { |
||||
|
//代理商排行 |
||||
|
const that = this |
||||
|
that.tableData = [] |
||||
|
this.$http('POST', '/supernew/ajax_get_agent_batch_list', { |
||||
|
date: that.text, |
||||
|
rank_type: that.dataRank, |
||||
|
sort_by: that.sort_by, |
||||
|
sort_order: that.sort_order, |
||||
|
cur_page: that.currentPage, |
||||
|
page_size: that.pageSize, |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData = response.data.list |
||||
|
that.total = response.data.total |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
getVerRanking() { |
||||
|
//品牌排行 |
||||
|
const that = this |
||||
|
that.tableData = [] |
||||
|
that.top_list = [] |
||||
|
this.$http('POST', '/supernew/ajax_get_ver_batch_list', { |
||||
|
date: that.text, |
||||
|
rank_type: that.dataRank, |
||||
|
sort_by: that.sort_by, |
||||
|
sort_order: that.sort_order, |
||||
|
cur_page: that.currentPage, |
||||
|
page_size: that.pageSize, |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData = response.data.list |
||||
|
that.top_list = response.data.top_list |
||||
|
that.total = response.data.total |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
async getTypeRanking() { |
||||
|
//产品排行 |
||||
|
const that = this |
||||
|
that.tableData = [ |
||||
|
{ |
||||
|
id: 6, |
||||
|
name: "维普大学生版", |
||||
|
sort: 12334234232, |
||||
|
value_1: "23754.25", |
||||
|
value_2: "43012.15", |
||||
|
value_3: "61869.09", |
||||
|
value_4: "425537.45" |
||||
|
}, |
||||
|
{ |
||||
|
id: 94, |
||||
|
name: "AI中文范文", |
||||
|
sort: 2, |
||||
|
value_1: "8839.00", |
||||
|
value_2: "50174.00", |
||||
|
value_3: "120911.00", |
||||
|
value_4: "158772.50" |
||||
|
}, |
||||
|
{ |
||||
|
id: 61, |
||||
|
name: "维普大学生版", |
||||
|
sort: 11, |
||||
|
value_1: "23754.25", |
||||
|
value_2: "43012.15", |
||||
|
value_3: "61869.09", |
||||
|
value_4: "425537.45" |
||||
|
}, |
||||
|
{ |
||||
|
id: 941, |
||||
|
name: "AI中文范文", |
||||
|
sort: 21, |
||||
|
value_1: "8839.00", |
||||
|
value_2: "50174.00", |
||||
|
value_3: "120911.00", |
||||
|
value_4: "158772.50" |
||||
|
}, |
||||
|
{ |
||||
|
id: 62, |
||||
|
name: "维普大学生版", |
||||
|
sort: 12, |
||||
|
value_1: "23754.25", |
||||
|
value_2: "43012.15", |
||||
|
value_3: "61869.09", |
||||
|
value_4: "425537.45" |
||||
|
}, |
||||
|
{ |
||||
|
id: 942, |
||||
|
name: "AI中文范文", |
||||
|
sort: 22, |
||||
|
value_1: "8839.00", |
||||
|
value_2: "50174.00", |
||||
|
value_3: "120911.00", |
||||
|
value_4: "158772.50" |
||||
|
}, |
||||
|
{ |
||||
|
id: 63, |
||||
|
name: "维普大学生版", |
||||
|
sort: 13, |
||||
|
value_1: "23754.25", |
||||
|
value_2: "43012.15", |
||||
|
value_3: "61869.09", |
||||
|
value_4: "425537.45" |
||||
|
}, |
||||
|
{ |
||||
|
id: 943, |
||||
|
name: "AI中文范文", |
||||
|
sort: 23, |
||||
|
value_1: "8839.00", |
||||
|
value_2: "50174.00", |
||||
|
value_3: "120911.00", |
||||
|
value_4: "158772.50" |
||||
|
}, |
||||
|
] |
||||
|
that.top_list = { |
||||
|
6: { |
||||
|
id: "6", |
||||
|
name: "千校论文查重平台", |
||||
|
value_1: "214535.80" |
||||
|
}, |
||||
|
94: { |
||||
|
id: "94", |
||||
|
name: "尚志教育", |
||||
|
value_1: "149840.50" |
||||
|
}, |
||||
|
61: { |
||||
|
id: "61", |
||||
|
name: "千校论文查重平台", |
||||
|
value_1: "214535.80" |
||||
|
}, |
||||
|
941: { |
||||
|
id: "941", |
||||
|
name: "尚志教育", |
||||
|
value_1: "149840.50" |
||||
|
}, |
||||
|
62: { |
||||
|
id: "62", |
||||
|
name: "千校论文查重平台", |
||||
|
value_1: "214535.80" |
||||
|
}, |
||||
|
942: { |
||||
|
id: "942", |
||||
|
name: "尚志教育", |
||||
|
value_1: "149840.50" |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
// this.$http('POST', '/supernew/ajax_get_type_batch_list', { |
||||
|
// date: that.text, |
||||
|
// rank_type: that.dataRank, |
||||
|
// sort_by: that.sort_by, |
||||
|
// sort_order: that.sort_order, |
||||
|
// cur_page: that.currentPage, |
||||
|
// page_size: that.pageSize, |
||||
|
// }).then(response => { |
||||
|
// this.$nextTick(() => { |
||||
|
// that.tableData = response.data.list |
||||
|
// that.top_list = response.data.top_list |
||||
|
// that.total = response.data.total |
||||
|
// }) |
||||
|
// }).catch(error => { |
||||
|
// console.error(error, 'error') |
||||
|
// }) |
||||
|
}, |
||||
|
getRankingDetail(obj) { |
||||
|
const that = this |
||||
|
that.tableData1 = [] |
||||
|
this.$http('POST', '/supernew/ajax_get_rank_detail', { |
||||
|
date: that.text, |
||||
|
rank_type: that.dataRank, |
||||
|
sort_by: 2, |
||||
|
sort_order: 2, |
||||
|
...obj |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData1 = response.data.list.slice(0, 5) |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
getAgentRankingList(obj) { |
||||
|
const that = this |
||||
|
that.tableData1 = [] |
||||
|
this.$http('POST', '/supernew/ajax_get_agent_rank_list', { |
||||
|
date: that.text, |
||||
|
rank_type: that.dataRank, |
||||
|
cur_page: 1, |
||||
|
page_size: 5, |
||||
|
...obj |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData1 = response.data.list |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
getCheckTypeRankingList(obj) { |
||||
|
const that = this |
||||
|
that.tableData1 = [] |
||||
|
this.$http('POST', '/supernew/ajax_get_type_rank_list', { |
||||
|
date: that.text, |
||||
|
rank_type: that.dataRank, |
||||
|
cur_page: 1, |
||||
|
page_size: 5, |
||||
|
...obj |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData1 = response.data.list.slice(0, 5) |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
handleSizeChange(val) { |
||||
|
this.pageSize = val |
||||
|
this.getRankingData() |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
this.getRankingData() |
||||
|
}, |
||||
|
}, |
||||
|
beforeDestory() { |
||||
|
if (this.resizeObserver) { |
||||
|
this.resizeObserver.disconnect(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.lookMore { |
||||
|
cursor: pointer; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
.table-container { |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.tableHeaderSelect ::v-deep .el-input__inner { |
||||
|
font-size: 14px; |
||||
|
font-weight: normal; |
||||
|
letter-spacing: 0.08em; |
||||
|
font-family: Microsoft YaHei UI; |
||||
|
color: #1E2226; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue