Commit 5004ef0e authored by zhangwenshuai's avatar zhangwenshuai

修改模糊搜索、可输可选组件

parent ed397fd5
......@@ -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;
......
......@@ -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);
},
};
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;
},
};
......@@ -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,
},
......
......@@ -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;
......
......@@ -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;
}
.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);
}
......
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;
.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);
}
}
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;
.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);
}
}
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;
......@@ -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) => {
......
......@@ -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 (
......
......@@ -13,7 +13,7 @@ interface Props {
dropdownStyle?: any
}
class OrgTreeSelecte 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 OrgTreeSelecte
export default OrgTreeSelect;
......@@ -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'),
......
......@@ -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);
}
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;
......
......@@ -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',
});
}
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