chore: remove i18n (#1828)
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<div class="components-container">
|
||||
<aside>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') }}
|
||||
Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.
|
||||
</aside>
|
||||
|
||||
<pan-thumb :image="image" />
|
||||
|
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="components-container">
|
||||
<aside>{{ $t('components.backToTopTips1') }}</aside>
|
||||
<aside>{{ $t('components.backToTopTips2') }}</aside>
|
||||
<aside>
|
||||
When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner
|
||||
</aside>
|
||||
<aside>
|
||||
You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally
|
||||
</aside>
|
||||
<div class="placeholder-container">
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
|
@@ -2,7 +2,7 @@
|
||||
<div class="components-container">
|
||||
<aside>
|
||||
Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
|
||||
{{ $t('components.dropzoneTips') }}
|
||||
Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.
|
||||
</aside>
|
||||
<div class="editor-container">
|
||||
<dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
|
||||
|
@@ -79,7 +79,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
language() {
|
||||
return this.languageTypeList[this.$store.getters.language]
|
||||
return this.languageTypeList['en']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@@ -37,7 +37,9 @@
|
||||
</sticky>
|
||||
|
||||
<div class="components-container">
|
||||
<aside>Sticky header, {{ $t('components.stickyTips') }}</aside>
|
||||
<aside>
|
||||
Sticky header, When the page is scrolled to the preset position will be sticky on the top.
|
||||
</aside>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
|
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="components-container">
|
||||
<aside>
|
||||
{{ $t('components.tinymceTips') }}
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{ $t('components.documentation') }}</a>
|
||||
Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html">Documentation</a>
|
||||
</aside>
|
||||
<div>
|
||||
<tinymce v-model="content" :height="300" />
|
||||
|
@@ -1,11 +1,24 @@
|
||||
<template>
|
||||
<div class="app-container documentation-container">
|
||||
<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>
|
||||
<a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
|
||||
<a
|
||||
class="document-btn"
|
||||
target="_blank"
|
||||
href="https://panjiachen.github.io/vue-element-admin-site/"
|
||||
>Documentation</a>
|
||||
<a
|
||||
class="document-btn"
|
||||
target="_blank"
|
||||
href="https://github.com/PanJiaChen/vue-element-admin/"
|
||||
>Github Repository</a>
|
||||
<a
|
||||
class="document-btn"
|
||||
target="_blank"
|
||||
href="https://panjiachen.gitee.io/vue-element-admin-site/zh/"
|
||||
>国内文档</a>
|
||||
<dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DropdownMenu from '@/components/Share/DropdownMenu'
|
||||
|
||||
|
@@ -2,12 +2,11 @@
|
||||
<div class="errPage-container">
|
||||
<ErrorA />
|
||||
<ErrorB />
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<h3>{{ $t('errorLog.tips') }}</h3>
|
||||
<h3>Please click the bug icon in the upper right corner</h3>
|
||||
<aside>
|
||||
{{ $t('errorLog.description') }}
|
||||
Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
|
||||
{{ $t('errorLog.documentation') }}
|
||||
Document introduction
|
||||
</a>
|
||||
</aside>
|
||||
<a href="#">
|
||||
|
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="createPost-container">
|
||||
<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
|
||||
|
||||
<sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
|
||||
<CommentDropdown v-model="postForm.comment_disabled" />
|
||||
<PlatformDropdown v-model="postForm.platforms" />
|
||||
@@ -152,9 +153,6 @@ export default {
|
||||
contentShortLength() {
|
||||
return this.postForm.content_short.length
|
||||
},
|
||||
lang() {
|
||||
return this.$store.getters.language
|
||||
},
|
||||
displayTime: {
|
||||
// set and get is useful when the data
|
||||
// returned by the back end api is different from the front end
|
||||
@@ -196,7 +194,7 @@ export default {
|
||||
})
|
||||
},
|
||||
setTagsViewTitle() {
|
||||
const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article'
|
||||
const title = 'Edit Article'
|
||||
const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
|
||||
this.$store.dispatch('tagsView/updateVisitedView', route)
|
||||
},
|
||||
|
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<aside>
|
||||
{{ $t('example.warning') }}
|
||||
Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support
|
||||
caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching
|
||||
effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all
|
||||
pages directly. See details
|
||||
<a
|
||||
href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
|
||||
target="_blank"
|
||||
|
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div style="display:inline-block;">
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<label class="radio-label" style="padding-left:0;">Filename: </label>
|
||||
<el-input v-model="filename" :placeholder="$t('excel.placeholder')" style="width:350px;" prefix-icon="el-icon-document" />
|
||||
<el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:345px;" prefix-icon="el-icon-document" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<div class="app-container">
|
||||
|
||||
<div>
|
||||
<FilenameOption v-model="filename" />
|
||||
<AutoWidthOption v-model="autoWidth" />
|
||||
<BookTypeOption v-model="bookType" />
|
||||
<el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="handleDownload">
|
||||
{{ $t('excel.export') }} Excel
|
||||
Export Excel
|
||||
</el-button>
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
|
||||
<el-tag type="info">Documentation</el-tag>
|
||||
@@ -51,6 +51,7 @@ import { parseTime } from '@/utils'
|
||||
import FilenameOption from './components/FilenameOption'
|
||||
import AutoWidthOption from './components/AutoWidthOption'
|
||||
import BookTypeOption from './components/BookTypeOption'
|
||||
|
||||
export default {
|
||||
name: 'ExportExcel',
|
||||
components: { FilenameOption, AutoWidthOption, BookTypeOption },
|
||||
|
@@ -1,9 +1,8 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<el-input v-model="filename" :placeholder="$t('excel.placeholder')" style="width:350px;" prefix-icon="el-icon-document" />
|
||||
<el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:350px;" prefix-icon="el-icon-document" />
|
||||
<el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">
|
||||
{{ $t('excel.selectedExport') }}
|
||||
Export Selected Items
|
||||
</el-button>
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
|
||||
<el-tag type="info">Documentation</el-tag>
|
||||
|
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<aside>
|
||||
{{ $t('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
|
||||
<a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
|
||||
</aside>
|
||||
<el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
|
||||
{{ $t('guide.button') }}
|
||||
Show Guide
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
@@ -1,168 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="box-card" style="margin-top:40px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<svg-icon icon-class="international" />
|
||||
<span style="margin-left:10px;">{{ $t('i18nView.title') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio-group v-model="lang" size="small">
|
||||
<el-radio label="zh" border>
|
||||
简体中文
|
||||
</el-radio>
|
||||
<el-radio label="en" border>
|
||||
English
|
||||
</el-radio>
|
||||
<el-radio label="es" border>
|
||||
Español
|
||||
</el-radio>
|
||||
<el-radio label="ja" border>
|
||||
日本語
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-tag style="margin-top:15px;display:block;" type="info">
|
||||
{{ $t('i18nView.note') }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="20" style="margin:100px 15px 50px;">
|
||||
<el-col :span="12" :xs="24">
|
||||
<div class="block">
|
||||
<el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date" />
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-select v-model="value" :placeholder="$t('i18nView.selectPlaceholder')">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-button class="item-btn" size="small">
|
||||
{{ $t('i18nView.default') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="primary">
|
||||
{{ $t('i18nView.primary') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="success">
|
||||
{{ $t('i18nView.success') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="info">
|
||||
{{ $t('i18nView.info') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="warning">
|
||||
{{ $t('i18nView.warning') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="danger">
|
||||
{{ $t('i18nView.danger') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" :xs="24">
|
||||
<el-table :data="tableData" fit highlight-current-row border style="width: 100%">
|
||||
<el-table-column :label="$t('i18nView.tableName')" prop="name" width="100" align="center" />
|
||||
<el-table-column :label="$t('i18nView.tableDate')" prop="date" width="120" align="center" />
|
||||
<el-table-column :label="$t('i18nView.tableAddress')" prop="address" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import local from './local'
|
||||
const viewName = 'i18nView'
|
||||
|
||||
export default {
|
||||
name: 'I18n',
|
||||
data() {
|
||||
return {
|
||||
date: '',
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
}],
|
||||
options: [],
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lang: {
|
||||
get() {
|
||||
return this.$store.state.app.language
|
||||
},
|
||||
set(lang) {
|
||||
this.$i18n.locale = lang
|
||||
this.$store.dispatch('app/setLanguage', lang)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
lang() {
|
||||
this.setOptions()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.$i18n.getLocaleMessage('en')[viewName]) {
|
||||
this.$i18n.mergeLocaleMessage('en', local.en)
|
||||
this.$i18n.mergeLocaleMessage('zh', local.zh)
|
||||
this.$i18n.mergeLocaleMessage('es', local.es)
|
||||
this.$i18n.mergeLocaleMessage('ja', local.ja)
|
||||
}
|
||||
this.setOptions() // set default select options
|
||||
},
|
||||
methods: {
|
||||
setOptions() {
|
||||
this.options = [
|
||||
{
|
||||
value: '1',
|
||||
label: this.$t('i18nView.one')
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: this.$t('i18nView.two')
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: this.$t('i18nView.three')
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box-card {
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.item-btn{
|
||||
margin-bottom: 15px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
.block {
|
||||
padding: 25px;
|
||||
}
|
||||
</style>
|
@@ -1,83 +0,0 @@
|
||||
|
||||
export default {
|
||||
zh: {
|
||||
i18nView: {
|
||||
title: '切换语言',
|
||||
note: '本项目国际化基于 vue-i18n',
|
||||
datePlaceholder: '请选择日期',
|
||||
selectPlaceholder: '请选择',
|
||||
tableDate: '日期',
|
||||
tableName: '姓名',
|
||||
tableAddress: '地址',
|
||||
default: '默认按钮',
|
||||
primary: '主要按钮',
|
||||
success: '成功按钮',
|
||||
info: '信息按钮',
|
||||
warning: '警告按钮',
|
||||
danger: '危险按钮',
|
||||
one: '一',
|
||||
two: '二',
|
||||
three: '三'
|
||||
}
|
||||
},
|
||||
en: {
|
||||
i18nView: {
|
||||
title: 'Switch Language',
|
||||
note: 'The internationalization of this project is based on vue-i18n',
|
||||
datePlaceholder: 'Pick a day',
|
||||
selectPlaceholder: 'Select',
|
||||
tableDate: 'tableDate',
|
||||
tableName: 'tableName',
|
||||
tableAddress: 'tableAddress',
|
||||
default: 'default:',
|
||||
primary: 'primary',
|
||||
success: 'success',
|
||||
info: 'info',
|
||||
warning: 'warning',
|
||||
danger: 'danger',
|
||||
one: 'One',
|
||||
two: 'Two',
|
||||
three: 'Three'
|
||||
}
|
||||
},
|
||||
es: {
|
||||
i18nView: {
|
||||
title: 'Switch Language',
|
||||
note: 'The internationalization of this project is based on vue-i18n',
|
||||
datePlaceholder: 'Pick a day',
|
||||
selectPlaceholder: 'Select',
|
||||
tableDate: 'tableDate',
|
||||
tableName: 'tableName',
|
||||
tableAddress: 'tableAddress',
|
||||
default: 'default:',
|
||||
primary: 'primary',
|
||||
success: 'success',
|
||||
info: 'info',
|
||||
warning: 'warning',
|
||||
danger: 'danger',
|
||||
one: 'One',
|
||||
two: 'Two',
|
||||
three: 'Three'
|
||||
}
|
||||
},
|
||||
ja: {
|
||||
i18nView: {
|
||||
title: '言語切替',
|
||||
note: 'vue-i18nを使っています',
|
||||
datePlaceholder: '日時選択',
|
||||
selectPlaceholder: '選択してください',
|
||||
tableDate: '日時',
|
||||
tableName: '姓名',
|
||||
tableAddress: '住所',
|
||||
default: 'default',
|
||||
primary: 'primary',
|
||||
success: 'success',
|
||||
info: 'info',
|
||||
warning: 'warning',
|
||||
danger: 'danger',
|
||||
one: '1',
|
||||
two: '2',
|
||||
three: '3'
|
||||
}
|
||||
}
|
||||
}
|
@@ -3,10 +3,7 @@
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
||||
|
||||
<div class="title-container">
|
||||
<h3 class="title">
|
||||
{{ $t('login.title') }}
|
||||
</h3>
|
||||
<lang-select class="set-language" />
|
||||
<h3 class="title">Login Form</h3>
|
||||
</div>
|
||||
|
||||
<el-form-item prop="username">
|
||||
@@ -16,7 +13,7 @@
|
||||
<el-input
|
||||
ref="username"
|
||||
v-model="loginForm.username"
|
||||
:placeholder="$t('login.username')"
|
||||
placeholder="Username"
|
||||
name="username"
|
||||
type="text"
|
||||
tabindex="1"
|
||||
@@ -34,7 +31,7 @@
|
||||
ref="password"
|
||||
v-model="loginForm.password"
|
||||
:type="passwordType"
|
||||
:placeholder="$t('login.password')"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
tabindex="2"
|
||||
auto-complete="on"
|
||||
@@ -48,30 +45,26 @@
|
||||
</el-form-item>
|
||||
</el-tooltip>
|
||||
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
|
||||
{{ $t('login.logIn') }}
|
||||
</el-button>
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
|
||||
|
||||
<div style="position:relative">
|
||||
<div class="tips">
|
||||
<span>{{ $t('login.username') }} : admin</span>
|
||||
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
|
||||
<span>Username : admin</span>
|
||||
<span>Password : any</span>
|
||||
</div>
|
||||
<div class="tips">
|
||||
<span style="margin-right:18px;">
|
||||
{{ $t('login.username') }} : editor
|
||||
</span>
|
||||
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
|
||||
<span style="margin-right:18px;">Username : editor</span>
|
||||
<span>Password : any</span>
|
||||
</div>
|
||||
|
||||
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">
|
||||
{{ $t('login.thirdparty') }}
|
||||
Or connect with
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
|
||||
{{ $t('login.thirdpartyTips') }}
|
||||
<el-dialog title="Or connect with" :visible.sync="showDialog">
|
||||
Can not be simulated on local, so please combine you own business simulation! ! !
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
@@ -82,12 +75,11 @@
|
||||
|
||||
<script>
|
||||
import { validUsername } from '@/utils/validate'
|
||||
import LangSelect from '@/components/LangSelect'
|
||||
import SocialSign from './components/SocialSignin'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: { LangSelect, SocialSign },
|
||||
components: { SocialSign },
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!validUsername(value)) {
|
||||
@@ -300,15 +292,6 @@ $light_gray:#eee;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.set-language {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
font-size: 18px;
|
||||
right: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
|
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<aside style="margin-top:15px;">{{ $t('pdf.tips') }}</aside>
|
||||
<aside style="margin-top:15px;">
|
||||
Here we use window.print() to implement the feature of downloading PDF.
|
||||
</aside>
|
||||
<router-link target="_blank" to="/pdf/download">
|
||||
<el-button type="primary">
|
||||
Click to download PDF
|
||||
|
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom:15px;">
|
||||
{{ $t('permission.roles') }}: {{ roles }}
|
||||
Your roles: {{ roles }}
|
||||
</div>
|
||||
{{ $t('permission.switchRoles') }}:
|
||||
Switch roles:
|
||||
<el-radio-group v-model="switchRoles">
|
||||
<el-radio-button label="editor" />
|
||||
<el-radio-button label="admin" />
|
||||
|
@@ -36,7 +36,7 @@
|
||||
|
||||
<div :key="'checkPermission'+key" style="margin-top:60px;">
|
||||
<aside>
|
||||
{{ $t('permission.tips') }}
|
||||
In some cases, using v-permission will have no effect. For example: Element-UI's Tab component or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.
|
||||
<br> e.g.
|
||||
</aside>
|
||||
|
||||
|
@@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-button type="primary" @click="handleAddRole">
|
||||
{{ $t('permission.addRole') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleAddRole">New Role</el-button>
|
||||
|
||||
<el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
|
||||
<el-table-column align="center" label="Role Key" width="220">
|
||||
@@ -22,12 +20,8 @@
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="Operations">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="small" @click="handleEdit(scope)">
|
||||
{{ $t('permission.editPermission') }}
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(scope)">
|
||||
{{ $t('permission.delete') }}
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" @click="handleEdit(scope)">Edit</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(scope)">Delete</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -46,16 +40,20 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Menus">
|
||||
<el-tree ref="tree" :check-strictly="checkStrictly" :data="routesData" :props="defaultProps" show-checkbox node-key="path" class="permission-tree" />
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:check-strictly="checkStrictly"
|
||||
:data="routesData"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
node-key="path"
|
||||
class="permission-tree"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="text-align:right;">
|
||||
<el-button type="danger" @click="dialogVisible=false">
|
||||
{{ $t('permission.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="confirmRole">
|
||||
{{ $t('permission.confirm') }}
|
||||
</el-button>
|
||||
<el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
|
||||
<el-button type="primary" @click="confirmRole">Confirm</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@@ -65,7 +63,6 @@
|
||||
import path from 'path'
|
||||
import { deepClone } from '@/utils'
|
||||
import { getRoutes, getRoles, addRole, deleteRole, updateRole } from '@/api/role'
|
||||
import i18n from '@/lang'
|
||||
|
||||
const defaultRole = {
|
||||
key: '',
|
||||
@@ -103,23 +100,13 @@ export default {
|
||||
async getRoutes() {
|
||||
const res = await getRoutes()
|
||||
this.serviceRoutes = res.data
|
||||
const routes = this.generateRoutes(res.data)
|
||||
this.routes = this.i18n(routes)
|
||||
this.routes = this.generateRoutes(res.data)
|
||||
},
|
||||
async getRoles() {
|
||||
const res = await getRoles()
|
||||
this.rolesList = res.data
|
||||
},
|
||||
i18n(routes) {
|
||||
const app = routes.map(route => {
|
||||
route.title = i18n.t(`route.${route.title}`)
|
||||
if (route.children) {
|
||||
route.children = this.i18n(route.children)
|
||||
}
|
||||
return route
|
||||
})
|
||||
return app
|
||||
},
|
||||
|
||||
// Reshape the routes structure so that it looks the same as the sidebar
|
||||
generateRoutes(routes, basePath = '/') {
|
||||
const res = []
|
||||
|
@@ -9,7 +9,6 @@
|
||||
|
||||
<el-col :span="18">
|
||||
<el-card>
|
||||
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="Activity" name="activity">
|
||||
<activity />
|
||||
@@ -21,7 +20,6 @@
|
||||
<account :user="user" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
|
@@ -1,27 +1,27 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
|
||||
<el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
|
||||
<el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
|
||||
<el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
|
||||
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
|
||||
<el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
|
||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
|
||||
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
|
||||
</el-select>
|
||||
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
|
||||
{{ $t('table.search') }}
|
||||
Search
|
||||
</el-button>
|
||||
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
|
||||
{{ $t('table.add') }}
|
||||
Add
|
||||
</el-button>
|
||||
<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
|
||||
{{ $t('table.export') }}
|
||||
Export
|
||||
</el-button>
|
||||
<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
|
||||
{{ $t('table.reviewer') }}
|
||||
reviewer
|
||||
</el-checkbox>
|
||||
</div>
|
||||
|
||||
@@ -35,63 +35,63 @@
|
||||
style="width: 100%;"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80">
|
||||
<el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('table.date')" width="150px" align="center">
|
||||
<el-table-column label="Date" width="150px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('table.title')" min-width="150px">
|
||||
<el-table-column label="Title" min-width="150px">
|
||||
<template slot-scope="{row}">
|
||||
<span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
|
||||
<el-tag>{{ row.type | typeFilter }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('table.author')" width="110px" align="center">
|
||||
<el-table-column label="Author" width="110px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.author }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
|
||||
<el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span style="color:red;">{{ scope.row.reviewer }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('table.importance')" width="80px">
|
||||
<el-table-column label="Imp" width="80px">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('table.readings')" align="center" width="95">
|
||||
<el-table-column label="Readings" align="center" width="95">
|
||||
<template slot-scope="{row}">
|
||||
<span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
|
||||
<span v-else>0</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('table.status')" class-name="status-col" width="100">
|
||||
<el-table-column label="Status" class-name="status-col" width="100">
|
||||
<template slot-scope="{row}">
|
||||
<el-tag :type="row.status | statusFilter">
|
||||
{{ row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
|
||||
<el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="primary" size="mini" @click="handleUpdate(row)">
|
||||
{{ $t('table.edit') }}
|
||||
Edit
|
||||
</el-button>
|
||||
<el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
|
||||
{{ $t('table.publish') }}
|
||||
Publish
|
||||
</el-button>
|
||||
<el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
|
||||
{{ $t('table.draft') }}
|
||||
Draft
|
||||
</el-button>
|
||||
<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(row,'deleted')">
|
||||
{{ $t('table.delete') }}
|
||||
Delete
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -101,35 +101,35 @@
|
||||
|
||||
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
||||
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
|
||||
<el-form-item :label="$t('table.type')" prop="type">
|
||||
<el-form-item label="Type" prop="type">
|
||||
<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
|
||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('table.date')" prop="timestamp">
|
||||
<el-form-item label="Date" prop="timestamp">
|
||||
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('table.title')" prop="title">
|
||||
<el-form-item label="Title" prop="title">
|
||||
<el-input v-model="temp.title" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('table.status')">
|
||||
<el-form-item label="Status">
|
||||
<el-select v-model="temp.status" class="filter-item" placeholder="Please select">
|
||||
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('table.importance')">
|
||||
<el-form-item label="Imp">
|
||||
<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('table.remark')">
|
||||
<el-form-item label="Remark">
|
||||
<el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">
|
||||
{{ $t('table.cancel') }}
|
||||
Cancel
|
||||
</el-button>
|
||||
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
|
||||
{{ $t('table.confirm') }}
|
||||
Confirm
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
@@ -140,7 +140,7 @@
|
||||
<el-table-column prop="pv" label="Pv" />
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
|
||||
<el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@@ -248,7 +248,7 @@ export default {
|
||||
},
|
||||
handleModifyStatus(row, status) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
message: '操作Success',
|
||||
type: 'success'
|
||||
})
|
||||
row.status = status
|
||||
@@ -295,8 +295,8 @@ export default {
|
||||
this.list.unshift(this.temp)
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '创建成功',
|
||||
title: 'Success',
|
||||
message: 'Created Successfully',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
@@ -328,8 +328,8 @@ export default {
|
||||
}
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '更新成功',
|
||||
title: 'Success',
|
||||
message: 'Update Successfully',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
@@ -339,8 +339,8 @@ export default {
|
||||
},
|
||||
handleDelete(row) {
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '删除成功',
|
||||
title: 'Success',
|
||||
message: 'Delete Successfully',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
|
@@ -52,12 +52,11 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- $t is vue-i18n global function to translate lang (lang in @/lang) -->
|
||||
<div class="show-d">
|
||||
<el-tag style="margin-right:12px;">{{ $t('table.dragTips1') }} :</el-tag> {{ oldList }}
|
||||
<el-tag>The default order :</el-tag> {{ oldList }}
|
||||
</div>
|
||||
<div class="show-d">
|
||||
<el-tag>{{ $t('table.dragTips2') }} :</el-tag> {{ newList }}
|
||||
<el-tag>The after dragging order :</el-tag> {{ newList }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div style="margin:0 0 5px 20px">
|
||||
{{ $t('table.dynamicTips1') }}
|
||||
Fixed header, sorted by header order,
|
||||
</div>
|
||||
<fixed-thead />
|
||||
|
||||
<div style="margin:30px 0 5px 20px">
|
||||
{{ $t('table.dynamicTips2') }}
|
||||
Not fixed header, sorted by click order
|
||||
</div>
|
||||
<unfixed-thead />
|
||||
</div>
|
||||
|
@@ -37,7 +37,13 @@
|
||||
<template slot-scope="{row}">
|
||||
<template v-if="row.edit">
|
||||
<el-input v-model="row.title" class="edit-input" size="small" />
|
||||
<el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">
|
||||
<el-button
|
||||
class="cancel-btn"
|
||||
size="small"
|
||||
icon="el-icon-refresh"
|
||||
type="warning"
|
||||
@click="cancelEdit(row)"
|
||||
>
|
||||
cancel
|
||||
</el-button>
|
||||
</template>
|
||||
@@ -47,10 +53,22 @@
|
||||
|
||||
<el-table-column align="center" label="Actions" width="120">
|
||||
<template slot-scope="{row}">
|
||||
<el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(row)">
|
||||
<el-button
|
||||
v-if="row.edit"
|
||||
type="success"
|
||||
size="small"
|
||||
icon="el-icon-circle-check-outline"
|
||||
@click="confirmEdit(row)"
|
||||
>
|
||||
Ok
|
||||
</el-button>
|
||||
<el-button v-else type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit">
|
||||
<el-button
|
||||
v-else
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-edit"
|
||||
@click="row.edit=!row.edit"
|
||||
>
|
||||
Edit
|
||||
</el-button>
|
||||
</template>
|
||||
|
@@ -3,13 +3,15 @@
|
||||
<el-card class="box-card">
|
||||
<div slot="header">
|
||||
<a class="link-type link-title" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html">
|
||||
{{ $t('theme.documentation') }}
|
||||
Theme documentation
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-item">
|
||||
<span class="field-label">{{ $t('theme.change') }} : </span>
|
||||
<span class="field-label">Change Theme : </span>
|
||||
<el-switch v-model="theme" />
|
||||
<aside style="margin-top:15px;">{{ $t('theme.tips') }}</aside>
|
||||
<aside style="margin-top:15px;">
|
||||
Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
|
||||
</aside>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
@@ -1,9 +1,8 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<el-input v-model="filename" :placeholder="$t('zip.placeholder')" style="width:300px;" prefix-icon="el-icon-document" />
|
||||
<el-input v-model="filename" placeholder="Please enter the file name (default file)" style="width:300px;" prefix-icon="el-icon-document" />
|
||||
<el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="document" @click="handleDownload">
|
||||
{{ $t('zip.export') }} Zip
|
||||
Export Zip
|
||||
</el-button>
|
||||
<el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||
<el-table-column align="center" label="ID" width="95">
|
||||
|
Reference in New Issue
Block a user