perf: 优化文件重命名
This commit is contained in:
kuaifan
parent
967c4f04d9
commit
e5ddf5616a
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="quick-edit" :class="[alwaysIcon ? 'quick-always' : '']">
|
<div class="quick-edit" :class="[alwaysIcon ? 'quick-always' : '']">
|
||||||
<div v-if="isEdit" v-clickoutside="onEnter" class="quick-input">
|
<div v-if="isEdit" v-clickoutside="onClickOut" class="quick-input">
|
||||||
<TagInput v-if="isTag" ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter"/>
|
<TagInput v-if="isTag" ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter" @on-blur="onBlur"/>
|
||||||
<Input v-else ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter"/>
|
<Input v-else ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter" @on-blur="onBlur"/>
|
||||||
<div v-if="isLoad" class="quick-loading"><Loading/></div>
|
<div v-if="isLoad" class="quick-loading"><Loading/></div>
|
||||||
</div>
|
</div>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
@ -33,6 +33,10 @@ export default {
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
|
clickOutSide: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
@ -86,6 +90,20 @@ export default {
|
|||||||
this.isLoad = false;
|
this.isLoad = false;
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onClickOut() {
|
||||||
|
if (!this.clickOutSide) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.onEnter();
|
||||||
|
},
|
||||||
|
|
||||||
|
onBlur() {
|
||||||
|
if (this.clickOutSide) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.onEnter();
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -149,12 +149,14 @@
|
|||||||
downEnter(e) {
|
downEnter(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
},
|
},
|
||||||
onFocus() {
|
onFocus(e) {
|
||||||
this.isFocus = true;
|
this.isFocus = true;
|
||||||
|
this.$emit("on-focus", e)
|
||||||
},
|
},
|
||||||
onBlur() {
|
onBlur(e) {
|
||||||
this.isFocus = false;
|
this.isFocus = false;
|
||||||
this.addTag(false, this.content)
|
this.addTag(false, this.content)
|
||||||
|
this.$emit("on-blur", e)
|
||||||
},
|
},
|
||||||
addTag(e, content) {
|
addTag(e, content) {
|
||||||
|
|
||||||
|
|||||||
@ -381,7 +381,180 @@ export default {
|
|||||||
|
|
||||||
tableHeight: 500,
|
tableHeight: 500,
|
||||||
tableMode: $A.getStorageBoolean("fileTableMode"),
|
tableMode: $A.getStorageBoolean("fileTableMode"),
|
||||||
columns: [],
|
columns: [
|
||||||
|
{
|
||||||
|
title: this.$L('文件名'),
|
||||||
|
key: 'name',
|
||||||
|
minWidth: 200,
|
||||||
|
sortable: true,
|
||||||
|
render: (h, {row}) => {
|
||||||
|
let array = [];
|
||||||
|
let isCreate = !/^\d+$/.test(row.id);
|
||||||
|
if (isCreate) {
|
||||||
|
// 新建
|
||||||
|
array.push(h('Input', {
|
||||||
|
props: {
|
||||||
|
elementId: 'input_' + row.id,
|
||||||
|
value: row.newname,
|
||||||
|
autofocus: true,
|
||||||
|
disabled: !!row._load,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
width: 'auto'
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
'on-change': (event) => {
|
||||||
|
row.newname = event.target.value;
|
||||||
|
},
|
||||||
|
'on-blur': () => {
|
||||||
|
const file = this.files.find(({id}) => id == row.id);
|
||||||
|
if (file) {
|
||||||
|
file.newname = row.newname;
|
||||||
|
this.onBlur(file)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'on-enter': () => {
|
||||||
|
const file = this.files.find(({id}) => id == row.id);
|
||||||
|
if (file) {
|
||||||
|
file.newname = row.newname;
|
||||||
|
this.onEnter(file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
return h('div', {
|
||||||
|
class: 'file-nbox'
|
||||||
|
}, [
|
||||||
|
h('div', {
|
||||||
|
class: `no-dark-mode-before file-name file-icon ${row.type}`,
|
||||||
|
}, array),
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
// 编辑、查看
|
||||||
|
array.push(h('QuickEdit', {
|
||||||
|
props: {
|
||||||
|
value: row.name,
|
||||||
|
autoEdit: !!row._edit,
|
||||||
|
clickOutSide: false,
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
'on-edit-change': (b) => {
|
||||||
|
const file = this.files.find(({id}) => id == row.id);
|
||||||
|
if (file) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setEdit(file.id, b)
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'on-update': (val, cb) => {
|
||||||
|
const file = this.files.find(({id}) => id == row.id);
|
||||||
|
if (file) {
|
||||||
|
file.newname = val
|
||||||
|
this.onEnter(file);
|
||||||
|
}
|
||||||
|
cb();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
h('AutoTip', this.formatName(row))
|
||||||
|
]));
|
||||||
|
//
|
||||||
|
const iconArray = [];
|
||||||
|
if (row.share) {
|
||||||
|
if (row.userid != this.userId) {
|
||||||
|
iconArray.push(h('UserAvatar', {
|
||||||
|
props: {
|
||||||
|
userid: row.userid,
|
||||||
|
size: 20
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
if (row.permission == 0) {
|
||||||
|
iconArray.push(h('span', {
|
||||||
|
class: 'permission',
|
||||||
|
}, this.$L('只读')))
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
iconArray.push(h('i', {
|
||||||
|
class: 'taskfont',
|
||||||
|
domProps: {
|
||||||
|
innerHTML: ''
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
} else if (this.isParentShare) {
|
||||||
|
iconArray.push(h('UserAvatar', {
|
||||||
|
props: {
|
||||||
|
userid: row.created_id,
|
||||||
|
size: 20
|
||||||
|
},
|
||||||
|
}, [
|
||||||
|
row.created_id != row.userid ? h('p', [h('strong', this.$L('成员创建于') + ": " + row.created_at)]) : h('p', this.$L('所有者创建') + ": " + row.created_at)
|
||||||
|
]))
|
||||||
|
}
|
||||||
|
return h('div', {
|
||||||
|
class: 'file-nbox'
|
||||||
|
}, [
|
||||||
|
h('div', {
|
||||||
|
class: `no-dark-mode-before file-name file-icon ${row.type}`,
|
||||||
|
}, array),
|
||||||
|
iconArray
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: this.$L('大小'),
|
||||||
|
key: 'size',
|
||||||
|
width: 110,
|
||||||
|
resizable: true,
|
||||||
|
sortable: true,
|
||||||
|
render: (h, {row}) => {
|
||||||
|
if (row.type == 'folder') {
|
||||||
|
return h('div', '-')
|
||||||
|
}
|
||||||
|
return h('AutoTip', $A.bytesToSize(row.size));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: this.$L('类型'),
|
||||||
|
key: 'type',
|
||||||
|
width: 110,
|
||||||
|
resizable: true,
|
||||||
|
sortable: true,
|
||||||
|
render: (h, {row}) => {
|
||||||
|
let type = this.types.find(({value, name}) => value == row.type && name);
|
||||||
|
if (type) {
|
||||||
|
return h('AutoTip', type.name);
|
||||||
|
} else {
|
||||||
|
return h('div', (row.ext || row.type).replace(/^\S/, s => s.toUpperCase()))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: this.$L('所有者'),
|
||||||
|
key: 'userid',
|
||||||
|
width: 130,
|
||||||
|
resizable: true,
|
||||||
|
sortable: true,
|
||||||
|
render: (h, {row}) => {
|
||||||
|
return h('UserAvatar', {
|
||||||
|
props: {
|
||||||
|
size: 18,
|
||||||
|
userid: row.userid,
|
||||||
|
showIcon: false,
|
||||||
|
showName: true,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: this.$L('最后修改'),
|
||||||
|
key: 'updated_at',
|
||||||
|
width: 168,
|
||||||
|
resizable: true,
|
||||||
|
sortable: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
shareShow: false,
|
shareShow: false,
|
||||||
shareInfo: {id: 0, userid: 0, permission: 1},
|
shareInfo: {id: 0, userid: 0, permission: 1},
|
||||||
@ -540,182 +713,6 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
initLanguage() {
|
|
||||||
this.columns = [
|
|
||||||
{
|
|
||||||
title: this.$L('文件名'),
|
|
||||||
key: 'name',
|
|
||||||
minWidth: 200,
|
|
||||||
sortable: true,
|
|
||||||
render: (h, {row}) => {
|
|
||||||
let array = [];
|
|
||||||
let isCreate = !/^\d+$/.test(row.id);
|
|
||||||
if (isCreate) {
|
|
||||||
// 新建
|
|
||||||
array.push(h('Input', {
|
|
||||||
props: {
|
|
||||||
elementId: 'input_' + row.id,
|
|
||||||
value: row.newname,
|
|
||||||
autofocus: true,
|
|
||||||
disabled: !!row._load,
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
width: 'auto'
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
'on-change': (event) => {
|
|
||||||
row.newname = event.target.value;
|
|
||||||
},
|
|
||||||
'on-blur': () => {
|
|
||||||
const file = this.files.find(({id}) => id == row.id);
|
|
||||||
if (file) {
|
|
||||||
file.newname = row.newname;
|
|
||||||
this.onBlur(file)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'on-enter': () => {
|
|
||||||
const file = this.files.find(({id}) => id == row.id);
|
|
||||||
if (file) {
|
|
||||||
file.newname = row.newname;
|
|
||||||
this.onEnter(file)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
return h('div', {
|
|
||||||
class: 'file-nbox'
|
|
||||||
}, [
|
|
||||||
h('div', {
|
|
||||||
class: `no-dark-mode-before file-name file-icon ${row.type}`,
|
|
||||||
}, array),
|
|
||||||
]);
|
|
||||||
} else {
|
|
||||||
// 编辑、查看
|
|
||||||
array.push(h('QuickEdit', {
|
|
||||||
props: {
|
|
||||||
value: row.name,
|
|
||||||
autoEdit: !!row._edit
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
'on-edit-change': (b) => {
|
|
||||||
const file = this.files.find(({id}) => id == row.id);
|
|
||||||
if (file) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.setEdit(file.id, b)
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'on-update': (val, cb) => {
|
|
||||||
const file = this.files.find(({id}) => id == row.id);
|
|
||||||
if (file) {
|
|
||||||
file.newname = val
|
|
||||||
this.onEnter(file);
|
|
||||||
}
|
|
||||||
cb();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [
|
|
||||||
h('AutoTip', this.formatName(row))
|
|
||||||
]));
|
|
||||||
//
|
|
||||||
const iconArray = [];
|
|
||||||
if (row.share) {
|
|
||||||
if (row.userid != this.userId) {
|
|
||||||
iconArray.push(h('UserAvatar', {
|
|
||||||
props: {
|
|
||||||
userid: row.userid,
|
|
||||||
size: 20
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
if (row.permission == 0) {
|
|
||||||
iconArray.push(h('span', {
|
|
||||||
class: 'permission',
|
|
||||||
}, this.$L('只读')))
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
iconArray.push(h('i', {
|
|
||||||
class: 'taskfont',
|
|
||||||
domProps: {
|
|
||||||
innerHTML: ''
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
} else if (this.isParentShare) {
|
|
||||||
iconArray.push(h('UserAvatar', {
|
|
||||||
props: {
|
|
||||||
userid: row.created_id,
|
|
||||||
size: 20
|
|
||||||
},
|
|
||||||
}, [
|
|
||||||
row.created_id != row.userid ? h('p', [h('strong', this.$L('成员创建于') + ": " + row.created_at)]) : h('p', this.$L('所有者创建') + ": " + row.created_at)
|
|
||||||
]))
|
|
||||||
}
|
|
||||||
return h('div', {
|
|
||||||
class: 'file-nbox'
|
|
||||||
}, [
|
|
||||||
h('div', {
|
|
||||||
class: `no-dark-mode-before file-name file-icon ${row.type}`,
|
|
||||||
}, array),
|
|
||||||
iconArray
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$L('大小'),
|
|
||||||
key: 'size',
|
|
||||||
width: 110,
|
|
||||||
resizable: true,
|
|
||||||
sortable: true,
|
|
||||||
render: (h, {row}) => {
|
|
||||||
if (row.type == 'folder') {
|
|
||||||
return h('div', '-')
|
|
||||||
}
|
|
||||||
return h('AutoTip', $A.bytesToSize(row.size));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$L('类型'),
|
|
||||||
key: 'type',
|
|
||||||
width: 110,
|
|
||||||
resizable: true,
|
|
||||||
sortable: true,
|
|
||||||
render: (h, {row}) => {
|
|
||||||
let type = this.types.find(({value, name}) => value == row.type && name);
|
|
||||||
if (type) {
|
|
||||||
return h('AutoTip', type.name);
|
|
||||||
} else {
|
|
||||||
return h('div', (row.ext || row.type).replace(/^\S/, s => s.toUpperCase()))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$L('所有者'),
|
|
||||||
key: 'userid',
|
|
||||||
width: 130,
|
|
||||||
resizable: true,
|
|
||||||
sortable: true,
|
|
||||||
render: (h, {row}) => {
|
|
||||||
return h('UserAvatar', {
|
|
||||||
props: {
|
|
||||||
size: 18,
|
|
||||||
userid: row.userid,
|
|
||||||
showIcon: false,
|
|
||||||
showName: true,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: this.$L('最后修改'),
|
|
||||||
key: 'updated_at',
|
|
||||||
width: 168,
|
|
||||||
resizable: true,
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
formatName(file) {
|
formatName(file) {
|
||||||
let {name, ext} = file;
|
let {name, ext} = file;
|
||||||
if (ext != '') {
|
if (ext != '') {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user