Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
A
airtable
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
web_component
airtable
Commits
5004ef0e
Commit
5004ef0e
authored
Mar 31, 2020
by
zhangwenshuai
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改模糊搜索、可输可选组件
parent
ed397fd5
Changes
19
Hide whitespace changes
Inline
Side-by-side
Showing
19 changed files
with
335 additions
and
136 deletions
+335
-136
Cell.tsx
src/apollo-table/component/Cell.tsx
+0
-1
getFormatter.tsx
src/apollo-table/component/base/_utils/getFormatter.tsx
+9
-17
setFormatter.tsx
src/apollo-table/component/base/_utils/setFormatter.tsx
+21
-42
config.tsx
src/apollo-table/component/base/config.tsx
+10
-8
index.tsx
src/apollo-table/component/base/edit/checkbox/index.tsx
+2
-1
editInterface.tsx
src/apollo-table/component/base/edit/editInterface.tsx
+12
-3
index.less
src/apollo-table/component/base/edit/search/index.less
+15
-0
index.tsx
src/apollo-table/component/base/edit/search/index.tsx
+47
-22
index.less
src/apollo-table/component/base/edit/text-select/index.less
+20
-0
index.tsx
src/apollo-table/component/base/edit/text-select/index.tsx
+64
-13
index.less
src/apollo-table/component/base/edit/tree-select/index.less
+20
-0
index.tsx
src/apollo-table/component/base/edit/tree-select/index.tsx
+66
-10
index.tsx
...lo-table/component/base/extra/associationSearch/index.tsx
+5
-0
index.tsx
...table/component/base/extra/dataEntry/textSelect/index.tsx
+9
-9
index.tsx
...apollo-table/component/base/extra/orgTreeSelect/index.tsx
+2
-2
config.ts
src/apollo-table/component/config.ts
+5
-5
utils.tsx
src/apollo-table/utils/utils.tsx
+12
-0
demo1.tsx
src/test/demo1.tsx
+8
-3
serives.ts
src/test/serives.ts
+8
-0
No files found.
src/apollo-table/component/Cell.tsx
View file @
5004ef0e
...
...
@@ -32,7 +32,6 @@ const Cell = (props: CellProps) => {
cellData
.
map
((
item
)
=>
{
temp
.
push
({
text
:
item
.
text
,
value
:
item
.
value
});
});
debugger
if
(
_
.
isEqual
(
temp
,
changedValue
))
{
setStatus
(
'detail'
);
return
;
...
...
src/apollo-table/component/base/_utils/getFormatter.tsx
View file @
5004ef0e
...
...
@@ -6,10 +6,8 @@ export const GetFormatter = {
return
obj
.
value
;
},
SEARCH
:
(
val
)
=>
{
if
(
!
Array
.
isArray
(
val
))
return
void
0
;
return
val
.
map
((
item
)
=>
({
value
:
item
.
value
,
label
:
item
.
text
}))
.
filter
((
item
)
=>
item
.
value
||
item
.
value
===
0
);
if
(
!
Array
.
isArray
(
val
)
||
val
.
length
===
0
)
return
void
0
;
return
{
value
:
val
[
0
].
value
,
label
:
val
[
0
].
text
};
},
TEXTAREA
:
(
val
)
=>
{
const
obj
=
Array
.
isArray
(
val
)
&&
val
.
length
>
0
?
val
[
0
]
:
{};
...
...
@@ -40,6 +38,7 @@ export const GetFormatter = {
},
SELECT
:
(
val
)
=>
{
// 处理成[{}]结构
if
(
!
Array
.
isArray
(
val
)
||
val
.
length
===
0
)
return
undefined
;
const
obj
=
val
[
0
]
||
{};
return
{
key
:
obj
.
value
,
label
:
obj
.
text
};
},
...
...
@@ -48,6 +47,9 @@ export const GetFormatter = {
const
obj
=
val
[
0
]
||
{};
return
{
key
:
obj
.
value
,
label
:
obj
.
text
};
},
TEXT_SELECT
:
(
val
)
=>
{
return
GetFormatter
.
SELECT
(
val
);
},
RATE
:
(
val
)
=>
{
const
obj
=
Array
.
isArray
(
val
)
&&
val
.
length
>
0
?
val
[
0
]
:
{};
return
obj
.
value
||
0
;
...
...
@@ -65,25 +67,15 @@ export const GetFormatter = {
return
obj
.
value
?
moment
(
obj
.
value
)
:
void
0
;
},
LINK
:
(
val
)
=>
{
return
Array
.
isArray
(
val
)
&&
val
.
length
>
0
?
val
:
[];
return
Array
.
isArray
(
val
)
&&
val
.
length
>
0
?
val
:
[];
},
MULTIPLE_SEARCH
:
(
val
)
=>
{
if
(
!
Array
.
isArray
(
val
))
return
void
0
;
return
val
.
map
((
item
)
=>
({
value
:
item
.
value
,
label
:
item
.
text
}))
.
filter
((
item
)
=>
item
.
value
||
item
.
value
===
0
);
return
val
.
map
((
item
)
=>
({
value
:
item
.
value
,
label
:
item
.
text
}));
},
TREE_SELECT
:
(
val
)
=>
{
debugger
if
(
!
Array
.
isArray
(
val
))
return
void
0
;
return
val
.
map
((
item
)
=>
({
value
:
item
.
value
,
label
:
item
.
text
}));
},
TEXT_SELECT
:
(
val
)
=>
{
if
(
!
Array
.
isArray
(
val
))
return
void
0
;
return
val
.
map
((
item
)
=>
({
value
:
item
.
value
,
label
:
item
.
text
,
}))
.
filter
((
item
)
=>
item
.
value
||
item
.
value
===
0
||
item
.
label
);
},
};
src/apollo-table/component/base/_utils/setFormatter.tsx
View file @
5004ef0e
import
{
isNumber
}
from
'@/apollo-table/utils/utils'
;
export
const
formatStr
=
'YYYY-MM-DD HH:mm:ss'
;
export
const
emptyModel
=
[{
text
:
''
,
value
:
''
}];
...
...
@@ -8,16 +10,6 @@ export const SetFormatter = {
}
return
[{
value
:
value
,
text
:
value
}];
},
SEARCH
:
(
val
)
=>
{
if
(
!
val
||
typeof
val
!==
'object'
)
return
val
;
if
(
typeof
val
===
'object'
)
{
const
values
=
Array
.
isArray
(
val
)
?
val
:
[
val
];
return
values
.
map
((
item
)
=>
({
value
:
item
.
fieldValueValue
||
item
.
key
,
text
:
item
.
fieldValueName
||
item
.
label
,
}));
}
},
TEXTAREA
:
(
value
)
=>
{
if
(
!
value
)
{
return
emptyModel
;
...
...
@@ -41,26 +33,32 @@ export const SetFormatter = {
},
SELECT
:
(
val
)
=>
{
// 处理成[{}]结构
if
(
!
val
)
return
val
;
if
(
typeof
val
===
'object'
)
{
const
values
=
Array
.
isArray
(
val
)
?
val
:
[
val
];
return
values
.
map
((
item
)
=>
({
value
:
item
.
key
,
text
:
item
.
label
}));
}
return
val
;
if
(
!
val
||
typeof
val
!==
'object'
)
return
emptyModel
;
const
values
=
Array
.
isArray
(
val
)
?
val
:
[
val
];
return
values
.
map
((
item
)
=>
({
value
:
item
.
key
,
text
:
item
.
label
}));
},
MULTIPLE_SELECT
:
(
val
)
=>
{
// 处理成[{}]结构
if
(
!
val
)
return
val
;
if
(
typeof
val
===
'object'
)
{
const
values
=
Array
.
isArray
(
val
)
?
val
:
[
val
];
return
values
.
map
((
item
)
=>
({
value
:
item
.
key
,
text
:
item
.
label
}));
}
return
val
;
return
SetFormatter
.
SELECT
(
val
);
},
TEXT_SELECT
:
(
val
)
=>
{
return
SetFormatter
.
SELECT
(
val
);
},
SEARCH
:
(
val
)
=>
{
if
(
!
val
||
typeof
val
!==
'object'
)
return
emptyModel
;
const
values
=
Array
.
isArray
(
val
)
?
val
:
[
val
];
return
values
.
map
((
item
)
=>
({
value
:
item
.
fieldValueValue
||
item
.
key
,
text
:
item
.
fieldValueName
||
item
.
label
,
}));
},
MULTIPLE_SEARCH
:
(
val
)
=>
{
return
SetFormatter
.
SEARCH
(
val
);
},
RATE
:
(
val
)
=>
{
return
[{
value
:
val
,
text
:
val
}];
},
NUMBER
:
(
val
)
=>
{
if
(
!
isNumber
(
val
))
return
emptyModel
;
return
[{
value
:
val
,
text
:
val
}];
},
PERCENTAGE
:
(
event
)
=>
{
...
...
@@ -87,16 +85,6 @@ export const SetFormatter = {
LINK
:
(
val
)
=>
{
return
Array
.
isArray
(
val
)
&&
val
.
length
>
0
?
val
:
[
emptyModel
];
},
MULTIPLE_SEARCH
:
(
val
)
=>
{
if
(
!
val
||
typeof
val
!==
'object'
)
return
val
;
if
(
typeof
val
===
'object'
)
{
const
values
=
Array
.
isArray
(
val
)
?
val
:
[
val
];
return
values
.
map
((
item
)
=>
({
value
:
item
.
fieldValueValue
||
item
.
key
,
text
:
item
.
fieldValueName
||
item
.
label
,
}));
}
},
TREE_SELECT
:
(
val
)
=>
{
if
(
!
val
||
typeof
val
!==
'object'
)
return
val
;
if
(
typeof
val
===
'object'
)
{
...
...
@@ -104,13 +92,4 @@ export const SetFormatter = {
return
values
.
map
((
item
)
=>
({
value
:
item
.
value
,
text
:
item
.
label
}));
}
},
TEXT_SELECT
:
(
val
)
=>
{
// 处理成[{}]结构
if
(
!
val
)
return
val
;
if
(
typeof
val
===
'object'
)
{
const
values
=
Array
.
isArray
(
val
)
?
val
:
[
val
];
return
values
.
map
((
item
)
=>
({
value
:
item
.
value
,
text
:
item
.
label
}));
}
return
val
;
},
};
src/apollo-table/component/base/config.tsx
View file @
5004ef0e
...
...
@@ -133,17 +133,18 @@ export const config: any = {
setFormatter
:
SetFormatter
[
'MULTIPLE_SEARCH'
],
componentAttr
:
{
allowClear
:
true
,
emitTrigger
:
'onBlur'
,
},
detail
:
require
(
'./detail/multiple-search'
).
default
,
},
//
'14': {
//
name: '树组件',
//
component: require('./edit/tree-select').default,
//
placeholder: '请选择',
//
getFormatter: GetFormatter['TREE_SELECT'],
//
setFormatter: SetFormatter['TREE_SELECT'],
//
detail: require('./detail/tree-select').default,
//
},
'14'
:
{
name
:
'树组件'
,
component
:
require
(
'./edit/tree-select'
).
default
,
placeholder
:
'请选择'
,
getFormatter
:
GetFormatter
[
'TREE_SELECT'
],
setFormatter
:
SetFormatter
[
'TREE_SELECT'
],
detail
:
require
(
'./detail/tree-select'
).
default
,
},
'15'
:
{
name
:
'文本选择'
,
component
:
require
(
'./edit/text-select'
).
default
,
...
...
@@ -151,6 +152,7 @@ export const config: any = {
setFormatter
:
SetFormatter
[
'TEXT_SELECT'
],
componentAttr
:
{
allowClear
:
true
,
emitTrigger
:
'onBlur'
,
},
detail
:
require
(
'./detail/text-select'
).
default
,
},
...
...
src/apollo-table/component/base/edit/checkbox/index.tsx
View file @
5004ef0e
...
...
@@ -42,10 +42,11 @@ const ApolloCheckboxGroup = (props: ApolloCheckboxGroupProps) => {
const
{
onChange
,
emitTrigger
,
onEmitChange
}
=
props
;
const
selfProps
=
antiAssign
(
props
,
[
'value'
,
'onChange'
,
'emitTrigger'
,
'onEmitChange'
]);
const
[
value
,
setValue
]
=
useState
(
props
.
value
);
const
dom
=
useRef
(
value
);
useEffect
(()
=>
{
setValue
(
props
.
value
);
},
[
props
.
value
]);
const
dom
=
useRef
();
const
changeValue
=
(
value
)
=>
{
setValue
(
value
);
dom
.
current
=
value
;
...
...
src/apollo-table/component/base/edit/editInterface.tsx
View file @
5004ef0e
...
...
@@ -3,6 +3,7 @@ import { TextAreaProps, InputProps } from 'antd/es/input';
import
{
InputNumberProps
}
from
'antd/es/input-number'
;
import
{
SelectProps
}
from
'antd/es/select'
;
import
{
CheckboxProps
,
CheckboxGroupProps
}
from
'antd/es/checkbox'
;
import
{
TreeSelectProps
}
from
'antd/es/tree-select'
;
export
interface
LinkData
{
text
?:
string
;
...
...
@@ -23,12 +24,15 @@ export interface ApolloLinkProps extends CommonProps {
export
interface
ApolloTextAreaProps
extends
TextAreaProps
,
CommonProps
{
value
:
string
|
undefined
;
}
export
interface
SearchProps
extends
CommonProps
{
export
interface
ApolloSearchProps
extends
SelectProps
,
CommonProps
{
type
:
string
;
request
:
Function
;
isMultiple
?:
boolean
;
maxCount
?:
number
;
tableId
?:
number
;
paramsJson
?:
any
;
}
export
interface
ApolloInputSearchProps
extends
SelectProps
,
CommonProps
{
type
:
string
;
request
:
Function
;
}
export
interface
ApolloSelectProps
extends
SelectProps
,
CommonProps
{
isMultiple
?:
boolean
;
...
...
@@ -51,3 +55,8 @@ export interface ApolloCheckboxProps extends CheckboxProps, CommonProps {
label
:
string
;
}
export
interface
ApolloCheckboxGroupProps
extends
CheckboxGroupProps
,
CommonProps
{}
export
interface
ApolloTreeSelectProps
extends
CommonProps
{
isMultiple
?:
boolean
;
onChange
:
Function
;
value
:
any
;
}
src/apollo-table/component/base/edit/search/index.less
View file @
5004ef0e
.searchContainer {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
.select {
width: 100%;
height: 100%;
border-radius: 0;
:global(.ant-select-selection--single) {
height: 100%;
border-radius: 0;
}
}
:global(.ant-select-selection--multiple .ant-select-selection__choice) {
background: rgb(233, 238, 249);
}
...
...
src/apollo-table/component/base/edit/search/index.tsx
View file @
5004ef0e
import
React
from
'react'
;
import
React
,
{
useEffect
,
useState
}
from
'react'
;
import
Search
from
'../../extra/associationSearch'
;
import
{
approvalBusinessData
}
from
'../../../../services/globalSearchApi'
;
import
s
from
'./index.less'
;
import
{
message
}
from
'antd'
;
import
{
SearchProps
}
from
'../editInterface'
;
import
{
ApolloSearchProps
}
from
'../editInterface'
;
import
{
antiAssign
}
from
'@/apollo-table/utils/utils'
;
import
s
from
'./index.less'
;
export
default
function
(
props
:
SearchProps
)
{
const
{
value
=
[],
onChange
,
maxCount
,
isMultiple
,
paramsJson
=
{},
type
,
tableId
}
=
props
;
const
changeValue
=
(...
arg
)
=>
{
const
currentValue
=
arg
[
0
]
||
[];
if
(
maxCount
&&
maxCount
<=
value
.
length
&&
currentValue
.
length
>
value
.
length
)
{
message
.
warn
(
`最多选择
${
maxCount
}
`
);
const
ApolloSearch
=
(
props
:
ApolloSearchProps
)
=>
{
const
{
onChange
,
maxCount
,
isMultiple
,
request
,
type
,
emitTrigger
,
onEmitChange
}
=
props
;
const
selfProps
=
antiAssign
(
props
,
[
'columnConfig'
,
'value'
,
'onChange'
,
'emitTrigger'
,
'onEmitChange'
,
'isMultiple'
,
'options'
,
'request'
,
]);
const
[
value
,
setValue
]
=
useState
(
props
.
value
);
useEffect
(()
=>
{
setValue
(
props
.
value
);
},
[
props
.
value
]);
const
changeValue
=
(
value
)
=>
{
if
(
maxCount
&&
maxCount
<
value
.
length
)
{
message
.
warn
(
`最多选择
${
maxCount
}
个`
);
return
;
}
setValue
(
value
);
if
(
typeof
onChange
===
'function'
)
{
onChange
(...
arg
);
onChange
(
value
,
value
);
}
if
(
!
emitTrigger
||
emitTrigger
===
'onChange'
)
{
emitChange
(
value
,
value
);
}
};
if
(
tableId
)
{
paramsJson
.
tableId
=
tableId
;
const
emitChange
=
(
value
,
option
)
=>
{
if
(
typeof
onEmitChange
===
'function'
)
{
onEmitChange
(
value
,
option
);
}
};
const
onBlur
=
()
=>
{
emitChange
(
value
,
value
);
};
if
(
emitTrigger
===
'onBlur'
)
{
selfProps
.
onBlur
=
onBlur
;
}
if
(
isMultiple
)
{
selfProps
.
mode
=
'multiple'
;
}
return
(
<
div
className=
{
s
.
searchContainer
}
>
<
Search
mode=
{
isMultiple
?
'multiple'
:
undefined
}
maxCount=
{
2
}
className=
{
s
.
select
}
request=
{
(
val
)
=>
{
return
approvalBusinessData
({
name
:
val
,
fieldValueName
:
type
,
paramsJson
:
JSON
.
stringify
(
paramsJson
),
});
return
request
({
name
:
val
,
fieldValueName
:
type
});
}
}
fieldNames=
{
{
value
:
'fieldValueValue'
,
label
:
'fieldValueName'
}
}
{
...
props
}
{
...
selfProps
}
value=
{
value
}
onChange=
{
changeValue
}
initDataType=
"onfocus"
/>
</
div
>
);
}
};
export
default
ApolloSearch
;
src/apollo-table/component/base/edit/text-select/index.less
0 → 100644
View file @
5004ef0e
.searchContainer {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
.select {
width: 100%;
height: 100%;
border-radius: 0;
:global(.ant-select-selection--single) {
height: 100%;
border-radius: 0;
}
}
:global(.ant-select-selection--multiple .ant-select-selection__choice) {
background: rgb(233, 238, 249);
}
}
src/apollo-table/component/base/edit/text-select/index.tsx
View file @
5004ef0e
import
React
from
'react'
;
import
Search
from
'../../extra/dataEntry/textSelect'
;
import
{
approvalBusinessData
}
from
'../../../../services/globalSearchApi'
;
export
default
function
(
props
)
{
const
onChange
=
(...
arg
)
=>
{
props
.
onChange
&&
props
.
onChange
(...
arg
);
import
React
,
{
useEffect
,
useRef
,
useState
}
from
'react'
;
import
InputSearch
from
'../../extra/dataEntry/textSelect'
;
import
{
ApolloInputSearchProps
}
from
'../editInterface'
;
import
{
antiAssign
}
from
'@/apollo-table/utils/utils'
;
import
s
from
'./index.less'
;
const
ApolloInputSearch
=
(
props
:
ApolloInputSearchProps
)
=>
{
const
{
onChange
,
request
,
type
,
emitTrigger
,
onEmitChange
}
=
props
;
const
selfProps
=
antiAssign
(
props
,
[
'columnConfig'
,
'value'
,
'onChange'
,
'emitTrigger'
,
'onEmitChange'
,
'request'
,
]);
const
[
value
,
setValue
]
=
useState
(
props
.
value
);
const
dom
=
useRef
(
value
);
useEffect
(()
=>
{
setValue
(
props
.
value
);
},
[
props
.
value
]);
const
changeValue
=
(
value
)
=>
{
setValue
(
value
);
dom
.
current
=
value
;
if
(
typeof
onChange
===
'function'
)
{
onChange
(
value
,
value
);
}
if
(
!
emitTrigger
||
emitTrigger
===
'onChange'
)
{
emitChange
(
value
,
value
);
}
};
const
emitChange
=
(
value
,
option
)
=>
{
if
(
typeof
onEmitChange
===
'function'
)
{
onEmitChange
(
value
,
option
);
}
};
const
onBlur
=
()
=>
{
if
(
!
dom
.
current
)
{
}
emitChange
(
dom
.
current
,
dom
.
current
);
};
if
(
emitTrigger
===
'onBlur'
)
{
selfProps
.
onBlur
=
onBlur
;
}
useEffect
(()
=>
{
document
.
addEventListener
(
'click'
,
onBlur
,
false
);
return
()
=>
{
document
.
removeEventListener
(
'click'
,
onBlur
,
false
);
};
},
[]);
const
onClick
=
(
e
)
=>
{
e
.
stopPropagation
();
//阻止事件冒泡
e
.
nativeEvent
.
stopImmediatePropagation
();
};
return
(
<
div
>
<
Search
request=
{
(
val
)
=>
approvalBusinessData
({
name
:
val
,
fieldValueName
:
props
.
type
})
}
<
div
className=
{
s
.
searchContainer
}
onClick=
{
onClick
}
>
<
InputSearch
className=
{
s
.
select
}
request=
{
(
val
)
=>
request
({
name
:
val
,
fieldValueName
:
type
})
}
fieldNames=
{
{
value
:
'fieldValueValue'
,
label
:
'fieldValueName'
}
}
{
...
props
}
onChange=
{
onChange
}
></
Search
>
{
...
selfProps
}
onChange=
{
changeValue
}
value=
{
value
}
initDataType=
"onfocus"
/>
</
div
>
);
}
};
export
default
ApolloInputSearch
;
src/apollo-table/component/base/edit/tree-select/index.less
0 → 100644
View file @
5004ef0e
.container {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 0;
.search {
width: 100%;
height: 100%;
border-radius: 0;
:global(.ant-select-selection--single) {
height: 100%;
border-radius: 0;
}
}
:global(.ant-select-selection--multiple .ant-select-selection__choice) {
background: rgb(233, 238, 249);
}
}
src/apollo-table/component/base/edit/tree-select/index.tsx
View file @
5004ef0e
import
React
from
'react'
;
import
React
,
{
useEffect
,
useRef
,
useState
}
from
'react'
;
import
Search
from
'../../extra/orgTreeSelect'
;
import
{
ApolloTreeSelectProps
}
from
'../editInterface'
;
import
{
antiAssign
}
from
'@/apollo-table/utils/utils'
;
import
s
from
'./index.less'
;
export
default
function
(
props
)
{
const
isMultiple
=
props
.
isMultiple
||
false
;
const
ApolloTreeSelect
=
(
props
:
ApolloTreeSelectProps
)
=>
{
const
{
onChange
,
emitTrigger
,
onEmitChange
,
isMultiple
}
=
props
;
debugger
const
selfProps
=
antiAssign
(
props
,
[
'columnConfig'
,
'value'
,
'onChange'
,
'emitTrigger'
,
'onEmitChange'
,
'isMultiple'
,
]);
const
[
value
,
setValue
]
=
useState
(
props
.
value
);
const
dom
=
useRef
(
value
);
useEffect
(()
=>
{
setValue
(
props
.
value
);
},
[
props
.
value
]);
const
changeValue
=
(
value
)
=>
{
setValue
(
value
);
dom
.
current
=
value
;
if
(
typeof
onChange
===
'function'
)
{
onChange
(
value
,
value
);
}
if
(
!
emitTrigger
||
emitTrigger
===
'onChange'
)
{
emitChange
(
value
,
value
);
}
};
const
emitChange
=
(
value
,
option
)
=>
{
if
(
typeof
onEmitChange
===
'function'
)
{
onEmitChange
(
value
,
option
);
}
};
const
onBlur
=
()
=>
{
if
(
!
dom
.
current
)
{
}
emitChange
(
dom
.
current
,
dom
.
current
);
};
if
(
emitTrigger
===
'onBlur'
)
{
selfProps
.
onBlur
=
onBlur
;
}
useEffect
(()
=>
{
document
.
addEventListener
(
'click'
,
onBlur
,
false
);
return
()
=>
{
document
.
removeEventListener
(
'click'
,
onBlur
,
false
);
};
},
[]);
const
onClick
=
(
e
)
=>
{
e
.
stopPropagation
();
//阻止事件冒泡
e
.
nativeEvent
.
stopImmediatePropagation
();
};
return
(
<
Search
mode=
"org"
dropdownStyle=
{
{
width
:
props
.
width
||
270
,
maxHeight
:
'300px'
}
}
multiple=
{
isMultiple
}
{
...
props
}
/>
<
div
className=
{
s
.
container
}
onClick=
{
onClick
}
>
<
Search
className=
{
s
.
search
}
multiple=
{
isMultiple
}
mode=
"org"
{
...
selfProps
}
value=
{
value
}
onChange=
{
changeValue
}
initDataType=
"onfocus"
/>
</
div
>
);
}
};
export
default
ApolloTreeSelect
;
src/apollo-table/component/base/extra/associationSearch/index.tsx
View file @
5004ef0e
...
...
@@ -10,6 +10,7 @@ interface Props {
selfCom
?:
any
;
dataSource
?:
[];
onChange
:
Function
;
onBlur
?:
Function
;
value
?:
any
;
autoFocus
?:
boolean
;
mode
?:
'multiple'
|
'tags'
|
undefined
;
...
...
@@ -104,7 +105,11 @@ class AssociationSearch extends React.Component<Props> {
};
onBlur
=
()
=>
{
const
{
onBlur
}
=
this
.
props
;
this
.
setState
({
searchStr
:
''
,
canFocus
:
true
});
if
(
typeof
onBlur
===
'function'
)
{
onBlur
();
}
};
formaterData
=
(
data
:
any
)
=>
{
...
...
src/apollo-table/component/base/extra/dataEntry/textSelect/index.tsx
View file @
5004ef0e
...
...
@@ -28,8 +28,8 @@ interface State {
searchStr
:
string
;
list
:
any
[];
loading
:
boolean
;
selected
:
any
[]
|
undefined
;
tempSelected
:
any
[]
|
undefined
;
selected
:
any
;
tempSelected
:
any
;
tempVisible
:
boolean
;
}
class
TextSelect
extends
React
.
Component
<
Props
,
State
>
{
...
...
@@ -54,11 +54,11 @@ class TextSelect extends React.Component<Props, State> {
static
getDerivedStateFromProps
(
nextProps
,
prevState
)
{
if
(
JSON
.
stringify
(
nextProps
.
value
)
!==
JSON
.
stringify
(
prevState
.
tempSelected
))
{
const
[
first
]
=
nextProps
.
value
||
[]
;
const
searchStr
=
first
?
first
.
label
||
first
.
text
:
''
;
const
data
=
nextProps
.
value
||
{}
;
const
searchStr
=
data
.
label
||
data
.
text
;
return
{
tempSelected
:
nextProps
.
value
||
[]
,
selected
:
nextProps
.
value
,
tempSelected
:
data
,
selected
:
data
,
searchStr
,
};
}
...
...
@@ -106,7 +106,7 @@ class TextSelect extends React.Component<Props, State> {
};
onResetValue
=
(
searchStr
)
=>
{
return
[{
value
:
''
,
label
:
searchStr
}]
;
return
{
value
:
''
,
label
:
searchStr
}
;
};
onSearch
=
(
e
)
=>
{
...
...
@@ -126,7 +126,7 @@ class TextSelect extends React.Component<Props, State> {
onClickMenu
=
({
item
,
key
})
=>
{
const
{
props
}
=
item
||
{};
const
{
title
}
=
props
||
{};
const
selected
=
[{
label
:
title
,
value
:
key
}]
;
const
selected
=
{
label
:
title
,
value
:
key
}
;
this
.
setState
({
selected
,
searchStr
:
title
});
this
.
onVisibleChange
(
false
);
this
.
onChange
(
selected
);
...
...
@@ -162,7 +162,7 @@ class TextSelect extends React.Component<Props, State> {
<
Menu
style=
{
{
width
:
width
||
this
.
width
}
}
onClick=
{
this
.
onClickMenu
}
selectedKeys=
{
selected
?
[
selected
[
0
]
.
value
]
:
[]
}
selectedKeys=
{
selected
?
[
selected
.
value
]
:
[]
}
>
{
list
.
map
((
item
)
=>
{
return
(
...
...
src/apollo-table/component/base/extra/orgTreeSelect/index.tsx
View file @
5004ef0e
...
...
@@ -13,7 +13,7 @@ interface Props {
dropdownStyle
?:
any
}
class
OrgTreeSelect
e
extends
React
.
Component
<
Props
>
{
class
OrgTreeSelect
extends
React
.
Component
<
Props
>
{
state
=
{
value
:
undefined
,
}
...
...
@@ -67,4 +67,4 @@ class OrgTreeSelecte extends React.Component<Props> {
);
}
}
export
default
OrgTreeSelect
e
export
default
OrgTreeSelect
;
src/apollo-table/component/config.ts
View file @
5004ef0e
...
...
@@ -66,11 +66,11 @@ export const config:any = {
component
:
getComponent
(
'13'
),
icon
:
'iconziduan-lianxiangduoxuan'
,
},
//
'14': {
//
name: '树结构',
//
component: getComponent('14'),
//
icon: 'iconziduan-ren',
//
},
'14'
:
{
name
:
'树结构'
,
component
:
getComponent
(
'14'
),
icon
:
'iconziduan-ren'
,
},
'15'
:
{
name
:
'文本搜索框'
,
component
:
getComponent
(
'15'
),
...
...
src/apollo-table/utils/utils.tsx
View file @
5004ef0e
...
...
@@ -119,3 +119,15 @@ export function getMergeStyle(style: any, mergeStyle: object | Function | undefi
}
return
style
;
}
/**
* 判断数值类型
* @param data 原数据
* @returns {boolean} 是否是数值
*/
export
function
isNumber
(
data
)
{
if
(
data
===
''
||
data
===
null
||
Array
.
isArray
(
data
))
{
return
false
;
}
// eslint-disable-next-line no-restricted-globals
return
!
isNaN
(
data
);
}
src/test/demo1.tsx
View file @
5004ef0e
import
React
,
{
useState
,
useEffect
,
useCallback
}
from
'react'
;
import
_
from
'lodash'
;
import
ApolloTable
from
'../apollo-table'
;
import
{
getColumnConfig
,
getDataSource
,
addOrUpdateDataSource
}
from
'./serives'
;
import
{
getColumnConfig
,
getDataSource
,
addOrUpdateDataSource
,
approvalBusinessData
}
from
'./serives'
;
import
{
Input
,
message
,
DatePicker
}
from
'antd'
;
import
moment
from
'moment'
;
import
s
from
'./demo1.less'
;
...
...
@@ -32,7 +32,6 @@ const Demo1 = (props) => {
const
res
=
await
getColumnConfig
({
tableId
});
if
(
res
&&
res
.
success
&&
res
.
data
)
{
let
arr
=
Array
.
isArray
(
res
.
data
)
?
res
.
data
:
[];
arr
[
0
].
columnType
=
2
;
setColumns
(
formatColumns
(
arr
));
}
};
...
...
@@ -105,7 +104,7 @@ const Demo1 = (props) => {
const
value
=
moment
(
cellData
[
0
]
&&
cellData
[
0
].
value
);
return
(
<
div
className=
{
s
.
xxx
}
>
<
Input
/>
<
Input
/>
</
div
>
);
}
...
...
@@ -116,6 +115,12 @@ const Demo1 = (props) => {
item
.
renderDetailCell
=
renderDetailCell
;
// item.renderEditCell = renderEditCell;
}
if
(
Number
(
item
.
columnType
)
===
13
||
Number
(
item
.
columnType
)
===
15
)
{
item
.
columnAttrObj
.
request
=
(
data
)
=>
{
data
.
paramsJson
=
JSON
.
stringify
({
tableId
});
return
approvalBusinessData
(
data
);
};
}
return
item
;
});
return
columns
;
...
...
src/test/serives.ts
View file @
5004ef0e
...
...
@@ -44,3 +44,11 @@ export async function delData({ data }) {
export
async
function
getDetail
({
tableId
,
rowId
})
{
return
request
(
`/follow/row/
${
tableId
}
/
${
rowId
}
`
,
{
method
:
'get'
,
prefix
:
'/crmApi'
});
}
// 通用审批 模糊搜索
export
async
function
approvalBusinessData
(
params
:
any
)
{
return
request
(
'/approval/business'
,
{
method
:
'get'
,
params
,
prefix
:
'/approvalApi'
,
});
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment