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

完整代码 https://gitee.com/code_life_git/gulimall_vue

关闭eslint的语法检查

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

需求

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

代码实现 elementui组件介绍

使用表格的自定义模板

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

具体代码

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

完整代码

https://gitee.com/code_life_git/gulimall_vue

  
    
      
        
      
      
        查询
        新增
        批量删除
      
    
    
      
      
      
      
      

      
        
          
        
      

      
      
      
        
          修改
          删除
        
      
    
    
    
    
  



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);
          }
        });
      });
    },
  },
};