Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Simoje丶
vue-vben-admin
提交
3f6920f7
V
vue-vben-admin
项目概览
Simoje丶
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3f6920f7
编写于
6月 11, 2021
作者:
V
Vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf(component): optimize tree and upload components
上级
fa828fd9
变更
18
隐藏空白更改
内联
并排
Showing
18 changed file
with
161 addition
and
159 deletion
+161
-159
src/components/Tree/index.ts
src/components/Tree/index.ts
+1
-1
src/components/Tree/src/Tree.vue
src/components/Tree/src/Tree.vue
+2
-2
src/components/Tree/src/TreeHeader.vue
src/components/Tree/src/TreeHeader.vue
+8
-1
src/components/Tree/src/enum.ts
src/components/Tree/src/enum.ts
+0
-8
src/components/Tree/src/props.ts
src/components/Tree/src/props.ts
+1
-1
src/components/Tree/src/typing.ts
src/components/Tree/src/typing.ts
+0
-0
src/components/Tree/src/useTree.ts
src/components/Tree/src/useTree.ts
+1
-1
src/components/Upload/index.ts
src/components/Upload/index.ts
+4
-1
src/components/Upload/src/BasicUpload.vue
src/components/Upload/src/BasicUpload.vue
+22
-19
src/components/Upload/src/FileList.less
src/components/Upload/src/FileList.less
+0
-31
src/components/Upload/src/FileList.tsx
src/components/Upload/src/FileList.tsx
+0
-72
src/components/Upload/src/FileList.vue
src/components/Upload/src/FileList.vue
+104
-0
src/components/Upload/src/UploadModal.vue
src/components/Upload/src/UploadModal.vue
+11
-9
src/components/Upload/src/UploadPreviewModal.vue
src/components/Upload/src/UploadPreviewModal.vue
+3
-6
src/components/Upload/src/data.tsx
src/components/Upload/src/data.tsx
+2
-3
src/components/Upload/src/props.ts
src/components/Upload/src/props.ts
+1
-1
src/components/Upload/src/typing.ts
src/components/Upload/src/typing.ts
+0
-0
src/components/Upload/src/useUpload.ts
src/components/Upload/src/useUpload.ts
+1
-3
未找到文件。
src/components/Tree/index.ts
浏览文件 @
3f6920f7
...
...
@@ -2,4 +2,4 @@ import BasicTree from './src/Tree.vue';
export
{
BasicTree
};
export
type
{
ContextMenuItem
}
from
'
/@/hooks/web/useContextMenu
'
;
export
*
from
'
./src/typ
es
'
;
export
*
from
'
./src/typ
ing
'
;
src/components/Tree/src/Tree.vue
浏览文件 @
3f6920f7
<
script
lang=
"tsx"
>
import
type
{
ReplaceFields
,
Keys
,
CheckKeys
,
TreeActionType
,
TreeItem
}
from
'
./typ
es
'
;
import
type
{
ReplaceFields
,
Keys
,
CheckKeys
,
TreeActionType
,
TreeItem
}
from
'
./typ
ing
'
;
import
{
defineComponent
,
...
...
@@ -30,7 +30,7 @@
import
{
basicProps
}
from
'
./props
'
;
import
{
CreateContextOptions
}
from
'
/@/components/ContextMenu
'
;
import
{
CheckEvent
}
from
'
./typ
es
'
;
import
{
CheckEvent
}
from
'
./typ
ing
'
;
interface
State
{
expandedKeys
:
Keys
;
...
...
src/components/Tree/src/TreeHeader.vue
浏览文件 @
3f6920f7
...
...
@@ -43,7 +43,14 @@
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
import
{
useDebounceFn
}
from
'
@vueuse/core
'
;
import
{
ToolbarEnum
}
from
'
./enum
'
;
enum
ToolbarEnum
{
SELECT_ALL
,
UN_SELECT_ALL
,
EXPAND_ALL
,
UN_EXPAND_ALL
,
CHECK_STRICTLY
,
CHECK_UN_STRICTLY
,
}
interface
MenuInfo
{
key
:
ToolbarEnum
;
...
...
src/components/Tree/src/enum.ts
已删除
100644 → 0
浏览文件 @
fa828fd9
export
enum
ToolbarEnum
{
SELECT_ALL
,
UN_SELECT_ALL
,
EXPAND_ALL
,
UN_EXPAND_ALL
,
CHECK_STRICTLY
,
CHECK_UN_STRICTLY
,
}
src/components/Tree/src/props.ts
浏览文件 @
3f6920f7
import
type
{
PropType
}
from
'
vue
'
;
import
type
{
ReplaceFields
,
ActionItem
,
Keys
,
CheckKeys
,
ContextMenuOptions
}
from
'
./typ
es
'
;
import
type
{
ReplaceFields
,
ActionItem
,
Keys
,
CheckKeys
,
ContextMenuOptions
}
from
'
./typ
ing
'
;
import
type
{
ContextMenuItem
}
from
'
/@/hooks/web/useContextMenu
'
;
import
type
{
TreeDataItem
}
from
'
ant-design-vue/es/tree/Tree
'
;
import
{
propTypes
}
from
'
/@/utils/propTypes
'
;
...
...
src/components/Tree/src/typ
es
.ts
→
src/components/Tree/src/typ
ing
.ts
浏览文件 @
3f6920f7
文件已移动
src/components/Tree/src/useTree.ts
浏览文件 @
3f6920f7
import
type
{
InsertNodeParams
,
Keys
,
ReplaceFields
}
from
'
./typ
es
'
;
import
type
{
InsertNodeParams
,
Keys
,
ReplaceFields
}
from
'
./typ
ing
'
;
import
type
{
Ref
,
ComputedRef
}
from
'
vue
'
;
import
type
{
TreeDataItem
}
from
'
ant-design-vue/es/tree/Tree
'
;
...
...
src/components/Upload/index.ts
浏览文件 @
3f6920f7
export
{
default
as
BasicUpload
}
from
'
./src/BasicUpload.vue
'
;
import
{
withInstall
}
from
'
/@/utils
'
;
import
basicUpload
from
'
./src/BasicUpload.vue
'
;
export
const
BasicUpload
=
withInstall
(
basicUpload
);
src/components/Upload/src/BasicUpload.vue
浏览文件 @
3f6920f7
...
...
@@ -7,14 +7,14 @@
<Tooltip
placement=
"bottom"
v-if=
"showPreview"
>
<template
#title
>
{{
t
(
'
component.upload.uploaded
'
)
}}
<template
v-if=
"fileList
Ref
.length"
>
{{
fileList
Ref
.
length
}}
<template
v-if=
"fileList.length"
>
{{
fileList
.
length
}}
</
template
>
</template>
<a-button
@
click=
"openPreviewModal"
>
<Icon
icon=
"bi:eye"
/>
<
template
v-if=
"fileList
Ref
.length && showPreviewNumber"
>
{{
fileList
Ref
.
length
}}
<
template
v-if=
"fileList.length && showPreviewNumber"
>
{{
fileList
.
length
}}
</
template
>
</a-button>
</Tooltip>
...
...
@@ -22,13 +22,14 @@
<UploadModal
v-bind=
"bindValue"
:previewFileList=
"fileList
Ref
"
:previewFileList=
"fileList"
@
register=
"registerUploadModal"
@
change=
"handleChange"
@
delete=
"handleDelete"
/>
<UploadPreviewModal
:value=
"fileList
Ref
"
:value=
"fileList"
@
register=
"registerPreviewModal"
@
list-change=
"handlePreviewChange"
/>
...
...
@@ -36,14 +37,11 @@
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
,
ref
,
watch
,
unref
,
computed
}
from
'
vue
'
;
import
UploadModal
from
'
./UploadModal.vue
'
;
import
UploadPreviewModal
from
'
./UploadPreviewModal.vue
'
;
import
Icon
from
'
/@/components/Icon
'
;
import
{
Icon
}
from
'
/@/components/Icon
'
;
import
{
Tooltip
}
from
'
ant-design-vue
'
;
import
{
useModal
}
from
'
/@/components/Modal
'
;
import
{
uploadContainerProps
}
from
'
./props
'
;
import
{
omit
}
from
'
lodash-es
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
...
...
@@ -52,7 +50,7 @@
name
:
'
BasicUpload
'
,
components
:
{
UploadModal
,
UploadPreviewModal
,
Icon
,
Tooltip
},
props
:
uploadContainerProps
,
emits
:
[
'
change
'
],
emits
:
[
'
change
'
,
'
delete
'
],
setup
(
props
,
{
emit
,
attrs
})
{
const
{
t
}
=
useI18n
();
...
...
@@ -62,12 +60,12 @@
// 预览modal
const
[
registerPreviewModal
,
{
openModal
:
openPreviewModal
}]
=
useModal
();
const
fileList
Ref
=
ref
<
string
[]
>
([]);
const
fileList
=
ref
<
string
[]
>
([]);
const
showPreview
=
computed
(()
=>
{
const
{
emptyHidePreview
}
=
props
;
if
(
!
emptyHidePreview
)
return
true
;
return
emptyHidePreview
?
fileList
Ref
.
value
.
length
>
0
:
true
;
return
emptyHidePreview
?
fileList
.
value
.
length
>
0
:
true
;
});
const
bindValue
=
computed
(()
=>
{
...
...
@@ -78,21 +76,25 @@
watch
(
()
=>
props
.
value
,
(
value
=
[])
=>
{
fileList
Ref
.
value
=
value
;
fileList
.
value
=
value
;
},
{
immediate
:
true
}
);
// 上传modal保存操作
function
handleChange
(
urls
:
string
[])
{
fileList
Ref
.
value
=
[...
unref
(
fileListRef
),
...(
urls
||
[])];
emit
(
'
change
'
,
fileList
Ref
.
value
);
fileList
.
value
=
[...
unref
(
fileList
),
...(
urls
||
[])];
emit
(
'
change
'
,
fileList
.
value
);
}
// 预览modal保存操作
function
handlePreviewChange
(
urls
:
string
[])
{
fileListRef
.
value
=
[...(
urls
||
[])];
emit
(
'
change
'
,
fileListRef
.
value
);
fileList
.
value
=
[...(
urls
||
[])];
emit
(
'
change
'
,
fileList
.
value
);
}
function
handleDelete
(
record
:
Recordable
)
{
emit
(
'
delete
'
,
record
);
}
return
{
...
...
@@ -102,9 +104,10 @@
handlePreviewChange
,
registerPreviewModal
,
openPreviewModal
,
fileList
Ref
,
fileList
,
showPreview
,
bindValue
,
handleDelete
,
t
,
};
},
...
...
src/components/Upload/src/FileList.less
已删除
100644 → 0
浏览文件 @
fa828fd9
.file-table {
width: 100%;
border-collapse: collapse;
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
&-th,
&-td {
padding: 12px 8px;
}
thead {
background-color: @background-color-light;
}
table,
td,
th {
border: 1px solid @border-color-base;
}
}
src/components/Upload/src/FileList.tsx
已删除
100644 → 0
浏览文件 @
fa828fd9
import
{
defineComponent
,
CSSProperties
,
watch
,
nextTick
}
from
'
vue
'
;
import
{
fileListProps
}
from
'
./props
'
;
import
{
isFunction
}
from
'
/@/utils/is
'
;
import
'
./FileList.less
'
;
import
{
useModalContext
}
from
'
/@/components/Modal/src/hooks/useModalContext
'
;
export
default
defineComponent
({
name
:
'
FileList
'
,
props
:
fileListProps
,
setup
(
props
)
{
const
modalFn
=
useModalContext
();
watch
(
()
=>
props
.
dataSource
,
()
=>
{
nextTick
(()
=>
{
modalFn
?.
redoModalHeight
?.();
});
}
);
return
()
=>
{
const
{
columns
,
actionColumn
,
dataSource
}
=
props
;
const
columnList
=
[...
columns
,
actionColumn
];
return
(
<
table
class
=
"file-table"
>
<
colgroup
>
{
columnList
.
map
((
item
)
=>
{
const
{
width
=
0
,
dataIndex
}
=
item
;
const
style
:
CSSProperties
=
{
width
:
`
${
width
}
px`
,
minWidth
:
`
${
width
}
px`
,
};
return
<
col
style
=
{
width
?
style
:
{}
}
key
=
{
dataIndex
}
/>;
})
}
</
colgroup
>
<
thead
>
<
tr
class
=
"file-table-tr"
>
{
columnList
.
map
((
item
)
=>
{
const
{
title
=
''
,
align
=
'
center
'
,
dataIndex
}
=
item
;
return
(
<
th
class
=
{
[
'
file-table-th
'
,
align
]
}
key
=
{
dataIndex
}
>
{
title
}
</
th
>
);
})
}
</
tr
>
</
thead
>
<
tbody
>
{
dataSource
.
map
((
record
=
{},
index
)
=>
{
return
(
<
tr
class
=
"file-table-tr"
key
=
{
`
${
index
+
record
.
name
||
''
}
`
}
>
{
columnList
.
map
((
item
)
=>
{
const
{
dataIndex
=
''
,
customRender
,
align
=
'
center
'
}
=
item
;
const
render
=
customRender
&&
isFunction
(
customRender
);
return
(
<
td
class
=
{
[
'
file-table-td
'
,
align
]
}
key
=
{
dataIndex
}
>
{
render
?
customRender
?.({
text
:
record
[
dataIndex
],
record
})
:
record
[
dataIndex
]
}
</
td
>
);
})
}
</
tr
>
);
})
}
</
tbody
>
</
table
>
);
};
},
});
src/components/Upload/src/FileList.vue
0 → 100644
浏览文件 @
3f6920f7
<
script
lang=
"tsx"
>
import
{
defineComponent
,
CSSProperties
,
watch
,
nextTick
}
from
'
vue
'
;
import
{
fileListProps
}
from
'
./props
'
;
import
{
isFunction
}
from
'
/@/utils/is
'
;
import
{
useModalContext
}
from
'
/@/components/Modal/src/hooks/useModalContext
'
;
export
default
defineComponent
({
name
:
'
FileList
'
,
props
:
fileListProps
,
setup
(
props
)
{
const
modalFn
=
useModalContext
();
watch
(
()
=>
props
.
dataSource
,
()
=>
{
nextTick
(()
=>
{
modalFn
?.
redoModalHeight
?.();
});
}
);
return
()
=>
{
const
{
columns
,
actionColumn
,
dataSource
}
=
props
;
const
columnList
=
[...
columns
,
actionColumn
];
return
(
<
table
class
=
"
file-table
"
>
<
colgroup
>
{
columnList
.
map
((
item
)
=>
{
const
{
width
=
0
,
dataIndex
}
=
item
;
const
style
:
CSSProperties
=
{
width
:
`
${
width
}
px`
,
minWidth
:
`
${
width
}
px`
,
};
return
<
col
style
=
{
width
?
style
:
{}}
key
=
{
dataIndex
}
/>
;
})}
<
/colgroup
>
<
thead
>
<
tr
class
=
"
file-table-tr
"
>
{
columnList
.
map
((
item
)
=>
{
const
{
title
=
''
,
align
=
'
center
'
,
dataIndex
}
=
item
;
return
(
<
th
class
=
{[
'
file-table-th
'
,
align
]}
key
=
{
dataIndex
}
>
{
title
}
<
/th
>
);
})}
<
/tr
>
<
/thead
>
<
tbody
>
{
dataSource
.
map
((
record
=
{},
index
)
=>
{
return
(
<
tr
class
=
"
file-table-tr
"
key
=
{
`
${
index
+
record
.
name
||
''
}
`
}
>
{
columnList
.
map
((
item
)
=>
{
const
{
dataIndex
=
''
,
customRender
,
align
=
'
center
'
}
=
item
;
const
render
=
customRender
&&
isFunction
(
customRender
);
return
(
<
td
class
=
{[
'
file-table-td
'
,
align
]}
key
=
{
dataIndex
}
>
{
render
?
customRender
?.({
text
:
record
[
dataIndex
],
record
})
:
record
[
dataIndex
]}
<
/td
>
);
})}
<
/tr
>
);
})}
<
/tbody
>
<
/table
>
);
};
},
});
</
script
>
<
style
lang=
"less"
>
.file-table {
width: 100%;
border-collapse: collapse;
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
&-th,
&-td {
padding: 12px 8px;
}
thead {
background-color: @background-color-light;
}
table,
td,
th {
border: 1px solid @border-color-base;
}
}
</
style
>
src/components/Upload/src/UploadModal.vue
浏览文件 @
3f6920f7
...
...
@@ -50,7 +50,7 @@
import
{
useUploadType
}
from
'
./useUpload
'
;
import
{
useMessage
}
from
'
/@/hooks/web/useMessage
'
;
// types
import
{
FileItem
,
UploadResultStatus
}
from
'
./typ
es
'
;
import
{
FileItem
,
UploadResultStatus
}
from
'
./typ
ing
'
;
import
{
basicProps
}
from
'
./props
'
;
import
{
createTableColumns
,
createActionColumn
}
from
'
./data
'
;
// utils
...
...
@@ -58,9 +58,9 @@
import
{
buildUUID
}
from
'
/@/utils/uuid
'
;
import
{
isFunction
}
from
'
/@/utils/is
'
;
import
{
warn
}
from
'
/@/utils/log
'
;
import
FileList
from
'
./FileList
'
;
import
FileList
from
'
./FileList.vue
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
export
default
defineComponent
({
components
:
{
BasicModal
,
Upload
,
Alert
,
FileList
},
props
:
{
...
...
@@ -70,20 +70,20 @@
default
:
()
=>
[],
},
},
emits
:
[
'
change
'
,
'
register
'
],
emits
:
[
'
change
'
,
'
register
'
,
'
delete
'
],
setup
(
props
,
{
emit
})
{
const
{
t
}
=
useI18n
();
const
state
=
reactive
<
{
fileList
:
FileItem
[]
}
>
({
fileList
:
[],
});
// 是否正在上传
const
isUploadingRef
=
ref
(
false
);
const
fileListRef
=
ref
<
FileItem
[]
>
([]);
const
state
=
reactive
<
{
fileList
:
FileItem
[]
}
>
({
fileList
:
[],
});
const
{
accept
,
helpText
,
maxNumber
,
maxSize
}
=
toRefs
(
props
);
const
{
t
}
=
useI18n
();
const
[
register
,
{
closeModal
}]
=
useModalInner
();
const
{
accept
,
helpText
,
maxNumber
,
maxSize
}
=
toRefs
(
props
);
const
{
getAccept
,
getStringAccept
,
getHelpText
}
=
useUploadType
({
acceptRef
:
accept
,
helpTextRef
:
helpText
,
...
...
@@ -162,10 +162,12 @@
}
return
false
;
}
// 删除
function
handleRemove
(
record
:
FileItem
)
{
const
index
=
fileListRef
.
value
.
findIndex
((
item
)
=>
item
.
uuid
===
record
.
uuid
);
index
!==
-
1
&&
fileListRef
.
value
.
splice
(
index
,
1
);
emit
(
'
delete
'
,
record
);
}
// 预览
...
...
src/components/Upload/src/UploadPreviewModal.vue
浏览文件 @
3f6920f7
...
...
@@ -12,18 +12,15 @@
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
watch
,
ref
}
from
'
vue
'
;
// import { BasicTable, useTable } from '/@/components/Table';
import
FileList
from
'
./FileList
'
;
import
FileList
from
'
./FileList.vue
'
;
import
{
BasicModal
,
useModalInner
}
from
'
/@/components/Modal
'
;
import
{
previewProps
}
from
'
./props
'
;
import
{
PreviewFileItem
}
from
'
./typ
es
'
;
import
{
PreviewFileItem
}
from
'
./typ
ing
'
;
import
{
downloadByUrl
}
from
'
/@/utils/file/download
'
;
import
{
createPreviewColumns
,
createPreviewActionColumn
}
from
'
./data
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
export
default
defineComponent
({
components
:
{
BasicModal
,
FileList
},
props
:
previewProps
,
...
...
src/components/Upload/src/data.tsx
浏览文件 @
3f6920f7
import
type
{
BasicColumn
,
ActionItem
}
from
'
/@/components/Table
'
;
import
{
FileItem
,
PreviewFileItem
,
UploadResultStatus
}
from
'
./types
'
;
import
{
FileItem
,
PreviewFileItem
,
UploadResultStatus
}
from
'
./typing
'
;
import
{
// checkImgType,
isImgTypeByName
,
}
from
'
./helper
'
;
import
{
Progress
,
Tag
}
from
'
ant-design-vue
'
;
import
TableAction
from
'
/@/components/Table/src/components/TableAction.vue
'
;
import
ThumbUrl
from
'
./ThumbUrl.vue
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
const
{
t
}
=
useI18n
();
// 文件上传列表
...
...
src/components/Upload/src/props.ts
浏览文件 @
3f6920f7
import
type
{
PropType
}
from
'
vue
'
;
import
{
FileBasicColumn
}
from
'
./typ
es
'
;
import
{
FileBasicColumn
}
from
'
./typ
ing
'
;
export
const
basicProps
=
{
helpText
:
{
...
...
src/components/Upload/src/typ
es
.ts
→
src/components/Upload/src/typ
ing
.ts
浏览文件 @
3f6920f7
文件已移动
src/components/Upload/src/useUpload.ts
浏览文件 @
3f6920f7
...
...
@@ -3,20 +3,17 @@ import { useI18n } from '/@/hooks/web/useI18n';
const
{
t
}
=
useI18n
();
export
function
useUploadType
({
acceptRef
,
// uploadTypeRef,
helpTextRef
,
maxNumberRef
,
maxSizeRef
,
}:
{
acceptRef
:
Ref
<
string
[]
>
;
// uploadTypeRef: Ref<UploadTypeEnum>;
helpTextRef
:
Ref
<
string
>
;
maxNumberRef
:
Ref
<
number
>
;
maxSizeRef
:
Ref
<
number
>
;
})
{
// 文件类型限制
const
getAccept
=
computed
(()
=>
{
// const uploadType = unref(uploadTypeRef);
const
accept
=
unref
(
acceptRef
);
if
(
accept
&&
accept
.
length
>
0
)
{
return
accept
;
...
...
@@ -28,6 +25,7 @@ export function useUploadType({
.
map
((
item
)
=>
`.
${
item
}
`
)
.
join
(
'
,
'
);
});
// 支持jpg、jpeg、png格式,不超过2M,最多可选择10张图片,。
const
getHelpText
=
computed
(()
=>
{
const
helpText
=
unref
(
helpTextRef
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录