riku
2023-12-18 356f54467f525f437f41271fb62f6be66f2ab1e5
src/components/form/FYForm.vue
@@ -1,4 +1,3 @@
<!-- 场景基本信息编辑 -->
<template>
  <el-form
    :inline="false"
@@ -9,16 +8,12 @@
    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>
@@ -39,25 +34,31 @@
  formInfo: Object,
  //表单检验规则
  rules: Object,
  showButtons: {
    type: Boolean,
    default: true
  },
  //取消按钮是否可用
  enableCancelBtn: Boolean,
  useCancel: Boolean,
  //重置按钮是否可用
  useReset: Boolean,
  //触发重置
  reset: Boolean,
  //通知编辑状态
  isEdit: Boolean,
  isEdit: Boolean
});
//触发函数,提交和取消
const emit = defineEmits(['submit', 'cancel', 'update:isEdit']);
//表单操作函数
const { formObj, formRef, edit, onSubmit, onCancel, onReset } = useFormConfirm({
const { formObj, formRef, edit, onSubmit, onCancel, onReset, formProps } = useFormConfirm({
  submit: {
    do: submit,
    do: submit
  },
  cancel: {
    do: cancel,
  },
    do: cancel
  }
});
//加载状态
@@ -70,6 +71,9 @@
    emit('submit', formObj, () => {
      loading.value = false;
      resolve();
    },(err)=>{
      loading.value = false;
      reject(err);
    });
  });
}
@@ -84,7 +88,8 @@
  () => props.formInfo,
  (nValue) => {
    formObj.value = nValue;
  }
  },
  { deep: false, immediate: false }
);
//监听表单重置功能触发