Skip to content

S
submodule
Commit 0cabe760 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

修改textlink样式逻辑

parent 2ac5ce37
Hide whitespace changes
Inline Side-by-side
Showing with 235 additions and 61 deletions
components/apolloTable/component/Cell.tsx
View file @ 0cabe760
...@@ -269,6 +269,9 @@ const Cell = (props: CellProps) => { ...@@ -269,6 +269,9 @@ const Cell = (props: CellProps) => {
componentAttr={transferColumn} componentAttr={transferColumn}
formatter={detailConfig.getFormatter} formatter={detailConfig.getFormatter}
cellRenderProps={cellRenderProps} cellRenderProps={cellRenderProps}
changeEdit={()=>{
setStatus('edit');
}}
/> />
</div> </div>
)} )}
......
components/apolloTable/component/base/config.tsx
View file @ 0cabe760
...@@ -21,6 +21,7 @@ import { ...@@ -21,6 +21,7 @@ import {
ApolloTextArea, ApolloTextArea,
ApolloDateRange, ApolloDateRange,
ApolloRegion, ApolloRegion,
ApolloTextLink,
} from './edit'; } from './edit';
import { import {
ApolloInputDetail, ApolloInputDetail,
...@@ -69,10 +70,13 @@ export const config: any = { ...@@ -69,10 +70,13 @@ export const config: any = {
// }, // },
2: { 2: {
name: '超链接', name: '超链接',
editComp: ApolloTextArea, editComp: ApolloTextLink,
cellComp: CellContainer(ApolloTextArea), cellComp: ApolloTextLink,
getFormatter: GetFormatter.TEXTLINK, getFormatter: GetFormatter.TEXTLINK,
setFormatter: SetFormatter.TEXTLINK, setFormatter: SetFormatter.TEXTLINK,
componentAttr: {
autoSize: { minRows: 3 },
},
detailComp: ApolloTextLinkDetail, detailComp: ApolloTextLinkDetail,
icon: 'iconziduan-chaolianjie', icon: 'iconziduan-chaolianjie',
}, },
......
components/apolloTable/component/base/detail/text-link/index.less
View file @ 0cabe760
...@@ -11,22 +11,29 @@ ...@@ -11,22 +11,29 @@
overflow: hidden; overflow: hidden;
.innerContainer { .innerContainer {
display: flex; display: flex;
.item { .content {
margin-right: 10px; display: flex;
//background: #e9eef9;
border-radius: 12px; .item {
&.multi { margin-right: 10px;
border-radius: @borderRadius; //background: #e9eef9;
} border-radius: 12px;
.itemBgTxt {
height: 24px; &.multi {
padding: 5px 10px; border-radius: @borderRadius;
line-height: 1; }
font-size: 14px;
color: @textGeneralColor; .itemBgTxt {
} height: 24px;
&:last-child { padding: 5px 10px;
margin-right: 0; line-height: 1;
font-size: 14px;
color: @textGeneralColor;
}
&:last-child {
margin-right: 0;
}
} }
} }
} }
...@@ -36,18 +43,24 @@ ...@@ -36,18 +43,24 @@
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
display: none;
.extend { .extend {
width: 14px; width: 14px;
border-radius: 50%; border-radius: 50%;
} }
} }
&:hover{
.moreBtn{
display: block;
}
}
} }
.popContainer{ .popContainer {
width: 200px; width: 200px;
:global(.ant-popover-inner-content){ :global(.ant-popover-inner-content) {
padding: 0; padding: 0;
} }
.popContent{ .popContent {
padding: @paddingGen; padding: @paddingGen;
} }
} }
......
components/apolloTable/component/base/detail/text-link/index.tsx
View file @ 0cabe760
...@@ -5,7 +5,7 @@ import s from './index.less'; ...@@ -5,7 +5,7 @@ import s from './index.less';
import IconFont from '@/submodule/components/IconFont'; import IconFont from '@/submodule/components/IconFont';
export const ApolloTextLinkDetail = (props: any) => { export const ApolloTextLinkDetail = (props: any) => {
const { value, origin, formatter } = props; const { value, origin, formatter, changeEdit } = props;
const newValue = formatter ? formatter(value) : value; const newValue = formatter ? formatter(value) : value;
if (!newValue) return null; if (!newValue) return null;
// 以逗号分隔 // 以逗号分隔
...@@ -38,59 +38,77 @@ export const ApolloTextLinkDetail = (props: any) => { ...@@ -38,59 +38,77 @@ export const ApolloTextLinkDetail = (props: any) => {
<div className={s.container}> <div className={s.container}>
<div className={s.outContainer} ref={outer} style={outStyle}> <div className={s.outContainer} ref={outer} style={outStyle}>
<div className={s.innerContainer} ref={inner} style={innerStyle}> <div className={s.innerContainer} ref={inner} style={innerStyle}>
{arr.map((item, i) => { {dotVisible ? (
return ( <Popover
<a placement="left"
key={i} overlayClassName={s.popContainer}
target="_blank" content={
href={item} <div className={s.popContent} onClick={(e)=>{
className={s.item} e.stopPropagation();
style={itemStyle} e.nativeEvent.stopImmediatePropagation();
rel="noopener noreferrer" }}>
> {arr.map((item, i) => {
{item} return (
</a> <a
); key={i}
})} target="_blank"
</div> href={item}
</div> className={s.popItem}
{dotVisible && ( style={itemStyle}
<Popover rel="noopener noreferrer"
trigger="click" >
onClick={(e) => { <div className={s.popItemBgTxt}>{item}</div>
e.stopPropagation(); </a>
}} );
placement="left" })}
overlayClassName={s.popContainer} </div>
content={ }
<div
className={s.popContent}
onClick={(e) => {
e.stopPropagation();
}}
> >
<div className={s.content} style={innerStyle}>
{arr.map((item, i) => {
return (
<a
key={i}
target="_blank"
href={item}
className={s.item}
style={itemStyle}
rel="noopener noreferrer"
>
{item}
</a>
);
})}
</div>
</Popover>
) : (
<div className={s.content} style={innerStyle}>
{arr.map((item, i) => { {arr.map((item, i) => {
return ( return (
<a <a
key={i} key={i}
target="_blank" target="_blank"
href={item} href={item}
className={s.popItem} className={s.item}
style={itemStyle} style={itemStyle}
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div className={s.popItemBgTxt}>{item}</div> {item}
</a> </a>
); );
})} })}
</div> </div>
} )}
> </div>
<div className={s.moreBtn}> </div>
<IconFont type="iconzhankai1" /> <div
</div> className={s.moreBtn}
</Popover> onClick={() => {
)} changeEdit();
}}
>
<IconFont type="iconzhankai1" />
</div>
</div> </div>
); );
}; };
components/apolloTable/component/base/edit/index.ts
View file @ 0cabe760
...@@ -16,6 +16,7 @@ import { ApolloTreeSelect } from './tree-select'; ...@@ -16,6 +16,7 @@ import { ApolloTreeSelect } from './tree-select';
import { ApolloUpload } from './upload'; import { ApolloUpload } from './upload';
import { ApolloDateRange } from './dateRange'; import { ApolloDateRange } from './dateRange';
import ApolloRegion from './region'; import ApolloRegion from './region';
import { ApolloTextLink } from './text-link';
export { export {
ApolloInput, ApolloInput,
...@@ -36,4 +37,5 @@ export { ...@@ -36,4 +37,5 @@ export {
ApolloTextArea, ApolloTextArea,
ApolloDateRange, ApolloDateRange,
ApolloRegion, ApolloRegion,
ApolloTextLink,
}; };
components/apolloTable/component/base/edit/text-link/index.tsx 0 → 100644
View file @ 0cabe760
import React, { useEffect, useState } from 'react';
import { Input, Modal } from 'antd';
import styles from './styles.less';
import { antiAssign } from '../../../../utils/utils';
import { ApolloTextAreaProps } from '../editInterface';
import { Consumer } from '../../../context';
export const ApolloTextLink = (props: ApolloTextAreaProps) => {
const { maxLength, onChange, value, cutLength, getDetail, rowData, onEmitChange, columnConfig, origin } = props;
const { columnChsName } = columnConfig;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'value', 'cutLength', 'getDetail', 'rowData', 'onEmitChange']);
const [curValue, setCurValue] = useState(value);
const [visible, setVisible] = useState(false);
useEffect(() => {
if (origin !== 'editForm') {
setCurValue(value);
getMore();
}
}, [value]);
// useEffect(() => {
// if (value && value.length === cutLength) {
// getMore();
// }
// }, []);
const changeValue = (e) => {
if (typeof onChange === 'function') {
onChange(e.target.value);
}
};
const changeCurValue = (e) => {
if (typeof onChange === 'function') {
setCurValue(e.target.value);
}
};
const hide = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(value);
}
setVisible(false);
}
const confirmChange = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(curValue);
}
setVisible(false);
}
const getMore = async () => {
setVisible(true);
};
if (origin === 'editForm') {
return (
<Consumer>
{({ locale }) => {
return (
<div className={styles.container}>
<Input.TextArea
className={styles.inputForm}
{...selfProps}
value={value}
onChange={changeValue}
/>
{!!maxLength && (
<span className={styles.wordNumberForm}>
{`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
</span>
)}
</div>
);
}}
</Consumer>
)
}
return (
<Consumer>
{({ locale }) => {
return (
<div className={styles.container}>
<Input
{...selfProps}
value={value}
onChange={changeValue}
/>
<Modal visible={visible} title={columnChsName} onCancel={hide} onOk={confirmChange}>
<Input.TextArea
className={styles.input}
{...selfProps}
value={curValue}
onChange={changeCurValue}
/>
{!!maxLength && (
<span className={styles.wordNumber}>
{`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
</span>
)}
</Modal>
</div>
);
}}
</Consumer>
);
};
components/apolloTable/component/base/edit/text-link/styles.less 0 → 100644
View file @ 0cabe760
.container {
position: relative;
top: 0;
left: 0;
.inputForm{
padding-bottom: 18px;
}
.wordNumberForm {
position: absolute;
right: 20px;
bottom: 2px;
color: #e1e1e1;
font-size: 12px;
}
}
.input {
padding-bottom: 18px;
max-height: 500px !important;
}
.wordNumber {
position: absolute;
right: 35px;
bottom: 80px;
color: #e1e1e1;
font-size: 12px;
}
\ 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