3 changed files with 328 additions and 21 deletions
@ -0,0 +1,307 @@
|
||||
<template> |
||||
<a-card :bordered="false"> |
||||
<!-- 查询区域 --> |
||||
<div class="table-page-search-wrapper"> |
||||
<a-form layout="inline" @keyup.enter.native="searchQuery"> |
||||
<a-row :gutter="24"> |
||||
<!-- <a-col :md="5" :sm="8">--> |
||||
<!-- <a-form-item label="文件名称">--> |
||||
<!-- <a-input placeholder="请输入文件名称" v-model="queryParam.name"></a-input>--> |
||||
<!-- </a-form-item>--> |
||||
<!-- </a-col>--> |
||||
<!-- <a-col :md="5" :sm="8">--> |
||||
<!-- <a-form-item label="上传人">--> |
||||
<!-- <a-input placeholder="上传人" v-model="queryParam.createBy"></a-input>--> |
||||
<!-- </a-form-item>--> |
||||
<!-- </a-col>--> |
||||
<!-- <a-col :xl="5" :lg="7" :md="8" :sm="24">--> |
||||
<!-- <a-form-item label="类型">--> |
||||
<!-- <a-select v-model="queryParam.fileType" placeholder="请选择文件类型" >--> |
||||
<!-- <a-select-option v-for="(item,index) in typeId" :key="item.value" :value="item.value">{{item.label}}</a-select-option>--> |
||||
<!-- </a-select>--> |
||||
<!-- </a-form-item>--> |
||||
<!-- </a-col>--> |
||||
<!-- <a-col :xl="5" :lg="7" :md="8" :sm="24">--> |
||||
<!-- <a-form-item label="公司风采查询">--> |
||||
<!-- <a-select v-model="queryParam.status" placeholder="请选择" >--> |
||||
<!-- <a-select-option :value="1">公司风采</a-select-option>--> |
||||
<!-- </a-select>--> |
||||
<!-- </a-form-item>--> |
||||
<!-- </a-col>--> |
||||
<a-col :md="4" :sm="8"> |
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> |
||||
<!-- <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>--> |
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> |
||||
<a-upload style="margin-left: 8px" |
||||
name="file" |
||||
:multiple="false" |
||||
:action="minioUploadAction" |
||||
:headers="tokenHeader" |
||||
:showUploadList="false" |
||||
:beforeUpload="beforeUpload" |
||||
@change="handleChange"> |
||||
<a-button type="primary"> |
||||
<a-icon type="upload"/> |
||||
新增 |
||||
</a-button> |
||||
</a-upload> |
||||
</span> |
||||
</a-col> |
||||
</a-row> |
||||
</a-form> |
||||
</div> |
||||
<!-- 操作按钮区域 --> |
||||
<div class="table-operator"> |
||||
<!-- <a-button type="primary" icon="download" @click="handleExportXls('文件列表')">导出</a-button>--> |
||||
<!-- <a-upload--> |
||||
<!-- name="file"--> |
||||
<!-- :multiple="false"--> |
||||
<!-- :action="uploadAction"--> |
||||
<!-- :headers="tokenHeader"--> |
||||
<!-- :showUploadList="false"--> |
||||
<!-- :beforeUpload="beforeUpload"--> |
||||
<!-- @change="handleChange">--> |
||||
<!-- <a-button>--> |
||||
<!-- <a-icon type="upload"/>--> |
||||
<!-- OSS文件上传--> |
||||
<!-- </a-button>--> |
||||
<!-- </a-upload>--> |
||||
|
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
<!-- table区域-begin --> |
||||
<div> |
||||
<!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">--> |
||||
<!-- <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a--> |
||||
<!-- style="font-weight: 600">{{--> |
||||
<!-- selectedRowKeys.length }}</a>项--> |
||||
<!-- <a style="margin-left: 24px" @click="onClearSelected">清空</a>--> |
||||
<!-- </div>--> |
||||
|
||||
<a-table |
||||
ref="table" |
||||
size="middle" |
||||
bordered |
||||
rowKey="id" |
||||
:scroll="{y:660}" |
||||
:columns="columns" |
||||
:dataSource="dataSource" |
||||
:pagination="ipagination" |
||||
:loading="loading" |
||||
@change="handleTableChange"> |
||||
<span slot="name" slot-scope="text, record"> |
||||
<j-ellipsis :value="text" :length="20"/> |
||||
</span> |
||||
<span slot="url" slot-scope="text, record"> |
||||
<j-ellipsis :value="text" :length="45"/> |
||||
</span> |
||||
|
||||
<span slot="action" slot-scope="text, record"> |
||||
<a @click="handlePreview(record)">预览</a> |
||||
<a-divider type="vertical"/> |
||||
<a @click="downloadFile(record.url)">下载</a> |
||||
<a-divider type="vertical"/> |
||||
<a @click="ossDelete(record.id)" v-if="record.status == 1">删除</a> |
||||
</span> |
||||
|
||||
</a-table> |
||||
</div> |
||||
<!-- table区域-end --> |
||||
</a-card> |
||||
</template> |
||||
|
||||
<script> |
||||
import {JeecgListMixin} from '@/mixins/JeecgListMixin' |
||||
import { getAction } from '@api/manage' |
||||
|
||||
export default { |
||||
name: "ProcessElegantList", |
||||
mixins: [JeecgListMixin], |
||||
data() { |
||||
return { |
||||
typeId :[{ |
||||
value: 'image', |
||||
label: '图片' |
||||
}, |
||||
{ |
||||
value: 'application', |
||||
label: '文档' |
||||
}], |
||||
description: '文件列表', |
||||
superFieldList:[], |
||||
// 表头 |
||||
columns: [ |
||||
{ |
||||
title: '序号', |
||||
dataIndex: '', |
||||
key: 'rowIndex', |
||||
width: 60, |
||||
align: "center", |
||||
customRender: function (t, r, index) { |
||||
return parseInt(index) + 1; |
||||
} |
||||
}, |
||||
{ |
||||
title: '文件名称', |
||||
align: "center", |
||||
scopedSlots: { customRender: 'name' }, |
||||
dataIndex: 'name' |
||||
}, |
||||
{ |
||||
title: '上传人', |
||||
align: "center", |
||||
width: 150, |
||||
dataIndex: 'createBy' |
||||
}, |
||||
{ |
||||
title:'上传时间', |
||||
align:"center", |
||||
default:'--', |
||||
dataIndex: 'createTime' |
||||
}, |
||||
// { |
||||
// title: '文件格式', |
||||
// align: "center", |
||||
// width:150, |
||||
// default:'--', |
||||
// dataIndex: 'fileType' |
||||
// }, |
||||
{ |
||||
title: '文件大小(kb)', |
||||
align: "center", |
||||
default:'--', |
||||
width: 150, |
||||
dataIndex: 'size' |
||||
}, |
||||
{ |
||||
title: '文件地址', |
||||
align: "center", |
||||
scopedSlots: { customRender: 'url' }, |
||||
dataIndex: 'url' |
||||
}, |
||||
{ |
||||
title: '操作', |
||||
dataIndex: 'action', |
||||
width: 150, |
||||
align: "center", |
||||
scopedSlots: {customRender: 'action'}, |
||||
} |
||||
], |
||||
url: { |
||||
upload: "/sys/oss/file/upload", |
||||
list: "/sys/oss/file/list", |
||||
delete: "/sys/oss/file/delete", |
||||
minioUpload: "/sys/upload/uploadMinioFile" |
||||
// minioUpload: "/sys/upload/uploadMinio" |
||||
} |
||||
} |
||||
|
||||
}, |
||||
created() { |
||||
this.getSuperFieldList(); |
||||
}, |
||||
computed: { |
||||
uploadAction() { |
||||
return window._CONFIG['domianURL'] + this.url.upload; |
||||
}, |
||||
minioUploadAction() { |
||||
return window._CONFIG['domianURL'] + this.url.minioUpload; |
||||
}, |
||||
}, |
||||
methods: { |
||||
loadData(arg) { |
||||
if(!this.url.list){ |
||||
this.$message.error("请设置url.list属性!") |
||||
return |
||||
} |
||||
//加载数据 若传入参数1则加载第一页的内容 |
||||
if (arg === 1) { |
||||
this.ipagination.current = 1; |
||||
} |
||||
var params = this.getQueryParams();//查询条件 |
||||
|
||||
this.loading = true; |
||||
console.log("params>>>>>>",params) |
||||
getAction(this.url.list, { status:1 }).then((res) => { |
||||
if (res.success) { |
||||
//update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------ |
||||
this.dataSource = res.result.records||res.result; |
||||
if(res.result.total) |
||||
{ |
||||
this.ipagination.total = res.result.total; |
||||
} |
||||
//update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------ |
||||
} |
||||
if(res.code===510){ |
||||
this.$message.warning(res.message) |
||||
} |
||||
this.loading = false; |
||||
}) |
||||
}, |
||||
beforeUpload(file) { |
||||
var fileType = file.type; |
||||
if (fileType === 'image') { |
||||
if (fileType.indexOf('image') < 0) { |
||||
this.$message.warning('请上传图片'); |
||||
return false; |
||||
} |
||||
} else if (fileType === 'file') { |
||||
if (fileType.indexOf('image') >= 0) { |
||||
this.$message.warning('请上传文件'); |
||||
return false; |
||||
} |
||||
} |
||||
return true |
||||
}, |
||||
handleChange(info) { |
||||
if (info.file.status === 'done') { |
||||
if (info.file.response.success) { |
||||
this.loadData() |
||||
this.$message.success(`${info.file.name} 上传成功!`); |
||||
} else { |
||||
this.$message.error(`${info.file.response.message}`); |
||||
} |
||||
} else if (info.file.status === 'error') { |
||||
this.$message.error(`${info.file.response.message}`); |
||||
} |
||||
}, |
||||
ossDelete(id) { |
||||
var that = this; |
||||
that.$confirm({ |
||||
title: "确认删除", |
||||
content: "是否删除选中文件?", |
||||
onOk: function () { |
||||
that.handleDelete(id) |
||||
} |
||||
}); |
||||
}, |
||||
handlePreview(record) { |
||||
if (record && record.url) { |
||||
console.log("-0=-=-=-=路径",record); |
||||
let url = window._CONFIG['onlinePreviewDomainURL']+encodeURIComponent(this.$Base64.encode(record.url)) |
||||
window.open(url, '_blank') |
||||
} |
||||
}, |
||||
getSuperFieldList(){ |
||||
let fieldList=[]; |
||||
fieldList.push({type:'string',value:'name',text:'文件名称',dictTable:'', dictText:'', dictCode:''}) |
||||
fieldList.push({type:'string',value:'fileType',text:'文件格式',dictTable:'', dictText:'', dictCode:''}) |
||||
fieldList.push({type:'string',value:'size',text:'文件大小',dictTable:'', dictText:'', dictCode:''}) |
||||
fieldList.push({type:'string',value:'url',text:'文件地址',dictTable:'', dictText:'', dictCode:''}) |
||||
fieldList.push({type:'string',value:'createBy',text:'上传人',dictTable:'', dictText:'', dictCode:''}) |
||||
fieldList.push({type:'date',value:'createTime',text:'上传时间',dictTable:'', dictText:'', dictCode:''}) |
||||
this.superFieldList = fieldList |
||||
}, |
||||
getRake(){ |
||||
this.typeId = []; |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
@import '~@assets/less/common.less'; |
||||
</style> |
||||
Loading…
Reference in new issue