Commit ad6230d5 authored by shaoan123's avatar shaoan123

将方案管理制作成卡片形式

parent d72b3092
Pipeline #26527 skipped with stages
...@@ -96,3 +96,12 @@ ...@@ -96,3 +96,12 @@
.ant-table { .ant-table {
min-height: 15rem !important; min-height: 15rem !important;
} }
.cardsList{
display: flex;
flex-wrap: wrap;
}
.cardItem{
width: 18rem;
height: 18rem;
margin: 0 2rem;
}
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification, Button } from 'antd'; import { Form, Modal, Input, Select, notification, Button } from 'antd';
import styles from '../SchemeConfig.less'
import { import {
GetAllConfig, GetAllConfig,
GetVectorService, GetVectorService,
......
import React from 'react';
import classnames from 'classnames'
import styles from '../../SchemeConfig.less'
import { Popconfirm, notification } from 'antd';
import {
unbindSchemeBaseMap
} from '@/services/webConfig/api';
import {
CloseOutlined
} from '@ant-design/icons';
const CardData = props => {
const { deletebaseMaps = () => { } } = props;
//删除瓦片
const deletebaseMap = (item, baseMapItem) => {
unbindSchemeBaseMap({ schemename: item.schemename, basemapName: baseMapItem }).then(res => {
if (res.IsSuccess) {
notification.success({
message: '提示',
duration: 3,
description: '底图删除成功',
});
deletebaseMaps()
}
else {
notification.error({
message: '提示',
duration: 3,
description: '底图删除失败',
});
}
})
}
return (
<>
<div className={styles.mapItem} >
<div className={classnames({
[styles.defaultTile]: true,
[styles.activeTile]: props.baseindex == props.item.defaultBaseMap,
})}>默认</div>
<div className={styles.mapText}>{props.baseMapItem}</div>
<div className={styles.mapIcon}>
<Popconfirm
title="是否删除该底图?"
okText="确认"
cancelText="取消"
onConfirm={() => {
deletebaseMap(props.item, props.baseMapItem);
}}
>
<CloseOutlined />
</Popconfirm> </div>
</div>
</>
)
}
export default CardData
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
CloseOutlined, PlusOutlined CloseOutlined, PlusOutlined
} from '@ant-design/icons'; } from '@ant-design/icons';
import AddModal from './AddModal' import AddModal from './AddModal'
import Cards from './components/card'
const VectorData = props => { const VectorData = props => {
const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示 const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
const [tileData, setTileData] = useState([]); // 页面初始化数据 const [tileData, setTileData] = useState([]); // 页面初始化数据
...@@ -21,8 +22,8 @@ const VectorData = props => { ...@@ -21,8 +22,8 @@ const VectorData = props => {
const onSubmit = prop => { const onSubmit = prop => {
setVisible(false); setVisible(false);
}; };
const delConfirm = (record) => { const onDeletebaseMap = (value) => {
console.log('record', record) setFlag(flag+1)
} }
const handleAdd = () => { const handleAdd = () => {
setType('schemeAdd'); setType('schemeAdd');
...@@ -81,26 +82,7 @@ const VectorData = props => { ...@@ -81,26 +82,7 @@ const VectorData = props => {
} }
}) })
} }
//删除瓦片
const deletebaseMap = (item,baseMapItem) => {
unbindSchemeBaseMap({ schemename:item.schemename,basemapName: baseMapItem}).then(res=>{
if (res.IsSuccess) {
notification.success({
message: '提示',
duration: 3,
description: '底图删除成功',
});
setFlag(flag + 1)
}
else {
notification.error({
message: '提示',
duration: 3,
description: '底图删除失败',
});
}
})
}
return ( return (
<> <>
<div style={{ width: 'calc(100vw - 265px)' }}> <div style={{ width: 'calc(100vw - 265px)' }}>
...@@ -111,10 +93,10 @@ const VectorData = props => { ...@@ -111,10 +93,10 @@ const VectorData = props => {
新增 新增
</Button> </Button>
</div> </div>
<Row> <div className={styles.cardsList}>
{tileData && tileData.length ? {tileData && tileData.length ?
tileData.map((item, index) => { tileData.map((item, index) => {
return <Col key={index} span={5} style={{ marginBottom: '1rem' }}> <Card title={<div><span className={styles.schemeName}>方案名</span>{item.schemename}</div>} extra={<a href="#"> 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 <Popconfirm
title="是否删除该方案?" title="是否删除该方案?"
okText="确认" okText="确认"
...@@ -131,30 +113,13 @@ const VectorData = props => { ...@@ -131,30 +113,13 @@ const VectorData = props => {
</div> </div>
<div style={{ overflowY: 'scroll',height:'5.5rem' }}> <div style={{ overflowY: 'scroll',height:'5.5rem' }}>
{item.baseMap && item.baseMap.length ? item.baseMap.map((baseMapItem, baseindex) => { {item.baseMap && item.baseMap.length ? item.baseMap.map((baseMapItem, baseindex) => {
return <div key={baseindex} className={styles.mapItem} > return <Cards key={baseindex} baseMapItem={baseMapItem} baseindex={baseindex} item={item} deletebaseMaps={onDeletebaseMap}/>
<div className={classnames({
[styles.defaultTile]: true,
[styles.activeTile]: baseindex == item.defaultBaseMap,
})}>默认</div>
<div className={styles.mapText}>{baseMapItem}</div>
<div className={styles.mapIcon}>
<Popconfirm
title="是否删除该底图?"
okText="确认"
cancelText="取消"
onConfirm={() => {
deletebaseMap(item,baseMapItem);
}}
>
<CloseOutlined />
</Popconfirm> </div>
</div>
}) : ''} }) : ''}
</div> </div>
</Card> </Card>
</Col> </div>
}) : ''} }) : ''}
</Row > </div >
<AddModal <AddModal
visible={visible} visible={visible}
onCancel={() => setVisible(false)} onCancel={() => setVisible(false)}
......
...@@ -15,6 +15,7 @@ import AddModal from './AddModal' ...@@ -15,6 +15,7 @@ import AddModal from './AddModal'
const VectorData = props => { const VectorData = props => {
const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示 const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
const [schemename, setSchemename] = useState([]); const [schemename, setSchemename] = useState([]);
const [initValues, setInitValues] = useState([]);//角色初始化列表
const [record, setRecord] = useState({}); //选中关联角色的方案名 const [record, setRecord] = useState({}); //选中关联角色的方案名
const [webCurrent, setWebCurrent] = useState(0); // web列表下标 const [webCurrent, setWebCurrent] = useState(0); // web列表下标
const [handCurrent, setHandCurrent] = useState(0); // hand列表下标 const [handCurrent, setHandCurrent] = useState(0); // hand列表下标
...@@ -60,7 +61,7 @@ const VectorData = props => { ...@@ -60,7 +61,7 @@ const VectorData = props => {
<Space> <Space>
<Space> <Space>
<div onClick={() => pickRole(record)} style={{ cursor: 'pointer' }}> <div onClick={() => pickRole(record)} style={{ cursor: 'pointer' }}>
<VisibleRoleModal onSubmit={onPushSubmit} title={"关联角色"} operate={<UserAddOutlined />} /> <VisibleRoleModal onSubmit={onPushSubmit} title={"关联角色"} initValues ={record.roles!=null?record.roles.split(","):[]} operate={<UserAddOutlined />} />
</div> </div>
</Space> </Space>
</Space> </Space>
...@@ -120,7 +121,7 @@ const VectorData = props => { ...@@ -120,7 +121,7 @@ const VectorData = props => {
render: (text, record, index) => ( render: (text, record, index) => (
<Space> <Space>
<div onClick={() => pickRole(record)} style={{ cursor: 'pointer' }}> <div onClick={() => pickRole(record)} style={{ cursor: 'pointer' }}>
<VisibleRoleModal onSubmit={onPushSubmit} title={"关联角色"} operate={<UserAddOutlined />} /> <VisibleRoleModal onSubmit={onPushSubmit} title={"关联角色"} initValues ={record.roles!=null?record.roles.split(","):[]} operate={<UserAddOutlined />} />
</div> </div>
</Space> </Space>
), ),
...@@ -174,14 +175,7 @@ const VectorData = props => { ...@@ -174,14 +175,7 @@ const VectorData = props => {
}).catch(err=>{ }).catch(err=>{
prompt('fail', '网络请求失败') prompt('fail', '网络请求失败')
}) })
setFlag(flag + 1)
}
else{
notification.warning({
message: '提示',
duration: 3,
description: '无选择任何角色',
});
} }
...@@ -189,12 +183,6 @@ const VectorData = props => { ...@@ -189,12 +183,6 @@ const VectorData = props => {
//获取角色 //获取角色
const pickRole = (record) => { const pickRole = (record) => {
setRecord(record) setRecord(record)
getUserRelationList({
userID: record['schemename'],
_version: 9999
}).then(res=>{
console.log('res',res);
})
} }
//设置web方案 //设置web方案
const onChangeCheck = (e, record, index) => { const onChangeCheck = (e, record, index) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment