452 lines
9.3 KiB
Vue
452 lines
9.3 KiB
Vue
<template>
|
||
<view class="c-layout">
|
||
<StatisticCard :list="list" />
|
||
<!-- {{ list }} -->
|
||
<view class="card-box">
|
||
<view class="c-tab">
|
||
<text
|
||
v-for="(item, index) in tabList"
|
||
:key="index"
|
||
:class="{ active: currentTab === item.id }"
|
||
@click="handleTab(item)"
|
||
>
|
||
{{ item.name }}
|
||
</text>
|
||
</view>
|
||
<view class="c-grid">
|
||
<view v-if="currentTab === 5" class="time"
|
||
>{{ state.startTime.split(" ")[0] }} -
|
||
{{ state.endTime.split(" ")[0] }}</view
|
||
>
|
||
<view class="box">
|
||
<view v-for="(item, index) in gridList1" :key="index">
|
||
<text v-if="item.name">{{ item.name }}：</text
|
||
><text
|
||
>{{ item.isBefore ? item.unit : "" }} {{ formatMoney(item.num) }}
|
||
{{ item.isBefore ? "" : item.unit }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="box">
|
||
<view v-for="(item, index) in gridList2" :key="index">
|
||
<text v-if="item.name">{{ item.name }}：</text
|
||
><text :class="item.isHighLight ? 'highLight' : ''"
|
||
>{{ item.isBefore ? item.unit : "" }} {{ formatMoney(item.num) }}
|
||
{{ item.isBefore ? "" : item.unit }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="box">
|
||
<view v-for="(item, index) in gridList3" :key="index">
|
||
<text>{{ item.name }}：</text
|
||
><text :class="item.isHighLight ? 'highLight' : ''"
|
||
>{{ item.isBefore ? item.unit : "" }} {{ formatMoney(item.num) }}
|
||
{{ item.isBefore ? "" : item.unit }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<TimeRangeFilter
|
||
:show="isShowTimeDialog"
|
||
@handleDialog="handleDialog"
|
||
@handleOk="handleOk"
|
||
/>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import StatisticCard from "@/components/StatisticCard/index.vue";
|
||
import TimeRangeFilter from "./components/TimeRangeFilter.vue";
|
||
import { FinanceApi, ReceiveApi, ShipmentApi } from "@/services";
|
||
import { formatMoney, timeRange } from "@/utils";
|
||
const list = reactive([
|
||
{
|
||
num: 0,
|
||
name: "客户应收款总额",
|
||
},
|
||
{
|
||
num: 0,
|
||
name: "供应商应付款总额",
|
||
},
|
||
]);
|
||
|
||
const currentTab = ref(3);
|
||
const tabList = reactive([
|
||
{
|
||
id: 2,
|
||
name: "昨日",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "本月",
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "本年",
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "自定义",
|
||
},
|
||
]);
|
||
const handleTab = (item: any) => {
|
||
if (item.id === 5) {
|
||
handleDialog(true);
|
||
} else {
|
||
currentTab.value = item.id;
|
||
getOverview();
|
||
}
|
||
};
|
||
const handleOk = (v: any) => {
|
||
state.startTime = v.startTime;
|
||
state.endTime = v.endTime;
|
||
currentTab.value = 5;
|
||
getOverview();
|
||
};
|
||
const randomNum = (index: number) => {
|
||
return Math.floor(Math.random() * (10000 - 1 + 1)) + 1 + index;
|
||
};
|
||
|
||
const gridList1 = reactive([
|
||
{
|
||
name: "总收入",
|
||
enName: "totalIncome",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
},
|
||
{
|
||
name: "出货收入",
|
||
enName: "totalShipment",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
},
|
||
{
|
||
name: "其他收入",
|
||
enName: "totalOther",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
},
|
||
{},
|
||
{
|
||
name: "总支出",
|
||
enName: "totalExpenditure",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
},
|
||
{
|
||
name: "收货支出",
|
||
enName: "totalReap",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
},
|
||
{
|
||
name: "其他支出",
|
||
enName: "totalOther",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
},
|
||
{
|
||
name: "杂费支出",
|
||
enName: "totalIncidentals",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
},
|
||
{
|
||
name: "运费支出",
|
||
enName: "totalFreight",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
},
|
||
]);
|
||
const gridList2 = reactive([
|
||
{
|
||
name: "出货实收金额",
|
||
enName: "actualReceived",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
isHighLight: true,
|
||
},
|
||
{
|
||
name: "出货应收金额",
|
||
enName: "receivable",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
isHighLight: true,
|
||
},
|
||
{
|
||
name: "出货笔数",
|
||
enName: "orderOutNum",
|
||
num: "2",
|
||
isHighLight: true,
|
||
},
|
||
{
|
||
name: "",
|
||
num: "",
|
||
},
|
||
{
|
||
name: "出货总重量",
|
||
enName: "outTotalWeight",
|
||
num: "",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "出货净重（客户）",
|
||
enName: "customerTotalWeight",
|
||
num: "",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "出货重量(已结)",
|
||
enName: "payOutTotalWeight",
|
||
num: "",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "结算总重量",
|
||
enName: "totalSettlement",
|
||
num: "",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "出货重量(未结)",
|
||
enName: "unPayOutTotalWeight",
|
||
num: "",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "结算重量(已结)",
|
||
enName: "payTotalSettlement",
|
||
num: "",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "净重误差",
|
||
enName: "netError",
|
||
num: "",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "结算总量(未结)",
|
||
enName: "unPayTotalSettlement",
|
||
num: "",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
]);
|
||
const gridList3 = reactive([
|
||
{
|
||
name: "收货总重量",
|
||
enName: "payTotalWeight",
|
||
num: "",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
isHighLight: true,
|
||
},
|
||
{
|
||
name: "收货笔数",
|
||
enName: "orderInNum",
|
||
num: "",
|
||
unit: "",
|
||
isBefore: false,
|
||
isHighLight: true,
|
||
},
|
||
{
|
||
name: "收货重量(已付)",
|
||
enName: "paymentTotalPrice",
|
||
num: "",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "收货实付金额",
|
||
enName: "totalWeight",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
},
|
||
{
|
||
name: "收货重量(未付)",
|
||
enName: "unPayTotalWeight",
|
||
num: "",
|
||
unit: "KG",
|
||
isBefore: false,
|
||
},
|
||
{
|
||
name: "收货应付金额",
|
||
enName: "unPaymentTotalPrice",
|
||
num: "",
|
||
unit: "￥",
|
||
isBefore: true,
|
||
},
|
||
]);
|
||
|
||
const isShowTimeDialog = ref(false);
|
||
const handleDialog = (v: boolean) => {
|
||
isShowTimeDialog.value = v;
|
||
};
|
||
const state = reactive({
|
||
startTime: "",
|
||
endTime: "",
|
||
});
|
||
|
||
const getReceiveOverView = () => {
|
||
ReceiveApi.getOverview({
|
||
startTime: state.startTime,
|
||
endTime: state.endTime,
|
||
}).then((res: any) => {
|
||
if (res.code === 200) {
|
||
gridList3.map((item) => {
|
||
item.num = res.data[item.enName as string];
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const getShipmentOverView = () => {
|
||
ShipmentApi.getOverview({
|
||
startTime: state.startTime,
|
||
endTime: state.endTime,
|
||
}).then((res: any) => {
|
||
if (res.code === 200) {
|
||
gridList2.map((item) => {
|
||
item.num = res.data[item.enName as string];
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const getPaymentCount = () => {
|
||
FinanceApi.getPaymentCount({
|
||
startTime: state.startTime,
|
||
endTime: state.endTime,
|
||
}).then((res: any) => {
|
||
if (res.code === 200) {
|
||
gridList1.map((item) => {
|
||
if (Object.keys(res.data).includes(item.enName + "")) {
|
||
item.num = res.data[item.enName as string];
|
||
}
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const getRevenueCount = () => {
|
||
FinanceApi.getRevenueCount({
|
||
startTime: state.startTime,
|
||
endTime: state.endTime,
|
||
}).then((res: any) => {
|
||
if (res.code === 200) {
|
||
gridList1.map((item) => {
|
||
if (Object.keys(res.data).includes(item.enName + "")) {
|
||
item.num = res.data[item.enName as string];
|
||
}
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
const getOverview = () => {
|
||
if (currentTab.value < 5) {
|
||
const range = timeRange(currentTab.value);
|
||
state.startTime = range.startTime + " 00:00:00";
|
||
state.endTime = range.endTime + " 23:59:59";
|
||
} else if (currentTab.value === 5) {
|
||
state.startTime = state.startTime + " 00:00:00";
|
||
state.endTime = state.endTime + " 23:59:59";
|
||
}
|
||
getReceiveOverView();
|
||
getShipmentOverView();
|
||
getPaymentCount();
|
||
getRevenueCount();
|
||
};
|
||
|
||
// 获取客户/供应商应收应付总额
|
||
const getTotal = () => {
|
||
ReceiveApi.getTotal().then((res: any) => {
|
||
if (res.code === 200) {
|
||
const { unPayCustomerTotal, unPaySupplierTotal } = res.data;
|
||
list[0].num = unPayCustomerTotal;
|
||
list[1].num = unPaySupplierTotal;
|
||
}
|
||
});
|
||
};
|
||
onMounted(() => {
|
||
getTotal();
|
||
getOverview();
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.card-box {
|
||
background: #ffffff;
|
||
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
|
||
border-radius: 13rpx;
|
||
margin-top: 25rpx;
|
||
.c-tab {
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
line-height: 41rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
border-bottom: 1rpx solid rgba(233, 233, 233, 0.76);
|
||
text {
|
||
padding: 16rpx;
|
||
}
|
||
.active {
|
||
color: $u-primary;
|
||
border-bottom: 5rpx solid $u-primary;
|
||
border-radius: 5rpx;
|
||
}
|
||
}
|
||
.c-grid {
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
.time {
|
||
margin-top: 30rpx;
|
||
margin-right: 30rpx;
|
||
text-align: right;
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
}
|
||
.box {
|
||
padding: 30rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
flex: 1;
|
||
.highLight {
|
||
color: rgba(236, 15, 62, 1);
|
||
}
|
||
> view {
|
||
line-height: 50rpx;
|
||
}
|
||
}
|
||
.box + .box {
|
||
border-top: 18rpx solid #f8f8f8;
|
||
}
|
||
}
|
||
}
|
||
</style>
|