packages/agForm/src/index.vue

@@ -37,7 +37,7 @@
              </agColorPicker>
              <el-transfer :data="item.data"  v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
              <agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/> 
-             <agMultifunctionSearch v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multifunction-search'" size="small" clearable/> 
+             <ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/> 
              <agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
              <ag-mution-checkbox :datas="item.datas" v-bind="item"  :placeholder="item.placeholder" v-model="formValue[item.enName]" v-if="item.type=='ag-mution-checkbox'" size="small"> </ag-mution-checkbox>
             <ag-multion-date-picker  v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" size="small"/> 
@@ -65,7 +65,7 @@ import agCol from './../../agCol/src/index.vue';
 import agUpload from './../../agUpload/src/index.vue';
 import agColorPicker from './../../agColorPicker/src/index.vue'; 
 import agNumberRange from './../../agNumberRange/src/index.vue';
-import agMultifunctionSearch from './../../agMultifunctionSearch/src/index.vue';
+import agMultionInput from './../../agMultionInput/src/index.vue';
 import agQuery from './../../agQuery/src/index.vue';
 import agMultionDatePicker from '../../agMultionDatePicker';
 
@@ -82,7 +82,7 @@ export default{
         agUpload:agUpload,
         agColorPicker,
         agNumberRange,
-        agMultifunctionSearch,
+        agMultionInput,
         agQuery
     },
     props:{
@@ -161,14 +161,20 @@ export default{
            display: flex;
            align-items: stretch;  
     }
+    .flexcenter{
+        display: flex;
+        align-items: stretch;  
+    }
     ::v-deep{ 
        .el-form--inline{ 
             .el-form-item{ 
                 display:flex;
             } 
             .el-form-item__content{
+                display:flex;
                 flex:1;
                 width:100%;
+                margin-left:0;
             }
         } 
         .el-form-item{
@@ -177,7 +183,9 @@ export default{
         }
         .el-form-item__content{
             flex:1;
+            display:flex;
             width:100%;
+            margin-left:0!important;
         } 
     }
 </style>

packages/agMultifunctionSearch/index.js

@@ -1,9 +0,0 @@
-import agMultifunctionSearch from './src'
-
-// 为组件提供 install 安装方法，供按需引入
-agMultifunctionSearch.install = function (Vue) {
-    Vue.component(agMultifunctionSearch.name, agMultifunctionSearch)
-}
-
-// 导出组件
-export default agMultifunctionSearch

packages/agMultifunctionSearch/src/index.vue

@@ -1,293 +0,0 @@
-<template>
-  <div class="ag-MultifunctionSearch"> 
-    <ag-select 
-    v-bind="$attrs"
-    v-on="listeners"
-     :options="$attrs.options||[]"
-    :value="value&&value[0]" 
-    @change="onSelect"
-    class="ag_select_group"
-     :style="{ width: `${swidth}px` }"
-  > 
-  </ag-select>  
-    <ag-input
-     v-if="!showExtra"
-      class="ag_input_group" 
-      :placeholder="$attrs.placeholder||'请输入内容'" 
-      :disabled="$attrs.disabled||imeipopover"  
-       v-bind="$attrs"
-        v-on="listeners"
-      :value="value[1]"
-      @input="onInputChange"
-     
-    > 
-    <template slot="prefix" >
-     
-      </template>
-    </ag-input>
-    <el-popover 
-    v-if="showExtra"
-    placement="bottom"
-    trigger="manual"
-    ref="popover"
-    popper-class="popperOptions"
-    v-model="imeipopover"
-  >
- <template slot="reference"> 
-  <ag-input
-  class="ag_input_group"
-  :placeholder="$attrs.placeholder||'请输入内容'"   
-  :disabled="$attrs.disabled||imeipopover" 
-  v-bind="$attrs"
-  v-on="listeners"
-   :value="value&&value[1]"
-  @input="onInputChange"
->
-<template slot="suffix" v-if="showExtra">
-  <i 
-  class="iconfont icon-icon-piliangcaozuo imeiicondefault"
-  :class="imeipopover && 'imeiiconActive'"
-  style="font-size: 12px;"
-  @click.prevent="imeiiconClick"
-></i>
-</template>
-</ag-input>
- </template>
-    <el-input 
-      type="textarea"
-      :rows="12"
-      :value="value&&value[1]"
-      placeholder="一行一项，最多支持200行"
-      resize="none"
-      border="none"
-      class="textareainput"
-      @input="onInputChange"
-    />
-    <divider class="divider"></divider>
-    <div class="btnbox">
-      <div>
-        <el-button size="mini" @click="imeiclose"
-          >关闭</el-button
-        >
-      </div>
-      <div>
-        <el-button size="mini" @click="cleartext"
-          >清空</el-button
-        >
-        <el-button
-          size="mini"
-          type="primary"
-          plain
-          @click="search"
-          >查询</el-button
-        >
-      </div>
-    </div> 
-  </el-popover>
-  </div>
-</template>
-
-<script>
-import agSelect from "../../agSelect/src/index.vue";
-import agInput from "../../agInput/src/index.vue";
-import {Divider} from "element-ui";
-
-export default {
-  name: "agMultifunctionSearch",
-  components: {
-    agSelect,
-    agInput,
-    Divider
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => {
-        return [null, ''];
-      },
-    }, 
-    showExtra: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      values: [null, ""],
-      swidth:90,
-      inputValue:"",
-      selectvalue:"",
-      imeipopover:false,
-      listeners:{}
-    };
-  }, 
-  model: {  
-      prop: 'value', // 明确指定 prop 为 'value'  
-      event: 'change' // 自定义事件名，用于更新 value  
-  }, 
-  watch: {
-    value: {
-      handler(newVal) {  
-        if (!Array.isArray(newVal)) {
-          throw new Error("请传入数组");
-        }
-        let newselectValue=newVal[0];   
-        const find=this.$attrs.options&&this.$attrs.options.find((f)=>f.value==newselectValue);
-        if(find){  
-          let fontwidth=this.getStringWidth(find.label);
-          this.swidth=fontwidth>165?165:fontwidth;   
-        } 
-
-      },
-      immediate: true,
-    },
-  },
-  mounted(){   
-    let newlist=Object.assign({},this.$listeners);
-    delete newlist.change;
-    delete newlist.input; 
-    this.listeners=newlist;  
-  },
-  methods: {
-    onSelect(value){
-      if(this.$listeners.change){
-        this.$emit("change", [value, this.value[1]||""]);
-      }
- 
-    },
-    onInputChange(val){ 
-      if(this.$listeners.change){
-        this.$emit("change", [this.value[0] ||"",val]);
-      }
-    },
-    getStringWidth(text) {
-        let font = "13px";
-        // 创建一个隐藏的元素
-        let element = document.createElement('span');
-        element.style.visibility = 'hidden';
-        element.style.whiteSpace = 'nowrap';
-        element.style.font = font; // 设置字体样式
-        element.textContent = text; 
-        // 将元素添加到文档中
-        document.body.appendChild(element); 
-        // 获取元素的宽度
-        let width = element.offsetWidth; 
-        // 移除元素
-        document.body.removeChild(element); 
-        return width+50;
-    },
-    imeiiconClick(){
-       this.imeipopover=!this.imeipopover;
-    },
-   
-    imeiclose(){
-       this.imeipopover=false;
-    },
-    cleartext(){
-       this.value[1]="";
-       this.$set(this.value,1,"");
-    },
-    search(){
-      this.imeipopover=false;
-      if(this.$listeners.onSrarch){
-        this.$emit("onSrarch", this.value);
-      }
-      
-    },
-    getAfterAgo(attr, prefix) {
-      const config = {};
-      for (const key in attr) {
-        if (attr.hasOwnProperty(key) && key.startsWith(prefix)) {
-          const newKey = key.substring(prefix.length);
-          config[newKey] = attr[key];
-        }
-      }
-      return config;
-    },
-  },
-};
-</script>
-<style lang="scss">
-.popperOptions {
-  min-width: 200px !important;
-  padding: 0px !important;
-}
-
-</style>
-<style scoped lang='scss'>
-.ag-MultifunctionSearch {
-  display: flex;
-  align-items: center;  
-  }
-
-.imeiicondefault {
-  padding: 5px;
-  border-radius: 4px;
-  background: #f0f2f5;
-  cursor: pointer;
-} 
-.imeiiconActive {
-  cursor: pointer;
-  color: #409eff;
-  background: #e9f1fc;
-} 
-  .divider {
-    margin: 0;
-  }
-  
-  .btnbox {
-    padding: 5px;
-    display: flex;
-    justify-content: space-between;
-  }
- 
-   ::v-deep{
-  
-    .ag_select_group{
-      .el-input__inner{
-        border:1px solid #e5e5e5;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0; 
-        outline:none;
-        &:focus{
-          border-color:#e5e5e5;
-        }
-      }
-    }
-    .ag_input_group{
-     .el-input__inner{
-        border:1px solid #e5e5e5;
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
-        border-left:none;
-        outline:none;
-        &:focus{
-          border-color:#e5e5e5;
-        }
-      }
-    }
-    .el-select{
-      .el-input{
-        &.is-focus{ 
-          .el-input__inner{
-            border-color:#e5e5e5;
-          }
-        }
-      } 
-        &:hover{
-          .el-input__inner{
-            border-color:#e5e5e5;
-          }
-        }
-      } 
-    .el-textarea__inner{
-      border:none;
-    }
-    .el-input__suffix-inner{
-      height:100%; 
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-   }
-</style>

packages/agMultionInput/index.js

@@ -0,0 +1,9 @@
+import agMultionInput from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agMultionInput.install = function (Vue) {
+    Vue.component(agMultionInput.name, agMultionInput)
+}
+
+// 导出组件
+export default agMultionInput

packages/agMultionInput/src/index.vue

@@ -0,0 +1,293 @@
+<template>
+    <div class="ag-MultifunctionSearch"> 
+      <ag-select 
+      v-bind="$attrs"
+      v-on="listeners"
+       :options="$attrs.options||[]"
+      :value="value&&value[0]" 
+      @change="onSelect"
+      class="ag_select_group"
+       :style="{ width: `${swidth}px` }"
+    > 
+    </ag-select>  
+      <ag-input
+       v-if="!showExtra"
+        class="ag_input_group" 
+        :placeholder="$attrs.placeholder||'请输入内容'" 
+        :disabled="$attrs.disabled||imeipopover"  
+         v-bind="$attrs"
+          v-on="listeners"
+        :value="value[1]"
+        @input="onInputChange"
+       
+      > 
+      <template slot="prefix" >
+       
+        </template>
+      </ag-input>
+      <el-popover 
+      v-if="showExtra"
+      placement="bottom"
+      trigger="manual"
+      ref="popover"
+      popper-class="popperOptions"
+      v-model="imeipopover"
+    >
+   <template slot="reference"> 
+    <ag-input
+    class="ag_input_group"
+    :placeholder="$attrs.placeholder||'请输入内容'"   
+    :disabled="$attrs.disabled||imeipopover" 
+    v-bind="$attrs"
+    v-on="listeners"
+     :value="value&&value[1]"
+    @input="onInputChange"
+  >
+  <template slot="suffix" v-if="showExtra">
+    <i 
+    class="iconfont icon-icon-piliangcaozuo imeiicondefault"
+    :class="imeipopover && 'imeiiconActive'"
+    style="font-size: 12px;"
+    @click.prevent="imeiiconClick"
+  ></i>
+  </template>
+  </ag-input>
+   </template>
+      <el-input 
+        type="textarea"
+        :rows="12"
+        :value="value&&value[1]"
+        placeholder="一行一项，最多支持200行"
+        resize="none"
+        border="none"
+        class="textareainput"
+        @input="onInputChange"
+      />
+      <divider class="divider"></divider>
+      <div class="btnbox">
+        <div>
+          <el-button size="mini" @click="imeiclose"
+            >关闭</el-button
+          >
+        </div>
+        <div>
+          <el-button size="mini" @click="cleartext"
+            >清空</el-button
+          >
+          <el-button
+            size="mini"
+            type="primary"
+            plain
+            @click="search"
+            >查询</el-button
+          >
+        </div>
+      </div> 
+    </el-popover>
+    </div>
+  </template>
+  
+  <script>
+  import agSelect from "../../agSelect/src/index.vue";
+  import agInput from "../../agInput/src/index.vue";
+  import {Divider} from "element-ui";
+  
+  export default {
+    name: "agMultionInput",
+    components: {
+      agSelect,
+      agInput,
+      Divider
+    },
+    props: {
+      value: {
+        type: Array,
+        default: () => {
+          return [null, ''];
+        },
+      }, 
+      showExtra: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        values: [null, ""],
+        swidth:120,
+        inputValue:"",
+        selectvalue:"",
+        imeipopover:false,
+        listeners:{}
+      };
+    }, 
+    model: {  
+        prop: 'value', // 明确指定 prop 为 'value'  
+        event: 'change' // 自定义事件名，用于更新 value  
+    }, 
+    watch: {
+      value: {
+        handler(newVal) {  
+          if (!Array.isArray(newVal)) {
+            throw new Error("请传入数组");
+          }
+          let newselectValue=newVal[0];   
+          const find=this.$attrs.options&&this.$attrs.options.find((f)=>f.value==newselectValue);
+          if(find){  
+            let fontwidth=this.getStringWidth(find.label);
+            this.swidth=fontwidth>165?165:fontwidth;   
+          } 
+  
+        },
+        immediate: true,
+      },
+    },
+    mounted(){   
+      let newlist=Object.assign({},this.$listeners);
+      delete newlist.change;
+      delete newlist.input; 
+      this.listeners=newlist;  
+    },
+    methods: {
+      onSelect(value){
+        if(this.$listeners.change){
+          this.$emit("change", [value, this.value[1]||""]);
+        }
+   
+      },
+      onInputChange(val){ 
+        if(this.$listeners.change){
+          this.$emit("change", [this.value[0] ||"",val]);
+        }
+      },
+      getStringWidth(text) {
+          let font = "13px";
+          // 创建一个隐藏的元素
+          let element = document.createElement('span');
+          element.style.visibility = 'hidden';
+          element.style.whiteSpace = 'nowrap';
+          element.style.font = font; // 设置字体样式
+          element.textContent = text; 
+          // 将元素添加到文档中
+          document.body.appendChild(element); 
+          // 获取元素的宽度
+          let width = element.offsetWidth; 
+          // 移除元素
+          document.body.removeChild(element); 
+          return width+50;
+      },
+      imeiiconClick(){
+         this.imeipopover=!this.imeipopover;
+      },
+     
+      imeiclose(){
+         this.imeipopover=false;
+      },
+      cleartext(){
+         this.value[1]="";
+         this.$set(this.value,1,"");
+      },
+      search(){
+        this.imeipopover=false;
+        if(this.$listeners.onSrarch){
+          this.$emit("onSrarch", this.value);
+        }
+        
+      },
+      getAfterAgo(attr, prefix) {
+        const config = {};
+        for (const key in attr) {
+          if (attr.hasOwnProperty(key) && key.startsWith(prefix)) {
+            const newKey = key.substring(prefix.length);
+            config[newKey] = attr[key];
+          }
+        }
+        return config;
+      },
+    },
+  };
+  </script>
+  <style lang="scss">
+  .popperOptions {
+    min-width: 200px !important;
+    padding: 0px !important;
+  }
+  
+  </style>
+  <style scoped lang='scss'>
+  .ag-MultifunctionSearch {
+    display: flex;
+    align-items: center;  
+    }
+  
+  .imeiicondefault {
+    padding: 5px;
+    border-radius: 4px;
+    background: #f0f2f5;
+    cursor: pointer;
+  } 
+  .imeiiconActive {
+    cursor: pointer;
+    color: #409eff;
+    background: #e9f1fc;
+  } 
+    .divider {
+      margin: 0;
+    }
+    
+    .btnbox {
+      padding: 5px;
+      display: flex;
+      justify-content: space-between;
+    }
+   
+     ::v-deep{
+    
+      .ag_select_group{
+        .el-input__inner{
+          border:1px solid #e5e5e5;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0; 
+          outline:none;
+          &:focus{
+            border-color:#e5e5e5;
+          }
+        }
+      }
+      .ag_input_group{
+       .el-input__inner{
+          border:1px solid #e5e5e5;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          border-left:none;
+          outline:none;
+          &:focus{
+            border-color:#e5e5e5;
+          }
+        }
+      }
+      .el-select{
+        .el-input{
+          &.is-focus{ 
+            .el-input__inner{
+              border-color:#e5e5e5;
+            }
+          }
+        } 
+          &:hover{
+            .el-input__inner{
+              border-color:#e5e5e5;
+            }
+          }
+        } 
+      .el-textarea__inner{
+        border:none;
+      }
+      .el-input__suffix-inner{
+        height:100%; 
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+     }
+  </style>

packages/agSearch/index.js

@@ -0,0 +1,9 @@
+import agSearch from './src';
+
+// 为组件提供 install 安装方法，供按需引入
+agSearch.install = function (Vue) {
+    Vue.component(agSearch.name, agSearch);
+}
+
+// 导出组件
+export default agSearch;

packages/agSearch/src/index.vue

@@ -0,0 +1,229 @@
+<template>
+  <el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
+  <ag-row class="searchbox">
+   <ag-col v-for="item,index in data" :key="index" :span="item.span||24">
+       <el-form-item :prop="item.enName" >
+           <slot :name="item.soltName" v-if="item.soltName" :row="item"/> 
+              <div class="contentbox" v-else>
+                <ag-input v-model="formValue[item.enName]" type="textarea" v-bind="item"  v-if="item.type=='ag-textarea'" size="small" clearable></ag-input>
+               <ag-input v-model="formValue[item.enName]" v-bind="item"  v-if="item.type=='ag-input'" size="small" clearable></ag-input>
+               <ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/>
+               <ag-select v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" size="small" clearable/>
+               <el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" clearable>
+               <el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio> 
+               </el-radio-group>
+               <el-checkbox-group v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small" clearable>
+                  <el-checkbox v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox> 
+                </el-checkbox-group>
+                <el-input-number v-model="formValue[item.enName]" v-bind="item"  v-if="item.type=='ag-input-number'" clearable></el-input-number>
+                <el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'" clearable :style="{width:'100%'}"></el-cascader>
+                <el-switch
+              v-model="formValue[item.enName]"
+               v-bind="item" size="small" v-if="item.type=='ag-switch'&&formValue[item.enName]" >
+              </el-switch>
+              <el-slider v-model="formValue[item.enName]" 
+              v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
+              <el-time-select
+               :style="{width:'100%'}"
+              clearable
+               v-model="formValue[item.enName]"
+              v-bind="item" size="small" 
+              v-if="item.type=='ag-time-select'" 
+              :picker-options="item.options">
+            </el-time-select>
+           <ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'" clear isPre></ag-upload>
+           <el-rate v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-rate'" size="small"></el-rate>
+           <agColorPicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small"> 
+           </agColorPicker>
+           <el-transfer :data="item.data"  v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
+           <agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/> 
+           <ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/> 
+           <agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
+           <ag-mution-checkbox :datas="item.datas" v-bind="item"  :placeholder="item.placeholder" v-model="formValue[item.enName]" v-if="item.type=='ag-mution-checkbox'" size="small"> </ag-mution-checkbox>
+          <ag-multion-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" size="small"/> 
+          </div>
+          </el-form-item>  
+      </ag-col>  
+      <ag-col :span="4">
+        <el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
+          {{submittitle||'查询'}}
+         </el-button>
+         <el-button @click="onRest" size="small" class="submitbtn">
+         重置
+         </el-button>
+      </ag-col>
+  </ag-row>  
+  </el-form>
+</template>
+<script> 
+
+
+import agInput from './../../agInput/src/index.vue';
+import agDatePicker from './../../agDatePicker/src/index.vue';
+import agSelect from './../../agSelect/src/index.vue';
+import agRow from './../../agRow/src/index.vue';
+import agCol from './../../agCol/src/index.vue';
+import agUpload from './../../agUpload/src/index.vue';
+import agColorPicker from './../../agColorPicker/src/index.vue'; 
+import agNumberRange from './../../agNumberRange/src/index.vue';
+import agMultionInput from './../../agMultionInput/src/index.vue';
+import agQuery from './../../agQuery/src/index.vue';
+import agMultionDatePicker from '../../agMultionDatePicker';
+
+
+export default{
+  name:"agSearch",
+  components:{
+      agMultionDatePicker,
+      agInput:agInput,
+      agDatePicker,
+      agSelect,
+      agRow,
+      agCol,
+      agUpload:agUpload,
+      agColorPicker,
+      agNumberRange,
+      agMultionInput,
+      agQuery
+  },
+  props:{
+      submittitle:{
+          type:String,
+          default:'查询'
+      },
+      data:{
+          type:Array,
+          default(){
+              return []
+          }
+      },
+      span:{
+          type:Number,
+          default:24
+      }, 
+  },
+  data(){
+      return{
+          formValue:{
+               
+          }
+      }
+  }, 
+  model:{
+      prop:'value',
+      event:{
+          'onSubmit':'submit',
+          'onRest':'rest'
+      }
+  },
+  mounted(){ 
+      this.formValue=this.$attrs.value;  
+      setTimeout(()=>{
+          this.$refs.formref.clearValidate();
+      },1);
+      if(this.$refs.formref){
+          for(const key in this.$refs.formref){ 
+              if(!this[key]&&key!='value'){
+              this[key]=this.$refs.formref[key];
+              }   
+          }
+    } 
+    
+  },
+  watch:{
+      value(val){
+          this.formValue = val; 
+          setTimeout(()=>{
+              this.$refs.formref.clearValidate();
+          },1);
+      }
+  },
+  methods:{
+      onSubmit(){ 
+        if(this.$listeners.onSearch){
+          this.$emit('onSearch',this.formValue);
+          }
+      },
+      onRest(){
+        Object.keys(this.formValue).map((key,index)=>{
+            let itemvalue=Object.values(this.formValue)[index];
+            if(typeof(itemvalue)=="string"||typeof(itemvalue)=="number"){
+                this.formValue[key]=null;
+            }else{
+                this.formValue[key]=[];
+            } 
+        });
+        setTimeout(()=>{
+          this.$refs.formref.clearValidate();
+       },1);
+       if(this.$listeners.onRest){
+        this.$emit('onRest',this.formValue);
+       }
+       
+      }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.searchbox{
+  align-items: center;
+}
+  .footerbox{
+      margin-top:12px;
+      display:flex;
+      justify-content:center;
+      .submitbtn{
+          width:200px;
+      }
+  }
+  .el-form--inline{ 
+      .el-form-item{ 
+          display:flex;
+      } 
+     .el-form-item__content{
+          flex:1;
+          width:100%;
+      }
+  }  
+  .contentbox{
+         width:100%;
+         display: flex;
+         align-items: stretch;  
+  }
+  .flexcenter{
+      display: flex;
+      align-items: stretch;  
+  }
+  ::v-deep{ 
+     .el-form--inline{ 
+          .el-form-item{ 
+              display:flex;
+              align-items: center;
+              margin-bottom: 0px; 
+          } 
+          .el-form-item__content{
+              display:flex;
+              flex:1;
+              width:100%;
+              margin-left:0;
+              align-items: center;
+              margin-bottom: 0px; 
+          }
+      } 
+      .el-form-item{
+          width:100%;
+          margin-bottom: 0px; 
+          line-height:1;
+      }
+      .el-form-item__content{
+          flex:1;
+          display:flex;
+          width:100%;
+          align-items: center;
+          margin-left:0!important;
+          margin-bottom: 0px; 
+          line-height:1;
+      } 
+  }
+</style>

packages/index.js

@@ -12,11 +12,11 @@
 import agRow from './agRow';
 import agCol from './agCol';
 import agMutionCheckbox from './agMutionCheckbox';
-import agMultifunctionSearch from './agMultifunctionSearch';
+import agSearch from './agSearch';
 import agDatePicker from "./agDatePicker";
 import agNumberRange from "./agNumberRange";
 import agMultionDatePicker from "./agMultionDatePicker";
-
+import agMultionInput from "./agMultionInput";
 
   // 注册组件
  
@@ -36,9 +36,10 @@ import agMultionDatePicker from "./agMultionDatePicker";
     agRow,
     agDatePicker,
     agMutionCheckbox,
-    agMultifunctionSearch,
+    agSearch,
     agNumberRange,
-    agMultionDatePicker
+    agMultionDatePicker,
+    agMultionInput
   ]
   
   // 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）

src/App.vue

@@ -28,7 +28,7 @@
       </el-form-item>
     </el-form>
 
-    <ag-multifunction-search
+    <ag-multion-input
       size="small"
       ref="ttt"
       v-model="values"
@@ -38,7 +38,7 @@
       @change="onInputinput"
       @blur="onblur"
     >
-    </ag-multifunction-search>
+    </ag-multion-input>
     <ag-color-picker size="small" v-model="colorvalue"/>
   <agQuery :inputs="inputs" @onSearch="onSearch"/>
     <agTable :columns="columns" :data="tabledata" :currentPage="2" :pageSize="100" :total="500" >
@@ -52,9 +52,10 @@
     <agUpload @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :value="filelist">
       <div slot="tip">只能上传jpg/png文件，且不超过500kb</div> 
     </agUpload>
-    <ag-form :data="formdata" label-width="120px" label-position="right" v-model="formvalue"> 
+    <ag-form :data="formdata"  label-width="120px" label-position="left" v-model="formvalue"> 
     </ag-form>
     <ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch" v-model="checkvalue"> </ag-mution-checkbox>
+  
     <!-- <el-input agMultionCheckbox
       size="small"
       placeholder="请输入内容"
@@ -75,6 +76,7 @@
     :clearable="true"
     :range="true"
     :options="a_options"  />
+    <ag-search :data="searchdatas" v-model="searchvalue" @onRest="onRest" @onSearch="onSearch"/>
   </div>
 </template>
 
@@ -373,40 +375,24 @@ export default {
       ], 
       filelist:['https://git.aiguoai.com/assets/img/logo.svg'],
       formdata:[
-        {label:"订单编号",span:12,type:"ag-input",enName:'order_sn',value:'656',placeholder:'请输入洗碗机',size:'small',clearable:true,show:true,value:false,required:true,options:[{label:"是",value:'1'},{label:"否",value:'2'}]},
+        {label:"订单编号",span:10,type:"ag-input",enName:'order_sn',placeholder:'请输入洗碗机',size:'small',clearable:true,show:true,value:false,required:true,options:[{label:"是",value:'1'},{label:"否",value:'2'}]},
-        {label:"IMEI/机器编号",span:12,type:"ag-input-number",enName:'imei',value:'43543',placeholder:'请输入IMEI/机器编号',size:'small',clearable:true,max:10,min:2,step:2,show:true},
+        {label:"IMEI/机器编号",span:10,type:"ag-input-number",enName:'imei',labelWidth:'120px',placeholder:'请输入IMEI/机器编号',size:'small',clearable:true,max:10,min:2,step:2,show:true},
         {label:"质检码",span:12,type:"ag-rate",value:'',enName:'ser_sn',placeholder:'请输入质检码',size:'small',clearable:true,show:true,options:[{value:'1',label:'112'},{value:'2',label:'2223'}]},
         {label:"质检时间",span:12,type:"ag-multifunction-search",enName:'time',showAlpha:true,size:'small',colorFormat:'hsv',show:true},
-        {label:"头像",span:12,type:"ag-mution-checkbox",enName:'avatar',datas:[
+       
-        {
-          label:"分类", 
-          value:"class", 
-        },
-        {
-          label:"品牌", 
-          value:"brand",
-          placeholder:"请输入品牌"
-        },
-        {
-          label:"型号",
-          elem:'el-select',
-          value:"model",
-          options: []
-        },
-        {
-          label:"颜色",
-          elem:'el-select',
-          value:"color",
-          options:[]
-        },
-        {
-          label:"容量",
-          elem:'el-select',
-          value:"capacity",
-          options:[]
-        }
-      ],placeholder:'请输入质检码',size:'small',clearable:true,show:true,limit:4,multiple:true},
       ],
+      searchdatas:[
+        {label:"IMEI",span:4,type:"ag-input",enName:'order_sn',placeholder:'请输入洗碗机',size:'small',clearable:true,show:true,value:false,required:true,options:[{label:"是",value:'1'},{label:"否",value:'2'}]},
+        {label:"订单编号",span:4,type:"ag-input-number",enName:'imei',labelWidth:'120px',placeholder:'请输入IMEI/机器编号',size:'small',clearable:true,max:10,min:2,step:2,show:true},
+        {label:"质检码",span:4,type:"ag-rate",value:'',enName:'ser_sn',placeholder:'请输入质检码',size:'small',clearable:true,show:true,},
+        {label:"质检时间",span:6,type:"ag-multion-input",enName:'time',showAlpha:true,size:'small',colorFormat:'hsv',options:[{value:'1',label:'112'},{value:'2',label:'2223'}],show:true},
+      ],
+      searchvalue:{
+        order_sn:"11",
+        imei:'',
+        ser_sn:2,
+        timer:['1','2']
+      },
       formvalue:{
         order_sn:"11",
         imei:'',
@@ -462,6 +448,9 @@ export default {
     handleSizeChange() {},
     handleCurrentChange() {},
     handleClose() {},
+    onRest(val){
+      console.log(val,"onRest")
+    } 
   },
 };
 </script>