336 lines
10 KiB
JavaScript
336 lines
10 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Button,
|
|
Form,
|
|
Select,
|
|
Space,
|
|
Table,
|
|
Tag,
|
|
Modal,
|
|
Input,
|
|
DatePicker,
|
|
} from "antd";
|
|
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
|
|
import SearchForm from "@cqsjjb/jjb-react-admin-component/SearchForm";
|
|
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
|
|
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
|
|
import { tools } from "@cqsjjb/jjb-common-lib";
|
|
import { PUBLICITY_STATUS_MAP } from "~/enumerate/constant";
|
|
|
|
const { TextArea } = Input;
|
|
|
|
const MOCK_DATA = [
|
|
{
|
|
id: 1,
|
|
orgName: "重庆安评技术研究院有限公司",
|
|
orgType: "本地机构",
|
|
certNo: "API-2026-001",
|
|
businessScope: "化工, 石油加工",
|
|
reviewDept: "市应急管理局",
|
|
reviewTime: "2026-06-20",
|
|
status: "pending",
|
|
},
|
|
{
|
|
id: 2,
|
|
orgName: "重庆恒安安全评价有限公司",
|
|
orgType: "本地机构",
|
|
certNo: "API-2025-032",
|
|
businessScope: "化工",
|
|
reviewDept: "市应急管理局",
|
|
reviewTime: "2026-05-15",
|
|
status: "published",
|
|
},
|
|
{
|
|
id: 3,
|
|
orgName: "北京中安评价中心（重庆分公司）",
|
|
orgType: "异地机构",
|
|
certNo: "API-2026-015",
|
|
businessScope: "矿山, 建筑施工",
|
|
reviewDept: "市应急管理局",
|
|
reviewTime: "2026-06-18",
|
|
status: "pending",
|
|
},
|
|
];
|
|
|
|
const { router } = tools;
|
|
|
|
const QualPublicity = (props) => {
|
|
const [form] = Form.useForm();
|
|
const [loading, setLoading] = useState(false);
|
|
const [publicityVisible, setPublicityVisible] = useState(false);
|
|
const [publicityTarget, setPublicityTarget] = useState(null);
|
|
const [publicityDept, setPublicityDept] = useState(undefined);
|
|
const [publicityContent, setPublicityContent] = useState("");
|
|
const [publicityStartDate, setPublicityStartDate] = useState(null);
|
|
const [publicityEndDate, setPublicityEndDate] = useState(null);
|
|
|
|
const openPublicity = (record) => {
|
|
setPublicityTarget(record);
|
|
setPublicityDept(undefined);
|
|
setPublicityContent(
|
|
"依据《安全评价机构管理规定》等相关法规，经审核，该机构符合安全评价机构资质条件，现予以公示，接受社会监督。",
|
|
);
|
|
setPublicityStartDate(null);
|
|
setPublicityEndDate(null);
|
|
setPublicityVisible(true);
|
|
};
|
|
|
|
const handlePublicitySubmit = () => {
|
|
console.log("公示提交:", {
|
|
target: publicityTarget,
|
|
dept: publicityDept,
|
|
content: publicityContent,
|
|
startDate: publicityStartDate,
|
|
endDate: publicityEndDate,
|
|
});
|
|
setPublicityVisible(false);
|
|
};
|
|
|
|
const handleSearch = () => {
|
|
setLoading(true);
|
|
setTimeout(() => setLoading(false), 500);
|
|
};
|
|
|
|
const handleReset = (values) => {
|
|
router.query = {
|
|
...router.query,
|
|
...values,
|
|
current: 1,
|
|
pageSize: 10,
|
|
};
|
|
handleSearch();
|
|
};
|
|
|
|
useEffect(() => {
|
|
form.setFieldsValue(router.query);
|
|
}, []);
|
|
|
|
const columns = [
|
|
{
|
|
title: "序号",
|
|
dataIndex: "id",
|
|
width: 60,
|
|
fixed: "left",
|
|
render: (text, record, index) => index + 1,
|
|
},
|
|
{ title: "机构名称", dataIndex: "orgName", width: 220, ellipsis: true },
|
|
{ title: "机构类型", dataIndex: "orgType", width: 100 },
|
|
{ title: "证书编号", dataIndex: "certNo", width: 140, ellipsis: true },
|
|
{
|
|
title: "安全评价业务范围",
|
|
dataIndex: "businessScope",
|
|
width: 180,
|
|
ellipsis: true,
|
|
},
|
|
{ title: "审核部门", dataIndex: "reviewDept", width: 120, ellipsis: true },
|
|
{ title: "审核通过时间", dataIndex: "reviewTime", width: 120 },
|
|
{
|
|
title: "公示状态",
|
|
dataIndex: "status",
|
|
width: 100,
|
|
render: (status) => {
|
|
const config = PUBLICITY_STATUS_MAP[status];
|
|
return config ? <Tag color={config.color}>{config.label}</Tag> : status;
|
|
},
|
|
},
|
|
{
|
|
title: "操作",
|
|
width: 180,
|
|
fixed: "right",
|
|
render: (_, record) => (
|
|
<Space>
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
onClick={() => {
|
|
// props.history.push(`FilingDetail?id=${record.id}`)
|
|
}}
|
|
>
|
|
查看
|
|
</Button>
|
|
{record.status === "pending" && (
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
onClick={() => openPublicity(record)}
|
|
>
|
|
公示
|
|
</Button>
|
|
)}
|
|
<Button type="link" size="small">
|
|
公示信息
|
|
</Button>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<PageLayout title="备案公示管理">
|
|
<SearchForm
|
|
style={{ marginBottom: 24 }}
|
|
form={form}
|
|
loading={loading}
|
|
formLine={[
|
|
<Form.Item key="orgName" name="orgName">
|
|
<ControlWrapper.Input
|
|
label="机构名称"
|
|
placeholder="请输入"
|
|
allowClear
|
|
/>
|
|
</Form.Item>,
|
|
<Form.Item key="orgType" name="orgType">
|
|
<ControlWrapper.Select
|
|
label="机构类型"
|
|
placeholder="请选择"
|
|
allowClear
|
|
style={{ width: "100%" }}
|
|
>
|
|
<Select.Option value="本地机构">本地机构</Select.Option>
|
|
<Select.Option value="异地机构">异地机构</Select.Option>
|
|
</ControlWrapper.Select>
|
|
</Form.Item>,
|
|
<Form.Item key="businessScope" name="businessScope">
|
|
<ControlWrapper.Select
|
|
label="安全评价业务范围"
|
|
placeholder="请选择"
|
|
allowClear
|
|
style={{ width: "100%" }}
|
|
>
|
|
<Select.Option value="石油加工">石油加工</Select.Option>
|
|
<Select.Option value="化工">化工</Select.Option>
|
|
<Select.Option value="矿山">矿山</Select.Option>
|
|
<Select.Option value="建筑施工">建筑施工</Select.Option>
|
|
</ControlWrapper.Select>
|
|
</Form.Item>,
|
|
<Form.Item key="status" name="status">
|
|
<ControlWrapper.Select
|
|
label="公示状态"
|
|
placeholder="请选择"
|
|
allowClear
|
|
style={{ width: "100%" }}
|
|
>
|
|
<Select.Option value="pending">待公示</Select.Option>
|
|
<Select.Option value="published">已公示</Select.Option>
|
|
</ControlWrapper.Select>
|
|
</Form.Item>,
|
|
]}
|
|
onReset={handleReset}
|
|
onFinish={(values) => {
|
|
router.query = {
|
|
...router.query,
|
|
...values,
|
|
current: 1,
|
|
pageSize: 10,
|
|
};
|
|
handleSearch();
|
|
}}
|
|
/>
|
|
|
|
<Table
|
|
rowKey="id"
|
|
columns={columns}
|
|
dataSource={MOCK_DATA}
|
|
scroll={{ y: props.scrollY }}
|
|
loading={loading}
|
|
pagination={{
|
|
total: MOCK_DATA.length,
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
current: router.query.current,
|
|
pageSize: router.query.pageSize,
|
|
onChange: (page, pageSize) => {
|
|
router.query = {
|
|
...router.query,
|
|
current: page,
|
|
pageSize,
|
|
};
|
|
handleSearch();
|
|
},
|
|
}}
|
|
/>
|
|
|
|
<Modal
|
|
title="备案公示"
|
|
open={publicityVisible}
|
|
onCancel={() => setPublicityVisible(false)}
|
|
width={560}
|
|
footer={
|
|
<div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
|
|
<Button onClick={() => setPublicityVisible(false)}>取消</Button>
|
|
<Button type="primary" onClick={handlePublicitySubmit}>
|
|
提交公示
|
|
</Button>
|
|
</div>
|
|
}
|
|
>
|
|
<div style={{ display: "grid", gap: "0.8rem" }}>
|
|
<div>
|
|
<div style={{ fontSize: "0.8rem", marginBottom: 4 }}>公示信息</div>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: "0.8rem", marginBottom: 4 }}>机构名称</div>
|
|
<div style={{ fontSize: "0.88rem", fontWeight: 500 }}>
|
|
{publicityTarget?.orgName || "—"}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: "0.8rem", marginBottom: 4 }}>公示部门</div>
|
|
<Select
|
|
style={{ width: "100%" }}
|
|
placeholder="请选择"
|
|
value={publicityDept}
|
|
onChange={setPublicityDept}
|
|
>
|
|
<Select.Option value="city">市应急管理局</Select.Option>
|
|
<Select.Option value="district">县区应急管理局</Select.Option>
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: "0.8rem", marginBottom: 4 }}>公示内容</div>
|
|
<TextArea
|
|
rows={4}
|
|
placeholder="请输入公示内容..."
|
|
value={publicityContent}
|
|
onChange={(e) => setPublicityContent(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "1fr 1fr",
|
|
gap: "0.5rem",
|
|
}}
|
|
>
|
|
<div>
|
|
<div style={{ fontSize: "0.8rem", marginBottom: 4 }}>
|
|
公示开始时间
|
|
</div>
|
|
<DatePicker
|
|
style={{ width: "100%" }}
|
|
placeholder="请选择"
|
|
value={publicityStartDate}
|
|
onChange={setPublicityStartDate}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontSize: "0.8rem", marginBottom: 4 }}>
|
|
公示结束时间
|
|
</div>
|
|
<DatePicker
|
|
style={{ width: "100%" }}
|
|
placeholder="请选择"
|
|
value={publicityEndDate}
|
|
onChange={setPublicityEndDate}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</PageLayout>
|
|
);
|
|
};
|
|
|
|
export default AntdTableFuncControl(QualPublicity);
|