Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
InJoyU
vue-element-admin
提交
6d9ddadc
V
vue-element-admin
项目概览
InJoyU
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
6d9ddadc
编写于
4月 22, 2017
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add table demo
上级
95aca8e0
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
431 addition
and
6 deletion
+431
-6
src/api/article.js
src/api/article.js
+2
-2
src/api/article_table.js
src/api/article_table.js
+48
-0
src/assets/iconfont/iconfont.js
src/assets/iconfont/iconfont.js
+6
-0
src/mock/article_table.js
src/mock/article_table.js
+45
-0
src/mock/index.js
src/mock/index.js
+7
-0
src/router/index.js
src/router/index.js
+3
-1
src/utils/fetch.js
src/utils/fetch.js
+3
-3
src/views/example/table.vue
src/views/example/table.vue
+317
-0
未找到文件。
src/api/article.js
浏览文件 @
6d9ddadc
import
{
tpF
etch
}
from
'
utils/fetch
'
;
import
{
f
etch
}
from
'
utils/fetch
'
;
export
function
getList
()
{
return
tpF
etch
({
return
f
etch
({
url
:
'
/article/list
'
,
method
:
'
get
'
});
...
...
src/api/article_table.js
0 → 100644
浏览文件 @
6d9ddadc
import
{
fetch
}
from
'
utils/fetch
'
;
import
{
param
}
from
'
utils
'
;
// export function calendarsList(query) {
// return fetch({
// url: '/finfo/calendars?' + param(query),
// method: 'get'
// });
// }
export
function
fetchList
(
query
)
{
return
fetch
({
url
:
'
/article_table/list
'
,
method
:
'
get
'
});
}
export
function
calendarCreate
(
data
)
{
return
fetch
({
url
:
'
/finfo/calendar/create
'
,
method
:
'
post
'
,
data
});
}
export
function
calendarDelete
(
id
)
{
return
fetch
({
url
:
'
/finfo/calendar/delete
'
,
method
:
'
post
'
,
data
:
{
id
}
});
}
export
function
calendarUpdate
(
data
)
{
return
fetch
({
url
:
'
/finfo/calendar/update
'
,
method
:
'
post
'
,
data
});
}
export
function
calcountriesList
()
{
return
fetch
({
url
:
'
/finfo/calcountries
'
,
method
:
'
get
'
});
}
src/assets/iconfont/iconfont.js
浏览文件 @
6d9ddadc
...
...
@@ -38,6 +38,12 @@
''
+
'
</symbol>
'
+
''
+
'
<symbol id="icon-wujiaoxing" viewBox="0 0 1024 1024">
'
+
''
+
'
<path d="M565.272827 34.627285l112.095872 237.542288c8.706637 18.321022 25.411424 31.051641 44.82285 33.996289l250.776598 38.081157c48.697387 7.411435 68.22505 70.046082 32.933559 105.979639l-181.494353 184.937155c-13.998147 14.230618-20.352386 34.815477-17.05903 54.93539l42.819161 261.127145c8.346858 50.695541-42.64204 89.451974-86.225039 65.51841l-224.307979-123.271141c-17.285968-9.525824-37.992596-9.525824-55.278564 0l-224.313514 123.271141c-43.582999 23.933565-94.571897-14.822869-86.219504-65.51841l42.813626-261.127145c3.321031-20.119914-3.088559-40.704772-17.086706-54.93539l-181.439002-184.937155c-35.285956-35.933557-15.819179-98.57374 32.933559-105.979639l250.748923-38.081157c19.350541-2.939112 36.083003-15.675267 44.75643-33.996289l112.123547-237.542288C480.497972-11.540583 543.509003-11.540583 565.272827 34.627285z" ></path>
'
+
''
+
'
</symbol>
'
+
''
+
'
<symbol id="icon-EXCEL" viewBox="0 0 1024 1024">
'
+
''
+
'
<path d="M625.664 132.608V199.68h309.76v43.008h-309.76V312.32h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.608h309.76v43.008h-309.76v68.096h309.76v43.008h-309.76v89.088H1024v-757.76h-398.336zM0 914.944L577.024 1024V0L0 109.056" ></path>
'
+
...
...
src/mock/article_table.js
0 → 100644
浏览文件 @
6d9ddadc
import
Mock
from
'
mockjs
'
;
const
List
=
[];
const
count
=
50
;
for
(
let
i
=
0
;
i
<
count
;
i
++
)
{
List
.
push
(
Mock
.
mock
({
id
:
'
@increment
'
,
timestamp
:
+
Mock
.
Random
.
date
(
'
T
'
),
author
:
'
@cname
'
,
title
:
'
@ctitle(10, 20)
'
,
forecast
:
'
@float(0, 100, 2, 2)
'
,
importance
:
'
@integer(1, 3)
'
,
'
calendar_type|1
'
:
[
'
FD
'
,
'
FE
'
,
'
BI
'
,
'
VN
'
],
'
status|1
'
:
[
'
published
'
,
'
draft
'
,
'
deleted
'
]
}));
}
export
default
{
getList
:
config
=>
// let {page, sortWay, startTime, endTime, userName, age} = config.params;
// let mockUsers = _Users.filter(user => {
// if (startTime && user.date < startTime) return false;
// if (endTime && user.date > endTime) return false;
// if (userName && user.name !== userName) return false;
// if (age && user.age !== age) return false;
// return true;
// });
// if (sortWay) {
// let {order, prop} = sortWay;
// mockUsers = mockUsers.sort((u1, u2) => order === 'ascending' ? u1[prop] - u2[prop] : u2[prop] - u1[prop]);
// }
// if (page === 0) page++;
// mockUsers = mockUsers.filter((u, index) => index < 20 * page && index >= 20 * (page - 1));
new
Promise
(
resolve
=>
{
setTimeout
(()
=>
{
resolve
([
200
,
{
total
:
List
.
length
,
items
:
List
}]);
},
100
);
})
};
src/mock/index.js
浏览文件 @
6d9ddadc
import
axios
from
'
axios
'
;
import
Mock
from
'
mockjs
'
;
import
MockAdapter
from
'
axios-mock-adapter
'
;
import
article_tableAPI
from
'
./article_table
'
const
mock
=
new
MockAdapter
(
axios
);
const
articleList
=
{
...
...
@@ -15,4 +16,10 @@ const articleList = {
}
const
data
=
JSON
.
stringify
(
Mock
.
mock
(
articleList
))
mock
.
onGet
(
'
/article/list
'
).
reply
(
200
,
data
);
mock
.
onGet
(
'
/article_table/list
'
).
reply
(
article_tableAPI
.
getList
);
export
default
mock
;
src/router/index.js
浏览文件 @
6d9ddadc
...
...
@@ -50,6 +50,7 @@ const Theme = resolve => require(['../views/theme/index'], resolve);
/* example*/
const
DynamicTable
=
resolve
=>
require
([
'
../views/example/dynamictable
'
],
resolve
);
const
Table
=
resolve
=>
require
([
'
../views/example/table
'
],
resolve
);
/* admin*/
...
...
@@ -168,7 +169,8 @@ export default new Router({
name
:
'
综合实例
'
,
icon
:
'
zonghe
'
,
children
:
[
{
path
:
'
dynamictable
'
,
component
:
DynamicTable
,
name
:
'
动态table
'
}
{
path
:
'
dynamictable
'
,
component
:
DynamicTable
,
name
:
'
动态table
'
},
{
path
:
'
table
'
,
component
:
Table
,
name
:
'
综合table
'
}
]
},
// {
...
...
src/utils/fetch.js
浏览文件 @
6d9ddadc
...
...
@@ -3,7 +3,7 @@ import { Message } from 'element-ui';
import
store
from
'
../store
'
;
import
router
from
'
../router
'
;
export
default
function
fetch
(
options
)
{
export
default
function
_
fetch
(
options
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
const
instance
=
axios
.
create
({
baseURL
:
process
.
env
.
BASE_API
,
...
...
@@ -49,10 +49,10 @@ export default function fetch(options) {
});
}
export
function
tpF
etch
(
options
)
{
export
function
f
etch
(
options
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
const
instance
=
axios
.
create
({
// timeout: 2000,
timeout
:
2000
// 超时
});
instance
(
options
)
.
then
(
response
=>
{
...
...
src/views/example/table.vue
0 → 100644
浏览文件 @
6d9ddadc
<
template
>
<div
class=
"app-container calendar-list-container"
>
<div
class=
"filter-container"
>
<el-input
@
keyup.enter.native=
"handleFilter"
style=
"width: 200px;"
class=
"filter-item"
placeholder=
"标题"
v-model=
"listQuery.title"
>
</el-input>
<el-date-picker
class=
"filter-item"
v-model=
"time"
type=
"daterange"
align=
"left"
placeholder=
"选择日期范围"
:picker-options=
"pickerOptions"
@
input=
"timeFilter"
style=
"width: 210px"
>
</el-date-picker>
<el-select
clearable
style=
"width: 90px"
class=
"filter-item"
v-model=
"listQuery.importance"
placeholder=
"重要性"
>
<el-option
v-for=
"item in importanceOptions"
:key=
"item"
:label=
"item"
:value=
"item"
>
</el-option>
</el-select>
<el-select
clearable
class=
"filter-item"
style=
"width: 130px"
v-model=
"listQuery.calendar_type"
placeholder=
"类型"
>
<el-option
v-for=
"item in calendarTypeOptions"
:key=
"item.key"
:label=
"item.display_name+'('+item.key+')'"
:value=
"item.key"
>
</el-option>
</el-select>
<el-button
class=
"filter-item"
type=
"primary"
v-waves
icon=
"search"
@
click=
"handleFilter"
>
搜索
</el-button>
<el-button
class=
"filter-item"
style=
"margin-left: 10px;"
@
click=
"handleCreate"
type=
"primary"
icon=
"edit"
>
添加
</el-button>
<el-button
class=
"filter-item"
type=
"primary"
icon=
"document"
@
click=
"handleDownload"
>
导出
</el-button>
</div>
<el-table
:data=
"list"
v-loading.body=
"listLoading"
border
fit
highlight-current-row
style=
"width: 100%"
>
<el-table-column
align=
"center"
label=
"序号"
width=
"65"
>
<template
scope=
"scope"
>
<span>
{{
scope
.
row
.
id
}}
</span>
</
template
>
</el-table-column>
<el-table-column
width=
"180px"
align=
"center"
label=
"时间"
>
<
template
scope=
"scope"
>
<span>
{{
scope
.
row
.
timestamp
|
parseTime
(
'
{y
}
-{m
}
-{d
}
{h
}
:{i
}
'
)
}}
<
/span
>
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
min
-
width
=
"
300px
"
label
=
"
标题
"
>
<
template
scope
=
"
scope
"
>
<
span
class
=
"
link-type
"
@
click
=
"
handleUpdate(scope.row)
"
>
{{
scope
.
row
.
title
}}
<
/span
>
<
el
-
tag
>
{{
scope
.
row
.
calendar_type
|
typeFilter
}}
<
/el-tag
>
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
width
=
"
110px
"
align
=
"
center
"
label
=
"
作者
"
>
<
template
scope
=
"
scope
"
>
<
span
>
{{
scope
.
row
.
author
}}
<
/span
>
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
width
=
"
80px
"
label
=
"
重要性
"
>
<
template
scope
=
"
scope
"
>
<
wscn
-
icon
-
svg
v
-
for
=
"
n in +scope.row.importance
"
icon
-
class
=
"
wujiaoxing
"
class
=
"
meta-item__icon
"
:
key
=
"
n
"
/>
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
class
-
name
=
"
status-col
"
label
=
"
状态
"
width
=
"
90
"
>
<
template
scope
=
"
scope
"
>
<
el
-
tag
:
type
=
"
scope.row.status | statusFilter
"
>
{{
scope
.
row
.
status
}}
<
/el-tag
>
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
align
=
"
center
"
label
=
"
操作
"
width
=
"
150
"
>
<
template
scope
=
"
scope
"
>
<
el
-
button
v
-
if
=
"
scope.row.status!='published'
"
size
=
"
small
"
type
=
"
success
"
@
click
=
"
handleModifyStatus(scope.row,'published')
"
>
发布
<
/el-button
>
<
el
-
button
v
-
if
=
"
scope.row.status!='draft'
"
size
=
"
small
"
@
click
=
"
handleModifyStatus(scope.row,'draft')
"
>
草稿
<
/el-button
>
<
el
-
button
v
-
if
=
"
scope.row.status!='deleted'
"
size
=
"
small
"
type
=
"
danger
"
@
click
=
"
handleModifyStatus(scope.row,'deleted')
"
>
删除
<
/el-button
>
<
/template
>
<
/el-table-column
>
<
/el-table
>
<
div
v
-
show
=
"
!listLoading
"
class
=
"
pagination-container
"
>
<
el
-
pagination
@
size
-
change
=
"
handleSizeChange
"
@
current
-
change
=
"
handleCurrentChange
"
:
current
-
page
=
"
listQuery.cursor
"
:
page
-
sizes
=
"
[10,20,30, 50]
"
:
page
-
size
=
"
listQuery.limit
"
layout
=
"
total, sizes, prev, pager, next, jumper
"
:
total
=
"
total
"
>
<
/el-pagination
>
<
/div
>
<
el
-
dialog
:
title
=
"
textMap[dialogStatus]
"
v
-
model
=
"
dialogFormVisible
"
>
<
el
-
form
class
=
"
small-space
"
:
model
=
"
temp
"
label
-
position
=
"
left
"
label
-
width
=
"
70px
"
style
=
'
width: 400px; margin-left:50px;
'
>
<
el
-
form
-
item
label
=
"
类型
"
>
<
el
-
select
class
=
"
filter-item
"
v
-
model
=
"
temp.calendar_type
"
placeholder
=
"
请选择
"
>
<
el
-
option
v
-
for
=
"
item in calendarTypeOptions
"
:
key
=
"
item.key
"
:
label
=
"
item.display_name
"
:
value
=
"
item.key
"
>
<
/el-option
>
<
/el-select
>
<
/el-form-item
>
<
el
-
form
-
item
label
=
"
状态
"
>
<
el
-
select
class
=
"
filter-item
"
v
-
model
=
"
temp.status
"
placeholder
=
"
请选择
"
>
<
el
-
option
v
-
for
=
"
item in statusOptions
"
:
key
=
"
item
"
:
label
=
"
item
"
:
value
=
"
item
"
>
<
/el-option
>
<
/el-select
>
<
/el-form-item
>
<
el
-
form
-
item
label
=
"
时间
"
>
<
el
-
date
-
picker
v
-
model
=
"
temp.timestamp
"
type
=
"
datetime
"
placeholder
=
"
选择日期时间
"
>
<
/el-date-picker
>
<
/el-form-item
>
<
el
-
form
-
item
label
=
"
标题
"
>
<
el
-
input
v
-
model
=
"
temp.title
"
><
/el-input
>
<
/el-form-item
>
<
el
-
form
-
item
label
=
"
重要性
"
>
<
el
-
rate
style
=
"
margin-top:8px;
"
v
-
model
=
"
temp.importance
"
:
colors
=
"
['#99A9BF', '#F7BA2A', '#FF9900']
"
><
/el-rate
>
<
/el-form-item
>
<
el
-
form
-
item
label
=
"
点评
"
>
<
el
-
input
type
=
"
textarea
"
:
autosize
=
"
{ minRows: 2, maxRows: 4
}
"
placeholder
=
"
请输入内容
"
v
-
model
=
"
temp.remark
"
>
<
/el-input
>
<
/el-form-item
>
<
/el-form
>
<
div
slot
=
"
footer
"
class
=
"
dialog-footer
"
>
<
el
-
button
@
click
=
"
dialogFormVisible = false
"
>
取
消
<
/el-button
>
<
el
-
button
v
-
if
=
"
dialogStatus=='create'
"
type
=
"
primary
"
@
click
=
"
create
"
>
确
定
<
/el-button
>
<
el
-
button
v
-
else
type
=
"
primary
"
@
click
=
"
update
"
>
确
定
<
/el-button
>
<
/div
>
<
/el-dialog
>
<
/div
>
<
/template
>
<
script
>
import
{
fetchList
}
from
'
api/article_table
'
;
import
{
parseTime
,
objectMerge
,
pickerOptions
}
from
'
utils
'
;
const
calendarTypeOptions
=
[
{
key
:
'
FD
'
,
display_name
:
'
经济数据
'
}
,
{
key
:
'
FE
'
,
display_name
:
'
财经大事
'
}
,
{
key
:
'
BI
'
,
display_name
:
'
国债发行
'
}
,
{
key
:
'
VN
'
,
display_name
:
'
假期报告
'
}
];
// arr to obj
const
calendarTypeKeyValue
=
calendarTypeOptions
.
reduce
((
acc
,
cur
)
=>
{
acc
[
cur
.
key
]
=
cur
.
display_name
;
return
acc
}
,
{
}
);
export
default
{
name
:
'
table_demo
'
,
data
()
{
return
{
list
:
null
,
total
:
null
,
listLoading
:
true
,
listQuery
:
{
cursor
:
1
,
limit
:
20
,
start
:
undefined
,
end
:
undefined
,
importance
:
undefined
,
title
:
undefined
}
,
temp
:
{
id
:
undefined
,
importance
:
0
,
remark
:
''
,
timestamp
:
0
,
title
:
''
,
calendar_type
:
''
,
status
:
'
published
'
}
,
time
:
''
,
// 时间筛选项
importanceOptions
:
[
1
,
2
,
3
],
calendarTypeOptions
,
statusOptions
:
[
'
published
'
,
'
draft
'
,
'
deleted
'
],
dialogFormVisible
:
false
,
dialogStatus
:
''
,
textMap
:
{
update
:
'
编辑
'
,
create
:
'
创建
'
}
,
pickerOptions
:
{
shortcuts
:
pickerOptions
}
}
}
,
created
()
{
this
.
getList
();
}
,
filters
:
{
statusFilter
(
status
)
{
const
statusMap
=
{
published
:
'
success
'
,
draft
:
'
gray
'
,
deleted
:
'
danger
'
}
;
return
statusMap
[
status
]
}
,
typeFilter
(
type
)
{
return
calendarTypeKeyValue
[
type
]
}
}
,
methods
:
{
getList
()
{
this
.
listLoading
=
true
;
fetchList
(
this
.
listQuery
).
then
(
response
=>
{
console
.
log
(
response
)
this
.
list
=
response
.
items
;
this
.
total
=
response
.
total
;
this
.
listLoading
=
false
;
}
)
}
,
handleFilter
()
{
this
.
getList
();
}
,
handleSizeChange
(
val
)
{
this
.
listQuery
.
limit
=
val
;
this
.
getList
();
}
,
handleCurrentChange
(
val
)
{
this
.
listQuery
.
cursor
=
val
;
this
.
getList
();
}
,
timeFilter
(
time
)
{
if
(
!
time
[
0
])
{
this
.
listQuery
.
start
=
undefined
;
this
.
listQuery
.
end
=
undefined
;
return
;
}
this
.
listQuery
.
start
=
parseInt
(
+
time
[
0
]
/
1000
);
this
.
listQuery
.
end
=
parseInt
((
+
time
[
1
]
+
3600
*
1000
*
24
)
/
1000
);
}
,
handleModifyStatus
(
row
,
status
)
{
this
.
$message
({
message
:
'
操作成功
'
,
type
:
'
success
'
}
);
row
.
status
=
status
;
}
,
handleCreate
()
{
this
.
resetTemp
();
this
.
dialogStatus
=
'
create
'
;
this
.
dialogFormVisible
=
true
;
}
,
handleUpdate
(
row
)
{
objectMerge
(
this
.
temp
,
row
)
this
.
dialogStatus
=
'
update
'
;
this
.
dialogFormVisible
=
true
;
}
,
handleDelete
(
row
)
{
this
.
$notify
({
title
:
'
成功
'
,
message
:
'
删除成功
'
,
type
:
'
success
'
,
duration
:
2000
}
);
const
index
=
this
.
list
.
indexOf
(
row
);
this
.
list
.
splice
(
index
,
1
);
}
,
create
()
{
this
.
temp
.
id
=
parseInt
(
Math
.
random
()
*
100
)
+
1024
;
this
.
temp
.
timestamp
=
+
new
Date
();
this
.
temp
.
author
=
'
原创作者
'
;
this
.
list
.
unshift
(
this
.
temp
);
this
.
dialogFormVisible
=
false
;
this
.
$notify
({
title
:
'
成功
'
,
message
:
'
创建成功
'
,
type
:
'
success
'
,
duration
:
2000
}
);
}
,
update
()
{
this
.
temp
.
timestamp
=
+
this
.
temp
.
timestamp
;
for
(
const
v
of
this
.
list
)
{
if
(
v
.
id
===
this
.
temp
.
id
)
{
objectMerge
(
v
,
this
.
temp
);
break
;
}
}
this
.
dialogFormVisible
=
false
;
this
.
$notify
({
title
:
'
成功
'
,
message
:
'
更新成功
'
,
type
:
'
success
'
,
duration
:
2000
}
);
}
,
resetTemp
()
{
this
.
temp
=
{
id
:
undefined
,
importance
:
0
,
remark
:
''
,
timestamp
:
0
,
title
:
''
,
status
:
'
published
'
,
calendar_type
:
''
}
;
}
,
handleDownload
()
{
require
.
ensure
([],
()
=>
{
const
{
export_json_to_excel
}
=
require
(
'
vendor/Export2Excel
'
);
const
tHeader
=
[
'
时间
'
,
'
地区
'
,
'
类型
'
,
'
标题
'
,
'
重要性
'
];
const
filterVal
=
[
'
timestamp
'
,
'
province
'
,
'
calendar_type
'
,
'
title
'
,
'
importance
'
];
const
data
=
this
.
formatJson
(
filterVal
,
this
.
list
);
export_json_to_excel
(
tHeader
,
data
,
'
table数据
'
);
}
)
}
,
formatJson
(
filterVal
,
jsonData
)
{
return
jsonData
.
map
(
v
=>
filterVal
.
map
(
j
=>
{
if
(
j
===
'
timestamp
'
)
{
return
parseTime
(
v
[
j
])
}
else
{
return
v
[
j
]
}
}
))
}
}
}
<
/script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录