保存进度!
This commit is contained in:
		@@ -26,7 +26,7 @@ interface RewardProjectResponse
 | 
			
		||||
 | 
			
		||||
interface RewardGainer
 | 
			
		||||
{
 | 
			
		||||
    acquiredDate: string;
 | 
			
		||||
    recID: number;
 | 
			
		||||
    callerName: string;
 | 
			
		||||
    callerCode: string;
 | 
			
		||||
    rewardProjectCode: string;
 | 
			
		||||
@@ -37,7 +37,7 @@ interface RewardGainerResponse
 | 
			
		||||
{
 | 
			
		||||
    success: boolean;
 | 
			
		||||
    message: string;
 | 
			
		||||
    gainerList: RewardGainer[];
 | 
			
		||||
    gainerList: RewardGainer[] | null;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/**
 | 
			
		||||
@@ -108,7 +108,7 @@ function requestRewardGainers( handler: any ): void
 | 
			
		||||
 | 
			
		||||
            rewardResponse.success = data.success;
 | 
			
		||||
            rewardResponse.message = data.message;
 | 
			
		||||
            rewardResponse.gainerList = data.gainerList;
 | 
			
		||||
            rewardResponse.gainerList = checkRewardGainers( data.gainerList );
 | 
			
		||||
 | 
			
		||||
            handler( rewardResponse, null );
 | 
			
		||||
        })
 | 
			
		||||
@@ -158,12 +158,14 @@ function checkRewardGainers( gainers: any[]): RewardGainer[] | null
 | 
			
		||||
    gainers.forEach(( item: RewardGainer ): void =>
 | 
			
		||||
    {
 | 
			
		||||
        const gainer: RewardGainer = {
 | 
			
		||||
            acquiredDate: item.acquiredDate ?? "",
 | 
			
		||||
            recID: item.recID ?? "",
 | 
			
		||||
            callerName: item.callerName ?? "",
 | 
			
		||||
            callerCode: item.callerCode ?? "",
 | 
			
		||||
            rewardProjectCode: item.rewardProjectCode ?? "",
 | 
			
		||||
            rewardProjectName: item.rewardProjectName ?? "",
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        gainerList.push( gainer );
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    return gainerList;
 | 
			
		||||
 
 | 
			
		||||
@@ -53,7 +53,7 @@
 | 
			
		||||
                        <template #default="rewardGainer">
 | 
			
		||||
                            <span
 | 
			
		||||
                                class="reward-gainer-td"
 | 
			
		||||
                                @dblclick="onEditRewardGainer(rewardGainer.row.callerName, rewardGainer.row.rewardProjectName)"
 | 
			
		||||
                                @dblclick="onEditRewardGainer(rewardGainer.row.recID, rewardGainer.row.callerName, rewardGainer.row.rewardProjectCode)"
 | 
			
		||||
                            >{{ rewardGainer.row.callerName }}</span>
 | 
			
		||||
                        </template>
 | 
			
		||||
                    </el-table-column>
 | 
			
		||||
@@ -64,7 +64,7 @@
 | 
			
		||||
                        <template #default="rewardGainer">
 | 
			
		||||
                            <span
 | 
			
		||||
                                class="reward-gainer-td"
 | 
			
		||||
                                @dblclick="onEditRewardGainer(rewardGainer.row.callerName, rewardGainer.row.rewardProjectName)"
 | 
			
		||||
                                @dblclick="onEditRewardGainer( rewardGainer.row.recID, rewardGainer.row.callerName, rewardGainer.row.rewardProjectCode)"
 | 
			
		||||
                            >{{ rewardGainer.row.rewardProjectName }}</span>
 | 
			
		||||
                        </template>
 | 
			
		||||
                    </el-table-column>
 | 
			
		||||
@@ -78,20 +78,27 @@
 | 
			
		||||
                        :page-size="ui.tablePageSize"
 | 
			
		||||
                        :page-sizes="[10, 20, 50, 100]"
 | 
			
		||||
                        layout="total, sizes, prev, pager, next, jumper"
 | 
			
		||||
                        :total="ui.rewardGainerList.length"
 | 
			
		||||
                        :total="(ui.rewardGainerList ?? []).length"
 | 
			
		||||
                        @current-change="onCurrentPageIndexChange"
 | 
			
		||||
                        @size-change="onTablePageSizeChange"
 | 
			
		||||
                    />
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="dialog-wrapper">
 | 
			
		||||
        <div
 | 
			
		||||
            v-if="ui.showEditRewardGainerDialog"
 | 
			
		||||
            class="dialog-wrapper"
 | 
			
		||||
        >
 | 
			
		||||
            <el-dialog
 | 
			
		||||
                title="编辑获奖人员"
 | 
			
		||||
                v-model="ui.showEditRewardGainerDialog"
 | 
			
		||||
                title="编辑获奖人员"
 | 
			
		||||
                width="400px"
 | 
			
		||||
            >
 | 
			
		||||
                <RewardGainerDialog />
 | 
			
		||||
                <RewardGainerDialog
 | 
			
		||||
                    :selected-rec-id="(ui.selectedRecID ?? -9999)"
 | 
			
		||||
                    :selected-reward-project-code="ui.selectedRewardProjectCode"
 | 
			
		||||
                    :selected-telsaler-name="ui.selectedTelsalerName"
 | 
			
		||||
                />
 | 
			
		||||
            </el-dialog>
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
@@ -107,15 +114,18 @@ import {
 | 
			
		||||
    requestRewardGainers
 | 
			
		||||
} from "@/utils/reward.js";
 | 
			
		||||
import { ElMessageBox } from "element-plus";
 | 
			
		||||
import RewardGainerDialog from "@/views/reward/RewardGainer.vue";
 | 
			
		||||
import RewardGainerDialog from "@/views/reward/RewardTelsaler.vue";
 | 
			
		||||
 | 
			
		||||
interface UI
 | 
			
		||||
{
 | 
			
		||||
    showUI: boolean;
 | 
			
		||||
    showEditRewardGainerDialog: boolean;
 | 
			
		||||
    rewardGainerList: RewardGainer[];
 | 
			
		||||
    rewardGainerList: RewardGainer[] | null;
 | 
			
		||||
    tablePageIndex: number;
 | 
			
		||||
    tablePageSize: number;
 | 
			
		||||
    selectedRecID: number | null;
 | 
			
		||||
    selectedTelsalerName: string;
 | 
			
		||||
    selectedRewardProjectCode: number;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
@@ -126,9 +136,12 @@ export default {
 | 
			
		||||
        const ui: UI = reactive({
 | 
			
		||||
            showUI: true,
 | 
			
		||||
            showEditRewardGainerDialog: false,
 | 
			
		||||
            rewardGainerList: [],
 | 
			
		||||
            rewardGainerList: null,
 | 
			
		||||
            tablePageIndex: 1,
 | 
			
		||||
            tablePageSize: 10,
 | 
			
		||||
            selectedRecID: null,
 | 
			
		||||
            selectedTelsalerName: "",
 | 
			
		||||
            selectedRewardProjectCode: -999,
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        /** 请求数据相关 ***************************/
 | 
			
		||||
@@ -160,8 +173,17 @@ export default {
 | 
			
		||||
            return ( ui.tablePageSize + 1 ) * 40;
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        /**
 | 
			
		||||
         * 用于根据分页组件的参数,生成表格用的数据。
 | 
			
		||||
         */
 | 
			
		||||
        const rewardGainerData = computed((): RewardGainer[] =>
 | 
			
		||||
        {
 | 
			
		||||
            // 防御性验证
 | 
			
		||||
            if ( ui.rewardGainerList === null )
 | 
			
		||||
            {
 | 
			
		||||
                return [];
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            const startIndex = ui.tablePageSize * ( ui.tablePageIndex - 1 );
 | 
			
		||||
            const endIndex = startIndex + ui.tablePageSize;
 | 
			
		||||
            const data = ui.rewardGainerList.slice( startIndex, endIndex );
 | 
			
		||||
@@ -182,10 +204,18 @@ export default {
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        // 表格编辑相关
 | 
			
		||||
        const onEditRewardGainer = ( callerName: string, rewardProjectName: string ): void =>
 | 
			
		||||
        /**
 | 
			
		||||
         * 响应用户在表格中的双击
 | 
			
		||||
         * @param telsalerName 
 | 
			
		||||
         * @param rewardProjectName 
 | 
			
		||||
         */
 | 
			
		||||
        const onEditRewardGainer = ( recID: number, telsalerName: string, rewardProjectCode: number ): void =>
 | 
			
		||||
        {
 | 
			
		||||
            console.log( "编辑获奖清单", callerName, rewardProjectName );
 | 
			
		||||
            console.log( "编辑获奖清单", recID, telsalerName, rewardProjectCode );
 | 
			
		||||
 | 
			
		||||
            ui.selectedRecID = recID;
 | 
			
		||||
            ui.selectedTelsalerName = telsalerName;
 | 
			
		||||
            ui.selectedRewardProjectCode = rewardProjectCode;
 | 
			
		||||
            ui.showEditRewardGainerDialog = true;
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -1,110 +0,0 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: Kane
 | 
			
		||||
 * @Date: 2023-09-12 10:43:39
 | 
			
		||||
 * @LastEditors: Kane
 | 
			
		||||
 * @FilePath: /task_schedule/src/views/reward/RewardGainer.vue
 | 
			
		||||
 * @Description:
 | 
			
		||||
 *
 | 
			
		||||
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
    <div class="reward-gainer-wrapper">
 | 
			
		||||
        <el-row :gutter="10">
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
                <span>奖励类型</span>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="16">
 | 
			
		||||
                <el-select v-model="ui.selectedRewardProject">
 | 
			
		||||
                    <el-option
 | 
			
		||||
                        v-for="item in ui.rewardProjectList"
 | 
			
		||||
                        :key="item.rewardCode"
 | 
			
		||||
                        :label="item.rewardName"
 | 
			
		||||
                        :value="item.rewardCode"
 | 
			
		||||
                    />
 | 
			
		||||
                </el-select>
 | 
			
		||||
            </el-col>
 | 
			
		||||
        </el-row>
 | 
			
		||||
        <el-row :gutter="10">
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
                <span>坐席名称</span>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="16">
 | 
			
		||||
                <el-input v-model.trim.lazy="ui.rewardCallerName" />
 | 
			
		||||
            </el-col>
 | 
			
		||||
        </el-row>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
import { reactive, onBeforeMount } from "vue";
 | 
			
		||||
import
 | 
			
		||||
{
 | 
			
		||||
    type RewardProject,
 | 
			
		||||
    type RewardGainer,
 | 
			
		||||
    type RewardProjectResponse,
 | 
			
		||||
    type RewardGainerResponse,
 | 
			
		||||
    requestRewardPorjectsList,
 | 
			
		||||
    requestRewardGainers
 | 
			
		||||
} from "@/utils/reward.js";
 | 
			
		||||
import { ElMessageBox } from "element-plus";
 | 
			
		||||
 | 
			
		||||
interface RewardGainerUI
 | 
			
		||||
{
 | 
			
		||||
    showEditRewardGainerDialog: boolean;
 | 
			
		||||
    rewardProjectList: RewardProject[] | null;
 | 
			
		||||
    selectedRewardProject: number | undefined;
 | 
			
		||||
    rewardCallerName: string;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
    name: "RewardGainer",
 | 
			
		||||
    setup()
 | 
			
		||||
    {
 | 
			
		||||
        const ui: RewardGainerUI = reactive({
 | 
			
		||||
            showEditRewardGainerDialog: false,
 | 
			
		||||
            rewardProjectList: [],
 | 
			
		||||
            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>
 | 
			
		||||
							
								
								
									
										183
									
								
								code/web/task_schedule/src/views/reward/RewardTelsaler.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										183
									
								
								code/web/task_schedule/src/views/reward/RewardTelsaler.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,183 @@
 | 
			
		||||
<!--
 | 
			
		||||
 * @Author: Kane
 | 
			
		||||
 * @Date: 2023-09-12 10:43:39
 | 
			
		||||
 * @LastEditors: Kane
 | 
			
		||||
 * @FilePath: /task_schedule/src/views/reward/RewardTelsaler.vue
 | 
			
		||||
 * @Description:
 | 
			
		||||
 *
 | 
			
		||||
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
    <div
 | 
			
		||||
        v-if="ui.showUI"
 | 
			
		||||
        class="reward-gainer-wrapper"
 | 
			
		||||
    >
 | 
			
		||||
        <el-row :gutter="10">
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
                <span>奖励类型</span>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="16">
 | 
			
		||||
                <el-select
 | 
			
		||||
                    v-model="ui.selectedRewardProjectCode"
 | 
			
		||||
                    value-key="rewardCode"
 | 
			
		||||
                >
 | 
			
		||||
                    <el-option
 | 
			
		||||
                        v-for="item in ui.rewardProjectList"
 | 
			
		||||
                        :key="item.rewardCode"
 | 
			
		||||
                        :label="item.rewardName"
 | 
			
		||||
                        :value="item.rewardCode"
 | 
			
		||||
                    />
 | 
			
		||||
                </el-select>
 | 
			
		||||
            </el-col>
 | 
			
		||||
        </el-row>
 | 
			
		||||
        <el-row :gutter="10">
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
                <span>坐席名称</span>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="16">
 | 
			
		||||
                <el-input v-model.trim.lazy="ui.selectedRewardTelsalerName" />
 | 
			
		||||
            </el-col>
 | 
			
		||||
        </el-row>
 | 
			
		||||
        <!-- <el-row :gutter="10">
 | 
			
		||||
            <el-col :span="8">
 | 
			
		||||
                <span>测试</span>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="16">
 | 
			
		||||
                <el-input v-model.trim.lazy.number="ui.selectedRewardProjectCode" />
 | 
			
		||||
            </el-col>
 | 
			
		||||
        </el-row> -->
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
import { reactive, onBeforeMount, onBeforeUpdate, ref } from "vue";
 | 
			
		||||
import
 | 
			
		||||
{
 | 
			
		||||
    type RewardProject,
 | 
			
		||||
    type RewardGainer,
 | 
			
		||||
    type RewardProjectResponse,
 | 
			
		||||
    type RewardGainerResponse,
 | 
			
		||||
    requestRewardPorjectsList,
 | 
			
		||||
    requestRewardGainers
 | 
			
		||||
} from "@/utils/reward.js";
 | 
			
		||||
import { ElMessageBox } from "element-plus";
 | 
			
		||||
import { number } from "echarts";
 | 
			
		||||
 | 
			
		||||
interface RewardGainerUI
 | 
			
		||||
{
 | 
			
		||||
    showUI: boolean;
 | 
			
		||||
    showEditRewardGainerDialog: boolean;
 | 
			
		||||
    rewardProjectList: RewardProject[] | null;
 | 
			
		||||
    selectedRewardProjectCode: number | undefined;
 | 
			
		||||
    selectedRewardTelsalerName: string;
 | 
			
		||||
    selectedRecID: number;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
    name: "RewardTelsaler",
 | 
			
		||||
    props: {
 | 
			
		||||
        selectedRecId: {
 | 
			
		||||
            type: Number,
 | 
			
		||||
            require: true,
 | 
			
		||||
            default: (): number => -9999,
 | 
			
		||||
        },
 | 
			
		||||
        selectedRewardProjectCode: {
 | 
			
		||||
            type: Number,
 | 
			
		||||
            require: true,
 | 
			
		||||
            default: (): number => -999,
 | 
			
		||||
        },
 | 
			
		||||
        selectedTelsalerName: {
 | 
			
		||||
            type: String,
 | 
			
		||||
            require: true,
 | 
			
		||||
            default: (): string => "",
 | 
			
		||||
        },
 | 
			
		||||
    },
 | 
			
		||||
    setup( props )
 | 
			
		||||
    {
 | 
			
		||||
        const ui: RewardGainerUI = reactive({
 | 
			
		||||
            showUI: true,
 | 
			
		||||
            showEditRewardGainerDialog: false,
 | 
			
		||||
            // rewardProjectList: ref([
 | 
			
		||||
            //     {
 | 
			
		||||
            //         rewardCode: 1,
 | 
			
		||||
            //         rewardName: "90俱乐部入围奖",
 | 
			
		||||
            //     },
 | 
			
		||||
            //     {
 | 
			
		||||
            //         rewardCode: 2,
 | 
			
		||||
            //         rewardName: "90俱乐部领跑奖",
 | 
			
		||||
            //     },
 | 
			
		||||
            //     {
 | 
			
		||||
            //         rewardCode: 3,
 | 
			
		||||
            //         rewardName: "90俱乐部飞跃奖",
 | 
			
		||||
            //     },
 | 
			
		||||
            // ]),
 | 
			
		||||
            rewardProjectList: [],
 | 
			
		||||
            selectedRewardProjectCode: 1,
 | 
			
		||||
            selectedRewardTelsalerName: "",
 | 
			
		||||
            selectedRecID: 0,
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        const applyRewardProjectsData = ( response: RewardProjectResponse, error: any ): void =>
 | 
			
		||||
        {
 | 
			
		||||
            if ( !response.success )
 | 
			
		||||
            {
 | 
			
		||||
                ElMessageBox({
 | 
			
		||||
                    message: "请求奖励项目失败,请查看日志!",
 | 
			
		||||
                    type: "error",
 | 
			
		||||
                })
 | 
			
		||||
                    .then((): void => {})
 | 
			
		||||
                    .catch((): void => {});
 | 
			
		||||
 | 
			
		||||
                console.log( "请求奖励项目失败:", error );
 | 
			
		||||
 | 
			
		||||
                return;
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            console.log( "请求奖励项目结果", response.rewardList );
 | 
			
		||||
 | 
			
		||||
            ui.rewardProjectList = response.rewardList;
 | 
			
		||||
            // ui.selectedRewardProjectCode = props.selectedRewardProjectCode;
 | 
			
		||||
            // ui.selectedRewardTelsalerName = props.selectedTelsalerName;
 | 
			
		||||
            // ui.selectedRecID = props.selectedRecId;
 | 
			
		||||
 | 
			
		||||
            ui.showUI = false;
 | 
			
		||||
 | 
			
		||||
            setTimeout((): void =>
 | 
			
		||||
            {
 | 
			
		||||
                ui.showUI = true;
 | 
			
		||||
            }, 0 );
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        const refresh = (): void =>
 | 
			
		||||
        {
 | 
			
		||||
            requestRewardPorjectsList( applyRewardProjectsData );
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        onBeforeMount((): void =>
 | 
			
		||||
        {
 | 
			
		||||
            ui.selectedRewardProjectCode = props.selectedRewardProjectCode;
 | 
			
		||||
            ui.selectedRewardTelsalerName = props.selectedTelsalerName;
 | 
			
		||||
            ui.selectedRecID = props.selectedRecId;
 | 
			
		||||
 | 
			
		||||
            refresh();
 | 
			
		||||
 | 
			
		||||
            console.log( props.selectedRewardProjectCode );
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        // onBeforeUpdate((): 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>
 | 
			
		||||
		Reference in New Issue
	
	Block a user