|
|
|
|
@ -1,121 +1,117 @@
|
|
|
|
|
<template> |
|
|
|
|
<div class="content-max"> |
|
|
|
|
<el-descriptions class="margin-top" :column="3" :size="size" border> |
|
|
|
|
|
|
|
|
|
<el-descriptions-item> |
|
|
|
|
<template #label> |
|
|
|
|
<div class="cell-item"> |
|
|
|
|
<el-icon > |
|
|
|
|
<user /> |
|
|
|
|
</el-icon> |
|
|
|
|
订单自编号 |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
{{ListRow.waybillNumber}} |
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
|
|
|
|
<el-descriptions-item> |
|
|
|
|
<template #label> |
|
|
|
|
<div class="cell-item"> |
|
|
|
|
<el-icon > |
|
|
|
|
<iphone /> |
|
|
|
|
</el-icon> |
|
|
|
|
Telephone |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
18100000000 |
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
|
|
|
|
<el-descriptions-item> |
|
|
|
|
<template #label> |
|
|
|
|
<div class="cell-item"> |
|
|
|
|
<el-icon > |
|
|
|
|
<location /> |
|
|
|
|
</el-icon> |
|
|
|
|
Place |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
Suzhou |
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
|
|
|
|
<el-descriptions-item> |
|
|
|
|
<template #label> |
|
|
|
|
<div class="cell-item"> |
|
|
|
|
<el-icon > |
|
|
|
|
<tickets /> |
|
|
|
|
</el-icon> |
|
|
|
|
Remarks |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<el-tag size="small">School</el-tag> |
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
|
|
|
|
<el-descriptions-item> |
|
|
|
|
<template #label> |
|
|
|
|
<div class="cell-item"> |
|
|
|
|
<el-icon > |
|
|
|
|
<office-building /> |
|
|
|
|
</el-icon> |
|
|
|
|
Address |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province |
|
|
|
|
</el-descriptions-item> |
|
|
|
|
<div class="content-max"> |
|
|
|
|
<el-descriptions class="margin-top" :column="3" :size="size" border> |
|
|
|
|
<el-descriptions-item> |
|
|
|
|
<template #label> |
|
|
|
|
<div class="cell-item"> |
|
|
|
|
<el-icon> |
|
|
|
|
<user /> |
|
|
|
|
</el-icon> |
|
|
|
|
订单自编号 |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
{{ ListRow.waybillNumber }} |
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
|
|
|
|
</el-descriptions> |
|
|
|
|
<el-descriptions-item> |
|
|
|
|
<template #label> |
|
|
|
|
<div class="cell-item"> |
|
|
|
|
<el-icon> |
|
|
|
|
<iphone /> |
|
|
|
|
</el-icon> |
|
|
|
|
运单号 |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
18100000000 |
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
|
|
|
|
<el-descriptions-item> |
|
|
|
|
<template #label> |
|
|
|
|
<div class="cell-item"> |
|
|
|
|
<el-icon> |
|
|
|
|
<location /> |
|
|
|
|
</el-icon> |
|
|
|
|
车次号 |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
Suzhou |
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
|
|
|
|
<div class="content-msg"> |
|
|
|
|
<el-descriptions-item> |
|
|
|
|
<template #label> |
|
|
|
|
<div class="cell-item"> |
|
|
|
|
<el-icon> |
|
|
|
|
<tickets /> |
|
|
|
|
</el-icon> |
|
|
|
|
工单号 |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
School |
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
|
|
|
|
<el-descriptions-item> |
|
|
|
|
<template #label> |
|
|
|
|
<div class="cell-item"> |
|
|
|
|
<el-icon> |
|
|
|
|
<office-building /> |
|
|
|
|
</el-icon> |
|
|
|
|
异常问题描述 |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province |
|
|
|
|
</el-descriptions-item> |
|
|
|
|
</el-descriptions> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="content" ref="scrollContainer"> |
|
|
|
|
<!-- 用户 --> |
|
|
|
|
<div |
|
|
|
|
:class="{ YH: item.businessId != currentUser, KF: item.businessId == currentUser }" |
|
|
|
|
v-for="item in ChatHistory" |
|
|
|
|
:key="item.input" |
|
|
|
|
> |
|
|
|
|
<div class="box"> |
|
|
|
|
<div class="TX"></div> |
|
|
|
|
<div class="name"> |
|
|
|
|
<span>{{ item.businessName }}</span> |
|
|
|
|
<div class="input"> |
|
|
|
|
{{ item.content }} |
|
|
|
|
<div class="content-msg"> |
|
|
|
|
<div class="content" ref="scrollContainer"> |
|
|
|
|
<!-- 用户 --> |
|
|
|
|
<div |
|
|
|
|
:class="{ YH: item.businessId != currentUser, KF: item.businessId == currentUser }" |
|
|
|
|
v-for="item in ChatHistory" |
|
|
|
|
:key="item.input" |
|
|
|
|
> |
|
|
|
|
<div class="box"> |
|
|
|
|
<div class="TX"></div> |
|
|
|
|
<div class="name"> |
|
|
|
|
<span>{{ item.businessName }}</span> |
|
|
|
|
<div class="input"> |
|
|
|
|
{{ item.content }} |
|
|
|
|
</div> |
|
|
|
|
<div class="time">{{ item.createTime }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="inputTextarea" v-loading="iconState" element-loading-text="正在处理中..."> |
|
|
|
|
<div class="fell"> |
|
|
|
|
<el-upload |
|
|
|
|
ref="uploadRef" |
|
|
|
|
class="upload-demo" |
|
|
|
|
:action="doubledCount" |
|
|
|
|
:headers="headers" |
|
|
|
|
:on-success="fellSuccess" |
|
|
|
|
> |
|
|
|
|
<template #trigger> |
|
|
|
|
<el-button type="primary">上传附件</el-button> |
|
|
|
|
<div class="felltis" v-if="KFfeel">上传成功</div> |
|
|
|
|
</template> |
|
|
|
|
</el-upload> |
|
|
|
|
<div class="el_footer"> |
|
|
|
|
<el-input |
|
|
|
|
@keydown.enter="inputEnter" |
|
|
|
|
v-model="KFinput" |
|
|
|
|
:rows="4" |
|
|
|
|
type="textarea" |
|
|
|
|
placeholder="请输入内容" |
|
|
|
|
/> |
|
|
|
|
<div class="el_sed"> |
|
|
|
|
<el-button class="btn_fs" type="primary" @click="messagesend">发送</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="time">{{ item.createTime }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="inputTextarea" v-loading="iconState" element-loading-text="正在处理中..."> |
|
|
|
|
<div class="fell"> |
|
|
|
|
<el-upload |
|
|
|
|
ref="uploadRef" |
|
|
|
|
class="upload-demo" |
|
|
|
|
:action="doubledCount" |
|
|
|
|
:headers="headers" |
|
|
|
|
:on-success="fellSuccess" |
|
|
|
|
> |
|
|
|
|
<template #trigger> |
|
|
|
|
<el-button type="primary">上传附件</el-button> |
|
|
|
|
<div class="felltis" v-if="KFfeel">上传成功</div> |
|
|
|
|
</template> |
|
|
|
|
</el-upload> |
|
|
|
|
<el-input |
|
|
|
|
@keydown.enter="inputEnter" |
|
|
|
|
v-model="KFinput" |
|
|
|
|
:rows="4" |
|
|
|
|
type="textarea" |
|
|
|
|
placeholder="请输入内容" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<el-button class="btn_fs" type="primary" @click="messagesend">发送</el-button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup> |
|
|
|
|
@ -127,6 +123,7 @@ const KFfeel = ref(''); //文件附件地址
|
|
|
|
|
const iconState = ref(false); //消息状态 |
|
|
|
|
const KFinput = ref(''); //客服发送消息 |
|
|
|
|
const ListRow = ref(); //当前行数据 |
|
|
|
|
const currentUser = ref(null); //存放当前的对话框必要Id |
|
|
|
|
const $route = useRoute(); |
|
|
|
|
const Mydata = ref(null); //仓库关键信息 |
|
|
|
|
import { ElMessage } from 'element-plus'; |
|
|
|
|
@ -154,6 +151,7 @@ const onLoad = () => {
|
|
|
|
|
ListRow.value = JSON.parse($route.query.row); |
|
|
|
|
console.log(); |
|
|
|
|
Mydata.value = JSON.parse(localStorage.getItem('my_data')); //获取本地仓库信息 |
|
|
|
|
currentUser.value = Mydata.value.id; |
|
|
|
|
console.log(ListRow.value, '路由参数'); |
|
|
|
|
FKList(); |
|
|
|
|
}; |
|
|
|
|
@ -171,10 +169,8 @@ const messagesendFn = () => {
|
|
|
|
|
annex: KFfeel.value, |
|
|
|
|
}; |
|
|
|
|
console.log(data, '处理好的数据'); |
|
|
|
|
|
|
|
|
|
$_AddReply(data).then(res => { |
|
|
|
|
// 获取当前时间 |
|
|
|
|
const currentTime = new Date(); |
|
|
|
|
// 获取当前时间 |
|
|
|
|
const currentTime = new Date(); |
|
|
|
|
// 获取年、月、日、小时、分钟、秒 |
|
|
|
|
const year = String(currentTime.getFullYear()); |
|
|
|
|
const month = String(currentTime.getMonth() + 1).padStart(2, '0'); |
|
|
|
|
@ -184,6 +180,8 @@ const messagesendFn = () => {
|
|
|
|
|
const seconds = String(currentTime.getSeconds()).padStart(2, '0'); |
|
|
|
|
// 拼接时间字符串 |
|
|
|
|
const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
|
|
|
|
$_AddReply(data).then(res => { |
|
|
|
|
|
|
|
|
|
console.log(res, '添加成功'); |
|
|
|
|
if (res.data.code == 200) { |
|
|
|
|
// 添加成功 |
|
|
|
|
@ -203,7 +201,13 @@ const messagesendFn = () => {
|
|
|
|
|
}, 0); |
|
|
|
|
KFinput.value = ''; //清空内容 |
|
|
|
|
KFfeel.value = null; //清空文件 |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}).catch(res=>{ |
|
|
|
|
console.log('err'); |
|
|
|
|
KFinput.value = ''; //清空内容 |
|
|
|
|
KFfeel.value = null; //清空文件 |
|
|
|
|
iconState.value = false; |
|
|
|
|
}); |
|
|
|
|
console.log(Mydata.value, '参数'); |
|
|
|
|
}; |
|
|
|
|
@ -239,13 +243,15 @@ const fellSuccess = (response, uploadFile) => {
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.content { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 80%; |
|
|
|
|
height: 78%; |
|
|
|
|
overflow-y: scroll; |
|
|
|
|
scroll-behavior: smooth; |
|
|
|
|
padding: 10px; |
|
|
|
|
/* 添加平滑滚动效果 */ |
|
|
|
|
border-radius: 5px; |
|
|
|
|
border: 1px solid #ccc; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
margin: 4px; |
|
|
|
|
.YH { |
|
|
|
|
width: 100%; |
|
|
|
|
min-height: 50px; |
|
|
|
|
@ -360,13 +366,26 @@ const fellSuccess = (response, uploadFile) => {
|
|
|
|
|
:deep(.el-descriptions__header) { |
|
|
|
|
margin-bottom: 0 !important; |
|
|
|
|
} |
|
|
|
|
.content-max{ |
|
|
|
|
display: flex; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
flex-direction: column; |
|
|
|
|
.content-msg{ |
|
|
|
|
flex: 1; |
|
|
|
|
} |
|
|
|
|
.content-max { |
|
|
|
|
display: flex; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
flex-direction: column; |
|
|
|
|
.content-msg { |
|
|
|
|
flex: 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.inputTextarea { |
|
|
|
|
padding: 10px; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
.el_footer { |
|
|
|
|
display: flex; |
|
|
|
|
} |
|
|
|
|
.el_sed { |
|
|
|
|
width: 7%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: flex-end; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
