2019-12-06

king

2019-12-06 2cb65d99c9aebf8293cb2838fcfe3e09fb2739ce

 src/templates/modalconfig/index.jsx

@@ -3,15 +3,13 @@
import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { Button, Card, Modal, Collapse, notification, Select, List, Icon } from 'antd'
import { Button, Card, Modal, Collapse, notification, Select, List, Icon, Empty } 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 ModalForm from './modalform'
import SettingForm from './settingform'
// import EditCard from './editcard'
import EditCard from './editcard'
import MenuForm from './menuform'
import zhCN from '@/locales/zh-CN/comtable.js'
import enUS from '@/locales/en-US/comtable.js'
@@ -42,11 +40,8 @@
    fields: null, // 搜索条件及显示列，可选字段
    modalformlist: null, // 基本信息表单字段
    formlist: null, // 搜索条件、按钮、显示列表单字段
    formtemp: '', // 表单类型，显示列、按钮、搜索条件
    card: null, // 编辑元素
    searchloading: false, // 搜索条件加载中
    actionloading: false, // 按钮加载中
    columnsloading: false, // 显示列加载中
    loading: false, // 搜索条件加载中
    menuloading: false, // 菜单保存中
    settingVisible: false, // 全局配置模态框
    closeVisible: false, // 关闭模态框
@@ -58,10 +53,22 @@
  UNSAFE_componentWillMount () {
    const {menu, editAction} = this.props

    let _config = JSON.parse(JSON.stringify((Source.baseConfig)))
    let _config = ''
    let _operaType = 'add'
    if (editAction.pageParam) {
      _config = editAction.pageParam
      _operaType = 'edit'
    } else {
      _config = JSON.parse(JSON.stringify((Source.baseConfig)))
    }

    if (!_config.setting.title) {
      _config.setting.title = editAction.label
    }
    
    this.setState({
      config: _config,
      operaType: _operaType,
      selectedTables: _config.tables || [],
      modalformlist: [
        {
@@ -77,22 +84,6 @@
          key: 'btnName',
          label: '按钮名称',
          initVal: editAction.label,
          required: true,
          readonly: true
        },
        {
          type: 'text',
          key: 'menuNo',
          label: this.state.dict['header.menu.menuNo'],
          initVal: menu.MenuNo,
          required: true,
          readonly: true
        },
        {
          type: 'text',
          key: 'opentype',
          label: this.state.dict['header.menu.openType'],
          initVal: '弹窗（表单）',
          required: true,
          readonly: true
        }
@@ -185,36 +176,28 @@
    })
  }

  handleList = (listObj) => {
    let config = this.state.config
    if (this.state.operaType === 'add') {
      let key = Object.keys(listObj)[0]
      let newlength = listObj[key].length
      if (newlength > config[key].length) {
        listObj[key] = listObj[key].filter(item => !item.origin)
      }
      if (newlength > listObj[key].length) {
  handleList = (list) => {
    let _config = JSON.parse(JSON.stringify(this.state.config))

    if (list.length > _config.fields.length) {
      _config.fields = list.filter(item => !item.origin)
        this.setState({
          [key + 'loading']: true,
          config: {...config, ...listObj}
        })
        setTimeout(() => {
        loading: true,
        config: _config
      }, () => {
          this.setState({
            [key + 'loading']: false
          loading: false
          })
        }, 100)
      })
      } else {
        this.setState({config: {...config, ...listObj}})
      }
    } else {
      this.setState({config: {...config, ...listObj}})
      _config.fields = list
      this.setState({config: _config})
    }
  }

  handleSearch = (card) => {
  handleForm = (card) => {
    this.setState({
      visible: true,
      formtemp: 'search',
      card: card,
      formlist: [
        {
@@ -234,34 +217,40 @@
          readonly: false
        },
        {
          type: 'text',
          key: 'initval',
          label: this.state.dict['header.form.initval'],
          initVal: card.initval,
          required: false
        },
        {
          type: 'select',
          key: 'type',
          label: this.state.dict['header.form.type'],
          initVal: card.type,
          required: true,
          options: [{
            MenuID: 'text',
            value: 'text',
            text: this.state.dict['header.form.text']
          }, {
            MenuID: 'select',
            value: 'select',
            text: this.state.dict['header.form.select']
          }, {
            MenuID: 'link',
            value: 'link',
            text: this.state.dict['header.form.link']
          }, {
            MenuID: 'date',
            value: 'date',
            text: this.state.dict['header.form.dateday']
          }, {
            MenuID: 'datetime',
            text: this.state.dict['header.form.datetime']
            value: 'dateweek',
            text: this.state.dict['header.form.dateweek']
          }, {
            value: 'datemonth',
            text: this.state.dict['header.form.datemonth']
          }, {
            value: 'daterange',
            text: this.state.dict['header.form.daterange']
          }]
        },
        {
          type: 'text',
          key: 'initval',
          label: this.state.dict['header.form.initval'],
          initVal: card.initval,
          required: false
        },
        {
          type: 'radio',
@@ -270,10 +259,10 @@
          initVal: card.resourceType || '0',
          required: true,
          options: [{
            MenuID: '0',
            value: '0',
            text: this.state.dict['header.form.custom']
          }, {
            MenuID: '1',
            value: '1',
            text: this.state.dict['header.form.datasource']
          }]
        },
@@ -283,10 +272,10 @@
          label: this.state.dict['header.form.setAll'],
          initVal: card.setAll || 'false',
          options: [{
            MenuID: 'true',
            value: 'true',
            text: this.state.dict['header.form.true']
          }, {
            MenuID: 'false',
            value: 'false',
            text: this.state.dict['header.form.false']
          }]
        },
@@ -344,25 +333,11 @@
          label: this.state.dict['header.form.orderType'],
          initVal: card.orderType || 'asc',
          options: [{
            MenuID: 'asc',
            value: 'asc',
            text: this.state.dict['header.form.asc']
          }, {
            MenuID: 'desc',
            value: 'desc',
            text: this.state.dict['header.form.desc']
          }]
        },
        {
          type: 'select',
          key: 'display',
          label: this.state.dict['header.form.display'],
          initVal: card.display || 'dropdown',
          required: true,
          options: [{
            MenuID: 'dropdown',
            text: this.state.dict['header.form.dropdown']
          }, {
            MenuID: 'button',
            text: this.state.dict['header.form.button']
          }]
        }
      ]
@@ -371,70 +346,56 @@

  handleSubmit = () => {
    this.formRef.handleConfirm().then(res => {
      let _config = this.state.config

      if (this.state.operaType === 'add') {
        _config[res.type] = _config[res.type].map(item => {
          if (item.uuid === res.values.uuid) {
            return res.values
      let _config = JSON.parse(JSON.stringify(this.state.config))
      console.log(res)
      _config.fields = _config.fields.map(item => {
        if (item.uuid === res.uuid) {
          return res
          } else {
            return item
          }
        })
        _config[res.type] = _config[res.type].filter(item => !item.origin)
      } else {
        _config[res.type] = _config[res.type].map(item => {
          if (item.uuid === res.values.uuid) {
            return res.values
          } else {
            return item
          }
        })
      }
      _config.fields = _config.fields.filter(item => !item.origin)

      this.setState({
        config: _config,
        [res.type + 'loading']: true,
        loading: true,
        visible: false
      }, () => {
        this.setState({
          loading: 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) {
  closeForm = (card) => {
    let _this = this

    confirm({
      content: `确定删除<<${card.label}>>吗？`,
      okText: this.state.dict['header.confirm'],
      cancelText: this.state.dict['header.cancel'],
      onOk() {
        let _config = JSON.parse(JSON.stringify(_this.state.config))
        _config.fields = _config.fields.filter(item => {
          if (item.uuid === card.uuid) {
        return false
      } else {
        return true
      }
    })
    this.setState({
        _this.setState({
      config: _config,
      [this.state.formtemp + 'loading']: true,
      visible: false
          loading: true
        }, () => {
          _this.setState({
            loading: false
    })
    this.resetFrom()
  }

  handleCancel = () => {
    this.setState({
      visible: false
    })
    this.resetFrom()
  }

  resetFrom = () => {
    setTimeout(() => {
      this.setState({
        // formtemp: '',
        searchloading: false,
        actionloading: false,
        columnsloading: false
        // formlist: null
      },
      onCancel() {}
      })
    }, 10)
  }

  changeTemplate = () => {
@@ -445,26 +406,11 @@
    const { menu } = this.props
    const { config, originMenu } = this.state
    this.menuformRef.handleConfirm().then(res => {
      if (config.search[0] && config.search[0].origin) {
      
      if (!config.fields[0] && config.fields[0].origin) {
        notification.warning({
          top: 92,
          message: '请设置搜索条件',
          duration: 10
        })
        return
      }
      if (config.action[0] && config.action[0].origin) {
        notification.warning({
          top: 92,
          message: '请设置按钮',
          duration: 10
        })
        return
      }
      if (config.columns[0] && config.columns[0].origin) {
        notification.warning({
          top: 92,
          message: '请设置显示列',
          message: '请添加表单',
          duration: 10
        })
        return
@@ -485,9 +431,8 @@
        return
      }

      if (this.state.operaType === 'add') {
        let param = {
          func: 'sPC_TrdMenu_Add',
        func: 'sPC_ButtonParam_AddUpt',
          ParentID: res.parentId,
          MenuID: menu.MenuID,
          MenuNo: res.menuNo,
@@ -530,6 +475,9 @@
            })
          }
        })

      if (this.state.operaType === 'add') {
        
      } else {
        let param = {
          func: 'sPC_TrdMenu_Upt',
@@ -631,7 +579,7 @@
    }
  }

  queryField = (type) => {
  queryField = () => {
    const {selectedTables, tableColumns, config} = this.state
    if (selectedTables.length === 0) {
      notification.warning({
@@ -649,22 +597,13 @@
      })
    })

    if (type === 'search') {
      config.search.forEach(item => {
    config.fields.forEach(item => {
        if (columns.has(item.field)) {
          columns.set(item.field, {...item, selected: true, type: item.type})
        }
      })
    } else if (type === 'columns') {
      config.columns.forEach(item => {
        if (columns.has(item.field)) {
          columns.set(item.field, {...item, selected: true, type: item.type})
        }
      })
    }

    this.setState({
      addType: type,
      tableVisible: true,
      fields: [...columns.values()]
    })
@@ -673,26 +612,28 @@
  addFieldSubmit = () => {
    if (!this.state.fields || this.state.fields.length === 0) {
      this.setState({
        tableVisible: false,
        addType: ''
        tableVisible: false
      })
    }

    const {addType, config} = this.state
    let _config = JSON.parse(JSON.stringify(this.state.config))

    let cards = this.refs.searchcard.getSelectedCard()
    let cards = this.refs.searchcard.state.selectCards
    let columns = new Map()
    cards.forEach(card => {
      columns.set(card.field, card)
    })

    let items = []
    if (addType === 'search') {
      config.search.forEach(item => {
    _config.fields.forEach(item => {
        if (columns.has(item.field)) {
          let cell = columns.get(item.field)

          if (cell.selected) {
        if (cell.selected && cell.type === item.type) { // 数据未修改
          items.push(item)
        } else if (cell.selected) { // 数据类型修改
          item.type = cell.type
          item.initval = ''
            items.push(item)
          }
          columns.delete(item.field)
@@ -703,7 +644,7 @@

      let _columns = [...columns.values()]
      let indexes = items.map(card => {return card.id})
      let id = Math.max(...indexes, 0)
    let id = Math.max(...indexes, 0) + 1

      _columns.forEach(item => {
        if (item.selected) {
@@ -723,68 +664,23 @@
            valueText: '',
            orderBy: '',
            orderType: 'asc',
            display: 'dropdown'
          }

          items.push(newcard)
          id++
        }
      })
    } else {
      config.columns.forEach(item => {
        if (columns.has(item.field)) {
          let cell = columns.get(item.field)

          if (cell.selected) {
            items.push(item)
          }
          columns.delete(item.field)
        } else if (!item.origin) {
          items.push(item)
        }
      })

      let _columns = [...columns.values()]
      let indexes = items.map(card => {return card.id})
      let id = Math.max(...indexes, 0)

      _columns.forEach(item => {
        if (item.selected) {
          let newcard = {
            id: id,
            uuid: Utils.getuuid(),
            Align: 'left',
            label: item.label,
            field: item.field,
            Hide: 'false',
            IsSort: 'true',
            type: 'text',
            Width: 120
          }

          items.push(newcard)
          id++
        }
      })
    }
    _config.fields = items

    this.setState({
      tableVisible: false,
      [addType + 'loading']: true,
      addType: '',
      config: {...config, [addType]: items}
    })
    setTimeout(() => {
      loading: true,
      config: _config
    }, () => {
      this.setState({
        [addType + 'loading']: false
        loading: false
      })
    }, 100)
  }

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

@@ -811,16 +707,6 @@
              } else if (/^decimal/.test(_type)) {
                _decimal = _type.split(',')[1]
                _decimal = parseInt(_decimal)
                if (_decimal > 4) {
                  _decimal = 4
                }
                _type = 'number'
              } else if (/^decimal/.test(_type)) {
                _decimal = _type.split(',')[1]
                _decimal = parseInt(_decimal)
                if (_decimal > 4) {
                  _decimal = 4
                }
                _type = 'number'
              } else if (/^datetime/.test(_type)) {
                _type = 'datetime'
@@ -877,19 +763,20 @@
    })
  }

  cancelSetting = () => {
    this.setState({
      settingVisible: false
    })
  }

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

    return (
      <div className="modal-form-board">
        <DndProvider backend={HTML5Backend}>
          <div className="tools">
            <Collapse accordion defaultActiveKey="0" bordered={false}>
              <Panel header="基本信息" key="0" id="modal-basedata">
                <MenuForm
                  dict={this.state.dict}
                  formlist={this.state.modalformlist}
                  wrappedComponentRef={(inst) => this.menuformRef = inst}
                />
                <MenuForm
                  dict={this.state.dict}
                  formlist={this.state.modalformlist}
@@ -932,7 +819,7 @@
                    return (<SourceElement key={index} content={item}/>)
                  })}
                </div>
                <Button type="primary" block onClick={() => this.queryField('search')}>添加表单</Button>
                <Button type="primary" block onClick={() => this.queryField()}>添加表单</Button>
              </Panel>
            </Collapse>
          </div>
@@ -944,31 +831,51 @@
              </div>
            } style={{ width: '100%' }}>
              <Icon type="setting" onClick={this.changeSetting} />
              <div className="search-list">
                {<DragElement
                  list={this.state.config.search}
                  type="search"
                  placeholder={this.state.dict['header.form.search.placeholder']}
              <div className="ant-modal-content" style={{width: config.setting.width + '%'}}>
                <button type="button" className="ant-modal-close">
                  <span className="ant-modal-close-x"><Icon type="close"/></span>
                </button>
                <div className="ant-modal-header">
                  <div className="ant-modal-title">{config.setting.title}</div>
                </div>
                <div className="ant-modal-body">
                  <div className="modal-form">
                    {!this.state.loading ?
                      <DragElement
                        list={config.fields}
                        setting={config.setting}
                        placeholder={this.state.dict['header.form.modal.placeholder']}
                  handleList={this.handleList}
                  handleMenu={this.handleSearch}
                />}
                        handleForm={this.handleForm}
                        closeForm={this.closeForm}
                      /> : null
                    }
                  </div>
                </div>
                <div className="ant-modal-footer">
                  <div>
                    <button type="button" className="ant-btn"><span>取 消</span></button>
                    <button type="button" className="ant-btn ant-btn-primary"><span>确 定</span></button>
                  </div>
                  <div className="action-mask"></div>
                </div>
              </div>
            </Card>
          </div>
        </DndProvider>
        {/* <Modal
        <Modal
          title={this.state.dict['header.edit']}
          visible={this.state.visible}
          width={700}
          onCancel={this.handleCancel}
          footer={[
            <Button key="delete" type="danger" onClick={this.deleteElement}>{this.state.dict['header.delete']}</Button>,
            <Button key="cancel" onClick={this.handleCancel}>{this.state.dict['header.cancel']}</Button>,
            <Button key="confirm" type="primary" onClick={this.handleSubmit}>{this.state.dict['header.confirm']}</Button>
          ]}
          onCancel={() => {
            this.setState({
              visible: false
            })
          }}
          onOk={this.handleSubmit}
          destroyOnClose
        >
          {this.state.formtemp === 'search' && <SearchForm
          {<ModalForm
            dict={this.state.dict}
            formlist={this.state.formlist}
            card={this.state.card}
@@ -981,29 +888,34 @@
          width={'65vw'}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          onOk={this.addFieldSubmit}
          onCancel={this.cancelFieldSubmit}
          onCancel={() => {
            this.setState({
              tableVisible: false
            })
          }}
          destroyOnClose
        >
          {this.state.addType === 'search' && this.state.fields.length > 0 &&
            <EditCard data={this.state.fields} ref="searchcard" type="search" />
          }
          {this.state.addType === 'columns' && this.state.fields.length > 0 &&
            <EditCard data={this.state.fields} ref="searchcard" type="columns" />
          {this.state.fields && this.state.fields.length > 0 ?
            <EditCard data={this.state.fields} ref="searchcard" type="search" /> : null
          }
          {(!this.state.fields || this.state.fields.length === 0) &&
            <Empty />
          }
        </Modal> */}
        </Modal>
        <Modal
          title={this.state.dict['header.edit']}
          visible={this.state.settingVisible}
          width={700}
          onOk={this.settingSave}
          onCancel={this.cancelSetting}
          onCancel={() => {
            this.setState({
              settingVisible: false
            })
          }}
          destroyOnClose
        >
          <SettingForm
            data={this.state.config.setting}
            data={config.setting}
            dict={this.state.dict}
            wrappedComponentRef={(inst) => this.settingRef = inst}
          />