Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Bug 终结者
vue-vben-admin
提交
815250ed
V
vue-vben-admin
项目概览
Bug 终结者
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
1
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,体验更适合开发者的 AI 搜索 >>
提交
815250ed
编写于
11月 18, 2020
作者:
J
jq
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: update upload component
上级
c8ef82b2
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
183 addition
and
34 deletion
+183
-34
src/components/Upload/src/FileList.less
src/components/Upload/src/FileList.less
+34
-0
src/components/Upload/src/FileList.tsx
src/components/Upload/src/FileList.tsx
+57
-0
src/components/Upload/src/UploadModal.vue
src/components/Upload/src/UploadModal.vue
+38
-23
src/components/Upload/src/UploadPreviewModal.vue
src/components/Upload/src/UploadPreviewModal.vue
+7
-10
src/components/Upload/src/data.tsx
src/components/Upload/src/data.tsx
+1
-1
src/components/Upload/src/props.ts
src/components/Upload/src/props.ts
+16
-0
src/components/Upload/src/types.ts
src/components/Upload/src/types.ts
+30
-0
未找到文件。
src/components/Upload/src/FileList.less
0 → 100644
浏览文件 @
815250ed
@import (reference) '../../../design/index.less';
.file-table {
width: 100%;
border-collapse: collapse;
// border: 1px solid @border-color-light;
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
&-th,
&-td {
padding: 12px 8px;
}
thead {
background-color: @background-color-dark;
}
table,
td,
th {
border: 1px solid @border-color-light;
}
}
src/components/Upload/src/FileList.tsx
0 → 100644
浏览文件 @
815250ed
import
{
defineComponent
}
from
'
vue
'
;
import
{
fileListProps
}
from
'
./props
'
;
import
{
isFunction
}
from
'
/@/utils/is
'
;
import
'
./FileList.less
'
;
export
default
defineComponent
({
name
:
'
FileList
'
,
props
:
fileListProps
,
setup
(
props
)
{
return
()
=>
{
const
{
columns
,
actionColumn
,
dataSource
}
=
props
;
return
(
<
table
class
=
"file-table"
>
<
colgroup
>
{
[...
columns
,
actionColumn
].
map
((
item
)
=>
{
const
{
width
=
0
}
=
item
;
return
width
?
(
<
col
style
=
{
'
width:
'
+
width
+
'
px;min-width:
'
+
width
+
'
px;
'
}
/>
)
:
(
<
col
/>
);
})
}
</
colgroup
>
<
thead
>
<
tr
class
=
"file-table-tr"
>
{
[...
columns
,
actionColumn
].
map
((
item
)
=>
{
const
{
title
=
''
,
align
=
'
center
'
}
=
item
;
return
<
th
class
=
{
[
'
file-table-th
'
,
align
]
}
>
{
title
}
</
th
>;
})
}
</
tr
>
</
thead
>
<
tbody
>
{
dataSource
.
map
((
record
=
{})
=>
{
return
(
<
tr
class
=
"file-table-tr"
>
{
[...
columns
,
actionColumn
].
map
((
item
)
=>
{
const
{
dataIndex
=
''
,
customRender
,
align
=
'
center
'
}
=
item
;
if
(
customRender
&&
isFunction
(
customRender
))
{
return
(
<
td
class
=
{
[
'
file-table-td
'
,
align
]
}
>
{
customRender
({
text
:
record
[
dataIndex
],
record
})
}
</
td
>
);
}
else
{
return
<
td
class
=
{
[
'
file-table-td
'
,
align
]
}
>
{
record
[
dataIndex
]
}
</
td
>;
}
})
}
</
tr
>
);
})
}
</
tbody
>
</
table
>
);
};
},
});
src/components/Upload/src/UploadModal.vue
浏览文件 @
815250ed
...
...
@@ -23,24 +23,25 @@
{{
getUploadBtnText
}}
</a-button>
</
template
>
<BasicTable
@
register=
"registerTable"
:dataSource=
"fileListRef"
>
<
template
#toolbar
>
<Upload
:accept=
"getStringAccept"
:multiple=
"multiple"
:before-upload=
"beforeUpload"
>
<a-button
type=
"primary"
>
选择文件
</a-button>
</Upload>
</
template
>
<
template
#tableTitle
>
<Alert
:message=
"getHelpText"
type=
"info"
banner
></Alert>
</
template
>
</BasicTable>
<div
class=
"upload-modal-toolbar"
>
<Alert
:message=
"getHelpText"
type=
"info"
banner
class=
"upload-modal-toolbar__text"
></Alert>
<Upload
:accept=
"getStringAccept"
:multiple=
"multiple"
:before-upload=
"beforeUpload"
class=
"upload-modal-toolbar__btn"
>
<a-button
type=
"primary"
>
选择文件
</a-button>
</Upload>
</div>
<FileList
:dataSource=
"fileListRef"
:columns=
"columns"
:actionColumn=
"actionColumn"
/>
</BasicModal>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
,
reactive
,
ref
,
toRefs
,
unref
,
computed
}
from
'
vue
'
;
import
{
Upload
,
Alert
}
from
'
ant-design-vue
'
;
import
{
BasicModal
,
useModalInner
}
from
'
/@/components/Modal
'
;
import
{
BasicTable
,
useTable
}
from
'
/@/components/Table
'
;
//
import { BasicTable, useTable } from '/@/components/Table';
// hooks
import
{
useUploadType
}
from
'
./useUpload
'
;
import
{
useMessage
}
from
'
/@/hooks/web/useMessage
'
;
...
...
@@ -55,9 +56,9 @@
import
{
uploadApi
}
from
'
/@/api/sys/upload
'
;
import
{
isFunction
}
from
'
/@/utils/is
'
;
import
{
warn
}
from
'
/@/utils/log
'
;
import
FileList
from
'
./FileList
'
;
export
default
defineComponent
({
components
:
{
BasicModal
,
Upload
,
BasicTable
,
Aler
t
},
components
:
{
BasicModal
,
Upload
,
Alert
,
FileLis
t
},
props
:
basicProps
,
setup
(
props
,
{
emit
})
{
// 是否正在上传
...
...
@@ -257,23 +258,25 @@
}
}
const
[
registerTable
]
=
useTable
({
// const [registerTable] = useTable({
// columns: createTableColumns(),
// actionColumn: createActionColumn(handleRemove, handlePreview),
// pagination: false,
// inset: true,
// scroll: {
// y: 3000,
// },
// });
return
{
columns
:
createTableColumns
(),
actionColumn
:
createActionColumn
(
handleRemove
,
handlePreview
),
pagination
:
false
,
inset
:
true
,
scroll
:
{
y
:
3000
,
},
});
return
{
register
,
closeModal
,
getHelpText
,
getStringAccept
,
getOkButtonProps
,
beforeUpload
,
registerTable
,
//
registerTable,
fileListRef
,
state
,
isUploadingRef
,
...
...
@@ -295,5 +298,17 @@
.ant-table-wrapper .ant-spin-nested-loading {
padding: 0;
}
&-toolbar {
display: flex;
align-items: center;
margin-bottom: 8px;
&__btn {
margin-left: 8px;
text-align: right;
flex: 1;
}
}
}
</
style
>
src/components/Upload/src/UploadPreviewModal.vue
浏览文件 @
815250ed
...
...
@@ -7,13 +7,15 @@
@
register=
"register"
:showOkBtn=
"false"
>
<
BasicTable
@
register=
"registerTable"
:dataSource=
"fileListRef
"
/>
<
FileList
:dataSource=
"fileListRef"
:columns=
"columns"
:actionColumn=
"actionColumn
"
/>
</BasicModal>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
watch
,
ref
,
unref
}
from
'
vue
'
;
import
{
BasicTable
,
useTable
}
from
'
/@/components/Table
'
;
// import { BasicTable, useTable } from '/@/components/Table';
import
FileList
from
'
./FileList
'
;
import
{
BasicModal
,
useModalInner
}
from
'
/@/components/Modal
'
;
import
{
previewProps
}
from
'
./props
'
;
import
{
PreviewFileItem
}
from
'
./types
'
;
...
...
@@ -22,7 +24,7 @@
import
{
createPreviewColumns
,
createPreviewActionColumn
}
from
'
./data
'
;
export
default
defineComponent
({
components
:
{
BasicModal
,
BasicTable
},
components
:
{
BasicModal
,
FileList
},
props
:
previewProps
,
setup
(
props
,
{
emit
})
{
const
[
register
,
{
closeModal
}]
=
useModalInner
();
...
...
@@ -71,17 +73,12 @@
downloadByUrl
({
url
});
}
const
[
registerTable
]
=
useTable
({
columns
:
createPreviewColumns
(),
pagination
:
false
,
actionColumn
:
createPreviewActionColumn
({
handleRemove
,
handlePreview
,
handleDownload
}),
});
return
{
register
,
closeModal
,
fileListRef
,
registerTable
,
columns
:
createPreviewColumns
(),
actionColumn
:
createPreviewActionColumn
({
handleRemove
,
handlePreview
,
handleDownload
}),
};
},
});
...
...
src/components/Upload/src/data.tsx
浏览文件 @
815250ed
...
...
@@ -12,7 +12,7 @@ export function createTableColumns(): BasicColumn[] {
width
:
100
,
customRender
:
({
record
})
=>
{
const
{
thumbUrl
,
type
}
=
(
record
as
FileItem
)
||
{};
return
<
span
>
{
thumbUrl
?
<
img
style
=
{
{
maxWidth
:
'
60px
'
}
}
src
=
{
thumbUrl
}
/>
:
type
}
</
span
>;
return
<
span
>
{
thumbUrl
?
<
img
style
=
{
{
maxWidth
:
'
100%
'
}
}
src
=
{
thumbUrl
}
/>
:
type
}
</
span
>;
},
},
{
...
...
src/components/Upload/src/props.ts
浏览文件 @
815250ed
import
type
{
PropType
}
from
'
vue
'
;
import
{
FileBasicColumn
}
from
'
./types
'
;
export
const
basicProps
=
{
helpText
:
{
...
...
@@ -57,3 +58,18 @@ export const previewProps = {
default
:
()
=>
[],
},
};
export
const
fileListProps
=
{
columns
:
{
type
:
[
Array
]
as
PropType
<
FileBasicColumn
[]
>
,
default
:
null
,
},
actionColumn
:
{
type
:
Object
as
PropType
<
FileBasicColumn
>
,
default
:
null
,
},
dataSource
:
{
type
:
Array
as
PropType
<
any
[]
>
,
default
:
null
,
},
};
src/components/Upload/src/types.ts
浏览文件 @
815250ed
...
...
@@ -23,3 +23,33 @@ export interface PreviewFileItem {
name
:
string
;
type
:
string
;
}
export
interface
FileBasicColumn
{
/**
* Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
* @type Function | ScopedSlot
*/
customRender
?:
Function
;
/**
* Title of this column
* @type any (string | slot)
*/
title
:
string
;
/**
* Width of this column
* @type string | number
*/
width
?:
number
;
/**
* Display field of the data record, could be set like a.b.c
* @type string
*/
dataIndex
:
string
;
/**
* specify how content is aligned
* @default 'left'
* @type string
*/
align
?:
'
left
'
|
'
right
'
|
'
center
'
;
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录