|
|
@@ -3,7 +3,11 @@
|
|
|
<Table :data="tableData1" :columns="tableColumns1" stripe></Table>
|
|
|
<div style="margin: 10px;overflow: hidden">
|
|
|
<div style="float: right;">
|
|
|
- <Page :total="100" :current="1" @on-change="changePage"></Page>
|
|
|
+ <Page :total="pagerData.page.dataTotal" :current="pagerData.page.pageIndex"
|
|
|
+ :page-size="pagerData.page.pageSize" show-total show-sizer
|
|
|
+ @on-change="changePage"
|
|
|
+ @on-page-size-change="changePageSize"
|
|
|
+ ></Page>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -14,19 +18,30 @@
|
|
|
name: "gateway-cfg",
|
|
|
data() {
|
|
|
return {
|
|
|
+ pagerData: {
|
|
|
+ page: {
|
|
|
+ dataTotal: 0,
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 10
|
|
|
+ }
|
|
|
+ },
|
|
|
tableData1: this.mockTableData1(),
|
|
|
tableColumns1: [
|
|
|
{
|
|
|
- title: 'Name',
|
|
|
- key: 'name'
|
|
|
+ title: '登录名',
|
|
|
+ key: 'loginName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '昵称',
|
|
|
+ key: 'nickName'
|
|
|
},
|
|
|
{
|
|
|
- title: 'Status',
|
|
|
+ title: '状态',
|
|
|
key: 'status',
|
|
|
render: (h, params) => {
|
|
|
const row = params.row;
|
|
|
- const color = row.status === 1 ? 'primary' : row.status === 2 ? 'success' : 'error';
|
|
|
- const text = row.status === 1 ? 'Working' : row.status === 2 ? 'Success' : 'Fail';
|
|
|
+ const color = row.status === '1' ? 'success' : 'error';
|
|
|
+ const text = row.status === '1' ? '启用' : '禁用';
|
|
|
|
|
|
return h('Tag', {
|
|
|
props: {
|
|
|
@@ -37,71 +52,30 @@
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- title: 'Portrayal',
|
|
|
- key: 'portrayal',
|
|
|
- render: (h, params) => {
|
|
|
- return h('Poptip', {
|
|
|
- props: {
|
|
|
- trigger: 'hover',
|
|
|
- title: params.row.portrayal.length + 'portrayals',
|
|
|
- placement: 'bottom'
|
|
|
- }
|
|
|
- }, [
|
|
|
- h('Tag', params.row.portrayal.length),
|
|
|
- h('div', {
|
|
|
- slot: 'content'
|
|
|
- }, [
|
|
|
- h('ul', this.tableData1[params.index].portrayal.map(item => {
|
|
|
- return h('li', {
|
|
|
- style: {
|
|
|
- textAlign: 'center',
|
|
|
- padding: '4px'
|
|
|
- }
|
|
|
- }, item)
|
|
|
- }))
|
|
|
- ])
|
|
|
- ]);
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: 'People',
|
|
|
- key: 'people',
|
|
|
+ title: '创建时间',
|
|
|
+ key: 'createTime',
|
|
|
render: (h, params) => {
|
|
|
- return h('Poptip', {
|
|
|
- props: {
|
|
|
- trigger: 'hover',
|
|
|
- title: params.row.people.length + 'customers',
|
|
|
- placement: 'bottom'
|
|
|
- }
|
|
|
- }, [
|
|
|
- h('Tag', params.row.people.length),
|
|
|
- h('div', {
|
|
|
- slot: 'content'
|
|
|
- }, [
|
|
|
- h('ul', this.tableData1[params.index].people.map(item => {
|
|
|
- return h('li', {
|
|
|
- style: {
|
|
|
- textAlign: 'center',
|
|
|
- padding: '4px'
|
|
|
- }
|
|
|
- }, item.n + '：' + item.c + 'People')
|
|
|
- }))
|
|
|
- ])
|
|
|
- ]);
|
|
|
+ return h('div', this.formatDate(params.row.createTime));
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- title: 'Sampling Time',
|
|
|
- key: 'time',
|
|
|
+ title: '更新时间',
|
|
|
+ key: 'updateTime',
|
|
|
render: (h, params) => {
|
|
|
- return h('div', 'Almost' + params.row.time + 'days');
|
|
|
+ return h('div', this.formatDate(params.row.updateTime));
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- title: 'Updated Time',
|
|
|
- key: 'update',
|
|
|
+ title: '操作',
|
|
|
render: (h, params) => {
|
|
|
- return h('div', this.formatDate(this.tableData1[params.index].update));
|
|
|
+ return h('div', [
|
|
|
+ h('Button', {
|
|
|
+ type: 'primary',
|
|
|
+ shape: 'circle',
|
|
|
+ icon: 'ios-search',
|
|
|
+ style: {fontSize: 20}
|
|
|
+ }, '编辑')
|
|
|
+ ]);
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
@@ -110,41 +84,41 @@
|
|
|
methods: {
|
|
|
mockTableData1() {
|
|
|
let data = [];
|
|
|
- for (let i = 0; i < 10; i++) {
|
|
|
- data.push({
|
|
|
- name: 'Business' + Math.floor(Math.random() * 100 + 1),
|
|
|
- status: Math.floor(Math.random() * 3 + 1),
|
|
|
- portrayal: ['City', 'People', 'Cost', 'Life', 'Entertainment'],
|
|
|
- people: [
|
|
|
- {
|
|
|
- n: 'People' + Math.floor(Math.random() * 100 + 1),
|
|
|
- c: Math.floor(Math.random() * 1000000 + 100000)
|
|
|
- },
|
|
|
- {
|
|
|
- n: 'People' + Math.floor(Math.random() * 100 + 1),
|
|
|
- c: Math.floor(Math.random() * 1000000 + 100000)
|
|
|
- },
|
|
|
- {
|
|
|
- n: 'People' + Math.floor(Math.random() * 100 + 1),
|
|
|
- c: Math.floor(Math.random() * 1000000 + 100000)
|
|
|
- }
|
|
|
- ],
|
|
|
- time: Math.floor(Math.random() * 7 + 1),
|
|
|
- update: new Date()
|
|
|
- })
|
|
|
- }
|
|
|
+ this.$http.get('/api/user/ajaxList', {
|
|
|
+ params: {
|
|
|
+ 'pageIndex': pageIndex,
|
|
|
+ 'pageSize': pageSize
|
|
|
+ }
|
|
|
+ }).then(function (result) {
|
|
|
+ result = result.data.data;
|
|
|
+ for (let i = 0; i < result.length; i++) {
|
|
|
+ data.push(result[i]);
|
|
|
+ }
|
|
|
+ this.pagerData.page.dataTotal = result.data.total;
|
|
|
+ });
|
|
|
return data;
|
|
|
},
|
|
|
formatDate(date) {
|
|
|
+ date = new Date(date);
|
|
|
const y = date.getFullYear();
|
|
|
let m = date.getMonth() + 1;
|
|
|
m = m < 10 ? '0' + m : m;
|
|
|
let d = date.getDate();
|
|
|
d = d < 10 ? ('0' + d) : d;
|
|
|
- return y + '-' + m + '-' + d;
|
|
|
+ let hours = date.getHours();
|
|
|
+ hours = hours < 10 ? '0' + hours : hours;
|
|
|
+ let min = date.getMinutes();
|
|
|
+ min = min < 10 ? '0' + min : min;
|
|
|
+ let sec = date.getSeconds();
|
|
|
+ sec = sec < 10 ? '0' + sec : sec;
|
|
|
+ return y + '-' + m + '-' + d + ' ' + hours + ':' + min + ':' + sec;
|
|
|
+ },
|
|
|
+ changePage(value) {
|
|
|
+ this.pagerData.page.pageIndex = value;
|
|
|
+ this.tableData1 = this.mockTableData1();
|
|
|
},
|
|
|
- changePage() {
|
|
|
- // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
|
|
|
+ changePageSize(value) {
|
|
|
+ this.pagerData.page.pageSize = value;
|
|
|
this.tableData1 = this.mockTableData1();
|
|
|
}
|
|
|
}
|
王智勇