From 49f09cc6f8ff8c30a75ed1a9d6f510b69b73962a Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 12 十二月 2023 21:05:37 +0800
Subject: [PATCH] 2023-12-12

---
 src/menu/components/table/normal-table/columns/index.jsx |  559 ++++++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 387 insertions(+), 172 deletions(-)

diff --git a/src/menu/components/table/normal-table/columns/index.jsx b/src/menu/components/table/normal-table/columns/index.jsx
index 6a09532..585012a 100644
--- a/src/menu/components/table/normal-table/columns/index.jsx
+++ b/src/menu/components/table/normal-table/columns/index.jsx
@@ -2,21 +2,23 @@
 import PropTypes from 'prop-types'
 import { is, fromJS } from 'immutable'
 import { DndProvider, DragSource, DropTarget } from 'react-dnd'
-import { Table, Form, Popover, Icon, Modal, message } from 'antd'
+import { Table, Popover, Modal, message, Typography } from 'antd'
+import { PlusOutlined, PlusSquareOutlined, 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 coldict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
-const EditColumn = asyncIconComponent(() => import('./editColumn'))
-const MarkColumn = asyncIconComponent(() => import('./markcolumn'))
+const { Paragraph } = Typography
+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 ColsControl = asyncIconComponent(() => import('@/menu/components/share/colsControl'))
+const PasteComponent = asyncIconComponent(() => import('@/components/paste'))
 
 class HeaderCol extends Component {
   deleteCol = () => {
@@ -36,55 +38,82 @@
     this.props.updateCol({...column, marks: vals})
   }
 
+  copycolumn = () => {
+    const { column } = this.props
+
+    let oInput = document.createElement('input')
+    let val = {
+      copyType: 'cols',
+      cols: [column]
+    }
+
+    let srcid = localStorage.getItem(window.location.href.split('#')[0] + 'srcId')
+    if (srcid) {
+      val.$srcId = srcid
+    }
+
+    oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
+    document.body.appendChild(oInput)
+    oInput.select()
+    document.execCommand('Copy')
+    oInput.className = 'oInput'
+    oInput.style.display = 'none'
+
+    message.success('澶嶅埗鎴愬姛銆�')
+
+    document.body.removeChild(oInput)
+  }
+
   shouldComponentUpdate (nextProps, nextState) {
+
+    if (this.props.rowSpan !== nextProps.rowSpan || this.props.colSpan !== nextProps.colSpan) {
+      return true
+    }
 
     if (!nextProps.column) return false
 
     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, deleteCol, index, column, align, fields, children, ...restProps } = this.props
+    const { connectDragSource, connectDropTarget, moveCol, componentId, dropCol, addElement, 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 }}>
-          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
-            <div className="mk-popover-control">
-              {column && ['custom', 'colspan', 'action'].includes(column.type) ?
-                <Icon className="plus" title="娣诲姞" type="plus" onClick={() => this.props.addElement(column)} /> : null
-              }
-              <Icon className="edit" title="缂栬緫" type="edit" onClick={() => this.props.editColumn(column)} />
-              <Icon className="close" title="鍒犻櫎" type="delete" onClick={this.deleteCol} />
-              {column && ['text', 'number'].includes(column.type) ? <MarkColumn dict={coldict} columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null }
-            </div>
-          } trigger="hover">
-            {children}
-          </Popover>
-        </th>),
-      )
-    } else if (column) {
-      return (
-        <th {...restProps}>
-          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
-            <div className="mk-popover-control">
-              {column && column.type === 'custom' ?
-                <Icon className="plus" title="娣诲姞" type="plus" onClick={() => this.props.addElement(column)} /> : null
-              }
-              <Icon className="edit" title="缂栬緫" type="edit" onClick={() => this.props.editColumn(column)} />
-              <Icon className="close" title="鍒犻櫎" type="delete" onClick={this.deleteCol} />
-              {column && ['text', 'number'].includes(column.type) ? <MarkColumn dict={coldict} 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)} />
+            <CopyOutlined title="澶嶅埗鏄剧ず鍒�" style={{color: '#26C281'}} onClick={this.copycolumn} />
+            {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>),
+    )
   }
 }
 
@@ -98,14 +127,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
   },
 }
@@ -118,10 +162,10 @@
   }))(HeaderCol),
 )
 
-class EditableCell extends Component {
-  updateCard = (vals) => {
+class EditableColumnCell extends Component {
+  updateCard = (vals, btn) => {
     const { column } = this.props
-    this.props.upComponent({...column, elements: vals})
+    this.props.upComponent({...column, elements: vals}, btn)
   }
 
   shouldComponentUpdate (nextProps, nextState) {
@@ -131,7 +175,7 @@
 
     return !is(fromJS(column), fromJS(nextProps.column)) ||
       !is(fromJS(config.columns), fromJS(nextProps.config.columns)) ||
-      !is(fromJS(config.search), fromJS(nextProps.config.search))
+      !is(fromJS(config.action), fromJS(nextProps.config.action))
   }
 
   render() {
@@ -139,21 +183,26 @@
 
     if (column && column.type === 'custom') {
       return (
-        <td style={{padding: 0, minWidth: column.Width || 100}} 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={className}>
+        <td style={{padding: 0, ...(column.style || {})}} className={className}>
           <CardCellComponent cards={config} cardCell={column} elements={column.elements} updateElement={this.updateCard}/>
         </td>
       )
     } else if (column) {
+      let val = column.field || ''
+      if (column.type === 'index') {
+        val = '$Index'
+      } else if (column.type === 'formula') {
+        val = column.formula
+        if (column.eval === 'false') {
+          val = val.replace(/\n/ig, '<br/>').replace(/\s/ig, '&nbsp;')
+          val = <span style={{fontWeight: 'inherit'}} dangerouslySetInnerHTML={{__html: val}}></span>
+        }
+      }
       return (
-        <td style={{...style, minWidth: column.Width || 100}} className={className}>
-          {column.field}
-          {column.marks && column.marks.length > 0 ? <Icon className="profile" type="ant-design"/> : null}
+        <td style={{...style}} className={className}>
+          {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 {
@@ -166,26 +215,46 @@
   }
 }
 
-class EditTable extends Component {
+class NormalTableColumns extends Component {
   static propTpyes = {
     config: PropTypes.object,       // 閰嶇疆淇℃伅
     updatecolumn: PropTypes.func    // 鏁版嵁鍙樺寲
   }
 
   state = {
+    appType: sessionStorage.getItem('appType'),
+    tableId: '',
     data: [{uuid: Utils.getuuid()}],
+    refresh: false,    // 寮哄埗鍒锋柊
     columns: [],
     fields: [],
+    editStyleCard: null,
     lineMarks: []
   }
 
   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('')
+    }) ()
+
     this.setState({
+      tableId,
       columns: fromJS(config.cols).toJS(),
       fields: fromJS(config.columns).toJS(),
       lineMarks: config.lineMarks ? fromJS(config.lineMarks).toJS() : []
+    }, () => {
+      const element = document.getElementById(tableId)
+      element && element.style.setProperty('--mk-table-border-color', config.wrap.borderColor || '#e8e8e8')
+      element && element.style.setProperty('--mk-table-color', config.wrap.color || 'rgba(0, 0, 0, 0.65)')
+      element && element.style.setProperty('--mk-table-font-size', config.wrap.fontSize || '14px')
+      element && element.style.setProperty('--mk-table-font-weight', config.wrap.fontWeight || 'normal')
     })
   }
 
@@ -193,28 +262,39 @@
     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 (!is(fromJS(this.props.config.wrap), fromJS(nextProps.config.wrap))) {
+      const element = document.getElementById(this.state.tableId)
+      element && element.style.setProperty('--mk-table-border-color', nextProps.config.wrap.borderColor || '#e8e8e8')
+      element && element.style.setProperty('--mk-table-color', nextProps.config.wrap.color || 'rgba(0, 0, 0, 0.65)')
+      element && element.style.setProperty('--mk-table-font-size', nextProps.config.wrap.fontSize || '14px')
+      element && element.style.setProperty('--mk-table-font-weight', nextProps.config.wrap.fontWeight || 'normal')
     }
   }
-  shouldComponentUpdate (nextProps, nextState) {
-    const { config } = this.props
 
-    return !is(fromJS(this.state), fromJS(nextState)) ||
-      !is(fromJS(config.wrap), fromJS(nextProps.config.wrap)) ||
-      !is(fromJS(config.search), fromJS(nextProps.config.search)) ||
-      config.setting.laypage !== nextProps.config.setting.laypage
+  shouldComponentUpdate (nextProps, nextState) {
+    return !is(fromJS(this.state), fromJS(nextState)) || !is(fromJS(this.props.config), fromJS(nextProps.config))
   }
 
   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
@@ -223,34 +303,64 @@
     })
   }
 
-  updateCol = (col) => {
+  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()
 
-    if (col.isSub) {
-      _columns = _columns.map(column => {
-        if (column.type === 'colspan') {
-          column.subcols = column.subcols.map(item => {
-            if (item.uuid === col.uuid) {
-              return col
-            }
-            return item
-          })
-        }
-        return column
-      })
-    } else {
-      _columns = _columns.map(column => {
-        if (column.uuid === col.uuid) {
-          return col
-        }
-        return column
-      })
+    let col = { focus: true, uuid: Utils.getuuid(), label: 'label', field: '', type: item.subType, elements: [] }
+    if (col.type === 'colspan') {
+      col.subcols = []
+    } 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)
+      }
+      if (column.uuid === col.uuid) {
+        return col
+      }
+      return column
+    })
+  }
+
+  updateCol = (col, btn) => {
+    let _columns = fromJS(this.state.columns).toJS()
+    _columns = this.loopCol(_columns, col)
 
     this.setState({
       columns: _columns,
     }, () => {
-      this.props.updatecolumn({...this.props.config, cols: _columns})
+      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)
     })
   }
 
@@ -260,8 +370,27 @@
     })
   }
 
-  addElement = (col) => {
-    const { config } = this.props
+  pasteCell = (col, cell, resolve) => {
+    resolve({status: true})
+    
+    cell.uuid = Utils.getuuid()
+    cell.focus = true
+
+    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, type) => {
     let column = fromJS(col).toJS()
 
     if (column.type === 'colspan') {
@@ -274,27 +403,28 @@
       })
       this.updateCol(column)
     } else if (column.type === 'custom') {
-      let newcard = {uuid: Utils.getuuid(), focus: true, eleType: 'text', datatype: 'dynamic'}
+      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',
-        $type: 'tableButton'
+        // 娉ㄥ唽浜嬩欢-娣诲姞鍏冪礌
+        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)
     }
   }
 
@@ -308,13 +438,31 @@
     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 || []) : []
     }
+
+    window.GLOB.precolumnId = window.GLOB.columnId || ''
+    window.GLOB.columnId = col.uuid
 
     this.setState({card: null})
     this.updateCol(col)
+  }
+
+  changeStyle = (col) => {
+    this.setState({
+      editStyleCard: fromJS(col).toJS()
+    })
+
+    MKEmitter.emit('changeStyle', ['font', 'padding'], col.style || {}, this.getStyle)
+  }
+
+  getStyle = (style) => {
+    const { editStyleCard } = this.state
+
+    let _card = {...editStyleCard, style}
+    
+    this.updateCol(_card)
   }
 
   cancelCol = () => {
@@ -327,20 +475,19 @@
     this.setState({card: null})
   }
 
+  loopDelCol = (columns, col) => {
+    return columns.filter(column => {
+      if (column.type === 'colspan') {
+        column.subcols = this.loopDelCol(column.subcols, col)
+      }
+      return column.uuid !== col.uuid
+    })
+  }
+
   deleteCol = (col) => {
     let _columns = fromJS(this.state.columns).toJS()
 
-    if (col.isSub) {
-      _columns = _columns.map(column => {
-        if (column.type !== 'colspan') return column
-        if (column.subcols && column.subcols.length > 0) {
-          column.subcols = column.subcols.filter(item => item.uuid !== col.uuid)
-        }
-        return column
-      })
-    } else {
-      _columns = _columns.filter(column => column.uuid !== col.uuid)
-    }
+    _columns = this.loopDelCol(_columns, col)
 
     this.setState({
       columns: _columns
@@ -365,8 +512,13 @@
 
     let oInput = document.createElement('input')
     let val = {
-      copyType: 'columns',
-      columns: columns
+      copyType: 'cols',
+      cols: columns.filter(col => !col.origin)
+    }
+
+    let srcid = localStorage.getItem(window.location.href.split('#')[0] + 'srcId')
+    if (srcid) {
+      val.$srcId = srcid
     }
 
     oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
@@ -381,22 +533,11 @@
     document.body.removeChild(oInput)
   }
 
-  render() {
-    const { config } = this.props
-    const { fields, card, lineMarks } = this.state
-    const components = {
-      header: {
-        cell: DragableHeaderCol
-      },
-      body: {
-        cell: EditableCell
-      }
-    }
-    
-    const columns = this.state.columns.map((col, index) => {
+  handlecolumns = (columns, fields, config, pId) => {
+    return columns.map((col, index) => {
       return {
         title: col.label,
-        dataIndex: col.field,
+        dataIndex: col.uuid,
         align: col.Align,
         sorter: col.IsSort === 'true',
         onCell: () => ({
@@ -405,69 +546,143 @@
           config: config,
           upComponent: this.updateCol
         }),
-        children: col.subcols && col.subcols.length > 0 ? col.subcols.map(cell => ({
-          align: col.Align,
-          title: cell.label,
-          key: cell.uuid,
-          onCell: () => ({
-            column: cell,
-            width: cell.Width,
-            config: config,
-            upComponent: this.updateCol
-          }),
-          onHeaderCell: () => ({
-            column: cell,
-            fields: fields,
-            align: cell.Align,
-            updateCol: this.updateCol,
-            addElement: this.addElement,
-            editColumn: this.editColumn,
-            deleteCol: this.deleteCol,
-          })
-        })) : null,
         onHeaderCell: () => ({
-          index,
+          index: pId ? config.uuid + '@sub_' + pId + '_' + index : config.uuid + '@' + index,
           column: col,
+          componentId: config.uuid,
           fields: fields,
           align: col.Align,
           moveCol: this.moveCol,
+          dropCol: this.dropCol,
           updateCol: this.updateCol,
           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, col.uuid) : null,
       }
     })
+  }
+
+  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|date/ig.test(item.datatype)) {
+        cell.type = 'text'
+        cell.rowspan = 'false'
+        cell.textFormat = 'none'
+      } else {
+        cell.type = 'number'
+        cell.format = 'none'
+        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() {}
+    })
+  }
+
+  clear = () => {
+    const _this = this
+
+    confirm({
+      content: '纭畾娓呯┖鏄剧ず鍒楀悧锛�',
+      onOk() {
+        _this.setState({columns: []}, () => {
+          _this.props.updatecolumn({..._this.props.config, cols: []})
+        })
+      },
+      onCancel() {}
+    })
+  }
+
+  addColumns = () => {
+    const { config } = this.props
+
+    MKEmitter.emit('addColumns', config.uuid)
+  }
+
+  /**
+   * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆
+   */
+  componentWillUnmount () {
+    this.setState = () => {
+      return
+    }
+  }
+
+  render() {
+    const { config } = this.props
+    const { fields, card, lineMarks, tableId, appType } = this.state
+    const components = {
+      header: {
+        cell: DragableHeaderCol
+      },
+      body: {
+        cell: EditableColumnCell
+      }
+    }
+
+    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} ${config.wrap.mode || ''} table-vertical-${config.wrap.vertical || ''} table-col-${columns.length}`} id={tableId}>
         <div className="col-control">
-          <Icon title="澶嶅埗" type="copy" onClick={this.copycolumn} />
-          <MarkColumn dict={coldict} columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} />
+          <PlusOutlined style={{color: '#26C281'}} title="娣诲姞鍒�" onClick={this.addColumns}/>
+          <CopyOutlined title="澶嶅埗鏄剧ず鍒�" onClick={this.copycolumn} />
+          <MarkColumn columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} />
+          {appType !== 'mob' ? <ColsControl config={config} onSubmit={this.props.updatecolumn}/> : null}
+          <FileSyncOutlined title="鍚屾瀛楁闆�" onClick={this.syncfield} />
+          <DeleteOutlined title="娓呯┖鏄剧ず鍒�" onClick={this.clear}/>
         </div>
         <DndProvider>
           <Table
             rowKey="uuid"
+            size={config.wrap.size || 'middle'}
             bordered={config.wrap.bordered !== 'false'}
             components={components}
             dataSource={this.state.data}
             rowSelection={config.wrap.tableType ? { type: 'radio' } : null}
             columns={columns}
-            rowClassName="editable-row"
-            pagination={{
+            pagination={appType !== 'mob' ? {
               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={coldict} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/>
+        <EditColumn column={card} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/>
       </div>
     )
   }
 }
 
-export default Form.create()(EditTable)
\ No newline at end of file
+export default NormalTableColumns
\ No newline at end of file

--
Gitblit v1.8.0