保存进度!
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