elink-star
/
epmet-apartment-pc
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

入住办理接口联调

wyx
mk 3 months ago
parent
ad145cfab1
commit
805080bd1e
2 changed files with 276 additions and 167 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      src/api/residence/checkin.js
  2. 401
      src/views/residence/checkIn/index.vue

42
src/api/residence/checkin.js
View File

@ -0,0 +1,42 @@
import request from "@/utils/request";
// 查询居住人信息
export function getResidentInfo(query) {
return request({
url: "/mz/graduate/selectMzGraduateInfo",
method: "get",
params: query,
});
}
// 获取毕业生信息
export function selectMzGraduateInfo(query) {
return request({
url: "/mz/graduate/selectMzGraduateInfo",
method: "get",
params: query,
});
}
// 【核验信息】更新入住时间和退房时间
export function updateMzGraduateInfo(data) {
return request({
url: "/mz/choose/edit",
method: "put",
data: data,
});
}
// 【核验信息】生成入住记录
export function createMzGraduateInfo(data) {
return request({
url: "/mz/checkin/updateOrSave",
method: "post",
data: data,
});
}
// 【入住办理】毕业生入住记录回显
export function getCheckInRecInfo(query) {
return request({
url: "/mz/checkin/getCheckInRecInfo",
method: "get",
params: query,
});
}

401
src/views/residence/checkIn/index.vue
View File

@ -9,112 +9,80 @@
<div>
<!-- 入住流程 -->
<div class="single el-flex el-flex-space-around">
<div
class="el-flex el-flex-y-center"
v-for="(item, index) in dataList"
:key="index"
>
<div
class="tit el-flex el-flex-y-center model"
:style="{ backgroundColor: item.bgColor }"
>
<el-image
style="height: 28px; margin-right: 13px"
:src="item.imageSrc"
></el-image
><span>{{ item.title }}</span>
<div class="el-flex el-flex-y-center" v-for="(item, index) in dataList" :key="index">
<div class="tit el-flex el-flex-y-center model" :style="{ backgroundColor: item.bgColor }">
<el-image style="height: 28px; margin-right: 13px" :src="item.imageSrc"></el-image><span>{{ item.title
}}</span>
<div class="checkout-process-container">
<el-image
class="el-flex el-flex-y-center el-flex-center checkout-process"
style="height: 26px"
:src="susIcon"
v-if="stepCompleted[index]"
></el-image>
<el-image class="el-flex el-flex-y-center el-flex-center checkout-process" style="height: 26px"
:src="susIcon" v-if="stepCompleted[index]"></el-image>
</div>
</div>
<div class="arrow-container">
<el-image
class="el-flex el-flex-y-center el-flex-center"
style="height: 28px"
:src="stepCompleted[index] ? arrowActive : arrow"
v-if="index < dataList.length - 1"
></el-image>
<el-image class="el-flex el-flex-y-center el-flex-center" style="height: 28px"
:src="stepCompleted[index] ? arrowActive : arrow" v-if="index < dataList.length - 1"></el-image>
</div>
</div>
</div>
<!-- 核验信息 -->
<div class="cont">
<el-form
ref="checnInForm"
:model="checnInForm"
:rules="rules"
size="small"
:inline="true"
v-if="currentStep === 1"
>
<el-form ref="checnInForm" :model="checnInForm" :rules="rules" size="small" :inline="true"
v-if="currentStep === 1">
<div class="el-my-5">
<CommonTitle>核验信息</CommonTitle>
</div>
<el-row>
<el-form-item label="身份证" prop="id">
<el-input
v-model="checnInForm.id"
placeholder="请输入用户名称"
clearable
style="width: 240px"
/>
<el-form-item label="身份证" label-width="80px" prop="idCard">
<el-input v-model="checnInForm.idCard" placeholder="请输入用户名称" clearable style="width: 240px" />
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input
v-model="checnInForm.id"
placeholder="请输入手机号"
clearable
style="width: 240px"
/>
<el-form-item label="手机号" label-width="80px" prop="phone">
<el-input v-model="checnInForm.phone" placeholder="请输入手机号" clearable style="width: 240px" />
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>查询</el-button
>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
</el-form-item>
</el-row>
<el-form-item class="el-ml-6">
<el-row :gutter="30">
<el-col :span="6"> 姓名：张三 </el-col>
<el-col :span="6"> 性别：女 </el-col>
<el-col :span="6"> 手机号：-01-01 </el-col>
<el-col :span="6">
资格核验：<span style="color: #22cb8c">已通过</span>
<el-row :gutter="50" v-if="Object.keys(userInfo).length > 0">
<el-col :span="8"> 姓名：{{ userInfo.graduateName }} </el-col>
<el-col :span="8"> 性别：{{ userInfo.gender === 1 ? '男' : userInfo.gender === 2 ? '女' : '' }} </el-col>
<el-col :span="8"> 手机号：{{ userInfo.telephone }} </el-col>
<el-col :span="8">
所选房间：{{ userInfo.roomAddressName }}
</el-col>
<el-col :span="6">
所选房间：国信棠樾云邸5号楼1单元805北卧
<el-col :span="8"> 剩余可住天数： {{ userInfo.quotaLeft }}</el-col>
<el-col :span="8"> 本次选房时间：{{ userInfo.createdTime }} </el-col>
<el-col :spam="24">
核验结果：<span style="color: #22cb8c">{{ userInfo.xlhStateName }}</span>
<el-button type="primary" @click="refresh" class="el-mx-2">刷新结果</el-button>
</el-col>
<el-col :span="6"> 本次入住天数： </el-col>
<el-col :span="6"> 剩余可住天数： </el-col>
<el-col :span="6"> 本次选房时间：-01-01 </el-col>
</el-row>
</el-form-item>
<el-form-item label-width="160px" label="毕业生选择入住日期" v-show="Object.keys(userInfo).length > 0">
<el-date-picker v-model="userInfo.checkInTime" type="date" placeholder="选择日期"
:picker-options="startPickerOptions" style="width: 240px" value-format="yyyy-MM-dd"
value="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item label-width="160px" label="毕业生选择退房日期" v-show="Object.keys(userInfo).length > 0">
<el-date-picker v-model="userInfo.checkOutTime" type="date" placeholder="选择日期"
:picker-options="endPickerOptions" style="width: 240px" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-form>
<!-- 物资发放 -->
<el-form size="small">
<div
v-if="currentStep === 2 || currentStep === 3 || currentStep === 4"
>
<el-form size="small" ref="checnInForm" :model="checnInForm" :rules="rules">
<div v-if="currentStep === 2 || currentStep === 3 || currentStep === 4">
<div class="el-my-3">
<CommonTitle>核验信息</CommonTitle>
</div>
<el-form-item label-width="30px">
<el-row :gutter="20">
<el-col :span="8"> 入住房间：420102199001010000 </el-col>
<el-col :span="4"> 姓名：张三 </el-col>
<el-col :span="5"> 性别：女 </el-col>
<el-col :span="6"> 手机号：-01-01 </el-col>
<el-col :span="8"> 入住房间：{{ userInfo.roomAddressName }} </el-col>
<el-col :span="4"> 姓名：{{ userInfo.graduateName }} </el-col>
<el-col :span="5"> 性别：{{ userInfo.gender === 1 ? '男' : '女' }} </el-col>
<el-col :span="6"> 手机号：{{ userInfo.telephone }} </el-col>
</el-row>
</el-form-item>
</div>
@ -123,21 +91,16 @@
<CommonTitle>物资发放</CommonTitle>
</div>
<!-- 是否已发放物资 下拉选择器 -->
<el-form-item label="是否发放物资" prop="isGrant">
<el-select v-model="checnInForm.isGrant" placeholder="请选择">
<el-option label="已发放" value="1"></el-option>
<el-option label="未发放" value="2"></el-option>
<el-form-item label="是否发放物资" prop="supplies">
<el-select v-model="checnInForm.supplies" placeholder="请选择">
<el-option label="已发放" :value="0"></el-option>
<el-option label="未发放" :value="1"></el-option>
</el-select>
</el-form-item>
<!-- 备注说明 -->
<el-form-item label="备注说明" prop="remark">
<el-input
v-model="checnInForm.remark"
placeholder="请输入备注说明"
type="textarea"
clearable
style="width: 240px"
></el-input>
<el-input v-model="checnInForm.remark" placeholder="请输入备注说明" type="textarea" clearable
style="width: 240px"></el-input>
</el-form-item>
</div>
</el-form>
@ -162,48 +125,22 @@
<div class="el-my-3">
<CommonTitle>缴纳履约保证金</CommonTitle>
</div>
<el-row>
<!-- 等待支付按钮 -->
<el-col :span="6">
<el-form-item label="履约保证金">
<!-- 文本按钮 等待支付 -->
<el-button
type="text"
size="mini"
style="margin-left: 10px; color: #f06b6b"
>
等待支付
</el-button>
</el-form-item>
</el-col>
<!-- 已通过线下支付 -->
<el-col :span="6">
<el-form-item>
<el-checkbox v-model="checnInForm.checked"
>已通过线下支付</el-checkbox
>
</el-form-item>
</el-col>
<el-row gutter="50">
<!-- 支付方式 -->
<el-col :span="6">
<el-form-item label="支付方式">
<el-select v-model="checnInForm.isGrant" placeholder="请选择">
<el-option label="支付宝" value="1"></el-option>
<el-option label="微信" value="2"></el-option>
<el-option label="POS机刷卡" value="3"></el-option>
<el-option label="现金支付" value="4"></el-option>
<el-col :span="8">
<el-form-item label="支付方式" label-width="100px">
<el-select v-model="checnInForm.marginType" placeholder="请选择">
<el-option label="支付宝" value="0"></el-option>
<el-option label="微信" value="1"></el-option>
<el-option label="POS机刷卡" value="2"></el-option>
<el-option label="现金支付" value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- 支付金额 -->
<el-col :span="6">
<el-col :span="8">
<el-form-item label="支付金额">
<el-input-number
v-model="checnInForm.actualPay"
@change="handleActualPayChange"
:min="0"
:max="checnInForm.shouldPay"
></el-input-number>
<el-input-number v-model="checnInForm.marginAmount" :min="0"></el-input-number>
</el-form-item>
</el-col>
</el-row>
@ -211,13 +148,8 @@
<!-- 备注说明 -->
<el-form-item label="备注说明" prop="remark">
<el-input
v-model="checnInForm.remark"
placeholder="请输入备注说明"
type="textarea"
clearable
style="width: 240px"
></el-input>
<el-input v-model="checnInForm.remark" placeholder="请输入备注说明" type="textarea" clearable
style="width: 240px"></el-input>
</el-form-item>
</div>
</el-form>
@ -228,14 +160,11 @@
<el-button @click="currentStep === 1 ? handleCancel() : handlePrevStep()">
{{ currentStep === 1 ? "取消" : "上一步" }}
</el-button>
<el-button
type="primary"
@click="
currentStep === dataList.length - 1
? handleReleaseHouse()
: handleNextStep()
"
>
<el-button type="primary" @click="
currentStep === dataList.length - 1
? handleReleaseHouse()
: handleNextStep()
">
{{ currentStep === dataList.length - 1 ? "履约保证金" : "下一步" }}
</el-button>
</div>
@ -244,13 +173,38 @@
<script>
import CommonTitle from "../../components/CommonTitle.vue";
import { getResidentInfo, updateMzGraduateInfo, createMzGraduateInfo, getCheckInRecInfo } from "../../../api/residence/checkin"
export default {
name: "App",
components: {
CommonTitle,
},
data() {
let startDisabledDate = (time) => {
// 获取当前日期，将时分秒毫秒置为 0，确保只比较日期部分
const today = new Date();
today.setHours(0, 0, 0, 0);
const compareDate = new Date(time);
compareDate.setHours(0, 0, 0, 0);
// 禁用非当天的日期
return compareDate.getTime() !== today.getTime();
}
let endDisabledDate = (time) => {
// 获取当前时间戳
const now = new Date();
// 如果存在 checkInTime
if (this.userInfo.checkInTime) {
const checkInDate = new Date(this.userInfo.checkInTime);
// 计算 checkInTime 往后 100 天的日期
const endDate = new Date(checkInDate);
endDate.setDate(endDate.getDate() + this.userInfo.quotaLeft);
// 禁用小于 checkInTime 和大于 checkInTime 往后 100 天的日期
return time < checkInDate || time > endDate;
} else {
// 如果没有 checkInTime，禁用大于当前日期的日期
return time > now;
}
}
return {
// 这里可以定义数据
dataList: [
@ -282,32 +236,37 @@ export default {
],
arrow: require("@/assets/images/arrow_forward.png"),
arrowActive: require("@/assets/images/arrow_forward_a.png"),
checnInForm: {}, //表单参数
//表单参数
checnInForm: {
idCard: "", // 身份证
phone: "", // 手机号
supplies: "", // 是否发放物资
remark: "", // 备注说明
checked: false, // 是否通过线下支付
marginType: "", // 支付方式
marginAmount: 0, // 支付金额
actualPay: 0, // 实际支付
},
// 表单验证规则
rules: {
forceClearReason: [
{ required: true, message: "请选择强制清退原因", trigger: "change" },
],
supplies: [
{ required: true, message: "请选择是否发放物资", trigger: "change" },
]
},
// 显示搜索条件
showSearch: true,
// 退房类型: 1-正常退房 2-强制退房
checkOutType: [
{ label: "正常退房", value: "1" },
{ label: "强制退房", value: "2" },
],
// 强制清退原因
forceClearReason: [
{ label: "入住期间有异常", value: "1" },
{ label: "入住期间有异常", value: "2" },
{ label: "入住期间有异常", value: "3" },
{ label: "入住期间有异常", value: "4" },
],
susIcon: require("@/assets/images/check-circle-fas.png"),
currentStep: 1, // 当前步骤
stepCompleted: this.dataList
? Array(this.dataList.length - 1).fill(false)
: [], // 存储每个步骤的完成状态
userInfo: {},
startPickerOptions: {
disabledDate: startDisabledDate
},
endPickerOptions: {
disabledDate: endDisabledDate
},
timer: null, // 定时器
};
},
methods: {
@ -315,8 +274,27 @@ export default {
goBack() {
this.$router.push({ path: "/" });
},
handleQuery() {
console.log("查询操作");
async handleQuery(refresh) {
try {
const res = await getResidentInfo({
idCard: this.checnInForm.idCard, // 身份证
phone: this.checnInForm.phone, // 手机号
})
if (res.code === 200&&res.data) {
if (refresh === true) {
this.userInfo.xlhState = res.data.xlhState;
return
}
this.userInfo = res.data;
if(this.userInfo.checkInRecId){
this.getCheckInRecInfo()
}
} else {
this.$message.error("查询失败")
}
} catch (error) {
console.log(error);
}
},
handleCancel() {
this.$router.push({ path: "/" });
@ -339,19 +317,100 @@ export default {
// 下一步操作
handleNextStep() {
if (this.currentStep < this.dataList.length) {
this.currentStep++;
console.log("下一步操作", this.currentStep);
if (this.currentStep > 1) {
this.stepCompleted[this.currentStep - 2] = true;
console.log("stepCompleted下::", this.stepCompleted);
if(this.currentStep === 1){
if(!this.userInfo.checkInTime || !this.userInfo.checkOutTime){
this.$message.error('请选择入住时间和退房时间')
return;
}
this.updateMzGraduateInfo(); // 更新时间
this.currentStep++;
this.stepCompleted[0] = true;
this.createMzGraduateInfo()
return;
}
if (this.currentStep == 2) {
this.$refs['checnInForm'].validate(async (valid) => {
if (valid) {
this.createMzGraduateInfo()//提交更新
this.currentStep++;
this.stepCompleted[1] = true;
if(!this.checnInForm.contract){
this.timer = setInterval(() => {
this.getCheckInRecInfo()
}, 5000)
}
return;
}
})
return;
}
if (this.currentStep === 3) {
clearInterval(this.timer)
this.createMzGraduateInfo()//提交更新
this.currentStep++;
this.stepCompleted[2] = true;
return;
}
}
},
// 更新入住时间和退房时间
async updateMzGraduateInfo() {
try {
const res = await updateMzGraduateInfo({
id: this.userInfo.chooseRecId, // 记录Id
checkInDate: this.userInfo.checkInTime, // 入住时间
checkOutDate: this.userInfo.checkOutTime, // 退房时间
})
if (res.code === 200) {
}
} catch (error) {
console.log(error);
}
},
// 毕业生入住记录回显
async getCheckInRecInfo() {
try {
const res = await getCheckInRecInfo({
id: this.userInfo.checkInRecId, // 记录Id
})
if (res.code === 200) {
this.checnInForm = {...this.checnInForm,...res.data};
}
} catch (error) {
console.log(error);
}
},
// 提交更新
async createMzGraduateInfo() {
let parm = {
id: this.userInfo.checkInRecId, // 记录Id
supplies: this.checnInForm.supplies, // 是否发放物资
marginType: this.checnInForm.marginType, // 支付方式
marginAmount: this.checnInForm.marginAmount, // 支付金额
state: this.currentStep === 4 ? '1' : '0',
graduateId: this.userInfo.graduateId, // 毕业生Id
apartmentId: this.userInfo.apartmentId, // 公寓Id
houseId: this.userInfo.houseId, // 房屋Id
roomId: this.userInfo.roomId, // 房间Id
chooseRecId:this.userInfo.chooseRecId, // 选择记录Id
}
try {
const res = await createMzGraduateInfo(parm)
if (res.code === 200) {
console.log(res);
}
} catch (error) {
console.log(error);
}
},
// 完成办理
handleReleaseHouse() {
console.log("完成办理");
this.createMzGraduateInfo()//提交更新
this.$router.back();
},
refresh() {
this.handleQuery(true)
},
},
computed: {
@ -375,26 +434,32 @@ export default {
.tit {
font-size: 20px;
}
.back {
color: #3d81cf;
font-size: 14px;
cursor: pointer;
}
}
.single {
margin-top: 20px;
.tit {
padding: 15px 33px;
border-radius: 4px;
}
.model {
position: relative;
}
}
.cont{
.cont {
height: 100%;
min-height:546px;
min-height: 546px;
}
.checkout-process-container {
// width: 26px;
height: 26px;
@ -411,11 +476,13 @@ export default {
justify-content: center;
align-items: center;
}
.checkout-process {
position: absolute;
top: -5px;
right: -3px;
}
.button-group {
position: fixed;
bottom: 20px;

Write Preview
Loading…
Cancel
Save