125 lines
4.7 KiB
Vue
125 lines
4.7 KiB
Vue
<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="productName" 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: () => 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>
|