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 */ /* eslint-disable prettier/prettier */
/* /*
* @Title: 引导页模板 * @Title: 引导页模板
...@@ -21,42 +22,52 @@ export const guidePage = [ ...@@ -21,42 +22,52 @@ export const guidePage = [
{ {
label: '集成登录(默认)', label: '集成登录(默认)',
value: 'default', value: 'default',
previewSrc: require('@/assets/images/integration/previewImg/集成登录.png'),
}, },
{ {
label: '集成登录(新)', label: '集成登录(新)',
value: 'integrationNew', value: 'integrationNew',
previewSrc: require('@/assets/images/integration/previewImg/集成登录新.png'),
}, },
{ {
label: '集成登录演示', label: '集成登录演示',
value: 'integration2', value: 'integration2',
previewSrc: require('@/assets/images/integration/previewImg/集成演示.png'),
}, },
{ {
label: '太湖集成登录', label: '太湖集成登录',
value: 'taihuPage', value: 'taihuPage',
previewSrc: require('@/assets/images/integration/previewImg/太湖.png'),
}, },
{ {
label: '吉尔木萨集成登录', label: '吉尔木萨集成登录',
value: 'jimusaerPage', value: 'jimusaerPage',
previewSrc: require('@/assets/images/integration/previewImg/吉木萨尔.png'),
}, },
{ {
label: '宜兴集成登录', label: '宜兴集成登录',
value: 'yixingPage', value: 'yixingPage',
previewSrc: require('@/assets/images/integration/previewImg/宜兴.png'),
}, },
{ {
label: '丹棱集成登录', label: '丹棱集成登录',
value: 'danlingPage', value: 'danlingPage',
previewSrc: require('@/assets/images/integration/previewImg/丹棱.png'),
}, },
{ {
label: '弥勒集成登录', label: '弥勒集成登录',
value: 'milePage', value: 'milePage',
previewSrc: require('@/assets/images/integration/previewImg/弥勒.png'),
}, },
{ {
label: '东营集成登录', label: '东营集成登录',
value: 'dongyingPage', value: 'dongyingPage',
previewSrc: require('@/assets/images/integration/previewImg/东营.png'),
}, },
{ {
label: '钦州集成登录', label: '钦州集成登录',
value: 'qinzhouPage', value: 'qinzhouPage',
previewSrc: require('@/assets/images/integration/previewImg/钦州.png'),
}, },
{ {
label: '演示环境(旧版)', label: '演示环境(旧版)',
......
import React, { useState, useEffect, useMemo, useRef } from 'react'; 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 { 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 { guidePage } from '@/pages/bootpage/template/constants';
import { getImageUrl } from '@/utils/utils'; import { getImageUrl } from '@/utils/utils';
import PreviewModal from './PreviewModal'; import PreviewModal from './PreviewModal';
import styles from '../index.less';
const PUBLISH_SERVICE = '/PandaOMS/OMS'; const PUBLISH_SERVICE = '/PandaOMS/OMS';
const { Item } = Form; const { Item } = Form;
...@@ -31,8 +46,10 @@ const Master = props => { ...@@ -31,8 +46,10 @@ const Master = props => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [form] = Form.useForm(); const [form] = Form.useForm();
const isShowTip = Form.useWatch('isShowTip', form); const isShowTip = Form.useWatch('isShowTip', form);
const displayMode = Form.useWatch('displayMode', form);
const [imageUrl, setImageUrl] = useState(); const [imageUrl, setImageUrl] = useState();
const [previewModal, setPreviewModal] = useState(false); const [previewModal, setPreviewModal] = useState(false);
const [previewVisible, setPreviewVisible] = useState(false);
const optionsTemp = useMemo(() => { const optionsTemp = useMemo(() => {
const oType = guidePage.filter(item => { const oType = guidePage.filter(item => {
...@@ -193,6 +210,31 @@ const Master = props => { ...@@ -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 ( return (
<Modal <Modal
...@@ -271,9 +313,15 @@ const Master = props => { ...@@ -271,9 +313,15 @@ const Master = props => {
</Item> </Item>
</Col> </Col>
</Row> </Row>
<Item label="引导页模板" name="displayMode"> <Row>
<Select placeholder="请选择引导页模板" options={optionsTemp} /> <Col span={18}>
</Item> <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"> <Item label="集成站点" name="client" tooltip="该站点可进入集成登录页,默认为city">
<Input /> <Input />
</Item> </Item>
......
...@@ -138,4 +138,12 @@ ...@@ -138,4 +138,12 @@
.ant-popover-message>.anticon { .ant-popover-message>.anticon {
margin-top: 6px; 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