shijiplus-web-plugin 0.1.35 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shijiplus-web-plugin",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "files": [
     "src"
   ],

package/src/components/plus-comp/index.js

@@ -1,4 +1,4 @@
-const compFiles = ['plus-tag', 'plus-table-v2', 'plus-icon', 'plus-city-cascader', 'plus-count-down', 'plus-city-cascader', 'plus-common-header', 'plus-poptip', 'plus-qr-code', 'plus-drawer', 'plus-tabs', 'plus-remote-selector', 'plus-select', 'plus-form', 'plus-scrollview', 'plus-table', 'plus-modal', 'plus-card', 'permission-component']
+const compFiles = ['plus-input', 'plus-tag', 'plus-table-v2', 'plus-icon', 'plus-city-cascader', 'plus-count-down', 'plus-city-cascader', 'plus-common-header', 'plus-poptip', 'plus-qr-code', 'plus-drawer', 'plus-tabs', 'plus-remote-selector', 'plus-select', 'plus-form', 'plus-scrollview', 'plus-table', 'plus-modal', 'plus-card', 'permission-component']
 
 const install = (vue, opts = {}) => {
   console.log('--------install---plus-comp----------')

package/src/components/plus-comp/plus-input/plus-input.vue

@@ -0,0 +1,76 @@
+<template>
+  <div :class="`plus-input i-flex-wrap nowrap ${type}`">
+    <Input
+      v-model="mValue"
+      :type="type"
+      :rows="mRows"
+      :autosize="mAutosize"
+      :placeholder="placeholder"
+      :maxlength="maxlength"
+    />
+    <span class="counter">{{ (mValue || '').length }}/{{ maxlength }}</span>
+  </div>
+</template>
+<script>
+export default {
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    value: [Number, String],
+    placeholder: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    maxlength: {
+      type: Number,
+      default: null
+    }
+  },
+  watch: {
+    type: {
+      handler(val) {
+        if (val == 'textarea') {
+          this.mRows = 3
+        }
+      },
+      immediate: true
+    },
+    value: {
+      handler(val) {
+        this.mValue = val
+      },
+      immediate: true
+    },
+    mValue: {
+      handler(nVal) {
+        this.$emit('input', nVal)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  data() {
+    return {
+      mValue: null,
+      mRows: 2,
+      mAutosize: { minRows: 2, maxRows: 6 }
+    }
+  },
+  methods: {}
+}
+</script>
+<style lang="less" scoped>
+.plus-input {
+  .counter {
+    font-size: 12px;
+  }
+  &.textarea {
+    .counter {
+      margin-top: auto;
+    }
+  }
+}
+</style>

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>

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

@@ -0,0 +1,402 @@
+<template>
+  <div class="plus-upload">
+    <div class="i-flex-wrap">
+      <div
+        class="demo-upload-list"
+        :key="item.id"
+        v-for="(item, index) in uploadList"
+      >
+        <template v-if="item.status === 'finished'">
+          <img @click="handleView(item.name)" :src="item.url" />
+          <Icon
+            v-if="!disabled"
+            @click.native="handleRemove(item, index)"
+            type="md-close-circle"
+            size="16"
+            color=""
+          />
+        </template>
+        <template v-else-if="item.showProgress">
+          <p class="f-s-14 f-w-400">上传中</p>
+          <Progress
+            :percent="item.percentage"
+            :stroke-width="4"
+            hide-info
+          ></Progress>
+        </template>
+      </div>
+      <Upload
+        v-if="!disabled"
+        ref="upload"
+        :show-upload-list="false"
+        :default-file-list="defaultFiles"
+        :on-success="handleSuccess"
+        :format="['jpg', 'jpeg', 'png', 'gif']"
+        accept="image/*"
+        :headers="headers"
+        :max-size="fileMaxSize"
+        :on-format-error="handleFormatError"
+        :on-exceeded-size="handleMaxSize"
+        :on-progress="handleProgress"
+        :before-upload="handleBeforeUpload"
+        :disabled="disabled"
+        multiple
+        type="drag"
+        :action="action || baseUrl + 'api/open/common/image/uploadDefaultImage'"
+        :class="{ hideUpload: remainderCount <= 0 }"
+      >
+        <div class="icon-wrap">
+          <Icon :type="'ios-add'" size="40"></Icon>
+          <p class="f-s-14 f-w-400">{{ imgTitle }}</p>
+        </div>
+      </Upload>
+    </div>
+    <p v-if="defaultHint" style="color: #ccc; line-height: 20px">
+      最多上传{{ maxUploadFiles }}张图片，文件格式为png，jepg，jpg，或gif
+    </p>
+    <p v-if="hintText" class="f-s-12 f-w-400 upload-tips">{{ hintText }}</p>
+    <p class="f-s-12 f-w-400 upload-tips">
+      <slot name="tips"></slot>
+    </p>
+    <edit-modal title="查看图片" :show="visible">
+      <img
+        slot="editslot"
+        :src="imgName"
+        v-if="visible"
+        style="max-height: 100%; width: 100%"
+      />
+      <Row slot="bottom" type="flex" justify="center">
+        <Button @click="visible = false">关闭</Button>
+      </Row>
+    </edit-modal>
+  </div>
+</template>
+<script>
+import config from '@/config'
+import store from '@/store'
+import Emitter from 'iview/src/mixins/emitter'
+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',
+  mixins: [Emitter],
+  props: {
+    imgTitle: {
+      type: String,
+      default: '添加图片'
+    },
+    defaultHint: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    hintText: {
+      type: String,
+      default: ''
+    },
+    showImgList: {
+      default: () => {
+        return undefined
+      }
+    },
+    imagePath: {
+      default: undefined
+    },
+    addIconType: {
+      default: 'ios-camera'
+    },
+    maxUploadFiles: {
+      default: 1
+    },
+    maxSize: {
+      default: 200
+    },
+    sizeUnit: {
+      default: 1024
+    },
+    sizeUnitStr: {
+      default: 'MB'
+    },
+    action: {
+      default: ''
+    }
+  },
+  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: {
+      deep: true,
+      immediate: true,
+      handler(value) {
+        this.$nextTick(() => {
+          if (this.$refs.upload && this.$refs.upload.fileList.length > 0) {
+            let uploadingImgs = this.$refs.upload.fileList.filter((item) => {
+              return item.status === 'uploading' // 不用改变status值
+            })
+            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: {
+    handleView(name) {
+      this.imgName = name
+      this.visible = true
+    },
+    handleRemove(file, index) {
+      this.$refs.upload.fileList.splice(index, 1)
+      this.uploadList = this.$refs.upload.fileList
+      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 })
+        } else {
+          this.showImgList.splice(index, 1)
+        }
+      }
+      this.dispatch('FormItem', 'on-form-change', this.uploadList)
+    },
+    handleSuccess(res, file) {
+      if (this.action) {
+        // 对新露的上传接口做兼容， 他用的是其他字段
+        res.data.path = res.data.accessURL
+      }
+      if (!res.data) {
+        console.log(res)
+        file.status = 'fail'
+        this.$Notice.error({
+          title: `上传失败`,
+          desc: res.codex + ':' + res.message
+        })
+        this.uploadList.forEach((item, index) => {
+          if (item.status == 'fail') {
+            this.uploadList.splice(index, 1)
+          }
+        })
+        this.remainderCount++
+        return
+      }
+      if (!res.data.path) {
+        console.log(res)
+        file.status = 'fail'
+        this.$Notice.error({
+          title: `上传失败`,
+          desc: res.message
+        })
+        this.uploadList.forEach((item, index) => {
+          if (item.status == 'fail') {
+            this.uploadList.splice(index, 1)
+          }
+        })
+        this.remainderCount++
+        return
+      }
+      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 })
+      } else {
+        if (this.maxUploadFiles === 1) {
+          if (this.$containKey(this.$options.propsData, 'imagePath')) {
+            this.$emit('on-upload-complete', {
+              res: res,
+              file: file,
+              target: this
+            })
+          } else {
+            this.showImgList.splice(0, this.showImgList.length)
+            this.showImgList.push(res.data.path)
+          }
+        } else {
+          this.showImgList.push(res.data.path)
+        }
+      }
+      this.dispatch('FormItem', 'on-form-change', this.uploadList)
+    },
+    handleFormatError(file) {
+      this.remainderCount++
+      this.$Notice.warning({
+        title: '文件格式错误',
+        desc: '只能上传 jpeg, jpg 或 png 文件.'
+      })
+    },
+    handleMaxSize(file) {
+      this.remainderCount++
+      console.log('-------handleMaxSize----------')
+      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
+    },
+    // 图片上传进度
+    handleProgress(event, file, fileList) {
+      if (file) {
+        file.showProgress = true
+        file.status = 'uploading'
+        file.percentage = event.percent || 100
+        const hasThisUrl =
+          this.uploadList.filter((item) => {
+            return item.uid == file.uid
+          }).length > 0
+        if (!hasThisUrl) {
+          // file.url = file.response.result
+          this.uploadList.push(file)
+        }
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
+<style lang="less" scoped>
+.hideUpload {
+  display: none !important;
+}
+.demo-upload-list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 112px;
+  height: 112px;
+  border: 1px solid #dcdee2;
+  border-radius: 4px;
+  margin-right: 16px;
+  .f-s-14 {
+    margin-bottom: 12px;
+    color: #515a6e;
+  }
+  .ivu-icon-md-close-circle {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-color: #fff;
+    border-radius: 50%;
+  }
+}
+.demo-upload-list img {
+  display: block;
+  margin: auto;
+  width: 104px;
+  height: 104px;
+  border-radius: 4px;
+  object-fit: contain;
+}
+.plus-upload {
+  .upload-tips {
+    color: #9ea7b4;
+    margin-top: 12px;
+  }
+  .ivu-progress {
+    line-height: 1;
+    width: ~'calc(100% - 16px)';
+  }
+  .ivu-upload {
+    display: inline-block;
+    width: 112px;
+    height: 112px;
+    background: #f8f8f9;
+    border-radius: 4px;
+  }
+  /deep/.ivu-upload-drag {
+    width: 112px;
+    height: 112px;
+    background: #f8f8f9;
+    .icon-wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      width: 112px;
+      height: 112px;
+      .f-s-14 {
+        margin-top: 12px;
+        color: #515a6e;
+      }
+    }
+  }
+}
+</style>

package/src/index.js

@@ -5,6 +5,9 @@ import ExtentionPlugin from './extentionPlugin'
 import importDirective from './directive'
 import PlusComp from './components/plus-comp'
 import BeginEndDatePicker from './components/begin-end-date-picker'
+import UploadFileSingle from './components/upload-file/upload-file-single'
+import UploadFile from './components/upload-file/upload-file'
+import UploadFileInput from './components/upload-file/upload-file-input'
 
 console.log('--------web-tool---index.js----------')
 
@@ -19,6 +22,9 @@ export default {
   install(vue, opts = {}) {
     vue.use(PlusComp)
     vue.component('BeginEndDatePicker', BeginEndDatePicker)
+    vue.component('UploadFileSingle', UploadFileSingle)
+    vue.component('UploadFile', UploadFile)
+    vue.component('UploadFileInput', UploadFileInput)
     /**
      * 注册指令
      */