🎉优化：修改布局、合并任务详情组件

src/views/task/components/AddMyDay.vue

@@ -1,58 +0,0 @@
-<template>
-  <a-card>
-    <div v-if="isAddedMyDay==false">
-      <a-row>
-        <a-col :span="2">
-          <a-icon type="fire" style="fontSize:18px;margin-top:2px;margin-left:5px;" />
-        </a-col>
-        <a-col :span="22">
-          <a-checkable-tag style="fontSize:14px;margin-left:10px;" @change="addMyDay"> 添加到“我的一天” </a-checkable-tag>
-        </a-col>
-      </a-row>
-    </div>
-    <div v-else>
-      <a-row>
-        <a-col :span="2">
-          <a-icon type="fire" style="color:#4169E1;fontSize:18px;margin-top:2px;margin-left:5px;" />
-        </a-col>
-        <a-col :span="20">
-          <a-checkable-tag style="color:#4169E1;fontSize:14px;margin-left:10px;"> 已添加到“我的一天” </a-checkable-tag>
-        </a-col>
-        <a-col :span="2">
-          <a-tooltip>
-            <template slot="title">
-              从“我的一天”中删除
-            </template>
-            <a-popconfirm :visible="false" @visibleChange="deleteMyDay">
-              <a-icon type="close" />
-            </a-popconfirm>
-          </a-tooltip>
-        </a-col>
-      </a-row>
-    </div>
-  </a-card>
-</template>
-
-<script>
-export default {
-  props: {
-    taskInfo: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      isAddedMyDay: false
-    }
-  },
-  methods: {
-    addMyDay() {
-      this.isAddedMyDay = true
-    },
-    deleteMyDay() {
-      this.isAddedMyDay = false
-    }
-  }
-}
-</script>

src/views/task/components/TaskDetail.vue

@@ -1,106 +0,0 @@
-<template>
-  <div>
-    <a-card>
-      <a-list item-layout="horizontal">
-        <a-list-item>
-          <a-row>
-            <a-col :span="2">
-              <a-icon type="bell" style="fontSize:18px;margin-top:2px;margin-left:5px;" />
-            </a-col>
-            <a-col :span="14" :offset="8">
-              <a-checkable-tag style="fontSize:14px" @change="remindMe"> 提醒我 </a-checkable-tag>
-            </a-col>
-          </a-row>
-        </a-list-item>
-        <a-list-item>
-          <a-row>
-            <a-col :span="2">
-              <a-icon type="calendar" style="fontSize:18px;margin-top:7px;margin-left:5px;" />
-            </a-col>
-            <a-col :span="21" :offset="1">
-              <a-range-picker :defaultValue="[moment(), moment()]" :ranges="{ '今天': [moment(), moment()], '本周': [moment(), moment().endOf('week')], '本月': [moment(), moment().endOf('month')] }" @change="updateDateRange" />
-            </a-col>
-          </a-row>
-        </a-list-item>
-        <a-list-item>
-          <a-list-item-meta>
-            <div slot="title">
-              <a-row>
-                <a-col :span="2">
-                  <a-icon type="clock-circle" style="fontSize:18px;margin-top:7px;margin-left:5px;" />
-                </a-col>
-                <a-col :span="21" :offset="1">
-                  <a-input-number style="width: 100%" v-model="manhours" placeholder="工时（单位：小时）" :min="0" :step="0.1" @pressEnter="updateManhours" />
-                </a-col>
-              </a-row>
-            </div>
-          </a-list-item-meta>
-        </a-list-item>
-        <a-list-item>
-          <a-row>
-            <a-col :span="2">
-              <a-icon type="sync" style="fontSize:18px;margin-top:2px;margin-left:5px;" />
-            </a-col>
-            <a-col :span="13" :offset="9">
-              <a-checkable-tag style="fontSize:14px" @change="repeatTask"> 重复 </a-checkable-tag>
-            </a-col>
-          </a-row>
-        </a-list-item>
-        <a-list-item>
-          <a-row>
-            <a-col :span="2">
-              <a-icon type="profile" style="fontSize:18px;margin-top:2px;margin-left:5px;" />
-            </a-col>
-            <a-col :span="16" :offset="6">
-              <a-checkable-tag style="fontSize:14px" @change="$refs.taskReport.init()"> 任务汇报 </a-checkable-tag>
-            </a-col>
-          </a-row>
-        </a-list-item>
-      </a-list>
-    </a-card>
-
-    <!-- 任务汇报 -->
-    <task-report ref="taskReport" @ok="handleOk"></task-report>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-import TaskReport from './TaskReport'
-
-export default {
-  components: {
-    TaskReport
-  },
-  props: {
-    taskInfo: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      manhours: 0
-    }
-  },
-  methods: {
-    moment,
-    remindMe() {
-      this.$message.success('点击提醒我')
-    },
-    updateDateRange(date, dateString) {
-      this.$message.success('更新日期范围：' + dateString)
-    },
-    updateManhours(e) {
-      this.$message.success('更新工时：' + this.manhours)
-      console.log(e)
-    },
-    repeatTask() {
-      this.$message.success('任务重复')
-    },
-    handleOk() {
-      this.$message.success('任务汇报')
-    }
-  }
-}
-</script>

src/views/task/components/TaskDetails.vue

@@ -1,9 +1,9 @@
 <template>
-  <div style="background-color:rgb(240,242,245);padding:10px;">
+  <div style="background-color:rgb(240,242,245);">
     <a-space direction="vertical">
       <!-- 任务步骤 -->
       <a-card type="inner">
-        <a-row :gutter="16">
+        <a-row>
           <div v-if="taskInfo.endDate != ''" style="margin-top:5px;">
             <a-col :span="2">
               <a-tooltip>
@@ -13,12 +13,12 @@
                 <a-button shape="circle" type="primary" icon="check" size="small" @click="completeTask" />
               </a-tooltip>
             </a-col>
-            <a-col :span="20">
+            <a-col :span="20" style="margin-left:5px;">
               <a-checkable-tag>
                 <del> <span style="font-size:15px">{{ taskInfo.title }}</span></del>
               </a-checkable-tag>
             </a-col>
-            <a-col :span="2">
+            <a-col :span="1" style="margin-left:5px;">
               <div v-if="taskInfo.starLevel == false">
                 <a-tooltip>
                   <template slot="title">
@@ -50,10 +50,10 @@
                 <a-button shape="circle" size="small" @click="completeTask" />
               </a-tooltip>
             </a-col>
-            <a-col :span="20">
+            <a-col :span="20" style="margin-left:5px;">
               <a-input v-model="taskInfo.title" @pressEnter="updateTask" />
             </a-col>
-            <a-col :span="2" style="margin-top:5px;">
+            <a-col :span="1" style="margin-top:5px;margin-left:5px;">
               <div v-if="taskInfo.starLevel == false">
                 <a-tooltip>
                   <template slot="title">
@@ -237,6 +237,25 @@
         <a-textarea style="margin-left:5px;" :auto-size="{ minRows: 3, maxRows: 5 }" />
       </a-card>
     </a-space>
+    <br>
+    <br>
+    <div style="border-top:1px solid rgb(234,234,234);font-size:15px">
+      <a-row>
+        <a-col :span="1">
+          <a-popconfirm :visible="false" @visibleChange="collapseSider">
+            <a-icon type="right-square" />
+          </a-popconfirm>
+        </a-col>
+        <a-col :span="22" style="text-align:center;">
+          创建于 9 月 6 日 周一
+        </a-col>
+        <a-col :span="1">
+          <a-popconfirm title="是否确认删除任务?" ok-text="是" cancel-text="否" @confirm="deleteTask">
+            <a-icon type="delete" />
+          </a-popconfirm>
+        </a-col>
+      </a-row>
+    </div>
 
     <!-- 任务汇报 -->
     <task-report ref="taskReport" @ok="handleOk"></task-report>
@@ -278,19 +297,16 @@ export default {
   methods: {
     getTaskStep(param) {
       // todo：获取任务步骤数据
-      this.taskStepData = [
-        // {
-        //   title: '坐起来',
-        //   isStepComplete: true
-        // },
-        {
-          title: '穿衣服',
-          isStepComplete: true
-        },
-        {
-          title: '刷牙洗脸',
-          isStepComplete: false
-        }]
+      this.taskStepData = [{
+        title: '坐起来',
+        isStepComplete: true
+      }, {
+        title: '穿衣服',
+        isStepComplete: true
+      }, {
+        title: '刷牙洗脸',
+        isStepComplete: false
+      }]
     },
     completeTask() {
       if (this.taskInfo.endDate) {
@@ -340,9 +356,15 @@ export default {
     handleOk() {
       this.$message.success('任务汇报')
     },
-
     uploadFile() {
 
+    },
+    collapseSider() {
+      //显示任务配置框
+      this.$emit('collapseSider');
+    },
+    deleteTask() {
+      this.$message.success('删除任务')
     }
   }
 }

src/views/task/components/TaskInfoSider.vue

@@ -1,103 +0,0 @@
-<template>
-  <!-- 侧边栏 -->
-  <a-layout-sider style="margin-left:20px;background-color:rgb(240,242,245)" theme="light" :width="siderWidth">
-    <div>
-      <a-space direction="vertical">
-        <!-- 任务步骤 -->
-        <task-step :taskInfo="taskInfo" :data="taskStepData"></task-step>
-        <!-- 添加到“我的一天” -->
-        <add-my-day :taskInfo="taskInfo"></add-my-day>
-        <!-- 任务详情 -->
-        <task-detail :taskInfo="taskInfo"></task-detail>
-        <!-- 添加文件 -->
-        <a-card>
-          <a-row>
-            <a-col :span="2">
-              <a-icon type="paper-clip" style="fontSize:18px;margin-top:2px;margin-left:5px;" />
-            </a-col>
-            <a-col :span="22">
-              <a-upload name="file" :multiple="true" action="" @change="uploadFile">
-                <a-checkable-tag style="fontSize:14px;;margin-left:10px;"> 添加文件 </a-checkable-tag>
-              </a-upload>
-            </a-col>
-          </a-row>
-        </a-card>
-        <!-- 备注 -->
-        <a-card>
-          <a-textarea style="margin-left:5px;" :auto-size="{ minRows: 3, maxRows: 5 }" />
-        </a-card>
-      </a-space>
-    </div>
-    <br>
-    <div style="border-top:1px solid rgb(234,234,234);font-size:15px">
-      <a-row>
-        <a-col :span="1">
-          <a-popconfirm :visible="false" @visibleChange="collapseSider">
-            <a-icon type="right-square" />
-          </a-popconfirm>
-        </a-col>
-        <a-col :span="22" style="text-align:center;">
-          创建于 9 月 6 日 周一
-        </a-col>
-        <a-col :span="1">
-          <a-popconfirm title="是否确认删除任务?" ok-text="是" cancel-text="否" @confirm="deleteTask">
-            <a-icon type="delete" />
-          </a-popconfirm>
-        </a-col>
-      </a-row>
-    </div>
-  </a-layout-sider>
-</template>
-
-<script>
-import TaskStep from '../components/TaskStep'
-import AddMyDay from '../components/AddMyDay'
-import TaskDetail from '../components/TaskDetail'
-
-export default {
-  components: {
-    TaskStep,
-    AddMyDay,
-    TaskDetail
-  },
-  data() {
-    return {
-      siderWidth: '0px', // 任务详情侧边栏宽度
-      taskInfo: {},
-      taskStepData: [{
-        title: '坐起来',
-        isStepComplete: true
-      }, {
-        title: '穿衣服',
-        isStepComplete: true
-      }, {
-        title: '刷牙洗脸',
-        isStepComplete: false
-      }] // 任务步骤数据
-    }
-  },
-  computed: {
-    // 是否显示任务步骤列表
-    isShowStepList: function() {
-      return this.taskStepData.length > 0
-    }
-  },
-  methods: {
-    init(record) {
-      this.siderWidth = '350px'
-
-      this.taskInfo = record
-      // todo：获取任务步骤数据
-    },
-    collapseSider() {
-      this.siderWidth = '0px'
-    },
-    deleteTask() {
-
-    },
-    uploadFile() {
-
-    }
-  }
-}
-</script>

src/views/task/components/TaskStep.vue

@@ -1,177 +0,0 @@
-<template>
-  <a-card>
-    <a-row :gutter="16">
-      <div v-if="taskInfo.isComplete == true" style="margin-top:5px;">
-        <a-col :span="2">
-          <a-tooltip>
-            <template slot="title">
-              标记为未完成
-            </template>
-            <a-button shape="circle" type="primary" icon="check" size="small" @click="completeTask" />
-          </a-tooltip>
-        </a-col>
-        <a-col :span="20">
-          <a-checkable-tag>
-            <del> <span style="font-size:15px">{{ taskInfo.title }}</span></del>
-          </a-checkable-tag>
-        </a-col>
-        <a-col :span="2">
-          <div v-if="taskInfo.isImportant == false">
-            <a-tooltip>
-              <template slot="title">
-                将任务标记为重要
-              </template>
-              <a-popconfirm :visible="false" @visibleChange="signImportance">
-                <a-icon type="star" />
-              </a-popconfirm>
-            </a-tooltip>
-          </div>
-          <div v-else>
-            <a-tooltip>
-              <template slot="title">
-                删除重要性
-              </template>
-              <a-popconfirm :visible="false" @visibleChange="signImportance">
-                <a-icon style="color:#4169E1" type="star" theme="filled" />
-              </a-popconfirm>
-            </a-tooltip>
-          </div>
-        </a-col>
-      </div>
-      <div v-else>
-        <a-col :span="2" style="margin-top:5px;">
-          <a-tooltip>
-            <template slot="title">
-              标记为已完成
-            </template>
-            <a-button shape="circle" size="small" @click="completeTask" />
-          </a-tooltip>
-        </a-col>
-        <a-col :span="20">
-          <a-input v-model="taskInfo.title" @pressEnter="updateTask" />
-        </a-col>
-        <a-col :span="2" style="margin-top:5px;">
-          <div v-if="taskInfo.isImportant == false">
-            <a-tooltip>
-              <template slot="title">
-                将任务标记为重要
-              </template>
-              <a-popconfirm :visible="false" @visibleChange="signImportance">
-                <a-icon type="star" />
-              </a-popconfirm>
-            </a-tooltip>
-          </div>
-          <div v-else>
-            <a-tooltip>
-              <template slot="title">
-                删除重要性
-              </template>
-              <a-popconfirm :visible="false" @visibleChange="signImportance">
-                <a-icon style="color:#4169E1" type="star" theme="filled" />
-              </a-popconfirm>
-            </a-tooltip>
-          </div>
-        </a-col>
-      </div>
-    </a-row>
-    <a-row style="margin-top:15px">
-      <a-col>
-        <a-list v-show="isShowStepList" item-layout="horizontal" size="small" :data-source="stepData">
-          <a-list-item slot="renderItem" slot-scope="item, index">
-            <div v-if="item.isStepComplete == true">
-              <a-list-item-meta>
-                <a slot="title" href="#"><del v-show="true">{{ item.title }}</del></a>
-                <div slot="avatar">
-                  <a-tooltip>
-                    <template slot="title">
-                      标记为未完成
-                    </template>
-                    <a-button shape="circle" type="primary" icon="check" size="small" @click="completeStep(index)" />
-                  </a-tooltip>
-                </div>
-              </a-list-item-meta>
-            </div>
-            <div v-else>
-              <a-list-item-meta>
-                <a slot="title" href="#">{{ item.title }}</a>
-                <div slot="avatar">
-                  <a-tooltip>
-                    <template slot="title">
-                      标记为已完成
-                    </template>
-                    <a-button shape="circle" size="small" @click="completeStep(index)" />
-                  </a-tooltip>
-                </div>
-              </a-list-item-meta>
-            </div>
-            <a-tooltip>
-              <template slot="title">
-                删除步骤
-              </template>
-              <a-popconfirm title="是否确认删除步骤?" ok-text="是" cancel-text="否" @confirm="deleteStep">
-                <a-icon type="close" />
-              </a-popconfirm>
-            </a-tooltip>
-          </a-list-item>
-        </a-list>
-      </a-col>
-    </a-row>
-    <a-row>
-      <a-col>
-        <a-input v-model="stepContent" :placeholder="isShowStepList?' 下一步 ':' 添加步骤 '" @pressEnter="addStep">
-          <a-icon slot="prefix" type="plus" />
-        </a-input>
-      </a-col>
-    </a-row>
-  </a-card>
-</template>
-
-<script>
-export default {
-  props: {
-    taskInfo: {
-      type: Object,
-      required: true
-    },
-    data: {
-      type: Array,
-      required: true
-    }
-  },
-  data() {
-    return {
-      stepContent: '',
-      stepData: this.data
-    }
-  },
-  computed: {
-    // 是否显示任务步骤列表
-    isShowStepList: function() {
-      return this.stepData.length > 0
-    }
-  },
-  methods: {
-    completeTask() {
-      this.taskInfo.isComplete = !this.taskInfo.isComplete
-    },
-    updateTask(e) {
-      this.$message.success('修改任务')
-    },
-    signImportance() {
-      this.taskInfo.isImportant = !this.taskInfo.isImportant
-    },
-    addStep() {
-      this.stepData.push({
-        'title': this.stepContent
-      })
-      this.stepContent = ''
-    },
-    completeStep(index) {
-      this.stepData[index].isStepComplete = !this.stepData[index].isStepComplete
-    },
-    deleteStep(e) {
-      this.$message.success('删除步骤')
-    }
-  }
-}
-</script>

src/views/task/personal/OneDayForMe.vue

@@ -3,20 +3,24 @@
     <template v-slot:content>
       <div class="page-header-content">
         {{ nowDate }}
+      </div>
+    </template>
+
+    <a-layout>
+      <a-layout-content style="height:100%;background-color:white">
         <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-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">
@@ -29,16 +33,14 @@
             <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:-80px;">
-        <!-- 任务详情侧边栏 -->
-        <task-details ref="taskDetails" v-show="taskconfig" :taskInfo="taskInfo"></task-details>
+      </a-layout-content>
 
-        <!--点击建议打开抽屉-->
-        <a-drawer title="建议" placement="right" :width="350" :visible="taskdrawer" :mask="false" @close="closeDrawer" class="advise_drawer" style="background-color: #faf9f8;">
+      <a-layout-sider v-show="showright" style="height:100%;margin-left:10px;background-color:rgb(240,242,245)" theme="light" width="300px">
+        <task-details ref="taskDetails" v-show="taskconfig" :taskInfo="taskInfo" @collapseSider="closeConfig"></task-details>
+        <a-card title="建议" style="width:300px;" v-show="taskdrawer">
+          <div slot="extra">
+            <a-button size="small" icon="close" @click="closeDrawer"></a-button>
+          </div>
           <div v-if="yesterdayTask.length!=0">
             <h4><strong>昨天</strong></h4>
             <move-task-list :taskdata="yesterdayTask" />
@@ -51,9 +53,9 @@
             <h4><strong>最近添加</strong></h4>
             <move-task-list :taskdata="latelyTask" />
           </div>
-        </a-drawer>
-      </div>
-    </template>
+        </a-card>
+      </a-layout-sider>
+    </a-layout>
 
     <!--右键菜单-->
     <a-menu :style="menuStyle" v-if="menuVisible">
@@ -357,9 +359,7 @@ export default {
     showDrawer() {
       this.taskdrawer = true
 
-      if (this.taskconfig) {
-        this.taskconfig = false
-      }
+      this.taskconfig = false
     },
     closeDrawer() {
       this.taskdrawer = false
@@ -372,9 +372,7 @@ export default {
       console.log(param)
       this.taskInfo = param
 
-      if (this.taskdrawer) {
-        this.taskdrawer = false
-      }
+      this.taskdrawer = false
     },
     closeConfig() {
       this.taskconfig = false