168 lines
3.6 KiB
Vue
168 lines
3.6 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="top">
|
|
<div>
|
|
<el-date-picker
|
|
v-model="value2"
|
|
type="daterange"
|
|
:shortcuts="shortcuts"
|
|
range-separator="~"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
<el-select v-model="source" placeholder="销售员" style="width: 100px;margin:0 10px">
|
|
<el-option
|
|
v-for="item in sourceOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" plain>汇总</el-button>
|
|
<el-button type="primary" plain>明细</el-button>
|
|
<el-button type="primary" plain>
|
|
<el-icon>
|
|
<Upload/>
|
|
</el-icon>
|
|
导出
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<el-table :data="tableData" style="width: 100%">
|
|
<el-table-column label="销售人" align="center"></el-table-column>
|
|
<el-table-column label="充值次数" align="center"></el-table-column>
|
|
<el-table-column prop="name" label="充值本金" align="center"/>
|
|
<el-table-column prop="zip" label="充值赠金" align="center"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="bottom">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:total="1000"
|
|
:page-size="20"
|
|
:current-page="1"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
import {Upload} from "@element-plus/icons-vue";
|
|
|
|
const tableData = [
|
|
{
|
|
date: '2016-05-03',
|
|
name: 'Tom',
|
|
state: 'California',
|
|
city: 'Los Angeles',
|
|
address: 'No. 189, Grove St, Los Angeles',
|
|
zip: 'CA 90036',
|
|
}
|
|
]
|
|
const value2 = ref([])
|
|
const shortcuts = [
|
|
{
|
|
text: '今天',
|
|
value() {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
return [start, end]
|
|
},
|
|
},
|
|
{
|
|
text: '昨天',
|
|
value() {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setDate(start.getDate() - 1)
|
|
return [start, end]
|
|
}
|
|
},
|
|
{
|
|
text: '本周',
|
|
value: () => {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setDate(start.getDate() - 7)
|
|
return [start, end]
|
|
},
|
|
},
|
|
{
|
|
text: '上个月',
|
|
value: () => {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 1)
|
|
return [start, end]
|
|
},
|
|
},
|
|
{
|
|
text: '前三个月',
|
|
value: () => {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 3)
|
|
return [start, end]
|
|
},
|
|
},
|
|
]
|
|
const source = ref('')
|
|
const sourceOptions = [
|
|
{
|
|
value: '1',
|
|
label: '门诊',
|
|
},
|
|
{
|
|
value: '2',
|
|
label: '住院',
|
|
},
|
|
{
|
|
value: '3',
|
|
label: '体检',
|
|
|
|
}
|
|
]
|
|
const handleCurrentChange = (val: any) => {
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.container {
|
|
width:100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.top{
|
|
height: 60px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.content{
|
|
width: 100%;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
.bottom {
|
|
width: 100%;
|
|
height: 60px;
|
|
background-color: #FFF;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
position: relative;
|
|
border-bottom: 1px solid #EEE;
|
|
.page_btn_list {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style> |