2019-11-13

king

2019-11-13 8b9effb98612ee8a00d76d639a5733d12e9ecce6

 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">
        <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>
              <Button type="primary">{this.state.dict['header.submit']}</Button>
              <Button>{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}>
        <DndProvider backend={HTML5Backend}>
          <div className="tools">
            <Tabs defaultActiveKey="1">
              <TabPane tab="搜索" key="1">
                <ul 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">
                  {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" 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">
                {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}>
                />}
              </div>
              <div className="action-list">
                {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}>
                />}
              </div>
              <div className="column-list">
                {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>
                />}
              </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