供应商

2025-06-24 10:52:30 +08:00
parent f24a87a15c
commit c1267c8228
116 changed files with 16058 additions and 1 deletions
--- a/src/pages/supplier/backend/changeProgressInquiry/components/DetailView.tsx
+++ b/src/pages/supplier/backend/changeProgressInquiry/components/DetailView.tsx
@ -0,0 +1,144 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Table, Spin } from 'antd';
+import { getSupplierChangeDetail } from '../services';
+
+interface Qualification {
+  type: string;
+  name: string;
+  level: string;
+  number: string;
+  org: string;
+  issueDate: string;
+  validDate: string;
+  file?: string;
+}
+interface InfoItem {
+  label: string;
+  value: string;
+}
+interface DetailData {
+  baseInfo: InfoItem[];
+  changeInfo: InfoItem[];
+  qualifications: Qualification[];
+}
+interface DetailViewProps {
+  visible: boolean;
+  onClose: () => void;
+  detailId?: string | number;
+}
+
+const DetailView: React.FC<DetailViewProps> = ({ visible, onClose, detailId }) => {
+  
+  const [loading, setLoading] = useState(false);
+  const [detailData, setDetailData] = useState<DetailData | null>(null);
+
+  useEffect(() => {
+    if (visible && detailId) {
+      setLoading(true);
+      getSupplierChangeDetail(detailId)
+        .then(res => {
+          if (res.code === 200) {
+            setDetailData(res.data);
+          }
+        })
+        .finally(() => setLoading(false));
+    }
+    if (!visible) setDetailData(null);
+  }, [visible, detailId]);
+
+  const columns = [
+    { title: '资质证书类型', dataIndex: 'type', width: 120 },
+    { title: '资质名称', dataIndex: 'name', width: 120 },
+    { title: '资质类别和等级', dataIndex: 'level', width: 120 },
+    { title: '资质证书编号', dataIndex: 'number', width: 120 },
+    { title: '发证机构', dataIndex: 'org', width: 120 },
+    { title: '发证日期', dataIndex: 'issueDate', width: 120 },
+    { title: '资质有效期至', dataIndex: 'validDate', width: 120 },
+    {
+      title: '附件',
+      dataIndex: 'file',
+      width: 120,
+      render: (file: string) =>
+        file ? (
+          <span>
+            <img src={file} alt="附件" style={{ width: 30, verticalAlign: 'middle', marginRight: 8 }} />
+            <a>更多</a>
+          </span>
+        ) : (
+          '-'
+        ),
+    },
+  ];
+
+  // 把info数组两两合并成一行显示
+  function renderInfoTable(infoArr: InfoItem[]) {
+    const rows = [];
+    for (let i = 0; i < infoArr.length; i += 2) {
+      const left = infoArr[i];
+      const right = infoArr[i + 1] || { label: '', value: '' };
+      rows.push(
+        <tr key={i}>
+          <td style={tdStyleTitle}>{left.label}</td>
+          <td style={tdStyle}>{left.value}</td>
+          <td style={tdStyleTitle}>{right.label}</td>
+          <td style={tdStyle}>{right.value}</td>
+        </tr>
+      );
+    }
+    return (
+      <table style={{ width: '100%', borderCollapse: 'collapse', background: '#fff', marginBottom: 8 }}>
+        <tbody>{rows}</tbody>
+      </table>
+    );
+  }
+
+  return (
+    <Modal
+      title="供应商信息变更审批"
+      visible={visible}
+      onCancel={onClose}
+      footer={null}
+      width={1000}
+      bodyStyle={{ padding: 24 }}
+      destroyOnClose
+    >
+      <Spin spinning={loading}>
+        {detailData && (
+          <div>
+            {/* 基本信息 */}
+            {renderInfoTable(detailData.baseInfo)}
+            {/* 变更内容 */}
+            <div style={{ padding: '16px 0 0 2px', fontWeight: 700 }}>变更内容：</div>
+            {renderInfoTable(detailData.changeInfo)}
+            {/* 新增资质 */}
+            <div style={{ padding: '0 0 6px 2px', fontWeight: 700 }}>新增资质1</div>
+            <Table
+              columns={columns}
+              dataSource={detailData.qualifications}
+              rowKey="number"
+              size="small"
+              pagination={false}
+              bordered
+              style={{ margin: '0 0 16px 0' }}
+            />
+          </div>
+        )}
+      </Spin>
+    </Modal>
+  );
+};
+
+const tdStyleTitle: React.CSSProperties = {
+  background: '#fafafa',
+  fontWeight: 700,
+  width: 130,
+  padding: 8,
+  border: '1px solid #f0f0f0',
+};
+const tdStyle: React.CSSProperties = {
+  background: '#fff',
+  padding: 8,
+  border: '1px solid #f0f0f0',
+};
+
+export default DetailView;