卡片组件封装

src/pages/platformCenter/schemeConfig/projectMessage/AddModal.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Modal, Input, Select, notification, Button } from 'antd';
+import { Form, Modal, Input, Select, notification } from 'antd';
 import {
   GetAllConfig,
   GetVectorService,

src/pages/platformCenter/schemeConfig/projectMessage/components/card.jsx

-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import classnames from 'classnames'
 import styles from '../../SchemeConfig.less'
-import { Popconfirm, notification } from 'antd';
+import { Popconfirm, notification, Card, Button } from 'antd';
 import {
     unbindSchemeBaseMap
 } from '@/services/webConfig/api';
 import {
-    CloseOutlined
+    CloseOutlined, PlusOutlined
 } from '@ant-design/icons';
+import AddModal from '../AddModal'
 const CardData = props => {
     const { deletebaseMaps = () => { } } = props;
+    const [visible, setVisible] = useState(false); // 弹窗
+    const [flag, setFlag] = useState(0); // 状态更新
+    const [type, setType] = useState(''); // 弹窗类型
+    const [formObj, setFormObj] = useState({});
     //删除瓦片
     const deletebaseMap = (item, baseMapItem) => {
         unbindSchemeBaseMap({ schemename: item.schemename, basemapName: baseMapItem }).then(res => {
@@ -31,27 +36,88 @@ const CardData = props => {
 
         })
     }
+    //删除方案
+    const deleteTile = (item) => {
+        deleteConfig({
+            schemename: item.schemename,
+            terminalType: 'scheme',
+            isBaseMap: false
+        }).then(res => {
+            if (res.IsSuccess) {
+                notification.success({
+                    message: '提示',
+                    duration: 3,
+                    description: '方案删除成功',
+                });
+                deletebaseMaps()
+            }
+            else {
+                notification.error({
+                    message: '提示',
+                    duration: 3,
+                    description: '方案删除失败',
+                });
+            }
+        })
+    }
+    const onSubmit = prop => {
+        setVisible(false);
+        deletebaseMaps()
+    };
+    //增加瓦片
+    const addTile = (item) => {
+        setFormObj(item);
+        setType('add');
+        setVisible(true);
  
+    }
     return (
         <>
-            <div className={styles.mapItem} >
+            <Card title={<div><span className={styles.schemeName}>方案名</span>{props.item.schemename}</div>} extra={<a href="#">
+                <Popconfirm
+                    title="是否删除该方案？"
+                    okText="确认"
+                    cancelText="取消"
+                    onConfirm={() => {
+                        deleteTile(props.item);
+                    }}
+                >
+                    <CloseOutlined />
+                </Popconfirm> </a>} style={{ width: 300 }}>
+                <p><span className={styles.schemeName}>矢量</span>  {props.item.servicename}</p>
+                <div className={styles.schemeItem}><span className={styles.schemeName}>瓦片</span>
+                    <Button className={styles.schemeBtn} onClick={() => addTile(props.item)}> <PlusOutlined />添加瓦片</Button>
+                </div>
+                <div style={{ overflowY: 'scroll', height: '5.5rem' }}>
+                    {props.item.baseMap && props.item.baseMap.length ? props.item.baseMap.map((baseMapItem, baseindex) => {
+                        return <div className={styles.mapItem} key={baseindex} >
                             <div className={classnames({
                                 [styles.defaultTile]: true,
-                    [styles.activeTile]: props.baseindex == props.item.defaultBaseMap,
+                                [styles.activeTile]: baseindex == props.item.defaultBaseMap,
                             })}>默认</div>
-                <div className={styles.mapText}>{props.baseMapItem}</div>
+                            <div className={styles.mapText}>{baseMapItem}</div>
                             <div className={styles.mapIcon}>
                                 <Popconfirm
                                     title="是否删除该底图？"
                                     okText="确认"
                                     cancelText="取消"
                                     onConfirm={() => {
-                            deletebaseMap(props.item, props.baseMapItem);
+                                        deletebaseMap(props.item, baseMapItem);
                                     }}
                                 >
                                     <CloseOutlined />
                                 </Popconfirm>  </div>
                         </div>
+                    }) : ''}
+                </div>
+            </Card>
+            <AddModal
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                callBackSubmit={onSubmit}
+                type={type}
+                formObj={formObj}
+            />
         </>
     )
 }

src/pages/platformCenter/schemeConfig/projectMessage/projectMessage.jsx

-import { Button, Card, notification, Col, Row, Popconfirm } from 'antd';
+import { Button } from 'antd';
 import React, { useState, useEffect } from 'react';
-import classnames from 'classnames'
 import styles from '../SchemeConfig.less'
 import {
-    GetAllConfig, deleteConfig,unbindSchemeBaseMap
+    GetAllConfig
 } from '@/services/webConfig/api';
-import {
-    CloseOutlined, PlusOutlined
-} from '@ant-design/icons';
 import AddModal from './AddModal'
 import Cards from './components/card'
 const VectorData = props => {
@@ -23,7 +19,7 @@ const VectorData = props => {
         setVisible(false);
     };
     const onDeletebaseMap = (value) => {
-       setFlag(flag+1)
+        setFlag(flag + 1)
     }
     const handleAdd = () => {
         setType('schemeAdd');
@@ -51,37 +47,6 @@ const VectorData = props => {
         )
     };
 
-    //增加瓦片
-    const addTile = (item) => {
-        console.log('item', item);
-        setFormObj(item);
-        setType('add');
-        setVisible(true);
-    }
-    //删除方案
-    const deleteTile = (item) => {
-        deleteConfig({
-            schemename: item.schemename,
-            terminalType: 'scheme',
-            isBaseMap: false
-        }).then(res => {
-            if (res.IsSuccess) {
-                notification.success({
-                    message: '提示',
-                    duration: 3,
-                    description: '方案删除成功',
-                });
-                setFlag(flag + 1)
-            }
-            else {
-                notification.error({
-                    message: '提示',
-                    duration: 3,
-                    description: '方案删除失败',
-                });
-            }
-        })
-    }
  
     return (
         <>
@@ -96,27 +61,8 @@ const VectorData = props => {
                 <div className={styles.cardsList}>
                     {tileData && tileData.length ?
                         tileData.map((item, index) => {
-                            return <div className={styles.cardItem} key={index} span={5} offset={2} style={{ marginBottom: '1rem' }}> <Card title={<div><span className={styles.schemeName}>方案名</span>{item.schemename}</div>} extra={<a href="#">
-                                <Popconfirm
-                                    title="是否删除该方案？"
-                                    okText="确认"
-                                    cancelText="取消"
-                                    onConfirm={() => {
-                                        deleteTile(item);
-                                    }}
-                                >
-                                    <CloseOutlined />
-                                </Popconfirm> </a>} style={{ width: 300 }}>
-                                <p><span className={styles.schemeName}>矢量</span>  {item.servicename}</p>
-                                <div className={styles.schemeItem}><span className={styles.schemeName}>瓦片</span>
-                                    <Button className={styles.schemeBtn} onClick={() => addTile(item)}> <PlusOutlined />添加瓦片</Button>
-                                </div>
-                                <div style={{ overflowY: 'scroll',height:'5.5rem' }}>
-                                {item.baseMap && item.baseMap.length ? item.baseMap.map((baseMapItem, baseindex) => {
-                                    return <Cards key={baseindex} baseMapItem={baseMapItem} baseindex={baseindex}  item={item} deletebaseMaps={onDeletebaseMap}/>
-                                }) : ''}
-                                </div>
-                            </Card>
+                            return <div className={styles.cardItem} key={index} span={5} offset={2} style={{ marginBottom: '1rem' }}>
+                                <Cards item={item} deletebaseMaps={onDeletebaseMap} ></Cards>
                             </div>
                         }) : ''}
                 </div >