22

package.json

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

packages/agForm/src/index.vue

@@ -106,6 +106,7 @@
               @onError="$listeners.onError"
               clear
               isPre
+              @onUpload="item.onUpload"
             ></ag-upload>
             <el-rate
               v-bind="item"
@@ -178,21 +179,21 @@
       </slot>
     </div>
   </el-form>
-  </template>
+</template>
-  <script>
+<script>
-  import agInput from "./../../agInput/src/index.vue";
+import agInput from "./../../agInput/src/index.vue";
-  import agDatePicker from "./../../agDatePicker/src/index.vue";
+import agDatePicker from "./../../agDatePicker/src/index.vue";
-  import agSelect from "./../../agSelect/src/index.vue";
+import agSelect from "./../../agSelect/src/index.vue";
-  import agRow from "./../../agRow/src/index.vue";
+import agRow from "./../../agRow/src/index.vue";
-  import agCol from "./../../agCol/src/index.vue";
+import agCol from "./../../agCol/src/index.vue";
-  import agUpload from "./../../agUpload/src/index.vue";
+import agUpload from "./../../agUpload/src/index.vue";
-  import agColorPicker from "./../../agColorPicker/src/index.vue";
+import agColorPicker from "./../../agColorPicker/src/index.vue";
-  import agNumberRange from "./../../agNumberRange/src/index.vue";
+import agNumberRange from "./../../agNumberRange/src/index.vue";
-  import agMultionInput from "./../../agMultionInput/src/index.vue";
+import agMultionInput from "./../../agMultionInput/src/index.vue";
-  import agQuery from "./../../agQuery/src/index.vue";
+import agQuery from "./../../agQuery/src/index.vue";
-  import agMultionDatePicker from "../../agMultionDatePicker";
+import agMultionDatePicker from "../../agMultionDatePicker";
 
-  export default {
+export default {
   name: "agForm",
   components: {
     agMultionDatePicker,
@@ -254,19 +255,19 @@
       this.$emit("onSubmit", this.formValue);
     },
   },
-  };
+};
-  </script>
+</script>
 
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
-  .footerbox {
+.footerbox {
   margin-top: 12px;
   display: flex;
   justify-content: center;
   .submitbtn {
     width: 200px;
   }
-  }
+}
-  .el-form--inline {
+.el-form--inline {
   .el-form-item {
     display: flex;
   }
@@ -274,21 +275,21 @@
     flex: 1;
     width: 100%;
   }
-  }
+}
-  .contentbox {
+.contentbox {
   width: 100%;
   display: flex;
   align-items: stretch;
-  }
+}
-  .flexcenter {
+.flexcenter {
   display: flex;
   align-items: stretch;
-  }
+}
-  .tipbox {
+.tipbox {
   width: 100%;
   color: red;
-  }
+}
-  ::v-deep {
+::v-deep {
   .el-form--inline {
     .el-form-item {
       display: flex;
@@ -317,6 +318,5 @@
     display: flex;
     align-items: center;
   }
-  }
+}
-  </style>
+</style>
-  

packages/agSelect/src/index.vue

@@ -2,20 +2,19 @@
   <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 in options"
+      v-for="(item, index) in options"
-    :key="item.value"
+      :key="index"
       :label="item.label"
       :value="item.value"
     ></el-option>
-</el-select> 
+  </el-select>
 </template>
 
 <script>
@@ -24,7 +23,7 @@ export default {
   props: {
     width: {
       type: Number,
-      default:0,
+      default: 0,
     },
     options: {
       type: Array,
@@ -32,48 +31,28 @@ 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;

packages/agUpload/src/index.vue

@@ -2,13 +2,18 @@
   <div class="uploadbox">
     <div
       class="uploadimgbox"
-      :style="{ height: width + 'px' }"
+      :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' }"
+        :style="{
+          width: width + 'px',
+          height: $attrs.height ? $attrs.height + 'px' : width + 'px',
+        }"
         :draggable="dragmove"
         class="imgitem"
         :class="dragmove && dragmoveclass"
@@ -19,7 +24,11 @@
         @dragleave="onMouseup"
       >
         <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="
               $attrs.masktext &&
@@ -45,7 +54,7 @@
             ></i>
             <i
               class="el-icon-delete"
-              v-if="clear"
+              v-if="clear && !disabled"
               @click="handleRemove(img.raw, index)"
             ></i>
           </div>
@@ -53,7 +62,11 @@
       </div>
       <div
         class="uploadcontain"
-        :style="{ height: width + 'px', aspectRatio: isDrap ? 4 / 3 : 1 / 1 }"
+        :style="{
+          height: $attrs.height ? $attrs.height + 'px' : width + 'px',
+          aspectRatio: isDrap ? 4 / 3 : 1 / 1,
+          width: width + 'px',
+        }"
         :draggable="isDrap"
         @dragover.prevent
         @dragenter.prevent
@@ -83,7 +96,7 @@
       >
         <label for="uploadinput" class="uploadlabel" @click="onInputClick">
           <slot>
-            <el-button type="primary" size="small"
+            <el-button type="primary" size="small" :disabled="disabled"
               ><i
                 class="el-icon-plus"
                 :style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
@@ -133,6 +146,7 @@
               </span>
             </slot>
             <el-popconfirm
+              v-if="!disabled"
               :title="`确定移除${img.name}吗？`"
               @confirm="handleRemove(img.raw, index)"
             >
@@ -148,6 +162,7 @@
       :multiple="limit > 1 && $attrs.multiple"
       :accept="$attrs.accept"
       id="uploadinput"
+      :disabled="disabled"
       @change="onUpdate"
       ref="fileinputref"
     />
@@ -185,7 +200,10 @@ export default {
       type: Number,
       default: 1,
     },
-
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     fileList: {
       type: Array,
       default() {
@@ -279,6 +297,9 @@ export default {
   },
   methods: {
     handleRemove(file, index) {
+      if (this.disabled) {
+        return;
+      }
       this.imageList = this.imageList.filter((item, inkey) => {
         return inkey !== index;
       });
@@ -291,6 +312,9 @@ export default {
       }
     },
     onUpdate(e) {
+      if (this.disabled) {
+        return;
+      }
       if (this.limit <= this.imageList.length) {
         return;
       }
@@ -301,6 +325,16 @@ export default {
         const find = files.find((f, i) => {
           if (this.$attrs.accept) {
             let acceptarr = this.$attrs.accept.split(",");
+            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}张文件类型错误`);
+                  }
+                  return true;
+                }
+              } else {
                 if (!acceptarr.includes(f.type)) {
                   if (this.$listeners.onError) {
                     this.$emit("onError", `其中第${i + 1}张文件类型错误`);
@@ -308,6 +342,8 @@ export default {
                   return true;
                 }
               }
+            }
+          }
           if (this.$attrs.maxSize) {
             if (f.size > this.$attrs.maxSize) {
               if (this.$listeners.onError) {
@@ -325,7 +361,7 @@ export default {
         }
 
         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) {
@@ -360,8 +396,8 @@ export default {
                     msg: "",
                   });
                   if (files.length == uplist.length) {
+                    this.$refs.fileinputref.value = "";
                     if (this.$listeners.onUpload) {
-                      this.fileList.push(...uplist);
                       this.$emit("onUpload", this.fileList, uplist);
                     } else {
                       this.imageList.push(...uplist);
@@ -410,14 +446,15 @@ export default {
           }
         });
       } catch (err) {
-        console.log(err, "uploaderr");
-
         if (this.$listeners.onError) {
           this.$emit("onError", e);
         }
       }
     },
     onDragstart(e) {
+      if (this.disabled) {
+        return;
+      }
       this.sourceNode = e.target;
       this.partNode = e.target.parentNode;
       e.target.classList.add("tabsbg");
@@ -428,6 +465,9 @@ export default {
     },
     onDragenter(e) {
       e.preventDefault();
+      if (this.disabled) {
+        return;
+      }
       if (!this.dragmove) {
         return;
       }
@@ -453,12 +493,18 @@ export default {
     },
     onDragover(e) {
       e.preventDefault();
+      if (this.disabled) {
+        return;
+      }
     },
     onMouseup(e) {
       e.preventDefault();
       if (!this.dragmove) {
         return;
       }
+      if (this.disabled) {
+        return;
+      }
       if (this.partNode === e.target || e.target === this.sourceNode) {
         return;
       }
@@ -469,6 +515,9 @@ export default {
       if (!this.dragmove) {
         return;
       }
+      if (this.disabled) {
+        return;
+      }
       e.target.classList.remove("moving");
       e.target.classList.remove("tabsbg");
       this.sourceNode.classList.remove("moving");
@@ -489,12 +538,18 @@ export default {
       if (this.drap) {
         return;
       }
+      if (this.disabled) {
+        return;
+      }
       const files = event.dataTransfer.files;
       this.onUpdate({ target: { files: files } });
     },
     onInputClick(e) {
       e.preventDefault(); // 阻止默认行为（打开文件）
       e.stopPropagation(); // 停止事件冒泡
+      if (this.disabled) {
+        return;
+      }
       this.$refs.fileinputref.click();
     },
   },