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

2026-02-23 21:36:37 +08:00 · 2025-10-28 11:50:21 +08:00 · 2025-10-28 11:50:21 +08:00 · b012d770c7
commit b012d770c7
parent d53a0384aa
7 changed files with 77 additions and 56 deletions
--- a/src/components/car/carDetailFee.vue
+++ b/src/components/car/carDetailFee.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>
--- a/src/views/car/auditParkingSpaceApply.vue
+++ b/src/views/car/auditParkingSpaceApply.vue
@ -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'))
--- a/src/views/car/carAddParkingSpaceList.vue
+++ b/src/views/car/carAddParkingSpaceList.vue
@ -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">
--- a/src/views/car/carDetail.vue
+++ b/src/views/car/carDetail.vue
@ -1,5 +1,5 @@
 <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">
--- a/src/views/car/hireParkingSpaceLang.js
+++ b/src/views/car/hireParkingSpaceLang.js
@ -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: '车辆信息保存失败'
--- a/src/views/car/hireParkingSpaceList.vue
+++ b/src/views/car/hireParkingSpaceList.vue
@ -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,
--- a/src/views/car/parkingSpaceApplyManageList.vue
+++ b/src/views/car/parkingSpaceApplyManageList.vue
@ -1,5 +1,5 @@
 <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>