vue自定义组件实现文件列表预览与下载
由于ant-design-vue自带的a-upload组件与JeecgBoot封装的j-upload组件在查看上传文件列表时都不太满足项目需要，就自定义了文件列表查看组件，主要仿a-upload组件list-type="picture-card"样式设计，封装了在线预览（仅实现了图片与pdf文件的预览功能）和下载功能。1.首先安装vue-pdf插件 用于预览pdfnpm install --sav
·
由于ant-design-vue自带的a-upload组件与JeecgBoot封装的j-upload组件在查看上传文件列表时都不太满足项目需要，就自定义了文件列表查看组件，主要仿a-upload组件list-type="picture-card"样式设计，封装了在线预览（仅实现了图片与pdf文件的预览功能）和下载功能。
1.首先安装vue-pdf插件 用于预览pdf
npm install --save vue-pdf2.组件FileList.vue代码如下 放置在src/components/FileList
<template>
<div>
<a-row :gutter="16">
<a-col :span="8" v-for="(item,i) in fileList">
<div class="upload-item">
<span class="file-type" :style="getFileTypeIcon(item)"></span>
<div class="master">
<a-space class="operator">
<a @click="handlePreview(item)" alt="查看文件" class=""><a-icon type="eye" /></a>
<a @click="handleDownload(item)" alt="下载文件" ><a-icon type="download" /></a>
</a-space>
</div>
</div>
</a-col>
</a-row>
<!--图片预览 by cuizhiyun --20220225-->
<a-modal :visible="previewVisible" @cancel="handleCancel" @ok="handleCancel">
<img :alt="fileName" style="width: 100%" :src="previewImage" />
</a-modal>
<a-modal width="1000px" :visible="previewPdfVisible" @cancel="handlePdfCancel" @ok="handlePdfCancel">
<pdf
ref="pdf"
v-for="i in pdfNumPages"
:key="i"
:page="i"
:src="previewPdf">
</pdf>
</a-modal>
<!--图片预览 end by cuizhiyun --20220225-->
</div>
</template>
<script>
import pdf from 'vue-pdf';
export default {
name: 'FileList',
components: {
pdf
},
data() {
return {
previewVisible: false,
previewImage:'',
fileName:'',
previewPdfVisible:false,
previewPdf:'',
pdfNumPages: null, // pdf 总页数
}
},
props: {
fileList: {
type: Array,
required: false,
default: []
},
},
methods:{
handleCancel(){
this.previewVisible = false;
},
handlePdfCancel(){
this.previewPdfVisible = false;
},
//查看文件
handlePreview(fileName){
let fileUrl=process.env.VUE_APP_API_BASE_URL + "/sys/common/static/"+fileName;
console.log(fileUrl);
let suffix=this.getSuffix(fileName);
if(['jpg','gif','png','jpeg','bmp','webp'].indexOf(suffix)!=-1){//图片预览
this.previewVisible=true;
this.fileName=fileName;
this.previewImage=fileUrl;
}else if(['pdf'].indexOf(suffix)!=-1){
this.previewPdfVisible=true;
this.previewPdf=fileUrl;
//计算pdf页码总数
let loadingTask = pdf.createLoadingTask(this.previewPdf)
loadingTask.promise.then(pdf => {
this.pdfNumPages = pdf.numPages
}).catch(err => {
this.$message.error('pdf 加载失败:'+ err);
})
}else{//非图片打开新窗口
location.href = fileUrl;
//window.open(fileUrl,'_blank');
}
},
//下载文件
handleDownload(file){
location.href=process.env.VUE_APP_API_BASE_URL + "/sys/common/static/"+file;
},
getSuffix(fileName){
return fileName.substring(fileName.indexOf('.')+1);
},
getFileTypeIcon(fileName){
let suffix=this.getSuffix(fileName);
let fileType='txt';
if(['jpg','gif','png','jpeg','bmp','webp'].indexOf(suffix)!=-1){
fileType='pic';
}else if(['doc','docx'].indexOf(suffix)!=-1){
fileType='doc';
}else if(['pdf'].indexOf(suffix)!=-1){
fileType='pdf';
}else{
fileType='txt';
}
return 'background: url(\'/img/'+fileType+'.png\') no-repeat';
},
}
}
</script>
<style scoped>
>>> .upload-item{
position: relative;
height: 100px;
width: 100px;
padding: 8px;
border: 1px solid #d9d9d9;
border-radius: 4px;
margin-bottom: 16px;
}
>>> .upload-item .file-type{
content:'';
width: 40px;
height: 40px;
position: absolute;
left:50%;
transform: translateX(-50%);
}
>>> .upload-item .master{
display: none;
height: 84px;
width: 84px;
margin: 0 8px 8px 0;
background: #000;
z-index: 1;
position: absolute;
opacity:0.5;
}
>>> .upload-item:hover .master{
display: block;
}
>>> .upload-item .operator{
width: 80px;
position: absolute;
left:17px;
top:30px;
}
>>> .upload-item .operator .anticon{
font-size: 20px;
color: #fff;
}
</style>3.使用组件
import FileList from '@/components/FileList'
export default {
name: 'StartPermitApplicationForm',
components: {
FileList
},
}<a-col :span="12">
<a-form-model-item label="银企直连授权书" :labelCol="labelCol" :wrapperCol="wrapperCol" >
<file-list :fileList="bankArr"></file-list>
</a-form-model-item>
</a-col>4.使用组件 完整代码如下
<template>
<a-spin :spinning="confirmLoading">
<j-form-container>
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
<a-row>
<a-col :span="12">
<a-form-model-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol" >
<a-input v-model="mainProjectName" placeholder="请输入项目名称" disabled style="width: 960px"></a-input>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24" style="display: none">
<a-form-model-item label="项目id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mainProjectId">
<a-input v-model="model.mainProjectId" placeholder="请输入项目id" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="合同金额" :labelCol="labelCol" :wrapperCol="wrapperCol" >
<a-input-number class="t_right" v-model="contractAomunt" placeholder="请输入合同金额" :disabled="true" style="width: 100%"
:formatter="value => `${value}元`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
:parser="value => value.replace(/(,*)/g, '').replace('元', '')"
></a-input-number>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="农工费占比" :labelCol="labelCol" :wrapperCol="wrapperCol" >
<a-input class="t_right" v-model="workerCostRate" placeholder="请输入农工费占比" :disabled="true" suffix="%" ></a-input>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="银企直连授权书" :labelCol="labelCol" :wrapperCol="wrapperCol" >
<file-list :fileList="bankArr"></file-list>
</a-form-model-item>
</a-col>
<!--<a-col :span="24">
<a-form-model-item label="审批状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="approvalStatus">
<a-input-number v-model="model.approvalStatus" placeholder="请输入审批状态" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="审批时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="approvalDate">
<j-date placeholder="请选择审批时间" v-model="model.approvalDate" style="width: 100%" />
</a-form-model-item>
</a-col>-->
</a-row>
</a-form-model>
</j-form-container>
</a-spin>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import FileList from '@/components/FileList'
export default {
name: 'StartPermitApplicationForm',
components: {
FileList
},
props: {
//表单禁用
disabled: {
type: Boolean,
default: false,
required: false
}
},
data () {
return {
projectCode:'',
contractAomunt:'',
workerCostRate:'',
workerCost:'',
mainContName:'',
mainProjectName:"",
mainCreditCode:'',
account:'',
bank:'',
noticeArr:[],
contractArr:[],
licenceArr:[],
cashArr:[],
bankArr:[],
model:{
},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
validatorRules: {
},
url: {
add: "/project/startPermitApplication/add",
edit: "/project/startPermitApplication/edit",
queryById: "/project/startPermitApplication/queryById",
queryByProjectId:"/project/startPermitApplication/queryByProjectId",
queryWinBidNoticeByProjectId:"/project/winBidNotice/queryByProjectId",
queryContractByProjectId:"/project/generalContract/queryByProjectId",
queryAccountByProjectId:"/project/specialAccount/queryByProjectId",
}
}
},
computed: {
formDisabled(){
return this.disabled
},
},
created () {
//备份model原始值
this.modelDefault = JSON.parse(JSON.stringify(this.model));
},
methods: {
initProject(project){
this.model.mainProjectId = project.id;
this.mainProjectName = project.mainProjectName;
this.model.mainContractorId = project.mainContractorId;
this.mainContName = project.mainContractorName;
this.model.mainDeptId = project.mainDeptId;
this.model.mainDeptName = project.mainDeptName;
this.model.settlementId = project.settlementId;
this.model.regionCode = project.regionCode;
this.projectCode = project.mainProjectCode;
getAction(this.url.queryByProjectId,{projectId:project.id}).then((res) =>{
if (res.success) {
//如果更新了总包项目怎么办，所以这个地方每次要最新的
this.model.id=res.result.id;
// this.model = Object.assign({}, res.result);
}
})
//获取营业执照号
getAction('/project/company/company/queryById',{id:project.mainContractorId}).then(response => {
this.mainCreditCode = response.result.uniformSocialCreditCode;
this.$forceUpdate()
});
//获取中标通知书信息
getAction(this.url.queryWinBidNoticeByProjectId,{projectId:project.id}).then(response => {
if(response.success){
this.model.winBidId = response.result.id;
this.noticeArr = response.result.attachment.split(',');
this.$forceUpdate()
}else {
this.$message.error("请先上报中标通知书")
this.$emit('cancel');
}
});
//获取总包合同信息
getAction(this.url.queryContractByProjectId,{projectId:project.id}).then(response => {
if(response.success){
this.model.generalContractId = response.result.id;
this.contractAomunt = response.result.contractAmount;
this.workerCostRate = response.result.workerCostProportion;
this.workerCost = (Number(response.result.contractAmount) * Number(response.result.workerCostProportion) / 100).toFixed(2);
this.contractArr = response.result.attachment.split(',');
this.$forceUpdate()
}else {
this.$message.error("请先上报总包合同")
this.$emit('cancel');
}
});
//获取农民工专户信息
getAction("/project/regionConfig/queryByRegionCodeAndAmount",{regionCode:project.regionCode,amount:project.contractAmount}).then((res) =>{
if (res.success) {
getAction(this.url.queryAccountByProjectId,{projectId:project.id}).then(response => {
if(response.success){
this.model.specialAccountId = response.result.id;
this.account = response.result.bankAccount;
this.bank = response.result.bankDeposit;
this.licenceAttr = response.result.licenceAttachment;
this.cashArr = response.result.cashManageAttachment.split(',');
this.bankArr = response.result.bankCorporateAttachment.split(',');
this.$forceUpdate()
}else {
this.$message.error("请先上报农民工专户")
this.$emit('cancel');
}
});
}
})
},
add () {
this.edit(this.modelDefault);
},
edit (record) {
this.model = Object.assign({}, record);
this.visible = true;
},
submitForm () {
const that = this;
// 触发表单验证
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
if(!this.model.id){
httpurl+=this.url.add;
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
}
httpAction(httpurl,this.model,method).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
}else{
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
})
}
})
},
}
}
</script>
<style scoped>
>>> .t_right{
text-align: right!important;
}
>>> .t_right .ant-input-number-input{
text-align: right!important;
}
</style>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)