perf: 优化文件重命名
This commit is contained in:
kuaifan
parent
967c4f04d9
commit
e5ddf5616a
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="quick-edit" :class="[alwaysIcon ? 'quick-always' : '']">
|
||||
<div v-if="isEdit" v-clickoutside="onEnter" class="quick-input">
|
||||
<TagInput v-if="isTag" ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter"/>
|
||||
<Input v-else ref="input" v-model="content" :disabled="isLoad" @on-enter="onEnter"/>
|
||||
<div v-if="isEdit" v-clickoutside="onClickOut" class="quick-input">
|
||||
<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" @on-blur="onBlur"/>
|
||||
<div v-if="isLoad" class="quick-loading"><Loading/></div>
|
||||
</div>
|
||||
<template v-else>
|
||||
@ -33,6 +33,10 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clickOutSide: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -86,6 +90,20 @@ export default {
|
||||
this.isLoad = false;
|
||||
})
|
||||
},
|
||||
|
||||
onClickOut() {
|
||||
if (!this.clickOutSide) {
|
||||
return;
|
||||
}
|
||||
this.onEnter();
|
||||
},
|
||||
|
||||
onBlur() {
|
||||
if (this.clickOutSide) {
|
||||
return;
|
||||
}
|
||||
this.onEnter();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -149,12 +149,14 @@
|
||||
downEnter(e) {
|
||||
e.preventDefault();
|
||||
},
|
||||
onFocus() {
|
||||
onFocus(e) {
|
||||
this.isFocus = true;
|
||||
this.$emit("on-focus", e)
|
||||
},
|
||||
onBlur() {
|
||||
onBlur(e) {
|
||||
this.isFocus = false;
|
||||
this.addTag(false, this.content)
|
||||
this.$emit("on-blur", e)
|
||||
},
|
||||
addTag(e, content) {
|
||||
|
||||
|
||||
@ -381,7 +381,180 @@ export default {
|
||||
|
||||
tableHeight: 500,
|
||||
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,
|
||||
shareInfo: {id: 0, userid: 0, permission: 1},
|
||||
@ -540,182 +713,6 @@ export default {
|
||||
},
|
||||
|
||||
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) {
|
||||
let {name, ext} = file;
|
||||
if (ext != '') {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user