no message

This commit is contained in:
kuaifan 2021-06-05 23:24:29 +08:00
parent 11a86c0cdd
commit c6285c57c8
9 changed files with 69 additions and 52 deletions

View File

@ -19,7 +19,7 @@
import {mapState} from "vuex";
export default {
name: 'MessageUpload',
name: 'DialogUpload',
props: {
maxSize: {
type: Number,

View File

@ -1,12 +1,12 @@
<template>
<div class="message-view" :data-id="msgData.id">
<div class="dialog-view" :data-id="msgData.id">
<!--文本-->
<div v-if="msgData.type === 'text'" class="message-content" v-html="textMsg(msgInfo.text)"></div>
<div v-if="msgData.type === 'text'" class="dialog-content" v-html="textMsg(msgInfo.text)"></div>
<!--等待-->
<div v-else-if="msgData.type === 'loading'" class="message-content loading"><Loading/></div>
<div v-else-if="msgData.type === 'loading'" class="dialog-content loading"><Loading/></div>
<!--文件-->
<div v-else-if="msgData.type === 'file'" :class="['message-content', msgInfo.type]">
<div v-else-if="msgData.type === 'file'" :class="['dialog-content', msgInfo.type]">
<a :href="msgInfo.url" target="_blank">
<img v-if="msgInfo.type === 'img'" class="file-img" :style="imageStyle(msgInfo)" :src="msgInfo.thumb"/>
<div v-else class="file-box">
@ -19,10 +19,10 @@
</a>
</div>
<!--未知-->
<div v-else class="message-content unknown">{{$L("未知的消息类型")}}</div>
<div v-else class="dialog-content unknown">{{$L("未知的消息类型")}}</div>
<!--时间/阅读-->
<div v-if="msgData.created_at" class="message-foot">
<div v-if="msgData.created_at" class="dialog-foot">
<div class="time">{{formatTime(msgData.created_at)}}</div>
<Poptip
v-if="msgData.send > 1 || dialogType == 'group'"
@ -32,7 +32,7 @@
:width="360"
:offset="8"
@on-popper-show="popperShow">
<div slot="content" class="message-readbox">
<div slot="content" class="dialog-readbox">
<ul class="read">
<li class="read-title"><em>{{readList.length}}</em>{{$L('已读')}}</li>
<li v-for="item in readList"><UserAvatar :userid="item.userid" :size="26" show-name/></li>
@ -47,7 +47,7 @@
<Icon v-else-if="msgData.percentage === 100" class="done" type="md-done-all"/>
<Icon v-else class="done" type="md-checkmark"/>
</div>
<div v-else class="message-foot"><Loading/></div>
<div v-else class="dialog-foot"><Loading/></div>
</div>
</template>
@ -57,7 +57,7 @@ import {mapState} from "vuex";
import WCircle from "../../../components/WCircle";
export default {
name: "MessageView",
name: "DialogView",
components: {WCircle},
props: {
msgData: {

View File

@ -1,11 +1,11 @@
<template>
<div
v-if="$store.state.projectChatShow"
class="project-message"
class="project-dialog"
@drop.prevent="chatPasteDrag($event, 'drag')"
@dragover.prevent="chatDragOver(true)"
@dragleave.prevent="chatDragOver(false)">
<div class="group-member">
<div class="dialog-user">
<div class="member-head">
<div class="member-title">{{$L('项目成员')}}<span>({{projectDetail.project_user.length}})</span></div>
<div class="member-view-all" @click="memberShowAll=!memberShowAll">{{$L('查看所有')}}</div>
@ -16,26 +16,26 @@
</li>
</ul>
</div>
<div class="group-title">{{$L('群聊')}}</div>
<ScrollerY ref="groupChat" class="group-chat message-scroller" @on-scroll="chatScroll">
<div ref="manageList" class="message-list">
<div class="dialog-title">{{$L('群聊')}}</div>
<ScrollerY class="dialog-chat dialog-scroller" @on-scroll="chatScroll">
<div ref="manageList" class="dialog-list">
<ul>
<li v-if="dialogLoad > 0" class="loading"><Loading/></li>
<li v-else-if="dialogList.length === 0" class="nothing">{{$L('暂无消息')}}</li>
<li v-for="(item, key) in dialogList" :key="key" :class="{self:item.userid == userId}">
<div class="message-avatar">
<div class="dialog-avatar">
<UserAvatar :userid="item.userid" :size="30"/>
</div>
<MessageView :msg-data="item" dialog-type="group"/>
<DialogView :msg-data="item" dialog-type="group"/>
</li>
<li ref="bottom" class="bottom"></li>
</ul>
</div>
</ScrollerY>
<div :class="['group-footer', msgNew > 0 ? 'newmsg' : '']">
<div class="group-newmsg" @click="goNewBottom">{{$L('' + msgNew + '条新消息')}}</div>
<DragInput class="group-input" v-model="msgText" type="textarea" :rows="1" :autosize="{ minRows: 1, maxRows: 3 }" :maxlength="255" @on-keydown="chatKeydown" @on-input-paste="pasteDrag" :placeholder="$L('输入消息...')" />
<MessageUpload
<div :class="['dialog-footer', msgNew > 0 ? 'newmsg' : '']">
<div class="dialog-newmsg" @click="goNewBottom">{{$L('' + msgNew + '条新消息')}}</div>
<DragInput class="dialog-input" v-model="msgText" type="textarea" :rows="1" :autosize="{ minRows: 1, maxRows: 3 }" :maxlength="255" @on-keydown="chatKeydown" @on-input-paste="pasteDrag" :placeholder="$L('输入消息...')" />
<DialogUpload
ref="chatUpload"
class="chat-upload"
@on-progress="chatFile('progress', $event)"
@ -50,9 +50,9 @@
<style lang="scss">
:global {
.project-message {
.group-footer {
.group-input {
.project-dialog {
.dialog-footer {
.dialog-input {
background-color: #F4F5F7;
padding: 10px 12px;
border-radius: 10px;
@ -71,12 +71,12 @@
</style>
<style lang="scss" scoped>
:global {
.project-message {
.project-dialog {
display: flex;
flex-direction: column;
background-color: #ffffff;
z-index: 1;
.group-member {
.dialog-user {
margin-top: 36px;
padding: 0 32px;
.member-head {
@ -119,24 +119,24 @@
}
}
}
.group-title {
.dialog-title {
padding: 0 32px;
margin-top: 20px;
font-size: 18px;
font-weight: 600;
}
.group-chat {
.dialog-chat {
flex: 1;
padding: 0 32px;
margin-top: 18px;
}
.group-footer {
.dialog-footer {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 0 28px;
margin-bottom: 20px;
.group-newmsg {
.dialog-newmsg {
display: none;
height: 30px;
line-height: 30px;
@ -158,7 +158,7 @@
}
&.newmsg {
margin-top: -50px;
.group-newmsg {
.dialog-newmsg {
display: block;
}
}
@ -198,12 +198,12 @@
import DragInput from "../../../components/DragInput";
import ScrollerY from "../../../components/ScrollerY";
import {mapState} from "vuex";
import MessageView from "./message-view";
import MessageUpload from "./message-upload";
import DialogView from "./DialogView";
import DialogUpload from "./DialogUpload";
export default {
name: "ProjectMessage",
components: {MessageUpload, MessageView, ScrollerY, DragInput},
name: "ProjectDialog",
components: {DialogUpload, DialogView, ScrollerY, DragInput},
data() {
return {
autoBottom: true,

View File

@ -826,8 +826,8 @@
</style>
<script>
import TaskPriority from "./task-priority";
import TaskAdd from "./task-add";
import TaskPriority from "./TaskPriority";
import TaskAdd from "./TaskAdd";
import {mapState} from "vuex";
import UserInput from "../../../components/UserInput";
export default {

View File

@ -0,0 +1,17 @@
<template>
<div class="calendar">
<PageTitle>{{$L('Calendar')}}</PageTitle>
</div>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
},
}
</script>

View File

@ -2,7 +2,7 @@
<div class="project-detail">
<PageTitle>{{ $L('项目面板') }}</PageTitle>
<ProjectList/>
<ProjectMessage/>
<ProjectDialog/>
</div>
</template>
@ -17,7 +17,7 @@
height: 100%;
background-color: #fafafa;
}
.project-message {
.project-dialog {
position: relative;
height: 100%;
width: 35%;
@ -39,10 +39,10 @@
</style>
<script>
import ProjectList from "./components/project-list";
import ProjectMessage from "./components/project-message";
import ProjectList from "./components/ProjectList";
import ProjectDialog from "./components/ProjectDialog";
export default {
components: {ProjectMessage, ProjectList},
components: {ProjectDialog, ProjectList},
data() {
return {
project_id: 0,

View File

@ -686,10 +686,10 @@ body {
}
}
.message-scroller {
.dialog-scroller {
position: relative;
overflow: auto;
.message-list {
.dialog-list {
> ul {
> li {
display: flex;
@ -697,18 +697,18 @@ body {
align-items: flex-end;
list-style: none;
margin-bottom: 16px;
.message-avatar {
.dialog-avatar {
position: relative;
margin-bottom: 20px;
flex-shrink: 0;
}
.message-view {
.dialog-view {
max-width: 70%;
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0 0 0 8px;
.message-content {
.dialog-content {
color: #333333;
background-color: #F4F5F7;
padding: 8px;
@ -773,7 +773,7 @@ body {
text-decoration: underline;
}
}
.message-foot {
.dialog-foot {
display: flex;
align-items: center;
padding-top: 4px;
@ -825,10 +825,10 @@ body {
}
&.self {
flex-direction: row-reverse;
.message-view {
.dialog-view {
align-items: flex-end;
margin: 0 8px 0 0;
.message-content {
.dialog-content {
color: #ffffff;
background-color: #2d8cf0;
border-radius: 6px 6px 0 6px;
@ -840,7 +840,7 @@ body {
background-color: transparent;
}
}
.message-foot {
.dialog-foot {
.done {
display: inline-block;
}
@ -855,7 +855,7 @@ body {
}
}
.message-readbox {
.dialog-readbox {
display: flex;
position: relative;
.read,