144 lines
4.3 KiB
TypeScript
144 lines
4.3 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 MinusCircleOutlined from "@ant-design/icons/lib/icons/MinusCircleOutlined";
|
|
import FolderTwoTone from "@ant-design/icons/FolderOpenTwoTone";
|
|
import { folderConfig } from "./archives_conf";
|
|
import { Form, Select } from "antd";
|
|
import { useNavigate } from "react-router";
|
|
import "./preview.less";
|
|
const { Option } = Select;
|
|
const ArchivesFolder = (props: Store) => {
|
|
const { folderStore, acStore } = props;
|
|
const nav = useNavigate();
|
|
const [isModalOpen, setIsModalOpen] = 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 remove = (id: string) => {
|
|
folderStore.deleteItem(id);
|
|
};
|
|
|
|
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
|
|
className="folder_box"
|
|
key={i}
|
|
style={{
|
|
cursor: "pointer",
|
|
width: "120px",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<MinusCircleOutlined
|
|
onClick={() => {
|
|
remove(folderStore.list[i].id);
|
|
}}
|
|
className="close_icon"
|
|
/>
|
|
<FolderTwoTone
|
|
rotate={-270}
|
|
style={{ fontSize: "70px" }}
|
|
onClick={() =>
|
|
nav("/admin/archives/folder/" + folderStore.list[i].identity)
|
|
}
|
|
/>
|
|
<p style={{ fontSize: "14px" }}>
|
|
{folderStore.list[i].folder_name}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</Flex>
|
|
<Modal
|
|
title={!tagId ? "添加文件夹" : "编辑文件夹"}
|
|
width={600}
|
|
open={isModalOpen}
|
|
afterClose={() => formRef.current?.resetFields()}
|
|
onOk={() => formRef.current?.submit()}
|
|
onCancel={cancelHandler}
|
|
okText="确定"
|
|
cancelText="取消"
|
|
>
|
|
<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)
|
|
);
|