CN-240 feat: entity列表（行式）

src/assets/css/components/views/entityExplorer/entityList/row.scss

@@ -58,6 +58,7 @@
       flex-direction: column;
       flex: 1;
       justify-content: center;
+      flex-wrap: wrap;
 
       .cn-entity__header {
         font-size: 16px;
@@ -76,6 +77,7 @@
             flex: 1;
             display: flex;
             flex-direction: row;
+            flex-wrap: wrap;
 
             .basic-info__item {
               padding-right: 40px;

src/components/advancedSearch/AdvancedSearch.vue

@@ -9,7 +9,7 @@
         <div class="search__suffix">
           <i class="cn-icon cn-icon-search-advance"></i>
         </div>
-        <div class="search__suffix">
+        <div class="search__suffix" @click="search">
           <i class="el-icon-search"></i>
         </div>
       </div>
@@ -17,7 +17,7 @@
         <div class="search__suffix">
           <i class="cn-icon cn-icon-search-advance"></i>
         </div>
-        <div class="search__suffix">
+        <div class="search__suffix" @click="search">
           <i class="el-icon-search"></i>
         </div>
       </div>
@@ -39,6 +39,11 @@ export default {
     return {
       searchContent: ''
     }
+  },
+  methods: {
+    search () {
+      this.$emit('search', this.searchContent)
+    }
   }
 }
 </script>

src/views/entityExplorer/EntityExplorer.vue

@@ -112,7 +112,7 @@ export default {
   data () {
     return {
       showList: false,
-      listMode: 'block', // entity列表的模式，list|block
+      listMode: 'list', // entity列表的模式，list|block
       timeFilter: {},
 
       filterData: [

src/views/entityExplorer/entityList/EntityList.vue

@@ -7,11 +7,13 @@
       <!-- 列表式 -->
       <template v-if="listMode === 'list'">
         <div class="entity-list--list">
-          <div v-if="isCollapse" class="cn-entity__shadow"></div>
+          <div v-if="isCollapse" @click="cancelCollapse" class="cn-entity__shadow"></div>
           <entity-row
               v-for="(data, index) in listData"
               :entity="data"
               :key="index"
+              :ref="`entityRow${index}`"
+              :index="index"
               @showCollapse="showCollapse"
           ></entity-row>
         </div>
@@ -71,7 +73,8 @@ export default {
       showDetail: false,
       typeName: '',
       entityList: [],
-      isCollapse: false
+      isCollapse: false,
+      collapseIndex: 0
     }
   },
   methods: {
@@ -100,8 +103,13 @@ export default {
     entityDetail (params) {
       this.$emit('showDetail', { ...params, icon: this.iconClass })
     },
-    showCollapse (isCollapse) {
+    showCollapse (isCollapse, index) {
       this.isCollapse = isCollapse
+      this.collapseIndex = index
+    },
+    cancelCollapse () {
+      this.isCollapse = false
+      this.$refs[`entityRow${this.collapseIndex}`].cancelCollapse()
     }
   }
 }

src/views/entityExplorer/entityList/Row.vue

@@ -97,6 +97,9 @@
 import entityListMixin from './entityListMixin'
 export default {
   name: 'Row',
+  props: {
+    index: Number
+  },
   mixins: [entityListMixin],
   data () {
     return {
@@ -106,7 +109,10 @@ export default {
   methods: {
     showCollapse () {
       this.isCollapse = !this.isCollapse
-      this.$emit('showCollapse', this.isCollapse)
+      this.$emit('showCollapse', this.isCollapse, this.index)
+    },
+    cancelCollapse () {
+      this.isCollapse = false
     }
   }
 }