index.jsx 10.4 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,
11
  getProductList,
Maofei94's avatar
Maofei94 committed
12 13 14 15
  getWebSite,
  addWebsite,
  editWebsite,
  omsDeleteWebsite,
张烨's avatar
张烨 committed
16
} from '@/services/webConfig/api';
张烨's avatar
张烨 committed
17
import { EditTwoTone, ExclamationCircleOutlined } from '@ant-design/icons';
张烨's avatar
张烨 committed
18
import Modal from 'antd/lib/modal/Modal';
张烨's avatar
张烨 committed
19
import ProCard from '@ant-design/pro-card';
20
import styles from './index.less';
张烨's avatar
张烨 committed
21
import SiteConfig from './components/siteConfigDrawer';
22
import { appConnector } from '@/containers/App/store';
张烨's avatar
张烨 committed
23
import { defaultWebConfigObj, webMode } from './utils';
张烨's avatar
张烨 committed
24
import MenuConfig from './menuconfig/MenuConfig';
25

26 27 28
const { TabPane } = Tabs;

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

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

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

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

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

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

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

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

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

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

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

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

张烨's avatar
张烨 committed
287 288 289 290
  const handleUpdateOnMenuChange = () => {
    updateModuleTree(userMode || 'super');
  };

张烨's avatar
张烨 committed
291 292 293 294
  const updateMenuTree = (type, menuNode) => {
    updateModuleTree(userMode || 'super');
  };

张烨's avatar
张烨 committed
295 296 297
  const renderTabPane = tabPaneItem => (
    <TabPane key={tabPaneItem.id} tab={tabPaneItem.text}>
      <>
张烨's avatar
张烨 committed
298 299 300 301 302 303 304 305 306
        <ProCard className={styles.webConfigTabcontent}>
          <span
            className={styles.link}
            onClick={() => {
              setToEdit({ ...configObj });
              setConfigVisible(true);
              setIsEdit(true);
            }}
          >
张烨's avatar
张烨 committed
307
            <EditTwoTone /> 查看/编辑网站配置
张烨's avatar
张烨 committed
308
          </span>
张烨's avatar
张烨 committed
309
          <MenuConfig
310
            menu={tabPaneItem?.children.find(w => w.menuType === 'Web4MenuRoot')}
张烨's avatar
张烨 committed
311
            onUpdate={handleUpdateOnMenuChange}
张烨's avatar
张烨 committed
312 313
            configFiles={configFiles}
            updateMenuTree={updateMenuTree}
Maofei94's avatar
Maofei94 committed
314 315
            userMode={userMode}
            webid={tabPaneItem?.id}
张烨's avatar
张烨 committed
316
            subSystemValue={tabPaneItem?.subSystemValue}
317
            productList={productList}
张烨's avatar
张烨 committed
318 319
          />
        </ProCard>
张烨's avatar
张烨 committed
320 321 322 323
      </>
    </TabPane>
  );

324
  return (
张烨's avatar
张烨 committed
325
    <PageContainer>
326
      <div className={styles.webConfigContainer}>
张烨's avatar
张烨 committed
327
        <Spin spinning={loading || submitting}>
328 329 330 331 332 333
          <Tabs
            type="editable-card"
            onEdit={onEdit}
            onChange={handleTabChange}
            activeKey={curWeb.id}
          >
334
            {/* <TabPane key={99} tab="产品配置" closable={false}>
335
              <ProductConfig />
336
            </TabPane> */}
Maofei94's avatar
Maofei94 committed
337 338
            {/* {webs.map(renderTabPane)} */}
            {webs.map(item => renderTabPane(item))}
张烨's avatar
张烨 committed
339 340
          </Tabs>
          <SiteConfig
341
            productList={productList}
张烨's avatar
张烨 committed
342 343 344 345 346 347 348 349 350
            isEdit={isEdit}
            visible={configVisible}
            onClose={onDrawerClose}
            config={toEdit}
            onOk={handleSubmit}
            submitting={submitting}
            hasIntegerate={hasIntegerate()}
          />
        </Spin>
351 352 353 354 355
      </div>
    </PageContainer>
  );
};

356
export default appConnector(WebConfigPage);