<template>
|
<a-table :columns="columns" :data-source="fileList" rowKey="pathId" :row-selection="rowSelection" size="middle"
|
:customRow="customClick" :pagination="false" :scroll="scrollY">
|
<span slot="fileName" slot-scope="text, record">
|
<span style="cursor: pointer" @click="handleClickFileName(record)" @dblclick="handDbclickFileName(record)">
|
|
{{ record.isDir == 1 ? text : text + "." + record.extendName }}
|
</span>
|
</span>
|
<span slot="fileImage" slot-scope="text, record">
|
<img :src="$file.setFileImg(record)" :title="`${record.isDir ? '' : ''}`"
|
@dblclick="handDbclickFileName(record)" style="width: 30px; max-height: 30px; cursor: pointer" />
|
</span>
|
<span slot="fileSize" slot-scope="text,record">
|
{{
|
record.isDir === 0
|
? $file.calculateFileSize(record.fileSize)
|
: ''
|
}}
|
</span>
|
</a-table>
|
</template>
|
<script>
|
|
|
|
export default {
|
props: ['fileList', 'searchStr'],
|
data() {
|
return {
|
treeKeys: "",
|
customClick: record => ({
|
on: {
|
contextmenu: e => {
|
console.log("tablecustomclickContextMenu", e);
|
this.handleContextMenu(record, e);
|
}
|
}
|
}),
|
|
columns: [
|
{
|
title: '',
|
dataIndex: 'isDir',
|
key: 'isDir',
|
align: 'center',
|
width: 50,
|
scopedSlots: { customRender: 'fileImage' },
|
|
},
|
{
|
title: '文件名',
|
dataIndex: 'fileName',
|
key: 'fileName',
|
scopedSlots: { customRender: 'fileName' },
|
|
sorter: (a, b) => {
|
if (a.fileName > b.fileName) {
|
return 1
|
} else if (a.fileName < b.fileName) {
|
return -1
|
} else {
|
return 0
|
}
|
},
|
sortDirections: ['descend', 'ascend'],
|
customHeaderCell: column => {
|
return {
|
style: {
|
'min-width': '200px',
|
|
}
|
}
|
},
|
customCell: column => {
|
return {
|
style: {
|
'min-width': '200px',
|
|
}
|
}
|
}
|
|
},
|
|
{
|
title: '文件类型',
|
dataIndex: 'extendName',
|
key: 'extendName',
|
width: 120,
|
sorter: (a, b) => {
|
if (a.extendName > b.extendName) {
|
return 1
|
} else if (a.extendName < b.extendName) {
|
return -1
|
} else {
|
return 0
|
}
|
},
|
sortDirections: ['descend', 'ascend'],
|
},
|
{
|
title: '大小',
|
dataIndex: 'fileSize',
|
key: 'fileSize',
|
width: 100,
|
scopedSlots: { customRender: 'fileSize' },
|
sorter: (a, b) => a.fileSize - b.fileSize,
|
sortDirections: ['descend', 'ascend'],
|
align: 'right'
|
},
|
{
|
title: '修改日期',
|
key: 'updateTime',
|
dataIndex: 'updateTime',
|
width: 180,
|
sorter: true,
|
sortDirections: ['descend', 'ascend'],
|
|
},
|
|
],
|
rowSelection: {
|
selectedRowKeys: [],
|
onChange: this.tableRowChange
|
},
|
//selectedRowKeys: [],
|
scrollY: {},
|
|
};
|
},
|
mounted() {
|
this.scrollY = { x: true, y: window.innerHeight - 311 }
|
window.onresize = () => {
|
this.scrollY = { x: true, y: window.innerHeight - 311 }
|
}
|
},
|
methods: {
|
|
// 文件名点击事件
|
handleClickFileName(record) {
|
console.log("fileNameclick", record)
|
this.$emit('fileClick', record)
|
let ele = document.getElementById(record.filePath + '/' + record.fileName);
|
ele && ele.scrollIntoView({ block: 'end', behavior: 'smooth' });
|
},
|
handDbclickFileName(record) {
|
clearTimeout(this.timer)
|
this.timer = null;
|
console.log(`output->双击`)
|
this.$emit('fileDbclick', record)
|
|
},
|
|
tableRowChange(keys, rows) {
|
console.log("tableRowChange:::", keys);
|
this.rowSelection.selectedRowKeys = keys
|
this.$store.commit('changeSelectedFiles', rows)
|
this.$store.commit('changeIsBatchOperation', rows.length !== 0)
|
},
|
/**
|
* 表格某一行右键事件
|
* @description 打开右键菜单
|
* @param {object} row 当前行数据
|
* @param {object} column 当前列数据
|
* @param {object} event 当前右键元素
|
*/
|
handleContextMenu(row, event) {
|
// 阻止右键事件冒泡
|
event.cancelBubble = true
|
// xs 以上的屏幕
|
event.preventDefault()
|
let keys = [];
|
keys.push(row.id)
|
//this.selectedRowKeys=keys // 选中当前行
|
this.$openBox
|
.contextMenu({
|
selectedFile: row,
|
domEvent: event
|
})
|
.then((res) => {
|
//this.selectedRowKeys = [] // 取消当前选中行
|
if (res === 'confirm') {
|
this.$emit('reloadPathTree', this.searchStr) // 刷新文件列表
|
} else if (res === 'open') {
|
this.handleClickFileName(row);
|
} else if (res === 'refreshFavorite') {
|
this.$emit("refreshFavorite")
|
this.$message.success('收藏成功')
|
}
|
})
|
},
|
},
|
computed: {
|
screenWidth() {
|
return document.body.clientWidth
|
},
|
targetOffset() {
|
console.log("window.innerHeight", window.innerHeight);
|
return window.innerHeight;
|
},
|
}
|
};
|
</script>
|
|
<style lang="less">
|
.file_name {
|
cursor: pointer
|
}
|
|
.ant-table-body,
|
.ant-table-header {
|
overflow: auto !important;
|
}
|
</style>
|
