22

package.json

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

packages/agForm/src/index.vue

@@ -8,7 +8,7 @@
                     <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/>
-                 <agSelect v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" 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>

packages/agSelect/src/index.vue

@@ -1,22 +1,20 @@
 <template>
-  <div>
+  <el-select 
-    <el-select 
+  class="ag_select"
-    class="ag_select"
+  :style="{ width: `100%` }"
-    :style="{ width: `100%` }"
+  :value="selectValue" 
-    :value="selectValue" 
+  ref="apselectref"
-    ref="apselectref"
+  v-bind="$attrs"
-    v-bind="$attrs"
+  v-on="$listeners" 
-    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
-    <el-option
+    v-for="item in options"
-      v-for="item in options"
+    :key="item.value"
-      :key="item.value"
+    :label="item.label"
-      :label="item.label"
+    :value="item.value"
-      :value="item.value"
+  ></el-option>
-    ></el-option>
+</el-select> 
-  </el-select> 
-  </div>
 </template>
 
 <script>
@@ -74,6 +72,7 @@ export default {
 ::v-deep {
   .ag_select{
     min-width: 90px;
+    width:100%;
   }
   .el-input__icon {
     font-size: 16px !important;

packages/agUpload/src/index.vue

@@ -45,18 +45,31 @@
      </slot> 
      <ul class="uploadtextlist" :class="'upload-list--'+listType"> 
        <li v-for="img,index in imageList" :key="index" class="uploadtextitem" >
+        <div class="ag-upload-list__item-namebox" @click="handlePictureCardPreview(img)">
+         <slot name="icon">
+         <i class="el-icon-document ag-icon-document"></i>
+       </slot>
          <slot name="file" :file="img">
            <img v-if="listType=='picture'" :src="img.url" class="ag-upload-list__item-thumbnail" />
-         <a class="ag-upload-list__item-name" @click="handlePictureCardPreview(img)"><i class="el-icon-document ag-icon-document"></i>{{img.name}}
+           <a class="ag-upload-list__item-name" >{{img.name}}</a>
-         </a>
        </slot>
+        </div>
+        <div class="uploadrightbox">
+         <slot name="status" :file="img">
+           <span class="uploadstatusbpx"> 
+              <i v-if="img.status==='uploading'" class="el-icon-loading uploadingicon" ></i>
+             <i v-if="img.status==='success'" class="el-icon-circle-check statusicon"></i>
+             <i v-if="img.status==='failed'" class="el-icon-circle-close failedicon"></i>
+             <span v-if="img.msg" class="uploadmsg">{{img.msg}}</span> 
+           </span>
+         </slot>
          <el-popconfirm
              :title="`确定移除${img.name}吗？`"
              @confirm="handleRemove(img.raw,index)"
            >
          <i class="el-icon-close ag-icon-close"  slot="reference"></i>
          </el-popconfirm>
-      
+        </div> 
        </li> 
      </ul>
    </div>
@@ -210,7 +223,7 @@
            let acceptarr=this.$attrs.accept.split(",");
            if(!acceptarr.includes(f.type)){ 
              if(this.$listeners.onError){
-               this.$emit('onError',`其中第${i+1}张图片类型错误`);
+               this.$emit('onError',`其中第${i+1}张文件类型错误`);
              } 
              return true;
            }
@@ -218,7 +231,7 @@
          if(this.$attrs.maxSize){ 
            if(f.size>this.$attrs.maxSize){
              if(this.$listeners.onError){
-               this.$emit('onError',`其中第${i+1}张图片大小不能超过${this.$attrs.maxSize/1024/1024}M"`);
+               this.$emit('onError',`其中第${i+1}张文件大小不能超过${this.$attrs.maxSize/1024/1024}M"`);
              } 
              return true;
            }
@@ -229,27 +242,50 @@
       }
     
        files.map((item,index) => { 
-         let filerender=new FileReader();
+         if(item.type.indexOf("image")>-1){
-         filerender.onload=function(e){  
+           let filerender=new FileReader();
-           uplist.push({
+           filerender.onload=function(e){  
-             name:item.name,
+             uplist.push({
-             url:e.target.result,
+               name:item.name,
-             type:item.type,
+               url:e.target.result,
-             size:item.size,
+               type:item.type,
-             raw:item
+               size:item.size,
-           });
+               raw:item,
-           if(files.length==uplist.length){ 
+                status:'init',
-             if(this.$listeners.onUpload){
+                msg:""
-               this.fileList.push(...uplist); 
+             });
-               this.$emit('onUpload',this.fileList,uplist); 
+             if(files.length==uplist.length){ 
-             }else{
+               if(this.$listeners.onUpload){
-               this.imageList.push(...uplist); 
+                 this.fileList.push(...uplist); 
+                 this.$emit('onUpload',this.fileList,uplist); 
+               }else{
+                 this.imageList.push(...uplist); 
+               } 
              } 
-           } 
+           }.bind(this);
-         }.bind(this);
+           filerender.readAsDataURL(item);
-         filerender.readAsDataURL(item);
+         }else{
+           uplist.push({
+               name:item.name, 
+               type:item.type,
+               size:item.size,
+               raw:item,
+               status:'init',
+               msg:""
+             });
+             if(files.length==uplist.length){  
+               if(this.$listeners.onUpload){ 
+                 this.fileList.push(...uplist); 
+                 this.$emit('onUpload',this.fileList,uplist); 
+               }else{
+                 this.imageList.push(...uplist); 
+               } 
+             } 
+         } 
        }); 
-      }catch(e){ 
+      }catch(err){ 
+       console.log(err,"uploaderr");
+       
        if(this.$listeners.onError){
          this.$emit('onError',e);
        } 
@@ -448,6 +484,7 @@
  }
 .uploadtextbox{
  .uploadtextcontain{
+   margin-bottom:7px;
    .uploadtextcontaindefaultbtn{
      display:flex;
      align-items:center;
@@ -492,6 +529,7 @@
      margin-top: 5px;
      position: relative;
      display: flex;
+     padding: 5px 10px;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
@@ -505,18 +543,21 @@
        }
      } 
    }
+   .ag-upload-list__item-namebox{
+     margin-right: 40px;
+     padding-left: 4px;
+     line-height: 1.8;
+   }
    .ag-upload-list__item-name{
      text-decoration: none;
      color: #606266;
      display: block; 
-     margin-right: 40px;
      overflow: hidden; 
-     padding-left: 4px;
      text-overflow: ellipsis;
      transition: color .3s;
      white-space: nowrap;
      font-size: 14px; 
-     line-height: 1.8;
+   
      .ag-icon-document{
        height: 100%;
        margin-right: 7px;
@@ -566,23 +607,28 @@
        display: inline-block;
        width: 70px;
        height: 70px;
-       float: left;
+       float:left;
        position: relative;
        z-index: 1;
        margin-left: -80px;
        background: #fff;
      }
+
+   .ag-upload-list__item-namebox{
+     margin-right: 40px;
+     padding-left: 4px;
+     line-height: 1.8;
+   }
      .ag-upload-list__item-name{
        flex:1;
        color: #606266;
        display: block; 
-       margin-right: 40px;
        overflow: hidden; 
-       padding-left: 4px;
        text-overflow: ellipsis;
        transition: color .3s;
        white-space: nowrap;
        line-height: 70px;
+       font-size:14px;
        margin-top: 0;
        text-decoration: none; 
        .ag-icon-document{
@@ -614,6 +660,26 @@
      }
    }
   }
+}
+.uploadrightbox{
+ display:flex;
+ justify-content:flex-end;
+ align-items: center;
+ .uploadstatusbpx{
+   margin-right: 7px;
+ }
+}
+.uploadingicon{
+ color:#409eff;
+}
+.failedicon{
+ color:red;
+}
+.statusicon{
+ color:green;
+}
+.uploadmsg{
+ margin:0 7px;
 }
  ::v-deep {
    .el-table {