会话群调整
This commit is contained in:
dong
parent
740e676971
commit
50e5e92a05
@ -34,13 +34,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="nullDiv" />
|
<div class="nullDiv" />
|
||||||
<div class="editFilter pointer">
|
<div class="editFilter pointer">
|
||||||
<i class="el-icon-plus" />
|
<i class="el-icon-plus" title="创建会话群" @click="createGroup" />
|
||||||
<!-- <i class="el-icon-more" /> -->
|
<!-- <i class="el-icon-more" /> -->
|
||||||
</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 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="groupInfo">
|
||||||
<div class="text"><b>{{ item.name }}</b></div>
|
<div class="text"><b>{{ item.name }}</b></div>
|
||||||
<div class="text">{{ getLastMsg(item.messageList) }}</div>
|
<div class="text">{{ getLastMsg(item.messageList) }}</div>
|
||||||
@ -66,6 +66,7 @@
|
|||||||
<div v-else-if="tabActive==2">工作台</div>
|
<div v-else-if="tabActive==2">工作台</div>
|
||||||
<div v-else-if="tabActive==3">通讯录</div>
|
<div v-else-if="tabActive==3">通讯录</div>
|
||||||
</div>
|
</div>
|
||||||
|
<EditGroup ref="editGroup" @createGroup="getGroupList" />
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -74,10 +75,12 @@ import {mapGetters} from 'vuex';
|
|||||||
import { getGroupList, sendText } from '@/api/newChat';
|
import { getGroupList, sendText } 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';
|
||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
components: {
|
components: {
|
||||||
ChatContent
|
ChatContent,
|
||||||
|
EditGroup
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|
||||||
@ -173,6 +176,9 @@ export default {
|
|||||||
this.handleClose();
|
this.handleClose();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
createGroup() {
|
||||||
|
this.$refs.editGroup.doShow();
|
||||||
|
},
|
||||||
sendMsg() {
|
sendMsg() {
|
||||||
sendText(this.groupId, {id: this.id, content:this.inputMsg}).then(res => {
|
sendText(this.groupId, {id: this.id, content:this.inputMsg}).then(res => {
|
||||||
console.log(res, '--res--');
|
console.log(res, '--res--');
|
||||||
@ -184,7 +190,12 @@ export default {
|
|||||||
getLastMsg(list) {
|
getLastMsg(list) {
|
||||||
let msg = '';
|
let msg = '';
|
||||||
if (list.length) {
|
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;
|
return msg;
|
||||||
},
|
},
|
||||||
|
|||||||
571
src/views/newMap/display/newChat/editGroup.vue
Normal file
571
src/views/newMap/display/newChat/editGroup.vue
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user