antissoft / lvqianmeiye_ERP

<template>
	<el-dialog title="差异记录（送出数量 > 送回数量）" :visible.sync="visible" width="1200px" :close-on-click-modal="false">
		<!-- 查询条件 -->
		<el-row class="search-box" :gutter="16">
			<el-form @submit.native.prevent label-width="90px">
				<el-col :span="8">
					<el-form-item label="门店">
						<el-select style="width: 100%" v-model="query.storeId" placeholder="请选择门店" clearable filterable>
							<el-option v-for="item in storeList" :key="item.id" :label="item.fullName" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="产品类型">
						<el-input v-model="query.productType" placeholder="请输入产品类型" clearable />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="开始时间">
						<el-date-picker v-model="query.startTime" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
					</el-form-item>
				</el-col>
			<el-col :span="8" style="margin-top: 20px;">
				<el-form-item label="结束时间">
					<el-date-picker v-model="query.endTime" type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
				</el-form-item>
			</el-col>
			<el-col :span="8" style="margin-top: 20px;">
				<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>
		<!-- 列表 -->
		<NCC-table v-loading="loading" :data="list"
			:header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
			<el-table-column label="批次号" align="center" width="180">
				<template slot-scope="scope">
					<div class="batch-info">
						<i class="el-icon-tickets batch-icon"></i>
						<span class="text-nowrap">{{ scope.row.batchNumber || '无' }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="门店名称" align="center">
				<template slot-scope="scope">
					<div class="store-info">
						<i class="el-icon-office-building store-icon"></i>
						<span class="text-nowrap">{{ scope.row.storeName || '无' }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="产品类型" align="center">
				<template slot-scope="scope">
					<div class="product-type-info">
						<i class="el-icon-goods product-type-icon"></i>
						<span class="text-nowrap">{{ scope.row.productType || '无' }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="送出数量" align="center" width="120">
				<template slot-scope="scope">
					<div class="quantity-info">
						<i class="el-icon-upload2 quantity-icon"></i>
						<span>{{ scope.row.sendQuantity || 0 }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="送回数量" align="center" width="120">
				<template slot-scope="scope">
					<div class="quantity-info">
						<i class="el-icon-download quantity-icon"></i>
						<span>{{ scope.row.returnQuantity || 0 }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="差异数量" align="center" width="120">
				<template slot-scope="scope">
					<el-tag type="warning" size="small">
						<i class="el-icon-warning" style="margin-right: 4px;"></i>
						{{ scope.row.differenceQuantity || 0 }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="差异备注" align="center" min-width="150">
				<template slot-scope="scope">
					<div class="remark-info">
						<i class="el-icon-document remark-icon"></i>
						<span class="text-nowrap">{{ scope.row.differenceRemark || '无' }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="送出时间" align="center" width="180">
				<template slot-scope="scope">
					<div class="time-info">
						<i class="el-icon-time time-icon"></i>
						<span class="text-nowrap">{{ formatDateTime(scope.row.sendTime) || '无' }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="送回时间" align="center" width="180">
				<template slot-scope="scope">
					<div class="time-info">
						<i class="el-icon-time time-icon"></i>
						<span class="text-nowrap">{{ formatDateTime(scope.row.returnTime) || '无' }}</span>
					</div>
				</template>
			</el-table-column>
		</NCC-table>
		<pagination :total="total" :page.sync="query.currentPage"
			:limit.sync="query.pageSize" @pagination="initData" />
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false">关闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
import request from '@/utils/request'
import { getStoreSelector } from '@/api/extend/store'

export default {
	name: 'DifferenceDialog',
	data() {
		return {
			visible: false,
			loading: false,
			list: [],
			total: 0,
			query: {
				currentPage: 1,
				pageSize: 20,
				storeId: undefined,
				productType: undefined,
				startTime: undefined,
				endTime: undefined
			},
			storeList: []
		}
	},
	mounted() {
		this.initStoreList()
	},
	methods: {
		// 初始化
		init() {
			this.visible = true
			this.reset()
			this.initData()
		},
		// 初始化门店列表
		initStoreList() {
			getStoreSelector().then(res => {
				if (res.code == 200 && res.data && res.data.list) {
					this.storeList = res.data.list
				}
			}).catch(() => {
				this.storeList = []
			})
		},
		// 初始化数据
		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/LqLaundryFlow/GetDifferenceList',
				method: 'POST',
				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
			})
		},
		// 查询
		search() {
			this.query.currentPage = 1
			this.initData()
		},
		// 重置
		reset() {
			this.query = {
				currentPage: 1,
				pageSize: 20,
				storeId: undefined,
				productType: undefined,
				startTime: undefined,
				endTime: undefined
			}
		},
		// 格式化日期时间
		formatDateTime(dateTime) {
			if (!dateTime) return ''
			const date = new Date(dateTime)
			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>
.search-box {
	margin-bottom: 16px;
	padding: 16px;
	background: #f5f7fa;
	border-radius: 4px;

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

	::v-deep .el-button {
		cursor: pointer;
	}
}

// 通用文本不换行样式
.text-nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

// 信息显示样式
.batch-info,
.store-info,
.product-type-info,
.quantity-info,
.remark-info,
.time-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

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

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

.product-type-icon {
	color: #67C23A;
	font-size: 16px;
}

.quantity-icon {
	color: #E6A23C;
	font-size: 16px;
}

.remark-icon {
	color: #909399;
	font-size: 16px;
}

.time-icon {
	color: #909399;
	font-size: 16px;
}

.dialog-footer {
	text-align: right;
}
</style>