el-dialog 业务应用

Posted 2020-10-04 SINGLE DOG

背景

　　新开发的项目中使用了VUE框架，一套管理系统。因为大多都是对表的操作，比如增删改查。因为这些业务关系对单个记录修改的时候用的是模态框，用element-ui的 dialog组件

问题

　　记录的新增和编辑用的是相同的表单元素，所以肯定是不会用两个单独的组件，VUE也强调要组件复用。我的做法是用一个组件来写记录的编辑界面

　　1）新增和编辑的时候打开同一个组件，如何区分编辑和新增

　　2）列表的组件和编辑的表单组件是两个文件，数据通过props传递

　　3）视图也逻辑都要在一个组件里；

　　4）列表组件控制dialog显示，表单组件写重置，保存等逻辑；

 

做法

　　Angular的做法

　　之前一直用angular做单页面应用，用的模态框是ng-dialog，每次实例化一个ngDialog.open() 就会在body的结束标签前新增一个DOM节点。我用一个factory服务存放ngDialog.open()，每次调用的都是同一个单例对象的方法。这样做有几个好处

• 不用在每个地方注入ngDialog，只需要注入factory服务（里边通常会放一些其他属性和方法）
• 每个close的回调函数不用在每个用到的地方再重新写一遍，公用一个
• 用参数代表要新增还是修改（要调用接口获取编辑的数据）

　　VUE的做法

• 打开弹框的时候要先reset一下表单，在声明好组件引入以后，组件会一直保存在内存中，编辑和新增用的是同一个组件，如果不重置就会导致上一次编辑过的内容又显示出来。而这个控制还不能写在created方法里，因为它只有在组件初始化的时候才被调用一次，只要组件没有被销毁就不会再执行；做法就是使用watch去监听控制 el-dialog 的 v-model 绑定的值
• 数据传递，用props属性   VUE是单向数据流，所以可以从父组件像子组件传递数据，且子组件不应该修改通过props传递过来的值，可以使用this.$parent（需要知道层级，不建议使用）；父组件也可以通过this.$refs去控制（传递）子组件的属性和方法，还可以使用$emit向父组件传递

<!-- list组件 -->
<template>
    <div class="btns">
        <button class="btn btn-default" @click="add">新增</button>
        <button class="btn btn-default" @click="edit">修改</button>
    </div>

    <el-dialog title="新增编辑表单" v-model="showDialog">
        <user-form 
        :show-dialog="showDialog" 
        :dialog-type="dialogType"
        ref="userForm" 
        v-on:close="closeDialog"></user-form>
    </el-dialog>
</template>

<script>
    import userForm from ‘user-form.vue‘;
    export default{
        data(){
            return{
                showDialog:false,
                dialogType:‘‘
            }
        },
        created(){

        },
        methods:{
            add(){
                this.showDialog = true;    //打开el-dialog
                this.dialogType = ‘add‘;    //操作类型
            },
            edit(){
                this.showDialog = true;    //打开el-dialog
                this.dialogType = ‘edit‘;
            },
            closeDialog(){
                this.showDialog = false;    //隐藏el-dialog
            }
        }
    }
</script>

<!-- 新增修改表单组件 -->
<template>
    <el-form :model="userForm" ref="userForm" label-width="120px">
        <el-form-item label="名字" prop="name">
            <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="save">保 存</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default{
        props:[‘showDialog‘ ‘dialogType‘],
        data(){
            return{
                userForm:{
                    name:‘‘
                }
            }
        },
        methods:{
            save(){
                //事件通知父组件修改el-model的显示状态
                this.$emit(‘close‘);
            }
        },
        watch:{
            showDialog(n, o){    //根据dialog的状态重置表单
                if(n)
                    this.$refs.userForm.resetFields()
            },
            dialogType(n, o){
                switch(n){
                    case ‘add‘:
                        //新增
                    break;
                    case ‘edit‘:
                        //编辑
                    break;
                }
            }
        }
    }
</script>

 还有一种方法是把el-dialog组件和el-form组件写到一个组件里，showDialog属性在表单组件里声明，在列表里使用$refs调用子组件的属性并修改；