1. <template>
2.   <div class="panel panel-default">
3.     <div class="panel-body">
4.       <h1 class="text-right panel-name">Spis ostatnich raportow</h1>
5.       <div id="people">
6.         <v-client-table v-if='loaded' :data="tableData" :columns="columns" :options="options"></v-client-table>
7.       </div>
8.     </div>
9.   </div>
10. </template>
11.  
12. <script>
13. function GetDateString(date)
14. {
15.   var yyyy = date.getFullYear().toString();
16.   var mm = (date.getMonth()+1).toString(); // getMonth() is zero-based
17.   var dd  = date.getDate().toString();
18.   return (dd[1]?dd:"0"+dd[0]) +'.'+ (mm[1]?mm:"0"+mm[0]) + '.'+  yyyy; // padding
19. }
20. function GetTimeString(date)
21. {
22.   var hh = date.getHours().toString();
23.   var min = date.getMinutes().toString();
24.   return (hh[1]?hh:"0"+hh[0]) +':' + (min[1]?min:"0"+min[0]);
25. }
26. const DATA_URL = 'http://localhost:50000/api/report/Agmet3/100'
27. export default {
28.   data() {
29.     return {
30.       loaded:false,
31.  
32.       columns:['Data','Czas rozpoczecia','Czas zakonczenia','Ogolny licznik wsadow',
33.       'Zmianowy licznik wsadow', 'Indeks wsadu', 'Zalogowany operator',
34.       'Numer receptury', 'Nazwa receptury', 'Ilosc','Powierzchnia calkowita'
35.     ],
36.     tableData: [],
37.     options: {
38.       headings: {
39.         'Data': 'Data',
40.         'Czas rozpoczecia': 'Od',
41.         'Czas zakonczenia': 'Do',
42.         'Ogolny licznik wsadow': 'Licznik ogólny',
43.         'Zmianowy licznik wsadow': 'Licznik zmiany',
44.         'Indeks wsadu': 'Indeks',
45.         'Zalogowany operator': 'Operator',
46.         'Ilosc': 'Ilość',
47.         'Powierzchnia calkowita':'Powierzchnia'
48.       },
49.       templates: {
50.         'Data': function(row) {
51.           var date = new Date(row['Data'].$date);
52.           return GetDateString(date);
53.         },
54.         'Czas rozpoczecia': function(row) {
55.           var date = new Date(row['Czas rozpoczecia'].$date);
56.           return GetTimeString(date);
57.         },
58.         'Czas zakonczenia': function(row) {
59.           var date = new Date(row['Czas zakonczenia'].$date);
60.           return GetTimeString(date);
61.         },
62.         'Ilosc': "{Ilosc} szt.",
63.         'Powierzchnia calkowita':"{Powierzchnia calkowita} dm²"
64.       },
65.       perPage: 100,
66.       compileTemplates: true,
67.       filterByColumn: false,
68.       toMomentFormat: true,
69.       //sortable: ['Ogolny licznik wsadow'],
70.       orderBy:{
71.         column: '',
72.       },
73.       //dateColumns: ['Data'],
74.       //dateFormat: 'YYYY-MM-DD',
75.       texts: {
76.         count: "{count} Raportów",
77.         filter:'Filtr:',
78.         filterPlaceholder:'szukaj ...',
79.         limit:'Ilość:',
80.         noResults:'Brak wyników'
81.       },
82.       datepickerOptions: {
83.         showDropdowns: true
84.       }
85.       //skin:''
86.     }
87.   }
88. },
89. ready: function() {
90.   this.getTabletData();
91. },
92. components: {
93.  
94. },
95. methods: {
96.   getTabletData() {
97.     var getUrl = DATA_URL;
98.     this.$http
99.     .get(getUrl, (data) => {
100.       this.tableData = data;
101.       this.loaded=true;
102.     })
103.     .error((err) => err)
104.   },
105. }
106. }
107. </script>
108.