组件调整

2025-02-21 09:22:39 +08:00
1 parent 211ba23883
commit 496e45b770
@@ -0,0 +1,123 @@
+<template>
+	<!-- 商品选择对话框 -->
+	<el-dialog
+		v-model="erpSpuSelectDialogVisible"
+		title="选择商品"
+		width="70%"
+		:close-on-click-modal="false"
+		draggable
+		@close="erpSpuSelectDialogVisible = false"
+	>
+		<!-- <el-row>
+			<el-form :model="foodQueryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
+				<el-form-item label="商品名称" prop="name">
+					<el-input placeholder="请输入商品名称" v-model="foodQueryForm.name" />
+				</el-form-item>
+				<el-form-item label="商品分类" prop="categoryId">
+					<select-ctcg v-model="foodQueryForm.categoryId" style="width: 200px" />
+				</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="spuMultipleTableRef"
+			:data="spuDataList"
+			v-loading="spuListLoading"
+			:row-key="(row:any) => row.id"
+			:reserve-selection="true"
+			@row-click="rowClick"
+			:row-style="{ cursor: 'pointer' }"
+		>
+			<el-table-column type="selection" width="40" align="center" fixed="left" />
+			<el-table-column type="index" label="#" width="50" align="center" fixed="left" />
+			<el-table-column prop="productName" label="商品名称" min-width="100px" align="center" show-overflow-tooltip />
+			<el-table-column prop="barcode" label="自编码/条码" min-width="100px" 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 />
+			<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip />
+			<el-table-column prop="deptId" label="商户" min-width="100px" align="center" show-overflow-tooltip />
+			<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 />
+			<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="100px" align="center" show-overflow-tooltip />
+		</el-table>
+		<!-- <pagination
+			@size-change="sizeChangeHandle"
+			@current-change="currentChangeHandle"
+			v-model:current-page="foodQueryForm.current"
+			v-model:page-size="foodQueryForm.size"
+			:total="total"
+		/> -->
+
+		<template #footer>
+			<el-button @click="erpSpuSelectDialogVisible = false">取消</el-button>
+			<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="spuListLoading">确认</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { getErpSpuPage } from "/@/api/supermarketerp/common"
+
+const erpSpuSelectDialogVisible = defineModel()
+const emit = defineEmits(["getSelectedSpuRows"])
+const props = withDefaults(
+	defineProps<{
+		selectedSpuRows: any[]
+	}>(),
+	{
+		selectedSpuRows: () => [],
+	},
+)
+
+const spuMultipleTableRef = ref() // 对话框多选表格ref
+const spuListLoading = ref(false) // 对话框多选表格loading
+const spuDataList = ref<any[]>([]) // 对话框多选表格数据
+
+// 打开弹窗
+const openDialog = async () => {
+	erpSpuSelectDialogVisible.value = true
+	try {
+		spuListLoading.value = true
+		const { code, data } = await getErpSpuPage().finally(() => (spuListLoading.value = false))
+		if (code === 0) {
+			spuDataList.value = data.records.map((item: any) => ({ ...item, erpSpuId: item.id }))
+
+			// 勾选已经选择的商品
+			const target = spuDataList.value.filter((row: any) => props.selectedSpuRows.some((item: any) => row.erpSpuId === item.erpSpuId))
+			target.forEach((row: any) => nextTick(() => spuMultipleTableRef.value!.toggleRowSelection(row)))
+		}
+	} catch (error) {
+		spuDataList.value = []
+		spuListLoading.value = false
+	}
+}
+
+// 点击商品列表表格行
+const rowClick = (row: any) => {
+	console.log("clicked-row", row)
+	spuMultipleTableRef.value.toggleRowSelection(row)
+}
+
+// 商品选择对话框确认
+const handleSelectDialogConfirm = () => {
+	const $table = spuMultipleTableRef.value
+	if ($table) {
+		const selectionRows = spuMultipleTableRef.value.getSelectionRows()
+		emit("getSelectedSpuRows", selectionRows)
+	}
+}
+
+defineExpose({
+	openDialog,
+})
+</script>