gitee/dootask
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf: 添加任务弹窗

Browse Source
This commit is contained in:
kuaifan 2021-12-24 12:59:05 +08:00
parent 162c6e95d3
commit 7171d1d6b2
6 changed files with 105 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -58,7 +58,7 @@
"stylus-loader": "^6.2.0",
"tinymce": "^5.10.2",
"tui-calendar-hi": "^1.15.1-1",
"view-design-hi": "^4.7.0-2",
"view-design-hi": "^4.7.0-3",
"vue": "^2.6.14",
"vue-clipboard2": "^0.3.3",
"vue-emoji-picker": "^1.0.3",

54
resources/assets/js/pages/manage.vue
View File

@ -123,6 +123,19 @@
</div>
</Modal>
<!--添加任务-->
<Modal
v-model="addTaskShow"
:title="$L('添加任务')"
:styles="{
width: '90%',
maxWidth: '640px'
}"
:mask-closable="false"
footer-hide>
<TaskAdd ref="addTask" v-model="addTaskShow"/>
</Modal>
<!--任务详情-->
<Modal
:value="taskId > 0"
@ -181,9 +194,13 @@ import TeamManagement from "./manage/components/TeamManagement";
import ProjectManagement from "./manage/components/ProjectManagement";
import DrawerOverlay from "../components/DrawerOverlay";
import DragBallComponent from "../components/DragBallComponent";
import TaskAdd from "./manage/components/TaskAdd";
import {Store} from "le5le-store";
export default {
components: {DragBallComponent, DrawerOverlay, ProjectManagement, TeamManagement, ProjectArchived, TaskDetail},
components: {
TaskAdd,
DragBallComponent, DrawerOverlay, ProjectManagement, TeamManagement, ProjectArchived, TaskDetail},
data() {
return {
loadIng: 0,
@ -197,6 +214,9 @@ export default {
},
addRule: {},
addTaskShow: false,
addTaskSubscribe: null,
columns: [],
projectKeyValue: '',
@ -229,11 +249,34 @@ export default {
this.notificationInit();
this.onVisibilityChange();
//
this.addTaskSubscribe = Store.subscribe('addTask', (data) => {
this.$refs.addTask.defaultPriority();
this.$refs.addTask.setData($A.isJson(data) ? data : {
'owner': this.userId,
'column_id': data,
});
this.addTaskShow = true;
this.$nextTick(() => {
this.$refs.addTask.$refs.input.focus();
})
});
//
document.addEventListener('keydown', this.shortcutEvent);
//
if (this.isElectron) {
this.$electron.ipcRenderer.send('setDockBadge', 0);
}
},
beforeDestroy() {
if (this.addTaskSubscribe) {
this.addTaskSubscribe.unsubscribe();
this.addTaskSubscribe = null;
}
//
document.removeEventListener('keydown', this.shortcutEvent);
},
deactivated() {
this.addShow = false;
},
@ -526,6 +569,15 @@ export default {
})
},
shortcutEvent(e) {
if (e.keyCode === 75 || e.keyCode === 78) {
if (e.metaKey || e.ctrlKey) {
e.preventDefault();
Store.set('addTask', 0);
}
}
},
taskVisibleChange(visible) {
if (!visible) {
this.$store.dispatch('openTask', 0)

58
resources/assets/js/pages/manage/components/ProjectList.vue
View File

@ -315,23 +315,6 @@
</div>
</div>
<!--添加任务-->
<Modal
v-model="addShow"
:title="$L('添加任务')"
:styles="{
width: '90%',
maxWidth: '640px'
}"
:mask-closable="false">
<TaskAdd ref="add" @on-add="onAddTask"/>
<div slot="footer">
<Button type="default" @click="addShow=false">{{$L('取消')}}</Button>
<Button type="primary" :loading="addLoad > 0" @click="onAddTask">{{$L('添加')}}</Button>
<Button type="primary" :loading="addLoad > 0" @click="onAddTask(true)">{{$L('添加并继续')}}</Button>
</div>
</Modal>
<!--项目设置-->
<Modal
v-model="settingShow"
@ -454,9 +437,6 @@ export default {
searchText: '',
addShow: false,
addLoad: 0,
addColumnShow: false,
addColumnName: '',
@ -490,12 +470,6 @@ export default {
this.projectDialogsubscribe = Store.subscribe('onProjectDialogBack', () => {
this.$store.dispatch('toggleTablePanel', 'chat');
});
//
document.addEventListener('keydown', this.shortcutAdd);
},
beforeDestroy () {
document.removeEventListener('keydown', this.shortcutAdd);
},
destroyed() {
@ -749,16 +723,6 @@ export default {
});
},
onAddTask(again) {
this.addLoad++;
this.$refs.add.onAdd((success) => {
this.addLoad--;
if (success && again !== true) {
this.addShow = false;
}
}, again)
},
addTopShow(id, show) {
this.$set(this.columnTopShow, id, show);
if (show) {
@ -767,16 +731,7 @@ export default {
},
addTaskOpen(column_id) {
this.$refs.add.defaultPriority();
this.$refs.add.setData($A.isJson(column_id) ? column_id : {
'owner': this.userId,
'column_id': column_id,
});
this.$Modal.resetIndex();
this.addShow = true;
this.$nextTick(() => {
this.$refs.add.$refs.input.focus();
})
Store.set('addTask', column_id);
},
addColumnOpen() {
@ -1188,17 +1143,6 @@ export default {
this.completeJust = [];
},
shortcutAdd(e) {
if (this.projectId && this.projectId == this.$route.params.id) {
if (e.keyCode === 75 || e.keyCode === 78) {
if (e.metaKey || e.ctrlKey) {
e.preventDefault();
this.addTaskOpen(0);
}
}
}
},
formatTime(date) {
let time = Math.round($A.Date(date).getTime() / 1000),
string = '';

40
resources/assets/js/pages/manage/components/TaskAdd.vue
View File

@ -37,6 +37,7 @@
</ul>
</div>
</div>
<Form v-if="advanced" class="task-add-advanced" label-width="auto" @submit.native.prevent>
<FormItem :label="$L('任务列表')">
<Select
@ -113,6 +114,21 @@
:placeholder="$L('+ 输入子任务，回车添加子任务')"/>
</div>
</Form>
<div class="ivu-modal-footer">
<Button type="default" @click="close">{{$L('取消')}}</Button>
<ButtonGroup class="page-manage-add-task-button-group">
<Button type="primary" :loading="loadIng > 0" @click="onAdd">{{$L('添加')}}</Button>
<Dropdown @on-click="onAdd(true)">
<Button type="primary" :loading="loadIng > 0">
<Icon type="ios-arrow-down"></Icon>
</Button>
<DropdownMenu slot="list">
<DropdownItem>{{$L('添加并继续')}}</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
</div>
</div>
</template>
@ -124,6 +140,12 @@ import UserInput from "../../../components/UserInput";
export default {
name: "TaskAdd",
components: {UserInput, TEditor},
props: {
value: {
type: Boolean,
default: false
},
},
data() {
return {
addData: {
@ -168,10 +190,12 @@ export default {
timeOptions: {
shortcuts: []
},
loadIng: 0,
}
},
mounted() {
this.$refs.input.focus();
//
},
computed: {
...mapState(['userId', 'projectId', 'columns', 'taskPriority']),
@ -232,6 +256,9 @@ export default {
}]
};
},
close() {
this.$emit("input", !this.value)
},
columnCreate(val) {
if (!this.columnAdd.find(({id}) => id == val)) {
this.columnAdd.push({
@ -254,7 +281,7 @@ export default {
return;
}
e.preventDefault();
this.$emit("on-add")
this.onAdd();
}
},
addSubTask() {
@ -287,15 +314,16 @@ export default {
setData(data) {
this.addData = Object.assign({}, this.addData, data);
},
onAdd(callback, again) {
onAdd(again) {
if (!this.addData.name) {
$A.messageError("任务描述不能为空");
callback(false)
return;
}
this.loadIng++;
this.$store.dispatch("taskAdd", Object.assign(this.addData, {
project_id: this.projectId
})).then(({msg}) => {
this.loadIng--;
$A.messageSuccess(msg);
if (again === true) {
this.addData = Object.assign({}, this.addData, {
@ -316,11 +344,11 @@ export default {
p_name: '',
p_color: '',
};
this.close()
}
callback(true)
}).catch(({msg}) => {
this.loadIng--;
$A.modalError(msg);
callback(false)
});
}
}

8
resources/assets/sass/pages/components/task-add.scss vendored
View File

@ -1,5 +1,4 @@
.task-add {
margin-bottom: 6px;
.task-add-form,
.task-add-advanced {
.title {
@ -25,7 +24,7 @@
}
}
.advanced-option {
margin-top: 24px;
margin-top: 42px;
z-index: 1;
display: flex;
align-items: center;
@ -56,7 +55,7 @@
}
.task-add-advanced {
margin: -16px 0 0;
padding: 34px 32px 6px;
padding: 46px 32px 6px;
border-radius: 8px;
border: 1px solid #e8e8e8;
.subtasks {
@ -92,6 +91,9 @@
width: 100%;
}
}
.ivu-modal-footer {
padding: 26px 0 22px !important;
}
}
.task-add-advanced-transfer {
.task-drop-prepend {

11
resources/assets/sass/pages/page-manage.scss vendored
View File

@ -271,6 +271,17 @@
}
}
.page-manage-add-task-button-group {
margin-left: 8px !important;
.ivu-dropdown {
.ivu-btn {
min-width: auto !important;
padding: 0 4px;
border-radius: 0 4px 4px 0;
}
}
}
@media (max-width: 768px) {
.page-manage {