salary-management-front/pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/components/dimensionExtensionAttrsDialog.js

/*
 * Author: 黎永顺
 * name: 统计维度-新增扩展属性
 * Description:
 * Date: 2023/11/7
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaDialog, WeaLocaleProvider, WeaTableEdit } from "ecCom";
import { Button, message } from "antd";
import { getExpandFieldSettings, saveExpandFieldSettings } from "../../../apis/statistics";
import { extensionCondition } from "./conditions";
import { getConditionDomkeys, getSearchs } from "../../../util";

const getLabel = WeaLocaleProvider.getLabel;

@inject("attendanceStore")
@observer
class DimensionExtensionAttrsDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      conditions: [], loading: false, datas: [], extensionId: ""
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) this.getExpandFieldSettings(nextProps);
    if (nextProps.visible !== this.props.visible && !nextProps.visible) {
      this.setState({ extensionId: "", datas: [] });
      nextProps.attendanceStore.initExtensionForm();
    }
  }

  getExpandFieldSettings = (props) => {
    getExpandFieldSettings({ module: "dim_employee" }).then(({ status, data }) => {
      if (status) {
        const { id: extensionId = "", fieldSettings: datas = [] } = data || {};
        this.setState({
          extensionId, datas,
          conditions: _.map(extensionCondition, o => {
            return {
              ...o,
              items: _.map(o.items, g => {
                return { ...g, label: getLabel(g.lanId, g.label) };
              })
            };
          })
        }, () => {
          const { attendanceStore: { extensionForm } } = props;
          extensionForm.initFormFields(this.state.conditions);
          if (!_.isNil(data))
            _.map(getConditionDomkeys(this.state.conditions), o => {
              extensionForm.updateFields({ [o]: data[o] || "" });
            });
        });
      }
    });
  };
  save = () => {
    const { attendanceStore: { extensionForm } } = this.props;
    const { datas, extensionId: id } = this.state;
    const { pass } = this.tableEdit.refs.edit.doRequiredCheck();
    extensionForm.validateForm().then(f => {
      if (f.isValid && pass) {
        const paylaod = {
          fieldSettings: _.map(datas, (o, i) => ({ ...o, index: i + 1 })),
          module: "dim_employee", moduleInfo: "", id,
          ...extensionForm.getFormParams()
        };
        this.setState({ loading: true });
        saveExpandFieldSettings(paylaod).then(({ status, errormsg }) => {
          this.setState({ loading: false });
          if (status) {
            message.success(getLabel(30700, "操作成功！"));
            this.props.onCancel();
          } else {
            message.error(errormsg);
          }
        }).catch(() => this.setState({ loading: false }));
      } else {
        f.showErrors();
      }
    });
  };

  render() {
    const { attendanceStore: { extensionForm } } = this.props;
    const { conditions, loading, datas } = this.state;
    const columns = [
      {
        title: getLabel(33439, "名称"),
        dataIndex: "name",
        key: "name",
        com: [
          { label: "", type: "INPUT", viewAttr: 3, key: "name" }
        ],
        colSpan: 1,
        width: "50%"
      },
      {
        title: getLabel(111, "字段"),
        dataIndex: "field",
        key: "field",
        com: [
          { label: "", type: "INPUT", viewAttr: 3, key: "field" }
        ],
        colSpan: 1,
        width: "50%"
      }
    ];
    return (
      <WeaDialog
        {...this.props} title={getLabel(111, "属性扩展")} hasScroll
        className="extensionAttrsDialog" initLoadCss
        buttons={[
          <Button type="primary" loading={loading} onClick={this.save}>{getLabel(537558, "保存")}</Button>
        ]}
        style={{
          width: 850,
          height: 606.6,
          minHeight: 200,
          minWidth: 380,
          maxHeight: "90%",
          maxWidth: "90%",
          overflow: "hidden",
          transform: "translate(0px, 0px)"
        }}
      >
        <div className="extensionAttrsDialogContent">
          {getSearchs(extensionForm, conditions, 1, false)}
          <WeaTableEdit
            ref={el => this.tableEdit = el} showCopy={false} draggable deleteConfirm
            columns={columns} datas={datas} onChange={datas => this.setState({ datas })}
          />
        </div>
      </WeaDialog>
    );
  }
}

export default DimensionExtensionAttrsDialog;