vent-template/src/views/vent/deviceManager/tableReport/components/FormModal.vue

<template>
    <div class="vent-form">
      <BasicForm @register="registerForm" />
      <div class="j-box-bottom-button offset-20" style="margin-top: 30px">
        <div class="j-box-bottom-button-float">
          <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
          <a-button type="primary" preIcon="ant-design:save-filled" @click="handleSubmit">保存</a-button>
        </div>
      </div>
    </div>
  </template>
  <script lang="ts" setup>
    import { inject, nextTick, watch, unref } from 'vue';
    import { BasicForm, useForm } from '/@/components/Form/index';
    // 声明Emits
    const emit = defineEmits(['saveOrUpdate']);
    const testData = inject('formData') as any;
    //表单配置
    const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
      schemas: unref(inject('formSchema')),
      showActionButtonGroup: false,
    });
  
    watch(
      testData,
      (newV) => {
        nextTick(() => {
          setFieldsValue({ ...newV });
        });
      },
      { immediate: true }
    );
  
    // 重置表单
    async function onReset() {
      await resetFields();
      await setFieldsValue({ ...testData });
    }
    //表单提交事件
    async function handleSubmit(v) {
      try {
        let values = await validate();
        console.log(values,'values------')
        emit('saveOrUpdate', values);
      } finally {
        // setModalProps({ confirmLoading: false });
      }
    }
  </script>
  <style lang="less" scoped>
    @ventSpace: zxm;
    .j-box-bottom-button-float {
      border: none !important;
      padding-bottom: 30px;
      left: 0px !important;
      right: 0px !important;
      bottom: 0px !important;
    }
    .vent-form {
      // width: 100%;
      max-height: 700px;
      overflow-y: auto;
  
      .@{ventSpace}-select-selection-item {
        color: rgba(255, 255, 255, 1) !important;
      }
    }
  </style>