This commit is contained in:
fan 2023-05-22 13:47:32 +08:00
commit e30494d404
8 changed files with 839 additions and 323 deletions

View File

@ -187,3 +187,35 @@ export function setGroupReadMessage(groupId, data) {
data data
}); });
} }
/**
* 发送私聊文字信息
* @param {String} groupId 房间号
* @param {Object} data
* @param {Number} data.memberId 角色id
* @param {String} data.content 文字内容
* @returns
*/
export function sendPrivateText(groupId, data) {
return request({
url: `/simulation/${groupId}/operate/Conversation_Group_Private_Text_Chat`,
method: 'post',
data
});
}
/**
* 发送私聊BASE64信息
* @param {String} groupId 房间号
* @param {Object} data
* @param {Number} data.memberId 角色id
* @param {String} data.fileBase64Str 文件base64码
* @returns
*/
export function sendPrivateBase64(groupId, data) {
return request({
url: `/simulation/${groupId}/operate/Conversation_Group_Private_Audio_Base64`,
method: 'post',
data
});
}

View File

@ -514,7 +514,9 @@ export default {
CMD_Conversation_Chat_Text: {value: 'Conversation_Chat_Text', label: '发送文本消息'}, CMD_Conversation_Chat_Text: {value: 'Conversation_Chat_Text', label: '发送文本消息'},
CMD_Conversation_Chat_Audio_Base64: {value: 'Conversation_Chat_Audio_Base64', label: '发送语音消息'}, CMD_Conversation_Chat_Audio_Base64: {value: 'Conversation_Chat_Audio_Base64', label: '发送语音消息'},
CMD_Conversation_Group_Text_Chat: {value: 'Conversation_Group_Text_Chat', label: '发送会话群文字消息'}, CMD_Conversation_Group_Text_Chat: {value: 'Conversation_Group_Text_Chat', label: '发送会话群文字消息'},
CMD_Conversation_Group_Audio_Base64: {value: 'Conversation_Group_Audio_Base64', label: '发送会话群语音消息'} CMD_Conversation_Group_Audio_Base64: {value: 'Conversation_Group_Audio_Base64', label: '发送会话群语音消息'},
CMD_Conversation_Group_Private_Text_Chat: {value: 'Conversation_Group_Private_Text_Chat', label: '发送私聊文字消息'},
CMD_Conversation_Group_Private_Audio_Base64: {value: 'Conversation_Group_Private_Audio_Base64', label: '发送私聊语音消息'}
}, },
PSL: { PSL: {
CMD_PSL_PRESS_BUTTON: {value: 'PSL_PRESS_BUTTON', label: 'PSL按钮操作'} CMD_PSL_PRESS_BUTTON: {value: 'PSL_PRESS_BUTTON', label: 'PSL按钮操作'}

View File

@ -30,8 +30,8 @@ import TrainingTip from './trainingList/trainingTip';
import TrainingPositionTip from './trainingList/trainingPositionTip.vue'; import TrainingPositionTip from './trainingList/trainingPositionTip.vue';
import TrainingMenu from './trainingList/trainingMenu'; import TrainingMenu from './trainingList/trainingMenu';
import TrainingDesign from './trainingDesign/designPane.vue'; import TrainingDesign from './trainingDesign/designPane.vue';
// import ChatBox from './newChat/index.vue'; import ChatBox from './newChat/index.vue';
import ChatBox from './chatBox'; // import ChatBox from './chatBox';
import TrainingLeftSlider from './trainingList/trainingLeftSlider'; import TrainingLeftSlider from './trainingList/trainingLeftSlider';
import LineBoard from './lineBoard'; import LineBoard from './lineBoard';
import BottomTable from './bottomTable'; import BottomTable from './bottomTable';

View File

@ -0,0 +1,138 @@
<template>
<div class="main">
<div class="left">
<div class="searchBox">
<el-input v-model="queryMember" placeholder="请输入搜索人员" clearable>
<el-button slot="append" icon="el-icon-search" />
</el-input>
</div>
<div class="treeBox">
<el-tree
ref="tree"
:data="memberTreeData"
node-key="id"
:props="defaultProps"
:default-expand-all="false"
:filter-node-method="filterNode"
@node-click="nodeClick"
>
<span slot-scope="{ data }" class="custom-tree-node">
<span>{{ data.labelName }}</span>
</span>
</el-tree>
</div>
</div>
<div class="right">
<el-form ref="form" :model="activeNode" label-width="80px" size="small">
<el-form-item v-if="activeNode.labelName" :label="activeNode.type? '名称:': '部门:'">
<span>{{ activeNode.labelName }}</span>
</el-form-item>
<el-form-item v-if="activeNode.type" label="部门:">
<span>{{ activeNode.typeName }}</span>
</el-form-item>
<el-form-item v-if="activeNode.children" label="人数:">
<span>{{ activeNode.children.length }}</span>
</el-form-item>
<el-form-item v-if="showSendBtn">
<el-button type="primary" style="width: 200px;" @click="sendPrivateMsg">发消息</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: 'AddressBook',
components: {
},
props: {
memberTreeData: {
type: Array,
default: () => {
return [];
}
}
},
data() {
return {
activeTrains: [],
queryMember: '',
defaultProps: {
children: 'children',
label: 'labelName'
},
activeNode: {}
};
},
computed: {
memberData() {
return this.$store.state.training.memberData;
},
showSendBtn() {
let s = false;
if (this.activeNode.type) {
s = true;
}
return s;
}
},
watch: {
queryMember(val) {
this.$refs.tree.filter(val);
}
},
mounted() {
},
beforeDestroy() {
},
methods: {
sendPrivateMsg() {
this.$emit('sendPrivateMsg', this.activeNode);
},
nodeClick(data, node) {
this.activeNode = { ...data };
if (node.isLeaf) {
this.activeNode.typeName = node.parent.data.labelName;
}
},
filterNode(value, data) {
let flag = false;
if (this.memberData[data.id] && this.memberData[data.id].nickName) {
flag = this.memberData[data.id].nickName.indexOf(value) !== -1;
}
let driverNoShow = true;
if (data.type && data.type === 'DRIVER' && !this.activeTrains.includes(data.deviceCode)) {
driverNoShow = false;
}
return (data.labelName.indexOf(value) !== -1 || flag) && driverNoShow;
}
}
};
</script>
<style lang='scss' scoped>
.main {
height: 100%;
width: 100%;
display: flex;
.left{
width: 300px;
.treeBox {
height: calc(100% - 40px);
overflow: auto;
}
}
.right {
height: 100%;
width: calc(100% - 300px);
display: flex;
justify-content: center;
align-items: center;
border-left: 1px solid #ccc;
}
}
</style>

View File

@ -27,7 +27,7 @@
</div> </div>
<div class="chat-box-footer"> <div class="chat-box-footer">
<el-input v-model="textContent" size="small" placeholder="请输入会话文字点击T发送" style="flex: 1; margin-left: 5px;" :rows="1" /> <el-input v-model="textContent" size="small" placeholder="请输入会话文字点击T发送" style="flex: 1; margin-left: 5px;" :rows="1" />
<el-button :id="sendTextId" size="mini" class="chat-box-footer-create" :disabled="contentSend || !id" @click="sendText">T</el-button> <el-button :id="sendTextId" size="mini" class="chat-box-footer-create" :disabled="contentSend || (!id && !privateChatId)" @click="sendText">T</el-button>
<el-button :id="recordVoice" class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" :disabled="audioPlay || (trainingDesign && !trainingSwitch) || !id" size="mini" type="primary" @click="startRecording()"> <el-button :id="recordVoice" class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" :disabled="audioPlay || (trainingDesign && !trainingSwitch) || !id" size="mini" type="primary" @click="startRecording()">
<el-progress id="voice_progress_bar" type="circle" :show-text="false" :percentage="100/maxSeconds*seconds" :width="40" :stroke-width="2" status="success" /> <el-progress id="voice_progress_bar" type="circle" :show-text="false" :percentage="100/maxSeconds*seconds" :width="40" :stroke-width="2" status="success" />
<i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancelRecording()" /> <i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancelRecording()" />
@ -58,6 +58,10 @@ export default {
groupName: { groupName: {
type: String, type: String,
required:true required:true
},
privateChatId: {
type: String,
required: true
} }
}, },
data() { data() {
@ -130,6 +134,7 @@ export default {
}, },
beforeDestroy() { beforeDestroy() {
this.contentDom.onscroll = null; this.contentDom.onscroll = null;
this.contentDom = '';
}, },
methods: { methods: {
setIsBottomFn() { setIsBottomFn() {
@ -189,7 +194,7 @@ export default {
return name; return name;
}, },
sendText() { sendText() {
if (!this.id || !this.textContent) { return; } if ((!this.id && !this.privateChatId) || !this.textContent) { return; }
const operate = { const operate = {
over: true, over: true,
cmdType: CMD.Conversation.CMD_Conversation_Group_Text_Chat, cmdType: CMD.Conversation.CMD_Conversation_Group_Text_Chat,
@ -201,6 +206,11 @@ export default {
content: this.textContent content: this.textContent
} }
}; };
if (this.privateChatId) {
operate.cmdType = CMD.Conversation.CMD_Conversation_Group_Private_Text_Chat;
delete operate.param.id;
operate.param.memberId = this.privateChatId;
}
this.$store.dispatch('trainingNew/next', operate).then(({ valid }) => { this.$store.dispatch('trainingNew/next', operate).then(({ valid }) => {
if (valid) { if (valid) {
this.textContent = ''; this.textContent = '';
@ -237,6 +247,11 @@ export default {
fileBase64Str: BaseURL fileBase64Str: BaseURL
} }
}; };
if (that.privateChatId) {
operate.cmdType = CMD.Conversation.CMD_Conversation_Group_Private_Audio_Base64;
delete operate.param.id;
operate.param.memberId = that.privateChatId;
}
that.$store.dispatch('trainingNew/next', operate).then(({ valid }) => { that.$store.dispatch('trainingNew/next', operate).then(({ valid }) => {
if (valid) { if (valid) {
that.textContent = ''; that.textContent = '';

View File

@ -16,7 +16,7 @@
</div> </div>
</div> </div>
<div class="dialogBody"> <div class="dialogBody">
<div v-show="false" class="leftBox"> <div class="leftBox">
<div class="leftLogo"> <div class="leftLogo">
<img :src="logoImgUrl" :alt="logoImgUrl"> <img :src="logoImgUrl" :alt="logoImgUrl">
</div> </div>
@ -25,7 +25,7 @@
<div class="tabLabel">{{ item.label }}</div> <div class="tabLabel">{{ item.label }}</div>
</div> </div>
</div> </div>
<div v-if="tabActive==0" class="contentBox"> <div v-show="tabActive==0" class="contentBox">
<div class="middle"> <div class="middle">
<div class="middleTop"> <div class="middleTop">
<div v-for="(item, index) in filterTab" :key="index" class="filterType pointer" :class="{active: index === filterActive}" @click="filterClick(index)"> <div v-for="(item, index) in filterTab" :key="index" class="filterType pointer" :class="{active: index === filterActive}" @click="filterClick(index)">
@ -39,7 +39,7 @@
</div> </div>
</div> </div>
<div class="middleMain"> <div class="middleMain">
<div v-for="(item, index) in groupList" :key="index" class="row pointer" :class="{active: item.id === id}" @click="groupClick(item)"> <div v-for="(item, index) in chatList" :ref="'dom'+index" :key="index" class="row pointer" :class="{active: item.id === id || (privateChatId && privateChatId == getPrivateChatId(item))}" @click="groupClick(item)" @contextmenu.prevent.stop="showMenu($event,item)">
<div v-show="false" class="groupIcon"> <div v-show="false" class="groupIcon">
<img :src="getImgUrl(item.imageUrl)" alt=""> <img :src="getImgUrl(item.imageUrl)" alt="">
</div> </div>
@ -56,28 +56,36 @@
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<chat-content :id="id" :group-name="groupName" :message-list="activeMessageList" /> <chat-content :id="id" :group-name="groupName" :private-chat-id="privateChatId" :message-list="activeMessageList" />
</div> </div>
</div> </div>
<div v-else-if="tabActive==1">文档</div> <div v-show="tabActive==1" class="contentBox">
<div v-else-if="tabActive==2">工作台</div> <address-book ref="addressBook" :member-tree-data="memberTreeData" @sendPrivateMsg="sendPrivateMsg" />
<div v-else-if="tabActive==3">通讯录</div> </div>
</div> </div>
<edit-group ref="editGroup" /> <edit-group ref="editGroup" :member-tree-data="memberTreeData" />
<pop-menu ref="popMenu" :menu="menu" />
<dialog-member ref="dialogMember" :member-tree-data="memberTreeData" @updateLeaderId="updateLeaderId" />
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import {mapGetters} from 'vuex'; import {mapGetters} from 'vuex';
import { getGroupList, setGroupReadMessage } from '@/api/newChat'; import { getGroupList, setGroupReadMessage, updateGroupName, updateGroupLeader } from '@/api/newChat';
import { timestampFormat } from '@/utils/date'; import { timestampFormat } from '@/utils/date';
import ChatContent from './chatContent'; import ChatContent from './chatContent';
import EditGroup from './editGroup'; import EditGroup from './editGroup';
import AddressBook from './addressBook';
import PopMenu from '@/components/PopMenu';
import DialogMember from './dialogMember.vue';
export default { export default {
name: '', name: 'ChatDialog',
components: { components: {
ChatContent, ChatContent,
EditGroup EditGroup,
AddressBook,
PopMenu,
DialogMember
}, },
props: { props: {
@ -88,8 +96,6 @@ export default {
dialogVisible: false, dialogVisible: false,
tabs: [ tabs: [
{label:'消息', icon:'el-icon-chat-dot-square'}, {label:'消息', icon:'el-icon-chat-dot-square'},
{label:'文档', icon:'el-icon-document'},
{label:'工作台', icon:'el-icon-menu'},
{label:'通讯录', icon:'el-icon-notebook-1'} {label:'通讯录', icon:'el-icon-notebook-1'}
], ],
tabActive: 0, tabActive: 0,
@ -101,11 +107,12 @@ export default {
// {label: '', value: ''} // {label: '', value: ''}
], ],
filterActive: 0, filterActive: 0,
groupList: [ groupList: [],
// {name: '', imageUrl: '', memberList:[], messageList: [{content: 'I ', time: '2023-04-20 15:08:55'}]}, id: 0, // id
// {name: '', imageUrl: '', memberList:[],messageList: [{content: '2线14:58 Y04', time: '2023-04-20 15:08:55'}], isMute: true} privateChatId: '', // id
], memberTreeData: [],
id: 0 // id menu: [], //
noIdChatList: [] // id
}; };
}, },
computed: { computed: {
@ -116,13 +123,23 @@ export default {
myMemberId() { myMemberId() {
return this.$store.state.training.myMemberId; return this.$store.state.training.myMemberId;
}, },
memberList() {
return this.$store.state.training.memberList;
},
memberData() { memberData() {
return this.$store.state.training.memberData; return this.$store.state.training.memberData;
}, },
chatList() {
const list = JSON.parse(JSON.stringify(this.groupList));
this.noIdChatList.forEach(item => {
list.splice(item.sortIndex, 0, item);
});
return list;
},
activeMessageList() { activeMessageList() {
let list = []; let list = [];
const find = this.groupList.find(item => { const find = this.groupList.find(item => {
return item.id == this.id; return item.id == this.id || (this.privateChatId && this.privateChatId == this.getPrivateChatId(item));
}); });
if (find) { if (find) {
list = find.messageList; list = find.messageList;
@ -167,13 +184,35 @@ export default {
} }
this.getGroupList(); this.getGroupList();
}, },
'$store.state.socket.conversationGroup.UPDATE_NAME': function(val) {
if (val.messageTips) {
this.$message.success(`${val.messageTips}`);
}
this.getGroupList();
},
'$store.state.socket.conversationGroup.UPDATE_MEMBER': function(val) {
if (val.messageTips) {
this.$message.success(`${val.messageTips}`);
}
this.getGroupList();
},
'$store.state.socket.conversationGroup.EXIT': function(val) {
if (val.messageTips) {
this.$message.success(`${val.messageTips}`);
}
this.getGroupList();
},
myMemberId() { myMemberId() {
this.getGroupList(); this.getGroupList();
},
memberList () {
this.getTreeData();
} }
}, },
mounted() { mounted() {
}, },
created() { created() {
this.getTreeData();
this.getBaseInfo(); this.getBaseInfo();
this.getGroupList(); this.getGroupList();
}, },
@ -181,6 +220,346 @@ export default {
this.handleClose(); this.handleClose();
}, },
methods: { methods: {
showMenu(event, item) {
this.groupClick(item);
this.initMenu(item);
const point = { x: event.x, y: event.y };
if (this.$refs && this.$refs.popMenu && this.menu && this.menu.length) {
this.$refs.popMenu.resetShowPosition(point);
}
},
closeMenu() {
if (this.$refs && this.$refs.popMenu) {
this.$refs.popMenu.close();
}
},
groupSet(item) {
this.$refs.editGroup.doShow(item.groupInfo, item.label);
},
editGroupName(item) {
this.$prompt('请修改群名称', '提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
inputValue: item.groupInfo.name
}).then(suc => {
if (!item.groupInfo || !item.groupInfo.id) { return; }
const data = {
id: item.groupInfo.id,
name: suc.value
};
updateGroupName(this.groupId, data).then(res => {
this.getGroupList();
this.$message.success('修改群名称成功!');
}).catch(err => {
this.$message.error(`修改群名称失败!,${err.message}`);
});
});
},
editGroupLeader(item) {
this.$refs.dialogMember.doShow(item.groupInfo, item.label);
},
updateLeaderId(param) {
updateGroupLeader(this.groupId, param).then(res => {
this.getGroupList();
this.$message.success('修改群主成功!');
}).catch(err => {
this.$message.error(`修改群主失败!,${err.message}`);
});
},
initMenu(item) {
const menuNormal = (item) => [
{
label: '查看群设置',
handler: this.groupSet,
groupInfo: item,
isDisabled: (item) => {
return false;
},
isShow: (item) => item.type === 'GROUP_CHAT'
},
{
label: '修改群名称',
handler: this.editGroupName,
groupInfo: item,
isDisabled: (item) => {
return item.leaderId != this.myMemberId;
},
isShow: (item) => item.type === 'GROUP_CHAT'
},
{
label: '修改群主',
handler: this.editGroupLeader,
groupInfo: item,
isDisabled: (item) => {
return item.leaderId != this.myMemberId;
},
isShow: (item) => item.type === 'GROUP_CHAT'
},
{
label: '邀请成员',
handler: this.groupSet,
groupInfo: item,
isDisabled: (item) => {
return item.leaderId != this.myMemberId;
},
isShow: (item) => item.type === 'GROUP_CHAT'
}
];
this.menu = [];
const list = menuNormal(item);
list.forEach(menuItem => {
menuItem.disabled = menuItem.isDisabled ? menuItem.isDisabled(item) : false;
menuItem.show = menuItem.isShow ? menuItem.isShow(item) : true;
});
this.menu = list;
},
scrollTop(index) {
this.$nextTick(() => {
const dom = document.querySelector('.middleMain');
const refDom = this.$refs['dom' + index];
const oTop = refDom[0].offsetTop;
const d = oTop - dom.clientHeight / 2;
dom.scrollTop = d;
});
},
sendPrivateMsg(item) {
this.privateChatId = item.id;
const findIndex = this.groupList.findIndex(ii => {
return ii.type == 'PRIVATE_CHAT' && ii.memberList.find(m => {
return m.memberId == item.id;
});
});
let index = findIndex;
if (findIndex < 0) {
const sortIndex = this.chatList.length;
const obj = {
creatorId: this.myMemberId,
leaderId: this.myMemberId,
memberList: [
{memberId: this.myMemberId, connect: false, role: 'Leader'},
{memberId: item.id, connect: false, role: 'Leader'}
],
sortIndex: sortIndex,
messageList: [],
name: item.labelName,
type: 'PRIVATE_CHAT'
};
this.noIdChatList.push(obj);
index = sortIndex;
}
this.scrollTop(index);
this.id = 0;
this.tabActive = 0;
},
removeNoIdItem() {
const list = [];
this.noIdChatList.forEach(item => {
const find = this.groupList.find(ii => {
return ii.type == 'PRIVATE_CHAT' && ii.memberList[0].memberId == item.memberList[0].memberId && ii.memberList[1].memberId == item.memberList[1].memberId;
});
if (!find) {
list.push(item);
} else {
if (this.privateChatId && this.privateChatId == this.getPrivateChatId(find)) {
this.groupClick(find);
}
}
});
this.noIdChatList = list;
},
getTreeData() {
const val = this.memberList;
if (val && val.length) {
const dispatcherList = [];
const nccDispatcherList = [];
const electricDispatcherList = [];
const depotDispatcherList = [];
const stationSupervisorList = [];
const driverList = [];
const maintainerList = [];
const ctcOperatorList = [];
const stationAssistantList = [];
const stationMasterList = [];
const stationSignalerList = [];
const stationPassengerList = [];
const stationSwitchManList = [];
const stationFacilitatorList = [];
const stationWorkerList = [];
const deviceManagerList = [];
const trainMasterList = [];
const stationElectricWorkerList = [];
val.forEach(item => {
const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
switch (item.type) {
case 'DISPATCHER':
this.memberData[item.id].labelName = '行调' + (item.name || '');
dispatcherList.push(this.memberData[item.id]);
break;
case 'NCC_DISPATCHER':
this.memberData[item.id].labelName = 'NCC调度' + (item.name || '');
nccDispatcherList.push(this.memberData[item.id]);
break;
case 'ELECTRIC_DISPATCHER':
this.memberData[item.id].labelName = '电力调度' + (item.name || '');
electricDispatcherList.push(this.memberData[item.id]);
break;
case 'DEPOT_DISPATCHER':
this.memberData[item.id].labelName = '信号楼-' + `${ device ? device.name : '' }` + (item.name || '');
depotDispatcherList.push(this.memberData[item.id]);
break;
case 'STATION_SUPERVISOR':
this.memberData[item.id].labelName = '值班员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
stationSupervisorList.push(this.memberData[item.id]);
break;
case 'DRIVER':
this.memberData[item.id].labelName = '司机-列车' + item.deviceCode;
driverList.push(this.memberData[item.id]);
break;
case 'MAINTAINER':
this.memberData[item.id].labelName = '通号' + (item.name || '');
maintainerList.push(this.memberData[item.id]);
break;
case 'RAIL_CTC':
this.memberData[item.id].labelName = 'CTC操作员' + `${ device ? device.name : '' }`;
ctcOperatorList.push(this.memberData[item.id]);
break;
case 'STATION_ASSISTANT':
this.memberData[item.id].labelName = '车站助理-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
stationAssistantList.push(this.memberData[item.id]);
break;
case 'STATION_MASTER':
this.memberData[item.id].labelName = '车站站长-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
stationMasterList.push(this.memberData[item.id]);
break;
case 'STATION_SIGNALER':
this.memberData[item.id].labelName = '车站信号员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
stationSignalerList.push(this.memberData[item.id]);
break;
case 'STATION_PASSENGER':
this.memberData[item.id].labelName = '车站客运员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
stationPassengerList.push(this.memberData[item.id]);
break;
case 'STATION_SWITCH_MAN':
this.memberData[item.id].labelName = '车站扳道员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
stationSwitchManList.push(this.memberData[item.id]);
break;
case 'STATION_FACILITATOR':
this.memberData[item.id].labelName = '车站引导员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
stationFacilitatorList.push(this.memberData[item.id]);
break;
case 'STATION_WORKER':
this.memberData[item.id].labelName = '车站工务工-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
stationWorkerList.push(this.memberData[item.id]);
break;
case 'DEVICE_MANAGER':
this.memberData[item.id].labelName = '设备管理员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
deviceManagerList.push(this.memberData[item.id]);
break;
case 'TRAIN_MASTER':
this.memberData[item.id].labelName = '车务段段长-' + (item.name ? `-${item.name }` : '');
trainMasterList.push(this.memberData[item.id]);
break;
case 'PARENT_DEPARTMENT':
this.memberData[item.id].labelName = '上级部门' + (item.name ? `-${item.name }` : '');
break;
case 'STATION_ELECTRIC_WORKER':
this.memberData[item.id].labelName = '电力工务' + (item.name || '');
stationElectricWorkerList.push(this.memberData[item.id]);
break;
}
});
this.memberTreeData = [{
labelName: '行调',
id: 'dispatcher',
children: dispatcherList
}, {
labelName: 'NCC调度',
id: 'nccDispatcher',
children: nccDispatcherList
}, {
labelName: '车站值班员',
id: 'stationSupervisor',
children: stationSupervisorList
}, {
labelName: '司机',
id: 'driver',
children: driverList
}, {
labelName: '通号',
id: 'maintainer',
children: maintainerList
}, {
labelName: '车辆段信号楼',
id: 'depotDispatcher',
children: depotDispatcherList
}, {
labelName: '电力调度',
id: 'electricDispatcher',
children: electricDispatcherList
}, {
labelName: 'CTC操作员',
id: 'ctcOperator',
children: ctcOperatorList
}, {
labelName: '车站助理',
id: 'stationAssistant',
children: stationAssistantList
},
{
labelName: '车站站长',
id: 'stationMaster',
children: stationMasterList
},
{
labelName: '车站信号员',
id: 'stationSignaler',
children: stationSignalerList
},
{
labelName: '车站客运员',
id: 'stationPassenger',
children: stationPassengerList
},
{
labelName: '车站扳道员',
id: 'stationSwitchMan',
children: stationSwitchManList
},
{
labelName: '车站引导员',
id: 'stationFacilitator',
children: stationFacilitatorList
},
{
labelName: '车站工务工',
id: 'stationWorker',
children: stationWorkerList
},
{
labelName: '设备管理员',
id: 'deviceManager',
children: deviceManagerList
},
{
labelName: '车务段段长 ',
id: 'trainMaster',
children: trainMasterList
},
{
labelName: '电力工务 ',
id: 'stationElectricWorker',
children: stationElectricWorkerList
}
];
this.$nextTick(() => {
if (this.$refs.tree) {
this.$refs.tree.filter(this.queryMember);
}
});
}
},
getMessageStatus(val) { getMessageStatus(val) {
const find = this.groupList.find(item => { const find = this.groupList.find(item => {
return item.id == val.id; return item.id == val.id;
@ -206,15 +585,28 @@ export default {
}, },
getGroupName(item) { getGroupName(item) {
let name = ''; let name = '';
if (item.name) { if (item.type == 'PRIVATE_CHAT') {
name = item.name; let mId = '';
if (item.memberList[0].memberId == this.myMemberId) {
mId = item.memberList[1].memberId;
} else if (item.memberList[1].memberId == this.myMemberId) {
mId = item.memberList[0].memberId;
}
const node = this.memberData[mId];
if (node) {
name = node.labelName;
}
} else { } else {
const nArr = []; if (item.name) {
item.memberList.forEach(ii => { name = item.name;
const node = this.memberData[ii.memberId]; } else {
node && nArr.push(node.labelName); const nArr = [];
}); item.memberList.forEach(ii => {
name = nArr.join('、'); const node = this.memberData[ii.memberId];
node && nArr.push(node.labelName);
});
name = nArr.join('、');
}
} }
return name; return name;
}, },
@ -263,10 +655,10 @@ export default {
getGroupList() { getGroupList() {
getGroupList(this.groupId).then(res => { getGroupList(this.groupId).then(res => {
this.groupList = res.data; this.groupList = res.data;
if (this.groupList && this.groupList[0] && !this.id) { if (this.groupList && this.groupList[0] && !this.id && !this.privateChatId) {
this.id = this.groupList[0].id; this.id = this.groupList[0].id;
} }
}).catch(err => { this.removeNoIdItem();
}); });
}, },
getImgUrl(url) { getImgUrl(url) {
@ -282,10 +674,28 @@ export default {
this.filterActive = index; this.filterActive = index;
}, },
groupClick(item) { groupClick(item) {
this.id = item.id; this.id = item.id || 0;
if (item.type == 'GROUP_CHAT') {
this.privateChatId = '';
} else {
this.privateChatId = this.getPrivateChatId(item);
}
this.setReadGroup(); this.setReadGroup();
}, },
getPrivateChatId(item) {
let pId = '';
if (item.type == 'PRIVATE_CHAT' && item.leaderId == this.myMemberId) {
const find = item.memberList.find(ii => {
return ii.memberId != this.myMemberId;
});
if (find) {
pId = find.memberId;
}
}
return pId;
},
setReadGroup() { setReadGroup() {
if (!this.id) { return; }
const id = this.id; const id = this.id;
setGroupReadMessage(this.groupId, {id}).then(res => { setGroupReadMessage(this.groupId, {id}).then(res => {
res.data.forEach(item => { res.data.forEach(item => {
@ -297,7 +707,6 @@ export default {
}; };
this.getMessageStatus(obj); this.getMessageStatus(obj);
}); });
}).catch(err => {
}); });
}, },
handleClose() { handleClose() {
@ -324,6 +733,12 @@ export default {
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
} }
.pop-menu{
padding: 0;
background: #eee;
border: none;
box-shadow: 0 0 10px 3px #eee;
}
} }
</style> </style>

View File

@ -0,0 +1,87 @@
<template>
<el-dialog
v-dialogDrag
class="dialogMember"
:title="title"
:visible.sync="dialogVisible"
width="30%"
:modal="false"
append-to-body
:close-on-click-modal="false"
:before-close="handleClose"
>
<div class="dialogBody">
<el-select v-model="value" placeholder="请选择">
<el-option-group
v-for="group in memberTreeData"
:key="group.id"
:label="group.labelName"
>
<el-option
v-for="item in group.children"
:key="item.id"
:label="item.labelName"
:value="item.id"
/>
</el-option-group>
</el-select>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose"> </el-button>
<el-button type="primary" @click="save"> </el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'DialogMember',
components: {},
props: {
memberTreeData: {
type: Array,
default: () => {
return [];
}
}
},
data() {
return {
dialogVisible: false,
title: '修改群主',
gId: '',
value: ''
};
},
computed: {
},
watch: {
},
mounted() {
},
created() {
},
beforeDestroy() {
},
methods: {
save() {
if (this.title == '修改群主') {
this.$emit('updateLeaderId', {id: this.gId, memberId: this.value});
}
this.handleClose();
},
doShow(info, title) {
this.title = title || '修改群主';
this.gId = info.id;
this.value = info.leaderId;
this.dialogVisible = true;
},
handleClose() {
this.dialogVisible = false;
}
}
};
</script>
<style lang='scss' scoped>
</style>

View File

@ -2,7 +2,7 @@
<el-dialog <el-dialog
v-dialogDrag v-dialogDrag
class="editGroup" class="editGroup"
title="创建会话群" :title="title"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="40%" width="40%"
:modal="false" :modal="false"
@ -20,7 +20,7 @@
<div class="treeBox"> <div class="treeBox">
<el-tree <el-tree
ref="tree" ref="tree"
:data="treeData" :data="memberTreeData"
node-key="id" node-key="id"
:props="defaultProps" :props="defaultProps"
default-expand-all default-expand-all
@ -41,14 +41,14 @@
<b>{{ selectTreeNode.length }}</b> <b>{{ selectTreeNode.length }}</b>
<b></b> <b></b>
<div class="tagBox"> <div class="tagBox">
<el-tag v-for="(tag, index) in selectTreeNode" :key="index" class="tag" :class="{disableClose: tag.disabled}" :type="tag.disabled ? 'warning' : ''" closable @close="tagClose(tag)"> <el-tag v-for="(tag, index) in selectTreeNode" :key="index" class="tag" :class="{disableClose: tag.disabled || addDisabledNode(tag)}" :type="tag.disabled ? 'warning' : ''" :closable="!treeDisabled" @close="tagClose(tag)">
{{ tag.labelName }} {{ tag.labelName }}
</el-tag> </el-tag>
</div> </div>
<el-divider /> <el-divider />
<el-form ref="form" :model="form" label-width="80px"> <el-form ref="form" :model="form" label-width="80px">
<el-form-item label="群名称:" prop="name"> <el-form-item v-if="showFormName" label="群名称:" prop="name">
<el-input v-model="form.name" /> <el-input v-model="form.name" :disabled="nameDisabled" />
</el-form-item> </el-form-item>
<!-- <el-form-item label="群头像:" prop="imageUrl"> <!-- <el-form-item label="群头像:" prop="imageUrl">
<div class="uploadImgDiv"> <div class="uploadImgDiv">
@ -57,7 +57,7 @@
<input id="upload_file_group" ref="files" type="file" class="input_file_box" accept="image/jpeg,image/png" @change="uploadLogo()"> <input id="upload_file_group" ref="files" type="file" class="input_file_box" accept="image/jpeg,image/png" @change="uploadLogo()">
</div> </div>
</el-form-item> --> </el-form-item> -->
<el-form-item> <el-form-item v-if="showSubmitBtn">
<el-button @click="handleClose">取消</el-button> <el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="onSubmit">确定</el-button> <el-button type="primary" @click="onSubmit">确定</el-button>
</el-form-item> </el-form-item>
@ -69,7 +69,7 @@
</template> </template>
<script> <script>
import { createGroup } from '@/api/newChat'; import { createGroup, inviteMemberToGroup } from '@/api/newChat';
import { getUploadUrl } from '@/api/projectConfig'; import { getUploadUrl } from '@/api/projectConfig';
export default { export default {
name: 'EditGroup', name: 'EditGroup',
@ -77,102 +77,58 @@ export default {
}, },
props: { props: {
memberTreeData: {
type: Array,
default: () => {
return [];
}
}
}, },
data() { data() {
return { return {
title: '创建会话群',
dialogVisible: false, dialogVisible: false,
queryMember: '', queryMember: '',
defaultProps: { defaultProps: {
children: 'children', children: 'children',
label: 'labelName' label: 'labelName',
disabled: (node) => {
if (node.disabled || this.treeDisabled || this.addDisabledNode(node)) {
return true;
} else {
return false;
}
}
}, },
activeTrains: [], activeTrains: [],
defaultCheckedKeys: [],
selectTreeNode: [], selectTreeNode: [],
treeData: [{
labelName: '行调',
children: []
}, {
labelName: 'NCC调度',
children: []
}, {
labelName: '车站值班员',
children: []
}, {
labelName: '司机',
children: []
}, {
labelName: '通号',
children: []
}, {
labelName: '车辆段',
children: []
}, {
labelName: 'CTC操作员',
children: []
}, {
labelName: '车站助理',
children: []
},
{
labelName: '车站站长',
children: []
},
{
labelName: '车站信号员',
children: []
},
{
labelName: '车站客运员',
children: []
},
{
labelName: '车站扳道员',
children: []
},
{
labelName: '车站引导员',
children: []
},
{
labelName: '车站工务工',
children: []
},
{
labelName: '设备管理员',
children: []
}
],
form: { form: {
id: '',
name: '', name: '',
imageUrl: '' imageUrl: ''
} },
treeDisabled: false,
nameDisabled: false,
showFormName: true,
showSubmitBtn: true
}; };
}, },
computed: { computed: {
groupId() { groupId() {
return this.$route.query.group; return this.$route.query.group;
}, },
memberList() {
return this.$store.state.training.memberList;
},
memberData() { memberData() {
return this.$store.state.training.memberData; return this.$store.state.training.memberData;
}, },
myMemberId() { myMemberId() {
return this.$store.state.training.myMemberId; return this.$store.state.training.myMemberId;
},
defaultCheckedKeys() {
return [this.myMemberId];
} }
}, },
watch: { watch: {
queryMember(val) { queryMember(val) {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
}, },
memberList () {
this.getTreeData();
},
myMemberId(val) { myMemberId(val) {
this.initData(); this.initData();
if (!val) { if (!val) {
@ -181,28 +137,52 @@ export default {
}, },
'$store.state.map.activeTrainListChange': function () { '$store.state.map.activeTrainListChange': function () {
this.getActiveTrains(); this.getActiveTrains();
},
title() {
if (this.title == '邀请成员') {
this.showFormName = false;
this.showSubmitBtn = true;
this.treeDisabled = false;
this.nameDisabled = true;
} else if (this.title == '创建会话群') {
this.showFormName = true;
this.showSubmitBtn = true;
this.treeDisabled = false;
this.nameDisabled = false;
} else {
this.showFormName = true;
this.showSubmitBtn = false;
this.treeDisabled = true;
this.nameDisabled = true;
}
} }
}, },
mounted() { mounted() {
this.initData(); this.initData();
}, },
created() { created() {
this.getTreeData();
this.getActiveTrains(); this.getActiveTrains();
}, },
beforeDestroy() { beforeDestroy() {
}, },
methods: { methods: {
addDisabledNode(node) {
let s = false;
if (this.title == '邀请成员' && this.defaultCheckedKeys.includes(node.id)) {
s = true;
}
return s;
},
getImgUrl(url) { getImgUrl(url) {
return url ? this.$store.state.user.ossUrl + '/conversationGroup/' + url : ''; return url ? this.$store.state.user.ossUrl + '/conversationGroup/' + url : '';
}, },
tagClose(item) { tagClose(item) {
if (item.disabled) { return; } if (item.disabled) { return; }
const filter = this.selectTreeNode.filter(ii => { const filter = this.selectTreeNode.filter(ii => {
return item != ii; return item.id != ii.id;
}); });
this.$refs.tree.setCheckedNodes(filter); this.$refs.tree.setChecked(item, false);
this.selectTreeNode = filter; this.selectTreeNode = filter;
}, },
getActiveTrains() { getActiveTrains() {
@ -215,200 +195,6 @@ export default {
} }
this.$refs.tree && this.$refs.tree.filter(this.queryMember); this.$refs.tree && this.$refs.tree.filter(this.queryMember);
}, },
getTreeData() {
const val = this.memberList;
if (val && val.length) {
// this.memberData = this.$store.state.training.memberData;
const dispatcherList = [];
const nccDispatcherList = [];
const electricDispatcherList = [];
const depotDispatcherList = [];
const stationSupervisorList = [];
const driverList = [];
const maintainerList = [];
const ctcOperatorList = [];
const stationAssistantList = [];
const stationMasterList = [];
const stationSignalerList = [];
const stationPassengerList = [];
const stationSwitchManList = [];
const stationFacilitatorList = [];
const stationWorkerList = [];
const deviceManagerList = [];
const trainMasterList = [];
const stationElectricWorkerList = [];
val.forEach(item => {
const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
switch (item.type) {
case 'DISPATCHER':
this.memberData[item.id].labelName = '行调' + (item.name || '');
dispatcherList.push(this.memberData[item.id]);
break;
case 'NCC_DISPATCHER':
this.memberData[item.id].labelName = 'NCC调度' + (item.name || '');
nccDispatcherList.push(this.memberData[item.id]);
break;
case 'ELECTRIC_DISPATCHER':
this.memberData[item.id].labelName = '电力调度' + (item.name || '');
electricDispatcherList.push(this.memberData[item.id]);
break;
case 'DEPOT_DISPATCHER':
this.memberData[item.id].labelName = '信号楼-' + device.name + (item.name || '');
depotDispatcherList.push(this.memberData[item.id]);
break;
case 'STATION_SUPERVISOR':
this.memberData[item.id].labelName = '值班员-' + device.name + (item.name ? `-${item.name }` : '');
stationSupervisorList.push(this.memberData[item.id]);
break;
case 'DRIVER':
this.memberData[item.id].labelName = '司机-列车' + item.deviceCode;
driverList.push(this.memberData[item.id]);
break;
case 'MAINTAINER':
this.memberData[item.id].labelName = '通号' + (item.name || '');
maintainerList.push(this.memberData[item.id]);
break;
case 'RAIL_CTC':
this.memberData[item.id].labelName = 'CTC操作员' + device.name;
ctcOperatorList.push(this.memberData[item.id]);
break;
case 'STATION_ASSISTANT':
this.memberData[item.id].labelName = '车站助理-' + device.name + (item.name ? `-${item.name }` : '');
stationAssistantList.push(this.memberData[item.id]);
break;
case 'STATION_MASTER':
this.memberData[item.id].labelName = '车站站长-' + device.name + (item.name ? `-${item.name }` : '');
stationMasterList.push(this.memberData[item.id]);
break;
case 'STATION_SIGNALER':
this.memberData[item.id].labelName = '车站信号员-' + device.name + (item.name ? `-${item.name }` : '');
stationSignalerList.push(this.memberData[item.id]);
break;
case 'STATION_PASSENGER':
this.memberData[item.id].labelName = '车站客运员-' + device.name + (item.name ? `-${item.name }` : '');
stationPassengerList.push(this.memberData[item.id]);
break;
case 'STATION_SWITCH_MAN':
this.memberData[item.id].labelName = '车站扳道员-' + device.name + (item.name ? `-${item.name }` : '');
stationSwitchManList.push(this.memberData[item.id]);
break;
case 'STATION_FACILITATOR':
this.memberData[item.id].labelName = '车站引导员-' + device.name + (item.name ? `-${item.name }` : '');
stationFacilitatorList.push(this.memberData[item.id]);
break;
case 'STATION_WORKER':
this.memberData[item.id].labelName = '车站工务工-' + device.name + (item.name ? `-${item.name }` : '');
stationWorkerList.push(this.memberData[item.id]);
break;
case 'DEVICE_MANAGER':
this.memberData[item.id].labelName = '设备管理员-' + device.name + (item.name ? `-${item.name }` : '');
deviceManagerList.push(this.memberData[item.id]);
break;
case 'TRAIN_MASTER':
// device.name;
this.memberData[item.id].labelName = '车务段段长-' + (item.name ? `-${item.name }` : '');
trainMasterList.push(this.memberData[item.id]);
break;
case 'PARENT_DEPARTMENT':
this.memberData[item.id].labelName = '上级部门' + (item.name ? `-${item.name }` : '');
break;
case 'STATION_ELECTRIC_WORKER':
this.memberData[item.id].labelName = '电力工务' + (item.name || '');
stationElectricWorkerList.push(this.memberData[item.id]);
break;
// DEVICE_MANAGER:'' deviceManager
}
});
this.treeData = [{
labelName: '行调',
id: 'dispatcher',
children: dispatcherList
}, {
labelName: 'NCC调度',
id: 'nccDispatcher',
children: nccDispatcherList
}, {
labelName: '车站值班员',
id: 'stationSupervisor',
children: stationSupervisorList
}, {
labelName: '司机',
id: 'driver',
children: driverList
}, {
labelName: '通号',
id: 'maintainer',
children: maintainerList
}, {
labelName: '车辆段信号楼',
id: 'depotDispatcher',
children: depotDispatcherList
}, {
labelName: '电力调度',
id: 'electricDispatcher',
children: electricDispatcherList
}, {
labelName: 'CTC操作员',
id: 'ctcOperator',
children: ctcOperatorList
}, {
labelName: '车站助理',
id: 'stationAssistant',
children: stationAssistantList
},
{
labelName: '车站站长',
id: 'stationMaster',
children: stationMasterList
},
{
labelName: '车站信号员',
id: 'stationSignaler',
children: stationSignalerList
},
{
labelName: '车站客运员',
id: 'stationPassenger',
children: stationPassengerList
},
{
labelName: '车站扳道员',
id: 'stationSwitchMan',
children: stationSwitchManList
},
{
labelName: '车站引导员',
id: 'stationFacilitator',
children: stationFacilitatorList
},
{
labelName: '车站工务工',
id: 'stationWorker',
children: stationWorkerList
},
{
labelName: '设备管理员',
id: 'deviceManager',
children: deviceManagerList
},
{
labelName: '车务段段长 ',
id: 'trainMaster',
children: trainMasterList
},
{
labelName: '电力工务 ',
id: 'stationElectricWorker',
children: stationElectricWorkerList
}
];
this.$nextTick(() => {
if (this.$refs.tree) {
this.$refs.tree.filter(this.queryMember);
}
});
}
},
checkChange(data, node, val) { checkChange(data, node, val) {
const filter = node.checkedNodes.filter(ii => { const filter = node.checkedNodes.filter(ii => {
return !ii.children; return !ii.children;
@ -427,25 +213,47 @@ export default {
return (data.labelName.indexOf(value) !== -1 || flag) && driverNoShow; return (data.labelName.indexOf(value) !== -1 || flag) && driverNoShow;
}, },
onSubmit() { onSubmit() {
const list = []; if (this.title == '邀请成员') {
this.selectTreeNode.forEach(item => { const list = [];
list.push(item.id); this.selectTreeNode.forEach(item => {
}); if (!this.defaultCheckedKeys.includes(item.id)) {
const params = { list.push(item.id);
name: this.form.name, }
imageUrl: this.form.imageUrl, });
memberIds: list const params = {
}; id: this.form.id,
createGroup(this.groupId, params).then(res => { memberIds: list
this.initData(); };
this.handleClose(); inviteMemberToGroup(this.groupId, params).then(res => {
this.$message.success('创建会话群成功!'); this.initData();
}).catch(err => { this.handleClose();
this.$message.error(`创建会话群失败!${err.message}`); this.$message.success('邀请成员成功!');
}); }).catch(err => {
this.$message.error(`邀请成员失败!${err.message}`);
});
} else if (this.title == '创建会话群') {
const list = [];
this.selectTreeNode.forEach(item => {
list.push(item.id);
});
const params = {
name: this.form.name,
imageUrl: this.form.imageUrl,
memberIds: list
};
createGroup(this.groupId, params).then(res => {
this.initData();
this.handleClose();
this.$message.success('创建会话群成功!');
}).catch(err => {
this.$message.error(`创建会话群失败!${err.message}`);
});
}
}, },
initData() { initData() {
this.$refs.form && this.$refs.form.resetFields(); this.$refs.form && this.$refs.form.resetFields();
this.defaultCheckedKeys = [this.myMemberId];
this.selectTreeNode = []; this.selectTreeNode = [];
const node = this.memberData[this.myMemberId]; const node = this.memberData[this.myMemberId];
node && this.selectTreeNode.push(node); node && this.selectTreeNode.push(node);
@ -499,7 +307,9 @@ export default {
// fileName // fileName
// method // method
}, },
doShow() { doShow(info, title) {
this.title = title || '创建会话群';
this.setInfo(info);
this.dialogVisible = true; this.dialogVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs.tree) { if (this.$refs.tree) {
@ -507,6 +317,22 @@ export default {
} }
}); });
}, },
setInfo(info) {
if (info) {
this.form.id = info.id || '';
this.form.name = info.name || '';
this.form.imageUrl = info.imageUrl || '';
this.defaultCheckedKeys = [];
this.selectTreeNode = [];
info.memberList.forEach(item => {
this.defaultCheckedKeys.push(item.memberId);
const node = this.memberData[item.memberId];
node && this.selectTreeNode.push(node);
});
} else {
this.initData();
}
},
handleClose() { handleClose() {
this.dialogVisible = false; this.dialogVisible = false;
} }
@ -549,6 +375,7 @@ $imgHeight: 70px;
.disableClose { .disableClose {
/deep/ .el-icon-close { /deep/ .el-icon-close {
cursor: not-allowed; cursor: not-allowed;
display: none !important;
} }
} }
} }