antissoft / lvqianmeiye_ERP

<template>
	<el-dialog
		title="导入合作成本"
		:visible.sync="visible"
		:close-on-click-modal="false"
		class="NCC-dialog NCC-dialog_center"
		width="600px"
		@close="handleClose"
	>
		<div class="form-content">
			<el-upload
				ref="upload"
				:auto-upload="false"
				:on-change="handleFileChange"
				:file-list="fileList"
				:limit="1"
				accept=".xlsx,.xls"
				drag
			>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip" slot="tip">只能上传xlsx/xls文件，且不超过10MB</div>
			</el-upload>
			<div style="margin-top: 15px;">
				<el-checkbox v-model="clearBeforeImport">
					清理导入月份数据
				</el-checkbox>
			</div>
			<div v-if="uploadResult" class="upload-result" :class="uploadResult.type">
				<div class="result-title">{{ uploadResult.title }}</div>
				<div class="result-description">{{ uploadResult.description }}</div>
				<div v-if="uploadResult.failMessages && uploadResult.failMessages.length > 0" class="fail-messages">
					<div v-for="(msg, index) in uploadResult.failMessages" :key="index" class="fail-message">{{ msg }}</div>
				</div>
				<div v-if="uploadResult.successRecords && uploadResult.successRecords.length > 0" class="success-records">
					<div class="success-title">成功导入的记录（包含成本类型）：</div>
					<div v-for="(record, index) in uploadResult.successRecords" :key="index" class="success-record">
						门店ID: {{ record.storeId }}, 年份: {{ record.year }}, 月份: {{ record.month }}, 
						金额: {{ record.totalAmount }}, 成本类型: {{ record.costType || '无' }}, 
						备注: {{ record.remarks || '无' }}
					</div>
				</div>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="submitUpload" :loading="uploading" :disabled="!fileList.length">上传</el-button>
		</div>
	</el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
	data() {
		return {
			visible: false,
			fileList: [],
			uploading: false,
			clearBeforeImport: true, // 是否需要清理导入月份数据，默认true
			uploadResult: null
		}
	},
	methods: {
		init() {
			this.visible = true
			this.fileList = []
			this.uploading = false
			this.clearBeforeImport = true
			this.uploadResult = null
		},
		handleFileChange(file, fileList) {
			this.fileList = fileList
			this.uploadResult = null
		},
		submitUpload() {
			if (!this.fileList.length || !this.fileList[0]) {
				this.$message.warning('请选择要上传的文件')
				return
			}
			const file = this.fileList[0]
			if (!file.raw) {
				this.$message.warning('文件信息异常，请重新选择文件')
				return
			}
			this.uploading = true
			this.uploadResult = null
			const formData = new FormData()
			formData.append('file', file.raw)
			formData.append('clearBeforeImport', this.clearBeforeImport)
			request({
				url: '/api/Extend/LqCooperationCost/Actions/Import',
				method: 'POST',
				data: formData,
				headers: {
					'Content-Type': 'multipart/form-data'
				}
			}).then(res => {
				this.uploading = false
				if (res.code === 200) {
					const data = res.data || {}
					this.uploadResult = {
						type: 'success',
						title: '导入成功',
						description: `成功导入 ${data.successCount || 0} 条，失败 ${data.failCount || 0} 条`,
						failMessages: data.failMessages || [],
						successRecords: data.successRecords || []
					}
					this.$message.success('导入成功')
					setTimeout(() => {
						this.handleClose()
						this.$emit('refresh')
					}, 2000)
				} else {
					this.uploadResult = {
						type: 'error',
						title: '导入失败',
						description: res.msg || '数据导入失败，请检查文件格式'
					}
				}
			}).catch(err => {
				this.uploading = false
				this.uploadResult = {
					type: 'error',
					title: '导入失败',
					description: err.message || '网络错误，请重试'
				}
				this.$message.error('导入失败')
			})
		},
		handleClose() {
			this.visible = false
			this.fileList = []
			this.uploadResult = null
			if (this.$refs.upload) {
				this.$refs.upload.clearFiles()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.dialog-footer {
	text-align: right;
}

.upload-result {
	margin-top: 20px;
	padding: 15px;
	border-radius: 4px;

	&.success {
		background-color: #f0f9ff;
		border: 1px solid #67C23A;
	}

	&.error {
		background-color: #fef0f0;
		border: 1px solid #F56C6C;
	}

	.result-title {
		font-weight: 600;
		margin-bottom: 8px;
	}

	.result-description {
		margin-bottom: 10px;
	}

	.fail-messages {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #ddd;

		.fail-message {
			color: #F56C6C;
			margin-bottom: 5px;
		}
	}

	.success-records {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid #ddd;

		.success-title {
			font-weight: 600;
			margin-bottom: 8px;
			color: #67C23A;
		}

		.success-record {
			color: #606266;
			margin-bottom: 5px;
			font-size: 12px;
		}
	}
}
</style>