销售汇总表合计行固定在底部 板块列内容竖排 第二列相同内容合并
This commit is contained in:
@@ -310,15 +310,17 @@ const openSaleDetail=(row)=>{
|
|||||||
|
|
||||||
// 第一列纵向合并的标记数组
|
// 第一列纵向合并的标记数组
|
||||||
const rowMergeArr = ref([])
|
const rowMergeArr = ref([])
|
||||||
|
const rowMergeArr1 = ref([])
|
||||||
|
|
||||||
// 预处理:计算第一列相邻bk相同的纵向合并规则
|
// 预处理:计算第一列相邻bk相同的纵向合并规则
|
||||||
const initMerge = () => {
|
const initMerge = () => {
|
||||||
const list = tableData.value
|
const list = tableData.value
|
||||||
const len = list.length
|
const len = list.length
|
||||||
rowMergeArr.value = new Array(len).fill(1)
|
rowMergeArr.value = new Array(len).fill(1)
|
||||||
|
rowMergeArr1.value = new Array(len).fill(1)
|
||||||
// 遍历所有行,统计相邻bk相同的行数
|
// 遍历所有行,统计相邻bk相同的行数
|
||||||
let count = 1
|
let count = 1,count1=1
|
||||||
|
|
||||||
for (let i = 1; i < len; i++) {
|
for (let i = 1; i < len; i++) {
|
||||||
if (list[i].bk === list[i - 1].bk) {
|
if (list[i].bk === list[i - 1].bk) {
|
||||||
// 相同bk,当前行标记为0(隐藏),累加计数
|
// 相同bk,当前行标记为0(隐藏),累加计数
|
||||||
@@ -329,9 +331,19 @@ const initMerge = () => {
|
|||||||
rowMergeArr.value[i - count] = count
|
rowMergeArr.value[i - count] = count
|
||||||
count = 1
|
count = 1
|
||||||
}
|
}
|
||||||
|
if (list[i].zone_name === list[i - 1].zone_name) {
|
||||||
|
// 相同bk,当前行标记为0(隐藏),累加计数
|
||||||
|
count1++
|
||||||
|
rowMergeArr1.value[i] = 0
|
||||||
|
} else {
|
||||||
|
// 不同bk,把之前的计数赋值给组内第一行
|
||||||
|
rowMergeArr1.value[i - count1] = count1
|
||||||
|
count1 = 1
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// 处理最后一组数据
|
// 处理最后一组数据
|
||||||
rowMergeArr.value[len - count] = count
|
rowMergeArr.value[len - count] = count
|
||||||
|
rowMergeArr1.value[len - count1] = count1
|
||||||
}
|
}
|
||||||
|
|
||||||
// Avue 核心合并方法
|
// Avue 核心合并方法
|
||||||
@@ -360,6 +372,11 @@ const spanMethod = ({ row, rowIndex, columnIndex }) => {
|
|||||||
rowspan: rowMergeArr.value[rowIndex],
|
rowspan: rowMergeArr.value[rowIndex],
|
||||||
colspan: 1
|
colspan: 1
|
||||||
}
|
}
|
||||||
|
}else if(columnIndex===1){
|
||||||
|
return {
|
||||||
|
rowspan: rowMergeArr1.value[rowIndex],
|
||||||
|
colspan: 1
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ======================================
|
// ======================================
|
||||||
@@ -440,7 +457,7 @@ watch(()=>tableHeightRef.value,()=>{
|
|||||||
if(tableHeightRef.value){
|
if(tableHeightRef.value){
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
observeHeightChange(document.querySelector('.avue-crud__search'))
|
observeHeightChange(document.querySelector('.avue-crud__search'))
|
||||||
if(tableOption.value.showSummary&&tableOption.value.index&&tableOption.value.selection){
|
if(tableOption.value.showSummary&&(tableOption.value.index&&tableOption.value.selection||props.reportCode==='zhxs-hz')){
|
||||||
document.querySelector('tfoot tr td').colSpan="2"
|
document.querySelector('tfoot tr td').colSpan="2"
|
||||||
document.querySelectorAll('tfoot tr td')[1].style.display="none"
|
document.querySelectorAll('tfoot tr td')[1].style.display="none"
|
||||||
}
|
}
|
||||||
@@ -497,7 +514,7 @@ const summaryMethod1=({columns,data})=>{
|
|||||||
if(props.reportCode=='zhxs-hz'){
|
if(props.reportCode=='zhxs-hz'){
|
||||||
if(row.zone_name.includes('总计')&&row.zone_name!=='总计') return 'color-B9DEE8'
|
if(row.zone_name.includes('总计')&&row.zone_name!=='总计') return 'color-B9DEE8'
|
||||||
else if((row.zone_name.includes('合计')&&row.bk!=='合计')||row.zone_name=='其他收入'||(columnIndex==0&&row.zone_name!=='总计')) return 'color-90B3E2'
|
else if((row.zone_name.includes('合计')&&row.bk!=='合计')||row.zone_name=='其他收入'||(columnIndex==0&&row.zone_name!=='总计')) return 'color-90B3E2'
|
||||||
else if(row.bk=='总计'&&row.zone_name=='总计') return 'color-548CD6'
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const headerCellClassNameMethod=({row,column,rowIndex,columnIndex})=>{
|
const headerCellClassNameMethod=({row,column,rowIndex,columnIndex})=>{
|
||||||
@@ -623,6 +640,9 @@ const initTable = async () => {
|
|||||||
}
|
}
|
||||||
defualtSearch.value[config.prop]=tableSearch.value[config.prop]
|
defualtSearch.value[config.prop]=tableSearch.value[config.prop]
|
||||||
}
|
}
|
||||||
|
if(props.reportCode=='zhxs-hz'&&item.fieldName=='板块'){
|
||||||
|
config.overHidden=false
|
||||||
|
}
|
||||||
|
|
||||||
if(['年','年度','年份','月','月度','月份','年月'].includes(item.fieldName)&&config.search){
|
if(['年','年度','年份','月','月度','月份','年月'].includes(item.fieldName)&&config.search){
|
||||||
config.searchSpan=3
|
config.searchSpan=3
|
||||||
@@ -1047,6 +1067,15 @@ const getTableData = async (isLoading = true) => {
|
|||||||
})
|
})
|
||||||
tableData.value=tableData.value.filter(item=>item.customname!=='合计')
|
tableData.value=tableData.value.filter(item=>item.customname!=='合计')
|
||||||
}
|
}
|
||||||
|
if(props.reportCode==='zhxs-hz'&&tableData.value.filter(item=>item.bk=='总计').length){
|
||||||
|
value=tData.filter(item=>item.bk=='总计'&&item.zone_name=='总计')[0]
|
||||||
|
value.bk=''
|
||||||
|
value.zone_name=''
|
||||||
|
Object.keys(value).forEach(key=>{
|
||||||
|
value[key+'_s']=value[key]
|
||||||
|
})
|
||||||
|
tableData.value=tableData.value.filter(item=> item.bk!=='总计'&&item.zone_name!=='总计')
|
||||||
|
}
|
||||||
keys.forEach(item=>{
|
keys.forEach(item=>{
|
||||||
let key=amountFieds.value[item].prop
|
let key=amountFieds.value[item].prop
|
||||||
key!=='fistField'?obj[key]=value[item]:''
|
key!=='fistField'?obj[key]=value[item]:''
|
||||||
@@ -1074,7 +1103,8 @@ const getTableData = async (isLoading = true) => {
|
|||||||
'PSI':['产品ID','货品ID','产品名称','产品规格','单位','每件数量'],
|
'PSI':['产品ID','货品ID','产品名称','产品规格','单位','每件数量'],
|
||||||
'ZHXSQK':['标准品名','客户名称'],
|
'ZHXSQK':['标准品名','客户名称'],
|
||||||
'kcqmltj':['产品名称','规格','商品名','通用名'],
|
'kcqmltj':['产品名称','规格','商品名','通用名'],
|
||||||
'zd_customer':['客户名称','年月']
|
'zd_customer':['客户名称','年月'],
|
||||||
|
'zhxs-hz':['板块']
|
||||||
}
|
}
|
||||||
Object.keys(tableOption.value.column).forEach(key=>{
|
Object.keys(tableOption.value.column).forEach(key=>{
|
||||||
const showCols=Object.values(tableOption.value.column).filter(item=>!item.hide)
|
const showCols=Object.values(tableOption.value.column).filter(item=>!item.hide)
|
||||||
@@ -1256,10 +1286,7 @@ defineExpose({
|
|||||||
background-color: #90B3E2 !important;
|
background-color: #90B3E2 !important;
|
||||||
font-weight: bold !important;
|
font-weight: bold !important;
|
||||||
}
|
}
|
||||||
.color-548CD6{
|
|
||||||
background-color: #548CD6 !important;
|
|
||||||
font-weight: bold !important;
|
|
||||||
}
|
|
||||||
td.el-table__cell,th.el-table__cell{
|
td.el-table__cell,th.el-table__cell{
|
||||||
border-right: 1px solid #000 !important;
|
border-right: 1px solid #000 !important;
|
||||||
border-bottom: 1px solid #000 !important;
|
border-bottom: 1px solid #000 !important;
|
||||||
|
|||||||
@@ -159,5 +159,8 @@
|
|||||||
white-space: normal;
|
white-space: normal;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
.low-reoprt.low-report__zhxs-hz .el-table__footer-wrapper tfoot td.el-table__cell{
|
||||||
|
background-color:#548CD6 !important;color:#fff !important;font-weight:bold !important;
|
||||||
|
}
|
||||||
|
|
||||||
@include scrollBar;
|
@include scrollBar;
|
||||||
|
|||||||
Reference in New Issue
Block a user