生成侧边栏导航菜单

image.png

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

将逆向工程product得到的resources\src\views\modules\product文件拷贝到gulimall/renren-fast-vue/src/views/modules/product目录下，也就是下面的两个文件

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

  1. <template>
  2.   <el-dialog
  3.     :title="!dataForm.id ? '新增' : '修改'"
  4.     :close-on-click-modal="false"
  5.     :visible.sync="visible"
  6.   >
  7.     <el-form
  8.       :model="dataForm"
  9.       :rules="dataRule"
  10.       ref="dataForm"
  11.       @keyup.enter.native="dataFormSubmit()"
  12.       label-width="140px"
  13.     >
  14.       <el-form-item label="品牌名" prop="name">
  15.         <el-input v-model="dataForm.name" placeholder="品牌名"></el-input>
  16.       </el-form-item>
  17.       <el-form-item label="品牌logo地址" prop="logo">
  18.         <!-- <el-input v-model="dataForm.logo" placeholder="品牌logo地址"></el-input> -->
  19.         <single-upload v-model="dataForm.logo"></single-upload>
  20.       </el-form-item>
  21.       <el-form-item label="介绍" prop="descript">
  22.         <el-input v-model="dataForm.descript" placeholder="介绍"></el-input>
  23.       </el-form-item>
  24.       <el-form-item label="显示状态" prop="showStatus">
  25.         <el-switch
  26.           v-model="dataForm.showStatus"
  27.           active-color="#13ce66"
  28.           inactive-color="#ff4949"
  29.           :active-value="1"
  30.           :inactive-value="0"
  31.         ></el-switch>
  32.       </el-form-item>
  33.       <el-form-item label="检索首字母" prop="firstLetter">
  34.         <el-input v-model="dataForm.firstLetter" placeholder="检索首字母"></el-input>
  35.       </el-form-item>
  36.       <el-form-item label="排序" prop="sort">
  37.         <el-input v-model.number="dataForm.sort" placeholder="排序"></el-input>
  38.       </el-form-item>
  39.     </el-form>
  40.     <span slot="footer" class="dialog-footer">
  41.       <el-button @click="visible = false">取消</el-button>
  42.       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
  43.     </span>
  44.   </el-dialog>
  45. </template>
  47. <script>
  48. import SingleUpload from '@/components/upload/singleUpload';
  50. export default {
  51.   components: {SingleUpload},
  52.   data() {
  53.     return {
  54.       visible: false,
  55.       dataForm: {
  56.         brandId: 0,
  57.         name: "",
  58.         logo: "",
  59.         descript: "",
  60.         showStatus: 1,
  61.         firstLetter: "",
  62.         sort: 0
  63.       },
  64.       dataRule: {
  65.         name: [{required: true, message: "品牌名不能为空", trigger: "blur"}],
  66.         logo: [
  67.           {required: true, message: "品牌logo地址不能为空", trigger: "blur"}
  68.         ],
  69.         descript: [
  70.           {required: true, message: "介绍不能为空", trigger: "blur"}
  71.         ],
  72.         showStatus: [
  73.           {
  74.             required: true,
  75.             message: "显示状态[0-不显示；1-显示]不能为空",
  76.             trigger: "blur"
  77.           }
  78.         ],
  79.         firstLetter: [
  80.           {
  81.             validator: (rule, value, callback) => {
  82.               if (value == "") {
  83.                 callback(new Error("首字母必须填写"));
  84.               } else if (!/^[a-zA-Z]$/.test(value)) {
  85.                 callback(new Error("首字母必须a-z或者A-Z之间"));
  86.               } else {
  87.                 callback();
  88.               }
  89.             },
  90.             trigger: "blur"
  91.           }
  92.         ],
  93.         sort: [
  94.           {
  95.             validator: (rule, value, callback) => {
  96.               if (value == "") {
  97.                 callback(new Error("排序字段必须填写"));
  98.               } else if (!Number.isInteger(value) || value < 0) {
  99.                 callback(new Error("排序必须是一个大于等于0的整数"));
  100.               } else {
  101.                 callback();
  102.               }
  103.             },
  104.             trigger: "blur"
  105.           }
  106.         ]
  107.       }
  108.     };
  109.   },
  110.   methods: {
  111.     init(id) {
  112.       this.dataForm.brandId = id || 0;
  113.       this.visible = true;
  114.       this.$nextTick(() => {
  115.         this.$refs["dataForm"].resetFields();
  116.         if (this.dataForm.brandId) {
  117.           this.$http({
  118.             url: this.$http.adornUrl(
  119.               `/product/brand/info/${this.dataForm.brandId}`
  120.             ),
  121.             method: "get",
  122.             params: this.$http.adornParams()
  123.           }).then(({data}) => {
  124.             if (data && data.code === 0) {
  125.               this.dataForm.name = data.brand.name;
  126.               this.dataForm.logo = data.brand.logo;
  127.               this.dataForm.descript = data.brand.descript;
  128.               this.dataForm.showStatus = data.brand.showStatus;
  129.               this.dataForm.firstLetter = data.brand.firstLetter;
  130.               this.dataForm.sort = data.brand.sort;
  131.             }
  132.           });
  133.         }
  134.       });
  135.     },
  136.     // 表单提交
  137.     dataFormSubmit() {
  138.       this.$refs["dataForm"].validate(valid => {
  139.         if (valid) {
  140.           this.$http({
  141.             url: this.$http.adornUrl(
  142.               `/product/brand/${!this.dataForm.brandId ? "save" : "update"}`
  143.             ),
  144.             method: "post",
  145.             data: this.$http.adornData({
  146.               brandId: this.dataForm.brandId || undefined,
  147.               name: this.dataForm.name,
  148.               logo: this.dataForm.logo,
  149.               descript: this.dataForm.descript,
  150.               showStatus: this.dataForm.showStatus,
  151.               firstLetter: this.dataForm.firstLetter,
  152.               sort: this.dataForm.sort
  153.             })
  154.           }).then(({data}) => {
  155.             if (data && data.code === 0) {
  156.               this.$message({
  157.                 message: "操作成功",
  158.                 type: "success",
  159.                 duration: 1500,
  160.                 onClose: () => {
  161.                   this.visible = false;
  162.                   this.$emit("refreshDataList");
  163.                 }
  164.               });
  165.             } else {
  166.               this.$message.error(data.msg);
  167.             }
  168.           });
  169.         }
  170.       });
  171.     }
  172.   }
  173. };
  174. </script>