Skip to content

S
submodule
Commit 63f649ae authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

修改基础组件

parent fd96ac6d
Hide whitespace changes
Inline Side-by-side
Showing with 365 additions and 507 deletions
components/apolloTable/component/Cell.tsx
View file @ 63f649ae
......@@ -379,6 +379,7 @@ const Cell = (props: CellProps) => {
}}
maxPopHeight={maxPopHeight}
autoFocus={true}
origin="table"
/>
</div>
);
......
components/apolloTable/component/base/_utils/getFormatter.tsx
View file @ 63f649ae
......@@ -21,7 +21,9 @@ export const GetFormatter = {
if (!newValue) {
return undefined;
}
return { value: newValue[0].value, label: newValue[0].text };
return newValue.map((item) => {
return { value: item.value, label: item.text };
});
},
TEXTAREA: (val) => {
const newValue = initValue(val);
......@@ -134,15 +136,6 @@ export const GetFormatter = {
LINK: (val) => {
return Array.isArray(val) && val.length > 0 ? val : [];
},
MULTIPLE_SEARCH: (val) => {
const newValue = initValue(val);
if (!newValue) {
return undefined;
}
return newValue.map((item) => {
return { value: item.value, label: item.text };
});
},
TREE_SELECT: (val) => {
const newValue = initValue(val);
if (!newValue) {
......
components/apolloTable/component/base/_utils/setFormatter.tsx
View file @ 63f649ae
......@@ -76,9 +76,6 @@ export const SetFormatter = {
};
});
},
MULTIPLE_SEARCH: (val) => {
return SetFormatter.SEARCH(val);
},
RATE: (val) => {
if (!isNumber(val)) return emptyModel;
return [{ value: val, text: val }];
......
components/apolloTable/component/base/config.tsx
View file @ 63f649ae
......@@ -8,7 +8,6 @@ import {
ApolloCheck,
ApolloDate,
ApolloLink,
ApolloMultipleSearch,
ApolloMultipleSelect,
ApolloNumber,
ApolloPercentage,
......@@ -29,7 +28,6 @@ import {
ApolloCheckBoxDetail,
ApolloDateDetail,
ApolloLinkDetail,
ApolloMultipleSearchDetail,
ApolloMultipleSelectDetail,
ApolloNumberDetail,
ApolloPercentageDetail,
......@@ -50,7 +48,7 @@ export const config: any = {
1: {
name: '单行文本',
editComp: ApolloInput,
cellComp: CellContainer(ApolloInput),
cellComp: ApolloInput,
setFormatter: SetFormatter.INPUT,
getFormatter: GetFormatter.INPUT,
componentAttr: {
......@@ -104,7 +102,7 @@ export const config: any = {
5: {
name: '复选',
editComp: ApolloCheck,
cellComp: CellContainer(ApolloCheck),
cellComp: ApolloCheck,
getFormatter: GetFormatter.CHECKBOX,
setFormatter: SetFormatter.CHECKBOX,
componentAttr: {},
......@@ -114,7 +112,7 @@ export const config: any = {
6: {
name: '下拉单选',
editComp: ApolloSelect,
cellComp: CellContainer(ApolloSelect),
cellComp: ApolloSelect,
componentAttr: {
labelInValue: true,
allowClear: true,
......@@ -127,7 +125,7 @@ export const config: any = {
7: {
name: '下拉多选',
editComp: ApolloMultipleSelect,
cellComp: CellContainer(ApolloMultipleSelect),
cellComp: ApolloMultipleSelect,
componentAttr: {
labelInValue: true,
mode: 'multiple',
......@@ -140,7 +138,7 @@ export const config: any = {
8: {
name: '评级',
editComp: ApolloRate,
cellComp: CellContainer(ApolloRate),
cellComp: ApolloRate,
componentAttr: {
allowClear: true,
},
......@@ -152,7 +150,7 @@ export const config: any = {
9: {
name: '数字输入',
editComp: ApolloNumber,
cellComp: CellContainer(ApolloNumber),
cellComp: ApolloNumber,
componentAttr: {
precision: 2,
},
......@@ -164,7 +162,7 @@ export const config: any = {
10: {
name: '百分比',
editComp: ApolloPercentage,
cellComp: CellContainer(ApolloPercentage),
cellComp: ApolloPercentage,
setFormatter: SetFormatter.PERCENTAGE,
getFormatter: GetFormatter.PERCENTAGE,
componentAttr: {
......@@ -176,7 +174,7 @@ export const config: any = {
11: {
name: '日期',
editComp: ApolloDate,
cellComp: CellContainer(ApolloDate),
cellComp: ApolloDate,
componentAttr: {
format: formatStr,
showTime: true,
......@@ -196,15 +194,15 @@ export const config: any = {
icon: 'iconziduan-yinyong',
},
13: {
name: '模糊搜索多选',
editComp: ApolloMultipleSearch,
cellComp: CellContainer(ApolloMultipleSearch),
getFormatter: GetFormatter.MULTIPLE_SEARCH,
setFormatter: SetFormatter.MULTIPLE_SEARCH,
name: '模糊搜索',
editComp: ApolloSearch,
cellComp: ApolloSearch,
getFormatter: GetFormatter.SEARCH,
setFormatter: SetFormatter.SEARCH,
componentAttr: {
allowClear: true,
},
detailComp: ApolloMultipleSearchDetail,
detailComp: ApolloSearchDetail,
icon: 'iconziduan-lianxiangduoxuan',
},
14: {
......@@ -222,7 +220,7 @@ export const config: any = {
15: {
name: '文本选择',
editComp: ApolloInputSearch,
cellComp: CellContainer(ApolloInputSearch),
cellComp: ApolloInputSearch,
getFormatter: GetFormatter.TEXT_SELECT,
setFormatter: SetFormatter.TEXT_SELECT,
componentAttr: {
......@@ -246,7 +244,7 @@ export const config: any = {
20: {
name: '期间',
editComp: ApolloDateRange,
cellComp: CellContainer(ApolloDateRange),
cellComp: ApolloDateRange,
componentAttr: {
format: formatStr,
showTime: true,
......
components/apolloTable/component/base/detail/index.tsx
View file @ 63f649ae
......@@ -3,7 +3,6 @@ import { ApolloCascaderDetail } from './cascader';
import { ApolloCheckBoxDetail } from './checkbox';
import { ApolloDateDetail } from './date';
import { ApolloLinkDetail } from './link';
import { ApolloMultipleSearchDetail } from './multiple-search';
import { ApolloMultipleSelectDetail } from './multiple-select';
import { ApolloNumberDetail } from './number';
import { ApolloPercentageDetail } from './percentage';
......@@ -24,7 +23,6 @@ export {
ApolloCheckBoxDetail,
ApolloDateDetail,
ApolloLinkDetail,
ApolloMultipleSearchDetail,
ApolloMultipleSelectDetail,
ApolloNumberDetail,
ApolloPercentageDetail,
......
components/apolloTable/component/base/detail/multiple-search/index.tsx deleted 100644 → 0
View file @ fd96ac6d
import { ApolloSearchDetail } from '../search';
export const ApolloMultipleSearchDetail = ApolloSearchDetail;
components/apolloTable/component/base/edit/date/index.tsx
View file @ 63f649ae
import React, { useRef } from 'react';
import React, { useRef, useState } from 'react';
import { DatePicker } from 'antd';
import { onBlurFn } from '../onBlurFn';
import { antiAssign } from '../../../../utils/utils';
import styles from './styles.less';
export const ApolloDate = (props: any) => {
const { origin, onChange, showTime } = props;
const { onChange, showTime, onEmitChange, value } = props;
const selfProps = antiAssign(props, [
'onChange',
'columnConfig',
......@@ -13,49 +12,43 @@ export const ApolloDate = (props: any) => {
'rowData',
'cellRenderProps',
'maxPopHeight',
'onEmitChange',
'getPopupContainer',
'origin',
'disableOptions',
'rowId',
'onBlurFn',
'getInstanceDetail',
]);
selfProps.disabled = !!props.disabled;
const isOpen = useRef();
const changeValue = (date, dateString) => {
const isOpen: any = useRef();
const [curValue, setCurValue] = useState(value);
const changeValue = (date: any, dateString: string) => {
setCurValue(date);
if (typeof onChange === 'function') {
if (typeof onBlurFn === 'function' && !isOpen.current) {
onBlurFn({ ...props, value: date });
}
onChange(date, dateString);
}
if (typeof onEmitChange === 'function' && !isOpen.current) {
onEmitChange(date);
}
};
const dateOnBlurFn = (e: boolean) => {
isOpen.current = e;
const dateOnBlurFn = (open: boolean) => {
isOpen.current = open;
};
const timeOnBlurFn = (e: boolean) => {
isOpen.current = e;
if (typeof onBlurFn === 'function' && !e) {
onBlurFn(props);
const timeOnBlurFn = (open: boolean) => {
isOpen.current = open;
if (typeof onEmitChange === 'function' && !open) {
onEmitChange(curValue);
}
};
return origin === 'editForm' ? (
return (
<DatePicker
className={styles.date}
// value={inputVal}
value={curValue}
dropdownClassName={styles.dropdownClassName}
popupStyle={{ width: '350px' }}
{...selfProps}
onChange={changeValue}
onOpenChange={showTime ? timeOnBlurFn : dateOnBlurFn}
/>
) : (
<DatePicker
className={styles.date}
dropdownClassName={styles.dropdownClassName}
popupStyle={{ width: '350px' }}
{...selfProps}
onChange={changeValue}
/>
);
};
components/apolloTable/component/base/edit/dateRange/index.tsx
View file @ 63f649ae
import React, { useRef } from 'react';
import React, { useRef, useState } from 'react';
import { DatePicker } from 'antd';
import { onBlurFn } from '../onBlurFn';
import { antiAssign } from '../../../../utils/utils';
import styles from './styles.less';
const { RangePicker } = DatePicker;
export const ApolloDateRange = (props: any) => {
const { onChange, placeholder, showTime, beginDatePlaceholder, endDatePlaceholder, origin } = props;
const { onChange, placeholder, showTime, beginDatePlaceholder, endDatePlaceholder, value, onEmitChange } = props;
const selfProps = antiAssign(props, [
'onChange',
'columnConfig',
'onEmitChange',
'beginDatePlaceholder',
'endDatePlaceholder',
'tableId',
'rowData',
'value',
'cellRenderProps',
'maxPopHeight',
'getPopupContainer',
'origin',
'disableOptions',
'rowId',
'onBlurFn',
'getInstanceDetail',
]);
selfProps.disabled = !!props.disabled;
const isOpen = useRef();
const changeValue = (date, dateString) => {
selfProps.showTime=true;
const isOpen: any = useRef();
const [curValue, setCurValue] = useState(value);
const changeValue = (date: any, dateString: string) => {
setCurValue(date);
if (typeof onChange === 'function') {
if (typeof onBlurFn === 'function' && !isOpen.current) {
onBlurFn({ ...props, value: date });
}
onChange(date, dateString);
}
if (typeof onEmitChange === 'function' && !isOpen.current) {
onEmitChange(date);
}
};
const dateOnBlurFn = (e: boolean) => {
isOpen.current = e;
const dateOnBlurFn = (open: boolean) => {
isOpen.current = open;
};
const timeOnBlurFn = (e: boolean) => {
isOpen.current = e;
if (typeof onBlurFn === 'function' && !e) {
onBlurFn(props);
const timeOnBlurFn = (open: boolean) => {
isOpen.current = open;
if (typeof onEmitChange === 'function' && !open) {
onEmitChange(curValue);
}
};
return origin === 'editForm' ? (
<RangePicker
className={styles.date}
dropdownClassName={styles.dropdownClassName}
// popupStyle={{ width: '350px' }}
{...selfProps}
placeholder={[beginDatePlaceholder || placeholder, endDatePlaceholder || placeholder]}
onChange={changeValue}
onOpenChange={showTime ? timeOnBlurFn : dateOnBlurFn}
/>
) : (
return (
<RangePicker
className={styles.date}
dropdownClassName={styles.dropdownClassName}
// popupStyle={{ width: '350px' }}
value={curValue}
{...selfProps}
placeholder={[beginDatePlaceholder || placeholder, endDatePlaceholder || placeholder]}
onChange={changeValue}
onOpenChange={selfProps.showTime ? timeOnBlurFn : dateOnBlurFn}
/>
);
};
components/apolloTable/component/base/edit/dateRange/styles.less
View file @ 63f649ae
@import '../../../../media';
.date {
width: 100%;
width: 100% !important;
height: 100%;
border-radius: 0;
div {
......
components/apolloTable/component/base/edit/editInterface.tsx
View file @ 63f649ae
......@@ -36,6 +36,7 @@ export interface ApolloSearchProps extends SelectProps<any>, CommonProps {
request: Function;
isMultiple?: boolean;
maxCount?: number;
maxPopHeight?: number;
}
export interface ApolloInputSearchProps extends SelectProps<any>, CommonProps {
type: string;
......
components/apolloTable/component/base/edit/index.ts
View file @ 63f649ae
......@@ -3,7 +3,6 @@ import { ApolloCascader } from './cascader';
import { ApolloCheck } from './checkbox';
import { ApolloDate } from './date';
import { ApolloLink } from './link';
import { ApolloMultipleSearch } from './multiple-search';
import { ApolloMultipleSelect } from './multiple-select';
import { ApolloNumber } from './number';
import { ApolloPercentage } from './percentage';
......@@ -24,7 +23,6 @@ export {
ApolloCheck,
ApolloDate,
ApolloLink,
ApolloMultipleSearch,
ApolloMultipleSelect,
ApolloNumber,
ApolloPercentage,
......
components/apolloTable/component/base/edit/input/index.tsx
View file @ 63f649ae
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import { Input } from 'antd';
import styles from './styles.less';
import { onBlurFn } from '../onBlurFn';
import { antiAssign } from '../../../../utils/utils';
import { ApolloInputProps } from '../editInterface';
import { Consumer } from '../../../context';
export const ApolloInput = (props: ApolloInputProps) => {
const { maxLength, onChange, value, style, origin } = props;
const { maxLength, onChange, onEmitChange, value, style, origin } = props;
const selfProps = antiAssign(props, [
'columnConfig',
'onChange',
......@@ -22,22 +21,19 @@ export const ApolloInput = (props: ApolloInputProps) => {
'origin',
'disableOptions',
'rowId',
'onBlurFn',
'getInstanceDetail',
]);
selfProps.disabled = !!props.disabled;
const [inputVal, setInputVal] = useState(value);
useEffect(() => {
setInputVal(value);
}, [value]);
const [curValue, setCurValue] = useState(value);
const changeValue = (value: any) => {
setCurValue(value);
if (typeof onChange === 'function') {
onChange(value);
}
};
const inputOnBlurFn = () => {
if (typeof onBlurFn === 'function') {
onBlurFn(props);
const onBlur = (value: any) => {
if (typeof onEmitChange === 'function') {
onEmitChange(value);
}
};
const newStyle: any = {
......@@ -45,13 +41,15 @@ export const ApolloInput = (props: ApolloInputProps) => {
};
const wordNumStyle: any = {};
if (maxLength) {
// 表单中样式
newStyle.paddingRight = '110px';
if (style && style.minHeight) {
newStyle.minHeight = Number(style.minHeight) + 10;
if (origin === 'table' && style && style.minHeight) {
// 表格中样式
newStyle.minHeight = Number(style.minHeight) + 20;
newStyle.paddingRight = '11px';
newStyle.paddingBottom = '28px';
newStyle.paddingBottom = '18px';
wordNumStyle.bottom = '4px';
wordNumStyle.marginTop = '0';
wordNumStyle.top = 'auto';
}
}
return (
......@@ -59,32 +57,21 @@ export const ApolloInput = (props: ApolloInputProps) => {
{({ locale }) => {
return (
<div className={styles.container}>
{origin === 'editForm' ? (
<Input
className={styles.input}
style={newStyle}
{...selfProps}
value={inputVal}
onBlur={inputOnBlurFn}
onChange={(e) => {
changeValue(e.target.value);
setInputVal(e.target.value);
}}
/>
) : (
<Input
className={styles.input}
style={newStyle}
{...selfProps}
onChange={(e) => {
changeValue(e.target.value);
}}
/>
)}
<Input
className={styles.input}
style={newStyle}
{...selfProps}
value={curValue}
onBlur={(e: any) => {
onBlur(e.target.value);
}}
onChange={(e: any) => {
changeValue(e.target.value);
}}
/>
{!!maxLength && (
<span className={styles.wordNumber} style={wordNumStyle}>
{`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
{`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
</span>
)}
</div>
......
components/apolloTable/component/base/edit/multiple-search/index.tsx deleted 100644 → 0
View file @ fd96ac6d
import { ApolloSearch } from '../search';
export const ApolloMultipleSearch = ApolloSearch;
components/apolloTable/component/base/edit/number/index.tsx
View file @ 63f649ae
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import { InputNumber } from 'antd';
import styles from './styles.less';
import { onBlurFn } from '../onBlurFn';
import { ApolloNumberProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
export const ApolloNumber = (props: ApolloNumberProps) => {
const { onChange, origin, value }: any = props;
const { onChange, origin, value, onEmitChange }: any = props;
const selfProps = antiAssign(props, [
'columnConfig',
'onEmitChange',
'onChange',
'value',
'tableId',
'rowData',
'cellRenderProps',
......@@ -19,40 +20,36 @@ export const ApolloNumber = (props: ApolloNumberProps) => {
'origin',
'disableOptions',
'rowId',
'onBlurFn',
'getInstanceDetail',
]);
selfProps.disabled = !!props.disabled;
const [inputVal, setInputVal] = useState(value);
useEffect(() => {
setInputVal(value);
}, [value]);
const changeValue = (newValue: any) => {
const [curValue, setCurValue] = useState(value);
const changeValue = (value: any) => {
setCurValue(value);
if (typeof onChange === 'function') {
onChange(newValue);
setInputVal(inputVal);
onChange(value);
}
};
const onBlur = (value: any) => {
if (typeof onEmitChange === 'function') {
onEmitChange(value);
}
};
const { onEmitChange, ...o } = selfProps;
const style: any = {};
if (origin === 'editForm') {
style.height = '32px';
}
const inputOnBlurFn = () => {
if (typeof onBlurFn === 'function') {
onBlurFn(props);
}
};
return origin === 'editForm' ? (
return (
<InputNumber
value={inputVal}
onBlur={inputOnBlurFn}
value={curValue}
onBlur={(e) => {
onBlur(e.target.value);
}}
className={styles.number}
style={style}
{...o}
{...selfProps}
onChange={changeValue}
/>
) : (
<InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />
);
};
components/apolloTable/component/base/edit/number/styles.less
View file @ 63f649ae
.number {
width: 100%;
width: 100% !important;
height: 100%;
:global(.ant-input-number-input-wrap){
height: 100%;
......
components/apolloTable/component/base/edit/percentage/index.tsx
View file @ 63f649ae
import React from 'react';
import { onBlurFn } from '../onBlurFn';
import { ApolloNumber } from '../number';
import { isNumber } from '../../../../utils/utils';
export const ApolloPercentage = (props: any) => {
const inputOnBlurFn = () => {
if (typeof onBlurFn === 'function') {
onBlurFn(props);
}
};
return (
<ApolloNumber
{...props}
......@@ -24,7 +18,6 @@ export const ApolloPercentage = (props: any) => {
}
return '';
}}
onBlur={inputOnBlurFn}
/>
);
};
components/apolloTable/component/base/edit/rate/index.tsx
View file @ 63f649ae
import React from 'react';
import React, { useState } from 'react';
import { Icon, Rate } from 'antd';
import { antiAssign } from '../../../../utils/utils';
import s from './index.less';
import { ApolloRateProps } from '../editInterface';
import { onBlurFn } from '../onBlurFn';
export const ApolloRate = (props: ApolloRateProps) => {
const { onChange, columnConfig } = props;
const { onChange, columnConfig, onEmitChange, value } = props;
const selfProps = antiAssign(props, [
'columnConfig',
'onEmitChange',
'onChange',
'value',
'tableId',
'rowData',
'cellRenderProps',
......@@ -19,18 +20,18 @@ export const ApolloRate = (props: ApolloRateProps) => {
'origin',
'disableOptions',
'rowId',
'onBlurFn',
'getInstanceDetail',
]);
selfProps.disabled = !!props.disabled;
const changeValue = (value) => {
const [curValue, setCurValue] = useState(value);
const changeValue = (value: any) => {
setCurValue(value);
if (typeof onChange === 'function') {
if (typeof onBlurFn === 'function') {
onBlurFn({ ...props, value });
}
onChange(value);
}
if (typeof onEmitChange === 'function') {
onEmitChange(value);
}
};
if (columnConfig.requiredFlag) {
selfProps.allowClear = false;
......@@ -41,6 +42,7 @@ export const ApolloRate = (props: ApolloRateProps) => {
{...selfProps}
character={<Icon type="like" theme="filled" />}
onChange={changeValue}
value={curValue}
/>
);
};
components/apolloTable/component/base/edit/search/index.less
View file @ 63f649ae
.search {
width: 100%;
//height: 100%;
display: flex;
:global(.ant-select-selection) {
width: 100%;
......
components/apolloTable/component/base/edit/search/index.tsx
View file @ 63f649ae
import React, { useRef } from 'react';
import React, { useState, useRef } from 'react';
import { message } from 'antd';
import Search from '../../extra/associationSearch';
import { ApolloSearchProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
import { onBlurFn } from '../onBlurFn';
import s from './index.less';
export const ApolloSearch = (props: ApolloSearchProps) => {
const { onChange, maxCount, isMultiple, request, maxPopHeight } = props;
const { onChange, maxCount, isMultiple, request, maxPopHeight, onEmitChange, value, origin } = props;
const selfProps = antiAssign(props, [
'columnConfig',
'onEmitChange',
'onChange',
'isMultiple',
'options',
'value',
'request',
'maxCount',
'request',
......@@ -23,36 +24,39 @@ export const ApolloSearch = (props: ApolloSearchProps) => {
'maxPopHeight',
'disableOptions',
'rowId',
'onBlurFn',
'getInstanceDetail',
]);
selfProps.disabled = !!props.disabled;
const isOpen: any = useRef();
if (isMultiple) {
selfProps.mode = 'multiple';
}
const [curValue, setCurValue] = useState(value);
const isOpen: any = useRef();
const changeValue = (value: any) => {
if (isMultiple && maxCount && maxCount < value.length) {
message.warn(`最多选择${maxCount}个`);
return;
}
setCurValue(value);
if (typeof onChange === 'function') {
if (typeof onBlurFn === 'function' && !isOpen.current) {
onBlurFn({ ...props, value });
}
onChange(value, value);
}
// 表格中的单选，选择后直接触发更新
if (origin === 'table' && selfProps.mode !== 'multiple') {
onBlur(value);
}
if (selfProps.mode === 'multiple' && !isOpen.current) {
onBlur(value);
}
};
const singleBlurFn = (e: boolean) => {
isOpen.current = e;
};
const multipleBlurFn = (e: boolean) => {
isOpen.current = e;
if (typeof onBlurFn === 'function' && !e) {
onBlurFn(props);
const onBlur = (value: any) => {
if (typeof onEmitChange === 'function') {
onEmitChange(value, value);
}
};
const onDropdownVisibleChange = (open: boolean) => {
isOpen.current = open;
};
const extra: any = {};
// 表格中限制下拉类组件弹框高度
......@@ -62,17 +66,23 @@ export const ApolloSearch = (props: ApolloSearchProps) => {
maxHeight: maxPopHeight,
};
}
if (origin === 'table') {
extra.defaultOpen = true;
}
if (selfProps.mode === 'multiple') {
extra.onDropdownVisibleChange = onDropdownVisibleChange;
}
return (
<Search
className={s.search}
request={request}
fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
{...selfProps}
onDropdownVisibleChange={selfProps.mode === 'multiple' ? multipleBlurFn : singleBlurFn}
onChange={changeValue}
initDataType="onfocus"
{...extra}
onBlur={onBlur}
value={curValue}
/>
);
};
components/apolloTable/component/base/edit/select/index.tsx
View file @ 63f649ae
import React, { useRef } from 'react';
import React, { useRef, useState } from 'react';
import { Select } from 'antd';
import { onBlurFn } from '../onBlurFn';
import { ApolloSelectProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
import styles from './styles.less';
import s from "@/submodule/components/apolloTable/component/base/edit/search/index.less";
import s from './index.less';
export const ApolloSelect = (props: ApolloSelectProps) => {
const { options = [], onChange, isMultiple, maxPopHeight } = props;
const { options = [], onChange, isMultiple, maxPopHeight, onEmitChange, value, origin } = props;
const selfProps = antiAssign(props, [
'tableId',
'rowId',
'rowData',
'columnConfig',
'onEmitChange',
'value',
'onChange',
'events',
'isMultiple',
'options',
'disableOptions',
'maxPopHeight',
'request',
'tableId',
'rowData',
'form',
'cellRenderProps',
'getCalendarContainer',
'disableOptions',
'rowId',
'onBlurFn',
'getInstanceDetail',
]);
selfProps.disabled = !!props.disabled;
const isOpen: any = useRef();
if (isMultiple) {
selfProps.mode = 'multiple';
}
const changeValue = (value: any, option: any) => {
const [curValue, setCurValue] = useState(value);
const isOpen: any = useRef();
const changeValue = (value: any) => {
setCurValue(value);
if (typeof onChange === 'function') {
if (typeof onBlurFn === 'function' && !isOpen.current) {
onBlurFn({ ...props, value });
}
onChange(value, option);
onChange(value, value);
}
// 表格中的单选，选择后直接触发更新
if (origin === 'table' && selfProps.mode !== 'multiple') {
onBlur(value);
}
if (selfProps.mode === 'multiple' && !isOpen.current) {
onBlur(value);
}
};
const singleBlurFn = (e: boolean) => {
isOpen.current = e;
};
const multipleBlurFn = (e: boolean) => {
isOpen.current = e;
if (typeof onBlurFn === 'function' && !e) {
onBlurFn(props);
const onBlur = (value: any) => {
if (typeof onEmitChange === 'function') {
onEmitChange(value, value);
}
};
const onDropdownVisibleChange = (open: boolean) => {
isOpen.current = open;
};
const extra: any = {};
if (maxPopHeight) {
extra.dropdownClassName = s.searchDropdown;
extra.dropdownClassName = s.selectDropdown;
extra.dropdownStyle = {
maxHeight: maxPopHeight,
};
}
if (origin === 'table') {
extra.defaultOpen = true;
}
if (selfProps.mode === 'multiple') {
extra.onDropdownVisibleChange = onDropdownVisibleChange;
}
return (
<Select
className={styles.select}
{...selfProps}
onChange={changeValue}
onDropdownVisibleChange={selfProps.mode === 'multiple' ? multipleBlurFn : singleBlurFn}
{...extra}
>
<Select className={s.select} {...selfProps} onChange={changeValue} value={curValue} {...extra} onBlur={onBlur}>
{options.map((item) => {
return (
<Select.Option key={item.id} value={item.id}>
......
components/apolloTable/component/base/edit/text-link/index.tsx
View file @ 63f649ae
import { ApolloTextArea } from '../textarea';
export const ApolloTextLink = ApolloTextArea;
// import React, { useEffect, useState } from 'react';
// import { Input, Modal } from 'antd';
// import styles from './styles.less';
// import { onBlurFn } from '../onBlurFn';
// import { antiAssign } from '../../../../utils/utils';
// import { ApolloTextAreaProps } from '../editInterface';
// import { Consumer } from '../../../context';
//
// export const ApolloTextLink = (props: ApolloTextAreaProps) => {
// const { maxLength, onChange, value, onEmitChange, columnConfig, origin, tableId } = props;
// const { columnChsName } = columnConfig;
// const selfProps = antiAssign(props, [
// 'columnConfig',
// 'onChange',
// 'value',
// 'cutLength',
// 'getDetail',
// 'rowData',
// 'onEmitChange',
// 'isMultiple',
// 'origin',
// 'tableId',
// 'cellRenderProps',
// 'maxPopHeight',
// 'getPopupContainer',
// 'getCalendarContainer',
// 'disableOptions',
// 'rowId',
// 'onBlurFn',
// 'getInstanceDetail',
// ]);
// selfProps.disabled = !!props.disabled;
// const [curValue, setCurValue] = useState(value);
// const [visible, setVisible] = useState(false);
// useEffect(() => {
// if (origin !== 'editForm') {
// getMore();
// }
// }, []);
// const [inputVal, setInputVal] = useState(value);
// useEffect(() => {
// setInputVal(value);
// }, [value]);
// // useEffect(() => {
// // if (value && value.length === cutLength) {
// // getMore();
// // }
// // }, []);
// const inputOnBlurFn = () => {
// if (typeof onBlurFn === 'function') {
// onBlurFn(props);
// }
// };
// const changeValue = (e) => {
// if (typeof onChange === 'function') {
// onChange(e.target.value);
// }
// };
//
// const changeCurValue = (e) => {
// if (typeof onChange === 'function') {
// setCurValue(e.target.value);
// }
// };
//
// const clearEdit = () => {
// // 清除所有dom的编辑状态
// const doms = document.querySelectorAll(`.cellUnit.table_${tableId}`);
// if (doms) {
// doms.forEach((item) => {
// item.setAttribute('data-editing-cell', '0');
// });
// }
// };
//
// const hide = () => {
// if (typeof onEmitChange === 'function') {
// onEmitChange(value);
// }
// clearEdit();
// setVisible(false);
// };
//
// const confirmChange = () => {
// if (typeof onEmitChange === 'function') {
// onEmitChange(curValue);
// }
// clearEdit();
// 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={inputVal}
// onBlur={inputOnBlurFn}
// onChange={(e) => {
// changeValue(e);
// setInputVal(e.target.value);
// }}
// />
// {!!maxLength && (
// <span className={styles.wordNumberForm}>
// {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
// </span>
// )}
// </div>
// );
// }}
// </Consumer>
// );
// }
//
// return (
// <Consumer>
// {({ locale }) => {
// return (
// <div className={styles.container}>
// <Input
// className={styles.cellInput}
// style={selfProps.style}
// value={value}
// />
// <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 deleted 100644 → 0
View file @ fd96ac6d
.container {
position: relative;
top: 0;
left: 0;
.inputForm{
padding-bottom: 18px;
}
.wordNumberForm {
position: absolute;
right: 20px;
bottom: 2px;
color: #e1e1e1;
font-size: 12px;
}
.cellInput{
user-select: none;
}
}
.input {
padding-bottom: 18px;
max-height: 500px !important;
}
.wordNumber {
position: absolute;
right: 35px;
bottom: 80px;
color: #e1e1e1;
font-size: 12px;
}
components/apolloTable/component/base/edit/text-select/index.tsx
View file @ 63f649ae
import React, { useRef } from 'react';
import React, { useState } from 'react';
import InputSearch from '../../extra/dataEntry/textSelect';
import { ApolloInputSearchProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
import { onBlurFn } from '../onBlurFn';
import s from './index.less';
export const ApolloInputSearch = (props: ApolloInputSearchProps) => {
const { onChange, request } = props;
const { onChange, request, onEmitChange, origin, value } = props;
const selfProps = antiAssign(props, [
'columnConfig',
'onEmitChange',
'value',
'onChange',
'request',
'tableId',
'rowId',
'rowData',
'cellRenderProps',
'getCalendarContainer',
'events',
'isMultiple',
'options',
'disableOptions',
'maxPopHeight',
'form',
'getInstanceDetail',
]);
const isOpen = useRef();
const [curValue, setCurValue] = useState(value);
const changeValue = (value: any) => {
setCurValue(value);
if (typeof onChange === 'function') {
if (typeof onBlurFn === 'function' && !isOpen.current) {
onBlurFn({ ...props, value });
}
onChange(value, value);
}
// 表格中的单选，选择后直接触发更新
if (origin === 'table' && selfProps.mode !== 'multiple') {
onBlur(value);
}
};
const singleBlurFn = (e: boolean) => {
isOpen.current = e;
const onBlur = (value: any) => {
if (typeof onEmitChange === 'function') {
onEmitChange(value, value);
}
};
return (
<InputSearch
......@@ -33,9 +47,9 @@ export const ApolloInputSearch = (props: ApolloInputSearchProps) => {
request={request}
fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
{...selfProps}
onDropdownVisibleChange={singleBlurFn}
onChange={changeValue}
initDataType="onfocus"
value={curValue}
/>
);
};
components/apolloTable/component/base/edit/textarea/index.tsx
View file @ 63f649ae
import React, { useEffect, useState, useRef } from 'react';
import { Input } from 'antd';
import styles from './styles.less';
import { onBlurFn } from '../onBlurFn';
import { antiAssign } from '../../../../utils/utils';
import { ApolloTextAreaProps } from '../editInterface';
import { Consumer } from '../../../context';
......@@ -36,8 +35,8 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
'origin',
'disableOptions',
'rowId',
'onBlurFn',
'getInstanceDetail',
'isMultiple',
]);
selfProps.disabled = !!props.disabled;
const [curValue, setCurValue] = useState(value);
......@@ -61,25 +60,15 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
}
};
const changeValue = (e: any) => {
const changeValue = (value: any) => {
setCurValue(value);
if (typeof onChange === 'function') {
onChange(e.target.value);
onChange(value);
}
};
const inputOnBlurFn = () => {
if (origin === 'editForm') {
if (typeof onBlurFn === 'function') {
onBlurFn(props);
}
} else {
if (typeof onEmitChange === 'function') {
onEmitChange(curValue);
}
}
};
const changeCurValue = (e: any) => {
if (typeof onChange === 'function') {
setCurValue(e.target.innerText);
const onBlur = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(curValue);
}
};
......@@ -93,8 +82,10 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
<Input.TextArea
className={styles.inputForm}
{...selfProps}
onBlur={inputOnBlurFn}
onChange={changeValue}
onBlur={onBlur}
onChange={(e: any) => {
changeValue(e.target.value);
}}
/>
{!!maxLength && (
<span className={styles.wordNumberForm}>
......@@ -120,6 +111,45 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
style.bottom = 0;
style.top = 'auto';
}
delete selfProps.autoSize;
let lock = true;
// 中文输入法问题
const onCompositionStart = () => {
lock = false;
};
const onCompositionEnd = (e: any) => {
lock = true;
changeDivValue(e);
};
const changeDivValue = (e: any) => {
if (lock) {
let text = e.target.innerText;
if (text.length > maxLength) {
text = text.substr(0, maxLength);
e.target.innerText = text;
placeCaretAtEnd(divInput.current);
}
changeValue(text);
}
};
// 粘贴div(contenteditable = "true")富文本转为纯文本
const onPaste = (e: any) => {
e.stopPropagation();
e.preventDefault();
let text = '';
const event = e.originalEvent || e;
if (event.clipboardData && event.clipboardData.getData) {
text = event.clipboardData.getData('text/plain');
} else if (window.clipboardData && window.clipboardData.getData) {
text = window.clipboardData.getData('Text');
}
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
document.execCommand('paste', false, text);
}
};
return (
<Consumer>
......@@ -131,8 +161,12 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
contentEditable={!selfProps.disabled}
className={styles.divInput}
{...selfProps}
onBlur={inputOnBlurFn}
onInput={changeCurValue}
onBlur={onBlur}
onCompositionStart={onCompositionStart}
onCompositionEnd={onCompositionEnd}
onPaste={onPaste}
onInput={changeDivValue}
suppressContentEditableWarning
>
{value}
</div>
......
components/apolloTable/component/base/edit/upload/index.tsx
View file @ 63f649ae
......@@ -45,7 +45,7 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
if (typeof onChange === 'function') {
onChange(value);
}
onBlurFn({ ...props, value });
// onBlurFn({ ...props, value });
}
};
const [visible, setVisible] = useState(false);
......@@ -55,15 +55,15 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
setVisible(flag);
};
// 点击Modal中上传时回调用浏览器弹框，触发onBlur，而此时并不希望触发onBlur，因此在组件内自定义监听
useEffect(() => {
document.addEventListener('click', onBlur, false);
if (origin !== 'editForm') {
toggleUploadDialog(true);
}
return () => {
document.removeEventListener('click', onBlur, false);
};
}, []);
// useEffect(() => {
// document.addEventListener('click', onBlur, false);
// if (origin !== 'editForm') {
// toggleUploadDialog(true);
// }
// return () => {
// document.removeEventListener('click', onBlur, false);
// };
// }, []);
const clearEdit = () => {
// 清除所有dom的编辑状态
......
components/apolloTable/component/base/extra/associationSearch/index.tsx
View file @ 63f649ae
......@@ -120,14 +120,6 @@ class AssociationSearch extends React.Component<Props, State> {
}
};
onBlur = () => {
const { onBlur } = this.props;
this.setState({ searchStr: '', canFocus: true });
if (typeof onBlur === 'function') {
onBlur();
}
};
formaterData = (data: any) => {
const { fieldNames } = this.state;
if (fieldNames) {
......@@ -184,34 +176,44 @@ class AssociationSearch extends React.Component<Props, State> {
}
};
handleChange = (item: any) => {
handleChange = (value: any) => {
const { onChange } = this.props;
const { data } = this.state;
if (onChange) {
if (Array.isArray(item)) {
const itemData = item.map((temp: any) => {
return {
...temp,
value: temp.key,
...(data.find((ls: any) => {
return ls.value === temp.key;
}) || {}),
};
});
onChange(itemData);
} else if (item) {
onChange({
...item,
value: item.key,
onChange(this.formatValue(value));
}
};
onBlur = (value: any) => {
const { onBlur } = this.props;
this.setState({ searchStr: '', canFocus: true });
if (typeof onBlur === 'function') {
onBlur(this.formatValue(value));
}
};
formatValue = (value: any) => {
const { data } = this.state;
if (Array.isArray(value)) {
return value.map((temp: any) => {
return {
...temp,
value: temp.key,
...(data.find((ls: any) => {
return ls.value === item.key;
return ls.value === temp.key;
}) || {}),
});
} else {
// 集成清空操作
onChange(item);
}
};
});
} else if (value) {
return {
...value,
value: value.key,
...(data.find((ls: any) => {
return ls.value === value.key;
}) || {}),
};
}
// 集成清空操作
return value;
};
notFoundContent = (locale: any) => {
......
components/apolloTable/editFormV3/index.tsx
View file @ 63f649ae
......@@ -14,15 +14,16 @@
* 失去焦点：onBlurFn
* */
import React, { Component } from 'react';
import { Form, Button } from 'antd';
import { emptyModel } from '@/submodule/components/apolloTable/component/base/_utils/setFormatter';
import { defaultLocale } from '@/submodule/components/apolloTable/locale';
import { Form, Button, message } from 'antd';
import _ from 'lodash';
import styles from './index.less';
import { emptyModel } from '../component/base/_utils/setFormatter';
import { defaultLocale } from '../locale';
import { config } from '../component/base/config';
import { transferAttr } from '../component/base/_utils/transferAttr';
import { getFormat, setFormat } from '../component/base';
import { Provider } from '../component/context';
import FormHelper from '../utils/formHelper';
import s from './index.less';
const FormItem = Form.Item;
......@@ -82,9 +83,9 @@ class FormWrap extends Component {
renderLabel = (item) => {
// const { icon } = config[item.columnType];
return (
<span className={styles.titleContainer}>
{/* icon && <div className={styles.colIcon}>{icon}</div> */}
<span className={styles.itemTitle}>{item.columnChsName}</span>
<span className={s.titleContainer}>
{/* icon && <div className={s.colIcon}>{icon}</div> */}
<span className={s.itemTitle}>{item.columnChsName}</span>
</span>
);
};
......@@ -108,7 +109,7 @@ class FormWrap extends Component {
renderEditForm = (item) => {
const { getFieldDecorator } = this.props.form;
const { rowData, rowId, getInstanceDetail, onBlurFn } = this.props;
const { rowData, rowId, getInstanceDetail, onEmitChange } = this.props;
const {
columnType,
columnName,
......@@ -121,6 +122,7 @@ class FormWrap extends Component {
validateTrigger = 'onChange',
dynamicCellConfigDTO,
cellRenderProps,
requiredFlag,
} = item;
let detailConfig: any;
if (typeof renderEditForm === 'function') {
......@@ -135,22 +137,47 @@ class FormWrap extends Component {
};
const transferColumn = transferAttr(columnType, newProps);
const disabled = readOnlyFlag || (dynamicCellConfigDTO && dynamicCellConfigDTO.readonlyFlag);
const onBlurFn1 = (changedValue: any, newVal: any) => {
if (typeof onBlurFn === 'function') {
let temp: any[] = [];
const emitChange = (changedValue: any, optionValue: any) => {
let temp: any[] = [];
value &&
value.map((item: any) => {
temp.push({ text: item.text, value: item.value });
});
if (temp.length === 0) {
temp = emptyModel;
}
if (!!item.requiredFlag && Array.isArray(newVal) && !newVal[0].value) {
if (temp.length === 0) {
temp = emptyModel;
}
if (_.isEqual(temp, changedValue)) {
return;
}
changeValue(changedValue, optionValue);
};
const changeValue = async (changedValue: any, optionValue: any) => {
// 校验必填项
if (requiredFlag) {
if (!changedValue || changedValue.length === 0) {
message.error('该字段为必填项');
return;
}
if (_.isEqual(temp, newVal)) {
return;
if (changedValue.length === 1) {
const data = changedValue[0];
if (!data.value && !data.text && data.value !== 0) {
message.error('该字段为必填项');
return;
}
}
onBlurFn(changedValue);
}
const extraData = FormHelper.changeTableData({
item,
changedKey: columnName,
changedValue,
originValue: optionValue,
});
extraData.push({
columnCode: columnName,
cellValueList: changedValue,
});
if (typeof onEmitChange === 'function') {
onEmitChange(extraData);
}
};
return (
......@@ -170,7 +197,10 @@ class FormWrap extends Component {
columnConfig={item}
disabled={disabled}
rowId={rowId}
onBlurFn={onBlurFn1}
onEmitChange={(changedValue: any, optionValue: any) => {
const value = setFormat(detailConfig, item, changedValue, optionValue);
emitChange(value, optionValue);
}}
rowData={{ id: rowId, rowData }}
cellRenderProps={cellRenderProps}
origin="editForm"
......@@ -206,13 +236,13 @@ class FormWrap extends Component {
return (
<Provider value={{ locale: this.getContext() }}>
<div className={styles.wrap}>
<div className={styles.topWrap}>
<div className={styles.titleCls}>{name}</div>
<div className={s.wrap}>
<div className={s.topWrap}>
<div className={s.titleCls}>{name}</div>
</div>
<div
id="gotop"
className={styles.formItemCls}
className={s.formItemCls}
ref={(r) => {
this.wrapDom = r;
}}
......@@ -222,7 +252,7 @@ class FormWrap extends Component {
return (
<div
key={i}
className={styles.item}
className={s.item}
style={{
width: `${100 / colsNum}%`,
marginLeft: colsNum > 1 && i % colsNum === 0 ? '-50px' : 0,
......@@ -235,21 +265,21 @@ class FormWrap extends Component {
})}
</Form>
</div>
<div className={styles.bottomWrap}>
<div className={s.bottomWrap}>
{isShowDelBtn && (
<Button onClick={this.handleDelete} type="link" className={styles.delBtnCls}>
<Button onClick={this.handleDelete} type="link" className={s.delBtnCls}>
{delLabel || '删除'}
</Button>
)}
{!hideOperateBtn && (
<div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
<Button onClick={this.handleCancel} className={styles.btnCls}>
<Button onClick={this.handleCancel} className={s.btnCls}>
取消
</Button>
<Button
onClick={this.handleSubmit}
type="primary"
className={styles.btnCls}
className={s.btnCls}
loading={loading}
id="submitBtn" // 用于业务监听此dom节点
>
......
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