2019-09-20update

king

2019-09-20 4e837faa0307fda4d0d3bd463c88a7ef43817443

 src/tabviews/commontable/index.jsx

@@ -1,65 +1,158 @@
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, Button, message } 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') || sessionStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    searchlist: null,
    actions: null,
    columns: null,
    select: null,
    data: null,
    total: 0,
    loading: true,
    param: {
      pageIndex: 1,
      pageSize: 10,
      orderColumn: '',
      orderType: '',
      search: ''
    }
  }

  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
        })
    }
    return children
      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 = 4
      }
      newconfig.select = result.select
      this.setState(newconfig)
    }
  }

  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) => {
    console.log(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
    })
    // window.print()
  }

  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
    })
  }

  handleReset = () => {
    this.props.form.resetFields()
  copyMenuNo = (e) => {
    e.stopPropagation()
    let oInput = document.createElement('input')
    oInput.value = this.props.MenuNo
    document.body.appendChild(oInput)
    oInput.select()
    document.execCommand('Copy')
    oInput.className = 'oInput'
    oInput.style.display='none'
    message.success(this.state.dict['main.copy.success'])
  }

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

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

  componentDidMount () {
    // console.log(this.props.MenuNo)
  }

  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 actions={this.state.actions} dict={this.state.dict} />}
        {this.state.columns && <MainTable 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} />}
        <Button className="main-copy" icon="copy" onClick={this.copyMenuNo} shape="circle" />
        <BackTop>
          <div className="ant-back-top">
            <div className="ant-back-top-content">
              <div className="ant-back-top-icon"></div>
            </div>
          </div>
        </BackTop>
      </div>
    )
  }