计划对接

src/api/month.js

@@ -1,48 +0,0 @@
-import axios from 'axios';
-
-//登录
-export function login({username, password,loginFrom}) {
-    return axios({
-        method: 'post',
-        url: '/login',
-        data: {
-            username,
-            password,
-            loginFrom
-        },
-        transformRequest: [function(data) {
-            let ret = ''
-            for (let it in data) {
-                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
-            }
-            return ret;
-        }],
-        headers: {
-            // 'Content-Type': 'application/x-www-form-urlencoded'
-        }
-    }).then(res => res.data)
-}
-
-//获取当前身份
-export function getLoginUser(){
-    return axios.get('/user/cur').then(result => result.data)
-}
-
-//验证身份唯一
-export function checkOnly(name){
-    return axios.get('/open/user/checkUsername?username=' + name).then(result => result.data)
-}
-
-//注册
-export function register(reg) {
-    return axios({
-        method: 'post',
-        url: '/open/user/register',
-        data: reg
-    }).then(res => res.data)
-}
-
-//登出
-export function logout() {
-    return axios.get('/logout').then(res => res.data);
-}

src/api/quarter.js

@@ -1,48 +1,35 @@
 import axios from 'axios';
+import qs from 'qs'
+//获取列表
+export function getPlanList(params){
+    return axios.get('/quarterly/list',{
+        params: params
+    }).then(result => result.data)
+}
 
-//登录
-export function login({username, password,loginFrom}) {
+//新增
+export function addPlan(item) {
     return axios({
         method: 'post',
-        url: '/login',
-        data: {
-            username,
-            password,
-            loginFrom
-        },
-        transformRequest: [function(data) {
-            let ret = ''
-            for (let it in data) {
-                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
-            }
-            return ret;
-        }],
-        headers: {
-            // 'Content-Type': 'application/x-www-form-urlencoded'
-        }
+        url: '/quarterly/add',
+        data: qs.stringify(item)
     }).then(res => res.data)
 }
 
-//获取当前身份
-export function getLoginUser(){
-    return axios.get('/user/cur').then(result => result.data)
-}
-
-//验证身份唯一
-export function checkOnly(name){
-    return axios.get('/open/user/checkUsername?username=' + name).then(result => result.data)
-}
-
-//注册
-export function register(reg) {
+//修改
+export function updatePlan(item) {
     return axios({
         method: 'post',
-        url: '/open/user/register',
-        data: reg
+        url: '/quarterly/update',
+        data: qs.stringify(item)
     }).then(res => res.data)
 }
 
-//登出
-export function logout() {
-    return axios.get('/logout').then(res => res.data);
+//删除
+export function deletePlan(item) {
+    return axios({
+        method: 'post',
+        url: '/quarterly/delete',
+        data: qs.stringify(item)
+    }).then(res => res)
 }

src/api/year.js

@@ -5,6 +5,13 @@ export function getPlanList(){
     return axios.get('/annual/list').then(result => result.data)
 }
 
+//获取列表
+export function getCurrent(year){
+    return axios.get('/annual/current',{
+        params: {year: year}
+    }).then(result => result.data)
+}
+
 //新增
 export function addPlan(item) {
     return axios({

src/components/MainPage/Task.vue

@@ -1,44 +1,28 @@
 <style lang="scss" scoped>
 .task{
-  display: flex;
   position: relative;
-  .tool-panel{
-    width: 250px;
-    padding: 15px;
-    background-color: #F8F9FB;
-  }
-  .task-panel{
-    width: calc(100% - 250px);
-  }
   .tool-bar{
     height: 60px;
     line-height: 60px;
     padding: 0 15px;
     border-bottom: solid 1px #DEE0E3;
-    text-align: right;
-    p{
+    display: flex;
+    &>div{
+      flex: auto;
+      span:first-child{
+        margin-right: 20px;
+      }
+      span:nth-child(3){
+        margin-left: 50px;
+      }
+    }
+    &>p{
       font-size: 16px;
     }
   }
-  .content-panel{
+  .task-panel{
     height: calc(100% - 60px);
   }
-  .operation{
-    margin-top: 10px;
-    padding: 15px;
-    text-align: center;
-    *{
-      width: 100%;
-      margin: 5px 0;
-    }
-  }
-  .current-p{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 25px 15px;
-  }
 }
 .el-select1{
   width: 110px;
@@ -46,42 +30,24 @@
 </style>
 <template>
 <div class="task">
-  <div class="tool-panel">
-    <span>&nbsp;&nbsp;&nbsp;&nbsp;计划类型： </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 class="operation" v-if="timeValue == 'year'">
-      <el-button type="primary" @click="openYearAdd = true">新增年度计划</el-button>
-    </div>
-    <div class="operation" v-if="timeValue == 'quarter'">
-      <el-date-picker
-        v-model="monthRange"
-        type="monthrange"
-        range-separator=""
-        start-placeholder="开始月"
-        end-placeholder="结束月">
-      </el-date-picker>
-      <el-button type="primary">新增季度计划</el-button>
-    </div>
-    <div class="current-p">
+  <div class="tool-bar">
+    <div>
       <span>当前成员：XXX</span>
-      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <el-button type="primary" icon="el-icon-edit" circle @click="personChange = true;"></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">
-    <div class="tool-bar">
-      <p>
-        <label>年度总目标：XXXXXXXX</label>
-      </p>
-    </div>
-    <div class="content-panel">
-      <Year v-if="timeValue == 'year'" :openYearAdd="openYearAdd" @closeModal="openYearAdd = false;"></Year>
-      <Quarter v-if="timeValue == 'quarter'"></Quarter>
-      <Month v-if="timeValue == 'month'"></Month>
-    </div>
+    <Year v-if="timeValue == 'year'"></Year>
+    <Quarter v-if="timeValue == 'quarter'"></Quarter>
+    <Month v-if="timeValue == 'month'"></Month>
   </div>
   <el-dialog
       class="dialog-style"
@@ -111,6 +77,7 @@
 </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";
@@ -136,12 +103,11 @@ export default {
         label: '月计划'
       }],
       timeValue: 'year',
-      monthRange: '',
       personChange: false,
 
-      openYearAdd: false,
-
       filterText: '',
+      currentPlan:{},
+
       data: [{
         label: '爻象',
         children: [{
@@ -181,6 +147,9 @@ export default {
       }
 	  }
   },
+  created() {
+    this.getCurrent();
+  },
   watch: {
     filterText(val) {
       this.$refs.tree.filter(val);
@@ -190,6 +159,14 @@ export default {
     filterNode(value, data) {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
+    },
+    getCurrent(){
+      let currentYear = new Date().getFullYear();
+      getCurrent(currentYear).then((data) => {
+        if(data.result){
+          this.currentPlan = data.data;
+        }
+      })
     }
   }
 }

src/components/MainPage/Task/Month.vue

@@ -15,13 +15,15 @@
 </style>
 <template>
 <div>
-  <el-calendar v-model="value">
+  <el-calendar v-model="searchMonth">
     <template
       slot="dateCell"
       slot-scope="{date, data}">
-      <div class="day-cell" @click="visibleChange = true;">
+      <div class="day-cell" @click="chooseDay(data)">
         <p>{{data.day.split('-')[2]}}</p>
-        <p>出差</p>
+        <p v-if="new Date(data.day).getMonth() + 1 == searchMonth.getMonth() + 1">
+          {{planList[data.day.split('-')[2] - 1]?planList[data.day.split('-')[2] - 1].name:''}}
+        </p>
       </div>
     </template>
   </el-calendar>
@@ -32,11 +34,11 @@
       width="500px">
       <div>
           <label>计划：</label>
-          <el-input placeholder=""></el-input>
+          <el-input placeholder="" v-model="dayPlan.name"></el-input>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="visibleChange = false">取 消</el-button>
-        <el-button type="primary" @click="visibleChange = false">确 定</el-button>
+        <el-button type="primary" @click="editTask">确 定</el-button>
       </span>
     </el-dialog>
 </div>
@@ -49,13 +51,33 @@ export default {
   },
   data () {
     return {
-      value: new Date(),
+      searchMonth: new Date(),
       visibleChange: false,
+      planList: [{
+        name: 'sss'
+      },{
+        name: 'sss2e22'
+      }],
+      dayPlan: {}
 	  }
   },
+  watch: {
+    searchMonth(val) {
+    }
+  },
   methods: {
     editTask(){
-
+      this.visibleChange = false;
+    },
+    chooseDay(data){
+      this.visibleChange = true;
+      let day = data.day.split('-')[2];
+      if(this.planList[day - 1]){
+        this.dayPlan = this.planList[day - 1];
+      }
+      else{
+        this.dayPlan = {};
+      }
     }
   }
 }

src/components/MainPage/Task/Quarter.vue

@@ -1,4 +1,17 @@
 <style lang="scss" scoped>
+.quarter{
+  display: flex;
+  height: 100%;
+}
+.tool-panel{
+  width: 250px;
+  padding: 15px;
+  background-color: #F8F9FB;
+  *{
+    width: 100%;
+    margin: 5px 0;
+  }
+}
 table{
   width: 100%;
   thead{
@@ -30,9 +43,14 @@ table{
   div{
     text-align: center;
     margin: 5px;
+    label{
+      display: inline-block;
+      width: 100px;
+      text-align: right;
+    }
     /deep/ .el-input{
       display: inline-block;
-      width: 200px;
+      width: 300px;
     }
   }
 }
@@ -41,87 +59,156 @@ table{
 }
 </style>
 <template>
-<div>
+<div class="quarter">
+  <div class="tool-panel">
+    <el-date-picker
+      v-model="params.year"
+      type="year"
+      placeholder="选择年"
+      @change="getPlanList">
+    </el-date-picker>
+    <el-button type="primary" @click="visibleChange = true;">新增季度计划</el-button>
+  </div>
   <table>
     <thead>
             <tr>
                 <th>计划名</th>
                 <th>部门</th>
-                <th>参与成员</th>
-                <th>截止月份</th>
+                <!-- <th>参与成员</th> -->
+                <th>年份</th>
+                <th>季度</th>
                 <th>简要说明</th>
-                <th>操作</th>
+                <th style="width:150px">操作</th>
             </tr>
         </thead>
         <tbody>
             <tr v-for="(item,index) in planeList" :key="index">
               <td>{{item.name}}</td>
               <td>{{item.depart}}</td>
-              <td>{{item.member}}</td>
-              <td>{{item.end}}</td>
-              <td>{{item.brief}}</td>
+              <!-- <td>{{item.member}}</td> -->
+              <td>{{item.year}}</td>
+              <td>{{item.quarter}}</td>
+              <td>{{item.content}}</td>
               <td>
-                <a>修改</a>
+                <a @click="changeData(item)">修改</a>
                 &nbsp;&nbsp;
-                <a>删除</a>
+                <a @click="visibleDelete = true;plan.id = item.id">删除</a>
                 &nbsp;&nbsp;
                 <a>完成</a>
               </td>
             </tr>
         </tbody>
   </table>
+  <el-dialog
+        class="dialog-style"
+        title="编辑"
+        :visible.sync="visibleChange"
+        width="500px">
+        <div>
+          <label>名称：</label>
+          <el-input name="name" v-model="plan.name" placeholder="请输入名称" required="required"></el-input>
+        </div>
+        <div>
+          <label>年份：</label>
+          <el-date-picker
+            v-model="yearData"
+            type="year"
+            placeholder="选择年">
+          </el-date-picker>
+        </div>
+        <div>
+          <label>季度：</label>
+          <el-select v-model="plan.quarter" placeholder="请选择">
+            <el-option
+              v-for="item in quarterOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div>
+          <label>内容：</label>
+          <el-input v-model="plan.content" placeholder="请输入内容" required="required"></el-input>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="change">确 定</el-button>
+            <el-button type="primary" @click="visibleChange = false;plan={}">取消</el-button>
+        </span>
+    </el-dialog>
+    <el-dialog
+      title="提示"
+      :visible.sync="visibleDelete"
+      width="200px">
+      <p class="center-text">确认删除?</p>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="visibleDelete = false;plan={}">取 消</el-button>
+        <el-button type="primary" @click="deletePlan">确 定</el-button>
+      </span>
+    </el-dialog>
 </div>
 </template>
 
 <script>
+import { getPlanList,addPlan,updatePlan,deletePlan } from '@/api/quarter';
 export default {
   name: 'Quarter',
-  components: {
-  },
   data () {
       return {
-        planeList:[{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '1',
-          brief: '网页线上测试',
-        },{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '2',
-          brief: '网页线上测试',
-        },{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '2',
-          brief: '网页线上测试',
-        },{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '3',
-          brief: '网页线上测试',
-        },{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '3',
-          brief: '网页线上测试',
-        },{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '3',
-          brief: '网页线上测试',
-        }],
+        planeList:[],
+        plan:{},
+        yearData:'',
+        quarterOptions: [{value:'1',label:'1'},{value:'2',label:'2'},{value:'3',label:'3'},{value:'4',label:'4'}],
+        params:{
+          year: ''
+        },
+        visibleChange: false,
+        visibleDelete: false
       }
   },
   created() {
+    this.getPlanList();
   },
   methods: {
+    getPlanList(){
+      let params = JSON.parse(JSON.stringify(this.params));
+      params.year = this.params.year?this.params.year.getFullYear():'';
+      getPlanList(params).then((data) => {
+        this.planeList = data.data;
+      })
+    },
+    deletePlan(){
+      deletePlan(this.plan).then((result) => {
+        alert(result?'删除成功':'删除失败');
+        this.visibleDelete = false;
+        this.plan = {};
+        this.getPlanList();
+      })
+    },
+    changeData(item){
+      this.visibleChange = true;
+      this.plan = JSON.parse(JSON.stringify( item ));
+      this.yearData = new Date(item.year,1,1);
+    },
+    change(){
+      this.plan.year = this.yearData.getFullYear();
+      if(this.plan.id){
+        updatePlan(this.plan).then((result) => {
+          alert(result.result?'更新成功':'更新失败');
+          this.visibleChange = false;
+          this.plan = {};
+          this.getPlanList();
+        })
+      }
+      else{
+        addPlan(this.plan).then((result) => {
+          alert(result.result?'添加成功':'添加失败');
+          this.visibleChange = false;
+          this.plan = {};
+          this.getPlanList();
+        })
+      }
+    },
   }
 }
 </script>

src/components/MainPage/Task/Year.vue

@@ -1,6 +1,19 @@
 <style lang="scss" scoped>
+.year{
+  display: flex;
+  height: 100%;
+}
+.tool-panel{
+  width: 250px;
+  padding: 15px;
+  background-color: #F8F9FB;
+  *{
+    width: 100%;
+    margin: 5px 0;
+  }
+}
 table{
-  width: 100%;
+  flex: auto;
   thead{
     color: #909399;
     font-weight: 500;
@@ -46,34 +59,37 @@ table{
 }
 </style>
 <template>
-<div>
+<div class="year">
+  <div class="tool-panel">
+    <el-button type="primary" @click="visibleChange = true;">新增年度计划</el-button>
+  </div>
   <table>
     <thead>
-            <tr>
-                <th>计划名</th>
-                <th>部门</th>
-                <th>参与成员</th>
-                <th>年份</th>
-                <th>简要说明</th>
-                <th>操作</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="(item,index) in planeList" :key="index">
-              <td>{{item.name}}</td>
-              <td>{{item.depart}}</td>
-              <td>{{item.member}}</td>
-              <td>{{item.year}}</td>
-              <td>{{item.content}}</td>
-              <td>
-                <a @click="visibleChange = true;plan = JSON.parse(JSON.stringify( item ))">修改</a>
-                &nbsp;&nbsp;
-                <a @click="visibleDelete = true;plan.id = item.id">删除</a>
-                &nbsp;&nbsp;
-                <a>完成</a>
-              </td>
-            </tr>
-        </tbody>
+        <tr>
+            <th>计划名</th>
+            <th>部门</th>
+            <!-- <th>参与成员</th> -->
+            <th>年份</th>
+            <th>简要说明</th>
+            <th style="width:150px">操作</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr v-for="(item,index) in planeList" :key="index">
+          <td>{{item.name}}</td>
+          <td>{{item.depart}}</td>
+          <!-- <td>{{item.member}}</td> -->
+          <td>{{item.year}}</td>
+          <td>{{item.content}}</td>
+          <td>
+            <a @click="changeData(item)">修改</a>
+            &nbsp;&nbsp;
+            <a @click="visibleDelete = true;plan.id = item.id">删除</a>
+            &nbsp;&nbsp;
+            <a>完成</a>
+          </td>
+        </tr>
+    </tbody>
   </table>
   <el-dialog
         class="dialog-style"
@@ -86,7 +102,11 @@ table{
         </div>
         <div>
           <label>年份：</label>
-          <el-input v-model="plan.year" placeholder="请输入年份" required="required"></el-input>
+          <el-date-picker
+            v-model="yearData"
+            type="year"
+            placeholder="选择年">
+          </el-date-picker>
         </div>
         <div>
           <label>内容：</label>
@@ -114,17 +134,11 @@ table{
 import { getPlanList,addPlan,updatePlan,deletePlan } from '@/api/year';
 export default {
   name: 'Year',
-  components: {
-  },
-  props: {
-    openYearAdd: {
-        type: Boolean, default: false,
-    },
-  },
   data () {
       return {
         planeList:[],
         plan:{},
+        yearData:'',
         visibleChange: false,
         visibleDelete: false
       }
@@ -132,16 +146,6 @@ export default {
   created() {
     this.getPlanList();
   },
-  watch: {
-      openYearAdd: function(val) {
-        this.visibleChange = val?true:false;
-      },
-      visibleChange: function(val) {
-        if(!val){
-          this.$emit('closeModal');
-        }
-      }
-  },
   methods: {
     getPlanList(){
       getPlanList().then((data) => {
@@ -156,7 +160,13 @@ export default {
         this.getPlanList();
       })
     },
+    changeData(item){
+      this.visibleChange = true;
+      this.plan = JSON.parse(JSON.stringify( item ));
+      this.yearData = new Date(item.year,1,1);
+    },
     change(){
+      this.plan.year = this.yearData.getFullYear();
       if(this.plan.id){
         updatePlan(this.plan).then((result) => {
           alert(result.result?'更新成功':'更新失败');