| | |
| | | import md5 from 'md5' |
| | | import { connect } from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Table, Affix, Typography, Icon } from 'antd' |
| | | import { Table, Affix, Typography } from 'antd' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import MkIcon from '@/components/mk-icon' |
| | | import '@/assets/css/table.scss' |
| | | import './index.scss' |
| | | |
| | |
| | | |
| | | class BodyRow extends React.Component { |
| | | shouldComponentUpdate (nextProps) { |
| | | return this.props.className !== nextProps.className |
| | | return !is(fromJS(this.props.record), fromJS(nextProps.record)) || this.props.className !== nextProps.className |
| | | } |
| | | |
| | | render() { |
| | | return <tr {...this.props}/> |
| | | const { record, ...resProps } = this.props |
| | | return <tr {...resProps}/> |
| | | } |
| | | } |
| | | |
| | |
| | | total: PropTypes.any, // 总数 |
| | | loading: PropTypes.bool, // 表格加载中 |
| | | refreshdata: PropTypes.func, // 表格中排序列、页码的变化时刷新 |
| | | handleTableId: PropTypes.func, // 数据切换 |
| | | chgSelectData: PropTypes.func, // 数据切换 |
| | | } |
| | | |
| | |
| | | columns: null, // 显示列 |
| | | lineMarks: null, // 行标记 |
| | | activeIndex: null, // 标记当前选中行 |
| | | rowspans: null // 行合并字段信息 |
| | | rowspans: null, // 行合并字段信息 |
| | | pageOptions: [] |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | |
| | | } |
| | | } |
| | | |
| | | columns.forEach((item, index) => { |
| | | if (item.hidden === true || item.Hide === 'true') return |
| | | columns.forEach(item => { |
| | | if (item.hidden === true || item.Hide === 'true') { |
| | | if (item.marks) { // 提取行标记 |
| | | item.marks.forEach(mark => { |
| | | if (mark.signType !== 'line') return |
| | | |
| | | lineMarks.push(mark) |
| | | }) |
| | | } |
| | | return |
| | | } |
| | | let cell = null |
| | | |
| | | if (item.type === 'colspan') { |
| | |
| | | } |
| | | } |
| | | |
| | | _columns.push(cell) |
| | | if (item.type === 'action' && item.position === 'left') { |
| | | _columns.unshift(cell) |
| | | } else { |
| | | _columns.push(cell) |
| | | } |
| | | }) |
| | | |
| | | if (rowspans.length === 0) { |
| | | rowspans = null |
| | | } |
| | | } |
| | | |
| | | |
| | | let size = (setting.pageSize || 10) + '' |
| | | let pageOptions = ['10', '25', '50', '100', '500', '1000'] |
| | | |
| | | if (!pageOptions.includes(size)) { |
| | | pageOptions.push(size) |
| | | pageOptions = pageOptions.sort((a, b) => a - b) |
| | | } |
| | | |
| | | this.setState({ |
| | | pageOptions, |
| | | columns: _columns, |
| | | pageSize: pageSize ? pageSize : 10, |
| | | lineMarks, |
| | |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('resetTable', this.resetTable) |
| | | MKEmitter.addListener('autoQueryData', this.autoQueryData) |
| | | MKEmitter.addListener('autoSelectData', this.autoSelectData) |
| | | MKEmitter.addListener('mkTableCheckTopLine', this.mkTableCheckTopLine) |
| | | } |
| | | |
| | | /** |
| | |
| | | return |
| | | } |
| | | MKEmitter.removeListener('resetTable', this.resetTable) |
| | | MKEmitter.removeListener('autoQueryData', this.autoQueryData) |
| | | MKEmitter.removeListener('autoSelectData', this.autoSelectData) |
| | | MKEmitter.removeListener('mkTableCheckTopLine', this.mkTableCheckTopLine) |
| | | } |
| | | |
| | | mkTableCheckTopLine = (menuid, id) => { |
| | | const {MenuID, data} = this.props |
| | | |
| | | if (menuid !== MenuID || data.length === 0) return |
| | | |
| | | let index = 0 |
| | | if (id) { |
| | | index = data.findIndex(item => item.$$uuid === id) |
| | | if (index === -1) { |
| | | index = 0 |
| | | } |
| | | } |
| | | |
| | | this.changeRow(data[index], index) |
| | | } |
| | | |
| | | autoSelectData = (id, index) => { |
| | | if (id !== this.props.MenuID) return |
| | | |
| | | const { pageSize, pageIndex } = this.state |
| | | |
| | | let i = index - (pageIndex - 1) * pageSize - 1 |
| | | |
| | | if (this.props.data[i]) { |
| | | this.changeRow(this.props.data[i], i) |
| | | MKEmitter.emit('autoTransSelectData', this.props.MenuID, this.props.data[i]) |
| | | } else { |
| | | MKEmitter.emit('autoMaticOver', this.props.MenuID) |
| | | } |
| | | } |
| | | |
| | | autoQueryData = (id, index) => { |
| | | if (id !== this.props.MenuID) return |
| | | |
| | | const { total } = this.props |
| | | const { pageSize } = this.state |
| | | |
| | | if (index !== 1 && (!total || index > total)) { |
| | | MKEmitter.emit('autoMaticOver', this.props.MenuID) |
| | | return |
| | | } |
| | | |
| | | console.clear() |
| | | |
| | | let pageIndex = Math.ceil(index / pageSize) |
| | | |
| | | this.setState({ |
| | | pageIndex: pageIndex, |
| | | selectedRowKeys: [], |
| | | activeIndex: null |
| | | }) |
| | | |
| | | this.props.refreshdata({pageIndex}) |
| | | } |
| | | |
| | | // 字段透视 |
| | |
| | | if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) { |
| | | MKEmitter.emit('modifyTabs', tabmenu, 'replace') |
| | | } else { |
| | | MKEmitter.emit('modifyTabs', tabmenu, 'plus') |
| | | MKEmitter.emit('modifyTabs', tabmenu, 'plus', true) |
| | | } |
| | | } else if (item.linkurl) { |
| | | let src = item.linkurl |
| | |
| | | if (mark.position === 'front') { |
| | | position = 'front' |
| | | } |
| | | icon = <Icon className={'font ' + className} type={mark.icon} /> |
| | | icon = <MkIcon className={'font ' + className} type={mark.icon} /> |
| | | className = '' |
| | | } |
| | | |
| | |
| | | content = md5(content) |
| | | } |
| | | |
| | | if (item.linkThdMenu || item.linkurl) { |
| | | if (!record.$disabled && (item.linkThdMenu || item.linkurl)) { |
| | | if (item.rowspan === 'true') { |
| | | return { |
| | | children: ( |
| | |
| | | content = md5(content) |
| | | } |
| | | |
| | | if (item.linkThdMenu || item.linkurl) { |
| | | if (!record.$disabled && (item.linkThdMenu || item.linkurl)) { |
| | | if (item.rowspan === 'true') { |
| | | return { |
| | | children: ( |
| | |
| | | _href += '?' + _param |
| | | } |
| | | |
| | | if (_href && /^https/.test(window.location.protocol)) { // https转换 |
| | | _href = _href.replace(/^http:/ig, 'https:') |
| | | } |
| | | |
| | | if (item.blur) { |
| | | content = md5(content) |
| | | } |
| | |
| | | key={btn.uuid} |
| | | btn={btn} |
| | | BID={record.$$BID} |
| | | disabled={record.$disabled} |
| | | lineId={record.$$key || ''} |
| | | selectedData={[record]} |
| | | BData={this.props.BData} |
| | | setting={this.props.setting} |
| | |
| | | key={btn.uuid} |
| | | btn={btn} |
| | | BID={record.$$BID} |
| | | disabled={record.$disabled} |
| | | lineId={record.$$key || ''} |
| | | selectedData={[record]} |
| | | BData={this.props.BData} |
| | | setting={this.props.setting} |
| | |
| | | <TabButton |
| | | key={btn.uuid} |
| | | btn={btn} |
| | | disabled={record.$disabled} |
| | | lineId={record.$$key || ''} |
| | | selectedData={[record]} |
| | | BData={this.props.BData} |
| | | MenuID={this.props.MenuID} |
| | | setting={this.props.setting} |
| | | /> |
| | |
| | | <NewPageButton |
| | | key={btn.uuid} |
| | | btn={btn} |
| | | disabled={record.$disabled} |
| | | lineId={record.$$key || ''} |
| | | selectedData={[record]} |
| | | BData={this.props.BData} |
| | | setting={this.props.setting} |
| | | /> |
| | | ) |
| | |
| | | } |
| | | |
| | | _href += '?' + _param |
| | | } |
| | | |
| | | if (_href && /^https/.test(window.location.protocol)) { // https转换 |
| | | _href = _href.replace(/^http:/ig, 'https:') |
| | | } |
| | | |
| | | if (item.blur) { |
| | |
| | | |
| | | this.setState({ selectedRowKeys, activeIndex: _activeIndex }) |
| | | |
| | | let selects = this.props.data.filter((item, _index) => selectedRowKeys.includes(_index)) |
| | | let selects = this.props.data.filter((item, _index) => selectedRowKeys.includes(_index) && !item.$disabled) |
| | | |
| | | this.props.chgSelectData(selects) |
| | | } |
| | |
| | | */ |
| | | changeRow = (record, index) => { |
| | | if (!this.props.setting.tableType || this.props.pickup) return |
| | | if (record.$disabled) return |
| | | |
| | | let newkeys = fromJS(this.state.selectedRowKeys).toJS() |
| | | |
| | |
| | | } |
| | | |
| | | changedata = (index) => { |
| | | const { data, setting } = this.props |
| | | const { data, setting, tableId, ContainerId } = this.props |
| | | |
| | | if (!tableId || !ContainerId) return |
| | | |
| | | let _id = '' |
| | | let _data = '' |
| | |
| | | _data = data[index] || '' |
| | | } |
| | | |
| | | this.props.handleTableId(this.props.tableId, _id, _data) |
| | | MKEmitter.emit('changeTableLine', ContainerId, tableId, _id, _data) |
| | | } |
| | | |
| | | resetTable = (id, repage) => { |
| | | const { MenuID, tableId } = this.props |
| | | const { tableId } = this.props |
| | | |
| | | if (id !== (MenuID + tableId)) return |
| | | if (id !== tableId) return |
| | | |
| | | if (repage === 'false') { |
| | | this.setState({ |
| | |
| | | const { setting } = this.props |
| | | |
| | | if (!setting.doubleClick) return |
| | | if (record.$disabled) return |
| | | |
| | | MKEmitter.emit('triggerBtnId', setting.doubleClick, [record]) |
| | | } |
| | | |
| | | render() { |
| | | const { setting, pickup, statFValue } = this.props |
| | | const { selectedRowKeys, lineMarks, activeIndex } = this.state |
| | | const { selectedRowKeys, lineMarks, activeIndex, pageOptions } = this.state |
| | | |
| | | let components = { |
| | | body: {} |
| | |
| | | _pagination = { |
| | | current: this.state.pageIndex, |
| | | pageSize: this.state.pageSize, |
| | | pageSizeOptions: ['10', '25', '50', '100', '500', '1000'], |
| | | pageSizeOptions: pageOptions, |
| | | showSizeChanger: true, |
| | | total: this.props.total || 0, |
| | | showTotal: (total, range) => `${range[0]}-${range[1]} ${this.props.dict['main.pagination.of']} ${total} ${this.props.dict['main.pagination.items']}` |
| | |
| | | } |
| | | if (setting.fontSize) { |
| | | style.fontSize = setting.fontSize |
| | | } |
| | | |
| | | let loading = this.props.loading |
| | | if (setting.mask === 'hidden') { |
| | | loading = false |
| | | } |
| | | |
| | | return ( |
| | |
| | | dataSource={_data} |
| | | rowClassName={(record) => { |
| | | let className = '' |
| | | if ((setting.tableType === 'checkbox' || setting.tableType === 'radio') && record.key === activeIndex) { |
| | | if (record.$disabled) { |
| | | className = 'mk-disabled ' |
| | | } else if ((setting.tableType === 'checkbox' || setting.tableType === 'radio') && record.key === activeIndex) { |
| | | className = 'mk-row-active ' |
| | | } |
| | | |
| | |
| | | |
| | | return className |
| | | }} |
| | | loading={this.props.loading} |
| | | loading={loading} |
| | | scroll={{ x: '100%', y: height }} |
| | | onRow={(record, index) => { |
| | | return { |
| | | onClick: () => {this.changeRow(record, index)}, |
| | | onDoubleClick: () => {this.doubleClickLine(record)} |
| | | if (setting.tableMode === 'fast') { |
| | | return { |
| | | record, |
| | | onClick: () => {this.changeRow(record, index)}, |
| | | onDoubleClick: () => {this.doubleClickLine(record)} |
| | | } |
| | | } else { |
| | | return { |
| | | onClick: () => {this.changeRow(record, index)}, |
| | | onDoubleClick: () => {this.doubleClickLine(record)} |
| | | } |
| | | } |
| | | }} |
| | | onChange={this.changeTable} |