上传附件（rview-c）-知识分享平台

348

查询码:00000878

上传附件（rview-c）

作者: 徐文斌于 2019年12月26日 发布在分类 / 人防组 / 人防前端 下,并于 2020年06月13日编辑

上传附件 rview-c

使用场景

分类上传材料附件

图例

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

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

使用方法

cnpm install rview-c --save

使用组件

<style lang="less">

 .materials-demo .ivu-table i {
  color: darkgray !important;
}
</style>
<template>
  <div style="margin-top: 50px;margin-left: 50px;margin-right: 50px;" class="materials-demo">
    <UploadMaterials
      ref="uploadMaterials"
      :dataList="dataList"
      :tenantId="tenantId"
      :multiple="multiple"
      :uploadUrl="uploadUrl"
      :maxSize="maxSize"
      :FileUploadFun="FileUpload"
      :DeleteUploadFun="DeleteUpload"
      :PreviewUploadFun="PreviewUpload" 
      :downloadUrl="downloadUrl"
      :downloadById="downloadById"
      :addOrEdit="addOrEdit"
      :isView="isView"
      :isDownload="isDownload"
      @handle-save="handleSave"
      @receive-url="receiveUrl"
      @return-download-name="returnDownloadName"
    ></UploadMaterials>
    <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: "0fd2d661-c662-4442-9ec2-491b84a0a237",

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

      /**
       * 上传路由
       * String
       * 必传
       */
      uploadUrl:
        "http://192.168.199.40:8014/api/services/File/FileDo/UploadFiles_Form",

      /**
       * 文件大小,单位kb
       * Number
       * 必传
       */
      maxSize: 10240,

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

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

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

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

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

      /**
       * 下载功能是否返回url
       * Boolean
       * 不必传，默认false
       */
      isDownload: false
    };
  },
  methods: {
    /**
     * 获取详情
     */
    getDetail() {
      // 新增
      // this.dataList = [
      //   {
      //     id: "id1", // 材料id
      //     name: "申请材料", //  材料名称
      //     num: 0, //  数量
      //     isRequired: true, // 是否必传
      //     attachList: [] // 附件
      //   },
      //   {
      //     id: "id2",
      //     name: "第二种",
      //     num: 0,
      //     isRequired: false,
      //     attachList: []
      //   },
      //   {
      //     id: "id3",
      //     name: "第三种材料",
      //     num: 0,
      //     isRequired: true,
      //     attachList: []
      //   }
      // ];

      // 编辑
      this.dataList = [
        {
          id: "id1",
          name: "支持类型",
          num: 11,
          isRequired: true,
          format: [ "pdf", "jpg", "jpeg", "png","jfif","gif","docx", "xlsx", "doc", "xls", "txt", "dwg","mp4","avi","webm"],
          attachList: [
            {
              code:"20191202000025a9Nt",
              name: "20160329125103_w3B4G.jpeg",
              id: "63d943f4-f869-4c51-8bed-4396b0b92d7d",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/20160329125103_w3B4G_191202095542214.jpeg"
            },
            {
              code:"2019120400007SpIPM",
              name: "落霞.gif",
              id: "220b1b64-17bf-447c-919b-afd460c20bc1",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/落霞_191204104855468.gif"
            },
            {
              code:"20191202000025a9Nt",
              name: "会议纪要模板.docx",
              id: "d75444ce-8021-4f09-9a80-3d2934bcfc1c",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/会议纪要模板_191202095543918.docx"
            },
            {
              code:"20191202000025a9Nt",
              name: "各项目考核标准.xlsx",
              id: "a6567d97-35ea-4335-bcb7-1816f7494552",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/各项目考核标准_191202095547728.xlsx"
            },
            {
              code:"20191202000057Hae1",
              name: "国防工程运行维护指挥系统需求规格说明书.doc",
              id: "eb60fdb1-7de1-472f-8fea-b0f9a48d70b8",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/国防工程运行维护指挥系统需求规格说明书_191202113325495.doc"
            },
            {
              code:"20191202000057Hae1",
              name: "11月4日-11月8日 .xls",
              id: "ec7a526e-65d4-450e-b8be-c472fdf71232",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/11月4日-11月8日 _191204104855512.xls"
            },
            {
              code:"2019120200006T7KIB",
              name: "书房.dwg",
              id: "7510e1b3-f7f9-406c-8d17-fd7c419c6fae",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/书房_191202134359457.dwg"
            },
            {
              code:"2019121900002oLzYV",
              name: "测试.mp4",
              id: "953e923f-fdad-4267-bb80-c73ff9e6b30c",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/测试_191219170426849.mp4"
            },
            {
              code:"2019122300003lGoOf",
              name: "测3.webm",
              id: "60b22868-2e41-4074-82f7-3aada4b83f53",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/测3_191223095934743.webm"
            },
          ]
        },
        {
          id: "id3",
          name: "第三种材料",
          num: 1,
          isRequired: false,
          format: ["docx", "xlsx", "pdf","mp4"],
          attachList: [
            {
              code:"2019121900002oLzYV",
              name: "测试.mp4",
              id: "953e923f-fdad-4267-bb80-c73ff9e6b30c",
              path: "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//支持类型/v1/测试_191219170426849.mp4"
            },
          ]
        },
        {
          id: "id4",
          name: "全景图",
          num: 1,
          isRequired: true,
          format: ["jpg", "xlsx", "pdf"],
          attachList: [
            {
              code: "2019120400024YobhV",
              id: "61dc2992-a687-4320-8e41-2987111f5d15",
              name: "防空地下室1.jpg",
              path:
                "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//全景图/v1/防空地下室1_191204153350800.jpg"
            },
            {
              code: "2019120400024YobhV",
              id: "adfee76f-3c82-4609-b6f9-25143eb6bf42",
              name: "航拍.jpg",
              path:
                "http://192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//全景图/v1/航拍_191204153351784.jpg"
            }
          ]
        },
        {
          id: "id6",
          name: "规划材料",
          num: 1,
          isRequired: true,
          format: ["docx", "xlsx", "pdf"],
          attachList: [
            {
              code: "2019110400008n2NUj",
              id: "43f20277-b08a-4cda-b828-ab14258f2e66",
              name: "移动终端.docx",
              path:
                "192.168.199.203:8030/文件中心/0fd2d661-c662-4442-9ec2-491b84a0a237//规划材料/v1/移动终端_191104134548399.docx"
            }
          ]
        }
      ];
      this.addOrEdit = true;
    },
    handleSubmit() {
      console.log("点击保存");
      this.$refs.uploadMaterials.uploadFun();
    },
    handleSave(resData) {
      console.log("附件上传返回的数据是", resData);
      console.log("在此处调用业务接口");
      this.$refs.uploadMaterials.resetFun();

      Object.keys(resData).forEach((key) => {
        let index = this.dataList.findIndex(obj => obj.id == key);
        this.dataList[index].attachList = resData[key];
      })
      this.dataList.forEach((item) => {
        item.num = item.attachList.length;
        item.attachList.forEach((ele) => {
          ele.name = ele.name || ele.oldFileName;
        })
      })
      this.$refs.uploadMaterials.getTableData();

    },
    handleCancel() {
      this.$refs.uploadMaterials.resetFun();
    },

 
    /**
     * 接收downloadUrl
     */
    receiveUrl(url) {
      console.log(url);
    },

    /**
     * 返回下载名称，调用下载功能
     */
    returnDownloadName() {
      let downloadName = "组件rview";
      this.$refs.uploadMaterials.downloadFun(downloadName);
    }
  },
  computed: {
    /**
     * 文件上传接口
     * Function
     * 必传
     */
    FileUpload() {
      return this.$API.Upload.FileUpload;
    },

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

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

API

props

参数	类型	是否必填	描述	默认值
tenantId	String	是	租户Id	--
dataList	Array	是	列表展示数据	--
uploadUrl	String	是	上传路由	--
maxSize	Number	是	文件大小，单位kb	--
multiple	Boolean	否	是否支持多选文件	false
addOrEdit	Boolean	是	新增还是编辑	--
isView	Boolean	否	是否是查看	false
downloadUrl	String	是	下载URL地址	--
downloadById	String	是	单个下载URL地址	--
isDownload	Boolean	否	下载功能是否返回url,如果为true,下载功能需要业务自行实现	false
isGetDeleteData	Boolean	否	是否接受删除的数据	false

methods

方法名	参数	描述
getDetail	无	获取组件展示数据
handleSubmit	无	调用组件内部上传附件的方法
handleSave	自定义名称	接受附件数据，然后进行业务保存工作
handleCancel	无	业务取消操作
receiveUrl	自定义名称	接收下载URL
returnDownloadName	自定义名称	返回下载名称，调用下载功能
getDeleteData	自定义名称	被删除的文件id集（array）

computed

方法名	参数	描述
FileUpload	无	返回文件上传接口
DeleteUpload	无	返回文件删除接口
PreviewUpload	无	返回文件预览接口

支持类型

可上传文件类型（后缀）可批量下载可下载可预览

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”;

2、变量组合使用的含义

addOrEdit	isView	含义
false	false	新增
true	false	编辑
true	true	详情

修改日期	修改人	备注
2020-06-13 16:50:00[当前版本]	徐文斌	BIM上传附件中添加接收删除数据
2019-12-26 15:04:06	徐文斌	上传附件组件

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

[Title]