<template>
|
<div class="page-container colorfff">
|
<div class="flex ju-sb">
|
<div class="nav">
|
<img class="nav-icon" :src="require('@/assets/safety/location.png')" alt=""/>
|
<div class="nav-content">
|
<span>运营中心 </span>
|
<i class="el-icon el-icon-arrow-right"></i>
|
<span> 客服咨询</span>
|
</div>
|
</div>
|
|
<div class="action-bar">
|
<div class="action-item orange pointer" @click="setDataInit">重置</div>
|
<a class="action-item orange pointer ml30" :href="exportUrl">数据导出</a>
|
<div class="action-item orange pointer ml20" @click="getList">查询</div>
|
</div>
|
</div>
|
|
|
|
<div class="content page-branch">
|
<div class="filter-section">
|
<!-- 查询条件 -->
|
<el-form
|
style="flex: 1"
|
:inline="true"
|
:model="filterForm"
|
ref="filterForm"
|
>
|
<el-form-item label="诉求标题"><el-input v-model="filterForm.appealTitle"></el-input></el-form-item>
|
<el-form-item label="线路名称"><el-input v-model="filterForm.lineName"></el-input></el-form-item>
|
<el-form-item label="司机名称"><el-input v-model="filterForm.driverFullName"></el-input></el-form-item>
|
<el-form-item label="发车站点"><el-input v-model="filterForm.occurrenceSite"></el-input></el-form-item>
|
<el-form-item label="发生时间">
|
<el-date-picker v-model="timer" :clearable="false" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="setData">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="诉求类别">
|
<el-select v-model="filterForm.complaintCategory" popper-class="safety-report-filter">
|
<el-option v-for="item in categoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="属性核验结果">
|
<el-select v-model="filterForm.handleCheck" popper-class="safety-report-filter" >
|
<el-option v-for="item in checkList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="项目类型"><el-select v-model="filterForm.projectType" popper-class="safety-report-filter">
|
<el-option v-for="item in projectList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
|
</el-select></el-form-item>
|
<el-form-item label="工单状态">
|
<el-select v-model="filterForm.workOrderType" popper-class="safety-report-filter">
|
<el-option v-for="item in typeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
|
</el-select>
|
</el-form-item>
|
|
</el-form>
|
</div>
|
|
|
<!-- 数据表格 -->
|
<div class="table-container">
|
<el-table
|
stripe
|
style="width: 100%"
|
header-row-class-name="table-header"
|
:data="dataList"
|
highlight-current-row
|
:height="'calc(100vh - 500px)'"
|
class="bs"
|
>
|
<el-table-column prop="appealTitle" label="诉求标题" width="200" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="attribute" label="属性"></el-table-column>
|
<el-table-column prop="complaintCategory" label="投诉类别" >
|
<template slot-scope="scope">
|
<span>{{orderFormat(scope.row.complaintCategory)}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="driverFullName" label="司机姓名"></el-table-column>
|
<el-table-column prop="handleCheck" label="调查处理核验结果"></el-table-column>
|
<el-table-column prop="lineName" label="线路名称"></el-table-column>
|
<el-table-column prop="occurrenceSite" label="发生站点"></el-table-column>
|
<el-table-column prop="occurrenceTime" label="发生时间"></el-table-column>
|
<el-table-column prop="projectType" label="项目类型"></el-table-column>
|
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
<el-table-column prop="source" label="来源" ></el-table-column>
|
<el-table-column prop="workOrderNo" label="工单编号" width="150"></el-table-column>
|
<el-table-column prop="workOrderType" label="工单状态 "></el-table-column>
|
<el-table-column label="操作" width="130px" align="center">
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
@click="choseCenter(scope.row)"
|
>查看详情</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="pagination-block">
|
<el-pagination
|
layout="total, prev, pager, next"
|
:total="totalNum"
|
:current-page="filterForm.page"
|
:page-size="filterForm.limit"
|
background
|
prev-text="上一页"
|
next-text="下一页"
|
@current-change="pageChange"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
|
<div class="diloge-box">
|
<el-dialog title="工单详情" :visible.sync="dialogVisible" width="80%">
|
<div class="center-order">
|
<div class="flex bor-b">
|
<div class="order-item-sm"><span class="col-til">诉求标题 ：</span>{{rs.appealTitle}}</div>
|
<div class="order-item-sm"><span class="col-til">来源：</span>{{rs.source}}</div>
|
<div class="order-item-sm"><span class="col-til">类别：</span>{{rs.complaintCategory}}</div>
|
<div class="order-item-sm"><span class="col-til">项目类型：</span>{{rs.projectType}}</div>
|
</div>
|
|
<div class="flex bor-b">
|
<div class="order-item-sm"><span class="col-til">线路名称：</span>{{rs.lineName}}</div>
|
<div class="order-item-sm"><span class="col-til">车牌号：</span>{{rs.licenseNumber}}</div>
|
<div class="order-item-sm"><span class="col-til">司机工号：</span>{{rs.driverJobNumber}}</div>
|
<div class="order-item-sm"><span class="col-til">司机姓名：</span>{{rs.driverFullName}}</div>
|
</div>
|
|
<div class="flex bor-b">
|
<div class="order-item-sm"><span class="col-til">开往方向：</span>{{rs.leaveForDirection}}</div>
|
<div class="order-item-sm"><span class="col-til">属性：</span>{{rs.attribute}}</div>
|
<div class="order-item-sm"><span class="col-til">发生站点：</span>{{rs.occurrenceSite}}</div>
|
<div class="order-item-sm"><span class="col-til">发生时间：</span>{{rs.occurrenceTime}}</div>
|
</div>
|
|
<div class="flex bor-b">
|
<div class="order-item-sm"><span class="col-til">联系人：</span>{{rs.contacts}}</div>
|
<div class="order-item-sm"><span class="col-til">性别：</span>{{rs.sex}}</div>
|
<div class="order-item-sm"><span class="col-til">拨入电话：</span>{{rs.inCall}}</div>
|
<div class="order-item-sm"><span class="col-til">联系电话：</span>{{rs.contactCall}}</div>
|
</div>
|
|
|
|
<div class="flex bor-b">
|
<div class="col-til">工单问题描述：</div>
|
<div>{{rs.content}}</div>
|
</div>
|
|
<div class="flex bor-b">
|
<div class="col-til">经办人意见：</div>
|
<div>{{rs.operatorOpinion}}</div>
|
</div>
|
|
<div class="flex bor-b">
|
<div class="order-item-sm"> <span class="col-til">调查处理时限：</span>{{rs.handleTimeLimit}}</div>
|
<div class="order-item-sm"><span class="col-til">调查处理核验结果：</span>{{rs.handleCheck}}</div>
|
</div>
|
<div class="flex bor-b">
|
<div class="col-til">调查处理结果：</div>
|
<div>{{rs.handleDescribe}}</div>
|
</div>
|
|
<div class="flex bor-b">
|
<div class="order-item-sm"><span class="col-til">回复类型：</span>{{rs.replyType}}</div>
|
<div class="order-item-sm"><span class="col-til">乘客接受情况：</span>{{rs.passengerReplyType}}</div>
|
<div class="order-item-sm"><span class="col-til">工单状态：</span>{{rs.workOrderType}}</div>
|
<div class="order-item-sm"><span class="col-til">创建人：</span>{{rs.creater}}</div>
|
</div>
|
|
|
<div class="flex bor-b">
|
<div class="order-item-sm"> <span class="col-til">创建时间：</span>{{rs.createTime}}</div>
|
</div>
|
|
<div class="btn-que" @click="dialogVisible=false">
|
确定
|
</div>
|
|
|
</div>
|
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import qs from 'qs'
|
export default {
|
name: "customer",
|
data() {
|
return {
|
filterForm: {
|
limit: 10,
|
page: 1,
|
appealTitle:'',// 诉求标题
|
complaintCategory:'',// 投诉类别 1.有效投诉 2.无效投诉(传数字)
|
driverFullName:'',// 司机名称
|
endDate:'',// 筛选结束时间(yyyy-MM-dd)
|
handleCheck:'',// 调查处理核验结果(1.符合 2.不符合)(传数字)
|
lineName:'',// 线路名称
|
occurrenceSite:'',// 发生站点
|
projectType:'',// 项目类型 1.运营服务 2.车厢服务 3.安全行车 4.车人车貌(传数字)
|
startDate:'',// 筛选开始时间(yyyy-MM-dd)
|
workOrderType:'',// 工单状态 1.暂存 2.办结 3.流转 4.完成(传数字)
|
},
|
timer:[],
|
exportUrl:'',
|
totalNum:0,
|
categoryList:[],
|
checkList:[],
|
typeList:[],
|
projectList:[],
|
timeRange: null,
|
dialogVisible: false,
|
dataList: [],
|
rs:{
|
"appealTitle": "",
|
"attribute": "",
|
"complaintCategory": "",
|
"contactCall": "",
|
"contacts": "",
|
"content": "",
|
"createTime": "",
|
"creater": "",
|
"driverFullName": "",
|
"driverJobNumber": "",
|
"handleCheck": "",
|
"handleDescribe": "",
|
"handleTimeLimit": 0,
|
"id": "",
|
"inCall": "",
|
"leaveForDirection": "",
|
"licenseNumber": "",
|
"lineName": "",
|
"occurrenceSite": "",
|
"occurrenceTime": "",
|
"operatorOpinion": "",
|
"passengerReplyType": "",
|
"projectType": "",
|
"replyType": "",
|
"sex": "",
|
"source": "",
|
"workOrderType": ""
|
}
|
};
|
},
|
mounted() {
|
this.getList();
|
this.getmenu();
|
let params=qs.stringify({
|
token:localStorage.getItem('mtoken'),
|
...this.filterForm
|
})
|
this.exportUrl=`${this.$exportBase + this.$Interface.customer.exportCustomerList}?${params}`;
|
},
|
activated() {
|
|
},
|
methods: {
|
|
timeChange() {},
|
setData(value){
|
},
|
setDataInit(){
|
this.filterForm={
|
limit: 10,
|
page: 1,
|
appealTitle:'',
|
complaintCategory:'',
|
driverFullName:'',
|
endDate:'',
|
handleCheck:'',
|
lineName:'',
|
occurrenceSite:'',
|
projectType:'',
|
startDate:'',
|
workOrderType:'',
|
};
|
this.timer=[];
|
this.getList()
|
},
|
getList() {
|
|
if(this.timer && this.timer.length>0){
|
this.filterForm.startDate=this.timer[0];
|
this.filterForm.endDate=this.timer[1];
|
}
|
this.$axios.get(this.$Interface.customer.getCustomerList, {
|
params: this.filterForm,
|
})
|
.then((res) => {
|
this.dataList = res.data.records;
|
this.totalNum = Number(res.data.total);
|
});
|
},
|
getmenu(){
|
|
this.$axios.get(this.$Interface.customer.getWorkOrderTypeMenu).then(res=>{
|
this.typeList=res.data
|
});
|
this.$axios.get(this.$Interface.customer.getTypeMenu).then(res=>{
|
this.categoryList=res.data
|
});
|
this.$axios.get(this.$Interface.customer.getProjectTypeMenu).then(res=>{
|
this.projectList=res.data
|
});
|
this.$axios.get(this.$Interface.customer.getHandelCheckMenu).then(res=>{
|
this.checkList=res.data
|
});
|
},
|
pageChange(page) {
|
this.filterForm.page = page;
|
this.getList();
|
},
|
choseCenter(item){
|
let orderId=item.id;
|
this.$axios.get(`${this.$Interface.customer.getOneCustomerDetailList}?id=${orderId}`).then(res=>{
|
this.rs=res.data[0];
|
this.dialogVisible=true;
|
})
|
|
},
|
orderFormat(row) {
|
let rs={1:"表扬" ,2:"投诉", 3:"建议" ,4:"失物寻找",5:"其他"};
|
return rs[row];
|
},
|
// sourceFormat(row,colum) {
|
// let rs={1:"来电" ,2:"来信", 3:"来访" ,4:"媒体", 5:"稽查" ,6:"咨询", 7:"其他"};
|
// return rs[row.source];
|
// },
|
// projiectFormat(row,colum) {
|
// let rs={1:"运营服务" ,2:"车厢服务", 3:"安全行车", 4:"车人车貌"};
|
// return rs[row.projectType];
|
// },
|
// checkFormat(row,colum) {
|
// let rs={1:"符合" ,2:"不合符"};
|
// return rs[row.handleCheck];
|
// },
|
// catagoryFormat(row,colum) {
|
// let rs={1:"有效投诉" ,2:"无效投诉"};
|
// return rs[row.complaintCategory];
|
// },
|
// attrFormat(row,colum) {
|
// let rs={1:"经常" ,2:"繁忙时刻", 3:"偶尔"};
|
// return rs[row.attribute];
|
// },
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/common.css");
|
.page-branch /deep/ .el-table {
|
background: none !important;
|
overflow-y: scroll;
|
scrollbar-width: none; /* firefox */
|
-ms-overflow-style: none; /* IE 10+ */
|
//height:60vh !important;
|
}
|
.page-branch /deep/ .el-table::-webkit-scrollbar {
|
display: none; /* Chrome Safari */
|
}
|
.btn-que{width: 115px;height: 36px;background: rgba(62,137,211,0.1);line-height: 36px;margin:30px auto 0;text-align: center;border-left:2px solid #3e89d3;border-right:2px solid #3e89d3;}
|
.bor-b{border-bottom:1px solid #415788; align-items: center;
|
flex: 1;}
|
.ju-sc{justify-content: center;}
|
.diloge-box /deep/ .el-dialog{background: linear-gradient(180deg,#06203f, #08141c) !important;border:2px solid #415788;}
|
.diloge-box /deep/ .el-dialog__body{color:#fff !important;}
|
.diloge-box /deep/ .el-dialog__title{color:#fff !important;}
|
.col-til{color:#a3b0d1;}
|
.diloge-box /deep/ .el-dialog__header{background: #090f1d;border-bottom: 2px solid #415788;height:60px;}
|
.center-order{display: flex;flex-direction: column;justify-content: space-between;height:60vh;}
|
.order-item-sm{width:25%;}
|
.el-input__inner{background:#06203f !important;border:1px solid #06203f;}
|
.content .filter-section /deep/ input{border:none!important;}
|
.page-container {
|
padding: 20px 30px ;
|
overflow: hidden;
|
height:calc(100vh - 60px);
|
.nav {
|
display: flex;
|
font-size: 14px;
|
width: 20%;
|
height: 20px;
|
align-items: center;
|
position: relative;
|
.nav-icon {
|
width: 18px;
|
margin-left: 11px;
|
flex-shrink: 0;
|
margin-right: 11px;
|
}
|
.nav-content {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
.dropdown_ {
|
position: absolute;
|
z-index: 2100;
|
background: #06203f;
|
border-radius: 4px;
|
padding: 4px 0;
|
top: 30px;
|
left: -30px;
|
> div {
|
padding: 10px 20px;
|
width: 100px;
|
&.active {
|
background: rgba(20, 131, 242, 0.3);
|
}
|
}
|
> div:hover {
|
background: rgba(20, 131, 242, 0.3);
|
}
|
}
|
.dropdown_::before {
|
content: "";
|
position: absolute;
|
margin: auto;
|
width: 0;
|
height: 0;
|
border-left: 6px solid transparent;
|
border-right: 6px solid transparent;
|
border-bottom: 10px solid #06203f;
|
left: 0;
|
right: 0;
|
top: -10px;
|
}
|
}
|
}
|
}
|
</style>
|
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/common.css");
|
@orange: #1cd1d3;
|
@blue: #3e89d3;
|
.content {
|
margin-top: 16px;
|
.filter-section {
|
display: flex;
|
align-items: flex-start;
|
text-align: right;
|
/deep/input {
|
height: 32px;
|
background: rgba(0, 131, 250, 0.1);
|
border: 1px solid rgba(20, 131, 242, 0.6);
|
border-radius: 0;
|
font-size: 12px;
|
::placeholder {
|
font-size: 12px;
|
}
|
color: #fff !important;
|
}
|
/deep/.el-icon-arrow-up:before {
|
content: "\e78f";
|
}
|
/deep/.el-form-item__label {
|
color: #fff;
|
}
|
/deep/.el-icon-date::before {
|
content: "" !important;
|
}
|
/deep/.el-range-input{
|
background: none;
|
}
|
/deep/.el-range-separator{
|
color: #ffffff;
|
}
|
}
|
.table-container {
|
margin: 30px 10px 0;
|
.pagination-block {
|
text-align: center;
|
margin-top: 20px;
|
}
|
/deep/.el-pagination__total {
|
color: #fff;
|
}
|
}
|
}
|
.action-bar {
|
display: flex;
|
justify-content: right;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
margin-left: 50px;
|
padding-right: 10px;
|
.action-item {
|
padding: 8px 30px;
|
border-left: 2px solid;
|
border-right: 2px solid;
|
opacity: 0.8;
|
}
|
.orange {
|
border-color: @orange;
|
background-color: rgba(28, 209, 211, 0.1);
|
}
|
.blue {
|
border-color: @blue;
|
background-color: rgba(62, 137, 211, 0.1);
|
}
|
}
|
</style>
|
