From 50e5e92a058db08fdf9b94fe1e266191db5d595b Mon Sep 17 00:00:00 2001
From: dong <58670809@qq.com>
Date: Sun, 23 Apr 2023 15:43:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E7=BE=A4=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../newMap/display/newChat/chatDialog.vue     |  19 +-
 .../newMap/display/newChat/editGroup.vue      | 571 ++++++++++++++++++
 2 files changed, 586 insertions(+), 4 deletions(-)
 create mode 100644 src/views/newMap/display/newChat/editGroup.vue

diff --git a/src/views/newMap/display/newChat/chatDialog.vue b/src/views/newMap/display/newChat/chatDialog.vue
index 0bdf5f338..5b8a7e6a1 100644
--- a/src/views/newMap/display/newChat/chatDialog.vue
+++ b/src/views/newMap/display/newChat/chatDialog.vue
@@ -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;
         },
diff --git a/src/views/newMap/display/newChat/editGroup.vue b/src/views/newMap/display/newChat/editGroup.vue
new file mode 100644
index 000000000..b097a3220
--- /dev/null
+++ b/src/views/newMap/display/newChat/editGroup.vue
@@ -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>