修复表单FYForm不传入初始数据时报错问题

riku

2023-12-26 4253da96a80b36aa66a1322b0379ec624e01101c

 src/components/form/FYForm.vue

@@ -1,24 +1,19 @@
<!-- 场景基本信息编辑 -->
<template>
  <el-form
    :inline="false"
    :model="formObj"
    ref="formRef"
    :rules="rules"
    :rules="allRules"
    label-position="right"
    label-width="150px"
  >
    <slot name="form-item" :formObj="formObj"></slot>
    <el-form-item>
      <el-button
        :disabled="!edit"
        type="primary"
        @click="onSubmit"
        :loading="loading"
    <el-form-item v-if="showButtons">
      <el-button :disabled="!edit" type="primary" @click="onSubmit" :loading="loading"
        >提交</el-button
      >
      <el-button :disabled="!edit" @click="onReset">重置</el-button>
      <el-button v-if="enableCancelBtn" @click="onCancel">取消</el-button>
      <el-button v-if="useReset" :disabled="!edit" @click="onReset">重置</el-button>
      <el-button v-if="useCancel" @click="onCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
@@ -31,33 +26,82 @@
 * 可传入初始表单数据formInfo，表单校验规则rules
 * 实现submit和cancel触发函数
 */
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { defineProps, defineEmits, reactive, ref, watch, computed, defineExpose } from 'vue';
import { useFormConfirm } from '@/composables/formConfirm';

const props = defineProps({
  //表单基本信息
  formInfo: Object,
  formInfo: {
    type: Object,
    default: () => {
      return {};
    }
  },
  //表单检验规则
  rules: Object,
  showButtons: {
    type: Boolean,
    default: true
  },
  //取消按钮是否可用
  enableCancelBtn: Boolean,
  useCancel: Boolean,
  //重置按钮是否可用
  useReset: Boolean,
  //触发重置
  reset: Boolean,
  doClear: Boolean,
  //通知编辑状态
  isEdit: Boolean,
  isEdit: Boolean
});

//触发函数，提交和取消
const emit = defineEmits(['submit', 'cancel', 'update:isEdit']);

const baseRules = reactive({
  _usertype: [
    {
      required: true,
      message: '用户类型不能为空',
      trigger: 'change'
    }
  ],
  _locations: [
    {
      required: true,
      message: '行政区划不能为空',
      trigger: 'change'
      // validator: (rule, value, callback) => {
      //   if (!value) {
      //     callback(new Error('Please input the age'));
      //   } else {
      //     callback()
      //   }
      // }
    }
  ],
  _scenetype: [
    {
      required: true,
      message: '场景类型不能为空',
      trigger: 'change'
      // validator: (rule, value, callback) => {
      //   if (!value) {
      //     callback(new Error('Please input the age'));
      //   } else {
      //     callback()
      //   }
      // }
    }
  ]
});

//表单操作函数
const { formObj, formRef, edit, onSubmit, onCancel, onReset } = useFormConfirm({
const { formObj, formRef, edit, onSubmit, onCancel, onReset, clear } = useFormConfirm({
  submit: {
    do: submit,
    do: submit
  },
  cancel: {
    do: cancel,
  },
    do: cancel
  }
});

//加载状态
@@ -67,10 +111,18 @@
function submit() {
  loading.value = true;
  return new Promise((resolve, reject) => {
    emit('submit', formObj, () => {
      loading.value = false;
      resolve();
    });
    emit(
      'submit',
      formObj,
      () => {
        loading.value = false;
        resolve();
      },
      (err) => {
        loading.value = false;
        reject(err);
      }
    );
  });
}

@@ -79,20 +131,25 @@
  emit('cancel');
}

const allRules = computed(() => {
  return { ...baseRules, ...props.rules };
});

//监听表单初始数据传入
watch(
  () => props.formInfo,
  (nValue) => {
    formObj.value = nValue;
  }
  },
  { deep: false, immediate: true }
);

//监听表单重置功能触发
watch(
  () => props.reset,
  () => props.doClear,
  (nValue) => {
    if (nValue) {
      onReset();
      clear();
    }
  }
);
@@ -101,6 +158,8 @@
watch(edit, (nValue) => {
  emit('update:isEdit', nValue);
});

defineExpose({ formObj, onSubmit, onCancel, onReset });
</script>

<style scoped></style>