sw-project-interior/src/pages/A1Project/A1Add/index.tsx

import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import styles from "./index.module.scss";
import {
  Button,
  Cascader,
  DatePicker,
  Form,
  FormInstance,
  Input,
  InputNumber,
  Popconfirm,
  Select,
  Radio,
  Checkbox,
} from "antd";
import mapDataAll from "./data";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
import { MessageFu } from "@/utils/message";
import classNames from "classnames";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import { A1_APIaddProject, A1_APIgetInfoById } from "@/store/action/A1Project";
import { A1TableType } from "@/types";
import AuthCom from "@/components/AuthCom";
import { getTokenInfo } from "@/utils/storage";

const { RangePicker } = DatePicker;

type Props = {
  pageType: { txt: string; id: number };
  closeFu: () => void;
  addFu: () => void;
  editFu: (val: string) => void;
};

function A1Add({ pageType, closeFu, addFu, editFu }: Props) {
  const [lookInfo, setLookInfo] = useState({} as A1TableType);

  const [isOk, setIsOk] = useState(false);

  const userInfo = useMemo(() => {
    return getTokenInfo().user;
  }, []);

  const getInfoFu = useCallback(async (id: number) => {
    const res = await A1_APIgetInfoById(id);
    if (res.code === 0) {
      const info = res.data.entity;
      setLookInfo(info);

      // 创建人编辑的 提示 回显
      setCreatorIdValue(info.creatorId);

      const province = info.province ? info.province.split("-") : "";

      const dateScope = info.dateScope ? info.dateScope.split(" 至 ") : "";

      FormBoxRef.current?.setFieldsValue({
        ...info,
        province,
        dateScope: dateScope ? [dayjs(dateScope[0]), dayjs(dateScope[1])] : "",
        dictProjectBusinessIds: Number(info.dictProjectBusinessIds), // 提交表单时这一项数据类型是 number，获取表单数据时这一项数据类型是string。
        bidDate: dayjs(info.bidDate),
      });

      // 回显的时候闪动 问题
      setIsOk(true);
    }
  }, []);

  useEffect(() => {
    if (!pageType.id) {
      // 新增
      setIsOk(true);
    } else if (pageType.txt === 'look') {
      // 查看
      getInfoFu(pageType.id);
    } else if (pageType.txt === 'edit') {
      // 编辑
      setIsBid(lookInfo.isBid);
    }
  }, [getInfoFu, pageType.id, pageType.txt, lookInfo.isBid]);

  // 从仓库 获取 项目状态的下拉框 数据
  const statusArr = useSelector(
    (state: RootState) => state.A2Dict.A2Tab1_1Obj.status
  );

  // 从仓库 获取 签订主体 数据
  const mainArr = useSelector(
    (state: RootState) => state.A2Dict.A2Tab1_1Obj.main
  );
  
  // 从仓库 获取 业务部门 数据
  const deptArr = useSelector(
    (state: RootState) => state.A2Dict.A2Tab1_1Obj.dept
  );

  // 从仓库 获取 业务类型 数据
  const projectBusinessArr = useSelector(
    (state: RootState) => state.A2Dict.A2Tab1_1Obj.projectBusiness
  );
  
  // 从仓库 获取 项目范围 数据
  const projectScopeArr = useSelector(
    (state: RootState) => state.A2Dict.A2Tab1_1Obj.projectScope
  );

  // 从仓库 获取 客户端 数据
  const projectAppArr = useSelector(
    (state: RootState) => state.A2Dict.A2Tab1_1Obj.projectApp
  );
  
  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null);

  // 没有通过校验
  const onFinishFailed = useCallback(() => {
    console.log("没有通过校验");
  }, []);

  // 通过校验点击确定
  const onFinish = useCallback(
    async (value: any) => {
      
      //  项目周期的处理
      let dateScope = "";
      if (value.dateScope && value.dateScope.length >= 1) {
        dateScope =
          dayjs(value.dateScope[0]).format("YYYY-MM-DD") +
          " 至 " +
          dayjs(value.dateScope[1]).format("YYYY-MM-DD");
      }

      // 项目地点的处理
      let province = "";
      if (value.province && value.province.length)
        province = value.province.join("-");

      // 中标日期的处理
      let bidDate = "";
      if (value.bidDate) bidDate = dayjs(value.bidDate).format("YYYY-MM-DD");
      
      const obj = {
        ...value,
        id: pageType.txt === "add" ? null : pageType.id,
        dateScope,
        amount: value.amount ? value.amount : "",
        province,
        bidDate,
      };
      const res = await A1_APIaddProject(obj);
      if (res.code === 0) {
        if (pageType.txt === "add") {
          MessageFu.success("新增成功!");
          addFu();
        } else if (pageType.txt === "edit") {
          MessageFu.success("编辑成功!");
          editFu(value.num + " - " + value.name);
        }
        closeFu();
      }
    },
    [addFu, closeFu, editFu, pageType.id, pageType.txt]
  );

  // 从仓库中获取 用户列表数据（全部）
  const userListTemp = useSelector(
    (state: RootState) => state.A3User.tableInfo.list
  );

  const userList = useMemo(() => {
    return userListTemp.map((v: any) => ({
      value: v.id,
      label: `${v.userName} - ${v.roleName}${
        v.realName ? " - " + v.realName : ""
      }`,
    }));
  }, [userListTemp]);

  // 创建人 的 值
  const [creatorIdValue, setCreatorIdValue] = useState(userInfo.id);

  // 是否投标
  const [isBid, setIsBid] = useState<number | undefined>();

  return (
    <div className={styles.A1Add}>
      <div
        className={classNames(
          "A1AddMain",
          pageType.txt === "look" ? "A1AddMainLook" : ""
        )}
      >
        <Form
          scrollToFirstError={true}
          ref={FormBoxRef}
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          initialValues={{
            snapPmUser: userInfo.realName,
            creatorId: userInfo.id,
          }}
          onValuesChange={(changedValues, allValues) => {
            setIsBid(allValues.isBid);
          }}
        >
          <Form.Item
            label="项目编号"
            name="num"
            rules={[{ required: true, message: "请输入项目编号!" }]}
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <Input
              style={{ width: 600 }}
              maxLength={30}
              showCount
              placeholder={
                isOk
                  ? pageType.txt === "look"
                    ? "（空）"
                    : "请输入内容，不能重复"
                  : ""
              }
            />
          </Form.Item>

          <Form.Item
            label="项目名称"
            name="name"
            rules={[{ required: true, message: "请输入项目名称!" }]}
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <Input
              style={{ width: 600 }}
              maxLength={30}
              showCount
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请输入内容") : ""
              }
            />
          </Form.Item>

          <Form.Item label="建设单位" name="unit">
            <Input
              style={{ width: 600 }}
              maxLength={30}
              showCount
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请输入内容") : ""
              }
            />
          </Form.Item>

          <Form.Item label="项目地点" name="province">
            <Cascader
              style={{ width: 300 }}
              options={mapDataAll}
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请选择省/市") : ""
              }
            />
          </Form.Item>

          <Form.Item
            label="项目状态"
            name="statusId"
            rules={[{ required: true, message: "请选择项目状态!" }]}
          >
            <Select
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请选择") : ""
              }
              style={{ width: 300 }}
              options={statusArr.map((v) => ({ value: v.id, label: v.name }))}
            />
          </Form.Item>

          <Form.Item label="项目经理" name="snapPmUser">
            <Input
              style={{ width: 600 }}
              maxLength={30}
              showCount
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请输入内容") : ""
              }
            />
          </Form.Item>

          <Form.Item label="商务经理" name="snapBmUser">
            <Input
              style={{ width: 600 }}
              maxLength={30}
              showCount
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请输入内容") : ""
              }
            />
          </Form.Item>

          <Form.Item
            label="签订主体"
            name="dictMainId"
          >
            <Select
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请选择") : ""
              }
              style={{ width: 300 }}
              options={mainArr.map((v) => ({ value: v.id, label: v.name }))}
            />
          </Form.Item>

          <Form.Item
            label="业务部门"
            name="dictDeptId"
          >
            <Select
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请选择") : ""
              }
              style={{ width: 300 }}
              options={deptArr.map((v) => ({ value: v.id, label: v.name }))}
            />
          </Form.Item>

          <div className="form-item-group-one-row">
            <Form.Item
              label="是否投标"
              name="isBid"
            >
              <Radio.Group>
                <Radio value={0}>否</Radio>
                <Radio value={1}>是</Radio>
              </Radio.Group>
            </Form.Item>
            
            {pageType.txt !== 'look' && isBid ? (
              <Form.Item label="中标日期" name="bidDate"
                required={isBid === 1}
              >
                <DatePicker
                  style={{ width: 300 }}
                  disabled={isBid === 0}
                />
              </Form.Item>
            ) : (pageType.txt === "look" && lookInfo.isBid === 1) ? (
                  <div>中标日期：{isOk ? lookInfo.bidDate : ""}</div>
            ) : (
              null
            )}
          </div>

          {pageType.txt === "look" ? (
            <div className="e_row">
              <div className="e_rowL">
                <span> </span>项目周期：
              </div>
              <div className="e_rowR e_rowRLook">
                {isOk
                  ? lookInfo.dateScope
                    ? lookInfo.dateScope
                    : "（空）"
                  : ""}
              </div>
            </div>
          ) : (
            <Form.Item label="项目周期" name="dateScope">
              <RangePicker style={{ width: 300 }} />
            </Form.Item>
          )}

          <Form.Item label="项目简介" name="description">
            <TextArea
              style={{ width: 600 }}
              autoSize
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请输入内容") : ""
              }
              showCount
              maxLength={500}
            />
          </Form.Item>

          {pageType.txt === "look" ? (
            <AuthCom aId="1082">
              <div className="e_row">
                <div className="e_rowL">
                  <span> </span>项目金额：
                </div>
                <div className="e_rowR e_rowRLook">
                  {isOk
                    ? lookInfo.amount
                      ? "￥" + lookInfo.amount
                      : "（空）"
                    : ""}
                </div>
              </div>
            </AuthCom>
          ) : (
            <Form.Item label="项目金额" name="amount">
              <InputNumber
                style={{ width: 300 }}
                addonBefore="￥"
                maxLength={10}
                placeholder="请输入数字，最多10位"
              />
            </Form.Item>
          )}

          {/* 新加的项目 创建人 */}
          <Form.Item
            label="创建人"
            name="creatorId"
            rules={[{ required: true, message: "请选择创建人!" }]}
          >
            <Select
              value={creatorIdValue}
              onChange={(e) => setCreatorIdValue(e)}
              placeholder={
                isOk ? (pageType.txt === "look" ? "（空）" : "请选择") : ""
              }
              style={{ width: 300 }}
              options={userList}
            />
          </Form.Item>

          {pageType.txt === "look" ? null : (
            <div
              className={classNames(
                "A1AtitTxt",
                creatorIdValue !== userInfo.id ? "A1AtitTxtShow" : ""
              )}
            >
              创建人与当前用户不一致，请谨慎选择
            </div>
          )}

          <h3 className="form-item-group-title__porject-type">项目类型</h3>
          <div className="form-item-group__porject-type">
            {/* 表单项：业务类型，单选。 */}
            <Form.Item
              label="业务类型"
              name="dictProjectBusinessIds"
              tooltip="甲方的业务类型"
            >
              <Radio.Group>
                {projectBusinessArr.map((v) => (
                  <Radio key={v.id} value={v.id}>
                    <span title={v.description}>{v.name}</span>
                  </Radio>
                ))}
              </Radio.Group>
            </Form.Item>

            {/* 表单项：项目范围，多选。 */}
            <Form.Item
              label="项目范围"
              name="dictProjectScopeIds"
              tooltip="项目的建设范围"
            >
              <Checkbox.Group>
                {projectScopeArr.map((v) => (
                  <Checkbox key={v.id} value={v.id}>
                    <span title={v.description}>{v.name}</span>
                  </Checkbox>
                ))}
              </Checkbox.Group>
            </Form.Item>

            {/* 表单项：客户端，多选。 */}
            <Form.Item
              label="客户端"
              name="dictProjectAppIds"
              tooltip="项目成果的呈现载体"
            >
              <Checkbox.Group>
                {projectAppArr.map((v) => (
                  <Checkbox key={v.id} value={v.id}>
                    <span title={v.description}>{v.name}</span>
                  </Checkbox>
                ))}
              </Checkbox.Group>
            </Form.Item>

          </div>

          {/* 确定和取消按钮 */}
          <div className="A1AddBtn">
            {pageType.txt === "look" ? null : (
              <>
                <Popconfirm
                  title="放弃编辑后，信息将不会保存!"
                  okText="放弃"
                  cancelText="取消"
                  onConfirm={closeFu}
                  okButtonProps={{ loading: false }}
                >
                  <Button>取消</Button>
                </Popconfirm>
                <Button type="primary" htmlType="submit">
                  保存
                </Button>
              </>
            )}
          </div>
        </Form>
      </div>
    </div>
  );
}

const MemoA1Add = React.memo(A1Add);

export default MemoA1Add;