|
|
@@ -0,0 +1,234 @@
|
|
|
+<style scoped lang="scss">
|
|
|
+/* td{
|
|
|
+ height: 42px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <div class="system-dialog-container">
|
|
|
+ <el-dialog
|
|
|
+ title="对账单"
|
|
|
+ v-model="state.dialog.isShowDialog"
|
|
|
+ width="860px"
|
|
|
+ draggable
|
|
|
+ destroy-on-close
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @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;">深圳市快与慢充电桩服务有限公司—阳光科创中心对账单</td>
|
|
|
+ </tr>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td>客户名称</td>
|
|
|
+ <td :colspan="8">客户名称</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>所属期间</td>
|
|
|
+ <td :colspan="8">2023年8月1日—2023年8月31日</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>阳光科创中心</td>
|
|
|
+ <td>10441.3</td>
|
|
|
+ <td>6874.05</td>
|
|
|
+ <td>10800</td>
|
|
|
+ <td>7182.57</td>
|
|
|
+ <td>308.52</td>
|
|
|
+ <td>8331.78</td>
|
|
|
+ <td>15205.83</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="background-color: lightsteelblue">
|
|
|
+ <td colspan="9">二、客户结算数据（含税）（电费和服务费以及金额单位为“元”）</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td>站点名称</td>
|
|
|
+ <td>①对账服务费</td>
|
|
|
+ <td>②电损金额</td>
|
|
|
+ <td colspan="2">③实际服务费收入=①-②</td>
|
|
|
+ <td>④分成比例</td>
|
|
|
+ <td colspan="2">分成金额=③*④</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="text-align: center">
|
|
|
+ <td>阳光科创中心</td>
|
|
|
+ <td>8331.78</td>
|
|
|
+ <td>308.52</td>
|
|
|
+ <td colspan="2">8023.26</td>
|
|
|
+ <td>45%</td>
|
|
|
+ <td colspan="2">3610.47</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">3610.47</td>
|
|
|
+ <td colspan="2">6%</td>
|
|
|
+ <td colspan="2">228.89</td>
|
|
|
+ <td colspan="3">3381.58</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="background-color: lightsteelblue">
|
|
|
+ <td colspan="9">备注：</td>
|
|
|
+ </tr>
|
|
|
+ <tr >
|
|
|
+ <td colspan="9">
|
|
|
+ 分成金额=实际服务费收入*分成比例<br>
|
|
|
+
|
|
|
+ 注意：乙方通过运营平台收取扣除相应费用以后的“实际收取的充电服务费收益”*甲方分成比例，甲方收益分成比例为45%。<br>
|
|
|
+
|
|
|
+ 结算账户：邱翔 联系电话：15519385554 <br>
|
|
|
+
|
|
|
+ 开户行：建设银行应城支行 银行账号：6217002720009469623 <br>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="onCancel" size="default">关 闭</el-button>
|
|
|
+ <el-button :loading="state.btnLoading" type="primary" @click="onSubmit" size="default">下 载PDF</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts" name="StationDialog">
|
|
|
+import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
|
|
|
+
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
+import jsPDF from 'jspdf'
|
|
|
+// 引入组件
|
|
|
+
|
|
|
+// 定义子组件向父组件传值/事件
|
|
|
+const emit = defineEmits(['refresh']);
|
|
|
+const formRef = ref();
|
|
|
+//定义初始变量，重置使用
|
|
|
+const initState = () => ({
|
|
|
+ ruleForm: {
|
|
|
+ id: 0
|
|
|
+ },
|
|
|
+ btnLoading: false,
|
|
|
+ dialog: {
|
|
|
+ isShowDialog: false,
|
|
|
+ type: '',
|
|
|
+ title: '',
|
|
|
+ submitTxt: '',
|
|
|
+ },
|
|
|
+ form: {}
|
|
|
+})
|
|
|
+
|
|
|
+// 定义变量内容
|
|
|
+const state = reactive(initState());
|
|
|
+
|
|
|
+
|
|
|
+// 打开弹窗
|
|
|
+const open = (action: string = 'add', row: any) => {
|
|
|
+ state.dialog.isShowDialog = true;
|
|
|
+};
|
|
|
+// 关闭弹窗
|
|
|
+const onClose = () => {
|
|
|
+ state.dialog.isShowDialog = false;
|
|
|
+ Object.assign(state, initState())
|
|
|
+};
|
|
|
+// 取消
|
|
|
+const onCancel = () => {
|
|
|
+ onClose();
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const onSubmit = () => {
|
|
|
+ htmlToPDF('settle-table')
|
|
|
+}
|
|
|
+
|
|
|
+ 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;
|
|
|
+ let canvas = await html2canvas(pdfDom, {
|
|
|
+ scale: 2,
|
|
|
+ useCORS: true,
|
|
|
+ backgroundColor: bgColor,
|
|
|
+ });
|
|
|
+ let pageHeight = (canvas.width / A4Width) * A4Height;
|
|
|
+ let leftHeight = canvas.height;
|
|
|
+ let position = 0;
|
|
|
+ let imgWidth = A4Width;
|
|
|
+ let imgHeight = (A4Width / canvas.width) * canvas.height;
|
|
|
+ /*
|
|
|
+ 根据自身业务需求 是否在此处键入下方水印代码
|
|
|
+ */
|
|
|
+ let pageData = canvas.toDataURL("image/jpeg", 1.0);
|
|
|
+ let PDF = new jsPDF("l", 'pt', 'a4');
|
|
|
+ if (leftHeight < pageHeight) {
|
|
|
+ PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
|
|
|
+ } else {
|
|
|
+ while (leftHeight > 0) {
|
|
|
+ PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
|
|
|
+ leftHeight -= pageHeight;
|
|
|
+ position -= A4Height;
|
|
|
+ if (leftHeight > 0) PDF.addPage();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ PDF.save(title + ".pdf");
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 初始化表格数据
|
|
|
+/*const loadData = (id: number) => {
|
|
|
+ $get(`station/detail/${id}`).then((res: any) => {
|
|
|
+ state.ruleForm = res;
|
|
|
+ })
|
|
|
+}*/
|
|
|
+
|
|
|
+// 暴露变量
|
|
|
+defineExpose({
|
|
|
+ open
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
