谷粒商城53-商品服务-API-品牌管理-效果优化与快速显示开关

深碍√TFBOYSˉ_ 2022-11-27 10:26 130阅读 0赞

### 文章目录 ###

*   *   *  关闭eslint的语法检查
         *  需求
         *  代码实现
         *   *  elementui组件介绍
             *  具体代码
         *  完整代码

完整代码  
https://gitee.com/code\_life\_git/gulimall\_vue

### 关闭eslint的语法检查 ###

起前端项目的时候, 总是会有如下的报错. 可以将其关闭  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center][]  
注释掉build文件夹下的如下文件的,如下部分的代码  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 1][]  
之后再重启前端服务即可

### 需求 ###

在品牌管理的显示状态一栏, 弄一个开关按钮 , 可以通过按钮来控制是否显示.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 2][]

### 代码实现 ###

#### elementui组件介绍 ####

使用表格的自定义模板

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 3][]  
`scope.row` 代表这一行的数据  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 4][]  
开关中的事件, 获取开关最新的值  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 5][]  
由于开关默认的是传递false 和true 来表示 开关的关闭和打开状态的, 因此需要改成成1 和 0 来代表 打开和关闭  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 6][]

#### 具体代码 ####

在开关这一列中, 引入自定义模板 . 并且用active-value inactive-value 设置 1 和0代表开关打开和关闭时候的值  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 7][]  
开关按钮改变事件的方法updateBrandState方法中, 获取这一行数据的id 和开关的状态, 发送请求, 进行状态的改变.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 8][]  
测试如下 , 改变状态, 发送了请求.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 9][]

### 完整代码 ###

https://gitee.com/code\_life\_git/gulimall\_vue

<template>
      <div class="mod-config">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item>
            <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
            <el-button
              v-if="isAuth('product:brand:save')"
              type="primary"
              @click="addOrUpdateHandle()"
            >新增</el-button>
            <el-button
              v-if="isAuth('product:brand:delete')"
              type="danger"
              @click="deleteHandle()"
              :disabled="dataListSelections.length <= 0"
            >批量删除</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="dataList"
          border
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle"
          style="width: 100%;"
        >
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="brandId" header-align="center" align="center" label="品牌id"></el-table-column>
          <el-table-column prop="name" header-align="center" align="center" label="品牌名"></el-table-column>
          <el-table-column prop="logo" header-align="center" align="center" label="品牌logo地址"></el-table-column>
          <el-table-column prop="descript" header-align="center" align="center" label="介绍"></el-table-column>
    
          <el-table-column prop="showStatus" header-align="center" align="center" label="显示状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.showStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                @change="updateBrandState(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
    
          <el-table-column prop="firstLetter" header-align="center" align="center" label="检索首字母"></el-table-column>
          <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.brandId)">修改</el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.row.brandId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      </div>
    </template>
    
    <script>
    import AddOrUpdate from "./brand-add-or-update";
    export default { 
      data() { 
        return { 
          dataForm: { 
            key: "",
          },
          dataList: [],
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
          dataListLoading: false,
          dataListSelections: [],
          addOrUpdateVisible: false,
        };
      },
      components: { 
        AddOrUpdate,
      },
      activated() { 
        this.getDataList();
      },
      methods: { 
        // 获取数据列表
        getDataList() { 
          this.dataListLoading = true;
          this.$http({ 
            url: this.$http.adornUrl("/product/brand/list"),
            method: "get",
            params: this.$http.adornParams({ 
              page: this.pageIndex,
              limit: this.pageSize,
              key: this.dataForm.key,
            }),
          }).then(({  data }) => { 
            if (data && data.code === 0) { 
              this.dataList = data.page.list;
              this.totalPage = data.page.totalCount;
            } else { 
              this.dataList = [];
              this.totalPage = 0;
            }
            this.dataListLoading = false;
          });
        },
        //开关按钮改变事件的方法
        updateBrandState(data) { 
          // 开关所在行的最新信息
          console.log("最新信息: ", data);
    
          //获取显示状态和这一行数据的id
          let { brandId,showStatus} = data ; 
    
          //发送请求 修改显示状态
          this.$http({ 
            url: this.$http.adornUrl("/product/brand/update"),
            method: "post",
            data: this.$http.adornData( {  brandId,showStatus }, false),
          }).then(({  data }) => { 
            this.$message({ 
              message: "更新状态成功",
              type: "success",
            });
          });
        },
        // 每页数
        sizeChangeHandle(val) { 
          this.pageSize = val;
          this.pageIndex = 1;
          this.getDataList();
        },
        // 当前页
        currentChangeHandle(val) { 
          this.pageIndex = val;
          this.getDataList();
        },
        // 多选
        selectionChangeHandle(val) { 
          this.dataListSelections = val;
        },
        // 新增 / 修改
        addOrUpdateHandle(id) { 
          this.addOrUpdateVisible = true;
          this.$nextTick(() => { 
            this.$refs.addOrUpdate.init(id);
          });
        },
        // 删除
        deleteHandle(id) { 
          var ids = id
            ? [id]
            : this.dataListSelections.map((item) => { 
                return item.brandId;
              });
          this.$confirm(
            `确定对[id=${ ids.join(",")}]进行[${ id ? "删除" : "批量删除"}]操作?`,
            "提示",
            { 
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          ).then(() => { 
            this.$http({ 
              url: this.$http.adornUrl("/product/brand/delete"),
              method: "post",
              data: this.$http.adornData(ids, false),
            }).then(({  data }) => { 
              if (data && data.code === 0) { 
                this.$message({ 
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => { 
                    this.getDataList();
                  },
                });
              } else { 
                this.$message.error(data.msg);
              }
            });
          });
        },
      },
    };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/88d955c0eb5749d7ad266c4d7668b184.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/e6ffde7087b0448e94e3d585eae6e0de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/a25d9b081b0e41a3937a940d28f98c48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/58c98e2b12324a109aa0a027f2d8f42d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/87789a39c2d045a9b8deeaa5a750b60f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221124/b596faa5098d45e2ac41de911fdb888c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221124/7018cdeff0f849e19a736c3637676a44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221124/af97c4fcfd4b4baf96c38e705803bf49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221124/eeae60780951406eb35393e31c7399be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221124/56a53e116e9a4a68a2c59ee8ef016651.png