117 lines
3.8 KiB
Vue
117 lines
3.8 KiB
Vue
<template>
|
||
<div class="notice-upload">
|
||
<!-- 自定义上传附件（自旧前端 oldfront/src/components/uploadFile.vue 适配） -->
|
||
<div class="upload-row">
|
||
<Upload
|
||
:on-success="encloSuccess"
|
||
:on-remove="encloRemove"
|
||
:default-file-list="defaultList"
|
||
:action="uploadFileUrl"
|
||
:accept="fileType"
|
||
:multiple="isMultiple"
|
||
:before-upload="handleUpload"
|
||
:format="formatArr"
|
||
:max-size="maxSize"
|
||
:on-format-error="handleFormatError"
|
||
:on-exceeded-size="handleExceeded"
|
||
>
|
||
<Button><Icon type="ios-cloud-upload-outline"></Icon>选择文件</Button>
|
||
</Upload>
|
||
<span class="upload-tip">提示：附件大小不超过{{ maxFileSize }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
/*
|
||
* 通知附件上传（自旧前端 oldfront/src/components/uploadFile.vue 适配 Vue3）。
|
||
* v-model 为已上传附件 fileid 数组；编辑时经 defaultList 回显已有附件。
|
||
*/
|
||
import { Message, Notice } from "view-ui-plus";
|
||
import config from "@/assets/config/host.config";
|
||
|
||
export default {
|
||
name: "NoticeUpload",
|
||
props: {
|
||
defaultList: { type: Array as () => any[], default: () => [] },
|
||
fileids: { type: Array as () => number[], default: () => [] },
|
||
fileType: { type: String, default: "" },
|
||
multiple: { type: Boolean, default: false },
|
||
},
|
||
emits: ["update:fileids"],
|
||
data() {
|
||
return {
|
||
isMultiple: !this.multiple || false,
|
||
uploadFileUrl: (config.isMock ? "" : config.serviceHost) + "/api/base/FileUpload",
|
||
formatArr: ["jpg", "gif", "png", "bmp", "xls", "doc", "txt", "docx", "xlsx", "zip", "rar", "pdf", "ppt", "pptx", "wps"],
|
||
maxFileSize: "200MB",
|
||
maxSize: 204800,
|
||
};
|
||
},
|
||
methods: {
|
||
encloSuccess(resp: any, file: any) {
|
||
if (resp.code !== 0) {
|
||
Message.error(resp.msg || "上传失败");
|
||
return;
|
||
}
|
||
this.fileids.push(resp.data.fileid);
|
||
this.$emit("update:fileids", this.fileids);
|
||
},
|
||
encloRemove(file: any) {
|
||
//删除文件：默认列表项带 fileid，刚上传的取 response
|
||
const list = file.fileid ? file : file.response;
|
||
let fileid = list?.fileid || list?.data?.fileid;
|
||
const arry = this.fileids.filter((element: number) => element != fileid);
|
||
this.$emit("update:fileids", arry);
|
||
},
|
||
handleUpload() {
|
||
if (!this.isMultiple && this.fileids.length > 0) {
|
||
Message.info("仅允许上传一个附件！");
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
handleFormatError() {
|
||
Notice.info({
|
||
title: "不支持的上传类型！",
|
||
desc: "请上传指定的文件类型",
|
||
});
|
||
},
|
||
handleExceeded() {
|
||
Notice.warning({
|
||
title: "超出大小限制",
|
||
desc: "最大文件大小为" + this.maxFileSize + "!",
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.notice-upload {
|
||
display: block;
|
||
.upload-row {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
:deep(.ivu-upload) {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
/* 文件列表整体另起一行，每项独占一行，不再与按钮挤在一起 */
|
||
:deep(.ivu-upload-list) {
|
||
display: block;
|
||
margin-top: 8px;
|
||
}
|
||
:deep(.ivu-upload-list-file) {
|
||
padding: 4px 0;
|
||
}
|
||
.upload-tip {
|
||
margin-left: 10px;
|
||
color: #f90;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
</style>
|