woo-table v1.0.11

woo-table

​ 这是一个高度封装的Table、Form和Modal组件；在实际项目里,主要是将增删改查的逻辑整合到一起，表单的状态控制全部交给组件来处理配，置按钮和对应的接口即可，不需要再处理组件的状态；

安装使用

npm i woo-table

example

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'dva';
import QueueAnim from 'rc-queue-anim';
import { Button, Tag } from 'antd';
import {
    Table,
    inputFormItem,
    selectFormItem,
} from 'woo-table';
import { dateSelectFormItem } from 'woo-table/build/component/form/formItemConfig';
import { INPUT_TYPES } from 'woo-table/build/component/form';
import { getModalInstance } from "woo-table/build/component/modalConfig";
import moment from 'moment';
import {downFile} from '../../utils';
import {Badges} from '../../components';
import {exportApplyExcel} from "../../services/apply";
import {APPLY_TYPE_DICT, AUDIT_STATUS_DICT, getDictLabel} from "../../constants/dict";

const workFlow = ({
    dispatch,
    apply,
}) => {
    const columns = [
        {
            title: '客户号',
            key: 'user_id',
            dataIndex: 'user_id',
        }, {
            title: '手机号码',
            key: 'mobile',
            dataIndex: 'mobile',
        },
        {
            title: '姓名',
            key: 'name',
            dataIndex: 'name',
        },
        {
            title: '身份证号',
            key: 'id_card',
            dataIndex: 'id_card',
        },
        {
            title: '申请类型',
            key: 'apply_type',
            dataIndex: 'apply_type',
            render: (text) => {
                const target = APPLY_TYPE_DICT.find((item) => item.key === text);
                if (target && target.color && target.label) {
                    return (
                        <Tag color={target.color}>
                            {target.label}
                        </Tag>
                    );
                }
            },
            filters: APPLY_TYPE_DICT.map((item) => ({
                text: item.label,
                value: item.key,
            })),
        }, {
            title: '信审状态',
            key: 'audit_result',
            dataIndex: 'audit_result',
            render: (text) => (
                <Badges status={text} text={getDictLabel(text, AUDIT_STATUS_DICT)} />
            ),
            filters: AUDIT_STATUS_DICT.map((item) => ({
                text: item.label,
                value: item.key,
            })),
        }, {
            title: '信审申请时间',
            key: 'audit_apply_time',
            dataIndex: 'audit_apply_time',
            render: (time) => time && moment(time).format('YYYY/MM/DD HH:MM:SS'),
        }, {
            title: '信审结果时间',
            key: 'audit_end_time',
            dataIndex: 'audit_end_time',
            render: (time) => time && moment(time).format('YYYY/MM/DD HH:MM:SS'),
        }, {
            title: '额度值',
            key: 'limit',
            dataIndex: 'limit',
        }, {
            title: '模型分数',
            key: 'model_score',
            dataIndex: 'model_score',
        },
        {
            title: '渠道',
            key: 'channel',
            dataIndex: 'channel',
        },
    ];
    const { fetchParams, channel } = apply;
    const fetchData = ({keyword, page, size, searchParams}) => {
        dispatch({
            type: 'apply/getApply',
            payload: {
                mobile: keyword,
                page,
                size,
                ...searchParams,
                apply_type: searchParams.apply_type && searchParams.apply_type.join(','),
                audit_result: searchParams.audit_result && searchParams.audit_result.join(','),
                applyStartTime: searchParams.audit_apply_time && searchParams.audit_apply_time[0] && searchParams.audit_apply_time[0].format('YYYY-MM-DD'),
                applyEndTime: searchParams.audit_apply_time && searchParams.audit_apply_time[1] && searchParams.audit_apply_time[1].format('YYYY-MM-DD'),
                audit_apply_time: '',
            },
        });
    };
    const renderOperate = () => (
        <Button
            icon="download"
            type={'primary'}
            onClick={async () => {
                const result = await exportApplyExcel(fetchParams);
                if (result && result.success) {
                    downFile(result.data, result.filename);
                }
            }}
            style={{marginBottom: 16}}>导出</Button>
    );
    const getLabel = (record) => {
        return [
            {
                label: 'label',
                key: 'modalKey',
            },
        ];
    };
    const getOperationEdit = () => {
        return [
            getModalInstance({
                key: 'modalKey',
                onOk: (dataSource, value) => new Promise((resolve, reject) => {
                    console.log('onOk', dataSource, value);
                }),
                formColumns: [
                    inputFormItem({
                        key: 'mobile',
                        title: '模态文本',
                    }),
                ],
            }),
        ];
    };
    return (
        <QueueAnim>
            <div key='title' className='fontPageTitle'>进件管理</div>
            <img src={require('../../assets/icon_apply.png')} style={{height: 16, width: 16}}/>
            <div style={{backgroundColor:'white', padding: 24}}>
                <Table
                    filter={[
                        inputFormItem({key: 'user_id', title: '客户号', rules:[]}),
                        inputFormItem({key: 'mobile', title: '手机号码', rules:[]}),
                        selectFormItem({key: 'channel', title: '渠道', rules:[], dict: channel.map((item) => ({key: item, label: item})), allowClear: true}),
                        dateSelectFormItem({key: 'audit_apply_time', title: '申请时间', rules:[]}),
                        {
                            type: INPUT_TYPES.PLACEHOLDER,
                        },
                    ]}
                    filterOperate={renderOperate}
                    filterCol={3}
                    scroll={{x: 1500}}
                    columns={columns}
                    fetchData={fetchData}
                    data={apply.dataSource}
                    operationEdit={getOperationEdit()}
                    operationEditLabel={(record) => getLabel(record)}
                />
            </div>
        </QueueAnim>
    );
};

workFlow.propTypes = {
    workFlow: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({apply, loading}) => ({apply, loading}))(workFlow);

参数

operationEdit说明

getModalInstance 在 woo-table/build/component/modalConfig中引用

输入arraymodalInstance，下面说明modalInstance;

modalInstance = getModalInstance();

getModalInstance说明

formItem