n20-common-lib 1.3.24 → 1.3.27

package/nstc-g6/components/NstcForm/UploadCustom/index.vue

@@ -1,500 +1,500 @@
-<template>
-  <div
-    :key="key"
-    :class="[
-      'upload-custom',
-      { 'is-multiple': multiple || valueClassification.img.length }
-    ]"
-    :style="{ width: `${_width}px` }"
-  >
-    <input
-      v-if="isChoosing"
-      ref="fileInput"
-      type="file"
-      :multiple="multiple"
-      @change="handleFileChange"
-    />
-    <el-button
-      v-if="!isView"
-      :loading="loading"
-      :icon="_icon"
-      :disabled="_disabled"
-      class="button-cancel"
-      @click="chooseFile"
-    >
-      <span>{{ text }}</span>
-    </el-button>
-
-    <template v-if="showFile">
-      <template v-if="!multiple && valueClassification.other.length">
-        <div v-if="fileName" class="upload-file-name" :title="fileName">
-          {{ fileName }}
-        </div>
-        <el-button
-          v-if="fileName"
-          class="upload-file-delete"
-          type="text"
-          @click="handleClickFileBtn"
-        >
-          {{ fileBtnName }}
-        </el-button>
-      </template>
-      <template v-else>
-        <div class="upload-file-other">
-          <div
-            v-for="(item, index) in valueClassification.other"
-            :key="index"
-            class="upload-file-other-item"
-          >
-            <div class="upload-file-name" :title="item.fileName">
-              {{ item.fileName }}
-            </div>
-            <el-button
-              class="upload-file-other-delete"
-              type="text"
-              @click="handleClickFileBtn(item)"
-            >
-              {{ fileBtnName }}
-            </el-button>
-          </div>
-        </div>
-        <div class="upload-file-img">
-          <div
-            v-for="(item, index) in valueClassification.img"
-            :key="index"
-            class="upload-file-img-item"
-          >
-            <el-image
-              :src="item.fileUrl"
-              :preview-src-list="getPreviewSrcList(index)"
-            />
-            <img
-              v-if="!isView"
-              :src="closeImg"
-              alt="#"
-              @click="handleDelete(item)"
-            />
-          </div>
-        </div>
-      </template>
-    </template>
-  </div>
-</template>
-
-<script>
-import closeImg from './iconxitongshezhi-yichu.png'
-
-import axios from '../../../../src/utils/axios'
-// import OSS from 'ali-oss'
-
-export default {
-  name: 'UploadCustom',
-
-  inheritAttrs: false,
-
-  props: {
-    text: {
-      type: String,
-      default: function () {
-        return '请选择附件'
-      }
-    },
-
-    icon: {
-      type: String,
-      default: undefined
-    },
-
-    value: {
-      // 值格式为单选{ fileName,fileUrl }/{ fileName,file },或者多选[{ fileName,fileUrl }]/[{ fileName,file }]
-      type: [Object, Array],
-      default: null
-    },
-
-    valueIsFileUrl: {
-      // true时，值返回格式为{ fileName,fileUrl }；false时，值返回格式为{ fileName,file }（file为文件类型）
-      type: Boolean,
-      default: false
-    },
-
-    url: {
-      // 上传到自定义服务器的url
-      type: String,
-      default: null
-    },
-
-    disabled: {
-      // 是否禁用
-      type: Boolean,
-      default: false
-    },
-
-    showFile: {
-      // 是否展示长传结果
-      type: Boolean,
-      default: true
-    },
-
-    validator: {
-      // 上传前的验证，参数为typeCode（文件头前8位，用于检测文件真实格式）, raw（文件buffer对象）
-      type: Function,
-      default: null
-    },
-
-    beforeChooseFile: {
-      // 选择文件前的前置函数
-      type: Function,
-      default: null
-    },
-
-    width: {
-      type: [String, Number],
-      default: undefined
-    },
-
-    max: {
-      // 多选时，最大上传文件个数
-      type: Number,
-      default: 5
-    },
-
-    multiple: {
-      // 是否支持多选
-      type: Boolean,
-      default: false
-    },
-
-    isView: {
-      // 是否仅查看
-      type: Boolean,
-      default: false
-    },
-
-    storeAsPrefix: {
-      // ali-oss上传路径前缀
-      type: String,
-      default: ''
-    }
-  },
-
-  data() {
-    return {
-      key: `UploadCustomID-${Math.random().toString(36).slice(2)}`,
-
-      loading: false,
-      isChoosing: false,
-      revokeObjectURL: [],
-      closeImg
-    }
-  },
-
-  computed: {
-    _value: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-        this.$emit('change', val)
-      }
-    },
-
-    fileName() {
-      return !this.multiple && this._value && this._value.fileName
-        ? this._value.fileName
-        : ''
-    },
-
-    _width() {
-      return this.width ? (this.width + '').replace(/px/, '') : undefined
-    },
-
-    _icon() {
-      return this.icon ? this.icon : undefined
-    },
-
-    _disabled() {
-      return (
-        this.disabled ||
-        (Array.isArray(this._value) && this._value.length >= this.max)
-      )
-    },
-
-    valueClassification() {
-      const _value = this.multiple
-        ? this._value
-        : this._value
-        ? [this._value]
-        : []
-      const reg = /\.(png|jpg|gif|jpeg)$/
-
-      return _value.reduce(
-        (prev, file, index) => {
-          if (reg.test(file.fileName)) {
-            let fileUrl = ''
-
-            if (file.fileUrl) {
-              fileUrl = file.fileUrl
-            } else {
-              fileUrl = window.URL.createObjectURL(file.file)
-              this.revokeObjectURL.push(fileUrl)
-            }
-
-            prev.img.push({
-              fileUrl,
-              index,
-              ...file
-            })
-          } else {
-            prev.other.push({
-              ...file,
-              index
-            })
-          }
-
-          return prev
-        },
-        { img: [], other: [] }
-      )
-    },
-
-    getPreviewSrcList() {
-      return (index) => {
-        const imgUrls = this.valueClassification.img.map((item) => item.fileUrl)
-
-        return imgUrls.slice(index).concat(imgUrls.slice(0, index))
-      }
-    },
-
-    fileBtnName() {
-      return this.isView ? '下载' : '删除'
-    }
-  },
-
-  beforeDestroy() {
-    this.revokeObjectURL.forEach((fileUrl) =>
-      window.URL.revokeObjectURL(fileUrl)
-    )
-  },
-
-  methods: {
-    async chooseFile() {
-      try {
-        this.isChoosing = true
-        this.beforeChooseFile && (await this.beforeChooseFile())
-
-        await this.$nextTick()
-
-        this.$refs.fileInput.click()
-      } catch (err) {
-        console.error(err)
-        // this.$$message(err)
-      }
-    },
-
-    async handleFileChange(e) {
-      this.loading = true
-      this.isChoosing = false
-
-      try {
-        const files = Array.from(e.target.files)
-
-        await this.fileMaxCheck(files)
-        await Promise.all(files.map((file) => this.fileTypeCheck(file)))
-
-        const value = await Promise.all(
-          files.map((file) => this.singleFileUpload(file))
-        )
-
-        this._value = this.multiple ? [...this._value, ...value] : value[0]
-      } catch (err) {
-        // this.$$message(err.reason || '上传失败')
-      }
-
-      this.loading = false
-    },
-
-    async singleFileUpload(file) {
-      try {
-        const fileName = file.name
-
-        if (this.valueIsFileUrl) {
-          let fileUrl = ''
-
-          if (this.url) {
-            const fd = new FormData()
-
-            fd.append('file', file)
-
-            fileUrl = await axios.post(this.url, fd, {
-              headers: {
-                'Content-Type': 'multipart/form-data'
-              }
-            })
-          } else {
-          }
-
-          return {
-            fileUrl,
-            fileName
-          }
-        }
-
-        return {
-          file,
-          fileName
-        }
-      } catch (err) {
-        return Promise.reject(err)
-      }
-    },
-
-    handleClickFileBtn(item) {
-      if (this.isView) {
-        window.open(item.fileUrl)
-      } else {
-        this.handleDelete(item)
-      }
-    },
-
-    handleDelete(item) {
-      if (this.multiple) {
-        this._value.splice(item.index, 1)
-      } else {
-        this._value = null
-      }
-    },
-
-    fileTypeCheck(raw) {
-      const _this = this
-
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader()
-
-        reader.onload = async function (r) {
-          try {
-            const buffer = r.target.result
-            const dataview = new DataView(buffer)
-            const ints = new Uint16Array(buffer.byteLength)
-
-            for (let i = 0; i < 4; i++) {
-              ints[i] = dataview.getUint8(i)
-            }
-
-            const typeCode = ints
-              .reduce((acc, val) => acc + val.toString(16), '')
-              .slice(0, 8)
-              .toLowerCase()
-
-            if (typeof _this.validator === 'function') {
-              await _this.validator(typeCode, raw)
-            }
-
-            resolve()
-          } catch (err) {
-            reject(err)
-          }
-        }
-
-        reader.readAsArrayBuffer(raw)
-      })
-    },
-
-    fileMaxCheck(files) {
-      return new Promise((resolve, reject) => {
-        if (this.multiple && files.length + this._value.length > this.max) {
-          reject({ reason: `最多上传文件数：${this.max}` })
-        }
-
-        resolve()
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.upload-custom {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  padding-right: 32px;
-  &.is-multiple {
-    display: inline-block;
-  }
-
-  .button-cancel {
-    flex: none;
-    width: auto;
-    display: inline-flex;
-    align-items: center;
-    i {
-      margin-right: 6px;
-      font-size: 9px;
-    }
-  }
-
-  input {
-    display: none;
-  }
-
-  .upload-file {
-    &-name {
-      font-size: 14px;
-      padding-left: 10px;
-      flex: auto;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &-delete {
-      position: absolute;
-      top: 9px;
-      right: 0;
-    }
-
-    &-other {
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: 5px;
-      &-item {
-        flex: none;
-        display: flex;
-        align-items: center;
-        margin-right: 40px;
-        .upload-file-name {
-          padding-left: 0;
-          padding-right: 10px;
-        }
-      }
-    }
-
-    &-img {
-      display: flex;
-      margin-top: 5px;
-      flex-wrap: wrap;
-      &-item {
-        flex: none;
-        margin-right: 10px;
-        position: relative;
-        .el-image {
-          width: 72px;
-          height: 72px;
-          background-color: #fff;
-          border-radius: 2px;
-          border: #cfd8e6;
-        }
-        & > img {
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: 16px;
-          height: 16px;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :key="key"
+    :class="[
+      'upload-custom',
+      { 'is-multiple': multiple || valueClassification.img.length }
+    ]"
+    :style="{ width: `${_width}px` }"
+  >
+    <input
+      v-if="isChoosing"
+      ref="fileInput"
+      type="file"
+      :multiple="multiple"
+      @change="handleFileChange"
+    />
+    <el-button
+      v-if="!isView"
+      :loading="loading"
+      :icon="_icon"
+      :disabled="_disabled"
+      class="button-cancel"
+      @click="chooseFile"
+    >
+      <span>{{ text }}</span>
+    </el-button>
+
+    <template v-if="showFile">
+      <template v-if="!multiple && valueClassification.other.length">
+        <div v-if="fileName" class="upload-file-name" :title="fileName">
+          {{ fileName }}
+        </div>
+        <el-button
+          v-if="fileName"
+          class="upload-file-delete"
+          type="text"
+          @click="handleClickFileBtn"
+        >
+          {{ fileBtnName }}
+        </el-button>
+      </template>
+      <template v-else>
+        <div class="upload-file-other">
+          <div
+            v-for="(item, index) in valueClassification.other"
+            :key="index"
+            class="upload-file-other-item"
+          >
+            <div class="upload-file-name" :title="item.fileName">
+              {{ item.fileName }}
+            </div>
+            <el-button
+              class="upload-file-other-delete"
+              type="text"
+              @click="handleClickFileBtn(item)"
+            >
+              {{ fileBtnName }}
+            </el-button>
+          </div>
+        </div>
+        <div class="upload-file-img">
+          <div
+            v-for="(item, index) in valueClassification.img"
+            :key="index"
+            class="upload-file-img-item"
+          >
+            <el-image
+              :src="item.fileUrl"
+              :preview-src-list="getPreviewSrcList(index)"
+            />
+            <img
+              v-if="!isView"
+              :src="closeImg"
+              alt="#"
+              @click="handleDelete(item)"
+            />
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+import closeImg from './iconxitongshezhi-yichu.png'
+
+import axios from '../../../../src/utils/axios'
+// import OSS from 'ali-oss'
+
+export default {
+  name: 'UploadCustom',
+
+  inheritAttrs: false,
+
+  props: {
+    text: {
+      type: String,
+      default: function () {
+        return '请选择附件'
+      }
+    },
+
+    icon: {
+      type: String,
+      default: undefined
+    },
+
+    value: {
+      // 值格式为单选{ fileName,fileUrl }/{ fileName,file },或者多选[{ fileName,fileUrl }]/[{ fileName,file }]
+      type: [Object, Array],
+      default: null
+    },
+
+    valueIsFileUrl: {
+      // true时，值返回格式为{ fileName,fileUrl }；false时，值返回格式为{ fileName,file }（file为文件类型）
+      type: Boolean,
+      default: false
+    },
+
+    url: {
+      // 上传到自定义服务器的url
+      type: String,
+      default: null
+    },
+
+    disabled: {
+      // 是否禁用
+      type: Boolean,
+      default: false
+    },
+
+    showFile: {
+      // 是否展示长传结果
+      type: Boolean,
+      default: true
+    },
+
+    validator: {
+      // 上传前的验证，参数为typeCode（文件头前8位，用于检测文件真实格式）, raw（文件buffer对象）
+      type: Function,
+      default: null
+    },
+
+    beforeChooseFile: {
+      // 选择文件前的前置函数
+      type: Function,
+      default: null
+    },
+
+    width: {
+      type: [String, Number],
+      default: undefined
+    },
+
+    max: {
+      // 多选时，最大上传文件个数
+      type: Number,
+      default: 5
+    },
+
+    multiple: {
+      // 是否支持多选
+      type: Boolean,
+      default: false
+    },
+
+    isView: {
+      // 是否仅查看
+      type: Boolean,
+      default: false
+    },
+
+    storeAsPrefix: {
+      // ali-oss上传路径前缀
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      key: `UploadCustomID-${Math.random().toString(36).slice(2)}`,
+
+      loading: false,
+      isChoosing: false,
+      revokeObjectURL: [],
+      closeImg
+    }
+  },
+
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+        this.$emit('change', val)
+      }
+    },
+
+    fileName() {
+      return !this.multiple && this._value && this._value.fileName
+        ? this._value.fileName
+        : ''
+    },
+
+    _width() {
+      return this.width ? (this.width + '').replace(/px/, '') : undefined
+    },
+
+    _icon() {
+      return this.icon ? this.icon : undefined
+    },
+
+    _disabled() {
+      return (
+        this.disabled ||
+        (Array.isArray(this._value) && this._value.length >= this.max)
+      )
+    },
+
+    valueClassification() {
+      const _value = this.multiple
+        ? this._value
+        : this._value
+        ? [this._value]
+        : []
+      const reg = /\.(png|jpg|gif|jpeg)$/
+
+      return _value.reduce(
+        (prev, file, index) => {
+          if (reg.test(file.fileName)) {
+            let fileUrl = ''
+
+            if (file.fileUrl) {
+              fileUrl = file.fileUrl
+            } else {
+              fileUrl = window.URL.createObjectURL(file.file)
+              this.revokeObjectURL.push(fileUrl)
+            }
+
+            prev.img.push({
+              fileUrl,
+              index,
+              ...file
+            })
+          } else {
+            prev.other.push({
+              ...file,
+              index
+            })
+          }
+
+          return prev
+        },
+        { img: [], other: [] }
+      )
+    },
+
+    getPreviewSrcList() {
+      return (index) => {
+        const imgUrls = this.valueClassification.img.map((item) => item.fileUrl)
+
+        return imgUrls.slice(index).concat(imgUrls.slice(0, index))
+      }
+    },
+
+    fileBtnName() {
+      return this.isView ? '下载' : '删除'
+    }
+  },
+
+  beforeDestroy() {
+    this.revokeObjectURL.forEach((fileUrl) =>
+      window.URL.revokeObjectURL(fileUrl)
+    )
+  },
+
+  methods: {
+    async chooseFile() {
+      try {
+        this.isChoosing = true
+        this.beforeChooseFile && (await this.beforeChooseFile())
+
+        await this.$nextTick()
+
+        this.$refs.fileInput.click()
+      } catch (err) {
+        console.error(err)
+        // this.$$message(err)
+      }
+    },
+
+    async handleFileChange(e) {
+      this.loading = true
+      this.isChoosing = false
+
+      try {
+        const files = Array.from(e.target.files)
+
+        await this.fileMaxCheck(files)
+        await Promise.all(files.map((file) => this.fileTypeCheck(file)))
+
+        const value = await Promise.all(
+          files.map((file) => this.singleFileUpload(file))
+        )
+
+        this._value = this.multiple ? [...this._value, ...value] : value[0]
+      } catch (err) {
+        // this.$$message(err.reason || '上传失败')
+      }
+
+      this.loading = false
+    },
+
+    async singleFileUpload(file) {
+      try {
+        const fileName = file.name
+
+        if (this.valueIsFileUrl) {
+          let fileUrl = ''
+
+          if (this.url) {
+            const fd = new FormData()
+
+            fd.append('file', file)
+
+            fileUrl = await axios.post(this.url, fd, {
+              headers: {
+                'Content-Type': 'multipart/form-data'
+              }
+            })
+          } else {
+          }
+
+          return {
+            fileUrl,
+            fileName
+          }
+        }
+
+        return {
+          file,
+          fileName
+        }
+      } catch (err) {
+        return Promise.reject(err)
+      }
+    },
+
+    handleClickFileBtn(item) {
+      if (this.isView) {
+        window.open(item.fileUrl)
+      } else {
+        this.handleDelete(item)
+      }
+    },
+
+    handleDelete(item) {
+      if (this.multiple) {
+        this._value.splice(item.index, 1)
+      } else {
+        this._value = null
+      }
+    },
+
+    fileTypeCheck(raw) {
+      const _this = this
+
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+
+        reader.onload = async function (r) {
+          try {
+            const buffer = r.target.result
+            const dataview = new DataView(buffer)
+            const ints = new Uint16Array(buffer.byteLength)
+
+            for (let i = 0; i < 4; i++) {
+              ints[i] = dataview.getUint8(i)
+            }
+
+            const typeCode = ints
+              .reduce((acc, val) => acc + val.toString(16), '')
+              .slice(0, 8)
+              .toLowerCase()
+
+            if (typeof _this.validator === 'function') {
+              await _this.validator(typeCode, raw)
+            }
+
+            resolve()
+          } catch (err) {
+            reject(err)
+          }
+        }
+
+        reader.readAsArrayBuffer(raw)
+      })
+    },
+
+    fileMaxCheck(files) {
+      return new Promise((resolve, reject) => {
+        if (this.multiple && files.length + this._value.length > this.max) {
+          reject({ reason: `最多上传文件数：${this.max}` })
+        }
+
+        resolve()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.upload-custom {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  padding-right: 32px;
+  &.is-multiple {
+    display: inline-block;
+  }
+
+  .button-cancel {
+    flex: none;
+    width: auto;
+    display: inline-flex;
+    align-items: center;
+    i {
+      margin-right: 6px;
+      font-size: 9px;
+    }
+  }
+
+  input {
+    display: none;
+  }
+
+  .upload-file {
+    &-name {
+      font-size: 14px;
+      padding-left: 10px;
+      flex: auto;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &-delete {
+      position: absolute;
+      top: 9px;
+      right: 0;
+    }
+
+    &-other {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 5px;
+      &-item {
+        flex: none;
+        display: flex;
+        align-items: center;
+        margin-right: 40px;
+        .upload-file-name {
+          padding-left: 0;
+          padding-right: 10px;
+        }
+      }
+    }
+
+    &-img {
+      display: flex;
+      margin-top: 5px;
+      flex-wrap: wrap;
+      &-item {
+        flex: none;
+        margin-right: 10px;
+        position: relative;
+        .el-image {
+          width: 72px;
+          height: 72px;
+          background-color: #fff;
+          border-radius: 2px;
+          border: #cfd8e6;
+        }
+        & > img {
+          position: absolute;
+          right: 0;
+          top: 0;
+          width: 16px;
+          height: 16px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>