· 6 years ago · Mar 13, 2020, 03:00 AM
1<template>
2 <div class="wrapper">
3 <Navbar/>
4 <a-layout>
5 <Sidebar/>
6 <a-layout>
7
8 <a-layout-content>
9 <div class="content">
10 <div class="container-fluid">
11 <div class="row">
12 <div class="col-12">
13 <a-card title="Заявления" :style="{ marginTop: '6px' }">
14 <div class="table-operations">
15 <a-button @click="setAgeSort">Sort age</a-button>
16 <a-button @click="clearFilters">Clear filters</a-button>
17 <a-button @click="clearAll">Clear filters and sorters</a-button>
18 </div>
19 <a-table :columns="columns" :dataSource="applications" @change="handleChange">
20 <span slot="action" slot-scope="text, record">
21 <a-button type="danger" v-if="record.status_id == 1" shape="circle" icon="delete" href="javascript:alert(1);"></a-button>
22<!-- <a v-if="record.status_id == 1" href="javascript:alert(1);">Отклонить</a>-->
23 <a-button v-if="record.status_id == 3" href="javascript:alert(1);" type="primary" shape="circle" icon="cloud-download"></a-button>
24 </span>
25 </a-table>
26
27 </a-card>
28 </div>
29 </div>
30 </div>
31 </div>
32 </a-layout-content>
33 </a-layout>
34 </a-layout>
35 </div>
36</template>
37
38<script>
39 import Navbar from "../components/Navbar"
40 import Sidebar from "../components/Sidebar";
41 import Api from "@/http/ApiFile";
42
43 export default {
44 name: "ApplicationList",
45 components: {
46 Navbar,
47 Sidebar
48 },
49 data() {
50 return {
51 applications: [],
52 filteredInfo: null,
53 sortedInfo: null,
54 reasonTypes:[]
55 }
56 },
57 created() {
58 this.getReasons();
59 this.getStatuses();
60 this.GenerateReasonList();
61 },
62 mounted() {
63 this.getApplications();
64 },
65 computed: {
66 columns() {
67 let {sortedInfo, filteredInfo} = this;
68 sortedInfo = sortedInfo || {};
69 filteredInfo = filteredInfo || {};
70 return [
71 {
72 title: 'Status',
73 dataIndex: 'status_id',
74 key: 'status_id',
75 filters: [{text: 'Ожидает модерацию', value: '1'}, {
76 text: 'Принятые',
77 value: '2'
78 }, {text: 'Отклоненные', value: '3'}],
79 filteredValue: filteredInfo.status_id || null,
80 onFilter: (value, record) => record.status_id===parseInt(value,10),
81 sorter: (a, b) => a.status_id - b.status_id,
82 sortOrder: sortedInfo.columnKey === 'status_id' && sortedInfo.order,
83 },
84 {
85 title: 'Number',
86 dataIndex: 'number',
87 key: 'number',
88 sorter: (a, b) => a.number > b.number,
89 sortOrder: sortedInfo.columnKey === 'number' && sortedInfo.order,
90 },
91 {
92 title: 'Reason',
93 dataIndex: 'reason_id',
94 key: 'reason_id',
95 filters: [this.reasonTypes],
96 sorter: (a, b) => a.reason_id > b.reason_id,
97 sortOrder: sortedInfo.columnKey === 'reason_id' && sortedInfo.order,
98 },
99 {
100 title: 'Actions',
101 key: 'status_id',
102 scopedSlots: { customRender: 'action'},
103 },
104 ];
105 },
106 },
107 methods: {
108 getApplications() {
109 let vue = this;
110 Api.GetApplicationList(vue).then((res) => {
111 this.applications = res;
112 });
113 },
114 GenerateReasonList() {
115 let reasons = JSON.parse(localStorage.getItem("reasons"));
116 reasons.forEach((reason) => {
117 let newType = {value: reason.id, text: reason.name};
118 this.reasonTypes.push(newType);
119 });
120 },
121 getReasons() {
122 let vue = this;
123 Api.GeReasonList(vue).then((res) => {
124 localStorage.setItem('reasons', JSON.stringify(res));
125 });
126 },
127 getStatuses() {
128 let vue = this;
129 Api.GetStatusList(vue).then((res) => {
130 localStorage.setItem('statuses', JSON.stringify(res));
131 });
132 },
133 handleChange(pagination, filters, sorter) {
134 console.log('Various parameters', pagination, filters, sorter);
135 this.filteredInfo = filters;
136 this.sortedInfo = sorter;
137 },
138 clearFilters() {
139 this.filteredInfo = null;
140 },
141 clearAll() {
142 this.filteredInfo = null;
143 this.sortedInfo = null;
144 },
145 setAgeSort() {
146 this.sortedInfo = {
147 order: 'descend',
148 columnKey: 'age',
149 };
150 },
151 }
152 }
153</script>
154
155<style scoped>
156
157</style>