mirror of
https://github.com/kuaifan/dootask.git
synced 2026-01-16 03:58:12 +00:00
优化待办、回复抽屉
This commit is contained in:
kuaifan
parent
5bbbbb0b02
commit
488259d442
@ -56,18 +56,6 @@ export default {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
hidePercentage: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hideReply: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isReply: {
|
||||
type: Boolean, // 是否回复对象
|
||||
default: false
|
||||
},
|
||||
operateVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -78,6 +66,18 @@ export default {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
simpleView: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isMyDialog: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
msgId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -90,15 +90,28 @@ export default {
|
||||
...mapState(['userId']),
|
||||
|
||||
isRightMsg() {
|
||||
return !this.isReply && this.source.userid == this.userId
|
||||
return this.source.userid == this.userId
|
||||
},
|
||||
|
||||
isReply() {
|
||||
return this.simpleView || this.msgId === this.source.id
|
||||
},
|
||||
|
||||
hidePercentage() {
|
||||
return this.simpleView || this.isMyDialog || this.isReply
|
||||
},
|
||||
|
||||
hideReply() {
|
||||
return this.simpleView || this.msgId > 0
|
||||
},
|
||||
|
||||
classArray() {
|
||||
return {
|
||||
'dialog-item': true,
|
||||
'reply-item': this.isReply,
|
||||
'self': this.isRightMsg,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
:data-component="msgItem"
|
||||
|
||||
:item-class-add="itemClassAdd"
|
||||
:extra-props="{dialogData, operateVisible, operateItem, hidePercentage: isMyDialog, hideReply: msgId > 0}"
|
||||
:extra-props="{dialogData, operateVisible, operateItem, isMyDialog, msgId}"
|
||||
:estimate-size="78"
|
||||
:keeps="50"
|
||||
:disabled="scrollDisabled"
|
||||
@ -124,9 +124,8 @@
|
||||
<div v-if="todoShow" class="chat-todo">
|
||||
<div class="todo-label">{{$L('待办')}}:</div>
|
||||
<ul class="scrollbar-hidden">
|
||||
<li v-for="item in todoList" @click.stop="onClickTodo(item, $event)">
|
||||
<li v-for="item in todoList" @click.stop="onViewTodo(item)">
|
||||
<div class="todo-desc">{{$A.getMsgSimpleDesc(item.msg_data)}}</div>
|
||||
<div v-if="item.click" class="todo-done">{{$L('完成')}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -293,24 +292,41 @@
|
||||
<DrawerOverlay
|
||||
v-model="replyListShow"
|
||||
placement="right"
|
||||
class-name="dialog-wrapper-reply-list"
|
||||
class-name="dialog-wrapper-drawer-list"
|
||||
:size="500">
|
||||
<DialogWrapper
|
||||
v-if="replyListShow && replyListItem"
|
||||
v-if="replyListShow"
|
||||
:dialogId="dialogId"
|
||||
:msgId="replyListId"
|
||||
class="reply-list">
|
||||
<div slot="head" class="dialog-scroller">
|
||||
class="drawer-list">
|
||||
<div slot="head" class="drawer-title">{{$L('回复消息')}}</div>
|
||||
</DialogWrapper>
|
||||
</DrawerOverlay>
|
||||
|
||||
<!--待办完成-->
|
||||
<DrawerOverlay
|
||||
v-model="todoViewShow"
|
||||
placement="right"
|
||||
class-name="dialog-wrapper-drawer-list"
|
||||
:size="500">
|
||||
<div class="dialog-wrapper drawer-list">
|
||||
<div class="dialog-nav">
|
||||
<div class="drawer-title">{{$L('待办消息')}}</div>
|
||||
</div>
|
||||
<div class="dialog-scroller scrollbar-overlay">
|
||||
<DialogItem
|
||||
:source="replyListItem"
|
||||
v-if="todoViewMsg"
|
||||
:source="todoViewMsg"
|
||||
@on-view-text="onViewText"
|
||||
@on-view-file="onViewFile"
|
||||
@on-emoji="onEmoji"
|
||||
hidePercentage
|
||||
hideReply
|
||||
isReply/>
|
||||
simpleView/>
|
||||
<Button class="original-button" icon="md-exit" type="text" @click="onPosTodo">{{ $L("回到原文") }}</Button>
|
||||
</div>
|
||||
</DialogWrapper>
|
||||
<div class="todo-button">
|
||||
<Button type="primary" size="large" icon="md-checkbox-outline" @click="onDoneTodo" :loading="todoViewLoad" long>{{ $L("完成") }}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DrawerOverlay>
|
||||
</div>
|
||||
</template>
|
||||
@ -405,6 +421,11 @@ export default {
|
||||
replyListShow: false,
|
||||
replyListId: 0,
|
||||
|
||||
todoViewLoad: false,
|
||||
todoViewShow: false,
|
||||
todoViewMid: 0,
|
||||
todoViewId: 0,
|
||||
|
||||
scrollDisabled: false,
|
||||
scrollDirection: null,
|
||||
scrollAction: 0,
|
||||
@ -454,22 +475,24 @@ export default {
|
||||
},
|
||||
|
||||
allMsgList() {
|
||||
const dialogMsgList = this.dialogMsgList.filter(item => this.msgFilter(item))
|
||||
if (this.tempMsgList.length > 0) {
|
||||
const ids = dialogMsgList.map(({id}) => id)
|
||||
const tempMsgList = this.tempMsgList.filter(item => !ids.includes(item.id) && this.msgFilter(item))
|
||||
if (tempMsgList.length > 0) {
|
||||
const array = [];
|
||||
array.push(...dialogMsgList);
|
||||
array.push(...tempMsgList)
|
||||
return array.sort((a, b) => {
|
||||
return a.id - b.id;
|
||||
});
|
||||
const array = [];
|
||||
array.push(...this.dialogMsgList.filter(item => this.msgFilter(item)));
|
||||
if (this.msgId > 0) {
|
||||
const msgItem = this.dialogMsgs.find(item => item.id == this.msgId)
|
||||
if (msgItem) {
|
||||
array.unshift(msgItem)
|
||||
}
|
||||
}
|
||||
return dialogMsgList.sort((a, b) => {
|
||||
if (this.tempMsgList.length > 0) {
|
||||
const ids = array.map(({id}) => id)
|
||||
const tempMsgList = this.tempMsgList.filter(item => !ids.includes(item.id) && this.msgFilter(item))
|
||||
if (tempMsgList.length > 0) {
|
||||
array.push(...tempMsgList)
|
||||
}
|
||||
}
|
||||
return array.sort((a, b) => {
|
||||
return a.id - b.id;
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
loadMsg() {
|
||||
@ -609,8 +632,8 @@ export default {
|
||||
return this.replyId ? this.dialogMsgs.find(({id}) => id === this.replyId) : null
|
||||
},
|
||||
|
||||
replyListItem() {
|
||||
return this.replyListId ? this.dialogMsgs.find(item => item.id == this.replyListId) : null
|
||||
todoViewMsg() {
|
||||
return this.todoViewMid ? this.dialogMsgs.find(item => item.id == this.todoViewMid) : null
|
||||
}
|
||||
},
|
||||
|
||||
@ -964,43 +987,57 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
onClickTodo(item, event) {
|
||||
if (event && event.target.classList.contains('todo-done')) {
|
||||
// 完成
|
||||
this.$store.dispatch("setLoad", {
|
||||
key: `msg-${item.msg_id}`,
|
||||
delay: 600
|
||||
})
|
||||
this.$store.dispatch("call", {
|
||||
url: 'dialog/msg/done',
|
||||
data: {
|
||||
id: item.id,
|
||||
},
|
||||
}).then(({data}) => {
|
||||
this.$store.dispatch("saveDialogTodo", {
|
||||
id: item.id,
|
||||
done_at: $A.formatDate("Y-m-d H:i:s")
|
||||
})
|
||||
if (data.add) {
|
||||
this.sendSuccess(data.add)
|
||||
}
|
||||
if (this.todoList.length === 0) {
|
||||
this.$store.dispatch("getDialogTodo", item.dialog_id)
|
||||
}
|
||||
}).catch(({msg}) => {
|
||||
$A.modalError(msg)
|
||||
}).finally(_ => {
|
||||
this.$store.dispatch("cancelLoad", `msg-${item.msg_id}`)
|
||||
});
|
||||
} else {
|
||||
// 定位
|
||||
this.onPositionId(item.msg_id).then(_ => {
|
||||
this.$store.dispatch("saveDialogTodo", {
|
||||
id: item.id,
|
||||
click: true
|
||||
})
|
||||
})
|
||||
onViewTodo(item) {
|
||||
if (this.operateVisible) {
|
||||
return
|
||||
}
|
||||
this.todoViewId = item.id
|
||||
this.todoViewMid = item.msg_id
|
||||
this.todoViewShow = true
|
||||
},
|
||||
|
||||
onCloseTodo() {
|
||||
this.todoViewLoad = false
|
||||
this.todoViewShow = false
|
||||
this.todoViewMid = 0
|
||||
this.todoViewId = 0
|
||||
},
|
||||
|
||||
onPosTodo() {
|
||||
if (!this.todoViewMid) {
|
||||
return
|
||||
}
|
||||
this.onPositionId(this.todoViewMid).then(this.onCloseTodo)
|
||||
},
|
||||
|
||||
onDoneTodo() {
|
||||
if (!this.todoViewId || this.todoViewLoad) {
|
||||
return
|
||||
}
|
||||
this.todoViewLoad = true
|
||||
//
|
||||
this.$store.dispatch("call", {
|
||||
url: 'dialog/msg/done',
|
||||
data: {
|
||||
id: this.todoViewId,
|
||||
},
|
||||
}).then(({data}) => {
|
||||
this.$store.dispatch("saveDialogTodo", {
|
||||
id: this.todoViewId,
|
||||
done_at: $A.formatDate("Y-m-d H:i:s")
|
||||
})
|
||||
if (data.add) {
|
||||
this.sendSuccess(data.add)
|
||||
}
|
||||
if (this.todoList.length === 0) {
|
||||
this.$store.dispatch("getDialogTodo", this.dialogId)
|
||||
}
|
||||
this.onCloseTodo()
|
||||
}).catch(({msg}) => {
|
||||
$A.modalError(msg)
|
||||
}).finally(_ => {
|
||||
this.todoViewLoad = false
|
||||
});
|
||||
},
|
||||
|
||||
itemClassAdd(index) {
|
||||
@ -1452,6 +1489,7 @@ export default {
|
||||
onReply() {
|
||||
const {tail} = this.scrollInfo()
|
||||
this.replyActiveId = this.operateItem.id
|
||||
this.replyActiveUpdate = false
|
||||
this.inputFocus()
|
||||
if (tail <= 10) {
|
||||
requestAnimationFrame(this.onToBottom)
|
||||
|
||||
@ -13,28 +13,46 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.reply-list {
|
||||
&.drawer-list {
|
||||
border-radius: 18px 0 0 18px;
|
||||
overflow: hidden;
|
||||
|
||||
.dialog-nav {
|
||||
position: relative;
|
||||
.drawer-title {
|
||||
text-align: center;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
z-index: 1;
|
||||
background-color: #f4f5f5;
|
||||
.dialog-scroller {
|
||||
padding: 16px 20px 0;
|
||||
|
||||
.reply-item {
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dialog-scroller {
|
||||
padding-right: 16px;
|
||||
.original-button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.todo-button {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 18px 24px;
|
||||
cursor: pointer;
|
||||
> button {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -791,9 +809,6 @@
|
||||
.common-loading {
|
||||
margin: 0 3px 0 0;
|
||||
}
|
||||
> i {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.reply {
|
||||
@ -1041,30 +1056,13 @@
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.todo-desc {
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.todo-done {
|
||||
flex-shrink: 1;
|
||||
font-weight: 500;
|
||||
color: $primary-color;
|
||||
position: relative;
|
||||
margin-left: 7px;
|
||||
padding-left: 8px;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 10px;
|
||||
width: 1px;
|
||||
transform: translateY(-50%) scaleX(0.5);
|
||||
background-color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1312,7 +1310,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-wrapper-reply-list {
|
||||
.dialog-wrapper-drawer-list {
|
||||
position: absolute !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
@ -1320,6 +1318,15 @@
|
||||
@media (max-width: 768px) {
|
||||
.dialog-wrapper {
|
||||
background-color: #f8f8f8;
|
||||
&.drawer-list {
|
||||
.dialog-nav {
|
||||
.drawer-title {
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-nav {
|
||||
.nav-wrapper {
|
||||
height: 52px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user