<!-- eslint-disable default-case -->
<template>
<div class="mod-config">
<el-form
:inline="true"
size="small"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<!-- <el-form-item label="项目名称">
<el-input v-model="dataForm.xmmc" placeholder="" clearable />
</el-form-item>
<el-form-item label="项目编号">
<el-input v-model="dataForm.xmbh" placeholder="" clearable />
</el-form-item> -->
<el-form-item label="区域">
<el-cascader
v-model="dataForm.zzjg"
filterable
style="width: 100%"
placeholder=""
:options="orgList"
:props="{ checkStrictly: true, value: 'code', label: 'fullName' }"
clearable
/>
</el-form-item>
<el-form-item label="日期">
<el-date-picker
v-model="dataForm.sjrq"
type="monthrange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 100%;"
/>
</el-form-item>
<el-form-item>
<el-button class="selectButton" size="small" @click="getDataList()">
查询
</el-button>
</el-form-item>
<el-form-item>
<el-button size="small" @click="resetForm">
重置
</el-button>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="exportReport()">
导出
</el-button>
</el-form-item>
</el-form>
<!-- <el-table
v-loading="dataListLoading"
:data="tableData"
:span-method="handleSpanMethod"
border
stripe
:row-style="{height: '0'}"
style="width: 100%;border: 0.5px solid black;border-color: black"
:cell-style="tableRowClassName"
:header-cell-style="{borderColor:'#000000',border:'1px solid',background:'#23ffff'}"
size="small"
> -->
<el-table
v-loading="dataListLoading"
:header-cell-style="{background:'#FAFAFA'}"
:data="tableData"
:span-method="handleSpanMethod"
stripe
:row-style="{height: '0'}"
:cell-style="tableRowClassName"
size="small"
>
>
<el-table-column
prop="orgName"
label="区域"
width="200"
/>
<el-table-column
prop="khName"
label="客户名称"
show-overflow-tooltip
width="150"
/>
<el-table-column
prop="xmmc"
label="项目名称"
width="200"
show-overflow-tooltip
/>
<!-- <el-table-column
prop="xmbh"
label="项目编号"
/> -->
/>
<el-table-column
prop="bhd"
label="饱和度"
width="90"
/>
<el-table-column
prop="fhl"
label="负荷率"
width="100"
/>
<el-table-column
prop="bhjbbjl"
label="报价率(不含加班)"
width="120"
/>
<el-table-column
prop="hjbbjl"
label="报价率(含加班)"
width="110"
/>
<el-table-column
prop="ygcz"
label="预估产值"
>
<template slot-scope="scope">
{{ utils.handleScopeFormat(scope.row.ygcz) }}
</template>
</el-table-column>
<el-table-column
prop="qrcz"
label="确认产值"
>
<template slot-scope="scope">
{{ utils.handleScopeFormat(scope.row.qrcz) }}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
dataListLoading: false,
dataForm: {
zzjg: ['0001'],
xmmc: '',
xmbh: '',
sjrq: []
},
tableData: [],
orgList: []
}
},
activated() {
this.getDataList()
},
mounted() {
},
methods: {
/**
* 日报分析列表
*/
getDataList() {
this.dataListLoading = true
this.dataList = []
this.$http({
url: this.$http.adornUrl('/reportprojoutput/list'),
method: 'get',
params: this.$http.adornParams({
xmmc: this.dataForm.xmmc,
xmbh: this.dataForm.xmbh,
sjrq1: this.dataForm.sjrq && this.dataForm.sjrq.length > 0 ? this.dataForm.sjrq[0] : '',
sjrq2: this.dataForm.sjrq && this.dataForm.sjrq.length > 0 ? this.dataForm.sjrq[1] : '',
zzjg: this.dataForm.zzjg.length > 0 ? this.dataForm.zzjg[this.dataForm.zzjg.length - 1] : ''
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.orgList = this.$store.state.common.zzjgList
this.tableData = data.reportProjOutputEntities
// this.getSpanArr(this.tableData)
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
/**
* 导出
*/
exportReport() {
this.$http({
url: this.$http.adornUrl('/reportprojoutput/exportStaticReport'),
method: 'get',
responseType: 'blob',
params: this.$http.adornParams({
sjrq1: this.dataForm.sjrq && this.dataForm.sjrq.length > 0 ? this.dataForm.sjrq[0] : '',
sjrq2: this.dataForm.sjrq && this.dataForm.sjrq.length > 0 ? this.dataForm.sjrq[1] : '',
zzjg: this.dataForm.zzjg.length > 0 ? this.dataForm.zzjg[this.dataForm.zzjg.length - 1] : ''
})
}).then(res => {
const blob = new Blob([res.data])
const fileName = res.headers['content-disposition']
.split(';')[1]
.split('filename=')[1]
const elink = document.createElement('a')
elink.download = decodeURI(`${fileName}.xlsx`)
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
})
},
// 得到行、列的合并值
handleSpanMethod({
row, column, rowIndex, columnIndex
}) {
// 页面列表上 表格合并行 -> 第几列(从0开始)
// 需要合并多个单元格时 依次增加判断条件即可
if (columnIndex === 1 && row.xmmc !== '小计' && row.xmmc !== '总计') {
const rowspanArr = this.formatRowspanAndColspan(this.tableData, 'khName')
return {
rowspan: rowspanArr[rowIndex],
colspan: 1
}
}
if (columnIndex === 0 && row.orgName !== '总计' && row.orgName !== '小计') {
const rowspanArr = this.formatRowspanAndColspan(this.tableData, 'orgName')
return {
rowspan: rowspanArr[rowIndex],
colspan: 1
}
}
// 客户小计
if (columnIndex === 1 && row.xmmc === '小计' && row.khName !== '小计') {
return [0, 0]
}
// 区域小计
if (columnIndex === 1 && row.xmmc === '小计' && row.khName === '小计') {
return [1, 2]
}
if (columnIndex === 2 && row.xmmc === '小计' && row.khName === '小计') {
return [0, 0]
}
// 如果为最后一行
if (columnIndex === 0 && row.orgName === '总计') {
return [1, 3]
}
if (columnIndex === 1 && row.xmmc === '总计') {
return [0, 0]
}
if (columnIndex === 2 && row.xmmc === '总计') {
return [0, 0]
}
},
tableRowClassName({ row }) {
// return row.khName === '小计'
// ? 'background-color: #FAFAFA;'
// : 'background-color: white;'
let backgroundColor = 'background-color: white;'
switch (row.xmmc) {
case '小计':
backgroundColor = 'background-color: #FAFAFA'
break
case '总计':
backgroundColor = 'background-color: #EDF1FF'
break
default:
backgroundColor = 'background-color: white'
}
return backgroundColor
},
/**
* 合并单元格辅助
*/
formatRowspanAndColspan(tableList, keyName) {
const keyNameList = []
tableList.forEach(
t => { keyNameList.push(t[keyName]) }
)
// console.log('keyNameList =>', keyNameList)
let prev // 上一个键名的索引
let contin = 0 // 连续相同键名个数
const computedList = [] // 计算后的键名列表
for (let i = 0; i < keyNameList.length; i++) {
if (computedList.length === 0) {
computedList.push({ key: keyNameList[i], val: 1 })
} else if (keyNameList[prev] === keyNameList[i]) {
contin++
computedList.push({ key: keyNameList[i], val: 0 })
} else {
if (contin > 0) {
const index = computedList.length - 1 - contin
const { key } = computedList[index]
const { val } = computedList[index]
const obj = { key, val: val + contin }
computedList.splice(index, 1, obj)
}
computedList.push({ key: keyNameList[i], val: 1 })
contin = 0
}
prev = i // 将 i 赋值给 prev,以便当下一次循环时获取上一个键值的索引
}
if (contin > 0) {
const index = computedList.length - 1 - contin
const { key } = computedList[index]
const { val } = computedList[index]
const obj = { key, val: val + contin }
computedList.splice(index, 1, obj)
}
// console.log('computedList =>', computedList)
const finalList = []
computedList.forEach(
t => { finalList.push(t.val) }
)
// console.log('finalList =>', finalList)
return finalList
},
/**
* 重置查询条件
*/
resetForm() {
this.dataForm.zzjg = ['0001']
this.dataForm.sjrq = []
}
}
}
</script>
<style>
/* 或者使用/deep/方式 */
/deep/ .el-table .el-table__header-wrapper tr {
border-bottom: 2px solid #000;
}
</style>
el-table合并行,列
最新推荐文章于 2024-07-04 18:15:29 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)