| | |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | tableId: '', // 表格ID |
| | | selectedRowKeys: [], // 表格中选中行 |
| | | pageIndex: 1, // 初始页面索引 |
| | | pageSize: 10, // 每页数据条数 |
| | | columns: null, // 显示列 |
| | | activeIndex: null, // 标记当前选中行 |
| | | rowspans: null, // 行合并字段信息 |
| | | pickup: false |
| | | pickup: false, // 收起未选择项 |
| | | orderfields: {} // 排序id与field转换 |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { menuType, memberLevel, setting, fields } = this.props |
| | | let columns = fromJS(this.props.columns).toJS() |
| | | let _columns = [] |
| | | const { menuType, memberLevel, setting, fields, columns } = this.props |
| | | let radio = 5 // 虚化比例 |
| | | let _format = false // 是否虚化处理 |
| | | let rowspans = [] |
| | | let orderfields = {} |
| | | |
| | | if (window.GLOB.dataFormat && menuType !== 'HS' && memberLevel) { |
| | | _format = true |
| | |
| | | } |
| | | } |
| | | |
| | | columns.forEach(item => { |
| | | if (item.hidden === true || item.Hide === 'true') return |
| | | let cell = null |
| | | |
| | | if (item.type === 'colspan') { |
| | | cell = {title: item.label, children: []} |
| | | |
| | | item.subcols.forEach(col => { |
| | | if (col.rowspan === 'true') { |
| | | rowspans.push(col.field) |
| | | let getColumns = (cols) => { |
| | | return cols.map(item => { |
| | | let cell = null |
| | | |
| | | if (item.type === 'colspan') { |
| | | cell = { title: item.label, align: item.Align } |
| | | cell.children = getColumns(item.subcols) |
| | | } else { |
| | | if (item.rowspan === 'true') { |
| | | rowspans.push(item.field) |
| | | } |
| | | if (_format && !Math.floor(Math.random() * radio)) { |
| | | col.blur = true |
| | | item.blur = true |
| | | } |
| | | |
| | | if (item.marks && item.marks.length === 0) { |
| | | item.marks = '' |
| | | } |
| | | |
| | | if (col.marks && col.marks.length === 0) { |
| | | col.marks = '' |
| | | if (item.field) { |
| | | orderfields[item.uuid] = item.field |
| | | } |
| | | |
| | | cell.children.push({ |
| | | align: col.Align, |
| | | title: col.label, |
| | | dataIndex: col.field || col.uuid, |
| | | key: col.uuid, |
| | | width: col.Width || 120, |
| | | cell = { |
| | | align: item.Align, |
| | | dataIndex: item.uuid, |
| | | title: item.label, |
| | | sorter: item.field && item.IsSort === 'true', |
| | | width: item.Width || 120, |
| | | onCell: record => ({ |
| | | record, |
| | | col, |
| | | config: col.type === 'custom' ? {setting, columns: fields} : null, |
| | | col: item, |
| | | config: item.type === 'custom' || item.type === 'action' ? {setting, columns: fields} : null, |
| | | triggerLink: this.triggerLink, |
| | | updateStatus: this.updateStatus |
| | | }) |
| | | }) |
| | | }) |
| | | } else { |
| | | if (item.rowspan === 'true') { |
| | | rowspans.push(item.field) |
| | | } |
| | | } |
| | | if (_format && !Math.floor(Math.random() * radio)) { |
| | | item.blur = true |
| | | } |
| | | |
| | | return cell |
| | | }) |
| | | } |
| | | |
| | | if (item.marks && item.marks.length === 0) { |
| | | item.marks = '' |
| | | } |
| | | |
| | | cell = { |
| | | align: item.Align, |
| | | dataIndex: item.field || item.uuid, |
| | | title: item.label, |
| | | sorter: item.field && item.IsSort === 'true', |
| | | width: item.Width || 120, |
| | | onCell: record => ({ |
| | | record, |
| | | col: item, |
| | | config: item.type === 'custom' || item.type === 'action' ? {setting, columns: fields} : null, |
| | | triggerLink: this.triggerLink, |
| | | updateStatus: this.updateStatus |
| | | }) |
| | | } |
| | | } |
| | | |
| | | _columns.push(cell) |
| | | }) |
| | | let _columns = getColumns(columns) |
| | | |
| | | if (rowspans.length === 0) { |
| | | rowspans = null |
| | | } |
| | | |
| | | let tableId = (() => { |
| | | let uuid = [] |
| | | let _options = 'abcdefghigklmnopqrstuv' |
| | | for (let i = 0; i < 19; i++) { |
| | | uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1)) |
| | | } |
| | | return uuid.join('') |
| | | }) () |
| | | |
| | | if (setting.borderColor) { // 边框颜色 |
| | | let style = `#${tableId} table, #${tableId} tr, #${tableId} th, #${tableId} td {border-color: ${setting.borderColor}}` |
| | | let ele = document.createElement('style') |
| | | ele.innerHTML = style |
| | | document.getElementsByTagName('head')[0].appendChild(ele) |
| | | } |
| | | |
| | | this.setState({ |
| | | columns: _columns, |
| | | rowspans |
| | | rowspans, |
| | | tableId, |
| | | orderfields |
| | | }) |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | changeTable = (pagination, filters, sorter) => { |
| | | const { orderfields } = this.state |
| | | |
| | | this.setState({ |
| | | pageIndex: pagination.current, |
| | | pageSize: pagination.pageSize, |
| | |
| | | activeIndex: null, |
| | | pickup: false |
| | | }) |
| | | |
| | | sorter.field = orderfields[sorter.field] || '' |
| | | |
| | | this.props.refreshdata(pagination, filters, sorter) |
| | | } |
| | | |
| | |
| | | |
| | | render() { |
| | | const { setting, statFValue, lineMarks, data } = this.props |
| | | const { selectedRowKeys, activeIndex, pickup } = this.state |
| | | const { selectedRowKeys, activeIndex, pickup, tableId } = this.state |
| | | |
| | | // 设置表格选择属性:单选、多选、不可选 |
| | | let rowSelection = null |
| | |
| | | } |
| | | |
| | | return ( |
| | | <div className="normal-custom-table"> |
| | | <div className={'normal-custom-table ' + setting.tableHeader} id={tableId}> |
| | | {(setting.tableType === 'radio' || setting.tableType === 'checkbox') && data && data.length > 0 ? |
| | | <Switch title="收起" className="main-pickup" checkedChildren="开" unCheckedChildren="关" defaultChecked={pickup} onChange={this.pickupChange} /> : null |
| | | } |