siteConfigDrawer.js 16.7 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
  useEffect(() => {
皮倩雯's avatar
皮倩雯 committed
74
    console.log(webs);
75
    onGetLoginPages();
皮倩雯's avatar
皮倩雯 committed
76
    console.log(productList);
77
    console.log(isEdit);
皮倩雯's avatar
皮倩雯 committed
78 79 80 81 82 83 84 85
    let text = [];
    let value = [];
    webs.map(i => {
      text.push(i.text);
      value.push(i.subSystemValue);
    });
    setKeepText(text);
    setKeepValue(value);
86
    if (isEdit) {
皮倩雯's avatar
皮倩雯 committed
87 88 89
      console.log(config);
      if (config != null && config.topMenu) {
        console.log(config);
90 91 92 93 94 95
        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
96
              config.topMenu.split(',').length < plainOptions.length,
97 98 99 100 101 102 103 104 105 106
          );
        }

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

112 113 114 115 116
  useEffect(() => {
    if (visible) {
      if (isEdit) {
        // 获取表单回显
        console.log(config, 'config');
邓超's avatar
邓超 committed
117 118
        form.setFieldsValue({
          ...config,
邓超's avatar
邓超 committed
119
          primaryColor: config.primaryColor ? config.primaryColor : '#0087F7',
120
          navTheme: config.navTheme ? config.navTheme : 'dark',
121
          CloudStyle: config.CloudStyle ? config.CloudStyle : '是',
邓超's avatar
邓超 committed
122 123 124
          headerPrimaryColor: config.headerPrimaryColor
            ? config.headerPrimaryColor
            : 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
邓超's avatar
邓超 committed
125
        });
邓超's avatar
邓超 committed
126 127 128 129 130
        setColor(
          config.headerPrimaryColor
            ? config.headerPrimaryColor
            : 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
        );
131
      } else {
邓超's avatar
邓超 committed
132
        setColor('linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)');
邓超's avatar
邓超 committed
133
        form.setFieldsValue({
134 135 136
          shortcutIcon: 'assets\\images\\icon\\熊猫-蓝色.png',
          logo: 'assets\\images\\logo\\熊猫-蓝绿色.svg',
          bannerLogo: 'assets\\images\\logo\\熊猫-白色.svg',
皮倩雯's avatar
皮倩雯 committed
137
          title: '新网站',
邓超's avatar
邓超 committed
138 139
          messageMarking: 'All',
          messageVoice: true,
140
          menuState: 'open',
141
          hideMap: false,
142
          loginTemplate: 'Dark',
邓超's avatar
邓超 committed
143
          primaryColor: '#0087F7',
144
          navTheme: 'dark',
145
          CloudStyle: '是',
邓超's avatar
邓超 committed
146
          headerPrimaryColor: 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
邓超's avatar
邓超 committed
147
        });
148 149
      }
    } else {
邓超's avatar
邓超 committed
150
      setShowAdvanced(false);
151 152 153 154 155 156
      form.resetFields();
    }
  }, [visible]);
  const onGetLoginPages = () => {
    if (loginPages.length === 0) {
      getLoginPage().then(res => {
157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176
        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);
177 178 179
      });
    }
  };
180 181 182 183 184 185 186 187 188 189 190 191 192 193 194
  const renderItem = title => ({
    value: title,
    label: (
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
        }}
      >
        {title}
      </div>
    ),
  });
  // 登录搜索头部
  const renderTitle = title => <span>{title}</span>;
195 196
  const onsubmit = () => {
    form.validateFields().then(validate => {
197 198
      console.log(validate);
      console.log(checkedList);
皮倩雯's avatar
皮倩雯 committed
199 200 201 202 203 204 205 206
      // if (checkedList.find(i => i == '首页') && !validate.homePage) {
      //   notification.warning({
      //     message: '提示',
      //     duration: 3,
      //     description: '功能配置勾选首页时主页Url必填',
      //   });
      //   return;
      // }
207 208
      validate.topMenu = checkedList.toString();
      console.log(validate);
209
      if (validate) {
邓超's avatar
邓超 committed
210
        const colorIndex = colorList.findIndex(item => item.color === validate.primaryColor);
211 212
        onOk({
          ...validate,
邓超's avatar
邓超 committed
213
          headerPrimaryColor: colorList[colorIndex].headerColor,
214 215 216 217 218 219
          mode: 'single',
          menu: 'banner-left',
        });
      }
    });
  };
220 221 222 223 224 225 226 227

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

  const onChange = list => {
228 229
    console.log(checkedList);
    console.log(list);
230 231 232 233
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };
邓超's avatar
邓超 committed
234
  const colorChange = value => {
235 236 237
    console.log(value, 'value');
    setColor(value);
    form.setFieldsValue({ headerPrimaryColor: value });
邓超's avatar
邓超 committed
238
  };
239 240 241 242 243 244 245 246 247 248

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

张烨's avatar
张烨 committed
249
  return (
张烨's avatar
张烨 committed
250
    <Drawer
张烨's avatar
张烨 committed
251
      title={isEdit ? '查看/编辑网站配置' : '新增网站'}
252
      width={550}
张烨's avatar
张烨 committed
253 254
      onClose={onClose}
      visible={visible}
255
      destroyOnClose
256 257 258 259 260 261 262 263
      footer={
        <Space>
          <Button onClick={onClose}>取消</Button>
          <Button onClick={onsubmit} type="primary">
            确定
          </Button>
        </Space>
      }
张烨's avatar
张烨 committed
264
    >
265 266 267
      <Form
        form={form}
        labelCol={{ span: 5 }}
268
        wrapperCol={{ span: 19 }}
269 270 271 272 273 274 275 276 277 278
        initialValues={{ remember: true }}
      >
        <Form.Item
          label="标题"
          name="title"
          rules={[
            {
              required: true,
              message: '标题为必填项',
            },
皮倩雯's avatar
皮倩雯 committed
279 280 281 282 283 284 285 286 287 288 289 290
            {
              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();
              },
            },
291 292 293 294 295 296 297 298
          ]}
        >
          <Input placeholder="请输入标题" autoComplete="off" />
        </Form.Item>
        <Form.Item label="副标题" name="subtitle">
          <Input placeholder="请输入副标题" autoComplete="off" />
        </Form.Item>
        <Form.Item
299
          label="系统Icon"
300 301 302 303 304 305 306 307 308 309 310 311
          name="shortcutIcon"
          style={{ height: '112px' }}
          rules={[
            {
              required: true,
              message: '请选择菜单图标',
            },
          ]}
        >
          <Upload picType="icon" />
        </Form.Item>
        <Form.Item
312
          label="登录Logo"
313 314 315 316 317 318 319 320 321 322 323 324
          name="logo"
          style={{ height: '112px' }}
          rules={[
            {
              required: true,
              message: '请选择图标icon',
            },
          ]}
        >
          <Upload picType="logo" />
        </Form.Item>
        <Form.Item
325
          label="标题Logo"
326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344
          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
345 346 347 348 349 350 351 352 353 354 355 356
            {
              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();
              },
            },
357 358 359 360
          ]}
        >
          <Input autoComplete="off" disabled={isEdit} />
        </Form.Item>
361
        <Form.Item label="登录模板" name="loginTemplate">
362
          <AutoComplete placeholder="请选择登录模板" options={loginPages} allowClear />
363
        </Form.Item>
邓超's avatar
邓超 committed
364 365 366 367 368 369 370 371 372 373
        <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
374 375
          </Select>
        </Form.Item>
邓超's avatar
邓超 committed
376 377 378 379 380 381
        <Form.Item label="主页Url" name="homePage">
          <Input placeholder="请输入主页路径" autoComplete="off" />
        </Form.Item>
        <Divider orientation="left" style={{ borderTopColor: '#99bbe8' }}>
          主题配置
        </Divider>
382
        {/* <Form.Item name="headerPrimaryColor" label="顶部">
邓超's avatar
邓超 committed
383 384 385
          <div className={styles.colorBox}>
            <div
              className={styles.colorSwatch}
386 387 388
              onClick={e => {
                setDisplayColorPicker(!displayColorPicker);
              }}
邓超's avatar
邓超 committed
389
            >
390
              <div>颜色</div>
邓超's avatar
邓超 committed
391 392
              <div
                style={{
393
                  background: color,
邓超's avatar
邓超 committed
394 395 396 397 398 399 400
                  height: '10px',
                  width: '10px',
                  margin: '10px 0 0 5px',
                }}
              />
            </div>
          </div>
401
        </Form.Item> */}
邓超's avatar
邓超 committed
402
        <Form.Item name="primaryColor" label="主题色">
邓超's avatar
邓超 committed
403 404 405 406 407 408 409 410 411 412 413 414 415 416
          <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>
417 418 419 420
              </Option>
            ))}
          </Select>
        </Form.Item>
邓超's avatar
邓超 committed
421 422 423 424 425 426
        <Form.Item name="navTheme" label="菜单">
          <Radio.Group>
            <Radio value="dark"></Radio>
            <Radio value="light"></Radio>
          </Radio.Group>
        </Form.Item>
邓超's avatar
邓超 committed
427 428 429 430 431 432 433 434

        <Form.Item>
          <Switch
            checked={showAdvanced}
            checkedChildren="高级设置"
            unCheckedChildren="高级设置"
            onChange={() => setShowAdvanced(!showAdvanced)}
          />
435
        </Form.Item>
邓超's avatar
邓超 committed
436
        <div style={{ display: showAdvanced ? 'block' : 'none' }}>
皮倩雯's avatar
皮倩雯 committed
437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452
          <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"
          >
453 454 455 456 457
            <Radio.Group>
              <Radio value="是"></Radio>
              <Radio value="否">租户</Radio>
            </Radio.Group>
          </Form.Item>
邓超's avatar
邓超 committed
458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473
          <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>
474
          {/* <Form.Item label="功能标签" name="mdi">
邓超's avatar
邓超 committed
475 476 477 478 479 480 481 482
            <Select placeholder="请选择功能标签">
              <Option value="MDI" key="0">
                多标签模式
              </Option>
              <Option value="SDI" key="1">
                单标签模式
              </Option>
            </Select>
483
          </Form.Item> */}
邓超's avatar
邓超 committed
484 485 486 487 488 489
          <Form.Item label="二维码地址" name="qrcode">
            <Input placeholder="请输入二维码地址" autoComplete="off" />
          </Form.Item>
          <Form.Item label="Web4地图" name="hideMap">
            <Radio.Group>
              <Radio value={false}>开启</Radio>
皮倩雯's avatar
皮倩雯 committed
490
              <Radio value>关闭</Radio>
邓超's avatar
邓超 committed
491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519
            </Radio.Group>
          </Form.Item>
          <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"
          >
            <Radio.Group>
              <Radio value="All">多人</Radio>
              <Radio value="One">单人</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="语音播报" name="messageVoice">
            <Radio.Group>
皮倩雯's avatar
皮倩雯 committed
520
              <Radio value>开启</Radio>
邓超's avatar
邓超 committed
521 522 523
              <Radio value={false}>关闭</Radio>
            </Radio.Group>
          </Form.Item>
524
          <Form.Item label="菜单样式" name="menuState">
525
            <Radio.Group>
526 527
              <Radio value="open">展开</Radio>
              <Radio value="close">折叠</Radio>
528 529
            </Radio.Group>
          </Form.Item>
邓超's avatar
邓超 committed
530
        </div>
531
      </Form>
532 533 534 535 536 537
      <ColorLinear
        visible={displayColorPicker}
        color={color}
        onSubumit={colorChange}
        handleCancel={() => setDisplayColorPicker(false)}
      />
538 539 540 541 542 543 544 545 546
      <ParmarModal
        pageUrl={form.getFieldValue('loginTemplate')}
        handleCancel={() => setShowParmarModal(false)}
        visible={showParmarModal}
        parmarCallBack={url => {
          form.setFieldsValue({ loginTemplate: url });
          setShowParmarModal(false);
        }}
      />
张烨's avatar
张烨 committed
547
    </Drawer>
张烨's avatar
张烨 committed
548 549
  );
};