hsjyk-admin/src/pages/Collection/create-or-edit/index.tsx

import { FormPageFooter, MemoSpinLoding } from "@/components";
import {
  DageFileCheckbox,
  DageFileCheckboxMethods,
  DageFileResponseType,
  DageUpload,
  DageUploadConsumer,
  DageUploadProvider,
} from "@dage/pc-components";
import { DatePicker, Form, FormInstance, Input, Select } from "antd";
import { useCallback, useEffect, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { CATEGORY_TYPE, LEVEL_TYPE } from "../constants";
import { collectionApi } from "@/api";
import { dayjs, formatDate } from "@dage/utils";

export default function CollectionCreateOrEditPage() {
  const dageFileCheckboxRef = useRef<DageFileCheckboxMethods>(null);
  const fileList = useRef<DageFileResponseType[]>([]);
  const formRef = useRef<FormInstance>(null);
  const navigate = useNavigate();
  const params = useParams();
  const [loading, setLoading] = useState(false);

  const getDetail = useCallback(async () => {
    setLoading(true);
    try {
      const {
        entity: { thumb, publishDate, ...rest },
        file,
      } = await collectionApi.getDetail(params.id as string);

      if (thumb) {
        rest.thumb = [
          {
            uid: thumb,
            url: `${process.env.REACT_APP_API_URL}${process.env.REACT_APP_IMG_PUBLIC}${thumb}`,
            name: thumb,
            status: "done",
          },
        ];
      }
      formRef.current?.setFieldsValue({
        publishDate: dayjs(publishDate),
        ...rest,
      });
      dageFileCheckboxRef.current?.setFileList(
        file.map((i: any) => ({
          uid: i.id + "",
          url: `${process.env.REACT_APP_API_URL}${process.env.REACT_APP_IMG_PUBLIC}${i.filePath}`,
          thumbUrl: `${process.env.REACT_APP_API_URL}${process.env.REACT_APP_IMG_PUBLIC}${i.filePath}`,
          name: i.fileName,
          dType: i.type,
          status: "done",
        }))
      );
    } finally {
      setLoading(false);
    }
  }, [params.id]);

  useEffect(() => {
    !!params.id && getDetail();
  }, [getDetail, params.id]);

  const handleCancel = useCallback(() => {
    navigate(-1);
  }, [navigate]);

  const handleSubmit = useCallback(async () => {
    if (!(await formRef.current?.validateFields())) return;

    const {
      thumb = [],
      publishDate,
      ...rest
    } = formRef.current?.getFieldsValue();

    if (params.id) {
      rest.id = params.id;
    }

    await collectionApi.save({
      ...rest,
      publishDate: formatDate(publishDate),
      thumb: thumb[0].response ? thumb[0].response.filePath : thumb[0].name,
      fileIds: fileList.current
        .map((i) => (i.response ? i.response.id : i.uid))
        .join(),
    });

    handleCancel();
  }, [handleCancel, params]);

  const handleFileChange = useCallback((list: DageFileResponseType[]) => {
    fileList.current = list;
  }, []);

  return (
    <div style={{ position: "relative" }}>
      {loading && <MemoSpinLoding />}
      <DageUploadProvider>
        <DageUploadConsumer>
          {(data) => (
            <>
              <Form
                ref={formRef}
                labelCol={{ span: 2 }}
                // initialValues={{
                //   dictLevel: LEVEL_TYPE[0].value,
                // }}
              >
                <Form.Item
                  label="标题"
                  name="name"
                  rules={[{ required: true, message: "请输入内容" }]}
                >
                  <Input
                    className="w220"
                    placeholder="请输入内容"
                    maxLength={20}
                    showCount
                  />
                </Form.Item>
                <Form.Item label="类别" name="dictType">
                  <Select
                    style={{ width: 220 }}
                    options={CATEGORY_TYPE}
                    placeholder="请选择"
                  />
                </Form.Item>
                <Form.Item label="时代" name="dictAge">
                  <Input
                    className="w220"
                    placeholder="请输入内容"
                    maxLength={10}
                    showCount
                  />
                </Form.Item>
                <Form.Item label="质地" name="dictTexture">
                  <Input
                    className="w220"
                    placeholder="请输入内容"
                    maxLength={10}
                    showCount
                  />
                </Form.Item>
                <Form.Item label="级别" name="dictLevel">
                  <Select
                    style={{ width: 220 }}
                    options={LEVEL_TYPE}
                    placeholder="请选择"
                  />
                </Form.Item>
                <Form.Item label="来源" name="dictSource">
                  <Input
                    className="w220"
                    placeholder="请输入内容"
                    maxLength={10}
                    showCount
                  />
                </Form.Item>
                <Form.Item label="简介" name="description">
                  <Input.TextArea
                    className="w450"
                    placeholder="请输入内容，最多200字"
                    maxLength={200}
                    showCount
                    rows={6}
                  />
                </Form.Item>
                <Form.Item
                  label="封面图"
                  name="thumb"
                  rules={[{ required: true, message: "请上传封面图" }]}
                >
                  <DageUpload
                    tips="支持png、jpg和jpeg格式；最多1张，最大20M"
                    action={
                      process.env.REACT_APP_API_URL + "/api/cms/goods/upload"
                    }
                    maxSize={20}
                    maxCount={1}
                  />
                </Form.Item>
                <Form.Item
                  label="文件类型"
                  name="fileType"
                  rules={[
                    { required: true, message: "" },
                    {
                      validator: (...args) => {
                        dageFileCheckboxRef.current!.validate(...args);
                      },
                    },
                  ]}
                  validateTrigger="onSubmit"
                >
                  <DageFileCheckbox
                    ref={dageFileCheckboxRef}
                    action={
                      process.env.REACT_APP_API_URL + "/api/cms/goods/upload"
                    }
                    onFileChange={handleFileChange}
                  />
                </Form.Item>
                <Form.Item
                  label="发布日期"
                  name="publishDate"
                  rules={[{ required: true, message: "请选择发布日期" }]}
                >
                  <DatePicker className="w220" format="YYYY-MM-DD" />
                </Form.Item>
              </Form>

              {!loading && (
                <FormPageFooter
                  disabled={data?.uploading}
                  onSubmit={handleSubmit}
                  onCancel={handleCancel}
                />
              )}
            </>
          )}
        </DageUploadConsumer>
      </DageUploadProvider>
    </div>
  );
}