menu.js

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

const FormItem = Form.Item;

class menuManage extends React.Component {
  state = {
    tloading: false,//数据加载中
    expandListStatus:false,//默认树形折叠
    expandStatus: false,
    btnAuth: null,
    isShowOpt: true,
  }
  params = {
    page: 1,
    pageSize: 10
  }
  componentWillMount() {
    const btnAuth = storage.get('btnAuth')
    this.setState({btnAuth})
    if(
      btnAuth.indexOf('menu-edit') === -1 && 
      btnAuth.indexOf('menu-delete') === -1 && 
      btnAuth.indexOf('addNextMenu') === -1){
        this.setState({isShowOpt: false})
      }
  }
  //页面初始化加载
  async componentDidMount() {
    this.getParamQuery()    
  }

  //重置表单
  reset = () => {
    this.props.form.resetFields();
    let searchInfo = Utils.trim(this.props.form.getFieldsValue());
    this.setState({searchInfo},() => {
      this.getParamQuery()
    }) 
  }
  //刷新表单
  refresh= () => {
    this.getParamQuery()
  }
  //根据条件查询table数据
  queryList = () => {
    let searchInfo = Utils.trim(this.props.form.getFieldsValue());
    console.log(searchInfo);
    this.setState({searchInfo},() => {
      this.getParamQuery()
    })  
  }
  //树形结构初始化
  getParamQuery = (item) => {
    this.setState({
          tloading: true,
        })
    let searchInfo=this.state.searchInfo
    axios.ajax({
      url: API_MENU_MANAGE.getModuleTreeList,
      data: {
        ...searchInfo,
        pageNum: this.params.page,
        pageSize: this.params.pageSize
      }
    }).then(res => {
      if (res && res.length > 0) {
        let obj=res;

        let list = res.map((item, index) => {
          item.key = index
          return item
        })
        obj.total=obj.length;
        this.setState({
          list,
          tloading: false,
          selectedRowKeys: [],
          selectedRows: null,
        })
      } else {
        this.setState({
          list: [],
          tloading: false,
        })
      }

    })
  }
  //添加下级菜单
  addNextMenu= (mid) => {
    if (mid) {
      this.props.history.push({
        pathname: '/home/permission/menuManage/menuAdd/addNextItem/' + mid,
      });
    } else {
      Modal.confirm({
        title: '警告',
        content: "请选择一条数据"
      })
    }
  }
  //删除一行
  handleDelete = (mid,mName) => {
    if (mid) {
      Modal.confirm({
        title: '删除',
        content: `您要删除的菜单为 : ${mName} ？`,
        okText:"确认",
        cancelText:"取消",
        onOk: () => {
          axios.ajax({
            url: API_MENU_MANAGE.deleteModule,
            data: { id: mid }
          }).then(res => {
            console.log(res);
            message.success('删除成功')
            this.getParamQuery();
          })
        }
      })

    } else {
      Modal.confirm({
        title: '警告',
        content: "请选择一条数据"
      })
    }

  }

  //选择一行数据
  onRowClick = (record, index) => {
    let selectKey = [index];
    this.setState({
      selectedRowKeys: selectKey,
      selectedItem: record
    })
  }

  //修改一行数据
  update = (mid) => {
    if (mid) {
      this.props.history.push({
        pathname: '/home/permission/menuManage/menuAdd/updateItem/' + mid,
      });
    } else {
      Modal.confirm({
        title: '警告',
        content: "请选择一条数据"
      })
    }
  }
  //改变选择一行的关键key
  onSelectChange =(selectedRowKeys)=>{
    console.log('onSelectChange',selectedRowKeys);
    this.setState({ selectedRowKeys });
  }
  //展开授权功能菜单
  expandList = () => {
     this.setState({ 
      list: [], 
      defaultExpandAllRows: !this.state.expandListStatus, 
      expandListStatus: !this.state.expandListStatus}, () => {
      this.getParamQuery()
    })  
  }
  // 展开条件
  expandMenu = ()=> {
    this.setState({
      expandStatus: !this.state.expandStatus,
    })
  }

  render() {
    const columns = [
      {
        title: '菜单名称',
        key: 'name',
        dataIndex: 'name',
        align: 'left',
        className:'pLeft tdWidth',
        width: '200px',
        render(name) {
          return Utils.formatTableColumn(name)
        }
      },
       {
        title: '链接/标识',
        key: 'link',
        dataIndex: 'link',
        minwidth: '100px',
        align:'center',
      },
      {
        title: '排序',
        key: 'sequence',
        dataIndex: 'sequence',
        width: '100px',
        align:'center',
      },
       {
        title: '类型',
        key: 'menuType',
        dataIndex: 'menuType',
        width: '120px',
        align:'center',
        render(sequence) {
          return {
            1: '菜单',
            2: '权限（按钮）',
          }[sequence]
        }
      },
       {
        title: '可见',
        key: 'status',
        dataIndex: 'status',
        width: '100px',
        align:'center',
        render(status) {
          return {
            1: '显示',
            2: '隐藏',
          }[status]
        }
      }
    ]
    if(this.state.isShowOpt) {
      columns.push(
        {
          title: '操作',
          key: 'opereate',
          className:'pRight',
          align: 'right',
          width: '300px',
          render: (text, item) => {
           let mid=item.id
           let mName=item.name
            return (
              <div  >
                {
                  this.state.btnAuth.indexOf('menu-edit') !== -1 ? 
                  <Button size="small" style={{ marginRight: 10 }} onClick={(item) => { this.update(mid) }} >修改</Button>
                  : ''
                }
                {
                  this.state.btnAuth.indexOf('menu-delete') !== -1 ? 
                  <Button size="small" style={{ marginRight: 10 }} onClick={(item) => { this.handleDelete(mid,mName) }} >删除</Button>
                  : ''
                }
                {
                  this.state.btnAuth.indexOf('addNextMenu') !== -1 ? 
                  <Button size="small" onClick={(item) => { this.addNextMenu(mid) }}>新增下级菜单</Button>
                  : ''
                }
                
              </div>
            )
          }
        }
      )
    }
    
    const { getFieldDecorator } = this.props.form;
    return (
      <div className='mTable'>
      <div className="searchWrap">
        <UserManageBar title="菜单管理" />
        <div className='expandMenu iconfont icon-chazhaobiaodanliebiao' onClick={this.expandMenu} ></div>
      
        { 
          this.state.expandStatus ? 
          <div className="userForm">
            <Form layout="inline">
              <Row gutter={10}>
                <Col span="4">
                  <FormItem  >
                    <label htmlFor="菜单名称">菜单名称</label>
                    {
                      getFieldDecorator('moduleName', {
                      
                      })(
                        <Input placeholder="菜单名称" />
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="20">
                  <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('menu-add') !== -1 ? 
          <NavLink replace to={'/home/permission/menuManage/menuAdd/addItem'} ><Button>新增</Button></NavLink>
          : ''
        }
          
          <Button onClick={this.refresh} style={{ display: 'none' }}>刷新</Button>
        </div>

        <UserManageBar title="详细数据" />
        <div onClick={this.expandList} className='expandListMenu' ><Icon type= { this.state.expandListStatus ? 'caret-down' : 'caret-right'}/>展开/折叠</div>
        <div className="detData reTable">
          <div style={{ backgroundColor: '#fff',minHeight:'500px'}}>
            <Table
              className="menuTable"
              rowKey="id"
              key={`table-${this.state.list && this.state.list.length}`}
              bordered={false}
              columns={columns}
              loading={this.state.tloading}
              selections={false}
              defaultExpandAllRows = {this.state.expandListStatus}
              dataSource={this.state.list}
              childrenColumnName='modules'
              onRow={(record, index) => {
                return {
                  onClick: () => {
                    this.onRowClick(record, index);
                  }
                };
              }}
              pagination={false}
            />
          </div>
        </div>
      </div>
    )
  }
}

export default Form.create()(menuManage);