vent-template/src/views/vent/deviceManager/comment/FanLineModal .vue

<template>
  <div> </div>
  <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: [
      {
        label: 'R',
        field: 'fr',
        component: 'Input',
        colProps: { span: 6 },
      },
      {
        label: '角度',
        field: 'strangle',
        component: 'InputNumber',
        colProps: { span: 6 },
      },
      {
        label: '频率',
        field: 'fhz',
        component: 'InputNumber',
        colProps: { span: 6 },
      },
      {
        label: '最大风量',
        field: 'fqmax',
        component: 'InputNumber',
        colProps: { span: 6 },
      },
      {
        label: '最小风量',
        field: 'fqmin',
        component: 'InputNumber',
        colProps: { span: 6 },
      },
      {
        label: '系数a',
        field: 'ha',
        component: 'InputNumber',
        colProps: { span: 6 },
      },
      {
        label: '系数b',
        field: 'hb',
        component: 'InputNumber',
        colProps: { span: 6 },
      },
      {
        label: '系数c',
        field: 'hc',
        component: 'InputNumber',
        colProps: { span: 6 },
      },
    ],
    showActionButtonGroup: false,
    layout: 'horizontal',
    labelWidth: 80,
  });

  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();
      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>