vue element 三级联动

Hbulid代码

景点列表

按风格:
海滨风光
名山胜水
人文景观
都市田园
其他
全部
按风格:
5A
4A
3A
2A
1A
全部

				
按地区：
					山西
					三亚
					内蒙古
					西藏
					陕西
					全部
					
				
			
	        
				
					
						 
							
								
								
							
						    

						        {{scenic.name}}  {{scenic.level}}

								{{scenic.tname}}

								{{scenic.pname}}{{scenic.cname}}{{scenic.dname}}

								门票：{{scenic.ticket}}元/人

						        

						          详情
						          修改
						          删除
						        
						      
						    
					
				
				
				
				
					
						添加景点
					
					
						批量删除
					
					
					
						
					
				
			
	      
	
	
	

	
	
		
			
				
			
			
				
					
					
					
					
					
				
			
			
				
					
					
					
					
					
				
			
			
				
			
			
				
			
			
				
					
					
				
			
			
				
			
			
				添加
				重置
			
		
	

	
	
		
			景区名称
			{{detailScenicForm.name}}
		
		
			景区等级
			{{detailScenicForm.level}}
		
		
			景区风格
			{{detailScenicForm.tname}}
		
		
			所属地区
			{{detailScenicForm.pname}}{{detailScenicForm.cname}}{{detailScenicForm.dname}}
		
		
			门票
			{{detailScenicForm.ticket}}
		
		
			景区图片
			
				
					
					
				
			
		
		
			景区介绍
			{{detailScenicForm.introduction}}
		
		
			
				返回
			
		
	

	
	
		
			
				
			
			
				
					
					
					
					
					
				
			
			
				
					
					
					
					
					
				
			
			
				
			
			
				
			
			
				
					
					
				
			
			
				
			
			
				更新
				重置
			
		
	

idea代码
@RestController
@RequestMapping("/scenic")
public class ScenicController {

@Autowired
private IScenicService iScenicService;

@RequestMapping("/list")
public ResultApi list(Page page , ScenicVo vo){
    return ResultApi.success(iScenicService.selectPageVo(page,vo));
}

@RequestMapping("/insert")
public ResultApi insert(@RequestBody Scenic scenic){
    return ResultApi.success(iScenicService.save(scenic));
}

@RequestMapping("/update")
public ResultApi update(@RequestBody Scenic scenic){
    return ResultApi.success(iScenicService.updateById(scenic));
}

@RequestMapping("/delete")
public ResultApi delete(Integer ids[]){
    try {
        System.out.println(ids+"*******");
        iScenicService.removeByIds(Arrays.asList(ids));
        System.out.println(ids);
        return ResultApi.success(true);
    }catch (Exception e){
        e.printStackTrace();
    }
    return ResultApi.error(false);
}

}

图片上传controller
//返回的都是json类型 等效于@Controller @ResponseBody
@RestController
public class UploadController {

@RequestMapping("/upload")
private ResultApi upload(MultipartFile file){
    if(!file.isEmpty()){
        //原始文件名称
        String originalFilename = file.getOriginalFilename();
        //文件名的唯一性
        String fileName = UUID.randomUUID()+"_"+originalFilename;
        //设置上传的路劲
        File destFile = new File("D:/pic/", fileName);
        //判断目录是否存在
        if(!destFile.getParentFile().exists()){
            //则创建目录
            destFile.getParentFile().mkdir();
        }
        //保存文件
        try{
            file.transferTo(destFile);
            return ResultApi.success("http://localhost:91/img/"+fileName);
        }catch (IOException e){
            e.printStackTrace();
        }

    }
    return ResultApi.error(null);
}

}

递归获取三级联动数据
@RestController
@RequestMapping("/district")
public class DistrictController {

@Autowired
private IDistrictService iDistrictService;

@RequestMapping("/findAll")
public List findAll(){
    return iDistrictService.findAll();
}

}

三级联动需要的实体类
@Data
public class DistrictVo implements Serializable {

private static final long serialVersionUID=1L;

//记录省市县的id
private Integer id;
//映射省市县的名称
private String name;

private List list;

}

主表需要的实体类
@Data
public class ScenicVo extends Scenic {
private String pname;
private String cname;
private String dname;
private String tname;
private Integer sorted;
private Integer provinceId;
private String levelId;
private Integer typeId;
}

三级联动sql Mapper

SELECT p.id, p.province, c.id cid, c.city city, d.id did, d.district district FROM t_district p LEFT JOIN t_district c ON c.parent = p.id LEFT JOIN t_district d ON d.parent = c.id WHERE p.parent = 1

主表sql Mapper

SELECT s.*,d1.province as pname,d2.city as cname,d3.district as dname,t.`name` as tname , t.sorted as sorted FROM t_scenic s LEFT JOIN t_district d1 ON (s.province=d1.id) LEFT JOIN t_district d2 ON (s.city=d2.id) LEFT JOIN t_district d3 ON (s.county=d3.id) LEFT JOIN t_type t ON (s.type=t.id) and s.level = #{vo.levelId} and s.type = #{vo.typeId} and s.province = #{vo.provinceId}