将dataview拆分到submodule

components/DataView/_selfColumn.js

+/* eslint-disable */
+import styles from './index.less';
+import { contractCategory } from '@/utils/enumNo2';
+import { FEE_APPLY_TYPE_LIST, CONTRACT_ARCHIVE_STATUS, PROJECT_TYPE } from '@/utils/enum';
+import { getOptionName, thousandSeparatorFixed } from '@/utils/utils';
+import { renderTxt, renderPopTable } from '@/utils/hoverPopover';
+import AuthButton from '@/components/AuthButton';
+import BIButton from '@/ant_components/BIButton';
+
+function getColor(id) {
+    // 1:待审批 2:审批中 3:审批通过 4:审批未通过 5:审批撤销 6 审批流程启动失败
+    switch (id) {
+        case 1:
+        case 2:
+            return '#FFB63E';
+        case 3:
+            return '#04B4AD';
+        case 4:
+            return '#EC6D68';
+        case 5:
+            return '#8C97A3';
+        default:
+            return '#848F9B';
+    }
+}
+
+// 获取table列表头
+export function columnsFn(props) {
+    const columns = [
+        {
+            title: '序列',
+            dataIndex: 'index',
+            align: 'center',
+            render: (...argu) => {
+                return argu[2] + 1;
+            },
+            width: 50,
+        },
+        {
+            title: '项目名称',
+            dataIndex: 'contractProjectName',
+            render: (text) => {
+                return text && renderTxt(text);
+            },
+            width: 110,
+        },
+        {
+            title: '项目类型',
+            dataIndex: 'contractProjectType',
+            render: (text) => {
+                return text && getOptionName(PROJECT_TYPE, text);
+            },
+            width: 60,
+        },
+        {
+            title: '客户名称',
+            dataIndex: 'customers',
+            width: 110,
+            render: (text) => {
+                return text && renderTxt(text);
+            },
+        },
+        {
+            title: '合同名称',
+            dataIndex: 'contractName',
+            width: 110,
+            render: (text) => {
+                return text && renderTxt(text);
+            },
+        },
+        {
+            title: '艺人/博主',
+            dataIndex: 'talents',
+            render: (text) => {
+                return text && renderTxt(text);
+            },
+            width: 110,
+        },
+        {
+            title: '合同总金额',
+            dataIndex: 'contractMoneyTotal',
+            render: (text) => {
+                return `${thousandSeparatorFixed(text)}元`;
+            },
+            width: 110,
+        },
+        {
+            title: '执行进度',
+            dataIndex: 'contractProgress',
+            width: 90,
+            render: (text, record) => {
+                const content = (text && `${(text * 100).toFixed(2)}%`) || '0.00%';
+                const contractAppointmentList = (record.contractAppointmentList || []).map((item, index) => {
+                    return {
+                        ...item,
+                        index,
+                    };
+                });
+                const column = [
+                    {
+                        title: '艺人/博主',
+                        dataIndex: 'contractAppointmentTalentName',
+                        render: (text) => {
+                            return text && renderTxt(text);
+                        },
+                        width: 100,
+                        className: styles.columnHeader,
+                    },
+                    {
+                        title: '执行进度',
+                        className: styles.columnHeader,
+                        dataIndex: 'contractAppointmentProgress',
+                        render: (word) => {
+                            return (word && `${(word * 100).toFixed(2)}%`) || '0.00%';
+                        },
+                        width: 80,
+                    },
+                    {
+                        title: '进度更新时间',
+                        className: styles.columnHeader,
+                        dataIndex: 'contractAppointmentCreatedAt',
+                        render: (text) => {
+                            return text && text.slice(0, 10);
+                        },
+                        width: 100,
+                    },
+                ];
+                return renderPopTable(content, column, contractAppointmentList, styles.tableClass);
+            },
+        },
+        {
+            title: '开票进度',
+            dataIndex: 'invoiceMoney',
+            width: 110,
+            render: (text, record) => {
+                const result = text ? text.split('/') : [0, 0];
+                const left = Number(result[0]) === 0 ? 0 : thousandSeparatorFixed(result[0]);
+                const right = Number(result[1]) === 0 ? 0 : thousandSeparatorFixed(result[1]);
+                const content = `${left === 'null' ? 0 : left}/${right === 'null' ? 0 : right}`;
+                const contractInvoiceList = (record.contractInvoiceList || []).map((item, index) => {
+                    return {
+                        ...item,
+                        index,
+                    };
+                });
+                const column = [
+                    {
+                        title: '开票金额',
+                        dataIndex: 'contractInvoiceMoney',
+                        render: (word) => {
+                            return word && thousandSeparatorFixed(word);
+                        },
+                        className: styles.columnHeader,
+                        width: 120,
+                    },
+                    {
+                        title: '开票时间',
+                        className: styles.columnHeader,
+                        dataIndex: 'contractInvoiceDate',
+                        render: (text) => {
+                            return text && text.slice(0, 10);
+                        },
+                        width: 100,
+                    },
+                ];
+                return renderPopTable(content, column, contractInvoiceList, styles.tableClass);
+            },
+        },
+        {
+            title: '回款进度',
+            dataIndex: 'returnMoney',
+            width: 110,
+            render: (text, record) => {
+                const result = text ? text.split('/') : [0, 0];
+                const left = Number(result[0]) === 0 ? 0 : thousandSeparatorFixed(result[0]);
+                const right = Number(result[1]) === 0 ? 0 : thousandSeparatorFixed(result[1]);
+                const content = `${left === 'null' ? 0 : left}/${right === 'null' ? 0 : right}`;
+                const contractReturnList = (record.contractReturnList || []).map((item, index) => {
+                    return { ...item, index };
+                });
+                const column = [
+                    {
+                        title: '回款金额',
+                        className: styles.columnHeader,
+                        dataIndex: 'contractReturnMoney',
+                        render: (word) => {
+                            return word && thousandSeparatorFixed(word);
+                        },
+                        width: 120,
+                    },
+                    {
+                        title: '回款时间',
+                        className: styles.columnHeader,
+                        dataIndex: 'contractReturnDate',
+                        render: (text) => {
+                            return text && text.slice(0, 10);
+                        },
+                        width: 100,
+                    },
+                ];
+                return renderPopTable(content, column, contractReturnList, styles.tableClass);
+            },
+        },
+        {
+            title: '费用确认进度',
+            dataIndex: 'feeConfirmProgress',
+            width: 110,
+            render: (text, record) => {
+                const result = text ? text.split('/') : [0, 0];
+                const left = result[0];
+                const right = result[1];
+                const content = `${left === 'null' ? 0 : left}/${right === 'null' ? 0 : right}`;
+                const disabled = content === '0/0' || Number(result[1]) === 0; // textDecoration: 'underline'
+                const style = disabled ? {} : { textDecoration: 'underline' };
+                return (
+                    <BIButton
+                        type="link"
+                        disabled={disabled}
+                        onClick={() => {
+                            return props.goProgress(record.contractId);
+                        }}
+                    >
+                        <span style={style}>{content}</span>
+                    </BIButton>
+                );
+            },
+        },
+        {
+            title: '累计报销金额',
+            dataIndex: 'accumulatedReimbursementMoney',
+            width: 110,
+            render: (text, record) => {
+                const disabled = !(
+                    AuthButton.checkPathname('/foreEnd/business/project/contract/detail/cost') &&
+                    record.contractApprovalStatus === 3
+                );
+                const style = disabled ? {} : { textDecoration: 'underline' };
+                return (
+                    <BIButton
+                        type="link"
+                        disabled={disabled}
+                        onClick={() => {
+                            return props.checkFeeData(record.contractId);
+                        }}
+                    >
+                        <span style={style}>{(text && thousandSeparatorFixed(text)) || 0}</span>
+                    </BIButton>
+                );
+            },
+        },
+        {
+            title: '结算进度',
+            dataIndex: 'settlementProgress',
+            width: 100,
+            render: (text, record) => {
+                const result = text ? text.split('/') : [0, 0];
+                const left = Number(result[0]) === 0 ? 0 : thousandSeparatorFixed(result[0]);
+                const right = Number(result[1]) === 0 ? 0 : thousandSeparatorFixed(result[1]);
+                const content = `${left === 'null' ? 0 : left}/${right === 'null' ? 0 : right}`;
+                const disabled = !(
+                    AuthButton.checkPathname('/foreEnd/business/project/contract/detail/settle') &&
+                    record.contractApprovalStatus === 3
+                );
+                const style = disabled ? {} : { textDecoration: 'underline' };
+                return (
+                    <BIButton
+                        type="link"
+                        disabled={disabled}
+                        onClick={() => {
+                            return props.checkAccountData(record.contractId);
+                        }}
+                    >
+                        <span style={style}>{content}</span>
+                    </BIButton>
+                );
+            },
+        },
+        {
+            title: '签约日期',
+            dataIndex: 'contractSigningDate',
+            render: (text) => {
+                return text && text.slice(0, 10);
+            },
+            width: 90,
+        },
+        {
+            title: '主子合同',
+            dataIndex: 'contractCategory',
+            render: (text) => {
+                return getOptionName(contractCategory, text);
+            },
+            width: 70,
+        },
+        {
+            title: '审批状态',
+            dataIndex: 'contractApprovalStatus',
+            render: (text) => {
+                return <span style={{ color: getColor(text) }}>{getOptionName(FEE_APPLY_TYPE_LIST, text)}</span>;
+            },
+            width: 70,
+        },
+        {
+            title: '归档状态',
+            dataIndex: 'contractArchiveStatus',
+            render: (text) => {
+                return (
+                    <span style={{ color: text === 0 ? '#848F9B' : '#04B4AD' }}>
+                        {getOptionName(CONTRACT_ARCHIVE_STATUS, text)}
+                    </span>
+                );
+            },
+            width: 70,
+        },
+        {
+            title: '操作',
+            dataIndex: 'operate',
+            width: 90,
+            render: (text, record) => {
+                const { contractCategory, contractApprovalStatus, contractIsVirtual } = record;
+                return (
+                    <div>
+                        <AuthButton authority="/foreEnd/business/project/contract/addChildren">
+                            {Number(contractCategory) === 0 &&
+                            Number(contractApprovalStatus) === 3 &&
+                            Number(contractIsVirtual) !== 1 ? (
+                                <span
+                                    className={styles.btnCls}
+                                    onClick={() => {
+                                        return props.addChildContract(record.contractId);
+                                    }}
+                                >
+                                    {' '}
+                                    创建子合同
+                                </span>
+                            ) : null}
+                        </AuthButton>
+                        <AuthButton authority="/foreEnd/business/project/contract/specialEdit">
+                            <span
+                                className={styles.btnCls}
+                                onClick={() => {
+                                    return props.editData(record.contractId, 1);
+                                }}
+                            >
+                                {' '}
+                                编辑
+                            </span>
+                        </AuthButton>
+                        <AuthButton authority="/foreEnd/business/project/contract/detail">
+                            <span
+                                className={styles.btnCls}
+                                onClick={() => {
+                                    return props.checkData(record.contractId);
+                                }}
+                            >
+                                {' '}
+                                查看
+                            </span>
+                        </AuthButton>
+                    </div>
+                );
+            },
+        },
+    ];
+    return columns || [];
+}

components/DataView/index.js

+/* eslint-disable */
+// 库/框架
+import React, { Component } from 'react';
+// 组件
+import { Modal, message } from 'antd';
+import _ from 'lodash';
+import moment from 'moment';
+import SearchView from '@/components/SearchView';
+import FormFilterBtn from '@/components/form-FilterButton2';
+import SelfPagination from '@/components/SelfPagination';
+import BITable from '@/ant_components/BITable';
+import BIButton from '@/ant_components/BIButton';
+import ButtonAuth from '@/components/AuthButton';
+import IconFont from '@/components/CustomIcon/IconFont';
+
+// 样式
+import s from './index.less';
+// 工具
+import antiAssign from '@/utils/anti-assign';
+import { DATE_FORMAT, PAGINATION } from '@/utils/constants';
+import BISpin from '@/ant_components/BISpin';
+import { getSift } from '@/services/comment';
+import { getOptionName, replacePageNum } from '@/utils/utils';
+import { SIFT_TYPE } from '@/utils/enum';
+import storage from '@/utils/storage'; /* eslint-disable react/sort-comp */ // 关闭下划线变量检测 // 关闭方法排序检测 // 多维数组降维成一维数组
+
+/* eslint-disable no-underscore-dangle */
+function reduceDimension(arr) {
+    return Array.prototype.concat.apply([], arr);
+}
+
+// userTree/orgTree数据转成{id,name}
+function formatUser(obj) {
+    let name = obj.label;
+    if (typeof name !== 'string') {
+        name = obj.label.props.children;
+    }
+    return { id: obj.value, name };
+}
+
+// associationSearch数据转成{id,name}
+function formatAssociationSearch(obj) {
+    if (Array.isArray(obj) && obj.length > 0) {
+        return obj.map((item) => {
+            return { id: item.value, name: item.label };
+        });
+    }
+    return { id: obj.value, name: obj.label };
+}
+
+// id数组转成{id,name}
+function formatArr(arr, options) {
+    const temp = [];
+    arr.map((key) => {
+        temp.push({
+            id: key,
+            name: (
+                options.find((item) => {
+                    return String(item.id) === String(key);
+                }) || {}
+            ).name,
+        });
+    });
+    return temp;
+}
+
+// radio转换
+function formatRadioArr(key, options) {
+    const temp = [];
+    options.map((item) => {
+        if (Number(item.id) === Number(key)) {
+            temp.push({
+                id: Number(item.id),
+                name: item.name,
+            });
+        }
+    });
+    return temp;
+}
+
+// 日期数组转成{id,name}
+function formatDateRange(arr) {
+    const temp = [];
+    arr.map((date, index) => {
+        temp.push({ id: index, name: moment(date).format(DATE_FORMAT) });
+    });
+    return temp;
+}
+
+// 日期数组转成{id,name}
+function formatDateTimeRange(arr) {
+    const temp = [];
+    arr.map((date, index) => {
+        temp.push({ id: index, name: moment(date).format('YYYY-MM-DD hh:mm:ss') });
+    });
+    return temp;
+}
+
+// 日期转成{id,name}
+function formatDate(date) {
+    return { id: undefined, name: moment(date).format('YYYY-MM-DD') };
+}
+
+// 转换成区间
+function formarRange(data) {
+    return Object.keys(data)
+        .map((item) => {
+            return {
+                id: item,
+                name: data[item],
+            };
+        })
+        .filter((item) => {
+            return item.name && item.name !== data.type;
+        });
+}
+
+// 日期区间格式化（时间部分为00:00:00-23:59:59）
+function changeDateRange(props, changedValues, allValues) {
+    const key = Object.keys(changedValues)[0];
+    const cols = reduceDimension(props.searchCols);
+    const col = cols.find((item) => {
+        return item.key === key;
+    });
+    if (col && col.type === 'daterange' && Array.isArray(changedValues[key]) && changedValues[key].length > 0) {
+        if (changedValues[key].length === 1) {
+            allValues[key] = [moment(moment(changedValues[key][0]).format('YYYY-MM-DD 00:00:00'))];
+        } else {
+            allValues[key] = [
+                moment(moment(changedValues[key][0]).format('YYYY-MM-DD 00:00:00')),
+                moment(moment(changedValues[key][1]).format('YYYY-MM-DD 23:59:59')),
+            ];
+        }
+    }
+    return allValues;
+}
+
+function formatSelect(val, options) {
+    if (Array.isArray(val) && val.length > 0) {
+        return val.map((item) => {
+            return {
+                id: item,
+                name: options.find((cItem) => {
+                    return cItem.id === item;
+                }).name,
+            };
+        });
+    }
+    if (Array.isArray(val) && val.length === 0) {
+        return [];
+    }
+    return {
+        id: val,
+        name: options.find((item) => {
+            return item.id === val;
+        }).name,
+    };
+}
+
+function formatForm(formData, searchCols) {
+    const cols = reduceDimension(searchCols);
+    const result = [];
+    Object.keys(formData).map((key) => {
+        if (!formData[key]) {
+            return;
+        }
+        const col = cols.find((item) => {
+            return item.key === key;
+        });
+        if (col === undefined) return;
+        let value;
+        switch (col.type) {
+            case 'radio':
+                value = formatRadioArr(formData[key], col.options);
+                break;
+            case 'checkbox':
+                value = formatArr(formData[key], col.options);
+                break;
+            case 'usertree':
+                break;
+            case 'orgtree':
+                value = formatUser(formData[key]);
+                break;
+            case 'associationSearch':
+                value = formatAssociationSearch(formData[key]);
+                break;
+            case 'daterange':
+                value = formatDateRange(formData[key]);
+                break;
+            case 'daterangetime':
+                value = formatDateTimeRange(formData[key]);
+                break;
+            case 'date':
+                value = formatDate(formData[key]);
+                break;
+            case 'associationSearchFilter':
+                value = formatAssociationSearch(formData[key]);
+                break;
+            case 'numberRange':
+                value = formarRange(formData[key]);
+                break;
+            case 'select':
+                value = formatSelect(formData[key], col.options);
+                break;
+            case 'tag':
+                let tagVal = {};
+                const tagTreeSelect = (val, options) => {
+                    options.forEach((item) => {
+                        if (item.value === val) {
+                            tagVal = { id: item.id, name: item.title };
+                        } else if (item.children && item.children.length) {
+                            tagTreeSelect(val, item.children);
+                        }
+                    });
+                    return tagVal;
+                };
+                value = tagTreeSelect(formData[key], col.componentAttr.treeData, tagVal);
+                break;
+            default:
+                value = formData[key];
+                break;
+        }
+        result.push({ key, value });
+    });
+    return result;
+}
+
+function removeItem(formData, removedItem) {
+    const data = _.assign({}, formData);
+    const item = data[removedItem.key];
+    if (item.type === 'numberRange') {
+        const clearObj = {};
+        clearObj[removedItem.id] = undefined;
+        const newObj = { ...data[removedItem.key], ...clearObj };
+        data[removedItem.key] = newObj;
+    } else if (Array.isArray(item)) {
+        if (moment.isMoment(item[0])) {
+            data[removedItem.key] = undefined;
+            // item.splice(removeItem.id, 1);
+        } else {
+            const index = item.findIndex((t) => {
+                return t.key || t.value
+                    ? String(t.key) === String(removedItem.id) || String(t.value) === String(removedItem.id)
+                    : String(t) === String(removedItem.id);
+            });
+            if (index > -1) {
+                item.splice(index, 1);
+            }
+        }
+    } else {
+        data[removedItem.key] = undefined;
+    }
+    return data;
+}
+
+// 基础数据视图
+export default class DataView extends Component {
+    constructor(props) {
+        super(props);
+        const {
+            pageData: { list, page },
+            pagination,
+        } = props;
+        this.state = {
+            searchForm: this.getDefaultSift(),
+            pagination: {
+                showTotal: (total) => {
+                    return `共${total}条`;
+                },
+                pageSize: (pagination && pagination.pageSize) || PAGINATION.pageSize,
+                total: (page && page.total) || PAGINATION.total,
+                current: (page && page.current) || PAGINATION.current,
+                onChange: (nextPage) => {
+                    this.fetchPage(nextPage);
+                    this.fetch();
+                    window.history.replaceState({ pageNum: nextPage }, '', `?pageNum=${nextPage}`);
+                },
+                onShowSizeChange: this.fetchPageSize,
+                showQuickJumper: true,
+            },
+            data: {
+                origin: list || [],
+                view: {
+                    selectedData: [],
+                    selectedDataKeys: [],
+                },
+            },
+            loading: false,
+            siftDataArr: [], // 快捷筛选数据列表
+            currentSiftNum: 0,
+        };
+    }
+
+    componentWillMount() {
+        // this.getDefaultSift();
+    }
+
+    componentDidMount() {
+        this.getSiftData();
+        replacePageNum('pageNum', this.state.current, this.fetchPage); // 当url里面有pageNum参数时，获取url里面的参数进行请求
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (JSON.stringify(this.props.pageData) !== JSON.stringify(nextProps.pageData)) {
+            const { pagination, data } = this.state;
+            const {
+                pageData: { list, page },
+            } = nextProps;
+            const newPage =
+                page.total > 0
+                    ? {
+                          current: page.pageNum,
+                          total: page.total,
+                      }
+                    : {
+                          current: PAGINATION.current,
+                          total: PAGINATION.total,
+                      };
+            const newData = _.assign({}, data, { origin: list });
+            this.setState({
+                pagination: _.assign({}, pagination, newPage),
+                data: newData,
+            });
+        }
+        const { loading } = nextProps;
+        this.setState({
+            loading: loading || false,
+        });
+    }
+
+    getDefaultSetSift() {
+        if (Array.isArray(this.props.searchCols)) {
+            const newData = {};
+            this.props.searchCols.map((item) => {
+                item.map((col) => {
+                    if (col.defaultValue) newData[col.key] = col.defaultValue;
+                });
+            });
+            return newData;
+        }
+    }
+
+    getDefaultSift() {
+        const storageItem = storage.getItem(`businessType-${getOptionName(SIFT_TYPE, window.location.pathname)}`);
+        const siftStorage = this.rebackDate(storageItem) || {};
+        let result = {};
+        let status = false;
+        if (JSON.stringify(siftStorage) === '{}') {
+            result = this.getDefaultSetSift();
+        } else {
+            // eslint-disable-next-line no-restricted-syntax
+            for (const key in siftStorage) {
+                // eslint-disable-next-line no-prototype-builtins
+                if (siftStorage.hasOwnProperty(key)) {
+                    const element = siftStorage[key];
+                    if (Array.isArray(element) && element.length === 0) {
+                        result = this.getDefaultSetSift();
+                    } else {
+                        status = true;
+                    }
+                }
+            }
+        }
+        if (status) {
+            result = siftStorage;
+        }
+        return result;
+    }
+
+    async getSiftData() {
+        const res = await getSift({
+            businessType: getOptionName(SIFT_TYPE, window.location.pathname),
+        });
+        if (res && res.success === true) {
+            const data = res.data || {};
+            const siftData = data.queryLabelList || [];
+            this.setState({
+                siftDataArr: siftData,
+            });
+        } else {
+            message.error(res && res.message);
+        }
+    }
+
+    // eslint-disable-next-line react/sort-comp
+    _beforeFetch() {
+        const { searchForm, pagination } = this.state;
+
+        return _.assign({}, searchForm, {
+            pageSize: pagination.pageSize,
+            pageNum: pagination.current,
+        });
+    }
+
+    _afterFetch(data, selectedData, selectedDataKeys) {
+        const { pagination } = this.state;
+        const newPagination = _.assign({}, pagination, data.page);
+        this.setState({
+            pagination: newPagination,
+            data: {
+                origin: data.list,
+                view: {
+                    selectedData: selectedData || [],
+                    selectedDataKeys: selectedDataKeys || [],
+                },
+            },
+        });
+    }
+
+    _afterDel() {
+        this.fetch();
+        message.success('操作成功');
+    }
+
+    fetch() {
+        const { beforeFetch, fetch, afterFetch } = this.props;
+        let onBeforeFetch = beforeFetch;
+        if (typeof onBeforeFetch !== 'function') {
+            onBeforeFetch = this._beforeFetch.bind(this);
+        }
+        let onAfterFetch = afterFetch;
+        if (typeof onAfterFetch !== 'function') {
+            onAfterFetch = this._afterFetch.bind(this);
+        }
+        storage.setItem(
+            `businessType-${getOptionName(SIFT_TYPE, window.location.pathname)}`,
+            this.changeData(this.state.searchForm),
+        );
+        if (typeof fetch === 'function') {
+            fetch(onBeforeFetch, onAfterFetch);
+        }
+    }
+
+    search() {
+        const { beforeSearch } = this.props;
+        window.history.replaceState({ pageNum: 1 }, '', `?pageNum=${1}`);
+        if (typeof beforeSearch === 'function') {
+            beforeSearch();
+        }
+        this.state.pagination.current = 1;
+        this.fetch();
+    }
+
+    // 翻页功能
+    fetchPage = (current) => {
+        this.state.pagination.current = current;
+        // this.fetch();
+    };
+
+    // 改变页码功能
+    fetchPageSize = (current, pageSize) => {
+        this.state.pagination.current = 1;
+        this.state.pagination.pageSize = pageSize;
+        this.fetch();
+    };
+
+    del(label, onClick, type) {
+        label = typeof label === 'string' ? label : '删除';
+        onClick = typeof onClick === 'function' ? onClick : null;
+        if (type === 'download') {
+            // onClick();
+            return;
+        }
+
+        const {
+            data: {
+                view: { selectedData },
+            },
+        } = this.state;
+        if (selectedData.length <= 0) {
+            message.error(`请选择要${label}的记录`);
+            return;
+        }
+        Modal.confirm({
+            title: `确认${label}`,
+            content: `确认${label}选中的${selectedData.length}条记录`,
+            okText: '确认',
+            cancelText: '取消',
+            onOk: () => {
+                const { del, afterDel } = this.props;
+                let onAfterDel = afterDel;
+                if (typeof onAfterDel !== 'function') {
+                    onAfterDel = this._afterDel.bind(this);
+                }
+                if (del === true && onClick) {
+                    onClick(selectedData, onAfterDel);
+                } else if (typeof del === 'function') {
+                    del(selectedData, onAfterDel);
+                }
+            },
+        });
+    }
+
+    rebackDate = (data) => {
+        const reg = /^(\d{4})-(\d{2})-(\d{2})$/;
+        // eslint-disable-next-line no-restricted-syntax
+        for (const key in data) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (data.hasOwnProperty(key)) {
+                if (Array.isArray(data[key])) {
+                    data[key].map((item) => {
+                        if (reg.test(item)) {
+                            data[key][0] = moment(moment(data[key][0]).format('YYYY-MM-DD 00:00:00'));
+                            data[key][1] = moment(moment(data[key][1]).format('YYYY-MM-DD 23:59:59'));
+                        }
+                    });
+                }
+            }
+        }
+        return data;
+    };
+
+    changeSearchForm(index) {
+        // 点击筛选更新选中条件
+        let result = {};
+        if (index === 0) {
+            result = {};
+        } else {
+            const siftDataArr = Array.isArray(this.state.siftDataArr) ? this.state.siftDataArr : [];
+            const obj =
+                siftDataArr.find((item) => {
+                    return item.queryLabelId === index;
+                }) || {};
+            try {
+                result = JSON.parse(obj.queryLabelValue);
+                result = this.rebackDate(result);
+            } catch (e) {
+                console.warn(e);
+            }
+        }
+        this.setState(
+            {
+                searchForm: result,
+                currentSiftNum: index,
+            },
+            () => {
+                this.search();
+            },
+        );
+    }
+
+    changeData = (changeData) => {
+        const data = _.cloneDeep(changeData);
+        // eslint-disable-next-line no-restricted-syntax
+        for (const key in data) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (data.hasOwnProperty(key)) {
+                if (Array.isArray(data[key])) {
+                    data[key].map((item) => {
+                        if (item instanceof moment) {
+                            data[key][0] = moment(data[key][0]).format('YYYY-MM-DD');
+                            data[key][1] = moment(data[key][1]).format('YYYY-MM-DD');
+                        }
+                    });
+                }
+            }
+        }
+        return data;
+    };
+
+    // 更改查询条件
+    _changeSearchForm = (props, changedValues, allValues) => {
+        const newData = changeDateRange(props, changedValues, allValues);
+        this.setState({
+            searchForm: newData,
+            currentSiftNum: 0,
+        });
+    };
+
+    // 渲染搜索栏
+    _renderSearchForm = () => {
+        const { searchCols } = this.props;
+        const { searchForm } = this.state;
+        if (searchCols === null || searchCols.length <= 0) return null;
+        return (
+            <SearchView
+                searchForm={searchForm}
+                searchCols={searchCols}
+                search={this.search}
+                onChangeParams={this._changeSearchForm}
+            />
+        );
+    };
+
+    // 清空搜索条件
+    _onReset = () => {
+        this.setState(
+            {
+                searchForm: {},
+            },
+            () => {
+                this.fetch();
+            },
+        );
+    };
+
+    // 删除指定搜索条件
+    _onRemoveItem = (values) => {
+        const { searchForm } = this.state;
+        const formData = removeItem(searchForm, values);
+        this.setState(
+            {
+                searchForm: formData,
+                currentSiftNum: 0,
+            },
+            () => {
+                this.fetch();
+            },
+        );
+    };
+
+    siftCallBack() {
+        // 更新自定义筛选标签
+        this.getSiftData();
+    }
+
+    // 渲染查询条件按钮组件
+    _renderFilterBtn = () => {
+        const { searchCols } = this.props;
+        const { searchForm, siftDataArr, currentSiftNum } = this.state;
+        if (searchCols === null || searchCols.length <= 0) return null;
+        const chooseItems = formatForm(searchForm, searchCols);
+        return (
+            <FormFilterBtn
+                siftDataArr={siftDataArr}
+                searchForm={JSON.stringify(this.changeData(searchForm))}
+                chooseItems={chooseItems}
+                currentSiftNum={currentSiftNum}
+                onSubmit={this.search.bind(this)}
+                onResert={this._onReset.bind(this)}
+                onRemoveItem={this._onRemoveItem.bind(this)}
+                siftCallBack={this.siftCallBack.bind(this)}
+                changeSearchForm={this.changeSearchForm.bind(this)}
+            />
+        );
+    };
+
+    // 渲染顶部tips
+    _renderTips() {
+        const { tips } = this.props;
+        if (tips) {
+            return (
+                <div className={s.tips}>
+                    {tips}
+                    {this._renderBtns()}
+                </div>
+            );
+        }
+        return this._renderBtns();
+    }
+
+    // 渲染操作按钮栏
+    _renderBtns() {
+        const { del } = this.props;
+        let { btns } = this.props;
+        if (btns == null || btns.length <= 0) return null;
+        if (typeof del === 'function') {
+            btns = btns.concat([{ label: '删除', onClick: this.del.bind(this) }]);
+        }
+        return (
+            <div className={s.row}>
+                {btns.map((item, i) => {
+                    const { label, onClick, authority, download, iconBtnSrc, type } = item;
+                    const style = {
+                        marginLeft: '10px',
+                    };
+                    if (i === 0) {
+                        style.marginRight = '0';
+                    }
+                    return (
+                        <ButtonAuth key={i} authority={authority}>
+                            {type === 'download' ? (
+                                download()
+                            ) : (
+                                <BIButton
+                                    style={style}
+                                    key={i}
+                                    className={s.btn}
+                                    onClick={item.type === 'del' ? this.del.bind(this, label, onClick) : onClick}
+                                    {...antiAssign(item, 'label,onClick,type,iconBtnSrc')}
+                                >
+                                    {iconBtnSrc && iconBtnSrc !== '' ? (
+                                        <IconFont className={s.iconCls} type={iconBtnSrc} />
+                                    ) : (
+                                        <IconFont className={s.iconCls} type="iconxinzeng" />
+                                    )}
+                                    <span className={s.titleCls}>{label}</span>
+                                </BIButton>
+                            )}
+                        </ButtonAuth>
+                    );
+                })}
+            </div>
+        );
+    }
+
+    // 渲染表格组件
+    _renderData() {
+        const {
+            del,
+            cols,
+            rowKey,
+            rowSelectionConfig,
+            expandedRowRender,
+            expandIcon,
+            scroll,
+            expandedRowKeys,
+            onExpandedRowsChange,
+        } = this.props;
+        const { data } = this.state;
+        let rowSelection = null;
+        if (del === true || typeof del === 'function') {
+            rowSelection = {
+                selectedRowKeys: data.view.selectedDataKeys,
+                onChange: (selectedRowKeys, selectedRows) => {
+                    this.state.data.view.selectedDataKeys = selectedRowKeys;
+                    this.state.data.view.selectedData = selectedRows;
+                    this.forceUpdate();
+                },
+            };
+        }
+        if (rowSelectionConfig) {
+            rowSelection = rowSelectionConfig;
+        }
+        const commonProps = {
+            className: s.table,
+            rowKey,
+            rowSelection,
+            columns: cols,
+            dataSource: data.origin,
+            expandIcon,
+            onExpandedRowsChange,
+            expandedRowRender,
+            pagination: false,
+            bordered: false,
+        };
+        const _props = expandedRowKeys ? { ...commonProps, expandedRowKeys } : commonProps;
+        return scroll ? <BITable {..._props} scroll={scroll} /> : <BITable {..._props} />;
+    }
+
+    // 渲染分页组件
+    _renderPagination = () => {
+        const { pagination } = this.state;
+        return pagination.total > 20 ? <SelfPagination {...this.props.pagination} {...pagination} /> : null;
+    };
+
+    formSiftData = (data) => {
+        // 格式化快捷筛选数据
+        const result = [];
+        data.map((item) => {
+            const queryLabelConditions = [];
+            item.queryLabelConditions.map((cItem) => {
+                queryLabelConditions.push({
+                    queryLabelKey: cItem.queryLabelKey,
+                    queryLabelValue: cItem.queryLabelValue,
+                    queryLabelControlType: cItem.queryLabelControlType,
+                });
+            });
+            result.push({
+                queryLabelName: item.queryLabelName,
+                queryLabelConditions,
+                queryLabelControlType: item.queryLabelControlType,
+            });
+        });
+        return result;
+    };
+
+    // 高级搜索
+    // renderAdvanced = () => {
+    //     const {} = this.props;
+    //     return null;
+    //     // return <AdvancedSearch />;
+    // };
+
+    render() {
+        const { style, hideForm, tips } = this.props;
+        const { loading } = this.state;
+        return (
+            <div className={s.view} style={style}>
+                <BISpin spinning={loading}>
+                    {hideForm ? null : (
+                        <>
+                            <div className={s.formWrap}>
+                                {/* 筛选条件 */}
+                                {this._renderSearchForm()}
+                                {/* 高级搜索 */}
+                                {/* {advancedStatus ? this.renderAdvanced() : null} */}
+                                {/* 已选条件、搜索按钮 */}
+                                {this._renderFilterBtn()}
+                            </div>
+                            <div className={s.split} />
+                        </>
+                    )}
+                    <div className={s.tableWrap}>
+                        {tips ? this._renderTips() : this._renderBtns()}
+                        {this._renderData()}
+                        {this._renderPagination()}
+                        {this.props.children}
+                    </div>
+                </BISpin>
+            </div>
+        );
+    }
+}

components/DataView/index.less

+@import '~@/theme/common';
+
+@smallSpace: 4px;
+@normalSpace: 16px;
+.view {
+    .tableWrap {
+        background: #fff;
+        padding: 10px 20px;
+        border-radius: 6px;
+    }
+
+    .formWrap {
+        background: #fff;
+        padding: 25px 20px;
+        border-radius: 6px;
+    }
+
+    .row {
+        text-align: right;
+        // display: flex;
+        // margin-bottom: 6px;
+
+        .col {
+            display: inline-block;
+            vertical-align: middle;
+            width: 30%;
+            margin: @smallSpace;
+        }
+
+        .btn {
+            color: @primaryColor;
+            border-color: @primaryColor;
+            line-height: 32px;
+
+            .iconCls {
+                font-size: @textFontGen;
+            }
+            .titleCls {
+                font-size: @textFontGen;
+            }
+        }
+    }
+
+    .table {
+        margin: @smallSpace 0;
+
+        td {
+            word-break: break-word;
+        }
+
+        :global(.ant-table-placeholder) {
+            border-bottom: none;
+        }
+
+        :global(.ant-table-thead > tr > th) {
+            border-right: none;
+            border-bottom: 1px solid #f6f6f8;
+        }
+
+        :global(.ant-table-tbody > tr > td) {
+            border-right: none;
+            border-bottom: 1px solid #f6f6f8;
+        }
+    }
+}
+
+.split {
+    height: 16px;
+    background: #f9f9f9;
+}
+
+.tips {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    align-items: center;
+}