优化excel导出
LiuJiaNan
parent
85d7346394
commit
9a79c89ebd
|
|
@ -1,8 +1,9 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { Button, Form, message, Modal, Space, Spin } from "antd";
|
||||
import { Button, Checkbox, Form, message, Modal, Space } from "antd";
|
||||
import dayjs from "dayjs";
|
||||
import { useRef, useState } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useReactToPrint } from "react-to-print";
|
||||
import FormBuilder from "zy-react-library/components/FormBuilder";
|
||||
import ExportIcon from "zy-react-library/components/Icon/ExportIcon";
|
||||
import PrintIcon from "zy-react-library/components/Icon/PrintIcon";
|
||||
import Page from "zy-react-library/components/Page";
|
||||
|
|
@ -19,15 +20,16 @@ import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
|
|||
import useTable from "zy-react-library/hooks/useTable";
|
||||
import { getLabelName, getUnmatchedItems } from "zy-react-library/utils";
|
||||
import { IS_RELATED_ENUM } from "~/enumerate/constant";
|
||||
import { NS_AVERAGE } from "~/enumerate/namespace";
|
||||
import { NS_AVERAGE, NS_LEDGER } from "~/enumerate/namespace";
|
||||
import "../../../../BranchCompany/Average/Ledger/List/index.less";
|
||||
|
||||
function HiddenList(props) {
|
||||
const query = useGetUrlQuery();
|
||||
const { loading: downloadBlobLoading, downloadBlob } = useDownloadBlob();
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||||
const [printModalOpen, setPrintModalOpen] = useState(false);
|
||||
const [exportByColumnModalOpen, setExportByColumnModalOpen] = useState(false);
|
||||
const [printData, setPrintData] = useState([]);
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const { tableProps, getData } = useTable(props["averageByCorpInfoList"], {
|
||||
form,
|
||||
|
|
@ -40,158 +42,147 @@ function HiddenList(props) {
|
|||
},
|
||||
});
|
||||
|
||||
const onExportExcel = async () => {
|
||||
if (selectedRowKeys.length === 0) {
|
||||
message.error("请选中要导出的数据");
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: "导出确认",
|
||||
content: "确定要导出excel吗？",
|
||||
onOk: async () => {
|
||||
await downloadBlob("/hidden/hidden/exportHiddenById", {
|
||||
params: { ids: selectedRowKeys },
|
||||
});
|
||||
message.success("导出成功");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Page headerTitle="一般隐患">
|
||||
<Spin spinning={downloadBlobLoading}>
|
||||
<Search
|
||||
options={[
|
||||
{ name: "source", label: "隐患来源", render: FORM_ITEM_RENDER_ENUM.SELECT, items: HIDDEN_SOURCE_ENUM },
|
||||
{ name: "hiddenDesc", label: "隐患描述" },
|
||||
{ name: "hiddenFindTime", label: "隐患发现时间", render: FORM_ITEM_RENDER_ENUM.DATE_RANGE },
|
||||
{ name: "hiddenFindDept", label: "隐患发现部门", render: <DepartmentSelectTree /> },
|
||||
{
|
||||
name: "hiddenType",
|
||||
label: "隐患类型",
|
||||
render: <DictionarySelectTree dictValue="hiddenType" />,
|
||||
},
|
||||
{
|
||||
name: "hiddenPart",
|
||||
label: "隐患部位",
|
||||
render: <HiddenPartSelectTree />,
|
||||
},
|
||||
{
|
||||
name: "hiddenLevel",
|
||||
label: "隐患级别",
|
||||
render: <HiddenLevelSelectTree isShowNeglect={false} isShowLarger={false} isShowMajor={false} />,
|
||||
},
|
||||
{ name: "creatorName", label: "隐患发现人" },
|
||||
{
|
||||
name: "state",
|
||||
label: "隐患状态",
|
||||
render: FORM_ITEM_RENDER_ENUM.SELECT,
|
||||
items: getUnmatchedItems({ list: HIDDEN_STATE_ENUM, value: ["98", "102"] }),
|
||||
},
|
||||
{ name: "confirmUserName", label: "确认人" },
|
||||
{ name: "rectificationUserName", label: "整改人" },
|
||||
{ name: "rectificationDeptId", label: "整改部门", render: <DepartmentSelectTree /> },
|
||||
{ name: "checkUserName", label: "验收人" },
|
||||
{
|
||||
name: "isRelated",
|
||||
label: "是否相关方",
|
||||
render: FORM_ITEM_RENDER_ENUM.SELECT,
|
||||
items: IS_RELATED_ENUM,
|
||||
},
|
||||
]}
|
||||
form={form}
|
||||
onFinish={getData}
|
||||
<Search
|
||||
options={[
|
||||
{ name: "source", label: "隐患来源", render: FORM_ITEM_RENDER_ENUM.SELECT, items: HIDDEN_SOURCE_ENUM },
|
||||
{ name: "hiddenDesc", label: "隐患描述" },
|
||||
{ name: "hiddenFindTime", label: "隐患发现时间", render: FORM_ITEM_RENDER_ENUM.DATE_RANGE },
|
||||
{ name: "hiddenFindDept", label: "隐患发现部门", render: <DepartmentSelectTree /> },
|
||||
{
|
||||
name: "hiddenType",
|
||||
label: "隐患类型",
|
||||
render: <DictionarySelectTree dictValue="hiddenType" />,
|
||||
},
|
||||
{
|
||||
name: "hiddenPart",
|
||||
label: "隐患部位",
|
||||
render: <HiddenPartSelectTree />,
|
||||
},
|
||||
{
|
||||
name: "hiddenLevel",
|
||||
label: "隐患级别",
|
||||
render: <HiddenLevelSelectTree isShowNeglect={false} isShowLarger={false} isShowMajor={false} />,
|
||||
},
|
||||
{ name: "creatorName", label: "隐患发现人" },
|
||||
{
|
||||
name: "state",
|
||||
label: "隐患状态",
|
||||
render: FORM_ITEM_RENDER_ENUM.SELECT,
|
||||
items: getUnmatchedItems({ list: HIDDEN_STATE_ENUM, value: ["98", "102"] }),
|
||||
},
|
||||
{ name: "confirmUserName", label: "确认人" },
|
||||
{ name: "rectificationUserName", label: "整改人" },
|
||||
{ name: "rectificationDeptId", label: "整改部门", render: <DepartmentSelectTree /> },
|
||||
{ name: "checkUserName", label: "验收人" },
|
||||
{
|
||||
name: "isRelated",
|
||||
label: "是否相关方",
|
||||
render: FORM_ITEM_RENDER_ENUM.SELECT,
|
||||
items: IS_RELATED_ENUM,
|
||||
},
|
||||
]}
|
||||
form={form}
|
||||
onFinish={getData}
|
||||
/>
|
||||
<Table
|
||||
rowSelection={{
|
||||
preserveSelectedRowKeys: true,
|
||||
selectedRowKeys,
|
||||
onChange: (selectedRowKeys) => {
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
},
|
||||
}}
|
||||
headerTitle={`公司名称：${query.corpName}`}
|
||||
toolBarRender={() => (
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
icon={<PrintIcon />}
|
||||
onClick={() => {
|
||||
if (selectedRowKeys.length === 0) {
|
||||
message.error("请选择要打印的隐患");
|
||||
return;
|
||||
}
|
||||
setPrintModalOpen(true);
|
||||
setPrintData(tableProps.dataSource.filter(item => selectedRowKeys.includes(item.id)));
|
||||
}}
|
||||
>
|
||||
打印
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<ExportIcon />}
|
||||
onClick={() => {
|
||||
setExportByColumnModalOpen(true);
|
||||
}}
|
||||
>
|
||||
导出
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
columns={[
|
||||
{
|
||||
title: "隐患来源",
|
||||
dataIndex: "source",
|
||||
render: (_, record) => getLabelName({ list: HIDDEN_SOURCE_ENUM, status: record.source }),
|
||||
},
|
||||
{ title: "隐患描述", dataIndex: "hiddenDesc" },
|
||||
{ title: "隐患级别", dataIndex: "hiddenLevelName", width: 100 },
|
||||
{ title: "隐患类型", dataIndex: "hiddenTypeName" },
|
||||
{ title: "隐患部位", dataIndex: "hiddenPartName" },
|
||||
{ title: "隐患发现部门", dataIndex: "hiddenFindDeptName" },
|
||||
{ title: "隐患发现人", dataIndex: "createName", width: 130 },
|
||||
{
|
||||
title: "隐患发现时间",
|
||||
dataIndex: "hiddenFindTime",
|
||||
render: (_, record) => record.hiddenFindTime ? dayjs(record.hiddenFindTime).format("YYYY-MM-DD HH:mm:ss") : "",
|
||||
},
|
||||
{
|
||||
title: "整改类型",
|
||||
dataIndex: "rectificationType",
|
||||
width: 100,
|
||||
render: (_, record) => getLabelName({ list: HIDDEN_RECTIFICATION_TYPE_ENUM, status: record.rectificationType }),
|
||||
},
|
||||
{ title: "确认人", dataIndex: "confirmUserName", width: 100 },
|
||||
{ title: "整改人", dataIndex: "rectifyUserName", width: 100 },
|
||||
{ title: "整改时间", dataIndex: "rectificationTime" },
|
||||
{ title: "验收人", dataIndex: "hiddenYUserName", width: 100 },
|
||||
{
|
||||
title: "隐患状态",
|
||||
dataIndex: "state",
|
||||
render: (_, record) => getLabelName({ list: HIDDEN_STATE_ENUM, status: record.state }),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
width: 100,
|
||||
fixed: "right",
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
props.history.push(`../HiddenView?id=${record.id}&hiddenId=${record.hiddenId}`);
|
||||
}}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]}
|
||||
{...tableProps}
|
||||
/>
|
||||
{exportByColumnModalOpen && (
|
||||
<ExportByColumnModal
|
||||
hiddenFindTime={form.getFieldValue("hiddenFindTime")}
|
||||
selectedRowKeys={selectedRowKeys}
|
||||
onCancel={() => setExportByColumnModalOpen(false)}
|
||||
corpId={query.corpId}
|
||||
/>
|
||||
<Table
|
||||
rowSelection={{
|
||||
preserveSelectedRowKeys: true,
|
||||
selectedRowKeys,
|
||||
onChange: (selectedRowKeys) => {
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
},
|
||||
}}
|
||||
headerTitle={`公司名称：${query.corpName}`}
|
||||
toolBarRender={() => (
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
icon={<PrintIcon />}
|
||||
onClick={() => {
|
||||
if (selectedRowKeys.length === 0) {
|
||||
message.error("请选择要打印的隐患");
|
||||
return;
|
||||
}
|
||||
setPrintModalOpen(true);
|
||||
setPrintData(tableProps.dataSource.filter(item => selectedRowKeys.includes(item.id)));
|
||||
}}
|
||||
>
|
||||
打印
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<ExportIcon />}
|
||||
onClick={() => {
|
||||
onExportExcel();
|
||||
}}
|
||||
>
|
||||
导出
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
columns={[
|
||||
{
|
||||
title: "隐患来源",
|
||||
dataIndex: "source",
|
||||
render: (_, record) => getLabelName({ list: HIDDEN_SOURCE_ENUM, status: record.source }),
|
||||
},
|
||||
{ title: "隐患描述", dataIndex: "hiddenDesc" },
|
||||
{ title: "隐患级别", dataIndex: "hiddenLevelName", width: 100 },
|
||||
{ title: "隐患类型", dataIndex: "hiddenTypeName" },
|
||||
{ title: "隐患部位", dataIndex: "hiddenPartName" },
|
||||
{ title: "隐患发现部门", dataIndex: "hiddenFindDeptName" },
|
||||
{ title: "隐患发现人", dataIndex: "createName", width: 130 },
|
||||
{
|
||||
title: "隐患发现时间",
|
||||
dataIndex: "hiddenFindTime",
|
||||
render: (_, record) => record.hiddenFindTime ? dayjs(record.hiddenFindTime).format("YYYY-MM-DD HH:mm:ss") : "",
|
||||
},
|
||||
{
|
||||
title: "整改类型",
|
||||
dataIndex: "rectificationType",
|
||||
width: 100,
|
||||
render: (_, record) => getLabelName({ list: HIDDEN_RECTIFICATION_TYPE_ENUM, status: record.rectificationType }),
|
||||
},
|
||||
{ title: "确认人", dataIndex: "confirmUserName", width: 100 },
|
||||
{ title: "整改人", dataIndex: "rectifyUserName", width: 100 },
|
||||
{ title: "整改时间", dataIndex: "rectificationTime" },
|
||||
{ title: "验收人", dataIndex: "hiddenYUserName", width: 100 },
|
||||
{
|
||||
title: "隐患状态",
|
||||
dataIndex: "state",
|
||||
render: (_, record) => getLabelName({ list: HIDDEN_STATE_ENUM, status: record.state }),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
width: 100,
|
||||
fixed: "right",
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
props.history.push(`../HiddenView?id=${record.id}&hiddenId=${record.hiddenId}`);
|
||||
}}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]}
|
||||
{...tableProps}
|
||||
/>
|
||||
</Spin>
|
||||
)}
|
||||
{printModalOpen && (
|
||||
<PrintModal
|
||||
data={printData}
|
||||
|
|
@ -290,4 +281,139 @@ const PrintModal = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
const ExportByColumnModalComponent = (props) => {
|
||||
const [form] = Form.useForm();
|
||||
const exportFields = Form.useWatch("exportFields", form);
|
||||
const { loading, downloadBlob } = useDownloadBlob();
|
||||
const [items, setItems] = useState([]);
|
||||
|
||||
const indeterminate = useMemo(
|
||||
() => {
|
||||
if (!exportFields)
|
||||
return false;
|
||||
return exportFields.length > 0 && exportFields.length < items.length;
|
||||
},
|
||||
[exportFields],
|
||||
);
|
||||
|
||||
const getExportColumn = async () => {
|
||||
const { data } = await props["hiddenExportColumn"]();
|
||||
setItems(data.map(item => ({ bianma: item, name: item })));
|
||||
|
||||
const defaultExportFields = data.filter(item => !item.includes("图片"));
|
||||
form.setFieldsValue({ exportFields: [...defaultExportFields] });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getExportColumn();
|
||||
}, []);
|
||||
|
||||
const onSubmit = async (values) => {
|
||||
const hiddenFindTime = props.hiddenFindTime;
|
||||
const selectedRowKeys = props.selectedRowKeys;
|
||||
|
||||
// 检查导出字段是否包含"图片"
|
||||
const hasPictureField = values.exportFields && values.exportFields.some(field => field.includes("图片"));
|
||||
|
||||
if (hasPictureField) {
|
||||
// 包含图片字段的验证逻辑
|
||||
if (!selectedRowKeys || selectedRowKeys.length === 0) {
|
||||
message.error("请选择要导出的数据");
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedRowKeys.length > 10) {
|
||||
message.error("选择的数据超过10条，请重新选择");
|
||||
return;
|
||||
}
|
||||
|
||||
// 执行导出
|
||||
Modal.confirm({
|
||||
title: "导出确认",
|
||||
content: "确定要导出excel吗？",
|
||||
onOk: async () => {
|
||||
await downloadBlob("/hidden/hidden/exportHidden", {
|
||||
params: { ids: props.selectedRowKeys.join(","), corpId: props.corpId, ...values },
|
||||
});
|
||||
message.success("导出成功");
|
||||
props.onCancel();
|
||||
},
|
||||
});
|
||||
}
|
||||
else {
|
||||
// 不包含图片字段的验证逻辑
|
||||
if (!hiddenFindTime || hiddenFindTime.length === 0) {
|
||||
message.error("请选择隐患发现时间");
|
||||
return;
|
||||
}
|
||||
|
||||
// 执行导出
|
||||
Modal.confirm({
|
||||
title: "导出确认",
|
||||
content: "确定要导出excel吗？",
|
||||
onOk: async () => {
|
||||
await downloadBlob("/hidden/hidden/exportHidden", {
|
||||
params: { hiddenFindTime: hiddenFindTime[0], hiddenFindTimeLe: hiddenFindTime[1], corpId: props.corpId, ...values },
|
||||
});
|
||||
message.success("导出成功");
|
||||
props.onCancel();
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="导出"
|
||||
width={800}
|
||||
open
|
||||
maskClosable={false}
|
||||
onCancel={props.onCancel}
|
||||
onOk={form.submit}
|
||||
confirmLoading={loading}
|
||||
>
|
||||
<FormBuilder
|
||||
loading={loading}
|
||||
form={form}
|
||||
span={24}
|
||||
labelCol={{ span: 6 }}
|
||||
showActionButtons={false}
|
||||
onFinish={onSubmit}
|
||||
options={[
|
||||
{
|
||||
key: "indeterminate",
|
||||
label: "",
|
||||
render: (
|
||||
<Checkbox
|
||||
indeterminate={indeterminate}
|
||||
onChange={(e) => {
|
||||
const checked = e.target.checked;
|
||||
if (checked) {
|
||||
form.setFieldsValue({ exportFields: items.map(item => item.bianma) });
|
||||
}
|
||||
else {
|
||||
form.setFieldsValue({ exportFields: [] });
|
||||
}
|
||||
}}
|
||||
checked={items.length === (exportFields || []).length}
|
||||
>
|
||||
全选（为保障导出效率，导出带图片的excel最多10条）
|
||||
</Checkbox>
|
||||
),
|
||||
required: false,
|
||||
},
|
||||
{
|
||||
name: "exportFields",
|
||||
label: "导出内容",
|
||||
render: FORM_ITEM_RENDER_ENUM.CHECKBOX,
|
||||
items,
|
||||
checkboxCol: 6,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const ExportByColumnModal = Connect([NS_LEDGER], true)(ExportByColumnModalComponent);
|
||||
export default Connect([NS_AVERAGE], true)(HiddenList);
|
||||
|
|
|
|||
Loading…
Reference in New Issue