Browse Source

fix1993:首页续期办理

wyx
wangyx 3 months ago
parent
commit
84df6edecd
  1. BIN
      src/assets/images/fa-envelope-square.png
  2. BIN
      src/assets/images/fa-university.png
  3. BIN
      src/assets/images/fa5-address-card-fas.png
  4. BIN
      src/assets/images/fas fa-cut.png
  5. BIN
      src/assets/images/fas fa-exclamation.png
  6. BIN
      src/assets/images/fas fa-sign-out-alt.png
  7. BIN
      src/assets/images/iconPark-water.png
  8. 238
      src/views/components/RenewalDialog.vue
  9. 183
      src/views/index.vue

BIN
src/assets/images/fa-envelope-square.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/fa-university.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/assets/images/fa5-address-card-fas.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/images/fas fa-cut.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/images/fas fa-exclamation.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/fas fa-sign-out-alt.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 792 B

BIN
src/assets/images/iconPark-water.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

238
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>

183
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
style=" height: 23px; "
:src="item.icon"
></el-image>
<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="'入住预约'"
:visible.sync="reservationVisible"
v-if="reservationVisible"
:title="'延租提醒'"
:visible.sync="renewalVisible"
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 {
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: "入住预约",
icon: require("../assets/images/antFill-phone.png"),
label: "预约记录",
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: "报修",
icon: require("../assets/images/fa-gavel.png"),
label: "居住率预警",
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.getCheckoutAlertList()
this.getReservationList();
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>

Loading…
Cancel
Save