完成任务详情页，输入框绑定数据

DAPlatform/src/assets/scss/mixin.scss

+@mixin container {
+  padding: 40px 10% 100px 10%;
+  min-width: $min-width;
+  min-height: 600px;
+  overflow:hidden;
+  background-color: $bg-color;
+}
+@mixin whiteBoard {
+  background-color: white;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
\ No newline at end of file

DAPlatform/src/components/Login.vue

@@ -9,19 +9,19 @@
       </el-menu>
       <div class="input-item">
         用户名：
-        <el-input class="input" v-model="input" placeholder="请输入用户名"></el-input>
+        <el-input class="input" v-model="username" placeholder="请输入用户名"></el-input>
       </div>
       <div class="input-item">
         密码：
-        <el-input class="input" v-model="input" placeholder="请输入密码"></el-input>
+        <el-input class="input" v-model="password" placeholder="请输入密码"></el-input>
       </div>
       <div class="input-item" v-if="activeIndex == '2'">
         确认密码：
-        <el-input class="input" v-model="input" placeholder="请确认密码"></el-input>
+        <el-input class="input" v-model="confirm" placeholder="请确认密码"></el-input>
       </div>
       <div class="input-item" v-if="activeIndex == '2'">
         邮箱：
-        <el-input class="input" v-model="input" placeholder="请输入邮箱"></el-input>
+        <el-input class="input" v-model="email" placeholder="请输入邮箱"></el-input>
       </div>
 
       <el-button v-if="activeIndex == '1'" class="btn" type="primary" @click="login">登录</el-button>
@@ -32,9 +32,13 @@
 
 <script>
 export default {
-  name: 'Login',
+  name: 'login',
   data () {
     return {
+      username: '',
+      password: '',
+      confirm: '',
+      email: '',
       activeIndex: '1'
     }
   },
@@ -56,7 +60,7 @@ export default {
 <style scoped lang='scss'>
 .login-container {
   position: relative;
-  width: 100%;
+  min-width: 1400px;
   min-height: 100vh;
   background-color: #409EFF;
   overflow: hidden;
@@ -67,6 +71,7 @@ export default {
     top: 30vh;
     left: 5vw;
     text-shadow: 30px 30px 0px rgba(255, 255, 255, 0.4);
+    z-index: 1;
   }
   .login-panel {
     float: right;
@@ -78,7 +83,7 @@ export default {
     background-color: white;
     border-radius: 10px;
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
-    // transition: height 1s;
+    z-index: 100;
   }
 }
 .input-item{

DAPlatform/src/components/NavHeader.vue

@@ -4,11 +4,10 @@
       :default-active="activeIndex"
       class="el-menu-demo"
       mode="horizontal"
-      @select="handleSelect"
       background-color="#409EFF"
       text-color="#fff"
       active-text-color="#fff"
-      router="true">
+      router>
       <el-menu-item index="/taskhall">任务大厅</el-menu-item>
       <el-menu-item index="2">我的任务</el-menu-item>
       <el-menu-item index="/releasetask">发布任务</el-menu-item>
@@ -29,6 +28,14 @@ export default {
       activeIndex: '/taskhall'
     }
   },
+  watch: {
+    // 对路由变化作出响应...
+    '$route' (to, from) {
+      var index = to.fullPath.indexOf('/', 1)
+      var toPath = to.fullPath.substring(0, index === -1 ? to.fullPath.length : index + 1)
+      this.activeIndex = toPath
+    }
+  },
   methods: {
   }
 }

DAPlatform/src/components/Task.vue

+<template>
+    <div class="task-container">
+        <div class="task-panel">
+            <h2>{{task.title}}</h2>
+            <p>发布者：{{task.creater}}</p>
+            <p>发布时间：{{task.date}}</p>
+            <p v-if="task.type == 'text'">文本大小：{{task.size}}k</p>
+            <p v-else>图片张数：{{task.size}}张</p>
+            <el-divider></el-divider>
+            <h2>选择分片</h2>
+            <div class="pieces">
+                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" border>全选</el-checkbox>
+                <div style="margin: 15px 0;"></div>
+                <el-checkbox-group v-model="checkedPieces" @change="handleCheckedPiecesChange">
+                    <el-checkbox class="el-checkbox" v-for="piece in pieces" :label="piece" :key="piece" border>文件数：{{piecesMap[piece]}}</el-checkbox>
+                </el-checkbox-group>
+            </div>
+            <el-button type="primary" @click="begin">开始任务</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'task',
+  data () {
+    return {
+      task: {},
+      piecesMap: {},
+      pieces: [],
+      checkedPieces: [],
+      isIndeterminate: true,
+      checkAll: false
+    }
+  },
+  mounted () {
+    var self = this
+    var task = JSON.parse(decodeURIComponent(this.$route.params.task))
+    this.task = task
+    // 根据任务id拉取分片信息
+    this.axios.get('/getPieces', {
+      params: {
+        id: task.id
+      }
+    }).then(res => {
+      var piecesMap = {}
+      var pieces = []
+      for (let piece of res.data.data) {
+        piecesMap[piece.id] = piece.fileNum
+        pieces.push(piece.id)
+      }
+      self.piecesMap = piecesMap
+      self.pieces = pieces
+    })
+  },
+  methods: {
+    handleCheckAllChange (val) {
+      this.checkedPieces = val ? this.pieces : []
+      this.isIndeterminate = false
+    },
+    handleCheckedPiecesChange (value) {
+      let checkedCount = value.length
+      this.checkAll = checkedCount === this.pieces.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.pieces.length
+      console.log(value)
+    },
+    begin () {
+      if (this.checkedPieces.length === 0) {
+        alert('请选择分片')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/config.scss';
+@import '@/assets/scss/mixin.scss';
+.task-container{
+    @include container;
+    .task-panel{
+        @include whiteBoard;
+        text-align: left;
+        padding: 30px 20px 30px 20px;
+    }
+    .pieces{
+        margin-bottom: 30px;
+        .el-checkbox{
+            margin-left: 0;
+            margin-bottom: 15px;
+        }
+    }
+}
+</style>

DAPlatform/src/components/TaskHall.vue

@@ -4,7 +4,7 @@
       <div class="filter-container">
         <div class="filter-item">
           任务名称：
-          <el-input class="filter-input" prefix-icon="el-icon-search" v-model="input" placeholder="请输入查询条件"></el-input>
+          <el-input class="filter-input" prefix-icon="el-icon-search" v-model="keywords" placeholder="请输入查询条件"></el-input>
         </div>
         <div class="filter-item">
           <el-button class="filter-button" type="primary">查询</el-button>
@@ -19,7 +19,7 @@
               <span v-if="item.type == 'text'">文本大小：{{item.size}}k</span>
               <span v-else>图片张数：{{item.size}}张</span>
             </div>
-            <el-button class="task-enter-btn" type="primary" plain>进入任务</el-button>
+            <el-button class="task-enter-btn" type="primary" plain @click="enterTask(item)">进入任务</el-button>
           </div>
         </div>
         <div class="page-navigator">
@@ -58,7 +58,8 @@ export default {
   data () {
     return {
       activeName: '任务大厅',
-      tasks: []
+      tasks: [],
+      keywords: ''
     }
   },
   mounted () {
@@ -69,6 +70,12 @@ export default {
   methods: {
     handleClick (tab, event) {
       console.log(tab, event)
+    },
+    enterTask (task) {
+      this.$router.push({
+        name: 'task',
+        params: { task: encodeURIComponent(JSON.stringify(task)) }
+      })
     }
   }
 }
@@ -77,18 +84,14 @@ export default {
 <!-- Add 'scoped' attribute to limit CSS to this component only -->
 <style scoped lang='scss'>
 @import '@/assets/scss/config.scss';
+@import '@/assets/scss/mixin.scss';
 .taskhall-container{
-  padding: 40px 10% 100px 10%;
-  min-width: $min-width;
-  min-height: 600px;
-  overflow:hidden;
-  background-color: $bg-color;
+  @include container;
   .taskhall-left{
     float: left;
     width: 70%;
-    background-color: white;
     padding: 30px 20px 30px 20px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    @include whiteBoard;
     .filter-container{
       .filter-item{
         display: flex;

DAPlatform/src/mock/api.js

@@ -2,10 +2,20 @@ import Mock from 'mockjs'
 Mock.mock('/api/getTasks', {
   'status': 0,
   'data|10': [{
+    'id|1-9999': 1,
     'title|1': ['冰箱物品标注', '新通路图片', '人脸识别', '客服语音', '行人十字画框', '动物打点标注'],
     'creater|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'],
     'date': Mock.Random.date('yyyy/MM/dd'),
     'size|20-1000': 1,
-    'type|1': ['text', 'image']
+    'type|1': ['text', 'image'],
+    'pieces|5-30': 1
+  }]
+})
+
+Mock.mock(/\/api\/getPieces\?id=[0-9]+/, {
+  'status': 0,
+  'data|10-50': [{
+    'id|1-9999': 1,
+    'fileNum|50-100': 1
   }]
 })

DAPlatform/src/router/index.js

@@ -24,6 +24,11 @@ export default new Router({
           component: TaskHall
         },
         {
+          path: '/task/:task',
+          name: 'task',
+          component: () => import('../components/Task')
+        },
+        {
           path: '/userhome',
           name: 'userhome',
           component: userhome