2019-11-15

king

2019-11-15 d3edd6d592db12fbec67e2700d168e07546aed29

2019-11-15

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

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select, Icon } from 'antd'
import { Form, Row, Col, Input, Select, Icon, Radio } from 'antd'
import './index.scss'

const btnIcons = [{
@@ -60,16 +60,62 @@
  }

  state = {
    formlist: null,
    openType: null,
    interType: null
  }

  openTypeChange = (key, value) => {
    if (key === 'OpenType') {
      let _options = null
      if (value === 'newpage') {
        _options = ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class']
      } else {
        if (this.state.interType === 'outer') {
          _options = ['label', 'OpenType', 'intertype', 'interface', 'func', 'callbackFunc', 'Ot', 'icon', 'class']
        } else {
          _options = ['label', 'OpenType', 'intertype', 'func', 'Ot', 'icon', 'class']
        }
      }
      this.setState({
        openType: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)
          return item
        })
      })
    }
  }

  onChange = (e, key) => {
    let value = e.target.value
    if (key === 'intertype') {
      let _options = null
      if (value === 'outer') {
        _options = ['label', 'OpenType', 'intertype', 'interface', 'func', 'callbackFunc', 'Ot', 'icon', 'class']
      } else {
        _options = ['label', 'OpenType', 'intertype', 'func', 'Ot', 'icon', 'class']
      }
      this.setState({
        interType: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)
          return item
        })
      })
    }
  }

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

      if (item.type === 'text') { // 文本搜索
        fields.push(
          <Col span={24} key={index}>
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
@@ -83,9 +129,9 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select' && item.key === 'icon') { // 下拉搜索
      } 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 || '',
@@ -99,70 +145,41 @@
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  getPopupContainer={() => document.getElementById('winter')}
                >
                  {btnIcons.map(option =>
                    <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}>
                      <Icon type={option.MenuID} /> {option.text}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select' && item.key === 'class') { // 下拉搜索
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  getPopupContainer={() => document.getElementById('winter')}
                >
                  {btnClasses.map(option =>
                    <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}>
                      {option.text}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉搜索
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={(value) => {this.openTypeChange(item.key, value)}}
                  getPopupContainer={() => document.getElementById('winter')}
                >
                  {item.options.map(option =>
                    <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}>
                      {option.text}
                      {item.key === 'icon' && <Icon type={option.MenuID} />} {option.text}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'radio') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <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>
@@ -190,6 +207,35 @@
    })
  }

  UNSAFE_componentWillMount () {
    let _opentype = this.props.formlist.filter(form => form.key === 'OpenType')[0].initVal
    let _intertype = this.props.formlist.filter(form => form.key === 'intertype')[0].initVal
    // let _options = ['label', 'intertype', 'interface', 'func', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class']
    let _options = null
    if (_opentype === 'newpage') {
      _options = ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class']
    } else {
      if (_intertype === 'outer') {
        _options = ['label', 'OpenType', 'intertype', 'interface', 'func', 'callbackFunc', 'Ot', 'icon', 'class']
      } else {
        _options = ['label', 'OpenType', 'intertype', 'func', 'Ot', 'icon', 'class']
      }
    }
    this.setState({
      openType: _opentype,
      interType: _intertype,
      formlist: this.props.formlist.map(item => {
        if (item.key === 'class') {
          item.options = btnClasses
        } else if (item.key === 'icon') {
          item.options = btnIcons
        }
        item.hidden = !_options.includes(item.key)
        return item
      })
    })
  }

  render() {
    const formItemLayout = {
      labelCol: {

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

@@ -1,4 +1,5 @@
.ant-advanced-search-form.commontable-action-form {
  min-height: 190px;
  .ant-form-item {
    margin-bottom: 15px;
  }

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

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select, InputNumber } from 'antd'
import { Form, Row, Col, Input, Select, InputNumber, Radio } from 'antd'
import './index.scss'

class MainSearch extends Component {
@@ -20,7 +20,7 @@
    this.props.formlist.forEach((item, index) => {
      if (item.type === 'text') { // 文本搜索
        fields.push(
          <Col span={24} key={index}>
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
@@ -36,7 +36,7 @@
        )
      } else if (item.type === 'spinner') { // 文本搜索
        fields.push(
          <Col span={24} key={index}>
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
@@ -52,7 +52,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 || '',
@@ -78,6 +78,33 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'radio') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Radio.Group>
                  {
                    item.options.map(option => {
                      return (
                        <Radio key={option.MenuID} value={option.MenuID}>{option.text}</Radio>
                      )
                    })
                  }
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
        )
        
      }
    })
    return fields

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

@@ -1,5 +1,9 @@
.ant-advanced-search-form.commontable-column-form {
  min-height: 190px;
  .ant-form-item {
    margin-bottom: 15px;
    .ant-input-number {
      width: 100%;
    }
  }
}

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

@@ -1,6 +1,6 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon, Button, Select, DatePicker } from 'antd'
import { Icon, Button, Select, DatePicker, Input } from 'antd'
import moment from 'moment'
import ItemTypes from './itemtypes'
import './index.scss'
@@ -43,14 +43,10 @@
          </div>
          <div className="ant-col ant-form-item-control-wrapper">
            {card.type === 'text' &&
              <div className="ant-form-item-control">
                <span className="ant-form-item-children">
                  <input placeholder="" autoComplete="off" type="text" readOnly={true}  className="ant-input" />
                </span>
              </div>
              <Input style={{marginTop: '4px'}} defaultValue={card.initval} />
            }
            {card.type === 'select' &&
              <Select defaultValue="lucy"></Select>
            {(card.type === 'select' || card.type === 'link') &&
              <Select defaultValue={card.initval}></Select>
            }
            {card.type === 'dateday' &&
              <DatePicker defaultValue={card.initval ? moment(card.initval, 'YYYY-MM-DD') : null} />
@@ -70,7 +66,7 @@
        }
        {type === 'columns' &&
          <span className="ant-table-header-column">
            <div className="ant-table-column-sorters" style={{textAlign: card.Align}}>
            <div className="ant-table-column-sorters" title={card.label} style={{textAlign: card.Align}}>
              <span className="ant-table-column-title">{card.label}</span>
              {card.IsSort === 'true' && <span className="ant-table-column-sorter">
                <Icon type="caret-up" />

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

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

const Container = ({list, type, handleList, handleMenu }) => {
const Container = ({list, type, placeholder, handleList, handleMenu }) => {
  let target = null
  const [cards, setCards] = useState(list)
  const moveCard = (id, atIndex) => {
@@ -97,9 +97,18 @@
      target = null
    }
  })
  // const [, drop] = useDrop({ accept: ItemTypes[type] })
  let columns = []
  if (type === 'columns' && cards.length > 12) {
    let number = Math.ceil(cards.length / Math.ceil(cards.length / 12))
    for (let i = 0, len = cards.length; i < len; i += number) {
      columns.push(cards.slice(i, i + number))
    }
  } else if (type === 'columns') {
    columns.push(cards)
  }
  
  return (
    <div ref={drop} className="ant-row" style={type === 'columns' ? {display: 'flex'} : {}}>
    <div ref={drop} className="ant-row">
      {type === 'action' && cards.map(card => (
        <Card
          key={card.uuid}
@@ -127,21 +136,33 @@
        </Col>
      ))}
      {type === 'columns' && cards.length > 0 &&
      <div className="page-card" style={{flex: 60}}>
        <span className="ant-checkbox-inner"></span>
      </div>}
      {type === 'columns' && cards.map(card => (
        <Card
          key={card.uuid}
          id={`${card.id}`}
          type={type}
          card={card}
          moveCard={moveCard}
          editCard={editCard}
          findCard={findCard}
          hasDrop={hasDrop}
        />
      ))}
        columns.map((column, i) => (
          <div key={i} className="column-box">
            {i === 0 &&
              <div className="page-card" style={{flex: 60}}>
                <span className="ant-checkbox-inner"></span>
              </div>
            }
            {column.map(card => (
              <Card
                key={card.uuid}
                id={`${card.id}`}
                type={type}
                card={card}
                moveCard={moveCard}
                editCard={editCard}
                findCard={findCard}
                hasDrop={hasDrop}
              />
            ))}
          </div>
        ))
      }
      {cards.length === 0 &&
        <div className="common-drawarea-placeholder">
          {placeholder}
        </div>
      }
    </div>
  )
}

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

@@ -1,9 +1,15 @@
.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;
  margin: 0px 0px 10px;
  cursor: move;
  border-radius: 4px;
}
.common-drawarea-placeholder {
  width: 100%;
  line-height: 65px;
  text-align: center;
  color: #bcbcbc;
}

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

@@ -30,17 +30,19 @@
  save = e => {
    const { record, handleSave } = this.props
    this.form.validateFields((error, values) => {
      handleSave({ ...record, ...values })
      if (error && error[e.currentTarget.id]) {
        return
      }
      this.toggleEdit()
      handleSave({ ...record, ...values })
      // handleSave({ ...record, ...values })
    })
  }

  renderCell = form => {
    this.form = form
    const { children, dataIndex, record, title } = this.props
    // const { children, dataIndex, record, title } = this.props
    const { children, dataIndex, record } = this.props
    const { editing } = this.state
    return editing ? (
      <Form.Item style={{ margin: 0 }}>
@@ -48,11 +50,12 @@
          rules: [
            {
              required: true,
              message: `${title} is required.`,
              // message: `${title} is required.`,
              message: 'NOT NULL.',
            },
          ],
          initialValue: record[dataIndex]
        })(<Input ref={node => (this.input = node)} onPressEnter={this.save} onBlur={this.save} />)}
        })(<Input ref={node => (this.input = node)} autoComplete="off" onPressEnter={this.save} onBlur={this.save} />)}
      </Form.Item>
    ) : (
      <div
@@ -90,17 +93,17 @@
class EditTable extends Component {
  constructor(props) {
    super(props)
    this.columns = [
    let columns = [
      {
        title: 'ID',
        dataIndex: 'ID',
        width: '40%',
        title: 'Value',
        dataIndex: 'Value',
        width: props.type === 'link' ? '27%' : '40%',
        editable: true
      },
      {
        title: 'Value',
        dataIndex: 'value',
        width: '40%',
        title: 'Text',
        dataIndex: 'Text',
        width: props.type === 'link' ? '27%' : '40%',
        editable: true
      },
      {
@@ -116,9 +119,20 @@
      }
    ]

    if (props.type === 'link') {
      columns.unshift({
        title: 'ParentID',
        dataIndex: 'ParentID',
        width: '27%',
        editable: true
      })
    }

    this.state = {
      columns: columns,
      dataSource: props.data,
      count: props.data.length
      count: props.data.length,
      type: props.type
    }
  }

@@ -128,11 +142,14 @@
  }

  handleAdd = () => {
    const { count, dataSource } = this.state
    const { type, count, dataSource } = this.state
    const newData = {
      key: Utils.getuuid(),
      ID: `${count}`,
      value: `${count}`
      Value: `${count}`,
      Text: `${count}`
    }
    if (type === 'link') {
      newData.ParentID = `${count}`
    }
    this.setState({
      dataSource: [...dataSource, newData],
@@ -151,14 +168,53 @@
    this.setState({ dataSource: newData })
  }

  // UNSAFE_componentWillMount () {
  //   if (this.props.data) {
  //     this.setState({
  //       dataSource: this.props.data,
  //       count: this.props.data.length
  //     })
  //   }
  // }
  resetColumn = (type) => {
    let columns = [
      {
        title: 'Value',
        dataIndex: 'Value',
        width: type === 'link' ? '27%' : '40%',
        editable: true
      },
      {
        title: 'Text',
        dataIndex: 'Text',
        width: type === 'link' ? '27%' : '40%',
        editable: true
      },
      {
        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'}}><Icon type="delete" /></span>
            </Popconfirm>
          ) : null,
      }
    ]

    if (type === 'link') {
      columns.unshift({
        title: 'ParentID',
        dataIndex: 'ParentID',
        width: '27%',
        editable: true
      })
    }

    this.setState({
      columns: columns,
      type: type
    })
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (this.props.type !== nextProps.type) {
      this.resetColumn(nextProps.type)
    }
  }

  render() {
    const { dataSource } = this.state
@@ -168,7 +224,7 @@
        cell: EditableCell
      }
    }
    const columns = this.columns.map(col => {
    const columns = this.state.columns.map(col => {
      if (!col.editable) {
        return col
      }

 src/components/sidemenu/comtableconfig/index.jsx

@@ -3,33 +3,40 @@
// import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { Button, Card, Modal, Tabs } from 'antd'
import { Button, Card, Modal, Collapse, Input, notification } 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 MenuForm from './menuform'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
import Utils from '@/utils/utils.js'
import './index.scss'

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

class ComTableConfig extends Component {
  static propTpyes = {
    menuConfig: PropTypes.any,
    handleConfig: PropTypes.func
    menu: PropTypes.any,
    handleConfig: PropTypes.func,
    supMenuList: PropTypes.array,
    supMenu: PropTypes.object,
  }

  state = {
    dict: HeaderDict,
    config: null,
    visible: false,
    tableVisible: false,
    addType: '',
    menuformlist: null,
    formlist: null,
    formtemp: '',
    madalwidth: 520,
    card: null,
    searchloading: false,
    actionloading: false,
@@ -47,10 +54,12 @@
        setAll: 'false',
        options: [],
        dataSource: '',
        linkField: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc'
        orderType: 'asc',
        display: 'dropdown'
      }, {
        id: 1,
        uuid: Utils.getuuid(),
@@ -62,10 +71,12 @@
        setAll: 'false',
        options: [],
        dataSource: '',
        linkField: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc'
        orderType: 'asc',
        display: 'dropdown'
      }, {
        id: 2,
        uuid: Utils.getuuid(),
@@ -77,47 +88,65 @@
        setAll: 'false',
        options: [],
        dataSource: '',
        linkField: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc'
        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: ''
        class: 'default'
      }],
      columns: [{
        id: 0,
@@ -238,7 +267,6 @@
  }

  handleList = (list) => {
    console.log(list)
    let config = this.state.config
    this.setState({config: {...config, ...list}})
  }
@@ -247,7 +275,6 @@
    this.setState({
      visible: true,
      formtemp: 'search',
      madalwidth: 700,
      card: card,
      formlist: [
        {
@@ -270,7 +297,7 @@
          type: 'text',
          key: 'initval',
          label: this.state.dict['header.form.initval'],
          initVal: '',
          initVal: card.initval,
          required: false
        },
        {
@@ -286,6 +313,9 @@
            MenuID: 'select',
            text: this.state.dict['header.form.select']
          }, {
            MenuID: 'link',
            text: this.state.dict['header.form.link']
          }, {
            MenuID: 'dateday',
            text: this.state.dict['header.form.dateday']
          }, {
@@ -298,6 +328,7 @@
          key: 'resourceType',
          label: this.state.dict['header.form.resourceType'],
          initVal: card.resourceType,
          required: true,
          options: [{
            MenuID: '0',
            text: this.state.dict['header.form.custom']
@@ -337,6 +368,14 @@
        },
        {
          type: 'text',
          key: 'linkField',
          label: this.state.dict['header.form.linkField'],
          initVal: card.linkField,
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'valueField',
          label: this.state.dict['header.form.valueField'],
          initVal: card.valueField,
@@ -371,6 +410,20 @@
            MenuID: 'desc',
            text: this.state.dict['header.form.desc']
          }]
        },
        {
          type: 'select',
          key: 'display',
          label: this.state.dict['header.form.display'],
          initVal: card.display,
          required: true,
          options: [{
            MenuID: 'dropdown',
            text: this.state.dict['header.form.dropdown']
          }, {
            MenuID: 'button',
            text: this.state.dict['header.form.button']
          }]
        }
      ]
    })
@@ -380,7 +433,6 @@
    this.setState({
      visible: true,
      formtemp: 'action',
      madalwidth: 520,
      card: card,
      formlist: [
        {
@@ -388,6 +440,62 @@
          key: 'label',
          label: this.state.dict['header.form.name'],
          initVal: card.label,
          required: true,
          readonly: false
        },
        {
          type: 'select',
          key: 'OpenType',
          label: this.state.dict['header.form.openType'],
          initVal: card.OpenType,
          required: true,
          options: [{
            MenuID: 'pop',
            text: this.state.dict['header.form.pop']
          }, {
            MenuID: 'prompt',
            text: this.state.dict['header.form.prompt']
          }, {
            MenuID: 'exec',
            text: this.state.dict['header.form.exec']
          }, {
            MenuID: 'tab',
            text: this.state.dict['header.form.tab']
          }, {
            MenuID: 'blank',
            text: this.state.dict['header.form.blank']
          }, {
            MenuID: 'newpage',
            text: this.state.dict['header.form.newpage']
          }]
        },
        {
          type: 'select',
          key: 'pageTemplate',
          label: this.state.dict['header.form.pageTemplate'],
          initVal: card.pageTemplate,
          required: true,
          options: []
        },
        {
          type: 'radio',
          key: 'intertype',
          label: this.state.dict['header.form.intertype'],
          initVal: card.intertype,
          required: true,
          options: [{
            MenuID: 'inner',
            text: this.state.dict['header.form.interface.inner']
          }, {
            MenuID: 'outer',
            text: this.state.dict['header.form.interface.outer']
          }]
        },
        {
          type: 'text',
          key: 'interface',
          label: this.state.dict['header.form.interface'],
          initVal: card.interface,
          required: true,
          readonly: false
        },
@@ -420,30 +528,12 @@
          }]
        },
        {
          type: 'select',
          key: 'OpenType',
          label: this.state.dict['header.form.openType'],
          initVal: card.OpenType,
          required: true,
          options: [{
            MenuID: 'pop',
            text: this.state.dict['header.form.pop']
          }, {
            MenuID: 'prompt',
            text: this.state.dict['header.form.prompt']
          }, {
            MenuID: 'exec',
            text: this.state.dict['header.form.exec']
          }, {
            MenuID: 'tab',
            text: this.state.dict['header.form.tab']
          }, {
            MenuID: 'newpage',
            text: this.state.dict['header.form.newpage']
          }, {
            MenuID: 'blank',
            text: this.state.dict['header.form.blank']
          }]
          type: 'text',
          key: 'callbackFunc',
          label: this.state.dict['header.form.callbackFunc'],
          initVal: card.callbackFunc,
          required: false,
          readonly: false
        },
        {
          type: 'select',
@@ -458,7 +548,7 @@
          key: 'class',
          label: this.state.dict['header.form.class'],
          initVal: card.class,
          required: true,
          required: false,
          options: []
        }
      ]
@@ -469,7 +559,6 @@
    this.setState({
      visible: true,
      formtemp: 'columns',
      madalwidth: 520,
      card: card,
      formlist: [
        {
@@ -505,7 +594,7 @@
          }]
        },
        {
          type: 'select',
          type: 'radio',
          key: 'Hide',
          label: this.state.dict['header.form.Hide'],
          initVal: card.Hide,
@@ -545,6 +634,7 @@

  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) {
@@ -598,24 +688,110 @@
    }, 300)
  }

  changeTemplate = () => {
    this.props.handleConfig('template')
  }

  submitConfig = () => {
    this.props.handleConfig()
    this.menuformRef.handleConfirm().then(res => {
      console.log(res)
    })
    // this.props.handleConfig('')
  }

  cancelConfig = () => {
    this.props.handleConfig()
    this.props.handleConfig('')
  }

  queryField = (type, name) => {
    if (!name) {
      notification.warning({
        top: 92,
        message: '请输入表名！',
        duration: 10
      })
      return
    }
    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
          })
        }
      })
    }
  }

  addFieldSubmit = () => {
    console.log(13)
  }

  cancelFieldSubmit = () => {
    this.setState({
      tableVisible: false,
      addType: ''
    })
  }

  UNSAFE_componentWillMount () {
    if (!this.props.menuConfig) {
      this.setState({
        config: JSON.parse(JSON.stringify((this.state.baseconfig)))
      })
    let _config = ''
    if (!this.props.menu.LongParam) {
      _config = JSON.parse(JSON.stringify((this.state.baseconfig)))
    } else {
      this.setState({
        config: this.props.menuConfig
      })
      _config = this.props.menu.LongParam
    }
    this.setState({
      config: _config,
      menuformlist: [
        {
          type: 'select',
          key: 'parentId',
          label: this.state.dict['header.menu.supMenu'],
          initVal: this.props.supMenu.MenuID,
          required: true,
          readonly: false,
          options: this.props.supMenuList
        },
        {
          type: 'text',
          key: 'menuName',
          label: this.state.dict['header.menu.menuName'],
          initVal: this.props.menu.MenuName,
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'menuNo',
          label: this.state.dict['header.menu.menuNo'],
          initVal: this.props.menu.MenuNo,
          required: true,
          readonly: false
        },
        {
          type: 'select',
          key: 'opentype',
          label: this.state.dict['header.menu.openType'],
          initVal: this.props.menu.PageParam.OpenType,
          required: true,
          options: [{
            MenuID: 'newtab',
            text: this.state.dict['header.form.tab']
          }, {
            MenuID: 'newpage',
            text: this.state.dict['header.form.newpage']
          }]
        }
      ]
    })
  }

  render () {
@@ -623,33 +799,43 @@
      <div className="common-table-board">
        <DndProvider backend={HTML5Backend}>
          <div className="tools">
            <Tabs defaultActiveKey="1">
              <TabPane tab="搜索" key="1">
                <ul className="search-element">
            <Collapse accordion defaultActiveKey="0" bordered={false}>
              <Panel header="基本信息" key="0">
                <MenuForm
                  dict={this.state.dict}
                  formlist={this.state.menuformlist}
                  wrappedComponentRef={(inst) => this.menuformRef = inst}
                />
              </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}/>)
                  })}
                </ul>
              </TabPane>
              <TabPane tab="按钮" key="2">
                <ul className="search-element">
                </div>
              </Panel>
              <Panel header="按钮" key="2">
                <div 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">
                </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}/>)
                  })}
                </ul>
              </TabPane>
            </Tabs>
                </div>
              </Panel>
            </Collapse>
          </div>
          <div className="setting">
            <Card title="页面配置" bordered={false} extra={
              <div>
                <Button type="primary" onClick={this.changeTemplate}>{this.state.dict['header.menu.template.change']}</Button>
                <Button type="primary" onClick={this.submitConfig}>{this.state.dict['header.submit']}</Button>
                <Button onClick={this.cancelConfig}>{this.state.dict['header.cancel']}</Button>
              </div>
@@ -659,6 +845,7 @@
                <DragElement
                  list={this.state.config.search}
                  type="search"
                  placeholder={this.state.dict['header.form.search.placeholder']}
                  handleList={this.handleList}
                  handleMenu={this.handleSearch}
                />}
@@ -668,6 +855,7 @@
                <DragElement
                  list={this.state.config.action}
                  type="action"
                  placeholder={this.state.dict['header.form.action.placeholder']}
                  handleList={this.handleList}
                  handleMenu={this.handleAction}
                />}
@@ -677,6 +865,7 @@
                <DragElement
                  list={this.state.config.columns}
                  type="columns"
                  placeholder={this.state.dict['header.form.column.placeholder']}
                  handleList={this.handleList}
                  handleMenu={this.handleColumn}
                />}
@@ -687,7 +876,7 @@
        <Modal
          title={this.state.dict['header.edit']}
          visible={this.state.visible}
          width={this.state.madalwidth}
          width={700}
          onCancel={this.handleCancel}
          footer={null}
          destroyOnClose
@@ -716,6 +905,17 @@
            <Button type="primary" onClick={this.handleSubmit}>{this.state.dict['header.confirm']}</Button>
          </div>
        </Modal>
        <Modal
          title={this.state.dict['header.edit']}
          visible={this.state.tableVisible}
          width={'65vw'}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          onOk={this.addFieldSubmit}
          onCancel={this.cancelFieldSubmit}
          destroyOnClose
        >
          {this.state.addType === 'search' && <div>djfiafadf</div>}
        </Modal>
      </div>
    )
  }

 src/components/sidemenu/comtableconfig/index.scss

@@ -12,17 +12,31 @@
    flex: 1;
    background: #ffffff;
    border-right: 1px solid #d9d9d9;
    .ant-tabs-nav {
      .ant-tabs-tab {
        padding: 12px 0px;
        width: 60px;
        text-align: center;
      }
      .ant-tabs-tab:not(:last-child) {
        margin: 0 20px 0 0;
    .ant-collapse-item {
      border: 0;
    }
    .ant-input-search {
      margin-top: 10px;
    }
    .ant-collapse-item.ant-collapse-item-active {
      border-bottom: 1px solid #d9d9d9;
    }
    .ant-collapse-header {
      padding: 11px 16px 10px 40px;
      border-bottom: 1px solid #d9d9d9;
    }
    .ant-collapse-content-box {
      .ant-form-item {
        margin-bottom: 10px;
        .ant-form-item-label {
          text-align: left;
          height: 25px;
          line-height: 25px;
        }
      }
    }
    .search-element {
      padding-top: 10px;
      li {
        padding: 0px 16px 10px;
        div {
@@ -175,6 +189,12 @@
          border-radius: 4px;
          min-height: 47px;
          border: 1px solid #e8e8e8;
          .column-box {
            display: flex;
          }
          .column-box:not(:first-child) {
            border-top: 1px solid #e8e8e8;
          }
          .page-card {
            position: relative;
            padding: 0px;
@@ -182,6 +202,7 @@
            > div {
              padding: 12px 8px;
              cursor: move;
              height: 100%;
            }
            .ant-table-column-sorter {
              position: relative;

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

New file
@@ -0,0 +1,102 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select, notification } from 'antd'
import './index.scss'

class MainSearch extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    formlist: PropTypes.array
  }

  getFields() {
    const { getFieldDecorator } = this.props.form
    const fields = []
    this.props.formlist.forEach((item, index) => {
      if (item.type === 'text') { // 文本搜索
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉搜索
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  getPopupContainer={() => document.getElementById('qazxcvbn')}
                >
                  {item.options.map(option =>
                    <Select.Option id={option.MenuID} title={option.text} key={option.MenuID} value={option.MenuID}>
                      {option.text}
                    </Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
      }
    })
    return fields
  }

  handleConfirm = () => {
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve(values)
        } else {
          notification.warning({
            top: 92,
            message: this.props.dict['header.menu.basemsg'],
            duration: 10
          })
          reject(err)
        }
      })
    })
  }

  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      }
    }
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form" id="qazxcvbn">
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )
  }
}

export default Form.create()(MainSearch)

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

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

@@ -1,7 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
// import { is, fromJS } from 'immutable'
import { Form, Row, Col, Input, Select, Icon, Radio } from 'antd'
import { Form, Row, Col, Input, Select, Icon, Radio, notification } from 'antd'
import moment from 'moment'
import EditTable from '../editable'
import './index.scss'
@@ -11,28 +10,31 @@
class MainSearch extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    formlist: PropTypes.any
    formlist: PropTypes.any,
    card: PropTypes.object
  }

  state = {
    card: null,
    inputType: 'text',
    selectType: 0,
    options: null,
    openType: null,
    resourceType: null,
    formlist: null
  }

  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']]
      if (value === 'select' && this.state.resourceType === '0') {
        _options = [..._options, ...['resourceType', 'setAll', 'options', 'display']]
      } else if (value === 'select' && this.state.resourceType === '1') {
        _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']]
      } else if (value === 'link' && this.state.resourceType === '0') {
        _options = [..._options, ...['resourceType', 'setAll', 'options', 'linkField', 'display']]
      } else if (value === 'link' && this.state.resourceType === '1') {
        _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'linkField', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']]
      }
      
      this.setState({
        openType: value,
        formlist: this.state.formlist.map(form => {
          form.hidden = !_options.includes(form.key)
          return form
@@ -45,13 +47,18 @@
    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']]
      if (this.state.openType === 'select' && value === '0') {
        _options = [..._options, ...['options', 'display']]
      } else if (this.state.openType === 'select' && value === '1') {
        _options = [..._options, ...['dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']]
      } else if (this.state.openType === 'link' && value === '0') {
        _options = [..._options, ...['options', 'linkField', 'display']]
      } else if (this.state.openType === 'link' && value === '1') {
        _options = [..._options, ...['dataSource', 'linkField', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']]
      }
      
      this.setState({
        resourceType: value,
        formlist: this.state.formlist.map(form => {
          form.hidden = !_options.includes(form.key)
          return form
@@ -68,9 +75,9 @@

      if (item.type === 'text') { // 文本搜索
        let placeholder = ''
        if (item.key === 'initval' && this.state.inputType === 'dateday') {
        if (item.key === 'initval' && this.state.openType === 'dateday') {
          placeholder = '例：' + moment().format('YYYY-MM-DD')
        } else if (item.key === 'initval' && this.state.inputType === 'datetime') {
        } else if (item.key === 'initval' && this.state.openType === 'datetime') {
          placeholder = '例：' + moment().format('YYYY-MM-DD HH:mm:ss')
        }
        fields.push(
@@ -121,7 +128,15 @@
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, { initialValue: item.initVal })(
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Radio.Group onChange={(e) => {this.onChange(e, item.key)}}>
                  {
                    item.options.map(option => {
@@ -155,7 +170,7 @@
      } else if (item.type === 'options') {
        fields.push(
          <Col span={20} offset={4} key={index}>
            <EditTable data={item.initVal} ref="editTable"/>
            <EditTable data={item.initVal} type={this.state.openType} ref="editTable"/>
          </Col>
        )
      }
@@ -168,19 +183,38 @@
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (values.type === 'select' && values.resourceType === '0') {
          let isvalid = true
          values.id = this.props.card.id
          values.uuid = this.props.card.uuid
          // 下拉菜单或关联菜单
          if ((values.type === 'select' || values.type === 'link') && values.resourceType === '0') {
            values.options = this.refs.editTable.state.dataSource
            values.dataSource = ''
          } else if (values.type === 'select' && values.resourceType === '1') {
            let emptys = []
            if (values.type === 'select') {
              emptys = values.options.filter(op => !(op.Value && op.Text))
            } else {
              emptys = values.options.filter(op => !(op.Value && op.Text && op.ParentID))
            }
            if (emptys.length > 0) {
              isvalid = false
            }
          } else if ((values.type === 'select' || values.type === 'link') && values.resourceType === '1') {
            values.options = []
          }

          values.id = this.props.card.id
          values.uuid = this.props.card.uuid
          resolve({
            type: 'search',
            values
          })
          if (isvalid) {
            resolve({
              type: 'search',
              values
            })
          } else {
            notification.warning({
              top: 92,
              message: this.props.dict['header.form.selectItem.error'],
              duration: 10
            })
          }
        } else {
          reject(err)
        }
@@ -194,12 +228,18 @@
    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']]
      _options = [..._options, ...['resourceType', 'setAll', 'options', 'display']]
    } else if (type === 'select' && resourceType === '1') {
      _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType']]
      _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']]
    } else if (type === 'link' && resourceType === '0') {
      _options = [..._options, ...['resourceType', 'setAll', 'options', 'linkField', 'display']]
    } else if (type === 'link' && resourceType === '1') {
      _options = [..._options, ...['resourceType', 'setAll', 'dataSource', 'linkField', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']]
    }
    
    this.setState({
      openType: type,
      resourceType: resourceType,
      formlist: formlist.map(form => {
        form.hidden = !_options.includes(form.key)
        return form

 src/components/sidemenu/editthdmenu/index.jsx

@@ -8,7 +8,7 @@
import TransferForm from '@/components/transferform'
import Utils from '@/utils/utils.js'
import DragElement from '../menuelement'
import MenuForm from '../menuform'
// import MenuForm from '../menuform'
import ComTableConfig from '../comtableconfig'
import Api from '@/api'
import zhCN from '@/locales/zh-CN/header.js'
@@ -51,11 +51,8 @@
    baseTemplates: [{
      title: '基础表格',
      type: 'CommonTable',
      url: illust['CommonTable']
    }, {
      title: '数据表格',
      type: 'datatable',
      url: illust['CommonTable']
      url: illust['CommonTable'],
      baseconfig: ''
    }]
  }

@@ -106,52 +103,33 @@
      }
      Api.getSystemConfig(param).then(res => {
        if (res.status) {
          let _LongParam = window.atob(res.LongParam)
          try {
            _LongParam = JSON.parse(_LongParam)
          } catch (e) {
            _LongParam = {
              type: 'system',
              search: [],
              action: [],
              columns: []
            }
          }
          _menu.LongParam = _LongParam
          console.log(_menu)
          // 检测模板是否存在
          let _Template = this.state.baseTemplates.filter(temp => temp.type === _menu.PageParam.Template)
          this.setState({
            editMvisible: true,
            title: this.state.dict['header.menu.editTitle'],
            type: 'edit',
            editMenu: {..._menu, LongParam: res.LongParam},
            formlist: [
              {
                type: 'select',
                key: 'parentId',
                label: this.state.dict['header.menu.supMenu'],
                initVal: this.props.supMenu.MenuID,
                required: true,
                options: this.props.supMenuList
              },
              {
                type: 'text',
                key: 'menuName',
                label: this.state.dict['header.menu.menuName'],
                initVal: menu.card.text,
                required: true,
                readonly: false
              },
              {
                type: 'text',
                key: 'menuNo',
                label: this.state.dict['header.menu.menuNo'],
                initVal: menu.card.MenuNo,
                required: true,
                readonly: false
              },
              {
                type: 'select',
                key: 'opentype',
                label: '打开方式',
                initVal: menu.card.PageParam.OpenType || 'newtab',
                required: true,
                options: [{
                  MenuID: 'newtab',
                  text: '新标签页'
                }, {
                  MenuID: 'newpage',
                  text: '新页面'
                }]
              }
            ]
            editMenu: _menu,
            tabview: _Template.length > 0 ? _menu.PageParam.Template : 'template'
          })
          if (_Template.length === 0) {
            notification.warning({
              top: 92,
              message: this.state.dict['header.menu.template.empty'],
              duration: 10
            })
          }
        } else {
          notification.warning({
            top: 92,
@@ -231,94 +209,94 @@
    }
  }

  memuHandleSubmit = () => {
    if (this.state.type === 'add') {
      // 新建菜单：提交
      this.menuFormRef.handleConfirm().then(values => {
        let param = {
          func: 'sPC_TrdMenu_Add',
          ParentID: this.props.supMenu.MenuID,
          MenuID: Utils.getuuid(),
          MenuNo: values.menuNo,
          Template: this.state.selectTemp.type,
          MenuName: values.menuName,
          Sort: (this.props.menulist.length + 1) * 10,
          PageParam: JSON.stringify({
            OpenType: values.opentype,
            Template: this.state.selectTemp.type
          }),
          LongParam: window.btoa(JSON.stringify(this.state.selectTemp.baseconfig))
        }
        this.setState({
          confirmLoading: true
        })
        Api.getSystemConfig(param).then(res => {
          if (res.status) {
            this.setState({
              confirmLoading: false,
              tabview: '',
              visible: false
            })
            this.props.reload()
            this.resetFormlist()
          } else {
            this.setState({
              confirmLoading: false
            })
            notification.warning({
              top: 92,
              message: res.message,
              duration: 10
            })
          }
        })
      }, () => {})
    } else if (this.state.type === 'edit') {
      // 编辑菜单：提交
      this.menuFormRef.handleConfirm().then(values => {
        let param = {
          func: 'sPC_TrdMenu_Upt',
          ParentID: values.parentId,
          MenuID: this.state.editMenu.MenuID,
          MenuNo: values.menuNo,
          Template: this.state.editMenu.PageParam.Template || '',
          MenuName: values.menuName,
          PageParam: JSON.stringify(this.state.editMenu.PageParam),
          LongParam: this.state.editMenu.LongParam ? window.btoa(this.state.editMenu.LongParam) : ''
        }
        this.setState({
          confirmLoading: true
        })
        Api.getSystemConfig(param).then(res => {
          if (res.status) {
            this.setState({
              confirmLoading: false,
              editMvisible: false
            })
            this.props.reload()
            this.resetFormlist()
          } else {
            this.setState({
              confirmLoading: false
            })
            notification.warning({
              top: 92,
              message: res.message,
              duration: 10
            })
          }
        })
      }, () => {})
    }
  }
  // memuHandleSubmit = () => {
  //   if (this.state.type === 'add') {
  //     // 新建菜单：提交
  //     this.menuFormRef.handleConfirm().then(values => {
  //       let param = {
  //         func: 'sPC_TrdMenu_Add',
  //         ParentID: this.props.supMenu.MenuID,
  //         MenuID: Utils.getuuid(),
  //         MenuNo: values.menuNo,
  //         Template: this.state.selectTemp.type,
  //         MenuName: values.menuName,
  //         Sort: (this.props.menulist.length + 1) * 10,
  //         PageParam: JSON.stringify({
  //           OpenType: values.opentype,
  //           Template: this.state.selectTemp.type
  //         }),
  //         LongParam: window.btoa(JSON.stringify(this.state.selectTemp.baseconfig))
  //       }
  //       this.setState({
  //         confirmLoading: true
  //       })
  //       Api.getSystemConfig(param).then(res => {
  //         if (res.status) {
  //           this.setState({
  //             confirmLoading: false,
  //             tabview: '',
  //             visible: false
  //           })
  //           this.props.reload()
  //           this.resetFormlist()
  //         } else {
  //           this.setState({
  //             confirmLoading: false
  //           })
  //           notification.warning({
  //             top: 92,
  //             message: res.message,
  //             duration: 10
  //           })
  //         }
  //       })
  //     }, () => {})
  //   } else if (this.state.type === 'edit') {
  //     // 编辑菜单：提交
  //     this.menuFormRef.handleConfirm().then(values => {
  //       let param = {
  //         func: 'sPC_TrdMenu_Upt',
  //         ParentID: values.parentId,
  //         MenuID: this.state.editMenu.MenuID,
  //         MenuNo: values.menuNo,
  //         Template: this.state.editMenu.PageParam.Template || '',
  //         MenuName: values.menuName,
  //         PageParam: JSON.stringify(this.state.editMenu.PageParam),
  //         LongParam: this.state.editMenu.LongParam ? window.btoa(this.state.editMenu.LongParam) : ''
  //       }
  //       this.setState({
  //         confirmLoading: true
  //       })
  //       Api.getSystemConfig(param).then(res => {
  //         if (res.status) {
  //           this.setState({
  //             confirmLoading: false,
  //             editMvisible: false
  //           })
  //           this.props.reload()
  //           this.resetFormlist()
  //         } else {
  //           this.setState({
  //             confirmLoading: false
  //           })
  //           notification.warning({
  //             top: 92,
  //             message: res.message,
  //             duration: 10
  //           })
  //         }
  //       })
  //     }, () => {})
  //   }
  // }

  memuHandleCancel = () => {
    this.setState({
      editMvisible: false,
      visible: false
    })
    this.resetFormlist()
  }
  // memuHandleCancel = () => {
  //   this.setState({
  //     editMvisible: false,
  //     visible: false
  //   })
  //   this.resetFormlist()
  // }

  thawMemuSubmit = () => {
    // 三级菜单解除冻结
@@ -389,164 +367,133 @@
  }

  useTemplate = (template) => {
    const { type, editMenu } = this.state
    // 选择模板：添加菜单时
    if (this.state.type === 'add') {
    if (type === 'add') {
      this.setState({
        tabview: template.type,
        menuConfig: template.baseconfig
        editMenu: {
          MenuID: Utils.getuuid(),
          MenuName: '',
          MenuNo: '',
          id: this.props.menulist.length,
          src: '',
          text: '',
          type: template.type,
          PageParam: {OpenType: "newtab", Template: template.type},
          LongParam: ''
        }
      })
      // this.setState({
      //   visible: true,
      //   title: this.state.dict['header.menu.addtitle'],
      //   selectTemp: template,
      //   formlist: [
      //     {
      //       type: 'text',
      //       key: 'parentId',
      //       label: this.state.dict['header.menu.supMenu'],
      //       initVal: this.props.supMenu.text,
      //       required: true,
      //       readonly: true
      //     },
      //     {
      //       type: 'text',
      //       key: 'menuName',
      //       label: this.state.dict['header.menu.menuName'],
      //       initVal: '',
      //       required: true,
      //       readonly: false
      //     },
      //     {
      //       type: 'text',
      //       key: 'menuNo',
      //       label: this.state.dict['header.menu.menuNo'],
      //       initVal: '',
      //       required: true,
      //       readonly: false
      //     },
      //     {
      //       type: 'select',
      //       key: 'opentype',
      //       label: '打开方式',
      //       initVal: 'newtab',
      //       required: true,
      //       options: [{
      //         MenuID: 'newtab',
      //         text: '新标签页'
      //       }, {
      //         MenuID: 'newpage',
      //         text: '新页面'
      //       }]
      //     }
      //   ]
      // })
    } else {
      // this.setState({
      //   tabview: this.state.selectTemp.type
      // })
    }
  }
      let _PageParam = {OpenType: editMenu.PageParam.OpenType, Template: template.type}

  submitMenuConfig = () => {
    if (this.state.type !== 'edit') {
      this.setState({
        visible: true,
        title: this.state.dict['header.menu.addtitle'],
        formlist: [
          {
            type: 'text',
            key: 'parentId',
            label: this.state.dict['header.menu.supMenu'],
            initVal: this.props.supMenu.text,
            required: true,
            readonly: true
          },
          {
            type: 'text',
            key: 'menuName',
            label: this.state.dict['header.menu.menuName'],
            initVal: '',
            required: true,
            readonly: false
          },
          {
            type: 'text',
            key: 'menuNo',
            label: this.state.dict['header.menu.menuNo'],
            initVal: '',
            required: true,
            readonly: false
          },
          {
            type: 'select',
            key: 'opentype',
            label: '打开方式',
            initVal: 'newtab',
            required: true,
            options: [{
              MenuID: 'newtab',
              text: '新标签页'
            }, {
              MenuID: 'newpage',
              text: '新页面'
            }]
          }
        ]
      })
    } else {
      console.log(this.state.editMenu)
      // confirm({
      //   title: this.state.dict['header.menu.update'].replace('@M', menu.card.text),
      //   content: '',
      //   okText: this.state.dict['header.confirm'],
      //   cancelText: this.state.dict['header.cancel'],
      //   onOk() {
      //     let param = {
      //       func: 'sPC_MainMenu_Del',
      //       MenuID: menu.card.MenuID
      //     }
      //     return Api.getSystemConfig(param).then(res => {
      //       if (res.status) {
      //         _this.props.reload()
      //       } else {
      //         notification.warning({
      //           top: 92,
      //           message: res.message,
      //           duration: 10
      //         })
      //       }
      //     })
      //   },
      //   onCancel() {}
      // })
      this.setState({
        tabview: this.state.selectTemp.type
        tabview: template.type,
        editMenu: {...editMenu, ...{LongParam: template.baseconfig, PageParam: _PageParam, type: template.type}}
      })
    }
  }

  changeTemp = () => {
    this.setState({
      editMvisible: false,
      tabview: 'template'
    })
    this.resetFormlist()
  }
  // submitMenuConfig = () => {
  //   if (this.state.type !== 'edit') {
  //     this.setState({
  //       visible: true,
  //       title: this.state.dict['header.menu.addtitle'],
  //       formlist: [
  //         {
  //           type: 'text',
  //           key: 'parentId',
  //           label: this.state.dict['header.menu.supMenu'],
  //           initVal: this.props.supMenu.text,
  //           required: true,
  //           readonly: true
  //         },
  //         {
  //           type: 'text',
  //           key: 'menuName',
  //           label: this.state.dict['header.menu.menuName'],
  //           initVal: '',
  //           required: true,
  //           readonly: false
  //         },
  //         {
  //           type: 'text',
  //           key: 'menuNo',
  //           label: this.state.dict['header.menu.menuNo'],
  //           initVal: '',
  //           required: true,
  //           readonly: false
  //         },
  //         {
  //           type: 'select',
  //           key: 'opentype',
  //           label: '打开方式',
  //           initVal: 'newtab',
  //           required: true,
  //           options: [{
  //             MenuID: 'newtab',
  //             text: '新标签页'
  //           }, {
  //             MenuID: 'newpage',
  //             text: '新页面'
  //           }]
  //         }
  //       ]
  //     })
  //   } else {
  //     console.log(this.state.editMenu)
  //     // confirm({
  //     //   title: this.state.dict['header.menu.update'].replace('@M', menu.card.text),
  //     //   content: '',
  //     //   okText: this.state.dict['header.confirm'],
  //     //   cancelText: this.state.dict['header.cancel'],
  //     //   onOk() {
  //     //     let param = {
  //     //       func: 'sPC_MainMenu_Del',
  //     //       MenuID: menu.card.MenuID
  //     //     }
  //     //     return Api.getSystemConfig(param).then(res => {
  //     //       if (res.status) {
  //     //         _this.props.reload()
  //     //       } else {
  //     //         notification.warning({
  //     //           top: 92,
  //     //           message: res.message,
  //     //           duration: 10
  //     //         })
  //     //       }
  //     //     })
  //     //   },
  //     //   onCancel() {}
  //     // })
  //     this.setState({
  //       tabview: this.state.selectTemp.type
  //     })
  //   }
  // }

  changeConfig = () => {
    this.setState({
      editMvisible: false,
      tabview: this.state.editMenu.PageParam.Template,
      menuConfig: window.atob(this.state.editMenu.LongParam)
    })
    this.resetFormlist()
  }
  // changeTemp = () => {
  //   this.setState({
  //     editMvisible: false,
  //     tabview: 'template'
  //   })
  //   this.resetFormlist()
  // }

  // changeConfig = () => {
  //   this.setState({
  //     editMvisible: false,
  //     tabview: this.state.editMenu.PageParam.Template,
  //     menuConfig: window.atob(this.state.editMenu.LongParam)
  //   })
  //   this.resetFormlist()
  // }
  
  resetFormlist = () => {
    setTimeout(() => {
      this.setState({formlist: null})
    }, 300)
  }
  // resetFormlist = () => {
  //   setTimeout(() => {
  //     this.setState({formlist: null})
  //   }, 300)
  // }

  getUsedTemplate = () => {
    Api.getSystemConfig({func: 'sPC_Get_UserTemp'}).then(res => {
@@ -576,8 +523,8 @@
    this.setState({tabview: ''})
  }

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

  UNSAFE_componentWillMount () {
@@ -662,12 +609,17 @@
          </div>
        </div>}
        {this.state.tabview === 'CommonTable' &&
          <ComTableConfig config={this.state.menuConfig} handleConfig={this.handleConfig} />
          <ComTableConfig
            menu={this.state.editMenu}
            supMenu={this.props.supMenu}
            supMenuList={this.props.supMenuList}
            handleConfig={this.handleConfig}
          />
        }
        {/* 图片预览 */}
        <Preview cancel={this.cancelPrePicture} preview={this.state.preview}/>
        {/* 添加模态框 */}
        <Modal
        {/* <Modal
          title={this.state.title}
          okText={this.state.dict['header.confirm']}
          cancelText={this.state.dict['header.cancel']}
@@ -681,9 +633,9 @@
            formlist={this.state.formlist}
            wrappedComponentRef={(inst) => this.menuFormRef = inst}
          />}
        </Modal>
        </Modal> */}
        {/* 编辑模态框 */}
        <Modal
        {/* <Modal
          title={this.state.title}
          visible={this.state.editMvisible}
          footer={null}
@@ -700,7 +652,7 @@
            <Button onClick={this.memuHandleCancel}>{this.state.dict['header.cancel']}</Button>
            <Button type="primary" onClick={this.memuHandleSubmit} loading={this.state.confirmLoading}>{this.state.dict['header.confirm']}</Button>
          </div>
        </Modal>
        </Modal> */}
        {/* 解冻菜单模态框 */}
        <Modal
          title={this.state.dict['header.thawmenu']}

 src/locales/en-US/header.js

@@ -24,6 +24,9 @@
  'header.menu.update': 'Are you sure to modify the configuration information of the menu <<@M>> ?',
  'header.menu.presave': 'Menu order has been adjusted, Please save!',
  'header.menu.resetorder': 'Are you sure to adjust the menu sequence ?',
  'header.menu.basemsg': '请完善菜单基本信息！',
  'header.menu.template.empty': '菜单模板丢失，请重新选择模板！',
  'header.menu.template.change': '切换模板',
  'header.menu.addtitle': 'The new menu',
  'header.menu.editTitle': 'The edit menu',
  'header.menu.menuID': 'Menu ID',
@@ -40,16 +43,26 @@
  '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.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.isRequired': '行设置',
  'header.form.notRequired': '不选择行',
  'header.form.requiredSgl': '选择单行',
  'header.form.required': '选择多行',
@@ -73,5 +86,20 @@
  'header.form.true': '是',
  'header.form.false': '否',
  'header.form.setAll': '设置全部项',
  'form.required.input': 'Please enter the '
  '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/header.js

@@ -24,6 +24,9 @@
  'header.menu.update': '确定修改菜单《@M》的配置信息吗？',
  'header.menu.presave': '菜单顺序已调整，请保存！',
  'header.menu.resetorder': '确认调整菜单顺序吗？',
  'header.menu.basemsg': '请完善菜单基本信息！',
  'header.menu.template.empty': '菜单模板丢失，请重新选择模板！',
  'header.menu.template.change': '切换模板',
  'header.menu.addtitle': '新建菜单',
  'header.menu.editTitle': '编辑菜单',
  'header.menu.menuID': '菜单ID',
@@ -40,16 +43,26 @@
  '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.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.isRequired': '行设置',
  'header.form.notRequired': '不选择行',
  'header.form.requiredSgl': '选择单行',
  'header.form.required': '选择多行',
@@ -82,6 +95,11 @@
  'header.form.orderType': '排序方式',
  'header.form.asc': '正序',
  'header.form.desc': '倒序',
  'form.required.input': '请输入'

  'header.form.linkField': '关联字段',
  'header.form.display': '显示方式',
  'header.form.dropdown': '下拉菜单',
  'header.form.button': '按钮',
  'header.form.selectItem.error': '下拉选项设置错误！',
  'form.required.input': '请输入',
  'form.required.select': '请选择'
}