149 lines
3.1 KiB
Vue
149 lines
3.1 KiB
Vue
<!--
|
|
* @Author: Kane
|
|
* @Date: 2023-03-23 16:05:08
|
|
* @LastEditors: Kane
|
|
* @FilePath: /task_schedule/src/views/DataManagement.vue
|
|
* @Description:
|
|
*
|
|
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
|
-->
|
|
<template>
|
|
<div 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>
|
|
<el-button type="danger">
|
|
删除
|
|
</el-button>
|
|
</div>
|
|
<el-table
|
|
border
|
|
stripe
|
|
style="width:100%;"
|
|
:height="tableHeight"
|
|
>
|
|
<el-table-column type="selection" />
|
|
<el-table-column
|
|
label="坐席名称"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
label="奖项名称"
|
|
align="center"
|
|
/>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { reactive, computed } from "vue";
|
|
import {
|
|
type RewardProject,
|
|
type RewardGainer,
|
|
type RewardProjectResponse,
|
|
type RewardGainerResponse,
|
|
requestRewardPorjectsList,
|
|
requestRewardGainers
|
|
} from "@/utils/reward.js";
|
|
|
|
interface UI
|
|
{
|
|
rewardGainerList: RewardGainer[];
|
|
}
|
|
|
|
export default {
|
|
name: "DataManagement",
|
|
setup()
|
|
{
|
|
const ui: UI = reactive({
|
|
rewardGainerList: [],
|
|
});
|
|
|
|
const tableHeight = computed((): number =>
|
|
{
|
|
return 5 * 50 + 40;
|
|
});
|
|
|
|
const applyGainerList = ( response: RewardGainerResponse ): void =>
|
|
{
|
|
if ( response.success )
|
|
{
|
|
ui.rewardGainerList = response.gainerList;
|
|
}
|
|
};
|
|
|
|
return {
|
|
ui,
|
|
tableHeight,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/css/public/_public.scss";
|
|
|
|
.wrapper {
|
|
margin: 10px;
|
|
padding: 10px;
|
|
|
|
// background-color: #fff;
|
|
// border-radius: 5px;
|
|
// box-shadow: $box-shadow;
|
|
|
|
// &:hover {
|
|
// box-shadow: $box-shadow-hover;
|
|
// }
|
|
|
|
min-width: 800px;
|
|
|
|
>*+* {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.reward-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
>div {
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
box-shadow: $box-shadow;
|
|
|
|
padding: 10px;
|
|
|
|
&:hover {
|
|
box-shadow: $box-shadow-hover;
|
|
}
|
|
}
|
|
|
|
>*+* {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.reward-gainer-wrapper {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.dishonor-wrapper {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.toolbutton-wrapper {
|
|
text-align: left;
|
|
margin-bottom: 10px;
|
|
>*+* {
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
</style>
|