|
|
@ -48,24 +48,13 @@ |
|
|
|
<el-aside class="menu"> |
|
|
|
<chat-menu /> |
|
|
|
</el-aside> |
|
|
|
<el-container |
|
|
|
class="side" |
|
|
|
v-if="store.currentNavId < 4" |
|
|
|
> |
|
|
|
<el-container class="side" v-if="store.currentNavId < 4"> |
|
|
|
<!--搜索栏--> |
|
|
|
<div v-if="store.currentNavId < 2"> |
|
|
|
<el-header class="search"> |
|
|
|
<el-input |
|
|
|
placeholder="搜索" |
|
|
|
:prefix-icon="Search" |
|
|
|
class="search-input" |
|
|
|
v-model="store.searchInput" |
|
|
|
/> |
|
|
|
<el-input placeholder="搜索" :prefix-icon="Search" class="search-input" v-model="store.searchInput" /> |
|
|
|
<!-- 邀请群聊 --> |
|
|
|
<button |
|
|
|
class="inviteGroupChats" |
|
|
|
@click="store.setGroupChatInvitedDialogVisible(true)" |
|
|
|
> |
|
|
|
<button class="inviteGroupChats" @click="store.setGroupChatInvitedDialogVisible(true)"> |
|
|
|
<el-icon> |
|
|
|
<Plus /> |
|
|
|
</el-icon> |
|
|
@ -86,68 +75,35 @@ |
|
|
|
<chat-user-info v-if="store.currentNavId == 1"></chat-user-info> |
|
|
|
<ai-chat-main v-if="store.currentNavId == 3" /> |
|
|
|
</el-container> |
|
|
|
<el-container |
|
|
|
class="chat-setting" |
|
|
|
v-if="store.currentNavId == 2" |
|
|
|
> |
|
|
|
<iframe |
|
|
|
class="workflow" |
|
|
|
:src="workUrl" |
|
|
|
></iframe> |
|
|
|
<el-container class="chat-setting" v-if="store.currentNavId == 2"> |
|
|
|
<iframe class="workflow" :src="workUrl"></iframe> |
|
|
|
</el-container> |
|
|
|
<el-container |
|
|
|
class="chat-setting" |
|
|
|
v-if="store.currentNavId == 5" |
|
|
|
> |
|
|
|
<el-container class="chat-setting" v-if="store.currentNavId == 5"> |
|
|
|
<ChatUserSetting /> |
|
|
|
</el-container> |
|
|
|
</el-container> |
|
|
|
|
|
|
|
<!-- 邀请群聊弹窗 --> |
|
|
|
<el-dialog |
|
|
|
v-model="store.groupChatInvitedDialogVisible" |
|
|
|
width="80%" |
|
|
|
title="创建群聊" |
|
|
|
style="height: 550px" |
|
|
|
align-center |
|
|
|
> |
|
|
|
<el-dialog v-model="store.groupChatInvitedDialogVisible" width="80%" title="创建群聊" style="height: 550px" |
|
|
|
align-center> |
|
|
|
<div class="dialog-body"> |
|
|
|
<!-- 添加输入部门名的输入框 --> |
|
|
|
<div> |
|
|
|
<el-form label-position="top"> |
|
|
|
<el-form-item label="群聊名称:"> |
|
|
|
<el-input |
|
|
|
maxlength="8" |
|
|
|
show-word-limit |
|
|
|
style="width: 240px; height: 30px" |
|
|
|
class="department-name" |
|
|
|
v-model="store.departmentName" |
|
|
|
placeholder="请输入群聊名称" |
|
|
|
></el-input> |
|
|
|
<el-input maxlength="8" show-word-limit style="width: 240px; height: 30px" |
|
|
|
class="department-name" v-model="store.departmentName" placeholder="请输入群聊名称"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 使用 Element 的 el-transfer 组件替换自定义穿梭框 --> |
|
|
|
<el-transfer |
|
|
|
v-model="users" |
|
|
|
:data="data" |
|
|
|
:titles="['可选项', '已选项']" |
|
|
|
filterable |
|
|
|
style="height: 250px" |
|
|
|
filter-placeholder="搜索用户名" |
|
|
|
:props="{ key: 'key', label: 'label', avatar: 'avatar' }" |
|
|
|
:left-default-checked="[]" |
|
|
|
class="transfer-container" |
|
|
|
ref="myTransfer" |
|
|
|
> |
|
|
|
<el-transfer v-model="users" :data="data" :titles="['可选项', '已选项']" filterable style="height: 250px" |
|
|
|
filter-placeholder="搜索用户名" :props="{ key: 'key', label: 'label', avatar: 'avatar' }" |
|
|
|
:left-default-checked="[]" class="transfer-container" ref="myTransfer"> |
|
|
|
<!-- 自定义穿梭框列表项模板 --> |
|
|
|
<template #default="{ option }"> |
|
|
|
<el-avatar |
|
|
|
:src="option.avatar" |
|
|
|
size="small" |
|
|
|
style="margin-right: 5px" |
|
|
|
/> |
|
|
|
<el-avatar :src="option.avatar" size="small" style="margin-right: 5px" /> |
|
|
|
<span>{{ option.label }}</span> |
|
|
|
</template> |
|
|
|
</el-transfer> |
|
|
@ -155,16 +111,10 @@ |
|
|
|
|
|
|
|
<template #footer> |
|
|
|
<span class="dialog-footer"> |
|
|
|
<el-button |
|
|
|
style="background-color: #0078d4; color: #fff" |
|
|
|
@click="store.groupChatInvitedDialogVisible = false" |
|
|
|
>取消</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
style="background-color: #0078d4; color: #fff" |
|
|
|
@click="store.createGroupChat(users)" |
|
|
|
>确定</el-button |
|
|
|
> |
|
|
|
<el-button style="background-color: #0078d4; color: #fff" |
|
|
|
@click="store.groupChatInvitedDialogVisible = false">取消</el-button> |
|
|
|
<el-button style="background-color: #0078d4; color: #fff" |
|
|
|
@click="store.createGroupChat(users)">确定</el-button> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
@ -326,4 +276,16 @@ |
|
|
|
.department-name { |
|
|
|
margin: 10px 0; |
|
|
|
} |
|
|
|
|
|
|
|
@media screen and (max-width: 768px) { |
|
|
|
.container { |
|
|
|
height: calc(100% - 60px); |
|
|
|
} |
|
|
|
|
|
|
|
.menu { |
|
|
|
width: 100vw; |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|