da

package.json

@@ -2,7 +2,7 @@
   "name": "ag-element-ui",
   "version": "0.1.0",
   "private": true,
-  "main": "./main.js",
+  "main": "lib/ag-element-ui.common.js",
   "scripts": {
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",

packages/agDatePicker/index.js

@@ -6,4 +6,4 @@ agDatePicker.install = function (Vue) {
 }
 
 // 导出组件
-export default agDatePicker
+export default agDatePicker;

packages/agDatePicker/src/index.vue

@@ -14,14 +14,11 @@
   />
 </template>
 
-<script>
+<script> 
-/**
- * agDatePicker 时间选择器
- */
 import isEmpty from "../../../src/utils/isEmpty";
 
 export default {
-  name: "agDatePicker",
+  name: "AgDatePicker",
   props: {
     range:false,
     showTime:false,

packages/agForm/src/index.vue

@@ -5,7 +5,7 @@
          <el-form-item v-bind="item" :prop="item.enName" >
              <slot :name="item.enName">
                  <ag-input v-model="formValue[item.enName]" v-bind="item"  v-if="item.type=='ag-input'"></ag-input>
-                 <agDatePicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'"/>
+                 <ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'"/>
                  <agSelect v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" />
                  <el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" >
                  <el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio> 

packages/agMultifunctionSearch/src/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="ag-MultifunctionSearch">
+  <div class="ag-MultifunctionSearch"> 
     <ag-select 
-      v-bind="$attrs"
+    v-bind="$attrs"
-      v-on="listeners"
+    v-on="listeners"
-      :value="values&&values[0]" 
+    :value="values&&values[0]" 
-      @change="onSelect"
+    @change="onSelect"
-      class="ag_select_group"
+    class="ag_select_group"
-       :style="{ width: `${swidth}px` }"
+     :style="{ width: `${swidth}px` }"
-    > 
+  > 
-    </ag-select>   
+  </ag-select>  
     <ag-input
      v-if="!showExtra"
       class="ag_input_group" 
@@ -20,6 +20,9 @@
       @input="onInputChange"
      
     > 
+    <template slot="prefix" >
+     
+      </template>
     </ag-input>
     <el-popover 
     v-if="showExtra"
@@ -244,6 +247,44 @@ export default {
   }
  
    ::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;
     }

packages/agMutionCheckbox/index.js

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

packages/agMutionCheckbox/src/index.vue

@@ -0,0 +1,357 @@
+<template>
+    <div class="ag-multion-checkbox">
+    <el-dropdown  
+     size="small"
+    trigger="click"
+    ref="multioncheckref"
+    @click.native="checkeddown"
+    :class="{ 'el-dropdown_active': !down }"
+    @visible-change="dropdownchange"
+    >
+        <span class="el-dropdown-link">
+            <span>
+              <span :class="{ color: checkedList.length }">{{ dropdownvalue }}</span
+              ><span class="list-length" v-if="valuelength >= 1"
+                >+ {{ valuelength }}</span
+              ></span
+            ><i
+              v-if="dropdownvalue == ''"
+              class="el-icon-arrow-up el-icon--right"
+              :class="{ 'rotate-arrow': down }"
+            ></i>
+            <i v-else class="el-icon-close el-icon--right" @click="clear"></i>
+          </span>
+    <el-dropdown-menu slot="dropdown">  
+            <el-input
+                placeholder="请输入内容"
+                v-model="seek"
+                size="small"
+                class="el_input"
+                @input="inputblur"
+                @keydown.enter.prevent="confirm()"
+            >
+                <i slot="prefix" class="el-input__icon el-icon-search"></i>
+            </el-input>
+            <div v-if="dataList && dataList.length" class="checkbox-group">
+                <div v-if="dataList && dataList.length > 1" class="all-checked">
+                  <el-checkbox
+                    :indeterminate="isIndeterminate"
+                    v-model="checkAll"
+                    @change="handleCheckAllChange"
+                    >全选</el-checkbox
+                  >
+                  /
+                  <span class="invertstatus" @click="handleCheckAllChange(!checkAll)">反选</span>
+                </div>
+                <el-checkbox-group
+                  class="checked-list"
+                  :class="{ 'top-height': dataList && dataList.length <= 1 }"
+                  v-model="checkedList"
+                  @change="handleCheckedCitiesChange"
+                >
+                  <div v-for="(el, id) in dataList" :key="id" class="setScore">
+                    <el-checkbox :label="el.value">{{ el.label }}</el-checkbox>
+                    <span @click="confirm(el, 'only')">仅筛选此项</span>
+                  </div>
+                </el-checkbox-group>
+              </div>
+              <div v-else class="nothing">暂无数据</div>
+              <div class="btnbox">
+                <div>
+                  <el-button size="mini" @click="cancel">取消</el-button>
+                  <el-button size="mini" type="primary" plain @click="confirm()"
+                    >确定</el-button
+                  >
+                </div>
+              </div> 
+        </el-dropdown-menu>
+    </el-dropdown>
+</div>
+</template>
+
+<script>
+ export default {
+    props: ["datas", "placeholder", "value"],
+    name: "AgMutionCheckbox",
+     data() {
+        return {
+            seek: "",
+            dropdownvalue:"",
+            valuelength: 0,
+            down: true,
+            checkAll: false,
+            checkedList: [],
+            dataList: [
+              
+            ], //渲染数据
+            isIndeterminate: false,
+            retract: false, 
+            olddatas:[
+                {label:"方法1",value:"1"},
+                {label:"方法2",value:"2"}
+            ]
+        };
+    },
+    mounted() { 
+        if(this.datas&&Array.isArray(this.datas)){
+                    this.dataList = this.datas;
+                    this.olddatas=Object.assign([],this.datas);
+                     this.checkedList = []; //清空旧值-解决出现累加问题
+                    if (this.checkAll && this.dataList) {
+                        this.checkedList=this.dataList.map((e) =>e.value);
+                       this.confirm();
+                    }
+                    if(this.value){
+                        this.checkedList=this.value;
+                    } 
+                }else{
+                    this.olddatas=Object.assign([],this.dataList);
+                }
+    },
+    watch: {
+        datas: {
+            handler(val) {
+                if(val&&Array.isArray(val)){
+                    this.dataList = val;
+                    this.olddatas=Object.assign([],val);
+                     this.checkedList = []; //清空旧值-解决出现累加问题
+                    if (this.checkAll&&this.dataList) {
+                        this.checkedList=this.dataList.map((e) =>e.value);
+                       this.confirm();
+                    }
+                    if(this.value){
+                        this.checkedList=this.value;
+                    }
+                } else{
+                    this.olddatas=Object.assign([],this.dataList);
+                }
+            },
+            deep: true,
+            immediate: true,
+        },
+    },
+    methods: {
+        clear(){
+            this.checkedList = []; 
+            this.isIndeterminate = false;
+            this.checkAll=false;
+        },
+        checkeddown(val){
+           console.log(val,"val")
+
+        },
+        dropdownchange(){
+            this.down = !this.down;
+        },
+        inputblur(val){
+         this.dataList=this.olddatas.filter((f)=>f.label.indexOf(val)>-1);
+
+        },
+        handleCheckAllChange(val){ 
+            this.checkedList = val ? this.olddatas.map((h)=>h.value) : []; 
+            this.isIndeterminate = false;
+            this.checkAll=val; 
+        },
+        confirm(e){  
+          
+
+            if(e&&e.label=="only"){
+                const filters=this.olddatas.filter((f)=>{
+                     return e.value.find((c)=>c==f.value);
+                });  
+                const [onedatas,...otherdatas]=filters;
+                this.valuelength=otherdatas.length;
+                this.dropdownvalue=onedatas.label;
+
+                if(this.$listeners.onSearch){
+                    this.$emit("onSearch",[e.value]);
+                } 
+            }else{
+                const filters=this.olddatas.filter((f)=>{
+                     return this.checkedList.find((c)=>c==f.value);
+                });  
+                const [onedatas,...otherdatas]=filters;
+                this.valuelength=otherdatas.length;
+                this.dropdownvalue=onedatas.label;
+                if(this.$listeners.onSearch){
+                    this.$emit("onSearch",this.checkedList);
+                } 
+            }
+            this.$refs.multioncheckref.hide();
+        }, 
+        handleCheckedCitiesChange(val){
+            if(val.length>0){ 
+                if(val.length==this.olddatas.length){
+                    this.isIndeterminate = false;
+                    this.checkAll=true;
+                }else{
+                    this.isIndeterminate = true;
+                } 
+            }else{
+                this.isIndeterminate = false;
+                this.checkAll=false;
+            } 
+        },
+        cancel(){ 
+            this.$refs.multioncheckref.hide();
+        }
+
+    }
+ };
+
+
+</script> 
+
+<style lang="scss" scoped>
+::v-deep .el_input {
+    padding: 0 10px;
+    .el-input__inner {
+      border-radius: 0px;
+      border: none;
+      border-bottom: 1px solid #dcdfe6;
+    }
+    .el-input__inner:hover {
+      border-bottom: 1px solid #409eff;
+    }
+  } 
+    .el-dropdown {
+        width: 100%;
+        height: 32px;
+        line-height: 32px;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+      }
+      
+      .el-dropdown:hover {
+        border: 1px solid #c0c4cc;
+      }
+      .el-dropdown_active {
+        border: 1px solid #409eff;
+      }
+      .el-dropdown_active:hover {
+        border: 1px solid #409eff;
+      }
+      .el-icon-arrow-up {
+        transform: rotate(0deg);
+        transition: transform 0.3s ease;
+      }
+      .rotate-arrow {
+        transform: rotate(180deg);
+        transition: transform 0.3s ease;
+      }
+     
+      .el-dropdown-menu {
+        min-width: 400px;
+        padding: 10px 0 0 0;
+      }
+      .checkbox-group {
+        overflow: hidden;
+        padding: 5px 0px 0;
+        box-sizing: border-box;
+      }
+      .all-checked { 
+        span {
+          font-size: 14px;
+          color: #606266;
+          font-weight: 500;
+          cursor: pointer;
+        }
+        .invertstatus:hover {
+          color: #409eff;
+        }
+      }
+      .checked-list {
+        max-height: 180px;
+        margin-top:5px;
+        overflow-y: auto;
+        padding: 5px 0;
+        box-sizing: border-box;
+      }
+      .top-height {
+        margin-top: 0px;
+      }
+      .el-checkbox-group {
+        display: flex;
+        flex-direction: column;
+      }
+      .el-checkbox {
+        margin-right: 0px !important;
+        padding: 5px 0px 5px 10px;
+        box-sizing: border-box;
+      }
+      .btnbox {
+        padding: 5px;
+        display: flex;
+        justify-content: right;
+        border-top: 1px solid #dcdfe6;
+      }
+      .el-dropdown-link {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10px;
+        box-sizing: border-box;
+        width: 100%;
+        height:100%;
+        min-width: 180px;
+        font-size: 13px;
+        font-weight: 500;
+        color: #c0c4cc;
+        cursor: pointer;
+      }
+      .list-length {
+        padding: 3px 7px;
+        margin-left: 10px;
+        border-radius: 4px;
+        color: #33333379;
+        background-color: #dcdfe6;
+      }
+      .color {
+        color: #333;
+        font-weight: normal;
+      }
+      :focus-visible {
+        outline: none;
+      }
+      .nothing {
+        min-height: 80px;
+        line-height: 80px;
+        text-align: center;
+        color: #c0c4cc;
+      }
+      .el-icon-close {
+        opacity: 0;
+      }
+      .el-icon-close:hover {
+        opacity: 1;
+      }
+      .setScore {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        font-size: 14px;
+        span {
+          display: none;
+          height: 30px;
+          line-height: 30px;
+          padding: 0 10px;
+          cursor: pointer;
+        }
+        ::v-deep .el-checkbox {
+          height: 30px;
+          line-height: 30px;
+          display: flex;
+          flex: 1;
+          align-items: center;
+        }
+      }
+      .setScore:hover {
+        background-color: rgba(192, 196, 204, 0.267);
+        span {
+          display: block;
+          color: #409eff;
+          height: 100%;
+        } 
+ } 
+</style>

packages/index.js

@@ -11,6 +11,11 @@
  import agPagination from './agPagination';
 import agRow from './agRow';
 import agCol from './agCol';
+import agMutionCheckbox from './agMutionCheckbox';
+import agMultifunctionSearch from './agMultifunctionSearch';
+import agDatePicker from "./agDatePicker";
+import agNumberRange from "./agNumberRange";
+
 
   // 注册组件
  
@@ -27,7 +32,12 @@ import agCol from './agCol';
     agTabs, 
     agPagination,
     agCol,
-    agRow 
+    agRow,
+    agDatePicker,
+    agMutionCheckbox,
+    agMultifunctionSearch,
+    agNumberRange
+    
   ]
   
   // 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
@@ -35,19 +45,20 @@ import agCol from './agCol';
     // 判断是否安装
     if (install.installed) return
     // 遍历注册全局组件
-    components.map(component => Vue.component(component.name, component))
+    components.forEach(component => {
+      Vue.component(component.name, component);
+    });
   }
   
   // 判断是否是直接引入文件
   if (typeof window !== 'undefined' && window.Vue) {
     install(window.Vue)
-  }
+  } 
-  
+
   export default {
+    version:'2.15.14',
     // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
     install,
-  }
-  export {
     // 以下是具体的组件列表
     agInput,
     agSelect,
@@ -60,5 +71,9 @@ import agCol from './agCol';
     agTabs, 
     agPagination,
     agCol,
-    agRow 
+    agRow,
+    agMutionCheckbox,
+    agMultifunctionSearch,
+    agDatePicker,
+    agNumberRange
   }

src/App.vue

@@ -2,8 +2,9 @@
   <div>
     <el-button type="success" @click="abb = true">点击打开 Dialog</el-button>
     <ag-dialog :visible.sync="abb"> </ag-dialog>
-    <ag-datePicker v-model="date_value" :showTime="true" :range="true" @change="onPicker">
+    <ag-date-picker  v-model="date_value" :showTime="true" :range="true" @change="onPicker">
-    </ag-datePicker>
+    </ag-date-picker>
+    
     <ag-input v-model="inputValue" placeholder="请输入" @change="onInputChange" ref="aginputref"> 
        </ag-input>
     <ag-select :options="a_options" v-model="value"> 
@@ -27,7 +28,7 @@
       </el-form-item>
     </el-form>
 
-    <ag-MultifunctionSearch
+    <ag-multifunction-search
       size="small"
       ref="ttt"
       v-model="values"
@@ -37,7 +38,8 @@
       @change="onInputinput"
       @blur="onblur"
     >
-    </ag-MultifunctionSearch>
+    </ag-multifunction-search>
+    <ag-color-picker size="small" v-model="colorvalue"/>
   <agQuery :inputs="inputs" @onSearch="onSearch"/>
     <agTable :columns="columns" :data="tabledata" :currentPage="2" :pageSize="100" :total="500" >
       <template #name="{row}">
@@ -50,10 +52,10 @@
     <agUpdate @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :value="filelist">
       <div slot="tip">只能上传jpg/png文件，且不超过500kb</div> 
     </agUpdate>
-    <ag-form :data="formdata" label-width="120px" label-position="right" v-model="formvalue">
+    <ag-form :data="formdata" label-width="120px" label-position="right" v-model="formvalue"> 
-
     </ag-form>
-    <!-- <el-input
+    <ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch"> </ag-mution-checkbox>
+    <!-- <el-input agMultionCheckbox
       size="small"
       placeholder="请输入内容"
       v-model="value"
@@ -72,18 +74,17 @@
 <script>
  import ElementUI from 'element-ui';
  import Vue from 'vue';
-import agDialog from "../packages/agDialog/src/index.vue";
+import agDialog from "../packages/agDialog/src/index.vue"; 
-import agDatePicker from "../packages/agDatePicker/src/index.vue";
 import agInput from "../packages/agInput/src/index.vue";
 import agSelect from "../packages/agSelect/src/index.vue";
 import agNumberRange from "../packages/agNumberRange/src/index.vue";
-import agCascadeOptional from "../packages/agCascadeOptional/src/index.vue";
+import agCascadeOptional from "../packages/agCascadeOptional/src/index.vue"; 
-import agMultifunctionSearch from "../packages/agMultifunctionSearch/src/index.vue";
 import agQuery from "../packages/agQuery/src/index.vue";
 import agTable from "../packages/agTable/src/index.vue";
 import vuedraggable from 'vuedraggable';
 import agElemUI from "../packages/index.js";
 
+
 Vue.use(ElementUI);
 Vue.use(agElemUI);
 // Vue.use(vuedraggable);
@@ -91,16 +92,8 @@ Vue.component('vuedraggable', window.vuedraggable)
 
 export default {
   
-  components: {
+  components: { 
-    agDialog,
-    agDatePicker,
-    agInput,
-    agSelect,
-    agNumberRange,
     agCascadeOptional,
-    agMultifunctionSearch,
-    agQuery,
-    agTable,
     vuedraggable
   },
   data() {
@@ -121,6 +114,7 @@ export default {
       // }
     };
     return {
+      colorvalue:"#ffffff",
       ruleForm: {
         pass: [],
       },
@@ -138,6 +132,10 @@ export default {
          {date: "2016-05-04", name: "王小虎3", address: "上海市普陀区金沙江路 1518 弄"},
          {date: "2016-05-05", name: "王小虎4", address: "上海市普陀区金沙江路 1518 弄"}
       ],
+      checklist:[
+                {label:"方法1",value:"1"},
+                {label:"方法2",value:"2"}
+            ],
       rules: {
         pass: [{ validator: validatePass, trigger: "blur" }],
       },
@@ -472,6 +470,9 @@ export default {
     submit() {
       this.$refs.ttt.values;
     },
+    onCheckSearch(val){
+      console.log(val,'onCheckSearch');
+    },
     changes(val) {
       console.log(val);
       console.log(999);
@@ -485,7 +486,7 @@ export default {
 
 <style lang="scss">
 body {
-  background: #918d8d;
+  background: #f8f8f8;
 }
 .div {
   span {

src/main.js

@@ -1,21 +0,0 @@
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-import Vue from 'vue';
-import App from './App.vue';
-import router from './router';
-import store from './store';
-import vuedraggable from 'vuedraggable';
-import agElemUI from "../packages/index.js";
-console.log('main.js', process.env);
-Vue.use(ElementUI);
-Vue.use(agElemUI);
-Vue.use(vuedraggable);
-
-
-
-new Vue({
-    el: '#app',
-    router,
-    store,
-    render: (h) => h(App)
-  })