cz_health_day03

第三天项目需求

进行检查组编写

需求分析

检查组包含多个检查项

t_checkgroup_checkitem中间表进行关联

1.新增检查组

1. 前端弹出新增窗口，新增窗口有2个，进行默认设置选择项目组的窗口1，窗口2为检查项 进行回显设置
2. 填写数据，点击确认按钮，将检查组数据以及检查项的id数组 异步发送给后端，将数据填入检查组的表，以及中间检查组与检查项的关联表
3. 反馈数据，有问题没有问题都要都要给用户提示，且需要调用查询所有的方法

2、查询所有项目组

1. 前端根据钩子函数，在页面加载完毕触发查询所有的方法，或者页面发生改变也会触发查询所有的方法
2. 将当前页码currentpage，pagesize，querystring封装为json对象，异步传给后端，后端返回总页数以及检查组的集合

3、编辑项目组（修改项目组）

1. 前端点击编辑，弹出修改页面，此时页面需要回显检查组内容，以及所有的检查项类容，除此以外，如果检查组具有检查项，那么检查项需要将检查组有用的检查项进行勾选显示，并且位于勾选的最上层
2. 利用异步，查询检查组完成以后，成功 异步查询所有的检查项 ，成功 异步查询检查组对应的检查项的id 
3. 后端进行数据的查询，返回数据，再进行数据的修改，点击保存将数据传入后端
4. 后端对数据处理时，需要将检查组的数据存入表中，还需要对中间关联的表进行处理，先删除中间关联表与该检查项有关的数据，再将新的数据填入关联表中
5. 成功后返回前端，前端调用查询所有的方法

let vue = new Vue({
        el: '#app',
        data: {
            activeName: 'first',//添加/编辑窗口Tab标签名称
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 10,
                total: 100,
                queryString: null,
            },
            dataList: [],//列表数据
            formData: {},//表单数据
            tableData: [],//新增和编辑表单中对应的检查项列表数据
            checkitemIds: [],//新增和编辑表单中检查项对应的复选框，基于双向绑定可以进行回显和数据提交
            dialogFormVisible: false,//控制添加窗口显示/隐藏
            dialogFormVisible4Edit: false//控制编辑窗口显示/隐藏
        },
        created() {//钩子函数
            this.findPage();
        },
        methods: {
            //编辑
            handleEdit() {
                //发送ajax请求，将修改后的表单数据（检查组基本信息、勾选的检查项）提交到后台进行处理
                axios.post("/checkgroup/edit.do?checkitemIds=" + this.checkitemIds,this.formData).then((res) => {
                    //关闭编辑窗口
                    this.dialogFormVisible4Edit = false;
                    if(res.data.flag){
                        //操作成功
                        this.$message.success(res.data.message);

                    }else{
                        //操作失败
                        this.$message.error(res.data.message);
                    }
                }).finally(() =>{
                    this.findPage();
                });
            },
            //添加
            handleAdd() {
                //发送ajax，将数据传递至后端
                axios.post("/checkgroup/add.do?checkitemIds=" + this.checkitemIds, this.formData).then((res) => {
                    //关闭新增窗口
                    this.dialogFormVisible = false;
                    if (res.data.flag) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).finally(() => {
                    //清空复选框
                    this.checkitemIds = {};
                    this.findPage();
                })

            },
            //分页查询
            findPage() {
                //获取分页参数,分装为jason对象
                let param = {
                    pageSize: this.pagination.pageSize,
                    currentPage: this.pagination.currentPage,
                    queryString: this.pagination.queryString
                }
                //发送ajax请求
                axios.post("/checkgroup/findPage.do", param).then((res) => {
                    this.pagination.total = res.data.total;
                    this.dataList = res.data.rows;
                })
            },
            // 重置表单
            resetForm() {
                this.formData = {};
            },
            // 弹出添加窗口
            handleCreate() {
                //点击新建按钮，弹出添加窗口
                this.resetForm();
                this.dialogFormVisible = true;
                //设置添加框默认是添加查询租的项
                this.activeName = 'first';
                //重置复选框
                this.checkitemIds = [];
                //发送异步请求查询所有的检查项目
                axios.get("/checkitem/findAll.do").then((res) => {
                    if (res.data.flag) {
                        //将正确查询的到的数据回显
                        this.tableData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })

            },
            // 弹出编辑窗口
            handleUpdate(row) {

                //ajax请求查询当前的检查组数据，回显基本数据与检查项数据
                axios.get("/checkgroup/findById.do?checkgroupId=" + row.id).then((res) => {
                    //弹出编辑窗口
                    this.dialogFormVisible4Edit = true;
                    //将基本信息框默认选中的
                    this.activeName = 'first';
                    //清空编辑框的值
                    this.formData = {};
                    if (res.data.flag) {
                        this.formData = res.data.data;
                        //发送异步请求查询所有的检查项,此处上方的检查组拥有的检查项会在最上方
                        axios.get("/checkitem/findAllById.do?checkgroupId=" + row.id).then((res) => {
                            this.tableData = [];
                            if (res.data.flag) {
                                //将正确查询的到的数据回显
                                this.tableData = res.data.data;
                                //回显成功就回显复选框的内容
                                axios.get("/checkgroup/findCheckItemIdsByCheckGroupId.do?checkgroupId=" + row.id).then((res) => {
                                    if (res.data.flag) {
                                        //将正确查询的到的数据回显
                                        this.checkitemIds = res.data.data;
                                    } else {
                                        this.$message.error(res.data.message);
                                    }
                                })
                            } else {
                                this.$message.error(res.data.message);
                            }
                        })

                    } else {
                        this.$message.error(res.data.message);
                    }
                });

            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },