<script lang="ts" setup>
|
import type { MdmItemApi } from '#/api/mdm/item';
|
import type { CrmSaleQuotationApi } from '#/api/crm/saleQuotation';
|
|
import { computed, ref } from 'vue';
|
|
import { erpPriceMultiply } from '#/packages/utils/src';
|
|
import { InputNumber } from 'ant-design-vue';
|
|
import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
import MdmItemSelect from '#/views/basicData/mdm/components/select.vue';
|
|
import { useItemColumns } from '../data';
|
|
interface Props {
|
disabled?: boolean;
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
disabled: false,
|
});
|
|
const emit = defineEmits(['change']);
|
|
const tableData = ref<CrmSaleQuotationApi.SaleQuotationItem[]>([]);
|
const selectedItem = ref<MdmItemApi.Item>();
|
|
/** 获取表格合计数据 */
|
const summaries = computed(() => {
|
return tableData.value.reduce(
|
(acc, item) => {
|
acc.count += item.count || 0;
|
acc.totalPrice += item.totalPrice || 0;
|
return acc;
|
},
|
{ count: 0, totalPrice: 0 },
|
);
|
});
|
|
/** 表格配置 */
|
const [Grid, gridApi] = useVbenVxeGrid({
|
gridOptions: {
|
columns: useItemColumns(),
|
data: [],
|
minHeight: 250,
|
autoResize: true,
|
border: true,
|
rowConfig: {
|
keyField: 'seq',
|
isHover: true,
|
},
|
pagerConfig: {
|
enabled: false,
|
},
|
toolbarConfig: {
|
enabled: false,
|
},
|
},
|
});
|
|
/** 触发变更事件 */
|
function triggerChange() {
|
emit('change');
|
}
|
|
/** 处理新增 */
|
function handleAdd() {
|
tableData.value.push({
|
itemId: undefined,
|
itemName: undefined,
|
itemCode: undefined,
|
itemBarCode: undefined,
|
itemSpecification: undefined,
|
itemUnitName: undefined,
|
itemUnitName2: undefined,
|
itemUnitName3: undefined,
|
itemPrice: undefined,
|
quotationPrice: undefined,
|
count: 1,
|
totalPrice: 0,
|
});
|
gridApi.grid.loadData(tableData.value);
|
}
|
|
/** 处理删除 */
|
function handleDelete(row: CrmSaleQuotationApi.SaleQuotationItem) {
|
const index = tableData.value.findIndex((item) => item.seq === row.seq);
|
if (index !== -1) {
|
tableData.value.splice(index, 1);
|
gridApi.grid.loadData(tableData.value);
|
triggerChange();
|
}
|
}
|
|
/** 处理产品变更 */
|
function handleItemChange(item: MdmItemApi.Item | undefined, row: any) {
|
if (!item) {
|
row.itemId = undefined;
|
row.itemName = undefined;
|
row.itemCode = undefined;
|
row.itemBarCode = undefined;
|
row.itemSpecification = undefined;
|
row.itemUnitName = undefined;
|
row.itemUnitName2 = undefined;
|
row.itemUnitName3 = undefined;
|
row.itemPrice = undefined;
|
row.quotationPrice = undefined;
|
row.totalPrice = 0;
|
return;
|
}
|
row.itemId = item.id;
|
row.itemName = item.name;
|
row.itemCode = item.code;
|
row.itemBarCode = item.barCode;
|
row.itemSpecification = item.specification;
|
row.itemUnitName = item.unitMeasureName;
|
row.itemUnitName2 = item.unitMeasureName2;
|
row.itemUnitName3 = item.unitMeasureName3;
|
row.itemPrice = item.salesPrice;
|
row.quotationPrice = item.salesPrice;
|
row.totalPrice = erpPriceMultiply(row.quotationPrice, row.count) ?? 0;
|
triggerChange();
|
}
|
|
/** 处理报价变更 */
|
function handleQuotationPriceChange(value: number, row: any) {
|
row.quotationPrice = value;
|
row.totalPrice = erpPriceMultiply(value, row.count) ?? 0;
|
triggerChange();
|
}
|
|
/** 处理数量变更 */
|
function handleCountChange(value: number, row: any) {
|
row.count = value;
|
row.totalPrice = erpPriceMultiply(row.quotationPrice, value) ?? 0;
|
triggerChange();
|
}
|
|
/** 表单校验 */
|
function validate() {
|
for (let i = 0; i < tableData.value.length; i++) {
|
const item = tableData.value[i];
|
if (item) {
|
if (!item.itemId) {
|
throw new Error(`第 ${i + 1} 行：产品不能为空`);
|
}
|
if (!item.count || item.count <= 0) {
|
throw new Error(`第 ${i + 1} 行：数量不能为空`);
|
}
|
if (!item.quotationPrice || item.quotationPrice <= 0) {
|
throw new Error(`第 ${i + 1} 行：报价不能为空`);
|
}
|
}
|
}
|
}
|
|
/** 设置数据（供父组件调用） */
|
function setData(items: CrmSaleQuotationApi.SaleQuotationItem[]) {
|
items.forEach((item) => {
|
if (item.quotationPrice && item.count) {
|
item.totalPrice = erpPriceMultiply(item.quotationPrice, item.count) ?? 0;
|
}
|
});
|
tableData.value = [...items];
|
gridApi.grid.loadData(tableData.value);
|
}
|
|
/** 获取数据 */
|
function getData() {
|
return [...tableData.value];
|
}
|
|
/** 重置数据 */
|
function resetData() {
|
tableData.value = [];
|
handleAdd();
|
}
|
|
defineExpose({
|
validate,
|
setData,
|
getData,
|
resetData,
|
});
|
</script>
|
|
<template>
|
<Grid class="w-full">
|
<template #itemId="{ row }">
|
<MdmItemSelect
|
v-if="!disabled"
|
v-model:model-value="row.itemId"
|
placeholder="请选择产品"
|
@change="(item) => handleItemChange(item, row)"
|
/>
|
<span v-else>{{ row.itemName || '-' }}</span>
|
</template>
|
<template #quotationPrice="{ row }">
|
<InputNumber
|
v-if="!disabled"
|
v-model:value="row.quotationPrice"
|
:min="0"
|
:precision="2"
|
@change="(val) => handleQuotationPriceChange(val, row)"
|
/>
|
<span v-else>{{ row.quotationPrice || '-' }}</span>
|
</template>
|
<template #count="{ row }">
|
<InputNumber
|
v-if="!disabled"
|
v-model:value="row.count"
|
:min="0.001"
|
:precision="3"
|
@change="(val) => handleCountChange(val, row)"
|
/>
|
<span v-else>{{ row.count || '-' }}</span>
|
</template>
|
<template #actions="{ row }">
|
<TableAction
|
v-if="!disabled"
|
:actions="[
|
{
|
label: '删除',
|
type: 'link',
|
danger: true,
|
popConfirm: {
|
title: '确认删除该产品吗？',
|
confirm: handleDelete.bind(null, row),
|
},
|
},
|
]"
|
/>
|
</template>
|
|
<template #bottom>
|
<div class="mt-2 rounded border border-border bg-muted p-2">
|
<div class="flex justify-between text-sm text-muted-foreground">
|
<span class="font-medium text-foreground">合计：</span>
|
<div class="flex space-x-4">
|
<span>数量：{{ summaries.count }}</span>
|
<span>金额：{{ summaries.totalPrice.toFixed(2) }}元</span>
|
</div>
|
</div>
|
</div>
|
<TableAction
|
v-if="!disabled"
|
class="mt-2 flex justify-center"
|
:actions="[
|
{
|
label: '添加产品',
|
type: 'default',
|
onClick: handleAdd,
|
},
|
]"
|
/>
|
</template>
|
</Grid>
|
</template>
|
