From 756f3307f3337811538ebc0d4a78769aa4493114 Mon Sep 17 00:00:00 2001
From: ln1778 <465410291@qq.com>
Date: Thu, 12 Sep 2024 09:53:40 +0800
Subject: [PATCH] 22

---
 package.json                    |    2 +-
 packages/agForm/src/index.vue   |   77 +-
 packages/agUpload/index.js      |    8 +-
 packages/agUpload/src/index.vue | 1231 ++++++++++++++++---------------
 packages/index.js               |    6 +-
 src/App.vue                     |    4 +-
 6 files changed, 683 insertions(+), 645 deletions(-)

diff --git a/package.json b/package.json
index cb58651..d11e420 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ag-element-ui",
-  "version": "0.1.4", 
+  "version": "0.1.6", 
   "main": "packages/index.js",
   "scripts": {
     "dev": "vue-cli-service serve",
diff --git a/packages/agForm/src/index.vue b/packages/agForm/src/index.vue
index 45aab69..3e8be3c 100644
--- a/packages/agForm/src/index.vue
+++ b/packages/agForm/src/index.vue
@@ -3,39 +3,42 @@
     <ag-row>
      <ag-col v-for="item,index in data" :key="index" :span="item.span||24">
          <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>
-                 <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" >
+             <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/>
+                 <agSelect 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">
+                 <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'" ></el-input-number>
-                  <el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'"></el-cascader>
+                  <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></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]"
+                <el-slider v-model="formValue[item.enName]" 
                 v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
                 <el-time-select
+                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'"></ag-upload>
+             <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"/> 
-             <agMultifunctionSearch v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multifunction-search'" size="small"/> 
-             <agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small"/>
+             <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/> 
+             <agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
              <ag-mution-checkbox :datas="item.datas" :placeholder="item.placeholder" v-model="formValue[item.enName]" v-if="item.type=='ag-mution-checkbox'" size="small"> </ag-mution-checkbox>
-             </slot> 
+                </div>
             </el-form-item>  
         </ag-col>  
     </ag-row> 
@@ -89,7 +92,7 @@ export default{
         span:{
             type:Number,
             default:24
-        }
+        }, 
     },
     data(){
         return{
@@ -97,7 +100,7 @@ export default{
                  
             }
         }
-    },
+    }, 
     mounted(){ 
         this.formValue=this.$attrs.value; 
         if(this.$refs.formref){
@@ -109,13 +112,8 @@ export default{
     } 
     },
     watch:{
-        data(val){
-            this.formValue = {};
-            val.map((h)=>{
-                if(h.value){
-                    this.formValue[h.enName] = h.value;
-                } 
-            });
+        value(val){
+            this.formValue = val; 
         }
     },
     methods:{
@@ -136,4 +134,37 @@ export default{
             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;  
+    }
+    ::v-deep{ 
+       .el-form--inline{ 
+            .el-form-item{ 
+                display:flex;
+            } 
+            .el-form-item__content{
+                flex:1;
+                width:100%;
+            }
+        } 
+        .el-form-item{
+            width:100%;
+            margin-bottom: 12px; 
+        }
+        .el-form-item__content{
+            flex:1;
+            width:100%;
+        } 
+    }
 </style>
diff --git a/packages/agUpload/index.js b/packages/agUpload/index.js
index 36d3bd7..4237547 100644
--- a/packages/agUpload/index.js
+++ b/packages/agUpload/index.js
@@ -1,9 +1,9 @@
-import agUpdate from './src'
+import agUpload from './src'
 
 // 为组件提供 install 安装方法，供按需引入
-agUpdate.install = function (Vue) {
-    Vue.component(agUpdate.name, agUpdate)
+agUpload.install = function (Vue) {
+    Vue.component(agUpload.name, agUpload)
 }
 
 // 导出组件
-export default agUpdate;
+export default agUpload;
diff --git a/packages/agUpload/src/index.vue b/packages/agUpload/src/index.vue
index ab1ede4..7fbb7b0 100644
--- a/packages/agUpload/src/index.vue
+++ b/packages/agUpload/src/index.vue
@@ -1,617 +1,624 @@
 <template>
-   <div class="uploadbox"> 
-    <div class="uploadimgbox" :style="{height:width+'px'}" v-if="listType=='picture-card'"> 
-          <div v-for="img,index in imageList" :key="index" :style="{width:width+'px'}" :draggable="dragmove" class="imgitem" :class="dragmove&&dragmoveclass"  @dragstart="onDragstart" @dragenter="onDragenter" @dragover="onDragover" @dragend="onDragend" @dragleave="onMouseup" >
-            <slot name="file" :file="img">
-            <img :src="img.url" class="img" v-if="img.type.indexOf('image')>-1"/>
-            <div v-else class="filetext">
-              <div class="filetitletext">文件</div>
-             <div>{{img.name}}</div>
-            </div>
-            <div class="uploadimgmask" v-if="clear||isPrew" >
-              <i class="el-icon-search" v-if="isPrew&&img.type.indexOf('image')>-1" @click="handlePictureCardPreview(img)"></i>
-              <i class="el-icon-delete" v-if="clear" @click="handleRemove(img.raw,index)"></i>
-            </div>
-          </slot>
-          </div>  
-      <div class="uploadcontain" :style="{height:width+'px',aspectRatio:isDrap?4/3:1/1}"
-       :draggable="isDrap"  
-      @dragover.prevent  
-      @dragenter.prevent  
-      @drop="onUploadDrap" 
-      v-if="limit>imageList.length">
-        <label for="uploadinput" class="uploadlabel"  @click="onInputClick">
-          <slot>
-            <i class="el-icon-plus"></i>
-            <span class="draptiptext">{{isDrap?'拖拽上传':'上传'}}</span>
-          </slot> 
-          </label> 
-      </div>
-    </div> 
-    <div class="uploadtextbox" v-if="listType=='text'||listType=='picture'">
-      <div class="uploadtextcontain" 
-       :draggable="isDrap"  
-      @dragover.prevent  
-      @dragenter.prevent  
-      @drop="onUploadDrap" 
-       >
-        <label for="uploadinput" class="uploadlabel" @click="onInputClick"  >
-          <slot>
-            <el-button type="primary" size="small"><i class="el-icon-plus"></i> {{isDrap?'拖拽上传':'上传'}}</el-button> 
-          </slot> 
-          </label> 
-      </div> 
-      <slot name="tip">
-      </slot> 
-      <ul class="uploadtextlist" :class="'upload-list--'+listType"> 
-        <li v-for="img,index in imageList" :key="index" class="uploadtextitem" >
-          <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>
-        </slot>
-          <el-popconfirm
-              :title="`确定移除${img.name}吗？`"
-              @confirm="handleRemove(img.raw,index)"
-            >
-          <i class="el-icon-close ag-icon-close"  slot="reference"></i>
-          </el-popconfirm>
-       
-        </li> 
-      </ul>
-    </div>
-    <input type="file" style="display:none;" :multiple="limit>1&&$attrs.multiple" :accept="$attrs.accept" id="uploadinput" @change="onUpdate" ref="fileinputref"/>
-    <el-dialog :visible.sync="dialogVisible">
-    <img width="100%" :src="dialogImageUrl" alt="">
-    </el-dialog> 
-   </div>
-  </template>
-  
-  <script>   
-  export default {
-    name: "agUpdate",  
-    props:{
-      isPrew:{
-        type:Boolean,
-        default:true
-      },
-      clear:{
-        type:Boolean,
-        default:true
-      },
-      width:{
-        type:Number,
-        default:80
-      },
-      dragmove:{
-        type:Boolean,
-        default:false
-      },
-      isDrap:{
-        type:Boolean,
-        default:false
-      },
-      limit:{
-        type:Number,
-        default:1
-      },
-     
-      fileList:{
-        type:Array,
-        default(){
-          return [];
-        }
-      },
-      listType:{
-        type:String,
-        default:'picture-card'
-      } 
-    },
-    model: {  
-      prop: 'fileList', // 明确指定 prop 为 'value'  
-      event: 'onUpload' // 自定义事件名，用于更新 value  
-  }, 
-    mounted() {    
-        if(this.fileList.length>0){
-          let list=[];
-          this.fileList.map((h)=>{
-            if(typeof(h)=='object'){
-              list.push(h);
-            }else{
-              let imgurl=h.split("/"); 
-              let filename=imgurl[imgurl.length-1];
-              let extarr=h.split(".");
-              let extname=extarr[extarr.length-1];
-              if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
-                list.push({
-                  name:filename,
-                  url:h,
-                  type:'image/'+extname.toLowerCase(),
-                  raw:null
-                });
-              }else{
-                list.push({
-                  name:filename,
-                  url:h,
-                  type:'other/'+extname.toLowerCase(),
-                  raw:null
-                });
-              } 
-            }
-          });
-          this.imageList=list; 
-        }  
-      }, 
-    watch:{
-      fileList(val){ 
-        if(val.length>0){
-          let list=[];
-          val.map((h)=>{
-            if(typeof(h)=='object'){
-              list.push(h);
-            }else{
-              let imgurl=h.split("/"); 
-              let filename=imgurl[imgurl.length-1];
-              let extarr=h.split(".");
-              let extname=extarr[extarr.length-1];
-              if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
-                list.push({
-                  name:filename,
-                  url:h,
-                  type:'image/'+extname.toLowerCase(),
-                  raw:null
-                });
-              }else{
-                list.push({
-                  name:filename,
-                  url:h,
-                  type:'other/'+extname.toLowerCase(),
-                  raw:null
-                });
-              } 
-            }
-          });
-          this.imageList=list; 
-        }  
-      }
-    },
-    data() {
-      return {
-        dialogImageUrl: '',
-        dialogVisible: false,
-        imageList:[],
-        sourceNode:null,
-        partNode:null,
-        selectTop:false, 
-        drag:false,
-        dragmoveclass:'imghover'
-      };
-    },  
-    methods: {
-      handleRemove(file,index) {    
-          this.imageList=this.imageList.filter((item,inkey)=>{
-            return inkey !== index;
-          }); 
-          this.$emit('onRemove',file,this.imageList); 
-      },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-      },
-      onUpdate(e){ 
-        if(this.limit<=this.imageList.length){
-          return;
-        }
-       try{
-        let uplist=[];  
-        let files=[...e.target.files].slice(0,this.limit-this.imageList.length);  
-       const find=files.find((f,i)=>{
-        if(this.$attrs.accept){
-            let acceptarr=this.$attrs.accept.split(",");
-            if(!acceptarr.includes(f.type)){ 
-              if(this.$listeners.onError){
-                this.$emit('onError',`其中第${i+1}张图片类型错误`);
-              } 
-              return true;
-            }
-          }
-          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"`);
-              } 
-              return true;
-            }
-          }
-       }); 
-       if(find){
-        return;
-       }
-     
-        files.map((item,index) => { 
-          let filerender=new FileReader();
-          filerender.onload=function(e){  
-            uplist.push({
-              name:item.name,
-              url:e.target.result,
-              type:item.type,
-              size:item.size,
-              raw:item
-            });
-            if(files.length==uplist.length){ 
-              if(this.$listeners.onUpload){
-                this.fileList.push(...uplist); 
-                this.$emit('onUpload',this.fileList,uplist); 
-              }else{
-                this.imageList.push(...uplist); 
-              } 
-            } 
-          }.bind(this);
-          filerender.readAsDataURL(item);
-        }); 
-       }catch(e){ 
-        if(this.$listeners.onError){
-          this.$emit('onError',e);
-        } 
-       } 
-      }, 
-     onDragstart(e){ 
-      this.sourceNode=e.target;
-       this.partNode=e.target.parentNode;   
-      e.target.classList.add("tabsbg"); 
-      setTimeout(()=>{
-        e.target.classList.remove("tabsbg");
-        e.target.classList.add("moving");
-      },1);
-    },
-    onDragenter(e){ 
-      e.preventDefault(); 
-      if(!this.dragmove){
-        return;
-      } 
-      if(this.partNode===e.target||e.target===this.sourceNode){ 
-        return 
-      } 
-      const childrens=[...this.partNode.children];
-      let thistarget=childrens.find((f)=>f==e.target);
-      if(!thistarget){
-        thistarget=e.target.parentNode;
-      }
-      if(!thistarget){
-         return 
-      }
-     
-      const sourceIndex=childrens.indexOf(this.sourceNode);
-      const targetIndex=childrens.indexOf(thistarget); 
-     if(sourceIndex<targetIndex){ 
-      this.partNode.insertBefore(this.sourceNode,thistarget.nextElementSibling); 
-     }else{ 
-      this.partNode.insertBefore(this.sourceNode,thistarget);   
-     }  
-       
-    },
-    onDragover(e){
-     e.preventDefault();   
-    },
-    onMouseup(e){ 
-      e.preventDefault(); 
-      if(!this.dragmove){
-        return;
-      }  
-      if(this.partNode===e.target||e.target===this.sourceNode){ 
-        return 
-      } 
-      this.sourceNode.classList.remove("moving");  
-    },
-    onDragend(e){
-      e.preventDefault();  
-      if(!this.dragmove){
-        return;
-      }
-          e.target.classList.remove("moving");  
-          e.target.classList.remove("tabsbg");  
-          this.sourceNode.classList.remove("moving"); 
-          if(this.partNode===e.target||e.target===this.sourceNode){ 
-        return 
-      }
-        const childrens=[...this.partNode.children];  
-        
-        const sourceIndex=childrens.indexOf(this.sourceNode);
-          const item = this.imageList.splice(sourceIndex, 1)[0];  
-          this.imageList.splice(sourceIndex, 0, item);  
-          this.sourceNode=null;
-          this.partNode=null;   
-    },
-    onUploadDrap(e){   
-      e.preventDefault(); // 阻止默认行为（打开文件）  
-      e.stopPropagation(); // 停止事件冒泡   
-      if(this.drap){
-        return; 
-      }
-      const files = event.dataTransfer.files;   
-        this.onUpdate({target:{files: files}});
-    },
-    onInputClick(e){ 
-      e.preventDefault(); // 阻止默认行为（打开文件）  
-      e.stopPropagation(); // 停止事件冒泡   
-      this.$refs.fileinputref.click();
-    }
-    },
-  };
-  </script>
-  
-  <style lang="scss" scoped>
-  .uploadcontain{
-    position: relative;
-    width:100px;
-    aspect-ratio: 1/1;
-    border-radius: 4px;
-    background-color: #fff;
-    cursor: pointer; 
-    overflow: hidden; 
-    .uploadlabel{
-      font-size: 16px;
-      color:#97a8be;
-      display: block;
-      width:100%;
-      cursor: pointer; 
-      height:100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      .draptiptext{
-        font-size:13px;
-        color:#666;
-        text-align: center;
-        margin-top: 5px;
-      }
-    }
-  }
-  .uploadimgbox{
-    position: relative;    
-    width: auto;
-    display: flex;
-    align-items: center; 
-    gap:5px;
-    .imgitem{
-      position: relative;
-      width:100px;
-      cursor: pointer; 
-      background: #fff;
-      border-radius: 4px;
-      overflow: hidden;
-      aspect-ratio: 1/1;
-      transition: all .3s;
-      &.imghover:hover{
-        cursor: move;
-      }
-      &.tabsbg{
-        border-radius:6px 6px 0 0;
-        background:#fff;
-        overflow:hidden; 
-      }
-      &.opcacityzero{
-        opacity: 0;
-      }
-      &.moving{ 
-        opacity: 0;
-        visibility: hidden; 
-      } 
-
-      img{
-        display: block;
-        aspect-ratio: 1/1;
-        width:100%;
-      }
-      .uploadimgmask{
-        position: absolute;
-        top:0;
-        display: none;
-        left: 0;
-        width:100%;
-        height:100%;
-        background-color: rgba(0,0,0,.3); 
-        align-items: center;
-        justify-content: center;
-        gap:6px;
-        z-index: 1;
-        i{
-          font-size: 20px;
-          color:#fff;
-          cursor: pointer;
-        }
-      }
-      &:hover{ 
-        .uploadimgmask{
-          display: flex;
-        }
-      }
-    }
-    .filetext{
-      font-size:12px;
-      display: flex; 
-      justify-content: center;
-      flex-direction: column;
-      padding:5px;
-      box-sizing: border-box;
-      overflow: hidden;
-      height:100%;
-      white-space: nowrap; /* 文本不换行 */  
-      overflow: hidden; /* 隐藏溢出的内容 */  
-      text-overflow: ellipsis; 
-      text-align: center;
-      .filetitletext{
-        font-size:15px;
-      }
-    }
-  }
-.uploadtextbox{
-  .uploadtextcontain{
-    .uploadtextcontaindefaultbtn{
-      display:flex;
-      align-items:center;
-      gap:5px;
-      background: #fff;
-      width:fit-content;
-      padding:5px 12px;
-      box-sizing: border-box;
-      border-radius:4px;
-      font-size:13px;
-    } 
-  }
-  .uploadtextlist{
-    display: block;
-    list-style-type: disc; 
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    padding-inline-start: 40px;
-    unicode-bidi: isolate;
-    margin: 0;
-    padding: 0;
-    list-style: none; 
-
-    .upload-list--text{
-      &:first-child{
-        margin-top: 10px;
-      }
-      position: relative;
-      list-style: none;
-      transition: all .5s cubic-bezier(.55,0,.1,1);
-      font-size: 14px;
-      color: #606266;
-      line-height:1;
-      margin-top: 5px;
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      box-sizing: border-box;
-      cursor: pointer;
-      border-radius: 4px;
-      width: 100%;
-      &:hover{
-        background-color: #f5f7fa;
-        .ag-icon-close{
-          display:inline-block;
-        }
-      }
+  <div class="uploadbox"> 
+   <div class="uploadimgbox" :style="{height:width+'px'}" v-if="listType=='picture-card'"> 
+         <div v-for="img,index in imageList" :key="index" :style="{width:width+'px'}" :draggable="dragmove" class="imgitem" :class="dragmove&&dragmoveclass"  @dragstart="onDragstart" @dragenter="onDragenter" @dragover="onDragover" @dragend="onDragend" @dragleave="onMouseup" >
+           <slot name="file" :file="img">
+           <img :src="img.url" class="img" v-if="img.type.indexOf('image')>-1"/>
+           <div v-else class="filetext">
+             <div class="filetitletext">文件</div>
+            <div>{{img.name}}</div>
+           </div>
+           <div class="uploadimgmask" v-if="clear||isPrew" >
+             <i class="el-icon-search" v-if="isPrew&&img.type.indexOf('image')>-1" @click="handlePictureCardPreview(img)"></i>
+             <i class="el-icon-delete" v-if="clear" @click="handleRemove(img.raw,index)"></i>
+           </div>
+         </slot>
+         </div>  
+     <div class="uploadcontain" :style="{height:width+'px',aspectRatio:isDrap?4/3:1/1}"
+      :draggable="isDrap"  
+     @dragover.prevent  
+     @dragenter.prevent  
+     @drop="onUploadDrap" 
+     v-if="limit>imageList.length">
+       <label for="uploadinput" class="uploadlabel"  @click="onInputClick">
+         <slot>
+           <i class="el-icon-plus"></i>
+           <span class="draptiptext">{{isDrap?'拖拽上传':'上传'}}</span>
+         </slot> 
+         </label> 
+     </div>
+   </div> 
+   <div class="uploadtextbox" v-if="listType=='text'||listType=='picture'">
+     <div class="uploadtextcontain" 
+      :draggable="isDrap"  
+     @dragover.prevent  
+     @dragenter.prevent  
+     @drop="onUploadDrap" 
+      >
+       <label for="uploadinput" class="uploadlabel" @click="onInputClick"  >
+         <slot>
+           <el-button type="primary" size="small"><i class="el-icon-plus"></i> {{isDrap?'拖拽上传':'上传'}}</el-button> 
+         </slot> 
+         </label> 
+     </div> 
+     <slot name="tip">
+     </slot> 
+     <ul class="uploadtextlist" :class="'upload-list--'+listType"> 
+       <li v-for="img,index in imageList" :key="index" class="uploadtextitem" >
+         <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>
+       </slot>
+         <el-popconfirm
+             :title="`确定移除${img.name}吗？`"
+             @confirm="handleRemove(img.raw,index)"
+           >
+         <i class="el-icon-close ag-icon-close"  slot="reference"></i>
+         </el-popconfirm>
       
-      .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;
-          color: #909399;
-          line-height: inherit;
-          &:hover{
-            color: #409eff;
-             cursor: pointer;
-          }
-        } 
+       </li> 
+     </ul>
+   </div>
+   <input type="file" style="display:none;" :multiple="limit>1&&$attrs.multiple" :accept="$attrs.accept" id="uploadinput" @change="onUpdate" ref="fileinputref"/>
+   <el-dialog :visible.sync="dialogVisible">
+   <img width="100%" :src="dialogImageUrl" alt="">
+   </el-dialog> 
+  </div>
+ </template>
+ 
+ <script>   
+ export default {
+   name: "agUpload",  
+   props:{
+     isPrew:{
+       type:Boolean,
+       default:true
+     },
+     clear:{
+       type:Boolean,
+       default:true
+     },
+     width:{
+       type:Number,
+       default:80
+     },
+     dragmove:{
+       type:Boolean,
+       default:false
+     },
+     isDrap:{
+       type:Boolean,
+       default:false
+     },
+     limit:{
+       type:Number,
+       default:1
+     },
+    
+     fileList:{
+       type:Array,
+       default(){
+         return [];
+       }
+     },
+     listType:{
+       type:String,
+       default:'picture-card'
+     } 
+   },
+   model: {  
+     prop: 'fileList', // 明确指定 prop 为 'value'  
+     event: 'onUpload' // 自定义事件名，用于更新 value  
+ }, 
+   mounted() {    
+       if(this.fileList.length>0){
+         let list=[];
+         this.fileList.map((h)=>{
+           if(typeof(h)=='object'){
+             list.push(h);
+           }else{
+             let imgurl=h.split("/"); 
+             let filename=imgurl[imgurl.length-1];
+             let extarr=h.split(".");
+             let extname=extarr[extarr.length-1];
+             if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
+               list.push({
+                 name:filename,
+                 url:h,
+                 type:'image/'+extname.toLowerCase(),
+                 raw:null
+               });
+             }else{
+               list.push({
+                 name:filename,
+                 url:h,
+                 type:'other/'+extname.toLowerCase(),
+                 raw:null
+               });
+             } 
+           }
+         });
+         this.imageList=list; 
+       }  
+     }, 
+   watch:{
+     fileList(val){ 
+       if(val.length>0){
+         let list=[];
+         val.map((h)=>{
+           if(typeof(h)=='object'){
+             list.push(h);
+           }else{
+             let imgurl=h.split("/"); 
+             let filename=imgurl[imgurl.length-1];
+             let extarr=h.split(".");
+             let extname=extarr[extarr.length-1];
+             if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
+               list.push({
+                 name:filename,
+                 url:h,
+                 type:'image/'+extname.toLowerCase(),
+                 raw:null
+               });
+             }else{
+               list.push({
+                 name:filename,
+                 url:h,
+                 type:'other/'+extname.toLowerCase(),
+                 raw:null
+               });
+             } 
+           }
+         });
+         this.imageList=list; 
+       }  
+     }
+   },
+   data() {
+     return {
+       dialogImageUrl: '',
+       dialogVisible: false,
+       imageList:[],
+       sourceNode:null,
+       partNode:null,
+       selectTop:false, 
+       drag:false,
+       dragmoveclass:'imghover'
+     };
+   },  
+   methods: {
+     handleRemove(file,index) {    
+         this.imageList=this.imageList.filter((item,inkey)=>{
+           return inkey !== index;
+         }); 
+         this.$emit('onRemove',file,this.imageList); 
+     },
+     handlePictureCardPreview(file) {
+       this.dialogImageUrl = file.url;
+       this.dialogVisible = true;
+     },
+     onUpdate(e){ 
+       if(this.limit<=this.imageList.length){
+         return;
+       }
+      try{
+       let uplist=[];  
+       let files=[...e.target.files].slice(0,this.limit-this.imageList.length);  
+      const find=files.find((f,i)=>{
+       if(this.$attrs.accept){
+           let acceptarr=this.$attrs.accept.split(",");
+           if(!acceptarr.includes(f.type)){ 
+             if(this.$listeners.onError){
+               this.$emit('onError',`其中第${i+1}张图片类型错误`);
+             } 
+             return true;
+           }
+         }
+         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"`);
+             } 
+             return true;
+           }
+         }
+      }); 
+      if(find){
+       return;
       }
-      .el-icon-close{
-        position: relative; 
-        right: 5px;
-        cursor: pointer;
-        opacity: .75;
-        color: #606266; 
-        display:none;
-      }
-    }
-  }
-  .upload-list--picture{
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    .uploadtextitem{
-      overflow: hidden;
-      position: relative;
-      z-index: 0;
-      background-color: #fff;
-      border: 1px solid #c0ccda;
-      border-radius: 6px;
-      box-sizing: border-box;
-      margin-top: 10px;
-      padding: 10px 10px 10px 90px;
-      height: 92px;
-      gap:10px;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      &:hover{
-        .ag-icon-close{
-          display:inline-block;     
-        }
-      }
-      .ag-upload-list__item-thumbnail{
-        vertical-align: middle;
-        display: inline-block;
-        width: 70px;
-        height: 70px;
-        float: left;
-        position: relative;
-        z-index: 1;
-        margin-left: -80px;
-        background: #fff;
-      }
-      .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;
-        margin-top: 0;
-        text-decoration: none;
-        .ag-icon-document{
-          display:none;
-        }
-        &:hover{
-          color: #409eff;
-           cursor: pointer;
-        } 
-      }
-
-      .ag-icon-close{ 
-        position: absolute;
-        font-family: element-icons !important; 
-        font-style: normal;
-        font-weight: 400;
-        font-variant: normal;
-        text-transform: none;
-        line-height: 1;
-        vertical-align: baseline;
-        display: none;
-        -webkit-font-smoothing: antialiased; 
-        line-height: 1;
-        top: 5px;
-        right: 5px;
-        cursor: pointer;
-        opacity: .75;
-        color: #606266;
-      }
-    }
+    
+       files.map((item,index) => { 
+         let filerender=new FileReader();
+         filerender.onload=function(e){  
+           uplist.push({
+             name:item.name,
+             url:e.target.result,
+             type:item.type,
+             size:item.size,
+             raw:item
+           });
+           if(files.length==uplist.length){ 
+             if(this.$listeners.onUpload){
+               this.fileList.push(...uplist); 
+               this.$emit('onUpload',this.fileList,uplist); 
+             }else{
+               this.imageList.push(...uplist); 
+             } 
+           } 
+         }.bind(this);
+         filerender.readAsDataURL(item);
+       }); 
+      }catch(e){ 
+       if(this.$listeners.onError){
+         this.$emit('onError',e);
+       } 
+      } 
+     }, 
+    onDragstart(e){ 
+     this.sourceNode=e.target;
+      this.partNode=e.target.parentNode;   
+     e.target.classList.add("tabsbg"); 
+     setTimeout(()=>{
+       e.target.classList.remove("tabsbg");
+       e.target.classList.add("moving");
+     },1);
+   },
+   onDragenter(e){ 
+     e.preventDefault(); 
+     if(!this.dragmove){
+       return;
+     } 
+     if(this.partNode===e.target||e.target===this.sourceNode){ 
+       return 
+     } 
+     const childrens=[...this.partNode.children];
+     let thistarget=childrens.find((f)=>f==e.target);
+     if(!thistarget){
+       thistarget=e.target.parentNode;
+     }
+     if(!thistarget){
+        return 
+     }
+    
+     const sourceIndex=childrens.indexOf(this.sourceNode);
+     const targetIndex=childrens.indexOf(thistarget); 
+    if(sourceIndex<targetIndex){ 
+     this.partNode.insertBefore(this.sourceNode,thistarget.nextElementSibling); 
+    }else{ 
+     this.partNode.insertBefore(this.sourceNode,thistarget);   
+    }  
+      
+   },
+   onDragover(e){
+    e.preventDefault();   
+   },
+   onMouseup(e){ 
+     e.preventDefault(); 
+     if(!this.dragmove){
+       return;
+     }  
+     if(this.partNode===e.target||e.target===this.sourceNode){ 
+       return 
+     } 
+     this.sourceNode.classList.remove("moving");  
+   },
+   onDragend(e){
+     e.preventDefault();  
+     if(!this.dragmove){
+       return;
+     }
+         e.target.classList.remove("moving");  
+         e.target.classList.remove("tabsbg");  
+         this.sourceNode.classList.remove("moving"); 
+         if(this.partNode===e.target||e.target===this.sourceNode){ 
+       return 
+     }
+       const childrens=[...this.partNode.children];  
+       
+       const sourceIndex=childrens.indexOf(this.sourceNode);
+         const item = this.imageList.splice(sourceIndex, 1)[0];  
+         this.imageList.splice(sourceIndex, 0, item);  
+         this.sourceNode=null;
+         this.partNode=null;   
+   },
+   onUploadDrap(e){   
+     e.preventDefault(); // 阻止默认行为（打开文件）  
+     e.stopPropagation(); // 停止事件冒泡   
+     if(this.drap){
+       return; 
+     }
+     const files = event.dataTransfer.files;   
+       this.onUpdate({target:{files: files}});
+   },
+   onInputClick(e){ 
+     e.preventDefault(); // 阻止默认行为（打开文件）  
+     e.stopPropagation(); // 停止事件冒泡   
+     this.$refs.fileinputref.click();
+   }
+   },
+ };
+ </script>
+ 
+ <style lang="scss" scoped>
+ .uploadcontain{
+   position: relative;
+   width:100px;
+   aspect-ratio: 1/1;
+   border-radius: 4px;
+   background-color: #fff;
+   cursor: pointer; 
+   overflow: hidden; 
+   .uploadlabel{
+     font-size: 16px;
+     color:#97a8be;
+     display: block;
+     width:100%;
+     cursor: pointer; 
+     height:100%;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     flex-direction: column;
+     .draptiptext{
+       font-size:13px;
+       color:#666;
+       text-align: center;
+       margin-top: 5px;
+     }
+   }
+ }
+ .uploadimgbox{
+   position: relative;    
+   width: auto;
+   display: flex;
+   align-items: center; 
+   gap:5px;
+   .imgitem{
+     position: relative;
+     width:100px;
+     cursor: pointer; 
+     background: #fff;
+     border-radius: 4px;
+     overflow: hidden;
+     aspect-ratio: 1/1;
+     transition: all .3s;
+     &.imghover:hover{
+       cursor: move;
+     }
+     &.tabsbg{
+       border-radius:6px 6px 0 0;
+       background:#fff;
+       overflow:hidden; 
+     }
+     &.opcacityzero{
+       opacity: 0;
+     }
+     &.moving{ 
+       opacity: 0;
+       visibility: hidden; 
+     } 
+
+     img{
+       display: block;
+       aspect-ratio: 1/1;
+       width:100%;
+     }
+     .uploadimgmask{
+       position: absolute;
+       top:0;
+       display: none;
+       left: 0;
+       width:100%;
+       height:100%;
+       background-color: rgba(0,0,0,.3); 
+       align-items: center;
+       justify-content: center;
+       gap:6px;
+       z-index: 1;
+       i{
+         font-size: 20px;
+         color:#fff;
+         cursor: pointer;
+       }
+     }
+     &:hover{ 
+       .uploadimgmask{
+         display: flex;
+       }
+     }
+   }
+   .filetext{
+     font-size:12px;
+     display: flex; 
+     justify-content: center;
+     flex-direction: column;
+     padding:5px;
+     box-sizing: border-box;
+     overflow: hidden;
+     height:100%;
+     white-space: nowrap; /* 文本不换行 */  
+     overflow: hidden; /* 隐藏溢出的内容 */  
+     text-overflow: ellipsis; 
+     text-align: center;
+     .filetitletext{
+       font-size:15px;
+     }
+   }
+ }
+.uploadtextbox{
+ .uploadtextcontain{
+   .uploadtextcontaindefaultbtn{
+     display:flex;
+     align-items:center;
+     gap:5px;
+     background: #fff;
+     width:fit-content;
+     padding:5px 12px;
+     box-sizing: border-box;
+     border-radius:4px;
+     font-size:13px;
+   } 
+ }
+ .uploadtextlist{
+   display: block;
+   list-style-type: disc; 
+   margin-inline-start: 0px;
+   margin-inline-end: 0px;
+   padding-inline-start: 40px;
+   unicode-bidi: isolate;
+   margin: 0;
+   padding: 0;
+   list-style: none; 
+   margin-top:12px;
+
+   
+ } 
+ .upload-list--text{
+   margin: 0;
+   padding: 0;
+   list-style: none;
+   &:first-child{
+     margin-top: 10px;
+   }
+
+   .uploadtextitem{
+     position: relative;
+     list-style: none;
+     transition: all .5s cubic-bezier(.55,0,.1,1);
+     font-size: 14px;
+     color: #606266;
+     line-height:1;
+     margin-top: 5px;
+     position: relative;
+     display: flex;
+     align-items: center;
+     justify-content: space-between;
+     box-sizing: border-box;
+     cursor: pointer;
+     border-radius: 4px;
+     width: 100%;
+     &:hover{
+       background-color: #f5f7fa;
+       .ag-icon-close{
+         display:inline-block;
+       }
+     } 
+   }
+   .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;
+       color: #909399;
+       line-height: inherit;
+       &:hover{
+         color: #409eff;
+          cursor: pointer;
+       }
+     } 
+   .el-icon-close{
+     position: relative; 
+     right: 5px;
+     cursor: pointer;
+     opacity: .75;
+     color: #606266; 
+     display:none;
+   }
+ }
+   }
+ .upload-list--picture{
+   margin: 0;
+   padding: 0;
+   list-style: none;
+   .uploadtextitem{
+     overflow: hidden;
+     position: relative;
+     z-index: 0;
+     background-color: #fff;
+     border: 1px solid #c0ccda;
+     border-radius: 6px;
+     box-sizing: border-box;
+     margin-top: 10px;
+     padding: 10px 10px 10px 90px;
+     height: 92px;
+     gap:10px;
+     display: flex;
+     align-items: center;
+     cursor: pointer;
+     &:hover{
+       .ag-icon-close{
+         display:inline-block;     
+       }
+     }
+     .ag-upload-list__item-thumbnail{
+       vertical-align: middle;
+       display: inline-block;
+       width: 70px;
+       height: 70px;
+       float: left;
+       position: relative;
+       z-index: 1;
+       margin-left: -80px;
+       background: #fff;
+     }
+     .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;
+       margin-top: 0;
+       text-decoration: none;
+       .ag-icon-document{
+         display:none;
+       }
+       &:hover{
+         color: #409eff;
+          cursor: pointer;
+       } 
+     }
+
+     .ag-icon-close{ 
+       position: absolute;
+       font-family: element-icons !important; 
+       font-style: normal;
+       font-weight: 400;
+       font-variant: normal;
+       text-transform: none;
+       line-height: 1;
+       vertical-align: baseline;
+       display: none;
+       -webkit-font-smoothing: antialiased; 
+       line-height: 1;
+       top: 5px;
+       right: 5px;
+       cursor: pointer;
+       opacity: .75;
+       color: #606266;
+     }
    }
-}
-  ::v-deep {
-    .el-table {
-      width: 100%;
-    }
   }
-  </style>
-  
\ No newline at end of file
+}
+ ::v-deep {
+   .el-table {
+     width: 100%;
+   }
+ }
+ </style>
+ 
\ No newline at end of file
diff --git a/packages/index.js b/packages/index.js
index dbdd0c7..b14551d 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -1,7 +1,7 @@
 	// 导入组件
   import agInput from './agInput/index';
   import agSelect from './agSelect/index';
-  import agUpdate from './agUpload';
+  import agUpload from './agUpload';
   import agForm from './agForm';
   import agColorPicker from './agColorPicker';
  import agQuery from './agQuery';
@@ -23,7 +23,7 @@ import agNumberRange from "./agNumberRange";
   const components = [
     agInput,
     agSelect,
-    agUpdate,
+    agUpload,
     agForm,
     agColorPicker,
     agQuery,
@@ -62,7 +62,7 @@ import agNumberRange from "./agNumberRange";
     // 以下是具体的组件列表
     agInput,
     agSelect,
-    agUpdate,
+    agUpload,
     agForm,
     agColorPicker,
     agQuery,
diff --git a/src/App.vue b/src/App.vue
index 28951c3..23c1ac3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -49,9 +49,9 @@
         <div>{{row.date}} </div>
        </template> 
     </agTable>
-    <agUpdate @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :value="filelist">
+    <agUpload @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :value="filelist">
       <div slot="tip">只能上传jpg/png文件，且不超过500kb</div> 
-    </agUpdate>
+    </agUpload>
     <ag-form :data="formdata" label-width="120px" label-position="right" v-model="formvalue"> 
     </ag-form>
     <ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch" v-model="checkvalue"> </ag-mution-checkbox>