<template> <div class="callHistory H100"> <div class="head_box"> <h6>呼叫记录 </h6> <h4>呼叫记录</h4> </div> <div class="content_box"> <div class="form_box h778px" > <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 show-overflow-tooltip prop="content" 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 prop="phoneNumber" show-overflow-tooltip label="手机号码"></el-table-column> <el-table-column prop="bankBranchName" show-overflow-tooltip 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="content" :label-width="formLabelWidth"> <span>{{listform.content}}</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="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> <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> export default { data() { return { tableData: [], page: { currentPage: 1, //当前页 pageSize: null, //每页条数 total: null, //总条数 }, FormVisible: false, listform: { lineNumber:'', phoneNumber: '', bankBranchName: '', createTime: '', content: '', feedbackPersonName: '', feedbackTime: '', feedbackInfo: '', }, formLabelWidth: "100px", options: [], roleId: '', bankBranchId: '', form: { bankBranchId: '', callTime: '' }, } }, 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(); }, // 获得数据接口 getTableData(param) { let vm = this; vm.$https({ url : "demandInfo/getList?type=2", 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; }).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 searchObj = { "_index": 1, "_size": _this.page.pageSize, 'roleId': _this.roleId, 'currentBankId': _this.bankBranchId, "bankBranchId": _this.form.bankBranchId, "callTime": _this.form.callTime, }; this.getTableData(searchObj); }, // 获取当前查询参数 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=2&roleId='+this.roleId+'¤tBankId='+this.bankBranchId; }, } } </script> <style lang="less"> .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background-color: rgba(144,147,153,0.4)!important; } </style> <style lang="less"> @import '../../style/common'; .callHistory{ .head_box{ h6{ font-size:14px; font-weight:400; color:rgba(0,0,0,0.65); } h4{ font-size:20px; font-weight:500; color:rgba(0,0,0,0.85); } } .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%; /*width: calc(100% + 15px);*/ 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 { .el-table__body { height: calc(100% - 48px); overflow-x: hidden; overflow-y: auto; } 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>