src/pages/performance/EvaGroupSetting/EditComfirm/components/AddCondModal.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 { saveRewardsListApi } from "../RewardsList/api";
import { useStore } from "../index";
import { queryPostIndicatorApi, queryShopIndicatorApi } from "../api";
import _ from "lodash";
import useInitail from "@/hooks/useInitail";
import CondLaddersTable from "./CondLaddersTable";
import CommissionParams from "@/pages/performance/KpiGroupSetting/EditComfirm/components/CommissionParams";
import { EvaGroupSetteing } from "@/pages/performance/EvaGroupSetting/interface";
import { TargetType, TargetTypeEnum } from "@/pages/performance/entity";
// import { transformDTOCond } from "../../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 AddCondModal(props: Props) {
  const { selectedIndicatorsConds, setSelectedIndicatorsConds, setPreconditionAlias } = useStore();
  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 [isTarget, setIsTarget] = useState(false);
  // 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 [dataType, setDataType] = 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) => !selectedIndicatorsConds.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);
      setDataType(comItem.dataType);
      setCodeType(comItem.codeType);
      form.setFieldsValue({
        ...comItem,
        conds: {
          value: comItem.code,
          label: comItem.name,
        },
      });
    }
    if (comItem.targetValue && comItem.targetCalcType) {
      setIsTarget(true);
    }
  }, [indicatorsList]);
  useEffect(() => {
    if (targetType === TargetTypeEnum["无"]) {
      setIsTarget(false);
    }
  }, [targetType]);
  useEffect(() => {
    setIsTarget(false);
  }, [id]);
  // 校验表单数据
  function transformDTO(formData: any) {
    console.log("前置条件", formData);
    let detail: any = {};
    _.each(formData, (value: any, key: string) => {
      switch (key) {
        case "conds":
          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;
    pa.dataType = dataType;
    console.log("前置条件", pa);
    const newItemId = pa.code;
    // 编辑时，不需要push id
    if (!comItem.code) {
      const tmpIds = [...selectedIndicatorsConds];
      tmpIds.push(newItemId);
      setSelectedIndicatorsConds([...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}
          initialValues={{
            ladders: [{ lower: 0, scorePercent: 0, key: 0 }],
          }}
        >
          <Form.Item name="conds" label="前置条件配置" rules={[{ required: true, message: "前置条件配置" }]}>
            <Select
              placeholder="选择指标(*为考评指标,无*为绩效指标)"
              labelInValue
              disabled={!!comItem.code}
              onChange={(value, Option: any) => {
                setTargetType(Option.targetType);
                // 最外层id
                setItemId(Option.key);
                // 列表id
                setId(Option.key);
                setIndicatorName(Option.children);
                setPreconditionAlias(Option.name);
                setCodeType(Option.codeType);
                setDataType(Option.dataType);
              }}
              showSearch
              optionFilterProp="children"
            >
              {newIndicators.map((item) => (
                <Option
                  value={item.code}
                  key={item.id}
                  targetType={item.targetType}
                  codeType={item.codeType}
                  dataType={item.dataType}
                  name={item.name}
                >
                  {item.name}
                  {item.codeType == 2 ? "*" : ""}
                </Option>
              ))}
            </Select>
          </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.Item name="ladders" label="前置条件阶梯" rules={[{ required: true, message: "前置条件阶梯" }]}>
            <CondLaddersTable visible={addComVisible} />
          </Form.Item>
        </Form>
      </Spin>
    </Modal>
  );
}