joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

会话群调整

Browse Source
This commit is contained in:
dong 2023-04-23 15:43:17 +08:00
parent 740e676971
commit 50e5e92a05
2 changed files with 586 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/newMap/display/newChat/chatDialog.vue
View File

@ -34,13 +34,13 @@
</div>
<div class="nullDiv" />
<div class="editFilter pointer">
<i class="el-icon-plus" />
<i class="el-icon-plus" title="创建会话群" @click="createGroup" />
<!-- <i class="el-icon-more" /> -->
</div>
</div>
<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-show="item.imageUrl" class="groupIcon"><img :src="getImgUrl(item.imageUrl)" alt=""></div>
<div v-show="false" class="groupIcon"><img :src="getImgUrl(item.imageUrl)" alt=""></div>
<div class="groupInfo">
<div class="text"><b>{{ item.name }}</b></div>
<div class="text">{{ getLastMsg(item.messageList) }}</div>
@ -66,6 +66,7 @@
<div v-else-if="tabActive==2">工作台</div>
<div v-else-if="tabActive==3">通讯录</div>
</div>
<EditGroup ref="editGroup" @createGroup="getGroupList" />
</el-dialog>
</template>
@ -74,10 +75,12 @@ import {mapGetters} from 'vuex';
import { getGroupList, sendText } from '@/api/newChat';
import { timestampFormat } from '@/utils/date';
import ChatContent from './chatContent';
import EditGroup from './editGroup';
export default {
name: '',
components: {
ChatContent
ChatContent,
EditGroup
},
props: {
@ -173,6 +176,9 @@ export default {
this.handleClose();
},
methods: {
createGroup() {
this.$refs.editGroup.doShow();
},
sendMsg() {
sendText(this.groupId, {id: this.id, content:this.inputMsg}).then(res => {
console.log(res, '--res--');
@ -184,7 +190,12 @@ export default {
getLastMsg(list) {
let msg = '';
if (list.length) {
msg = list[list.length - 1].content;
const last = list[list.length - 1];
if (last.type == 'Text') {
msg = last.content;
} else if (last.type == 'Voice') {
msg = '[语音]';
}
}
return msg;
},

571
src/views/newMap/display/newChat/editGroup.vue Normal file
View File

@ -0,0 +1,571 @@
<template>
<el-dialog
v-dialogDrag
class="editGroup"
title="创建会话群"
:visible.sync="dialogVisible"
width="40%"
:modal="false"
append-to-body
:close-on-click-modal="false"
:before-close="handleClose"
>
<el-row class="body">
<el-col :span="12" 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="treeData"
node-key="id"
:props="defaultProps"
default-expand-all
:default-checked-keys="defaultCheckedKeys"
show-checkbox
:filter-node-method="filterNode"
@check="checkChange"
>
<span slot-scope="{ data }" class="custom-tree-node">
<span>{{ data.labelName }}</span>
</span>
</el-tree>
</div>
</el-col>
<el-col :span="12" class="right">
<div class="right">
<b>已选择（</b>
<b>{{ selectTreeNode.length }}</b>
<b>）</b>
<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)">
{{ tag.labelName }}
</el-tag>
</div>
<el-divider />
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="群名称：">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="群头像：">
<div class="uploadImgDiv">
<img v-if="form.imageUrl" :src="getImgUrl(form.imageUrl)" :alt="getImgUrl(form.imageUrl)">
<i class="el-icon-plus" />
<input id="upload_file_group" ref="files" type="file" class="input_file_box" accept="image/jpeg,image/png" @change="uploadLogo()">
</div>
</el-form-item>
<el-form-item>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="onSubmit">确定</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
</el-dialog>
</template>
<script>
import { createGroup } from '@/api/newChat';
import { getUploadUrl } from '@/api/projectConfig';
export default {
name: 'EditGroup',
components: {
},
props: {
},
data() {
return {
dialogVisible: false,
queryMember: '',
defaultProps: {
children: 'children',
label: 'labelName'
},
activeTrains: [],
selectTreeNode: [],
treeData: [{
labelName: '行调',
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: {
name: '',
imageUrl: ''
}
};
},
computed: {
groupId() {
return this.$route.query.group;
},
memberList() {
return this.$store.state.training.memberList;
},
memberData() {
return this.$store.state.training.memberData;
},
userId() {
return this.$store.state.user.id;
},
defaultCheckedKeys() {
const list = [];
const find = this.memberList.find(item => {
return item.userId == this.userId;
});
if (find) {
list.push(find.id);
}
return list;
}
},
watch: {
queryMember(val) {
this.$refs.tree.filter(val);
},
memberList () {
this.getTreeData();
},
'$store.state.map.activeTrainListChange': function () {
this.getActiveTrains();
}
},
mounted() {
this.defaultCheckedKeys.forEach(id => {
const node = this.memberData[id];
node && this.selectTreeNode.push(node);
});
},
created() {
this.getTreeData();
this.getActiveTrains();
},
beforeDestroy() {
},
methods: {
getImgUrl(url) {
return url ? this.$store.state.user.ossUrl + '/conversationGroup/' + url : '';
},
tagClose(item) {
if (item.disabled) { return; }
const filter = this.selectTreeNode.filter(ii => {
return item != ii;
});
this.$refs.tree.setCheckedNodes(filter);
this.selectTreeNode = filter;
},
getActiveTrains() {
this.activeTrains = [];
const activeTrainList = this.$store.state.map.activeTrainList;
if (activeTrainList && activeTrainList.length) {
activeTrainList.forEach(groupNumber => {
this.activeTrains.push(groupNumber);
});
}
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 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 '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: 'dispatcher1',
children: dispatcherList
}, {
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);
}
});
console.log(this.treeData, '---this.treeData---');
}
},
checkChange(data, node, val) {
const filter = node.checkedNodes.filter(ii => {
return !ii.children;
});
this.selectTreeNode = filter;
},
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;
},
onSubmit() {
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 => {
console.log(res, 'res');
if (res.code == 200) {
this.$refs.form.resetFields();
this.handleClose();
this.$emit('createGroup');
}
}).catch(err => {
console.log(err, 'err');
});
},
uploadLogo() {
const pic = document.getElementById('upload_file_group');
if (!pic.files || !pic.files[0]) {
return;
}
const file = pic.files[0];
const mineType = file.type;
const fileSize = file.size;
if (mineType != 'image/png' && mineType != 'image/jpeg') {
this.$message.error('仅支持png和jpeg格式的图片');
return;
}
if (fileSize / (1024 * 1024) > 1) {
this.$message.error('图片应该小于1M');
return;
}
const fileArray = file.name.split('.');
const fileType = fileArray[fileArray.length - 1] || '';
if (!fileType) {
return;
}
const params = {
directory:'conversationGroup',
fileName:'group_' + Math.floor(Math.random() * 1000000) + '.' + fileType,
method:'PUT'
};
const that = this;
getUploadUrl(params).then((response) => {
const url = response.data;
if (url) {
const xhr = new XMLHttpRequest();
xhr.open('PUT', url);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(file);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status == 200) {
that.form.imageUrl = params.fileName;
} else if (xhr.status != 200) {
that.$message.error('上传失败，请稍后再试');
}
};
}
});
// 参数：directory：MINIO文件夹
// fileName：存储文件名
// method：生成链接的请求方式
},
doShow() {
this.dialogVisible = true;
this.$nextTick(() => {
if (this.$refs.tree) {
this.$refs.tree.filter(this.queryMember);
}
});
},
handleClose() {
this.dialogVisible = false;
}
}
};
</script>
<style lang='scss'>
.editGroup{
.el-dialog__body {
padding-top: 0px;
}
}
</style>
<style lang='scss' scoped>
$imgWidth: 70px;
$imgHeight: 70px;
.editGroup {
.body {
height: 600px;
.left,.right {
height: 100%;
padding: 5px;
}
.treeBox {
margin-top: 10px;
border: 1px solid #ccc;
overflow-y: auto;
height: calc(100% - 50px);
}
.tagBox {
margin: 10px;
overflow-y: auto;
height: 300px;
.tag {
margin: 5px 10px;
}
.disableClose {
/deep/ .el-icon-close {
cursor: not-allowed;
}
}
}
.uploadImgDiv {
width: $imgWidth;
height: $imgHeight;
border: 1px #ccc dashed;
position: relative;
overflow: hidden;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
i{
width: 100%;
text-align: center;
line-height: $imgHeight;
}
.input_file_box {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
}
}
}
</style>