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:
linxd
2025-07-16 09:26:08 +08:00
parent b8f9763f4a
commit aebb615fb6
16 changed files with 277 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/SupplierDetailModalContext/SupplierDetail.tsx
View File

@ -1,12 +1,99 @@
import React, { useState, useEffect } from 'react';
import { Button, Space, Descriptions } from 'antd';
import SupplierRegisterInfo from '@/components/GlobalModal/components/SupplierRegisterInfo';
import AccessCategoryTable from '@/components/GlobalModal/components/AccessCategoryTable';
import TianyanchaInfo from '@/components/GlobalModal/components/TianyanchaInfo';
import RiskList from '@/components/GlobalModal/components/RiskList';
import { coscoSupplierBase } from '@/components/GlobalModal/services';
import { useIntl } from 'umi';
const SupplierDetail = ({ supplierId }: { supplierId: string | null }) => {
const [supplierDetail, setSupplierDetail] = useState(null);
interface SupplierDetailProps {
supplierId: string | null;
}
const SupplierDetail: React.FC<SupplierDetailProps> = ({ supplierId }) => {
const intl = useIntl();
const [modalType, setModalType] = useState<'register' | 'category' | 'tianyancha' | 'risk'>('register');
const [registerInfo, setRegisterInfo] = useState<any>(null);
// 获取供应商信息
const fetchRegisterInfo = () => {
if (!supplierId) return;
coscoSupplierBase(supplierId).then((res) => {
const { code, data } = res;
if (code === 200) {
setRegisterInfo(data);
}
});
};
// 切换 Tab
const handleSwitch = (type: typeof modalType) => {
setModalType(type);
};
// 渲染内容
const renderContent = () => {
if (modalType === 'register' && registerInfo?.coscoSupplierBase) {
return <SupplierRegisterInfo registerInfo={registerInfo} />;
}
if (modalType === 'category') {
return supplierId ? <AccessCategoryTable id={supplierId} /> : null;
}
if (modalType === 'tianyancha') {
return supplierId ? <TianyanchaInfo id={supplierId} /> : null;
}
if (modalType === 'risk') {
return supplierId ? <RiskList id={supplierId} /> : null;
}
return null;
};
useEffect(() => {
console.log(supplierId);
if (supplierId) {
setModalType('register');
fetchRegisterInfo();
} else {
setRegisterInfo(null);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [supplierId]);
return <div>SupplierDetail</div>;
if (!supplierId) return null;
return (
(registerInfo?.coscoSupplierBase?.supplierType !== 'pe' && registerInfo) ? (
<div>
<Space style={{ marginBottom: 16 }}>
<Button type={modalType === 'register' ? 'primary' : 'default'} onClick={() => handleSwitch('register')}>{intl.formatMessage({ id: 'component.globalModal.register' })}</Button>
<Button type={modalType === 'category' ? 'primary' : 'default'} onClick={() => handleSwitch('category')}>{intl.formatMessage({ id: 'component.globalModal.category' })}</Button>
<Button type={modalType === 'tianyancha' ? 'primary' : 'default'} onClick={() => handleSwitch('tianyancha')}>{intl.formatMessage({ id: 'component.globalModal.tianyancha' })}</Button>
<Button type={modalType === 'risk' ? 'primary' : 'default'} onClick={() => handleSwitch('risk')}>{intl.formatMessage({ id: 'component.globalModal.ComplianceRisk' })}</Button>
</Space>
<div style={{ height: '600px', overflowY: 'auto' }}>
{renderContent()}
</div>
</div>
) : (
<Descriptions bordered column={3} style={{ marginBottom: 24 }} title={intl.formatMessage({ id: 'component.globalModal.supplierRegisterInfo' })}>
<Descriptions.Item label="姓名" labelStyle={{ width: '140px' }}>
<span>{registerInfo?.coscoSupplierBase?.personName}</span>
</Descriptions.Item>
<Descriptions.Item label="身份证号" labelStyle={{ width: '140px' }}>
<span>{registerInfo?.coscoSupplierBase?.idCard}</span>
</Descriptions.Item>
<Descriptions.Item label="联系电话" labelStyle={{ width: '140px' }}>
<span>{registerInfo?.coscoSupplierBase?.personPhone}</span>
</Descriptions.Item>
<Descriptions.Item label="开户行">
<span>{registerInfo?.coscoSupplierBase?.personBank}</span>
</Descriptions.Item>
<Descriptions.Item label="银行账号">
<span>{registerInfo?.coscoSupplierBase?.personAccount}</span>
</Descriptions.Item>
</Descriptions>
)
);
};
export default SupplierDetail;

5
src/components/SupplierDetailModalContext/SupplierDetailModalContext.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Modal } from 'antd';
import { Modal, message } from 'antd';
import SupplierDetail from './SupplierDetail';
const SupplierDetailModalContext = React.createContext<((id: string) => void) | null>(null);
@ -10,6 +10,7 @@ export const SupplierDetailModalProvider = ({ children }: { children: React.Reac
const [supplierId, setSupplierId] = useState<string | null>(null);
const showSupplierDetail = (id: string) => {
if (!id) return message.error('此供应商信息缺失，请联系管理员');
setSupplierId(id);
setVisible(true);
};
@ -17,7 +18,7 @@ export const SupplierDetailModalProvider = ({ children }: { children: React.Reac
return (
<SupplierDetailModalContext.Provider value={showSupplierDetail}>
{children}
<Modal visible={visible} onCancel={() => setVisible(false)} footer={null}>
<Modal visible={visible} onCancel={() => setVisible(false)} footer={null} width="90%">
<SupplierDetail supplierId={supplierId} />
</Modal>
</SupplierDetailModalContext.Provider>

13
src/components/SupplierDetailModalContext/readme.md
View File

@ -1,3 +1,10 @@
// 任何页面/组件
const showSupplierDetail = useSupplierDetailModal();
<span onClick={() => showSupplierDetail(supplier.id)}>{supplier.name}</span>
// 任何组件中
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
const MyComponent = () => {
const showSupplierDetail = useSupplierDetailModal();
return (
<a onClick={() => showSupplierDetail('123')}>查看供应商</a>
);
};

115
src/components/SupplierSelector/SupplierSelector.tsx
View File

@ -5,6 +5,7 @@ import { getSupplierPage } from '@/servers/api/supplier';
import CategorySelector from '@/components/CategorySelector/CategorySelector';
import './SupplierSelector.less';
import { useIntl } from 'umi';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
const { Option } = Select;
@ -83,9 +84,10 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
// 查询参数
const [queryParams, setQueryParams] = useState({
pageNo: 1,
pageSize: 10
pageSize: 10,
});
const supplierDetailModal = useSupplierDetailModal();
/**
* 监听初始已选供应商变化，更新内部状态
*/
@ -129,7 +131,9 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
*/
const moveToLeft = () => {
// 过滤掉右侧选中的供应商
const remaining = chosenSuppliers.filter((item: SupplierItem) => !rightSelected.includes(item.id));
const remaining = chosenSuppliers.filter(
(item: SupplierItem) => !rightSelected.includes(item.id),
);
// 更新已选列表
setChosenSuppliers(remaining);
// 清空右侧选择状态
@ -151,18 +155,23 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
if (response && response.code === 200) {
// 请求成功，更新数据和分页信息
setTableListData(response.data.records.map((item: any) => ({
...item,
supplierName: item.name,
})));
setTableListData(
response.data.records.map((item: any) => ({
...item,
supplierName: item.name,
})),
);
setPagination({
current: queryParams.pageNo,
pageSize: queryParams.pageSize,
total: response.data.total || 0
total: response.data.total || 0,
});
} else {
// 请求失败，显示错误信息
message.error(response?.message || intl.formatMessage({ id: 'supplierTaskManage.message.fetchSupplierListFailed' }));
message.error(
response?.message ||
intl.formatMessage({ id: 'supplierTaskManage.message.fetchSupplierListFailed' }),
);
setTableListData([]);
setPagination({ current: 1, pageSize: 10, total: 0 });
}
@ -189,10 +198,10 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
*/
useEffect(() => {
const values = form.getFieldsValue();
setQueryParams(prev => ({
setQueryParams((prev) => ({
...prev,
...values,
pageNo: 1
pageNo: 1,
}));
}, []); // 空依赖数组，只在组件挂载时执行一次
@ -201,10 +210,10 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
* @param {any} values - 表单值
*/
const handleSearch = (values: any) => {
setQueryParams(prev => ({
setQueryParams((prev) => ({
...prev,
...values,
pageNo: 1
pageNo: 1,
}));
};
@ -214,10 +223,10 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
const handleReset = () => {
form.resetFields();
const values = form.getFieldsValue();
setQueryParams(prev => ({
setQueryParams((prev) => ({
...prev,
...values,
pageNo: 1
pageNo: 1,
}));
};
@ -226,18 +235,13 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
* @param {any} paginationInfo - 分页信息
*/
const handleTableChange = (paginationInfo: any) => {
setQueryParams(prev => ({
setQueryParams((prev) => ({
...prev,
pageNo: paginationInfo.current,
pageSize: paginationInfo.pageSize
pageSize: paginationInfo.pageSize,
}));
};
// 显示供应商详情
const showSupplierDetail = (record: SupplierItem) => {
console.log(record);
};
// 表格列定义
const columns = [
{
@ -247,7 +251,7 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
ellipsis: true,
render: (supplierName: string, record: SupplierItem) => (
<Tooltip placement="topLeft" title={supplierName}>
<span onClick={()=>showSupplierDetail(record)}>{supplierName}</span>
<Button type="link" onClick={() => supplierDetailModal?.(record.id)}>{supplierName}</Button>
</Tooltip>
),
},
@ -273,34 +277,61 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
</Tooltip>
),
},
];
return (
<div className="supplier-selector">
{/* 查询表单 */}
<Form layout="inline" form={form} onFinish={handleSearch} style={{ marginBottom: 30 }}>
<Form.Item name="name" label={intl.formatMessage({ id: 'supplierTaskManage.form.supplierName' })}>
<Input placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.supplierName' })} allowClear />
<Form.Item
name="name"
label={intl.formatMessage({ id: 'supplierTaskManage.form.supplierName' })}
>
<Input
placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.supplierName' })}
allowClear
/>
</Form.Item>
<Form.Item name="deptId" label={intl.formatMessage({ id: 'supplierTaskManage.form.department' })}>
<Select placeholder={intl.formatMessage({ id: 'supplierTaskManage.placeholder.selectDepartment' })} allowClear style={{ width: 150 }}>
<Option value="1">{intl.formatMessage({ id: 'supplierTaskManage.department.purchase' })}</Option>
<Option value="2">{intl.formatMessage({ id: 'supplierTaskManage.department.technology' })}</Option>
<Option value="3">{intl.formatMessage({ id: 'supplierTaskManage.department.quality' })}</Option>
<Form.Item
name="deptId"
label={intl.formatMessage({ id: 'supplierTaskManage.form.department' })}
>
<Select
placeholder={intl.formatMessage({
id: 'supplierTaskManage.placeholder.selectDepartment',
})}
allowClear
style={{ width: 150 }}
>
<Option value="1">
{intl.formatMessage({ id: 'supplierTaskManage.department.purchase' })}
</Option>
<Option value="2">
{intl.formatMessage({ id: 'supplierTaskManage.department.technology' })}
</Option>
<Option value="3">
{intl.formatMessage({ id: 'supplierTaskManage.department.quality' })}
</Option>
</Select>
</Form.Item>
<Form.Item name="categoryId" label={intl.formatMessage({ id: 'supplierTaskManage.form.category' })}>
<Form.Item
name="categoryId"
label={intl.formatMessage({ id: 'supplierTaskManage.form.category' })}
>
<CategorySelector multiple={false} style={{ width: 150 }} />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">{intl.formatMessage({ id: 'supplierTaskManage.button.search' })}</Button>
<Button type="primary" htmlType="submit">
{intl.formatMessage({ id: 'supplierTaskManage.button.search' })}
</Button>
</Form.Item>
<Form.Item>
<Button onClick={handleReset}>{intl.formatMessage({ id: 'supplierTaskManage.button.reset' })}</Button>
<Button onClick={handleReset}>
{intl.formatMessage({ id: 'supplierTaskManage.button.reset' })}
</Button>
</Form.Item>
</Form>
@ -310,13 +341,18 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
<Col span={10}>
<div className="list-title">
{intl.formatMessage({ id: 'supplierTaskManage.text.availableSuppliers' })}
<span className="search-count">{intl.formatMessage({ id: 'supplierTaskManage.text.itemCount' }, { count: pagination.total })}</span>
<span className="search-count">
{intl.formatMessage(
{ id: 'supplierTaskManage.text.itemCount' },
{ count: pagination.total },
)}
</span>
</div>
<Table
rowSelection={{
type: 'checkbox',
onChange: setLeftSelected,
selectedRowKeys: leftSelected
selectedRowKeys: leftSelected,
}}
rowKey="id"
dataSource={tableListData}
@ -346,13 +382,18 @@ const SupplierSelector: React.FC<SupplierSelectorProps> = ({
<Col span={10}>
<div className="list-title">
{intl.formatMessage({ id: 'supplierTaskManage.text.selectedSuppliers' })}
<span className="search-count">{intl.formatMessage({ id: 'supplierTaskManage.text.itemCount' }, { count: chosenSuppliers.length })}</span>
<span className="search-count">
{intl.formatMessage(
{ id: 'supplierTaskManage.text.itemCount' },
{ count: chosenSuppliers.length },
)}
</span>
</div>
<Table
rowSelection={{
type: 'checkbox',
onChange: setRightSelected,
selectedRowKeys: rightSelected
selectedRowKeys: rightSelected,
}}
columns={columns}
dataSource={chosenSuppliers}

4
src/pages/supplierAnnualManage/supplierAnnualResult/supplierAnnualResultDetail.tsx
View File

@ -19,11 +19,13 @@ import {
ExamineResultColor,
} from '@/dicts/supplierAnnualReviewDict';
import styles from './supplierAnnualResult.less';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
const { Title } = Typography;
const SupplierAnnualResultDetail: React.FC = () => {
const intl = useIntl();
const supplierDetailModal = useSupplierDetailModal();
const [loading, setLoading] = useState<boolean>(false);
const [reviewDetail, setReviewDetail] = useState<supplierAnnualResult.ReviewDetailData | null>(null);
const [scoreResults, setScoreResults] = useState<supplierAnnualResult.TaskIndicatorVo[]>([]);
@ -133,7 +135,7 @@ const SupplierAnnualResultDetail: React.FC = () => {
<Card title={intl.formatMessage({ id: 'supplierAnnualResult.detail.basicInfo' })} bordered={false} className={styles['detail-card']}>
<Descriptions column={2} bordered>
<Descriptions.Item label={intl.formatMessage({ id: 'supplierAnnualResult.detail.supplierName' })}>
{supplierName || reviewDetail.name}
<Button type="link" onClick={() => supplierDetailModal?.(reviewDetail.supplierId)}>{supplierName || reviewDetail.name}</Button>
</Descriptions.Item>
<Descriptions.Item label={intl.formatMessage({ id: 'supplierAnnualResult.detail.annualTheme' })}>
{annualTheme}

5
src/pages/supplierAnnualManage/supplierAnnualResult/supplierAnnualResultQuery.tsx
View File

@ -15,6 +15,7 @@ import {
import { ArrowLeftOutlined, SearchOutlined, DeleteOutlined } from '@ant-design/icons';
import { getAnnualResultSupplierList } from '@/servers/api/supplierAnnual';
import styles from './supplierAnnualResult.less';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
const { Title } = Typography;
const { Option } = Select;
@ -28,6 +29,7 @@ const resultOptions = [
const SupplierAnnualResultQuery: React.FC = () => {
const intl = useIntl();
const supplierDetailModal = useSupplierDetailModal();
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(false);
const [data, setData] = useState<supplierAnnualResult.SupplierRecord[]>([]);
@ -162,6 +164,9 @@ const SupplierAnnualResultQuery: React.FC = () => {
title: intl.formatMessage({ id: 'supplierAnnualResult.supplier.supplierName' }),
dataIndex: 'name',
key: 'name',
render: (text: string, record: supplierAnnualResult.SupplierRecord) => (
<Button type="link" onClick={() => supplierDetailModal?.(record.supplierId)}>{text}</Button>
),
},
{
title: intl.formatMessage({ id: 'supplierAnnualResult.supplier.category' }),

6
src/pages/supplierAnnualManage/supplierAnnualResult/supplierAnnualResultQuery2.tsx
View File

@ -20,6 +20,7 @@ import {
AnnualReviewStatusText,
AnnualReviewStatusColor
} from '@/dicts/supplierAnnualReviewDict';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
const { Title } = Typography;
const { Option } = Select;
@ -33,6 +34,7 @@ const resultOptions = [
const SupplierAnnualResultQuery2: React.FC = () => {
const intl = useIntl();
const supplierDetailModal = useSupplierDetailModal();
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(false);
const [data, setData] = useState<supplierAnnualResult.ReviewRecord[]>([]);
@ -66,6 +68,7 @@ const SupplierAnnualResultQuery2: React.FC = () => {
pageNo: pagination.current,
pageSize: pagination.pageSize,
},
userId: '',
annualreviewTaskId,
...searchParams,
});
@ -182,6 +185,9 @@ const SupplierAnnualResultQuery2: React.FC = () => {
title: intl.formatMessage({ id: 'supplierAnnualResult.review.supplierName' }),
dataIndex: 'name',
key: 'name',
render: (text: string, record: supplierAnnualResult.ReviewRecord) => (
<Button type="link" onClick={() => supplierDetailModal?.(record.supplierId)}>{text}</Button>
),
},
{
title: intl.formatMessage({ id: 'supplierAnnualResult.review.category' }),

6
src/pages/supplierAnnualManage/supplierAnnualReview/supplierAnnualReview.tsx
View File

@ -26,6 +26,7 @@ import {
} from '@/dicts/supplierAnnualReviewDict';
import { getDictList } from '@/servers/api/dicts';
import type { DictItem } from '@/servers/api/dicts';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
const { Option } = Select;
const { RangePicker } = DatePicker;
@ -40,6 +41,7 @@ interface AnnualReviewSearchParams {
const SupplierAnnualReview: React.FC = () => {
const intl = useIntl();
const supplierDetailModal = useSupplierDetailModal();
const [loading, setLoading] = useState<boolean>(false);
const [form] = Form.useForm();
const [reviewStatus, setReviewStatus] = useState<DictItem[]>([]);
@ -181,9 +183,9 @@ const SupplierAnnualReview: React.FC = () => {
ellipsis: {
showTitle: false,
},
render: (text: string) => (
render: (text: string, record: supplierAnnualReview.ReviewRecord) => (
<Tooltip placement="topLeft" title={text}>
{text}
<Button type="link" onClick={() => supplierDetailModal?.(record.supplierId)}>{text}</Button>
</Tooltip>
),
},

6
src/pages/supplierAnnualManage/supplierAnnualReview/supplierAnnualScore.tsx
View File

@ -26,6 +26,7 @@ import {
ExamineResultText,
} from '@/dicts/supplierAnnualReviewDict';
import styles from './supplierAnnualReview.less';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
const { Title } = Typography;
const { TextArea } = Input;
@ -41,6 +42,7 @@ interface ScoreFormItem {
const SupplierAnnualReviewScore: React.FC = () => {
const intl = useIntl();
const supplierDetailModal = useSupplierDetailModal();
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(false);
const [submitting, setSubmitting] = useState<boolean>(false);
@ -186,7 +188,9 @@ const SupplierAnnualReviewScore: React.FC = () => {
<Descriptions.Item label={intl.formatMessage({ id: 'supplierAnnualReview.list.reviewTheme' })}>
{reviewDetail.annualreviewTheme}
</Descriptions.Item>
<Descriptions.Item label={intl.formatMessage({ id: 'supplierAnnualReview.list.supplierName' })}>{reviewDetail.name}</Descriptions.Item>
<Descriptions.Item label={intl.formatMessage({ id: 'supplierAnnualReview.list.supplierName' })}>
<Button type="link" onClick={() => supplierDetailModal?.(reviewDetail.supplierId)}>{reviewDetail.name}</Button>
</Descriptions.Item>
<Descriptions.Item label={intl.formatMessage({ id: 'supplierAnnualReview.list.department' })}>
{reviewDetail.deptName || '-'}
</Descriptions.Item>

4
src/pages/supplierAnnualManage/supplierAnnualReview/supplierAnnualScoreDetail.tsx
View File

@ -23,6 +23,7 @@ import {
ExamineResultColor,
} from '@/dicts/supplierAnnualReviewDict';
import styles from './supplierAnnualReview.less';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
const { Title } = Typography;
@ -36,6 +37,7 @@ interface ScoreResult {
const SupplierAnnualReviewDetail: React.FC = () => {
const intl = useIntl();
const supplierDetailModal = useSupplierDetailModal();
const [loading, setLoading] = useState<boolean>(false);
const [reviewDetail, setReviewDetail] = useState<supplierAnnualReview.ReviewRecord | null>(null);
const [scoreResults, setScoreResults] = useState<ScoreResult[]>([]);
@ -151,7 +153,7 @@ const SupplierAnnualReviewDetail: React.FC = () => {
{reviewDetail.annualreviewTheme}
</Descriptions.Item>
<Descriptions.Item label={intl.formatMessage({ id: 'supplierAnnualReview.list.supplierName' })}>
{reviewDetail.name}
<Button type="link" onClick={() => supplierDetailModal?.(reviewDetail.supplierId)}>{reviewDetail.name}</Button>
</Descriptions.Item>
<Descriptions.Item label={intl.formatMessage({ id: 'supplierAnnualReview.list.department' })}>
{reviewDetail.deptName || '-'}

6
src/pages/supplierAnnualManage/supplierAnnualTaskManage/components/Detail/SupplierInfo.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import { Card, Table, Button, message } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
import styles from '../../supplierAnnualTaskManageDetail.less';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
interface SupplierInfoProps {
taskData: supplierAnnualTaskManage.TaskDetailData;
@ -10,7 +11,7 @@ interface SupplierInfoProps {
const SupplierInfo: React.FC<SupplierInfoProps> = ({ taskData, onViewEvaluators }) => {
const intl = useIntl();
const supplierDetailModal = useSupplierDetailModal();
// 查看供应商评价人员
const handleViewSupplierEvaluators = (record: supplierAnnualTaskManage.TaskDetailData) => {
if (record.userList && record.userList.length > 0) {
@ -35,6 +36,9 @@ const SupplierInfo: React.FC<SupplierInfoProps> = ({ taskData, onViewEvaluators
title: <FormattedMessage id="supplierAnnualTaskManage.supplierInfo.supplierName" />,
dataIndex: 'supplierName',
key: 'supplierName',
render: (text: string, record: any) => (
<Button type="link" onClick={() => supplierDetailModal?.(record.supplierId)}>{text}</Button>
),
},
{
title: <FormattedMessage id="supplierAnnualTaskManage.supplierInfo.dept" />,

6
src/pages/supplierEvaluateManage/supplierEvaluateResult/supplierEvaluateResultInfo.tsx
View File

@ -21,11 +21,13 @@ import {
} from '@ant-design/icons';
import { history, useLocation, useIntl } from 'umi';
import { getEvaluateSupplierList, getAllEvaluateRules } from '@/servers/api/supplierEvaluate';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
const { Option } = Select;
const SupplierEvaluateResultInfo: React.FC = () => {
const intl = useIntl();
const supplierDetailModal = useSupplierDetailModal();
const location = useLocation<{ record: SupplierEvaluateResult.EvaluateTaskItem }>();
const [loading, setLoading] = useState<boolean>(false);
const [form] = Form.useForm();
@ -201,9 +203,9 @@ const SupplierEvaluateResultInfo: React.FC = () => {
ellipsis: {
showTitle: false,
},
render: (supplierName: string) => (
render: (supplierName: string, record: SupplierEvaluateResult.EvaluateSupplierItem) => (
<Tooltip placement="topLeft" title={supplierName}>
{supplierName}
<Button type="link" onClick={() => supplierDetailModal?.(record.supplierId)}>{supplierName}</Button>
</Tooltip>
),
},

64
src/pages/supplierEvaluateManage/supplierEvaluateResult/supplierEvaluateResultScoreByList.tsx
View File

@ -1,18 +1,11 @@
// 供应商评价结果打分情况
import React, { useState, useEffect } from 'react';
import {
Form,
Input,
Select,
Button,
Table,
Tooltip,
message,
} from 'antd';
import { Form, Input, Select, Button, Table, Tooltip, message } from 'antd';
import type { TablePaginationConfig } from 'antd';
import { SearchOutlined, DeleteOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { history, useLocation, useIntl } from 'umi';
import { getEvaluateScoreList, getAllEvaluateRules } from '@/servers/api/supplierEvaluate';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
// 自定义类型用于传递给详情页的数据
interface DetailPageState {
@ -24,6 +17,7 @@ const { Option } = Select;
const SupplierEvaluateResultScoreByList: React.FC = () => {
const intl = useIntl();
const supplierDetailModal = useSupplierDetailModal();
const location = useLocation<{
record: SupplierEvaluateResult.EvaluateSupplierItem;
}>();
@ -36,14 +30,15 @@ const SupplierEvaluateResultScoreByList: React.FC = () => {
total: 0,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total) => intl.formatMessage(
{ id: 'supplierEvaluateResult.pagination.total' },
{ total }
),
showTotal: (total) =>
intl.formatMessage({ id: 'supplierEvaluateResult.pagination.total' }, { total }),
});
const [searchParams, setSearchParams] = useState<SupplierEvaluateResult.EvaluateScoreSearchParams>({});
const [searchParams, setSearchParams] =
useState<SupplierEvaluateResult.EvaluateScoreSearchParams>({});
const [record, setRecord] = useState<SupplierEvaluateResult.EvaluateSupplierItem | null>(null);
const [evaluateRules, setEvaluateRules] = useState<SupplierEvaluateRuleManage.EvaluateRuleItem[]>([]);
const [evaluateRules, setEvaluateRules] = useState<SupplierEvaluateRuleManage.EvaluateRuleItem[]>(
[],
);
// 获取评价规则列表
const fetchEvaluateRules = async () => {
@ -52,7 +47,10 @@ const SupplierEvaluateResultScoreByList: React.FC = () => {
if (response.success && response.data) {
setEvaluateRules(response.data);
} else {
message.error(response.message || intl.formatMessage({ id: 'supplierEvaluateResult.message.fetchRulesFailed' }));
message.error(
response.message ||
intl.formatMessage({ id: 'supplierEvaluateResult.message.fetchRulesFailed' }),
);
}
} catch (error) {
console.error('获取评价规则列表失败:', error);
@ -142,7 +140,10 @@ const SupplierEvaluateResultScoreByList: React.FC = () => {
message.info(intl.formatMessage({ id: 'supplierEvaluateResult.message.noScoreData' }));
}
} else {
message.error(response.message || intl.formatMessage({ id: 'supplierEvaluateResult.message.fetchScoreFailed' }));
message.error(
response.message ||
intl.formatMessage({ id: 'supplierEvaluateResult.message.fetchScoreFailed' }),
);
}
} catch (error) {
console.error('获取评价打分情况列表失败:', error);
@ -179,7 +180,7 @@ const SupplierEvaluateResultScoreByList: React.FC = () => {
const handleViewDetail = (scoreItem: SupplierEvaluateResult.ScoreDataItem) => {
const detailState: DetailPageState = {
record: scoreItem,
parentRecord: record
parentRecord: record,
};
history.push({
pathname: 'supplierEvaluateResultByZb',
@ -207,9 +208,11 @@ const SupplierEvaluateResultScoreByList: React.FC = () => {
ellipsis: {
showTitle: false,
},
render: (supplierName: string) => (
render: (supplierName: string, rowData: SupplierEvaluateResult.ScoreDataItem) => (
<Tooltip placement="topLeft" title={supplierName}>
{supplierName}
<Button type="link" onClick={() => supplierDetailModal?.(rowData.supplierId)}>
{supplierName}
</Button>
</Tooltip>
),
},
@ -285,12 +288,25 @@ const SupplierEvaluateResultScoreByList: React.FC = () => {
<div className="common-container">
<div className="filter-action-row">
<Form form={form} layout="inline" onFinish={handleSearch} className="filter-form">
<Form.Item name="supplierName" label={intl.formatMessage({ id: 'supplierEvaluateResult.form.supplierName' })}>
<Input placeholder={intl.formatMessage({ id: 'supplierEvaluateResult.form.placeholder.supplierName' })} allowClear />
<Form.Item
name="supplierName"
label={intl.formatMessage({ id: 'supplierEvaluateResult.form.supplierName' })}
>
<Input
placeholder={intl.formatMessage({
id: 'supplierEvaluateResult.form.placeholder.supplierName',
})}
allowClear
/>
</Form.Item>
<Form.Item name="level" label={intl.formatMessage({ id: 'supplierEvaluateResult.form.levelName' })}>
<Form.Item
name="level"
label={intl.formatMessage({ id: 'supplierEvaluateResult.form.levelName' })}
>
<Select
placeholder={intl.formatMessage({ id: 'supplierEvaluateResult.form.placeholder.levelName' })}
placeholder={intl.formatMessage({
id: 'supplierEvaluateResult.form.placeholder.levelName',
})}
allowClear
style={{ width: 150 }}
>

5
src/pages/supplierEvaluateManage/supplierEvaluateScore/supplierEvaluateScore.tsx
View File

@ -21,6 +21,7 @@ import {
} from '@/servers/api/supplierEvaluate';
import { getDictList } from '@/servers/api/dicts';
import type { DictItem } from '@/servers/api/dicts';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
const { Title } = Typography;
const { TabPane } = Tabs;
@ -29,6 +30,7 @@ const { Option } = Select;
const SupplierEvaluateScore: React.FC = () => {
const intl = useIntl();
const supplierDetailModal = useSupplierDetailModal();
const [filterForm] = Form.useForm();
// 新增状态
const [activeTab, setActiveTab] = useState<string>('supplier');
@ -265,6 +267,9 @@ status：状态
title: intl.formatMessage({ id: 'supplierEvaluateScore.column.supplierName' }),
dataIndex: 'name',
key: 'name',
render: (text: string, record: any) => (
<Button type="link" onClick={() => supplierDetailModal?.(record.supplierId)}>{text}</Button>
),
},
{
title: intl.formatMessage({ id: 'supplierEvaluateScore.column.evaluateTheme' }),

21
src/pages/supplierEvaluateManage/supplierTaskManage/components/Detail/SupplierInfo.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import { Card, Table, Button, message } from 'antd';
import styles from '../../supplierTaskManageDetail.less';
import { useIntl } from 'umi';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
interface SupplierInfoProps {
taskData: SupplierTaskManage.TaskDetailData;
@ -10,7 +11,7 @@ interface SupplierInfoProps {
const SupplierInfo: React.FC<SupplierInfoProps> = ({ taskData, onViewEvaluators }) => {
const intl = useIntl();
const supplierDetailModal = useSupplierDetailModal();
// 查看供应商评价人员
const handleViewSupplierEvaluators = (record: any) => {
if (!taskData || !taskData.supplierIds) {
@ -34,7 +35,9 @@ const SupplierInfo: React.FC<SupplierInfoProps> = ({ taskData, onViewEvaluators
userList: userList,
});
} else {
message.error(intl.formatMessage({ id: 'supplierTaskManage.message.noSupplierEvaluatorsFound' }));
message.error(
intl.formatMessage({ id: 'supplierTaskManage.message.noSupplierEvaluatorsFound' }),
);
}
};
@ -50,6 +53,9 @@ const SupplierInfo: React.FC<SupplierInfoProps> = ({ taskData, onViewEvaluators
title: intl.formatMessage({ id: 'supplierTaskManage.column.supplierName' }),
dataIndex: 'supplierName',
key: 'supplierName',
render: (text: string, record: any) => (
<Button type="link" onClick={() => supplierDetailModal?.(record.supplierId)}>{text}</Button>
),
},
{
title: intl.formatMessage({ id: 'supplierTaskManage.column.deptName' }),
@ -66,10 +72,7 @@ const SupplierInfo: React.FC<SupplierInfoProps> = ({ taskData, onViewEvaluators
title: intl.formatMessage({ id: 'supplierTaskManage.column.action' }),
key: 'action',
render: (record: any) => (
<Button
type="link"
onClick={() => handleViewSupplierEvaluators(record)}
>
<Button type="link" onClick={() => handleViewSupplierEvaluators(record)}>
{intl.formatMessage({ id: 'supplierTaskManage.button.viewEvaluators' })}
</Button>
),
@ -77,7 +80,11 @@ const SupplierInfo: React.FC<SupplierInfoProps> = ({ taskData, onViewEvaluators
];
if (!taskData || !taskData.blackSupplierVos || taskData.blackSupplierVos.length === 0) {
return <div className={styles.emptyData}>{intl.formatMessage({ id: 'supplierTaskManage.text.noSupplierData' })}</div>;
return (
<div className={styles.emptyData}>
{intl.formatMessage({ id: 'supplierTaskManage.text.noSupplierData' })}
</div>
);
}
return (

2
src/servers/dao/supplierEvaluateManage/supplierEvaluateResult.d.ts vendored
View File

@ -240,7 +240,7 @@ declare namespace SupplierEvaluateResult {
deptName?: string;
evaluatorName?: string;
evaluateTaskId?: string;
supplierId?: string;
supplierId: string;
[key: string]: any;
}