src/pages/performance/EvaGroupSetting/EditComfirm/components/AddCommissionParamsModal.tsx

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, queryShopIndicatorApi } from "@/pages/performance/EvaGroupSetting/EditComfirm/api";
import _ from "lodash";
import useInitail from "@/hooks/useInitail";
import { EvaGroupSetteing } from "@/pages/performance/EvaGroupSetting/interface";
import { TargetType, TargetTypeEnum } from "@/pages/performance/entity";
const Option = Select.Option;
interface Props {
  // visible: boolean;
  // onCancel: Function;
  // postId?: number;
  // shopIds?: string;
  // onOk: (vales: any) => void;
  // currentItem: KpiGroupSetteing.Item;
  // comItem: KpiGroupSetteing.CommissionParams;
  addComVisible: boolean;
  onCancel: Function;
  postId?: number;
  shopIds?: string;
  onOk: (vales: any) => void;
  comItem: Commission;
  setItemId: Function;
  scopeType: number;
  isOne: number;
}
type Commission = EvaGroupSetteing.CommissionParams;
export default function AddCommissionParamsModal(props: Props) {
  const percent = /^\d\.([1-9]{1,2}|[0-9][1-9])$|^[1-9]\d{0,1}(\.\d{1,2}){0,1}$|^100(\.0{1,2}){0,1}$/;
  const Momney = /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/;
  const [form] = Form.useForm();
  const { selectedIndicators, setParamAlias, setSelectedIndicators, stagesLength, multiStage } = useStore();
  const [isTarget, setIsTarget] = useState(false);
  // console.log(form);
  const { addComVisible, onCancel, postId, shopIds, onOk, comItem, setItemId, scopeType, isOne } = props;
  // 保存选中绩效指标需要配置的绩效考核目标值类型
  const [targetType, setTargetType] = useState<number>();
  // 保存选中指标是否考评类型
  const [codeType, setCodeType] = useState<number>();
  const [dataType, setDataType] = useState<number>();
  // 保存过滤后指标列表
  const [newIndicators, setNewIndicators] = useState<EvaGroupSetteing.IndicatorByPost[]>([]);
  const [indicatorName, setIndicatorName] = useState("");
  const [id, setId] = useState(0);
  const [delay, setDelay] = useState(true);
  const { data: indicatorsList, setParams, loading } = useInitail(queryPostIndicatorApi, [], {}, delay);
  useEffect(() => {
    setParams({ reward: false, withCombination: true }, true);
    setDelay(false);
    setTargetType(1);
  }, [addComVisible]);
  // 修改
  useEffect(() => {
    if (indicatorsList && indicatorsList.length > 0 && !comItem.code) {
      const res = indicatorsList.filter((item) => !selectedIndicators.find((y) => y === item.code));
      setNewIndicators([...res]);
    }
    if (addComVisible && comItem.code) {
      const indTar = indicatorsList.find((item: any) => item.code == comItem.code)?.targetType;
      setTargetType(indTar);
      setIndicatorName(comItem.name);
      setDataType(comItem.dataType);
      setCodeType(comItem.codeType);
      form.setFieldsValue({
        ...comItem,
        commissionParams: {
          value: comItem.code,
          label: comItem.name,
        },
        proportion: comItem.proportion !== undefined ? comItem.proportion : isOne == 1 ? 100 : null,
      });
    }
    if (comItem.targetValue && comItem.targetCalcType) {
      setIsTarget(true);
    }
    if (comItem.extraTargetValue && comItem.extraTargetCalcType) {
      setIsTarget(true);
    }
  }, [indicatorsList]);
  useEffect(() => {
    if (targetType === TargetTypeEnum["无"]) {
      setIsTarget(false);
    }
  }, [targetType]);
  useEffect(() => {
    setIsTarget(false);
  }, [id]);
  // 校验表单数据
  function transformDTO(formData: any) {
    let detail = {};
    _.each(formData, (value: any, key: string) => {
      switch (key) {
        case "commissionParams":
          const _options = value || {};
          console.log(_options);
          detail.code = _options.key;
          detail.name = _options.label[0];
          detail.code = _options.value;
          break;
        default:
          detail[key] = value;
          break;
      }
    });
    return detail;
  }
  function handSubmit(fieldsValue: any) {
    const pa: any = transformDTO(fieldsValue);
    pa.targetType = targetType;
    pa.codeType = codeType;
    pa.dataType = dataType;
    console.log("100pa", pa);
    const newItemId = pa.code;
    // 编辑时，不需要push id
    if (!comItem.code) {
      const tmpIds = [...selectedIndicators];
      tmpIds.push(newItemId);
    } else {
      pa.code = comItem.code;
      pa.name = comItem.name;
    }
    pa.extraTargetType = pa.targetType;
    if (comItem.codeType == 1 && multiStage) {
      if (pa.targetValue) {
        pa.targetType = targetType;
        pa.targetCalcType = 3;
      } else {
        pa.targetType = 1;
      }
      if (pa.extraTargetValue) {
        pa.extraTargetType = targetType;
        pa.extraTargetCalcType = 4;
      } else {
        pa.extraTargetType = 1;
      }
    }
    onOk(pa);
    onCancel && onCancel();
  }
  return (
    <Modal
      open={addComVisible}
      title={`${comItem.code ? "编辑" : "新增"}固定得分指标`}
      maskClosable={false}
      afterClose={() => {
        form.resetFields();
        onCancel();
      }}
      onCancel={() => onCancel()}
      onOk={form.submit}
      width={1000}
    >
      <Spin spinning={loading}>
        <Form
          form={form}
          onFinish={handSubmit}
          style={{ width: "70%", marginLeft: 150 }}
        >
          <Form.Item name="commissionParams" label="计分指标" rules={[{ required: true, message: "计分指标" }]}>
            <Select
              placeholder="选择指标(*为考评指标,无*为绩效指标)"
              labelInValue
              disabled={!!comItem.code}
              onChange={(value, Option: any) => {
                setTargetType(Option.targetType);
                setItemId(Option.key);
                setId(Option.key);
                setIndicatorName(Option.children);
                setParamAlias(Option.name);
                setCodeType(Option.codeType);
                setDataType(Option.dataType);
              }}
              showSearch
              optionFilterProp="children"
            >
              {newIndicators.map((item) => (
                <Option
                  value={item.code}
                  key={item.id}
                  targetType={item.targetType}
                  dataType={item.dataType}
                  codeType={item.codeType}
                  name={item.name}
                >
                  {item.name}
                  {item.codeType == 2 ? "*" : ""}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <div style={{ display: "flex", justifyContent: "flex-start" }}>
            <Form.Item
              name="proportion"
              label="占比"
              rules={[
                { pattern: percent, message: "请输入大于0小于等于100的数(最多保留两位小数)" },
                { required: true, message: "请输入占比数" },
              ]}
              style={{ width: "100%" }}
            >
              <InputNumber style={{ width: "100%" }} addonAfter="%" />
            </Form.Item>
          </div>
          <Form.Item name="cap" label="是否封顶" rules={[{ required: true, message: "请选择" }]}>
            <Radio.Group>
              <Radio value>是</Radio>
              <Radio value={false}>否</Radio>
            </Radio.Group>
          </Form.Item>
          {(targetType === TargetTypeEnum["百分比"] ||
            targetType === TargetTypeEnum["金额"] ||
            targetType === TargetTypeEnum["数量"]) && (
            <div>
              <Button type="link" onClick={() => setIsTarget(true)}>
                考核目标值设置（可选项）
              </Button>
              {isTarget && (
                <Button type="link" onClick={() => setIsTarget(false)}>
                  删除该项考核目标设置
                </Button>
              )}
            </div>
          )}
          {isTarget && (
            <>
              <Form.Item label="考核目标名称" name="targetName">
                <Select disabled defaultValue={indicatorName} />
              </Form.Item>
              {comItem.codeType == 1 && multiStage ? (
                <>
                  <Form.Item
                    noStyle
                    shouldUpdate={(prevValues, currentValues) =>
                      prevValues.extraTargetValue !== currentValues.extraTargetValue
                    }
                  >
                    {({ getFieldValue }) => {
                      const extraTargetValue = getFieldValue("extraTargetValue");
                      return (
                        <>
                          <Form.Item
                            label="阶段目标考核值"
                            name="targetValue"
                            rules={[
                              { required: !extraTargetValue, message: "请输入阶段目标考核值" },
                              {
                                pattern: targetType === TargetTypeEnum["百分比"] ? percent : Momney,
                                message:
                                  targetType === TargetTypeEnum["百分比"]
                                    ? "请输入大于0小于等于100的数(保留两位小数)"
                                    : "请输入大于0的数(保留两位小数)",
                              },
                            ]}
                          >
                            <InputNumber
                              placeholder="请输入阶段目标考核值"
                              style={{ width: "100%" }}
                              addonAfter={
                                targetType === TargetTypeEnum["百分比"]
                                  ? "%"
                                  : targetType === TargetTypeEnum["金额"]
                                  ? "元"
                                  : "台"
                              }
                            />
                          </Form.Item>
                        </>
                      );
                    }}
                  </Form.Item>
                  <Form.Item
                    noStyle
                    shouldUpdate={(prevValues, currentValues) => prevValues.targetValue !== currentValues.targetValue}
                  >
                    {({ getFieldValue }) => {
                      const targetValue = getFieldValue("targetValue");
                      return (
                        <>
                          <Form.Item
                            label="时间进度目标值"
                            name="extraTargetValue"
                            rules={[
                              { required: !targetValue, message: "请输入时间进度目标值" },
                              {
                                pattern: targetType === TargetTypeEnum["百分比"] ? percent : Momney,
                                message:
                                  targetType === TargetTypeEnum["百分比"]
                                    ? "请输入大于0小于等于100的数(保留两位小数)"
                                    : "请输入大于0的数(保留两位小数)",
                              },
                            ]}
                          >
                            <InputNumber
                              placeholder="请输入时间进度目标值"
                              style={{ width: "100%" }}
                              addonAfter={
                                targetType === TargetTypeEnum["百分比"]
                                  ? "%"
                                  : targetType === TargetTypeEnum["金额"]
                                  ? "元"
                                  : "台"
                              }
                            />
                          </Form.Item>
                        </>
                      );
                    }}
                  </Form.Item>
                </>
              ) : (
                <>
                  <Form.Item
                    label="考核目标计算类型"
                    name="targetCalcType"
                    rules={[{ required: true, message: "请选择考核目标计算类型" }]}
                  >
                    <Radio.Group>
                      <Radio value={1}>考核目标值计算 </Radio>
                      <Radio value={2}>最低要求计算</Radio>
                    </Radio.Group>
                  </Form.Item>
                  <Form.Item
                    label="考核目标值"
                    name="targetValue"
                    rules={[
                      { required: true, message: "请输入考核目标值" },
                      {
                        pattern: targetType === TargetTypeEnum["百分比"] ? percent : Momney,
                        message:
                          targetType === TargetTypeEnum["百分比"]
                            ? "请输入大于0小于等于100的数(保留两位小数)"
                            : "请输入大于0的数(保留两位小数)",
                      },
                    ]}
                  >
                    <InputNumber
                      placeholder="请输入考核目标值"
                      style={{ width: "100%" }}
                      addonAfter={
                        targetType === TargetTypeEnum["百分比"]
                          ? "%"
                          : targetType === TargetTypeEnum["金额"]
                          ? "元"
                          : "台"
                      }
                    />
                  </Form.Item>
                </>
              )}
            </>
          )}
        </Form>
      </Spin>
    </Modal>
  );
}