看板权限、对账单

admin-web/.env.development

@@ -2,5 +2,6 @@
 ENV = development
 
 # 本地环境接口地址
-VITE_API_URL = http://localhost:8080/admin/
+VITE_API_URL = http://localhost:8080/admin
+#VITE_API_URL = https://www.kuaiyuman.cn/admin/
 VITE_FILE_URL = http://static.kuaiyuman.cn/

admin-web/package.json

@@ -17,9 +17,11 @@
 		"echarts": "^5.4.1",
 		"echarts-gl": "^2.0.9",
 		"element-plus": "^2.3.9",
+		"html2canvas": "^1.4.1",
 		"js-cookie": "^3.0.1",
 		"js-table2excel": "^1.0.3",
 		"jsencrypt": "^3.3.2",
+		"jspdf": "^2.5.1",
 		"lodash": "^4.17.21",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",

admin-web/src/router/route.ts

@@ -114,7 +114,7 @@ export const adminRoutes: Array<RouteRecordRaw> = [
                     isAffix: false,
                     isIframe: false,
                     icon: 'ele-PictureRounded',
-                    // perm:"banner.list",
+                    perm:"kanban.list",
                 }
             },
             {

admin-web/src/views/admin/station/list/index.vue

@@ -51,6 +51,11 @@
           <SvgIcon name="ele-FolderAdd"/>
           新增
         </el-button>
+
+        <el-button  v-auth="'station.add'"   size="default" plain  type="success" class="ml10" @click="handleSettleShow">
+          <SvgIcon name="ele-FolderAdd"/>
+          对账单
+        </el-button>
       </el-form>
 
 <!--      <el-card class="w100">
@@ -117,6 +122,7 @@
     </el-card>
   </div>
   <StationDialog ref="stationDialogRef" @refresh="loadData(true)"/>
+  <SettleDialog ref="settleDialogRef" />
 </template>
 
 <script setup lang="ts" name="StationList">
@@ -132,10 +138,12 @@ import {useRouter} from "vue-router";
 import ExtImage from "/@/components/form/ExtImage.vue";
 const router = useRouter();
 const StationDialog = defineAsyncComponent(() => import("/@/views/admin/station/list/dialog.vue"));
+const SettleDialog = defineAsyncComponent(() => import("/@/views/admin/station/list/settle.vue"));
 
 //定义引用
 const queryRef = ref();
 const stationDialogRef = ref();
+const settleDialogRef = ref();
 
 //定义变量
 const state = reactive({
@@ -276,6 +284,10 @@ const handleTableSortChange = (column, prop, order) => {
   // emit("on-sort-change", column)
 }
 
+const handleSettleShow = () => {
+  settleDialogRef.value?.open();
+}
+
 
 //endregion
 

admin-web/src/views/admin/station/list/settle.vue

@@ -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>
+
+            结算账户：邱翔          &nbsp;&nbsp;  联系电话：15519385554 <br>
+
+            开户行：建设银行应城支行    &nbsp;&nbsp;     银行账号：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>

database/3-rollback.sql

@@ -0,0 +1 @@
+delete from  charge_admin.t_permission where  `value`='kanban.list' or `value` ='data';

database/3.sql

@@ -0,0 +1,3 @@
+insert into charge_admin.t_permission (id, pid, name, value, weight, create_time, update_time)
+values
+    (57, 16, '数据', 'data', 2, null, null),(58, 57, '看板数据', 'kanban.list', 2, null, null);