salary-management-front/pc4mobx/hrmSalary/pages/payroll/templateSettingList.js

import React from "react";
import { inject, observer } from "mobx-react";
import { Radio, Spin } from "antd";
import { WeaTableNew } from "comsMobx";

const WeaTable = WeaTableNew.WeaTable;

@inject("payrollStore")
@observer
export default class TemplateSettingList extends React.Component {
  componentWillMount() {
    const { payrollStore } = this.props;
    const { getPayrollTemplateList } = payrollStore;
    getPayrollTemplateList();
  }

  // 编辑操作按钮
  onEdit(record) {
    this.props.onEdit && this.props.onEdit(record);
  }

  // 复制操作按钮
  onCopy(record) {
    this.props.onCopy && this.props.onCopy(record);
  }

  // 删除操作按钮
  onDelete(record) {
    this.props.onDelete && this.props.onDelete(record);
  }

  // 操作按钮
  onOperatesClick = (record, index, operate, flag) => {
    switch (operate.index.toString()) {
      case "0": // 编辑
        this.onEdit(record);
        break;
      case "1": // 复制
        this.onCopy(record);
        break;
      case "2": // 删除
        this.onDelete(record);
        break;
    }
  };

  // 默认使用配置
  recordItemChange(record) {
    const { payrollStore } = this.props;
    const { changePayrollDefaultUse, getPayrollTemplateList } = payrollStore;
    changePayrollDefaultUse(record.id).then(() => {
      getPayrollTemplateList();
    });
  }

  // 增加编辑功能，重写columns绑定事件
  getColumns = columns => {
    const { showOperateBtn } = this.props;
    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 "useType":
            return (
              <Radio
                disabled={!showOperateBtn}
                checked={record.useType == "1"}
                onChange={value => {
                  this.recordItemChange(record);
                }}
              />
            );
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
        }
      };
      return newColumn;
    });
    return newColumns;
  };

  render() {
    const { payrollStore } = this.props;
    const { templateStore, loading } = payrollStore;
    return (
      <div>
        {loading
          ? <div style={{ width: "100%", textAlign: "center" }}>
            <Spin/>
          </div>
          : <WeaTable // table内部做了loading加载处理，页面就不需要再加了
            comsWeaTableStore={templateStore} // table store
            hasOrder={true} // 是否启用排序
            needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
            getColumns={this.getColumns}
            onOperatesClick={this.onOperatesClick.bind(this)}
          />}
      </div>
    );
  }
}