调整采购入库和修改可拖拽部门树组件

src/views/supermarketerp/smErpCgPlan/cgPlanOption.vue

@@ -101,7 +101,12 @@
 					</template>
 				</vxe-column> -->
 
-				<vxe-column field="productName" title="库存商品" />
+				<vxe-column field="productName" title="库存商品">
+					<template #default="{ row }">
+						<span v-if="row.productName">{{ row.productName }}</span>
+						<span v-else>{{ row.erpSpuId && state.erpSpuSimpleAll.find((item: any) => item.id === row.erpSpuId).productName }}</span>
+					</template>
+				</vxe-column>
 
 				<vxe-column field="unitId" title="包装单位" :edit-render="{}">
 					<template #edit="{ row }">
@@ -166,7 +171,7 @@
 				<el-tooltip effect="dark" content="返回列表页面" placement="top">
 					<el-button type="primary" plain @click="router.back()">取消</el-button>
 				</el-tooltip>
-				<el-tooltip effect="dark" content="保存并清空数据" placement="top">
+				<el-tooltip v-if="!baseDataForm.id" effect="dark" content="保存并清空数据" placement="top">
 					<el-button type="primary" plain @click="onContinueAdd">继续添加</el-button>
 				</el-tooltip>
 				<el-tooltip effect="dark" content="保存并返回列表页面" placement="top">
@@ -251,14 +256,14 @@ import { ref, reactive, computed, onMounted } from "vue"
 import { useRouter, useRoute } from "vue-router"
 import { useDict } from "/@/hooks/dict"
 import { useMessage } from "/@/hooks/message"
-import { getObj, addObj, putObj, getPlanCode, getCgPlanSpuPage } from "/@/api/supermarketerp/smErpCgPlan"
+import { getObj, addObj, putObj, getPlanCode, getCgPlanSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/smErpCgPlan"
 import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
 import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
 import { storePrice } from "/@/utils/formatMoney"
 
 // 基本表单数据类型
 interface FormVO {
-	id?: string
+	id: string | undefined
 	planCode: string
 	orderNumber: string
 	planDate: string
@@ -300,15 +305,19 @@ const baseDataForm = reactive<FormVO>({
 })
 const state = reactive<{
 	editableTableData: RowVO[]
+	erpSpuItemsMemo: RowVO[]
 	selectedRowsErpSpuIds: string[]
 	insertedRowNumber: number
+	erpSpuSimpleAll: any
 	spuSelectDialogVisible: boolean
 	spuDataList: any[]
 	selectedSpuObjs: any[]
 }>({
 	editableTableData: [], // 可编辑表格数据
+	erpSpuItemsMemo: [], // 请求到的可编辑表格商品数据的缓存
 	selectedRowsErpSpuIds: [], // 可编辑表格已选行的ErpSpuId
 	insertedRowNumber: 0, // 可编辑表格插入行的行号
+	erpSpuSimpleAll: [], // 简要商品列表
 
 	spuSelectDialogVisible: false, // 商品选择对话框开关
 	spuDataList: [], // 商品列表
@@ -333,31 +342,26 @@ const getInitData = async () => {
 	baseDataForm.id = undefined
 	const id = route.query.id as string
 	if (id) {
-		// 获取数据
 		loading.value = true
-		getObj(id)
-			.then((res: any) => {
-				Object.assign(baseDataForm, {
-					id: res.data.id,
-					planCode: res.data.planCode,
-					orderNumber: res.data.orderNumber,
-					planDate: res.data.planDate,
-					supplierId: res.data.supplierId,
-					handlerUserId: res.data.handlerUserId,
-					remark: res.data.remark,
-				})
-				state.editableTableData = res.data.items
-			})
-			.finally(() => {
-				loading.value = false
-			})
+		// 获取采购计划数据 & 获取简要商品列表
+		const [cgPlanData, erpSpuSimpleAll] = await Promise.allSettled([getObj(id), getErpSpuSimpleAll()])
+			.then((results) => results.map((result) => (result.status === "fulfilled" ? result.value : null)))
+			.finally(() => (loading.value = false))
 
-		// 获取货商选项 & 获取简要商品列表
-		// const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode()]).then((results) =>
-		// 	results.map((result) => (result.status === "fulfilled" ? result.value : null)),
-		// )
-		// supplierTypeOptions && supplierTypeOptions.code === 0 && (supplierTypeDict.value = supplierTypeOptions.data)
-		// planCode && planCode.code === 0 && (baseDataForm.planCode = planCode.data)
+		if (cgPlanData && cgPlanData.code === 0) {
+			Object.assign(baseDataForm, {
+				id: cgPlanData.data.id,
+				planCode: cgPlanData.data.planCode,
+				orderNumber: cgPlanData.data.orderNumber,
+				planDate: cgPlanData.data.planDate,
+				supplierId: cgPlanData.data.supplierId,
+				handlerUserId: cgPlanData.data.handlerUserId,
+				remark: cgPlanData.data.remark,
+			})
+			state.editableTableData = cgPlanData.data.items
+			state.erpSpuItemsMemo = cgPlanData.data.items
+		}
+		erpSpuSimpleAll && erpSpuSimpleAll.code === 0 && (state.erpSpuSimpleAll = erpSpuSimpleAll.data)
 	}
 
 	// 获取货商选项 & 获取采购计划编号
@@ -401,6 +405,7 @@ const addEvent = () => {
 // 底部表格行新增
 const pushEvent = () => {
 	const newRow: RowVO = {
+		id: "",
 		erpSpuId: "",
 		quantity: null,
 		unitPrice: null,
@@ -420,6 +425,7 @@ const pushEvent = () => {
 // 在指定行插入
 const insertEvent = () => {
 	const newRow: RowVO = {
+		id: "",
 		erpSpuId: "",
 		quantity: null,
 		unitPrice: null,
@@ -442,7 +448,7 @@ const removeSelectRowEvent = () => {
 	if ($table) {
 		const selectRecords = $table.getCheckboxRecords()
 		if (selectRecords.length > 0) {
-			state.editableTableData = state.editableTableData.filter((item) => !selectRecords.some((row) => row.id === item.id))
+			state.editableTableData = state.editableTableData.filter((item) => !selectRecords.some((row) => row.erpSpuId === item.erpSpuId))
 		}
 	}
 }
@@ -456,10 +462,10 @@ const handleClickSpuSelect = async () => {
 	try {
 		const { code, data } = await getCgPlanSpuPage().finally(() => (spuListLoading.value = false))
 		if (code === 0) {
-			state.spuDataList = data.records
+			state.spuDataList = data.records.map((item: RowVO) => ({ ...item, erpSpuId: item.id }))
 
 			// 勾选已经选择的商品
-			const target = state.spuDataList.filter((row: any) => state.selectedSpuObjs.some((item: any) => row.id === item.id))
+			const target = state.spuDataList.filter((row: any) => state.selectedSpuObjs.some((item: any) => row.erpSpuId === item.erpSpuId))
 			target.forEach((row: any) => nextTick(() => spuMultipleTableRef.value!.toggleRowSelection(row)))
 		}
 	} catch (error) {
@@ -470,12 +476,12 @@ const handleClickSpuSelect = async () => {
 
 // 点击商品列表表格行
 const rowClick = (row: any) => {
-	state.selectedSpuObjs.findIndex((item: any) => item.id === row.id) === -1
+	state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId) === -1
 		? // state.selectedSpuObjs.indexOf(row) === -1
 		  state.selectedSpuObjs.push(row)
 		: state.selectedSpuObjs.splice(
 				// state.selectedSpuObjs.indexOf(row)
-				state.selectedSpuObjs.findIndex((item: any) => item.id === row.id),
+				state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId),
 				1,
 		  )
 	console.log("click-select", state.selectedSpuObjs)
@@ -484,12 +490,12 @@ const rowClick = (row: any) => {
 
 // 选中商品列表表格行
 const handleSelect = (selectedRows: any[], row: any) => {
-	state.selectedSpuObjs.findIndex((item: any) => item.id === row.id) === -1
+	state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId) === -1
 		? // state.selectedSpuObjs.indexOf(row) === -1
 		  state.selectedSpuObjs.push(row)
 		: state.selectedSpuObjs.splice(
 				// state.selectedSpuObjs.indexOf(row)
-				state.selectedSpuObjs.findIndex((item: any) => item.id === row.id),
+				state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId),
 				1,
 		  )
 	console.log("check-select", state.selectedSpuObjs)
@@ -499,13 +505,13 @@ const handleSelect = (selectedRows: any[], row: any) => {
 const handleSelectAll = (selectedRows: any[]) => {
 	if (selectedRows.length > 0) {
 		selectedRows.forEach((row: any) => {
-			if (state.selectedSpuObjs.findIndex((item: any) => item.id === row.id) === -1) {
+			if (state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId) === -1) {
 				state.selectedSpuObjs.push(row)
 			}
 		})
 	} else {
 		state.spuDataList.forEach((row: any) => {
-			const index = state.selectedSpuObjs.findIndex((item: any) => item.id === row.id)
+			const index = state.selectedSpuObjs.findIndex((item: any) => item.erpSpuId === row.erpSpuId)
 			if (index !== -1) {
 				state.selectedSpuObjs.splice(index, 1)
 			}
@@ -525,19 +531,21 @@ const handleSelectDialogConfirm = () => {
 
 	// 筛选新勾选的项
 	const addedItems = state.selectedSpuObjs
-		.map((item: any) => ({ ...item, erpSpuId: item.id }))
-		.filter((item: any) => !state.editableTableData.some((editableTableItem: RowVO) => editableTableItem.id === item.id))
+		.filter((item: any) => !state.editableTableData.some((editableTableItem: RowVO) => editableTableItem.erpSpuId === item.erpSpuId))
+		.map((addItem) => {
+			if (state.erpSpuItemsMemo.some((item: any) => item.erpSpuId === addItem.erpSpuId)) return addItem
+			return { ...addItem, isNew: true }
+		}) // 为新增的数据项添加isNew标志，若该项原本已经存在，则不添加isNew标志
 	// 仅添加新勾选的项
-	// state.editableTableData.push(...addedItems)
 	state.editableTableData = [...state.editableTableData, ...addedItems]
 
 	// 筛选取消勾选的项
 	const removedItems = state.editableTableData.filter(
-		(item: any) => !state.selectedSpuObjs.some((selectedItem: any) => selectedItem.id === item.id),
+		(item: any) => !state.selectedSpuObjs.some((selectedItem: any) => selectedItem.erpSpuId === item.erpSpuId),
 	)
 	// 仅移除取消勾选的项
 	state.editableTableData = state.editableTableData.filter(
-		(item: any) => !removedItems.some((removeItem: any) => removeItem.id === item.id),
+		(item: any) => !removedItems.some((removeItem: any) => removeItem.erpSpuId === item.erpSpuId),
 	)
 	// state.editableTableData.push(item)
 	// nextTick(() => {
@@ -555,7 +563,7 @@ const cgPlanSpuItems = computed(() => {
 	return state.editableTableData.map((item: any) => {
 		const unit = item.erpUnitVos.find((unitItem: any) => unitItem.id === item.unitId)
 		return {
-			id: "",
+			id: item.isNew ? undefined : item.id,
 			erpSpuId: item.erpSpuId,
 			quantity: item.quantity,
 			unitPrice: unit.purchasePrice ? storePrice(unit?.purchasePrice) : 0,
@@ -622,17 +630,18 @@ const submitData = async () => {
 	try {
 		loading.value = true
 
-		console.log("提交的数据：", {
+		const _pa = {
 			...baseDataForm,
 			items: cgPlanSpuItems.value,
-		})
+		}
 
-		const res = await addObj({
-			...baseDataForm,
-			items: cgPlanSpuItems.value,
-		}).finally(() => (loading.value = false))
+		console.log("提交的数据：", _pa)
+
+		const res = baseDataForm.id
+			? await putObj(_pa).finally(() => (loading.value = false))
+			: await addObj(_pa).finally(() => (loading.value = false))
 		if (res.code === 0) {
-			useMessage().success("添加成功")
+			useMessage().success(baseDataForm.id ? "修改成功" : "添加成功")
 			return true
 		} else {
 			useMessage().error(res.msg)
@@ -661,15 +670,4 @@ const clearData = () => {
 onMounted(() => {
 	getInitData()
 })
-// const onSubmit = async () => {
-// 	try {
-// 		loading.value = true
-// 		form.id ? await putObj(form) : await addObj(form)
-// 		useMessage().success(form.id ? "修改成功" : "添加成功")
-// 	} catch (err: any) {
-// 		useMessage().error(err.msg)
-// 	} finally {
-// 		loading.value = false
-// 	}
-// }
 </script>