调整项目

src/views/transportCapacity/driver.vue

@@ -120,6 +120,7 @@
         :model="driverForm"
         :rules="formRules"
         label-position="right"
+        label-width="calc(4em + 24px)"
         :disabled="readonly"
         class="driver-form archive-form"
       >
@@ -158,7 +159,12 @@
             </el-col>
             <el-col :span="6">
               <el-form-item label="性别" prop="gender">
-                <el-select v-model="driverForm.gender" clearable placeholder="请选择">
+                <el-select
+                  v-model="driverForm.gender"
+                  clearable
+                  placeholder="请选择"
+                  :validate-event="submitAttempted"
+                >
                   <el-option label="男" value="男" />
                   <el-option label="女" value="女" />
                 </el-select>
@@ -302,6 +308,7 @@
                   allow-create
                   default-first-option
                   placeholder="请选择"
+                  :validate-event="submitAttempted"
                 >
                   <el-option
                     v-for="item in drivingTypeOptions"
@@ -321,7 +328,7 @@
                 />
               </el-form-item>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="6">
               <el-form-item label="有效期" prop="drivingLicenseEndDate">
                 <div class="date-range">
                   <el-date-picker
@@ -343,7 +350,7 @@
                 </div>
               </el-form-item>
             </el-col>
-            <el-col :span="4">
+            <el-col :span="6">
               <el-form-item label="长期有效" prop="drivingLicenseLongTerm">
                 <el-checkbox
                   v-model="driverForm.drivingLicenseLongTerm"
@@ -395,6 +402,7 @@
                   clearable
                   filterable
                   placeholder="请选择"
+                  :validate-event="submitAttempted"
                 >
                   <el-option
                     v-for="item in qualificationTypeOptions"
@@ -414,7 +422,7 @@
                 />
               </el-form-item>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="6">
               <el-form-item label="有效期" prop="qualificationEndDate">
                 <div class="date-range">
                   <el-date-picker
@@ -436,7 +444,7 @@
                 </div>
               </el-form-item>
             </el-col>
-            <el-col :span="4">
+            <el-col :span="6">
               <el-form-item label="长期有效" prop="qualificationLongTerm">
                 <el-checkbox
                   v-model="driverForm.qualificationLongTerm"
@@ -746,6 +754,7 @@ export default {
         total: 0,
       },
       readonly: false,
+      submitAttempted: false,
       driverForm: emptyForm(),
       drivingLicenseUploads: {},
       uploadHeaders: getUploadHeaders(),
@@ -1114,6 +1123,7 @@ export default {
     },
     openDriver(row, readonly = false) {
       this.readonly = readonly;
+      this.submitAttempted = false;
       if (!row?.id) {
         this.driverForm = emptyForm();
         this.driverForm.organizationName = this.getCurrentOrganizationName();
@@ -1138,6 +1148,7 @@ export default {
       this.driverForm = emptyForm();
       this.drivingLicenseUploads = {};
       this.readonly = false;
+      this.submitAttempted = false;
       this.submitLoading = false;
       this.$refs.driverForm?.clearValidate();
     },
@@ -1600,6 +1611,7 @@ export default {
       this.$refs.driverForm?.validateField(prop);
     },
     handleSubmit() {
+      this.submitAttempted = true;
       this.$refs.driverForm.validate(valid => {
         if (!valid) {
           return;
@@ -1797,6 +1809,31 @@ export default {
 }
 
 .driver-form {
+  :deep(.el-form-item__label) {
+    flex: 0 0 calc(4em + 24px) !important;
+    width: calc(4em + 24px) !important;
+    height: auto;
+    white-space: normal !important;
+    word-break: break-all;
+    overflow-wrap: anywhere;
+    line-height: 18px;
+  }
+
+  :deep(.el-form-item) {
+    align-items: center;
+  }
+
+  :deep(.el-form-item.is-required .el-form-item__label) {
+    align-items: flex-start;
+  }
+
+  :deep(.el-form-item.is-required .el-form-item__label::before) {
+    display: inline-block;
+    height: 18px;
+    line-height: 18px;
+    margin-right: 4px;
+  }
+
   :deep(.el-date-editor.el-input),
   :deep(.el-date-editor.el-input__wrapper),
   :deep(.el-cascader),
@@ -1809,6 +1846,12 @@ export default {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: 8px;
+    width: 100%;
+  }
+
+  .date-range :deep(.el-date-editor) {
+    width: 100%;
+    min-width: 0;
   }
 }