meixioacomponent 0.2.43 → 0.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.2.43",
+  "version": "0.2.46",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",

package/packages/components/base/baseUpload/baseUploadItem.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="base-upload-item-wrap" :class="[`${shape}`]">
+  <div
+    class="base-upload-item-wrap"
+    :class="[`${shape}`]"
+    v-on:paste="onPasteFile"
+  >
     <div class="type-upload" v-if="type == 'upload'">
       <input
         type="file"
@@ -14,12 +18,31 @@
         :color="`s`"
         :event="true"
         :size="`l`"
-        :name="`meixicomponenticon-plus`"
         class="upload-icon"
+        v-if="!isUploadProImg"
         @iconClick="clickFile"
+        :name="`meixicomponenticon-plus`"
       ></base-icon>
+
+      <div class="is-upload-pro-img" v-if="isUploadProImg && !imgSrc">
+        <base-icon
+          class="upload-icon"
+          :iconClass="`element`"
+          :name="`el-icon-upload`"
+        ></base-icon>
+        <div class="upload-notic-wrap">
+          <span @click="clickFile">点击上传<br /></span
+          ><span class="primary-color"
+            >或点击该处后Ctrl+V 黏贴QQ或微信截图</span
+          >
+        </div>
+      </div>
     </div>
-    <div v-else-if="type == 'img'" class="type-pre-views">
+
+    <div
+      v-if="(isUploadProImg || type == 'img') && imgSrc"
+      class="type-pre-views"
+    >
       <div class="handleUploadItem">
         <base-icon
           :size="`l`"
@@ -36,13 +59,14 @@
 
 <script>
 import baseImgVue from "../baseImg/baseImg.vue";
-// 
+
 import { baseUploadMixins } from "./mixins";
 export default {
   name: "baseUploadItem",
   data() {
     return {};
   },
+  created() {},
   mixins: [baseUploadMixins],
   components: {
     baseImgVue,
@@ -84,14 +108,22 @@ export default {
       get() {
         return this.$props.value;
       },
-      set(val) {},
+      set(val) {
+        this.$emit("input", val);
+      },
     },
+
     imgSrc() {
-      if (!this.uploadItem.url) {
-        return "";
+      if (this.isGroup) {
+        if (!this.uploadItem?.url) {
+          return "";
+        }
+        return this.uploadItem.url;
+      } else {
+        return this.module[0]?.url;
       }
-      return this.uploadItem.url;
     },
+
     accept() {
       let accept = "";
       let fileType = this.$props.fileType;
@@ -107,11 +139,25 @@ export default {
       }
       return accept;
     },
+
+    isUploadProImg() {
+      let props = this.$props;
+      return (
+        props.shape == "pro" &&
+        props.fileType == "img" &&
+        props.uploadType == "single"
+      );
+    },
+
+    isGroup() {
+      return this.$parent.$options.name == "baseUpload";
+    },
   },
   methods: {
     clickFile() {
       this.$refs.inputFile.click();
     },
+
     async returnFiles(files) {
       let list = [];
       for (let i = 0; i < files.length; i++) {
@@ -124,18 +170,48 @@ export default {
       }
       return list;
     },
+
     async valueChange(e) {
       let files = e.target.files;
       let list = await this.returnFiles(files);
-      if (this.$parent.$options.name == "baseUpload") {
+      this.emitEvent(list);
+      this.$refs.inputFile.value = "";
+    },
+
+    emitEvent(list) {
+      if (this.isGroup) {
         this.$emit("inputChange", list);
       } else {
         this.inputChange(list);
       }
-      this.$refs.inputFile.value = "";
     },
+
     handleDeleteUploadItem() {
-      this.$emit("handleDeleteUploadItem");
+      if (this.isGroup) {
+        this.$emit("handleDeleteUploadItem");
+      } else {
+        this.module = [];
+      }
+    },
+
+    async onPasteFile() {
+      const items = (event.clipboardData || window.clipboardData).items;
+      const rowList = [];
+      if (this.fileType == "img") {
+        for (var i = 0; i < items.length; i++) {
+          if (items[i].type.indexOf("image") !== -1) {
+            let file = items[i].getAsFile(); // getAsFile 如果拖拽项的对象是一个文件, 则返回 File 对象; 否则返回 null
+            rowList.push(file);
+          }
+        }
+      } else {
+        for (var i = 0; i < items.length; i++) {
+          let file = items[i].getAsFile(); // getAsFile 如果拖拽项的对象是一个文件, 则返回 File 对象; 否则返回 null
+          rowList.push(file);
+        }
+      }
+      let list = await this.returnFiles(rowList);
+      this.emitEvent(list);
     },
   },
 };
@@ -143,8 +219,9 @@ export default {
 
 <style lang="less" scoped>
 .base-upload-item-wrap {
-  margin: var(--margin-4);
   margin-left: 0px;
+  position: relative;
+  margin: var(--margin-4);
   border-radius: calc(var(--radius) * 2);
   border: 1px dashed var(--color-border-d);
   .type-upload {
@@ -155,6 +232,34 @@ export default {
     align-items: center;
     flex-flow: row nowrap;
     justify-content: center;
+
+    .is-upload-pro-img {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      cursor: default;
+      align-items: center;
+      flex-flow: column nowrap;
+      justify-content: center;
+
+      .upload-notic-wrap {
+        text-align: center;
+        span {
+          display: block;
+          cursor: pointer;
+          color: var(--font-color-s);
+          font-size: var(--font-size-s);
+          line-height: 12px !important;
+          &:hover {
+            color: var(--color-primary);
+          }
+        }
+        .primary-color {
+          margin-top: var(--margin-4);
+          color: var(--color-primary);
+        }
+      }
+    }
     .upload-icon {
       width: 60px;
       height: 60px;
@@ -164,9 +269,11 @@ export default {
     }
   }
   .type-pre-views {
+    top: 0px;
+    left: 0px;
     width: 100%;
     height: 100%;
-    position: relative;
+    position: absolute;
     &:hover {
       .handleUploadItem {
         display: block;
@@ -202,4 +309,12 @@ export default {
   width: 100px;
   height: 100px;
 }
+.pro {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: center;
+}
 </style>

package/packages/components/proForm/proFormWrap/pro_form_wrap.vue

@@ -19,14 +19,22 @@
         <pro_formVue
           :size="size"
           ref="proForm"
-          :form="false"
+          :form="form"
           :rules="rules"
           :footer="false"
-          :formList="formList"
+          v-model="formList"
           :rowNumber="rowNumber"
           :labelWidth="labelWidth"
           @formItemConfirm="formItemConfirm"
-        ></pro_formVue> </template
+        ></pro_formVue>
+        <template v-for="slotItem in slotList">
+          <template :slot="`form-${slotItem}`">
+            <slot
+              :scope="slotItem.formList"
+              :name="`formslot-${slotItem}`"
+            ></slot>
+          </template>
+        </template> </template
     ></baseSectionVue>
   </div>
 </template>
@@ -38,10 +46,18 @@ export default {
   name: "baseFormWrap",
   data() {
     return {
+      slotList: [],
       sectionOpen: true,
     };
   },
+  created() {
+    this.createSlots();
+  },
   props: {
+    form: {
+      type: Boolean,
+      default: false,
+    },
     formTitle: {
       type: String,
       require: true,
@@ -81,6 +97,27 @@ export default {
     baseSectionVue,
   },
   methods: {
+    createSlots() {
+      let slotList = this.slotList;
+      let formList = this.$props.formList;
+      for (let i = 0; i < formList.length; i++) {
+        let citem = formList[i];
+        if (citem.type == "template") {
+          slotList.push(citem.key);
+        }
+      }
+    },
+
+    async checkValidate() {
+      let refs = this.$refs.proForm;
+      let validateResult = true;
+      let validate = await refs[i].checkValidate();
+      validateResult = validate.result;
+      if (!validateResult) {
+        return validateResult;
+      }
+      return validateResult;
+    },
     handleSection() {
       this.sectionOpen = !this.sectionOpen;
     },