From e8edfdadb561cd83bf6e1c3e00d55b8cc2aee6d5 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 17 十月 2022 17:57:34 +0800 Subject: [PATCH] 2022-10-17 --- src/menu/components/table/normal-table/columns/index.jsx | 46 +++++++++++++++++++++++++++++++--------------- 1 files changed, 31 insertions(+), 15 deletions(-) diff --git a/src/menu/components/table/normal-table/columns/index.jsx b/src/menu/components/table/normal-table/columns/index.jsx index e4c9a64..f2ef11f 100644 --- a/src/menu/components/table/normal-table/columns/index.jsx +++ b/src/menu/components/table/normal-table/columns/index.jsx @@ -2,18 +2,17 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { DndProvider, DragSource, DropTarget } from 'react-dnd' -import { Table, Popover, Modal, message } from 'antd' +import { Table, Popover, Modal, message, Typography } from 'antd' import { PlusOutlined, FileSyncOutlined, EditOutlined, CopyOutlined, DeleteOutlined, FontColorsOutlined, CloseCircleOutlined, AntDesignOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' import Utils from '@/utils/utils.js' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import MKEmitter from '@/utils/events.js' import './index.scss' const { confirm } = Modal +const { Paragraph } = Typography const EditColumn = asyncIconComponent(() => import('./editColumn')) const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent')) const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent')) @@ -52,7 +51,7 @@ } render() { - const { connectDragSource, connectDropTarget, moveCol, addElement, updateCol, editColumn, pasteCell, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props + const { connectDragSource, connectDropTarget, moveCol, dropCol, addElement, updateCol, editColumn, pasteCell, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props if (index !== undefined) { return connectDragSource( @@ -108,10 +107,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 } @@ -173,9 +176,9 @@ } return ( <td style={{...style, minWidth: column.Width || 100}} className={className}> - {val} - {column.Hide === 'true' ? <CloseCircleOutlined style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}}/> : null} + {column.field ? <Paragraph className="col-copy" copyable={{ text: column.field }}>{val}</Paragraph> : val} {column.marks && column.marks.length ? <AntDesignOutlined className="profile"/> : null} + {column.Hide === 'true' ? <CloseCircleOutlined className="close-col"/> : null} </td> ) } else { @@ -195,7 +198,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, appType: sessionStorage.getItem('appType'), tableId: '', data: [{uuid: Utils.getuuid()}], @@ -273,6 +275,20 @@ }) } + dropCol = (item, hoverIndex) => { + let _columns = fromJS(this.state.columns).toJS() + + let col = { focus: true, uuid: Utils.getuuid(), label: 'label', field: '', type: item.subType, elements: [] } + + _columns.splice(hoverIndex, 0, col) + + this.setState({ + columns: _columns + }, () => { + this.editColumn(col) + }) + } + loopCol = (columns, col) => { return columns.map(column => { if (column.type === 'colspan') { @@ -314,11 +330,10 @@ cell.uuid = Utils.getuuid() cell.focus = true - MKEmitter.emit('cardAddElement', [this.props.config.uuid, col.uuid], cell) + MKEmitter.emit('cardAddElement', col.uuid, cell) } addElement = (col) => { - const { config } = this.props let column = fromJS(col).toJS() if (column.type === 'colspan') { @@ -334,7 +349,7 @@ let newcard = {uuid: Utils.getuuid(), focus: true, width: 24, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}} // 娉ㄥ唽浜嬩欢-娣诲姞鍏冪礌 - MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard) + MKEmitter.emit('cardAddElement', column.uuid, newcard) } else if (column.type === 'action') { let newcard = { uuid: Utils.getuuid(), @@ -350,7 +365,7 @@ } // 娉ㄥ唽浜嬩欢-娣诲姞鍏冪礌 - MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard) + MKEmitter.emit('cardAddElement', column.uuid, newcard) } } @@ -491,6 +506,7 @@ fields: fields, align: col.Align, moveCol: this.moveCol, + dropCol: this.dropCol, updateCol: this.updateCol, addElement: this.addElement, editColumn: this.editColumn, @@ -569,7 +585,7 @@ render() { const { config } = this.props - const { fields, card, lineMarks, dict, tableId, appType } = this.state + const { fields, card, lineMarks, tableId, appType } = this.state const components = { header: { cell: DragableHeaderCol @@ -610,7 +626,7 @@ /> {appType === 'mob' && config.setting.laypage !== 'fasle' ? <MobPagination /> : null} </DndProvider> - <EditColumn column={card} dict={dict} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/> + <EditColumn column={card} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/> </div> ) } -- Gitblit v1.8.0