refactor(zf): 重构房屋出租流程

- 添加 ElTimePicker 组件类型声明
- 实现房屋出租功能，包括合同签署和退租流程
- 优化租赁信息表单，使用日期选择器和数字输入框
- 移除不必要的测试代码和冗余功能

components.d.ts

@@ -41,6 +41,7 @@ declare module 'vue' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']

src/views/zf/fwxq.vue

@@ -15,8 +15,6 @@ import {
   ElMain,
   ElMessage,
   ElOption,
-  ElRadio,
-  ElRadioGroup,
   ElRow,
   ElSelect,
   ElStep,
@@ -25,7 +23,7 @@ import {
 } from 'element-plus'
 import { ArrowLeft, Camera, Cpu, FileText, Home, MapPin, Plus, User, X } from 'lucide-vue-next'
 import { useRoute, useRouter } from 'vue-router'
-import { clientGet } from '@/utils/request.ts'
+import { clientGet, clientPost } from '@/utils/request.ts'
 
 const router = useRouter()
 const route = useRoute()
@@ -762,12 +760,26 @@ const handleCloseRentalDialog = () => {
 const submitRental = async () => {
   submitting.value = true
   try {
-    await new Promise((resolve) => setTimeout(resolve, 2000))
-    propertyInfo.value.status = '已租'
-    ElMessage.success('房屋出租成功！')
+    if (propertyInfo.value.assetType === '公租房') {
+      rentalForm.contractData = rentalForm.contractDataA
+    } else if (propertyInfo.value.assetType === '厂房') {
+      rentalForm.contractData = rentalForm.contractDataB
+    } else if (propertyInfo.value.assetType === '创新创业基地') {
+      rentalForm.contractData = rentalForm.contractDataC
+    }
+    const res = await clientPost<typeof rentalForm, BaseResponse>(
+      '/acontractInfo/signContract',
+      rentalForm,
+    )
+    if (res.code !== 200) {
+      ElMessage.error(res.msg)
+      return
+    }
+    ElMessage.success(res.msg)
     handleCloseRentalDialog()
     await getData()
   } catch (error) {
+    console.error(error)
     ElMessage.error('出租失败，请重试')
   } finally {
     submitting.value = false
@@ -777,25 +789,31 @@ const submitRental = async () => {
 const confirmTerminate = async () => {
   terminating.value = true
   try {
-    await new Promise((resolve) => setTimeout(resolve, 1500))
-    propertyInfo.value.status = '空闲'
-    ElMessage.success('退租成功！')
+    const res = await clientGet<
+      {
+        houseId: string
+      },
+      BaseResponse
+    >('/acontractInfo/returnRent', {
+      params: {
+        houseId: propertyInfo.value.id,
+      },
+    })
+    if (res.code !== 200) {
+      ElMessage.error(res.msg)
+      return
+    }
+    ElMessage.success(res.msg)
     showTerminateDialog.value = false
     await getData()
   } catch (error) {
+    console.error(error)
     ElMessage.error('退租失败，请重试')
   } finally {
     terminating.value = false
   }
 }
 
-const calculateEndDate = (startDate: string, term: string) => {
-  const start = new Date(startDate)
-  const months = term === '6个月' ? 6 : term === '1年' ? 12 : term === '2年' ? 24 : 36
-  start.setMonth(start.getMonth() + months)
-  return start.toISOString().split('T')[0]
-}
-
 const getData = async () => {
   try {
     loading.value = true
@@ -885,14 +903,9 @@ const getData = async () => {
 onMounted(() => {
   getData()
 })
-
-const test = () => {
-  console.log(rentalForm)
-}
 </script>
 
 <template>
-  <div @click="test">测试</div>
   <el-container class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
     <el-button
       type="primary"
@@ -1142,7 +1155,7 @@ const test = () => {
               <el-col :xs="24" :sm="12" :md="8">
                 <div class="mb-4">
                   <label class="block text-sm font-medium text-gray-700 mb-1">合同状态</label>
-                  <el-tag type="success">{{ contractInfo.contractStatus }}</el-tag>
+                  <div class="text-lg text-gray-800">{{ contractInfo.contractStatus }}</div>
                 </div>
               </el-col>
             </el-row>
@@ -1195,7 +1208,11 @@ const test = () => {
             <el-input v-model="rentalForm.rentalInfo.rentalIdCard" placeholder="请输入身份证号" />
           </el-form-item>
           <el-form-item label="租期开始时间" prop="rentalInfo.rentalTimeStart">
-            <el-input
+            <el-date-picker
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              clearable
               v-model="rentalForm.rentalInfo.rentalTimeStart"
               placeholder="请输入租期开始时间"
             />
@@ -1216,7 +1233,11 @@ const test = () => {
               <el-input v-model="rentalForm.contractDataA.landlordName" placeholder="请输入房东" />
             </el-form-item>
             <el-form-item label="租期开始时间" prop="contractDataA.tenantTimeStart">
-              <el-input
+              <el-date-picker
+                type="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                clearable
                 v-model="rentalForm.contractDataA.tenantTimeStart"
                 placeholder="请输入租期开始时间"
               />
@@ -1225,7 +1246,11 @@ const test = () => {
               <el-input v-model="rentalForm.contractDataA.tenantTime" placeholder="请输入租期" />
             </el-form-item>
             <el-form-item label="租期结束时间" prop="contractDataA.tenantTimeEnd">
-              <el-input
+              <el-date-picker
+                type="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                clearable
                 v-model="rentalForm.contractDataA.tenantTimeEnd"
                 placeholder="请输入租期结束时间"
               />
@@ -1243,7 +1268,7 @@ const test = () => {
               />
             </el-form-item>
             <el-form-item label="押金" prop="contractDataA.tenantDepositAmount">
-              <el-input
+              <el-input-number
                 v-model="rentalForm.contractDataA.tenantDepositAmount"
                 placeholder="请输入押金"
               />
@@ -1365,13 +1390,21 @@ const test = () => {
               />
             </el-form-item>
             <el-form-item label="租赁起始日" prop="contractDataB.leaseStartDate">
-              <el-input
+              <el-date-picker
+                type="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                clearable
                 v-model="rentalForm.contractDataB.leaseStartDate"
                 placeholder="请输入租赁起始日"
               />
             </el-form-item>
             <el-form-item label="租赁终止日" prop="contractDataB.leaseEndDate">
-              <el-input
+              <el-date-picker
+                type="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                clearable
                 v-model="rentalForm.contractDataB.leaseEndDate"
                 placeholder="请输入租赁终止日"
               />
@@ -1512,7 +1545,7 @@ const test = () => {
               />
             </el-form-item>
             <el-form-item label="租赁押金金额（元）" prop="contractDataB.depositAmount">
-              <el-input
+              <el-input-number
                 v-model="rentalForm.contractDataB.depositAmount"
                 placeholder="请输入租赁押金金额（元）"
               />
@@ -1607,13 +1640,21 @@ const test = () => {
               />
             </el-form-item>
             <el-form-item label="租赁起始日" prop="contractDataC.leaseStartDate">
-              <el-input
+              <el-date-picker
+                type="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                clearable
                 v-model="rentalForm.contractDataC.leaseStartDate"
                 placeholder="请输入租赁起始日"
               />
             </el-form-item>
             <el-form-item label="租赁终止日" prop="contractDataC.leaseEndDate">
-              <el-input
+              <el-date-picker
+                type="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                clearable
                 v-model="rentalForm.contractDataC.leaseEndDate"
                 placeholder="请输入租赁终止日"
               />
@@ -1649,7 +1690,7 @@ const test = () => {
               />
             </el-form-item>
             <el-form-item label="租赁保证金金额" prop="contractDataC.depositAmount">
-              <el-input
+              <el-input-number
                 v-model="rentalForm.contractDataC.depositAmount"
                 placeholder="请输入租赁保证金金额"
               />
@@ -1702,38 +1743,6 @@ const test = () => {
           <p><strong>押金：</strong>{{ contractInfo.contractDeposit }} 元</p>
         </div>
       </div>
-      <el-form :model="terminateForm" label-width="120px">
-        <el-form-item label="退租日期">
-          <el-date-picker
-            v-model="terminateForm.terminateDate"
-            type="date"
-            placeholder="请选择退租日期"
-          />
-        </el-form-item>
-        <el-form-item label="退租原因">
-          <el-input
-            v-model="terminateForm.reason"
-            type="textarea"
-            :rows="3"
-            placeholder="请输入退租原因"
-          />
-        </el-form-item>
-        <el-form-item label="押金处理">
-          <el-radio-group v-model="terminateForm.depositHandling">
-            <el-radio label="全额退还">全额退还</el-radio>
-            <el-radio label="部分扣除">部分扣除</el-radio>
-            <el-radio label="全额扣除">全额扣除</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="terminateForm.depositHandling === '部分扣除'" label="扣除金额">
-          <el-input-number
-            v-model="terminateForm.deductAmount"
-            :min="0"
-            :max="contractInfo?.contractDeposit ? parseInt(contractInfo.contractDeposit) : 0"
-          />
-          <span class="ml-2 text-gray-500">元</span>
-        </el-form-item>
-      </el-form>
       <template #footer>
         <div class="flex justify-end gap-2">
           <el-button @click="showTerminateDialog = false">取消</el-button>