From 0da0262bc236cfce928429fc4c48e1666eab3402 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 07 一月 2021 17:12:04 +0800 Subject: [PATCH] 2021-01-07 --- src/menu/components/table/normal-table/columns/index.jsx | 81 ++++++++++++++++++++++++++++++++++++++-- 1 files changed, 77 insertions(+), 4 deletions(-) diff --git a/src/menu/components/table/normal-table/columns/index.jsx b/src/menu/components/table/normal-table/columns/index.jsx index 5041887..ec78012 100644 --- a/src/menu/components/table/normal-table/columns/index.jsx +++ b/src/menu/components/table/normal-table/columns/index.jsx @@ -14,7 +14,7 @@ const { confirm } = Modal const EditColumn = asyncIconComponent(() => import('./editColumn')) -const MarkColumn = asyncIconComponent(() => import('./markcolumn')) +const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent')) const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent')) class HeaderCol extends Component { @@ -176,6 +176,7 @@ state = { dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, + tableId: '', data: [{uuid: Utils.getuuid()}], refresh: false, // 寮哄埗鍒锋柊 columns: [], @@ -186,7 +187,24 @@ UNSAFE_componentWillMount () { const { config } = this.props + 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 (config.wrap && config.wrap.borderColor) { // 杈规棰滆壊 + let style = `#${tableId} table, #${tableId} tr, #${tableId} th, #${tableId} td {border-color: ${config.wrap.borderColor}}` + let ele = document.createElement('style') + ele.innerHTML = style + document.getElementsByTagName('head')[0].appendChild(ele) + } + this.setState({ + tableId, columns: fromJS(config.cols).toJS(), fields: fromJS(config.columns).toJS(), lineMarks: config.lineMarks ? fromJS(config.lineMarks).toJS() : [] @@ -197,15 +215,20 @@ if (!is(fromJS(this.state.columns), fromJS(nextProps.config.cols))) { let _columns = fromJS(nextProps.config.cols).toJS() this.setState({columns: _columns}) - let lastcol = _columns.slice(-1)[0] if (lastcol && lastcol.focus) { this.editColumn(lastcol) } } else if (!is(fromJS(this.state.fields), fromJS(nextProps.config.columns))) { this.setState({fields: fromJS(nextProps.config.columns).toJS()}) + } else if (this.props.config.wrap.borderColor !== nextProps.config.wrap.borderColor) { + let style = `#${this.state.tableId} table, #${this.state.tableId} tr, #${this.state.tableId} th, #${this.state.tableId} td {border-color: ${nextProps.config.wrap.borderColor}}` + let ele = document.createElement('style') + ele.innerHTML = style + document.getElementsByTagName('head')[0].appendChild(ele) } } + shouldComponentUpdate (nextProps, nextState) { const { config } = this.props @@ -341,6 +364,14 @@ let _columns = fromJS(this.state.columns).toJS() _columns = this.loopDelCol(_columns, col) + if (col.type === 'action') { + let uuids = [] + col.elements && col.elements.forEach(c => { + uuids.push(c.uuid) + }) + MKEmitter.emit('delButtons', uuids) + } + this.setState({ columns: _columns }, () => { @@ -409,9 +440,49 @@ }) } + syncfield = () => { + const { fields } = this.state + let columns = fromJS(this.state.columns).toJS() + + columns = columns.filter(c => !c.origin) + + let keys = columns.map(col => col.field) + + fields.forEach(item => { + if (keys.includes(item.field)) return + + let cell = { uuid: Utils.getuuid(), label: item.label, field: item.field, Align: 'left', Hide: 'false', IsSort: 'true', Width: 120, blacklist: [], postfix: '', prefix: '', linkmenu: [], marks: [], perspective: 'linkmenu' } + + if (/Nvarchar/ig.test(item.datatype)) { + cell.type = 'text' + cell.rowspan = 'false' + cell.textFormat = 'none' + } else { + cell.type = 'number' + cell.format = 'none' + cell.sum = 'false' + cell.decimal = item.decimal || 0 + } + + columns.push(cell) + }) + + const _this = this + + confirm({ + content: '纭畾鍚屾瀛楁闆嗗悧锛�', + onOk() { + _this.setState({columns}, () => { + _this.props.updatecolumn({..._this.props.config, cols: columns}) + }) + }, + onCancel() {} + }) + } + render() { const { config } = this.props - const { fields, card, lineMarks, dict } = this.state + const { fields, card, lineMarks, dict, tableId } = this.state const components = { header: { cell: DragableHeaderCol @@ -424,14 +495,16 @@ const columns = this.handlecolumns(this.state.columns, fields, config) return ( - <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType}`}> + <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType}`} id={tableId}> <div className="col-control"> <Icon title="澶嶅埗" type="copy" onClick={this.copycolumn} /> <MarkColumn columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} /> + <Icon title="鍚屾" type="file-sync" onClick={this.syncfield} /> </div> <DndProvider> <Table rowKey="uuid" + size={config.wrap.size || 'middle'} rowClassName="editable-row" bordered={config.wrap.bordered !== 'false'} components={components} -- Gitblit v1.8.0