2019-11-13

king

2019-11-13 8b9effb98612ee8a00d76d639a5733d12e9ecce6

2019-11-13

 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 }) => {
const Card = ({ id, type, card, moveCard, findCard, editCard, hasDrop }) => {
  const originalIndex = findCard(id).index
  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes[type], id, originalIndex },
@@ -15,8 +15,14 @@
  })
  const [, drop] = useDrop({
    accept: ItemTypes[type],
    canDrop: () => false,
    canDrop: () => true,
    drop: (item) => {
      if (!item.hasOwnProperty('originalIndex')) {
        hasDrop(card)
      }
    },
    hover({ id: draggedId }) {
      if (!draggedId) return
      if (draggedId !== id) {
        const { index: overIndex } = findCard(id)
        moveCard(draggedId, overIndex)
@@ -28,7 +34,6 @@
  const edit = () => {
    editCard(id)
  }

  return (
    <div className="page-card" style={type === 'columns' ? { flex: card.Width, opacity: opacity} : { opacity: opacity}}>
      <div ref={node => drag(drop(node))}>

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

@@ -2,11 +2,13 @@
import { useDrop } from 'react-dnd'
import update from 'immutability-helper'
import { Col } from 'antd'
import Utils from '@/utils/utils.js'
import Card from './card'
import ItemTypes from './itemtypes'
import './index.scss'

const Container = ({list, type, handleList, handleMenu }) => {
  let target = null
  const [cards, setCards] = useState(list)
  const moveCard = (id, atIndex) => {
    const { card, index } = findCard(id)
@@ -27,7 +29,75 @@
    const { card } = findCard(id)
    handleMenu(card)
  }
  const [, drop] = useDrop({ accept: ItemTypes[type] })

  const hasDrop = (item) => {
    target = item
  }

  const [, drop] = useDrop({
    accept: ItemTypes[type],
    drop(item) {
      if (item.hasOwnProperty('originalIndex')) {
        return
      }
      let newcard = {}
      if (item.type === 'search') {
        newcard.uuid = Utils.getuuid()
        newcard.label = 'fieldName'
        newcard.field = 'field'
        newcard.initval = ''
        newcard.type = item.subType
        if (item.subType === 'select') {
          newcard.resourceType = 0
          newcard.options = []
          newcard.dataSource = ''
        }
      } else if (item.type === 'action') {
        newcard.uuid = Utils.getuuid()
        newcard.label = 'button'
        newcard.func = ''
        newcard.Ot = 'notRequired'
        newcard.OpenType = item.subType
        newcard.icon = 'plus'
        newcard.class = 'green'
      } else if (item.type === 'columns') {
        newcard.uuid = Utils.getuuid()
        newcard.Align = 'left'
        newcard.label = 'fieldName'
        newcard.field = 'field'
        newcard.Hide = 'false'
        newcard.IsSort = item.subType
        newcard.Width = 120
      }
      
      let indexes = cards.map(car => {return car.id})
      let newid = 0
      while (indexes.includes(newid)) {
        newid++
      }
      newcard.id = newid

      let targetId = indexes.length > 0 ? indexes[indexes.length - 1] : 0
      if (target) {
        targetId = target.id
      }

      const { index: overIndex } = findCard(`${targetId}`)
      let targetIndex = overIndex
      if (!target) {
        targetIndex++
      }
      if (targetIndex < 0) {
        targetIndex = 0
      }

      const _cards = update(cards, { $splice: [[targetIndex, 0, newcard]] })
      setCards(_cards)
      handleList({[type]: _cards})
      target = null
    }
  })
  // const [, drop] = useDrop({ accept: ItemTypes[type] })
  return (
    <div ref={drop} className="ant-row" style={type === 'columns' ? {display: 'flex'} : {}}>
      {type === 'action' && cards.map(card => (
@@ -39,6 +109,7 @@
          moveCard={moveCard}
          editCard={editCard}
          findCard={findCard}
          hasDrop={hasDrop}
        />
      ))}
      {type === 'search' && cards.map(card => (
@@ -51,6 +122,7 @@
            moveCard={moveCard}
            editCard={editCard}
            findCard={findCard}
            hasDrop={hasDrop}
          />
        </Col>
      ))}
@@ -67,6 +139,7 @@
          moveCard={moveCard}
          editCard={editCard}
          findCard={findCard}
          hasDrop={hasDrop}
        />
      ))}
    </div>

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

@@ -0,0 +1,9 @@
.common-source-item {
  display: block;
  // border: 1px dashed gray;
  box-shadow: 0px 0px 2px #bcbcbc;
  padding: 0.5rem 1rem;
  background-color: white;
  margin: 0 10px 10px;
  cursor: move;
}

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

New file
@@ -0,0 +1,13 @@
import React from 'react'
import { useDrag } from 'react-dnd'
import './index.scss'

const SourceElement = ({content}) => {
  const [, drag] = useDrag({ item: content })
  return (
    <div ref={drag} className="common-source-item">
      {content.label}
    </div>
  )
}
export default SourceElement

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

@@ -1,5 +1,5 @@
import React, {Component} from 'react'
import { Table, Input, Button, Popconfirm, Form } from 'antd'
import { Table, Input, Button, Popconfirm, Form, Icon } from 'antd'
import Utils from '@/utils/utils.js'
import './index.scss'

@@ -94,30 +94,31 @@
      {
        title: 'ID',
        dataIndex: 'ID',
        width: '35%',
        width: '40%',
        editable: true
      },
      {
        title: 'Value',
        dataIndex: 'value',
        width: '35%',
        width: '40%',
        editable: true
      },
      {
        title: 'operation',
        title: '操作',
        align: 'center',
        dataIndex: 'operation',
        render: (text, record) =>
          this.state.dataSource.length >= 1 ? (
            <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
              <span style={{color: '#1890ff', cursor: 'pointer'}}>Delete</span>
              <span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span>
            </Popconfirm>
          ) : null,
      }
    ]

    this.state = {
      dataSource: [],
      count: 0
      dataSource: props.data,
      count: props.data.length
    }
  }

@@ -150,14 +151,14 @@
    this.setState({ dataSource: newData })
  }

  UNSAFE_componentWillMount () {
    if (this.props.data) {
      this.setState({
        dataSource: this.props.data,
        count: this.props.data.length
      })
    }
  }
  // UNSAFE_componentWillMount () {
  //   if (this.props.data) {
  //     this.setState({
  //       dataSource: this.props.data,
  //       count: this.props.data.length
  //     })
  //   }
  // }

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

 src/components/sidemenu/comtableconfig/index.jsx

@@ -5,6 +5,7 @@
import HTML5Backend from 'react-dnd-html5-backend'
import { Button, Card, Modal, Tabs } from 'antd'
import DragElement from './dragelement'
import SourceElement from './dragelement/source'
import SearchForm from './searchform'
import ActionForm from './actionform'
import ColumnForm from './columnform'
@@ -14,14 +15,16 @@
import './index.scss'

const {TabPane} = Tabs
const HeaderDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS

class ComTableConfig extends Component {
  static propTpyes = {
    menuConfig: PropTypes.any
    menuConfig: PropTypes.any,
    handleConfig: PropTypes.func
  }

  state = {
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    dict: HeaderDict,
    config: null,
    visible: false,
    formlist: null,
@@ -36,29 +39,54 @@
      search: [{
        id: 0,
        uuid: Utils.getuuid(),
        label: 'fieldName1',
        label: 'text',
        field: 'field',
        initval: '',
        type: 'text'
        type: 'text',
        resourceType: '0',
        setAll: 'false',
        options: [],
        dataSource: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc'
      }, {
        id: 1,
        uuid: Utils.getuuid(),
        label: 'fieldName2',
        label: 'select',
        field: 'field',
        initval: '',
        type: 'select',
        resourceType: 0,
        resourceType: '0',
        setAll: 'false',
        options: [],
        dataSource: ''
        dataSource: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc'
      }, {
        id: 2,
        uuid: Utils.getuuid(),
        label: 'fieldName3',
        label: 'date',
        field: 'field',
        initval: '',
        type: 'dateday'
        type: 'dateday',
        resourceType: '0',
        setAll: 'false',
        options: [],
        dataSource: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc'
      }],
      action: [{
        id: 0,
        uuid: Utils.getuuid(),
        label: 'add',
        func: '',
        Ot: 'notRequired',
        OpenType: 'pop',
        icon: 'plus',
@@ -67,6 +95,7 @@
        id: 1,
        uuid: Utils.getuuid(),
        label: 'update',
        func: '',
        Ot: 'requiredSgl',
        OpenType: 'pop',
        icon: 'form',
@@ -75,6 +104,7 @@
        id: 2,
        uuid: Utils.getuuid(),
        label: 'delete',
        func: '',
        Ot: 'required',
        OpenType: 'prompt',
        icon: 'delete',
@@ -83,6 +113,7 @@
        id: 3,
        uuid: Utils.getuuid(),
        label: 'freeze',
        func: '',
        Ot: 'requiredOnce',
        OpenType: 'exec',
        icon: '',
@@ -93,6 +124,7 @@
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName1',
        field: 'field1',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
@@ -101,6 +133,7 @@
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName2',
        field: 'field2',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
@@ -109,6 +142,7 @@
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName3',
        field: 'field3',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
@@ -117,11 +151,90 @@
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName4',
        field: 'field4',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }]
    },
    searchItems: [
      {
        type: 'search',
        label: '文本框',
        subType: 'text',
        url: ''
      },
      {
        type: 'search',
        label: '下拉框',
        subType: 'select',
        url: ''
      },
      {
        type: 'search',
        label: '时间框（天）',
        subType: 'dateday',
        url: ''
      },
      {
        type: 'search',
        label: '时间框（秒）',
        subType: 'datetime',
        url: ''
    }
    ],
    actionItems: [
      {
        type: 'action',
        label: HeaderDict['header.form.pop'],
        subType: 'pop',
        url: ''
      },
      {
        type: 'action',
        label: HeaderDict['header.form.prompt'],
        subType: 'prompt',
        url: ''
      },
      {
        type: 'action',
        label: HeaderDict['header.form.exec'],
        subType: 'exec',
        url: ''
      },
      {
        type: 'action',
        label: HeaderDict['header.form.tab'],
        subType: 'tab',
        url: ''
      },
      {
        type: 'action',
        label: HeaderDict['header.form.newpage'],
        subType: 'newpage',
        url: ''
      },
      {
        type: 'action',
        label: HeaderDict['header.form.blank'],
        subType: 'blank',
        url: ''
      }
    ],
    columnItems: [
      {
        type: 'columns',
        label: '排序列',
        subType: 'true',
        url: ''
      },
      {
        type: 'columns',
        label: '非排序列',
        subType: 'false',
        url: ''
      }
    ]
  }

  handleList = (list) => {
@@ -134,7 +247,7 @@
    this.setState({
      visible: true,
      formtemp: 'search',
      madalwidth: 650,
      madalwidth: 700,
      card: card,
      formlist: [
        {
@@ -146,12 +259,26 @@
          readonly: false
        },
        {
          type: 'text',
          key: 'field',
          label: this.state.dict['header.form.field'],
          initVal: card.field,
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'initval',
          label: this.state.dict['header.form.initval'],
          initVal: '',
          required: false
        },
        {
          type: 'select',
          key: 'type',
          label: this.state.dict['header.form.type'],
          initVal: card.type,
          required: true,
          card: card,
          options: [{
            MenuID: 'text',
            text: this.state.dict['header.form.text']
@@ -167,11 +294,83 @@
          }]
        },
        {
          type: 'radio',
          key: 'resourceType',
          label: this.state.dict['header.form.resourceType'],
          initVal: card.resourceType,
          options: [{
            MenuID: '0',
            text: this.state.dict['header.form.custom']
          }, {
            MenuID: '1',
            text: this.state.dict['header.form.datasource']
          }]
        },
        {
          type: 'radio',
          key: 'setAll',
          label: this.state.dict['header.form.setAll'],
          initVal: card.setAll,
          options: [{
            MenuID: 'true',
            text: this.state.dict['header.form.true']
          }, {
            MenuID: 'false',
            text: this.state.dict['header.form.false']
          }]
        },
        {
          type: 'textarea',
          key: 'dataSource',
          label: this.state.dict['header.form.datasource'],
          initVal: card.dataSource,
          required: true,
          readonly: false
        },
        {
          type: 'options',
          key: 'options',
          label: '',
          initVal: card.options,
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'initval',
          label: this.state.dict['header.form.initval'],
          initVal: '',
          required: false
          key: 'valueField',
          label: this.state.dict['header.form.valueField'],
          initVal: card.valueField,
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'valueText',
          label: this.state.dict['header.form.valueText'],
          initVal: card.valueText,
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'orderBy',
          label: this.state.dict['header.form.orderBy'],
          initVal: card.orderBy,
          required: false,
          readonly: false
        },
        {
          type: 'select',
          key: 'orderType',
          label: this.state.dict['header.form.orderType'],
          initVal: card.orderType,
          options: [{
            MenuID: 'asc',
            text: this.state.dict['header.form.asc']
          }, {
            MenuID: 'desc',
            text: this.state.dict['header.form.desc']
          }]
        }
      ]
    })
@@ -189,6 +388,14 @@
          key: 'label',
          label: this.state.dict['header.form.name'],
          initVal: card.label,
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'func',
          label: this.state.dict['header.form.func'],
          initVal: card.func,
          required: true,
          readonly: false
        },
@@ -271,6 +478,14 @@
          label: this.state.dict['header.form.name'],
          initVal: card.label,
          required: true
        },
        {
          type: 'text',
          key: 'field',
          label: this.state.dict['header.form.field'],
          initVal: card.field,
          required: true,
          readonly: false
        },
        {
          type: 'select',
@@ -383,17 +598,12 @@
    }, 300)
  }

  dragstart = (e) => {
    console.log(e.target.id)
  submitConfig = () => {
    this.props.handleConfig()
  }

  dragover = (e) => {
    e.preventDefault()
  }

  drop = (e) => {
    e.preventDefault()
    console.log(13)
  cancelConfig = () => {
    this.props.handleConfig()
  }

  UNSAFE_componentWillMount () {
@@ -411,71 +621,69 @@
  render () {
    return (
      <div className="common-table-board">
        <DndProvider backend={HTML5Backend}>
        <div className="tools">
          <Tabs defaultActiveKey="1">
            <TabPane tab="搜索" key="1">
              <ul className="search-element">
                <li>
                  <div draggable="true" id="search-text" onDragStart={(e) => {this.dragstart(e)}}>文本框</div>
                </li>
                <li>
                  <div draggable="true" id="search-select" onDragStart={this.dragstart}>下拉框</div>
                </li>
                <li>
                  <div draggable="true" id="search-dateday" onDragStart={this.dragstart}>时间框（天）</div>
                </li>
                <li>
                  <div draggable="true" id="search-datetime" onDragStart={this.dragstart}>时间框（秒）</div>
                </li>
                  {this.state.searchItems.map((item, index) => {
                    return (<SourceElement key={index} content={item}/>)
                  })}
              </ul>
            </TabPane>
            <TabPane tab="按钮" key="2">
              按钮
                <ul className="search-element">
                  {this.state.actionItems.map((item, index) => {
                    return (<SourceElement key={index} content={item}/>)
                  })}
                </ul>
            </TabPane>
            <TabPane tab="显示列" key="3">
              列
                <ul className="search-element">
                  {this.state.columnItems.map((item, index) => {
                    return (<SourceElement key={index} content={item}/>)
                  })}
                </ul>
            </TabPane>
          </Tabs>
        </div>
        <div className="setting">
          <Card title="页面配置" bordered={false} extra={
            <div>
              <Button type="primary">{this.state.dict['header.submit']}</Button>
              <Button>{this.state.dict['header.cancel']}</Button>
                <Button type="primary" onClick={this.submitConfig}>{this.state.dict['header.submit']}</Button>
                <Button onClick={this.cancelConfig}>{this.state.dict['header.cancel']}</Button>
            </div>
          } style={{ width: '100%' }}>
            <div className="search-list" onDragOver={this.dragover} onDrop={this.drop}>
              {this.state.config.search && !this.state.searchloading && <DndProvider backend={HTML5Backend}>
              <div className="search-list">
                {this.state.config.search && !this.state.searchloading &&
                <DragElement
                  list={this.state.config.search}
                  type="search"
                  handleList={this.handleList}
                  handleMenu={this.handleSearch}
                />
              </DndProvider>}
                />}
            </div>
            <div className="action-list">
              {this.state.config.action && !this.state.actionloading && <DndProvider backend={HTML5Backend}>
                {this.state.config.action && !this.state.actionloading &&
                <DragElement
                  list={this.state.config.action}
                  type="action"
                  handleList={this.handleList}
                  handleMenu={this.handleAction}
                />
              </DndProvider>}
                />}
            </div>
            <div className="column-list">
              {this.state.config.columns && !this.state.columnsloading && <DndProvider backend={HTML5Backend}>
                {this.state.config.columns && !this.state.columnsloading &&
                <DragElement
                  list={this.state.config.columns}
                  type="columns"
                  handleList={this.handleList}
                  handleMenu={this.handleColumn}
                />
              </DndProvider>}
                />}
            </div>
          </Card>
        </div>
        </DndProvider>
        <Modal
          title={this.state.dict['header.edit']}
          visible={this.state.visible}
@@ -487,6 +695,7 @@
          {this.state.formlist && this.state.formtemp === 'search' && <SearchForm
            dict={this.state.dict}
            formlist={this.state.formlist}
            card={this.state.card}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />}
          {this.state.formlist && this.state.formtemp === 'action' && <ActionForm

 src/components/sidemenu/comtableconfig/index.scss

@@ -57,6 +57,9 @@
        padding: 1px 24px 20px;
        min-height: 87px;
        border-bottom: 1px solid #d9d9d9;
        > .ant-row {
          min-height: 65px;
        }
        .ant-row .ant-col-6 {
          padding: 0 12px!important;
        }
@@ -125,10 +128,16 @@
            display: inline-block;
          }
        }
        .ant-calendar-picker {
          min-width: 100px!important;
        }
      }
      .action-list {
        padding: 0px 20px 15px;
        min-height: 72px;
        > .ant-row {
          min-height: 67px;
        }
        .page-card {
          display: inline-block;
          margin: 0px 0px 20px 0px;
@@ -161,9 +170,10 @@
      }
      .column-list {
        padding: 0px 20px;
        .ant-row {
        > .ant-row {
          background: #fafafa;
          border-radius: 4px;
          min-height: 47px;
          border: 1px solid #e8e8e8;
          .page-card {
            position: relative;

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

@@ -24,23 +24,48 @@

  openTypeChange = (key, value) => {
    if (key === 'type') {
      let resourceType = this.state.formlist.filter(cell => cell.key === 'resourceType')[0].initVal
      let _options = ['label', 'field', 'initval', 'type']
      if (value === 'select' && resourceType === '0') {
        _options = [..._options, ...['resourceType', 'setAll', 'options']]
      } else if (value === 'select' && resourceType === '1') {
        _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType']]
      }
      
      this.setState({
        inputType: value,
        selectType: 0
        formlist: this.state.formlist.map(form => {
          form.hidden = !_options.includes(form.key)
          return form
        })
      })
    }
  }

  onChange = e => {
  onChange = (e, key) => {
    let value = e.target.value
    if (key === 'resourceType') {
      let _options = ['label', 'field', 'initval', 'type', 'resourceType', 'setAll']
      if (value === '0') {
        _options = [..._options, ...['options']]
      } else if (value === '1') {
        _options = [..._options, ...['dataSource', 'valueField', 'valueText', 'orderBy', 'orderType']]
      }
      
    this.setState({
      selectType: e.target.value
        formlist: this.state.formlist.map(form => {
          form.hidden = !_options.includes(form.key)
          return form
    })
      })
    }
  }

  getFields() {
    const { getFieldDecorator } = this.props.form
    const fields = []
    this.props.formlist.forEach((item, index) => {
    this.state.formlist.forEach((item, index) => {
      if (item.hidden) return

      if (item.type === 'text') { // 文本搜索
        let placeholder = ''
        if (item.key === 'initval' && this.state.inputType === 'dateday') {
@@ -49,7 +74,7 @@
          placeholder = '例：' + moment().format('YYYY-MM-DD HH:mm:ss')
        }
        fields.push(
          <Col span={24} key={index}>
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
@@ -65,7 +90,7 @@
        )
      } else if (item.type === 'select') { // 下拉搜索
        fields.push(
          <Col span={24} key={index}>
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
@@ -92,35 +117,47 @@
            </Form.Item>
          </Col>
        )
        if (item.key === 'type' && this.state.inputType === 'select') {
      } else if (item.type === 'radio') {
          fields.push(
            <Col span={24} key={'radio' + index}>
              <Form.Item label={'选项'}>
                <Radio.Group onChange={this.onChange} value={this.state.selectType}>
                  <Radio value={0}>自定义</Radio>
                  <Radio value={1}>数据源</Radio>
                </Radio.Group>
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, { initialValue: item.initVal })(
                <Radio.Group onChange={(e) => {this.onChange(e, item.key)}}>
                  {
                    item.options.map(option => {
                      return (
                        <Radio key={option.MenuID} value={option.MenuID}>{option.text}</Radio>
                      )
                    })
                  }
                </Radio.Group>,
              )}
              </Form.Item>
            </Col>
          )
          if (this.state.selectType === 0) {
        
      } else if (item.type === 'textarea') {
            fields.push(
              <Col span={18} offset={6} key={'table' + index}>
                <EditTable data={this.state.card.options} ref="editTable"/>
              </Col>
            )
          } else {
            fields.push(
              <Col span={18} offset={6} key={'table' + index}>
          <Col span={20} offset={4} key={index}>
                <Form.Item className="text-area">
                  {getFieldDecorator('datasource', {
                    initialValue: ''
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
                  })(<TextArea rows={4} />)}
                </Form.Item>
              </Col>
            )
          }
        }
      } else if (item.type === 'options') {
        fields.push(
          <Col span={20} offset={4} key={index}>
            <EditTable data={item.initVal} ref="editTable"/>
          </Col>
        )
      }
    })
    return fields
@@ -131,16 +168,15 @@
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (this.state.inputType === 'select') {
            values.resourceType = this.state.selectType
            if (this.state.selectType === 0) {
          if (values.type === 'select' && values.resourceType === '0') {
              values.options = this.refs.editTable.state.dataSource
            } else {
            values.dataSource = ''
          } else if (values.type === 'select' && values.resourceType === '1') {
              values.options = []
            }
          }
          values.id = this.state.card.id
          values.uuid = this.state.card.uuid

          values.id = this.props.card.id
          values.uuid = this.props.card.uuid
          resolve({
            type: 'search',
            values
@@ -154,19 +190,21 @@

  resetForm = (formlist) => {
    if (!formlist) return
    let _item = formlist.filter(cell => cell.key === 'type')[0]
    if (_item.initVal === 'select') {
      this.setState({
        inputType: 'select',
        card: _item.card,
        selectType: _item.card.resourceType
      })
    } else {
      this.setState({
        inputType: _item.card.type,
        card: _item.card
      })
    let type = formlist.filter(cell => cell.key === 'type')[0].initVal
    let resourceType = formlist.filter(cell => cell.key === 'resourceType')[0].initVal
    let _options = ['label', 'field', 'initval', 'type']
    if (type === 'select' && resourceType === '0') {
      _options = [..._options, ...['resourceType', 'setAll', 'options']]
    } else if (type === 'select' && resourceType === '1') {
      _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType']]
    }
    
    this.setState({
      formlist: formlist.map(form => {
        form.hidden = !_options.includes(form.key)
        return form
      })
    })
  }

  UNSAFE_componentWillMount () {
@@ -177,11 +215,11 @@
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
        sm: { span: 16 }
      }
    }
    return (

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

@@ -1,12 +1,16 @@
.ant-advanced-search-form.commontable-search-form {
  .ant-col-offset-6 {
  min-height: 180px;
  .ant-col-offset-4 {
    padding-left: 6px!important;
    padding-bottom: 20px;
  }
  .text-area {
  .ant-form-item.text-area {
    margin-bottom: 0px;
    .ant-form-item-control-wrapper {
      width: 100%;
    }
  }
  .ant-form-item {
    margin-bottom: 15px;
  }
}

 src/components/sidemenu/editsecmenu/index.jsx

@@ -4,10 +4,9 @@
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { notification, Modal, Button, Spin, Icon } from 'antd'
// import { notification, Modal, Button, Icon } from 'antd'
import TransferForm from '@/components/transferform'
import Utils from '@/utils/utils.js'
import DragElement from '../dragelement'
import DragElement from '../menuelement'
import MenuForm from '../menuform'
import Api from '@/api'
import zhCN from '@/locales/zh-CN/header.js'

 src/components/sidemenu/editthdmenu/index.jsx

@@ -7,7 +7,7 @@
import Preview from '@/components/preview'
import TransferForm from '@/components/transferform'
import Utils from '@/utils/utils.js'
import DragElement from '../dragelement'
import DragElement from '../menuelement'
import MenuForm from '../menuform'
import ComTableConfig from '../comtableconfig'
import Api from '@/api'
@@ -576,6 +576,10 @@
    this.setState({tabview: ''})
  }

  handleConfig = () => {
    this.setState({tabview: ''})
  }

  UNSAFE_componentWillMount () {
    previewList = null
    this.getUsedTemplate()
@@ -658,7 +662,7 @@
          </div>
        </div>}
        {this.state.tabview === 'CommonTable' &&
          <ComTableConfig config={this.state.menuConfig} />
          <ComTableConfig config={this.state.menuConfig} handleConfig={this.handleConfig} />
        }
        {/* 图片预览 */}
        <Preview cancel={this.cancelPrePicture} preview={this.state.preview}/>

 src/components/sidemenu/menuelement/card.jsx

 src/components/sidemenu/menuelement/index.jsx

 src/components/sidemenu/menuelement/index.scss

 src/components/sidemenu/menuelement/itemtypes.js

 src/locales/en-US/header.js

@@ -41,6 +41,8 @@
  'header.menu.thawmenu.itemUnit': 'item',
  'header.menu.thawmenu.itemsUnit': 'items',
  'header.form.name': 'Name',
  'header.form.field': '字段',
  'header.form.func': '存储过程',
  'header.form.type': 'Type',
  'header.form.text': 'Text',
  'header.form.select': 'Select',
@@ -70,5 +72,6 @@
  'header.form.columnWidth': '列宽',
  'header.form.true': '是',
  'header.form.false': '否',
  'header.form.setAll': '设置全部项',
  'form.required.input': 'Please enter the '
}

 src/locales/zh-CN/header.js

@@ -41,6 +41,8 @@
  'header.menu.thawmenu.itemUnit': '项',
  'header.menu.thawmenu.itemsUnit': '项',
  'header.form.name': '名称',
  'header.form.field': '字段',
  'header.form.func': '存储过程',
  'header.form.type': '类型',
  'header.form.text': '文本',
  'header.form.select': '选择',
@@ -70,6 +72,16 @@
  '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': '倒序',
  'form.required.input': '请输入'

}