组件调整

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

@@ -10,8 +10,8 @@ export function getPlanCode(params: { type: 1 | 2 }) {
 	})
 }
 
-// 获取采购计划和订单所选择的商品的列表
-export function getCgPlanSpuPage() {
+// 获取erp商品列表
+export function getErpSpuPage() {
 	return request({
 		url: "/supermarket/smErpCgPlan/erpSpuPage",
 		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/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,81 @@
+<template>
+	<!-- 关联采购申请单对话框 -->
+	<el-dialog
+		v-model="linkCgCodeDialogVisible"
+		title="选择采购单"
+		width="70%"
+		:close-on-click-modal="false"
+		draggable
+		@close="linkCgCodeDialogVisible = false"
+	>
+		<vxe-table
+			ref="linkCodeTableRef"
+			border
+			v-loading="linkCodeLoading"
+			:row-config="{ isCurrent: true, isHover: true }"
+			:radio-config="{ labelField: '', trigger: 'row' }"
+			:data="cgsqPage"
+		>
+			<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"
+		/> -->
+
+		<template #footer>
+			<el-button @click="linkCgCodeDialogVisible = false">取消</el-button>
+			<el-button type="primary" @click="getRadioRows" :disabled="linkCodeLoading">确认</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="linkCgCodeDialog">
+import { ref } from "vue"
+import { getCgsqPage } from "/@/api/supermarketerp/smErpCgDd"
+
+const linkCgCodeDialogVisible = defineModel()
+const emit = defineEmits(["getSelectedCgPlan"])
+
+const linkCodeLoading = ref(false) // 关联采购申请单对话框加载状态
+const linkCodeTableRef = ref() // 关联补货单对话框表格ref
+const cgsqPage = ref([]) // 采购申请列表数据
+
+// 打开关联补货单对话框
+const openLinkCodeDialog = async () => {
+	linkCgCodeDialogVisible.value = true
+	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 getRadioRows = () => {
+	const $table = linkCodeTableRef.value
+	if ($table) {
+		const currRow = $table.getRadioRecord()
+		console.log("currRadioRow", currRow)
+		emit("getSelectedCgPlan", currRow)
+	}
+}
+
+defineExpose({
+	openLinkCodeDialog,
+})
+</script>

src/views/supermarketerp/smErpCgDd/smErpCgDdOption.vue

@@ -12,16 +12,14 @@
 					</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="linkCode">
 						<el-input
 							v-model="baseDataForm.linkCode"
 							:suffix-icon="Search"
-							@click="openLinkCodeDialog"
+							@click="handleClickLinkCode"
 							readonly
 							placeholder="请选择补货申请单"
 							style="width: 200px"
@@ -97,12 +95,6 @@
 
 				<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>
@@ -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,182 +162,43 @@
 			</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"
+			/>
 
 			<!-- 关联采购申请单对话框 -->
-			<el-dialog v-model="state.linkCodeVisible" title="选择商品" width="70%" :close-on-click-modal="false" draggable @close="">
-				<!-- <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> -->
-
-				<vxe-table
-					ref="linkCodeTableRef"
-					border
-					v-loading="linkCodeLoading"
-					:row-config="{ isCurrent: true, isHover: true }"
-					:radio-config="{ labelField: '', trigger: 'row' }"
-					:data="state.cgsqPage"
-				>
-					<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"
-				/> -->
-
-				<template #footer>
-					<el-button @click="state.linkCodeVisible = false">取消</el-button>
-					<el-button type="primary" @click="getRadioEvent" :disabled="linkCodeLoading">确认</el-button>
-				</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 { useMessage } from "/@/hooks/message"
-import { getObj, addObj, putObj, getCgsqPage } from "/@/api/supermarketerp/smErpCgDd"
-import { getPlanCode, getCgPlanSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
+import { getObj, addObj, putObj } from "/@/api/supermarketerp/smErpCgDd"
+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"
 import { formatDate } from "/@/utils/formatTime"
 import { Search } from "@element-plus/icons-vue"
-
-// 基本表单数据类型
-interface FormVO {
-	id: string | undefined
-	code: string
-	dDate: string
-	warehouseId: string
-	handlerUserId: string
-	linkCode: 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 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 linkCodeLoading = 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 linkCodeTableRef = ref() // 关联补货单对话框表格ref
+const editableTableRef = ref<VxeTableInstance<any>>() // 可编辑表格ref
 const supplierTypeDict = ref<any[]>([]) // 货商下拉选项
-
 // 基本信息表单数据
-const baseDataForm = reactive<FormVO>({
+const baseDataForm = reactive<any>({
 	id: "",
 	code: "",
 	dDate: formatDate(new Date(), "YYYY-mm-dd"),
@@ -377,29 +218,23 @@ 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
-	cgsqPage: any[]
+	erpSpuSelectDialogVisible: boolean
+	linkCgCodeDialogVisible: boolean
 }>({
 	editableTableData: [], // 可编辑表格数据
 	erpSpuItemsMemo: [], // 请求到的可编辑表格商品数据的缓存
 	selectedRowsErpSpuIds: [], // 可编辑表格已选行的ErpSpuId
 	insertedRowNumber: 0, // 可编辑表格插入行的行号
 	erpSpuSimpleAll: [], // 简要商品列表
-
-	spuSelectDialogVisible: false, // 商品选择对话框开关
-	spuDataList: [], // 商品列表
-	selectedSpuObjs: [], // 已选中的商品列表项
 	linkCodeVisible: false, // 关联采购申请单对话框开关
-
-	cgsqPage: [], // 对话框采购申请单分页数据
+	erpSpuSelectDialogVisible: false, // 商品选择对话框开关
+	linkCgCodeDialogVisible: false, // 关联采购申请单对话框开关
 })
 
 // 基本信息表单校验规则
@@ -410,7 +245,7 @@ const dataRules = ref({
 })
 
 // 可编辑表格校验规则
-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" }],
 })
@@ -444,47 +279,20 @@ const getInitData = async () => {
 	planCode && planCode.code === 0 && (baseDataForm.code = planCode.data)
 }
 
-// 打开关联补货单对话框
-const openLinkCodeDialog = async () => {
-	state.linkCodeVisible = true
-	linkCodeLoading.value = true
-	try {
-		const res = await getCgsqPage().finally(() => (linkCodeLoading.value = false))
-		if (res.code === 0) {
-			state.cgsqPage = res.data.records
-		}
-	} catch (error) {
-		state.cgsqPage = []
-		linkCodeLoading.value = false
-	}
-}
+// 点击关联采购申请编号
+const handleClickLinkCode = () => linkCgCodeDialogRef.value.openLinkCodeDialog()
 
-// 获取关联补货单对话框表格被单选行
-const getRadioEvent = () => {
-	const $table = linkCodeTableRef.value
-	if ($table) {
-		const currRow = $table.getRadioRecord()
-		console.log("currRadioRow", currRow)
-		baseDataForm.linkCode = currRow.planCode
-		state.editableTableData = currRow.items
-		state.erpSpuItemsMemo = currRow.items
-		state.linkCodeVisible = false
-	}
-}
-
-// 可编辑表格行勾选
-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 getSelectedCgPlan = (selectionRows: any) => {
+	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,
@@ -504,7 +312,7 @@ const addEvent = () => {
 
 // 底部表格行新增
 const pushEvent = () => {
-	const newRow: RowVO = {
+	const newRow: any = {
 		id: "",
 		erpSpuId: "",
 		quantity: null,
@@ -524,7 +332,7 @@ const pushEvent = () => {
 
 // 在指定行插入
 const insertEvent = () => {
-	const newRow: RowVO = {
+	const newRow: any = {
 		id: "",
 		erpSpuId: "",
 		quantity: null,
@@ -553,86 +361,27 @@ 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) => {
+	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 }
@@ -642,7 +391,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(
@@ -655,7 +404,7 @@ const handleSelectDialogConfirm = () => {
 	// 		$table.setRow(item)
 	// 	}
 	// })
-	state.spuSelectDialogVisible = false
+	state.erpSpuSelectDialogVisible = false
 	console.log("state.editableTableData", state.editableTableData)
 }
 
@@ -775,8 +524,8 @@ const clearData = () => {
 	}
 	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

@@ -11,7 +11,7 @@
 					</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">
@@ -158,71 +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>
-					<el-button @click="state.spuSelectDialogVisible = false">取消</el-button>
-					<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="spuListLoading">确认</el-button>
-				</template>
-			</el-dialog>
+			<erpSpuSelectDialog
+				ref="erpSpuSelectDialogRef"
+				v-model="state.erpSpuSelectDialogVisible"
+				:selectedSpuRows="state.editableTableData"
+				@getSelectedSpuRows="getSelectedSpuRows"
+			/>
 		</div>
 	</div>
 </template>
@@ -231,47 +172,23 @@
 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, getCgPlanSpuPage, getErpSpuSimpleAll } from "/@/api/supermarketerp/common"
 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"
 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 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: "",
@@ -281,24 +198,19 @@ const baseDataForm = reactive<FormVO>({
 	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, // 商品选择对话框开关
 })
 
 // 基本信息表单校验规则
@@ -309,7 +221,7 @@ const dataRules = ref({
 })
 
 // 可编辑表格校验规则
-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" }],
 })
@@ -349,19 +261,9 @@ const getInitData = async () => {
 	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,
@@ -381,7 +283,7 @@ const addEvent = () => {
 
 // 底部表格行新增
 const pushEvent = () => {
-	const newRow: RowVO = {
+	const newRow: any = {
 		id: "",
 		erpSpuId: "",
 		quantity: null,
@@ -401,7 +303,7 @@ const pushEvent = () => {
 
 // 在指定行插入
 const insertEvent = () => {
-	const newRow: RowVO = {
+	const newRow: any = {
 		id: "",
 		erpSpuId: "",
 		quantity: null,
@@ -430,86 +332,27 @@ 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) => {
+	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 }
@@ -519,7 +362,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(
@@ -532,7 +375,7 @@ const handleSelectDialogConfirm = () => {
 	// 		$table.setRow(item)
 	// 	}
 	// })
-	state.spuSelectDialogVisible = false
+	state.erpSpuSelectDialogVisible = false
 	console.log("state.editableTableData", state.editableTableData)
 }
 
@@ -640,8 +483,8 @@ const clearData = () => {
 	}
 	state.insertedRowNumber = 0
 	state.editableTableData = []
+	state.erpSpuItemsMemo = []
 	state.selectedRowsErpSpuIds = []
-	state.selectedSpuObjs = []
 	return true
 }