From bd1dfc9e6c9b9f8076ca2783ce598e0936b4c664 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 22 十二月 2021 14:36:03 +0800 Subject: [PATCH] 2021-12-22 --- src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 139 ++++++++++++++++++---------------------------- 1 files changed, 54 insertions(+), 85 deletions(-) diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx index a391160..5ec93f1 100644 --- a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx +++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx @@ -1,12 +1,14 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Table, Typography, Icon, Switch, Modal, Input, InputNumber, Tooltip, Button, notification, message } from 'antd' +import { Table, Typography, Switch, Modal, Input, InputNumber, Tooltip, Button, notification, message } from 'antd' +import { ExclamationCircleOutlined, EditOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' import asyncComponent from '@/utils/asyncComponent' -import Utils, { getEditTableSql } from '@/utils/utils.js' +import Utils, { getEditTableSql, getMark } from '@/utils/utils.js' +import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import zhCN from '@/locales/zh-CN/main.js' import enUS from '@/locales/en-US/main.js' @@ -97,77 +99,6 @@ state = { editing: false, err: null - } - - getMark = (record, marks, style, content) => { - marks.some(mark => { - let originVal = record[mark.field[0]] + '' - let contrastVal = '' - let result = false - - if (mark.field[1] === 'static') { - contrastVal = mark.contrastValue + '' - } else { - contrastVal = record[mark.field[2]] + '' - } - - if (mark.match === '=') { - result = originVal === contrastVal - } else if (mark.match === '!=') { - result = originVal !== contrastVal - } else if (mark.match === 'like') { - result = originVal.indexOf(contrastVal) > -1 - } else if (mark.match === '>') { - try { - originVal = parseFloat(originVal) - contrastVal = parseFloat(contrastVal) - } catch (e) { - originVal = NaN - } - - if (!isNaN(originVal) && !isNaN(contrastVal) && originVal > contrastVal) { - result = true - } - } else if (mark.match === '<') { - try { - originVal = parseFloat(originVal) - contrastVal = parseFloat(contrastVal) - } catch (e) { - originVal = NaN - } - - if (!isNaN(originVal) && !isNaN(contrastVal) && originVal < contrastVal) { - result = true - } - } - - if (result) { - if (mark.signType[0] === 'font') { - style.color = mark.color - } else if (mark.signType[0] === 'background') { - style.background = mark.color - if (mark.fontColor) { - style.color = mark.fontColor - } - } else if (mark.signType[0] === 'underline') { - style.textDecoration = 'underline' - style.color = mark.color - } else if (mark.signType[0] === 'line-through') { - style.textDecoration = 'line-through' - style.color = mark.color - } else if (mark.signType[0] === 'icon') { - let icon = (<Icon style={{color: mark.color}} type={mark.signType[3]} />) - if (mark.signType[1] === 'front') { - content = <span>{icon} {content}</span> - } else { - content = <span>{content} {icon}</span> - } - } - } - return result - }) - - return content } shouldComponentUpdate (nextProps, nextState) { @@ -295,15 +226,24 @@ } if (col.marks) { - style = style || {} - content = this.getMark(record, col.marks, style, content) + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } if (col.editable === 'true') { if (editing) { return (<td className="editing_table_cell"> <Input id={col.uuid + record.$Index} defaultValue={value} onChange={(e) => this.onChange(e.target.value)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> - {err ? <Tooltip title={err}><Icon type="exclamation-circle" /></Tooltip> : null} + {err ? <Tooltip title={err}><ExclamationCircleOutlined /></Tooltip> : null} </td>) } else { return (<td className={className + ' pointer'} style={style}><div className="mk-mask" onClick={this.focus}></div>{content}</td>) @@ -339,15 +279,24 @@ } if (col.marks) { - style = style || {} - content = this.getMark(record, col.marks, style, content) + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } if (col.editable === 'true') { if (editing) { return (<td className="editing_table_cell"> <InputNumber id={col.uuid + record.$Index} defaultValue={value} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> - {err ? <Tooltip title={err}><Icon type="exclamation-circle" /></Tooltip> : null} + {err ? <Tooltip title={err}><ExclamationCircleOutlined /></Tooltip> : null} </td>) } else { return (<td className={className + ' pointer'} style={style}><div className="mk-mask" onClick={this.focus}></div>{content}</td>) @@ -398,8 +347,17 @@ } if (col.marks) { - style = style || {} - content = this.getMark(record, col.marks, style, content) + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } children = content @@ -456,7 +414,8 @@ pickup: false, // 鏀惰捣鏈�夋嫨椤� orderfields: {}, // 鎺掑簭id涓巉ield杞崲 loading: false, - editable: 'false' + editable: 'false', + pageOptions: [] } UNSAFE_componentWillMount () { @@ -513,7 +472,7 @@ _copy.sorter = false if (item.editable === 'true') { - _copy.title = <span>{item.label}<Icon className="system-color" style={{position: 'absolute', bottom: 0, right: 0}} type="edit" /></span> + _copy.title = <span>{item.label}<EditOutlined className="system-color" style={{position: 'absolute', bottom: 0, right: 0}}/></span> } edColumns.push(_copy) } @@ -541,7 +500,17 @@ document.getElementsByTagName('head')[0].appendChild(ele) } + 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({ + pageSize: setting.pageSize || 10, + pageOptions, data, columns: _columns, edColumns, @@ -1033,7 +1002,7 @@ render() { const { setting, statFValue, lineMarks, submit } = this.props - const { pickup, tableId, data, edData, columns, edColumns, loading } = this.state + const { pickup, tableId, data, edData, columns, edColumns, loading, pageOptions } = this.state const components = { body: { @@ -1057,7 +1026,7 @@ _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.state.dict['main.pagination.of']} ${total} ${this.state.dict['main.pagination.items']}` -- Gitblit v1.8.0