salary-management-front/pc4mobx/hrmSalary/pages/taxRate/index.js

import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

import { Button, Table, DatePicker, Modal } from 'antd';

import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaInputSearch, WeaSlideModal } from 'ecCom';
import { WeaTableNew } from 'comsMobx';
import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from '../../components/customTab';
import ContentWrapper from '../../components/contentWrapper';
import { columns, dataSource } from './columns';


const WeaTable = WeaTableNew.WeaTable;

import SlideModalTitle from '../../components/slideModalTitle';
import EditSlideContent from './editSlideContent';

const { MonthPicker } = DatePicker;

@inject('taxRateStore')
@observer
export default class TaxRate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      currentOperate:  "add",
      editable: false,
    } 
  }

  componentWillMount() { // 初始化渲染页面
    const { taxRateStore: { doInit } } = this.props;
    doInit();
  }

  // 增加编辑功能，重写columns绑定事件
  getColumns = (columns) => {
    let newColumns = '';
    newColumns = columns.map(column => {
      let newColumn = column;
      newColumn.render = (text, record, index) => { //前端元素转义
        let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
        switch(newColumn.dataIndex) {
          case "name":
            return <a onClick={() => {this.onEdit(record, false)}}
               dangerouslySetInnerHTML={{ __html: valueSpan }} />
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
        }
      }
      return newColumn;
    });
    return newColumns;
  }

  onEdit = (record, editable) => {
    this.setState({currentOperate: "update", editable: editable})
    const {taxRateStore: {setSlideVisiable, emptyForm, getItemInform }} = this.props;
    emptyForm();
    setSlideVisiable(true);
    getItemInform(record.id)
  }

  handleInsertBtnClick = () => {
    const {taxRateStore: {setSlideVisiable, emptyForm, initDataSource }} = this.props;
    this.setState({
      currentOperate: "add",
      editable: true
    })
    emptyForm();
    initDataSource();
    setSlideVisiable(true) 
  }

  onOperatesClick = (record, index, operate, flag) => {
    const {taxRateStore : {doDelete}} = this.props;
    switch(operate.index.toString()){
      case '0': // 编辑
        this.onEdit(record, true);
        break;
      case "1": // 删除
        Modal.confirm({
          title: "信息确认",
          content: "确定删除吗",
          onOk() {
            doDelete([record.id])
          },
          onCancel() {}
        });
        break;
    }
  };

  render() {
    const { taxRateStore } = this.props;
    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = taxRateStore;
    const { doSave, slideVisiable, setSlideVisiable, emptyForm, doUpdate, doBatchDelete } = taxRateStore
    const selectedRowKeys = toJS(tableStore.selectedRowKeys) || []; // tableStore 右侧选中数组
    if (!hasRight && !loading) { // 无权限处理
      return renderNoright();
    }

    const rightMenu = [// 右键菜单
      {
        key: 'BTN_DEL',
        icon: <i className='icon-coms-delete'/>,
        content : '批量删除',
        disable: selectedRowKeys.length === 0, // 没有选中禁用
        onClick : doBatchDelete,
      }
    ];
    const collectParams = { // 收藏功能配置
      favname: '个税税率表',
      favouritetype: 1,
      objid: 0,
      link: 'wui/index.html#/ns_demo03/index',
      importantlevel: 1,
    };
    const adBtn = [ // 高级搜索内部按钮
      <Button type="primary" onClick={doSearch}>搜索</Button>,
      <Button type="ghost" onClick={() => form.resetForm()}>重置</Button>,
      <Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>,
    ];

    const topTab = [
      ];

    const renderSearchOperationItem = () => {
      return <div>
        <Button type="primary" onClick={() => { 
          this.handleInsertBtnClick()
          }}>新建</Button>
        {'  '}
        <WeaInputSearch
          placeholder={'请输入个税税率表名称'}
          onSearch={(name) => {doSearch({name})}}
          
        />
      </div>
    }



    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaRightMenu
          datas={rightMenu} // 右键菜单
          collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
        >
          <WeaTop
            title="个税税率表" // 文字
            icon={<i className='icon-coms-meeting' />} // 左侧图标
            iconBgcolor='#F14A2D' // 左侧图标背景色
            showDropIcon={true} // 是否显示下拉按钮
            dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
            dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
          >

            <CustomTab topTab={topTab}
              searchOperationItem={
                renderSearchOperationItem()
              }
              onChange={(v) => {
                this.setState({ selectedKey: v })
              }}
            />
            <WeaTable // table内部做了loading加载处理，页面就不需要再加了
                comsWeaTableStore={tableStore} // table store
                hasOrder={true} // 是否启用排序
                needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
                getColumns={this.getColumns}
                onOperatesClick={this.onOperatesClick.bind(this)}
                
              />
          </WeaTop>
        </WeaRightMenu>

        {
          slideVisiable && <WeaSlideModal visible={slideVisiable}
          top={0}
          width={40}
          height={100}
          direction={'right'}
          measure={'%'}
          title={
            <SlideModalTitle 
              subtitle={!this.state.editable ? "查看个税税率表" : this.state.currentOperate == "add" ?  "新建个税税率表" : "编辑个税税率表" }
              subTabs={[{title: "基础设置"}]}
              onSave={() => {this.state.currentOperate == "add" ? doSave() : doUpdate()}}
              editable={this.state.editable}
            />
          }
          content={(<EditSlideContent editable={this.state.editable}/>)}
          onClose={() => setSlideVisiable(false)}
          showMask={true}
          closeMaskOnClick={() => setSlideVisiable(false)} />
        }
      </div>
    )
  }
}