模板市场 完成搜索框

src/views/manage_company/template/market.vue

@@ -18,7 +18,12 @@
     <section class="card">
       <div class="card_left">
         <div class="card_search_box">
-          
+          <el-input
+            placeholder="搜索模板"
+            prefix-icon="Cicon icon font_family icon-icon_sousuo iconsize_mini"
+            class="el-input_mini"
+            v-model="searchKeywords"
+          ></el-input>
         </div>
         <div class="list">
           <div
@@ -36,7 +41,7 @@
           <!-- <div class="float_title">子行业名称</div> -->
           <div
             class="block"
-            v-for="node in currentHeadNode.children"
+            v-for="node in filterViewList(currentHeadNode.children)"
             :key="node.id"
           >
             <div class="block_label">{{node.label}}</div>
@@ -89,14 +94,25 @@ export default {
         templateTreeList: [],
         currentHeadNode: null,
         addedTemplateIdMap: {},
-        searchTempName: "" // 搜索模板名称
+        searchKeywords: "" // 搜索模板名称
       };
     },
-    filters: {},
     mounted: function () {
       this.loadTemplateList();
     },
     methods: {
+      filterViewList(secIndNodeList) {
+        const keywords = this.searchKeywords;
+        if(!keywords) return secIndNodeList;
+        return secIndNodeList.reduce((headList, secIndNode) =>{
+          const tempNodeList = secIndNode.children.filter(tempNode => tempNode.label.indexOf(keywords) !== -1);
+          if(tempNodeList.length) {
+            const copyNode = { ...secIndNode, children: tempNodeList }
+            headList.push(copyNode);
+          }
+          return headList;
+        }, []);
+      },
       /**
        * 查看模板详情
        */
@@ -286,6 +302,10 @@ function composeIndustryAndTemplate(templateList, indList) {
       &_box {
         height: 72px;
         border-bottom: 1px solid #cccdd7;
+        padding: 22px 24px;
+        box-sizing: border-box;
+
+        
       }
     }
     .float_title {
@@ -382,5 +402,13 @@ function composeIndustryAndTemplate(templateList, indList) {
       }
     }
   }
+  ::v-deep .el-input_mini .el-input__inner {
+    border-color: #c4c4c4;
+    &:hover {
+      border-color: #8c00ff;
+    }
+  }
 }
+
+
 </style>