import { Space, Table, Button, Popconfirm, notification, Divider, Checkbox, Spin } from 'antd'; import React, { useState, useEffect } from 'react'; import styles from '../SchemeConfig.less' import VisibleRoleModal from '@/pages/platformCenter/messageManage/projectManage/components/RolseSelect/VisibleRoleModal' import { PlusOutlined } from '@ant-design/icons'; import { deleteConfig, setServiceType, SetServiceConfig, GetMaplayerByTerminalType } from '@/services/webConfig/api'; import { UserAddOutlined } from '@ant-design/icons'; import AddModal from './AddModal' const VectorData = props => { const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示 const [schemename, setSchemename] = useState([]); const [record, setRecord] = useState({}); //选中关联角色的方案名 const [webCurrent, setWebCurrent] = useState(0); // web列表下标 const [handCurrent, setHandCurrent] = useState(0); // hand列表下标 const [webData, setWebData] = useState([]); // web数据 const [handData, setHandData] = useState([]); //手持数据 const [visible, setVisible] = useState(false); // 弹窗 const [flag, setFlag] = useState(0); // 更新list const [handStatus, setHandStatus] = useState([]); // 更新状态 const [webStatus, setWebStatus] = useState([]); // 更新状态 const [type, setType] = useState(''); // 弹窗类型 const [checkLoading, setCheckLoading] = useState(false) const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' }); const columns = [ { title: '默认方案', align: 'center', key: 'url', render: (text, record, index) => ( <Space> <Checkbox checked={webStatus[index + webCurrent * 5]} onChange={e => { onChangeCheck(e, record, index + webCurrent * 5); }} /> </Space> ), }, { title: '方案名', dataIndex: 'schemename', key: 'schemename', align: 'center' }, { title: '关联角色', align: 'center', key: 'type', render: (text, record, index) => ( <Space> <Space> <div onClick={() => pickRole(record)} style={{ cursor: 'pointer' }}> <VisibleRoleModal onSubmit={onPushSubmit} title={"关联角色"} initValues={record.roles != null ? record.roles.split(",") : []} operate={<UserAddOutlined />} /> </div> </Space> </Space> ), }, { title: '编辑', align: 'center', key: 'schemename', render: (text, record, index) => ( <Space> <div onClick={e => e.stopPropagation()}> <Popconfirm title="是否删除此条方案?" okText="确认" cancelText="取消" onConfirm={() => { delWebConfirm(record); }} > <Button size="small" danger> 删除 </Button> </Popconfirm> </div> </Space> ), } ]; const columns1 = [ { title: '查询方案', align: 'center', key: 'url', render: (text, record, index) => ( <Space> <Checkbox checked={handStatus[index + handCurrent * 5]} onChange={e => { onChangeHand(e, record, index + handCurrent * 5); }} /> </Space> ), }, { title: '方案名', dataIndex: 'schemename', key: 'schemename', align: 'center' }, { title: '关联角色', align: 'center', key: 'type', render: (text, record, index) => ( <Space> <div onClick={() => pickRole(record)} style={{ cursor: 'pointer' }}> <VisibleRoleModal onSubmit={onPushSubmit} selectValue={[]} title={"关联角色"} initValues={record.roles != null ? record.roles.split(",") : []} operate={<UserAddOutlined />} /> </div> </Space> ), }, { title: '编辑', align: 'center', key: 'schemename', render: (text, record, index) => ( <Space> <div onClick={e => e.stopPropagation()}> <Popconfirm title="是否删除此条方案?" okText="确认" cancelText="取消" onConfirm={() => { delhandConfirm(record); }} > <Button size="small" danger> 删除 </Button> </Popconfirm> </div> </Space> ), } ]; //获取选中的角色 const onPushSubmit = (value) => { let id = [] if (value.length) { id = value.map(item => { return item.id }) let query = { schemename: record.schemename, terminalType: record.isStatus, isBaseMap: false, jsonCfg: JSON.stringify({ roles: id.join(',') }) } SetServiceConfig(query).then(res => { if (res.msg === "Ok") { prompt('success', '关联角色成功') setFlag(flag + 1) } else { prompt('fail', '关联角色失败') } }).catch(err => { prompt('fail', '网络请求失败') }) } } //获取角色 const pickRole = (record) => { console.log('recird', record); setRecord(record) } //设置web方案 const onChangeCheck = (e, record, index) => { setCheckLoading(true) const newLoadings = [...webStatus]; newLoadings.map((item, loadIndex) => { return loadIndex == index ? newLoadings[loadIndex] = !newLoadings[loadIndex] : newLoadings[loadIndex] = false }) setWebStatus(newLoadings) let query = { schemename: record['schemename'], type: 'dynamic' } if (!newLoadings[index]) { setServiceType(query).then(res => { setCheckLoading(false) if (res.IsSuccess) { const changehandData = [...webData]; changehandData[index].type = 'dynamic' setWebData(changehandData) prompt('success', '设置成功') } else { prompt('fail', `${record['schemename']}默认设置时遇到错误:` + res.message) } }) return } var beforeDefault = webData.findIndex((item) => item['type'] == 'pipenet'); setServiceType({ schemename: record['schemename'], type: 'pipenet' }).then(res => { setCheckLoading(false) if (res.IsSuccess) { const changehandData = [...webData]; changehandData[index].type = 'pipenet' setWebData(changehandData) if (beforeDefault != -1) { setServiceType({ schemename: changehandData[beforeDefault].schemename, type: 'dynamic' }).then(res => { setCheckLoading(false) if (res.IsSuccess) { const changehandData1 = [...webData]; changehandData1[beforeDefault].type = 'dynamic' setWebData(changehandData1) prompt('success', '设置成功') return; } prompt('fail', `${record['schemename']}默认设置时遇到错误:` + res.message) }) } } }) } //选择手持方案 const onChangeHand = (e, record, index) => { setCheckLoading(true) const newLoadings = [...handStatus]; newLoadings.map((item, loadIndex) => { return loadIndex == index ? newLoadings[loadIndex] = !newLoadings[loadIndex] : newLoadings[loadIndex] = false }) setHandStatus(newLoadings) let query = { schemename: record['schemename'], terminalType: 'phone', isBaseMap: false, jsonCfg: JSON.stringify({ isDefault: newLoadings[index], }) } if (!newLoadings[index]) { SetServiceConfig(query).then(res => { setCheckLoading(false) if (res.msg === "Ok") { const changehandData = [...handData]; changehandData[index].isDefault = false setHandData(changehandData) prompt('success', '设置成功') } else { prompt('fail', `${record['schemename']}默认设置时遇到错误:` + res.message) } }) return } var beforeDefault = handData.findIndex((item) => item['isDefault']); SetServiceConfig({ schemename: record['schemename'], terminalType: 'phone', isBaseMap: false, jsonCfg: JSON.stringify({ isDefault: true, }) }).then(res => { setCheckLoading(false) if (res.msg === "Ok") { const changehandData = [...handData]; changehandData[index].isDefault = true setHandData(changehandData) if (beforeDefault != -1) { SetServiceConfig({ schemename: changehandData[beforeDefault].schemename, terminalType: 'phone', isBaseMap: false, jsonCfg: JSON.stringify({ isDefault: false, }) }).then(res => { setCheckLoading(false) if (res.IsSuccess) { const changehandData1 = [...handData]; changehandData1[beforeDefault].isDefault = false setHandData(changehandData1) prompt('success', '设置成功') return; } prompt('fail', `${record['schemename']}默认设置时遇到错误:` + res.message) }) } } }) } const prompt = (type, content) => { if (type == 'success') { notification.success({ message: '提示', duration: 3, description: content, }); } else { notification.error({ message: '提示', duration: 3, description: content, }); } } const onSubmit = prop => { setVisible(false); setFlag(flag + 1) }; //删除web配置方案 const delWebConfirm = (record) => { deleteConfig({ schemename: record['schemename'], terminalType: 'web', isBaseMap: false }).then(res => { if (res.msg === "Ok") { prompt('success', '删除成功') setFlag(flag + 1) } else { prompt('fail', '删除失败') }; }) } //删除手持配置方案 const delhandConfirm = (record) => { deleteConfig({ schemename: record['schemename'], terminalType: 'phone', isBaseMap: false }).then(res => { if (res.msg === "Ok") { prompt('success', '删除成功') setFlag(flag + 1) } else { prompt('fail', '删除失败') }; }) } //添加方案 const addType = (type) => { setType(type); let listData = [] type == 'add' ? listData = webData : listData = handData let webSchemenameArr = [], schemeArr = [] setTreeLoading(true); GetMaplayerByTerminalType({ terminalType: 'scheme', isBaseMap: false }).then( res => { if (res.data.scheme && res.data.scheme.optionalLayer.layers.length) { setTreeLoading(false); listData.map(item => { webSchemenameArr.push(item.schemename) }) res.data.scheme.optionalLayer.layers.map(item => { if (!webSchemenameArr.includes(item.schemename)) schemeArr.push(item.schemename) }) setSchemename(schemeArr) if (schemeArr.length) { setVisible(true); } else { notification.warning({ message: '提示', duration: 3, description: '请先配置方案', }); } } else { setTreeLoading(false); notification.warning({ message: '提示', duration: 3, description: '请先配置方案', }); } } ) } useEffect(() => { renderTile(); }, [flag]); // 获取瓦片数据配置数据 const renderTile = () => { setCheckLoading(true) //查询手持方案 var schemeConfigQueryRequest = GetMaplayerByTerminalType({ terminalType: 'phone', isBaseMap: false }) //查询web方案 var webSchemeQueryRequest = GetMaplayerByTerminalType({ terminalType: 'web', isBaseMap: false }) Promise.all([schemeConfigQueryRequest, webSchemeQueryRequest]).then(res => { console.log('res', res); if (res[0].msg === "Ok" && res[0].data.phone) { let arr = [] res[0].data.phone.optionalLayer.layers.map((item, index) => { if (item.isDefault) { arr.push(true) } else { arr.push(false) } item.isStatus = 'phone' return item }) setHandData(res[0].data.phone.optionalLayer.layers) setHandStatus(arr) } if (res[1].msg === "Ok" && res[1].data.web) { let arr = [] res[1].data.web.optionalLayer.layers.map((item, index) => { if (item.type === "pipenet") { arr.push(true) } else { arr.push(false) } item.isStatus = 'web' return item }) setWebData(res[1].data.web.optionalLayer.layers) setWebStatus(arr) } setCheckLoading(false) }).catch(e => { setCheckLoading(false) }) }; return ( <> <Spin tip="loading..." spinning={checkLoading}> <div className={styles.solutionConfig}> <div > <Divider orientation="left"><div className={styles.divider}> Web <PlusOutlined onClick={() => { addType('add') }} className={styles.dividerIcon} /></div></Divider> <Table columns={columns} dataSource={webData} bordered pagination={{ showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`, defaultPageSize: 8, onChange: (value) => { setWebCurrent(value - 1) } }} rowKey="schemename" scroll={{ y: 400 }} > </Table> </div> <Divider orientation="left"><div className={styles.divider}>手持 <PlusOutlined onClick={() => { addType('addHand') }} className={styles.dividerIcon} /></div> </Divider> <Table columns={columns1} dataSource={handData} bordered rowKey="schemename" scroll={{ y: 400 }} pagination={{ showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`, defaultPageSize: 8, onChange: (value) => { setHandCurrent(value - 1) } }} > </Table> </div> </Spin> <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} formObj={formObj} listData={schemename} /> </> ) } export default VectorData