antissoft / lvqianmeiye_ERP

<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<!-- 查询条件 -->
			<el-row class="NCC-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="统计年份">
							<el-date-picker v-model="query.Year" type="year" placeholder="选择年份"
								value-format="yyyy" format="yyyy" :style='{"width":"100%"}' />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="统计月份">
							<el-select v-model="query.Month" placeholder="请选择月份" :style='{"width":"100%"}'>
								<el-option v-for="m in 12" :key="m" :label="`${m}月`" :value="m" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="门店">
							<el-select v-model="query.StoreId" placeholder="请选择门店（不选则统计所有门店）" clearable filterable
								:style='{"width":"100%"}'>
								<el-option v-for="store in storeOptions" :key="store.id" :label="store.dm"
									:value="store.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<!-- 统计结果 -->
			<div class="NCC-common-layout-main NCC-flex-main">
				<div class="NCC-common-head">
					<div>
						<span class="statistics-title">
							{{ query.Year }}年{{ query.Month }}月门店领取统计
						</span>
					</div>
					<div class="NCC-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false"
								@click="initData()" />
						</el-tooltip>
						<screenfull isContainer />
					</div>
				</div>
				<!-- 统计卡片 -->
				<el-row :gutter="16" style="margin-bottom: 20px;">
					<el-col :span="8">
						<el-card class="statistics-card" shadow="never">
							<div class="card-content">
								<div class="card-icon">
									<i class="el-icon-s-shop"></i>
								</div>
								<div class="card-info">
									<div class="card-label">门店数量</div>
									<div class="card-value">{{ statistics.Total || 0 }}</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card class="statistics-card" shadow="never">
							<div class="card-content">
								<div class="card-icon">
									<i class="el-icon-document"></i>
								</div>
								<div class="card-info">
									<div class="card-label">申请总数</div>
									<div class="card-value">{{ totalApplicationCount }}</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card class="statistics-card" shadow="never">
							<div class="card-content">
								<div class="card-icon">
									<i class="el-icon-coin"></i>
								</div>
								<div class="card-info">
									<div class="card-label">领取总金额</div>
									<div class="card-value">¥{{ formatMoney(totalAmount) }}</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<!-- 统计列表 -->
				<NCC-table v-loading="loading" :data="list"
					:header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
					<el-table-column label="序号" align="center" type="index" width="60" />
					<el-table-column label="门店名称" align="center" prop="StoreName" >
						<template slot-scope="scope">
							<div class="store-info">
								<i class="el-icon-s-shop store-icon"></i>
								<span>{{ scope.row.StoreName || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="申请数量" align="center" prop="ApplicationCount" >
						<template slot-scope="scope">
							<span>{{ scope.row.ApplicationCount || 0 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="领取总金额" align="center" prop="TotalAmount" >
						<template slot-scope="scope">
							<span class="amount-text">¥{{ formatMoney(scope.row.TotalAmount) }}</span>
						</template>
					</el-table-column>
				</NCC-table>
			</div>
		</div>
	</div>
</template>

<script>
import request from '@/utils/request'
import { getStoreReceiveStatistics } from '@/api/extend/lqInventory'

export default {
		data() {
		const currentDate = new Date()
		return {
			loading: false,
			list: [],
			statistics: {
				Total: 0
			},
			query: {
				Year: String(currentDate.getFullYear()),
				Month: currentDate.getMonth() + 1,
				StoreId: undefined
			},
			storeOptions: []
		}
	},
	computed: {
		totalApplicationCount() {
			return this.list.reduce((sum, item) => sum + (item.ApplicationCount || 0), 0)
		},
		totalAmount() {
			return this.list.reduce((sum, item) => sum + (item.TotalAmount || 0), 0)
		}
	},
	created() {
		this.initStoreOptions()
		this.initData()
	},
	methods: {
		initData() {
			if (!this.query.Year || !this.query.Month) {
				this.$message({
					type: 'warning',
					message: '请选择统计年份和月份'
				})
				return
			}
			this.loading = true
			let query = {
				Year: Number(this.query.Year),
				Month: this.query.Month
			}
			// 移除空值
			if (this.query.StoreId) {
				query.StoreId = this.query.StoreId
			}
			getStoreReceiveStatistics(query).then(res => {
				this.loading = false
				if (res.code == 200 && res.data && res.data.success) {
					this.list = res.data.data || []
					this.statistics = {
						Total: res.data.Total || 0
					}
				} else {
					this.list = []
					this.statistics = { Total: 0 }
					if (res.data && res.data.message) {
						this.$message({
							type: 'info',
							message: res.data.message
						})
					}
				}
			}).catch(() => {
				this.loading = false
				this.list = []
				this.statistics = { Total: 0 }
			})
		},
		initStoreOptions() {
			request({
				url: '/api/Extend/LqMdxx',
				method: 'GET',
				data: {
					currentPage: 1,
					pageSize: 1000
				}
			}).then(res => {
				if (res.data && res.data.list) {
					this.storeOptions = res.data.list
				}
			}).catch(() => {
				this.storeOptions = []
			})
		},
		search() {
			this.initData()
		},
		reset() {
			const currentDate = new Date()
			this.query = {
				Year: String(currentDate.getFullYear()),
				Month: currentDate.getMonth() + 1,
				StoreId: undefined
			}
			this.initData()
		},
		formatMoney(amount) {
			if (!amount && amount !== 0) return '0.00'
			return Number(amount).toFixed(2)
		}
	}
}
</script>

<style lang="scss" scoped>
.statistics-title {
	font-size: 18px;
	font-weight: 600;
	color: #303133;
}

.statistics-card {
	height: 100px;
	border-radius: 12px;

	.card-content {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 12px;

		.card-icon {
			font-size: 40px;
			color: #409EFF;
			margin-right: 20px;
		}

		.card-info {
			flex: 1;

			.card-label {
				font-size: 14px;
				color: #909399;
				margin-bottom: 8px;
			}

			.card-value {
				font-size: 24px;
				font-weight: 600;
				color: #303133;
			}
		}
	}
}

.store-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.store-icon {
	color: #409EFF;
	font-size: 16px;
}

.amount-text {
	color: #67C23A;
	font-weight: 600;
}

::v-deep .el-table__row:hover {
	background-color: #f5f7fa;
}

::v-deep .el-table__header-wrapper {
	.el-table__header {
		th {
			background-color: #f5f7fa;
			color: #606266;
			font-weight: 600;
		}
	}
}
</style>