Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
V
VueElementTemplate
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
JIRA
JIRA
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
HireTest
VueElementTemplate
Commits
3e3819ca
Commit
3e3819ca
authored
8 years ago
by
Pan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
refine table example demo
parent
6d9ddadc
master
storybook
test
No related merge requests found
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
74 additions
and
87 deletions
+74
-87
article_table.js
src/api/article_table.js
+6
-37
article_table.js
src/mock/article_table.js
+29
-27
index.js
src/mock/index.js
+1
-0
table.vue
src/views/example/table.vue
+38
-23
No files found.
src/api/article_table.js
View file @
3e3819ca
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
method
:
'get'
,
params
:
query
});
}
export
function
calcountriesList
(
)
{
export
function
fetchPv
(
pv
)
{
return
fetch
({
url
:
'/finfo/calcountries'
,
method
:
'get'
url
:
'/article_table/pv'
,
method
:
'get'
,
params
:
{
pv
}
});
}
This diff is collapsed.
Click to expand it.
src/mock/article_table.js
View file @
3e3819ca
...
...
@@ -2,7 +2,7 @@ import Mock from 'mockjs';
const
List
=
[];
const
count
=
5
0
;
const
count
=
10
0
;
for
(
let
i
=
0
;
i
<
count
;
i
++
)
{
List
.
push
(
Mock
.
mock
({
...
...
@@ -12,34 +12,36 @@ for (let i = 0; i < count; i++) {
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'
]
'type|1'
:
[
'FD'
,
'FE'
,
'BI'
,
'VN'
],
'status|1'
:
[
'published'
,
'draft'
,
'deleted'
],
pageviews
:
'@integer(300, 5000)'
}));
}
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
=>
{
getList
:
config
=>
{
const
{
importance
,
type
,
title
,
page
,
limit
}
=
config
.
params
;
const
mockList
=
List
.
filter
(
item
=>
{
if
(
importance
&&
item
.
importance
!==
importance
)
return
false
;
if
(
type
&&
item
.
type
!==
type
)
return
false
;
if
(
title
&&
item
.
title
.
indexOf
(
title
)
<
0
)
return
false
;
return
true
;
});
const
pageList
=
mockList
.
filter
((
item
,
index
)
=>
index
<
limit
*
page
&&
index
>=
limit
*
(
page
-
1
));
return
new
Promise
(
resolve
=>
{
setTimeout
(()
=>
{
resolve
([
200
,
{
total
:
List
.
length
,
items
:
List
total
:
mockList
.
length
,
items
:
pageList
}]);
},
100
);
})
},
getPv
:
()
=>
new
Promise
(
resolve
=>
{
setTimeout
(()
=>
{
resolve
([
200
,
{
pvData
:
[{
key
:
'PC网站'
,
pv
:
1024
},
{
key
:
'mobile网站'
,
pv
:
1024
},
{
key
:
'ios'
,
pv
:
1024
},
{
key
:
'android'
,
pv
:
1024
}]
}]);
},
100
);
})
};
This diff is collapsed.
Click to expand it.
src/mock/index.js
View file @
3e3819ca
...
...
@@ -19,6 +19,7 @@ mock.onGet('/article/list').reply(200, data);
mock
.
onGet
(
'/article_table/list'
).
reply
(
article_tableAPI
.
getList
);
mock
.
onGet
(
'/article_table/pv'
).
reply
(
article_tableAPI
.
getPv
);
...
...
This diff is collapsed.
Click to expand it.
src/views/example/table.vue
View file @
3e3819ca
...
...
@@ -4,16 +4,12 @@
<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-select
clearable
class=
"filter-item"
style=
"width: 130px"
v-model=
"listQuery.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>
...
...
@@ -40,7 +36,7 @@
<
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
>
<
el
-
tag
>
{{
scope
.
row
.
type
|
typeFilter
}}
<
/el-tag
>
<
/template
>
<
/el-table-column
>
...
...
@@ -57,6 +53,12 @@
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
align
=
"center"
label
=
"阅读数"
width
=
"95"
>
<
template
scope
=
"scope"
>
<
span
class
=
"link-type"
@
click
=
'handleFetchPv(scope.row.pageviews)'
>
{{
scope
.
row
.
pageviews
}}
<
/span
>
<
/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
>
...
...
@@ -77,7 +79,7 @@
<
/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]"
<
el
-
pagination
@
size
-
change
=
"handleSizeChange"
@
current
-
change
=
"handleCurrentChange"
:
current
-
page
=
"listQuery.
page
"
:
page
-
sizes
=
"[10,20,30, 50]"
:
page
-
size
=
"listQuery.limit"
layout
=
"total, sizes, prev, pager, next, jumper"
:
total
=
"total"
>
<
/el-pagination
>
<
/div
>
...
...
@@ -85,7 +87,7 @@
<
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
-
select
class
=
"filter-item"
v
-
model
=
"temp.type"
placeholder
=
"请选择"
>
<
el
-
option
v
-
for
=
"item in calendarTypeOptions"
:
key
=
"item.key"
:
label
=
"item.display_name"
:
value
=
"item.key"
>
<
/el-option
>
<
/el-select
>
...
...
@@ -122,12 +124,23 @@
<
el
-
button
v
-
else
type
=
"primary"
@
click
=
"update"
>
确
定
<
/el-button
>
<
/div
>
<
/el-dialog
>
<
el
-
dialog
title
=
"阅读数统计"
v
-
model
=
"dialogPvVisible"
size
=
"small"
>
<
el
-
table
:
data
=
"pvData"
border
fit
highlight
-
current
-
row
style
=
"width: 100%"
>
<
el
-
table
-
column
prop
=
"key"
label
=
"渠道"
>
<
/el-table-column
>
<
el
-
table
-
column
prop
=
"pv"
label
=
"pv"
>
<
/el-table-column
>
<
/el-table
>
<
span
slot
=
"footer"
class
=
"dialog-footer"
>
<
el
-
button
type
=
"primary"
@
click
=
"dialogPvVisible = false"
>
确
定
<
/el-button
>
<
/span
>
<
/el-dialog
>
<
/div
>
<
/template
>
<
script
>
import
{
fetchList
}
from
'api/article_table'
;
import
{
parseTime
,
objectMerge
,
pickerOptions
}
from
'utils'
;
import
{
fetchList
,
fetchPv
}
from
'api/article_table'
;
import
{
parseTime
,
objectMerge
}
from
'utils'
;
const
calendarTypeOptions
=
[
{
key
:
'FD'
,
display_name
:
'经济数据'
}
,
...
...
@@ -150,12 +163,11 @@
total
:
null
,
listLoading
:
true
,
listQuery
:
{
cursor
:
1
,
page
:
1
,
limit
:
20
,
start
:
undefined
,
end
:
undefined
,
importance
:
undefined
,
title
:
undefined
title
:
undefined
,
type
:
undefined
}
,
temp
:
{
id
:
undefined
,
...
...
@@ -163,10 +175,9 @@
remark
:
''
,
timestamp
:
0
,
title
:
''
,
calendar_
type
:
''
,
type
:
''
,
status
:
'published'
}
,
time
:
''
,
// 时间筛选项
importanceOptions
:
[
1
,
2
,
3
],
calendarTypeOptions
,
statusOptions
:
[
'published'
,
'draft'
,
'deleted'
],
...
...
@@ -176,9 +187,8 @@
update
:
'编辑'
,
create
:
'创建'
}
,
pickerOptions
:
{
shortcuts
:
pickerOptions
}
dialogPvVisible
:
false
,
pvData
:
[]
}
}
,
created
()
{
...
...
@@ -201,7 +211,6 @@
getList
()
{
this
.
listLoading
=
true
;
fetchList
(
this
.
listQuery
).
then
(
response
=>
{
console
.
log
(
response
)
this
.
list
=
response
.
items
;
this
.
total
=
response
.
total
;
this
.
listLoading
=
false
;
...
...
@@ -215,7 +224,7 @@
this
.
getList
();
}
,
handleCurrentChange
(
val
)
{
this
.
listQuery
.
cursor
=
val
;
this
.
listQuery
.
page
=
val
;
this
.
getList
();
}
,
timeFilter
(
time
)
{
...
...
@@ -291,14 +300,20 @@
timestamp
:
0
,
title
:
''
,
status
:
'published'
,
calendar_
type
:
''
type
:
''
}
;
}
,
handleFetchPv
(
pv
)
{
fetchPv
(
pv
).
then
(
response
=>
{
this
.
pvData
=
response
.
pvData
this
.
dialogPvVisible
=
true
}
)
}
,
handleDownload
()
{
require
.
ensure
([],
()
=>
{
const
{
export_json_to_excel
}
=
require
(
'vendor/Export2Excel'
);
const
tHeader
=
[
'时间'
,
'地区'
,
'类型'
,
'标题'
,
'重要性'
];
const
filterVal
=
[
'timestamp'
,
'province'
,
'
calendar_
type'
,
'title'
,
'importance'
];
const
filterVal
=
[
'timestamp'
,
'province'
,
'type'
,
'title'
,
'importance'
];
const
data
=
this
.
formatJson
(
filterVal
,
this
.
list
);
export_json_to_excel
(
tHeader
,
data
,
'table数据'
);
}
)
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment