修改任务详情页分片展现方式

DAPlatform/src/components/Task.vue

@@ -9,10 +9,12 @@
             <el-divider></el-divider>
             <h2>选择分片</h2>
             <div class="pieces">
-                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" border>全选</el-checkbox>
+                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</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 class="checkbox" v-for="pieceId in pieces" :label="pieceId" :key="pieceId">
+                      <span>分片编号：{{pieceId}}</span><span>文件数：{{piecesMap[pieceId].fileNum}}</span><span>模板：{{piecesMap[pieceId].templateName}}</span>
+                    </el-checkbox>
                 </el-checkbox-group>
             </div>
             <el-button type="primary" @click="begin">开始任务</el-button>
@@ -46,7 +48,10 @@ export default {
       var piecesMap = {}
       var pieces = []
       for (let piece of res.data.data) {
-        piecesMap[piece.id] = piece.fileNum
+        piecesMap[piece.id] = {
+          fileNum: piece.fileNum,
+          templateName: piece.templateName
+        }
         pieces.push(piece.id)
       }
       self.piecesMap = piecesMap
@@ -62,7 +67,6 @@ export default {
       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) {
@@ -86,8 +90,18 @@ export default {
     .pieces{
         margin-bottom: 30px;
         .el-checkbox{
-            margin-left: 0;
-            margin-bottom: 15px;
+          display: block;
+          margin: 0px;
+          padding: 9px 0 9px 10px;
+        }
+        .checkbox{
+          span{
+            display: inline-block;
+            min-width: 15em;
+          }
+          &:nth-child(odd){
+            background-color: ghostwhite;
+          }
         }
     }
 }

DAPlatform/src/mock/api.js

@@ -7,7 +7,7 @@ Mock.mock('/api/getTasks', {
     'creater|1': ['王强', '赵信良', '李轩辕', '田予欢', '张三', '李斯'],
     'date': Mock.Random.date('yyyy/MM/dd'),
     'size|20-1000': 1,
-    'number|1-10':1,
+    'number|1-10': 1,
     'type|1': ['text', 'image'],
     'pieces|5-30': 1
   }]
@@ -15,8 +15,9 @@ Mock.mock('/api/getTasks', {
 
 Mock.mock(/\/api\/getPieces\?id=[0-9]+/, {
   'status': 0,
-  'data|10-50': [{
-    'id|1-9999': 1,
-    'fileNum|50-100': 1
+  'data|5-20': [{
+    'id|1-65535': 1,
+    'fileNum|10-50': 1,
+    'templateName|1': ['人脸识别标注模板', '动物标注模板', '本文标注模板', '桥梁标注模板', '植物标注模板']
   }]
 })