index.js

import React from 'react'
import { Row, Col, Table, Form, Button, Input, message, Modal } from 'antd'
import { NavLink } from 'react-router-dom'
import UserManageBar from '@components/Common/WhiteBar/index'
import axios from '@src/axios/index'
import Utils from '@src/utils/utils'
import storage from '@src/utils/localStorage'


import {API_CUSTOMER_MANAGE} from '@src/Api'

const FormItem = Form.Item;


export default class insCompany extends React.Component {

  state = {
    loading: false,  //给表格的loading层
    list: [],  //表格数据
    searchForm:{},   // 搜索的表单

    expandStatus: false,
    btnAuth: [],
    isShowOpt: true,
    pagination: []
  }
  
  params = {
    pageSize: 2,
    pageNum: 1
  }

  componentWillMount() {
    const btnAuth = storage.get('btnAuth')
    this.setState({btnAuth})
    if(
      btnAuth.indexOf('insCompany-add') === -1 && 
      btnAuth.indexOf('insCompany-edit') === -1 && 
      btnAuth.indexOf('insCompany-delete') === -1 ){
        this.setState({isShowOpt: false})
      }
  }

  componentDidMount() {
    this.getParamQuery()
  }

  // 获取保险公司列表
  getParamQuery = () => {
    let searchForm = Utils.trim(this.state.searchForm)
    this.setState({ loading: true },()=>{
      axios.ajax({
        url: API_CUSTOMER_MANAGE.getAllListInsuranceCompany,
        data: {
          ...searchForm,
          pageSize: this.params.pageSize,
          pageNum: this.params.pageNum
        }
      }).then(res => {    
        const _this = this
        if (res && res.length > 0) {
          this.setState({
            list: res,
            loading: false,
            pagination: Utils.pagination(res, (current) => {
              _this.params.pageNum = current;
              _this.getParamQuery();
            })
          })
        } else {
          const current = _this.params.pageNum
          if (current > 1) {
            this.params = {
              pageNum: current - 1,
              pageSize: 10
            }
            this.getParamQuery()
           return 
          }
  
          this.setState({
            list: [],
            loading: false,         
            pagination: Utils.pagination(res, (current) => {
              _this.params.pageNum = current;
              _this.getParamQuery();
            })
          })
        }
      })
    }) 
  }


  // 查询重置搜索条件
  reset = () => {
    this.props.form.resetFields();
    const searchForm = this.props.form.getFieldsValue();
    this.setState({searchForm}, ()=> {
      this.getParamQuery()
    })
  }

  // 查询操作
  queryList = () => {
    const searchForm = this.props.form.getFieldsValue();
    this.setState({searchForm}, ()=> {
      this.getParamQuery()
    })    
  }

  // 字典列删除
  handleDelete = (text, record, index) => {
    if (text) {
      Modal.confirm({
        title: '删除',
        content: `您要删除: ${text.name} ？`,
        okText:"确认",
        cancelText:"取消",
        onOk: () => {
          axios.ajax({
            url: API_CUSTOMER_MANAGE.delInsuranceCompanyByid,
            data: {id: text.id}
           }).then(res => {  
             message.success('删除成功')
             this.setState({list:[]}, ()=>{
              this.getParamQuery();
             })            
           })
        }
      })
    } else {
      Modal.confirm({
        title: '警告',
        content: "请选择一条数据"
      })
    }
  }

 
  // 展开查询条件
  expandMenu = ()=> {
    this.setState({
      expandStatus: !this.state.expandStatus,
    })
  }

  render () {
    let loading = this.state.loading;
    const columns = [
      {
        title: '保险公司名称',
        key: 'name',
        dataIndex: 'name',
        align: 'left',
        className: 'tdWidth',
        render(name) {
          return Utils.formatTableColumn(name)
         }
      },
    ];
    if (this.state.isShowOpt) {
      columns.push(
        {
          title: '操作',
          key: 'opereate',
          width: '260px',
          align: 'right',
          className: 'tableOptCol',
          render: (text, item, index) => {
            return (
              <div  >
                  {
                    this.state.btnAuth.indexOf('insCompany-edit') !== -1 ? 
                      <NavLink to={'/home/system/insCompany/edit/'+ text.id} >
                        <Button size="small">修改</Button>
                      </NavLink>: '' 
                  } 
                  {
                    this.state.btnAuth.indexOf('insCompany-delete') !== -1 ? 
                    <Button size="small" onClick ={ (e) => this.handleDelete(text, item, index) }  >
                      删除
                    </Button>  : ''
                  }
                 
              </div>
            )
          }
        },
      )
    }


    return (
      <div className='dictBg'>
        <div className="system">
        <div className="searchWrap">
          <UserManageBar title="保险公司管理" />
          {/* <div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div> */}
        { 
          this.state.expandStatus ?         
          <div className="systemSearch">
            <Form  layout="horizontal">
              <Row gutter={24}>
                <Col span="6">
                  <FormItem  >
                    <label htmlFor="公司名称">公司名称</label>
                    <Input placeholder="公司名称" />
                  </FormItem>
                </Col>
                <Col span="4">
                  <FormItem style={{ marginTop: 38, }} >
                    <Button onClick={(item) => { this.queryList(item) }} style={{ background: '#00BB29', color: "#fff", marginRight: 4 }} >查询</Button>
                    <Button onClick={this.reset} style={{ background: '#ED1719', color: "#fff" }} type="danger">重置</Button>
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          : ''
        }    
        </div>   
         
          <div className="operate">
          {
            this.state.btnAuth.indexOf('insCompany-add') !== -1 ? 
            
              <NavLink replace to={'/home/system/insCompany/add'} >
                <Button>新 增</Button>
              </NavLink>
              : ''
          }
            
          </div>
          <UserManageBar title="详细数据" />

          <div className="detData reTable" style={{ }}>
            <div style={{ backgroundColor: '#fff',minHeight: '500px' }}>           
                <Table
                rowKey = 'id'
                key = {`table-${this.state.list && this.state.list.length}`}
                bordered={false}
                columns={columns}
                selections={false}                   
                loading = {loading}
                dataSource = {this.state.list}
                // pagination={this.state.pagination}
              />             
              
            </div>
          </div>

        </div>
      </div>
    )
  }
}