salary-management-front/pc4mobx/hrmSalary/pages/dataAcquisition/addItems.js

/*
 * Author: 黎永顺
 * name: 新增数据采集项
 * Description:
 */
import React, { Component } from "react";
import { WeaBrowser, WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
import { getSearchs } from "../../util";
import { Select } from "../ruleConfig";
import { PickDate } from "../appConfig";
import "./index.less";

class AddItems extends Component {
  constructor(props) {
    super(props);
    this.state = {
      baseInfo: {
        declareMonth: "",
        taxAgentId: "",
        taxAgentName: "",
        employeeId: "",
        employeeName: "",
        personArea: "ORGANIZATION",
        username: "",
        idcard: ""
      }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.editId !== this.props.editId) {
      this.setState({
        baseInfo: {
          ...this.state.baseInfo,
          declareMonth: nextProps.editId.declareMonth,
          taxAgentId: nextProps.editId.taxAgentId,
          taxAgentName: nextProps.editId.taxAgentName,
          employeeId: nextProps.editId.employeeId,
          employeeName: nextProps.editId.username
        }
      });
      const fields = _.map(nextProps.condition[0].items, it => {
        return it.domkey[0];
      });
      fields.map(item => {
        nextProps.form.updateFields({
          [item]: nextProps.editId[item] || ""
        });
      });
    }
  }

  render() {
    const { taxAgentOption = [], form, condition = [], isCum, isSpecial, editId } = this.props;
    const { baseInfo } = this.state;
    let items = [
      {
        com: PickDate({
          label: "税款所属期",
          viewAttr: _.isEmpty(editId) ? 3 : 1,
          labelCol: { span: 6 },
          wrapperCol: { span: 18 },
          format: "YYYY-MM",
          value: baseInfo.declareMonth,
          onChange: (data) => {
            this.setState({ baseInfo: { ...baseInfo, declareMonth: data.date } });
          }
        })
      },
      {
        com: Select({
          label: "个税扣缴义务人",
          viewAttr: _.isEmpty(editId) ? 3 : 1,
          options: taxAgentOption,
          value: baseInfo.taxAgentId,
          onChange: (data) => {
            this.setState({ baseInfo: { ...baseInfo, taxAgentId: data.selected, taxAgentName: data.showName } });
          }
        })
      },
      {
        com: Browser({
          label: "人员",
          viewAttr: _.isEmpty(editId) ? 3 : 1,
          value: baseInfo.employeeId,
          valueSpan: baseInfo.employeeName,
          onChange: ({ ids, names }) => {
            this.setState({ baseInfo: { ...baseInfo, employeeId: ids, employeeName: names } });
          }
        })
      }
    ];
    const cumSituationitems = [
      {
        com: PickDate({
          label: "税款所属期",
          viewAttr: _.isEmpty(editId) ? 3 : 1,
          labelCol: { span: 6 },
          wrapperCol: { span: 18 },
          format: "YYYY-MM",
          value: baseInfo.declareMonth,
          onChange: (data) => {
            this.setState({ baseInfo: { ...baseInfo, declareMonth: data.date } });
          }
        })
      },
      {
        com: Select({
          label: "个税扣缴义务人",
          viewAttr: _.isEmpty(editId) ? 3 : 1,
          options: taxAgentOption,
          value: baseInfo.taxAgentId,
          onChange: (data) => {
            this.setState({ baseInfo: { ...baseInfo, taxAgentId: data.selected, taxAgentName: data.showName } });
          }
        })
      },
      {
        com: Select({
          label: "人员范围",
          viewAttr: _.isEmpty(editId) ? 3 : 1,
          options: [
            { key: "ORGANIZATION", showname: "内部人员" }
            // { key: "EXT_EMPLOYEE", showname: "非系统人员" }
          ],
          value: baseInfo.personArea,
          onChange: (data) => {
            this.setState({ baseInfo: { ...baseInfo, personArea: data.selected } });
          }
        })
      }
    ];
    const insider = [{
      com: Browser({
        label: "人员",
        viewAttr: _.isEmpty(editId) ? 3 : 1,
        value: baseInfo.employeeId,
        valueSpan: baseInfo.employeeName,
        onChange: ({ ids, names }) => {
          this.setState({ baseInfo: { ...baseInfo, employeeId: ids, employeeName: names } });
        }
      })
    }];
    const noSysPerson = [
      {
        com: InputCus({
          label: "姓名",
          viewAttr: 2,
          onChange: (username) => {
            this.setState({ baseInfo: { ...baseInfo, username } });
          }
        })
      },
      {
        com: InputCus({
          label: "身份证号码",
          viewAttr: 3,
          onChange: (idcard) => {
            this.setState({ baseInfo: { ...baseInfo, idcard } });
          }
        })
      }
    ];
    isSpecial && items.shift();
    return (
      <div className="addItemsWrapper">
        <WeaSearchGroup
          title="基础信息"
          items={!isCum ? items : baseInfo.personArea === "ORGANIZATION" ? [...cumSituationitems, ...insider] : baseInfo.personArea === "EXT_EMPLOYEE" ? [...cumSituationitems, ...noSysPerson] : cumSituationitems}
          needTigger showGroup center/>
        {
          getSearchs(form, condition, 2)
        }
        <Tips><span>若此员工数据已存在在同期列表中，则当前数据保存后会覆盖列表数据</span></Tips>
      </div>
    );
  }
}

export default AddItems;

export const Browser = payload => {
  const { label, onChange, viewAttr = 3, value, valueSpan, type = 1, isSingle = true } = payload;
  return (
    <WeaFormItem label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
      <WeaBrowser
        viewAttr={viewAttr}
        type={type}
        isSingle={isSingle}
        value={value}
        valueSpan={valueSpan}
        onChange={(ids, names) => onChange({ ids, names })}/>
    </WeaFormItem>
  );
};
export const InputCus = payload => {
  const { label, onChange, value, viewAttr = 3 } = payload;
  return (
    <WeaFormItem label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
      <WeaInput value={value} onChange={onChange} viewAttr={viewAttr}/>
    </WeaFormItem>
  );
};
export const Tips = payload => {
  const { children } = payload;
  return (
    <div className="tipWrapper">
      <div className="title">小提示</div>
      <div className="content">{children}</div>
    </div>
  );
};