perf(views): 添加“详细信息”步骤加载中样式

src/views/create-device/DetailedInformation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import dayjs from 'dayjs';
 
 import { useDictData } from '@/hooks/dict-data';
@@ -16,6 +16,7 @@ const { dictData: dcCsCoolingType, getDictData: getDcCsCoolingType } = useDictDa
 const { dictData: dcVfdType, getDictData: getDcVfdType } = useDictData(DictCode.DcVfdType);
 
 const props = defineProps<UseGuideStepItemProps<EquipmentInformationForm>>();
+const isLoading = ref<boolean>(false);
 const { handleRequest } = useRequest();
 const getDeviceDetail = () => {
   let data;
@@ -102,6 +103,7 @@ const getDeviceDetail = () => {
   }
 };
 const finish = async () => {
+  isLoading.value = true;
   props.form.groupId = props.form.deviceData[1] ? props.form.deviceData[1] : props.form.deviceData[0];
   props.form.id = props.form.devId ? props.form.devId : undefined;
   props.form.devId = await deviceAdd({
@@ -114,6 +116,7 @@ const finish = async () => {
     productionDate: dayjs(props.form.productionDate).format('YYYY-MM-DD'),
     deviceDetail: getDeviceDetail(),
   });
+  isLoading.value = false;
 };
 
 defineExpose<UseGuideStepItemExpose>({
@@ -131,204 +134,206 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
-    <AFlex class="equipment-information" wrap="wrap" :gap="96">
-      <AFormItem :label="$t('createDevice.brand')" name="brand">
-        <AInput :placeholder="$t('common.pleaseEnter')" v-model:value="form.brand" />
-      </AFormItem>
-      <AFormItem :label="$t('createDevice.modelNumber')" name="model">
-        <AInput :placeholder="$t('common.pleaseEnter')" v-model:value="form.model" />
-      </AFormItem>
-      <AFormItem :label="$t('createDevice.manufacturingDate')" name="productionDate">
-        <ADatePicker :placeholder="$t('common.pleaseEnter')" v-model:value="form.productionDate">
-          <template #suffixIcon> </template>
-        </ADatePicker>
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 9 || props.form.deviceType === 11 || props.form.deviceType === 12"
-        :label="$t('createDevice.frequencyConversion')"
-        name="frequencyConversion"
-      >
-        <ASelect
-          v-model:value="form.frequencyConversion"
-          :options="dcVfdType"
-          :placeholder="$t('common.plzSelect')"
-          :field-names="{ label: 'dictValue', value: 'dictValue' }"
-        />
-      </AFormItem>
+  <ASpin :spinning="isLoading">
+    <div>
+      <AFlex class="equipment-information" wrap="wrap" :gap="96">
+        <AFormItem :label="$t('createDevice.brand')" name="brand">
+          <AInput :placeholder="$t('common.pleaseEnter')" v-model:value="form.brand" />
+        </AFormItem>
+        <AFormItem :label="$t('createDevice.modelNumber')" name="model">
+          <AInput :placeholder="$t('common.pleaseEnter')" v-model:value="form.model" />
+        </AFormItem>
+        <AFormItem :label="$t('createDevice.manufacturingDate')" name="productionDate">
+          <ADatePicker :placeholder="$t('common.pleaseEnter')" v-model:value="form.productionDate">
+            <template #suffixIcon> </template>
+          </ADatePicker>
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 9 || props.form.deviceType === 11 || props.form.deviceType === 12"
+          :label="$t('createDevice.frequencyConversion')"
+          name="frequencyConversion"
+        >
+          <ASelect
+            v-model:value="form.frequencyConversion"
+            :options="dcVfdType"
+            :placeholder="$t('common.plzSelect')"
+            :field-names="{ label: 'dictValue', value: 'dictValue' }"
+          />
+        </AFormItem>
 
-      <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.chillerType')" name="chillerType">
-        <ASelect
-          v-model:value="form.chillerType"
-          :options="dcCsDType"
-          :placeholder="$t('common.plzSelect')"
-          :field-names="{ label: 'dictValue', value: 'dictValue' }"
-        />
-      </AFormItem>
-      <AFormItem
-        v-if="
-          props.form.deviceType === 2 ||
-          props.form.deviceType === 9 ||
-          props.form.deviceType === 11 ||
-          props.form.deviceType === 12
-        "
-        :label="$t('createDevice.ratedPower')"
-        name="powerRating"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.powerRating" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
-        :label="t('createDevice.ratedFlow')"
-        name="ratedFlow"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedFlow" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
-        :label="t('createDevice.ratedHead')"
-        name="ratedHead"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedHead" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 9 || props.form.deviceType === 11 || props.form.deviceType === 12"
-        :label="t('createDevice.ratedVoltage')"
-        name="ratedVoltage"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedVoltage" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
-        :label="t('createDevice.ratedCurrent')"
-        name="ratedCurrent"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedCurrent" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
-        :label="t('createDevice.revolutions')"
-        name="revolutions"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.revolutions" />
-      </AFormItem>
+        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.chillerType')" name="chillerType">
+          <ASelect
+            v-model:value="form.chillerType"
+            :options="dcCsDType"
+            :placeholder="$t('common.plzSelect')"
+            :field-names="{ label: 'dictValue', value: 'dictValue' }"
+          />
+        </AFormItem>
+        <AFormItem
+          v-if="
+            props.form.deviceType === 2 ||
+            props.form.deviceType === 9 ||
+            props.form.deviceType === 11 ||
+            props.form.deviceType === 12
+          "
+          :label="$t('createDevice.ratedPower')"
+          name="powerRating"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.powerRating" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
+          :label="t('createDevice.ratedFlow')"
+          name="ratedFlow"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedFlow" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
+          :label="t('createDevice.ratedHead')"
+          name="ratedHead"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedHead" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 9 || props.form.deviceType === 11 || props.form.deviceType === 12"
+          :label="t('createDevice.ratedVoltage')"
+          name="ratedVoltage"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedVoltage" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
+          :label="t('createDevice.ratedCurrent')"
+          name="ratedCurrent"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.ratedCurrent" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 11 || props.form.deviceType === 12"
+          :label="t('createDevice.revolutions')"
+          name="revolutions"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.revolutions" />
+        </AFormItem>
 
-      <AFormItem
-        v-if="props.form.deviceType === 9"
-        :label="t('createDevice.inflowTemperature')"
-        name="inflowTemperature"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.inflowTemperature" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 9"
-        :label="t('createDevice.waterOutletTemperature')"
-        name="waterOutletTemperature"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.waterOutletTemperature" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 9"
-        :label="t('createDevice.relativeHumidityTemperature')"
-        name="relativeHumidityTemperature"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.relativeHumidityTemperature" />
-      </AFormItem>
-      <AFormItem v-if="props.form.deviceType === 9" :label="t('createDevice.fanNumber')" name="fanNumber">
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.fanNumber" />
-      </AFormItem>
-      <AFormItem v-if="props.form.deviceType === 9" :label="t('createDevice.waterFlowRate')" name="waterFlowRate">
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.waterFlowRate" />
-      </AFormItem>
-      <AFormItem v-if="props.form.deviceType === 9" :label="t('createDevice.coolingCapacity')" name="coolingCapacity">
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.coolingCapacity" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 9"
-        :label="t('createDevice.inletPipeDiameter')"
-        name="inletPipeDiameter"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.inletPipeDiameter" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 9"
-        :label="t('createDevice.outletPipeDiameter')"
-        name="outletPipeDiameter"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.outletPipeDiameter" />
-      </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 9"
+          :label="t('createDevice.inflowTemperature')"
+          name="inflowTemperature"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.inflowTemperature" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 9"
+          :label="t('createDevice.waterOutletTemperature')"
+          name="waterOutletTemperature"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.waterOutletTemperature" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 9"
+          :label="t('createDevice.relativeHumidityTemperature')"
+          name="relativeHumidityTemperature"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.relativeHumidityTemperature" />
+        </AFormItem>
+        <AFormItem v-if="props.form.deviceType === 9" :label="t('createDevice.fanNumber')" name="fanNumber">
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.fanNumber" />
+        </AFormItem>
+        <AFormItem v-if="props.form.deviceType === 9" :label="t('createDevice.waterFlowRate')" name="waterFlowRate">
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.waterFlowRate" />
+        </AFormItem>
+        <AFormItem v-if="props.form.deviceType === 9" :label="t('createDevice.coolingCapacity')" name="coolingCapacity">
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.coolingCapacity" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 9"
+          :label="t('createDevice.inletPipeDiameter')"
+          name="inletPipeDiameter"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.inletPipeDiameter" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 9"
+          :label="t('createDevice.outletPipeDiameter')"
+          name="outletPipeDiameter"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.outletPipeDiameter" />
+        </AFormItem>
 
-      <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.refrigerantType')" name="refrigerantType">
-        <ASelect
-          v-model:value="form.refrigerantType"
-          :options="dcCsCasType"
-          :placeholder="$t('common.plzSelect')"
-          :field-names="{ label: 'dictValue', value: 'dictValue' }"
-        />
-      </AFormItem>
-      <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.refrigerantDosage')">
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.refrigerantDosage" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 2"
-        :label="t('createDevice.nominalCoolingcapacity')"
-        name="nominalCoolingcapacity"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalCoolingcapacity" />
-      </AFormItem>
-      <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.nominalcalorificvalue')">
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalcalorificvalue" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 2"
-        :label="t('createDevice.nominalCopRefrigeration')"
-        name="nominalCopRefrigeration"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalCopRefrigeration" />
-      </AFormItem>
-      <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.nominalCopHeating')">
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalCopHeating" />
-      </AFormItem>
-      <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.chilledWaterRatedFlow')">
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.chilledWaterRatedFlow" />
-      </AFormItem>
-      <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.coolingWaterRatedFlow')">
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.coolingWaterRatedFlow" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 2"
-        :label="t('createDevice.motorCoolingMethod')"
-        name="motorCoolingMethod"
-      >
-        <ASelect
-          v-model:value="form.motorCoolingMethod"
-          :options="dcCsCoolingType"
-          :placeholder="$t('common.plzSelect')"
-          :field-names="{ label: 'dictValue', value: 'dictValue' }"
-        />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 2 || props.form.deviceType === 9"
-        :label="t('createDevice.copCorrectionFactor')"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.copCorrectionFactor" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 2 || props.form.deviceType === 9"
-        :label="t('createDevice.numberUnitCircuits')"
-        name="numberUnitCircuits"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.numberUnitCircuits" />
-      </AFormItem>
-      <AFormItem
-        v-if="props.form.deviceType === 2 || props.form.deviceType === 9"
-        :label="t('createDevice.singleLoopCompressor')"
-        name="singleLoopCompressor"
-      >
-        <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.singleLoopCompressor" />
-      </AFormItem>
-    </AFlex>
-  </div>
+        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.refrigerantType')" name="refrigerantType">
+          <ASelect
+            v-model:value="form.refrigerantType"
+            :options="dcCsCasType"
+            :placeholder="$t('common.plzSelect')"
+            :field-names="{ label: 'dictValue', value: 'dictValue' }"
+          />
+        </AFormItem>
+        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.refrigerantDosage')">
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.refrigerantDosage" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 2"
+          :label="t('createDevice.nominalCoolingcapacity')"
+          name="nominalCoolingcapacity"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalCoolingcapacity" />
+        </AFormItem>
+        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.nominalcalorificvalue')">
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalcalorificvalue" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 2"
+          :label="t('createDevice.nominalCopRefrigeration')"
+          name="nominalCopRefrigeration"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalCopRefrigeration" />
+        </AFormItem>
+        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.nominalCopHeating')">
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.nominalCopHeating" />
+        </AFormItem>
+        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.chilledWaterRatedFlow')">
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.chilledWaterRatedFlow" />
+        </AFormItem>
+        <AFormItem v-if="props.form.deviceType === 2" :label="t('createDevice.coolingWaterRatedFlow')">
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.coolingWaterRatedFlow" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 2"
+          :label="t('createDevice.motorCoolingMethod')"
+          name="motorCoolingMethod"
+        >
+          <ASelect
+            v-model:value="form.motorCoolingMethod"
+            :options="dcCsCoolingType"
+            :placeholder="$t('common.plzSelect')"
+            :field-names="{ label: 'dictValue', value: 'dictValue' }"
+          />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 2 || props.form.deviceType === 9"
+          :label="t('createDevice.copCorrectionFactor')"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.copCorrectionFactor" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 2 || props.form.deviceType === 9"
+          :label="t('createDevice.numberUnitCircuits')"
+          name="numberUnitCircuits"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.numberUnitCircuits" />
+        </AFormItem>
+        <AFormItem
+          v-if="props.form.deviceType === 2 || props.form.deviceType === 9"
+          :label="t('createDevice.singleLoopCompressor')"
+          name="singleLoopCompressor"
+        >
+          <AInputNumber :placeholder="$t('common.pleaseEnter')" v-model:value="form.singleLoopCompressor" />
+        </AFormItem>
+      </AFlex>
+    </div>
+  </ASpin>
 </template>
 
 <style lang="scss" scoped>