siteConfigDrawer.js 20.2 KB
Newer Older
1 2
import React, { useState, useEffect } from 'react';
import { getLoginPage, getMapCofigs, getWebThemes, getProductList } from '@/services/webConfig/api';
邓超's avatar
邓超 committed
3
import { SketchPicker } from 'react-color';
4 5 6 7 8 9 10 11 12 13 14
import {
  Drawer,
  notification,
  Button,
  Space,
  Form,
  Input,
  Select,
  Checkbox,
  Radio,
  Tooltip,
15
  Divider,
16
  AutoComplete,
17 18
  Row,
  Col,
邓超's avatar
邓超 committed
19
  Switch,
20 21
} from 'antd';
import { PlusOutlined, InfoCircleOutlined } from '@ant-design/icons';
张烨's avatar
张烨 committed
22
import WebConfigForm from './webConfigForm';
23
import ColorLinear from './ColorLinear';
24 25
import Upload from '@/components/Upload';
import styles from './siteConfigDrawer.less';
26
import ParmarModal from './ParmarModal';
27
const { Option } = Select;
28
const plainOptions = ['搜索', '消息', '反馈'];
29
const defaultCheckedList = ['搜索', '消息', '反馈'];
邓超's avatar
邓超 committed
30
const colorList = [
邓超's avatar
邓超 committed
31 32 33 34 35 36 37 38
  {
    key: '科技蓝',
    color: '#0087F7',
    headerColor: 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
  },
  {
    key: '环保绿',
    color: '#009C73',
邓超's avatar
邓超 committed
39
    headerColor: 'linear-gradient(0deg, #00845D 0%, #02BF87 100%)',
邓超's avatar
邓超 committed
40
  },
41 42 43 44 45
  {
    key: '清澈蓝',
    color: '#1890FF',
    headerColor: '#1890FF',
  },
邓超's avatar
邓超 committed
46
];
张烨's avatar
张烨 committed
47 48

export default props => {
皮倩雯's avatar
皮倩雯 committed
49 50 51 52 53 54 55 56 57 58 59
  const {
    visible,
    onClose,
    config,
    hasIntegerate,
    isEdit,
    onOk,
    submitting,
    productList,
    webs,
  } = props;
60 61
  const [form] = Form.useForm();
  const [loginPages, setLoginPages] = useState([]);
62 63 64
  const [checkedList, setCheckedList] = useState([]);
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(true);
邓超's avatar
邓超 committed
65 66
  const [displayColorPicker, setDisplayColorPicker] = useState(false);
  const [color, setColor] = useState('');
67
  const CheckboxGroup = Checkbox.Group;
邓超's avatar
邓超 committed
68
  const [showAdvanced, setShowAdvanced] = useState(false); // 是否显示高级设置
69
  const [showParmarModal, setShowParmarModal] = useState(false);
皮倩雯's avatar
皮倩雯 committed
70 71
  const [keepText, setKeepText] = useState([]);
  const [keepValue, setKeepValue] = useState([]);
72

73 74 75 76 77 78 79
  const [visibleChecked, setVisibleChecked] = useState(''); // 菜单开关
  const [visibleChecked1, setVisibleChecked1] = useState(''); // SaaS样式开关
  const [visibleChecked2, setVisibleChecked2] = useState(''); // Web4地图开关
  const [visibleChecked3, setVisibleChecked3] = useState(''); // 消息标记开关
  const [visibleChecked4, setVisibleChecked4] = useState(''); // 语音播报开关
  const [visibleChecked5, setVisibleChecked5] = useState(''); // 菜单样式开关
  const [visibleChecked7, setVisibleChecked7] = useState(''); // 地图遮罩开关
80

81 82
  useEffect(() => {
    onGetLoginPages();
皮倩雯's avatar
皮倩雯 committed
83 84 85 86 87 88 89 90
    let text = [];
    let value = [];
    webs.map(i => {
      text.push(i.text);
      value.push(i.subSystemValue);
    });
    setKeepText(text);
    setKeepValue(value);
91
    if (isEdit) {
皮倩雯's avatar
皮倩雯 committed
92
      if (config != null && config.topMenu) {
93 94 95 96 97 98
        setCheckedList(config.topMenu.split(','));
        if (config.topMenu.split(',').length == 1 && config.topMenu.split(',')[0] == '') {
          setIndeterminate(false);
        } else {
          setIndeterminate(
            !!config.topMenu.split(',').length &&
邓超's avatar
邓超 committed
99
              config.topMenu.split(',').length < plainOptions.length,
100 101 102 103 104 105 106 107 108 109
          );
        }

        setCheckAll(config.topMenu.split(',').length === plainOptions.length);
      }
    } else {
      setCheckedList(defaultCheckedList);
      setIndeterminate(false);
      setCheckAll(true);
    }
110 111 112
    if (visible == false) {
      setCheckedList([]);
    }
113
  }, [visible]);
张烨's avatar
张烨 committed
114

115 116 117 118 119
  useEffect(() => {
    if (visible) {
      if (isEdit) {
        // 获取表单回显
        console.log(config, 'config');
120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
        if (config.CloudStyle == '是') {
          config.CloudStyle == true;
          setVisibleChecked1(true);
        } else {
          config.CloudStyle == false;
          setVisibleChecked1(false);
        }

        if (config.messageMarking == 'All') {
          config.messageMarking == true;
          setVisibleChecked3(true);
        } else {
          config.messageMarking == false;
          setVisibleChecked3(false);
        }

        if (config.menuState == 'open') {
          config.menuState == true;
          setVisibleChecked5(true);
        } else {
          config.menuState == false;
          setVisibleChecked5(false);
        }
143
        console.log(config);
144 145 146
        setVisibleChecked(config.navTheme == 'light');
        setVisibleChecked2(config.hideMap);
        setVisibleChecked4(config.messageVoice);
147
        setVisibleChecked7(config.useCoverMap == 'true');
邓超's avatar
邓超 committed
148 149
        form.setFieldsValue({
          ...config,
邓超's avatar
邓超 committed
150
          primaryColor: config.primaryColor ? config.primaryColor : '#0087F7',
151 152 153 154 155 156
          navTheme: config.navTheme == 'light',
          CloudStyle: config.CloudStyle,
          messageMarking: config.messageMarking,
          hideMap: config.hideMap,
          messageVoice: config.messageVoice,
          menuState: config.menuState,
157
          useCoverMap: config.useCoverMap == 'true',
邓超's avatar
邓超 committed
158 159 160
          headerPrimaryColor: config.headerPrimaryColor
            ? config.headerPrimaryColor
            : 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
邓超's avatar
邓超 committed
161
        });
邓超's avatar
邓超 committed
162 163 164 165 166
        setColor(
          config.headerPrimaryColor
            ? config.headerPrimaryColor
            : 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
        );
167
      } else {
邓超's avatar
邓超 committed
168
        setColor('linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)');
169 170 171 172 173 174
        setVisibleChecked(false);
        setVisibleChecked1(true);
        setVisibleChecked2(true);
        setVisibleChecked3(true);
        setVisibleChecked4(true);
        setVisibleChecked5(true);
175
        setVisibleChecked7(true);
邓超's avatar
邓超 committed
176
        form.setFieldsValue({
177 178 179
          shortcutIcon: 'assets\\images\\icon\\熊猫-蓝色.png',
          logo: 'assets\\images\\logo\\熊猫-蓝绿色.svg',
          bannerLogo: 'assets\\images\\logo\\熊猫-白色.svg',
皮倩雯's avatar
皮倩雯 committed
180
          title: '新网站',
181
          messageMarking: true,
邓超's avatar
邓超 committed
182
          messageVoice: true,
183 184
          menuState: true,
          hideMap: true,
185
          loginTemplate: 'Dark',
邓超's avatar
邓超 committed
186
          primaryColor: '#0087F7',
187 188
          navTheme: false,
          CloudStyle: true,
189
          useCoverMap: true,
邓超's avatar
邓超 committed
190
          headerPrimaryColor: 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
邓超's avatar
邓超 committed
191
        });
192 193
      }
    } else {
邓超's avatar
邓超 committed
194
      setShowAdvanced(false);
195
      form.resetFields();
196 197 198 199 200 201
      setVisibleChecked('');
      setVisibleChecked1('');
      setVisibleChecked2('');
      setVisibleChecked3('');
      setVisibleChecked4('');
      setVisibleChecked5('');
202 203 204 205 206
    }
  }, [visible]);
  const onGetLoginPages = () => {
    if (loginPages.length === 0) {
      getLoginPage().then(res => {
207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226
        let list = [
          {
            label: renderTitle('web5内置模板'),
            options: [],
          },
          {
            label: renderTitle('web4登录模板'),
            options: [],
          },
        ];
        res.data.loginTemplate.forEach(item => {
          if (item.type === 'web5') {
            list[0].options.push(renderItem(`${item.title}`));
          }
          if (item.type === 'web4') {
            list[1].options.push(renderItem(`${item.title}`));
          }
        });

        setLoginPages(list);
227 228 229
      });
    }
  };
230 231 232 233 234 235 236 237 238 239 240 241 242 243 244
  const renderItem = title => ({
    value: title,
    label: (
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        {title}
      </div>
    ),
  });
  // 登录搜索头部
  const renderTitle = title => <span>{title}</span>;
245

246 247
  const onsubmit = () => {
    form.validateFields().then(validate => {
皮倩雯's avatar
皮倩雯 committed
248 249 250 251 252 253 254 255
      // if (checkedList.find(i => i == '首页') && !validate.homePage) {
      //   notification.warning({
      //     message: '提示',
      //     duration: 3,
      //     description: '功能配置勾选首页时主页Url必填',
      //   });
      //   return;
      // }
256
      validate.topMenu = checkedList.toString();
257 258 259 260
      validate.navTheme = visibleChecked ? 'light' : 'dark';
      validate.CloudStyle = visibleChecked1 ? '是' : '否';
      validate.messageMarking = visibleChecked3 ? 'All' : 'One';
      validate.menuState = visibleChecked5 ? 'open' : 'close';
261
      console.log(validate);
262
      if (validate) {
邓超's avatar
邓超 committed
263
        const colorIndex = colorList.findIndex(item => item.color === validate.primaryColor);
264 265
        onOk({
          ...validate,
邓超's avatar
邓超 committed
266
          headerPrimaryColor: colorList[colorIndex].headerColor,
267 268 269 270 271 272
          mode: 'single',
          menu: 'banner-left',
        });
      }
    });
  };
273 274 275 276 277 278 279 280 281 282 283 284

  const onCheckAllChange = e => {
    setCheckedList(e.target.checked ? plainOptions : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  const onChange = list => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };
邓超's avatar
邓超 committed
285
  const colorChange = value => {
286 287
    setColor(value);
    form.setFieldsValue({ headerPrimaryColor: value });
邓超's avatar
邓超 committed
288
  };
289 290 291 292 293 294 295 296 297

  const addParama = () => {
    if (!form.getFieldValue('loginTemplate')) {
      notification.error({ message: '提示', duration: 3, description: '请先选择登录模板' });
      return;
    }
    setShowParmarModal(true);
  };

298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319
  const change = e => {
    setVisibleChecked(e);
  };

  const change1 = e => {
    setVisibleChecked1(e);
  };
  const change2 = e => {
    setVisibleChecked2(e);
  };

  const change3 = e => {
    setVisibleChecked3(e);
  };
  const change4 = e => {
    setVisibleChecked4(e);
  };

  const change5 = e => {
    setVisibleChecked5(e);
  };

320 321 322 323
  const change7 = e => {
    setVisibleChecked7(e);
  };

张烨's avatar
张烨 committed
324
  return (
张烨's avatar
张烨 committed
325
    <Drawer
张烨's avatar
张烨 committed
326
      title={isEdit ? '查看/编辑网站配置' : '新增网站'}
327
      width={550}
张烨's avatar
张烨 committed
328 329
      onClose={onClose}
      visible={visible}
330
      destroyOnClose
331 332 333 334 335 336 337 338
      footer={
        <Space>
          <Button onClick={onClose}>取消</Button>
          <Button onClick={onsubmit} type="primary">
            确定
          </Button>
        </Space>
      }
张烨's avatar
张烨 committed
339
    >
340 341 342
      <Form
        form={form}
        labelCol={{ span: 5 }}
343
        wrapperCol={{ span: 19 }}
344 345 346 347 348 349 350 351 352 353
        initialValues={{ remember: true }}
      >
        <Form.Item
          label="标题"
          name="title"
          rules={[
            {
              required: true,
              message: '标题为必填项',
            },
皮倩雯's avatar
皮倩雯 committed
354 355 356 357 358 359 360 361 362 363 364 365
            {
              validator: (rule, value) => {
                let data = form.getFieldValue().title;
                if (keepText.indexOf(data) != -1 && !isEdit) {
                  return Promise.reject('标题已存在');
                }
                if (keepText.indexOf(data) != -1 && data != config.title) {
                  return Promise.reject('标题已存在');
                }
                return Promise.resolve();
              },
            },
366 367 368 369 370 371 372 373
          ]}
        >
          <Input placeholder="请输入标题" autoComplete="off" />
        </Form.Item>
        <Form.Item label="副标题" name="subtitle">
          <Input placeholder="请输入副标题" autoComplete="off" />
        </Form.Item>
        <Form.Item
374
          label="系统Icon"
375 376 377 378 379 380 381 382 383 384 385 386
          name="shortcutIcon"
          style={{ height: '112px' }}
          rules={[
            {
              required: true,
              message: '请选择菜单图标',
            },
          ]}
        >
          <Upload picType="icon" />
        </Form.Item>
        <Form.Item
387
          label="登录Logo"
388 389 390 391 392 393 394 395 396 397 398 399
          name="logo"
          style={{ height: '112px' }}
          rules={[
            {
              required: true,
              message: '请选择图标icon',
            },
          ]}
        >
          <Upload picType="logo" />
        </Form.Item>
        <Form.Item
400
          label="标题Logo"
401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419
          name="bannerLogo"
          style={{ height: '112px' }}
          rules={[
            {
              required: true,
              message: '请选择标题logo',
            },
          ]}
        >
          <Upload picType="logo" />
        </Form.Item>
        <Form.Item
          label="虚拟目录"
          name="client"
          rules={[
            {
              required: true,
              message: '虚拟目录不能为空',
            },
皮倩雯's avatar
皮倩雯 committed
420 421 422 423 424 425 426 427 428 429 430 431
            {
              validator: (rule, value) => {
                let data = form.getFieldValue().client;
                if (data == 'CS') {
                  return Promise.reject('不允许输入CS');
                }
                if (keepValue.indexOf(data) != -1 && !isEdit) {
                  return Promise.reject('虚拟目录已存在');
                }
                return Promise.resolve();
              },
            },
432 433 434 435
          ]}
        >
          <Input autoComplete="off" disabled={isEdit} />
        </Form.Item>
436
        <Form.Item label="登录模板" name="loginTemplate">
437
          <AutoComplete placeholder="请选择登录模板" options={loginPages} allowClear filterOption />
438
        </Form.Item>
邓超's avatar
邓超 committed
439 440 441 442 443 444 445 446 447 448
        <Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
          主页配置
        </Divider>
        <Form.Item label="产品类型" name="productType">
          <Select placeholder="请选择主页产品类型">
            {productList.map(item => (
              <Option value={item.PackageName} key={item.PackageName}>
                {`${item.ProductName}${item.PackageName})`}
              </Option>
            ))}
邓超's avatar
邓超 committed
449 450
          </Select>
        </Form.Item>
邓超's avatar
邓超 committed
451 452 453 454 455 456
        <Form.Item label="主页Url" name="homePage">
          <Input placeholder="请输入主页路径" autoComplete="off" />
        </Form.Item>
        <Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
          主题配置
        </Divider>
457
        {/* <Form.Item name="headerPrimaryColor" label="顶部">
邓超's avatar
邓超 committed
458 459 460
          <div className={styles.colorBox}>
            <div
              className={styles.colorSwatch}
461 462 463
              onClick={e => {
                setDisplayColorPicker(!displayColorPicker);
              }}
邓超's avatar
邓超 committed
464
            >
465
              <div>颜色</div>
邓超's avatar
邓超 committed
466 467
              <div
                style={{
468
                  background: color,
邓超's avatar
邓超 committed
469 470 471 472 473 474 475
                  height: '10px',
                  width: '10px',
                  margin: '10px 0 0 5px',
                }}
              />
            </div>
          </div>
476
        </Form.Item> */}
邓超's avatar
邓超 committed
477
        <Form.Item name="primaryColor" label="主题色">
邓超's avatar
邓超 committed
478 479 480 481 482 483 484 485 486 487 488 489 490 491
          <Select placeholder="请选择颜色">
            {colorList.map(item => (
              <Option value={item.color} key={item.color}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div
                    style={{
                      height: '10px',
                      width: '10px',
                      background: item.color,
                      marginRight: '5px',
                    }}
                  />
                  {`${item.key}${item.color})`}
                </div>
492 493 494 495
              </Option>
            ))}
          </Select>
        </Form.Item>
邓超's avatar
邓超 committed
496
        <Form.Item name="navTheme" label="菜单">
497
          {/* <Radio.Group>
邓超's avatar
邓超 committed
498 499
            <Radio value="dark">暗</Radio>
            <Radio value="light">亮</Radio>
500 501 502 503 504 505 506
          </Radio.Group> */}
          <Switch
            checkedChildren="亮"
            unCheckedChildren="暗"
            checked={visibleChecked}
            onChange={change}
          />
邓超's avatar
邓超 committed
507
        </Form.Item>
邓超's avatar
邓超 committed
508 509 510 511 512 513 514 515

        <Form.Item>
          <Switch
            checked={showAdvanced}
            checkedChildren="高级设置"
            unCheckedChildren="高级设置"
            onChange={() => setShowAdvanced(!showAdvanced)}
          />
516
        </Form.Item>
邓超's avatar
邓超 committed
517
        <div style={{ display: showAdvanced ? 'block' : 'none' }}>
皮倩雯's avatar
皮倩雯 committed
518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533
          <Form.Item
            label={
              <div className={styles.formData_label}>
                <Tooltip
                  title={
                    <span>用于云平台模式,默认云,选择租户会在SaaS访问情况下,展示租户样式</span>
                  }
                  overlayStyle={{ maxWidth: 350 }}
                >
                  <InfoCircleOutlined style={{ color: '#40a9ff', padding: '2px 2px 0 0' }} />
                </Tooltip>
                <span>SaaS样式</span>
              </div>
            }
            name="CloudStyle"
          >
534
            {/* <Radio.Group>
535 536
              <Radio value="是">云</Radio>
              <Radio value="否">租户</Radio>
537 538 539 540 541 542 543
            </Radio.Group> */}
            <Switch
              checkedChildren="云"
              unCheckedChildren="租户"
              checked={visibleChecked1}
              onChange={change1}
            />
544
          </Form.Item>
邓超's avatar
邓超 committed
545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560
          <Form.Item name="topMenu" label="顶部功能">
            <Checkbox
              indeterminate={indeterminate}
              onChange={onCheckAllChange}
              checked={checkAll}
              style={{ marginTop: '5px', display: 'none' }}
            >
              全选
            </Checkbox>
            <CheckboxGroup
              options={plainOptions}
              value={checkedList}
              checked={showAdvanced}
              onChange={onChange}
            />
          </Form.Item>
561
          {/* <Form.Item label="功能标签" name="mdi">
邓超's avatar
邓超 committed
562 563 564 565 566 567 568 569
            <Select placeholder="请选择功能标签">
              <Option value="MDI" key="0">
                多标签模式
              </Option>
              <Option value="SDI" key="1">
                单标签模式
              </Option>
            </Select>
570
          </Form.Item> */}
邓超's avatar
邓超 committed
571 572 573
          <Form.Item label="二维码地址" name="qrcode">
            <Input placeholder="请输入二维码地址" autoComplete="off" />
          </Form.Item>
574
          {/* <Form.Item label="Web4地图" name="hideMap">
575 576 577 578 579 580
            <Switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              checked={visibleChecked2}
              onChange={change2}
            />
581
          </Form.Item> */}
582 583 584 585 586 587 588 589
          <Form.Item label="地图遮罩" name="useCoverMap">
            <Switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              checked={visibleChecked7}
              onChange={change7}
            />
          </Form.Item>
邓超's avatar
邓超 committed
590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609
          <Form.Item
            label={
              <div className={styles.formData_label}>
                <Tooltip
                  title={
                    <span>
                      多人(默认):标记自己的消息,不影响他人接收
                      <br />
                      单人:标记已读,消息不再提醒其他人,主要解决报警过多,通知范围过大的情况
                    </span>
                  }
                  overlayStyle={{ maxWidth: 350 }}
                >
                  <InfoCircleOutlined style={{ color: '#40a9ff', padding: '2px 2px 0 0' }} />
                </Tooltip>
                <span>消息标记</span>
              </div>
            }
            name="messageMarking"
          >
610
            {/* <Radio.Group>
邓超's avatar
邓超 committed
611 612
              <Radio value="All">多人</Radio>
              <Radio value="One">单人</Radio>
613 614 615 616 617 618 619
            </Radio.Group> */}
            <Switch
              checkedChildren="多人"
              unCheckedChildren="单人"
              checked={visibleChecked3}
              onChange={change3}
            />
邓超's avatar
邓超 committed
620 621
          </Form.Item>
          <Form.Item label="语音播报" name="messageVoice">
622
            {/* <Radio.Group>
皮倩雯's avatar
皮倩雯 committed
623
              <Radio value>开启</Radio>
邓超's avatar
邓超 committed
624
              <Radio value={false}>关闭</Radio>
625 626 627 628 629 630 631
            </Radio.Group> */}
            <Switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              checked={visibleChecked4}
              onChange={change4}
            />
邓超's avatar
邓超 committed
632
          </Form.Item>
633
          {/* <Form.Item label="菜单样式" name="menuState">
634 635 636 637 638 639
            <Switch
              checkedChildren="展开"
              unCheckedChildren="折叠"
              checked={visibleChecked5}
              onChange={change5}
            />
640
          </Form.Item> */}
邓超's avatar
邓超 committed
641
        </div>
642
      </Form>
643 644 645 646 647 648
      <ColorLinear
        visible={displayColorPicker}
        color={color}
        onSubumit={colorChange}
        handleCancel={() => setDisplayColorPicker(false)}
      />
649 650 651 652 653 654 655 656 657
      <ParmarModal
        pageUrl={form.getFieldValue('loginTemplate')}
        handleCancel={() => setShowParmarModal(false)}
        visible={showParmarModal}
        parmarCallBack={url => {
          form.setFieldsValue({ loginTemplate: url });
          setShowParmarModal(false);
        }}
      />
张烨's avatar
张烨 committed
658
    </Drawer>
张烨's avatar
张烨 committed
659 660
  );
};