本文是《uniCloud项目中树形分类页面的快速开发》的第三部分。主要分享schema2code自动生成页面代码后二次开发的主要内容。通过二次开发，更好地满足项目需求，增强用户体验。
一、改写的目标与编码思路
1、目标
- 父类ID自动填充，禁用手工输入。
- 分类的层级自动填充，禁用手工输入。
- 子类存在时，禁止删除父类。
- 可以自由确定分类项的列表顺序。
- 列表页显示为树形列表，体现父子关联。
2、编码思路
- 将列表页面的
新增按钮改为为新增一级分类按钮，移动到页面左上角位置。 - 添加
新增子分类按钮放在每行列表项的操作栏目内。 - 如果已经是第三级分类，不显示
新增子分类按钮。 - 新增一级分类页面跳转时不传参，新增子分类跳转页面时传递父类的相关数据。
- 在新增子分类时，根据分类数据自动填充相关表单项的默认值，禁用手动输入功能。
- 允许修改分类名称、排序和图片。
- 删除分类项时，判断是否有子类，查询子类中是否有父类ID与将要删除项的ID相同，如果有则拒绝删除，没有则允许删除。
二、对/pages/taxonomy/list.vue进行改写。
1、将新增按钮改写成新增一级分类，移动到页面左上角位置。
- 改写前的样子。
- 改写后的样子。
- 改写的代码示例。
从改写的代码示例可以看出，新增一级分类按钮绑定的点击事件跳转到/pages/taxonomy/add.vue页面，跳转时不带任何参数。
2、在每一行列表项添加一个新增子分类按钮。
- 改写前的样子。
- 改写后的样子。
- 改写的代码示例。
从改写的代码示例可以看出，新增子分类按钮绑定的点击事件依然是跳转到/pages/taxonomy/add.vue页面，跳转时携带了父类ID、层级和父类名称三个参数。
@click="navigateTo('./add?parent_id='+item._id+'&level='+item.level+'&parent_name='+item.name)"
复制代码- 在
新增子分类按钮标签上添加一个判断，层级值小于2（层级为0-一级，1-二级）时显示该按钮，否则不显示该按钮。这样就把分类层级限制在三级以内了。
<button v-if="item.level<2" class="uni-button" type="primary" size="mini" ......
复制代码三、对/pages/taxonomy/add.uve进行改写。
1、添加onLoad生命周期函数，判断页面传入参数，对表单进行自动赋值。
2、改写页面相关模版代码，禁用表单中父类ID、层级标单项的手动输入功能。
- 改写代码后新增分类页面长成这样：
- 在列表页面测试新增分类功能正常。
四、对/pages/taxonomy/edit.uve进行改写，禁止对分类层级和父类ID进行修改。
- 示例代码
- 页面截图
五、再次修改列表页面，实现父子项树形关联显示，控制删除按钮选项。
实现思路：
- 按照父子关联显示要求构建新的列表项，重新构建data数组。
- 如果分类项有子项，隐藏
删除按钮。 - 设置排序字段。
具体编码：
1、在js代码部分的data对象中添加一个空数组newData。
2、在js代码部分的onqueryload函数中，重新整理列表数据，按照父子关系重新排序。控制删除按钮。
3、修改页面template。
- 这里对data数组进行了处理，添加一个是否有子分类项属性hasSubItem，赋值给newData，现在改为遍历newData。
- 在删除按钮上加一个判断，如果有子分类项就不显示。
- 改写代码后，基本符合我们的设计思路了。
4、关于排序
- 从上面的列表页面截图可以看出，所有父子项的排序都是按照排序字段的值从小到大排列的。修改排序值后，列表中分类项的显示顺序也随之发生改变。
- 实现排序功能很简单。就是在js代码部分的dbOrderBy参数值设置成需要排序的字段名即可。