1. 数据产品模块（暂存）

riku

2024-10-21 e8b4c98c16b6721a7d6617aecf82bfbc23655a58

 src/components/form/FYForm.vue

@@ -9,10 +9,16 @@
  >
    <slot name="form-item" :formObj="formObj"></slot>
    <el-form-item v-if="showButtons">
      <el-button :disabled="!edit" type="primary" @click="onSubmit" :loading="loading"
        >提交</el-button
      <el-button
        :disabled="!edit"
        type="primary"
        @click="onSubmit"
        :loading="loading"
        >{{ submitName }}</el-button
      >
      <el-button v-if="useReset" :disabled="!edit" @click="onReset">重置</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>
@@ -26,17 +32,34 @@
 * 可传入初始表单数据formInfo，表单校验规则rules
 * 实现submit和cancel触发函数
 */
import { defineProps, defineEmits, reactive, ref, watch, computed, defineExpose } 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
  },
  submitName: {
    type: String,
    default: '提交'
  },
  //取消按钮是否可用
  useCancel: Boolean,
@@ -62,42 +85,29 @@
  _locations: [
    {
      required: true,
      // message: '行政区划不能为空',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('Please input the age'));
        } else {
          callback()
        }
      }
      message: '行政区划不能为空',
      trigger: 'change'
    }
  ],
  _scenetype: [
    {
      required: true,
      message: '场景类型不能为空',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('Please input the age'));
        } else {
          callback()
        }
      }
      trigger: 'change'
    }
  ]
});

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

//加载状态
const loading = ref(false);
@@ -115,7 +125,7 @@
      },
      (err) => {
        loading.value = false;
        reject(err);
        reject(err ? err : '');
      }
    );
  });
@@ -136,7 +146,7 @@
  (nValue) => {
    formObj.value = nValue;
  },
  { deep: true, immediate: true }
  { deep: false, immediate: true }
);

//监听表单重置功能触发
@@ -150,11 +160,22 @@
);

//监听表单编辑状态
watch(edit, (nValue) => {
  emit('update:isEdit', nValue);
watch(
  () => props.isEdit,
  (nV, oV) => {
    if (nV != oV) {
      edit.value = nV;
    }
  },
  { immediate: true }
);
watch(edit, (nV, oV) => {
  if (nV != oV) {
    emit('update:isEdit', nV);
  }
});

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

<style scoped></style>