feat(zf/fwxq):优化租期和租金表单交互及自动计算功能

- 引入 vue 的 watch API 实现数据联动监听
- 移除不再使用的 terminateForm 表单对象- 新增 calculateEndDate 计算属性，根据起始时间和租期自动计算结束时间
- 添加 updateContractEndDate 方法用于更新合同结束日期
- 新增 formatDate 工具函数格式化日期显示- 设置多个字段监听器同步租赁信息到合同数据
- 将租期输入框改为 el-input-number 并限制范围 1-500 个月
- 将租金输入框改为 el-input-number 并设置金额上限
- 在合同信息区域禁用已填写项防止重复修改- 展示自动计算的租期结束时间且不允许手动编辑
-为合同结束时间选择器添加只读属性避免误操作

src/views/zf/fwxq.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import {
   ElButton,
   ElCard,
@@ -474,13 +474,6 @@ const rentalRules = {
   ],
 }
 
-const terminateForm = reactive({
-  terminateDate: '',
-  reason: '',
-  depositHandling: '全额退还',
-  deductAmount: 0,
-})
-
 const rentalFormRef = ref()
 
 interface BaseResponse {
@@ -976,6 +969,94 @@ const getData = async () => {
   }
 }
 
+const calculateEndDate = computed(() => {
+  if (!rentalForm.rentalInfo.rentalTimeStart || !rentalForm.rentalInfo.rentalTime) {
+    return ''
+  }
+
+  const startDate = new Date(rentalForm.rentalInfo.rentalTimeStart)
+  if (isNaN(startDate.getTime())) {
+    return ''
+  }
+
+  // 创建结束日期副本
+  const endDate = new Date(startDate)
+  // 添加月数
+  endDate.setMonth(endDate.getMonth() + parseInt(rentalForm.rentalInfo.rentalTime))
+  // 减去一天，得到租期结束日期
+  endDate.setDate(endDate.getDate() - 1)
+
+  // 格式化为 YYYY-MM-DD
+  const year = endDate.getFullYear()
+  const month = String(endDate.getMonth() + 1).padStart(2, '0')
+  const day = String(endDate.getDate()).padStart(2, '0')
+
+  return `${year}-${month}-${day}`
+})
+
+watch(
+  () => rentalForm.rentalInfo.rentalTimeStart,
+  (newVal) => {
+    if (newVal) {
+      rentalForm.contractDataA.tenantTimeStart = newVal
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => rentalForm.rentalInfo.rentalTime,
+  (newVal) => {
+    if (newVal) {
+      rentalForm.contractDataA.tenantTime = newVal
+      // 同时更新结束时间
+      updateContractEndDate()
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => rentalForm.rentalInfo.rentalRect,
+  (newVal) => {
+    if (newVal) {
+      rentalForm.contractDataA.tenantRent = newVal
+    }
+  },
+  { immediate: true },
+)
+
+// 添加一个方法来更新合同结束日期
+const updateContractEndDate = () => {
+  if (rentalForm.contractDataA.tenantTimeStart && rentalForm.contractDataA.tenantTime) {
+    const startDate = new Date(rentalForm.contractDataA.tenantTimeStart)
+    if (!isNaN(startDate.getTime())) {
+      const endDate = new Date(startDate)
+      endDate.setMonth(
+        endDate.getMonth() + parseInt(rentalForm.contractDataA.tenantTime.toString()),
+      )
+      endDate.setDate(endDate.getDate() - 1)
+      rentalForm.contractDataA.tenantTimeEnd = formatDate(endDate)
+    }
+  }
+}
+
+// 添加日期格式化函数
+const formatDate = (date: Date): string => {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+// 监听合同开始时间和租期的变化，自动更新结束时间
+watch(
+  [() => rentalForm.contractDataA.tenantTimeStart, () => rentalForm.contractDataA.tenantTime],
+  () => {
+    updateContractEndDate()
+  },
+)
+
 onMounted(() => {
   getData()
 })
@@ -1349,11 +1430,30 @@ onMounted(() => {
               placeholder="请输入租期开始时间"
             />
           </el-form-item>
-          <el-form-item label="租期" prop="rentalInfo.rentalTime">
-            <el-input v-model="rentalForm.rentalInfo.rentalTime" placeholder="请输入租期" />
+          <el-form-item label="租期(月)" prop="rentalInfo.rentalTime">
+            <el-input-number
+              :max="500"
+              :min="1"
+              v-model="rentalForm.rentalInfo.rentalTime"
+              placeholder="请输入租期"
+            />
+          </el-form-item>
+          <!--          展示一个不可编辑的根据上方计算出的租期结束时间-->
+          <el-form-item label="租期结束时间" v-if="rentalForm.rentalInfo.rentalTimeStart">
+            <el-input
+              :value="calculateEndDate"
+              placeholder="根据开始时间和租期自动计算"
+              readonly
+              disabled
+            />
           </el-form-item>
           <el-form-item label="租金" prop="rentalInfo.rentalRect">
-            <el-input v-model="rentalForm.rentalInfo.rentalRect" placeholder="请输入租金" />
+            <el-input-number
+              :min="0"
+              :max="1000000"
+              v-model="rentalForm.rentalInfo.rentalRect"
+              placeholder="请输入租金"
+            />
           </el-form-item>
         </div>
         <div v-show="currentStep === 1">
@@ -1372,25 +1472,35 @@ onMounted(() => {
                 clearable
                 v-model="rentalForm.contractDataA.tenantTimeStart"
                 placeholder="请输入租期开始时间"
+                :disabled="currentStep > 0"
               />
             </el-form-item>
-            <el-form-item label="租期" prop="contractDataA.tenantTime">
-              <el-input v-model="rentalForm.contractDataA.tenantTime" placeholder="请输入租期" />
+            <el-form-item label="租期(月)" prop="contractDataA.tenantTime">
+              <el-input-number
+                :max="500"
+                :min="1"
+                v-model="rentalForm.contractDataA.tenantTime"
+                placeholder="请输入租期"
+                :disabled="currentStep > 0"
+              />
             </el-form-item>
             <el-form-item label="租期结束时间" prop="contractDataA.tenantTimeEnd">
               <el-date-picker
                 type="date"
                 format="YYYY-MM-DD"
                 value-format="YYYY-MM-DD"
-                clearable
+                disabled
                 v-model="rentalForm.contractDataA.tenantTimeEnd"
                 placeholder="请输入租期结束时间"
               />
             </el-form-item>
             <el-form-item label="每套租金" prop="contractDataA.tenantRent">
-              <el-input
+              <el-input-number
+                :min="0"
+                :max="1000000"
                 v-model="rentalForm.contractDataA.tenantRent"
                 placeholder="请输入每套租金"
+                :disabled="currentStep > 0"
               />
             </el-form-item>
             <el-form-item label="每套物业费" prop="contractDataA.tenantDeposit">