From 03a22ec6f9ad7303d10b4c65bb5bc6fa5cbd448a Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期六, 22 十月 2022 23:21:42 +0800 Subject: [PATCH] 2022-10-22 --- src/menu/components/table/base-table/columns/index.jsx | 65 ++++++++++++++++++++++++++++---- 1 files changed, 57 insertions(+), 8 deletions(-) diff --git a/src/menu/components/table/base-table/columns/index.jsx b/src/menu/components/table/base-table/columns/index.jsx index 5292b18..58ed260 100644 --- a/src/menu/components/table/base-table/columns/index.jsx +++ b/src/menu/components/table/base-table/columns/index.jsx @@ -16,6 +16,7 @@ const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent')) const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent')) const PasteComponent = asyncIconComponent(() => import('@/components/paste')) +const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent')) class HeaderCol extends Component { deleteCol = () => { @@ -49,7 +50,7 @@ } render() { - const { connectDragSource, connectDropTarget, moveCol, addElement, updateCol, editColumn, pasteCell, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props + const { connectDragSource, connectDropTarget, moveCol, addElement, dropCol, updateCol, editColumn, pasteCell, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props if (index !== undefined) { return connectDragSource( @@ -104,10 +105,14 @@ const ColTarget = { drop(props, monitor) { - const dragIndex = monitor.getItem().index + const item = monitor.getItem() + const dragIndex = item.index const hoverIndex = props.index - if (dragIndex === undefined || hoverIndex === undefined || dragIndex === hoverIndex) { + if (item.$init) { + props.dropCol(item, hoverIndex) + return + } else if (dragIndex === undefined || hoverIndex === undefined || dragIndex === hoverIndex) { return } @@ -145,13 +150,13 @@ if (column && column.type === 'custom') { return ( - <td style={{padding: 0, minWidth: column.Width || 100, ...(column.style || {})}} className={className}> + <td style={{padding: 0, minWidth: (column.Width || 100) / 2, ...(column.style || {})}} className={className}> <CardCellComponent cards={config} cardCell={column} elements={column.elements} updateElement={this.updateCard}/> </td> ) } else if (column && column.type === 'action') { return ( - <td style={{padding: '0 5px', textAlign: column.Align, minWidth: column.Width || 100}} className={'action-column ' + className}> + <td style={{padding: '0 5px', textAlign: column.Align, minWidth: (column.Width || 100) / 2}} className={'action-column ' + className}> <CardCellComponent cards={config} cardCell={column} elements={column.elements} updateElement={this.updateCard}/> </td> ) @@ -167,7 +172,7 @@ } } return ( - <td style={{...style, minWidth: column.Width || 100}} className={className}> + <td style={{...style, minWidth: (column.Width || 100) / 2}} className={className}> {val} {column.Hide === 'true' ? <CloseCircleOutlined style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}}/> : null} {column.marks && column.marks.length ? <AntDesignOutlined className="profile"/> : null} @@ -265,10 +270,31 @@ }) } + dropCol = (item, hoverIndex) => { + let _columns = fromJS(this.state.columns).toJS() + + let col = { focus: true, uuid: Utils.getuuid(), label: 'label', field: '', type: item.subType, elements: [] } + if (col.type === 'colspan') { + col.subcols = [] + } else if (col.type === 'action') { + col.label = '鎿嶄綔' + } else if (col.type === 'index') { + col.label = '搴忓彿' + } + + _columns.splice(hoverIndex, 0, col) + + this.setState({ + columns: _columns + }, () => { + this.editColumn(col) + }) + } + loopCol = (columns, col) => { return columns.map(column => { if (column.type === 'colspan') { - column.subcols = this.loopCol(column.subcols, col) + column.subcols = this.loopCol(column.subcols || [], col) } if (column.uuid === col.uuid) { return col @@ -467,7 +493,6 @@ title: col.label, dataIndex: col.uuid, align: col.Align, - // sorter: !isSub && col.IsSort === 'true', sorter: col.IsSort === 'true', onCell: () => ({ column: col, @@ -482,6 +507,7 @@ align: col.Align, moveCol: this.moveCol, updateCol: this.updateCol, + dropCol: this.dropCol, addElement: this.addElement, editColumn: this.editColumn, pasteCell: this.pasteCell, @@ -493,6 +519,27 @@ }) } + plusColumns = (id, items) => { + const { config } = this.props + + if (id !== config.uuid) return + + let _columns = fromJS(this.state.columns).toJS() + _columns = _columns.filter(a => !a.origin) + + _columns.push(...items) + + this.setState({ + columns: _columns + }, () => { + this.props.updatecolumn({...config, cols: _columns}) + }) + } + + componentDidMount () { + MKEmitter.addListener('plusColumns', this.plusColumns) + } + /** * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆 */ @@ -500,6 +547,7 @@ this.setState = () => { return } + MKEmitter.removeListener('plusColumns', this.plusColumns) } render() { @@ -519,6 +567,7 @@ return ( <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType} ${config.wrap.mode || ''}`} id={tableId}> <div className="col-control"> + <FieldsComponent config={config} type="columns" /> <CopyOutlined title="澶嶅埗鏄剧ず鍒�" onClick={this.copycolumn} /> <MarkColumn columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} /> </div> -- Gitblit v1.8.0