4 changed files with 644 additions and 137 deletions
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<el-dialog |
|||
:title="dialogTitle" |
|||
:visible.sync="visible" |
|||
width="1000px" |
|||
top="5vh" |
|||
append-to-body |
|||
> |
|||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true"> |
|||
<el-form-item label="用户名称" prop="userName"> |
|||
<el-input |
|||
v-model="queryParams.userName" |
|||
placeholder="请输入用户名称" |
|||
clearable |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="手机号码" prop="phonenumber"> |
|||
<el-input |
|||
v-model="queryParams.phonenumber" |
|||
placeholder="请输入手机号码" |
|||
clearable |
|||
@keyup.enter.native="handleQuery" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="身份证号" prop="idNumber"> |
|||
<el-input |
|||
v-model="queryParams.idNumber" |
|||
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 |
|||
prop="checkOutTime" |
|||
label="退房时间" |
|||
:show-overflow-tooltip="true" |
|||
align="center" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="roomName" |
|||
label="入住房间" |
|||
:show-overflow-tooltip="true" |
|||
align="center" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="userName" |
|||
label="姓名" |
|||
:show-overflow-tooltip="true" |
|||
align="center" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="sex" |
|||
label="性别" |
|||
align="center" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="phonenumber" |
|||
label="手机号码" |
|||
:show-overflow-tooltip="true" |
|||
align="center" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="idNumber" |
|||
label="身份证号" |
|||
align="center" |
|||
:show-overflow-tooltip="true" |
|||
></el-table-column> |
|||
<el-table-column prop="status" label="状态" align="center"> |
|||
<template slot-scope="scope"> |
|||
<!-- 办理完成(待释放房源) --> |
|||
<el-tag v-if="scope.row.status === '办理完成'" type="warning"> |
|||
办理完成 |
|||
</el-tag> |
|||
<!-- 办理中(待退还保证金) --> |
|||
<el-tag v-if="scope.row.status === '办理中'" type="info"> |
|||
办理中 |
|||
</el-tag> |
|||
<!-- 待办理(3天) --> |
|||
<el-tag v-if="scope.row.status === '待办理'" type="primary"> |
|||
待办理 |
|||
</el-tag> |
|||
<!-- 已超期 --> |
|||
<el-tag v-if="scope.row.status === '已超期'" type="danger"> |
|||
已超期 |
|||
</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作 " align="center"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
v-for="(action, index) in actions" |
|||
:key="index" |
|||
:type="action.type" |
|||
size="mini" |
|||
@click="handleAction(action, scope.row)" |
|||
v-if="action.condition(scope.row)" |
|||
> |
|||
{{ action.label }} |
|||
</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> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'CommonReminder', |
|||
props: { |
|||
dialogTitle: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
visible: { |
|||
type: Boolean, |
|||
required: true |
|||
}, |
|||
queryParams: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
tableData: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
total: { |
|||
type: Number, |
|||
required: true |
|||
}, |
|||
actions: { |
|||
type: Array, |
|||
required: true |
|||
} |
|||
}, |
|||
methods: { |
|||
handleQuery() { |
|||
this.$emit('handleQuery'); |
|||
}, |
|||
handleAction(action, row) { |
|||
this.$emit('handleAction', action, row); |
|||
}, |
|||
getList() { |
|||
this.$emit('getList'); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue