Merge pull request 'liunan' (#10) from liunan into master

Reviewed-on: #10

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-element-ui",
-  "version": "0.1.25", 
+  "version": "0.1.20", 
   "main": "packages/index.js",
   "scripts": {
     "dev": "vue-cli-service serve",

packages/agForm/src/index.vue

@@ -1,172 +1,46 @@
 <template>
     <el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
     <ag-row>
-      <ag-col v-for="(item, index) in data" :key="index" :span="item.span || 24">
+     <ag-col v-for="item,index in data" :key="index" :span="item.span||24">
-        <el-form-item v-bind="item" :prop="item.enName">
+         <el-form-item v-bind="item" :prop="item.enName" >
-          <slot :name="item.soltName" v-if="item.soltName" :row="item" />
+             <slot :name="item.soltName" v-if="item.soltName" :row="item"/> 
                 <div class="contentbox" v-else>
-            <ag-input
+                    <ag-input v-model="formValue[item.enName]" type="textarea" v-bind="item"  v-if="item.type=='ag-textarea'" size="small" clearable></ag-input>
-              v-model="formValue[item.enName]"
+                 <ag-input v-model="formValue[item.enName]" v-bind="item"  v-if="item.type=='ag-input'" size="small" clearable></ag-input>
-              type="textarea"
+                 <ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/>
-              v-bind="item"
+                 <ag-select v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" size="small" clearable/>
-              v-if="item.type == 'ag-textarea'"
+                 <el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" clearable>
-              size="small"
+                 <el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio> 
-              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
+                 <el-checkbox-group v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small" clearable>
-              v-bind="item"
+                    <el-checkbox v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox> 
-              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
+                  <el-input-number v-model="formValue[item.enName]" v-bind="item"  v-if="item.type=='ag-input-number'" clearable></el-input-number>
-              v-model="formValue[item.enName]"
+                  <el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'" clearable :style="{width:'100%'}"></el-cascader>
-              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"
+                 v-bind="item" size="small" v-if="item.type=='ag-switch'&&formValue[item.enName]" >
-              size="small"
-              v-if="item.type == 'ag-switch' && formValue[item.enName]"
-            >
                 </el-switch>
-            <el-slider
+                <el-slider v-model="formValue[item.enName]" 
-              v-model="formValue[item.enName]"
+                v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
-              v-bind="item"
-              size="small"
-              v-if="item.type == 'ag-slider'"
-            ></el-slider>
                 <el-time-select
-              :style="{ width: '100%' }"
+                 :style="{width:'100%'}"
                 clearable
                  v-model="formValue[item.enName]"
-              v-bind="item"
+                v-bind="item" size="small" 
-              size="small"
+                v-if="item.type=='ag-time-select'" 
-              v-if="item.type == 'ag-time-select'"
+                :picker-options="item.options">
-              :picker-options="item.options"
-            >
               </el-time-select>
-            <ag-upload
+             <ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'" clear isPre></ag-upload>
-              v-bind="item"
+             <el-rate v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-rate'" size="small"></el-rate>
-              v-model="formValue[item.enName]"
+             <agColorPicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small"> 
-              v-if="item.type == 'ag-upload'"
-              @onError="$listeners.onError"
-              clear
-              isPre
-              @onUpload="item.onUpload"
-            ></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
+             <el-transfer :data="item.data"  v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
-              :data="item.data"
+             <agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/> 
-              v-bind="item"
+             <ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/> 
-              v-model="formValue[item.enName]"
+             <agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
-              v-if="item.type == 'ag-transfer'"
+             <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>
-              size="small"
+            <ag-multion-date-picker  v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" 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>
-          <div v-if="item.tip" class="tipbox">
-            <slot name="tip" :row="item"> {{ item.tip }}</slot>
             </div>
             </el-form-item>  
         </ag-col>  
@@ -174,149 +48,144 @@
     <div class="footerbox" v-if="$listeners.onSubmit">
         <slot name="button" :value="formValue">
             <el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
-          {{ submittitle || "提交" }}
+              {{submittitle||'提交'}}
              </el-button>
      </slot>
         </div>
     </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: "agForm",
+import agInput from './../../agInput/src/index.vue';
-  components: {
+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:"agForm",
+    components:{
         agMultionDatePicker,
-    agInput: agInput,
+        agInput:agInput,
         agDatePicker,
         agSelect,
         agRow,
         agCol,
-    agUpload: agUpload,
+        agUpload:agUpload,
         agColorPicker,
         agNumberRange,
         agMultionInput,
-    agQuery,
+        agQuery
     },
-  props: {
+    props:{
-    submittitle: {
+        submittitle:{
-      type: String,
+            type:String,
-      default: "提交",
+            default:'提交'
         },
-    data: {
+        data:{
-      type: Array,
+            type:Array,
-      default() {
+            default(){
-        return [];
+                return []
+            }
+        },
+        span:{
+            type:Number,
+            default:24
         }, 
     },
-    span: {
+    data(){
-      type: Number,
+        return{
-      default: 24,
+            formValue:{
+                 
+            }
+        }
     }, 
-  },
+    mounted(){ 
-  data() {
+        this.formValue=this.$attrs.value;  
-    return {
+        setTimeout(()=>{
-      formValue: {},
-    };
-  },
-  mounted() {
-    this.formValue = this.$attrs.value;
-    setTimeout(() => {
             this.$refs.formref.clearValidate();
-    }, 1);
+        },1);
-    if (this.$refs.formref) {
+        if(this.$refs.formref){
-      for (const key in this.$refs.formref) {
+            for(const key in this.$refs.formref){ 
-        if (!this[key] && key != "value") {
+                if(!this[key]&&key!='value'){
-          this[key] = this.$refs.formref[key];
+                this[key]=this.$refs.formref[key];
                 }   
             }
       } 
+      
     },
-  watch: {
+    watch:{
-    value(val) {
+        value(val){
             this.formValue = val; 
-      setTimeout(() => {
+            setTimeout(()=>{
                 this.$refs.formref.clearValidate();
-      }, 1);
+            },1);
+        }
     },
+    methods:{
+        onSubmit(){ 
+            this.$emit('onSubmit',this.formValue)
+        }
     },
-  methods: {
+}
-    onSubmit() {
-      this.$emit("onSubmit", this.formValue);
-    },
-  },
-};
 </script>
 
 <style lang="scss" scoped>
-.footerbox {
+    .footerbox{
-  margin-top: 12px;
+        margin-top:12px;
-  display: flex;
+        display:flex;
-  justify-content: center;
+        justify-content:center;
-  .submitbtn {
+        .submitbtn{
-    width: 200px;
+            width:200px;
         }
-}
-.el-form--inline {
-  .el-form-item {
-    display: flex;
     }
-  .el-form-item__content {
+    .el-form--inline{ 
-    flex: 1;
+        .el-form-item{ 
-    width: 100%;
+            display:flex;
         } 
-}
+       .el-form-item__content{
-.contentbox {
+            flex:1;
-  width: 100%;
+            width:100%;
+        }
+    }  
+    .contentbox{
+           width:100%;
            display: flex;
            align-items: stretch;  
-}
+    }
-.flexcenter {
+    .flexcenter{
         display: flex;
         align-items: stretch;  
-}
-.tipbox {
-  width: 100%;
-  color: red;
-}
-::v-deep {
-  .el-form--inline {
-    .el-form-item {
-      display: flex;
     }
-    .el-form-item__content {
+    ::v-deep{ 
-      display: flex;
+       .el-form--inline{ 
-      flex: 1;
+            .el-form-item{ 
-      width: 100%;
+                display:flex;
-      flex-wrap: wrap;
+            } 
-      margin-left: 0;
+            .el-form-item__content{
+                display:flex;
+                flex:1;
+                width:100%;
+                margin-left:0;
             }
         } 
-  .el-form-item {
+        .el-form-item{
-    width: 100%;
+            width:100%;
             margin-bottom: 12px; 
         }
-  .el-form-item__content {
+        .el-form-item__content{
-    flex: 1;
+            flex:1;
-    display: flex;
+            display:flex;
-    flex-wrap: wrap;
+            width:100%;
-    width: 100%;
+            margin-left:0!important;
-    margin-left: 0 !important;
         } 
-  .el-radio-button__inner,
-  .el-radio-group {
-    display: flex;
-    align-items: center;
     }
-}
 </style>

packages/agSelect/src/index.vue

@@ -2,20 +2,20 @@
   <el-select 
   class="ag_select"
   :style="{ width: `100%` }"
+  :value="selectValue" 
   ref="apselectref"
-    :size="$attrs.size || 'small'"
+  :size="$attrs.size||'small'"
   v-bind="$attrs"
   v-on="$listeners" 
-  >
+>  
-    <slot v-for="(_, name) in $slots" :name="name" :slot="name"> </slot>
+<slot v-for="(_,name) in $slots" :name="name"  :slot="name"> </slot> 
   <el-option
-      v-for="(item, index) in options"
+    v-for="item in options"
-      :key="index"
+    :key="item.value"
-      :disabled="item.disabled"
     :label="item.label"
     :value="item.value"
   ></el-option>
-  </el-select>
+</el-select> 
 </template>
 
 <script>
@@ -24,7 +24,7 @@ export default {
   props: {
     width: {
       type: Number,
-      default: 0,
+      default:0,
     },
     options: {
       type: Array,
@@ -32,28 +32,48 @@ export default {
         return [];
       },
     }, 
+    value:{ 
+      default: () =>'',
+    }
   }, 
-
   data() {
-    return {};
+    return {
+      selectValue:""
+    };
   },
-  mounted() {
+  mounted(){ 
-    if (this.$refs.apselectref) {
+    if(this.$refs.apselectref){
-      for (const key in this.$refs.apselectref) {
+      for(const key in this.$refs.apselectref){ 
-        if (!this[key] && key != "value") {
+        if(!this[key]&&key!='value'){
-          this[key] = this.$refs.apselectref[key];
+          this[key]=this.$refs.apselectref[key];
         } 
       }
     } 
   },
+  watch: {
+    value: {
+      handler(newVal) {  
+        let newselectValue=newVal; 
+        const find=this.options.find((f)=>f.value==newselectValue);
+        if(find){  
+            this.selectValue=newselectValue;
+        }else{
+          this.selectValue="";
+        } 
+      },
+      immediate: true,
+    },
+  }, 
+  methods: {
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 ::v-deep {
-  .ag_select {
+  .ag_select{
     min-width: 90px;
-    width: 100%;
+    width:100%;
   }
   .el-input__icon {
     font-size: 16px !important;