@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>

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const webVue = require("@arco-design/web-vue");
const use = require("@vrx-arco/use");
const json = require("klona/json");
const Dialog = (props, {
  slots,
  emit
}) => {
  const {
    type,
    title,
    width,
    visible,
    unmountOnClose
  } = props;
  const handleSubmit = (done) => {
    var _a;
    (_a = props.onSubmit) == null ? void 0 : _a.call(props).then(() => done(true)).catch(() => done(false));
  };
  const handleCancel = () => {
    emit("cancel");
  };
  const handleClose = () => {
    emit("close");
  };
  if (type === "modal") {
    return vue.createVNode(webVue.Modal, {
      "title": title,
      "width": width,
      "draggable": true,
      "unmountOnClose": unmountOnClose,
      "visible": visible,
      "onBeforeOk": handleSubmit,
      "onUpdate:visible": (visible2) => {
        emit("update:visible", visible2);
      },
      "onCancel": handleCancel,
      "onClose": handleClose
    }, {
      default: () => {
        var _a;
        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
      }
    });
  }
  return vue.createVNode(webVue.Drawer, {
    "title": title,
    "width": width,
    "unmountOnClose": unmountOnClose,
    "visible": visible,
    "onBeforeOk": handleSubmit,
    "onUpdate:visible": (visible2) => {
      emit("update:visible", visible2);
    },
    "onCancel": handleCancel,
    "onClose": handleClose
  }, {
    default: () => {
      var _a;
      return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
    }
  });
};
const EditFormDialog = /* @__PURE__ */ vue.defineComponent({
  name: "vrx-arco-edit-form-dialog",
  props: {
    /**
     * 弹框类型
     */
    type: {
      type: String,
      default: "drawer"
    },
    /**
     * 根据是否有id，判断是否为编辑状态
     */
    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 = vue.ref(false);
    const model = use.controlVModel(props, "model", emit, () => ({}));
    const isEdit = vue.computed(() => !!model.value[props.id]);
    const title = vue.computed(() => {
      const prefixIndex = isEdit.value ? 1 : 0;
      let prefix = props.prefix[prefixIndex];
      if (props.disabled) {
        prefix = "";
      }
      return `${prefix}${props.title || ""}`;
    });
    const formRef = vue.ref();
    const abortController = use.useAbortController();
    const submitFn = () => {
      const formModel = json.klona(vue.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(() => {
        webVue.Notification.success({
          title: "提示",
          content: `${title.value}成功`
        });
        emit("success", isEdit.value);
      });
    };
    const handleCancel = () => {
      model.value = json.klona(props.initModel());
      formRef.value.clearValidate();
    };
    const handleClose = () => {
      abortController.abort();
      emit("close");
    };
    const open = (value) => {
      model.value = json.klona(vue.toRaw(value) || props.initModel());
      visible.value = true;
    };
    expose({
      open
    });
    return () => {
      const {
        type,
        width,
        unmountOnClose,
        rules,
        disabled
      } = props;
      return vue.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: () => [vue.createVNode(webVue.Form, {
          "ref": formRef,
          "model": model.value,
          "autoLabelWidth": true,
          "rules": rules,
          "disabled": disabled
        }, {
          default: () => {
            var _a;
            return [(_a = slots.default) == null ? void 0 : _a.call(slots, {
              model: model.value,
              isEdit: isEdit.value
            })];
          }
        })]
      });
    };
  }
});
exports.EditFormDialog = EditFormDialog;