制作非车渗透的上传报表。

2023-10-17 17:44:14 +08:00
parent 0ad42d00a9
commit 0caf428d67
12 changed files with 491 additions and 66 deletions
--- a/code/web/task_schedule/src/layout/components/Header.vue
+++ b/code/web/task_schedule/src/layout/components/Header.vue
@@ -92,7 +92,7 @@ export default {
        align-items: start;

        font: {
-            size: 0.5rem;
+            size: 0.75rem;
        }

        >*+* {
--- a/code/web/task_schedule/src/utils/BIReport.ts
+++ b/code/web/task_schedule/src/utils/BIReport.ts
@@ -0,0 +1,76 @@
+/*
+ * @Author: Kane
+ * @Date: 2023-10-17 11:18:19
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/utils/api/BIReport.ts
+ * @Description: BI报表相关的代码
+ * 
+ * Copyright (c) ${2023} by Kane, All Rights Reserved. 
+ */
+import { service as instance } from "./api/request.js";
+import { API_URL } from "./api/config.js";
+import { type AxiosResponse } from "axios";
+interface BIReportType
+{
+    reportTypeCode: number;
+    reportTypeName: string;
+}
+
+interface ImportBIReportRequest
+{
+    filePath: string,
+    reportType: number,
+    hasCaption: boolean,
+    sheetIndex: number,
+}
+
+interface ImportBIReportResponse
+{
+    success: boolean,
+    message: string,
+    importedCount: number,
+}
+
+/**
+ * 
+ * @param request 请求参数
+ * @param handler 调用者提供的请求结果处理函数
+ */
+function importBIReport( request: ImportBIReportRequest, handler: any ): void
+{
+    const importResponse: ImportBIReportResponse = {
+        success: false,
+        message: "",
+        importedCount: 0,
+    };
+
+    instance.request({
+        url: API_URL.URL_IMPORT_REPORT,
+        method: "post",
+        data: request,
+    })
+        .then(( response: AxiosResponse<any, any> ): any =>
+        {
+            const data: ImportBIReportResponse = response.data;
+
+            importResponse.success = data.success ?? false;
+            importResponse.message = data.message ?? "";
+            importResponse.importedCount = data.importedCount ?? 0;
+
+            handler( importResponse, null );
+        })
+        .catch(( error: any ): any =>
+        {
+            importResponse.message = "请求导入报表错误，请查看控制台！";
+            console.log( error );
+
+            handler( importResponse, error );
+        });
+}
+
+export {
+    type BIReportType,
+    type ImportBIReportRequest,
+    type ImportBIReportResponse,
+    importBIReport
+};
--- a/code/web/task_schedule/src/utils/api/config.ts
+++ b/code/web/task_schedule/src/utils/api/config.ts
@@ -44,7 +44,12 @@ const API_URL = {
    // 删除获奖人员
    URL_DEL_REWARD_TELSALER: "http://10.39.0.41:8081/desktop_archievement_backend/rewards/delete_telsaler_reward.do",
    // URL_ADD_REWARD_TELSALER: "http://222.76.244.118:11101/desktop_archievement_backend/rewards/delete_telsaler_reward.do",
-
+    // 上传文件
+    URL_UPLOAD_FILE: "http://10.39.0.41:8081/desktop_archievement_backend/file/file-upload.do",
+    // URL_UPLOAD_FILE: "http://222.76.244.118:11101/desktop_archievement_backend/file/file-upload.do",
+    // 导入报表
+    URL_IMPORT_REPORT: "http://10.39.0.41:8081/desktop_archievement_backend/import_bi_data/excel.do",
+    // URL_IMPORT_REPORT: "http://222.76.244.118:11101/desktop_archievement_backend/import_bi_data/excel.do",
 };

 export { API_URL };
--- a/code/web/task_schedule/src/utils/fileUpload.ts
+++ b/code/web/task_schedule/src/utils/fileUpload.ts
@@ -14,3 +14,7 @@ interface FileUploadResponse
    message: string;
    fileList: string[];
 }
+
+export {
+    type FileUploadResponse
+};
--- a/code/web/task_schedule/src/views/data/DataManagement.vue
+++ b/code/web/task_schedule/src/views/data/DataManagement.vue
@@ -9,7 +9,7 @@
 -->
 <template>
    <div class="data_management_wrapper">
-        <div class="telsaler-dataupload-wrapper">
+        <!-- <div class="telsaler-dataupload-wrapper">
            <el-upload
                v-model="ui.fileList"
                drag
@@ -32,15 +32,27 @@
                    </div>
                </template>
            </el-upload>
-        </div>
+        </div> -->
+        <el-tabs>
+            <el-tab-pane label="坐席车非渗透率">
+                <TelsalerAttachingRateView />
+            </el-tab-pane>
+            <el-tab-pane label="坐席续保率">
+                坐席车非渗透率
+            </el-tab-pane>
+            <el-tab-pane label="机构">
+                坐席车非渗透率
+            </el-tab-pane>
+        </el-tabs>
    </div>
 </template>
 <script lang="ts">
 import { ref, reactive } from "vue";
 import { ElMessage, ElMessageBox, type UploadFile, type UploadFiles, type UploadProps, type UploadUserFile } from "element-plus";
-
+import TelsalerAttachingRateView from "@/views/data/bi/TelsalerAttachingRateView.vue";
 export default {
    name: "DataManagement",
+    components: { TelsalerAttachingRateView, },
    setup()
    {
        const ui = reactive({
--- a/code/web/task_schedule/src/views/data/bi/BiDataUploadView.vue
+++ b/code/web/task_schedule/src/views/data/bi/BiDataUploadView.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-10-17 10:56:43
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/views/data/bi/BiDataUploadView.vue
+ * @Description:
+ *
+ * Copyright (c) ${2023} by Kane, All Rights Reserved.
+-->
+<template>
+    <div class="bi-dataupload-wrapper">
+        <div class="query-box-wrapper">
+            <el-row :gutter="10">
+                <el-col :span="4">
+                    <span>报表类型</span>
+                </el-col>
+                <el-col :span="10">
+                    <el-select v-model="ui.selectedReportType">
+                        <el-option
+                            v-for="item in ui.reportType"
+                            :key="item.reportTypeCode"
+                            :label="item.reportTypeName"
+                            :value="item.reportTypeCode"
+                        />
+                    </el-select>
+                </el-col>
+                <el-col :span="4">
+                    <span>sheet编号</span>
+                </el-col>
+                <el-col :span="6">
+                    <el-input v-model.lazy.number="ui.sheetIndex" />
+                </el-col>
+            </el-row>
+            <el-row :gutter="10">
+                <el-col :span="4">
+                    <span>标题行</span>
+                </el-col>
+                <el-col :span="8">
+                    <el-switch v-model="ui.hasCaption" />
+                </el-col>
+            </el-row>
+        </div>
+        <el-upload
+            drag
+            action="http://222.76.244.118:11101/desktop_archievement_backend/file/file-upload.do"
+            name="files"
+            :show-file-list="false"
+            :data="ui.uploadParameters"
+        >
+            <el-icon class="el-icon--upload">
+                <upload-filled />
+            </el-icon>
+            <div class="el-upload__text">
+                将文件拖到此处，或<em>点击上传</em>
+            </div>
+        </el-upload>
+    </div>
+</template>
+<script lang="ts">
+import { reactive, ref } from "vue";
+import {
+    type BIReportType,
+    type ImportBIReportRequest,
+    type ImportBIReportResponse,
+    importBIReport
+} from "@/utils/BIReport.js";
+import { UploadFilled } from "@element-plus/icons-vue";
+
+interface UI
+{
+    showUI: boolean,
+    selectedReportType: number,
+    reportType: BIReportType[],
+    sheetIndex: number,
+    hasCaption: boolean,
+    uploadParameters: any,
+    showFileList: boolean,
+}
+
+export default {
+    name: "BiDataUploadView",
+    setup()
+    {
+        const ui: UI = reactive({
+            showUI: false,
+            selectedReportType: 0,
+            reportType: [
+                {
+                    reportTypeCode: 0,
+                    reportTypeName: "坐席车非渗透率",
+                },
+                {
+                    reportTypeCode: 1,
+                    reportTypeName: "坐席续保率",
+                },
+                {
+                    reportTypeCode: 2,
+                    reportTypeName: "部门车非渗透率续保率",
+                },],
+            sheetIndex: 0,
+            hasCaption: true,
+            uploadParameters: {
+                "task-name": "1234",
+            },
+            showFileList: false,
+        });
+
+        return {
+            ui,
+        };
+    },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/public/_public.scss";
+
+.bi-dataupload-wrapper {
+    // max-width: 600px;
+    width: 100%;
+    >*+* {
+        margin-top: 10px;
+    }
+}
+
+.query-box-wrapper {
+    @include query-box-wrap;
+}
+</style>
--- a/code/web/task_schedule/src/views/data/bi/DepartmentArchievementView.vue
+++ b/code/web/task_schedule/src/views/data/bi/DepartmentArchievementView.vue
@@ -0,0 +1,31 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-10-17 14:53:17
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/views/data/bi/DepartmentArchievementView.vue
+ * @Description:
+ *
+ * Copyright (c) ${2023} by Kane, All Rights Reserved.
+-->
+
+<template>
+    <div class="wrapper" />
+</template>
+<script lang="ts">
+import { reactive } from "vue";
+
+export default {
+    name: "DepartmentArchievementView",
+    setup()
+    {
+        const ui = reactive({
+            showUI: true,
+        });
+    },
+};
+</script>
+<style lang="scss" scoped>
+.wrapper {
+    margin: 10px;
+}
+</style>
--- a/code/web/task_schedule/src/views/data/bi/TelsalerAttachingRateView.vue
+++ b/code/web/task_schedule/src/views/data/bi/TelsalerAttachingRateView.vue
@@ -0,0 +1,139 @@
+<!--
+ * @Author: Kane
+ * @Date: 2023-10-17 14:41:39
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/views/data/bi/TelsalerAttachingRateView.vue
+ * @Description: BI坐席车非渗透率数据管理界面
+ *
+ * Copyright (c) ${2023} by Kane, All Rights Reserved.
+-->
+<template>
+    <div class="wrapper">
+        <el-row :gutter="10">
+            <el-col :span="8">
+                <el-button
+                    type="warning"
+                    icon="upload"
+                    @click="showUploadFileDialog"
+                >
+                    上传
+                </el-button>
+            </el-col>
+        </el-row>
+        <el-table
+            border
+            stripe
+            style="width:100%;"
+        >
+            <el-table-column
+                type="selection"
+                align="center"
+            />
+            <el-table-column
+                label="部门"
+                align="center"
+                width="200"
+            />
+            <el-table-column
+                label="名称"
+                align="center"
+                width="200"
+            />
+            <el-table-column
+                label="车险保费（万）"
+                align="center"
+            />
+            <el-table-column
+                label="非车险保费（万）"
+                align="center"
+            />
+            <el-table-column
+                label="当月保费渗透率"
+                align="center"
+            />
+            <el-table-column
+                label="渗透率环比上月"
+                align="center"
+            />
+        </el-table>
+        <div class="pagination_wrapper">
+            <el-pagination
+                v-model="ui.tableCurrentPageIndex"
+                class="pull_left"
+                size="small"
+                background
+                :page-size="ui.tablePageSize"
+                :page-sizes="[10, 20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="0"
+                @current-change="onCurrentPageIndexChange"
+                @size-change="onTablePageSizeChange"
+            />
+        </div>
+        <div
+            class="upload-dialog-wrapper"
+        >
+            <el-dialog
+                v-model="ui.showUploadDialog"
+                title="上传报表"
+                width="600px"
+            >
+                <BiDataUploadView />
+            </el-dialog>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { reactive } from "vue";
+import BiDataUploadView from "@/views/data/bi/BiDataUploadView.vue";
+
+export default {
+    name: "TelsalerAttachingRateView",
+    components: { BiDataUploadView, },
+    setup()
+    {
+        const ui = reactive({
+            showUI: true,
+            showUploadDialog: false,
+            tableCurrentPageIndex: 1,
+            tablePageSize: 10,
+        });
+
+        const showUploadFileDialog = (): void =>
+        {
+            ui.showUploadDialog = true;
+        };
+
+        const onCurrentPageIndexChange = ( index: number ): void =>
+        {
+            ui.tableCurrentPageIndex = index;
+        };
+
+        const onTablePageSizeChange = ( pageSize: number ): void =>
+        {
+            ui.tablePageSize = pageSize;
+        };
+
+        return {
+            ui,
+            showUploadFileDialog,
+            onCurrentPageIndexChange,
+            onTablePageSizeChange,
+        };
+    },
+};
+</script>
+<style lang="scss" scoped>
+.wrapper {
+    margin: 10px;
+
+    >*+* {
+        margin-top: 10px;
+    }
+}
+
+.pagination_wrapper {
+    display: flex;
+    justify-content: flex-end;
+}
+</style>
--- a/code/web/task_schedule/src/views/data/bi/TelsalerRenewalRateView.vue
+++ b/code/web/task_schedule/src/views/data/bi/TelsalerRenewalRateView.vue
@@ -0,0 +1,30 @@
+src/views/data/bi/TelsalerAttachingRateView.vue<!--
+ * @Author: Kane
+ * @Date: 2023-10-17 14:41:39
+ * @LastEditors: Kane
+ * @FilePath: /task_schedule/src/views/data/TelsalerAttachingRateView.vue
+ * @Description:
+ *
+ * Copyright (c) ${2023} by Kane, All Rights Reserved.
+-->
+<template>
+    <div class="wrapper" />
+</template>
+<script lang="ts">
+import { reactive } from "vue";
+
+export default {
+    name: "TelsalerAttachingRateView",
+    setup()
+    {
+        const ui = reactive({
+            showUI: true,
+        });
+    },
+};
+</script>
+<style lang="scss" scoped>
+.wrapper {
+    margin: 10px;
+}
+</style>