使用场景

分类上传附件(先业务后文件）

图例

选择数据后展示批量下载和批量删除功能

勾选数据进行打包下载功能

使用方法

cnpm install rview-c --save

使用组件

<style lang="less">
.materials-demo .ivu-table i {
  color: darkgray !important;
}
</style>
<style scoped>
</style>
<template>
  <div style="margin-top: 50px;margin-left: 50px;margin-right: 50px;" class="materials-demo">
    <HNUploadAttachment
      ref="uploadMaterials"
      :stageId="stageId"
      :dataList="dataList"
      :tenantId="tenantId"
      :userName="userName"
      :multiple="multiple"
      :DeleteUploadFun="DeleteUpload"
      :PreviewUploadFun="PreviewUpload"
      :downloadUrl="downloadUrl"
      :downloadById="downloadById"
      :addOrEdit="addOrEdit"
      :isView="isView"
      :UploadFilesFun="UploadFiles"
      :WebuploaderFun="Webuploader"
      :CreateCodeFun="CreateCode"
      :MD5CheckFun="MD5Check"
      :GetFileFun="GetFile"
      @handle-success="handleSuccess"
      @handle-failed="handleFailed"
      :GetFileRecordFun="GetFileRecord"
      :CreateFileRecordFun="CreateFileRecord"
    ></HNUploadAttachment>
    <div style="margin-top: 95px;text-align:center;">
      <Button type="primary" @click="handleSubmit">业务保存按钮</Button>
      <Button type="primary" @click="getDetail">TEst</Button>
      <Button type="primary" @click="handleCancel">业务取消按钮</Button>
    </div>
  </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import "photo-sphere-viewer/dist/photo-sphere-viewer";
import { DownloadUrl } from "../../../../config/data";
import { DownloadById } from "../../../../config/data";
export default {
  data() {
    return {
      /**
       * 租户Id
       * String
       * 必传
       */
      tenantId: "8eb0122e-3755-4a24-ac33-53868b9a16ad",

      /**
       * 用户姓名
       */
      userName: "xuwenbin",

      /**
       * 列表展示数据
       * Array
       * 必传
       */
      dataList: [

      ],


      /**
       * 新增还是编辑
       * Boolean
       * 必传
       */
      addOrEdit: false,

      /**
       * 下载URl
       * String
       * 必传
       */
      downloadUrl: DownloadUrl,

      /**
       * 单个下载URL
       */
      downloadById: DownloadById,

      /**
       * 是否支持多选文件
       * Boolean
       * 不必传，默认false
       */
      multiple: true,

      /**
       * 是否是查看
       * Boolean
       * 不必传，默认false
       */
      isView: false,

      /**
       * 所属阶段的id
       */
      stageId: "c71dc116-7551-4448-a16f-d102e9d1b00c"   // 工程阶段

    };
  },
  methods: {

    /**
     * 新增前根据对应的阶段id，获取材料附件类型
     */
    getStage() {
     let listParams = {
        sorts: [
          {
            sortName: "",
            sortType: 0
          }
        ],
        filters: [
          {
            name: "stageGuid",
            value: this.stageId,
            fieldType: 0,
            operType: 1
          }
        ],
        pageIndex: -1
      }
      this.$API.Material.ShowData(listParams).then(res =>{
        this.dataList = res.data.result.items;
        this.dataList.forEach((item) => {
          item.name = item.fileTypeName;
          item.num = 0;
          item.isRequired = item.required;
          item.format = item.uploadType.split(',');
          item.attachList = [];
        })
      })
    },


    /**
     * 详情编辑之前根据业务id，获取对应的材料类型以及下面的文件
     */
    getStageAndFile() {
      let id = "f23ee898-5dd3-41fe-9cd2-8a0106292d07";
      let params = {
        FileStageGuid: this.stageId,
        id: id
      };
      this.$API.Upload.getStageAndFile(params).then(res => {
        this.dataList = res.data.result;
        this.dataList.forEach((item) => {
          item.name = item.fileTypeName;
          item.num = item.fileMsgDtos.length;
          item.isRequired = item.required;
          item.format = item.uploadType.split(',');
          item.attachList = item.fileMsgDtos;
          item.attachList.forEach((ele) => {
            ele.name = ele.fileOldName;
            ele.path = ele.filePath;
          })
        })
      });

    },



    /**
     * 获取详情
     */
    getDetail() {

      // 新增
      // this.getStage();

      // 详情和编辑
      this.getStageAndFile();
      this.addOrEdit = true; 
    },
    handleSubmit() {
      // 调用业务保存接口，然后拿到返回的id,调用上传文件的接口
      let id = "f23ee898-5dd3-41fe-9cd2-8a0106292d07";
      // 带着业务id调用上传接口
      this.$refs.uploadMaterials.uploadFun(id);
    },

    handleCancel() {
    // 检查是否有等待上传或者删除的数据，提醒用户
      let waitLength = this.$refs.uploadMaterials.checkFileData();
      debugger
      let waitUploadDataLength = 0;
      if (waitLength.waitUploadDataLength || waitLength.waitDeleteDataLength) {
        this.$Modal.confirm({
          title: "提示",
          content: "<p>您的附件信息尚未保存，确认离开吗?</p>",
          onOk: () => {
            // this.$refs.uploadMaterials.resetFun();
          }
        })
      }
    },

    /**
     * 附件上传成功
     */
    handleSuccess() {
      // 附件上传成功,请继续往下操作
      console.log('附件上传成功,请继续往下操作');
      this.isView = true;
    },
    handleFailed(errInfo) {
      // errInfo  附件上传失败的返回信息
      // 附件上传失败，请继续往下操作
      console.log('附件上传失败，请继续往下操作');
    },


  },
  computed: {
    /**
     * 文件删除接口
     * Function
     * 必传
     */
    DeleteUpload() {
      return this.$API.Upload.DeleteUploadPortrait;
    },

    /**
     * 文件预览接口
     * Function
     * 必传
     */
    PreviewUpload() {
      return this.$API.Upload.FilePreview;
    },

    /**
     * 大文件上传接口(分片) step1
     * Function
     * 必传
     */
    UploadFiles() {
      return this.$API.Upload.UploadFiles;
    },

    /**
     * 大文件上传接口(分片合并) step2
     * Function
     * 必传
     */
    Webuploader() {
      return this.$API.Upload.Webuploader;
    },

    /**
     * 获取提取码
     */
    CreateCode() {
      return this.$API.Upload.CreateCode;
    },

    /**
     * md5码校验
     */
    MD5Check() {
      return this.$API.Upload.MD5Check;
    },

    /**
     * 获取文件信息
     */
    GetFile() {
      return this.$API.Upload.FilePage
    },

    /**
     * 获取文件的回复内容
     */
    GetFileRecord() {
      return this.$API.FileRecord.ShowData
    },

    /**
     * 提交文件的回复内容
     */
    CreateFileRecord() {
      return this.$API.FileRecord.InsertData
    }

  }
};
</script>

API

props

methods

computed

组件内部可被调用的方法

支持类型

可上传文件类型（后缀）	可批量下载	可下载	可预览
jpg	√	√	√
jpeg	√	√	√
png	√	√	√
jfif	√	√	√
gif	√	√	√
xlsx	√	√	√
xls	√	√	√
docx	√	√	√
doc	√	√	√
pdf	√	√	√
txt	√	√	×
dwg	√	√	√

注意

1、pdf展示一半，如图

原因：未引入样式

解决方法：引入样式

import “swiper/dist/css/swiper.css”; 
import “photo-sphere-viewer/dist/photo-sphere-viewer.css”; 
import “photo-sphere-viewer/dist/photo-sphere-viewer”;

3、文件相关方法请与本文档的附件    附件上传相关方法.doc     保持一致

附件上传相关方法.doc

4、变量组合使用的含义

5、安装swiper无效

解决方法：安装指定swiper 版本

npm install swiper@4.0.7