|
|
@@ -4,29 +4,31 @@
|
|
|
padding-left: 3px;
|
|
|
}*/
|
|
|
|
|
|
- table {
|
|
|
- border-collapse: separate;
|
|
|
- border-top: 1px solid #dfe6ec;
|
|
|
- border-left: 1px solid #dfe6ec;
|
|
|
- }
|
|
|
- thead tr th {
|
|
|
- background-color: #f8f8f9;
|
|
|
- padding: 6px;
|
|
|
- text-align: center;
|
|
|
- border-bottom: 1px solid #dfe6ec;
|
|
|
- border-right: 1px solid #dfe6ec;
|
|
|
- }
|
|
|
- tbody tr td {
|
|
|
- padding: 6px;
|
|
|
- height: 34px;//设置单元格最小高度
|
|
|
- border-bottom: 1px solid #dfe6ec;
|
|
|
- border-right: 1px solid #dfe6ec;
|
|
|
- }
|
|
|
+table {
|
|
|
+ border-collapse: separate;
|
|
|
+ border-top: 1px solid #000;
|
|
|
+ border-left: 1px solid #000;
|
|
|
+}
|
|
|
+
|
|
|
+thead tr th {
|
|
|
+ background-color: #f8f8f9;
|
|
|
+ padding: 6px;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ border-right: 1px solid #000;
|
|
|
+}
|
|
|
+
|
|
|
+tbody tr td {
|
|
|
+ padding: 6px;
|
|
|
+ height: 34px; //设置单元格最小高度
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ border-right: 1px solid #000;
|
|
|
+}
|
|
|
</style>
|
|
|
<template>
|
|
|
<div class="system-dialog-container">
|
|
|
<el-dialog
|
|
|
- title="对账单"
|
|
|
+ :title="state.ruleForm.roleName+'对账单'"
|
|
|
v-model="state.dialog.isShowDialog"
|
|
|
width="1000px"
|
|
|
draggable
|
|
|
@@ -35,97 +37,180 @@
|
|
|
@close="onClose"
|
|
|
align-center>
|
|
|
|
|
|
- <table border="0" cellspacing="0" id="settle-table" class="w100">
|
|
|
- <tr style="background-color: lightsteelblue;font-weight: bold">
|
|
|
- <td colspan="9" style="height: 34px;text-align: center;">深圳市快与慢充电桩服务有限公司—{{ state.ruleForm.stationName }}对账单</td>
|
|
|
- </tr>
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <td>客户名称</td>
|
|
|
- <td :colspan="8">{{ state.ruleForm.adminUserName }}</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>所属期间</td>
|
|
|
- <td :colspan="8">{{ state.ruleForm.statMonth }}</td>
|
|
|
- </tr>
|
|
|
-
|
|
|
- <tr style="background-color: lightsteelblue;">
|
|
|
- <td colspan="9">一、APP后台数据(含税,订单总金额为电费金额,实际电费为快与慢代收代付)(电量单位为“度”,电费和服务费以及金额单位为“元”)</td>
|
|
|
- </tr>
|
|
|
- <tr style="text-align: center">
|
|
|
- <td>站点名称</td>
|
|
|
- <td>订单电量</td>
|
|
|
- <td>①订单电费</td>
|
|
|
- <td>电表电量</td>
|
|
|
- <td>②电表电费</td>
|
|
|
- <td>电损金额=②-①</td>
|
|
|
- <td>实收对账服务费</td>
|
|
|
- <td>订单实收总金额</td>
|
|
|
- </tr>
|
|
|
- <tr style="text-align: center">
|
|
|
- <td>{{ state.ruleForm.stationName }}</td>
|
|
|
- <td>{{ state.ruleForm.totalPower }}</td>
|
|
|
- <td>{{ u.fmt.fmtMoney(state.ruleForm.elecMoney) }}</td>
|
|
|
- <td>{{ state.ruleForm.actualPower }}</td>
|
|
|
- <td>{{ u.fmt.fmtMoney(state.ruleForm.actualPower) }}</td>
|
|
|
- <td>{{ u.fmt.fmtMoney(state.ruleForm.elecLossMoney) }}</td>
|
|
|
- <td>{{ u.fmt.fmtMoney(state.ruleForm.serviceMoney - state.ruleForm.discountAmount) }}</td>
|
|
|
- <td>{{ u.fmt.fmtMoney(state.ruleForm.totalMoney - state.ruleForm.discountAmount) }}</td>
|
|
|
- </tr>
|
|
|
- <tr style="background-color: lightsteelblue">
|
|
|
- <td colspan="9">二、客户结算数据(含税)(电费和服务费以及金额单位为“元”)</td>
|
|
|
- </tr>
|
|
|
- <tr style="text-align: center">
|
|
|
- <td>站点名称</td>
|
|
|
- <td>①对账服务费</td>
|
|
|
- <td>②服务费分成比例</td>
|
|
|
- <td>③服务费分成</td>
|
|
|
- <td>④电损金额</td>
|
|
|
- <td>⑤电损承担比例</td>
|
|
|
- <td>⑥电损承担金额</td>
|
|
|
- <td>⑦分成金额=③-⑥</td>
|
|
|
- </tr>
|
|
|
- <tr style="text-align: center">
|
|
|
- <td>{{ state.ruleForm.stationName }}</td>
|
|
|
- <td>{{ u.fmt.fmtMoney(state.ruleForm.actualServiceMoney) }}</td>
|
|
|
- <td>{{(state.ruleForm.splittingProportion*100).toFixed(2)}}%</td>
|
|
|
- <td>{{ u.fmt.fmtMoney(state.ruleForm.actualServiceMoney * state.ruleForm.splittingProportion)}}</td>
|
|
|
- <td>{{ u.fmt.fmtMoney(state.ruleForm.elecLossMoney) }}</td>
|
|
|
- <td>{{(state.ruleForm.elecLossProportion*100).toFixed(2)}}%</td>
|
|
|
- <td>{{ u.fmt.fmtMoney(state.ruleForm.elecLossAmount) }}</td>
|
|
|
- <td>{{ u.fmt.fmtMoney(state.ruleForm.actualServiceMoney * state.ruleForm.splittingProportion - state.ruleForm.elecLossAmount) }}</td>
|
|
|
- </tr>
|
|
|
- <tr style="background-color: lightsteelblue">
|
|
|
- <td colspan="9">三、客户结算数据(不含税)(税额和金额单位为“元”)</td>
|
|
|
- </tr>
|
|
|
- <tr style="text-align: center">
|
|
|
- <td colspan="2">①分成金额</td>
|
|
|
- <td colspan="2"> 增值税率</td>
|
|
|
- <td colspan="2">②应纳增值税额</td>
|
|
|
- <td colspan="3">应付金额=①-②</td>
|
|
|
- </tr>
|
|
|
- <tr style="text-align: center">
|
|
|
- <td colspan="2">{{ u.fmt.fmtMoney(state.ruleForm.actualServiceMoney * state.ruleForm.splittingProportion - state.ruleForm.elecLossAmount) }}</td>
|
|
|
- <td colspan="2">{{(state.ruleForm.vatRate*100).toFixed(2)}}%</td>
|
|
|
- <td colspan="2">{{ u.fmt.fmtMoney(state.ruleForm.vatAmount) }}</td>
|
|
|
- <td colspan="2">{{ u.fmt.fmtMoney(state.ruleForm.actualSplittingAmount) }}</td>
|
|
|
- </tr>
|
|
|
- <tr style="background-color: lightsteelblue">
|
|
|
- <td colspan="9">备注:</td>
|
|
|
- </tr>
|
|
|
- <tr >
|
|
|
- <td colspan="9">
|
|
|
- 分成金额=实际服务费收入*分成比例<br>
|
|
|
-
|
|
|
- 注意:乙方通过运营平台收取扣除相应费用以后的“实际收取的充电服务费收益”*甲方分成比例,甲方收益分成比例为{{(state.ruleForm.splittingProportion*100).toFixed(2)}}%。<br>
|
|
|
-
|
|
|
- 结算账户:{{ state.ruleForm.accountName }} 联系电话:{{ state.ruleForm.telephone }} <br>
|
|
|
-
|
|
|
- 开户行:{{ state.ruleForm.bankName }} 银行账号:{{ state.ruleForm.bankCardNo }} <br>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+ <template v-if="state.ruleForm.roleName==='投资者'">
|
|
|
+ <table border="0" cellspacing="0" :id="'settle-table-'+state.ruleForm.roleDesc" class="w100">
|
|
|
+ <tr style="background-color: lightsteelblue;font-weight: bold">
|
|
|
+ <td colspan="9" style="height: 34px;text-align: center;">深圳市快与慢充电桩服务有限公司—{{ state.ruleForm.stationName }}对账单</td>
|
|
|
+ </tr>
|
|
|
+ <tbody>
|
|
|
+ <tr class="text-align-center">
|
|
|
+ <td>客户名称</td>
|
|
|
+ <td :colspan="8">{{ state.ruleForm.adminUserName }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr class="text-align-center">
|
|
|
+ <td>所属期间</td>
|
|
|
+ <td :colspan="8">{{ state.ruleForm.statMonth }}</td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr style="background-color: lightsteelblue;">
|
|
|
+ <td colspan="9" style="padding-left: 15px;">一、APP后台数据(含税,订单总金额为电费金额,实际电费为快与慢代收代付)(电量单位为“度”,电费和服务费以及金额单位为“元”)</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td>站点名称</td>
|
|
|
+ <td>订单电量</td>
|
|
|
+ <td>①订单电费</td>
|
|
|
+ <td>电表电量</td>
|
|
|
+ <td>②电表电费</td>
|
|
|
+ <td>电损金额=②-①</td>
|
|
|
+ <td>实收对账服务费</td>
|
|
|
+ <td>订单实收总金额</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td>{{ state.ruleForm.stationName }}</td>
|
|
|
+ <td>{{ state.ruleForm.totalPower }}</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.elecMoney) }}</td>
|
|
|
+ <td>{{ state.ruleForm.actualPower }}</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.actualPower) }}</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.elecLossMoney) }}</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.serviceMoney - state.ruleForm.discountAmount) }}</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.totalMoney - state.ruleForm.discountAmount) }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="background-color: lightsteelblue">
|
|
|
+ <td colspan="9" style="padding-left: 15px;">二、客户结算数据(含税)(电费和服务费以及金额单位为“元”)</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td>站点名称</td>
|
|
|
+ <td>①对账服务费</td>
|
|
|
+ <td>②服务费分成比例</td>
|
|
|
+ <td>③服务费分成</td>
|
|
|
+ <td>④电损金额</td>
|
|
|
+ <td>⑤电损承担比例</td>
|
|
|
+ <td>⑥电损承担金额</td>
|
|
|
+ <td>⑦分成金额=③-⑥</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td>{{ state.ruleForm.stationName }}</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.actualServiceMoney) }}</td>
|
|
|
+ <td>{{ (state.ruleForm.splittingProportion * 100).toFixed(2) }}%</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.actualServiceMoney * state.ruleForm.splittingProportion) }}</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.elecLossMoney) }}</td>
|
|
|
+ <td>{{ (state.ruleForm.elecLossProportion * 100).toFixed(2) }}%</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.elecLossAmount) }}</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.actualServiceMoney * state.ruleForm.splittingProportion - state.ruleForm.elecLossAmount) }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="background-color: lightsteelblue">
|
|
|
+ <td colspan="9" style="padding-left: 15px;">三、客户结算数据(不含税)(税额和金额单位为“元”)</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td colspan="2">①分成金额</td>
|
|
|
+ <td colspan="2"> 增值税率</td>
|
|
|
+ <td colspan="2">②应纳增值税额</td>
|
|
|
+ <td colspan="3">应付金额=①-②</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td colspan="2">{{ u.fmt.fmtMoney(state.ruleForm.actualServiceMoney * state.ruleForm.splittingProportion - state.ruleForm.elecLossAmount) }}</td>
|
|
|
+ <td colspan="2">{{ (state.ruleForm.vatRate * 100).toFixed(2) }}%</td>
|
|
|
+ <td colspan="2">{{ u.fmt.fmtMoney(state.ruleForm.vatAmount) }}</td>
|
|
|
+ <td colspan="2">{{ u.fmt.fmtMoney(state.ruleForm.actualSplittingAmount) }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="background-color: lightsteelblue">
|
|
|
+ <td colspan="9" style="padding-left: 15px;">备注:</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="9" style="padding-left: 15px;">
|
|
|
+ 分成金额=实际服务费收入*分成比例<br>
|
|
|
+
|
|
|
+ 注意:乙方通过运营平台收取扣除相应费用以后的“实际收取的充电服务费收益”*甲方分成比例,甲方收益分成比例为{{ (state.ruleForm.splittingProportion * 100).toFixed(2) }}%。<br>
|
|
|
+
|
|
|
+ 结算账户:{{ state.ruleForm.accountName }} 联系电话:{{ state.ruleForm.telephone }} <br>
|
|
|
+
|
|
|
+ 开户行:{{ state.ruleForm.bankName }} 银行账号:{{ state.ruleForm.bankCardNo }} <br>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <template v-else>
|
|
|
+ <table border="0" cellspacing="0" :id="'settle-table-'+state.ruleForm.roleDesc" class="w100">
|
|
|
+ <tr style="background-color: lightsteelblue;font-weight: bold">
|
|
|
+ <td colspan="8" style="height: 34px;text-align: center;">深圳市快与慢充电桩服务有限公司—{{ state.ruleForm.stationName }}对账单</td>
|
|
|
+ </tr>
|
|
|
+ <tbody>
|
|
|
+ <tr class="text-align-center">
|
|
|
+ <td>客户名称</td>
|
|
|
+ <td :colspan="7">{{ state.ruleForm.adminUserName }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr class="text-align-center">
|
|
|
+ <td>所属期间</td>
|
|
|
+ <td :colspan="7">{{ state.ruleForm.statMonth }}</td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr style="background-color: lightsteelblue;">
|
|
|
+ <td colspan="8" style="padding-left: 15px;">一、APP后台数据(含税,订单总金额为电费金额,实际电费为快与慢代收代付)(电量单位为“度”,电费和服务费以及金额单位为“元”)</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td colspan="2">站点名称</td>
|
|
|
+ <td colspan="2">充电电量(度)</td>
|
|
|
+ <td colspan="2">订单电费(元)</td>
|
|
|
+ <td >实收服务费(元)</td>
|
|
|
+ <td>订单总金额(元)</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td colspan="2">{{ state.ruleForm.stationName }}</td>
|
|
|
+ <td colspan="2">{{ state.ruleForm.totalPower }}</td>
|
|
|
+ <td colspan="2">{{ u.fmt.fmtMoney(state.ruleForm.actualElecMoney) }}</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.serviceMoney ) }}</td>
|
|
|
+ <td>{{ u.fmt.fmtMoney(state.ruleForm.totalMoney ) }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="background-color: lightsteelblue">
|
|
|
+ <td colspan="8" style="padding-left: 15px;">二、物业结算数据(含税)</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td colspan="2">站点名称</td>
|
|
|
+ <td colspan="2">实付服务费(元)</td>
|
|
|
+ <td colspan="2">物业/场地方分成比例</td>
|
|
|
+ <td colspan="2">物业/场地方分成金额(元)</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td colspan="2">{{ state.ruleForm.stationName }}</td>
|
|
|
+ <td colspan="2">{{ u.fmt.fmtMoney(state.ruleForm.actualServiceMoney) }}</td>
|
|
|
+ <td colspan="2">{{ (state.ruleForm.splittingProportion * 100).toFixed(2) }}%</td>
|
|
|
+ <td colspan="2">{{ u.fmt.fmtMoney(state.ruleForm.splittingAmount) }}</td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr style="background-color: lightsteelblue">
|
|
|
+ <td colspan="8" style="padding-left: 15px;">备注:</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="4" style="padding-left: 15px;">
|
|
|
+ 甲方账户信息:<br>
|
|
|
+
|
|
|
+ 结算账户:{{ state.ruleForm.accountName }} <br>
|
|
|
+ 纳税人识别号:{{ state.ruleForm.taxNo }} <br>
|
|
|
+ 开户行:{{ state.ruleForm.bankName }} <br>
|
|
|
+ 银行账号:{{ state.ruleForm.bankCardNo }} <br>
|
|
|
+
|
|
|
+ 物业确认(盖公章或财务章):
|
|
|
+ </td>
|
|
|
+ <td colspan="3" style="padding-left: 15px;">
|
|
|
+ 乙方账户信息:<br>
|
|
|
+
|
|
|
+ 结算账户:深圳市快与慢充电桩服务有限公司 <br>
|
|
|
+ 纳税人识别号:91440300MA5HJNDG14<br>
|
|
|
+ 开户行:平安银行深圳深大支行 <br>
|
|
|
+ 银行账号:15419629160031<br>
|
|
|
+
|
|
|
+ 乙方确认(盖公章或财务章):
|
|
|
+ </td>
|
|
|
+ <td style="padding-left: 15px;">
|
|
|
+ 应付账款:{{ u.fmt.fmtMoney(state.ruleForm.splittingAmount) }}元
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </template>
|
|
|
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
@@ -152,7 +237,9 @@ const formRef = ref();
|
|
|
//定义初始变量,重置使用
|
|
|
const initState = () => ({
|
|
|
ruleForm: {
|
|
|
- id: 0
|
|
|
+ id: 0,
|
|
|
+ roleName: '投资者',
|
|
|
+ roleDesc:'investor'
|
|
|
},
|
|
|
btnLoading: false,
|
|
|
dialog: {
|
|
|
@@ -183,25 +270,25 @@ const onCancel = () => {
|
|
|
onClose();
|
|
|
};
|
|
|
|
|
|
-const loadData = (id:number) => {
|
|
|
- $get(`statements/preview/${id}`).then(res=>{
|
|
|
+const loadData = (id: number) => {
|
|
|
+ $get(`statements/preview/${id}`).then(res => {
|
|
|
state.ruleForm = res;
|
|
|
})
|
|
|
}
|
|
|
|
|
|
|
|
|
const onSubmit = () => {
|
|
|
- htmlToPDF('settle-table')
|
|
|
+ htmlToPDF(`settle-table-${state.ruleForm.roleDesc}`)
|
|
|
}
|
|
|
|
|
|
- const htmlToPDF = async (htmlId: string, title: string = "对账单", bgColor = "#fff") => {
|
|
|
+const htmlToPDF = async (htmlId: string, title: string = "对账单", bgColor = "#fff") => {
|
|
|
let pdfDom: HTMLElement | null = document.getElementById(htmlId) as HTMLElement
|
|
|
pdfDom.style.padding = '0 10px !important'
|
|
|
- //纵向打印
|
|
|
+ //纵向打印
|
|
|
// const A4Width = 595.28;
|
|
|
// const A4Height = 841.89;
|
|
|
const A4Width = 841.89;
|
|
|
- const A4Height =595.28;
|
|
|
+ const A4Height = 595.28;
|
|
|
let canvas = await html2canvas(pdfDom, {
|
|
|
scale: 2,
|
|
|
useCORS: true,
|