year

src/App.vue

@@ -14,14 +14,5 @@
 import Bus from '@/utils/bus'
 export default {
   name: 'App',
-  components: {
-  },
-  data () {
-    return {
-	  }
-  },
-  created() {
-    console.log('fsdf')
-  }
 }
 </script>

src/api/year.js

@@ -1,47 +1,33 @@
 import axios from 'axios';
+import qs from 'qs'
 //获取列表
-export function getLoginUser(){
-    return axios.get('/user/cur').then(result => result.data)
+export function getPlanList(){
+    return axios.get('/annual/list').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: '/annual/add',
+        data: qs.stringify(item)
     }).then(res => res.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: '/annual/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: '/annual/delete',
+        data: qs.stringify(item)
+    }).then(res => res)
 }

src/components/MainPage/Task.vue

@@ -53,7 +53,7 @@
       </el-option>
     </el-select>
     <div class="operation" v-if="timeValue == 'year'">
-      <el-button type="primary">新增年度计划</el-button>
+      <el-button type="primary" @click="openYearAdd = true">新增年度计划</el-button>
     </div>
     <div class="operation" v-if="timeValue == 'quarter'">
       <el-date-picker
@@ -78,7 +78,7 @@
       </p>
     </div>
     <div class="content-panel">
-      <Year v-if="timeValue == 'year'"></Year>
+      <Year v-if="timeValue == 'year'" :openYearAdd="openYearAdd" @closeModal="openYearAdd = false;"></Year>
       <Quarter v-if="timeValue == 'quarter'"></Quarter>
       <Month v-if="timeValue == 'month'"></Month>
     </div>
@@ -139,6 +139,8 @@ export default {
       monthRange: '',
       personChange: false,
 
+      openYearAdd: false,
+
       filterText: '',
       data: [{
         label: '爻象',

src/components/MainPage/Task/Year.vue

@@ -30,9 +30,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;
     }
   }
 }
@@ -48,7 +53,7 @@ table{
                 <th>计划名</th>
                 <th>部门</th>
                 <th>参与成员</th>
-                <th>截止年份</th>
+                <th>年份</th>
                 <th>简要说明</th>
                 <th>操作</th>
             </tr>
@@ -58,71 +63,117 @@ table{
               <td>{{item.name}}</td>
               <td>{{item.depart}}</td>
               <td>{{item.member}}</td>
-              <td>{{item.end}}</td>
-              <td>{{item.brief}}</td>
+              <td>{{item.year}}</td>
+              <td>{{item.content}}</td>
               <td>
-                <a>修改</a>
+                <a @click="visibleChange = true;plan = JSON.parse(JSON.stringify( 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-input v-model="plan.year" placeholder="请输入年份" required="required"></el-input>
+        </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 { login } from '@/api/login';
+import { getPlanList,addPlan,updatePlan,deletePlan } from '@/api/year';
 export default {
   name: 'Year',
   components: {
   },
+  props: {
+    openYearAdd: {
+        type: Boolean, default: false,
+    },
+  },
   data () {
       return {
-        planeList:[{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '2021',
-          brief: '网页线上测试',
-        },{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '2021',
-          brief: '网页线上测试',
-        },{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '2021',
-          brief: '网页线上测试',
-        },{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '2021',
-          brief: '网页线上测试',
-        },{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '2021',
-          brief: '网页线上测试',
-        },{
-          name: '线上测试功能',
-          depart: '开发',
-          member: 'HZH',
-          end: '2021',
-          brief: '网页线上测试',
-        }],
+        planeList:[],
+        plan:{},
+        visibleChange: false,
+        visibleDelete: false
       }
   },
   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) => {
+        this.planeList = data.data;
+      })
+    },
+    deletePlan(){
+      deletePlan(this.plan).then((result) => {
+        alert(result?'删除成功':'删除失败');
+        this.visibleDelete = false;
+        this.plan = {};
+        this.getPlanList();
+      })
+    },
+    change(){
+      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>