feat(order): 添加供应商模态框敏感信息脱敏功能

- 添加身份证号、手机号、银行卡号格式化脱敏显示
- 集成显示/隐藏脱敏信息的切换功能
- 引入CompanyList组件用于公司信息展示
- 更新订单供应商模态框列配置和数据渲染
- 调整付款任务创建和列表组件的发票状态显示
- 修改付款任务相关金额字段显示单位和状态枚举
- 修复供应商选择时参数传递问题
- 优化表格组件配置和列定义结构
This commit is contained in:
shenyifei 2026-01-06 14:26:39 +08:00
parent f65598d42c
commit ae182d4439
4 changed files with 218 additions and 59 deletions

View File

@ -1,8 +1,10 @@
import { OrderList } from '@/components'; import { CompanyList, OrderList } from '@/components';
import { business } from '@/services'; import { business } from '@/services';
import { formatBankCard, formatIdCard, formatPhone } from '@/utils/format';
import { formatParam } from '@/utils/formatParam'; import { formatParam } from '@/utils/formatParam';
import { pagination } from '@/utils/pagination'; import { pagination } from '@/utils/pagination';
import { useIntl } from '@@/exports'; import { useIntl } from '@@/exports';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { import {
ActionType, ActionType,
LightFilter, LightFilter,
@ -46,6 +48,10 @@ export default function OrderSupplierModal(props: IOrderSupplierModalProps) {
initParams || {}, initParams || {},
); );
const [showIdCard, setShowIdCard] = useState<Record<string, boolean>>({});
const [showBankCard, setShowBankCard] = useState<Record<string, boolean>>({});
const [showPhone, setShowPhone] = useState<Record<string, boolean>>({});
useEffect(() => { useEffect(() => {
if (initParams) { if (initParams) {
setParams({ setParams({
@ -85,32 +91,6 @@ export default function OrderSupplierModal(props: IOrderSupplierModalProps) {
title: intl.formatMessage({ id: intlPrefix + '.column.name' }), title: intl.formatMessage({ id: intlPrefix + '.column.name' }),
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
renderText: (text: string) => <span className="font-medium">{text}</span>,
},
{
title: intl.formatMessage({ id: intlPrefix + '.column.idCard' }),
dataIndex: 'idCard',
key: 'idCard',
search: false,
ellipsis: true,
},
{
title: intl.formatMessage({ id: intlPrefix + '.column.phone' }),
dataIndex: 'phone',
key: 'phone',
search: false,
},
{
title: intl.formatMessage({ id: intlPrefix + '.column.bankName' }),
dataIndex: 'bankName',
key: 'bankName',
search: false,
},
{
title: intl.formatMessage({ id: intlPrefix + '.column.bankCard' }),
dataIndex: 'bankCard',
key: 'bankCard',
search: false,
}, },
{ {
title: intl.formatMessage({ id: intlPrefix + '.column.invoiceAmount' }), title: intl.formatMessage({ id: intlPrefix + '.column.invoiceAmount' }),
@ -126,6 +106,7 @@ export default function OrderSupplierModal(props: IOrderSupplierModalProps) {
valueType: 'money', valueType: 'money',
search: false, search: false,
}, },
// 剩余付款金额
{ {
title: intl.formatMessage({ title: intl.formatMessage({
id: intlPrefix + '.column.remainingAmount', id: intlPrefix + '.column.remainingAmount',
@ -139,10 +120,127 @@ export default function OrderSupplierModal(props: IOrderSupplierModalProps) {
}, },
}, },
{ {
title: intl.formatMessage({ id: intlPrefix + '.column.orderCompany' }), title: intl.formatMessage({
dataIndex: ['orderCompany', 'shortName'], id: intlPrefix + '.column.idCard',
key: 'orderCompany', }),
dataIndex: 'idCard',
key: 'idCard',
search: false, search: false,
render: (_, record) => (
<div className="flex items-center">
<span>
{formatIdCard(record.idCard, showIdCard[record.orderSupplierId])}
</span>
<span
className="ml-2 cursor-pointer"
onClick={(e) => {
e.stopPropagation();
setShowIdCard((prev) => ({
...prev,
[record.orderSupplierId]: !prev[record.orderSupplierId],
}));
}}
>
{showIdCard[record.orderSupplierId] ? (
<EyeTwoTone />
) : (
<EyeInvisibleOutlined />
)}
</span>
</div>
),
},
{
title: intl.formatMessage({ id: intlPrefix + '.column.phone' }),
dataIndex: 'phone',
key: 'phone',
search: false,
render: (_, record) => (
<div className="flex items-center">
<span>
{formatPhone(record.phone, showPhone[record.orderSupplierId])}
</span>
<span
className="ml-2 cursor-pointer"
onClick={(e) => {
e.stopPropagation();
setShowPhone((prev) => ({
...prev,
[record.orderSupplierId]: !prev[record.orderSupplierId],
}));
}}
>
{showPhone[record.orderSupplierId] ? (
<EyeTwoTone />
) : (
<EyeInvisibleOutlined />
)}
</span>
</div>
),
},
{
title: intl.formatMessage({ id: intlPrefix + '.column.bankCard' }),
dataIndex: 'bankCard',
key: 'bankCard',
search: false,
render: (_, record) => (
<div className="flex items-center">
<span>
{formatBankCard(
record?.bankCard || '',
showBankCard[record.orderSupplierId],
)}
</span>
<span
className="ml-2 cursor-pointer"
onClick={(e) => {
e.stopPropagation();
setShowBankCard((prev) => ({
...prev,
[record.orderSupplierId]: !prev[record.orderSupplierId],
}));
}}
>
{showBankCard[record.orderSupplierId] ? (
<EyeTwoTone />
) : (
<EyeInvisibleOutlined />
)}
</span>
</div>
),
},
{
title: intl.formatMessage({ id: intlPrefix + '.column.orderCompany' }),
dataIndex: 'orderCompany',
valueType: 'select',
request: async (params) => {
const { data } = await business.company.listCompany({
companyListQry: {
...params,
},
});
return (
data?.map((item) => {
return {
label: item.fullName,
value: item.companyId,
};
}) || []
);
},
render: (_, record) => {
return (
<CompanyList
ghost={true}
mode={'detail'}
companyId={record.orderCompany.companyId}
trigger={() => <a href={'#'}>{record.orderCompany.fullName}</a>}
/>
);
},
}, },
{ {
title: intl.formatMessage({ id: intlPrefix + '.column.isPaid' }), title: intl.formatMessage({ id: intlPrefix + '.column.isPaid' }),
@ -151,28 +249,19 @@ export default function OrderSupplierModal(props: IOrderSupplierModalProps) {
valueType: 'select', valueType: 'select',
valueEnum: { valueEnum: {
true: { true: {
text: intl.formatMessage({ id: intlPrefix + '.column.isPaid.paid' }), text: intl.formatMessage({
status: 'Success', id: intlPrefix + '.column.isPaid.paid',
}),
status: 'success',
}, },
false: { false: {
text: intl.formatMessage({ text: intl.formatMessage({
id: intlPrefix + '.column.isPaid.unpaid', id: intlPrefix + '.column.isPaid.unpaid',
}), }),
status: 'Default', status: 'processing',
}, },
}, },
}, },
// {
// title: intl.formatMessage({ id: intlPrefix + '.column.type' }),
// dataIndex: 'type',
// key: 'type',
// valueType: 'select',
// valueEnum: {
// FARMER: { text: intl.formatMessage({ id: intlPrefix + '.column.type.farmer' }), status: 'Default' },
// STALL: { text: intl.formatMessage({ id: intlPrefix + '.column.type.stall' }), status: 'Processing' },
// OTHER_STALL: { text: intl.formatMessage({ id: intlPrefix + '.column.type.otherStall' }), status: 'Warning' },
// },
// },
...(initExtraColumns || []), ...(initExtraColumns || []),
]; ];
@ -225,6 +314,7 @@ export default function OrderSupplierModal(props: IOrderSupplierModalProps) {
}, },
params: { params: {
...params, ...params,
poStates: ['COMPLETED'],
}, },
request: async (params, sorter, filter) => { request: async (params, sorter, filter) => {
const { data, success, totalCount } = const { data, success, totalCount } =

View File

@ -3,6 +3,7 @@ import {
ButtonAccess, ButtonAccess,
InsertPosition, InsertPosition,
OrderSupplierInvoiceList, OrderSupplierInvoiceList,
SupplierFarmerList,
} from '@/components'; } from '@/components';
import OrderSupplierModal from '@/components/Order/OrderSupplierModal'; import OrderSupplierModal from '@/components/Order/OrderSupplierModal';
import { business } from '@/services'; import { business } from '@/services';
@ -260,13 +261,75 @@ export default function PaymentTaskCreate(props: IPaymentTaskCreateProps) {
rowKey="orderSupplierId" rowKey="orderSupplierId"
dataSource={selectedOrderSupplierList} dataSource={selectedOrderSupplierList}
columns={[ columns={[
{
title: '开票瓜农',
dataIndex: 'supplierInvoiceVO',
key: 'supplierName',
render: (
supplierInvoiceVO: BusinessAPI.SupplierInvoiceVO,
) => {
return (
supplierInvoiceVO && (
<SupplierFarmerList
ghost={true}
mode={'detail'}
supplierId={supplierInvoiceVO.supplierId}
trigger={() => (
<a>{supplierInvoiceVO.supplierName}</a>
)}
/>
)
);
},
},
{
title: '发票编码',
dataIndex: 'supplierInvoiceVO',
key: 'invoiceSn',
render: (
supplierInvoiceVO: BusinessAPI.SupplierInvoiceVO,
) => {
return <a>{supplierInvoiceVO.invoiceSn}</a>;
},
},
// 开票状态(自开票,代开票,未开票)
{
title: '开票状态',
key: 'invoiceStatus',
render: (record: BusinessAPI.OrderSupplierVO) => {
let invoiceStatus = 'NOT_INVOICE';
if (record.invoiceUpload && record.invoiceId) {
if (
record.supplierId ===
record.supplierInvoiceVO?.supplierId
) {
invoiceStatus = 'SELF';
}
if (
record.supplierId !==
record.supplierInvoiceVO?.supplierId
) {
invoiceStatus = 'AGENT';
}
} else {
invoiceStatus = 'NOT_INVOICE';
}
switch (invoiceStatus) {
case 'SELF':
return '自开票';
case 'AGENT':
return '代开票';
case 'NOT_INVOICE':
return '未开票';
default:
}
},
},
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
render: ( render: (record: BusinessAPI.OrderSupplierVO) => (
_: any,
record: BusinessAPI.OrderSupplierVO,
) => (
<Button <Button
type="link" type="link"
danger danger
@ -450,6 +513,7 @@ export default function PaymentTaskCreate(props: IPaymentTaskCreateProps) {
params={{ params={{
type: 'FARMER', type: 'FARMER',
isPaid: false, isPaid: false,
supplierId: selectedSupplier?.supplierId,
}} }}
tips="请选择该瓜农未付款的车次" tips="请选择该瓜农未付款的车次"
num={999} num={999}

View File

@ -298,8 +298,13 @@ export default function PaymentTaskList(props: IPaymentTaskListProps) {
}, },
{ {
title: '发票编码', title: '发票编码',
dataIndex: ['supplierInvoiceVO', 'invoiceNo'], dataIndex: 'supplierInvoiceVO',
key: 'invoiceNo', key: 'invoiceSn',
render: (
supplierInvoiceVO: BusinessAPI.SupplierInvoiceVO,
) => {
return <a>{supplierInvoiceVO.invoiceSn}</a>;
},
}, },
]} ]}
pagination={false} pagination={false}
@ -382,6 +387,7 @@ export default function PaymentTaskList(props: IPaymentTaskListProps) {
}} }}
page={{ page={{
fieldProps: { fieldProps: {
actionRef: actionRef,
bordered: true, bordered: true,
...(!ghost && { ...(!ghost && {
tableExtraRender: () => ( tableExtraRender: () => (
@ -484,7 +490,6 @@ export default function PaymentTaskList(props: IPaymentTaskListProps) {
}, },
}, },
columns, columns,
actionRef: actionRef,
}} }}
create={false} create={false}
update={{ update={{

View File

@ -2160,9 +2160,9 @@ export default {
phone: '手机号', phone: '手机号',
bankName: '银行名称', bankName: '银行名称',
bankCard: '银行卡号', bankCard: '银行卡号',
invoiceAmount: '应付货款金额(元)', invoiceAmount: '应付金额(元)',
depositAmount: '已付定金(元)', depositAmount: '已付定金(元)',
remainingAmount: '剩余货款金额(元)', remainingAmount: '剩余金额(元)',
order: '采购单', order: '采购单',
orderCompany: '销售公司', orderCompany: '销售公司',
isPaid: '是否付款', isPaid: '是否付款',
@ -2212,8 +2212,8 @@ export default {
phone: '手机号', phone: '手机号',
bankName: '银行名称', bankName: '银行名称',
bankCard: '银行卡号', bankCard: '银行卡号',
invoiceAmount: '应付货款金额(元)', invoiceAmount: '应付金额(元)',
remainingAmount: '剩余货款金额(元)', remainingAmount: '剩余金额(元)',
order: '采购单', order: '采购单',
orderCompany: '销售公司', orderCompany: '销售公司',
isPaid: '是否付款', isPaid: '是否付款',
@ -2552,9 +2552,9 @@ export default {
taskName: '任务名称', taskName: '任务名称',
paymentCode: '付款编码', paymentCode: '付款编码',
supplier: '瓜农信息', supplier: '瓜农信息',
totalAmount: '付款总金额', totalAmount: '付款总金额(元)',
paidAmount: '已付金额', paidAmount: '已付金额(元)',
unpaidAmount: '未付金额', unpaidAmount: '未付金额(元)',
orderCount: '订单数量', orderCount: '订单数量',
state: '付款状态', state: '付款状态',
createdAt: '创建时间', createdAt: '创建时间',
@ -2576,7 +2576,7 @@ export default {
invoiceType: { invoiceType: {
selfInvoice: '自开票', selfInvoice: '自开票',
proxyInvoice: '代开票', proxyInvoice: '代开票',
noInvoice: '无发票', noInvoice: '未开票',
}, },
}, },
tab: { tab: {