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,6 @@
|
|
1
|
+
// Here is a list of the toolbar
|
2
|
+
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
|
3
|
+
|
4
|
+
const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
|
5
|
+
|
6
|
+
export default toolbar
|
@@ -0,0 +1,134 @@
|
|
1
|
+
<template>
|
2
|
+
<div class="upload-container">
|
3
|
+
<el-upload
|
4
|
+
:data="dataObj"
|
5
|
+
:multiple="false"
|
6
|
+
:show-file-list="false"
|
7
|
+
:on-success="handleImageSuccess"
|
8
|
+
class="image-uploader"
|
9
|
+
drag
|
10
|
+
action="https://httpbin.org/post"
|
11
|
+
>
|
12
|
+
<i class="el-icon-upload" />
|
13
|
+
<div class="el-upload__text">
|
14
|
+
将文件拖到此处,或<em>点击上传</em>
|
15
|
+
</div>
|
16
|
+
</el-upload>
|
17
|
+
<div class="image-preview">
|
18
|
+
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
|
19
|
+
<img :src="imageUrl+'?imageView2/1/w/200/h/200'">
|
20
|
+
<div class="image-preview-action">
|
21
|
+
<i class="el-icon-delete" @click="rmImage" />
|
22
|
+
</div>
|
23
|
+
</div>
|
24
|
+
</div>
|
25
|
+
</div>
|
26
|
+
</template>
|
27
|
+
|
28
|
+
<script>
|
29
|
+
import { getToken } from '@/api/qiniu'
|
30
|
+
|
31
|
+
export default {
|
32
|
+
name: 'SingleImageUpload',
|
33
|
+
props: {
|
34
|
+
value: {
|
35
|
+
type: String,
|
36
|
+
default: ''
|
37
|
+
}
|
38
|
+
},
|
39
|
+
data() {
|
40
|
+
return {
|
41
|
+
tempUrl: '',
|
42
|
+
dataObj: { token: '', key: '' }
|
43
|
+
}
|
44
|
+
},
|
45
|
+
computed: {
|
46
|
+
imageUrl() {
|
47
|
+
return this.value
|
48
|
+
}
|
49
|
+
},
|
50
|
+
methods: {
|
51
|
+
rmImage() {
|
52
|
+
this.emitInput('')
|
53
|
+
},
|
54
|
+
emitInput(val) {
|
55
|
+
this.$emit('input', val)
|
56
|
+
},
|
57
|
+
handleImageSuccess() {
|
58
|
+
this.emitInput(this.tempUrl)
|
59
|
+
},
|
60
|
+
beforeUpload() {
|
61
|
+
const _self = this
|
62
|
+
return new Promise((resolve, reject) => {
|
63
|
+
getToken().then(response => {
|
64
|
+
const key = response.data.qiniu_key
|
65
|
+
const token = response.data.qiniu_token
|
66
|
+
_self._data.dataObj.token = token
|
67
|
+
_self._data.dataObj.key = key
|
68
|
+
this.tempUrl = response.data.qiniu_url
|
69
|
+
resolve(true)
|
70
|
+
}).catch(err => {
|
71
|
+
console.log(err)
|
72
|
+
reject(false)
|
73
|
+
})
|
74
|
+
})
|
75
|
+
}
|
76
|
+
}
|
77
|
+
}
|
78
|
+
</script>
|
79
|
+
|
80
|
+
<style lang="scss" scoped>
|
81
|
+
@import "~@/styles/mixin.scss";
|
82
|
+
.upload-container {
|
83
|
+
width: 100%;
|
84
|
+
position: relative;
|
85
|
+
@include clearfix;
|
86
|
+
.image-uploader {
|
87
|
+
width: 60%;
|
88
|
+
float: left;
|
89
|
+
}
|
90
|
+
.image-preview {
|
91
|
+
width: 200px;
|
92
|
+
height: 200px;
|
93
|
+
position: relative;
|
94
|
+
border: 1px dashed #d9d9d9;
|
95
|
+
float: left;
|
96
|
+
margin-left: 50px;
|
97
|
+
.image-preview-wrapper {
|
98
|
+
position: relative;
|
99
|
+
width: 100%;
|
100
|
+
height: 100%;
|
101
|
+
img {
|
102
|
+
width: 100%;
|
103
|
+
height: 100%;
|
104
|
+
}
|
105
|
+
}
|
106
|
+
.image-preview-action {
|
107
|
+
position: absolute;
|
108
|
+
width: 100%;
|
109
|
+
height: 100%;
|
110
|
+
left: 0;
|
111
|
+
top: 0;
|
112
|
+
cursor: default;
|
113
|
+
text-align: center;
|
114
|
+
color: #fff;
|
115
|
+
opacity: 0;
|
116
|
+
font-size: 20px;
|
117
|
+
background-color: rgba(0, 0, 0, .5);
|
118
|
+
transition: opacity .3s;
|
119
|
+
cursor: pointer;
|
120
|
+
text-align: center;
|
121
|
+
line-height: 200px;
|
122
|
+
.el-icon-delete {
|
123
|
+
font-size: 36px;
|
124
|
+
}
|
125
|
+
}
|
126
|
+
&:hover {
|
127
|
+
.image-preview-action {
|
128
|
+
opacity: 1;
|
129
|
+
}
|
130
|
+
}
|
131
|
+
}
|
132
|
+
}
|
133
|
+
|
134
|
+
</style>
|
@@ -0,0 +1,130 @@
|
|
1
|
+
<template>
|
2
|
+
<div class="singleImageUpload2 upload-container">
|
3
|
+
<el-upload
|
4
|
+
:data="dataObj"
|
5
|
+
:multiple="false"
|
6
|
+
:show-file-list="false"
|
7
|
+
:on-success="handleImageSuccess"
|
8
|
+
class="image-uploader"
|
9
|
+
drag
|
10
|
+
action="https://httpbin.org/post"
|
11
|
+
>
|
12
|
+
<i class="el-icon-upload" />
|
13
|
+
<div class="el-upload__text">
|
14
|
+
Drag或<em>点击上传</em>
|
15
|
+
</div>
|
16
|
+
</el-upload>
|
17
|
+
<div v-show="imageUrl.length>0" class="image-preview">
|
18
|
+
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
|
19
|
+
<img :src="imageUrl">
|
20
|
+
<div class="image-preview-action">
|
21
|
+
<i class="el-icon-delete" @click="rmImage" />
|
22
|
+
</div>
|
23
|
+
</div>
|
24
|
+
</div>
|
25
|
+
</div>
|
26
|
+
</template>
|
27
|
+
|
28
|
+
<script>
|
29
|
+
import { getToken } from '@/api/qiniu'
|
30
|
+
|
31
|
+
export default {
|
32
|
+
name: 'SingleImageUpload2',
|
33
|
+
props: {
|
34
|
+
value: {
|
35
|
+
type: String,
|
36
|
+
default: ''
|
37
|
+
}
|
38
|
+
},
|
39
|
+
data() {
|
40
|
+
return {
|
41
|
+
tempUrl: '',
|
42
|
+
dataObj: { token: '', key: '' }
|
43
|
+
}
|
44
|
+
},
|
45
|
+
computed: {
|
46
|
+
imageUrl() {
|
47
|
+
return this.value
|
48
|
+
}
|
49
|
+
},
|
50
|
+
methods: {
|
51
|
+
rmImage() {
|
52
|
+
this.emitInput('')
|
53
|
+
},
|
54
|
+
emitInput(val) {
|
55
|
+
this.$emit('input', val)
|
56
|
+
},
|
57
|
+
handleImageSuccess() {
|
58
|
+
this.emitInput(this.tempUrl)
|
59
|
+
},
|
60
|
+
beforeUpload() {
|
61
|
+
const _self = this
|
62
|
+
return new Promise((resolve, reject) => {
|
63
|
+
getToken().then(response => {
|
64
|
+
const key = response.data.qiniu_key
|
65
|
+
const token = response.data.qiniu_token
|
66
|
+
_self._data.dataObj.token = token
|
67
|
+
_self._data.dataObj.key = key
|
68
|
+
this.tempUrl = response.data.qiniu_url
|
69
|
+
resolve(true)
|
70
|
+
}).catch(() => {
|
71
|
+
reject(false)
|
72
|
+
})
|
73
|
+
})
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}
|
77
|
+
</script>
|
78
|
+
|
79
|
+
<style lang="scss" scoped>
|
80
|
+
.upload-container {
|
81
|
+
width: 100%;
|
82
|
+
height: 100%;
|
83
|
+
position: relative;
|
84
|
+
.image-uploader {
|
85
|
+
height: 100%;
|
86
|
+
}
|
87
|
+
.image-preview {
|
88
|
+
width: 100%;
|
89
|
+
height: 100%;
|
90
|
+
position: absolute;
|
91
|
+
left: 0px;
|
92
|
+
top: 0px;
|
93
|
+
border: 1px dashed #d9d9d9;
|
94
|
+
.image-preview-wrapper {
|
95
|
+
position: relative;
|
96
|
+
width: 100%;
|
97
|
+
height: 100%;
|
98
|
+
img {
|
99
|
+
width: 100%;
|
100
|
+
height: 100%;
|
101
|
+
}
|
102
|
+
}
|
103
|
+
.image-preview-action {
|
104
|
+
position: absolute;
|
105
|
+
width: 100%;
|
106
|
+
height: 100%;
|
107
|
+
left: 0;
|
108
|
+
top: 0;
|
109
|
+
cursor: default;
|
110
|
+
text-align: center;
|
111
|
+
color: #fff;
|
112
|
+
opacity: 0;
|
113
|
+
font-size: 20px;
|
114
|
+
background-color: rgba(0, 0, 0, .5);
|
115
|
+
transition: opacity .3s;
|
116
|
+
cursor: pointer;
|
117
|
+
text-align: center;
|
118
|
+
line-height: 200px;
|
119
|
+
.el-icon-delete {
|
120
|
+
font-size: 36px;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
&:hover {
|
124
|
+
.image-preview-action {
|
125
|
+
opacity: 1;
|
126
|
+
}
|
127
|
+
}
|
128
|
+
}
|
129
|
+
}
|
130
|
+
</style>
|
@@ -0,0 +1,157 @@
|
|
1
|
+
<template>
|
2
|
+
<div class="upload-container">
|
3
|
+
<el-upload
|
4
|
+
:data="dataObj"
|
5
|
+
:multiple="false"
|
6
|
+
:show-file-list="false"
|
7
|
+
:on-success="handleImageSuccess"
|
8
|
+
class="image-uploader"
|
9
|
+
drag
|
10
|
+
action="https://httpbin.org/post"
|
11
|
+
>
|
12
|
+
<i class="el-icon-upload" />
|
13
|
+
<div class="el-upload__text">
|
14
|
+
将文件拖到此处,或<em>点击上传</em>
|
15
|
+
</div>
|
16
|
+
</el-upload>
|
17
|
+
<div class="image-preview image-app-preview">
|
18
|
+
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
|
19
|
+
<img :src="imageUrl">
|
20
|
+
<div class="image-preview-action">
|
21
|
+
<i class="el-icon-delete" @click="rmImage" />
|
22
|
+
</div>
|
23
|
+
</div>
|
24
|
+
</div>
|
25
|
+
<div class="image-preview">
|
26
|
+
<div v-show="imageUrl.length>1" class="image-preview-wrapper">
|
27
|
+
<img :src="imageUrl">
|
28
|
+
<div class="image-preview-action">
|
29
|
+
<i class="el-icon-delete" @click="rmImage" />
|
30
|
+
</div>
|
31
|
+
</div>
|
32
|
+
</div>
|
33
|
+
</div>
|
34
|
+
</template>
|
35
|
+
|
36
|
+
<script>
|
37
|
+
import { getToken } from '@/api/qiniu'
|
38
|
+
|
39
|
+
export default {
|
40
|
+
name: 'SingleImageUpload3',
|
41
|
+
props: {
|
42
|
+
value: {
|
43
|
+
type: String,
|
44
|
+
default: ''
|
45
|
+
}
|
46
|
+
},
|
47
|
+
data() {
|
48
|
+
return {
|
49
|
+
tempUrl: '',
|
50
|
+
dataObj: { token: '', key: '' }
|
51
|
+
}
|
52
|
+
},
|
53
|
+
computed: {
|
54
|
+
imageUrl() {
|
55
|
+
return this.value
|
56
|
+
}
|
57
|
+
},
|
58
|
+
methods: {
|
59
|
+
rmImage() {
|
60
|
+
this.emitInput('')
|
61
|
+
},
|
62
|
+
emitInput(val) {
|
63
|
+
this.$emit('input', val)
|
64
|
+
},
|
65
|
+
handleImageSuccess(file) {
|
66
|
+
this.emitInput(file.files.file)
|
67
|
+
},
|
68
|
+
beforeUpload() {
|
69
|
+
const _self = this
|
70
|
+
return new Promise((resolve, reject) => {
|
71
|
+
getToken().then(response => {
|
72
|
+
const key = response.data.qiniu_key
|
73
|
+
const token = response.data.qiniu_token
|
74
|
+
_self._data.dataObj.token = token
|
75
|
+
_self._data.dataObj.key = key
|
76
|
+
this.tempUrl = response.data.qiniu_url
|
77
|
+
resolve(true)
|
78
|
+
}).catch(err => {
|
79
|
+
console.log(err)
|
80
|
+
reject(false)
|
81
|
+
})
|
82
|
+
})
|
83
|
+
}
|
84
|
+
}
|
85
|
+
}
|
86
|
+
</script>
|
87
|
+
|
88
|
+
<style lang="scss" scoped>
|
89
|
+
@import "~@/styles/mixin.scss";
|
90
|
+
.upload-container {
|
91
|
+
width: 100%;
|
92
|
+
position: relative;
|
93
|
+
@include clearfix;
|
94
|
+
.image-uploader {
|
95
|
+
width: 35%;
|
96
|
+
float: left;
|
97
|
+
}
|
98
|
+
.image-preview {
|
99
|
+
width: 200px;
|
100
|
+
height: 200px;
|
101
|
+
position: relative;
|
102
|
+
border: 1px dashed #d9d9d9;
|
103
|
+
float: left;
|
104
|
+
margin-left: 50px;
|
105
|
+
.image-preview-wrapper {
|
106
|
+
position: relative;
|
107
|
+
width: 100%;
|
108
|
+
height: 100%;
|
109
|
+
img {
|
110
|
+
width: 100%;
|
111
|
+
height: 100%;
|
112
|
+
}
|
113
|
+
}
|
114
|
+
.image-preview-action {
|
115
|
+
position: absolute;
|
116
|
+
width: 100%;
|
117
|
+
height: 100%;
|
118
|
+
left: 0;
|
119
|
+
top: 0;
|
120
|
+
cursor: default;
|
121
|
+
text-align: center;
|
122
|
+
color: #fff;
|
123
|
+
opacity: 0;
|
124
|
+
font-size: 20px;
|
125
|
+
background-color: rgba(0, 0, 0, .5);
|
126
|
+
transition: opacity .3s;
|
127
|
+
cursor: pointer;
|
128
|
+
text-align: center;
|
129
|
+
line-height: 200px;
|
130
|
+
.el-icon-delete {
|
131
|
+
font-size: 36px;
|
132
|
+
}
|
133
|
+
}
|
134
|
+
&:hover {
|
135
|
+
.image-preview-action {
|
136
|
+
opacity: 1;
|
137
|
+
}
|
138
|
+
}
|
139
|
+
}
|
140
|
+
.image-app-preview {
|
141
|
+
width: 320px;
|
142
|
+
height: 180px;
|
143
|
+
position: relative;
|
144
|
+
border: 1px dashed #d9d9d9;
|
145
|
+
float: left;
|
146
|
+
margin-left: 50px;
|
147
|
+
.app-fake-conver {
|
148
|
+
height: 44px;
|
149
|
+
position: absolute;
|
150
|
+
width: 100%; // background: rgba(0, 0, 0, .1);
|
151
|
+
text-align: center;
|
152
|
+
line-height: 64px;
|
153
|
+
color: #fff;
|
154
|
+
}
|
155
|
+
}
|
156
|
+
}
|
157
|
+
</style>
|
@@ -0,0 +1,138 @@
|
|
1
|
+
<template>
|
2
|
+
<div>
|
3
|
+
<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
|
4
|
+
<div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
|
5
|
+
Drop excel file here or
|
6
|
+
<el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
|
7
|
+
Browse
|
8
|
+
</el-button>
|
9
|
+
</div>
|
10
|
+
</div>
|
11
|
+
</template>
|
12
|
+
|
13
|
+
<script>
|
14
|
+
import XLSX from 'xlsx'
|
15
|
+
|
16
|
+
export default {
|
17
|
+
props: {
|
18
|
+
beforeUpload: Function, // eslint-disable-line
|
19
|
+
onSuccess: Function// eslint-disable-line
|
20
|
+
},
|
21
|
+
data() {
|
22
|
+
return {
|
23
|
+
loading: false,
|
24
|
+
excelData: {
|
25
|
+
header: null,
|
26
|
+
results: null
|
27
|
+
}
|
28
|
+
}
|
29
|
+
},
|
30
|
+
methods: {
|
31
|
+
generateData({ header, results }) {
|
32
|
+
this.excelData.header = header
|
33
|
+
this.excelData.results = results
|
34
|
+
this.onSuccess && this.onSuccess(this.excelData)
|
35
|
+
},
|
36
|
+
handleDrop(e) {
|
37
|
+
e.stopPropagation()
|
38
|
+
e.preventDefault()
|
39
|
+
if (this.loading) return
|
40
|
+
const files = e.dataTransfer.files
|
41
|
+
if (files.length !== 1) {
|
42
|
+
this.$message.error('Only support uploading one file!')
|
43
|
+
return
|
44
|
+
}
|
45
|
+
const rawFile = files[0] // only use files[0]
|
46
|
+
|
47
|
+
if (!this.isExcel(rawFile)) {
|
48
|
+
this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
|
49
|
+
return false
|
50
|
+
}
|
51
|
+
this.upload(rawFile)
|
52
|
+
e.stopPropagation()
|
53
|
+
e.preventDefault()
|
54
|
+
},
|
55
|
+
handleDragover(e) {
|
56
|
+
e.stopPropagation()
|
57
|
+
e.preventDefault()
|
58
|
+
e.dataTransfer.dropEffect = 'copy'
|
59
|
+
},
|
60
|
+
handleUpload() {
|
61
|
+
this.$refs['excel-upload-input'].click()
|
62
|
+
},
|
63
|
+
handleClick(e) {
|
64
|
+
const files = e.target.files
|
65
|
+
const rawFile = files[0] // only use files[0]
|
66
|
+
if (!rawFile) return
|
67
|
+
this.upload(rawFile)
|
68
|
+
},
|
69
|
+
upload(rawFile) {
|
70
|
+
this.$refs['excel-upload-input'].value = null // fix can't select the same excel
|
71
|
+
|
72
|
+
if (!this.beforeUpload) {
|
73
|
+
this.readerData(rawFile)
|
74
|
+
return
|
75
|
+
}
|
76
|
+
const before = this.beforeUpload(rawFile)
|
77
|
+
if (before) {
|
78
|
+
this.readerData(rawFile)
|
79
|
+
}
|
80
|
+
},
|
81
|
+
readerData(rawFile) {
|
82
|
+
this.loading = true
|
83
|
+
return new Promise((resolve, reject) => {
|
84
|
+
const reader = new FileReader()
|
85
|
+
reader.onload = e => {
|
86
|
+
const data = e.target.result
|
87
|
+
const workbook = XLSX.read(data, { type: 'array' })
|
88
|
+
const firstSheetName = workbook.SheetNames[0]
|
89
|
+
const worksheet = workbook.Sheets[firstSheetName]
|
90
|
+
const header = this.getHeaderRow(worksheet)
|
91
|
+
const results = XLSX.utils.sheet_to_json(worksheet)
|
92
|
+
this.generateData({ header, results })
|
93
|
+
this.loading = false
|
94
|
+
resolve()
|
95
|
+
}
|
96
|
+
reader.readAsArrayBuffer(rawFile)
|
97
|
+
})
|
98
|
+
},
|
99
|
+
getHeaderRow(sheet) {
|
100
|
+
const headers = []
|
101
|
+
const range = XLSX.utils.decode_range(sheet['!ref'])
|
102
|
+
let C
|
103
|
+
const R = range.s.r
|
104
|
+
/* start in the first row */
|
105
|
+
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
|
106
|
+
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
|
107
|
+
/* find the cell in the first row */
|
108
|
+
let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
|
109
|
+
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
|
110
|
+
headers.push(hdr)
|
111
|
+
}
|
112
|
+
return headers
|
113
|
+
},
|
114
|
+
isExcel(file) {
|
115
|
+
return /\.(xlsx|xls|csv)$/.test(file.name)
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
119
|
+
</script>
|
120
|
+
|
121
|
+
<style scoped>
|
122
|
+
.excel-upload-input{
|
123
|
+
display: none;
|
124
|
+
z-index: -9999;
|
125
|
+
}
|
126
|
+
.drop{
|
127
|
+
border: 2px dashed #bbb;
|
128
|
+
width: 600px;
|
129
|
+
height: 160px;
|
130
|
+
line-height: 160px;
|
131
|
+
margin: 0 auto;
|
132
|
+
font-size: 24px;
|
133
|
+
border-radius: 5px;
|
134
|
+
text-align: center;
|
135
|
+
color: #bbb;
|
136
|
+
position: relative;
|
137
|
+
}
|
138
|
+
</style>
|
@@ -0,0 +1,49 @@
|
|
1
|
+
// Inspired by https://github.com/Inndy/vue-clipboard2
|
2
|
+
const Clipboard = require('clipboard')
|
3
|
+
if (!Clipboard) {
|
4
|
+
throw new Error('you should npm install `clipboard` --save at first ')
|
5
|
+
}
|
6
|
+
|
7
|
+
export default {
|
8
|
+
bind(el, binding) {
|
9
|
+
if (binding.arg === 'success') {
|
10
|
+
el._v_clipboard_success = binding.value
|
11
|
+
} else if (binding.arg === 'error') {
|
12
|
+
el._v_clipboard_error = binding.value
|
13
|
+
} else {
|
14
|
+
const clipboard = new Clipboard(el, {
|
15
|
+
text() { return binding.value },
|
16
|
+
action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
|
17
|
+
})
|
18
|
+
clipboard.on('success', e => {
|
19
|
+
const callback = el._v_clipboard_success
|
20
|
+
callback && callback(e) // eslint-disable-line
|
21
|
+
})
|
22
|
+
clipboard.on('error', e => {
|
23
|
+
const callback = el._v_clipboard_error
|
24
|
+
callback && callback(e) // eslint-disable-line
|
25
|
+
})
|
26
|
+
el._v_clipboard = clipboard
|
27
|
+
}
|
28
|
+
},
|
29
|
+
update(el, binding) {
|
30
|
+
if (binding.arg === 'success') {
|
31
|
+
el._v_clipboard_success = binding.value
|
32
|
+
} else if (binding.arg === 'error') {
|
33
|
+
el._v_clipboard_error = binding.value
|
34
|
+
} else {
|
35
|
+
el._v_clipboard.text = function() { return binding.value }
|
36
|
+
el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
|
37
|
+
}
|
38
|
+
},
|
39
|
+
unbind(el, binding) {
|
40
|
+
if (binding.arg === 'success') {
|
41
|
+
delete el._v_clipboard_success
|
42
|
+
} else if (binding.arg === 'error') {
|
43
|
+
delete el._v_clipboard_error
|
44
|
+
} else {
|
45
|
+
el._v_clipboard.destroy()
|
46
|
+
delete el._v_clipboard
|
47
|
+
}
|
48
|
+
}
|
49
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import Clipboard from './clipboard'
|
2
|
+
|
3
|
+
const install = function(Vue) {
|
4
|
+
Vue.directive('Clipboard', Clipboard)
|
5
|
+
}
|
6
|
+
|
7
|
+
if (window.Vue) {
|
8
|
+
window.clipboard = Clipboard
|
9
|
+
Vue.use(install); // eslint-disable-line
|
10
|
+
}
|
11
|
+
|
12
|
+
Clipboard.install = install
|
13
|
+
export default Clipboard
|
@@ -0,0 +1,77 @@
|
|
1
|
+
export default {
|
2
|
+
bind(el, binding, vnode) {
|
3
|
+
const dialogHeaderEl = el.querySelector('.el-dialog__header')
|
4
|
+
const dragDom = el.querySelector('.el-dialog')
|
5
|
+
dialogHeaderEl.style.cssText += ';cursor:move;'
|
6
|
+
dragDom.style.cssText += ';top:0px;'
|
7
|
+
|
8
|
+
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
9
|
+
const getStyle = (function() {
|
10
|
+
if (window.document.currentStyle) {
|
11
|
+
return (dom, attr) => dom.currentStyle[attr]
|
12
|
+
} else {
|
13
|
+
return (dom, attr) => getComputedStyle(dom, false)[attr]
|
14
|
+
}
|
15
|
+
})()
|
16
|
+
|
17
|
+
dialogHeaderEl.onmousedown = (e) => {
|
18
|
+
// 鼠标按下,计算当前元素距离可视区的距离
|
19
|
+
const disX = e.clientX - dialogHeaderEl.offsetLeft
|
20
|
+
const disY = e.clientY - dialogHeaderEl.offsetTop
|
21
|
+
|
22
|
+
const dragDomWidth = dragDom.offsetWidth
|
23
|
+
const dragDomHeight = dragDom.offsetHeight
|
24
|
+
|
25
|
+
const screenWidth = document.body.clientWidth
|
26
|
+
const screenHeight = document.body.clientHeight
|
27
|
+
|
28
|
+
const minDragDomLeft = dragDom.offsetLeft
|
29
|
+
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
|
30
|
+
|
31
|
+
const minDragDomTop = dragDom.offsetTop
|
32
|
+
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
|
33
|
+
|
34
|
+
// 获取到的值带px 正则匹配替换
|
35
|
+
let styL = getStyle(dragDom, 'left')
|
36
|
+
let styT = getStyle(dragDom, 'top')
|
37
|
+
|
38
|
+
if (styL.includes('%')) {
|
39
|
+
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
|
40
|
+
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
|
41
|
+
} else {
|
42
|
+
styL = +styL.replace(/\px/g, '')
|
43
|
+
styT = +styT.replace(/\px/g, '')
|
44
|
+
}
|
45
|
+
|
46
|
+
document.onmousemove = function(e) {
|
47
|
+
// 通过事件委托,计算移动的距离
|
48
|
+
let left = e.clientX - disX
|
49
|
+
let top = e.clientY - disY
|
50
|
+
|
51
|
+
// 边界处理
|
52
|
+
if (-(left) > minDragDomLeft) {
|
53
|
+
left = -minDragDomLeft
|
54
|
+
} else if (left > maxDragDomLeft) {
|
55
|
+
left = maxDragDomLeft
|
56
|
+
}
|
57
|
+
|
58
|
+
if (-(top) > minDragDomTop) {
|
59
|
+
top = -minDragDomTop
|
60
|
+
} else if (top > maxDragDomTop) {
|
61
|
+
top = maxDragDomTop
|
62
|
+
}
|
63
|
+
|
64
|
+
// 移动当前元素
|
65
|
+
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
|
66
|
+
|
67
|
+
// emit onDrag event
|
68
|
+
vnode.child.$emit('dragDialog')
|
69
|
+
}
|
70
|
+
|
71
|
+
document.onmouseup = function(e) {
|
72
|
+
document.onmousemove = null
|
73
|
+
document.onmouseup = null
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}
|
77
|
+
}
|