pu428f3pz
/
datacenter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改展开

Browse Source
dev
陈博文 3 years ago
parent 8c94ab1450
commit 13e9c7438e
2 changed files with 163 additions and 115 deletions
Show Stats Download Patch File Download Diff File

15
src/pages/Equipment/List/Index/index.less
Unescape View File

@ -101,13 +101,14 @@
margin-top: 10px; margin-top: 10px;
.head { .head {
height: 72px; height: 62px;
background: #ffffff; background: #ffffff;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
padding: 0 20px; padding: 0 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-top: 10px;
div { div {
font-size: 14px; font-size: 14px;
@ -120,7 +121,7 @@
overflow: hidden; overflow: hidden;
background: #ffffff; background: #ffffff;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
padding: 0 20px; padding: 0 20px 10px 20px;
> aside { > aside {
background: #ffffff; background: #ffffff;
@ -134,9 +135,16 @@
font-size: 14px; font-size: 14px;
color: #232b40; color: #232b40;
padding: 0 20px; padding: 0 20px;
margin-top: 10px;
div { div {
color: @primary-color; color: @primary-color;
cursor: pointer;
i {
display: inline-block;
font-size: 14px;
transform: scale(0.7);
margin-right: 4px;
}
} }
} }
} }
@ -145,6 +153,7 @@
display: flex; display: flex;
border: 1px solid #ebf3ff; border: 1px solid #ebf3ff;
border-top: 0; border-top: 0;
i { i {
font-size: 34px; font-size: 34px;
color: #a0a4f7; color: #a0a4f7;

263
src/pages/Equipment/List/Index/index.tsx
Unescape View File

@ -11,7 +11,7 @@ import {
Spin, Spin,
} from 'antd'; } from 'antd';
import Fetch from '@/utils/fetch'; import Fetch from '@/utils/fetch';
import { useEffect, useState, FC, useRef } from 'react'; import { useEffect, useState, FC, useRef, Fragment } from 'react';
import { import {
connect, connect,
@ -34,6 +34,7 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
const [facilityList, setFacilityList] = useState<any[]>([]); const [facilityList, setFacilityList] = useState<any[]>([]);
const [localList, setLocalList] = useState<any[]>([]); const [localList, setLocalList] = useState<any[]>([]);
const [firmList, setFirmList] = useState<any[]>([]); const [firmList, setFirmList] = useState<any[]>([]);
const [packList, setPackList] = useState<any[]>([]);
const [visible, setVisible] = useState<any>(false); const [visible, setVisible] = useState<any>(false);
const [loading, setLoading] = useState<boolean>(true); const [loading, setLoading] = useState<boolean>(true);
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -65,6 +66,7 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
} else { } else {
setLocalList(data.list || []); setLocalList(data.list || []);
} }
setPackList([]);
} }
setLoading(false); setLoading(false);
}; };
@ -125,6 +127,14 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
setVisible(type); setVisible(type);
}; };
const pack = (id: any) => {
if (packList.includes(id)) {
setPackList(packList.filter((e: any) => e !== id));
} else {
setPackList([...packList, id]);
}
};
return ( return (
<div className={styles.page}> <div className={styles.page}>
<div className={styles.left}> <div className={styles.left}>
@ -180,67 +190,82 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
{!facilityList.length && <Empty style={{ margin: '20px 0' }} />} {!facilityList.length && <Empty style={{ margin: '20px 0' }} />}
{!!facilityList.length && {!!facilityList.length &&
facilityList.map((e: any, i: number) => { facilityList.map((e: any, i: number) => {
const bool = packList.includes(e.id);
return ( return (
<aside key={i}> <aside key={i}>
<div> <div>
<span>{e.name}</span> <span>{e.name}</span>
<div style={{ visibility: 'hidden' }}> <div onClick={() => pack(e.id)}>
<i className="iconfont icon-mimaruanjianjiami mr5" /> {bool ? (
<span>收起</span> <>
<i className="iconfont icon-zhankaixiaojiantou" />
<span>展开</span>
</>
) : (
<>
<i className="iconfont icon-shouqixiaojiantou" />
<span>收起</span>
</>
)}
</div> </div>
</div> </div>
<div className={styles.li}> {!bool && (
<i className="iconfont icon-fuwuqi"></i> <Fragment>
<div> <div className={styles.li}>
<p> <i className="iconfont icon-fuwuqi"></i>
<span>数据中心编号</span> <div>
<span>{e.physicsNum}</span> <p>
</p> <span>数据中心编号</span>
<p> <span>{e.physicsNum}</span>
<span>数据中心名称</span> </p>
<span>{e.number}</span> <p>
</p> <span>数据中心名称</span>
</div> <span>{e.number}</span>
<div> </p>
<p> </div>
<span>所属单位</span> <div>
<span>{e.managerNum}</span> <p>
</p> <span>所属单位</span>
<p> <span>{e.managerNum}</span>
<span>管理设备编号</span> </p>
<span>{e.producerId}</span> <p>
</p> <span>管理设备编号</span>
</div> <span>{e.producerId}</span>
</div> </p>
<Row justify="end" className="mt10 mb20"> </div>
<Button </div>
onClick={() => editList('1', e)} <Row justify="end" className="mt10 mb20">
type="primary" <Button
ghost onClick={() => editList('1', e)}
> type="primary"
修改设备 ghost
</Button> >
<Button 修改设备
onClick={() => </Button>
downLoadLink( <Button
url + `/openi/dataCenter/resourceExport/${e.id}`, onClick={() =>
) downLoadLink(
} url +
className="ml10" `/openi/dataCenter/resourceExport/${e.id}`,
type="primary" )
ghost }
> className="ml10"
导出初装资源 type="primary"
</Button> ghost
<Button >
onClick={() => deleteList('1', e.id)} 导出初装资源
className="ml10" </Button>
type="primary" <Button
danger onClick={() => deleteList('1', e.id)}
> className="ml10"
删除 type="primary"
</Button> danger
</Row> >
删除
</Button>
</Row>
</Fragment>
)}
</aside> </aside>
); );
})} })}
@ -257,68 +282,82 @@ const Page: FC<PageProps> = ({ basic, dispatch }) => {
{!localList.length && <Empty style={{ margin: '20px 0' }} />} {!localList.length && <Empty style={{ margin: '20px 0' }} />}
{!!localList.length && {!!localList.length &&
localList.map((e: any, i: number) => { localList.map((e: any, i: number) => {
const bool = packList.includes(e.id);
return ( return (
<aside key={i}> <aside key={i}>
<div> <div>
<span>{e.name}</span> <span>{e.name}</span>
<div style={{ visibility: 'hidden' }}> <div onClick={() => pack(e.id)}>
<i className="iconfont icon-mimaruanjianjiami mr5" /> {bool ? (
<span>收起</span> <>
</div> <i className="iconfont icon-zhankaixiaojiantou" />
</div> <span>展开</span>
<div className={styles.li}> </>
<i className="iconfont icon-zhongduan"></i> ) : (
<div> <>
<p> <i className="iconfont icon-shouqixiaojiantou" />
<span>数据中心编号</span> <span>收起</span>
<span>{e.physicsNum}</span> </>
</p> )}
<p>
<span>数据中心名称</span>
<span>{e.number}</span>
</p>
</div>
<div>
<p>
<span>所属单位</span>
<span>{e.managerNum}</span>
</p>
<p>
<span>管理设备编号</span>
<span>{e.producerId}</span>
</p>
</div> </div>
</div> </div>
<Row justify="end" className="mt10 mb20"> {!bool && (
<Button <Fragment>
onClick={() => editList('2', e)} <div className={styles.li}>
type="primary" <i className="iconfont icon-zhongduan"></i>
ghost <div>
> <p>
修改设备 <span>数据中心编号</span>
</Button> <span>{e.physicsNum}</span>
<Button </p>
onClick={() => <p>
downLoadLink( <span>数据中心名称</span>
url + <span>{e.number}</span>
`/openi/localManager/resourceExport/${e.id}`, </p>
) </div>
} <div>
className="ml10" <p>
type="primary" <span>所属单位</span>
ghost <span>{e.managerNum}</span>
> </p>
导出初装资源 <p>
</Button> <span>管理设备编号</span>
<Button <span>{e.producerId}</span>
onClick={() => deleteList('2', e.id)} </p>
className="ml10" </div>
type="primary" </div>
danger <Row justify="end" className="mt10 mb20">
> <Button
删除 onClick={() => editList('2', e)}
</Button> type="primary"
</Row> ghost
>
修改设备
</Button>
<Button
onClick={() =>
downLoadLink(
url +
`/openi/localManager/resourceExport/${e.id}`,
)
}
className="ml10"
type="primary"
ghost
>
导出初装资源
</Button>
<Button
onClick={() => deleteList('2', e.id)}
className="ml10"
type="primary"
danger
>
删除
</Button>
</Row>
</Fragment>
)}
</aside> </aside>
); );
})} })}

Write Preview
Loading…
Cancel
Save