140 lines
4.2 KiB
TypeScript
140 lines
4.2 KiB
TypeScript
// 档案管理
|
|
|
|
import { Button, Space, Modal, FormInstance, Flex } from "antd";
|
|
import { inject, observer } from "mobx-react";
|
|
import { useEffect, useState } from "react";
|
|
import { Store } from "antd/lib/form/interface";
|
|
import SimpleForm from "@/components/form/simple_form";
|
|
import React from "react";
|
|
import FolderTwoTone from "@ant-design/icons/FolderOpenTwoTone";
|
|
import { folderConfig } from "./archives_conf";
|
|
import { Form, Select } from "antd";
|
|
import Preview from "./preview";
|
|
const { Option } = Select;
|
|
const ArchivesFolder = (props: Store) => {
|
|
const { folderStore, acStore } = props;
|
|
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
|
const [isModalOpenArchives, setIsModalOpenArchives] =
|
|
useState<boolean>(false);
|
|
|
|
const [projectConfig, setProjectConfig] = useState<any>([]);
|
|
const formRef = React.useRef<FormInstance>(null);
|
|
const [tagId, setId] = useState<Number | null>(null);
|
|
const [catList, setCatList] = useState<any>(null); // 仓库列表
|
|
const onFinish = (values: any) => {
|
|
let data = values;
|
|
if (!tagId) {
|
|
folderStore.add(data);
|
|
} else {
|
|
folderStore.putItem(tagId, data);
|
|
}
|
|
setIsModalOpen(false);
|
|
};
|
|
useEffect(() => {
|
|
folderStore.getlist();
|
|
acStore.getlist().then(() => {
|
|
setCatList(acStore.list);
|
|
});
|
|
}, [folderStore, acStore]);
|
|
|
|
// 添加事件
|
|
const addHandler = () => {
|
|
setProjectConfig(folderConfig);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
// 取消
|
|
const cancelHandler = () => {
|
|
setId(null);
|
|
setIsModalOpen(false);
|
|
};
|
|
|
|
const cancelHandlerArch = () => {
|
|
setIsModalOpenArchives(false);
|
|
};
|
|
|
|
// 文件夹点击
|
|
const folderHandle = (e) => {
|
|
folderStore.getAlist(e.identity).then((res) => {
|
|
setIsModalOpenArchives(true);
|
|
})
|
|
};
|
|
const onFinishFailed = () => {};
|
|
return (
|
|
<div className="contentBox">
|
|
<Space direction="vertical" size="middle" style={{ display: "flex" }}>
|
|
<Space direction="horizontal" size={"middle"}>
|
|
<Button type="default" onClick={addHandler}>
|
|
创建文件夹
|
|
</Button>
|
|
</Space>
|
|
<Flex wrap gap="25px" justify="start">
|
|
{Array.from({ length: folderStore.list?.length ?? 0 }, (_, i) => (
|
|
<div
|
|
key={i}
|
|
onClick={()=>folderHandle(folderStore.list[i])}
|
|
style={{ cursor: "pointer", width: "120px" }}
|
|
>
|
|
<FolderTwoTone rotate={-270} style={{ fontSize: "80px" }} />
|
|
<p style={{ fontSize: "14px" }}>
|
|
{folderStore.list[i].folder_name}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</Flex>
|
|
<Modal
|
|
title={"档案预览"}
|
|
width={"80%"}
|
|
open={isModalOpenArchives}
|
|
onCancel={cancelHandlerArch}
|
|
footer={null}
|
|
>
|
|
<Preview list={folderStore.alist} />
|
|
</Modal>
|
|
<Modal
|
|
title={!tagId ? "添加文件夹" : "编辑文件夹"}
|
|
width={600}
|
|
open={isModalOpen}
|
|
afterClose={() => formRef.current?.resetFields()}
|
|
onOk={() => formRef.current?.submit()}
|
|
onCancel={cancelHandler}
|
|
>
|
|
<SimpleForm
|
|
formRef={formRef}
|
|
createCallback={() => {}}
|
|
formName="card_basic"
|
|
colProps={12}
|
|
span={6}
|
|
subBtnName="提交"
|
|
formDatas={projectConfig}
|
|
onFinish={onFinish}
|
|
initialValues={true}
|
|
onFinishFailed={onFinishFailed}
|
|
>
|
|
<Form.Item
|
|
key="ac_identity"
|
|
label="所属档案类别"
|
|
name="ac_identity"
|
|
rules={[{ required: true, message: "请选择所属档案类别!" }]}
|
|
>
|
|
<Select placeholder="">
|
|
{catList?.map((v: any) => {
|
|
return (
|
|
<Option key={v.identity} value={v.identity}>
|
|
{v.category_name}
|
|
</Option>
|
|
);
|
|
})}
|
|
</Select>
|
|
</Form.Item>
|
|
</SimpleForm>
|
|
</Modal>
|
|
</Space>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default inject(...["archivesStore", "folderStore", "acStore"])(
|
|
observer(ArchivesFolder)
|
|
);
|