FEV2 / fw-cms

import React, { useState, useEffect } from "react";
import { Form, Modal, message, Input, Select, Radio, Checkbox, InputNumber, Spin } from "antd";
import usePagination from "@/hooks/usePagination";
import { systemListApi } from "@/pages/admin/Privilege/api";
import { transformDTO, transformFormData } from "../entity";
import { KpiGroupSetteing } from "@/pages/performance/KpiGroupSetting/interface";
import * as api from "../../KpiGroupSetting/EditComfirm/api";
import { ShopList, saveQualitySetteing, qalityDetail } from "../api";
import { getAllPostListApi } from "@/common/api";
import ShopSelectNew from "@/components/ShopSelectNew";
import PersonModal from "./PersonModal";
import IndivatorsTable from "./IndivatorsTable";
import { QualitySetteing } from "@/pages/performance/QualitySetting/interface";
import useInitial from "@/hooks/useInitail";

const FormItem = Form.Item;
const { Option } = Select;

interface Props {
  item: { visible: boolean; currentItem?: QualitySetteing.QualityListItems };
  onClose?: (refresh?: boolean) => any;
  setItem: Function;
  roleList: CommonApi.RoleCodeVO[];
}

export default function EditModal({ onClose, setItem, item, roleList }: Props) {
  const [form] = Form.useForm();
  const { visible, currentItem = {} } = item;
  const [saveLoading, setSaveLoading] = useState<boolean>(false);
  const [type, setType] = useState<number>(2);
  const { list: postList } = usePagination(getAllPostListApi, { pageSize: 999 }, {});
  const [detailsDelay, setDetailsDelay] = useState<boolean>(true);
  const { data: detailsData, setParams: setDetailsParams, loading } = useInitial(qalityDetail, {}, {}, detailsDelay);

  // 选择岗位id
  const [postId, setPostId] = useState<number>();
  // 门店列表
  const [shopList, setShopList] = useState<ShopList[]>([]);
  // 人员查看模块
  const [personModal, setPersonModal] = useState<QualitySetteing.Person>({
    visible: false,
    postId: 0,
    shopIds: "",
    shopNames: "",
  });
  // 存储角色列表
  const { list } = usePagination(systemListApi, { current: 1, pageSize: 500 });
  const onCel = () => {
    onClose?.(false);
    setPersonModal({ ...personModal, postId: 0, shopIds: "", shopNames: "" });
  };
  // 在这里发起获取详情数据的请求，拿到数据再写一个生命周期监听获取的数据
  useEffect(() => {
    if (visible && currentItem.id) {
      setDetailsParams({ id: currentItem.id }, true);
      setDetailsDelay(false);
      getDealerList(currentItem.postId);
      setPersonModal({
        postId: currentItem.postId,
        shopIds: currentItem.shopIds.join(","),
        visible: false,
        shopNames: currentItem.shopNames.join(","),
      });
      setType(currentItem.type);
    }
  }, [visible]);
  // 监听到数据变化后将数据处理同时赋给表单，loading直接用详情的loading，有id就用详情的loading，实现了数据获取之前loading的加载，没有id直接写死fasle
  useEffect(() => {
    if (detailsData) {
      const result = transformFormData(detailsData, roleList, list);
      if (result.type == 1) {
        result.rank = "";
        result.details.forEach((item: any) => {
          item.capPersonPenaltyScore = "";
          item.capPersonPenaltyMoney = "";
          item.awardScore = "";
          item.capPersonAwardScore = "";
          item.capAwardScore = "";
          item.awardMoney = "";
          item.capPersonAwardMoney = "";
          item.capAwardMoney = "";
        });
      }
      setItem({ ...item, currentItem: { ...result } });
      form.setFieldsValue({ ...result });
    }
  }, [detailsData]);
  // console.log("currentItem", currentItem);
  function fetchSave(pa: any) {
    setSaveLoading(true);
    saveQualitySetteing(pa)
      .then((res) => {
        setSaveLoading(false);
        message.success(res.result);
        onClose?.(true);
      })
      .catch((e) => {
        setSaveLoading(false);
        message.error(e.message);
      });
  }
  function handleSave(values: any) {
    const pa = transformDTO(values);
    if (currentItem.id) {
      pa.id = currentItem.id;
    }
    console.log("tijiao", pa);
    if (pa.type == 2) {
      pa.details.forEach((item: any) => {
        if (
          item.capPersonPenaltyScore == undefined ||
          item.capPersonPenaltyMoney == undefined ||
          item.awardScore == undefined ||
          item.capPersonAwardScore == undefined ||
          item.capAwardScore == undefined ||
          item.awardMoney == undefined ||
          item.capPersonAwardMoney == undefined ||
          item.capAwardMoney == undefined
        ) {
          message.error("考核详情中存在没有填的内容");
        } else {
          fetchSave(pa);
        }
      });
    } else {
      delete pa.rank;
      pa.details.forEach((item: any) => {
        delete item.capPersonPenaltyScore;
        delete item.capPersonPenaltyMoney;
        delete item.awardScore;
        delete item.capPersonAwardScore;
        delete item.capAwardScore;
        delete item.awardMoney;
        delete item.capPersonAwardMoney;
        delete item.capAwardMoney;
      });
      fetchSave(pa);
    }
  }
  // 根据岗位查门店
  function getDealerList(postId: number) {
    api
      .queryShopByPost(postId)
      .then((res) => {
        setShopList(res.data || []);
        console.log("res", res.data);
      })
      .catch((e) => {
        message.error(e.message);
      });
  }
  // 人员查看
  const personView = () => {
    if (!personModal.postId) {
      message.error("请选择岗位");
      return;
    }
    if (!personModal.shopIds) {
      message.error("请选择门店");
      return;
    }
    setPersonModal({ ...personModal, visible: true });
  };

  return (
    <>
      <Modal
        title={`${currentItem.id ? "编辑" : "新增"}人员质量考核`}
        open={visible}
        onOk={form.submit}
        onCancel={() => onCel()}
        maskClosable={false}
        getContainer={false}
        confirmLoading={saveLoading}
        afterClose={() => form.resetFields()}
        width={1200}
      >
        <Spin spinning={currentItem.id ? loading : false}>
          <Form
            form={form}
            onFinish={handleSave}
            // labelCol={{ span: 6 }}
            // wrapperCol={{ span: 15 }}
            style={{ width: "70%", marginLeft: 200 }}
          >
            <Form.Item name="post" label="岗位" rules={[{ required: true, message: "请选择岗位" }]}>
              <Select
                labelInValue
                placeholder="请选择岗位"
                allowClear
                showSearch
                optionFilterProp="children"
                onChange={(post: { label: string; value: number; key: number }) => {
                  setPersonModal({
                    postId: post.value,
                    visible: false,
                    shopIds: "",
                    shopNames: "",
                  });
                  setPostId(post.value);
                  form.setFieldsValue({ shop: [] });
                  // 根据岗位查门店
                  if (post) {
                    getDealerList(post.value);
                  }
                }}
              >
                {postList.map((item) => (
                  <Option value={item.id}>{item.postName}</Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item name="shop" label="门店" rules={[{ required: true, message: "请选择门店" }]}>
              <ShopSelectNew
                multiple
                shopIds={shopList.map((item) => item.shopId)}
                type={2}
                onChange={(
                  shops: {
                    key: number;
                    label: string;
                    value: number;
                  }[]
                ) => {
                  const shopIds = shops.map((item) => item.value).join(",");
                  const shopNames = shops.map((item) => item.label).join(",");
                  setPersonModal({ ...personModal, shopIds, shopNames });
                }}
              />
            </Form.Item>
            <Form.Item name="type" label="人员状态" rules={[{ required: true, message: "请选择人员状态" }]}>
              <Radio.Group>
                <Radio value={1}>星级为D级员工</Radio>
                <Radio value={2}>转正后保护期员工</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.type !== currentValues.type}>
              {({ getFieldValue }) => {
                const newType = getFieldValue("type");
                setType(newType);
                return newType === 2 ? (
                  <Form.Item name="rank" label="排名目标" rules={[{ required: true, message: "请填写排名目标" }]}>
                    <InputNumber addonAfter="名" min={1} precision={0} style={{ width: "720px" }} />
                  </Form.Item>
                ) : null;
              }}
            </Form.Item>
            <div style={{ marginBottom: 20 }}>
              <a onClick={() => personView()}>{`人员清单 >`}</a>
            </div>
            <Form.Item name="details" label="考核详情" rules={[{ required: true }]}>
              <IndivatorsTable
                postId={postId}
                personModal={personModal}
                type={type}
                currentItem={currentItem}
                loading={loading}
              />
            </Form.Item>
          </Form>
        </Spin>
      </Modal>
      <PersonModal item={personModal} setPersonModal={setPersonModal} type={type} />
    </>
  );
}