Commit d7b7482c authored by zhangwenshuai's avatar zhangwenshuai

update upload and number ui

parent d1a71d13
......@@ -9,7 +9,7 @@
height: 100%;
.loading {
position: absolute;
top: 50%;
top: 200px;
left: 50%;
transform: translate(-50%, -50%);
}
......
......@@ -83,7 +83,6 @@ export const SetFormatter = {
return [{ value: val, text: val }];
},
NUMBER: (val, config) => {
debugger
if (!isNumber(val)) return emptyModel;
const { unit = {} } = config || {}; // 设置单位
if (unit && unit.code === 'wan') {
......
......@@ -5,7 +5,7 @@ import { ApolloNumberProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
export const ApolloNumber = (props: ApolloNumberProps) => {
const { onChange }: any = props;
const { onChange, origin }: any = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange']);
const changeValue = (newValue: any) => {
if (typeof onChange === 'function') {
......@@ -13,5 +13,9 @@ export const ApolloNumber = (props: ApolloNumberProps) => {
}
};
const { onEmitChange, ...o } = selfProps;
return <InputNumber className={styles.number} {...o} onChange={changeValue} />;
const style: any = {};
if (origin === 'editForm') {
style.height = '32px';
}
return <InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />;
};
......@@ -11,6 +11,10 @@
background: @disabledColor;
border-color: #d9d9d9;
}
&.editForm{
height: auto;
border: none;
}
.add {
cursor: pointer;
font-size: @textFontGen;
......@@ -19,9 +23,12 @@
}
}
.picContainer {
margin-left: @marginSmX;
margin-right: @marginSmX;
.pic {
height: 30px;
&.editForm {
height: 100px;
}
}
}
}
......
......@@ -8,7 +8,7 @@ import Upload from '../../extra/upload';
import addIcon from '../../../../assets/addIcon.png';
export const ApolloUpload = (props: ApolloUploadProps) => {
const { isMultiple, onEmitChange, onChange, disabled } = props;
const { isMultiple, onEmitChange, onChange, disabled, origin } = props;
const selfProps = antiAssign(props, ['onChange', 'value']);
if (isMultiple) {
selfProps.multiple = true;
......@@ -29,6 +29,9 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
// 点击Modal中上传时回调用浏览器弹框,触发onBlur,而此时并不希望触发onBlur,因此在组件内自定义监听
useEffect(() => {
document.addEventListener('click', onBlur, false);
if (origin !== 'editForm') {
toggleUploadDialog(true);
}
return () => {
document.removeEventListener('click', onBlur, false);
};
......@@ -61,23 +64,33 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
e.stopPropagation(); // 阻止事件冒泡
e.nativeEvent.stopImmediatePropagation();
};
let containerClass = s.container;
if (disabled) {
containerClass = classNames(containerClass, s.disabled);
}
if (origin === 'editForm') {
containerClass = classNames(containerClass, s.editForm);
}
return (
<div className={disabled ? classNames(s.container, s.disabled) : s.container} onClick={onClickContainer}>
{!disabled && (
<div className={s.add} onClick={toggleUploadDialog.bind(null, true)}>
<img alt="" className={s.addIcon} src={addIcon} />
</div>
)}
<div className={containerClass} onClick={onClickContainer}>
{value &&
value.map((item, i) => {
return (
<div key={i} className={s.picContainer}>
<Tooltip placement="bottom" title={item.name}>
<img className={s.pic} src={item.thumbUrl} />
<img
className={origin === 'editForm' ? classNames(s.pic, s.editForm) : s.pic}
src={item.thumbUrl}
/>
</Tooltip>
</div>
);
})}
{!disabled && origin === 'editForm' && (
<div className={s.add} onClick={toggleUploadDialog.bind(null, true)}>
<img alt="" className={s.addIcon} src={addIcon} />
</div>
)}
<Modal visible={visible} title="文件上传" onOk={onOk} onCancel={onCancel}>
<div className={s.uploadContainer}>
<Upload {...selfProps} value={props.value} onChange={changeValue} />
......
......@@ -78,6 +78,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
headerHeight,
contentMenu,
onScroll,
loadComp,
} = this.props;
const sortConfig =
operateConfig &&
......@@ -116,6 +117,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
rowSelection={rowSelection}
noDataPlaceholder={noDataPlaceholder}
contentMenu={contentMenu}
loadComp={loadComp}
/>
</div>
{paginationConfig && <Pagination {...paginationConfig} />}
......
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