Compare commits
46 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
31d9da8b9f | ||
|
600e75d0a2 | ||
|
9ba1ea6933 | ||
|
320e941d9a | ||
|
d0f6d3f1f6 | ||
|
0375542009 | ||
|
03e5f762b3 | ||
|
bd0227feed | ||
|
20aad46416 | ||
|
4fc25241fe | ||
|
6327869106 | ||
|
c861dd10cf | ||
|
0a196f79ba | ||
|
d2d323bb02 | ||
|
66613f0373 | ||
|
6795c26d02 | ||
|
597df4844a | ||
|
1e103cf151 | ||
|
99d53ee0ca | ||
|
f9d510ea78 | ||
|
9fbb028124 | ||
|
9b5f0160af | ||
|
0e4ea0871c | ||
|
88429bd809 | ||
|
62a9565f86 | ||
|
f663b23b29 | ||
|
afd255d5ba | ||
|
b7c8079350 | ||
|
543a9928cf | ||
|
8f37950589 | ||
|
6821eac35b | ||
|
cc5e62d5f5 | ||
|
0cccc636b8 | ||
|
563ce873bd | ||
|
44e94b2d16 | ||
|
a160848367 | ||
|
7099e6a3eb | ||
|
14fee27a92 | ||
|
7003a79ef6 | ||
|
c5faa63ee5 | ||
|
d29a9486a2 | ||
|
01442ce4d7 | ||
|
f28a7149fb | ||
|
51ad902d8f | ||
|
3cff6dcf4c | ||
|
afe975b3c2 |
7
.babelrc
7
.babelrc
@@ -8,5 +8,10 @@
|
||||
}],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": ["transform-vue-jsx", "transform-runtime"]
|
||||
"plugins": ["transform-vue-jsx", "transform-runtime"],
|
||||
"env": {
|
||||
"development":{
|
||||
"plugins": ["dynamic-import-node"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -7,7 +7,7 @@
|
||||
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
||||
</a>
|
||||
<a href="https://github.com/ElemeFE/element">
|
||||
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
|
||||
<img src="https://img.shields.io/badge/element--ui-2.3.0-brightgreen.svg" alt="element-ui">
|
||||
</a>
|
||||
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
||||
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
||||
@@ -30,6 +30,8 @@ English | [简体中文](./README.zh-CN.md)
|
||||
|
||||
- [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/)
|
||||
|
||||
- [Gitter](https://gitter.im/vue-element-admin/discuss)
|
||||
|
||||
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
|
||||
|
||||
- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
|
||||
@@ -39,7 +41,7 @@ English | [简体中文](./README.zh-CN.md)
|
||||
- Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)
|
||||
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||
|
||||
**Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0+**
|
||||
**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+**
|
||||
|
||||
## Preparation
|
||||
|
||||
@@ -70,6 +72,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l
|
||||
- Drag and drop list
|
||||
- Svg Sprite
|
||||
- Dashboard
|
||||
- Guide Page
|
||||
- Mock data
|
||||
- Echarts
|
||||
- Clipboard
|
||||
@@ -86,6 +89,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l
|
||||
- Form example
|
||||
- Two-step login
|
||||
- SplitPane
|
||||
- Drag Dialog
|
||||
- Dropzone
|
||||
- Sticky
|
||||
- CountTo
|
||||
|
@@ -7,7 +7,7 @@
|
||||
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
|
||||
</a>
|
||||
<a href="https://github.com/ElemeFE/element">
|
||||
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
|
||||
<img src="https://img.shields.io/badge/element--ui-2.3.0-brightgreen.svg" alt="element-ui">
|
||||
</a>
|
||||
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
||||
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
||||
@@ -30,6 +30,8 @@
|
||||
|
||||
- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/)
|
||||
|
||||
- [Gitter讨论组](https://gitter.im/vue-element-admin/discuss)
|
||||
|
||||
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
|
||||
|
||||
- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/donate)
|
||||
@@ -38,7 +40,7 @@
|
||||
- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)
|
||||
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||
|
||||
**注意:该项目使用 element-ui@2.0.0+ 版本,所以最低兼容 vue@2.5.0+**
|
||||
**注意:该项目使用 element-ui@2.3.0+ 版本,所以最低兼容 vue@2.5.0+**
|
||||
|
||||
## 前序准备
|
||||
|
||||
@@ -52,7 +54,6 @@
|
||||
- [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
|
||||
- [手摸手,带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
|
||||
|
||||
响应需求,开了一个qq群 `591724180` 方便大家交流
|
||||
|
||||
或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
|
||||
|
||||
@@ -83,6 +84,7 @@
|
||||
- 列表拖拽
|
||||
- Svg Sprite 图标
|
||||
- Dashboard
|
||||
- 引导页
|
||||
- 本地mock数据
|
||||
- Echarts 图表
|
||||
- Clipboard(剪贴复制)
|
||||
@@ -99,6 +101,7 @@
|
||||
- Form example
|
||||
- 二步登录
|
||||
- SplitPane
|
||||
- 拖拽 Dialog
|
||||
- Dropzone
|
||||
- Sticky
|
||||
- CountTo
|
||||
|
29
package.json
29
package.json
@@ -1,28 +1,42 @@
|
||||
{
|
||||
"name": "vue-element-admin",
|
||||
"version": "3.6.4",
|
||||
"version": "3.7.0",
|
||||
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
|
||||
"author": "Pan <panfree23@gmail.com>",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
|
||||
"build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"test": "npm run lint"
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
"element-ui",
|
||||
"admin",
|
||||
"management-system",
|
||||
"admin-template"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/PanJiaChen/vue-element-admin/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.17.1",
|
||||
"clipboard": "1.7.1",
|
||||
"codemirror": "5.32.0",
|
||||
"driver.js": "0.5.2",
|
||||
"dropzone": "5.2.0",
|
||||
"echarts": "3.8.5",
|
||||
"element-ui": "2.0.8",
|
||||
"element-ui": "2.3.2",
|
||||
"file-saver": "1.3.3",
|
||||
"font-awesome": "4.7.0",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsonlint": "1.6.2",
|
||||
"jsonlint": "1.6.3",
|
||||
"jszip": "3.1.5",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"normalize.css": "7.0.0",
|
||||
@@ -37,7 +51,7 @@
|
||||
"vue-multiselect": "2.0.8",
|
||||
"vue-router": "3.0.1",
|
||||
"vue-splitpane": "1.0.2",
|
||||
"vuedraggable": "2.15.0",
|
||||
"vuedraggable": "^2.16.0",
|
||||
"vuex": "3.0.1",
|
||||
"xlsx": "^0.11.16"
|
||||
},
|
||||
@@ -47,6 +61,7 @@
|
||||
"babel-eslint": "8.0.3",
|
||||
"babel-helper-vue-jsx-merge-props": "2.0.3",
|
||||
"babel-loader": "7.1.2",
|
||||
"babel-plugin-dynamic-import-node": "^1.2.0",
|
||||
"babel-plugin-syntax-jsx": "6.18.0",
|
||||
"babel-plugin-transform-runtime": "6.23.0",
|
||||
"babel-plugin-transform-vue-jsx": "3.5.0",
|
||||
@@ -81,7 +96,7 @@
|
||||
"svg-sprite-loader": "3.5.2",
|
||||
"uglifyjs-webpack-plugin": "1.1.3",
|
||||
"url-loader": "0.6.2",
|
||||
"vue-loader": "13.5.0",
|
||||
"vue-loader": "13.7.2",
|
||||
"vue-style-loader": "3.0.3",
|
||||
"vue-template-compiler": "2.5.10",
|
||||
"webpack": "3.10.0",
|
||||
|
@@ -8,10 +8,11 @@ export function fetchList(query) {
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchArticle() {
|
||||
export function fetchArticle(id) {
|
||||
return request({
|
||||
url: '/article/detail',
|
||||
method: 'get'
|
||||
method: 'get',
|
||||
params: { id }
|
||||
})
|
||||
}
|
||||
|
||||
|
@@ -25,14 +25,16 @@ export default {
|
||||
},
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default: {
|
||||
right: '50px',
|
||||
bottom: '50px',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
'border-radius': '4px',
|
||||
'line-height': '45px',
|
||||
background: '#e7eaf1'
|
||||
default: function() {
|
||||
return {
|
||||
right: '50px',
|
||||
bottom: '50px',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
'border-radius': '4px',
|
||||
'line-height': '45px',
|
||||
background: '#e7eaf1'
|
||||
}
|
||||
}
|
||||
},
|
||||
transitionName: {
|
||||
|
89
src/components/Kanban/index.vue
Normal file
89
src/components/Kanban/index.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="board-column">
|
||||
<div class="board-column-header">
|
||||
{{headerText}}
|
||||
</div>
|
||||
<draggable
|
||||
class="board-column-content"
|
||||
:list="list"
|
||||
:options="options">
|
||||
<div class="board-item" v-for="element in list" :key="element.id">
|
||||
{{element.name}} {{element.id}}
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
name: 'dragKanban-demo',
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
props: {
|
||||
headerText: {
|
||||
type: String,
|
||||
default: 'Header'
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.board-column {
|
||||
min-width: 300px;
|
||||
min-height: 100px;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
background: #f0f0f0;
|
||||
border-radius: 3px;
|
||||
|
||||
.board-column-header {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.board-column-content {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border: 10px solid transparent;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.board-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
margin: 5px 0;
|
||||
background-color: #fff;
|
||||
text-align: left;
|
||||
line-height: 54px;
|
||||
padding: 5px 10px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
|
||||
<div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const delta = 15
|
||||
|
||||
export default {
|
||||
name: 'scrollBar',
|
||||
data() {
|
||||
return {
|
||||
top: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleScroll(e) {
|
||||
const eventDelta = e.wheelDelta || -e.deltaY * 3
|
||||
const $container = this.$refs.scrollContainer
|
||||
const $containerHeight = $container.offsetHeight
|
||||
const $wrapper = this.$refs.scrollWrapper
|
||||
const $wrapperHeight = $wrapper.offsetHeight
|
||||
if (eventDelta > 0) {
|
||||
this.top = Math.min(0, this.top + eventDelta)
|
||||
} else {
|
||||
if ($containerHeight - delta < $wrapperHeight) {
|
||||
if (this.top < -($wrapperHeight - $containerHeight + delta)) {
|
||||
this.top = this.top
|
||||
} else {
|
||||
this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
|
||||
}
|
||||
} else {
|
||||
this.top = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import '../../styles/variables.scss';
|
||||
|
||||
.scroll-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $menuBg;
|
||||
.scroll-wrapper {
|
||||
position: absolute;
|
||||
width: 100%!important;
|
||||
}
|
||||
}
|
||||
</style>
|
@@ -28,22 +28,22 @@ export default {
|
||||
return {
|
||||
active: false,
|
||||
position: '',
|
||||
currentTop: '',
|
||||
width: undefined,
|
||||
height: undefined,
|
||||
child: null,
|
||||
stickyHeight: 0
|
||||
isSticky: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.height = this.$el.getBoundingClientRect().height
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
window.addEventListener('resize', this.handleReize)
|
||||
},
|
||||
activated() {
|
||||
this.handleScroll()
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
window.removeEventListener('resize', this.handleReize)
|
||||
},
|
||||
methods: {
|
||||
sticky() {
|
||||
@@ -53,6 +53,7 @@ export default {
|
||||
this.position = 'fixed'
|
||||
this.active = true
|
||||
this.width = this.width + 'px'
|
||||
this.isSticky = true
|
||||
},
|
||||
reset() {
|
||||
if (!this.active) {
|
||||
@@ -61,15 +62,21 @@ export default {
|
||||
this.position = ''
|
||||
this.width = 'auto'
|
||||
this.active = false
|
||||
this.isSticky = false
|
||||
},
|
||||
handleScroll() {
|
||||
this.width = this.$el.getBoundingClientRect().width
|
||||
const offsetTop = this.$el.getBoundingClientRect().top
|
||||
if (offsetTop <= this.stickyTop) {
|
||||
if (offsetTop < this.stickyTop) {
|
||||
this.sticky()
|
||||
return
|
||||
}
|
||||
this.reset()
|
||||
},
|
||||
handleReize() {
|
||||
if (this.isSticky) {
|
||||
this.width = this.$el.getBoundingClientRect().width + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -87,9 +87,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.upload-container {
|
||||
.editor-slide-upload {
|
||||
margin-bottom: 20px;
|
||||
.editor-slide-upload {
|
||||
margin-bottom: 20px;
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="tinymce-container editor-container">
|
||||
<div class="tinymce-container editor-container" :class="{fullscreen:fullscreen}">
|
||||
<textarea class="tinymce-textarea" :id="tinymceId"></textarea>
|
||||
<div class="editor-custom-btn-container">
|
||||
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
|
||||
@@ -43,7 +43,8 @@ export default {
|
||||
return {
|
||||
hasChange: false,
|
||||
hasInit: false,
|
||||
tinymceId: this.id || 'vue-tinymce-' + +new Date()
|
||||
tinymceId: this.id || 'vue-tinymce-' + +new Date(),
|
||||
fullscreen: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -91,6 +92,11 @@ export default {
|
||||
this.hasChange = true
|
||||
this.$emit('input', editor.getContent())
|
||||
})
|
||||
},
|
||||
setup(editor) {
|
||||
editor.on('FullscreenStateChanged', (e) => {
|
||||
_this.fullscreen = e.state
|
||||
})
|
||||
}
|
||||
// 整合七牛上传
|
||||
// images_dataimg_filter(img) {
|
||||
@@ -168,6 +174,10 @@ export default {
|
||||
top: 4px;
|
||||
/*z-index: 2005;*/
|
||||
}
|
||||
.fullscreen .editor-custom-btn-container {
|
||||
z-index: 10000;
|
||||
position: fixed;
|
||||
}
|
||||
.editor-upload-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
@@ -2,6 +2,6 @@
|
||||
// Detail plugins list see https://www.tinymce.com/docs/plugins/
|
||||
// Custom builds see https://www.tinymce.com/download/custom-builds/
|
||||
|
||||
const plugins = ['advlist anchor autolink autoresize autosave bbcode code codesample colorpicker colorpicker contextmenu directionality emoticons fullpage fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
|
||||
const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
|
||||
|
||||
export default plugins
|
||||
|
@@ -1,6 +1,6 @@
|
||||
// Here is a list of the toolbar
|
||||
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
|
||||
|
||||
const toolbar = ['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 fullscreen insertdatetime media table emoticons forecolor backcolor']
|
||||
const toolbar = ['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']
|
||||
|
||||
export default toolbar
|
||||
|
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
|
||||
<input id="excel-upload-input" ref="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
|
||||
<div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
|
||||
Drop excel file here or
|
||||
<el-button style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">browse</el-button>
|
||||
@@ -51,7 +51,9 @@ export default {
|
||||
handkeFileChange(e) {
|
||||
const files = e.target.files
|
||||
const itemFile = files[0] // only use files[0]
|
||||
if (!itemFile) return
|
||||
this.readerData(itemFile)
|
||||
this.$refs['excel-upload-input'].value = null // fix can't select the same excel
|
||||
},
|
||||
readerData(itemFile) {
|
||||
const reader = new FileReader()
|
||||
|
77
src/directive/el-dragDialog/drag.js
Normal file
77
src/directive/el-dragDialog/drag.js
Normal file
@@ -0,0 +1,77 @@
|
||||
export default{
|
||||
bind(el, binding, vnode) {
|
||||
const dialogHeaderEl = el.querySelector('.el-dialog__header')
|
||||
const dragDom = el.querySelector('.el-dialog')
|
||||
dialogHeaderEl.style.cssText += ';cursor:move;'
|
||||
dragDom.style.cssText += ';top:0px;'
|
||||
|
||||
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
||||
const getStyle = (function() {
|
||||
if (window.document.currentStyle) {
|
||||
return (dom, attr) => dom.currentStyle[attr]
|
||||
} else {
|
||||
return (dom, attr) => getComputedStyle(dom, false)[attr]
|
||||
}
|
||||
})()
|
||||
|
||||
dialogHeaderEl.onmousedown = (e) => {
|
||||
// 鼠标按下,计算当前元素距离可视区的距离
|
||||
const disX = e.clientX - dialogHeaderEl.offsetLeft
|
||||
const disY = e.clientY - dialogHeaderEl.offsetTop
|
||||
|
||||
const dragDomWidth = dragDom.offsetWidth
|
||||
const dragDomheight = dragDom.offsetHeight
|
||||
|
||||
const screenWidth = document.body.clientWidth
|
||||
const screenHeight = document.body.clientHeight
|
||||
|
||||
const minDragDomLeft = dragDom.offsetLeft
|
||||
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
|
||||
|
||||
const minDragDomTop = dragDom.offsetTop
|
||||
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
|
||||
|
||||
// 获取到的值带px 正则匹配替换
|
||||
let styL = getStyle(dragDom, 'left')
|
||||
let styT = getStyle(dragDom, 'top')
|
||||
|
||||
if (styL.includes('%')) {
|
||||
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
|
||||
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
|
||||
} else {
|
||||
styL = +styL.replace(/\px/g, '')
|
||||
styT = +styT.replace(/\px/g, '')
|
||||
}
|
||||
|
||||
document.onmousemove = function(e) {
|
||||
// 通过事件委托,计算移动的距离
|
||||
let left = e.clientX - disX
|
||||
let top = e.clientY - disY
|
||||
|
||||
// 边界处理
|
||||
if (-(left) > minDragDomLeft) {
|
||||
left = -minDragDomLeft
|
||||
} else if (left > maxDragDomLeft) {
|
||||
left = maxDragDomLeft
|
||||
}
|
||||
|
||||
if (-(top) > minDragDomTop) {
|
||||
top = -minDragDomTop
|
||||
} else if (top > maxDragDomTop) {
|
||||
top = maxDragDomTop
|
||||
}
|
||||
|
||||
// 移动当前元素
|
||||
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
|
||||
|
||||
// emit onDrag event
|
||||
vnode.child.$emit('dragDialog')
|
||||
}
|
||||
|
||||
document.onmouseup = function(e) {
|
||||
document.onmousemove = null
|
||||
document.onmouseup = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
13
src/directive/el-dragDialog/index.js
Normal file
13
src/directive/el-dragDialog/index.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import drag from './drag'
|
||||
|
||||
const install = function(Vue) {
|
||||
Vue.directive('el-drag-dialog', drag)
|
||||
}
|
||||
|
||||
if (window.Vue) {
|
||||
window['el-drag-dialog'] = drag
|
||||
Vue.use(install); // eslint-disable-line
|
||||
}
|
||||
|
||||
drag.install = install
|
||||
export default drag
|
13
src/directive/permission/index.js
Normal file
13
src/directive/permission/index.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import permission from './permission'
|
||||
|
||||
const install = function(Vue) {
|
||||
Vue.directive('permission', permission)
|
||||
}
|
||||
|
||||
if (window.Vue) {
|
||||
window['permission'] = permission
|
||||
Vue.use(install); // eslint-disable-line
|
||||
}
|
||||
|
||||
permission.install = install
|
||||
export default permission
|
23
src/directive/permission/permission.js
Normal file
23
src/directive/permission/permission.js
Normal file
@@ -0,0 +1,23 @@
|
||||
|
||||
import store from '@/store'
|
||||
|
||||
export default{
|
||||
inserted(el, binding, vnode) {
|
||||
const { value } = binding
|
||||
const roles = store.getters && store.getters.roles
|
||||
|
||||
if (value && value instanceof Array && value.length > 0) {
|
||||
const permissionRoles = value
|
||||
|
||||
const hasPermission = roles.some(role => {
|
||||
return permissionRoles.includes(role)
|
||||
})
|
||||
|
||||
if (!hasPermission) {
|
||||
el.parentNode && el.parentNode.removeChild(el)
|
||||
}
|
||||
} else {
|
||||
throw new Error(`need roles! Like v-permission="['admin','editor']"`)
|
||||
}
|
||||
}
|
||||
}
|
@@ -1,3 +1,6 @@
|
||||
// set function parseTime,formatTime to filter
|
||||
export { parseTime, formatTime } from '@/utils'
|
||||
|
||||
function pluralize(time, label) {
|
||||
if (time === 1) {
|
||||
return time + label
|
||||
@@ -16,67 +19,8 @@ export function timeAgo(time) {
|
||||
}
|
||||
}
|
||||
|
||||
export function parseTime(time, cFormat) {
|
||||
if (arguments.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
if ((time + '').length === 10) {
|
||||
time = +time * 1000
|
||||
}
|
||||
|
||||
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
|
||||
let date
|
||||
if (typeof time === 'object') {
|
||||
date = time
|
||||
} else {
|
||||
date = new Date(parseInt(time))
|
||||
}
|
||||
const formatObj = {
|
||||
y: date.getFullYear(),
|
||||
m: date.getMonth() + 1,
|
||||
d: date.getDate(),
|
||||
h: date.getHours(),
|
||||
i: date.getMinutes(),
|
||||
s: date.getSeconds(),
|
||||
a: date.getDay()
|
||||
}
|
||||
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
|
||||
let value = formatObj[key]
|
||||
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
|
||||
if (result.length > 0 && value < 10) {
|
||||
value = '0' + value
|
||||
}
|
||||
return value || 0
|
||||
})
|
||||
return time_str
|
||||
}
|
||||
|
||||
export function formatTime(time, option) {
|
||||
time = +time * 1000
|
||||
const d = new Date(time)
|
||||
const now = Date.now()
|
||||
|
||||
const diff = (now - d) / 1000
|
||||
|
||||
if (diff < 30) {
|
||||
return '刚刚'
|
||||
} else if (diff < 3600) { // less 1 hour
|
||||
return Math.ceil(diff / 60) + '分钟前'
|
||||
} else if (diff < 3600 * 24) {
|
||||
return Math.ceil(diff / 3600) + '小时前'
|
||||
} else if (diff < 3600 * 24 * 2) {
|
||||
return '1天前'
|
||||
}
|
||||
if (option) {
|
||||
return parseTime(time, option)
|
||||
} else {
|
||||
return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
|
||||
}
|
||||
}
|
||||
|
||||
/* 数字 格式化*/
|
||||
export function nFormatter(num, digits) {
|
||||
export function numberFormatter(num, digits) {
|
||||
const si = [
|
||||
{ value: 1E18, symbol: 'E' },
|
||||
{ value: 1E15, symbol: 'P' },
|
||||
@@ -93,12 +37,6 @@ export function nFormatter(num, digits) {
|
||||
return num.toString()
|
||||
}
|
||||
|
||||
export function html2Text(val) {
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = val
|
||||
return div.textContent || div.innerText
|
||||
}
|
||||
|
||||
export function toThousandslsFilter(num) {
|
||||
return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
|
||||
}
|
||||
|
1
src/icons/svg/edit.svg
Normal file
1
src/icons/svg/edit.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1525760397212" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2919" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M860 504c-19.9 0-36 16.1-36 36 0 1.4 0.1 2.7 0.2 4h-0.2v344H136V200h376c19.9 0 36-16.1 36-36s-16.1-36-36-36H136c-39.8 0-72 32.2-72 72v688c0 39.8 32.2 72 72 72h688c39.8 0 72-32.2 72-72V544h-0.2c0.1-1.3 0.2-2.6 0.2-4 0-19.9-16.1-36-36-36z" p-id="2920"></path><path d="M1002.7 100.3L923.4 21c-28.1-28.1-73.9-27.9-102 0.2L424.2 418.4c-2.9 2.9-5.2 6.4-6.8 10.2L317.6 664c-5.6 13.2-1.7 26.5 6.8 35.1 8.5 8.6 21.9 12.5 35.2 6.9l235.5-99.7c3.8-1.6 7.2-3.9 10.2-6.8l397.2-397.2c28.1-28.1 28.3-73.9 0.2-102zM559.8 543l-137.4 58.2 58.2-137.4L759.4 185l79.2 79.2L559.8 543z m391.7-391.7l-62 62-79.2-79.2 62-62 0.2-0.2 79.2 79.2-0.2 0.2z" p-id="2921"></path></svg>
|
After Width: | Height: | Size: 1.0 KiB |
1
src/icons/svg/guide.svg
Normal file
1
src/icons/svg/guide.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1526033837694" class="icon" style="" viewBox="0 0 1117 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10274" xmlns:xlink="http://www.w3.org/1999/xlink" width="218.1640625" height="200"><defs><style type="text/css"></style></defs><path d="M53.865 558.08l289.92 121.6 560-492.16-491.52 530.56 371.84 140.8c8.96 3.2 19.2-1.28 22.4-10.24V848l260.48-816.64-1014.4 494.72c-8.96 4.48-12.16 14.72-8.32 23.68 2.56 3.84 5.76 7.04 9.6 8.32z m357.76 434.56l144.64-155.52-144.64-58.88v214.4z" p-id="10275"></path></svg>
|
After Width: | Height: | Size: 664 B |
1
src/icons/svg/list.svg
Normal file
1
src/icons/svg/list.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1525761666409" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10880" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M107.2 212.8m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10881"></path><path d="M980.8 145.6 297.6 145.6c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C996.8 152 988.8 145.6 980.8 145.6z" p-id="10882"></path><path d="M96 497.6m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10883"></path><path d="M968 430.4 284.8 430.4c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C984 438.4 977.6 430.4 968 430.4z" p-id="10884"></path><path d="M96 795.2m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10885"></path><path d="M968 728 284.8 728c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C984 736 977.6 728 968 728z" p-id="10886"></path></svg>
|
After Width: | Height: | Size: 1.1 KiB |
@@ -3,7 +3,10 @@ export default {
|
||||
dashboard: 'Dashboard',
|
||||
introduction: 'Introduction',
|
||||
documentation: 'Documentation',
|
||||
guide: 'Guide',
|
||||
permission: 'Permission',
|
||||
pagePermission: 'Page Permission',
|
||||
directivePermission: 'Directive Permission',
|
||||
icons: 'Icons',
|
||||
components: 'Components',
|
||||
componentIndex: 'Introduction',
|
||||
@@ -18,6 +21,8 @@ export default {
|
||||
countTo: 'CountTo',
|
||||
componentMixin: 'Mixin',
|
||||
backToTop: 'BackToTop',
|
||||
dragDialog: 'Drag Dialog',
|
||||
dragKanban: 'Drag Kanban',
|
||||
charts: 'Charts',
|
||||
keyboardChart: 'Keyboard Chart',
|
||||
lineChart: 'Line Chart',
|
||||
@@ -32,8 +37,9 @@ export default {
|
||||
customTreeTable: 'Custom TreeTable',
|
||||
tab: 'Tab',
|
||||
form: 'Form',
|
||||
createForm: 'Create Form',
|
||||
editForm: 'Edit Form',
|
||||
createArticle: 'Create Article',
|
||||
editArticle: 'Edit Article',
|
||||
articleList: 'Article List',
|
||||
errorPages: 'Error Pages',
|
||||
page401: '401',
|
||||
page404: '404',
|
||||
@@ -72,6 +78,10 @@ export default {
|
||||
roles: 'Your roles',
|
||||
switchRoles: 'Switch roles'
|
||||
},
|
||||
guide: {
|
||||
description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
|
||||
button: 'Show Guide'
|
||||
},
|
||||
components: {
|
||||
documentation: 'Documentation',
|
||||
tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
|
||||
|
@@ -3,7 +3,10 @@ export default {
|
||||
dashboard: '首页',
|
||||
introduction: '简述',
|
||||
documentation: '文档',
|
||||
guide: '引导页',
|
||||
permission: '权限测试页',
|
||||
pagePermission: '页面权限',
|
||||
directivePermission: '指令权限',
|
||||
icons: '图标',
|
||||
components: '组件',
|
||||
componentIndex: '介绍',
|
||||
@@ -18,6 +21,8 @@ export default {
|
||||
countTo: 'CountTo',
|
||||
componentMixin: '小组件',
|
||||
backToTop: '返回顶部',
|
||||
dragDialog: '拖拽 Dialog',
|
||||
dragKanban: '可拖拽看板',
|
||||
charts: '图表',
|
||||
keyboardChart: '键盘图表',
|
||||
lineChart: '折线图',
|
||||
@@ -32,8 +37,9 @@ export default {
|
||||
customTreeTable: '自定义树表',
|
||||
tab: 'Tab',
|
||||
form: '表单',
|
||||
createForm: '创建表单',
|
||||
editForm: '编辑表单',
|
||||
createArticle: '创建文章',
|
||||
editArticle: '编辑文章',
|
||||
articleList: '文章列表',
|
||||
errorPages: '错误页面',
|
||||
page401: '401',
|
||||
page404: '404',
|
||||
@@ -72,6 +78,10 @@ export default {
|
||||
roles: '你的权限',
|
||||
switchRoles: '切换权限'
|
||||
},
|
||||
guide: {
|
||||
description: '引导页对于一些第一次进入项目的人很有用,你可以简单介绍下项目的功能。本 Demo 是基于',
|
||||
button: '打开引导'
|
||||
},
|
||||
components: {
|
||||
documentation: '文档',
|
||||
tinymceTips: '富文本是管理后台一个核心的功能,但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路,市面上常见的富文本都基本用过了,最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
|
||||
|
@@ -4,6 +4,9 @@ import { param2Obj } from '@/utils'
|
||||
const List = []
|
||||
const count = 100
|
||||
|
||||
const baseContent = '<p>我是测试数据我是测试数据</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
|
||||
const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
List.push(Mock.mock({
|
||||
id: '@increment',
|
||||
@@ -11,12 +14,17 @@ for (let i = 0; i < count; i++) {
|
||||
author: '@first',
|
||||
reviewer: '@first',
|
||||
title: '@title(5, 10)',
|
||||
content_short: '我是测试数据',
|
||||
content: baseContent,
|
||||
forecast: '@float(0, 100, 2, 2)',
|
||||
importance: '@integer(1, 3)',
|
||||
'type|1': ['CN', 'US', 'JP', 'EU'],
|
||||
'status|1': ['published', 'draft', 'deleted'],
|
||||
display_time: '@datetime',
|
||||
pageviews: '@integer(300, 5000)'
|
||||
comment_disabled: true,
|
||||
pageviews: '@integer(300, 5000)',
|
||||
image_uri,
|
||||
platforms: ['a-platform']
|
||||
}))
|
||||
}
|
||||
|
||||
@@ -45,22 +53,14 @@ export default {
|
||||
getPv: () => ({
|
||||
pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
|
||||
}),
|
||||
getArticle: () => ({
|
||||
id: 120000000001,
|
||||
author: { key: 'mockPan' },
|
||||
source_name: '原创作者',
|
||||
category_item: [{ key: 'global', name: '全球' }],
|
||||
comment_disabled: true,
|
||||
content: '<p>我是测试数据我是测试数据</p><p><img class="wscnph" src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943" data-wscntype="image" data-wscnh="300" data-wscnw="400" data-mce-src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>"',
|
||||
content_short: '我是测试数据',
|
||||
display_time: +new Date(),
|
||||
image_uri: 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3',
|
||||
platforms: ['a-platform'],
|
||||
source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
|
||||
status: 'published',
|
||||
tags: [],
|
||||
title: 'vue-element-admin'
|
||||
}),
|
||||
getArticle: (config) => {
|
||||
const { id } = param2Obj(config.url)
|
||||
for (const article of List) {
|
||||
if (article.id === +id) {
|
||||
return article
|
||||
}
|
||||
}
|
||||
},
|
||||
createArticle: () => ({
|
||||
data: 'success'
|
||||
}),
|
||||
|
@@ -31,10 +31,10 @@ router.beforeEach((to, from, next) => {
|
||||
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
|
||||
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
|
||||
})
|
||||
}).catch(() => {
|
||||
}).catch((err) => {
|
||||
store.dispatch('FedLogOut').then(() => {
|
||||
Message.error('Verification failed, please login again')
|
||||
next({ path: '/login' })
|
||||
Message.error(err || 'Verification failed, please login again')
|
||||
next({ path: '/' })
|
||||
})
|
||||
})
|
||||
} else {
|
||||
|
@@ -1,13 +1,10 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
const _import = require('./_import_' + process.env.NODE_ENV)
|
||||
// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
|
||||
// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
/* Layout */
|
||||
import Layout from '../views/layout/Layout'
|
||||
import Layout from '@/views/layout/Layout'
|
||||
|
||||
/** note: submenu only apppear when children.length>=1
|
||||
* detail see https://panjiachen.github.io/vue-element-admin-site/#/router-and-nav?id=sidebar
|
||||
@@ -28,17 +25,17 @@ import Layout from '../views/layout/Layout'
|
||||
}
|
||||
**/
|
||||
export const constantRouterMap = [
|
||||
{ path: '/login', component: _import('login/index'), hidden: true },
|
||||
{ path: '/authredirect', component: _import('login/authredirect'), hidden: true },
|
||||
{ path: '/404', component: _import('errorPage/404'), hidden: true },
|
||||
{ path: '/401', component: _import('errorPage/401'), hidden: true },
|
||||
{ path: '/login', component: () => import('@/views/login/index'), hidden: true },
|
||||
{ path: '/authredirect', component: () => import('@/views/login/authredirect'), hidden: true },
|
||||
{ path: '/404', component: () => import('@/views/errorPage/404'), hidden: true },
|
||||
{ path: '/401', component: () => import('@/views/errorPage/401'), hidden: true },
|
||||
{
|
||||
path: '',
|
||||
component: Layout,
|
||||
redirect: 'dashboard',
|
||||
children: [{
|
||||
path: 'dashboard',
|
||||
component: _import('dashboard/index'),
|
||||
component: () => import('@/views/dashboard/index'),
|
||||
name: 'dashboard',
|
||||
meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
|
||||
}]
|
||||
@@ -49,10 +46,21 @@ export const constantRouterMap = [
|
||||
redirect: '/documentation/index',
|
||||
children: [{
|
||||
path: 'index',
|
||||
component: _import('documentation/index'),
|
||||
component: () => import('@/views/documentation/index'),
|
||||
name: 'documentation',
|
||||
meta: { title: 'documentation', icon: 'documentation', noCache: true }
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/guide',
|
||||
component: Layout,
|
||||
redirect: '/guide/index',
|
||||
children: [{
|
||||
path: 'index',
|
||||
component: () => import('@/views/guide/index'),
|
||||
name: 'guide',
|
||||
meta: { title: 'guide', icon: 'guide', noCache: true }
|
||||
}]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -67,16 +75,28 @@ export const asyncRouterMap = [
|
||||
path: '/permission',
|
||||
component: Layout,
|
||||
redirect: '/permission/index',
|
||||
meta: { roles: ['admin'] }, // you can set roles in root nav
|
||||
alwaysShow: true, // will always show the root menu
|
||||
meta: {
|
||||
title: 'permission',
|
||||
icon: 'lock',
|
||||
roles: ['admin', 'editor'] // you can set roles in root nav
|
||||
},
|
||||
children: [{
|
||||
path: 'index',
|
||||
component: _import('permission/index'),
|
||||
name: 'permission',
|
||||
path: 'page',
|
||||
component: () => import('@/views/permission/page'),
|
||||
name: 'pagePermission',
|
||||
meta: {
|
||||
title: 'permission',
|
||||
icon: 'lock',
|
||||
title: 'pagePermission',
|
||||
roles: ['admin'] // or you can only set roles in sub nav
|
||||
}
|
||||
}, {
|
||||
path: 'directive',
|
||||
component: () => import('@/views/permission/directive'),
|
||||
name: 'directivePermission',
|
||||
meta: {
|
||||
title: 'directivePermission'
|
||||
// if do not set roles, means: this page does not require permission
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
@@ -85,7 +105,7 @@ export const asyncRouterMap = [
|
||||
component: Layout,
|
||||
children: [{
|
||||
path: 'index',
|
||||
component: _import('svg-icons/index'),
|
||||
component: () => import('@/views/svg-icons/index'),
|
||||
name: 'icons',
|
||||
meta: { title: 'icons', icon: 'icon', noCache: true }
|
||||
}]
|
||||
@@ -101,17 +121,19 @@ export const asyncRouterMap = [
|
||||
icon: 'component'
|
||||
},
|
||||
children: [
|
||||
{ path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
|
||||
{ path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
|
||||
{ path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
|
||||
{ path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
|
||||
{ path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
|
||||
{ path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
|
||||
{ path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
|
||||
{ path: 'sticky', component: _import('components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
|
||||
{ path: 'count-to', component: _import('components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
|
||||
{ path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
|
||||
{ path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }}
|
||||
{ path: 'tinymce', component: () => import('@/views/components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
|
||||
{ path: 'markdown', component: () => import('@/views/components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
|
||||
{ path: 'json-editor', component: () => import('@/views/components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
|
||||
{ path: 'splitpane', component: () => import('@/views/components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
|
||||
{ path: 'avatar-upload', component: () => import('@/views/components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
|
||||
{ path: 'dropzone', component: () => import('@/views/components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
|
||||
{ path: 'sticky', component: () => import('@/views/components-demo/sticky'), name: 'sticky-demo', meta: { title: 'sticky' }},
|
||||
{ path: 'count-to', component: () => import('@/views/components-demo/countTo'), name: 'countTo-demo', meta: { title: 'countTo' }},
|
||||
{ path: 'mixin', component: () => import('@/views/components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
|
||||
{ path: 'back-to-top', component: () => import('@/views/components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }},
|
||||
{ path: 'drag-dialog', component: () => import('@/views/components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }},
|
||||
{ path: 'dnd-list', component: () => import('@/views/components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
|
||||
{ path: 'drag-kanban', component: () => import('@/views/components-demo/dragKanban'), name: 'dragKanban-demo', meta: { title: 'dragKanban' }}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -125,56 +147,55 @@ export const asyncRouterMap = [
|
||||
icon: 'chart'
|
||||
},
|
||||
children: [
|
||||
{ path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboardChart', meta: { title: 'keyboardChart', noCache: true }},
|
||||
{ path: 'line', component: _import('charts/line'), name: 'lineChart', meta: { title: 'lineChart', noCache: true }},
|
||||
{ path: 'mixchart', component: _import('charts/mixChart'), name: 'mixChart', meta: { title: 'mixChart', noCache: true }}
|
||||
{ path: 'keyboard', component: () => import('@/views/charts/keyboard'), name: 'keyboardChart', meta: { title: 'keyboardChart', noCache: true }},
|
||||
{ path: 'line', component: () => import('@/views/charts/line'), name: 'lineChart', meta: { title: 'lineChart', noCache: true }},
|
||||
{ path: 'mixchart', component: () => import('@/views/charts/mixChart'), name: 'mixChart', meta: { title: 'mixChart', noCache: true }}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/tab',
|
||||
component: Layout,
|
||||
children: [{
|
||||
path: 'index',
|
||||
component: () => import('@/views/tab/index'),
|
||||
name: 'tab',
|
||||
meta: { title: 'tab', icon: 'tab' }
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/table',
|
||||
component: Layout,
|
||||
redirect: '/table/complex-table',
|
||||
name: 'table',
|
||||
meta: {
|
||||
title: 'Table',
|
||||
icon: 'table'
|
||||
},
|
||||
children: [
|
||||
{ path: 'dynamic-table', component: () => import('@/views/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
|
||||
{ path: 'drag-table', component: () => import('@/views/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
|
||||
{ path: 'inline-edit-table', component: () => import('@/views/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
|
||||
{ path: 'tree-table', component: () => import('@/views/table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }},
|
||||
{ path: 'custom-tree-table', component: () => import('@/views/table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }},
|
||||
{ path: 'complex-table', component: () => import('@/views/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/example',
|
||||
component: Layout,
|
||||
redirect: '/example/table/complex-table',
|
||||
redirect: '/example/list',
|
||||
name: 'example',
|
||||
meta: {
|
||||
title: 'example',
|
||||
icon: 'example'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/example/table',
|
||||
component: _import('example/table/index'),
|
||||
redirect: '/example/table/complex-table',
|
||||
name: 'Table',
|
||||
meta: {
|
||||
title: 'Table',
|
||||
icon: 'table'
|
||||
},
|
||||
children: [
|
||||
{ path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
|
||||
{ path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
|
||||
{ path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
|
||||
{ path: 'tree-table', component: _import('example/table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }},
|
||||
{ path: 'custom-tree-table', component: _import('example/table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }},
|
||||
{ path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
|
||||
]
|
||||
},
|
||||
{ path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'tab' }}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/form',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
name: 'form',
|
||||
meta: {
|
||||
title: 'form',
|
||||
icon: 'form'
|
||||
},
|
||||
children: [
|
||||
{ path: 'create-form', component: _import('form/create'), name: 'createForm', meta: { title: 'createForm', icon: 'table' }},
|
||||
{ path: 'edit-form', component: _import('form/edit'), name: 'editForm', meta: { title: 'editForm', icon: 'table' }}
|
||||
{ path: 'create', component: () => import('@/views/example/create'), name: 'createArticle', meta: { title: 'createArticle', icon: 'edit' }},
|
||||
{ path: 'edit/:id(\\d+)', component: () => import('@/views/example/edit'), name: 'editArticle', meta: { title: 'editArticle', noCache: true }, hidden: true },
|
||||
{ path: 'list', component: () => import('@/views/example/list'), name: 'articleList', meta: { title: 'articleList', icon: 'list' }}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -188,8 +209,8 @@ export const asyncRouterMap = [
|
||||
icon: '404'
|
||||
},
|
||||
children: [
|
||||
{ path: '401', component: _import('errorPage/401'), name: 'page401', meta: { title: 'page401', noCache: true }},
|
||||
{ path: '404', component: _import('errorPage/404'), name: 'page404', meta: { title: 'page404', noCache: true }}
|
||||
{ path: '401', component: () => import('@/views/errorPage/401'), name: 'page401', meta: { title: 'page401', noCache: true }},
|
||||
{ path: '404', component: () => import('@/views/errorPage/404'), name: 'page404', meta: { title: 'page404', noCache: true }}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -197,7 +218,7 @@ export const asyncRouterMap = [
|
||||
path: '/error-log',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
children: [{ path: 'log', component: _import('errorLog/index'), name: 'errorLog', meta: { title: 'errorLog', icon: 'bug' }}]
|
||||
children: [{ path: 'log', component: () => import('@/views/errorLog/index'), name: 'errorLog', meta: { title: 'errorLog', icon: 'bug' }}]
|
||||
},
|
||||
|
||||
{
|
||||
@@ -210,9 +231,9 @@ export const asyncRouterMap = [
|
||||
icon: 'excel'
|
||||
},
|
||||
children: [
|
||||
{ path: 'export-excel', component: _import('excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }},
|
||||
{ path: 'export-selected-excel', component: _import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }},
|
||||
{ path: 'upload-excel', component: _import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }}
|
||||
{ path: 'export-excel', component: () => import('@/views/excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }},
|
||||
{ path: 'export-selected-excel', component: () => import('@/views/excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }},
|
||||
{ path: 'upload-excel', component: () => import('@/views/excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -222,27 +243,27 @@ export const asyncRouterMap = [
|
||||
redirect: '/zip/download',
|
||||
alwaysShow: true,
|
||||
meta: { title: 'zip', icon: 'zip' },
|
||||
children: [{ path: 'download', component: _import('zip/index'), name: 'exportZip', meta: { title: 'exportZip' }}]
|
||||
children: [{ path: 'download', component: () => import('@/views/zip/index'), name: 'exportZip', meta: { title: 'exportZip' }}]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/theme',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
children: [{ path: 'index', component: _import('theme/index'), name: 'theme', meta: { title: 'theme', icon: 'theme' }}]
|
||||
children: [{ path: 'index', component: () => import('@/views/theme/index'), name: 'theme', meta: { title: 'theme', icon: 'theme' }}]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/clipboard',
|
||||
component: Layout,
|
||||
redirect: 'noredirect',
|
||||
children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboardDemo', meta: { title: 'clipboardDemo', icon: 'clipboard' }}]
|
||||
children: [{ path: 'index', component: () => import('@/views/clipboard/index'), name: 'clipboardDemo', meta: { title: 'clipboardDemo', icon: 'clipboard' }}]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/i18n',
|
||||
component: Layout,
|
||||
children: [{ path: 'index', component: _import('i18n-demo/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}]
|
||||
children: [{ path: 'index', component: () => import('@/views/i18n-demo/index'), name: 'i18n', meta: { title: 'i18n', icon: 'international' }}]
|
||||
},
|
||||
|
||||
{ path: '*', redirect: '/404', hidden: true }
|
||||
|
@@ -1,6 +1,7 @@
|
||||
const getters = {
|
||||
sidebar: state => state.app.sidebar,
|
||||
language: state => state.app.language,
|
||||
device: state => state.app.device,
|
||||
visitedViews: state => state.tagsView.visitedViews,
|
||||
cachedViews: state => state.tagsView.cachedViews,
|
||||
token: state => state.user.token,
|
||||
|
@@ -3,8 +3,10 @@ import Cookies from 'js-cookie'
|
||||
const app = {
|
||||
state: {
|
||||
sidebar: {
|
||||
opened: !+Cookies.get('sidebarStatus')
|
||||
opened: !+Cookies.get('sidebarStatus'),
|
||||
withoutAnimation: false
|
||||
},
|
||||
device: 'desktop',
|
||||
language: Cookies.get('language') || 'en'
|
||||
},
|
||||
mutations: {
|
||||
@@ -15,6 +17,15 @@ const app = {
|
||||
Cookies.set('sidebarStatus', 0)
|
||||
}
|
||||
state.sidebar.opened = !state.sidebar.opened
|
||||
state.sidebar.withoutAnimation = false
|
||||
},
|
||||
CLOSE_SIDEBAR: (state, withoutAnimation) => {
|
||||
Cookies.set('sidebarStatus', 1)
|
||||
state.sidebar.opened = false
|
||||
state.sidebar.withoutAnimation = withoutAnimation
|
||||
},
|
||||
TOGGLE_DEVICE: (state, device) => {
|
||||
state.device = device
|
||||
},
|
||||
SET_LANGUAGE: (state, language) => {
|
||||
state.language = language
|
||||
@@ -25,6 +36,12 @@ const app = {
|
||||
toggleSideBar({ commit }) {
|
||||
commit('TOGGLE_SIDEBAR')
|
||||
},
|
||||
closeSideBar({ commit }, { withoutAnimation }) {
|
||||
commit('CLOSE_SIDEBAR', withoutAnimation)
|
||||
},
|
||||
toggleDevice({ commit }, device) {
|
||||
commit('TOGGLE_DEVICE', device)
|
||||
},
|
||||
setLanguage({ commit }, language) {
|
||||
commit('SET_LANGUAGE', language)
|
||||
}
|
||||
|
@@ -67,7 +67,13 @@ const user = {
|
||||
reject('error')
|
||||
}
|
||||
const data = response.data
|
||||
commit('SET_ROLES', data.roles)
|
||||
|
||||
if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
|
||||
commit('SET_ROLES', data.roles)
|
||||
} else {
|
||||
reject('getInfo: roles must be a non-null array !')
|
||||
}
|
||||
|
||||
commit('SET_NAME', data.name)
|
||||
commit('SET_AVATAR', data.avatar)
|
||||
commit('SET_INTRODUCTION', data.introduction)
|
||||
|
@@ -73,3 +73,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//dropdown
|
||||
.el-dropdown-menu{
|
||||
a{
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
@@ -2,99 +2,117 @@
|
||||
// 主体区域
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
transition: margin-left 0.28s;
|
||||
transition: margin-left .28s;
|
||||
margin-left: 180px;
|
||||
} // 侧边栏
|
||||
}
|
||||
// 侧边栏
|
||||
.sidebar-container {
|
||||
transition: width 0.28s;
|
||||
width: 180px!important;
|
||||
width: 180px !important;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
//reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||
}
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden!important;
|
||||
.el-scrollbar__view {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.el-menu {
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.hideSidebar {
|
||||
.sidebar-container,.sidebar-container .el-menu {
|
||||
width: 36px!important;
|
||||
// overflow: inherit;
|
||||
.sidebar-container {
|
||||
width: 36px !important;
|
||||
}
|
||||
.main-container {
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
.hideSidebar {
|
||||
.submenu-title-noDropdown {
|
||||
padding-left: 10px!important;
|
||||
padding-left: 10px !important;
|
||||
position: relative;
|
||||
span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
z-index: 1002;
|
||||
width: 140px;
|
||||
height: 56px;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
right: -145px;
|
||||
text-align: left;
|
||||
text-indent: 20px;
|
||||
top: 0px;
|
||||
background-color: $subMenuBg!important;
|
||||
opacity: 1;
|
||||
}
|
||||
.el-tooltip {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
overflow: hidden;
|
||||
&>.el-submenu__title {
|
||||
padding-left: 10px!important;
|
||||
&>span {
|
||||
display: none;
|
||||
}
|
||||
padding-left: 10px !important;
|
||||
.el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.nest-menu {
|
||||
.el-submenu__icon-arrow {
|
||||
display: block!important;
|
||||
}
|
||||
span {
|
||||
display: inline-block!important;
|
||||
}
|
||||
.el-menu--collapse {
|
||||
.el-submenu {
|
||||
&>.el-submenu__title {
|
||||
&>span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nest-menu .el-submenu>.el-submenu__title,
|
||||
.el-submenu .el-menu-item {
|
||||
min-width: 180px!important;
|
||||
background-color: $subMenuBg!important;
|
||||
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
|
||||
.sidebar-container .el-submenu .el-menu-item {
|
||||
min-width: 180px !important;
|
||||
background-color: $subMenuBg !important;
|
||||
&:hover {
|
||||
background-color: $menuHover!important;
|
||||
background-color: $menuHover !important;
|
||||
}
|
||||
}
|
||||
.el-menu--collapse .el-menu .el-submenu{
|
||||
min-width: 180px!important;
|
||||
.el-menu--collapse .el-menu .el-submenu {
|
||||
min-width: 180px !important;
|
||||
}
|
||||
|
||||
//适配移动端
|
||||
.mobile {
|
||||
.main-container {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.sidebar-container {
|
||||
transition: transform .28s;
|
||||
width: 180px !important;
|
||||
}
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-180px, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.withoutAnimation {
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -11,7 +11,21 @@
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*fade*/
|
||||
/*fade-transform*/
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
.fade-transform-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/*breadcrumb transition*/
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all .5s;
|
||||
|
@@ -261,3 +261,7 @@ export function deepClone(source) {
|
||||
})
|
||||
return targetObj
|
||||
}
|
||||
|
||||
export function uniqueArr(arr) {
|
||||
return Array.from(new Set(arr))
|
||||
}
|
||||
|
@@ -26,7 +26,7 @@ export function validateUpperCase(str) {
|
||||
}
|
||||
|
||||
/* 大小写字母*/
|
||||
export function validatAlphabets(str) {
|
||||
export function validateAlphabets(str) {
|
||||
const reg = /^[A-Za-z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
60
src/views/components-demo/dragDialog.vue
Normal file
60
src/views/components-demo/dragDialog.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="components-container">
|
||||
<el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
|
||||
<el-dialog v-el-drag-dialog @dragDialog="handleDrag" title="Shipping address" :visible.sync="dialogTableVisible">
|
||||
<el-select ref="select" v-model="value" placeholder="请选择">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="date" label="Date" width="150"></el-table-column>
|
||||
<el-table-column property="name" label="Name" width="200"></el-table-column>
|
||||
<el-table-column property="address" label="Address"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
|
||||
|
||||
export default {
|
||||
name: 'dragDialog-demo',
|
||||
directives: { elDragDialog },
|
||||
data() {
|
||||
return {
|
||||
dialogTableVisible: false,
|
||||
options: [
|
||||
{ value: '选项1', label: '黄金糕' },
|
||||
{ value: '选项2', label: '双皮奶' },
|
||||
{ value: '选项3', label: '蚵仔煎' },
|
||||
{ value: '选项4', label: '龙须面' }
|
||||
],
|
||||
value: '',
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: 'John Smith',
|
||||
address: 'No.1518, Jinshajiang Road, Putuo District'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// v-el-drag-dialog onDrag callback function
|
||||
handleDrag() {
|
||||
this.$refs.select.blur()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
68
src/views/components-demo/dragKanban.vue
Normal file
68
src/views/components-demo/dragKanban.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="components-container board">
|
||||
<Kanban :key="1" class="kanban todo" :list="list1" :options="options" header-text="Todo"/>
|
||||
<Kanban :key="2" class="kanban working" :list="list2" :options="options" header-text="Working"/>
|
||||
<Kanban :key="3" class="kanban done" :list="list3" :options="options" header-text="Done"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Kanban from '@/components/Kanban'
|
||||
|
||||
export default {
|
||||
name: 'dragKanban-demo',
|
||||
components: {
|
||||
Kanban
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
group: 'mission'
|
||||
},
|
||||
list1: [
|
||||
{ name: 'Mission', id: 1 },
|
||||
{ name: 'Mission', id: 2 },
|
||||
{ name: 'Mission', id: 3 },
|
||||
{ name: 'Mission', id: 4 }
|
||||
],
|
||||
list2: [
|
||||
{ name: 'Mission', id: 5 },
|
||||
{ name: 'Mission', id: 6 },
|
||||
{ name: 'Mission', id: 7 }
|
||||
],
|
||||
list3: [
|
||||
{ name: 'Mission', id: 8 },
|
||||
{ name: 'Mission', id: 9 },
|
||||
{ name: 'Mission', id: 10 }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.board {
|
||||
width: 1000px;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.kanban {
|
||||
&.todo {
|
||||
.board-column-header {
|
||||
background: #4A9FF9;
|
||||
}
|
||||
}
|
||||
&.working {
|
||||
.board-column-header {
|
||||
background: #f9944a;
|
||||
}
|
||||
}
|
||||
&.done {
|
||||
.board-column-header {
|
||||
background: #2ac06d;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-table :data="list" style="width: 100%;padding-top: 15px;">
|
||||
<el-table-column label="Order_No" show-overflow-tooltip>
|
||||
<el-table-column label="Order_No" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.order_no}}
|
||||
</template>
|
||||
@@ -42,7 +42,7 @@ export default {
|
||||
methods: {
|
||||
fetchData() {
|
||||
fetchList().then(response => {
|
||||
this.list = response.data.items.slice(0, 7)
|
||||
this.list = response.data.items.slice(0, 8)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
@@ -30,10 +30,10 @@
|
||||
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
|
||||
<transaction-table></transaction-table>
|
||||
</el-col>
|
||||
<el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}" style="margin-bottom:30px;">
|
||||
<todo-list></todo-list>
|
||||
</el-col>
|
||||
<el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}">
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}" style="margin-bottom:30px;" >
|
||||
<box-card></box-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
@@ -19,7 +19,7 @@ export default {
|
||||
{ title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' },
|
||||
{ title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' },
|
||||
{ title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
|
||||
{ title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' }
|
||||
{ title: '优雅的使用 icon', href: 'https://segmentfault.com/a/1190000012213278' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@@ -65,6 +65,7 @@ export default {
|
||||
.pan-img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.text-jumbo {
|
||||
font-size: 60px;
|
||||
|
@@ -14,7 +14,7 @@
|
||||
</div>
|
||||
<div class="bullshit__headline">{{ message }}</div>
|
||||
<div class="bullshit__info">请检查您输入的网址是否正确,请点击以下按钮返回主页或者发送错误报告</div>
|
||||
<a href="/" class="bullshit__return-home">返回首页</a>
|
||||
<a href="" class="bullshit__return-home">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@@ -3,100 +3,51 @@
|
||||
<el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
|
||||
|
||||
<sticky :className="'sub-navbar '+postForm.status">
|
||||
<template v-if="fetchSuccess">
|
||||
|
||||
<router-link style="margin-right:15px;" v-show='isEdit' :to="{ path:'create-form'}">
|
||||
<el-button type="info">创建form</el-button>
|
||||
</router-link>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<el-button plain>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-padding" slot="dropdown">
|
||||
<el-dropdown-item>
|
||||
<el-radio-group style="padding: 10px;" v-model="postForm.comment_disabled">
|
||||
<el-radio :label="true">关闭评论</el-radio>
|
||||
<el-radio :label="false">打开评论</el-radio>
|
||||
</el-radio-group>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<el-button plain>平台
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-border" slot="dropdown">
|
||||
<el-checkbox-group v-model="postForm.platforms" style="padding: 5px 15px;">
|
||||
<el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
|
||||
{{item.name}}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<el-button plain>
|
||||
外链
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
|
||||
<el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
|
||||
<el-input placeholder="请输入内容" v-model="postForm.source_uri">
|
||||
<template slot="prepend">填写url</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm()">发布
|
||||
</el-button>
|
||||
<el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
|
||||
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag>
|
||||
</template>
|
||||
|
||||
<CommentDropdown v-model="postForm.comment_disabled" />
|
||||
<PlatformDropdown v-model="postForm.platforms" />
|
||||
<SourceUrlDropdown v-model="postForm.source_uri" />
|
||||
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">发布
|
||||
</el-button>
|
||||
<el-button v-loading="loading" type="warning" @click="draftForm">草稿</el-button>
|
||||
</sticky>
|
||||
|
||||
<div class="createPost-main-container">
|
||||
<el-row>
|
||||
|
||||
<Warning />
|
||||
|
||||
<el-col :span="21">
|
||||
<el-form-item style="margin-bottom: 40px;" prop="title">
|
||||
<MDinput name="name" v-model="postForm.title" required :maxlength="100">
|
||||
标题
|
||||
</MDinput>
|
||||
<span v-show="postForm.title.length>=26" class='title-prompt'>app可能会显示不全</span>
|
||||
</el-form-item>
|
||||
|
||||
<div class="postInfo-container">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
|
||||
<multiselect v-model="postForm.author" :options="userLIstOptions" @search-change="getRemoteUserList" placeholder="搜索用户" selectLabel="选择"
|
||||
deselectLabel="删除" track-by="key" :internalSearch="false" label="key">
|
||||
<span slot='noResult'>无结果</span>
|
||||
</multiselect>
|
||||
<el-select v-model="postForm.author" filterable remote placeholder="搜索用户" :remote-method="getRemoteUserList">
|
||||
<el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-tooltip class="item" effect="dark" content="将替换作者" placement="top">
|
||||
<el-form-item label-width="50px" label="来源:" class="postInfo-container-item">
|
||||
<el-input placeholder="将替换作者" style='min-width:150px;' v-model="postForm.source_name">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-tooltip>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
|
||||
<el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
|
||||
<el-rate style="margin-top:8px;" v-model="postForm.importance" :max='3' :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :low-threshold="1"
|
||||
:high-threshold="3">
|
||||
</el-rate>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
@@ -109,11 +60,11 @@
|
||||
</el-form-item>
|
||||
|
||||
<div class="editor-container">
|
||||
<tinymce :height=400 ref="editor" v-model="postForm.content"></tinymce>
|
||||
<Tinymce :height=400 ref="editor" v-model="postForm.content" />
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px;">
|
||||
<Upload v-model="postForm.image_uri"></Upload>
|
||||
<Upload v-model="postForm.image_uri" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
@@ -131,6 +82,8 @@ import Sticky from '@/components/Sticky' // 粘性header组件
|
||||
import { validateURL } from '@/utils/validate'
|
||||
import { fetchArticle } from '@/api/article'
|
||||
import { userSearch } from '@/api/remoteSearch'
|
||||
import Warning from './Warning'
|
||||
import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
|
||||
|
||||
const defaultForm = {
|
||||
status: 'draft',
|
||||
@@ -139,16 +92,16 @@ const defaultForm = {
|
||||
content_short: '', // 文章摘要
|
||||
source_uri: '', // 文章外链
|
||||
image_uri: '', // 文章图片
|
||||
source_name: '', // 文章外部作者
|
||||
display_time: undefined, // 前台展示时间
|
||||
id: undefined,
|
||||
platforms: ['a-platform'],
|
||||
comment_disabled: false
|
||||
comment_disabled: false,
|
||||
importance: 0
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'articleDetail',
|
||||
components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
|
||||
components: { Tinymce, MDinput, Upload, Multiselect, Sticky, Warning, CommentDropdown, PlatformDropdown, SourceUrlDropdown },
|
||||
props: {
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
@@ -184,14 +137,8 @@ export default {
|
||||
}
|
||||
return {
|
||||
postForm: Object.assign({}, defaultForm),
|
||||
fetchSuccess: true,
|
||||
loading: false,
|
||||
userLIstOptions: [],
|
||||
platformsOptions: [
|
||||
{ key: 'a-platform', name: 'a-platform' },
|
||||
{ key: 'b-platform', name: 'b-platform' },
|
||||
{ key: 'c-platform', name: 'c-platform' }
|
||||
],
|
||||
userListOptions: [],
|
||||
rules: {
|
||||
image_uri: [{ validator: validateRequire }],
|
||||
title: [{ validator: validateRequire }],
|
||||
@@ -207,17 +154,20 @@ export default {
|
||||
},
|
||||
created() {
|
||||
if (this.isEdit) {
|
||||
this.fetchData()
|
||||
const id = this.$route.params && this.$route.params.id
|
||||
this.fetchData(id)
|
||||
} else {
|
||||
this.postForm = Object.assign({}, defaultForm)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
fetchArticle().then(response => {
|
||||
fetchData(id) {
|
||||
fetchArticle(id).then(response => {
|
||||
this.postForm = response.data
|
||||
// Just for test
|
||||
this.postForm.title += ` Article Id:${this.postForm.id}`
|
||||
this.postForm.content_short += ` Article Id:${this.postForm.id}`
|
||||
}).catch(err => {
|
||||
this.fetchSuccess = false
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
@@ -260,10 +210,7 @@ export default {
|
||||
getRemoteUserList(query) {
|
||||
userSearch(query).then(response => {
|
||||
if (!response.data.items) return
|
||||
console.log(response)
|
||||
this.userLIstOptions = response.data.items.map(v => ({
|
||||
key: v.name
|
||||
}))
|
||||
this.userListOptions = response.data.items.map(v => v.name)
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -271,44 +218,36 @@ export default {
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.title-prompt{
|
||||
@import "src/styles/mixin.scss";
|
||||
.createPost-container {
|
||||
position: relative;
|
||||
.createPost-main-container {
|
||||
padding: 40px 45px 20px 50px;
|
||||
.postInfo-container {
|
||||
position: relative;
|
||||
@include clearfix;
|
||||
margin-bottom: 10px;
|
||||
.postInfo-container-item {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.editor-container {
|
||||
min-height: 500px;
|
||||
margin: 0 0 30px;
|
||||
.editor-upload-btn-container {
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
.editor-upload-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.word-counter {
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
font-size: 12px;
|
||||
top:10px;
|
||||
color:#ff4949;
|
||||
}
|
||||
.createPost-container {
|
||||
position: relative;
|
||||
.createPost-main-container {
|
||||
padding: 40px 45px 20px 50px;
|
||||
.postInfo-container {
|
||||
position: relative;
|
||||
@include clearfix;
|
||||
margin-bottom: 10px;
|
||||
.postInfo-container-item {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.editor-container {
|
||||
min-height: 500px;
|
||||
margin: 0 0 30px;
|
||||
.editor-upload-btn-container {
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
.editor-upload-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.word-counter {
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 0px;
|
||||
}
|
||||
right: -10px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
31
src/views/example/components/Dropdown/Comment.vue
Normal file
31
src/views/example/components/Dropdown/Comment.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" :show-timeout="100">
|
||||
<el-button plain>{{!comment_disabled?'评论已打开':'评论已关闭'}}
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-padding" slot="dropdown">
|
||||
<el-dropdown-item>
|
||||
<el-radio-group style="padding: 10px;" v-model="comment_disabled">
|
||||
<el-radio :label="true">关闭评论</el-radio>
|
||||
<el-radio :label="false">打开评论</el-radio>
|
||||
</el-radio-group>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['value'],
|
||||
computed: {
|
||||
comment_disabled: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
40
src/views/example/components/Dropdown/Platform.vue
Normal file
40
src/views/example/components/Dropdown/Platform.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
|
||||
<el-button plain>
|
||||
平台({{platforms.length}})
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-border" slot="dropdown">
|
||||
<el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
|
||||
<el-checkbox v-for="item in platformsOptions" :label="item.key" :key="item.key">
|
||||
{{item.name}}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
platformsOptions: [
|
||||
{ key: 'a-platform', name: 'a-platform' },
|
||||
{ key: 'b-platform', name: 'b-platform' },
|
||||
{ key: 'c-platform', name: 'c-platform' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
platforms: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
31
src/views/example/components/Dropdown/SourceUrl.vue
Normal file
31
src/views/example/components/Dropdown/SourceUrl.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<el-dropdown :show-timeout="100" trigger="click">
|
||||
<el-button plain>
|
||||
外链
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-padding no-border" style="width:400px" slot="dropdown">
|
||||
<el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
|
||||
<el-input placeholder="请输入内容" v-model="source_uri">
|
||||
<template slot="prepend">填写url</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['value'],
|
||||
computed: {
|
||||
source_uri: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
3
src/views/example/components/Dropdown/index.js
Normal file
3
src/views/example/components/Dropdown/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
export { default as CommentDropdown } from './Comment'
|
||||
export { default as PlatformDropdown } from './Platform'
|
||||
export { default as SourceUrlDropdown } from './SourceUrl'
|
9
src/views/example/components/Warning.vue
Normal file
9
src/views/example/components/Warning.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<p class="warn-content">
|
||||
创建和编辑页面是不能被keep-alive 缓存的,因为keep-alive 的include 目前不支持根据路由来缓存,所以目前都是基于component name 来缓存的,如果你想要实现缓存的效果,可以使用localstorage 等游览器缓存方案。或者不要使用keep-alive
|
||||
的include,直接缓存所有页面。详情见
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/tags-view?id=%E7%BC%93%E5%AD%98%E4%B8%8D%E9%80%82%E5%90%88%E5%9C%BA%E6%99%AF"
|
||||
target="_blank">文档</a>
|
||||
</p>
|
||||
</template>
|
||||
|
121
src/views/example/list.vue
Normal file
121
src/views/example/list.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
|
||||
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column align="center" label="ID" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="180px" align="center" label="Date">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="120px" align="center" label="Author">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="100px" label="Importance">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column class-name="status-col" label="Status" width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column min-width="300px" label="Title">
|
||||
<template slot-scope="scope">
|
||||
|
||||
<router-link class="link-type" :to="'/example/edit/'+scope.row.id">
|
||||
<span>{{ scope.row.title }}</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="Actions" width="120">
|
||||
<template slot-scope="scope">
|
||||
<router-link :to="'/example/edit/'+scope.row.id">
|
||||
<el-button type="primary" size="small" icon="el-icon-edit">Edit</el-button>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
|
||||
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchList } from '@/api/article'
|
||||
|
||||
export default {
|
||||
name: 'articleList',
|
||||
data() {
|
||||
return {
|
||||
list: null,
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.list = response.data.items
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.listQuery.limit = val
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.listQuery.page = val
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
@@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<transition name="fade" mode="out-in">
|
||||
<keep-alive :include='cachedViews'>
|
||||
<router-view></router-view>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TableMain',
|
||||
computed: {
|
||||
cachedViews() {
|
||||
return this.$store.state.tagsView.cachedViews
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
52
src/views/guide/defineSteps.js
Normal file
52
src/views/guide/defineSteps.js
Normal file
@@ -0,0 +1,52 @@
|
||||
const steps = [
|
||||
{
|
||||
element: '.hamburger-container',
|
||||
popover: {
|
||||
title: 'Hamburger',
|
||||
description: 'Open && Close sidebar',
|
||||
position: 'bottom'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '.breadcrumb-container',
|
||||
popover: {
|
||||
title: 'Breadcrumb',
|
||||
description: 'Indicate the current page location',
|
||||
position: 'bottom'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '.screenfull',
|
||||
popover: {
|
||||
title: 'Screenfull',
|
||||
description: 'Bring the page into fullscreen',
|
||||
position: 'left'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '.international-icon',
|
||||
popover: {
|
||||
title: 'Switch language',
|
||||
description: 'Switch the system language',
|
||||
position: 'left'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '.theme-switch',
|
||||
popover: {
|
||||
title: 'Theme Switch',
|
||||
description: 'Custom switch system theme',
|
||||
position: 'left'
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '.tags-view-container',
|
||||
popover: {
|
||||
title: 'Tags view',
|
||||
description: 'The history of the page you visited',
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
export default steps
|
34
src/views/guide/index.vue
Normal file
34
src/views/guide/index.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<p class="warn-content">
|
||||
{{$t('guide.description')}}
|
||||
<a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.
|
||||
</a>
|
||||
</p>
|
||||
<el-button icon='el-icon-question' type="primary" @click.prevent.stop="guide">{{$t('guide.button')}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Driver from 'driver.js' // import driver.js
|
||||
import 'driver.js/dist/driver.min.css' // import driver.js css
|
||||
import steps from './defineSteps'
|
||||
|
||||
export default {
|
||||
name: 'guide',
|
||||
data() {
|
||||
return {
|
||||
driver: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.driver = new Driver()
|
||||
},
|
||||
methods: {
|
||||
guide() {
|
||||
this.driver.defineSteps(steps)
|
||||
this.driver.start()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
|
||||
<div class="app-wrapper" :class="classObj">
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
|
||||
<sidebar class="sidebar-container"></sidebar>
|
||||
<div class="main-container">
|
||||
<navbar></navbar>
|
||||
@@ -11,6 +12,7 @@
|
||||
|
||||
<script>
|
||||
import { Navbar, Sidebar, AppMain, TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
|
||||
export default {
|
||||
name: 'layout',
|
||||
@@ -20,9 +22,25 @@ export default {
|
||||
AppMain,
|
||||
TagsView
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
computed: {
|
||||
sidebar() {
|
||||
return this.$store.state.app.sidebar
|
||||
},
|
||||
device() {
|
||||
return this.$store.state.app.device
|
||||
},
|
||||
classObj() {
|
||||
return {
|
||||
hideSidebar: !this.sidebar.opened,
|
||||
withoutAnimation: this.sidebar.withoutAnimation,
|
||||
mobile: this.device === 'mobile'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickOutside() {
|
||||
this.$store.dispatch('closeSideBar', { withoutAnimation: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -36,4 +54,13 @@ export default {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.drawer-bg {
|
||||
background: #000;
|
||||
opacity: 0.3;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<section class="app-main" style="min-height: 100%">
|
||||
<transition name="fade" mode="out-in">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<keep-alive :include="cachedViews">
|
||||
<router-view></router-view>
|
||||
<router-view :key="key"></router-view>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</section>
|
||||
@@ -14,10 +14,10 @@ export default {
|
||||
computed: {
|
||||
cachedViews() {
|
||||
return this.$store.state.tagsView.cachedViews
|
||||
},
|
||||
key() {
|
||||
return this.$route.fullPath
|
||||
}
|
||||
// key() {
|
||||
// return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@@ -2,17 +2,18 @@
|
||||
<div class="menu-wrapper">
|
||||
<template v-for="item in routes" v-if="!item.hidden&&item.children">
|
||||
|
||||
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
|
||||
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path"
|
||||
:key="item.children[0].name">
|
||||
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
|
||||
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
|
||||
<span v-if="item.children[0].meta&&item.children[0].meta.title">{{generateTitle(item.children[0].meta.title)}}</span>
|
||||
<span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{generateTitle(item.children[0].meta.title)}}</span>
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
|
||||
<el-submenu v-else :index="item.name||item.path" :key="item.name">
|
||||
<template slot="title">
|
||||
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
|
||||
<span v-if="item.meta&&item.meta.title">{{generateTitle(item.meta.title)}}</span>
|
||||
<span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
|
||||
</template>
|
||||
|
||||
<template v-for="child in item.children" v-if="!child.hidden">
|
||||
@@ -21,7 +22,7 @@
|
||||
<router-link v-else :to="item.path+'/'+child.path" :key="child.name">
|
||||
<el-menu-item :index="item.path+'/'+child.path">
|
||||
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
|
||||
<span v-if="child.meta&&child.meta.title">{{generateTitle(child.meta.title)}}</span>
|
||||
<span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
|
||||
</el-menu-item>
|
||||
</router-link>
|
||||
</template>
|
||||
|
@@ -1,18 +1,25 @@
|
||||
<template>
|
||||
<scroll-bar>
|
||||
<el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
|
||||
<el-scrollbar wrapClass="scrollbar-wrapper">
|
||||
<el-menu
|
||||
mode="vertical"
|
||||
:show-timeout="200"
|
||||
:default-active="$route.path"
|
||||
:collapse="isCollapse"
|
||||
background-color="#304156"
|
||||
text-color="#bfcbd9"
|
||||
active-text-color="#409EFF"
|
||||
>
|
||||
<sidebar-item :routes="permission_routers"></sidebar-item>
|
||||
</el-menu>
|
||||
</scroll-bar>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import SidebarItem from './SidebarItem'
|
||||
import ScrollBar from '@/components/ScrollBar'
|
||||
|
||||
export default {
|
||||
components: { SidebarItem, ScrollBar },
|
||||
components: { SidebarItem },
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'permission_routers',
|
||||
|
@@ -59,7 +59,7 @@ export default {
|
||||
return false
|
||||
},
|
||||
isActive(route) {
|
||||
return route.path === this.$route.path || route.name === this.$route.name
|
||||
return route.path === this.$route.path
|
||||
},
|
||||
addViewTags() {
|
||||
const route = this.generateRoute()
|
||||
@@ -156,7 +156,7 @@ export default {
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
|
41
src/views/layout/mixin/ResizeHandler.js
Normal file
41
src/views/layout/mixin/ResizeHandler.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import store from '@/store'
|
||||
|
||||
const { body } = document
|
||||
const WIDTH = 1024
|
||||
const RATIO = 3
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
$route(route) {
|
||||
if (this.device === 'mobile' && this.sidebar.opened) {
|
||||
store.dispatch('closeSideBar', { withoutAnimation: false })
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
window.addEventListener('resize', this.resizeHandler)
|
||||
},
|
||||
mounted() {
|
||||
const isMobile = this.isMobile()
|
||||
if (isMobile) {
|
||||
store.dispatch('toggleDevice', 'mobile')
|
||||
store.dispatch('closeSideBar', { withoutAnimation: true })
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isMobile() {
|
||||
const rect = body.getBoundingClientRect()
|
||||
return rect.width - RATIO < WIDTH
|
||||
},
|
||||
resizeHandler() {
|
||||
if (!document.hidden) {
|
||||
const isMobile = this.isMobile()
|
||||
store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop')
|
||||
|
||||
if (isMobile) {
|
||||
store.dispatch('closeSideBar', { withoutAnimation: true })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
30
src/views/permission/components/SwitchRoles.vue
Normal file
30
src/views/permission/components/SwitchRoles.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom:15px;">{{$t('permission.roles')}}: {{roles}}</div>
|
||||
{{$t('permission.switchRoles')}}:
|
||||
<el-radio-group v-model="switchRoles">
|
||||
<el-radio-button label="editor"></el-radio-button>
|
||||
<el-radio-button label="admin"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
roles() {
|
||||
return this.$store.getters.roles
|
||||
},
|
||||
switchRoles: {
|
||||
get() {
|
||||
return this.roles[0]
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('ChangeRoles', val).then(() => {
|
||||
this.$emit('change')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
59
src/views/permission/directive.vue
Normal file
59
src/views/permission/directive.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<switch-roles @change="handleRolesChange" />
|
||||
<div :key="key" style="margin-top:30px;">
|
||||
<span v-permission="['admin']" class="permission-alert">
|
||||
Only
|
||||
<el-tag class="permission-tag" size="small">admin</el-tag> can see this
|
||||
</span>
|
||||
<span v-permission="['editor']" class="permission-alert">
|
||||
Only
|
||||
<el-tag class="permission-tag" size="small">editor</el-tag> can see this
|
||||
</span>
|
||||
<span v-permission="['admin','editor']" class="permission-alert">
|
||||
Both
|
||||
<el-tag class="permission-tag" size="small">admin</el-tag> and
|
||||
<el-tag class="permission-tag" size="small">editor</el-tag> can see this
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import permission from '@/directive/permission/index.js' // 权限判断指令
|
||||
import SwitchRoles from './components/SwitchRoles'
|
||||
|
||||
export default{
|
||||
name: 'directivePermission',
|
||||
components: { SwitchRoles },
|
||||
directives: { permission },
|
||||
data() {
|
||||
return {
|
||||
key: 1 // 为了能每次切换权限的时候重新初始化指令
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRolesChange() {
|
||||
this.key++
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.app-container {
|
||||
/deep/ .permission-alert {
|
||||
width: 320px;
|
||||
margin-top: 30px;
|
||||
background-color: #f0f9eb;
|
||||
color: #67c23a;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
}
|
||||
/deep/ .permission-tag{
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div style="margin-bottom:15px;">{{$t('permission.roles')}}: {{roles}}</div>
|
||||
{{$t('permission.switchRoles')}}:
|
||||
<el-radio-group v-model="switchRoles">
|
||||
<el-radio-button label="editor"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default{
|
||||
name: 'permission',
|
||||
data() {
|
||||
return {
|
||||
switchRoles: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'roles'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
switchRoles(val) {
|
||||
this.$store.dispatch('ChangeRoles', val).then(() => {
|
||||
this.$router.push({ path: '/permission/index?' + +new Date() })
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
19
src/views/permission/page.vue
Normal file
19
src/views/permission/page.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<switch-roles @change="handleRolesChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SwitchRoles from './components/SwitchRoles'
|
||||
|
||||
export default{
|
||||
name: 'pagePermission',
|
||||
components: { SwitchRoles },
|
||||
methods: {
|
||||
handleRolesChange() {
|
||||
this.$router.push({ path: '/permission/index?' + +new Date() })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="tab-container">
|
||||
<el-tag>mounted times :{{createdTimes}}</el-tag>
|
||||
<el-alert style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" :closable="false">
|
||||
</el-alert>
|
||||
<el-tabs style='margin-top:15px;' v-model="activeName" type="border-card">
|
||||
<el-tab-pane v-for="item in tabMapOptions" :label="item.label" :key='item.key' :name="item.key">
|
||||
<keep-alive>
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.title')" v-model="listQuery.title">
|
||||
</el-input>
|
||||
@@ -335,7 +335,11 @@ export default {
|
||||
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const data = this.formatJson(filterVal, this.list)
|
||||
excel.export_json_to_excel(tHeader, data, 'table-list')
|
||||
excel.export_json_to_excel({
|
||||
header: tHeader,
|
||||
data,
|
||||
filename: 'table-list'
|
||||
})
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<div class="app-container">
|
||||
<!-- Note that row-key is necessary to get a correct row order. -->
|
||||
<el-table :data="list" row-key="id" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<div class="app-container">
|
||||
|
||||
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
|
||||
|
Reference in New Issue
Block a user