| | |
| | | let { col, config, record, className, style, triggerLink, ...resProps } = this.props |
| | | |
| | | if (!col) return (<td {...resProps} className={className} style={style}/>) |
| | | |
| | | |
| | | if (col.type === 'text') { |
| | | let content = '' |
| | | if (record[col.field] !== undefined) { |
| | |
| | | content = <span>{col.prefix || ''}<Encrypts value={content} />{col.postfix || ''}</span> |
| | | } |
| | | |
| | | if (col.noValue === 'hide' && content < '1949-10-02') { |
| | | content = '' |
| | | } |
| | | |
| | | if (col.textFormat !== 'encryption') { |
| | | content = (col.prefix || '') + content + (col.postfix || '') |
| | | } |
| | | } |
| | | |
| | | if (col.marks) { |
| | | let mark = getMark(col.marks, record, style) |
| | | style = style ? {...style} : {} |
| | | |
| | | style = mark.style |
| | | let mark = getMark(col.marks, record, style) |
| | | |
| | | if (mark.icon) { |
| | | if (mark.position === 'front') { |
| | |
| | | resProps.rowSpan = record['$$' + col.field] |
| | | } |
| | | |
| | | if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { |
| | | content = ( |
| | | <div> |
| | | <div className="link-menu" onDoubleClick={(e) => triggerLink(e, col, record)}></div> |
| | | {content} |
| | | </div> |
| | | ) |
| | | } |
| | | |
| | | resProps.children = content |
| | | |
| | | if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { |
| | | style = style || {} |
| | | style.cursor = 'pointer' |
| | | |
| | | return (<td {...resProps} className={className} onDoubleClick={() => triggerLink(col, record)} style={style}/>) |
| | | } |
| | | } else if (col.type === 'number') { |
| | | let content = '' |
| | | try { |
| | | content = parseFloat(record[col.field]) |
| | | if (isNaN(content)) { |
| | | content = '' |
| | | } |
| | | if (col.noValue === 'hide' && content === 0) { |
| | | content = '' |
| | | } |
| | | } catch (e) { |
| | |
| | | } |
| | | |
| | | if (col.marks) { |
| | | let mark = getMark(col.marks, record, style) |
| | | style = style ? {...style} : {} |
| | | |
| | | style = mark.style |
| | | let mark = getMark(col.marks, record, style) |
| | | |
| | | if (mark.icon) { |
| | | if (mark.position === 'front') { |
| | |
| | | resProps.rowSpan = record['$$' + col.field] |
| | | } |
| | | |
| | | if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { |
| | | content = ( |
| | | <div> |
| | | <div className="link-menu" onDoubleClick={(e) => triggerLink(e, col, record)}></div> |
| | | {content} |
| | | </div> |
| | | ) |
| | | } |
| | | |
| | | resProps.children = content |
| | | |
| | | if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { |
| | | style = style || {} |
| | | style.cursor = 'pointer' |
| | | |
| | | return (<td {...resProps} className={className} onDoubleClick={() => triggerLink(col, record)} style={style}/>) |
| | | } |
| | | } else if (col.type === 'picture') { |
| | | let photos = '' |
| | | if (record[col.field]) { |
| | |
| | | <div> |
| | | {photos.map((url, i) => ( |
| | | <Col key={i} span={col.span || 24}> |
| | | <MkPicture style={{paddingTop, backgroundSize: col.backgroundSize || 'cover'}} scale={scale} url={url} urls={photos}/> |
| | | <MkPicture lostTip={col.lostTip !== 'false'} style={{paddingTop, backgroundSize: col.backgroundSize || 'cover'}} scale={scale} url={url} urls={photos}/> |
| | | </Col> |
| | | ))} |
| | | </div> |
| | |
| | | // eslint-disable-next-line |
| | | let func = new Function('data', col.formula) |
| | | content = func([record]) |
| | | |
| | | if (col.noValue === 'hide' && content === 0) { |
| | | content = '' |
| | | } |
| | | } catch (e) { |
| | | console.warn(e) |
| | | content = '' |
| | |
| | | try { |
| | | // eslint-disable-next-line |
| | | content = eval(content) |
| | | |
| | | if (col.noValue === 'hide' && content === 0) { |
| | | content = '' |
| | | } |
| | | } catch (e) { |
| | | console.info(content) |
| | | console.warn(e) |
| | |
| | | } |
| | | |
| | | if (col.marks) { |
| | | let mark = getMark(col.marks, record, style) |
| | | style = style ? {...style} : {} |
| | | |
| | | style = mark.style |
| | | let mark = getMark(col.marks, record, style) |
| | | |
| | | if (mark.icon) { |
| | | if (mark.position === 'front') { |
| | |
| | | loading: PropTypes.bool, // 表格加载中 |
| | | refreshdata: PropTypes.func, // 表格中排序列、页码的变化时刷新 |
| | | chgSelectData: PropTypes.func, // 数据切换 |
| | | autoMatic: PropTypes.any |
| | | autoMatic: PropTypes.any, |
| | | allSearch: PropTypes.any, |
| | | colsCtrls: PropTypes.any |
| | | } |
| | | |
| | | state = { |
| | |
| | | rowspans: null, // 行合并字段信息 |
| | | pickup: false, // 收起未选择项 |
| | | orderfields: {}, // 排序id与field转换 |
| | | pageOptions: [] |
| | | pageOptions: [], |
| | | allColumns: null, |
| | | reseting: false |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { setting, fields, columns } = this.props |
| | | const { setting, columns, fields, colsCtrls } = this.props |
| | | let radio = 5 // 虚化比例 |
| | | let _format = false // 是否虚化处理 |
| | | let rowspans = [] |
| | |
| | | let cell = null |
| | | |
| | | if (item.type === 'colspan') { |
| | | cell = { title: item.label, align: item.Align } |
| | | cell = { title: item.label, align: item.Align, $key: item.uuid } |
| | | cell.children = getColumns(item.subcols) |
| | | } else { |
| | | if (item.rowspan === 'true') { |
| | |
| | | } else if (_format && !Math.floor(Math.random() * radio)) { |
| | | item.blur = true |
| | | } |
| | | |
| | | if (item.marks && item.marks.length === 0) { |
| | | item.marks = '' |
| | | } |
| | | |
| | | if (item.field) { |
| | | orderfields[item.uuid] = item.field |
| | | } else if (item.sortField) { |
| | | orderfields[item.uuid] = item.sortField |
| | | } |
| | | |
| | | cell = { |
| | | $key: item.uuid, |
| | | align: item.Align, |
| | | dataIndex: item.uuid, |
| | | title: item.label, |
| | | sorter: item.field && item.IsSort === 'true', |
| | | sorter: (item.field || item.sortField) && item.IsSort === 'true', |
| | | width: item.Width || 120, |
| | | onCell: record => ({ |
| | | record, |
| | |
| | | fields.push(item.field) |
| | | |
| | | _columns.push({ |
| | | $key: item.uuid, |
| | | align: item.Align, |
| | | dataIndex: item.field, |
| | | title: item.label, |
| | |
| | | pageOptions = pageOptions.sort((a, b) => a - b) |
| | | } |
| | | |
| | | if (setting.maxPageSize) { |
| | | pageOptions = pageOptions.filter(item => item <= setting.maxPageSize) |
| | | } |
| | | |
| | | let allColumns = null |
| | | if (colsCtrls) { |
| | | rowspans = null |
| | | allColumns = [..._columns] |
| | | _columns = this.getCurColumns(_columns, this.props.allSearch) |
| | | } |
| | | |
| | | this.setState({ |
| | | pageSize: setting.pageSize || 10, |
| | | pageOptions, |
| | | allColumns, |
| | | columns: _columns, |
| | | rowspans, |
| | | tableId, |
| | | orderfields |
| | | }, () => { |
| | | const element = document.getElementById(tableId) |
| | | element && element.style.setProperty('--mk-table-border-color', setting.borderColor || '#e8e8e8') |
| | | element && element.style.setProperty('--mk-table-color', setting.color || 'rgba(0, 0, 0, 0.65)') |
| | | element && element.style.setProperty('--mk-table-font-size', setting.fontSize || '14px') |
| | | element && element.style.setProperty('--mk-table-font-weight', setting.fontWeight || 'normal') |
| | | }) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | const { allSearch } = this.props |
| | | const { allColumns } = this.state |
| | | |
| | | if (allSearch && !is(fromJS(allSearch), fromJS(nextProps.allSearch))) { |
| | | this.setState({ |
| | | reseting: true, |
| | | columns: this.getCurColumns(allColumns, nextProps.allSearch) |
| | | }, () => { |
| | | this.setState({reseting: false}) |
| | | }) |
| | | } |
| | | } |
| | | |
| | | componentDidMount () { |
| | |
| | | MKEmitter.removeListener('autoQueryData', this.autoQueryData) |
| | | MKEmitter.removeListener('autoSelectData', this.autoSelectData) |
| | | MKEmitter.removeListener('mkCheckTopLine', this.mkCheckTopLine) |
| | | } |
| | | |
| | | getCurColumns = (columns, allSearch) => { |
| | | const { colsCtrls } = this.props |
| | | |
| | | let values = {} |
| | | allSearch.forEach(item => { |
| | | values[item.key] = item.value |
| | | }) |
| | | let cols = null |
| | | colsCtrls.some(item => { |
| | | let originVal = item.field.map(f => values[f] || '').join('') |
| | | let contrastVal = item.contrastValue |
| | | let result = false |
| | | |
| | | if (item.match === '=') { |
| | | result = originVal === contrastVal |
| | | } else if (item.match === '!=') { |
| | | result = originVal !== contrastVal |
| | | } else if (item.match === 'regexp') { |
| | | let reg = new RegExp(item.contrastValue, 'ig') |
| | | result = reg.test(originVal) |
| | | } else { |
| | | originVal = isNaN(originVal) ? originVal : +originVal |
| | | contrastVal = isNaN(contrastVal) ? contrastVal : +contrastVal |
| | | if (item.match === '>') { |
| | | result = originVal > contrastVal |
| | | } else if (item.match === '<') { |
| | | result = originVal < contrastVal |
| | | } |
| | | } |
| | | |
| | | if (!result) return false |
| | | |
| | | cols = item.cols |
| | | |
| | | return true |
| | | }) |
| | | |
| | | if (cols) { |
| | | return columns.filter(col => cols.includes(col.$key)) |
| | | } |
| | | |
| | | return columns |
| | | } |
| | | |
| | | autoSelectData = (id, index) => { |
| | |
| | | } |
| | | |
| | | // 字段透视 |
| | | triggerLink = (e, item, record) => { |
| | | e.stopPropagation() |
| | | |
| | | triggerLink = (item, record) => { |
| | | let __param = { |
| | | $searchkey: item.field, |
| | | $searchval: record[item.field] || '', |
| | |
| | | |
| | | onSelectChange = (selectedRowKeys, e) => { |
| | | const { setting, MenuID, data } = this.props |
| | | |
| | | if (this.state.pickup) return |
| | | |
| | | let index = '' |
| | | let _activeIndex = null |
| | |
| | | |
| | | render() { |
| | | const { setting, statFValue, lineMarks, data } = this.props |
| | | const { selectedRowKeys, activeIndex, pickup, tableId, pageOptions, columns } = this.state |
| | | const { selectedRowKeys, activeIndex, pickup, pageOptions, columns, reseting } = this.state |
| | | |
| | | if (reseting) return null |
| | | |
| | | // 设置表格选择属性:单选、多选、不可选 |
| | | let rowSelection = null |
| | |
| | | } |
| | | } |
| | | |
| | | let style = { |
| | | '--mk-table-border-color': setting.borderColor || '#e8e8e8', |
| | | '--mk-table-color': setting.color || 'rgba(0, 0, 0, 0.65)', |
| | | '--mk-table-font-size': setting.fontSize || '14px', |
| | | '--mk-table-font-weight': setting.fontWeight || 'normal' |
| | | } |
| | | |
| | | return ( |
| | | <div className={`normal-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || 'middle'} table-col-${columns.length} ${fixed}`} id={tableId}> |
| | | <div className={`normal-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || 'middle'} table-col-${columns.length} ${fixed}`} style={style}> |
| | | {(setting.tableType === 'radio' || setting.tableType === 'checkbox') && data && data.length > 0 ? |
| | | <Switch title="收起" className="main-pickup" checkedChildren="开" unCheckedChildren="关" checked={pickup} onChange={this.pickupChange} /> : null |
| | | } |