first commit

pgweb/src/components/table-td-file-upload/file-upload.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="file-upload">
+    <div class="attach-container">
+      <span class="file" v-for="(item, index) in uploadList" :key='index'>
+        {{item.name}}
+        <Icon style="padding-left: 10px;cursor: pointer;" type="ios-eye-outline" @click.native="handleView(item)"></Icon>
+        <Icon style="padding-left: 10px;cursor: pointer;" type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
+      </span>
+    </div>
+    <Upload
+      class="com_upload"
+      :style='width ? "width: " + width : "width: 15%"'
+      ref="upload"
+      :show-upload-list="false"
+      :default-file-list="defaultList"
+      :on-success="handleSuccess"
+      :format="format || defaultFormat"
+      :max-size="$config.maxSize"
+      :on-format-error="handleFormatError"
+      :on-exceeded-size="handleMaxSize"
+      :before-upload="handleUpload"
+      multiple
+      type="drag"
+      name="pic"
+      :headers="uploadHeader"
+      :action="isUploadUrl == 'fbb'?$config.appUploadUrl:$config.uploadUrl"
+    >
+      <div>{{btnName || '上传附件' }}</div>
+    </Upload>
+    <div class="images" v-show="visible" v-viewer="{navbar: false}">
+      <img :src="url" />
+    </div>
+  </div>
+</template>
+
+<script>
+import store from 'store'
+export default {
+  props: [
+    'haveUpload', // 编辑时接收后端传回的数据
+    'isCanUploadVideo',
+    'getFlieList', // 编辑时的附件文件
+    'isUploadUrl', // fbb=app上传地址，zc=pc上传地址
+    'maxLength', // 文件上传件数
+    'format', // 上传文件的格式
+    'width', // 上传附件按钮的宽度
+    'btnName' // 上传按钮的名字
+  ],
+  data () {
+    return {
+      url: '',
+      visible: false,
+      uploadList: [], // 上传成功之后后端返回的图片数组
+      defaultList: [], // 默认已上传的文件列表
+      uploadHeader: {},
+      defaultFormat: ['jpg', 'png', 'jpeg', 'doc', 'docx', 'xls', 'xlsx', 'pdf']
+    }
+  },
+  created () {
+    this.init()
+    if (this.isCanUploadVideo) {
+      this.defaultFormat = ['jpg', 'png', 'jpeg', 'doc', 'docx', 'xls', 'xlsx', 'pdf', 'mp4',
+        'mpeg', '.mpg', 'avi', 'mov', 'wmv', 'mkv', 'flv']
+    }
+
+    if (this.getFlieList) {
+      this.uploadList = this.getFlieList
+    }
+  },
+  methods: {
+    init () {
+      this.uploadHeader = { 'ApiAuth': store.get('apiAuth') }
+    },
+    handleFormatError (file) {
+      this.$Notice.warning({
+        title: '文件类型不合法',
+        desc: file.name + '的文件类型不正确，请上传后缀为jpg、png、doc、docx、xls、xlsx、pdf的文件。'
+      })
+    },
+    handleSuccess (response, file, fileList) {
+      this.$emit('getFilelist', { response, fileList })
+      if (response.code === 1) {
+        this.uploadList = fileList
+      }
+    },
+    handleUpload (file) {
+      const check = this.uploadList.length < this.maxLength
+      if (!check) {
+        this.$Notice.warning({
+          title: `最多上传${this.maxLength}份文件`
+        })
+      }
+      return check
+    },
+    handleMaxSize (file) {
+      this.$Notice.warning({
+        title: '文件大小不合法',
+        desc: file.name + '太大啦请上传小于10M的文件。'
+      })
+    },
+    handleRemove (file) {
+      this.uploadList.splice(this.uploadList.indexOf(file), 1)
+    },
+    handleView (item) {
+      let type = ''
+      if (item.ext) {
+        type = item.ext.toLowerCase()
+      } else if (item.response) {
+        type = (item.response.data.ext || '').toLowerCase()
+      }
+      if (type === 'jpg' || type === 'png' || type === 'jpeg') {
+        this.url = item.url ? item.url : item.response.data.url
+        this.visible = false
+        // viewer插件 需要延迟一点才能点一次展示出图片 - -..
+        setTimeout(() => {
+          const viewer = this.$el.querySelector('.images').$viewer
+          viewer.show()
+        }, 100)
+      } else {
+        // window.open(item.response.data.url)
+        this.url = item.url ? item.url : item.response.data.url
+        window.open(this.url, item.name)
+      }
+    }
+  },
+  computed: {
+  },
+  watch: {
+    haveUpload: function (newV, oldV) {
+      if (newV) {
+        this.defaultList = newV
+        this.uploadList = newV
+      }
+    }
+  },
+  mounted () {
+  }
+}
+</script>
+
+<style lang="less">
+  .com_upload {
+    float: right;
+    // height: 72px;
+    // line-height: 70px;
+    background: #f1f5ff;
+    color: #4e97d9;
+    cursor: pointer;
+    border-left: 1px solid #e6e6e6;
+  }
+</style>