保存进度！
This commit is contained in:
parent
be5e426cee
commit
31d5e1622c
|
|
@ -112,6 +112,7 @@ module.exports = {
|
|||
"vue/html-indent": ["error", 4,],
|
||||
// typescript
|
||||
"@typescript-eslint/indent": ["warn", 4,],
|
||||
"@typescript-eslint/no-explicit-any": "warn",
|
||||
"@typescript-eslint/no-extra-semi": "off",
|
||||
"@typescript-eslint/no-inferrable-types": "off",
|
||||
"@typescript-eslint/no-unused-vars": "warn",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -188,4 +188,5 @@ export default {
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue