liuc/fe_supplier_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

联系人

Browse Source
This commit is contained in:
孙景学
2025-07-18 10:37:13 +08:00
parent 90b8628eb8
commit 0d3088b8f8
13 changed files with 328 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CompanyInfo/component/AttachmentsFormModal.tsx
View File

@ -168,7 +168,7 @@ const InvoiceFormModal: React.FC<props> = ({
<Row gutter={24}>
<Col span={24}>
<Form.Item name="attachmentsType" label="附件类型" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入附件类型' />
</Form.Item>
</Col>
<Col span={24}>

8
src/components/CompanyInfo/component/BankFormModal.tsx
View File

@ -161,22 +161,22 @@ const InvoiceFormModal: React.FC<props> = ({
<Row gutter={24}>
<Col span={24}>
<Form.Item name="account" label="开户账号" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入开户账号' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="accountName" label="账户名称" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入账户名称' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="bank" label="开户银行" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入开户银行' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="interbankNumber" label="联行号" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入联行号' />
</Form.Item>
</Col>

97
src/components/CompanyInfo/component/ContactsInfoFormModal.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, message, Row, Col, Descriptions } from 'antd';
import { coscoSupplierUserView, coscoSupplierUserAdd, coscoSupplierUserEdit } from '../services';
import { Modal, Form, Input, message, Row, Col, Descriptions, Tree } from 'antd';
//接口
import { coscoSupplierUserView, coscoSupplierUserAdd, coscoSupplierUserEdit, categoryTree } from '../services';
interface props {
visible: boolean;
@ -15,7 +15,10 @@ interface viewDataData {
contactsName?: string;
contactsPhone?: string;
contactsEmail?: string;
categoryName?: string;
categoryNameList?: string[];
}
const InvoiceFormModal: React.FC<props> = ({
visible,
onOk,
@ -28,7 +31,10 @@ const InvoiceFormModal: React.FC<props> = ({
const [form] = Form.useForm();
//查看
const [viewData, setViewData] = useState<viewDataData>({});
//品类选择
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
//品类选择渲染数据
const [categoriesTreeData, setCategoriesTreeData] = useState([]);
useEffect(() => {
if (visible) {
if (initialValues) {
@ -38,11 +44,6 @@ const InvoiceFormModal: React.FC<props> = ({
const fields = {
...data,
id: data.id ? data.id : null,
address: [
Number(data.nation),
Number(data.province),
Number(data.city),
]
};
console.log(fields);
@ -53,9 +54,55 @@ const InvoiceFormModal: React.FC<props> = ({
} else {
form.resetFields();
}
categoryTree().then((res) => {
const { code, data } = res;
if (code == 200) {
setCategoriesTreeData(data)
}
})
}
}, [visible, initialValues]);
//品类选择数据中字段转换
const convertTreeData = (data: any) => {
return data.map((item: any) => ({
...item,
title: item.categoryName,
key: item.id,
children: item.children ? convertTreeData(item.children) : undefined,
}));
}
function findLeafKeys(treeData: any[]): string[] {
let leafKeys: string[] = [];
function dfs(nodes: any[]) {
nodes.forEach(node => {
if (!node.children || node.children.length === 0) {
leafKeys.push(node.key);
} else {
dfs(node.children);
}
});
}
dfs(treeData);
return leafKeys;
}
//品类选择
const onCheck = (
checkedKeysValue:
| React.Key[]
| { checked: React.Key[]; halfChecked: React.Key[] }
) => {
const keys = Array.isArray(checkedKeysValue)
? checkedKeysValue
: checkedKeysValue.checked;
// 只取叶子节点 key
const leafKeys = findLeafKeys(convertTreeData(categoriesTreeData));
const onlyLeafChecked = keys.filter(key => leafKeys.includes(String(key)));
setCheckedKeys(keys); // UI 显示用，还是全量
form.setFieldsValue({ categoryIdList: onlyLeafChecked }); // 只存叶子到表单
};
// 提交
const handleFinish = async () => {
try {
@ -64,6 +111,7 @@ const InvoiceFormModal: React.FC<props> = ({
...values,
supplierId: userId,
};
console.log(payload);
if (!values.id) {
coscoSupplierUserAdd(payload).then((res) => {
@ -106,13 +154,18 @@ const InvoiceFormModal: React.FC<props> = ({
<Descriptions.Item label="联系人姓名">{viewData.contactsName}</Descriptions.Item>
<Descriptions.Item label="联系人手机号">{viewData.contactsPhone}</Descriptions.Item>
<Descriptions.Item label="联系人邮箱">{viewData.contactsEmail}</Descriptions.Item>
<Descriptions.Item label="负责品类">
{viewData.categoryNameList && viewData.categoryNameList.map((item) => {
return <div>{item}</div>
})}
</Descriptions.Item>
</Descriptions>
) : (
<Form form={form} labelCol={{ flex: '120px' }} wrapperCol={{ flex: 1 }}>
<Row gutter={24}>
<Col span={24}>
<Form.Item name="contactsName" label="联系人姓名" rules={[{ required: true }]}>
<Input />
<Input placeholder="请输入联系人姓名" />
</Form.Item>
</Col>
<Col span={24}>
@ -121,7 +174,7 @@ const InvoiceFormModal: React.FC<props> = ({
{ required: true, message: '请输入联系人手机号码' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' },
]}>
<Input />
<Input placeholder="请输入联系人手机号" />
</Form.Item>
</Col>
<Col span={24}>
@ -130,7 +183,27 @@ const InvoiceFormModal: React.FC<props> = ({
{ type: 'email', message: '请输入有效的电子邮箱' },
{ required: true, message: '请输入电子邮箱' },
]}>
<Input />
<Input placeholder="请输入联系人邮箱" />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="categoryIdList" label="负责品类"
rules={[{ required: true }]}>
<Tree
checkable
selectable={false}
treeData={convertTreeData(categoriesTreeData)}
checkedKeys={checkedKeys}
onCheck={onCheck}
defaultExpandAll
style={{
maxHeight: 200,
overflowY: 'auto',
border: '1px solid #d9d9d9',
padding: 8,
borderRadius: 4,
}}
/>
</Form.Item>
</Col>

34
src/components/CompanyInfo/component/ContactsInfoTab.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Table, Button, message, Switch, Popconfirm } from 'antd';
import { Table, Button, message, Switch, Popconfirm, Tooltip } from 'antd';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import { getCoscoSupplierUserPage, editType, coscoSupplierUserDel } from '../services';
import { useIntl } from 'umi';
@ -17,6 +17,12 @@ interface getCoscoSupplierUser {
certificateUrl?: string;
delFlag: string;
type: string;
coscoSupplierUserCategoryList?: CoscoSupplierUserCategory[];
}
interface CoscoSupplierUserCategory {
categoryId:string;
categoryName:string;
supplierUserId:string;
}
interface Props {
@ -86,6 +92,7 @@ const OtherAttachmentsTab: React.FC<Props> = (props) => {
};
//是否为主联系人
const handleObsoleteChange = async (checked: boolean, id: string) => {
if(!checked) return
// 调用你的作废接口
const res = await editType({ id, supplierId: record });
if (res.code === 200) {
@ -124,6 +131,29 @@ const OtherAttachmentsTab: React.FC<Props> = (props) => {
dataIndex: 'contactsEmail',
key: 'contactsEmail',
},
{
title: '负责品类',
dataIndex: 'coscoSupplierUserCategoryList',
key: 'coscoSupplierUserCategoryList',
ellipsis: true,
width: 160,
render: (value: { categoryName: string }[] = []) => {
if (!value || value.length === 0) return '-';
if (value.length === 1) {
return <span>{value[0].categoryName}</span>;
}
// 多于1条
const allNames = value.map(item => item.categoryName).join('、');
return (
<Tooltip title={allNames} overlayStyle={{ zIndex: 1200 }}>
<span>
{value[0].categoryName}
<span>等</span>
</span>
</Tooltip>
);
},
},
{
title: '是否为主联系人',
@ -181,7 +211,7 @@ const OtherAttachmentsTab: React.FC<Props> = (props) => {
rowKey="id"
columns={columns.map(column => ({
...column,
title: intl.formatMessage({ id: column.title as string })
title: column.title
}))}
dataSource={data}
pagination={pagination}

12
src/components/CompanyInfo/component/InvoiceFormModal.tsx
View File

@ -201,35 +201,35 @@ const InvoiceFormModal: React.FC<props> = ({
</Col>
<Col span={24}>
<Form.Item name="taxpayerCode" label="纳税人识别号" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入纳税人识别号' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="phone" label="开票电话" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入开票电话' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="account" label="开户行账号" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入开户行账号' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="head" label="开票抬头" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入开票抬头' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="address" label="开票地址" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入开票地址' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="bank" label="开票开户行" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入开票开户行' />
</Form.Item>
</Col>

10
src/components/CompanyInfo/component/QualificationFormModal.tsx
View File

@ -176,27 +176,27 @@ const QualificationFormModal: React.FC<QualificationFormModalProps> = ({
<Row gutter={24}>
<Col span={24}>
<Form.Item name="certificateType" label="资质证书类型" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入资质证书类型' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="name" label="资质名称" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入资质名称' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="code" label="资质证书编号" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入资质证书编号' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="typeLevel" label="资质类别和等级" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入资质类别和等级' />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item name="authority" label="发证机构" rules={[{ required: true }]}>
<Input />
<Input placeholder='请输入发证机构' />
</Form.Item>
</Col>
<Col span={24}>

5
src/components/CompanyInfo/services.ts
View File

@ -276,7 +276,10 @@ export const editType = (data: editType) => request.post('/coscoSupplierUser/edi
export const coscoSupplierUserDel = (id: string) => request.delete(`/coscoSupplierUser/${id}`);
/**
* 品类选择查询树
*/
export const categoryTree = () => request.get('/cosco/category/categoryTree');