分布式电商项目二十三：品牌管理-使用逆向生成的vue组件

本文链接：https://blog.csdn.net/LastYHM/article/details/106523739

品牌管理

首先看一下品牌管理的数据库结构：
在这里插入图片描述
之后在人人开发平台上添加品牌管理的菜单：

之后都采用人人平台逆向生成的vue模块，不再自己编写

来到目录mall-product/src/main/resources/src/views/modules/product，复制文件brand.vue和brand-add-or-update.vue到renren-fast-vue\src\views\modules\product。重启前端代码npm run dev就能看到逆向生成的代码的页面;
在这里插入图片描述
之后修改权限显示增删功能：来到

修改如下：

export function isAuth (key) {
   
   
  // return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
  return true
}

保存之后就能看到增删功能：
在这里插入图片描述
ps：前端项目总报错是因为语法检查过于严格，可以通过关闭build\webpack.base.conf.js中的const createLintingRule来避免，之后重启即可

优化页面效果
将是否显示的字段，修改为按钮，并且将原来定义的true和false修改为0和1，代码如下：
bradn.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<