elementui创建对话框的基本样式和后端代码，复选框，表格。mybatis-plus

基于element ui 的Dialog 对话框及基本使用

前端

Dialog的基本样式

<el-dialog v-if='dialogFormVisible' title="单个项目管理信息" :visible.sync="dialogFormVisible"
           close-on-click-modal="false" close-on-press-escape="false" show-close="false">
    <template>
        <!-- Tabs 标签页 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <!-- Tabs 标签页的第一个数据 -->
            <el-tab-pane label="基本信息" name="first">
                <!-- 图一的数据 -->
                <el-form :model="entity" label-position="right" label-width="80px">
                    <el-row>
                        <el-col :span="12" >
                            <el-form-item label="编码">
                                <el-input v-model="entity.id" readonly/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="名称">
                                <el-input v-model="entity.name"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="适用性别">
                                <el-select v-model="entity.sex" placeholder="性别">
                                    <el-option label="女" value="女"></el-option>
                                    <el-option label="男" value="男"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="助记码">
                                <el-input v-model="entity.code"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="说明">
                                <el-input v-model="entity.remark" type="textarea"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="注意事项">
                                <el-input v-model="entity.attention" type="textarea"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <!-- Tabs 标签页 第二个数据 -->
            <el-tab-pane label="美容项目信息" name="second">
                <!-- 图二 -->
                <el-table
                          :row-key="getRowKey"
                          @selection-change="changeFun"
                          ref="multipleTable"
                          height="350"
                          :data="itemTableData"
                          style="width: 100%"
                          @row-click="trSelected"
                          :row-class-name="tableRowClassName">
                    <el-table-column type="selection" width="55" :reserve-selection="true">
                    </el-table-column>

                    <el-table-column
                                     prop="itemTableData.code"
                                     label="编号"
                                     width="180">
                        <template slot-scope="scope">{{scope.row.id}}</template>
                    </el-table-column>
                    <el-table-column
                                     prop="itemTableData.name"
                                     label="项目名称"
                                     width="180">
                        <template slot-scope="scope">{{scope.row.name}}</template>
                    </el-table-column>
                    <el-table-column
                                     prop="itemTableData.remark"
                                     label="项目说明">
                        <template slot-scope="scope">{{scope.row.remark}}</template>
                    </el-table-column>
                </el-table>

            </el-tab-pane>
        </el-tabs>
    </template>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
    </div>
</el-dialog>

方法

<script>
    //只展示一部分数据
    new Vue({
        el: "#wrapper",
        data: {
            oldAjglId: [],
            multipleSelection: [],
            ids: [],
            itemTableData: [],
            tableData: [],
            //标签卡
            activeName: 'first',
            dialogFormVisible: false,
            entity: {},
        },
        methods:{
            //选中tr也能让单选框选中
            trSelected(row, event, column) {
                this.$refs.multipleTable.toggleRowSelection(row, true);//点击选中
            },
            //  多选框每次勾选的时候都会触发这个方法
            //  把 val放入multipleSelection数组中
            // @selection-change="changeFun"
            getRowKey(row) {
                return row.id;
            },
            changeFun(val) {
                this.multipleSelection = val // 返回的是选中的列的数组集合
            },
            //隔行换色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 == 0) {
                    return 'warning-row';
                } else {
                    return 'success-row';
                }
                return '';
            },add() {
                this.entity = {};
                this.dialogFormVisible = true;
                this.activeName = "first";
            },
            save() {
                // console.log("=============")
                //把当前的multipleSelection解析成JSONObject
                let resdata = JSON.parse(JSON.stringify(this.multipleSelection));

                // console.log(resdata);
                // 循环遍历出每一行多选框的id 并存入ids中
                /**
                 *先定义一个数组下标，把每个resdatum.id放入ids数组中，并每次让下标+1
                 */
                let a = 0;
                for (const resdatum of resdata) {
                    this.ids[a] = resdatum.id;
                    a++;
                };
                //这里是新增和编辑在一个地方，需要在后台判断用户点击的是新增还是编辑
                axios.put("/api/itemGroup/updateItemGroupAndId?ids=" + this.ids, this.entity).then((res) => {
                    console.log(this.ids)
                    if (res.data.code == 0) {
                        this.loadTable();
                        this.$message({
                            message: "成功",
                            type: "success"
                        })
                    } else {
                        // 败了
                        this.$message.error(res.data.msg);
                    }
                });
                this.dialogFormVisible = false;

            },
            edit(obj) {
                this.entity = obj;
                this.dialogFormVisible = true;
                this.activeName = "first";

                axios.get("/api/itemGroup/findGroupById?id=" + obj.id).then((res) => {

                    // console.log("=========",res.data.data);
                    //将后端传递过来的item数组id赋值给oldAjglId
                    this.oldAjglId = res.data.data;
                    if (res.data.data.length > 0) {
                        // console.log("----",res.data.data);


                        for (let i = 0; i < res.data.data.length; i++) {
                            for (let j = 0; j < this.itemTableData.length; j++) {
                                // console.log("=========",this.itemTableData[j].id);
                                if (this.oldAjglId[i] === this.itemTableData[j].id){//items里面包含有的都回显打勾
                                    this.$refs.multipleTable.toggleRowSelection(//回显打勾核心，toggleRowSelection的第一个参数是需要打勾的那一行数据，第二个参数表示是否选中，传true
                                        this.itemTableData[j],
                                        true
                                    );
                                }
                            }
                        }
                    }
                }).catch(e => this.$message.error(e.message))
            },
        }

    })

</script>

样式

<style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

后端

因为编辑和新增前台都是通过**updateItemGroupAndId()**方法进入后台的，所以要在后台判断执行的是哪一个方法。后台使用的是mybatis-plus

controller层

	@Resource
     private ItemGroupService itemGroupService;
    @Resource
    private ItemAndGroupService itemAndGroupService;
//    编辑按钮
    @PutMapping("/updateItemGroupAndId")
    public Result<?> update(@RequestBody ItemGroup itemGroup,Integer[] ids) {
        System.out.println("itemGroup.getId() = " + itemGroup.getId());

//        先查询是否在item_group表中存在信息，如果存在执行编辑，如果不存在执行新增
        if( itemGroupService.getById(itemGroup.getId())==null){
//            没查到信息就说明记录不存在,执行新增
            saveItemAndGroup(itemGroup,ids);
        }else {

           itemGroupService.updateItemGroupAndId(itemGroup,ids);
        }
        return Result.success("修改成功");
    }

service层

	@Resource
    private ItemGroupMapper itemGroupMapper;

    @Resource
    private ItemAndGroupMapper itemAndGroupMapper;
//编辑
    public Object updateItemGroupAndId(ItemGroup itemGroup, Integer[] ids) {
//        1.修改item_group表中数据
        itemGroupMapper.updateById(itemGroup);
//        2.修改中间表item_and_group表中数据，先通过item_group的id删除中间表中的记录
        Long itemGroupId = itemGroup.getId();
        HashMap<String, Object> map = new HashMap<>();
        map.put("group_id",itemGroupId);
        itemAndGroupMapper.deleteByMap(map);
//         3.循环增加item_and_group表中数据
//        group_id=itemGroupId,item_id=id
        for (Integer id : ids) {
            ItemAndGroup itemAndGroup = new ItemAndGroup();
            itemAndGroup.setGroupId(Long.parseLong(itemGroupId.toString()));
            itemAndGroup.setItemId(Long.parseLong(id.toString()));
            itemAndGroupMapper.insert(itemAndGroup);
        }
        return Result.success();
    }