index.js 9.62 KB
Newer Older
张烨's avatar
张烨 committed
1
import React, { useEffect, useState } from 'react';
2
import PageContainer from '@/components/BasePageContainer';
张烨's avatar
张烨 committed
3
import { notification, Spin, Tabs } from 'antd';
张烨's avatar
张烨 committed
4 5 6
import {
  getWebModuleTree,
  getWebconfig,
张烨's avatar
张烨 committed
7
  postEditWebConfig,
张烨's avatar
张烨 committed
8
  postAddWebSite,
张烨's avatar
张烨 committed
9
  deleteWebsite,
张烨's avatar
张烨 committed
10
  getAllConfigName,
Maofei94's avatar
Maofei94 committed
11 12 13 14
  getWebSite,
  addWebsite,
  editWebsite,
  omsDeleteWebsite,
张烨's avatar
张烨 committed
15
} from '@/services/webConfig/api';
张烨's avatar
张烨 committed
16
import { EditTwoTone, ExclamationCircleOutlined } from '@ant-design/icons';
张烨's avatar
张烨 committed
17
import Modal from 'antd/lib/modal/Modal';
张烨's avatar
张烨 committed
18
import ProCard from '@ant-design/pro-card';
19
import styles from './index.less';
张烨's avatar
张烨 committed
20
import SiteConfig from './components/siteConfigDrawer';
21
import { appConnector } from '@/containers/App/store';
张烨's avatar
张烨 committed
22
import { defaultWebConfigObj, webMode } from './utils';
张烨's avatar
张烨 committed
23
import MenuConfig from './menuconfig/MenuConfig';
24
import ProductConfig from './productConfig';
25 26 27
const { TabPane } = Tabs;

const WebConfigPage = props => {
张烨's avatar
张烨 committed
28
  const { userMode } = props;
29
  const [configVisible, setConfigVisible] = useState(false);
张烨's avatar
张烨 committed
30
  const [loading, setLoading] = useState(false);
张烨's avatar
张烨 committed
31
  const [webs, setWebs] = useState([]);
32
  const [curWeb, setCurWeb] = useState(''); // 当前展示的web
张烨's avatar
张烨 committed
33 34
  const [configObj, setConfigObj] = useState({}); // 获取当前的web的配置
  const [toEdit, setToEdit] = useState(null); // 编辑展示用的配置
张烨's avatar
张烨 committed
35
  const [isEdit, setIsEdit] = useState(true);
张烨's avatar
张烨 committed
36
  const [submitting, setSubmitting] = useState(false);
张烨's avatar
张烨 committed
37
  const [configFiles, setConfigFiles] = useState([]);
张烨's avatar
张烨 committed
38

张烨's avatar
张烨 committed
39 40
  const hasIntegerate = () =>
    webs.some(w => w.id.startsWith(webMode.integration));
张烨's avatar
张烨 committed
41 42

  useEffect(() => {
张烨's avatar
张烨 committed
43 44 45
    let canceled = { cancel: false };
    setLoading(true);
    updateModuleTree(userMode || 'super', canceled);
张烨's avatar
张烨 committed
46
    getAllConfigName().then(res => {
47
      if (!canceled.cancel) setConfigFiles(res.data);
张烨's avatar
张烨 committed
48
    });
张烨's avatar
张烨 committed
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
    return () => {
      canceled.cancel = true;
    };
  }, []);

  useEffect(() => {
    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 updateModuleTree = (userModePrama, canceled = { cancel: false }) => {
张烨's avatar
张烨 committed
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
    setLoading(true);
    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);
          if (!curWeb) setCurWeb(websArr[0]);
          setLoading(false);
        }
      })
      .catch(err => {
        // eslint-disable-next-line no-console
        console.error(err);
张烨's avatar
张烨 committed
98
        setLoading(false);
张烨's avatar
张烨 committed
99
      });
张烨's avatar
张烨 committed
100
  };
张烨's avatar
张烨 committed
101

张烨's avatar
张烨 committed
102 103
  const updateWebconfig = (webTitle, canceled = { cancel: false }) => {
    setLoading(true);
赵吉's avatar
赵吉 committed
104
    return getWebconfig(webTitle)
张烨's avatar
张烨 committed
105 106 107
      .then(res => {
        setLoading(false);
        if (!canceled.cancel) {
108
          setConfigObj(res.data);
赵吉's avatar
赵吉 committed
109
          // setConfigObj(res.data);
张烨's avatar
张烨 committed
110 111 112
          if (webTitle === curWeb.text) {
            setToEdit(res);
          }
张烨's avatar
张烨 committed
113
        }
张烨's avatar
张烨 committed
114 115 116 117 118 119 120
      })
      .catch(err => {
        setLoading(false);
        // eslint-disable-next-line no-console
        console.error(err);
      });
  };
张烨's avatar
张烨 committed
121

张烨's avatar
张烨 committed
122 123 124 125 126 127 128 129
  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) {
赵吉's avatar
赵吉 committed
130
      deleteWebsite(client)
张烨's avatar
张烨 committed
131
        .then(res => {
Maofei94's avatar
Maofei94 committed
132
          if (res.code === 0 || res.success) {
张烨's avatar
张烨 committed
133 134 135 136
            notification.success({
              message: `删除网站${webToOperate.text}成功!`,
              duration: 3,
            });
Maofei94's avatar
Maofei94 committed
137 138 139 140
            // updateModuleTree(userMode || 'super');

            setTimeout(() => {
              updateModuleTree(userMode || 'super');
Maofei94's avatar
Maofei94 committed
141
            }, 500);
张烨's avatar
张烨 committed
142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
          } 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();
        });
    }
  };
159 160

  const onEdit = (targetKey, action) => {
张烨's avatar
张烨 committed
161
    const webToOperate = webs.find(w => w.id === targetKey);
张烨's avatar
张烨 committed
162 163
    switch (action) {
      case 'add':
张烨's avatar
张烨 committed
164
        setIsEdit(false);
张烨's avatar
张烨 committed
165
        setToEdit(defaultWebConfigObj);
张烨's avatar
张烨 committed
166 167 168
        setConfigVisible(true);
        break;
      case 'remove':
张烨's avatar
张烨 committed
169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186
        Modal.confirm({
          title: '删除网站',
          icon: <ExclamationCircleOutlined />,
          content: (
            <span>
              删除网站{' '}
              <span style={{ fontWeight: 800, color: '#1890ff' }}>
                {webToOperate.text}
              </span>{' '}
              后将无法恢复, 确认删除?
            </span>
          ),
          okText: '确认',
          cancelText: '取消',
          onOk: closeModal => {
            handleDeleteWeb(webToOperate, closeModal);
          },
        });
张烨's avatar
张烨 committed
187 188 189
        break;
      default:
    }
190
  };
张烨's avatar
张烨 committed
191

张烨's avatar
张烨 committed
192 193 194
  const onDrawerClose = form => {
    setConfigVisible(false);
  };
张烨's avatar
张烨 committed
195

张烨's avatar
张烨 committed
196
  const handleTabChange = v => {
张烨's avatar
张烨 committed
197
    setCurWeb(webs.find(w => w.id === v));
张烨's avatar
张烨 committed
198
  };
Maofei94's avatar
Maofei94 committed
199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228
  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,
    };
张烨's avatar
张烨 committed
229
    setSubmitting(true);
张烨's avatar
张烨 committed
230
    const requestMap = {
赵吉's avatar
赵吉 committed
231 232
      postEditWebConfig,
      postAddWebSite,
张烨's avatar
张烨 committed
233
    };
赵吉's avatar
赵吉 committed
234 235 236 237
    // const requestMap = {
    //   addWebsite,
    //   editWebsite,
    // };
Maofei94's avatar
Maofei94 committed
238

张烨's avatar
张烨 committed
239 240
    const successMsg = isEdit ? '保存成功!' : '新增网站成功!';
    const failMsg = isEdit ? '编辑失败!' : '新增网站失败!';
赵吉's avatar
赵吉 committed
241
    requestMap[isEdit ? 'postEditWebConfig' : 'postAddWebSite'](values)
张烨's avatar
张烨 committed
242 243
      .then(res => {
        setSubmitting(false);
赵吉's avatar
赵吉 committed
244 245 246 247 248
        if (res.code === 0 || res.success) {
          setTimeout(() => {
            setCurWeb({ ...curWeb, text: values.title });
          }, 200);

张烨's avatar
张烨 committed
249
          notification.success({
张烨's avatar
张烨 committed
250 251 252
            message: successMsg,
            duration: 3,
          });
Maofei94's avatar
Maofei94 committed
253
          setConfigVisible(false);
赵吉's avatar
赵吉 committed
254 255 256
          setTimeout(() => {
            updateModuleTree(userMode || 'super');
          }, 500);
张烨's avatar
张烨 committed
257 258 259
        } else {
          notification.warning({
            message: res.message || failMsg,
张烨's avatar
张烨 committed
260 261
            duration: 5,
          });
张烨's avatar
张烨 committed
262 263 264 265 266 267
        }
      })
      .catch(err => {
        notification.error({
          message: failMsg,
          duration: 5,
张烨's avatar
张烨 committed
268
        });
张烨's avatar
张烨 committed
269 270 271 272
        // eslint-disable-next-line no-console
        console.error(err);
        setSubmitting(false);
      });
张烨's avatar
张烨 committed
273 274
  };

张烨's avatar
张烨 committed
275 276 277 278
  const handleUpdateOnMenuChange = () => {
    updateModuleTree(userMode || 'super');
  };

张烨's avatar
张烨 committed
279 280 281 282
  const updateMenuTree = (type, menuNode) => {
    updateModuleTree(userMode || 'super');
  };

张烨's avatar
张烨 committed
283 284 285
  const renderTabPane = tabPaneItem => (
    <TabPane key={tabPaneItem.id} tab={tabPaneItem.text}>
      <>
张烨's avatar
张烨 committed
286 287 288 289 290 291 292 293 294
        <ProCard className={styles.webConfigTabcontent}>
          <span
            className={styles.link}
            onClick={() => {
              setToEdit({ ...configObj });
              setConfigVisible(true);
              setIsEdit(true);
            }}
          >
张烨's avatar
张烨 committed
295
            <EditTwoTone /> 查看/编辑网站配置
张烨's avatar
张烨 committed
296
          </span>
张烨's avatar
张烨 committed
297
          <MenuConfig
张烨's avatar
张烨 committed
298 299 300
            menu={tabPaneItem?.children.find(
              w => w.menuType === 'Web4MenuRoot',
            )}
张烨's avatar
张烨 committed
301
            onUpdate={handleUpdateOnMenuChange}
张烨's avatar
张烨 committed
302 303
            configFiles={configFiles}
            updateMenuTree={updateMenuTree}
Maofei94's avatar
Maofei94 committed
304 305
            userMode={userMode}
            webid={tabPaneItem?.id}
张烨's avatar
张烨 committed
306
            subSystemValue={tabPaneItem?.subSystemValue}
张烨's avatar
张烨 committed
307 308
          />
        </ProCard>
张烨's avatar
张烨 committed
309 310 311 312
      </>
    </TabPane>
  );

313
  return (
张烨's avatar
张烨 committed
314
    <PageContainer>
315
      <div className={styles.webConfigContainer}>
张烨's avatar
张烨 committed
316 317
        <Spin spinning={loading || submitting}>
          <Tabs type="editable-card" onEdit={onEdit} onChange={handleTabChange}>
318
            {/* <TabPane key={99} tab="产品配置" closable={false}>
319
              <ProductConfig />
320
            </TabPane> */}
Maofei94's avatar
Maofei94 committed
321 322
            {/* {webs.map(renderTabPane)} */}
            {webs.map(item => renderTabPane(item))}
张烨's avatar
张烨 committed
323 324 325 326 327 328 329 330 331 332 333
          </Tabs>
          <SiteConfig
            isEdit={isEdit}
            visible={configVisible}
            onClose={onDrawerClose}
            config={toEdit}
            onOk={handleSubmit}
            submitting={submitting}
            hasIntegerate={hasIntegerate()}
          />
        </Spin>
334 335 336 337 338
      </div>
    </PageContainer>
  );
};

339
export default appConnector(WebConfigPage);