UNPKG

fastlion-amis

Version:

一种MIS页面生成工具

1,250 lines 102 kB
// import React from 'react'; // import Checkbox from 'antd/lib/Checkbox'; // import Pagination from 'antd/lib/Pagination'; // import Spin from 'antd/lib/Spin'; // import message from 'antd/lib/message'; // import Button from 'antd/lib/Button'; // import Popover from 'antd/lib/Popover'; // import { render as renderAmis } from '../../../../index' // import { Renderer, RendererProps } from '../../../../factory'; // import { BaseSchema, SchemaApi } from '../../../../Schema'; // import './style/baseCss/index.css'; // import './components/MainExport/MainExport.css'; // import { Action } from '../../../../types'; // import { filter } from '../../../../utils/tpl'; // import { ScopedContext, IScopedContext } from '../../../../Scoped'; // import { CN } from './locale/pagination'; // import { findDOMNode } from 'react-dom'; // import styled from 'styled-components'; // import { // WrapperLionTableContainer, // WrapperLionTableFix, // WrapperLionTableBase, // WrapperLionTableFilter, // WrapperLionTableHeaderToolBar, // WrapperCommonThead, // WrapperCommonTbody, // WrapperCommonSurfaceGroup, // WrapperBtnPopover // } from './style/index'; // import { extractTemplate } from '../../utils/utils'; // import { LionTableStore, ILionTableStore } from '../../../../store/liontable'; // import { evalExpression } from '../../../../utils/tpl'; // import { handleActionCallback_10003, createObject } from '../../../../utils/helper'; // import SectionList from './components/headerSection/index' // import { getLodop } from '../../../../utils/print/LodopFuncs' // import { ModalPrint } from '../../LabelPrint/ModalPrint'; // import './style/baseCss/popover.css' // import { RendererEnv } from '../../../../env'; // const StyledMargin = styled.div` // .antd-Button{ // margin-right:5px; // } // ` // interface LionTableState { // fixLeft: number; // 左侧滚动条位置 // tableBody: any; // 表格体引用 // fixColumns: any[]; // 从表列配置 // selectList: any; // 被选中的数据行 // SonList: any; // 从表数据 // checkAll: boolean; // 选中所有数据 // loading: boolean; // 表格加载loading // pageData: any[]; // 主表分页数据 // totalSize: number; // pageSize: number; // page: number; // wrapper: number; // _container_height: any; // table_height: any; // _SonList: any; // storageSource: any; // pageSelectList: any; // colHideList: any; // hasFetch: boolean; // 标记是否请求过 // ModalProps: any; // modalLabelPrintOpen: boolean; // modalFilePrintOpen: boolean; // surfaceItemWidth: number; // } // interface ColumnObject { // label?: string; // name?: string; // group?: Array<any>; // hideLabel?: boolean; // hiddenOn?: string; // [propName: string]: any; // } // export interface LionTableSchema extends BaseSchema { // type: 'lion-table'; // /* // 组件类型 // */ // filter?: any; // /* // 查询器表单 // */ // headerToolbar: Array<any>; // /* // 头部按钮组(非选中才能点击,普通按钮) // */ // bulkActions: Array<any>; // /* // 头部按钮组(批量,有数据被选中才能点击) // */ // primaryField?: string; // /* // 主表行的主键字段 // */ // columns: Array<ColumnObject>; // /* // 子表列配置 // */ // api?: SchemaApi; // /* // 数据源请求地址及参数 // */ // list_columns: Array<ColumnObject> // /* // 主表列配置 // */ // source: string; // /* // 根据字段获取响应地内容中的表格数据,默认为items // */ // checkbox: boolean; // /* // 是否使用复选框 // */ // detailTableField?: string; // /* // 表示主表中的子表的标识符,用于提取主表中的子表数据 // */ // style?: any; // /* // 自定义表格的样式对象 // */ // subTableTitle?: string; // /* // 从表弹出框标题 // */ // width?: number; // /* // 设置表格宽度 // */ // totalTab?: { // key: number; // totalNum: string | number; // } // /* // 当前tab对应的标记 // */ // setTotalNum?: (key: string | number, totalNum: number, tableName: string) => void; // /* // 用于当表格使用tabs组件包裹时,表格初始化完成后,用于改变tabs上的标签的内容 // */ // onAction?: ( // e: React.UIEvent<any> | void, // action: Action, // ctx: object, // throwErrors: boolean, // delegate?: IScopedContext // ) => any; // /* // 按钮触发器 // */ // subSchemaApi?: SchemaApi; // /* // 查看全部子表内容的api // */ // isDialogMode?: boolean; // /* // 是否处于弹窗模式下 // */ // initFetch?: boolean; // /* // 初始是否拉取数据,默认为true // */ // keepItemSelectionOnPageChange?: boolean; // /* // 是否开启跨页选中 // */ // perPageAvailable?: number[]; // /* // 分页 // */ // } // interface LionTableContextSchema { // env?: RendererEnv; // handleAction?: Function; // primaryField?: string; // } // export const LionTableContext = React.createContext<LionTableContextSchema>({}) // export interface LionTableProps extends RendererProps, Omit<LionTableSchema, 'type' | 'className' | 'data'> { store: ILionTableStore; } // const calcGap = (rest: number = 0) => { // // window.document.documentElement.clientHeight - 20 - (document.querySelector('.ant-tabs-content')?.querySelector('.antd-Tabs-links') ? 32 : 0), // let rootDom: Element | null = document.querySelector('.ant-tabs-content'); // // let linkHeight: number = rootDom?.querySelector('.antd-Tabs-links')?.clientHeight ?? 0; // // let thisDom: Element | null | Text = findDOMNode(this); // let height: number = rootDom?.clientHeight! - 20; // return height - rest // } // const calcInnerWidth = () => { // let clientWidth: number = document.querySelector('.ant-tabs-content')?.clientWidth!; // // document.documentElement.clientWidth || document.body.clientWidth 直接获取耗时差距太大,暂不使用 // return clientWidth > 1680 ? clientWidth : 1680 // } // const antiShake = (callBack: Function, wait = 0, rest?: unknown) => { // let timer: any = null; // return () => { // if (timer) { // clearTimeout(timer); // timer = null; // } // timer = setTimeout(() => { // callBack(rest) // }, wait) // } // } // export class LionTable extends React.Component<LionTableProps, LionTableState>{ // static contextType = ScopedContext; // constructor(props: LionTableProps, context: IScopedContext) { // super(props); // this.state = { // fixLeft: 0, // 左侧滚动条位置 // tableBody: React.createRef() as any, // 表格体引用 // fixColumns: [], // 从表列配置 // selectList: {} as any, // 被选中的数据行 // pageSelectList: {} as any, // SonList: {} as any, // checkAll: false, // 选中所有数据 // loading: false, // 表格加载loading // pageData: [], // _SonList: [], // totalSize: 0, // pageSize: 10, // page: 1, // storageSource: {} as any, // colHideList: {} as any, // wrapper: calcInnerWidth(), // _container_height: calcGap(), // table_height: calcGap(40 + 46 + (props?.filter ? 50 : 0) + ((props?.headerToolbar?.length > 0 || props?.bulkActions?.length > 0) ? 40 : 10)), // hasFetch: false, // 标记是否请求过 // ModalProps: { // title: '打印选项', // show: false, // onHide: null // }, // modalLabelPrintOpen: false, // modalFilePrintOpen: false, // surfaceItemWidth: 0 // } // this.handleAction = this.handleAction.bind(this); // const scoped = context; // scoped.registerComponent(this); // } // static defaultProps: Partial<LionTableProps> = { // source: 'items', // ids: '_id', // store: LionTableStore as any // } // _uploadRef: any; // get dataSource() { // return this.state.pageData // } // _bindRef = (ref: any) => { // this._uploadRef = ref; // } // // 主表选中行 // get checkList() { // const { selectList, storageSource } = this.state; // let _checkList = Object.entries(selectList).filter((item: any) => { // return item[1] === true // }).map(item => { // return item[0] // }) // return _checkList.map((item: any) => { // return storageSource[item] // }) // } // get record_ids() { // const { primaryField } = this.props; // const { pageData } = this.state; // let _ids: string = ''; // pageData.forEach((record: any) => { // _ids += record.hasOwnProperty(primaryField) ? record[primaryField!] + ',' : '' // }) // return _ids.slice(0, _ids.length - 1) // } // get ids() { // let _ids: string = ''; // const { primaryField } = this.props; // this.checkList.map((_select: any) => { // _ids += _select.hasOwnProperty(primaryField) ? _select[primaryField!] + ',' : '' // }) // return _ids.slice(0, _ids.length - 1) // } // // 计算左侧固定表格的宽度 // get leftTableWidth() { // const { fixColumns } = this.state; // let count = 0; // fixColumns.forEach((item: any, index: number) => { // if (item?.fixed === 'left') { // count += item?.width // } // }) // return count // } // // 计算右侧固定表格的宽度 // get rightTableWidth() { // const { fixColumns } = this.state; // let count = 0; // fixColumns.forEach((item: any, index: number) => { // if (item?.fixed === 'right') { // count += item?.width // } // }); // return count // } // CounterChildWidth(fixColumns: any) { // let count = fixColumns.reduce((prev: any, current: any, index: number) => { // return prev + (current?.width ?? 0) // }, 0) // return count // } // get surfaceWidth() { // const { list_columns } = this.props; // let count = list_columns.reduce((prev, current, index) => { // return prev + (current?.width ?? 0) // }, 0) // return count // } // // 用于添加并合并多个className // classNames = (...names: any[]) => { // let currentNames: string[] = []; // names.forEach((name) => { // if (name) currentNames.push(name) // }); // return currentNames.join(' '); // } // // 用于生成唯一id以关联主从表 // uuid = () => { // const temp_url = URL.createObjectURL(new Blob()); // const uuid = temp_url.toString(); // URL.revokeObjectURL(temp_url); // return uuid.substr(uuid.lastIndexOf("/") + 1); // } // matchStr(str: string) { // let charS = ''; // for (let s of str) { // if (s === "$" || s === "}" || s === "{") { // charS += s.replace(s, '') // } else { // charS += s // } // } // return charS // } // requestFilterSource = (paramsField: any, isFilter: boolean = false): void => { // const { env, columns, data } = this.props; // let _data = { // ...paramsField, // ...data, // ...data?.__super // } // this.setState({ // loading: true // }) // try { // env.fetcher(this.props?.api!, _data).then((res: any) => { // if (!this.state.hasFetch) { // this.setState({ // hasFetch: true // }) // } // if (res?.status === 0) { // if (isFilter) { // this.setState({ // storageSource: {}, // selectList: {}, // pageSelectList: {} // }) // } // this.initScrollShadow(); // this.getFixedColumns(columns, res?.data ? res?.data : {}); // } else { // this.setState({ // loading: false // }) // throw new Error(res?.msg); // } // }).catch((e: Error) => { // env.notify('error', e.message) // }) // } catch (err) { // console.log('err', err) // message.error(err); // this.setState({ // loading: false // }) // } // } // initScrollShadow = (target?: any) => { // // 滚动主体 // const scrollBody: any = target ? target : findDOMNode(this); // const { fixColumns } = this.state; // let scrollClientWidth: number = this.state.wrapper > this.CounterChildWidth(fixColumns) ? this.state.wrapper : this.CounterChildWidth(fixColumns) // // 左侧固定表格 // const fixLeftTable: any = target ? target.parentElement.parentElement.querySelector('.lion-table-container-fixed-wrapper--left') : scrollBody.querySelector('.lion-table-container-fixed-wrapper--left'); // // 右侧固定表格 // const fixRightTable: any = target ? target.parentElement.parentElement.querySelector('.lion-table-container-fixed-wrapper--right') : scrollBody.querySelector('.lion-table-container-fixed-wrapper--right'); // // 滚动主体的向左滚动距离大于0且左侧固定表格不存在阴影class时,添加阴影效果 // if (scrollBody.scrollLeft > 0 && fixLeftTable?.className.indexOf('lion-talbe--fix--left--shadow') === -1) { // fixLeftTable.className = fixLeftTable.className + ' lion-talbe--fix--left--shadow' // } // // 滚动主体的向左滚动距离小于等于0,移除左侧表格的阴影class // if (scrollBody?.scrollLeft <= 0) { // fixLeftTable.className = fixLeftTable?.className.replace(' lion-talbe--fix--left--shadow', '') // } // if (target) { // // 滚动主体的clientWidth + scrollLeft 大于等于 滚动主体的滚动条长度,说明到最右边 // if (Math.floor(scrollBody.clientWidth + scrollBody.scrollLeft) >= scrollBody.scrollWidth) { // fixRightTable.className = fixRightTable.className.replace(' lion-talbe--fix--right--shadow', '') // } // // 滚动主体的clientWidth + scrollLeft 小于 滚动主体的滚动条长度 // if ((Math.floor(scrollBody.clientWidth + scrollBody.scrollLeft) < scrollBody.scrollWidth && fixRightTable.className.indexOf('lion-talbe--fix--right--shadow') === -1)) { // fixRightTable.className = fixRightTable.className + ' lion-talbe--fix--right--shadow' // } // return; // } // // 滚动主体的clientWidth + scrollLeft 大于等于 滚动主体的滚动条长度,说明到最右边 // if (scrollBody.scrollWidth >= scrollClientWidth) { // fixRightTable.className = fixRightTable.className.replace(' lion-talbe--fix--right--shadow', '') // } // // 滚动主体的clientWidth + scrollLeft 小于 滚动主体的滚动条长度 // if (scrollBody.scrollWidth < scrollClientWidth && fixRightTable.className.indexOf('lion-talbe--fix--right--shadow') === -1) { // fixRightTable.className = fixRightTable.className + ' lion-talbe--fix--right--shadow' // } // } // // 表头选择框选中 // onCheckAllChange = (e: any, isClear?: boolean) => { // e.preventDefault(); // const pageSelectList = this.state.pageSelectList; // const selectList = this.state.selectList; // const { checkAll } = this.state; // const _checkAll = isClear ? false : !checkAll // Object.keys(pageSelectList).forEach((item: any) => { // selectList[item] = _checkAll; // pageSelectList[item] = _checkAll; // }); // this.setState({ // selectList: selectList, // checkAll: _checkAll, // pageSelectList: pageSelectList // }); // } // handleSectionChange = (e: React.MouseEvent, current: string, isClear: boolean) => { // e.preventDefault() // if (isClear) { // this.onCheckAllChange(e, isClear) // } else { // this.handleMasterChange(e, current) // } // } // // 主表选择框被选中时 // handleMasterChange = (e: any, current: any) => { // e.preventDefault(); // // 点击时阻止默认事件 // const pageSelectList = this.state.pageSelectList; // const selectList = this.state.selectList; // let table_height = this.state.table_height; // let checkAll; // // 选中所有数据 // selectList[current] = !selectList[current]; // pageSelectList[current] = selectList[current]; // // 判断是否所有从表数据均被选中,若被选中则给表头选择框添加选中效果 // checkAll = Object.values(pageSelectList).every((item: any) => { // if (item === false) { // return false // } // return true // }); // this.setState({ // selectList: selectList, // checkAll: checkAll, // pageSelectList: pageSelectList // }, () => { // }); // } // CounteBtnLabelWidth = (buttons: any, pageData: any, num: number) => { // let count: number = 0; // let label: number = 0; // let marginLength: number = 0; // let btn_length: number = 0; // pageData.forEach((source: any) => { // let show_btns = buttons.filter((item: any) => { // return !evalExpression(item?.hiddenOn, { ...source }) // }).slice(0, num) // if (count < show_btns?.length) { // show_btns?.forEach((btn: any) => { // label += btn?.label?.length; // }) // } // count = (count >= show_btns?.length ? count : show_btns?.length); // }) // marginLength = (count + 1) * 5; // 35 // btn_length = (label * 13 + 26 * (count ? count : 1)); // 78 + 26 * 6 // return { count: count, labelLength: label, btn_width_lenth: (marginLength + btn_length + 25) } // } // getFixedColumns = (columns: any, data: any) => { // let dataSource: any = []; // let wrapper: number = this.state.wrapper; // const { source, checkbox, list_columns, detailTableField, isDialogMode, primaryField, keepItemSelectionOnPageChange } = this.props; // if (data.hasOwnProperty(source)) { // dataSource = data[source]; // } // if (isDialogMode) { // let thisParent = findDOMNode(this)?.parentElement; // wrapper = (thisParent?.clientWidth! > 500 ? thisParent?.clientWidth! : 500) // } // // 复制一层列配置,计算固定列的left // let copy_columns = JSON.parse(JSON.stringify(columns)); // let fixTag: any = {}; // 将要生成的列配置 // let tagIndex: any = {}; // let tag: number = 0; // let pageData: any = []; // let totalSize: number = 0; // let MainList: any[] = []; // 存储主表 // let SonList: any = {}; // 存储从表 // let temp_select: any = {}; // 存储选中行 // let _SonList: any = []; // let btn_length_max = 0; // let is_not_exist: any[] = []; // 不存在width属性的列的集合 // let surface_not_exist_column: any[] = []; // let storageSource: any = {}; // let pageSelectList: any = {}; // let colHideList: any = {}; // let checkAll: boolean = false; // let surfaceWidth: number = this.surfaceWidth; // let surface_btn: any = list_columns?.find((_column: any) => { // return _column?.buttons // }) // let child_btn: any = copy_columns?.find((_column: any) => { // return _column?.buttons // }) // // 计算存在width的列总长度以及统计不存在width的列 // columns.forEach((_column: any) => { // if (!_column?.width && _column?.name) { // is_not_exist.push({ // name: _column.name, // }) // } // }) // let empty_col: boolean = is_not_exist?.length === 0; // // 主表从表数据提取 // dataSource?.map((source: any, sourceIndex: number) => { // let _id = this.uuid(); // let mainList: any = {}; // Object.keys(source).map(sourceKey => { // if (sourceKey.toLowerCase() === detailTableField?.toLowerCase()) { // SonList[_id] = source[sourceKey] // _SonList = _SonList.concat(source[sourceKey]) // } else { // mainList[sourceKey] = source[sourceKey]; // } // }) // mainList.id = _id; // mainList.visible = false; // MainList.push(mainList) // }) // pageData = MainList; // let surface_btn_length = this.CounteBtnLabelWidth(surface_btn?.buttons ? surface_btn?.buttons : [], pageData, surface_btn?.num > surface_btn?.buttons?.length ? surface_btn?.buttons?.length : surface_btn?.num); // let child_btn_length = this.CounteBtnLabelWidth(child_btn?.buttons ? child_btn?.buttons : [], _SonList, child_btn?.num > child_btn?.buttons?.length ? child_btn?.buttons?.length : child_btn?.num); // if (surface_btn_length?.labelLength > child_btn_length?.labelLength) { // btn_length_max = surface_btn_length?.btn_width_lenth // } else if (surface_btn_length?.labelLength === child_btn_length?.labelLength) { // btn_length_max = surface_btn_length?.count >= child_btn_length?.count ? surface_btn_length?.btn_width_lenth : child_btn_length?.btn_width_lenth // } else { // btn_length_max = child_btn_length?.btn_width_lenth // } // /* // 初始化: // 1. 计算主表和子表中的列分组中要隐藏的列,标记主表和子表中的group,对比确认每个列的的高度 // 2. 计算主表/子表行中的buttons的个数最大值/btn_length_max,标记surfae(child).num,标记surfae(child).buttons.length // 3. 确认操作栏的宽度,其中宽度优先级如下 // 3.1 先计算出hiddenOn表达式未被隐藏的buttons,得出每行相比较的最大值btn_length_max // 3.2 再标记num,比较num与btn_length_max // 3.3 btn_length_max !=0时:num ? (btn_length_max <= num ? btn_length_max : num) : btn_length_max // 3.4 btn_length_max == 0时:height = 0 + 60 // */ // // 处理子表没有操作列的情况 // if ((!child_btn || child_btn?.buttons?.length <= 0) && (surface_btn?.buttons && surface_btn?.buttons?.length > 0)) { // copy_columns.push({ // name: "operation", // label: "操作", // fixed: "right", // buttons: [], // width: btn_length_max // }) // surfaceWidth += btn_length_max; // } else if ((child_btn && child_btn?.buttons?.length > 0)) { // copy_columns[copy_columns.length - 1].width = btn_length_max; // surfaceWidth += btn_length_max; // } // // checkbox属性存在添加选择框 // if (checkbox) { // surfaceWidth += 50; // copy_columns.unshift({ // name: "checkbox", // fixed: 'left', // width: 50, // leftWidth: 0, // align: 'center' // }); // } // /* // 1. 主表列和从表列总宽度均大于wrapper // 如果不存在列宽的列数量为0,则不需要再额外配置列宽 // 否则需要给不存在列宽的列添加默认列宽 // 主表列 > 从表列 : 需要在主表列总宽度的基础上为从表列计算列宽 // 主表列 < 从表列 : 维持不变即可 // 2. 主表列和从表列已知总宽均小于wrapper // 从表列以wrapper为基础 // */ // let childWidth = this.CounterChildWidth(copy_columns); // let equalVal: number = 0; // let summaryVal: number = 0; // if (childWidth > wrapper || surfaceWidth > wrapper) { // if (!empty_col) { // equalVal = 80; // } // if (empty_col && surfaceWidth > childWidth) { // equalVal = (surfaceWidth - childWidth) / (copy_columns?.length - 2) // } // } else { // let targetWidth = surfaceWidth > childWidth ? surfaceWidth : childWidth; // summaryVal = wrapper - targetWidth; // if (empty_col) { // equalVal = (wrapper - childWidth) / (copy_columns?.length - 2) // } else { // equalVal = (wrapper - childWidth) > is_not_exist?.length * 80 ? (wrapper - childWidth) / is_not_exist?.length : 80; // } // } // /* // 1. 主表列和从表列总宽度均大于wrapper // 主表列 > 从表列 : 需要在主表列总宽度的基础上为从表列计算列宽 // 主表列 < 从表列 : 维持不变即可 // 2. 主表列和从表列已知总宽均小于wrapper // 从表列以wrapper为基础 // */ // // 计算固定列的left // copy_columns.forEach((column: any, index: number) => { // if (empty_col && (column?.name !== "checkbox" && column?.type !== "operation")) { // column.width = (column.width ?? 0) + equalVal // } // if (!column?.width && !empty_col) { // column.width = equalVal // } // tagIndex[tag] = column; // if (index === 0) { // column.leftWidth = 0; // } // if (index >= 1) { // tagIndex[tag]['leftWidth'] = fixTag[tag - 1].leftWidth + fixTag[tag - 1]?.width; // } // tag++; // fixTag = { ...fixTag, ...tagIndex } // }); // if (checkbox) { // fixTag[0].label = <Checkbox />; // } // fixTag.length = tag; // fixTag = Array.from(fixTag); // // 计算固定列的right // copy_columns.reverse().forEach((column: any, index: number, arr: any[]) => { // if (index === 0) { // fixTag[arr.length - 1].rightWidth = 0; // } // if (index >= 1) { // fixTag[tag - (index + 1)]['rightWidth'] = fixTag[tag - index].rightWidth + fixTag[tag - index]?.width; // } // }) // if (data.hasOwnProperty('total')) { // totalSize = data?.total; // } // pageData.forEach((source: any) => { // if (keepItemSelectionOnPageChange && !this.state.storageSource.hasOwnProperty(source[(primaryField ? primaryField : 'id')])) { // storageSource[source[(primaryField ? primaryField : 'id')]] = source // } else if (!keepItemSelectionOnPageChange) { // storageSource[source[(primaryField ? primaryField : 'id')]] = source // } // if (!this.state.selectList.hasOwnProperty(source[(primaryField ? primaryField : 'id')])) { // temp_select[source[(primaryField ? primaryField : 'id')]] = false; // pageSelectList[source[(primaryField ? primaryField : 'id')]] = false; // } else { // pageSelectList[source[(primaryField ? primaryField : 'id')]] = this.state.selectList[source[(primaryField ? primaryField : 'id')]]; // } // colHideList[source[(primaryField ? primaryField : 'id')]] = false // }); // checkAll = Object.values(pageSelectList).every((item: any) => { // if (item === false) { // return false // } // return true // }); // list_columns.forEach((_column: any) => { // if (!_column?.width && !_column?.hasOwnProperty('buttons')) { // surface_not_exist_column.push({ // name: _column.name, // }) // } // // if (_column?.width) { // // summaryVal -= _column?.width // // } // }) // this.props?.setTotalNum && this.props?.setTotalNum(this.props.totalTab?.key!, data?.total, this.props.name) // console.time('lionTable') // this.setState({ // fixColumns: fixTag, // selectList: keepItemSelectionOnPageChange ? { ...this.state.selectList, ...temp_select } : pageSelectList, // pageData, // totalSize, // SonList, // loading: false, // checkAll: checkAll, // _SonList: _SonList, // wrapper: wrapper, // storageSource: keepItemSelectionOnPageChange ? { ...this.state.storageSource, ...storageSource } : storageSource, // pageSelectList: pageSelectList, // colHideList: colHideList, // surfaceItemWidth: summaryVal / surface_not_exist_column?.length // }); // console.timeEnd('lionTable') // } // // 表格滚动条拖动时给固定的列添加或删除阴影效果 // handleScroll = (target: any, e: any) => { // const { scrollLeft, scrollTop } = target; // this.initScrollShadow(target) // const fixBodyers: any = target.parentElement.parentElement.getElementsByClassName('lion-table-container-fixed-body'); // const tableHeaders: any = target.parentElement.parentElement.getElementsByClassName('lion-table-header'); // for (let i = 0; i < fixBodyers.length; i++) { // fixBodyers[i].scrollTop = scrollTop // } // if (tableHeaders.length > 0) { // tableHeaders[0].scrollLeft = scrollLeft; // } // }; // showTotal = () => { // const { page, pageSize, totalSize } = this.state; // const _page = totalSize === 0 ? 0 : page; // const total = totalSize; // const currentTotal = total === 0 ? 0 : Math.ceil(total / pageSize); // return `${_page}/${currentTotal} 总共:${totalSize} 项`; // } // // 点击展开或收起操作 // handleOpenCol = (source: any, SonList: any) => { // const { primaryField } = this.props; // const { colHideList } = this.state; // // const index = pageData.findIndex(item => { // // return item === source // // }) // // let open_source = pageData.find(item => { // // return item === source // // }) // // open_source.visible = !open_source.visible; // // pageData.splice(index, 1, open_source as never); // this.setState({ // colHideList: { // ...colHideList, // [source[primaryField!]]: !colHideList[source[primaryField!]] // }, // }) // } // // 查看全部 // handleViewAll = (surface: any) => { // const { subSchemaApi, env, store } = this.props; // env?.fetcher(subSchemaApi!, surface).then((res: any) => { // }) // } // handleAddClass = (arr: any, tabIndex: number) => { // Array.from(arr).forEach((_node: any) => { // if (_node?.attributes.tabindex.nodeValue === tabIndex) { // _node.className += ' tr--hover' // } // }) // } // handleTrMouseOver = (e: any) => { // if (e.currentTarget.className.indexOf('tr--hover') !== -1) { // return; // } // const _body: any = findDOMNode(this) // const bodyTable: any = _body.querySelector('.lion-table-body'); // // 左侧固定表格 // const fixLeftTable: any = _body.querySelector('.lion-table-container-fixed-wrapper--left'); // // 右侧固定表格 // const fixRightTable: any = _body.querySelector('.lion-table-container-fixed-wrapper--right'); // const bodyTr = bodyTable.getElementsByClassName('tbody-tr--column--white'); // const fixLeftTr = fixLeftTable.getElementsByClassName('tbody-tr--column--white'); // const fixRightTr = fixRightTable.getElementsByClassName('tbody-tr--column--white'); // this.handleAddClass(bodyTr, e.currentTarget.attributes.tabindex.nodeValue) // this.handleAddClass(fixLeftTr, e.currentTarget.attributes.tabindex.nodeValue) // this.handleAddClass(fixRightTr, e.currentTarget.attributes.tabindex.nodeValue) // } // handleTrMouseOut = (e: any) => { // const _body: any = findDOMNode(this); // const bodyTable: any = _body?.querySelector('.lion-table-body') as any; // // 左侧固定表格 // const fixLeftTable: any = _body?.querySelector('.lion-table-container-fixed-wrapper--left'); // // 右侧固定表格 // const fixRightTable: any = _body?.querySelector('.lion-table-container-fixed-wrapper--right'); // const bodyTr = bodyTable.getElementsByClassName('tbody-tr--column--white'); // const fixLeftTr = fixLeftTable.getElementsByClassName('tbody-tr--column--white'); // const fixRightTr = fixRightTable.getElementsByClassName('tbody-tr--column--white'); // this.handleRemoveClass(bodyTr) // this.handleRemoveClass(fixLeftTr) // this.handleRemoveClass(fixRightTr) // } // handleRemoveClass = (arr: any) => { // Array.from(arr).forEach((_node: any) => { // _node.className = _node.className.replace('tr--hover', '') // }) // } // handlePageSizeChange = (page: number, pageSize: number) => { // if (this._uploadRef) { // this._uploadRef?.handleBulkChange({ perPage: pageSize, page: page }); // } // this.setState({ // page, // pageSize, // checkAll: false, // pageSelectList: {} // }, () => { // this.requestFilterSource(this._uploadRef ? this._uploadRef?.props?.data : { perPage: pageSize, page: page }); // }) // } // MonitorPageChanges = (e: any) => { // // let clientWidth = window.document.documentElement.clientWidth || window.document.body.clientWidth; // const { isDialogMode, columns, checkbox } = this.props; // let wrapper = calcInnerWidth(); // if (isDialogMode) { // let thisParent = findDOMNode(this)?.parentElement; // wrapper = (thisParent?.clientWidth! > 500 ? thisParent?.clientWidth! : 500) // } // const _columns: any = this.state.fixColumns; // const _wrapper: number = Math.ceil(wrapper); // let tagIndex: any = {}; // let tag: number = 0; // let fixTag: any = {}; // let childWidth = this.CounterChildWidth(_columns); // let surfaceWidth = this.surfaceWidth + (checkbox ? 50 : 0) + (_columns[_columns?.length - 1]?.type === "operation" ? _columns[_columns?.length - 1]?.width : 0) // let equalVal: number = 0; // if (childWidth <= wrapper && surfaceWidth <= wrapper) { // let targetWidth = surfaceWidth > childWidth ? surfaceWidth : childWidth; // equalVal = (_wrapper - targetWidth) / (_columns?.length - 2) // } // if (_wrapper > 1680) { // _columns.forEach((_column: any, index: number, _columnsArr: any[]) => { // tagIndex[tag] = _column; // if (index === 0) { // _column.leftWidth = 0; // } // if (index >= 1) { // tagIndex[tag]['leftWidth'] = fixTag[tag - 1].leftWidth + fixTag[tag - 1]?.width; // } // if (index >= 1 && _column?.name !== "checkbox" && _column?.type !== "operation") { // tagIndex[tag]['width'] = tagIndex[tag]['width'] + equalVal; // } // tag++; // fixTag = { ...fixTag, ...tagIndex } // }) // fixTag.length = tag; // fixTag = Array.from(fixTag) // // 计算固定列的right // _columns.reverse().forEach((column: any, index: number, arr: any[]) => { // if (index === 0) { // fixTag[arr.length - 1].rightWidth = 0; // } // if (index >= 1) { // fixTag[tag - (index + 1)]['rightWidth'] = fixTag[tag - index].rightWidth + fixTag[tag - index]?.width; // } // }) // this.setState({ // wrapper: _wrapper, // fixColumns: fixTag // }, () => { // this.initScrollShadow() // }) // } // } // MonitorTableChanges = (e?: any) => { // let isTab = this.props.totalTab; // let _dis = 10; // if (this.props.filter) _dis += 50 // if ((this.props.headerToolbar?.length > 0 || this.props?.bulkActions?.length > 0)) _dis += 30 // if (isTab) _dis += 32; // if (this.props.keepItemSelectionOnPageChange) _dis += 35 // let _page_height: any = calcGap(); // let table_height = _page_height - 10 - 46 - 40 - _dis; // // if (table_height === this.state.table_height) { // // return // // } // this.setState({ // _container_height: _page_height, // table_height: table_height // }) // } // handleFilterParams = (value: any) => { // const { page, pageSize } = this.state; // this._uploadRef?.handleBulkChange({ perPage: pageSize, page: page }); // const filterParams = this._uploadRef ? this._uploadRef?.props?.data : { perPage: pageSize, page: page }; // this.requestFilterSource({ ...value, ...filterParams }, true) // } // reloadTarget = (reload: string, ctx: any, callBack?: () => void) => { // const scoped = this.context as IScopedContext; // // callBack && callBack(); // scoped.reload(reload, ctx); // // 用于刷新目标组件 // } // closeTarget(target: string) { // const scoped = this.context as IScopedContext; // scoped.close(target); // } // reload = (subPath: string, query: any, ctx: any): void => { // this.handleFilterParams(ctx) // } // receive = (value: any, subPath: any): void => { // this.handleFilterParams(value) // } // doAction = (query: any, ctx: any): void => { // this.handleFilterParams(ctx) // } // handleAction = async ( // e: React.UIEvent<any> | void, // action: Action, // ctx: any, // callBack?: () => void, // throwErrors: boolean = false, // delegate?: IScopedContext // ): Promise<any> => { // const { env, store, messages, onAction } = this.props; // if (action.actionType === 'ajax') { // store.setCurrentAction(action); // const res = await store // .lionSaveRemote(action.api as string, { ...store.data, ...ctx }, { // successMessage: // (action.messages && action.messages.success) || // (messages && messages.saveSuccess), // errorMessage: // (action.messages && action.messages.failed) || // (messages && messages.saveSuccess) // }).then(response => { // const data = createObject(ctx, response ? response : null); // // if ((data as any)?.status === 10003) { // // // onAction?.(e, action, { ...store.data, ...ctx }, throwErrors, delegate || this.context); // // handleActionCallback_10003(data, store, this.handleAction, () => { action.close && this.closeTarget(action.close) }, false, env) // // return false // // } // const redirect = // action.redirect && filter(action.redirect, store.data); // redirect && env.jumpTo(redirect, action); // action.reload && this.reloadTarget(action.reload, { ...store.data, ...ctx }); // return false // }).catch((error) => { console.info(error) }) // return res // } else if (action.actionType === 'export') { // store.setCurrentAction(action); // let exportData: any = action?.exportType === 2 ? ctx : {}; // exportData = { ...exportData, ...this?._uploadRef?.props?.store?.data }; // exportData.primaryField = this.props.primaryField; // exportData.selectedItems = this.checkList; // exportData.ids = (action?.exportType && action?.exportType === 2 ? ctx[this.props.primaryField!] : this.ids); // store.openLionExport(exportData, env) // return false // } else if (action.actionType === 'loginAmazon') { // store.setCurrentAction(action); // store.openAmazonLoginPage(ctx, env) // return false // } else if (action.actionType === 'label-print') { // // Jay // store.setCurrentAction(action); // const { primaryField } = this.props // const { translate: __ } = this.props // const LODOP = getLodop() // if (LODOP) { // this.setState({ // ModalProps: { // ...action, // title: __('CRUD.printOptions'), // show: true, // isFilePrint: false, // isRow: true, // ctx: { ...ctx, primaryField }, // onHide: () => { this.setState({ modalLabelPrintOpen: false }) }, // } // }) // this.setState({ modalLabelPrintOpen: true }) // } // } // else { // onAction?.(e, action, { ...store.data, ...ctx }, throwErrors, delegate || this.context); // return false // } // } // // 没有数据时加载占位器 // renderEmptyData = () => { // const { width, translate: __, filter } = this.props; // const { hasFetch } = this.state // return <div // className="lion-table-empty" // style={{ // width: width ? width : '100%', // }} // > // <div> // <div className="lion-table-empty-body"> // <div className="lion-table-empty-container"> // <div> // {/* 测试用图片 */} // {/* <img alt='' src='https://erp.gerpgo.com/img/empty.891aa2e8.png' /> */} // <img alt='' src='./public/images/nodata.png' /> // {!hasFetch && filter ? // <div className='empty-placeholder'>{__('placeholder.trySearch')}</div> : // <div className='empty-placeholder'>{__('placeholder.noData')}</div>} // </div> // </div> // </div> // </div> // </div> // } // /** // * Jay // * 标签、文件打印 // */ // renderPrint(ctx: { items: any[], selectedItems: any[], ids: string, primaryField: string, }, schema?: any, isFilePrint?: boolean) { // const { // translate: __, // classnames: nx // } = this.props; // const { selectedItems } = ctx // const disabled = schema.disabled || evalExpression(schema.disabledOn, ctx) // return ( // <> // <Button // type="primary" // className={nx(schema._className, { 'is-disabled': disabled })} // disabled={disabled} // onClick={() => { // const LODOP = getLodop() // if (LODOP) { // this.setState({ // ModalProps: { // ...schema, // title: __('CRUD.printOptions'), // show: true, // isFilePrint, // ctx, // onHide: () => { isFilePrint ? this.setState({ modalFilePrintOpen: false }) : this.setState({ modalLabelPrintOpen: false }) }, // query: this._uploadRef?.props?.store?.data // } // }) // isFilePrint ? this.setState({ modalFilePrintOpen: true }) : // this.setState({ modalLabelPrintOpen: true }) // } // }} // > // {__(schema.label ? schema.label : !isFilePrint ? 'CRUD.labelPrint' : 'CRUD.filePrint')} // </Button> // </> // ); // } // // 渲染头部按钮及批量按钮 // renderToolBars = (toolBars: any, type: string) => { // const _className = type === 'header' ? 'blukAction' : (this.checkList?.length > 0 ? "blukAction" : "blukAction is-disabled"); // const _disabled = type === 'header' ? false : (this.checkList?.length > 0 ? false : true); // const toolBarList: any = []; // toolBars && toolBars?.length > 0 && toolBars?.forEach((_toolBar: any, _toolIndex: number) => { // let _data: any = {}; // _data.selectedItems = this.checkList; // _data.ids = this.ids; // _data.items = this.dataSource; // _data.record_ids = this.record_ids; // if (_toolBar.type === 'label-print') { // toolBarList.push(this.renderPrint(_data, { ..._toolBar, _className })); // } else if (_toolBar.type === 'file-print') { // toolBarList.push(this.renderPrint(_data, { ..._toolBar, _className }, true)); // } else { // toolBarList.push(renderAmis(_toolBar, { // className: _className, // key: _toolIndex, // disabled: _disabled, // data: _data, // onAction: this.handleAction // })) // } // }) // return toolBarList?.length === 0 ? null : toolBarList // } // // 表格头部工具栏渲染 // renderHeaderToolbars = (): JSX.Element => { // const { headerToolbar, bulkActions } = this.props; // return <WrapperLionTableHeaderToolBar className="lion-table-header-toolbar"> // <div className="lion-nav-operate-group"> // {this.renderToolBars(headerToolbar, 'header')} // {this.renderToolBars(bulkActions, 'bulk')} // </div> // <div className="lion-nav-tool-group"> // </div> // </WrapperLionTableHeaderToolBar> // } // // 表格查询器加载 // renderFilter = (): JSX.Element | null => { // const { filter } = this.props; // const that = this; // return filter ? <WrapperLionTableFilter className="lion-table-filter"> // <div className="filter-group"> // <div className="filter-container"> // <div className="filterItem"> // { // filter ? renderAmis(filter, { // "_bindRef": (_this: any) => { // that._bindRef(_this) // }, // className: 'lion-filter', // }) : null // } // </div> // </div> // </div> // </WrapperLionTableFilter> : null // } // // 展开与收起行渲染 // renderVisibleTr = (source: any, fixed?: string) => { // const { fixColumns, SonList, colHideList } = this.state; // const { render, subTableTitle, subSchemaApi, primaryField } = this.props; // const fixedLeftClass = fixed ? (fixed === 'left' ? ("lion-cell--fix--" + fixed) : 'fix--hidden') : ''; // const fixedRighttClass = fixed ? (fixed === 'right' ? ("lion-cell--fix--" + fixed) : 'fix--hidden') : ''; // return subSchemaApi || (SonList.hasOwnProperty(source.id) && SonList[source.id].length > 4) ? // <tr className='tbody-tr--column--common lion-tr--column--hide'> // <td // className={this.classNames('tbody-td--column', 'tbody-td--column--hide', 'tbody-td--column--hide--checkbox', fixedLeftClass)} // > // </td> // <td // style={{ padding: '0px !important' }} // className={'tbody-td--column--hide'} // colSpan={(Object.keys(fixColumns).length - 2)} // > // { // fixed ? null : <div className="td--column--hide--cell"> // <div className="td--column--hide--cell--container"> // <div> // <span // className="hide--cell--operation" // onClick={(e) => { // subSchemaApi ? null : this.handleOpenCol(source, SonList[source.id]) // // this.handleViewAll(source) // }}> // { // subSchemaApi ? render('点击查看全部数据', { // "actionType": "dialog", // "type": "action", // "level": "primary", // "name": "click_cat_all_data", // "className": "hide--cell--operation hide--cell--action", // "label": "点击查看全部数据", // "close": false, // "dialog": { // "title": subTableTitle, // "type": "dialog", // "body": { // "schemaApi": subSchemaApi, // "data": source, // "type": "service" // }, // "size": "lg", // "bodyClassName": "overflow-y-auto max-h-nestSide-dialog", // "className": "h-full", // "actions": [] // } // }) : (SonList[source.id].length > 4 ? (!colHideList[source[primaryField!]] ? '共计' + SonList[source.id].length + '条数据,展开查看全部>>' : '点击收起') : null) // } // {/* {SonList[source.id].length > 2 && !source.visible ? '共计' + SonList[source.id].length + '条数据,展开查看全部>>' : '点击收起'} */} // </span> // </div> // </div> // </div> // } // </td> // <td // className={this.classNames('tbody-td--column', 'thead-th--column', fixedRighttClass)} // style={{ // backgroundColor: 'inherit' // }} // > // </td> // </tr> : null // } // renderSurfaceTr = (source: any) => { // const { fixColumns, surfaceItemWidth } = this.state; // const { list_columns, checkbox, primaryField } = this.props; // const _btn_cols = list_columns.find((_column: any) => { // return _column?.buttons // }) // return <tr onClick={(e) => { this.handleMasterChange(e, source[primaryField!]) }} className='tbody-tr--column--common tbody-tr--column--gray'> // {/* 主表行单选框渲染逻辑 */} // { // checkbox ? <td className='tbody-td--column tbody-td--column--surface--checkbox' // > // </td> : null // } // {/* 主表行渲染 */} // <td // className='tbody-td--column thead-th--column tbody-td--column--surface--mainarea' // style={{ // [checkbox ? '' : 'left']: 0 // }} // // colSpan={Object.keys(fixColumns).length} // colSpan={(_btn_cols && _btn_cols?.buttons?.length > 0) ? (Object.keys(fixColumns).length - 2) : Object.keys(fixColumns).length} // > // <div style={{ display: 'flex' }}> // {/* 主表列分组渲染 */} // { // list_columns.map((_surface: any, _surfaceIndex: number) => { // if (_surface?.buttons) return null // return <WrapperCommonSurfaceGroup // key={_surfaceIndex} // style={{ // // width: _surface?.buttons ? (_surface?.width > btn_width ? _surface?.width : btn_width) : (_surface?.width ? _surface?.width : '200px'), // width: _surface?.width ? _surface?.width : surfaceItemWidth, // paddingLeft: _surfaceIndex === 0 ? '5px' : '', // marginRight: _surface?.buttons ? 0 : '15px' // }}> // <div className="surface-group-container" style={{ // flexDirection: _surface?.group && _surface?.group?.length > 1 ? 'column' : 'row', // justifyContent: _surface?.group && _surface?.group?.length > 1 ? 'center' : 'normal', // alignItems: _surface?.group && _surface?.group?.length > 1 ? 'normal' : 'center' // }}> // { // _surface?.group && _surface?.group?.length > 0 ? _surface?.group.map((_group: any, _groupIndex: number) => { // let temp_element; // let hide = _group?.hiddenOn ? evalExpression(_group?.hiddenOn, { ...source }) : false; // if (hide) { // return null // } // if (_group?.type) { // temp_element = renderAmis({ // type: _group?.type, // name: _group?.name, // body: _group?.body // }, { // data: source // }) // } // return <span // key={_groupIndex} // className="surface-group-item" // > // { // _group?.hideLabel ? ( // _group.type ? temp_element : source[_group?.name] // ) : <><span //