antissoft / lvqianmeiye_ERP

<template>
	<view class="container">
		<!-- 日期范围筛选 -->
		<view class="date-filter-card">
			<view class="date-filter-header">
				<view class="date-range-display" @click="showCalendarFun">
					<text class="date-text">{{ formatDateRange() }}</text>
					<text class="calendar-icon">📅</text>
				</view>
			</view>
		</view>

		<!-- 添加按钮 -->
		<view class="add-btn-wrapper">
			<view class="add-btn" @click="goToAdd">
				<text class="add-text">添加使用记录</text>
			</view>
		</view>

		<!-- 日历组件 -->
		<uni-calendar
			:range="true"
			ref="calendar"
			@confirm="handleDateConfirm"
			:insert="false"
		></uni-calendar>

		<!-- 数据列表 -->
		<view class="list-card">
			<view class="list-header">
				<text class="header-text">使用记录</text>
				<text class="total-count">共 {{ totalCount }} 条</text>
			</view>

			<scroll-view scroll-y class="list-content" @scrolltolower="loadMore">
				<view v-for="(item, index) in dataList" :key="index" class="list-item">
					<view class="item-header">
						<view class="product-name">{{ item.productName || '无' }}</view>
						<view class="usage-time">{{ utils.formatTimess(item.usageTime) }}</view>
					</view>
					<view class="item-details">
						<view class="detail-item">
							<text class="detail-label">批次号:</text>
							<text class="detail-value">{{ item.usageBatchId || '无' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">门店名称:</text>
							<text class="detail-value">{{ item.storeName || '无' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">使用数量:</text>
							<text class="detail-value">{{ item.usageQuantity || 0 }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">单价:</text>
							<text class="detail-value">{{ item.unitPrice ? '¥' + formatMoney(item.unitPrice) : '无' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">总金额:</text>
							<text class="detail-value">{{ item.totalAmount ? '¥' + formatMoney(item.totalAmount) : '无' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">审批状态:</text>
							<view class="status-tag" :class="!item.approvalStatus ? 'tag-default' : (item.approvalStatus === '待审批' ? 'tag-warning' : (item.approvalStatus === '审批中' ? 'tag-primary' : (item.approvalStatus === '已通过' ? 'tag-success' : (item.approvalStatus === '未通过' ? 'tag-danger' : (item.approvalStatus === '已退回' ? 'tag-info' : 'tag-default')))))">
								{{ item.approvalStatus || '无' }}
							</view>
						</view>
						<view class="detail-item">
							<text class="detail-label">是否已领取:</text>
							<view class="status-tag" :class="item.isReceived === 1 ? 'tag-success' : (item.isReceived === 0 ? 'tag-info' : 'tag-default')">
								{{ item.isReceived === 1 ? '已领取' : (item.isReceived === 0 ? '未领取' : '无') }}
							</view>
						</view>
						<view class="detail-item">
							<text class="detail-label">是否有效:</text>
							<view class="status-tag" :class="item.isEffective === 1 ? 'tag-success' : 'tag-info'">
								{{ item.isEffective === 1 ? '有效' : '无效' }}
							</view>
						</view>
					</view>
					<view class="item-footer">
						<view class="status-badge" :class="item.isEffective === 1 ? 'normal' : 'canceled'">
							{{ item.isEffective === 1 ? '有效' : '无效' }}
						</view>
						<view class="action-buttons">
							<view v-if="item.isEffective === 1" class="action-btn cancel-btn" @click.stop="handleCancel(item)">
								<text class="btn-text">作废</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="!loading && dataList.length === 0" class="empty-state">
					<view class="empty-icon">📋</view>
					<view>暂无使用记录</view>
				</view>

				<!-- 加载状态 -->
				<view v-if="loading && dataList.length === 0" class="loading">正在加载数据...</view>

				<!-- 加载更多 -->
				<u-loadmore v-if="dataList.length > 0" :status="loadmoreStatus" :load-text="loadText"></u-loadmore>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import usageApi from '@/apis/modules/usage.js'
	import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue'

	export default {
		components: {
			uniCalendar
		},
		data() {
			// 初始化日期范围（本月1号到今天）
			const now = new Date()
			const year = now.getFullYear()
			const month = now.getMonth()
			const firstDay = new Date(year, month, 1)
			const today = new Date(year, now.getMonth(), now.getDate(), 23, 59, 59, 999)
			
			
			return {
				loading: false,
				dataList: [],
				currentPage: 1,
				pageSize: 10,
				totalCount: 0,
				hasMore: true,
				loadmoreStatus: 'loadmore',
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},
				userInfo: uni.getStorageSync('userInfo'),
				newuserInfo: uni.getStorageSync('newuserInfo'),
				// 日期范围筛选相关
				showCalendar: false,
				startDate: this.utils.formatTimeday(firstDay),
				endDate: this.utils.formatTimeday(now),
				dateRange: [firstDay.getTime(), today.getTime()]
			}
		},

		onLoad() {
			this.initializePage()
		},

		onShow() {
			// 页面显示时刷新数据（如果从添加页面返回）
			if (this.dataList.length > 0) {
				this.refreshData()
			}
		},

		methods: {
			showCalendarFun() {
				this.$refs.calendar.open();
			},
			
			// 初始化页面
			async initializePage() {
				try {
					// 检查登录状态
					await this.checkLoginStatus()

					// 加载第一页数据
					await this.loadUsageList()
				} catch (error) {
					console.error('页面初始化失败:', error)
					this.showErrorState('页面初始化失败，请刷新重试')
				}
			},

			// 检查登录状态
			async checkLoginStatus() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
			},

			// 加载使用记录列表
			async loadUsageList() {
				if (this.loading) return

				try {
					this.loading = true
					this.showLoadingState()

					const params = {
						currentPage: this.currentPage,
						pageSize: this.pageSize
					}

					// 添加使用时间范围参数
					if (this.dateRange && this.dateRange.length === 2) {
						// params.usageTime = `${this.dateRange[0]},${this.dateRange[1]}`
						params.UsageStartTime = this.utils.formatTimess(this.dateRange[0])
						params.UsageEndTime = this.utils.formatTimess(this.dateRange[1])
					}
                
                    // if (this.userInfo && this.userInfo.userId) {
                    //     params.createUser = this.userInfo.userId
                    // } else {
                    //     params.createUser = '暂无'
                    // }
				
					params.StoreId = this.newuserInfo.mdid || '暂无'
					const res = await usageApi.getUsageList(params)

					if (res.code === 200) {
						const data = res.data
						this.totalCount = data.pagination?.total || 0
						const list = data.list || []

						if (this.currentPage === 1) {
							// 第一页，清空列表
							this.dataList = list
						} else {
							// 加载更多，追加到列表
							this.dataList = [...this.dataList, ...list]
						}

						// 判断是否还有更多数据
						this.hasMore = list.length === this.pageSize

						// 更新加载状态
						if (this.hasMore) {
							this.loadmoreStatus = 'loadmore'
						} else {
							this.loadmoreStatus = 'nomore'
						}
					} else {
						throw new Error(res.message || '获取数据失败')
					}

				} catch (error) {
					console.error('加载使用记录列表失败:', error)
					if (this.currentPage === 1) {
						this.showErrorState('加载数据失败，请重试')
					} else {
						this.showMessage('加载更多数据失败', 'error')
					}
				} finally {
					this.loading = false
				}
			},

			// 刷新数据
			refreshData() {
				this.currentPage = 1
				this.hasMore = true
				this.loadmoreStatus = 'loadmore'
				this.dataList = []
				this.loadUsageList()
			},

			// 加载更多
			async loadMore() {
				if (this.loading || !this.hasMore || this.loadmoreStatus === 'nomore') return

				this.loadmoreStatus = 'loading'
				this.currentPage++
				await this.loadUsageList()
			},

			// 跳转到添加页面
			goToAdd() {
				uni.navigateTo({
					url: '/pages/usage-form/usage-form'
				})
			},

			// 作废使用记录
			async handleCancel(item) {
				if (item.isEffective !== 1) {
					uni.showToast({
						title: '该记录已作废或无效',
						icon: 'none'
					})
					return
				}

				// 显示确认对话框（与PC端保持一致）
				const confirm = await this.showConfirmDialog('提示', '确定要作废这条使用记录吗？')
				
				if (!confirm) {
					return
				}

				try {
					uni.showLoading({
						title: '正在作废...'
					})

					const res = await usageApi.cancelUsage(item.id)

					if (res.code === 200) {
						uni.showToast({
							title: res.msg || '作废成功',
							icon: 'success',
							duration: 1500
						})
						// 刷新列表（与PC端保持一致，在消息提示后刷新）
						setTimeout(() => {
							this.refreshData()
						}, 1500)
					} else {
						throw new Error(res.message || res.msg || '作废失败')
					}
				} catch (error) {
					console.error('作废使用记录失败:', error)
					uni.showToast({
						title: error.message || error.msg || '作废失败，请重试',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 显示确认对话框
			showConfirmDialog(title, content) {
				return new Promise((resolve) => {
					uni.showModal({
						title: title,
						content: content,
						success: (res) => {
							resolve(res.confirm)
						},
						fail: () => {
							resolve(false)
						}
					})
				})
			},

			// 格式化金额
			formatMoney(amount) {
				if (!amount && amount !== 0) return '0.00'
				return Number(amount).toFixed(2)
			},

			// 获取审批状态样式类
			getApprovalStatusClass(status) {
				if (!status) return 'tag-default'
				const statusMap = {
					'待审批': 'tag-warning',
					'审批中': 'tag-primary',
					'已通过': 'tag-success',
					'未通过': 'tag-danger',
					'已退回': 'tag-info'
				}
				return statusMap[status] || 'tag-default'
			},

			// 获取状态样式类
			getStatusClass(isCanceled) {
				return isCanceled ? 'canceled' : 'normal'
			},

			// 显示加载状态
			showLoadingState() {
				// 加载状态由模板控制
			},

			// 显示错误状态
			showErrorState(message) {
				uni.showToast({
					title: message,
					icon: 'none'
				})
			},

			// 显示消息提示
			showMessage(message, type = 'info') {
				uni.showToast({
					title: message,
					icon: type === 'error' ? 'error' : 'none'
				})
			},

			// 格式化日期范围显示
			formatDateRange() {
				if (!this.startDate || !this.endDate) {
					return '请选择日期'
				}
				
				// 直接格式化日期字符串，避免时区问题
				const formatDisplay = (dateStr) => {
					// dateStr 格式为 YYYY-MM-DD
					const parts = dateStr.split('-')
					if (parts.length === 3) {
						return `${parts[0]}/${parts[1]}/${parts[2]}`
					}
					return dateStr
				}
				
				return `${formatDisplay(this.startDate)} - ${formatDisplay(this.endDate)}`
			},

			// 处理日期确认
			handleDateConfirm(e) {
				console.log('日期选择结果:', e)
				
				// uni-calendar组件返回的是包含start和end的对象
				if (e && e.range && e.range.data) {
					// 更新dateRange用于API调用（时间戳格式）
					const startTime = e.range.data[0]+' 00:00:00'
					const endTime =  e.range.data[e.range.data.length-1]+' 23:59:59'
					this.dateRange = [startTime, endTime]
					
					// 更新startDate和endDate用于显示
					this.startDate = e.range.data[0]
					this.endDate = e.range.data[e.range.data.length-1]
					
					// 日期变化时重新加载数据
					this.refreshData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		padding: 40rpx 40rpx;
		box-sizing: border-box;
	}

	.date-filter-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		padding: 40rpx;
		margin-bottom: 40rpx;
	}

	.date-filter-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.date-range-display {
		display: flex;
		align-items: center;
		background: #f9fff9;
		border: 3rpx solid #c8e6c9;
		border-radius: 24rpx;
		padding: 24rpx 32rpx;
		cursor: pointer;
		transition: all 0.2s ease;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
	}

	.date-range-display:active {
		border-color: #43a047;
		background: #fff;
		transform: scale(0.98);
	}

	.date-text {
		font-size: 28rpx;
		color: #2e7d32;
		flex: 1;
	}

	.calendar-icon {
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.add-btn-wrapper {
		margin-bottom: 40rpx;
		display: flex;
		justify-content: flex-end;
	}

	.add-btn {
		display: flex;
		align-items: center;
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
		padding: 24rpx 48rpx;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 8rpx 24rpx rgba(67, 233, 123, 0.3);
		transition: all 0.2s ease;
	}

	.add-btn:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 12rpx rgba(67, 233, 123, 0.4);
	}

	.add-text {
		letter-spacing: 2rpx;
	}

	.list-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		overflow: hidden;
		max-height: 60vh;
	}

	.list-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 32rpx 40rpx;
		color: #fff;
		font-weight: 600;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-text {
		font-size: 32rpx;
	}

	.total-count {
		font-size: 28rpx;
		opacity: 0.9;
	}

	.list-content {
		max-height: calc(60vh - 120rpx);
		overflow-y: auto;
	}

	.list-item {
		padding: 32rpx 40rpx;
		border-bottom: 2rpx solid #f0f0f0;
		cursor: pointer;
		transition: all 0.2s ease;
		position: relative;
	}

	.list-item:active {
		background: #f8fff8;
		transform: translateX(8rpx);
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.product-name {
		font-weight: 600;
		color: #2e7d32;
		font-size: 32rpx;
	}

	.usage-time {
		font-size: 24rpx;
		color: #6a9c6a;
	}

	.item-details {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #555;
		flex-wrap: wrap;
	}

	.detail-label {
		color: #6a9c6a;
		margin-right: 12rpx;
		font-size: 24rpx;
	}

	.detail-value {
		color: #2e7d32;
		font-weight: 500;
		flex: 1;
	}

	.status-tag {
		display: inline-block;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: 500;
		text-align: center;
	}

	.tag-default {
		background: #f5f5f5;
		color: #909399;
	}

	.tag-primary {
		background: #e3f2fd;
		color: #409eff;
	}

	.tag-success {
		background: #e8f5e9;
		color: #67c23a;
	}

	.tag-warning {
		background: #fff3e0;
		color: #e6a23c;
	}

	.tag-danger {
		background: #ffebee;
		color: #f56c6c;
	}

	.tag-info {
		background: #f4f4f5;
		color: #909399;
	}

	.item-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.status-badge {
		display: inline-block;
		padding: 8rpx 24rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
	}

	.status-badge.normal {
		background: #e8f5e9;
		color: #2e7d32;
		border: 2rpx solid #c8e6c9;
	}

	.status-badge.canceled {
		background: #ffebee;
		color: #c62828;
		border: 2rpx solid #ffcdd2;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.action-btn {
		display: flex;
		align-items: center;
		padding: 12rpx 24rpx;
		border-radius: 24rpx;
		font-size: 24rpx;
		font-weight: 500;
		transition: all 0.2s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.action-btn:active {
		transform: scale(0.95);
		box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
	}

	.cancel-btn {
		background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
		color: #fff;
	}

	.cancel-btn:active {
		background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
	}

	.btn-text {
		letter-spacing: 1rpx;
	}

	.loading {
		text-align: center;
		padding: 80rpx 40rpx;
		color: #6a9c6a;
		font-size: 28rpx;
	}

	.empty-state {
		text-align: center;
		padding: 120rpx 40rpx;
		color: #6a9c6a;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 32rpx;
		opacity: 0.5;
	}
</style>