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.
crmeb/admin/src/views/pm/complaint/suggestion/index.vue

370 lines
12 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="业主类型">
<el-select v-model="dataForm.ownerType" placeholder="请选择业主类型" clearable style="width: 150px">
<el-option
v-for="dict in dict.type.owner_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="类型">
<el-select v-model="dataForm.csType" placeholder="请选择类型" clearable style="width: 150px">
<el-option
v-for="dict in dict.type.cs_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="dataForm.status" placeholder="请选择状态" clearable style="width: 150px">
<el-option
v-for="dict in dict.type.suggestion_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
<el-button @click="resetForm()">重置</el-button>
<el-button v-hasPermi="['autogencode:pmcomplaintsuggestion:save']" type="primary" @click="addOrUpdateHandle()">新增投诉/建议</el-button>
<el-button v-hasPermi="['autogencode:pmcomplaintsuggestion: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="ownerType"
header-align="center"
align="center"
label="业主类型">
<template slot-scope="scope">
<dict-tag :options="dict.type.owner_type" :value="scope.row.ownerType"/>
</template>
</el-table-column>
<el-table-column
prop="ownerName"
header-align="center"
align="center"
label="业主/租户">
</el-table-column>
<el-table-column
prop="houseName"
header-align="center"
align="center"
label="房屋名称">
</el-table-column>
<el-table-column
prop="csType"
header-align="center"
align="center"
label="类型">
<template slot-scope="scope">
<dict-tag :options="dict.type.cs_type" :value="scope.row.csType"/>
</template>
</el-table-column>
<el-table-column
prop="status"
header-align="center"
align="center"
label="状态">
<template slot-scope="scope">
<dict-tag :options="dict.type.suggestion_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column
prop="csContent"
header-align="center"
align="center"
label="内容"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="submitChannel"
header-align="center"
align="center"
label="提交渠道">
<template slot-scope="scope">
<dict-tag :options="dict.type.submit_channel" :value="scope.row.submitChannel"/>
</template>
</el-table-column>
<el-table-column
prop="submitTime"
header-align="center"
align="center"
label="提交时间">
</el-table-column>
<el-table-column
prop="handlerReslut"
header-align="center"
align="center"
label="处理结果"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="handlerName"
header-align="center"
align="center"
label="处理人">
</el-table-column>
<el-table-column
prop="handlerDate"
header-align="center"
align="center"
label="处理时间">
</el-table-column>
<el-table-column
prop="phone"
header-align="center"
align="center"
label="联系方式">
</el-table-column>
<el-table-column
prop="houseOwnerId"
header-align="center"
align="center"
label="房屋业主名称">
<template slot-scope="scope">
{{ getOwnerName(scope.row.houseOwnerId) }}
</template>
</el-table-column>
<el-table-column
prop="complainedHouseName"
header-align="center"
align="center"
label="被投诉房屋">
</el-table-column>
<el-table-column
prop="ownerDeptName"
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:pmcomplaintsuggestion: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 './pmcomplaintsuggestion-add-and-update'
import * as api from '@/api/pmcomplaintsuggestion.js'
import * as ownerApi from '@/api/pmowner.js'
import * as houseApi from '@/api/pmhouse.js'
import DictTag from '@/components/DictTag'
export default {
dicts: ['owner_type', 'cs_type', 'submit_channel', 'suggestion_status'],
data () {
return {
dataForm: {
csType: '',
status: '',
remark: '',
csContent: '',
submitChannel: '',
submitTime: '',
handlerReslut: '',
handlerId: '',
handlerDate: '',
phone: '',
ownerType: '',
ownerId: '',
houseId: '',
houseOwnerId: '',
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
ownerList: [],
houseList: []
}
},
components: {
AddOrUpdate,
DictTag
},
activated () {
this.getDataList()
},
mounted() {
// 确保页面加载时自动查询
this.getDataList()
// 加载业主和房屋列表
this.loadOwnerList()
this.loadHouseList()
},
methods: {
// 加载业主列表
loadOwnerList() {
ownerApi.pmownerListApi({ page: 1, limit: 9999 }).then(res => {
this.ownerList = res.list || []
})
},
// 加载房屋列表
loadHouseList() {
houseApi.pmhouseListApi({ page: 1, limit: 9999 }).then(res => {
this.houseList = res.list || []
})
},
// 根据业主ID获取业主名称
getOwnerName(ownerId) {
const owner = this.ownerList.find(item => item.id === ownerId)
return owner ? owner.ownerName : ownerId
},
// 根据房屋ID获取房屋名称
getHouseName(houseId) {
const house = this.houseList.find(item => item.id === houseId)
return house ? `${house.unitNo}单元 ${house.floorNo}${house.houseNo}` : houseId
},
// 重置表单
resetForm() {
this.dataForm = {
csType: '',
status: '',
remark: '',
csContent: '',
submitChannel: '',
submitTime: '',
handlerReslut: '',
handlerId: '',
handlerDate: '',
phone: '',
ownerType: '',
ownerId: '',
houseId: '',
houseOwnerId: '',
}
this.getDataList()
},
// 获取数据列表
getDataList () {
this.dataListLoading = true
// 根据后端PmComplaintSuggestionController和PageParamRequest的期望格式构建参数
const params = {
page: this.pageIndex,
limit: this.pageSize
}
// 将查询条件添加到参数中
if (this.dataForm.csType) params.csType = this.dataForm.csType;
if (this.dataForm.status) params.status = this.dataForm.status;
if (this.dataForm.remark) params.remark = this.dataForm.remark;
if (this.dataForm.csContent) params.csContent = this.dataForm.csContent;
if (this.dataForm.submitChannel) params.submitChannel = this.dataForm.submitChannel;
if (this.dataForm.submitTime) params.submitTime = this.dataForm.submitTime;
if (this.dataForm.handlerReslut) params.handlerReslut = this.dataForm.handlerReslut;
if (this.dataForm.handlerId) params.handlerId = this.dataForm.handlerId;
if (this.dataForm.handlerDate) params.handlerDate = this.dataForm.handlerDate;
if (this.dataForm.phone) params.phone = this.dataForm.phone;
if (this.dataForm.ownerType) params.ownerType = this.dataForm.ownerType;
if (this.dataForm.ownerId) params.ownerId = this.dataForm.ownerId;
if (this.dataForm.houseId) params.houseId = this.dataForm.houseId;
if (this.dataForm.houseOwnerId) params.houseOwnerId = this.dataForm.houseOwnerId;
api.pmcomplaintsuggestionListApi(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.pmcomplaintsuggestionDeleteApi(ids).then(res => {
this.$message.success('删除成功')
this.getDataList()
})
})
},
}
}
</script>