index.jsx 15.2 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 debounce from 'lodash/debounce';
20
import { EditTwoTone, ExclamationCircleOutlined, OrderedListOutlined } from '@ant-design/icons';
张烨's avatar
张烨 committed
21
import Modal from 'antd/lib/modal/Modal';
张烨's avatar
张烨 committed
22
import ProCard from '@ant-design/pro-card';
23
import styles from './index.less';
张烨's avatar
张烨 committed
24
import SiteConfig from './components/siteConfigDrawer';
25
import { appConnector } from '@/containers/App/store';
张烨's avatar
张烨 committed
26
import { defaultWebConfigObj, webMode } from './utils';
张烨's avatar
张烨 committed
27
import MenuConfig from './menuconfig/MenuConfig';
皮倩雯's avatar
皮倩雯 committed
28
import SortModal from './sortModal';
29

30 31 32
const { TabPane } = Tabs;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

324 325
  const delayedSyncMap = debounce(data => SyncMap(data), 500);

皮倩雯's avatar
皮倩雯 committed
326 327 328 329 330
  const sort = () => {
    console.log(webs);
    setSortVisible(true);
  };

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

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

皮倩雯's avatar
皮倩雯 committed
405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425
  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,
        });
      }
    });
  };

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

501
export default appConnector(WebConfigPage);