pj_admin_cloud/src/views/supermarketerp/components/select-dialog.vue

<template>
	<el-dialog v-model="dialogVisible" title="选择商品" width="80%" :close-on-click-modal="false" draggable @close="dialogVisible = false">
		<el-row>
			<el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
				<el-form-item label="商品名称" prop="productName">
					<el-input placeholder="请输入商品名称" v-model="queryForm.productName" />
				</el-form-item>
				<el-form-item label="货号" prop="productCode">
					<el-input placeholder="请输入货号" v-model="queryForm.productCode" />
				</el-form-item>
				<el-form-item label="条码" prop="barcode">
					<el-input placeholder="请输入条码" v-model="queryForm.barcode" />
				</el-form-item>
				<el-form-item>
					<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<el-table
			ref="tableRef"
			border
			:data="dataList"
			v-loading="loading"
			:row-key="(row:any) => row.id"
			:reserve-selection="true"
			@row-click="rowClick"
			:row-style="{ cursor: 'pointer' }"
		>
			<el-table-column type="selection" width="50" fixed="left" align="center" />
			<el-table-column type="index" label="#" width="50" fixed="left" align="center" />
			<el-table-column prop="productName" label="商品名称" min-width="150px" align="center" show-overflow-tooltip />
			<el-table-column prop="picUrl" label="封面图" align="center" show-overflow-tooltip>
				<template #default="scope">
					<preview-image @click.stop :src="scope.row.picUrl" />
				</template>
			</el-table-column>
			<!-- <el-table-column prop="barcode" label="自编码/条码" min-width="150px" align="center" show-overflow-tooltip /> -->
			<el-table-column prop="stock" label="库存" min-width="80px" align="center" show-overflow-tooltip />
			<el-table-column prop="productCode" label="货号" min-width="100px" align="center" show-overflow-tooltip />
			<!-- <el-table-column prop="brandId" label="品牌" min-width="100px" align="center" show-overflow-tooltip>
				<template #default="scope">
					{{ supermarketBrand?.find((item: any) => item.id === scope.row.brandId)?.name }}
				</template>
			</el-table-column>
			<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip>
				<template #default="scope">
					{{ supermarketCategory?.find((item: any) => item.id === scope.row.categoryId)?.name }}
				</template>
			</el-table-column> -->
			<!-- <el-table-column prop="supplierId" label="货商" min-width="100px" align="center" show-overflow-tooltip /> -->
			<el-table-column prop="status" label="状态" min-width="100px" align="center" show-overflow-tooltip>
				<template #default="scope">
					<dict-tag :options="status" :value="scope.row.status" />
				</template>
			</el-table-column>
		</el-table>
		<pagination
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
			v-model:current-page="queryForm.current"
			v-model:page-size="queryForm.size"
			:total="total"
		/>

		<template #footer>
			<el-button @click="dialogVisible = false">取消</el-button>
			<el-button type="primary" @click="dialogConfirm" :disabled="loading">确认</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { getErpSpuPage } from "/@/api/supermarketerp/common"
import { getSupermarketCategory, getSupermarketBrand } from "/@/api/supermarketerp/supermarketSpu"
import { useDict } from "/@/hooks/dict"

const emit = defineEmits(["getSelectedRows"])
const props = withDefaults(
	defineProps<{
		selectedRows: any[]
	}>(),
	{
		selectedRows: () => [],
	},
)

const { status } = useDict("status")
const queryRef = ref()
const tableRef = ref() // 对话框多选表格ref
const loading = ref(false) // 对话框多选表格loading
const dialogVisible = ref(false)
const queryForm = reactive<any>({
	productCode: "",
	barcode: "",
	productName: "",
})
const total = ref<number>(0)
const dataList = ref<any[]>([]) // 对话框多选表格数据
const supermarketCategory = ref<any>([]) // 商品分类
const supermarketBrand = ref<any>([]) // 商品品牌

// 打开弹窗
const openDialog = async () => {
	dialogVisible.value = true
	getDataListAndSelect()
}

// 获取商品数据并且勾选
const getDataListAndSelect = async () => {
	loading.value = true
	try {
		const { code, data } = await getErpSpuPage(queryForm)
		if (code === 0) {
			dataList.value = data.records.map((item: any) => ({ ...item, erpSpuId: item.id }))
			total.value = data.total

			// 保存当前已选中的行
			// const currentSelectedRows = tableRef.value?.getSelectionRows() || []
			// 清空表格数据后重新设置
			nextTick(() => {
				// 合并当前页面数据中的已选行和之前保存的已选行
				const rowsToSelect = [...props.selectedRows.filter((row) => dataList.value.some((item) => item.erpSpuId === row.erpSpuId))]
				// 去重
				// const uniqueRowsToSelect = Array.from(new Map(rowsToSelect.map((row) => [row.erpSpuId, row])).values())
				// 为匹配的行设置选中状态
				rowsToSelect.forEach((row) => {
					const targetRow = dataList.value.find((item) => item.erpSpuId === row.erpSpuId)
					targetRow && tableRef.value?.toggleRowSelection(targetRow, true)
				})
			})
		}
	} catch (error) {
		dataList.value = []
	} finally {
		loading.value = false
	}
}

// 分页变化
const sizeChangeHandle = (val: number) => {
	queryForm.size = val
	getDataListAndSelect()
}
const currentChangeHandle = (val: number) => {
	queryForm.current = val
	getDataListAndSelect()
}

const resetQuery = () => {
	queryRef.value?.resetFields()
	getDataListAndSelect()
}

// 点击商品列表表格行
const rowClick = (row: any) => {
	console.log("clicked-row", row)
	tableRef.value.toggleRowSelection(row)
}

// 商品选择对话框确认
const dialogConfirm = () => {
	const $table = tableRef.value
	if ($table) {
		// 获取所有选中的行，包括其他页面的选择
		const currentSelectedRows = $table.getSelectionRows()
		// 合并当前选中的行和之前已选的行（排除当前页面的行）
		const allSelectedRows = [
			...currentSelectedRows,
			...props.selectedRows.filter((row) => !dataList.value.some((item) => item.erpSpuId === row.erpSpuId)),
		]
		dialogVisible.value = false
		emit("getSelectedRows", allSelectedRows)
	}
}

onMounted(async () => {
	// // 获取商品分类
	// try {
	// 	const res = await getSupermarketCategory()
	// 	supermarketCategory.value = res.data
	// } catch (error) {
	// 	supermarketCategory.value = []
	// }
	// // 获取商品品牌
	// try {
	// 	const res = await getSupermarketBrand()
	// 	supermarketBrand.value = res.data
	// } catch (error) {
	// 	supermarketBrand.value = []
	// }
})

defineExpose({
	openDialog,
})
</script>