Skip to content
Snippets Groups Projects
Commit 3e3819ca authored by Pan's avatar Pan
Browse files

refine table example demo

parent 6d9ddadc
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/api/article_table.js
+ 6
− 37
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 }
});
}
src/mock/article_table.js
+ 29
− 27
View file @ 3e3819ca
......@@ -2,7 +2,7 @@ import Mock from 'mockjs';
const List = [];
const count = 50;
const count = 100;
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 => {
setTimeout(() => {
resolve([200, {
total: List.length,
items: List
}]);
}, 100);
})
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: 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);
})
};
src/mock/index.js
+ 1
− 0
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);
......
src/views/example/table.vue
+ 38
− 23
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数据');
})
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment