doway-coms 1.5.7 → 1.5.9

package/packages/BasePictureCard/src/index.vue

@@ -1,561 +1,561 @@
-<template>
-  <div style="display: inline-block">
-    <div class="file-card" :class="isStyle? 'currentHeight' : ''">
-      <div
-        class="attach-wrapper"
-        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.attach)"
-              :style="{ height: height, lineHeight: height, width: width }"
-              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>
-            <img
-              @click="attachFileClick(internalRow.attach)"
-              :style="{ height: height, lineHeight: height, width: width }"
-              :data-mimetype="internalRow.attach.contentType"
-            />
-            <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
-            :style="{ width: width }"
-            :title="internalRow.attach.name"
-            style="
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            "
-          >
-            {{ internalRow.attach.name }}
-          </div>
-        </template>
-      </div>
-      <a-upload
-        class="avatar-uploader"
-        :headers="uploadHeaders"
-        :action="uploadData.picAction"
-        :data="uploadData"
-        v-if="edit === true"
-        @change="handleAvatarSuccess"
-        :showUploadList="false"
-        :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 }"
-          />
-        </div>
-      </a-upload>
-      <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 } from "ant-design-vue";
-import { sysRowState } from "../../utils/enum";
-import { Checkbox, Modal } from "vxe-table";
-import { attachGetAttachUrlApi, attachSearchApi } from "../../utils/api";
-
-export default {
-  name: "BasePictureCard",
-  components: {
-    VxeCheckbox: Checkbox,
-    "a-upload": Upload,
-    VxeModal: Modal,
-  },
-  data() {
-    return {
-      demo1: "",
-      demo2: "",
-      internalServiceUrl: "",
-      downFilePath: "",
-      downFileName: "",
-      isShowPdf: false,
-      pdfData: null,
-      internalUrls: [],
-      internalRows: [],
-      picName: [],
-      dialogImageUrl: "",
-      dialogViewType: "",
-      sysRowState: sysRowState,
-      dialogVisible: false,
-      uploadData: {
-        picType: "",
-        picAction: "",
-        resId: "",
-      },
-      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: String,
-      default: "100px",
-    },
-    height: {
-      type: String,
-      default: "100px",
-    },
-    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);
-  },
-  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) {},
-    handleAvatarSuccess(info) {
-      if (info.file.status == "done") {
-        let addRow = {
-          attachId: info.file.response.content.id,
-          sysRowState: sysRowState.add,
-          attach: info.file.response.content,
-        };
-
-        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;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.file-card {
-  display: flex;
-  flex-flow: row wrap;
-  margin: 0 0 5px 5px;
-
-  .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">
+    <div class="file-card" :class="isStyle? 'currentHeight' : ''">
+      <div
+        class="attach-wrapper"
+        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.attach)"
+              :style="{ height: height, lineHeight: height, width: width }"
+              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>
+            <img
+              @click="attachFileClick(internalRow.attach)"
+              :style="{ height: height, lineHeight: height, width: width }"
+              :data-mimetype="internalRow.attach.contentType"
+            />
+            <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
+            :style="{ width: width }"
+            :title="internalRow.attach.name"
+            style="
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            "
+          >
+            {{ internalRow.attach.name }}
+          </div>
+        </template>
+      </div>
+      <a-upload
+        class="avatar-uploader"
+        :headers="uploadHeaders"
+        :action="uploadData.picAction"
+        :data="uploadData"
+        v-if="edit === true"
+        @change="handleAvatarSuccess"
+        :showUploadList="false"
+        :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 }"
+          />
+        </div>
+      </a-upload>
+      <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 } from "ant-design-vue";
+import { sysRowState } from "../../utils/enum";
+import { Checkbox, Modal } from "vxe-table";
+import { attachGetAttachUrlApi, attachSearchApi } from "../../utils/api";
+
+export default {
+  name: "BasePictureCard",
+  components: {
+    VxeCheckbox: Checkbox,
+    "a-upload": Upload,
+    VxeModal: Modal,
+  },
+  data() {
+    return {
+      demo1: "",
+      demo2: "",
+      internalServiceUrl: "",
+      downFilePath: "",
+      downFileName: "",
+      isShowPdf: false,
+      pdfData: null,
+      internalUrls: [],
+      internalRows: [],
+      picName: [],
+      dialogImageUrl: "",
+      dialogViewType: "",
+      sysRowState: sysRowState,
+      dialogVisible: false,
+      uploadData: {
+        picType: "",
+        picAction: "",
+        resId: "",
+      },
+      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: String,
+      default: "100px",
+    },
+    height: {
+      type: String,
+      default: "100px",
+    },
+    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);
+  },
+  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) {},
+    handleAvatarSuccess(info) {
+      if (info.file.status == "done") {
+        let addRow = {
+          attachId: info.file.response.content.id,
+          sysRowState: sysRowState.add,
+          attach: info.file.response.content,
+        };
+
+        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;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.file-card {
+  display: flex;
+  flex-flow: row wrap;
+  margin: 0 0 5px 5px;
+
+  .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>