v1.9 测试停车功能，页面功能优化

wuxw
1 parent d53a0384
Showing 7 changed files with 77 additions and 56 deletions
src/components/car/carDetailFee.vue
src/views/car/auditParkingSpaceApply.vue
src/views/car/carAddParkingSpaceList.vue
src/views/car/carDetail.vue
src/views/car/hireParkingSpaceLang.js
src/views/car/hireParkingSpaceList.vue
src/views/car/parkingSpaceApplyManageList.vue
@@ -89,8 +89,8 @@
       </el-row>
     </div>
-    <add-meter-water ref="addMeterWater"></add-meter-water>
-    <car-create-fee-add ref="carCreateFeeAdd"></car-create-fee-add>
+    <add-meter-water ref="addMeterWater" @success="notify"></add-meter-water>
+    <car-create-fee-add ref="carCreateFeeAdd" @success="notify"></car-create-fee-add>
     <delete-fee ref="deleteFee"></delete-fee>
     <edit-fee ref="editFee"></edit-fee>
   </div>
@@ -65,23 +65,24 @@
     </el-card>
     <el-card class="box-card" style="margin-top: 20px;">
-      <div slot="header" class="clearfix">
+      <div slot="header" class="flex justify-between">
         <span>{{ $t('auditParkingSpaceApply.auditInfo') }}</span>
       </div>
       <el-form ref="form" :model="formData" label-width="120px">
         <el-form-item :label="$t('auditParkingSpaceApply.startRentTime')" required>
-          <el-date-picker v-model="formData.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"            :placeholder="$t('auditParkingSpaceApply.requiredField')" 
-            style="width: 100%;" />
+          <el-date-picker v-model="formData.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+            :placeholder="$t('auditParkingSpaceApply.requiredField')" style="width: 100%;" />
         </el-form-item>
         <el-form-item :label="$t('auditParkingSpaceApply.endRentTime')" required>
-          <el-date-picker v-model="formData.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"            :placeholder="$t('auditParkingSpaceApply.requiredField')" 
-            style="width: 100%;" />
+          <el-date-picker v-model="formData.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+            :placeholder="$t('auditParkingSpaceApply.requiredField')" style="width: 100%;" />
         </el-form-item>
         <el-form-item :label="$t('auditParkingSpaceApply.auditResult')" required>
-          <el-select v-model="formData.state" :placeholder="$t('auditParkingSpaceApply.selectResult')" style="width:100%">
+          <el-select v-model="formData.state" :placeholder="$t('auditParkingSpaceApply.selectResult')"
+            style="width:100%">
             <el-option :label="$t('auditParkingSpaceApply.pass')" value="3003" />
             <el-option :label="$t('auditParkingSpaceApply.reject')" value="4004" />
           </el-select>
@@ -114,11 +115,8 @@
     <!-- 搜索车位组件 -->
-    <search-parking-space 
-      ref="searchParkingSpace"
-      :ps-flag="formData.parkingSpaceFlag"
-      @choose-parking-space="handleChooseParkingSpace"
-    />
+    <search-parking-space ref="searchParkingSpace" :ps-flag="formData.parkingSpaceFlag"
+      @choose-parking-space="handleChooseParkingSpace" />
   </div>
 </template>
@@ -172,6 +170,7 @@ export default {
         const res = await getParkingSpaceApplyDetail(params)
         if (res.data && res.data.length > 0) {
           Object.assign(this.formData, res.data[0])
+          this.formData.state = ''
         }
       } catch (error) {
         this.$message.error(this.$t('common.queryFailed'))
@@ -10,7 +10,7 @@
             <el-form label-width="120px">
               <el-row :gutter="20">
                 <el-col :span="12">
-                  <el-form-item :label="$t('hireParkingSpace.parkingSpace')" prop="psName" required>
+                  <el-form-item :label="$t('hireParkingSpace.parkingSpace')" prop="psName" >
                     <el-input v-model="carAddParkingSpaceInfo.psName" disabled style="width: 80%;"
                       :placeholder="$t('hireParkingSpace.parkingSpacePlaceholder')" />
                     <el-button type="primary" size="small" class="margin-left" @click="openSearchParkingSpaceModel">
 <template>
-  <div class="car-detail-container">
+  <div class="car-detail-container padding">
     <div class="white-bg padding-left padding-right padding-top border-radius-top">
       <el-row type="flex" justify="space-between">
         <div class="text-title">
@@ -32,7 +32,10 @@ export const messages = {
         licenseType: 'License type is required',
         owner: 'Owner is required',
         parkingSpace: 'Parking space is required',
-        dateRange: 'Date range is required'
+        dateRange: 'Date range is required',
+        startTime:'start time is required',
+        endTime:'end time is required'
+
       },
       saveSuccess: 'Vehicle information saved successfully!',
       saveError: 'Failed to save vehicle information'
@@ -85,7 +88,9 @@ export const messages = {
         licenseType: '车牌类型不能为空',
         owner: '业主不能为空',
         parkingSpace: '车位不能为空',
-        dateRange: '请选择日期范围'
+        dateRange: '请选择日期范围',
+        startTime:'开始时间不能为空',
+        endTime:'结束时间不能为空'
       },
       saveSuccess: '车辆信息保存成功！',
       saveError: '车辆信息保存失败'
@@ -10,10 +10,10 @@
         </div>
       </div>
-      <el-form ref="form" :model="hireParkingSpaceInfo" label-width="120px" label-position="right">
+      <el-form ref="form" :model="hireParkingSpaceInfo" :rules="dynamicRules" label-width="120px" label-position="right">
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item :label="$t('hireParkingSpace.carNum')" prop="carNum" required>
+            <el-form-item :label="$t('hireParkingSpace.carNum')" prop="carNum" >
               <el-input v-model="hireParkingSpaceInfo.carNum" :placeholder="$t('hireParkingSpace.carNumPlaceholder')" />
             </el-form-item>
           </el-col>
@@ -27,7 +27,7 @@
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item :label="$t('hireParkingSpace.carType')" prop="carType" required>
+            <el-form-item :label="$t('hireParkingSpace.carType')" prop="carType" >
               <el-select v-model="hireParkingSpaceInfo.carType" class="w-full"
                 :placeholder="$t('hireParkingSpace.carTypePlaceholder')">
                 <el-option v-for="carType in hireParkingSpaceInfo.carTypes" :key="carType.statusCd" :label="carType.name"
@@ -45,7 +45,7 @@
         <el-row :gutter="20">
           <el-col :span="12">
-            <el-form-item :label="$t('hireParkingSpace.licenseType')" prop="leaseType" required>
+            <el-form-item :label="$t('hireParkingSpace.licenseType')" prop="leaseType" >
               <el-select v-model="hireParkingSpaceInfo.leaseType" class="w-full"
                 :placeholder="$t('hireParkingSpace.licenseTypePlaceholder')" @change="changeLeaseType">
                 <el-option :label="$t('hireParkingSpace.monthlyRent')" value="H" />
@@ -59,13 +59,13 @@
         <el-row v-if="showDateRange" :gutter="20">
           <el-col :span="12">
-            <el-form-item :label="$t('hireParkingSpace.startTime')" prop="startTime" required>
+            <el-form-item :label="$t('hireParkingSpace.startTime')" prop="startTime" >
               <el-date-picker v-model="hireParkingSpaceInfo.startTime" type="date" value-format="yyyy-MM-dd" class="w-full"
                 :placeholder="$t('hireParkingSpace.startTimePlaceholder')" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item :label="$t('hireParkingSpace.endTime')" prop="endTime" required>
+            <el-form-item :label="$t('hireParkingSpace.endTime')" prop="endTime" >
               <el-date-picker v-model="hireParkingSpaceInfo.endTime" type="date" value-format="yyyy-MM-dd" class="w-full"
                 :placeholder="$t('hireParkingSpace.endTimePlaceholder')" />
             </el-form-item>
@@ -74,7 +74,7 @@
         <el-row :gutter="20">
           <el-col :span="8">
-            <el-form-item :label="$t('hireParkingSpace.owner')" prop="ownerName" required>
+            <el-form-item :label="$t('hireParkingSpace.owner')" prop="ownerName" >
               <el-input v-model="hireParkingSpaceInfo.ownerName" disabled
                 :placeholder="$t('hireParkingSpace.ownerPlaceholder')" />
             </el-form-item>
@@ -87,7 +87,7 @@
               </div>
           </el-col>
           <el-col :span="8">
-            <el-form-item :label="$t('hireParkingSpace.parkingSpace')" prop="psName" required>
+            <el-form-item :label="$t('hireParkingSpace.parkingSpace')" prop="psName" >
               <el-input v-model="hireParkingSpaceInfo.psName" disabled
                 :placeholder="$t('hireParkingSpace.parkingSpacePlaceholder')" />
             </el-form-item>
@@ -164,12 +164,43 @@ export default {
         psName: '',
         attrs: [],
         carTypes: []
-      }
+      },
     }
   },
   computed: {
     showDateRange() {
       return ['H', 'S'].includes(this.hireParkingSpaceInfo.leaseType)
+    },
+    dynamicRules() {
+      const baseRules = {
+        carNum: [
+          { required: true, message: this.$t('hireParkingSpace.validate.carNum'), trigger: 'blur' }
+        ],
+        carType: [
+          { required: true, message: this.$t('hireParkingSpace.validate.carType'), trigger: 'change' }
+        ],
+        leaseType: [
+          { required: true, message: this.$t('hireParkingSpace.validate.licenseType'), trigger: 'change' }
+        ],
+        ownerName: [
+          { required: true, message: this.$t('hireParkingSpace.validate.owner'), trigger: 'change' }
+        ],
+        psName: [
+          { required: true, message: this.$t('hireParkingSpace.validate.parkingSpace'), trigger: 'change' }
+        ]
+      }
+
+      // 根据租赁类型动态添加时间验证规则
+      if (this.showDateRange) {
+        baseRules.startTime = [
+          { required: true, message: this.$t('hireParkingSpace.validate.startTime'), trigger: 'change' }
+        ]
+        baseRules.endTime = [
+          { required: true, message: this.$t('hireParkingSpace.validate.endTime'), trigger: 'change' }
+        ]
+      }
+
+      return baseRules
     }
   },
   async created() {
@@ -221,6 +252,10 @@ export default {
     changeLeaseType() {
       this.hireParkingSpaceInfo.startTime = ''
       this.hireParkingSpaceInfo.endTime = ''
+      // 清除时间字段的验证状态
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate(['startTime', 'endTime'])
+      })
     },
     openChooseOwner() {
@@ -230,6 +265,8 @@ export default {
     handleChooseOwner(owner) {
       this.hireParkingSpaceInfo.ownerName = owner.name
       this.hireParkingSpaceInfo.ownerId = owner.memberId
+      // 触发表单验证
+      this.$refs.form.validateField('ownerId')
     },
     openSearchParkingSpaceModel() {
@@ -239,46 +276,26 @@ export default {
     handleChooseParkingSpace(parkingSpace) {
       this.hireParkingSpaceInfo.psName = `${parkingSpace.areaNum}-${parkingSpace.num}`
       this.hireParkingSpaceInfo.psId = parkingSpace.psId
+      // 触发表单验证
+      this.$refs.form.validateField('psId')
     },
-    validateForm() {
-      const requiredFields = [
-        { field: 'carNum', message: this.$t('hireParkingSpace.validate.carNum') },
-        { field: 'carType', message: this.$t('hireParkingSpace.validate.carType') },
-        { field: 'leaseType', message: this.$t('hireParkingSpace.validate.licenseType') },
-        { field: 'ownerId', message: this.$t('hireParkingSpace.validate.owner') },
-        { field: 'psId', message: this.$t('hireParkingSpace.validate.parkingSpace') }
-      ]
-
-      for (const { field, message } of requiredFields) {
-        if (!this.hireParkingSpaceInfo[field]) {
-          this.$message.error(message)
-          return false
-        }
-      }
-
-      // 验证日期范围
-      if (this.showDateRange) {
-        if (!this.hireParkingSpaceInfo.startTime || !this.hireParkingSpaceInfo.endTime) {
-          this.$message.error(this.$t('hireParkingSpace.validate.dateRange'))
-          return false
-        }
+    async saveAddCarInfo() {
+      // 使用 Element UI 表单验证
+      try {
+        await this.$refs.form.validate()
+      } catch (error) {
+        return
       }
       // 验证自定义属性
       for (const attr of this.hireParkingSpaceInfo.attrs) {
         if (attr.required === 'Y' && !attr.value) {
           this.$message.error(attr.specHoldplace)
-          return false
+          return
         }
       }
-      return true
-    },
-
-    async saveAddCarInfo() {
-      if (!this.validateForm()) return
-
       try {
         const params = {
           ...this.hireParkingSpaceInfo,
 <template>
-  <div class="parking-space-apply-manage">
+  <div class="parking-space-apply-manage padding">
     <el-card class="search-card">
       <div slot="header" class="clearfix flex justify-between">
         <span>{{ $t('parkingSpaceApplyManage.searchCondition') }}</span>