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