equipment/src/views/bjd/sjse/upload_list_20200721.vue

<template>
  <center>
    <div style="width: 60%;text-align: left;margin-top: 20px;">
      <span style="font-size: 20px;font-weight: bold;">{{ uploadType }}</span><span>(支持上传PDF以及Jpeg\Png图片格式)</span>
      <div slot="tip" class="el-upload__tip" style="font-size: 14px">
        默认图片大小不超过2M,PDF文件不超过8M。超过大小请访问<a href="https://docsmall.com/" target="_blank"><span style="color: #00afff">https://docsmall.com/</span></a>压缩后在上传。
        <br>
        <span style="color: red;">图片上传前如存在颠倒方向请纠正后在上传！！！PDF压缩后请保证文件内容清晰度（建议强力压缩）。</span>
      </div>
      <fieldset v-for="list in listDicData" :key="list.title">
        <legend>{{ list.title }}</legend>
        <el-upload
          :action="url"
          :headers="headers"
          accept="image/jpeg,image/png,.pdf"
          multiple
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="getListDic"
          :file-list="list.picList"
          :limit="list.counts"
          :on-exceed="handleExceed"
          :before-upload="beforeAvatarUpload"
          :data="{filesId: list.id, zhonglei: list.zhonglei, bjdId: bjdId, bjdParamId: bjdParamId}"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </fieldset>
    </div>
    <el-dialog :visible.sync="dialogSblbVisible" title="请按项目及电梯型号分类上传">
      <!-- 相应的字典数据都存在字典表中 暂时无通过程序引用 -->
      <el-button @click="checkSbzl('30001')">
        曳引驱动乘客电梯
      </el-button>
      <el-button @click="checkSbzl('30002')">
        曳引驱动载货电梯
      </el-button>
      <el-button @click="checkSbzl('30003')">
        既有住宅增设电梯
      </el-button>
      <el-button @click="checkSbzl('30004')">
        自动扶梯与自动人行道
      </el-button>
      <el-button @click="checkSbzl('30005')">
        液压电梯
      </el-button>
      <el-button @click="checkSbzl('30006')">
        杂物电梯
      </el-button>
      <el-button @click="checkSbzl('30007')">
        消防员电梯
      </el-button>
      <el-button @click="checkSbzl('30008')">
        防爆电梯
      </el-button>
      <el-button @click="checkSbzl('30009')">
        改造和重大修理
      </el-button>
    </el-dialog>
  </center>
</template>

<script>
export default {
  name: 'WenjianSjse',
  data() {
    return {
      url: process.env.VUE_APP_BJD_API + 'bjdfiles/upload',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      dialogSblbVisible: false,
      parentId: '40000',
      zhonglei: this.$route.params.sbzl,
      uploadType: '通用资料',
      bjdId: window.atob(this.$route.params.bjid),
      bjdParamId: this.$route.params.bjparamid,
      listDicData: [],
      headers: {
        'Authorization': this.$route.query.tkey
      }
    }
  },
  created() {
    switch (this.$route.params.zlzl) {
      case 'tyzl' :
        this.uploadType = '通用资料'
        break
      case 'xssy' :
        this.uploadType = '型式试验合格证'
        break
      case 'ztzl' :
        this.uploadType = '逐台资料'
        break
    }
    localStorage.setItem('token', this.$route.query.tkey)
  },
  mounted() {
    if (this.bjdParamId === undefined) {
      this.bjdParamId = 0
    }
    if (this.zhonglei === '3000') {
      this.dialogSblbVisible = true
    } else {
      this.getListDic()
    }
  },
  methods: {
    checkSbzl(val) {
      this.dialogSblbVisible = false
      this.parentId = val
      this.getListDic()
    },
    getListDic() {
      this.apibjd({
        url: '/bjdfilesdic/getListDic',
        method: 'get',
        params: {
          id: this.parentId,
          zllx: this.uploadType,
          bjdid: this.bjdId,
          paramId: this.bjdParamId
        }
      }).then(data => {
        this.listDicData = data
        this.listDicData.forEach(list => {
          list.picList.forEach(pic => {
            pic.url = process.env.VUE_APP_IMG_URL + pic.url
          })
        })
      })
    },
    handleRemove(file) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.apibjd({
          url: '/bjdfiles/delFiles',
          method: 'delete',
          params: {
            id: file.id,
            name: file.name
          }
        }).then(data => {
          if (data.returnCode === '100') {
            this.$message({ message: '删除成功！！', type: 'success' })
          } else {
            this.$message({ message: '删除失败！！', type: 'error' })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
        this.getListDic()
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 8
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 8MB!')
      }
      return isLt2M
    },
    handleExceed(files, fileList) {
      this.$message.error('上传文件数超出限制，请控制在' + fileList.length + '个以内。')
    }
  }
}
</script>

<style scoped>

</style>