修改商品选择和修改字段命名

src/views/supermarketerp/components/linkCodeDialog.vue

@@ -1,11 +1,10 @@
 <template>
-	<!-- 关联订单对话框 -->
-	<el-dialog v-model="linkCodeDialogVisible" :title="title" width="70%" :close-on-click-modal="false" draggable @close="onClose">
+	<el-dialog v-model="dialogVisible" :title="title" width="70%" :close-on-click-modal="false" draggable @close="onClose">
 		<vxe-table
 			v-show="step === 0"
-			ref="linkCodeTableRef"
+			ref="tableRef"
 			border
-			v-loading="linkCodeLoading"
+			v-loading="loading"
 			:row-config="{ isCurrent: true, isHover: true }"
 			:radio-config="{ labelField: '', trigger: 'row' }"
 			:data="linkCodeTableData"
@@ -40,6 +39,7 @@
 			v-model:page-size="foodQueryForm.size"
 			:total="total"
 		/> -->
+
 		<vxe-table
 			v-show="step === 1"
 			ref="linkCodeUnitTableRef"
@@ -48,9 +48,9 @@
 			:checkbox-config="{ trigger: 'row' }"
 			:data="currRadioRowItems"
 		>
-			<vxe-column type="checkbox" width="60" align="center"></vxe-column>
-			<vxe-column field="unit" title="包装单位" align="center" width="200"></vxe-column>
-			<vxe-column field="quantity" title="数量" align="center" width="100"></vxe-column>
+			<vxe-column type="checkbox" width="60" align="center" />
+			<vxe-column field="unit" title="包装单位" align="center" width="200" />
+			<vxe-column field="quantity" title="数量" align="center" width="100" />
 			<vxe-column field="purchasePrice" title="进价" align="center" width="100">
 				<template #default="{ row }">
 					{{ displayPrice(row.purchasePrice) }}
@@ -66,19 +66,19 @@
 					{{ displayPrice(row.totalAmount) }}
 				</template>
 			</vxe-column>
-			<vxe-column field="remark" title="备注" show-overflow align="center" min-width="100"></vxe-column>
+			<vxe-column field="remark" title="备注" show-overflow align="center" min-width="100" />
 		</vxe-table>
 
 		<template #footer>
-			<el-button @click="linkCodeDialogVisible = false">取消</el-button>
+			<el-button @click="dialogVisible = false">取消</el-button>
 			<el-button v-show="step === 1" type="primary" @click="step--">上一步</el-button>
 			<el-button v-show="step === 0" type="primary" @click="step++" :disabled="currRadioRowItems.length <= 0">下一步</el-button>
-			<el-button v-show="step === 1" type="primary" @click="getSelectedRowData" :disabled="linkCodeLoading">确认</el-button>
+			<el-button v-show="step === 1" type="primary" @click="getSelectedRowData" :disabled="loading">确认</el-button>
 		</template>
 	</el-dialog>
 </template>
 
-<script setup lang="ts" name="linkCgCodeDialog">
+<script setup lang="ts">
 import { ref } from "vue"
 import { VxeTableEvents } from "vxe-table"
 import { getSimpleUserAll } from "/@/api/admin/user"
@@ -86,7 +86,7 @@ import { useDict } from "/@/hooks/dict"
 import { displayPrice } from "/@/utils/formatMoney"
 
 const { check_status } = useDict("check_status")
-const linkCodeDialogVisible = defineModel()
+const dialogVisible = ref(false)
 const emit = defineEmits(["getSelectedLinkCode"])
 const props = withDefaults(
 	defineProps<{
@@ -99,32 +99,31 @@ const props = withDefaults(
 	},
 )
 
-const linkCodeLoading = ref(false)
-const linkCodeTableRef = ref() // 关联订单表格ref
+const step = ref(0)
+const loading = ref(false)
+const tableRef = ref() // 关联订单表格ref
 const linkCodeUnitTableRef = ref() // 关联订单的包装单位表格ref
 const linkCodeTableData = ref([]) // 关联订单列表数据
 const currRadioRowItems = ref([]) // 当前单选的表格行的items
-const step = ref(0)
 const linkType = ref()
 const handlerUserList = ref() // 经办人列表
 
 // 打开关联补货单对话框
 // type: 1-采购订单 2-采购入库 3-采购退货
 const openLinkCodeDialog = async (type: number) => {
-	linkCodeDialogVisible.value = true
+	dialogVisible.value = true
 	linkType.value = type
 	step.value = 0
-	linkCodeLoading.value = true
+	loading.value = true
 	try {
-		const res = await props.getTableData().finally(() => (linkCodeLoading.value = false))
+		const res = await props.getTableData()
 		if (res.code === 0) {
 			linkCodeTableData.value = res.data.records
 		}
 	} catch (error) {
 		linkCodeTableData.value = []
-		linkCodeLoading.value = false
 	} finally {
-		linkCodeLoading.value = false
+		loading.value = false
 	}
 }
 
@@ -133,7 +132,7 @@ const radioChangeEvent: VxeTableEvents.RadioChange<any> = ({ row }) => (currRadi
 
 // 获取选择的关联补货单对话框表格行数据
 const getSelectedRowData = () => {
-	const $table = linkCodeTableRef.value
+	const $table = tableRef.value
 	const $unitTable = linkCodeUnitTableRef.value
 	if ($table && $unitTable) {
 		const currRadioRow = $table.getRadioRecord()
@@ -142,12 +141,12 @@ const getSelectedRowData = () => {
 		console.log("currUnitRows", currUnitRows)
 
 		emit("getSelectedLinkCode", { ...currRadioRow, items: currUnitRows })
+		dialogVisible.value = false
 	}
 }
 
 // 对话框关闭
 const onClose = () => {
-	linkCodeDialogVisible.value = false
 	currRadioRowItems.value = []
 	linkCodeTableData.value = []
 }

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

@@ -1,13 +1,5 @@
 <template>
-	<!-- 商品选择对话框 -->
-	<el-dialog
-		v-model="erpSpuSelectDialogVisible"
-		title="选择商品"
-		width="80%"
-		:close-on-click-modal="false"
-		draggable
-		@close="erpSpuSelectDialogVisible = false"
-	>
+	<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">
@@ -16,8 +8,8 @@
 				<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 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>
@@ -26,10 +18,10 @@
 			</el-form>
 		</el-row>
 		<el-table
-			ref="spuMultipleTableRef"
+			ref="tableRef"
 			border
-			:data="spuDataList"
-			v-loading="spuListLoading"
+			:data="dataList"
+			v-loading="loading"
 			:row-key="(row:any) => row.id"
 			:reserve-selection="true"
 			@row-click="rowClick"
@@ -72,8 +64,8 @@
 		/>
 
 		<template #footer>
-			<el-button @click="erpSpuSelectDialogVisible = false">取消</el-button>
-			<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="spuListLoading">确认</el-button>
+			<el-button @click="dialogVisible = false">取消</el-button>
+			<el-button type="primary" @click="dialogConfirm" :disabled="loading">确认</el-button>
 		</template>
 	</el-dialog>
 </template>
@@ -84,66 +76,65 @@ import { getErpSpuPage } from "/@/api/supermarketerp/common"
 import { getSupermarketCategory, getSupermarketBrand } from "/@/api/supermarketerp/supermarketSpu"
 import { useDict } from "/@/hooks/dict"
 
-const erpSpuSelectDialogVisible = defineModel()
-const emit = defineEmits(["getSelectedSpuRows"])
+const emit = defineEmits(["getSelectedRows"])
 const props = withDefaults(
 	defineProps<{
-		selectedSpuRows: any[]
+		selectedRows: any[]
 	}>(),
 	{
-		selectedSpuRows: () => [],
+		selectedRows: () => [],
 	},
 )
 
 const { status } = useDict("status")
 const queryRef = ref()
-const spuMultipleTableRef = ref() // 对话框多选表格ref
-const spuListLoading = ref(false) // 对话框多选表格loading
+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 spuDataList = ref<any[]>([]) // 对话框多选表格数据
+const dataList = ref<any[]>([]) // 对话框多选表格数据
 const supermarketCategory = ref<any>([]) // 商品分类
 const supermarketBrand = ref<any>([]) // 商品品牌
 
 // 打开弹窗
 const openDialog = async () => {
-	erpSpuSelectDialogVisible.value = true
+	dialogVisible.value = true
 	getDataListAndSelect()
 }
 
 // 获取商品数据并且勾选
 const getDataListAndSelect = async () => {
-	spuListLoading.value = true
+	loading.value = true
 	try {
-		const { code, data } = await getErpSpuPage(queryForm).finally(() => (spuListLoading.value = false))
+		const { code, data } = await getErpSpuPage(queryForm)
 		if (code === 0) {
-			spuDataList.value = data.records.map((item: any) => ({ ...item, erpSpuId: item.id }))
+			dataList.value = data.records.map((item: any) => ({ ...item, erpSpuId: item.id }))
 			total.value = data.total
 
 			// 保存当前已选中的行
-			// const currentSelectedRows = spuMultipleTableRef.value?.getSelectionRows() || []
+			// const currentSelectedRows = tableRef.value?.getSelectionRows() || []
 			// 清空表格数据后重新设置
 			nextTick(() => {
 				// 合并当前页面数据中的已选行和之前保存的已选行
-				const rowsToSelect = [...props.selectedSpuRows.filter((row) => spuDataList.value.some((item) => item.erpSpuId === row.erpSpuId))]
+				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 = spuDataList.value.find((item) => item.erpSpuId === row.erpSpuId)
-					targetRow && spuMultipleTableRef.value?.toggleRowSelection(targetRow, true)
+					const targetRow = dataList.value.find((item) => item.erpSpuId === row.erpSpuId)
+					targetRow && tableRef.value?.toggleRowSelection(targetRow, true)
 				})
 			})
 		}
 	} catch (error) {
-		spuDataList.value = []
-		spuListLoading.value = false
+		dataList.value = []
 	} finally {
-		spuListLoading.value = false
+		loading.value = false
 	}
 }
 
@@ -165,24 +156,22 @@ const resetQuery = () => {
 // 点击商品列表表格行
 const rowClick = (row: any) => {
 	console.log("clicked-row", row)
-	spuMultipleTableRef.value.toggleRowSelection(row)
+	tableRef.value.toggleRowSelection(row)
 }
 
 // 商品选择对话框确认
-const handleSelectDialogConfirm = () => {
-	const $table = spuMultipleTableRef.value
+const dialogConfirm = () => {
+	const $table = tableRef.value
 	if ($table) {
 		// 获取所有选中的行，包括其他页面的选择
 		const currentSelectedRows = $table.getSelectionRows()
 		// 合并当前选中的行和之前已选的行（排除当前页面的行）
 		const allSelectedRows = [
 			...currentSelectedRows,
-			...props.selectedSpuRows.filter((row) => !spuDataList.value.some((item) => item.erpSpuId === row.erpSpuId)),
+			...props.selectedRows.filter((row) => !dataList.value.some((item) => item.erpSpuId === row.erpSpuId)),
 		]
-		// 去重
-		// const uniqueSelectedRows = Array.from(new Map(allSelectedRows.map((row) => [row.erpSpuId, row])).values())
-
-		emit("getSelectedSpuRows", allSelectedRows)
+		dialogVisible.value = false
+		emit("getSelectedRows", allSelectedRows)
 	}
 }