Skip to content

V
vue-element-admin

gyf5267218 / vue-element-admin
与 Fork 源项目一致

从无法访问的项目Fork

通知 4
Star 0
Fork 0
V
vue-element-admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 45fef9b4 编写于 作者: 花 花裤衩 提交者： GitHub
浏览文件
操作

Feature/english (#381) 

* 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
上级 83e56488
隐藏空白更改
内联 并排
Showing with 901 addition and 779 deletion
LICENSE
浏览文件 @ 45fef9b4
MIT License MIT License
Copyright (c) 2017 PanJiaChen Copyright (c) 2017-presen PanJiaChen
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal
......
README-en.md 已删除 100644 → 0
浏览文件 @ 83e56488
[![vue](https://img.shields.io/badge/vue-2.4.2-brightgreen.svg)](https://github.com/vuejs/vue)
[![element-ui](https://img.shields.io/badge/element--ui-1.4.2-brightgreen.svg)](https://github.com/ElemeFE/element)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()
## Intro
> In the past half year, I have been building a backend for management dashboard using Vue. Though the backend has contained greater than 70 pages and over 10 permissions, it still takes insignificant effort to maintain the project. So I decide to make it open source so as to share my development experience and progress on backend. The tech stack is mainly [Vue.js](https://github.com/vuejs/vue)+[Element](https://github.com/ElemeFE/element)+[axios](https://github.com/mzabriskie/axios). Since it's a personal project, all data requests are simulated with [Mock.js](https://github.com/nuysoft/Mock). **Note:** if anyone wants to modify or develop based on this project, please remove the mock files.
**Live demo:** http://panjiachen.github.io/vue-element-admin
**Note: element-ui@1.4.2 is used in the project, so vue 2.3.0+ is required.**
- vueAdmin-template: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- electron-vue-admin: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- Donate:[donate](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md#donate)
## Features
- Login/Logout
- Permission authentication
- Sidebar
- Breadcrumb
- Rich text editor
- Markdown editor
- JSON editor
- Drag & drop list
- SplitPane
- Dropzone
- Sticky
- CountTo
- ECharts
- 401, 404 error page
- Error log
- Export Excel
- Upload Excel
- Export Zip
- Table example
- Interactive table example
- Drag & drop table example
- Form example
- Multi-environments distribution
- Dashboard
- Two-factor authentication
- Collapsing sidebar (support nested routes)
- Mock data
- cache tabs example
- screenfull
- markdown2html
- views-tab
- clipboard
## Development
```bash
# Clone project
git clone https://github.com/PanJiaChen/vue-element-admin.git
# Install dependencies
npm install
# Or (not recommended for cnpm due to unknown bugs, use taobao mirror instead)
npm install --registry=https://registry.npm.taobao.org
# Run local dev server
npm run dev
```
Visit in browser: http://localhost:9527
## Distribution
```bash
# Build staged environment with webpack-bundle-analyzer
npm run build:sit-preview
# Build production environment
npm run build:prod
```
## Directory structure
```
├── build // build 
├── config // config
├── src // source code
│   ├── api // all requests
│   ├── assets // static resource like themes, fonts
│   ├── components // global public components
│   ├── directive // global directive
│   ├── filters // global filters
│   ├── mock // mock data
│   ├── router // router
│   ├── store // global status management
│   ├── styles // global styles
│   ├── utils // global public functions
│   ├── view // view
│   ├── App.vue // entry view
│   └── main.js // entry for loading components, initialization
├── static // third-party libraries not packed with Webpack
│   └── Tinymce // rich text
├── .babelrc // babel-loader config
├── eslintrc.js // eslint config
├── .gitignore // gitignore
├── favicon.ico // favicon
├── index.html // html template
└── package.json // package.json
```
## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
## Donate
If you find this project useful, you can buy me a cup of coffee
![donate](https://panjiachen.github.io/donate/donation.png)
## State Management
Only status of user and app configuration is managed by Vuex. Other data are managed by their own business pages.
## Demo
#### Two-factor authentication, supporting WeChat and QQ
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif)
#### Realtime switching themes
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)
#### tabs
![tabs](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/tabs.gif)<br />
#### Collapsing sidebar
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)
#### Drag & drop table
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)
#### Interactive table
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/dynamictable.gif)
#### Uploading cropped avatar
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)
#### Error log
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)
#### Rich text (integrated with Qiniu, watermark and customization)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)
#### Packaging table component
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif)
#### Charts
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif)
#### Exporting to Excel
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png)
#### More
http://panjiachen.github.io/vue-element-admin
## License
MIT
README.md
浏览文件 @ 45fef9b4
...@@ -2,177 +2,151 @@ ...@@ -2,177 +2,151 @@
<img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg"> <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
</p> </p>
# vue-element-admin <p align="center">
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
</a>
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
</a>
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
</a>
</p>
[![vue](https://img.shields.io/badge/vue-2.5.10-brightgreen.svg)](https://github.com/vuejs/vue) English | [简体中文](./README.zh-CN.md)
[![element-ui](https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg)](https://github.com/ElemeFE/element)
[![Build Status](https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master)](https://travis-ci.org/PanJiaChen/vue-element-admin)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]()
**A magical vue admin.** ## Introduction
- [线上地址](http://panjiachen.github.io/vue-element-admin) `vue-element-admin` is a production-ready solution for admin interfaces. Based on [Vue.js](https://github.com/vuejs/vue) and use the UI Toolkit -- [element](https://github.com/ElemeFE/element). `vue-element-admin` is a magical vue admin, it based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/) - [Preview](http://panjiachen.github.io/vue-element-admin)
- [English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md) - [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/)
- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) - [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate) - [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
**本项目的定位是后台集成方案，不适合当基础模板来开发。** **vue-element-admin is a admin interfaces integration solution, which is not suitable for secondary development as a base template.**
- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0**
## 前序准备
你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 和 [element-ui](https://github.com/ElemeFE/element)，提前了解和学习这些知识会对使用本项目有很大的帮助。 - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目 **Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0**
- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
- [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
响应需求，开了一个qq群 `591724180` 方便大家交流 ## Preparation
或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西 You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 和 [element-ui](https://github.com/ElemeFE/element). All data requests for this project are simulated using [Mock.js](https://github.com/nuysoft/Mock). It would be helpful if you have pre-existing knowledge on those.
**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr** **This project is not a scaffolding and is more of an integrated solution.**
**本项目并不是一个脚手架，更倾向于是一个集成解决方案** **This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
**该项目不支持低版本游览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
<p align="center"> <p align="center">
<img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png"> <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
</p> </p>
## 功能 ## Features
- 登录/注销 ```
- 权限验证 - Login / Logout
- 多环境发布 - Permission authentication
- 动态侧边栏（支持多级路由） - Multi-environment build
- 动态面包屑 - Dynamic sidebar (supports multi-level routing)
- 国际化多语言 - Dynamic breadcrumb
- 多种动态换肤 - I18n
- 快捷导航(标签页 支持右键操作) - Customizable theme
- 富文本编辑器 - Tags-view(Tab page Support right-click operation)
- Markdown编辑器 - Rich text editor
- JSON编辑器 - Markdown editor
- Screenfull全屏 - JSON editor
- 列表拖拽 - Screenfull
- Svg Sprite 图标 - Drag and drop list
- Svg Sprite
- Dashboard - Dashboard
- 本地mock数据 - Mock data
- Echarts 图表 - Echarts
- Clipboard(剪贴复制) - Clipboard
- 401/404错误页面 - 401/404 error page
- 错误日志 - Error log
- 导出excel - Export excel
- 导出zip - Export zip
- 前端可视化excel - Front-end visualization excel
- Table example - Table example
- 动态table example - Dynamictable example
- 拖拽table example - Drag and drop table example
- 内联编辑table example - Inline edit table example
- Form example - Form example
- 二步登录 - Two-step login
- SplitPane - SplitPane
- Dropzone - Dropzone
- Sticky - Sticky
- CountTo - CountTo
- Markdown to html - Markdown to html
```
## Getting started
## 开发
```bash ```bash
# 克隆项目 # clone the projice
git clone https://github.com/PanJiaChen/vue-element-admin.git git clone https://github.com/PanJiaChen/vue-element-admin.git
# 安装依赖 # install dependency
npm install npm install
   
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务 # develop
npm run dev npm run dev
``` ```
浏览器访问 http://localhost:9527
## 发布 This will automatically open http://localhost:9527.
## Build
```bash ```bash
# 构建测试环境 # build for test environment
npm run build:sit npm run build:sit
# 构建生成环境 # build for production environment
npm run build:prod npm run build:prod
``` ```
## 其它 ## Advanced
```bash ```bash
# --report to build with bundle size analytics # --report to build with bundle size analytics
npm run build:prod --report npm run build:prod --report
# --preview to start a server in local to preview
npm run build:prod --preview
# lint code # --preview to start a server in local to preview
npm run lint npm run build:prod --preview
```
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/deploy) # lint code
npm run lint
## 目录结构
```shell
├── build // 构建相关  
├── config // 配置相关
├── src // 源代码
│   ├── api // 所有请求
│   ├── assets // 主题 图片等静态资源
│   ├── components // 全局公用组件
│   ├── directive // 全局指令
│   ├── filtres // 全局 filter
│   ├── icons // 项目svg icons
│   ├── lang // 国际化 lang
│   ├── mock // 项目mock 模拟数据
│   ├── router // 路由
│   ├── store // 全局 store
│   ├── styles // 全局样式
│   ├── utils // 全局公用方法
│   ├── vendor // 公用vendor
│   ├── views // views
│   ├── App.vue // 入口页面
│   ├── main.js // 入口js 初始化 加载组件等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│   └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── .eslintrc.js // eslint 配置项
├── .postcssrc.js // postcss 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
# auto fix
npm run lint -- --fix
``` ```
Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/deploy) for more information
## Changelog ## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
## Online Demo ## Online Demo
[查看更多demo](http://panjiachen.github.io/vue-element-admin) [Preview](http://panjiachen.github.io/vue-element-admin)
## Donate ## Donate
If you find this project useful, you can buy me a cup of coffee If you find this project useful, you can buy author a glass of juice :tropical_drink:
![donate](https://panjiachen.github.io/donate/donation.png)
![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png)
[Paypal Me](https://www.paypal.me/panfree23)
## License ## License
MIT [MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
Copyright (c) 2017-presen PanJiaChen
README.zh-CN.md 0 → 100644
浏览文件 @ 45fef9b4
<p align="center">
<img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
</p>
<p align="center">
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg" alt="element-ui">
</a>
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
</a>
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
</a>
</p>
简体中文 | [English](./README.md)
## 简介
`vue-element-admin` 是一个后台集成解决方案，它基于 [Vue.js](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证等很多功能特性，相信不管你的需求是什么，本项目都能帮助到你。
- [在线访问](http://panjiachen.github.io/vue-element-admin)
- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/)
- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate)
**本项目的定位是后台集成方案，不适合当基础模板来开发。**
- 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0**
## 前序准备
你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) and [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
- [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
响应需求，开了一个qq群 `591724180` 方便大家交流
或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
**本项目并不是一个脚手架，更倾向于是一个集成解决方案**
**该项目不支持低版本浏览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
<p align="center">
<img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
</p>
## 功能
```
- 登录/注销
- 权限验证
- 多环境发布
- 动态侧边栏（支持多级路由）
- 动态面包屑
- 国际化多语言
- 多种动态换肤
- 快捷导航(标签页)
- 富文本编辑器
- Markdown编辑器
- JSON编辑器
- Screenfull全屏
- 列表拖拽
- Svg Sprite 图标
- Dashboard
- 本地mock数据
- Echarts 图表
- Clipboard(剪贴复制)
- 401/404错误页面
- 错误日志
- 导出excel
- 导出zip
- 前端可视化excel
- Table example
- 动态table example
- 拖拽table example
- 内联编辑table example
- Form example
- 二步登录
- SplitPane
- Dropzone
- Sticky
- CountTo
- Markdown2html
```
## 开发
```bash
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 安装依赖
npm install
   
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务
npm run dev
```
浏览器访问 http://localhost:9527
## 发布
```bash
# 构建测试环境
npm run build:sit
# 构建生成环境
npm run build:prod
```
## 其它
```bash
# --report to build with bundle size analytics
npm run build:prod --report
# --preview to start a server in local to preview
npm run build:prod --preview
# lint code
npm run lint
# auto fix
npm run lint -- --fix
```
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/deploy)
## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
## Online Demo
[在线 Demo](http://panjiachen.github.io/vue-element-admin)
## Donate
如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
![donate](https://panjiachen.github.io/donate/donation.png)
[Paypal Me](https://www.paypal.me/panfree23)
## License
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
Copyright (c) 2017-presen PanJiaChen
src/components/Charts/lineMarker.vue
浏览文件 @ 45fef9b4
...@@ -46,13 +46,14 @@ export default { ...@@ -46,13 +46,14 @@ export default {
this.chart.setOption({ this.chart.setOption({
backgroundColor: '#394056', backgroundColor: '#394056',
title: { title: {
text: '请求数', top: 20,
text: 'Requests',
textStyle: { textStyle: {
fontWeight: 'normal', fontWeight: 'normal',
fontSize: 16, fontSize: 16,
color: '#F1F1F3' color: '#F1F1F3'
}, },
left: '6%' left: '1%'
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -63,11 +64,12 @@ export default { ...@@ -63,11 +64,12 @@ export default {
} }
}, },
legend: { legend: {
top: 20,
icon: 'rect', icon: 'rect',
itemWidth: 14, itemWidth: 14,
itemHeight: 5, itemHeight: 5,
itemGap: 13, itemGap: 13,
data: ['移动', '电信', '联通'], data: ['CMCC', 'CTCC', 'CUCC'],
right: '4%', right: '4%',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
...@@ -75,9 +77,10 @@ export default { ...@@ -75,9 +77,10 @@ export default {
} }
}, },
grid: { grid: {
top: 100,
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '2%',
containLabel: true containLabel: true
}, },
xAxis: [{ xAxis: [{
...@@ -92,7 +95,7 @@ export default { ...@@ -92,7 +95,7 @@ export default {
}], }],
yAxis: [{ yAxis: [{
type: 'value', type: 'value',
name: '单位（%）', name: '(%)',
axisTick: { axisTick: {
show: false show: false
}, },
...@@ -114,7 +117,7 @@ export default { ...@@ -114,7 +117,7 @@ export default {
} }
}], }],
series: [{ series: [{
name: '移动', name: 'CMCC',
type: 'line', type: 'line',
smooth: true, smooth: true,
symbol: 'circle', symbol: 'circle',
...@@ -148,7 +151,7 @@ export default { ...@@ -148,7 +151,7 @@ export default {
}, },
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122] data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
}, { }, {
name: '电信', name: 'CTCC',
type: 'line', type: 'line',
smooth: true, smooth: true,
symbol: 'circle', symbol: 'circle',
...@@ -182,7 +185,7 @@ export default { ...@@ -182,7 +185,7 @@ export default {
}, },
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150] data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
}, { }, {
name: '联通', name: 'CUCC',
type: 'line', type: 'line',
smooth: true, smooth: true,
symbol: 'circle', symbol: 'circle',
......
src/components/Charts/mixChart.vue
浏览文件 @ 45fef9b4
...@@ -46,15 +46,16 @@ export default { ...@@ -46,15 +46,16 @@ export default {
const xData = (function() { const xData = (function() {
const data = [] const data = []
for (let i = 1; i < 13; i++) { for (let i = 1; i < 13; i++) {
data.push(i + '月份') data.push(i + 'month')
} }
return data return data
}()) }())
this.chart.setOption({ this.chart.setOption({
backgroundColor: '#344b58', backgroundColor: '#344b58',
title: { title: {
text: '统计', text: 'statistics',
x: '4%', x: '20',
top: '20',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: '22' fontSize: '22'
...@@ -81,12 +82,12 @@ export default { ...@@ -81,12 +82,12 @@ export default {
} }
}, },
legend: { legend: {
x: '15%', x: '5%',
top: '10%', top: '10%',
textStyle: { textStyle: {
color: '#90979c' color: '#90979c'
}, },
data: ['女', '男', '平均'] data: ['female', 'male', 'average']
}, },
calculable: true, calculable: true,
xAxis: [{ xAxis: [{
...@@ -158,9 +159,9 @@ export default { ...@@ -158,9 +159,9 @@ export default {
end: 35 end: 35
}], }],
series: [{ series: [{
name: '女', name: 'female',
type: 'bar', type: 'bar',
stack: '总量', stack: 'total',
barMaxWidth: 35, barMaxWidth: 35,
barGap: '10%', barGap: '10%',
itemStyle: { itemStyle: {
...@@ -195,9 +196,9 @@ export default { ...@@ -195,9 +196,9 @@ export default {
}, },
{ {
name: '男', name: 'male',
type: 'bar', type: 'bar',
stack: '总量', stack: 'total',
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(0,191,183,1)', color: 'rgba(0,191,183,1)',
...@@ -226,9 +227,9 @@ export default { ...@@ -226,9 +227,9 @@ export default {
220 220
] ]
}, { }, {
name: '平均', name: 'average',
type: 'line', type: 'line',
stack: '总量', stack: 'total',
symbolSize: 10, symbolSize: 10,
symbol: 'circle', symbol: 'circle',
itemStyle: { itemStyle: {
......
src/components/Upload/singleImage3.vue
浏览文件 @ 45fef9b4
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
</el-upload> </el-upload>
<div class="image-preview image-app-preview"> <div class="image-preview image-app-preview">
<div class="image-preview-wrapper" v-show="imageUrl.length>1"> <div class="image-preview-wrapper" v-show="imageUrl.length>1">
<div class='app-fake-conver'>&nbsp&nbsp全球 付费节目单 最热 经济</div>
<img :src="imageUrl"> <img :src="imageUrl">
<div class="image-preview-action"> <div class="image-preview-action">
<i @click="rmImage" class="el-icon-delete"></i> <i @click="rmImage" class="el-icon-delete"></i>
......
src/errorLog.js
浏览文件 @ 45fef9b4
...@@ -3,7 +3,10 @@ import store from './store' ...@@ -3,7 +3,10 @@ import store from './store'
// you can set only in production env show the error-log // you can set only in production env show the error-log
// if (process.env.NODE_ENV === 'production') { // if (process.env.NODE_ENV === 'production') {
Vue.config.errorHandler = function(err, vm, info, a) { Vue.config.errorHandler = function(err, vm, info, a) {
// Don't ask me why I use Vue.nextTick, it just a hack.
// detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
Vue.nextTick(() => { Vue.nextTick(() => {
store.dispatch('addErrorLog', { store.dispatch('addErrorLog', {
err, err,
...@@ -14,4 +17,5 @@ Vue.config.errorHandler = function(err, vm, info, a) { ...@@ -14,4 +17,5 @@ Vue.config.errorHandler = function(err, vm, info, a) {
console.error(err, info) console.error(err, info)
}) })
} }
// } // }
src/icons/svg/trendChart1.svg 已删除 100644 → 0
浏览文件 @ 83e56488
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994155726" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8554" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M44.521739 0h44.521739v979.478261H44.521739zM267.130435 534.26087h44.521739v445.217391H267.130435zM489.73913 311.652174h44.52174v667.826087h-44.52174zM712.347826 712.347826h44.521739v267.130435h-44.521739zM934.956522 445.217391h44.521739v534.26087h-44.521739z" fill="" p-id="8555"></path></svg>
\ No newline at end of file
src/icons/svg/trendChart2.svg 已删除 100644 → 0
浏览文件 @ 83e56488
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994177895" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8894" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M712.347826 0h44.521739v979.478261h-44.521739zM267.130435 534.26087h44.521739v445.217391H267.130435zM489.73913 311.652174h44.52174v667.826087h-44.52174zM44.521739 712.347826h44.521739v267.130435H44.521739zM934.956522 445.217391h44.521739v534.26087h-44.521739z" fill="" p-id="8895"></path></svg>
\ No newline at end of file
src/icons/svg/trendChart3.svg 已删除 100644 → 0
浏览文件 @ 83e56488
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994166937" class="icon" style="" viewBox="0 0 1131 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8786" xmlns:xlink="http://www.w3.org/1999/xlink" width="70.6875" height="64"><defs><style type="text/css"></style></defs><path d="M0 0h53.894737v970.105263H0zM269.473684 431.157895h53.894737v538.947368H269.473684zM538.947368 161.684211h53.894737v808.421052h-53.894737zM808.421053 646.736842h53.894736v323.368421h-53.894736zM1077.894737 323.368421h53.894737v646.736842h-53.894737z" fill="" p-id="8787"></path></svg>
\ No newline at end of file
src/lang/en.js
浏览文件 @ 45fef9b4
...@@ -20,7 +20,7 @@ export default { ...@@ -20,7 +20,7 @@ export default {
backToTop: 'BackToTop', backToTop: 'BackToTop',
charts: 'Charts', charts: 'Charts',
keyboardChart: 'Keyboard Chart', keyboardChart: 'Keyboard Chart',
lineChart: 'Line chart', lineChart: 'Line Chart',
mixChart: 'Mix Chart', mixChart: 'Mix Chart',
example: 'Example', example: 'Example',
Table: 'Table', Table: 'Table',
...@@ -45,6 +45,13 @@ export default { ...@@ -45,6 +45,13 @@ export default {
clipboardDemo: 'Clipboard', clipboardDemo: 'Clipboard',
i18n: 'I18n' i18n: 'I18n'
}, },
navbar: {
logOut: 'Log Out',
dashboard: 'Dashboard',
github: 'Github',
screenfull: 'screenfull',
theme: 'theme'
},
login: { login: {
title: 'Login Form', title: 'Login Form',
logIn: 'Log in', logIn: 'Log in',
...@@ -52,6 +59,68 @@ export default { ...@@ -52,6 +59,68 @@ export default {
password: 'Password', password: 'Password',
any: 'any', any: 'any',
thirdparty: 'Or connect with', thirdparty: 'Or connect with',
thirdpartyTips: 'Local can not be simulated, please combine their own business simulation! ! !' thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
},
documentation: {
documentation: 'Documentation',
github: 'Github Repository'
},
permission: {
roles: 'Your roles',
switchRoles: 'Switch roles'
},
components: {
documentation: 'Documentation',
tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
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.',
stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
backToTopTips2: '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',
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.'
},
table: {
dynamicTips1: 'Fixed header, sorted by header order',
dynamicTips2: 'Not fixed header, sorted by click order',
dragTips1: 'The default order',
dragTips2: 'The after dragging order',
title: 'Title',
importance: 'Imp',
type: 'Type',
remark: 'Remark',
search: 'Search',
add: 'Add',
export: 'Export',
reviewer: 'reviewer',
id: 'ID',
date: 'Date',
author: 'Author',
readings: 'Readings',
status: 'Status',
actions: 'Actions',
edit: 'Edit',
publish: 'Publish',
draft: 'Draft',
delete: 'Delete',
cancel: 'Cancel',
confirm: 'Confirm'
},
errorLog: {
tips: 'Please click the bug icon in the upper right corner',
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.',
documentation: 'Document introduction'
},
excel: {
export: 'Export',
selectedExport: 'Export selected items',
placeholder: 'Please enter the file name(default excel-list)'
},
zip: {
export: 'Export',
placeholder: 'Please enter the file name(default file)'
},
theme: {
change: 'Theme change',
documentation: 'Theme documentation',
tips: '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.'
} }
} }
src/lang/zh.js
浏览文件 @ 45fef9b4
...@@ -45,6 +45,13 @@ export default { ...@@ -45,6 +45,13 @@ export default {
clipboardDemo: 'clipboard', clipboardDemo: 'clipboard',
i18n: '国际化' i18n: '国际化'
}, },
navbar: {
logOut: '退出登录',
dashboard: '首页',
github: '项目地址',
screenfull: '全屏',
theme: '换肤'
},
login: { login: {
title: '系统登录', title: '系统登录',
logIn: '登录', logIn: '登录',
...@@ -53,5 +60,67 @@ export default { ...@@ -53,5 +60,67 @@ export default {
any: '随便填', any: '随便填',
thirdparty: '第三方登录', thirdparty: '第三方登录',
thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！' thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
},
documentation: {
documentation: '文档',
github: 'Github 地址'
},
permission: {
roles: '你的权限',
switchRoles: '切换权限'
},
components: {
documentation: '文档',
tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',
stickyTips: '当页面滚动到预设的位置会吸附在顶部',
backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'
},
table: {
dynamicTips1: '固定表头, 按照表头顺序排序',
dynamicTips2: '不固定表头, 按照点击顺序排序',
dragTips1: '默认顺序',
dragTips2: '拖拽后顺序',
title: '标题',
importance: '重要性',
type: '类型',
remark: '点评',
search: '搜索',
add: '添加',
export: '导出',
reviewer: '审核人',
id: '序号',
date: '时间',
author: '作者',
readings: '阅读数',
status: '状态',
actions: '操作',
edit: '编辑',
publish: '发布',
draft: '草稿',
delete: '删除',
cancel: '取 消',
confirm: '确 定'
},
errorLog: {
tips: '请点击右上角bug小图标',
description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',
documentation: '文档介绍'
},
excel: {
export: '导出',
selectedExport: '导出已选择项',
placeholder: '请输入文件名(默认excel-list)'
},
zip: {
export: '导出',
placeholder: '请输入文件名(默认file)'
},
theme: {
change: '换肤',
documentation: '换肤文档',
tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'
} }
} }
src/main.js
浏览文件 @ 45fef9b4
...@@ -15,12 +15,12 @@ import i18n from './lang' // Internationalization ...@@ -15,12 +15,12 @@ import i18n from './lang' // Internationalization
import './icons' // icon import './icons' // icon
import './errorLog'// error log import './errorLog'// error log
import './permission' // permission control import './permission' // permission control
import './mock' // simulation data generator import './mock' // simulation data
import * as filters from './filters' // global filter import * as filters from './filters' // global filters
Vue.use(Element, { Vue.use(Element, {
size: 'medium', size: 'medium', // set element-ui default size
i18n: (key, value) => i18n.t(key, value) i18n: (key, value) => i18n.t(key, value)
}) })
......
src/mock/article.js
浏览文件 @ 45fef9b4
...@@ -8,9 +8,9 @@ for (let i = 0; i < count; i++) { ...@@ -8,9 +8,9 @@ for (let i = 0; i < count; i++) {
List.push(Mock.mock({ List.push(Mock.mock({
id: '@increment', id: '@increment',
timestamp: +Mock.Random.date('T'), timestamp: +Mock.Random.date('T'),
author: '@cname', author: '@first',
auditor: '@cname', reviewer: '@first',
title: '@ctitle(10, 20)', title: '@title(5, 10)',
forecast: '@float(0, 100, 2, 2)', forecast: '@float(0, 100, 2, 2)',
importance: '@integer(1, 3)', importance: '@integer(1, 3)',
'type|1': ['CN', 'US', 'JP', 'EU'], 'type|1': ['CN', 'US', 'JP', 'EU'],
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
} }
}, },
getPv: () => ({ getPv: () => ({
pvData: [{ key: 'PC网站', pv: 1024 }, { key: 'mobile网站', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }] pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
}), }),
getArticle: () => ({ getArticle: () => ({
id: 120000000001, id: 120000000001,
......
src/permission.js
浏览文件 @ 45fef9b4
import router from './router' import router from './router'
import store from './store' import store from './store'
import NProgress from 'nprogress' // Progress 进度条 import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// Progress 进度条样式 import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // 验权 import { getToken } from '@/utils/auth' // getToken from cookie
import { Message } from 'element-ui' import { Message } from 'element-ui'
// permissiom judge // permissiom judge
function hasPermission(roles, permissionRoles) { function hasPermission(roles, permissionRoles) {
if (roles.indexOf('admin') >= 0) return true // admin权限 直接通过 if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
if (!permissionRoles) return true if (!permissionRoles) return true
return roles.some(role => permissionRoles.indexOf(role) >= 0) return roles.some(role => permissionRoles.indexOf(role) >= 0)
} }
const whiteList = ['/login', '/authredirect']// 不重定向白名单 const whiteList = ['/login', '/authredirect']// no redirect whitelist
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start() // 开启Progress NProgress.start() // start progress bar
if (getToken()) { // 判断是否有token if (getToken()) { // 判断是否有token
if (to.path === '/login') { if (to.path === '/login') {
next({ path: '/' }) next({ path: '/' })
...@@ -26,11 +26,11 @@ router.beforeEach((to, from, next) => { ...@@ -26,11 +26,11 @@ router.beforeEach((to, from, next) => {
const roles = res.data.role const roles = res.data.role
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表 store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,replace: true so the navigation will not leave a history record next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
}) })
}).catch(() => { }).catch(() => {
store.dispatch('FedLogOut').then(() => { store.dispatch('FedLogOut').then(() => {
Message.error('验证失败,请重新登录') Message.error('Verification failed, please login again')
next({ path: '/login' }) next({ path: '/login' })
}) })
}) })
...@@ -56,5 +56,5 @@ router.beforeEach((to, from, next) => { ...@@ -56,5 +56,5 @@ router.beforeEach((to, from, next) => {
}) })
router.afterEach(() => { router.afterEach(() => {
NProgress.done() // 结束Progress NProgress.done() // finish progress bar
}) })
src/router/index.js
浏览文件 @ 45fef9b4
...@@ -9,6 +9,10 @@ Vue.use(Router) ...@@ -9,6 +9,10 @@ Vue.use(Router)
/* Layout */ /* Layout */
import Layout from '../views/layout/Layout' import Layout from '../views/layout/Layout'
/** note: submenu only apppear when children.length>=1
* detail see https://panjiachen.github.io/vue-element-admin-site/#/router-and-nav?id=sidebar
**/
/** /**
* hidden: true if `hidden:true` will not show in the sidebar(default is false) * hidden: true if `hidden:true` will not show in the sidebar(default is false)
* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb * redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb
......
src/styles/element-ui.scss
浏览文件 @ 45fef9b4
...@@ -27,6 +27,13 @@ ...@@ -27,6 +27,13 @@
} }
} }
.fixed-width{
.el-button--mini{
padding: 7px 10px;
width: 60px;
}
}
.status-col { .status-col {
.cell { .cell {
padding: 0 10px; padding: 0 10px;
......
src/styles/index.scss
浏览文件 @ 45fef9b4
...@@ -102,7 +102,8 @@ code { ...@@ -102,7 +102,8 @@ code {
margin-bottom: 20px; margin-bottom: 20px;
display: block; display: block;
line-height: 36px; line-height: 36px;
font-size: 14px; font-size: 15px;
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
a { a {
color: #337ab7; color: #337ab7;
cursor: pointer; cursor: pointer;
......
src/utils/clipboard.js
浏览文件 @ 45fef9b4
...@@ -3,7 +3,7 @@ import Clipboard from 'clipboard' ...@@ -3,7 +3,7 @@ import Clipboard from 'clipboard'
function clipboardSuccess() { function clipboardSuccess() {
Vue.prototype.$message({ Vue.prototype.$message({
message: '复制成功', message: 'Copy successfully',
type: 'success', type: 'success',
duration: 1500 duration: 1500
}) })
...@@ -11,7 +11,7 @@ function clipboardSuccess() { ...@@ -11,7 +11,7 @@ function clipboardSuccess() {
function clipboardError() { function clipboardError() {
Vue.prototype.$message({ Vue.prototype.$message({
message: '复制失败', message: 'Copy failed',
type: 'error' type: 'error'
}) })
} }
......
src/utils/i18n.js
浏览文件 @ 45fef9b4
// translate router.meta.title , be used in breadcrumb sidebar tagsview // translate router.meta.title, be used in breadcrumb sidebar tagsview
export function generateTitle(title) { export function generateTitle(title) {
return this.$t('route.' + title) // $t :this method from vue-i18n ,inject in @/lang/index.js return this.$t('route.' + title) // $t :this method from vue-i18n, inject in @/lang/index.js
} }
src/utils/request.js
浏览文件 @ 45fef9b4
...@@ -3,17 +3,17 @@ import { Message } from 'element-ui' ...@@ -3,17 +3,17 @@ import { Message } from 'element-ui'
import store from '@/store' import store from '@/store'
import { getToken } from '@/utils/auth' import { getToken } from '@/utils/auth'
// 创建axios实例 // create an axios instance
const service = axios.create({ const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间 timeout: 5000 // request timeout
}) })
// request拦截器 // request interceptor
service.interceptors.request.use(config => { service.interceptors.request.use(config => {
// Do something before request is sent // Do something before request is sent
if (store.getters.token) { if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改 config.headers['X-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
} }
return config return config
}, error => { }, error => {
...@@ -22,7 +22,7 @@ service.interceptors.request.use(config => { ...@@ -22,7 +22,7 @@ service.interceptors.request.use(config => {
Promise.reject(error) Promise.reject(error)
}) })
// respone拦截器 // respone interceptor
service.interceptors.response.use( service.interceptors.response.use(
response => response, response => response,
/** /**
......
src/views/charts/keyboard.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="components-container" style='height:100vh'> <div class='chart-container'>
<div class='chart-container'> <chart height='100%' width='100%'></chart>
<chart height='100%' width='100%'></chart>
</div>
</div> </div>
</template> </template>
...@@ -18,8 +16,9 @@ export default { ...@@ -18,8 +16,9 @@ export default {
<style scoped> <style scoped>
.chart-container{ .chart-container{
position: relative; position: relative;
padding: 20px;
width: 100%; width: 100%;
height: 90%; height: 85vh;
} }
</style> </style>
src/views/charts/line.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="components-container" style='height:100vh'> <div class='chart-container'>
<div class='chart-container'> <chart height='100%' width='100%'></chart>
<chart height='100%' width='100%'></chart>
</div>
</div> </div>
</template> </template>
...@@ -18,8 +16,9 @@ export default { ...@@ -18,8 +16,9 @@ export default {
<style scoped> <style scoped>
.chart-container{ .chart-container{
position: relative; position: relative;
padding:20px;
width: 100%; width: 100%;
height: 80%; height:85vh;
} }
</style> </style>
src/views/charts/mixChart.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="components-container" style='height:100vh'> <div class='chart-container'>
<div class='chart-container'> <chart height='100%' width='100%'></chart>
<chart height='100%' width='100%'></chart>
</div>
</div> </div>
</template> </template>
...@@ -18,9 +16,9 @@ export default { ...@@ -18,9 +16,9 @@ export default {
<style scoped> <style scoped>
.chart-container{ .chart-container{
position: relative; position: relative;
padding: 20px;
width: 100%; width: 100%;
height: 90%; height:85vh;
padding-bottom: 40px;
} }
</style> </style>
src/views/clipboard/index.vue
浏览文件 @ 45fef9b4
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<div class="app-container"> <div class="app-container">
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane label="use clipboard directly" name="directly"> <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-button type="primary" icon="document" @click='handleCopy(inputData,$event)'>copy</el-button>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="use clipboard by v-directive" name="v-directive"> <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-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
......
src/views/components-demo/avatarUpload.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="components-container"> <div class="components-container">
<code>这里核心代码用的是 <code>This is based on
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a> <a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component {{$t('components.imageUploadTips')}}
</code> </code>
<pan-thumb :image="image"></pan-thumb> <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> </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> :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
</div> </div>
</template> </template>
......
src/views/components-demo/backToTop.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="components-container"> <div class="components-container">
<code>页面滚动到指定位置会在右下角出现返回顶部按钮</code> <code>{{$t('components.backToTopTips1')}}</code>
<code>可自定义按钮的样式、show/hide临界点、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素 </code> <code>{{$t('components.backToTopTips2')}}</code>
<div>我是占位</div> <div class="placeholder-container">
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> </div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<div>我是占位</div>
<!--可自定义按钮的样式、show/hide临界点、返回的位置 --> <!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
<!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素 --> <!--如需文字提示，可在外部添加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> <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
</el-tooltip> </el-tooltip>
</div> </div>
...@@ -148,10 +135,16 @@ export default { ...@@ -148,10 +135,16 @@ export default {
width: '40px', width: '40px',
height: '40px', height: '40px',
'border-radius': '4px', 'border-radius': '4px',
'line-height': '45px', // 请保持与高度一致以垂直居中 'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
background: '#e7eaf1'// 按钮的背景颜色 background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
} }
} }
} }
} }
</script> </script>
<style scoped>
.placeholder-container div {
margin: 10px;
}
</style>
src/views/components-demo/dndList.vue
浏览文件 @ 45fef9b4
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a> <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
</code> </code>
<div class="editor-container"> <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>
</div> </div>
</template> </template>
......
src/views/components-demo/dropzone.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="components-container"> <div class="components-container">
<code> <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> </code>
<div class="editor-container"> <div class="editor-container">
<dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone> <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 { ...@@ -19,11 +19,11 @@ export default {
methods: { methods: {
dropzoneS(file) { dropzoneS(file) {
console.log(file) console.log(file)
this.$message({ message: '上传成功', type: 'success' }) this.$message({ message: 'Upload success', type: 'success' })
}, },
dropzoneR(file) { dropzoneR(file) {
console.log(file) console.log(file)
this.$message({ message: '删除成功', type: 'success' }) this.$message({ message: 'Delete success', type: 'success' })
} }
} }
} }
......
src/views/components-demo/markdown.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="components-container"> <div class="components-container">
<code>Markdown 我们这里选用了 <code>Markdown is based on
<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下 <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 target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
相关文章 </a> 相关文章 </a>
</code> </code>
<div class="editor-container"> <div class="editor-container">
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor> <markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
</div> </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 v-html="html"></div>
</div> </div>
</template> </template>
......
src/views/components-demo/splitpane.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="components-container"> <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="http://codepen.io/" target="_blank"> codepen</a>,
<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </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'>项目地址</a> <a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'> Github repository</a>
</code> </code>
<split-pane v-on:resize="resize" split="vertical"> <split-pane v-on:resize="resize" split="vertical">
<template slot="paneL"> <template slot="paneL">
......
src/views/components-demo/sticky.vue
浏览文件 @ 45fef9b4
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div> <div>
<sticky className="sub-navbar"> <sticky className="sub-navbar">
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<el-button> <el-button plain>
平台<i class="el-icon-caret-bottom el-icon--right"></i> Platform<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button> </el-button>
<el-dropdown-menu class="no-border" slot="dropdown"> <el-dropdown-menu class="no-border" slot="dropdown">
<el-checkbox-group v-model="platforms" style="padding: 5px 15px;"> <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
...@@ -15,79 +15,79 @@ ...@@ -15,79 +15,79 @@
</el-dropdown> </el-dropdown>
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<el-button> <el-button plain>
外链<i class="el-icon-caret-bottom el-icon--right"></i> Link<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button> </el-button>
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown"> <el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
<el-input placeholder="请输入内容" v-model="url"> <el-input placeholder="Please enter the content" v-model="url">
<template slot="prepend">填写url</template> <template slot="prepend">Url</template>
</el-input> </el-input>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<div class="time-container"> <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> </el-date-picker>
</div> </div>
<el-button style="margin-left: 10px;" type="success">发布 <el-button style="margin-left: 10px;" type="success">publish
</el-button> </el-button>
</sticky> </sticky>
<div class="components-container"> <div class="components-container">
<code>Sticky header 当页面滚动到预设的位置会吸附在顶部</code> <code>Sticky header, {{$t('components.stickyTips')}}</code>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
<div>我是占位</div> <div>placeholder</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -105,9 +105,9 @@ export default { ...@@ -105,9 +105,9 @@ export default {
url: '', url: '',
platforms: ['a-platform'], platforms: ['a-platform'],
platformsOptions: [ platformsOptions: [
{ key: 'a-platform', name: '平台A' }, { key: 'a-platform', name: 'platformA' },
{ key: 'b-platform', name: '平台B' }, { key: 'b-platform', name: 'platformB' },
{ key: 'c-platform', name: '平台C' } { key: 'c-platform', name: 'platformC' }
], ],
pickerOptions: { pickerOptions: {
disabledDate(time) { disabledDate(time) {
...@@ -120,8 +120,11 @@ export default { ...@@ -120,8 +120,11 @@ export default {
</script> </script>
<style scoped> <style scoped>
.time-container { .components-container div {
display: inline-block; margin: 10px;
} }
</style>
.time-container {
display: inline-block;
}
</style>
src/views/components-demo/tinymce.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="components-container"> <div class="components-container">
<code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce <code>
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">文档介绍</a> {{$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> </code>
<div> <div>
<tinymce :height="200" v-model="content"></tinymce> <tinymce :height="300" v-model="content"></tinymce>
</div> </div>
<div class="editor-content" v-html="content"></div> <div class="editor-content" v-html="content"></div>
</div> </div>
...@@ -18,7 +19,14 @@ export default { ...@@ -18,7 +19,14 @@ export default {
components: { Tinymce }, components: { Tinymce },
data() { data() {
return { 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>
`
} }
} }
} }
......
src/views/dashboard/admin/components/BarChart.vue
浏览文件 @ 45fef9b4
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题 require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils' import { debounce } from '@/utils'
const animationDuration = 6000 const animationDuration = 6000
......
src/views/dashboard/admin/components/LineChart.vue
浏览文件 @ 45fef9b4
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题 require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils' import { debounce } from '@/utils'
export default { export default {
......
src/views/dashboard/admin/components/PanelGroup.vue
浏览文件 @ 45fef9b4
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text">New Visits</div> <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>
</div> </div>
</el-col> </el-col>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text">Messages</div> <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>
</div> </div>
</el-col> </el-col>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text">Purchases</div> <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>
</div> </div>
</el-col> </el-col>
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text">Shoppings</div> <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>
</div> </div>
</el-col> </el-col>
......
src/views/dashboard/admin/components/PieChart.vue
浏览文件 @ 45fef9b4
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题 require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils' import { debounce } from '@/utils'
export default { export default {
......
src/views/dashboard/admin/components/RaddarChart.vue
浏览文件 @ 45fef9b4
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题 require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils' import { debounce } from '@/utils'
const animationDuration = 3000 const animationDuration = 3000
......
src/views/dashboard/admin/components/TransactionTable.vue
浏览文件 @ 45fef9b4
...@@ -44,7 +44,7 @@ export default { ...@@ -44,7 +44,7 @@ export default {
fetchList().then(response => { fetchList().then(response => {
this.list = response.data.items.slice(0, 7) this.list = response.data.items.slice(0, 7)
}) })
} } }
}
} }
</script> </script>
src/views/dashboard/editor/index.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<div class=" clearfix"> <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> <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
</pan-thumb> </pan-thumb>
<github-corner></github-corner> <github-corner></github-corner>
<div class="info-container"> <div class="info-container">
<span class="display_name">{{name}}</span> <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> </div>
<div> <div>
......
src/views/documentation/index.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="app-container documentation-container"> <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://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/">Github 地址</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> <dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu>
</div> </div>
</template> </template>
<script> <script>
import DropdownMenu from '@/components/Share/dropdownMenu' import DropdownMenu from '@/components/Share/dropdownMenu'
export default { export default {
name: 'clipboardDemo', name: 'documentation',
components: { DropdownMenu }, components: { DropdownMenu },
data() { data() {
return { return {
......
src/views/errorLog/index.vue
浏览文件 @ 45fef9b4
...@@ -2,11 +2,13 @@ ...@@ -2,11 +2,13 @@
<div class="errPage-container"> <div class="errPage-container">
<errorA></errorA> <errorA></errorA>
<errorB></errorB> <errorB></errorB>
<!-- $t is vue-i18n global function to translate lang -->
<h3>请点击右上角bug小图表</h3> <h3>{{$t('errorLog.tips')}}</h3>
<code> <code>
现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常. {{$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">文档介绍</a> <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> </code>
<a href="#"> <a href="#">
<img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'> <img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'>
......
src/views/example/tab/components/tabPane.vue
浏览文件 @ 45fef9b4
<template> <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="请给我点时间！"> element-loading-text="请给我点时间！">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.id}}</span> <span>{{scope.row.id}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="180px" align="center" label="时间"> <el-table-column width="180px" align="center" label="Date">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span> <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="300px" label="标题"> <el-table-column min-width="300px" label="Title">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.title}}</span> <span>{{scope.row.title}}</span>
<el-tag>{{scope.row.type}}</el-tag> <el-tag>{{scope.row.type}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="110px" align="center" label="作者"> <el-table-column width="110px" align="center" label="Author">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.author}}</span> <span>{{scope.row.author}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="80px" label="重要性"> <el-table-column width="120px" label="Importance">
<template slot-scope="scope"> <template slot-scope="scope">
<svg-icon v-for="n in +scope.row.importance" icon-class="star" :key="n"></svg-icon> <svg-icon v-for="n in +scope.row.importance" icon-class="star" :key="n"></svg-icon>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="阅读数" width="95"> <el-table-column align="center" label="Readings" width="95">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.pageviews}}</span> <span>{{scope.row.pageviews}}</span>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template> </template>
......
src/views/example/tab/index.vue
浏览文件 @ 45fef9b4
...@@ -20,10 +20,10 @@ export default { ...@@ -20,10 +20,10 @@ export default {
data() { data() {
return { return {
tabMapOptions: [ tabMapOptions: [
{ label: '中国', key: 'CN' }, { label: 'China', key: 'CN' },
{ label: '美国', key: 'US' }, { label: 'USA', key: 'US' },
{ label: '日本', key: 'JP' }, { label: 'Japan', key: 'JP' },
{ label: '欧元区', key: 'EU' } { label: 'Eurozone', key: 'EU' }
], ],
activeName: 'CN', activeName: 'CN',
createdTimes: 0 createdTimes: 0
......
src/views/example/table/complexTable.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="app-container calendar-list-container"> <div class="app-container calendar-list-container">
<div class="filter-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-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 v-for="item in importanceOptions" :key="item" :label="item" :value="item">
</el-option> </el-option>
</el-select> </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 v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key">
</el-option> </el-option>
</el-select> </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 v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key">
</el-option> </el-option>
</el-select> </el-select>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button> <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">添加</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">导出</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="showAuditor">显示审核人</el-checkbox> <el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showReviewer">{{$t('table.reviewer')}}</el-checkbox>
</div> </div>
<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
style="width: 100%"> 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"> <template slot-scope="scope">
<span>{{scope.row.id}}</span> <span>{{scope.row.id}}</span>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span> <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="150px" label="标题"> <el-table-column min-width="150px" :label="$t('table.title')">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span> <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
<el-tag>{{scope.row.type | typeFilter}}</el-tag> <el-tag>{{scope.row.type | typeFilter}}</el-tag>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<span>{{scope.row.author}}</span> <span>{{scope.row.author}}</span>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<span style='color:red;'>{{scope.row.auditor}}</span> <span style='color:red;'>{{scope.row.reviewer}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="80px" label="重要性"> <el-table-column width="80px" :label="$t('table.importance')">
<template slot-scope="scope"> <template slot-scope="scope">
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon> <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<span v-if="scope.row.pageviews" class="link-type" @click='handleFetchPv(scope.row.pageviews)'>{{scope.row.pageviews}}</span> <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> </template>
</el-table-column> </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"> <template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> <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')">发布 <el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">{{$t('table.publish')}}
</el-button> </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>
<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> </el-button>
</template> </template>
</el-table-column> </el-table-column>
...@@ -86,47 +86,47 @@ ...@@ -86,47 +86,47 @@
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible"> <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 :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-form-item :label="$t('table.type')" prop="type">
<el-select class="filter-item" v-model="temp.type" placeholder="请选择"> <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 v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="时间" prop="timestamp"> <el-form-item :label="$t('table.date')" prop="timestamp">
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="选择日期时间"> <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date">
</el-date-picker> </el-date-picker>
</el-form-item> </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-input v-model="temp.title"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="状态"> <el-form-item :label="$t('table.status')">
<el-select class="filter-item" v-model="temp.status" placeholder="请选择"> <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 v-for="item in statusOptions" :key="item" :label="item" :value="item">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </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-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max='3'></el-rate>
</el-form-item> </el-form-item>
<el-form-item label="点评"> <el-form-item :label="$t('table.remark')">
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="temp.remark"> <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="Please input" v-model="temp.remark">
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button> <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
<el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确 定</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">确 定</el-button> <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
</div> </div>
</el-dialog> </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 :data="pvData" border fit highlight-current-row style="width: 100%">
<el-table-column prop="key" label="渠道"> </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-column prop="pv" label="Pv"> </el-table-column>
</el-table> </el-table>
<span slot="footer" class="dialog-footer"> <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> </span>
</el-dialog> </el-dialog>
...@@ -139,13 +139,13 @@ import waves from '@/directive/waves' // 水波纹指令 ...@@ -139,13 +139,13 @@ import waves from '@/directive/waves' // 水波纹指令
import { parseTime } from '@/utils' import { parseTime } from '@/utils'
const calendarTypeOptions = [ const calendarTypeOptions = [
{ key: 'CN', display_name: '中国' }, { key: 'CN', display_name: 'China' },
{ key: 'US', display_name: '美国' }, { key: 'US', display_name: 'USA' },
{ key: 'JP', display_name: '日本' }, { key: 'JP', display_name: 'Japan' },
{ key: 'EU', display_name: '欧元区' } { 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) => { const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
acc[cur.key] = cur.display_name acc[cur.key] = cur.display_name
return acc return acc
...@@ -172,9 +172,9 @@ export default { ...@@ -172,9 +172,9 @@ export default {
}, },
importanceOptions: [1, 2, 3], importanceOptions: [1, 2, 3],
calendarTypeOptions, 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'], statusOptions: ['published', 'draft', 'deleted'],
showAuditor: false, showReviewer: false,
temp: { temp: {
id: undefined, id: undefined,
importance: 1, importance: 1,
...@@ -187,8 +187,8 @@ export default { ...@@ -187,8 +187,8 @@ export default {
dialogFormVisible: false, dialogFormVisible: false,
dialogStatus: '', dialogStatus: '',
textMap: { textMap: {
update: '编辑', update: 'Edit',
create: '创建' create: 'Create'
}, },
dialogPvVisible: false, dialogPvVisible: false,
pvData: [], pvData: [],
...@@ -267,7 +267,7 @@ export default { ...@@ -267,7 +267,7 @@ export default {
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => {
if (valid) { if (valid) {
this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
this.temp.author = '原创作者' this.temp.author = 'vue-element-admin'
createArticle(this.temp).then(() => { createArticle(this.temp).then(() => {
this.list.unshift(this.temp) this.list.unshift(this.temp)
this.dialogFormVisible = false this.dialogFormVisible = false
...@@ -333,10 +333,10 @@ export default { ...@@ -333,10 +333,10 @@ export default {
handleDownload() { handleDownload() {
this.downloadLoading = true this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => { import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['时间', '地区', '类型', '标题', '重要性'] const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
const filterVal = ['timestamp', 'province', 'type', 'title', 'importance'] const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
const data = this.formatJson(filterVal, this.list) 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 this.downloadLoading = false
}) })
}, },
......
src/views/example/table/dragTable.vue
浏览文件 @ 45fef9b4
...@@ -3,58 +3,58 @@ ...@@ -3,58 +3,58 @@
<!-- Note that row-key is necessary to get a correct row order. --> <!-- 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 :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"> <template slot-scope="scope">
<span>{{scope.row.id}}</span> <span>{{scope.row.id}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="180px" align="center" label="时间"> <el-table-column width="180px" align="center" label="Date">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span> <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="300px" label="标题"> <el-table-column min-width="300px" label="Title">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.title}}</span> <span>{{scope.row.title}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="110px" align="center" label="作者"> <el-table-column width="110px" align="center" label="Author">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.author}}</span> <span>{{scope.row.author}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="100px" label="重要性"> <el-table-column width="100px" label="Importance">
<template slot-scope="scope"> <template slot-scope="scope">
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="icon-star" :key="n"></svg-icon> <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="icon-star" :key="n"></svg-icon>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="阅读数" width="95"> <el-table-column align="center" label="Readings" width="95">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.pageviews}}</span> <span>{{scope.row.pageviews}}</span>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="拖拽" width="80"> <el-table-column align="center" label="Drag" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<svg-icon class='drag-handler' icon-class="drag"></svg-icon> <svg-icon class='drag-handler' icon-class="drag"></svg-icon>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- $t is vue-i18n global function to translate lang (lang in @/lang) -->
<div class='show-d'>默认顺序 &nbsp; {{ oldList}}</div> <div class='show-d'>{{$t('table.dragTips1')}} : &nbsp; {{ oldList}}</div>
<div class='show-d'>拖拽后顺序{{newList}}</div> <div class='show-d'>{{$t('table.dragTips2')}} : {{newList}}</div>
</div> </div>
</template> </template>
......
src/views/example/table/dynamicTable/fixedThead.vue
浏览文件 @ 45fef9b4
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<el-table :data="tableData" :key='key' border fit highlight-current-row style="width: 100%"> <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 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"> <template slot-scope="scope">
{{scope.row[fruit]}} {{scope.row[fruit]}}
</template> </template>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</template> </template>
<script> <script>
const defaultFormThead = ['apple', 'banana'] // 默认选中项 const defaultFormThead = ['apple', 'banana']
export default { export default {
data() { data() {
...@@ -42,15 +42,15 @@ export default { ...@@ -42,15 +42,15 @@ export default {
} }
], ],
key: 1, // table key key: 1, // table key
formTheadOptions: ['apple', 'banana', 'orange'], // 可选择表头 formTheadOptions: ['apple', 'banana', 'orange'],
checkboxVal: defaultFormThead, // checkboxVal checkboxVal: defaultFormThead, // checkboxVal
formThead: defaultFormThead // 默认表头 formThead: defaultFormThead // 默认表头 Default header
} }
}, },
watch: { watch: {
checkboxVal(valArr) { checkboxVal(valArr) {
this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0) 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
} }
} }
} }
......
src/views/example/table/dynamicTable/index.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="app-container"> <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> <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> <unfixed-thead></unfixed-thead>
</div> </div>
</template> </template>
......
src/views/example/table/dynamicTable/unfixedThead.vue
浏览文件 @ 45fef9b4
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<el-table :data="tableData" border fit highlight-current-row style="width: 100%"> <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
<el-table-column prop="name" label="fruitName" width="180"> <el-table-column prop="name" label="fruitName" width="180">
</el-table-column> </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"> <template slot-scope="scope">
{{scope.row[fruit]}} {{scope.row[fruit]}}
</template> </template>
......
src/views/example/table/inlineEditTable.vue
浏览文件 @ 45fef9b4
...@@ -3,37 +3,37 @@ ...@@ -3,37 +3,37 @@
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%"> <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"> <template slot-scope="scope">
<span>{{scope.row.id}}</span> <span>{{scope.row.id}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="180px" align="center" label="时间"> <el-table-column width="180px" align="center" label="Date">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span> <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="120px" align="center" label="作者"> <el-table-column width="120px" align="center" label="Author">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.author}}</span> <span>{{scope.row.author}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="100px" label="重要性"> <el-table-column width="100px" label="Importance">
<template slot-scope="scope"> <template slot-scope="scope">
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon> <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="300px" label="标题"> <el-table-column min-width="300px" label="Title">
<template slot-scope="scope"> <template slot-scope="scope">
<template v-if="scope.row.edit"> <template v-if="scope.row.edit">
<el-input class="edit-input" size="small" v-model="scope.row.title"></el-input> <el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
...@@ -43,10 +43,10 @@ ...@@ -43,10 +43,10 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="编辑" width="120"> <el-table-column align="center" label="Actions" width="120">
<template slot-scope="scope"> <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-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">编辑</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> </template>
</el-table-column> </el-table-column>
...@@ -89,7 +89,9 @@ export default { ...@@ -89,7 +89,9 @@ export default {
const items = response.data.items const items = response.data.items
this.list = items.map(v => { this.list = items.map(v => {
this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html 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 v.originalTitle = v.title // will be used when user click the cancel botton
return v return v
}) })
this.listLoading = false this.listLoading = false
......
src/views/excel/exportExcel.vue
浏览文件 @ 45fef9b4
<template> <template>
<!-- $t is vue-i18n global function to translate lang -->
<div class="app-container"> <div class="app-container">
<el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input> <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">导出excel</el-button> <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 :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"> <template slot-scope="scope">
{{scope.$index}} {{scope.$index}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="文章标题"> <el-table-column label="Title">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.title}} {{scope.row.title}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="作者" width="95" align="center"> <el-table-column label="Author" width="110" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag>{{scope.row.author}}</el-tag> <el-tag>{{scope.row.author}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="阅读数" width="115" align="center"> <el-table-column label="Readings" width="115" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.pageviews}} {{scope.row.pageviews}}
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<i class="el-icon-time"></i> <i class="el-icon-time"></i>
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span> <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
...@@ -61,7 +62,7 @@ export default { ...@@ -61,7 +62,7 @@ export default {
handleDownload() { handleDownload() {
this.downloadLoading = true this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => { import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间'] const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.list const list = this.list
const data = this.formatJson(filterVal, list) const data = this.formatJson(filterVal, list)
......
src/views/excel/selectExcel.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="app-container"> <div class="app-container">
<el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input> <!-- $t is vue-i18n global function to translate lang -->
<el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出已选择项</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.selectedExport')}}</el-button>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange" <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
ref="multipleTable"> ref="multipleTable">
<el-table-column type="selection" align="center"></el-table-column> <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"> <template slot-scope="scope">
{{scope.$index}} {{scope.$index}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="文章标题"> <el-table-column label="Title">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.title}} {{scope.row.title}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="作者" width="95" align="center"> <el-table-column label="Author" width="110" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag>{{scope.row.author}}</el-tag> <el-tag>{{scope.row.author}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="阅读数" width="115" align="center"> <el-table-column label="Readings" width="115" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.pageviews}} {{scope.row.pageviews}}
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<i class="el-icon-time"></i> <i class="el-icon-time"></i>
<span>{{scope.row.display_time}}</span> <span>{{scope.row.display_time}}</span>
...@@ -66,18 +67,18 @@ export default { ...@@ -66,18 +67,18 @@ export default {
handleDownload() { handleDownload() {
if (this.multipleSelection.length) { if (this.multipleSelection.length) {
this.downloadLoading = true this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => { import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间'] const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.multipleSelection const list = this.multipleSelection
const data = this.formatJson(filterVal, list) const data = this.formatJson(filterVal, list)
excel.export_json_to_excel(tHeader, data, this.filename) excel.export_json_to_excel(tHeader, data, this.filename)
this.$refs.multipleTable.clearSelection() this.$refs.multipleTable.clearSelection()
this.downloadLoading = false this.downloadLoading = false
}) })
} else { } else {
this.$message({ this.$message({
message: '请至少选择一条记录', message: 'Please select at least one item',
type: 'warning' type: 'warning'
}) })
} }
......
src/views/layout/components/AppMain.vue
浏览文件 @ 45fef9b4
...@@ -13,7 +13,6 @@ export default { ...@@ -13,7 +13,6 @@ export default {
name: 'AppMain', name: 'AppMain',
computed: { computed: {
cachedViews() { cachedViews() {
// console.log(this.$store.state.tagsView.cachedViews)
return this.$store.state.tagsView.cachedViews return this.$store.state.tagsView.cachedViews
} }
// key() { // key() {
......
src/views/layout/components/Navbar.vue
浏览文件 @ 45fef9b4
...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
<div class="right-menu"> <div class="right-menu">
<error-log class="errLog-container right-menu-item"></error-log> <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> <screenfull class="screenfull right-menu-item"></screenfull>
</el-tooltip> </el-tooltip>
<lang-select class="international right-menu-item"></lang-select> <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> <theme-picker class="theme-switch right-menu-item"></theme-picker>
</el-tooltip> </el-tooltip>
...@@ -25,16 +25,16 @@ ...@@ -25,16 +25,16 @@
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<router-link to="/"> <router-link to="/">
<el-dropdown-item> <el-dropdown-item>
首页 {{$t('navbar.dashboard')}}
</el-dropdown-item> </el-dropdown-item>
</router-link> </router-link>
<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/"> <a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
<el-dropdown-item> <el-dropdown-item>
项目地址 {{$t('navbar.github')}}
</el-dropdown-item> </el-dropdown-item>
</a> </a>
<el-dropdown-item divided> <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-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
...@@ -73,7 +73,7 @@ export default { ...@@ -73,7 +73,7 @@ export default {
}, },
logout() { logout() {
this.$store.dispatch('LogOut').then(() => { this.$store.dispatch('LogOut').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug location.reload()// In order to re-instantiate the vue-router object to avoid bugs
}) })
} }
} }
......
src/views/login/authredirect.vue
浏览文件 @ 45fef9b4
<script> <script>
export default { export default {
name: 'authredirect', name: 'authredirect',
created() { created() {
const hash = window.location.search.slice(1) const hash = window.location.search.slice(1)
window.opener.location.href = window.location.origin + '/login#' + hash window.opener.location.href = window.location.origin + '/login#' + hash
window.close() window.close()
}
} }
}
</script> </script>
src/views/login/index.vue
浏览文件 @ 45fef9b4
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="login-container"> <div class="login-container">
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"> <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
<div class="title-container"> <div class="title-container">
<h3 class="title">{{ translateKey('title')}}</h3> <h3 class="title">{{$t('login.title')}}</h3>
<lang-select class="set-language"></lang-select> <lang-select class="set-language"></lang-select>
</div> </div>
<el-form-item prop="username"> <el-form-item prop="username">
...@@ -16,29 +16,28 @@ ...@@ -16,29 +16,28 @@
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="password" /> <svg-icon icon-class="password" />
</span> </span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" <el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="password" />
placeholder="password" />
<span class="show-pwd" @click="showPwd"> <span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" /> <svg-icon icon-class="eye" />
</span> </span>
</el-form-item> </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"> <div class="tips">
<span>{{translateKey('username')}} : admin</span> <span>{{$t('login.username')}} : admin</span>
<span>{{translateKey('password')}} : {{translateKey('any')}}</span> <span>{{$t('login.password')}} : {{$t('login.any')}}</span>
</div> </div>
<div class="tips"> <div class="tips">
<span>{{translateKey('username')}} : editor </span> <span style="margin-right:18px;">{{$t('login.username')}} : editor</span>
<span>{{translateKey('password')}} : {{translateKey('any')}}</span> <span>{{$t('login.password')}} : {{$t('login.any')}}</span>
</div> </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-form>
<el-dialog :title="translateKey('thirdparty')" :visible.sync="showDialog"> <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
{{translateKey('thirdpartyTips')}} {{$t('login.thirdpartyTips')}}
<br/> <br/>
<br/> <br/>
<br/> <br/>
...@@ -51,10 +50,10 @@ ...@@ -51,10 +50,10 @@
<script> <script>
import { isvalidUsername } from '@/utils/validate' import { isvalidUsername } from '@/utils/validate'
import LangSelect from '@/components/LangSelect' import LangSelect from '@/components/LangSelect'
import socialSign from './socialsignin' import SocialSign from './socialsignin'
export default { export default {
components: { LangSelect, socialSign }, components: { LangSelect, SocialSign },
name: 'login', name: 'login',
data() { data() {
const validateUsername = (rule, value, callback) => { const validateUsername = (rule, value, callback) => {
...@@ -80,20 +79,17 @@ export default { ...@@ -80,20 +79,17 @@ export default {
username: [{ required: true, trigger: 'blur', validator: validateUsername }], username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }] password: [{ required: true, trigger: 'blur', validator: validatePassword }]
}, },
pwdType: 'password', passwordType: 'password',
loading: false, loading: false,
showDialog: false showDialog: false
} }
}, },
methods: { methods: {
translateKey(key) {
return this.$t('login.' + key)
},
showPwd() { showPwd() {
if (this.pwdType === 'password') { if (this.passwordType === 'password') {
this.pwdType = '' this.passwordType = ''
} else { } else {
this.pwdType = 'password' this.passwordType = 'password'
} }
}, },
handleLogin() { handleLogin() {
...@@ -103,7 +99,6 @@ export default { ...@@ -103,7 +99,6 @@ export default {
this.$store.dispatch('LoginByUsername', this.loginForm).then(() => { this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
this.loading = false this.loading = false
this.$router.push({ path: '/' }) this.$router.push({ path: '/' })
// this.showDialog = true
}).catch(() => { }).catch(() => {
this.loading = false this.loading = false
}) })
...@@ -172,7 +167,6 @@ $light_gray:#eee; ...@@ -172,7 +167,6 @@ $light_gray:#eee;
color: #454545; color: #454545;
} }
} }
</style> </style>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
......
src/views/permission/index.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="app-container"> <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-group v-model="role">
<el-radio-button label="editor"></el-radio-button> <el-radio-button label="editor"></el-radio-button>
</el-radio-group> </el-radio-group>
......
src/views/svg-icons/index.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="icons-container"> <div class="icons-container">
<p class="warn-content"> <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> </p>
<div class="icons-wrapper"> <div class="icons-wrapper">
<div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)"> <div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
......
src/views/theme/index.vue
浏览文件 @ 45fef9b4
...@@ -2,21 +2,23 @@ ...@@ -2,21 +2,23 @@
<div class="app-container"> <div class="app-container">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header"> <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 class='link-type link-title' target="_blank" href='https://panjiachen.github.io/vue-element-admin-site/#/theme'>换肤文档</a> {{$t('theme.documentation')}}
</a>
</div> </div>
<div class="box-item"> <div class="box-item">
<span class="field-label">换肤:</span> <span class="field-label">{{$t('theme.change')}} : </span>
<el-switch v-model="theme"></el-switch> <el-switch v-model="theme"></el-switch>
<code style="margin-top:15px;">{{$t('theme.tips')}}</code>
</div> </div>
</el-card> </el-card>
<div class="block"> <div class="block">
<el-button type="primary">成功按钮</el-button> <el-button type="primary">Primary</el-button>
<el-button type="success">成功按钮</el-button> <el-button type="success">Success</el-button>
<el-button type="warning">警告按钮</el-button> <el-button type="info">Info</el-button>
<el-button type="danger">危险按钮</el-button> <el-button type="warning">Warning</el-button>
<el-button type="info">信息按钮</el-button> <el-button type="danger">Danger</el-button>
</div> </div>
<div class="block"> <div class="block">
...@@ -24,7 +26,8 @@ ...@@ -24,7 +26,8 @@
<el-button type="primary" icon="el-icon-share"></el-button> <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-delete"></el-button>
<el-button type="primary" icon="el-icon-search">Search</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> <i class="el-icon-upload el-icon-right"></i>
</el-button> </el-button>
</div> </div>
...@@ -52,7 +55,7 @@ ...@@ -52,7 +55,7 @@
<script> <script>
import { toggleClass } from '@/utils' 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 { export default {
name: 'theme', name: 'theme',
...@@ -79,6 +82,9 @@ export default { ...@@ -79,6 +82,9 @@ export default {
</script> </script>
<style scoped> <style scoped>
.field-label{
vertical-align: middle;
}
.box-card { .box-card {
width: 400px; width: 400px;
margin: 20px auto; margin: 20px auto;
......
src/views/zip/index.vue
浏览文件 @ 45fef9b4
<template> <template>
<div class="app-container"> <div class="app-container">
<el-input style='width:240px;' placeholder="请输入文件名(默认file)" prefix-icon="el-icon-document" v-model="filename"></el-input> <!-- $t is vue-i18n global function to translate lang -->
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出zip</el-button> <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 :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"> <template slot-scope="scope">
{{scope.$index}} {{scope.$index}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="文章标题"> <el-table-column label="Title">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.title}} {{scope.row.title}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="作者" width="95" align="center"> <el-table-column label="Author" width="95" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag>{{scope.row.author}}</el-tag> <el-tag>{{scope.row.author}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="阅读数" width="115" align="center"> <el-table-column label="Readings" width="115" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.pageviews}} {{scope.row.pageviews}}
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<i class="el-icon-time"></i> <i class="el-icon-time"></i>
<span>{{scope.row.display_time}}</span> <span>{{scope.row.display_time}}</span>
...@@ -60,7 +61,7 @@ export default { ...@@ -60,7 +61,7 @@ export default {
handleDownload() { handleDownload() {
this.downloadLoading = true this.downloadLoading = true
import('@/vendor/Export2Zip').then(zip => { import('@/vendor/Export2Zip').then(zip => {
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间'] const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.list const list = this.list
const data = this.formatJson(filterVal, list) const data = this.formatJson(filterVal, list)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或