antissoft / lvqianmeiye_ERP

<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<!-- 查询条件：搜索框排班 -->
			<div class="search-section">
				<el-form @submit.native.prevent label-position="right" label-width="90px" class="search-form">
					<el-row :gutter="16" align="middle">
						<el-col :xs="24" :sm="12" :md="6" :lg="5">
							<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 :xs="24" :sm="12" :md="6" :lg="5">
							<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 :xs="24" :sm="12" :md="6" :lg="5">
							<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 :xs="24" :sm="12" :md="6" :lg="5">
							<el-form-item label="仓库">
								<el-select v-model="query.Warehouse" placeholder="请选择仓库（不选则统计所有仓库）" clearable filterable
									style="width: 100%">
									<el-option v-for="warehouse in warehouseOptions" :key="warehouse" :label="warehouse"
										:value="warehouse" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="4" class="search-actions">
							<el-form-item label-width="0">
								<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-row>
				</el-form>
			</div>
			<!-- 统计结果 -->
			<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 head-actions">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-button type="default" size="mini" icon="el-icon-refresh" class="btn-refresh"
								@click="initData()">
								刷新
							</el-button>
						</el-tooltip>
						<el-button type="primary" size="mini" icon="el-icon-download" class="btn-export"
							@click="exportData">
							导出
						</el-button>
						<screenfull isContainer />
					</div>
				</div>
				<!-- 统计卡片 -->
				<el-row :gutter="16" class="statistics-cards">
					<el-col :span="8">
						<el-card class="statistics-card statistics-card-store" 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">{{ storeCount }}</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card class="statistics-card statistics-card-count" 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 statistics-card-amount" 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" min-width="120" show-overflow-tooltip>
						<template slot-scope="scope">
							<div class="cell-with-icon 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="BatchId" min-width="140" show-overflow-tooltip>
						<template slot-scope="scope">
							<span>{{ scope.row.BatchId || '无' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="产品名称" align="center" prop="ProductName" min-width="140"
						show-overflow-tooltip>
						<template slot-scope="scope">
							<span>{{ scope.row.ProductName || '无' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="仓库" align="center" prop="Warehouse" width="120" show-overflow-tooltip>
						<template slot-scope="scope">
							<div class="cell-with-icon warehouse-info">
								<i class="el-icon-office-building warehouse-icon"></i>
								<span>{{ scope.row.Warehouse || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="数量" align="center" prop="Quantity" width="90" show-overflow-tooltip>
						<template slot-scope="scope">
							<span>{{ scope.row.Quantity != null ? scope.row.Quantity : 0 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="单价" align="center" prop="UnitPrice" width="100" show-overflow-tooltip>
						<template slot-scope="scope">
							<span>¥{{ formatMoney(scope.row.UnitPrice) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="金额" align="center" prop="Amount" width="110" show-overflow-tooltip>
						<template slot-scope="scope">
							<span class="amount-text">¥{{ formatMoney(scope.row.Amount) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="领取时间" align="center" prop="ReceiveTime" width="170" show-overflow-tooltip>
						<template slot-scope="scope">
							<span>{{ formatDateTime(scope.row.ReceiveTime) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="left" width="200" fixed="right">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="handleEditReceiveTime(scope.row)">
								修改领取时间
							</el-button>
							<el-button type="text" size="mini" @click="handleCancelReceive(scope.row)">
								作废领取
							</el-button>
						</template>
					</el-table-column>
				</NCC-table>
			</div>
		</div>

		<!-- 修改领取时间弹窗（单条） -->
		<el-dialog title="修改领取时间" :visible.sync="receiveTimeDialogVisible" width="480px" append-to-body
			@close="resetReceiveTimeForm">
			<el-form ref="receiveTimeForm" :model="receiveTimeForm" :rules="receiveTimeRules" label-width="100px">
				<el-form-item label="门店名称">
					<span>{{ receiveTimeForm.storeName || '无' }}</span>
				</el-form-item>
				<el-form-item label="批次号">
					<span>{{ receiveTimeForm.batchId || '无' }}</span>
					<span style="color: red; font-size: 12px; display: inline-block;">修改后该批次号对应的所有领取时间都会被修改</span>
				</el-form-item>
				<el-form-item label="领取时间" prop="receiveTime">
					<el-date-picker v-model="receiveTimeForm.receiveTime" type="datetime"
						value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择领取时间" style="width: 100%" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="receiveTimeDialogVisible = false">取 消</el-button>
				<el-button type="primary" :loading="receiveTimeSubmitting" @click="submitReceiveTime">
					确 定
				</el-button>
			</span>
		</el-dialog>

	</div>
</template>

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

export default {
	data() {
		const currentDate = new Date()
		return {
			loading: false,
			list: [],
			query: {
				Year: String(currentDate.getFullYear()),
				Month: currentDate.getMonth() + 1,
				StoreId: undefined,
				Warehouse: undefined
			},
			storeOptions: [],
			warehouseOptions: [],
			// 修改领取时间弹窗
			receiveTimeDialogVisible: false,
			receiveTimeSubmitting: false,
			receiveTimeForm: {
				id: '',
				storeName: '',
				batchId: '',
				receiveTime: ''
			},
			receiveTimeRules: {
				receiveTime: [{ required: true, message: '请选择领取时间', trigger: 'change' }]
			}
		}
	},
	computed: {
		totalApplicationCount() {
			return this.list.reduce((sum, item) => sum + (item.Quantity || 0), 0)
		},
		totalAmount() {
			return this.list.reduce((sum, item) => sum + (item.Amount || 0), 0)
		},
		storeCount() {
			// 计算去重后的门店数量
			const storeNames = this.list
				.map(item => item.StoreName)
				.filter(name => name && name.trim() !== '')
			return new Set(storeNames).size
		}
	},
	created() {
		this.initStoreOptions()
		this.initWarehouseOptions()
		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
			}
			if (this.query.Warehouse) {
				query.Warehouse = this.query.Warehouse
			}
			getStoreReceiveStatistics(query).then(res => {
				this.loading = false
				if (res.code == 200 && res.data && res.data.success) {
					this.list = res.data.data || []
				} else {
					this.list = []
					if (res.data && res.data.message) {
						this.$message({
							type: 'info',
							message: res.data.message
						})
					}
				}
			}).catch(() => {
				this.loading = false
				this.list = []
			})
		},
		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 = []
			})
		},
		initWarehouseOptions() {
			request({
				url: '/api/Extend/LqProduct/GetList',
				method: 'GET',
				data: {
					currentPage: 1,
					pageSize: 10000
				}
			}).then(res => {
				if (res.code == 200 && res.data && res.data.list) {
					// 从产品列表中提取去重的仓库名称
					const warehouses = res.data.list
						.map(item => item.warehouse)
						.filter(warehouse => warehouse && warehouse.trim() !== '')
					this.warehouseOptions = [...new Set(warehouses)].sort()
				}
			}).catch(() => {
				this.warehouseOptions = []
			})
		},
		exportData() {
			if (!this.list || !this.list.length) {
				this.$message({
					type: 'warning',
					message: '暂无数据可导出'
				})
				return
			}
			const headers = ['序号', '门店名称', '批次号', '产品名称', '仓库', '数量', '单价(元)', '金额(元)', '领取时间']
			const rows = this.list.map((item, index) => [
				index + 1,
				item.StoreName || '',
				item.BatchId || '',
				item.ProductName || '',
				item.Warehouse || '',
				item.Quantity || 0,
				this.formatMoney(item.UnitPrice),
				this.formatMoney(item.Amount),
				this.formatDateTime(item.ReceiveTime)
			])
			const csvContent = [headers, ...rows]
				.map(row => row.map(value => `"${String(value).replace(/"/g, '""')}"`).join(','))
				.join('\r\n')
			const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' })
			const fileName = `${this.query.Year || ''}年${this.query.Month || ''}月门店领取统计.csv`
			if (window.navigator && window.navigator.msSaveOrOpenBlob) {
				window.navigator.msSaveOrOpenBlob(blob, fileName)
			} else {
				const link = document.createElement('a')
				link.href = URL.createObjectURL(blob)
				link.download = fileName
				link.click()
				URL.revokeObjectURL(link.href)
			}
		},
		handleEditReceiveTime(row) {
			const id = row && (row.id || row.Id)
			if (!id) {
				this.$message({ type: 'warning', message: '当前记录缺少标识，无法修改领取时间。' })
				return
			}
			const receiveTime = row.ReceiveTime
			let receiveTimeStr = ''
			if (receiveTime != null && receiveTime !== '') {
				if (typeof receiveTime === 'string' && /^\d{4}-\d{2}-\d{2}/.test(receiveTime)) {
					receiveTimeStr = receiveTime.replace('T', ' ').substring(0, 19)
				} else {
					const date = new Date(receiveTime > 1000000000000 ? receiveTime : receiveTime * 1000)
					if (!isNaN(date.getTime())) {
						const y = date.getFullYear()
						const m = String(date.getMonth() + 1).padStart(2, '0')
						const d = String(date.getDate()).padStart(2, '0')
						const h = String(date.getHours()).padStart(2, '0')
						const min = String(date.getMinutes()).padStart(2, '0')
						const s = String(date.getSeconds()).padStart(2, '0')
						receiveTimeStr = `${y}-${m}-${d} ${h}:${min}:${s}`
					}
				}
			}
			this.receiveTimeForm = {
				id,
				storeName: row.StoreName || '无',
				batchId: row.BatchId || '无',
				receiveTime: receiveTimeStr || ''
			}
			this.receiveTimeDialogVisible = true
			this.$nextTick(() => {
				this.$refs.receiveTimeForm && this.$refs.receiveTimeForm.clearValidate()
			})
		},
		resetReceiveTimeForm() {
			this.receiveTimeForm = {
				id: '',
				storeName: '',
				batchId: '',
				receiveTime: ''
			}
			this.$refs.receiveTimeForm && this.$refs.receiveTimeForm.resetFields()
		},
		submitReceiveTime() {
			this.$refs.receiveTimeForm.validate((valid) => {
				if (!valid) return
				this.receiveTimeSubmitting = true
				// 接口需要 ISO 或 yyyy-MM-dd HH:mm:ss，后端 C# 可解析
				const receiveTime = this.receiveTimeForm.receiveTime
				updateStoreReceiveTime({
					Id: this.receiveTimeForm.id,
					ReceiveTime: receiveTime
				})
					.then((res) => {
						this.receiveTimeSubmitting = false
						if (res.code === 200 && res.data && res.data.success) {
							this.$message({ type: 'success', message: res.data.message || '领取时间修改成功' })
							this.receiveTimeDialogVisible = false
							this.initData()
						} else {
							this.$message({
								type: 'error',
								message: (res.data && res.data.message) || res.msg || '修改失败'
							})
						}
					})
					.catch(() => {
						this.receiveTimeSubmitting = false
						this.$message({ type: 'error', message: '修改失败' })
					})
			})
		},
		handleCancelReceive(row) {
			const id = row && (row.id || row.Id)
			if (!id) {
				this.$message({
					type: 'warning',
					message: '当前记录缺少标识（id），无法作废，请联系管理员检查数据。'
				})
				return
			}
			this.$confirm('确定要作废该领取记录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					return this.$confirm('作废后将无法恢复，是否继续？', '二次确认', {
						confirmButtonText: '确定作废',
						cancelButtonText: '取消',
						type: 'error'
					})
				})
				.then(() => {
					this.loading = true
					const remarks = '门店领取统计页面作废领取记录'
					return cancelInventoryUsage(id, remarks)
						.then(res => {
							this.loading = false
							if (res.code === 200) {
								this.$message({
									type: 'success',
									message: '作废成功'
								})
								this.initData()
							} else {
								this.$message({
									type: 'error',
									message: (res.data && res.data.message) || '作废失败'
								})
							}
						})
						.catch(() => {
							this.loading = false
						})
				})
				.catch(() => { })
		},
		search() {
			this.initData()
		},
		reset() {
			const currentDate = new Date()
			this.query = {
				Year: String(currentDate.getFullYear()),
				Month: currentDate.getMonth() + 1,
				StoreId: undefined,
				Warehouse: undefined
			}
			this.initData()
		},
		formatMoney(amount) {
			if (!amount && amount !== 0) return '0.00'
			return Number(amount).toFixed(2)
		},
		formatDateTime(timestamp) {
			if (!timestamp) return '无'
			// 处理时间戳（可能是毫秒或秒）
			const date = new Date(timestamp > 1000000000000 ? timestamp : timestamp * 1000)
			if (isNaN(date.getTime())) return '无'
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hours = String(date.getHours()).padStart(2, '0')
			const minutes = String(date.getMinutes()).padStart(2, '0')
			const seconds = String(date.getSeconds()).padStart(2, '0')
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
		}
	}
}
</script>

<style lang="scss" scoped>
/* ========== 搜索区域排班（Soft UI：清晰分区、柔和阴影） ========== */
.search-section {
	background: #fff;
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 16px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	border: 1px solid #ebeef5;
}

.search-form {
	::v-deep .el-form-item {
		margin-bottom: 0;
	}

	::v-deep .el-form-item__label {
		color: #606266;
	}
}

.search-actions {
	display: flex;
	align-items: center;

	::v-deep .el-form-item {
		margin-bottom: 0;
	}

	::v-deep .el-form-item__content {
		justify-content: flex-start;
	}

	.el-button+.el-button {
		margin-left: 10px;
	}
}

@media (max-width: 992px) {
	.search-actions {
		::v-deep .el-form-item__content {
			justify-content: flex-start;
		}
	}
}

/* ========== 头部操作区：刷新按钮与导出统一样式 ========== */
.head-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.btn-refresh {
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;

	&:hover {
		color: #409EFF;
		border-color: #b3d8ff;
		background-color: #ecf5ff;
	}
}

.btn-export {
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;

	&:hover {
		opacity: 0.9;
	}
}

/* ========== 标题与统计卡片 ========== */
.statistics-title {
	font-size: 18px;
	font-weight: 600;
	color: #303133;
}

.statistics-cards {
	margin-bottom: 20px;
}

.statistics-card {
	height: 100px;
	border-radius: 12px;
	cursor: default;
	transition: box-shadow 0.25s ease, transform 0.25s ease;

	&:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

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

		.card-icon {
			font-size: 40px;
			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;
			}
		}
	}
}

.statistics-card-store .card-icon {
	color: #409EFF;
}

.statistics-card-count .card-icon {
	color: #67C23A;
}

.statistics-card-amount .card-icon {
	color: #E6A23C;
}

.cell-with-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.store-info {
	justify-content: center;
}

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

.warehouse-info {
	justify-content: center;
}

.warehouse-icon {
	color: #67C23A;
	font-size: 16px;
	flex-shrink: 0;
}

.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;
		}
	}
}

::v-deep .el-table .cell {
	white-space: nowrap;
}
</style>