doway-coms 2.11.11 → 2.11.13

package/packages/BasePictureCard/src/index.vue

@@ -1,671 +1,671 @@
-<template>
-  <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"
-        :style="{ width: width+'px' }"
-        v-for="internalRow in internalRows.filter(
-          (x) => x.sysRowState != 'delete'
-        )"
-        :key="internalRow.attach.fileName"
-      >
-        <template v-if="internalRow.sysRowState !== sysRowState.delete">
-          <slot name='header' :row="internalRow"></slot>
-          <div class="attach" v-if="internalRow.attach.content === 'image'">
-            <img
-              @click="attachFileClick(internalRow)"
-              :style="{ height: height+'px', lineHeight: height+'px', width: width+'px' }"
-              style="
-                border: 1px solid #ccc;
-                border-radius: 6px;
-                overflow: hidden;
-                margin: 0;
-                padding: 0;
-              "
-              :src="`${internalServiceUrl}/GetAttachFile/${internalRow.attach.id}?accessToken=${$store.getters.token}`"
-            />
-            <a-icon
-              class="attach-delete"
-              type="close-circle"
-              @click="removeAttach(internalRow.attach)"
-              v-if="edit === true"
-            />
-            <a-icon
-              class="attach-download"
-              type="download"
-              @click="downloadAttach(internalRow.attach)"
-            />
-            <a-icon
-              class="attach-view"
-              type="eye"
-              @click="viewAttach(internalRow.attach)"
-            />
-          </div>
-          <div class="attach" v-else-if="internalRow.attach.contentType == 'application/pdf'">
-            <img
-              @click="attachFileClick(internalRow)"
-              :style="{ height: height+'px', lineHeight: height+'px', width: width+'px' }"
-              src="../../styles/icon/pdf_file.svg"
-            />
-            <a-icon
-              class="attach-delete"
-              type="close-circle"
-              v-if="edit === true"
-              @click="removeAttach(internalRow.attach)"
-            />
-            <a-icon
-              class="attach-download"
-              type="download"
-              @click="downloadAttach(internalRow.attach)"
-            />
-            <a-icon
-              class="attach-view"
-              type="eye"
-              @click="viewAttach(internalRow.attach)"
-            />
-          </div>
-          <div class="attach" v-else>
-            <img
-              @click="attachFileClick(internalRow)"
-              :style="{ height: height+'px', lineHeight: height+'px', width: width +'px'}"
-              src="../../styles/icon/uploaded_file.svg"
-              :data-mimetype="internalRow.attach.contentType"
-            />
-            <a-icon
-              class="attach-delete"
-              type="close-circle"
-              @click="removeAttach(internalRow.attach)"
-              v-if="edit === true"
-            />
-            <a-icon
-              class="attach-download"
-              type="download"
-              @click="downloadAttach(internalRow.attach)"
-            />
-          </div>
-          <div
-            :style="{ width: width }"
-            :title="internalRow.attach.name"
-            style="
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            "
-          >
-            {{ internalRow.attach.name }}
-          </div>
-        </template>
-      </div>
-         <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"
-        @change="handleAvatarSuccess"
-        :showUploadList="false"
-        :before-upload="beforeAvatarUpload"
-      >
-          <a-icon
-            type="plus"
-            class="avatar-uploader-icon"
-            :style="{ width: width+'px', height: height+'px', lineHeight: height+'px' }"
-            style="text-align: center;"
-          />
-        </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>
-    </div>
-    <VxeModal
-      v-model="dialogVisible"
-      show-zoom
-      transfer
-      resize
-      :height="550"
-      :width="800"
-      destroy-on-close
-      :fullscreen="dialogViewType == 'application/pdf'"
-      :z-index="999"
-    >
-      <template #title>
-        <span>{{ currentFileTitle }}</span>
-      </template>
-      <!-- pdf -->
-      <embed
-        v-if="dialogViewType == 'application/pdf'"
-        :src="dialogImageUrl"
-        :type="dialogViewType"
-        width="100%"
-        height="100%"
-      />
-      <!-- 普通图片 -->
-      <img width="90%" height="auto" :src="dialogImageUrl" v-else />
-    </VxeModal>
-  </div>
-</template>
-
-<script>
-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'
-export default {
-  name: "BasePictureCard",
-  components: {
-    VxeCheckbox: Checkbox,
-    "a-upload": Upload,
-    VxeModal: Modal,
-    'a-spin':Spin
-  },
-  directives: {
-    clickoutside
-  },
-  data() {
-    return {
-      uploading:false,
-      currentSelectId:null,
-      uploadFileList:[],
-      demo1: "",
-      demo2: "",
-      internalServiceUrl: "",
-      downFilePath: "",
-      downFileName: "",
-      isShowPdf: false,
-      pdfData: null,
-      internalUrls: [],
-      internalRows: [],
-      picName: [],
-      dialogImageUrl: "",
-      dialogViewType: "",
-      sysRowState: sysRowState,
-      dialogVisible: false,
-      uploadData: {
-        picType: "",
-        picAction: "",
-        resId: "",
-      },
-      pasteFile:null,
-      uploadHeaders: {
-        Authorization: null,
-      },
-      currentFileTitle: ''
-    };
-  },
-  props: {
-    isStyle: {
-      type: Boolean,
-      default: false,
-    },
-    showEmptyText: {
-      type: Boolean,
-      default: true,
-    },
-    picType: {
-      type: String,
-      default: "cust",
-    },
-    value: {
-      type: String,
-    },
-    resId: {
-      type: String,
-    },
-    dataName: {
-      type: String,
-    },
-    edit: {
-      // 列信息
-      type: Boolean,
-    },
-    limitSize: {
-      // 限制上传大小
-      type: Number,
-      default: 5,
-    },
-    limitType: {
-      // 限制上传类型
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-    formRow: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    width: {
-      type: Number,
-      default: 100,
-    },
-    height: {
-      type: Number,
-      default: 100,
-    },
-    rows: {
-      // 表格数据
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    cols: {
-      // 表格列信息
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    formState: {
-      // 表格列信息
-      type: String,
-      default: "",
-    },
-  },
-  watch: {
-    rows: {
-      handler: function (newVal) {
-        this.getAttachInfo(newVal);
-      },
-      deep: true,
-    },
-    resId: {
-      handler: function (newVal) {
-        this.uploadData.resId = newVal;
-      },
-    },
-  },
-  created() {
-  },
-  mounted() {
-    // 请求头加入token
-    this.uploadHeaders.Authorization = `Bearer ${this.$store.getters.token}`;
-
-    this.internalServiceUrl = attachGetAttachUrlApi();
-    this.uploadData.picType = this.picType;
-    this.uploadData.resId = this.resId;
-    this.uploadData.picAction = this.internalServiceUrl + "/UploadAttach";
-    this.getAttachInfo(this.rows);
-
-    this.$refs.updateLoadContentView.addEventListener('paste', async (e) => {
-      e.preventDefault();
-      await this.pasteFileClick(e)
-    })
-
-  },
-  methods: {
-    getCurrentToken() {
-      return this.$store.getters.token;
-    },
-    /**
-     * 获取附件信息
-     */
-    getAttachInfo(newRows) {
-      let attachIds = [];
-      for (let i = 0; i < newRows.length; i++) {
-        if (newRows[i].attach) {
-          continue;
-        }
-        attachIds.push(newRows[i].attachId);
-        newRows[i].attach = {
-          fileName: "",
-          contentType: "",
-          content: "",
-          name: "",
-          id: newRows[i].attachId,
-        };
-      }
-      if (attachIds.length == 0) {
-        this.internalRows = newRows;
-        return;
-      }
-      let postData = {
-        fields: "id,fileName,contentType,name,content,isDefault",
-        begin: 1,
-        size: 0,
-        exp: "id in (",
-      };
-      for (let i = 0; i < attachIds.length; i++) {
-        postData.exp = postData.exp + attachIds[i] + ",";
-      }
-      let vm = this;
-      postData.exp = postData.exp.substr(0, postData.exp.length - 1) + ")";
-      attachSearchApi(postData)
-        .then((responseData) => {
-          for (let i = 0; i < responseData.content.length; i++) {
-            for (let x = 0; x < newRows.length; x++) {
-              if (responseData.content[i].id === newRows[x].attachId) {
-                newRows[x].attach.fileName = responseData.content[i].fileName;
-                newRows[x].attach.name = responseData.content[i].name;
-                newRows[x].attach.content = responseData.content[i].content;
-                newRows[x].attach.contentType =
-                  responseData.content[i].contentType;
-                // newRows[x].attach.isDefault = false
-                break;
-              }
-            }
-          }
-          vm.internalRows = newRows;
-        })
-        .catch(() => {});
-    },
-    attachFileClick(attachFile) {
-        // console.debug('attachFileClick',attachFile)
-    },
-    handleAvatarSuccess(info) {
-      if (info.file.status == "done") {
-        let addRow = {
-          attachId: info.file.response.content.id,
-          sysRowState: sysRowState.add,
-          attach: info.file.response.content,
-        };
-        console.debug('addRow',addRow)
-
-        this.internalRows.push(addRow);
-        let tempField;
-        for (let i = 0; i < this.cols.length; i++) {
-          // 赋值关联字段数据
-          let tempValue = addRow;
-          tempField = this.cols[i].field;
-          if (this.cols[i].isAuto) {
-            tempValue[tempField] = this.$store.getters.newId() + "";
-            continue;
-          }
-          if (
-            this.cols[i].controlType === "text" &&
-            this.cols[i].linkValueField !== null &&
-            this.cols[i].linkValueField !== "" &&
-            this.cols[i].linkValueField !== undefined
-          ) {
-            tempValue[tempField] = this.formRow[this.cols[i].linkValueField];
-          }
-        }
-        this.$emit(
-          "add",
-          this.dataName,
-          info.file.response.content
-        );
-      }
-    },
-    beforeAvatarUpload(file) {
-      // const isPic = file.type === 'image/jpeg' || file.type === 'image/png'
-      if (file.size / 1024 / 1024 > this.limitSize) {
-        notification.error({
-          message: "错误",
-          description: "上传图片大小不能超过 " + this.limitSize + "MB!",
-        });
-      }
-      if (this.limitType.length > 0 && !this.limitType[file.type]) {
-        notification.error({
-          message: "错误",
-          description: "上传附件格式错误!",
-        });
-      }
-      return true;
-    },
-    handleRemove(file, fileList) {
-      // this.dialogVisible =  !this.dialogVisible
-      // alert(this.dialogVisible)
-      this.internalUrls = fileList;
-      this.$emit("remove", this.dataName, file.response.data);
-      // this.$emit('remove', this.dataName, file.response.data)
-    },
-    circleAttach(attachFile, internalRow) {
-      let vm = this;
-      //  if(internalRow.isDefault == true){
-      this.internalRows.forEach((element) => {
-        if (element.id !== internalRow.id) {
-          element.isDefault = false;
-        }
-      });
-      //  }
-    },
-    removeAttach(attachFile) {
-      for (let i = 0; i < this.internalRows.length; i++) {
-        if (this.internalRows[i].attachId === attachFile.id) {
-          if (this.internalRows[i].sysRowState === sysRowState.add) {
-            this.internalRows.splice(i, 1);
-          } else {
-            this.$set(this.internalRows[i], "sysRowState", sysRowState.delete);
-          }
-          break;
-        }
-      }
-      this.$emit("remove", attachFile.id);
-    },
-    downloadAttach(attachFile) {
-      window.open(
-        this.internalServiceUrl +
-          "/DownAttachFile/" +
-          attachFile.id +
-          `?accessToken=${this.$store.getters.token}`
-      );
-    },
-    /**
-     * 查看附件
-     */
-    viewAttach(attachFile) {
-      if (attachFile.contentType === "application/pdf") {
-        this.dialogImageUrl = `${this.internalServiceUrl}/GetAttachFile/${attachFile.id}?accessToken=${this.$store.getters.token}`;
-        this.dialogViewType = attachFile.contentType;
-        this.dialogVisible = true;
-      } else if (attachFile.content === "image") {
-        this.dialogImageUrl = `${this.internalServiceUrl}/GetAttachFile/${attachFile.id}?accessToken=${this.$store.getters.token}`;
-        this.dialogViewType = attachFile.contentType;
-        this.dialogVisible = true;
-      }
-      this.currentFileTitle = attachFile.name
-    },
-    closePdf() {
-      this.isShowPdf = false;
-    },
-    /**
-     * 黏贴附件
-     */
-     async pasteFileClick(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/')) {
-            //  this.pasteFile  = URL.createObjectURL(item)
-            //'复制文件'+this.$store.getters.newId() +'.png'
-            // 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();
-            // reader.onload = (e) => {
-            //   console.debug(e)
-            //   // 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()
-    },
-    async uploadPasteFile(){
-      
-    }
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.file-card {
-  display: flex;
-  flex-flow: row wrap;
-  margin: 0 0 5px 5px;
-  height:120px;
-
-  .attach-wrapper {
-    .attach {
-      position: relative;
-      margin-right: 5px;
-
-      .attach-delete {
-        position: absolute;
-        top: -2px;
-        right: -4px;
-        opacity: 0;
-        font-size: 20px;
-        background-color: red;
-      }
-
-      .attach-delete:hover {
-        cursor: pointer;
-      }
-
-      .attach-download {
-        position: absolute;
-        bottom: 10px;
-        left: 4px;
-        opacity: 0;
-        font-size: 18px;
-        font-weight: bolder;
-        border: 1px solid #ccc;
-        border-radius: 50%;
-        border-color: transparent;
-        //background-color: rgb(255, 1, 1);
-        color: #000;
-      }
-
-      .attach-download:hover {
-        cursor: pointer;
-        color: rgb(189, 8, 8);
-      }
-
-      .attach-view {
-        position: absolute;
-        bottom: 10px;
-        right: 4px;
-        opacity: 0;
-        font-size: 18px;
-        font-weight: bolder;
-        border: 1px solid #ccc;
-        border-radius: 50%;
-        border-color: transparent;
-        //background-color: #666;
-        color: #000;
-      }
-
-      .attach-circle {
-        position: absolute;
-        // bottom: 10px;
-        top: 2px;
-        left: 4px;
-        opacity: 0;
-      }
-
-      .attach-view:hover {
-        cursor: pointer;
-        color: rgb(189, 8, 8);
-      }
-    }
-
-    .attach:hover > .attach-delete {
-      opacity: 0.8;
-    }
-
-    .attach:hover > .attach-download {
-      opacity: 0.7;
-    }
-
-    .attach:hover > .attach-view {
-      opacity: 0.7;
-    }
-
-    .attach:hover > .attach-circle {
-      opacity: 0.9;
-    }
-  }
-}
-
-.avatar-uploader .el-upload {
-  border: 1px solid #d9d9d9;
-
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  // width: 178px;
-  // height: 178px;
-  line-height: 178px;
-  text-align: center;
-}
-
-.avatar {
-  // width: 178px;
-  // height: 178px;
-  display: block;
-}
-
-.el-upload-list__item is-success {
-  float: left;
-}
-.currentHeight {
-  display: flex;
-  align-items: center;
-}
-</style>
+<template>
+  <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"
+        :style="{ width: width+'px' }"
+        v-for="internalRow in internalRows.filter(
+          (x) => x.sysRowState != 'delete'
+        )"
+        :key="internalRow.attach.fileName"
+      >
+        <template v-if="internalRow.sysRowState !== sysRowState.delete">
+          <slot name='header' :row="internalRow"></slot>
+          <div class="attach" v-if="internalRow.attach.content === 'image'">
+            <img
+              @click="attachFileClick(internalRow)"
+              :style="{ height: height+'px', lineHeight: height+'px', width: width+'px' }"
+              style="
+                border: 1px solid #ccc;
+                border-radius: 6px;
+                overflow: hidden;
+                margin: 0;
+                padding: 0;
+              "
+              :src="`${internalServiceUrl}/GetAttachFile/${internalRow.attach.id}?accessToken=${$store.getters.token}`"
+            />
+            <a-icon
+              class="attach-delete"
+              type="close-circle"
+              @click="removeAttach(internalRow.attach)"
+              v-if="edit === true"
+            />
+            <a-icon
+              class="attach-download"
+              type="download"
+              @click="downloadAttach(internalRow.attach)"
+            />
+            <a-icon
+              class="attach-view"
+              type="eye"
+              @click="viewAttach(internalRow.attach)"
+            />
+          </div>
+          <div class="attach" v-else-if="internalRow.attach.contentType == 'application/pdf'">
+            <img
+              @click="attachFileClick(internalRow)"
+              :style="{ height: height+'px', lineHeight: height+'px', width: width+'px' }"
+              src="../../styles/icon/pdf_file.svg"
+            />
+            <a-icon
+              class="attach-delete"
+              type="close-circle"
+              v-if="edit === true"
+              @click="removeAttach(internalRow.attach)"
+            />
+            <a-icon
+              class="attach-download"
+              type="download"
+              @click="downloadAttach(internalRow.attach)"
+            />
+            <a-icon
+              class="attach-view"
+              type="eye"
+              @click="viewAttach(internalRow.attach)"
+            />
+          </div>
+          <div class="attach" v-else>
+            <img
+              @click="attachFileClick(internalRow)"
+              :style="{ height: height+'px', lineHeight: height+'px', width: width +'px'}"
+              src="../../styles/icon/uploaded_file.svg"
+              :data-mimetype="internalRow.attach.contentType"
+            />
+            <a-icon
+              class="attach-delete"
+              type="close-circle"
+              @click="removeAttach(internalRow.attach)"
+              v-if="edit === true"
+            />
+            <a-icon
+              class="attach-download"
+              type="download"
+              @click="downloadAttach(internalRow.attach)"
+            />
+          </div>
+          <div
+            :style="{ width: width }"
+            :title="internalRow.attach.name"
+            style="
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            "
+          >
+            {{ internalRow.attach.name }}
+          </div>
+        </template>
+      </div>
+         <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"
+        @change="handleAvatarSuccess"
+        :showUploadList="false"
+        :before-upload="beforeAvatarUpload"
+      >
+          <a-icon
+            type="plus"
+            class="avatar-uploader-icon"
+            :style="{ width: width+'px', height: height+'px', lineHeight: height+'px' }"
+            style="text-align: center;"
+          />
+        </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>
+    </div>
+    <VxeModal
+      v-model="dialogVisible"
+      show-zoom
+      transfer
+      resize
+      :height="550"
+      :width="800"
+      destroy-on-close
+      :fullscreen="dialogViewType == 'application/pdf'"
+      :z-index="999"
+    >
+      <template #title>
+        <span>{{ currentFileTitle }}</span>
+      </template>
+      <!-- pdf -->
+      <embed
+        v-if="dialogViewType == 'application/pdf'"
+        :src="dialogImageUrl"
+        :type="dialogViewType"
+        width="100%"
+        height="100%"
+      />
+      <!-- 普通图片 -->
+      <img width="90%" height="auto" :src="dialogImageUrl" v-else />
+    </VxeModal>
+  </div>
+</template>
+
+<script>
+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'
+export default {
+  name: "BasePictureCard",
+  components: {
+    VxeCheckbox: Checkbox,
+    "a-upload": Upload,
+    VxeModal: Modal,
+    'a-spin':Spin
+  },
+  directives: {
+    clickoutside
+  },
+  data() {
+    return {
+      uploading:false,
+      currentSelectId:null,
+      uploadFileList:[],
+      demo1: "",
+      demo2: "",
+      internalServiceUrl: "",
+      downFilePath: "",
+      downFileName: "",
+      isShowPdf: false,
+      pdfData: null,
+      internalUrls: [],
+      internalRows: [],
+      picName: [],
+      dialogImageUrl: "",
+      dialogViewType: "",
+      sysRowState: sysRowState,
+      dialogVisible: false,
+      uploadData: {
+        picType: "",
+        picAction: "",
+        resId: "",
+      },
+      pasteFile:null,
+      uploadHeaders: {
+        Authorization: null,
+      },
+      currentFileTitle: ''
+    };
+  },
+  props: {
+    isStyle: {
+      type: Boolean,
+      default: false,
+    },
+    showEmptyText: {
+      type: Boolean,
+      default: true,
+    },
+    picType: {
+      type: String,
+      default: "cust",
+    },
+    value: {
+      type: String,
+    },
+    resId: {
+      type: String,
+    },
+    dataName: {
+      type: String,
+    },
+    edit: {
+      // 列信息
+      type: Boolean,
+    },
+    limitSize: {
+      // 限制上传大小
+      type: Number,
+      default: 5,
+    },
+    limitType: {
+      // 限制上传类型
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    formRow: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    width: {
+      type: Number,
+      default: 100,
+    },
+    height: {
+      type: Number,
+      default: 100,
+    },
+    rows: {
+      // 表格数据
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    cols: {
+      // 表格列信息
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    formState: {
+      // 表格列信息
+      type: String,
+      default: "",
+    },
+  },
+  watch: {
+    rows: {
+      handler: function (newVal) {
+        this.getAttachInfo(newVal);
+      },
+      deep: true,
+    },
+    resId: {
+      handler: function (newVal) {
+        this.uploadData.resId = newVal;
+      },
+    },
+  },
+  created() {
+  },
+  mounted() {
+    // 请求头加入token
+    this.uploadHeaders.Authorization = `Bearer ${this.$store.getters.token}`;
+
+    this.internalServiceUrl = attachGetAttachUrlApi();
+    this.uploadData.picType = this.picType;
+    this.uploadData.resId = this.resId;
+    this.uploadData.picAction = this.internalServiceUrl + "/UploadAttach";
+    this.getAttachInfo(this.rows);
+
+    this.$refs.updateLoadContentView.addEventListener('paste', async (e) => {
+      e.preventDefault();
+      await this.pasteFileClick(e)
+    })
+
+  },
+  methods: {
+    getCurrentToken() {
+      return this.$store.getters.token;
+    },
+    /**
+     * 获取附件信息
+     */
+    getAttachInfo(newRows) {
+      let attachIds = [];
+      for (let i = 0; i < newRows.length; i++) {
+        if (newRows[i].attach) {
+          continue;
+        }
+        attachIds.push(newRows[i].attachId);
+        newRows[i].attach = {
+          fileName: "",
+          contentType: "",
+          content: "",
+          name: "",
+          id: newRows[i].attachId,
+        };
+      }
+      if (attachIds.length == 0) {
+        this.internalRows = newRows;
+        return;
+      }
+      let postData = {
+        fields: "id,fileName,contentType,name,content,isDefault",
+        begin: 1,
+        size: 0,
+        exp: "id in (",
+      };
+      for (let i = 0; i < attachIds.length; i++) {
+        postData.exp = postData.exp + attachIds[i] + ",";
+      }
+      let vm = this;
+      postData.exp = postData.exp.substr(0, postData.exp.length - 1) + ")";
+      attachSearchApi(postData)
+        .then((responseData) => {
+          for (let i = 0; i < responseData.content.length; i++) {
+            for (let x = 0; x < newRows.length; x++) {
+              if (responseData.content[i].id === newRows[x].attachId) {
+                newRows[x].attach.fileName = responseData.content[i].fileName;
+                newRows[x].attach.name = responseData.content[i].name;
+                newRows[x].attach.content = responseData.content[i].content;
+                newRows[x].attach.contentType =
+                  responseData.content[i].contentType;
+                // newRows[x].attach.isDefault = false
+                break;
+              }
+            }
+          }
+          vm.internalRows = newRows;
+        })
+        .catch(() => {});
+    },
+    attachFileClick(attachFile) {
+        // console.debug('attachFileClick',attachFile)
+    },
+    handleAvatarSuccess(info) {
+      if (info.file.status == "done") {
+        let addRow = {
+          attachId: info.file.response.content.id,
+          sysRowState: sysRowState.add,
+          attach: info.file.response.content,
+        };
+        console.debug('addRow',addRow)
+
+        this.internalRows.push(addRow);
+        let tempField;
+        for (let i = 0; i < this.cols.length; i++) {
+          // 赋值关联字段数据
+          let tempValue = addRow;
+          tempField = this.cols[i].field;
+          if (this.cols[i].isAuto) {
+            tempValue[tempField] = this.$store.getters.newId() + "";
+            continue;
+          }
+          if (
+            this.cols[i].controlType === "text" &&
+            this.cols[i].linkValueField !== null &&
+            this.cols[i].linkValueField !== "" &&
+            this.cols[i].linkValueField !== undefined
+          ) {
+            tempValue[tempField] = this.formRow[this.cols[i].linkValueField];
+          }
+        }
+        this.$emit(
+          "add",
+          this.dataName,
+          info.file.response.content
+        );
+      }
+    },
+    beforeAvatarUpload(file) {
+      // const isPic = file.type === 'image/jpeg' || file.type === 'image/png'
+      if (file.size / 1024 / 1024 > this.limitSize) {
+        notification.error({
+          message: "错误",
+          description: "上传图片大小不能超过 " + this.limitSize + "MB!",
+        });
+      }
+      if (this.limitType.length > 0 && !this.limitType[file.type]) {
+        notification.error({
+          message: "错误",
+          description: "上传附件格式错误!",
+        });
+      }
+      return true;
+    },
+    handleRemove(file, fileList) {
+      // this.dialogVisible =  !this.dialogVisible
+      // alert(this.dialogVisible)
+      this.internalUrls = fileList;
+      this.$emit("remove", this.dataName, file.response.data);
+      // this.$emit('remove', this.dataName, file.response.data)
+    },
+    circleAttach(attachFile, internalRow) {
+      let vm = this;
+      //  if(internalRow.isDefault == true){
+      this.internalRows.forEach((element) => {
+        if (element.id !== internalRow.id) {
+          element.isDefault = false;
+        }
+      });
+      //  }
+    },
+    removeAttach(attachFile) {
+      for (let i = 0; i < this.internalRows.length; i++) {
+        if (this.internalRows[i].attachId === attachFile.id) {
+          if (this.internalRows[i].sysRowState === sysRowState.add) {
+            this.internalRows.splice(i, 1);
+          } else {
+            this.$set(this.internalRows[i], "sysRowState", sysRowState.delete);
+          }
+          break;
+        }
+      }
+      this.$emit("remove", attachFile.id);
+    },
+    downloadAttach(attachFile) {
+      window.open(
+        this.internalServiceUrl +
+          "/DownAttachFile/" +
+          attachFile.id +
+          `?accessToken=${this.$store.getters.token}`
+      );
+    },
+    /**
+     * 查看附件
+     */
+    viewAttach(attachFile) {
+      if (attachFile.contentType === "application/pdf") {
+        this.dialogImageUrl = `${this.internalServiceUrl}/GetAttachFile/${attachFile.id}?accessToken=${this.$store.getters.token}`;
+        this.dialogViewType = attachFile.contentType;
+        this.dialogVisible = true;
+      } else if (attachFile.content === "image") {
+        this.dialogImageUrl = `${this.internalServiceUrl}/GetAttachFile/${attachFile.id}?accessToken=${this.$store.getters.token}`;
+        this.dialogViewType = attachFile.contentType;
+        this.dialogVisible = true;
+      }
+      this.currentFileTitle = attachFile.name
+    },
+    closePdf() {
+      this.isShowPdf = false;
+    },
+    /**
+     * 黏贴附件
+     */
+     async pasteFileClick(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/')) {
+            //  this.pasteFile  = URL.createObjectURL(item)
+            //'复制文件'+this.$store.getters.newId() +'.png'
+            // 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();
+            // reader.onload = (e) => {
+            //   console.debug(e)
+            //   // 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()
+    },
+    async uploadPasteFile(){
+      
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.file-card {
+  display: flex;
+  flex-flow: row wrap;
+  margin: 0 0 5px 5px;
+  height:120px;
+
+  .attach-wrapper {
+    .attach {
+      position: relative;
+      margin-right: 5px;
+
+      .attach-delete {
+        position: absolute;
+        top: -2px;
+        right: -4px;
+        opacity: 0;
+        font-size: 20px;
+        background-color: red;
+      }
+
+      .attach-delete:hover {
+        cursor: pointer;
+      }
+
+      .attach-download {
+        position: absolute;
+        bottom: 10px;
+        left: 4px;
+        opacity: 0;
+        font-size: 18px;
+        font-weight: bolder;
+        border: 1px solid #ccc;
+        border-radius: 50%;
+        border-color: transparent;
+        //background-color: rgb(255, 1, 1);
+        color: #000;
+      }
+
+      .attach-download:hover {
+        cursor: pointer;
+        color: rgb(189, 8, 8);
+      }
+
+      .attach-view {
+        position: absolute;
+        bottom: 10px;
+        right: 4px;
+        opacity: 0;
+        font-size: 18px;
+        font-weight: bolder;
+        border: 1px solid #ccc;
+        border-radius: 50%;
+        border-color: transparent;
+        //background-color: #666;
+        color: #000;
+      }
+
+      .attach-circle {
+        position: absolute;
+        // bottom: 10px;
+        top: 2px;
+        left: 4px;
+        opacity: 0;
+      }
+
+      .attach-view:hover {
+        cursor: pointer;
+        color: rgb(189, 8, 8);
+      }
+    }
+
+    .attach:hover > .attach-delete {
+      opacity: 0.8;
+    }
+
+    .attach:hover > .attach-download {
+      opacity: 0.7;
+    }
+
+    .attach:hover > .attach-view {
+      opacity: 0.7;
+    }
+
+    .attach:hover > .attach-circle {
+      opacity: 0.9;
+    }
+  }
+}
+
+.avatar-uploader .el-upload {
+  border: 1px solid #d9d9d9;
+
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  // width: 178px;
+  // height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+
+.avatar {
+  // width: 178px;
+  // height: 178px;
+  display: block;
+}
+
+.el-upload-list__item is-success {
+  float: left;
+}
+.currentHeight {
+  display: flex;
+  align-items: center;
+}
+</style>