吉鹏 / gulu-admin

Download as
Browse Code »

Commit f3ec4dd955193ce14f27df0ebc15c1a078b2f546

Authored by Adam
1 parent 96898eae45
Exists in master

auto commit the code by alias command

Showing 4 changed files with 11 additions and 792 deletions   Show diff stats
src/router/index.js
Diff comments   View file @f3ec4dd
... ... @@ -14,6 +14,7 @@ import Layout from '@/layout'
14 14 import userRouter from './modules/user'
15 15 import systemRouter from './modules/system'
16 16 import prodRouter from './modules/prod'
  17 +import orderRouter from './modules/order'
17 18 import metaRouter from './modules/meta'
18 19 import sitesRouter from './modules/sites'
19 20  
... ... @@ -186,38 +187,7 @@ export const asyncRoutes = [
186 187 metaRouter,
187 188 userRouter,
188 189 prodRouter,
189   - {
190   - path: '/orders',
191   - component: Layout,
192   - redirect: '/order/page',
193   - alwaysShow: true, // will always show the root menu
194   - name: 'Order',
195   - meta: {
196   - title: 'orders',
197   - icon: 'shopping',
198   - roles: ['admin', 'assistant', 'runner', 'shoper'] // you can set roles in root nav
199   - },
200   - children: [{
201   - path: 'page',
202   - component: () => import('@/views/permission/page'),
203   - name: 'OrderList',
204   - meta: {
205   - title: 'OrderList',
206   - roles: ['admin', 'assistant', 'runner', 'shoper'] // or you can only set roles in sub nav
207   - }
208   - },
209   - {
210   - path: 'defined',
211   - component: () => import('@/views/permission/directive'),
212   - name: 'OrderDefiend',
213   - meta: {
214   - title: 'OrderDefiend',
215   - roles: ['admin', 'assistant', 'runner', 'shoper']
216   - // if do not set roles, means: this page does not require permission
217   - }
218   - }
219   - ]
220   - },
  190 + orderRouter,
221 191 sitesRouter,
222 192  
223 193 // {
... ...
src/router/modules/prod.js
Diff comments   View file @f3ec4dd
... ... @@ -19,7 +19,7 @@ const prodRouter = {
19 19 name: 'ProdList',
20 20 meta: {
21 21 title: 'ProdList',
22   - roles: ['admin', 'assistant', 'runner', 'shoper'] // or you can only set roles in sub nav
  22 + roles: ['admin', 'assistant', 'runner', 'shoper']
23 23 }
24 24 },
25 25 {
... ... @@ -29,7 +29,14 @@ const prodRouter = {
29 29 meta: {
30 30 title: 'ProdDefiend',
31 31 roles: ['admin', 'assistant', 'shoper']
32   - // if do not set roles, means: this page does not require permission
  32 + }
  33 + }, {
  34 + path: 'defined2',
  35 + component: () => import('@/views/prod/list'),
  36 + name: 'prod...',
  37 + meta: {
  38 + title: '产品列表',
  39 + roles: ['admin', 'assistant', 'shoper']
33 40 }
34 41 }
35 42 ]
... ...
src/views/order/complex-table.vue
View file @96898ea
... ... @@ -1,379 +0,0 @@
1   -<template>
2   - <div class="app-container">
3   - <div class="filter-container">
4   - <el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
5   - <el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
6   - <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
7   - </el-select>
8   - <el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
9   - <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
10   - </el-select>
11   - <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
12   - <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
13   - </el-select>
14   - <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
15   - {{ $t('table.search') }}
16   - </el-button>
17   - <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
18   - {{ $t('table.add') }}
19   - </el-button>
20   - <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
21   - {{ $t('table.export') }}
22   - </el-button>
23   - <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
24   - {{ $t('table.reviewer') }}
25   - </el-checkbox>
26   - </div>
27   -
28   - <el-table
29   - :key="tableKey"
30   - v-loading="listLoading"
31   - :data="list"
32   - border
33   - fit
34   - highlight-current-row
35   - style="width: 100%;"
36   - @sort-change="sortChange"
37   - >
38   - <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
39   - <template slot-scope="{row}">
40   - <span>{{ row.id }}</span>
41   - </template>
42   - </el-table-column>
43   - <el-table-column :label="$t('table.date')" width="150px" align="center">
44   - <template slot-scope="{row}">
45   - <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
46   - </template>
47   - </el-table-column>
48   - <el-table-column :label="$t('table.title')" min-width="150px">
49   - <template slot-scope="{row}">
50   - <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
51   - <el-tag>{{ row.type | typeFilter }}</el-tag>
52   - </template>
53   - </el-table-column>
54   - <el-table-column :label="$t('table.author')" width="110px" align="center">
55   - <template slot-scope="{row}">
56   - <span>{{ row.author }}</span>
57   - </template>
58   - </el-table-column>
59   - <el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
60   - <template slot-scope="{row}">
61   - <span style="color:red;">{{ row.reviewer }}</span>
62   - </template>
63   - </el-table-column>
64   - <el-table-column :label="$t('table.importance')" width="80px">
65   - <template slot-scope="{row}">
66   - <svg-icon v-for="n in +row.importance" :key="n" icon-class="star" class="meta-item__icon" />
67   - </template>
68   - </el-table-column>
69   - <el-table-column :label="$t('table.readings')" align="center" width="95">
70   - <template slot-scope="{row}">
71   - <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
72   - <span v-else>0</span>
73   - </template>
74   - </el-table-column>
75   - <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
76   - <template slot-scope="{row}">
77   - <el-tag :type="row.status | statusFilter">
78   - {{ row.status }}
79   - </el-tag>
80   - </template>
81   - </el-table-column>
82   - <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
83   - <template slot-scope="{row,$index}">
84   - <el-button type="primary" size="mini" @click="handleUpdate(row)">
85   - {{ $t('table.edit') }}
86   - </el-button>
87   - <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
88   - {{ $t('table.publish') }}
89   - </el-button>
90   - <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
91   - {{ $t('table.draft') }}
92   - </el-button>
93   - <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
94   - {{ $t('table.delete') }}
95   - </el-button>
96   - </template>
97   - </el-table-column>
98   - </el-table>
99   -
100   - <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
101   -
102   - <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
103   - <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
104   - <el-form-item :label="$t('table.type')" prop="type">
105   - <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
106   - <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
107   - </el-select>
108   - </el-form-item>
109   - <el-form-item :label="$t('table.date')" prop="timestamp">
110   - <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
111   - </el-form-item>
112   - <el-form-item :label="$t('table.title')" prop="title">
113   - <el-input v-model="temp.title" />
114   - </el-form-item>
115   - <el-form-item :label="$t('table.status')">
116   - <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
117   - <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
118   - </el-select>
119   - </el-form-item>
120   - <el-form-item :label="$t('table.importance')">
121   - <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
122   - </el-form-item>
123   - <el-form-item :label="$t('table.remark')">
124   - <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
125   - </el-form-item>
126   - </el-form>
127   - <div slot="footer" class="dialog-footer">
128   - <el-button @click="dialogFormVisible = false">
129   - {{ $t('table.cancel') }}
130   - </el-button>
131   - <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
132   - {{ $t('table.confirm') }}
133   - </el-button>
134   - </div>
135   - </el-dialog>
136   -
137   - <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
138   - <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
139   - <el-table-column prop="key" label="Channel" />
140   - <el-table-column prop="pv" label="Pv" />
141   - </el-table>
142   - <span slot="footer" class="dialog-footer">
143   - <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
144   - </span>
145   - </el-dialog>
146   - </div>
147   -</template>
148   -
149   -<script>
150   -import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
151   -import waves from '@/directive/waves' // waves directive
152   -import { parseTime } from '@/utils'
153   -import Pagination from '@/components/Pagination' // secondary package based on el-pagination
154   -
155   -const calendarTypeOptions = [
156   - { key: 'CN', display_name: 'China' },
157   - { key: 'US', display_name: 'USA' },
158   - { key: 'JP', display_name: 'Japan' },
159   - { key: 'EU', display_name: 'Eurozone' }
160   -]
161   -
162   -// arr to obj, such as { CN : "China", US : "USA" }
163   -const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
164   - acc[cur.key] = cur.display_name
165   - return acc
166   -}, {})
167   -
168   -export default {
169   - name: 'ComplexTable',
170   - components: { Pagination },
171   - directives: { waves },
172   - filters: {
173   - statusFilter(status) {
174   - const statusMap = {
175   - published: 'success',
176   - draft: 'info',
177   - deleted: 'danger'
178   - }
179   - return statusMap[status]
180   - },
181   - typeFilter(type) {
182   - return calendarTypeKeyValue[type]
183   - }
184   - },
185   - data() {
186   - return {
187   - tableKey: 0,
188   - list: null,
189   - total: 0,
190   - listLoading: true,
191   - listQuery: {
192   - page: 1,
193   - limit: 20,
194   - importance: undefined,
195   - title: undefined,
196   - type: undefined,
197   - sort: '+id'
198   - },
199   - importanceOptions: [1, 2, 3],
200   - calendarTypeOptions,
201   - sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
202   - statusOptions: ['published', 'draft', 'deleted'],
203   - showReviewer: false,
204   - temp: {
205   - id: undefined,
206   - importance: 1,
207   - remark: '',
208   - timestamp: new Date(),
209   - title: '',
210   - type: '',
211   - status: 'published'
212   - },
213   - dialogFormVisible: false,
214   - dialogStatus: '',
215   - textMap: {
216   - update: 'Edit',
217   - create: 'Create'
218   - },
219   - dialogPvVisible: false,
220   - pvData: [],
221   - rules: {
222   - type: [{ required: true, message: 'type is required', trigger: 'change' }],
223   - timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
224   - title: [{ required: true, message: 'title is required', trigger: 'blur' }]
225   - },
226   - downloadLoading: false
227   - }
228   - },
229   - created() {
230   - this.getList()
231   - },
232   - methods: {
233   - getList() {
234   - this.listLoading = true
235   - fetchList(this.listQuery).then(response => {
236   - this.list = response.data.items
237   - this.total = response.data.total
238   -
239   - // Just to simulate the time of the request
240   - setTimeout(() => {
241   - this.listLoading = false
242   - }, 1.5 * 1000)
243   - })
244   - },
245   - handleFilter() {
246   - this.listQuery.page = 1
247   - this.getList()
248   - },
249   - handleModifyStatus(row, status) {
250   - this.$message({
251   - message: '操作成功',
252   - type: 'success'
253   - })
254   - row.status = status
255   - },
256   - sortChange(data) {
257   - const { prop, order } = data
258   - if (prop === 'id') {
259   - this.sortByID(order)
260   - }
261   - },
262   - sortByID(order) {
263   - if (order === 'ascending') {
264   - this.listQuery.sort = '+id'
265   - } else {
266   - this.listQuery.sort = '-id'
267   - }
268   - this.handleFilter()
269   - },
270   - resetTemp() {
271   - this.temp = {
272   - id: undefined,
273   - importance: 1,
274   - remark: '',
275   - timestamp: new Date(),
276   - title: '',
277   - status: 'published',
278   - type: ''
279   - }
280   - },
281   - handleCreate() {
282   - this.resetTemp()
283   - this.dialogStatus = 'create'
284   - this.dialogFormVisible = true
285   - this.$nextTick(() => {
286   - this.$refs['dataForm'].clearValidate()
287   - })
288   - },
289   - createData() {
290   - this.$refs['dataForm'].validate((valid) => {
291   - if (valid) {
292   - this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
293   - this.temp.author = '秀野堂主'
294   - createArticle(this.temp).then(() => {
295   - this.list.unshift(this.temp)
296   - this.dialogFormVisible = false
297   - this.$notify({
298   - title: '成功',
299   - message: '创建成功',
300   - type: 'success',
301   - duration: 2000
302   - })
303   - })
304   - }
305   - })
306   - },
307   - handleUpdate(row) {
308   - this.temp = Object.assign({}, row) // copy obj
309   - this.temp.timestamp = new Date(this.temp.timestamp)
310   - this.dialogStatus = 'update'
311   - this.dialogFormVisible = true
312   - this.$nextTick(() => {
313   - this.$refs['dataForm'].clearValidate()
314   - })
315   - },
316   - updateData() {
317   - this.$refs['dataForm'].validate((valid) => {
318   - if (valid) {
319   - const tempData = Object.assign({}, this.temp)
320   - tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
321   - updateArticle(tempData).then(() => {
322   - const index = this.list.findIndex(v => v.id === this.temp.id)
323   - this.list.splice(index, 1, this.temp)
324   - this.dialogFormVisible = false
325   - this.$notify({
326   - title: '成功',
327   - message: '更新成功',
328   - type: 'success',
329   - duration: 2000
330   - })
331   - })
332   - }
333   - })
334   - },
335   - handleDelete(row, index) {
336   - this.$notify({
337   - title: '成功',
338   - message: '删除成功',
339   - type: 'success',
340   - duration: 2000
341   - })
342   - this.list.splice(index, 1)
343   - },
344   - handleFetchPv(pv) {
345   - fetchPv(pv).then(response => {
346   - this.pvData = response.data.pvData
347   - this.dialogPvVisible = true
348   - })
349   - },
350   - handleDownload() {
351   - this.downloadLoading = true
352   - import('@/vendor/Export2Excel').then(excel => {
353   - const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
354   - const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
355   - const data = this.formatJson(filterVal)
356   - excel.export_json_to_excel({
357   - header: tHeader,
358   - data,
359   - filename: 'table-list'
360   - })
361   - this.downloadLoading = false
362   - })
363   - },
364   - formatJson(filterVal) {
365   - return this.list.map(v => filterVal.map(j => {
366   - if (j === 'timestamp') {
367   - return parseTime(v[j])
368   - } else {
369   - return v[j]
370   - }
371   - }))
372   - },
373   - getSortClass: function(key) {
374   - const sort = this.listQuery.sort
375   - return sort === `+${key}` ? 'ascending' : 'descending'
376   - }
377   - }
378   -}
379   -</script>
src/views/prod/complex-table.vue
View file @96898ea
... ... @@ -1,379 +0,0 @@
1   -<template>
2   - <div class="app-container">
3   - <div class="filter-container">
4   - <el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
5   - <el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
6   - <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
7   - </el-select>
8   - <el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
9   - <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
10   - </el-select>
11   - <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
12   - <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
13   - </el-select>
14   - <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
15   - {{ $t('table.search') }}
16   - </el-button>
17   - <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
18   - {{ $t('table.add') }}
19   - </el-button>
20   - <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
21   - {{ $t('table.export') }}
22   - </el-button>
23   - <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
24   - {{ $t('table.reviewer') }}
25   - </el-checkbox>
26   - </div>
27   -
28   - <el-table
29   - :key="tableKey"
30   - v-loading="listLoading"
31   - :data="list"
32   - border
33   - fit
34   - highlight-current-row
35   - style="width: 100%;"
36   - @sort-change="sortChange"
37   - >
38   - <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
39   - <template slot-scope="{row}">
40   - <span>{{ row.id }}</span>
41   - </template>
42   - </el-table-column>
43   - <el-table-column :label="$t('table.date')" width="150px" align="center">
44   - <template slot-scope="{row}">
45   - <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
46   - </template>
47   - </el-table-column>
48   - <el-table-column :label="$t('table.title')" min-width="150px">
49   - <template slot-scope="{row}">
50   - <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
51   - <el-tag>{{ row.type | typeFilter }}</el-tag>
52   - </template>
53   - </el-table-column>
54   - <el-table-column :label="$t('table.author')" width="110px" align="center">
55   - <template slot-scope="{row}">
56   - <span>{{ row.author }}</span>
57   - </template>
58   - </el-table-column>
59   - <el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
60   - <template slot-scope="{row}">
61   - <span style="color:red;">{{ row.reviewer }}</span>
62   - </template>
63   - </el-table-column>
64   - <el-table-column :label="$t('table.importance')" width="80px">
65   - <template slot-scope="{row}">
66   - <svg-icon v-for="n in +row.importance" :key="n" icon-class="star" class="meta-item__icon" />
67   - </template>
68   - </el-table-column>
69   - <el-table-column :label="$t('table.readings')" align="center" width="95">
70   - <template slot-scope="{row}">
71   - <span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
72   - <span v-else>0</span>
73   - </template>
74   - </el-table-column>
75   - <el-table-column :label="$t('table.status')" class-name="status-col" width="100">
76   - <template slot-scope="{row}">
77   - <el-tag :type="row.status | statusFilter">
78   - {{ row.status }}
79   - </el-tag>
80   - </template>
81   - </el-table-column>
82   - <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
83   - <template slot-scope="{row,$index}">
84   - <el-button type="primary" size="mini" @click="handleUpdate(row)">
85   - {{ $t('table.edit') }}
86   - </el-button>
87   - <el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
88   - {{ $t('table.publish') }}
89   - </el-button>
90   - <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
91   - {{ $t('table.draft') }}
92   - </el-button>
93   - <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
94   - {{ $t('table.delete') }}
95   - </el-button>
96   - </template>
97   - </el-table-column>
98   - </el-table>
99   -
100   - <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
101   -
102   - <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
103   - <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
104   - <el-form-item :label="$t('table.type')" prop="type">
105   - <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
106   - <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
107   - </el-select>
108   - </el-form-item>
109   - <el-form-item :label="$t('table.date')" prop="timestamp">
110   - <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
111   - </el-form-item>
112   - <el-form-item :label="$t('table.title')" prop="title">
113   - <el-input v-model="temp.title" />
114   - </el-form-item>
115   - <el-form-item :label="$t('table.status')">
116   - <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
117   - <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
118   - </el-select>
119   - </el-form-item>
120   - <el-form-item :label="$t('table.importance')">
121   - <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
122   - </el-form-item>
123   - <el-form-item :label="$t('table.remark')">
124   - <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
125   - </el-form-item>
126   - </el-form>
127   - <div slot="footer" class="dialog-footer">
128   - <el-button @click="dialogFormVisible = false">
129   - {{ $t('table.cancel') }}
130   - </el-button>
131   - <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
132   - {{ $t('table.confirm') }}
133   - </el-button>
134   - </div>
135   - </el-dialog>
136   -
137   - <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
138   - <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
139   - <el-table-column prop="key" label="Channel" />
140   - <el-table-column prop="pv" label="Pv" />
141   - </el-table>
142   - <span slot="footer" class="dialog-footer">
143   - <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
144   - </span>
145   - </el-dialog>
146   - </div>
147   -</template>
148   -
149   -<script>
150   -import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
151   -import waves from '@/directive/waves' // waves directive
152   -import { parseTime } from '@/utils'
153   -import Pagination from '@/components/Pagination' // secondary package based on el-pagination
154   -
155   -const calendarTypeOptions = [
156   - { key: 'CN', display_name: 'China' },
157   - { key: 'US', display_name: 'USA' },
158   - { key: 'JP', display_name: 'Japan' },
159   - { key: 'EU', display_name: 'Eurozone' }
160   -]
161   -
162   -// arr to obj, such as { CN : "China", US : "USA" }
163   -const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
164   - acc[cur.key] = cur.display_name
165   - return acc
166   -}, {})
167   -
168   -export default {
169   - name: 'ComplexTable',
170   - components: { Pagination },
171   - directives: { waves },
172   - filters: {
173   - statusFilter(status) {
174   - const statusMap = {
175   - published: 'success',
176   - draft: 'info',
177   - deleted: 'danger'
178   - }
179   - return statusMap[status]
180   - },
181   - typeFilter(type) {
182   - return calendarTypeKeyValue[type]
183   - }
184   - },
185   - data() {
186   - return {
187   - tableKey: 0,
188   - list: null,
189   - total: 0,
190   - listLoading: true,
191   - listQuery: {
192   - page: 1,
193   - limit: 20,
194   - importance: undefined,
195   - title: undefined,
196   - type: undefined,
197   - sort: '+id'
198   - },
199   - importanceOptions: [1, 2, 3],
200   - calendarTypeOptions,
201   - sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
202   - statusOptions: ['published', 'draft', 'deleted'],
203   - showReviewer: false,
204   - temp: {
205   - id: undefined,
206   - importance: 1,
207   - remark: '',
208   - timestamp: new Date(),
209   - title: '',
210   - type: '',
211   - status: 'published'
212   - },
213   - dialogFormVisible: false,
214   - dialogStatus: '',
215   - textMap: {
216   - update: 'Edit',
217   - create: 'Create'
218   - },
219   - dialogPvVisible: false,
220   - pvData: [],
221   - rules: {
222   - type: [{ required: true, message: 'type is required', trigger: 'change' }],
223   - timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
224   - title: [{ required: true, message: 'title is required', trigger: 'blur' }]
225   - },
226   - downloadLoading: false
227   - }
228   - },
229   - created() {
230   - this.getList()
231   - },
232   - methods: {
233   - getList() {
234   - this.listLoading = true
235   - fetchList(this.listQuery).then(response => {
236   - this.list = response.data.items
237   - this.total = response.data.total
238   -
239   - // Just to simulate the time of the request
240   - setTimeout(() => {
241   - this.listLoading = false
242   - }, 1.5 * 1000)
243   - })
244   - },
245   - handleFilter() {
246   - this.listQuery.page = 1
247   - this.getList()
248   - },
249   - handleModifyStatus(row, status) {
250   - this.$message({
251   - message: '操作成功',
252   - type: 'success'
253   - })
254   - row.status = status
255   - },
256   - sortChange(data) {
257   - const { prop, order } = data
258   - if (prop === 'id') {
259   - this.sortByID(order)
260   - }
261   - },
262   - sortByID(order) {
263   - if (order === 'ascending') {
264   - this.listQuery.sort = '+id'
265   - } else {
266   - this.listQuery.sort = '-id'
267   - }
268   - this.handleFilter()
269   - },
270   - resetTemp() {
271   - this.temp = {
272   - id: undefined,
273   - importance: 1,
274   - remark: '',
275   - timestamp: new Date(),
276   - title: '',
277   - status: 'published',
278   - type: ''
279   - }
280   - },
281   - handleCreate() {
282   - this.resetTemp()
283   - this.dialogStatus = 'create'
284   - this.dialogFormVisible = true
285   - this.$nextTick(() => {
286   - this.$refs['dataForm'].clearValidate()
287   - })
288   - },
289   - createData() {
290   - this.$refs['dataForm'].validate((valid) => {
291   - if (valid) {
292   - this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
293   - this.temp.author = '秀野堂主'
294   - createArticle(this.temp).then(() => {
295   - this.list.unshift(this.temp)
296   - this.dialogFormVisible = false
297   - this.$notify({
298   - title: '成功',
299   - message: '创建成功',
300   - type: 'success',
301   - duration: 2000
302   - })
303   - })
304   - }
305   - })
306   - },
307   - handleUpdate(row) {
308   - this.temp = Object.assign({}, row) // copy obj
309   - this.temp.timestamp = new Date(this.temp.timestamp)
310   - this.dialogStatus = 'update'
311   - this.dialogFormVisible = true
312   - this.$nextTick(() => {
313   - this.$refs['dataForm'].clearValidate()
314   - })
315   - },
316   - updateData() {
317   - this.$refs['dataForm'].validate((valid) => {
318   - if (valid) {
319   - const tempData = Object.assign({}, this.temp)
320   - tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
321   - updateArticle(tempData).then(() => {
322   - const index = this.list.findIndex(v => v.id === this.temp.id)
323   - this.list.splice(index, 1, this.temp)
324   - this.dialogFormVisible = false
325   - this.$notify({
326   - title: '成功',
327   - message: '更新成功',
328   - type: 'success',
329   - duration: 2000
330   - })
331   - })
332   - }
333   - })
334   - },
335   - handleDelete(row, index) {
336   - this.$notify({
337   - title: '成功',
338   - message: '删除成功',
339   - type: 'success',
340   - duration: 2000
341   - })
342   - this.list.splice(index, 1)
343   - },
344   - handleFetchPv(pv) {
345   - fetchPv(pv).then(response => {
346   - this.pvData = response.data.pvData
347   - this.dialogPvVisible = true
348   - })
349   - },
350   - handleDownload() {
351   - this.downloadLoading = true
352   - import('@/vendor/Export2Excel').then(excel => {
353   - const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
354   - const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
355   - const data = this.formatJson(filterVal)
356   - excel.export_json_to_excel({
357   - header: tHeader,
358   - data,
359   - filename: 'table-list'
360   - })
361   - this.downloadLoading = false
362   - })
363   - },
364   - formatJson(filterVal) {
365   - return this.list.map(v => filterVal.map(j => {
366   - if (j === 'timestamp') {
367   - return parseTime(v[j])
368   - } else {
369   - return v[j]
370   - }
371   - }))
372   - },
373   - getSortClass: function(key) {
374   - const sort = this.listQuery.sort
375   - return sort === `+${key}` ? 'ascending' : 'descending'
376   - }
377   - }
378   -}
379   -</script>