longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改客服附件加载状态

Browse Source
This commit is contained in:
龙运模 2024-11-20 14:55:31 +08:00
parent 3862c13a77
commit e4f74602cc
3 changed files with 100 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/service/components/attachmentUpload.vue
View File

@ -20,29 +20,6 @@
<div class="el-upload-size"> <div class="el-upload-size">
<el-icon class="el-icon--upload" size="18"><sc-icon-Attachment /></el-icon> <el-icon class="el-icon--upload" size="18"><sc-icon-Attachment /></el-icon>
</div> </div>
<!-- <template #tip>-->
<!-- <div class="el-upload__tip">-->
<!-- <span class="tip">最多上传5个文件,单个文件不要超过10M,请上传 图片/xlsx/docx/zip 格式文件</span>-->
<!-- <span class="btn">-->
<!-- <slot name="download"></slot>-->
<!-- </span>-->
<!-- </div>-->
<!-- <div class="importBox" v-if="progressShow && (fileList.length>0 || listProgress.length>0)">-->
<!-- <div v-if="uploadShow">-->
<!-- <div class="item" v-for="(item,index) in fileList" :key="item">-->
<!-- <div class="name">{{item.name}}</div>-->
<!-- <el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="0" />-->
<!-- <div class="deleteFile" @click="deleteFileNum(index)"><el-icon class="icon"><el-icon-Close/></el-icon></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div v-else>-->
<!-- <div class="item" v-for="(item) in listProgress" :key="item">-->
<!-- <div class="name">{{item.client_file_name}}</div>-->
<!-- <el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="item.rate" />-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </template>-->
</el-upload> </el-upload>
</div> </div>
</template> </template>
@ -146,7 +123,7 @@ export default {
for (const key in this.upload_data) { for (const key in this.upload_data) {
formData.append(key, this.upload_data[key]); formData.append(key, this.upload_data[key]);
} }
formData.append('to_user_id', this.parentParams['to_user_id']); formData.append("to_user_id", this.parentParams['to_user_id']);
this.params = formData; this.params = formData;
// 单次 // 单次
@ -169,11 +146,19 @@ export default {
const res = await this.$API.customer.attachmentMessage.post(this.params); const res = await this.$API.customer.attachmentMessage.post(this.params);
this.saveLoading = false; this.saveLoading = false;
if (res.code == 200) { if (res.code == 200) {
res.data.forEach((item,index)=>{
item.showLoading = true;
if(['png','jpg','gif','jpeg'].indexOf(item.file_type) !==-1){
item.file = URL.createObjectURL(this.fileList[index])
}else{
item.rate = 1;
}
})
this.$emit('uploadFileSuccess',res.data);
this.params = {}; this.params = {};
this.fileList = []; this.fileList = [];
this.singleFnc = true; this.singleFnc = true;
this.$emit('uploadFileSuccess',res.data);
} }
}, },
handleExceed(){ handleExceed(){

10
src/views/service/components/recordsList.vue
View File

@ -21,7 +21,7 @@
</div> </div>
<div class="textCom textComNoneBack" v-if="item.send_message_type === 2"> <div class="textCom textComNoneBack" v-if="item.send_message_type === 2">
<div v-for="(em,ind) in item.to_message_list" :key="ind"> <div v-for="(em,ind) in item.to_message_list" :key="ind">
<span v-if="em.extension === 'png' || em.extension === 'jpg' || em.extension === 'gif' || em.extension === 'jpeg'"> <span class="imgView" v-if="['png','jpg','gif','jpeg'].indexOf(em.extension) != -1">
<el-image style="max-width: 140px;max-height: 140px;border-radius: 4px;" fit="cover" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image> <el-image style="max-width: 140px;max-height: 140px;border-radius: 4px;" fit="cover" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
</span> </span>
<span class="fileView" v-else> <span class="fileView" v-else>
@ -98,6 +98,13 @@ export default {
padding: 0; padding: 0;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
.imgView{
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 5px;
}
.fileView{ .fileView{
cursor: pointer; cursor: pointer;
color: var(--el-color-primary); color: var(--el-color-primary);
@ -107,6 +114,7 @@ export default {
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
background: #f8f6f6; background: #f8f6f6;
margin-bottom: 5px;
} }
} }
.textComNoneBack{ .textComNoneBack{

94
src/views/service/infoQuery.vue
View File

@ -17,8 +17,7 @@
<div class="title">{{item.from_user && item.from_user.name==""?'匿名':item.from_user && item.from_user.name}}</div> <div class="title">{{item.from_user && item.from_user.name==""?'匿名':item.from_user && item.from_user.name}}</div>
<div class="msg" v-if="item.to_message.send_message_type === 1">{{item.to_message.to_message}}</div> <div class="msg" v-if="item.to_message.send_message_type === 1">{{item.to_message.to_message}}</div>
<div class="msg" v-if="item.to_message.send_message_type === 2"> <div class="msg" v-if="item.to_message.send_message_type === 2">
未命名 {{item.to_message_list[0].client_file_name?item.to_message_list[0].client_file_name:'未命名'}}
<!-- {{item.to_message_list[0].client_file_name?item.to_message_list[0].client_file_name:'未命名'}}-->
</div> </div>
</div> </div>
</div> </div>
@ -51,13 +50,18 @@
</div> </div>
<div class="textCom textComNoneBack" v-if="item.send_message_type === 2"> <div class="textCom textComNoneBack" v-if="item.send_message_type === 2">
<div :class="user_id != item.to_user_id?'fileRightItem':''" v-for="(em,ind) in item.to_message_list" :key="ind"> <div :class="user_id != item.to_user_id?'fileRightItem':''" v-for="(em,ind) in item.to_message_list" :key="ind">
<span v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) !=-1"> <span class="imgView" :class="user_id != item.to_user_id?'imgViewRight':''" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) !=-1">
<el-image style="max-width: 280px;max-height: 240px;" fit="cover" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image> <el-icon class="loadingIcon" size="30" v-if="user_id != item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
<el-image style="max-width: 240px;max-height: 200px;" fit="cover" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
<el-icon class="loadingIcon" size="30" v-if="user_id === item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
</span> </span>
<span class="fileView" v-else @click="linkFile(em)"> <span class="fileView" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) ===-1" @click="linkFile(em)">
<fileType size="26px" :fileType="em.extension || em.file_type" /> <fileType size="26px" :fileType="em.extension || em.file_type" />
<span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span> <span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span>
</span> </span>
<span class="progressLine" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) ===-1 && em.showLoading">
<el-progress class="exportPopover" :text-inside="true" :show-text="false" :stroke-width="4" :percentage="em.rate" />
</span>
</div> </div>
</div> </div>
</div> </div>
@ -161,8 +165,6 @@ export default {
const userInfo = this.$TOOL.data.get("USER_INFO"); const userInfo = this.$TOOL.data.get("USER_INFO");
this.user_id = userInfo.id; this.user_id = userInfo.id;
setTimeout(()=>{ setTimeout(()=>{
this.getContactList(); this.getContactList();
},1000) },1000)
@ -171,8 +173,42 @@ export default {
}, },
methods:{ methods:{
getWsResult(res){ getWsResult(res){
if(res.data && (res.data.type == 36 || res.data.type == 38)){ if(res.data && (res.data.type == 12 || res.data.type == 35 || res.data.type == 36 || res.data.type == 38)){
switch(res.data.type) { switch(res.data.type) {
case 12:
this.msgList.forEach(item=>{
if(item.to_message_list && item.to_message_list.length>0){
item.to_message_list.forEach(em=>{
if(em.uuid && em.uuid === res.data.file_unique_id){
em.showLoading = res.data.rate !== 100;
em.rate = res.data.rate;
}
})
}
})
break;
case 35:
if(res.data.send_message_type === 2 && res.data.data.to_message){
res.data.data.to_message_list = JSON.parse(res.data.data.to_message);
}
if(res.data.data){
let obj = {
created_at: res.data.from_time,
send_message_type: res.data.send_message_type ? res.data.send_message_type : 1,
to_user_id: res.data.to_user_id,
to_message: res.data.data.to_message,
to_message_list: res.data.data.to_message_list,
from_user: {
avatar: res.data.from_avatar,
name: res.data.from_user,
}
};
this.msgList.push(obj);
setTimeout(()=>{
this.scrollDown();
},500);
}
break;
case 36: case 36:
res.data.rows.forEach((item)=>{ res.data.rows.forEach((item)=>{
if(item.send_message_type == 2){ if(item.send_message_type == 2){
@ -191,8 +227,8 @@ export default {
case 38: case 38:
if(res.data.contact_list && res.data.contact_list.length>0){ if(res.data.contact_list && res.data.contact_list.length>0){
res.data.contact_list.forEach(item=>{ res.data.contact_list.forEach(item=>{
if(item.send_message_type ==2){ if(item.to_message.send_message_type === 2){
item.to_message_list = JSON.parse(item.to_message); item.to_message_list = JSON.parse(item.to_message.to_message);
} }
}) })
} }
@ -208,9 +244,7 @@ export default {
} }
} }
break; break;
case 12:
break;
default: default:
break; break;
} }
@ -277,7 +311,6 @@ export default {
}) })
}, },
uploadFileSuccess(data){ uploadFileSuccess(data){
console.log('接口上传成功',data)
const userInfo = this.$TOOL.data.get("USER_INFO"); const userInfo = this.$TOOL.data.get("USER_INFO");
this.msgList.push({ this.msgList.push({
to_user_id:-1, to_user_id:-1,
@ -290,6 +323,10 @@ export default {
to_message_list:data, to_message_list:data,
to_message:'' to_message:''
}); });
setTimeout(()=>{
this.scrollDown();
},500)
}, },
recordsShow(){ recordsShow(){
@ -306,7 +343,6 @@ export default {
const { scrollTop } = event; const { scrollTop } = event;
if(scrollTop === 0 && this.msgList.length>0 && this.page >1){ if(scrollTop === 0 && this.msgList.length>0 && this.page >1){
this.page = this.page -1; this.page = this.page -1;
console.log('执行接口数据获取')
this.getCustomerMsgList(true) this.getCustomerMsgList(true)
} }
}, },
@ -444,6 +480,27 @@ export default {
padding: 10px; padding: 10px;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
.imgView{
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 5px;
.loadingIcon{
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
.imgViewRight{
justify-content: flex-end;
}
.fileView{ .fileView{
cursor: pointer; cursor: pointer;
color: var(--el-color-primary); color: var(--el-color-primary);
@ -543,4 +600,13 @@ export default {
} }
} }
} }
.exportPopover{
margin-bottom: 8px;
}
.exportPopover ::v-deep .el-progress-bar__innerText{
height: 100%;
display: flex;align-items: center;justify-content: flex-end;
font-size: 10px;
}
</style> </style>