Vue封装el-dialog+el表单组件

组件：

<template>
    <div class="summary-dlg">
        <el-dialog title="新建反馈" width="40%" class="cropper-dialog" :close-on-click-modal="false"
            :visible="dialogVisible" :before-close="handleClose" :modal="false">
            <el-form ref="ruleForm" :label-width="w || '80px'" :model="searchMap" class="demo-form-inline">
                <el-row :gutter="20">
                    <el-col v-for="(item, index) in formItemList" :key="index" :span="24">
                        <el-form-item v-show="index < 3 || hideMap" :label="item.label" style="width: 100%">

                            <el-select v-if="item.type == 'select'" v-model="searchMap[item.param]" placeholder="请选择"
                                :size="size" clearable>
                                <el-option v-for="selectItem in item.data" :key="selectItem.value"
                                    :label="selectItem.name" :value="selectItem.value" />
                            </el-select>

                            <Tree :form="form" @sendKeys="sendKeys" ref="tree" v-if="item.type == 'tree'" :size="size"
                                @clear="clear" />
                            <Tree :form="form_" @sendKeys="sendKeys_" ref="tree_" v-if="item.type == 'tree1'"
                                :size="size" @clear="clear_" />
                            <!-- <OneCheckboxGroup v-if="item.type == 'checkbox'" v-model="searchMap[item.param]">
                        <OneCheckbox v-for="(checkboxItem, checkboxIndex) in item.data" :key="checkboxIndex"
                            :label="checkboxItem.name" :value="checkboxItem.value" />
                    </OneCheckboxGroup> -->

                            <el-input v-if="item.type == 'input'" v-model="searchMap[item.param]" :label="item.label"
                                :size="size" placeholder="请输入" :value="item.value" />

                            <!-- <el-drag-select v-if="item.type == 'multiple-select'" v-model="searchMap[item.param]" :size="size"
                            placeholder="请选择" :label="item.label" multiple filterable clearable style="width: 220px">
                            <el-option v-for="multipleSelectItem in item.data" :key="multipleSelectItem.value"
                                :label="multipleSelectItem.name" :value="multipleSelectItem.value" />
                        </el-drag-select> -->

                            <el-date-picker v-if="item.type == 'year'" v-model="searchMap[item.param]"
                                :value="item.value" :size="size" type="year" format="yyyy" value-format="yyyy"
                                placeholder="请选择时间" />

                            <el-date-picker v-if="item.type == 'date'" v-model="searchMap[item.param]"
                                :value="item.value" :size="size" type="date" value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd" placeholder="请选择时间" />

                            <el-date-picker v-if="item.type == 'datetime'" v-model="searchMap[item.param]"
                                :value="item.value" :size="size" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间" />

                            <el-date-picker v-if="item.type == 'month'" v-model="searchMap[item.param]"
                                :value="item.value" :size="size" type="month" format="yyyy-MM" value-format="yyyy-MM"
                                placeholder="请选择时间" />

                            <el-date-picker v-if="item.type == 'more-date'" v-model="searchMap[item.param]"
                                :value="item.value" :size="size" type="dates" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" placeholder="请选择时间" />

                            <el-date-picker v-if="item.type == 'senior-date'" v-model="searchMap[item.param]"
                                :value="item.value" type="date" :size="size" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" :picker-options="optionsFast" placeholder="请选择时间" />

                            <el-date-picker v-if="item.type == 'daterange'" v-model="searchMap[item.param]"
                                :value="item.value" type="daterange" :size="size" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" :range-separator="separator" start-placeholder="开始时间"
                                end-placeholder="结束时间" @change="changeDaterange" />

                            <el-date-picker v-if="item.type == 'datetimerange'" v-model="searchMap[item.param]"
                                :value="item.value" type="datetimerange" :size="size" format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss" :range-separator="separator" start-placeholder="开始时间"
                                end-placeholder="结束时间" />

                            <el-date-picker v-if="item.type == 'monthrange'" v-model="searchMap[item.param]"
                                :value="item.value" type="monthrange" :size="size" format="yyyy-MM"
                                value-format="yyyy-MM" :range-separator="separator" start-placeholder="开始时间"
                                end-placeholder="结束时间" />

                        </el-form-item>
                    </el-col>
                </el-row>

       
            </el-form>
            <div slot="footer" class="dialog-footer">
              
                <el-button @click="handleClose" size="small">取 消</el-button>
                <el-button type="primary" @click="submit" size="small">提 交</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    props: {
        formItemList: {
            type: [Array, Object],
            default() {
                return []
            },
        },
        Titlebar: {},
        w: {}
    },
    data() {
        return {
            dialogVisible: false,
            searchMap: {},
            hideMap: true,
            size: 'small',
            separator: '~',
            optionsFast: {
                shortcuts: [
                    {
                        text: '今日',
                        onClick(picker) {
                            picker.$emit('pick', new Date())
                        },
                    },
                    {
                        text: '昨日',
                        onClick(picker) {
                            const date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', date)
                        },
                    },
                    {
                        text: '一星期',
                        onClick(picker) {
                            const date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', date)
                        },
                    },
                ],
            },
        }
    },
    watch: {
        dialogVisible: {
            handler(e) {
              
            }
        }
    },
    created() {
        let _this = this
        setTimeout(function () {

            _this.searchMap = _this.initSearchMap(_this.formItemList, false)

        }, 500)
    },
    methods: {
        submit(){
            console.log(this.searchMap)
            // 接口调用
        },
        changeDaterange(e) {
            this.$emit('getDate', e)
        },
        initSearchMap(data, isreset) {
            const initFormInline = {}
            for (const obj of data) {
                if (!isreset) {
                    initFormInline[obj.param] = obj.value
                } else {
                    initFormInline[obj.param] = ''
                }
            }
            return initFormInline
        },
        handleClose() {
            this.dialogVisible = false;
         
        },

    }
}
</script>

<style lang="less" scoped>
.el-select,
.el-date-editor {
    width: 100%;
}

.summary-dlg {
    .el-dialog__wrapper {
        pointer-events: none;

        /deep/ .el-dialog {
            pointer-events: auto;
        }
    }
}
</style>

引入和使用：

<template>
<div>
<el-button @click='openDialog'>打开</el-button>
 <DIALOG ref="dialog" :formItemList="searchList" />
</div>
</template>
<script>
import DIALOG from "@/components/DLIAOG.vue"  
export default{

data(){
return{

 searchList: [
        {
          "label": "用户名",
          "param": "userNo",
          "type": "input",
        },
        {
          "label": "QQ号",
          "param": "qqAccount",
          "type": "input"
        },
        {
          "label": "时间",
          "param": "date",
          "type": "daterange"
        },

        {
          "label": "重点客户",
          "param": "importStatus",
          "type": "select",
          data: [
            { name: '否', value: '0' },
            { name: '是', value: '1' },
          ]
        },
       
        {
          "label": "合作状态",
          "param": "status",
          "type": "select",
          data: [
            { name: '已合作', value: '0' },
            { name: '未合作', value: '1' },

          ]
        },
      ],
//常用的几种输入框
}
}
},
methods:{
openDialog(){
this.$refs.dialog.dialogVisible=true
}
}

</script>