调整新建列车

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

@@ -2,66 +2,57 @@
 <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-input
-          dense
-          outlined
-          :disable="true"
-          label="SectionLink"
-          v-model="props.dev.code"
-        />
-      </q-card-section>
-      <q-card-section class="q-py-none">
-        <q-input
-          type="number"
-          dense
-          outlined
-          :label="`列车偏移(mm)[长度${props.kmLength}mm]`"
-          :max="kmLength"
-          :min="0"
-          v-model.number="offset"
-          lazy-rules
-          :rules="[offsetRules]"
-        />
-      </q-card-section>
       <q-card-section>
-        <q-select
-          v-model="dir"
-          label="运行方向"
-          dense
-          outlined
-          :options="dirOptions"
-          emitValue
-          mapOptions
-        >
-        </q-select>
+        <q-form ref="myForm" @submit="onCreate" class="q-gutter-md">
+          <div class="text-h6">添加列车</div>
+          <q-input
+            dense
+            outlined
+            readonly
+            :label="props.dev.type"
+            v-model="props.dev.id"
+          />
+          <q-input
+            type="number"
+            dense
+            outlined
+            :label="`列车偏移(mm)[长度${props.kmLength}mm]`"
+            :max="kmLength"
+            :min="0"
+            v-model.number="offset"
+            lazy-rules
+            :rules="offsetRules"
+          />
+          <q-select
+            v-model="dir"
+            label="运行方向"
+            dense
+            outlined
+            :options="dirOptions"
+            emitValue
+            mapOptions
+          >
+          </q-select>
+          <q-select
+            v-model="trainLength"
+            label="列车总长度(mm)"
+            dense
+            outlined
+            :options="lengthOptions"
+          >
+          </q-select>
+          <q-card-actions align="right" class="text-primary">
+            <q-btn flat label="取消" @click="onDialogCancel" v-close-popup />
+            <q-btn flat label="确认" type="submit" />
+          </q-card-actions>
+        </q-form>
       </q-card-section>
-      <q-card-section>
-        <q-select
-          v-model="trainLength"
-          label="列车总长度(mm)"
-          dense
-          outlined
-          :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-card-actions>
     </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>