供应商联系人
This commit is contained in:
孙景学
157
src/components/CompanyInfo/component/ContactsInfoFormModal.tsx
Normal file
157
src/components/CompanyInfo/component/ContactsInfoFormModal.tsx
Normal file
@ -0,0 +1,157 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Modal, Form, Input, message, Row, Col, Descriptions } from 'antd';
|
||||
import { getDictList } from '@/servers/api/dicts';
|
||||
import { coscoSupplierUserView, coscoSupplierUserAdd, coscoSupplierUserEdit } from '../services';
|
||||
import { getRegionTree } from '@/servers/api/register';
|
||||
import type { DictItem } from '@/servers/api/dicts';
|
||||
|
||||
// 地区字段转换
|
||||
function convertToCascaderOptions(data: any[]): any[] {
|
||||
return data.map(item => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
children: item.children && item.children.length > 0 ? convertToCascaderOptions(item.children) : undefined,
|
||||
}));
|
||||
}
|
||||
interface props {
|
||||
visible: boolean;
|
||||
onOk: () => void;
|
||||
onCancel: () => void;
|
||||
initialValues?: any;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
interface viewDataData {
|
||||
id?: string | null;
|
||||
contactsName?: string;
|
||||
contactsPhone?: string;
|
||||
contactsEmail?: string;
|
||||
}
|
||||
const InvoiceFormModal: React.FC<props> = ({
|
||||
visible,
|
||||
onOk,
|
||||
onCancel,
|
||||
initialValues,
|
||||
readOnly = false,
|
||||
}) => {
|
||||
const userId = sessionStorage.getItem('userId') || '';
|
||||
// 新增与修改
|
||||
const [form] = Form.useForm();
|
||||
//查看
|
||||
const [viewData, setViewData] = useState<viewDataData>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
if (initialValues) {
|
||||
coscoSupplierUserView(initialValues.id).then((res) => {
|
||||
const { code, data } = res;
|
||||
if (code === 200) {
|
||||
const fields = {
|
||||
...data,
|
||||
id: data.id ? data.id : null,
|
||||
address: [
|
||||
Number(data.nation),
|
||||
Number(data.province),
|
||||
Number(data.city),
|
||||
]
|
||||
};
|
||||
console.log(fields);
|
||||
|
||||
form.setFieldsValue(fields);
|
||||
setViewData(fields);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
}
|
||||
}, [visible, initialValues]);
|
||||
|
||||
// 提交
|
||||
const handleFinish = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
const payload = {
|
||||
...values,
|
||||
supplierId: userId,
|
||||
};
|
||||
|
||||
if (!values.id) {
|
||||
coscoSupplierUserAdd(payload).then((res) => {
|
||||
if (res.code == 200) {
|
||||
message.success('新增成功');
|
||||
onOk();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
coscoSupplierUserEdit(payload).then((res) => {
|
||||
if (res.code == 200) {
|
||||
message.success('修改成功');
|
||||
onOk();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('表单校验失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={readOnly ? '查看' : initialValues ? '修改' : '新增'}
|
||||
visible={visible}
|
||||
onCancel={onCancel}
|
||||
onOk={readOnly ? onCancel : handleFinish}
|
||||
footer={readOnly ? null : undefined}
|
||||
destroyOnClose
|
||||
width={600}
|
||||
>
|
||||
{readOnly ? (
|
||||
<Descriptions
|
||||
column={1}
|
||||
bordered
|
||||
size="middle"
|
||||
labelStyle={{ width: 160 }}
|
||||
>
|
||||
<Descriptions.Item label="联系人姓名">{viewData.contactsName}</Descriptions.Item>
|
||||
<Descriptions.Item label="联系人手机号">{viewData.contactsPhone}</Descriptions.Item>
|
||||
<Descriptions.Item label="联系人邮箱">{viewData.contactsEmail}</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 />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item name="contactsPhone" label="联系人手机号"
|
||||
rules={[
|
||||
{ required: true, message: '请输入联系人手机号码' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' },
|
||||
]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item name="contactsEmail" label="联系人邮箱"
|
||||
rules={[
|
||||
{ type: 'email', message: '请输入有效的电子邮箱' },
|
||||
{ required: true, message: '请输入电子邮箱' },
|
||||
]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
<Form.Item name="id" noStyle>
|
||||
<Input type="hidden" />
|
||||
</Form.Item>
|
||||
</Row>
|
||||
</Form>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default InvoiceFormModal;
|
||||
@ -1,64 +1,113 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Table } from 'antd';
|
||||
import { Table, Button, message, Switch, Popconfirm } from 'antd';
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
import { coscoSupplierBase } from '../services';
|
||||
import { getCoscoSupplierUserPage, editType, coscoSupplierUserDel } from '../services';
|
||||
import { useIntl } from 'umi';
|
||||
import ContactsInfoFormModal from './ContactsInfoFormModal';
|
||||
|
||||
// 联系人信息接口
|
||||
interface Contact {
|
||||
interface getCoscoSupplierUser {
|
||||
id: string;
|
||||
name: string;
|
||||
department: string;
|
||||
position: string;
|
||||
mobile: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
updateTime: string;
|
||||
attachmentsType?: string;
|
||||
fileName?: string;
|
||||
filePath?: string;
|
||||
fileSize?: string;
|
||||
fileType?: string;
|
||||
fileUrl?: string;
|
||||
supplierId?: string;
|
||||
certificateUrl?: string;
|
||||
delFlag: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
viewType?: boolean;
|
||||
record?: string;
|
||||
}
|
||||
const ContactsInfoTab: React.FC<Props> = (props) => {
|
||||
const OtherAttachmentsTab: React.FC<Props> = (props) => {
|
||||
const userId = sessionStorage.getItem('userId') || '';
|
||||
const { viewType = false, record = userId } = props;
|
||||
//语言切换
|
||||
const intl = useIntl();
|
||||
const [data, setData] = useState<Contact[]>([]);
|
||||
const [pagination, setPagination] = useState<TablePaginationConfig>({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
//列表渲染数据
|
||||
const [data, setData] = useState<getCoscoSupplierUser[]>([]);
|
||||
//列表加载
|
||||
const [loading, setLoading] = useState(false);
|
||||
//列表分页
|
||||
const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
|
||||
|
||||
const fetchContacts = async (page: number = 1, pageSize: number = 10) => {
|
||||
//列表方法
|
||||
const getList = async (pageNo = 1, pageSize = 10) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { code, data } = await getCoscoSupplierUserPage({ pageNo, pageSize, supplierId: record });
|
||||
if (code === 200) {
|
||||
setData(data.records);
|
||||
setPagination({ current: pageNo, pageSize, total: data.total });
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
coscoSupplierBase(record).then((res) => {
|
||||
if(res.code == 200) {
|
||||
setData([res.data.coscoSupplierBase])
|
||||
//增改查
|
||||
const [formVisible, setFormVisible] = useState(false);
|
||||
const [editingRecord, setEditingRecord] = useState<getCoscoSupplierUser | null>(null);
|
||||
const [isViewMode, setIsViewMode] = useState(false);
|
||||
const handleFormSubmit = () => {
|
||||
setFormVisible(false);
|
||||
getList();
|
||||
};
|
||||
//新增
|
||||
const handleAdd = () => {
|
||||
setEditingRecord(null);
|
||||
setIsViewMode(false);
|
||||
setFormVisible(true);
|
||||
};
|
||||
// 修改
|
||||
const handleEdit = (record: getCoscoSupplierUser) => {
|
||||
setEditingRecord(record);
|
||||
setIsViewMode(false);
|
||||
setFormVisible(true);
|
||||
};
|
||||
// 查看
|
||||
const handleView = (record: getCoscoSupplierUser) => {
|
||||
setEditingRecord(record);
|
||||
setIsViewMode(true);
|
||||
setFormVisible(true);
|
||||
};
|
||||
//删除
|
||||
const handleDel = (record: getCoscoSupplierUser) => {
|
||||
coscoSupplierUserDel(record.id).then((res) => {
|
||||
if (res.code == 200) {
|
||||
message.success('删除成功');
|
||||
getList();
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
//是否为主联系人
|
||||
const handleObsoleteChange = async (checked: boolean, id: string) => {
|
||||
// 调用你的作废接口
|
||||
const res = await editType({ id, supplierId: record });
|
||||
if (res.code === 200) {
|
||||
message.success('操作成功');
|
||||
getList(pagination.current, pagination.pageSize); // 刷新列表
|
||||
} else {
|
||||
message.error('操作失败');
|
||||
}
|
||||
}
|
||||
//初始化
|
||||
useEffect(() => {
|
||||
if(record) {
|
||||
fetchContacts();
|
||||
if (record) {
|
||||
getList();
|
||||
}
|
||||
}, [record]);
|
||||
|
||||
const handleTableChange = (pagination: TablePaginationConfig) => {
|
||||
fetchContacts(pagination.current!, pagination.pageSize!);
|
||||
};
|
||||
|
||||
const columns: ColumnsType<Contact> = [
|
||||
const columns: ColumnsType<getCoscoSupplierUser> = [
|
||||
{
|
||||
title: intl.formatMessage({ id: 'page.workbench.contacts.index' }),
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
render: (_: any, __: any, index: number) =>
|
||||
(pagination.current! - 1) * pagination.pageSize! + index + 1,
|
||||
title: intl.formatMessage({ id: 'page.workbench.attachments.index' }),
|
||||
render: (_: any, __: any, index: number) => index + 1,
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
title: '联系人',
|
||||
@ -75,22 +124,79 @@ const ContactsInfoTab: React.FC<Props> = (props) => {
|
||||
dataIndex: 'contactsEmail',
|
||||
key: 'contactsEmail',
|
||||
},
|
||||
];
|
||||
|
||||
{
|
||||
title: '是否为主联系人',
|
||||
dataIndex: 'type',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
render: (value, record: getCoscoSupplierUser) => {
|
||||
let checkedType = value === '1' ? true : false;
|
||||
return (
|
||||
<Switch
|
||||
checked={checkedType}
|
||||
disabled={viewType}
|
||||
onChange={(checked) => handleObsoleteChange(checked, record.id)}
|
||||
/>
|
||||
)
|
||||
|
||||
},
|
||||
},
|
||||
...(viewType ? [] : [
|
||||
{
|
||||
title: 'page.workbench.attachments.action',
|
||||
dataIndex: 'option',
|
||||
width: 140,
|
||||
render: (_: any, record: getCoscoSupplierUser) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<a style={{ marginRight: 8 }} onClick={() => handleView(record)}>查看</a>
|
||||
|
||||
<a style={{ marginRight: 8 }} onClick={() => handleEdit(record)}>修改</a>
|
||||
|
||||
{record.type === '0' && (
|
||||
<Popconfirm
|
||||
title="确定要删除该联系人吗？"
|
||||
onConfirm={() => handleDel(record)}
|
||||
>
|
||||
<a >删除</a>
|
||||
</Popconfirm>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
])
|
||||
];
|
||||
return (
|
||||
<div style={{ padding: '0 30px 0 0' }}>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
{!viewType && (
|
||||
<Button type="primary" onClick={handleAdd}>新增</Button>
|
||||
)}
|
||||
</div>
|
||||
<Table
|
||||
className="custom-table"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
columns={columns.map(column => ({
|
||||
...column,
|
||||
title: intl.formatMessage({ id: column.title as string })
|
||||
}))}
|
||||
dataSource={data}
|
||||
pagination={pagination}
|
||||
onChange={handleTableChange}
|
||||
bordered
|
||||
loading={loading}
|
||||
onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
|
||||
/>
|
||||
<ContactsInfoFormModal
|
||||
visible={formVisible}
|
||||
onOk={handleFormSubmit}
|
||||
onCancel={() => setFormVisible(false)}
|
||||
initialValues={editingRecord || undefined}
|
||||
readOnly={isViewMode}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactsInfoTab;
|
||||
export default OtherAttachmentsTab;
|
||||
@ -231,8 +231,49 @@ export const updateSupplierBase = (data: updateSupplierBase) => request.post('/c
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 联系人分页列表
|
||||
*/
|
||||
interface getCoscoSupplierUserPage {
|
||||
pageNo: number;
|
||||
pageSize: number;
|
||||
supplierId?: string;
|
||||
}
|
||||
export const getCoscoSupplierUserPage = (data: getCoscoSupplierUserPage) => request.post('/coscoSupplierUser/getPage', { data });
|
||||
/**
|
||||
* 附件详情
|
||||
*/
|
||||
export const coscoSupplierUserView = (id: string) => request.get(`/coscoSupplierUser/${id}`);
|
||||
/**
|
||||
* 附件新增
|
||||
*/
|
||||
interface coscoSupplierUserAdd {
|
||||
id?: string;
|
||||
attachmentsType?: string;
|
||||
fileName?: string;
|
||||
filePath?: string;
|
||||
fileSize?: string;
|
||||
fileType?: string;
|
||||
fileUrl?: string;
|
||||
supplierId?: string;
|
||||
delFlag?: string;
|
||||
[property: string]: any;
|
||||
}
|
||||
export const coscoSupplierUserAdd = (data: coscoSupplierUserAdd) => request.post('/coscoSupplierUser/add', { data });
|
||||
/**
|
||||
* @param data
|
||||
* @returns
|
||||
* 附件修改
|
||||
*/
|
||||
export const coscoSupplierUserEdit = (data: coscoSupplierUserAdd) => request.put('/coscoSupplierUser/edit', { data });
|
||||
|
||||
interface editType {
|
||||
supplierId:string;
|
||||
id:string;
|
||||
}
|
||||
export const editType = (data: editType) => request.post('/coscoSupplierUser/editType', { data });
|
||||
|
||||
export const coscoSupplierUserDel = (id: string) => request.delete(`/coscoSupplierUser/${id}`);
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user