2019-11-12

king

2019-11-12 b68697ccdce3f7de67c3a918701c814497b6b41a

 src/components/sidemenu/comtableconfig/index.jsx

@@ -1,15 +1,19 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
// import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { Button, Card, Modal } from 'antd'
import { Button, Card, Modal, Tabs } from 'antd'
import DragElement from './dragelement'
import MenuForm from './menuform'
import SearchForm from './searchform'
import ActionForm from './actionform'
import ColumnForm from './columnform'
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

class ComTableConfig extends Component {
  static propTpyes = {
@@ -21,6 +25,12 @@
    config: null,
    visible: false,
    formlist: null,
    formtemp: '',
    madalwidth: 520,
    card: null,
    searchloading: false,
    actionloading: false,
    columnsloading: false,
    baseconfig: {
      type: 'system',
      search: [{
@@ -83,46 +93,49 @@
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName1',
        Hide: false,
        IsSort: true,
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }, {
        id: 1,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName2',
        Hide: false,
        IsSort: true,
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }, {
        id: 2,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName3',
        Hide: false,
        IsSort: true,
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }, {
        id: 3,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName4',
        Hide: false,
        IsSort: true,
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }]
    }
  }

  handlesearchList = (searchlist) => {
  handleList = (list) => {
    console.log(list)
    let config = this.state.config
    config.search = searchlist
    this.setState({config})
    this.setState({config: {...config, ...list}})
  }

  handleSearch = (card) => {
    this.setState({
      visible: true,
      formtemp: 'search',
      madalwidth: 650,
      card: card,
      formlist: [
        {
          type: 'text',
@@ -164,20 +177,191 @@
    })
  }

  handleactionList = (actionlist) => {
    let config = this.state.config
    config.action = actionlist
    this.setState({config})
  handleAction = (card) => {
    this.setState({
      visible: true,
      formtemp: 'action',
      madalwidth: 520,
      card: card,
      formlist: [
        {
          type: 'text',
          key: 'label',
          label: this.state.dict['header.form.name'],
          initVal: card.label,
          required: true,
          readonly: false
        },
        {
          type: 'select',
          key: 'Ot',
          label: this.state.dict['header.form.isRequired'],
          initVal: card.Ot,
          required: true,
          options: [{
            MenuID: 'notRequired',
            text: this.state.dict['header.form.notRequired']
          }, {
            MenuID: 'requiredSgl',
            text: this.state.dict['header.form.requiredSgl']
          }, {
            MenuID: 'required',
            text: this.state.dict['header.form.required']
          }, {
            MenuID: 'requiredOnce',
            text: this.state.dict['header.form.requiredOnce']
          }]
        },
        {
          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: 'select',
          key: 'icon',
          label: this.state.dict['header.form.icon'],
          initVal: card.icon,
          required: false,
          options: []
        },
        {
          type: 'select',
          key: 'class',
          label: this.state.dict['header.form.class'],
          initVal: card.class,
          required: true,
          options: []
        }
      ]
    })
  }

  handleAction = (card) => {
    console.log(card)
  handleColumn = (card) => {
    this.setState({
      visible: true,
      formtemp: 'columns',
      madalwidth: 520,
      card: card,
      formlist: [
        {
          type: 'text',
          key: 'label',
          label: this.state.dict['header.form.name'],
          initVal: card.label,
          required: true
        },
        {
          type: 'select',
          key: 'Align',
          label: this.state.dict['header.form.align'],
          initVal: card.Align,
          required: true,
          options: [{
            MenuID: 'left',
            text: this.state.dict['header.form.alignLeft']
          }, {
            MenuID: 'right',
            text: this.state.dict['header.form.alignRight']
          }, {
            MenuID: 'center',
            text: this.state.dict['header.form.alignCenter']
          }]
        },
        {
          type: 'select',
          key: 'Hide',
          label: this.state.dict['header.form.Hide'],
          initVal: card.Hide,
          required: true,
          options: [{
            MenuID: 'true',
            text: this.state.dict['header.form.true']
          }, {
            MenuID: 'false',
            text: this.state.dict['header.form.false']
          }]
        },
        {
          type: 'select',
          key: 'IsSort',
          label: this.state.dict['header.form.IsSort'],
          initVal: card.IsSort,
          required: true,
          options: [{
            MenuID: 'true',
            text: this.state.dict['header.form.true']
          }, {
            MenuID: 'false',
            text: this.state.dict['header.form.false']
          }]
        },
        {
          type: 'spinner',
          key: 'Width',
          label: this.state.dict['header.form.columnWidth'],
          initVal: card.Width,
          required: true
        }
      ]
    })
  }

  handleSubmit = () => {
    this.formRef.handleConfirm().then(values => {
      console.log(values)
    this.formRef.handleConfirm().then(res => {
      let _config = this.state.config
      _config[res.type] = _config[res.type].map(item => {
        if (item.uuid === res.values.uuid) {
          return res.values
        } else {
          return item
        }
      })
      this.setState({
        config: _config,
        [res.type + 'loading']: true,
        visible: false
      })
      this.resetFrom()
    })
  }

  deleteElement = () => {
    let _config = this.state.config
    _config[this.state.formtemp] = _config[this.state.formtemp].filter(item => {
      if (item.uuid === this.state.card.uuid) {
        return false
      } else {
        return true
      }
    })
    this.setState({
      config: _config,
      [this.state.formtemp + 'loading']: true,
      visible: false
    })
    this.resetFrom()
  }

  handleCancel = () => {
@@ -190,9 +374,26 @@
  resetFrom = () => {
    setTimeout(() => {
      this.setState({
        formtemp: '',
        searchloading: false,
        actionloading: false,
        columnsloading: false,
        formlist: null
      })
    }, 300)
  }

  dragstart = (e) => {
    console.log(e.target.id)
  }

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

  drop = (e) => {
    e.preventDefault()
    console.log(13)
  }

  UNSAFE_componentWillMount () {
@@ -207,16 +408,35 @@
    }
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (!is(fromJS(this.props.menulist), fromJS(nextProps.menulist))) {

    }
  }

  render () {
    return (
      <div className="common-table-board">
        <div className="tools"></div>
        <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>
              </ul>
            </TabPane>
            <TabPane tab="按钮" key="2">
              按钮
            </TabPane>
            <TabPane tab="显示列" key="3">
              列
            </TabPane>
          </Tabs>
        </div>
        <div className="setting">
          <Card title="页面配置" bordered={false} extra={
            <div>
@@ -224,23 +444,33 @@
              <Button>{this.state.dict['header.cancel']}</Button>
            </div>
          } style={{ width: '100%' }}>
            <div className="search-list">
              {this.state.config.search && <DndProvider backend={HTML5Backend}>
            <div className="search-list" onDragOver={this.dragover} onDrop={this.drop}>
              {this.state.config.search && !this.state.searchloading && <DndProvider backend={HTML5Backend}>
                <DragElement
                  list={this.state.config.search}
                  type="search"
                  handleList={this.handlesearchList}
                  handleList={this.handleList}
                  handleMenu={this.handleSearch}
                />
              </DndProvider>}
            </div>
            <div className="action-list">
              {this.state.config.action && <DndProvider backend={HTML5Backend}>
              {this.state.config.action && !this.state.actionloading && <DndProvider backend={HTML5Backend}>
                <DragElement
                  list={this.state.config.action}
                  type="action"
                  handleList={this.handleactionList}
                  handleList={this.handleList}
                  handleMenu={this.handleAction}
                />
              </DndProvider>}
            </div>
            <div className="column-list">
              {this.state.config.columns && !this.state.columnsloading && <DndProvider backend={HTML5Backend}>
                <DragElement
                  list={this.state.config.columns}
                  type="columns"
                  handleList={this.handleList}
                  handleMenu={this.handleColumn}
                />
              </DndProvider>}
            </div>
@@ -248,22 +478,36 @@
        </div>
        <Modal
          title={this.state.dict['header.edit']}
          okText={this.state.dict['header.confirm']}
          cancelText={this.state.dict['header.cancel']}
          visible={this.state.visible}
          onOk={this.handleSubmit}
          confirmLoading={this.state.confirmLoading}
          width={this.state.madalwidth}
          onCancel={this.handleCancel}
          className="commontable-edit-modal"
          footer={null}
          destroyOnClose
        >
          {this.state.formlist && <MenuForm
          {this.state.formlist && this.state.formtemp === 'search' && <SearchForm
            dict={this.state.dict}
            formlist={this.state.formlist}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />}
          {this.state.formlist && this.state.formtemp === 'action' && <ActionForm
            dict={this.state.dict}
            card={this.state.card}
            formlist={this.state.formlist}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />}
          {this.state.formlist && this.state.formtemp === 'columns' && <ColumnForm
            dict={this.state.dict}
            card={this.state.card}
            formlist={this.state.formlist}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />}
          <div className="edit-modal-footer">
            <Button type="danger" onClick={this.deleteElement}>{this.state.dict['header.delete']}</Button>
            <Button onClick={this.handleCancel}>{this.state.dict['header.cancel']}</Button>
            <Button type="primary" onClick={this.handleSubmit}>{this.state.dict['header.confirm']}</Button>
          </div>
        </Modal>
      </div>
      
    )
  }
}