调整FYForm表单逻辑

riku

2023-12-22 e5875000e60d4976f159f287ae3773f1d11960b3

 src/composables/formConfirm.js

@@ -1,27 +1,33 @@
// 表单的确认和取消
import { onActivated, onDeactivated, ref, watch } from 'vue';
import { defineProps, onActivated, onDeactivated, reactive, ref, watch } from 'vue';
import { useCloned } from '@vueuse/core';
import { useMessageBoxTip, useMessageBox } from './messageBox';

// 表单的确认和取消
export function useFormConfirm({
  defaultForm = undefined,
  submit = {
    do: () => {},
    do: () => {}
  },
  cancel = {
    do: () => {},
    do: () => {}
  },
  reset = {
    do: () => {},
  },
    do: () => {}
  }
}) {
  if (!submit.title) submit.title = '提交';
  if (!submit.msg) submit.msg = '确认是否提交？';
  if (!cancel.title) cancel.title = '取消';
  if (!cancel.msg) cancel.msg = '是否放弃已编辑的内容？';

  // const formProps = defineProps({
  //   // 是否在提交成功后清空表单
  //   clearAftSubmit: Boolean
  // });

  //表单内容
  const formObj = ref(defaultForm ? defaultForm : {});
  const formObj = reactive(defaultForm ? defaultForm : {});
  // const formObj = reactive({});
  let formObjClone = useCloned(formObj, { manual: true });
  //表单组件引用
  const formRef = ref(null);
@@ -52,7 +58,7 @@
    formObj,
    (nv, ov) => {
      if (!isReset && nv != ov) {
        formObjClone = useCloned(formObj, { manual: true });
        formObjClone = useCloned(nv, { manual: true });
      }
      if (!isReset && nv === ov) {
        edit.value = true;
@@ -64,40 +70,46 @@

  // 重置表单
  const _reset = function () {
    formRef.value.clearValidate();
    edit.value = false;
    isReset = true;
    formObj.value = useCloned(formObjClone.cloned, {
      manual: true,
      manual: true
    }).cloned.value;
    formRef.value.clearValidate();
  };

  // 清空表单
  const clear = function () {
    edit.value = false;
    isReset = true;
    formRef.value.resetFields();
    edit.value = false;
  };

  // 提交成功后
  const submited = function () {
    // if (formProps.clearAftSubmit) clear();
    edit.value = false;
    formObjClone = useCloned(formObj, { manual: true });
  };

  // 提交表单
  const onSubmit = function () {
    formRef.value.validate((valid) => {
  const onSubmit = function (messageBox = true) {
    formRef.value.validate(async (valid) => {
      if (valid) {
        if (messageBox) {
        useMessageBoxTip({
          confirmMsg: submit.msg,
          confirmTitle: submit.title,
          onConfirm: async () => {
            await submit.do();
            const res = await submit.do();
            submited();
            return;
          },
            return res;
          }
        });
        } else {
          await submit.do();
          submited();
        }
      }
    });
  };
@@ -110,9 +122,9 @@
        confirmMsg: cancel.msg,
        confirmTitle: cancel.title,
        onConfirm: () => {
          clear();
          // clear();
          return cancel.do();
        },
        }
      });
    } else {
      cancel.do();
@@ -130,7 +142,7 @@
          onConfirm: () => {
            _reset();
            return reset.do();
          },
          }
        });
      } else {
        _reset();
@@ -141,5 +153,5 @@
    }
  };

  return { formObj, formRef, edit, onSubmit, onCancel, onReset };
  return { formObj, formRef, edit, onSubmit, onCancel, onReset, clear };
}