import React, { useEffect, useState } from 'react'; import PageContainer from '@/components/BasePageContainer'; import { notification, Spin, Tabs } from 'antd'; import { getWebModuleTree, getWebconfig, postEditWebConfig, postAddWebSite, deleteWebsite, getAllConfigName, getProductList, getWebSite, addWebsite, editWebsite, omsDeleteWebsite, } from '@/services/webConfig/api'; import { EditTwoTone, ExclamationCircleOutlined } 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'; 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 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); console.log(userModePrama); return 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) { setWebs(websArr); console.log(websArr[0], 'websArr[0]'); if (!curWeb) setCurWeb(websArr[0]); setLoading(false); } }) .catch(err => { // eslint-disable-next-line no-console console.error(err); 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') + 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 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> <MenuConfig menu={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> ); return ( <PageContainer> <div className={styles.webConfigContainer}> <Spin spinning={loading || submitting}> <Tabs type="editable-card" onEdit={onEdit} onChange={handleTabChange} activeKey={curWeb.id} > {/* <TabPane key={99} tab="产品配置" closable={false}> <ProductConfig /> </TabPane> */} {/* {webs.map(renderTabPane)} */} {webs.map(item => renderTabPane(item))} </Tabs> <SiteConfig productList={productList} isEdit={isEdit} visible={configVisible} onClose={onDrawerClose} config={toEdit} onOk={handleSubmit} submitting={submitting} hasIntegerate={hasIntegerate()} /> </Spin> </div> </PageContainer> ); }; export default appConnector(WebConfigPage);