103 lines
2.9 KiB
TypeScript
103 lines
2.9 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";
|
|
|
|
const Archives = (props: Store) => {
|
|
const { archivesStore } = props;
|
|
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 onFinish = (values: any) => {
|
|
let data = values;
|
|
data.head_img = values.head_img[0].url;
|
|
if (!tagId) {
|
|
archivesStore.add(data);
|
|
} else {
|
|
archivesStore.putItem(tagId, data);
|
|
}
|
|
setIsModalOpen(false);
|
|
};
|
|
useEffect(() => {
|
|
archivesStore.getlist("folder/list");
|
|
}, [archivesStore]);
|
|
const defaultConfig = [
|
|
{
|
|
type: "input",
|
|
label: "所属档案分类",
|
|
name: "ac_identity",
|
|
value: "",
|
|
},
|
|
{
|
|
type: "input",
|
|
label: "文件夹名称",
|
|
name: "folder_name",
|
|
value: "",
|
|
},
|
|
{
|
|
type: "input",
|
|
label: "文件夹描述",
|
|
name: "folder_desc",
|
|
value: "",
|
|
},
|
|
];
|
|
const onFinishFailed = () => {};
|
|
return (
|
|
<div className="contentBox">
|
|
<Space direction="vertical" size="middle" style={{ display: "flex" }}>
|
|
<Space direction="horizontal" size={"middle"}>
|
|
<Button
|
|
type="default"
|
|
onClick={() => {
|
|
setProjectConfig(defaultConfig);
|
|
setId(null);
|
|
setIsModalOpen(true);
|
|
}}
|
|
>
|
|
添加
|
|
</Button>
|
|
</Space>
|
|
<Flex wrap gap="25px" justify="start">
|
|
{Array.from({ length: archivesStore.list?.length??0 }, (_, i) => (
|
|
<div key={i}>
|
|
<FolderTwoTone rotate={-270} style={{ fontSize: "120px" }} />
|
|
<p>{archivesStore.list[i].folder_name}</p>
|
|
</div>
|
|
))}
|
|
</Flex>
|
|
|
|
<Modal
|
|
title={!tagId ? "添加文件夹" : "编辑文件夹"}
|
|
width={800}
|
|
open={isModalOpen}
|
|
afterClose={() => formRef.current?.resetFields()}
|
|
onOk={() => formRef.current?.submit()}
|
|
onCancel={() => {
|
|
setId(null);
|
|
setIsModalOpen(false);
|
|
}}
|
|
>
|
|
<SimpleForm
|
|
formRef={formRef}
|
|
createCallback={() => {}}
|
|
formName="card_basic"
|
|
colProps={4}
|
|
subBtnName="提交"
|
|
formDatas={projectConfig}
|
|
onFinish={onFinish}
|
|
initialValues={true}
|
|
onFinishFailed={onFinishFailed}
|
|
/>
|
|
</Modal>
|
|
</Space>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default inject("archivesStore")(observer(Archives));
|