feat: 存储桶管理
This commit is contained in:
10
src/components/Main/Bucket/index.module.less
Normal file
10
src/components/Main/Bucket/index.module.less
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
.proCard{
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
.div_proCard{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
@@ -1,7 +1,97 @@
|
|||||||
/** @format */
|
/** @format */
|
||||||
import { FunctionComponent } from "react";
|
import { FunctionComponent } from "react";
|
||||||
|
import { ProCard } from "@ant-design/pro-components";
|
||||||
|
import { Avatar, Button } from "antd";
|
||||||
|
import {
|
||||||
|
EditOutlined,
|
||||||
|
EllipsisOutlined,
|
||||||
|
PlusCircleFilled,
|
||||||
|
SettingOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
import bucket from "@/assets/icons/bucket.svg";
|
||||||
|
import selectOptions from "@/components/Main/Settings/defaultSettings.ts";
|
||||||
|
import StorageIcon from "@/context/stroage-icon.ts";
|
||||||
|
import styles from "./index.module.less";
|
||||||
|
|
||||||
const Bucket: FunctionComponent = () => {
|
const Bucket: FunctionComponent = () => {
|
||||||
return <div>存储桶</div>;
|
// const [modalVisit, setModalVisit] = useState(false);
|
||||||
|
const bucketList = selectOptions.map((storage, index) => {
|
||||||
|
return (
|
||||||
|
<ProCard
|
||||||
|
className={styles.proCard}
|
||||||
|
key={index}
|
||||||
|
boxShadow
|
||||||
|
bordered
|
||||||
|
onCollapse={(collapsed) => {
|
||||||
|
console.log(collapsed);
|
||||||
|
}}
|
||||||
|
title={
|
||||||
|
<span>
|
||||||
|
<Avatar src={StorageIcon[storage.value]} size={"default"}></Avatar>
|
||||||
|
<b> {storage.name}</b>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
headerBordered
|
||||||
|
collapsible
|
||||||
|
defaultCollapsed
|
||||||
|
extra={
|
||||||
|
<Button
|
||||||
|
style={{ borderWidth: "1px" }}
|
||||||
|
icon={<PlusCircleFilled />}
|
||||||
|
size="middle"
|
||||||
|
onClick={() => {
|
||||||
|
// setDrawerVisit(true);
|
||||||
|
}}>
|
||||||
|
创建
|
||||||
|
</Button>
|
||||||
|
}>
|
||||||
|
<div className={styles.div_proCard}>
|
||||||
|
<ProCard
|
||||||
|
hoverable
|
||||||
|
bordered
|
||||||
|
title="存储桶"
|
||||||
|
style={{
|
||||||
|
width: "200px",
|
||||||
|
}}
|
||||||
|
actions={[
|
||||||
|
<SettingOutlined key="setting" />,
|
||||||
|
<EditOutlined key="edit" />,
|
||||||
|
<EllipsisOutlined key="ellipsis" />,
|
||||||
|
]}>
|
||||||
|
<Avatar shape={"square"} src={bucket} size={"large"} />
|
||||||
|
<b style={{ marginLeft: 10 }}> size</b>
|
||||||
|
</ProCard>
|
||||||
|
<ProCard
|
||||||
|
hoverable
|
||||||
|
bordered
|
||||||
|
title="存储桶"
|
||||||
|
style={{
|
||||||
|
width: "200px",
|
||||||
|
}}
|
||||||
|
actions={[
|
||||||
|
<SettingOutlined key="setting" />,
|
||||||
|
<EditOutlined key="edit" />,
|
||||||
|
<EllipsisOutlined key="ellipsis" />,
|
||||||
|
]}>
|
||||||
|
<Avatar shape={"square"} src={bucket} size={"large"} />
|
||||||
|
</ProCard>
|
||||||
|
</div>
|
||||||
|
</ProCard>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
padding: 24,
|
||||||
|
gap: 12,
|
||||||
|
}}>
|
||||||
|
{bucketList}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
export default Bucket;
|
export default Bucket;
|
||||||
|
|||||||
87
src/components/Main/Bucket/index_createBucket.tsx
Normal file
87
src/components/Main/Bucket/index_createBucket.tsx
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
/** @format */
|
||||||
|
|
||||||
|
import { FunctionComponent, useState } from "react";
|
||||||
|
import {
|
||||||
|
ModalForm,
|
||||||
|
ProForm,
|
||||||
|
ProFormDateRangePicker,
|
||||||
|
ProFormSelect,
|
||||||
|
ProFormText,
|
||||||
|
} from "@ant-design/pro-components";
|
||||||
|
import { message } from "antd";
|
||||||
|
|
||||||
|
const createBucket: FunctionComponent = () => {
|
||||||
|
const [modalVisit, setModalVisit] = useState(false);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ModalForm
|
||||||
|
title="新建表单"
|
||||||
|
open={modalVisit}
|
||||||
|
onFinish={async () => {
|
||||||
|
message.success("提交成功");
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
onOpenChange={setModalVisit}>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width="md"
|
||||||
|
name="name"
|
||||||
|
label="签约客户名称"
|
||||||
|
tooltip="最长为 24 位"
|
||||||
|
placeholder="请输入名称"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ProFormText
|
||||||
|
width="md"
|
||||||
|
name="company"
|
||||||
|
label="我方公司名称"
|
||||||
|
placeholder="请输入名称"
|
||||||
|
/>
|
||||||
|
</ProForm.Group>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width="md"
|
||||||
|
name="contract"
|
||||||
|
label="合同名称"
|
||||||
|
placeholder="请输入名称"
|
||||||
|
/>
|
||||||
|
<ProFormDateRangePicker name="contractTime" label="合同生效时间" />
|
||||||
|
</ProForm.Group>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormSelect
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
value: "chapter",
|
||||||
|
label: "盖章后生效",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
width="xs"
|
||||||
|
name="useMode"
|
||||||
|
label="合同约定生效方式"
|
||||||
|
/>
|
||||||
|
<ProFormSelect
|
||||||
|
width="xs"
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
value: "time",
|
||||||
|
label: "履行完终止",
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
name="unusedMode"
|
||||||
|
label="合同约定失效效方式"
|
||||||
|
/>
|
||||||
|
</ProForm.Group>
|
||||||
|
<ProFormText width="sm" name="id" label="主合同编号" />
|
||||||
|
<ProFormText name="project" disabled label="项目名称" initialValue="xxxx项目" />
|
||||||
|
<ProFormText
|
||||||
|
width="xs"
|
||||||
|
name="mangerName"
|
||||||
|
disabled
|
||||||
|
label="商务经理"
|
||||||
|
initialValue="启途"
|
||||||
|
/>
|
||||||
|
</ModalForm>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default createBucket;
|
||||||
Reference in New Issue
Block a user