doway-coms 2.10.24 → 2.10.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doway-coms",
-  "version": "2.10.24",
+  "version": "2.10.26",
   "description": "doway组件库",
   "author": "dowaysoft",
   "main": "packages/index.js",

package/packages/BasePictureCard/src/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div style="display: inline-block">
+  <div style="display: inline-block;width:100%" >
+    <input type="file" accept style="display: none;" ref="updateLoadContentView"/>
+    <!-- <div  tabindex="0" style="position:absolute;left:-9999px;" ref="updateLoadContentView"> &nbsp;黏贴</div> -->
     <div class="file-card" :class="isStyle? 'currentHeight' : ''">
       <div
         class="attach-wrapper"
@@ -12,8 +14,8 @@
           <slot name='header' :row="internalRow"></slot>
           <div class="attach" v-if="internalRow.attach.content === 'image'">
             <img
-              @click="attachFileClick(internalRow.attach)"
-              :style="{ height: height, lineHeight: height, width: width }"
+              @click="attachFileClick(internalRow)"
+              :style="{ height: height+'px', lineHeight: height+'px', width: width+'px' }"
               style="
                 border: 1px solid #ccc;
                 border-radius: 6px;
@@ -42,8 +44,8 @@
           </div>
           <div class="attach" v-else-if="internalRow.attach.contentType == 'application/pdf'">
             <img
-              @click="attachFileClick(internalRow.attach)"
-              :style="{ height: height, lineHeight: height, width: width }"
+              @click="attachFileClick(internalRow)"
+              :style="{ height: height+'px', lineHeight: height+'px', width: width+'px' }"
               src="../../styles/icon/pdf_file.svg"
             />
             <a-icon
@@ -65,8 +67,8 @@
           </div>
           <div class="attach" v-else>
             <img
-              @click="attachFileClick(internalRow.attach)"
-              :style="{ height: height, lineHeight: height, width: width }"
+              @click="attachFileClick(internalRow)"
+              :style="{ height: height+'px', lineHeight: height+'px', width: width +'px'}"
               src="../../styles/icon/uploaded_file.svg"
               :data-mimetype="internalRow.attach.contentType"
             />
@@ -95,31 +97,35 @@
           </div>
         </template>
       </div>
-      <a-upload
+         <a-spin tip="上传中" :spinning="uploading">
+        <div v-show="edit===true" @click="selectClick" 
+          style="border: 1px solid #d9d9d9; border-radius: 6px"
+          :style="{ width: width+'px', height: height+'px' }"
+        >
+       
+        <!-- <span style="cursor: default;">&nbsp;</span> -->
+        <a-upload
         class="avatar-uploader"
         :headers="uploadHeaders"
         :action="uploadData.picAction"
         :data="uploadData"
-        v-if="edit === true"
         @change="handleAvatarSuccess"
         :showUploadList="false"
         :fileList="uploadFileList"
         :before-upload="beforeAvatarUpload"
       >
-        <div
-          style="border: 1px solid #d9d9d9; border-radius: 6px"
-          :style="{ width: width, height: height, lineHeight: height }"
-        >
           <a-icon
             type="plus"
             class="avatar-uploader-icon"
-            style="text-align: center"
-            :style="{ width: width, height: height, lineHeight: height }"
+            :style="{ width: width+'px', height: height+'px', lineHeight: height+'px' }"
+            style="text-align: center;"
           />
-          
-        </div>
-      </a-upload>
-      <div ref="pasteFileView">黏贴</div>
+        </a-upload>
+        <div ref="updateLoadContentView" :style="{color:currentSelectId==='empty'?'blue':null}" 
+        v-clickoutside="removeSelect">点击后ctrl+v</div>
+      </div>
+        </a-spin>
+
       <div v-if="edit !== true && showEmptyText && internalRows.length === 0">
         没有附件信息哦，请编辑添加附件信息
       </div>
@@ -153,8 +159,9 @@
 </template>
 
 <script>
-import { notification, Upload } from "ant-design-vue";
+import { notification, Upload,Spin } from "ant-design-vue";
 import { sysRowState } from "../../utils/enum";
+import clickoutside from '../../directive/clickoutside'
 import { Checkbox, Modal } from "vxe-table";
 import { attachGetAttachUrlApi, attachSearchApi } from "../../utils/api";
 import request from '../../utils/request'
@@ -164,9 +171,15 @@ export default {
     VxeCheckbox: Checkbox,
     "a-upload": Upload,
     VxeModal: Modal,
+    'a-spin':Spin
+  },
+  directives: {
+    clickoutside
   },
   data() {
     return {
+      uploading:false,
+      currentSelectId:null,
       uploadFileList:[],
       demo1: "",
       demo2: "",
@@ -239,12 +252,12 @@ export default {
       },
     },
     width: {
-      type: String,
-      default: "100px",
+      type: Number,
+      default: 100,
     },
     height: {
-      type: String,
-      default: "100px",
+      type: Number,
+      default: 100,
     },
     rows: {
       // 表格数据
@@ -291,7 +304,7 @@ export default {
     this.uploadData.picAction = this.internalServiceUrl + "/UploadAttach";
     this.getAttachInfo(this.rows);
 
-    this.$refs.pasteFileView.addEventListener('paste', async (e) => {
+    this.$refs.updateLoadContentView.addEventListener('paste', async (e) => {
       e.preventDefault();
       await this.pasteFileClick(e)
     })
@@ -353,7 +366,9 @@ export default {
         })
         .catch(() => {});
     },
-    attachFileClick(attachFile) {},
+    attachFileClick(attachFile) {
+        // console.debug('attachFileClick',attachFile)
+    },
     handleAvatarSuccess(info) {
       if (info.file.status == "done") {
         let addRow = {
@@ -465,17 +480,31 @@ export default {
      * 黏贴附件
      */
      async pasteFileClick(e){
-      console.debug('e',e)
+      if(this.currentSelectId!=='empty'){
+          return
+      }
+      // console.debug('e',e)
       const items = e.clipboardData.files;
+      if(items.length===0){
+          return
+      }
       console.debug('items',items)
+      this.uploading = true
+      try
+      {
       for (const item of items) {
-          if (item.type.startsWith('image/') || item.type.startsWith('application/')) {
+          // if (item.type.startsWith('image/') || item.type.startsWith('application/')) {
             //  this.pasteFile  = URL.createObjectURL(item)
             //'复制文件'+this.$store.getters.newId() +'.png'
-            let type = item.type
-            this.pasteFile = new File([item],`复制文件${this.$store.getters.newId()}.${type.split('/')[1]}` , { type });
-            this.uploadPasteFile()
-            return
+            // let type = item.type
+            // this.pasteFile =item //new File([item],`复制文件${this.$store.getters.newId()}.${type.split('/')[1]}` , { type });
+            // this.uploadPasteFile()
+            const formData = new FormData();
+            formData.append('file', item)
+            formData.append('picType', this.uploadData.picType)
+            formData.append('resId', this.uploadData.resId)
+            let res =  await request({url:this.uploadData.picAction,method:'post',data:formData,headers:{'Content-Type': 'multipart/form-data'}})
+            this.handleAvatarSuccess({file:{status:'done',response:res}})
             // console.debug('file',file)
             // this.uploadFileList = [file];
             // const reader = new FileReader();
@@ -484,20 +513,31 @@ export default {
             //   // this.imageSrc = e.target.result;
             // };
             // reader.readAsDataURL(blob);
-          }
+          // }
         }
+      }
+      finally{
+          this.uploading = false
+      }
+    },
+    removeSelect(){
+      console.debug('removeSelect')
+      this.currentSelectId = null
+    },
+    selectClick(event){
+      this.currentSelectId = 'empty'
+      console.debug('selectClick')
+      document.execCommand('paste');
+      // this.$refs.updateLoadContentView.focus()
+        // console.debug('selectClick',event)
+        // event.target.addEventListener('paste', async (e) => {
+        //     e.preventDefault();
+        //     await this.pasteFileClick(e)
+        //   })
+        // this.$refs.updateLoadContentView.focus()
     },
-    uploadPasteFile(){
-      const formData = new FormData();
-      formData.append('file', this.pasteFile)
-      formData.append('picType', this.uploadData.picType)
-      formData.append('resId', this.uploadData.resId)
-      request({url:this.uploadData.picAction,method:'post',data:formData,headers:{'Content-Type': 'multipart/form-data'}})
-      .then(res=>{
-          this.handleAvatarSuccess({file:{status:'done',response:res}})
-      }).catch(err=>{
-          console.debug(err)
-      })
+    async uploadPasteFile(){
+      
     }
   },
 };

package/packages/directive/clickoutside.js

@@ -0,0 +1,44 @@
+const clickoutsideContext = '@@clickoutsideContext'
+
+export default {
+  /*
+   @param el 指令所绑定的元素
+   @param binding {Object} 
+   @param vnode vue编译生成的虚拟节点
+   */
+  bind(el, binding, vnode) {
+    const documentHandler = function(e) {
+      //   console.log(el)
+      //   console.log(e.target);
+      //   console.log(vnode);
+      //   console.log(binding);
+
+      if (!vnode.context || el.contains(e.target)) {
+        return false
+      }
+      if (binding.expression) {
+        vnode.context[el[clickoutsideContext].methodName](e)
+      } else {
+        el[clickoutsideContext].bindingFn(e)
+      }
+    }
+    el[clickoutsideContext] = {
+      documentHandler,
+      methodName: binding.expression,
+      bindingFn: binding.value
+    }
+    setTimeout(() => {
+      document.addEventListener('click', documentHandler)
+    }, 0)
+  },
+  update(el, binding) {
+    el[clickoutsideContext].methodName = binding.expression
+    el[clickoutsideContext].bindingFn = binding.value
+  },
+  unbind(el) {
+    document.removeEventListener(
+      'click',
+      el[clickoutsideContext].documentHandler
+    )
+  }
+}