606 lines
24 KiB
JavaScript
606 lines
24 KiB
JavaScript
import {
|
||
Button,
|
||
Input,
|
||
Spin,
|
||
Table,
|
||
Tabs,
|
||
Tag,
|
||
message,
|
||
} from "antd";
|
||
import { useEffect, useMemo, useState } from "react";
|
||
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
|
||
import {
|
||
fetchRegisteredOrgDetail,
|
||
fetchRegisteredOrgPersonnelList,
|
||
fetchRegisteredOrgQualificationGroups,
|
||
} from "~/utils/regulatorOrgInfo";
|
||
import { QUALIFICATION_INDUSTRY_OPTIONS_MAP } from "~/enumerate/enterpriseOptions";
|
||
import FilePreviewModal from "~/components/FilePreviewModal";
|
||
import StaffViewModal from "~/components/StaffViewModal";
|
||
|
||
const LIST_PATH = "/container/supervision/basicInfo/registeredOrg/list";
|
||
const { TextArea } = Input;
|
||
|
||
/** Mock 开关存储键（与机构备案管理列表共享，默认开启便于与原型对比） */
|
||
const ORG_MOCK_STORAGE_KEY = "registeredOrgMockEnabled";
|
||
|
||
function getOrgMockEnabled() {
|
||
try {
|
||
const stored = localStorage.getItem(ORG_MOCK_STORAGE_KEY);
|
||
if (stored === "1") return true;
|
||
if (stored === "0") return false;
|
||
} catch {
|
||
// ignore
|
||
}
|
||
return true;
|
||
}
|
||
|
||
/** 机构基础信息详情 mock（原型 mod-filing-detail 七项 Tab 数据） */
|
||
const ORG_DETAIL_MOCK = {
|
||
unitName: "重庆安评技术研究院有限公司",
|
||
creditCode: "915001072028699512",
|
||
isLocalUnit: 1,
|
||
businessScope: ["COAL_MINING", "METAL_NONMETAL_MINING", "PETROCHEMICAL_CHEMICAL_PHARMACEUTICAL", "METAL_SMELTING"],
|
||
filingTerritoryName: "重庆市沙坪坝区",
|
||
filingUnitTypeName: "本地单位",
|
||
registerAddress: "重庆市沙坪坝区大学城东路20号",
|
||
businessAddress: "重庆市沙坪坝区大学城东路20号重庆科技学院第39栋西南角实习用房三楼",
|
||
infoDisclosureUrl: "https://cqap.example.com",
|
||
qualCertNo: "API-2026-001",
|
||
legalRepresentative: "郑远平",
|
||
legalRepresentativePhone: "023-68705577",
|
||
fax: "023-68705578",
|
||
contactPhone: "陈芳 / 139****9012",
|
||
fixedAssetAmount: 1200,
|
||
workplaceArea: 1200,
|
||
archiveRoomArea: 80,
|
||
fulltimeEvaluatorCount: 25,
|
||
registeredEngineerCount: 12,
|
||
unitIntro: "重庆安评技术研究院成立于2015年，是一家专业从事安全评价、安全咨询、安全技术开发与转让的综合性安全技术服务机构。",
|
||
attachmentUrl: [{ name: "营业执照副本.pdf", url: "https://example.com/license.pdf" }],
|
||
personnel: [
|
||
{ id: 1001, userName: "郑远平", positionName: "法定代表人", titleName: "高级工程师", educationLevelName: "本科", majorName: "安全工程", workYears: "18年" },
|
||
{ id: 1002, userName: "张建国", positionName: "技术负责人", titleName: "正高级工程师", educationLevelName: "本科", majorName: "化工工艺", workYears: "16年" },
|
||
{ id: 1003, userName: "王丽萍", positionName: "过程控制负责人", titleName: "高级工程师", educationLevelName: "本科", majorName: "安全管理", workYears: "12年" },
|
||
{ id: 2001, userName: "李明华", positionName: "专职安全评价师", titleName: "高级工程师", educationLevelName: "硕士", majorName: "采矿工程", workYears: "12年", capabilityName: "非煤矿山安全评价", scopeName: "金属、非金属矿及其他矿采选业" },
|
||
{ id: 2002, userName: "陈志强", positionName: "专职安全评价师", titleName: "高级工程师", educationLevelName: "本科", majorName: "化工工艺", workYears: "10年", capabilityName: "化工工艺安全风险评估", scopeName: "石油加工业，化学原料、化学品及医药制造业" },
|
||
{ id: 2003, userName: "刘海", positionName: "专职安全评价师", titleName: "工程师", educationLevelName: "本科", majorName: "机械工程", workYears: "8年", capabilityName: "金属冶炼安全评价", scopeName: "金属冶炼" },
|
||
],
|
||
materials: [
|
||
{ id: 1, name: "申请材料目录.pdf", format: "pdf", url: "https://example.com/m1.pdf" },
|
||
{ id: 2, name: "安全评价机构资质申请书及材料清单.pdf", format: "pdf", url: "https://example.com/m2.pdf" },
|
||
{ id: 3, name: "法人证明.pdf", format: "pdf", url: "https://example.com/m3.pdf" },
|
||
{ id: 4, name: "截至申请之日三年内无重大违法失信记录的查询证明.pdf", format: "pdf", url: "https://example.com/m4.pdf" },
|
||
{ id: 5, name: "申请单位法定代表人承诺书.pdf", format: "pdf", url: "https://example.com/m5.pdf" },
|
||
{ id: 6, name: "固定资产法定证明材料.pdf", format: "pdf", url: "https://example.com/m6.pdf" },
|
||
{ id: 7, name: "工作场所及档案室面积证明材料.pdf", format: "pdf", url: "https://example.com/m7.pdf" },
|
||
{ id: 8, name: "安全评价师专业能力证明.pdf", format: "pdf", url: "https://example.com/m8.pdf" },
|
||
{ id: 9, name: "专职技术负责人和支撑过程控制负责人证明材料.pdf", format: "pdf", url: "https://example.com/m9.pdf" },
|
||
{ id: 10, name: "机构内部管理制度（非受控版）.pdf", format: "pdf", url: "https://example.com/m10.pdf" },
|
||
],
|
||
equipment: [
|
||
{ id: 301, deviceName: "气相色谱仪", deviceModel: "GC-2018", manufacturer: "岛津", calibration: { label: "已检定", status: "success" } },
|
||
{ id: 302, deviceName: "噪声计", deviceModel: "HS-6288", manufacturer: "杭州爱华", calibration: { label: "已检定", status: "success" } },
|
||
{ id: 303, deviceName: "粉尘采样器", deviceModel: "FC-5A", manufacturer: "北京劳保所", calibration: { label: "待检定", status: "warning" } },
|
||
],
|
||
commitment: {
|
||
legalRepName: "郑远平",
|
||
signDate: "2026-06-25 16:42",
|
||
signWay: "APP认证签字",
|
||
},
|
||
changes: [
|
||
{ id: 1, submitTime: "2026-07-18 10:24", submitType: "注册提交", changeFields: "基础信息全量提交", submitter: "机构管理员", statusName: "待审核", statusColor: "warning", url: "https://example.com/c1.pdf" },
|
||
{ id: 2, submitTime: "2026-07-20 15:36", submitType: "补正提交", changeFields: "营业执照、办公地址证明", submitter: "机构管理员", statusName: "已通过", statusColor: "success", url: "https://example.com/c2.pdf" },
|
||
],
|
||
};
|
||
|
||
const gridStyle = {
|
||
display: "grid",
|
||
gridTemplateColumns: "1fr 1fr",
|
||
gap: "0.6rem 1rem",
|
||
};
|
||
const fieldStyle = { display: "flex", flexDirection: "column", gap: "0.3rem" };
|
||
const labelStyle = { fontSize: "0.8rem", color: "#64748b", fontWeight: 500 };
|
||
const inputStyle = { background: "#f8fafc" };
|
||
const fullSpan = { gridColumn: "1 / -1" };
|
||
|
||
function ReadonlyField({ label, value, span }) {
|
||
return (
|
||
<div style={span ? { ...fieldStyle, ...span } : fieldStyle}>
|
||
<label style={labelStyle}>{label}</label>
|
||
<Input readOnly value={value || "-"} style={inputStyle} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function parseQueryId(location) {
|
||
const search = location?.search || window.location.search || "";
|
||
return new URLSearchParams(search).get("id");
|
||
}
|
||
|
||
function RegisteredOrgDetailPage(props) {
|
||
const id = useMemo(
|
||
() => parseQueryId(props.location),
|
||
[props.location?.search],
|
||
);
|
||
const [orgLoading, setOrgLoading] = useState(Boolean(id));
|
||
const [extrasLoading, setExtrasLoading] = useState(Boolean(id));
|
||
const [orgName, setOrgName] = useState("");
|
||
const [info, setInfo] = useState({});
|
||
const [personnel, setPersonnel] = useState([]);
|
||
const [materials, setMaterials] = useState([]);
|
||
const [previewFile, setPreviewFile] = useState(null);
|
||
const [viewPersonnelId, setViewPersonnelId] = useState("");
|
||
const mockEnabled = getOrgMockEnabled();
|
||
|
||
useEffect(() => {
|
||
if (!id) {
|
||
setOrgLoading(false);
|
||
setExtrasLoading(false);
|
||
return;
|
||
}
|
||
if (mockEnabled) {
|
||
// Mock 演示：本地注入原型完整七项 Tab 数据
|
||
setInfo(ORG_DETAIL_MOCK);
|
||
setPersonnel(ORG_DETAIL_MOCK.personnel);
|
||
setMaterials(ORG_DETAIL_MOCK.materials);
|
||
setOrgName(ORG_DETAIL_MOCK.unitName);
|
||
setOrgLoading(false);
|
||
setExtrasLoading(false);
|
||
return;
|
||
}
|
||
|
||
let cancelled = false;
|
||
setOrgLoading(true);
|
||
setExtrasLoading(true);
|
||
(async () => {
|
||
try {
|
||
const [orgRes, groups, staffList] = await Promise.all([
|
||
fetchRegisteredOrgDetail(id),
|
||
fetchRegisteredOrgQualificationGroups(id).catch((err) => {
|
||
console.warn("[RegisteredOrgDetail] qualification load failed:", err);
|
||
return { data: {} };
|
||
}),
|
||
fetchRegisteredOrgPersonnelList(id).catch((err) => {
|
||
console.warn("[RegisteredOrgDetail] personnel load failed:", err);
|
||
return [];
|
||
}),
|
||
]);
|
||
if (cancelled) return;
|
||
const detail = orgRes?.data || {};
|
||
setInfo(detail);
|
||
setOrgName(detail.unitName || "");
|
||
// 申请材料：资质材料组 → 扁平列表（名称/格式/附件地址）
|
||
const flatMaterials = [];
|
||
Object.values(groups?.data || {}).forEach((list) => {
|
||
(Array.isArray(list) ? list : []).forEach((item, idx) => {
|
||
const url = item.certImageUrl || item.attachmentUrl || "";
|
||
flatMaterials.push({
|
||
id: item.id || `${item.licenseTypeName}-${idx}`,
|
||
name: item.certName || item.licenseTypeName || "-",
|
||
format: /\.(png|jpe?g|gif|webp|bmp)/i.test(String(url)) ? "图片" : "pdf",
|
||
url,
|
||
});
|
||
});
|
||
});
|
||
setMaterials(flatMaterials);
|
||
setPersonnel(Array.isArray(staffList) ? staffList : []);
|
||
} catch (err) {
|
||
if (!cancelled) {
|
||
console.warn("[RegisteredOrgDetail] load failed:", err);
|
||
message.error("加载机构详情失败");
|
||
}
|
||
} finally {
|
||
if (!cancelled) {
|
||
setOrgLoading(false);
|
||
setExtrasLoading(false);
|
||
}
|
||
}
|
||
})();
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [id]);
|
||
|
||
const goBack = () => {
|
||
if (props.history?.goBack && props.history.length > 1) {
|
||
props.history.goBack();
|
||
return;
|
||
}
|
||
if (props.history?.push) {
|
||
props.history.push(LIST_PATH);
|
||
return;
|
||
}
|
||
window.location.href = `/certificate${LIST_PATH}`;
|
||
};
|
||
|
||
if (!id) {
|
||
return (
|
||
<PageLayout
|
||
title="机构基础信息详情"
|
||
extra={<Button onClick={goBack}>返回</Button>}
|
||
>
|
||
<p style={{ margin: 0, marginBottom: 24, color: "rgba(0, 0, 0, 0.45)" }}>
|
||
缺少机构 ID 参数
|
||
</p>
|
||
</PageLayout>
|
||
);
|
||
}
|
||
|
||
/** 管理人员：负责人岗位优先，无匹配回退全部人员 */
|
||
const managerRows = useMemo(() => {
|
||
const filtered = personnel.filter((item) =>
|
||
/法定代表人|技术负责人|过程控制负责人|负责人/.test(
|
||
item.positionName || item.postName || item.position || "",
|
||
),
|
||
);
|
||
return filtered.length ? filtered : personnel;
|
||
}, [personnel]);
|
||
|
||
/** 专职评价师：评价师证书/岗位匹配，无匹配回退全部人员 */
|
||
const evaluatorRows = useMemo(() => {
|
||
const filtered = personnel.filter((item) =>
|
||
item.evaluatorCertNo || /评价师/.test(item.positionName || item.postName || item.position || ""),
|
||
);
|
||
return filtered.length ? filtered : personnel;
|
||
}, [personnel]);
|
||
|
||
const businessScope = useMemo(() => {
|
||
const list = Array.isArray(info.businessScope) ? info.businessScope : [];
|
||
return [
|
||
{ label: "煤炭开采业", value: "COAL_MINING" },
|
||
{ label: "金属、非金属矿及其他矿采选业", value: "METAL_NONMETAL_MINING" },
|
||
{ label: "陆地石油和天然气开采业", value: "ONSHORE_OIL_GAS" },
|
||
{ label: "陆上油气管道运输业", value: "ONSHORE_OIL_GAS_PIPELINE" },
|
||
{ label: "石油加工业，化学原料、化学品及医药制造业", value: "PETROCHEMICAL_CHEMICAL_PHARMACEUTICAL" },
|
||
{ label: "烟花爆竹制造业", value: "FIREWORKS_FIRECRACKERS" },
|
||
{ label: "金属冶炼", value: "METAL_SMELTING" },
|
||
].map((opt) => ({ ...opt, checked: list.includes(opt.value) }));
|
||
}, [info.businessScope]);
|
||
|
||
const equipmentList = info.equipment || [];
|
||
const commitment = info.commitment || {};
|
||
const changes = info.changes || [];
|
||
|
||
const tabItems = [
|
||
{
|
||
key: "info",
|
||
label: "基础信息",
|
||
children: (
|
||
<Spin spinning={orgLoading}>
|
||
<div style={gridStyle}>
|
||
<div style={{ ...fieldStyle, ...fullSpan }}>
|
||
<label style={labelStyle}>拟申请的法定安全评价业务范围</label>
|
||
<div
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "repeat(2, minmax(260px, 1fr))",
|
||
gap: "0.3rem 0.75rem",
|
||
padding: "0.75rem",
|
||
border: "1px solid #e2e8f0",
|
||
borderRadius: 8,
|
||
background: "#f8fafc",
|
||
}}
|
||
>
|
||
{businessScope.map((opt) => (
|
||
<label key={opt.value} style={{ fontWeight: 400, fontSize: "0.82rem" }}>
|
||
<input type="checkbox" checked={opt.checked} disabled /> {opt.label}
|
||
</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<ReadonlyField label="备案属地" value={info.filingTerritoryName || info.districtName} />
|
||
<ReadonlyField label="备案单位" value={info.unitName} />
|
||
<ReadonlyField label="备案单位类型" value={info.filingUnitTypeName || (info.isLocalUnit === 1 ? "本地单位" : "异地单位")} />
|
||
<ReadonlyField label="统一社会信用代码" value={info.creditCode} />
|
||
<ReadonlyField label="注册地址" value={info.registerAddress} span={fullSpan} />
|
||
<ReadonlyField label="办公地址" value={info.businessAddress} span={fullSpan} />
|
||
<ReadonlyField label="信息公开网址" value={info.infoDisclosureUrl} />
|
||
<ReadonlyField label="资质证书编号" value={info.qualCertNo} />
|
||
<ReadonlyField label="法定代表人" value={info.legalRepresentative} />
|
||
<ReadonlyField label="法定代表人电话" value={info.legalRepresentativePhone} />
|
||
<ReadonlyField label="传真" value={info.fax} />
|
||
<ReadonlyField label="联系人及电话" value={info.contactPhone || info.principalPhone} />
|
||
<ReadonlyField label="固定资产总值（万元）" value={info.fixedAssetAmount} />
|
||
<ReadonlyField label="工作场所建筑面积（㎡）" value={info.workplaceArea} />
|
||
<ReadonlyField label="档案室面积（㎡）" value={info.archiveRoomArea} />
|
||
<ReadonlyField label="专职安全评价师数量" value={info.fulltimeEvaluatorCount} />
|
||
<ReadonlyField label="注册安全工程师数量" value={info.registeredEngineerCount} />
|
||
<div style={{ ...fieldStyle, ...fullSpan }}>
|
||
<label style={labelStyle}>单位基本情况介绍（可附页）</label>
|
||
<TextArea readOnly rows={4} value={info.unitIntro || ""} style={inputStyle} />
|
||
</div>
|
||
<div style={{ ...fieldStyle, ...fullSpan }}>
|
||
<label style={labelStyle}>营业执照</label>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
|
||
{(info.attachmentUrl || []).length ? (
|
||
<>
|
||
<Button
|
||
size="small"
|
||
onClick={() => {
|
||
const first = (info.attachmentUrl || [])[0];
|
||
setPreviewFile({
|
||
name: first.name || "营业执照",
|
||
url: first.url || (typeof first === "string" ? first : ""),
|
||
});
|
||
}}
|
||
>
|
||
查看营业执照
|
||
</Button>
|
||
<Tag color="success">{(info.attachmentUrl || [])[0]?.name || "营业执照.pdf"}</Tag>
|
||
</>
|
||
) : (
|
||
<span style={{ color: "#64748b", fontSize: "0.8rem" }}>—</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Spin>
|
||
),
|
||
},
|
||
{
|
||
key: "management",
|
||
label: "管理人员",
|
||
children: (
|
||
<Table
|
||
size="small"
|
||
bordered
|
||
rowKey="id"
|
||
pagination={false}
|
||
loading={extrasLoading}
|
||
dataSource={managerRows}
|
||
scroll={{ x: 900 }}
|
||
columns={[
|
||
{ title: "序号", width: 60, render: (_, __, i) => i + 1 },
|
||
{ title: "姓名", dataIndex: "userName", width: 110 },
|
||
{ title: "岗位", dataIndex: "positionName", ellipsis: true },
|
||
{ title: "职称", dataIndex: "titleName", width: 120, render: (v) => v || "-" },
|
||
{
|
||
title: "学历/专业",
|
||
width: 160,
|
||
render: (_, r) =>
|
||
[r.educationLevelName, r.majorName || r.educationTypeName].filter(Boolean).join(" / ") || "-",
|
||
},
|
||
{
|
||
title: "从业年限",
|
||
width: 100,
|
||
render: (_, r) => r.workYears || r.workYear || "-",
|
||
},
|
||
{
|
||
title: "操作",
|
||
width: 80,
|
||
fixed: "right",
|
||
render: (_, record) => (
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
onClick={() => setViewPersonnelId(record.id || record.sourcePersonnelId)}
|
||
>
|
||
查看
|
||
</Button>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
key: "evaluators",
|
||
label: "专职评价师",
|
||
children: (
|
||
<Table
|
||
size="small"
|
||
bordered
|
||
rowKey="id"
|
||
pagination={false}
|
||
loading={extrasLoading}
|
||
dataSource={evaluatorRows}
|
||
scroll={{ x: 1100 }}
|
||
columns={[
|
||
{ title: "序号", width: 60, render: (_, __, i) => i + 1 },
|
||
{ title: "人员姓名", dataIndex: "userName", width: 110 },
|
||
{ title: "岗位类别", dataIndex: "positionName", width: 140, ellipsis: true },
|
||
{
|
||
title: "学历/专业",
|
||
width: 160,
|
||
render: (_, r) =>
|
||
[r.educationLevelName, r.majorName || r.educationTypeName].filter(Boolean).join(" / ") || "-",
|
||
},
|
||
{ title: "职称", dataIndex: "titleName", width: 120, render: (v) => v || "-" },
|
||
{
|
||
title: "专业能力",
|
||
width: 180,
|
||
render: (_, r) => r.capabilityName || r.capability || QUALIFICATION_INDUSTRY_OPTIONS_MAP[r.qualScope] || r.qualScope || "-",
|
||
},
|
||
{
|
||
title: "申请业务范围",
|
||
width: 200,
|
||
ellipsis: true,
|
||
render: (_, r) => r.scopeName || r.appliedScopeName || QUALIFICATION_INDUSTRY_OPTIONS_MAP[r.qualScope] || r.qualScope || "-",
|
||
},
|
||
{
|
||
title: "操作",
|
||
width: 80,
|
||
fixed: "right",
|
||
render: (_, record) => (
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
onClick={() => setViewPersonnelId(record.id || record.sourcePersonnelId)}
|
||
>
|
||
查看
|
||
</Button>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
key: "materials",
|
||
label: "申请材料",
|
||
children: (
|
||
<Table
|
||
size="small"
|
||
bordered
|
||
rowKey="id"
|
||
pagination={false}
|
||
loading={extrasLoading}
|
||
dataSource={materials}
|
||
columns={[
|
||
{ title: "序号", width: 60, render: (_, __, i) => i + 1 },
|
||
{ title: "申请材料", dataIndex: "name", ellipsis: true },
|
||
{ title: "格式", dataIndex: "format", width: 80 },
|
||
{
|
||
title: "操作",
|
||
width: 80,
|
||
render: (_, record) => (
|
||
<Button type="link" size="small" onClick={() => setPreviewFile(record)}>
|
||
预览
|
||
</Button>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
key: "equipment",
|
||
label: "设备清单",
|
||
children: (
|
||
<Table
|
||
size="small"
|
||
bordered
|
||
rowKey="id"
|
||
pagination={false}
|
||
loading={extrasLoading}
|
||
dataSource={equipmentList}
|
||
columns={[
|
||
{ title: "序号", width: 60, render: (_, __, i) => i + 1 },
|
||
{ title: "设备名称", dataIndex: "deviceName", ellipsis: true },
|
||
{ title: "规格型号", dataIndex: "deviceModel", ellipsis: true },
|
||
{ title: "生产厂家", dataIndex: "manufacturer" },
|
||
{
|
||
title: "计量检定情况",
|
||
width: 120,
|
||
render: (_, record) => {
|
||
const cal = record.calibration || {};
|
||
return cal.label ? <Tag color={cal.status === "success" ? "success" : "warning"}>{cal.label}</Tag> : "-";
|
||
},
|
||
},
|
||
]}
|
||
/>
|
||
),
|
||
},
|
||
{
|
||
key: "signature",
|
||
label: "机构负责人签字",
|
||
children: (
|
||
<div
|
||
style={{
|
||
border: "1px solid #e2e8f0",
|
||
borderRadius: 8,
|
||
padding: "1.25rem 1.5rem",
|
||
background: "#fafafa",
|
||
fontSize: "0.85rem",
|
||
lineHeight: 1.9,
|
||
}}
|
||
>
|
||
<p style={{ textAlign: "center", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.75rem" }}>
|
||
机构负责人签字确认
|
||
</p>
|
||
<p>机构端已完成资质备案提交确认，承诺本次提交的基础信息、管理人员、专职安全评价师、申请材料和设备清单真实、准确、完整。</p>
|
||
<div style={gridStyle}>
|
||
<ReadonlyField label="签字人" value={commitment.legalRepName} />
|
||
<ReadonlyField label="职务" value="法定代表人 / 机构负责人" />
|
||
<ReadonlyField label="签字方式" value={commitment.signWay || "APP认证签字"} />
|
||
<ReadonlyField label="签字时间" value={commitment.signDate} />
|
||
<div style={{ ...fieldStyle, ...fullSpan }}>
|
||
<label style={labelStyle}>签字文件</label>
|
||
<div>
|
||
{commitment.legalRepSignatureUrl ? (
|
||
<Button size="small" onClick={() => setPreviewFile({ name: "机构负责人签字件", url: commitment.legalRepSignatureUrl })}>
|
||
查看签字件
|
||
</Button>
|
||
) : (
|
||
<span style={{ color: "#64748b", fontSize: "0.8rem" }}>—</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
key: "changes",
|
||
label: "变更记录",
|
||
children: (
|
||
<Table
|
||
size="small"
|
||
bordered
|
||
rowKey="id"
|
||
pagination={false}
|
||
loading={extrasLoading}
|
||
dataSource={changes}
|
||
columns={[
|
||
{ title: "提交时间", dataIndex: "submitTime", width: 150 },
|
||
{ title: "提交类型", dataIndex: "submitType", width: 100 },
|
||
{ title: "变更字段", dataIndex: "changeFields", ellipsis: true },
|
||
{ title: "提交人", dataIndex: "submitter", width: 100 },
|
||
{
|
||
title: "审核状态",
|
||
width: 100,
|
||
render: (_, record) => <Tag color={record.statusColor || "default"}>{record.statusName || "-"}</Tag>,
|
||
},
|
||
{
|
||
title: "操作",
|
||
width: 110,
|
||
render: (_, record) => (
|
||
<Button type="link" size="small" onClick={() => setPreviewFile({ name: "提交件", url: record.url })}>
|
||
查看提交件
|
||
</Button>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<PageLayout
|
||
title={
|
||
<span>
|
||
机构基础信息详情{mockEnabled ? <Tag color="warning" style={{ marginLeft: 8 }}>Mock 演示中</Tag> : null}
|
||
</span>
|
||
}
|
||
history={props.history}
|
||
previous
|
||
>
|
||
<p style={{ margin: 0, marginBottom: 24, color: "rgba(0, 0, 0, 0.45)" }}>
|
||
{orgName || undefined}
|
||
</p>
|
||
<Tabs items={tabItems} />
|
||
|
||
{viewPersonnelId && (
|
||
<StaffViewModal
|
||
open={!!viewPersonnelId}
|
||
currentId={viewPersonnelId}
|
||
onCancel={() => setViewPersonnelId("")}
|
||
/>
|
||
)}
|
||
|
||
<FilePreviewModal
|
||
open={!!previewFile}
|
||
title="文件预览"
|
||
fileName={previewFile?.name}
|
||
url={previewFile?.url}
|
||
onCancel={() => setPreviewFile(null)}
|
||
/>
|
||
</PageLayout>
|
||
);
|
||
}
|
||
|
||
export default RegisteredOrgDetailPage;
|