品牌列表功能完善

src/views/pms/brand/index.vue

@@ -1,6 +1,21 @@
 <template> 
   <div class="app-container">
-    <div class="filter-container"></div>
+    <div class="filter-container">
+      <span>输入搜索：</span>
+      <el-input
+        size="small"
+        style="width: 200px"
+        v-model="listQuery.keyword"
+        placeholder="品牌名称/关键字"
+      ></el-input>
+      <el-button
+        class="search-button"
+        @click="searchBrandList()"
+        type="primary"
+        size="small">
+        查询结果
+      </el-button>
+    </div>
     <el-table ref="brandTable"
               :data="list"
               style="width: 100%"
@@ -23,6 +38,7 @@
       <el-table-column label="品牌制造商" width="100" align="center">
         <template slot-scope="scope">
           <el-switch
+            @change="handleFactoryStatusChange(scope.$index, scope.row)"
             :active-value="1"
             :inactive-value="0"
             v-model="scope.row.factoryStatus">
@@ -32,6 +48,7 @@
       <el-table-column label="是否显示" width="100" align="center">
         <template slot-scope="scope">
           <el-switch
+            @change="handleShowStatusChange(scope.$index, scope.row)"
             :active-value="1"
             :inactive-value="0"
             v-model="scope.row.showStatus">
@@ -68,6 +85,26 @@
         </template>
       </el-table-column>
     </el-table>
+    <div class="batch-operate-container">
+      <el-select
+        size="small"
+        v-model="operateValue" placeholder="批量操作">
+        <el-option
+          v-for="item in operates"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value">
+        </el-option>
+      </el-select>
+      <el-button
+        style="margin-left: 20px"
+        class="search-button"
+        @click="handleBatchOperate()"
+        type="primary"
+        size="small">
+        确定
+      </el-button>
+    </div>
     <div class="pagination-container">
       <el-pagination
         background
@@ -87,6 +124,17 @@
     name: 'brandList',
     data() {
       return {
+        operates:[
+          {
+            label:"显示品牌",
+            value:"showBrand"
+          },
+          {
+            label:"隐藏品牌",
+            value:"hideBrand"
+          }
+          ],
+        operateValue:null,
         listQuery: {
           keyword: null,
           pageNum: 1,
@@ -127,18 +175,44 @@
       handleProductCommentList(index, row) {
         console.log(index, row);
       },
+      handleFactoryStatusChange(index, row) {
+        console.log(index, row);
+      },
+      handleShowStatusChange(index, row) {
+        console.log(index, row);
+      },
       handleCurrentChange(val) {
         this.listQuery.pageNum = val;
         this.getList();
+      },
+      searchBrandList() {
+        this.listQuery.pageNum = 1;
+        this.getList();
+      },
+      handleBatchOperate() {
+        console.log(this.operateValue);
       }
     }
   }
 </script>
-<style>
+<style rel="stylesheet/scss" lang="scss" scoped>
   .pagination-container {
+    display: inline-block;
     float: right;
     margin-top: 20px;
   }
+
+  .filter-container {
+    margin-bottom: 20px;
+  }
+
+  .search-button {
+    float: right;
+  }
+  .batch-operate-container{
+    display: inline-block;
+    margin-top: 20px;
+  }
 </style>