<template>
<view class="layout-box">
<view class="filter">
<u-input
v-model="state.startTime"
disabled
disabledColor="#ffffff"
placeholder="请选择开始时间"
></u-input>
<text>-</text>
<u-input
v-model="state.endTime"
disabled
disabledColor="#ffffff"
placeholder="请选择结束时间"
></u-input>
<u-icon
name="arrow-down"
@click="handleDialog('showTime', true)"
></u-icon>
<text class="status">单据状态</text>
<u-icon
name="arrow-down"
@click="handleDialog('showStatus', true)"
></u-icon>
<text class="btn" @click="handleDialog('showFilter', true)">筛选</text>
</view>
<view class="box">
<up-row>
<up-col span="4">
<view class="inner-box" style="border: none">
<view class="num">{{ state.summary.totalAmount }}</view>
<view>收货总量/kg</view>
</view>
</up-col>
<up-col span="4">
<view class="inner-box">
<view class="num">{{ state.summary.totalPaid }}</view>
<view>已付/kg</view>
</view>
</up-col>
<up-col span="4">
<view class="inner-box">
<view class="num">{{ state.summary.totalUnpaid }}</view>
<view>未付/kg</view>
</view>
</up-col>
</up-row>
</view>
<view class="box">
<up-row>
<up-col span="4">
<view class="inner-box" style="border: none">
<view class="num">{{ state.summary.totalPayment }}</view>
<view>结算金额/元</view>
</view>
</up-col>
<up-col span="4">
<view class="inner-box">
<view class="num">{{ state.summary.totalPaidPrice }}</view>
<view>实收金额</view>
</view>
</up-col>
<up-col span="4">
<view class="inner-box">
<view class="num">{{ state.summary.totalUnpaidPrice }}</view>
<view>应付金额</view>
</view>
</up-col>
</up-row>
</view>
<view class="box">
<up-row>
<up-col span="6">
<view class="inner-box" style="border: none">
<view class="num">{{ state.summary.totalReceipt }}</view>
<view>收货单</view>
</view>
</up-col>
<up-col span="6">
<view class="inner-box">
<view class="num">{{ state.summary.averagePrice }}</view>
<view>均价（元/kg）</view>
</view>
</up-col>
</up-row>
</view>
<view class="box">
<uni-table stripe emptyText="暂无更多数据">
<!-- 表头行 -->
<uni-tr>
<uni-th v-for="(item, index) in tableTitleList" :key="index">{{
item.name
}}</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr v-for="(item, index) in state.summary.rankings" :key="index">
<uni-td>{{ item.productName }}</uni-td>
<uni-td>{{ item.totalAmount }}</uni-td>
<uni-td>{{ item.totalPayment }}</uni-td>
<uni-td>{{ item.totalOrderNumber }}</uni-td>
<uni-td>{{ item.averagePrice }}</uni-td>
</uni-tr>
</uni-table>
</view>
</view>
<!-- 时间弹框 -->
<TimeDialog
ref="timeDialog"
:show="showDialog.showTime"
@handleDialog="(v:boolean) => {handleDialog('showTime', v)}"
@changeTime="changeTime"
/>
<!-- 单据弹框 -->
<StatusDialog
:show="showDialog.showStatus"
:isShipment="false"
@handleDialog="(v:boolean) => {handleDialog('showStatus', v)}"
@changeStatus="changeStatus"
/>
<!-- 筛选弹框 -->
<FilterDialog
:show="showDialog.showFilter"
@handleDialog="(v:boolean) => {handleDialog('showFilter', v)}"
@changeOther="changeOther"
/>
</template>
<script setup lang="ts">
import TimeDialog from "./components/TimeDialog.vue";
import StatusDialog from "./components/StatusDialog.vue";
import FilterDialog from "./components/FilterDialog.vue";
import { ReceiveApi } from "@/services";
import { formatDate, getCurrentMonthStartAndEnd } from "@/utils";
const tableTitleList = reactive([
{
name: "收货产品",
},
{
name: "收货总量/kg",
},
{
name: "总金额",
},
{
name: "收货单数",
},
{
name: "均价（元/kg）",
},
]);
const showDialog = <
{
[key: string]: boolean;
}
>reactive({
showTime: false,
showStatus: false,
showFilter: false,
});
const state = reactive<{
summary: ReceiveSummaryCount;
startTime: string;
endTime: string;
scaleStatus: number;
userId: number;
productId: number;
}>({
summary: {
totalAmount: 0, // 审核过的收货订单
totalPaid: 0, // 已支付的收货总量
totalUnpaid: 0, // 未支付的收货总量
totalPayment: 0, // 总支付金额
totalPaidPrice: 0, // 已经支付的金额
totalUnpaidPrice: 0, // 未支付的金额
totalReceipt: 0, // 收货单数量已审核的
averagePrice: 0, // 平均单价
rankings: [],
},
startTime: formatDate(getCurrentMonthStartAndEnd().start, "{y}-{m}-{d}"),
endTime: formatDate(getCurrentMonthStartAndEnd().end, "{y}-{m}-{d}"),
scaleStatus: -1,
userId: -1,
productId:-1
});
const changeTime = (obj: any) => {
state.startTime = obj.startTime;
state.endTime = obj.endTime;
getList();
};
const changeStatus = (obj: any) => {
state.scaleStatus = obj.id;
getList();
};
const changeOther = (obj: any) => {
state.userId = obj.userId;
state.productId = obj.productId
getList();
};
const handleDialog = (key: string, v: boolean) => {
showDialog[key] = v;
};
const getList = () => {
let params: any = {
startTime: state.startTime + " 00:00:00",
endTime: state.endTime + " 23:59:59",
};
if (state.scaleStatus > -1) {
params.scaleStatus = state.scaleStatus
}
if (state.userId > -1) {
params.userId = state.userId
}
if (state.productId > -1) {
params.productId = state.productId
}
ReceiveApi.OrderInReceipt(params).then((res) => {
if (res.code === 200) {
state.summary = res.data;
}
});
};
onMounted(() => {
getList();
});
</script>
<style lang="scss" scoped>
.layout-box {
margin: 35.9rpx 25.64rpx;
.filter {
display: flex;
align-items: center;
justify-items: center;
font-family: Source Han Sans CN;
font-size: 28rpx;
color: #000000;
::v-deep .u-input {
padding: 0rpx 16.03rpx !important;
input {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 24rpx !important;
color: #000000;
}
}
text {
margin: 0px 5rpx;
}
.status {
margin-left: 40rpx;
}
.btn {
color: $u-primary;
margin-left: 40rpx;
margin-right: 0rpx;
}
}
.box {
padding: 19.23rpx;
// display: flex;
// justify-content: space-between;
align-items: center;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 26rpx;
color: #000000;
text-align: center;
background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx;
margin-top: 30rpx;
}
.inner-box {
text-align: center;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 26rpx;
color: #000000;
border-left: 1px solid #e9e9e9;
.num {
font-weight: bold;
font-size: 27rpx;
}
}
::v-deep .uni-table {
min-width: 500px !important;
.uni-table-th {
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 24rpx;
color: #000000;
padding: 5px 5px;
}
.uni-table-td {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #000000;
}
}
}
</style>