保存进度!

code/web/task_schedule/src/views/data/DataManagement.vue

@@ -9,36 +9,12 @@
 -->
 <template>
     <div class="data_management_wrapper">
-        <!-- <div class="telsaler-dataupload-wrapper">
-            <el-upload
-                v-model="ui.fileList"
-                drag
-                action="http://localhost:8080/desktop_archievement_backend/file/file-upload.do"
-                :on-preview="handlePreview"
-                :on-remove="handleRemove"
-                :on-success="handleUploadSuccess"
-                :before-remove="beforeRemove"
-                :limit="1"
-                :on-exceed="handleExceed"
-                :data="ui.uploadData"
-                name="files"
-            >
-                <el-button type="primary">
-                    上传
-                </el-button>
-                <template #tip>
-                    <div class="el-upload__tip">
-                        文件不能大于100MB。
-                    </div>
-                </template>
-            </el-upload>
-        </div> -->
         <el-tabs>
             <el-tab-pane label="坐席车非渗透率">
                 <TelsalerAttachingRateView />
             </el-tab-pane>
             <el-tab-pane label="坐席续保率">
-                坐席车非渗透率
+                <TelsalerRenewalRateView />
             </el-tab-pane>
             <el-tab-pane label="机构">
                 坐席车非渗透率
@@ -50,9 +26,10 @@
 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";
+import TelsalerRenewalRateView from "@/views/data/bi/TelsalerRenewalRateView.vue";
 export default {
     name: "DataManagement",
-    components: { TelsalerAttachingRateView, },
+    components: { TelsalerAttachingRateView, TelsalerRenewalRateView, },
     setup()
     {
         const ui = reactive({

code/web/task_schedule/src/views/data/bi/BiDataUploadView.vue

@@ -62,7 +62,7 @@
     </div>
 </template>
 <script lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, onBeforeMount } from "vue";
 import {
     type BIReportType,
     type ImportBIReportRequest,
@@ -92,10 +92,10 @@ export default {
         reportType: {
             type: Number,
             require: true,
-            default: (): number => -9999,
+            default: (): number => 0,
         },
     },
-    setup()
+    setup( props )
     {
         const ui: UI = reactive({
             showUI: false,
@@ -214,6 +214,11 @@ export default {
             }
         };
 
+        onBeforeMount((): void =>
+        {
+            ui.selectedReportType = props.reportType;
+        });
+
         return {
             ui,
             onUploadSuccess,

code/web/task_schedule/src/views/data/bi/TelsalerRenewalRateView.vue

@@ -1,30 +1,136 @@
-src/views/data/bi/TelsalerAttachingRateView.vue<!--
+<!--
  * @Author: Kane
- * @Date: 2023-10-17 14:41:39
+ * @Date: 2023-10-17 23:31:19
  * @LastEditors: Kane
- * @FilePath: /task_schedule/src/views/data/TelsalerAttachingRateView.vue
+ * @FilePath: /task_schedule/src/views/data/bi/TelsalerRenewalRateView.vue
  * @Description:
  *
  * Copyright (c) ${2023} by Kane, All Rights Reserved.
 -->
 <template>
-    <div class="wrapper" />
+    <div class="wrapper">
+        <el-row :gutter="10">
+            <el-col :span="24">
+                <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"
+            />
+            <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"
+                :close-on-click-modal="false"
+                :close-on-press-escape="false"
+                :show-close="true"
+            >
+                <BiDataUploadView :report-type="1" />
+            </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>