Skip to content

S
submodule
Commit 26e5e06e authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

update apolloTable link and dateRange

parent b93137dc
Hide whitespace changes
Inline Side-by-side
Showing with 265 additions and 30 deletions
components/apolloTable/component/base/_utils/getFormatter.tsx
View file @ 26e5e06e
......@@ -32,8 +32,8 @@ export const GetFormatter = {
if (isMultiple) {
return Array.isArray(val)
? val.map((item) => {
return item.value;
})
return item.value;
})
: [];
}
const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
......@@ -76,6 +76,14 @@ export const GetFormatter = {
const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
return obj.value ? moment(obj.value) : undefined;
},
DATERANGE: (val) => {
if (Array.isArray(val)) {
return val.map((item) => {
return moment(item.value);
});
}
return undefined;
},
LINK: (val) => {
return Array.isArray(val) && val.length > 0 ? val : [];
},
......
components/apolloTable/component/base/_utils/setFormatter.tsx
View file @ 26e5e06e
......@@ -81,7 +81,7 @@ export const SetFormatter = {
return [{ value: val, text: val }];
},
PERCENTAGE: (val) => {
val = (`${val}`).replace('%', '');
val = `${val}`.replace('%', '');
if (!isNumber(val)) return emptyModel;
val = accDiv(val, 100);
return SetFormatter.NUMBER(val);
......@@ -103,6 +103,16 @@ export const SetFormatter = {
val = val.format ? val.format(setFormat) : val;
return [{ value: val, text: val }];
},
DATERANGE: (val, config) => {
if (Array.isArray(val)) {
let res: any[] = [];
val.map((item) => {
res = res.concat(SetFormatter.DATE(item, config));
});
return res;
}
return emptyModel;
},
LINK: (val) => {
return Array.isArray(val) && val.length > 0 ? val : emptyModel;
},
......
components/apolloTable/component/base/_utils/transferAttr.tsx
View file @ 26e5e06e
......@@ -28,6 +28,7 @@ export const transferAttr = (columnType, columnAttrObj) => {
columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength;
break;
case '11':
case '20':
columnAttrObj.format = columnAttrObj.format.replace(/y/g, 'Y').replace(/d/g, 'D');
columnAttrObj.showTime = /H|m|s/.test(columnAttrObj.format);
break;
......
components/apolloTable/component/base/config.tsx
View file @ 26e5e06e
......@@ -19,6 +19,7 @@ import {
ApolloTreeSelect,
ApolloUpload,
ApolloTextArea,
ApolloDateRange,
} from './edit';
import {
ApolloInputDetail,
......@@ -37,6 +38,7 @@ import {
ApolloTextAreaDetail,
ApolloTreeSelectDetail,
ApolloUploadDetail,
ApolloDateRangeDetail,
} from './detail';
import CellContainer from './edit/container';
......@@ -225,4 +227,17 @@ export const config: any = {
detailComp: ApolloCascaderDetail,
icon: 'iconziduan-lianxiangdanxuan',
},
20: {
name: '期间',
editComp: ApolloDateRange,
cellComp: CellContainer(ApolloDateRange),
componentAttr: {
format: formatStr,
showTime: true,
},
getFormatter: GetFormatter.DATERANGE,
setFormatter: SetFormatter.DATERANGE,
detailComp: ApolloDateRangeDetail,
icon: 'iconziduan-riqi',
},
};
components/apolloTable/component/base/detail/dateRange/index.tsx 0 → 100644
View file @ 26e5e06e
import React from 'react';
import { formatStr } from '../../_utils/setFormatter';
import s from '../input/index.less';
import { DateProps } from '../detailInterface';
export const ApolloDateRangeDetail = (props: DateProps) => {
const { value, formatter, componentAttr } = props;
const formatValue = formatter ? formatter(value) : value;
if (!formatValue) return null;
const { format = formatStr } = componentAttr || {};
let valueStr = '';
if (typeof formatValue === 'string') {
valueStr = formatValue;
} else {
valueStr = formatValue.format ? formatValue.format(format) : formatValue;
}
return <div className={s.text}>{valueStr}</div>;
};
components/apolloTable/component/base/detail/index.tsx
View file @ 26e5e06e
......@@ -14,6 +14,7 @@ import { ApolloInputSearchDetail } from './text-select';
import { ApolloTextAreaDetail } from './textarea';
import { ApolloTreeSelectDetail } from './tree-select';
import { ApolloUploadDetail } from './upload';
import { ApolloDateRangeDetail } from './dateRange';
export {
ApolloInputDetail,
......@@ -32,4 +33,5 @@ export {
ApolloTextAreaDetail,
ApolloTreeSelectDetail,
ApolloUploadDetail,
ApolloDateRangeDetail,
};
components/apolloTable/component/base/detail/link/index.less
View file @ 26e5e06e
.text {
@import '../../../../common';
.container {
position: relative;
display: flex;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 100%;
align-items: center;
.outContainer {
display: flex;
width: calc(100% - 30px);
overflow: hidden;
.innerContainer {
display: flex;
.item {
margin-right: 10px;
//background: #e9eef9;
border-radius: 12px;
&.multi {
border-radius: @borderRadius;
}
.itemBgTxt {
height: 24px;
padding: 5px 10px;
line-height: 1;
font-size: 14px;
color: @textGeneralColor;
}
&:last-child {
margin-right: 0;
}
}
}
}
.moreBtn {
width: 30px;
font-size: 12px;
cursor: pointer;
text-align: center;
.extend {
width: 14px;
border-radius: 50%;
}
}
}
.popContainer{
width: 200px;
:global(.ant-popover-inner-content){
padding: 0;
}
.popContent{
padding: @paddingGen;
}
}
.popItem {
border-radius: @borderRadius;
margin-bottom: @marginSm;
background: #e9eef9;
padding: @paddingSmX;
display: flex;
.popItemBgTxt {
word-break: break-all;
height: 24px;
padding: 5px 10px;
line-height: 1;
font-size: 14px;
}
}
components/apolloTable/component/base/detail/link/index.tsx
View file @ 26e5e06e
import React from 'react';
import styles from './index.less';
import { LinkProps } from '../detailInterface';
import React, { useState, useRef, useEffect } from 'react';
import { Popover } from 'antd';
import classNames from 'classnames';
import s from './index.less';
import extendIcon from '../../../../assets/extend.png';
export const ApolloLinkDetail = (props: LinkProps) => {
const { value } = props;
if (!value) return null;
if (Array.isArray(value)) {
return (
<div className={styles.text}>
{value.map((item, i) => {
return (
<div key={i}>
export const ApolloLinkDetail = (props: any) => {
const { value, origin } = props;
debugger
if (!Array.isArray(value) || value.length === 0) return null;
const [dotVisible, setDotVisible] = useState(false);
const outer = useRef(null);
const inner = useRef(null);
useEffect(() => {
const outerTarget: any = outer.current;
const innerTarget: any = inner.current;
if (outerTarget && innerTarget && origin !== 'detailForm') {
if (innerTarget.clientWidth > outerTarget.clientWidth) {
setDotVisible(true);
} else {
setDotVisible(false);
}
}
}, [value]);
const outStyle: any = {};
const innerStyle: any = {};
const itemStyle: any = {};
if (origin === 'detailForm') {
outStyle.width = 'auto';
innerStyle.flexWrap = 'wrap';
itemStyle.marginBottom = '5px';
itemStyle.wordBreak = 'break-all';
}
return (
<div className={s.container}>
<div className={s.outContainer} ref={outer} style={outStyle}>
<div className={s.innerContainer} ref={inner} style={innerStyle}>
{value.map((item, i) => {
return (
<a
key={i}
target="_blank"
href={item.value}
style={{ textDecoration: 'underline' }}
className={s.item}
style={itemStyle}
rel="noopener noreferrer"
>
{item.text || item.value}
</a>
</div>
);
})}
);
})}
</div>
</div>
);
}
{dotVisible && (
<Popover
trigger="click"
onClick={(e) => {
e.stopPropagation();
}}
placement="left"
overlayClassName={s.popContainer}
content={
<div
className={s.popContent}
onClick={(e) => {
e.stopPropagation();
}}
>
{value.map((item, i) => {
return (
<a
key={i}
target="_blank"
href={item.value}
className={s.popItem}
style={itemStyle}
rel="noopener noreferrer"
>
{item.text || item.value}
</a>
);
})}
</div>
}
>
<div className={s.moreBtn}>
<img alt="" className={s.extend} src={extendIcon} />
</div>
</Popover>
)}
</div>
);
};
components/apolloTable/component/base/edit/dateRange/index.tsx 0 → 100644
View file @ 26e5e06e
import React from 'react';
import { DatePicker } from 'antd';
import styles from './styles.less';
import { antiAssign } from '../../../../utils/utils';
const { RangePicker } = DatePicker;
export const ApolloDateRange = (props: any) => {
const { onChange } = props;
const selfProps = antiAssign(props, ['onChange', 'columnConfig']);
const changeValue = (dates, dateStrings) => {
if (typeof onChange === 'function') {
onChange(dates, dateStrings);
}
};
return (
<RangePicker
className={styles.date}
dropdownClassName={styles.dropdownClassName}
popupStyle={{ width: '350px' }}
{...selfProps}
onChange={changeValue}
/>
);
};
components/apolloTable/component/base/edit/dateRange/styles.less 0 → 100644
View file @ 26e5e06e
@import '../../../../media';
.date {
width: 100%;
height: 100%;
border-radius: 0;
div {
height: 100%;
}
:global(.ant-calendar-picker-input.ant-input) {
height: 100%;
border-radius: 0;
}
}
.dropdownClassName {
.mediaMax(375px,{
width:350px;
});
}
components/apolloTable/component/base/edit/index.ts
View file @ 26e5e06e
......@@ -14,6 +14,7 @@ import { ApolloInputSearch } from './text-select';
import { ApolloTextArea } from './textarea';
import { ApolloTreeSelect } from './tree-select';
import { ApolloUpload } from './upload';
import { ApolloDateRange } from './dateRange';
export {
ApolloInput,
......@@ -32,4 +33,5 @@ export {
ApolloTreeSelect,
ApolloUpload,
ApolloTextArea,
ApolloDateRange,
};
components/apolloTable/component/base/edit/link/index.tsx
View file @ 26e5e06e
......@@ -6,8 +6,12 @@ import addIcon from '../../../../assets/addIcon.png';
import delIcon from '../../../../assets/delIcon.png';
import { Consumer } from '../../../context';
export const ApolloLink = (props: ApolloLinkProps) => {
const { onChange, value } = props;
export const ApolloLink = (props: any) => {
const { onChange, value, isMultiple, maxLength, maxValue } = props;
let len = 1;
if (isMultiple) {
len = maxValue || 10;
}
const changeText = (i, e) => {
const newValue = (value && value.slice()) || [];
newValue[i].text = e.target.value;
......@@ -50,6 +54,7 @@ export const ApolloLink = (props: ApolloLinkProps) => {
className={styles.input}
value={link.text}
onChange={changeText.bind(null, i)}
maxLength={maxLength}
/>
</div>
<div className={styles.row}>
......@@ -58,6 +63,7 @@ export const ApolloLink = (props: ApolloLinkProps) => {
className={styles.input}
value={link.value}
onChange={changeValue.bind(null, i)}
maxLength={maxLength}
/>
<div className={styles.delContainer} onClick={delLink.bind(null, i)}>
<img alt="" className={styles.delIcon} src={delIcon} />
......@@ -66,9 +72,11 @@ export const ApolloLink = (props: ApolloLinkProps) => {
</div>
);
})}
<div className={styles.btn} onClick={addLink}>
<img alt="" className={styles.icon} src={addIcon} />
</div>
{(!value || value.length < len) && (
<div className={styles.btn} onClick={addLink}>
<img alt="" className={styles.icon} src={addIcon} />
</div>
)}
</div>
);
}}
......
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