4-12

src/api/department.js

@@ -0,0 +1,35 @@
+import axios from 'axios';
+import qs from 'qs'
+//获取某月计划
+export function getTree(flag){
+    return axios.get('/department/getTree',{
+        params: {withUser: flag}
+    }).then(result => result.data)
+}
+
+//新增
+export function addPlan(item) {
+    return axios({
+        method: 'post',
+        url: '/weekly/add',
+        data: qs.stringify(item)
+    }).then(res => res.data)
+}
+
+//修改
+export function updatePlan(item) {
+    return axios({
+        method: 'post',
+        url: '/weekly/update',
+        data: qs.stringify(item)
+    }).then(res => res.data)
+}
+
+//删除
+export function deletePlan(item) {
+    return axios({
+        method: 'post',
+        url: '/weekly/delete',
+        data: qs.stringify(item)
+    }).then(res => res.data)
+}

src/api/month.js

@@ -31,5 +31,5 @@ export function deletePlan(item) {
         method: 'post',
         url: '/weekly/delete',
         data: qs.stringify(item)
-    }).then(res => res)
+    }).then(res => res.data)
 }

src/components/MainPage.vue

@@ -13,14 +13,19 @@
     background: #3C76FC;
     border: solid 2px #f8f9fa;
     border-radius: 50%;
-    margin: 30px auto;
+    margin: 30px auto 10px;
     color:#f8f9fa;
     p{
       height: 100%;
       line-height: 36px;
     }
   }
+  &>p{
+    color: white;
+    font-size: 15px;
+  }
   ul{
+    margin-top: 20px;
     li{
       cursor: pointer;
       .route-menu{
@@ -45,6 +50,14 @@
 .right-content{
   width: calc(100% - 60px);
 }
+.seting-bt{
+  color: white;
+  font-size: 20px;
+  position: absolute;
+  left: 20px;
+  bottom: 20px;
+  cursor: pointer;
+}
 </style>
 <template>
 <div class="main-page">
@@ -52,6 +65,7 @@
     <div class="head"> 
       <p>头像</p>
     </div>
+    <p>{{$store.state.loginUser.name}}</p>
     <ul>
       <li v-for="item in list" :key="item.name">
         <router-link class="route-menu" :to="item.link">
@@ -59,12 +73,14 @@
         </router-link>
       </li>
     </ul>
+    <i class="el-icon-s-release seting-bt" @click="logout"></i>
   </div>
   <router-view class="right-content"></router-view>
 </div>
 </template>
 
 <script>
+import { logout } from "@/api/login";
 export default {
   name: 'MainPage',
   components: {
@@ -87,6 +103,19 @@ export default {
 	  }
   },
   methods: {
+    logout() {
+      logout()
+        .then(res => {
+          if (res && res.ok == "1") {
+            this.$router.replace({path: '/login'});
+          } else {
+            this.$Message.error((res && res.msg) || "登出失败！");
+          }
+        })
+        .catch(() => {
+          this.$Message.error("登出失败！");
+        });
+    },
   }
 }
 </script>

src/components/MainPage/Department.vue

@@ -1,7 +1,7 @@
 <style lang="scss" scoped>
 .depart{
   display: flex;
-  .search-tree{
+  .depart-tree{
     width: 300px;
     padding: 15px;
     border-right: solid 1px #DEE0E3;
@@ -14,19 +14,8 @@
 </style>
 <template>
 <div class="depart">
-  <div class="search-tree"> 
-    <el-input
-      placeholder="输入关键字查找"
-      v-model="filterText">
-    </el-input>
-    <el-tree
-      class="filter-tree"
-      :data="data"
-      :props="defaultProps"
-      default-expand-all
-      :filter-node-method="filterNode"
-      ref="tree">
-    </el-tree>
+  <div class="depart-tree">
+    <UserTree></UserTree>
   </div>
   <div class="depart-content">
     <el-collapse v-model="activeNames" @change="handleChange">
@@ -56,68 +45,28 @@
 </template>
 
 <script>
+import UserTree from "@/components/MainPage/Department/UserTree";
 export default {
   name: 'Department',
   components: {
+    UserTree
+  },
+
+  data() {
+    return {
+      activeNames: ['1','2','3','4'],
+    };
+  },
+
+  created() {
   },
 
   watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    }
   },
 
   methods: {
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
     handleChange(val) {
     }
   },
-
-  data() {
-    return {
-      activeNames: ['1','2','3','4'],
-      filterText: '',
-      data: [{
-        label: '爻象',
-        children: [{
-          label: '部门1',
-          children: [{
-            label: '人员1'
-          }, {
-            label: '人员2'
-          }, {
-            label: '人员3'
-          }, {
-            label: '人员4'
-          }, {
-            label: '人员5'
-          }]
-        },{
-          label: '部门2',
-          children: [{
-            label: '人员1'
-          }, {
-            label: '人员12'
-          }]
-        },{
-          label: '部门3',
-          children: [{
-            label: '人员1'
-          }, {
-            label: '人员2'
-          }, {
-            label: '人员3'
-          }]
-        }]
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      }
-    };
-  }
 }
 </script>

src/components/MainPage/Department/UserTree.vue

@@ -0,0 +1,76 @@
+<style lang="scss" scoped>
+</style>
+<template>
+<div class="search-tree"> 
+    <el-input
+        placeholder="输入关键字查找"
+        v-model="filterText">
+    </el-input>
+    <el-tree
+        class="filter-tree"
+        :data="departmentTree"
+        :props="defaultProps"
+        :filter-node-method="filterNode"
+        default-expand-all
+        ref="tree"
+        @node-click="getNode">
+    </el-tree>
+</div>
+</template>
+
+<script>
+import { getTree } from '@/api/department';
+export default {
+  name: 'UserTree',
+  components: {
+  },
+
+  data() {
+    return {
+      filterText: '',
+      departmentTree: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    };
+  },
+
+  created() {
+    this.getTree();
+  },
+
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+
+  methods: {
+    getTree(){
+      getTree(true).then((data) => {
+        this.departmentTree.push(data.data);
+        let tempList = [].concat(this.departmentTree);
+        while(tempList.length > 0){
+          let item = tempList.pop();
+          if(item.children.length == 0 && item.userList.length){
+            item.children = item.userList;
+          }
+          else{
+            tempList = tempList.concat(item.children);
+          }
+        }
+      })
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    getNode(val){
+        if(val.username){
+            this.$emit('chooseUser', val);
+        }
+    }
+  },
+}
+</script>

src/components/MainPage/Task.vue

@@ -27,13 +27,24 @@
 .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>当前成员：XXX</span>
-      <el-button type="primary" icon="el-icon-edit" circle @click="personChange = true;"></el-button>
+      <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">
@@ -54,23 +65,11 @@
       title="切换成员"
       :visible.sync="personChange"
       width="500px">
-      <div>
-        <el-input
-          placeholder="输入关键字查找"
-          v-model="filterText">
-        </el-input>
-        <el-tree
-          class="filter-tree"
-          :data="data"
-          :props="defaultProps"
-          default-expand-all
-          :filter-node-method="filterNode"
-          ref="tree">
-        </el-tree>
-      </div>
+      <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="personChange = false">确 定</el-button>
+        <el-button type="primary" @click="changeCheckUser">确 定</el-button>
       </span>
     </el-dialog>
 </div>
@@ -81,13 +80,15 @@ 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
+    Month,
+    UserTree
   },
   data () {
     return {
@@ -105,61 +106,16 @@ export default {
       timeValue: 'year',
       personChange: false,
 
-      filterText: '',
       currentPlan:{},
-
-      data: [{
-        label: '爻象',
-        children: [{
-          label: '部门1',
-          children: [{
-            label: '人员1'
-          }, {
-            label: '人员2'
-          }, {
-            label: '人员3'
-          }, {
-            label: '人员4'
-          }, {
-            label: '人员5'
-          }]
-        },{
-          label: '部门2',
-          children: [{
-            label: '人员1'
-          }, {
-            label: '人员12'
-          }]
-        },{
-          label: '部门3',
-          children: [{
-            label: '人员1'
-          }, {
-            label: '人员2'
-          }, {
-            label: '人员3'
-          }]
-        }]
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      }
+      currentUser: {}
 	  }
   },
   created() {
     this.getCurrent();
   },
   watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
-    }
   },
   methods: {
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
     getCurrent(){
       let currentYear = new Date().getFullYear();
       getCurrent(currentYear).then((data) => {
@@ -167,6 +123,13 @@ export default {
           this.currentPlan = data.data;
         }
       })
+    },
+    chooseUser(val){
+      this.currentUser = val;
+    },
+    changeCheckUser(){
+      this.$store.dispatch('setCheckUser', this.currentUser);
+      this.personChange = false;
     }
   }
 }

src/components/MainPage/Task/Month.vue

@@ -6,9 +6,15 @@
   div{
     text-align: center;
     margin: 5px;
-    /deep/ .el-input{
+    label,/deep/ .el-input,/deep/ .el-textarea{
       display: inline-block;
-      width: 370px;
+      vertical-align: middle;
+    }
+    /deep/ .el-input{
+      width: 200px;
+    }
+    /deep/ .el-textarea{
+      width: 600px;
     }
   }
   .add-bt{
@@ -16,6 +22,10 @@
     font-size: 18px;
     float: right;
   }
+  .del-bt{
+    cursor: pointer;
+    font-size: 15px;
+  }
 }
 </style>
 <template>
@@ -36,15 +46,20 @@
   </el-calendar>
    <el-dialog
       class="dialog-style"
-      title="修改计划"
+      title="编辑计划"
       :visible.sync="visibleChange"
-      width="500px">
+      width="1000px">
       <div v-for="(item, index) in dayPlan" :key="index">
           <label>计划：</label>
-          <el-input placeholder="" v-model="item.name"></el-input>
+          <el-input placeholder="" v-model="item.name" :disabled="!ableEdit"></el-input>
+          &nbsp;
+          <label>内容：</label>
+          <el-input type="textarea" autosize placeholder="" v-model="item.content" :disabled="!ableEdit"></el-input>
+          &nbsp;
+          <i class="el-icon-remove-outline del-bt" @click="deletePlan(item,index)" v-if="ableEdit"></i>
       </div>
-      <i class="el-icon-circle-plus-outline add-bt" @click="addDayPlan()"></i>
-      <span slot="footer" class="dialog-footer">
+      <i class="el-icon-circle-plus-outline add-bt" @click="addDayPlan()" v-if="ableEdit"></i>
+      <span slot="footer" class="dialog-footer" v-if="ableEdit">
         <el-button @click="visibleChange = false">取 消</el-button>
         <el-button type="primary" @click="editTask">确 定</el-button>
       </span>
@@ -62,7 +77,8 @@ export default {
     return {
       searchMonth: new Date(),
       params:{
-        startTime: ''
+        startTime: '',
+        userId: this.$store.state.checkUser.id
       },
       visibleChange: false,
       planList: {},
@@ -73,11 +89,22 @@ export default {
     this.getMonthPlan();
   },
   watch: {
-    searchMonth(val) {
-      this.params.startTime = val.getTime();
+    searchMonth(val,old) {
+      if(val.getMonth() != old.getMonth()){
+        this.params.startTime = val.getTime();
+        this.getMonthPlan();
+      }
+    },
+    '$store.state.checkUser.id'(val){
+      this.params.userId = val;
       this.getMonthPlan();
     }
   },
+  computed: {
+      ableEdit() {
+          return this.$store.state.loginUser.id == this.$store.state.checkUser.id;
+      },
+  },
   methods: {
     getMonthPlan(){
       getMonthPlan(this.params).then((data) => {
@@ -89,6 +116,31 @@ export default {
     },
     editTask(){
       this.visibleChange = false;
+      this.dayPlan.forEach(item => {
+        if(item.id){
+          let temp = {
+            "id": item.id,
+            "name": item.name,
+            "content": item.content,
+            "status": item.status,
+            "startTime": this.searchMonth.getTime(),
+          }
+          updatePlan(temp).then((data) => {
+            if(!data.result){
+              this.$message(data.message);
+            }
+            this.getMonthPlan();
+          })
+        }
+        else{
+          addPlan(item).then((data) => {
+            if(!data.result){
+              this.$message(data.message);
+            }
+            this.getMonthPlan();
+          })
+        }
+      })
     },
     chooseDay(data){
       if(new Date(data.day).getMonth() != this.searchMonth.getMonth()){
@@ -102,11 +154,29 @@ export default {
       this.dayPlan.push({
         "name": "",
         "content": "",
-        "year": "",
+        "year": this.searchMonth.getFullYear(),
         "userId": "",
-        "startTime": "",
+        "startTime": this.searchMonth.getTime(),
       })
     },
+    deletePlan(item,index){
+      if(item.id){
+        let temp = {
+          id:item.id
+        }
+        deletePlan(temp).then((data) => {
+          if(!data.result){
+            this.$message(data.message);
+          }
+          else{
+            this.dayPlan.splice(index,1);
+          }
+        })
+      }
+      else{
+        this.dayPlan.splice(index,1);
+      }
+    },
     getDayNum(day){
       return ~~day.split('-')[2];
     }

src/components/MainPage/Task/Quarter.vue

@@ -67,7 +67,7 @@ table{
       placeholder="选择年"
       @change="getPlanList">
     </el-date-picker>
-    <el-button type="primary" @click="visibleChange = true;">新增季度计划</el-button>
+    <el-button type="primary" @click="visibleChange = true;" v-if="ableEdit">新增季度计划</el-button>
   </div>
   <table>
     <thead>
@@ -78,7 +78,7 @@ table{
                 <th>年份</th>
                 <th>季度</th>
                 <th>简要说明</th>
-                <th style="width:150px">操作</th>
+                <th style="width:150px" v-if="ableEdit">操作</th>
             </tr>
         </thead>
         <tbody>
@@ -89,7 +89,7 @@ table{
               <td>{{item.year}}</td>
               <td>{{item.quarter}}</td>
               <td>{{item.content}}</td>
-              <td>
+              <td v-if="ableEdit">
                 <a @click="changeData(item)">修改</a>
                 &nbsp;&nbsp;
                 <a @click="visibleDelete = true;plan.id = item.id">删除</a>
@@ -155,6 +155,9 @@ export default {
   name: 'Quarter',
   data () {
       return {
+        params:{
+          userId: this.$store.state.checkUser.id
+        },
         planeList:[],
         plan:{},
         yearData:'',
@@ -169,6 +172,17 @@ export default {
   created() {
     this.getPlanList();
   },
+  computed: {
+      ableEdit() {
+          return this.$store.state.loginUser.id == this.$store.state.checkUser.id;
+      },
+  },
+  watch: {
+    '$store.state.checkUser.id'(val){
+      this.params.userId = val;
+      this.getPlanList();
+    }
+  },
   methods: {
     getPlanList(){
       let params = JSON.parse(JSON.stringify(this.params));

src/components/MainPage/Task/Year.vue

@@ -61,7 +61,7 @@ table{
 <template>
 <div class="year">
   <div class="tool-panel">
-    <el-button type="primary" @click="visibleChange = true;">新增年度计划</el-button>
+    <el-button type="primary" @click="visibleChange = true;" v-if="ableEdit">新增年度计划</el-button>
   </div>
   <table>
     <thead>
@@ -71,7 +71,7 @@ table{
             <!-- <th>参与成员</th> -->
             <th>年份</th>
             <th>简要说明</th>
-            <th style="width:150px">操作</th>
+            <th style="width:150px" v-if="ableEdit">操作</th>
         </tr>
     </thead>
     <tbody>
@@ -81,7 +81,7 @@ table{
           <!-- <td>{{item.member}}</td> -->
           <td>{{item.year}}</td>
           <td>{{item.content}}</td>
-          <td>
+          <td v-if="ableEdit">
             <a @click="changeData(item)">修改</a>
             &nbsp;&nbsp;
             <a @click="visibleDelete = true;plan.id = item.id">删除</a>
@@ -136,6 +136,9 @@ export default {
   name: 'Year',
   data () {
       return {
+        params:{
+          userId: this.$store.state.checkUser.id
+        },
         planeList:[],
         plan:{},
         yearData:'',
@@ -146,6 +149,17 @@ export default {
   created() {
     this.getPlanList();
   },
+  computed: {
+      ableEdit() {
+          return this.$store.state.loginUser.id == this.$store.state.checkUser.id;
+      },
+  },
+  watch: {
+    '$store.state.checkUser.id'(val){
+      this.params.userId = val;
+      this.getPlanList();
+    }
+  },
   methods: {
     getPlanList(){
       getPlanList().then((data) => {

src/router/index.js

@@ -27,7 +27,8 @@ export default new Router({
         component: App,
         beforeEnter: (to, from, next) => {
             getLoginUser().then(data => {
-                store.dispatch('setLoginUser', data);
+                store.dispatch('setLoginUser', data.data);
+                store.dispatch('setCheckUser', data.data);
                 next();
             }).catch(() => {
                 next({name: 'Login'});

src/store/actions.js

@@ -1,3 +1,6 @@
 export const setLoginUser = ({ commit }, user) => {
     commit('setLoginUser', user);
+}
+export const setCheckUser = ({ commit }, user) => {
+    commit('setCheckUser', user);
 }

src/store/index.js

@@ -12,6 +12,7 @@ Vue.use(Vuex);
 
 const globalState = {
     loginUser: {},
+    checkUser: {}
 };
 
 export default new Vuex.Store({

src/store/mutations.js

@@ -7,4 +7,7 @@ export default {
     setLoginUser (state, user) {
         state.loginUser =  user;
     },
+    setCheckUser (state, user) {
+        state.checkUser =  user;
+    },
 }