index.jsx 14.8 KB
Newer Older
张烨's avatar
张烨 committed
1
import React, { useEffect, useState } from 'react';
2
import PageContainer from '@/components/BasePageContainer';
3
import { notification, Spin, Tabs, Button, Tooltip, Card } 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,
11
  getProductList,
Maofei94's avatar
Maofei94 committed
12 13 14 15
  getWebSite,
  addWebsite,
  editWebsite,
  omsDeleteWebsite,
16
  SyncMapComponent,
皮倩雯's avatar
皮倩雯 committed
17
  BatchDragSingleWebsite,
张烨's avatar
张烨 committed
18
} from '@/services/webConfig/api';
19
import { EditTwoTone, ExclamationCircleOutlined, OrderedListOutlined } from '@ant-design/icons';
张烨's avatar
张烨 committed
20
import Modal from 'antd/lib/modal/Modal';
张烨's avatar
张烨 committed
21
import ProCard from '@ant-design/pro-card';
22
import styles from './index.less';
张烨's avatar
张烨 committed
23
import SiteConfig from './components/siteConfigDrawer';
24
import { appConnector } from '@/containers/App/store';
张烨's avatar
张烨 committed
25
import { defaultWebConfigObj, webMode } from './utils';
张烨's avatar
张烨 committed
26
import MenuConfig from './menuconfig/MenuConfig';
皮倩雯's avatar
皮倩雯 committed
27
import SortModal from './sortModal';
28

29 30 31
const { TabPane } = Tabs;

const WebConfigPage = props => {
张烨's avatar
张烨 committed
32
  const { userMode } = props;
33
  const [configVisible, setConfigVisible] = useState(false);
张烨's avatar
张烨 committed
34
  const [loading, setLoading] = useState(false);
张烨's avatar
张烨 committed
35
  const [webs, setWebs] = useState([]);
36
  const [curWeb, setCurWeb] = useState(''); // 当前展示的web
张烨's avatar
张烨 committed
37 38
  const [configObj, setConfigObj] = useState({}); // 获取当前的web的配置
  const [toEdit, setToEdit] = useState(null); // 编辑展示用的配置
张烨's avatar
张烨 committed
39
  const [isEdit, setIsEdit] = useState(true);
张烨's avatar
张烨 committed
40
  const [submitting, setSubmitting] = useState(false);
张烨's avatar
张烨 committed
41
  const [configFiles, setConfigFiles] = useState([]);
42
  const [productList, setProductList] = useState([]); // 产品列表
皮倩雯's avatar
皮倩雯 committed
43
  const [sortVisible, setSortVisible] = useState(false);
张烨's avatar
张烨 committed
44

45
  const hasIntegerate = () => webs.some(w => w.id.startsWith(webMode.integration));
张烨's avatar
张烨 committed
46 47

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

  useEffect(() => {
61
    console.log(curWeb, 'curWeb');
张烨's avatar
张烨 committed
62 63 64 65 66 67 68 69 70 71
    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]);
72 73
  // 获取产品列表
  const getProduct = () => {
皮倩雯's avatar
皮倩雯 committed
74
    getProductList({ isDel: 0 }).then(res => {
75 76 77 78 79 80 81 82 83 84 85
      const { code } = res;
      if (code === 0) {
        const {
          data: { UserProducts },
        } = res;
        if (UserProducts && UserProducts.length > 0) {
          setProductList(UserProducts);
        }
      }
    });
  };
张烨's avatar
张烨 committed
86 87

  const updateModuleTree = (userModePrama, canceled = { cancel: false }) => {
张烨's avatar
张烨 committed
88
    setLoading(true);
89
    getWebModuleTree(userModePrama)
张烨's avatar
张烨 committed
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
      .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) {
111
          console.log(websArr, 'websArr');
张烨's avatar
张烨 committed
112 113 114 115 116 117 118
          setWebs(websArr);
          if (!curWeb) setCurWeb(websArr[0]);
          setLoading(false);
        }
      })
      .catch(err => {
        // eslint-disable-next-line no-console
张烨's avatar
张烨 committed
119
        setLoading(false);
张烨's avatar
张烨 committed
120
      });
张烨's avatar
张烨 committed
121
  };
张烨's avatar
张烨 committed
122

张烨's avatar
张烨 committed
123 124
  const updateWebconfig = (webTitle, canceled = { cancel: false }) => {
    setLoading(true);
赵吉's avatar
赵吉 committed
125
    return getWebconfig(webTitle)
张烨's avatar
张烨 committed
126 127 128
      .then(res => {
        setLoading(false);
        if (!canceled.cancel) {
129
          setConfigObj(res.data);
赵吉's avatar
赵吉 committed
130
          // setConfigObj(res.data);
张烨's avatar
张烨 committed
131 132 133
          if (webTitle === curWeb.text) {
            setToEdit(res);
          }
张烨's avatar
张烨 committed
134
        }
张烨's avatar
张烨 committed
135 136 137 138 139 140 141
      })
      .catch(err => {
        setLoading(false);
        // eslint-disable-next-line no-console
        console.error(err);
      });
  };
张烨's avatar
张烨 committed
142

张烨's avatar
张烨 committed
143 144 145
  const handleDeleteWeb = (webToOperate, closeModal) => {
    // eslint-disable-next-line prefer-destructuring
    const client = webToOperate?.id?.split(
146
      webToOperate.id.startsWith(webMode.single) ? webMode.single : webMode.integration,
张烨's avatar
张烨 committed
147 148
    )[1];
    if (client) {
赵吉's avatar
赵吉 committed
149
      deleteWebsite(client)
张烨's avatar
张烨 committed
150
        .then(res => {
Maofei94's avatar
Maofei94 committed
151
          if (res.code === 0 || res.success) {
张烨's avatar
张烨 committed
152 153 154 155
            notification.success({
              message: `删除网站${webToOperate.text}成功!`,
              duration: 3,
            });
Maofei94's avatar
Maofei94 committed
156
            // updateModuleTree(userMode || 'super');
157
            if (webToOperate.id === curWeb.id) {
158
              setCurWeb(webs[0]);
159
            }
皮倩雯's avatar
皮倩雯 committed
160 161 162
            // setTimeout(() => {
            updateModuleTree(userMode || 'super');
            // }, 500);
张烨's avatar
张烨 committed
163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179
          } 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();
        });
    }
  };
180 181

  const onEdit = (targetKey, action) => {
张烨's avatar
张烨 committed
182
    const webToOperate = webs.find(w => w.id === targetKey);
张烨's avatar
张烨 committed
183 184
    switch (action) {
      case 'add':
张烨's avatar
张烨 committed
185
        setIsEdit(false);
张烨's avatar
张烨 committed
186
        setToEdit(defaultWebConfigObj);
张烨's avatar
张烨 committed
187 188 189
        setConfigVisible(true);
        break;
      case 'remove':
张烨's avatar
张烨 committed
190 191 192 193 194 195
        Modal.confirm({
          title: '删除网站',
          icon: <ExclamationCircleOutlined />,
          content: (
            <span>
              删除网站{' '}
196
              <span style={{ fontWeight: 800, color: '#1890ff' }}>{webToOperate.text}</span>{' '}
张烨's avatar
张烨 committed
197 198 199 200 201 202 203 204 205
              后将无法恢复, 确认删除?
            </span>
          ),
          okText: '确认',
          cancelText: '取消',
          onOk: closeModal => {
            handleDeleteWeb(webToOperate, closeModal);
          },
        });
张烨's avatar
张烨 committed
206 207 208
        break;
      default:
    }
209
  };
张烨's avatar
张烨 committed
210

张烨's avatar
张烨 committed
211 212 213
  const onDrawerClose = form => {
    setConfigVisible(false);
  };
张烨's avatar
张烨 committed
214

张烨's avatar
张烨 committed
215
  const handleTabChange = v => {
张烨's avatar
张烨 committed
216
    setCurWeb(webs.find(w => w.id === v));
张烨's avatar
张烨 committed
217
  };
Maofei94's avatar
Maofei94 committed
218 219 220 221 222 223
  const handleGeturl = val => {
    let url;
    const isSite = val.includes('CityTemp');
    if (isSite) {
      url = val;
    } else {
224 225 226 227 228 229
      url =
        localStorage.getItem('pd2-baseUrl') &&
        localStorage.getItem('pd2-baseUrl') != 'null' &&
        localStorage.getItem('pd2-baseUrl') != 'undefined'
          ? localStorage.getItem('pd2-baseUrl') + val
          : val;
Maofei94's avatar
Maofei94 committed
230 231 232 233
    }
    return url;
  };
  const handleSubmit = val => {
234
    let { bannerLogo, logo, shortcutIcon, baseBannerUrl, baseIconUrl, baseLogoUrl } = val;
Maofei94's avatar
Maofei94 committed
235 236 237 238 239 240 241 242 243
    baseBannerUrl = handleGeturl(bannerLogo);
    baseIconUrl = handleGeturl(shortcutIcon);
    baseLogoUrl = handleGeturl(logo);
    let values = {
      ...val,
      baseBannerUrl,
      baseIconUrl,
      baseLogoUrl,
    };
张烨's avatar
张烨 committed
244
    setSubmitting(true);
张烨's avatar
张烨 committed
245
    const requestMap = {
赵吉's avatar
赵吉 committed
246 247
      postEditWebConfig,
      postAddWebSite,
张烨's avatar
张烨 committed
248
    };
赵吉's avatar
赵吉 committed
249 250 251 252
    // const requestMap = {
    //   addWebsite,
    //   editWebsite,
    // };
Maofei94's avatar
Maofei94 committed
253

张烨's avatar
张烨 committed
254 255
    const successMsg = isEdit ? '保存成功!' : '新增网站成功!';
    const failMsg = isEdit ? '编辑失败!' : '新增网站失败!';
赵吉's avatar
赵吉 committed
256
    requestMap[isEdit ? 'postEditWebConfig' : 'postAddWebSite'](values)
张烨's avatar
张烨 committed
257 258
      .then(res => {
        setSubmitting(false);
赵吉's avatar
赵吉 committed
259
        if (res.code === 0 || res.success) {
皮倩雯's avatar
皮倩雯 committed
260 261 262 263 264 265 266
          // setTimeout(() => {
          if (isEdit) {
            setCurWeb({ ...curWeb, text: values.title });
          } else {
            setCurWeb({ ...curWeb, text: values.title, id: res.data });
          }
          // }, 200);
赵吉's avatar
赵吉 committed
267

张烨's avatar
张烨 committed
268
          notification.success({
张烨's avatar
张烨 committed
269 270 271
            message: successMsg,
            duration: 3,
          });
Maofei94's avatar
Maofei94 committed
272
          setConfigVisible(false);
皮倩雯's avatar
皮倩雯 committed
273 274 275
          // setTimeout(() => {
          updateModuleTree(userMode || 'super');
          // }, 500);
张烨's avatar
张烨 committed
276 277
        } else {
          notification.warning({
皮倩雯's avatar
皮倩雯 committed
278
            message: res.msg || failMsg,
张烨's avatar
张烨 committed
279 280
            duration: 5,
          });
张烨's avatar
张烨 committed
281 282 283 284 285 286
        }
      })
      .catch(err => {
        notification.error({
          message: failMsg,
          duration: 5,
张烨's avatar
张烨 committed
287
        });
张烨's avatar
张烨 committed
288 289 290 291
        // eslint-disable-next-line no-console
        console.error(err);
        setSubmitting(false);
      });
张烨's avatar
张烨 committed
292 293
  };

张烨's avatar
张烨 committed
294 295 296 297
  const handleUpdateOnMenuChange = () => {
    updateModuleTree(userMode || 'super');
  };

张烨's avatar
张烨 committed
298 299 300 301
  const updateMenuTree = (type, menuNode) => {
    updateModuleTree(userMode || 'super');
  };

302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321
  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,
        });
      }
    });
  };

皮倩雯's avatar
皮倩雯 committed
322 323 324 325 326
  const sort = () => {
    console.log(webs);
    setSortVisible(true);
  };

张烨's avatar
张烨 committed
327 328 329
  const renderTabPane = tabPaneItem => (
    <TabPane key={tabPaneItem.id} tab={tabPaneItem.text}>
      <>
330
        <Card className={styles.webConfigTabcontent}>
张烨's avatar
张烨 committed
331 332 333 334 335 336 337 338
          <span
            className={styles.link}
            onClick={() => {
              setToEdit({ ...configObj });
              setConfigVisible(true);
              setIsEdit(true);
            }}
          >
张烨's avatar
张烨 committed
339
            <EditTwoTone /> 查看/编辑网站配置
张烨's avatar
张烨 committed
340
          </span>
皮倩雯's avatar
皮倩雯 committed
341

342 343
          <div style={{ display: 'inline-block', float: 'right', marginTop: '-15px' }}>
            <strong style={{ marginRight: '15px' }}>
344
              地图组件数量
345
              {tabPaneItem.existMapComponent < tabPaneItem.mapComponent ? (
346 347 348 349
                <Tooltip title="点击一键修复" placement="topRight">
                  <span style={{ color: 'red' }} onClick={() => SyncMap(tabPaneItem)}>
                    {tabPaneItem.existMapComponent}
                  </span>
350 351 352 353
                  /
                  <span style={{ color: '#1890ff' }} onClick={() => SyncMap(tabPaneItem)}>
                    {tabPaneItem.mapComponent}
                  </span>
354
                </Tooltip>
355
              ) : (
356 357 358 359
                <Tooltip title="点击同步地图组件" placement="topRight">
                  <span style={{ color: '#1890ff' }} onClick={() => SyncMap(tabPaneItem)}>
                    {tabPaneItem.existMapComponent}
                  </span>
360
                  <span>/</span>
361
                  {tabPaneItem.existMapComponent !== tabPaneItem.mapComponent ? (
362 363 364
                    <span style={{ color: '#1890ff' }} onClick={() => SyncMap(tabPaneItem)}>
                      {tabPaneItem.existMapComponent}
                    </span>
365
                  ) : (
366 367 368
                    <span style={{ color: '#1890ff' }} onClick={() => SyncMap(tabPaneItem)}>
                      {tabPaneItem.mapComponent}
                    </span>
369
                  )}
370
                </Tooltip>
371
              )}
372
            </strong>
373
            {/* {tabPaneItem.existMapComponent < 9 && (
皮倩雯's avatar
皮倩雯 committed
374 375 376 377 378
              <Button
                type="primary"
                style={{ marginRight: '20px' }}
                onClick={() => SyncMap(tabPaneItem)}
              >
379
                一键修复
380
              </Button>
381
            )} */}
382
          </div>
张烨's avatar
张烨 committed
383
          <MenuConfig
皮倩雯's avatar
皮倩雯 committed
384 385 386
            menu={
              tabPaneItem.children && tabPaneItem.children.find(w => w.menuType === 'Web4MenuRoot')
            }
张烨's avatar
张烨 committed
387
            onUpdate={handleUpdateOnMenuChange}
张烨's avatar
张烨 committed
388 389
            configFiles={configFiles}
            updateMenuTree={updateMenuTree}
Maofei94's avatar
Maofei94 committed
390 391
            userMode={userMode}
            webid={tabPaneItem?.id}
张烨's avatar
张烨 committed
392
            subSystemValue={tabPaneItem?.subSystemValue}
393
            productList={productList}
张烨's avatar
张烨 committed
394
          />
395
        </Card>
张烨's avatar
张烨 committed
396 397 398 399
      </>
    </TabPane>
  );

皮倩雯's avatar
皮倩雯 committed
400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420
  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,
        });
      }
    });
  };

421
  return (
张烨's avatar
张烨 committed
422
    <PageContainer>
423
      <div className={styles.webConfigContainer}>
张烨's avatar
张烨 committed
424
        <Spin spinning={loading || submitting}>
425 426 427 428 429 430 431
          <div
            style={{
              display: 'flex',
              alignContent: 'center',
              justifyContent: 'flex-start',
            }}
          >
432 433 434 435
            <Tabs
              type="editable-card"
              onEdit={onEdit}
              onChange={handleTabChange}
436
              activeKey={curWeb && curWeb.id}
437 438 439 440 441 442
              style={{
                display: 'flex',
                alignContent: 'center',
                justifyContent: 'flex-start',
                width: '97% ',
              }}
443 444
            >
              {/* <TabPane key={99} tab="产品配置" closable={false}>
445
              <ProductConfig />
446
            </TabPane> */}
447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469
              {/* {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>
张烨's avatar
张烨 committed
470
          <SiteConfig
皮倩雯's avatar
皮倩雯 committed
471
            webs={webs}
472
            productList={productList}
张烨's avatar
张烨 committed
473 474 475 476 477 478 479 480
            isEdit={isEdit}
            visible={configVisible}
            onClose={onDrawerClose}
            config={toEdit}
            onOk={handleSubmit}
            submitting={submitting}
            hasIntegerate={hasIntegerate()}
          />
皮倩雯's avatar
皮倩雯 committed
481 482 483 484 485 486
          <SortModal
            visible={sortVisible}
            onCancel={() => setSortVisible(false)}
            webs={webs}
            callBackSubmit={onOK}
          />
张烨's avatar
张烨 committed
487
        </Spin>
488 489 490 491 492
      </div>
    </PageContainer>
  );
};

493
export default appConnector(WebConfigPage);