2019-11-19

king

2019-11-19 233709a44a2f5cfff9b8fb955ebcdc6889c0d40b

2019-11-19

 src/api/index.js

@@ -21,8 +21,19 @@
  return Promise.reject(error)
})

const setCurrentUrl = () => {
  if (!!(window.history && window.history.pushState)) {
    window.history.replaceState(null, null, window.location.href.split('#')[0] + '#/login')
    window.location.reload()
  }
}

axios.interceptors.response.use((response) => {
  return Promise.resolve(response.data)
  if (response.data.ErrCode === 'LoginError') {
    setCurrentUrl()
  } else {
    return Promise.resolve(response.data)
  }
}, (error) => {
  return Promise.reject(error)
})

 src/components/sidemenu/comtableconfig/actionform/index.jsx

@@ -4,6 +4,9 @@
import './index.scss'

const btnIcons = [{
  MenuID: '',
  text: 'unset'
}, {
  MenuID: 'plus',
  text: 'plus'
}, {
@@ -72,9 +75,9 @@
        _options = ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class']
      } else {
        if (this.state.interType === 'outer') {
          _options = ['label', 'OpenType', 'intertype', 'interface', 'func', 'callbackFunc', 'Ot', 'icon', 'class']
          _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'interface', 'outerFunc', 'callbackFunc', 'Ot', 'icon', 'class']
        } else {
          _options = ['label', 'OpenType', 'intertype', 'func', 'Ot', 'icon', 'class']
          _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'Ot', 'icon', 'class']
        }
      }
      this.setState({
@@ -92,9 +95,9 @@
    if (key === 'intertype') {
      let _options = null
      if (value === 'outer') {
        _options = ['label', 'OpenType', 'intertype', 'interface', 'func', 'callbackFunc', 'Ot', 'icon', 'class']
        _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'interface', 'outerFunc', 'callbackFunc', 'Ot', 'icon', 'class']
      } else {
        _options = ['label', 'OpenType', 'intertype', 'func', 'Ot', 'icon', 'class']
        _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'Ot', 'icon', 'class']
      }
      this.setState({
        interType: value,
@@ -109,7 +112,6 @@
  getFields() {
    const { getFieldDecorator } = this.props.form
    const fields = []
    console.log(this.state.formlist)
    this.state.formlist.forEach((item, index) => {
      if (item.hidden) return

@@ -150,7 +152,7 @@
                >
                  {item.options.map(option =>
                    <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}>
                      {item.key === 'icon' && <Icon type={option.MenuID} />} {option.text}
                      {item.key === 'icon' && option.MenuID && <Icon type={option.MenuID} />} {option.text}
                    </Select.Option>
                  )}
                </Select>
@@ -216,9 +218,9 @@
      _options = ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class']
    } else {
      if (_intertype === 'outer') {
        _options = ['label', 'OpenType', 'intertype', 'interface', 'func', 'callbackFunc', 'Ot', 'icon', 'class']
        _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'interface', 'outerFunc', 'callbackFunc', 'Ot', 'icon', 'class']
      } else {
        _options = ['label', 'OpenType', 'intertype', 'func', 'Ot', 'icon', 'class']
        _options = ['label', 'OpenType', 'intertype', 'innerFunc', 'Ot', 'icon', 'class']
      }
    }
    this.setState({

 src/components/sidemenu/comtableconfig/columnform/index.jsx

@@ -104,7 +104,6 @@
            </Form.Item>
          </Col>
        )
        
      }
    })
    return fields

 src/components/sidemenu/comtableconfig/dragelement/card.jsx

@@ -5,7 +5,7 @@
import ItemTypes from './itemtypes'
import './index.scss'

const Card = ({ id, type, card, moveCard, findCard, editCard, hasDrop }) => {
const Card = ({ id, type, card, moveCard, findCard, editCard, copyCard, hasDrop }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes[type], id, originalIndex },
@@ -34,6 +34,11 @@
  const edit = () => {
    editCard(id)
  }

  const copy = () => {
    copyCard(id)
  }

  return (
    <div className="page-card" style={type === 'columns' ? { flex: card.Width, opacity: opacity} : { opacity: opacity}}>
      <div ref={node => drag(drop(node))}>
@@ -77,6 +82,7 @@
        }
      </div>
      <Icon className="edit" type="edit" onClick={edit} />
      {type === 'action' && <Icon className="edit copy" type="copy" onClick={copy} />}
    </div>
  )
}

 src/components/sidemenu/comtableconfig/dragelement/index.jsx

@@ -30,6 +30,36 @@
    handleMenu(card)
  }

  const copyCard = id => {
    const { card } = findCard(id)
    let copycard = JSON.parse(JSON.stringify(card))
    copycard.uuid = Utils.getuuid()
    copycard.origin = false
    let names = cards.map(car => { return car.label })
    let index = 1
    let origin = copycard.label.split('(copy')[0] || 'button'
    let label = origin + '(copy)'
    while (names.includes(label)) {
      label = origin + `(copy${index})`
      index++
    }

    copycard.label = label
    
    let indexes = cards.map(car => { return car.id })
    let newid = 0
    while (indexes.includes(newid)) {
      newid++
    }
    copycard.id = newid

    const { index: overIndex } = findCard(`${card.id}`)

    const _cards = update(cards, { $splice: [[overIndex + 1, 0, copycard]] })
    setCards(_cards)
    handleList({action: _cards})
  }

  const hasDrop = (item) => {
    target = item
  }
@@ -40,31 +70,42 @@
      if (item.hasOwnProperty('originalIndex')) {
        return
      }

      let newcard = {}
      if (item.type === 'search') {
        newcard.uuid = Utils.getuuid()
        newcard.label = 'fieldName'
        newcard.field = 'field'
        newcard.field = ''
        newcard.initval = ''
        newcard.type = item.subType
        if (item.subType === 'select') {
          newcard.resourceType = 0
          newcard.options = []
          newcard.dataSource = ''
        }
        newcard.resourceType = '0'
        newcard.options = []
        newcard.dataSource = ''
        newcard.setAll = 'false'
        newcard.linkField = ''
        newcard.valueField = ''
        newcard.valueText = ''
        newcard.orderBy = ''
        newcard.orderType = 'asc'
        newcard.display = 'dropdown'
      } else if (item.type === 'action') {
        newcard.uuid = Utils.getuuid()
        newcard.label = 'button'
        newcard.func = ''
        newcard.Ot = 'notRequired'
        newcard.innerFunc = ''
        newcard.outerFunc = ''
        newcard.Ot = 'requiredSgl'
        newcard.OpenType = item.subType
        newcard.icon = 'plus'
        newcard.icon = ''
        newcard.class = 'green'
        newcard.intertype = 'inner'
        newcard.interface = ''
        newcard.callbackFunc = ''
        newcard.pageTemplate = ''
      } else if (item.type === 'columns') {
        newcard.uuid = Utils.getuuid()
        newcard.Align = 'left'
        newcard.label = 'fieldName'
        newcard.field = 'field'
        newcard.field = ''
        newcard.Hide = 'false'
        newcard.IsSort = item.subType
        newcard.Width = 120
@@ -98,8 +139,8 @@
    }
  })
  let columns = []
  if (type === 'columns' && cards.length > 12) {
    let number = Math.ceil(cards.length / Math.ceil(cards.length / 12))
  if (type === 'columns' && cards.length > 10) {
    let number = Math.ceil(cards.length / Math.ceil(cards.length / 10))
    for (let i = 0, len = cards.length; i < len; i += number) {
      columns.push(cards.slice(i, i + number))
    }
@@ -117,6 +158,7 @@
          card={card}
          moveCard={moveCard}
          editCard={editCard}
          copyCard={copyCard}
          findCard={findCard}
          hasDrop={hasDrop}
        />

 src/components/sidemenu/comtableconfig/editable/index.jsx

@@ -9,13 +9,13 @@
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);
)

const EditableFormRow = Form.create()(EditableRow)

class EditableCell extends Component {
  state = {
    editing: false,
    editing: false
  }

  toggleEdit = () => {
@@ -41,7 +41,6 @@

  renderCell = form => {
    this.form = form
    // const { children, dataIndex, record, title } = this.props
    const { children, dataIndex, record } = this.props
    const { editing } = this.state
    return editing ? (
@@ -50,7 +49,6 @@
          rules: [
            {
              required: true,
              // message: `${title} is required.`,
              message: 'NOT NULL.',
            },
          ],

 src/components/sidemenu/comtableconfig/editable/index.scss

@@ -33,8 +33,4 @@
      margin: 0;
    }
  }
  
  // .editable-cell-value-wrap:hover {
  //   padding: 0px;
  // }
}

 src/components/sidemenu/comtableconfig/editcard/index.jsx

New file
@@ -0,0 +1,87 @@
import React, {Component} from 'react'
import { Row, Col, Icon, Radio } from 'antd'
import './index.scss'

class EditCardCell extends Component {
  constructor(props) {
    super(props)

    this.state = {
      selected: false,
      card: props.card
    }
  }

  changeSelect = () => {
    this.setState({
      selected: !this.state.selected
    })
  }

  changeType = (e) => {
    console.log(e.target.value)
    const { card } = this.state
    this.setState({
      card: {...card, type: e.target.value}
    })
  }

  render() {
    const { card } = this.state
    return (
      <div className={'ant-card ant-card-bordered ' + (this.state.selected ? 'selected' : '')} >
        <div className="base" onClick={this.changeSelect}>
          <Icon type="check" />
          <p>字段名: {card.label}</p>
          <p>提示文字: {card.field}</p>
        </div>
        <label>类型:</label>
        <Radio.Group onChange={this.changeType} value={this.state.card.type} disabled={!this.state.selected}>
          <Radio value="text">text</Radio>
          <Radio value="select">select</Radio>
          <Radio value="date">date</Radio>
        </Radio.Group>
      </div>
    )
  }
}

class EditCard extends Component {
  constructor(props) {
    super(props)

    this.state = {
      dataSource: props.data,
      title: props.title
    }
  }

  getSelectedCard = () => {
    let box = []
    this.state.dataSource.forEach((item, index) => {
      if (this.refs['cellCard' + index].state.selected) {
        box.push(this.refs['cellCard' + index].state.card)
      }
    })
    return box
  }

  render() {
    const { dataSource, title } = this.state

    return (
      <div className="common-modal-edit-card">
        {title && <h4>{title}</h4>}
        <Row>
          {dataSource.map((item, index) => (
            <Col key={index} span={8}>
              <EditCardCell ref={'cellCard' + index} card={item} />
            </Col>
          ))}
        </Row>
      </div>
    )
  }
}

export default EditCard

 src/components/sidemenu/comtableconfig/editcard/index.scss

New file
@@ -0,0 +1,33 @@
.common-modal-edit-card {
  margin-left: -10px;
  margin-right: -10px;
  .ant-col {
    padding: 10px;
    .ant-card {
      padding: 10px;
      p {
        margin-bottom: 5px;
      }
      label {
        margin-right: 10px;
      }
      .anticon {
        position: absolute;
        top: 10px;
        right: 10px;
        opacity: 0.4;
      }
      .base {
        cursor: pointer;
      }
    }
    .ant-card.selected {
      border-color: #1890ff;
      box-shadow: 0px 0px 4px #1890ff;
      .anticon {
        opacity: 1;
        color: #1890ff;
      }
    }
  }
}

 src/components/sidemenu/comtableconfig/index.jsx

@@ -3,25 +3,27 @@
// import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { Button, Card, Modal, Collapse, Input, notification } from 'antd'
import { Button, Card, Modal, Collapse, notification, Spin, Row, Col, Select, List, Icon } from 'antd'
import DragElement from './dragelement'
import SourceElement from './dragelement/source'
import Api from '@/api'
import SearchForm from './searchform'
import ActionForm from './actionform'
import ColumnForm from './columnform'
import EditCard from './editcard'
import MenuForm from './menuform'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
import zhCN from '@/locales/zh-CN/comtable.js'
import enUS from '@/locales/en-US/comtable.js'
import Utils from '@/utils/utils.js'
import './index.scss'

const { Panel } = Collapse
const { Search } = Input
const { Option } = Select
const HeaderDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS

class ComTableConfig extends Component {
  static propTpyes = {
    type: PropTypes.string,
    menu: PropTypes.any,
    handleConfig: PropTypes.func,
    supMenuList: PropTypes.array,
@@ -29,162 +31,200 @@
  }

  state = {
    dict: HeaderDict,
    config: null,
    visible: false,
    tableVisible: false,
    addType: '',
    menuformlist: null,
    formlist: null,
    formtemp: '',
    card: null,
    searchloading: false,
    actionloading: false,
    columnsloading: false,
    dict: HeaderDict, // 字典
    config: null, // 页面配置
    visible: false, // 搜索条件、按钮、显示列，模态框显示控制
    tableVisible: false, // 数据表字段模态框
    addType: '', // 添加类型-搜索条件或显示列
    tableColumns: [], // 表格显示列
    option: {}, // 搜索条件及显示列，可选条件包括normal、others
    loading: false, // 加载中（获取表数据）
    menuformlist: null, // 基本信息表单字段
    formlist: null, // 搜索条件、按钮、显示列表单字段
    formtemp: '', // 表单类型，显示列、按钮、搜索条件
    card: null, // 编辑元素
    searchloading: false, // 搜索条件加载中
    actionloading: false, // 按钮加载中
    columnsloading: false, // 显示列加载中
    tables: [{
      name: 'SUsers',
      label: '用户表'
    }, {
      name: 'SMenus',
      label: '菜单表'
    }, {
      name: 'SColumns',
      label: '显示列表'
    }, {
      name: 'SActions',
      label: '按钮表'
    }],
    selectedTables: [], // 已选表名
    baseconfig: {
      type: 'system',
      search: [{
        id: 0,
        uuid: Utils.getuuid(),
        label: 'text',
        field: 'field',
        initval: '',
        type: 'text',
        resourceType: '0',
        setAll: 'false',
        options: [],
        dataSource: '',
        linkField: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc',
        display: 'dropdown'
      }, {
        id: 1,
        uuid: Utils.getuuid(),
        label: 'select',
        field: 'field',
        initval: '',
        type: 'select',
        resourceType: '0',
        setAll: 'false',
        options: [],
        dataSource: '',
        linkField: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc',
        display: 'dropdown'
      }, {
        id: 2,
        uuid: Utils.getuuid(),
        label: 'date',
        field: 'field',
        initval: '',
        type: 'dateday',
        resourceType: '0',
        setAll: 'false',
        options: [],
        dataSource: '',
        linkField: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc',
        display: 'dropdown'
      }],
      action: [{
        id: 0,
        uuid: Utils.getuuid(),
        label: 'add',
        intertype: 'inner',
        interface: '',
        func: '',
        callbackFunc: '',
        Ot: 'notRequired',
        OpenType: 'pop',
        pageTemplate: '',
        icon: 'plus',
        class: 'green'
      }, {
        id: 1,
        uuid: Utils.getuuid(),
        label: 'update',
        intertype: 'inner',
        interface: '',
        func: '',
        callbackFunc: '',
        Ot: 'requiredSgl',
        OpenType: 'pop',
        pageTemplate: '',
        icon: 'form',
        class: 'purple'
      }, {
        id: 2,
        uuid: Utils.getuuid(),
        label: 'delete',
        intertype: 'inner',
        interface: '',
        func: '',
        callbackFunc: '',
        Ot: 'required',
        OpenType: 'prompt',
        pageTemplate: '',
        icon: 'delete',
        class: 'red'
      }, {
        id: 3,
        uuid: Utils.getuuid(),
        label: 'freeze',
        intertype: 'inner',
        interface: '',
        func: '',
        callbackFunc: '',
        Ot: 'requiredOnce',
        OpenType: 'exec',
        pageTemplate: '',
        icon: '',
        class: 'default'
      }],
      columns: [{
        id: 0,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName1',
        field: 'field1',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }, {
        id: 1,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName2',
        field: 'field2',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }, {
        id: 2,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName3',
        field: 'field3',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }, {
        id: 3,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName4',
        field: 'field4',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }]
      search: [
        {
          origin: true,
          id: 0,
          uuid: Utils.getuuid(),
          label: 'text',
          field: '',
          initval: '',
          type: 'text',
          resourceType: '0',
          setAll: 'false',
          options: [],
          dataSource: '',
          linkField: '',
          valueField: '',
          valueText: '',
          orderBy: '',
          orderType: 'asc',
          display: 'dropdown'
        }, {
          origin: true,
          id: 1,
          uuid: Utils.getuuid(),
          label: 'select',
          field: '',
          initval: '',
          type: 'select',
          resourceType: '0',
          setAll: 'false',
          options: [],
          dataSource: '',
          linkField: '',
          valueField: '',
          valueText: '',
          orderBy: '',
          orderType: 'asc',
          display: 'dropdown'
        }, {
          origin: true,
          id: 2,
          uuid: Utils.getuuid(),
          label: 'date',
          field: '',
          initval: '',
          type: 'dateday',
          resourceType: '0',
          setAll: 'false',
          options: [],
          dataSource: '',
          linkField: '',
          valueField: '',
          valueText: '',
          orderBy: '',
          orderType: 'asc',
          display: 'dropdown'
        }
      ],
      action: [
        {
          origin: true,
          id: 0,
          uuid: Utils.getuuid(),
          label: 'add',
          intertype: 'inner',
          innerFunc: '',
          interface: '',
          outerFunc: '',
          callbackFunc: '',
          Ot: 'notRequired',
          OpenType: 'pop',
          pageTemplate: '',
          icon: 'plus',
          class: 'green'
        }, {
          origin: true,
          id: 1,
          uuid: Utils.getuuid(),
          label: 'update',
          intertype: 'inner',
          innerFunc: '',
          interface: '',
          outerFunc: '',
          callbackFunc: '',
          Ot: 'requiredSgl',
          OpenType: 'pop',
          pageTemplate: '',
          icon: 'form',
          class: 'purple'
        }, {
          origin: true,
          id: 2,
          uuid: Utils.getuuid(),
          label: 'delete',
          intertype: 'inner',
          innerFunc: '',
          interface: '',
          outerFunc: '',
          callbackFunc: '',
          Ot: 'required',
          OpenType: 'prompt',
          pageTemplate: '',
          icon: 'delete',
          class: 'red'
        }, {
          origin: true,
          id: 3,
          uuid: Utils.getuuid(),
          label: 'freeze',
          intertype: 'inner',
          innerFunc: '',
          interface: '',
          outerFunc: '',
          callbackFunc: '',
          Ot: 'requiredOnce',
          OpenType: 'exec',
          pageTemplate: '',
          icon: '',
          class: 'default'
        }
      ],
      columns: [
        {
          origin: true,
          id: 0,
          uuid: Utils.getuuid(),
          Align: 'left',
          label: 'fieldName1',
          field: '',
          Hide: 'false',
          IsSort: 'true',
          Width: 120
        }, {
          origin: true,
          id: 1,
          uuid: Utils.getuuid(),
          Align: 'left',
          label: 'fieldName2',
          field: '',
          Hide: 'false',
          IsSort: 'true',
          Width: 120
        }, {
          origin: true,
          id: 2,
          uuid: Utils.getuuid(),
          Align: 'left',
          label: 'fieldName3',
          field: '',
          Hide: 'false',
          IsSort: 'true',
          Width: 120
        }, {
          origin: true,
          id: 3,
          uuid: Utils.getuuid(),
          Align: 'left',
          label: 'fieldName4',
          field: '',
          Hide: 'false',
          IsSort: 'true',
          Width: 120
        }
      ]
    },
    searchItems: [
      {
@@ -266,9 +306,30 @@
    ]
  }

  handleList = (list) => {
  handleList = (listObj) => {
    let config = this.state.config
    this.setState({config: {...config, ...list}})
    if (this.props.type === 'add') {
      let key = Object.keys(listObj)[0]
      let newlength = listObj[key].length
      if (newlength > config[key].length) {
        listObj[key] = listObj[key].filter(item => !item.origin)
      }
      if (newlength > listObj[key].length) {
        this.setState({
          [key + 'loading']: true,
          config: {...config, ...listObj}
        })
        setTimeout(() => {
          this.setState({
            [key + 'loading']: false
          })
        }, 100)
      } else {
        this.setState({config: {...config, ...listObj}})
      }
    } else {
      this.setState({config: {...config, ...listObj}})
    }
  }

  handleSearch = (card) => {
@@ -493,6 +554,14 @@
        },
        {
          type: 'text',
          key: 'innerFunc',
          label: this.state.dict['header.form.innerFunc'],
          initVal: card.innerFunc,
          required: false,
          readonly: false
        },
        {
          type: 'text',
          key: 'interface',
          label: this.state.dict['header.form.interface'],
          initVal: card.interface,
@@ -501,10 +570,10 @@
        },
        {
          type: 'text',
          key: 'func',
          label: this.state.dict['header.form.func'],
          initVal: card.func,
          required: true,
          key: 'outerFunc',
          label: this.state.dict['header.form.outerFunc'],
          initVal: card.outerFunc,
          required: false,
          readonly: false
        },
        {
@@ -634,15 +703,27 @@

  handleSubmit = () => {
    this.formRef.handleConfirm().then(res => {
      console.log(res)
      let _config = this.state.config
      _config[res.type] = _config[res.type].map(item => {
        if (item.uuid === res.values.uuid) {
          return res.values
        } else {
          return item
        }
      })

      if (this.props.type === 'add') {
        _config[res.type] = _config[res.type].map(item => {
          if (item.uuid === res.values.uuid) {
            return res.values
          } else {
            return item
          }
        })
        _config[res.type] = _config[res.type].filter(item => !item.origin)
      } else {
        _config[res.type] = _config[res.type].map(item => {
          if (item.uuid === res.values.uuid) {
            return res.values
          } else {
            return item
          }
        })
      }

      this.setState({
        config: _config,
        [res.type + 'loading']: true,
@@ -703,35 +784,52 @@
    this.props.handleConfig('')
  }

  queryField = (type, name) => {
    if (!name) {
  queryField = (type) => {
    const {selectedTables, tableColumns, config} = this.state
    if (selectedTables.length === 0) {
      notification.warning({
        top: 92,
        message: '请输入表名！',
        message: '请选择表名！',
        duration: 10
      })
      return
    }

    let columns = new Map()
    tableColumns.forEach(table => {
      table.columns.forEach(column => {
        columns.set(column.field, column)
      })
    })

    if (type === 'search') {
      Api.getSystemConfig({func: 'sPC_Get_MainMenu'}).then(res => {
        if (res.status) {
          this.setState({
            tableVisible: true,
            addType: type
          })
        } else {
          notification.warning({
            top: 92,
            message: res.message,
            duration: 10
          })
      let others = []
      config.search.forEach(item => {
        if (columns.has(item.field)) {
          columns.set(item.field, item)
        } else if (item.field) {
          others.push(item)
        }
      })
      this.setState({
        addType: type,
        tableVisible: true,
        option: {
          normal: [...columns.values()],
          others: others
        }
      }, () => {
        console.log(this.state.option)
      })
    }
    // console.log(tableColumns)
    // console.log(columns)
    // console.log(config)
  }

  addFieldSubmit = () => {
    console.log(13)
    let cards = this.refs.searchcard.getSelectedCard()
    console.log(cards)
  }

  cancelFieldSubmit = () => {
@@ -743,7 +841,7 @@

  UNSAFE_componentWillMount () {
    let _config = ''
    if (!this.props.menu.LongParam) {
    if (this.props.type === 'add') {
      _config = JSON.parse(JSON.stringify((this.state.baseconfig)))
    } else {
      _config = this.props.menu.LongParam
@@ -794,26 +892,287 @@
    })
  }

  onTableChange = (value) => {
    const {tables, selectedTables, tableColumns} = this.state

    let _table = tables.filter(item => item.name === value)[0]
    let isSelected = !!selectedTables.filter(cell => cell.name === value)[0]
    if (!isSelected) {
      this.setState({
        selectedTables: [...selectedTables, _table]
      })
      let SUsers = [
        {
          field: 'UID',
          label: 'UID',
          type: 'text'
        },
        {
          field: 'UserCode',
          label: 'UserCode',
          type: 'text'
        },
        {
          field: 'UserName',
          label: 'UserName',
          type: 'text'
        },
        {
          field: 'PassWord',
          label: 'PassWord',
          type: 'text'
        },
        {
          field: 'FullName',
          label: 'FullName',
          type: 'text'
        },
        {
          field: 'RoleID',
          label: 'RoleID',
          type: 'text'
        },
        {
          field: 'RoleName',
          label: 'RoleName',
          type: 'text'
        }
      ]
      let SMenus = [
        {
          field: 'RoleID',
          label: 'RoleID',
          type: 'text'
        },
        {
          field: 'RoleName',
          label: 'RoleName',
          type: 'text'
        },
        {
          field: 'DepartmentCode',
          label: 'DepartmentCode',
          type: 'text'
        },
        {
          field: 'Organization',
          label: 'Organization',
          type: 'text'
        },
        {
          field: 'CSS',
          label: 'CSS',
          type: 'text'
        },
        {
          field: 'HeadImage',
          label: 'HeadImage',
          type: 'text'
        },
        {
          field: 'StaffID',
          label: 'StaffID',
          type: 'text'
        },
        {
          field: 'Remark',
          label: 'Remark',
          type: 'text'
        },
        {
          field: 'Deleted',
          label: 'Deleted',
          type: 'text'
        },
        {
          field: 'APICode',
          label: 'APICode',
          type: 'text'
        },
        {
          field: 'Status',
          label: 'Status',
          type: 'text'
        },
        {
          field: 'Type',
          label: 'Type',
          type: 'text'
        },
        {
          field: 'CreateDate',
          label: 'CreateDate',
          type: 'date'
        }
      ]
      let SColumns = [
        {
          field: 'Type',
          label: 'Type',
          type: 'text'
        },
        {
          field: 'CreateDate',
          label: 'CreateDate',
          type: 'date'
        },
        {
          field: 'CreateUserID',
          label: 'CreateUserID',
          type: 'text'
        },
        {
          field: 'CreateUser',
          label: 'CreateUser',
          type: 'text'
        },
        {
          field: 'CreateStaff',
          label: 'CreateStaff',
          type: 'text'
        },
        {
          field: 'CreateDepartCode',
          label: 'CreateDepartCode',
          type: 'text'
        },
        {
          field: 'ModifyDate',
          label: 'ModifyDate',
          type: 'date'
        },
        {
          field: 'ModifyUserID',
          label: 'ModifyUserID',
          type: 'text'
        },
        {
          field: 'ModifyUser',
          label: 'ModifyUser',
          type: 'text'
        },
        {
          field: 'ModifyDepartCode',
          label: 'ModifyDepartCode',
          type: 'text'
        },
        {
          field: 'ModifyOrganCode',
          label: 'ModifyOrganCode',
          type: 'text'
        }
      ]
      let SActions = [
        {
          field: 'ModifyDepartCode',
          label: 'ModifyDepartCode',
          type: 'text'
        },
        {
          field: 'ModifyOrganCode',
          label: 'ModifyOrganCode',
          type: 'text'
        },
        {
          field: 'SubmitDate',
          label: 'SubmitDate',
          type: 'date'
        },
        {
          field: 'SubmitUserID',
          label: 'SubmitUserID',
          type: 'text'
        },
        {
          field: 'SubmitUser',
          label: 'SubmitUser',
          type: 'text'
        }
      ]
      Api.getSystemConfig({func: 'sPC_Get_MainMenu'}).then(res => {
        if (res.status) {
          let _change = {
            SUsers: SUsers,
            SMenus: SMenus,
            SColumns: SColumns,
            SActions: SActions
          }
          this.setState({
            tableColumns: tableColumns.concat([{
              tableName: _table.name,
              columns: _change[_table.name]
            }])
          })
        } else {
          notification.warning({
            top: 92,
            message: res.message,
            duration: 10
          })
        }
      })
    }
  }

  deleteTable = (table) => {
    const {selectedTables, tableColumns} = this.state

    this.setState({
      selectedTables: selectedTables.filter(item => item.name !== table.name),
      tableColumns: tableColumns.filter(item => item.tableName !== table.name)
    })
  }

  render () {
    console.log(this.state.option)
    return (
      <div className="common-table-board">
        <DndProvider backend={HTML5Backend}>
          <div className="tools">
            <Collapse accordion defaultActiveKey="0" bordered={false}>
              <Panel header="基本信息" key="0">
              <Panel header="基本信息" key="0" id="common-basedata">
                <MenuForm
                  dict={this.state.dict}
                  formlist={this.state.menuformlist}
                  wrappedComponentRef={(inst) => this.menuformRef = inst}
                />
                <div className="ant-col ant-form-item-label">
                  <label title="添加表名">添加表名</label>
                </div>
                <Select
                  showSearch
                  className="tables"
                  style={{ width: '100%' }}
                  optionFilterProp="children"
                  value={'请选择表名'}
                  onChange={this.onTableChange}
                  showArrow={false}
                  getPopupContainer={() => document.getElementById('common-basedata')}
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                > 
                  {this.state.tables.map((table, index) => (
                    <Option key={index} value={table.name}>{table.label}</Option>
                  ))}
                </Select>
                {this.state.selectedTables.length > 0 && <List
                  size="small"
                  bordered
                  dataSource={this.state.selectedTables}
                  renderItem={(item, index) => <List.Item key={index} title={item.name + '--' + item.label}>
                    {item.name + '--' + item.label}
                    <Icon type="close" onClick={() => this.deleteTable(item)}/>
                  </List.Item>}
                />}
              </Panel>
              <Panel header="搜索" key="1">
                <Search placeholder="input table name." onSearch={value => this.queryField('search', value)} enterButton />
                <div className="search-element">
                  {this.state.searchItems.map((item, index) => {
                    return (<SourceElement key={index} content={item}/>)
                  })}
                </div>
                <Button type="primary" block onClick={() => this.queryField('search')}>添加搜索条件</Button>
              </Panel>
              <Panel header="按钮" key="2">
                <div className="search-element">
@@ -823,12 +1182,12 @@
                </div>
              </Panel>
              <Panel header="显示列" key="3">
                <Search placeholder="input table name." onSearch={value => this.queryField('column', value)} enterButton />
                <div className="search-element">
                  {this.state.columnItems.map((item, index) => {
                    return (<SourceElement key={index} content={item}/>)
                  })}
                </div>
                <Button type="primary" block onClick={() => this.queryField('column')}>添加显示列</Button>
              </Panel>
            </Collapse>
          </div>
@@ -914,8 +1273,24 @@
          onCancel={this.cancelFieldSubmit}
          destroyOnClose
        >
          {this.state.addType === 'search' && <div>djfiafadf</div>}
          {this.state.addType === 'search' &&
            <div>
              {this.state.option.normal.length > 0 && <EditCard data={this.state.option.normal} ref="searchcard" title="" />}
              {this.state.option.others.length > 0 && <Row style={{marginLeft: '-10px', marginRight: '-10px'}}>
                <p style={{margin: '10px 0px 0px 10px', color: '#1890ff'}}>自定义字段</p>
                {this.state.option.others.map((item, index) => (
                  <Col key={index} span={8} style={{padding: '10px'}}>
                    <div className="ant-card ant-card-bordered" style={{padding: '10px'}}>
                      <p>{item.label}</p>
                      <p>{item.field}</p>
                    </div>
                  </Col>
                ))}
              </Row>}
            </div>
          }
        </Modal>
        {this.state.loading && <Spin size="large" style={{position: 'fixed', left: '49vw', top: '230px'}} />}
      </div>
    )
  }

 src/components/sidemenu/comtableconfig/index.scss

@@ -12,6 +12,9 @@
    flex: 1;
    background: #ffffff;
    border-right: 1px solid #d9d9d9;
    height: 100%;
    overflow-y: hidden;
    padding-bottom: 30px;
    .ant-collapse-item {
      border: 0;
    }
@@ -44,12 +47,52 @@
        }
      }
    }
    .tables {
      .ant-select-selection-selected-value {
        opacity: 0.4!important;
      }
    }
    .ant-list {
      margin-top: 20px;
      .ant-list-item {
        position: relative;
        padding-left: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        .anticon {
          position: absolute;
          top: 0px;
          right: 0px;
          padding: 3px;
          cursor: pointer;
        }
      }
    }
  }
  .tools:hover {
    overflow-y: auto;
  }
  .tools::-webkit-scrollbar {
    width: 7px;
  }
  .tools::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
    background: rgba(0, 0, 0, 0.13);
  }
  .tools::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }
  .setting {
    position: relative;
    width: calc(100vw - 235px);
    height: 100%;
    overflow-y: auto;
    overflow-y: hidden;
    background: #ffffff;
    .ant-card-head {
      min-height: 44px;
@@ -148,13 +191,13 @@
      }
      .action-list {
        padding: 0px 20px 15px;
        min-height: 72px;
        min-height: 82px;
        > .ant-row {
          min-height: 67px;
        }
        .page-card {
          display: inline-block;
          margin: 0px 0px 20px 0px;
          margin: 0px 0px 0px 0px;
          padding: 15px 10px 0 0;
          position: relative;
          div {
@@ -166,6 +209,9 @@
            top: 0px;
            cursor: pointer;
            display: none;
          }
          .edit.copy {
            left: 20px;
          }
          button {
            cursor: move;
@@ -245,7 +291,21 @@
      }
    }
  }
  .setting:hover {
    overflow-y: auto;
  }
  .setting::-webkit-scrollbar {
    width: 7px;
  }
  .setting::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
    background: rgba(0, 0, 0, 0.13);
  }
  .setting::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }
}
// .commontable-edit-modal {
//   width: 650px!important;
// }

 src/components/sidemenu/editthdmenu/index.jsx

@@ -392,6 +392,7 @@
        editMenu: {...editMenu, ...{LongParam: template.baseconfig, PageParam: _PageParam, type: template.type}}
      })
    }
    document.getElementById('root').style.overflowY = 'hidden'
  }

  // submitMenuConfig = () => {
@@ -525,6 +526,7 @@

  handleConfig = (type) => {
    this.setState({tabview: type})
    document.getElementById('root').style.overflowY = 'unset'
  }

  UNSAFE_componentWillMount () {
@@ -610,6 +612,7 @@
        </div>}
        {this.state.tabview === 'CommonTable' &&
          <ComTableConfig
            type={this.state.type}
            menu={this.state.editMenu}
            supMenu={this.props.supMenu}
            supMenuList={this.props.supMenuList}

 src/locales/en-US/comtable.js

New file
@@ -0,0 +1,83 @@
export default {
  'header.confirm': 'Ok',
  'header.submit': 'Submit',
  'header.delete': 'Delete',
  'header.cancel': 'Cancel',
  'header.edit': 'Edit',
  'header.return': 'Back',
  'header.close': 'Close',
  'header.menu.basemsg': '请完善菜单基本信息！',
  'header.menu.template.change': '切换模板',
  'header.menu.addtitle': 'The new menu',
  'header.menu.editTitle': 'The edit menu',
  'header.menu.menuID': 'Menu ID',
  'header.menu.menuName': 'Menu Name',
  'header.menu.menuNo': 'Menu Parameter',
  'header.menu.supMenu': 'Superior Menu',
  'header.menu.icon': 'Icon',
  'header.menu.openType': 'Open With',
  'header.menu.openType.menu': 'Menu',
  'header.menu.openType.newWindow': 'A new window',
  'header.menu.newpage.service': 'Customer Service',
  'header.form.search.placeholder': '请添加搜索条件',
  'header.form.action.placeholder': '请添加按钮',
  'header.form.column.placeholder': '请添加显示列',
  'header.form.name': 'Name',
  'header.form.field': '字段',
  'header.form.func': '函数名',
  'header.form.innerFunc': '内部函数',
  'header.form.outerFunc': '外部函数',
  'header.form.callbackFunc': '回调函数',
  'header.form.intertype': '接口类型',
  'header.form.interface': '接口地址',
  'header.form.interface.inner': '内部',
  'header.form.interface.outer': '外部',
  'header.form.pageTemplate': '页面模板',
  'header.form.type': 'Type',
  'header.form.text': 'Text',
  'header.form.select': 'Select',
  'header.form.link': '关联菜单',
  'header.form.dateday': 'Date(Day)',
  'header.form.datetime': 'Date(Second)',
  'header.form.initval': 'Initial Value',
  'header.form.isRequired': '行设置',
  'header.form.notRequired': '不选择行',
  'header.form.requiredSgl': '选择单行',
  'header.form.required': '选择多行',
  'header.form.requiredOnce': '多行拼接',
  'header.form.openType': '打开方式',
  'header.form.pop': '弹窗',
  'header.form.tab': '新标签页',
  'header.form.newpage': '新页面',
  'header.form.blank': '当前页跳转',
  'header.form.prompt': '提示框',
  'header.form.exec': '直接执行',
  'header.form.icon': '图标',
  'header.form.class': '颜色',
  'header.form.align': '对齐方式',
  'header.form.alignLeft': '左对齐',
  'header.form.alignRight': '右对齐',
  'header.form.alignCenter': '居中',
  'header.form.Hide': '是否隐藏',
  'header.form.IsSort': '是否排序',
  'header.form.columnWidth': '列宽',
  'header.form.true': '是',
  'header.form.false': '否',
  'header.form.setAll': '设置全部项',
  'header.form.resourceType': '选项来源',
  'header.form.custom': '自定义',
  'header.form.datasource': '数据源',
  'header.form.valueField': '值·字段',
  'header.form.valueText': '文本·字段',
  'header.form.orderBy': '排序·字段',
  'header.form.orderType': '排序方式',
  'header.form.asc': '正序',
  'header.form.desc': '倒序',
  'header.form.linkField': '关联字段',
  'header.form.display': '显示方式',
  'header.form.dropdown': '下拉菜单',
  'header.form.button': '按钮',
  'header.form.selectItem.error': '下拉选项设置错误！',
  'form.required.input': 'Please enter the ',
  'form.required.select': '请选择'
}

 src/locales/en-US/header.js

@@ -43,63 +43,6 @@
  'header.menu.thawmenu.target': 'Unfreeze',
  'header.menu.thawmenu.itemUnit': 'item',
  'header.menu.thawmenu.itemsUnit': 'items',
  'header.form.search.placeholder': '请添加搜索条件',
  'header.form.action.placeholder': '请添加按钮',
  'header.form.column.placeholder': '请添加显示列',
  'header.form.name': 'Name',
  'header.form.field': '字段',
  'header.form.func': '函数名',
  'header.form.callbackFunc': '回调函数',
  'header.form.intertype': '接口类型',
  'header.form.interface': '接口地址',
  'header.form.interface.inner': '内部',
  'header.form.interface.outer': '外部',
  'header.form.pageTemplate': '页面模板',
  'header.form.type': 'Type',
  'header.form.text': 'Text',
  'header.form.select': 'Select',
  'header.form.link': '关联菜单',
  'header.form.dateday': 'Date(Day)',
  'header.form.datetime': 'Date(Second)',
  'header.form.initval': 'Initial Value',
  'header.form.isRequired': '行设置',
  'header.form.notRequired': '不选择行',
  'header.form.requiredSgl': '选择单行',
  'header.form.required': '选择多行',
  'header.form.requiredOnce': '多行拼接',
  'header.form.openType': '打开方式',
  'header.form.pop': '弹窗',
  'header.form.tab': '新标签页',
  'header.form.newpage': '新页面',
  'header.form.blank': '当前页跳转',
  'header.form.prompt': '提示框',
  'header.form.exec': '直接执行',
  'header.form.icon': '图标',
  'header.form.class': '颜色',
  'header.form.align': '对齐方式',
  'header.form.alignLeft': '左对齐',
  'header.form.alignRight': '右对齐',
  'header.form.alignCenter': '居中',
  'header.form.Hide': '是否隐藏',
  'header.form.IsSort': '是否排序',
  'header.form.columnWidth': '列宽',
  'header.form.true': '是',
  'header.form.false': '否',
  'header.form.setAll': '设置全部项',
  'header.form.resourceType': '选项来源',
  'header.form.custom': '自定义',
  'header.form.datasource': '数据源',
  'header.form.valueField': '值·字段',
  'header.form.valueText': '文本·字段',
  'header.form.orderBy': '排序·字段',
  'header.form.orderType': '排序方式',
  'header.form.asc': '正序',
  'header.form.desc': '倒序',
  'header.form.linkField': '关联字段',
  'header.form.display': '显示方式',
  'header.form.dropdown': '下拉菜单',
  'header.form.button': '按钮',
  'header.form.selectItem.error': '下拉选项设置错误！',
  'form.required.input': 'Please enter the ',
  'form.required.select': '请选择'
}

 src/locales/zh-CN/comtable.js

New file
@@ -0,0 +1,83 @@
export default {
  'header.confirm': '确定',
  'header.submit': '提交',
  'header.delete': '删除',
  'header.cancel': '取消',
  'header.edit': '编辑',
  'header.return': '返回',
  'header.close': '关闭',
  'header.menu.basemsg': '请完善菜单基本信息！',
  'header.menu.template.change': '切换模板',
  'header.menu.addtitle': '新建菜单',
  'header.menu.editTitle': '编辑菜单',
  'header.menu.menuID': '菜单ID',
  'header.menu.menuName': '菜单名称',
  'header.menu.menuNo': '菜单参数',
  'header.menu.supMenu': '上级菜单',
  'header.menu.icon': '图标',
  'header.menu.openType': '打开方式',
  'header.menu.openType.menu': '菜单',
  'header.menu.openType.newWindow': '新窗口',
  'header.menu.newpage.service': '客服',
  'header.form.search.placeholder': '请添加搜索条件',
  'header.form.action.placeholder': '请添加按钮',
  'header.form.column.placeholder': '请添加显示列',
  'header.form.name': '名称',
  'header.form.field': '字段',
  'header.form.func': '函数名',
  'header.form.innerFunc': '内部函数',
  'header.form.outerFunc': '外部函数',
  'header.form.callbackFunc': '回调函数',
  'header.form.intertype': '接口类型',
  'header.form.interface': '接口地址',
  'header.form.interface.inner': '内部',
  'header.form.interface.outer': '外部',
  'header.form.pageTemplate': '页面模板',
  'header.form.type': '类型',
  'header.form.text': '文本',
  'header.form.select': '选择',
  'header.form.link': '关联菜单',
  'header.form.dateday': '日期（天）',
  'header.form.datetime': '日期（秒）',
  'header.form.initval': '初始值',
  'header.form.isRequired': '行设置',
  'header.form.notRequired': '不选择行',
  'header.form.requiredSgl': '选择单行',
  'header.form.required': '选择多行',
  'header.form.requiredOnce': '多行拼接',
  'header.form.openType': '打开方式',
  'header.form.pop': '弹窗',
  'header.form.tab': '新标签页',
  'header.form.newpage': '新页面',
  'header.form.blank': '当前页跳转',
  'header.form.prompt': '提示框',
  'header.form.exec': '直接执行',
  'header.form.icon': '图标',
  'header.form.class': '颜色',
  'header.form.align': '对齐方式',
  'header.form.alignLeft': '左对齐',
  'header.form.alignRight': '右对齐',
  'header.form.alignCenter': '居中',
  'header.form.Hide': '是否隐藏',
  'header.form.IsSort': '是否排序',
  'header.form.columnWidth': '列宽',
  'header.form.true': '是',
  'header.form.false': '否',
  'header.form.setAll': '设置全部',
  'header.form.resourceType': '选项来源',
  'header.form.custom': '自定义',
  'header.form.datasource': '数据源',
  'header.form.valueField': '值·字段',
  'header.form.valueText': '文本·字段',
  'header.form.orderBy': '排序·字段',
  'header.form.orderType': '排序方式',
  'header.form.asc': '正序',
  'header.form.desc': '倒序',
  'header.form.linkField': '关联字段',
  'header.form.display': '显示方式',
  'header.form.dropdown': '下拉菜单',
  'header.form.button': '按钮',
  'header.form.selectItem.error': '下拉选项设置错误！',
  'form.required.input': '请输入',
  'form.required.select': '请选择'
}

 src/locales/zh-CN/header.js

@@ -43,63 +43,6 @@
  'header.menu.thawmenu.target': '解除冻结',
  'header.menu.thawmenu.itemUnit': '项',
  'header.menu.thawmenu.itemsUnit': '项',
  'header.form.search.placeholder': '请添加搜索条件',
  'header.form.action.placeholder': '请添加按钮',
  'header.form.column.placeholder': '请添加显示列',
  'header.form.name': '名称',
  'header.form.field': '字段',
  'header.form.func': '函数名',
  'header.form.callbackFunc': '回调函数',
  'header.form.intertype': '接口类型',
  'header.form.interface': '接口地址',
  'header.form.interface.inner': '内部',
  'header.form.interface.outer': '外部',
  'header.form.pageTemplate': '页面模板',
  'header.form.type': '类型',
  'header.form.text': '文本',
  'header.form.select': '选择',
  'header.form.link': '关联菜单',
  'header.form.dateday': '日期（天）',
  'header.form.datetime': '日期（秒）',
  'header.form.initval': '初始值',
  'header.form.isRequired': '行设置',
  'header.form.notRequired': '不选择行',
  'header.form.requiredSgl': '选择单行',
  'header.form.required': '选择多行',
  'header.form.requiredOnce': '多行拼接',
  'header.form.openType': '打开方式',
  'header.form.pop': '弹窗',
  'header.form.tab': '新标签页',
  'header.form.newpage': '新页面',
  'header.form.blank': '当前页跳转',
  'header.form.prompt': '提示框',
  'header.form.exec': '直接执行',
  'header.form.icon': '图标',
  'header.form.class': '颜色',
  'header.form.align': '对齐方式',
  'header.form.alignLeft': '左对齐',
  'header.form.alignRight': '右对齐',
  'header.form.alignCenter': '居中',
  'header.form.Hide': '是否隐藏',
  'header.form.IsSort': '是否排序',
  'header.form.columnWidth': '列宽',
  'header.form.true': '是',
  'header.form.false': '否',
  'header.form.setAll': '设置全部',
  'header.form.resourceType': '选项来源',
  'header.form.custom': '自定义',
  'header.form.datasource': '数据源',
  'header.form.valueField': '值·字段',
  'header.form.valueText': '文本·字段',
  'header.form.orderBy': '排序·字段',
  'header.form.orderType': '排序方式',
  'header.form.asc': '正序',
  'header.form.desc': '倒序',
  'header.form.linkField': '关联字段',
  'header.form.display': '显示方式',
  'header.form.dropdown': '下拉菜单',
  'header.form.button': '按钮',
  'header.form.selectItem.error': '下拉选项设置错误！',
  'form.required.input': '请输入',
  'form.required.select': '请选择'
}