datamanage-update

king

2019-10-15 ee32a69f9a7f25c37757325dc28ac7b5127dceca

datamanage-update

 src/api/index.js

@@ -205,6 +205,21 @@
      data: param
    })
  }

  /**
   * @description 通用接口(提交)
   * @param {Object} param 查询及提交参数
   */
  submitInterface (param) {
    param.userid = sessionStorage.getItem('UserID')
    param.lang = localStorage.getItem('lang') || ''
    param.SessionUid = sessionStorage.getItem('SessionUid') || ''
    param.LoginUID = sessionStorage.getItem('LoginUID') || ''
    return axios({
      url: '/webapi/dostar',
      data: param
    })
  }
}

export default new Api()

 src/assets/css/main.scss

@@ -84,3 +84,43 @@
  top: 50px;
  z-index: 1080;
}

// 重置时间插件时间滚动条
.ant-calendar-time-picker-select:hover::-webkit-scrollbar {
  width: 7px;
}
.ant-calendar-time-picker-select:hover::-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-calendar-time-picker-select:hover::-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);
}
.ant-modal-mask {
  z-index: 1080!important;
}
.ant-modal-wrap {
  z-index: 1080!important;
}
.ant-form-item-children {
  width: 100%;
  display: inline-block;
  .ant-calendar-picker {
    width: 100%;
  }
}
.ant-calendar-picker-container {
  z-index: 1090!important;
}
.ant-notification {
  z-index: 1100!important;
}

// 确认提示框高度
.ant-modal {
  top: 38vh!important;
}

 src/components/mutilform/index.jsx

@@ -1,42 +1,39 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select, DatePicker } from 'antd'
import { Form, Row, Col, Input, InputNumber, Select, DatePicker } from 'antd'
import moment from 'moment'
import Utils from '@/utils/utils.js'
import './index.scss'

const {MonthPicker, WeekPicker} = DatePicker
const dateFormat = 'YYYY-MM-DD'
const weekFormat = 'YYYYMMDD'
const monthFormat = 'YYYY-MM'
const timeFormat = 'YYYY-MM-DD HH:mm:ss'

class MainSearch extends Component {
  static propTpyes = {
    formlist: PropTypes.array, // 搜索条件列表
    dict: PropTypes.object, // 字典项
    data: PropTypes.object // 表格数据
    data: PropTypes.any, // 表格数据
    cols: PropTypes.number
  }

  state = {
    formats: null, // 事件校验规则
    match: null // 搜索条件匹配规则
    datatype: null
  }

  UNSAFE_componentWillMount () {
    let formats = {}
    let match = {}
    let datatype = {}
    this.props.formlist.forEach(item => {
      if (item.Type === 'date') {
        // formats[item.FieldName] = dateFormat
        formats[item.FieldName] = weekFormat
      } else if (item.ID === 'WHE1400200905') {
        formats[item.FieldName] = monthFormat
      if (item.InputType === 'date') {
        formats[item.FieldName] = dateFormat
      } else if (item.InputType === 'datetime') {
        formats[item.FieldName] = timeFormat
      }
      match[item.FieldName] = item.Op
      datatype[item.FieldName] = item.InputType
    })
    this.setState({
      formats: formats,
      match: match
      datatype: datatype
    })
  }

@@ -44,31 +41,61 @@
    const { getFieldDecorator } = this.props.form
    const fields = []
    this.props.formlist.forEach((item, index) => {
      if (item.InputType === 'text' || item.InputType === 'string') { // 文本搜索
      if (item.Hide !== 'false') return // input隐藏

      let validate = item.Validate ? JSON.parse(item.Validate) : {} // 检验是否必填
      let _required = validate.required || false
      if (item.InputType === 'text') { // 文本搜索
        fields.push(
          <Col span={12} key={index}>
          <Col span={24 / this.props.cols} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: this.props.data[item.FieldName],
                initialValue: this.props.data ? this.props.data[item.FieldName] : item.InitVal,
                rules: [
                  {
                    required: item.required,
                    required: _required,
                    message: this.props.dict['main.form.required.input'] + item.Label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.ReadOnly === 'true'} />)}
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.InputType === 'spinner') { // 数字
        validate.min = (validate.min || validate.min === 0) ? validate.min : -Infinity
        validate.max = (validate.max || validate.max === 0) ? validate.max : Infinity
        validate.precision = (validate.precision || validate.precision === 0) ? validate.precision : ''
        let _initval = (this.props.data ? this.props.data[item.FieldName] : item.InitVal) || 0
        let model = <InputNumber initialValue={_initval} disabled={item.readonly} min={validate.min} max={validate.max} />

        if (validate.precision === +validate.precision) { // 数据精度
          model = <InputNumber initialValue={_initval} disabled={item.readonly} min={validate.min} max={validate.max} precision={validate.precision} />
        }
        
        fields.push(
          <Col span={24 / this.props.cols} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: _initval,
                rules: [
                  {
                    required: _required,
                    message: this.props.dict['main.form.required.input'] + item.Label + '!'
                  }
                ]
              })(model)}
            </Form.Item>
          </Col>
        )
      } else if (item.InputType === 'select') { // 下拉搜索
        fields.push(
          <Col span={12} key={index}>
          <Col span={24 / this.props.cols} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: this.props.data[item.FieldName],
                initialValue: this.props.data ? this.props.data[item.FieldName] : item.InitVal,
                rules: [
                  {
                    required: item.required,
                    required: _required,
                    message: this.props.dict['main.form.required.select'] + item.Label + '!'
                  }
                ]
@@ -76,6 +103,7 @@
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  getPopupContainer={() => document.getElementById('form-box')}
                >
                  {item.DynOptions.map(option =>
                    <Select.Option id={option.id} title={option.text} key={option.id} value={option.id}>{option.text}</Select.Option>
@@ -86,37 +114,43 @@
          </Col>
        )
      } else if (item.InputType === 'date') { // 时间搜索
        if (item.ID === 'WHE14002009024') {
          fields.push(
            <Col span={12} 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={12} 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={12} key={index}>
              <Form.Item label={item.Label}>
                {getFieldDecorator(item.FieldName, {initialValue: moment('20190906', weekFormat) })(
                  <WeekPicker />
                )}
              </Form.Item>
            </Col>
          )
        }
        let _initval = this.props.data ? this.props.data[item.FieldName] : item.InitVal
        fields.push(
          <Col span={24 / this.props.cols} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: _initval ? moment(_initval, dateFormat) : null,
                rules: [
                  {
                    required: _required,
                    message: this.props.dict['main.form.required.select'] + item.Label + '!'
                  }
                ]
              })(
                <DatePicker getCalendarContainer={() => document.getElementById('form-box')} format={dateFormat} />
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.InputType === 'datetime') {
        let _initval = this.props.data ? this.props.data[item.FieldName] : item.InitVal
        fields.push(
          <Col span={24 / this.props.cols} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: _initval ? moment(_initval, timeFormat) : null,
                rules: [
                  {
                    required: _required,
                    message: this.props.dict['main.form.required.select'] + item.Label + '!'
                  }
                ]
              })(
                <DatePicker showTime format={timeFormat} />
              )}
            </Form.Item>
          </Col>
        )
      }
    })
    
@@ -128,7 +162,21 @@
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve(values)
          let formdata = {}
          Object.keys(values).forEach(key => {
            if (values[key] && typeof(values[key]) === 'object') {
              formdata[key] = moment(values[key]).format(this.state.formats[key])
            } else if (values[key] || values[key] === 0) {
              if (this.state.datatype[key] === 'spinner') {
                formdata[key] = parseFloat(values[key])
              } else {
                formdata[key] = values[key].replace(/\t|\v|\n|\r/g,'')
              }
            } else {
              formdata[key] = ''
            }
          })
          resolve(formdata)
        } else {
          reject(err)
        }
@@ -139,39 +187,6 @@
  handleReset = () => {
    // 重置
    this.props.form.resetFields()
  }

  getFieldsValues = (searches) => {
    // 获取搜索条件值
    let search = []
    Object.keys(searches).forEach(key => {
      if (searches[key] && typeof(searches[key]) === 'object') {
        if (this.state.formats[key] === weekFormat) {
          search.push({
            type: 'date',
            key: key,
            value: moment(searches[key]).startOf('week').format(this.state.formats[key]) + ' ' + moment(searches[key]).endOf('week').format(this.state.formats[key]),
            op: this.state.match[key]
          })
        } else {
          search.push({
            type: 'date',
            key: key,
            value: moment(searches[key]).format(this.state.formats[key]),
            op: this.state.match[key]
          })
        }
      } else if (searches[key] && searches[key] !== '-1') {
        search.push({
          type: 'text',
          key: key,
          value: searches[key],
          op: this.state.match[key]
        })
      }
    })
    search = Utils.jointsearchkey(search)
    this.props.refreshdata(search)
  }

  render() {
@@ -186,7 +201,7 @@
      }
    }
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form">
      <Form {...formItemLayout} className="ant-advanced-search-form" id="form-box">
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )

 src/components/mutilform/index.scss

@@ -11,4 +11,10 @@
  .ant-form-item-label {
    width: 100px;
  }
}
.ant-advanced-search-form {
  position: relative;
}
.ant-advanced-search-form .ant-input-number {
  width: 100%;
}

 src/components/sidemenu/index.jsx

@@ -29,7 +29,7 @@
    let result = await Api.getSubMenuData(menu.MenuID)
    if (result.status) {
      let param = sessionStorage.getItem('view_param') // 是否为打开新页面
      let msg = sessionStorage.getItem('UserID')
      let msg = sessionStorage.getItem('UserID') + '&' + sessionStorage.getItem('SessionUid') + '&' + sessionStorage.getItem('LoginUID')
      let submenuindex = 0 // 展开二级菜单索引
      let tabindex = null // 打开的tab页
      if (param) {
@@ -48,7 +48,7 @@
              child.src = '#/main/' + _msg
              if (child.LinkUrl === 'CommonTable') {
                child.type = 'CommonTable'
              } else if (child.LinkUrl === 'DataManage') {
              } else if (child.LinkUrl === 'DataManage' || child.LinkUrl === 'Main/Index?MenuNo=sProcExcepM') {
                child.type = 'DataManage'
              } else if (child.LinkUrl === 'bda/rdt?pageno=rolemenus&MenuNo=RoleMenuM') {
                child.type = 'RoleManage'

 src/components/sidemenu/index.scss

@@ -1,5 +1,4 @@
@import '../../assets/css/iconfont.css';
@import '../../assets/css/minkeicon.css';
@import '../../assets/css/global.scss';

.side-menu {

 src/components/tabview/index.jsx

@@ -39,7 +39,11 @@
      } else {
        tab.selected = false
      }
      return tab.MenuID !== menu.MenuID
      if (menu.type === 'TabForm' || menu.type === 'iframe') {
        return tab.MenuID !== menu.MenuID
      } else {
        return tab.MenuNo !== menu.MenuNo
      }
    })
    if (menu.MenuID === this.state.selectedTabId) {
      tabs[0] && (tabs[0].selected = true)
@@ -59,11 +63,13 @@
  selectcomponent (view) {
    // 根据tab页中菜单信息，选择所需的组件
    if (view.type === 'CommonTable') {
      return (<Comps.CommonTable MenuNo={view.MenuNo} key={view.MenuID}/>)
      return (<Comps.CommonTable MenuNo={view.MenuNo} MenuID={view.MenuID} key={view.MenuID}/>)
    } else if (view.type === 'DataManage') {
      return (<Comps.DataManage MenuNo={view.MenuNo} key={view.MenuID}/>)
      return (<Comps.DataManage MenuNo={view.MenuNo} MenuID={view.MenuID} key={view.MenuID}/>)
    } else if (view.type === 'RoleManage') {
      return (<Comps.RoleManage MenuNo={view.MenuNo} key={view.MenuID}/>)
      return (<Comps.RoleManage MenuNo={view.MenuNo} MenuID={view.MenuID} key={view.MenuID}/>)
    } else if (view.type === 'TabForm') {
      return (<Comps.TabForm MenuNo={view.MenuNo} MenuID={view.MenuID} key={view.MenuID} param={view.param}/>)
    } else if (view.type === 'iframe') {
      return (<Comps.Iframe key={view.MenuID} title={view.MenuName} url={'http://qingqiumarket.cn/MKWMS/zh-CN/' + view.LinkUrl}/>)
    } else {
@@ -111,15 +117,18 @@
      // tab窗口页增加或删除
      if (nextProps.tabviews.length > this.props.tabviews.length) {
        // 查看新tab页需要组件是否加载
        let newtab = nextProps.tabviews[nextProps.tabviews.length - 1]
        let MenuIDs = this.props.tabviews.map(tab => {return tab.MenuID})
        let newtab = nextProps.tabviews.filter(tab => !MenuIDs.includes(tab.MenuID))[0]
        if (!Comps.CommonTable && newtab.type === 'CommonTable') {
          Comps.CommonTable = asyncComponent(() => import('@/tabviews/commontable'))
        } else if (!Comps.Iframe && newtab.type === 'iframe') {
          Comps.Iframe = asyncComponent(() => import('@/tabviews/iframe'))
        } else if (!Comps.DataManage && newtab.type === 'DataManage') {
          Comps.DataManage = asyncComponent(() => import('@/tabviews/datamanage'))
        } else if (!Comps.DataManage && newtab.type === 'RoleManage') {
        } else if (!Comps.RoleManage && newtab.type === 'RoleManage') {
          Comps.RoleManage = asyncComponent(() => import('@/tabviews/rolemanage'))
        } else if (!Comps.TabForm && newtab.type === 'TabForm') {
          Comps.TabForm = asyncComponent(() => import('@/tabviews/tabform'))
        }
      }


 src/index.js

@@ -6,6 +6,7 @@
import * as serviceWorker from './serviceWorker'
import '@/assets/css/main.scss'
import '@/assets/css/action.scss'
import '@/assets/css/minkeicon.css';

const render  = Component => {
  ReactDOM.render(

 src/locales/en-US/main.js

@@ -1,13 +1,19 @@
export default {
  'main.search': 'Search',
  'main.reset': 'Reset',
  'main.confirm': 'OK',
  'main.return': 'Cancel',
  'main.copy.success': 'Copy success',
  'main.pagination.of': 'of',
  'main.pagination.items': 'items',
  'main.action.settingerror': 'Button setting error!',
  'main.action.confirm.tip': 'Do you want to execute?',
  'main.action.confirm.success': 'Execute successfully!',
  'main.action.confirm.selectline': 'Please select a line!',
  'main.action.confirm.selectSingleLine': 'Please select a single row of data!',
  'main.action.primarykey.required': 'Primary key not set!',
  'main.action.primarykey.repetition': 'There are multiple primary keys!',
  'main.action.primarykey.repetitionbid': 'There are multiple BID!',
  'main.form.required.input': 'Please input ',
  'main.form.required.select': 'Please select '
}

 src/locales/zh-CN/main.js

@@ -1,13 +1,19 @@
export default {
  'main.search': '搜索',
  'main.reset': '重置',
  'main.confirm': '确定',
  'main.return': '返回',
  'main.copy.success': '复制成功',
  'main.pagination.of': '共',
  'main.pagination.items': '条',
  'main.action.settingerror': '按钮设置错误！',
  'main.action.confirm.tip': '确定要执行吗?',
  'main.action.confirm.success': '执行成功！',
  'main.action.confirm.selectline': '请选择行!',
  'main.action.confirm.selectSingleLine': '请选择单行数据!',
  'main.action.confirm.selectline': '请选择行！',
  'main.action.confirm.selectSingleLine': '请选择单行数据！',
  'main.action.primarykey.required': '未设置主键！',
  'main.action.primarykey.repetition': '存在多个主键！',
  'main.action.primarykey.repetitionbid': '存在多个BID！',
  'main.form.required.input': '请输入',
  'main.form.required.select': '请选择'
}

 src/router/index.js

@@ -38,6 +38,8 @@
      if (param) {
        param = param.split('&')
        sessionStorage.setItem('UserID', param[3])
        sessionStorage.setItem('SessionUid', param[4])
        sessionStorage.setItem('LoginUID', param[5])
        return (<item.component {...props}/>)
      } else {
        return (<Redirect to={{ pathname: '/login', state: {from: props.location}}}/>)

 src/store/action-type.js

@@ -14,4 +14,7 @@
export const RESET_STATE = 'RESET_STATE'

// 修改编辑模式
export const RESET_DEBUG = 'RESET_DEBUG'
export const RESET_DEBUG = 'RESET_DEBUG'

// 刷新tab页面
export const REFRESH_TABVIEW = 'REFRESH_TABVIEW'

 src/store/action.js

@@ -44,4 +44,12 @@
  return {
    type: user.RESET_DEBUG
  }
}

// 刷新tab页面
export const refreshTabView = (refreshTab) => {
  return {
    type: user.REFRESH_TABVIEW,
    refreshTab
  }
}

 src/store/reducer.js

@@ -5,7 +5,8 @@
  tabviews: [], // 导航栏
  collapse: false, // 是否收起侧边栏导航
  isiframe: false, // 是否为iframe窗口
  debug: false // 知否可以复制菜单参数
  debug: false, // 知否可以复制菜单参数
  refreshTab: null // 刷新tabview页面信息
}

// 用户消息
@@ -46,6 +47,11 @@
        ...state,
        debug: true
      }
    case Type.REFRESH_TABVIEW:
      return {
        ...state,
        refreshTab: action.refreshTab
      }
    default:
      return state
  }

 src/tabviews/commontable/index.jsx

@@ -13,7 +13,8 @@

export default class NormalTable extends Component {
  static propTpyes = {
    MenuNo: PropTypes.string // 标签页数组
    MenuNo: PropTypes.string, // 菜单参数
    MenuID: PropTypes.string // 菜单Id
  }

  state = {

 src/tabviews/datamanage/index.jsx

@@ -1,7 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import {connect} from 'react-redux'
import { BackTop, notification } from 'antd'
import {refreshTabView} from '@/store/action'
import Api from '@/api'
import DataSearch from './modules/search'
import DataAction from './modules/action'
@@ -11,9 +13,10 @@
import enUS from '@/locales/en-US/main.js'
import './index.scss'

export default class DataManage extends Component {
class DataManage extends Component {
  static propTpyes = {
    MenuNo: PropTypes.string // 标签页数组
    MenuNo: PropTypes.string, // 菜单参数
    MenuID: PropTypes.string // 菜单Id
  }

  state = {
@@ -22,18 +25,12 @@
    searchparam: null, // 搜索参数
    actions: null, // 按钮
    columns: null, // 显示列
    mainKey: null, // 主键
    selectable: false, // 表格是否可选
    datafunc: null, // 获取数据及显示列的存储过程名称
    data: null,
    total: 0,
    loading: true,
    param: {
      pageIndex: 1,
      pageSize: 10,
      orderColumn: '',
      orderType: '',
      search: ''
    }
    loading: true
  }

  async loadconfig () {
@@ -48,15 +45,23 @@
        newconfig.searchlist = result.sWheredata
      }
      if (result.sMenusdata && result.sMenusdata.length > 0) {
        newconfig.actions = result.sMenusdata
        newconfig.actions = result.sMenusdata.map(action => {
          let width = +action.PopWidth
          if (width > 100 || !width) {
            width = 62
          }
          action.PopWidth = width / 100
          return action
        })
      }
      newconfig.selectable = result.CheckBox === 'true'
      newconfig.selectable = result.CheckBox !== 'true'
      newconfig.datafunc = result.sWhereAction
      this.setState(newconfig)
    } else {
      notification.warning({
        top: 92,
        message: result.message
        message: result.message,
        duration: 10
      })
    }
  }
@@ -73,13 +78,13 @@
    }
    let result = await Api.commonInterface(param)
    if (result.status) {
      result.sGriddata.length = 4
      this.setState({
        columns: result.sGriddata,
        data: result.data.map((item, index) => {
          item.key = index
          return item
        }),
        mainKey: result.sGriddata.filter(grid => grid.IDField === '1' || grid.IDField === '2'),
        total: result.Total,
        searchparam: searches,
        loading: false
@@ -87,7 +92,8 @@
    } else {
      notification.warning({
        top: 92,
        message: result.message
        message: result.message,
        duration: 10
      })
      this.setState({
        searchparam: searches,
@@ -128,13 +134,28 @@
    })
  }

  refreshbyaction = () => {
  refreshbyaction = (type) => {
    // 按钮操作后刷新表格,重置页码及选择项
    this.refs.dataTable.resetTable()
    this.loadDbdata(this.state.searchparam)
    this.setState({
      loading: true
    })
    if (type === 'grid') {
      this.refs.dataTable.resetTable()
      this.loadDbdata(this.state.searchparam)
      this.setState({
        loading: true
      })
    } else if (type === 'all') {
      this.setState({
        searchlist: null,
        searchparam: null,
        actions: null,
        columns: null,
        mainKey: null,
        selectable: false,
        datafunc: null,
        data: null,
        total: 0
      })
      this.loadconfig()
    }
  }

  gettableselected = () => {
@@ -146,13 +167,27 @@
    return data
  }

  switchview = (param) => {
    console.log(param)
  }

  UNSAFE_componentWillMount () {
    // 组件加载时，获取菜单数据
    this.loadconfig()
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
    if (!is(fromJS(this.props.refreshTab), fromJS(nextProps.refreshTab)) && nextProps.refreshTab && this.props.MenuNo === nextProps.refreshTab.MenuNo) {
      // 接收到刷新命令，且刷新信息中菜单参数与当前页面相同
      this.props.refreshTabView(null)
      this.refreshbyaction(nextProps.refreshTab.ReloadForm)
      return false
    } else if (!is(fromJS(this.props.refreshTab), fromJS(nextProps.refreshTab)) && !(nextProps.refreshTab && this.props.MenuNo === nextProps.refreshTab.MenuNo)) {
      // 未接收到刷新命令，或刷新信息中菜单参数与当前页面不同
      return false
    } else {
      return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
    }
  }

  render() {
@@ -166,10 +201,13 @@
            dict={this.state.dict}
          />
        }
        {this.state.actions &&
        {this.state.actions && this.state.columns &&
          <DataAction
            MenuNo={this.props.MenuNo}
            columns={this.state.columns}
            mainKey={this.state.mainKey}
            refreshdata={this.refreshbyaction}
            switchview={this.switchview}
            gettableselected={this.gettableselected}
            actions={this.state.actions}
            dict={this.state.dict}
@@ -198,4 +236,18 @@
      </div>
    )
  }
}
}

const mapStateToProps = (state) => {
  return {
    refreshTab: state.refreshTab
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    refreshTabView: (refreshTab) => dispatch(refreshTabView(refreshTab))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(DataManage)

 src/tabviews/datamanage/modules/action/index.jsx

@@ -1,8 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
// import { is, fromJS } from 'immutable'
import {connect} from 'react-redux'
import { Button, Affix, Modal, notification } from 'antd'
import MutilForm from '@/components/mutilform'
import {modifyTabview} from '@/store/action'
import Api from '@/api'
import './index.scss'

@@ -10,102 +11,314 @@

class MainAction extends Component {
  static propTpyes = {
    MenuNo: PropTypes.string,
    MenuNo: PropTypes.string, // 菜单参数
    columns: PropTypes.array, // 显示列用于表单列
    actions: PropTypes.array, // 搜索条件列表
    dict: PropTypes.object // 字典项
    dict: PropTypes.object, // 字典项
    mainKey: PropTypes.array
  }

  state = {
    visible: false,
    formdata: null,
    tabledata: null,
    confirmLoading: false,
    execAction: null
    visible: false, // 弹窗是否显示
    formdata: null, // 表单显示列数据
    tabledata: null, // 列表选择数据
    confirmLoading: false, // 确认中
    execAction: null, // 执行按钮属性
    primarykey: null, // 主键
    bidkey: null, // BID
    defaultproc: { // 默认添加、修改、删除存储过程
      Add: 'sDataManageAdd',
      Update: 'sDataManageUpt',
      Delete: 'sDataManageDel'
    }
  }
  
  refreshdata = () => {
    this.props.refreshdata()
  submitaction = (action, datalist, primarykey, bidkey) => {
    if (action.Ot === 'requiredSgl' || action.Ot === 'requiredOnce') { // 选择单行或多行id拼接执行
      let ids = datalist.map(data => {
        return data[primarykey]
      })
      let bids = null
      if (bidkey) {
        bids = datalist.map(data => {
          return data[bidkey] || ''
        })
      }
      return Api.submitInterface({
        func: action.AuditProc || this.state.defaultproc[action.Action],
        ID: ids.join(','), // 主键字段
        BID: bids ? bids.join(',') : '' // BID字段
      })
    } else if (action.Ot === 'required') { // 可选多行，循环执行
      let deffers = datalist.map(data => {
        return new Promise((resolve, reject) => {
          Api.submitInterface({
            func: action.AuditProc || this.state.defaultproc[action.Action],
            ID: data[primarykey], // 主键字段
            BID: data[bidkey] || '' // BID字段
          }).then(res => {
            resolve(res)
          })
        })
      })
      return Promise.all(deffers)
    } else { // 不选行
      return Api.submitInterface({
        func: action.AuditProc || this.state.defaultproc[action.Action],
        ID: '', // 主键字段
        BID: '' // BID字段
      })
    }
  }
  actionTrigger = (item) => {
    let _this = this
    let data = this.props.gettableselected() || []
    if (item.Ot === 'required' && data.length === 0) {
    let datalist = this.props.gettableselected() || []

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

    if ((item.Ot === 'requiredSgl' || item.Ot === 'required' || item.Ot === 'requiredOnce') && datalist.length === 0) {
      // 需要选择行时，校验数据
      notification.warning({
        top: 92,
        message: this.props.dict['main.action.confirm.selectline']
        message: this.props.dict['main.action.confirm.selectline'],
        duration: 10
      })
      return
    } else if (item.Ot === 'pop' && data.length !== 1) {
      if (data.length === 0) {
        // 需要选择行时，校验数据
    } else if (item.Ot === 'requiredSgl' && datalist.length > 1) {
      // 需要选择单行时，校验数据
      notification.warning({
        top: 92,
        message: this.props.dict['main.action.confirm.selectSingleLine'],
        duration: 10
      })
      return
    }

    /************* 校验主键与BID **************/
    let ID = []
    let BID = []
    if (item.Ot === 'requiredSgl' || item.Ot === 'required' || item.Ot === 'requiredOnce') {
      this.props.mainKey.forEach(key => {
        if (key.IDField === '1') {
          ID.push(key.FieldName)
        } else {
          BID.push(key.FieldName)
        }
      })
  
      if (ID.length === 0) { // 主键校验
        notification.warning({
          top: 92,
          message: this.props.dict['main.action.confirm.selectline']
          message: this.props.dict['main.action.primarykey.required'],
          duration: 10
        })
        return
      } else {
        // 需要选择单行时，校验数据
      } else if (ID.length > 1) {
        notification.warning({
          top: 92,
          message: this.props.dict['main.action.confirm.selectSingleLine']
          message: this.props.dict['main.action.primarykey.repetition'],
          duration: 10
        })
        return
      }
  
      if (BID.length > 1) { // BID校验
        notification.warning({
          top: 92,
          message: this.props.dict['main.action.primarykey.repetitionbid'],
          duration: 10
        })
        return
      }
    }

    if (item.Action === 'Prompt' || item.Action === 'Delete') {
    /********************* 操作处理 **********************/

    if (item.OpenType === 'prompt') { // 确认框
      confirm({
        title: this.props.dict['main.action.confirm.tip'],
        onOk() {
          return Api.setActionSubmit({
            func: 'SetActionSubmitSuccess'
            // func: 'SetActionSubmitError'
          }).then((res) => {
            if (res.status) {
              notification.success({
                top: 92,
                message: _this.props.dict['main.action.confirm.success']
                // duration: 0
                // description:
              })
              _this.refreshdata()
            } else {
              notification.error({
                top: 92,
                message: res.message
              })
            }
          })
          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']
                  })
                  if (item.ReloadForm && item.ReloadForm !== 'false' && item.ReloadForm !== 'singlegrid') {
                    _this.props.refreshdata(item.ReloadForm)
                  }
                }
              } else {
                if (res.status) {
                  notification.success({
                    top: 92,
                    message: _this.props.dict['main.action.confirm.success']
                  })
                  if (item.ReloadForm && item.ReloadForm !== 'false' && item.ReloadForm !== 'singlegrid') {
                    _this.props.refreshdata(item.ReloadForm)
                  }
                } else {
                  notification.error({
                    top: 92,
                    message: res.message,
                    duration: 15
                  })
                }
              }
            })
        },
        onCancel() {}
      })
    } else if (item.Action === 'Update') {
      Api.getModelFormData(item.MenuID).then(res => {
        if (res.status) {
          this.setState({
            formdata: res.data.map(input => {
              let validate = input.Validate && JSON.parse(input.Validate)
              input.DynOptions = JSON.parse(input.DynOptions)
              input.required = (validate && validate.required) || false
              return input
            }),
            visible: true,
            execAction: item,
            tabledata: data[0]
          })
    } else if (item.OpenType === 'execproc') { // 直接执行
      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']
              })
              if (item.ReloadForm && item.ReloadForm !== 'false' && item.ReloadForm !== 'singlegrid') {
                this.props.refreshdata(item.ReloadForm)
              }
            }
          } else {
            if (res.status) {
              notification.success({
                top: 92,
                message: this.props.dict['main.action.confirm.success']
              })
              if (item.ReloadForm && item.ReloadForm !== 'false' && item.ReloadForm !== 'singlegrid') {
                this.props.refreshdata(item.ReloadForm)
              }
            } else {
              notification.error({
                top: 92,
                message: res.message,
                duration: 15
              })
            }
          }
        })
    } else if (item.OpenType === 'newpage') { // 打开新页面
      let src = '#/' + item.LinkUrl + '?param=' + window.btoa(JSON.stringify({UserId: sessionStorage.getItem('UserID'), ID: datalist[0][ID[0]], BID: BID.length === 1 ? datalist[0][BID[0]] : ''}))
      window.open(src)
    } else if (item.OpenType === 'pop') {
      this.setState({
        formdata: this.props.columns.map(column => {
          column.readonly = false
          if (column.ReadOnly.includes(item.MenuID)) {
            column.readonly = true
          }
          return column
        }),
        visible: true,
        execAction: item,
        primarykey: ID[0],
        bidkey: BID.length === 1 ? BID[0] : '',
        tabledata: datalist[0] || ''
      })
    } else if (item.OpenType === 'tab') {
      let menu = {
        MenuNo: this.props.MenuNo,
        MenuID: item.MenuID,
        MenuName: item.MenuName,
        type: 'TabForm',
        param: {
          formdata: this.props.columns.map(column => {
            column.readonly = false
            if (column.ReadOnly.includes(item.MenuID)) {
              column.readonly = true
            }
            return column
          }),
          execAction: item,
          primarykey: ID[0],
          bidkey: BID.length === 1 ? BID[0] : '',
          tabledata: datalist[0] || '',
          defaultproc: this.state.defaultproc,
          dict: this.props.dict
        }
      }
      let tabs = JSON.parse(JSON.stringify(this.props.tabviews))
      let _index = null
      let isexit = false
      tabs = tabs.map((tab, index) => {
        tab.selected = false
        if (tab.MenuNo === this.props.MenuNo && tab.MenuID === item.MenuID) {
          isexit = true
          tab.selected = true
          tab.param = menu.param
        } else if (tab.MenuNo === this.props.MenuNo && tab.type !== 'TabForm') {
          _index = index
          menu.MenuName = tab.MenuName + '-' + menu.MenuName
          menu.selected = true
        }
        return tab
      })
      if (!isexit) {
        tabs.splice(_index + 1, 0, menu)
      }
      this.props.modifyTabview(tabs)
    } else if (item.OpenType === 'blank') {
      this.props.switchview(item)
    } else {
      notification.warning({
        top: 92,
        message: this.props.dict['main.action.settingerror'],
        duration: 10
      })
    }
  }

  changemenu(e) {
    let menu = {}
    let tabs = JSON.parse(JSON.stringify(this.props.tabviews))
    tabs = tabs.filter(tab => {
      tab.selected = false
      return tab.MenuID !== menu.MenuID
    })
    menu.selected = true
    tabs.push(menu)
    this.props.modifyTabview(tabs)
  }

  getModels = () => {
    if (!this.state.execAction) return
    let cols = +this.state.execAction.FormLineQty
    if (![1, 2, 3].includes(cols)) {
      cols = 2
    }
    return (
      <Modal
        wrapClassName='action-modal'
        title={(this.state.execAction && this.state.execAction.MenuName) || ''}
        title={this.state.execAction.MenuName || ''}
        visible={this.state.visible}
        width={(this.state.execAction && +this.state.execAction.PopWidth) || 520}
        width={document.body.clientWidth * this.state.execAction.PopWidth}
        onOk={this.handleOk}
        confirmLoading={this.state.confirmLoading}
        onCancel={this.handleCancel}
@@ -115,6 +328,7 @@
            dict={this.props.dict}
            formlist={this.state.formdata}
            data={this.state.tabledata}
            cols={cols}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />}
      </Modal>
@@ -126,11 +340,25 @@
      this.setState({
        confirmLoading: true
      })
      console.log(res)
      Api.setActionSubmit({
        func: 'SetActionSubmitSuccess'
      }).then((res) => {
        if (res.status) {
      let values = []
      this.props.columns.forEach(column => {
        let value = ''
        if (res[column.FieldName] || res[column.FieldName] === 0) { // 依次选取表单值、表格数据值、初始值
          value = res[column.FieldName]
        } else if (this.state.tabledata && this.state.tabledata[column.FieldName]) {
          value = this.state.tabledata[column.FieldName]
        } else if (column.InitVal) {
          value = column.InitVal
        }
        values.push(value)
      })
      Api.submitInterface({
        func: this.state.execAction.AuditProc || this.state.defaultproc[this.state.execAction.Action],
        AddLongText: values.join(','), // 表单数据
        ID: (this.state.tabledata && this.state.primarykey) ? this.state.tabledata[this.state.primarykey] : '', // 主键字段
        BID: (this.state.tabledata && this.state.bidkey) ? this.state.tabledata[this.state.bidkey] : '' // BID字段
      }).then(result => {
        if (result.status) {
          notification.success({
            top: 92,
            message: this.props.dict['main.action.confirm.success']
@@ -139,10 +367,17 @@
            confirmLoading: false,
            visible: false
          })
          if (this.state.execAction.ReloadForm && this.state.execAction.ReloadForm !== 'false' && this.state.execAction.ReloadForm !== 'singlegrid') {
            this.props.refreshdata(this.state.execAction.ReloadForm)
          }
        } else {
          this.setState({
            confirmLoading: false
          })
          notification.error({
            top: 92,
            message: res.message
            message: result.message,
            duration: 15
          })
        }
      })
@@ -151,6 +386,7 @@

  handleCancel = () => {
    this.setState({
      confirmLoading: false,
      visible: false
    })
    this.formRef.handleReset()
@@ -159,11 +395,6 @@
  UNSAFE_componentWillMount () {

  }

  // shouldComponentUpdate (nextProps, nextState) {
  //   console.log(!is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)))
  //   return true
  // }

  render() {
    return (
@@ -186,4 +417,16 @@
  }
}

export default MainAction
const mapStateToProps = (state) => {
  return {
    tabviews: state.tabviews
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MainAction)

 src/tabviews/datamanage/modules/action/index.scss

@@ -5,6 +5,9 @@
    margin-right: 15px;
    margin-bottom: 10px;
  }
  .ant-btn > .anticon + span {
    margin-left: 5px;
  }
}
// 设置模态框样式，规定最大最小高度，重置滚动条
.action-modal {
@@ -32,4 +35,9 @@
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }
  .ant-modal-footer {
    .ant-btn {
      margin-right: 25px;
    }
  }
}

 src/tabviews/datamanage/modules/search/index.jsx

@@ -51,16 +51,20 @@
          </Col>
        )
      } else if (item.Type === 'select') { // 下拉搜索
        let initval = item.FromField.filter(field => field.Selected === 'Selected')[0]
        if (!initval) {
          initval = item.FromField[0]
        }
        fields.push(
          <Col span={6} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.FieldName, {initialValue: item.FromField[0].id })(
              {getFieldDecorator(item.FieldName, {initialValue: initval.IdField })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {item.FromField.map(option =>
                    <Select.Option id={option.id} title={option.text} key={option.id} value={option.id}>{option.text}</Select.Option>
                    <Select.Option id={option.IdField} title={option.TextField} key={option.IdField} value={option.IdField}>{option.TextField}</Select.Option>
                  )}
                </Select>
              )}

 src/tabviews/datamanage/modules/table/index.jsx

@@ -1,6 +1,5 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
// import { is, fromJS } from 'immutable'
import { Table, message, Affix } from 'antd'
import './index.scss'

@@ -23,17 +22,22 @@
    selectedRowKeys: [],
    pageIndex: 1,
    pageSize: 10,
    columns: this.props.columns.map((item, index) => {
    columns: this.props.columns.map(item => {
      let _width = parseInt(item.Width) || 50
      // if (/ID$/.test(item.FieldName) || item.FieldName.includes('PassWord')) {
      //   _width = _width * 3
      // } else if (item.FieldName.includes('Date')) {
      //   _width = _width * 2
      // }
      return {
        align: item.Align,
        dataIndex: item.FieldName,
        title: item.Label,
        sorter: item.IsSort === 'true',
        width: _width,
        render: (text, record) => (
        render: (text) => (
          <div style={{ wordWrap: 'break-word', wordBreak: 'break-word', minWidth: _width + 'px' }}>
            {item.Type === 'image' ? text : text}
            {item.Type === 'Image' ? <img width={_width * 0.9} src={text} alt={text}/> : text}
          </div>
        )
        // onHeaderCell: () => ({style:{textAlign: 'center'}})
@@ -59,22 +63,17 @@
  }

  changeRow = (record, index) => {
    // 点击整行，触发切换，判断是否可选，单选或多选，进行对应操作
    if (!this.props.select || !this.props.select.selectable) return
    // 点击整行，触发切换，判断是否可选，进行对应操作
    if (!this.props.selectable) return

    let newkeys = JSON.parse(JSON.stringify(this.state.selectedRowKeys))
    let _re = newkeys.includes(index)

    if (this.props.select.selectType === 'radio') {
      this.setState({ selectedRowKeys: [index] })
    if (newkeys.includes(index)) {
      newkeys = newkeys.filter(item => item !== index)
    } else {
      if (_re) {
        newkeys = newkeys.filter(item => item !== index)
      } else {
        newkeys.push(index)
      }
      this.setState({ selectedRowKeys: newkeys })
      newkeys.push(index)
    }
    this.setState({ selectedRowKeys: newkeys })
  }

  changeTable = (pagination, filters, sorter) => {
@@ -127,6 +126,7 @@
          />
        </Affix>}
        <Table
          className={this.state.fixed ? 'fixed' : ''}
          bordered={true}
          rowSelection={rowSelection}
          size="middle"

 src/tabviews/datamanage/modules/table/index.scss

@@ -14,6 +14,9 @@
    .ant-table-tbody > tr.ant-table-row-selected td {
      background-color: #c4ebfd;
    }
    .ant-table-tbody > tr:hover.ant-table-row-selected td {
      background-color: #c4ebfd;
    }
  }
  .ant-table-body {
    overflow-x: auto!important;
@@ -76,4 +79,8 @@
      background: #fafafa;
    }
  }
  // 表格没有横向滚动条时
  .ant-table-wrapper.fixed .ant-table-body {
    min-height: unset;
  }
}

 src/tabviews/rolemanage/index.jsx

@@ -10,7 +10,8 @@

export default class RoleManage extends Component {
  static propTpyes = {
    MenuNo: PropTypes.string // 标签页数组
    MenuNo: PropTypes.string, // 菜单参数
    MenuID: PropTypes.string // 菜单Id
  }

  state = {

 src/tabviews/tabform/index.jsx

New file
@@ -0,0 +1,139 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import { Button, BackTop, notification } from 'antd'
import {refreshTabView, modifyTabview} from '@/store/action'
import MutilForm from '@/components/mutilform'
import Api from '@/api'
import './index.scss'

class TabForm extends Component {
  static propTpyes = {
    MenuNo: PropTypes.string, // 菜单参数
    MenuID: PropTypes.string, // 菜单Id
    param: PropTypes.object // 菜单参数
  }

  state = {
    loading: false
  }

  handleOk = () => {
    this.setState({
      loading: true
    })
    this.formRef.handleConfirm().then(res => {
      let values = []
      this.props.param.formdata.forEach(column => {
        let value = ''
        if (res[column.FieldName] || res[column.FieldName] === 0) { // 依次选取表单值、表格数据值、初始值
          value = res[column.FieldName]
        } else if (this.state.tabledata && this.state.tabledata[column.FieldName]) {
          value = this.state.tabledata[column.FieldName]
        } else if (column.InitVal) {
          value = column.InitVal
        }
        values.push(column.FieldName + 'equal\'' + value + '\'')
      })
      Api.submitInterface({
        func: this.props.param.execAction.AuditProc || this.props.param.defaultproc[this.props.param.execAction.Action],
        UptLongText: values.join(','), // 表单数据
        ID: (this.props.param.tabledata && this.props.param.primarykey) ? this.props.param.tabledata[this.props.param.primarykey] : '', // 主键字段
        BID: (this.props.param.tabledata && this.props.param.bidkey) ? this.props.param.tabledata[this.props.param.bidkey] : '' // BID字段
      }).then(result => {
        if (result.status) {
          notification.success({
            top: 92,
            message: this.props.param.dict['main.action.confirm.success']
          })
          
          // 刷新主列表页面
          if (this.props.param.execAction.ReloadForm && this.props.param.execAction.ReloadForm !== 'false' && this.props.param.execAction.ReloadForm !== 'singlegrid') {
            this.props.refreshTabView({
              MenuNo: this.props.MenuNo,
              ReloadForm: this.props.param.execAction.ReloadForm
            })
          }

          this.handleCancel()
        } else {
          notification.error({
            top: 92,
            message: result.message,
            duration: 15
          })
        }
        this.setState({
          loading: false
        })
      })
    }, () => {})
  }

  handleCancel = () => {
    // 关闭当前窗口，返回原列表页
    let tabs = JSON.parse(JSON.stringify(this.props.tabviews))
    tabs = tabs.filter(tab => {
      if (tab.MenuNo === this.props.MenuNo && tab.type !== 'TabForm') {
        tab.selected = true
      } else {
        tab.selected = false
      }
      return tab.MenuID !== this.props.MenuID
    })
    this.props.modifyTabview(tabs)
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  render() {
    let cols = +this.props.param.execAction.FormLineQty
    if (![1, 2, 3].includes(cols)) {
      cols = 2
    }
    return (
      <div className="tabform">
        <MutilForm
          dict={this.props.param.dict}
          formlist={this.props.param.formdata}
          data={this.props.param.tabledata}
          cols={cols}
          wrappedComponentRef={(inst) => this.formRef = inst}
        />
        <div className="operation">
          <Button type="primary" htmlType="submit" onClick={() => {this.handleOk()}} loading={this.state.loading}>
            {this.props.param.dict['main.confirm']}
          </Button>
          <Button onClick={() => {this.handleCancel()}}>
            {this.props.param.dict['main.return']}
          </Button>
        </div>
        <BackTop>
          <div className="ant-back-top">
            <div className="ant-back-top-content">
              <div className="ant-back-top-icon"></div>
            </div>
          </div>
        </BackTop>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    tabviews: state.tabviews
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    refreshTabView: (refreshTab) => dispatch(refreshTabView(refreshTab)),
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TabForm)

 src/tabviews/tabform/index.scss

New file
@@ -0,0 +1,15 @@
.tabform {
  padding: 25px 25px 120px;
  .operation {
    text-align: center;
    margin: 20px 0;
    .ant-btn {
      height: 40px;
      padding: 0 30px;
      font-size: 16px;
    }
    .ant-btn-primary {
      margin-right: 40px;
    }
  }
}