<template>
<div class="feedbackPage H100">
<div class="head_box">
<h6>意见建议及反馈</h6>
<h4>意见建议及反馈</h4>
</div>
<div class="content_box">
<div class="form_box h778px">
<el-row v-if="0" class="input_box" :gutter="10">
<el-col :lg="7" :xl="6">
<span style="width: 88px;line-height: 32px">网点归属：</span>
<el-select v-model="form.bankBranchId" style="width: calc(100% - 100px)" placeholder="请选择网点归属" clearable filterable @change="Search">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
<el-col :lg="7" :xl="6">
<span style="width: 88px;line-height: 32px">吐槽日期：</span>
<el-date-picker v-model="form.callTime" style="width: calc(100% - 100px)" type="date" placeholder="选择日期" @change="Search"></el-date-picker>
</el-col>
<el-col :lg="8" :xl="10">
<el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button>
</el-col>
<el-col :lg="2" :xl="2">
<el-button size="mini" type="primary" class="btn_form_add r-float marl20" @click="exportExcel">下载数据</el-button>
</el-col>
</el-row>
<el-form :inline="true" :model="form" class="search-form">
<el-form-item label="网点归属:" v-if="roleId != 3">
<el-select size="mini" v-model="form.bankBranchId" placeholder="请选择网点归属" clearable filterable @change="Search">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="吐槽日期:">
<el-date-picker size="mini" v-model="form.callTime" type="date" placeholder="选择日期" @change="Search"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button>
</el-form-item>
<el-form-item class="r-float">
<el-button size="mini" type="primary" class="btn_form_add" @click="exportExcel">下载数据</el-button>
</el-form-item>
</el-form>
<div class="scrool">
<el-table :data="tableData" stripe style="width: 100%" @row-click="openDetails">
<el-table-column prop="lineNumber" show-overflow-tooltip label="呼叫编号"></el-table-column>
<el-table-column prop="phoneNumber" show-overflow-tooltip label="手机号码"></el-table-column>
<el-table-column prop="bankBranchName" show-overflow-tooltip label="归属网点"></el-table-column>
<el-table-column prop="createTime" label="吐槽日期" width="160">
<template slot-scope="scope">
{{scope.row.createTime | dateformat('YYYY-MM-DD HH:mm:ss')}}
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="content" label="吐槽建议"></el-table-column>
<el-table-column prop="feedbackPersonName" show-overflow-tooltip label="反馈人"></el-table-column>
<el-table-column prop="feedbackTime" label="反馈时间" width="160">
<template slot-scope="scope">
{{feedTime(scope.row.feedbackTime)}}
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="feedbackInfo" label="反馈内容"></el-table-column>
</el-table>
</div>
<el-pagination small background
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next"
:total="page.total">
</el-pagination>
</div>
<!--查看详情-->
<el-dialog title="详情" :visible.sync="FormVisible">
<div class="form_box">
<el-form :model="listform" ref="listform">
<el-form-item label="呼叫编号：" prop="lineNumber" :label-width="formLabelWidth">
<span>{{listform.lineNumber}}</span>
</el-form-item>
<el-form-item label="手机号码：" prop="phoneNumber" :label-width="formLabelWidth">
<span>{{listform.phoneNumber}}</span>
</el-form-item>
<el-form-item label="归属网点：" prop="bankBranchName" :label-width="formLabelWidth">
<span>{{listform.bankBranchName}}</span>
</el-form-item>
<el-form-item label="吐槽日期：" prop="createTime" :label-width="formLabelWidth">
<span>{{listform.createTime | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
</el-form-item>
<el-form-item label="吐槽建议：" prop="content" :label-width="formLabelWidth">
<span>{{listform.content}}</span>
</el-form-item>
<el-form-item label="反馈人：" prop="feedbackPersonName" :label-width="formLabelWidth">
<span>{{listform.feedbackPersonName}}</span>
</el-form-item>
<el-form-item label="反馈时间：" prop="feedbackTime" :label-width="formLabelWidth">
<span>{{feedTime(listform.feedbackTime)}}</span>
</el-form-item>
<el-form-item label="反馈内容：" prop="feedbackInfo" :label-width="formLabelWidth">
<span>{{listform.feedbackInfo}}</span>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" type="primary" @click="FormVisible = false">确定</el-button>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
const moment = require('moment')
export default {
data() {
return {
page: {
currentPage: 1, //当前页
pageSize: null, //每页条数
total: null, //总条数
},
FormVisible: false,
listform: {
lineNumber: '',
phoneNumber: '',
bankBranchName: '',
createTime: '',
content: '',
feedbackPersonName: '',
feedbackTime: '',
feedbackInfo: '',
},
formLabelWidth: "100px",
form: {
bankBranchId: '',
callTime: ''
},
tableData: [],
options: '',
roleId: '',
bankBranchId: ''
}
},
computed: {},
mounted() {
this.initData();
},
components: {},
methods: {
// 归属网点列表渲染
getBranch() {
let _this = this;
_this.$https({
method: 'get',
url: 'bankBranchInfo/getBankBox?action=appInfoQuery&roleId=' + _this.roleId + '&bankId=' + _this.bankBranchId,
authType: this.backToken
}).then((res) => {
_this.options = res.data;
}, (error) => {
console.log(error)
}
)
},
initData() {
this.roleId = localStorage.getItem('roleId');
this.bankBranchId = localStorage.getItem('bankBranchId');
this.onSearch();
this.getBranch();
},
feedTime(Time) {
if (Time == '') {
Time = '-';
} else {
Time = this.moment(Time).format('YYYY-MM-DD HH:mm:ss');
}
return Time;
},
// 获得数据接口
getTableData(param) {
let vm = this;
vm.$https({
url: "demandInfo/getList?type=1",
method: 'get',
authType: this.backToken
}, param).then((res) => {
let data = res.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
vm.tableData.forEach((e, i) => {
let Time = e.feedbackTime;
vm.feedTime(Time);
})
}).catch(function (err) {
console.log(err);
})
},
// 分页
handleCurrentChange(val) {
let _this = this;
_this.page.currentPage = val;
_this.onSearch();
},
onSearch() {
let _this = this;
let param = _this.getSearchQuery();
_this.getTableData(param)
},
Search() {
let _this = this;
_this.form.callTime = this.formatDate();
_this.page.currentPage = 1;
let param = {
"_index": 1,
"_size": _this.page.pageSize,
'roleId': _this.roleId,
'currentBankId': _this.bankBranchId,
"bankBranchId": _this.form.bankBranchId,
"callTime": _this.form.callTime,
};
this.getTableData(param);
},
// 获取当前查询参数
getSearchQuery() {
let _this = this;
let searchObj = {
"_index": _this.page.currentPage,
"_size": _this.page.pageSize,
'roleId': _this.roleId,
'currentBankId': _this.bankBranchId
};
for (let key in _this.form) {
if (_this.form[key]) {
searchObj[key] = _this.form[key];
}
}
return searchObj;
},
//下拉框选择的时间转换
formatDate() {
let _this = this;
let date = _this.form.callTime;
if (date) {
date = this.moment(date).format('YYYY-MM-DD HH:mm:ss');
date = date.split(' ')[0];
}
return date;
},
openDetails(row) {
let _this = this;
_this.$https({
method: 'get',
url: 'demandInfo/getById?id=' + row.id,
authType: this.backToken
}).then((res) => {
_this.listform = res.data;
}, (error) => {
console.log(error)
}
)
this.FormVisible = true;
},
exportExcel() {
if(!this.form.callTime || this.form.callTime==""){
this.form.callTime = "";
}else{
this.form.callTime = this.form.callTime;
}
window.location.href = this.$baseUrl + 'demandInfo/demandInfoDownload?bankBranchId=' + this.form.bankBranchId +
'&callTime=' + this.form.callTime + '&type=1&roleId=' + this.roleId + '¤tBankId=' + this.bankBranchId;
},
}
}
</script>
<style lang="less">
@import '../../style/common';
.feedbackPage {
.content_box {
.input_box {
width: 100%;
min-width: 815px;
margin-bottom: 30px;
.el-input, .el-select {
max-width: 272px;
/*height:32px;*/
background: rgba(255, 255, 255, 1);
border-radius: 4px;
.el-input__inner {
height: 32px;
}
.el-input__suffix {
height: 110%;
}
.el-input--suffix .el-input__inner {
padding-right: 0px;
}
}
.btn_form_search, .btn_form_add {
height: 32px;
text-align: center;
padding: 0 15px;
}
.el-input__icon.el-icon-date {
line-height: 32px;
}
}
.scrool {
width: 100%;
height: calc(100% - 100px);
overflow-x: hidden;
overflow-y: scroll;
.el-table {
.el-table__header-wrapper {
.el-table__header {
.has-gutter tr th {
background: rgba(250, 250, 250, 1);
}
}
}
.el-table__body-wrapper {
width: 100%;
table tbody tr:hover{
cursor:pointer;
}
table tbody tr td {
padding: 6px 0px;
.cell {
max-height: 94px !important;
overflow: hidden !important;
}
}
}
}
}
/*!*弹窗*!*/
.el-dialog {
width: 600px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
border-radius: 4px;
margin-top: 10vh !important;
.el-dialog__header {
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
.el-dialog__headerbtn {
top: 11px !important;
}
}
.el-dialog__body {
padding: 0px !important;
border: 1px solid transparent;
.form_box {
padding-bottom: 40px;
.el-form {
margin-bottom: 20px;
border: 1px solid transparent;
.el-form-item {
margin: 10px 50px 20px;
.el-form-item__label {
line-height: 25px;
}
.el-form-item__content {
line-height: 25px;
}
}
.el-input {
width: 100%;
}
}
.dialog-footer {
border-top: 1px solid rgba(0, 0, 0, 0.09);
padding-top: 8px;
.el-button {
margin-right: 10px;
padding: 8px 16px;
}
}
}
}
}
}
}
</style>