修复列表展示tag的缺陷，描述过长加省略，单击该行跳转到工作空间

Author: yuchenyao

web/src/js/view/newhome/module/caseAndIntroduction/index.vue

@@ -18,28 +18,7 @@
           </div>
         </div>
       </div>
-      <!-- <div class="admin-box-right">
-        <p class="title">{{$t('message.GLY.KSRM')}}</p>
-        <div class="admin-box-video">
-          <div v-for="(item, index) in videos" :key="index" class="video-item" @click="play(item)">
-            <video width="100%" height="100" controls>
-              <source :src="item.url" type="video/mp4" />
-            </video>
-            <h3 class="video-title">{{item.title}}</h3>
-          </div>
-        </div>
-      </div> -->
     </div>
-    <Modal
-      v-model="showVideo"
-      :title="video.title"
-      :footer-hide="true"
-      width="800"
-    >
-      <video v-if="showVideo" width="100%" controls autoplay>
-        <source :src="video.url" type="video/mp4" />
-      </video>
-    </Modal>
   </div>
 </template>
 <script>
@@ -62,14 +41,12 @@ export default {
         {title: 'Scriptis',url: '/home',icon: 'fi-scriptis'},
         {title: 'Workflow',url: '/project',icon: 'fi-workflow1'},
       ],
-      showVideo: false,
       video: {},
       demos: [],
       videos: []
     }
   },
   created() {
-    // this.getVideos();
     this.getDemos();
   },
   methods: {
@@ -103,10 +80,6 @@ export default {
     getsrc(item) {
       return this.src[item.name];
     },
-    play(item) {
-      this.showVideo = true;
-      this.video = item
-    }
   }
 };
 </script>

web/src/js/view/newhome/module/workspace/index.vue

@@ -60,7 +60,6 @@
                     <li v-if="tag && tagIndex <= 2"  class="item" :key="tagIndex">{{tag}}</li>
                   </template>
                 </ul>
-                <!-- <Button size="small" class="editor" @click.stop="editor(item)">{{ $t('message.workspace.editWorkspace') }}</Button> -->
               </i-col>
             </Row>
             <div v-show="visual === 'table'" class="workspace-table">
@@ -103,6 +102,16 @@
       :add-project-show="workspaceShow"
       @show="workspaceShowAction"
       @confirm="workspaceConfirm"></WorkspaceForm>
+    <Modal
+      v-model="showVideo"
+      :title="video.title"
+      :footer-hide="true"
+      width="800"
+    >
+      <video v-if="showVideo" width="100%" controls autoplay>
+        <source :src="video.url" type="video/mp4" />
+      </video>
+    </Modal>
     <Spin
       v-if="loading"
       size="large"
@@ -125,6 +134,7 @@ export default {
   data() {
     return {
       loading: false,
+      showVideo: false,
       actionType: '',
       currentWorkspaceData: {
         name: '',
@@ -137,6 +147,7 @@ export default {
       cacheData: [],
       filteredData: [],
       visual: 'card',
+      video: {},
       videos: [],
       videoCache: [],
       visualCates: [
@@ -253,6 +264,10 @@ export default {
       } else {
         this.videos = this.videoCache.slice(0, this.pageSize);
       }
+    },
+    play(item) {
+      this.showVideo = true;
+      this.video = item
     }
   }
 }

web/src/js/view/newhome/module/workspace/module/workspaceTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="workspace-table">
-    <Table :columns="columns" :data="tableData" style="margin-bottom: 10px;">
+    <Table :columns="columns" :data="tableData" style="margin-bottom: 10px;" @on-row-click="gotoWorkspace">
       <template slot-scope="{ row }" slot="name">
         <span>{{ row.name }}</span>
       </template>
@@ -10,11 +10,13 @@
       </template>
 
       <template slot-scope="{ row }" slot="label" >
-        <Tag color="blue" v-for="(label, index) in row.label.split(',')" :key="index">{{label}}</Tag>
+        <template v-if="row.label">
+          <Tag color="blue" v-for="(label, index) in row.label.split(',')" :key="index">{{label}}</Tag>
+        </template>
       </template>
 
       <template slot-scope="{ row }" slot="description">
-        <span>{{ row.description }}</span>
+        <span class="desc">{{ row.description }}</span>
       </template>
     </Table>
   </div>
@@ -65,6 +67,20 @@ export default {
     dateFormat(date) {
       return moment(date).format('YYYY-MM-DD HH:mm:ss');
     },
+    gotoWorkspace(workspace) {
+      this.$router.push({ path: '/workspace', query: { workspaceId: workspace.id }});
+    },
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.workspace-table {
+  .desc {
+    width: 100%;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>