VUE+ELEMENT-UI的后台项目封装组件--查询form的封装

最近项目打算重构，项目的模块几乎都是以后台查询展示的传统的增删改差模式，所以卑微的我想要自己封装一下查询form，先上效果图

子组件页面：

 <template>
   <div class="sumbit-form">
     <el-form
       :model="value"
       :rules="rules"
       ref="ruleForm"
       label-width="100px"
       class="demo-ruleForm"
     >
       <slot name="formItem" />
       <template v-for="(item, index) in formConfig.formItemList">
         <el-row :key="index">
           <template v-for="(i, k) in item">
             <el-col :span="8" :key="k">
               <template
                 v-if="
                   ['text', 'textarea', 'number', 'email'].indexOf(i.type) !== -1
                 "
               >
                 <el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
                   <el-input :type="i.type" v-model="value[i.name]"></el-input>
                 </el-form-item>
               </template>
               <template v-if="i.type === 'select'">
                 <el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
                   <el-select v-model="value[i.name]" placeholder="">
                     <el-option
                       v-for="(j, k) in i.optList"
                       :key="k"
                       :label="j.label"
                       :value="j.value"
                     ></el-option>
                   </el-select>
                 </el-form-item>
               </template>
               <template
                 v-if="
                   ['data', 'datetimerange', 'datetime'].indexOf(i.type) !== -1
                 "
               >
                 <el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
                   <el-date-picker
                     v-model="value[i.name]"
                     type="datetimerange"
                     range-separator="至"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
                     value-format="yyyy-MM-dd HH:mm:ss"
                   >
                   </el-date-picker>
                 </el-form-item>
               </template>
               <template v-if="i.type == 'switch'">
                 <el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
                   <el-switch v-model="value[i.name]"></el-switch>
                 </el-form-item>
               </template>
               <template v-if="i.type == 'radio'">
                 <el-form-item :label="i.label">
                   <el-radio-group v-model="value[i.name]">
                     <el-radio
                       v-for="(j, k) in i.optList"
                       :label="j"
                       :key="k"
                     ></el-radio>
                   </el-radio-group>
                 </el-form-item>
               </template>
               <template v-if="i.type === 'Checkbox'">
                 <el-checkbox-group v-model="value[i.name]">
                   <el-checkbox
                     v-for="ch in i.checkboxs"
                     :label="ch.value"
                     :key="ch.value"
                     >{{ ch.label }}</el-checkbox
                   >
                 </el-checkbox-group>
               </template>
             </el-col>
           </template>
         </el-row>
       </template>

       <div class="searchBtn">
         <el-button-group>
           <el-button
             v-for="(item, index) in formConfig.operate"
             :key="index"
             size="small"
             :type="item.type"
             @click.stop.prevent="item.handleClick"
             >{{ item.name }}
           </el-button>
         </el-button-group>
         <slot name="operate"></slot>
       </div>
     </el-form>
   </div>
 </template>
 <script>
 export default {
   props: {
     formConfig: {
       type: Object,
       default: () => {}
     },
     value: {
       type: Object,
       default: () => {}
     },
     rules: {
       type: Object,
       default: () => {}
     }
   },
   data() {
     return {
       isSearchLock: true
     };
   },
   created() {},
   methods: {
     //子组件校验，传递到父组件
     validateForm() {
       let flag = null;
       if (this.isSearchLock) {
         this.$refs["ruleForm"].validate(valid => {
           let vm = this;
           if (valid) {
             flag = true;
             vm.isSearchLock = flag;
           } else {
             flag = false;
             vm.isSearchLock = flag;
             this.$message.error("保存信息不完整，请继续填写完整");
             setTimeout(function() {
               vm.isSearchLock = true;
             }, 2000);
           }
         });
         return flag;
       }
     },
     resetFields() {
       this.$refs["ruleForm"].resetFields();
     }
   },
   mounted() {}
 };
 </script>
 <style lang="less">
 .el-form-item__content {
   .el-date-editor--datetimerange {
     width: 100%;
   }
 }
 .searchBtn {
   text-align: center;
   .el-button {
     background-color: #4a91d7;
     width: 96px;
     color: #fff;
     &:first-child {
       margin-right: 5px;
     }
     &:hover {
       background-color: #257ccd;
       border-color: #257ccd;
     }
   }
 }
 </style>

父组件里面调用

 <flight-form
           ref="childRules"
           :formConfig="formConfig"
           :value="form"
           :rules="rules"
 ></flight-form>
 <script>
 import flightForm from "@/components/flightForm.vue";
 export default{
 components: {
     flightForm ,

   },
     data() {
         return {
           formConfig: {
         formItemList: [
           [
             {
               type: "text",
               prop: "airport",
               label: "站点",
               name: "airport",
               placeholder: "请输入站点"
             },
             {
               type: "select",
               prop: "importOrExport",
               label: "进出港",
               name: "importOrExport",
               placeholder: "请输入进出港",
               optList: [
                 {
                   value: "",
                   label: ""
                 },
                 {
                   value: "进港",
                   label: "进港"
                 },
                 {
                   value: "出港",
                   label: "出港"
                 }
               ]
             },
             {
               type: "select",
               prop: "mainOrSubBill",
               name: "mainOrSubBill",
               label: "主分单",

               placeholder: "请输入主分单",
               optList: [
                 {
                   value: "",
                   label: ""
                 },
                 {
                   value: "主分",
                   label: "主分"
                 },
                 {
                   value: "主单",
                   label: "主单"
                 }
               ]
             }
           ],
           [
             {
               type: "datetimerange",
               name: "pickerdata",
               label: "选择时间",
               prop: "pickerdata",
               dateFormate: "yyyy-MM-dd HH:mm:ss"
             },
             {
               type: "text",
               name: "largeClass",
               prop: "largeClass",
               label: "大类",
               placeholder: "请输入大类"
             },
             {
               type: "select",
               name: "isDomestic",
               prop: "isDomestic",
               value: "国内",
               label: "国内/国际",
               placeholder: "请输入国内/国际",
               optList: [
                 {
                   value: "",
                   label: ""
                 },
                 {
                   value: "国内",
                   label: "国内"
                 },
                 {
                   value: "国际",
                   label: "国际"
                 }
               ]
             }
           ],
           [
             {
               type: "switch",
               name: "save",
               prop: "save",
               label: "保存"
             },
             {
               type: "radio",
               name: "radio",
               prop: "radio",
               label: "活动类型",
               optList: ["演唱会", "球赛"]
             },
             {
               type: "Checkbox",
               label: "爱好",
               prop: "Checkbox",
               name: "Checkbox",
               checkboxs: [
                 { label: "羽毛球", value: "badminton" },
                 { label: "篮球", value: "basketball" },
                 { label: "足球", value: "football" },
                 { label: "兵乓球", value: "pong" }
               ]
             }
           ]
         ],

         operate: [
           {
             type: "primary",
             name: "查询",
             handleClick: this.search
           },
           {
             type: "primary",
             name: "重置",
             handleClick: this.add
           }
         ]
       },
       rules: {
         airport: [{ required: true, message: "请输入站点", trigger: "blur" }],
         importOrExport: [
           { required: true, message: "请输入进出港", trigger: "blur" }
         ],
         largeClass: [
           { required: true, message: "请输入大类", trigger: "blur" }
         ],
         mainOrSubBill: [
           { required: true, message: "请输入主分单", trigger: "blur" }
         ],
         isDomestic: [
           { required: true, message: "请输入国内/国际", trigger: "blur" }
         ],
         pickerdata: [
           { required: true, message: "请输入时间", trigger: "change" }
         ]
       },
       form: {
         isDomestic: "国内",
         mainOrSubBill: "主分",
         importOrExport: "进港",
         airport: "",
         largeClass: "",
         Checkbox: [],
         pickerdata: [],
         save: false,
         radio: ""
       },
         }
     },
      methods: {
         // 查询
     search() {
       let flag = this.$refs["childRules"].validateForm();
       if (flag) {
         console.log(this.form);
       }
     },
     // 新增或重置
     add() {
       this.$refs["childRules"].resetFields();
     },
     },
     }
 }
 </script>

父组件里面的form传给子组件是传默认值的，

卑微前端，记录自己的项目封装的组件，方便以后自己用，如果有哪里不合理，请各路大神多多指教。