修改PiecesTable组件，使用插槽提供不同功能

DAPlatform-front/src/components/CheckDetail.vue

@@ -5,32 +5,36 @@
       <p>发布者：{{task.creater}}</p>
       <p>发布时间：{{task.date}}</p>
       <el-divider></el-divider>
-      <pieces-table :task-id="task.id" :mode="3"></pieces-table>
+      <pieces-table :task-id="task.id" showProgress>
+        <template v-slot:option='slotProps'>
+          <el-button type="primary" size="mini" plain @click='doOption(slotProps.file)'>审核</el-button>
+        </template>
+      </pieces-table>
     </div>
   </div>
 </template>
 
 <script>
 import PiecesTable from './PiecesTable'
-  export default {
-    name: 'check-detail',
-    components: {
+export default {
+  name: 'check-detail',
+  components: {
     PiecesTable
   },
-    data () {
-      return {
-        task: null
-      }
-    },
-    beforeMount () {
+  data () {
+    return {
+      task: null
+    }
+  },
+  beforeMount () {
     this.task = JSON.parse(decodeURIComponent(this.$route.params.task))
   },
-    methods: {
-      start(){
-        this.$router.push('/selected');
-      }
+  methods: {
+    doOption () {
+      this.$router.push('/selected')
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>

DAPlatform-front/src/components/OngoingTaskDetail.vue

@@ -5,7 +5,11 @@
       <p>发布者：{{task.creater}}</p>
       <p>发布时间：{{task.date}}</p>
       <el-divider></el-divider>
-      <pieces-table :task-id="task.id" :mode="1"></pieces-table>
+      <pieces-table :task-id="task.id" showProgress>
+        <template v-slot:option='slotProps'>
+          <el-button type="primary" size="mini" plain @click='doOption(slotProps.file)'>标注</el-button>
+        </template>
+      </pieces-table>
     </div>
   </div>
 </template>
@@ -27,7 +31,10 @@ export default {
     this.task = JSON.parse(decodeURIComponent(this.$route.params.task))
   },
   methods: {
-
+    doOption (file) {
+      console.log(file)
+      this.$router.push('/select')
+    }
   }
 }
 </script>

DAPlatform-front/src/components/PiecesTable.vue

@@ -7,38 +7,21 @@
       :row-class-name="tableRowClassName"
       @selection-change="handleSelectionChange"
     >
-      <el-table-column v-if="mode == 0" type="selection" width="55"></el-table-column>
+      <el-table-column v-if="showSelection" type="selection" width="55"></el-table-column>
       <el-table-column prop="id" label="分片id" width="120"></el-table-column>
       <el-table-column prop="fileType" label="文件类别" width="120"></el-table-column>
       <el-table-column prop="fileNum" label="文件数量" width="120"></el-table-column>
-      <el-table-column prop="templateName" label="模板名" :width="mode == 1 ? 240 : ''"></el-table-column>
-      <el-table-column v-if="mode == 1" label="进度">
+      <el-table-column prop="templateName" label="模板名" :width="showProgress ? 240 : ''"></el-table-column>
+      <el-table-column v-if="showProgress" label="进度">
         <template>
           <el-progress :percentage="50" style="width:150px" :format="format"></el-progress>
         </template>
       </el-table-column>
       <el-table-column type="expand">
-        <div class="file">
+        <div class="file" v-for="item in 3" :key="item">
           <i class="el-icon-document"></i>
           <span class="file-name">文本标注.doc</span>12.8KB
-          <el-button type="primary" size="mini" v-if="mode == 1" plain @click="select">标注</el-button>
-          <el-button type="primary" size="mini" v-if="mode == 2" plain @click="selected">详情</el-button>
-          <el-button type="primary" size="mini" v-if="mode == 3" plain>审核</el-button>
-        </div>
-        <div class="file">
-          <i class="el-icon-document-copy"></i>
-          <span class="file-name">图层文件.kml</span>31.5KB
-          <el-button type="primary" size="mini" v-if="mode == 1" plain @click="select">标注</el-button>
-          <el-button type="primary" size="mini" v-if="mode == 2" plain @click="selected">详情</el-button>
-          <el-button type="primary" size="mini" v-if="mode == 3" plain>审核</el-button>
-        </div>
-        <div class="file">
-          <i class="el-icon-picture-outline"></i>
-          <span class="file-name">图片文件.jpg</span>1.8MB
-          <i v-if="mode == 1" class="el-icon-success"></i>
-          <el-button type="primary" size="mini" v-if="mode == 2" plain @click="select">详情</el-button>
-          <el-button type="primary" size="mini" v-if="mode == 3" plain>审核</el-button>
-          <!-- <el-button type="primary" size="mini" v-if="mode == 1" plain>标注</el-button> -->
+          <slot name='option' :file='item'></slot>
         </div>
       </el-table-column>
     </el-table>
@@ -51,10 +34,14 @@ export default {
   name: 'pieces-table',
   props: {
     taskId: Number, // 接收任务的id
-    mode: {
-      type: Number,
-      default: 0
-    } // 模式：0显示选择框，不显示标注按钮，1不显示选择框，显示标注按钮, 2不显示选择框，不显示标注按钮，显示详情按钮. 3不显示选择框，不显示标注按钮，显示审核按钮
+    showSelection: {
+      type: Boolean,
+      default: false
+    },
+    showProgress: {
+      type: Boolean,
+      default: false
+    }
   },
   data () {
     return {
@@ -94,12 +81,6 @@ export default {
     },
     format (percentage) {
       return '20/30'
-    },
-    select () {
-      this.$router.push('/select')
-    },
-    selected () {
-      this.$router.push('/selected')
     }
   }
 }

DAPlatform-front/src/components/Task.vue

@@ -6,7 +6,7 @@
       <p>发布时间：{{task.date}}</p>
       <el-divider></el-divider>
       <h2>选择分片</h2>
-      <pieces-table :task-id="task.id" :mode="0"></pieces-table>
+      <pieces-table :task-id="task.id" showSelection></pieces-table>
     </div>
   </div>
 </template>