谷粒商城 (二十) --------- 商品服务 API 属性分组 ① 前端编写

太过爱你忘了你带给我的痛 2024-04-07 14:15 101阅读 0赞

#### 目录 ####

*  一、导入菜单表
 *  二、前端编写

--------------------

## 一、导入菜单表 ##

向 gulimall-admin 表中导入系统菜单表，前端生成不同菜单  
![在这里插入图片描述][efb82852780443169894e735ebb9b51b.png]  
生成的前端菜单如下，以后我们就不用再一 一创建菜单了

![在这里插入图片描述][de159a8b69f5408aa10f295e6f9ac1a8.png]

## 二、前端编写 ##

Vue 中父子组件传递数据

1、子组件给父组件传递数据，事件机制

*  子组件给父组件发送一个事件，携带上数据 `this.$emit("事件名", 携带数据)`

2、父组件给组件传递数据

*  子组件通过props来获取

我们在 前端 modules 中新建 common 文件夹里面存放常用的公共组件，在此我们创建使用目录的三级分类功能的组件

![在这里插入图片描述][7565fe2b09024d5a89df84fed5c098d0.png]

<template>
      <div>
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <el-tree
          :data="menus"
          :props="defaultProps"
          node-key="catId"
          ref="menuTree"
          @node-click="nodeclick"
          :filter-node-method="filterNode"
          :highlight-current = "true"
        ></el-tree>
      </div>
    </template>
    
    <script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    
    export default {
        
      //import引入的组件需要注入到对象中才能使用
      components: {
        },
      props: {
        },
      data() {
        
        //这里存放数据
        return {
        
          filterText: "",
          menus: [],
          expandedKey: [],
          defaultProps: {
        
            children: "children",
            label: "name"
          }
        };
      },
      //计算属性 类似于data概念
      computed: {
        },
      //监控data中的数据变化
      watch: {
        
        filterText(val) {
        
          this.$refs.menuTree.filter(val);
        }
      },
      //方法集合
      methods: {
        
        //树节点过滤
        filterNode(value, data) {
        
          if (!value) return true;
          return data.name.indexOf(value) !== -1;
        },
        getMenus() {
        
          this.$http({
        
            url: this.$http.adornUrl("/product/category/list/tree"),
            method: "get"
          }).then(({
          data }) => {
        
            this.menus = data.data;
          });
        },
        nodeclick(data, node, component) {
        
          console.log("子组件category的节点被点击", data, node, component);
          //向父组件发送事件；
          this.$emit("tree-node-click", data, node, component);
        }
      },
      //生命周期 - 创建完成（可以访问当前this实例）
      created() {
        
        this.getMenus();
      },
      //生命周期 - 挂载完成（可以访问DOM元素）
      mounted() {
        },
      beforeCreate() {
        }, //生命周期 - 创建之前
      beforeMount() {
        }, //生命周期 - 挂载之前
      beforeUpdate() {
        }, //生命周期 - 更新之前
      updated() {
        }, //生命周期 - 更新之后
      beforeDestroy() {
        }, //生命周期 - 销毁之前
      destroyed() {
        }, //生命周期 - 销毁完成
      activated() {
        } //如果页面有keep-alive缓存功能，这个函数会触发
    };
    </script>
    <style scoped>
    
    </style>

同时编写 product 中 attrgroup.vue 与 attrgroup-add-or-update.vue 这两个组件

attrgroup.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-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 type="success" @click="getAllDataList()">查询全部</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="relationHandle(scope.row.attrGroupId)">关联</el-button>
                  <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>
    
            
            <relation-update v-if="relationVisible" ref="relationUpdate" @refreshData="getDataList"></relation-update>
          </div>
        </el-col>
      </el-row>
    </template>
    
    <script>
    /**
     * 父子组件传递数据
     * 1)、子组件给父组件传递数据，事件机制；
     *    子组件给父组件发送一个事件，携带上数据。
     * // this.$emit("事件名",携带的数据...)
     */
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import Category from "../common/category";
    import AddOrUpdate from "./attrgroup-add-or-update";
    import RelationUpdate from "./attr-group-relation";
    export default {
        
      //import引入的组件需要注入到对象中才能使用
      components: {
         Category, AddOrUpdate, RelationUpdate },
      props: {
        },
      data() {
        
        return {
        
          catId: 0,
          dataForm: {
        
            key: ""
          },
          dataList: [],
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0,
          dataListLoading: false,
          dataListSelections: [],
          addOrUpdateVisible: false,
          relationVisible: false
        };
      },
      activated() {
        
        this.getDataList();
      },
      methods: {
        
        //处理分组与属性的关联
        relationHandle(groupId) {
        
          this.relationVisible = true;
          this.$nextTick(() => {
        
            this.$refs.relationUpdate.init(groupId);
          });
        },
        //感知树节点被点击
        treenodeclick(data, node, component) {
        
          if (node.level == 3) {
        
            this.catId = data.catId;
            this.getDataList(); //重新查询
          }
        },
        getAllDataList(){
        
          this.catId = 0;
          this.getDataList();
        },
        // 获取数据列表
        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;
          });
        },
        // 每页数
        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>

attrgroup-add-or-update.vue：

<template>
      <el-dialog
        :title="!dataForm.id ? '新增' : '修改'"
        :close-on-click-modal="false"
        :visible.sync="visible"
        @closed="dialogClose"
      >
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmit()"
          label-width="120px"
        >
          <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="所属分类" prop="catelogId">
            
            
            
            <category-cascader :catelogPath.sync="catelogPath"></category-cascader>
          </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 CategoryCascader from '../common/category-cascader'
    export default {
        
      data() {
        
        return {
        
          props:{
        
            value:"catId",
            label:"name",
            children:"children"
          },
          visible: false,
          categorys: [],
          catelogPath: [],
          dataForm: {
        
            attrGroupId: 0,
            attrGroupName: "",
            sort: "",
            descript: "",
            icon: "",
            catelogId: 0
          },
          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" }
            ]
          }
        };
      },
      components:{
        CategoryCascader},
      
      methods: {
        
        dialogClose(){
        
          this.catelogPath = [];
        },
        getCategorys(){
        
          this.$http({
        
            url: this.$http.adornUrl("/product/category/list/tree"),
            method: "get"
          }).then(({
          data }) => {
        
            this.categorys = data.data;
          });
        },
        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;
                  //查出catelogId的完整路径
                  this.catelogPath =  data.attrGroup.catelogPath;
                }
              });
            }
          });
        },
        // 表单提交
        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.catelogPath[this.catelogPath.length-1]
                })
              }).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);
                }
              });
            }
          });
        }
      },
      created(){
        
        this.getCategorys();
      }
    };
    </script>

效果如图，我们接下来要编写属性分组的后台接口。。。

![在这里插入图片描述][9d02c71a31774b2c8021cb6137ac7987.png]

[efb82852780443169894e735ebb9b51b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f339ca2d946d42f8a305354d43c9defa.png
[de159a8b69f5408aa10f295e6f9ac1a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e67e82b3bcf14728b03353ea45944697.png
[7565fe2b09024d5a89df84fed5c098d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/de117953d3714673851e1125cb5c4777.png
[9d02c71a31774b2c8021cb6137ac7987.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a9f13b1e666748a08c17d89ba5cd7102.png