<template>
|
<div>
|
<j-modal
|
ref='modal'
|
:width='1000'
|
:visible='visible'
|
@ok='handleOk'
|
:fullscreen='fullscreen'
|
@cancel='handleCancel'
|
:footer='null'
|
:maskClosable='false'
|
:closable='false'
|
:destroyOnClose='true'
|
cancelText='关闭'>
|
|
|
<div class='container'>
|
<div class='panel-tool'>
|
<!-- <a class='panel-tool-min' @click='handleMin'></a>-->
|
<a class='panel-tool-max' @click='handleMax'></a>
|
<a class='panel-tool-close' @click='handleCancel'></a>
|
</div>
|
|
|
<a-upload-dragger
|
disabled
|
style='width: 100%; flex-grow: 1; margin: 25px 5px 5px 5px; background: white; box-sizing: border-box; border: 1px solid #95B8E7;'
|
name='file'
|
:action='uploadAction'
|
:headers='headers'
|
:data="{'biz':bizPath}"
|
:openFileDialogOnClick='false'
|
:showUploadList='false'
|
:multiple='true'
|
|
|
>
|
<div class='content' @contextmenu.stop.prevent='onContextmenuRoot'>
|
<div class='place-info'>
|
<span>位置：</span>
|
<ul class='placeul'>
|
<li>最近上传</li>
|
<li @click='openFolder(place.id)' v-for='place in extSource' :value='place.id' :key='place.id'>
|
{{ place.name }}
|
</li>
|
|
</ul>
|
</div>
|
|
<a-table
|
ref='table'
|
rowKey='id'
|
:columns='columns'
|
:dataSource='dataSource'
|
:pagination='ipagination'
|
@change='handleTableChange'
|
>
|
|
<div
|
slot='filterDropdown'
|
slot-scope='{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }'
|
style='padding: 8px'
|
>
|
<a-input
|
v-ant-ref='c => (searchInput = c)'
|
:placeholder='`Search ${column.dataIndex}`'
|
:value='selectedKeys[0]'
|
style='width: 188px; margin-bottom: 8px; display: block;'
|
@change='e => setSelectedKeys(e.target.value ? [e.target.value] : [])'
|
@pressEnter='() => handleSearch(selectedKeys, confirm, column.dataIndex)'
|
/>
|
<a-button
|
type='primary'
|
icon='search'
|
size='small'
|
style='width: 90px; margin-right: 8px'
|
@click='() => handleSearch(selectedKeys, confirm, column.dataIndex)'
|
>
|
Search
|
</a-button>
|
<a-button size='small' style='width: 90px' @click='() => handleReset(clearFilters)'>
|
Reset
|
</a-button>
|
</div>
|
<a-icon
|
slot='filterIcon'
|
slot-scope='filtered'
|
type='search'
|
:style="{ color: filtered ? '#108ee9' : undefined }"
|
/>
|
|
<template slot='customRender' slot-scope='text, record, index, column' >
|
<span v-if='searchText && searchedColumn === column.dataIndex' v-on:dblclick='download(record)' @contextmenu.stop.prevent='onContextmenuFile($event,record)'>
|
<img v-if="record.fileType.indexOf('doc') !=-1" :src="require('../../../assets/desk/icon/docm.png')"
|
style='margin-right: 3px' />
|
<img v-else-if="record.fileType.indexOf('xls') !=-1" :src="require('../../../assets/desk/icon/xls.png')"
|
style='margin-right: 3px' />
|
<img v-else-if="record.fileType.indexOf('pdf') !=-1" :src="require('../../../assets/desk/icon/pdf.png')"
|
style='margin-right: 3px' />
|
<img v-else :src="require('../../../assets/desk/f03.png')" style='margin-right: 3px' />
|
<template
|
v-for="(fragment, i) in text
|
.toString()
|
.split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
|
>
|
<mark
|
v-if='fragment.toLowerCase() === searchText.toLowerCase()'
|
:key='i'
|
class='highlight'
|
>{{ fragment }}</mark
|
>
|
<template v-else>{{ fragment }}</template>
|
</template>
|
</span>
|
<template v-else>
|
<!--文件-->
|
<div v-if='record.type==1' style='user-select: none;display: flex;align-items: center;'
|
v-on:dblclick='download(record)' @contextmenu.stop.prevent='onContextmenuFile($event,record)'>
|
<img v-if="record.fileType.indexOf('doc') !=-1" :src="require('../../../assets/desk/icon/docm.png')"
|
style='margin-right: 3px' />
|
<img v-else-if="record.fileType.indexOf('xls') !=-1" :src="require('../../../assets/desk/icon/xls.png')"
|
style='margin-right: 3px' />
|
<img v-else-if="record.fileType.indexOf('pdf') !=-1" :src="require('../../../assets/desk/icon/pdf.png')"
|
style='margin-right: 3px' />
|
<img v-else :src="require('../../../assets/desk/f03.png')" style='margin-right: 3px' />
|
<template>
|
{{ text }}
|
</template>
|
</div>
|
</template>
|
</template>
|
|
<!-- 字符串超长截取省略号显示-->
|
<span slot='esContent5' slot-scope='text'>
|
<j-ellipsis :value='text' :length='5' />
|
</span>
|
<!--自定义表头start -->
|
<span slot='customPid' style='font-size: 9px;color: #597190'>来源</span>
|
<span slot='customTitle' style='font-size: 9px;color: #597190'>名称</span>
|
<span slot='customUpdateTime' style='font-size: 9px;color: #597190'>修改日期</span>
|
<span slot='customFileType' style='font-size: 9px;color: #597190'>类型</span>
|
<span slot='customFileSize' style='font-size: 9px;color: #597190'>大小</span>
|
<!--自定义表头end -->
|
|
|
<!--自定义表格数据格式start -->
|
|
|
<span slot='name' slot-scope='text,record'>
|
<!--文件夹-->
|
<div style='user-select: none;display: flex;align-items: center;' v-if='record.type==2'
|
v-on:dblclick='openFolder(record.id)'>
|
<img :src="require('../../../assets/desk/f01.png')" style='margin-right: 3px' />
|
<template>
|
{{ text }}
|
</template>
|
</div>
|
|
<!--文件-->
|
<div v-if='record.type==1' style='user-select: none;display: flex;align-items: center;'
|
v-on:dblclick='download(record)' @contextmenu.stop.prevent='onContextmenuFile($event,record)'>
|
<img v-if="record.fileType.indexOf('doc') !=-1" :src="require('../../../assets/desk/icon/docm.png')"
|
style='margin-right: 3px' />
|
<img v-else-if="record.fileType.indexOf('xls') !=-1" :src="require('../../../assets/desk/icon/xls.png')"
|
style='margin-right: 3px' />
|
<img v-else-if="record.fileType.indexOf('pdf') !=-1" :src="require('../../../assets/desk/icon/pdf.png')"
|
style='margin-right: 3px' />
|
<img v-else :src="require('../../../assets/desk/f03.png')" style='margin-right: 3px' />
|
<template>
|
{{ text }}
|
</template>
|
</div>
|
</span>
|
<!--自定义表格数据格式end -->
|
</a-table>
|
|
</div>
|
|
|
</a-upload-dragger>
|
|
</div>
|
|
|
</j-modal>
|
</div>
|
</template>
|
|
<script>
|
|
|
import { getAction, postAction, putAction } from '@api/manage'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import Vue from 'vue'
|
import { ACCESS_TOKEN, USER_NAME } from '@/store/mutation-types'
|
import EditableCell from '@views/desktop/module/EditableCell'
|
|
|
export default {
|
name: 'RecentModal',
|
components: { EditableCell },
|
mixins: [JeecgListMixin],
|
data() {
|
return {
|
searchText: '',
|
searchInput: null,
|
searchedColumn: '',
|
title: '',
|
model: [],
|
headers: {},
|
fullscreen: false, //全屏
|
disableMixinCreated: true,
|
uploadAction: window._CONFIG['domianURL'] + '/desk/file/upload',
|
fileList: [],//上传的文件
|
visible: false,
|
columns: [
|
{
|
dataIndex: 'name',
|
key: 'name',
|
slots: { title: 'customTitle' },
|
scopedSlots: {
|
filterDropdown: 'filterDropdown',
|
filterIcon: 'filterIcon',
|
customRender: 'customRender'
|
},
|
onFilter: (value, record) =>
|
record.name
|
.toString()
|
.toLowerCase()
|
.includes(value.toLowerCase()),
|
onFilterDropdownVisibleChange: visible => {
|
if (visible) {
|
setTimeout(() => {
|
this.searchInput.focus()
|
}, 0)
|
}
|
}
|
},
|
|
{
|
slots: { title: 'customFileType' },
|
dataIndex: 'fileType',
|
key: 'fileType'
|
},
|
{
|
slots: { title: 'customPid' },
|
width: 120,
|
dataIndex: 'pid_dictText',
|
scopedSlots: { customRender: 'esContent5' }
|
},
|
{
|
slots: { title: 'customUpdateTime' },
|
dataIndex: 'updateTime',
|
key: 'updateTime'
|
},
|
{
|
slots: { title: 'customFileSize' },
|
key: 'fileSize',
|
dataIndex: 'fileSize'
|
}
|
|
|
],
|
ipagination: {
|
current: 1,
|
pageSize: 15,
|
size: 'small',
|
pageSizeOptions: ['10', '15', '20'],
|
showTotal: (total, range) => {
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0
|
},
|
/* 排序参数 */
|
isorter: {
|
column: 'createTime',
|
order: 'desc'
|
},
|
url: {
|
list: '/desk/file/recent'
|
}
|
}
|
},
|
created() {
|
const token = Vue.ls.get(ACCESS_TOKEN)
|
this.headers = { 'X-Access-Token': token }
|
},
|
mounted() {
|
|
},
|
methods: {
|
handleSearch(selectedKeys, confirm, dataIndex) {
|
confirm()
|
this.searchText = selectedKeys[0]
|
this.searchedColumn = dataIndex
|
},
|
|
handleReset(clearFilters) {
|
clearFilters()
|
this.searchText = ''
|
},
|
show(item) {
|
this.model = item
|
console.info(this.queryParam)
|
this.visible = true
|
this.loadData()
|
},
|
download(record) {
|
this.downloadFile(record.filePath)
|
},
|
openFolder(pid) {
|
this.loadData()
|
},
|
handleMin() {
|
this.visible = false
|
//TODO 执行最小化操作
|
this.$emit('min', this.model)
|
},
|
|
handleCancel() {
|
this.close()
|
},
|
handleMax() {
|
this.$refs.modal.toggleFullscreen()
|
},
|
handleOk() {
|
this.visible = false
|
},
|
add() {
|
this.visible = true
|
},
|
close() {
|
this.$emit('close', this.model)
|
this.visible = false
|
},
|
|
|
onContextmenuRoot(event) {
|
|
const that = this
|
this.$contextmenu({
|
items: [
|
{
|
label: '刷新',
|
onClick: () => {
|
that.loadData()
|
|
}
|
}
|
|
|
],
|
event, // 鼠标事件信息
|
customClass: 'custom-class', // 自定义菜单 class
|
zIndex: 2000, // 菜单样式 z-index
|
minWidth: 230 // 主菜单最小宽度
|
})
|
return false
|
},
|
onContextmenuFile(event, item) {
|
|
const that = this
|
this.$contextmenu({
|
items: [
|
{
|
label: '下载',
|
onClick: () => {
|
that.download(item)
|
}
|
}
|
|
|
],
|
event, // 鼠标事件信息
|
customClass: 'custom-class', // 自定义菜单 class
|
zIndex: 2000, // 菜单样式 z-index
|
minWidth: 230 // 主菜单最小宽度
|
})
|
return false
|
}
|
|
|
},
|
computed: {
|
bizPath() {
|
//以目录层级为上传路径
|
const username = Vue.ls.get(USER_NAME)
|
let path = '/desk/' + username
|
if (this.extSource.length > 0) {
|
|
for (let i = 0; i < this.extSource.length; i++) {
|
path += ('/' + this.extSource[i].name)
|
}
|
return path
|
} else {
|
return path += '/temp'
|
}
|
}
|
}
|
}
|
</script>
|
<style lang='less' scoped>
|
.ant-card-body .table-operator {
|
margin-bottom: 18px;
|
}
|
|
.ant-table-tbody .ant-table-row td {
|
padding-top: 15px;
|
padding-bottom: 15px;
|
}
|
|
.anty-row-operator button {
|
margin: 0 5px
|
}
|
|
.ant-btn-danger {
|
background-color: #ffffff
|
}
|
|
.ant-modal-cust-warp {
|
height: 100%
|
}
|
|
.ant-modal-cust-warp .ant-modal-body {
|
height: calc(100% - 110px) !important;
|
overflow-y: auto
|
}
|
|
.ant-modal-cust-warp .ant-modal-content {
|
height: 90% !important;
|
overflow-y: hidden
|
}
|
|
/deep/ .ant-modal .ant-modal-content .ant-modal-body {
|
padding: 0px;
|
}
|
|
/deep/ .ant-table-content .ant-table-tbody .ant-table-row td {
|
|
padding: 4px 16px;
|
border-bottom: none;
|
font-size: 9px;
|
|
}
|
|
/deep/ .ant-table-content .ant-table-body .ant-table-thead > tr > th {
|
padding: 7px 16px;
|
background: #f5f9fb;
|
border-bottom: none;
|
}
|
|
/deep/ .ant-table-pagination.ant-pagination {
|
margin-left: 20px;
|
float: left;
|
font-size: 10px;
|
|
}
|
|
/deep/ .ant-select-selection-selected-value {
|
font-size: 10px;
|
}
|
|
/deep/ .ant-upload.ant-upload-drag .ant-upload {
|
padding: 0;
|
}
|
|
.container {
|
min-height: 600px;
|
height: 100%;
|
position: relative;
|
background: linear-gradient(to bottom, #EFF5FF 0, #E0ECFF 20%);
|
box-sizing: border-box;
|
border: 1px solid #95B8E7;
|
border-radius: 5px;
|
display: flex;
|
|
.panel-tool {
|
width: 100%;
|
height: 25px;
|
padding: 0px 10px;
|
position: absolute;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
|
a {
|
display: inline-block;
|
width: 16px;
|
height: 16px;
|
opacity: .6;
|
margin: 0 0 0 2px;
|
vertical-align: top;
|
}
|
|
a:hover {
|
opacity: 1;
|
}
|
|
.panel-tool-close {
|
background: url(../../../assets/desk/panel_tools.png) no-repeat -16px 0px;
|
}
|
|
.panel-tool-max {
|
background: url(../../../assets/desk/panel_tools.png) no-repeat 0px -16px;
|
}
|
|
.panel-tool-min {
|
background: url(../../../assets/desk/panel_tools.png) no-repeat 0px 0px;
|
}
|
}
|
|
.content {
|
width: 100%;
|
height: 100%;
|
background: white;
|
box-sizing: border-box;
|
border: 1px solid #95B8E7;
|
overflow: hidden;
|
|
.place-info {
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
background: url(~@assets/desk/righttop.gif) repeat-x;
|
font-size: 9px;
|
|
span {
|
line-height: 40px;
|
font-weight: bold;
|
float: left;
|
margin-left: 12px;
|
user-select: none;
|
}
|
|
.placeul {
|
display: block;
|
margin: 0;
|
padding: 0;
|
list-style: none;
|
|
li {
|
cursor: pointer;
|
float: left;
|
line-height: 40px;
|
padding-left: 7px;
|
padding-right: 12px;
|
user-select: none;
|
background: url(../../../assets/desk/rlist.gif) no-repeat right;
|
}
|
|
li:nth-last-of-type(1) {
|
background: transparent;
|
}
|
}
|
}
|
}
|
|
|
}
|
</style>
|
