解决冲突

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'generator-star-spacing': 'off',
     'no-mixed-operators': 0,
+    'space-before-function-paren':0,
     'vue/max-attributes-per-line': [
       2,
       {

src/config/router.config.js

@@ -274,31 +274,31 @@ export const asyncRouterMap = [
         path: '/tasks/myday',
         name: 'myday',
         component: () => import(/* webpackChunkName: "fail" */ '@/views/task/personal/OneDayForMe'),
-        meta: { title: 'menu.exception', icon: 'alert' }
+        meta: { title: 'menu.tasks.myday', icon: 'flag' }
       },
       {
         path: '/tasks/important',
         name: 'important',
-        component: () => import(/* webpackChunkName: "fail" */ '@/views/task/personal/OneDayForMe'),
-        meta: { title: 'menu.exception', icon: 'star' }
+        component: () => import(/* webpackChunkName: "fail" */ '@/views/task/personal/Important'),
+        meta: { title: 'menu.tasks.important', icon: 'star' }
       },
       {
         path: '/tasks/planned',
         name: 'planned',
-        component: () => import(/* webpackChunkName: "fail" */ '@/views/task/personal/OneDayForMe'),
-        meta: { title: 'menu.exception', icon: 'calendar' }
+        component: () => import(/* webpackChunkName: "fail" */ '@/views/task/personal/InsideThePlan'),
+        meta: { title: 'menu.tasks.planned', icon: 'calendar' }
       },
       {
         path: '/tasks/assigned_to_me',
         name: 'assigned_to_me',
-        component: () => import(/* webpackChunkName: "fail" */ '@/views/task/personal/OneDayForMe'),
-        meta: { title: 'menu.exception', icon: 'user' }
+        component: () => import(/* webpackChunkName: "fail" */ '@/views/task/personal/AssignedToMe'),
+        meta: { title: 'menu.tasks.assigned_to_me', icon: 'user' }
       },
       {
         path: '/tasks/inbox',
         name: 'inbox',
-        component: () => import(/* webpackChunkName: "fail" */ '@/views/task/personal/OneDayForMe'),
-        meta: { title: 'menu.exception', icon: 'home' }
+        component: () => import(/* webpackChunkName: "fail" */ '@/views/task/personal/MyTask'),
+        meta: { title: 'menu.tasks.inbox', icon: 'inbox' }
       },
 
       // 项目管理部分

src/layouts/BasicLayout.vue

@@ -51,7 +51,7 @@ import { CONTENT_WIDTH_TYPE, SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mu
 import defaultSettings from '@/config/defaultSettings'
 import RightContent from '@/components/GlobalHeader/RightContent'
 import GlobalHeader from '@/components/GlobalHeader'
-import GlobalFooter from '@/components/GlobalFooter'
+// import GlobalFooter from '@/components/GlobalFooter'
 import LogoSvg from '../assets/logo.svg?inline'
 
 export default {
@@ -60,7 +60,7 @@ export default {
     SettingDrawer,
     RightContent,
     GlobalHeader,
-    GlobalFooter,
+    // GlobalFooter,
     LogoSvg
   },
   data () {

src/views/task/components/AddMyDay.vue

@@ -0,0 +1,58 @@
+<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

@@ -0,0 +1,106 @@
+<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/TaskInfoSider.vue

@@ -0,0 +1,103 @@
+<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/TaskReport.vue

@@ -0,0 +1,68 @@
+<template>
+  <a-modal width="500px" :visible="visible" :confirmLoading="confirmLoading" title="任务汇报" @ok="handleSubmit" @cancel="handleCancel">
+    <a-form :form="form">
+      <a-row :gutter="16">
+        <a-col :span="12">
+          <a-form-item label="工作日期">
+            <a-date-picker placeholder="工作日期" v-decorator="['work_date', {rules: [{required: true, message: '请输入工作日期！'}]}]" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-item label="实际用时" has-feedback>
+            <a-input-number style="width:100%" placeholder="单位：小时" :step="0.1" :min="0" v-decorator="['work_hours', {rules: [{required: true, message: '请输入实际用时！'}]}]" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="16">
+        <a-col :span="24">
+          <a-form-item label="工作明细" has-feedback>
+            <a-textarea placeholder="工作内容描述" :rows="4" v-decorator="['work_detail', {rules: [{required: true, message: '请输入工作明细！'}]}]" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      confirmLoading: false,
+      visible: false, // 标记任务汇报对话框是否显示
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    // 初始化方法
+    init() {
+      this.visible = true
+    },
+    handleSubmit() {
+      const { form: { validateFields } } = this
+      this.confirmLoading = true
+      validateFields((errors, values) => {
+        if (!errors) {
+          //   sysConfigAdd(values).then((res) => {
+          //     this.confirmLoading = false
+          //     if (res.success) {
+          //       this.$message.success('新增成功')
+          this.$emit('ok', values)
+          this.handleCancel()
+          //     } else {
+          //       this.$message.error('新增失败：' + res.message)
+          //     }
+          //   }).finally((res) => {
+          //     this.confirmLoading = false
+          //   })
+        } else {
+          this.confirmLoading = false
+        }
+      })
+    },
+    handleCancel() {
+      this.visible = false
+    }
+  }
+}
+</script>

src/views/task/components/TaskStep.vue

@@ -0,0 +1,177 @@
+<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

@@ -46,6 +46,8 @@
           <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
@@ -111,13 +113,15 @@ const columns=[
 
 import TaskList from '@/components/LTTC/TaskList/TaskList'
 import MoveTaskList from '@/components/LTTC/TaskList/MoveTaskList'
+import TaskInfoSider from '../components/TaskInfoSider'
 export default {
-  name: 'onedayforme',
+  name: 'OneDayForMe',
   components: {
     TaskList,
-    MoveTaskList
+    MoveTaskList,
+    TaskInfoSider
   },
-  data () {
+  data() {
     return {
       //当前时间
       nowDate:"",