增加昵称和部门的匹配
This commit is contained in:
10
api/oa/binding.js
Normal file
10
api/oa/binding.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import request from "@/util/oaRequest"
|
||||
|
||||
// 根据昵称从oa系统获取对应的部门信息
|
||||
export function getDeptNameByNickName(nicknames) {
|
||||
return request({
|
||||
url: '/fadapp/auth/dept-names-by-nicks',
|
||||
data: nicknames,
|
||||
method: "post"
|
||||
})
|
||||
}
|
||||
@@ -12,10 +12,16 @@
|
||||
</view>
|
||||
<view class="u-nav-slot" slot="center">
|
||||
<view class="chating_info" :class="{ chating_info_single: isSingle }">
|
||||
<view class="conversation_info">
|
||||
<view class="title">{{ storeCurrentConversation.showName }}</view>
|
||||
<view v-if="!isSingle && !isNotify" class="sub_title"
|
||||
>{{ groupMemberCount }}
|
||||
<view
|
||||
class="conversation_info"
|
||||
:style="isSingle ? 'flex-direction: column; align-items: center;' : 'flex-direction: row; align-items: center; justify-content: center;'"
|
||||
>
|
||||
<view class="title" :style="isSingle ? 'text-align: center;' : ''">{{ storeCurrentConversation.showName }}</view>
|
||||
<view v-if="isSingle && storeCurrentConversation.deptName" style="margin-top:6rpx; display: flex; justify-content: center;">
|
||||
<text :style="{backgroundColor: storeCurrentConversation.color, color: '#fff', padding: '2px 10px', borderRadius: '10px', fontSize: '20rpx', display: 'inline-block', textAlign: 'center'}">{{ storeCurrentConversation.deptName }}</text>
|
||||
</view>
|
||||
<view v-if="!isSingle && !isNotify" class="sub_title" style="margin-left: 8rpx;">
|
||||
{{ groupMemberCount }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<view id="scroll_wrap">
|
||||
<u-loadmore nomoreText="" :status="loadMoreStatus" />
|
||||
<view
|
||||
v-for="item in storeHistoryMessageList"
|
||||
v-for="item in messageListWithDept"
|
||||
:key="item.clientMsgID"
|
||||
>
|
||||
<message-item-render
|
||||
@@ -36,6 +36,7 @@
|
||||
<script>
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
import MessageItemRender from "./MessageItem/index.vue";
|
||||
import { withDeptName } from '@/util/withDeptName';
|
||||
|
||||
export default {
|
||||
name: "",
|
||||
@@ -58,6 +59,7 @@ export default {
|
||||
messageLoadState: {
|
||||
loading: false,
|
||||
},
|
||||
messageListWithDept: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -75,11 +77,39 @@ export default {
|
||||
return this.messageLoadState.loading ? "loading" : "loadmore";
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
storeHistoryMessageList: {
|
||||
handler: 'updateMessageListWithDept',
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadMessageList();
|
||||
},
|
||||
methods: {
|
||||
...mapActions("message", ["getHistoryMesageList"]),
|
||||
async updateMessageListWithDept() {
|
||||
// 取所有发送者昵称
|
||||
const allSenders = this.storeHistoryMessageList.map(item => ({ showName: item.senderNickname }));
|
||||
// 获取部门信息
|
||||
const deptInfoArr = await withDeptName(allSenders);
|
||||
// 构建映射
|
||||
const deptMap = {};
|
||||
deptInfoArr.forEach((obj, idx) => {
|
||||
if (obj.deptName) {
|
||||
deptMap[this.storeHistoryMessageList[idx].sendID] = {
|
||||
deptName: obj.deptName,
|
||||
color: obj.color
|
||||
};
|
||||
}
|
||||
});
|
||||
// 合并到消息
|
||||
this.messageListWithDept = this.storeHistoryMessageList.map(msg => {
|
||||
const dept = deptMap[msg.sendID];
|
||||
return dept ? { ...msg, deptName: dept.deptName, color: dept.color } : { ...msg };
|
||||
});
|
||||
},
|
||||
messageItemRender(clientMsgID) {
|
||||
if (
|
||||
this.initFlag &&
|
||||
|
||||
@@ -19,7 +19,12 @@
|
||||
>
|
||||
<text>{{ formattedMessageTime }}</text>
|
||||
<text style="margin-left: 2rpx; margin-right: 2rpx">{{ "" }}</text>
|
||||
<text v-if="!isSingle">{{ source.senderNickname }}</text>
|
||||
<text v-if="!isSingle">
|
||||
{{ source.senderNickname }}
|
||||
</text>
|
||||
<template v-if="!isSingle && source.deptName">
|
||||
<text class="dept_name" :style="{backgroundColor: source.color, color: '#fff', padding: '2px 8px', borderRadius: '8px', fontSize: '20rpx', marginLeft: '8rpx'}">{{ source.deptName }}</text>
|
||||
</template>
|
||||
</view>
|
||||
<view class="message_send_state_box">
|
||||
<view
|
||||
@@ -384,6 +389,13 @@ export default {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
margin-bottom: 6rpx;
|
||||
align-items: center;
|
||||
.dept_name {
|
||||
display: inline-block;
|
||||
line-height: 1.2;
|
||||
vertical-align: middle;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.message_content_wrap {
|
||||
|
||||
@@ -10,7 +10,11 @@
|
||||
size="46"
|
||||
/>
|
||||
<view class="details">
|
||||
<text class="conversation_name">{{ source.showName }}</text>
|
||||
<text class="conversation_name">{{ source.showName }}
|
||||
<template v-if="!isGroup && source.deptName">
|
||||
<text class="dept_name" :style="{backgroundColor: source.color, color: '#fff', padding: '2px 8px', borderRadius: '8px', fontSize: '20rpx', marginLeft: '8rpx'}">{{ source.deptName }}</text>
|
||||
</template>
|
||||
</text>
|
||||
<view class="lastest_msg_wrap">
|
||||
<text class="lastest_msg_content">{{ latestMessage }}</text>
|
||||
</view>
|
||||
@@ -106,6 +110,14 @@ export default {
|
||||
@include nomalEllipsis();
|
||||
max-width: 40vw;
|
||||
font-size: 28rpx;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.dept_name {
|
||||
display: inline-block;
|
||||
line-height: 1.2;
|
||||
vertical-align: middle;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.lastest_msg_wrap {
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
@scrolltolower="scrolltolower"
|
||||
>
|
||||
<conversation-item
|
||||
v-for="item in storeConversationList"
|
||||
v-for="item in conversationListWithDeptName"
|
||||
:key="item.conversationID"
|
||||
:source="item"
|
||||
ref="conversationItem"
|
||||
@@ -33,6 +33,8 @@
|
||||
import { mapGetters } from "vuex";
|
||||
import ChatHeader from "./components/ChatHeader.vue";
|
||||
import ConversationItem from "./components/ConversationItem.vue";
|
||||
import { getDeptNameByNickName } from "@/api/oa/binding";
|
||||
import { withDeptName } from '@/util/withDeptName';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -48,11 +50,19 @@ export default {
|
||||
doubleClick: 0,
|
||||
triggered: false,
|
||||
refreshing: false,
|
||||
conversationListWithDeptName: [], // 新增
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["storeConversationList", "storeIsSyncing", "storeProgress"]),
|
||||
},
|
||||
watch: {
|
||||
storeConversationList: {
|
||||
handler: 'updateConversationListWithDeptName',
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$nextTick(() => plus.navigator.closeSplashscreen());
|
||||
},
|
||||
@@ -87,6 +97,10 @@ export default {
|
||||
closeAllSwipe() {
|
||||
this.$refs.swipeWrapperRef.closeAll();
|
||||
},
|
||||
// 新增:异步获取部门名和颜色
|
||||
async updateConversationListWithDeptName() {
|
||||
this.conversationListWithDeptName = await withDeptName(this.storeConversationList);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
76
util/withDeptName.js
Normal file
76
util/withDeptName.js
Normal file
@@ -0,0 +1,76 @@
|
||||
import { getDeptNameByNickName } from '@/api/oa/binding';
|
||||
|
||||
/*
|
||||
* withDeptName 高阶函数
|
||||
* ---------------------------------------------
|
||||
* 用途:
|
||||
* 为会话列表(如IM会话、联系人等)异步注入部门名称和部门颜色,
|
||||
* 使前端组件可直接渲染带部门信息的会话项。
|
||||
*
|
||||
* 参数:
|
||||
* @param {Array<Object>} conversationList - 原始会话对象数组,
|
||||
* 每项需包含唯一标识(如 showName 字段)。
|
||||
*
|
||||
* 返回:
|
||||
* @returns {Promise<Array<Object>>} - 返回一个 Promise,
|
||||
* 解析后为带有部门名(deptName)和部门色(color)的会话对象数组。
|
||||
* 若某项无部门信息,则不包含 deptName/color 字段。
|
||||
*
|
||||
* 使用场景:
|
||||
* - 会话列表、联系人列表等需要展示部门信息的场景。
|
||||
* - 适用于任何需要根据昵称批量获取部门名的业务。
|
||||
* - 可在 watch、生命周期、异步数据流等场景下调用。
|
||||
*
|
||||
* 示例:
|
||||
* import { withDeptName } from '@/util/withDeptName';
|
||||
* const result = await withDeptName(conversationList);
|
||||
* // result: [{...item, deptName, color}, ...]
|
||||
*
|
||||
* 注意事项:
|
||||
* - 依赖 getDeptNameByNickName 接口,需保证接口可用。
|
||||
* - 仅为获取到真实部门名的项添加 deptName/color 字段。
|
||||
* - 若接口异常或无部门名,则原项不变。
|
||||
* - color 为自动分配的浅色系,便于前端高亮展示。
|
||||
* - 建议在数据源变更时重新调用。
|
||||
*/
|
||||
export async function withDeptName(conversationList) {
|
||||
const nicknames = conversationList.map(item => item.showName);
|
||||
let deptMap = {};
|
||||
try {
|
||||
const res = await getDeptNameByNickName(nicknames);
|
||||
if (Array.isArray(res.data)) {
|
||||
res.data.forEach(obj => {
|
||||
if (obj && obj.nickName && obj.deptName) {
|
||||
deptMap[obj.nickName] = obj.deptName;
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
deptMap = {};
|
||||
}
|
||||
const colorList = [
|
||||
'#FFB6C1', '#87CEFA', '#90EE90', '#FFD700', '#FFA07A',
|
||||
'#9370DB', '#00CED1', '#FF69B4', '#B0C4DE', '#40E0D0',
|
||||
];
|
||||
const deptNameSet = new Set();
|
||||
Object.values(deptMap).forEach(deptName => {
|
||||
deptNameSet.add(deptName);
|
||||
});
|
||||
const deptNameArr = Array.from(deptNameSet);
|
||||
const deptColorMap = {};
|
||||
deptNameArr.forEach((dept, idx) => {
|
||||
deptColorMap[dept] = colorList[idx % colorList.length];
|
||||
});
|
||||
return conversationList.map(item => {
|
||||
const deptName = deptMap[item.showName];
|
||||
if (deptName) {
|
||||
return {
|
||||
...item,
|
||||
deptName,
|
||||
color: deptColorMap[deptName] || ''
|
||||
}
|
||||
} else {
|
||||
return { ...item }
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user