品牌列表功能完善

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,16 +175,42 @@
  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>