github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-03-17 03:03:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
kuaifan 2022-04-15 17:08:55 +08:00
parent c6e693392c
commit 5c3d8727e0
2 changed files with 196 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
resources/assets/js/components/ChatInput.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<div class="chat-input-wrapper"> <div class="chat-input-wrapper" :class="modeClass">
<div ref="editor"></div> <div ref="editor"></div>
</div> </div>
</template> </template>
<script> <script>
import {mapGetters, mapState} from "vuex";
import Quill from 'quill'; import Quill from 'quill';
import "quill-mention"; import "quill-mention";
@ -53,7 +55,10 @@ export default {
_content: '', _content: '',
_options: {}, _options: {},
modeClass: '',
userList: null, userList: null,
taskList: null,
}; };
}, },
mounted() { mounted() {
@ -63,6 +68,11 @@ export default {
this.quill = null this.quill = null
delete this.quill delete this.quill
}, },
computed: {
...mapState(['cacheProjects', 'cacheTasks', 'cacheUserBasic', 'userId']),
...mapGetters(['dashboardTask', 'transforTasks']),
},
watch: { watch: {
// Watch content change // Watch content change
value(newVal) { value(newVal) {
@ -83,12 +93,14 @@ export default {
} }
}, },
// Reset userList // Reset lists
dialogId() { dialogId() {
this.userList = null; this.userList = null;
this.taskList = null;
}, },
taskId() { taskId() {
this.userList = null; this.userList = null;
this.taskList = null;
}, },
}, },
methods: { methods: {
@ -126,6 +138,7 @@ export default {
} }
}, },
mention: { mention: {
allowedChars: /^\S*$/,
mentionDenotationChars: ["@", "#"], mentionDenotationChars: ["@", "#"],
defaultMenuOrientation: this.defaultMenuOrientation, defaultMenuOrientation: this.defaultMenuOrientation,
renderItem: (data) => { renderItem: (data) => {
@ -138,24 +151,25 @@ export default {
if (data.avatar) { if (data.avatar) {
return `<div class="mention-item-img${data.online ? ' online' : ''}"><img src="${data.avatar}"/><em></em></div><div class="mention-item-name">${data.value}</div>`; return `<div class="mention-item-img${data.online ? ' online' : ''}"><img src="${data.avatar}"/><em></em></div><div class="mention-item-name">${data.value}</div>`;
} }
return `<div class="mention-item-name">${data.value}</div>`; return `<div class="mention-item-name" title="${data.value}">${data.value}</div>`;
}, },
renderLoading: () => { renderLoading: () => {
return "Loading..."; return "Loading...";
}, },
source: (searchTerm, renderList, mentionChar) => { source: (searchTerm, renderList, mentionChar) => {
this.getSource(mentionChar).then(values => { this.getSource(mentionChar).then(array => {
if (searchTerm.length === 0) { let values = [];
renderList(values, searchTerm); array.some(item => {
} else { let list = item.list;
const matches = []; if (searchTerm && !item.ignoreSearch) {
for (let i = 0; i < values.length; i++) { list = list.filter(({value}) => $A.strExists(value, searchTerm));
if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) {
matches.push(values[i]);
}
} }
renderList(matches, searchTerm); if (list.length > 0 || item.ignoreSearch) {
} item.label && values.push(...item.label)
list.length > 0 && values.push(...list)
}
})
renderList(values, searchTerm);
}) })
} }
} }
@ -219,10 +233,32 @@ export default {
return new Promise(resolve => { return new Promise(resolve => {
switch (mentionChar) { switch (mentionChar) {
case "@": // @成员 case "@": // @成员
this.modeClass = "user-mention";
if (this.userList !== null) { if (this.userList !== null) {
resolve(this.userList) resolve(this.userList)
return; return;
} }
const atCallback = (list) => {
if (list.length > 2) {
this.userList = [{
ignoreSearch: true,
label: null,
list: [{id: 0, value: this.$L('所有人')}]
}, {
ignoreSearch: false,
label: [{id: 0, value: this.$L('会话内成员'), disabled: true}],
list,
}]
} else {
this.userList = [{
ignoreSearch: false,
label: null,
list
}]
}
resolve(this.userList)
}
let array = [];
if (this.dialogId > 0) { if (this.dialogId > 0) {
// 根据会话ID获取成员 // 根据会话ID获取成员
this.$store.dispatch("call", { this.$store.dispatch("call", {
@ -233,11 +269,7 @@ export default {
} }
}).then(({data}) => { }).then(({data}) => {
if (data.length > 0) { if (data.length > 0) {
this.userList = [ array.push(...data.map(item => {
{ id: 0, value: this.$L('所有人') },
{ id: 0, value: this.$L('会话内成员'), disabled: true },
];
this.userList.push(...data.map(item => {
return { return {
id: item.userid, id: item.userid,
value: item.nickname, value: item.nickname,
@ -245,29 +277,123 @@ export default {
online: item.online, online: item.online,
} }
})) }))
} else {
this.userList = [];
} }
resolve(this.userList) atCallback(array)
}).catch(_ => { }).catch(_ => {
resolve([]); atCallback(array)
}); });
return;
} else if (this.taskId > 0) { } else if (this.taskId > 0) {
// 根据任务ID获取成员 todo // 根据任务ID获取成员
return; const task = this.cacheTasks.find(({id}) => id == this.taskId)
if (task && $A.isArray(task.task_user)) {
task.task_user.some(tmp => {
let item = this.cacheUserBasic.find(({userid}) => userid == tmp.userid);
if (item) {
array.push({
id: item.userid,
value: item.nickname,
avatar: item.userimg,
online: item.online,
})
}
})
}
atCallback(array)
} }
break; break;
case "#": // #任务 todo case "#": // #任务
resolve([ this.modeClass = "task-mention";
{ id: 3, value: "Fredrik Sundqvist 2" }, if (this.taskList !== null) {
{ id: 4, value: "Patrik Sjölin 2" } resolve(this.taskList)
]) return;
}
const taskCallback = (list) => {
this.taskList = [];
// 项目任务
if (list.length > 0) {
list = list.map(item => {
return {
id: item.id,
value: item.name
}
})
this.taskList.push({
ignoreSearch: false,
label: [{id: 0, value: this.$L('项目未完成任务'), disabled: true}],
list,
})
}
// 待完成任务
let data = this.transforTasks(this.dashboardTask['all']);
if (data.length > 0) {
data = data.sort((a, b) => {
return $A.Date(a.end_at || "2099-12-31 23:59:59") - $A.Date(b.end_at || "2099-12-31 23:59:59");
})
this.taskList.push({
ignoreSearch: false,
label: [{id: 0, value: this.$L('我的待完成任务'), disabled: true}],
list: data.map(item => {
return {
id: item.id,
value: item.name
}
}),
})
}
resolve(this.taskList)
}
//
const projectId = this.getProjectId();
if (projectId > 0) {
this.$store.dispatch("getTaskForProject", projectId).then(_ => {
let tasks = this.cacheTasks.filter(task => {
if (task.archived_at) {
return false;
}
return task.project_id == projectId
&& task.parent_id === 0
&& !task.archived_at
&& !task.complete_at
})
if (tasks.length > 0) {
taskCallback(tasks);
} else {
taskCallback([])
}
}).catch(_ => {
taskCallback([])
})
return;
}
taskCallback([])
break;
default:
resolve([])
break; break;
} }
resolve([])
}) })
},
getProjectId() {
let object = null;
if (this.dialogId > 0) {
object = this.cacheProjects.find(({dialog_id}) => dialog_id == this.dialogId);
if (object) {
return object.id;
}
object = this.cacheTasks.find(({dialog_id}) => dialog_id == this.dialogId);
if (object) {
return object.project_id;
}
} else if (this.taskId > 0) {
object = this.cacheTasks.find(({id}) => id == this.taskId);
if (object) {
return object.project_id;
}
}
return 0;
} }
} }
} }

42
resources/assets/sass/components/chat-input.scss vendored
View File

@ -5,6 +5,24 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
&.task-mention {
.ql-mention-list-container {
.ql-mention-list {
> li {
&:first-child {
margin-top: 0;
}
}
}
.ql-mention-list-item {
line-height: 36px;
.mention-item-disabled {
padding: 8px 4px 0;
}
}
}
}
.ql-editor { .ql-editor {
padding: 4px 7px; padding: 4px 7px;
font-size: 14px; font-size: 14px;
@ -27,14 +45,30 @@
.ql-mention-list-container { .ql-mention-list-container {
width: auto; width: auto;
min-width: 200px; min-width: 220px;
max-width: 300px; max-width: 350px;
max-height: 500px; max-height: 500px;
.ql-mention-list {
> li {
&:first-child {
margin-top: 8px;
}
&:last-child {
margin-bottom: 8px;
}
}
}
.ql-mention-list-item { .ql-mention-list-item {
padding: 0 12px; padding: 0 8px;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 8px;
&.selected {
border-radius: 4px;
}
.mention-item-at { .mention-item-at {
width: 28px; width: 28px;
@ -98,7 +132,7 @@
} }
.mention-item-disabled { .mention-item-disabled {
color: #8f8f8e; color: #aaa;
font-size: 12px; font-size: 12px;
padding: 0 4px; padding: 0 4px;
line-height: 40px; line-height: 40px;