首页延租办理完成

src/views/components/RenewalDialog.vue

@@ -53,7 +53,7 @@
         >
           <el-table-column
             prop="checkOutDate"
-            label="续期申请时间"
+            label="延租申请时间"
             :show-overflow-tooltip="true"
             align="center"
           ></el-table-column>
@@ -108,7 +108,7 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column prop="status" label="续期至" align="center">
+          <el-table-column prop="status" label="延租至" align="center">
             <template slot-scope="scope">
               {{ scope.row.renewalEndDate }}
             </template>
@@ -128,7 +128,7 @@
                   scope.row.state === "0"
                     ? "待办理"
                     : scope.row.state === "1"
-                    ? "已完成续期"
+                    ? "已完成延租"
                     : ""
                 }}
               </span>
@@ -156,22 +156,16 @@
         @pagination="getList"
       />
     </el-row>
-  
   </div>
 </template>
 
 <script>
-import { listRenewRec, handleRenewal } from "@/api/mz/rec";
+import { listRenewRec } from "@/api/mz/rec";
 export default {
   name: "CommonReminder",
   props: {},
   data() {
     return {
-      openRenew: false, // 续期办理弹框
-      renewForm: {
-        renewalId: "", // 续期ID
-        remark: "", // 备注说明
-      },
       renewInfo: {},
       queryParams: {
         pageNum: 1,
@@ -193,17 +187,7 @@ export default {
       try {
         const response = await listRenewRec(this.queryParams);
         if (response.code === 200) {
-          const currentDate = new Date();
-          const processedData = response.rows.map((item) => {
-            const checkOutDate = new Date(item.checkOutDate);
-            if (checkOutDate > currentDate) {
-              item.status = "待办理";
-            } else {
-              item.status = "已超期";
-            }
-            return item;
-          });
-          this.tableData = processedData;
+          this.tableData = response.rows;
           this.total = response.total;
         }
       } catch (error) {}
@@ -213,25 +197,9 @@ export default {
     },
     handleAction(row) {
       console.log("row::", row);
-      this.$emit("close");
-      this.openRenew = true; // 打开续期办理弹框
       this.renewInfo = row;
-      this.renewForm.renewalId = row.renewalId;
-    },
-     handleRenewSubmit() {
-      handleRenewal(this.renewForm)
-        .then((res) => {
-          console.log("res", res);
-          this.$message({
-            message: "续期办理成功",
-            type: "success",
-          });
-          this.openRenew = false;
-          this.getList();
-        })
-        .catch((err) => {
-          this.$message.error(err.message || "操作失败");
-        });
+      this.$emit("openRenewl");
+      this.$emit("update-renew-form", this.renewInfo);
     },
   },
 };

src/views/index.vue

@@ -234,10 +234,18 @@
       top="5vh"
       append-to-body
     >
-      <RenewalDialog @close="renewalVisible = !renewalVisible;openRenew=true " />
+      <RenewalDialog
+        ref="renewalDialogRef"
+        @close="renewalVisible = !renewalVisible"
+        @update-renew-form="updateRenewForm"
+        @openRenewl="
+          openRenew = true;
+          renewForm.remark = null;
+        "
+      />
     </el-dialog>
-      <!-- 续期办理弹框 -->
-    <el-dialog title="续期办理" :visible.sync="openRenew" width="55%">
+    <!-- 延租办理弹框 -->
+    <el-dialog title="延租办理" :visible.sync="openRenew" width="55%">
       <el-form :model="renewForm" ref="renewForm" label-width="100px">
         <el-row :gutter="20">
           <el-col :span="8" class="mb-10"
@@ -260,10 +268,10 @@
             <div class="line"></div>
           </el-col>
           <el-col :span="8" class="mb-10"
-            >申请续期时间：{{ renewInfo.renewalApplyTime }}</el-col
+            >申请延租时间：{{ renewInfo.renewalApplyTime }}</el-col
           >
           <el-col :span="8" class="mb-10"
-            >申请续期至：{{ renewInfo.renewalEndDate }}</el-col
+            >申请延租至：{{ renewInfo.renewalEndDate }}</el-col
           >
 
           <el-col :span="8" class="mb-10"
@@ -278,10 +286,10 @@
             }}</el-col
           >
           <el-col :span="8" class="mb-10"
-            >续期房间：{{ renewInfo.renewalRoom }}</el-col
+            >延租房间：{{ renewInfo.renewalRoom }}</el-col
           >
           <el-col :span="16" class="mb-10">
-            签订续期合同：
+            签订延租合同：
             <span
               :class="{
                 'waiting-sign': renewInfo.employState == '1',
@@ -339,7 +347,7 @@ import {
   listCheckoutAlert,
 } from "@/api/residence/checkout";
 import { checkInReservation } from "@/api/recs";
-import { listRenewRec } from "@/api/mz/rec";
+import { listRenewRec, handleRenewal } from "@/api/mz/rec";
 
 import * as Echarts from "echarts";
 import CommonTitle from "./components/CommonTitle.vue";
@@ -545,9 +553,9 @@ export default {
       releaseTableData: [],
       releaseVisible: false,
       renewalVisible: false, // 延租提醒
-      openRenew: false, // 续期办理弹框
+      openRenew: false, // 延租办理弹框
       renewForm: {
-        renewalId: "", // 续期ID
+        renewalId: "", // 延租ID
         remark: "", // 备注说明
       },
       renewInfo: {},
@@ -790,6 +798,30 @@ export default {
         });
       }
     },
+    updateRenewForm(renewInfo) {
+      this.renewInfo = renewInfo;
+      this.renewForm.renewalId = renewInfo.renewalId;
+    },
+    handleRenewSubmit() {
+      console.log("this.renewForm", this.renewForm);
+
+      handleRenewal(this.renewForm)
+        .then((res) => {
+          console.log("res", res);
+          this.$message({
+            message: res.msg,
+            type: "success",
+          });
+          this.openRenew = false;
+
+          if (this.$refs.renewalDialogRef) {
+            this.$refs.renewalDialogRef.getList();
+          }
+        })
+        .catch((err) => {
+          this.$message.error(err.msg || "操作失败");
+        });
+    },
   },
 };
 </script>
@@ -998,4 +1030,17 @@ export default {
 ::v-deep .colItem .el-col-5 {
   width: 19.766667%;
 }
+.line {
+  margin: 30px 0;
+  height: 2px;
+  border-top: 1px solid transparent;
+  background: linear-gradient(white, white) padding-box,
+    repeating-linear-gradient(-45deg, #ccc 0, #ccc 3px, white 0, white 5px);
+}
+.waiting-sign {
+  color: #fa9e0a;
+}
+.signed {
+  color: #08b3b3;
+}
 </style>