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-29 16:18:08 +08:00
parent a54be1d5a6
commit ce39764f08
24 changed files with 541 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, message, Row, Col, Descriptions, Tree } from 'antd';
import { Modal, Form, Input, message, Row, Col, Descriptions, Tree, Spin } from 'antd';
//接口
import { coscoSupplierUserView, coscoSupplierUserAdd, coscoSupplierUserEdit, categoryTree } from '../services';
@ -17,11 +17,36 @@ interface viewDataData {
contactsEmail?: string;
categoryName?: string;
categoryNameList?: string[];
coscoSupplierUserCategoryList: coscoSupplierUserCategory[]
}
interface coscoSupplierUserCategory {
categoryName: string;
categoryId: string;
supplierUserId: string;
}
interface SupplierUserCategory {
categoryId: string;
supplierUserId?: string;
}
}
interface CategoryNode {
key: string;
title: string;
children?: CategoryNode[];
}
function flattenTree(
tree: CategoryNode[],
map: Record<string, string> = {}
): Record<string, string> {
tree.forEach((node) => {
map[node.key] = node.title;
if (node.children) flattenTree(node.children, map);
});
return map;
}
const InvoiceFormModal: React.FC<props> = ({
visible,
onOk,
@ -33,11 +58,12 @@ const InvoiceFormModal: React.FC<props> = ({
// 新增与修改
const [form] = Form.useForm();
//查看
const [viewData, setViewData] = useState<viewDataData>({});
const [viewData, setViewData] = useState<viewDataData>();
//品类选择
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
//品类选择渲染数据
const [categoriesTreeData, setCategoriesTreeData] = useState([]);
const [treeLoading, setTreeLoading] = useState(true);
//提交防抖
const [submitting, setSubmitting] = useState(false);
useEffect(() => {
@ -56,22 +82,25 @@ const InvoiceFormModal: React.FC<props> = ({
setCheckedKeys(
(fields.coscoSupplierUserCategoryList || []).map(
(item: SupplierUserCategory) => item.categoryId
(item: SupplierUserCategory) => item.categoryId
)
);
);
setViewData(fields);
}
});
} else {
form.resetFields();
setCheckedKeys([]);
setCheckedKeys([]);
}
setTreeLoading(true);
categoryTree().then((res) => {
const { code, data } = res;
if (code == 200) {
setCategoriesTreeData(data)
}
})
}).finally(() => {
setTreeLoading(false);
});
}
}, [visible, initialValues]);
//品类选择数据中字段转换
@ -112,8 +141,16 @@ const InvoiceFormModal: React.FC<props> = ({
const leafKeys = findLeafKeys(convertTreeData(categoriesTreeData));
const onlyLeafChecked = keys.filter(key => leafKeys.includes(String(key)));
// 平铺tree获取id=>title映射
const keyTitleMap = flattenTree(convertTreeData(categoriesTreeData));
// 拼 categoryItem 数组
const coscoSupplierUserCategoryList = onlyLeafChecked.map((id) => ({
categoryId: id,
categoryName: keyTitleMap[id] || '',
}));
setCheckedKeys(keys); // UI 显示用，还是全量
form.setFieldsValue({ categoryIdList: onlyLeafChecked }); // 只存叶子到表单
form.setFieldsValue({ categoryIdList: onlyLeafChecked, coscoSupplierUserCategoryList }); // 只存叶子到表单
};
// 提交
const handleFinish = async () => {
@ -126,7 +163,6 @@ const InvoiceFormModal: React.FC<props> = ({
supplierId: userId,
};
console.log(payload);
if (!values.id) {
coscoSupplierUserAdd(payload).then((res) => {
if (res.code == 200) {
@ -167,12 +203,12 @@ const InvoiceFormModal: React.FC<props> = ({
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.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>
{viewData?.coscoSupplierUserCategoryList && viewData.coscoSupplierUserCategoryList.map((item) => {
return <div>{item.categoryName}</div>
})}
</Descriptions.Item>
</Descriptions>
@ -202,24 +238,32 @@ const InvoiceFormModal: React.FC<props> = ({
<Input placeholder="请输入联系人邮箱" />
</Form.Item>
</Col>
<Form.Item name="coscoSupplierUserCategoryList" noStyle>
<Input type="hidden" />
</Form.Item>
<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,
}}
/>
{treeLoading ? (
<div style={{ padding: '24px 0', textAlign: 'center' }}>
<Spin tip="品类数据加载中..." />
</div>
) : (
<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>