|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
- <page-header-wrapper class ="uodate">
|
|
|
+ <page-header-wrapper class="uodate">
|
|
|
<template v-slot:content>
|
|
|
<div class="page-header-content">
|
|
|
- {{nowDate}}
|
|
|
+ {{ nowDate }}
|
|
|
<div style="display: inline-block;float: right;">
|
|
|
<a-button type="link" icon="swap">
|
|
|
排序
|
|
|
@@ -12,159 +12,149 @@
|
|
|
<div style="margin-top:15px">
|
|
|
|
|
|
<!--添加任务表格-->
|
|
|
- <a-input
|
|
|
- class="init_input"
|
|
|
- style="border: none; box-shadow: none"
|
|
|
- @pressEnter="addtask"
|
|
|
- size="large"
|
|
|
- placeholder="添加任务"
|
|
|
- v-model="tasktitle"
|
|
|
- >
|
|
|
+ <a-input class="init_input" style="border: none; box-shadow: none" @pressEnter="addtask" size="large" placeholder="添加任务" v-model="tasktitle">
|
|
|
<a-icon slot="prefix" type="plus" />
|
|
|
</a-input>
|
|
|
- <task-list :taskdata="doingTask" @getData="getDoingData" @refreshData="refreshData" @openConfig="openConfig"/>
|
|
|
+ <task-list :taskdata="doingTask" @getData="getDoingData" @refreshData="refreshData" @openConfig="openConfig" />
|
|
|
</div>
|
|
|
|
|
|
<!--已完成表格-->
|
|
|
<a-collapse v-model="activeKey" :bordered="false">
|
|
|
<a-collapse-panel key="finished" :disabled="finished_disabled" class="panel-style">
|
|
|
- <template slot="header"
|
|
|
- ><h3>
|
|
|
+ <template slot="header">
|
|
|
+ <h3>
|
|
|
<strong>已完成 {{ finishedTask.length }}</strong>
|
|
|
</h3>
|
|
|
</template>
|
|
|
- <task-list :taskdata="finishedTask" @getData="getFinishedData" @refreshData="refreshData" @openConfig="openConfig"/>
|
|
|
+ <task-list :taskdata="finishedTask" @getData="getFinishedData" @refreshData="refreshData" @openConfig="openConfig" />
|
|
|
</a-collapse-panel>
|
|
|
- </a-collapse>
|
|
|
- </div>
|
|
|
+ </a-collapse>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:extraContent v-if="showright">
|
|
|
- <div class="extra-content" style="text-align: left;width:340px;margin-left:-50px">
|
|
|
- <a-card style="width: 340px" v-show="taskconfig">
|
|
|
- <p>Card content</p>
|
|
|
- <p>Card content</p>
|
|
|
- <p>Card content</p>
|
|
|
- </a-card>
|
|
|
- <!-- 侧边栏 -->
|
|
|
- <task-info-sider ref="taskInfoSlider" style="width: 340px" v-show="taskconfig"></task-info-sider>
|
|
|
+ <div class="extra-content" style="text-align:left;width:340px;margin-left:-80px;">
|
|
|
+ <!-- 任务详情侧边栏 -->
|
|
|
+ <task-details ref="taskDetails" v-show="taskconfig" :taskInfo="taskInfo"></task-details>
|
|
|
|
|
|
<!--点击建议打开抽屉-->
|
|
|
- <a-drawer
|
|
|
- title="建议"
|
|
|
- placement="right"
|
|
|
- :width="400"
|
|
|
- :visible="taskdrawer"
|
|
|
- :mask="false"
|
|
|
- @close="closeDrawer"
|
|
|
- class="advise_drawer"
|
|
|
- style="background-color: #faf9f8;"
|
|
|
- >
|
|
|
+ <a-drawer title="建议" placement="right" :width="350" :visible="taskdrawer" :mask="false" @close="closeDrawer" class="advise_drawer" style="background-color: #faf9f8;">
|
|
|
<div v-if="yesterdayTask.length!=0">
|
|
|
<h4><strong>昨天</strong></h4>
|
|
|
- <move-task-list :taskdata="yesterdayTask"/>
|
|
|
+ <move-task-list :taskdata="yesterdayTask" />
|
|
|
</div>
|
|
|
<div v-if="beforeTask.length!=0">
|
|
|
<h4><strong>先前</strong></h4>
|
|
|
- <move-task-list :taskdata="beforeTask"/>
|
|
|
+ <move-task-list :taskdata="beforeTask" />
|
|
|
</div>
|
|
|
<div v-if="latelyTask.length!=0">
|
|
|
<h4><strong>最近添加</strong></h4>
|
|
|
- <move-task-list :taskdata="latelyTask"/>
|
|
|
+ <move-task-list :taskdata="latelyTask" />
|
|
|
</div>
|
|
|
</a-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
-
|
|
|
|
|
|
<!--右键菜单-->
|
|
|
<a-menu :style="menuStyle" v-if="menuVisible">
|
|
|
- <a-menu-item key='1'><a-icon type="alert" theme="filled"/>从“我的一天” 中删除</a-menu-item>
|
|
|
- <a-menu-item key='2' @click="changeImportant(menuData)"><a-icon type="star" theme="filled"/>{{menuData.important?'删除重要标记':'标记为重要'}}</a-menu-item>
|
|
|
- <a-menu-item key='3' @click="changeFinish(menuData)"><a-icon type="check-circle" theme="filled"/>{{menuData.finish?'标记为未完成':'标记为已完成'}}</a-menu-item>
|
|
|
- <a-menu-item key='4'><a-icon type="calendar" theme="filled"/>今天到期</a-menu-item>
|
|
|
- <a-menu-item key='5'><a-icon type="calendar" theme="filled"/>明天到期</a-menu-item>
|
|
|
- <a-menu-item key='6' style="color:red"><a-icon type="delete" theme="filled"/>删除任务</a-menu-item>
|
|
|
+ <a-menu-item key='1'>
|
|
|
+ <a-icon type="alert" theme="filled" />从“我的一天” 中删除
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key='2' @click="changeImportant(menuData)">
|
|
|
+ <a-icon type="star" theme="filled" />{{menuData.important?'删除重要标记':'标记为重要'}}
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key='3' @click="changeFinish(menuData)">
|
|
|
+ <a-icon type="check-circle" theme="filled" />{{menuData.finish?'标记为未完成':'标记为已完成'}}
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key='4'>
|
|
|
+ <a-icon type="calendar" theme="filled" />今天到期
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key='5'>
|
|
|
+ <a-icon type="calendar" theme="filled" />明天到期
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-item key='6' style="color:red">
|
|
|
+ <a-icon type="delete" theme="filled" />删除任务
|
|
|
+ </a-menu-item>
|
|
|
</a-menu>
|
|
|
|
|
|
</page-header-wrapper>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-const columns=[
|
|
|
+import TaskList from '@/components/LTTC/TaskList/TaskList'
|
|
|
+import MoveTaskList from '@/components/LTTC/TaskList/MoveTaskList'
|
|
|
+import TaskDetails from '@/views/task/components/TaskDetails'
|
|
|
+const columns = [
|
|
|
{
|
|
|
- title:'mark',
|
|
|
- dataIndex: 'mark',
|
|
|
+ title: 'mark',
|
|
|
+ dataIndex: 'mark',
|
|
|
scopedSlots: { customRender: 'mark' },
|
|
|
- width: '5px',
|
|
|
+ width: '5px'
|
|
|
},
|
|
|
{
|
|
|
- title:'task',
|
|
|
+ title: 'task',
|
|
|
dataIndex: 'task',
|
|
|
scopedSlots: { customRender: 'task' },
|
|
|
- width: '90%',
|
|
|
+ width: '90%'
|
|
|
},
|
|
|
{
|
|
|
title: 'operation',
|
|
|
dataIndex: 'operation',
|
|
|
- scopedSlots: { customRender: 'operation' },
|
|
|
+ scopedSlots: { customRender: 'operation' }
|
|
|
}
|
|
|
-];
|
|
|
+]
|
|
|
|
|
|
-import TaskList from '@/components/LTTC/TaskList/TaskList'
|
|
|
-import MoveTaskList from '@/components/LTTC/TaskList/MoveTaskList'
|
|
|
-import TaskInfoSider from '../components/TaskInfoSider'
|
|
|
export default {
|
|
|
name: 'OneDayForMe',
|
|
|
components: {
|
|
|
TaskList,
|
|
|
MoveTaskList,
|
|
|
- TaskInfoSider
|
|
|
+ TaskDetails
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- //当前时间
|
|
|
- nowDate:"",
|
|
|
- yesterdayTask:[
|
|
|
+ // 当前时间
|
|
|
+ nowDate: "",
|
|
|
+ yesterdayTask: [
|
|
|
{
|
|
|
- finish:true,
|
|
|
- important:true,
|
|
|
- key:'5',
|
|
|
+ finish: true,
|
|
|
+ important: true,
|
|
|
+ key: '5',
|
|
|
title: '去公园散步',
|
|
|
- type:'任务'
|
|
|
+ type: '任务'
|
|
|
},
|
|
|
{
|
|
|
- finish:false,
|
|
|
- important:false,
|
|
|
- key:'8',
|
|
|
+ finish: false,
|
|
|
+ important: false,
|
|
|
+ key: '8',
|
|
|
title: '去看电影',
|
|
|
- type:'任务'
|
|
|
+ type: '任务'
|
|
|
}
|
|
|
],
|
|
|
- beforeTask:[
|
|
|
+ beforeTask: [
|
|
|
{
|
|
|
- finish:false,
|
|
|
- important:true,
|
|
|
- key:'6',
|
|
|
+ finish: false,
|
|
|
+ important: true,
|
|
|
+ key: '6',
|
|
|
title: '去楼下遛狗',
|
|
|
- type:'任务'
|
|
|
+ type: '任务'
|
|
|
}
|
|
|
],
|
|
|
- latelyTask:[
|
|
|
+ latelyTask: [
|
|
|
{
|
|
|
- finish:false,
|
|
|
- important:true,
|
|
|
- key:'7',
|
|
|
+ finish: false,
|
|
|
+ important: true,
|
|
|
+ key: '7',
|
|
|
title: '喂狗',
|
|
|
- type:'任务'
|
|
|
+ type: '任务'
|
|
|
}
|
|
|
],
|
|
|
uuid: 20,
|
|
|
- tasktitle:'',
|
|
|
- doingTask:[],
|
|
|
- finishedTask:[],
|
|
|
+ tasktitle: '',
|
|
|
+ doingTask: [],
|
|
|
+ finishedTask: [],
|
|
|
columns,
|
|
|
- task_icon:'',
|
|
|
+ task_icon: '',
|
|
|
|
|
|
//右击菜单相关
|
|
|
menuData: {},
|
|
|
@@ -188,8 +178,8 @@ export default {
|
|
|
e.preventDefault();
|
|
|
this.menuData = record;
|
|
|
this.menuVisible = true;
|
|
|
- this.menuStyle.top = e.clientY-90 + "px";
|
|
|
- this.menuStyle.left = e.clientX-280 + "px";
|
|
|
+ this.menuStyle.top = e.clientY - 90 + "px";
|
|
|
+ this.menuStyle.left = e.clientX - 280 + "px";
|
|
|
document.body.addEventListener("mousedown", this.bodyClick);
|
|
|
}
|
|
|
}
|
|
|
@@ -207,6 +197,7 @@ export default {
|
|
|
|
|
|
//展开折叠面板的key
|
|
|
activeKey: ['finished'],
|
|
|
+ taskInfo: {}
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -218,16 +209,16 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
activeKey(key) {
|
|
|
- if(!key.length){
|
|
|
+ if (!key.length) {
|
|
|
this.closeConfig()
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
- computed:{
|
|
|
+ computed: {
|
|
|
showright: function() {
|
|
|
- return this.taskdrawer||this.taskconfig
|
|
|
+ return this.taskdrawer || this.taskconfig
|
|
|
},
|
|
|
- finished_disabled: function () {
|
|
|
+ finished_disabled: function() {
|
|
|
if (this.finishedTask.length == 0) {
|
|
|
this.activeKey = []
|
|
|
return true
|
|
|
@@ -236,12 +227,12 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
- created (){
|
|
|
+ created() {
|
|
|
this.currentTime();
|
|
|
this.getDoingData();
|
|
|
this.getFinishedData();
|
|
|
},
|
|
|
- beforeDestroy(){
|
|
|
+ beforeDestroy() {
|
|
|
if (this.formatDate) {
|
|
|
clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
|
|
|
}
|
|
|
@@ -256,7 +247,7 @@ export default {
|
|
|
let month = date.getMonth() + 1; // 月
|
|
|
let day = date.getDate(); // 日
|
|
|
let week = date.getDay(); // 星期
|
|
|
- let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
|
|
|
+ let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
|
|
let hour = date.getHours(); // 时
|
|
|
hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
|
|
|
let minute = date.getMinutes(); // 分
|
|
|
@@ -283,66 +274,76 @@ export default {
|
|
|
this.tasktitle = ''
|
|
|
},
|
|
|
|
|
|
- getDoingData(){
|
|
|
+ getDoingData() {
|
|
|
//axios 获取今天正在进行的任务
|
|
|
this.doingTask = [
|
|
|
{
|
|
|
- finish:false,
|
|
|
- important:true,
|
|
|
- key:'2',
|
|
|
+ endDate: '',
|
|
|
+ starLevel: true,
|
|
|
+ finish: false,
|
|
|
+ important: true,
|
|
|
+ key: '2',
|
|
|
title: '吃饭',
|
|
|
- type:'任务'
|
|
|
+ type: '任务'
|
|
|
},
|
|
|
{
|
|
|
- finish:false,
|
|
|
- important:true,
|
|
|
- key:'3',
|
|
|
+ endDate: '',
|
|
|
+ starLevel: true,
|
|
|
+ finish: false,
|
|
|
+ important: true,
|
|
|
+ key: '3',
|
|
|
title: '上班',
|
|
|
- type:'任务'
|
|
|
+ type: '任务'
|
|
|
},
|
|
|
{
|
|
|
- finish:false,
|
|
|
- important:false,
|
|
|
- key:'4',
|
|
|
+ endDate: '',
|
|
|
+ starLevel: false,
|
|
|
+ finish: false,
|
|
|
+ important: false,
|
|
|
+ key: '4',
|
|
|
title: '下班',
|
|
|
- type:'任务'
|
|
|
+ type: '任务'
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
|
|
|
- getFinishedData(){
|
|
|
+ getFinishedData() {
|
|
|
//axios 获取已经完成的任务
|
|
|
this.finishedTask = [
|
|
|
{
|
|
|
- finish:true,
|
|
|
- important:false,
|
|
|
- key:'1',
|
|
|
+ endDate: '2021-09-17',
|
|
|
+ starLevel: false,
|
|
|
+ finish: true,
|
|
|
+ important: false,
|
|
|
+ key: '1',
|
|
|
title: '起床',
|
|
|
- type:'任务'
|
|
|
+ type: '任务'
|
|
|
},
|
|
|
{
|
|
|
- finish:true,
|
|
|
- important:false,
|
|
|
- key:'10',
|
|
|
+ endDate: '2021-09-17',
|
|
|
+ starLevel: false,
|
|
|
+ finish: true,
|
|
|
+ important: false,
|
|
|
+ key: '10',
|
|
|
title: '回家',
|
|
|
- type:'任务'
|
|
|
+ type: '任务'
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
|
|
|
- refreshData(){
|
|
|
+ refreshData() {
|
|
|
console.log("刷新完成和未完成列表")
|
|
|
this.getDoingData();
|
|
|
this.getFinishedData();
|
|
|
},
|
|
|
|
|
|
//修改完成状态
|
|
|
- changeFinish(task){
|
|
|
+ changeFinish(task) {
|
|
|
task.finish = !task.finish
|
|
|
},
|
|
|
|
|
|
//修改重要性
|
|
|
- changeImportant(task){
|
|
|
+ changeImportant(task) {
|
|
|
task.important = !task.important
|
|
|
},
|
|
|
|
|
|
@@ -354,28 +355,37 @@ export default {
|
|
|
|
|
|
//建议-抽屉相关
|
|
|
showDrawer() {
|
|
|
- this.taskdrawer = true;
|
|
|
+ this.taskdrawer = true
|
|
|
+
|
|
|
+ if (this.taskconfig) {
|
|
|
+ this.taskconfig = false
|
|
|
+ }
|
|
|
},
|
|
|
closeDrawer() {
|
|
|
- this.taskdrawer = false;
|
|
|
+ this.taskdrawer = false
|
|
|
},
|
|
|
|
|
|
//任务配置相关
|
|
|
- openConfig (param){
|
|
|
- this.taskconfig = true;
|
|
|
+ openConfig(param) {
|
|
|
+ this.taskconfig = true
|
|
|
+ // this.$refs.taskDetails.init(param)
|
|
|
console.log(param)
|
|
|
+ this.taskInfo = param
|
|
|
+
|
|
|
+ if (this.taskdrawer) {
|
|
|
+ this.taskdrawer = false
|
|
|
+ }
|
|
|
},
|
|
|
- closeConfig (){
|
|
|
- this.taskconfig = false;
|
|
|
+ closeConfig() {
|
|
|
+ this.taskconfig = false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-
|
|
|
-.advise_drawer >>> .ant-drawer-content-wrapper .ant-drawer-content{
|
|
|
- background-color: #faf9f8;
|
|
|
+.advise_drawer >>> .ant-drawer-content-wrapper .ant-drawer-content {
|
|
|
+ background-color: #faf9f8;
|
|
|
}
|
|
|
|
|
|
.init_input >>> .ant-input {
|
|
|
@@ -385,7 +395,6 @@ export default {
|
|
|
}
|
|
|
|
|
|
.panel-style >>> .ant-collapse-content .ant-collapse-content-box {
|
|
|
- padding: 0px;
|
|
|
+ padding: 0px;
|
|
|
}
|
|
|
-
|
|
|
</style>
|
