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}

你可能感兴趣的:(vue element 三级联动)