尚医通项目前端

数据字典重点功能,tree级联查询

• 即通过省的dictcode获得具体哪个市县，实现级联查询，点击省查出市，点击市查出区
  首先是

医院设置列表（条件查询带分页、删除、批量删除）

1

在config的dev.env.js 中修改BASE_API，改成本地端口。

2

首先要在api下新建hospset.js的文件，引入utils/request（ajax，axios），写接口方法getHospSetList方法接口，其中的url是后端controller中的RequestMapping路径。因为后端方法返回是josn，所以这里的data 是一个josn对象

3

在list.vue中引入接口文件即hospset.js，定义list[]存放每页数据。引入搜索框，列表，分页。created在页面数据渲染之前执行，一般调用methods定义的方法，得到数据。在methods中写调用接口的方法getlist()，这里会传一个进行分页的参数page。
搜索框中的属性医院名称和医院编号是和getlist中的searchObj双向绑定的，列表是用getlist得到的list进行展示，分页操作也和getlist绑定

4 删除

hostset.js 中写对应后端接口的方法，加入删除按钮并绑定事件，加入弹框是否确定删除，确定则调用删除的接口然后调用getList()刷新页面

5 批量删除：

• hostset.js 中写对应后端接口的方法
• 加入批量删除按钮
• 因为是批量删除，在选择删除项的时候绑定事件获取对应的id，放到multipleSelection列表中保存
• 加入弹框，确定删除后先通过for循环遍历id，用idList接收，最后作为参数传给接口的方法。

6 数据的锁定与解锁

lockHospSet(id,status)

7 医院添加

在hostset.js中加入saveHospSet方法，对应后端接口的url，在add.vue中引入表单，在data()中声明hospitalSet:{}存放表单数据，编写保存按钮对应的触发事件saveOrUpdate，添加成功后先有弹框提示：保存成功，紧接着跳转到医院列表界面。由于不在一个vue文件下，这里用路由进行跳转 this.$router.push({path:‘/hospset/list’})

8 医院设置修改

回显，再修改
1 添加隐藏路由，一点修改按钮就会走/hospSet/edit/到add.vue中

<router-link :to="'/hospSet/edit/'+scope.row.id">
   <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
</router-link>

2 hospset写对应的根据id查询数据和修改数据的方法
3 要回显数据，则要在页面渲染前执行方法，在created中执行

• 先获取路由id，因为一点修改路由就会得到id值

 //获取路由id值 调用接口得到医院设置信息
      if(this.$route.params && this.$route.params.id) {
         const id = this.$route.params.id
         this.getHostSet(id)
       }

• 修改完成后 会有一个问题，这里和刚刚7中的医院添加功能类似，都是属于add.vue中的表单，那么保存是如何判断是添加操作还是更新操作？
• 把添加和更新功能分开写，通过this.hospitalSet.id是否为空判断具体是哪一种操作。

9 数据字典（实现列表、导出、导入功能）

• 首先在controller中写接口findChildData（id），根据id查询子列表的数据，findChildData的具体实现

    public List<Dict> findChlidData(Long id) {
        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        List<Dict> dictList = baseMapper.selectList(wrapper);
        //向list集合每个dict对象中设置hasChildren
        for (Dict dict:dictList) {
            Long dictId = dict.getId();
            boolean isChild = this.isChildren(dictId);
            dict.setHasChildren(isChild);
        }
        return dictList;
    }
    //判断id下面是否有子节点
    private boolean isChildren(Long id) {
        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        Integer count = baseMapper.selectCount(wrapper);
        // 0>0    1>0
        return count>0;
    }

• 前端api中编写dict.js映射后端url，在路由的index.js中配置导航栏，创建list.vue，难点是有层级关系的数据即hasChildren如何递归查询，这里element-ui已经封装好了，只需要实现getchildrens方法。
• 注意在created()方法即页面渲染方法前的方法中getDictList(1)获得root级别的数据。

import dict from '@/api/dict'
export default {
    data() {
        return {
            list:[] //数据字典列表数组
        }
    },
    created() {
        this.getDictList(1)
    },
    methods: {
        //数据字典列表
        getDictList(id) {
            dict.dictList(id)
                .then(response => {
                    this.list = response.data
                })
        },
        getChildrens(tree, treeNode, resolve) {
            dict.dictList(tree.id).then(response => {
                resolve(response.data)
            })
        }
    }
}

数据字典的导入和导出

• 导出
  • 添加easyexcel依赖，在controller中写对应接口exportDict
  • 在serviceimpl写具体的对excel的导出操作，注意实体类DictEeVo和Dict的映射关系。excel中是dictEeVo。
  • 在前端dict/list.vue 中添加导出按钮以及对应的后端接口地址

public void exportDictData(HttpServletResponse response) {
            try {
                response.setContentType("application/vnd.ms-excel");
                response.setCharacterEncoding("utf-8");
                // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
                String fileName = URLEncoder.encode("数据字典", "UTF-8");
                response.setHeader("Content-disposition", "attachment;filename="+ fileName + ".xlsx");

                List<Dict> dictList = baseMapper.selectList(null);
                List<DictEeVo> dictVoList = new ArrayList<>(dictList.size());
                for(Dict dict : dictList) {
                    DictEeVo dictVo = new DictEeVo();
                    BeanUtils.copyProperties(dict, dictVo);
                    dictVoList.add(dictVo);
                }

                EasyExcel.write(response.getOutputStream(), DictEeVo.class).sheet("数据字典").doWrite(dictVoList);
            } catch (IOException e) {
                e.printStackTrace();
            }
    }

• 导入
  controller中导入接口的参数注意是MultipartFile，主要操作是在实现类中，new 一个监听器对象，监听器的作用有两个
  • 使用BeanUtils.copyProperties方法将dictEeVo对象转为dict对象，因为读取的excel是 dictEeVo对象，而数据库中是dict对象
  • 利用baseMapper对数据进行insert操作

EasyExcel.read(file.getInputStream(),DictEeVo.class,new DictListener(baseMapper)).sheet().doRead();

• 前端的操作主要是一个弹框的设置，点击导入，弹框选择文件，上传文件成功后关闭弹窗并刷新页面getlist(1)