feat(ui): new WorkflowDetail using antd

This commit is contained in:
Fu Diwei
2024-12-24 20:39:01 +08:00
parent 8b1ae309fb
commit 4e5373de73
38 changed files with 293 additions and 320 deletions

View File

@@ -27,14 +27,14 @@ import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
type AccessEditFormModelType = Partial<MaybeModelRecord<AccessModel>>;
type AccessEditFormModes = "add" | "edit";
type AccessEditFormPresets = "add" | "edit";
export type AccessEditFormProps = {
className?: string;
style?: React.CSSProperties;
disabled?: boolean;
mode: AccessEditFormModes;
model?: AccessEditFormModelType;
preset: AccessEditFormPresets;
onModelChange?: (model: AccessEditFormModelType) => void;
};
@@ -44,7 +44,7 @@ export type AccessEditFormInstance = {
validateFields: () => Promise<AccessEditFormModelType>;
};
const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, mode, model, onModelChange }, ref) => {
const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, model, preset, onModelChange }, ref) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -160,7 +160,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.type.tooltip") }}></span>}
>
<AccessTypeSelect disabled={mode !== "add"} placeholder={t("access.form.type.placeholder")} showSearch={!disabled} />
<AccessTypeSelect disabled={preset !== "add"} placeholder={t("access.form.type.placeholder")} showSearch={!disabled} />
</Form.Item>
</Form>

View File

@@ -11,13 +11,13 @@ import AccessEditForm, { type AccessEditFormInstance, type AccessEditFormProps }
export type AccessEditModalProps = {
data?: AccessEditFormProps["model"];
loading?: boolean;
mode: AccessEditFormProps["mode"];
open?: boolean;
preset: AccessEditFormProps["preset"];
trigger?: React.ReactElement;
onOpenChange?: (open: boolean) => void;
};
const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditModalProps) => {
const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEditModalProps) => {
const { t } = useTranslation();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
@@ -57,13 +57,13 @@ const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditM
}
try {
if (mode === "add") {
if (preset === "add") {
if (data?.id) {
throw "Invalid props: `data`";
}
await createAccess(formRef.current!.getFieldsValue() as AccessModel);
} else if (mode === "edit") {
} else if (preset === "edit") {
if (!data?.id) {
throw "Invalid props: `data`";
}
@@ -100,14 +100,15 @@ const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditM
confirmLoading={formPending}
destroyOnClose
loading={loading}
okText={mode === "edit" ? t("common.button.save") : t("common.button.submit")}
okText={preset === "edit" ? t("common.button.save") : t("common.button.submit")}
open={open}
title={t(`access.action.${mode}`)}
title={t(`access.action.${preset}`)}
width={480}
onOk={handleClickOk}
onCancel={handleClickCancel}
>
<div className="pt-4 pb-2">
<AccessEditForm ref={formRef} mode={mode === "add" ? "add" : "edit"} model={data} />
<AccessEditForm ref={formRef} preset={preset === "add" ? "add" : "edit"} model={data} />
</div>
</Modal>
</>