gasInjection-project/src/views/vent/deviceManager/comment/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, onMounted } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { getRegulation as getRegulationList } from '/@/views/vent/deviceManager/substationTabel/substation.api';

// 声明Emits
const emit = defineEmits(['saveOrUpdate']);
const testData = inject('formData') as any;
const props = defineProps({
  deviceType: { type: String },
  record: { type: Object },
});
console.log(props.deviceType, '1111111111');
const existingSchemas = unref(inject('formSchema')) || [];
const newSchema = {
  label: '规程值',
  field: 'regulation',
  component: 'ApiSelect',
  componentProps: ({ formModel }) => {
    return {
      api: getRegulationList.bind(null, { deviceKind: props.deviceType }),
      labelField: 'name',
      valueField: 'id',
      onChange: (e, option) => {
        if (option) formModel['regulation'] = option['name'];
      },
    };
  },
};
// 在索引位置1处插入规程值配置
const insertPosition = 3;
const mergedSchemas = [...existingSchemas.slice(0, insertPosition), newSchema, ...existingSchemas.slice(insertPosition)];
//表单配置
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
  schemas: mergedSchemas,
  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();
    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>