| 修改日期 | 修改人 | 备注 |
| 2020-06-13 16:50:00[当前版本] | 徐文斌 | BIM上传附件中添加接收删除数据 |
| 2019-12-26 15:04:06 | 徐文斌 | 上传附件组件 |
分类上传材料附件
选择数据后展示批量下载和批量删除功能
勾选数据进行打包下载功能
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>
| 参数 |
类型 |
是否必填 |
描述 |
默认值 |
| 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 |
| 方法名 | 参数 | 描述 |
| getDetail | 无 | 获取组件展示数据 |
| handleSubmit | 无 | 调用组件内部上传附件的方法 |
| handleSave | 自定义名称 | 接受附件数据，然后进行业务保存工作 |
| handleCancel | 无 | 业务取消操作 |
| receiveUrl | 自定义名称 | 接收下载URL |
| returnDownloadName | 自定义名称 | 返回下载名称，调用下载功能 |
| 方法名 |
参数 |
描述 |
| FileUpload |
无 |
返回文件上传接 口 |
| DeleteUpload |
无 |
返回文件删除接口 |
| PreviewUpload |
无 |
返回文件预览接口 |
| 可上传文件类型（后缀） | 可批量下载 | 可下载 | 可预览 |
| jpg | √ |
√ |
√ |
| jpeg | √ |
√ |
|
| png | √ |
√ |
√ |
| jfif | √ |
√ |
√ |
| gif | √ |
√ |
√ |
| xlsx | √ |
√ |
√ |
| xls | √ |
√ |
√ |
| docx | √ |
√ |
√ |
| doc | √ |
√ |
√ |
| √ |
√ |
√ |
|
| txt | √ |
√ |
× |
| dwg | √ |
√ |
√ |
原因：未引入样式
解决方法：引入样式
import “swiper/dist/css/swiper.css”;
import “photo-sphere-viewer/dist/photo-sphere-viewer.css”;
import “photo-sphere-viewer/dist/photo-sphere-viewer”;
