web/src/components/statistics/over/ChargeDetail.vue

133 lines
3.8 KiB
Vue

<template>
<div class="container">
<div class="content">
<div class="title">
<el-date-picker
v-model="date"
type="daterange"
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-select
v-model="salesPerson"
placeholder="销售人"
style="width: 100px;margin: 0 10px"
>
<el-option
v-for="item in salesPersonOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select v-model="type" placeholder="类型" style="width: 100px">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select v-model="source" placeholder="开单来源" style="width: 100px;margin-left: 10px">
<el-option
v-for="item in sourceOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select
v-model="chargeMan"
placeholder="收费员"
style="width: 100px;margin-left: 10px"
>
<el-option
v-for="item in chargeManOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select
v-model="pay"
placeholder="支付方式"
style="width: 100px;margin-left: 10px"
>
<el-option
v-for="item in payOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<div class="content-box">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="chargeTime" label="收费时间" align="center" show-overflow-tooltip/>
<el-table-column label="销售单号" prop="projectCode" show-overflow-tooltip></el-table-column>
<el-table-column label="患者姓名" prop="customer"></el-table-column>
<el-table-column prop="source" label="开单来源" />
<el-table-column prop="type" label="收费/退费" align="center"></el-table-column>
<el-table-column prop="originalPrice" label="原价" align="center"></el-table-column>
<el-table-column prop="discount" label="优惠" align="center"></el-table-column>
<el-table-column prop="receivable" label="应收" align="center"></el-table-column>
<el-table-column prop="netReceipts" label="实收" align="center"></el-table-column>
<el-table-column prop="payType" label="支付类型" align="center"></el-table-column>
<el-table-column label="销售人" prop="salePersonId"></el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {post} from "@/utils/request.ts";
const tableData = ref<any[]>([])
const date = ref<any>([])
const salesPerson = ref<any>('')
const salesPersonOptions = [{}
]
const type = ref<any>('')
const typeOptions = [{
value: '1',
label: '全部'
}
]
const source = ref<any>('')
const sourceOptions = [{
value: '1',
label: '全部'
}
]
const chargeMan = ref<any>('')
const chargeManOptions = [{
value: '1',
label: '全部'
}
]
const pay = ref<any>('')
const payOptions = [{
value: '1',
label: '全部'
}
]
const getDate = () => {
post("charge/getChargeRecord").then((res:any)=>{
tableData.value = res.list
})
}
onMounted(()=>{
getDate();
})
</script>
<style scoped lang="scss">
.title{
margin-bottom: 20px;
}
</style>