mh_jy_safe_web/src/baseComponents/TableBaseComponent/index.js

import React from 'react'
import { Table, Button, message, notification, Icon, Checkbox, Pagination, Spin, Upload } from 'antd'
import {
  empty,
  extendInclude,
  getDataFieldValue,
  guid,
  initFilter, getCustomParams,
  addRuleAndGroups,
  setDataFieldValue,
  extendOrder,
  extend,
  renderExportCell,
  compare,
  getParseValue
} from '../../utils/common'
import ComponentBase from "../ComponentBase";
import styles from './index.css';
import EditModal from '../../components/Edit/EditModal';
import TableFooterByTotal from '../../components/Table/TableFooterByTotal';
import FormPage from '../../components/FormPage';
import ShowModal from '../../components/common/ShowModal';
import FormModal from '../../components/FormModal'
import { ConfirmButton, ExportToExcel, HttpPrint, PictureThumb, IFComponent } from '@woowalker/feui'
import DataLoading from '../../components/common/DataLoading';
import BDWordPreviewPage from '../../components/CustomPages/BD/BDWordPreviewPage';
import ColumnSetting from './TableColumnSetting';
import ColumnSort from "../../components/common/CustomFieldsManage";
import ImportModal from './ImportModal';
import TableResizableCell from '../../components/Table/TableResizableCell';
import { cloneDeep, get } from 'lodash'
import classNames from 'classnames'
import TableModal from '../../components/Table/TableModal';
import CombinationModal from '../../components/Combination/CombinationModal'
import { getDragableProps, DragDropCard } from '../../utils/withDragDropContext'
import update from 'immutability-helper'
import config from "../../config"
import storage from '../../utils/storage';
const { Column } = Table;

class TableBaseComponent extends ComponentBase {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      tableConfig: {},
      loadParam: {},
      searchColumnText: "",             // 列搜索文本
      showColumnSetting: null,          // 显示表头的设置图标
      showFilterDropdown: false,
      formLoading: false,
      localSearch: {
        // field: "",
        // value: ""
      }
    };
    this.defaultTableCode = 'table';
    this.genDataSource = this.genDataSource.bind(this);
  };

  componentDidMount() {
    super.componentDidMount();
    this.onLoadData();
  };

  /*
  加载数据 事件
   */
  onLoadData() {
    const tableConfigs = this.onGetTableConfig();
    if (tableConfigs && tableConfigs.length) {
      let tableConfig = this.state.tableConfig;
      if (!tableConfig) {
        tableConfig = {};
      }
      tableConfigs.forEach(t => {
        if (t.tableCode === undefined) {
          t.tableCode = this.defaultTableCode;
        }
        if (t.originalColumns === undefined) {
          t.originalColumns = t.columns;
        }
        if (t.originalBtns === undefined) {
          t.originalBtns = t.btns;
        }
        if (t.originalRowBtns === undefined) {
          t.originalRowBtns = t.rowBtns;
        }
        if (t.originalRightBtns === undefined) {
          t.originalRightBtns = t.rightBtns;
        }
        if (!t.id) {
          t.id = guid();
        }
        tableConfig[t.tableCode] = t;
      });
      this.setState({
        tableConfig,
      }, () => {
        this.onAfterLoadData();
      });
    }
    else {
      this.onAfterLoadData();
    }
  }

  /*
  加载数据之后
   */
  onAfterLoadData() {
    this.onAfterGetTableConfig();
    let tableConfig = this.state.tableConfig;
    if (tableConfig) {
      Object.keys(tableConfig).forEach((n) => {
        this.loadTableData({
          tableCode: tableConfig[n].tableCode,
          isResetLoad: true,
        });
      });
    }
  }

  /*
  获取表配置信息
  {
    tableCode://配置信息
    columns:
    btns:
    rowBtns:
    deleteApi:
    batchDeleteApi:
    rule:
    id:
    hasChildren
    classField
    footerSumType
    checkType
    checked,
    api,
    position,
    isShowRowNo,是否显示序号
  }
  */
  onGetTableConfig() {

  }

  /*
    获取表配置信息 之后
   */
  onAfterGetTableConfig() {

  }

  /*
  依搜索参数加载表数据
   */
  loadDataTableBySearch = (tableCode, data) => {
    const tableConfig = this.getTableConfig({ tableCode })
    const customParams = getCustomParams(tableConfig.customParams)

    let { param, extendParam = {} } = data ? data : {};
    extendParam["PageIndex"] = 1;
    extendParam["Start"] = 0;
    extendParam['IsAllLoad'] = !!customParams.IsAllLoad;
    const tempParamJson = this.getLoadParam({ tableCode });
    if (param && extendParam) {
      this.setSearchParam({
        tableCode,
        searchParam: param,
        onComplete: () => {
          if (!tempParamJson) {
            const loadParamJson = this.initLoadParam({ tableCode });
            extendParam = {
              ...loadParamJson,
              ...extendParam
            }
          }
          this.setLoadParam({
            tableCode,
            loadParam: extendParam,
            onComplete: () => {
              this.loadTableData({ tableCode });
            }
          })
        }
      });
    }
    else if (param) {
      this.setSearchParam({
        tableCode,
        searchParam: param,
        onComplete: () => {
          this.loadTableData({ tableCode });
        }
      });
    }
    else if (extendParam) {
      if (!tempParamJson) {
        const loadParamJson = this.initLoadParam({ tableCode });
        extendParam = {
          ...loadParamJson,
          ...extendParam
        }
      }
      this.setLoadParam({
        tableCode,
        loadParam: extendParam,
        onComplete: () => {
          this.loadTableData({ tableCode });
        }
      })
    }
    else {
      this.loadTableData({ tableCode });
    }
  };

  /*
  初始化加载参数
   */
  initLoadParam = ({ tableCode, pageSize, pageIndex }) => {
    const tableConfig = this.getTableConfig({ tableCode });
    let { sort, order, defaultPageSize } = tableConfig ? tableConfig : {};
    if (!sort) {
      sort = 'CREATE_TIME';
      order = 1;
    }
    const loadParamJson = initFilter(this.props.login.OrgId, '', sort, order);
    if (defaultPageSize) {
      loadParamJson.Limit = defaultPageSize;
      loadParamJson.Start = (loadParamJson.PageIndex - 1) * defaultPageSize;
    }
    if (pageSize) {
      loadParamJson.Limit = pageSize;
      loadParamJson.Start = (loadParamJson.PageIndex - 1) * pageSize;
    }
    if (pageIndex) {
      let pz = 10;
      if (pageSize >= 0) {
        pz = pageSize
      } else if (defaultPageSize) {
        pz = defaultPageSize
      } else {
        pz = 10
      }
      loadParamJson.PageIndex = pageIndex;
      loadParamJson.Start = (pageIndex - 1) * pz;
    }
    const selectFields = (tableConfig.navColumns || []).map(col => {
      return col.FIELD_NAME && col.FIELD_NAME !== 'null' ? col.FIELD_NAME : false
    }).filter(field => !!field)
    if (selectFields.length && !tableConfig.isNoSelectField) {
      if (selectFields.indexOf('ID') === -1) {
        selectFields.push('ID')
      }
      if (selectFields.indexOf('ORG_ID') === -1) {
        selectFields.push('ORG_ID')
      }
      loadParamJson.SelectField = selectFields
    }
    if (tableConfig && tableConfig.rule) {
      addRuleAndGroups(loadParamJson, tableConfig.rule);
    }
    return loadParamJson;
  };

  /*
  加载表数据
   */
  loadTableData(params) {
    const { tableCode = this.defaultTableCode, isResetLoad, pageSize, onComplete, onLoadData } = params ? params : {};
    const tempParamJson = this.getLoadParam({ tableCode });
    if (isResetLoad || !tempParamJson) {
      const loadParamJson = this.initLoadParam({ tableCode, pageSize });
      this.setLoadParam({
        tableCode,
        loadParam: loadParamJson,
        onComplete: () => {
          const paramJson = this.getLoadParam({ tableCode });
          const tempJson = paramJson ? JSON.parse(JSON.stringify(paramJson)) : {};
          this.doLoadTableData({ ...tempJson }, tableCode, onComplete, onLoadData);
        }
      });
    }
    else {
      const paramJson = this.getLoadParam({ tableCode });
      const tempJson = paramJson ? JSON.parse(JSON.stringify(paramJson)) : {};
      this.doLoadTableData({ ...tempJson }, tableCode, onComplete, onLoadData);
    }
  }

  /*
  重置加载表数据参数
   */
  onLoadTableDataParam(params) {

  }

  /*
  加载数据之后
   */
  onAfterLoadTableData(params) {

  }
  getRequestHeaders =() =>{
    // 请求参数
    const addHeader = 'Bearer ' + storage('lacal').getItem('accessToken').val
    const userId = storage('lacal').getItem('userid').val
    const user = storage('lacal').getItem('loginUserVerify').val
    const RootOrgId = storage('lacal').getItem('RootOrgId').val
    const orgId = storage('lacal').getItem('webOrgId').val
    const Tenant = storage('lacal').getItem('Tenant').val
    const headers = {
      // 'Content-Type': type === 'post' ? 'application/json' : 'application/x-www-form-urlencoded',
      Authorization: addHeader,
      userid: userId,
      username: user ? user.username : '',
      RootOrgId,
      orgId,
      Tenant:Tenant
    }
    return headers
  }

  /**
   * 获取表格加载参数
   * @param {*} loadParamJson
   * @param {*} tableCode
   */
  getLoadTableDataParams = (loadParamJson, tableCode) => {
    if (tableCode === undefined) {
      tableCode = this.defaultTableCode;
    }
    const tableConfig = this.getTableConfig({ tableCode });
    const { api, sorts, orgType, authOrgCodes, ignoreOrgRule } = tableConfig ? tableConfig : {};
    if (api === null || api === undefined) return false;
    if (sorts && sorts.length) {
      sorts.forEach(t => {
        extendOrder(loadParamJson, t.sort, t.order);
      });
    }

    //去重添加添加导航属性
    const navFields = [];
    if (tableConfig && tableConfig.includes && tableConfig.includes.length) {
      tableConfig.includes.forEach(t => {
        navFields.push(t);
      });
    }
    else if (tableConfig) {
      const cols = tableConfig.originalColumns && tableConfig.originalColumns.length ? tableConfig.originalColumns : tableConfig.columns;
      if (cols && cols.length) {
        const doGetInclude = (f) => {
          if (f && f.indexOf('.') > 0) {
            let pos = f.lastIndexOf('.');
            let includeTable = f.substring(0, pos);
            navFields.push(includeTable);
          }
        }
        cols.forEach(t => {
          const field = t.field;
          if (field) {
            let opIndex = field.indexOf('+');
            if (opIndex === -1) {
              opIndex = field.indexOf('-');
              if (opIndex === -1) {
                opIndex = field.indexOf('*');
                if (opIndex === -1) {
                  opIndex = field.indexOf('/');
                }
              }
            }
            if (opIndex !== -1) {
              const leftField = field.substring(0, opIndex);
              const rightField = field.substring(opIndex + 1);
              doGetInclude(leftField);
              doGetInclude(rightField);
            }
            else {
              doGetInclude(field);
            }
          }
        });
      }
    }
    if (navFields.length) {
      const tmp = [...new Set(navFields)];
      tmp.forEach((n, i) => {
        extendInclude(loadParamJson, n);
      });
    }
    if (orgType) {
      loadParamJson.OrgType = orgType;
    }
    if (authOrgCodes) {
      loadParamJson.AuthOrgCodes = authOrgCodes;
    }

    //查询参数
    const searchParam = this.getSearchParam({ tableCode });
    if (searchParam) {
      if (searchParam) {
        addRuleAndGroups(loadParamJson, searchParam);
      }
    }
    // 菜单参数
    const { currActivatedMenu } = this.props.app || {}
    loadParamJson['MenuParameter'] = currActivatedMenu && currActivatedMenu.MENU_FORM_PARAMS ? currActivatedMenu.MENU_FORM_PARAMS : ''
    // 是否忽略组织权限
    if (ignoreOrgRule) {
      loadParamJson.IgnoreOrgRule = ignoreOrgRule
    }

    const isError = this.onLoadTableDataParam({ tableCode, loadParam: loadParamJson, tableConfig });
    if (isError) return false;
    return loadParamJson
  }

  /*
  实际加载表数据
   */
  doLoadTableData = (loadParamJson, tableCode, onComplete, onLoadData) => {
    const payloadJson = this.getLoadTableDataParams(loadParamJson, tableCode)
    if (!payloadJson) return

    if (tableCode === undefined) {
      tableCode = this.defaultTableCode;
    }
    const tableConfig = this.getTableConfig({ tableCode });
    const { api } = tableConfig ? tableConfig : {};

    this.props.dispatch({
      type: 'listPage/getTableData',
      payload: loadParamJson,
      url: api,
      onComplete: (ret) => {
        if (ret && !ret.IsSuccessful) {
          message.error(ret.ErrorMessage);
        }
        if (ret && ret.Data && ret.Data.length && tableConfig.isShowRowNo) {
          ret.Data.forEach((n, i) => {
            n.ROW_NO = (i + 1);
          });
        }
        if (typeof onLoadData === 'function') {
          onLoadData(ret);
        }
        else {
          this.setTableData({
            tableCode,
            data: ret,
            onComplete: () => {
              if (ret && typeof tableConfig.onAfterGetData === 'function') {
                tableConfig.onAfterGetData(ret.Data, tableConfig.pageTable ? tableConfig.pageTable.CODE : tableConfig.tableCode);
              }
              if (ret) {
                this.onAfterLoadTableData({ tableCode, data: ret.Data });
              }
              if (typeof onComplete === 'function') {
                onComplete();
              }
            }
          });
        }
        // 设置默认选中
        const { rowSelectedKeys } = this.props
        if (Array.isArray(rowSelectedKeys) && rowSelectedKeys.length) {
          this.setTableSelectedRowKeys({ tableCode, selectedKeys: rowSelectedKeys })
        }
      }
    })
  };

  /*
  获取配置
   */
  getTableConfig(params) {
    const { tableCode = this.defaultTableCode } = params || {};
    let tableConfig = this.state.tableConfig;
    if (tableConfig === undefined) {
      tableConfig = {};
    }
    return tableConfig[tableCode];
  }

  /*
  设置配置
   */
  setTableConfig({ tableConfig, onComplete }) {
    if (!tableConfig) return;
    let tableCode = tableConfig.tableCode;
    if (tableCode === undefined) {
      tableCode = this.defaultTableCode;
      tableConfig.tableCode = tableCode;
    }
    let tempTableConfig = this.state.tableConfig;
    if (tempTableConfig === undefined) {
      tempTableConfig = {};
    }
    let oldConfig = tempTableConfig[tableCode];
    if (oldConfig === undefined) {
      oldConfig = {};
    }
    tableConfig = {
      ...oldConfig,
      ...tableConfig,
    };
    if (tableConfig.originalColumns === undefined) {
      tableConfig.originalColumns = tableConfig.columns;
    }
    if (tableConfig.originalBtns === undefined) {
      tableConfig.originalBtns = tableConfig.btns;
    }
    if (tableConfig.originalRightBtns === undefined) {
      tableConfig.originalRightBtns = tableConfig.rightBtns;
    }
    if (tableConfig.originalRowBtns === undefined) {
      tableConfig.originalRowBtns = tableConfig.rowBtns;
    }
    if (!tableConfig.id) {
      tableConfig.id = guid();
    }
    tempTableConfig = {
      ...tempTableConfig,
      [tableCode]: tableConfig,
    };

    this.setState({
      tableConfig: tempTableConfig
    }, () => {
      if (typeof onComplete === 'function') {
        onComplete();
      }
    });
  }

  /*
    获取加载参数
    */
  getLoadParam(params) {
    const { tableCode = this.defaultTableCode } = params ? params : {};
    let loadParam = this.state.loadParam;
    if (loadParam === undefined) {
      loadParam = {};
    }
    return loadParam[tableCode];
  }

  /*
  设置加载参数
   */
  setLoadParam({ tableCode, loadParam, onComplete }) {
    if (tableCode === undefined) {
      tableCode = this.defaultTableCode;
    }
    let tempLoadParam = this.state.loadParam;
    if (tempLoadParam === undefined) {
      tempLoadParam = {};
    }
    let oldParam = tempLoadParam[tableCode];
    if (oldParam === undefined) {
      oldParam = {};
    }
    loadParam = {
      ...oldParam,
      ...loadParam,
    };
    tempLoadParam = {
      ...tempLoadParam,
      [tableCode]: loadParam,
    };

    this.setState({
      loadParam: tempLoadParam
    }, () => {
      if (typeof onComplete === 'function') {
        onComplete();
      }
    });
  }

  /*
    获取查询参数
    */
  getSearchParam(params) {
    const { tableCode = this.defaultTableCode } = params ? params : {};
    let searchParam = this.state.searchParam;
    if (searchParam === undefined) {
      searchParam = {};
    }
    return searchParam[tableCode];
  }

  /*
  设置查询参数
   */
  setSearchParam({ tableCode, searchParam, onComplete }) {
    if (tableCode === undefined) {
      tableCode = this.defaultTableCode;
    }
    let tempSearchParam = this.state.searchParam;
    if (tempSearchParam === undefined) {
      tempSearchParam = {};
    }
    let oldParam = tempSearchParam[tableCode];
    if (oldParam === undefined) {
      oldParam = {};
    }
    searchParam = {
      ...oldParam,
      ...searchParam,
    };
    tempSearchParam = {
      ...tempSearchParam,
      [tableCode]: searchParam,
    };

    this.setState({
      searchParam: tempSearchParam
    }, () => {
      if (typeof onComplete === 'function') {
        onComplete();
      }
    });
  }

  /*
  获取表数据
   */
  getTableData(params) {
    const { tableCode = this.defaultTableCode } = params ? params : {};
    let data = this.state.data;
    if (data === undefined) {
      data = {};
    }
    return data[tableCode];
  }

  /*
  设置表数据
   */
  setTableData({ tableCode, data, onComplete }) {
    if (tableCode === undefined) {
      tableCode = this.defaultTableCode;
    }
    let tempData = this.state.data;
    if (tempData === undefined) {
      tempData = {};
    }
    tempData = {
      ...tempData,
      [tableCode]: data,
    };

    this.setState({
      data: tempData
    }, () => {
      if (typeof onComplete === 'function') {
        onComplete();
      }
    });
  }

  /*
获取选中
 */
  getTableSelectedRowKeys(params) {
    const { tableCode = this.defaultTableCode } = params ? params : {};
    let selectedKeys = this.state.selectedKeys;
    if (selectedKeys === undefined) {
      selectedKeys = {};
    }
    const cuKeys = selectedKeys[tableCode];
    if (cuKeys) {
      return cuKeys;
    }
    return [];
  }

  /**
   * add by qxiong 2020.06.11
   * @param {*} param0 
   * 设置所有页面选中
   * 在此日期前，有关 selectedKeys 的使用
   * 并没有发现复制一份旧的 selectedKeys， 然后使用 tableCode 保存新一份 selectedKeys 有什么作用
   * 所以此处不继续沿用这种逻辑，而是直接该保存保存，不绕弯路
   * const { selectedRowsAll = [] } = this.state
   * 上面这一行的 selectedRowsAll = [] 默认赋值，以及为什么会有很多 undefined 的判断，因为这个组件是被继承的，继承的组件中又重写了state
   * 所以就相当于直接在这个组件中定义 state，基本都取不到
   */
  setTableSelectedRowsAll = ({ selectedRowKeys, selectedRows = [] }) => {
    const { selectedRowsAll = [] } = this.state
    selectedRowsAll.push(...selectedRows)
    const tempSelected = []
    selectedRowKeys.forEach(key => {
      const find = selectedRowsAll.find(row => row.ID === key)
      find && tempSelected.push(find)
    })
    this.state.selectedRowsAll = tempSelected
  }

  /*
  设置选中
   */
  setTableSelectedRowKeys({ tableCode, selectedKeys, onComplete }) {
    if (tableCode === undefined) {
      tableCode = this.defaultTableCode;
    }
    let tempSelectedKeys = this.state.selectedKeys;
    if (tempSelectedKeys === undefined) {
      tempSelectedKeys = {};
    }
    tempSelectedKeys = {
      ...tempSelectedKeys,
      [tableCode]: selectedKeys,
    };
    let isSelected = this.state[tableCode + '_isSelected'];
    if (!selectedKeys || !selectedKeys.length) {
      isSelected = false;
    }
    this.setState({
      selectedKeys: tempSelectedKeys,
      [tableCode + '_isSelected']: isSelected,
    }, () => {
      const tableConfig = this.getTableConfig({ tableCode });
      if (tableConfig && typeof tableConfig.onSelectChange === 'function') {
        tableConfig.onSelectChange(this.getTableSelectedRowKeys({ tableCode }), (tableConfig.pageTable ? tableConfig.pageTable.CODE : tableCode));
      }
      if (typeof onComplete === 'function') {
        onComplete();
      }
    });
  }

  /*
  表改变事件
   */
  onTableChange = (tableCode, pagination, filters, sorter) => {
    const { current, pageSize } = pagination;
    const loadParam = this.getLoadParam({ tableCode });
    let sort = {
    };
    if (sorter && sorter.field) {
      sort["Sort"] = sorter.field;
      sort["Order"] = sorter.order === "descend" ? '0' : '1';
    }
    let newParams = {
      ...loadParam,
      OrgId: this.props.login.OrgId,
      PageIndex: current,
      Limit: pageSize,
      Start: (current - 1) * pageSize
    };
    const tempParam = { ...newParams, ...sort };
    if (!loadParam.IsAllLoad) {
      const tempJson = JSON.parse(JSON.stringify(tempParam));
      this.doLoadTableData({ ...tempJson }, tableCode);
    }
    this.setLoadParam({
      tableCode,
      loadParam: tempParam,
      onComplete: () => {
        this.onAfterTableChange({ tableCode, pagination, filters, sorter, loadParam: tempParam });
      }
    });
  };

  /*
   表改变之后
   {
   tableCode,
    pagination,
    filters,
     sorter,
     loadParam
     }
   */
  onAfterTableChange(params) {

  }

  /*
  选中表行项改变时
   */
  onSelectTableChange = (tableCode, selectedRowKeys, selectedRows) => {  // 选择表格行
    this.setTableSelectedRowsAll({ selectedRowKeys, selectedRows })
    this.setTableSelectedRowKeys({ tableCode, selectedKeys: selectedRowKeys });
    this.setState({
      [tableCode + '_isSelected']: selectedRowKeys && selectedRowKeys.length
    });
  };

  /*
  获取表选中记录
  {
  tableCode:表编号
  }
   */
  getTableSelectedRecord(params) {
    const { tableCode = this.defaultTableCode } = params ? params : {};
    const tableData = this.getTableData({ tableCode });
    const selectKeys = this.getTableSelectedRowKeys({ tableCode });
    const result = [];
    if (selectKeys && tableData && tableData.Data) {
      selectKeys.forEach(item => {
        tableData.Data.forEach(t => {
          if (item.toString().toUpperCase() == t.ID.toString().toUpperCase()) {
            result.push(t);
          }
        })
      });
    }
    return result;
  }

  /*
    保存行记录
   */
  saveRowRecord({ record, onComplete, tableCode }) {
    if (tableCode === undefined) {
      tableCode = this.defaultTableCode;
    }
    const data = this.getTableData({ tableCode });
    let list = data.Data;
    if (!list) {
      list = [];
      data.Data = [];
    }
    const index = list.findIndex(item => record.ID === item.ID);
    const item = list[index];
    if (item) {
      list.splice(index, 1, {
        ...item,
        ...record,
      });
    }
    this.setTableData({
      tableCode,
      data,
      onComplete
    });
  }

  /*
 {field,value,colConfig,record,thisRef,tableCode}
  */
  onAfterRowControlChange(params) {

  }
  /*
      {field,value,colConfig,record,thisRef}
     */
  onRowControlChange(params) {
    const { field, value, record, thisRef, tableCode = thisRef.defaultTableCode } = params ? params : {};
    if (record) {
      setDataFieldValue(record, field, value);
      thisRef.saveRowRecord({
        record,
        tableCode,
        onComplete: () => {
          thisRef.onAfterRowControlChange(params);
        },
      });
    }
  }

  /*
  {field,colConfig,record,thisRef,tableCode}
   */
  onRowControlBlur(params) {
    const { thisRef } = params ? params : {};
    thisRef.onAfterRowControlBlur(params);
  }

  /*
  {field,colConfig,record,thisRef,tableCode}
   */
  onAfterRowControlBlur(params) {

  }

  /*
  {record,选中记录
  data,当前数据行项
  colConfig, 列配置信息
  thisRef,当前组件
  tableCode,
  }
   */
  onRowDropDownFillData(params) {

  }

  /*
 {record,complete,colConfig,data,columns,thisRef}
 */
  onBeforeRowDropDownSelect(params) {

  }
  /*
  {record,complete,colConfig,data,columns,thisRef}
  */
  onAfterRowDropDownSelect(params) {

  }

  /*
   {record,complete,colConfig,data,columns,thisRef}
   */
  onRowDropDownSelect(params) {
    const { record, complete, colConfig, data, columns, thisRef, tableCode = thisRef.defaultTableCode } = params ? params : {};
    if (thisRef.onBeforeRowDropDownSelect({ ...params })) return;
    const configData = colConfig.data;
    thisRef.fillDropDownSelectRecord({
      record,
      data,
      saveField: configData.saveField,
      labelField: configData.labelField,
      navField: configData.navField,
      field: colConfig.field,
      idField: colConfig.idField,
    });

    thisRef.onRowDropDownFillData({ ...params, record, data, colConfig });
    thisRef.saveRowRecord({
      record: data,
      tableCode,
      onComplete: () => {
        if (typeof complete === 'function') {
          complete();
        }
        thisRef.onAfterRowDropDownSelect({ ...params });
        const saveFields = configData.saveField ? configData.saveField.split(',') : [];
        if (saveFields && saveFields.length && columns && columns.length) {
          saveFields.forEach((n, i) => {
            columns.forEach(item => {
              if (item.field == n) {
                thisRef.onAfterRowControlChange({ field: n, value: getDataFieldValue(data, n), colConfig: item, record: data, tableCode });
              }
            });
          });
        }
      },
    });
  }

  /*
  {record,colConfig,params,thisRef,tableCode}
   */
  onRowDropDownFilter(params) {

  }

  /*
  {tableCode,record,isShow,isPermit,getHeadFieldValue}
   */
  onRowEditFormData(params) {
    const { record, tableCode = this.defaultTableCode } = params ? params : {};
    const data = this.getTableData({ tableCode });
    return {
      record: record,
      onSave: (row) => {
        this.saveRowRecord({ ...params, record: row, });
      },
      stateData: data ? [] : data.Data,
    }
  }

  /*
  重置行列配置信息
   */
  setRowColumnConfig({ col, record, params }) {
    col.value = getDataFieldValue(record, col.field);
    if (col.field && col.field.indexOf('Nav_SysParams') > -1) {
      col.value = this.getControlValue({
        controlType: col.controlType, value: col.value,
        data: col.data
      });
    }
    col.showFormId = record && col.showIdField ? getDataFieldValue(record, col.showIdField) : null;
    col.onChange = (changeParam) => {
      this.onRowControlChange({ ...params, ...changeParam, record, colConfig: col });
    };
    col.onBlur = (blurParam) => {
      this.onRowControlBlur({ ...params, ...blurParam, record, colConfig: col, });
    };

    if (col.controlType === 9) {//分页下拉
      if (!col.data) {
        col.data = {};
      }
      col.data.onSelect = (selectParam) => {
        this.onRowDropDownSelect({
          ...params, ...selectParam,
          complete: selectParam.complete,
          record: selectParam.record,
          data: record,
          colConfig: col,
        });
      };
      col.data.onFilter = (filterParams) => {
        this.onRowDropDownFilter({ ...params, ...filterParams, record, colConfig: col });
      }
    }
    if (col.editFormCode) {
      if (!col.data) {
        col.data = {};
      }
      col.data.editFormData = this.onRowEditFormData({ ...params, record, });
    }
  }

  /*
  格式化行项列
   */
  onTableRowFormatColumn({ tableCode, tableConfig, colConfig, record, text }) {
    return text;
  }

  /**
   * 可控的排序设置
   *
   */
  setSortData = (orderType, sortType, tc) => {
    this.setLoadParam({
      tableCode: tc,
      loadParam: {
        Order: orderType,
        Sort: sortType
      },
      onComplete: () => {
        this.loadTableData({ tableCode: tc });
      }
    })
  }
  /**搜索单列 */
  setSearchInfo = (value, fields,) => {
    this.setState({
      localSearch: {
        fields,
        value
      }
    })
  }

  /**单元格 */
  renderCell = ({ isShowCol, col, tableCode, tableConfig, record, text, columns }) => {
    if (isShowCol) {
      if (col.formatFuncName) {
        col.format = (params) => {
          const formatValue = this.onTableRowFormatColumn({ record: params.record, text: params.text, tableCode, tableConfig, colConfig: params.col });
          setDataFieldValue(record, (col.field ? col.field : col.formatFuncName) + '_formatValue', formatValue);
          return formatValue;
        };
      }
      return this.getTableCellText({ col, record, text });
    }
    this.setRowColumnConfig({ col, params: { columns, tableCode, tableConfig }, record });
    return <div key={record.ID + col.field} style={{ width: col.width > 0 && col.width, wordWrap: 'break-word', wordBreak: 'break-all' }}>
      {
        this.getControl(col)
      }
    </div>
  }

  /*
  {
      format,enumName,isBool,isDate,isPercent,isTwoPoint,isLimitText,isTime,showFormCode,showIdField,showFormId,visible,label,ID,width
      data:{
         enumName
      }
    }
   */
  getColumnByColumnConfig(tableCode) {
    const { showColumnSetting, showFilterDropdown } = this.state;
    const tableConfig = this.getTableConfig({ tableCode });
    if (!tableConfig) {
      return [];
    }

    const columns = tableConfig.columns;
    if (!columns) return [];
    const cols = [];
    const tmp = [];
    if (tableConfig.isShowRowNo) {
      tmp.push({ title: '序号', key: 'ROW_NO', dataIndex: 'ROW_NO', width: 60 });
    }
    columns.forEach(col => {
      if (col.visible || col.visible === undefined) {
        const isShowCol = col.controlType === null || col.controlType === undefined || col.controlType === 0 || col.controlType > 100;
        const uniqueKey = col.id ? col.id : (col.field ? col.field : col.formatFuncName);
        const columnObj = {
          title: <div style={{ userSelect: "none" }}>{col.label}</div>,
          key: uniqueKey,
          dataIndex: col.field,
          filterDropdown: args => {
            return <ColumnSetting
              {...this.props}
              {...args}
              key={uniqueKey}
              setSortData={type => this.setSortData(type, col.field, tableCode)}
              setSearchInfo={val => this.setSearchInfo(val, col.field, tableCode)}
              tableConfig={tableConfig}
              onMouseLeave={() => this.setState({ showFilterDropdown: false, showColumnSetting: null })}
              stateTableConfig={this.state.tableConfig}
              setTableConfig={value => this.setState({ tableConfig: value })}
              colConfig={col}
            />
          },
          filterDropdownVisible: showFilterDropdown && showColumnSetting === uniqueKey,
          filterIcon: filtered => (
            showColumnSetting === uniqueKey
              ? <Icon type="setting" />
              : <div />
          ),
          onFilterDropdownVisibleChange: (visible) => {
            this.setState({
              showFilterDropdown: visible
            })
          },
          render: (text, record) => {
            const convertText = this.renderCell({ isShowCol, col, tableCode, tableConfig, record, text, columns });
            const cellTitle = (typeof convertText === "string" || typeof convertText === "number") ? convertText : "";
            return <span title={cellTitle}>{convertText}</span>
          }
        }
        col.width && (columnObj.width = col.width)
        tmp.push(columnObj);
      }
    });

    if (tmp && tmp.length) {
      tmp.forEach((n, i) => {
        cols.push(n);
      });
    }
    return cols;
  }

  /*
  获取渲染按钮
   */
  getRenderBtns(tableCode, tableConfig, record, btns, type) {
    const filterBtns = []
    if (btns && btns.length) {
      btns.forEach(btn => {
        const { BTN_CONDITION } = btn.btn || {}
        if (BTN_CONDITION) {
          const conditions = BTN_CONDITION.split('|').map(item => {
            const conds = item.split(',')
            return {
              field: conds[0],
              operate: conds[1],
              //value: conds[2]
              value: getParseValue(conds[2], this.props.login.user)
            }
          })
          const find = conditions.find(cond => {
            const { field, operate, value } = cond
            //let fileValue=getDataFieldValue(record, field);
            let fileValue=get(record,field);
            switch (Number(operate)) {
              case 1: // 等于
                return fileValue == value
              case 2: // 不等于
                return fileValue != value
              default:
                return false
            }
          })
          find && filterBtns.push(btn)
        } else {
          filterBtns.push(btn)
        }
      })
    }
    //排序
    filterBtns.sort(compare);
    return filterBtns.map(t => {
      return this.getRenderBtn({ tableCode, tableConfig, record, btnConfig: t, type });
    })
  }


  /*
  获取表行项样式类名称
   */
  onTableRowClassName({ tableConfig, record }) {
    if (this.props.SetRowClass && typeof this.props.SetRowClass === 'function') {
      return this.props.SetRowClass(record);
    }
    else if (tableConfig && tableConfig.classField) {
      let className = null;
      let classAry = tableConfig.classField.split(',');
      classAry.forEach((n, i) => {
        let splitClass = n.split(':');
        if (splitClass.length === 2) {
          let filed = splitClass[0];
          let values = splitClass[1].split('|');
          let r = record[filed];

          if (r !== null && r !== undefined && values.length > 1) {
            let index = 0;
            let isGet = false;
            for (index = 0; index < values.length; index = index + 2) {
              if (values[index].toString() == r.toString()) { //如果数组中某个元素和你想要测试的元素对象element相等，则证明数组中包含这个元素，返回true

                isGet = true;
                break;
              }
            }
            if (isGet) {
              className = values[index + 1];
              return className;
            }
          }
        }
      });
      return className;
    }
    return null;
  }

  /*
  渲染表行项子表
   */
  onRenderTableSubRow({ tableCode, tableConfig, record }) {

  }

  /*
  展开表行项时
   */
  onTableExpandRow({ tableCode, tableConfig, record, expanded }) {

  }

  /*
    渲染表页脚
   */
  onRenderTableFooter({ tableCode, tableConfig, data, columns, selectedRowKeys }) {
    return <TableFooterByTotal data={data} sumNum={tableConfig.footerSumType} columns={columns} selected={selectedRowKeys} />
  }

  /*
  点击表行项
   */
  onTableClickRow({ tableCode, tableConfig, record }) {

  }

  /**
   * 按钮点击日志埋点
   * @param {*} BtnCode
   * @param {*} BtnName
   */
  btnOperateLog = (btnConfig) => {
    const { btnType: BtnCode, label: BtnName } = btnConfig || {}
    if (BtnCode !== undefined && BtnName !== undefined) {
      this.props.dispatch({
        type: 'app/operateLog',
        payload: {
          BtnCode,
          BtnName,
          FormCode: this.state.formData.CODE,
          FormName: this.state.formData.NAME,
          UserId: this.props.login.userId,
          OrgId: this.props.login.OrgId
        }
      })
    }
  }

  /*
     btn={
      id:按钮ID
      btnType:按钮类型
      code:按钮编号
      label:显示名称
      icon:按钮图标
      css:按钮样式
      formCode:表单编号
      api:API
      isConfirm:是否需确认
      checkSelected:检查选中
      isAddLog:是否需添加日志
     }
     type:0-行按钮  1-按钮  2-右侧按钮
   */
  getRenderBtn(params) {
    const { tableCode, tableConfig, record, btnConfig } = params ? params : {};
    const { formData } = this.state || {};
    const isRow = record;
    const isSelected = this.state[tableCode + '_isSelected'];
    const loadKey = tableCode + '_' + (record ? (record.ID + btnConfig.id) : btnConfig.id);
    const btnIsLoading = this.state[loadKey];
    const btnLoading = (loading) => {
      this.setState({
        [loadKey]: loading,
      })
    }

    const setformLoading = (loading) => {
      this.setState({
        formLoading: loading,
      })
    }
    const close = (type) => {
      if (type === undefined || type === 0) {
        const tmpFunc = this.state['closeModelFunc' + (record ? (record.ID + btnConfig.id) : btnConfig.id)];
        if (tmpFunc) {
          tmpFunc();
        }
      }
      if (type === undefined || type === 1) {
        this.loadTableData({ tableCode });
      }
    };
    let btnParam = this.onTableBtnParam({ ...params, close, btnLoading, setformLoading });
    if (!btnParam) {
      btnParam = {};
    }

    let { disabled, onBtnDisabled, content, click, json, onClick } = btnParam ? btnParam : {};

    let disabledClick = disabled ? e => e.stopPropagation() : null;
    let disabledStyle = disabled ? { color: "#c5c3c3", cursor: "not-allowed" } : { cursor: "pointer" };

    if (btnConfig.btnType === 0) { //自定义弹窗
      const closeFunc = (fun) => {
        const data = {};
        data['closeModelFunc' + (record ? (record.ID + btnConfig.id) : btnConfig.id)] = fun;
        this.setState(data);
      };
      const showData = {
        regClose: closeFunc,
      };


      const getIds = () => {
        if (btnConfig.btn.BTN_FUN_TYPE == 1) {//行按鈕
          if (record) {
            let d = false;
            if (typeof onBtnDisabled === 'function') {
              d = onBtnDisabled(record);
            }
            if (d) return;
            return record.ID;
          }
        }
        else {
          const selectRecords = this.getTableSelectedRecord({ tableCode });
          const tempSelectRecordIds = [];
          selectRecords.forEach(t => {
            let d = false;
            if (typeof onBtnDisabled === 'function') {
              d = onBtnDisabled(t);
            }
            if (d) return;
            tempSelectRecordIds.push(t.ID);
          });
          if (tempSelectRecordIds.length) {
            return tempSelectRecordIds.join(',');
          }
        }
      };


      if (!content && btnParam) {
        const that = this;
        const clickKey = btnConfig.code ? btnConfig.code : btnConfig.id;
        //
        let tempData = {
          id: (record ? record.ID : ''),
          ORG_ID_HV: (record ? record.ORG_ID : ''),//wyw 集团查看 明细
          parentRecord: record,
          clickKey,
          close,
          getIds,
          getTableSelectedRowKeys: () => that.getTableSelectedRowKeys({ tableCode }),
          btnConfig,
          ...getCustomParams(btnConfig.customParams),
          onSave: () => {
            close();
            this.loadTableData({ tableCode });
          },
          onCancel: () => {
            close();
          },
          onRegDestroyCacheDataFunc: (ret) => {
            if (!this.regDestroyCacheDataFunc) {
              this.regDestroyCacheDataFunc = {};
            }
            this.regDestroyCacheDataFunc[clickKey + (record ? record.ID : '')] = ret;
          }
        };



        const regClick = async function () {
          let ids = "";
          let isError = false;
          if (btnConfig.btn.BTN_FUN_TYPE == 0) {//按鈕 非行按鈕
            ids = that.getTableSelectedRowKeys({ tableCode });
            if (btnConfig.checkSelected && !ids) {
              message.error('请选择记录');
              isError = true;
            }
          }
          if (!isError) {
            await that.props.dispatch({
              type: 'custom/save',
              payload: {
                [clickKey + (record ? record.ID : '')]: true
              },
            });
          }
          that.btnOperateLog(btnConfig)
          return {
            isReturn: isError
          }
        };

        if (btnParam.data) {
          tempData = {
            ...tempData,
            ...btnParam.data,
          }
        }
        btnParam.content = <FormPage formCode={btnConfig.formCode} data={tempData} />;
        btnParam.click = () => { return regClick() };
        showData.close = () => {
          if (this.regDestroyCacheDataFunc && this.regDestroyCacheDataFunc[clickKey + (record ? record.ID : '')]) {
            this.regDestroyCacheDataFunc[clickKey + (record ? record.ID : '')]();
          }
        }
      }
      if (btnParam) {
        extend(showData, btnParam);
      }

      let disabledClick = (disabled || !getIds()) ? e => e.stopPropagation() : null;
      let disabledStyle = (disabled || !getIds()) ? { color: "c5c3c3", cursor: "not-allowed" } : { cursor: "pointer" };

      return <ShowModal key={record ? (record.ID + btnConfig.id) : btnConfig.id} title={btnConfig.label} data={showData} login={this.props.login}>
        {isRow
          ? <div><Icon type={btnConfig.icon} className="table_rowBtnStyle" title={btnConfig.label} onClick={disabledClick} style={disabledStyle} /></div>
          : <Button type={btnConfig.css} icon={btnConfig.icon} disabled={disabled || !isSelected && !isRow && btnConfig.checkSelected}>{btnConfig.label}</Button>}
      </ShowModal>;
    }
    else if (btnConfig.btnType === 2) { // 刷新
      if (!isRow) {
        return (
          <Button
            onClick={() => {
              this.btnOperateLog(btnConfig)
              this.loadTableData({ tableCode })
            }}
            type={btnConfig.css}
            icon={btnConfig.icon}
            key={btnConfig.id}>刷新</Button>
        );
      }
    }
    else if (btnConfig.btnType === 5 || btnConfig.btnType === 3 || btnConfig.btnType === 8 || btnConfig.btnType === 10) { //编辑 新增 查看 复制新增
      const isShow = btnConfig.btnType === 8;
      const getIds = () => {
        if (record) {
          let d = false;
          if (typeof onBtnDisabled === 'function') {
            d = onBtnDisabled(record);
          }
          if (d) return;
          return record.ID;
        }
        const selectRecords = this.getTableSelectedRecord({ tableCode });
        const tempSelectRecordIds = [];
        selectRecords.forEach(t => {
          let d = false;
          if (typeof onBtnDisabled === 'function') {
            d = onBtnDisabled(t);
          }
          if (d) return;
          tempSelectRecordIds.push(t.ID);
        });
        if (tempSelectRecordIds.length) {
          return tempSelectRecordIds.join(',');
        }
      };
      const isBatchEdit = btnConfig.btnType === 5 && !isRow;
      const isEdit = !isBatchEdit;
      const extKey = record ? (record.ID + btnConfig.id) : btnConfig.id;
      const reloadKey = (isEdit ? '' : 'batchEdit_') + (btnConfig.formCode + '_' + extKey + '_reload')
      const data = {
        isShow: isShow,
        record,
        isBatchEdit: btnConfig.btnType === 5 && !isRow,
        parentRecord: this.props.parentRecord,
        getIds,
        TreeSelected: this.props.data?.TreeSelected,
        TreeSelectId: this.props.data?.TreeSelectId,
        reloadKey,
      };

      if (data.isBatchEdit && !disabled) {
        disabled = !isSelected;
      }
      if (record && !disabled) {
        disabled = !getIds();
      }
      disabledClick = disabled ? e => e.stopPropagation() : null;
      disabledStyle = disabled ? { color: "#c5c3c3", cursor: "not-allowed" } : { cursor: "pointer" };
      const id = btnConfig.btnType !== 10 && record ? record.ID : '';
      const copySrcId = btnConfig.btnType === 10 && record ? record.ID : '';
      return (
        <EditModal
          key={record ? (record.ID + btnConfig.id) : btnConfig.id}
          id={id}
          copySrcId={copySrcId}
          data={data}
          title={btnConfig.label}
          customParams={this.props.customParams}
          onSave={() => {
            this.loadTableData({ tableCode })
          }}
          formCode={btnConfig.formCode}
          click={visible => {
            visible && this.btnOperateLog(btnConfig)
            if (typeof click === 'function') {
              click(visible)
            }
          }}
        >
          {
            isRow
              ? <div><Icon type={btnConfig.icon} className="table_rowBtnStyle" disabled={disabled} title={btnConfig.label} onClick={disabledClick} style={disabledStyle} /></div>
              : <Button type={btnConfig.css} icon={btnConfig.icon} disabled={disabled}>{btnConfig.label}</Button>
          }
        </EditModal>
      )
    }
    else if (btnConfig.btnType === 4) { //删除
      const getIds = () => {
        if (record) {
          let d = false;
          if (typeof onBtnDisabled === 'function') {
            d = onBtnDisabled(record);
          }
          if (d) return;
          return record.ID;
        }
        const selectRecords = this.getTableSelectedRecord({ tableCode });
        const tempSelectRecordIds = [];
        selectRecords.forEach(t => {
          let d = false;
          if (typeof onBtnDisabled === 'function') {
            d = onBtnDisabled(t);
          }
          if (d) return;
          tempSelectRecordIds.push(t.ID);
        });
        if (tempSelectRecordIds.length) {
          return tempSelectRecordIds.join(',');
        }
      };
      if (isRow) {
        return (
          <ConfirmButton
            key={record ? (record.ID + btnConfig.id) : btnConfig.id}
            isConfirm={true}
            onClick={() => {
              this.btnOperateLog(btnConfig)
              this.onTableBtnDelete({ ...params, btnConfig, id: getIds(), btnLoading })
            }}
            type={btnConfig.css ? btnConfig.css : 'danger'}
            icon={btnConfig.icon ? btnConfig.icon : 'delete'}
            title="删除"
            size="small"
            confirmTitle={'是否确定删除?'}
            disabled={disabled || !getIds()}
            loading={btnIsLoading}
          />
        )
      }
      else {
        return (
          <ConfirmButton
            key={record ? (record.ID + btnConfig.id) : btnConfig.id}
            isConfirm={true}
            onClick={() => {
              this.btnOperateLog(btnConfig)
              this.onTableBtnBatchDelete({ ...params, btnConfig, ids: getIds(), btnLoading })
            }}
            type={btnConfig.css ? btnConfig.css : 'danger'}
            icon={btnConfig.icon ? btnConfig.icon : 'delete'}
            title="删除"
            confirmTitle={'是否确定删除?'}
            disabled={disabled || !isSelected}
            loading={btnIsLoading}
          />
        )
      }
    }
    else if (btnConfig.btnType === 6) { //自定义按钮事件
      const regClick = () => {
        let tempBtnParam = null;
        if (typeof click === 'function') {
          tempBtnParam = click();
        }
        let { json, onBtnDisabled, onClick } = tempBtnParam ? tempBtnParam : {};
        const getIds = () => {
          if (record) {
            let d = false;
            if (typeof onBtnDisabled === 'function') {
              d = onBtnDisabled(record);
            }
            if (d) return;
            return record.ID;
          }
          const selectRecords = this.getTableSelectedRecord({ tableCode });
          const tempSelectRecordIds = [];
          selectRecords.forEach(t => {
            let d = false;
            if (typeof onBtnDisabled === 'function') {
              d = onBtnDisabled(t);
            }
            if (d) return;
            tempSelectRecordIds.push(t.ID);
          });
          if (tempSelectRecordIds.length) {
            return tempSelectRecordIds.join(',');
          }
        };
        const ids = getIds();
        if (!ids && (isRow || !isRow && btnConfig.checkSelected)) {
          message.error('请选择记录或者记录无效');
          return;
        }
        if (btnConfig.api) {
          const filter = initFilter(this.props.login.OrgId, ids);
          const temJson = json ? { ...filter, ...json } : filter;
          if (typeof onClick === 'function') {
            if (onClick(temJson, ids)) {
              return;
            }
          }
          btnLoading(true);
          this.props.dispatch({
            type: 'app/getDataByPost',
            payload: temJson,
            url: btnConfig.api,
            onComplete: (ret) => {
              btnLoading(false);
              if (ret) {
                this.loadTableData({ tableCode });
                message.success('执行成功');
                //添加日志
                if (btnConfig.isAddLog) {
                  const formId = (tableConfig.formId ? tableConfig.formId : (tableConfig.formData ? tableConfig.formData.ID : this.props.formId));
                  const formCode = tableConfig.formCode ? tableConfig.formCode : (tableConfig.formData ? tableConfig.formData.CODE : this.props.formCode);
                  const title = '用户【' + this.props.login.user.NAME + '】:执行按钮' + btnConfig.title;
                  const data = 'ID:' + ids;
                  const extData = "Json:" + JSON.stringify(temJson);
                  this.addOtherLog({ formCode, formId, title, data, extData });
                }
              }
            }
          })
        }
        this.btnOperateLog(btnConfig)
      };
      disabled = disabled ? disabled : (((isRow && false || !isRow && !isSelected && btnConfig.checkSelected)) ? true : false);
      return (
        <ConfirmButton
          key={record ? (record.ID + btnConfig.id) : btnConfig.id}
          onClick={regClick}
          isConfirm={btnConfig.isConfirm}
          loading={btnIsLoading}
          type={btnConfig.css}
          icon={btnConfig.icon}
          title={btnConfig.label}
          size={isRow ? 'small' : null}
          confirmTitle={'是否确认执行?'}
          disabled={disabled}
        />
      )
    }
    else if (btnConfig.btnType === 7) { //自定义
      const getIds = () => {
        if (record) {
          let d = false;
          if (typeof onBtnDisabled === 'function') {
            d = onBtnDisabled(record);
          }
          if (d) return;
          return record.ID;
        }
        const selectRecords = this.getTableSelectedRecord({ tableCode });
        const tempSelectRecordIds = [];
        selectRecords.forEach(t => {
          let d = false;
          if (typeof onBtnDisabled === 'function') {
            d = onBtnDisabled(t);
          }
          if (d) return;
          tempSelectRecordIds.push(t.ID);
        });
        if (tempSelectRecordIds.length) {
          return tempSelectRecordIds.join(',');
        }
      };

      if (content) {
        return content;
      }
      if (btnConfig.api) {
        const regClick = () => {
          const ids = getIds();
          if (!ids && !isRow && btnConfig.checkSelected) {
            message.error('请选择记录');
            return;
          }
          const filter = initFilter(this.props.login.OrgId, ids);
          const temJson = json ? { ...filter, ...json } : filter;
          if (typeof onClick === 'function') {
            if (onClick(temJson, ids)) {
              return;
            }
          }
          btnLoading(true);
          this.btnOperateLog(btnConfig)
          this.props.dispatch({
            type: 'app/getDataByPost',
            payload: temJson,
            url: btnConfig.api,
            onComplete: (ret) => {
              btnLoading(false);
              if (ret) {
                this.loadTableData({ tableCode });
                message.success('执行成功');
                //添加日志
                if (btnConfig.isAddLog) {
                  const formId = (tableConfig.formId ? tableConfig.formId : (tableConfig.formData ? tableConfig.formData.ID : this.props.formId));
                  const formCode = tableConfig.formCode ? tableConfig.formCode : (tableConfig.formData ? tableConfig.formData.CODE : this.props.formCode);
                  const title = '用户【' + this.props.login.user.NAME + '】:执行按钮' + btnConfig.title;
                  const data = 'ID:' + ids;
                  const extData = "Json:" + JSON.stringify(temJson);
                  this.addOtherLog({ formCode, formId, title, data, extData });
                }
              }
            }
          })
        };
        disabled = disabled ? disabled : (((isRow && !getIds() || !isRow && !isSelected && btnConfig.checkSelected)) ? true : false);
        return (
          <ConfirmButton
            key={record ? (record.ID + btnConfig.id) : btnConfig.id}
            onClick={regClick}
            isConfirm={btnConfig.isConfirm}
            loading={btnIsLoading}
            type={btnConfig.css}
            icon={btnConfig.icon}
            title={btnConfig.label}
            size={isRow ? 'small' : null}
            confirmTitle={'是否确认执行?'}
            disabled={disabled}
          />
        )
      }
      const customParams = getCustomParams(btnConfig.customParams)
      if (customParams && customParams.print === 'true') {
        return (
          <HttpPrint onClick={() => this.btnOperateLog(btnConfig)}>
            <Button type={btnConfig.css} icon={btnConfig.icon} >{btnConfig.label}</Button>
          </HttpPrint>
        )
      }
    }
    else if (btnConfig.btnType === 9) { // 导出
      let { tableCode = this.defaultTableCode, tableConfig } = params ? params : {};
      tableConfig === undefined && (tableConfig = this.getTableConfig({ tableCode }));

      const tableColumns = this.getColumnByColumnConfig(tableCode)
      const tableDataSource = this.getTableData({ tableCode })
      const tableSelectedKeys = this.getTableSelectedRowKeys({ tableCode })
      const loadParamJson = this.getLoadTableDataParams(cloneDeep(this.initLoadParam({ tableCode })), tableCode)
      // 计算导出的 excel 需要在第一行插入的标题
      const formCode = tableConfig.formCode ? tableConfig.formCode : (tableConfig.formData ? tableConfig.formData.CODE : this.props.formCode)
      const searchModel = this.props.search || {
        fieldConfigs: {},
        relatedFieldConfigs: {}
      }
      const relatedFieldConfigs = searchModel.relatedFieldConfigs[formCode] || {}
      const relatedFormCode = relatedFieldConfigs.relatedTo
      const relatedExtraRows = relatedFieldConfigs.extraRows
      const fieldConfigs = searchModel.fieldConfigs[relatedFormCode || formCode] || []
      const exportInserTitle = [tableConfig.exportTitle || formData.NAME]
      if (relatedFormCode && Array.isArray(relatedExtraRows)) {
        exportInserTitle.push(...relatedExtraRows)
      }
      fieldConfigs.forEach(fc => {
        const { isExportTitle, label, value, dataSource } = fc
        const cellText = renderExportCell(value, dataSource, fc, this.props.app.enums || {})
        if (isExportTitle && cellText) {
          exportInserTitle.push(`${label}：${cellText}`)
        }
      })

      if (!isRow) {
        return (
          <ExportToExcel
            fileName={formData.NAME}
            insertRows={[exportInserTitle.join(' ')]}
            columns={tableColumns}
            columnConfigs={tableConfig.columns}
            dataSource={tableDataSource && tableDataSource.Data ? tableDataSource.Data : []}
            selectedKeys={tableSelectedKeys}
            config={{
              type: 'listPage/getTableData',
              payload: loadParamJson || {},
              url: tableConfig.api,
              customParams:btnConfig.customParams//wyw 添加 参数到导出功能 url
            }}
          />
        )
      }
      return null;
    }
    else if (btnConfig.btnType === 11) { // 导入
      if (!isRow) {
        return (
          <ImportModal
            key={record ? (record.ID + btnConfig.id) : btnConfig.id}
            formCode={btnConfig.formCode}
            click={() => { this.btnOperateLog(btnConfig) }}
          >
            <Button icon='download'>导入</Button>
          </ImportModal>
        )
      }
      return null;
    }
    else if (btnConfig.btnType === 12) { // 列表弹窗
      return (
        <TableModal
          key={record ? (record.ID + btnConfig.id) : btnConfig.id}
          formCode={btnConfig.formCode}
          id={record.ID}
          customParams={btnConfig.customParams}
          data={record}
          title={btnConfig.label}
          parentId={btnConfig.btnType === -1 ? record.parent_id : record.ID}
          click={visible => {
            visible && this.btnOperateLog(btnConfig)
            if (typeof this.click === 'function') {
              this.click(visible)
            }
          }}>
          <Icon type={btnConfig.icon} title={btnConfig.label} />
        </TableModal>
      )
    }
    else if (btnConfig.btnType === 14) { // 组合表单
      return (
        <CombinationModal
          key={record ? (record.ID + btnConfig.id) : btnConfig.id}
          formCode={btnConfig.formCode}
          id={record.ID}
          customParams={btnConfig.customParams}
          data={record}
          title={btnConfig.label}
          parentId={btnConfig.btnType === -1 ? record.parent_id : record.ID}
          click={visible => {
            visible && this.btnOperateLog(btnConfig)
            if (typeof this.click === 'function') {
              this.click(visible)
            }
          }}>
          <Icon type={btnConfig.icon} title={btnConfig.label} />
        </CombinationModal>
      )
    }
    else if (btnConfig.btnType === 15) { // 自定义导入
      const uploadProps = {
        name: 'file',
        showUploadList: false,
        action: config.serviceHost(btnConfig.api),
        data: { OrgId: this.props.login.OrgId },
        headers: this.getRequestHeaders(),
        onChange: (info) => {
          const { name, status, response = {} } = info.file
          const { IsSuccessful, ErrorMessage } = response
          if (status === 'done') {
            if (IsSuccessful) {
              message.success(`${name} 导入并保存成功`)
              this.forceUpdate()
            } else {
              message.error(`${name} 导入失败，${ErrorMessage}`)
            }
          } else if (status === 'error') {
            if (response.ErrorMessage) {
              message.error(`${name} 导入错误，${ErrorMessage}`)
            } else {
              message.error(`${name} 导入错误`)
            }
          }
        }
      }
      return (
        <Upload {...uploadProps}>
          <Button><Icon type={btnConfig.icon} title={btnConfig.label} /> {btnConfig.label}</Button>
        </Upload>
      )
    }
    else if (btnConfig.btnType === 16) { // 带参数的自定义弹窗
      return (
        <FormModal
          key={record ? (record.id + btnConfig.id) : btnConfig.id}
          formCode={btnConfig.formCode}
          id={record?.id}
          customParams={btnConfig.customParams}
          data={record}
          title={btnConfig.label}
          parentId={btnConfig.btnType === -1 ? record?.parent_id : record?.id}
          click={visible => {
            visible && this.btnOperateLog(btnConfig)
            if (typeof this.click === 'function') {
              return this.click(visible)
            }
          }}>
          <Icon type={btnConfig.icon} title={btnConfig.label} />
        </FormModal>
      )
    }
    else if (btnConfig.btnType === 17) { // 树弹窗
      return (
        <FormModal
          key={record ? (record.id + btnConfig.id) : btnConfig.id}
          formCode={btnConfig.formCode}
          id={record?.id}
          customParams={btnConfig.customParams}
          data={record}
          title={btnConfig.label}
          parentId={btnConfig.btnType === -1 ? record?.parent_id : record?.id}
          click={visible => {
            visible && this.btnOperateLog(btnConfig)
            if (typeof this.click === 'function') {
              return this.click(visible)
            }
          }}>
          <Icon type={btnConfig.icon} title={btnConfig.label} />
        </FormModal>
      )
    }
    else if (btnConfig.btnType === 18) { // word打印模板
      return (
        <ShowModal
          key={record ? (record.ID + btnConfig.id) : btnConfig.id}
          title={btnConfig.label}
          data={{
            content: <BDWordPreviewPage recordId={record.ID} templateCode={btnConfig.wordTemplateCode} />
          }}
        >
          <Icon
            type={btnConfig.icon}
            className='table_rowBtnStyle'
            title={btnConfig.label}
            onClick={disabledClick}
            style={disabledStyle}
          />
        </ShowModal>
      )
    }
    else if (btnConfig.btnType === 20) { // 复选框
      return (
        <Checkbox
          checked={tableConfig.dragable}
          onChange={evt => {
            tableConfig.dragable = evt.target.checked
            this.forceUpdate()
          }}
        >
          {btnConfig.label}
        </Checkbox>
      )
    }

    return isRow ?
      <div><Icon type={btnConfig.icon} className="table_rowBtnStyle" onClick={disabledClick} style={disabledStyle} title={btnConfig.label} /></div> :
      <Button type={btnConfig.css} icon={btnConfig.icon} >{btnConfig.label}</Button>;
  }


  /*
      参数：{
        tableCode,tableConfig,record,btnConfig,
        type:0-行按钮  1-按钮  2-右侧按钮
        按钮类型：
           0://自定义弹窗
             close 关闭事件,selectRecords：选中行项函数
           6://自定义点击事件
             selectRecords：选中行项函数
           7://自定义
             selectRecords：选中行项函数
       }
       返回值：{
         按钮类型：
             0://自定义弹窗
              disabled 按钮是否失效,click：点击事件,onBtnDisabled：按钮失效事件,content：弹窗中显示的文本DOM
             3，5,8，10：// 新增 编辑 查看 复制新增
                disabled:按钮是否失效,click:点击事件
             4:删除
                 disabled:按钮是否失效
              6:自定义点击事件
                 disabled 按钮是否失效,click：点击事件,onBtnDisabled：按钮失效事件,json：点击调用参数
              7:自定义
                disabled 按钮是否失效,content：弹窗中显示的文本DOM,onBtnDisabled：按钮失效事件,json：点击调用参数
       }
   */
  onTableBtnParam(params) {
    // const { tableCode, tableConfig, record, btnConfig } = params ? params : {};
    return {};
  }

  /*
  删除记录
   */
  onTableBtnDelete(params) {
    let { tableCode = this.defaultTableCode, tableConfig, id, btnConfig, btnLoading } = params ? params : {};
    if (tableConfig === undefined) {
      tableConfig = this.getTableConfig({ tableCode });
    }
    const delApiUrl = tableConfig ? tableConfig.deleteApi : {};
    if (empty(delApiUrl)) {
      message.error('请配置删除API');
      return;
    }
    if (empty(id)) {
      return;
    }
    if (btnLoading) {
      btnLoading(true);
    }
    this.props.dispatch({
      type: 'app/deleteItem',
      payload: { id },
      url: delApiUrl,
      onComplete: (ret) => {
        if (btnLoading) {
          btnLoading(false);
        }
        if (ret) {
          const deleteData = [];
          if (btnConfig.isAddLog) {
            const tableData = this.getTableData({ tableCode });
            const selectKeys = id.split(',');// this.getTableSelectedRowKeys({ tableCode });

            if (selectKeys && tableData && tableData.Data) {
              selectKeys.forEach(item => {
                tableData.Data.forEach(t => {
                  if (item.toString().toUpperCase() === t.ID.toString().toUpperCase()) {
                    deleteData.push(t);
                  }
                })
              });
            }
          }
          message.success('删除成功');
          this.loadTableData({ tableCode });
          if (btnConfig.isAddLog) {
            const formId = (tableConfig.formId ? tableConfig.formId : (tableConfig.formData ? tableConfig.formData.ID : this.props.formId));
            const formCode = tableConfig.formCode ? tableConfig.formCode : (tableConfig.formData ? tableConfig.formData.CODE : this.props.formCode);
            const extData = deleteData ? ('删除数据，详情：', JSON.stringify(deleteData)) : null;
            this.addDeleteLog({ formCode, ids: id, formId, extData });
          }
        }
      }
    })
  }

  /*
  批次删除记录
   */
  onTableBtnBatchDelete(params) {
    let { tableCode = this.defaultTableCode, tableConfig, ids, btnConfig, btnLoading } = params ? params : {};
    if (tableConfig === undefined) {
      tableConfig = this.getTableConfig({ tableCode });
    }
    const delApiUrl = tableConfig ? tableConfig.batchDeleteApi : {};
    if (empty(delApiUrl)) {
      message.error('请配置删除API');
      return;
    }
    if (!ids) return;
    if (btnLoading) {
      btnLoading(true);
    }
    this.props.dispatch({
      type: 'app/deleteItemBatch',
      payload: {
        ids: ids
      },
      url: delApiUrl,
      onComplete: (ret) => {
        if (btnLoading) {
          btnLoading(false);
        }
        if (ret) {
          const deleteData = [];
          if (btnConfig.isAddLog) {
            const tableData = this.getTableData({ tableCode });
            const selectKeys = ids.split(',');// this.getTableSelectedRowKeys({ tableCode });

            if (selectKeys && tableData && tableData.Data) {
              selectKeys.forEach(item => {
                tableData.Data.forEach(t => {
                  if (item.toString().toUpperCase() === t.ID.toString().toUpperCase()) {
                    deleteData.push(t);
                  }
                })
              });
            }
          }
          this.loadTableData({ tableCode });
          message.success('删除成功');
          this.setTableSelectedRowKeys({ tableCode, selectedKeys: [] });
          if (btnConfig.isAddLog) {
            const formId = (tableConfig.formId ? tableConfig.formId : (tableConfig.formData ? tableConfig.formData.ID : this.props.formId));
            const formCode = tableConfig.formCode ? tableConfig.formCode : (tableConfig.formData ? tableConfig.formData.CODE : this.props.formCode);
            const extData = deleteData ? ('删除数据，详情：', JSON.stringify(deleteData)) : null;
            this.addDeleteLog({ formCode, ids, formId: formId, extData });
          }
        }
      }
    })
  }

  genDataSource(tableCode, tableData) { // 生产表格的dataSource
    const { localSearch = {} } = this.state;
    if (tableData.Data) {
      if (Object.keys(localSearch).length) {
        const tableConfig = this.getTableConfig({ tableCode });
        return tableData.Data.filter(record => {
          const col = tableConfig.columns.filter(t => t.field === localSearch.fields)[0];// '';//localSearch.fields
          let val = getDataFieldValue(record, col.field);
          const isShowCol = col.controlType === null || col.controlType === undefined || col.controlType === 0 || col.controlType > 100;
          if (isShowCol) {
            if (col.formatFuncName) {
              col.format = (params) => {
                const formatValue = this.onTableRowFormatColumn({ record, text: val, tableCode, tableConfig, colConfig: params.col });
                setDataFieldValue(record, (col.field ? col.field : col.formatFuncName) + '_formatValue', formatValue);
                val = formatValue;
              };
            }
            val = this.getTableCellText({ col, record, text: val, isReturnString: true });
          }

          //val = getDataFieldValue(record, col.field);
          if (col.field && col.field.indexOf('Nav_SysParams') > -1) {
            val = this.getControlValue({
              controlType: col.controlType, value: col.value,
              data: col.data
            });
          }

          if (val) { // 值
            if (typeof val === "number") {
              val = val.toString()
            }
            if (String(val) === "null") {
              return false
            }
            return val.indexOf(localSearch.value) >= 0;
          }

          return false;
        })
      } else {
        return tableData.Data
      }
    } else {
      return []
    }
  }

  /**
   * 表格操作栏
   */
  tableOperateColumn(tableCode) {
    const tableConfig = this.getTableConfig({ tableCode });
    const rowBtns = tableConfig.rowBtns;

    const OperateTitle = () => {
      return (
        <ColumnSort
          customCfg={tableConfig.customCfg}
          onChange={(field, value, t) => this.handleCustomFieldChange(tableConfig, field, value, t)}
          clearCustomConfig={() => this.clearCustomConfig(tableConfig)}
          saveCustomConfig={() => this.saveCustomConfig(tableConfig)}
        />
      )
    }

    if (rowBtns && rowBtns.length) {
      let currRecord = {};
      // let obj = {
      //   render: (text, record, index) => {
      //     currRecord = record
      //   }
      // };

      //let l = this.getRenderBtns(tableCode, tableConfig, currRecord, rowBtns, 0).filter(value => typeof value !== "undefined").length;
      //if (l === 0 || l == null) l = 1;
      let width = 32 * rowBtns.length;
      if (width < 80) {
        width = 80;
      }
      return (
        <Column
          title="操作"
          key={rowBtns && rowBtns.length ? rowBtns[0].id : ''}
          dataIndex=''
          // 如果需要支持拖曳排序，则不允许fixed，否则会报错
          fixed={tableConfig.hasChildren || tableConfig.dragable ? false : 'right'}
          width={width}
          filterIcon={<Icon type="menu" />}
          filterDropdown={<OperateTitle />}
          render={(text, record, index) => {
            // 此项宽度设置为 单个样式宽 * 按钮个数 - 左右边距
            return <div className={styles.actionTd} style={{ width: 32 * rowBtns.length - 8 }}>
              {
                this.getRenderBtns(tableCode, tableConfig, record, rowBtns, 0)
              }
            </div>
          }}
        />
      )
    } else {
      return (
        <Column
          title=""
          key="operateColumn"
          dataIndex=''
          filterIcon={<Icon type="menu" />}
          filterDropdown={<OperateTitle />}
          width={35}
          render={() => <div style={{ width: 26 }} />}
        />
      )
    }
  }

  // 伸缩表格列操作
  handleResize = (tableCode, colu) => (e, { size }) => {
    if (this.state.tableConfig === undefined || !this.state.tableConfig[tableCode]) {
      message.error("表单配置错误！");
      return
    }

    let thisColumns = { ...this.state.tableConfig[tableCode] }
    if (this.state.tableConfig === undefined) {
      this.state.tableConfig = {};
    }
    thisColumns.columns.forEach(item => {
      if (item.field === colu.dataIndex) {
        item.width = size.width
      }
    })

    this.setState({
      tableConfig: {
        ...this.state.tableConfig,
        [this.state.tableConfig[tableCode]]: thisColumns
      }
    })
  }

  /**
   * 批量新增保存
   */
  handleBatchAddSave = (tableCode) => {
    const { selectedRowsAll = [] } = this.state
    const { close } = this.props.data
    close instanceof Function && close(undefined, cloneDeep(selectedRowsAll))
    this.state.selectedRowsAll = undefined
    this.onSelectTableChange(tableCode, [], [])
  }

  moveRow = (dragIndex, hoverIndex, tableCode, tableConfig) => {
    const tableData = this.state.data[tableCode].Data
    const dragRow = tableData[dragIndex]
    const hoverRow = tableData[hoverIndex]
    const pageTable = tableConfig.pageTable || {}
    if (!pageTable.SORT) {
      message.error('未配置排序字段，操作取消')
      return
    }
    // 调用接口
    this.props.dispatch({
      type: 'listPage/listRowDragChange',
      payload: {
        Keyword: pageTable.DATA_TABLE,
        Parameter1: dragRow.ID,
        Parameter2: hoverRow.ID,
        Parameter3: pageTable.SORT,
        OrgId: this.props.login.OrgId
      },
      onComplete: (res) => {
        if (res) {
          // 更新数据
          const updateData = update(tableData, {
            $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]]
          })
          this.state.data[tableCode].Data = updateData
          this.setState({ data: this.state.data })
        }
      }
    })
  }

  /*
  渲染表
   */
  getRenderTable(tableCode) {
    if (tableCode === undefined) {
      tableCode = this.defaultTableCode;
    }
    let tableConfig = this.getTableConfig({ tableCode });
    if (!tableConfig) return <DataLoading style={{ height: 300 }} />;
    const tableHeight = tableConfig.pageTable ? tableConfig.pageTable.HEIGTH : 0;
    const tableWidth = tableConfig.pageTable ? tableConfig.pageTable.WIDTH : 0;
    const isFixed = tableConfig.checked || (tableConfig.rowBtns && tableConfig.rowBtns.length) || tableHeight; // 是否固定列

    let newColumns = this.getColumnByColumnConfig(tableCode); // 表头字段

    let loadParam = this.getLoadParam({ tableCode });
    let tableData = this.getTableData({ tableCode });
    const selectKeys = this.getTableSelectedRowKeys({ tableCode });
    loadParam = loadParam || {};
    tableData = tableData || {};
    const tableDataSource = this.genDataSource(tableCode, tableData)
    tableDataSource.forEach(tds => {
      !tds.hasOwnProperty('key') && (tds.key = tds.ID)
    })
    const defaultExpandedRowKeys = tableDataSource && tableDataSource.length ? [tableDataSource[0].key] : []

    const paginationConfig = loadParam?.IsAllLoad ? false : {
      pageSizeOptions: ['5', '10', '20','100'],
      current: loadParam ? loadParam.PageIndex : 1,
      pageSize: loadParam ? loadParam.Limit : 10,
      total: tableData ? tableData.TotalCount : 0,
      showSizeChanger: true,
      showQuickJumper: true,
      size: 'small',
      position: (tableConfig.position ? tableConfig.position : 'bottom'),
      showTotal: () => `共 ${tableData ? tableData.TotalCount : 0} 条`
    };

    // 配置最多可选个数
    const customRowSelection = tableConfig.maxCheckCount ? {
      hideDefaultSelections: true,
      columnTitle: ' ',
      getCheckboxProps: (record) => {
        return {
          disabled: selectKeys.length >= tableConfig.maxCheckCount && selectKeys.indexOf(record.ID) === -1
        }
      }
    } : {}

    const rowSelection = {
      // 如果需要支持拖曳排序，则不允许fixed，否则会报错
      fixed: !tableConfig.hasChildren && !tableConfig.dragable,
      selectedRowKeys: selectKeys,
      columnWidth: 32,
      onChange: (selectedRowKeys, selectedRows) => { this.onSelectTableChange(tableCode, selectedRowKeys, selectedRows); },
      type: tableConfig && tableConfig.checkType == 1 ? "radio" : "checkbox",
      hideDefaultSelections: false,
      ...customRowSelection
    };

    let hasFooter = () => { // 是否显示底部
      let footerSumType = tableConfig.footerSumType;
      if (footerSumType === 1) {
        return true
      } else if (footerSumType === 2) {
        return selectKeys && selectKeys.length > 0;
      } else {
        return false;
      }
    };

    /**
     * 固定规则：
     * 固定列要设置宽度（操作列除外）
     * 留少数几列不设定宽度
     */
    let isScrollX = () => {
      if (isFixed) {
        const totalWidth = newColumns.reduce((a, b) => {
          if (b.width) {
            return a + b.width
          } else {
            return a + 0
          }
        }, 0);
        const scrollX = tableWidth > (totalWidth + 200) ? tableWidth : (totalWidth + 200);
        return { scroll: { x: scrollX, y: tableHeight } }
      } else {
        return { scroll: { y: tableHeight } }
      }
    };

    const openNotification = (h) => {
      notification.destroy();
      notification.open({
        message: h.title,
        key: h.key,
        placement: "bottomRight",
      })
    };

    let isLoading = this.props.loading ? this.props.loading.effects["listPage/getTableData"] : false;
    if (!isLoading) {
      isLoading = this.state.formLoading
    }
    const isBatchAddList = this.props.data && this.props.data.btnTypeBatchAdd
    const contentWidth = tableConfig.pageTable && tableConfig.pageTable.WIDTH ? tableConfig.pageTable.WIDTH : "auto"
    const TableHeadBtns = this.getRenderBtns(tableCode, tableConfig, null, tableConfig.btns, 1);
    const { components } = getDragableProps()
    const dragableProps = tableConfig.dragable ? {
      components: {
        ...components,
        ...TableResizableCell
      },
      onRow: (rowRecord, index) => ({
        index,
        moveRow: (dragIndex, hoverIndex) => this.moveRow(dragIndex, hoverIndex, tableCode, tableConfig),
        onClick: () => {
          this.onTableClickRow({ tableCode, tableConfig, rowRecord });
        }
      })
    } : {
      components: TableResizableCell,
      onRow: (rowRecord, index) => ({
        onClick: () => {
          this.onTableClickRow({ tableCode, tableConfig, rowRecord });
        }
      })
    }
    return <React.Fragment>
      {
        isBatchAddList
          ? (
            <div className={styles.tableBtnBar}>
              <Button type="primary" onClick={() => this.handleBatchAddSave(tableCode)}>保存</Button>
            </div>
          ) : (
            TableHeadBtns && TableHeadBtns.length
              ? (
                <div className={styles.tableBtnBar}>
                  {TableHeadBtns}
                </div>
              )
              : null
          )
      }

      <div className={styles.tableContent} style={{ width: contentWidth }}>
        <Table
          rowKey="ID"
          id={tableConfig.id}
          loading={isLoading}
          size="small"
          pagination={paginationConfig}
          dataSource={tableDataSource}
          onChange={(pagination, filters, sorter) => {
            this.onTableChange(tableCode, pagination, filters, sorter)
          }}
          rowSelection={tableConfig.checked ? rowSelection : null}
          rowClassName={(record, index) => {
            const remoteClass = this.onTableRowClassName({ tableConfig, record })
            const crossClass = index % 2 === 1 ? 'dark-row' : 'light-row'
            if (remoteClass) {
              return classNames(styles[remoteClass]);
            }
            return classNames(styles[crossClass])
          }}
          expandedRowRender={(tableConfig.hasChildren ? (record) => {
            return this.onRenderTableSubRow({ record, tableCode, tableConfig });
          } : null)}
          expandIcon={(props) => {
            if (!props.expandable) return null
            if (props.expanded) {
              return <Icon type="up" onClick={e => props.onExpand(props.record, e)} />
            } else {
              return <Icon type="down" onClick={e => props.onExpand(props.record, e)} />
            }
          }}
          expandedRowKeys={this.state.expandedRowKeysChanged ? this.state.expandedRowKeys : defaultExpandedRowKeys}
          onExpand={(expanded, record) => {
            this.onTableExpandRow({ tableCode, tableConfig, record, expanded })
          }}
          onExpandedRowsChange={expandedRowKeys => {
            this.setState({
              expandedRowKeysChanged: true,
              expandedRowKeys
            })
          }}
          footer={hasFooter() ? (data) => {
            return this.onRenderTableFooter({
              tableCode,
              tableConfig,
              selectedRowKeys: selectKeys,
              data,
              columns: tableConfig.columns
            });
          } : null}
          bordered
          {...isScrollX()}
          {...dragableProps}
        >
          {
            newColumns && newColumns.map((h, index) => {
              return (
                <Column
                  {...h}
                  onCell={() => {
                    return {
                      onDoubleClick: (e) => {
                        e.preventDefault();
                        e.stopPropagation()
                        if (h.title) {
                          openNotification(h);
                        }
                      }
                    }
                  }}
                  onHeaderCell={column => {
                    return {
                      onMouseEnter: () => { // 鼠标移入表头单元格
                        this.setState({
                          showColumnSetting: column.key
                        })
                      },
                      width: column.width,
                      onResize: this.handleResize(tableCode, column)
                    };
                  }}
                />
              )
            })
          }
          {!isBatchAddList ? this.tableOperateColumn(tableCode) : null}
        </Table>
      </div>
    </React.Fragment>
  }

  handleTableCardSelect = (evt, item, tableCode) => {
    const selectKeys = cloneDeep(this.getTableSelectedRowKeys({ tableCode }))
    if (evt.target.checked) {
      this.onSelectTableChange(tableCode, [item.ID].concat(selectKeys), [item])
    } else {
      const findIndex = selectKeys.findIndex(sel => sel === item.ID)
      if (findIndex !== -1) {
        selectKeys.splice(findIndex, 1)
        this.onSelectTableChange(tableCode, selectKeys, [])
      }
    }
  }

  /*
   * 渲染卡片式表格
   */
  getRenderTableCard(tableCode) {
    if (tableCode === undefined) tableCode = this.defaultTableCode
    let tableConfig = this.getTableConfig({ tableCode })
    if (!tableConfig) return null;

    let loadParam = this.getLoadParam({ tableCode });
    let tableData = this.getTableData({ tableCode });
    loadParam = loadParam || { PageIndex: 1, IsAllLoad: false, Limit: 10 };
    tableData = tableData || { TotalCount: 0 };

    const newColumns = this.getColumnByColumnConfig(tableCode) // 表头字段
    const tableDataSource = this.genDataSource(tableCode, tableData)
    const selectKeys = this.getTableSelectedRowKeys({ tableCode })
    const paginationConfig = {
      pageSizeOptions: ['5', '10', '20','100'],
      current: loadParam ? loadParam.PageIndex : 1,
      pageSize: loadParam ? (loadParam.IsAllLoad ? loadParam.ShowLimit : loadParam.Limit) : 10,
      total: tableData ? tableData.TotalCount : 0,
      showSizeChanger: true,
      showQuickJumper: true,
      size: 'small',
      position: (tableConfig.position ? tableConfig.position : 'bottom'),
      showTotal: () => `共 ${tableData ? tableData.TotalCount : 0} 条`
    }

    let isLoading = this.props.loading ? this.props.loading.effects["listPage/getTableData"] : false;
    if (!isLoading) {
      isLoading = this.state.formLoading
    }
    const isBatchAddList = this.props.data && this.props.data.btnTypeBatchAdd
    const TableHeadBtns = this.getRenderBtns(tableCode, tableConfig, null, tableConfig.btns, 1)

    const WrapComponent = tableConfig.dragable ? DragDropCard : React.Fragment

    return <React.Fragment>
      <IFComponent
        IF={!!isBatchAddList}
        ELSE={
          <IFComponent IF={TableHeadBtns && TableHeadBtns.length}>
            <div className={styles.tableBtnBar}>{TableHeadBtns}</div>
          </IFComponent>
        }
      >
        <div className={styles.tableBtnBar}>
          <Button type="primary" onClick={() => this.handleBatchAddSave(tableCode)}>保存</Button>
        </div>
      </IFComponent>
      <div style={{ textAlign: 'center' }}>
        <Spin spinning={isLoading} wrapperClassName={styles.tableCardSpin}>
          {
            tableDataSource.map((ds, dsIndex) => {
              const actionBtns = this.getRenderBtns(tableCode, tableConfig, ds, tableConfig.rowBtns, 0)
              const thumbCode = get(ds, tableConfig.cardPicField)
              return (
                <WrapComponent
                  row={ds}
                  index={dsIndex}
                  moveRow={(dragIndex, hoverIndex) => this.moveRow(dragIndex, hoverIndex, tableCode, tableConfig)}
                >
                  <div key={ds.ID} className={styles.tableCard}>
                    <IFComponent IF={!!tableConfig.checked}>
                      <Checkbox
                        checked={selectKeys.indexOf(ds.ID) !== -1}
                        onChange={evt => this.handleTableCardSelect(evt, ds, tableCode)}
                        className={styles.tableCardCheckbox}
                      />
                    </IFComponent>
                    {
                      newColumns.map(col => {
                        return (
                          <div key={col.key} className={styles.tableCardZone}>
                            <span>{col.title}</span>
                            <span>：</span>
                            <span>{col.render ? col.render(ds[col.dataIndex], ds) : ds[col.dataIndex]}</span>
                          </div>
                        )
                      })
                    }
                    <IFComponent IF={!isBatchAddList}>
                      <div className={styles.tableCardZone}>
                        <span>操作：</span>
                        <div
                          className={styles.actionTd}
                          style={{ width: actionBtns.length ? actionBtns.length * 22 : 'auto' }}
                        >
                          {actionBtns}
                        </div>
                      </div>
                    </IFComponent>
                    <IFComponent IF={!!thumbCode}>
                      <div className={styles.tableCardPic}>
                        <PictureThumb
                          thumbCodes={[thumbCode]}
                          thumbConfigs={[{ target: thumbCode }]}
                          style={{ maxWidth: 120 }}
                        />
                      </div>
                    </IFComponent>
                  </div>
                </WrapComponent>
              )
            })
          }
        </Spin>
        <Pagination
          onChange={(current, pageSize) => {
            this.onTableChange(tableCode, { ...paginationConfig, current, pageSize })
          }}
          onShowSizeChange={(current, pageSize) => {
            this.onTableChange(tableCode, { ...paginationConfig, current, pageSize })
          }}
          {...paginationConfig}
        />
      </div>
    </React.Fragment>
  }
}

export default TableBaseComponent;