Skip to content

C
CivManage
Commit d38dcb94 authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

fix: '修改集成登录路由'

parent 1a3e1d2a
Pipeline #54602 waiting for manual action with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 1203 additions and 8 deletions
          src/pages/platformCenter/integratedLogin/AddModal.jsx 0 → 100644
          View file @ d38dcb94
          /* eslint-disable prefer-template */
          /* eslint-disable react/jsx-boolean-value */
          import React, { useState, useEffect } from 'react';
          import { Form, Modal, Input, notification, Radio, Button, message, Upload, Row, Col } from 'antd';
          import { AddIntegratedLogin, EditIntegratedLogin } from '@/services/integratedLogin/api';
          import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
          import { get, PUBLISH_SERVICE } from '@/services';
          import PreviewModal from './PreviewModal';
          const { Item } = Form;
          const AddModal = props => {
          const { callBackSubmit = () => {}, type, pickItem, visible, onCancel } = props;
          const [loading, setLoading] = useState(false);
          const [radio, setRadio] = useState('');
          const [radio2, setRadio2] = useState('');
          const [flag, setFlag] = useState(1);
          const [form] = Form.useForm();
          const [imageUrl, setImageUrl] = useState();
          const [im, setIm] = useState();
          const [previewModal, setPreviewModal] = useState(false);
          const [keepImgeUrl, setKeepImgeUrl] = useState('');
          useEffect(() => {
          if (visible) {
          if (type === 'edit') {
          console.log(pickItem);
          form.setFieldsValue({
          accountParam: pickItem.AccountParam,
          internetAddress: pickItem.InternetAddress,
          systemClient: pickItem.SystemClient,
          systemName: pickItem.SystemName,
          iconUrl: pickItem.iconUrl,
          subtitle: pickItem.Subtitle,
          });
          if (pickItem.iconUrl) {
          // if (
          // pickItem.iconUrl.startsWith('CityTemp') ||
          // pickItem.iconUrl.startsWith('civ_integratedlogin')
          // ) {
          // setImageUrl(`http://192.168.12.116:8017/${pickItem.iconUrl}`);
          // } else {
          setImageUrl(window.location.origin + `/${pickItem.iconUrl}`);
          setIm(pickItem.iconUrl);
          // }
          } else {
          form.setFieldsValue({ iconUrl: '' });
          setImageUrl('');
          setIm('');
          }
          } else {
          // form.setFieldsValue({ method: 'Get' });
          }
          } else {
          setImageUrl('');
          setIm('');
          setKeepImgeUrl('');
          form.resetFields();
          }
          }, [visible]);
          // 提交
          const onSubmit = () => {
          form.validateFields().then(validate => {
          if (validate) {
          setLoading(true);
          let obj = form.getFieldsValue();
          if (obj.iconUrl.file) {
          obj.iconUrl = obj.iconUrl.file.response.data;
          }
          if (type === 'add') {
          AddIntegratedLogin({
          ...obj,
          accountType: 'Panda',
          })
          .then(res => {
          if (res.code === 0) {
          onCancel();
          setLoading(false);
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: res.msg || '新增成功',
          });
          } else {
          setLoading(false);
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg || '新增失败',
          });
          }
          })
          .catch(err => {
          setLoading(false);
          });
          } else {
          EditIntegratedLogin({
          ...obj,
          accountType: 'Panda',
          id: pickItem.ID,
          })
          .then(res => {
          if (res.code === 0) {
          onCancel();
          setLoading(false);
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: res.msg || '编辑成功',
          });
          } else {
          setLoading(false);
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg || '编辑失败',
          });
          }
          })
          .catch(err => {
          setLoading(false);
          });
          }
          }
          });
          };
          const layout = {
          layout: 'horizontal',
          labelCol: { span: 4 },
          wrapperCol: { span: 18 },
          };
          const onChange2 = e => {
          setRadio2(e.target.value);
          };
          const onChange = e => {
          setRadio(e.target.value);
          };
          const beforeUpload = file => {
          const isJpgOrPng =
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/jpg' ||
          file.type === 'image/gif';
          if (!isJpgOrPng) {
          message.error('只能上传格式为jpeg/png/gif的图片!');
          }
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isLt2M) {
          message.error('图片必须小于2MB!');
          }
          return isJpgOrPng && isLt2M;
          };
          const handleChange = info => {
          setKeepImgeUrl('');
          setIm('');
          if (info.file.status === 'uploading') {
          setLoading(true);
          return;
          }
          if (info.file.status === 'done') {
          getBase64(info.file.originFileObj, url => {
          setLoading(false);
          setImageUrl(url);
          });
          }
          };
          const getBase64 = (img, callback) => {
          const reader = new FileReader();
          reader.addEventListener('load', () => callback(reader.result));
          reader.readAsDataURL(img);
          };
          const uploadButton = (
          <div>
          {loading ? <LoadingOutlined /> : <PlusOutlined />}
          <div
          style={{
          marginTop: 8,
          }}
          >
          上传
          </div>
          </div>
          );
          const pictruePreview = () => {
          setPreviewModal(true);
          };
          const onOk = props => {
          if (props) {
          console.log(props.path);
          console.log(process.env.PROXY);
          setImageUrl(window.location.origin + `/${props.path}`);
          setIm(props.path);
          setKeepImgeUrl(props.path);
          form.setFieldsValue({ iconUrl: `${props.path}` });
          }
          };
          return (
          <Modal
          title={type === 'add' ? '新增集成网站' : '编辑集成网站'}
          style={{ top: '150px' }}
          width="700px"
          destroyOnClose
          maskClosable={false}
          cancelText="取消"
          okText="确认"
          {...props}
          onOk={() => onSubmit()}
          confirmLoading={loading}
          forceRender={true}
          getContainer={false}
          >
          <Form form={form} {...layout}>
          <Item label="名称" name="systemName" rules={[{ required: true, message: '请输入名称' }]}>
          <Input allowClear style={{ width: '100%' }} placeholder="请输入名称" />
          </Item>
          <Item label="标识" name="systemClient" rules={[{ required: true, message: '请输入标识' }]}>
          <Input allowClear placeholder="请输入标识" />
          </Item>
          <Item label="副标题" name="subtitle" rules={[{ required: true, message: '请输入副标题' }]}>
          <Input allowClear placeholder="建议使用英文" />
          </Item>
          {/* <Item
          label="内网地址"
          name="intranetAddress"
          rules={[{ required: true, message: '请输入内网地址' }]}
          >
          <Input allowClear />
          </Item> */}
          <Item
          label="访问地址"
          name="internetAddress"
          rules={[{ required: true, message: '请输入外网地址' }]}
          >
          <Input
          allowClear
          placeholder="示例：http://192.168.12.116:8500/civbase/user/noscret?client=city"
          />
          </Item>
          {/* <Item label="请求方式" name="method">
          <Radio.Group onChange={onChange2} value={radio2}>
          <Radio value="Get">Get</Radio>
          <Radio value="Post">Post</Radio>
          </Radio.Group>
          </Item> */}
          <Item
          label="账号参数"
          name="accountParam"
          rules={[{ required: true, message: '请输入参数' }]}
          >
          <Input allowClear />
          {/* <Radio.Group onChange={onChange} value={radio}>
          <Radio value={0}>使用熊猫身份</Radio>
          <Radio value={1}>使用令牌</Radio>
          </Radio.Group> */}
          </Item>
          <Row>
          <Col span={10}>
          <Item
          label="图标"
          name="iconUrl"
          style={{ height: '112px' }}
          labelCol={{ span: 10 }}
          rules={[
          {
          required: true,
          message: '请选择图标',
          },
          ]}
          >
          <Upload
          name="singleFile"
          listType="picture-card"
          showUploadList={false}
          beforeUpload={beforeUpload}
          action={`${window.location.origin}${PUBLISH_SERVICE}/UploadSingleFile`}
          onChange={handleChange}
          >
          {imageUrl ? (
          <img
          src={imageUrl}
          alt="singleFile"
          style={{
          width: '90%',
          }}
          />
          ) : (
          uploadButton
          )}
          </Upload>
          </Item>
          </Col>
          <Col span={12}>
          <Item>
          <Button type="primary" onClick={pictruePreview} style={{ marginTop: '33px' }}>
          从图片库中选择
          </Button>
          </Item>
          </Col>
          </Row>
          {/* <Item
          label="单点登陆地址"
          name="loginUrl"
          rules={[{ required: true, message: '请输入单点登录地址' }]}
          >
          <Input allowClear />
          </Item> */}
          </Form>
          <PreviewModal
          visible={previewModal}
          onCancel={() => {
          setPreviewModal(false);
          }}
          imageUrl={im}
          keepImgeUrl={keepImgeUrl}
          callBackSubmit={onOk}
          />
          </Modal>
          );
          };
          export default AddModal;
          src/pages/platformCenter/integratedLogin/Integrate.jsx 0 → 100644
          View file @ d38dcb94
          /* eslint-disable prefer-template */
          /* eslint-disable no-undef */
          import React, { useState, useEffect } from 'react';
          import {
          Tooltip,
          Spin,
          Modal,
          Input,
          Space,
          Button,
          Popconfirm,
          Table,
          notification,
          Image,
          } from 'antd';
          import { GetIntegratedLogin, DelIntegratedLogin } from '@/services/integratedLogin/api';
          import { EditTwoTone, DeleteOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
          import styles from './integrate.less';
          import AddModal from './AddModal';
          import Master from './Master';
          const Integrate = () => {
          const [loading, setLoading] = useState(false);
          const [tableData, setTableData] = useState([]);
          const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
          const [searchWord, setSearchWord] = useState(''); // 关键字
          const [flag, setFlag] = useState(0);
          const [addVisible, setAddVisible] = useState(false);
          const [pickItem, setPickItem] = useState('');
          const [type, setType] = useState('');
          const [masterVisible, setMasterVisible] = useState(false);
          const { Search } = Input;
          useEffect(() => {
          getData();
          }, [flag]);
          const columns = [
          {
          title: '序号',
          key: 'id ',
          dataIndex: 'id',
          render: (text, record, index) => (
          <Space>
          <span>{index + 1}</span>
          </Space>
          ),
          width: 60,
          align: 'center',
          },
          {
          title: '名称',
          dataIndex: 'SystemName',
          key: 'SystemName',
          align: 'center',
          ellipsis: true,
          render: (text, record) => (
          <span>
          <Tooltip placement="top" title={text}>
          {searchStyle(text)}
          </Tooltip>
          </span>
          ),
          },
          {
          title: '标识',
          dataIndex: 'SystemClient',
          key: 'SystemClient',
          align: 'center',
          ellipsis: true,
          render: (text, record) => (
          <span>
          <Tooltip placement="top" title={text}>
          {searchStyle(text)}
          </Tooltip>
          </span>
          ),
          },
          // {
          // title: '内网地址',
          // dataIndex: 'IntranetAddress',
          // key: 'IntranetAddress',
          // align: 'center',
          // width: 400,
          // ellipsis: true,
          // render: (text, record) => (
          // <span>
          // <Tooltip placement="top" title={text}>
          // {text}
          // </Tooltip>
          // </span>
          // ),
          // },
          {
          title: '外网地址',
          dataIndex: 'InternetAddress',
          key: 'InternetAddress',
          ellipsis: true,
          align: 'center',
          maxWidth: 600,
          onCell: () => ({
          style: {
          maxWidth: 600,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
          },
          }),
          render: (text, record) => (
          <span>
          <Tooltip placement="top" title={text}>
          {text}
          </Tooltip>
          </span>
          ),
          },
          {
          title: '图标',
          dataIndex: 'iconUrl',
          key: 'iconUrl',
          align: 'center',
          width: 200,
          render: (text, record) => {
          console.log(text);
          if (text) {
          // if (text.startsWith('CityTemp') || text.startsWith('civ_integratedlogin')) {
          // return <Image src={`http://192.168.12.116:8017/${text}`} height="50px" />;
          // } else {
          return <Image src={window.location.origin + `/${text}`} height="50px" />;
          // }
          }
          },
          },
          {
          title: '参数',
          dataIndex: 'AccountParam',
          key: 'AccountParam',
          align: 'center',
          width: 200,
          },
          {
          title: '操作',
          key: 'action',
          width: 100,
          align: 'center',
          render: record => (
          <Space size="middle">
          <Tooltip title="编辑">
          <EditTwoTone onClick={() => edit(record)} style={{ fontSize: '16px' }} />
          </Tooltip>
          <Tooltip title="删除">
          <Popconfirm
          placement="bottomRight"
          title={
          <p>
          即将删除 <span>{record.loginName}</span>
          ，是否确认删除？
          </p>
          }
          okText="确认"
          cancelText="取消"
          onConfirm={() => dele(record)}
          >
          <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
          </Popconfirm>
          </Tooltip>
          </Space>
          ),
          },
          ];
          // 模糊查询匹配的样式
          const searchStyle = val => {
          let n;
          if (showSearchStyle) {
          n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
          } else {
          n = val;
          }
          return <div dangerouslySetInnerHTML={{ __html: n }} />;
          };
          const getData = () => {
          setLoading(true);
          GetIntegratedLogin().then(resnew => {
          if (resnew.code === 0) {
          setTableData(resnew.data);
          } else {
          notification.error({
          message: '获取失败',
          description: resnew.msg,
          });
          }
          setLoading(false);
          });
          };
          const add = () => {
          setType('add');
          setAddVisible(true);
          };
          const edit = e => {
          setType('edit');
          setPickItem(e);
          setAddVisible(true);
          };
          const dele = e => {
          setPickItem(e);
          setLoading(true);
          DelIntegratedLogin({
          ID: e.ID,
          }).then(res => {
          if (res.code === 0) {
          setFlag(flag + 1);
          notification.success({
          message: '删除成功',
          description: res.msg,
          });
          } else {
          notification.error({
          message: '删除失败',
          description: res.msg,
          });
          }
          setLoading(false);
          });
          };
          const submitSearch = () => {
          setLoading(true);
          GetIntegratedLogin({ searchKey: searchWord }).then(resnew => {
          if (resnew.code === 0) {
          setTableData(resnew.data);
          setShowSearchStyle(true);
          } else {
          notification.error({
          message: '获取失败',
          description: resnew.msg,
          });
          }
          setLoading(false);
          });
          };
          const handleReset = () => {
          setSearchWord('');
          setShowSearchStyle(false);
          setLoading(true);
          GetIntegratedLogin({ searchKey: '' }).then(resnew => {
          if (resnew.code === 0) {
          setTableData(resnew.data);
          } else {
          notification.error({
          message: '获取失败',
          description: resnew.msg,
          });
          }
          setLoading(false);
          });
          };
          const handleSearch = e => {
          setSearchWord(e.target.value);
          };
          const onSubmit = () => {
          setFlag(flag + 1);
          };
          const masterStation = () => {
          setMasterVisible(true);
          };
          return (
          <div className={styles.Integrate}>
          <div className={styles.head}>
          <div className={styles.head1}>
          <span>快速搜索：</span>
          <Search
          style={{ width: 260 }}
          placeholder="请输入名称，标识"
          onSearch={submitSearch}
          onChange={e => handleSearch(e)}
          enterButton
          value={searchWord}
          />
          <Button icon={<SyncOutlined />} onClick={handleReset} style={{ marginLeft: '20px' }}>
          重置
          </Button>
          <Button
          icon={<PlusOutlined className={styles.icon} />}
          onClick={add}
          style={{
          verticalAlign: 'middle',
          marginLeft: '40px',
          }}
          >
          新增
          </Button>
          </div>
          <Button
          type="primary"
          onClick={masterStation}
          style={{
          float: 'right',
          verticalAlign: 'middle',
          }}
          >
          集成登录网站配置
          </Button>
          </div>
          <Spin spinning={loading} tip="loading">
          <div className={styles.table}>
          <Table
          size="small"
          bordered
          rowKey={record => record.Id}
          columns={columns}
          dataSource={tableData}
          scroll={{ y: 'calc(100vh - 200px)', x: 'max-content' }}
          onRow={record => ({
          onDoubleClick: event => {
          event.stopPropagation();
          edit(record);
          }, // 双击
          })}
          pagination={false}
          />
          </div>
          </Spin>
          <AddModal
          visible={addVisible}
          pickItem={pickItem}
          onCancel={() => setAddVisible(false)}
          type={type}
          callBackSubmit={onSubmit}
          />
          <Master visible={masterVisible} onCancel={() => setMasterVisible(false)} />
          </div>
          );
          };
          export default Integrate;
          src/pages/platformCenter/integratedLogin/Master.jsx 0 → 100644
          View file @ d38dcb94
          /* eslint-disable prefer-template */
          /* eslint-disable react/jsx-boolean-value */
          import React, { useState, useEffect } from 'react';
          import { Form, Modal, Input, notification, Button, message, Upload, Select, Col, Row } from 'antd';
          import {
          AddIntegratedloginSetting,
          GetIntegratedloginSetting,
          } from '@/services/integratedLogin/api';
          import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
          import { get, PUBLISH_SERVICE } from '@/services';
          import PreviewModal from './PreviewModal';
          const { Item } = Form;
          const { Option } = Select;
          const colorList = [
          {
          key: '科技蓝',
          color: '#0087F7',
          headerColor: 'linear-gradient(0deg, #0066D6 0%, #39A9FF 100%)',
          },
          {
          key: '环保绿',
          color: '#009C73',
          headerColor: 'linear-gradient(0deg, #00845D 0%, #02BF87 100%)',
          },
          // {
          // key: '清澈蓝',
          // color: '#1890FF',
          // headerColor: '#1890FF',
          // },
          ];
          const Master = props => {
          const { callBackSubmit = () => {}, visible, onCancel } = props;
          const [loading, setLoading] = useState(false);
          const [form] = Form.useForm();
          const [imgBed, setImgBed] = useState();
          const [imageUrl, setImageUrl] = useState();
          const [im, setIm] = useState();
          const [previewModal, setPreviewModal] = useState(false);
          const [keepImgeUrl, setKeepImgeUrl] = useState('');
          useEffect(() => {
          if (visible) {
          GetIntegratedloginSetting().then(res => {
          if (res.code === 0) {
          console.log(res.data);
          form.setFieldsValue(res.data);
          setImageUrl(window.location.origin + `/${res.data.logo}`);
          setIm(res.data.logo);
          } else {
          form.setFieldsValue({
          primaryColor: '#0087F7',
          });
          }
          });
          } else {
          setImageUrl('');
          setIm('');
          setKeepImgeUrl('');
          form.resetFields();
          }
          }, [visible]);
          // 提交
          const onSubmit = () => {
          let obj = form.getFieldsValue();
          console.log(obj);
          form.validateFields().then(validate => {
          if (validate) {
          AddIntegratedloginSetting({
          ...obj,
          })
          .then(res => {
          if (res.code === 0) {
          onCancel();
          callBackSubmit();
          notification.success({
          message: '提示',
          duration: 3,
          description: res.msg || '操作成功',
          });
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: res.msg || '操作失败',
          });
          }
          })
          .catch(err => {
          console.log(err);
          });
          }
          });
          };
          const layout = {
          layout: 'horizontal',
          labelCol: { span: 4 },
          wrapperCol: { span: 18 },
          };
          const beforeUpload = file => {
          const isJpgOrPng =
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/jpg' ||
          file.type === 'image/gif';
          if (!isJpgOrPng) {
          message.error('只能上传格式为jpeg/png/gif的图片!');
          }
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isLt2M) {
          message.error('图片必须小于2MB!');
          }
          return isJpgOrPng && isLt2M;
          };
          const handleChange = info => {
          setKeepImgeUrl('');
          setIm('');
          if (info.file.status === 'uploading') {
          setLoading(true);
          return;
          }
          if (info.file.status === 'done') {
          getBase64(info.file.originFileObj, url => {
          setLoading(false);
          setImageUrl(url);
          });
          }
          };
          const getBase64 = (img, callback) => {
          const reader = new FileReader();
          reader.addEventListener('load', () => callback(reader.result));
          reader.readAsDataURL(img);
          };
          const uploadButton = (
          <div>
          {loading ? <LoadingOutlined /> : <PlusOutlined />}
          <div
          style={{
          marginTop: 8,
          }}
          >
          上传
          </div>
          </div>
          );
          const pictruePreview = () => {
          setPreviewModal(true);
          };
          const onOk = props => {
          if (props) {
          setImageUrl(window.location.origin + `/${props.path}`);
          setIm(props.path);
          setKeepImgeUrl(props.path);
          form.setFieldsValue({ logo: `${props.path}` });
          }
          };
          return (
          <Modal
          title="集成登录网站配置"
          style={{ top: '150px' }}
          width="700px"
          destroyOnClose
          maskClosable={false}
          cancelText="取消"
          okText="确认"
          {...props}
          onOk={() => onSubmit()}
          forceRender={true}
          getContainer={false}
          >
          <Form form={form} {...layout}>
          <Item
          label="标题"
          name="title"
          rules={[
          {
          required: true,
          message: '标题为必填项',
          },
          ]}
          >
          <Input placeholder="请输入标题" autoComplete="off" />
          </Item>
          <Item
          label="副标题"
          name="subtitle"
          rules={[
          {
          required: true,
          message: '标题为必填项',
          },
          ]}
          >
          <Input placeholder="请输入副标题" autoComplete="off" />
          </Item>
          <Row>
          <Col span={10}>
          <Item
          label="登录Logo"
          name="logo"
          style={{ height: '112px' }}
          labelCol={{ span: 10 }}
          rules={[
          {
          required: true,
          message: '请选择图标icon',
          },
          ]}
          >
          <Upload
          name="singleFile"
          listType="picture-card"
          className="avatar-uploader"
          showUploadList={false}
          beforeUpload={beforeUpload}
          action={`${window.location.origin}${PUBLISH_SERVICE}/UploadSingleFile`}
          onChange={handleChange}
          >
          {imageUrl ? (
          <img
          src={imageUrl}
          alt="singleFile"
          style={{
          width: '90%',
          }}
          />
          ) : (
          uploadButton
          )}
          </Upload>
          </Item>
          </Col>
          <Col span={12}>
          <Item>
          <Button type="primary" onClick={pictruePreview} style={{ marginTop: '33px' }}>
          从图片库中选择
          </Button>
          </Item>
          </Col>
          </Row>
          <Item name="primaryColor" label="主题色">
          <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>
          </Option>
          ))}
          </Select>
          </Item>
          </Form>
          <PreviewModal
          visible={previewModal}
          onCancel={() => {
          setPreviewModal(false);
          }}
          imageUrl={im}
          keepImgeUrl={keepImgeUrl}
          callBackSubmit={onOk}
          />
          </Modal>
          );
          };
          export default Master;
          src/pages/platformCenter/integratedLogin/PreviewModal.jsx 0 → 100644
          View file @ d38dcb94
          /* eslint-disable no-lonely-if */
          /* eslint-disable no-unused-expressions */
          /* eslint-disable prefer-template */
          /* eslint-disable react/jsx-boolean-value */
          import React, { useState, useEffect } from 'react';
          import { Modal, Collapse, notification } from 'antd';
          import { GetIntegratedloginIcon } from '@/services/integratedLogin/api';
          import { CheckCircleTwoTone } from '@ant-design/icons';
          import styles from './integrate.less';
          import classnames from 'classnames';
          const { Panel } = Collapse;
          import { isDev } from '@/utils/tools';
          const PreviewModal = props => {
          const { callBackSubmit = () => {}, visible, onCancel, imageUrl, keepImgeUrl } = props;
          const [imgData, setImgData] = useState([]);
          const [pickItem, setPickItem] = useState('');
          const [keepItem, setKeepItem] = useState('');
          const [keepGroupName, setKeepGroupName] = useState([]);
          useEffect(() => {
          console.log(process.env, 'process.env.PROXY');
          setPickItem('');
          setKeepItem('');
          update();
          if (!visible) {
          setPickItem('');
          setKeepItem('');
          }
          }, [visible]);
          const update = () => {
          GetIntegratedloginIcon()
          .then(res => {
          if (res.code === 0) {
          let bb = [];
          let aa = [];
          res.data.map((i, a) => {
          if (i.files.length > 0) {
          bb.push(i);
          aa.push(i.groupName);
          }
          });
          setKeepGroupName(aa);
          setImgData(bb);
          res.data.map(i => {
          i.files.map((j, index) => {
          if (keepImgeUrl) {
          if (j.path == keepImgeUrl) {
          setKeepItem(i.groupName);
          setPickItem(index);
          }
          } else {
          if (j.path == imageUrl) {
          setKeepItem(i.groupName);
          setPickItem(index);
          }
          }
          });
          });
          } else {
          notification.error({
          message: '获取失败',
          description: res.msg,
          });
          }
          })
          .catch(err => {
          console.error(err);
          });
          };
          // 提交
          const onSubmit = () => {
          if (keepItem) {
          let aa = imgData.find(i => i.groupName === keepItem);
          callBackSubmit(aa.files[pickItem]);
          }
          onCancel();
          };
          const handleCollapseChange = key => {
          setKeepGroupName(key);
          };
          return (
          <Modal
          title="图片库"
          style={{ top: '100px' }}
          width="1000px"
          destroyOnClose
          maskClosable={false}
          cancelText="取消"
          okText="确认"
          {...props}
          onOk={() => onSubmit()}
          forceRender={true}
          getContainer={false}
          >
          <Collapse
          style={{ height: '600px', overflow: 'scroll' }}
          bordered={false}
          activeKey={keepGroupName}
          onChange={handleCollapseChange}
          >
          {imgData.map((i, j) => {
          return (
          <Panel
          header={i.groupName}
          key={i.groupName}
          style={{
          marginBottom: '24px',
          overflow: 'hidden',
          border: '0px',
          background: '#f7f7f7',
          borderRadius: '2px',
          }}
          >
          {i.files.map((k, index) => {
          return (
          // <Image
          // src={`${isDev ? process.env.PROXY : window.location.origin}${k}`}
          // height="100px"
          // />
          <div className={styles.divItem} key={index}>
          <CheckCircleTwoTone
          className={classnames({
          [styles.iconHidden]: index !== pickItem || i.groupName !== keepItem,
          [styles.iconItem]: index === pickItem && i.groupName === keepItem,
          })}
          />
          <img
          src={window.location.origin + `/${k.path}`}
          className={classnames({
          [styles.imgHidden]: index !== pickItem || i.groupName !== keepItem,
          [styles.imgItem]: index === pickItem && i.groupName === keepItem,
          })}
          height="80px"
          width="80px"
          alt="集成登录默认"
          onClick={e => {
          setPickItem(index);
          setKeepItem(i.groupName);
          }}
          />
          <div style={{ textAlign: 'center' }}>
          <p>{k.name}</p>
          </div>
          </div>
          );
          })}
          </Panel>
          );
          })}
          </Collapse>
          </Modal>
          );
          };
          export default PreviewModal;
          src/pages/platformCenter/integratedLogin/integrate.less 0 → 100644
          View file @ d38dcb94
          .Integrate {
          .ant-table-pagination.ant-pagination {
          margin: 2px 0;
          }
          .head {
          padding: 10px;
          background: white;
          margin-bottom: 2px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          .head1 {
          display: flex;
          align-items: center;
          }
          }
          .divItem {
          display: inline-block;
          margin-left: 30px;
          margin-bottom: 30px;
          }
          .imgItem {
          border: 3px solid rgb(24, 144, 255);
          box-sizing: border-box;
          border-radius: 5px;
          display: inline-block;
          }
          .imgHidden {
          border: none;
          display: inline-block;
          }
          .imgHidden:hover {
          border: 3px solid rgb(24, 144, 255);
          box-sizing: border-box;
          border-radius: 5px;
          display: inline-block;
          }
          .iconItem {
          position: absolute;
          margin-left: 70px;
          margin-top: -3px;
          font-size: 17px;
          }
          .iconHidden {
          display: none;
          }
          .iconHidden:hover {
          position: absolute;
          margin-left: 70px;
          margin-top: -3px;
          font-size: 17px;
          }
          .table {
          background-color: white;
          height: calc(100vh - 130px);
          margin-top: 10px;
          overflow-y: scroll;
          }
          .ant-card-body {
          padding: 0px 24px 24px 17px;
          }
          .sel {
          width: 200px;
          }
          .icon {
          margin-top: -5px !important;
          vertical-align: text-bottom;
          }
          .redText {
          color: red;
          }
          }
          .ant-popover-message > .anticon {
          margin-top: 6px;
          }
          src/routes/config.js
          View file @ d38dcb94
          ......@@ -30,8 +30,6 @@ import RoleManage from '@/pages/userCenter/roleManage/RoleManage';
          import SiteManage from '@/pages/userCenter/siteManage/SiteManage';
          // 数据中心
          import Dictionary from '@/pages/dataCenter/dictionary';
          // 集成登录
          import IntegratedLogin from '@/pages/integratedLogin/Integrate';
          // 组态平台
          ......@@ -43,6 +41,7 @@ import SchemeDetail from '@/pages/platformCenter/messageManage/schemeDetail/sche
          import HostManager from '@/pages/platformCenter/hostmanager';
          import VideoManager from '@/pages/platformCenter/videoManager';
          import BaseFrameContainer from '@/pages/platformCenter/baseFrameContainer';
          import IntegratedLogin from '@/pages/platformCenter/integratedLogin/integrate';
          // 业务中心
          import TableManager from '@/pages/bsmanager/base/tablemanager';
          import FiledConfig from '@/pages/bsmanager/base/tablemanager/filedConfig/filedConfig';
          ......@@ -332,14 +331,13 @@ export default {
          url: '/web4/?widget=product/oms/MqttConfig/MqttConfig.js|hideMap=true',
          component: HostManager,
          },
          {
          path: '/platform/integrate',
          name: '集成登录',
          component: IntegratedLogin,
          },
          ],
          },
          {
          path: '/login/integrate',
          name: '集成登录',
          icon: <HomeOutlined style={iconStyle} />,
          component: IntegratedLogin,
          },
          {
          path: '/data/dic',
          name: '数据字典',
          ......
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment