salary-management-front/pc4mobx/hrmSalary/pages/salaryFile/saralyFileViewSlide.js

import React from "react";
import { WeaFormItem, WeaHelpfulTip, WeaInput, WeaInputNumber, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
import { inject, observer } from "mobx-react";
import SelectedTab from "../../components/selectedTab";
import SalaryItemChangeList from "./salaryItemChangeList";
import TaxAgentChangeList from "./taxAgentChangeList";
import { PickDate } from "../appConfig";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;
const selectedTabItems = [
  {
    key: "0",
    name: getLabel(111, "薪资调整记录")
  }
];
const baseInfolist = [
  {
    id: 1,
    items: [
      {
        label: getLabel(111, "姓名"),
        value: "username"
      },
      {
        label: getLabel(111, "部门"),
        value: "department"
      },
      {
        label: getLabel(111, "岗位"),
        value: "position"
      }
    ]
  },
  {
    id: 2,
    items: [
      {
        label: getLabel(111, "入职时间"),
        value: "hiredate"
      },
      {
        label: getLabel(111, "手机号"),
        value: "mobile"
      },
      {
        label: getLabel(111, "个税扣缴义务人"),
        value: "taxAgent"
      }
    ]
  }
];

@inject("salaryFileStore")
@observer
export default class SalaryFileViewSlide extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: "0"
    };
  }

  componentWillMount() {
    const { salaryFileStore: { getArchiveForm, fetchSingleSalaryItemList, salaryAdjustmentInfo } } = this.props;
    getArchiveForm(this.props.id).then(result => {
      const { onChangePaySetParams } = this.props;
      const { payEndDate, payStartDate } = result;
      onChangePaySetParams({ payEndDate, payStartDate });
    });
    // fetchSingleSalaryItemList({ salaryArchiveId: this.props.id });
  }

  // tab页签切换回调
  handleTabChange(item) {
    this.setState({ selectedTab: item.key });
  }

  render() {
    const {
      salaryFileStore: { detailForm, adjustSalaryItems, setAdjustSalaryItems },
      selectedKey,
      handleSetpay,
      paysetParams
    } = this.props;
    const { baseInfo } = detailForm;
    const items = [
      {
        com: PickDate({
          label: getLabel(111, "起始发薪日期"),
          viewAttr: selectedKey === "pending" ? 3 : 1,
          value: paysetParams.payStartDate,
          onChange: handleSetpay
        })
      },
      {
        com: PickDate({
          label: getLabel(111, "最后发薪日期"),
          viewAttr: (selectedKey === "pending" || selectedKey === "fixed") ? 2 : selectedKey === "stop" ? 1 : 3,
          value: paysetParams.payEndDate,
          onChange: handleSetpay
        })
      }
    ];
    return (
      <div className="salaryFileViewSlide">
        <WeaSearchGroup title={getLabel(111, "基本信息")} items={[]} needTigger showGroup center>
          <table className="baseInfoWrapper">
            <tbody>
            {
              _.map(baseInfolist, item => {
                const { id, items } = item;
                return <tr key={id} className="descriptions-row">
                  {
                    _.map(items, it => {
                      const { label, value } = it;
                      return <React.Fragment>
                        <th className="descriptions-label">{label}</th>
                        <td className="descriptions-value">{baseInfo && baseInfo["employee"][value]}</td>
                      </React.Fragment>;
                    })
                  }
                </tr>;
              })
            }
            </tbody>
          </table>
        </WeaSearchGroup>
        <WeaSearchGroup title={getLabel(111, "发薪设置")} items={items} needTigger showGroup center/>

        <WeaSearchGroup
          title={
            <span>
              <span>{getLabel(111, "薪资档案")}</span>
              <WeaHelpfulTip
                width={200}
                title={getLabel(111, "提示：显示已生效的最新数据")}
                placement="topLeft"
                style={{ marginLeft: 8 }}
              />
          </span>
          } items={[]} needTigger showGroup center>
          {
            <div className="slideItemWrapper">
              {
                !_.isEmpty(adjustSalaryItems) ? adjustSalaryItems.map(item => (
                  <WeaFormItem
                    label={item.name}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                  >
                    {
                      item.dataType === "number" ?
                        <WeaInputNumber
                          value={!_.isNil(item.value) ? item.value : 0}
                          precision={2}
                          viewAttr={selectedKey === "pending" ? 2 : 1}
                          onChange={value => {
                            item.value = value;
                            setAdjustSalaryItems(adjustSalaryItems);
                          }}
                        /> :
                        <WeaInput
                          value={item.value}
                          viewAttr={selectedKey === "pending" ? 2 : 1}
                          onChange={value => {
                            item.value = value;
                            setAdjustSalaryItems(adjustSalaryItems);
                          }}
                        />
                    }
                  </WeaFormItem>
                )) : <div>{getLabel(111, "暂无数据")}</div>
              }
            </div>
          }
        </WeaSearchGroup>
        {
          selectedKey !== "pending" &&
          <WeaSearchGroup
            className="tableGroupWrapper"
            title={
              <SelectedTab
                items={selectedTabItems} onChange={(item) => {
                this.handleTabChange(item);
              }}/>
            }
            items={[]}
            needTigger showGroup center
          >
            {
              this.state.selectedTab === "0" ?
                <SalaryItemChangeList id={this.props.id} selectedKey={selectedKey}/> :
                <TaxAgentChangeList id={this.props.id}/>
            }
          </WeaSearchGroup>
        }
      </div>
    );
  }
}