2019-12-04

king

2019-12-04 a5f99a5f0e2035851997221bc2430f8cfd1dc146

2019-12-04

 public/options.js

@@ -3,11 +3,11 @@
  appkey: '20191106103859640976D6E924E464D029CF0',
  mainSystemApi: '',
  title: '',
  platName: '',
  logo: '',
  bgImage: '',
  platName: '',
  copyright: '',
  ICP: '',
  copyRight: '',
  icp: '',
  bgColor: '',
  lineColor: ''
}

 src/locales/en-US/comtable.js

@@ -28,6 +28,7 @@
  'header.form.column.target': '已添加',
  'header.form.column.itemUnit': '项',
  'header.form.column.itemsUnit': '项',
  'header.form.column.action': 'Action',
  'header.form.name': 'Name',
  'header.form.field': '字段',
  'header.form.func': '函数名',
@@ -107,6 +108,10 @@
  'header.form.display': '显示方式',
  'header.form.dropdown': '下拉菜单',
  'header.form.button': '按钮',
  'header.form.style': '风格',
  'header.form.order': '排列',
  'header.form.horizontal': '水平',
  'header.form.vertical': '垂直',
  'header.form.selectItem.error': '下拉选项设置错误！',
  'header.form.request.method': '请求方式',
  'form.required.input': 'Please enter the ',

 src/locales/zh-CN/comtable.js

@@ -28,6 +28,7 @@
  'header.form.column.target': '已添加',
  'header.form.column.itemUnit': '项',
  'header.form.column.itemsUnit': '项',
  'header.form.column.action': '操作',
  'header.form.name': '名称',
  'header.form.field': '字段',
  'header.form.func': '函数名',
@@ -107,6 +108,10 @@
  'header.form.display': '显示方式',
  'header.form.dropdown': '下拉菜单',
  'header.form.button': '按钮',
  'header.form.style': '风格',
  'header.form.order': '排列',
  'header.form.horizontal': '水平',
  'header.form.vertical': '垂直',
  'header.form.selectItem.error': '下拉选项设置错误！',
  'header.form.request.method': '请求方式',
  'form.required.input': '请输入',

 src/store/options.js

@@ -1,4 +1,4 @@
// 系统配置
export default {
  AppId: '2019092321511819778303670F4A640128471'
  AppId: '201912040924165801464FF1788654BC5AC73'
}

 src/tabviews/commontable/index.jsx

@@ -103,20 +103,20 @@
      })

      let _actions = config.action.filter(item => item.position === 'toolbar')
      let _operation = config.action.filter(item => item.position === 'grid')
      // let _operation = config.action.filter(item => item.position === 'grid')

      if (_operation.length > 0) {
        _columns.push({
          Align: 'center',
          uuid: Utils.getuuid(),
          IsSort: 'false',
          Width: 120,
          type: 'operation',
          style: 'button',
          label: this.state.dict['main.column.operation'],
          operations: _operation
        })
      }
      // if (_operation.length > 0) {
      //   _columns.push({
      //     Align: 'center',
      //     uuid: Utils.getuuid(),
      //     IsSort: 'false',
      //     Width: 120,
      //     type: 'action',
      //     style: 'button',
      //     label: this.state.dict['main.column.operation'],
      //     operations: _operation
      //   })
      // }

      this.setState({
        config: config,

 src/tabviews/datamanage/action/index.jsx

@@ -74,6 +74,49 @@
    let _this = this
    let datalist = this.props.gettableselected() || []

    if (item.Action === 'ExportExcel') {
      return
      // this.submitaction(item, datalist, ID[0], (BID.length === 1 ? BID[0] : ''))
      //   .then(res => {
      //     if (Array.isArray(res)) {
      //       let iserror = false
      //       res.forEach(result => {
      //         if (!result.status && !iserror) {
      //           notification.error({
      //             top: 92,
      //             message: result.message,
      //             duration: 15
      //           })
      //           iserror = true
      //         }
      //       })
      //       if (!iserror) {
      //         notification.success({
      //           top: 92,
      //           message: _this.props.dict['main.action.confirm.success']
      //         })

      //         _this.props.refreshdata(item.ReloadForm) // 刷新页面
      //       }
      //     } else {
      //       if (res.status) {
      //         notification.success({
      //           top: 92,
      //           message: _this.props.dict['main.action.confirm.success']
      //         })
              
      //         _this.props.refreshdata(item.ReloadForm) // 刷新页面
      //       } else {
      //         notification.error({
      //           top: 92,
      //           message: res.message,
      //           duration: 15
      //         })
      //       }
      //     }
      //   })
    }

    /************* 校验列表数据选择是否正确 **************/

    if ((item.Ot === 'requiredSgl' || item.Ot === 'required' || item.Ot === 'requiredOnce') && datalist.length === 0) {

 src/tabviews/datamanage/search/index.jsx

@@ -4,10 +4,10 @@
import moment from 'moment'
import './index.scss'

const {MonthPicker, WeekPicker} = DatePicker
const dateFormat = 'YYYY-MM-DD'
const weekFormat = 'YYYYMMDD'
const monthFormat = 'YYYY-MM'
// const {MonthPicker, WeekPicker} = DatePicker
// const dateFormat = 'YYYY-MM-DD'
// const weekFormat = 'YYYYMMDD'
// const monthFormat = 'YYYY-MM'

class MainSearch extends Component {
  static propTpyes = {
@@ -24,12 +24,6 @@
    let formats = {}
    let match = {}
    this.props.searchlist.forEach(item => {
      if (item.Type === 'date') {
        // formats[item.FieldName] = dateFormat
        formats[item.FieldName] = weekFormat
      } else if (item.ID === 'WHE1400200905') {
        formats[item.FieldName] = monthFormat
      }
      match[item.FieldName] = item.Op
    })
    this.setState({
@@ -72,37 +66,50 @@
          </Col>
        )
      } else if (item.Type === 'date') { // 时间搜索
        if (item.ID === 'WHE14002009024') {
          fields.push(
            <Col span={6} key={index}>
              <Form.Item label={item.label}>
                {getFieldDecorator(item.FieldName, {initialValue: moment('2019-09-14', dateFormat) })(
                  <DatePicker format={dateFormat} />
                )}
              </Form.Item>
            </Col>
          )
        } else if (item.ID === 'WHE1400200905') {
          fields.push(
            <Col span={6} key={index}>
              <Form.Item label={item.label}>
                {getFieldDecorator(item.FieldName, {initialValue: moment('2019-09', monthFormat) })(
                  <MonthPicker format={monthFormat} />
                )}
              </Form.Item>
            </Col>
          )
        } else if (item.ID === 'WHE1400200902') {
          fields.push(
            <Col span={6} key={index}>
              <Form.Item label={item.label}>
                {getFieldDecorator(item.FieldName, {initialValue: moment('20190906', weekFormat) })(
                  <WeekPicker />
                )}
              </Form.Item>
            </Col>
          )
        let _initval = null
        if (item.InitVal) {
          _initval = moment().subtract(parseInt(item.InitVal), 'days')
        }
        fields.push(
          <Col span={6} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.FieldName, {initialValue: _initval })(
                <DatePicker />
              )}
            </Form.Item>
          </Col>
        )
        // if (item.ID === 'WHE14002009024') {
        //   fields.push(
        //     <Col span={6} key={index}>
        //       <Form.Item label={item.label}>
        //         {getFieldDecorator(item.FieldName, {initialValue: moment('2019-09-14', dateFormat) })(
        //           <DatePicker format={dateFormat} />
        //         )}
        //       </Form.Item>
        //     </Col>
        //   )
        // } else if (item.ID === 'WHE1400200905') {
        //   fields.push(
        //     <Col span={6} key={index}>
        //       <Form.Item label={item.label}>
        //         {getFieldDecorator(item.FieldName, {initialValue: moment('2019-09', monthFormat) })(
        //           <MonthPicker format={monthFormat} />
        //         )}
        //       </Form.Item>
        //     </Col>
        //   )
        // } else if (item.ID === 'WHE1400200902') {
        //   fields.push(
        //     <Col span={6} key={index}>
        //       <Form.Item label={item.label}>
        //         {getFieldDecorator(item.FieldName, {initialValue: moment('20190906', weekFormat) })(
        //           <WeekPicker />
        //         )}
        //       </Form.Item>
        //     </Col>
        //   )
        // }
      }
    })

@@ -153,14 +160,11 @@
    Object.keys(searches).forEach(key => {
      let val = searches[key] || ''
      if (searches[key] && typeof(searches[key]) === 'object') {
        if (this.state.formats[key] === weekFormat) {
          val = moment(searches[key]).startOf('week').format(this.state.formats[key]) + ' ' + moment(searches[key]).endOf('week').format(this.state.formats[key])
        } else {
          val = moment(searches[key]).format(this.state.formats[key])
        }
        val = moment(searches[key]).format('YYYY-MM-DD')
      }
      search[key] = val
    })

    let valid = true // 校验必填项
    this.props.searchlist.forEach(item => {
      let required = false

 src/templates/comtableconfig/dragelement/index.jsx

@@ -1,13 +1,13 @@
import React, { useState } from 'react'
import { useDrop } from 'react-dnd'
import update from 'immutability-helper'
import { Col } from 'antd'
import { Col, Icon } from 'antd'
import Utils from '@/utils/utils.js'
import Card from './card'
import ItemTypes from './itemtypes'
import './index.scss'

const Container = ({list, setting, type, placeholder, handleList, handleMenu, deleteMenu, copyElement }) => {
const Container = ({list, setting, gridBtn, type, placeholder, handleList, handleMenu, deleteMenu, copyElement, handleGridBtn }) => {
  let target = null
  const [cards, setCards] = useState(list)
  const moveCard = (id, atIndex) => {
@@ -250,6 +250,18 @@
                hasDrop={hasDrop}
              />
            ))}
            {i === (columns.length - 1) && gridBtn && gridBtn.display ?
              <div className="page-card" style={{flex: gridBtn.Width}}>
                <div style={{cursor: 'default'}}>
                  <span className="ant-table-header-column">
                    <div className="ant-table-column-sorters" title={gridBtn.label} style={{textAlign: gridBtn.Align}}>
                      <span className="ant-table-column-title">{gridBtn.label}</span>
                    </div>
                  </span>
                </div>
                <Icon className="edit" type="edit" onClick={handleGridBtn}/>
              </div> : null
            }
          </div>
        ))
      }

 src/templates/comtableconfig/gridbtnform/index.jsx

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

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

  state = {
    formlist: [
      {
        type: 'text',
        key: 'label',
        label: this.props.dict['header.form.name'],
        initVal: this.props.card.label,
        required: true
      },
      {
        type: 'select',
        key: 'Align',
        label: this.props.dict['header.form.align'],
        initVal: this.props.card.Align,
        required: true,
        options: [{
          MenuID: 'left',
          text: this.props.dict['header.form.alignLeft']
        }, {
          MenuID: 'right',
          text: this.props.dict['header.form.alignRight']
        }, {
          MenuID: 'center',
          text: this.props.dict['header.form.alignCenter']
        }]
      },
      {
        type: 'number',
        key: 'Width',
        decimal: 0,
        label: this.props.dict['header.form.columnWidth'],
        initVal: this.props.card.Width,
        required: true
      },
      {
        type: 'select',
        key: 'style',
        label: this.props.dict['header.form.align'],
        initVal: this.props.card.style,
        required: true,
        options: [{
          MenuID: 'button',
          text: this.props.dict['header.form.button']
        }, {
          MenuID: 'text',
          text: this.props.dict['header.form.text']
        }]
      },
      {
        type: 'select',
        key: 'show',
        label: this.props.dict['header.form.order'],
        initVal: this.props.card.show,
        required: true,
        options: [{
          MenuID: 'horizontal',
          text: this.props.dict['header.form.horizontal']
        }, {
          MenuID: 'vertical',
          text: this.props.dict['header.form.vertical']
        }]
      }
    ]
  }

  getFields() {
    const { getFieldDecorator } = this.props.form
    const fields = []
    this.state.formlist.forEach((item, index) => {
      if (item.type === 'text') { // 文本搜索
        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.input'] + item.label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'number') { // 文本搜索
        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.input'] + item.label + '!'
                  }
                ]
              })(<InputNumber min={1} max={1000} precision={item.decimal} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉搜索
        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 + '!'
                  }
                ]
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  getPopupContainer={() => document.getElementById('columnwinter')}
                >
                  {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>
        )
      } 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
  }

  handleConfirm = () => {
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve({...this.props.card, ...values})
        } else {
          reject(err)
        }
      })
    })
  }

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

export default Form.create()(MainSearch)

 src/templates/comtableconfig/gridbtnform/index.scss

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

 src/templates/comtableconfig/index.jsx

@@ -12,6 +12,7 @@
import ColumnForm from './columnform'
import ColspanForm from './colspanform'
import SettingForm from './settingform'
import GridBtnForm from './gridbtnform'
import EditCard from './editcard'
import MenuForm from './menuform'
import zhCN from '@/locales/zh-CN/comtable.js'
@@ -753,56 +754,110 @@
    }
  }

  handleGridBtn = () => {
    this.setState({
      visible: true,
      formtemp: 'gridbtn'
    })
  }

  /**
   * @description 搜索、按钮、显示列修改后提交保存
   * 1、搜索条件保存，当类型为下拉框且存在数据源时，将查询条件拼接为sql，并用base64转码
   * 2、按钮包括正常编辑和复制，复制时,按钮列末尾添加
   * 3、添加或编辑列，保存时，如按钮位置设置为表格，则修改操作列显示状态
   */
  handleSubmit = () => {
    this.formRef.handleConfirm().then(res => {
      let _config = this.state.config
      let isupdate = false
    let _config = JSON.parse(JSON.stringify(this.state.config))

      if (res.type === 'search') {
        if ((res.values.type === 'select' || res.values.type === 'link') && res.values.resourceType === '1') {
          let sql = 'select ' + res.values.valueField + ',' + res.values.valueText + ' from (' + res.values.dataSource + ')'
          if (res.values.orderBy) {
            sql = sql + ' ld order by ' + res.values.orderBy + ' ' + res.values.orderType
    if (this.state.formtemp !== 'gridbtn') {
      this.formRef.handleConfirm().then(res => {
        let isupdate = false
  
        if (res.type === 'search') {
          if ((res.values.type === 'select' || res.values.type === 'link') && res.values.resourceType === '1') {
            let sql = 'select ' + res.values.valueField + ',' + res.values.valueText + ' from (' + res.values.dataSource + ')'
            if (res.values.orderBy) {
              sql = sql + ' ld order by ' + res.values.orderBy + ' ' + res.values.orderType
            }
            res.values.dataSourceSql = Utils.formatOptions(sql)
          }
          res.values.dataSourceSql = Utils.formatOptions(sql)
        }
      }

      if (this.state.operaType === 'add') {
        _config[res.type] = _config[res.type].map(item => {
          if (item.uuid === res.values.uuid) {
            isupdate = true
            return res.values
          } else {
            return item
  
        if (this.state.operaType === 'add') {
          _config[res.type] = _config[res.type].map(item => {
            if (item.uuid === res.values.uuid) {
              isupdate = true
              return res.values
            } 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) {
              isupdate = true
              return res.values
            } else {
              return item
            }
          })
        }
  
        if (!isupdate) { // 操作不是修改，添加元素至列表
          _config[res.type].push(res.values)
        }
  
        if (res.type === 'action') {
          let gridbtn = _config.action.filter(act => act.position === 'grid')
          let _display = false
  
          if (gridbtn.length > 0) {
            _display = true
          }
        })
        _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) {
            isupdate = true
            return res.values
  
          if (_config.gridBtn) {
            _config.gridBtn.display = _display
          } else {
            return item
            _config.gridBtn = {
              display: _display,
              Align: 'center',
              IsSort: 'false',
              uuid: Utils.getuuid(),
              label: this.state.dict['header.form.column.action'],
              type: 'action',
              style: 'button',
              show: 'horizontal',
              Width: 120
            }
          }
        })
      }

      if (!isupdate) { // 操作不是修改，添加元素至列表
        _config[res.type].push(res.values)
      }

      this.setState({
        config: _config,
        [res.type + 'loading']: true,
        visible: false
      }, () => {
        }
  
        this.setState({
          [res.type + 'loading']: false
          config: _config,
          searchloading: true,
          actionloading: true,
          columnsloading: true,
          visible: false
        }, () => {
          this.setState({
            searchloading: false,
            actionloading: false,
            columnsloading: false
          })
        })
      })
    })
    } else {
      this.formRef.handleConfirm().then(res => {
        _config.gridBtn = res

        this.setState({
          config: _config,
          visible: false
        })
      })
    }
  }

  deleteElement = (element) => {
@@ -1529,11 +1584,13 @@
                  <DragElement
                    list={this.state.config.columns}
                    setting={this.state.config.setting}
                    gridBtn={this.state.config.gridBtn}
                    type="columns"
                    placeholder={this.state.dict['header.form.column.placeholder']}
                    handleList={this.handleList}
                    handleMenu={this.handleColumn}
                    deleteMenu={this.deleteElement}
                    handleGridBtn={this.handleGridBtn}
                  /> : null
                }
              </div>
@@ -1547,11 +1604,6 @@
          width={700}
          onCancel={() => { this.setState({ visible: false }) }}
          onOk={this.handleSubmit}
          // footer={[
          //   <Button key="delete" type="danger" onClick={this.deleteElement}>{this.state.dict['header.delete']}</Button>,
          //   <Button key="cancel" onClick={() => { this.setState({ visible: false }) }}>{this.state.dict['header.cancel']}</Button>,
          //   <Button key="confirm" type="primary" onClick={this.handleSubmit}>{this.state.dict['header.confirm']}</Button>
          // ]}
          destroyOnClose
        >
          {this.state.formtemp === 'search' ?
@@ -1586,6 +1638,13 @@
              wrappedComponentRef={(inst) => this.formRef = inst}
            /> : null
          }
          {this.state.formtemp === 'gridbtn' ?
            <GridBtnForm
              dict={this.state.dict}
              card={this.state.config.gridBtn}
              wrappedComponentRef={(inst) => this.formRef = inst}
            /> : null
          }
        </Modal>
        {/* 根据字段名添加显示列及搜索条件 */}
        <Modal

 src/templates/comtableconfig/index.scss

@@ -14,7 +14,6 @@
    border-right: 1px solid #d9d9d9;
    height: 100%;
    overflow-y: hidden;
    // overflow-y: auto;
    padding-bottom: 30px;
    .ant-collapse-item {
      position: relative;
@@ -264,11 +263,6 @@
            display: inline-block;
          }
        }
      }
      .element-add {
        font-size: 20px;
        padding: 10px 20px;
        cursor: pointer;
      }
      .column-list {
        padding: 0px 20px;

 src/templates/comtableconfig/settingform/index.jsx

@@ -48,14 +48,6 @@
      }
    }

    let orderColumn = data.orderColumn
    if (orderColumn) {
      let field = this.props.columns.filter(column => column.field === orderColumn)
      if (field.length !== 1) {
        orderColumn = ''
      }
    }

    return (
      <Form {...formItemLayout} className="ant-advanced-search-form commontable-setting-form" id="commontable-setting-form">
        <Row gutter={24}>
@@ -142,23 +134,15 @@
          </Col>
          <Col span={12}>
            <Form.Item label="默认排序">
              {getFieldDecorator('orderColumn', {
                initialValue: orderColumn,
              {getFieldDecorator('order', {
                initialValue: data.order,
                rules: [
                  {
                    required: true,
                    message: dict['form.required.select'] + '默认排序字段!'
                    message: dict['form.required.input'] + '默认排序字段!'
                  }
                ]
              })(
                <Select
                  getPopupContainer={() => document.getElementById('commontable-setting-form')}
                >
                  {this.props.columns.map(option =>
                    <Select.Option id={option.uuid} title={option.label} key={option.uuid} value={option.field}>{option.label}</Select.Option>
                  )}
                </Select>
              )}
              })(<Input placeholder="ID asc, UID desc" autoComplete="off" />)}
            </Form.Item>
          </Col>
        </Row>

 src/templates/comtableconfig/source.jsx

@@ -13,7 +13,7 @@
      tableName: '',
      tableType: 'checkbox',
      primaryKey: '',
      orderColumn: '',
      order: '',
      dataresource: ''
    },
    tables: [],
@@ -208,7 +208,18 @@
        type: 'text',
        Width: 120
      }
    ]
    ],
    gridBtn: {
      display: false,
      Align: 'center',
      IsSort: 'false',
      uuid: Utils.getuuid(),
      label: CommonDict['header.form.column.action'],
      type: 'action',
      style: 'button',
      show: 'horizontal',
      Width: 120
    }
  }

  searchItems = [

 src/templates/modalconfig/dragelement/index.jsx

@@ -29,37 +29,7 @@
    const { card } = findCard(id)
    handleMenu(card)
  }

  const copyCard = id => {
    const { card } = findCard(id)
    let copycard = JSON.parse(JSON.stringify(card))
    copycard.uuid = Utils.getuuid()
    copycard.origin = false
    let names = cards.map(car => { return car.label })
    let index = 1
    let origin = copycard.label.split('(copy')[0] || 'button'
    let label = origin + '(copy)'
    while (names.includes(label)) {
      label = origin + `(copy${index})`
      index++
    }

    copycard.label = label
    
    let indexes = cards.map(car => { return car.id })
    let newid = 0
    while (indexes.includes(newid)) {
      newid++
    }
    copycard.id = newid

    const { index: overIndex } = findCard(`${card.id}`)

    const _cards = update(cards, { $splice: [[overIndex + 1, 0, copycard]] })
    setCards(_cards)
    handleList({action: _cards})
  }

  
  const hasDrop = (item) => {
    target = item
  }
@@ -88,28 +58,6 @@
        newcard.orderBy = ''
        newcard.orderType = 'asc'
        newcard.display = 'dropdown'
      } else if (item.type === 'action') {
        newcard.uuid = Utils.getuuid()
        newcard.label = 'button'
        newcard.innerFunc = ''
        newcard.outerFunc = ''
        newcard.Ot = 'requiredSgl'
        newcard.OpenType = item.subType
        newcard.icon = ''
        newcard.class = 'default'
        newcard.intertype = 'inner'
        newcard.interface = ''
        newcard.callbackFunc = ''
        newcard.pageTemplate = ''
      } else if (item.type === 'columns') {
        newcard.uuid = Utils.getuuid()
        newcard.Align = 'left'
        newcard.label = 'fieldName'
        newcard.field = ''
        newcard.Hide = 'false'
        newcard.IsSort = 'true'
        newcard.type = item.subType
        newcard.Width = 120
      }
      
      let indexes = cards.map(car => {return car.id})
@@ -139,31 +87,9 @@
      target = null
    }
  })
  let columns = []
  if (type === 'columns' && cards.length > 10) {
    let number = Math.ceil(cards.length / Math.ceil(cards.length / 10))
    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">
      {type === 'action' && cards.map(card => (
        <Card
          key={card.uuid}
          id={`${card.id}`}
          type={type}
          card={card}
          moveCard={moveCard}
          editCard={editCard}
          copyCard={copyCard}
          findCard={findCard}
          hasDrop={hasDrop}
        />
      ))}
      {type === 'search' && cards.map(card => (
        <Col key={card.uuid} span={6}>
          <Card
@@ -178,29 +104,6 @@
          />
        </Col>
      ))}
      {type === 'columns' && cards.length > 0 &&
        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}

 src/templates/modalconfig/index.jsx

@@ -4,13 +4,13 @@
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { Button, Card, Modal, Collapse, notification, Select, List, Icon } from 'antd'
// import DragElement from './dragelement'
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 SettingForm from './settingform'
import SettingForm from './settingform'
// import EditCard from './editcard'
import MenuForm from './menuform'
import zhCN from '@/locales/zh-CN/comtable.js'
@@ -58,9 +58,11 @@
  UNSAFE_componentWillMount () {
    const {menu, editAction} = this.props

    let _config = JSON.parse(JSON.stringify((Source.baseConfig)))
    
    this.setState({
      // config: _config,
      // selectedTables: _config.tables || [],
      config: _config,
      selectedTables: _config.tables || [],
      modalformlist: [
        {
          type: 'text',
@@ -362,232 +364,6 @@
            MenuID: 'button',
            text: this.state.dict['header.form.button']
          }]
        }
      ]
    })
  }

  handleAction = (card) => {
    this.setState({
      visible: true,
      formtemp: 'action',
      card: card,
      formlist: [
        {
          type: 'text',
          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: 'innerFunc',
          label: this.state.dict['header.form.innerFunc'],
          initVal: card.innerFunc,
          required: false,
          readonly: false
        },
        {
          type: 'text',
          key: 'interface',
          label: this.state.dict['header.form.interface'],
          initVal: card.interface,
          required: true,
          readonly: false
        },
        {
          type: 'text',
          key: 'outerFunc',
          label: this.state.dict['header.form.outerFunc'],
          initVal: card.outerFunc,
          required: false,
          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: 'text',
          key: 'callbackFunc',
          label: this.state.dict['header.form.callbackFunc'],
          initVal: card.callbackFunc,
          required: false,
          readonly: false
        },
        {
          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: false,
          options: []
        }
      ]
    })
  }

  handleColumn = (card) => {
    this.setState({
      visible: true,
      formtemp: 'columns',
      card: card,
      formlist: [
        {
          type: 'text',
          key: 'label',
          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',
          key: 'type',
          label: this.state.dict['header.form.type'],
          initVal: card.type,
          required: true,
          options: [{
            MenuID: 'text',
            text: this.state.dict['header.form.text']
          }, {
            MenuID: 'picture',
            text: this.state.dict['header.form.picture']
          }]
        },
        {
          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: 'radio',
          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: 'number',
          key: 'Width',
          decimal: 0,
          label: this.state.dict['header.form.columnWidth'],
          initVal: card.Width,
          required: true
        }
      ]
    })
@@ -1109,11 +885,11 @@

  render () {
    return (
      <div className="common-table-board">
      <div className="modal-form-board">
        <DndProvider backend={HTML5Backend}>
          <div className="tools">
            <Collapse accordion defaultActiveKey="0" bordered={false}>
              <Panel header="基本信息" key="0" id="common-basedata">
              <Panel header="基本信息" key="0" id="modal-basedata">
                <MenuForm
                  dict={this.state.dict}
                  formlist={this.state.modalformlist}
@@ -1130,7 +906,7 @@
                  value={'请选择表名'}
                  onChange={this.onTableChange}
                  showArrow={false}
                  getPopupContainer={() => document.getElementById('common-basedata')}
                  getPopupContainer={() => document.getElementById('modal-basedata')}
                  filterOption={(input, option) => {
                    return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }}
@@ -1168,16 +944,15 @@
              </div>
            } style={{ width: '100%' }}>
              <Icon type="setting" onClick={this.changeSetting} />
              {/* <div className="search-list">
                {this.state.config.search && !this.state.searchloading &&
                <DragElement
              <div className="search-list">
                {<DragElement
                  list={this.state.config.search}
                  type="search"
                  placeholder={this.state.dict['header.form.search.placeholder']}
                  handleList={this.handleList}
                  handleMenu={this.handleSearch}
                />}
              </div> */}
              </div>
            </Card>
          </div>
        </DndProvider>
@@ -1199,18 +974,6 @@
            card={this.state.card}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />}
          {this.state.formtemp === 'action' && <ActionForm
            dict={this.state.dict}
            card={this.state.card}
            formlist={this.state.formlist}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />}
          {this.state.formtemp === 'columns' && <ColumnForm
            dict={this.state.dict}
            card={this.state.card}
            formlist={this.state.formlist}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />}
        </Modal>
        <Modal
          title={this.state.dict['header.edit']}
@@ -1230,7 +993,7 @@
          {(!this.state.fields || this.state.fields.length === 0) &&
            <Empty />
          }
        </Modal>
        </Modal> */}
        <Modal
          title={this.state.dict['header.edit']}
          visible={this.state.settingVisible}
@@ -1258,7 +1021,7 @@
          destroyOnClose
        >
          菜单配置已修改，是否保存配置信息？
        </Modal> */}
        </Modal>
      </div>
    )
  }

 src/templates/modalconfig/index.scss

@@ -1,4 +1,4 @@
.common-table-board {
.modal-form-board {
  position: fixed;
  z-index: 1070;
  padding-top: 48px;
@@ -13,7 +13,7 @@
    background: #ffffff;
    border-right: 1px solid #d9d9d9;
    height: 100%;
    overflow-y: auto;
    overflow-y: hidden;
    padding-bottom: 30px;
    .ant-collapse-item {
      border: 0;
@@ -84,7 +84,9 @@
      }
    }
  }
  
  .tools:hover {
    overflow-y: auto;
  }
  .tools::-webkit-scrollbar {
    width: 7px;
  }
@@ -133,7 +135,6 @@
      .search-list {
        padding: 1px 24px 20px;
        min-height: 87px;
        border-bottom: 1px solid #d9d9d9;
        > .ant-row {
          min-height: 65px;
        }
@@ -198,106 +199,6 @@
        }
        .ant-calendar-picker {
          min-width: 100px!important;
        }
      }
      .action-list {
        padding: 0px 20px 15px;
        min-height: 82px;
        > .ant-row {
          min-height: 67px;
        }
        .page-card {
          display: inline-block;
          margin: 0px 0px 0px 0px;
          padding: 15px 10px 0 0;
          position: relative;
          div {
            cursor: move;
          }
          .edit {
            position: absolute;
            left: 0;
            top: 0px;
            cursor: pointer;
            display: none;
          }
          .edit.copy {
            left: 20px;
          }
          button {
            cursor: move;
          }
        }
        .page-card:hover {
          .edit {
            display: inline-block;
          }
        }
      }
      .element-add {
        font-size: 20px;
        padding: 10px 20px;
        cursor: pointer;
      }
      .column-list {
        padding: 0px 20px;
        > .ant-row {
          background: #fafafa;
          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;
            min-height: 45px;
            > div {
              padding: 12px 8px;
              cursor: move;
              height: 100%;
            }
            .ant-table-column-sorter {
              position: relative;
              display: inline-block;
              width: 24px;
              font-size: 12px;
              color: #bfbfbf;
              .anticon-caret-up {
                position: relative;
                left: 10px;
                top: -3px;
              }
              .anticon-caret-down {
                position: relative;
                left: -2px;
                top: 3px;
              }
            }
            .edit {
              position: absolute;
              left: 0;
              top: 0px;
              cursor: pointer;
              display: none;
            }
            .ant-checkbox-inner {
              margin-top: 14px;
              margin-left: calc(50% - 8px);
            }
          }
          .page-card:hover {
            .edit {
              display: inline-block;
            }
          }
          .page-card:not(:last-child) {
            border-right: 1px solid #e8e8e8;
          }
        }
      }
      > .anticon-setting {

 src/templates/modalconfig/source.jsx

@@ -1,19 +1,19 @@
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/comtable.js'
import enUS from '@/locales/en-US/comtable.js'
// import zhCN from '@/locales/zh-CN/comtable.js'
// import enUS from '@/locales/en-US/comtable.js'

const CommonDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS
// const CommonDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS

class CommonTableBaseData {
  baseConfig = {
    type: 'system',
    setting: {
      actionfixed: false,
      columnfixed: false,
      dataresource: ''
      title: '',
      width: 60,
      cols: '2'
    },
    tables: [],
    search: [
    fields: [
      {
        origin: true,
        id: 0,
@@ -69,116 +69,6 @@
        orderType: 'asc',
        display: 'dropdown'
      }
    ],
    action: [
      {
        origin: true,
        id: 0,
        uuid: Utils.getuuid(),
        label: 'add',
        intertype: 'inner',
        innerFunc: '',
        interface: '',
        outerFunc: '',
        callbackFunc: '',
        Ot: 'notRequired',
        OpenType: 'pop',
        pageTemplate: '',
        icon: 'plus',
        class: 'green'
      }, {
        origin: true,
        id: 1,
        uuid: Utils.getuuid(),
        label: 'update',
        intertype: 'inner',
        innerFunc: '',
        interface: '',
        outerFunc: '',
        callbackFunc: '',
        Ot: 'requiredSgl',
        OpenType: 'pop',
        pageTemplate: '',
        icon: 'form',
        class: 'purple'
      }, {
        origin: true,
        id: 2,
        uuid: Utils.getuuid(),
        label: 'delete',
        intertype: 'inner',
        innerFunc: '',
        interface: '',
        outerFunc: '',
        callbackFunc: '',
        Ot: 'required',
        OpenType: 'prompt',
        pageTemplate: '',
        icon: 'delete',
        class: 'red'
      }, {
        origin: true,
        id: 3,
        uuid: Utils.getuuid(),
        label: 'freeze',
        intertype: 'inner',
        innerFunc: '',
        interface: '',
        outerFunc: '',
        callbackFunc: '',
        Ot: 'requiredOnce',
        OpenType: 'exec',
        pageTemplate: '',
        icon: '',
        class: 'default'
      }
    ],
    columns: [
      {
        origin: true,
        id: 0,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName1',
        field: '',
        Hide: 'false',
        IsSort: 'true',
        type: 'text',
        Width: 120
      }, {
        origin: true,
        id: 1,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName2',
        field: '',
        Hide: 'false',
        IsSort: 'true',
        type: 'text',
        Width: 120
      }, {
        origin: true,
        id: 2,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName3',
        field: '',
        Hide: 'false',
        IsSort: 'true',
        type: 'text',
        Width: 120
      }, {
        origin: true,
        id: 3,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName4',
        field: '',
        Hide: 'false',
        IsSort: 'true',
        type: 'text',
        Width: 120
      }
    ]
  }

@@ -203,62 +93,14 @@
    },
    {
      type: 'search',
      label: '时间框（月）',
      subType: 'datemonth',
      url: ''
    },
    {
      type: 'search',
      label: '时间框（秒）',
      subType: 'datetime',
      url: ''
    }
  ]

  actionItems = [
    {
      type: 'action',
      label: CommonDict['header.form.pop'],
      subType: 'pop',
      url: ''
    },
    {
      type: 'action',
      label: CommonDict['header.form.prompt'],
      subType: 'prompt',
      url: ''
    },
    {
      type: 'action',
      label: CommonDict['header.form.exec'],
      subType: 'exec',
      url: ''
    },
    {
      type: 'action',
      label: CommonDict['header.form.tab'],
      subType: 'tab',
      url: ''
    },
    {
      type: 'action',
      label: CommonDict['header.form.newpage'],
      subType: 'newpage',
      url: ''
    },
    {
      type: 'action',
      label: CommonDict['header.form.blank'],
      subType: 'blank',
      url: ''
    }
  ]

  columnItems = [
    {
      type: 'columns',
      label: CommonDict['header.form.text'],
      subType: 'text',
      url: ''
    },
    {
      type: 'columns',
      label: CommonDict['header.form.picture'],
      subType: 'picture',
      url: ''
    }
  ]

 src/views/login/index.jsx

@@ -24,8 +24,8 @@
    logo: window.GLOB.logo || logourl,
    bgImage: window.GLOB.bgImage || loginbg,
    platName: window.GLOB.platName || '明科商业智能开放平台',
    copyright: window.GLOB.copyright || 'Copyright©2017    所有相关版权归    北京明科普华信息技术有限公司',
    ICP: window.GLOB.ICP || 'ICP备案： 京ICP备12007830号',
    copyright: window.GLOB.copyRight || 'Copyright©2017    所有相关版权归    北京明科普华信息技术有限公司',
    ICP: window.GLOB.icp || 'ICP备案： 京ICP备12007830号',
    bgColor: window.GLOB.bgColor || '#000000',
    lineColor: window.GLOB.lineColor || '#06b4f7'
  }