我的发布页面以标签页的形式区分不同状态的任务

DAPlatform-front/src/components/Navigator.vue

@@ -32,24 +32,8 @@ export default {
       this.getTasks()
     }
   },
-  beforeMount () {
-    console.log('2')
-  },
   mounted () {
-    var self = this
-    this.axios.get('/task/getTasks', {
-      params: {
-        pageSize: self.pageSize,
-        currentPage: self.currentPage,
-        ...self.condition
-      }
-    }).then(res => {
-      console.log(res)
-      self.tasks = res.data.tasks
-      self.pageNum = res.data.pageNum
-      self.pageChange()
-    })
-    console.log('1')
+    this.getTasks()
   },
   methods: {
     // 任务列表更新
@@ -66,7 +50,6 @@ export default {
           ...self.condition
         }
       }).then(res => {
-        console.log(res)
         self.tasks = res.data.tasks
         self.pageNum = res.data.pageNum
         self.pageChange()

DAPlatform-front/src/components/PublishTask.vue

 <template>
   <div class="taskhall-container">
     <div class="taskhall-left">
-      <div class="tasklist-container">
+      <el-tabs v-model="activeName" type="card">
+        <el-tab-pane label="被选中" name="selected"></el-tab-pane>
+        <el-tab-pane label="已发布" name="published"></el-tab-pane>
+        <el-tab-pane label="待审核" name="checking"></el-tab-pane>
+        <el-tab-pane label="已结束" name="terminated"></el-tab-pane>
+      </el-tabs>
+
+      <div class="tasklist-container" v-show="activeName === 'selected'">
         <div class="tasklist">
-          <div class="task-item" v-for="(item, index) in tasks" :key='index'>
+          <div class="task-item" v-for="(item, index) in selectedTasks" :key='index'>
             <div>{{item.name}}</div>
-            <div>发布者：{{item.creator}}&emsp;&emsp;发布时间：{{item.date|formatDate}}&emsp;&emsp;任务状态：{{item.state}}
-            </div>
-            <div v-if="item.state === '已发布' ">
-              <el-button class="task-enter-btn3" @click="revise(item.id)" type="primary" plain>修改</el-button>
-              <el-button class="task-enter-btn2" @click="deleteRow(index, item.id)" type="primary" plain>删除</el-button>
-            </div>
-            <div v-else-if="item.state === '被选中'">
-              <el-button class="task-enter-btn2" @click="terminate(index, item.id)" type="primary" plain>终止任务</el-button>
+            <div>发布者：{{item.creator}}&emsp;&emsp;发布时间：{{item.date|formatDate}}&emsp;&emsp;任务状态：{{item.state}}</div>
+            <el-button class="task-enter-btn2" @click="terminate(index, item.id)" type="primary" plain>终止任务</el-button>
+            <el-button class="task-enter-btn1" @click="detail(item)" type="primary" plain>详情</el-button>
+          </div>
+        </div>
+        <navigator v-model="selectedTasks" :condition="selectedCondition"></navigator>
+      </div>
+
+      <div class="tasklist-container" v-show="activeName === 'published'">
+        <div class="tasklist">
+          <div class="task-item" v-for="(item, index) in publishedTasks" :key='index'>
+            <div>{{item.name}}</div>
+            <div>发布者：{{item.creator}}&emsp;&emsp;发布时间：{{item.date|formatDate}}&emsp;&emsp;任务状态：{{item.state}}</div>
+            <el-button class="task-enter-btn3" @click="revise(item.id)" type="primary" plain>修改</el-button>
+            <el-button class="task-enter-btn2" @click="deleteRow(index, item.id)" type="primary" plain>删除</el-button>
+            <el-button class="task-enter-btn1" @click="detail(item)" type="primary" plain>详情</el-button>
+          </div>
+          <navigator v-model="publishedTasks" :condition="publishedCondition"></navigator>
+        </div>
+      </div>
+
+      <div class="tasklist-container" v-show="activeName === 'checking'">
+        <div class="tasklist">
+            <div class="task-item" v-for="(item, index) in inCheckTasks" :key='index'>
+              <div>{{item.name}}</div>
+              <div>发布者：{{item.creator}}&emsp;&emsp;发布时间：{{item.date|formatDate}}&emsp;&emsp;任务状态：{{item.state}}</div>
+              <el-button class="task-enter-btn1" @click="detail(item)" type="primary" plain>详情</el-button>
             </div>
-            <div v-else-if="item.state === '已结束'">
+          <navigator v-model="inCheckTasks" :condition="inCheckCondition"></navigator>
+        </div>
+      </div>
+
+      <div class="tasklist-container" v-show="activeName === 'terminated'">
+        <div class="tasklist">
+            <div class="task-item" v-for="(item, index) in terminatedTasks" :key='index'>
+              <div>{{item.name}}</div>
+              <div>发布者：{{item.creator}}&emsp;&emsp;发布时间：{{item.date|formatDate}}&emsp;&emsp;任务状态：{{item.state}}</div>
               <el-button class="task-enter-btn2" @click="exportAll(item)" type="primary" plain>导出整个任务</el-button>
-            </div>
-            <div>
               <el-button class="task-enter-btn1" @click="detail(item)" type="primary" plain>详情</el-button>
             </div>
-          </div>
+          <navigator v-model="terminatedTasks" :condition="terminatedCondition"></navigator>
         </div>
-        <navigator v-model="tasks" :condition="condition"></navigator>
       </div>
     </div>
-    </div>
+  </div>
 </template>
 
 <script>
@@ -38,16 +69,42 @@ export default {
   },
   data () {
     return {
-      activeName: '我的发布',
-      tasks: [],
+      activeName: 'published',
+      selectedTasks: [],
+      publishedTasks: [],
+      inCheckTasks: [],
+      terminatedTasks: [],
       condition: {
-        creator: this.$store.state.userInfo.userId,
-        state: ''
+        creator: this.$store.state.userInfo.userId
       }
     }
   },
   computed: {
-    userId () { return this.$store.state.userInfo.userId }
+    userId () { return this.$store.state.userInfo.userId },
+    selectedCondition () {
+      return {
+        creator: this.$store.state.userInfo.userId,
+        state: 'selected'
+      }
+    },
+    publishedCondition () {
+      return {
+        creator: this.$store.state.userInfo.userId,
+        state: 'published'
+      }
+    },
+    inCheckCondition () {
+      return {
+        creator: this.$store.state.userInfo.userId,
+        state: 'checking'
+      }
+    },
+    terminatedCondition () {
+      return {
+        creator: this.$store.state.userInfo.userId,
+        state: 'terminated'
+      }
+    }
   },
   methods: {
     deleteRow (index, taskId) {
@@ -128,7 +185,4 @@ export default {
 .taskhall-container .taskhall-left .tasklist-container .tasklist .task-item .task-enter-btn2{
   right: 100px;
 }
-// .taskhall-container .taskhall-left .tasklist-container .tasklist .task-item .task-enter-btn3{
-//   right: 200px;
-// }
 </style>

DAPlatform-front/src/components/ongoingtask.vue

@@ -7,7 +7,7 @@
             <div>{{item.name}}</div>
             <div>发布者：{{item.creator}}&emsp;&emsp;发布时间：{{item.date|formatDate}}
             </div>
-            <el-button v-if="item.state == '5'" class="task-enter-btn1" @click="del(item.id)" type="info" plain>删除任务</el-button>
+            <el-button v-if="item.state == '5'" class="task-enter-btn1" @click="deleteRow(item.id)" type="info" plain>删除任务</el-button>
             <el-button v-else class="task-enter-btn1" @click="detail(item)" type="primary" plain>查看任务详情</el-button>
           </div>
         </div>
@@ -40,28 +40,27 @@ export default {
         params: { task: encodeURIComponent(JSON.stringify(task)) }
       })
     },
-    del(id){
-        this.axios({
-            method:"post",
-            url:"task/giveUpTask",
-            params:{
-                userId:this.$store.state.userInfo.userId,
-                taskId:id
-            }
-        }).then(res=>{
-            if(res.code == 1){
-                this.$message({
-                    type:'info',
-                    message:"任务删除成功"
-                })
-            }
-            else{
-                this.$message({
-                    type:'info',
-                    message:"任务删除成功"
-                })
-            }
-        })
+    delelteRow (id) {
+      this.axios({
+        method: 'post',
+        url: 'task/giveUpTask',
+        params: {
+          userId: this.$store.state.userInfo.userId,
+          taskId: id
+        }
+      }).then(res => {
+        if (res.code === 1) {
+          this.$message({
+            type: 'info',
+            message: '任务删除成功'
+          })
+        } else {
+          this.$message({
+            type: 'info',
+            message: '任务删除失败'
+          })
+        }
+      })
     }
   }
 }

DAPlatform-front/src/main.js

@@ -11,7 +11,7 @@ import VueAxios from 'vue-axios'
 import * as math from 'mathjs'
 // cnpm i default-passive-events -S
 import 'default-passive-events'
-console.log('hello', window.vm)
+
 Vue.prototype.$math = math
 
 Vue.prototype.baseURL = axios.defaults.baseURL // 图片标注接口使用