gasInjection-project/src/views/vent/gas/gasPumpSetting/components/settingForm.vue

<template>
  <div class="setting-form">
    <div class="setting-form__wrapper">
      <FormTitle icon="gas-pump" title="工作面参数" />
      <BasicForm :model="model" :schemas="workSurfaceFormSchema" @register="regWSForm" @submit="submitHandler">
        <template #input="{ model: m, field, schema }">
          <ListItem class="w-100%" v-model:value="m[field]" type="input" :label="schema.label" bordered :label-width="200" />
        </template>
      </BasicForm>
    </div>
    <div class="setting-form__wrapper">
      <FormTitle icon="pump" title="抽采单元参数" />
      <BasicForm :model="model" :schemas="extractionUnitFormSchema" @register="regEUForm" @submit="submitHandler">
        <template #input="{ model: m, field, schema }">
          <ListItem class="w-100%" v-model:value="m[field]" type="input" :label="schema.label" bordered :label-width="200" />
        </template>
      </BasicForm>
    </div>
    <div class="setting-form__wrapper">
      <FormTitle icon="water-pump" title="计算参数" />
      <BasicForm :model="model" :schemas="calculationFormSchema" @register="regCCForm" @submit="submitHandler">
        <!-- <template #radio="{ model: m, field, schema }">
          <ListItem class="w-100%">
            <template #label>
              <Switch v-model:checked="m[field]" size="small" />
              <span class="ml-10px">{{ schema.label }}</span>
            </template>
          </ListItem>
        </template> -->
        <template #input="{ model: m, field, schema }">
          <ListItem class="w-100%" v-model:value="m[field]" type="input" :label="schema.label" bordered :label-width="200" />
        </template>
      </BasicForm>
    </div>
    <div class="text-right">
      <!-- <Button class="mr-10px setting-form__button" type="primary" ghost @click="cancel">取消</Button> -->
      <Button class="mr-10px setting-form__button" type="primary" ghost @click="calculate">计算</Button>
      <Button class="mr-10px setting-form__button" type="primary" ghost @click="submit">提交</Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Button } from 'ant-design-vue';
  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
  import FormTitle from '@/views/vent/gas/components/form/formTitle.vue';
  import { useForm, BasicForm } from '/@/components/Form';
  import { workSurfaceFormSchema, extractionUnitFormSchema, calculationFormSchema } from '../gasPumpSetting.data';
  import { ref } from 'vue';

  const props = defineProps<{ model: Record<string, any> }>();
  const emit = defineEmits(['submit', 'calculate', 'cancel']);

  const defaultFormProp = {
    //注册表单列
    showActionButtonGroup: false,
    labelCol: { span: 0 },
    wrapperCol: { span: 24 },
    baseColProps: {
      flex: '16.6667%',
    },
  };

  const formData = ref<Record<string, any>>({});
  const [regWSForm, { submit: submitWSForm }] = useForm(defaultFormProp);
  const [regEUForm, { submit: submitEUForm }] = useForm(defaultFormProp);
  const [regCCForm, { submit: submitCCForm }] = useForm(defaultFormProp);
  function submitHandler(v) {
    formData.value = {
      ...formData.value,
      ...v,
    };
  }

  // function cancel() {
  //   emit('cancel');
  // }
  function calculate() {
    Promise.all([submitWSForm(), submitEUForm()]).then(() => {
      emit('calculate', { ...props.model, ...formData.value });
    });
  }

  function submit() {
    Promise.all([submitWSForm(), submitEUForm(), submitCCForm()]).then(() => {
      emit('submit', { ...props.model, ...formData.value });
    });
  }
</script>

<style lang="less" scoped>
  @import '@/design/vent/color.less';

  .setting-form {
    padding: 0 20px;
  }

  .setting-form__wrapper {
    color: #fff;
    border-top: 3px solid @vent-gas-primary-text;
    background-color: @vent-gas-primary-trasparent-bg;
    padding: 10px 10px 0 10px;
    margin-bottom: 10px;
  }

  .setting-form__button {
    color: @vent-gas-primary-text;
    border-color: @vent-gas-primary-text;
    background-color: transparent !important;
  }
</style>