export-stock-in-dialog.vue 3.69 KB
<template>
	<el-dialog title="导出仓库入库明细" :close-on-click-modal="false" :visible.sync="visible"
		class="NCC-dialog NCC-dialog_center" lock-scroll width="640px">
		<el-form label-position="right" label-width="120px">
			<el-form-item label="统计月份" required>
				<el-date-picker v-model="statisticsMonth" type="month" placeholder="请选择月份"
					value-format="yyyy-MM" format="yyyy-MM" style="width: 100%" />
			</el-form-item>
			<el-form-item label="归属仓库">
				<el-select v-model="selectedWarehouses" multiple collapse-tags filterable clearable
					placeholder="不选表示全部仓库" style="width: 100%" :loading="warehouseLoading">
					<el-option v-for="item in warehouseOptions" :key="item" :label="item" :value="item" />
				</el-select>
			</el-form-item>
			<el-form-item label="是否有效">
				<el-select v-model="isEffective" placeholder="请选择" style="width: 100%">
					<el-option label="仅有效" :value="1" />
					<el-option label="仅无效" :value="0" />
					<el-option label="全部" :value="null" />
				</el-select>
			</el-form-item>
			<el-form-item label="导出说明">
				<div class="export-info">
					<p>• 按入库时间所在月份筛选(无入库时间时使用创建时间)</p>
					<p>• 仓库按产品「归属仓库」过滤;不选仓库则导出全部仓库</p>
					<p>• 导出字段含:归属仓库、产品、入库数量/时间、批次、采购信息、创建人等</p>
				</div>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" @click="handleExport" :loading="btnLoading">导 出</el-button>
		</span>
	</el-dialog>
</template>

<script>
import { getWarehouseOptions, exportStockInDetail } from '@/api/extend/lqInventory'

export default {
	name: 'ExportStockInDialog',
	data() {
		return {
			visible: false,
			btnLoading: false,
			warehouseLoading: false,
			statisticsMonth: '',
			selectedWarehouses: [],
			warehouseOptions: [],
			isEffective: 1
		}
	},
	methods: {
		init() {
			this.visible = true
			this.statisticsMonth = ''
			this.selectedWarehouses = []
			this.isEffective = 1
			this.loadWarehouseOptions()
		},
		loadWarehouseOptions() {
			this.warehouseLoading = true
			getWarehouseOptions().then(res => {
				this.warehouseLoading = false
				if (res.code === 200 && Array.isArray(res.data)) {
					this.warehouseOptions = res.data
				} else {
					this.warehouseOptions = []
				}
			}).catch(() => {
				this.warehouseLoading = false
				this.warehouseOptions = []
			})
		},
		handleExport() {
			if (!this.statisticsMonth) {
				this.$message.warning('请选择统计月份')
				return
			}
			this.btnLoading = true
			const params = {
				statisticsMonth: this.statisticsMonth
			}
			if (this.selectedWarehouses && this.selectedWarehouses.length > 0) {
				params.warehouses = this.selectedWarehouses.join(',')
			}
			if (this.isEffective !== null && this.isEffective !== undefined) {
				params.isEffective = this.isEffective
			}
			exportStockInDetail(params).then(res => {
				this.btnLoading = false
				if (res.code === 200 && res.data && res.data.url) {
					const baseUrl = window.location.origin
					window.open(baseUrl + res.data.url, '_blank')
					this.$message.success('导出成功')
					this.visible = false
				} else {
					this.$message.error(res.msg || '导出失败')
				}
			}).catch(() => {
				this.btnLoading = false
				this.$message.error('导出失败,请稍后重试')
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.export-info {
	padding: 10px;
	background-color: #f5f7fa;
	border-radius: 4px;

	p {
		margin: 5px 0;
		font-size: 13px;
		color: #606266;
		line-height: 1.6;
	}
}
</style>