22

package.json

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

packages/agForm/src/index.vue

@@ -1,46 +1,172 @@
 <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">
           <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
-                 <ag-input v-model="formValue[item.enName]" v-bind="item"  v-if="item.type=='ag-input'" size="small" clearable></ag-input>
+              v-model="formValue[item.enName]"
-                 <ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/>
+              type="textarea"
-                 <ag-select v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" size="small" clearable/>
+              v-bind="item"
-                 <el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" clearable>
+              v-if="item.type == 'ag-textarea'"
-                 <el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio> 
+              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
+            />
+            <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 v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small" clearable>
+            <el-checkbox-group
-                    <el-checkbox v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox> 
+              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'" clearable></el-input-number>
+            <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>
+              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
+              :style="{ width: '100%' }"
+            ></el-cascader>
             <el-switch
               v-model="formValue[item.enName]"
-                 v-bind="item" size="small" v-if="item.type=='ag-switch'&&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-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
+              v-model="formValue[item.enName]"
+              v-bind="item"
+              size="small"
+              v-if="item.type == 'ag-slider'"
+            ></el-slider>
             <el-time-select
               :style="{ width: '100%' }"
               clearable
               v-model="formValue[item.enName]"
-                v-bind="item" size="small" 
+              v-bind="item"
+              size="small"
               v-if="item.type == 'ag-time-select'"
-                :picker-options="item.options">
+              :picker-options="item.options"
+            >
             </el-time-select>
-             <ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'" clear isPre></ag-upload>
+            <ag-upload
-             <el-rate v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-rate'" size="small"></el-rate>
+              v-bind="item"
-             <agColorPicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small"> 
+              v-model="formValue[item.enName]"
+              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 :data="item.data"  v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
+            <el-transfer
-             <agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/> 
+              :data="item.data"
-             <ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/> 
+              v-bind="item"
-             <agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
+              v-model="formValue[item.enName]"
-             <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>
+              v-if="item.type == 'ag-transfer'"
-            <ag-multion-date-picker  v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" size="small"/> 
+              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>
@@ -48,27 +174,24 @@
     <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 agInput from './../../agInput/src/index.vue';
+import agSelect from "./../../agSelect/src/index.vue";
-import agDatePicker from './../../agDatePicker/src/index.vue';
+import agRow from "./../../agRow/src/index.vue";
-import agSelect from './../../agSelect/src/index.vue';
+import agCol from "./../../agCol/src/index.vue";
-import agRow from './../../agRow/src/index.vue';
+import agUpload from "./../../agUpload/src/index.vue";
-import agCol from './../../agCol/src/index.vue';
+import agColorPicker from "./../../agColorPicker/src/index.vue";
-import agUpload from './../../agUpload/src/index.vue';
+import agNumberRange from "./../../agNumberRange/src/index.vue";
-import agColorPicker from './../../agColorPicker/src/index.vue'; 
+import agMultionInput from "./../../agMultionInput/src/index.vue";
-import agNumberRange from './../../agNumberRange/src/index.vue';
+import agQuery from "./../../agQuery/src/index.vue";
-import agMultionInput from './../../agMultionInput/src/index.vue';
+import agMultionDatePicker from "../../agMultionDatePicker";
-import agQuery from './../../agQuery/src/index.vue';
-import agMultionDatePicker from '../../agMultionDatePicker';
-
 
 export default {
   name: "agForm",
@@ -83,30 +206,28 @@ export default{
     agColorPicker,
     agNumberRange,
     agMultionInput,
-        agQuery
+    agQuery,
   },
   props: {
     submittitle: {
       type: String,
-            default:'提交'
+      default: "提交",
     },
     data: {
       type: Array,
       default() {
-                return []
+        return [];
-            }
+      },
     },
     span: {
       type: Number,
-            default:24
+      default: 24,
     },
   },
   data() {
     return {
-            formValue:{
+      formValue: {},
-                 
+    };
-            }
-        }
   },
   mounted() {
     this.formValue = this.$attrs.value;
@@ -115,12 +236,11 @@ export default{
     }, 1);
     if (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];
         }
       }
     }
-      
   },
   watch: {
     value(val) {
@@ -128,14 +248,14 @@ export default{
       setTimeout(() => {
         this.$refs.formref.clearValidate();
       }, 1);
-        }
+    },
   },
   methods: {
     onSubmit() {
-            this.$emit('onSubmit',this.formValue)
+      this.$emit("onSubmit", this.formValue);
-        }
     },
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -165,6 +285,10 @@ export default{
   display: flex;
   align-items: stretch;
 }
+.tipbox {
+  width: 100%;
+  color: red;
+}
 ::v-deep {
   .el-form--inline {
     .el-form-item {
@@ -174,6 +298,7 @@ export default{
       display: flex;
       flex: 1;
       width: 100%;
+      flex-wrap: wrap;
       margin-left: 0;
     }
   }
@@ -184,8 +309,14 @@ export default{
   .el-form-item__content {
     flex: 1;
     display: flex;
+    flex-wrap: wrap;
     width: 100%;
     margin-left: 0 !important;
   }
+  .el-radio-button__inner,
+  .el-radio-group {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>

packages/agSelect/src/index.vue

@@ -2,7 +2,6 @@
   <el-select
     class="ag_select"
     :style="{ width: `100%` }"
-  :value="selectValue" 
     ref="apselectref"
     :size="$attrs.size || 'small'"
     v-bind="$attrs"
@@ -10,8 +9,9 @@
   >
     <slot v-for="(_, name) in $slots" :name="name" :slot="name"> </slot>
     <el-option
-    v-for="item in options"
+      v-for="(item, index) in options"
-    :key="item.value"
+      :key="index"
+      :disabled="item.disabled"
       :label="item.label"
       :value="item.value"
     ></el-option>
@@ -32,40 +32,20 @@ export default {
         return [];
       },
     },
-    value:{ 
-      default: () =>'',
-    }
   },
+
   data() {
-    return {
+    return {};
-      selectValue:""
-    };
   },
   mounted() {
     if (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];
         }
       }
     }
   },
-  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>
 

packages/agUpload/src/index.vue

@@ -1,35 +1,94 @@
 <template>
   <div class="uploadbox">
-   <div class="uploadimgbox" :style="{height:width+'px'}" v-if="listType=='picture-card'"> 
+    <div
-         <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" >
+      class="uploadimgbox"
+      :style="{
+        height: $attrs.height ? $attrs.height + 'px' : width + 'px',
+      }"
+      v-if="listType == 'picture-card'"
+    >
+      <div
+        v-for="(img, index) in imageList"
+        :key="index"
+        :style="{
+          width: width + 'px',
+          height: $attrs.height ? $attrs.height + 'px' : width + 'px',
+        }"
+        :draggable="dragmove"
+        class="imgitem"
+        :class="dragmove && dragmoveclass"
+        @dragstart="onDragstart"
+        @dragenter="onDragenter"
+        @dragover="onDragover"
+        @dragend="onDragend"
+      >
         <slot name="file" :file="img">
-           <img :src="img.url" class="img" v-if="img.type.indexOf('image')>-1"/>
+          <img
+            :src="img.url || img"
+            class="img"
+            v-if="(img.type && img.type.indexOf('image') > -1) || img != ''"
+          />
+          <div
+            v-if="
+              index == 0 &&
+              $attrs.masktext &&
+              $attrs.masktext.ai == false &&
+              $attrs.masktext.data[index]
+            "
+            class="maskbox"
+          >
+            {{ $attrs.masktext.data[index] }}
+          </div>
+          <div v-if="$attrs.masktext && $attrs.masktext.ai == true" class="maskbox">
+            {{ index + 1 }}
+          </div>
           <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
-             <i class="el-icon-delete" v-if="clear" @click="handleRemove(img.raw,index)"></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 && !disabled"
+              @click="handleRemove(img.raw, index)"
+            ></i>
           </div>
         </slot>
       </div>
-     <div class="uploadcontain" :style="{height:width+'px',aspectRatio:isDrap?4/3:1/1}"
+      <div
+        class="uploadcontain"
+        :style="{
+          height: $attrs.height ? $attrs.height + 'px' : width + 'px',
+          aspectRatio: isDrap ? 4 / 3 : 1 / 1,
+          width: width + 'px',
+        }"
         :draggable="isDrap"
         @dragover.prevent
         @dragenter.prevent
         @drop="onUploadDrap"
-     v-if="limit>imageList.length">
+        v-if="limit > imageList.length"
+      >
         <label for="uploadinput" class="uploadlabel" @click="onInputClick">
           <slot>
-           <i class="el-icon-plus"></i>
+            <i
-           <span class="draptiptext">{{isDrap?'拖拽上传':'上传'}}</span>
+              class="el-icon-plus"
+              :style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
+            ></i>
+            <span class="draptiptext">{{
+              isDrap ? ($attrs.uploadtext ? $attrs.uploadtext : "拖拽上传") : "上传"
+            }}</span>
           </slot>
         </label>
       </div>
     </div>
     <div class="uploadtextbox" v-if="listType == 'text' || listType == 'picture'">
-     <div class="uploadtextcontain" 
+      <div
+        class="uploadtextcontain"
         :draggable="isDrap"
         @dragover.prevent
         @dragenter.prevent
@@ -37,33 +96,57 @@
       >
         <label for="uploadinput" class="uploadlabel" @click="onInputClick">
           <slot>
-           <el-button type="primary" size="small"><i class="el-icon-plus"></i> {{isDrap?'拖拽上传':'上传'}}</el-button> 
+            <el-button type="primary" size="small" :disabled="disabled"
+              ><i
+                class="el-icon-plus"
+                :style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
+              ></i>
+              {{
+                isDrap ? ($attrs.uploadtext ? $attrs.uploadtext : "拖拽上传") : "上传"
+              }}</el-button
+            >
           </slot>
         </label>
       </div>
-     <slot name="tip">
+      <slot name="tip"> </slot>
-     </slot> 
       <ul class="uploadtextlist" :class="'upload-list--' + listType">
-       <li v-for="img,index in imageList" :key="index" class="uploadtextitem" >
+        <li v-for="(img, index) in imageList" :key="index" class="uploadtextitem">
-        <div class="ag-upload-list__item-namebox" @click="handlePictureCardPreview(img)">
+          <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" />
+              <img
+                v-if="listType == 'picture'"
+                :src="img.url"
+                class="ag-upload-list__item-thumbnail"
+              />
               <a class="ag-upload-list__item-name">{{ img.name }}</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
-             <i v-if="img.status==='success'" class="el-icon-circle-check statusicon"></i>
+                  v-if="img.status === 'uploading'"
-             <i v-if="img.status==='failed'" class="el-icon-circle-close failedicon"></i>
+                  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
+              v-if="!disabled"
               :title="`确定移除${img.name}吗？`"
               @confirm="handleRemove(img.raw, index)"
             >
@@ -73,9 +156,18 @@
         </li>
       </ul>
     </div>
-   <input type="file" style="display:none;" :multiple="limit>1&&$attrs.multiple" :accept="$attrs.accept" id="uploadinput" @change="onUpdate" ref="fileinputref"/>
+    <input
+      type="file"
+      style="display: none"
+      :multiple="limit > 1 && $attrs.multiple"
+      :accept="$attrs.accept"
+      id="uploadinput"
+      :disabled="disabled"
+      @change="onUpdate"
+      ref="fileinputref"
+    />
     <el-dialog :visible.sync="dialogVisible">
-   <img width="100%" :src="dialogImageUrl" alt="">
+      <img width="100%" :src="dialogImageUrl" alt="" />
     </el-dialog>
   </div>
 </template>
@@ -86,68 +178,71 @@
   props: {
     isPrew: {
       type: Boolean,
-       default:true
+      default: true,
     },
     clear: {
       type: Boolean,
-       default:true
+      default: true,
     },
     width: {
       type: Number,
-       default:80
+      default: 80,
     },
     dragmove: {
       type: Boolean,
-       default:false
+      default: false,
     },
     isDrap: {
       type: Boolean,
-       default:false
+      default: false,
     },
     limit: {
       type: Number,
-       default:1
+      default: 1,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
     },
-    
     fileList: {
       type: Array,
       default() {
         return [];
-       }
+      },
     },
     listType: {
       type: String,
-       default:'picture-card'
+      default: "picture-card",
-     } 
+    },
   },
   model: {
-     prop: 'fileList', // 明确指定 prop 为 'value'  
+    prop: "fileList", // 明确指定 prop 为 'value'
-     event: 'onUpload' // 自定义事件名，用于更新 value  
+    event: "onUpload", // 自定义事件名，用于更新 value
   },
   mounted() {
     if (this.fileList.length > 0) {
       let list = [];
       this.fileList.map((h) => {
-           if(typeof(h)=='object'){
+        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){
+          if (["jpg", "jpeg", "png", "gif", "svg"].indexOf(extname) > -1) {
             list.push({
               name: filename,
               url: h,
-                 type:'image/'+extname.toLowerCase(),
+              type: "image/" + extname.toLowerCase(),
-                 raw:null
+              raw: null,
             });
           } else {
             list.push({
               name: filename,
               url: h,
-                 type:'other/'+extname.toLowerCase(),
+              type: "other/" + extname.toLowerCase(),
-                 raw:null
+              raw: null,
             });
           }
         }
@@ -160,80 +255,105 @@
       if (val.length > 0) {
         let list = [];
         val.map((h) => {
-           if(typeof(h)=='object'){
+          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){
+            if (["jpg", "jpeg", "png", "gif", "svg"].indexOf(extname) > -1) {
               list.push({
                 name: filename,
                 url: h,
-                 type:'image/'+extname.toLowerCase(),
+                type: "image/" + extname.toLowerCase(),
-                 raw:null
+                raw: null,
               });
             } else {
               list.push({
                 name: filename,
                 url: h,
-                 type:'other/'+extname.toLowerCase(),
+                type: "other/" + extname.toLowerCase(),
-                 raw:null
+                raw: null,
               });
             }
           }
         });
         this.imageList = list;
       }
-     }
+    },
   },
   data() {
     return {
-       dialogImageUrl: '',
+      dialogImageUrl: "",
       dialogVisible: false,
       imageList: [],
       sourceNode: null,
       partNode: null,
       selectTop: false,
       drag: false,
-       dragmoveclass:'imghover'
+      dragmoveclass: "imghover",
+      moveIndexs: [],
+      startIndex: null,
     };
   },
   methods: {
     handleRemove(file, index) {
+      if (this.disabled) {
+        return;
+      }
       this.imageList = this.imageList.filter((item, inkey) => {
         return inkey !== index;
       });
-         this.$emit('onRemove',file,this.imageList); 
+      this.$emit("onRemove", file, this.imageList);
+      this.$emit("onUpload", this.fileList, this.imageList, "remove");
     },
     handlePictureCardPreview(file) {
-        if(file.type.indexOf('image/')>-1){
+      if (file.type.indexOf("image/") > -1) {
         this.dialogImageUrl = file.url;
         this.dialogVisible = true;
       }
     },
     onUpdate(e) {
+      if (this.disabled) {
+        return;
+      }
       if (this.limit <= this.imageList.length) {
         return;
       }
+      let that = this;
       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)){ 
+            for (let i = 0; i < acceptarr.length; i++) {
+              let item = acceptarr[i];
+              if (item.includes("*")) {
+                if (!item.includes(f.type.split("/")[0])) {
                   if (this.$listeners.onError) {
-               this.$emit('onError',`其中第${i+1}张文件类型错误`);
+                    this.$emit("onError", `其中第${i + 1}张文件类型错误`);
                   }
                   return true;
                 }
+              } else {
+                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"`);
+                this.$emit(
+                  "onError",
+                  `其中第${i + 1}张文件大小不能超过${this.$attrs.maxSize / 1024 / 1024}M"`
+                );
               }
               return true;
             }
@@ -244,22 +364,65 @@
         }
 
         files.map((item, index) => {
-         if(item.type.indexOf("image")>-1){
+          if (item.type && item.type.indexOf("image") > -1) {
             let filerender = new FileReader();
             filerender.onload = function (e) {
+              if (that.$attrs.minWidth || that.$attrs.minHeight) {
+                let img = document.createElement("img");
+                img.src = e.target.result;
+                img.onload = () => {
+                  if (img.width < that.$attrs.minWidth) {
+                    if (this.$listeners.onError) {
+                      this.$emit(
+                        "onError",
+                        `其中第${index + 1}张图片宽度不能小于${that.$attrs.minWidth}`
+                      );
+                    }
+                    return;
+                  }
+                  if (img.height < that.$attrs.minHeight) {
+                    if (this.$listeners.onError) {
+                      this.$emit(
+                        "onError",
+                        `其中第${index + 1}张图片高度不能小于${that.$attrs.minHeight}`
+                      );
+                    }
+                    return;
+                  }
                   uplist.push({
                     name: item.name,
                     url: e.target.result,
                     type: item.type,
                     size: item.size,
                     raw: item,
-                status:'init',
+                    status: "init",
-                msg:""
+                    msg: "",
+                  });
+                  if (files.length == uplist.length) {
+                    this.$refs.fileinputref.value = "";
+                    if (this.$listeners.onUpload) {
+                      this.$emit("onUpload", this.fileList, uplist, "upload");
+                    } else {
+                      this.imageList.push(...uplist);
+                    }
+                  }
+                };
+                return;
+              }
+
+              uplist.push({
+                name: item.name,
+                url: e.target.result,
+                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); 
+                  this.$emit("onUpload", this.fileList, uplist);
                 } else {
                   this.imageList.push(...uplist);
                 }
@@ -272,13 +435,13 @@
               type: item.type,
               size: item.size,
               raw: item,
-               status:'init',
+              status: "init",
-               msg:""
+              msg: "",
             });
             if (files.length == uplist.length) {
               if (this.$listeners.onUpload) {
                 this.fileList.push(...uplist);
-                 this.$emit('onUpload',this.fileList,uplist); 
+                this.$emit("onUpload", this.fileList, uplist);
               } else {
                 this.imageList.push(...uplist);
               }
@@ -286,14 +449,15 @@
           }
         });
       } catch (err) {
-       console.log(err,"uploaderr");
-       
         if (this.$listeners.onError) {
-         this.$emit('onError',e);
+          this.$emit("onError", e);
         }
       }
     },
     onDragstart(e) {
+      if (this.disabled) {
+        return;
+      }
       this.sourceNode = e.target;
       this.partNode = e.target.parentNode;
       e.target.classList.add("tabsbg");
@@ -302,13 +466,19 @@
         e.target.classList.add("moving");
       }, 1);
     },
+    onDragover(e) {
+      e.preventDefault();
+    },
     onDragenter(e) {
       e.preventDefault();
+      if (this.disabled) {
+        return;
+      }
       if (!this.dragmove) {
         return;
       }
       if (this.partNode === e.target || e.target === this.sourceNode) {
-       return 
+        return;
       }
       const childrens = [...this.partNode.children];
       let thistarget = childrens.find((f) => f == e.target);
@@ -316,28 +486,27 @@
         thistarget = e.target.parentNode;
       }
       if (!thistarget) {
-        return 
+        return;
       }
 
       const sourceIndex = childrens.indexOf(this.sourceNode);
-     const targetIndex=childrens.indexOf(thistarget); 
+      if (!this.startIndex) {
-    if(sourceIndex<targetIndex){ 
+        this.startIndex = sourceIndex;
-     this.partNode.insertBefore(this.sourceNode,thistarget.nextElementSibling); 
-    }else{ 
-     this.partNode.insertBefore(this.sourceNode,thistarget);   
       }
+      const targetIndex = childrens.indexOf(thistarget);
+      this.moveIndexs = [sourceIndex, targetIndex];
+    },
 
-   },
-   onDragover(e){
-    e.preventDefault();   
-   },
     onMouseup(e) {
       e.preventDefault();
       if (!this.dragmove) {
         return;
       }
+      if (this.disabled) {
+        return;
+      }
       if (this.partNode === e.target || e.target === this.sourceNode) {
-       return 
+        return;
       }
       this.sourceNode.classList.remove("moving");
     },
@@ -346,19 +515,21 @@
       if (!this.dragmove) {
         return;
       }
+      if (this.disabled) {
+        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){ 
+      const [sourceIndex, targetIndex] = this.moveIndexs;
-       return 
+      let newimage = Object.assign([], this.imageList);
-     }
+      let temp = Object.assign({}, newimage[sourceIndex]);
-       const childrens=[...this.partNode.children];  
+      newimage[sourceIndex] = newimage[targetIndex];
-       
+      newimage[targetIndex] = temp;
-       const sourceIndex=childrens.indexOf(this.sourceNode);
+      this.imageList = newimage;
-         const item = this.imageList.splice(sourceIndex, 1)[0];  
-         this.imageList.splice(sourceIndex, 0, item);  
-         this.sourceNode=null;
       this.partNode = null;
+      this.sourceNode = null;
+      this.moveIndexs = [];
     },
     onUploadDrap(e) {
       e.preventDefault(); // 阻止默认行为（打开文件）
@@ -366,14 +537,20 @@
       if (this.drap) {
         return;
       }
+      if (this.disabled) {
+        return;
+      }
       const files = event.dataTransfer.files;
       this.onUpdate({ target: { files: files } });
     },
     onInputClick(e) {
       e.preventDefault(); // 阻止默认行为（打开文件）
       e.stopPropagation(); // 停止事件冒泡
-     this.$refs.fileinputref.click();
+      if (this.disabled) {
+        return;
       }
+      this.$refs.fileinputref.click();
+    },
   },
 };
 </script>
@@ -385,6 +562,7 @@
   aspect-ratio: 1/1;
   border-radius: 4px;
   background-color: #fff;
+  border: 1px solid #e5e5e5;
   cursor: pointer;
   overflow: hidden;
   .uploadlabel {
@@ -416,11 +594,23 @@
     position: relative;
     width: 100px;
     cursor: pointer;
+    border: 1px solid #e5e5e5;
     background: #fff;
     border-radius: 4px;
     overflow: hidden;
     aspect-ratio: 1/1;
-     transition: all .3s;
+    transition: all 0.3s;
+    .maskbox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: #1f292e 60%;
+      padding: 5px 8px;
+      border-bottom-right-radius: 6px;
+      line-height: 1;
+      color: #fff;
+      font-size: 12px;
+    }
     &.imghover:hover {
       cursor: move;
     }
@@ -449,7 +639,7 @@
       left: 0;
       width: 100%;
       height: 100%;
-       background-color: rgba(0,0,0,.3); 
+      background-color: rgba(0, 0, 0, 0.3);
       align-items: center;
       justify-content: center;
       gap: 6px;
@@ -510,8 +700,6 @@
     padding: 0;
     list-style: none;
     margin-top: 12px;
-
-   
   }
   .upload-list--text {
     margin: 0;
@@ -524,7 +712,7 @@
     .uploadtextitem {
       position: relative;
       list-style: none;
-     transition: all .5s cubic-bezier(.55,0,.1,1);
+      transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
       font-size: 14px;
       color: #606266;
       line-height: 1;
@@ -556,7 +744,7 @@
       display: block;
       overflow: hidden;
       text-overflow: ellipsis;
-     transition: color .3s;
+      transition: color 0.3s;
       white-space: nowrap;
       font-size: 14px;
 
@@ -574,7 +762,7 @@
         position: relative;
         right: 5px;
         cursor: pointer;
-     opacity: .75;
+        opacity: 0.75;
         color: #606266;
         display: none;
       }
@@ -627,7 +815,7 @@
         display: block;
         overflow: hidden;
         text-overflow: ellipsis;
-       transition: color .3s;
+        transition: color 0.3s;
         white-space: nowrap;
         line-height: 70px;
         font-size: 14px;
@@ -657,7 +845,7 @@
         top: 5px;
         right: 5px;
         cursor: pointer;
-       opacity: .75;
+        opacity: 0.75;
         color: #606266;
       }
     }
@@ -689,4 +877,3 @@
   }
 }
 </style>
-