After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 792 B |
After Width: | Height: | Size: 2.3 KiB |
@ -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> |