商品服务-品牌管理

最新推荐文章于 2022-02-23 15:53:51 发布
最新推荐文章于 2022-02-23 15:53:51 发布
阅读量228 收藏
点赞数
分类专栏： ElementUI 谷粒商城 VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41596346/article/details/121348031
版权
谷粒商城 同时被 3 个专栏收录
62 篇文章 1 订阅
订阅专栏
VUE
34 篇文章 0 订阅
订阅专栏
ElementUI
32 篇文章 0 订阅
订阅专栏

1.新建品牌管理

系统管理–》菜单管理–》新建
在这里插入图片描述
在这里插入图片描述

2.使用生成的代码

将renren-generator生成的前端代码导入
在这里插入图片描述
在这里插入图片描述
之后重启renren-fast-vue项目

3.权限的修改

在这里插入图片描述
发现没有添加等按钮,原因是没有权限，修改utils/index.js中isAuth方法
在这里插入图片描述

/**
 * 是否有权限
 * @param {*} key
 */
export function isAuth (key) {
  //return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
  return true;
}

在这里插入图片描述

4.页面优化

4.1.将显示状态改为switch开关

在这里插入图片描述

 <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"
      >
      </el-switch>
    </template>
  </el-table-column>

在这里插入图片描述
将编辑页面brand-add-or-update.vue中的显示状态也改为switch开关

<el-form-item label="显示状态" prop="showStatus">
    <el-switch v-model="dataForm.showStatus" active-color="#13ce66"  inactive-color="#ff4949" ></el-switch>  
 </el-form-item>

在这里插入图片描述

4.2.修改编辑页面的宽度

将label-width调大

<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="140px">

在这里插入图片描述

5.品牌状态的切换

在这里插入图片描述
给开关绑定change事件

<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"
        @change="updateBrandStatus(scope.row)"
      >
      </el-switch>
    </template>
 </el-table-column>

updateBrandStatus方法

//修改品牌状态
updateBrandStatus(data){
  console.log("当前品牌信息:",data);
  let { brandId, showStatus } = data;
  //发送请求修改状态
  this.$http({
    url: this.$http.adornUrl("/product/brand/update/status"),
    method: "post",
    data: this.$http.adornData({ brandId, showStatus }, false)
  }).then(({ data }) => {
    this.$message({
      type: "success",
      message: `【${data.name}】状态修改成功!!! `
    });
  });
},

BrandController中新增updateBrandStatus方法

 /**
  * 修改品牌状态
   * @param brand
   * @return
   */
  @RequestMapping("/update/status")
  public R updateBrandStatus(@RequestBody BrandEntity brand){
      brandService.updateById(brand);
      return R.ok();
  }

在这里插入图片描述
在这里插入图片描述

原因分析:showStatus当前是true/false，数据库是0/1
解决方案:switch中加上active-value和inactive-value
在这里插入图片描述

 <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="updateBrandStatus(scope.row)"
      >
      </el-switch>
    </template>
  </el-table-column>

在这里插入图片描述

6.完整代码

6.1.brand.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="updateBrandStatus(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;
      });
    },
    // 每页数
    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);
          }
        });
      });
    },

    //修改品牌状态
    updateBrandStatus(data){
      console.log("当前品牌信息:",data);
      let { brandId, showStatus } = data;
      //发送请求修改状态
      this.$http({
        url: this.$http.adornUrl("/product/brand/update/status"),
        method: "post",
        data: this.$http.adornData({ brandId, showStatus }, false)
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: `【${data.name}】状态修改成功!!! `
        });
      });
    },


    //
  },
};
</script>

6.2.brand-add-or-update.vue

<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="140px">
    <el-form-item label="品牌名" prop="name">
      <el-input v-model="dataForm.name" placeholder="品牌名"></el-input>
    </el-form-item>
    <el-form-item label="品牌logo地址" prop="logo">
      <el-input v-model="dataForm.logo" placeholder="品牌logo地址"></el-input>
    </el-form-item>
    <el-form-item label="介绍" prop="descript">
      <el-input v-model="dataForm.descript" placeholder="介绍"></el-input>
    </el-form-item>
    <el-form-item label="显示状态" prop="showStatus">
      <el-switch v-model="dataForm.showStatus" active-color="#13ce66"  inactive-color="#ff4949" ></el-switch>  
    </el-form-item>
    <el-form-item label="检索首字母" prop="firstLetter">
      <el-input v-model="dataForm.firstLetter" placeholder="检索首字母"></el-input>
    </el-form-item>
    <el-form-item label="排序" prop="sort">
      <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          brandId: 0,
          name: '',
          logo: '',
          descript: '',
          showStatus: '',
          firstLetter: '',
          sort: ''
        },
        dataRule: {
          name: [
            { required: true, message: '品牌名不能为空', trigger: 'blur' }
          ],
          logo: [
            { required: true, message: '品牌logo地址不能为空', trigger: 'blur' }
          ],
          descript: [
            { required: true, message: '介绍不能为空', trigger: 'blur' }
          ],
          showStatus: [
            { required: true, message: '显示状态[0-不显示；1-显示]不能为空', trigger: 'blur' }
          ],
          firstLetter: [
            { required: true, message: '检索首字母不能为空', trigger: 'blur' }
          ],
          sort: [
            { required: true, message: '排序不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) {
        this.dataForm.brandId = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.brandId) {
            this.$http({
              url: this.$http.adornUrl(`/product/brand/info/${this.dataForm.brandId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.name = data.brand.name
                this.dataForm.logo = data.brand.logo
                this.dataForm.descript = data.brand.descript
                this.dataForm.showStatus = data.brand.showStatus
                this.dataForm.firstLetter = data.brand.firstLetter
                this.dataForm.sort = data.brand.sort
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/product/brand/${!this.dataForm.brandId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'brandId': this.dataForm.brandId || undefined,
                'name': this.dataForm.name,
                'logo': this.dataForm.logo,
                'descript': this.dataForm.descript,
                'showStatus': this.dataForm.showStatus,
                'firstLetter': this.dataForm.firstLetter,
                'sort': this.dataForm.sort
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
Java小生不才
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element 组件switch 使用
fly_vip的博客
06-16 1867
<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> <script> export default { data() { return { value: true } } }; 组件直接在官网上面找就可以，但是使用的时候默认值要注意，字符串直接调用就可以；有区别的.
elemnet ui vue笔记
lyxkgc的博客
05-14 2746
elemnet ui vue pc端 2020.05.15 总结： form表单组 <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="审批人"> <el-input v-model="formInline.user" placeholder="审批人"></el-input> </el-form-ite
Elemet-ui开关组件el-switch ：点击时状态不变出现弹窗，点击确认再改变按钮状态
yimeichengxuyuan的博客
06-01 2042
默认使用方法 <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> ----------------------------------------------------- export default { data() { return { value: true } } }; 更
Switch 开关
weixin_30907523的博客
03-13 260
表示两种相互对立的状态间的切换，多用于触发「开/关」。 基本用法 绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。 1 <el-switch 2 v-model="value2" 3 active-color="#13ce66" 4 inactive-color...
vue中switch按钮的接口对接，传true(flase)和1(0)的两种方式
weixin_43312391的博客
02-23 3152
1.传true和flase的方式： vue文件中： <template slot-scope="scope"> <el-switch v-model="scope.row.active" active-color="#13ce66" inactive-color="#ff4949" @change="changeStatus($event,scope.row,scope.$in
客户服务与管理-课件项目四.ppt
05-30
【客户满意度测试的对象】分为现实客户（直接使用商品或服务的人）、内部客户（企业内部的员工或部门）、使用者和购买者（可能存在差异）、以及中间商客户（在供应链中起到传递作用）。测试应覆盖所有相关方以获得...
太平洋sogo-品质管理个案.pptx
09-23
\n\n总的来说，太平洋SOGO百货的品质管理案例展示了零售业如何通过精心设计的制度和服务，以及对员工的专业培训，实现卓越的顾客满意度和品牌忠诚度。这种全面而深入的品质管理方法对于其他零售企业具有极高的学习...
01-商品促销管理标准.doc
08-17
《商品促销管理标准》是连锁经营企业营销策略的重要组成部分，旨在通过有效的促销活动来提升销售、强化品牌影响力以及优化客户关系。以下将详细探讨促销在连锁经营中的多重作用及其实施的关键点。 首先，促销是信息...
产品管理--sweethhb.pptx
09-26
在产品管理中，产品策略是核心，它涉及到产品的概念、分类、生命周期理论、品牌和包装决策，以及新产品的开发。 产品策略的第一部分是理解产品的概念。在市场营销中，产品可以广义地理解为能满足人们需求和欲望的...
营销进阶--管理产品线，品牌和包装.ppt
09-30
【营销进阶--管理产品线，品牌和包装】 在营销领域，有效管理产品线、品牌和包装对于企业的成功至关重要。产品不仅仅是实体商品，它包含了满足客户需求的多种层面。以下是产品概念及其不同层次的详细解析： 1. **...
switch的文字在内部显示效果
AsBefore麦小兜
07-25 542
代码： <el-switch class="tableScopeSwitch" active-value="Y" inactive-value="N" @change="handleStatusChange(child_data)" active-text="开启" inactive-text="冻结" v-model="data.enable"> </el-switch> css 修改样式 <style lan...
按钮颜色样式
weixin_30586257的博客
07-23 4592
按钮颜色样式 .el-alert--success { background-color: #e7faf0; color: #13ce66;} .el-alert--warning { background-color: #fff8e6; color: #FFBA00;} .el-alert--info { background-color: #f4f...
React组件间通信（常用方式，简单易用）
高大志leo的博客
10-27 4461
React知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，结合实例，通俗易懂，建议收藏。 一、父子组件通信 原理：父组件通过props（与vue中的props区分开）向子组件通信，子组件通过回调事件与父组件通信。 首先，先创建一个父组件Parent.js跟子组件Children.js，二者的关系为直接父子关系。 Parent.js父组件如下，给父组件一个默认状态state，引入子组件，通过在子组件加上toChildren={this.state.msg}，该处即为向子组件传..
vue项目中在table表格中使用switch开关
走走停停
02-24 7318
<template slot-scope="scope"> <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="switchChange($event, scope.row)" active-color="#13ce66" .
三十六.规格参数新增功能
绅士jiejie的博客
07-18 449
一.规格参数前端代码 baseattr.vue如下： <template> <el-row :gutter="20"> <el-col :span="6"> <category @tree-node-click="treenodeclick"></category> </el-col> <el-col :span="18"> <div class="mod-conf
分包合同计量单.docx
07-13
分包合同计量单.docx
树莓派简介PPT课件.ppt
07-13
树莓派简介PPT课件.ppt
项目债务盘点明细表.docx
07-13
项目债务盘点明细表.docx
全网最热Python3入门+进阶 更快上手实际开发
最新发布
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
汽车服务业信息化管理方案.doc
12-21
在当前全球化和市场深化的背景下，企业需以客户为中心，通过信息化手段优化内部管理，以实现标准化、统一化和品牌化。 该方案首先阐述了汽车行业信息化管理的必要性，指出企业需要根据自身发展阶段选择适合的管理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值