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-select v-model="query.applicationStoreId" placeholder="请选择申请门店" clearable filterable>
								<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 label="审批状态">
							<el-select v-model="query.approvalStatus" placeholder="请选择审批状态" clearable>
								<el-option label="待审批" value="待审批" />
								<el-option label="审批中" value="审批中" />
								<el-option label="已通过" value="已通过" />
								<el-option label="未通过" value="未通过" />
								<el-option label="已退回" value="已退回" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="是否已领取">
							<el-select v-model="query.isReceived" placeholder="请选择" clearable>
								<el-option label="未领取" :value="0" />
								<el-option label="已领取" :value="1" />
							</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>
						<el-button type="primary" icon="el-icon-plus" @click="addUsage()">添加使用记录</el-button>
					</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>
				<NCC-table v-loading="loading" :data="list"
					:header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
					<el-table-column label="申请编号" align="center" prop="id" width="180">
						<template slot-scope="scope">
							<div class="id-info">
								<i class="el-icon-postcard id-icon"></i>
								<span class="text-nowrap">{{ scope.row.id || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="批次ID" align="center" prop="usageBatchId" width="180">
						<template slot-scope="scope">
							<span class="text-nowrap">{{ scope.row.usageBatchId || '无' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="申请人" align="center" prop="applicationUserName" width="120" />
					<el-table-column label="申请门店" align="center" prop="applicationStoreName" width="150" />
					<el-table-column label="申请时间" align="center" prop="applicationTime" width="180">
						<template slot-scope="scope">
							<span>{{ formatDateTime(scope.row.applicationTime) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="审批状态" align="center" prop="approvalStatus" width="120">
						<template slot-scope="scope">
							<el-tag :type="getStatusType(scope.row.approvalStatus)" size="small">
								{{ scope.row.approvalStatus || '无' }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="当前审批人" align="center" prop="currentApprovers" width="200">
						<template slot-scope="scope">
							<div v-if="scope.row.currentApprovers && scope.row.currentApprovers.length > 0" class="approver-list">
								<div v-for="(approver, index) in scope.row.currentApprovers" :key="index" class="approver-item">
									<el-tag :type="getApprovalResultType(approver.approvalResult)" size="small">
										{{ approver.approverName || '无' }} ({{ approver.approvalResult || '待审批' }})
									</el-tag>
								</div>
							</div>
							<span v-else>无</span>
						</template>
					</el-table-column>
					<el-table-column label="是否已领取" align="center" prop="isReceived" width="120">
						<template slot-scope="scope">
							<el-tag :type="scope.row.isReceived === 1 ? 'success' : 'info'" size="small">
								{{ scope.row.isReceived === 1 ? '已领取' : '未领取' }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="领取时间" align="center" prop="receiveTime" width="180">
						<template slot-scope="scope">
							<span>{{ scope.row.receiveTime ? formatDateTime(scope.row.receiveTime) : '无' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="备注" align="center" prop="remarks" min-width="150">
						<template slot-scope="scope">
							<span>{{ scope.row.remarks || '无' }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="400" align="left" fixed="right">
						<template slot-scope="scope">
							<div class="action-buttons">
								<el-button type="text" icon="el-icon-view" @click="viewBatchDetail(scope.row)"
									class="view-btn">
									查看批次详情
								</el-button>
								<el-button v-if="scope.row.usageBatchId" type="text" icon="el-icon-printer"
									@click="handlePrint(scope.row)" class="print-btn">
									打印
								</el-button>
								<el-button v-if="canApprove(scope.row)" type="text" icon="el-icon-check"
									@click="approve(scope.row)" class="approve-btn">
									审批
								</el-button>
								<el-button v-if="canEdit(scope.row)" type="text" icon="el-icon-edit"
									@click="editUsage(scope.row)" class="edit-btn">
									修改
								</el-button>
								<el-button v-if="scope.row.approvalStatus === '已通过' && scope.row.isReceived === 0"
									type="text" icon="el-icon-finished" @click="markReceived(scope.row)"
									class="receive-btn">
									标记已领取
								</el-button>
							</div>
						</template>
					</el-table-column>
				</NCC-table>
				<pagination :total="total" :page.sync="query.currentPage" :limit.sync="query.pageSize"
					@pagination="initData" />
			</div>
		</div>
		<!-- 审批弹窗 -->
		<ApprovalDialog v-if="approvalDialogVisible" ref="ApprovalDialog" @refresh="initData" />
		<!-- 批次详情弹窗 -->
		<BatchDetailDialog v-if="batchDetailDialogVisible" ref="BatchDetailDialog" />
		<!-- 添加使用记录弹窗 -->
		<UsageMultiForm v-if="usageMultiFormVisible" ref="UsageMultiForm" @refresh="initData" />
		<!-- 修改使用记录弹窗 -->
		<EditUsageDialog v-if="editUsageDialogVisible" ref="EditUsageDialog" @refresh="initData" />
	</div>
</template>

<script>
import request from '@/utils/request'
import { getApplicationByBatchId, approveApplication, markReceived, getBatchInfo } from '@/api/extend/lqInventory'
import ApprovalDialog from './approval-dialog.vue'
import BatchDetailDialog from './batch-detail-dialog.vue'
import UsageMultiForm from './usage-multi-form.vue'
import EditUsageDialog from './edit-usage-dialog.vue'

export default {
	components: { ApprovalDialog, BatchDetailDialog, UsageMultiForm, EditUsageDialog },
	data() {
		return {
			loading: false,
			list: [],
			total: 0,
			query: {
				currentPage: 1,
				pageSize: 20,
				applicationStoreId: undefined,
				approvalStatus: undefined,
				isReceived: undefined
			},
			storeOptions: [],
			approvalDialogVisible: false,
			batchDetailDialogVisible: false,
			usageMultiFormVisible: false,
			editUsageDialogVisible: false
		}
	},
	created() {
		this.initStoreOptions()
		this.initData()
	},
	methods: {
		initData() {
			this.loading = true
			let query = { ...this.query }
			// 移除空值
			Object.keys(query).forEach(key => {
				if (query[key] === undefined || query[key] === null || query[key] === '') {
					delete query[key]
				}
			})
			request({
				url: '/api/Extend/LqInventoryUsage/GetApplicationList',
				method: 'GET',
				data: query
			}).then(res => {
				if (res.code == 200 && res.data) {
					this.list = res.data.list || []
					this.total = res.data.pagination ? res.data.pagination.total : 0
				} else {
					this.list = []
					this.total = 0
				}
				this.loading = false
			}).catch(() => {
				this.loading = false
				this.list = []
				this.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.query.currentPage = 1
			this.initData()
		},
		reset() {
			this.query = {
				currentPage: 1,
				pageSize: 20,
				applicationStoreId: undefined,
				approvalStatus: undefined,
				isReceived: undefined
			}
			this.initData()
		},
		viewBatchDetail(row) {
			this.batchDetailDialogVisible = true
			this.$nextTick(() => {
				this.$refs.BatchDetailDialog.init(row.usageBatchId)
			})
		},
		approve(row) {
			this.approvalDialogVisible = true
			this.$nextTick(() => {
				this.$refs.ApprovalDialog.init(row)
			})
		},
		markReceived(row) {
			this.$confirm('确定要标记该申请为已领取吗？', '提示', {
				type: 'warning'
			}).then(() => {
				markReceived(row.id).then(res => {
					this.$message({
						type: 'success',
						message: res.msg || '标记成功',
						onClose: () => {
							this.initData()
						}
					})
				}).catch(() => { })
			}).catch(() => { })
		},
		addUsage() {
			this.usageMultiFormVisible = true
			this.$nextTick(() => {
				this.$refs.UsageMultiForm.init()
			})
		},
		editUsage(row) {
			this.editUsageDialogVisible = true
			this.$nextTick(() => {
				this.$refs.EditUsageDialog.init(row)
			})
		},
		// 判断是否可以修改
		canEdit(row) {
			// 只有审批中状态的申请才能修改
			if (row.approvalStatus !== '审批中') {
				return false
			}
			
			// 获取当前登录用户信息
			const currentUser = this.$store.getters.userInfo
			if (!currentUser) {
				return false
			}
			
			const currentUserId = String(currentUser.userId || currentUser.id || '')
			if (!currentUserId) {
				return false
			}
			
			// 判断当前用户是否在currentApprovers中，且approvalResult为"待审批"
			if (!row.currentApprovers || row.currentApprovers.length === 0) {
				return false
			}
			
			// 检查当前用户的ID是否在审批人列表中，且状态为"待审批"
			const isCurrentApprover = row.currentApprovers.some(approver => {
				const approverId = String(approver.approverId || '')
				return approverId === currentUserId && approver.approvalResult === '待审批'
			})
			
			return isCurrentApprover
		},
		getStatusType(status) {
			const statusMap = {
				'待审批': 'info',
				'审批中': 'warning',
				'已通过': 'success',
				'未通过': 'danger',
				'已退回': 'info'
			}
			return statusMap[status] || 'info'
		},
		getApprovalResultType(result) {
			const resultMap = {
				'待审批': 'info',
				'已通过': 'success',
				'未通过': 'danger',
				'已退回': 'info'
			}
			return resultMap[result] || 'info'
		},
		// 判断是否可以审批
		canApprove(row) {
			// 状态必须是"审批中"
			if (row.approvalStatus !== '审批中') {
				return false
			}
			
			// 获取当前登录用户信息
			const currentUser = this.$store.getters.userInfo
			if (!currentUser) {
				return false
			}
			
			const currentUserId = String(currentUser.userId || currentUser.id || '')
			if (!currentUserId) {
				return false
			}
			
			// 判断当前用户是否在currentApprovers中，且approvalResult为"待审批"
			if (!row.currentApprovers || row.currentApprovers.length === 0) {
				return false
			}
			
			// 检查当前用户的ID是否在审批人列表中，且状态为"待审批"
			const isCurrentApprover = row.currentApprovers.some(approver => {
				const approverId = String(approver.approverId || '')
				return approverId === currentUserId && approver.approvalResult === '待审批'
			})
			
			return isCurrentApprover
		},
		formatDateTime(timestamp) {
			if (!timestamp) return '无'
			const date = new Date(timestamp)
			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}`
		},
		// 打印功能
		handlePrint(row) {
			if (!row.usageBatchId) {
				this.$message.warning('无法打印，批次ID不存在')
				return
			}
			
			// 调用接口获取批次信息
			request({
				url: `/api/Extend/LqInventoryUsage/GetBatchInfo?batchId=${row.usageBatchId}`,
				method: 'GET'
			}).then(res => {
				if (res.code === 200 && res.data) {
					// 构建打印内容
					let printContent = this.buildPrintContent(res.data)
					
					// 打开新窗口并打印
					let newWindow = window.open('_blank')
					if (!newWindow) {
						this.$message.error('无法打开打印窗口，请检查浏览器弹窗设置')
						return
					}
					
					newWindow.document.write(printContent)
					newWindow.document.close()
					
					// 等待内容加载完成后打印
					setTimeout(() => {
						newWindow.print()
					}, 300)
				} else {
					this.$message.error(res.msg || '获取批次信息失败')
				}
			}).catch(err => {
				this.$message.error('获取批次信息失败，请稍后重试')
			})
		},
		// 构建打印内容
		buildPrintContent(batchData) {
			// 格式化时间
			const formatDateTime = (timestamp) => {
				if (!timestamp) return '无'
				try {
					const date = new Date(timestamp)
					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}`
				} catch (e) {
					return '无'
				}
			}
			
			const formatDate = (timestamp) => {
				if (!timestamp) return '无'
				try {
					const date = new Date(timestamp)
					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')
					return `${year}-${month}-${day}`
				} catch (e) {
					return '无'
				}
			}
			
			const formatMoney = (amount) => {
				if (!amount && amount !== 0) return '0.00'
				return Number(amount).toFixed(2)
			}
			
			// 过滤出有效记录（isEffective === 1）
			const effectiveRecords = batchData.UsageRecords ? batchData.UsageRecords.filter(item => item.isEffective === 1) : []
			
			// 获取门店名称（取第一条有效记录的门店名称）
			const storeName = effectiveRecords.length > 0 ? (effectiveRecords[0].storeName || '无') : '无'
			
			// 构建使用记录表格行（只包含有效记录，只显示产品名称和数量）
			let usageTableRows = ''
			if (effectiveRecords.length > 0) {
				effectiveRecords.forEach((item, index) => {
					usageTableRows += `
						<tr>
							<td style="text-align: center;">${index + 1}</td>
							<td>${item.productName || '无'}</td>
							<td style="text-align: center;">${item.usageQuantity || 0}</td>
						</tr>
					`
				})
			} else {
				usageTableRows = '<tr><td colspan="3" style="text-align: center;">暂无有效使用记录</td></tr>'
			}
			
			return `
				<!DOCTYPE html>
				<html>
				<head>
					<meta charset="UTF-8">
					<title>产品使用批次详情</title>
					<style>
						* {
							margin: 0;
							padding: 0;
							box-sizing: border-box;
						}
						body {
							font-family: "Microsoft YaHei", Arial, sans-serif;
							font-size: 13px;
							padding: 15px;
							color: #333;
						}
						.print-header {
							text-align: center;
							margin-bottom: 15px;
							border-bottom: 2px solid #333;
							padding-bottom: 10px;
						}
						.print-header h1 {
							font-size: 22px;
							font-weight: bold;
							margin-bottom: 5px;
						}
						.print-info {
							margin-bottom: 12px;
						}
						.print-info table {
							width: 100%;
							border-collapse: collapse;
							margin-bottom: 12px;
						}
						.print-info table td {
							padding: 6px 10px;
							border: 1px solid #ddd;
						}
						.print-info table td:first-child {
							background-color: #f5f5f5;
							font-weight: bold;
							width: 200px;
							text-align: right;
						}
						.print-table {
							width: 100%;
							border-collapse: collapse;
							margin-bottom: 12px;
						}
						.print-table thead {
							display: table-header-group;
						}
						.print-table tbody {
							display: table-row-group;
						}
						.print-table th,
						.print-table td {
							border: 1px solid #ddd;
							padding: 5px 6px;
							text-align: left;
							font-size: 12px;
						}
						.print-table th {
							background-color: #f5f5f5;
							font-weight: bold;
							text-align: center;
						}
						.print-table tbody tr {
							page-break-inside: avoid;
						}
						.print-footer {
							margin-top: 15px;
							padding-top: 10px;
							border-top: 1px solid #ddd;
							text-align: right;
							font-size: 11px;
							color: #666;
						}
						@media print {
							body {
								padding: 8px;
							}
							.print-header {
								page-break-after: avoid;
								margin-bottom: 12px;
								padding-bottom: 8px;
							}
							.print-info {
								page-break-after: avoid;
								margin-bottom: 10px;
							}
							.print-table {
								page-break-inside: auto;
							}
							.print-table thead {
								display: table-header-group;
							}
							.print-table tbody tr {
								page-break-inside: avoid;
							}
						}
					</style>
				</head>
				<body>
					<div class="print-header">
						<h1>产品使用批次详情</h1>
					</div>
					
					<div class="print-info">
						<table>
							<tr>
								<td>门店名称：</td>
								<td>${storeName}</td>
							</tr>
						</table>
					</div>
					
					<div class="print-info">
						<h3 style="margin-bottom: 8px; font-size: 14px;">使用记录明细</h3>
						<table class="print-table">
							<thead>
								<tr>
									<th style="width: 50px;">序号</th>
									<th>产品名称</th>
									<th style="width: 100px;">数量</th>
								</tr>
							</thead>
							<tbody>
								${usageTableRows}
							</tbody>
						</table>
					</div>
					
					<div class="print-footer">
						<p>打印时间：${formatDateTime(new Date().getTime())}</p>
					</div>
				</body>
				</html>
			`
		}
	}
}
</script>

<style lang="scss" scoped>
.text-nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

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

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

.action-buttons {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.approver-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}

.approver-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.view-btn {
	color: #409EFF;

	&:hover {
		color: #66b1ff;
	}
}

.approve-btn {
	color: #67C23A;

	&:hover {
		color: #85ce61;
	}
}

.receive-btn {
	color: #E6A23C;

	&:hover {
		color: #ebb563;
	}
}

.print-btn {
	color: #909399;

	&:hover {
		color: #606266;
	}
}

.edit-btn {
	color: #E6A23C;

	&:hover {
		color: #ebb563;
	}
}

::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>