yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: product list

pull/131/head
xingyu4j 2025-06-06 16:24:43 +08:00
parent 082bb7167f
commit acd0677f81
7 changed files with 425 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web-antd/src/views/crm/business/data.ts
View File

@ -90,6 +90,12 @@ export function useFormSchema(): VbenFormSchema[] {
valueFormat: 'x',
},
},
{
fieldName: 'product',
label: '产品清单',
component: 'Input',
formItemClass: 'col-span-3',
},
{
fieldName: 'totalProductPrice',
label: '产品总金额',

44
apps/web-antd/src/views/crm/business/modules/form.vue
View File

@ -13,7 +13,10 @@ import {
getBusiness,
updateBusiness,
} from '#/api/crm/business';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { erpPriceMultiply } from '#/utils';
import { ProductEditTable } from '#/views/crm/product';
import { useFormSchema } from '../data';
@ -25,15 +28,37 @@ const getTitle = computed(() => {
: $t('ui.actionTitle.create', ['商机']);
});
function handleUpdateProducts(products: any) {
formData.value = modalApi.getData<CrmBusinessApi.Business>();
formData.value!.products = products;
if (formData.value) {
const totalProductPrice =
formData.value.products?.reduce(
(prev, curr) => prev + curr.totalPrice,
0,
) ?? 0;
const discountPercent = formData.value.discountPercent;
const discountPrice =
discountPercent === null
? 0
: erpPriceMultiply(totalProductPrice, discountPercent / 100);
const totalPrice = totalProductPrice - (discountPrice ?? 0);
formData.value!.totalProductPrice = totalProductPrice;
formData.value!.totalPrice = totalPrice;
formApi.setValues(formData.value!);
}
}
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
// 一共3列
wrapperClass: 'grid-cols-3',
layout: 'vertical',
schema: useFormSchema(),
showDefaultActions: false,
});
@ -47,6 +72,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as CrmBusinessApi.Business;
data.products = formData.value?.products;
try {
await (formData.value?.id ? updateBusiness(data) : createBusiness(data));
// 关闭并提示
@ -80,7 +106,17 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle" class="w-[40%]">
<Form class="mx-4" />
<Modal :title="getTitle" class="w-[50%]">
<Form class="mx-4">
<template #product="slotProps">
<ProductEditTable
v-bind="slotProps"
class="w-full"
:products="formData?.products ?? []"
:biz-type="BizTypeEnum.CRM_BUSINESS"
@update:products="handleUpdateProducts"
/>
</template>
</Form>
</Modal>
</template>

118
apps/web-antd/src/views/crm/contract/data.ts
View File

@ -1,22 +1,32 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { z } from '#/adapter/form';
import { getSimpleBusinessList } from '#/api/crm/business';
import { getSimpleContactList } from '#/api/crm/contact';
import { getCustomerSimpleList } from '#/api/crm/customer';
import { floatToFixed2 } from '#/utils';
import { getSimpleUserList } from '#/api/system/user';
import { erpPriceMultiply, floatToFixed2 } from '#/utils';
import { DICT_TYPE } from '#/utils/dict';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'no',
label: '合同编号',
component: 'Input',
rules: 'required',
componentProps: {
placeholder: '请输入合同编号',
placeholder: '保存时自动生成',
disabled: () => true,
},
},
{
@ -28,9 +38,22 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请输入合同名称',
},
},
{
fieldName: 'ownerUserId',
label: '负责人',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleUserList(),
fieldNames: {
label: 'nickname',
value: 'id',
},
},
rules: 'required',
},
{
fieldName: 'customerId',
label: '客户',
label: '客户名称',
component: 'ApiSelect',
rules: 'required',
componentProps: {
@ -42,9 +65,8 @@ export function useFormSchema(): VbenFormSchema[] {
},
{
fieldName: 'businessId',
label: '商机',
label: '商机名称',
component: 'ApiSelect',
rules: 'required',
componentProps: {
api: getSimpleBusinessList,
labelField: 'name',
@ -52,49 +74,53 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请选择商机',
},
},
{
fieldName: 'totalPrice',
label: '合同金额',
component: 'InputNumber',
rules: 'required',
componentProps: {
placeholder: '请输入合同金额',
min: 0,
precision: 2,
},
},
{
fieldName: 'orderDate',
label: '下单时间',
label: '下单日期',
component: 'DatePicker',
rules: 'required',
componentProps: {
placeholder: '请选择下单时间',
showTime: false,
format: 'YYYY-MM-DD',
valueFormat: 'x',
},
},
{
fieldName: 'startTime',
label: '合同开始时间',
component: 'DatePicker',
rules: 'required',
componentProps: {
placeholder: '请选择合同开始时间',
showTime: false,
format: 'YYYY-MM-DD',
valueFormat: 'x',
},
},
{
fieldName: 'endTime',
label: '合同结束时间',
component: 'DatePicker',
rules: 'required',
componentProps: {
placeholder: '请选择合同结束时间',
showTime: false,
format: 'YYYY-MM-DD',
valueFormat: 'x',
},
},
{
fieldName: 'signUserId',
label: '公司签约人',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleUserList(),
fieldNames: {
label: 'nickname',
value: 'id',
},
},
},
{
fieldName: 'signContactId',
label: '客户签约人',
component: 'ApiSelect',
rules: 'required',
componentProps: {
api: getSimpleContactList,
labelField: 'name',
@ -111,6 +137,50 @@ export function useFormSchema(): VbenFormSchema[] {
rows: 4,
},
},
{
fieldName: 'product',
label: '产品清单',
component: 'Input',
formItemClass: 'col-span-3',
},
{
fieldName: 'totalProductPrice',
label: '产品总金额',
component: 'InputNumber',
componentProps: {
min: 0,
},
},
{
fieldName: 'discountPercent',
label: '整单折扣（%）',
component: 'InputNumber',
rules: z.number().min(0).max(100).default(0),
componentProps: {
min: 0,
precision: 2,
},
},
{
fieldName: 'totalPrice',
label: '折扣后金额',
component: 'InputNumber',
dependencies: {
triggerFields: ['totalProductPrice', 'discountPercent'],
disabled: () => true,
trigger(values, form) {
const discountPrice =
erpPriceMultiply(
values.totalProductPrice,
values.discountPercent / 100,
) ?? 0;
form.setFieldValue(
'totalPrice',
values.totalProductPrice - discountPrice,
);
},
},
},
];
}

46
apps/web-antd/src/views/crm/contract/modules/form.vue
View File

@ -12,7 +12,10 @@ import {
getContract,
updateContract,
} from '#/api/crm/contract';
import { BizTypeEnum } from '#/api/crm/permission';
import { $t } from '#/locales';
import { erpPriceMultiply } from '#/utils';
import { ProductEditTable } from '#/views/crm/product';
import { useFormSchema } from '../data';
@ -24,15 +27,37 @@ const getTitle = computed(() => {
: $t('ui.actionTitle.create', ['合同']);
});
function handleUpdateProducts(products: any) {
formData.value = modalApi.getData<CrmContractApi.Contract>();
formData.value!.products = products;
if (formData.value) {
const totalProductPrice =
formData.value.products?.reduce(
(prev, curr) => prev + curr.totalPrice,
0,
) ?? 0;
const discountPercent = formData.value.discountPercent;
const discountPrice =
discountPercent === null
? 0
: erpPriceMultiply(totalProductPrice, discountPercent / 100);
const totalPrice = totalProductPrice - (discountPrice ?? 0);
formData.value!.totalProductPrice = totalProductPrice;
formData.value!.totalPrice = totalPrice;
formApi.setValues(formData.value!);
}
}
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
labelWidth: 120,
},
// 一共2列
wrapperClass: 'grid-cols-2',
layout: 'horizontal',
// 一共3列
wrapperClass: 'grid-cols-3',
layout: 'vertical',
schema: useFormSchema(),
showDefaultActions: false,
});
@ -46,6 +71,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as CrmContractApi.Contract;
data.products = formData.value?.products;
try {
await (formData.value?.id ? updateContract(data) : createContract(data));
// 关闭并提示
@ -79,7 +105,17 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle" class="w-[40%]">
<Form class="mx-4" />
<Modal :title="getTitle" class="w-[50%]">
<Form class="mx-4">
<template #product="slotProps">
<ProductEditTable
v-bind="slotProps"
class="w-full"
:products="formData?.products ?? []"
:biz-type="BizTypeEnum.CRM_CONTRACT"
@update:products="handleUpdateProducts"
/>
</template>
</Form>
</Modal>
</template>

57
apps/web-antd/src/views/crm/product/data.ts
View File

@ -174,3 +174,60 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 代码生成表格列定义 */
export function useProductEditTableColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'seq', title: '序号', minWidth: 50 },
{
field: 'productId',
title: '产品名称',
minWidth: 100,
slots: { default: 'productId' },
},
{
field: 'productNo',
title: '条码',
minWidth: 150,
},
{
field: 'productUnit',
title: '单位',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.CRM_PRODUCT_UNIT },
},
},
{
field: 'productPrice',
title: '价格（元）',
minWidth: 100,
formatter: 'formatNumber',
},
{
field: 'sellingPrice',
title: '售价（元）',
minWidth: 100,
slots: { default: 'sellingPrice' },
},
{
field: 'count',
title: '数量',
minWidth: 100,
slots: { default: 'count' },
},
{
field: 'totalPrice',
title: '合计',
minWidth: 100,
formatter: 'formatNumber',
},
{
title: '操作',
width: 80,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

4
apps/web-antd/src/views/crm/product/index.ts
View File

@ -15,3 +15,7 @@ export const ProductDetails = defineAsyncComponent(
export const ProductDetailsList = defineAsyncComponent(
() => import('./modules/detail-list.vue'),
);
export const ProductEditTable = defineAsyncComponent(
() => import('./modules/product-table.vue'),
);

183
apps/web-antd/src/views/crm/product/modules/product-table.vue Normal file
View File

@ -0,0 +1,183 @@
<script lang="ts" setup>
import type { CrmBusinessApi } from '#/api/crm/business';
import type { CrmContractApi } from '#/api/crm/contract';
import type { CrmProductApi } from '#/api/crm/product';
import { nextTick, onMounted, ref, watch } from 'vue';
import { InputNumber, Select } from 'ant-design-vue';
import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { BizTypeEnum } from '#/api/crm/permission';
import { getProductSimpleList } from '#/api/crm/product';
import { erpPriceMultiply } from '#/utils';
import { useProductEditTableColumns } from '../data';
const props = defineProps<{
bizType: BizTypeEnum;
products?:
| CrmBusinessApi.BusinessProduct[]
| CrmContractApi.ContractProduct[];
}>();
const emit = defineEmits(['update:products']);
const tableData = ref<any[]>([]);
function handleAdd() {
gridApi.grid.insertAt(null, -1);
}
function handleDelete(row: CrmProductApi.Product) {
gridApi.grid.remove(row);
}
function handleProductChange(productId: any, row: any) {
const product = productOptions.value.find((p) => p.id === productId);
if (!product) {
return;
}
row.productUnit = product.unit;
row.productNo = product.no;
row.productPrice = product.price;
row.sellingPrice = product.price;
row.count = 0;
row.totalPrice = 0;
handleUpdateValue(row);
}
function handlePriceChange(row: any) {
row.totalPrice = erpPriceMultiply(row.sellingPrice, row.count) ?? 0;
handleUpdateValue(row);
}
function handleUpdateValue(row: any) {
const index = tableData.value.findIndex((item) => item.id === row.id);
if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
row.businessPrice = row.sellingPrice;
} else if (props.bizType === BizTypeEnum.CRM_CONTRACT) {
row.contractPrice = row.sellingPrice;
}
if (index === -1) {
row.id = tableData.value.length + 1;
tableData.value.push(row);
} else {
tableData.value[index] = row;
}
emit('update:products', tableData.value);
}
/** 表格配置 */
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
editConfig: {
trigger: 'click',
mode: 'cell',
},
columns: useProductEditTableColumns(),
data: tableData.value,
border: true,
showOverflow: true,
autoResize: true,
keepSource: true,
rowConfig: {
keyField: 'id',
},
pagerConfig: {
enabled: false,
},
toolbarConfig: {
enabled: false,
},
},
});
/** 监听外部传入的列数据 */
watch(
() => props.products,
async (products) => {
if (!products) {
return;
}
await nextTick();
tableData.value = products;
if (props.bizType === BizTypeEnum.CRM_BUSINESS) {
tableData.value.forEach((item) => {
item.sellingPrice = item.businessPrice;
});
} else if (props.bizType === BizTypeEnum.CRM_CONTRACT) {
tableData.value.forEach((item) => {
item.sellingPrice = item.contractPrice;
});
}
gridApi.grid?.loadData(tableData.value);
},
{
immediate: true,
},
);
/** 初始化 */
const productOptions = ref<CrmProductApi.Product[]>([]);
onMounted(async () => {
productOptions.value = await getProductSimpleList();
});
</script>
<template>
<Grid class="w-full">
<template #productId="{ row }">
<Select
v-model:value="row.productId"
:options="productOptions"
:field-names="{ label: 'name', value: 'id' }"
style="width: 100%"
@change="handleProductChange($event, row)"
/>
</template>
<template #sellingPrice="{ row }">
<InputNumber
v-model:value="row.sellingPrice"
:min="0.001"
:precision="2"
@change="handlePriceChange(row)"
/>
</template>
<template #count="{ row }">
<InputNumber
v-model:value="row.count"
:min="0.001"
:precision="3"
@change="handlePriceChange(row)"
/>
</template>
<template #bottom>
<TableAction
class="mt-4 flex justify-center"
:actions="[
{
label: '添加产品',
type: 'default',
onClick: handleAdd,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.delete'),
type: 'link',
danger: true,
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</template>