add-datamanage

king

2019-10-12 c7f79abded9ad2e29f297da4a04a641b96b61c5e

 src/tabviews/commontable/index.jsx

@@ -1,65 +1,192 @@
import React, {Component} from 'react'
import { Form, Row, Col, Input, Button } from 'antd'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { BackTop } from 'antd'
import Api from '@/api'
import MainSearch from '@/components/mainSearch'
import MainAction from '@/components/mainAction'
import MainTable from '@/components/mainTable'
import Loading from '@/components/loading'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import './index.scss'

class AdvancedSearchForm extends React.Component {
export default class NormalTable extends Component {
  static propTpyes = {
    MenuNo: PropTypes.string // 标签页数组
  }

  state = {

    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    searchlist: null,
    actions: null,
    columns: null,
    select: null,
    data: null,
    total: 0,
    loading: true,
    param: {
      pageIndex: 1,
      pageSize: 10,
      orderColumn: '',
      orderType: '',
      search: ''
    },
    fixed: {}
  }

  getFields() {
    const { getFieldDecorator } = this.props.form
    const children = []
    for (let i = 0; i < 10; i++) {
      children.push(
        <Col span={6} key={i}>
          <Form.Item label={`菜单名称开始`}>
            {getFieldDecorator(`field-${i}`)(<Input placeholder="placeholder" />)}
          </Form.Item>
        </Col>
      )
  async loadconfig () {
    // 获取主菜单
    let result = await Api.getMainConfigsData(this.props.MenuNo)
    if (result.status) {
      let newconfig = {}
      if (result.searches && result.searches.length > 0) {
        newconfig.searchlist = result.searches.map(search => {
          search.DynOptions = search.DynOptions ? JSON.parse(search.DynOptions) : ''
          return search
        })
      }
      if (result.actions && result.actions.length > 0) {
        newconfig.actions = result.actions.map(action => {
          return action
        })
      }
      if (result.columns && result.columns.length > 0) {
        newconfig.columns = result.columns.map(column => {
          return column
        })
        newconfig.columns.length = 3
      }
      newconfig.fixed = {
        fixaction: true,
        fixtable: true
      }
      newconfig.select = result.select
      this.setState(newconfig)
    }
    return children
  }

  handleSearch = e => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
  async loadmaindata (pageIndex = 1, pageSize = 10, orderColumn = '', orderType = '', search = '') {
    // 获取列表数据
    let result = await Api.getMainTableData(this.props.MenuNo, pageIndex, pageSize, orderColumn, orderType, search)
    if (result.status) {
      this.setState({
        data: result.data.map((item, index) => {
          item.key = index
          item.rows = item.mkrows
          return item
        }),
        total: result.total,
        loading: false
      })
    }
  }

  refreshbysearch = (searches) => {
    // 搜索条件变化
    this.loadmaindata(this.state.param.pageIndex, this.state.param.pageSize, this.state.param.orderColumn, this.state.param.orderType, searches)
    let param = Object.assign({}, this.state.param, {
      search: searches
    })
    this.setState({
      loading: true,
      param: param
    })
  }

  handleReset = () => {
    this.props.form.resetFields()
  refreshbytable = (pagination, filters, sorter) => {
    // 表格查询条件修改
    console.log(filters)
    if (sorter.order) {
      let _chg = {
        ascend: 'asc',
        descend: 'desc'
      }
      sorter.order = _chg[sorter.order]
    }
    this.loadmaindata(pagination.current, pagination.pageSize, sorter.field, sorter.order, this.state.param.search)
    let param = Object.assign({}, this.state.param, {
      pageIndex: pagination.current,
      pageSize: pagination.pageSize,
      orderColumn: sorter.field,
      orderType: sorter.order
    })
    this.setState({
      loading: true,
      param: param
    })
  }

  refreshbyaction = () => {
    // 按钮操作后刷新表格,重置页码及选择项
    this.refs.mainTable.resetTable()
    this.loadmaindata(1, this.state.param.pageSize, this.state.param.orderColumn, this.state.param.orderType, this.state.param.search)
    this.setState({
      loading: true
    })
  }

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

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

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

  render() {
    return (
      <Form className="ant-advanced-search-form" onSubmit={this.handleSearch}>
        <Row gutter={24}>{this.getFields()}</Row>
        <Row>
          <Col span={24} style={{ textAlign: 'right' }}>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              重置
            </Button>
          </Col>
        </Row>
      </Form>
    )
  }
}

const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm)

export default class NormalTable extends Component {
  render() {
    return (
      <div>
        <WrappedAdvancedSearchForm />
        <div className="search-result-list">Search Result List</div>
      <div className="commontable">
        {!this.state.searchlist && <Loading />}
        {this.state.searchlist &&
          <MainSearch
            refreshdata={this.refreshbysearch}
            searchlist={this.state.searchlist}
            dict={this.state.dict}
          />
        }
        {this.state.actions &&
          <MainAction
            MenuNo={this.props.MenuNo}
            fixed={this.state.fixed.fixaction}
            refreshdata={this.refreshbyaction}
            gettableselected={this.gettableselected}
            actions={this.state.actions}
            dict={this.state.dict}
          />
        }
        {this.state.columns &&
          <MainTable
            ref="mainTable"
            MenuNo={this.props.MenuNo}
            fixed={this.state.fixed}
            refreshdata={this.refreshbytable}
            columns={this.state.columns}
            data={this.state.data}
            select={this.state.select}
            total={this.state.total}
            loading={this.state.loading}
            dict={this.state.dict}
          />
        }
        <BackTop>
          <div className="ant-back-top">
            <div className="ant-back-top-content">
              <div className="ant-back-top-icon"></div>
            </div>
          </div>
        </BackTop>
      </div>
    )
  }