charge-java/admin-web/src/views/admin/station/statment/dialog.vue

<style scoped lang="scss">
/*  td{
    height: 42px;
    padding-left: 3px;
  }*/

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="state.ruleForm.roleName+'对账单'"
        v-model="state.dialog.isShowDialog"
        width="1000px"
        draggable
        destroy-on-close
        :close-on-click-modal="false"
        @close="onClose"
        align-center>

      <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 }} &nbsp;&nbsp; 联系电话：{{ state.ruleForm.telephone }} <br>

              开户行：{{ state.ruleForm.bankName }} &nbsp;&nbsp; 银行账号：{{ 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 }} &nbsp;&nbsp;<br>
              纳税人识别号：{{ state.ruleForm.taxNo }} <br>
              开户行：{{ state.ruleForm.bankName }} &nbsp;&nbsp; <br>
              银行账号：{{ state.ruleForm.bankCardNo }} <br>

              物业确认（盖公章或财务章）：
            </td>
            <td colspan="3" style="padding-left: 15px;">
              乙方账户信息：<br>

              结算账户：深圳市快与慢充电桩服务有限公司&nbsp;&nbsp;<br>
              纳税人识别号：91440300MA5HJNDG14<br>
              开户行：平安银行深圳深大支行&nbsp;&nbsp; <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">
          <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 {$body, $get} from "/@/utils/request";
import u from "/@/utils/u";

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf'
// 引入组件

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const formRef = ref();
//定义初始变量，重置使用
const initState = () => ({
  ruleForm: {
    id: 0,
    roleName: '投资者',
    roleDesc:'investor'
  },
  btnLoading: false,
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
  form: {}
})

// 定义变量内容
const state = reactive(initState());


// 打开弹窗
const open = (action: string = 'add', row: any) => {
  state.dialog.isShowDialog = true;
  loadData(row.id);
};
// 关闭弹窗
const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState())
};
// 取消
const onCancel = () => {
  onClose();
};

const loadData = (id: number) => {
  $get(`statements/preview/${id}`).then(res => {
    state.ruleForm = res;
  })
}


const onSubmit = () => {
  htmlToPDF(`settle-table-${state.ruleForm.roleDesc}`)
}

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>