完善消息列表逻辑
This commit is contained in:
huangdeliang
parent
ffe1c18202
commit
45e0d59be0
stdiet-custom/src/main
java/com/stdiet/custom/service/impl
resources/mapper/custom
stdiet-ui/src
@ -170,6 +170,7 @@ public class SysServicesTopicServiceImp implements ISysServicesTopicService {
|
||||
JSONObject dataObj = new JSONObject();
|
||||
dataObj.put("count", counts.get(i).getCount());
|
||||
dataObj.put("topicId", topic.getTopicId());
|
||||
dataObj.put("uid", topic.getFromUid());
|
||||
|
||||
JSONObject msgObj = new JSONObject();
|
||||
msgObj.put("type", WsUtils.WS_TYPE_NEW_CUSTOMER_REPLY);
|
||||
|
||||
@ -36,8 +36,8 @@
|
||||
) AS status
|
||||
LEFT JOIN (SELECT topic_id, uid, del_flag FROM sys_services_topic ) AS topic USING(topic_id)
|
||||
WHERE del_flag = 0
|
||||
ORDER BY `read` ASC, update_time DESC
|
||||
) AS userList GROUP BY uid
|
||||
ORDER BY `read` ASC, update_time DESC
|
||||
</select>
|
||||
|
||||
<select id="selectTopicListByUid" parameterType="SysServicesTopic" resultMap="SysServicesTopicResult">
|
||||
|
||||
@ -96,8 +96,27 @@ const actions = {
|
||||
async fetchTopicListApi({ dispatch, commit, rootGetters, state }, payload) {
|
||||
// prettier-ignore
|
||||
const { roles: [role], userId } = rootGetters;
|
||||
const { customerList } = state;
|
||||
const { fromUid } = payload;
|
||||
commit("save", { selCusId: fromUid, topicLoading: true });
|
||||
const newCustomerList = JSON.parse(JSON.stringify(customerList));
|
||||
|
||||
const tarIdx = newCustomerList.findIndex(obj => obj.reSort);
|
||||
if (tarIdx > -1) {
|
||||
const [tarCustomer] = newCustomerList.splice(tarIdx, 1);
|
||||
const injectIdx = newCustomerList.findIndex(obj => obj.read == 1);
|
||||
tarCustomer.reSort = false;
|
||||
if (injectIdx === -1) {
|
||||
newCustomerList.splice(newCustomerList.length, 0, tarCustomer);
|
||||
} else {
|
||||
newCustomerList.splice(injectIdx, 0, tarCustomer);
|
||||
}
|
||||
}
|
||||
|
||||
commit("save", {
|
||||
selCusId: fromUid,
|
||||
topicLoading: true,
|
||||
customerList: newCustomerList
|
||||
});
|
||||
const result = await fetchTopicList({
|
||||
role,
|
||||
uid: userId,
|
||||
@ -106,12 +125,14 @@ const actions = {
|
||||
let mTopicList = [];
|
||||
if (result.code === 200 && result.rows.length) {
|
||||
// 默认展示第一个
|
||||
const [defTopic] = result.rows;
|
||||
dispatch("fetchTopicDetailActions", {
|
||||
topicId: defTopic.topicId,
|
||||
id: defTopic.id,
|
||||
uid: defTopic.uid
|
||||
});
|
||||
setTimeout(() => {
|
||||
const [defTopic] = result.rows;
|
||||
dispatch("fetchTopicDetailActions", {
|
||||
topicId: defTopic.topicId,
|
||||
id: defTopic.id,
|
||||
uid: defTopic.uid
|
||||
});
|
||||
}, 100);
|
||||
mTopicList = result.rows;
|
||||
}
|
||||
commit("save", {
|
||||
@ -121,7 +142,13 @@ const actions = {
|
||||
},
|
||||
async fetchTopicDetailActions({ commit, dispatch, state }, payload) {
|
||||
const { topicId, id = 0, uid } = payload;
|
||||
const { healthyData, planList, customerData } = state;
|
||||
const {
|
||||
healthyData,
|
||||
planList,
|
||||
customerData,
|
||||
topicList,
|
||||
customerList
|
||||
} = state;
|
||||
commit("save", { selTopicId: topicId, detailLoading: true });
|
||||
// 客户信息
|
||||
if (healthyData.customerId !== parseInt(uid)) {
|
||||
@ -138,7 +165,23 @@ const actions = {
|
||||
//
|
||||
const result = await fetchTopicDetail({ topicId, id });
|
||||
if (result.code === 200) {
|
||||
commit("save", { detailData: result.data[0], detailLoading: false });
|
||||
// 设置已读
|
||||
const newTopicList = JSON.parse(JSON.stringify(topicList));
|
||||
const preState = newTopicList.some(t => t.read == 0);
|
||||
newTopicList.find(obj => obj.topicId === topicId).read = 1;
|
||||
const newCutomers = JSON.parse(JSON.stringify(customerList));
|
||||
const afterState = newTopicList.some(t => t.read == 0);
|
||||
if (!afterState) {
|
||||
const tarCustomer = newCutomers.find(cus => cus.uid === uid);
|
||||
tarCustomer.read = 1;
|
||||
tarCustomer.reSort = preState;
|
||||
}
|
||||
commit("save", {
|
||||
detailData: result.data[0],
|
||||
detailLoading: false,
|
||||
topicList: newTopicList,
|
||||
customerList: newCutomers
|
||||
});
|
||||
}
|
||||
},
|
||||
async getCustomerFileActions({ commit }, payload) {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="message_browser_wrapper">
|
||||
<!-- 客户列表 -->
|
||||
<div class="customers_list" @scroll="handleOnScroll" v-loading="cusLoading">
|
||||
<div v-if="customerList && customerList.length">
|
||||
<div
|
||||
@ -10,7 +11,11 @@
|
||||
}`"
|
||||
@click="handleOnCustomerClick(customer)"
|
||||
>
|
||||
<span class="customer_avatar">
|
||||
<span
|
||||
:class="`customer_avatar ${
|
||||
!customer.read ? 'customer_avatar_unread' : ''
|
||||
}`"
|
||||
>
|
||||
<el-avatar size="medium" :src="customer.avatar">
|
||||
{{ customer.name && customer.name.substr(-1) }}
|
||||
</el-avatar>
|
||||
@ -21,6 +26,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 客户问题列表 -->
|
||||
<div class="topic_list" v-loading="topicLoading">
|
||||
<div v-if="topicList && topicList.length">
|
||||
<div
|
||||
@ -49,6 +55,7 @@
|
||||
</div>
|
||||
<div v-else class="topic_list_empty">暂无消息</div>
|
||||
</div>
|
||||
<!-- 问题对话详情列表 -->
|
||||
<div class="topic_detail" v-loading="detailLoading">
|
||||
<div class="topic_detail_list">
|
||||
<div
|
||||
@ -136,8 +143,8 @@ export default {
|
||||
setTimeout(() => {
|
||||
const itemElm = document.querySelector(".topic_item");
|
||||
if (itemElm) {
|
||||
console.log(itemElm);
|
||||
this.itemWidth = itemElm.clientWidth - 32 - 20 - 80;
|
||||
// console.log(itemElm);
|
||||
this.itemWidth = itemElm.clientWidth - 24 - 20 - 50 - 4;
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
@ -167,28 +174,29 @@ export default {
|
||||
},
|
||||
handleOnMessage({ data }) {
|
||||
if (data.type === keys.WS_TYPE_MESSAGE_COUNT) {
|
||||
const { data: tData } = data.data;
|
||||
const time = dayjs(tData.createTime).format("YYYY-MM-DD HH:mm:ss");
|
||||
const newTopicList = [
|
||||
{
|
||||
id: tData.id,
|
||||
content: tData.content,
|
||||
createTime: time,
|
||||
img: tData.img,
|
||||
topicId: tData.topicId,
|
||||
role: "customer",
|
||||
uid: tData.uid,
|
||||
updateTime: time,
|
||||
topicType: tData.topicType,
|
||||
read: tData.read,
|
||||
},
|
||||
...this.topicList,
|
||||
];
|
||||
this.save({
|
||||
topicList: newTopicList,
|
||||
const { data: tData, count } = data.data;
|
||||
this.updateUnreadCount({
|
||||
msgUnreadCount: count,
|
||||
});
|
||||
if (tData.uid === selCusId) {
|
||||
this.fetchTopicListApi({
|
||||
fromUid: tData.uid,
|
||||
});
|
||||
} else {
|
||||
// 调整用户列表顺序
|
||||
const newCustomers = JSON.parse(JSON.stringify(this.customerList));
|
||||
const tarIdx = newCustomers.findIndex((obj) => obj.uid === tData.uid);
|
||||
if (tarIdx > -1) {
|
||||
const [tarCustomer] = newCustomers.splice(tarIdx, 1);
|
||||
tarCustomer.read = 0;
|
||||
newCustomers.splice(0, 0, tarCustomer);
|
||||
this.save({
|
||||
customerList: newCustomers,
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (data.type === keys.WS_TYPE_NEW_CUSTOMER_REPLY) {
|
||||
const { count, topicId } = data.data;
|
||||
const { count, topicId, uid } = data.data;
|
||||
this.updateUnreadCount({
|
||||
msgUnreadCount: count,
|
||||
});
|
||||
@ -197,13 +205,24 @@ export default {
|
||||
(obj) => obj.topicId === topicId
|
||||
);
|
||||
if (tarTopic) {
|
||||
console.log({ tarTopic });
|
||||
this.fetchTopicDetailActions({
|
||||
topicId,
|
||||
id: tarTopic.id,
|
||||
uid: tarTopic.uid,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 调整用户列表顺序
|
||||
const newCustomers = JSON.parse(JSON.stringify(this.customerList));
|
||||
const tarIdx = newCustomers.findIndex((obj) => obj.uid === uid);
|
||||
if (tarIdx > -1) {
|
||||
const [tarCustomer] = newCustomers.splice(tarIdx, 1);
|
||||
tarCustomer.read = 0;
|
||||
newCustomers.splice(0, 0, tarCustomer);
|
||||
this.save({
|
||||
customerList: newCustomers,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -300,11 +319,29 @@ export default {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: #dedede;
|
||||
}
|
||||
|
||||
.customer_avatar {
|
||||
}
|
||||
|
||||
.customer_avatar_unread {
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #d96969;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.customer_name {
|
||||
margin-left: 8px;
|
||||
overflow: hidden;
|
||||
@ -374,7 +411,7 @@ export default {
|
||||
}
|
||||
|
||||
.topic_info {
|
||||
flex: 0 0 80px;
|
||||
flex: 0 0 50px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -119,7 +119,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
planList(val, newVal) {
|
||||
console.log({ val, newVal });
|
||||
// console.log({ val, newVal });
|
||||
this.cusOutId = val.reduce((str, cur) => {
|
||||
if (!str && cur.recipesId && cur.reviewStatus === 2) {
|
||||
str = cur.outId;
|
||||
@ -184,7 +184,7 @@ export default {
|
||||
);
|
||||
},
|
||||
handleOnSendChange(val, data) {
|
||||
console.log({ val, data });
|
||||
// console.log({ val, data });
|
||||
const { id } = data;
|
||||
if (data.reviewStatus === 2) {
|
||||
this.updateRecipesPlanActions({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user