生成侧边栏导航菜单

image.png

使用人人开源逆向生成的前端代码作为页面组件

image.png
brand.vue ——品牌列表
brand-add-or-update.vue —— 品牌增加修改

权限认证关闭

image.png

优化逆向生成代码

brand.vue

  1. <template>
  2.   <div class="mod-config">
  3.     <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
  4.       <el-form-item>
  5.         <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
  6.       </el-form-item>
  7.       <el-form-item>
  8.         <el-button @click="getDataList()">查询</el-button>
  9.         <el-button
  10.           v-if="isAuth('product:brand:save')"
  11.           type="primary"
  12.           @click="addOrUpdateHandle()"
  13.         >新增
  14.         </el-button>
  15.         <el-button
  16.           v-if="isAuth('product:brand:delete')"
  17.           type="danger"
  18.           @click="deleteHandle()"
  19.           :disabled="dataListSelections.length <= 0"
  20.         >批量删除
  21.         </el-button>
  22.       </el-form-item>
  23.     </el-form>
  24.     <el-table
  25.       :data="dataList"
  26.       border
  27.       v-loading="dataListLoading"
  28.       @selection-change="selectionChangeHandle"
  29.       style="width: 100%;"
  30.     >
  31.       <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
  32.       <el-table-column prop="brandId" header-align="center" align="center" label="品牌id"></el-table-column>
  33.       <el-table-column prop="name" header-align="center" align="center" label="品牌名"></el-table-column>
  34.       <el-table-column prop="logo" header-align="center" align="center" label="品牌logo地址">
  35.         <template slot-scope="scope">
  36.           <!-- <el-image
  37.               style="width: 100px; height: 80px"
  38.               :src="scope.row.logo"
  39.           fit="fill"></el-image>-->
  40.           <img :src="scope.row.logo" style="width: 100px; height: 80px"/>
  41.         </template>
  42.       </el-table-column>
  43.       <el-table-column prop="descript" header-align="center" align="center" label="介绍"></el-table-column>
  44.       <el-table-column prop="showStatus" header-align="center" align="center" label="显示状态">
  45.         <template slot-scope="scope">
  46.           <el-switch
  47.             v-model="scope.row.showStatus"
  48.             active-color="#13ce66"
  49.             inactive-color="#ff4949"
  50.             :active-value="1"
  51.             :inactive-value="0"
  52.             @change="updateBrandStatus(scope.row)"
  53.           ></el-switch>
  54.         </template>
  55.       </el-table-column>
  56.       <el-table-column prop="firstLetter" header-align="center" align="center" label="检索首字母"></el-table-column>
  57.       <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column>
  58.       <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
  59.         <template slot-scope="scope">
  60.           <el-button type="text" size="small" @click="updateCatelogHandle(scope.row.brandId)">关联分类</el-button>
  61.           <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.brandId)">修改</el-button>
  62.           <el-button type="text" size="small" @click="deleteHandle(scope.row.brandId)">删除</el-button>
  63.         </template>
  64.       </el-table-column>
  65.     </el-table>
  66.     <el-pagination
  67.       @size-change="sizeChangeHandle"
  68.       @current-change="currentChangeHandle"
  69.       :current-page="pageIndex"
  70.       :page-sizes="[10, 20, 50, 100]"
  71.       :page-size="pageSize"
  72.       :total="totalPage"
  73.       layout="total, sizes, prev, pager, next, jumper"
  74.     ></el-pagination>
  75.     <!-- 弹窗, 新增 / 修改 -->
  76.     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  78.     <el-dialog title="关联分类" :visible.sync="cateRelationDialogVisible" width="30%">
  79.       <el-popover placement="right-end" v-model="popCatelogSelectVisible">
  80.         <category-cascader :catelogPath.sync="catelogPath"></category-cascader>
  81.         <div style="text-align: right; margin: 0">
  82.           <el-button size="mini" type="text" @click="popCatelogSelectVisible = false">取消</el-button>
  83.           <el-button type="primary" size="mini" @click="addCatelogSelect">确定</el-button>
  84.         </div>
  85.         <el-button slot="reference">新增关联</el-button>
  86.       </el-popover>
  87.       <el-table :data="cateRelationTableData" style="width: 100%">
  88.         <el-table-column prop="id" label="#"></el-table-column>
  89.         <el-table-column prop="brandName" label="品牌名"></el-table-column>
  90.         <el-table-column prop="catelogName" label="分类名"></el-table-column>
  91.         <el-table-column fixed="right" header-align="center" align="center" label="操作">
  92.           <template slot-scope="scope">
  93.             <el-button
  94.               type="text"
  95.               size="small"
  96.               @click="deleteCateRelationHandle(scope.row.id,scope.row.brandId)"
  97.             >移除
  98.             </el-button>
  99.           </template>
  100.         </el-table-column>
  101.       </el-table>
  102.       <span slot="footer" class="dialog-footer">
  103.         <el-button @click="cateRelationDialogVisible = false">取 消</el-button>
  104.         <el-button type="primary" @click="cateRelationDialogVisible = false">确 定</el-button>
  105.       </span>
  106.     </el-dialog>
  107.   </div>
  108. </template>
  110. <script>
  111. import AddOrUpdate from "./brand-add-or-update";
  112. // import CategoryCascader from "../common/category-cascader";
  113. export default {
  114.   data() {
  115.     return {
  116.       dataForm: {
  117.         key: ""
  118.       },
  119.       brandId: 0,
  120.       catelogPath: [],
  121.       dataList: [],
  122.       cateRelationTableData: [],
  123.       pageIndex: 1,
  124.       pageSize: 10,
  125.       totalPage: 0,
  126.       dataListLoading: false,
  127.       dataListSelections: [],
  128.       addOrUpdateVisible: false,
  129.       cateRelationDialogVisible: false,
  130.       popCatelogSelectVisible: false
  131.     };
  132.   },
  133.   components: {
  134.     AddOrUpdate,
  135.     // CategoryCascader
  136.   },
  137.   activated() {
  138.     this.getDataList();
  139.   },
  140.   methods: {
  141.     addCatelogSelect() {
  142.       //{"brandId":1,"catelogId":2}
  143.       this.popCatelogSelectVisible = false;
  144.       this.$http({
  145.         url: this.$http.adornUrl("/product/categorybrandrelation/save"),
  146.         method: "post",
  147.         data: this.$http.adornData({
  148.           brandId: this.brandId,
  149.           catelogId: this.catelogPath[this.catelogPath.length - 1]
  150.         }, false)
  151.       }).then(({data}) => {
  152.         this.getCateRelation();
  153.       });
  154.     },
  155.     deleteCateRelationHandle(id, brandId) {
  156.       this.$http({
  157.         url: this.$http.adornUrl("/product/categorybrandrelation/delete"),
  158.         method: "post",
  159.         data: this.$http.adornData([id], false)
  160.       }).then(({data}) => {
  161.         this.getCateRelation();
  162.       });
  163.     },
  164.     updateCatelogHandle(brandId) {
  165.       this.cateRelationDialogVisible = true;
  166.       this.brandId = brandId;
  167.       this.getCateRelation();
  168.     },
  169.     getCateRelation() {
  170.       this.$http({
  171.         url: this.$http.adornUrl("/product/categorybrandrelation/catelog/list"),
  172.         method: "get",
  173.         params: this.$http.adornParams({
  174.           brandId: this.brandId
  175.         })
  176.       }).then(({data}) => {
  177.         this.cateRelationTableData = data.data;
  178.       });
  179.     },
  180.     // 获取数据列表
  181.     getDataList() {
  182.       this.dataListLoading = true;
  183.       this.$http({
  184.         url: this.$http.adornUrl("/product/brand/list"),
  185.         method: "get",
  186.         params: this.$http.adornParams({
  187.           page: this.pageIndex,
  188.           limit: this.pageSize,
  189.           key: this.dataForm.key
  190.         })
  191.       }).then(({data}) => {
  192.         if (data && data.code === 0) {
  193.           this.dataList = data.page.list;
  194.           this.totalPage = data.page.totalCount;
  195.         } else {
  196.           this.dataList = [];
  197.           this.totalPage = 0;
  198.         }
  199.         this.dataListLoading = false;
  200.       });
  201.     },
  202.     updateBrandStatus(data) {
  203.       console.log("最新信息", data);
  204.       let {brandId, showStatus} = data;
  205.       //发送请求修改状态
  206.       this.$http({
  207.         url: this.$http.adornUrl("/product/brand/update/status"),
  208.         method: "post",
  209.         data: this.$http.adornData({brandId, showStatus}, false)
  210.       }).then(({data}) => {
  211.         this.$message({
  212.           type: "success",
  213.           message: "状态更新成功"
  214.         });
  215.       });
  216.     },
  217.     // 每页数
  218.     sizeChangeHandle(val) {
  219.       this.pageSize = val;
  220.       this.pageIndex = 1;
  221.       this.getDataList();
  222.     },
  223.     // 当前页
  224.     currentChangeHandle(val) {
  225.       this.pageIndex = val;
  226.       this.getDataList();
  227.     },
  228.     // 多选
  229.     selectionChangeHandle(val) {
  230.       this.dataListSelections = val;
  231.     },
  232.     // 新增 / 修改
  233.     addOrUpdateHandle(id) {
  234.       this.addOrUpdateVisible = true;
  235.       this.$nextTick(() => {
  236.         this.$refs.addOrUpdate.init(id);
  237.       });
  238.     },
  239.     // 删除
  240.     deleteHandle(id) {
  241.       var ids = id
  242.         ? [id]
  243.         : this.dataListSelections.map(item => {
  244.           return item.brandId;
  245.         });
  246.       this.$confirm(
  247.         `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
  248.         "提示",
  249.         {
  250.           confirmButtonText: "确定",
  251.           cancelButtonText: "取消",
  252.           type: "warning"
  253.         }
  254.       ).then(() => {
  255.         this.$http({
  256.           url: this.$http.adornUrl("/product/brand/delete"),
  257.           method: "post",
  258.           data: this.$http.adornData(ids, false)
  259.         }).then(({data}) => {
  260.           if (data && data.code === 0) {
  261.             this.$message({
  262.               message: "操作成功",
  263.               type: "success",
  264.               duration: 1500,
  265.               onClose: () => {
  266.                 this.getDataList();
  267.               }
  268.             });
  269.           } else {
  270.             this.$message.error(data.msg);
  271.           }
  272.         });
  273.       });
  274.     }
  275.   }
  276. };
  277. </script>
  278. <style scoped>
  279. </style>

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> -->
        <single-upload v-model="dataForm.logo"></single-upload>
      </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"
          :active-value="1"
          :inactive-value="0"
        ></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.number="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>
import SingleUpload from '@/components/upload/singleUpload';

export default {
  components: {SingleUpload},
  data() {
    return {
      visible: false,
      dataForm: {
        brandId: 0,
        name: "",
        logo: "",
        descript: "",
        showStatus: 1,
        firstLetter: "",
        sort: 0
      },
      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: [
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("首字母必须填写"));
              } else if (!/^[a-zA-Z]$/.test(value)) {
                callback(new Error("首字母必须a-z或者A-Z之间"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        sort: [
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("排序字段必须填写"));
              } else if (!Number.isInteger(value) || value < 0) {
                callback(new Error("排序必须是一个大于等于0的整数"));
              } else {
                callback();
              }
            },
            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>