AddIndicatorsModal.tsx 10 KB
/* eslint-disable no-return-assign */
/* eslint-disable no-return-assign */
import React, { useEffect, useState } from "react";
import { Modal, Form, Select, InputNumber, message, Spin, Radio, Input, Button } from "antd";
import { saveRewardsListApi } from "../RewardsList/api";
import { useStore } from "../index";
import { queryPostIndicatorApi } from "@/pages/performance/KpiGroupSetting/EditComfirm/api";
import _ from "lodash";
import useInitail from "@/hooks/useInitail";
import LadderTable from "@/pages/performance/EvaGroupSetting/EditComfirm/components/LadderTable";
import CommissionParams from "@/pages/performance/EvaGroupSetting/EditComfirm/components/CommissionParams";
import LadderParams from "@/pages/performance/EvaGroupSetting/EditComfirm/components/LadderParams";
import Conds from "@/pages/performance/EvaGroupSetting/EditComfirm/components/Conds";
import { EvaGroupSetteing } from "@/pages/performance/EvaGroupSetting/interface";

const Option = Select.Option;
interface Props {
  visible: boolean;
  onCancel: Function;
  postId?: number;
  shopIds?: string;
  onOk: (vales: any) => void;
  currentItem: EvaGroupSetteing.Indicators;
  comItem: EvaGroupSetteing.CommissionParams;
  scopeType: number;
}

export default function AddIndicatorsModal(props: Props) {
  const [form] = Form.useForm();
  // console.log(form);
  const { paramAlias, setParamAlias, preconditionAlias, setPreconditionAlias } = useStore();

  // 是否为百分比
  const { visible, onCancel, postId, shopIds, onOk, currentItem, comItem, scopeType } = props;
  const [isPercent, setIsPercent] = useState<number>(0);
  const [delay, setDelay] = useState(true);
  // 显示前置条件
  const [condsVisible, setCondsVisible] = useState(false);
  // 判断占比相加是否为100
  const [isHundred, setIsHundred] = useState(false);
  // 保存过滤后指标列表
  // const [newIndicators, setNewIndicators] = useState<EvaGroupSetteing.IndicatorByPost[]>([]);
  const [id, setItemId] = useState<number>();

  // 修改
  useEffect(() => {
    if (visible && currentItem.name) {
      setParamAlias(currentItem.paramAlias);
      form.setFieldsValue({
        ...currentItem,
      });
    }
    if (currentItem.conds && currentItem.conds.length > 0) {
      setPreconditionAlias(currentItem.preconditionAlias);
      setCondsVisible(true);
    } else {
      setCondsVisible(false);
    }
  }, [visible]);

  // useEffect(() => {
  //   if (indicatorsList && indicatorsList.length > 0 && !currentItem.id) {
  //     const res = indicatorsList.filter((item) => !selectedIndicators.find((y) => Number(y) === item.id));
  //     setNewIndicators([...res]);
  //   }
  // }, [indicatorsList]);
  // 校验表单数据
  function transformDTO(formData: any) {
    console.log("InformData", formData);
    let detail = {};
    _.each(formData, (value: any, key: string) => {
      switch (key) {
        case "commissionParams":
          const _options = value || {};
          detail.indicatorId = _options.key;
          detail.name = _options.label;
          detail.code = _options.value;
          break;
        default:
          detail[key] = value;
          break;
      }
    });
    return formData;
  }
  function handSubmit(fieldsValue: any) {
    console.log(fieldsValue);
    const pa: any = transformDTO(fieldsValue);
    // pa.targetType = targetType;
    // pa.id = id;
    pa.paramAlias = paramAlias;
    if (pa?.ladderParams && pa?.ladderParams.length > 0) {
      if (isPercent == 0) {
        pa.laddersType = currentItem.laddersType;
      } else {
        pa.laddersType = isPercent;
      }
    }
    console.log("大", pa);
    let hundred = 0;
    if (pa?.commissionParams) {
      hundred = pa?.commissionParams.reduce((data: number, item: EvaGroupSetteing.CommissionParams) => {
        return data + item.proportion;
      }, 0);
    }
    if (pa?.ladderParams) {
      hundred = pa?.ladderParams.reduce((data: number, item: EvaGroupSetteing.CommissionParams) => {
        return data + item.proportion;
      }, 0);
    }
    //设置conds的sort
    if (pa?.conds && pa?.conds.length > 0) {
      pa?.conds.forEach((item: any, index: number) => {
        Object.assign(item, { sort: index + 1 });
      });
      pa.preconditionAlias = preconditionAlias;
    }
    console.log("cond", pa?.conds);

    // 校验标准分不能大于绩效分值
    const indicatorValue = pa.baseScore;
    if (!!pa.ladders && pa.ladders.length > 0) {
      const _indicatorLadders: any[] = pa.ladders;
      const res = _indicatorLadders.every((x, index) => {
        if (x.standardScore <= indicatorValue) {
          return true;
        }
        message.error(`第${index + 1}组标准分不满足条件: 标准分不能大于绩效分值`, 3);
        return false;
      });
      const _result = verifySteps(_indicatorLadders);
      if (!(res && _result)) {
        return;
      }
    }

    const newItemId = pa.id;
    // 编辑时,不需要push id
    // if (currentItem.id) {
    //   const tmpIds = [...selectedIndicators];
    //   tmpIds.push(newItemId);
    //   setSelectedIndicators([...tmpIds]);
    //   setSelectedIndicatorsConds([...tmpIds]);
    // }
    if (hundred === 100) {
      setIsHundred(false);
      onOk(pa);
      console.log(pa);
      onCancel && onCancel();
    } else {
      setIsHundred(true);
    }
  }

  // 校验阶梯越小,标准分越小
  const verifySteps = (_indicatorLadders: any[]) => {
    let res = true;
    _indicatorLadders.forEach((item, index) => {
      if (index > 0) {
        const curScore = item.standardScore;
        const lastScore = _indicatorLadders[index - 1].standardScore;
        if (curScore < lastScore) {
          message.error(`第${index + 1}组标准分不满足条件: 阶梯越小,标准分越小`, 3);
          res = false;
        }
      }
    });
    return res;
  };
  return (
    <Modal
      title={`${currentItem.name ? "编辑" : "新增"}指标`}
      visible={visible}
      maskClosable={false}
      afterClose={() => {
        form.resetFields();
        onCancel();
      }}
      onCancel={() => onCancel()}
      onOk={form.submit}
      width={1200}
    >
      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        onFinish={handSubmit}
        initialValues={{
          ladders: [{ lower: 0, standardScore: 0, key: 0 }],
        }}
      >
        <Form.Item name="name" label="指标名称" rules={[{ required: true, message: "请选择指标" }]}>
          <Input placeholder="请输入指标名称" />
        </Form.Item>

        <Form.Item label="绩效分值" name="baseScore" rules={[{ required: true, message: "请输入绩效分值" }]}>
          <InputNumber placeholder="请输入" style={{ width: "100%" }} addonAfter="分" />
        </Form.Item>
        <Form.Item name="scoreWay" label="计算方式" rules={[{ required: true, message: "请选择计算方式" }]}>
          <Select placeholder="选择计算方式">
            <Option value={1} key={1}>
              台阶得分
            </Option>
            <Option value={2} key={2}>
              固定得分
            </Option>
          </Select>
        </Form.Item>
        <div style={{ marginLeft: 218, marginBottom: 20 }}>
          <span>是否添加前置条件设置:</span>
          <Radio.Group
            onChange={(e) => {
              setCondsVisible(e.target.value);
            }}
            value={condsVisible}
          >
            <Radio value>是</Radio>
            <Radio value={false}>否</Radio>
          </Radio.Group>
        </div>
        {condsVisible && (
          <Form.Item name="conds" label="前置条件">
            <Conds postId={postId} shopIds={shopIds} setItemId={setItemId} scopeType={scopeType} />
          </Form.Item>
        )}
        <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.scoreWay !== currentValues.scoreWay}>
          {({ getFieldValue }) =>
            getFieldValue("scoreWay") === 1 ? (
              <>
                <Form.Item
                  name="ladderParams"
                  label="台阶得分"
                  rules={[{ required: true, message: "请增加台阶得分指标" }]}
                >
                  <LadderParams
                    postId={postId}
                    shopIds={shopIds}
                    setItemId={setItemId}
                    isHundred={isHundred}
                    scopeType={scopeType}
                  />
                </Form.Item>
                <Form.Item name="ladders" label="台阶得分阶梯" rules={[{ required: true, message: "台阶得分阶梯" }]}>
                  <LadderTable visible isPercent={isPercent} laddersType={currentItem.laddersType} />
                </Form.Item>
              </>
            ) : getFieldValue("scoreWay") === 2 ? (
              <Form.Item
                name="commissionParams"
                label="固定得分"
                rules={[{ required: true, message: "请增加固定得分指标" }]}
              >
                <CommissionParams
                  postId={postId}
                  shopIds={shopIds}
                  setItemId={setItemId}
                  isHundred={isHundred}
                  scopeType={scopeType}
                />
              </Form.Item>
            ) : null
          }
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) => prevValues.ladderParams !== currentValues.ladderParams}
        >
          {({ getFieldValue }) => {
            const ladderParams = getFieldValue("ladderParams");
            if (ladderParams && ladderParams.length > 0) {
              console.log("ladderParams", ladderParams);
              if (ladderParams.length > 1) {
                setIsPercent(2);
              } else if (ladderParams[0].targetValue) {
                setIsPercent(2);
              } else if (ladderParams[0].dataType === 2) {
                setIsPercent(2);
              } else if (ladderParams[0].dataType === 1 || ladderParams[0].dataType === 3) {
                setIsPercent(1);
              }
            }
            return null;
          }}
        </Form.Item>
      </Form>
    </Modal>
  );
}