保存进度!

This commit is contained in:
2023-09-13 18:01:07 +08:00
parent 31d5e1622c
commit 4deed356f5
12 changed files with 308 additions and 184 deletions

View File

@@ -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;

View File

@@ -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;
};

View File

@@ -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>

View 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>