From ba7c1ccc4e5cb111d957a5c63c2534b471580029 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 16 七月 2023 21:41:32 +0800
Subject: [PATCH] 2023-07-16

---
 src/menu/components/table/base-table/columns/index.jsx |  442 ++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 277 insertions(+), 165 deletions(-)

diff --git a/src/menu/components/table/base-table/columns/index.jsx b/src/menu/components/table/base-table/columns/index.jsx
index 44be56a..5b6a30a 100644
--- a/src/menu/components/table/base-table/columns/index.jsx
+++ b/src/menu/components/table/base-table/columns/index.jsx
@@ -2,23 +2,21 @@
 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 { PlusOutlined, FileSyncOutlined, EditOutlined, CopyOutlined, DeleteOutlined, FontColorsOutlined, CloseCircleOutlined, AntDesignOutlined } from '@ant-design/icons'
+import { Table, Popover, Modal, message, notification } from 'antd'
+import { PlusOutlined, PlusSquareOutlined, EditOutlined, CopyOutlined, DeleteOutlined, FontColorsOutlined, CloseCircleOutlined, AntDesignOutlined, InfoOutlined } 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 EditColumn = asyncIconComponent(() => import('./editColumn'))
+const EditColumn = asyncComponent(() => import('./editColumn'))
 const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent'))
 const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent'))
-const MobPagination = asyncIconComponent(() => import('@/menu/components/share/mobPagination'))
 const PasteComponent = asyncIconComponent(() => import('@/components/paste'))
+const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
 
 class HeaderCol extends Component {
   deleteCol = () => {
@@ -48,52 +46,45 @@
 
     return !is(fromJS(this.props.column), fromJS(nextProps.column)) ||
       !is(fromJS(this.props.fields), fromJS(nextProps.fields)) ||
-      this.props.index !== nextProps.index
+      this.props.index !== nextProps.index ||
+      window.GLOB.columnId === nextProps.column.uuid || window.GLOB.precolumnId === nextProps.column.uuid
   }
 
   render() {
-    const { connectDragSource, connectDropTarget, moveCol, addElement, updateCol, editColumn, pasteCell, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props
+    const { connectDragSource, connectDropTarget, moveCol, componentId, addElement, dropCol, updateCol, editColumn, pasteCell, changeStyle, deleteCol, index, column, align, fields, children, ...restProps } = this.props
 
-    if (index !== undefined) {
-      return connectDragSource(
-        connectDropTarget(<th {...restProps} index={index} style={{ cursor: 'move', textAlign: align }} onDoubleClick={() => column && this.props.editColumn(column)}>
-          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
-            <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}>
-              {column && ['custom', 'colspan', 'action'].includes(column.type) ?
-                <PlusOutlined className="plus" title="娣诲姞" onClick={() => this.props.addElement(column)} /> : null
-              }
-              <EditOutlined className="edit" title="缂栬緫" onClick={() => this.props.editColumn(column)} />
-              {column && column.type === 'custom' ? <PasteComponent options={['customCardElement']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null}
-              {column && column.type === 'custom' ? <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => this.props.changeStyle(column)}/> : null}
-              <DeleteOutlined className="close" title="鍒犻櫎" onClick={this.deleteCol} />
-              {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null }
-            </div>
-          } trigger="hover">
-            {children}
-          </Popover>
-        </th>),
-      )
-    } else if (column) {
-      return (
-        <th {...restProps} key={column.uuid} onDoubleClick={() => this.props.editColumn(column)}>
-          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
-            <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}>
-              {column && ['custom', 'colspan'].includes(column.type) ?
-                <PlusOutlined className="plus" title="娣诲姞" onClick={() => this.props.addElement(column)} /> : null
-              }
-              <EditOutlined className="edit" title="缂栬緫" onClick={() => this.props.editColumn(column)} />
-              {column.type === 'custom' ? <PasteComponent options={['customCardElement']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null}
-              <DeleteOutlined className="close" title="鍒犻櫎" onClick={this.deleteCol} />
-              {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null }
-            </div>
-          } trigger="hover">
-            {children}
-          </Popover>
-        </th>
-      )
-    } else {
-      return (<th {...restProps}>{children}</th>)
+    if (!column) return (
+      <th {...restProps}>{children}</th>
+    )
+
+    let style = {cursor: 'move', textAlign: align}
+    if (column.Width) {
+      style.width = column.Width
+      style.minWidth = column.Width
     }
+
+    if (window.GLOB.columnId === column.uuid) {
+      style.color = '#1890ff'
+    }
+
+    return connectDragSource(
+      connectDropTarget(<th {...restProps} index={index} style={style} onDoubleClick={() => this.props.editColumn(column)}>
+        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
+          <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}>
+            {column.type === 'colspan' ? <PlusOutlined className="plus" title="娣诲姞鍒�" onClick={() => this.props.addElement(column)} /> : null}
+            {column.type === 'custom' ? <PlusOutlined className="plus" title="娣诲姞鍏冪礌" onClick={() => this.props.addElement(column)} /> : null}
+            {column.type === 'custom' ? <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={() => this.props.addElement(column, 'button')} /> : null}
+            <EditOutlined className="edit" title="缂栬緫" onClick={() => this.props.editColumn(column)} />
+            {column.type === 'custom' ? <PasteComponent options={['customCardElement', 'action']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null}
+            {column.type === 'custom' ? <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => this.props.changeStyle(column)}/> : null}
+            <DeleteOutlined className="close" title="鍒犻櫎" onClick={this.deleteCol} />
+            {['text', 'number', 'formula'].includes(column.type) ? <MarkColumn field={column.field || ''} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null }
+          </div>
+        } trigger="hover">
+          {children}
+        </Popover>
+      </th>),
+    )
   }
 }
 
@@ -107,14 +98,29 @@
 
 const ColTarget = {
   drop(props, monitor) {
-    const dragIndex = monitor.getItem().index
-    const hoverIndex = props.index
+    const item = monitor.getItem()
+    let dragIndex = item.index
+    let hoverIndex = props.index
 
-    if (dragIndex === undefined || hoverIndex === undefined || dragIndex === hoverIndex) {
+    if (item.$init) {
+      if (/sub_/.test(hoverIndex)) {
+        message.warning('鍚堝苟鍒楀瓙鍏冪礌鏆備笉鏀寔鎷栨嫿娣诲姞銆�')
+      } else {
+        props.dropCol(item, hoverIndex.replace(new RegExp(props.componentId + '@', 'ig'), ''))
+      }
       return
+    } else if (dragIndex === undefined || hoverIndex === undefined || dragIndex === hoverIndex) {
+      return
+    } else {
+      let reg = new RegExp(props.componentId + '@', 'ig')
+      if (reg.test(dragIndex)) {
+        props.moveCol(dragIndex.replace(reg, ''), hoverIndex.replace(reg, ''))
+      } else {
+        message.warning('鎷栧姩鍏冪礌涓嶅湪褰撳墠缁勪欢涓��')
+        return
+      }
     }
 
-    props.moveCol(dragIndex, hoverIndex)
     monitor.getItem().index = hoverIndex
   },
 }
@@ -125,6 +131,34 @@
   DragSource('col', rowSource, connect => ({
     connectDragSource: connect.dragSource(),
   }))(HeaderCol),
+)
+
+class HeaderEmptyCol extends Component {
+  render() {
+    const { connectDragSource, connectDropTarget } = this.props
+
+    return connectDragSource(
+      connectDropTarget(<div style={{border: '1px solid #e8e8e8', textAlign: 'center', height: '100px', lineHeight: '100px', color: '#bcbcbc'}}>璇锋坊鍔犳樉绀哄垪</div>)
+    )
+  }
+}
+
+const ColEmptyTarget = {
+  drop(props, monitor) {
+    const item = monitor.getItem()
+
+    if (item.$init) {
+      props.dropCol(item, 0)
+    }
+  }
+}
+
+const DragableEmptyCol = DropTarget('col', ColEmptyTarget, connect => ({
+  connectDropTarget: connect.dropTarget()
+}))(
+  DragSource('col', rowSource, connect => ({
+    connectDragSource: connect.dragSource(),
+  }))(HeaderEmptyCol)
 )
 
 class EditableColumnCell extends Component {
@@ -140,8 +174,7 @@
 
     return !is(fromJS(column), fromJS(nextProps.column)) ||
       !is(fromJS(config.columns), fromJS(nextProps.config.columns)) ||
-      !is(fromJS(config.action), fromJS(nextProps.config.action)) ||
-      !is(fromJS(config.search), fromJS(nextProps.config.search))
+      !is(fromJS(config.action), fromJS(nextProps.config.action))
   }
 
   render() {
@@ -149,13 +182,7 @@
 
     if (column && column.type === 'custom') {
       return (
-        <td style={{padding: 0, minWidth: column.Width || 100, ...(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, ...(column.style || {})}} className={className}>
           <CardCellComponent cards={config} cardCell={column} elements={column.elements} updateElement={this.updateCard}/>
         </td>
       )
@@ -171,7 +198,7 @@
         }
       }
       return (
-        <td style={{...style, minWidth: column.Width || 100}} className={className}>
+        <td style={{...style}} className={className}>
           {val}
           {column.Hide === 'true' ? <CloseCircleOutlined style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}}/> : null}
           {column.marks && column.marks.length ? <AntDesignOutlined className="profile"/> : null}
@@ -194,8 +221,6 @@
   }
 
   state = {
-    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
-    appType: sessionStorage.getItem('appType'),
     tableId: '',
     data: [{uuid: Utils.getuuid()}],
     refresh: false,    // 寮哄埗鍒锋柊
@@ -255,7 +280,6 @@
 
     return !is(fromJS(this.state), fromJS(nextState)) ||
       !is(fromJS(config.wrap), fromJS(nextProps.config.wrap)) ||
-      !is(fromJS(config.search), fromJS(nextProps.config.search)) ||
       !is(fromJS(config.action), fromJS(nextProps.config.action)) ||
       config.setting.laypage !== nextProps.config.setting.laypage
   }
@@ -263,7 +287,17 @@
   moveCol = (dragIndex, hoverIndex) => {
     let _columns = fromJS(this.state.columns).toJS()
 
-    _columns.splice(hoverIndex, 0, ..._columns.splice(dragIndex, 1))
+    if (/^sub_/.test(dragIndex) || /^sub_/.test(hoverIndex)) {
+      let sign1 = dragIndex.split('_')
+      let sign2 = hoverIndex.split('_')
+      if (sign1[1] !== sign2[1]) {
+        message.warning('鎷栧姩鍏冪礌涓嶅湪鍚屼竴涓悎骞跺垪涓��')
+        return
+      }
+      this.loopMoveCol(_columns, sign1[1], sign1[2], sign2[2])
+    } else {
+      _columns.splice(hoverIndex, 0, ..._columns.splice(dragIndex, 1))
+    }
 
     this.setState({
       columns: _columns
@@ -272,10 +306,47 @@
     })
   }
 
+  loopMoveCol = (columns, colId, dragIndex, hoverIndex) => {
+    columns.forEach(column => {
+      if (column.type === 'colspan' && column.uuid === colId) {
+        column.subcols.splice(hoverIndex, 0, ...column.subcols.splice(dragIndex, 1))
+      } else if (column.type === 'colspan') {
+        this.loopMoveCol(column.subcols, colId, dragIndex, hoverIndex)
+      }
+    })
+  }
+
+  dropCol = (item, hoverIndex) => {
+    let _columns = fromJS(this.state.columns).toJS()
+
+    let col = { focus: true, uuid: Utils.getuuid(), Width: 120, label: 'label', field: '', type: item.subType, elements: [] }
+    if (col.type === 'colspan') {
+      col.subcols = []
+    } else if (col.type === 'index') {
+      col.label = '搴忓彿'
+    } else if (col.type === 'number') {
+      col.Width = 80
+    }
+
+    let hIndex = +hoverIndex
+
+    if (_columns.length > 0 && hIndex + 1 === _columns.length) {
+      _columns.push(col)
+    } else {
+      _columns.splice(hIndex, 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
@@ -294,6 +365,10 @@
       let config = {...this.props.config, cols: _columns}
       if (btn) {
         config.action = config.action.filter(item => item.uuid !== btn.uuid)
+
+        setTimeout(() => {
+          MKEmitter.emit('revertBtn', config.uuid)
+        }, 200)
       }
 
       this.props.updatecolumn(config)
@@ -309,15 +384,23 @@
   pasteCell = (col, cell, resolve) => {
     resolve({status: true})
     
-    delete cell.copyType
     cell.uuid = Utils.getuuid()
     cell.focus = true
     
-    MKEmitter.emit('cardAddElement', [this.props.config.uuid, col.uuid], cell)
+    if (!cell.eleType) {
+      if (cell.copyType === 'action') {
+        cell.eleType = 'button'
+        cell.width = cell.width || 12
+      } else {
+        cell.eleType = 'text'
+      }
+    }
+    delete cell.copyType
+    
+    MKEmitter.emit('cardAddElement', col.uuid, cell)
   }
 
-  addElement = (col) => {
-    const { config } = this.props
+  addElement = (col, type) => {
     let column = fromJS(col).toJS()
 
     if (column.type === 'colspan') {
@@ -330,31 +413,33 @@
       })
       this.updateCol(column)
     } else if (column.type === 'custom') {
-      let newcard = {uuid: Utils.getuuid(), focus: true, width: 24, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}}
+      if (type === 'button') {
+        let newcard = {
+          uuid: Utils.getuuid(),
+          focus: true,
+          eleType: 'button',
+          label: 'button',
+          OpenType: 'prompt',
+          class: 'primary',
+          intertype: 'system',
+          execSuccess: 'grid',
+          execError: 'never',
+          show: 'link'
+        }
   
-      // 娉ㄥ唽浜嬩欢-娣诲姞鍏冪礌
-      MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard)
-    } else if (column.type === 'action') {
-      let newcard = {
-        uuid: Utils.getuuid(),
-        focus: true,
-        eleType: 'button',
-        label: 'button',
-        OpenType: 'prompt',
-        class: 'primary',
-        intertype: 'system',
-        execSuccess: 'grid',
-        execError: 'never',
-        show: 'link'
+        // 娉ㄥ唽浜嬩欢-娣诲姞鍏冪礌
+        MKEmitter.emit('cardAddElement', column.uuid, newcard)
+      } else {
+        let newcard = {uuid: Utils.getuuid(), focus: true, width: 24, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}}
+    
+        // 娉ㄥ唽浜嬩欢-娣诲姞鍏冪礌
+        MKEmitter.emit('cardAddElement', column.uuid, newcard)
       }
-
-      // 娉ㄥ唽浜嬩欢-娣诲姞鍏冪礌
-      MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard)
     }
   }
 
-  submitCol = (col) => {
-    const { card } = this.state
+  submitCol = (col, resolve) => {
+    const { card, columns } = this.state
 
     col.uuid = card.uuid
     col.isSub = card.isSub === true
@@ -363,10 +448,34 @@
     if (col.type === 'colspan') {
       col.subcols = card.subcols || []
     } else if (col.type === 'custom') {
+      col.style = card.style || {}
       col.elements = card.type === 'custom' ? (card.elements || []) : []
-    } else if (col.type === 'action') {
-      col.elements = card.type === 'action' ? (card.elements || []) : []
     }
+
+    if (!col.field || col.isSub) {
+      resolve()
+    } else {
+      let _cols = []
+      columns.forEach(c => {
+        if (c.field && col.uuid !== c.uuid) {
+          _cols.push(c.field.toLowerCase())
+        }
+      })
+
+      if (_cols.includes(col.field.toLowerCase())) {
+        notification.warning({
+          top: 92,
+          message: '瀛楁宸插瓨鍦紒',
+          duration: 5
+        })
+        return
+      } else {
+        resolve()
+      }
+    }
+
+    window.GLOB.precolumnId = window.GLOB.columnId || ''
+    window.GLOB.columnId = col.uuid
 
     this.setState({card: null})
     this.updateCol(col)
@@ -408,7 +517,6 @@
   }
 
   deleteCol = (col) => {
-    const { appType } = this.state
     let _columns = fromJS(this.state.columns).toJS()
 
     _columns = this.loopDelCol(_columns, col)
@@ -418,19 +526,6 @@
     }, () => {
       this.props.updatecolumn({...this.props.config, cols: _columns})
     })
-
-    if (col.type !== 'action' || appType === 'mob') return
-
-    let uuids = []
-    col.elements && col.elements.forEach(c => {
-      if (appType === 'pc' && c.OpenType !== 'popview') return
-
-      uuids.push(c.uuid)
-    })
-
-    if (uuids.length === 0) return
-    
-    MKEmitter.emit('delButtons', uuids)
   }
 
   updateLineMarks = (vals) => {
@@ -470,13 +565,12 @@
     document.body.removeChild(oInput)
   }
 
-  handlecolumns = (columns, fields, config, isSub) => {
+  handlecolumns = (columns, fields, config, pId) => {
     return columns.map((col, index) => {
       return {
         title: col.label,
         dataIndex: col.uuid,
         align: col.Align,
-        // sorter: !isSub && col.IsSort === 'true',
         sorter: col.IsSort === 'true',
         onCell: () => ({
           column: col,
@@ -485,76 +579,65 @@
           upComponent: this.updateCol
         }),
         onHeaderCell: () => ({
-          index: isSub ? undefined : index,
+          index: pId ? config.uuid + '@sub_' + pId + '_' + index : config.uuid + '@' + index,
           column: col,
+          componentId: config.uuid,
           fields: fields,
           align: col.Align,
           moveCol: this.moveCol,
           updateCol: this.updateCol,
+          dropCol: this.dropCol,
           addElement: this.addElement,
           editColumn: this.editColumn,
           pasteCell: this.pasteCell,
           changeStyle: this.changeStyle,
           deleteCol: this.deleteCol,
         }),
-        children: col.subcols && col.subcols.length ? this.handlecolumns(col.subcols, fields, config, true) : null,
+        children: col.subcols && col.subcols.length ? this.handlecolumns(col.subcols, fields, config, col.uuid) : null,
       }
     })
   }
 
-  syncfield = () => {
-    const { fields } = this.state
-    let columns = fromJS(this.state.columns).toJS()
+  plusColumns = (id, items) => {
+    const { config } = this.props
 
-    columns = columns.filter(c => !c.origin)
+    if (id !== config.uuid) return
 
-    let keys = columns.map(col => col.field)
+    let _columns = fromJS(this.state.columns).toJS()
+    _columns = _columns.filter(a => !a.origin)
 
-    fields.forEach(item => {
-      if (keys.includes(item.field)) return
+    _columns.push(...items)
 
-      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|date/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
-        cell.Width = 80
-      }
-
-      columns.push(cell)
-    })
-
-    const _this = this
-
-    confirm({
-      content: '纭畾鍚屾瀛楁闆嗗悧锛�',
-      onOk() {
-        _this.setState({columns}, () => {
-          _this.props.updatecolumn({..._this.props.config, cols: columns})
-        })
-      },
-      onCancel() {}
+    this.setState({
+      columns: _columns
+    }, () => {
+      this.props.updatecolumn({...config, cols: _columns})
     })
   }
 
-  clear = () => {
-    const _this = this
+  copyFields = () => {
+    const { config } = this.props
+    let m = []
+    let n = []
 
-    confirm({
-      content: '纭畾娓呯┖鏄剧ず鍒楀悧锛�',
-      onOk() {
-        _this.setState({columns: []}, () => {
-          _this.props.updatecolumn({..._this.props.config, cols: []})
-        })
-      },
-      onCancel() {}
+    config.columns.forEach(col => {
+      m.push(`${col.field} ${col.datatype}`)
+      n.push(col.field)
     })
+
+    let oInput = document.createElement('input')
+    oInput.value = `/*${m.join(',')}*/
+      ${n.join(',')}`
+    document.body.appendChild(oInput)
+    oInput.select()
+    document.execCommand('Copy')
+    document.body.removeChild(oInput)
+
+    message.success('澶嶅埗鎴愬姛銆�')
+  }
+
+  componentDidMount () {
+    MKEmitter.addListener('plusColumns', this.plusColumns)
   }
 
   /**
@@ -564,11 +647,12 @@
     this.setState = () => {
       return
     }
+    MKEmitter.removeListener('plusColumns', this.plusColumns)
   }
 
   render() {
     const { config } = this.props
-    const { fields, card, lineMarks, dict, tableId, appType } = this.state
+    const { fields, card, lineMarks, tableId } = this.state
     const components = {
       header: {
         cell: DragableHeaderCol
@@ -579,37 +663,65 @@
     }
 
     const columns = this.handlecolumns(this.state.columns, fields, config)
+    let groups = null
+    if (columns.length > 12) {
+      let g = Math.ceil(columns.length / 8)
+      let n = Math.ceil(columns.length / g)
+      groups = []
+
+      for (let i = 0, len = columns.length; i < len; i += n) {
+        groups.push(columns.slice(i, i + n))
+      }
+    }
 
     return (
-      <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType} ${config.wrap.mode || ''}`} id={tableId}>
+      <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType} ${config.wrap.mode || ''} table-vertical-${config.wrap.vertical || ''} table-col-${columns.length}`} 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} />
-          <FileSyncOutlined title="鍚屾瀛楁闆�" onClick={this.syncfield} />
-          <DeleteOutlined title="娓呯┖鏄剧ず鍒�" onClick={this.clear}/>
+          <InfoOutlined title="澶嶅埗瀛楁" style={{color: 'orange'}} onClick={this.copyFields}/>
         </div>
         <DndProvider>
-          <Table
+          {groups ? groups.map((group, i) => {
+            return <Table
+              key={i}
+              rowKey="uuid"
+              size={config.wrap.size || 'middle'}
+              bordered={config.wrap.bordered !== 'false'}
+              components={components}
+              dataSource={this.state.data}
+              rowSelection={config.wrap.tableType && i === 0 ? { type: 'radio' } : null}
+              columns={group}
+              pagination={i === groups.length - 1 ? {
+                current: 1,
+                pageSize: 10,
+                pageSizeOptions: ['10', '25', '50', '100', '500', '1000'],
+                showSizeChanger: true,
+                total: 58,
+                showTotal: (total, range) => `${range[0]}-${range[1]} 鍏� ${total} 鏉
+              } : false}
+            />
+          }) :
+          (columns.length === 0 ? <DragableEmptyCol dropCol={this.dropCol}/> : <Table
             rowKey="uuid"
             size={config.wrap.size || 'middle'}
-            rowClassName="editable-row"
             bordered={config.wrap.bordered !== 'false'}
             components={components}
             dataSource={this.state.data}
             rowSelection={config.wrap.tableType ? { type: 'radio' } : null}
             columns={columns}
-            pagination={appType !== 'mob' ? {
+            pagination={{
               current: 1,
               pageSize: 10,
               pageSizeOptions: ['10', '25', '50', '100', '500', '1000'],
               showSizeChanger: true,
               total: 58,
               showTotal: (total, range) => `${range[0]}-${range[1]} 鍏� ${total} 鏉
-            } : false}
-          />
-          {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