<template>
|
<div class="detail-view">
|
<el-drawer
|
:visible.sync="detailConfig.visible"
|
size="80%"
|
:before-close="handleClose"
|
:wrapperClosable="false"
|
:append-to-body="true"
|
>
|
<template slot="title">
|
<div class="header">
|
<span class="header-label">客户服务单</span>
|
<span class="header-title">{{ detailConfig.infomation.serviceNumber }}</span>
|
</div>
|
</template>
|
<div class="content">
|
<div class="tab-view">
|
<el-tabs v-model="activeName" @tab-click="tabsClick">
|
<el-tab-pane label="详情" name="first"></el-tab-pane>
|
<!-- <el-tab-pane label="附件管理" name="annex"></el-tab-pane> -->
|
<el-tab-pane label="服务回访单" name="followup">
|
<!-- <template slot="label">
|
<div>跟进记录<el-badge type="primary" :value="2"> </el-badge></div>
|
</template> -->
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<div v-if="activeName === 'first'" class="detail">
|
<!-- 基本信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('basic')">
|
<i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">基本信息</span>
|
</div>
|
<div v-show="isBasicExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in basicInfoList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue ? item.leftValue : "--" }}</div>
|
</div>
|
<div v-if="item.rightStr" class="right">
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">{{ item.rightValue ? item.rightValue : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 动态信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('dynamic')">
|
<i v-if="isDynamicExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">动态信息</span>
|
</div>
|
<div v-show="isDynamicExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in dynamicInfoList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue ? item.leftValue : "--" }}</div>
|
</div>
|
<div v-if="item.rightStr" class="right">
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">{{ item.rightValue ? item.rightValue : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 时间/金额 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('timeAmount')">
|
<i v-if="isTimeAmountExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">时间/金额</span>
|
</div>
|
<div v-show="isTimeAmountExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in timeAmountList" :key="i">
|
<div class="left">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue ? item.leftValue : "--" }}</div>
|
</div>
|
<div v-if="item.rightStr" class="right">
|
<div class="content-title">{{ item.rightStr + "：" }}</div>
|
<div class="content-data">{{ item.rightValue ? item.rightValue : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 定位地址 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('address')">
|
<i v-if="isAddressExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">定位地址</span>
|
</div>
|
<div v-show="isAddressExpand" class="basic-info-content">
|
<ul>
|
<li>
|
<div class="left remark">
|
<div class="content-title">{{ "定位：" }}</div>
|
<div class="content-data">{{ "" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 问题描述 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('issue')">
|
<i v-if="isIssueExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">问题描述</span>
|
</div>
|
<div v-show="isIssueExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in issueList" :key="i">
|
<div class="all">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue ? item.leftValue : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 解决办法 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('solution')">
|
<i v-if="isSolutionExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">解决办法</span>
|
</div>
|
<div v-show="isSolutionExpand" class="basic-info-content">
|
<ul>
|
<li v-for="(item, i) in solutionList" :key="i">
|
<div class="all">
|
<div class="content-title">{{ item.leftStr + "：" }}</div>
|
<div class="content-data">{{ item.leftValue ? item.leftValue : "--" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 备注信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('remark')">
|
<i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">备注信息</span>
|
</div>
|
<div v-show="isRemarkExpand" class="basic-info-content">
|
<ul>
|
<li>
|
<div class="left remark">
|
<div class="content-title">{{ "备注：" }}</div>
|
<div class="content-data">{{ "备注内容" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 签到地址信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('signInAddress')">
|
<i v-if="isSignInAddressExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">签到地址信息</span>
|
</div>
|
<div v-show="isSignInAddressExpand" class="basic-info-content">
|
<ul>
|
<li>
|
<div class="left remark">
|
<div class="content-title">{{ "签到地址：" }}</div>
|
<div class="content-data">{{ "" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 附件信息 -->
|
<!-- <div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('annex')">
|
<i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">附件信息</span>
|
</div>
|
<div v-show="isAnnexExpand" class="basic-info-content">
|
<ul>
|
<li>
|
<div class="left remark">
|
<div class="content-title">{{ "附件：" }}</div>
|
<div class="content-data">{{ "" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div> -->
|
<!-- 签字确认 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('signConfim')">
|
<i v-if="isSignConfimExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">签字确认</span>
|
</div>
|
<div v-show="isSignConfimExpand" class="basic-info-content">
|
<ul>
|
<li>
|
<div class="left remark">
|
<div class="content-title">{{ "附件：" }}</div>
|
<div class="content-data">{{ "" }}</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 服务合同信息 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('serviceContract')">
|
<i v-if="isServiceContractExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">服务合同信息</span>
|
</div>
|
<div v-show="isServiceContractExpand" class="basic-info-content">
|
<div class="list" v-if="serviceContractList.length > 0">
|
<PagerView class="page" :pager-options="pagerOptions1" v-on="pagerEvents" />
|
<TableCommonView
|
ref="tableListRef"
|
:select-box="false"
|
:table-list="serviceContractList"
|
></TableCommonView>
|
</div>
|
<div class="no-data" v-else>没有找到任何记录</div>
|
</div>
|
</div>
|
<!-- 客户服务单历史记录 -->
|
<div class="basic-info">
|
<div class="basic-info-label" @click="expandClick('history')">
|
<i v-if="isHistoryExpand" class="el-icon-arrow-down"></i>
|
<i v-else class="el-icon-arrow-up"></i>
|
<span style="margin-left: 10px">客户服务单历史记录</span>
|
</div>
|
<div v-show="isHistoryExpand" class="basic-info-content">
|
<div class="list" v-if="historyList.length > 0">
|
<PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
|
<TableCommonView
|
ref="recordTableListRef"
|
:select-box="false"
|
:table-list="historyList"
|
></TableCommonView>
|
</div>
|
<div class="no-data" v-else>没有找到任何记录</div>
|
</div>
|
</div>
|
</div>
|
<div v-if="activeName === 'annex'" class="second">
|
<!-- <Contacts :isDetail="true" /> -->
|
</div>
|
<div v-if="activeName === 'followup'" class="second">
|
<ServiceFollowup :isDetail="true" :add-config="addConfig" />
|
</div>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
// import FollowupRecords from "@/views/client/followupRecords"
|
// import Contacts from "@/views/client/contacts"
|
import ServiceFollowup from "@/views/service/serviceFollowup"
|
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
|
export default {
|
name: "DetailClientServiceOrder",
|
mixins: [pageMixin],
|
props: {
|
clientServiceDetail: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
infomation: {}
|
}
|
}
|
}
|
},
|
components: { ServiceFollowup },
|
computed: {},
|
data() {
|
return {
|
detailConfig: this.clientServiceDetail,
|
activeName: "first",
|
isBasicExpand: true, // 基本信息展开
|
basicInfoList: [],
|
isDynamicExpand: true, // 动态信息
|
dynamicInfoList: [],
|
isTimeAmountExpand: true, // 时间/金额
|
timeAmountList: [],
|
isAddressExpand: true, // 定位地址
|
isIssueExpand: true, // 问题描述
|
issueList: [],
|
isSolutionExpand: true, // 解决办法
|
solutionList: [],
|
isRemarkExpand: true, // 备注信息
|
isSignInAddressExpand: true, // 签到地址信息
|
isAnnexExpand: true, // 附件信息
|
isSignConfimExpand: true, // 签字确认
|
isServiceContractExpand: true, // 服务合同信息
|
serviceContractList: [],
|
isHistoryExpand: true, // 客户服务单历史记录
|
historyList: [],
|
addConfig: {}
|
}
|
},
|
created() {
|
this.setData()
|
this.setTable()
|
console.log(this.detailConfig.infomation.contact_name)
|
this.addConfig = {
|
keyword: this.detailConfig.infomation.serviceNumber,
|
keywordType: "客户服务单",
|
client_name: this.detailConfig.infomation.client_name,
|
clientId: this.detailConfig.infomation.clientId,
|
contactId: this.detailConfig.infomation.contactId,
|
contact_name: this.detailConfig.infomation.contact_name,
|
service_number: this.detailConfig.infomation.serviceNumber,
|
serviceOrderId: this.detailConfig.infomation.id
|
}
|
},
|
mounted() {},
|
methods: {
|
setTable() {
|
this.serviceContractList = {
|
tableInfomation: [],
|
tableColumn: [
|
{ label: "服务单编号", prop: "number", min: 100 },
|
{ label: "主题", prop: "name" },
|
{ label: "服务人员", prop: "clientId", min: 130 },
|
{ label: "服务方式", prop: "contactName" },
|
{ label: "产品类别", prop: "name" },
|
{ label: "产品名称", prop: "orderType" },
|
{ label: "修改时间", prop: "reportSourceId" }
|
]
|
}
|
},
|
setData() {
|
const data = this.detailConfig.infomation
|
this.basicInfoList = [
|
{
|
leftStr: "客户名称",
|
leftValue: data.Client.name,
|
rightStr: "服务单编号",
|
rightValue: data.serviceNumber
|
},
|
{
|
leftStr: "服务合同",
|
leftValue: data.ServiceContract.number,
|
rightStr: "故障类别",
|
rightValue: data.FaultType.name
|
},
|
{
|
leftStr: "主题",
|
leftValue: data.subject,
|
rightStr: "合同订单",
|
rightValue: data.SalesDetails.number
|
},
|
{
|
leftStr: "产品类别",
|
leftValue: "",
|
rightStr: "产品名称",
|
rightValue: data.productName
|
},
|
{
|
leftStr: "服务方式",
|
leftValue: data.ServiceType.name,
|
rightStr: "服务人员",
|
rightValue: data.serviceManId
|
},
|
{
|
leftStr: "上门地址",
|
leftValue: data.address,
|
rightStr: "优先级别",
|
rightValue: data.PriorityLevel.name
|
},
|
{
|
leftStr: "预约上门时间",
|
leftValue: data.appointmentTime,
|
rightStr: "销售机会",
|
rightValue: data.SaleChance.name
|
},
|
{
|
leftStr: "签到",
|
leftValue: "",
|
rightStr: "现场服务人员扫码",
|
rightValue: ""
|
},
|
{
|
leftStr: "创建时间",
|
leftValue: data.createTime,
|
rightStr: "创建人",
|
rightValue: ""
|
}
|
]
|
this.dynamicInfoList = [
|
{
|
leftStr: "处理状态",
|
leftValue: data.serviceOrderStatusId,
|
rightStr: "最新分配时间",
|
rightValue: ""
|
},
|
{
|
leftStr: "最新更新人",
|
leftValue: "",
|
rightStr: "修改时间",
|
rightValue: data.updateTime
|
}
|
]
|
this.timeAmountList = [
|
{
|
leftStr: "希望处理时间",
|
leftValue: data.expectTime,
|
rightStr: "实际处理时间",
|
rightValue: data.realTime
|
},
|
{
|
leftStr: "交通费",
|
leftValue: data.carFare,
|
rightStr: "收费金额",
|
rightValue: data.chargeAmount
|
},
|
{
|
leftStr: "花费时间",
|
leftValue: data.TimeSpent.name,
|
rightStr: "",
|
rightValue: ""
|
}
|
]
|
this.issueList = [
|
{
|
leftStr: "常见问题",
|
leftValue: data.Faq.name
|
},
|
{
|
leftStr: "问题描述",
|
leftValue: data.problemDesc
|
}
|
]
|
this.solutionList = [
|
{
|
leftStr: "解决办法",
|
leftValue: data.solution
|
},
|
{
|
leftStr: "内容备注",
|
leftValue: data.solutionRemark
|
}
|
]
|
},
|
handleClose() {
|
this.detailConfig.visible = false
|
},
|
// tab切换
|
tabsClick(tab, event) {
|
console.log(tab, event)
|
},
|
// 展开收起点击事件
|
expandClick(value) {
|
console.log(value)
|
if (value === "basic") {
|
this.isBasicExpand = !this.isBasicExpand
|
} else if (value === "dynamic") {
|
this.isDynamicExpand = !this.isDynamicExpand
|
} else if (value === "timeAmount") {
|
this.isTimeAmountExpand = !this.isTimeAmountExpand
|
} else if (value === "address") {
|
this.isAddressExpand = !this.isAddressExpand
|
} else if (value === "issue") {
|
this.isIssueExpand = !this.isIssueExpand
|
} else if (value === "solution") {
|
this.isSolutionExpand = !this.isSolutionExpand
|
} else if (value === "remark") {
|
this.isRemarkExpand = !this.isRemarkExpand
|
} else if (value === "signInAddress") {
|
this.isSignInAddressExpand = !this.isSignInAddressExpand
|
} else if (value === "annex") {
|
this.isAnnexExpand = !this.isAnnexExpand
|
} else if (value === "signConfim") {
|
this.isSignConfimExpand = !this.isSignConfimExpand
|
} else if (value === "serviceContract") {
|
this.isServiceContractExpand = !this.isServiceContractExpand
|
} else if (value === "history") {
|
this.isHistoryExpand = !this.isHistoryExpand
|
}
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-drawer__header {
|
padding: 0;
|
margin-bottom: 0px;
|
.header {
|
height: 56px;
|
display: flex;
|
align-items: center;
|
padding-left: 10px;
|
.header-label {
|
padding: 5px;
|
border-radius: 4px;
|
background-color: #ff6600;
|
color: #fff;
|
font-size: 12px;
|
}
|
.header-title {
|
color: #323232;
|
font-size: 15px;
|
margin-left: 10px;
|
font-weight: inherit;
|
}
|
}
|
}
|
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
padding-left: 20px;
|
}
|
.el-tabs__item.is-active {
|
color: $color-primary;
|
}
|
.el-tabs__item:hover {
|
color: $color-primary;
|
}
|
.el-tabs__active-bar {
|
background-color: $color-primary;
|
}
|
.el-tabs__header {
|
margin: 0;
|
}
|
.el-drawer__body {
|
.content {
|
background-color: rgb(230, 233, 240);
|
padding: 8px;
|
.tab-view {
|
background: #fff;
|
// .tab-view-pane {
|
// position: relative;
|
.item {
|
position: absolute;
|
top: 0px;
|
right: 0px;
|
}
|
// }
|
}
|
.detail {
|
.basic-info {
|
.basic-info-label {
|
padding-left: 10px;
|
height: 42px;
|
line-height: 42px;
|
background: #f4f8fe;
|
color: #333;
|
font-size: 14px;
|
}
|
.basic-info-content {
|
background: #fff;
|
ul {
|
padding-inline-start: 0;
|
}
|
li {
|
display: flex;
|
font-size: 14px;
|
font-family: PingFangSC;
|
border-bottom: 1px solid #f9f9fb;
|
.left,
|
.right,
|
.all {
|
width: 50%;
|
display: flex;
|
align-items: center;
|
height: 40px;
|
.content-title {
|
width: 320px;
|
text-align: right;
|
color: #555;
|
}
|
.content-data {
|
text-align: left;
|
margin-left: 25px;
|
color: #333;
|
}
|
}
|
.all {
|
width: 100%;
|
}
|
.remark {
|
width: 100%;
|
}
|
}
|
.list {
|
.page {
|
text-align: right;
|
margin-bottom: 5px;
|
}
|
}
|
.no-data {
|
height: 40px;
|
line-height: 40px;
|
margin-left: 10px;
|
font-size: 13px;
|
color: #666;
|
}
|
}
|
}
|
}
|
.second {
|
background: #fff;
|
.followup-records {
|
.table-view {
|
margin-top: 0 !important;
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
