2020-02-07

king

2020-02-07 7051e15582aee4163b3c8dd13dc85f4f1e2ce6eb

2020-02-07

 src/tabviews/commontable/index.jsx

@@ -407,7 +407,8 @@
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: arr_field
      arr_field: arr_field,
      appkey: window.GLOB.appkey || ''
    }
    
    let orderBy = orderColumn ? (orderColumn + ' ' + orderType) : setting.order
@@ -606,7 +607,8 @@
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: _arr_labels
      arr_field: _arr_labels,
      appkey: window.GLOB.appkey || ''
    }

    let orderBy = orderColumn ? (orderColumn + ' ' + orderType) : setting.order

 src/tabviews/formtab/actionList/index.jsx

New file
@@ -0,0 +1,577 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { Button, Modal, notification, Spin, message } from 'antd'
import Utils from '@/utils/utils.js'
import Api from '@/api'
import './index.scss'

const { confirm } = Modal

class MainAction extends Component {
  static propTpyes = {
    BData: PropTypes.any,          // 主表数据
    type: PropTypes.string,        // 判断当前为主表（main）、子表（sub）、子表标签（subtab）
    MenuID: PropTypes.string,      // 菜单ID
    actions: PropTypes.array,      // 按钮组
    logcolumns: PropTypes.array,   // 日志中显示列
    dict: PropTypes.object,        // 字典项
    setting: PropTypes.any,        // 页面通用设置
    triggerPopview: PropTypes.func // 弹窗标签页触发
  }

  state = {
    visible: false,
    formdata: null,
    tabledata: null,
    confirmLoading: false,
    loadingUuid: '',
    btnloading: false
  }
  
  /**
   * @description 触发按钮操作
   */
  actionTrigger = (item, record) => {
    const { setting } = this.props

    let _this = this
    let data = this.props.gettableselected() || []
    
    if (record) { // 表格中触发按钮
      data = [record]
    }

    if (item.Ot !== 'notRequired' && data.length === 0) {
      // 需要选择行时，校验数据
      notification.warning({
        top: 92,
        message: this.props.dict['main.action.confirm.selectline'],
        duration: 10
      })
      return
    } else if (item.Ot === 'requiredSgl' && data.length !== 1) {
      // 需要选择单行时，校验数据
      notification.warning({
        top: 92,
        message: this.props.dict['main.action.confirm.selectSingleLine'],
        duration: 10
      })
      return
    } else if (item.Ot !== 'notRequired' && !setting.primaryKey) {
      // 需要选择行时，校验是否设置主键
      notification.warning({
        top: 92,
        message: '未设置主键！',
        duration: 10
      })
      return
    }

    if (item.OpenType === 'prompt') {
      confirm({
        title: this.props.dict['main.action.confirm.tip'],
        onOk() {
          return new Promise(resolve => {
            _this.execSubmit(item, data, resolve)
          })
        },
        onCancel() {}
      })
    } else if (item.OpenType === 'exec') {
      this.setState({loadingUuid: item.uuid})
      this.execSubmit(item, data, () => {
        this.setState({loadingUuid: ''})
      })
    } else if (item.OpenType === 'pop') {
      this.setState({
        tabledata: data,
        btnloading: true
      })
    } else {
      notification.warning({
        top: 92,
        message: '完善中。。。',
        duration: 10
      })
    }
  }

  /**
   * @description 按钮提交执行
   */
  execSubmit = (btn, data, _resolve, formdata) => {
    const { setting, logcolumns } = this.props

    if (btn.intertype === 'inner') {
      // 使用内部接口时，内部函数和数据源不可同时为空, 使用系统函数时，类型不可为空
      if (!btn.innerFunc && (!btn.sql || (btn.sql && !btn.sqlType))) {
        this.actionSettingError()
        _resolve()
        return
      }

      // 执行方式为多行拼接，且打开方式为表单时，会转为循环发送请求
      // 打开方式为模态框，使用内部函数添加
      if (
        btn.Ot === 'notRequired' ||
        btn.Ot === 'requiredSgl' ||
        (btn.Ot === 'requiredOnce' && btn.OpenType !== 'pop') ||
        (btn.OpenType === 'pop' && !btn.innerFunc && btn.sql && btn.sqlType === 'insert')
      ) {

        // 创建凭证时，需要选择行时
        if (data.length === 0 && !btn.innerFunc && btn.verify && btn.verify.voucher && btn.verify.voucher.enabled) {
          notification.warning({
            top: 92,
            message: '使用创建凭证函数，需要选择行！',
            duration: 10
          })
          return
        }

        let param = { // 系统存储过程
          func: 'sPC_TableData_InUpDe',
          BID: ''
        }
        let primaryId = setting.primaryKey && data[0] ? (data[0][setting.primaryKey] || '') : ''

        if (btn.OpenType === 'prompt' || btn.OpenType === 'exec') { // 是否弹框或直接执行
          let ID = ''
          if (btn.Ot === 'notRequired') {
            
          } else if (btn.Ot === 'requiredSgl') {
            ID = data[0][setting.primaryKey]
          } else if (btn.Ot === 'requiredOnce') { // id值拼接
            let ids = data.map(d => { return d[setting.primaryKey]})
            ID = ids.join(',')
          }

          if (btn.innerFunc) { // 使用自定义函数
            param.func = btn.innerFunc
            if (setting.primaryKey) { // 主键存在时，设置主键参数
              param[setting.primaryKey] = ID
            }
          } else if (btn.sql) {
            param.ID = primaryId
            param.LText = Utils.formatOptions(Utils.getSysDefaultSql(btn, setting, '', param, data[0], logcolumns)) // 数据源
            param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
            param.secretkey = Utils.encrypt(param.LText, param.timestamp)
          }
        } else if (btn.OpenType === 'pop') { // 表单
          if (btn.innerFunc) {
            param.func = btn.innerFunc

            if (setting.primaryKey) { // 主键存在时，设置主键参数
              param[setting.primaryKey] = primaryId
            }

            formdata.forEach(_data => {
              param[_data.key] = _data.value
            })

          } else if (btn.sql && btn.sqlType === 'insert') { // 系统函数添加时，生成uuid
            param.ID = Utils.getguid()
            param.LText = Utils.formatOptions(Utils.getSysDefaultSql(btn, setting, formdata, param, data[0], logcolumns)) // 数据源
            param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
            param.secretkey = Utils.encrypt(param.LText, param.timestamp)
          } else if (btn.sql) {
            param.ID = primaryId
            param.LText = Utils.formatOptions(Utils.getSysDefaultSql(btn, setting, formdata, param, data[0], logcolumns)) // 数据源
            param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
            param.secretkey = Utils.encrypt(param.LText, param.timestamp)
          }
        }

        Api.genericInterface(param).then((res) => {
          if (res.status) {
            this.execSuccess(btn, res)
          } else {
            this.execError(res, btn)
          }
          _resolve()
        })
      } else if (btn.Ot === 'required' || (btn.Ot === 'requiredOnce' && btn.OpenType === 'pop')) {
        let _params = data.map(cell => {
          let param = {
            func: 'sPC_TableData_InUpDe',
            BID: ''
          }
          let primaryId = setting.primaryKey ? cell[setting.primaryKey] : ''

          if (btn.OpenType === 'prompt' || btn.OpenType === 'exec') { // 是否弹框或直接执行

            if (btn.innerFunc) {
              param.func = btn.innerFunc
              if (setting.primaryKey) {
                param[setting.primaryKey] = primaryId
              }
            } else if (btn.sql) {
              param.ID = primaryId
              param.LText = Utils.formatOptions(Utils.getSysDefaultSql(btn, setting, '', param, cell, logcolumns)) // 数据源
              param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
              param.secretkey = Utils.encrypt(param.LText, param.timestamp)
            }
          } else if (btn.OpenType === 'pop') { // 表单
            if (btn.innerFunc) {
              param.func = btn.innerFunc

              formdata.forEach(_data => {
                param[_data.key] = _data.value
              })

              if (setting.primaryKey) {
                param[setting.primaryKey] = primaryId
              }
            } else if (btn.sql) {
              param.ID = primaryId
              param.LText = Utils.formatOptions(Utils.getSysDefaultSql(btn, setting, formdata, param, cell, logcolumns)) // 数据源
              param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
              param.secretkey = Utils.encrypt(param.LText, param.timestamp)
            }
          }

          return param
        })

        if (_params.length <= 20) {
          let deffers = _params.map(param => {
            return new Promise(resolve => {
              Api.genericInterface(param).then(res => {
                resolve(res)
              })
            })
          })
          Promise.all(deffers).then(result => {
            let iserror = false
            let errorMsg = ''
            result.forEach(res => {
              if (res.status) {
                errorMsg = res
              } else {
                iserror = true
                errorMsg = res
              }
            })
            if (!iserror) {
              this.execSuccess(btn, errorMsg)
            } else {
              this.execError(errorMsg, btn)
            }
            _resolve()
          })
        } else { // 超出20个请求时循环执行
          this.innerLoopRequest(_params, btn, _resolve)
        }
      } else {
        this.actionSettingError()
        _resolve()
        return
      }
    } else if (btn.intertype === 'outer') {
      /** *********************调用外部接口************************* */

      if (!btn.interface) { // 接口地址不存在时报错
        this.actionSettingError()
        _resolve()
        return
      }

      let _params = [] // 请求参数数组

      if (btn.Ot === 'notRequired' || btn.Ot === 'requiredSgl' || btn.Ot === 'requiredOnce') {
        let param = {
          BID: ''
        }

        if (btn.OpenType === 'pop' && formdata) { // 表单
          formdata.forEach(_data => {
            param[_data.key] = _data.value
          })
        }

        // 获取id
        if (btn.Ot === 'notRequired') {
          
        } else if (btn.Ot === 'requiredSgl' && setting.primaryKey) {
          param[setting.primaryKey] = data[0][setting.primaryKey]
        } else if (btn.Ot === 'requiredOnce' && setting.primaryKey) {
          let ids = data.map(d => { return d[setting.primaryKey]})
          param[setting.primaryKey] = ids.join(',')
        }

        _params.push(param)
      } else if (btn.Ot === 'required') {
        // 选择多行，循环调用

        let _formparam = {}
        if (btn.OpenType === 'pop' && formdata) { // 表单
          formdata.forEach(_data => {
            _formparam[_data.key] = _data.value
          })
        }

        _params = data.map(cell => {
          let _cell = {
            BID: '',
          }
          if (setting.primaryKey) {
            _cell[setting.primaryKey] = cell[setting.primaryKey]
          }

          _cell = {..._formparam, ..._cell}

          return _cell
        })
      } else {
        this.actionSettingError()
        _resolve()
        return
      }

      // 循环调用外部接口（包括内部及回调函数）
      this.outerLoopRequest(_params, btn, _resolve)
      
    } else {
      this.actionSettingError()
      _resolve()
      return
    }
  }

  /**
   * @description 内部请求循环执行
   */
  innerLoopRequest = (params, btn, _resolve) => {
    if (!params && params.length === 0) return

    let param = params.shift()

    Api.genericInterface(param).then(res => {
      if (res.status) {
        if (params.length === 0) {
          this.execSuccess(btn, res)
          _resolve()
        } else {
          this.innerLoopRequest(params, btn, _resolve)
        }
      } else {
        this.execError(res, btn)
        _resolve()
      }
    })
  }

  /**
   * @description 外部请求循环执行
   */
  outerLoopRequest = (params, btn, _resolve) => {
    if (!params && params.length === 0) return

    let param = params.shift()
    let _outParam = null

    new Promise(resolve => {
      // 内部请求
      if (btn.innerFunc) {
        param.func = btn.innerFunc
        // 存在内部函数时，数据预处理
        Api.genericInterface(param).then(res => {
          if (res.status) {
            delete res.ErrCode
            delete res.ErrMesg
            delete res.message
            delete res.status

            // 使用处理后的数据调用外部接口
            resolve(res)
          } else {
            this.execError(res, btn)
            resolve(false)
            _resolve()
          }
        })
      } else {
        resolve(param)
      }
    }).then(res => {
      if (!res) return
      // 外部请求
      _outParam = JSON.parse(JSON.stringify(res))

      if (btn.sysInterface === 'true') {
        res.rduri = window.GLOB.mainSystemApi || window.GLOB.subSystemApi
      } else {
        res.rduri = btn.interface
      }
      // res.method = btn.method
      if (btn.outerFunc) {
        res.func = btn.outerFunc
      }

      res.appkey = window.GLOB.appkey || '' // 外部请求时，统一添加appkey

      return Api.genericInterface(res)
    }).then(response => {
      if (!response) return
      // 回调请求
      if (btn.callbackFunc) {
        // 存在回调函数时，调用
        delete response.message
        delete response.status

        response.func = btn.callbackFunc

        let _callbackparam = {..._outParam, ...response}
        return Api.genericInterface(_callbackparam)
      } else {
        if (response.status) {
          // 一次请求成功，进行下一项请求

          if (params.length === 0) {
            this.execSuccess(btn, response)
            _resolve()
          } else {
            this.outerLoopRequest(params, btn, _resolve)
          }
        } else {
          this.execError(response, btn)
          _resolve()
        }
      }
    }).then(res => {
      if (!res) return

      if (res.status) {
        if (params.length === 0) {
          this.execSuccess(btn, res)
          _resolve()
        } else {
          this.outerLoopRequest(params, btn, _resolve)
        }
      } else {
        this.execError(res, btn)
        _resolve()
      }
    })
  }

  /**
   * @description 操作成功后处理
   * 1、excel导出，成功后取消导出按钮加载中状态
   * 2、状态码为 S 时，显示成功信息后系统默认信息
   * 3、状态码为 -1 时，不显示任何信息
   * 4、模态框执行成功后是否关闭
   * 5、通知主列表刷新
   */
  execSuccess = (btn, res) => {
    if (btn.OpenType === 'excelOut') { // 导出excel
      this.setState({
        loadingUuid: ''
      })
    } else if (res && res.ErrCode === 'S') { // 执行成功
      notification.success({
        top: 92,
        message: res.ErrMesg || this.props.dict['main.action.confirm.success'],
        duration: 2
      })
    } else if (res && res.ErrCode === '-1') { // 完成后不提示

    }
    
    if (btn.OpenType === 'pop' && btn.setting && btn.setting.finish !== 'unclose') {
      this.setState({
        visible: false
      })
    }

    this.props.refreshdata(btn, 'success')
  }

  /**
   * @description 操作失败后处理
   * 1、状态码为 E、N、F、NM 时，显示相应提示信息
   * 2、excel导出，失败后取消导出按钮加载中状态
   * 3、通知主列表刷新
   */
  execError = (res, btn) => {
    if (res.ErrCode === 'E') {
      Modal.error({
        title: res.message || res.ErrMesg,
      })
    } else if (res.ErrCode === 'N') {
      notification.error({
        top: 92,
        message: res.message || res.ErrMesg,
        duration: btn.errorTime || 15
      })
    } else if (res.ErrCode === 'F') {
      notification.error({
        className: 'notification-custom-error',
        top: 92,
        message: res.message || res.ErrMesg,
        duration: btn.errorTime || 15
      })
    } else if (res.ErrCode === 'NM') {
      message.error(res.message || res.ErrMesg)
    }
    
    this.props.refreshdata(btn, 'error')
  }

  /**
   * @description 按钮配置信息错误提示
   */
  actionSettingError = () => {
    notification.warning({
      top: 92,
      message: this.props.dict['main.action.settingerror'],
      duration: 10
    })
  }

  
  render() {
    const { loadingUuid, btnloading } = this.state

    return (
      <div className="button-list toolbar-button">
        {this.props.actions.map((item, index) => {
          if (loadingUuid === item.uuid) {
            return (
              <Button
                className={'mk-btn mk-' + item.class}
                icon={item.icon}
                key={'action' + index}
                onClick={() => {this.actionTrigger(item)}}
                loading
              >{item.label}</Button>
            )
          } else {
            return (
              <Button
                className={'mk-btn mk-' + item.class}
                icon={item.icon}
                key={'action' + index}
                onClick={() => {this.actionTrigger(item)}}
              >{item.label}</Button>
            )
          }
        })}
        <Button
          className={'mk-btn'}
          // icon={item.icon}
          onClick={() => {this.actionTrigger()}}
        >确定</Button>
        <Button
          className={'mk-btn'}
          // icon={item.icon}
          onClick={() => {this.actionTrigger()}}
        >返回</Button>
        {btnloading && <Spin size="large" />}
      </div>
    )
  }
}

export default MainAction

 src/tabviews/formtab/actionList/index.scss

New file
@@ -0,0 +1,42 @@
.button-list.toolbar-button {
  padding: 10px 20px 5px;
  background: #ffffff;
  button {
    min-width: 65px;
    margin-right: 15px;
    margin-bottom: 10px;
  }
  .ant-spin {
    position: fixed;
    z-index: 1010;
    left: calc(50vw - 22px);
    top: calc(50vh - 70px);
  }
}
// 设置模态框样式，规定最大最小高度，重置滚动条
.action-modal {
  .ant-modal {
    max-width: 95vw;
  }
  .ant-modal-body {
    max-height: calc(100vh - 235px);
    min-height: 150px;
    overflow-y: auto;
    padding-bottom: 35px;
  }
  .ant-modal-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .ant-modal-body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
    background: rgba(0, 0, 0, 0.13);
  }
  .ant-modal-body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }
}

 src/tabviews/formtab/formgroup/index.jsx

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, InputNumber, Select, DatePicker, notification } from 'antd'
import { Form, Row, Col, Input, InputNumber, Select, DatePicker, notification, Collapse } from 'antd'
import moment from 'moment'
import { formRule } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
@@ -9,13 +9,14 @@

const {MonthPicker} = DatePicker
const { TextArea } = Input
const { Panel } = Collapse

class MainSearch extends Component {
  static propTpyes = {
    action: PropTypes.object,    // 按钮信息、表单列表
    setting: PropTypes.object,   // 基本信息
    groups: PropTypes.array,     // 表单组
    dict: PropTypes.object,      // 字典项
    data: PropTypes.any,         // 表格数据
    BData: PropTypes.any,        // 主表数据
    configMap: PropTypes.object, // 按钮及下拉表单配置信息集
    inputSubmit: PropTypes.func  // input回车提交
  }
@@ -27,77 +28,35 @@
  }

  componentDidMount () {
    const { data, BData } = this.props
    let action = JSON.parse(JSON.stringify(this.props.action))
    const { data, groups } = this.props

    let datatype = {}
    let readtype = {}
    let formlist = []
    if (action.groups.length > 0) {
      action.groups.forEach(group => {
        if (group.sublist.length === 0) return
    let _formlist = []

        if (!group.default) {
          formlist.push({
            type: 'title',
            label: group.label,
            uuid: group.uuid
          })
        }

        group.sublist.forEach(item => {
          datatype[item.field] = item.type
          readtype[item.field] = item.readonly === 'true'
          formlist.push(item)
        })
      })
    } else {
      formlist = action.fields.map(item => {
    let _groups = groups.map(group => {
      group.sublist = group.sublist.map(item => {
        datatype[item.field] = item.type
        readtype[item.field] = item.readonly === 'true'

        if (!/^date/.test(item.type) && data && data.hasOwnProperty(item.field)) {
          item.initval = data[item.field]
        }

        _formlist.push(item)

        return item
      })
    }

    let _inputfields = formlist.filter(item => item.type === 'text' || item.type === 'number') // 用于过滤下拉菜单关联表单

    formlist = formlist.map(item => {
      if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') {
        if (item.setAll === 'true') {
          item.options.unshift({
            key: Utils.getuuid(),
            Value: '',
            Text: this.props.dict['main.all']
          })
        }

        if (item.resourceType === '1' && this.props.configMap.hasOwnProperty(item.uuid)) {
          item.options = [...item.options, ...this.props.configMap[item.uuid]]
        }

        item.oriOptions = JSON.parse(JSON.stringify(item.options))

        if (item.linkSubField && item.linkSubField.length > 0) {
          let _fields = _inputfields.map(_item => _item.field)
          item.linkSubField = item.linkSubField.filter(_item => _fields.includes(_item))
        }
      }

      if (item.type === 'linkMain' && BData && BData.hasOwnProperty(item.field)) {
        item.initval = BData[item.field]
      } else if (!/^date/.test(item.type) && this.props.data && this.props.data.hasOwnProperty(item.field)) {
        item.initval = this.props.data[item.field]
      }

      return item
      return group
    })

    let error = false

    formlist = formlist.map(item => {
    _groups = _groups.map(group => {
      group.sublist = group.sublist.map(item => {
      if (item.type === 'link') {
        let supItem = formlist.filter(form => form.field === item.linkField)[0]
          let supItem = _formlist.filter(form => form.field === item.linkField)[0]

        if (!supItem && data && data.hasOwnProperty(item.linkField)) {
          supItem = {initval: data[item.linkField]}
@@ -109,8 +68,10 @@
          item.options = item.oriOptions.filter(option => option.parentId === supItem.initval)
        }
      }

      return item
      })

      return group
    })

    if (error) {
@@ -124,21 +85,8 @@
    this.setState({
      readtype: readtype,
      datatype: datatype,
      formlist: formlist
    }, () => {
      if (action.setting && action.setting.focus) {
        try {
          let _form = document.getElementById('main-form-box')
          let _item = _form.getElementsByTagName('input')
          _item = [..._item]
          _item.forEach(input => {
            if (!input || input.id !== action.setting.focus) return
            input.select()
          })
        } catch {
          console.warn('表单获取失败！')
        }
      }
      formlist: _formlist,
      groups: _groups
    })
  }

@@ -204,28 +152,22 @@
    })
  }

  getFields() {
  getFields(formlist) {
    const { getFieldDecorator } = this.props.form

    const fields = []
    let cols = 2
    if (this.props.action.setting && this.props.action.setting.cols) {
      cols = parseInt(this.props.action.setting.cols)
    if (this.props.setting && this.props.setting.cols) {
      cols = parseInt(this.props.setting.cols)
      if (cols > 3 || cols < 1) {
        cols = 2
      }
    }

    this.state.formlist.forEach((item, index) => {
      if ((!item.field && item.type !== 'title') || item.hidden === 'true') return
    formlist.forEach((item, index) => {
      if (item.hidden === 'true') return
      
      if (item.type === 'title') {
        fields.push(
          <Col span={24} key={index}>
            <p>{item.label}</p>
          </Col>
        )
      } else if (item.type === 'text') {
      if (item.type === 'text') {
        fields.push(
          <Col span={24 / cols} key={index}>
            <Form.Item label={item.label}>
@@ -395,7 +337,6 @@
                  }
                ]
              })(
                // <DatePicker showTime getCalendarContainer={() => document.getElementById('form-box')} />
                <DatePicker showTime />
              )}
            </Form.Item>
@@ -453,15 +394,7 @@
          </Col>
        )
      } else if (item.type === 'funcvar') {
        // fields.push(
        //   <Col span={24 / cols} key={index}>
        //     <Form.Item label={item.label}>
        //       {getFieldDecorator(item.field, {
        //         initialValue: item.linkfield || '',
        //       })(<Input placeholder="" autoComplete="off" disabled={item.readonly === 'true'} />)}
        //     </Form.Item>
        //   </Col>
        // )

      } else if (item.type === 'textarea') {
        let _labelcol = cols !== 3 ? 8 / cols : 3
        let _wrapcol = cols !== 3 ? 16 + (cols - 1) * 4 : 21
@@ -619,6 +552,7 @@
  }

  render() {
    const { groups } = this.props
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -629,9 +563,20 @@
        sm: { span: 16 }
      }
    }

    let keys = groups.map(group => group.uuid)
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form main-form-field" id="main-form-box">
        <Row gutter={24}>{this.getFields()}</Row>
      <Form {...formItemLayout}>
        <Collapse
          defaultActiveKey={keys}
          expandIconPosition='right'
        >
          {groups.map(group =>
            <Panel header={group.label} key={group.uuid}>
              <Row gutter={24}>{this.getFields(group.sublist)}</Row>
            </Panel>
          )}
        </Collapse>
      </Form>
    )
  }

 src/tabviews/formtab/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { BackTop, notification, Spin, Tabs, Icon, Modal, Button} from 'antd'
import { BackTop, notification, Spin, Tabs, Icon} from 'antd'
import moment from 'moment'

import Api from '@/api'
@@ -11,14 +11,12 @@
import Utils from '@/utils/utils.js'

import FormGroup from './formgroup'
import MainAction from '@/tabviews/tableshare/actionList'
import FormAction from './actionList'
import SubTable from '@/tabviews/subtable'
import NotFount from '@/components/404'
import asyncComponent from '@/utils/asyncLoadComponent'
import {refreshTabView} from '@/store/action'
import './index.scss'

const SubTabTable = asyncComponent(() => import('@/tabviews/subtabtable'))
const { TabPane } = Tabs

class NormalTable extends Component {
@@ -35,22 +33,16 @@
    viewlost: false,      // 页面丢失：1、未获取到配置-页面丢失；2、页面未启用
    lostmsg: '',          // 页面丢失时的提示信息
    config: {},           // 页面配置信息，包括按钮、表单、标签等
    groups: null,         // 表单组
    actions: null,        // 按钮集
    arr_field: '',        // 使用 sPC_Get_TableData 时的查询字段集
    setting: null,        // 页面全局设置：数据源、按钮及显示列固定、主键等
    data: null,           // 列表数据集
    loading: false,       // 列表数据加载中
    pageIndex: 1,         // 页码
    pageSize: 10,         // 每页数据条数
    orderColumn: '',      // 排序字段
    orderType: 'asc',     // 排序方式
    search: '',           // 搜索条件数组，使用时需分场景处理
    configMap: {},        // 页面配置信息：下拉、按钮等
    BIDs: {},             // 上级表id
    setsingle: false,     // 主表单选多选切换
    pickup: false,        // 主表数据隐藏显示切换
    isLinkMain: false,    // 是否存在与主表关联的子表
    popAction: false,     // 弹框页面，按钮信息
    popData: false,       // 弹框页面，所选的表格数据
    visible: false        // 弹框显示隐藏控制
  }
@@ -109,7 +101,7 @@
        })
        _arrField = _arrField.join(',')
      }
      console.log(config)

      // 权限过滤
      config.action = config.action.filter(item => permAction[item.uuid])
      // config.tabgroups.forEach(group => {
@@ -139,19 +131,33 @@
        }
      })

      let _data = null
      let _isCustomData = false

      if (this.props.param && this.props.param.data) {
        _data = this.props.param.data
      }

      if ((config.setting.interType === 'inner' && config.setting.innerFunc) || (config.setting.interType === 'outer' && config.setting.interface)) {
        _isCustomData = true
        _data = null
      }


      this.setState({
        loadingview: false,
        config: config,
        setting: config.setting,
        actions: config.action,
        isLinkMain: _isLinkMain,
        arr_field: _arrField,
        search: Utils.initMainSearch(config.search), // 搜索条件初始化（含有时间格式，需要转化）
        loading: true
        data: _data,
        BIDs: {
          mainTable: (!_isCustomData && _data && _data[0] && _data[0][config.setting.primaryKey]) || ''
        }
      }, () => {
        this.improveSearch()
        this.improveSelectOption(config.groups)

        if (config.setting.onload !== 'false') {
        if (_isCustomData) {
          this.loadmaindata()
        }
      })
@@ -169,13 +175,14 @@
  }

  /**
   * @description 搜索条件下拉选项预加载
   * @description 表单下拉选项加载
   */
  improveSearch = () => {
    let searchlist = JSON.parse(JSON.stringify(this.state.searchlist))
  improveSelectOption = (groups) => {
    let deffers = []
    searchlist.forEach(item => {
      if (item.type !== 'multiselect' && item.type !== 'select' && item.type !== 'link') return
    groups.forEach(group => {
      group.sublist = group.sublist.map(item => {
        if (item.type !== 'multiselect' && item.type !== 'select' && item.type !== 'link') return item

      if (item.setAll === 'true') {
        item.options.unshift({
          key: Utils.getuuid(),
@@ -187,6 +194,7 @@
      if (item.resourceType === '1' && item.dataSource) {
        let _option = Utils.getSelectQueryOptions(item)
        let _sql = Utils.formatOptions(_option.sql)
          let isSSO = item.database === 'sso'

        let param = {
          func: 'sPC_Get_SelectedList',
@@ -199,7 +207,7 @@
        param.secretkey = Utils.encrypt(param.LText, param.timestamp)

        let defer = new Promise(resolve => {
          Api.getSystemCacheConfig(param).then(res => {
            Api.getSystemCacheConfig(param, isSSO).then(res => {
            res.search = item
            resolve(res)
          })
@@ -212,19 +220,24 @@
          duration: 10
        })
      }

        return item
      })
    })

    if (deffers.length === 0) {
      this.setState({searchlist: JSON.parse(JSON.stringify(searchlist))})
      this.setState({
        loadingview: false,
        groups: groups
      })
      return
    }

    Promise.all(deffers).then(result => {
      let _result = {}
      result.forEach(res => {
        if (res.status) {
          searchlist = searchlist.map(item => {
            if (item.uuid === res.search.uuid) {
              res.data.forEach(cell => {
          let _options = res.data.map(cell => {
                let _item = {
                  key: Utils.getuuid(),
                  Value: cell[res.search.valueField],
@@ -233,13 +246,16 @@

                if (res.search.type === 'link') {
                  _item.parentId = cell[res.search.linkField]
            } else if (res.search.type === 'select' && res.search.linkSubField && res.search.linkSubField.length > 0) {
              res.search.linkSubField.forEach(_field => {
                _item[_field] = (cell[_field] || cell[_field] === 0) ? cell[_field] : ''
              })
                }

                item.options.push(_item)
            return _item
              })
            }
            return item
          })

          _result[res.search.uuid] = _options
        } else {
          notification.warning({
            top: 92,
@@ -249,7 +265,23 @@
        }
      })

      this.setState({searchlist})
      groups.forEach(group => {
        group.sublist = group.sublist.map(item => {
          if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') {
            if (_result[item.uuid]) {
              item.options = [...item.options, ..._result[item.uuid]]
            }
            item.oriOptions = JSON.parse(JSON.stringify(item.options))
          }
          
          return item
        })
      })

      this.setState({
        loadingview: false,
        groups: groups
      })
    })
  }

@@ -257,38 +289,18 @@
   * @description 主表数据加载
   */ 
  async loadmaindata () {
    const { setting, BIDs } = this.state
    let param = ''

    if (setting.interType !== 'inner' || (setting.interType === 'inner' && setting.innerFunc)) {
      param = this.getCustomParam()
    } else {
      param = this.getDefaultParam()
    }

    this.setState({
      pickup: false
    })

    this.handleTableId('mainTable', '')
    const { setting } = this.state
    let param = this.getCustomParam()

    let result = await Api.genericInterface(param)
    if (result.status) {
      this.setState({
        data: result.data.map((item, index) => {
          item.key = index
          return item
        }),
        loading: false,
        data: result.data,
        BIDs: {
          ...BIDs,
          mainTable: ''
          mainTable: (result.data[0] && result.data[0][setting.primaryKey]) || ''
        }
      })
    } else {
      this.setState({
        loading: false
      })
      notification.error({
        top: 92,
        message: result.message,
@@ -301,22 +313,21 @@
   * @description 获取用户自定义存储过程传参
   */
  getCustomParam = () => {
    const { pageIndex, pageSize, orderColumn, orderType, search, setting } = this.state
    const { setting } = this.state

    let _search = Utils.formatCustomMainSearch(search)

    let param = {
      PageIndex: pageIndex,
      PageSize: pageSize,
      OrderCol: orderColumn,
      OrderType: orderType,
      ..._search
    }
    let param = {}

    if (setting.interType === 'inner') {
      param.func = setting.innerFunc
    } else {
      if (setting.sysInterface === 'true') {
        param.rduri = window.GLOB.mainSystemApi || window.GLOB.subSystemApi
      } else {
      param.rduri = setting.interface
      }

      param.appkey = window.GLOB.appkey || '' // 调用外部接口增加appkey

      if (setting.outerFunc) {
        param.func = setting.outerFunc
      }
@@ -326,174 +337,18 @@
  }

  /**
   * @description 获取系统存储过程 sPC_Get_TableData 的参数
   */
  getDefaultParam = () => {
    const { arr_field, pageIndex, pageSize, orderColumn, orderType, search, setting } = this.state

    let _search = Utils.joinMainSearchkey(search)

    _search = _search ? 'where ' + _search : ''
    
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: arr_field
    }
    
    let orderBy = orderColumn ? (orderColumn + ' ' + orderType) : setting.order
    let _dataresource = setting.dataresource

    if (/\s/.test(_dataresource)) {
      _dataresource = '(' + _dataresource + ') tb'
    }

    let LText = `select top ${pageSize} ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${orderBy}) as rows from ${_dataresource} ${_search}) tmptable where rows > ${pageSize * (pageIndex - 1)} order by tmptable.rows`

    param.LText = Utils.formatOptions(LText)
    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
    param.secretkey = Utils.encrypt(param.LText, param.timestamp)

    return param
  }

  /**
   * @description 搜索条件改变时，重置表格数据
   * 含有初始不加载的页面，修改设置
   */
  refreshbysearch = (searches) => {
    const { setting } = this.state

    if (setting.onload === 'false') {
      this.setState({
        loading: true,
        pageIndex: 1,
        search: searches,
        setting: {...setting, onload: 'true'}
      }, () => {
        this.loadmaindata()
      })
    } else {
      this.refs.mainTable.resetTable()

      this.setState({
        loading: true,
        pageIndex: 1,
        search: searches
      }, () => {
        this.loadmaindata()
      })
    }
  }

  /**
   * @description 表格条件改变时重置数据（分页或排序）
   */
  refreshbytable = (pagination, filters, sorter) => {
    if (sorter.order) {
      let _chg = {
        ascend: 'asc',
        descend: 'desc'
      }
      sorter.order = _chg[sorter.order]
    }

    this.setState({
      loading: true,
      pageIndex: pagination.current,
      pageSize: pagination.pageSize,
      orderColumn: sorter.field || this.state.setting.orderColumn,
      orderType: sorter.order || 'asc'
    }, () => {
      this.loadmaindata()
    })
  }

  /**
   * @description 表格刷新
   */
  reloadtable = () => {
    this.refs.mainTable.resetTable()
    this.setState({
      loading: true,
      pageIndex: 1
    }, () => {
      this.loadmaindata()
    })
  }

  /**
   * @description 页面刷新，重新获取配置
   */
  reloadview = () => {
    this.setState({
      loadingview: true,
      viewlost: false,
      lostmsg: '',
      config: {},
      searchlist: null,
      actions: null,
      arr_field: '',
      setting: null,
      data: null,
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      orderColumn: '',
      orderType: 'asc',
      search: '',
      configMap: {},
      BIDs: {},
      setsingle: false,
      pickup: false,
      isLinkMain: false
    }, () => {
      this.loadconfig()
    })
  }

  /**
   * @description 按钮操作完成后（成功或失败），页面刷新，重置页码及选择项
   */
  refreshbyaction = (btn, type) => {
    if (btn.execSuccess === 'grid' && type === 'success') {
      this.reloadtable()

    } else if (btn.execError === 'grid' && type === 'error') {
      this.reloadview()

    } else if (btn.execSuccess === 'view' && type === 'success') {
      this.reloadtable()

    } else if (btn.execError === 'view' && type === 'error') {
      this.reloadview()
    } else if (btn.popClose === 'view' && type === 'pop') {
      this.reloadview()
    } else if (btn.popClose === 'grid' && type === 'pop') {
      this.reloadtable()
    }
  }

  /**
   * @description 子表操作完成后刷新主表
   */
  handleMainTable = () => {
    this.reloadtable()
  }

  /**
   * @description 获取表格选择项
   */
  gettableselected = () => {
    let data = []
    this.refs.mainTable.state.selectedRowKeys.forEach(item => {
      data.push(this.refs.mainTable.props.data[item])
    })
    return data
  }

  /**
   * @description 表格中，按钮触发事件传递
   */
  buttonTrigger = (btn, record) => {
    this.refs.mainButton.actionTrigger(btn, record)
  }

  /**
@@ -508,50 +363,6 @@
        [type]: id
      }
    })
  }

  /**
   * @description 表格单选多选切换
   */
  checkChange = () => {
    const { setsingle, BIDs } = this.state

    let _BIDs = JSON.parse(JSON.stringify(BIDs))
    _BIDs.mainTable = ''

    this.setState({
      setsingle: !setsingle,
      pickup: false,
      BIDs: _BIDs
    })
  }
  
  /**
   * @description 数据展开合并切换
   */
  pickupChange = () => {
    const { pickup } = this.state
    this.setState({
      pickup: !pickup
    })
  }

  /**
   * @description 触发按钮弹窗（标签页）
   */
  triggerPopview = (btn, data) => {
    this.setState({
      popAction: btn,
      popData: data[0] ? data[0] : null,
      visible: true
    })
  }

  popclose = () => {
    this.setState({
      visible: false
    })
    this.refreshbyaction(this.state.popAction, 'pop')
  }

  UNSAFE_componentWillMount () {
@@ -573,31 +384,28 @@
  }

  render() {
    const { setting, actions, loadingview, viewlost, isLinkMain, config } = this.state
    const { setting, actions, loadingview, viewlost, isLinkMain, config, groups, data } = this.state

    return (
      <div className={'commontable ' + (isLinkMain ? 'pick-control' : '')} id={'commontable' + this.props.MenuID}>
      <div className={'formtab ' + (isLinkMain ? 'pick-control' : '')} id={'formtab' + this.props.MenuID}>
        {loadingview && <Spin size="large" />}
        {config ?
        {groups && (groups.length > 1 || groups[0].sublist.length > 0) ?
          <FormGroup
            dict={this.state.dict}
            groups={config.groups}
            data={data}
            groups={groups}
            setting={setting}
            wrappedComponentRef={(inst) => this.formGroupRef = inst}
          /> : null
        }
        {actions && setting.onload !== 'false' ?
          <MainAction
            ref="mainButton"
            BID=""
            type="main"
        {actions ?
          <FormAction
            setting={setting}
            actions={actions}
            dict={this.state.dict}
            MenuID={this.props.MenuID}
            logcolumns={[]}
            refreshdata={this.refreshbyaction}
            triggerPopview={this.triggerPopview}
            gettableselected={this.gettableselected}
          /> : null
        }
        {setting && setting.onload !== 'false' &&
@@ -631,20 +439,6 @@
            )
          })
        }
        <Modal
          className="popview-modal"
          title={this.state.popAction.label}
          width={'80vw'}
          maskClosable={false}
          visible={this.state.visible}
          onCancel={this.popclose}
          footer={[
            <Button key="cancel" onClick={this.popclose}>{this.state.dict['main.close']}</Button>
          ]}
          destroyOnClose
        >
          {<SubTabTable SupMenuID={this.props.MenuID} MenuID={this.state.popAction.linkTab} BID={''} ID={this.state.popData ? this.state.popData[setting.primaryKey] : ''} />}
        </Modal>
        <BackTop>
          <div className="ant-back-top">
            <div className="ant-back-top-content">

 src/tabviews/formtab/index.scss

@@ -1,10 +1,122 @@
.commontable {
.formtab {
  position: relative;
  min-height: calc(100vh - 94px);
  padding-top: 16px;
  padding-bottom: 80px;
  .box404 {
    padding-top: 30px;
  }
  .ant-collapse {
    border-radius: 0;
    border: 0;
    margin-top: 30px;
    .ant-collapse-header {
      cursor: default;
      border-radius: 0!important;
      background: #1890ff;
      color: #ffffff;
      padding-left: 30px;
      padding-right: 20px;
      .anticon {
        font-size: 16px;
      }
      .ant-collapse-extra {
        .anticon-edit {
          position: absolute;
          left: 5px;
          top: 2px;
        }
      }
    }
    .ant-collapse-item:last-child {
      border-radius: 0;
      .ant-collapse-content {
        border-radius: 0;
      }
    }
    .ant-collapse-content-box {
      padding: 16px 30px;
      > .ant-row {
        min-height: 90px;
        padding-bottom: 30px;
        .page-card {
          position: relative;
          background: #ffffff;
          border-radius: 2px;
          padding-top: 15px;
          .ant-form-item {
            cursor: move;
            display: flex;
            margin-bottom: 0px;
            .ant-form-item-label {
              label {
                width: 100%;
                cursor: move;
                overflow: hidden;
                display: inline-block;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .ant-form-item-label.ant-col-cuslabel {
              width: 11%;
            }
            .ant-form-item-control-wrapper.ant-col-cuswrap {
              width: 89%;
            }
            .ant-form-item-control-wrapper {
              .ant-input-number {
                width: 100%;
                margin-top: 4px;
              }
              .ant-select {
                width: 100%;
                margin-top: 4px;
              }
              .ant-calendar-picker {
                margin-top: 4px;
              }
              .ant-btn {
                margin-top: 4px;
              }
              .input-mask {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0;
                z-index: 2;
              }
              .data-range .ant-calendar-picker-input {
                padding: 4px 20px 4px 5px;
                font-size: 13px;
              }
            }
          }
          .edit {
            position: absolute;
            left: 15px;
            top: 5px;
            color: #1890ff;
            cursor: pointer;
            display: none;
          }
          .edit.close {
            left: 40px;
            color: #ff4d4f;
          }
        }
        .page-card:hover {
          .edit {
            display: inline-block;
          }
        }
        .ant-calendar-picker {
          min-width: 100px!important;
          width: 100%;
        }
      }
    }
  }
  .ant-modal-mask {
    position: absolute;
@@ -72,7 +184,7 @@
    margin-top: 20px;
  }
}
.commontable.pick-control {
.formtab.pick-control {
  >.button-list {
    padding-right: 140px;
  }

 src/tabviews/subtable/index.jsx

@@ -368,7 +368,8 @@
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: arr_field,
      BID: BID
      BID: BID,
      appkey: window.GLOB.appkey || ''
    }

    let orderBy = orderColumn ? (orderColumn + ' ' + orderType) : setting.order
@@ -542,7 +543,9 @@
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: _arr_labels
      arr_field: _arr_labels,
      BID: this.props.BID,
      appkey: window.GLOB.appkey || ''
    }

    let orderBy = orderColumn ? (orderColumn + ' ' + orderType) : setting.order

 src/tabviews/subtabtable/index.jsx

@@ -331,7 +331,8 @@
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: arr_field,
      BID: this.props.BID
      BID: this.props.BID,
      appkey: window.GLOB.appkey || ''
    }

    let orderBy = orderColumn ? (orderColumn + ' ' + orderType) : setting.order
@@ -504,7 +505,9 @@
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: _arr_labels
      arr_field: _arr_labels,
      BID: this.props.BID,
      appkey: window.GLOB.appkey || ''
    }

    let orderBy = orderColumn ? (orderColumn + ' ' + orderType) : setting.order

 src/tabviews/tableshare/actionList/index.jsx

@@ -177,7 +177,7 @@
          func: 'sPC_TableData_InUpDe',
          BID: this.props.BID
        }
        let primaryId = setting.primaryKey && data[0] ? data[0][setting.primaryKey] : ''
        let primaryId = setting.primaryKey && data[0] ? (data[0][setting.primaryKey] || '') : ''

        if (btn.OpenType === 'prompt' || btn.OpenType === 'exec') { // 是否弹框或直接执行
          let ID = ''

 src/templates/comtableconfig/index.jsx

@@ -1338,6 +1338,8 @@
      // 未设置数据源或标签不合法时，启用状态为false
      if (_config.setting.interType === 'inner' && !_config.setting.innerFunc && !_config.setting.dataresource) {
        _config.enabled = false
      } else if (!_config.setting.primaryKey) {
        _config.enabled = false
      } else if (_config.tabgroups.length > 1) {
        _config.tabgroups.forEach(group => {
          if (_config[group].length === 0) {
@@ -2138,6 +2140,12 @@
        message: '菜单尚未设置数据源，不可启用！',
        duration: 10
      })
    } else if (!config.setting.primaryKey) {
      notification.warning({
        top: 92,
        message: '菜单尚未设置主键，不可启用！',
        duration: 10
      })
    } else if (!tabinvalid) {
      notification.warning({
        top: 92,

 src/templates/subtableconfig/index.jsx

@@ -1162,6 +1162,13 @@
      let _LongParam = ''
      let _config = {...config, tables: this.state.selectedTables, ...res}

      // 未设置数据源或主键时，启用状态为false
      if (_config.setting.interType === 'inner' && !_config.setting.innerFunc && !_config.setting.dataresource) {
        _config.enabled = false
      } else if (!_config.setting.primaryKey) {
        _config.enabled = false
      }

      // 保存时删除配置类型，system 、user
      delete _config.type
      delete _config.isAdd
@@ -1830,7 +1837,13 @@
    if (config.setting.interType === 'inner' && !config.setting.innerFunc && !config.setting.dataresource) {
      notification.warning({
        top: 92,
        message: '菜单尚未设置数据源，不可启用！',
        message: '尚未设置数据源，不可启用！',
        duration: 10
      })
    } else if (!config.setting.primaryKey) {
      notification.warning({
        top: 92,
        message: '尚未设置主键，不可启用！',
        duration: 10
      })
    } else {