Commit b7d7562d authored by 周宏民's avatar 周宏民

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

parent 5a17dd19
Pipeline #94019 waiting for manual action with stages
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
/* 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: '演示环境(旧版)',
......
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>
......
......@@ -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
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