shijiplus-web-plugin 0.1.34 → 0.1.36

package/src/components/upload-file/upload-file-file.vue

@@ -0,0 +1,222 @@
+<template>
+  <div>
+    <div
+      class="demo-upload-list"
+      :key="item.id"
+      v-show="item.type == showType"
+      v-for="(item, index) in uploadList"
+    >
+      <img v-show="item.type == 'pdf'" src="@/assets/images/pdf.jpeg" />
+      <img v-show="item.type == 'word'" src="@/assets/images/word.jpeg" />
+      <div class="demo-upload-list-cover">
+        <Icon
+          v-if="!disabled"
+          type="ios-trash-outline"
+          @click.native="handleRemove(item, index)"
+        ></Icon>
+      </div>
+    </div>
+    <Upload
+      ref="upload"
+      :show-upload-list="false"
+      :default-file-list="defaultFiles"
+      :on-success="handleSuccess"
+      :format="['pdf', 'docx', 'doc']"
+      :headers="headers"
+      :max-size="fileMaxSize"
+      :on-format-error="handleFormatError"
+      :on-exceeded-size="handleMaxSize"
+      multiple
+      type="drag"
+      :before-upload="handleBeforeUpload"
+      :action="action || baseUrl + 'api/open/common/file/uploadFile'"
+      :class="{ hideUpload: remainderCount <= 0 }"
+      style="display: inline-block; width: 58px"
+    >
+      <div style="width: 58px; height: 58px; line-height: 58px">
+        <Icon :type="addIconType" size="20"></Icon>
+      </div>
+    </Upload>
+  </div>
+</template>
+<script>
+import config from '@/config'
+import store from '@/store'
+const baseUrl = config.plusApiV5Domain()
+let authHeader = {}
+authHeader[config.tokenHeaderName] = store.state.user.token
+authHeader['token'] = store.state.user.token
+authHeader['app_name'] = 'op'
+export default {
+  name: 'upload-file',
+  props: {
+    disabled: {
+      default: false
+    },
+    hintText: {
+      type: String,
+      default: ''
+    },
+    filePath: {
+      default: undefined
+    },
+    addIconType: {
+      default: 'md-cloud-upload'
+    },
+    maxUploadFiles: {
+      default: 1
+    },
+    maxSize: {
+      default: 20480
+    },
+    action: {
+      default: ''
+    },
+    fileName: {
+      de3fault: ''
+    }
+  },
+  data() {
+    return {
+      headers: authHeader,
+      baseUrl,
+      remainderCount: this.maxUploadFiles,
+      uploadList: [
+        {
+          type: 'pdf',
+          url: '@/assets/images/pdf.jpeg'
+        },
+        {
+          type: 'word',
+          url: '@/assets/images/word.jpeg'
+        }
+      ],
+      showType: '',
+      localFileName: '',
+      defaultFiles: [],
+      fileMaxSize: this.maxSize
+    }
+  },
+  watch: {
+    filePath(value) {
+      this.showType = ''
+      this.$refs.upload.clearFiles()
+      this.remainderCount = this.maxUploadFiles
+      if (!this.$isEmpty(value)) {
+        this.showType =
+          value.slice(value.indexOf('.') + 1) == 'pdf' ? 'pdf' : 'word'
+        this.defaultFiles = []
+        this.remainderCount -= 1
+      }
+    },
+
+    fileName(value) {
+      this.localFileName = value
+    }
+  },
+  methods: {
+    handleRemove(file, index) {
+      this.showType = ''
+      this.remainderCount++
+      if (
+        !this.$isEmpty(this._events) &&
+        typeof this._events['on-remove'] === 'object'
+      ) {
+        this.$emit('on-remove', { index: index, target: this })
+      } else {
+        if (
+          this.maxUploadFiles === 1 &&
+          this.$containKey(this.$options.propsData, 'imagePath')
+        ) {
+          this.$emit('on-remove', { index: index, target: this })
+        }
+      }
+    },
+    handleSuccess(res, file) {
+      this.remainderCount--
+      file.url = res.data.path
+      file.name = res.data.path
+      res.data.fileName = this.localFileName
+      this.showType =
+        res.data.path.slice(res.data.path.indexOf('.') + 1) == 'pdf'
+          ? 'pdf'
+          : 'word'
+      if (
+        !this.$isEmpty(this._events) &&
+        typeof this._events['on-upload-complete'] === 'object'
+      ) {
+        this.$emit('on-upload-complete', { res: res, file: file, target: this })
+      } else {
+        if (this.maxUploadFiles === 1) {
+          if (this.$containKey(this.$options.propsData, 'imagePath')) {
+            this.$emit('on-upload-complete', {
+              res: res,
+              file: file,
+              target: this
+            })
+          }
+        }
+      }
+    },
+    handleFormatError(file) {
+      this.remainderCount++
+      this.$Notice.warning({
+        title: '文件格式错误',
+        desc: '只能上传 word 或 pdf格式的 文件.'
+      })
+    },
+    handleMaxSize(file) {
+      this.remainderCount++
+      this.$Notice.warning({
+        title: '文件超过20M',
+        desc: `文件不能大于20M`
+      })
+    },
+    handleBeforeUpload(data) {
+      this.localFileName = data.name
+    }
+  },
+  mounted() {}
+}
+</script>
+<style>
+.hideUpload {
+  display: none !important;
+}
+.demo-upload-list {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  line-height: 60px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  position: relative;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  margin-right: 4px;
+}
+.demo-upload-list img {
+  width: 100%;
+  height: 100%;
+}
+.demo-upload-list-cover {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+.demo-upload-list:hover .demo-upload-list-cover {
+  display: block;
+}
+.demo-upload-list-cover i {
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+</style>

package/src/components/upload-file/upload-file-input.vue

@@ -0,0 +1,203 @@
+<template>
+  <div id="upload-input">
+    <Upload
+      ref="upload"
+      :show-upload-list="false"
+      :default-file-list="defaultFiles"
+      :on-success="handleSuccess"
+      :format="format"
+      :accept="accept"
+      :headers="headers"
+      :max-size="fileMaxSize"
+      :sizeUnit="sizeUnit"
+      :sizeUnitStr="sizeUnitStr"
+      :on-format-error="handleFormatError"
+      :on-exceeded-size="handleMaxSize"
+      :before-upload="handleBeforeUpload"
+      :multiple="maxUploadFiles > 1"
+      :action="baseUrl + 'api/open/common/file/uploadFile'"
+    >
+      <slot></slot>
+    </Upload>
+  </div>
+</template>
+<script>
+import config from '@/config'
+import store from '@/store'
+const baseUrl = config.plusApiV5Domain()
+let authHeader = {}
+authHeader[config.tokenHeaderName] = store.state.user.token
+authHeader['app_name'] = 'op'
+export default {
+  name: 'UploadFileInput',
+  props: {
+    showImgList: {
+      default: () => {
+        return undefined
+      }
+    },
+    imagePath: {
+      default: undefined
+    },
+    addIconType: {
+      default: 'ios-camera'
+    },
+    accept: {
+      default: 'image/*'
+    },
+    format: {
+      default() {
+        return ['jpg', 'jpeg', 'png', 'gif']
+      }
+    },
+    maxUploadFiles: {
+      default: 1
+    },
+    maxSize: {
+      default: 2
+    },
+    sizeUnit: {
+      default: 1024
+    },
+    sizeUnitStr: {
+      default: 'MB'
+    }
+  },
+  data() {
+    return {
+      headers: authHeader,
+      baseUrl,
+      imgName: '',
+      visible: false,
+      remainderCount: this.maxUploadFiles,
+      uploadList: [],
+      defaultFiles: []
+    }
+  },
+  computed: {
+    fileMaxSize() {
+      return this.maxSize * this.sizeUnit
+    }
+  },
+  watch: {
+    imagePath(value) {
+      this.uploadList = []
+      this.$refs.upload.clearFiles()
+      this.remainderCount = this.maxUploadFiles
+      if (!this.$isEmpty(value)) {
+        if (!this.$isEmpty(this.uploadList)) {
+          this.uploadList.push({
+            name: value,
+            url: value,
+            status: 'finished'
+          })
+        } else {
+          this.uploadList = [{ name: value, url: value, status: 'finished' }]
+        }
+        this.defaultFiles = this.$deepCopy(this.uploadList)
+        this.remainderCount -= this.uploadList.length
+      }
+    },
+    showImgList(value) {
+      if (this.$refs.upload.fileList.length > 0) {
+        let uploadingImgs = this.$refs.upload.fileList.filter((item) => {
+          return item.status === 'uploading'
+        })
+        if (uploadingImgs.length > 0) {
+          return
+        }
+      }
+      this.remainderCount = this.maxUploadFiles
+      this.uploadList = []
+      if (!this.$isEmpty(value)) {
+        value.forEach((item, index) => {
+          this.uploadList.push({
+            name: item,
+            url: item,
+            status: 'finished'
+          })
+        })
+      }
+      this.defaultFiles = this.$deepCopy(this.uploadList)
+      this.remainderCount -= this.uploadList.length
+    }
+  },
+  methods: {
+    handleSuccess(res, file) {
+      const oriFile = this.$deepCopy(file)
+      file.url = res.data.path
+      file.name = res.data.path
+      file.status = 'finished'
+      this.uploadList = this.$refs.upload.fileList
+      if (
+        !this.$isEmpty(this._events) &&
+        typeof this._events['on-upload-complete'] === 'object'
+      ) {
+        this.$emit('on-upload-complete', {
+          res: res,
+          file: file,
+          target: this,
+          oriFile
+        })
+      } else {
+        if (this.maxUploadFiles === 1) {
+          if (this.$containKey(this.$options.propsData, 'imagePath')) {
+            this.$emit('on-upload-complete', {
+              res: res,
+              file: file,
+              target: this,
+              oriFile
+            })
+          } else {
+            if (this.showImgList) {
+              this.showImgList.splice(0, this.showImgList.length)
+              this.showImgList.push(res.data.path)
+            }
+          }
+        } else {
+          if (this.showImgList) {
+            this.showImgList.push(res.data.path)
+          }
+        }
+      }
+    },
+    handleFormatError(file) {
+      this.remainderCount++
+      this.$Notice.warning({
+        title: '文件格式错误',
+        desc: '只能上传 jpeg, jpg 或 png 文件.'
+      })
+    },
+    handleMaxSize(file) {
+      this.remainderCount++
+      this.$Notice.warning({
+        title: `文件超过${this.fileMaxSize / this.sizeUnit}${this.sizeUnitStr}`,
+        desc: `文件不能大于 ${this.fileMaxSize / this.sizeUnit}${
+          this.sizeUnitStr
+        }`
+      })
+    },
+    handleBeforeUpload() {
+      var check = true
+      // if (this.remainderCount <= 0) {
+      //   this.$Notice.warning({
+      //     title: `只能上传 ${this.maxUploadFiles} 张图片.`
+      //   })
+      //   check = false
+      // } else {
+      //   this.remainderCount--
+      // }
+      return check
+    }
+  },
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+#upload-input {
+  width: fit-content !important;
+  .ivu-upload {
+    width: fit-content !important;
+  }
+}
+</style>

package/src/components/upload-file/upload-file-single.vue

@@ -0,0 +1,103 @@
+<template>
+  <upload-file
+    @on-remove="handleRemove"
+    @on-upload-complete="handleSuccess"
+    :showImgList="fileList"
+    :maxUploadFiles="1"
+    :max-size="fileMaxSize"
+    :action="action"
+    :disabled="disabled"
+    :defaultHint="defaultHint"
+    :hintText="hintText"
+    :sizeUnit="sizeUnit"
+    :sizeUnitStr="sizeUnitStr"
+    :imgTitle="imgTitle"
+  >
+    <slot slot="tips" name="tips"></slot>
+  </upload-file>
+</template>
+<script>
+import UploadFile from '_c/upload-file/upload-file'
+export default {
+  name: 'upload-file-single',
+  components: { UploadFile },
+  model: {
+    prop: 'imgPath',
+    event: 'img-changed'
+  },
+  props: {
+    imgTitle: {
+      type: String,
+      default: '添加图片'
+    },
+    placeholder: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    defaultHint: {
+      type: Boolean
+    },
+    hintText: {
+      type: String
+    },
+    imgPath: {
+      default: ''
+    },
+    maxSize: {
+      default: 2048
+    },
+    sizeUnit: {
+      default: 1024
+    },
+    sizeUnitStr: {
+      default: 'MB'
+    },
+    action: ''
+    // imgType: {
+    //   type: Number,
+    //   default: () => {
+    //     return 0
+    //   }
+    // }
+  },
+  data() {
+    return {
+      fileList: [],
+      fileMaxSize: this.maxSize
+    }
+  },
+  watch: {
+    imgPath: {
+      immediate: true,
+      deep: true,
+      handler(value) {
+        if (value && value.length > 0) {
+          this.fileList = [value]
+        } else {
+          this.fileList = []
+        }
+      }
+    }
+  },
+  methods: {
+    handleRemove(event) {
+      this.fileList.splice(event.index, 1)
+      this.$emit('img-changed', null)
+    },
+    handleSuccess(event) {
+      this.fileList.push(event.res.data.path)
+      // 通过判断是否传入其他的url，来判断，后端的上传图片并不是一个统一的接口，
+      let path = event.res.data.path
+      if (this.action) {
+        path = path + '&imgid=' + event.res.data.id
+      }
+      // 兼容后端的垃圾设计， 给后端传ID，
+      this.$emit('img-changed', path)
+    }
+  },
+  mounted() {}
+}
+</script>

package/src/components/upload-file/upload-file-v2.vue

@@ -0,0 +1,68 @@
+<template>
+  <upload-file
+    @on-remove="handleRemove"
+    @on-upload-complete="handleSuccess"
+    :showImgList="fileList"
+    :maxUploadFiles="maxUploadFiles"
+    :add-icon-type="addIconType"
+  >
+  </upload-file>
+</template>
+<script>
+import UploadFile from '_c/upload-file/upload-file'
+export default {
+  name: 'UploadFileV2',
+  components: { UploadFile },
+  model: {
+    prop: 'imgList',
+    event: 'img-list-changed'
+  },
+  props: {
+    imgList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    addIconType: {
+      default: 'ios-camera'
+    },
+    maxUploadFiles: {
+      default: 1
+    }
+    // imgType: {
+    //   type: Number,
+    //   default: () => {
+    //     return 0
+    //   }
+    // }
+  },
+  data() {
+    return {
+      fileList: []
+    }
+  },
+  watch: {
+    imgList(value) {
+      this.fileList = []
+      if (!this.$isEmpty(value)) {
+        value.forEach((item) => {
+          this.fileList.push(item)
+        })
+      }
+    }
+  },
+  methods: {
+    handleRemove(event) {
+      this.fileList.splice(event.index, 1)
+      this.$emit('img-list-changed', this.fileList)
+    },
+    handleSuccess(event) {
+      this.fileList.push(event.res.data.path)
+      this.$emit('img-list-changed', this.fileList)
+    }
+  },
+  mounted() {
+  }
+}
+</script>