import React, { useEffect, useState } from 'react'; import PageContainer from '@/components/BasePageContainer'; import { notification, Spin, Tabs, Button, Tooltip } from 'antd'; import { getWebModuleTree, getWebconfig, postEditWebConfig, postAddWebSite, deleteWebsite, getAllConfigName, getProductList, getWebSite, addWebsite, editWebsite, omsDeleteWebsite, SyncMapComponent, BatchDragSingleWebsite, } from '@/services/webConfig/api'; import { EditTwoTone, ExclamationCircleOutlined, OrderedListOutlined } from '@ant-design/icons'; import Modal from 'antd/lib/modal/Modal'; import ProCard from '@ant-design/pro-card'; import styles from './index.less'; import SiteConfig from './components/siteConfigDrawer'; import { appConnector } from '@/containers/App/store'; import { defaultWebConfigObj, webMode } from './utils'; import MenuConfig from './menuconfig/MenuConfig'; import SortModal from './sortModal'; const { TabPane } = Tabs; const WebConfigPage = props => { const { userMode } = props; const [configVisible, setConfigVisible] = useState(false); const [loading, setLoading] = useState(false); const [webs, setWebs] = useState([]); const [curWeb, setCurWeb] = useState(''); // 当前展示的web const [configObj, setConfigObj] = useState({}); // 获取当前的web的配置 const [toEdit, setToEdit] = useState(null); // 编辑展示用的配置 const [isEdit, setIsEdit] = useState(true); const [submitting, setSubmitting] = useState(false); const [configFiles, setConfigFiles] = useState([]); const [productList, setProductList] = useState([]); // 产品列表 const [sortVisible, setSortVisible] = useState(false); const hasIntegerate = () => webs.some(w => w.id.startsWith(webMode.integration)); useEffect(() => { let canceled = { cancel: false }; setLoading(true); updateModuleTree(userMode || 'super', canceled); getAllConfigName().then(res => { if (!canceled.cancel) setConfigFiles(res.data); }); getProduct(); return () => { canceled.cancel = true; }; }, []); useEffect(() => { console.log(curWeb, 'curWeb'); let canceled = { cancel: false }; if (!curWeb) return; const title = curWeb.text; updateWebconfig(title, canceled); // eslint-disable-next-line consistent-return return () => { canceled.cancel = true; }; }, [curWeb]); // 获取产品列表 const getProduct = () => { getProductList({ isDel: 0 }).then(res => { const { code } = res; if (code === 0) { const { data: { UserProducts }, } = res; if (UserProducts && UserProducts.length > 0) { setProductList(UserProducts); } } }); }; const updateModuleTree = (userModePrama, canceled = { cancel: false }) => { setLoading(true); getWebModuleTree(userModePrama) .then(res => { const websArr = [ // 暂时不要集成网站 // res.data // .filter(d => d.id === 'Web4IntegrateStation') // .map(r => // r.children.map(c => ({ // ...c, // subSystemValue: c.id.split(webMode.integration)[1], // })), // ), res.data .filter(d => d.id === 'Web4SingleStation') .map(r => r.children.map(c => ({ ...c, subSystemValue: c.id.split(webMode.single)[1], })), ), ].flat(2); if (!canceled.cancel) { console.log(websArr); setWebs(websArr); if (!curWeb) setCurWeb(websArr[0]); setLoading(false); } }) .catch(err => { // eslint-disable-next-line no-console setLoading(false); }); }; const updateWebconfig = (webTitle, canceled = { cancel: false }) => { setLoading(true); return getWebconfig(webTitle) .then(res => { setLoading(false); if (!canceled.cancel) { setConfigObj(res.data); // setConfigObj(res.data); if (webTitle === curWeb.text) { setToEdit(res); } } }) .catch(err => { setLoading(false); // eslint-disable-next-line no-console console.error(err); }); }; const handleDeleteWeb = (webToOperate, closeModal) => { // eslint-disable-next-line prefer-destructuring const client = webToOperate?.id?.split( webToOperate.id.startsWith(webMode.single) ? webMode.single : webMode.integration, )[1]; if (client) { deleteWebsite(client) .then(res => { if (res.code === 0 || res.success) { notification.success({ message: `删除网站${webToOperate.text}成功!`, duration: 3, }); // updateModuleTree(userMode || 'super'); if (webToOperate.id === curWeb.id) { setCurWeb(webs[0]); } // setTimeout(() => { updateModuleTree(userMode || 'super'); // }, 500); } else { notification.error({ message: res.message || `删除网站 ${webToOperate.text} 失败`, }); } // eslint-disable-next-line no-unused-expressions closeModal && closeModal(); }) .catch(err => { // eslint-disable-next-line no-console console.error(err); notification.error({ message: '删除网站失败!', duration: 5 }); // eslint-disable-next-line no-unused-expressions closeModal && closeModal(); }); } }; const onEdit = (targetKey, action) => { const webToOperate = webs.find(w => w.id === targetKey); switch (action) { case 'add': setIsEdit(false); setToEdit(defaultWebConfigObj); setConfigVisible(true); break; case 'remove': Modal.confirm({ title: '删除网站', icon: <ExclamationCircleOutlined />, content: ( <span> 删除网站{' '} <span style={{ fontWeight: 800, color: '#1890ff' }}>{webToOperate.text}</span>{' '} 后将无法恢复, 确认删除? </span> ), okText: '确认', cancelText: '取消', onOk: closeModal => { handleDeleteWeb(webToOperate, closeModal); }, }); break; default: } }; const onDrawerClose = form => { setConfigVisible(false); }; const handleTabChange = v => { setCurWeb(webs.find(w => w.id === v)); }; const handleGeturl = val => { let url; const isSite = val.includes('CityTemp'); if (isSite) { url = val; } else { url = localStorage.getItem('pd2-baseUrl') && localStorage.getItem('pd2-baseUrl') != 'null' && localStorage.getItem('pd2-baseUrl') != 'undefined' ? localStorage.getItem('pd2-baseUrl') + val : val; } return url; }; const handleSubmit = val => { let { bannerLogo, logo, shortcutIcon, baseBannerUrl, baseIconUrl, baseLogoUrl } = val; baseBannerUrl = handleGeturl(bannerLogo); baseIconUrl = handleGeturl(shortcutIcon); baseLogoUrl = handleGeturl(logo); let values = { ...val, baseBannerUrl, baseIconUrl, baseLogoUrl, }; setSubmitting(true); const requestMap = { postEditWebConfig, postAddWebSite, }; // const requestMap = { // addWebsite, // editWebsite, // }; const successMsg = isEdit ? '保存成功!' : '新增网站成功!'; const failMsg = isEdit ? '编辑失败!' : '新增网站失败!'; requestMap[isEdit ? 'postEditWebConfig' : 'postAddWebSite'](values) .then(res => { setSubmitting(false); if (res.code === 0 || res.success) { // setTimeout(() => { if (isEdit) { setCurWeb({ ...curWeb, text: values.title }); } else { setCurWeb({ ...curWeb, text: values.title, id: res.data }); } // }, 200); notification.success({ message: successMsg, duration: 3, }); setConfigVisible(false); // setTimeout(() => { updateModuleTree(userMode || 'super'); // }, 500); } else { notification.warning({ message: res.msg || failMsg, duration: 5, }); } }) .catch(err => { notification.error({ message: failMsg, duration: 5, }); // eslint-disable-next-line no-console console.error(err); setSubmitting(false); }); }; const handleUpdateOnMenuChange = () => { updateModuleTree(userMode || 'super'); }; const updateMenuTree = (type, menuNode) => { updateModuleTree(userMode || 'super'); }; const SyncMap = e => { console.log(e); SyncMapComponent({ visible: e.subSystemValue }).then(res => { if (res.code == 0) { notification.success({ message: '提示', duration: 3, description: '同步成功', }); updateModuleTree(userMode || 'super'); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); }; const sort = () => { console.log(webs); setSortVisible(true); }; const renderTabPane = tabPaneItem => ( <TabPane key={tabPaneItem.id} tab={tabPaneItem.text}> <> <ProCard className={styles.webConfigTabcontent}> <span className={styles.link} onClick={() => { setToEdit({ ...configObj }); setConfigVisible(true); setIsEdit(true); }} > <EditTwoTone /> 查看/编辑网站配置 </span> <div style={{ display: 'inline-block', float: 'right', marginTop: '-15px' }}> <strong style={{ marginRight: '15px' }}> 地图组件数量 {tabPaneItem.existMapComponent < 9 ? ( <Tooltip title="点击一键修复" placement="topRight"> <span style={{ color: 'red' }} onClick={() => SyncMap(tabPaneItem)}> {tabPaneItem.existMapComponent} </span> / <span style={{ color: '#1890ff' }} onClick={() => SyncMap(tabPaneItem)}> {tabPaneItem.mapComponent} </span> </Tooltip> ) : ( <Tooltip title="点击同步地图组件" placement="topRight"> <span style={{ color: '#1890ff' }} onClick={() => SyncMap(tabPaneItem)}> {tabPaneItem.existMapComponent} </span> <span>/</span> {tabPaneItem.existMapComponent !== 9 ? ( <span style={{ color: '#1890ff' }} onClick={() => SyncMap(tabPaneItem)}> {tabPaneItem.existMapComponent} </span> ) : ( <span style={{ color: '#1890ff' }} onClick={() => SyncMap(tabPaneItem)}> {tabPaneItem.mapComponent} </span> )} </Tooltip> )} </strong> {/* {tabPaneItem.existMapComponent < 9 && ( <Button type="primary" style={{ marginRight: '20px' }} onClick={() => SyncMap(tabPaneItem)} > 一键修复 </Button> )} */} </div> <MenuConfig menu={ tabPaneItem.children && tabPaneItem.children.find(w => w.menuType === 'Web4MenuRoot') } onUpdate={handleUpdateOnMenuChange} configFiles={configFiles} updateMenuTree={updateMenuTree} userMode={userMode} webid={tabPaneItem?.id} subSystemValue={tabPaneItem?.subSystemValue} productList={productList} /> </ProCard> </> </TabPane> ); const onOK = e => { setSortVisible(false); console.log(e.str); BatchDragSingleWebsite(e.str).then(res => { if (res.code === 0) { updateModuleTree(userMode || 'super'); notification.success({ message: '提示', duration: 3, description: '调序成功', }); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); }; return ( <PageContainer> <div className={styles.webConfigContainer}> <Spin spinning={loading || submitting}> <div style={{ display: 'flex', alignContent: 'center', justifyContent: 'flex-start', }} > <Tabs type="editable-card" onEdit={onEdit} onChange={handleTabChange} activeKey={curWeb && curWeb.id} style={{ display: 'flex', alignContent: 'center', justifyContent: 'flex-start', width: '97% ', }} > {/* <TabPane key={99} tab="产品配置" closable={false}> <ProductConfig /> </TabPane> */} {/* {webs.map(renderTabPane)} */} {webs.map(item => renderTabPane(item))} </Tabs> <Tooltip title="调序" placement="topRight"> <span style={{ display: 'inline-block', width: '40px', height: '40px', backgroundColor: '#FAFAFA', marginLeft: '5px', padding: '0 8px', border: '1px solid #f0f0f0', borderRadius: '2px 2px 0 0', outline: 'none', cursor: 'pointer', }} onClick={sort} > <OrderedListOutlined style={{ marginTop: '12px', marginLeft: '2px' }} /> </span> </Tooltip> </div> <SiteConfig webs={webs} productList={productList} isEdit={isEdit} visible={configVisible} onClose={onDrawerClose} config={toEdit} onOk={handleSubmit} submitting={submitting} hasIntegerate={hasIntegerate()} /> <SortModal visible={sortVisible} onCancel={() => setSortVisible(false)} webs={webs} callBackSubmit={onOK} /> </Spin> </div> </PageContainer> ); }; export default appConnector(WebConfigPage);