PC端react表单组件
InputTooltip
import React from 'react';import { Input, Tooltip } from 'antd';const InputTooltip = (props) => { const { value, onChange = () => {}, disabled, childProps, wrapProps } = props; return ( onChange(e.target.value)} disabled={disabled} {...childProps} /> );};export default InputTooltip;SreachSelect
import React, { useState, useEffect } from 'react';import Debounce from 'lodash/debounce';import { Select, Spin, Empty, Modal, Table, Form, Input, Row, Col, Button } from 'antd';import { MoreOutlined } from '@ant-design/icons';import styles from './index.less';const SearchSelect = (props) => { const { handleSearch = () => {}, width, value, onChange = () => {}, onSaveData = () => {}, showArrow = true, showSearch = true, extraOption = {}, disabled = false, allowClear = true, defaultOptions = [], formItemProps = {}, columnConfig = [], showMore = false, rowKey = '', rowLabel = '', placeholder = '', labelInValue = false, customerChange = () => {}, isOthers = false, } = props || {}; let selectVal = value; if (typeof value === 'object') { selectVal = value?.value; defaultOptions.push(value); } const [form] = Form.useForm(); const [options, setOptions] = useState([]); const [originData, setOriginData] = useState([]); const [pagination, setPagination] = useState({ pageIndex: 1, pageSize: 10 }); const [total, setTotal] = useState(0); const [searchVal, setSearchVal] = useState(''); const [loading, setLoading] = useState(false); const [visible, setVisible] = useState(false); const [tableData, setTableData] = useState([]); const [selectedRow, setSelectedRow] = useState({}); const updateAllData = ( pageIndex, pageSize, totalCount, dataSource = [], originDataSource = [], ) => { setOptions(dataSource); setOriginData(originDataSource); onSaveData(originDataSource); setPagination({ pageIndex, pageSize }); setTotal(totalCount); setLoading(false); }; const handleScrollBottom = async (e) => { e.stopPropagation(); const { clientHeight, scrollTop, scrollHeight } = e.target; if (Math.ceil(scrollTop + clientHeight) >= scrollHeight && !loading) { const { pageIndex, pageSize } = pagination; if (pageIndex === 1 || pageIndex { setLoading(true); setOptions([]); const res = await handleSearch({ value: val, pageIndex: 1, pageSize: 10 }); updateAllData(res?.pageIndex + 1, res?.pageSize, res?.total, res?.data, res?.originData); setSearchVal(val); }, 500); const addExtraOption = (obj = {}) => { if (obj?.value && options?.filter(item => item?.value === obj?.value)?.length { const val = form?.getFieldsValue()?.[formItemProps?.name]; setLoading(true); let searchText = val; if (val) { searchText = val?.trim(); } const res = await handleSearch({ value: searchText, pageIndex, pageSize }); setTableData(res?.originData); setTotal(res?.total); setPagination({ pageIndex: res?.pageIndex, pageSize: res?.pageSize }); setLoading(false); }; const rowSelection = { columnWidth: 52, type: 'radio', selectedRowKeys: [selectedRow?.[rowKey]], onChange: (_, selectedRows) => { setSelectedRow(selectedRows[0]); }, getCheckboxProps: record => ({ name: record?.[rowKey], disabled: record?.disabled, }), }; const handleModalOk = () => { if (selectedRow?.[rowKey] || selectedRow?.[rowKey] === 0) { addExtraOption({ label: selectedRow?.[rowLabel], value: selectedRow?.[rowKey] }); const labelValue = { value: selectedRow?.[rowKey], key: selectedRow?.[rowKey], label: selectedRow?.[rowLabel], }; labelInValue ? onChange(labelValue) : onChange(selectedRow?.[rowKey]); customerChange(selectedRow); } setVisible(false); }; const formatData = arr => arr?.reduce((item, next) => { typeof item.find(ele => ele?.['value'] === next?.['value']) === 'undefined' && item.push({ ...next, label: next?.code ? `${next?.label}_${next?.code}` : next?.label }); return item; }, []); useEffect(() => { onSearch(''); }, []); useEffect(() => { addExtraOption(extraOption); // if (extraOption?.value && !options?.find(item => item?.value === extraOption?.value)?.value) { // setOptions([extraOption, ...options]); // } }, [extraOption?.value]); return ( { onChange(val); customerChange(originData.find(item => item?.[rowKey] === val)); }} showArrow={showArrow} filterOption={false} options={formatData([...options, ...defaultOptions])} dropdownRender={menu => ( {menu} {loading && options?.length > 0 ? ( ) : null} )} onSearch={val => onSearch(val ? val?.trim() : val)} allowClear={allowClear} onClear={() => onSearch('')} virtual={false} onPopupScroll={e => handleScrollBottom(e)} notFoundContent={loading ? : } // getPopupContainer={triggerNode => triggerNode.parentElement} suffixIcon={ selectVal || !showMore || disabled ? null : ( { setVisible(true); onPageChange();}} /> ) } labelInValue={labelInValue} /> {visible && ( handleModalOk()} onCancel={() => setVisible(false)} width={800} > ({onClick: () => { if (record?.disabled) { return; } setSelectedRow(record);}, })} pagination={{current: pagination.pageIndex,total,pageSizeOptions: ['5', '10', '15', '20', '30'],pageSize: isOthers ? pagination.pageSize + 1 : pagination.pageSize,size: 'small', }} dataSource={tableData} columns={columnConfig} count={total} loading={loading} scroll={{ x: columnConfig.reduce((pre, cur) => pre + cur.width), y: 300 }} onChange={page => onPageChange(page.current, page.pageSize)} rowSelection={rowSelection} /> )} );};export default SearchSelect;
MyDatePicker
import React, { Component } from 'react';import { DatePicker } from 'antd';import moment from 'moment';class MyDatePicker extends Component { render() { const { value, onChange = () => {}, format, ...rest } = this.props; return ( 0 ? moment(value) : null} format={format} onChange={val => onChange(val ? moment(val).format(format) : null)} /> ); }}export default MyDatePicker;
MyFormItem
import React from 'react';import { Form, Input, Select, InputNumber } from 'antd';import MyDatePicker from '@/pages/bigclientmanage/add/components/MyDatePicker';import SearchSelect from '@/components/SearchSelect';import InputTooltip from '@/components/InputTooltip';const MyFormItem = (props) => { const { type, label, name, rules, childProps, wrapProps } = props || {}; let childNode = ; switch (type) { case 'Input': childNode = ; break; case 'Select': childNode = ; break; case 'MultipleSelect': childNode = ( ); break; case 'InputNumber': childNode = ( ); break; case 'DatePicker': childNode = ; break; case 'SearchSelect': childNode = ; break; case 'InputTooltip': childNode = ; break; default: break; } return ( {childNode} );};export default MyFormItem;