调整新建列车

src/components/draw-app/dialogs/AddTrainDialog.vue

@@ -2,17 +2,16 @@
 <template>
   <q-dialog ref="dialogRef">
     <q-card style="width: 250px">
-      <q-card-section> <div class="text-h6">添加列车</div> </q-card-section>
-      <q-card-section class="q-pt-none">
+      <q-card-section>
+        <q-form ref="myForm" @submit="onCreate" class="q-gutter-md">
+          <div class="text-h6">添加列车</div>
           <q-input
             dense
             outlined
-          :disable="true"
-          label="SectionLink"
-          v-model="props.dev.code"
+            readonly
+            :label="props.dev.type"
+            v-model="props.dev.id"
           />
-      </q-card-section>
-      <q-card-section class="q-py-none">
           <q-input
             type="number"
             dense
@@ -22,10 +21,8 @@
             :min="0"
             v-model.number="offset"
             lazy-rules
-          :rules="[offsetRules]"
+            :rules="offsetRules"
           />
-      </q-card-section>
-      <q-card-section>
           <q-select
             v-model="dir"
             label="运行方向"
@@ -36,8 +33,6 @@
             mapOptions
           >
           </q-select>
-      </q-card-section>
-      <q-card-section>
           <q-select
             v-model="trainLength"
             label="列车总长度(mm)"
@@ -46,22 +41,18 @@
             :options="lengthOptions"
           >
           </q-select>
-      </q-card-section>
           <q-card-actions align="right" class="text-primary">
             <q-btn flat label="取消" @click="onDialogCancel" v-close-popup />
-        <q-btn
-          flat
-          label="确认"
-          @click="onDialogOK({ dir, offset, trainLength })"
-          v-close-popup
-        />
+            <q-btn flat label="确认" type="submit" />
           </q-card-actions>
+        </q-form>
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>
 
 <script setup lang="ts">
-import { useDialogPluginComponent } from 'quasar';
+import { QForm, useDialogPluginComponent } from 'quasar';
 import { getProjectLinkTrainSizeByMapId } from 'src/api/ProjectLinkApi';
 import { Section } from 'src/graphics/section/Section';
 import { Turnout } from 'src/graphics/turnout/Turnout';
@@ -89,8 +80,11 @@ defineEmits([...useDialogPluginComponent.emits]);
 
 const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
 
-const offsetRules = (val: number) =>
-  (val >= 0 && val <= props.kmLength) || `偏移量在0到${props.kmLength}之间！`;
+const offsetRules = [
+  (val: string) => (val !== null && val !== '') || '偏移量不能为空！',
+  (val: number) =>
+    (val >= 0 && val <= props.kmLength) || `偏移量在0到${props.kmLength}之间！`,
+];
 
 const lengthOptions = ref<string[]>([]);
 const trainLength = ref('');
@@ -109,6 +103,22 @@ function getLengthOption(mapId: number) {
         lengthOptions.value.push(item.total_length + '');
       }
     });
+    if (lengthOptions.value[0]) {
+      trainLength.value = lengthOptions.value[0];
+    }
+  });
+}
+
+const myForm = ref<QForm | null>(null);
+function onCreate() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      onDialogOK({
+        dir: dir.value,
+        offset: offset.value,
+        trainLength: trainLength.value,
+      });
+    }
   });
 }
 </script>