From c2580fb8de3bdaabb4179b0ce0fcd2fbac802441 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 01 三月 2023 00:49:14 +0800
Subject: [PATCH] 2023-03-01

---
 src/menu/components/table/edit-table/columns/index.jsx |  367 ++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 243 insertions(+), 124 deletions(-)

diff --git a/src/menu/components/table/edit-table/columns/index.jsx b/src/menu/components/table/edit-table/columns/index.jsx
index c347313..afa1eba 100644
--- a/src/menu/components/table/edit-table/columns/index.jsx
+++ b/src/menu/components/table/edit-table/columns/index.jsx
@@ -2,20 +2,22 @@
 import PropTypes from 'prop-types'
 import { is, fromJS } from 'immutable'
 import { DndProvider, DragSource, DropTarget } from 'react-dnd'
-import { Table, Popover, Icon, Modal, message } from 'antd'
+import { Table, Popover, Modal, message, Button, 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 EditColumn = asyncIconComponent(() => import('./editColumn'))
+const { Paragraph } = Typography
+const EditColumn = asyncComponent(() => import('./editColumn'))
+const TableVerify = asyncComponent(() => import('./tableIn'))
 const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent'))
 const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent'))
+const PasteComponent = asyncIconComponent(() => import('@/components/paste'))
 
 class HeaderCol extends Component {
   deleteCol = () => {
@@ -41,7 +43,7 @@
       return true
     }
 
-    if (!nextProps.column) return false
+    if (!nextProps.column) return true
 
     return !is(fromJS(this.props.column), fromJS(nextProps.column)) ||
       !is(fromJS(this.props.fields), fromJS(nextProps.fields)) ||
@@ -49,20 +51,34 @@
   }
 
   render() {
-    const { connectDragSource, connectDropTarget, moveCol, addElement, updateCol, editColumn, 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 (!column) return (
+      <th {...restProps} index={index}>
+        {children}
+      </th>
+    )
 
     if (index !== undefined) {
+      let style = {cursor: 'move', textAlign: align}
+      if (column.Width) {
+        style.width = column.Width
+        style.minWidth = column.Width
+      }
+
       return connectDragSource(
-        connectDropTarget(<th {...restProps} index={index} style={{ cursor: 'move', textAlign: align }} onDoubleClick={() => column && this.props.editColumn(column)}>
+        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">
-              {column && ['custom', 'colspan', 'action'].includes(column.type) ?
-                <Icon className="plus" title="娣诲姞" type="plus" onClick={() => this.props.addElement(column)} /> : null
+            <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}>
+              {['custom', 'colspan', 'action'].includes(column.type) ?
+                <PlusOutlined className="plus" title="娣诲姞" onClick={() => this.props.addElement(column)} /> : null
               }
-              <Icon className="edit" title="缂栬緫" type="edit" onClick={() => this.props.editColumn(column)} />
-              {column && column.type === 'custom' ? <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => this.props.changeStyle(column)} type="font-colors" /> : null}
-              <Icon className="close" title="鍒犻櫎" type="delete" onClick={this.deleteCol} />
-              {column && ['text', 'number'].includes(column.type) ? <MarkColumn columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : 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}
+              {column.type === 'action' ? <PasteComponent options={['action']} updateConfig={(res, resolve) => this.props.pasteCell(column, res, resolve)} /> : null}
+              {column.type === 'custom' || column.type === 'action' ? <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}
@@ -70,24 +86,29 @@
         </th>),
       )
     } else if (column) {
+      let style = {textAlign: align}
+      if (column.Width) {
+        style.width = column.Width
+        style.minWidth = column.Width
+      }
+
       return (
-        <th {...restProps} key={column.uuid} onDoubleClick={() => this.props.editColumn(column)}>
+        <th {...restProps} style={style} 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">
-              {column && ['custom', 'colspan'].includes(column.type) ?
-                <Icon className="plus" title="娣诲姞" type="plus" onClick={() => this.props.addElement(column)} /> : null
+            <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}>
+              {['custom', 'colspan'].includes(column.type) ?
+                <PlusOutlined className="plus" title="娣诲姞" 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 columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : 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>)
     }
   }
 }
@@ -102,10 +123,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
     }
 
@@ -135,8 +160,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() {
@@ -144,22 +168,32 @@
 
     if (column && column.type === 'custom') {
       return (
-        <td style={{padding: 0, minWidth: column.Width || 100, ...(column.style || {})}} 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 && column.type === 'action') {
       return (
-        <td style={{padding: '0 5px', textAlign: column.Align, minWidth: column.Width || 100}} className={'action-column ' + className}>
+        <td style={{padding: 0, textAlign: column.Align, ...(column.style || {})}} className={'action-column ' + 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.type === 'index' ? '$Index' : '')}
-          {column.Hide === 'true' ? <Icon style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}} type="close-circle" /> : null}
-          {column.marks && column.marks.length ? <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 {
@@ -179,8 +213,6 @@
   }
 
   state = {
-    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
-    appType: sessionStorage.getItem('appType'),
     tableId: '',
     data: [{uuid: Utils.getuuid()}],
     refresh: false,    // 寮哄埗鍒锋柊
@@ -202,18 +234,17 @@
       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() : []
+    }, () => {
+      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')
     })
   }
 
@@ -227,11 +258,12 @@
       }
     } 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)
+    } 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')
     }
   }
 
@@ -240,7 +272,7 @@
 
     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.submit), fromJS(nextProps.config.submit)) ||
       !is(fromJS(config.action), fromJS(nextProps.config.action)) ||
       config.setting.laypage !== nextProps.config.setting.laypage
   }
@@ -257,10 +289,36 @@
     })
   }
 
+  dropCol = (item, hoverIndex) => {
+    let _columns = fromJS(this.state.columns).toJS()
+    let type = item.subType
+
+    if (!['text', 'number', 'textarea', 'custom', 'action', 'formula', 'index', 'colspan'].includes(item.subType)) {
+      type = 'text'
+    }
+
+    let col = { focus: true, uuid: Utils.getuuid(), label: 'label', field: '', type: type, 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
@@ -279,6 +337,10 @@
       let config = {...this.props.config, cols: _columns}
       if (btn) {
         config.action = config.action.filter(item => item.uuid !== btn.uuid)
+
+        setTimeout(() => {
+          MKEmitter.emit('revert', config.uuid)
+        }, 200)
       }
 
       this.props.updatecolumn(config)
@@ -291,8 +353,17 @@
     })
   }
 
+  pasteCell = (col, cell, resolve) => {
+    resolve({status: true})
+    
+    delete cell.copyType
+    cell.uuid = Utils.getuuid()
+    cell.focus = true
+    
+    MKEmitter.emit('cardAddElement', col.uuid, cell)
+  }
+
   addElement = (col) => {
-    const { config } = this.props
     let column = fromJS(col).toJS()
 
     if (column.type === 'colspan') {
@@ -305,10 +376,10 @@
       })
       this.updateCol(column)
     } else if (column.type === 'custom') {
-      let newcard = {uuid: Utils.getuuid(), focus: true, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}}
+      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(),
@@ -320,27 +391,28 @@
         intertype: 'system',
         execSuccess: 'grid',
         execError: 'never',
-        show: 'link',
-        $type: 'tableButton'
+        show: 'link'
       }
 
       // 娉ㄥ唽浜嬩欢-娣诲姞鍏冪礌
-      MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard)
+      MKEmitter.emit('cardAddElement', column.uuid, newcard)
     }
   }
 
   submitCol = (col) => {
     const { card } = this.state
-
+    
     col.uuid = card.uuid
     col.isSub = card.isSub === true
     col.marks = card.marks || []
-    
+
     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.style = card.style || {}
       col.elements = card.type === 'action' ? (card.elements || []) : []
     }
 
@@ -353,13 +425,25 @@
       editStyleCard: fromJS(col).toJS()
     })
 
-    MKEmitter.emit('changeStyle', [col.uuid], ['font', 'padding'], col.style || {})
+    MKEmitter.emit('changeStyle', ['font', 'padding'], col.style || {}, this.getStyle)
   }
 
-  getStyle = (comIds, style) => {
-    const { editStyleCard } = this.state
+  changeSubmitStyle = () => {
+    const { config } = this.props
 
-    if (!editStyleCard || comIds[0] !== editStyleCard.uuid || comIds.length !== 1) return
+    MKEmitter.emit('changeStyle', ['font', 'background', 'border', 'margin', 'padding'], config.submit.style || {}, this.getSubmitStyle)
+  }
+
+  getSubmitStyle = (style) => {
+    const { config } = this.props
+
+    let submit = {...config.submit, style}
+
+    this.props.updatecolumn({...config, submit: submit})
+  }
+
+  getStyle = (style) => {
+    const { editStyleCard } = this.state
 
     let _card = {...editStyleCard, style}
     
@@ -386,7 +470,6 @@
   }
 
   deleteCol = (col) => {
-    const { appType } = this.state
     let _columns = fromJS(this.state.columns).toJS()
 
     _columns = this.loopDelCol(_columns, col)
@@ -396,19 +479,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) => {
@@ -431,6 +501,11 @@
       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)))
     document.body.appendChild(oInput)
     oInput.select()
@@ -441,36 +516,6 @@
     message.success('澶嶅埗鎴愬姛銆�')
 
     document.body.removeChild(oInput)
-  }
-
-  handlecolumns = (columns, fields, config, isSub) => {
-    return columns.map((col, index) => {
-      return {
-        title: col.label,
-        dataIndex: col.uuid,
-        align: col.Align,
-        sorter: !isSub && col.IsSort === 'true',
-        onCell: () => ({
-          column: col,
-          width: col.Width,
-          config: config,
-          upComponent: this.updateCol
-        }),
-        onHeaderCell: () => ({
-          index: isSub ? undefined : index,
-          column: col,
-          fields: fields,
-          align: col.Align,
-          moveCol: this.moveCol,
-          updateCol: this.updateCol,
-          addElement: this.addElement,
-          editColumn: this.editColumn,
-          changeStyle: this.changeStyle,
-          deleteCol: this.deleteCol,
-        }),
-        children: col.subcols && col.subcols.length ? this.handlecolumns(col.subcols, fields, config, true) : null,
-      }
-    })
   }
 
   syncfield = () => {
@@ -484,9 +529,9 @@
     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' }
+      let cell = { uuid: Utils.getuuid(), label: item.label, field: item.field, Align: 'left', Hide: 'false', IsSort: 'false', Width: 120, blacklist: [], postfix: '', prefix: '', linkmenu: [], marks: [], perspective: 'linkmenu' }
       
-      if (/Nvarchar/ig.test(item.datatype)) {
+      if (/Nvarchar|date/ig.test(item.datatype)) {
         cell.type = 'text'
         cell.rowspan = 'false'
         cell.textFormat = 'none'
@@ -495,6 +540,7 @@
         cell.format = 'none'
         cell.sum = 'false'
         cell.decimal = item.decimal || 0
+        cell.Width = 80
       }
 
       columns.push(cell)
@@ -527,6 +573,19 @@
     })
   }
 
+  verifySubmit = () => {
+    const { config } = this.props
+    
+    this.verifyRef.handleConfirm().then(res => {
+      res.style = config.submit.style || {}
+      this.setState({
+        visible: false
+      }, () => {
+        this.props.updatecolumn({...config, submit: res})
+      })
+    })
+  }
+
   componentDidMount () {
     MKEmitter.addListener('submitStyle', this.getStyle)
   }
@@ -541,9 +600,46 @@
     MKEmitter.removeListener('submitStyle', this.getStyle)
   }
 
+  handlecolumns = (columns, fields, config, isSub) => {
+    return columns.map((col, index) => {
+      let title = col.label
+      if (col.editable === 'true') {
+        title = <span>{col.label}<EditOutlined style={{position: 'absolute', bottom: 0, right: 0, color: '#1890ff', opacity: '0.7'}}/></span>
+      }
+
+      return {
+        title: title,
+        dataIndex: col.uuid,
+        align: col.Align,
+        sorter: col.IsSort === 'true',
+        onCell: () => ({
+          column: col,
+          width: col.Width,
+          config: config,
+          upComponent: this.updateCol
+        }),
+        onHeaderCell: () => ({
+          index: isSub ? undefined : index,
+          column: col,
+          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, true) : null,
+      }
+    })
+  }
+
   render() {
     const { config } = this.props
-    const { fields, card, lineMarks, dict, tableId } = this.state
+    const { fields, card, lineMarks, tableId, visible } = this.state
     const components = {
       header: {
         cell: DragableHeaderCol
@@ -553,34 +649,39 @@
       }
     }
 
+    let rowSelection = null
+    if (config.wrap.tableType) {
+      rowSelection = {
+        type: config.wrap.tableType === 'radio' ? 'radio' : 'checkbox',
+      }
+    }
+
     const columns = this.handlecolumns(this.state.columns, fields, config)
 
-    let style = {}
-    if (config.wrap.color) {
-      style.color = config.wrap.color
-    }
-    if (config.wrap.fontSize) {
-      style.fontSize = config.wrap.fontSize
-    }
-
     return (
-      <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType} ${config.wrap.mode || ''}`} id={tableId}>
+      <div className={`edit-table-columns ${config.setting.laypage} ${config.wrap.mode || ''} table-vertical-${config.wrap.vertical || ''}`} id={tableId}>
         <div className="col-control">
-          <Icon title="澶嶅埗鏄剧ず鍒�" type="copy" onClick={this.copycolumn} />
+          <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
+            <div className="mk-popover-control">
+              <EditOutlined className="edit" title="缂栬緫" onClick={() => this.setState({visible: true})} />
+              <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeSubmitStyle}/>
+            </div>
+          } trigger="hover">
+            <Button className="submit-btn" style={config.submit.style} onDoubleClick={() => this.setState({visible: true})} type="primary">鎻愪氦</Button>
+          </Popover>
+          <CopyOutlined title="澶嶅埗鏄剧ず鍒�" onClick={this.copycolumn} />
           <MarkColumn columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} />
-          <Icon title="鍚屾瀛楁闆�" type="file-sync" onClick={this.syncfield} />
-          <Icon title="娓呯┖鏄剧ず鍒�" type="delete" onClick={this.clear}/>
+          <FileSyncOutlined title="鍚屾瀛楁闆�" onClick={this.syncfield} />
+          <DeleteOutlined title="娓呯┖鏄剧ず鍒�" onClick={this.clear}/>
         </div>
         <DndProvider>
           <Table
             rowKey="uuid"
             size={config.wrap.size || 'middle'}
-            rowClassName="editable-row"
-            style={style}
             bordered={config.wrap.bordered !== 'false'}
+            rowSelection={rowSelection}
             components={components}
             dataSource={this.state.data}
-            rowSelection={config.wrap.tableType ? { type: 'radio' } : null}
             columns={columns}
             pagination={{
               current: 1,
@@ -592,7 +693,25 @@
             }}
           />
         </DndProvider>
-        <EditColumn column={card} dict={dict} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/>
+        <EditColumn column={card} columns={this.state.columns} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/>
+        <Modal
+          wrapClassName="model-table-action-verify-modal"
+          title={'缂栬緫'}
+          visible={visible}
+          width={'75vw'}
+          maskClosable={false}
+          onOk={this.verifySubmit}
+          onCancel={() => { this.setState({ visible: false }) }}
+          destroyOnClose
+        >
+          <TableVerify
+            card={config.submit}
+            setting={config.setting}
+            cols={config.cols}
+            columns={config.columns}
+            wrappedComponentRef={(inst) => this.verifyRef = inst}
+          />
+        </Modal>
       </div>
     )
   }

--
Gitblit v1.8.0