保存进度！

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

@@ -8,42 +8,96 @@
  * Copyright (c) ${2022} by Kane, All Rights Reserved.
 -->
 <template>
-    <div class="wrapper">
+    <div
+        v-if="ui.showUI"
+        class="wrapper"
+    >
         <div class="reward-wrapper">
             <div class="reward-gainer-wrapper">
                 <el-divider content-position="left">
                     90俱乐部
                 </el-divider>
                 <div class="toolbutton-wrapper">
-                    <el-button type="primary">
+                    <el-button
+                        type="primary"
+                        icon="documentAdd"
+                    >
                         新增
                     </el-button>
-                    <el-button type="danger">
+                    <el-button
+                        type="danger"
+                        icon="delete"
+                    >
                         删除
                     </el-button>
+                    <el-button
+                        type="warning"
+                        icon="Refresh"
+                        @click="refresh"
+                    >
+                        刷新
+                    </el-button>
                 </div>
                 <el-table
                     border
                     stripe
                     style="width:100%;"
                     :height="tableHeight"
+                    :data="rewardGainerData"
                 >
                     <el-table-column type="selection" />
                     <el-table-column
                         label="坐席名称"
                         align="center"
-                    />
+                    >
+                        <template #default="rewardGainer">
+                            <span
+                                class="reward-gainer-td"
+                                @dblclick="onEditRewardGainer(rewardGainer.row.callerName, rewardGainer.row.rewardProjectName)"
+                            >{{ rewardGainer.row.callerName }}</span>
+                        </template>
+                    </el-table-column>
                     <el-table-column
                         label="奖项名称"
                         align="center"
-                    />
+                    >
+                        <template #default="rewardGainer">
+                            <span
+                                class="reward-gainer-td"
+                                @dblclick="onEditRewardGainer(rewardGainer.row.callerName, rewardGainer.row.rewardProjectName)"
+                            >{{ rewardGainer.row.rewardProjectName }}</span>
+                        </template>
+                    </el-table-column>
                 </el-table>
+                <div class="pagination-wrapper">
+                    <el-pagination
+                        v-model="ui.tablePageIndex"
+                        class="pull_left"
+                        size="small"
+                        background
+                        :page-size="ui.tablePageSize"
+                        :page-sizes="[10, 20, 50, 100]"
+                        layout="total, sizes, prev, pager, next, jumper"
+                        :total="ui.rewardGainerList.length"
+                        @current-change="onCurrentPageIndexChange"
+                        @size-change="onTablePageSizeChange"
+                    />
+                </div>
             </div>
         </div>
+        <div class="dialog-wrapper">
+            <el-dialog
+                title="编辑获奖人员"
+                v-model="ui.showEditRewardGainerDialog"
+                width="400px"
+            >
+                <RewardGainerDialog />
+            </el-dialog>
+        </div>
     </div>
 </template>
 <script lang="ts">
-import { reactive, computed } from "vue";
+import { reactive, computed, onBeforeMount } from "vue";
 import {
     type RewardProject,
     type RewardGainer,
@@ -52,36 +106,110 @@ import {
     requestRewardPorjectsList,
     requestRewardGainers
 } from "@/utils/reward.js";
+import { ElMessageBox } from "element-plus";
+import RewardGainerDialog from "@/views/reward/RewardGainer.vue";
 
 interface UI
 {
+    showUI: boolean;
+    showEditRewardGainerDialog: boolean;
     rewardGainerList: RewardGainer[];
+    tablePageIndex: number;
+    tablePageSize: number;
 }
 
 export default {
     name: "DataManagement",
+    components: { RewardGainerDialog, },
     setup()
     {
         const ui: UI = reactive({
+            showUI: true,
+            showEditRewardGainerDialog: false,
             rewardGainerList: [],
+            tablePageIndex: 1,
+            tablePageSize: 10,
         });
 
+        /** 请求数据相关 ***************************/
+        const applyGainerList = ( response: RewardGainerResponse, error: any ): void =>
+        {
+            if ( !response.success )
+            {
+                console.log( error );
+
+                ElMessageBox({
+                    message: "请求获奖人列表失败，请查看日志！",
+                    type: "error",
+                    center: true,
+                })
+                    .then((): void => {})
+                    .catch((): void => {});
+
+                return;
+            }
+
+            ui.rewardGainerList = response.gainerList;
+
+            console.log( "请求获奖人员列表", ui.rewardGainerList );
+        };
+
+        /** 表格相关 ***************************/
         const tableHeight = computed((): number =>
         {
-            return 5 * 50 + 40;
+            return ( ui.tablePageSize + 1 ) * 40;
         });
 
-        const applyGainerList = ( response: RewardGainerResponse ): void =>
+        const rewardGainerData = computed((): RewardGainer[] =>
         {
-            if ( response.success )
-            {
-                ui.rewardGainerList = response.gainerList;
-            }
+            const startIndex = ui.tablePageSize * ( ui.tablePageIndex - 1 );
+            const endIndex = startIndex + ui.tablePageSize;
+            const data = ui.rewardGainerList.slice( startIndex, endIndex );
+            console.log( ui.tablePageSize, ui.tablePageIndex );
+            console.log( "表格数据:", data );
+
+            return data;
+        });
+
+        const onCurrentPageIndexChange = ( pageIndex: number ): void =>
+        {
+            ui.tablePageIndex = pageIndex;
         };
 
+        const onTablePageSizeChange = ( pageSize: number ): void =>
+        {
+            ui.tablePageSize = pageSize;
+        };
+
+        // 表格编辑相关
+        const onEditRewardGainer = ( callerName: string, rewardProjectName: string ): void =>
+        {
+            console.log( "编辑获奖清单", callerName, rewardProjectName );
+
+            ui.showEditRewardGainerDialog = true;
+        };
+
+        /**
+         * 用于刷新页面
+         */
+        const refresh = (): void =>
+        {
+            requestRewardGainers( applyGainerList );
+        };
+
+        onBeforeMount((): void =>
+        {
+            refresh();
+        });
+
         return {
             ui,
             tableHeight,
+            rewardGainerData,
+            onCurrentPageIndexChange,
+            onTablePageSizeChange,
+            onEditRewardGainer,
+            refresh,
         };
     },
 };
@@ -145,4 +273,17 @@ export default {
         margin-left: 15px;
     }
 }
+
+.pagination-wrapper {
+    margin-top: 10px;
+
+    display: flex;
+    justify-content: flex-end;
+}
+
+.reward-gainer-td {
+    cursor: pointer;
+
+    display: block;
+}
 </style>

code/web/task_schedule/src/views/StaffManagement.vue

@@ -188,4 +188,5 @@ export default {
     display: flex;
     justify-content: flex-end;
 }
+
 </style>

code/web/task_schedule/src/views/reward/RewardGainer.vue

@@ -9,11 +9,11 @@
 -->
 <template>
     <div class="reward-gainer-wrapper">
-        <el-row>
-            <el-col :span="12">
+        <el-row :gutter="10">
+            <el-col :span="8">
                 <span>奖励类型</span>
             </el-col>
-            <el-col :span="12">
+            <el-col :span="16">
                 <el-select v-model="ui.selectedRewardProject">
                     <el-option
                         v-for="item in ui.rewardProjectList"
@@ -24,18 +24,18 @@
                 </el-select>
             </el-col>
         </el-row>
-        <el-row>
-            <el-col :span="12">
+        <el-row :gutter="10">
+            <el-col :span="8">
                 <span>坐席名称</span>
             </el-col>
-            <el-col :span="12">
+            <el-col :span="16">
                 <el-input v-model.trim.lazy="ui.rewardCallerName" />
             </el-col>
         </el-row>
     </div>
 </template>
 <script lang="ts">
-import { reactive } from "vue";
+import { reactive, onBeforeMount } from "vue";
 import
 {
     type RewardProject,
@@ -45,11 +45,13 @@ import
     requestRewardPorjectsList,
     requestRewardGainers
 } from "@/utils/reward.js";
+import { ElMessageBox } from "element-plus";
 
 interface RewardGainerUI
 {
-    rewardProjectList: RewardProject[];
-    selectedRewardProject: number;
+    showEditRewardGainerDialog: boolean;
+    rewardProjectList: RewardProject[] | null;
+    selectedRewardProject: number | undefined;
     rewardCallerName: string;
 }
 
@@ -58,17 +60,51 @@ export default {
     setup()
     {
         const ui: RewardGainerUI = reactive({
+            showEditRewardGainerDialog: false,
             rewardProjectList: [],
-            selectedRewardProject: 0,
+            selectedRewardProject: undefined,
             rewardCallerName: "",
         });
 
+        const applyRewardProjectsData = ( response: RewardProjectResponse, error: any ): void =>
+        {
+            if ( !response.success )
+            {
+                ElMessageBox({
+                    message: "请求奖励项目失败，请查看日志！",
+                    type: "error",
+                })
+                    .then((): void => {})
+                    .catch((): void => {});
+
+                console.log( "请求奖励项目失败:", error );
+
+                return;
+            }
+
+            ui.rewardProjectList = response.rewardList;
+        };
+
+        const refresh = (): void =>
+        {
+            requestRewardPorjectsList( applyRewardProjectsData );
+        };
+
+        onBeforeMount((): void =>
+        {
+            refresh();
+        });
+
         return { ui, };
     },
 };
 </script>
 <style lang="scss" scoped>
+@import "@/assets/css/public/_public.scss";
+
 .reward-gainer-wrapper {
     width: 300px;
+
+    @include query-box-wrap;
 }
 </style>