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, DatePicker, Modal } from "antd";

import { WeaInputSearch, WeaSlideModal, WeaTop } from "ecCom";
import { WeaTableNew } from "comsMobx";
import { renderNoright } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from "../../components/customTab";
import SlideModalTitle from "../../components/slideModalTitle";
import EditSlideContent from "./editSlideContent";


const WeaTable = WeaTableNew.WeaTable;

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">
        <WeaTop
          title="个税税率表" // 文字
          icon={<i className="icon-coms-fa"/>} // 左侧图标
          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>

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