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="getDataList">
				<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="getDataList">查询</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"
			@selection-change=""
		>
			<el-table-column type="selection" width="50" reserve-selection 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="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 label="包装单位" min-width="300px" align="center">
				<template #default="scope">
					<div v-if="scope.row.erpUnitVos && scope.row.erpUnitVos.length > 0">
						<div class="flex flex-wrap gap-2">
							<el-tag v-for="unit in scope.row.erpUnitVos" :key="unit.id" :type="unit.isBase ? 'primary' : 'info'" size="small">
								{{ unit.unit }}
								<span class="text-xs ml-1">({{ displayPrice(unit.purchasePrice, "") }}元)</span>
							</el-tag>
						</div>
					</div>
					<div v-else class="text-gray-400">无包装单位</div>
				</template>
			</el-table-column>
			<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"
import { displayPrice } from "/@/utils/formatMoney"

const emit = defineEmits(["getSelectedRows"])

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
	getDataList()
}

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

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

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

// 商品选择对话框确认
const dialogConfirm = () => {
	const $table = tableRef.value
	if ($table) {
		const currentSelectedRows = $table.getSelectionRows()

		dialogVisible.value = false
		emit("getSelectedRows", currentSelectedRows)
	}
}

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>