1：页面html
<template>
<div class="container">
<div class="flex-end">
<el-button type="primary" @click="allEndBtn">批量办结</el-button>
<el-button type="primary" @click="downLoadBtn">导出</el-button>
<el-button type="primary" @click="printBtn">打印</el-button>
<el-button type="primary" @click="backBtn">返回</el-button>
</div>
<div class="flex-center red lineH40 fontSize16">
生成汇总签单成功，可到汇总签单数据列表查看审批情况
</div>
<div class="lineH30">
<div class="flex-center fontSize18">{{tableTitle}}</div>
<div class="flex-center fontSize18">{{ tableName }}</div>
<div class="flex-center fontSize12">
填单日期:{{ tableCreatTime }}
</div>
</div>
<div class="" ref="hzqdREF">
<div class="flex-end">编号：{{ codeNum }}</div>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-bottom: 20px"
:header-cell-style="headerCellStyle"
:cell-style="{textAlign:'center'}">
<el-table-column
prop="label"
label="会签项目"
width="150">
<template slot-scope="scope">
<div v-if="scope.$index==3">{{ scope.row.label }}</div>
<div v-else>{{ scope.row.label }}</div>
</template>
</el-table-column>
<el-table-column
prop=""
label=""
width="60">
<template slot-scope="scope">
<div v-if="scope.$index==3">小写</div>
<div v-else-if="scope.$index==4">大写</div>
<div v-else>{{ scope.row.labelLater }}</div>
</template>
</el-table-column>
<el-table-column
min-width="160"
prop="labelLater"
:label="tableObj.projectName">
<template slot-scope="scope">
<div v-if="scope.$index==3||scope.$index==4">
{{ scope.row.labelLater }}
</div>
<div v-else>{{ scope.$index+1 }}</div>
</template>
</el-table-column>
<el-table-column
width="60"
prop="index"
label="序号">
<template slot-scope="scope">
<div v-if="scope.$index==3||scope.$index==4">
{{ scope.$index+1 }}
</div>
<div class="flex" v-else>
<div>{{ scope.row.unit }}</div>
<div>
<div class="backTag " v-if="scope.row.backed==1">
<div class="sanJiao"></div>
<div class="backColor">有退回</div>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column
min-width="260"
prop="unit"
label="单位/内容">
<template slot-scope="scope">
<div class="flex" v-if="scope.$index==3||scope.$index==4">
<div>{{ scope.row.unit }}</div>
<div>
<div class="backTag " v-if="scope.row.backed==1">
<div class="sanJiao"></div>
<div class="backColor">有退回</div>
</div>
</div>
</div>
<div v-else>{{ scope.row.amount }}</div>
</template>
</el-table-column>
<el-table-column
width="120"
prop="amount"
label="金额">
<template slot-scope="scope">
<div v-if="scope.$index==3||scope.$index==4">
{{ scope.row.amount }}
</div>
<div v-else></div>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="bottomTableData.length>0" ref="bottomTableREF">
<el-table
class="margin-B30"
v-loading="loading"
:data="bottomTableData"
:border="true"
style="width: 100%"
:header-cell-style="{textAlign:'center'}"
:cell-style="{textAlign:'center'}">
<el-table-column fixed label="处理人" width="100">
<template slot-scope="scope">
{{ scope.row.userName }}
</template>
</el-table-column>
<el-table-column fixed label="处理单位" width="200">
<template slot-scope="scope">
{{ scope.row.unitName }}
</template>
</el-table-column>
<el-table-column fixed label="处理时间" width="100">
<template slot-scope="scope">
{{ scope.row.creatTime }}
</template>
</el-table-column>
<el-table-column fixed label="付款申请编号" width="160">
<template slot-scope="scope">
{{ scope.row.paymentCode }}
</template>
</el-table-column>
<el-table-column fixed label="申请金（元）" width="130">
<template slot-scope="scope">
{{ scope.row.applyAmount }}
</template>
</el-table-column>
<el-table-column fixed label="处理意见" min-width="240">
<template slot-scope="scope">
{{ scope.row.opinion }}
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
2：js部分
<script>
import { downloadPdf, printPdf } from "@/utils/index";
import { numberToQianFenWei } from "@/utils/qianFenWei.js";
export default {
data () {
return {
tableTitle:"上海申通地铁建设集团有限公司",
tableName:"工程项目汇总签单",
tableCreatTime:"2023年06月10日",
codeNum:"",
mergeObj: {}, // 用来记录需要合并行的下标
// 表格中的列名
tableProps: [
'label',
'labelLater',
'index',
'unit',
'amount',
] ,
tableData: [],
tableObj:{
projectName:"会签项目111",// 会签项目
paymentDate:"支付日期22",// 支付日期
allcCountersign:"会签总笔数33",// 会签总笔数
dataList:"单据数量44",// 单据数量
countersignAllAmount:"11111",// 会签总金额
countersignAllAmountDX:"十一元整",// 会签总金额
CWFZRsign:"财务负责人签字",// 财务负责人签字
JTDSZsign:"集团董事长签字",// 集团董事长签字
},
loading:false,
bottomTableData:[{}],
};
},
watch:{
"tableData":function (newVal,oldVal){
if(newVal.length>0){
this.getSpanArr(this.tableData);
}
}
},
created () {
//
setTimeout(()=>{
this.getData();
},1000)
},
computed: {
// 千分位元 保留两位小数
QFWYBLLWXS(){
return (val) => {
if(val===null||val===""){
return "";
}else if(val==="0"||val===0){
return "0.00";
}else{
let LiangWeiXaioShu=(val-0).toFixed(2);
if( isNaN(LiangWeiXaioShu)){
return "";
}else{
if(LiangWeiXaioShu>=0){
return numberToQianFenWei(LiangWeiXaioShu);
}else{
return "-"+numberToQianFenWei(
String(LiangWeiXaioShu).slice(1)
);
}
}
}
}
}
},
methods:{
// 批量办结
allEndBtn(){},
// 导出
downLoadBtn(){
downloadPdf(
this.$refs["refsPayOrderListTable"],
this.tableTitle + this.tableName,
"1300px",
this.codeNum,
{
textAlign: "left",
font: "30px Vedana",
x: 10,
conHeight: 500,
conWidth: 600,
}
);
if(this.$refs["bottomTableREF"]){
downloadPdf(
this.$refs["bottomTableREF"],
this.tableTitle + this.tableName + '意见',
"1300px",
this.codeNum,
{
textAlign: "left",
font: "30px Vedana",
x: 10,
conHeight: 500,
conWidth: 1000,
}
);
}
},
// 打印
printBtn(){
if(this.bottomTableData.length > 0){
this.$refs["bottomTableREF"].style.width = '1530px'
printPdf(
[this.$refs["hzqdREF"],this.$refs["bottomTableREF"],],
"",
"",
"1",
this.codeNum,
{
textAlign: "left",
font: "30px Vedana",
x: 10,
conHeight: 500,
conWidth: 1000,
}
);
setTimeout(() => {
this.$refs["bottomTableREF"].style.width = ''
}, 500)
} else {
printPdf(
[this.$refs["hzqdREF"]],
"",
"",
"1",
this.codeNum,
{
textAlign: "left",
font: "30px Vedana",
x: 10,
conHeight: 500,
conWidth: 1000,
}
);
}
},
// 返回
backBtn(){
this.$router.go(-1);
},
//表格头部样式
headerCellStyle({ row, column, rowIndex, columnIndex }){
// 第一步：设置表头的第0列暂不操作，将地1列和第2列隐去使其消失
if ((columnIndex == 1)) {
return { display: "none" };
}
// // 第二步， 由于1、2列没有了，后续列就会贴上来（后续列往左错位问题）
if ((rowIndex == 0) & (columnIndex == 0)) {
// 解决后续列错位问题，就是将隐去的第1列的位置再补上，通过第0列来补
this.$nextTick(() => {
/*原来第0列只占据一个位置，现在要去占据两个位置。
即占据两列，即设置为横向两个单元格
*/
document.querySelector(`.${column.id}`).setAttribute("colspan", "2");
/*这里的column.id实际是dom元素的class，
故用点.不用井#，可审查dom验证
所以 --通过设置原生的colspan属性，
让原来的第一列只占据一个单元格的表头占据2个单元格即可
*/
});
}
return { textAlign:'center',backgroundColor:"white", }
},
// getSpanArr方法
getSpanArr(data) {
this.tableProps.forEach(propVal=> {
let count = 0; // 用来记录需要合并行的起始位置
this.mergeObj[propVal] = []; // 记录每一列的合并信息
data.forEach((item, index) => {
// index == 0表示数据为第一行，直接 push 一个 1
if(index === 0) {
this.mergeObj[propVal].push(1);
} else {
/*判断当前行是否与上一行其值相等
如果相等 在 count 记录的位置其值 +1 表示当前行需要合并
并push 一个 0 作为占位
*/
if(item[propVal] === data[index - 1][propVal]) {
this.mergeObj[propVal][count] += 1;
this.mergeObj[propVal].push(0);
} else {
// 如果当前行和上一行其值不相等
count = index; // 记录当前位置
this.mergeObj[propVal].push(1); // 重新push 一个 1
}
}
})
})
},
// objectSpanMethod方法
/*默认接受四个值
----row==当前行的数据
----column==当前列的数据
----rowIndex==行的下标
----columnIndex==列的下标
*/
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 只有 第一列 合并行
if(columnIndex===0){
// 判断列的属性
if(this.tableProps.indexOf(column.property) !== -1) {
// 判断其值是不是为0
if(this.mergeObj[column.property][rowIndex]) {
return {
rowspan: this.mergeObj[column.property][rowIndex],
colspan: rowIndex===3?1: 2
};
} else {
// 如果为0则为需要合并的行
return {
rowspan: 0,
colspan: 0
};
}
}
}
},
// 获取表格数据
getData(){
this.tableData=[];
//{},{},{},{},{},{},{},{},{}, {unit:"a阿萨达"}
this.tableData=[];
if(this.tableData.length<10){
let zeroData={
label:"支付日期",
labelLater:this.tableObj.paymentDate,
unit:this.tableData[0]!=undefined?
this.tableData[0].unit:"阿达阿达是的",
backed:this.tableData[0]!=undefined?this.tableData[0].backed:"1",
amount:this.tableData[0]!=undefined?this.tableData[0].amount:""
};
let oneData={
label:"会签总笔数",
labelLater:this.tableObj.allcCountersign,
unit:this.tableData[1]!=undefined?
this.tableData[1].unit:"阿达阿达是的阿达阿达是",
backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
amount:this.tableData[1]!=undefined?this.tableData[1].amount:""
};
let twoData={
label:"单据数量",
labelLater:this.tableObj.dataList,
unit:this.tableData[2]!=undefined?this.tableData[2].unit:"",
backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
amount:this.tableData[2]!=undefined?this.tableData[2].amount:""
};
let threeData={
label:"会签总金额",
labelLater:this.QFWYBLLWXS(this.tableObj.countersignAllAmount),
unit:this.tableData[3]!=undefined?this.tableData[3].unit:"",
backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
amount:this.tableData[3]!=undefined?this.tableData[3].amount:""
};
let fourData={
label:"会签总金额",
labelLater:this.tableObj.countersignAllAmountDX,
unit:this.tableData[4]!=undefined?this.tableData[4].unit:"",
backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
amount:this.tableData[4]!=undefined?this.tableData[4].amount:""
};
let fiveData={
label:"财务负责人",
labelLater:this.tableObj.CWFZRsign,
unit:this.tableData[5]!=undefined?this.tableData[5].unit:"",
backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
amount:this.tableData[5]!=undefined?this.tableData[5].amount:""
};
let sixData={
label:"集团董事长",
labelLater:this.tableObj.JTDSZsign,
unit:this.tableData[6]!=undefined?this.tableData[6].unit:"",
backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
amount:this.tableData[6]!=undefined?this.tableData[6].amount:""
};
let sevenData={
label:"网银录入",
labelLater:"",
unit:this.tableData[7]!=undefined?this.tableData[7].unit:"",
backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
amount:this.tableData[7]!=undefined?this.tableData[7].amount:""
};
let eightData ={
label:"网银复核",
labelLater:"",
unit:this.tableData[8]!=undefined?this.tableData[8].unit:"",
backed:this.tableData[0]!=undefined?this.tableData[0].backed:"",
amount:this.tableData[8]!=undefined?this.tableData[8].amount:""
};
this.tableData.splice(0,1,zeroData);
this.tableData.splice(1,1,oneData);
this.tableData.splice(2,1,twoData);
this.tableData.splice(3,1,threeData);
this.tableData.splice(4,1,fourData);
this.tableData.splice(5,1,fiveData);
this.tableData.splice(6,1,sixData);
this.tableData.splice(7,1,sevenData);
this.tableData.splice(8,1,eightData);
console.log("少于9条数据========",this.tableData)
}else{
this.addArrPoperty(this.tableData,0,"支付日期",
this.tableObj.paymentDate
);
this.addArrPoperty(this.tableData,1,"会签总笔数",
this.tableObj.allcCountersign
);
this.addArrPoperty(this.tableData,2,"单据数量",
this.tableObj.dataList
);
this.addArrPoperty(this.tableData,3,"会签总金额",
this.QFWYBLLWXS(this.tableObj.countersignAllAmount)
);
this.addArrPoperty(this.tableData,4,"会签总金额",
this.tableObj.countersignAllAmountDX
);
this.addArrPoperty(this.tableData,5,"财务负责人",
this.tableObj.CWFZRsign
);
this.addArrPoperty(this.tableData,6,"集团董事长",
this.tableObj.JTDSZsign
);
this.addArrPoperty(this.tableData,7,"网银录入","");
this.addArrPoperty(this.tableData,8,"网银复核","");
console.log("多于9条数据========",this.tableData)
}
},
addArrPoperty(arr,index,label,labelLater){
arr[index].label=label;
arr[index].labelLater=labelLater;
},
}
}
</script>
3：样式
<style scoped>
.red{
color: red;
}
.lineH40{
line-height: 40px;
}
.lineH30{
line-height: 30px;
}
.fontSize16{
font-size: 16px;
}
.fontSize18{
font-size: 18px;
font-weight: 500;
}
.fontSize12{
font-size: 12px;
font-weight: 600;
}
table {
border-spacing: 0;
border-collapse: collapse;
border: 1px solid #7f7f7f;
width: 100%;
margin-bottom: 30px;
}
table td {
padding: 8px;
border: 1px solid #7f7f7f;
text-align: center;
min-width: 80px;
min-height: 30px;
}
.headStyle td{
text-align: center;
font-weight: 600;
}
.margin-B30{
margin-bottom: 30px;
}
.backTag{
margin-left: 3px;
display: flex;
justify-content: center;
align-items: center;
}
.sanJiao{
content:"";
border:11px solid red;
border-top-color:transparent;
border-left-color:transparent;
border-bottom-color:transparent;
width:0px;
height:0px;
}
.backColor{
border: none;
background-color: red;
padding-right: 5px;
color: white;
}
</style>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
