324 lines
7.7 KiB
Vue
324 lines
7.7 KiB
Vue
<template>
|
||
<view class="layout-box">
|
||
<view class="filter">
|
||
<u-input
|
||
v-model="state.startTime"
|
||
disabled
|
||
disabledColor=""
|
||
placeholder="请选择开始时间"
|
||
></u-input>
|
||
<text>-</text>
|
||
<u-input
|
||
v-model="state.endTime"
|
||
disabled
|
||
disabledColor=""
|
||
placeholder="请选择结束时间"
|
||
></u-input>
|
||
<u-icon
|
||
name="arrow-down"
|
||
@click="handleDialog('showTime', 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 highlight">{{
|
||
formatMoney(state.summary.totalAmount, 2)
|
||
}}</view>
|
||
<view>出货总净重/kg</view>
|
||
</view>
|
||
</up-col>
|
||
<up-col span="4">
|
||
<view class="inner-box">
|
||
<view class="num">{{
|
||
formatMoney(state.summary.totalPayShipment, 2)
|
||
}}</view>
|
||
<view>已收/kg</view>
|
||
</view>
|
||
</up-col>
|
||
<up-col span="4">
|
||
<view class="inner-box">
|
||
<view class="num">{{
|
||
formatMoney(state.summary.totalUnPayShipment, 2)
|
||
}}</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 highlight">{{
|
||
formatMoney(state.summary.totalCollection, 2)
|
||
}}</view>
|
||
<view>出货总收款/元</view>
|
||
</view>
|
||
</up-col>
|
||
<up-col span="4">
|
||
<view class="inner-box">
|
||
<view class="num">{{
|
||
formatMoney(state.summary.totalPayCollection, 2)
|
||
}}</view>
|
||
<view>已收/元</view>
|
||
</view>
|
||
</up-col>
|
||
<up-col span="4">
|
||
<view class="inner-box">
|
||
<view class="num">{{
|
||
formatMoney(state.summary.totalUnPayCollection, 2)
|
||
}}</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">{{
|
||
formatMoney(state.summary.totalReceipt)
|
||
}}</view>
|
||
<view>出货单</view>
|
||
</view>
|
||
</up-col>
|
||
<up-col span="6">
|
||
<view class="inner-box">
|
||
<view class="num">{{
|
||
formatMoney(state.summary.averagePrice, 2)
|
||
}}</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.userName }}</uni-td>
|
||
<uni-td>{{ item.totalAmount }}</uni-td>
|
||
<uni-td>{{ item.totalPayment }}</uni-td>
|
||
<uni-td>{{ item.actualPayment }}</uni-td>
|
||
<uni-td>{{ item.totalOrderNumber }}</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 时间弹框 -->
|
||
<TimeDialog
|
||
ref="timeDialog"
|
||
:show="showDialog.showTime"
|
||
@handleDialog="(v:boolean) => {handleDialog('showTime', v)}"
|
||
@changeTime="changeTime"
|
||
/>
|
||
|
||
<!-- 筛选弹框 -->
|
||
<FilterDialog
|
||
:show="showDialog.showFilter"
|
||
@handleDialog="(v:boolean) => {handleDialog('showFilter', v)}"
|
||
@changeOther="changeOther"
|
||
:isShipment="true"
|
||
/>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import TimeDialog from "@/components/Dialog/TimeDialog.vue";
|
||
import FilterDialog from "./components/FilterDialog.vue";
|
||
import { ShipmentApi } from "@/services";
|
||
import {
|
||
formatDate,
|
||
formatMoney,
|
||
getCurrentMonthStartAndEnd,
|
||
getScaleStatus,
|
||
} from "@/utils";
|
||
const tableTitleList = reactive([
|
||
{
|
||
name: "客户",
|
||
},
|
||
{
|
||
name: "出货总净重/kg",
|
||
},
|
||
{
|
||
name: "实际收款",
|
||
},
|
||
{
|
||
name: "实收款",
|
||
},
|
||
{
|
||
name: "数量",
|
||
},
|
||
]);
|
||
const showDialog = <
|
||
{
|
||
[key: string]: boolean;
|
||
}
|
||
>reactive({
|
||
showTime: false,
|
||
showFilter: false,
|
||
});
|
||
|
||
const state = reactive<{
|
||
summary: ShipmentSummaryCount;
|
||
startTime: string;
|
||
endTime: string;
|
||
scaleStatus: number;
|
||
userId: number;
|
||
productId: number;
|
||
}>({
|
||
summary: {
|
||
totalAmount: 0, // 收货汇总：审核过收货总量
|
||
totalPayShipment: 0, // 已支付的出货总
|
||
totalUnPayShipment: 0, // 未支付的出货总量
|
||
totalCollection: 0, // 总收款
|
||
totalPayCollection: 0, // 已经收到的收款
|
||
totalUnPayCollection: 0, // 未收到的收款
|
||
totalReceipt: 0, // 收货单数量已审核的
|
||
averagePrice: 0, // 平均单价
|
||
rankings: [],
|
||
},
|
||
startTime: formatDate(
|
||
getCurrentMonthStartAndEnd().start,
|
||
"{y}-{m}-{d} {h}:{i}:{s}"
|
||
),
|
||
endTime: formatDate(
|
||
getCurrentMonthStartAndEnd().end,
|
||
"{y}-{m}-{d} {h}:{i}:{s}"
|
||
),
|
||
scaleStatus: -1,
|
||
userId: -1,
|
||
productId: -1,
|
||
});
|
||
|
||
const changeTime = (obj: any) => {
|
||
state.startTime = obj.startTime;
|
||
state.endTime = obj.endTime;
|
||
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,
|
||
endTime: state.endTime,
|
||
};
|
||
if (state.scaleStatus > -1) {
|
||
params.scaleStatus = state.scaleStatus;
|
||
}
|
||
if (state.userId > -1) {
|
||
params.userId = state.userId;
|
||
}
|
||
if (state.productId > -1) {
|
||
params.productId = state.productId;
|
||
}
|
||
ShipmentApi.getOrderInReceipt(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: 28rpx 20rpx;
|
||
// 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;
|
||
}
|
||
.highlight {
|
||
color: rgba(236, 15, 62, 1);
|
||
}
|
||
}
|
||
::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>
|