hvac-web/src/views/create-device/CreateDevice.vue

<script setup lang="ts">
import { computed, reactive, ref, shallowRef } from 'vue';

import UseGuidance from '@/layout/UseGuidance.vue';
import BasicInformation from '@/views/create-device/BasicInformation.vue';
import DetailedInformation from '@/views/create-device/DetailedInformation.vue';
import GatewayParameters from '@/views/create-device/GatewayParameters.vue';
import VerifyParameters from '@/views/create-device/VerifyParameters.vue';
import { t } from '@/i18n';

import type { EquipmentInformationForm, FormRules, RegisterGatewayForm, UseGuideStepItem } from '@/types';

const equipmentInformationForm = reactive<EquipmentInformationForm>({
  groupId: 0,
  deviceData: [],
  deviceType: undefined,
  deviceName: '',
  brand: undefined,
  model: undefined,
  modelType: undefined,
  controlType: undefined,
  compressionLevel: undefined,
  voltageLevel: undefined,
  powerRating: '',
  powerUnload: '',
  maximumFlow: '',
  pressure: '',
  pressureMax: '',
  productionDate: '',
  productionNum: '',
  deviceNum: '',
  mainTechData: '',
  mountedPosition: '',
  department: '',
  respPerson: '',
  phone: '',
  serviceLife: undefined,
  status: '',
  remarks: '',
  devId: 0,
  imgUrl: '',
  id: undefined,
});

const rules = computed<FormRules<RegisterGatewayForm>>(() => {
  return {
    deviceData: [{ required: true, message: t('createDevice.pleaseEquipmentGroup'), trigger: 'change' }],
    deviceType: [{ required: true, message: t('createDevice.pleaseDeviceType'), trigger: 'change' }],
    deviceName: [{ required: true, message: t('createDevice.pleaseDeviceName'), trigger: 'change' }],
    brand: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
    model: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
    modelType: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
    controlType: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
    compressionLevel: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
    voltageLevel: [{ required: true, message: t('common.plzSelect'), trigger: 'change' }],
    powerRating: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    powerUnload: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    maximumFlow: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    pressure: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
    pressureMax: [{ required: true, message: t('common.plzEnter'), trigger: 'change' }],
  };
});

const steps = ref<UseGuideStepItem[]>([
  {
    title: t('createDevice.basicInformation'),
    component: shallowRef(BasicInformation),
    stepDescription: '描述文本',
    labelAlign: 'left',
    labelCol: { span: 5 },
  },
  {
    title: t('createDevice.detailedInformation'),
    component: shallowRef(DetailedInformation),
    stepDescription: '描述文本',
    formLayout: 'vertical',
  },
  {
    title: t('createDevice.selectGatewayParameters'),
    component: shallowRef(GatewayParameters),
    stepDescription: '描述文本',
  },
  {
    title: t('createDevice.verifyData'),
    component: shallowRef(VerifyParameters),
    stepDescription: '描述文本',
    nextStepButtonText: t('common.finishSetup'),
    isLastStep: true,
  },
]);
</script>

<template>
  <UseGuidance
    :title="$t('createDevice.createDevice')"
    :steps="steps"
    :form="equipmentInformationForm"
    :rules="rules"
  />
</template>