pageheader2
This commit is contained in:
parent
bd681dddef
commit
0aac7f3645
|
|
@ -1,9 +1,9 @@
|
|||
export default OakComponent({
|
||||
isList: false,
|
||||
data: {
|
||||
slideWidth: 0,
|
||||
slideLeft: 0,
|
||||
slideShow: false,
|
||||
slideWidth: 0, //小程序使用
|
||||
slideLeft: 0, //小程序使用
|
||||
slideShow: false, //小程序使用
|
||||
commonAction: [
|
||||
'create',
|
||||
'update',
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default OakComponent({
|
|||
let currentUrl = event.currentTarget.dataset.src;
|
||||
let urlList = event.currentTarget.dataset.list;
|
||||
wx.previewImage({
|
||||
current: currentUrl,
|
||||
current: currentUrl, // 当前显示图片的http链接
|
||||
urls: urlList, // 需要预览的图片http链接列表
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ export default OakComponent({
|
|||
attribute: {},
|
||||
options: [],
|
||||
inputType: '',
|
||||
timeStartStr: '',
|
||||
timeStartStr: '', // 小程序选择时间显示
|
||||
timeEndStr: '',
|
||||
selectedLabel: '',
|
||||
minDateMp: new Date(1980, 1, 1).getTime(),
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import React, { useState } from 'react';
|
||||
import styles from './index.module.less';
|
||||
import { Space, Checkbox, Divider, Modal, Image } from 'antd';
|
||||
import { Space, Checkbox, Divider, Image } from 'antd';
|
||||
import { EyeOutlined, } from '@ant-design/icons';
|
||||
const { confirm } = Modal;
|
||||
function MaskView(props) {
|
||||
const { selected, onClick, setVisibleTrue } = props;
|
||||
return (<div className={selected ? styles['mask-checked'] : styles.mask} onClick={onClick}>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
/// <reference types="react" />
|
||||
import { EntityDict } from 'oak-domain/lib/types/Entity';
|
||||
import { EntityDict as BaseEntityDict } from 'oak-domain/lib/base-app-domain';
|
||||
import { ReactComponentProps } from '../../types/Page';
|
||||
declare const _default: <ED2 extends EntityDict & BaseEntityDict, T2 extends keyof ED2>(props: ReactComponentProps<ED2, T2, false, {
|
||||
style?: import("react").CSSProperties | undefined;
|
||||
className?: string | undefined;
|
||||
showHeader?: boolean | undefined;
|
||||
showBack?: boolean | undefined;
|
||||
onBack?: (() => void) | undefined;
|
||||
backIcon?: React.ReactNode;
|
||||
delta?: number | undefined;
|
||||
title?: React.ReactNode;
|
||||
subTitle?: React.ReactNode;
|
||||
tags?: React.ReactNode;
|
||||
extra?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
content: React.ReactNode;
|
||||
}>) => React.ReactElement;
|
||||
export default _default;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
export default OakComponent({
|
||||
isList: false,
|
||||
methods: {
|
||||
goBack(delta) {
|
||||
this.navigateBack(delta);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
.oak-new-pageHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&-header {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
min-height: inherit;
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
color: #000;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-back {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: color .3s;
|
||||
color: #000;
|
||||
border: 0px;
|
||||
background: transparent;
|
||||
padding: 0px;
|
||||
line-height: inherit;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-backIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-right: 20px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
&-subTitle {
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&-back {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
&-extra {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 12px 12px 12px 12px;
|
||||
|
||||
padding: 16px 32px;
|
||||
}
|
||||
|
||||
&-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin: 0px 12px 12px 12px;
|
||||
|
||||
background: var(--oak-bg-color-container);
|
||||
box-shadow: 0 2px 3px #0000001a;
|
||||
border-radius: 3px;
|
||||
padding: 30px 32px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import { WebComponentProps } from '../../types/Page';
|
||||
import { EntityDict } from 'oak-domain/lib/types/Entity';
|
||||
import { EntityDict as BaseEntityDict } from 'oak-domain/lib/base-app-domain';
|
||||
import './index.less';
|
||||
type PageHeaderProps = {
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
showHeader?: boolean;
|
||||
showBack?: boolean;
|
||||
onBack?: () => void;
|
||||
backIcon?: React.ReactNode;
|
||||
delta?: number;
|
||||
title?: React.ReactNode;
|
||||
subTitle?: React.ReactNode;
|
||||
tags?: React.ReactNode;
|
||||
extra?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
content?: React.ReactNode;
|
||||
};
|
||||
type ED = EntityDict & BaseEntityDict;
|
||||
export default function Render(props: WebComponentProps<ED, keyof ED, false, PageHeaderProps, {
|
||||
goBack: (delta?: number) => void;
|
||||
}>): React.JSX.Element;
|
||||
export {};
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import classNames from 'classnames';
|
||||
import './index.less';
|
||||
export default function Render(props) {
|
||||
const { style, className, showHeader = true, showBack = false, onBack, backIcon, delta, title, subTitle, extra, tags, children, content,
|
||||
// contentStyle,
|
||||
// contentClassName,
|
||||
// bodyStyle,
|
||||
// bodyClassName,
|
||||
} = props.data;
|
||||
const { t, goBack } = props.methods;
|
||||
const prefixCls = 'oak-new';
|
||||
return (<div style={style} className={classNames(`${prefixCls}-pageHeader`, className)}>
|
||||
{showHeader && (title || showBack || subTitle || tags || extra) && (<div className={`${prefixCls}-pageHeader-header`}>
|
||||
<div className={`${prefixCls}-pageHeader-header-left`}>
|
||||
{showBack && (<Button type="text" className={`${prefixCls}-pageHeader-header-back`} onClick={() => {
|
||||
if (typeof onBack === 'function') {
|
||||
onBack();
|
||||
return;
|
||||
}
|
||||
goBack(delta);
|
||||
}}>
|
||||
{backIcon || (<ArrowLeftOutlined className={`${prefixCls}-pageHeader-header-backIcon`}/>)}
|
||||
</Button>)}
|
||||
{title && (<span className={`${prefixCls}-pageHeader-header-title`}>
|
||||
{title}
|
||||
</span>)}
|
||||
{subTitle && (<span className={`${prefixCls}-pageHeader-header-subTitle`}>
|
||||
{subTitle}
|
||||
</span>)}
|
||||
{tags}
|
||||
</div>
|
||||
<div className={`${prefixCls}-pageHeader-header-extra`}>
|
||||
{extra}
|
||||
</div>
|
||||
</div>)}
|
||||
|
||||
{content ? (<div
|
||||
// style={contentStyle}
|
||||
className={classNames(`${prefixCls}-pageHeader-content`
|
||||
// contentClassName
|
||||
)}>
|
||||
{content}
|
||||
</div>) : null}
|
||||
|
||||
<div
|
||||
// style={bodyStyle}
|
||||
className={classNames(`${prefixCls}-pageHeader-body`
|
||||
// bodyClassName
|
||||
)}>
|
||||
{children}
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ export default OakComponent({
|
|||
multiple: false,
|
||||
entityId: '',
|
||||
entityIds: [],
|
||||
pickerRender: {},
|
||||
pickerRender: {}, // OakAbsRefAttrPickerRender
|
||||
onChange: (() => undefined),
|
||||
},
|
||||
formData() {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default OakComponent({
|
|||
return this.props.entity;
|
||||
},
|
||||
properties: {
|
||||
helps: {},
|
||||
helps: {}, // Record<string, string>;
|
||||
entity: '',
|
||||
attributes: [],
|
||||
layout: 'horizontal',
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@ export class Cache extends Feature {
|
|||
opers.forEach((oper) => {
|
||||
const { entity, operation } = oper;
|
||||
this.cacheStore.operate(entity, operation, this.context, {
|
||||
checkerTypes: ['logical'],
|
||||
checkerTypes: ['logical'], // 这里不能检查data,不然在数据没填完前会有大量异常
|
||||
dontCollect: true,
|
||||
dontCreateOper: true,
|
||||
dontCreateModi: true,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
export const keys = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
|
||||
export const values = {
|
||||
xs: 576,
|
||||
xs: 576, //小于576
|
||||
sm: 576,
|
||||
md: 768,
|
||||
lg: 992,
|
||||
|
|
|
|||
|
|
@ -325,7 +325,7 @@ class Cache extends Feature_1.Feature {
|
|||
opers.forEach((oper) => {
|
||||
const { entity, operation } = oper;
|
||||
this.cacheStore.operate(entity, operation, this.context, {
|
||||
checkerTypes: ['logical'],
|
||||
checkerTypes: ['logical'], // 这里不能检查data,不然在数据没填完前会有大量异常
|
||||
dontCollect: true,
|
||||
dontCreateOper: true,
|
||||
dontCreateModi: true,
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
|
|||
const react_1 = tslib_1.__importDefault(require("react"));
|
||||
exports.keys = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
|
||||
exports.values = {
|
||||
xs: 576,
|
||||
xs: 576, //小于576
|
||||
sm: 576,
|
||||
md: 768,
|
||||
lg: 992,
|
||||
|
|
|
|||
Loading…
Reference in New Issue