pref: 集成登录模板配置添加预览图

src/pages/bootpage/template/constants.js

+/* eslint-disable global-require */
 /* eslint-disable prettier/prettier */
 /*
  * @Title: 引导页模板
@@ -21,42 +22,52 @@ export const guidePage = [
   {
     label: '集成登录(默认)',
     value: 'default',
+    previewSrc: require('@/assets/images/integration/previewImg/集成登录.png'),
   },
   {
     label: '集成登录(新)',
     value: 'integrationNew',
+    previewSrc: require('@/assets/images/integration/previewImg/集成登录新.png'),
   },
   {
     label: '集成登录演示',
     value: 'integration2',
+    previewSrc: require('@/assets/images/integration/previewImg/集成演示.png'),
   },
   {
     label: '太湖集成登录',
     value: 'taihuPage',
+    previewSrc: require('@/assets/images/integration/previewImg/太湖.png'),
   },
   {
     label: '吉尔木萨集成登录',
     value: 'jimusaerPage',
+    previewSrc: require('@/assets/images/integration/previewImg/吉木萨尔.png'),
   },
   {
     label: '宜兴集成登录',
     value: 'yixingPage',
+    previewSrc: require('@/assets/images/integration/previewImg/宜兴.png'),
   },
   {
     label: '丹棱集成登录',
     value: 'danlingPage',
+    previewSrc: require('@/assets/images/integration/previewImg/丹棱.png'),
   },
   {
     label: '弥勒集成登录',
     value: 'milePage',
+    previewSrc: require('@/assets/images/integration/previewImg/弥勒.png'),
   },
   {
     label: '东营集成登录',
     value: 'dongyingPage',
+    previewSrc: require('@/assets/images/integration/previewImg/东营.png'),
   },
   {
     label: '钦州集成登录',
     value: 'qinzhouPage',
+    previewSrc: require('@/assets/images/integration/previewImg/钦州.png'),
   },
   {
     label: '演示环境(旧版)',

src/pages/integratedLogin/components/Master.js

 import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { Button, Form, Modal, Input, message, Upload, Select, Col, Row, Switch, InputNumber, Radio } from 'antd';
+import {
+  Button,
+  Form,
+  Modal,
+  Input,
+  message,
+  Upload,
+  Select,
+  Col,
+  Row,
+  Switch,
+  InputNumber,
+  Radio,
+  Tooltip,
+  Image,
+} from 'antd';
 import { appService } from '@/api';
-import { PlusOutlined, LoadingOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { PlusOutlined, LoadingOutlined, EyeOutlined } from '@ant-design/icons';
 import { guidePage } from '@/pages/bootpage/template/constants';
 import { getImageUrl } from '@/utils/utils';
 import PreviewModal from './PreviewModal';
-
+import styles from '../index.less';
 const PUBLISH_SERVICE = '/PandaOMS/OMS';
 
 const { Item } = Form;
@@ -31,8 +46,10 @@ const Master = props => {
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const isShowTip = Form.useWatch('isShowTip', form);
+  const displayMode = Form.useWatch('displayMode', form);
   const [imageUrl, setImageUrl] = useState();
   const [previewModal, setPreviewModal] = useState(false);
+  const [previewVisible, setPreviewVisible] = useState(false);
 
   const optionsTemp = useMemo(() => {
     const oType = guidePage.filter(item => {
@@ -193,6 +210,31 @@ const Master = props => {
       ],
     },
   ];
+  const renderPreview = () => {
+    const src = optionsTemp?.find(item => item.value === displayMode)?.previewSrc;
+    return (
+      <>
+        <Tooltip title={src ? '预览模版' : '暂无预览图'}>
+          <Button style={{ marginLeft: '20px' }} onClick={() => setPreviewVisible(true)} disabled={!src}>
+            <EyeOutlined />
+          </Button>
+        </Tooltip>
+        <Image
+          key={displayMode}
+          width={0}
+          style={{ display: 'none' }}
+          rootClassName="displayModePrefview"
+          preview={{
+            visible: previewVisible,
+            src,
+            onVisibleChange: value => {
+              setPreviewVisible(value);
+            },
+          }}
+        />
+      </>
+    );
+  };
 
   return (
     <Modal
@@ -271,9 +313,15 @@ const Master = props => {
             </Item>
           </Col>
         </Row>
-        <Item label="引导页模板" name="displayMode">
-          <Select placeholder="请选择引导页模板" options={optionsTemp} />
-        </Item>
+        <Row>
+          <Col span={18}>
+            <Item labelCol={{ span: 8 }} label="引导页模板" name="displayMode">
+              <Select placeholder="请选择引导页模板" options={optionsTemp} />
+            </Item>
+          </Col>
+          <Col span={4}>{renderPreview()}</Col>
+        </Row>
+
         <Item label="集成站点" name="client" tooltip="该站点可进入集成登录页，默认为city">
           <Input />
         </Item>

src/pages/integratedLogin/index.less

@@ -138,4 +138,12 @@
 
 .ant-popover-message>.anticon {
   margin-top: 6px;
+}
+
+:global {
+  .displayModePrefview{
+    .@{ant-prefix}-image-preview-img{
+      max-width: 80%;;
+    }
+  }
 }
\ No newline at end of file