zetan-cli-dev-template-vue-element-admin 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +8 -0
- package/template/.editorconfig +14 -0
- package/template/.env.development +5 -0
- package/template/.env.production +6 -0
- package/template/.env.staging +8 -0
- package/template/.eslintignore +4 -0
- package/template/.eslintrc.js +198 -0
- package/template/.travis.yml +5 -0
- package/template/LICENSE +21 -0
- package/template/README.es.md +228 -0
- package/template/README.ja.md +224 -0
- package/template/README.md +250 -0
- package/template/README.zh-CN.md +273 -0
- package/template/babel.config.js +14 -0
- package/template/build/index.js +35 -0
- package/template/jest.config.js +24 -0
- package/template/jsconfig.json +9 -0
- package/template/mock/article.js +116 -0
- package/template/mock/index.js +60 -0
- package/template/mock/mock-server.js +81 -0
- package/template/mock/remote-search.js +51 -0
- package/template/mock/role/index.js +98 -0
- package/template/mock/role/routes.js +530 -0
- package/template/mock/user.js +84 -0
- package/template/mock/utils.js +48 -0
- package/template/package.json +111 -0
- package/template/plop-templates/component/index.hbs +26 -0
- package/template/plop-templates/component/prompt.js +55 -0
- package/template/plop-templates/store/index.hbs +16 -0
- package/template/plop-templates/store/prompt.js +62 -0
- package/template/plop-templates/utils.js +2 -0
- package/template/plop-templates/view/index.hbs +26 -0
- package/template/plop-templates/view/prompt.js +55 -0
- package/template/plopfile.js +9 -0
- package/template/postcss.config.js +5 -0
- package/template/public/favicon.ico +0 -0
- package/template/public/index.html +15 -0
- package/template/src/App.vue +11 -0
- package/template/src/api/article.js +41 -0
- package/template/src/api/qiniu.js +8 -0
- package/template/src/api/remote-search.js +17 -0
- package/template/src/api/role.js +38 -0
- package/template/src/api/user.js +24 -0
- package/template/src/assets/401_images/401.gif +0 -0
- package/template/src/assets/404_images/404.png +0 -0
- package/template/src/assets/404_images/404_cloud.png +0 -0
- package/template/src/assets/custom-theme/fonts/element-icons.ttf +0 -0
- package/template/src/assets/custom-theme/fonts/element-icons.woff +0 -0
- package/template/src/assets/custom-theme/index.css +1 -0
- package/template/src/components/BackToTop/index.vue +111 -0
- package/template/src/components/Breadcrumb/index.vue +82 -0
- package/template/src/components/Charts/Keyboard.vue +155 -0
- package/template/src/components/Charts/LineMarker.vue +227 -0
- package/template/src/components/Charts/MixChart.vue +271 -0
- package/template/src/components/Charts/mixins/resize.js +56 -0
- package/template/src/components/DndList/index.vue +166 -0
- package/template/src/components/DragSelect/index.vue +65 -0
- package/template/src/components/Dropzone/index.vue +297 -0
- package/template/src/components/ErrorLog/index.vue +78 -0
- package/template/src/components/GithubCorner/index.vue +54 -0
- package/template/src/components/Hamburger/index.vue +44 -0
- package/template/src/components/HeaderSearch/index.vue +180 -0
- package/template/src/components/ImageCropper/index.vue +1779 -0
- package/template/src/components/ImageCropper/utils/data2blob.js +19 -0
- package/template/src/components/ImageCropper/utils/effectRipple.js +39 -0
- package/template/src/components/ImageCropper/utils/language.js +232 -0
- package/template/src/components/ImageCropper/utils/mimes.js +7 -0
- package/template/src/components/JsonEditor/index.vue +77 -0
- package/template/src/components/Kanban/index.vue +99 -0
- package/template/src/components/MDinput/index.vue +360 -0
- package/template/src/components/MarkdownEditor/default-options.js +31 -0
- package/template/src/components/MarkdownEditor/index.vue +118 -0
- package/template/src/components/Pagination/index.vue +101 -0
- package/template/src/components/PanThumb/index.vue +142 -0
- package/template/src/components/RightPanel/index.vue +145 -0
- package/template/src/components/Screenfull/index.vue +60 -0
- package/template/src/components/Share/DropdownMenu.vue +103 -0
- package/template/src/components/SizeSelect/index.vue +57 -0
- package/template/src/components/Sticky/index.vue +91 -0
- package/template/src/components/SvgIcon/index.vue +62 -0
- package/template/src/components/TextHoverEffect/Mallki.vue +113 -0
- package/template/src/components/ThemePicker/index.vue +175 -0
- package/template/src/components/Tinymce/components/EditorImage.vue +111 -0
- package/template/src/components/Tinymce/dynamicLoadScript.js +59 -0
- package/template/src/components/Tinymce/index.vue +247 -0
- package/template/src/components/Tinymce/plugins.js +7 -0
- package/template/src/components/Tinymce/toolbar.js +6 -0
- package/template/src/components/Upload/SingleImage.vue +134 -0
- package/template/src/components/Upload/SingleImage2.vue +130 -0
- package/template/src/components/Upload/SingleImage3.vue +157 -0
- package/template/src/components/UploadExcel/index.vue +138 -0
- package/template/src/directive/clipboard/clipboard.js +49 -0
- package/template/src/directive/clipboard/index.js +13 -0
- package/template/src/directive/el-drag-dialog/drag.js +77 -0
- package/template/src/directive/el-drag-dialog/index.js +13 -0
- package/template/src/directive/el-table/adaptive.js +41 -0
- package/template/src/directive/el-table/index.js +13 -0
- package/template/src/directive/permission/index.js +13 -0
- package/template/src/directive/permission/permission.js +31 -0
- package/template/src/directive/sticky.js +91 -0
- package/template/src/directive/waves/index.js +13 -0
- package/template/src/directive/waves/waves.css +26 -0
- package/template/src/directive/waves/waves.js +72 -0
- package/template/src/filters/index.js +68 -0
- package/template/src/icons/index.js +9 -0
- package/template/src/icons/svg/404.svg +1 -0
- package/template/src/icons/svg/bug.svg +1 -0
- package/template/src/icons/svg/chart.svg +1 -0
- package/template/src/icons/svg/clipboard.svg +1 -0
- package/template/src/icons/svg/component.svg +1 -0
- package/template/src/icons/svg/dashboard.svg +1 -0
- package/template/src/icons/svg/documentation.svg +1 -0
- package/template/src/icons/svg/drag.svg +1 -0
- package/template/src/icons/svg/edit.svg +1 -0
- package/template/src/icons/svg/education.svg +1 -0
- package/template/src/icons/svg/email.svg +1 -0
- package/template/src/icons/svg/example.svg +1 -0
- package/template/src/icons/svg/excel.svg +1 -0
- package/template/src/icons/svg/exit-fullscreen.svg +1 -0
- package/template/src/icons/svg/eye-open.svg +1 -0
- package/template/src/icons/svg/eye.svg +1 -0
- package/template/src/icons/svg/form.svg +1 -0
- package/template/src/icons/svg/fullscreen.svg +1 -0
- package/template/src/icons/svg/guide.svg +1 -0
- package/template/src/icons/svg/icon.svg +1 -0
- package/template/src/icons/svg/international.svg +1 -0
- package/template/src/icons/svg/language.svg +1 -0
- package/template/src/icons/svg/link.svg +1 -0
- package/template/src/icons/svg/list.svg +1 -0
- package/template/src/icons/svg/lock.svg +1 -0
- package/template/src/icons/svg/message.svg +1 -0
- package/template/src/icons/svg/money.svg +1 -0
- package/template/src/icons/svg/nested.svg +1 -0
- package/template/src/icons/svg/password.svg +1 -0
- package/template/src/icons/svg/pdf.svg +1 -0
- package/template/src/icons/svg/people.svg +1 -0
- package/template/src/icons/svg/peoples.svg +1 -0
- package/template/src/icons/svg/qq.svg +1 -0
- package/template/src/icons/svg/search.svg +1 -0
- package/template/src/icons/svg/shopping.svg +1 -0
- package/template/src/icons/svg/size.svg +1 -0
- package/template/src/icons/svg/skill.svg +1 -0
- package/template/src/icons/svg/star.svg +1 -0
- package/template/src/icons/svg/tab.svg +1 -0
- package/template/src/icons/svg/table.svg +1 -0
- package/template/src/icons/svg/theme.svg +1 -0
- package/template/src/icons/svg/tree-table.svg +1 -0
- package/template/src/icons/svg/tree.svg +1 -0
- package/template/src/icons/svg/user.svg +1 -0
- package/template/src/icons/svg/wechat.svg +1 -0
- package/template/src/icons/svg/zip.svg +1 -0
- package/template/src/icons/svgo.yml +22 -0
- package/template/src/layout/components/AppMain.vue +57 -0
- package/template/src/layout/components/Navbar.vue +167 -0
- package/template/src/layout/components/Settings/index.vue +108 -0
- package/template/src/layout/components/Sidebar/FixiOSBug.js +26 -0
- package/template/src/layout/components/Sidebar/Item.vue +41 -0
- package/template/src/layout/components/Sidebar/Link.vue +43 -0
- package/template/src/layout/components/Sidebar/Logo.vue +82 -0
- package/template/src/layout/components/Sidebar/SidebarItem.vue +95 -0
- package/template/src/layout/components/Sidebar/index.vue +54 -0
- package/template/src/layout/components/TagsView/ScrollPane.vue +94 -0
- package/template/src/layout/components/TagsView/index.vue +292 -0
- package/template/src/layout/components/index.js +5 -0
- package/template/src/layout/index.vue +102 -0
- package/template/src/layout/mixin/ResizeHandler.js +45 -0
- package/template/src/main.js +53 -0
- package/template/src/permission.js +74 -0
- package/template/src/router/index.js +404 -0
- package/template/src/router/modules/charts.js +36 -0
- package/template/src/router/modules/components.js +102 -0
- package/template/src/router/modules/nested.js +66 -0
- package/template/src/router/modules/table.js +41 -0
- package/template/src/settings.js +35 -0
- package/template/src/store/getters.js +15 -0
- package/template/src/store/index.js +25 -0
- package/template/src/store/modules/app.js +56 -0
- package/template/src/store/modules/errorLog.js +28 -0
- package/template/src/store/modules/permission.js +69 -0
- package/template/src/store/modules/settings.js +35 -0
- package/template/src/store/modules/tagsView.js +160 -0
- package/template/src/store/modules/user.js +131 -0
- package/template/src/styles/btn.scss +99 -0
- package/template/src/styles/element-ui.scss +84 -0
- package/template/src/styles/element-variables.scss +31 -0
- package/template/src/styles/index.scss +191 -0
- package/template/src/styles/mixin.scss +66 -0
- package/template/src/styles/sidebar.scss +226 -0
- package/template/src/styles/transition.scss +48 -0
- package/template/src/styles/variables.scss +35 -0
- package/template/src/utils/auth.js +15 -0
- package/template/src/utils/clipboard.js +32 -0
- package/template/src/utils/error-log.js +35 -0
- package/template/src/utils/get-page-title.js +10 -0
- package/template/src/utils/index.js +357 -0
- package/template/src/utils/open-window.js +25 -0
- package/template/src/utils/permission.js +21 -0
- package/template/src/utils/request.js +85 -0
- package/template/src/utils/scroll-to.js +58 -0
- package/template/src/utils/validate.js +87 -0
- package/template/src/vendor/Export2Excel.js +220 -0
- package/template/src/vendor/Export2Zip.js +24 -0
- package/template/src/views/charts/keyboard.vue +23 -0
- package/template/src/views/charts/line.vue +23 -0
- package/template/src/views/charts/mix-chart.vue +23 -0
- package/template/src/views/clipboard/index.vue +49 -0
- package/template/src/views/components-demo/avatar-upload.vue +61 -0
- package/template/src/views/components-demo/back-to-top.vue +154 -0
- package/template/src/views/components-demo/count-to.vue +218 -0
- package/template/src/views/components-demo/dnd-list.vue +39 -0
- package/template/src/views/components-demo/drag-dialog.vue +61 -0
- package/template/src/views/components-demo/drag-kanban.vue +66 -0
- package/template/src/views/components-demo/drag-select.vue +43 -0
- package/template/src/views/components-demo/dropzone.vue +31 -0
- package/template/src/views/components-demo/json-editor.vue +36 -0
- package/template/src/views/components-demo/markdown.vue +101 -0
- package/template/src/views/components-demo/mixin.vue +169 -0
- package/template/src/views/components-demo/split-pane.vue +67 -0
- package/template/src/views/components-demo/sticky.vue +135 -0
- package/template/src/views/components-demo/tinymce.vue +36 -0
- package/template/src/views/dashboard/admin/components/BarChart.vue +102 -0
- package/template/src/views/dashboard/admin/components/BoxCard.vue +118 -0
- package/template/src/views/dashboard/admin/components/LineChart.vue +135 -0
- package/template/src/views/dashboard/admin/components/PanelGroup.vue +181 -0
- package/template/src/views/dashboard/admin/components/PieChart.vue +79 -0
- package/template/src/views/dashboard/admin/components/RaddarChart.vue +116 -0
- package/template/src/views/dashboard/admin/components/TodoList/Todo.vue +81 -0
- package/template/src/views/dashboard/admin/components/TodoList/index.scss +320 -0
- package/template/src/views/dashboard/admin/components/TodoList/index.vue +127 -0
- package/template/src/views/dashboard/admin/components/TransactionTable.vue +55 -0
- package/template/src/views/dashboard/admin/components/mixins/resize.js +55 -0
- package/template/src/views/dashboard/admin/index.vue +124 -0
- package/template/src/views/dashboard/editor/index.vue +74 -0
- package/template/src/views/dashboard/index.vue +31 -0
- package/template/src/views/documentation/index.vue +57 -0
- package/template/src/views/error-log/components/ErrorTestA.vue +13 -0
- package/template/src/views/error-log/components/ErrorTestB.vue +11 -0
- package/template/src/views/error-log/index.vue +32 -0
- package/template/src/views/error-page/401.vue +99 -0
- package/template/src/views/error-page/404.vue +228 -0
- package/template/src/views/example/components/ArticleDetail.vue +289 -0
- package/template/src/views/example/components/Dropdown/Comment.vue +41 -0
- package/template/src/views/example/components/Dropdown/Platform.vue +46 -0
- package/template/src/views/example/components/Dropdown/SourceUrl.vue +38 -0
- package/template/src/views/example/components/Dropdown/index.js +3 -0
- package/template/src/views/example/components/Warning.vue +13 -0
- package/template/src/views/example/create.vue +13 -0
- package/template/src/views/example/edit.vue +13 -0
- package/template/src/views/example/list.vue +112 -0
- package/template/src/views/excel/components/AutoWidthOption.vue +34 -0
- package/template/src/views/excel/components/BookTypeOption.vue +39 -0
- package/template/src/views/excel/components/FilenameOption.vue +27 -0
- package/template/src/views/excel/export-excel.vue +116 -0
- package/template/src/views/excel/merge-header.vue +101 -0
- package/template/src/views/excel/select-excel.vue +107 -0
- package/template/src/views/excel/upload-excel.vue +42 -0
- package/template/src/views/guide/index.vue +36 -0
- package/template/src/views/guide/steps.js +53 -0
- package/template/src/views/icons/element-icons.js +3 -0
- package/template/src/views/icons/index.vue +101 -0
- package/template/src/views/icons/svg-icons.js +10 -0
- package/template/src/views/login/auth-redirect.vue +15 -0
- package/template/src/views/login/components/SocialSignin.vue +72 -0
- package/template/src/views/login/index.vue +324 -0
- package/template/src/views/nested/menu1/index.vue +7 -0
- package/template/src/views/nested/menu1/menu1-1/index.vue +7 -0
- package/template/src/views/nested/menu1/menu1-2/index.vue +7 -0
- package/template/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue +5 -0
- package/template/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue +5 -0
- package/template/src/views/nested/menu1/menu1-3/index.vue +5 -0
- package/template/src/views/nested/menu2/index.vue +5 -0
- package/template/src/views/pdf/content.js +58 -0
- package/template/src/views/pdf/download.vue +201 -0
- package/template/src/views/pdf/index.vue +13 -0
- package/template/src/views/permission/components/SwitchRoles.vue +32 -0
- package/template/src/views/permission/directive.vue +111 -0
- package/template/src/views/permission/page.vue +19 -0
- package/template/src/views/permission/role.vue +270 -0
- package/template/src/views/profile/components/Account.vue +38 -0
- package/template/src/views/profile/components/Activity.vue +185 -0
- package/template/src/views/profile/components/Timeline.vue +43 -0
- package/template/src/views/profile/components/UserCard.vue +134 -0
- package/template/src/views/profile/index.vue +68 -0
- package/template/src/views/qiniu/upload.vue +41 -0
- package/template/src/views/redirect/index.vue +12 -0
- package/template/src/views/tab/components/TabPane.vue +103 -0
- package/template/src/views/tab/index.vue +57 -0
- package/template/src/views/table/complex-table.vue +379 -0
- package/template/src/views/table/drag-table.vue +153 -0
- package/template/src/views/table/dynamic-table/components/FixedThead.vue +62 -0
- package/template/src/views/table/dynamic-table/components/UnfixedThead.vue +50 -0
- package/template/src/views/table/dynamic-table/index.vue +24 -0
- package/template/src/views/table/inline-edit-table.vue +149 -0
- package/template/src/views/theme/index.vue +120 -0
- package/template/src/views/zip/index.vue +77 -0
- package/template/tests/unit/.eslintrc.js +5 -0
- package/template/tests/unit/components/Hamburger.spec.js +18 -0
- package/template/tests/unit/components/SvgIcon.spec.js +22 -0
- package/template/tests/unit/utils/formatTime.spec.js +29 -0
- package/template/tests/unit/utils/param2Obj.spec.js +14 -0
- package/template/tests/unit/utils/parseTime.spec.js +37 -0
- package/template/tests/unit/utils/validate.spec.js +28 -0
- package/template/vue.config.js +124 -0
@@ -0,0 +1,379 @@
|
|
1
|
+
<template>
|
2
|
+
<div class="app-container">
|
3
|
+
<div class="filter-container">
|
4
|
+
<el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
|
5
|
+
<el-select v-model="listQuery.importance" placeholder="Imp" 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="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
|
+
Search
|
16
|
+
</el-button>
|
17
|
+
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
|
18
|
+
Add
|
19
|
+
</el-button>
|
20
|
+
<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
|
21
|
+
Export
|
22
|
+
</el-button>
|
23
|
+
<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
|
24
|
+
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="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="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="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="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="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="Imp" 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="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="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="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
|
+
Edit
|
86
|
+
</el-button>
|
87
|
+
<el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
|
88
|
+
Publish
|
89
|
+
</el-button>
|
90
|
+
<el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
|
91
|
+
Draft
|
92
|
+
</el-button>
|
93
|
+
<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
|
94
|
+
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="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="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="Title" prop="title">
|
113
|
+
<el-input v-model="temp.title" />
|
114
|
+
</el-form-item>
|
115
|
+
<el-form-item label="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="Imp">
|
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="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
|
+
Cancel
|
130
|
+
</el-button>
|
131
|
+
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
|
132
|
+
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">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: '操作Success',
|
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 = 'vue-element-admin'
|
294
|
+
createArticle(this.temp).then(() => {
|
295
|
+
this.list.unshift(this.temp)
|
296
|
+
this.dialogFormVisible = false
|
297
|
+
this.$notify({
|
298
|
+
title: 'Success',
|
299
|
+
message: 'Created Successfully',
|
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: 'Success',
|
327
|
+
message: 'Update Successfully',
|
328
|
+
type: 'success',
|
329
|
+
duration: 2000
|
330
|
+
})
|
331
|
+
})
|
332
|
+
}
|
333
|
+
})
|
334
|
+
},
|
335
|
+
handleDelete(row, index) {
|
336
|
+
this.$notify({
|
337
|
+
title: 'Success',
|
338
|
+
message: 'Delete Successfully',
|
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>
|
@@ -0,0 +1,153 @@
|
|
1
|
+
<template>
|
2
|
+
<div class="app-container">
|
3
|
+
<!-- Note that row-key is necessary to get a correct row order. -->
|
4
|
+
<el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
|
5
|
+
<el-table-column align="center" label="ID" width="65">
|
6
|
+
<template slot-scope="{row}">
|
7
|
+
<span>{{ row.id }}</span>
|
8
|
+
</template>
|
9
|
+
</el-table-column>
|
10
|
+
|
11
|
+
<el-table-column width="180px" align="center" label="Date">
|
12
|
+
<template slot-scope="{row}">
|
13
|
+
<span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
14
|
+
</template>
|
15
|
+
</el-table-column>
|
16
|
+
|
17
|
+
<el-table-column min-width="300px" label="Title">
|
18
|
+
<template slot-scope="{row}">
|
19
|
+
<span>{{ row.title }}</span>
|
20
|
+
</template>
|
21
|
+
</el-table-column>
|
22
|
+
|
23
|
+
<el-table-column width="110px" align="center" label="Author">
|
24
|
+
<template slot-scope="{row}">
|
25
|
+
<span>{{ row.author }}</span>
|
26
|
+
</template>
|
27
|
+
</el-table-column>
|
28
|
+
|
29
|
+
<el-table-column width="100px" label="Importance">
|
30
|
+
<template slot-scope="{row}">
|
31
|
+
<svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="icon-star" />
|
32
|
+
</template>
|
33
|
+
</el-table-column>
|
34
|
+
|
35
|
+
<el-table-column align="center" label="Readings" width="95">
|
36
|
+
<template slot-scope="{row}">
|
37
|
+
<span>{{ row.pageviews }}</span>
|
38
|
+
</template>
|
39
|
+
</el-table-column>
|
40
|
+
|
41
|
+
<el-table-column class-name="status-col" label="Status" width="110">
|
42
|
+
<template slot-scope="{row}">
|
43
|
+
<el-tag :type="row.status | statusFilter">
|
44
|
+
{{ row.status }}
|
45
|
+
</el-tag>
|
46
|
+
</template>
|
47
|
+
</el-table-column>
|
48
|
+
|
49
|
+
<el-table-column align="center" label="Drag" width="80">
|
50
|
+
<template slot-scope="{}">
|
51
|
+
<svg-icon class="drag-handler" icon-class="drag" />
|
52
|
+
</template>
|
53
|
+
</el-table-column>
|
54
|
+
</el-table>
|
55
|
+
<div class="show-d">
|
56
|
+
<el-tag>The default order :</el-tag> {{ oldList }}
|
57
|
+
</div>
|
58
|
+
<div class="show-d">
|
59
|
+
<el-tag>The after dragging order :</el-tag> {{ newList }}
|
60
|
+
</div>
|
61
|
+
</div>
|
62
|
+
</template>
|
63
|
+
|
64
|
+
<script>
|
65
|
+
import { fetchList } from '@/api/article'
|
66
|
+
import Sortable from 'sortablejs'
|
67
|
+
|
68
|
+
export default {
|
69
|
+
name: 'DragTable',
|
70
|
+
filters: {
|
71
|
+
statusFilter(status) {
|
72
|
+
const statusMap = {
|
73
|
+
published: 'success',
|
74
|
+
draft: 'info',
|
75
|
+
deleted: 'danger'
|
76
|
+
}
|
77
|
+
return statusMap[status]
|
78
|
+
}
|
79
|
+
},
|
80
|
+
data() {
|
81
|
+
return {
|
82
|
+
list: null,
|
83
|
+
total: null,
|
84
|
+
listLoading: true,
|
85
|
+
listQuery: {
|
86
|
+
page: 1,
|
87
|
+
limit: 10
|
88
|
+
},
|
89
|
+
sortable: null,
|
90
|
+
oldList: [],
|
91
|
+
newList: []
|
92
|
+
}
|
93
|
+
},
|
94
|
+
created() {
|
95
|
+
this.getList()
|
96
|
+
},
|
97
|
+
methods: {
|
98
|
+
async getList() {
|
99
|
+
this.listLoading = true
|
100
|
+
const { data } = await fetchList(this.listQuery)
|
101
|
+
this.list = data.items
|
102
|
+
this.total = data.total
|
103
|
+
this.listLoading = false
|
104
|
+
this.oldList = this.list.map(v => v.id)
|
105
|
+
this.newList = this.oldList.slice()
|
106
|
+
this.$nextTick(() => {
|
107
|
+
this.setSort()
|
108
|
+
})
|
109
|
+
},
|
110
|
+
setSort() {
|
111
|
+
const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
|
112
|
+
this.sortable = Sortable.create(el, {
|
113
|
+
ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
|
114
|
+
setData: function(dataTransfer) {
|
115
|
+
// to avoid Firefox bug
|
116
|
+
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
|
117
|
+
dataTransfer.setData('Text', '')
|
118
|
+
},
|
119
|
+
onEnd: evt => {
|
120
|
+
const targetRow = this.list.splice(evt.oldIndex, 1)[0]
|
121
|
+
this.list.splice(evt.newIndex, 0, targetRow)
|
122
|
+
|
123
|
+
// for show the changes, you can delete in you code
|
124
|
+
const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
|
125
|
+
this.newList.splice(evt.newIndex, 0, tempIndex)
|
126
|
+
}
|
127
|
+
})
|
128
|
+
}
|
129
|
+
}
|
130
|
+
}
|
131
|
+
</script>
|
132
|
+
|
133
|
+
<style>
|
134
|
+
.sortable-ghost{
|
135
|
+
opacity: .8;
|
136
|
+
color: #fff!important;
|
137
|
+
background: #42b983!important;
|
138
|
+
}
|
139
|
+
</style>
|
140
|
+
|
141
|
+
<style scoped>
|
142
|
+
.icon-star{
|
143
|
+
margin-right:2px;
|
144
|
+
}
|
145
|
+
.drag-handler{
|
146
|
+
width: 20px;
|
147
|
+
height: 20px;
|
148
|
+
cursor: pointer;
|
149
|
+
}
|
150
|
+
.show-d{
|
151
|
+
margin-top: 15px;
|
152
|
+
}
|
153
|
+
</style>
|
@@ -0,0 +1,62 @@
|
|
1
|
+
<template>
|
2
|
+
<div class="app-container">
|
3
|
+
<div class="filter-container">
|
4
|
+
<el-checkbox-group v-model="checkboxVal">
|
5
|
+
<el-checkbox label="apple">
|
6
|
+
apple
|
7
|
+
</el-checkbox>
|
8
|
+
<el-checkbox label="banana">
|
9
|
+
banana
|
10
|
+
</el-checkbox>
|
11
|
+
<el-checkbox label="orange">
|
12
|
+
orange
|
13
|
+
</el-checkbox>
|
14
|
+
</el-checkbox-group>
|
15
|
+
</div>
|
16
|
+
|
17
|
+
<el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%">
|
18
|
+
<el-table-column prop="name" label="fruitName" width="180" />
|
19
|
+
<el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
|
20
|
+
<template slot-scope="scope">
|
21
|
+
{{ scope.row[fruit] }}
|
22
|
+
</template>
|
23
|
+
</el-table-column>
|
24
|
+
</el-table>
|
25
|
+
</div>
|
26
|
+
</template>
|
27
|
+
|
28
|
+
<script>
|
29
|
+
const defaultFormThead = ['apple', 'banana']
|
30
|
+
|
31
|
+
export default {
|
32
|
+
data() {
|
33
|
+
return {
|
34
|
+
tableData: [
|
35
|
+
{
|
36
|
+
name: 'fruit-1',
|
37
|
+
apple: 'apple-10',
|
38
|
+
banana: 'banana-10',
|
39
|
+
orange: 'orange-10'
|
40
|
+
},
|
41
|
+
{
|
42
|
+
name: 'fruit-2',
|
43
|
+
apple: 'apple-20',
|
44
|
+
banana: 'banana-20',
|
45
|
+
orange: 'orange-20'
|
46
|
+
}
|
47
|
+
],
|
48
|
+
key: 1, // table key
|
49
|
+
formTheadOptions: ['apple', 'banana', 'orange'],
|
50
|
+
checkboxVal: defaultFormThead, // checkboxVal
|
51
|
+
formThead: defaultFormThead // 默认表头 Default header
|
52
|
+
}
|
53
|
+
},
|
54
|
+
watch: {
|
55
|
+
checkboxVal(valArr) {
|
56
|
+
this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
|
57
|
+
this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
|
58
|
+
}
|
59
|
+
}
|
60
|
+
}
|
61
|
+
</script>
|
62
|
+
|
@@ -0,0 +1,50 @@
|
|
1
|
+
<template>
|
2
|
+
<div class="app-container">
|
3
|
+
<div class="filter-container">
|
4
|
+
<el-checkbox-group v-model="formThead">
|
5
|
+
<el-checkbox label="apple">
|
6
|
+
apple
|
7
|
+
</el-checkbox>
|
8
|
+
<el-checkbox label="banana">
|
9
|
+
banana
|
10
|
+
</el-checkbox>
|
11
|
+
<el-checkbox label="orange">
|
12
|
+
orange
|
13
|
+
</el-checkbox>
|
14
|
+
</el-checkbox-group>
|
15
|
+
</div>
|
16
|
+
|
17
|
+
<el-table :data="tableData" border fit highlight-current-row style="width: 100%">
|
18
|
+
<el-table-column prop="name" label="fruitName" width="180" />
|
19
|
+
<el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
|
20
|
+
<template slot-scope="scope">
|
21
|
+
{{ scope.row[fruit] }}
|
22
|
+
</template>
|
23
|
+
</el-table-column>
|
24
|
+
</el-table>
|
25
|
+
</div>
|
26
|
+
</template>
|
27
|
+
|
28
|
+
<script>
|
29
|
+
export default {
|
30
|
+
data() {
|
31
|
+
return {
|
32
|
+
tableData: [
|
33
|
+
{
|
34
|
+
name: 'fruit-1',
|
35
|
+
apple: 'apple-10',
|
36
|
+
banana: 'banana-10',
|
37
|
+
orange: 'orange-10'
|
38
|
+
},
|
39
|
+
{
|
40
|
+
name: 'fruit-2',
|
41
|
+
apple: 'apple-20',
|
42
|
+
banana: 'banana-20',
|
43
|
+
orange: 'orange-20'
|
44
|
+
}
|
45
|
+
],
|
46
|
+
formThead: ['apple', 'banana']
|
47
|
+
}
|
48
|
+
}
|
49
|
+
}
|
50
|
+
</script>
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<template>
|
2
|
+
<div class="app-container">
|
3
|
+
<div style="margin:0 0 5px 20px">
|
4
|
+
Fixed header, sorted by header order,
|
5
|
+
</div>
|
6
|
+
<fixed-thead />
|
7
|
+
|
8
|
+
<div style="margin:30px 0 5px 20px">
|
9
|
+
Not fixed header, sorted by click order
|
10
|
+
</div>
|
11
|
+
<unfixed-thead />
|
12
|
+
</div>
|
13
|
+
</template>
|
14
|
+
|
15
|
+
<script>
|
16
|
+
import FixedThead from './components/FixedThead'
|
17
|
+
import UnfixedThead from './components/UnfixedThead'
|
18
|
+
|
19
|
+
export default {
|
20
|
+
name: 'DynamicTable',
|
21
|
+
components: { FixedThead, UnfixedThead }
|
22
|
+
}
|
23
|
+
</script>
|
24
|
+
|