You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

235 lines
7.2 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="divBox">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item label="业主id">
<el-input v-model="dataForm.ownerId" placeholder="请输入业主id" clearable></el-input>
</el-form-item>
<el-form-item label="房屋id">
<el-input v-model="dataForm.houseId" placeholder="请输入房屋id" clearable></el-input>
</el-form-item>
<el-form-item label="关联类型">
<el-input v-model="dataForm.relType" placeholder="请输入关联类型" clearable></el-input>
</el-form-item>
<el-form-item label="绑定时间">
<el-date-picker
v-model="dataForm.bindTime"
type="date"
placeholder="选择绑定时间"
style="width: 170px;"
clearable
></el-date-picker>
</el-form-item>
<el-form-item label="解绑时间">
<el-date-picker
v-model="dataForm.unbindTime"
type="date"
placeholder="选择解绑时间"
style="width: 170px;"
clearable
></el-date-picker>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="dataForm.remark" placeholder="请输入备注" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button @click="resetForm()">重置</el-button>
<el-button v-hasPermi="['autogencode:pmownerhouserel:save']" type="primary" @click="addOrUpdateHandle()">新增数据</el-button>
<el-button v-hasPermi="['autogencode:pmownerhouserel:delete']" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
</el-form-item>
</el-form>
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
</el-table-column>
<el-table-column
prop="id"
header-align="center"
align="center"
label="id">
</el-table-column>
<el-table-column
prop="ownerId"
header-align="center"
align="center"
label="业主id">
</el-table-column>
<el-table-column
prop="houseId"
header-align="center"
align="center"
label="房屋id">
</el-table-column>
<el-table-column
prop="relType"
header-align="center"
align="center"
label="关联类型">
</el-table-column>
<el-table-column
prop="bindTime"
header-align="center"
align="center"
label="绑定时间">
</el-table-column>
<el-table-column
prop="unbindTime"
header-align="center"
align="center"
label="解绑时间">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<el-button v-hasPermi="['autogencode:pmownerhouserel:delete']" type="text" size="small" @click="deleteHandle(scope.row.id)" style="color: #f56c6c;">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 表单弹窗, 新增数据和修改数据 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from './pmownerhouserel-add-and-update'
import * as api from '@/api/pmownerhouserel.js'
export default {
data () {
return {
dataForm: {
ownerId: '',
houseId: '',
relType: '',
bindTime: '',
unbindTime: '',
remark: ''
},
// 重置表单
resetForm() {
this.dataForm = {
ownerId: '',
houseId: '',
relType: '',
bindTime: '',
unbindTime: '',
remark: ''
}
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate
},
activated () {
this.getDataList()
},
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
// 根据后端PmOwnerHouseRelController和PageParamRequest的期望格式构建参数
const params = {
page: this.pageIndex,
limit: this.pageSize
}
// 将查询条件添加到参数中
if (this.dataForm.ownerId) params.ownerId = this.dataForm.ownerId;
if (this.dataForm.houseId) params.houseId = this.dataForm.houseId;
if (this.dataForm.relType) params.relType = this.dataForm.relType;
if (this.dataForm.bindTime) params.bindTime = this.dataForm.bindTime;
if (this.dataForm.unbindTime) params.unbindTime = this.dataForm.unbindTime;
if (this.dataForm.remark) params.remark = this.dataForm.remark;
api.pmownerhouserelListApi(params).then(res => {
this.dataListLoading = false
this.dataList = res.list || [];
this.totalPage = res.total;
}).catch(e => {
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle (val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
// 删除处理(支持单个删除和批量删除)
deleteHandle (id) {
let ids = []
let idText = ''
// 如果传入了单个id参数则为单个删除
if (id) {
ids = [id]
idText = id
} else {
// 否则为批量删除
ids = this.dataListSelections.map(item => {
return item.id
})
idText = ids.join(',')
}
this.$confirm(`确定进行删除操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 调用批量删除API
api.pmownerhouserelDeleteApi(ids).then(res => {
this.$message.success('删除成功')
this.getDataList()
})
})
},
}
}
</script>