1. 调试表单选项组件的双向绑定逻辑

riku

2023-12-19 3959e507bfa99cc4ced2a6f48f9b4358334d34c4

 src/components/form/FYForm.vue

@@ -3,7 +3,7 @@
    :inline="false"
    :model="formObj"
    ref="formRef"
    :rules="rules"
    :rules="allRules"
    label-position="right"
    label-width="150px"
  >
@@ -26,7 +26,7 @@
 * 可传入初始表单数据formInfo，表单校验规则rules
 * 实现submit和cancel触发函数
 */
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { defineProps, defineEmits, reactive, ref, watch, computed } from 'vue';
import { useFormConfirm } from '@/composables/formConfirm';

const props = defineProps({
@@ -43,7 +43,7 @@
  //重置按钮是否可用
  useReset: Boolean,
  //触发重置
  reset: Boolean,
  doClear: Boolean,
  //通知编辑状态
  isEdit: Boolean
});
@@ -51,8 +51,32 @@
//触发函数，提交和取消
const emit = defineEmits(['submit', 'cancel', 'update:isEdit']);

const baseRules = reactive({
  _usertype: [
    {
      required: true,
      message: '用户类型不能为空',
      trigger: 'change'
    }
  ],
  _locations: [
    {
      required: true,
      message: '省/市/区/镇不能为空',
      trigger: 'change',
    }
  ],
  _scenetype: [
    {
      required: true,
      message: '场景类型不能为空',
      trigger: 'change'
    }
  ]
});

//表单操作函数
const { formObj, formRef, edit, onSubmit, onCancel, onReset, formProps } = useFormConfirm({
const { formObj, formRef, edit, onSubmit, onCancel, onReset, clear } = useFormConfirm({
  submit: {
    do: submit
  },
@@ -83,21 +107,25 @@
  emit('cancel');
}

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

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

//监听表单重置功能触发
watch(
  () => props.reset,
  () => props.doClear,
  (nValue) => {
    if (nValue) {
      onReset();
      clear();
    }
  }
);