1. 调整飞羽环境用户信息的编辑

riku

2023-12-18 356f54467f525f437f41271fb62f6be66f2ab1e5

 src/composables/formConfirm.js

@@ -1,23 +1,32 @@
// 表单的确认和取消
import { onActivated, onDeactivated, ref, watch } from 'vue';
import { defineProps, onActivated, onDeactivated, 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: () => {}
  }
}) {
  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({});
  const formObj = ref(defaultForm ? defaultForm : {});
  let formObjClone = useCloned(formObj, { manual: true });
  //表单组件引用
  const formRef = ref(null);
@@ -48,7 +57,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;
@@ -59,24 +68,25 @@
  );

  // 重置表单
  const reset = function () {
  const _reset = function () {
    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();
    // formRef.value.resetFields();
    edit.value = false;
  };

  // 提交成功后
  const submited = function () {
    if (formProps.clearAftSubmit) clear();
    edit.value = false;
    formObjClone = useCloned(formObj, { manual: true });
  };
@@ -89,10 +99,10 @@
          confirmMsg: submit.msg,
          confirmTitle: submit.title,
          onConfirm: async () => {
            await submit.do();
            const res = await submit.do();
            submited();
            return;
          },
            return res;
          }
        });
      }
    });
@@ -106,9 +116,9 @@
        confirmMsg: cancel.msg,
        confirmTitle: cancel.title,
        onConfirm: () => {
          clear();
          // clear();
          return cancel.do();
        },
        }
      });
    } else {
      cancel.do();
@@ -116,21 +126,26 @@
  };

  // 重置表单
  const onReset = function () {
  const onReset = function (tips) {
    if (edit.value) {
      // 弹出确认框
      useMessageBox({
        confirmMsg: '是否重置表单内容？',
        confirmTitle: '重置表单',
        onConfirm: () => {
          reset();
          return cancel.do();
        },
      });
      if (tips) {
        // 弹出确认框
        useMessageBox({
          confirmMsg: '是否重置表单内容？',
          confirmTitle: '重置表单',
          onConfirm: () => {
            _reset();
            return reset.do();
          }
        });
      } else {
        _reset();
        reset.do();
      }
    } else {
      cancel.do();
      reset.do();
    }
  };

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