el-dialog 業務應用

背景

　　新開發的項目中使用了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調用子組件的屬性並修改；