kede-client/js/component/manageCenter/statistics/personnel/bonusList.jsx

import React from "react";
import $ from "jquery/src/ajax";
import { Spin, Button, Tabs, Table, message, Modal, Input, Form } from "antd";
import "@/manageCenter/financialManage/distribute/public.less";
import { splitUrl } from "@/tools";
import {ChooseList} from "../../order/orderNew/chooseList";
const FormItem = Form.Item;
const { TabPane } = Tabs;

const BonusList = React.createClass({
  getInitialState() {
    return {
      columns: [
        {
          title: "职位名称",
          dataIndex: "jobsName",
          key: "jobsName",
        },
        {
          title: "级别",
          dataIndex: "lvlName",
          key: "lvlName",
        },
        {
          title: "研究生津贴",
          dataIndex: "allowance",
          key: "allowance",
        },
        {
          title: "在职奖励",
          dataIndex: "aliveRewards",
          key: "aliveRewards",
        },
        {
          title: "奖励",
          dataIndex: "rewards",
          key: "rewards",
        },
        {
          title: "二级奖励",
          dataIndex: "twoRewards",
          key: "twoRewards",
        },
        {
          title: "三级奖励",
          dataIndex: "threeRewards",
          key: "threeRewards",
        },
        {
          title: "操作",
          dataIndex: "caozuo",
          key: "caozuo",
          render: (text, record) => {
              return <Button type="primary" onClick={e => {this.editMoney(record)}}>修改金额</Button>
          }
        }
      ],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
    };
  },
  componentWillMount() {
    this.loadData()
  },
  loadData(pageNo) {
    this.state.data = [];
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/selectLvlList",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
      },
      success: function (data) {
        let theArr = [];
        if (!data.data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.length; i++) {
            let thisdata = data.data[i];
            thisdata.key = thisdata.id;
            theArr.push(thisdata);
          }
        }
        this.state.pagination.current = data.data.pageNo;
        this.state.pagination.total = data.data.totalCount;
        if (data.data && data.data.list && !data.data.list.length) {
          this.state.pagination.current = 0;
          this.state.pagination.total = 0;
        }
        this.setState({
          dataSource: theArr,
          pagination: this.state.pagination,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  moneyOk() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/personnel/updateLvl",
      data: {
        id: this.state.id,
        jobs: this.state.jobs,
        lvl: this.state.lvl,
        aliveRewards: this.state.aliveRewards,
        rewards: this.state.rewards,
        twoRewards: this.state.twoRewards,
        threeRewards: this.state.threeRewards,
      },
      success: function (data) {
        if (!data.data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
            this.loadData()
          this.setState({
              visible: false
          })
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  editMoney(record) {
    this.setState({
      visible: true,
      id: record.id,
      jobs: record.jobs,
      lvl: record.lvl,
      aliveRewards: record.aliveRewards,
      rewards: record.rewards,
      twoRewards: record.twoRewards,
      threeRewards: record.threeRewards,
    });
  },
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach(item => {
      arr.forEach(val => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr
    });
  },
  render() {
    return (
      <div className="user-content">
        <Tabs
            defaultActiveKey="1"
            onChange={this.callback}
            className="test">
          <TabPane tab="更改表格显示数据" key="1">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                  columns={this.state.columns}
                  changeFn={this.changeList}
                  changeList={this.state.changeList}
                  top={55}
                  margin={11}
              />
            </div>
          </TabPane>
        </Tabs>
        <Table
          bordered
          columns={
            this.state.changeList
                ? this.state.changeList
                : this.state.columns
          }
          onRowClick={this.tableRowClick}
          dataSource={this.state.dataSource}
          scroll={{ x: "max-content", y: 0 }}
          pagination={false}
          size="small"
        />
        <Modal
          maskClosable={false}
          visible={this.state.visible}
          footer={null}
          width={600}
          onCancel={() => {
            this.loadData();
            this.setState({
              visible: false,
            });
          }}
        >
          <Spin spinning={this.state.loading}>
            <div>
                <h3 style={{ textAlign: "center", marginBottom: 10 }}>奖励修改</h3>
              <div className="clearfix" style={{ marginBottom: 10 }}>
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="在职奖励"
                >
                  <Input
                    placeholder="请输入金额"
                    value={this.state.aliveRewards}
                    style={{ width: 200 }}
                    onChange={(e) => {
                      this.setState({ aliveRewards: e.target.value });
                    }}
                  />
                </FormItem>
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="奖励"
                >
                  <Input
                    placeholder="请输入金额"
                    value={this.state.rewards}
                    style={{ width: 200 }}
                    onChange={(e) => {
                      this.setState({ rewards: e.target.value });
                    }}
                  />
                </FormItem>
              </div>
              <div className="clearfix" style={{ marginBottom: 10 }}>
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="二级奖励"
                >
                  <Input
                    placeholder="请输入金额"
                    value={this.state.twoRewards}
                    style={{ width: 200 }}
                    onChange={(e) => {
                      this.setState({ twoRewards: e.target.value });
                    }}
                  />
                </FormItem>
                <FormItem
                  className="half-item"
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 30 }}
                  label="三级奖励"
                >
                  <Input
                    placeholder="请输入金额"
                    value={this.state.threeRewards}
                    style={{ width: 200 }}
                    onChange={(e) => {
                      this.setState({ threeRewards: e.target.value });
                    }}
                  />
                </FormItem>
              </div>
            </div>
            <Button
              type="primary"
              shape="round"
              size="large"
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
              onClick={this.moneyOk}
            >
              保存
            </Button>
          </Spin>
        </Modal>
      </div>
    );
  },
});

export default BonusList;