shalu-marketplace/src/pages/management/AddAppDrawer.tsx

import { PlusOutlined } from "@ant-design/icons";
import {
  DrawerForm,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormUploadButton,
  ProFormTextArea,
  ProFormMoney,
} from "@ant-design/pro-components";
import type { FormInstance } from "@ant-design/pro-components";
import { Button, Space, message } from "antd";
import { useState, useRef, useEffect, useMemo } from "react";
import Editor from "@/components/Editor";
import { AppItem, SaveOrUpdateApp, GetAppDetail } from "@/api/appStore";
import { INDUSTRIE_OPTIONS, APPLICATION_SCENARIOS_OPTIONS } from "@/constants";
import { customUploadRequest } from "@/utils";
import { useRequest } from "umi";

export default ({
  onSuccess,
  editData,
  onClose,
}: {
  onSuccess: () => void;
  onClose: () => void;
  editData?: AppItem;
}) => {
  const [drawerVisit, setDrawerVisit] = useState(false);
  const [html, setHtml] = useState("");
  const formRef = useRef<FormInstance>();
  const { run } = useRequest(GetAppDetail, {
    manual: true,
    onSuccess: (res) => {
      setHtml(res?.result?.detail || "");
    },
  });

  useEffect(() => {
    setDrawerVisit(!!editData);
    if(editData?.id) {
      run({
        id: editData.id,
      });
    }
  }, [editData]);

  useEffect(() => {
    if (!drawerVisit) {
      onClose();
    }
  }, [drawerVisit]);

  const initialValues = useMemo(() => {
    if (editData) {
      return {
        ...editData,
        industries: JSON.parse(editData.industries),
        applicationScenarios: JSON.parse(editData.applicationScenarios),
        icon: editData.icon
          ? [
              {
                uid: editData.icon,
                name: editData.icon,
                status: "done",
                url: `/api/File/Download?fileId=${editData.icon}`,
              },
            ]
          : [],
      };
    }
    return {};
  }, [editData]);

  return (
    <>
      <Space>
        <Button
          type="primary"
          onClick={() => {
            setDrawerVisit(true);
          }}
        >
          <PlusOutlined />
          新增应用
        </Button>
      </Space>

      <DrawerForm
        onOpenChange={setDrawerVisit}
        title={editData ? "编辑应用" : "新增应用"}
        open={drawerVisit}
        onFinish={async (values: any) => {
          await SaveOrUpdateApp({
            ...values,
            id: editData?.id,
            version: editData?.version,
            icon: values?.icon?.[0]?.response?.id || values?.icon?.[0].uid || "",
            tags: values.tags?.replaceAll("，", ","),
            detail: html,
            isFree: !values?.price,
          });
          onSuccess();
          message.success("提交成功");
          return true;
        }}
        initialValues={initialValues}
        drawerProps={{
          maskClosable: false,
        }}
        formRef={formRef}
        size="small"
      >
        <ProForm.Group title="基础信息">
          <ProFormSelect
            width="md"
            name="applicationId"
            label="应用"
            placeholder="请输入名称"
          />

          <ProFormText
            width="md"
            name="name"
            label="应用名称"
            tooltip="最长为 30 位"
            placeholder="请输入名称"
            rules={[
              { required: true, message: "请输入名称" },
              { max: 30, message: "名称不能超过30个字符" },
            ]}
          />
          <ProFormText
            width="md"
            name="trialUrl"
            label="试用地址"
            placeholder="请输入名称"
            rules={[{ max: 100, message: "名称不能超过100个字符" }]}
          />
          <ProFormUploadButton
            fieldProps={{
              multiple: false,
              name: "file",
              listType: "picture-card",
              accept: "image/*",
              customRequest: customUploadRequest,
            }}
            max={1}
            name="icon"
            label="图标"
            rules={[{ required: true, message: "请上传应用图标" }]}
          />
        </ProForm.Group>
        <ProFormTextArea
          name="desc"
          label="应用简介"
          placeholder="请输入简介，1000字以内"
        />
        <ProForm.Group>
          <ProFormSelect
            width="md"
            name="industries"
            label="所属行业"
            placeholder="请选择"
            mode="multiple"
            options={INDUSTRIE_OPTIONS}
          />
          <ProFormSelect
            width="md"
            name="applicationScenarios"
            label="应用场景"
            placeholder="请选择"
            mode="multiple"
            options={APPLICATION_SCENARIOS_OPTIONS}
          />
          <ProFormText
            width="md"
            name="tags"
            label="标签"
            placeholder="多个标签用逗号分隔"
          />
          <ProFormMoney
            width="md"
            name="price"
            label="定价"
            fieldProps={{
              defaultValue: 0,
            }}
            locale="zh-CN"
            min={0}
            placeholder="请输入"
          />
        </ProForm.Group>
        <ProForm.Group title="详情信息">
          <Editor html={html} onChange={setHtml} />
        </ProForm.Group>
      </DrawerForm>
    </>
  );
};