fix1993：首页续期办理

src/views/components/RenewalDialog.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+      <el-form-item label="姓名" prop="graduateName">
+        <el-input
+          v-model="queryParams.graduateName"
+          placeholder="请输入姓名"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="手机号" prop="graduateTelphone">
+        <el-input
+          v-model="queryParams.graduateTelphone"
+          placeholder="请输入手机号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="身份证号" prop="graduateIdCard">
+        <el-input
+          v-model="queryParams.graduateIdCard"
+          placeholder="请输入身份证号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+        >
+          搜索
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+        :header-cell-style="{ backgroundColor: '#F5F7FA' }"
+        :cell-style="{ color: '#303133' }"
+      >
+        <el-table-column
+          :data="tableData"
+          border
+          style="width: 100%"
+          :header-cell-style="{ backgroundColor: '#F5F7FA' }"
+          :cell-style="{ color: '#303133' }"
+        >
+          <el-table-column
+            prop="checkOutDate"
+            label="续期申请时间"
+            :show-overflow-tooltip="true"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            label="入住房间"
+            :show-overflow-tooltip="true"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <span
+                >{{ scope.row.apartmentName }}/{{ scope.row.buildingName }}/{{
+                  scope.row.unitName
+                }}/{{ scope.row.houseName }}/{{ scope.row.roomTypeName }}</span
+              >
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="graduateName"
+            label="姓名"
+            :show-overflow-tooltip="true"
+            align="center"
+          ></el-table-column>
+          <el-table-column label="性别" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.gender === 1 ? "男" : "女" }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="telephone"
+            label="手机号"
+            :show-overflow-tooltip="true"
+            align="center"
+          ></el-table-column>
+          <el-table-column
+            prop="idCard"
+            label="身份证号"
+            align="center"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column prop="status" label="工作状态" align="center">
+            <template slot-scope="scope">
+              <span>
+                {{
+                  scope.row.employState === "0"
+                    ? "求职中"
+                    : scope.row.employState === "1"
+                    ? "已就业"
+                    : scope.row.employState === "2"
+                    ? "已创业"
+                    : "未知"
+                }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="续期至" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.renewalEndDate }}
+            </template>
+          </el-table-column>
+          <el-table-column label="办理状态" prop="state" align="center">
+            <template slot-scope="scope">
+              <span
+                :style="
+                  scope.row.state === '0'
+                    ? 'color: #F7BA2A'
+                    : scope.row.state === '1'
+                    ? 'color: #08b3b3'
+                    : ''
+                "
+              >
+                {{
+                  scope.row.state === "0"
+                    ? "待办理"
+                    : scope.row.state === "1"
+                    ? "已完成续期"
+                    : ""
+                }}
+              </span>
+            </template>
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="操作 " align="center">
+          <template slot-scope="scope">
+            <el-button
+              type="primary"
+              size="mini"
+              @click="handleAction(scope.row)"
+              v-hasPermi="['rec:renewal:handle']"
+            >
+              延租办理
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-row>
+  
+  </div>
+</template>
+
+<script>
+import { listRenewRec, handleRenewal } from "@/api/mz/rec";
+export default {
+  name: "CommonReminder",
+  props: {},
+  data() {
+    return {
+      openRenew: false, // 续期办理弹框
+      renewForm: {
+        renewalId: "", // 续期ID
+        remark: "", // 备注说明
+      },
+      renewInfo: {},
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        graduateName: "",
+        graduateTelphone: "",
+        graduateIdCard: "",
+      },
+      tableData: [],
+      total: 0,
+    };
+  },
+  created() {},
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    async getList() {
+      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.total = response.total;
+        }
+      } catch (error) {}
+    },
+    handleQuery() {
+      this.getList();
+    },
+    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 || "操作失败");
+        });
+    },
+  },
+};
+</script>

src/views/index.vue

@@ -53,7 +53,7 @@
                 @click="handleClick(item.url, item.id)"
               >
                 <el-image
-                  style="width: 21px; height: 28px; margin-right: 8px"
+                  style="width: 21px; margin-right: 8px"
                   :src="item.icon"
                 ></el-image>
 
@@ -130,10 +130,7 @@
                 class="el-flex el-flex-center el-flex-y-center statistic-item"
                 :style="{ backgroundColor: item.color }"
               >
-                <el-image
+                <el-image style="height: 23px" :src="item.icon"></el-image>
-                  style=" height: 23px;  "
-                  :src="item.icon"
-                ></el-image>
                 <div
                   class="el-flex el-flex-column el-flex-center el-flex-y-center info"
                 >
@@ -205,6 +202,18 @@
         </div>
       </el-col>
     </el-row>
+
+    <!-- 入住预约弹框 -->
+    <el-dialog
+      :title="'入住预约'"
+      :visible.sync="reservationVisible"
+      v-if="reservationVisible"
+      width="1000px"
+      top="5vh"
+      append-to-body
+    >
+      <CommonReminder @close="reservationVisible = !reservationVisible" />
+    </el-dialog>
     <!-- 退房提醒弹框 -->
     <el-dialog
       :title="'退房提醒'"
@@ -216,17 +225,95 @@
     >
       <CheckOutDialog @close="visible = !visible" />
     </el-dialog>
-
+    <!-- 延租提醒弹框 -->
-    <!-- 入住预约弹框 -->
     <el-dialog
-      :title="'入住预约'"
+      :title="'延租提醒'"
-      :visible.sync="reservationVisible"
+      :visible.sync="renewalVisible"
-      v-if="reservationVisible"
+      v-if="renewalVisible"
       width="1000px"
       top="5vh"
       append-to-body
     >
-      <CommonReminder @close="reservationVisible = !reservationVisible" />
+      <RenewalDialog @close="renewalVisible = !renewalVisible;openRenew=true " />
+    </el-dialog>
+      <!-- 续期办理弹框 -->
+    <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"
+            >姓名{{ renewInfo.graduateName }}</el-col
+          >
+          <el-col :span="8" class="mb-10"
+            >性别：{{ renewInfo.gender == 1 ? "男" : "女" }}</el-col
+          >
+          <el-col :span="8" class="mb-10"
+            >手机号：{{ renewInfo.telephone }}</el-col
+          >
+
+          <el-col :span="8" class="mb-10"
+            >身份证：{{ renewInfo.idCard }}</el-col
+          >
+          <el-col :span="8" class="mb-10"
+            >当前入住房间：{{ renewInfo.renewalRoom }}</el-col
+          >
+          <el-col :span="24">
+            <div class="line"></div>
+          </el-col>
+          <el-col :span="8" class="mb-10"
+            >申请续期时间：{{ renewInfo.renewalApplyTime }}</el-col
+          >
+          <el-col :span="8" class="mb-10"
+            >申请续期至：{{ renewInfo.renewalEndDate }}</el-col
+          >
+
+          <el-col :span="8" class="mb-10"
+            >工作状态：{{
+              renewInfo.employState === "0"
+                ? "求职中"
+                : renewInfo.employState === "1"
+                ? "已就业"
+                : renewInfo.employState === "2"
+                ? "已创业"
+                : "未知"
+            }}</el-col
+          >
+          <el-col :span="8" class="mb-10"
+            >续期房间：{{ renewInfo.renewalRoom }}</el-col
+          >
+          <el-col :span="16" class="mb-10">
+            签订续期合同：
+            <span
+              :class="{
+                'waiting-sign': renewInfo.employState == '1',
+                signed: renewInfo.employState != '1',
+              }"
+            >
+              {{
+                renewInfo.employState == "1"
+                  ? "等待签订(需毕业生从微信小程序短确认签订)"
+                  : "已签订"
+              }}
+            </span>
+          </el-col>
+
+          <!-- 备注说明 -->
+          <el-col :span="24" class="mb-10">
+            <el-form-item label="备注说明" prop="remark">
+              <el-input
+                type="textarea"
+                v-model="renewForm.remark"
+                placeholder="请输入备注说明"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8" class="mb-10"></el-col>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleRenewSubmit">确 定</el-button>
+      </span>
     </el-dialog>
     <!-- 释放房源提醒弹框 -->
     <el-dialog
@@ -247,14 +334,19 @@
 </template>
 
 <script>
-import { listWaitingReleaseRooms,listCheckoutAlert } from "@/api/residence/checkout";
+import {
-import {checkInReservation} from "@/api/recs";
+  listWaitingReleaseRooms,
+  listCheckoutAlert,
+} from "@/api/residence/checkout";
+import { checkInReservation } from "@/api/recs";
+import { listRenewRec } from "@/api/mz/rec";
 
 import * as Echarts from "echarts";
 import CommonTitle from "./components/CommonTitle.vue";
 import CommonReminder from "./components/CommonReminder.vue";
 import CheckOutDialog from "./components/CheckOutDialog.vue";
 import ReleaseRoomDia from "./components/ReleaseRoomDia.vue";
+import RenewalDialog from "./components/RenewalDialog.vue";
 export default {
   name: "Index",
   components: {
@@ -262,6 +354,7 @@ export default {
     CommonReminder,
     CheckOutDialog,
     ReleaseRoomDia,
+    RenewalDialog,
   },
   data() {
     return {
@@ -273,7 +366,7 @@ export default {
         {
           id: 1,
           label: "入住办理",
-          icon: require("../assets/images/antFill-phone.png"),
+          icon: require("../assets/images/fa-university.png"),
           color: "#FBD5D5",
           url: "/residence/check_in",
         },
@@ -286,8 +379,8 @@ export default {
         },
         {
           id: 3,
-          label: "入住预约",
+          label: "预约记录",
-          icon: require("../assets/images/antFill-phone.png"),
+          icon: require("../assets/images/fa5-address-card-fas.png"),
           color: "#FBEDC8",
         },
         // {
@@ -298,14 +391,15 @@ export default {
         {
           id: 4,
           label: "退房提醒",
-          icon: require("../assets/images/antFill-phone.png"),
+          icon: require("../assets/images/fas fa-sign-out-alt.png"),
           color: "#FDDDF1",
         },
         {
           id: 5,
-          label: "续期提醒",
+          label: "延租提醒",
           icon: require("../assets/images/fa-history.png"),
           color: "#FBEDC8",
+          count: "",
         },
         {
           id: 6,
@@ -317,20 +411,28 @@ export default {
         {
           id: 7,
           label: "水电预警",
-          icon: require("../assets/images/fa-gavel.png"),
+          icon: require("../assets/images/iconPark-water.png"),
           color: "#FDE7ED ",
           count: 0,
         },
+        // 居住率预警
         {
           id: 8,
-          label: "报修",
+          label: "居住率预警",
-          icon: require("../assets/images/fa-gavel.png"),
+          icon: require("../assets/images/fas fa-exclamation.png"),
           color: "#FBEDC8",
+          count: 0,
         },
         {
           id: 9,
+          label: "报修",
+          icon: require("../assets/images/fas fa-cut.png"),
+          color: "#FBEDC8",
+        },
+        {
+          id: 10,
           label: "报事",
-          icon: require("../assets/images/fa-gavel.png"),
+          icon: require("../assets/images/fa-envelope-square.png"),
           color: "#CFFFDC",
           count: 0,
         },
@@ -442,6 +544,13 @@ export default {
       // 释放房源列表
       releaseTableData: [],
       releaseVisible: false,
+      renewalVisible: false, // 延租提醒
+      openRenew: false, // 续期办理弹框
+      renewForm: {
+        renewalId: "", // 续期ID
+        remark: "", // 备注说明
+      },
+      renewInfo: {},
     };
   },
   mounted() {
@@ -455,8 +564,9 @@ export default {
   },
   created() {
     this.getlistWaitingReleaseRooms();
-    this.getReservationList()
+    this.getReservationList();
-    this.getCheckoutAlertList()
+    this.getCheckoutAlertList();
+    this.getRenewRecList();
   },
   methods: {
     goTarget(href) {
@@ -470,13 +580,16 @@ export default {
         this.$router.push(url);
       }
       if (id === 4) {
-        this.visible = !this.visible; // 显示遮罩层
+        this.visible = !this.visible;
       }
       if (id === 3) {
-        this.reservationVisible = !this.reservationVisible; // 显示遮罩层
+        this.reservationVisible = !this.reservationVisible;
       }
       if (id === 6) {
-        this.releaseVisible = !this.releaseVisible; // 显示遮罩层
+        this.releaseVisible = !this.releaseVisible;
+      }
+      if (id === 5) {
+        this.renewalVisible = !this.renewalVisible;
       }
     },
     // 设置当前激活的标签
@@ -630,6 +743,21 @@ export default {
         }
       } catch (error) {}
     },
+    // 延租提醒
+    async getRenewRecList() {
+       const response = await listRenewRec(this.queryParams);
+      if (response.code === 200) {
+        this.workbenchItems = this.workbenchItems.map((item) => {
+          if (item.id === 5) {
+            return {
+              ...item,
+              count: response.total,
+            };
+          }
+          return item;
+        });
+      }
+    },
     // 释放房源列表
     async getlistWaitingReleaseRooms() {
       console.log("zhixing");
@@ -661,8 +789,7 @@ export default {
           return item;
         });
       }
-    }
+    },
-
   },
 };
 </script>