index.js

import React from 'react'
import { Row, Col, Table, Form, Button, Input,  Modal,message } 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_SYSPARAM_MANAGE } from '@src/Api'

const FormItem = Form.Item;

class SysParam extends React.Component {
  state = {
    loading: true,  //给表格的loading层
    list: [],  //表格数据

    defaultExpandAllRows: false,  // 是否展开控制
    searchForm: {},   // 搜索的表单
    expandStatus: false,
    btnAuth: null,
    isShowOpt: true
  }

  params = {
    pageSize: 10,
    pageNum: 1
  }

  componentDidMount() {
    this.getSysParamList()
  }

  // 重置
  reset = () => {
    this.params.pageNum = 1;
    this.props.form.resetFields();
    this.getSysParamList();
  }

  queryList = () => {
    this.params.pageNum = 1;
    this.getSysParamList();
  }

  getSysParamList = () => {
    let _this = this
    let searchData = this.props.form.getFieldsValue()
    this.setState({
      loading:true
    })

    axios.ajax({
      url: API_SYSPARAM_MANAGE.getSysParamList,
      data: {
        ...this.params,
        ...searchData
      }
    }).then(res => {
      console.log(res);

      if (res && res.records && res.records.length >= 0) {
        let list = res.records.map((item, index) => {
          return { ...item, key: index };
        });
        this.setState({
          list,
          loading: false,
          pagination: Utils.pagination(res, (current) => {
            _this.params.pageNum = current;
            _this.setState({ isLoading: true });
            this.getSysParamList();
          })
        })
      }
    })
  }

  componentWillMount() {
    console.log(3333)
    const btnAuth = storage.get('btnAuth')
    this.setState({ btnAuth })
    if (
      btnAuth.indexOf('sys-param-edit') === -1 &&
      btnAuth.indexOf('sys-param-delete') === -1) {
      this.setState({ isShowOpt: false })
    }
  }

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

  delete = (item, record) => {
    // console.log(item);
    Modal.confirm({
      title: '删除',
      content: `您要删除的参数名称为 : ${record.paramName} ？`,
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        axios.ajax({
          url: API_SYSPARAM_MANAGE.deleteSysParam,
          data: {
            id: record.id
          }
        }).then(res => {
          console.log(res);
          message.success('删除成功');
          this.params.pageNum = 1;
          this.getSysParamList();

          if (res && res.records && res.records.length >= 0) {
            let list = res.records.map((item, index) => {
              return { ...item, key: index };
            });
            this.setState({
              list,
              loading: false,
            })
          }
        })
      }
    })

  }

  update=(item,paramName,paramKeyName,paramKeyValue,description,id)=>{
    let obj = {paramName,paramKeyName,paramKeyValue,description,id};
    this.props.history.push({
      pathname: '/home/system/sysParam/add',
      state: obj
    });
  }

  // 刷新缓存
  refreshCache = () => {
    axios.ajax({
      url: API_SYSPARAM_MANAGE.refreshCacheOfParam
    }).then((res) => {
      message.success('刷新成功');
    });
  }

  render() {
    let loading = this.state.loading;

    const { getFieldDecorator } = this.props.form;
    const columns = [
      {
        title: '序号', width: 90, dataIndex: 'key', key: 'key', align: 'left',
        className: 'pLeft', render: (key) => {
          return (this.params.pageNum - 1) * 10 + (key + 1);
        }
      },
      {
        title: '参数名称',  dataIndex: 'paramName', className: 'tdWidth', key: 'paramName', render: (paramName) => {
          return Utils.formatTableColumn(paramName);
        }
      },
      {               
        title: '参数键名', dataIndex: 'paramKeyName', key: 'paramKeyName', className: 'tdWidth', render: (paramKeyName) => {
          return Utils.formatTableColumn(paramKeyName);
        }
      },
      {
        title: '参数键值', dataIndex: 'paramKeyValue', key: 'paramKeyValue', className: 'tdWidth', render: (paramKeyValue) => {
          return Utils.formatTableColumn(paramKeyValue);
        }
      },
      {
        title: '参数描述', dataIndex: 'description', key: 'description', className: 'tdWidth', render: (description) => {
          return Utils.formatTableColumn(description);
        }
      },
      {
        title: '创建时间', dataIndex: 'createTime', key: 'createTime', className: 'tdWidth', render(createTime) {
          return Utils.formateDateToYMD(createTime)
        }
      },



    ];
    if (this.state.isShowOpt) {
      columns.push(
        {
          title: '操作',
          key: 'opereate',
          width: 200,
          className: 'pRight',
          align: 'right',
          render: (record) => {
            let id = record.id, item = record;
            let {paramName,paramKeyName,paramKeyValue,description} = record;
            return (<div>
              {
                this.state.btnAuth.indexOf('sys-param-edit') !== -1 ?
                  <Button size="small" style={{ marginRight: 15 }} onClick={(item) => { this.update(item,paramName,paramKeyName,paramKeyValue,description,id) }}  >修改</Button>
                  : ''
              }

              {
                this.state.btnAuth.indexOf('sys-param-delete') !== -1 ?
                  <Button size="small" onClick={(item) => this.delete(item, record)} >删除</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>
                          {
                            getFieldDecorator('paramName', {
                            })(
                              <Input placeholder="参数名称" />
                            )
                          }
                        </FormItem>
                      </Col>
                      <Col span="6">
                        <FormItem  >
                          <label htmlFor="参数键名">参数键名</label>
                          {
                            getFieldDecorator('paramKeyName', {
                            })(
                              <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('sys-param-add') !== -1 ?
              <NavLink replace to={'/home/system/sysParam/add'} ><Button>新 增</Button></NavLink> : ''
            }
            {
              this.state.btnAuth.indexOf('sys-param-cache') !== -1 ?
                <Button onClick={this.refreshCache}>
                  {/* <NavLink replace to={'/home/system/dictManage/dictAdd/addOpt'} >刷新缓存</NavLink> */}
                  刷新缓存
                </Button> : ''
            }

          </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}
                defaultExpandAllRows={false}
                childrenColumnName='childDicts'
                loading={loading}
                dataSource={this.state.list}
                onExpand={this.onExpand}
                handleScollChange={200}
                indentSize={12}
                // scroll={{ x: '105%' }}
                pagination={this.state.pagination}
              />

            </div>
          </div>

        </div>
      </div>
    )
  }
}
export default Form.create()(SysParam);