|
|
@@ -1,72 +1,391 @@
|
|
|
<template>
|
|
|
- <a-layout>
|
|
|
- <a-layout-content>
|
|
|
- <a-row>
|
|
|
- <a-col :span="3">
|
|
|
- <h1><strong style="font-size: 20px;">我的一天</strong></h1>
|
|
|
- 九月 4日星期六
|
|
|
- </a-col>
|
|
|
- <a-col :span="2" :offset="17">
|
|
|
+ <page-header-wrapper class ="uodate">
|
|
|
+ <template v-slot:content>
|
|
|
+ <div class="page-header-content">
|
|
|
+ {{nowDate}}
|
|
|
+ <div style="display: inline-block;float: right;">
|
|
|
<a-button type="link" icon="swap">
|
|
|
排序
|
|
|
</a-button>
|
|
|
- </a-col>
|
|
|
- <a-col :span="2">
|
|
|
- <a-button type="link" icon="bulb" @click="$refs.taskInfoSlider.init(data[0])">建议</a-button>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row style="margin-top:15px">
|
|
|
- <a-col>
|
|
|
- <a-input size="large" placeholder="请输入任务">
|
|
|
+ <a-button type="link" icon="bulb" ghost @click="showDrawer">建议</a-button>
|
|
|
+ </div>
|
|
|
+ <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-icon slot="prefix" type="plus" />
|
|
|
</a-input>
|
|
|
- <a-list item-layout="horizontal" :data-source="data">
|
|
|
- <a-list-item slot="renderItem" slot-scope="item, index">
|
|
|
- <a-list-item-meta description="任务">
|
|
|
- <a slot="title" href="#">{{ item.title }}</a>
|
|
|
- <a-button size="small" shape="circle" slot="avatar" style="margin-top: 10px;" />
|
|
|
- </a-list-item-meta>
|
|
|
- <a-icon type="star" />
|
|
|
- </a-list-item>
|
|
|
- </a-list>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-layout-content>
|
|
|
- <!-- 侧边栏 -->
|
|
|
- <task-info-sider ref="taskInfoSlider"></task-info-sider>
|
|
|
- </a-layout>
|
|
|
+ <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>
|
|
|
+ <strong>已完成 {{ finishedTask.length }}</strong>
|
|
|
+ </h3>
|
|
|
+ </template>
|
|
|
+ <task-list :taskdata="finishedTask" @getData="getFinishedData" @refreshData="refreshData" @openConfig="openConfig"/>
|
|
|
+ </a-collapse-panel>
|
|
|
+ </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>
|
|
|
+
|
|
|
+ <!--点击建议打开抽屉-->
|
|
|
+ <a-drawer
|
|
|
+ title="建议"
|
|
|
+ placement="right"
|
|
|
+ :width="400"
|
|
|
+ :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"/>
|
|
|
+ </div>
|
|
|
+ <div v-if="beforeTask.length!=0">
|
|
|
+ <h4><strong>先前</strong></h4>
|
|
|
+ <move-task-list :taskdata="beforeTask"/>
|
|
|
+ </div>
|
|
|
+ <div v-if="latelyTask.length!=0">
|
|
|
+ <h4><strong>最近添加</strong></h4>
|
|
|
+ <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>
|
|
|
+
|
|
|
+ </page-header-wrapper>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import TaskInfoSider from '../components/TaskInfoSider'
|
|
|
+const columns=[
|
|
|
+ {
|
|
|
+ title:'mark',
|
|
|
+ dataIndex: 'mark',
|
|
|
+ scopedSlots: { customRender: 'mark' },
|
|
|
+ width: '5px',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:'task',
|
|
|
+ dataIndex: 'task',
|
|
|
+ scopedSlots: { customRender: 'task' },
|
|
|
+ width: '90%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'operation',
|
|
|
+ dataIndex: '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
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- data: [{
|
|
|
- title: '起床',
|
|
|
- isComplete: false,
|
|
|
- isImportant: true
|
|
|
- }, {
|
|
|
- title: '吃饭',
|
|
|
- isComplete: false,
|
|
|
- isImportant: false
|
|
|
- }, {
|
|
|
- title: '上班',
|
|
|
- isComplete: false,
|
|
|
- isImportant: false
|
|
|
- }, {
|
|
|
- title: '下班',
|
|
|
- isComplete: false,
|
|
|
- isImportant: false
|
|
|
- }] // 任务数据
|
|
|
+ //当前时间
|
|
|
+ nowDate:"",
|
|
|
+ yesterdayTask:[
|
|
|
+ {
|
|
|
+ finish:true,
|
|
|
+ important:true,
|
|
|
+ key:'5',
|
|
|
+ title: '去公园散步',
|
|
|
+ type:'任务'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ finish:false,
|
|
|
+ important:false,
|
|
|
+ key:'8',
|
|
|
+ title: '去看电影',
|
|
|
+ type:'任务'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ beforeTask:[
|
|
|
+ {
|
|
|
+ finish:false,
|
|
|
+ important:true,
|
|
|
+ key:'6',
|
|
|
+ title: '去楼下遛狗',
|
|
|
+ type:'任务'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ latelyTask:[
|
|
|
+ {
|
|
|
+ finish:false,
|
|
|
+ important:true,
|
|
|
+ key:'7',
|
|
|
+ title: '喂狗',
|
|
|
+ type:'任务'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ uuid: 20,
|
|
|
+ tasktitle:'',
|
|
|
+ doingTask:[],
|
|
|
+ finishedTask:[],
|
|
|
+ columns,
|
|
|
+ task_icon:'',
|
|
|
+
|
|
|
+ //右击菜单相关
|
|
|
+ menuData: {},
|
|
|
+ menuVisible: false,
|
|
|
+ menuStyle: {
|
|
|
+ position: "absolute",
|
|
|
+ top: "0",
|
|
|
+ left: "0",
|
|
|
+ border: "1px solid #eee",
|
|
|
+ width: "200px"
|
|
|
+ },
|
|
|
+ customClick: record => ({
|
|
|
+ on: {
|
|
|
+ //点击
|
|
|
+ click: e => {
|
|
|
+ this.selectItem = record; // 存储点击行数据
|
|
|
+
|
|
|
+ },
|
|
|
+ // 右击
|
|
|
+ contextmenu: e => {
|
|
|
+ e.preventDefault();
|
|
|
+ this.menuData = record;
|
|
|
+ this.menuVisible = true;
|
|
|
+ this.menuStyle.top = e.clientY-90 + "px";
|
|
|
+ this.menuStyle.left = e.clientX-280 + "px";
|
|
|
+ document.body.addEventListener("mousedown", this.bodyClick);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }),
|
|
|
+
|
|
|
+ //建议-抽屉相关
|
|
|
+ taskdrawer: false,
|
|
|
+
|
|
|
+ //任务-设置相关
|
|
|
+ taskconfig: false,
|
|
|
+
|
|
|
+ //添加任务相关
|
|
|
+ uuid: 5, //新任务id
|
|
|
+ tasktitle: '', //任务title
|
|
|
+
|
|
|
+ //展开折叠面板的key
|
|
|
+ activeKey: ['finished'],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ taskdrawer(value) {
|
|
|
+ if (value) {
|
|
|
+ document.body.addEventListener('click', this.closeMenu)
|
|
|
+ } else {
|
|
|
+ document.body.removeEventListener('click', this.closeMenu)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activeKey(key) {
|
|
|
+ if(!key.length){
|
|
|
+ this.closeConfig()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ showright: function() {
|
|
|
+ return this.taskdrawer||this.taskconfig
|
|
|
+ },
|
|
|
+ finished_disabled: function () {
|
|
|
+ if (this.finishedTask.length == 0) {
|
|
|
+ this.activeKey = []
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created (){
|
|
|
+ this.currentTime();
|
|
|
+ this.getDoingData();
|
|
|
+ this.getFinishedData();
|
|
|
+ },
|
|
|
+ beforeDestroy(){
|
|
|
+ if (this.formatDate) {
|
|
|
+ clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ currentTime() {
|
|
|
+ setInterval(this.formatDate, 500);
|
|
|
+ },
|
|
|
+ formatDate() {
|
|
|
+ let date = new Date();
|
|
|
+ let year = date.getFullYear(); // 年
|
|
|
+ let month = date.getMonth() + 1; // 月
|
|
|
+ let day = date.getDate(); // 日
|
|
|
+ let week = date.getDay(); // 星期
|
|
|
+ let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
|
|
|
+ let hour = date.getHours(); // 时
|
|
|
+ hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
|
|
|
+ let minute = date.getMinutes(); // 分
|
|
|
+ minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
|
|
|
+ let second = date.getSeconds(); // 秒
|
|
|
+ second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
|
|
|
+ this.nowDate = `${year}年${month}月${day}日 ${hour}:${minute}:${second} ${weekArr[week]}`;
|
|
|
+ },
|
|
|
+
|
|
|
+ //添加任务
|
|
|
+ addtask() {
|
|
|
+ let data = {
|
|
|
+ finish: false,
|
|
|
+ important: false,
|
|
|
+ key: (this.uuid = this.uuid + 1),
|
|
|
+ title: this.tasktitle,
|
|
|
+ type: '任务',
|
|
|
+ }
|
|
|
+
|
|
|
+ //axios 添加任务：到任务列表第一个
|
|
|
+
|
|
|
+ this.doingTask.unshift(data)
|
|
|
+
|
|
|
+ this.tasktitle = ''
|
|
|
+ },
|
|
|
+
|
|
|
+ getDoingData(){
|
|
|
+ //axios 获取今天正在进行的任务
|
|
|
+ this.doingTask = [
|
|
|
+ {
|
|
|
+ finish:false,
|
|
|
+ important:true,
|
|
|
+ key:'2',
|
|
|
+ title: '吃饭',
|
|
|
+ type:'任务'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ finish:false,
|
|
|
+ important:true,
|
|
|
+ key:'3',
|
|
|
+ title: '上班',
|
|
|
+ type:'任务'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ finish:false,
|
|
|
+ important:false,
|
|
|
+ key:'4',
|
|
|
+ title: '下班',
|
|
|
+ type:'任务'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ getFinishedData(){
|
|
|
+ //axios 获取已经完成的任务
|
|
|
+ this.finishedTask = [
|
|
|
+ {
|
|
|
+ finish:true,
|
|
|
+ important:false,
|
|
|
+ key:'1',
|
|
|
+ title: '起床',
|
|
|
+ type:'任务'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ finish:true,
|
|
|
+ important:false,
|
|
|
+ key:'10',
|
|
|
+ title: '回家',
|
|
|
+ type:'任务'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+
|
|
|
+ refreshData(){
|
|
|
+ console.log("刷新完成和未完成列表")
|
|
|
+ this.getDoingData();
|
|
|
+ this.getFinishedData();
|
|
|
+ },
|
|
|
+
|
|
|
+ //修改完成状态
|
|
|
+ changeFinish(task){
|
|
|
+ task.finish = !task.finish
|
|
|
+ },
|
|
|
+
|
|
|
+ //修改重要性
|
|
|
+ changeImportant(task){
|
|
|
+ task.important = !task.important
|
|
|
+ },
|
|
|
+
|
|
|
+ //关闭右键菜单
|
|
|
+ bodyClick() {
|
|
|
+ this.menuVisible = false;
|
|
|
+ document.body.removeEventListener("mousedown", this.bodyClick);
|
|
|
+ },
|
|
|
+
|
|
|
+ //建议-抽屉相关
|
|
|
+ showDrawer() {
|
|
|
+ this.taskdrawer = true;
|
|
|
+ },
|
|
|
+ closeDrawer() {
|
|
|
+ this.taskdrawer = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ //任务配置相关
|
|
|
+ openConfig (param){
|
|
|
+ this.taskconfig = true;
|
|
|
+ console.log(param)
|
|
|
+ },
|
|
|
+ closeConfig (){
|
|
|
+ this.taskconfig = false;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+.advise_drawer >>> .ant-drawer-content-wrapper .ant-drawer-content{
|
|
|
+ background-color: #faf9f8;
|
|
|
+}
|
|
|
+
|
|
|
+.init_input >>> .ant-input {
|
|
|
+ border: none;
|
|
|
+ box-shadow: none;
|
|
|
+ border-bottom: 1px solid;
|
|
|
+}
|
|
|
+
|
|
|
+.panel-style >>> .ant-collapse-content .ant-collapse-content-box {
|
|
|
+ padding: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
