@vrx-arco/pro-components/dist/EditFormDialog/EditFormDialog.js

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

import { computed, createVNode, defineComponent, ref, toRaw } from "vue";
import { Drawer, Form, Modal, Notification } from "@arco-design/web-vue";
import { controlVModel, useAbortController } from "@vrx-arco/use";
import { klona } from "klona/json";
const Dialog = (props, { slots, emit }) => {
	const { type, title, width, visible, unmountOnClose } = props;
	const handleSubmit = (done) => {
		props.onSubmit?.().then(() => done(true)).catch(() => done(false));
	};
	const handleCancel = () => {
		emit("cancel");
	};
	const handleClose = () => {
		emit("close");
	};
	if (type === "modal") return createVNode(Modal, {
		"title": title,
		"width": width,
		"draggable": true,
		"unmountOnClose": unmountOnClose,
		"visible": visible,
		"onBeforeOk": handleSubmit,
		"onUpdate:visible": (visible$1) => {
			emit("update:visible", visible$1);
		},
		"onCancel": handleCancel,
		"onClose": handleClose
	}, { default: () => [slots.default?.()] });
	return createVNode(Drawer, {
		"title": title,
		"width": width,
		"unmountOnClose": unmountOnClose,
		"visible": visible,
		"onBeforeOk": handleSubmit,
		"onUpdate:visible": (visible$1) => {
			emit("update:visible", visible$1);
		},
		"onCancel": handleCancel,
		"onClose": handleClose
	}, { default: () => [slots.default?.()] });
};
const EditFormDialog = /* @__PURE__ */ defineComponent({
	name: "vrx-arco-edit-form-dialog",
	props: {
		type: {
			type: String,
			default: "drawer"
		},
		id: {
			type: String,
			required: true
		},
		model: Object,
		title: String,
		width: [String, Number],
		rules: Object,
		disabled: {
			type: Boolean,
			default: false
		},
		unmountOnClose: {
			type: Boolean,
			default: true
		},
		initModel: {
			type: Function,
			default: () => ({})
		},
		add: Function,
		edit: Function,
		prefix: {
			type: Array,
			default: () => ["新增", "编辑"]
		},
		onConfirm: Function
	},
	emits: [
		"update:visible",
		"update:model",
		"confirm",
		"success",
		"close"
	],
	slots: Object,
	setup: (props, { emit, slots, expose }) => {
		const visible = ref(false);
		const model = controlVModel(props, "model", emit, () => ({}));
		const isEdit = computed(() => !!model.value[props.id]);
		const title = computed(() => {
			const prefixIndex = isEdit.value ? 1 : 0;
			let prefix = props.prefix[prefixIndex];
			if (props.disabled) prefix = "";
			return `${prefix}${props.title || ""}`;
		});
		const formRef = ref();
		const abortController = useAbortController();
		const submitFn = () => {
			const formModel = klona(toRaw(model.value));
			if (props.onConfirm) return props.onConfirm(formModel, { signal: abortController.signal });
			if (!props.edit || !props.add) return Promise.resolve();
			if (isEdit.value) return props.edit(formModel, { signal: abortController.signal });
			return props.add(formModel, { signal: abortController.signal });
		};
		const handleSubmit = () => {
			return formRef.value.validate().then((error) => error ? Promise.reject(error) : Promise.resolve()).then(submitFn).then(() => {
				Notification.success({
					title: "提示",
					content: `${title.value}成功`
				});
				emit("success", isEdit.value);
			});
		};
		const handleCancel = () => {
			model.value = klona(props.initModel());
			formRef.value.clearValidate();
		};
		const handleClose = () => {
			abortController.abort();
			emit("close");
		};
		const open = (value) => {
			model.value = klona(toRaw(value) || props.initModel());
			visible.value = true;
		};
		expose({ open });
		return () => {
			const { type, width, unmountOnClose, rules, disabled } = props;
			return createVNode(Dialog, {
				"visible": visible.value,
				"onUpdate:visible": ($event) => visible.value = $event,
				"type": type,
				"width": width,
				"title": title.value,
				"unmountOnClose": unmountOnClose,
				"onSubmit": handleSubmit,
				"onCancel": handleCancel,
				"onClose": handleClose
			}, { default: () => [createVNode(Form, {
				"ref": formRef,
				"model": model.value,
				"autoLabelWidth": true,
				"rules": rules,
				"disabled": disabled
			}, { default: () => [slots.default?.({
				model: model.value,
				isEdit: isEdit.value
			})] })] });
		};
	}
});
export { EditFormDialog };