谷粒商城基础篇-Day03

属性分组

抽取出一个tree组件放到modules下的common下的category.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

在attrgroup.vue中的左边6列使用刚才抽取的组件

在右边18列使用表格，直接复制自动生成的attrgroup.vue中的表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223

attrgroup-add-or-update.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

效果展示：

父子组件传递数据

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

2、父组件给父组件发送一个事件this.$emit(“事件名”,携带的数据)，携带上数据

具体实现：

在抽取的category.vue中，当树被点击后，给父组件发送一个事件

//树被点击
      nodeclick(data,node,component){

      console.log("子组件的节点被点击",data,node,component);
//向父组件发送事件
this.$emit("tree-node-click",data,node,component)

      }
  },
1
2
3
4
5
6
7
8
9

    
1

    //感知树节点被点击
    treenodeclick(data, node, component) {

      console.log("父组件感知到树节点被点击了",data.catId)；
    },
    

1
2
3
4
5
6
7

查询功能

实现点击节点和输入查询条件进行查询

当我们不点击节点时，默认查询全部

当点击节点时，则需要根据节点查询数据

修改后端代码添加一个Long catelogId

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

        PageUtils page =  attrGroupService.queryPage(params,catelogId);
        return R.ok().put("page", page);
    }
1
2
3
4
5
6
7
8
9
10
11

实现queryPage()方法

@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{

            QueryWrapper<AttrGroupEntity> queryWrapper=new QueryWrapper<>();


//SELECT attr_group_id,icon,catelog_id,sort,descript,attr_group_name FROM pms_attr_group WHERE (catelog_id = ?) 
            //构造查询条件
            queryWrapper.eq("catelog_id",catelogId);
            String key = (String)params.get("key");
            if (!StringUtils.isEmpty(key)){
                queryWrapper.and((obj)->{
                    obj.like("attr_group_id",key).or().like("attr_group_name",key);

                });
            }
            //还需要模糊查询
            IPage<AttrGroupEntity> page=this.page(
                    new Query<AttrGroupEntity>().getPage(params),
                    queryWrapper
            );
            return new PageUtils(page);

        }

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

修改前端代码

    //感知树节点被点击
    treenodeclick(data, node, component) {

      console.log("父组件感知到树节点被点击了",data.catId)
      if(data.catLevel==3){
        //三级节点
        this.catId=data.catId;
        //调用查询方法
        this.getDataList();

      }
    },
1
2
3
4
5
6
7
8
9
10
11
12

在data中定义一个catId用来存放当前被点击的id

新增功能

设置所属分类选项为级联选择器

  
1
2
3
4
5
6

在data中设置

        categorys:[],
        prop:{
          value:"catId",
          label:"name",
          children:"children"
        },
1
2
3
4
5
6

在页面初始化时查询分类

    created() {
      this.getCategorys();
    }
1
2
3

发现当音乐的children为空时，右边会显示

使用@JsonInclude(JsonInclude.Include.NON_EMPTY)注解

当节点的children为空时，不返回children

	//子分类
	@JsonInclude(JsonInclude.Include.NON_EMPTY)
	@TableField(exist = false)//不是表中的数据
	private List children;
1
2
3
4

将catelogIds变成数组

定义cattelogId，存放所属分类id

修改表单提交传的数据catelogId为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.catelogIds[this.dataForm.catelogIds.length-1]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

修改功能

实现所属分类的回显

统一将this.dataForm.catelogIds变为catelogPath存放路径

要想实现回显所属分类id，就需要查找完整路径

修改查询信息

给AttrGroupEntity添加属性

	@TableField(exist = false)
	private Long[] catelogPath;
1
2

    /**
     * 信息
     */
    @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);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

编写findCatelogPath(catelogId)方法

    //找到catelogId的完整路径[父/子/孙子]
    @Override
    public Long[] findCatelogPath(Long catelogId) {
        List paths=new ArrayList<>();

        List parentPath = findParentPath(catelogId, paths);
        Collections.reverse(parentPath );
        //转换成数组
        return  parentPath.toArray(new Long[parentPath.size()]);
    }

    private List  findParentPath(Long catelogId,List paths) {

        paths.add(catelogId);

        CategoryEntity byId = this.getById(catelogId);
        if (byId.getParentCid()!=0){
            //有父分类
            findParentPath(byId.getParentCid(),paths);
        }
        return paths;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

问题：当我们点击新增时，所属分类id没有清空

当关闭对话框时，清空所属分类id

使用对话框的closed事件