增加我的一天、任务列表组件

src/components/LTTC/TaskList/MoveTaskList.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <a-table
+      :customRow="customClick"
+      :columns="columns"
+      :pagination="false"
+      :showHeader="false"
+      :data-source="taskdata"
+    >
+      <template slot="mark" slot-scope="text, record">
+        <a-tooltip placement="top">
+          <template slot="title">
+            <span>{{ record.finish ? '标记为未完成' : '标记为已完成' }}</span>
+          </template>
+          <a-button
+            @click.stop="changeFinish(record)"
+            :type="record.finish ? 'primary' : ''"
+            :icon="record.finish ? 'check' : ''"
+            size="small"
+            shape="circle"
+          />
+        </a-tooltip>
+      </template>
+      <template slot="task" slot-scope="text, record">
+        <div>
+          <span v-if="record.finish"
+            ><s>{{ record.title }}</s></span
+          >
+          <span v-else>{{ record.title }}</span>
+        </div>
+        <div style="font-size: 12px; margin-bottom: -10px">
+          <span>{{ record.type }}</span>
+        </div>
+      </template>
+      <template slot="operation" slot-scope="text, record">
+        <a-tooltip placement="topRight">
+          <template slot="title">
+            <span>添加到“我的一天”</span>
+          </template>
+          <a-icon @click.stop="changeImportant(record)" type="plus" />
+        </a-tooltip>
+      </template>
+    </a-table>
+
+    <!--右键菜单-->
+    <a-menu :style="menuStyle" v-if="menuVisible" style="z-index: 9">
+      <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>
+  </div>
+</template>
+
+<script>
+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' },
+  },
+]
+export default {
+  name: 'MoveTaskList',
+  props: {
+    taskdata: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+  },
+  data() {
+    return {
+      columns,
+      selectItem: {}, //当前选中的行
+      //右击菜单相关
+      menuData: {},
+      menuVisible: false,
+      menuStyle: {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        border: "1px solid #eee",
+        width: "200px"
+      },
+      customClick: (record) => ({
+        on: {
+          //点击
+          click: (e) => {
+            this.selectItem = record // 存储点击行数据
+            //显示任务配置框
+            this.$emit('openConfig', record)
+          },
+          // 右击
+          contextmenu: (e) => {
+            e.preventDefault()
+            this.menuData = record
+            this.menuVisible = true
+            this.menuStyle.top = e.clientY  + 'px'
+            this.menuStyle.left = e.clientX -1530 + 'px'
+            document.body.addEventListener('mousedown', this.bodyClick)
+          },
+        },
+      }),
+    }
+  },
+  methods:{
+    //关闭右键菜单
+    bodyClick() {
+      this.menuVisible = false;
+      document.body.removeEventListener("mousedown", this.bodyClick);
+    },
+  },
+}
+</script>
+
+<style scoped>
+</style>

src/components/LTTC/TaskList/TaskList.vue

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <a-table
+      class="tasktable"
+      :currentRow="selectItem"
+      :customRow="customClick"
+      :columns="columns"
+      :pagination="false"
+      :showHeader="false"
+      :data-source="taskdata"
+    >
+      <template slot="mark" slot-scope="text, record">
+        <a-tooltip placement="top">
+          <template slot="title">
+            <span>{{ record.finish ? '标记为未完成' : '标记为已完成' }}</span>
+          </template>
+          <a-button
+            @click.stop="changeFinish(record)"
+            :type="record.finish ? 'primary' : ''"
+            :icon="record.finish ? 'check' : ''"
+            size="small"
+            shape="circle"
+          />
+        </a-tooltip>
+      </template>
+      <template slot="task" slot-scope="text, record">
+        <div>
+          <span v-if="record.finish"
+            ><s>{{ record.title }}</s></span
+          >
+          <span v-else>{{ record.title }}</span>
+        </div>
+        <div style="font-size: 12px; margin-bottom: -10px">
+          <span>{{ record.type }}</span>
+        </div>
+      </template>
+      <template slot="operation" slot-scope="text, record">
+        <a-tooltip placement="top">
+          <template slot="title">
+            <span>{{ record.important ? '删除重要性' : '将任务标记为重要' }}</span>
+          </template>
+          <a-icon
+            @click.stop="changeImportant(record)"
+            type="star"
+            :theme="record.important ? 'filled' : 'outlined'"
+            style="color: #3e69e4"
+          />
+        </a-tooltip>
+      </template>
+    </a-table>
+
+    <!--右键菜单-->
+    <a-menu :style="menuStyle" v-if="menuVisible" style="z-index: 9">
+      <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>
+  </div>
+</template>
+
+<script>
+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' },
+  },
+]
+
+export default {
+  name: 'TaskList',
+  props: {
+    taskdata: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+  },
+  data() {
+    return {
+      columns,
+      selectItem: {}, //当前选中的行
+      //右击菜单相关
+      menuData: {},
+      menuVisible: false,
+      menuStyle: {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        border: "1px solid #eee",
+        width: "200px"
+      },
+      customClick: (record) => ({
+        on: {
+          //点击
+          click: (e) => {
+           this.selectItem = record; // 存储点击行数据
+            //显示任务配置框
+            this.$emit('openConfig',record);
+          },
+          // 右击
+          contextmenu: (e) => {
+            e.preventDefault()
+            this.menuData = record
+            this.menuVisible = true
+            this.menuStyle.top = e.clientY - 70 + 'px'
+            this.menuStyle.left = e.clientX - 260 + 'px'
+            document.body.addEventListener('mousedown', this.bodyClick)
+          },
+        },
+      }),
+    }
+  },
+  watch: {
+    selectItem(val) {
+      this.renderRowStyle(val)
+    },
+  },
+  methods: {
+
+    //刷新任务列表
+    getTask() {
+      this.$emit('getData')
+    },
+
+    renderRowStyle(currentRow) {
+      // 类数组
+      const rowEles = document.getElementsByClassName('ant-table-row'),
+      rowSelectEles = document.getElementsByClassName('row-selection')
+      let rowList
+      if (rowSelectEles.length) {
+        rowSelectEles[0].classList.remove('row-selection')
+      }
+      if (rowEles.length) {
+        rowList = [...rowEles]
+        // 这里不用 === 是因为获取的 rowKey 是 String 类型，而给与的原数据 key 为 Number 类型
+        // 若要用 === ，事先进行类型转换再用吧
+        rowList.find((row) => row.dataset.rowKey == currentRow.key).classList.add('row-selection')
+        console.log(rowList.find((row) => row.dataset.rowKey == currentRow.key).classList)
+      }
+    },
+
+    //修改完成状态
+    changeFinish(task){  
+      let status = !task.finish
+      //axios 修改完成状态
+
+      //刷新数据
+      this.$emit('refreshData');
+    },
+
+    //修改重要性
+    changeImportant(task){
+      task.important = !task.important
+
+      //axios 修改重要性
+    },
+    
+    //关闭右键菜单
+    bodyClick() {
+      this.menuVisible = false;
+      document.body.removeEventListener("mousedown", this.bodyClick);
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+.tasktable >>> .ant-spin-nested-loading .ant-spin-container .ant-table .ant-table-content .ant-table-body table .ant-table-tbody .row-selection{
+	background-color: #f4f6ff;
+}
+</style>

src/core/lazy_use.js

@@ -45,7 +45,8 @@ import {
   Descriptions,
   Space,
   message,
-  notification
+  notification,
+  Collapse
 } from 'ant-design-vue'
 import Viser from 'viser-vue'
 
@@ -57,6 +58,7 @@ import PageLoading from '@/components/PageLoading'
 import PermissionHelper from '@/core/permission/permission'
 import './directives/action'
 
+Vue.use(Collapse);
 Vue.use(ConfigProvider)
 Vue.use(Layout)
 Vue.use(Input)

src/layouts/BasicLayout.vue

@@ -35,9 +35,9 @@
       <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
     </template>
     <!-- custom footer / 自定义Footer -->
-    <template v-slot:footerRender>
+    <!-- <template v-slot:footerRender>
       <global-footer/>
-    </template>
+    </template> -->
     <router-view />
   </pro-layout>
 </template>

src/views/task/personal/OneDayForMe.vue

@@ -1,84 +1,387 @@
 <template>
-    <div>
-       <a-row>
-         <a-col :span="3">
-           <h1><strong style="font-size: 20px;">我的一天</strong></h1>
-           九月 4日星期六
-          </a-col>
-          <a-col :span = "3" :offset="13">
-            <a-button type="link" icon="swap">
-              排序
-            </a-button>
-            <a-button type="link" icon="bulb">建议</a-button>
-          </a-col>
-       </a-row>
-       <a-row style="margin-top:15px">
-         <a-col span="18">
-          <a-input size="large" placeholder="请输入任务">
+  <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-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>
+          <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>
+
+        <!--点击建议打开抽屉-->
+        <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>
 
-          <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-col :span="5" style="margin-left: 25px;">
-          <a-card style="width: 380px">
-            <p>Card content</p>
-            <p>Card content</p>
-            <p>Card content</p>
-          </a-card>
-        </a-col>
-      </a-row>
-    </div>
+  </page-header-wrapper>
 </template>
 
 <script>
-const data = [
+const columns=[
   {
-    title: '起床',
+    title:'mark',
+    dataIndex: 'mark', 
+    scopedSlots: { customRender: 'mark' },
+    width: '5px',
   },
   {
-    title: '吃饭',
+    title:'task',
+    dataIndex: 'task',
+    scopedSlots: { customRender: 'task' },
+    width: '90%',
   },
   {
-    title: '上班',
-  },
-  {
-    title: '下班',
-  },
+    title: 'operation',
+    dataIndex: 'operation',
+    scopedSlots: { customRender: 'operation' },
+  }
 ];
+
+import TaskList from '@/components/LTTC/TaskList/TaskList'
+import MoveTaskList from '@/components/LTTC/TaskList/MoveTaskList'
 export default {
   name: 'onedayforme',
   components: {
+    TaskList,
+    MoveTaskList
   },
   data () {
     return {
-      data
+      //当前时间
+      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'],
     }
   },
-  mounted () {
+  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>