21-4-18

src/components/MainPage.vue

@@ -49,6 +49,28 @@
 }
 .right-content{
   width: calc(100% - 60px);
+  .tool-bar{
+    height: 60px;
+    line-height: 60px;
+    padding: 0 15px;
+    border-bottom: solid 1px #DEE0E3;
+    display: flex;
+    &>div{
+      flex: auto;
+      span:first-child{
+        margin-right: 20px;
+      }
+      span:nth-child(3){
+        margin-left: 50px;
+      }
+    }
+    &>p{
+      font-size: 16px;
+    }
+  }
+  .route-area{
+    height: calc(100% - 60px);
+  }
 }
 .seting-bt{
   color: white;
@@ -58,6 +80,17 @@
   bottom: 20px;
   cursor: pointer;
 }
+.dialog-style{
+  /deep/ .el-dialog__body{
+    height: 500px;
+    padding: 10px 20px;
+    overflow: auto;
+  }
+  p{
+    font-size: 16px;
+    margin-bottom: 15px;
+  }
+}
 </style>
 <template>
 <div class="main-page">
@@ -75,34 +108,97 @@
     </ul>
     <i class="el-icon-s-release seting-bt" @click="logout"></i>
   </div>
-  <router-view class="right-content"></router-view>
+  <div class="right-content">
+    <div class="tool-bar">
+      <div>
+        <span v-if="ableChangeUser">查看计划：{{$store.state.checkUser.name}}</span>
+        <el-button type="primary" icon="el-icon-edit" circle v-if="ableChangeUser" @click="personChange = true;currentUser = JSON.parse(JSON.stringify($store.state.checkUser))"></el-button>
+      </div>
+      <p>
+        <label>年度总目标：{{currentPlan.name}}</label>
+      </p>
+    </div>
+    <router-view class="route-area"></router-view>
+  </div>
+  <el-dialog
+    class="dialog-style"
+    title="切换成员"
+    :visible.sync="personChange"
+    width="500px">
+    <p>查看：{{currentUser.name}}</p>
+    <UserTree @chooseUser="chooseUser"></UserTree>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="personChange = false">取 消</el-button>
+      <el-button type="primary" @click="changeCheckUser">确 定</el-button>
+    </span>
+  </el-dialog>
 </div>
 </template>
 
 <script>
+import { getCurrent } from '@/api/year';
 import { logout } from "@/api/login";
+import UserTree from "@/components/MainPage/Department/UserTree";
+
 export default {
   name: 'MainPage',
   components: {
+    UserTree
   },
   data () {
     return {
-      list:[{
-        name: '待办',
-        src: require('@/images/icon/todo.png'),
-        link: '/app/mainPage/todo'
+      list:[
+      // {
+      //   name: '待办',
+      //   src: require('@/images/icon/todo.png'),
+      //   link: '/app/mainPage/todo'
+      // },
+      {
+        name: '年度计划',
+        src: require('@/images/icon/year.png'),
+        link: '/app/mainPage/year'
+      },{
+        name: '季度计划',
+        src: require('@/images/icon/quarter.png'),
+        link: '/app/mainPage/quarter'
       },{
-        name: '任务',
-        src: require('@/images/icon/task.png'),
-        link: '/app/mainPage/task'
+        name: '月计划',
+        src: require('@/images/icon/month.png'),
+        link: '/app/mainPage/month'
       },{
         name: '人员',
         src: require('@/images/icon/person.png'),
         link: '/app/mainPage/department'
-      }]
+      }],
+      personChange: false,
+      currentPlan:{},
+      currentUser: {}
 	  }
   },
+  created() {
+    this.getCurrent();
+  },
+  computed: {
+      ableChangeUser() {
+          return this.$route.name == 'Month'
+      },
+  },
   methods: {
+    getCurrent(){
+      let currentYear = new Date().getFullYear();
+      getCurrent(currentYear).then((data) => {
+        if(data.result){
+          this.currentPlan = data.data;
+        }
+      })
+    },
+    chooseUser(val){
+      this.currentUser = val;
+    },
+    changeCheckUser(){
+      this.$store.dispatch('setCheckUser', this.currentUser);
+      this.personChange = false;
+    },
     logout() {
       logout()
         .then(res => {

src/components/MainPage/Task/Quarter.vue → src/components/MainPage/Quarter.vue

@@ -174,14 +174,15 @@ export default {
   },
   computed: {
       ableEdit() {
-          return this.$store.state.loginUser.id == this.$store.state.checkUser.id;
+          // return this.$store.state.loginUser.id == this.$store.state.checkUser.id;
+          return true;
       },
   },
   watch: {
-    '$store.state.checkUser.id'(val){
-      this.params.userId = val;
-      this.getPlanList();
-    }
+    // '$store.state.checkUser.id'(val){
+    //   this.params.userId = val;
+    //   this.getPlanList();
+    // }
   },
   methods: {
     getPlanList(){

src/components/MainPage/Task.vue

@@ -1,136 +0,0 @@
-<style lang="scss" scoped>
-.task{
-  position: relative;
-  .tool-bar{
-    height: 60px;
-    line-height: 60px;
-    padding: 0 15px;
-    border-bottom: solid 1px #DEE0E3;
-    display: flex;
-    &>div{
-      flex: auto;
-      span:first-child{
-        margin-right: 20px;
-      }
-      span:nth-child(3){
-        margin-left: 50px;
-      }
-    }
-    &>p{
-      font-size: 16px;
-    }
-  }
-  .task-panel{
-    height: calc(100% - 60px);
-  }
-}
-.el-select1{
-  width: 110px;
-}
-.dialog-style{
-  /deep/ .el-dialog__body{
-    height: 500px;
-    padding: 10px 20px;
-    overflow: auto;
-  }
-  p{
-    font-size: 16px;
-    margin-bottom: 15px;
-  }
-}
-</style>
-<template>
-<div class="task">
-  <div class="tool-bar">
-    <div>
-      <span>查看计划：{{$store.state.checkUser.name}}</span>
-      <el-button type="primary" icon="el-icon-edit" circle @click="personChange = true;currentUser = JSON.parse(JSON.stringify($store.state.checkUser))"></el-button>
-      <span>计划类型： </span>
-      <el-select v-model="timeValue" placeholder="请选择" class="el-select1">
-        <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value">
-        </el-option>
-      </el-select>
-    </div>
-    <p>
-      <label>年度总目标：{{currentPlan.name}}</label>
-    </p>
-  </div>
-  <div class="task-panel">
-    <Year v-if="timeValue == 'year'"></Year>
-    <Quarter v-if="timeValue == 'quarter'"></Quarter>
-    <Month v-if="timeValue == 'month'"></Month>
-  </div>
-  <el-dialog
-      class="dialog-style"
-      title="切换成员"
-      :visible.sync="personChange"
-      width="500px">
-      <p>查看：{{currentUser.name}}</p>
-      <UserTree @chooseUser="chooseUser"></UserTree>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="personChange = false">取 消</el-button>
-        <el-button type="primary" @click="changeCheckUser">确 定</el-button>
-      </span>
-    </el-dialog>
-</div>
-</template>
-
-<script>
-import { getCurrent } from '@/api/year';
-import Year from "@/components/MainPage/Task/Year";
-import Quarter from "@/components/MainPage/Task/Quarter";
-import Month from "@/components/MainPage/Task/Month";
-import UserTree from "@/components/MainPage/Department/UserTree";
-
-export default {
-  name: 'Task',
-  components: {
-    Year,
-    Quarter,
-    Month,
-    UserTree
-  },
-  data () {
-    return {
-      person: '',
-      timeOption: [{
-        value: 'year',
-        label: '年度计划'
-      }, {
-        value: 'quarter',
-        label: '季度计划'
-      }, {
-        value: 'month',
-        label: '月计划'
-      }],
-      timeValue: 'year',
-      personChange: false,
-
-      currentPlan:{},
-      currentUser: {}
-	  }
-  },
-  created() {
-    this.getCurrent();
-  },
-  watch: {
-  },
-  methods: {
-    getCurrent(){
-      let currentYear = new Date().getFullYear();
-      getCurrent(currentYear).then((data) => {
-        if(data.result){
-          this.currentPlan = data.data;
-        }
-      })
-    },
-    chooseUser(val){
-      this.currentUser = val;
-    },
-    changeCheckUser(){
-      this.$store.dispatch('setCheckUser', this.currentUser);
-      this.personChange = false;
-    }
-  }
-}
-</script>

src/components/MainPage/Todo.vue

@@ -1,19 +1,8 @@
 <style lang="scss" scoped>
 .todo{
   position: relative;
-  .tool-bar{
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    padding: 0 15px;
-    border-bottom: solid 1px #DEE0E3;
-    text-align: right;
-    p{
-      font-size: 16px;
-    }
-  }
   ul{
-    height: calc(100% - 70px);
+    height: 100%;
     padding: 20px;
     overflow: auto;
     li{
@@ -34,11 +23,6 @@
 </style>
 <template>
 <div class="todo">
-  <div class="tool-bar">
-    <p>
-      <label>年度总目标：XXXXXXXX</label>
-    </p>
-  </div>
   <ul>
     <li v-for="(item,index) in list" :key="index" :style="{'border-top':index == 0?'none':'solid 1px #DEE0E3'}">
       <el-card class="card">

src/components/MainPage/Task/Year.vue → src/components/MainPage/Year.vue

@@ -151,14 +151,15 @@ export default {
   },
   computed: {
       ableEdit() {
-          return this.$store.state.loginUser.id == this.$store.state.checkUser.id;
+          // return this.$store.state.loginUser.id == this.$store.state.checkUser.id;
+          return true;
       },
   },
   watch: {
-    '$store.state.checkUser.id'(val){
-      this.params.userId = val;
-      this.getPlanList();
-    }
+    // '$store.state.checkUser.id'(val){
+    //   this.params.userId = val;
+    //   this.getPlanList();
+    // }
   },
   methods: {
     getPlanList(){

src/router/index.js

@@ -8,7 +8,9 @@ const NotFound = () => import(/* webpackChunkName: "group-app"*/'@/NotFound');
 
 const MainPage = () => import(/* webpackChunkName: "group-mainPage"*/'@/components/MainPage');
 const Todo = () => import(/* webpackChunkName: "group-mainPage"*/'@/components/MainPage/Todo');
-const Task = () => import(/* webpackChunkName: "group-mainPage"*/'@/components/MainPage/Task');
+const Year = () => import(/* webpackChunkName: "group-mainPage"*/'@/components/MainPage/Year');
+const Quarter = () => import(/* webpackChunkName: "group-mainPage"*/'@/components/MainPage/Quarter');
+const Month = () => import(/* webpackChunkName: "group-mainPage"*/'@/components/MainPage/Month');
 const Department = () => import(/* webpackChunkName: "group-mainPage"*/'@/components/MainPage/Department');
 
 const UserTest = () => import(/* webpackChunkName: "group-controlApp"*/'@/components/UserTest');
@@ -39,16 +41,24 @@ export default new Router({
             path: 'mainPage',
             name: 'MainPage',
             component: MainPage,
-            redirect: { name: 'Task' },
+            redirect: { name: 'Year' },
             children: [{
                 path: 'todo',
                 name: 'Todo',
                 component: Todo
-            }, {
-                path: 'task',
-                name: 'Task',
-                component: Task
-            }, {
+            },{
+                path: 'year',
+                name: 'Year',
+                component: Year
+            },{
+                path: 'quarter',
+                name: 'Quarter',
+                component: Quarter
+            },{
+                path: 'month',
+                name: 'Month',
+                component: Month
+            },{
                 path: 'department',
                 name: 'Department',
                 component: Department,