采购订单关联补货申请对话框表格分步勾选

src/views/supermarketerp/smErpCgDd/components/linkCgCodeDialog.vue

@@ -1,20 +1,15 @@
 <template>
 	<!-- 关联采购申请单对话框 -->
-	<el-dialog
+	<el-dialog v-model="linkCgCodeDialogVisible" title="选择采购单" width="70%" :close-on-click-modal="false" draggable @close="onClose">
-		v-model="linkCgCodeDialogVisible"
-		title="选择采购单"
-		width="70%"
-		:close-on-click-modal="false"
-		draggable
-		@close="linkCgCodeDialogVisible = false"
-	>
 		<vxe-table
-			ref="linkCodeTableRef"
+			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>
@@ -31,10 +26,29 @@
 			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 type="primary" @click="getRadioRows" :disabled="linkCodeLoading">确认</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>
@@ -42,17 +56,22 @@
 <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 linkCodeTableRef = ref() // 关联补货单对话框表格ref
+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))
@@ -65,16 +84,30 @@ const openLinkCodeDialog = async () => {
 	}
 }
 
-// 获取关联补货单对话框表格被单选行
+// 单选时
-const getRadioRows = () => {
+const radioChangeEvent: VxeTableEvents.RadioChange<any> = ({ row }) => (currRadioRowItems.value = row.items)
-	const $table = linkCodeTableRef.value
+
-	if ($table) {
+// 获取选择的关联补货单对话框表格行数据
-		const currRow = $table.getRadioRecord()
+const getSelectedRowData = () => {
-		console.log("currRadioRow", currRow)
+	const $table = linkCgPlanTableRef.value
-		emit("getSelectedCgPlan", currRow)
+	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,
 })

src/views/supermarketerp/smErpCgDd/smErpCgDdOption.vue

@@ -241,6 +241,7 @@ const state = reactive<{
 const dataRules = ref({
 	code: [{ required: true, message: "采购订单编号不能为空", trigger: "blur" }],
 	dDate: [{ required: true, message: "采购订单单据日期不能为空", trigger: "blur" }],
+	handlerUserId: [{ required: true, message: "经办人不能为空", trigger: "blur" }],
 	supplierId: [{ required: true, message: "货商不能为空", trigger: "blur" }],
 })
 
@@ -284,6 +285,8 @@ const handleClickLinkCode = () => linkCgCodeDialogRef.value.openLinkCodeDialog()
 
 // 获取选择的采购申请
 const getSelectedCgPlan = (selectionRows: any) => {
+	console.log("被选择的关联数据", selectionRows)
+
 	baseDataForm.linkCode = selectionRows.planCode
 	state.editableTableData = selectionRows.items
 	state.erpSpuItemsMemo = selectionRows.items

src/views/supermarketerp/smErpCgPlan/cgPlanOption.vue

@@ -217,6 +217,7 @@ const state = reactive<{
 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" }],
 })