feat(oa/crm、router): 添加报价单信息页面和单独编辑页面

- 注册路由并配置动态导入以支持页面访问
- 创建报价单基本信息表单,包含编号、名称、日期等字段
- 实现客户方与供货方信息分区布局及联系人选择联动
- 添加附件上传与备注信息独立分区- 开发报价明细表格,支持物料选择与价格计算- 集成API接口用于报价单的增删改查操作
- 实现表单验证规则与数据回填逻辑
- 提供含税与未税价格自动计算功能
- 支持报价单编号自动生成机制- 构建物料行项目管理功能,包括新增、删除与小计统计- 添加页面返回与保存操作按钮交互逻辑
- 设计附件上传对话框与相关状态控制
- 实现税率与价格联动计算逻辑
- 优化表单布局与样式以提升用户体验
dev
zangch@mesnac.com 3 months ago
parent 69acc3dbb5
commit 2c5ae95157

@ -0,0 +1,98 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { CrmQuoteInfoVO, CrmQuoteInfoForm, CrmQuoteInfoQuery } from '@/api/oa/crm/crmQuoteInfo/types';
/**
*
* @param query
* @returns {*}
*/
export const listCrmQuoteInfo = (query?: CrmQuoteInfoQuery): AxiosPromise<CrmQuoteInfoVO[]> => {
return request({
url: '/oa/crm/crmQuoteInfo/list',
method: 'get',
params: query
});
};
/**
*
* @param quoteId
*/
export const getCrmQuoteInfo = (quoteId: string | number): AxiosPromise<CrmQuoteInfoVO> => {
return request({
url: '/oa/crm/crmQuoteInfo/' + quoteId,
method: 'get'
});
};
/**
*
* @param data
*/
export const addCrmQuoteInfo = (data: CrmQuoteInfoForm) => {
return request({
url: '/oa/crm/crmQuoteInfo',
method: 'post',
data: data
});
};
/**
*
* @param data
*/
export const updateCrmQuoteInfo = (data: CrmQuoteInfoForm) => {
return request({
url: '/oa/crm/crmQuoteInfo',
method: 'put',
data: data
});
};
/**
*
* @param quoteId
*/
export const delCrmQuoteInfo = (quoteId: string | number | Array<string | number>) => {
return request({
url: '/oa/crm/crmQuoteInfo/' + quoteId,
method: 'delete'
});
};
/**
*
* @param query
* @returns {*}
*/
export function getCrmQuoteInfoList (query) {
return request({
url: '/oa/crm/crmQuoteInfo/getCrmQuoteInfoList',
method: 'get',
params: query
});
};
/**
*
* @param quoteId
*/
export const listQuoteRounds = (quoteId: string | number): AxiosPromise<CrmQuoteInfoVO[]> => {
return request({
url: '/oa/crm/crmQuoteInfo/rounds/' + quoteId,
method: 'get'
});
};
/**
*
* @param quoteId
*/
export const recalcQuoteTotals = (quoteId: string | number): AxiosPromise<boolean> => {
return request({
url: '/oa/crm/crmQuoteInfo/recalc/' + quoteId,
method: 'post'
});
};

@ -0,0 +1,560 @@
export interface CrmQuoteInfoVO {
/**
* ID
*/
quoteId: string | number;
/**
*
*/
quoteCode: string;
/**
*
*/
quoteName: string;
/**
*
*/
quoteRound: number;
/**
* (1 2)
*/
quoteCategory: string;
/**
* (1 2)
*/
quoteType: string;
/**
* 1 2 3 4 5 6 7
*/
businessDirection: string;
/**
*
*/
quoteDeptId: string | number;
/**
*
*/
quoteDate: string;
/**
*
*/
validFrom: string | number;
/**
*
*/
validDays: string | number;
/**
*
*/
validTo: string | number;
/**
*
*/
deliveryPeriod: number;
/**
* /
*/
deliveryMethod: string;
/**
* (1 2)
*/
paymentMethod: string;
/**
*
*/
currencyType: string;
/**
* 13%
*/
taxIncludedInfo: string;
/**
* ()
*/
taxRate: number;
/**
*
*/
totalPrice: number;
/**
*
*/
totalBeforeTax: number;
/**
*
*/
totalTax: number;
/**
*
*/
totalIncludingTax: number;
/**
* ID
*/
customerContactId: string | number;
/**
*
*/
customerContactName: string;
/**
*
*/
customerContactPhone: string;
/**
*
*/
customerContactEmail: string;
/**
* ID
*/
supplierContactId: string | number;
/**
*
*/
supplierContactName: string;
/**
*
*/
supplierContactPhone: string;
/**
*
*/
supplierContactEmail: string;
/**
* ID()
*/
projectId: string | number;
/**
* ID()
*/
templateId: string | number;
/**
* ID
*/
ossId: string | number;
/**
* (1 2 3)
*/
quoteStatus: string;
/**
*
*/
flowStatus: string;
/**
*
*/
remark: string;
/**
* -
*/
itemsVo?: CrmQuoteMaterialVO[];
}
export interface CrmQuoteInfoForm extends BaseEntity {
/**
* ID
*/
quoteId?: string | number;
/**
*
*/
quoteCode?: string;
/**
*
*/
quoteName?: string;
/**
*
*/
quoteRound?: number;
/**
* (1 2)
*/
quoteCategory?: string;
/**
* (1 2)
*/
quoteType?: string;
/**
* 1 2 3 4 5 6 7
*/
businessDirection?: string;
/**
*
*/
quoteDeptId?: string | number;
/**
*
*/
quoteDate?: string;
/**
*
*/
validFrom?: string | number;
/**
*
*/
validDays?: string | number;
/**
*
*/
validTo?: string | number;
/**
*
*/
deliveryPeriod?: number;
/**
* /
*/
deliveryMethod?: string;
/**
* (1 2)
*/
paymentMethod?: string;
/**
*
*/
currencyType?: string;
/**
* 13%
*/
taxIncludedInfo?: string;
/**
* ()
*/
taxRate?: number;
/**
*
*/
totalPrice?: number;
/**
*
*/
totalBeforeTax?: number;
/**
*
*/
totalTax?: number;
/**
*
*/
totalIncludingTax?: number;
/**
* ID
*/
customerContactId?: string | number;
/**
*
*/
customerContactName?: string;
/**
*
*/
customerContactPhone?: string;
/**
*
*/
customerContactEmail?: string;
/**
* ID
*/
supplierContactId?: string | number;
/**
*
*/
supplierContactName?: string;
/**
*
*/
supplierContactPhone?: string;
/**
*
*/
supplierContactEmail?: string;
/**
* ID()
*/
projectId?: string | number;
/**
* ID()
*/
templateId?: string | number;
/**
* ID
*/
ossId?: string | number;
/**
* (1 2 3)
*/
quoteStatus?: string;
/**
*
*/
flowStatus?: string;
/**
*
*/
remark?: string;
/**
* -
*/
itemsBo?: CrmQuoteMaterialForm[];
}
export interface CrmQuoteInfoQuery extends PageQuery {
/**
*
*/
quoteCode?: string;
/**
*
*/
quoteName?: string;
/**
*
*/
quoteRound?: number;
/**
* (1 2)
*/
quoteCategory?: string;
/**
* (1 2)
*/
quoteType?: string;
/**
* 1 2 3 4 5 6 7
*/
businessDirection?: string;
/**
*
*/
quoteDeptId?: string | number;
/**
*
*/
quoteDate?: string;
/**
*
*/
validFrom?: string | number;
/**
*
*/
validDays?: string | number;
/**
*
*/
validTo?: string | number;
/**
*
*/
deliveryPeriod?: number;
/**
* /
*/
deliveryMethod?: string;
/**
* (1 2)
*/
paymentMethod?: string;
/**
*
*/
currencyType?: string;
/**
* 13%
*/
taxIncludedInfo?: string;
/**
* ()
*/
taxRate?: number;
/**
*
*/
totalPrice?: number;
/**
*
*/
totalBeforeTax?: number;
/**
*
*/
totalTax?: number;
/**
*
*/
totalIncludingTax?: number;
/**
* ID
*/
customerContactId?: string | number;
/**
*
*/
customerContactName?: string;
/**
*
*/
customerContactPhone?: string;
/**
*
*/
customerContactEmail?: string;
/**
* ID
*/
supplierContactId?: string | number;
/**
*
*/
supplierContactName?: string;
/**
*
*/
supplierContactPhone?: string;
/**
*
*/
supplierContactEmail?: string;
/**
* ID()
*/
projectId?: string | number;
/**
* ID()
*/
templateId?: string | number;
/**
* ID
*/
ossId?: string | number;
/**
* (1 2 3)
*/
quoteStatus?: string;
/**
*
*/
flowStatus?: string;
/**
*
*/
params?: any;
}
import type { CrmQuoteMaterialVO, CrmQuoteMaterialForm } from '@/api/oa/crm/crmQuoteMaterial/types';

@ -0,0 +1,76 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { CrmQuoteMaterialVO, CrmQuoteMaterialForm, CrmQuoteMaterialQuery } from '@/api/oa/crm/crmQuoteMaterial/types';
/**
*
* @param query
* @returns {*}
*/
export const listCrmQuoteMaterial = (query?: CrmQuoteMaterialQuery): AxiosPromise<CrmQuoteMaterialVO[]> => {
return request({
url: '/oa/crm/crmQuoteMaterial/list',
method: 'get',
params: query
});
};
/**
*
* @param quoteMaterialId
*/
export const getCrmQuoteMaterial = (quoteMaterialId: string | number): AxiosPromise<CrmQuoteMaterialVO> => {
return request({
url: '/oa/crm/crmQuoteMaterial/' + quoteMaterialId,
method: 'get'
});
};
/**
*
* @param data
*/
export const addCrmQuoteMaterial = (data: CrmQuoteMaterialForm) => {
return request({
url: '/oa/crm/crmQuoteMaterial',
method: 'post',
data: data
});
};
/**
*
* @param data
*/
export const updateCrmQuoteMaterial = (data: CrmQuoteMaterialForm) => {
return request({
url: '/oa/crm/crmQuoteMaterial',
method: 'put',
data: data
});
};
/**
*
* @param quoteMaterialId
*/
export const delCrmQuoteMaterial = (quoteMaterialId: string | number | Array<string | number>) => {
return request({
url: '/oa/crm/crmQuoteMaterial/' + quoteMaterialId,
method: 'delete'
});
};
/**
*
* @param query
* @returns {*}
*/
export function getCrmQuoteMaterialList (query) {
return request({
url: '/oa/crm/crmQuoteMaterial/getCrmQuoteMaterialList',
method: 'get',
params: query
});
};

@ -0,0 +1,246 @@
export interface CrmQuoteMaterialVO {
/**
* ID
*/
quoteMaterialId: string | number;
/**
* ID
*/
quoteId: string | number;
/**
* (ERP)
*/
itemNo: number;
/**
* /
*/
productName: string;
/**
*
*/
specificationDescription: string;
/**
* ID(SAP)
*/
materialId: string | number;
/**
* ID()
*/
relationMaterialId: string | number;
/**
*
*/
amount: number;
/**
* ID
*/
unitId: string | number;
/**
*
*/
unitName: string;
/**
*
*/
beforePrice: number;
/**
*
*/
taxRate: number;
/**
*
*/
includingPrice: number;
/**
* ()
*/
subtotal: number;
/**
*
*/
remark: string;
/**
* 1 0
*/
activeFlag: string;
}
export interface CrmQuoteMaterialForm extends BaseEntity {
/**
* ID
*/
quoteMaterialId?: string | number;
/**
* ID
*/
quoteId?: string | number;
/**
* (ERP)
*/
itemNo?: number;
/**
* /
*/
productName?: string;
/**
*
*/
specificationDescription?: string;
/**
* ID(SAP)
*/
materialId?: string | number;
/**
* ID()
*/
relationMaterialId?: string | number;
/**
*
*/
amount?: number;
/**
* ID
*/
unitId?: string | number;
/**
*
*/
unitName?: string;
/**
*
*/
beforePrice?: number;
/**
*
*/
taxRate?: number;
/**
*
*/
includingPrice?: number;
/**
* ()
*/
subtotal?: number;
/**
*
*/
remark?: string;
/**
* 1 0
*/
activeFlag?: string;
}
export interface CrmQuoteMaterialQuery extends PageQuery {
/**
* ID
*/
quoteId?: string | number;
/**
* (ERP)
*/
itemNo?: number;
/**
* /
*/
productName?: string;
/**
*
*/
specificationDescription?: string;
/**
* ID(SAP)
*/
materialId?: string | number;
/**
* ID()
*/
relationMaterialId?: string | number;
/**
*
*/
amount?: number;
/**
* ID
*/
unitId?: string | number;
/**
*
*/
unitName?: string;
/**
*
*/
beforePrice?: number;
/**
*
*/
taxRate?: number;
/**
*
*/
includingPrice?: number;
/**
* ()
*/
subtotal?: number;
/**
* 1 0
*/
activeFlag?: string;
/**
*
*/
params?: any;
}

@ -106,6 +106,18 @@ export const constantRoutes: RouteRecordRaw[] = [
}
]
},
{
path: '/oa/crm',
component: Layout,
hidden: true,
children: [
{
path: 'crmQuoteInfo/edit',
component: () => import('@/views/oa/crm/crmQuoteInfo/edit.vue'),
name: 'crmQuoteInfoEdit',
}
]
},
];
// 动态路由,基于用户权限动态去加载

@ -0,0 +1,610 @@
<template>
<div class="p-2">
<!-- 统一表单包裹所有分区便于整体验证 -->
<el-form ref="quoteFormRef" :model="form" :rules="rules" label-width="120px" :disabled="isView">
<el-card shadow="never">
<div style="margin-bottom: 12px; text-align: center; font-weight: bold; font-size: 18px">添加报价单基本信息</div>
<div class="basic-center">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="报价单编号" prop="quoteCode">
<el-input v-model="form.quoteCode" placeholder="自动生成">
<template #append>
<el-button type="primary" @click="generateQuoteCode" :disabled="isView || isCodeGenerated">生成报价单编号</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="报价单名称" prop="quoteName">
<el-input v-model="form.quoteName" placeholder="请输入报价单名称" />
</el-form-item>
</el-col>
<!-- 与截图不符的字段按要求暂时注释保留原位置方便后续恢复 -->
<!--
<el-col :span="12">
<el-form-item label="报价大类" prop="quoteCategory">
<el-select v-model="form.quoteCategory" placeholder="请选择报价大类">
<el-option v-for="dict in quote_category" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="报价类型" prop="quoteType">
<el-select v-model="form.quoteType" placeholder="请选择报价类型">
<el-option v-for="dict in contract_type" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="业务方向" prop="businessDirection">
<el-select v-model="form.businessDirection" placeholder="请选择业务方向">
<el-option v-for="dict in business_direction" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
-->
<el-col :span="24">
<el-form-item label="报价日期" prop="quoteDate">
<el-date-picker clearable v-model="form.quoteDate" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择报价日期" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="有效期起" prop="validFrom">
<el-date-picker clearable v-model="form.validFrom" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择有效期起" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="有效期止" prop="validTo">
<el-date-picker clearable v-model="form.validTo" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择有效期止" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="交货期(天)" prop="deliveryPeriod">
<!-- 使用数字输入框禁用随表单统一控制 -->
<el-input-number v-model="form.deliveryPeriod" :min="0" :precision="0" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="交货方式" prop="deliveryMethod">
<el-input v-model="form.deliveryMethod" placeholder="请输入交货方式" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="付款方式" prop="paymentMethod">
<el-input v-model="form.paymentMethod" placeholder="请输入付款方式" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="币种" prop="currencyType">
<el-select v-model="form.currencyType" placeholder="请选择币种">
<el-option v-for="dict in currency_type" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="含税信息" prop="taxIncludedInfo">
<el-input v-model="form.taxIncludedInfo" placeholder="如含13%增值税" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="税率(%)" prop="taxRate">
<!-- 使用数字输入框两位小数步长0.01 -->
<el-input-number v-model="form.taxRate" :min="0" :precision="2" :step="0.01" style="width: 100%" />
</el-form-item>
</el-col>
<!-- 原客户方信息块已迁移到客户方信息分区保留以便后续恢复 -->
<el-col :span="12" v-if="false">
<el-form-item label="客户联系人" prop="customerContactId">
<el-select v-model="form.customerContactId" filterable placeholder="请选择客户联系人" @change="onCustomerContactChanged">
<el-option v-for="c in customerContactList" :key="c.contactId" :label="c.contactName + ' - ' + (c.phoneNumber||'')" :value="c.contactId" />
</el-select>
</el-form-item>
<!-- 客户方联系电话与邮箱随选择带出可编辑 -->
<el-form-item label="客户联系电话" prop="customerContactPhone">
<el-input v-model="form.customerContactPhone" placeholder="客户联系电话" />
</el-form-item>
<el-form-item label="客户邮箱" prop="customerContactEmail">
<el-input v-model="form.customerContactEmail" placeholder="客户邮箱" />
</el-form-item>
</el-col>
<!-- 原供货方信息块已迁移到供货方信息分区保留以便后续恢复 -->
<el-col :span="12" v-if="false">
<el-form-item label="供货方联系人" prop="supplierContactId">
<el-select v-model="form.supplierContactId" filterable placeholder="请选择供货方联系人" @change="onSupplierContactChanged">
<el-option v-for="c in supplierContactList" :key="c.contactId" :label="c.contactName + ' - ' + (c.phoneNumber||'')" :value="c.contactId" />
</el-select>
</el-form-item>
<!-- 供货方联系电话与邮箱随选择带出可编辑 -->
<el-form-item label="供货方联系电话" prop="supplierContactPhone">
<el-input v-model="form.supplierContactPhone" placeholder="供货方联系电话" />
</el-form-item>
<el-form-item label="供货方邮箱" prop="supplierContactEmail">
<el-input v-model="form.supplierContactEmail" placeholder="供货方邮箱" />
</el-form-item>
</el-col>
<!-- 原备注块已迁移到备注分区保留以便后续恢复 -->
<el-col :span="12" v-if="false">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-col>
<!-- 原附件上传块已迁移到附件分区保留以便后续恢复 -->
<el-col :span="12" v-if="false">
<el-form-item label="附件上传">
<el-button type="primary" plain icon="Upload" @click="handleFile"></el-button>
<div style="margin-top: 8px; color: #999">支持格式.rar .zip .doc .docx .pdf单个文件不超过20MB</div>
</el-form-item>
</el-col>
</el-row>
</div>
</el-card>
<!-- 客户方/供货方信息左右并列对称布局 -->
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12">
<el-card shadow="never">
<template #header>
<div style="text-align: left; font-weight: bold; font-size: 18px">客户方信息</div>
</template>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="客户联系人" prop="customerContactId">
<el-select v-model="form.customerContactId" filterable placeholder="请选择客户联系人" @change="onCustomerContactChanged">
<el-option v-for="c in customerContactList" :key="c.contactId" :label="c.contactName + ' - ' + (c.phoneNumber||'')" :value="c.contactId" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="客户联系电话" prop="customerContactPhone">
<el-input v-model="form.customerContactPhone" placeholder="客户联系电话" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="客户邮箱" prop="customerContactEmail">
<el-input v-model="form.customerContactEmail" placeholder="客户邮箱" />
</el-form-item>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="never">
<template #header>
<div style="text-align: left; font-weight: bold; font-size: 18px">供货方信息</div>
</template>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="供货方联系人" prop="supplierContactId">
<el-select v-model="form.supplierContactId" filterable placeholder="请选择供货方联系人" @change="onSupplierContactChanged">
<el-option v-for="c in supplierContactList" :key="c.contactId" :label="c.contactName + ' - ' + (c.phoneNumber||'')" :value="c.contactId" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="供货方联系电话" prop="supplierContactPhone">
<el-input v-model="form.supplierContactPhone" placeholder="供货方联系电话" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="供货方邮箱" prop="supplierContactEmail">
<el-input v-model="form.supplierContactEmail" placeholder="供货方邮箱" />
</el-form-item>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<!-- 附件独立分区样式参考合同编辑页 -->
<el-card shadow="never" style="margin-top: 20px">
<template #header>
<div style="text-align: left; font-weight: bold; font-size: 18px">附件</div>
</template>
<el-row :gutter="20">
<el-col :span="24">
<!-- 与合同页对齐采用附件表单项与上传按钮 -->
<el-form-item label="附件">
<el-button type="primary" plain icon="Upload" @click="handleFile" :disabled="isView">上传附件</el-button>
</el-form-item>
</el-col>
</el-row>
</el-card>
<!-- 备注独立分区 -->
<el-card shadow="never" style="margin-top: 20px">
<template #header>
<div style="text-align: left; font-weight: bold; font-size: 18px">备注</div>
</template>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
</el-card>
<!-- 统一表单结束 -->
</el-form>
<!-- 报价物料管理 -->
<el-card shadow="never" style="margin-top: 20px">
<template #header>
<div style="text-align: left; font-weight: bold; font-size: 18px">报价明细表格</div>
</template>
<div style="margin-bottom: 12px">
<el-button type="primary" icon="Plus" @click="addMaterialRow" :disabled="isView">新增物料</el-button>
</div>
<el-table :data="materialRows" border show-summary :summary-method="getSummary">
<el-table-column label="序号" width="80" align="center">
<template #default="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column label="产品名称" min-width="160" align="center">
<template #default="scope">
<el-select v-model="scope.row.materialId" filterable placeholder="选择SAP物料" style="width: 100%" @change="onMaterialChange(scope.row)" :disabled="isView">
<el-option v-for="m in materialList" :key="m.materialId" :label="m.materialName" :value="m.materialId" />
</el-select>
</template>
</el-table-column>
<el-table-column label="单位" width="120" align="center">
<template #default="scope">
<el-input v-model="scope.row.unitName" placeholder="单位" :disabled="isView" />
</template>
</el-table-column>
<el-table-column label="数量" width="160" align="center">
<template #default="scope">
<el-input-number v-model="scope.row.amount" :min="0" :precision="2" style="width: 100%" :disabled="isView"
@update:modelValue="(val:any)=>onAmountChange(scope.row,val)" />
</template>
</el-table-column>
<el-table-column label="未税单价" width="180" align="center">
<template #default="scope">
<el-input-number v-model="scope.row.beforePrice" :min="0" :precision="2" style="width: 100%" :disabled="isView"
@update:modelValue="(val:any)=>onBeforePriceChange(scope.row,val)" />
</template>
</el-table-column>
<el-table-column label="税率(%)" width="160" align="center">
<template #default="scope">
<el-input-number v-model="scope.row.taxRate" :min="0" :precision="2" style="width: 100%" :disabled="isView"
@update:modelValue="(val:any)=>onTaxRateChange(scope.row,val)" />
</template>
</el-table-column>
<el-table-column label="含税单价" width="180" align="center">
<template #default="scope">
<el-input-number v-model="scope.row.includingPrice" :min="0" :precision="2" style="width: 100%" :disabled="isView"
@update:modelValue="(val:any)=>onIncludingPriceChange(scope.row,val)" />
</template>
</el-table-column>
<el-table-column label="小计" width="140" align="center">
<template #default="scope">
{{ (scope.row.subtotal ?? 0).toFixed(2) }}
</template>
</el-table-column>
<el-table-column label="备注" min-width="160" align="center">
<template #default="scope">
<el-input v-model="scope.row.remark" :disabled="isView" />
</template>
</el-table-column>
<el-table-column label="操作" width="120" align="center">
<template #default="scope">
<el-button v-if="!isView" link type="danger" icon="Delete" @click="removeRow(scope.$index)"></el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 12px; text-align: right">
<span style="margin-right: 16px">含税总价{{ totalIncludingTax.toFixed(2) }}</span>
<el-button v-if="!isView" type="primary" :loading="buttonLoading" @click="submitForm"> </el-button>
<el-button @click="goBack"> </el-button>
</div>
</el-card>
<!-- 附件上传对话框 -->
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
<el-form label-width="80px">
<el-form-item label="文件名">
<fileUpload v-if="type === 0" v-model="ossFileModel" />
<imageUpload v-if="type === 1" v-model="ossFileModel" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitOss"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { getCrmQuoteInfo, addCrmQuoteInfo, updateCrmQuoteInfo, recalcQuoteTotals } from '@/api/oa/crm/crmQuoteInfo';
import { CrmQuoteInfoForm } from '@/api/oa/crm/crmQuoteInfo/types';
import type { CrmQuoteMaterialForm } from '@/api/oa/crm/crmQuoteMaterial/types';
import { getBaseMaterialInfoList } from '@/api/oa/base/materialInfo';
import { getCrmCustomerContactList } from '@/api/oa/crm/customerContact';
import { getRuleGenerateCode } from '@/api/system/codeRule';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { business_direction, currency_type, quote_category, contract_type } = toRefs<any>(proxy?.useDict('business_direction', 'currency_type', 'quote_category', 'contract_type'));
const router = useRouter();
const route = useRoute();
// type=view
const isView = computed(() => route.query.type === 'view');
const buttonLoading = ref(false);
const quoteFormRef = ref<ElFormInstance>();
//
const isCodeGenerated = ref(false);
const form = reactive<CrmQuoteInfoForm>({
quoteId: undefined,
quoteCode: undefined,
quoteName: undefined,
quoteCategory: undefined,
quoteType: undefined,
businessDirection: undefined,
quoteDate: undefined,
validFrom: undefined,
validTo: undefined,
deliveryPeriod: undefined,
deliveryMethod: undefined,
paymentMethod: undefined,
currencyType: undefined,
taxIncludedInfo: undefined,
taxRate: undefined,
customerContactId: undefined,
customerContactName: undefined,
customerContactPhone: undefined,
customerContactEmail: undefined,
supplierContactId: undefined,
supplierContactName: undefined,
supplierContactPhone: undefined,
supplierContactEmail: undefined,
remark: undefined
});
const rules = {
quoteName: [{ required: true, message: '报价单名称不能为空', trigger: 'blur' }],
customerContactId: [{ required: true, message: '请选择客户联系人', trigger: 'change' }]
};
//
const materialList = ref<any[]>([]);
const customerContactList = ref<any[]>([]);
const supplierContactList = ref<any[]>([]);
//
const materialRows = ref<CrmQuoteMaterialForm[]>([]);
const totalIncludingTax = computed(() => {
return materialRows.value.reduce((sum, r) => sum + (Number(r.subtotal || 0)), 0);
});
//
const getSummary = (param: any) => {
const { columns, data } = param;
const sums: string[] = [];
columns.forEach((column: any, index: number) => {
if (index === 0) {
sums[index] = '合计';
return;
}
if (column.property === 'subtotal') {
const total = data.reduce((sum: number, row: any) => sum + Number(row.subtotal || 0), 0);
sums[index] = total.toFixed(2);
} else {
sums[index] = '';
}
});
return sums;
};
const addMaterialRow = () => {
materialRows.value.push({ amount: 0, beforePrice: 0, taxRate: Number(form.taxRate || 0), includingPrice: 0, subtotal: 0 } as CrmQuoteMaterialForm);
};
const removeRow = (idx: number) => materialRows.value.splice(idx, 1);
//
const toNum = (v: any) => (v === '' || v === null || v === undefined) ? undefined : (Number.isFinite(Number(v)) ? Number(v) : undefined);
const round2 = (n: number) => Math.round(n * 100) / 100;
//
const calcIncluding = (before: number, rate: number) => round2(before * (1 + rate / 100));
const calcBefore = (including: number, rate: number) => round2(including / (1 + rate / 100));
const calcRate = (including: number, before: number) => round2(((including / before) - 1) * 100);
// ×+
const updateSubtotal = (row: any) => {
const amount = toNum(row.amount) ?? 0;
const before = toNum(row.beforePrice);
const including = toNum(row.includingPrice);
const rate = toNum(row.taxRate) ?? toNum(form.taxRate);
let inc = including;
if (inc === undefined && before !== undefined && rate !== undefined) {
inc = calcIncluding(before, rate);
row.includingPrice = inc; //
}
row.subtotal = (inc !== undefined) ? round2((inc as number) * amount) : 0;
};
//
const onAmountChange = (row: any, val: number) => {
row.amount = val;
updateSubtotal(row);
};
const onBeforePriceChange = (row: any, val: number) => {
row.beforePrice = val;
const rate = toNum(row.taxRate) ?? toNum(form.taxRate);
const including = toNum(row.includingPrice);
if (rate !== undefined) {
row.includingPrice = calcIncluding(val, rate as number);
} else if (including !== undefined) {
row.taxRate = calcRate(including as number, val);
}
updateSubtotal(row);
};
const onTaxRateChange = (row: any, val: number) => {
row.taxRate = val;
const before = toNum(row.beforePrice);
const including = toNum(row.includingPrice);
if (before !== undefined) {
row.includingPrice = calcIncluding(before as number, val);
} else if (including !== undefined) {
row.beforePrice = calcBefore(including as number, val);
}
updateSubtotal(row);
};
const onIncludingPriceChange = (row: any, val: number) => {
row.includingPrice = val;
const rate = toNum(row.taxRate) ?? toNum(form.taxRate);
const before = toNum(row.beforePrice);
if (rate !== undefined) {
row.beforePrice = calcBefore(val, rate as number);
} else if (before !== undefined) {
row.taxRate = calcRate(val, before as number);
}
updateSubtotal(row);
};
//
const onCustomerContactChanged = (id: any) => {
const c = customerContactList.value.find((x: any) => x.contactId === id);
form.customerContactName = c?.contactName || '';
form.customerContactPhone = c?.phoneNumber || '';
form.customerContactEmail = c?.email || '';
};
const onSupplierContactChanged = (id: any) => {
const c = supplierContactList.value.find((x: any) => x.contactId === id);
form.supplierContactName = c?.contactName || '';
form.supplierContactPhone = c?.phoneNumber || '';
form.supplierContactEmail = c?.email || '';
};
const onMaterialChange = (row: any) => {
//
};
// codeRuleCode=1004
const generateQuoteCode = async () => {
if (isCodeGenerated.value) return;
try {
const params = { codeRuleCode: '1004' } as any;
const res = await getRuleGenerateCode(params);
form.quoteCode = res.msg;
isCodeGenerated.value = true;
proxy?.$modal.msgSuccess('报价单编号生成成功');
} catch (error) {
proxy?.$modal.msgError('报价单编号生成失败');
}
};
// UI
const type = ref(0);
const dialog = reactive({ visible: false, title: '' });
const ossFileModel = ref<string | string[] | undefined>(undefined);
const handleFile = () => {
type.value = 0;
dialog.visible = true;
dialog.title = '上传报价附件';
};
const submitOss = () => {
dialog.visible = false;
proxy?.$modal.msgSuccess('附件已更新');
};
const cancel = () => {
dialog.visible = false;
};
const submitForm = () => {
quoteFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return;
buttonLoading.value = true;
try {
// itemsBo
const payload: any = {
...form,
itemsBo: materialRows.value.map((r, idx) => ({
...r,
itemNo: idx + 1,
subtotal: Number(r.subtotal || 0)
}))
};
if (!form.quoteId) {
await addCrmQuoteInfo(payload);
} else {
await updateCrmQuoteInfo(payload);
}
proxy?.$modal.msgSuccess('保存成功');
router.back();
} finally {
buttonLoading.value = false;
}
});
};
const goBack = () => router.back();
onMounted(async () => {
//
const materialRes = await getBaseMaterialInfoList({});
materialList.value = materialRes.data || [];
const contactRes = await getCrmCustomerContactList({});
customerContactList.value = contactRes.data || [];
supplierContactList.value = contactRes.data || [];
//
const id = route.query.id || route.params.id;
if (id) {
//
// quoteId
form.quoteId = id as any;
const res = await getCrmQuoteInfo(id as any);
Object.assign(form, res.data);
//
isCodeGenerated.value = !!form.quoteCode;
// ID
if (!form.customerContactPhone || !form.customerContactEmail || !form.customerContactName) {
onCustomerContactChanged(form.customerContactId);
}
if (!form.supplierContactPhone || !form.supplierContactEmail || !form.supplierContactName) {
onSupplierContactChanged(form.supplierContactId);
}
// 使VO itemsVo
const inlineItems = (res.data as any)?.itemsVo;
if (inlineItems && inlineItems.length) {
// BigDecimal/ number el-input-number toFixed
materialRows.value = inlineItems.map((r: any) => ({
quoteMaterialId: r.quoteMaterialId,
quoteId: r.quoteId,
itemNo: r.itemNo,
materialId: r.materialId,
unitId: r.unitId,
unitName: r.unitName,
amount: Number(r.amount ?? 0),
beforePrice: Number(r.beforePrice ?? 0),
taxRate: Number(r.taxRate ?? (form.taxRate ?? 0)),
includingPrice: Number(r.includingPrice ?? 0),
subtotal: Number(r.subtotal ?? 0),
remark: r.remark
}));
} else {
materialRows.value = [];
}
}
//
if (!id) {
isCodeGenerated.value = !!form.quoteCode;
}
});
</script>
<style scoped>
/* 基础信息分区整体居中显示 */
.basic-center {
max-width: 860px;
margin: 0 auto;
}
</style>

@ -0,0 +1,720 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width='100px'>
<el-form-item label="报价单号" prop="quoteCode">
<el-input v-model="queryParams.quoteCode" placeholder="请输入报价单号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="报价单名称" prop="quoteName">
<el-input v-model="queryParams.quoteName" placeholder="请输入报价单名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<!-- <el-form-item label="报价轮次" prop="quoteRound">
<el-input v-model="queryParams.quoteRound" placeholder="请输入报价轮次" clearable @keyup.enter="handleQuery" />
</el-form-item>-->
<!-- <el-form-item label="报价大类" prop="quoteCategory">
<el-select v-model="queryParams.quoteCategory" placeholder="请选择报价大类" clearable >
<el-option v-for="dict in quote_category" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="报价类型" prop="quoteType">
<el-select v-model="queryParams.quoteType" placeholder="请选择报价类型" clearable >
<el-option v-for="dict in contract_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="业务方向" prop="businessDirection">
<el-select v-model="queryParams.businessDirection" placeholder="请选择业务方向" clearable >
<el-option v-for="dict in business_direction" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>-->
<!-- <el-form-item label="部门" prop="quoteDeptId">
<el-input v-model="queryParams.quoteDeptId" placeholder="请输入部门" clearable @keyup.enter="handleQuery" />
</el-form-item>-->
<!-- <el-form-item label="报价日期" prop="quoteDate">
<el-date-picker clearable
v-model="queryParams.quoteDate"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择报价日期"
/>
</el-form-item>
<el-form-item label="报价有效期起" prop="validFrom">
<el-date-picker clearable
v-model="queryParams.validFrom"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择报价有效期起"
/>
</el-form-item>
<el-form-item label="报价有效期" prop="validDays">
<el-input v-model="queryParams.validDays" placeholder="请输入报价有效期" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="报价有效期止" prop="validTo">
<el-date-picker clearable
v-model="queryParams.validTo"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择报价有效期止"
/>
</el-form-item>
<el-form-item label="交货期" prop="deliveryPeriod">
<el-input v-model="queryParams.deliveryPeriod" placeholder="请输入交货期" clearable @keyup.enter="handleQuery" />
</el-form-item>-->
<!-- <el-form-item label="交付/交货方式" prop="deliveryMethod">
<el-input v-model="queryParams.deliveryMethod" placeholder="请输入交付/交货方式" clearable @keyup.enter="handleQuery" />
</el-form-item>-->
<!-- <el-form-item label="付款方式" prop="paymentMethod">
<el-select v-model="queryParams.paymentMethod" placeholder="请选择付款方式" clearable >
<el-option v-for="dict in payment_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>-->
<!-- <el-form-item label="币种" prop="currencyType">
<el-select v-model="queryParams.currencyType" placeholder="请选择币种" clearable >
<el-option v-for="dict in currency_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="含税信息" prop="taxIncludedInfo">
<el-input v-model="queryParams.taxIncludedInfo" placeholder="请输入含税信息" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="税率(默认按明细可覆盖)" prop="taxRate">
<el-input v-model="queryParams.taxRate" placeholder="请输入税率(默认按明细可覆盖)" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="总报价" prop="totalPrice">
<el-input v-model="queryParams.totalPrice" placeholder="请输入总报价" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="未税总价" prop="totalBeforeTax">
<el-input v-model="queryParams.totalBeforeTax" placeholder="请输入未税总价" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="税额" prop="totalTax">
<el-input v-model="queryParams.totalTax" placeholder="请输入税额" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="含税总价" prop="totalIncludingTax">
<el-input v-model="queryParams.totalIncludingTax" placeholder="请输入含税总价" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="客户方联系人ID" prop="customerContactId">
<el-input v-model="queryParams.customerContactId" placeholder="请输入客户方联系人ID" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="客户方联系人" prop="customerContactName">
<el-input v-model="queryParams.customerContactName" placeholder="请输入客户方联系人" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="客户方联系电话" prop="customerContactPhone">
<el-input v-model="queryParams.customerContactPhone" placeholder="请输入客户方联系电话" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="客户方电子邮箱" prop="customerContactEmail">
<el-input v-model="queryParams.customerContactEmail" placeholder="请输入客户方电子邮箱" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="供货方联系人ID" prop="supplierContactId">
<el-input v-model="queryParams.supplierContactId" placeholder="请输入供货方联系人ID" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="供货方联系人" prop="supplierContactName">
<el-input v-model="queryParams.supplierContactName" placeholder="请输入供货方联系人" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="供货方联系电话" prop="supplierContactPhone">
<el-input v-model="queryParams.supplierContactPhone" placeholder="请输入供货方联系电话" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="供货方电子邮箱" prop="supplierContactEmail">
<el-input v-model="queryParams.supplierContactEmail" placeholder="请输入供货方电子邮箱" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="项目ID(可选)" prop="projectId">
<el-input v-model="queryParams.projectId" placeholder="请输入项目ID(可选)" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="打印模板ID(可选)" prop="templateId">
<el-input v-model="queryParams.templateId" placeholder="请输入打印模板ID(可选)" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="附件ID" prop="ossId">
<el-input v-model="queryParams.ossId" placeholder="请输入附件ID" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="报价单状态" prop="quoteStatus">
<el-select v-model="queryParams.quoteStatus" placeholder="请选择报价单状态" clearable >
<el-option v-for="dict in quote_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="流程状态" prop="flowStatus">
<el-select v-model="queryParams.flowStatus" placeholder="请选择流程状态" clearable >
<el-option v-for="dict in flow_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>-->
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"></el-button>
<el-button icon="Refresh" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['oa/crm:crmQuoteInfo:add']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['oa/crm:crmQuoteInfo:edit']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['oa/crm:crmQuoteInfo:remove']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['oa/crm:crmQuoteInfo:export']"></el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" border :data="crmQuoteInfoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" type="index" width="50" v-if="columns[0].visible"/>
<el-table-column label="报价单号" align="center" prop="quoteCode" v-if="columns[1].visible"/>
<el-table-column label="报价单名称" align="center" prop="quoteName" v-if="columns[2].visible"/>
<el-table-column label="报价轮次" align="center" prop="quoteRound" v-if="columns[3].visible"/>
<el-table-column label="报价大类" align="center" prop="quoteCategory" v-if="columns[4].visible">
<template #default="scope">
<dict-tag :options="quote_category" :value="scope.row.quoteCategory"/>
</template>
</el-table-column>
<el-table-column label="报价类型" align="center" prop="quoteType" v-if="columns[5].visible">
<template #default="scope">
<dict-tag :options="contract_type" :value="scope.row.quoteType"/>
</template>
</el-table-column>
<el-table-column label="业务方向" align="center" prop="businessDirection" v-if="columns[6].visible">
<template #default="scope">
<dict-tag :options="business_direction" :value="scope.row.businessDirection"/>
</template>
</el-table-column>
<el-table-column label="部门" align="center" prop="quoteDeptId" v-if="columns[7].visible"/>
<el-table-column label="报价日期" align="center" prop="quoteDate" width="180" v-if="columns[8].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.quoteDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="报价有效期起" align="center" prop="validFrom" width="180" v-if="columns[9].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.validFrom, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="报价有效期" align="center" prop="validDays" v-if="columns[10].visible"/>
<el-table-column label="报价有效期止" align="center" prop="validTo" width="180" v-if="columns[11].visible">
<template #default="scope">
<span>{{ parseTime(scope.row.validTo, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="交货期" align="center" prop="deliveryPeriod" v-if="columns[12].visible"/>
<el-table-column label="交付/交货方式" align="center" prop="deliveryMethod" v-if="columns[13].visible"/>
<el-table-column label="付款方式" align="center" prop="paymentMethod" v-if="columns[14].visible">
<template #default="scope">
<dict-tag :options="payment_method" :value="scope.row.paymentMethod"/>
</template>
</el-table-column>
<el-table-column label="币种" align="center" prop="currencyType" v-if="columns[15].visible">
<template #default="scope">
<dict-tag :options="currency_type" :value="scope.row.currencyType"/>
</template>
</el-table-column>
<el-table-column label="含税信息" align="center" prop="taxIncludedInfo" v-if="columns[16].visible"/>
<el-table-column label="税率(默认按明细可覆盖)" align="center" prop="taxRate" v-if="columns[17].visible"/>
<el-table-column label="总报价" align="center" prop="totalPrice" v-if="columns[18].visible"/>
<el-table-column label="未税总价" align="center" prop="totalBeforeTax" v-if="columns[19].visible"/>
<el-table-column label="税额" align="center" prop="totalTax" v-if="columns[20].visible"/>
<el-table-column label="含税总价" align="center" prop="totalIncludingTax" v-if="columns[21].visible"/>
<el-table-column label="客户方联系人ID" align="center" prop="customerContactId" v-if="columns[22].visible"/>
<el-table-column label="客户方联系人" align="center" prop="customerContactName" v-if="columns[23].visible"/>
<el-table-column label="客户方联系电话" align="center" prop="customerContactPhone" v-if="columns[24].visible"/>
<el-table-column label="客户方电子邮箱" align="center" prop="customerContactEmail" v-if="columns[25].visible"/>
<el-table-column label="供货方联系人ID" align="center" prop="supplierContactId" v-if="columns[26].visible"/>
<el-table-column label="供货方联系人" align="center" prop="supplierContactName" v-if="columns[27].visible"/>
<el-table-column label="供货方联系电话" align="center" prop="supplierContactPhone" v-if="columns[28].visible"/>
<el-table-column label="供货方电子邮箱" align="center" prop="supplierContactEmail" v-if="columns[29].visible"/>
<el-table-column label="项目ID(可选)" align="center" prop="projectId" v-if="columns[30].visible"/>
<el-table-column label="打印模板ID(可选)" align="center" prop="templateId" v-if="columns[31].visible"/>
<el-table-column label="附件ID" align="center" prop="ossId" v-if="columns[32].visible"/>
<el-table-column label="报价单状态" align="center" prop="quoteStatus" v-if="columns[33].visible">
<template #default="scope">
<dict-tag :options="quote_status" :value="scope.row.quoteStatus"/>
</template>
</el-table-column>
<el-table-column label="流程状态" align="center" prop="flowStatus" v-if="columns[34].visible">
<template #default="scope">
<dict-tag :options="flow_status" :value="scope.row.flowStatus"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" v-if="columns[35].visible"/>
<el-table-column label="操作" align="center" fixed="right" width="150" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="查看" placement="top">
<el-button link type="info" icon="DocumentChecked" @click="handleView(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['oa/crm:crmQuoteInfo:edit']"></el-button>
</el-tooltip>
<el-tooltip content="审批记录(预留)" placement="top">
<el-button link type="info" icon="View"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['oa/crm:crmQuoteInfo:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改报价单信息对话框 -->
<!-- <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="crmQuoteInfoFormRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="报价单号" prop="quoteCode">
<el-input v-model="form.quoteCode" placeholder="请输入报价单号" />
</el-form-item>
<el-form-item label="报价单名称" prop="quoteName">
<el-input v-model="form.quoteName" placeholder="请输入报价单名称" />
</el-form-item>
<el-form-item label="报价轮次" prop="quoteRound">
<el-input v-model="form.quoteRound" placeholder="请输入报价轮次" />
</el-form-item>
<el-form-item label="报价大类" prop="quoteCategory">
<el-radio-group v-model="form.quoteCategory">
<el-radio
v-for="dict in quote_category"
:key="dict.value"
:value="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="报价类型" prop="quoteType">
<el-select v-model="form.quoteType" placeholder="请选择报价类型">
<el-option
v-for="dict in contract_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="业务方向" prop="businessDirection">
<el-select v-model="form.businessDirection" placeholder="请选择业务方向">
<el-option
v-for="dict in business_direction"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="部门" prop="quoteDeptId">
<el-input v-model="form.quoteDeptId" placeholder="请输入部门" />
</el-form-item>
<el-form-item label="报价日期" prop="quoteDate">
<el-date-picker clearable
v-model="form.quoteDate"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择报价日期">
</el-date-picker>
</el-form-item>
<el-form-item label="报价有效期起" prop="validFrom">
<el-date-picker clearable
v-model="form.validFrom"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择报价有效期起">
</el-date-picker>
</el-form-item>
<el-form-item label="报价有效期" prop="validDays">
<el-input v-model="form.validDays" placeholder="请输入报价有效期" />
</el-form-item>
<el-form-item label="报价有效期止" prop="validTo">
<el-date-picker clearable
v-model="form.validTo"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="请选择报价有效期止">
</el-date-picker>
</el-form-item>
<el-form-item label="交货期" prop="deliveryPeriod">
<el-input v-model="form.deliveryPeriod" placeholder="请输入交货期" />
</el-form-item>
<el-form-item label="交付/交货方式" prop="deliveryMethod">
<el-input v-model="form.deliveryMethod" placeholder="请输入交付/交货方式" />
</el-form-item>
<el-form-item label="付款方式" prop="paymentMethod">
<el-select v-model="form.paymentMethod" placeholder="请选择付款方式">
<el-option
v-for="dict in payment_method"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="币种" prop="currencyType">
<el-select v-model="form.currencyType" placeholder="请选择币种">
<el-option
v-for="dict in currency_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="含税信息" prop="taxIncludedInfo">
<el-input v-model="form.taxIncludedInfo" placeholder="请输入含税信息" />
</el-form-item>
<el-form-item label="税率(默认按明细可覆盖)" prop="taxRate">
<el-input v-model="form.taxRate" placeholder="请输入税率(默认按明细可覆盖)" />
</el-form-item>
<el-form-item label="总报价" prop="totalPrice">
<el-input v-model="form.totalPrice" placeholder="请输入总报价" />
</el-form-item>
<el-form-item label="未税总价" prop="totalBeforeTax">
<el-input v-model="form.totalBeforeTax" placeholder="请输入未税总价" />
</el-form-item>
<el-form-item label="税额" prop="totalTax">
<el-input v-model="form.totalTax" placeholder="请输入税额" />
</el-form-item>
<el-form-item label="含税总价" prop="totalIncludingTax">
<el-input v-model="form.totalIncludingTax" placeholder="请输入含税总价" />
</el-form-item>
<el-form-item label="客户方联系人ID" prop="customerContactId">
<el-input v-model="form.customerContactId" placeholder="请输入客户方联系人ID" />
</el-form-item>
<el-form-item label="客户方联系人" prop="customerContactName">
<el-input v-model="form.customerContactName" placeholder="请输入客户方联系人" />
</el-form-item>
<el-form-item label="客户方联系电话" prop="customerContactPhone">
<el-input v-model="form.customerContactPhone" placeholder="请输入客户方联系电话" />
</el-form-item>
<el-form-item label="客户方电子邮箱" prop="customerContactEmail">
<el-input v-model="form.customerContactEmail" placeholder="请输入客户方电子邮箱" />
</el-form-item>
<el-form-item label="供货方联系人ID" prop="supplierContactId">
<el-input v-model="form.supplierContactId" placeholder="请输入供货方联系人ID" />
</el-form-item>
<el-form-item label="供货方联系人" prop="supplierContactName">
<el-input v-model="form.supplierContactName" placeholder="请输入供货方联系人" />
</el-form-item>
<el-form-item label="供货方联系电话" prop="supplierContactPhone">
<el-input v-model="form.supplierContactPhone" placeholder="请输入供货方联系电话" />
</el-form-item>
<el-form-item label="供货方电子邮箱" prop="supplierContactEmail">
<el-input v-model="form.supplierContactEmail" placeholder="请输入供货方电子邮箱" />
</el-form-item>
<el-form-item label="项目ID(可选)" prop="projectId">
<el-input v-model="form.projectId" placeholder="请输入项目ID(可选)" />
</el-form-item>
<el-form-item label="打印模板ID(可选)" prop="templateId">
<el-input v-model="form.templateId" placeholder="请输入打印模板ID(可选)" />
</el-form-item>
<el-form-item label="附件ID" prop="ossId">
<el-input v-model="form.ossId" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="报价单状态" prop="quoteStatus">
<el-select v-model="form.quoteStatus" placeholder="请选择报价单状态">
<el-option
v-for="dict in quote_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="流程状态" prop="flowStatus">
<el-select v-model="form.flowStatus" placeholder="请选择流程状态">
<el-option
v-for="dict in flow_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>-->
</div>
</template>
<script setup name="CrmQuoteInfo" lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { listCrmQuoteInfo, getCrmQuoteInfo, delCrmQuoteInfo, addCrmQuoteInfo, updateCrmQuoteInfo } from '@/api/oa/crm/crmQuoteInfo';
import { CrmQuoteInfoVO, CrmQuoteInfoQuery, CrmQuoteInfoForm } from '@/api/oa/crm/crmQuoteInfo/types';
import { getCrmCustomerContactList } from '@/api/oa/crm/customerContact';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
const route = useRoute();
const { business_direction, currency_type, quote_category, payment_method, quote_status, flow_status, contract_type } = toRefs<any>(proxy?.useDict('business_direction', 'currency_type', 'quote_category', 'payment_method', 'quote_status', 'flow_status', 'contract_type'));
const crmQuoteInfoList = ref<CrmQuoteInfoVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const crmQuoteInfoFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
//
const columns = ref<FieldOption[]>([
{ key: 1, label: `序号`, visible: true },
{ key: 1, label: `报价单号`, visible: true },
{ key: 2, label: `报价单名称`, visible: true },
{ key: 3, label: `报价轮次`, visible: false },
{ key: 4, label: `报价大类`, visible: false },
{ key: 5, label: `报价类型`, visible: false },
{ key: 6, label: `业务方向`, visible: false },
{ key: 7, label: `部门`, visible: false },
{ key: 8, label: `报价日期`, visible: true },
{ key: 9, label: `报价有效期起`, visible: true },
{ key: 10, label: `报价有效期`, visible: false },
{ key: 11, label: `报价有效期止`, visible: true },
{ key: 12, label: `交货期`, visible: false },
{ key: 13, label: `交付/交货方式`, visible: false },
{ key: 14, label: `付款方式`, visible: false },
{ key: 15, label: `币种`, visible: false },
{ key: 16, label: `含税信息`, visible: false },
{ key: 17, label: `税率(默认按明细可覆盖)`, visible: false },
{ key: 18, label: `总报价`, visible: false },
{ key: 19, label: `未税总价`, visible: false },
{ key: 20, label: `税额`, visible: false },
{ key: 21, label: `含税总价`, visible: true },
{ key: 22, label: `客户方联系人ID`, visible: false },
{ key: 23, label: `客户方联系人`, visible: false },
{ key: 24, label: `客户方联系电话`, visible: false },
{ key: 25, label: `客户方电子邮箱`, visible: false },
{ key: 26, label: `供货方联系人ID`, visible: false },
{ key: 27, label: `供货方联系人`, visible: false },
{ key: 28, label: `供货方联系电话`, visible: false },
{ key: 29, label: `供货方电子邮箱`, visible: false },
{ key: 30, label: `项目ID(可选)`, visible: false },
{ key: 31, label: `打印模板ID(可选)`, visible: false },
{ key: 32, label: `附件ID`, visible: false },
{ key: 33, label: `报价单状态`, visible: false },
{ key: 34, label: `流程状态`, visible: false },
{ key: 35, label: `备注`, visible: true },
// { key: 36, label: ``, visible: true },
// { key: 37, label: ``, visible: true },
// { key: 38, label: ``, visible: true },
// { key: 40, label: ``, visible: true },
// { key: 41, label: ``, visible: true },
// { key: 42, label: ``, visible: true },
]);
const initFormData: CrmQuoteInfoForm = {
quoteId: undefined,
quoteCode: undefined,
quoteName: undefined,
quoteRound: undefined,
quoteCategory: undefined,
quoteType: undefined,
businessDirection: undefined,
quoteDeptId: undefined,
quoteDate: undefined,
validFrom: undefined,
validDays: undefined,
validTo: undefined,
deliveryPeriod: undefined,
deliveryMethod: undefined,
paymentMethod: undefined,
currencyType: undefined,
taxIncludedInfo: undefined,
taxRate: undefined,
totalPrice: undefined,
totalBeforeTax: undefined,
totalTax: undefined,
totalIncludingTax: undefined,
customerContactId: undefined,
customerContactName: undefined,
customerContactPhone: undefined,
customerContactEmail: undefined,
supplierContactId: undefined,
supplierContactName: undefined,
supplierContactPhone: undefined,
supplierContactEmail: undefined,
projectId: undefined,
templateId: undefined,
ossId: undefined,
quoteStatus: undefined,
flowStatus: undefined,
remark: undefined,
}
const data = reactive<PageData<CrmQuoteInfoForm, CrmQuoteInfoQuery>>({
form: {...initFormData},
queryParams: {
pageNum: 1,
pageSize: 10,
quoteCode: undefined,
quoteName: undefined,
quoteRound: undefined,
quoteCategory: undefined,
quoteType: undefined,
businessDirection: undefined,
quoteDeptId: undefined,
quoteDate: undefined,
validFrom: undefined,
validDays: undefined,
validTo: undefined,
deliveryPeriod: undefined,
deliveryMethod: undefined,
paymentMethod: undefined,
currencyType: undefined,
taxIncludedInfo: undefined,
taxRate: undefined,
totalPrice: undefined,
totalBeforeTax: undefined,
totalTax: undefined,
totalIncludingTax: undefined,
customerContactId: undefined,
customerContactName: undefined,
customerContactPhone: undefined,
customerContactEmail: undefined,
supplierContactId: undefined,
supplierContactName: undefined,
supplierContactPhone: undefined,
supplierContactEmail: undefined,
projectId: undefined,
templateId: undefined,
ossId: undefined,
quoteStatus: undefined,
flowStatus: undefined,
params: {
}
},
rules: {
quoteId: [
{ required: true, message: "报价ID不能为空", trigger: "blur" }
],
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询报价单信息列表 */
const getList = async () => {
loading.value = true;
const res = await listCrmQuoteInfo(queryParams.value);
crmQuoteInfoList.value = res.rows;
total.value = res.total;
loading.value = false;
}
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
form.value = {...initFormData};
crmQuoteInfoFormRef.value?.resetFields();
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
}
/** 多选框选中数据 */
const handleSelectionChange = (selection: CrmQuoteInfoVO[]) => {
ids.value = selection.map(item => item.quoteId);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作(改为路由跳转到编辑页) */
const handleAdd = () => {
proxy.$tab.closePage(route);
router.push({
path: '/oa/crm/crmQuoteInfo/edit',
query: { type: 'add' }
});
}
/** 修改按钮操作(改为路由跳转到编辑页) */
const handleUpdate = (row?: CrmQuoteInfoVO) => {
const _quoteId = row?.quoteId || ids.value[0];
proxy.$tab.closePage(route);
router.push({
path: '/oa/crm/crmQuoteInfo/edit',
query: { id: _quoteId, type: 'update' }
});
}
/** 查看按钮操作(查看模式只读) */
const handleView = (row?: CrmQuoteInfoVO) => {
const _quoteId = row?.quoteId;
proxy.$tab.closePage(route);
router.push({
path: '/oa/crm/crmQuoteInfo/edit',
query: { id: _quoteId, type: 'view' }
});
}
/** 提交按钮 */
const submitForm = () => {
crmQuoteInfoFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.quoteId) {
await updateCrmQuoteInfo(form.value).finally(() => buttonLoading.value = false);
} else {
await addCrmQuoteInfo(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess("操作成功");
dialog.visible = false;
await getList();
}
});
}
/** 删除按钮操作 */
const handleDelete = async (row?: CrmQuoteInfoVO) => {
const _quoteIds = row?.quoteId || ids.value;
await proxy?.$modal.confirm('是否确认删除报价单信息编号为"' + _quoteIds + '"的数据项?').finally(() => loading.value = false);
await delCrmQuoteInfo(_quoteIds);
proxy?.$modal.msgSuccess("删除成功");
await getList();
}
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('oa/crm/crmQuoteInfo/export', {
...queryParams.value
}, `crmQuoteInfo_${new Date().getTime()}.xlsx`)
}
let crmCustomerContactList = ref([]);
const getCustomerContactList = async () => {
const res = await getCrmCustomerContactList(null);
crmCustomerContactList.value = res.data;
}
onMounted(() => {
getCustomerContactList();
getList();
});
</script>

@ -0,0 +1,373 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width='100px'>
<el-form-item label="报价ID" prop="quoteId">
<el-input v-model="queryParams.quoteId" placeholder="请输入报价ID" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="序号(ERP风格)" prop="itemNo">
<el-input v-model="queryParams.itemNo" placeholder="请输入序号(ERP风格)" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="产品/服务名称" prop="productName">
<el-input v-model="queryParams.productName" placeholder="请输入产品/服务名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="规格描述" prop="specificationDescription">
<el-input v-model="queryParams.specificationDescription" placeholder="请输入规格描述" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="物料ID(SAP)" prop="materialId">
<el-input v-model="queryParams.materialId" placeholder="请输入物料ID(SAP)" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="销售物料ID(关联名)" prop="relationMaterialId">
<el-input v-model="queryParams.relationMaterialId" placeholder="请输入销售物料ID(关联名)" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="数量" prop="amount">
<el-input v-model="queryParams.amount" placeholder="请输入数量" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="单位ID" prop="unitId">
<el-input v-model="queryParams.unitId" placeholder="请输入单位ID" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="单位名称" prop="unitName">
<el-input v-model="queryParams.unitName" placeholder="请输入单位名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="未税单价" prop="beforePrice">
<el-input v-model="queryParams.beforePrice" placeholder="请输入未税单价" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="税率" prop="taxRate">
<el-input v-model="queryParams.taxRate" placeholder="请输入税率" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="含税单价" prop="includingPrice">
<el-input v-model="queryParams.includingPrice" placeholder="请输入含税单价" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="小计(含税)" prop="subtotal">
<el-input v-model="queryParams.subtotal" placeholder="请输入小计(含税)" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="激活标识" prop="activeFlag">
<el-select v-model="queryParams.activeFlag" placeholder="请选择激活标识" clearable >
<el-option v-for="dict in active_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"></el-button>
<el-button icon="Refresh" @click="resetQuery"></el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['oa/crm:crmQuoteMaterial:add']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['oa/crm:crmQuoteMaterial:edit']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['oa/crm:crmQuoteMaterial:remove']"></el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['oa/crm:crmQuoteMaterial:export']"></el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" border :data="crmQuoteMaterialList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="报价物料ID" align="center" prop="quoteMaterialId" v-if="columns[0].visible"/>
<el-table-column label="报价ID" align="center" prop="quoteId" v-if="columns[2].visible"/>
<el-table-column label="序号(ERP风格)" align="center" prop="itemNo" v-if="columns[3].visible"/>
<el-table-column label="产品/服务名称" align="center" prop="productName" v-if="columns[4].visible"/>
<el-table-column label="规格描述" align="center" prop="specificationDescription" v-if="columns[5].visible"/>
<el-table-column label="物料ID(SAP)" align="center" prop="materialId" v-if="columns[6].visible"/>
<el-table-column label="销售物料ID(关联名)" align="center" prop="relationMaterialId" v-if="columns[7].visible"/>
<el-table-column label="数量" align="center" prop="amount" v-if="columns[8].visible"/>
<el-table-column label="单位ID" align="center" prop="unitId" v-if="columns[9].visible"/>
<el-table-column label="单位名称" align="center" prop="unitName" v-if="columns[10].visible"/>
<el-table-column label="未税单价" align="center" prop="beforePrice" v-if="columns[11].visible"/>
<el-table-column label="税率" align="center" prop="taxRate" v-if="columns[12].visible"/>
<el-table-column label="含税单价" align="center" prop="includingPrice" v-if="columns[13].visible"/>
<el-table-column label="小计(含税)" align="center" prop="subtotal" v-if="columns[14].visible"/>
<el-table-column label="备注" align="center" prop="remark" v-if="columns[15].visible"/>
<el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[16].visible">
<template #default="scope">
<dict-tag :options="active_flag" :value="scope.row.activeFlag"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['oa/crm:crmQuoteMaterial:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['oa/crm:crmQuoteMaterial:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改报价单物料明细对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="crmQuoteMaterialFormRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="报价ID" prop="quoteId">
<el-input v-model="form.quoteId" placeholder="请输入报价ID" />
</el-form-item>
<el-form-item label="序号(ERP风格)" prop="itemNo">
<el-input v-model="form.itemNo" placeholder="请输入序号(ERP风格)" />
</el-form-item>
<el-form-item label="产品/服务名称" prop="productName">
<el-input v-model="form.productName" placeholder="请输入产品/服务名称" />
</el-form-item>
<el-form-item label="规格描述" prop="specificationDescription">
<el-input v-model="form.specificationDescription" placeholder="请输入规格描述" />
</el-form-item>
<el-form-item label="物料ID(SAP)" prop="materialId">
<el-input v-model="form.materialId" placeholder="请输入物料ID(SAP)" />
</el-form-item>
<el-form-item label="销售物料ID(关联名)" prop="relationMaterialId">
<el-input v-model="form.relationMaterialId" placeholder="请输入销售物料ID(关联名)" />
</el-form-item>
<el-form-item label="数量" prop="amount">
<el-input v-model="form.amount" placeholder="请输入数量" />
</el-form-item>
<el-form-item label="单位ID" prop="unitId">
<el-input v-model="form.unitId" placeholder="请输入单位ID" />
</el-form-item>
<el-form-item label="单位名称" prop="unitName">
<el-input v-model="form.unitName" placeholder="请输入单位名称" />
</el-form-item>
<el-form-item label="未税单价" prop="beforePrice">
<el-input v-model="form.beforePrice" placeholder="请输入未税单价" />
</el-form-item>
<el-form-item label="税率" prop="taxRate">
<el-input v-model="form.taxRate" placeholder="请输入税率" />
</el-form-item>
<el-form-item label="含税单价" prop="includingPrice">
<el-input v-model="form.includingPrice" placeholder="请输入含税单价" />
</el-form-item>
<el-form-item label="小计(含税)" prop="subtotal">
<el-input v-model="form.subtotal" placeholder="请输入小计(含税)" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="激活标识" prop="activeFlag">
<el-radio-group v-model="form.activeFlag">
<el-radio
v-for="dict in active_flag"
:key="dict.value"
:value="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="CrmQuoteMaterial" lang="ts">
import { listCrmQuoteMaterial, getCrmQuoteMaterial, delCrmQuoteMaterial, addCrmQuoteMaterial, updateCrmQuoteMaterial } from '@/api/oa/crm/crmQuoteMaterial';
import { CrmQuoteMaterialVO, CrmQuoteMaterialQuery, CrmQuoteMaterialForm } from '@/api/oa/crm/crmQuoteMaterial/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { active_flag } = toRefs<any>(proxy?.useDict('active_flag'));
const crmQuoteMaterialList = ref<CrmQuoteMaterialVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const crmQuoteMaterialFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
//
const columns = ref<FieldOption[]>([
{ key: 0, label: `报价物料ID`, visible: true },
{ key: 1, label: `租户编号`, visible: true },
{ key: 2, label: `报价ID`, visible: true },
{ key: 3, label: `序号(ERP风格)`, visible: true },
{ key: 4, label: `产品/服务名称`, visible: true },
{ key: 5, label: `规格描述`, visible: true },
{ key: 6, label: `物料ID(SAP)`, visible: true },
{ key: 7, label: `销售物料ID(关联名)`, visible: true },
{ key: 8, label: `数量`, visible: true },
{ key: 9, label: `单位ID`, visible: true },
{ key: 10, label: `单位名称`, visible: true },
{ key: 11, label: `未税单价`, visible: true },
{ key: 12, label: `税率`, visible: true },
{ key: 13, label: `含税单价`, visible: true },
{ key: 14, label: `小计(含税)`, visible: true },
{ key: 15, label: `备注`, visible: true },
{ key: 16, label: `激活标识`, visible: true },
{ key: 17, label: `删除标志`, visible: true },
{ key: 18, label: `创建部门`, visible: true },
{ key: 19, label: `创建人`, visible: true },
{ key: 20, label: `创建时间`, visible: true },
{ key: 21, label: `更新人`, visible: true },
{ key: 22, label: `更新时间`, visible: true },
]);
const initFormData: CrmQuoteMaterialForm = {
quoteMaterialId: undefined,
quoteId: undefined,
itemNo: undefined,
productName: undefined,
specificationDescription: undefined,
materialId: undefined,
relationMaterialId: undefined,
amount: undefined,
unitId: undefined,
unitName: undefined,
beforePrice: undefined,
taxRate: undefined,
includingPrice: undefined,
subtotal: undefined,
remark: undefined,
activeFlag: undefined,
}
const data = reactive<PageData<CrmQuoteMaterialForm, CrmQuoteMaterialQuery>>({
form: {...initFormData},
queryParams: {
pageNum: 1,
pageSize: 10,
quoteId: undefined,
itemNo: undefined,
productName: undefined,
specificationDescription: undefined,
materialId: undefined,
relationMaterialId: undefined,
amount: undefined,
unitId: undefined,
unitName: undefined,
beforePrice: undefined,
taxRate: undefined,
includingPrice: undefined,
subtotal: undefined,
activeFlag: undefined,
params: {
}
},
rules: {
quoteMaterialId: [
{ required: true, message: "报价物料ID不能为空", trigger: "blur" }
],
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询报价单物料明细列表 */
const getList = async () => {
loading.value = true;
const res = await listCrmQuoteMaterial(queryParams.value);
crmQuoteMaterialList.value = res.rows;
total.value = res.total;
loading.value = false;
}
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
form.value = {...initFormData};
crmQuoteMaterialFormRef.value?.resetFields();
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
}
/** 多选框选中数据 */
const handleSelectionChange = (selection: CrmQuoteMaterialVO[]) => {
ids.value = selection.map(item => item.quoteMaterialId);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = "添加报价单物料明细";
}
/** 修改按钮操作 */
const handleUpdate = async (row?: CrmQuoteMaterialVO) => {
reset();
const _quoteMaterialId = row?.quoteMaterialId || ids.value[0]
const res = await getCrmQuoteMaterial(_quoteMaterialId);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "修改报价单物料明细";
}
/** 提交按钮 */
const submitForm = () => {
crmQuoteMaterialFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.quoteMaterialId) {
await updateCrmQuoteMaterial(form.value).finally(() => buttonLoading.value = false);
} else {
await addCrmQuoteMaterial(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess("操作成功");
dialog.visible = false;
await getList();
}
});
}
/** 删除按钮操作 */
const handleDelete = async (row?: CrmQuoteMaterialVO) => {
const _quoteMaterialIds = row?.quoteMaterialId || ids.value;
await proxy?.$modal.confirm('是否确认删除报价单物料明细编号为"' + _quoteMaterialIds + '"的数据项?').finally(() => loading.value = false);
await delCrmQuoteMaterial(_quoteMaterialIds);
proxy?.$modal.msgSuccess("删除成功");
await getList();
}
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('oa/crm/crmQuoteMaterial/export', {
...queryParams.value
}, `crmQuoteMaterial_${new Date().getTime()}.xlsx`)
}
onMounted(() => {
getList();
});
</script>
Loading…
Cancel
Save