2019-11-15

king

2019-11-15 d3edd6d592db12fbec67e2700d168e07546aed29

 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>
    )
  }