22

packages/agDatePicker/src/index.vue

@@ -240,7 +240,7 @@ export default {
         if(!newVal){
           return
         }
-        let defaultWidth = this.range ?this.showTime?"330px":"170px" : this.showTime?"190px":"140px";
+        let defaultWidth = this.range ?this.showTime?"330px":"200px" : this.showTime?"190px":"150px";
         this.width = defaultWidth; 
       },
       immediate: true,

packages/agMultifunctionSearch/src/index.vue

@@ -12,7 +12,7 @@
     <ag-input
      v-if="!showExtra"
       class="ag_input_group" 
-      placeholder="请输入内容" 
+      :placeholder="$attrs.placeholder||'请输入内容'" 
       :disabled="$attrs.disabled||imeipopover"  
        v-bind="$attrs"
         v-on="listeners"
@@ -35,7 +35,7 @@
  <template slot="reference"> 
   <ag-input
   class="ag_input_group"
-  placeholder="请输入内容"   
+  :placeholder="$attrs.placeholder||'请输入内容'"   
   :disabled="$attrs.disabled||imeipopover" 
   v-bind="$attrs"
   v-on="listeners"

packages/agMultionDattePicker/index.js

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

packages/agMultionDattePicker/src/index.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="ag-MultifunctionSearch"> 
+      <ag-select 
+      v-bind="$attrs"
+      v-on="listeners"
+      :value="values&&values[0]" 
+      @change="onSelect"
+      class="ag_select_group"
+       :style="{ width: `${swidth}px` }"
+    > 
+    </ag-select>  
+
+      <ag-date-picker 
+        class="ag_input_group" 
+        :placeholder="$attrs.placeholder||'请选择时间'" 
+        :disabled="$attrs.disabled"  
+         v-bind="$attrs"
+          v-on="listeners" 
+        :value="value[1]"
+        @change="onInputChange" 
+      >  
+      </ag-date-picker> 
+    </div>
+  </template>
+  
+  <script>
+  import agSelect from "../../agSelect/src/index.vue"; 
+  import agDatePicker from "../../agDatePicker/src/index.vue"; 
+  
+  export default {
+    name: "agMultionDattePicker",
+    components: {
+      agSelect,
+      agDatePicker, 
+    },
+    props: {
+      value: { 
+        default: () => {
+          return [null, []];
+        },
+      },
+      options: {
+        type: Array,
+        default: () => {
+          return [];
+        },
+      }, 
+    },
+    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.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.values[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/index.js

@@ -15,6 +15,7 @@ import agMutionCheckbox from './agMutionCheckbox';
 import agMultifunctionSearch from './agMultifunctionSearch';
 import agDatePicker from "./agDatePicker";
 import agNumberRange from "./agNumberRange";
+import agMultionDattePicker from "./agMultionDattePicker";
 
 
   // 注册组件
@@ -36,8 +37,8 @@ import agNumberRange from "./agNumberRange";
     agDatePicker,
     agMutionCheckbox,
     agMultifunctionSearch,
-    agNumberRange
+    agNumberRange,
-    
+    agMultionDattePicker
   ]
   
   // 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
@@ -60,20 +61,5 @@ import agNumberRange from "./agNumberRange";
     // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
     install,
     // 以下是具体的组件列表
-    agInput,
+    ...components
-    agSelect,
-    agUpload,
-    agForm,
-    agColorPicker,
-    agQuery,
-    agTable,
-    agDialog,
-    agTabs, 
-    agPagination,
-    agCol,
-    agRow,
-    agMutionCheckbox,
-    agMultifunctionSearch,
-    agDatePicker,
-    agNumberRange
   }

src/App.vue

@@ -68,6 +68,13 @@
       </el-select>
       <el-button slot="append" icon="el-icon-search"></el-button>
     </el-input> -->
+    <ag-multion-datte-picker size="small"
+    ref="ttt"
+    v-model="datevalues"
+    :showExtra="true"
+    :clearable="true"
+    :range="true"
+    :options="a_options"  />
   </div>
 </template>
 
@@ -138,6 +145,7 @@ export default {
       checkvalue:[],
       value: "选项1",
       a_value: "59584",
+      datevalues:["4",["2022-12-12","2022-12-13 "]],
       values: ["4",""], 
       options: [
         {