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

import React, { useCallback, useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import {
  Button,
  Cascader,
  DatePicker,
  Form,
  FormInstance,
  Input,
  InputNumber,
  Popconfirm,
  Select,
} from "antd";
import mapDataAll from "./data";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
import Z1upImgs from "@/components/Z1upImgs";
import Z2upVideos from "@/components/Z2upVideos";
import { MessageFu } from "@/utils/message";
import Z3upFiles from "@/components/Z3upFiles";
import classNames from "classnames";

const { RangePicker } = DatePicker;

const eeeeArr = [
  {
    value: "项目状态1",
    label: "项目状态1",
  },
  {
    value: "项目状态2",
    label: "项目状态2",
  },
];

type LinkType = {
  id: number;
  name: string;
  link: string;
};

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

function A1Add({ pageType, closeFu, addFu, editFu }: Props) {
  useEffect(() => {
    console.log("进来编辑和新增项目的页面~~~~~~~");
  }, []);

  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null);

  // 图片数组的ref
  const imgsRef = useRef<any>(null);

  // 视频数组的ref
  const videosRef = useRef<any>(null);

  // 有关 项目链接
  const [linkArr, setLinkArr] = useState<LinkType[]>([]);

  const addLinkFu = useCallback(() => {
    if (linkArr.length >= 10) return;
    setLinkArr([...linkArr, { id: Date.now(), name: "", link: "" }]);
  }, [linkArr]);

  const delLinkFu = useCallback(
    (id: number) => {
      setLinkArr(linkArr.filter((v) => v.id !== id));
    },
    [linkArr]
  );

  const linkChangeFu = useCallback(
    (id: number, val: string, type: "name" | "link") => {
      setLinkArr(
        linkArr.map((v) => ({
          ...v,
          [type]: v.id === id ? val.replace(/\s+/g, "") : v[type],
        }))
      );
    },
    [linkArr]
  );

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

  // 通过校验点击确定
  const onFinish = useCallback(
    async (value: any) => {
      console.log("通过校验", value);

      if (value.ffff) {
        console.log(
          "修改日期格式",
          dayjs(value.ffff[0]).format("YYYY-MM-DD"),
          dayjs(value.ffff[1]).format("YYYY-MM-DD")
        );
      }

      // 获取图片地址
      const imgsRes = imgsRef.current.imgIdsRes();

      console.log("获取图片地址", imgsRes);

      // 获取视频地址
      const videosRes = videosRef.current.videoIdsRes();
      console.log("获取视频地址", videosRes);

      // 检查链接填写完整情况
      const linkArrFlag = linkArr.some((v) => !v.name || !v.link);

      if (linkArrFlag) return MessageFu.warning("请完整填写 项目链接 !");

      console.log("项目链接", linkArr);

      // 项目成功
      const filesRes = filesRef.current.filesIdRes();
      console.log("获取项目成果文件", filesRes);

      if (pageType.txt === "add") {
        MessageFu.success("新增成功!");
        addFu();
      } else if (pageType.txt === "edit") {
        MessageFu.success("编辑成功!");
        editFu();
      }
      closeFu();
    },
    [addFu, closeFu, editFu, linkArr, pageType.txt]
  );

  // 项目成功的 ref
  const filesRef = useRef<any>(null);

  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"
        >
          <Form.Item
            label="项目编号"
            name="aaaa"
            rules={[{ required: true, message: "请输入项目编号!" }]}
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <Input
              style={{ width: 600 }}
              disabled={pageType.txt === "edit"}
              maxLength={30}
              showCount
              placeholder="请输入内容，不能重复"
            />
          </Form.Item>

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

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

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

          <Form.Item
            label="项目状态"
            name="eeee"
            rules={[{ required: true, message: "请选择项目状态!" }]}
          >
            <Select
              placeholder="请选择"
              style={{ width: 300 }}
              options={eeeeArr}
            />
          </Form.Item>

          {pageType.txt === "look" ? (
            <div className="e_row">
              <div className="e_rowL">
                <span> </span>项目日期：
              </div>
              <div className="e_rowR e_rowRLook">日期日期日期日期</div>
            </div>
          ) : (
            <Form.Item label="项目日期" name="ffff">
              <RangePicker style={{ width: 300 }} />
            </Form.Item>
          )}

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

          {pageType.txt === "look" ? (
            <div className="e_row">
              <div className="e_rowL">
                <span> </span>项目金额：
              </div>
              <div className="e_rowR e_rowRLook">1000000 ￥</div>
            </div>
          ) : (
            <Form.Item label="项目金额" name="hhhh">
              <InputNumber
                style={{ width: 300 }}
                addonAfter="￥"
                maxLength={10}
                placeholder="请输入数字，最多10位"
              />
            </Form.Item>
          )}

          <div className="e_row">
            <div className="e_rowL">
              <span> </span>项目图片：
            </div>
            <div className="e_rowR">
              <Z1upImgs
                max={50}
                isLook={pageType.txt === "look"}
                ref={imgsRef}
                fileCheck={false}
                size={10}
                isCoverShow={true}
                dirCode="aaaaaaaaa"
                myUrl="cms/goods/upload"
              />
            </div>
          </div>

          <div className="e_row">
            <div className="e_rowL e_rowL2">
              <span> </span>项目视频：
            </div>
            <div className="e_rowR">
              <Z2upVideos
                max={10}
                isLook={pageType.txt === "look"}
                ref={videosRef}
                fileCheck={false}
                size={500}
                dirCode="aaaaaaaaa"
                myUrl="cms/goods/upload"
              />
            </div>
          </div>

          <div className="e_row">
            <div className="e_rowL e_rowL2">
              <span> </span>项目链接：
            </div>
            <div className="e_rowR">
              {pageType.txt === "look" && linkArr.length <= 0 ? (
                <div className="lookNoneOne">（空）</div>
              ) : (
                <div className="erLinkTop">
                  <Button onClick={addLinkFu} disabled={linkArr.length >= 10}>
                    新&emsp;增
                  </Button>
                  <span className="e_rowRtit">&emsp;最多支持10条链接</span>
                </div>
              )}

              <div className="erLinkMain">
                {linkArr.map((v) => (
                  <div className="erLinkRow" key={v.id}>
                    <Input
                      value={v.name}
                      onChange={(e) =>
                        linkChangeFu(v.id, e.target.value, "name")
                      }
                      style={{ width: 240 }}
                      maxLength={10}
                      showCount
                      placeholder="请输入链接标题"
                    />
                    &emsp;
                    <Input
                      value={v.link}
                      onChange={(e) =>
                        linkChangeFu(v.id, e.target.value, "link")
                      }
                      style={{ width: 800 }}
                      maxLength={100}
                      showCount
                      placeholder="请输入链接"
                    />
                    &emsp;
                    <Popconfirm
                      title="删除后无法恢复，是否删除?"
                      okText="删除"
                      cancelText="取消"
                      onConfirm={() => delLinkFu(v.id)}
                      okButtonProps={{ loading: false }}
                    >
                      <Button>删除</Button>
                    </Popconfirm>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <br />

          <div className="e_row">
            <div className="e_rowL e_rowL2">
              <span> </span>项目成果：
            </div>
            <div className="e_rowR">
              <Z3upFiles
                max={10}
                isLook={pageType.txt === "look"}
                ref={filesRef}
                fileCheck={false}
                dirCode="aaaaaaaaa"
                myUrl="cms/goods/upload"
              />
            </div>
          </div>

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

const MemoA1Add = React.memo(A1Add);

export default MemoA1Add;