Merge branch 'master' of http://gitea.zianxin.com/zianxin/biz-pc-cloud

src/api/admin/user.ts

@@ -142,3 +142,12 @@ export function validatePhone(rule: any, value: any, callback: any, isEdit: bool
 		}
 	})
 }
+
+// 获取简要用户信息
+export function getSimpleUserAll(params: { name?: string; mobile?: string }) {
+	return request({
+		url: "/admin/user/getSimpleUserAll",
+		method: "get",
+		params,
+	})
+}

src/api/supermarketerp/common.ts

@@ -0,0 +1,27 @@
+import request from "/@/utils/request"
+
+// type:1 获取采购计划编号
+// type:2 获取订单编号
+export function getPlanCode(params: { type: 1 | 2 }) {
+	return request({
+		url: "/supermarket/sm/common/getSequence",
+		method: "get",
+		params,
+	})
+}
+
+// 获取erp商品列表
+export function getErpSpuPage() {
+	return request({
+		url: "/supermarket/smErpCgPlan/erpSpuPage",
+		method: "get",
+	})
+}
+
+// 获取简要商品列表
+export function getErpSpuSimpleAll() {
+	return request({
+		url: "/supermarket/supermarketSpu/SimpleAll",
+		method: "get",
+	})
+}

src/api/supermarketerp/smErpCgDd.ts

@@ -1,41 +1,49 @@
 import request from "/@/utils/request"
 
 export function fetchList(query?: Object) {
-  return request({
-    url: '/supermarket/smErpCgDd/page',
-    method: 'get',
-    params: query
-  })
+	return request({
+		url: "/supermarket/smErpCgDd/page",
+		method: "get",
+		params: query,
+	})
 }
 
 export function addObj(obj?: Object) {
-  return request({
-    url: '/supermarket/smErpCgDd',
-    method: 'post',
-    data: obj
-  })
+	return request({
+		url: "/supermarket/smErpCgDd",
+		method: "post",
+		data: obj,
+	})
 }
 
 export function getObj(id?: string) {
-  return request({
-    url: '/supermarket/smErpCgDd/' + id,
-    method: 'get'
-  })
+	return request({
+		url: "/supermarket/smErpCgDd/" + id,
+		method: "get",
+	})
 }
 
 export function delObjs(ids?: Object) {
-  return request({
-    url: '/supermarket/smErpCgDd',
-    method: 'delete',
-    data: ids
-  })
+	return request({
+		url: "/supermarket/smErpCgDd",
+		method: "delete",
+		data: ids,
+	})
 }
 
 export function putObj(obj?: Object) {
-  return request({
-    url: '/supermarket/smErpCgDd',
-    method: 'put',
-    data: obj
-  })
+	return request({
+		url: "/supermarket/smErpCgDd",
+		method: "put",
+		data: obj,
+	})
 }
 
+// 采购申请单分页查询
+export function getCgsqPage(query?: Object) {
+	return request({
+		url: "/supermarket/smErpCgDd/cgsq/page",
+		method: "get",
+		params: query,
+	})
+}

src/api/supermarketerp/smErpCgPlan.ts

@@ -38,28 +38,3 @@ export function putObj(obj?: Object) {
 		data: obj,
 	})
 }
-
-// 获取采购计划编号
-export function getPlanCode() {
-	return request({
-		url: "/supermarket/sm/common/getSequence",
-		method: "get",
-		params: { type: 1 },
-	})
-}
-
-// 获取采购计划选择商品的列表
-export function getCgPlanSpuPage() {
-	return request({
-		url: "/supermarket/smErpCgPlan/erpSpuPage",
-		method: "get",
-	})
-}
-
-// 获取简要商品列表
-export function getErpSpuSimpleAll() {
-	return request({
-		url: "/supermarket/supermarketSpu/SimpleAll",
-		method: "get",
-	})
-}

src/components/Select/SelectHandlerUser.vue

@@ -0,0 +1,82 @@
+<template>
+	<el-select
+		style="width: 100%"
+		v-model="state.selectId"
+		:placeholder="props.placeholder"
+		clearable
+		remote-show-suffix
+		filterable
+		remote
+		:remote-method="remoteSearch"
+		:loading="state.loading"
+		@visible-change="(e: boolean) => e && getOptions()"
+	>
+		<el-option v-for="v in state.options" :key="v.id" :label="`${v.nameWithMobile}`" :value="v.id">
+			<!-- <div class="flex items-center">
+				<div class="color-primary">{{ v.name }}</div>
+				<div class="flex items-center just ml5">
+					<el-tag size="small">
+						{{ v.deptName }}
+					</el-tag>
+				</div>
+			</div> -->
+		</el-option>
+	</el-select>
+</template>
+
+<script setup lang="ts" name="SelectHandlerUser">
+import { reactive } from "vue"
+import { getSimpleUserAll } from "/@/api/admin/user"
+
+const selectId = defineModel()
+
+export type Props = {
+	placeholder?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+	placeholder: "请选择",
+})
+
+const queryForm = reactive<any>({})
+
+const state = reactive<any>({
+	loading: true,
+	selectId: selectId,
+	options: [],
+})
+
+watch(
+	selectId,
+	(newVal, oldValue) => {
+		if (newVal == oldValue) return
+		state.selectId = newVal
+		getOptions()
+	},
+	{ immediate: true },
+)
+
+async function getOptions() {
+	try {
+		state.loading = true
+		const _pa = {
+			...queryForm,
+		}
+		const { data } = await getSimpleUserAll(_pa)
+		state.options = data ?? []
+	} finally {
+		setTimeout(() => (state.loading = false), 500)
+	}
+}
+
+function remoteSearch(params: string) {
+	if (params != queryForm.name) {
+		queryForm.name = params
+		getOptions()
+	}
+}
+
+function clear() {
+	state.selectId = null
+	getOptions()
+}
+</script>

src/components/index.ts

@@ -22,6 +22,7 @@ import SelectDept from "/@/components/Select/SelectDept.vue"
 import SelectCtcg from "/@/components/Select/SelectCtcg.vue"
 import SelectCtcgol from "/@/components/Select/SelectCtcgol.vue"
 import SelectHardGroup from "/@/components/Select/selectHardGroup.vue"
+import SelectHandlerUser from "/@/components/Select/SelectHandlerUser.vue"
 
 // 第三方组件
 import ElementPlus from "element-plus"
@@ -66,6 +67,7 @@ export default {
 		app.component("SelectCtcg", SelectCtcg)
 		app.component("SelectCtcgol", SelectCtcgol)
 		app.component("SelectHardGroup", SelectHardGroup)
+		app.component("SelectHandlerUser", SelectHandlerUser)
 
 		// 导入全部的elmenet-plus的图标
 		for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

src/views/admin/system/user/index.vue

@@ -234,7 +234,7 @@ const resetQuery = () => {
 }
 
 // 树节点选择时
-const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: any) => {
+const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepTree: boolean) => {
 	state.queryForm.deptId = curClickedNode.id
 	state.queryForm.deptIds = checkedTreeNodes.map((item: any) => item.id)
 	state.queryForm.isDeepDept = isDeepTree

src/views/hard/hard-dept-total/index.vue

@@ -44,6 +44,7 @@
 						v-loading="state.loading"
 						border
 						:cell-style="tableStyle.cellStyle"
+						height="70vh"
 						:header-cell-style="tableStyle.headerCellStyle"
 						:summary-method="getSummaries"
 						show-summary

src/views/supermarketerp/components/erpSpuSelectDialog.vue

@@ -0,0 +1,123 @@
+<template>
+	<!-- 商品选择对话框 -->
+	<el-dialog
+		v-model="erpSpuSelectDialogVisible"
+		title="选择商品"
+		width="70%"
+		:close-on-click-modal="false"
+		draggable
+		@close="erpSpuSelectDialogVisible = false"
+	>
+		<!-- <el-row>
+			<el-form :model="foodQueryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
+				<el-form-item label="商品名称" prop="name">
+					<el-input placeholder="请输入商品名称" v-model="foodQueryForm.name" />
+				</el-form-item>
+				<el-form-item label="商品分类" prop="categoryId">
+					<select-ctcg v-model="foodQueryForm.categoryId" style="width: 200px" />
+				</el-form-item>
+				<el-form-item>
+					<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
+					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
+				</el-form-item>
+			</el-form>
+		</el-row> -->
+
+		<el-table
+			ref="spuMultipleTableRef"
+			:data="spuDataList"
+			v-loading="spuListLoading"
+			:row-key="(row:any) => row.id"
+			:reserve-selection="true"
+			@row-click="rowClick"
+			:row-style="{ cursor: 'pointer' }"
+		>
+			<el-table-column type="selection" width="40" align="center" fixed="left" />
+			<el-table-column type="index" label="#" width="50" align="center" fixed="left" />
+			<el-table-column prop="productName" label="商品名称" min-width="100px" align="center" show-overflow-tooltip />
+			<el-table-column prop="barcode" label="自编码/条码" min-width="100px" align="center" show-overflow-tooltip />
+			<el-table-column prop="productCode" label="货号" min-width="100px" align="center" show-overflow-tooltip />
+			<el-table-column prop="brandId" label="品牌" min-width="100px" align="center" show-overflow-tooltip />
+			<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip />
+			<el-table-column prop="deptId" label="商户" min-width="100px" align="center" show-overflow-tooltip />
+			<el-table-column prop="supplierId" label="货商" min-width="100px" align="center" show-overflow-tooltip />
+			<el-table-column prop="status" label="状态" min-width="100px" align="center" show-overflow-tooltip />
+			<el-table-column prop="picUrl" label="商品封面图" align="center" show-overflow-tooltip>
+				<template #default="scope">
+					<preview-image @click.stop :src="scope.row.picUrl" />
+				</template>
+			</el-table-column>
+			<el-table-column prop="stock" label="库存" min-width="100px" align="center" show-overflow-tooltip />
+		</el-table>
+		<!-- <pagination
+			@size-change="sizeChangeHandle"
+			@current-change="currentChangeHandle"
+			v-model:current-page="foodQueryForm.current"
+			v-model:page-size="foodQueryForm.size"
+			:total="total"
+		/> -->
+
+		<template #footer>
+			<el-button @click="erpSpuSelectDialogVisible = false">取消</el-button>
+			<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="spuListLoading">确认</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { getErpSpuPage } from "/@/api/supermarketerp/common"
+
+const erpSpuSelectDialogVisible = defineModel()
+const emit = defineEmits(["getSelectedSpuRows"])
+const props = withDefaults(
+	defineProps<{
+		selectedSpuRows: any[]
+	}>(),
+	{
+		selectedSpuRows: () => [],
+	},
+)
+
+const spuMultipleTableRef = ref() // 对话框多选表格ref
+const spuListLoading = ref(false) // 对话框多选表格loading
+const spuDataList = ref<any[]>([]) // 对话框多选表格数据
+
+// 打开弹窗
+const openDialog = async () => {
+	erpSpuSelectDialogVisible.value = true
+	try {
+		spuListLoading.value = true
+		const { code, data } = await getErpSpuPage().finally(() => (spuListLoading.value = false))
+		if (code === 0) {
+			spuDataList.value = data.records.map((item: any) => ({ ...item, erpSpuId: item.id }))
+
+			// 勾选已经选择的商品
+			const target = spuDataList.value.filter((row: any) => props.selectedSpuRows.some((item: any) => row.erpSpuId === item.erpSpuId))
+			target.forEach((row: any) => nextTick(() => spuMultipleTableRef.value!.toggleRowSelection(row)))
+		}
+	} catch (error) {
+		spuDataList.value = []
+		spuListLoading.value = false
+	}
+}
+
+// 点击商品列表表格行
+const rowClick = (row: any) => {
+	console.log("clicked-row", row)
+	spuMultipleTableRef.value.toggleRowSelection(row)
+}
+
+// 商品选择对话框确认
+const handleSelectDialogConfirm = () => {
+	const $table = spuMultipleTableRef.value
+	if ($table) {
+		const selectionRows = spuMultipleTableRef.value.getSelectionRows()
+		emit("getSelectedSpuRows", selectionRows)
+	}
+}
+
+defineExpose({
+	openDialog,
+})
+</script>

src/views/supermarketerp/smErpCgDd/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="cgsqPage"
+			@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 { getCgsqPage } from "/@/api/supermarketerp/smErpCgDd"
+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 cgsqPage = 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 getCgsqPage().finally(() => (linkCodeLoading.value = false))
+		if (res.code === 0) {
+			cgsqPage.value = res.data.records
+		}
+	} catch (error) {
+		cgsqPage.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 = []
+	cgsqPage.value = []
+}
+
+defineExpose({
+	openLinkCodeDialog,
+})
+</script>

src/views/supermarketerp/smErpCgDd/smErpCgDdOption.vue

@@ -4,30 +4,26 @@
 			<el-form ref="baseDataFormRef" :model="baseDataForm" :rules="dataRules" formDialogRef label-width="140px">
 				<div class="flex flex-wrap">
 					<el-form-item label="编号" prop="code">
-						<el-input v-model="baseDataForm.code" placeholder="请输入编号" style="width: 200px" />
+						<el-input v-model="baseDataForm.code" readonly style="width: 200px" />
 					</el-form-item>
 
 					<el-form-item label="单据日期" prop="dDate">
-						<el-date-picker
-							style="width: 200px"
-							v-model.trim="baseDataForm.dDate"
-							type="date"
-							placeholder="请选择单据日期"
-							format="YYYY-MM-DD"
-							value-format="YYYY-MM-DD"
-						/>
+						<el-input v-model="baseDataForm.dDate" readonly style="width: 200px" />
 					</el-form-item>
 
 					<el-form-item label="经办人" prop="handlerUserId">
-						<el-select v-model="baseDataForm.handlerUserId" placeholder="请选择经办人id" style="width: 200px">
-							<el-option label="请选择" value="0" />
-						</el-select>
+						<SelectHandlerUser v-model.trim="baseDataForm.handlerUserId" placeholder="请选择经办人" style="width: 200px" />
 					</el-form-item>
 
-					<el-form-item label="关联补货申请" prop="handlerUserId">
-						<el-select v-model="baseDataForm.handlerUserId" placeholder="请选择补货申请单" style="width: 200px">
-							<el-option label="请选择" value="0" />
-						</el-select>
+					<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="checkStatus">
@@ -35,7 +31,9 @@
 					</el-form-item>
 
 					<el-form-item label="货商" prop="supplierId">
-						<el-input v-model="baseDataForm.supplierId" placeholder="请输入货商" style="width: 200px" />
+						<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">
@@ -97,16 +95,10 @@
 
 				<vxe-column type="seq" width="50" fixed="left" />
 
-				<!-- <vxe-column field="planId" title="采购" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
-					<template #edit="{ row }">
-						<el-input v-model="row.planId" />
-					</template>
-				</vxe-column> -->
-
 				<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>
+						<span v-else>{{ row.erpSpuId && state.erpSpuSimpleAll.find((item: any) => item.id === row.erpSpuId)?.productName }}</span>
 					</template>
 				</vxe-column>
 
@@ -123,7 +115,7 @@
 						</el-select>
 					</template>
 					<template #default="{ row }">
-						<span v-if="row.unitId">{{ row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.unit }}</span>
+						<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>
@@ -136,7 +128,7 @@
 
 				<vxe-column field="unitPrice" title="进价">
 					<template #default="{ row }">
-						{{ row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice }}
+						{{ row.purchasePrice ?? row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice }}
 					</template>
 				</vxe-column>
 
@@ -155,18 +147,6 @@
 						<el-input v-model="row.remark" />
 					</template>
 				</vxe-column>
-
-				<!--				<vxe-column field="merchantId" title="商户编号" :edit-render="{ autoFocus: 'input', placeholder: '请选择' }">-->
-				<!--					<template #edit="{ row }">-->
-				<!--						<select-mch v-model="row.merchantId" />-->
-				<!--					</template>-->
-				<!--				</vxe-column>-->
-
-				<!--				<vxe-column field="deptId" title="部门id" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">-->
-				<!--					<template #edit="{ row }">-->
-				<!--						<el-input v-model="row.deptId" />-->
-				<!--					</template>-->
-				<!--				</vxe-column>-->
 			</vxe-table>
 
 			<el-row class="my-3">
@@ -182,136 +162,49 @@
 			</el-row>
 
 			<!-- 商品选择对话框 -->
-			<el-dialog
-				v-model="state.spuSelectDialogVisible"
-				title="选择商品"
-				width="70%"
-				:close-on-click-modal="false"
-				draggable
-				@close="state.selectedSpuObjs = []"
-			>
-				<!-- <el-row>
-					<el-form :model="foodQueryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
-						<el-form-item label="商品名称" prop="name">
-							<el-input placeholder="请输入商品名称" v-model="foodQueryForm.name" />
-						</el-form-item>
-						<el-form-item label="商品分类" prop="categoryId">
-							<select-ctcg v-model="foodQueryForm.categoryId" style="width: 200px" />
-						</el-form-item>
-						<el-form-item>
-							<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
-							<el-button icon="Refresh" @click="resetQuery">重置</el-button>
-						</el-form-item>
-					</el-form>
-				</el-row> -->
+			<erpSpuSelectDialog
+				ref="erpSpuSelectDialogRef"
+				v-model="state.erpSpuSelectDialogVisible"
+				:selectedSpuRows="state.editableTableData"
+				@getSelectedSpuRows="getSelectedSpuRows"
+			/>
 
-				<el-table
-					ref="spuMultipleTableRef"
-					:data="state.spuDataList"
-					v-loading="spuListLoading"
-					@select="handleSelect"
-					@select-all="handleSelectAll"
-					@selection-change="selectionChangeHandle"
-					:row-key="(row:any) => row.id"
-					:reserve-selection="true"
-					@row-click="rowClick"
-					:row-style="{ cursor: 'pointer' }"
-				>
-					<el-table-column type="selection" width="40" align="center" fixed="left" />
-					<el-table-column type="index" label="#" width="50" align="center" fixed="left" />
-					<el-table-column prop="productName" label="商品名称" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="barcode" label="自编码/条码" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="productCode" label="货号" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="brandId" label="品牌" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="deptId" label="商户" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="supplierId" label="货商" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="status" label="状态" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="picUrl" label="商品封面图" align="center" show-overflow-tooltip>
-						<template #default="scope">
-							<preview-image @click.stop :src="scope.row.picUrl" />
-						</template>
-					</el-table-column>
-					<el-table-column prop="stock" label="库存" min-width="100px" align="center" show-overflow-tooltip />
-				</el-table>
-				<!-- <pagination
-					@size-change="sizeChangeHandle"
-					@current-change="currentChangeHandle"
-					v-model:current-page="foodQueryForm.current"
-					v-model:page-size="foodQueryForm.size"
-					:total="total"
-				/> -->
-
-				<template #footer>
-					<div class="dialog-footer">
-						<el-button @click="state.spuSelectDialogVisible = false">取消</el-button>
-						<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="spuListLoading">确认</el-button>
-					</div>
-				</template>
-			</el-dialog>
+			<!-- 关联采购申请单对话框 -->
+			<linkCgCodeDialog ref="linkCgCodeDialogRef" v-model="state.linkCgCodeDialogVisible" @getSelectedCgPlan="getSelectedCgPlan" />
 		</div>
 	</div>
 </template>
 
-<script setup lang="ts" name="smErpCgDd">
+<script setup lang="ts" name="cgPlanOption">
 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 } from "/@/api/supermarketerp/smErpCgDd"
-import { getPlanCode, getCgPlanSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/smErpCgPlan"
+import { getPlanCode, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
 import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
 import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
 import { storePrice } from "/@/utils/formatMoney"
-
-// 基本表单数据类型
-interface FormVO {
-	id: string | undefined
-	code: string
-	dDate: string
-	warehouseId: string
-	handlerUserId: string
-	checkStatus: string
-	checkUserId: string
-	checkTime: string
-	merchantId: string
-	deptId: string
-	quantity: string
-	totalNumber: string
-	totalAmount: string
-	supplierId: string
-	remark: string
-	orderNumber: string
-	[key: string]: string | undefined
-}
-
-// 可编辑表格行数据类型
-interface RowVO {
-	id?: string
-	erpSpuId: string
-	quantity: number | null
-	unitPrice: number | null
-	totalAmount: number | null
-	remark: string
-	unitId: string
-}
+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"
 
 const router = useRouter()
 const route = useRoute()
 const loading = ref(false) // 采购计划加载
-const spuListLoading = ref(false) // 对话框商品列表加载
+const erpSpuSelectDialogRef = ref() // 商品选择对话框ref
+const linkCgCodeDialogRef = ref() // 关联采购申请单对话框ref
 const baseDataFormRef = ref() // 基本数据表单ref
-const editableTableRef = ref<VxeTableInstance<RowVO>>() // 可编辑表格ref
-const spuMultipleTableRef = ref() // 对话框多选表格ref
+const editableTableRef = ref<VxeTableInstance<any>>() // 可编辑表格ref
 const supplierTypeDict = ref<any[]>([]) // 货商下拉选项
-
 // 基本信息表单数据
-const baseDataForm = reactive<FormVO>({
+const baseDataForm = reactive<any>({
 	id: "",
 	code: "",
-	dDate: "",
+	dDate: formatDate(new Date(), "YYYY-mm-dd"),
 	warehouseId: "",
 	handlerUserId: "",
+	linkCode: "",
 	checkStatus: "",
 	checkUserId: "",
 	checkTime: "",
@@ -325,35 +218,35 @@ const baseDataForm = reactive<FormVO>({
 	orderNumber: "",
 })
 const state = reactive<{
-	editableTableData: RowVO[]
-	erpSpuItemsMemo: RowVO[]
+	editableTableData: any[]
+	erpSpuItemsMemo: any[]
 	selectedRowsErpSpuIds: string[]
 	insertedRowNumber: number
 	erpSpuSimpleAll: any
-	spuSelectDialogVisible: boolean
-	spuDataList: any[]
-	selectedSpuObjs: any[]
+	linkCodeVisible: boolean
+	erpSpuSelectDialogVisible: boolean
+	linkCgCodeDialogVisible: boolean
 }>({
 	editableTableData: [], // 可编辑表格数据
 	erpSpuItemsMemo: [], // 请求到的可编辑表格商品数据的缓存
 	selectedRowsErpSpuIds: [], // 可编辑表格已选行的ErpSpuId
 	insertedRowNumber: 0, // 可编辑表格插入行的行号
 	erpSpuSimpleAll: [], // 简要商品列表
-
-	spuSelectDialogVisible: false, // 商品选择对话框开关
-	spuDataList: [], // 商品列表
-	selectedSpuObjs: [], // 已选中的商品列表项
+	linkCodeVisible: false, // 关联采购申请单对话框开关
+	erpSpuSelectDialogVisible: false, // 商品选择对话框开关
+	linkCgCodeDialogVisible: false, // 关联采购申请单对话框开关
 })
 
 // 基本信息表单校验规则
 const dataRules = ref({
-	planCode: [{ required: true, message: "采购计划编号不能为空", trigger: "blur" }],
-	planDate: [{ required: true, message: "采购计划单据日期不能为空", trigger: "blur" }],
+	code: [{ required: true, message: "采购订单编号不能为空", trigger: "blur" }],
+	dDate: [{ required: true, message: "采购订单单据日期不能为空", trigger: "blur" }],
+	handlerUserId: [{ required: true, message: "经办人不能为空", trigger: "blur" }],
 	supplierId: [{ required: true, message: "货商不能为空", trigger: "blur" }],
 })
 
 // 可编辑表格校验规则
-const validRules = ref<VxeTablePropTypes.EditRules<RowVO>>({
+const validRules = ref<VxeTablePropTypes.EditRules<any>>({
 	unitId: [{ required: true, message: "必须选择" }],
 	quantity: [{ required: true, type: "number", min: 1, max: 99, message: "数值范围1~99" }],
 })
@@ -365,47 +258,44 @@ const getInitData = async () => {
 	if (id) {
 		loading.value = true
 		// 获取采购计划数据 & 获取简要商品列表
-		const [cgPlanData, erpSpuSimpleAll] = await Promise.allSettled([getObj(id), getErpSpuSimpleAll()])
+		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, {
-				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,
-			})
+			Object.assign(baseDataForm, cgPlanData.data)
 			state.editableTableData = cgPlanData.data.items
 			state.erpSpuItemsMemo = cgPlanData.data.items
 		}
-		erpSpuSimpleAll && erpSpuSimpleAll.code === 0 && (state.erpSpuSimpleAll = erpSpuSimpleAll.data)
 	}
 
 	// 获取货商选项 & 获取采购计划编号
-	const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode()]).then((results) =>
-		results.map((result) => (result.status === "fulfilled" ? result.value : null)),
-	)
+	const [erpSpuSimpleAll, supplierTypeOptions, planCode] = await Promise.allSettled([
+		getErpSpuSimpleAll(),
+		getSupplierTypeOptions(),
+		getPlanCode({ type: 2 }),
+	]).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.planCode = planCode.data)
+	planCode && planCode.code === 0 && (baseDataForm.code = planCode.data)
 }
 
-// 可编辑表格行勾选
-const selectChangeEvent: VxeTableEvents.CheckboxChange<RowVO> = ({ checked }) => {
-	const $table = editableTableRef.value
-	if ($table) {
-		const records = $table.getCheckboxRecords()
-		console.log(checked ? "勾选事件" : "取消事件", records)
-		state.selectedRowsErpSpuIds = records.map((item) => item.erpSpuId)
-	}
+// 点击关联采购申请编号
+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: RowVO = {
+	const newRow: any = {
 		id: "",
 		erpSpuId: "",
 		quantity: null,
@@ -425,7 +315,7 @@ const addEvent = () => {
 
 // 底部表格行新增
 const pushEvent = () => {
-	const newRow: RowVO = {
+	const newRow: any = {
 		id: "",
 		erpSpuId: "",
 		quantity: null,
@@ -445,7 +335,7 @@ const pushEvent = () => {
 
 // 在指定行插入
 const insertEvent = () => {
-	const newRow: RowVO = {
+	const newRow: any = {
 		id: "",
 		erpSpuId: "",
 		quantity: null,
@@ -474,87 +364,29 @@ const removeSelectRowEvent = () => {
 	}
 }
 
+// 可编辑表格行勾选
+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 = async () => {
-	state.selectedSpuObjs = [...state.editableTableData]
+const handleClickSpuSelect = () => erpSpuSelectDialogRef.value.openDialog()
 
-	state.spuSelectDialogVisible = true
-	spuListLoading.value = true
-	try {
-		const { code, data } = await getCgPlanSpuPage().finally(() => (spuListLoading.value = false))
-		if (code === 0) {
-			state.spuDataList = data.records.map((item: RowVO) => ({ ...item, erpSpuId: 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) {
-		state.spuDataList = []
-		spuListLoading.value = false
-	}
-}
-
-// 点击商品列表表格行
-const rowClick = (row: any) => {
-	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.erpSpuId === row.erpSpuId),
-				1,
-		  )
-	console.log("click-select", state.selectedSpuObjs)
-	spuMultipleTableRef.value.toggleRowSelection(row)
-}
-
-// 选中商品列表表格行
-const handleSelect = (selectedRows: any[], row: any) => {
-	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.erpSpuId === row.erpSpuId),
-				1,
-		  )
-	console.log("check-select", state.selectedSpuObjs)
-}
-
-// 全选和反全选商品列表表格行
-const handleSelectAll = (selectedRows: any[]) => {
-	if (selectedRows.length > 0) {
-		selectedRows.forEach((row: any) => {
-			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.erpSpuId === row.erpSpuId)
-			if (index !== -1) {
-				state.selectedSpuObjs.splice(index, 1)
-			}
-		})
-	}
-	console.log("checkAll-select", state.selectedSpuObjs)
-}
-
-// 商品表格多选
-const selectionChangeHandle = (rows: any) => {
-	// console.log("onChange-selects", rows)
-}
-
-// 商品选择对话框确认
-const handleSelectDialogConfirm = () => {
-	console.log(state.editableTableData, state.selectedSpuObjs)
+// 获取被选择的商品行
+const getSelectedSpuRows = (selectionRows: any) => {
+	console.log("被选择的商品行", selectionRows)
 
 	// 筛选新勾选的项
-	const addedItems = state.selectedSpuObjs
-		.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
+	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标志
 	// 仅添加新勾选的项
@@ -562,7 +394,7 @@ const handleSelectDialogConfirm = () => {
 
 	// 筛选取消勾选的项
 	const removedItems = state.editableTableData.filter(
-		(item: any) => !state.selectedSpuObjs.some((selectedItem: any) => selectedItem.erpSpuId === item.erpSpuId),
+		(item: any) => !selectionRows.some((selectedItem: any) => selectedItem.erpSpuId === item.erpSpuId),
 	)
 	// 仅移除取消勾选的项
 	state.editableTableData = state.editableTableData.filter(
@@ -575,22 +407,34 @@ const handleSelectDialogConfirm = () => {
 	// 		$table.setRow(item)
 	// 	}
 	// })
-	state.spuSelectDialogVisible = false
+	state.erpSpuSelectDialogVisible = false
 	console.log("state.editableTableData", state.editableTableData)
 }
 
 // 整理数据
 const cgPlanSpuItems = computed(() => {
 	return state.editableTableData.map((item: any) => {
-		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 ? storePrice(unit?.purchasePrice) : 0,
-			totalAmount: Number(unit?.purchasePrice || 0) * item.quantity,
-			remark: item.remark,
-			unitId: item.unitId,
+		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 ? storePrice(unit?.purchasePrice) : 0,
+				totalAmount: Number(unit?.purchasePrice || 0) * item.quantity,
+				remark: item.remark,
+				unitId: item.unitId,
+			}
+		} else {
+			return {
+				id: item.isNew ? undefined : item.id,
+				erpSpuId: item.erpSpuId,
+				quantity: item.quantity,
+				unitPrice: item.unitPrice ? storePrice(item.unitPrice) : 0,
+				totalAmount: Number(item.unitPrice || 0) * item.quantity,
+				remark: item.remark,
+				unitId: item.unitId,
+			}
 		}
 	})
 })
@@ -678,13 +522,13 @@ const submitData = async () => {
 // 清空填写的数据 返回 true
 const clearData = () => {
 	for (const key in baseDataForm) {
-		if (key === "planCode" || key === "id") continue
+		if (key === "code" || key === "id" || key === "dDate") continue
 		baseDataForm[key] = ""
 	}
 	state.insertedRowNumber = 0
 	state.editableTableData = []
+	state.erpSpuItemsMemo = []
 	state.selectedRowsErpSpuIds = []
-	state.selectedSpuObjs = []
 	return true
 }
 

src/views/supermarketerp/smErpCgPlan/cgPlanOption copy.vue

@@ -0,0 +1,649 @@
+<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="140px">
+				<div class="flex flex-wrap">
+					<el-form-item label="编号" prop="planCode">
+						<el-input v-model="baseDataForm.planCode" readonly style="width: 200px" />
+					</el-form-item>
+					<el-form-item label="单据日期" prop="planDate">
+						<el-input v-model="baseDataForm.planDate" readonly 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="remark">
+						<el-input v-model.trim="baseDataForm.remark" placeholder="请输入备注" maxlength="200" 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>
+
+			<vxe-table
+				ref="editableTableRef"
+				border
+				:loading="loading"
+				show-overflow
+				max-height="400"
+				: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="planId" title="采购" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+					<template #edit="{ row }">
+						<el-input v-model="row.planId" />
+					</template>
+				</vxe-column> -->
+
+				<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-select>
+					</template>
+					<template #default="{ row }">
+						<span v-if="row.unitId">{{ 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.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice }}
+					</template>
+				</vxe-column>
+
+				<vxe-column field="totalAmount" title="累计总金额">
+					<template #default="{ row }">
+						{{
+							row.unitId && row.quantity
+								? Number(row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice) * row.quantity
+								: ""
+						}}
+					</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-column field="merchantId" title="商户编号" :edit-render="{ autoFocus: 'input', placeholder: '请选择' }">-->
+				<!--					<template #edit="{ row }">-->
+				<!--						<select-mch v-model="row.merchantId" />-->
+				<!--					</template>-->
+				<!--				</vxe-column>-->
+
+				<!--				<vxe-column field="deptId" title="部门id" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">-->
+				<!--					<template #edit="{ row }">-->
+				<!--						<el-input v-model="row.deptId" />-->
+				<!--					</template>-->
+				<!--				</vxe-column>-->
+			</vxe-table>
+
+			<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>
+
+			<!-- 商品选择对话框 -->
+			<el-dialog
+				v-model="state.spuSelectDialogVisible"
+				title="选择商品"
+				width="70%"
+				:close-on-click-modal="false"
+				draggable
+				@close="state.selectedSpuObjs = []"
+			>
+				<!-- <el-row>
+					<el-form :model="foodQueryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
+						<el-form-item label="商品名称" prop="name">
+							<el-input placeholder="请输入商品名称" v-model="foodQueryForm.name" />
+						</el-form-item>
+						<el-form-item label="商品分类" prop="categoryId">
+							<select-ctcg v-model="foodQueryForm.categoryId" style="width: 200px" />
+						</el-form-item>
+						<el-form-item>
+							<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
+							<el-button icon="Refresh" @click="resetQuery">重置</el-button>
+						</el-form-item>
+					</el-form>
+				</el-row> -->
+
+				<el-table
+					ref="spuMultipleTableRef"
+					:data="state.spuDataList"
+					v-loading="spuListLoading"
+					@select="handleSelect"
+					@select-all="handleSelectAll"
+					@selection-change="selectionChangeHandle"
+					:row-key="(row:any) => row.id"
+					:reserve-selection="true"
+					@row-click="rowClick"
+					:row-style="{ cursor: 'pointer' }"
+				>
+					<el-table-column type="selection" width="40" align="center" fixed="left" />
+					<el-table-column type="index" label="#" width="50" align="center" fixed="left" />
+					<el-table-column prop="productName" label="商品名称" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="barcode" label="自编码/条码" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="productCode" label="货号" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="brandId" label="品牌" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="deptId" label="商户" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="supplierId" label="货商" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="status" label="状态" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="picUrl" label="商品封面图" align="center" show-overflow-tooltip>
+						<template #default="scope">
+							<preview-image @click.stop :src="scope.row.picUrl" />
+						</template>
+					</el-table-column>
+					<el-table-column prop="stock" label="库存" min-width="100px" align="center" show-overflow-tooltip />
+				</el-table>
+				<!-- <pagination
+					@size-change="sizeChangeHandle"
+					@current-change="currentChangeHandle"
+					v-model:current-page="foodQueryForm.current"
+					v-model:page-size="foodQueryForm.size"
+					:total="total"
+				/> -->
+
+				<template #footer>
+					<el-button @click="state.spuSelectDialogVisible = false">取消</el-button>
+					<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="spuListLoading">确认</el-button>
+				</template>
+			</el-dialog>
+		</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/smErpCgPlan"
+import { getPlanCode, getErpSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
+import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
+import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
+import { storePrice } from "/@/utils/formatMoney"
+import { formatDate } from "/@/utils/formatTime"
+
+// 基本表单数据类型
+interface FormVO {
+	id: string | undefined
+	planCode: string
+	orderNumber: string
+	planDate: string
+	supplierId: string
+	handlerUserId: string
+	remark: string
+	[key: string]: string | undefined
+}
+
+// 可编辑表格行数据类型
+interface RowVO {
+	id?: string
+	erpSpuId: string
+	quantity: number | null
+	unitPrice: number | null
+	totalAmount: number | null
+	remark: string
+	unitId: string
+}
+
+const router = useRouter()
+const route = useRoute()
+const loading = ref(false) // 采购计划加载
+const spuListLoading = ref(false) // 对话框商品列表加载
+const baseDataFormRef = ref() // 基本数据表单ref
+const editableTableRef = ref<VxeTableInstance<RowVO>>() // 可编辑表格ref
+const spuMultipleTableRef = ref() // 对话框多选表格ref
+const supplierTypeDict = ref<any[]>([]) // 货商下拉选项
+
+// 基本信息表单数据
+const baseDataForm = reactive<FormVO>({
+	id: undefined,
+	planCode: "",
+	orderNumber: "",
+	planDate: formatDate(new Date(), "YYYY-mm-dd"),
+	supplierId: "",
+	handlerUserId: "",
+	remark: "",
+})
+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: [], // 商品列表
+	selectedSpuObjs: [], // 已选中的商品列表项
+})
+
+// 基本信息表单校验规则
+const dataRules = ref({
+	planCode: [{ required: true, message: "采购计划编号不能为空", trigger: "blur" }],
+	planDate: [{ required: true, message: "采购计划单据日期不能为空", trigger: "blur" }],
+	supplierId: [{ required: true, message: "货商不能为空", trigger: "blur" }],
+})
+
+// 可编辑表格校验规则
+const validRules = ref<VxeTablePropTypes.EditRules<RowVO>>({
+	unitId: [{ required: true, message: "必须选择" }],
+	quantity: [{ required: true, type: "number", min: 1, max: 99, message: "数值范围1~99" }],
+})
+
+// 初始化数据
+const getInitData = async () => {
+	baseDataForm.id = undefined
+	const id = route.query.id as string
+	if (id) {
+		loading.value = true
+		// 获取采购计划数据 & 获取简要商品列表
+		const [cgPlanData, erpSpuSimpleAll] = await Promise.allSettled([getObj(id), getErpSpuSimpleAll()])
+			.then((results) => results.map((result) => (result.status === "fulfilled" ? result.value : null)))
+			.finally(() => (loading.value = false))
+
+		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)
+	}
+
+	// 获取货商选项 & 获取采购计划编号
+	const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode({ type: 1 })]).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)
+}
+
+// 可编辑表格行勾选
+const selectChangeEvent: VxeTableEvents.CheckboxChange<RowVO> = ({ checked }) => {
+	const $table = editableTableRef.value
+	if ($table) {
+		const records = $table.getCheckboxRecords()
+		console.log(checked ? "勾选事件" : "取消事件", records)
+		state.selectedRowsErpSpuIds = records.map((item) => item.erpSpuId)
+	}
+}
+
+// 顶部表格行新增
+const addEvent = () => {
+	const newRow: RowVO = {
+		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: RowVO = {
+		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: RowVO = {
+		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 handleClickSpuSelect = async () => {
+	state.selectedSpuObjs = [...state.editableTableData]
+
+	state.spuSelectDialogVisible = true
+	spuListLoading.value = true
+	try {
+		const { code, data } = await getErpSpuPage().finally(() => (spuListLoading.value = false))
+		if (code === 0) {
+			state.spuDataList = data.records.map((item: RowVO) => ({ ...item, erpSpuId: 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) {
+		state.spuDataList = []
+		spuListLoading.value = false
+	}
+}
+
+// 点击商品列表表格行
+const rowClick = (row: any) => {
+	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.erpSpuId === row.erpSpuId),
+				1,
+		  )
+	console.log("click-select", state.selectedSpuObjs)
+	spuMultipleTableRef.value.toggleRowSelection(row)
+}
+
+// 选中商品列表表格行
+const handleSelect = (selectedRows: any[], row: any) => {
+	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.erpSpuId === row.erpSpuId),
+				1,
+		  )
+	console.log("check-select", state.selectedSpuObjs)
+}
+
+// 全选和反全选商品列表表格行
+const handleSelectAll = (selectedRows: any[]) => {
+	if (selectedRows.length > 0) {
+		selectedRows.forEach((row: any) => {
+			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.erpSpuId === row.erpSpuId)
+			if (index !== -1) {
+				state.selectedSpuObjs.splice(index, 1)
+			}
+		})
+	}
+	console.log("checkAll-select", state.selectedSpuObjs)
+}
+
+// 商品表格多选
+const selectionChangeHandle = (rows: any) => {
+	// console.log("onChange-selects", rows)
+}
+
+// 商品选择对话框确认
+const handleSelectDialogConfirm = () => {
+	// 筛选新勾选的项
+	const addedItems = state.selectedSpuObjs
+		.filter((item: any) => !state.editableTableData.some((editableTableItem: RowVO) => editableTableItem.erpSpuId === item.erpSpuId))
+		.map((addItem) => {
+			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) => !state.selectedSpuObjs.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.spuSelectDialogVisible = false
+	console.log("state.editableTableData", state.editableTableData)
+}
+
+// 整理数据
+const cgPlanSpuItems = computed(() => {
+	return state.editableTableData.map((item: any) => {
+		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 ? storePrice(unit?.purchasePrice) : 0,
+			totalAmount: Number(unit?.purchasePrice || 0) * item.quantity,
+			remark: item.remark,
+			unitId: item.unitId,
+		}
+	})
+})
+
+// 点击继续添加
+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/smErpCgPlan/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 === "planCode" || key === "id" || key === "planDate") continue
+		baseDataForm[key] = ""
+	}
+	state.insertedRowNumber = 0
+	state.editableTableData = []
+	state.selectedRowsErpSpuIds = []
+	state.selectedSpuObjs = []
+	return true
+}
+
+onMounted(() => {
+	getInitData()
+})
+</script>

src/views/supermarketerp/smErpCgPlan/cgPlanOption.vue

@@ -4,21 +4,14 @@
 			<el-form ref="baseDataFormRef" :model="baseDataForm" :rules="dataRules" formDialogRef label-width="140px">
 				<div class="flex flex-wrap">
 					<el-form-item label="编号" prop="planCode">
-						<el-input v-model.trim="baseDataForm.planCode" placeholder="请输入编号" disabled style="width: 200px" />
+						<el-input v-model="baseDataForm.planCode" readonly style="width: 200px" />
 					</el-form-item>
 					<el-form-item label="单据日期" prop="planDate">
-						<el-date-picker
-							style="width: 200px"
-							v-model.trim="baseDataForm.planDate"
-							type="date"
-							placeholder="请选择采购计划单据日期"
-							format="YYYY-MM-DD"
-							value-format="YYYY-MM-DD"
-						/>
+						<el-input v-model="baseDataForm.planDate" readonly style="width: 200px" />
 					</el-form-item>
 
 					<el-form-item label="经办人" prop="handlerUserId">
-						<el-input v-model.trim="baseDataForm.handlerUserId" placeholder="请输入经办人" maxlength="20" style="width: 200px" />
+						<SelectHandlerUser v-model.trim="baseDataForm.handlerUserId" placeholder="请选择经办人" style="width: 200px" />
 					</el-form-item>
 
 					<el-form-item label="备注" prop="remark">
@@ -117,7 +110,7 @@
 					</template>
 				</vxe-column>
 
-<!--				<vxe-column field="unitPrice" title="进价">
+				<!-- <vxe-column field="unitPrice" title="进价">
 					<template #default="{ row }">
 						{{ row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice }}
 					</template>
@@ -131,7 +124,7 @@
 								: ""
 						}}
 					</template>
-				</vxe-column>-->
+				</vxe-column> -->
 
 				<vxe-column field="remark" title="备注" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
 					<template #edit="{ row }">
@@ -165,73 +158,12 @@
 			</el-row>
 
 			<!-- 商品选择对话框 -->
-			<el-dialog
-				v-model="state.spuSelectDialogVisible"
-				title="选择商品"
-				width="70%"
-				:close-on-click-modal="false"
-				draggable
-				@close="state.selectedSpuObjs = []"
-			>
-				<!-- <el-row>
-					<el-form :model="foodQueryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
-						<el-form-item label="商品名称" prop="name">
-							<el-input placeholder="请输入商品名称" v-model="foodQueryForm.name" />
-						</el-form-item>
-						<el-form-item label="商品分类" prop="categoryId">
-							<select-ctcg v-model="foodQueryForm.categoryId" style="width: 200px" />
-						</el-form-item>
-						<el-form-item>
-							<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
-							<el-button icon="Refresh" @click="resetQuery">重置</el-button>
-						</el-form-item>
-					</el-form>
-				</el-row> -->
-
-				<el-table
-					ref="spuMultipleTableRef"
-					:data="state.spuDataList"
-					v-loading="spuListLoading"
-					@select="handleSelect"
-					@select-all="handleSelectAll"
-					@selection-change="selectionChangeHandle"
-					:row-key="(row:any) => row.id"
-					:reserve-selection="true"
-					@row-click="rowClick"
-					:row-style="{ cursor: 'pointer' }"
-				>
-					<el-table-column type="selection" width="40" align="center" fixed="left" />
-					<el-table-column type="index" label="#" width="50" align="center" fixed="left" />
-					<el-table-column prop="productName" label="商品名称" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="barcode" label="自编码/条码" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="productCode" label="货号" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="brandId" label="品牌" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="deptId" label="商户" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="supplierId" label="货商" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="status" label="状态" min-width="100px" align="center" show-overflow-tooltip />
-					<el-table-column prop="picUrl" label="商品封面图" align="center" show-overflow-tooltip>
-						<template #default="scope">
-							<preview-image @click.stop :src="scope.row.picUrl" />
-						</template>
-					</el-table-column>
-					<el-table-column prop="stock" label="库存" min-width="100px" align="center" show-overflow-tooltip />
-				</el-table>
-				<!-- <pagination
-					@size-change="sizeChangeHandle"
-					@current-change="currentChangeHandle"
-					v-model:current-page="foodQueryForm.current"
-					v-model:page-size="foodQueryForm.size"
-					:total="total"
-				/> -->
-
-				<template #footer>
-					<div class="dialog-footer">
-						<el-button @click="state.spuSelectDialogVisible = false">取消</el-button>
-						<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="spuListLoading">确认</el-button>
-					</div>
-				</template>
-			</el-dialog>
+			<erpSpuSelectDialog
+				ref="erpSpuSelectDialogRef"
+				v-model="state.erpSpuSelectDialogVisible"
+				:selectedSpuRows="state.editableTableData"
+				@getSelectedSpuRows="getSelectedSpuRows"
+			/>
 		</div>
 	</div>
 </template>
@@ -239,85 +171,58 @@
 <script setup lang="ts" name="cgPlanOption">
 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, getErpSpuSimpleAll } from "/@/api/supermarketerp/smErpCgPlan"
 import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
 import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
+import { getObj, addObj, putObj } from "/@/api/supermarketerp/smErpCgPlan"
+import { getPlanCode, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
+import erpSpuSelectDialog from "/@/views/supermarketerp/components/erpSpuSelectDialog.vue"
 import { storePrice } from "/@/utils/formatMoney"
-
-// 基本表单数据类型
-interface FormVO {
-	id: string | undefined
-	planCode: string
-	orderNumber: string
-	planDate: string
-	supplierId: string
-	handlerUserId: string
-	remark: string
-	[key: string]: string | undefined
-}
-
-// 可编辑表格行数据类型
-interface RowVO {
-	id?: string
-	erpSpuId: string
-	quantity: number | null
-	unitPrice: number | null
-	totalAmount: number | null
-	remark: string
-	unitId: string
-}
+import { formatDate } from "/@/utils/formatTime"
 
 const router = useRouter()
 const route = useRoute()
+const erpSpuSelectDialogRef = ref() // 商品选择对话框ref
 const loading = ref(false) // 采购计划加载
-const spuListLoading = ref(false) // 对话框商品列表加载
 const baseDataFormRef = ref() // 基本数据表单ref
-const editableTableRef = ref<VxeTableInstance<RowVO>>() // 可编辑表格ref
-const spuMultipleTableRef = ref() // 对话框多选表格ref
+const editableTableRef = ref<VxeTableInstance<any>>() // 可编辑表格ref
 const supplierTypeDict = ref<any[]>([]) // 货商下拉选项
-
 // 基本信息表单数据
-const baseDataForm = reactive<FormVO>({
+const baseDataForm = reactive<any>({
 	id: undefined,
 	planCode: "",
 	orderNumber: "",
-	planDate: "",
+	planDate: formatDate(new Date(), "YYYY-mm-dd"),
 	supplierId: "",
 	handlerUserId: "",
 	remark: "",
 })
 const state = reactive<{
-	editableTableData: RowVO[]
-	erpSpuItemsMemo: RowVO[]
+	editableTableData: any[]
+	erpSpuItemsMemo: any[]
 	selectedRowsErpSpuIds: string[]
 	insertedRowNumber: number
 	erpSpuSimpleAll: any
-	spuSelectDialogVisible: boolean
-	spuDataList: any[]
-	selectedSpuObjs: any[]
+	erpSpuSelectDialogVisible: boolean
 }>({
 	editableTableData: [], // 可编辑表格数据
 	erpSpuItemsMemo: [], // 请求到的可编辑表格商品数据的缓存
 	selectedRowsErpSpuIds: [], // 可编辑表格已选行的ErpSpuId
 	insertedRowNumber: 0, // 可编辑表格插入行的行号
 	erpSpuSimpleAll: [], // 简要商品列表
-
-	spuSelectDialogVisible: false, // 商品选择对话框开关
-	spuDataList: [], // 商品列表
-	selectedSpuObjs: [], // 已选中的商品列表项
+	erpSpuSelectDialogVisible: false, // 商品选择对话框开关
 })
 
 // 基本信息表单校验规则
 const dataRules = ref({
 	planCode: [{ required: true, message: "采购计划编号不能为空", trigger: "blur" }],
 	planDate: [{ required: true, message: "采购计划单据日期不能为空", trigger: "blur" }],
+	handlerUserId: [{ required: true, message: "经办人不能为空", trigger: "blur" }],
 	supplierId: [{ required: true, message: "货商不能为空", trigger: "blur" }],
 })
 
 // 可编辑表格校验规则
-const validRules = ref<VxeTablePropTypes.EditRules<RowVO>>({
+const validRules = ref<VxeTablePropTypes.EditRules<any>>({
 	unitId: [{ required: true, message: "必须选择" }],
 	quantity: [{ required: true, type: "number", min: 1, max: 99, message: "数值范围1~99" }],
 })
@@ -350,26 +255,16 @@ const getInitData = async () => {
 	}
 
 	// 获取货商选项 & 获取采购计划编号
-	const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode()]).then((results) =>
+	const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode({ type: 1 })]).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)
 }
 
-// 可编辑表格行勾选
-const selectChangeEvent: VxeTableEvents.CheckboxChange<RowVO> = ({ checked }) => {
-	const $table = editableTableRef.value
-	if ($table) {
-		const records = $table.getCheckboxRecords()
-		console.log(checked ? "勾选事件" : "取消事件", records)
-		state.selectedRowsErpSpuIds = records.map((item) => item.erpSpuId)
-	}
-}
-
 // 顶部表格行新增
 const addEvent = () => {
-	const newRow: RowVO = {
+	const newRow: any = {
 		id: "",
 		erpSpuId: "",
 		quantity: null,
@@ -389,7 +284,7 @@ const addEvent = () => {
 
 // 底部表格行新增
 const pushEvent = () => {
-	const newRow: RowVO = {
+	const newRow: any = {
 		id: "",
 		erpSpuId: "",
 		quantity: null,
@@ -409,7 +304,7 @@ const pushEvent = () => {
 
 // 在指定行插入
 const insertEvent = () => {
-	const newRow: RowVO = {
+	const newRow: any = {
 		id: "",
 		erpSpuId: "",
 		quantity: null,
@@ -438,87 +333,29 @@ const removeSelectRowEvent = () => {
 	}
 }
 
+// 可编辑表格行勾选
+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 = async () => {
-	state.selectedSpuObjs = [...state.editableTableData]
+const handleClickSpuSelect = () => erpSpuSelectDialogRef.value.openDialog()
 
-	state.spuSelectDialogVisible = true
-	spuListLoading.value = true
-	try {
-		const { code, data } = await getCgPlanSpuPage().finally(() => (spuListLoading.value = false))
-		if (code === 0) {
-			state.spuDataList = data.records.map((item: RowVO) => ({ ...item, erpSpuId: 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) {
-		state.spuDataList = []
-		spuListLoading.value = false
-	}
-}
-
-// 点击商品列表表格行
-const rowClick = (row: any) => {
-	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.erpSpuId === row.erpSpuId),
-				1,
-		  )
-	console.log("click-select", state.selectedSpuObjs)
-	spuMultipleTableRef.value.toggleRowSelection(row)
-}
-
-// 选中商品列表表格行
-const handleSelect = (selectedRows: any[], row: any) => {
-	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.erpSpuId === row.erpSpuId),
-				1,
-		  )
-	console.log("check-select", state.selectedSpuObjs)
-}
-
-// 全选和反全选商品列表表格行
-const handleSelectAll = (selectedRows: any[]) => {
-	if (selectedRows.length > 0) {
-		selectedRows.forEach((row: any) => {
-			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.erpSpuId === row.erpSpuId)
-			if (index !== -1) {
-				state.selectedSpuObjs.splice(index, 1)
-			}
-		})
-	}
-	console.log("checkAll-select", state.selectedSpuObjs)
-}
-
-// 商品表格多选
-const selectionChangeHandle = (rows: any) => {
-	// console.log("onChange-selects", rows)
-}
-
-// 商品选择对话框确认
-const handleSelectDialogConfirm = () => {
-	console.log(state.editableTableData, state.selectedSpuObjs)
+// 获取被选择的商品行
+const getSelectedSpuRows = (selectionRows: any) => {
+	console.log("被选择的商品行", selectionRows)
 
 	// 筛选新勾选的项
-	const addedItems = state.selectedSpuObjs
-		.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
+	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标志
 	// 仅添加新勾选的项
@@ -526,7 +363,7 @@ const handleSelectDialogConfirm = () => {
 
 	// 筛选取消勾选的项
 	const removedItems = state.editableTableData.filter(
-		(item: any) => !state.selectedSpuObjs.some((selectedItem: any) => selectedItem.erpSpuId === item.erpSpuId),
+		(item: any) => !selectionRows.some((selectedItem: any) => selectedItem.erpSpuId === item.erpSpuId),
 	)
 	// 仅移除取消勾选的项
 	state.editableTableData = state.editableTableData.filter(
@@ -539,7 +376,7 @@ const handleSelectDialogConfirm = () => {
 	// 		$table.setRow(item)
 	// 	}
 	// })
-	state.spuSelectDialogVisible = false
+	state.erpSpuSelectDialogVisible = false
 	console.log("state.editableTableData", state.editableTableData)
 }
 
@@ -642,13 +479,13 @@ const submitData = async () => {
 // 清空填写的数据 返回 true
 const clearData = () => {
 	for (const key in baseDataForm) {
-		if (key === "planCode" || key === "id") continue
+		if (key === "planCode" || key === "id" || key === "planDate") continue
 		baseDataForm[key] = ""
 	}
 	state.insertedRowNumber = 0
 	state.editableTableData = []
+	state.erpSpuItemsMemo = []
 	state.selectedRowsErpSpuIds = []
-	state.selectedSpuObjs = []
 	return true
 }
 

src/views/supermarketerp/smErpInventoryRecords/form.vue

@@ -1,203 +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="单据编号(规则生成，出入库编号)" prop="inventoryCode">
-        <el-input v-model="form.inventoryCode" placeholder="请输入单据编号(规则生成，出入库编号)"/>
-      </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="单据日期" prop="inventoryDate">
-        <el-input v-model="form.inventoryDate" placeholder="请输入单据日期"/>
-      </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="单据类型(字典inventory_type)采购入库、采购退货、盘点入库等" prop="inventoryType">
-          <el-select v-model="form.inventoryType" placeholder="请选择单据类型(字典inventory_type)采购入库、采购退货、盘点入库等">
-            <el-option :value="item.value" :label="item.label" v-for="(item, index) in inventory_type" :key="index"></el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）" prop="sourceId">
-        <el-input v-model="form.sourceId" placeholder="请输入来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）"/>
-      </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="仓库id" prop="warehouseId">
-        <el-input v-model="form.warehouseId" placeholder="请输入仓库id"/>
-      </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="经办人id" prop="handlerUserId">
-          <el-select v-model="form.handlerUserId" placeholder="请选择经办人id">
-            <el-option label="请选择">0</el-option>
-          </el-select>
-        </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="审批状态" prop="checkStatus">
-        <el-input v-model="form.checkStatus" placeholder="请输入审批状态"/>
-      </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="审批人id" prop="checkUserId">
-        <el-input v-model="form.checkUserId" placeholder="请输入审批人id"/>
-      </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="审核日期" prop="checkTime">
-        <el-input v-model="form.checkTime" placeholder="请输入审核日期"/>
-      </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="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="入库总金额" prop="totalAmount">
-        <el-input v-model="form.totalAmount" placeholder="请输入入库总金额"/>
-      </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="SmErpInventoryRecordsDialog">
-import { useDict } from '/@/hooks/dict';
-import { useMessage } from "/@/hooks/message";
-import { getObj, addObj, putObj } from '/@/api/supermarketerp/smErpInventoryRecords'
-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,check_status } = useDict('erp_order_type','inventory_type','check_status')
-
-// 提交表单数据
-const form = reactive({
-		id:'',
-	  inventoryCode: '',
-	  inventoryDate: '',
-	  inventoryType: '',
-	  sourceId: '',
-	  warehouseId: '',
-	  handlerUserId: '',
-	  checkStatus: '',
-	  checkUserId: '',
-	  checkTime: '',
-	  merchantId: '',
-	  deptId: '',
-	  supplierId: '',
-	  remark: '',
-	  orderType: '',
-	  totalAmount: '',
-});
-
-// 定义校验规则
-const dataRules = ref({
-        inventoryCode: [{required: true, message: '单据编号(规则生成，出入库编号)不能为空', trigger: 'blur'}],
-        inventoryDate: [{required: true, message: '单据日期不能为空', trigger: 'blur'}],
-        inventoryType: [{required: true, message: '单据类型(字典inventory_type)采购入库、采购退货、盘点入库等不能为空', trigger: 'blur'}],
-})
-
-// 打开弹窗
-const openDialog = (id: string) => {
-  visible.value = true
-  form.id = ''
-
-  // 重置表单数据
-	nextTick(() => {
-		dataFormRef.value?.resetFields();
-	});
-
-  // 获取smErpInventoryRecords信息
-  if (id) {
-    form.id = id
-    getsmErpInventoryRecordsData(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 getsmErpInventoryRecordsData = (id: string) => {
-  // 获取数据
-  loading.value = true
-  getObj(id).then((res: any) => {
-    Object.assign(form, res.data)
-  }).finally(() => {
-    loading.value = false
-  })
-};
-
-// 暴露变量
-defineExpose({
-  openDialog
-});
-</script>

src/views/supermarketerp/smErpInventoryRecords/index.vue

@@ -1,114 +1,128 @@
 <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"></el-date-picker>
-      </el-form-item>
-      <el-form-item label="单据类型(字典inventory_type)采购入库、采购退货、盘点入库等" prop="inventoryType">
-            <el-select v-model="state.queryForm.inventoryType" placeholder="请选择单据类型(字典inventory_type)采购入库、采购退货、盘点入库等">
-              <el-option :label="item.label" :value="item.value" v-for="(item, index) in inventory_type" :key="index"></el-option>
-            </el-select>
-      </el-form-item>
-      <el-form-item label="经办人id" prop="handlerUserId">
-            <el-select v-model="state.queryForm.handlerUserId" placeholder="请选择经办人id">
-              <el-option label="请选择">0</el-option>
-            </el-select>
-      </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-option>
-            </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="formDialogRef.openDialog()"
-            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"></right-toolbar>
-        </div>
-      </el-row>
-      <el-table :data="state.dataList" v-loading="state.loading" border
-        :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+	<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">
+						<el-select v-model="state.queryForm.handlerUserId" placeholder="请选择经办人id">
+							<el-option label="请选择" value="0" />
+						</el-select>
+					</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="40" />
-          <el-table-column prop="inventoryCode" label="单据编号(规则生成，出入库编号)"  show-overflow-tooltip/>
-          <el-table-column prop="inventoryDate" label="单据日期"  show-overflow-tooltip/>
-          <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="sourceId" label="来源ID（根据类型指向对应的表，如采购单ID、退货单ID等）"  show-overflow-tooltip/>
-          <el-table-column prop="warehouseId" label="仓库id"  show-overflow-tooltip/>
-          <el-table-column prop="handlerUserId" label="经办人id"  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="checkUserId" label="审批人id"  show-overflow-tooltip/>
-          <el-table-column prop="checkTime" label="审核日期"  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="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="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="formDialogRef.openDialog(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>
-
-    <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-
-  </div>
+				@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 { BasicTableProps, useTable } from "/@/hooks/table";
-import { fetchList, delObjs } from "/@/api/supermarketerp/smErpInventoryRecords";
-import { useMessage, useMessageBox } from "/@/hooks/message";
-import { useDict } from '/@/hooks/dict';
+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 FormDialog = defineAsyncComponent(() => import('./form.vue'));
-// 定义查询字典
-
-const { erp_order_type,inventory_type,check_status } = useDict('erp_order_type','inventory_type','check_status')
-// 定义变量内容
+const router = useRouter()
+const { erp_order_type, inventory_type, check_status } = useDict("erp_order_type", "inventory_type", "check_status")
 const formDialogRef = ref()
 // 搜索变量
 const queryRef = ref()
@@ -118,54 +132,57 @@ const selectObjs = ref([]) as any
 const multiple = ref(true)
 
 const state: BasicTableProps = reactive<BasicTableProps>({
-  queryForm: {},
-  pageList: fetchList
+	queryForm: {},
+	pageList: fetchList,
 })
 
 //  table hook
-const {
-  getDataList,
-  currentChangeHandle,
-  sizeChangeHandle,
-  sortChangeHandle,
-  downBlobFile,
-	tableStyle
-} = useTable(state)
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
 
 // 清空搜索条件
 const resetQuery = () => {
-  // 清空搜索条件
-  queryRef.value?.resetFields()
-  // 清空多选
-  selectObjs.value = []
-  getDataList()
+	// 清空搜索条件
+	queryRef.value?.resetFields()
+	// 清空多选
+	selectObjs.value = []
+	getDataList()
 }
 
 // 导出excel
 const exportExcel = () => {
-  downBlobFile('/supermarket/smErpInventoryRecords/export', Object.assign(state.queryForm, { ids: selectObjs }), 'smErpInventoryRecords.xlsx')
+	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;
-};
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
+}
+
+// 点击创建出库入库记录表
+const handleClickCreateInventoryRecord = () => router.push({ path: "/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsOption" })
+// 点击编辑出库入库记录表
+const handleClickEditInventoryRecord = (id: string) =>
+	router.push({ path: "/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsOption", query: { id } })
 
 // 删除操作
 const handleDelete = async (ids: string[]) => {
-  try {
-    await useMessageBox().confirm('此操作将永久删除');
-  } catch {
-    return;
-  }
+	try {
+		await useMessageBox().confirm("此操作将永久删除")
+	} catch {
+		return
+	}
 
-  try {
-    await delObjs(ids);
-    getDataList();
-    useMessage().success('删除成功');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  }
-};
+	try {
+		await delObjs(ids)
+		getDataList()
+		useMessage().success("删除成功")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}
 </script>

src/views/supermarketerp/smErpInventoryRecords/smErpInventoryRecordsOption.vue

@@ -0,0 +1,677 @@
+<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="140px">
+				<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="handlerUserId">
+            <el-select v-model.trim="baseDataForm.handlerUserId" placeholder="请选择采购订单" style="width: 200px">
+              <el-option label="请选择" value="0" />
+            </el-select>
+          </el-form-item>
+					<el-form-item label="经办人" prop="handlerUserId">
+						<el-select v-model.trim="baseDataForm.handlerUserId" placeholder="请选择经办人id" style="width: 200px">
+							<el-option label="请选择" value="0" />
+						</el-select>
+					</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-input v-model.trim="baseDataForm.supplierId" placeholder="请输入货商" style="width: 200px" />
+					</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>
+
+			<vxe-table
+				ref="editableTableRef"
+				border
+				:loading="loading"
+				show-overflow
+				max-height="400"
+				: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="planId" title="采购" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+					<template #edit="{ row }">
+						<el-input v-model="row.planId" />
+					</template>
+				</vxe-column> -->
+
+				<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-select>
+					</template>
+					<template #default="{ row }">
+						<span v-if="row.unitId">{{ 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.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice }}
+					</template>
+				</vxe-column>
+
+				<vxe-column field="totalAmount" title="累计总金额">
+					<template #default="{ row }">
+						{{
+							row.unitId && row.quantity
+								? Number(row.erpUnitVos?.find((item: any) => item.id == row.unitId)?.purchasePrice) * row.quantity
+								: ""
+						}}
+					</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-column field="merchantId" title="商户编号" :edit-render="{ autoFocus: 'input', placeholder: '请选择' }">-->
+				<!--					<template #edit="{ row }">-->
+				<!--						<select-mch v-model="row.merchantId" />-->
+				<!--					</template>-->
+				<!--				</vxe-column>-->
+
+				<!--				<vxe-column field="deptId" title="部门id" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">-->
+				<!--					<template #edit="{ row }">-->
+				<!--						<el-input v-model="row.deptId" />-->
+				<!--					</template>-->
+				<!--				</vxe-column>-->
+			</vxe-table>
+
+			<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>
+
+			<!-- 商品选择对话框 -->
+			<el-dialog
+				v-model="state.spuSelectDialogVisible"
+				title="选择商品"
+				width="70%"
+				:close-on-click-modal="false"
+				draggable
+				@close="state.selectedSpuObjs = []"
+			>
+				<!-- <el-row>
+					<el-form :model="foodQueryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
+						<el-form-item label="商品名称" prop="name">
+							<el-input placeholder="请输入商品名称" v-model="foodQueryForm.name" />
+						</el-form-item>
+						<el-form-item label="商品分类" prop="categoryId">
+							<select-ctcg v-model="foodQueryForm.categoryId" style="width: 200px" />
+						</el-form-item>
+						<el-form-item>
+							<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
+							<el-button icon="Refresh" @click="resetQuery">重置</el-button>
+						</el-form-item>
+					</el-form>
+				</el-row> -->
+
+				<el-table
+					ref="spuMultipleTableRef"
+					:data="state.spuDataList"
+					v-loading="spuListLoading"
+					@select="handleSelect"
+					@select-all="handleSelectAll"
+					@selection-change="selectionChangeHandle"
+					:row-key="(row:any) => row.id"
+					:reserve-selection="true"
+					@row-click="rowClick"
+					:row-style="{ cursor: 'pointer' }"
+				>
+					<el-table-column type="selection" width="40" align="center" fixed="left" />
+					<el-table-column type="index" label="#" width="50" align="center" fixed="left" />
+					<el-table-column prop="productName" label="商品名称" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="barcode" label="自编码/条码" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="productCode" label="货号" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="brandId" label="品牌" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="categoryId" label="分类" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="deptId" label="商户" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="supplierId" label="货商" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="status" label="状态" min-width="100px" align="center" show-overflow-tooltip />
+					<el-table-column prop="picUrl" label="商品封面图" align="center" show-overflow-tooltip>
+						<template #default="scope">
+							<preview-image @click.stop :src="scope.row.picUrl" />
+						</template>
+					</el-table-column>
+					<el-table-column prop="stock" label="库存" min-width="100px" align="center" show-overflow-tooltip />
+				</el-table>
+				<!-- <pagination
+					@size-change="sizeChangeHandle"
+					@current-change="currentChangeHandle"
+					v-model:current-page="foodQueryForm.current"
+					v-model:page-size="foodQueryForm.size"
+					:total="total"
+				/> -->
+
+				<template #footer>
+					<el-button @click="state.spuSelectDialogVisible = false">取消</el-button>
+					<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="spuListLoading">确认</el-button>
+				</template>
+			</el-dialog>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="smErpInventoryRecordsOption">
+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, getCgPlanSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
+import { VxeTableEvents, VxeTablePropTypes, type VxeTableInstance } from "vxe-table"
+import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
+import { storePrice } from "/@/utils/formatMoney"
+import { formatDate } from "/@/utils/formatTime"
+import { useDict } from "/@/hooks/dict"
+
+// 基本表单数据类型
+interface FormVO {
+	id: string | undefined
+	inventoryCode: string
+	inventoryDate: string
+	inventoryType: string
+	sourceId: string
+	warehouseId: string
+	handlerUserId: string
+	checkStatus: string
+	checkUserId: string
+	checkTime: string
+	merchantId: string
+	deptId: string
+	supplierId: string
+	remark: string
+	orderType: string
+	totalAmount: string
+	[key: string]: string | undefined
+}
+
+// 可编辑表格行数据类型
+interface RowVO {
+	id?: string
+	erpSpuId: string
+	quantity: number | null
+	unitPrice: number | null
+	totalAmount: number | null
+	remark: string
+	unitId: string
+}
+const { erp_order_type, inventory_type, check_status } = useDict("erp_order_type", "inventory_type", "check_status")
+const router = useRouter()
+const route = useRoute()
+const loading = ref(false) // 采购计划加载
+const spuListLoading = ref(false) // 对话框商品列表加载
+const baseDataFormRef = ref() // 基本数据表单ref
+const editableTableRef = ref<VxeTableInstance<RowVO>>() // 可编辑表格ref
+const spuMultipleTableRef = ref() // 对话框多选表格ref
+const supplierTypeDict = ref<any[]>([]) // 货商下拉选项
+
+// 基本信息表单数据
+const baseDataForm = reactive<FormVO>({
+	id: "",
+	inventoryCode: "",
+	inventoryDate: formatDate(new Date(), "YYYY-mm-dd"),
+	inventoryType: "3",
+	sourceId: "",
+	warehouseId: "",
+	handlerUserId: "",
+	checkStatus: "",
+	checkUserId: "",
+	checkTime: "",
+	merchantId: "",
+	deptId: "",
+	supplierId: "",
+	remark: "",
+	orderType: "1",
+	totalAmount: "",
+})
+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: [], // 商品列表
+	selectedSpuObjs: [], // 已选中的商品列表项
+})
+
+// 基本信息表单校验规则
+const dataRules = ref({
+	inventoryCode: [{ required: true, message: "出入库记录表编号不能为空", trigger: "blur" }],
+	inventoryDate: [{ required: true, message: "出入库记录表单据日期不能为空", trigger: "blur" }],
+	supplierId: [{ required: true, message: "货商不能为空", trigger: "blur" }],
+})
+
+// 可编辑表格校验规则
+const validRules = ref<VxeTablePropTypes.EditRules<RowVO>>({
+	unitId: [{ required: true, message: "必须选择" }],
+	quantity: [{ required: true, type: "number", min: 1, max: 99, message: "数值范围1~99" }],
+})
+
+// 初始化数据
+const getInitData = async () => {
+	baseDataForm.id = undefined
+	const id = route.query.id as string
+	if (id) {
+		loading.value = true
+		// 获取采购计划数据 & 获取简要商品列表
+		const [cgPlanData, erpSpuSimpleAll] = await Promise.allSettled([getObj(id), getErpSpuSimpleAll()])
+			.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
+		}
+		erpSpuSimpleAll && erpSpuSimpleAll.code === 0 && (state.erpSpuSimpleAll = erpSpuSimpleAll.data)
+	}
+
+	// 获取货商选项 & 获取采购计划编号
+	const [supplierTypeOptions, planCode] = await Promise.allSettled([getSupplierTypeOptions(), getPlanCode({ type: 3 })]).then((results) =>
+		results.map((result) => (result.status === "fulfilled" ? result.value : null)),
+	)
+	supplierTypeOptions && supplierTypeOptions.code === 0 && (supplierTypeDict.value = supplierTypeOptions.data)
+	planCode && planCode.code === 0 && (baseDataForm.inventoryCode = planCode.data)
+}
+
+// 可编辑表格行勾选
+const selectChangeEvent: VxeTableEvents.CheckboxChange<RowVO> = ({ checked }) => {
+	const $table = editableTableRef.value
+	if ($table) {
+		const records = $table.getCheckboxRecords()
+		console.log(checked ? "勾选事件" : "取消事件", records)
+		state.selectedRowsErpSpuIds = records.map((item) => item.erpSpuId)
+	}
+}
+
+// 顶部表格行新增
+const addEvent = () => {
+	const newRow: RowVO = {
+		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: RowVO = {
+		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: RowVO = {
+		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 handleClickSpuSelect = async () => {
+	state.selectedSpuObjs = [...state.editableTableData]
+
+	state.spuSelectDialogVisible = true
+	spuListLoading.value = true
+	try {
+		const { code, data } = await getCgPlanSpuPage().finally(() => (spuListLoading.value = false))
+		if (code === 0) {
+			state.spuDataList = data.records.map((item: RowVO) => ({ ...item, erpSpuId: 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) {
+		state.spuDataList = []
+		spuListLoading.value = false
+	}
+}
+
+// 点击商品列表表格行
+const rowClick = (row: any) => {
+	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.erpSpuId === row.erpSpuId),
+				1,
+		  )
+	console.log("click-select", state.selectedSpuObjs)
+	spuMultipleTableRef.value.toggleRowSelection(row)
+}
+
+// 选中商品列表表格行
+const handleSelect = (selectedRows: any[], row: any) => {
+	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.erpSpuId === row.erpSpuId),
+				1,
+		  )
+	console.log("check-select", state.selectedSpuObjs)
+}
+
+// 全选和反全选商品列表表格行
+const handleSelectAll = (selectedRows: any[]) => {
+	if (selectedRows.length > 0) {
+		selectedRows.forEach((row: any) => {
+			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.erpSpuId === row.erpSpuId)
+			if (index !== -1) {
+				state.selectedSpuObjs.splice(index, 1)
+			}
+		})
+	}
+	console.log("checkAll-select", state.selectedSpuObjs)
+}
+
+// 商品表格多选
+const selectionChangeHandle = (rows: any) => {
+	// console.log("onChange-selects", rows)
+}
+
+// 商品选择对话框确认
+const handleSelectDialogConfirm = () => {
+	console.log(state.editableTableData, state.selectedSpuObjs)
+
+	// 筛选新勾选的项
+	const addedItems = state.selectedSpuObjs
+		.filter((item: any) => !state.editableTableData.some((editableTableItem: RowVO) => editableTableItem.erpSpuId === item.erpSpuId))
+		.map((addItem) => {
+			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) => !state.selectedSpuObjs.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.spuSelectDialogVisible = false
+	console.log("state.editableTableData", state.editableTableData)
+}
+
+// 整理数据
+const cgPlanSpuItems = computed(() => {
+	return state.editableTableData.map((item: any) => {
+		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 ? storePrice(unit?.purchasePrice) : 0,
+			totalAmount: Number(unit?.purchasePrice || 0) * item.quantity,
+			remark: item.remark,
+			unitId: item.unitId,
+		}
+	})
+})
+
+// 点击继续添加
+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/smErpInventoryRecords/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.selectedRowsErpSpuIds = []
+	state.selectedSpuObjs = []
+	return true
+}
+
+onMounted(() => {
+	getInitData()
+})
+</script>

src/views/supermarketerp/supermarketSpu/components/supermarketUnit/index.vue

@@ -60,12 +60,7 @@
 			</div>
 		</el-row>
 		<el-form-item label="" prop="supermarketUnitEntityList">
-			<el-table
-				:data="supermarketUnitEntityList"
-				border
-				:cell-style="tableStyle.cellStyle"
-				:header-cell-style="tableStyle.headerCellStyle"
-			>
+			<el-table :data="supermarketUnitEntityList" border :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle">
 				<!-- <el-table-column type="selection" width="40" align="center" fixed /> -->
 				<el-table-column type="index" label="#" width="50" />
 				<el-table-column prop="barCode" label="条码" show-overflow-tooltip />
@@ -120,9 +115,6 @@
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
 
 const supermarketUnitEntityList = defineModel<any>("supermarketUnitEntityList", { default: [] })
-const props = defineProps<{
-	defaultSpuUnit: any
-}>()
 
 const formDialogRef = ref()
 // 搜索变量
@@ -150,36 +142,36 @@ const tableStyle = {
 }
 
 // 根据基础信息的部分填写项自动生成一条默认包装单位
-watch(
-	() => props.defaultSpuUnit,
-	(newValue, oldValue) => {
-		console.log(newValue, oldValue)
+// watch(
+// 	() => props.defaultSpuUnit,
+// 	(newValue, oldValue) => {
+// 		console.log(newValue, oldValue)
 
-		const defaultSpuUnitIndex = supermarketUnitEntityList.value.findIndex((item: any) => {
-			return (
-				item.barCode == oldValue.barCode &&
-				item.unit == oldValue.unit &&
-				item.packageNum == oldValue.packageNum &&
-				item.retailPrice == oldValue.retailPrice &&
-				item.purchasePrice == oldValue.purchasePrice &&
-				item.promotionPrice == oldValue.promotionPrice &&
-				item.costPrice == oldValue.costPrice
-			)
-		})
-		console.log(defaultSpuUnitIndex)
+// 		const defaultSpuUnitIndex = supermarketUnitEntityList.value.findIndex((item: any) => {
+// 			return (
+// 				item.barCode == oldValue.barCode &&
+// 				item.unit == oldValue.unit &&
+// 				item.packageNum == oldValue.packageNum &&
+// 				item.retailPrice == oldValue.retailPrice &&
+// 				item.purchasePrice == oldValue.purchasePrice &&
+// 				item.promotionPrice == oldValue.promotionPrice &&
+// 				item.costPrice == oldValue.costPrice
+// 			)
+// 		})
+// 		console.log(defaultSpuUnitIndex)
 
-		if (defaultSpuUnitIndex !== -1) {
-			supermarketUnitEntityList.value[defaultSpuUnitIndex] = newValue
-		} else {
-			supermarketUnitEntityList.value.push(newValue)
-		}
-		console.log(supermarketUnitEntityList.value)
-	},
-	{
-		deep: true,
-		immediate: true,
-	},
-)
+// 		if (defaultSpuUnitIndex !== -1) {
+// 			supermarketUnitEntityList.value[defaultSpuUnitIndex] = newValue
+// 		} else {
+// 			supermarketUnitEntityList.value.push(newValue)
+// 		}
+// 		console.log(supermarketUnitEntityList.value)
+// 	},
+// 	{
+// 		deep: true,
+// 		immediate: true,
+// 	},
+// )
 
 const getDataList = (formData: any) => {
 	console.log(formData)

src/views/supermarketerp/supermarketSpu/form.vue

@@ -27,12 +27,7 @@
 						<el-col :span="12" class="mb20">
 							<el-form-item label="货商" prop="supplierId">
 								<el-select v-model="form.supplierId" placeholder="请选择货商">
-									<el-option
-										v-for="item in supplierOptions"
-										:key="item?.id"
-										:label="item?.typeName"
-										:value="item?.id"
-									/>
+									<el-option v-for="item in supplierOptions" :key="item?.id" :label="item?.typeName" :value="item?.id" />
 								</el-select>
 							</el-form-item>
 						</el-col>
@@ -53,12 +48,7 @@
 						<el-col :span="12" class="mb20">
 							<el-form-item label="商品性质" prop="productNature">
 								<el-select v-model="form.productNature" placeholder="请选择商品性质">
-									<el-option
-										:value="item.value"
-										:label="item.label"
-										v-for="(item, index) in supermarket_nature"
-										:key="index"
-									></el-option>
+									<el-option :value="item.value" :label="item.label" v-for="(item, index) in supermarket_nature" :key="index"></el-option>
 								</el-select>
 							</el-form-item>
 						</el-col>
@@ -118,9 +108,7 @@
 						<el-col :span="24" class="mb20">
 							<el-form-item label="商品状态" prop="status">
 								<el-radio-group v-model="form.status">
-									<el-radio :label="item.value" v-for="(item, index) in status" border :key="index"
-										>{{ item.label }}
-									</el-radio>
+									<el-radio :label="item.value" v-for="(item, index) in status" border :key="index">{{ item.label }} </el-radio>
 								</el-radio-group>
 							</el-form-item>
 						</el-col>
@@ -157,10 +145,7 @@
 					</el-row>
 				</el-tab-pane>
 				<el-tab-pane label="包装单位" name="包装单位" style="overflow-y: auto; height: 60vh">
-					<supermarketUnit
-						v-model:supermarketUnitEntityList="form.smErpUnitEntityList"
-						:defaultSpuUnit="defaultSpuUnit"
-					/>
+					<supermarketUnit v-model:supermarketUnitEntityList="form.smErpUnitEntityList" />
 				</el-tab-pane>
 				<el-tab-pane label="辅助条码" name="辅助条码" style="overflow-y: auto; height: 60vh">
 					<supermarketAuxiliaryCode v-model:supermarketAuxiliaryCodeEntityList="form.smErpAuxiliaryCodeEntityList" />
@@ -173,9 +158,7 @@
 				<el-button @click="visible = false">取消</el-button>
 				<el-button v-if="currentTabPaneIndex != 0" type="primary" @click="currentTabPaneIndex--">上一步</el-button>
 				<el-button v-if="currentTabPaneIndex != 2" type="primary" @click="currentTabPaneIndex++">下一步</el-button>
-				<el-button v-if="currentTabPaneIndex == 2" type="primary" @click="onSubmit" :disabled="loading">
-					确 认
-				</el-button>
+				<el-button v-if="currentTabPaneIndex == 2" type="primary" @click="onSubmit" :disabled="loading"> 确 认 </el-button>
 			</span>
 		</template>
 	</el-dialog>
@@ -184,13 +167,7 @@
 <script setup lang="ts">
 import { useDict } from "/@/hooks/dict"
 import { useMessage } from "/@/hooks/message"
-import {
-	getObj,
-	addObj,
-	putObj,
-	getSupermarketCategory,
-	getSupermarketBrand,
-} from "/@/api/supermarketerp/supermarketSpu"
+import { getObj, addObj, putObj, getSupermarketCategory, getSupermarketBrand } from "/@/api/supermarketerp/supermarketSpu"
 import { getSupplierTypeOptions } from "/@/api/supermarketerp/smErpSupplier"
 import { rule } from "/@/utils/validate"
 import supermarketAuxiliaryCode from "./components/supermarketAuxiliaryCode/index.vue"
@@ -272,18 +249,18 @@ const categoryOptions = ref<any>([]) // 商品分类的下拉选项
 const brandOptions = ref<any>([]) // 超市品牌的下拉选项
 const supplierOptions = ref<any>([]) // 货商的下拉选项
 // 默认包装单位
-const defaultSpuUnit = computed(() => ({
-	flag: "default",
-	barCode: form.barcode,
-	unit: form.unit,
-	packageNum: form.packageNum,
-	retailPrice: form.retailPrice,
-	purchasePrice: form.purchasePrice,
-	promotionPrice: form.promotionPrice,
-	costPrice: form.costPrice,
-	spec: form.spec,
-	status: "0",
-}))
+// const defaultSpuUnit = computed(() => ({
+// 	flag: "default",
+// 	barCode: form.barcode,
+// 	unit: form.unit,
+// 	packageNum: form.packageNum,
+// 	retailPrice: form.retailPrice,
+// 	purchasePrice: form.purchasePrice,
+// 	promotionPrice: form.promotionPrice,
+// 	costPrice: form.costPrice,
+// 	spec: form.spec,
+// 	status: "0",
+// }))
 
 // 打开弹窗
 const openDialog = async (id: string) => {
@@ -345,8 +322,7 @@ const onSubmit = async () => {
 	const valid = await dataFormRef.value.validate().catch(() => {})
 	if (!valid) useMessage().warning("基础信息必填项未填写完整")
 	if (!form.smErpUnitEntityList || form.smErpUnitEntityList.length <= 0) useMessage().warning("请添加包装单位")
-	if (!form.smErpAuxiliaryCodeEntityList || form.smErpAuxiliaryCodeEntityList.length <= 0)
-		useMessage().warning("请添加辅助条码")
+	if (!form.smErpAuxiliaryCodeEntityList || form.smErpAuxiliaryCodeEntityList.length <= 0) useMessage().warning("请添加辅助条码")
 	if (!valid) return false
 
 	try {