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

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

import { Button, Table, DatePicker, Row, Col, Modal, Form, Input } from 'antd';
const { TextArea } = Input;

import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaInputSearch, WeaInput, WeaTextarea } from 'ecCom';

import { WeaTableNew } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from '../../components/customTab';
import ContentWrapper from '../../components/contentWrapper';
import "./index.less"

import { columns, dataSource } from './columns';

import { logColumns } from '../../common/columns'
import LogViewModal from '../../components/logViewModal';
import EditModal from './editModal'
import TipLabel from '../../components/TipLabel'

const { MonthPicker } = DatePicker;

@inject('taxAgentStore')
@observer
export default class TaxAgent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      searchValue: "",
      logViewVisiable: false,
      modalVisiable: false,
      remarkValue: "",
      nameValue: "",
      title: "新增个税扣缴义务人",
      currentOperate: "add",
      currentId: "",
    }
  }

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

  showLogView = () => {
    this.setState({logViewVisiable: true})
  }

  onEdit = (record) => {
    this.setState({
      remarkValue: record.description,
      nameValue: record.name,
      title: "编辑个税扣缴义务人",
      currentOperate: "update",
      currentId: record.id
    })
    const {taxAgentStore : { setModalVisiable }} = this.props
    setModalVisiable(true)
  }

  // 增加编辑功能，重写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)}}
               dangerouslySetInnerHTML={{ __html: valueSpan }} />
          case "operate":
            return <a onClick={() => {this.onEdit(record)}}>编辑</a>
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
        }
      }
      return newColumn;
    });
    return newColumns;
  }

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

  render() {
    const { taxAgentStore } = this.props;
    const { loading, hasRight, form, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd, doInsert } = taxAgentStore;
    const { modalVisiable, setModalVisiable, doUpdate } = taxAgentStore;

    const topTab = [
    ];



    if (!hasRight && !loading) { // 无权限处理
      return renderNoright();
    }

    const rightMenu = [// 右键菜单
      // {
      //   key: 'BTN_COLUMN',
      //   icon: <i className='icon-coms-Custom' />,
      //   content: '操作日志',
      //   onClick: this.showLogView
      // },
    ];

    const initEditModal = () => {
      this.setState({
        nameValue: '',
        remarkValue: "",
        title: "新增个税扣缴义务人",
        currentOperate: "add"
      })
    }

    const showEditModal = () => {

      initEditModal();
      setModalVisiable(true)
    }

    const renderSearchOperationItem = () => {
      return <div>
        <Button type="primary" onClick={() => { showEditModal() }}>新增</Button>
        {'  '}
        <WeaInputSearch
          value={this.state.searchValue}
          placeholder={'请输入个税扣缴义务人名称'}
          onSearch={(name) => doSearch(name)}
        />
      </div>
    }

    const renderTipsLabel = () => {
      const tipList = [
        "1、个税扣缴义务人与档案中的个税扣缴义务人匹配，修改个税扣缴义务人名称，薪资档案的个税扣缴义务人数据同步更新；",
        "2、删除个税扣缴义务人需先确认档案里无人员使用该个税扣缴义务人，否则不予删除；"
      ]
      return (
        <TipLabel 
          tipList={tipList}
        />
      )
    }

    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaRightMenu
          datas={rightMenu} // 右键菜单
        >
          <WeaTop
            title="个税扣缴义务人" // 文字
            icon={<i className='icon-coms-meeting' />} // 左侧图标
            iconBgcolor='#F14A2D' // 左侧图标背景色
            showDropIcon={true} // 是否显示下拉按钮
            dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
          >
            <CustomTab topTab={topTab}
              searchOperationItem={
                renderSearchOperationItem()
              }
              onChange={(v) => {
                this.setState({ selectedKey: v })
              }}
            />
            <Row gutter={16} style={{overflow: "hidden", width: "100%"}}>
              <Col sm={24} md={24} lg={18} xl={18}>
              <WeaTable // table内部做了loading加载处理，页面就不需要再加了
                comsWeaTableStore={tableStore} // table store
                hasOrder={true} // 是否启用排序
                needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
                getColumns={this.getColumns}
                onOperatesClick={this.onOperatesClick.bind(this)}
              />
              </Col>
              <Col sm={24} md={24} lg={6} xl={6}>
                {renderTipsLabel()}
              </Col>
            </Row>

          </WeaTop>
        </WeaRightMenu>
          
        {
          modalVisiable && <EditModal 
          title={this.state.title}
          visible={modalVisiable}
          name={this.state.nameValue}
          remark={this.state.remarkValue}
          onCancel={() => {setModalVisiable(false)}}
          onSubmitAdd={(params) => {doInsert(params)}}
          operate={this.state.currentOperate}
          onSubmitUpdate={(params) => {doUpdate(params)}}
          currentId={this.state.currentId}
        />
        }

        <LogViewModal 
          visible={this.state.logViewVisiable}
          onCancel={() => {this.setState({logViewVisiable: false})}}
        />
      </div>
    )
  }
}