zhouchijian/fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Feature/english (#381)

Browse Source 
* perf[navbar]: set langSelect to component && refine errorLog component

* feat[login]:add 18n to login form

* fix[pagination]: fixed when selected page-sizes

* perf[i18n]:dashboard document svg permission

* perf[charts]: perf effect

* perf[i18n]:excel && zip

* perf[i18n]: table && errorLog && theme

* perf[i18n]: components

* perf[i18n]: direct use $t

* perf[i18n]: complex-table

* update README.md

* update README.md 📘

* perf[i18n]: refine code comments
This commit is contained in:
花裤衩
2017-12-29 16:07:42 +08:00
committed by GitHub
parent 83e56488d8
commit 45fef9b431
61 changed files with 901 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/charts/keyboard.vue
View File

@@ -1,8 +1,6 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
</template>
@@ -18,8 +16,9 @@ export default {
<style scoped>
.chart-container{
position: relative;
padding: 20px;
width: 100%;
height: 90%;
height: 85vh;
}
</style>

9
src/views/charts/line.vue
View File

@@ -1,8 +1,6 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
</template>
@@ -18,8 +16,9 @@ export default {
<style scoped>
.chart-container{
position: relative;
padding:20px;
width: 100%;
height: 80%;
height:85vh;
}
</style>

10
src/views/charts/mixChart.vue
View File

@@ -1,8 +1,6 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
</template>
@@ -18,9 +16,9 @@ export default {
<style scoped>
.chart-container{
position: relative;
padding: 20px;
width: 100%;
height: 90%;
padding-bottom: 40px;
height:85vh;
}
</style>

4
src/views/clipboard/index.vue
View File

@@ -2,11 +2,11 @@
<div class="app-container">
<el-tabs v-model="activeName">
<el-tab-pane label="use clipboard directly" name="directly">
<el-input v-model="inputData" placeholder="请输入内容" style='width:400px;'></el-input>
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
<el-button type="primary" icon="document" @click='handleCopy(inputData,$event)'>copy</el-button>
</el-tab-pane>
<el-tab-pane label="use clipboard by v-directive" name="v-directive">
<el-input v-model="inputData" placeholder="请输入内容" style='width:400px;'></el-input>
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
<el-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
</el-tab-pane>
</el-tabs>

10
src/views/components-demo/avatarUpload.vue
View File

@@ -1,16 +1,16 @@
<template>
<div class="components-container">
<code>这里核心代码用的是
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>
由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
<code>This is based on
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
{{$t('components.imageUploadTips')}}
</code>
<pan-thumb :image="image"></pan-thumb>
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change avatar
</el-button>
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess"
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" langType="en"
:key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
</div>
</template>

253
src/views/components-demo/backToTop.vue
View File

@@ -1,134 +1,121 @@
<template>
<div class="components-container">
<code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
<code>可自定义按钮的样式、show/hide临界点、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素 </code>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<code>{{$t('components.backToTopTips1')}}</code>
<code>{{$t('components.backToTopTips2')}}</code>
<div class="placeholder-container">
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
</div>
<!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
<!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素 -->
<el-tooltip placement="top" content="文字提示">
<el-tooltip placement="top" content="tooltip">
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
</el-tooltip>
</div>
@@ -148,10 +135,16 @@ export default {
width: '40px',
height: '40px',
'border-radius': '4px',
'line-height': '45px', // 请保持与高度一致以垂直居中
background: '#e7eaf1'// 按钮的背景颜色
'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
}
}
}
}
</script>
</script>
<style scoped>
.placeholder-container div {
margin: 10px;
}
</style>

2
src/views/components-demo/dndList.vue
View File

@@ -4,7 +4,7 @@
<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
</code>
<div class="editor-container">
<dnd-list :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池"></dnd-list>
<dnd-list :list1="list1" :list2="list2" list1Title="List" list2Title="Article pool"></dnd-list>
</div>
</div>
</template>

8
src/views/components-demo/dropzone.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="components-container">
<code>
基于<a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>封装 ,
由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装
Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
{{$t('components.dropzoneTips')}}
</code>
<div class="editor-container">
<dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone>
@@ -19,11 +19,11 @@ export default {
methods: {
dropzoneS(file) {
console.log(file)
this.$message({ message: '上传成功', type: 'success' })
this.$message({ message: 'Upload success', type: 'success' })
},
dropzoneR(file) {
console.log(file)
this.$message({ message: '删除成功', type: 'success' })
this.$message({ message: 'Delete success', type: 'success' })
}
}
}

6
src/views/components-demo/markdown.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="components-container">
<code>Markdown 我们这里选用了
<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下
<code>Markdown is based on
<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，Simply encapsulated in Vue.
<a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
相关文章 </a>
</code>
<div class="editor-container">
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
</div>
<el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">转为HTML</el-button>
<el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">To HTML</el-button>
<div v-html="html"></div>
</div>
</template>

6
src/views/components-demo/splitpane.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="components-container">
<code>splitPane 如果你用过
<code><strong>SplitPane</strong> If you've used
<a href="http://codepen.io/" target="_blank"> codepen</a>,
<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>就不会陌生了
<a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'>项目地址</a>
<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
<a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'> Github repository</a>
</code>
<split-pane v-on:resize="resize" split="vertical">
<template slot="paneL">

139
src/views/components-demo/sticky.vue
View File

@@ -2,8 +2,8 @@
<div>
<sticky className="sub-navbar">
<el-dropdown trigger="click">
<el-button>
平台<i class="el-icon-caret-bottom el-icon--right"></i>
<el-button plain>
Platform<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;">
@@ -15,79 +15,79 @@
</el-dropdown>
<el-dropdown trigger="click">
<el-button>
外链<i class="el-icon-caret-bottom el-icon--right"></i>
<el-button plain>
Link<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-input placeholder="请输入内容" v-model="url">
<template slot="prepend">填写url</template>
<el-input placeholder="Please enter the content" v-model="url">
<template slot="prepend">Url</template>
</el-input>
</el-dropdown-menu>
</el-dropdown>
<div class="time-container">
<el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="发布时间">
<el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time">
</el-date-picker>
</div>
<el-button style="margin-left: 10px;" type="success">发布
<el-button style="margin-left: 10px;" type="success">publish
</el-button>
</sticky>
<div class="components-container">
<code>Sticky header 当页面滚动到预设的位置会吸附在顶部</code>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<code>Sticky header, {{$t('components.stickyTips')}}</code>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>
</div>
</div>
</template>
@@ -105,9 +105,9 @@ export default {
url: '',
platforms: ['a-platform'],
platformsOptions: [
{ key: 'a-platform', name: '平台A' },
{ key: 'b-platform', name: '平台B' },
{ key: 'c-platform', name: '平台C' }
{ key: 'a-platform', name: 'platformA' },
{ key: 'b-platform', name: 'platformB' },
{ key: 'c-platform', name: 'platformC' }
],
pickerOptions: {
disabledDate(time) {
@@ -120,8 +120,11 @@ export default {
</script>
<style scoped>
.time-container {
display: inline-block;
}
</style>
.components-container div {
margin: 10px;
}
.time-container {
display: inline-block;
}
</style>

16
src/views/components-demo/tinymce.vue
View File

@@ -1,10 +1,11 @@
<template>
<div class="components-container">
<code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">文档介绍</a>
<code>
{{$t('components.tinymceTips')}}
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor"> {{$t('components.documentation')}}</a>
</code>
<div>
<tinymce :height="200" v-model="content"></tinymce>
<tinymce :height="300" v-model="content"></tinymce>
</div>
<div class="editor-content" v-html="content"></div>
</div>
@@ -18,7 +19,14 @@ export default {
components: { Tinymce },
data() {
return {
content: 'Tinymce'
content:
`<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1>
<ul>
<li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
<li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li>
<li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
</ul>
`
}
}
}

2
src/views/dashboard/admin/components/BarChart.vue
View File

@@ -4,7 +4,7 @@
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
const animationDuration = 6000

2
src/views/dashboard/admin/components/LineChart.vue
View File

@@ -4,7 +4,7 @@
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
export default {

8
src/views/dashboard/admin/components/PanelGroup.vue
View File

@@ -7,7 +7,7 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">New Visits</div>
<count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="3600"></count-to>
<count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="2600"></count-to>
</div>
</div>
</el-col>
@@ -18,7 +18,7 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">Messages</div>
<count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="4000"></count-to>
<count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="3000"></count-to>
</div>
</div>
</el-col>
@@ -29,7 +29,7 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">Purchases</div>
<count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="4000"></count-to>
<count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="3200"></count-to>
</div>
</div>
</el-col>
@@ -40,7 +40,7 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">Shoppings</div>
<count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="4600"></count-to>
<count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="3600"></count-to>
</div>
</div>
</el-col>

2
src/views/dashboard/admin/components/PieChart.vue
View File

@@ -4,7 +4,7 @@
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
export default {

2
src/views/dashboard/admin/components/RaddarChart.vue
View File

@@ -4,7 +4,7 @@
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
const animationDuration = 3000

4
src/views/dashboard/admin/components/TransactionTable.vue
View File

@@ -44,7 +44,7 @@ export default {
fetchList().then(response => {
this.list = response.data.items.slice(0, 7)
})
} }
}
}
}
</script>

4
src/views/dashboard/editor/index.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="dashboard-editor-container">
<div class=" clearfix">
<pan-thumb style="float: left" :image="avatar"> 你的权限:
<pan-thumb style="float: left" :image="avatar"> Your roles:
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
</pan-thumb>
<github-corner></github-corner>
<div class="info-container">
<span class="display_name">{{name}}</span>
<span style="font-size:20px;padding-top:20px;display:inline-block;">普通编辑dashboard</span>
<span style="font-size:20px;padding-top:20px;display:inline-block;">editor : dashboard</span>
</div>
</div>
<div>

7
src/views/documentation/index.vue
View File

@@ -1,16 +1,15 @@
<template>
<div class="app-container documentation-container">
<a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">文档</a>
<a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">Github 地址</a>
<a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">{{$t('documentation.documentation')}}</a>
<a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">{{$t('documentation.github')}}</a>
<dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu>
</div>
</template>
<script>
import DropdownMenu from '@/components/Share/dropdownMenu'
export default {
name: 'clipboardDemo',
name: 'documentation',
components: { DropdownMenu },
data() {
return {

10
src/views/errorLog/index.vue
View File

@@ -2,11 +2,13 @@
<div class="errPage-container">
<errorA></errorA>
<errorB></errorB>
<h3>请点击右上角bug小图表</h3>
<!-- $t is vue-i18n global function to translate lang -->
<h3>{{$t('errorLog.tips')}}</h3>
<code>
现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常.
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/error?id=%e4%bb%a3%e7%a0%81">文档介绍</a>
{{$t('errorLog.description')}}
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/error?id=%e4%bb%a3%e7%a0%81">
{{$t('errorLog.documentation')}}
</a>
</code>
<a href="#">
<img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'>

16
src/views/example/tab/components/tabPane.vue
View File

@@ -1,45 +1,45 @@
<template>
<el-table :data="list"border fit highlight-current-row style="width: 100%">
<el-table :data="list" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="序号" width="65" v-loading="loading"
<el-table-column align="center" label="ID" width="65" v-loading="loading"
element-loading-text="请给我点时间！">
<template slot-scope="scope">
<span>{{scope.row.id}}</span>
</template>
</el-table-column>
<el-table-column width="180px" align="center" label="时间">
<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 min-width="300px" label="标题">
<el-table-column min-width="300px" label="Title">
<template slot-scope="scope">
<span>{{scope.row.title}}</span>
<el-tag>{{scope.row.type}}</el-tag>
</template>
</el-table-column>
<el-table-column width="110px" align="center" label="作者">
<el-table-column width="110px" align="center" label="Author">
<template slot-scope="scope">
<span>{{scope.row.author}}</span>
</template>
</el-table-column>
<el-table-column width="80px" label="重要性">
<el-table-column width="120px" label="Importance">
<template slot-scope="scope">
<svg-icon v-for="n in +scope.row.importance" icon-class="star" :key="n"></svg-icon>
</template>
</el-table-column>
<el-table-column align="center" label="阅读数" width="95">
<el-table-column align="center" label="Readings" width="95">
<template slot-scope="scope">
<span>{{scope.row.pageviews}}</span>
</template>
</el-table-column>
<el-table-column class-name="status-col" label="状态" width="110">
<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>

8
src/views/example/tab/index.vue
View File

@@ -20,10 +20,10 @@ export default {
data() {
return {
tabMapOptions: [
{ label: '中国', key: 'CN' },
{ label: '美国', key: 'US' },
{ label: '日本', key: 'JP' },
{ label: '欧元区', key: 'EU' }
{ label: 'China', key: 'CN' },
{ label: 'USA', key: 'US' },
{ label: 'Japan', key: 'JP' },
{ label: 'Eurozone', key: 'EU' }
],
activeName: 'CN',
createdTimes: 0

106
src/views/example/table/complexTable.vue
View File

@@ -1,78 +1,78 @@
<template>
<div class="app-container calendar-list-container">
<div class="filter-container">
<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="标题" v-model="listQuery.title">
<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.title')" v-model="listQuery.title">
</el-input>
<el-select clearable style="width: 90px" class="filter-item" v-model="listQuery.importance" placeholder="重要性">
<el-select clearable style="width: 90px" class="filter-item" v-model="listQuery.importance" :placeholder="$t('table.importance')">
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item">
</el-option>
</el-select>
<el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.type" placeholder="类型">
<el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.type" :placeholder="$t('table.type')">
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key">
</el-option>
</el-select>
<el-select @change='handleFilter' style="width: 120px" class="filter-item" v-model="listQuery.sort" placeholder="排序">
<el-select @change='handleFilter' style="width: 140px" class="filter-item" v-model="listQuery.sort">
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key">
</el-option>
</el-select>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
<el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">{{$t('table.add')}}</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">{{$t('table.export')}}</el-button>
<el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showReviewer">{{$t('table.reviewer')}}</el-checkbox>
</div>
<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
style="width: 100%">
<el-table-column align="center" label="序号" width="65">
<el-table-column align="center" :label="$t('table.id')" width="65">
<template slot-scope="scope">
<span>{{scope.row.id}}</span>
</template>
</el-table-column>
<el-table-column width="180px" align="center" label="时间">
<el-table-column width="150px" align="center" :label="$t('table.date')">
<template slot-scope="scope">
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
</template>
</el-table-column>
<el-table-column min-width="150px" label="标题">
<el-table-column min-width="150px" :label="$t('table.title')">
<template slot-scope="scope">
<span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
<el-tag>{{scope.row.type | typeFilter}}</el-tag>
</template>
</el-table-column>
<el-table-column width="110px" align="center" label="作者">
<el-table-column width="110px" align="center" :label="$t('table.author')">
<template slot-scope="scope">
<span>{{scope.row.author}}</span>
</template>
</el-table-column>
<el-table-column width="110px" v-if='showAuditor' align="center" label="审核人">
<el-table-column width="110px" v-if='showReviewer' align="center" :label="$t('table.reviewer')">
<template slot-scope="scope">
<span style='color:red;'>{{scope.row.auditor}}</span>
<span style='color:red;'>{{scope.row.reviewer}}</span>
</template>
</el-table-column>
<el-table-column width="80px" label="重要性">
<el-table-column width="80px" :label="$t('table.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 align="center" label="阅读数" width="95">
<el-table-column align="center" :label="$t('table.readings')" width="95">
<template slot-scope="scope">
<span v-if="scope.row.pageviews" class="link-type" @click='handleFetchPv(scope.row.pageviews)'>{{scope.row.pageviews}}</span>
<span v-else>无</span>
<span v-else>0</span>
</template>
</el-table-column>
<el-table-column class-name="status-col" label="状态" width="100">
<el-table-column class-name="status-col" :label="$t('table.status')" width="100">
<template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="220" class-name="small-padding">
<el-table-column align="center" :label="$t('table.actions')" width="230" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">发布
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
<el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">{{$t('table.publish')}}
</el-button>
<el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">草稿
<el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">{{$t('table.draft')}}
</el-button>
<el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
<el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">{{$t('table.delete')}}
</el-button>
</template>
</el-table-column>
@@ -86,47 +86,47 @@
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
<el-form-item label="类型" prop="type">
<el-select class="filter-item" v-model="temp.type" placeholder="请选择">
<el-form-item :label="$t('table.type')" prop="type">
<el-select class="filter-item" v-model="temp.type" placeholder="Please select">
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间" prop="timestamp">
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="选择日期时间">
<el-form-item :label="$t('table.date')" prop="timestamp">
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date">
</el-date-picker>
</el-form-item>
<el-form-item label="标题" prop="title">
<el-form-item :label="$t('table.title')" prop="title">
<el-input v-model="temp.title"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select class="filter-item" v-model="temp.status" placeholder="请选择">
<el-form-item :label="$t('table.status')">
<el-select class="filter-item" v-model="temp.status" placeholder="Please select">
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="重要性">
<el-form-item :label="$t('table.importance')">
<el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max='3'></el-rate>
</el-form-item>
<el-form-item label="点评">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="temp.remark">
<el-form-item :label="$t('table.remark')">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="Please input" v-model="temp.remark">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确 定</el-button>
<el-button v-else type="primary" @click="updateData">确 定</el-button>
<el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
<el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
<el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
</div>
</el-dialog>
<el-dialog title="阅读数统计" :visible.sync="dialogPvVisible">
<el-dialog title="Reading statistics" :visible.sync="dialogPvVisible">
<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
<el-table-column prop="key" label="渠道"> </el-table-column>
<el-table-column prop="pv" label="pv"> </el-table-column>
<el-table-column prop="key" label="Channel"> </el-table-column>
<el-table-column prop="pv" label="Pv"> </el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogPvVisible = false">确 定</el-button>
<el-button type="primary" @click="dialogPvVisible = false">{{$t('table.confirm')}}</el-button>
</span>
</el-dialog>
@@ -139,13 +139,13 @@ import waves from '@/directive/waves' // 水波纹指令
import { parseTime } from '@/utils'
const calendarTypeOptions = [
{ key: 'CN', display_name: '中国' },
{ key: 'US', display_name: '美国' },
{ key: 'JP', display_name: '日本' },
{ key: 'EU', display_name: '欧元区' }
{ key: 'CN', display_name: 'China' },
{ key: 'US', display_name: 'USA' },
{ key: 'JP', display_name: 'Japan' },
{ key: 'EU', display_name: 'Eurozone' }
]
// arr to obj ,such as { CN : "中国", US : "美国" }
// arr to obj ,such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
acc[cur.key] = cur.display_name
return acc
@@ -172,9 +172,9 @@ export default {
},
importanceOptions: [1, 2, 3],
calendarTypeOptions,
sortOptions: [{ label: '按ID升序列', key: '+id' }, { label: '按ID降序', key: '-id' }],
sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
statusOptions: ['published', 'draft', 'deleted'],
showAuditor: false,
showReviewer: false,
temp: {
id: undefined,
importance: 1,
@@ -187,8 +187,8 @@ export default {
dialogFormVisible: false,
dialogStatus: '',
textMap: {
update: '编辑',
create: '创建'
update: 'Edit',
create: 'Create'
},
dialogPvVisible: false,
pvData: [],
@@ -267,7 +267,7 @@ export default {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
this.temp.author = '原创作者'
this.temp.author = 'vue-element-admin'
createArticle(this.temp).then(() => {
this.list.unshift(this.temp)
this.dialogFormVisible = false
@@ -333,10 +333,10 @@ export default {
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['时间', '地区', '类型', '标题', '重要性']
const filterVal = ['timestamp', 'province', 'type', 'title', 'importance']
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数据')
excel.export_json_to_excel(tHeader, data, 'table-list')
this.downloadLoading = false
})
},

22
src/views/example/table/dragTable.vue
View File

@@ -3,58 +3,58 @@
<!-- 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%">
<el-table-column align="center" label="序号" width="65">
<el-table-column align="center" label="ID" width="65">
<template slot-scope="scope">
<span>{{scope.row.id}}</span>
</template>
</el-table-column>
<el-table-column width="180px" align="center" label="时间">
<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 min-width="300px" label="标题">
<el-table-column min-width="300px" label="Title">
<template slot-scope="scope">
<span>{{scope.row.title}}</span>
</template>
</el-table-column>
<el-table-column width="110px" align="center" label="作者">
<el-table-column width="110px" align="center" label="Author">
<template slot-scope="scope">
<span>{{scope.row.author}}</span>
</template>
</el-table-column>
<el-table-column width="100px" label="重要性">
<el-table-column width="100px" label="Importance">
<template slot-scope="scope">
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="icon-star" :key="n"></svg-icon>
</template>
</el-table-column>
<el-table-column align="center" label="阅读数" width="95">
<el-table-column align="center" label="Readings" width="95">
<template slot-scope="scope">
<span>{{scope.row.pageviews}}</span>
</template>
</el-table-column>
<el-table-column class-name="status-col" label="状态" width="110">
<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 align="center" label="拖拽" width="80">
<el-table-column align="center" label="Drag" width="80">
<template slot-scope="scope">
<svg-icon class='drag-handler' icon-class="drag"></svg-icon>
</template>
</el-table-column>
</el-table>
<div class='show-d'>默认顺序 &nbsp; {{ oldList}}</div>
<div class='show-d'>拖拽后顺序{{newList}}</div>
<!-- $t is vue-i18n global function to translate lang (lang in @/lang) -->
<div class='show-d'>{{$t('table.dragTips1')}} : &nbsp; {{ oldList}}</div>
<div class='show-d'>{{$t('table.dragTips2')}} : {{newList}}</div>
</div>
</template>

10
src/views/example/table/dynamicTable/fixedThead.vue
View File

@@ -11,7 +11,7 @@
<el-table :data="tableData" :key='key' border fit highlight-current-row style="width: 100%">
<el-table-column prop="name" label="fruitName" width="180"></el-table-column>
<el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
<el-table-column :key='fruit' v-for='fruit in formThead' :label="fruit">
<template slot-scope="scope">
{{scope.row[fruit]}}
</template>
@@ -22,7 +22,7 @@
</template>
<script>
const defaultFormThead = ['apple', 'banana'] // 默认选中项
const defaultFormThead = ['apple', 'banana']
export default {
data() {
@@ -42,15 +42,15 @@ export default {
}
],
key: 1, // table key
formTheadOptions: ['apple', 'banana', 'orange'], // 可选择表头
formTheadOptions: ['apple', 'banana', 'orange'],
checkboxVal: defaultFormThead, // checkboxVal
formThead: defaultFormThead // 默认表头
formThead: defaultFormThead // 默认表头 Default header
}
},
watch: {
checkboxVal(valArr) {
this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
this.key = this.key + 1// 为了保证table 每次都会重渲 （牺牲性能保证效果，当然也可以不用）
this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
}
}
}

4
src/views/example/table/dynamicTable/index.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="app-container">
<div style='margin:0 0 5px 20px'>固定表头 按照表头顺序排序</div>
<div style='margin:0 0 5px 20px'>{{$t('table.dynamicTips1')}}</div>
<fixed-thead></fixed-thead>
<div style='margin:30px 0 5px 20px'>不固定表头 按照点击顺序排序</div>
<div style='margin:30px 0 5px 20px'>{{$t('table.dynamicTips2')}}</div>
<unfixed-thead></unfixed-thead>
</div>
</template>

2
src/views/example/table/dynamicTable/unfixedThead.vue
View File

@@ -12,7 +12,7 @@
<el-table :data="tableData" border fit highlight-current-row style="width: 100%">
<el-table-column prop="name" label="fruitName" width="180">
</el-table-column>
<el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
<el-table-column :key='fruit' v-for='fruit in formThead' :label="fruit">
<template slot-scope="scope">
{{scope.row[fruit]}}
</template>

20
src/views/example/table/inlineEditTable.vue
View File

@@ -3,37 +3,37 @@
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="序号" width="80">
<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="时间">
<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="作者">
<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="重要性">
<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="状态" width="110">
<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="标题">
<el-table-column min-width="300px" label="Title">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
@@ -43,10 +43,10 @@
</template>
</el-table-column>
<el-table-column align="center" label="编辑" width="120">
<el-table-column align="center" label="Actions" width="120">
<template slot-scope="scope">
<el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">完成</el-button>
<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">编辑</el-button>
<el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">Ok</el-button>
<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">Edit</el-button>
</template>
</el-table-column>
@@ -89,7 +89,9 @@ export default {
const items = response.data.items
this.list = items.map(v => {
this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
v.originalTitle = v.title // will be used when user click the cancel botton
return v
})
this.listLoading = false

17
src/views/excel/exportExcel.vue
View File

@@ -1,29 +1,30 @@
<template>
<!-- $t is vue-i18n global function to translate lang -->
<div class="app-container">
<el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出excel</el-button>
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
<el-table-column align="center" label='ID' width="95">
<el-table-column align="center" label='Id' width="95">
<template slot-scope="scope">
{{scope.$index}}
</template>
</el-table-column>
<el-table-column label="文章标题">
<el-table-column label="Title">
<template slot-scope="scope">
{{scope.row.title}}
</template>
</el-table-column>
<el-table-column label="作者" width="95" align="center">
<el-table-column label="Author" width="110" align="center">
<template slot-scope="scope">
<el-tag>{{scope.row.author}}</el-tag>
</template>
</el-table-column>
<el-table-column label="阅读数" width="115" align="center">
<el-table-column label="Readings" width="115" align="center">
<template slot-scope="scope">
{{scope.row.pageviews}}
</template>
</el-table-column>
<el-table-column align="center" prop="created_at" label="发布时间" width="220">
<el-table-column align="center" label="Date" width="220">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
@@ -61,7 +62,7 @@ export default {
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.list
const data = this.formatJson(filterVal, list)

35
src/views/excel/selectExcel.vue
View File

@@ -1,31 +1,32 @@
<template>
<div class="app-container">
<el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出已选择项</el-button>
<!-- $t is vue-i18n global function to translate lang -->
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.selectedExport')}}</el-button>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
ref="multipleTable">
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column align="center" label='ID' width="95">
<el-table-column align="center" label='Id' width="95">
<template slot-scope="scope">
{{scope.$index}}
</template>
</el-table-column>
<el-table-column label="文章标题">
<el-table-column label="Title">
<template slot-scope="scope">
{{scope.row.title}}
</template>
</el-table-column>
<el-table-column label="作者" width="95" align="center">
<el-table-column label="Author" width="110" align="center">
<template slot-scope="scope">
<el-tag>{{scope.row.author}}</el-tag>
</template>
</el-table-column>
<el-table-column label="阅读数" width="115" align="center">
<el-table-column label="Readings" width="115" align="center">
<template slot-scope="scope">
{{scope.row.pageviews}}
</template>
</el-table-column>
<el-table-column align="center" prop="created_at" label="发布时间" width="220">
<el-table-column align="center" label="PDate" width="220">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span>{{scope.row.display_time}}</span>
@@ -66,18 +67,18 @@ export default {
handleDownload() {
if (this.multipleSelection.length) {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.multipleSelection
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel(tHeader, data, this.filename)
this.$refs.multipleTable.clearSelection()
this.downloadLoading = false
})
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.multipleSelection
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel(tHeader, data, this.filename)
this.$refs.multipleTable.clearSelection()
this.downloadLoading = false
})
} else {
this.$message({
message: '请至少选择一条记录',
message: 'Please select at least one item',
type: 'warning'
})
}

1
src/views/layout/components/AppMain.vue
View File

@@ -13,7 +13,6 @@ export default {
name: 'AppMain',
computed: {
cachedViews() {
// console.log(this.$store.state.tagsView.cachedViews)
return this.$store.state.tagsView.cachedViews
}
// key() {

12
src/views/layout/components/Navbar.vue
View File

@@ -7,13 +7,13 @@
<div class="right-menu">
<error-log class="errLog-container right-menu-item"></error-log>
<el-tooltip effect="dark" content="全屏" placement="bottom">
<el-tooltip effect="dark" :content="$t('navbar.screenfull')" placement="bottom">
<screenfull class="screenfull right-menu-item"></screenfull>
</el-tooltip>
<lang-select class="international right-menu-item"></lang-select>
<el-tooltip effect="dark" content="换肤" placement="bottom">
<el-tooltip effect="dark" :content="$t('navbar.theme')" placement="bottom">
<theme-picker class="theme-switch right-menu-item"></theme-picker>
</el-tooltip>
@@ -25,16 +25,16 @@
<el-dropdown-menu slot="dropdown">
<router-link to="/">
<el-dropdown-item>
首页
{{$t('navbar.dashboard')}}
</el-dropdown-item>
</router-link>
<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
<el-dropdown-item>
项目地址
{{$t('navbar.github')}}
</el-dropdown-item>
</a>
<el-dropdown-item divided>
<span @click="logout" style="display:block;">退出登录</span>
<span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -73,7 +73,7 @@ export default {
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
location.reload()// In order to re-instantiate the vue-router object to avoid bugs
})
}
}

14
src/views/login/authredirect.vue
View File

@@ -1,10 +1,10 @@
<script>
export default {
name: 'authredirect',
created() {
const hash = window.location.search.slice(1)
window.opener.location.href = window.location.origin + '/login#' + hash
window.close()
}
export default {
name: 'authredirect',
created() {
const hash = window.location.search.slice(1)
window.opener.location.href = window.location.origin + '/login#' + hash
window.close()
}
}
</script>

38
src/views/login/index.vue
View File

@@ -2,7 +2,7 @@
<div class="login-container">
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
<div class="title-container">
<h3 class="title">{{ translateKey('title')}}</h3>
<h3 class="title">{{$t('login.title')}}</h3>
<lang-select class="set-language"></lang-select>
</div>
<el-form-item prop="username">
@@ -16,29 +16,28 @@
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
placeholder="password" />
<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="password" />
<span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span>
</el-form-item>
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">{{translateKey('logIn')}}</el-button>
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">{{$t('login.logIn')}}</el-button>
<div class="tips">
<span>{{translateKey('username')}} : admin</span>
<span>{{translateKey('password')}} : {{translateKey('any')}}</span>
<span>{{$t('login.username')}} : admin</span>
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
</div>
<div class="tips">
<span>{{translateKey('username')}} : editor </span>
<span>{{translateKey('password')}} : {{translateKey('any')}}</span>
<span style="margin-right:18px;">{{$t('login.username')}} : editor</span>
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
</div>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{translateKey('thirdparty')}}</el-button>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{$t('login.thirdparty')}}</el-button>
</el-form>
<el-dialog :title="translateKey('thirdparty')" :visible.sync="showDialog">
{{translateKey('thirdpartyTips')}}
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
{{$t('login.thirdpartyTips')}}
<br/>
<br/>
<br/>
@@ -51,10 +50,10 @@
<script>
import { isvalidUsername } from '@/utils/validate'
import LangSelect from '@/components/LangSelect'
import socialSign from './socialsignin'
import SocialSign from './socialsignin'
export default {
components: { LangSelect, socialSign },
components: { LangSelect, SocialSign },
name: 'login',
data() {
const validateUsername = (rule, value, callback) => {
@@ -80,20 +79,17 @@ export default {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
},
pwdType: 'password',
passwordType: 'password',
loading: false,
showDialog: false
}
},
methods: {
translateKey(key) {
return this.$t('login.' + key)
},
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = ''
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.pwdType = 'password'
this.passwordType = 'password'
}
},
handleLogin() {
@@ -103,7 +99,6 @@ export default {
this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: '/' })
// this.showDialog = true
}).catch(() => {
this.loading = false
})
@@ -172,7 +167,6 @@ $light_gray:#eee;
color: #454545;
}
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>

4
src/views/permission/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<div style="margin-bottom:15px;">你的权限： {{roles}}</div>
切换权限：
<div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
{{$t('permission.switchRoles')}}：
<el-radio-group v-model="role">
<el-radio-button label="editor"></el-radio-button>
</el-radio-group>

3
src/views/svg-icons/index.vue
View File

@@ -1,7 +1,8 @@
<template>
<div class="icons-container">
<p class="warn-content">
<a href="https://panjiachen.github.io/vue-element-admin-site/#/icon" target="_blank">添加和使用方式</a>
<a href="https://panjiachen.github.io/vue-element-admin-site/#/icon" target="_blank">Add and use
</a>
</p>
<div class="icons-wrapper">
<div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">

26
src/views/theme/index.vue
View File

@@ -2,21 +2,23 @@
<div class="app-container">
<el-card class="box-card">
<div slot="header">
<span style="line-height: 36px;">偏好设置</span>
<a class='link-type link-title' target="_blank" href='https://panjiachen.github.io/vue-element-admin-site/#/theme'>换肤文档</a>
<a class='link-type link-title' target="_blank" href='https://panjiachen.github.io/vue-element-admin-site/#/theme'>
{{$t('theme.documentation')}}
</a>
</div>
<div class="box-item">
<span class="field-label">换肤:</span>
<span class="field-label">{{$t('theme.change')}} : </span>
<el-switch v-model="theme"></el-switch>
<code style="margin-top:15px;">{{$t('theme.tips')}}</code>
</div>
</el-card>
<div class="block">
<el-button type="primary">成功按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</div>
<div class="block">
@@ -24,7 +26,8 @@
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
<el-button type="primary" icon="el-icon-search">Search</el-button>
<el-button type="primary">Upload
<el-button type="primary">
Upload
<i class="el-icon-upload el-icon-right"></i>
</el-button>
</div>
@@ -52,7 +55,7 @@
<script>
import { toggleClass } from '@/utils'
import '@/assets/custom-theme/index.css' // 换肤版本element-ui css
import '@/assets/custom-theme/index.css' // the theme changed version element-ui css
export default {
name: 'theme',
@@ -79,6 +82,9 @@ export default {
</script>
<style scoped>
.field-label{
vertical-align: middle;
}
.box-card {
width: 400px;
margin: 20px auto;

15
src/views/zip/index.vue
View File

@@ -1,29 +1,30 @@
<template>
<div class="app-container">
<el-input style='width:240px;' placeholder="请输入文件名(默认file)" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出zip</el-button>
<!-- $t is vue-i18n global function to translate lang -->
<el-input style='width:300px;' :placeholder="$t('zip.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('zip.export')}} zip</el-button>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
<el-table-column align="center" label='ID' width="95">
<template slot-scope="scope">
{{scope.$index}}
</template>
</el-table-column>
<el-table-column label="文章标题">
<el-table-column label="Title">
<template slot-scope="scope">
{{scope.row.title}}
</template>
</el-table-column>
<el-table-column label="作者" width="95" align="center">
<el-table-column label="Author" width="95" align="center">
<template slot-scope="scope">
<el-tag>{{scope.row.author}}</el-tag>
</template>
</el-table-column>
<el-table-column label="阅读数" width="115" align="center">
<el-table-column label="Readings" width="115" align="center">
<template slot-scope="scope">
{{scope.row.pageviews}}
</template>
</el-table-column>
<el-table-column align="center" prop="created_at" label="发布时间" width="220">
<el-table-column align="center" label="Date" width="220">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span>{{scope.row.display_time}}</span>
@@ -60,7 +61,7 @@ export default {
handleDownload() {
this.downloadLoading = true
import('@/vendor/Export2Zip').then(zip => {
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.list
const data = this.formatJson(filterVal, list)