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.flowType" 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 label="批次号">
							<el-input v-model="query.batchNumber" placeholder="请输入批次号" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="门店">
							<el-select 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="6">
						<el-form-item label="产品类型">
							<el-input v-model="query.productType" placeholder="请输入产品类型" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="清洗商">
							<el-select v-model="query.laundrySupplierId" placeholder="请选择清洗商" clearable filterable>
								<el-option v-for="item in supplierList" :key="item.id" :label="item.supplierName+'('+item.productType+')'" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<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="6">
						<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="6">
						<el-form-item label="是否有效">
							<el-select v-model="query.isEffective" placeholder="是否有效" clearable>
								<el-option label="有效" :value="1" />
								<el-option label="无效" :value="0" />
							</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="addSend()">创建送出记录</el-button>
						<el-button type="success" icon="el-icon-refresh" @click="addReturn()">创建送回记录</el-button>
						<el-button type="warning" icon="el-icon-warning" @click="viewDifference()">查看差异记录</el-button>
						<span class="total-price-sum">
							<i class="el-icon-money"></i>
							总费用合计：<strong>{{ totalPriceSum }}</strong>
						</span>
					</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" width="100">
						<template slot-scope="scope">
							<el-tag :type="scope.row.flowType === 0 ? 'primary' : 'success'" size="small">
								<i :class="scope.row.flowType === 0 ? 'el-icon-upload2' : 'el-icon-download'" style="margin-right: 4px;"></i>
								{{ scope.row.flowTypeName || '无' }}
							</el-tag>
						</template>
					</el-table-column>
					<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" width="180">
						<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" width="100">
						<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">
						<template slot-scope="scope">
							<div class="supplier-info">
								<i class="el-icon-s-shop supplier-icon"></i>
								<span class="text-nowrap">{{ scope.row.laundrySupplierName || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="数量" align="center" width="100">
						<template slot-scope="scope">
							<div class="quantity-info">
								<i class="el-icon-s-data quantity-icon"></i>
								<span>{{ scope.row.quantity || 0 }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="清洗单价" align="center" width="120">
						<template slot-scope="scope">
							<div class="price-info">
								<i class="el-icon-coin price-icon"></i>
								<span>{{ scope.row.laundryPrice || 0 }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="总费用" align="center" width="120">
						<template slot-scope="scope">
							<div class="total-price-info" v-if="scope.row.flowType === 0">
								<i class="el-icon-money total-price-icon"></i>
								<span>{{ scope.row.totalPrice || 0 }}</span>
							</div>
							<span v-else>无</span>
						</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.remark || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="是否有效" align="center" width="100">
						<template slot-scope="scope">
							<el-tag :type="scope.row.isEffective === 1 ? 'success' : 'info'" size="small">
								{{ scope.row.isEffective === 1 ? '有效' : '无效' }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="创建人" align="center">
						<template slot-scope="scope">
							<div class="user-info">
								<i class="el-icon-user user-icon"></i>
								<span class="text-nowrap">{{ scope.row.createUserName || '无' }}</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">
									{{ scope.row.flowType === 0 
										? (scope.row.sendTime ? formatDateTime(scope.row.sendTime) : '无')
										: (scope.row.returnTime ? formatDateTime(scope.row.returnTime) : '无')
									}}
								</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="创建时间" align="center" width="180" prop="createTime">
						<template slot-scope="scope">
							<div class="time-info">
								<i class="el-icon-time time-icon"></i>
								<span class="text-nowrap">{{ formatDateTime(scope.row.createTime) || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200" align="left" fixed="right">
						<template slot-scope="scope">
							<div class="action-buttons">
								<el-button type="text" icon="el-icon-view" @click="viewDetail(scope.row)" class="view-btn">
									详情
								</el-button>
								<el-button type="text" icon="el-icon-edit" @click="editRecord(scope.row)" class="edit-btn">
									编辑
								</el-button>
								<el-button type="text" icon="el-icon-close" @click="cancelRecord(scope.row)" class="cancel-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>
		<!-- 送出记录弹窗 -->
		<SendDialog v-if="sendDialogVisible" ref="SendDialog" @refresh="refresh" />
		<!-- 送回记录弹窗 -->
		<ReturnDialog v-if="returnDialogVisible" ref="ReturnDialog" @refresh="refresh" />
		<!-- 详情弹窗 -->
		<DetailDialog v-if="detailDialogVisible" ref="DetailDialog" />
		<!-- 差异记录弹窗 -->
		<DifferenceDialog v-if="differenceDialogVisible" ref="DifferenceDialog" />
		<!-- 编辑弹窗 -->
		<EditDialog v-if="editDialogVisible" ref="EditDialog" @refresh="refresh" />
		<!-- 作废弹窗 -->
		<CancelDialog v-if="cancelDialogVisible" ref="CancelDialog" @refresh="refresh" />
	</div>
</template>

<script>
import request from '@/utils/request'
import { getStoreSelector } from '@/api/extend/store'
import SendDialog from './send-dialog.vue'
import ReturnDialog from './return-dialog.vue'
import DetailDialog from './detail-dialog.vue'
import DifferenceDialog from './difference-dialog.vue'
import EditDialog from './edit-dialog.vue'
import CancelDialog from './cancel-dialog.vue'

export default {
	components: { SendDialog, ReturnDialog, DetailDialog, DifferenceDialog, EditDialog, CancelDialog },
	data() {
		return {
			list: [],
			loading: false,
			total: 0,
			query: {
				currentPage: 1,
				pageSize: 20,
				flowType: undefined,
				batchNumber: undefined,
				storeId: undefined,
				productType: undefined,
				laundrySupplierId: undefined,
				startTime: undefined,
				endTime: undefined,
				isEffective: undefined
			},
			storeList: [],
			supplierList: [],
			sendDialogVisible: false,
			returnDialogVisible: false,
			detailDialogVisible: false,
			differenceDialogVisible: false,
			editDialogVisible: false,
			cancelDialogVisible: false
		}
	},
	computed: {
		// 计算总费用合计（只计算送出类型的记录）
		totalPriceSum() {
			return this.list
				.filter(item => item.flowType === 0) // 只计算送出类型
				.reduce((sum, item) => {
					const price = parseFloat(item.totalPrice) || 0
					return sum + price
				}, 0)
				.toFixed(2)
		}
	},
	created() {
		this.initStoreList()
		this.initSupplierList()
		this.initData()
	},
	methods: {
		// 初始化门店列表
		initStoreList() {
			getStoreSelector().then(res => {
				if (res.code == 200 && res.data && res.data.list) {
					this.storeList = res.data.list
				}
			}).catch(() => {
				this.storeList = []
			})
		},
		// 初始化清洗商列表
		initSupplierList() {
			request({
				url: '/api/Extend/LqLaundrySupplier/GetList',
				method: 'GET',
				data: { currentPage: 1, pageSize: 1000, isEffective: 1 }
			}).then(res => {
				if (res.code == 200 && res.data && res.data.list) {
					this.supplierList = res.data.list
				}
			}).catch(() => {
				this.supplierList = []
			})
		},
		// 初始化数据
		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/GetList',
				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
			})
		},
		// 查询
		search() {
			this.query.currentPage = 1
			this.initData()
		},
		// 重置
		reset() {
			this.query = {
				currentPage: 1,
				pageSize: 20,
				flowType: undefined,
				batchNumber: undefined,
				storeId: undefined,
				productType: undefined,
				laundrySupplierId: undefined,
				startTime: undefined,
				endTime: undefined,
				isEffective: undefined
			}
			this.initData()
		},
		// 创建送出记录
		addSend() {
			this.sendDialogVisible = true
			this.$nextTick(() => {
				this.$refs.SendDialog.init()
			})
		},
		// 创建送回记录
		addReturn() {
			this.returnDialogVisible = true
			this.$nextTick(() => {
				this.$refs.ReturnDialog.init()
			})
		},
		// 查看详情
		viewDetail(row) {
			this.detailDialogVisible = true
			this.$nextTick(() => {
				this.$refs.DetailDialog.init(row.id)
			})
		},
		// 查看差异记录
		viewDifference() {
			this.differenceDialogVisible = true
			this.$nextTick(() => {
				this.$refs.DifferenceDialog.init()
			})
		},
		// 编辑记录
		editRecord(row) {
			this.editDialogVisible = true
			this.$nextTick(() => {
				this.$refs.EditDialog.init(row)
			})
		},
		// 作废记录
		cancelRecord(row) {
			this.cancelDialogVisible = true
			this.$nextTick(() => {
				this.$refs.CancelDialog.init(row)
			})
		},
		// 刷新
		refresh() {
			this.sendDialogVisible = false
			this.returnDialogVisible = false
			this.editDialogVisible = false
			this.cancelDialogVisible = false
			this.initData()
		},
		// 格式化日期时间
		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>
// 通用文本不换行样式
.text-nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

// 信息显示样式
.batch-info,
.store-info,
.product-type-info,
.supplier-info,
.quantity-info,
.price-info,
.total-price-info,
.remark-info,
.user-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;
}

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

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

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

.total-price-icon {
	color: #F56C6C;
	font-size: 16px;
}

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

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

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

// 总费用合计样式
.total-price-sum {
	margin-left: 20px;
	padding: 8px 16px;
	background-color: #f0f9ff;
	border: 1px solid #409EFF;
	border-radius: 4px;
	color: #409EFF;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;

	i {
		font-size: 16px;
	}

	strong {
		color: #F56C6C;
		font-size: 16px;
		font-weight: 600;
	}
}

// 操作按钮样式
.action-buttons {
	display: flex;
	align-items: center;
	gap: 8px;
}

.view-btn {
	color: #409EFF;

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

.edit-btn {
	color: #409EFF;

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

.cancel-btn {
	color: #F56C6C;

	&:hover {
		color: #f78989;
	}
}

// 表格行悬停效果
::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>