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> </> ); };