组件改动

2025-02-27 18:44:41 +08:00
1 parent 1dd21a5061
commit 69b54f260b
@@ -0,0 +1,123 @@
+<template>
+	<!-- 关联订单对话框 -->
+	<el-dialog v-model="linkCodeDialogVisible" :title="title" width="70%" :close-on-click-modal="false" draggable @close="onClose">
+		<vxe-table
+			v-show="step === 0"
+			ref="linkCodeTableRef"
+			border
+			v-loading="linkCodeLoading"
+			:row-config="{ isCurrent: true, isHover: true }"
+			:radio-config="{ labelField: '', trigger: 'row' }"
+			:data="linkCodeTableData"
+			@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="linkCodeUnitTableRef"
+			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="linkCodeDialogVisible = 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 { VxeTableEvents } from "vxe-table"
+
+const linkCodeDialogVisible = defineModel()
+const emit = defineEmits(["getSelectedLinkCode"])
+const props = withDefaults(
+	defineProps<{
+		title?: string
+		getTableData?: (params?: object) => Promise<any>
+	}>(),
+	{
+		title: "",
+		getTableData: (params?: object) => Promise.resolve([]),
+	},
+)
+
+const linkCodeLoading = ref(false)
+const linkCodeTableRef = ref() // 关联订单表格ref
+const linkCodeUnitTableRef = ref() // 关联订单的包装单位表格ref
+const linkCodeTableData = ref([]) // 关联订单列表数据
+const currRadioRowItems = ref([]) // 当前单选的表格行的items
+const step = ref(0)
+
+// 打开关联补货单对话框
+const openLinkCodeDialog = async () => {
+	linkCodeDialogVisible.value = true
+	step.value = 0
+	linkCodeLoading.value = true
+	try {
+		const res = await props.getTableData().finally(() => (linkCodeLoading.value = false))
+		if (res.code === 0) {
+			linkCodeTableData.value = res.data.records
+		}
+	} catch (error) {
+		linkCodeTableData.value = []
+		linkCodeLoading.value = false
+	}
+}
+
+// 单选时
+const radioChangeEvent: VxeTableEvents.RadioChange<any> = ({ row }) => (currRadioRowItems.value = row.items)
+
+// 获取选择的关联补货单对话框表格行数据
+const getSelectedRowData = () => {
+	const $table = linkCodeTableRef.value
+	const $unitTable = linkCodeUnitTableRef.value
+	if ($table && $unitTable) {
+		const currRadioRow = $table.getRadioRecord()
+		console.log("currRadioRow", currRadioRow)
+		const currUnitRows = $unitTable.getCheckboxRecords()
+		console.log("currUnitRows", currUnitRows)
+
+		emit("getSelectedLinkCode", { ...currRadioRow, items: currUnitRows })
+	}
+}
+
+// 对话框关闭
+const onClose = () => {
+	linkCodeDialogVisible.value = false
+	currRadioRowItems.value = []
+	linkCodeTableData.value = []
+}
+
+defineExpose({
+	openLinkCodeDialog,
+})
+</script>