front-end/ghsApp/src/admin/stat/classProfit.vue

<!--
  分类利润：按花材分类汇总销售收入/采购成本/利润；timeType 切换记账时间(bill) / 发货时间(send)。
-->
<template>
<view class="app-content">
	<view class="ex-page">
		<view class="top-bar">
			<!-- 记账时间 / 发货时间：只切换筛字段，不另开时间选择器 -->
			<view class="time-type-row">
				<view class="time-type-item" :class="{ active: params.timeType === 'bill' }" @click="changeTimeType('bill')">记账时间</view>
				<view class="time-type-item" :class="{ active: params.timeType === 'send' }" @click="changeTimeType('send')">发货时间</view>
			</view>
			 <DateSelect class="bar" top="0" @selectDateFn="selectDateFn" /> 
		</view>
		<scroll-view scroll-y scroll-with-animation class="main-view">
			<view class="space-view ex-table">
				<block>
					<t-table :headerBackgroundColor="'#F0F2F6'">
						<t-tr header>
							<t-th>名称</t-th>
							<t-th>销售收入</t-th>
							<t-th>采购成本</t-th>
							<t-th>花材利润</t-th>
						</t-tr>
						<t-tr v-for="(item, inIndex) in profit.list" :key="inIndex">
							<t-td><view style="color:black;font-size:26upx;">{{item.className}}</view></t-td>
							<t-td><view>{{item.income}}</view></t-td>
							<t-td><view>{{item.expend}}</view></t-td>
							<t-td><view>{{item.profit}}</view></t-td>
						</t-tr>
						<t-tr>
							<t-td><view style="color:black;font-size:24upx;font-weight:bold;color:#3385FF;">物流打包费</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">0</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">{{profit.packFreight?parseFloat(profit.packFreight):0}}</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">-{{profit.packFreight?parseFloat(profit.packFreight):0}}</view></t-td>
						</t-tr>
						<t-tr>
							<t-td><view style="color:black;font-size:24upx;font-weight:bold;color:#3385FF;">采购仅退款</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">{{profit.onlyRefundCg?parseFloat(profit.onlyRefundCg):0}}</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">0</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">{{profit.onlyRefundCg?parseFloat(profit.onlyRefundCg):0}}</view></t-td>
						</t-tr>
						<t-tr>
							<t-td><view style="color:black;font-size:24upx;font-weight:bold;color:#3385FF;">销售仅退款</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">0</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">{{profit.onlyRefund?parseFloat(profit.onlyRefund):0}}</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">-{{profit.onlyRefund?parseFloat(profit.onlyRefund):0}}</view></t-td>
						</t-tr>

						<t-tr>
							<t-td><view style="color:black;font-size:24upx;font-weight:bold;color:#3385FF;">人工费收入</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">{{profit.totalLabourCost?parseFloat(profit.totalLabourCost):0}}</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">0</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">{{profit.totalLabourCost?parseFloat(profit.totalLabourCost):0}}</view></t-td>
						</t-tr>

						<t-tr>
							<t-td><view style="color:black;font-size:24upx;font-weight:bold;color:#3385FF;">优惠金额</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">-{{profit.totalDiscountAmount?parseFloat(profit.totalDiscountAmount):0}}</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">0</view></t-td>
							<t-td><view style="color:black;font-size:24upx;color:#3385FF;">-{{profit.totalDiscountAmount?parseFloat(profit.totalDiscountAmount):0}}</view></t-td>
						</t-tr>

						<t-tr>
							<t-td><view style="color:black;font-size:24upx;font-weight:bold;color:#3385FF;">【汇总金额】</view></t-td>
							<t-td><view style="color:black;font-size:28upx;color:#3385FF;">{{profit.totalIncome}}</view></t-td>
							<t-td><view style="color:black;font-size:28upx;color:#3385FF;">{{profit.totalExpend}}</view></t-td>
							<t-td><view style="color:black;font-size:28upx;color:#3385FF;">{{profit.totalProfit}}</view></t-td>
						</t-tr>

						<view style="margin:10upx 60upx;color:#1c89e0;font-size:24upx;line-height:1.5;">
							采购成本、销售收入已按售后扣减（跨天售后记在通过日，分类成本/收入可为负）。采购仅退款、销售仅退款含跨天通过日金额。与 PC 收支分类同源接口。
						</view>

						<view v-if="!$util.isEmpty(tbSaleIncome)">
							<t-tr>
								<t-td></t-td>
								<t-td></t-td>
								<t-td></t-td>
								<t-td></t-td>
							</t-tr>
							<view style="margin-left:60upx;font-size:26upx;font-weight:bold;margin-bottom:10upx;">销售单项统计</view>
							<view v-for="(it, idx) in tbSaleIncome" :key="idx">
							<t-tr>
								<t-td><view style="width:180upx;color:black;font-size:26upx;">{{it.name?it.name:'未命名'}}</view></t-td>
								<t-td><view style="color:black;font-size:26upx;">数量 {{it.num?it.num:0}}</view></t-td>
								<t-td><view style="color:black;font-size:28upx;">¥{{it.price?parseFloat(it.price):0}}</view></t-td>
								<t-td> <view> </view> </t-td>
							</t-tr>
							</view>
						</view>

						<view v-if="!$util.isEmpty(tbCgIncome)">
							<t-tr>
								<t-td></t-td>
								<t-td></t-td>
								<t-td></t-td>
								<t-td></t-td>
							</t-tr>
							<view style="margin-left:60upx;font-size:26upx;font-weight:bold;margin-bottom:10upx;">采购单项统计</view>
							<view v-for="(it, idx) in tbCgIncome" :key="idx">
							<t-tr>
								<t-td><view style="width:180upx;color:black;font-size:26upx;">{{it.name}}</view></t-td>
								<t-td><view style="color:black;font-size:26upx;">数量 {{it.num}}</view></t-td>
								<t-td><view style="color:black;font-size:28upx;">¥{{it.price?parseFloat(it.price):0}}</view></t-td>
								<t-td> <view> </view> </t-td>
							</t-tr>
							</view>
						</view>
						<t-tr>
							<t-td></t-td>
							<t-td></t-td>
							<t-td></t-td>
							<t-td></t-td>
						</t-tr>

						<view style="margin-left:60upx;">---------------------------</view>

						<view v-if="!$util.isEmpty(tbSaleIncomeStaff)">
							<view style="margin-left:60upx;font-size:26upx;font-weight:bold;margin-bottom:10upx;">销售单项统计（按人）</view>
							<view v-for="(it, idx) in tbSaleIncomeStaff" :key="idx">
								<view v-for="(itSon, idxSon) in it" :key="idxSon">
									<t-tr>
										<t-td><view style="width:180upx;color:black;font-size:26upx;">{{itSon.name?itSon.name:'未命名'}}</view></t-td>
										<t-td><view style="color:black;font-size:26upx;">数量 {{itSon.num?itSon.num:0}}</view></t-td>
										<t-td><view style="color:black;font-size:28upx;">¥{{itSon.price?parseFloat(itSon.price):0}}</view></t-td>
										<t-td> <view style="color:black;font-size:28upx;">{{ itSon.staffName||'' }}</view> </t-td>
									</t-tr>
								</view>	
							</view>
						</view>

						<view v-if="!$util.isEmpty(tbCgIncomeStaff)">
							<t-tr>
								<t-td></t-td>
								<t-td></t-td>
								<t-td></t-td>
								<t-td></t-td>
							</t-tr>
							<view style="margin-left:60upx;font-size:26upx;font-weight:bold;margin-bottom:10upx;">采购单项统计（按人）</view>
							<view v-for="(it, idx) in tbCgIncomeStaff" :key="idx">
								<view v-for="(itSon, idxSon) in it" :key="idxSon">
									<t-tr>
										<t-td><view style="width:180upx;color:black;font-size:26upx;">{{itSon.name}}</view></t-td>
										<t-td><view style="color:black;font-size:26upx;">数量 {{itSon.num}}</view></t-td>
										<t-td><view style="color:black;font-size:28upx;">¥{{itSon.price?parseFloat(itSon.price):0}}</view></t-td>
										<t-td><view style="color:black;font-size:28upx;">{{ itSon.staffName||'' }}</view></t-td>
									</t-tr>
								</view>
							</view>
						</view>


					</t-table>
				</block>
			</view>
		</scroll-view>
	</view>
</view>
</template>
<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import { getClassProfit } from "@/api/stat";
import { list } from "@/mixins";
import ShopSelect from "@/components/module/shopSelect";
import DateSelect from "@/components/module/dateSelect";
import AppSearchModule from "@/components/module/app-search";
import {mapActions, mapGetters} from "vuex";
export default {
	components: { AppWrapperEmpty,ShopSelect,DateSelect,AppSearchModule},
	mixins: [list],
	computed: {		
		...mapGetters(["getDictionariesInfo","getLoginInfo"])
	},
	data() {
		return {
			isShow:false,
			customizationTime:'',
			shopId:'',
			itemId:'',
			nowTime: "",
			showTimeDropdown: false,
			nowShop: "",
			showShopDropdown: false,
			dataList: [],
			params:{
				itemId: '',
				searchTime:'',
				startTime: "",
				endTime: "",
				shopId: "",
				// bill=记账时间（默认） / send=发货时间
				timeType: 'bill',
			},
			profit:[],
			tbSaleIncome:[],
			tbCgIncome:[],
			tbSaleIncomeStaff:[],
			tbCgIncomeStaff:[]
		};
	},
	onPullDownRefresh() {
		this.resetList();
		this.getStatList().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	onLoad(e) {
		this.itemId = e.id;
		this.params.itemId = e.id;
		this.shopId = this.getLoginInfo.shopId;
	},
	methods: {
		...mapActions(['setUserShopAll']),
		//选择分店
		selectShopFn(val){
			this.params.shopId = val.id;
			this.init();
		},
		//选择时间
		selectDateFn(val) {
			this.params = {...this.params,...val}
			this.init();			
		},
		/** 切换记账时间 / 发货时间并刷新 */
		changeTimeType(type) {
			if (this.params.timeType === type) return
			this.params.timeType = type
			this.init()
		},
		async init() {
			this.getStatList();
		},
		getStatList() {
			let that = this
			that.tbSaleIncome = []
			that.tbCgIncome = []
			that.tbSaleIncomeStaff = []
			that.tbCgIncomeStaff = []
			uni.showLoading({mask:true})
			getClassProfit(this.params).then(res => {
				uni.hideLoading()
				that.profit = res.data
				that.tbSaleIncome = res.data.tbSaleIncome?res.data.tbSaleIncome:[]
				that.tbCgIncome = res.data.tbCgIncome ? res.data.tbCgIncome : []
				that.tbSaleIncomeStaff = res.data.tbSaleIncomeStaff?res.data.tbSaleIncomeStaff:[]
				that.tbCgIncomeStaff = res.data.tbCgIncomeStaff ? res.data.tbCgIncomeStaff : []
				that.$forceUpdate()
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.ex-page {
	background: white;
	padding-top:20upx;
	height: 100%;
	display: flex;
	flex-direction: column;
	.top-bar {
		position: absolute;
		left: 0;
		top:18upx;
		display: flex;
		align-items: center;
		width: 100%;
		z-index: 20;
		padding: 0 16upx;
		box-sizing: border-box;
		.time-type-row {
			display: flex;
			align-items: center;
			flex-shrink: 0;
			margin-right: 12upx;
		}
		.time-type-item {
			height: 56upx;
			line-height: 56upx;
			padding: 0 18upx;
			font-size: 26upx;
			color: #666;
			background: #f5f5f5;
			border-radius: 8upx;
			margin-right: 10upx;
			&:last-child {
				margin-right: 0;
			}
			&.active {
				color: #fff;
				background: #08b955;
			}
		}
		.bar{
			flex: 1;
			min-width: 0;
			height: 100%;
			text-align: center;
		}
	}
	.main-view {
		margin-top: 50upx;
		flex: 1;
		background-color: #f9fbfc;
		.space-view {
			background-color: #fff;
		}
		.ex-info {
			padding: 30upx;
			.info-cell {
				display: flex;
				align-items: center;
				font-size: 28upx;
				&:not(:first-child) {
					margin-top: 20upx;
				}
				.cell-label {
					width: 110upx;
					color: #666666;
				}
				.cell-value {
					margin-left: 40upx;
					color: #333;
					&.warning {
						color: #ffaf1d;
					}
					&.success {
						color: #27c325;
					}
				}
			}
		}
		.ex-table {
			::v-deep.icon-info {
				color: #333333;
			}
		}
	}
	.bar-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 100upx;

		box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
		.info-view {
			font-size: 26upx;
		}
		.btn-view {
			display: flex;
			.admin-button-com {
				margin: 0 10upx;
			}
		}
	}
}
</style>