From c81296b147b3b6e578a241e21bae7bded4b5f6c6 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 24 十月 2023 16:58:16 +0800 Subject: [PATCH] 2023-10-24 --- src/tabviews/custom/components/share/normalTable/index.jsx | 250 +++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 205 insertions(+), 45 deletions(-) diff --git a/src/tabviews/custom/components/share/normalTable/index.jsx b/src/tabviews/custom/components/share/normalTable/index.jsx index 5c7df59..b090fc7 100644 --- a/src/tabviews/custom/components/share/normalTable/index.jsx +++ b/src/tabviews/custom/components/share/normalTable/index.jsx @@ -6,13 +6,13 @@ import asyncComponent from '@/utils/asyncComponent' import { getMark } from '@/utils/utils.js' -import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import Encrypts from '@/components/encrypts' import './index.scss' const { Paragraph } = Typography const Video = asyncComponent(() => import('@/components/video')) +const MkIcon = asyncComponent(() => import('@/components/mk-icon')) const MkPicture = asyncComponent(() => import('@/components/mkPicture')) const CardCellComponent = asyncComponent(() => import('@/tabviews/custom/components/card/cardcellList')) const PicRadio = { @@ -132,9 +132,9 @@ } 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') { @@ -144,6 +144,14 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } if (col.blur) { @@ -196,9 +204,9 @@ } 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') { @@ -208,6 +216,14 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } @@ -330,35 +346,52 @@ ) } else if (col.type === 'formula') { let content = col.formula - Object.keys(record).forEach(key => { - let reg = new RegExp('@' + key + '@', 'ig') - content = content.replace(reg, record[key]) - }) - if (col.eval !== 'false') { + if (col.eval === 'func') { try { // eslint-disable-next-line - content = eval(content) + let func = new Function('data', col.formula) + content = func([record]) } catch (e) { + console.warn(e) content = '' + } + } else { + Object.keys(record).forEach(key => { + let reg = new RegExp('@' + key + '@', 'ig') + content = content.replace(reg, record[key]) + }) + if (col.eval !== 'false') { + try { + // eslint-disable-next-line + content = eval(content) + } catch (e) { + console.info(content) + console.warn(e) + content = '' + } + + if (col.round && typeof(content) === 'number') { + content = Math.round(content * col.round) / col.round + content = content.toFixed(col.decimal) + } } } content = content === undefined ? '' : content - if (content !== '') { + if (col.eval === 'func') { + content = <span dangerouslySetInnerHTML={{__html: content}}></span> + } else if (content !== '') { content = `${col.prefix || ''}${content}${col.postfix || ''}` - - if (col.eval === 'false') { - content = content.replace(/\n/ig, '<br/>').replace(/\s/ig, ' ') - content = <span dangerouslySetInnerHTML={{__html: content}}></span> - } + content = content.replace(/\n/ig, '<br/>').replace(/\s/ig, ' ') + content = <span dangerouslySetInnerHTML={{__html: content}}></span> } 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') { @@ -368,6 +401,14 @@ } } else if (mark.innerStyle) { content = <span style={mark.innerStyle}>{content}</span> + } else if (mark.space) { + content = <><span dangerouslySetInnerHTML={{__html: mark.space}}></span>{content}</> + } else if (mark.point) { + if (mark.position === 'front') { + content = <>{mark.point}{content}</> + } else { + content = <>{content}{mark.point}</> + } } } @@ -378,14 +419,6 @@ style = {...style, ...col.style} } - resProps.children = ( - <CardCellComponent data={record} cards={config} elements={col.elements}/> - ) - } else if (col.type === 'action') { - style.padding = '0px' - if (col.style) { - style = {...style, ...col.style} - } resProps.children = ( <CardCellComponent data={record} cards={config} elements={col.elements}/> ) @@ -409,7 +442,9 @@ loading: PropTypes.bool, // 琛ㄦ牸鍔犺浇涓� refreshdata: PropTypes.func, // 琛ㄦ牸涓帓搴忓垪銆侀〉鐮佺殑鍙樺寲鏃跺埛鏂� chgSelectData: PropTypes.func, // 鏁版嵁鍒囨崲 - autoMatic: PropTypes.any + autoMatic: PropTypes.any, + allSearch: PropTypes.any, + colsCtrls: PropTypes.any } state = { @@ -422,17 +457,19 @@ rowspans: null, // 琛屽悎骞跺瓧娈典俊鎭� pickup: false, // 鏀惰捣鏈�夋嫨椤� orderfields: {}, // 鎺掑簭id涓巉ield杞崲 - 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 orderfields = {} - if (window.GLOB.dataFormat && !window.GLOB.mkHS) { + if (window.GLOB.dataFormat) { _format = true if (window.GLOB.memberLevel >= 30) { @@ -450,7 +487,7 @@ 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') { @@ -469,18 +506,21 @@ 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, col: item, - config: item.type === 'custom' || item.type === 'action' ? {setting, columns: fields} : null, + config: item.type === 'custom' ? {setting, columns: fields} : null, triggerLink: this.triggerLink }) } @@ -497,6 +537,7 @@ fields.push(item.field) _columns.push({ + $key: item.uuid, align: item.Align, dataIndex: item.field, title: item.label, @@ -504,6 +545,8 @@ width: item.Width || 120 }) }) + + orderfields = null } if (rowspans.length === 0) { @@ -527,9 +570,17 @@ pageOptions = pageOptions.sort((a, b) => a - b) } + 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, @@ -545,6 +596,20 @@ 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 () { @@ -573,6 +638,47 @@ 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 { + 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) => { @@ -735,9 +841,6 @@ } } - /** - * - */ onSelectChange = (selectedRowKeys, e) => { const { setting, MenuID, data } = this.props @@ -797,7 +900,7 @@ } let selects = this.props.data.filter((item, _index) => newkeys.includes(_index) && !item.$disabled) - + this.props.chgSelectData(selects) if (setting.$hasSyncModule) { @@ -816,7 +919,9 @@ pickup: false }) - sorter.field = orderfields[sorter.field] || '' + if (orderfields) { + sorter.field = orderfields[sorter.field] || '' + } this.props.refreshdata(pagination, filters, sorter) } @@ -837,13 +942,52 @@ MKEmitter.emit('resetSelectLine', MenuID, _id, _data) } - resetTable = (id, repage) => { - const { MenuID } = this.props + resetTable = (id, type, Index) => { + const { MenuID, setting, data } = this.props if (id !== MenuID) return - if (repage === 'false') { + if (type === 'delete') { + let selectKeys = fromJS(this.state.selectedRowKeys).toJS() + let activeKey = this.state.activeIndex + + let trans = activeKey === Index + let _item = null + let selects = [] + + if (setting.tableType) { + selectKeys = selectKeys.filter(key => key !== Index) + selectKeys = selectKeys.map(key => key > Index ? key - 1 : key) + + selects = selectKeys.map(key => data[key]).filter(Boolean) + + activeKey = selectKeys.length ? selectKeys[selectKeys.length - 1] : null + + if (trans && selects.length) { + _item = selects[selects.length - 1] + } + } + + this.setState({ selectedRowKeys: selectKeys, activeIndex: activeKey }) + + this.props.chgSelectData(selects) + + if (trans) { + MKEmitter.emit('resetSelectLine', MenuID, (_item ? _item.$$uuid : ''), _item) + } + + if (setting.$hasSyncModule) { + MKEmitter.emit('syncBalconyData', MenuID, selects, data.length === selects.length) + } + } else if (type === 'false') { this.setState({ + selectedRowKeys: [], + activeIndex: null, + pickup: false + }) + } else if (type === 'repage') { + this.setState({ + pageIndex: Index, selectedRowKeys: [], activeIndex: null, pickup: false @@ -929,7 +1073,9 @@ render() { const { setting, statFValue, lineMarks, data } = this.props - const { selectedRowKeys, activeIndex, pickup, tableId, pageOptions } = this.state + const { selectedRowKeys, activeIndex, pickup, tableId, pageOptions, columns, reseting } = this.state + + if (reseting) return null // 璁剧疆琛ㄦ牸閫夋嫨灞炴�э細鍗曢�夈�佸閫夈�佷笉鍙�� let rowSelection = null @@ -979,13 +1125,26 @@ } let height = setting.height || false + if (height && height <= 100) { + height = height + 'vh' + } let loading = this.props.loading if (setting.mask === 'hidden') { loading = false } + let fixed = '' + if (setting.colfixed && setting.colfixed.length) { + if (setting.colfixed.includes('first')) { + fixed = 'mk-fixed-first-col' + } + if (setting.colfixed.includes('last')) { + fixed += ' mk-fixed-last-col' + } + } + return ( - <div className={`normal-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || ''}`} id={tableId}> + <div className={`normal-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || 'middle'} table-col-${columns.length} ${fixed}`} id={tableId}> {(setting.tableType === 'radio' || setting.tableType === 'checkbox') && data && data.length > 0 ? <Switch title="鏀惰捣" className="main-pickup" checkedChildren="寮�" unCheckedChildren="鍏�" checked={pickup} onChange={this.pickupChange} /> : null } @@ -994,7 +1153,7 @@ size={setting.size || 'middle'} bordered={setting.bordered !== 'false'} rowSelection={rowSelection} - columns={this.state.columns} + columns={columns} dataSource={_data} loading={loading} scroll={{ x: '100%', y: height }} @@ -1002,6 +1161,7 @@ return { lineMarks: setting.tableMode !== 'fast' ? lineMarks : null, data: record, + title: setting.tipField ? record[setting.tipField] : '', className: index === activeIndex ? ' mk-row-active ' : '', onClick: () => {this.changeRow(record, index)}, onDoubleClick: () => {this.doubleClickLine(record)} -- Gitblit v1.8.0