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);

参数

参数	说明	类型
filter	表单上不的过滤条件组件（客户号...申请时间等）	array[formItem]
filterOperate	表单和过滤组件之前的操作组件（导出）	array[{key, ReactElement}]
scroll	同antd组件中的table
filterCol	filter样式，排3列或2列	2\|3
columns	同antd组件中的table
fetchData	获取数据函数，在组件第一次加载时会默认回调一次。以后每次点击查询、改变表单columns中的搜索条件、改变页码，都会回调该函数。	function({page, size, searchParams})
	page:页码；size:每页条数，searchParams根据filter和columns的的filters中所有设置的参数回调
data		object: {dataSource, total}
	dataSource: 同antd组件中的table;total:页码总数
operationEdit	详情见operationEdit说明
operationEditLabel	操作栏展示的按钮；key标识，必须能和比配到operationEditItem中的key；lable展示文本	(record) =>[{key, label}]

operationEdit说明

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

输入array[modalInstance]，下面说明modalInstance;

modalInstance = getModalInstance();

getModalInstance说明

参数	说明	类型
key	必须有，而且需要operationEditLabel中能找到对应的key	string
label	操作按钮展示文本	object
interactionType	点击按钮时的交互方式	MODAL\|FETCH
okText	交互为MODAL时，弹框确认按钮文本
cancelText	交互为MODAL时，弹框取消按钮文本
getDataWhenClick	交互为MODAL时，点击按钮后触发的函数，函数带有该列的数据（record）	function(record)
onOk	交互为MODAL时，点击确认按钮后触发的函数，函数带有该列的数据和modal展示的数据（dataSource， value）; 该函数必须返回Promise对象，当有resolve时弹框才会消失，reject时弹框不消失	(dataSource, value) = > new Promise()
onCancel	同onOk
formColumns	交互为MODAL时，弹框展示的内容（和Form二选一）	array[formItemt]
Form	交互为MODAL时，弹框展示的内容（和formColumns二选一）	Form
notRefresh	onOk成功resolve后是否不触发fetchData	boolean

formItem

参数	说明
key	会作为fetchData回调的key
title	在formItem的展示文本
type	类型INPUT_TYPES（BUTTON: 'BUTTON', // 按钮 TEXT: 'TEXT', // 仅展示 INPUT_AREA: 'TEXT_AREA', // 大量输入 INPUT: 'INPUT', // 输入 SELECT: 'SELECT', // 选择 DATE_SELECT: 'DATE_SELECT', // 日期选择 PLACEHOLDER: 'PLACEHOLDER', // 占位 CASCADER: 'CASCADER', // 级联选择(省市区) NUMBER: 'NUMBER', // 数字 IMAGE: 'IMAGE', IMAGE_SELECTOR: 'IMAGE_SELECTOR',）	form/index.js
disabled	是否可用
underControl	是否受控，指定另外一个formItem的key，如果他的值为设定的value时才渲染	array[{key,value}]
placeholder
rules	通antd 中form的校验规则

wooter-s / woo-table Goto Github PK

woo-table's Introduction

woo-table

安装使用

example

参数

operationEdit说明

getModalInstance说明

formItem

woo-table's People

Contributors

Stargazers

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent