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

/* 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 { useStore } from "../index";
import { queryPostIndicatorApi, queryShopIndicatorApi } from "../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 {
  addComVisible: boolean;
  onCancel: Function;
  postId?: number;
  shopIds?: string;
  onOk: (vales: any) => void;
  comItem: Commission;
  setItemId: Function;
  scopeType: number;
}
type Commission = EvaGroupSetteing.CommissionParams;
export default function AddLadderParamsModal(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 { selectedIndicatorsLadder, setSelectedIndicatorsLadder, setParamAlias } = useStore();
  const [isTarget, setIsTarget] = useState(false);
  const [dataType, setDataType] = useState<number>(2);
  // console.log(form);
  const { addComVisible, onCancel, postId, shopIds, onOk, comItem, setItemId, scopeType } = props;
  const [delay, setDelay] = useState(true);
  // 保存选中绩效指标需要配置的绩效考核目标值类型
  const [targetType, setTargetType] = useState<number>();
  // 保存选中指标是否考评类型
  const [codeType, setCodeType] = useState<number>();
  // 保存过滤后指标列表
  const [newIndicators, setNewIndicators] = useState<EvaGroupSetteing.IndicatorByPost[]>([]);
  const [name, setIndicatorName] = useState("");
  const [id, setId] = useState(0);
  const {
    data: indicatorsList,
    setParams,
    loading,
  } = useInitail(
    scopeType == 1 ? queryPostIndicatorApi : queryShopIndicatorApi,
    [],
    scopeType == 1 ? { postId } : {},
    delay
  );
  useEffect(() => {
    setParams(scopeType == 1 ? { postId } : {}, true);
    setDelay(false);
    setTargetType(1);
  }, [addComVisible]);
  // 修改
  useEffect(() => {
    if (indicatorsList && indicatorsList.length > 0 && !comItem.code) {
      const res = indicatorsList.filter((item) => !selectedIndicatorsLadder.find((y) => y === item.code));
      setNewIndicators([...res]);
    }
    if (addComVisible && comItem.code) {
      const indTar = indicatorsList.find((item) => item.code == comItem.code)?.targetType;
      console.log("indTar", indTar);
      console.log("comItem.targetType", comItem.targetType);
      setTargetType(indTar);
      setIndicatorName(comItem.name);
      setCodeType(comItem.codeType);
      form.setFieldsValue({
        ...comItem,
        ladderParams: {
          value: comItem.code,
          label: comItem.name,
          dataType: comItem.dataType,
        },
      });
    }
    if (comItem.targetValue && comItem.targetCalcType) {
      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 "ladderParams":
          const _options = value || {};
          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;
    if (comItem.dataType) {
      pa.dataType = comItem.dataType;
    }
    if (!comItem.dataType) {
      pa.dataType = dataType;
    }
    console.log("100pa", pa);
    const newItemId = pa.code;
    // 编辑时，不需要push id
    if (!comItem.code) {
      const tmpIds = [...selectedIndicatorsLadder];
      tmpIds.push(newItemId);
      setSelectedIndicatorsLadder([...tmpIds]);
    } else {
      pa.code = comItem.code;
      pa.name = comItem.name;
    }
    onOk(pa);
    onCancel && onCancel();
  }
  return (
    <Modal
      visible={addComVisible}
      title={`${comItem.code ? "编辑" : "新增"}台阶得分指标`}
      maskClosable={false}
      afterClose={() => {
        form.resetFields();
        onCancel();
      }}
      onCancel={() => onCancel()}
      onOk={form.submit}
      width={1000}
    >
      <Spin spinning={loading}>
        <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onFinish={handSubmit}>
          <Form.Item name="ladderParams" 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);
                setDataType(Option.dataType);
                setCodeType(Option.codeType);
              }}
              showSearch
              optionFilterProp="children"
            >
              {newIndicators.map((item) => (
                <Option
                  value={item.code}
                  key={item.code}
                  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 style={{ marginLeft: 65 }}>
              <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={name} />
              </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>
  );
}