perf(views): 优化“基础信息”步骤 UI

src/views/create-device/BasicInformation.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
+import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { getPageList, groupList } from '@/api';
 
+import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
 import type { DeviceGroupItem, EquipmentInformationForm, EquipmentTypeItem, UseGuideStepItemProps } from '@/types';
 
-defineProps<UseGuideStepItemProps<EquipmentInformationForm>>();
+const props = defineProps<UseGuideStepItemProps<EquipmentInformationForm>>();
 
 const { handleRequest } = useRequest();
 
 const deviceGroup = ref<DeviceGroupItem[]>([]);
 const equipmentType = ref<EquipmentTypeItem[]>([]);
 
+const selectTypeRquipment = (value: SelectValue, option: DefaultOptionType) => {
+  props.form.imgUrl = option.imgUrl;
+};
+
 onMounted(() => {
   handleRequest(async () => {
     deviceGroup.value = await getPageList();
@@ -26,41 +32,41 @@ onMounted(() => {
 
 <template>
   <div>
-    <div class="use-guide-title">{{ $t('createDevice.basicInformation') }}</div>
-    <div class="use-guide-description">描述文本</div>
     <ARow>
-      <ACol :span="7" style="margin-top: 40px">
-        <AFormItem :label="$t('createDevice.equipmentGroup')" name="deviceData">
+      <ACol :span="6">
+        <AFormItem :label="$t('createDevice.equipmentGroup')" name="deviceData" :label-col="{ span: 5 }">
           <ACascader
             class="equipment-group"
-            size="large"
             v-model:value="form.deviceData"
             :field-names="{ label: 'groupName', value: 'id', children: 'deviceGroupChilds' }"
             :options="deviceGroup"
             :placeholder="$t('common.plzSelect')"
+            change-on-select
           />
         </AFormItem>
-        <AFormItem :label="$t('setupProtocol.deviceType')" name="deviceType">
+        <AFormItem :label="$t('setupProtocol.deviceType')" name="deviceType" :label-col="{ span: 5 }">
           <ASelect
             class="equipment-type"
-            size="large"
             v-model:value="form.deviceType"
             :options="equipmentType"
             :field-names="{ label: 'dataName', value: 'id' }"
+            :placeholder="$t('common.plzSelect')"
+            @change="selectTypeRquipment"
           />
           <ATooltip placement="top">
             <template #title>
               <span>{{ $t('createDevice.suggestion') }}</span>
             </template>
-            <img class="information-prompt" referrerpolicy="no-referrer" src="@/assets/img/device-tip.png" />
+
+            <SvgIcon class="information-prompt" name="exclamation-circle-o" />
           </ATooltip>
         </AFormItem>
-        <AFormItem :label="$t('createDevice.deviceName')" name="deviceName">
+        <AFormItem :label="$t('createDevice.deviceName')" name="deviceName" :label-col="{ span: 5 }">
           <AInput class="equipment-name" v-model:value="form.deviceName" />
         </AFormItem>
       </ACol>
-      <ACol :span="17">
-        <img class="information-img" referrerpolicy="no-referrer" src="@/assets/img/device-img.png" />
+      <ACol :span="18" v-if="form.deviceType">
+        <img class="information-img" referrerpolicy="no-referrer" :src="'http://192.168.1.136:9000/' + form.imgUrl" />
       </ACol>
     </ARow>
   </div>
@@ -70,30 +76,25 @@ onMounted(() => {
 .information-prompt {
   width: 14px;
   height: 14px;
-  margin-left: 13px;
+  margin-left: 12px;
+  color: #999;
   cursor: pointer;
 }
 
 .information-img {
-  width: 123px;
-  height: 123px;
-  margin-top: 30px;
-  margin-left: 50px;
+  width: 180px;
+  height: 208px;
 }
 
 .equipment-group {
-  width: 224px;
-  margin-left: 18px;
+  width: 256px;
 }
 
 .equipment-type {
-  width: 224px;
-  margin-left: 5px;
+  width: 256px;
 }
 
 .equipment-name {
-  width: 224px;
-  height: 40px;
-  margin-left: 18px;
+  width: 256px;
 }
 </style>

src/views/create-device/CreateDevice.vue

@@ -34,10 +34,11 @@ const equipmentInformationForm = reactive<EquipmentInformationForm>({
   department: '',
   respPerson: '',
   phone: '',
-  serviceLife: 0,
+  serviceLife: undefined,
   status: '',
   remarks: '',
   devId: 0,
+  imgUrl: '',
 });
 
 const rules = computed<FormRules<RegisterGatewayForm>>(() => {
@@ -63,22 +64,23 @@ const steps: UseGuideStepItem[] = [
   {
     title: t('createDevice.basicInformation'),
     component: BasicInformation,
+    stepDescription: '描述文本',
   },
   {
     title: t('createDevice.detailedInformation'),
     component: DetailedInformation,
-    contentOffset: 40,
+    stepDescription: '描述文本',
     formLayout: 'vertical',
   },
   {
     title: t('createDevice.selectGatewayParameters'),
     component: GatewayParameters,
-    contentOffset: 40,
+    stepDescription: '描述文本',
   },
   {
     title: t('createDevice.verifyData'),
     component: VerifyParameters,
-    contentOffset: 40,
+    stepDescription: '描述文本',
   },
 ];
 </script>