From 7c12f58069fc4d6d9f4f2a4a9a5dbe3b1f91339d Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Mon, 24 Feb 2025 21:29:23 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9B=B6=E5=94=AE=E5=87=BA=E5=BA=93=E5=92=8C?=
 =?UTF-8?q?=E9=9B=B6=E5=94=AE=E9=80=80=E8=B4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../smErpCgBack/smErpCgBackOption.vue         |   2 +-
 .../smErpInventoryRecordsItem/form.vue        | 191 ------
 .../smErpInventoryRecordsItem/index.vue       | 165 -----
 .../smErpInventoryRecordsOption.vue           |   2 +-
 .../components/linkCgCodeDialog.vue           | 114 ++++
 .../supermarketerp/smErpRetailBack/index.vue  | 181 ++++++
 .../smErpRetailBack/smErpRetailBackOption.vue | 584 ++++++++++++++++++
 .../components/linkCgCodeDialog.vue           | 114 ++++
 .../smErpRetailDelivery/index.vue             | 185 ++++++
 .../smErpRetailDeliveryOption.vue             | 583 +++++++++++++++++
 10 files changed, 1763 insertions(+), 358 deletions(-)
 delete mode 100644 src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsItem/form.vue
 delete mode 100644 src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsItem/index.vue
 create mode 100644 src/views/supermarketerp/smErpRetailBack/components/linkCgCodeDialog.vue
 create mode 100644 src/views/supermarketerp/smErpRetailBack/index.vue
 create mode 100644 src/views/supermarketerp/smErpRetailBack/smErpRetailBackOption.vue
 create mode 100644 src/views/supermarketerp/smErpRetailDelivery/components/linkCgCodeDialog.vue
 create mode 100644 src/views/supermarketerp/smErpRetailDelivery/index.vue
 create mode 100644 src/views/supermarketerp/smErpRetailDelivery/smErpRetailDeliveryOption.vue

diff --git a/src/views/supermarketerp/smErpCgBack/smErpCgBackOption.vue b/src/views/supermarketerp/smErpCgBack/smErpCgBackOption.vue
index 13b0072..68914b8 100644
--- a/src/views/supermarketerp/smErpCgBack/smErpCgBackOption.vue
+++ b/src/views/supermarketerp/smErpCgBack/smErpCgBackOption.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="layout-padding">
 		<div v-loading="loading" class="layout-padding-auto layout-padding-view" style="overflow: scroll">
-			<el-form ref="baseDataFormRef" :model="baseDataForm" :rules="dataRules" formDialogRef label-width="100px">
+			<el-form ref="baseDataFormRef" :model="baseDataForm" :rules="dataRules" label-width="100px">
 				<div class="flex flex-wrap">
 					<el-form-item label="单据编号" prop="inventoryCode">
 						<el-input v-model.trim="baseDataForm.inventoryCode" readonly style="width: 200px" />
diff --git a/src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsItem/form.vue b/src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsItem/form.vue
deleted file mode 100644
index 1365033..0000000
--- a/src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsItem/form.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<template>
-	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
-		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
-			<el-row :gutter="24">
-				<el-col :span="12" class="mb20">
-					<el-form-item label="单据类型(字典inventory_type)" prop="inventoryType">
-						<el-input v-model="form.inventoryType" placeholder="请输入单据类型(字典inventory_type)" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="商品id" prop="erpSpuId">
-						<el-input v-model="form.erpSpuId" placeholder="请输入商品id" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="商户编号" prop="merchantId">
-						<el-input v-model="form.merchantId" placeholder="请输入商户编号" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="部门id" prop="deptId">
-						<el-input v-model="form.deptId" placeholder="请输入部门id" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="出入库数量" prop="quantity">
-						<el-input v-model="form.quantity" placeholder="请输入出入库数量" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="单价" prop="unitPrice">
-						<el-input v-model="form.unitPrice" placeholder="请输入单价" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="总金额" prop="totalAmount">
-						<el-input v-model="form.totalAmount" placeholder="请输入总金额" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="税率%" prop="taxRate">
-						<el-input v-model="form.taxRate" placeholder="请输入税率%" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="税前金额" prop="taxAmount">
-						<el-input v-model="form.taxAmount" placeholder="请输入税前金额" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="货商" prop="supplierId">
-						<el-input v-model="form.supplierId" placeholder="请输入货商" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="备注" prop="remark">
-						<el-input v-model="form.remark" placeholder="请输入备注" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="订单类型(1入库 2出库)" prop="orderType">
-						<el-input v-model="form.orderType" placeholder="请输入订单类型(1入库 2出库)" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="包装单位id" prop="unitId">
-						<el-input v-model="form.unitId" placeholder="请输入包装单位id" />
-					</el-form-item>
-				</el-col>
-
-				<el-col :span="12" class="mb20">
-					<el-form-item label="出入库关联id" prop="inventoryId">
-						<el-input v-model="form.inventoryId" placeholder="请输入出入库关联id" />
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-		<template #footer>
-			<span class="dialog-footer">
-				<el-button @click="visible = false">取消</el-button>
-				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
-			</span>
-		</template>
-	</el-dialog>
-</template>
-
-<script setup lang="ts" name="SmErpInventoryRecordsItemDialog">
-import { useDict } from "/@/hooks/dict"
-import { useMessage } from "/@/hooks/message"
-import { getObj, addObj, putObj } from "/@/api/supermarketerp/smErpInventoryRecordsItem"
-import { rule } from "/@/utils/validate"
-const emit = defineEmits(["refresh"])
-
-// 定义变量内容
-const dataFormRef = ref()
-const visible = ref(false)
-const loading = ref(false)
-// 定义字典
-const { erp_order_type, inventory_type } = useDict("erp_order_type", "inventory_type")
-
-// 提交表单数据
-const form = reactive({
-	id: "",
-	inventoryType: "",
-	erpSpuId: "",
-	merchantId: "",
-	deptId: "",
-	quantity: "",
-	unitPrice: "",
-	totalAmount: "",
-	taxRate: "",
-	taxAmount: "",
-	supplierId: "",
-	remark: "",
-	orderType: "",
-	unitId: "",
-	inventoryId: "",
-})
-
-// 定义校验规则
-const dataRules = ref({
-	erpSpuId: [{ required: true, message: "商品id不能为空", trigger: "blur" }],
-	quantity: [{ required: true, message: "出入库数量不能为空", trigger: "blur" }],
-	unitId: [{ required: true, message: "包装单位id不能为空", trigger: "blur" }],
-})
-
-// 打开弹窗
-const openDialog = (id: string) => {
-	visible.value = true
-	form.id = ""
-
-	// 重置表单数据
-	nextTick(() => {
-		dataFormRef.value?.resetFields()
-	})
-
-	// 获取smErpInventoryRecordsItem信息
-	if (id) {
-		form.id = id
-		getsmErpInventoryRecordsItemData(id)
-	}
-}
-
-// 提交
-const onSubmit = async () => {
-	const valid = await dataFormRef.value.validate().catch(() => {})
-	if (!valid) return false
-
-	try {
-		loading.value = true
-		form.id ? await putObj(form) : await addObj(form)
-		useMessage().success(form.id ? "修改成功" : "添加成功")
-		visible.value = false
-		emit("refresh")
-	} catch (err: any) {
-		useMessage().error(err.msg)
-	} finally {
-		loading.value = false
-	}
-}
-
-// 初始化表单数据
-const getsmErpInventoryRecordsItemData = (id: string) => {
-	// 获取数据
-	loading.value = true
-	getObj(id)
-		.then((res: any) => {
-			Object.assign(form, res.data)
-		})
-		.finally(() => {
-			loading.value = false
-		})
-}
-
-// 暴露变量
-defineExpose({
-	openDialog,
-})
-</script>
diff --git a/src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsItem/index.vue b/src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsItem/index.vue
deleted file mode 100644
index 5adfc7b..0000000
--- a/src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsItem/index.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-	<div class="layout-padding">
-		<div class="layout-padding-auto layout-padding-view">
-			<el-row>
-				<div class="mb8" style="width: 100%">
-					<el-button
-						icon="folder-add"
-						type="primary"
-						class="ml10"
-						@click="formDialogRef.openDialog()"
-						v-auth="'supermarket_smErpInventoryRecordsItem_add'"
-					>
-						新 增
-					</el-button>
-					<el-button
-						plain
-						:disabled="multiple"
-						icon="Delete"
-						type="primary"
-						v-auth="'supermarket_smErpInventoryRecordsItem_del'"
-						@click="handleDelete(selectObjs)"
-					>
-						删除
-					</el-button>
-					<right-toolbar
-						v-model:showSearch="showSearch"
-						:export="'supermarket_smErpInventoryRecordsItem_export'"
-						@exportExcel="exportExcel"
-						class="ml10 mr20"
-						style="float: right"
-						@queryTable="getDataList"
-					></right-toolbar>
-				</div>
-			</el-row>
-			<el-table
-				:data="state.dataList"
-				v-loading="state.loading"
-				border
-				:cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle"
-				@selection-change="selectionChangHandle"
-				@sort-change="sortChangeHandle"
-			>
-				<el-table-column type="selection" width="40" align="center" />
-				<el-table-column type="index" label="#" width="40" />
-				<el-table-column prop="inventoryType" label="单据类型(字典inventory_type)" show-overflow-tooltip>
-					<template #default="scope">
-						<dict-tag :options="inventory_type" :value="scope.row.inventoryType"></dict-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="erpSpuId" label="商品id" show-overflow-tooltip />
-				<el-table-column prop="merchantId" label="商户编号" show-overflow-tooltip />
-				<el-table-column prop="deptId" label="部门id" show-overflow-tooltip />
-				<el-table-column prop="quantity" label="出入库数量" show-overflow-tooltip />
-				<el-table-column prop="unitPrice" label="单价" show-overflow-tooltip />
-				<el-table-column prop="totalAmount" label="总金额" show-overflow-tooltip />
-				<el-table-column prop="taxRate" label="税率%" show-overflow-tooltip />
-				<el-table-column prop="taxAmount" label="税前金额" show-overflow-tooltip />
-				<el-table-column prop="supplierId" label="货商" show-overflow-tooltip />
-				<el-table-column prop="remark" label="备注" show-overflow-tooltip />
-				<el-table-column prop="orderType" label="订单类型(1入库 2出库)" show-overflow-tooltip>
-					<template #default="scope">
-						<dict-tag :options="erp_order_type" :value="scope.row.orderType"></dict-tag>
-					</template>
-				</el-table-column>
-				<el-table-column prop="unitId" label="包装单位id" show-overflow-tooltip />
-				<el-table-column prop="inventoryId" label="出入库关联id" show-overflow-tooltip />
-				<el-table-column label="操作" width="150">
-					<template #default="scope">
-						<el-button
-							icon="edit-pen"
-							text
-							type="primary"
-							v-auth="'supermarket_smErpInventoryRecordsItem_edit'"
-							@click="formDialogRef.openDialog(scope.row.id)"
-							>编辑</el-button
-						>
-						<el-button
-							icon="delete"
-							text
-							type="primary"
-							v-auth="'supermarket_smErpInventoryRecordsItem_del'"
-							@click="handleDelete([scope.row.id])"
-							>删除</el-button
-						>
-					</template>
-				</el-table-column>
-			</el-table>
-			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-		</div>
-
-		<!-- 编辑、新增  -->
-		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-	</div>
-</template>
-
-<script setup lang="ts" name="systemSmErpInventoryRecordsItem">
-import { BasicTableProps, useTable } from "/@/hooks/table"
-import { fetchList, delObjs } from "/@/api/supermarketerp/smErpInventoryRecordsItem"
-import { useMessage, useMessageBox } from "/@/hooks/message"
-import { useDict } from "/@/hooks/dict"
-
-// 引入组件
-const FormDialog = defineAsyncComponent(() => import("./form.vue"))
-// 定义查询字典
-
-const { erp_order_type, inventory_type } = useDict("erp_order_type", "inventory_type")
-// 定义变量内容
-const formDialogRef = ref()
-// 搜索变量
-const queryRef = ref()
-const showSearch = ref(true)
-// 多选变量
-const selectObjs = ref([]) as any
-const multiple = ref(true)
-
-const state: BasicTableProps = reactive<BasicTableProps>({
-	queryForm: {},
-	pageList: fetchList,
-})
-
-//  table hook
-const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
-
-// 清空搜索条件
-const resetQuery = () => {
-	// 清空搜索条件
-	queryRef.value?.resetFields()
-	// 清空多选
-	selectObjs.value = []
-	getDataList()
-}
-
-// 导出excel
-const exportExcel = () => {
-	downBlobFile(
-		"/supermarket/smErpInventoryRecordsItem/export",
-		Object.assign(state.queryForm, { ids: selectObjs }),
-		"smErpInventoryRecordsItem.xlsx",
-	)
-}
-
-// 多选事件
-const selectionChangHandle = (objs: { id: string }[]) => {
-	selectObjs.value = objs.map(({ id }) => id)
-	multiple.value = !objs.length
-}
-
-// 删除操作
-const handleDelete = async (ids: string[]) => {
-	try {
-		await useMessageBox().confirm("此操作将永久删除")
-	} catch {
-		return
-	}
-
-	try {
-		await delObjs(ids)
-		getDataList()
-		useMessage().success("删除成功")
-	} catch (err: any) {
-		useMessage().error(err.msg)
-	}
-}
-</script>
diff --git a/src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsOption.vue b/src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsOption.vue
index 66eb5c9..6274c42 100644
--- a/src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsOption.vue
+++ b/src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsOption.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="layout-padding">
 		<div v-loading="loading" class="layout-padding-auto layout-padding-view" style="overflow: scroll">
-			<el-form ref="baseDataFormRef" :model="baseDataForm" :rules="dataRules" formDialogRef label-width="100px">
+			<el-form ref="baseDataFormRef" :model="baseDataForm" :rules="dataRules" label-width="100px">
 				<div class="flex flex-wrap">
 					<el-form-item label="单据编号" prop="inventoryCode">
 						<el-input v-model.trim="baseDataForm.inventoryCode" readonly style="width: 200px" />
diff --git a/src/views/supermarketerp/smErpRetailBack/components/linkCgCodeDialog.vue b/src/views/supermarketerp/smErpRetailBack/components/linkCgCodeDialog.vue
new file mode 100644
index 0000000..8b1f927
--- /dev/null
+++ b/src/views/supermarketerp/smErpRetailBack/components/linkCgCodeDialog.vue
@@ -0,0 +1,114 @@
+<template>
+	<!-- 关联采购申请单对话框 -->
+	<el-dialog v-model="linkCgCodeDialogVisible" title="选择采购单" width="70%" :close-on-click-modal="false" draggable @close="onClose">
+		<vxe-table
+			v-show="step === 0"
+			ref="linkCgPlanTableRef"
+			border
+			v-loading="linkCodeLoading"
+			:row-config="{ isCurrent: true, isHover: true }"
+			:radio-config="{ labelField: '', trigger: 'row' }"
+			:data="cgddPage"
+			@radio-change="radioChangeEvent"
+		>
+			<vxe-column type="radio" width="60" align="center"></vxe-column>
+			<vxe-column field="id" title="id" align="center" width="200"></vxe-column>
+			<vxe-column field="planCode" title="编号" align="center" width="200"></vxe-column>
+			<vxe-column field="planDate" title="单据日期" align="center" width="200"></vxe-column>
+			<vxe-column field="handlerUserId" title="经办人" align="center" width="100"></vxe-column>
+			<vxe-column field="checkStatus" title="审批状态" align="center" width="100"></vxe-column>
+			<vxe-column field="remark" title="备注" show-overflow align="center" min-width="100"></vxe-column>
+		</vxe-table>
+		<!-- <pagination
+			@size-change="sizeChangeHandle"
+			@current-change="currentChangeHandle"
+			v-model:current-page="foodQueryForm.current"
+			v-model:page-size="foodQueryForm.size"
+			:total="total"
+		/> -->
+		<vxe-table
+			v-show="step === 1"
+			ref="linkCgPlanSpuTableRef"
+			border
+			:row-config="{ isCurrent: true, isHover: true }"
+			:checkbox-config="{ trigger: 'row' }"
+			:data="currRadioRowItems"
+		>
+			<vxe-column type="checkbox" width="60" align="center"></vxe-column>
+			<vxe-column field="erpSpuId" title="erpSpuId" align="center" width="200"></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 field="purchasePrice" title="进价" align="center" width="100"></vxe-column>
+			<vxe-column field="unitPrice" title="进价" align="center" width="100"></vxe-column>
+			<vxe-column field="totalAmount" title="累计总金额" align="center" width="100"></vxe-column>
+			<vxe-column field="remark" title="备注" show-overflow align="center" min-width="100"></vxe-column>
+		</vxe-table>
+
+		<template #footer>
+			<el-button @click="linkCgCodeDialogVisible = 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>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="linkCgCodeDialog">
+import { ref } from "vue"
+import { getCgddPage } from "/@/api/supermarketerp/smErpInventoryRecords"
+import { VxeTableEvents } from "vxe-table"
+
+const linkCgCodeDialogVisible = defineModel()
+const emit = defineEmits(["getSelectedCgPlan"])
+
+const linkCodeLoading = ref(false) // 关联采购申请单对话框加载状态
+const linkCgPlanTableRef = ref() // 关联补货单对话框表格1ref
+const linkCgPlanSpuTableRef = ref() // 关联补货单对话框表格2ref
+const cgddPage = ref([]) // 采购申请列表数据
+const currRadioRowItems = ref([]) // 当前单选的表格行的items
+const step = ref(0) // 选择步骤
+
+// 打开关联补货单对话框
+const openLinkCodeDialog = async () => {
+	linkCgCodeDialogVisible.value = true
+	step.value = 0
+	linkCodeLoading.value = true
+	try {
+		const res = await getCgddPage().finally(() => (linkCodeLoading.value = false))
+		if (res.code === 0) {
+			cgddPage.value = res.data.records
+		}
+	} catch (error) {
+		cgddPage.value = []
+		linkCodeLoading.value = false
+	}
+}
+
+// 单选时
+const radioChangeEvent: VxeTableEvents.RadioChange<any> = ({ row }) => (currRadioRowItems.value = row.items)
+
+// 获取选择的关联补货单对话框表格行数据
+const getSelectedRowData = () => {
+	const $table = linkCgPlanTableRef.value
+	const $SpuTable = linkCgPlanSpuTableRef.value
+	if ($table && $SpuTable) {
+		const currRadioRow = $table.getRadioRecord()
+		console.log("currRadioRow", currRadioRow)
+		const currSpuRows = $SpuTable.getCheckboxRecords()
+		console.log("currSpuRows", currSpuRows)
+
+		emit("getSelectedCgPlan", { ...currRadioRow, items: currSpuRows })
+	}
+}
+
+// 对话框关闭
+const onClose = () => {
+	linkCgCodeDialogVisible.value = false
+	currRadioRowItems.value = []
+	cgddPage.value = []
+}
+
+defineExpose({
+	openLinkCodeDialog,
+})
+</script>
diff --git a/src/views/supermarketerp/smErpRetailBack/index.vue b/src/views/supermarketerp/smErpRetailBack/index.vue
new file mode 100644
index 0000000..316789b
--- /dev/null
+++ b/src/views/supermarketerp/smErpRetailBack/index.vue
@@ -0,0 +1,181 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row v-show="showSearch">
+				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+					<el-form-item label="单据编号" prop="inventoryCode">
+						<el-input placeholder="请输入单据编号" v-model="state.queryForm.inventoryCode" />
+					</el-form-item>
+					<el-form-item label="单据日期" prop="inventoryDate">
+						<el-date-picker
+							type="date"
+							placeholder="请输入单据日期"
+							v-model="state.queryForm.inventoryDate"
+							fomat="yyyy-MM-dd"
+							value-format="yyyy-MM-dd"
+						/>
+					</el-form-item>
+					<el-form-item label="经办人" prop="handlerUserId">
+						<SelectHandlerUser v-model.trim="state.queryForm.handlerUserId" placeholder="请选择经办人" style="width: 200px" />
+					</el-form-item>
+					<el-form-item label="审批状态" prop="checkStatus">
+						<el-select v-model="state.queryForm.checkStatus" placeholder="请选择审批状态">
+							<el-option :label="item.label" :value="item.value" v-for="(item, index) in check_status" :key="index" />
+						</el-select>
+					</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-row>
+				<div class="mb8" style="width: 100%">
+					<el-button
+						icon="folder-add"
+						type="primary"
+						class="ml10"
+						@click="handleClickCreateInventoryRecord()"
+						v-auth="'supermarket_smErpInventoryRecords_add'"
+					>
+						新 增
+					</el-button>
+					<el-button
+						plain
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						v-auth="'supermarket_smErpInventoryRecords_del'"
+						@click="handleDelete(selectObjs)"
+					>
+						删 除
+					</el-button>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="'supermarket_smErpInventoryRecords_export'"
+						@exportExcel="exportExcel"
+						class="ml10 mr20"
+						style="float: right"
+						@queryTable="getDataList"
+					/>
+				</div>
+			</el-row>
+
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
+				<el-table-column type="selection" width="40" align="center" />
+				<el-table-column type="index" label="#" width="50" />
+				<el-table-column prop="inventoryCode" label="单据编号" show-overflow-tooltip />
+				<el-table-column prop="inventoryDate" label="单据日期" show-overflow-tooltip />
+				<el-table-column prop="inventoryDate" label="入库商品" show-overflow-tooltip />
+				<el-table-column prop="handlerUserId" label="经办人" show-overflow-tooltip />
+				<el-table-column prop="checkStatus" label="审批状态" show-overflow-tooltip>
+					<template #default="scope">
+						<dict-tag :options="check_status" :value="scope.row.checkStatus"></dict-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="supplierId" label="货商" show-overflow-tooltip />
+				<el-table-column prop="remark" label="备注" show-overflow-tooltip />
+				<el-table-column prop="totalAmount" label="入库总金额" show-overflow-tooltip />
+				<el-table-column label="操作" width="150">
+					<template #default="scope">
+						<el-button
+							icon="edit-pen"
+							text
+							type="primary"
+							v-auth="'supermarket_smErpInventoryRecords_edit'"
+							@click="handleClickEditInventoryRecord(scope.row.id)"
+						>
+							编辑
+						</el-button>
+						<el-button
+							icon="delete"
+							text
+							type="primary"
+							v-auth="'supermarket_smErpInventoryRecords_del'"
+							@click="handleDelete([scope.row.id])"
+						>
+							删除
+						</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="systemSmErpInventoryRecords">
+import { useRouter } from "vue-router"
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { fetchList, delObjs } from "/@/api/supermarketerp/smErpInventoryRecords"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useDict } from "/@/hooks/dict"
+
+const router = useRouter()
+const { erp_order_type, inventory_type, check_status } = useDict("erp_order_type", "inventory_type", "check_status")
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+	queryForm: {},
+	pageList: fetchList,
+})
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+	// 清空搜索条件
+	queryRef.value?.resetFields()
+	// 清空多选
+	selectObjs.value = []
+	getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+	downBlobFile("/supermarket/smErpRetailBack/export", Object.assign(state.queryForm, { ids: selectObjs }), "smErpRetailBack.xlsx")
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
+}
+
+// 点击创建出库入库记录表
+const handleClickCreateInventoryRecord = () => router.push({ path: "/supermarketerp/smErpRetailBack/smErpRetailBackOption" })
+// 点击编辑出库入库记录表
+const handleClickEditInventoryRecord = (id: string) =>
+	router.push({ path: "/supermarketerp/smErpRetailBack/smErpRetailBackOption", query: { id } })
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+	try {
+		await useMessageBox().confirm("此操作将永久删除")
+	} catch {
+		return
+	}
+
+	try {
+		await delObjs(ids)
+		getDataList()
+		useMessage().success("删除成功")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}
+</script>
diff --git a/src/views/supermarketerp/smErpRetailBack/smErpRetailBackOption.vue b/src/views/supermarketerp/smErpRetailBack/smErpRetailBackOption.vue
new file mode 100644
index 0000000..81002b2
--- /dev/null
+++ b/src/views/supermarketerp/smErpRetailBack/smErpRetailBackOption.vue
@@ -0,0 +1,584 @@
+<template>
+	<div class="layout-padding">
+		<div v-loading="loading" class="layout-padding-auto layout-padding-view" style="overflow: scroll">
+			<el-form ref="baseDataFormRef" :model="baseDataForm" :rules="dataRules" label-width="100px">
+				<div class="flex flex-wrap">
+					<el-form-item label="单据编号" prop="inventoryCode">
+						<el-input v-model.trim="baseDataForm.inventoryCode" readonly style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="单据日期" prop="inventoryDate">
+						<el-input v-model.trim="baseDataForm.inventoryDate" readonly style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="关联采购订单" prop="linkCode">
+						<el-input
+							v-model="baseDataForm.linkCode"
+							:suffix-icon="Search"
+							@click="handleClickLinkCode"
+							readonly
+							placeholder="请选择采购订单"
+							style="width: 200px"
+						/>
+					</el-form-item>
+
+					<el-form-item label="经办人" prop="handlerUserId">
+						<SelectHandlerUser v-model.trim="baseDataForm.handlerUserId" placeholder="请选择经办人" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="审批状态" prop="checkStatus">
+						<el-input v-model.trim="baseDataForm.checkStatus" placeholder="请输入审批状态" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="货商" prop="supplierId">
+						<el-select v-model="baseDataForm.supplierId" placeholder="请选择货商" style="width: 200px">
+							<el-option v-for="item in supplierTypeDict" :key="item?.id" :label="item?.typeName" :value="item?.id" />
+						</el-select>
+					</el-form-item>
+
+					<el-form-item label="备注" prop="remark">
+						<el-input v-model.trim="baseDataForm.remark" placeholder="请输入备注" style="width: 200px" />
+					</el-form-item>
+				</div>
+			</el-form>
+
+			<el-row class="my-3">
+				<el-button @click="addEvent">新增（顶部）</el-button>
+				<el-button @click="pushEvent">新增（尾部）</el-button>
+				<el-button @click="insertEvent">
+					在第
+					<el-input-number
+						@click.stop
+						v-model="state.insertedRowNumber"
+						:min="0"
+						:max="state.editableTableData.length"
+						:precision="0"
+						size="small"
+						controls-position="right"
+						style="min-width: 50px; margin: 0 5px"
+					/>
+					行新增
+				</el-button>
+				<el-button @click="removeSelectRowEvent" :disabled="state.selectedRowsErpSpuIds.length <= 0">删除选中</el-button>
+				<el-button @click="clearData">清空数据</el-button>
+				<el-button @click="handleClickSpuSelect">商品选择</el-button>
+			</el-row>
+
+			<div class="flex">
+				<div class="flex-auto">
+					<vxe-table
+						ref="editableTableRef"
+						border
+						:loading="loading"
+						show-overflow
+						min-height="200"
+						:edit-config="{
+							trigger: 'click',
+							mode: 'cell',
+							beforeEditMethod({ row, column }:any) {
+								// 禁止编辑
+								if (column.property === '') {
+									return false
+								}
+								return true
+							},
+						}"
+						:column-config="{ resizable: true }"
+						:row-config="{ isHover: true }"
+						:resizable-config="{ dragMode: 'fixed' }"
+						:data="state.editableTableData"
+						:edit-rules="validRules"
+						@checkbox-all="selectChangeEvent"
+						@checkbox-change="selectChangeEvent"
+						size="mini"
+						align="center"
+					>
+						<vxe-column type="checkbox" width="40" fixed="left" />
+
+						<vxe-column type="seq" width="50" fixed="left" />
+
+						<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 }">
+								<el-select v-model="row.unitId" placeholder="请选择包装单位">
+									<el-option
+										v-if="row.erpUnitVos?.length > 0"
+										v-for="item in row.erpUnitVos"
+										:key="item.id"
+										:label="item.unit"
+										:value="item.id"
+									/>
+									<el-option v-else :key="row.id" :label="row.unit" :value="row.id" />
+								</el-select>
+							</template>
+							<template #default="{ row }">
+								<span v-if="row.unitId">{{ row.unit ?? row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.unit }}</span>
+								<span v-else style="color: #c0c4cf">请选择</span>
+							</template>
+						</vxe-column>
+
+						<vxe-column field="quantity" title="数量" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+							<template #edit="{ row }">
+								<el-input v-model="row.quantity" />
+							</template>
+						</vxe-column>
+
+						<vxe-column field="unitPrice" title="进价">
+							<template #default="{ row }">
+								{{
+									row.purchasePrice
+										? displayPrice(row.purchasePrice)
+										: displayPrice(row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice)
+								}}
+							</template>
+						</vxe-column>
+
+						<vxe-column field="totalAmount" title="累计总金额">
+							<template #default="{ row }">
+								<span v-if="row.unitId && row.quantity && row.unit && !row.erpUnitVos">
+									{{ displayPrice(row.quantity * parseFloat(row.purchasePrice)) }}
+								</span>
+								<span v-if="row.unitId && row.quantity && row.erpUnitVos">
+									{{ displayPrice(Number(row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice) * row.quantity) }}
+								</span>
+							</template>
+						</vxe-column>
+
+						<vxe-column field="remark" title="备注" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+							<template #edit="{ row }">
+								<el-input v-model="row.remark" />
+							</template>
+						</vxe-column>
+					</vxe-table>
+				</div>
+				<div class="w-52">
+					<el-card class="h-full flex items-center">
+						<el-form :model="receiveAmountForm" :rules="receiveAmountFormRules" label-width="100px">
+							<el-form-item label="单据金额：" prop="totalAmount">
+								<span class="w-full text-purple-600 border-b border-b-black text-xl h-8 text-center">{{ displayPrice(totalAmount) }}</span>
+							</el-form-item>
+							<el-form-item class="receive-amount-input" label="收款金额：" prop="receiveAmount">
+								<el-input v-model.trim="receiveAmountForm.receiveAmount" />
+							</el-form-item>
+							<el-form-item label="找零：" prop="backAmount">
+								<span class="w-full text-green-600 border-b border-b-black text-xl h-8 text-center">
+									{{ receiveAmountForm.receiveAmount && displayPrice(Number(totalAmount) - storePrice(receiveAmountForm.receiveAmount)) }}
+								</span>
+							</el-form-item>
+						</el-form>
+					</el-card>
+				</div>
+			</div>
+
+			<el-row class="my-3">
+				<el-tooltip effect="dark" content="返回列表页面" placement="top">
+					<el-button type="primary" plain @click="router.back()">取消</el-button>
+				</el-tooltip>
+				<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">
+					<el-button type="primary" plain @click="onSave">保存</el-button>
+				</el-tooltip>
+			</el-row>
+
+			<!-- 商品选择对话框 -->
+			<erpSpuSelectDialog
+				ref="erpSpuSelectDialogRef"
+				v-model="state.erpSpuSelectDialogVisible"
+				:selectedSpuRows="state.editableTableData"
+				@getSelectedSpuRows="getSelectedSpuRows"
+			/>
+
+			<!-- 关联采购申请单对话框 -->
+			<linkCgCodeDialog ref="linkCgCodeDialogRef" v-model="state.linkCgCodeDialogVisible" @getSelectedCgPlan="getSelectedCgPlan" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="cgPlanOption">
+import { ref, reactive, computed, onMounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/supermarketerp/smErpInventoryRecords"
+import { getPlanCode, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
+import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
+import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
+import { formatDate } from "/@/utils/formatTime"
+import { Search } from "@element-plus/icons-vue"
+import erpSpuSelectDialog from "/@/views/supermarketerp/components/erpSpuSelectDialog.vue"
+import linkCgCodeDialog from "/@/views/supermarketerp/smErpCgDd/components/linkCgCodeDialog.vue"
+import { displayPrice, storePrice } from "/@/utils/formatMoney"
+
+const router = useRouter()
+const route = useRoute()
+const loading = ref(false) // 采购计划加载
+const erpSpuSelectDialogRef = ref() // 商品选择对话框ref
+const linkCgCodeDialogRef = ref() // 关联采购申请单对话框ref
+const baseDataFormRef = ref() // 基本数据表单ref
+const editableTableRef = ref<VxeTableInstance<any>>() // 可编辑表格ref
+const supplierTypeDict = ref<any[]>([]) // 货商下拉选项
+// 基本信息表单数据
+const baseDataForm = reactive<any>({
+	id: "",
+	inventoryCode: "",
+	inventoryDate: formatDate(new Date(), "YYYY-mm-dd"),
+	handlerUserId: "",
+	checkStatus: "",
+	checkUserId: "",
+	checkTime: "",
+	supplierId: "",
+	remark: "",
+	orderType: "1",
+	totalAmount: "",
+})
+const state = reactive<{
+	editableTableData: any[]
+	erpSpuItemsMemo: any[]
+	selectedRowsErpSpuIds: string[]
+	insertedRowNumber: number
+	erpSpuSimpleAll: any
+	linkCodeVisible: boolean
+	erpSpuSelectDialogVisible: boolean
+	linkCgCodeDialogVisible: boolean
+}>({
+	editableTableData: [], // 可编辑表格数据
+	erpSpuItemsMemo: [], // 请求到的可编辑表格商品数据的缓存
+	selectedRowsErpSpuIds: [], // 可编辑表格已选行的ErpSpuId
+	insertedRowNumber: 0, // 可编辑表格插入行的行号
+	erpSpuSimpleAll: [], // 简要商品列表
+
+	linkCodeVisible: false, // 关联采购申请单对话框开关
+	erpSpuSelectDialogVisible: false, // 商品选择对话框开关
+	linkCgCodeDialogVisible: false, // 关联采购申请单对话框开关
+})
+// 合计金额表单数据
+const receiveAmountForm = reactive<{ receiveAmount: number }>({
+	receiveAmount: 0,
+})
+
+// 基本信息表单校验规则
+const dataRules = ref({
+	inventoryCode: [{ required: true, message: "出入库记录表编号不能为空", trigger: "blur" }],
+	inventoryDate: [{ required: true, message: "出入库记录表单据日期不能为空", trigger: "blur" }],
+	handlerUserId: [{ required: true, message: "经办人不能为空", trigger: "blur" }],
+	supplierId: [{ required: true, message: "货商不能为空", trigger: "blur" }],
+})
+
+// 可编辑表格校验规则
+const validRules = ref<VxeTablePropTypes.EditRules<any>>({
+	unitId: [{ required: true, message: "必须选择" }],
+	quantity: [{ required: true, type: "number", min: 1, max: 99, message: "数值范围1~99" }],
+})
+
+// 收款金额表单校验规则
+const receiveAmountFormRules = ref({
+	receiveAmount: [
+		{ required: true, message: "不能为空", trigger: "blur" },
+		{ pattern: /^\d+(\.\d{1,1})?$/, message: "格式错误" },
+	],
+})
+
+// 初始化数据
+const getInitData = async () => {
+	baseDataForm.id = undefined
+	const id = route.query.id as string
+	if (id) {
+		loading.value = true
+		// 获取采购计划数据 & 获取简要商品列表
+		const [cgPlanData] = await Promise.allSettled([getObj(id)])
+			.then((results) => results.map((result) => (result.status === "fulfilled" ? result.value : null)))
+			.finally(() => (loading.value = false))
+
+		if (cgPlanData && cgPlanData.code === 0) {
+			Object.assign(baseDataForm, cgPlanData.data)
+			state.editableTableData = cgPlanData.data.items
+			state.erpSpuItemsMemo = cgPlanData.data.items
+		}
+	}
+
+	// 获取货商选项 & 获取采购入库编号
+	const [erpSpuSimpleAll, supplierTypeOptions, planCode] = await Promise.allSettled([
+		getErpSpuSimpleAll(),
+		getSupplierTypeOptions(),
+		getPlanCode({ type: 3 }),
+	]).then((results) => results.map((result) => (result.status === "fulfilled" ? result.value : null)))
+	erpSpuSimpleAll && erpSpuSimpleAll.code === 0 && (state.erpSpuSimpleAll = erpSpuSimpleAll.data)
+	supplierTypeOptions && supplierTypeOptions.code === 0 && (supplierTypeDict.value = supplierTypeOptions.data)
+	planCode && planCode.code === 0 && (baseDataForm.inventoryCode = planCode.data)
+}
+
+// 点击关联采购申请编号
+const handleClickLinkCode = () => linkCgCodeDialogRef.value.openLinkCodeDialog()
+
+// 获取选择的采购申请
+const getSelectedCgPlan = (selectionRows: any) => {
+	console.log("被选择的关联数据", selectionRows)
+
+	baseDataForm.linkCode = selectionRows.planCode
+	state.editableTableData = selectionRows.items
+	state.erpSpuItemsMemo = selectionRows.items
+	state.linkCgCodeDialogVisible = false
+}
+
+// 顶部表格行新增
+const addEvent = () => {
+	const newRow: any = {
+		id: "",
+		erpSpuId: "",
+		quantity: null,
+		unitPrice: null,
+		totalAmount: null,
+		remark: "",
+		unitId: "",
+	}
+	state.editableTableData.unshift(newRow)
+	nextTick(() => {
+		const $table = editableTableRef.value
+		if ($table) {
+			$table.setEditRow(newRow)
+		}
+	})
+}
+
+// 底部表格行新增
+const pushEvent = () => {
+	const newRow: any = {
+		id: "",
+		erpSpuId: "",
+		quantity: null,
+		unitPrice: null,
+		totalAmount: null,
+		remark: "",
+		unitId: "",
+	}
+	state.editableTableData.push(newRow)
+	nextTick(() => {
+		const $table = editableTableRef.value
+		if ($table) {
+			$table.setEditRow(newRow)
+		}
+	})
+}
+
+// 在指定行插入
+const insertEvent = () => {
+	const newRow: any = {
+		id: "",
+		erpSpuId: "",
+		quantity: null,
+		unitPrice: null,
+		totalAmount: null,
+		remark: "",
+		unitId: "",
+	}
+	state.editableTableData.splice(state.insertedRowNumber, 0, newRow)
+	nextTick(() => {
+		const $table = editableTableRef.value
+		if ($table) {
+			$table.setEditRow(newRow)
+		}
+	})
+}
+
+// 删除选中的行
+const removeSelectRowEvent = () => {
+	const $table = editableTableRef.value
+	if ($table) {
+		const selectRecords = $table.getCheckboxRecords()
+		if (selectRecords.length > 0) {
+			state.editableTableData = state.editableTableData.filter((item) => !selectRecords.some((row) => row.erpSpuId === item.erpSpuId))
+		}
+	}
+}
+
+// 可编辑表格行勾选
+const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
+	const $table = editableTableRef.value
+	if ($table) {
+		const records = $table.getCheckboxRecords()
+		console.log(checked ? "勾选事件" : "取消事件", records)
+		state.selectedRowsErpSpuIds = records.map((item) => item.erpSpuId)
+	}
+}
+
+// 点击商品选择
+const handleClickSpuSelect = () => erpSpuSelectDialogRef.value.openDialog()
+
+// 获取被选择的商品行
+const getSelectedSpuRows = (selectionRows: any) => {
+	console.log("被选择的商品行", selectionRows)
+
+	// 筛选新勾选的项
+	const addedItems = selectionRows
+		.filter((item: any) => !state.editableTableData.some((editableTableItem: any) => editableTableItem.erpSpuId === item.erpSpuId))
+		.map((addItem: any) => {
+			const index = state.erpSpuItemsMemo.findIndex((item: any) => item.erpSpuId === addItem.erpSpuId)
+			if (index !== -1) return state.erpSpuItemsMemo[index]
+			return { ...addItem, isNew: true }
+		}) // 为新增的数据项添加isNew，若该项原本已经存在，则不添加isNew
+	// 仅添加新勾选的项
+	state.editableTableData = [...state.editableTableData, ...addedItems]
+
+	// 筛选取消勾选的项
+	const removedItems = state.editableTableData.filter(
+		(item: any) => !selectionRows.some((selectedItem: any) => selectedItem.erpSpuId === item.erpSpuId),
+	)
+	// 仅移除取消勾选的项
+	state.editableTableData = state.editableTableData.filter(
+		(item: any) => !removedItems.some((removeItem: any) => removeItem.erpSpuId === item.erpSpuId),
+	)
+	// state.editableTableData.push(item)
+	// nextTick(() => {
+	// 	const $table = editableTableRef.value
+	// 	if ($table) {
+	// 		$table.setRow(item)
+	// 	}
+	// })
+	state.erpSpuSelectDialogVisible = false
+	console.log("state.editableTableData", state.editableTableData)
+}
+
+// 整理数据
+const cgPlanSpuItems = computed(() => {
+	return state.editableTableData.map((item: any) => {
+		if (item.erpUnitVos) {
+			const unit = item.erpUnitVos.find((unitItem: any) => unitItem.id === item.unitId)
+			return {
+				id: item.isNew ? undefined : item.id,
+				erpSpuId: item.erpSpuId,
+				quantity: item.quantity,
+				unitPrice: unit?.purchasePrice ? Number(unit?.purchasePrice) : 0,
+				totalAmount: unit?.purchasePrice && item.quantity ? Number(unit.purchasePrice) * item.quantity : 0,
+				remark: item.remark,
+				unitId: item.unitId,
+			}
+		} else {
+			return {
+				id: item.isNew ? undefined : item.id,
+				erpSpuId: item.erpSpuId,
+				quantity: item.quantity,
+				unitPrice: item.unitPrice ? Number(item.unitPrice) : 0,
+				totalAmount: item.unitPrice ? Number(item.unitPrice) * item.quantity : 0,
+				remark: item.remark,
+				unitId: item.unitId,
+			}
+		}
+	})
+})
+
+// 计算单据金额
+const totalAmount = computed(() => cgPlanSpuItems.value.reduce((pre, cur) => pre + cur.totalAmount, 0))
+
+// 点击继续添加
+const onContinueAdd = async () => {
+	console.log("baseDataForm", baseDataForm)
+	console.log("state.editableTableData", state.editableTableData)
+	;(await baseDataFormValidate()) && checkSelectSpu() && (await editableTableValidate()) && (await submitData()) && clearData()
+}
+
+// 点击保存
+const onSave = async () => {
+	console.log("baseDataForm", baseDataForm)
+	console.log("state.editableTableData", state.editableTableData)
+	;(await baseDataFormValidate()) &&
+		checkSelectSpu() &&
+		(await editableTableValidate()) &&
+		(await submitData()) &&
+		clearData() &&
+		router.replace({ path: "/supermarketerp/smErpRetailBack/index" })
+}
+
+// 校验基本数据表单 成功返回 true 失败返回 undefined
+const baseDataFormValidate = async () => {
+	const valid = await baseDataFormRef.value.validate().catch(() => {})
+	return valid
+}
+
+// 校验是否选择了商品 成功返回 true 失败返回 false
+const checkSelectSpu = () => {
+	if (state.editableTableData.length <= 0) {
+		useMessage().warning("请选择商品")
+		return false
+	} else {
+		return true
+	}
+}
+
+// 校验可编辑表格 成功返回 true 失败返回 false
+const editableTableValidate = async () => {
+	// 全量校验
+	const $table = editableTableRef.value
+	if ($table) {
+		const errMap = await $table.validate(true)
+		if (errMap) {
+			console.log("全量校验失败！")
+			return false
+		} else {
+			console.log("全量校验成功！")
+			return true
+		}
+	}
+}
+
+// 提交数据 成功返回 true 失败返回 false
+const submitData = async () => {
+	try {
+		loading.value = true
+
+		const _pa = {
+			...baseDataForm,
+			items: cgPlanSpuItems.value,
+		}
+
+		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(baseDataForm.id ? "修改成功" : "添加成功")
+			return true
+		} else {
+			useMessage().error(res.msg)
+			return false
+		}
+	} catch (err: any) {
+		useMessage().error(err.msg)
+		loading.value = false
+		return false
+	}
+}
+
+// 清空填写的数据 返回 true
+const clearData = () => {
+	for (const key in baseDataForm) {
+		if (key === "id" || key === "inventoryCode" || key === "inventoryDate") continue
+		baseDataForm[key] = ""
+	}
+	state.insertedRowNumber = 0
+	state.editableTableData = []
+	state.erpSpuItemsMemo = []
+	state.selectedRowsErpSpuIds = []
+	return true
+}
+
+onMounted(() => {
+	getInitData()
+})
+</script>
+
+<style scoped>
+::v-deep .receive-amount-input .el-input__inner {
+	color: red !important;
+	font-weight: bold !important;
+	font-size: large;
+	text-align: center;
+}
+</style>
diff --git a/src/views/supermarketerp/smErpRetailDelivery/components/linkCgCodeDialog.vue b/src/views/supermarketerp/smErpRetailDelivery/components/linkCgCodeDialog.vue
new file mode 100644
index 0000000..8b1f927
--- /dev/null
+++ b/src/views/supermarketerp/smErpRetailDelivery/components/linkCgCodeDialog.vue
@@ -0,0 +1,114 @@
+<template>
+	<!-- 关联采购申请单对话框 -->
+	<el-dialog v-model="linkCgCodeDialogVisible" title="选择采购单" width="70%" :close-on-click-modal="false" draggable @close="onClose">
+		<vxe-table
+			v-show="step === 0"
+			ref="linkCgPlanTableRef"
+			border
+			v-loading="linkCodeLoading"
+			:row-config="{ isCurrent: true, isHover: true }"
+			:radio-config="{ labelField: '', trigger: 'row' }"
+			:data="cgddPage"
+			@radio-change="radioChangeEvent"
+		>
+			<vxe-column type="radio" width="60" align="center"></vxe-column>
+			<vxe-column field="id" title="id" align="center" width="200"></vxe-column>
+			<vxe-column field="planCode" title="编号" align="center" width="200"></vxe-column>
+			<vxe-column field="planDate" title="单据日期" align="center" width="200"></vxe-column>
+			<vxe-column field="handlerUserId" title="经办人" align="center" width="100"></vxe-column>
+			<vxe-column field="checkStatus" title="审批状态" align="center" width="100"></vxe-column>
+			<vxe-column field="remark" title="备注" show-overflow align="center" min-width="100"></vxe-column>
+		</vxe-table>
+		<!-- <pagination
+			@size-change="sizeChangeHandle"
+			@current-change="currentChangeHandle"
+			v-model:current-page="foodQueryForm.current"
+			v-model:page-size="foodQueryForm.size"
+			:total="total"
+		/> -->
+		<vxe-table
+			v-show="step === 1"
+			ref="linkCgPlanSpuTableRef"
+			border
+			:row-config="{ isCurrent: true, isHover: true }"
+			:checkbox-config="{ trigger: 'row' }"
+			:data="currRadioRowItems"
+		>
+			<vxe-column type="checkbox" width="60" align="center"></vxe-column>
+			<vxe-column field="erpSpuId" title="erpSpuId" align="center" width="200"></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 field="purchasePrice" title="进价" align="center" width="100"></vxe-column>
+			<vxe-column field="unitPrice" title="进价" align="center" width="100"></vxe-column>
+			<vxe-column field="totalAmount" title="累计总金额" align="center" width="100"></vxe-column>
+			<vxe-column field="remark" title="备注" show-overflow align="center" min-width="100"></vxe-column>
+		</vxe-table>
+
+		<template #footer>
+			<el-button @click="linkCgCodeDialogVisible = 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>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="linkCgCodeDialog">
+import { ref } from "vue"
+import { getCgddPage } from "/@/api/supermarketerp/smErpInventoryRecords"
+import { VxeTableEvents } from "vxe-table"
+
+const linkCgCodeDialogVisible = defineModel()
+const emit = defineEmits(["getSelectedCgPlan"])
+
+const linkCodeLoading = ref(false) // 关联采购申请单对话框加载状态
+const linkCgPlanTableRef = ref() // 关联补货单对话框表格1ref
+const linkCgPlanSpuTableRef = ref() // 关联补货单对话框表格2ref
+const cgddPage = ref([]) // 采购申请列表数据
+const currRadioRowItems = ref([]) // 当前单选的表格行的items
+const step = ref(0) // 选择步骤
+
+// 打开关联补货单对话框
+const openLinkCodeDialog = async () => {
+	linkCgCodeDialogVisible.value = true
+	step.value = 0
+	linkCodeLoading.value = true
+	try {
+		const res = await getCgddPage().finally(() => (linkCodeLoading.value = false))
+		if (res.code === 0) {
+			cgddPage.value = res.data.records
+		}
+	} catch (error) {
+		cgddPage.value = []
+		linkCodeLoading.value = false
+	}
+}
+
+// 单选时
+const radioChangeEvent: VxeTableEvents.RadioChange<any> = ({ row }) => (currRadioRowItems.value = row.items)
+
+// 获取选择的关联补货单对话框表格行数据
+const getSelectedRowData = () => {
+	const $table = linkCgPlanTableRef.value
+	const $SpuTable = linkCgPlanSpuTableRef.value
+	if ($table && $SpuTable) {
+		const currRadioRow = $table.getRadioRecord()
+		console.log("currRadioRow", currRadioRow)
+		const currSpuRows = $SpuTable.getCheckboxRecords()
+		console.log("currSpuRows", currSpuRows)
+
+		emit("getSelectedCgPlan", { ...currRadioRow, items: currSpuRows })
+	}
+}
+
+// 对话框关闭
+const onClose = () => {
+	linkCgCodeDialogVisible.value = false
+	currRadioRowItems.value = []
+	cgddPage.value = []
+}
+
+defineExpose({
+	openLinkCodeDialog,
+})
+</script>
diff --git a/src/views/supermarketerp/smErpRetailDelivery/index.vue b/src/views/supermarketerp/smErpRetailDelivery/index.vue
new file mode 100644
index 0000000..d1e18ea
--- /dev/null
+++ b/src/views/supermarketerp/smErpRetailDelivery/index.vue
@@ -0,0 +1,185 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row v-show="showSearch">
+				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
+					<el-form-item label="单据编号" prop="inventoryCode">
+						<el-input placeholder="请输入单据编号" v-model="state.queryForm.inventoryCode" />
+					</el-form-item>
+					<el-form-item label="单据日期" prop="inventoryDate">
+						<el-date-picker
+							type="date"
+							placeholder="请输入单据日期"
+							v-model="state.queryForm.inventoryDate"
+							fomat="yyyy-MM-dd"
+							value-format="yyyy-MM-dd"
+						/>
+					</el-form-item>
+					<el-form-item label="经办人" prop="handlerUserId">
+						<SelectHandlerUser v-model.trim="state.queryForm.handlerUserId" placeholder="请选择经办人" style="width: 200px" />
+					</el-form-item>
+					<el-form-item label="审批状态" prop="checkStatus">
+						<el-select v-model="state.queryForm.checkStatus" placeholder="请选择审批状态">
+							<el-option :label="item.label" :value="item.value" v-for="(item, index) in check_status" :key="index" />
+						</el-select>
+					</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-row>
+				<div class="mb8" style="width: 100%">
+					<el-button
+						icon="folder-add"
+						type="primary"
+						class="ml10"
+						@click="handleClickCreateInventoryRecord()"
+						v-auth="'supermarket_smErpInventoryRecords_add'"
+					>
+						新 增
+					</el-button>
+					<el-button
+						plain
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						v-auth="'supermarket_smErpInventoryRecords_del'"
+						@click="handleDelete(selectObjs)"
+					>
+						删 除
+					</el-button>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="'supermarket_smErpInventoryRecords_export'"
+						@exportExcel="exportExcel"
+						class="ml10 mr20"
+						style="float: right"
+						@queryTable="getDataList"
+					/>
+				</div>
+			</el-row>
+
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
+				<el-table-column type="selection" width="40" align="center" />
+				<el-table-column type="index" label="#" width="50" />
+				<el-table-column prop="inventoryCode" label="单据编号" show-overflow-tooltip />
+				<el-table-column prop="inventoryDate" label="单据日期" show-overflow-tooltip />
+				<el-table-column prop="inventoryDate" label="入库商品" show-overflow-tooltip />
+				<el-table-column prop="handlerUserId" label="经办人" show-overflow-tooltip />
+				<el-table-column prop="checkStatus" label="审批状态" show-overflow-tooltip>
+					<template #default="scope">
+						<dict-tag :options="check_status" :value="scope.row.checkStatus"></dict-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="supplierId" label="货商" show-overflow-tooltip />
+				<el-table-column prop="remark" label="备注" show-overflow-tooltip />
+				<el-table-column prop="totalAmount" label="入库总金额" show-overflow-tooltip />
+				<el-table-column label="操作" width="150">
+					<template #default="scope">
+						<el-button
+							icon="edit-pen"
+							text
+							type="primary"
+							v-auth="'supermarket_smErpInventoryRecords_edit'"
+							@click="handleClickEditInventoryRecord(scope.row.id)"
+						>
+							编辑
+						</el-button>
+						<el-button
+							icon="delete"
+							text
+							type="primary"
+							v-auth="'supermarket_smErpInventoryRecords_del'"
+							@click="handleDelete([scope.row.id])"
+						>
+							删除
+						</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="systemSmErpInventoryRecords">
+import { useRouter } from "vue-router"
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { fetchList, delObjs } from "/@/api/supermarketerp/smErpInventoryRecords"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useDict } from "/@/hooks/dict"
+
+const router = useRouter()
+const { erp_order_type, inventory_type, check_status } = useDict("erp_order_type", "inventory_type", "check_status")
+// 搜索变量
+const queryRef = ref()
+const showSearch = ref(true)
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+	queryForm: {},
+	pageList: fetchList,
+})
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
+
+// 清空搜索条件
+const resetQuery = () => {
+	// 清空搜索条件
+	queryRef.value?.resetFields()
+	// 清空多选
+	selectObjs.value = []
+	getDataList()
+}
+
+// 导出excel
+const exportExcel = () => {
+	downBlobFile(
+		"/supermarket/smErpInventoryRecords/export",
+		Object.assign(state.queryForm, { ids: selectObjs }),
+		"smErpInventoryRecords.xlsx",
+	)
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
+}
+
+// 点击创建出库入库记录表
+const handleClickCreateInventoryRecord = () => router.push({ path: "/supermarketerp/smErpRetailDelivery/smErpRetailDeliveryOption" })
+// 点击编辑出库入库记录表
+const handleClickEditInventoryRecord = (id: string) =>
+	router.push({ path: "/supermarketerp/smErpRetailDelivery/smErpRetailDeliveryOption", query: { id } })
+
+// 删除操作
+const handleDelete = async (ids: string[]) => {
+	try {
+		await useMessageBox().confirm("此操作将永久删除")
+	} catch {
+		return
+	}
+
+	try {
+		await delObjs(ids)
+		getDataList()
+		useMessage().success("删除成功")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}
+</script>
diff --git a/src/views/supermarketerp/smErpRetailDelivery/smErpRetailDeliveryOption.vue b/src/views/supermarketerp/smErpRetailDelivery/smErpRetailDeliveryOption.vue
new file mode 100644
index 0000000..44840f7
--- /dev/null
+++ b/src/views/supermarketerp/smErpRetailDelivery/smErpRetailDeliveryOption.vue
@@ -0,0 +1,583 @@
+<template>
+	<div class="layout-padding">
+		<div v-loading="loading" class="layout-padding-auto layout-padding-view" style="overflow: scroll">
+			<el-form ref="baseDataFormRef" :model="baseDataForm" :rules="dataRules" label-width="100px">
+				<div class="flex flex-wrap">
+					<el-form-item label="单据编号" prop="inventoryCode">
+						<el-input v-model.trim="baseDataForm.inventoryCode" readonly style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="单据日期" prop="inventoryDate">
+						<el-input v-model.trim="baseDataForm.inventoryDate" readonly style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="关联采购订单" prop="linkCode">
+						<el-input
+							v-model="baseDataForm.linkCode"
+							:suffix-icon="Search"
+							@click="handleClickLinkCode"
+							readonly
+							placeholder="请选择采购订单"
+							style="width: 200px"
+						/>
+					</el-form-item>
+
+					<el-form-item label="经办人" prop="handlerUserId">
+						<SelectHandlerUser v-model.trim="baseDataForm.handlerUserId" placeholder="请选择经办人" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="审批状态" prop="checkStatus">
+						<el-input v-model.trim="baseDataForm.checkStatus" placeholder="请输入审批状态" style="width: 200px" />
+					</el-form-item>
+
+					<el-form-item label="货商" prop="supplierId">
+						<el-select v-model="baseDataForm.supplierId" placeholder="请选择货商" style="width: 200px">
+							<el-option v-for="item in supplierTypeDict" :key="item?.id" :label="item?.typeName" :value="item?.id" />
+						</el-select>
+					</el-form-item>
+
+					<el-form-item label="备注" prop="remark">
+						<el-input v-model.trim="baseDataForm.remark" placeholder="请输入备注" style="width: 200px" />
+					</el-form-item>
+				</div>
+			</el-form>
+
+			<el-row class="my-3">
+				<el-button @click="addEvent">新增（顶部）</el-button>
+				<el-button @click="pushEvent">新增（尾部）</el-button>
+				<el-button @click="insertEvent">
+					在第
+					<el-input-number
+						@click.stop
+						v-model="state.insertedRowNumber"
+						:min="0"
+						:max="state.editableTableData.length"
+						:precision="0"
+						size="small"
+						controls-position="right"
+						style="min-width: 50px; margin: 0 5px"
+					/>
+					行新增
+				</el-button>
+				<el-button @click="removeSelectRowEvent" :disabled="state.selectedRowsErpSpuIds.length <= 0">删除选中</el-button>
+				<el-button @click="clearData">清空数据</el-button>
+				<el-button @click="handleClickSpuSelect">商品选择</el-button>
+			</el-row>
+
+			<div class="flex">
+				<div class="flex-auto">
+					<vxe-table
+						ref="editableTableRef"
+						border
+						:loading="loading"
+						show-overflow
+						min-height="200"
+						:edit-config="{
+							trigger: 'click',
+							mode: 'cell',
+							beforeEditMethod({ row, column }:any) {
+								// 禁止编辑
+								if (column.property === '') {
+									return false
+								}
+								return true
+							},
+						}"
+						:column-config="{ resizable: true }"
+						:row-config="{ isHover: true }"
+						:resizable-config="{ dragMode: 'fixed' }"
+						:data="state.editableTableData"
+						:edit-rules="validRules"
+						@checkbox-all="selectChangeEvent"
+						@checkbox-change="selectChangeEvent"
+						size="mini"
+						align="center"
+					>
+						<vxe-column type="checkbox" width="40" fixed="left" />
+
+						<vxe-column type="seq" width="50" fixed="left" />
+
+						<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 }">
+								<el-select v-model="row.unitId" placeholder="请选择包装单位">
+									<el-option
+										v-if="row.erpUnitVos?.length > 0"
+										v-for="item in row.erpUnitVos"
+										:key="item.id"
+										:label="item.unit"
+										:value="item.id"
+									/>
+									<el-option v-else :key="row.id" :label="row.unit" :value="row.id" />
+								</el-select>
+							</template>
+							<template #default="{ row }">
+								<span v-if="row.unitId">{{ row.unit ?? row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.unit }}</span>
+								<span v-else style="color: #c0c4cf">请选择</span>
+							</template>
+						</vxe-column>
+
+						<vxe-column field="quantity" title="数量" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+							<template #edit="{ row }">
+								<el-input v-model="row.quantity" />
+							</template>
+						</vxe-column>
+
+						<vxe-column field="unitPrice" title="进价">
+							<template #default="{ row }">
+								{{
+									row.purchasePrice
+										? displayPrice(row.purchasePrice)
+										: displayPrice(row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice)
+								}}
+							</template>
+						</vxe-column>
+
+						<vxe-column field="totalAmount" title="累计总金额">
+							<template #default="{ row }">
+								<span v-if="row.unitId && row.quantity && row.unit && !row.erpUnitVos">
+									{{ displayPrice(row.quantity * parseFloat(row.purchasePrice)) }}
+								</span>
+								<span v-if="row.unitId && row.quantity && row.erpUnitVos">
+									{{ displayPrice(Number(row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice) * row.quantity) }}
+								</span>
+							</template>
+						</vxe-column>
+
+						<vxe-column field="remark" title="备注" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+							<template #edit="{ row }">
+								<el-input v-model="row.remark" />
+							</template>
+						</vxe-column>
+					</vxe-table>
+				</div>
+				<div class="w-52">
+					<el-card class="h-full flex items-center">
+						<el-form :model="receiveAmountForm" :rules="receiveAmountFormRules" label-width="100px">
+							<el-form-item label="单据金额：" prop="totalAmount">
+								<span class="w-full text-purple-600 border-b border-b-black text-xl h-8 text-center">{{ displayPrice(totalAmount) }}</span>
+							</el-form-item>
+							<el-form-item class="receive-amount-input" label="收款金额：" prop="receiveAmount">
+								<el-input v-model.trim="receiveAmountForm.receiveAmount" />
+							</el-form-item>
+							<el-form-item label="找零：" prop="backAmount">
+								<span class="w-full text-green-600 border-b border-b-black text-xl h-8 text-center">
+									{{ receiveAmountForm.receiveAmount && displayPrice(Number(totalAmount) - storePrice(receiveAmountForm.receiveAmount)) }}
+								</span>
+							</el-form-item>
+						</el-form>
+					</el-card>
+				</div>
+			</div>
+
+			<el-row class="my-3">
+				<el-tooltip effect="dark" content="返回列表页面" placement="top">
+					<el-button type="primary" plain @click="router.back()">取消</el-button>
+				</el-tooltip>
+				<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">
+					<el-button type="primary" plain @click="onSave">保存</el-button>
+				</el-tooltip>
+			</el-row>
+
+			<!-- 商品选择对话框 -->
+			<erpSpuSelectDialog
+				ref="erpSpuSelectDialogRef"
+				v-model="state.erpSpuSelectDialogVisible"
+				:selectedSpuRows="state.editableTableData"
+				@getSelectedSpuRows="getSelectedSpuRows"
+			/>
+
+			<!-- 关联采购申请单对话框 -->
+			<linkCgCodeDialog ref="linkCgCodeDialogRef" v-model="state.linkCgCodeDialogVisible" @getSelectedCgPlan="getSelectedCgPlan" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="cgPlanOption">
+import { ref, reactive, computed, onMounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/supermarketerp/smErpInventoryRecords"
+import { getPlanCode, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
+import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
+import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
+import { formatDate } from "/@/utils/formatTime"
+import { Search } from "@element-plus/icons-vue"
+import erpSpuSelectDialog from "/@/views/supermarketerp/components/erpSpuSelectDialog.vue"
+import linkCgCodeDialog from "/@/views/supermarketerp/smErpCgDd/components/linkCgCodeDialog.vue"
+import { displayPrice, storePrice } from "/@/utils/formatMoney"
+
+const router = useRouter()
+const route = useRoute()
+const loading = ref(false) // 采购计划加载
+const erpSpuSelectDialogRef = ref() // 商品选择对话框ref
+const linkCgCodeDialogRef = ref() // 关联采购申请单对话框ref
+const baseDataFormRef = ref() // 基本数据表单ref
+const editableTableRef = ref<VxeTableInstance<any>>() // 可编辑表格ref
+const supplierTypeDict = ref<any[]>([]) // 货商下拉选项
+// 基本信息表单数据
+const baseDataForm = reactive<any>({
+	id: "",
+	inventoryCode: "",
+	inventoryDate: formatDate(new Date(), "YYYY-mm-dd"),
+	handlerUserId: "",
+	checkStatus: "",
+	checkUserId: "",
+	checkTime: "",
+	supplierId: "",
+	remark: "",
+	orderType: "1",
+	totalAmount: "",
+})
+const state = reactive<{
+	editableTableData: any[]
+	erpSpuItemsMemo: any[]
+	selectedRowsErpSpuIds: string[]
+	insertedRowNumber: number
+	erpSpuSimpleAll: any
+	linkCodeVisible: boolean
+	erpSpuSelectDialogVisible: boolean
+	linkCgCodeDialogVisible: boolean
+}>({
+	editableTableData: [], // 可编辑表格数据
+	erpSpuItemsMemo: [], // 请求到的可编辑表格商品数据的缓存
+	selectedRowsErpSpuIds: [], // 可编辑表格已选行的ErpSpuId
+	insertedRowNumber: 0, // 可编辑表格插入行的行号
+	erpSpuSimpleAll: [], // 简要商品列表
+
+	linkCodeVisible: false, // 关联采购申请单对话框开关
+	erpSpuSelectDialogVisible: false, // 商品选择对话框开关
+	linkCgCodeDialogVisible: false, // 关联采购申请单对话框开关
+})
+// 合计金额表单数据
+const receiveAmountForm = reactive<{ receiveAmount: number }>({
+	receiveAmount: 0,
+})
+
+// 基本信息表单校验规则
+const dataRules = ref({
+	inventoryCode: [{ required: true, message: "出入库记录表编号不能为空", trigger: "blur" }],
+	inventoryDate: [{ required: true, message: "出入库记录表单据日期不能为空", trigger: "blur" }],
+	handlerUserId: [{ required: true, message: "经办人不能为空", trigger: "blur" }],
+	supplierId: [{ required: true, message: "货商不能为空", trigger: "blur" }],
+})
+
+// 可编辑表格校验规则
+const validRules = ref<VxeTablePropTypes.EditRules<any>>({
+	unitId: [{ required: true, message: "必须选择" }],
+	quantity: [{ required: true, type: "number", min: 1, max: 99, message: "数值范围1~99" }],
+})
+
+// 收款金额表单校验规则
+const receiveAmountFormRules = ref({
+	receiveAmount: [
+		{ required: true, message: "不能为空", trigger: "blur" },
+		{ pattern: /^\d+(\.\d{1,1})?$/, message: "格式错误" },
+	],
+})
+
+// 初始化数据
+const getInitData = async () => {
+	baseDataForm.id = undefined
+	const id = route.query.id as string
+	if (id) {
+		loading.value = true
+		// 获取采购计划数据 & 获取简要商品列表
+		const [cgPlanData] = await Promise.allSettled([getObj(id)])
+			.then((results) => results.map((result) => (result.status === "fulfilled" ? result.value : null)))
+			.finally(() => (loading.value = false))
+
+		if (cgPlanData && cgPlanData.code === 0) {
+			Object.assign(baseDataForm, cgPlanData.data)
+			state.editableTableData = cgPlanData.data.items
+			state.erpSpuItemsMemo = cgPlanData.data.items
+		}
+	}
+
+	// 获取货商选项 & 获取采购入库编号
+	const [erpSpuSimpleAll, supplierTypeOptions, planCode] = await Promise.allSettled([
+		getErpSpuSimpleAll(),
+		getSupplierTypeOptions(),
+		getPlanCode({ type: 3 }),
+	]).then((results) => results.map((result) => (result.status === "fulfilled" ? result.value : null)))
+	erpSpuSimpleAll && erpSpuSimpleAll.code === 0 && (state.erpSpuSimpleAll = erpSpuSimpleAll.data)
+	supplierTypeOptions && supplierTypeOptions.code === 0 && (supplierTypeDict.value = supplierTypeOptions.data)
+	planCode && planCode.code === 0 && (baseDataForm.inventoryCode = planCode.data)
+}
+
+// 点击关联采购申请编号
+const handleClickLinkCode = () => linkCgCodeDialogRef.value.openLinkCodeDialog()
+
+// 获取选择的采购申请
+const getSelectedCgPlan = (selectionRows: any) => {
+	console.log("被选择的关联数据", selectionRows)
+
+	baseDataForm.linkCode = selectionRows.planCode
+	state.editableTableData = selectionRows.items
+	state.erpSpuItemsMemo = selectionRows.items
+	state.linkCgCodeDialogVisible = false
+}
+
+// 顶部表格行新增
+const addEvent = () => {
+	const newRow: any = {
+		id: "",
+		erpSpuId: "",
+		quantity: null,
+		unitPrice: null,
+		totalAmount: null,
+		remark: "",
+		unitId: "",
+	}
+	state.editableTableData.unshift(newRow)
+	nextTick(() => {
+		const $table = editableTableRef.value
+		if ($table) {
+			$table.setEditRow(newRow)
+		}
+	})
+}
+
+// 底部表格行新增
+const pushEvent = () => {
+	const newRow: any = {
+		id: "",
+		erpSpuId: "",
+		quantity: null,
+		unitPrice: null,
+		totalAmount: null,
+		remark: "",
+		unitId: "",
+	}
+	state.editableTableData.push(newRow)
+	nextTick(() => {
+		const $table = editableTableRef.value
+		if ($table) {
+			$table.setEditRow(newRow)
+		}
+	})
+}
+
+// 在指定行插入
+const insertEvent = () => {
+	const newRow: any = {
+		id: "",
+		erpSpuId: "",
+		quantity: null,
+		unitPrice: null,
+		totalAmount: null,
+		remark: "",
+		unitId: "",
+	}
+	state.editableTableData.splice(state.insertedRowNumber, 0, newRow)
+	nextTick(() => {
+		const $table = editableTableRef.value
+		if ($table) {
+			$table.setEditRow(newRow)
+		}
+	})
+}
+
+// 删除选中的行
+const removeSelectRowEvent = () => {
+	const $table = editableTableRef.value
+	if ($table) {
+		const selectRecords = $table.getCheckboxRecords()
+		if (selectRecords.length > 0) {
+			state.editableTableData = state.editableTableData.filter((item) => !selectRecords.some((row) => row.erpSpuId === item.erpSpuId))
+		}
+	}
+}
+
+// 可编辑表格行勾选
+const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
+	const $table = editableTableRef.value
+	if ($table) {
+		const records = $table.getCheckboxRecords()
+		console.log(checked ? "勾选事件" : "取消事件", records)
+		state.selectedRowsErpSpuIds = records.map((item) => item.erpSpuId)
+	}
+}
+
+// 点击商品选择
+const handleClickSpuSelect = () => erpSpuSelectDialogRef.value.openDialog()
+
+// 获取被选择的商品行
+const getSelectedSpuRows = (selectionRows: any) => {
+	console.log("被选择的商品行", selectionRows)
+
+	// 筛选新勾选的项
+	const addedItems = selectionRows
+		.filter((item: any) => !state.editableTableData.some((editableTableItem: any) => editableTableItem.erpSpuId === item.erpSpuId))
+		.map((addItem: any) => {
+			const index = state.erpSpuItemsMemo.findIndex((item: any) => item.erpSpuId === addItem.erpSpuId)
+			if (index !== -1) return state.erpSpuItemsMemo[index]
+			return { ...addItem, isNew: true }
+		}) // 为新增的数据项添加isNew，若该项原本已经存在，则不添加isNew
+	// 仅添加新勾选的项
+	state.editableTableData = [...state.editableTableData, ...addedItems]
+
+	// 筛选取消勾选的项
+	const removedItems = state.editableTableData.filter(
+		(item: any) => !selectionRows.some((selectedItem: any) => selectedItem.erpSpuId === item.erpSpuId),
+	)
+	// 仅移除取消勾选的项
+	state.editableTableData = state.editableTableData.filter(
+		(item: any) => !removedItems.some((removeItem: any) => removeItem.erpSpuId === item.erpSpuId),
+	)
+	// state.editableTableData.push(item)
+	// nextTick(() => {
+	// 	const $table = editableTableRef.value
+	// 	if ($table) {
+	// 		$table.setRow(item)
+	// 	}
+	// })
+	state.erpSpuSelectDialogVisible = false
+	console.log("state.editableTableData", state.editableTableData)
+}
+
+// 整理数据
+const cgPlanSpuItems = computed(() => {
+	return state.editableTableData.map((item: any) => {
+		if (item.erpUnitVos) {
+			const unit = item.erpUnitVos.find((unitItem: any) => unitItem.id === item.unitId)
+			return {
+				id: item.isNew ? undefined : item.id,
+				erpSpuId: item.erpSpuId,
+				quantity: item.quantity,
+				unitPrice: unit?.purchasePrice ? Number(unit?.purchasePrice) : 0,
+				totalAmount: unit?.purchasePrice && item.quantity ? Number(unit.purchasePrice) * item.quantity : 0,
+				remark: item.remark,
+				unitId: item.unitId,
+			}
+		} else {
+			return {
+				id: item.isNew ? undefined : item.id,
+				erpSpuId: item.erpSpuId,
+				quantity: item.quantity,
+				unitPrice: item.unitPrice ? Number(item.unitPrice) : 0,
+				totalAmount: item.unitPrice ? Number(item.unitPrice) * item.quantity : 0,
+				remark: item.remark,
+				unitId: item.unitId,
+			}
+		}
+	})
+})
+
+// 计算单据金额
+const totalAmount = computed(() => cgPlanSpuItems.value.reduce((pre, cur) => pre + cur.totalAmount, 0))
+
+// 点击继续添加
+const onContinueAdd = async () => {
+	console.log("baseDataForm", baseDataForm)
+	console.log("state.editableTableData", state.editableTableData)
+	;(await baseDataFormValidate()) && checkSelectSpu() && (await editableTableValidate()) && (await submitData()) && clearData()
+}
+
+// 点击保存
+const onSave = async () => {
+	console.log("baseDataForm", baseDataForm)
+	console.log("state.editableTableData", state.editableTableData)
+	;(await baseDataFormValidate()) &&
+		checkSelectSpu() &&
+		(await editableTableValidate()) &&
+		(await submitData()) &&
+		clearData() &&
+		router.replace({ path: "/supermarketerp/smErpRetailDelivery/index" })
+}
+
+// 校验基本数据表单 成功返回 true 失败返回 undefined
+const baseDataFormValidate = async () => {
+	const valid = await baseDataFormRef.value.validate().catch(() => {})
+	return valid
+}
+
+// 校验是否选择了商品 成功返回 true 失败返回 false
+const checkSelectSpu = () => {
+	if (state.editableTableData.length <= 0) {
+		useMessage().warning("请选择商品")
+		return false
+	} else {
+		return true
+	}
+}
+
+// 校验可编辑表格 成功返回 true 失败返回 false
+const editableTableValidate = async () => {
+	// 全量校验
+	const $table = editableTableRef.value
+	if ($table) {
+		const errMap = await $table.validate(true)
+		if (errMap) {
+			console.log("全量校验失败！")
+			return false
+		} else {
+			console.log("全量校验成功！")
+			return true
+		}
+	}
+}
+
+// 提交数据 成功返回 true 失败返回 false
+const submitData = async () => {
+	try {
+		loading.value = true
+
+		const _pa = {
+			...baseDataForm,
+			items: cgPlanSpuItems.value,
+		}
+
+		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(baseDataForm.id ? "修改成功" : "添加成功")
+			return true
+		} else {
+			useMessage().error(res.msg)
+			return false
+		}
+	} catch (err: any) {
+		useMessage().error(err.msg)
+		loading.value = false
+		return false
+	}
+}
+
+// 清空填写的数据 返回 true
+const clearData = () => {
+	for (const key in baseDataForm) {
+		if (key === "id" || key === "inventoryCode" || key === "inventoryDate") continue
+		baseDataForm[key] = ""
+	}
+	state.insertedRowNumber = 0
+	state.editableTableData = []
+	state.erpSpuItemsMemo = []
+	state.selectedRowsErpSpuIds = []
+	return true
+}
+
+onMounted(() => {
+	getInitData()
+})
+</script>
+
+<style scoped>
+::v-deep .receive-amount-input .el-input__inner {
+	color: red !important;
+	font-weight: bold !important;
+	font-size: large;
+}
+</style>