0

jeecgboot-vue3笔记(九)——treeSelect树形选择组件的使用(异步加载) - 马洪彪

 3 months ago
source link: https://www.cnblogs.com/mahongbiao/p/16324304.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
378857-20220530195910365-1157697096.png

初始化加载顶层节点,点击各层的>加载该节点的子节点,加载后>标识去除不再重复加载。

vue ant-design组件

  • tree-data,树节点,children方式或id、pid方式
  • load-data,展开节点事件,响应该事件加载子节点
<a-tree-select v-model:value="sample" :tree-data="sampleTreeData" :load-data="onLoadSampleTreeData"
        style="width: 100%" allowClear treeDataSimpleMode 
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="请选择测试计划/样品" >                           
</a-tree-select>

定义interface

  • 异步加载通过id和pid匹配,因此没有children属性,替换为id何pid
  • 添加level便于后端识别,如果后端为一个表内的数据且通过id和pid或parentid关联则不需要
export interface TreeDataItem {
  id: string | number;
  pId: string | number;
  value: string;
  title: string;
  isLeaf?: boolean;
  level: string;
}

加载(跟节点)数据

调用后端查询数据并赋值给treeData,treeData绑定控件的treeData属性。

async function loadSampleTreeRootData() {
  // loading.value = true
  let params = {"level":"0"};
  sampleTreeNode(params).then(result => { 
      console.log(result)
      sampleTreeData.value = sampleTreeData.value.concat(result);
      }).finally(() => { 
      });
  // loading.value = false  
}
loadSampleTreeRootData()

加载(节点的子节点)数据

响应控件的load-data事件,查询要展开节点的子节点数据,并合并到treeData中,控件会根据id和pid显示层级关系。

const onLoadSampleTreeData = (treeNode: any) => { 
      return new Promise((resolve: (value?: unknown) => void) => {
        // console.log("node:");
        // console.log(treeNode.dataRef)
        const { id,level,value } = treeNode.dataRef; 
        // console.log("id:"+id);
        // console.log("level:"+level);
        // console.log("value:"+value); 
        setTimeout(() => { 
            let nextLevel = "1";
            if(level=="1")nextLevel="2";
            let params = {"level":nextLevel, "id":id}; 
            sampleTreeNode(params).then(result => { 
            //    console.log("result:");
            //    console.log(result); 
                sampleTreeData.value = sampleTreeData.value.concat(result); 
            }).finally(() => { 
            }); 
          resolve();
        }, 300);
      });
    };

定义treeNodeVO

pId和isLeaf注解下,避免springMVC默认的序列化。
(默认序列化为pid\leaf)

@Data
public class PlantSampleTreeNodeVO {
    //key
    private String id;
//    private long id;

    @JsonProperty("pId")
    private String pId;
//    private long pId;

    //树节点显示的内容
    private String title;

    //默认根据此属性值进行筛选(其值在整个树范围内唯一)
    private Object value;

    //是否是叶子节点
    @JsonProperty("isLeaf")
    private boolean isLeaf;

    //节点层级
    private String level;

}

controller提供数据

因为是异步加载,三个表的查询可在一个service中实现,或直接使用各自的treeNode的service。

@Override
	public List<PlantSampleTreeNodeVO> getPlantSampleTreeNodeVO(String level, String id) {
		List<PlantSampleTreeNodeVO> plantSampleTreeVONodeList = new ArrayList<>();
		switch (level) {//顶级节点
			case "0":
				//查询所在班组,plant member
				List<Plant> plantList = plantService.list();
				for (Plant plant : plantList) {
					//创建顶层树/节点
					PlantSampleTreeNodeVO plantNode = new PlantSampleTreeNodeVO();
//					System.out.println(plant.getId());
//					System.out.println(Long.parseLong(plant.getId()));
//					System.out.println(Long.valueOf(plant.getId()).longValue());
//					plantNode.setId(Long.parseLong(plant.getId()));
					plantNode.setId(plant.getId());
					plantNode.setPId("0");//and-design tree指定的值
					plantNode.setValue(plant.getId());
					plantNode.setTitle(plant.getPlantName());
					plantNode.setLeaf(false);//需根据业务逻辑判断是否有子节点,省略处理
					plantNode.setLevel("0");
					plantSampleTreeVONodeList.add(plantNode);
				}
				break;
			case "1":
				//查询班组相关的样品组模板
				QueryWrapper<SampleGroupTemplate> sampleGroupTemplateQueryWrapper = new QueryWrapper<>();
				sampleGroupTemplateQueryWrapper.eq("plantid",id);
				List<SampleGroupTemplate> sampleGroupTemplateList = sampleGroupTemplateService.list(sampleGroupTemplateQueryWrapper);
				//循环各样品组模板显示其下的测试计划/样品
				for(SampleGroupTemplate sampleGroupTemplate: sampleGroupTemplateList){
					//添加到树上
					PlantSampleTreeNodeVO sampleGroupNode = new PlantSampleTreeNodeVO();
//					sampleGroupNode.setId(Long.parseLong(sampleGroupTemplate.getId()));
					sampleGroupNode.setId(sampleGroupTemplate.getId());
//					sampleGroupNode.setPId(Long.parseLong(id));
					sampleGroupNode.setPId(id);
					sampleGroupNode.setValue(sampleGroupTemplate.getId());
					sampleGroupNode.setTitle(sampleGroupTemplate.getSampleGroupName());
					sampleGroupNode.setLeaf(false);
					sampleGroupNode.setLevel("1");
					plantSampleTreeVONodeList.add(sampleGroupNode);
				}
				break;
			case "2":
				//查询样品组模板显示其下的测试计划/样品
				QueryWrapper<SgtSample> sampleQueryWrapper = new QueryWrapper<>();
				sampleQueryWrapper.eq("templateid",id);
				List<SgtSample> sampleList = this.list(sampleQueryWrapper);
				//循环各样品
				for(SgtSample sample: sampleList) {
					PlantSampleTreeNodeVO sampleNode = new PlantSampleTreeNodeVO();
//					sampleNode.setId(Long.parseLong(sample.getId()));
					sampleNode.setId(sample.getId());
//					sampleNode.setPId(Long.parseLong(id));
					sampleNode.setPId(id);
					sampleNode.setValue(sample.getId());
					sampleNode.setTitle(sample.getSampleName());
					sampleNode.setLeaf(true);//叶子节点
					sampleNode.setLevel("2");
					plantSampleTreeVONodeList.add(sampleNode);
				}
				break;
		}
		return plantSampleTreeVONodeList;
	}


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK