谷粒商城-day09-属性分组

最新推荐文章于 2022-12-28 20:46:52 发布
最新推荐文章于 2022-12-28 20:46:52 发布
阅读量411 收藏 1
点赞数 1
分类专栏： 谷粒商城 文章标签： 数据库 前端 database
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39007838/article/details/124914595
版权

背景介绍

这块逻辑笔者在做的时候还是很复杂的

image-20220522154009369 image-20210224133437008 image-20210224133413827

sku 和 spu 都有属性

下面我们先来实现三级分类与属性分组之间的关联，实现效果如下

image-20220522162003591

前端组件抽离&父子组件交互

导入所有菜单的sql，参考sql在 docs sql 的 sys_menu.sql

/*
SQLyog Ultimate v11.25 (64 bit)
MySQL - 5.7.27 : Database - gulimall_admin
*********************************************************************
*/


/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`gulimall_admin` /*!40100 DEFAULT CHARACTER SET utf8mb4 */;

USE `gulimall_admin`;

/*Table structure for table `sys_menu` */

DROP TABLE IF EXISTS `sys_menu`;

CREATE TABLE `sys_menu` (
  `menu_id` bigint(20) NOT NULL AUTO_INCREMENT,
  `parent_id` bigint(20) DEFAULT NULL COMMENT '父菜单ID，一级菜单为0',
  `name` varchar(50) DEFAULT NULL COMMENT '菜单名称',
  `url` varchar(200) DEFAULT NULL COMMENT '菜单URL',
  `perms` varchar(500) DEFAULT NULL COMMENT '授权(多个用逗号分隔，如：user:list,user:create)',
  `type` int(11) DEFAULT NULL COMMENT '类型   0：目录   1：菜单   2：按钮',
  `icon` varchar(50) DEFAULT NULL COMMENT '菜单图标',
  `order_num` int(11) DEFAULT NULL COMMENT '排序',
  PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=76 DEFAULT CHARSET=utf8mb4 COMMENT='菜单管理';

/*Data for the table `sys_menu` */

insert  into `sys_menu`(`menu_id`,`parent_id`,`name`,`url`,`perms`,`type`,`icon`,`order_num`) values (1,0,'系统管理',NULL,NULL,0,'system',0),(2,1,'管理员列表','sys/user',NULL,1,'admin',1),(3,1,'角色管理','sys/role',NULL,1,'role',2),(4,1,'菜单管理','sys/menu',NULL,1,'menu',3),(5,1,'SQL监控','http://localhost:8080/renren-fast/druid/sql.html',NULL,1,'sql',4),(6,1,'定时任务','job/schedule',NULL,1,'job',5),(7,6,'查看',NULL,'sys:schedule:list,sys:schedule:info',2,NULL,0),(8,6,'新增',NULL,'sys:schedule:save',2,NULL,0),(9,6,'修改',NULL,'sys:schedule:update',2,NULL,0),(10,6,'删除',NULL,'sys:schedule:delete',2,NULL,0),(11,6,'暂停',NULL,'sys:schedule:pause',2,NULL,0),(12,6,'恢复',NULL,'sys:schedule:resume',2,NULL,0),(13,6,'立即执行',NULL,'sys:schedule:run',2,NULL,0),(14,6,'日志列表',NULL,'sys:schedule:log',2,NULL,0),(15,2,'查看',NULL,'sys:user:list,sys:user:info',2,NULL,0),(16,2,'新增',NULL,'sys:user:save,sys:role:select',2,NULL,0),(17,2,'修改',NULL,'sys:user:update,sys:role:select',2,NULL,0),(18,2,'删除',NULL,'sys:user:delete',2,NULL,0),(19,3,'查看',NULL,'sys:role:list,sys:role:info',2,NULL,0),(20,3,'新增',NULL,'sys:role:save,sys:menu:list',2,NULL,0),(21,3,'修改',NULL,'sys:role:update,sys:menu:list',2,NULL,0),(22,3,'删除',NULL,'sys:role:delete',2,NULL,0),(23,4,'查看',NULL,'sys:menu:list,sys:menu:info',2,NULL,0),(24,4,'新增',NULL,'sys:menu:save,sys:menu:select',2,NULL,0),(25,4,'修改',NULL,'sys:menu:update,sys:menu:select',2,NULL,0),(26,4,'删除',NULL,'sys:menu:delete',2,NULL,0),(27,1,'参数管理','sys/config','sys:config:list,sys:config:info,sys:config:save,sys:config:update,sys:config:delete',1,'config',6),(29,1,'系统日志','sys/log','sys:log:list',1,'log',7),(30,1,'文件上传','oss/oss','sys:oss:all',1,'oss',6),(31,0,'商品系统','','',0,'editor',0),(32,31,'分类维护','product/category','',1,'menu',0),(34,31,'品牌管理','product/brand','',1,'editor',0),(37,31,'平台属性','','',0,'system',0),(38,37,'属性分组','product/attrgroup','',1,'tubiao',0),(39,37,'规格参数','product/baseattr','',1,'log',0),(40,37,'销售属性','product/saleattr','',1,'zonghe',0),(41,31,'商品维护','product/spu','',0,'zonghe',0),(42,0,'优惠营销','','',0,'mudedi',0),(43,0,'库存系统','','',0,'shouye',0),(44,0,'订单系统','','',0,'config',0),(45,0,'用户系统','','',0,'admin',0),(46,0,'内容管理','','',0,'sousuo',0),(47,42,'优惠券管理','coupon/coupon','',1,'zhedie',0),(48,42,'发放记录','coupon/history','',1,'sql',0),(49,42,'专题活动','coupon/subject','',1,'tixing',0),(50,42,'秒杀活动','coupon/seckill','',1,'daohang',0),(51,42,'积分维护','coupon/bounds','',1,'geren',0),(52,42,'满减折扣','coupon/full','',1,'shoucang',0),(53,43,'仓库维护','ware/wareinfo','',1,'shouye',0),(54,43,'库存工作单','ware/task','',1,'log',0),(55,43,'商品库存','ware/sku','',1,'jiesuo',0),(56,44,'订单查询','order/order','',1,'zhedie',0),(57,44,'退货单处理','order/return','',1,'shanchu',0),(58,44,'等级规则','order/settings','',1,'system',0),(59,44,'支付流水查询','order/payment','',1,'job',0),(60,44,'退款流水查询','order/refund','',1,'mudedi',0),(61,45,'会员列表','member/member','',1,'geren',0),(62,45,'会员等级','member/level','',1,'tubiao',0),(63,45,'积分变化','member/growth','',1,'bianji',0),(64,45,'统计信息','member/statistics','',1,'sql',0),(65,46,'首页推荐','content/index','',1,'shouye',0),(66,46,'分类热门','content/category','',1,'zhedie',0),(67,46,'评论管理','content/comments','',1,'pinglun',0),(68,41,'spu管理','product/spu','',1,'config',0),(69,41,'发布商品','product/spuadd','',1,'bianji',0),(70,43,'采购单维护','','',0,'tubiao',0),(71,70,'采购需求','ware/purchaseitem','',1,'editor',0),(72,70,'采购单','ware/purchase','',1,'menu',0),(73,41,'商品管理','product/manager','',1,'zonghe',0),(74,42,'会员价格','coupon/memberprice','',1,'admin',0),(75,42,'每日秒杀','coupon/seckillsession','',1,'job',0);

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

导入到 guliamall_admin

image-20210224134026100

生成后的菜单栏目

这里雷神偷了个懒，后面的前端代码直接复制了

https://easydoc.xyz/s/78237135/ZUqEdvA4/4XuREIJe 接口文档地址

下面的前端代码不想写就复制最后给出的这个 vue 文件，总体思路是把之前写的 category的数据展示 抽取 到 common , 然后右侧就是一个表格，再引入 一个 dialog，这个dialog 引用自生成的代码。动态效果是监听左侧 tree 节点的点击事件，更新查询参数。

image-20220522165121229

最终代码

common/category.vue

<template>
  <el-tree
    :data="menus"
    :props="defaultProps"
    node-key="catId"
    @node-click="nodeclick"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      expandedKey: [], 
      menus: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {
    //获取所有菜单
    getMenus() {
      this.$http({
        url: this.$http.adornUrl(`/product/category/list/tree`),
        method: "get",
      }).then((resp) => {
        this.menus = resp.data.list;
      });
    },
    nodeclick(data, node, component) {
      console.log("子组件category的节点被点击", data, node, component);
      // 向父组件发送事件
      this.$emit("tree-node-click", data, node, component)
    }
  },
  created() {
    this.getMenus();
  },
};
</script>

<style>
</style>

product/attrgroup.vue

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <category @tree-node-click="treenodeclick"></category>
      </el-col>
      <el-col :span="18"
        ><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:attrgroup:save')"
                type="primary"
                @click="addOrUpdateHandle()"
                >新增</el-button
              >
              <el-button
                v-if="isAuth('product:attrgroup: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="attrGroupId"
              header-align="center"
              align="center"
              label="分组id"
            >
            </el-table-column>
            <el-table-column
              prop="attrGroupName"
              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
              prop="descript"
              header-align="center"
              align="center"
              label="描述"
            >
            </el-table-column>
            <el-table-column
              prop="icon"
              header-align="center"
              align="center"
              label="组图标"
            >
            </el-table-column>
            <el-table-column
              prop="catelogId"
              header-align="center"
              align="center"
              label="所属分类id"
            >
            </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.attrGroupId)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="deleteHandle(scope.row.attrGroupId)"
                  >删除</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
      ></el-col>
    </el-row>
  </div>
</template>
<script>
/**
 * 父子组件传递数据
 * 1) 子组件给父组件传递数据，事件机制
 *  子组件给父组件发送一个，携带上数据
 */
import Category from "../common/category";
import AddOrUpdate from "./attrgroup-add-or-update";
export default {
  data() {
    return {
      dataForm: {
        key: ""
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    };
  },
  components: { Category, AddOrUpdate },
  activated() {
    this.getDataList();
  },
  methods: {
    // 感知树节点被点击
    treenodeclick(data, node, component) {
      console.log("attrgroup感知到category节点被点击", data, node, component);
      console.log("刚才被点击的菜单id: " , data.catId);
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/product/attrgroup/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.attrGroupId;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/product/attrgroup/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);
          }
        });
      });
    }
  }
};
</script>
<style scoped></style>

product/attrgroup-add-or-update.vue

<template>
  <el-dialog
    :title="!dataForm.attrGroupId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="组名" prop="attrGroupName">
        <el-input
          v-model="dataForm.attrGroupName"
          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-item label="描述" prop="descript">
        <el-input v-model="dataForm.descript" placeholder="描述"></el-input>
      </el-form-item>
      <el-form-item label="组图标" prop="icon">
        <el-input v-model="dataForm.icon" placeholder="组图标"></el-input>
      </el-form-item>
      <el-form-item label="所属分类id" prop="catelogId">
        <el-input
          v-model="dataForm.catelogId"
          placeholder="所属分类id"
        ></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: {
        attrGroupId: 0,
        attrGroupName: "",
        sort: "",
        descript: "",
        icon: "",
        catelogId: "",
      },
      dataRule: {
        attrGroupName: [
          { required: true, message: "组名不能为空", trigger: "blur" },
        ],
        sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
        descript: [
          { required: true, message: "描述不能为空", trigger: "blur" },
        ],
        icon: [{ required: true, message: "组图标不能为空", trigger: "blur" }],
        catelogId: [
          { required: true, message: "所属分类id不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    init(id) {
      this.dataForm.attrGroupId = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.attrGroupId) {
          this.$http({
            url: this.$http.adornUrl(
              `/product/attrgroup/info/${this.dataForm.attrGroupId}`
            ),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.attrGroupName = data.attrGroup.attrGroupName;
              this.dataForm.sort = data.attrGroup.sort;
              this.dataForm.descript = data.attrGroup.descript;
              this.dataForm.icon = data.attrGroup.icon;
              this.dataForm.catelogId = data.attrGroup.catelogId;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/product/attrgroup/${
                !this.dataForm.attrGroupId ? "save" : "update"
              }`
            ),
            method: "post",
            data: this.$http.adornData({
              attrGroupId: this.dataForm.attrGroupId || undefined,
              attrGroupName: this.dataForm.attrGroupName,
              sort: this.dataForm.sort,
              descript: this.dataForm.descript,
              icon: this.dataForm.icon,
              catelogId: this.dataForm.catelogId,
            }),
          }).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>

创建一个组件 Category 并且引入

image-20210224151601106

一个基本的效果

获取分组属性分组

后端接口

重写 AttrGroupController中的 list

/**
     * 列表
     */
    @RequestMapping("/list/{categoryId}")
    public R list(@RequestParam Map<String, Object> params,
                  @PathVariable("categoryId") Long categoryId
    ) {
        PageUtils page = attrGroupService.queryPage(params, categoryId);

        return R.ok().put("page", page);
    }

service 层

@Override
public PageUtils queryPage(Map<String, Object> params, Long catelogId) {
    if (catelogId == 0) {
        IPage<AttrGroupEntity> page = this.page(new Query<AttrGroupEntity>().getPage(params),
                new QueryWrapper<AttrGroupEntity>());
        return new PageUtils(page);
    } else {
        String key = (String) params.get("key");
        // select * from pms_attr_group where catelog_id = ? and (attr_group_id=key or attr_group_name like %key%)
        QueryWrapper<AttrGroupEntity> wrapper = new QueryWrapper<AttrGroupEntity>()
                .eq("catelog_id", catelogId);
        if (!StringUtils.isEmpty(key)){
            wrapper.and((obj)->{
                obj.eq("attr_group_id", key).or().like("attr_group_name", key);
            });
        }
        IPage<AttrGroupEntity> page = this.page(new Query<AttrGroupEntity>().getPage(params),
                wrapper);
        return new PageUtils(page);
    }
}
image-20210224154647016

观察打印 sql

如果没打印可添加如下配置

# 配置 mybatisplus 打印 sql
logging:
  level:
    com:
      example: debug

image-20210224154710075

前端更改

// 1.data 里面添加 变量
catId: 0,

// 2. 获取数据列表 查询的时候拼接上 catId 和 key
getDataList() {
  this.dataListLoading = true;
  this.$http({
    url: this.$http.adornUrl(`/product/attrgroup/list/${this.catId}`),
    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;
  });
},
// 3.感知树节点被点击(只有点击的 第三级分类采取 调用查询方法)
treenodeclick(data, node, component) {
  console.log("attrgroup感知到category节点被点击", data, node, component);
  console.log("刚才被点击的菜单id: ", data.catId);
  //   当前点击的节点是否是三级分类
  if (node.level == 3) {
    this.catId = data.catId;
    this.getDataList(); // 重新查询
  }
},

测试，只有在点击三级菜单的时候，才会发送请求

image-20210224155445245

新增两条数据

image-20210224155501059

测试

image-20210224155524452

模糊查询

image-20210224155552453 image-20210224155610759

分组新增&级联选择器

<el-cascader
          v-model="dataForm.catelogIds"
          :options="categorys"
          :props="props"
        ></el-cascader>

props: {
        value: "catId",
        children: "children",
        label: "name",
      },
      categorys: [],

      dataForm: {
        attrGroupId: 0,
        attrGroupName: "",
        sort: "",
        descript: "",
        icon: "",
        // cascader 绑定一个数据
        catelogIds: [],
        catelogId: 0,
      },

// 提交时修改为 取到最后一个
catelogId: this.dataForm.catelogIds[this.dataForm.catelogIds.length-1],

修改 序列化规则

// 解决 最后一级 children 为空集合的问题
    @JsonInclude(JsonInclude.Include.NON_EMPTY)
    @TableField(exist = false)
    List<CategoryEntity> children;

分组修改 级联选择器回显

点击修改的时候，分组id这里没有回显

image-20220522173932928

需要查出 category 的完整路径，作为这里的 cascadar v-model 绑定 的初始值

// 添加 catelogPath 赋值
this.$http({
            url: this.$http.adornUrl(
              `/product/attrgroup/info/${this.dataForm.attrGroupId}`
            ),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.attrGroupName = data.attrGroup.attrGroupName;
              this.dataForm.sort = data.attrGroup.sort;
              this.dataForm.descript = data.attrGroup.descript;
              this.dataForm.icon = data.attrGroup.icon;
              this.dataForm.catelogId = data.attrGroup.catelogId;
              // 查出 catelogId 的完整路径
              this.dataForm.catelogPath = data.attrGroup.catelogPath;
              console.log(this.categorys)
              console.log(this.dataForm.catelogPath)
            }
          });

// 添加 catelogPath 作为选中初始值
dataForm: {
        attrGroupId: 0,
        attrGroupName: "",
        sort: "",
        descript: "",
        icon: "",
        // cascader 绑定一个数组
        catelogIds: [],
        catelogId: 0,
        catelogPath: []
      },

<!-- 修改为绑定  catelogPath-->
<el-cascader
          v-model="dataForm.catelogPath"
          :options="categorys"
          :props="props"
></el-cascader>

后端修改

// AttrGroupEntity.java 添加属性，描述节点的完整路径

// 完整路径
	@TableField(exist = false)
	private Long[] catelogPath;

// 重写 controller 
 /**
     * 信息
     */
    @RequestMapping("/info/{attrGroupId}")
    public R info(@PathVariable("attrGroupId") Long attrGroupId) {
        AttrGroupEntity attrGroup = attrGroupService.getById(attrGroupId);

        Long catelogId = attrGroup.getCatelogId();

        Long[] path = categoryService.findCatelogPath(catelogId);

        attrGroup.setCatelogPath(path);

        return R.ok().put("attrGroup", attrGroup);
    }

// service
/**
     * 找到 category 的完整路径
     * [父/子/孙]
     * [2, 25, 255]
     *
     * @param catelogId
     * @return
     */
    @Override
    public Long[] findCatelogPath(Long catelogId) {
        List<Long> paths = new ArrayList<>();
        List<Long> parentPath = findParentPath(catelogId, paths);

        Collections.reverse(parentPath);

        return parentPath.toArray(new Long[parentPath.size()]);
    }

    private List<Long> findParentPath(Long catelogId, List<Long> paths) {
        // 收集当前节点
        paths.add(catelogId);
        CategoryEntity byId = this.getById(catelogId);
        if (byId.getParentCid() != 0) {
            findParentPath(byId.getParentCid(), paths);
        }
        return paths;
    }

// 单元测试
@Test
    public void findCatelogPath() {
        Long[] catelogPath = categoryService.findCatelogPath(255L);
        log.info("完整路径: " + Arrays.asList(catelogPath));
    }

监听 dialog 关闭，清空选中 path 的信息，避免出现打开 add 时 还有初始值

//dialog 添加事件
@closed="dialogClose"

// methods
    dialogClose() {
      this.dataForm.catelogPath = []
    },

添加可搜索和占位提示

<el-cascader
          v-model="dataForm.catelogPath"
          :options="categorys"
          :props="props"
          filterable
          placeholder="试试搜索：手机"
        ></el-cascader>
image-20220522181425160
周周写不完的代码
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
自定义属性分组
12-06
自定义属性分组，按类型展示显示分组，字母排序显示+号分组
谷粒商城-电商项目--gulimall.zip
最新发布
11-01
谷粒商城-电商项目--gulimall
谷粒商城--属性分组--笔记七
qq_31745863的博客
10-13 738
谷粒商城–属性分组–笔记七 1.SPU与SKU SPU： Standard Product Unit（标准化产品单元） 是商品信息聚合的最小单位， 是一组可复用、 易检索的标准化信息的集合， 该集合描述了一个产品的特性。 iphoneX 是 SPU、 MI 8 是 SPU iphoneX 64G 黑曜石 是 SKU MI8 8+64G+黑色 是 SKU SKU： Stock Keeping Unit（库存量单位） 即库存进出计量的基本单元， 可以是以件， 盒， 托盘等为单位。 SKU 这是对于
谷粒商城day50 -商品服务-API-属性分组-获取分类属性分组
JavaCoder_juejue的博客
10-20 313
实现这样一个效果，左边点击三级分类右边表格内查询出该三级分类关联的属性分组 1.controller层代码 @RequestMapping("/list/{catelogId}") public R list(@RequestParam Map<String, Object> params,@PathVariable("catelogId") Long catelogId){ // PageUtils page = attrGroupService.query
谷粒商城-基础篇-Day06-属性分组
qq_57907966的博客
12-28 1041
抽取出一个tree组件放到modules下的common下的category.vue。修改表单提交传的数据catelogId为catelogId数组的最后一个单词。在右边18列使用表格，直接复制自动生成的attrgroup.vue中的表格。在抽取的category.vue中，当树被点击后，给父组件发送一个事件。在attrgroup.vue中的左边6列使用刚才抽取的组件。在data中定义一个catId用来存放当前被点击的id。当节点的children为空时，不返回children。
谷粒商城基础篇------商品服务 - 属性分组
JH灰色的博客
01-20 909
文章目录6.1 SPU和SKU的关系6.2 前端组件抽取与父子组件交互1、前端组件抽取2、父子组件交互6.3 获取分类属性分组6.4 分组新增与修改1、 分组新增2、分组修改6.5 品牌分类关联1、品牌分页管理2、品牌的模糊查询功能3、品牌分类关联4、新增品牌与分类关联关系5、品牌级联更新(brand)6、分类级联更新 6.1 SPU和SKU的关系 SPU：就是所有具体的统称（集合）； SKU：是每一个具体（集合中的元素）。 可能是一个SPU中含有多个SKU，然后某一个SKU（这个SKU就又叫SPU）下面又
谷粒商城-课件和文档整理.zip
10-16
谷粒-商城-课件和文档：上课详细文档，包括doc文档
gulimall:谷粒商城-电商项目
05-28
1. 环境搭建1. 使用vagrant和virtual Box快速搭建虚拟机环境首先安装两款软件。在cmd窗口 输入 vagrant命令查看vagrant是否安装成功。在vagrant的官网提供了镜像仓库，其中有各种版本的已经搭建好的虚拟机只需要下载...
谷粒商城-课件资料整理
03-04
官方资料不含课件，这是整理的课件
谷粒商城-微服务架构图.jpg
07-17
面试
2020尚硅谷 谷粒商城 建表sql语句
05-05
gulimall_pms 商品 drop table if exists pms_attr; drop table if exists pms_attr_attrgroup_relation; drop table if exists pms_attr_group; drop table if exists pms_brand; drop table if exists pms_category; drop table if exists pms_category_brand_relation; drop table if exists pms_comment_replay; drop table if exists pms_product_attr_value; drop table if exists pms_sku_images; drop table if exists pms_sku_info; drop table if exists pms_sku_sale_attr_value; drop table if exists pms_spu_comment; drop table if exists pms_spu_images; drop table if exists pms_spu_info; drop table if exists pms_spu_info_desc; /*==============================================================*/ /* Table: pms_attr */ /*==============================================================*/ create table pms_attr ( attr_id bigint not null auto_increment comment '属性id', attr_name char(30) comment '属性名', search_type tinyint comment '是否需要检索[0-不需要，1-需要]', icon varchar(255) comment '属性图标', value_select char(255) comment '可选值列表[用逗号分隔]', attr_type tinyint comment '属性类型[0-销售属性，1-基本属性，2-既是销售属性又是基本属性]', enable bigint comment '启用状态[0 - 禁用，1 - 启用]', catelog_id bigint comment '所属分类', show_desc tinyint comment '快速展示【是否展示在介绍上；0-否 1-是】，在sku中仍然可以调整', primary key (attr_id) ); alter table pms_attr comment '商品属性'; /*==============================================================*/ /* Table: pms_attr_attrgroup_relation */ /*==============================================================*/ create table pms_attr_attrgroup_relation ( id bigint not null auto_increment comment 'id', attr_id bigint comment '属性id', attr_group_id bigint comment '属性分组id', attr_sort int comment '属性组内排序', primary key (id) ); alter table pms_attr_attrgroup_relation comment '属性&
谷粒商城-基础篇-商品服务4-属性分组（P71-P74）
ljn1046016768的博客
05-07 1419
谷粒商城 商品服务 属性分组
谷粒商城项目实战——04商品服务之属性分组
bingque6535的博客
05-02 417
三. 属性分组 1. 前期工作 1. 数据导入 将课件中菜单数据库中的数据导入数据库, 这样就不用自己后期一个一个的添加 2. 三级分类抽取成公共组件 1. 抽取公共类 抽取公共类 <template> <!-- :data: 获取的数据源 :props: 配置选项 @node-click: 节点被点击时的回调 node-key: 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的(一定要设置) --> <el-tree :d
2022年最新《谷粒商城开发教程》：5 - 商品服务-API-属性分组
Laptoy的博客
05-07 731
谷粒商城-商品服务-属性分组模块功能完成
2022谷粒商城学习笔记（七）属性分组相关功能
08-18 319
代码】2022谷粒商城学习笔记（七）属性分组相关功能。
FC分组属性整理
u010225788的专栏
09-02 627
FC分组属性的整理，即常用属性的整理。 我们会把常用相关的属性放到一个分组里，从而简化高级属性里一些不必要的属性整理。分组属性整理展示如下： 分组属性也包括几个必须的参数：分组、属性、UI控件。这个类似静态属性里的分组属性，比较简单，也容易制作，这里就不多说了~
谷粒商城学习日记（33）——属性分组
menxinziwen的博客
04-12 329
属性分组前端页面抽取category组件属性页面属性增加修改页面后台接口品牌tree返回修改查询属性entity返回所属品牌全路径AttrGroupController.javaCategoryService.javaCategoryServiceImpl.javaAttrGroupService.javaAttrGroupServiceImpl.javaAttrGroupEntity.java 效果显示 左侧品牌数 右侧 属性管理联动 前端页面 抽取category组件 首先需要抽取一个品牌树的组件 vi
自定义属性分组展示
张小磊的博客
12-06 432
效果图： 首先添加用户控件（这个根据自己想要的东西来） 代码： using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; using System.Data; using System.Linq; using System.Text; using Sy...
商品服务-API-属性分组
weixin_44743332的博客
10-17 470
SPU 与SKU 要做到的效果 因为左边布局都是原来在category 中的菜单，所以这个菜单数据就可以抽取出来当成一个组件。 在其他类中引入该菜单组件。最终以标签的形式进行使用。 效果图： 表格中的前端代码直接从逆向生成的代码中获取,然后复制attrgroup.vue 的全部代码 里面需要导入一个AddOrUpdate 的组件 效果图： 实现功能： 当点击菜单列表中的数据时，右边表格能动态显示出属于它的数据。 这里要用到Vue 中的高级功能。父子组件传递数据。 子组件给父组件
从前慢-谷粒商城篇章6
08-17
根据引用中提供的信息，谷粒商城是一个B2C模式的电商平台，主要销售自营商品给客户。B2C模式指的是商对客的模式，即商家直接向消费者销售商品和服务。谷粒商城使用微服务架构，这是一种将应用程序拆分成独立且可独立...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值