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
This commit is contained in:
花裤衩
GitHub
parent
83e56488d8
commit
45fef9b431
61 changed files with 901 additions and 779 deletions
2
LICENSE
2
LICENSE
|
|
@ -1,6 +1,6 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2017 PanJiaChen
|
||||
Copyright (c) 2017-presen PanJiaChen
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
|||
177
README-en.md
177
README-en.md
|
|
@ -1,177 +0,0 @@
|
|||
[](https://github.com/vuejs/vue)
|
||||
[](https://github.com/ElemeFE/element)
|
||||
[](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
|
||||
[]()
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
|
||||
#### Realtime switching themes
|
||||
|
||||
|
||||
|
||||
#### tabs
|
||||
|
||||
<br />
|
||||
|
||||
#### Collapsing sidebar
|
||||
|
||||
|
||||
|
||||
#### Drag & drop table
|
||||
|
||||
|
||||
|
||||
#### Interactive table
|
||||
|
||||
|
||||
|
||||
#### Uploading cropped avatar
|
||||
|
||||
|
||||
|
||||
#### Error log
|
||||
|
||||
|
||||
|
||||
#### Rich text (integrated with Qiniu, watermark and customization)
|
||||
|
||||
|
||||
|
||||
#### Packaging table component
|
||||
|
||||
|
||||
|
||||
#### Charts
|
||||
|
||||
|
||||
|
||||
#### Exporting to Excel
|
||||
|
||||
|
||||
|
||||
#### More
|
||||
|
||||
http://panjiachen.github.io/vue-element-admin
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
214
README.md
214
README.md
|
|
@ -2,177 +2,151 @@
|
|||
<img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
|
||||
</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>
|
||||
|
||||
[](https://github.com/vuejs/vue)
|
||||
[](https://github.com/ElemeFE/element)
|
||||
[](https://travis-ci.org/PanJiaChen/vue-element-admin)
|
||||
[](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
|
||||
[]()
|
||||
English | [简体中文](./README.zh-CN.md)
|
||||
|
||||
**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)
|
||||
|
||||
- [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)
|
||||
**vue-element-admin is a admin interfaces integration solution, which is not suitable for secondary development as a base template.**
|
||||
|
||||
**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0**
|
||||
- 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**
|
||||
|
||||
你的本地环境需要安装 [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)，提前了解和学习这些知识会对使用本项目有很大的帮助。
|
||||
## Preparation
|
||||
|
||||
同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目
|
||||
- [手摸手，带你用 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)
|
||||
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.
|
||||
|
||||
响应需求，开了一个qq群 `591724180` 方便大家交流
|
||||
**This project is not a scaffolding and is more of an integrated solution.**
|
||||
|
||||
或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
|
||||
|
||||
**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
|
||||
|
||||
**本项目并不是一个脚手架，更倾向于是一个集成解决方案**
|
||||
|
||||
**该项目不支持低版本游览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
|
||||
**This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**
|
||||
|
||||
<p align="center">
|
||||
<img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
|
||||
</p>
|
||||
|
||||
## 功能
|
||||
- 登录/注销
|
||||
- 权限验证
|
||||
- 多环境发布
|
||||
- 动态侧边栏（支持多级路由）
|
||||
- 动态面包屑
|
||||
- 国际化多语言
|
||||
- 多种动态换肤
|
||||
- 快捷导航(标签页 支持右键操作)
|
||||
- 富文本编辑器
|
||||
- Markdown编辑器
|
||||
- JSON编辑器
|
||||
- Screenfull全屏
|
||||
- 列表拖拽
|
||||
- Svg Sprite 图标
|
||||
## 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)
|
||||
- Rich text editor
|
||||
- Markdown editor
|
||||
- JSON editor
|
||||
- Screenfull
|
||||
- Drag and drop list
|
||||
- Svg Sprite
|
||||
- Dashboard
|
||||
- 本地mock数据
|
||||
- Echarts 图表
|
||||
- Clipboard(剪贴复制)
|
||||
- 401/404错误页面
|
||||
- 错误日志
|
||||
- 导出excel
|
||||
- 导出zip
|
||||
- 前端可视化excel
|
||||
- Mock data
|
||||
- Echarts
|
||||
- Clipboard
|
||||
- 401/404 error page
|
||||
- Error log
|
||||
- Export excel
|
||||
- Export zip
|
||||
- Front-end visualization excel
|
||||
- Table example
|
||||
- 动态table example
|
||||
- 拖拽table example
|
||||
- 内联编辑table example
|
||||
- Dynamictable example
|
||||
- Drag and drop table example
|
||||
- Inline edit table example
|
||||
- Form example
|
||||
- 二步登录
|
||||
- Two-step login
|
||||
- SplitPane
|
||||
- Dropzone
|
||||
- Sticky
|
||||
- CountTo
|
||||
- Markdown to html
|
||||
```
|
||||
|
||||
## Getting started
|
||||
|
||||
## 开发
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://github.com/PanJiaChen/vue-element-admin.git
|
||||
# clone the projice
|
||||
git clone https://github.com/PanJiaChen/vue-element-admin.git
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
|
||||
npm install --registry=https://registry.npm.taobao.org
|
||||
# install dependency
|
||||
npm install
|
||||
|
||||
# 启动服务
|
||||
npm run dev
|
||||
# develop
|
||||
npm run dev
|
||||
```
|
||||
浏览器访问 http://localhost:9527
|
||||
|
||||
## 发布
|
||||
This will automatically open http://localhost:9527.
|
||||
|
||||
## Build
|
||||
```bash
|
||||
# 构建测试环境
|
||||
npm run build:sit
|
||||
# build for test environment
|
||||
npm run build:sit
|
||||
|
||||
# 构建生成环境
|
||||
npm run build:prod
|
||||
# build for production environment
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
## 其它
|
||||
## Advanced
|
||||
```bash
|
||||
# --report to build with bundle size analytics
|
||||
npm run build:prod --report
|
||||
# --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
|
||||
# --preview to start a server in local to preview
|
||||
npm run build:prod --preview
|
||||
|
||||
# lint code
|
||||
npm run lint
|
||||
# lint code
|
||||
npm run lint
|
||||
|
||||
# auto fix
|
||||
npm run lint -- --fix
|
||||
```
|
||||
|
||||
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/deploy)
|
||||
|
||||
## 目录结构
|
||||
```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
|
||||
|
||||
```
|
||||
Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/deploy) for more information
|
||||
|
||||
## 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)
|
||||
[Preview](http://panjiachen.github.io/vue-element-admin)
|
||||
|
||||
## 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:
|
||||
|
||||
|
||||
|
||||
[Paypal Me](https://www.paypal.me/panfree23)
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
|
||||
|
||||
Copyright (c) 2017-presen PanJiaChen
|
||||
|
|
|
|||
165
README.zh-CN.md
Normal file
165
README.zh-CN.md
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
<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:
|
||||
|
||||
|
||||
[Paypal Me](https://www.paypal.me/panfree23)
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
|
||||
|
||||
Copyright (c) 2017-presen PanJiaChen
|
||||
|
|
@ -46,13 +46,14 @@ export default {
|
|||
this.chart.setOption({
|
||||
backgroundColor: '#394056',
|
||||
title: {
|
||||
text: '请求数',
|
||||
top: 20,
|
||||
text: 'Requests',
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 16,
|
||||
color: '#F1F1F3'
|
||||
},
|
||||
left: '6%'
|
||||
left: '1%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -63,11 +64,12 @@ export default {
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: ['移动', '电信', '联通'],
|
||||
data: ['CMCC', 'CTCC', 'CUCC'],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
|
|
@ -75,9 +77,10 @@ export default {
|
|||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
|
|
@ -92,7 +95,7 @@ export default {
|
|||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '单位（%）',
|
||||
name: '(%)',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
|
|
@ -114,7 +117,7 @@ export default {
|
|||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '移动',
|
||||
name: 'CMCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
|
|
@ -148,7 +151,7 @@ export default {
|
|||
},
|
||||
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
|
||||
}, {
|
||||
name: '电信',
|
||||
name: 'CTCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
|
|
@ -182,7 +185,7 @@ export default {
|
|||
},
|
||||
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
|
||||
}, {
|
||||
name: '联通',
|
||||
name: 'CUCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
|
|
|
|||
|
|
@ -46,15 +46,16 @@ export default {
|
|||
const xData = (function() {
|
||||
const data = []
|
||||
for (let i = 1; i < 13; i++) {
|
||||
data.push(i + '月份')
|
||||
data.push(i + 'month')
|
||||
}
|
||||
return data
|
||||
}())
|
||||
this.chart.setOption({
|
||||
backgroundColor: '#344b58',
|
||||
title: {
|
||||
text: '统计',
|
||||
x: '4%',
|
||||
text: 'statistics',
|
||||
x: '20',
|
||||
top: '20',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '22'
|
||||
|
|
@ -81,12 +82,12 @@ export default {
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
x: '15%',
|
||||
x: '5%',
|
||||
top: '10%',
|
||||
textStyle: {
|
||||
color: '#90979c'
|
||||
},
|
||||
data: ['女', '男', '平均']
|
||||
data: ['female', 'male', 'average']
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [{
|
||||
|
|
@ -158,9 +159,9 @@ export default {
|
|||
end: 35
|
||||
}],
|
||||
series: [{
|
||||
name: '女',
|
||||
name: 'female',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
stack: 'total',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
|
|
@ -195,9 +196,9 @@ export default {
|
|||
},
|
||||
|
||||
{
|
||||
name: '男',
|
||||
name: 'male',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
stack: 'total',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,191,183,1)',
|
||||
|
|
@ -226,9 +227,9 @@ export default {
|
|||
220
|
||||
]
|
||||
}, {
|
||||
name: '平均',
|
||||
name: 'average',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
stack: 'total',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
itemStyle: {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
</el-upload>
|
||||
<div class="image-preview image-app-preview">
|
||||
<div class="image-preview-wrapper" v-show="imageUrl.length>1">
|
||||
<div class='app-fake-conver'>  全球 付费节目单 最热 经济</div>
|
||||
<img :src="imageUrl">
|
||||
<div class="image-preview-action">
|
||||
<i @click="rmImage" class="el-icon-delete"></i>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,10 @@ import store from './store'
|
|||
|
||||
// you can set only in production env show the error-log
|
||||
// if (process.env.NODE_ENV === 'production') {
|
||||
|
||||
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(() => {
|
||||
store.dispatch('addErrorLog', {
|
||||
err,
|
||||
|
|
@ -14,4 +17,5 @@ Vue.config.errorHandler = function(err, vm, info, a) {
|
|||
console.error(err, info)
|
||||
})
|
||||
}
|
||||
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<?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>
|
||||
|
Before Width: | Height: | Size: 678 B |
|
|
@ -1 +0,0 @@
|
|||
<?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>
|
||||
|
Before Width: | Height: | Size: 678 B |
|
|
@ -1 +0,0 @@
|
|||
<?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>
|
||||
|
Before Width: | Height: | Size: 673 B |
|
|
@ -20,7 +20,7 @@ export default {
|
|||
backToTop: 'BackToTop',
|
||||
charts: 'Charts',
|
||||
keyboardChart: 'Keyboard Chart',
|
||||
lineChart: 'Line chart',
|
||||
lineChart: 'Line Chart',
|
||||
mixChart: 'Mix Chart',
|
||||
example: 'Example',
|
||||
Table: 'Table',
|
||||
|
|
@ -45,6 +45,13 @@ export default {
|
|||
clipboardDemo: 'Clipboard',
|
||||
i18n: 'I18n'
|
||||
},
|
||||
navbar: {
|
||||
logOut: 'Log Out',
|
||||
dashboard: 'Dashboard',
|
||||
github: 'Github',
|
||||
screenfull: 'screenfull',
|
||||
theme: 'theme'
|
||||
},
|
||||
login: {
|
||||
title: 'Login Form',
|
||||
logIn: 'Log in',
|
||||
|
|
@ -52,6 +59,68 @@ export default {
|
|||
password: 'Password',
|
||||
any: 'any',
|
||||
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.'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,6 +45,13 @@ export default {
|
|||
clipboardDemo: 'clipboard',
|
||||
i18n: '国际化'
|
||||
},
|
||||
navbar: {
|
||||
logOut: '退出登录',
|
||||
dashboard: '首页',
|
||||
github: '项目地址',
|
||||
screenfull: '全屏',
|
||||
theme: '换肤'
|
||||
},
|
||||
login: {
|
||||
title: '系统登录',
|
||||
logIn: '登录',
|
||||
|
|
@ -53,5 +60,67 @@ export default {
|
|||
any: '随便填',
|
||||
thirdparty: '第三方登录',
|
||||
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, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@ import i18n from './lang' // Internationalization
|
|||
import './icons' // icon
|
||||
import './errorLog'// error log
|
||||
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, {
|
||||
size: 'medium',
|
||||
size: 'medium', // set element-ui default size
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ for (let i = 0; i < count; i++) {
|
|||
List.push(Mock.mock({
|
||||
id: '@increment',
|
||||
timestamp: +Mock.Random.date('T'),
|
||||
author: '@cname',
|
||||
auditor: '@cname',
|
||||
title: '@ctitle(10, 20)',
|
||||
author: '@first',
|
||||
reviewer: '@first',
|
||||
title: '@title(5, 10)',
|
||||
forecast: '@float(0, 100, 2, 2)',
|
||||
importance: '@integer(1, 3)',
|
||||
'type|1': ['CN', 'US', 'JP', 'EU'],
|
||||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
}
|
||||
},
|
||||
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: () => ({
|
||||
id: 120000000001,
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
import router from './router'
|
||||
import store from './store'
|
||||
import NProgress from 'nprogress' // Progress 进度条
|
||||
import 'nprogress/nprogress.css'// Progress 进度条样式
|
||||
import { getToken } from '@/utils/auth' // 验权
|
||||
import NProgress from 'nprogress' // progress bar
|
||||
import 'nprogress/nprogress.css'// progress bar style
|
||||
import { getToken } from '@/utils/auth' // getToken from cookie
|
||||
import { Message } from 'element-ui'
|
||||
|
||||
// permissiom judge
|
||||
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
|
||||
return roles.some(role => permissionRoles.indexOf(role) >= 0)
|
||||
}
|
||||
|
||||
const whiteList = ['/login', '/authredirect']// 不重定向白名单
|
||||
const whiteList = ['/login', '/authredirect']// no redirect whitelist
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start() // 开启Progress
|
||||
NProgress.start() // start progress bar
|
||||
if (getToken()) { // 判断是否有token
|
||||
if (to.path === '/login') {
|
||||
next({ path: '/' })
|
||||
|
|
@ -26,11 +26,11 @@ router.beforeEach((to, from, next) => {
|
|||
const roles = res.data.role
|
||||
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
|
||||
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(() => {
|
||||
store.dispatch('FedLogOut').then(() => {
|
||||
Message.error('验证失败,请重新登录')
|
||||
Message.error('Verification failed, please login again')
|
||||
next({ path: '/login' })
|
||||
})
|
||||
})
|
||||
|
|
@ -56,5 +56,5 @@ router.beforeEach((to, from, next) => {
|
|||
})
|
||||
|
||||
router.afterEach(() => {
|
||||
NProgress.done() // 结束Progress
|
||||
NProgress.done() // finish progress bar
|
||||
})
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@ Vue.use(Router)
|
|||
/* 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)
|
||||
* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb
|
||||
|
|
|
|||
|
|
@ -27,6 +27,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fixed-width{
|
||||
.el-button--mini{
|
||||
padding: 7px 10px;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-col {
|
||||
.cell {
|
||||
padding: 0 10px;
|
||||
|
|
|
|||
|
|
@ -102,7 +102,8 @@ code {
|
|||
margin-bottom: 20px;
|
||||
display: block;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
|
||||
a {
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import Clipboard from 'clipboard'
|
|||
|
||||
function clipboardSuccess() {
|
||||
Vue.prototype.$message({
|
||||
message: '复制成功',
|
||||
message: 'Copy successfully',
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
|
|
@ -11,7 +11,7 @@ function clipboardSuccess() {
|
|||
|
||||
function clipboardError() {
|
||||
Vue.prototype.$message({
|
||||
message: '复制失败',
|
||||
message: 'Copy failed',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// translate router.meta.title , be used in breadcrumb sidebar tagsview
|
||||
// translate router.meta.title, be used in breadcrumb sidebar tagsview
|
||||
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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@ import { Message } from 'element-ui'
|
|||
import store from '@/store'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
// 创建axios实例
|
||||
// create an axios instance
|
||||
const service = axios.create({
|
||||
baseURL: process.env.BASE_API, // api的base_url
|
||||
timeout: 5000 // 请求超时时间
|
||||
timeout: 5000 // request timeout
|
||||
})
|
||||
|
||||
// request拦截器
|
||||
// request interceptor
|
||||
service.interceptors.request.use(config => {
|
||||
// Do something before request is sent
|
||||
if (store.getters.token) {
|
||||
config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
|
||||
config.headers['X-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
|
||||
}
|
||||
return config
|
||||
}, error => {
|
||||
|
|
@ -22,7 +22,7 @@ service.interceptors.request.use(config => {
|
|||
Promise.reject(error)
|
||||
})
|
||||
|
||||
// respone拦截器
|
||||
// respone interceptor
|
||||
service.interceptors.response.use(
|
||||
response => response,
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<template>
|
||||
<div class="components-container" style='height:100vh'>
|
||||
<div class='chart-container'>
|
||||
<chart height='100%' width='100%'></chart>
|
||||
</div>
|
||||
<div class='chart-container'>
|
||||
<chart height='100%' width='100%'></chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -18,8 +16,9 @@ export default {
|
|||
<style scoped>
|
||||
.chart-container{
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
height: 85vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<template>
|
||||
<div class="components-container" style='height:100vh'>
|
||||
<div class='chart-container'>
|
||||
<chart height='100%' width='100%'></chart>
|
||||
</div>
|
||||
<div class='chart-container'>
|
||||
<chart height='100%' width='100%'></chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -18,8 +16,9 @@ export default {
|
|||
<style scoped>
|
||||
.chart-container{
|
||||
position: relative;
|
||||
padding:20px;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
height:85vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<template>
|
||||
<div class="components-container" style='height:100vh'>
|
||||
<div class='chart-container'>
|
||||
<chart height='100%' width='100%'></chart>
|
||||
</div>
|
||||
<div class='chart-container'>
|
||||
<chart height='100%' width='100%'></chart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -18,9 +16,9 @@ export default {
|
|||
<style scoped>
|
||||
.chart-container{
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
padding-bottom: 40px;
|
||||
height:85vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<div class="app-container">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="use clipboard directly" name="directly">
|
||||
<el-input v-model="inputData" placeholder="请输入内容" style='width:400px;'></el-input>
|
||||
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
|
||||
<el-button type="primary" icon="document" @click='handleCopy(inputData,$event)'>copy</el-button>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="use clipboard by v-directive" name="v-directive">
|
||||
<el-input v-model="inputData" placeholder="请输入内容" style='width:400px;'></el-input>
|
||||
<el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
|
||||
<el-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<div class="components-container">
|
||||
<code>这里核心代码用的是
|
||||
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>
|
||||
由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
|
||||
<code>This is based on
|
||||
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
|
||||
{{$t('components.imageUploadTips')}}
|
||||
</code>
|
||||
|
||||
<pan-thumb :image="image"></pan-thumb>
|
||||
|
||||
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
|
||||
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change avatar
|
||||
</el-button>
|
||||
|
||||
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess"
|
||||
<image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" langType="en"
|
||||
:key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,134 +1,121 @@
|
|||
<template>
|
||||
<div class="components-container">
|
||||
<code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
|
||||
<code>可自定义按钮的样式、show/hide临界点、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素 </code>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<code>{{$t('components.backToTopTips1')}}</code>
|
||||
<code>{{$t('components.backToTopTips2')}}</code>
|
||||
<div class="placeholder-container">
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
</div>
|
||||
<!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
|
||||
<!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素 -->
|
||||
<el-tooltip placement="top" content="文字提示">
|
||||
<el-tooltip placement="top" content="tooltip">
|
||||
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
|
@ -148,10 +135,16 @@ export default {
|
|||
width: '40px',
|
||||
height: '40px',
|
||||
'border-radius': '4px',
|
||||
'line-height': '45px', // 请保持与高度一致以垂直居中
|
||||
background: '#e7eaf1'// 按钮的背景颜色
|
||||
'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
|
||||
background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.placeholder-container div {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
|
||||
</code>
|
||||
<div class="editor-container">
|
||||
<dnd-list :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池"></dnd-list>
|
||||
<dnd-list :list1="list1" :list2="list2" list1Title="List" list2Title="Article pool"></dnd-list>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="components-container">
|
||||
<code>
|
||||
基于<a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>封装 ,
|
||||
由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装
|
||||
Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
|
||||
{{$t('components.dropzoneTips')}}
|
||||
</code>
|
||||
<div class="editor-container">
|
||||
<dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone>
|
||||
|
|
@ -19,11 +19,11 @@ export default {
|
|||
methods: {
|
||||
dropzoneS(file) {
|
||||
console.log(file)
|
||||
this.$message({ message: '上传成功', type: 'success' })
|
||||
this.$message({ message: 'Upload success', type: 'success' })
|
||||
},
|
||||
dropzoneR(file) {
|
||||
console.log(file)
|
||||
this.$message({ message: '删除成功', type: 'success' })
|
||||
this.$message({ message: 'Delete success', type: 'success' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div class="components-container">
|
||||
<code>Markdown 我们这里选用了
|
||||
<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下
|
||||
<code>Markdown is based on
|
||||
<a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，Simply encapsulated in Vue.
|
||||
<a target="_blank" href="https://segmentfault.com/a/1190000009762198#articleHeader14">
|
||||
相关文章 </a>
|
||||
</code>
|
||||
<div class="editor-container">
|
||||
<markdown-editor id="contentEditor" ref="contentEditor" v-model="content" :height="300" :zIndex="20"></markdown-editor>
|
||||
</div>
|
||||
<el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">转为HTML</el-button>
|
||||
<el-button @click="markdown2Html" style="margin-top:80px;" type="primary" icon="el-icon-document">To HTML</el-button>
|
||||
<div v-html="html"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="components-container">
|
||||
<code>splitPane 如果你用过
|
||||
<code><strong>SplitPane</strong> If you've used
|
||||
<a href="http://codepen.io/" target="_blank"> codepen</a>,
|
||||
<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>就不会陌生了
|
||||
<a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'>项目地址</a>
|
||||
<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
|
||||
<a href="https://github.com/PanJiaChen/vue-split-pane" target='_blank'> Github repository</a>
|
||||
</code>
|
||||
<split-pane v-on:resize="resize" split="vertical">
|
||||
<template slot="paneL">
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<div>
|
||||
<sticky className="sub-navbar">
|
||||
<el-dropdown trigger="click">
|
||||
<el-button>
|
||||
平台<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
<el-button plain>
|
||||
Platform<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-border" slot="dropdown">
|
||||
<el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
|
||||
|
|
@ -15,79 +15,79 @@
|
|||
</el-dropdown>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<el-button>
|
||||
外链<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
<el-button plain>
|
||||
Link<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-padding no-border" style="width:300px" slot="dropdown">
|
||||
<el-input placeholder="请输入内容" v-model="url">
|
||||
<template slot="prepend">填写url</template>
|
||||
<el-input placeholder="Please enter the content" v-model="url">
|
||||
<template slot="prepend">Url</template>
|
||||
</el-input>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<div class="time-container">
|
||||
<el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="发布时间">
|
||||
<el-date-picker v-model="time" type="datetime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" placeholder="Release time">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
<el-button style="margin-left: 10px;" type="success">发布
|
||||
<el-button style="margin-left: 10px;" type="success">publish
|
||||
</el-button>
|
||||
</sticky>
|
||||
|
||||
<div class="components-container">
|
||||
<code>Sticky header 当页面滚动到预设的位置会吸附在顶部</code>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<div>我是占位</div>
|
||||
<code>Sticky header, {{$t('components.stickyTips')}}</code>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -105,9 +105,9 @@ export default {
|
|||
url: '',
|
||||
platforms: ['a-platform'],
|
||||
platformsOptions: [
|
||||
{ key: 'a-platform', name: '平台A' },
|
||||
{ key: 'b-platform', name: '平台B' },
|
||||
{ key: 'c-platform', name: '平台C' }
|
||||
{ key: 'a-platform', name: 'platformA' },
|
||||
{ key: 'b-platform', name: 'platformB' },
|
||||
{ key: 'c-platform', name: 'platformC' }
|
||||
],
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
|
|
@ -120,8 +120,11 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-container {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
.components-container div {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.time-container {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<div class="components-container">
|
||||
<code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">文档介绍</a>
|
||||
<code>
|
||||
{{$t('components.tinymceTips')}}
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor"> {{$t('components.documentation')}}</a>
|
||||
</code>
|
||||
<div>
|
||||
<tinymce :height="200" v-model="content"></tinymce>
|
||||
<tinymce :height="300" v-model="content"></tinymce>
|
||||
</div>
|
||||
<div class="editor-content" v-html="content"></div>
|
||||
</div>
|
||||
|
|
@ -18,7 +19,14 @@ export default {
|
|||
components: { Tinymce },
|
||||
data() {
|
||||
return {
|
||||
content: 'Tinymce'
|
||||
content:
|
||||
`<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1>
|
||||
<ul>
|
||||
<li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
|
||||
<li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li>
|
||||
<li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
|
||||
</ul>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts 主题
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
const animationDuration = 6000
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts 主题
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">New Visits</div>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="3600"></count-to>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="102400" :duration="2600"></count-to>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">Messages</div>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="4000"></count-to>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="81212" :duration="3000"></count-to>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">Purchases</div>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="4000"></count-to>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="9280" :duration="3200"></count-to>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">Shoppings</div>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="4600"></count-to>
|
||||
<count-to class="card-panel-num" :startVal="0" :endVal="13600" :duration="3600"></count-to>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts 主题
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts 主题
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
const animationDuration = 3000
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
fetchList().then(response => {
|
||||
this.list = response.data.items.slice(0, 7)
|
||||
})
|
||||
} }
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<div class=" clearfix">
|
||||
<pan-thumb style="float: left" :image="avatar"> 你的权限:
|
||||
<pan-thumb style="float: left" :image="avatar"> Your roles:
|
||||
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
|
||||
</pan-thumb>
|
||||
<github-corner></github-corner>
|
||||
<div class="info-container">
|
||||
<span class="display_name">{{name}}</span>
|
||||
<span style="font-size:20px;padding-top:20px;display:inline-block;">普通编辑dashboard</span>
|
||||
<span style="font-size:20px;padding-top:20px;display:inline-block;">editor : dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<template>
|
||||
<div class="app-container documentation-container">
|
||||
<a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">文档</a>
|
||||
<a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">Github 地址</a>
|
||||
<a class="document-btn" target='_blank' href="https://panjiachen.github.io/vue-element-admin-site/#/">{{$t('documentation.documentation')}}</a>
|
||||
<a class="document-btn" target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">{{$t('documentation.github')}}</a>
|
||||
<dropdown-menu style="float:left;margin-left:50px;" title='系列文章' :items='articleList'></dropdown-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DropdownMenu from '@/components/Share/dropdownMenu'
|
||||
|
||||
export default {
|
||||
name: 'clipboardDemo',
|
||||
name: 'documentation',
|
||||
components: { DropdownMenu },
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,13 @@
|
|||
<div class="errPage-container">
|
||||
<errorA></errorA>
|
||||
<errorB></errorB>
|
||||
|
||||
<h3>请点击右上角bug小图表</h3>
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<h3>{{$t('errorLog.tips')}}</h3>
|
||||
<code>
|
||||
现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常.
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/error?id=%e4%bb%a3%e7%a0%81">文档介绍</a>
|
||||
{{$t('errorLog.description')}}
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/error?id=%e4%bb%a3%e7%a0%81">
|
||||
{{$t('errorLog.documentation')}}
|
||||
</a>
|
||||
</code>
|
||||
<a href="#">
|
||||
<img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
<template>
|
||||
<el-table :data="list"border fit highlight-current-row style="width: 100%">
|
||||
<el-table :data="list" border fit highlight-current-row style="width: 100%">
|
||||
|
||||
<el-table-column align="center" label="序号" width="65" v-loading="loading"
|
||||
<el-table-column align="center" label="ID" width="65" v-loading="loading"
|
||||
element-loading-text="请给我点时间！">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="180px" align="center" label="时间">
|
||||
<el-table-column width="180px" align="center" label="Date">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column min-width="300px" label="标题">
|
||||
<el-table-column min-width="300px" label="Title">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.title}}</span>
|
||||
<el-tag>{{scope.row.type}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="110px" align="center" label="作者">
|
||||
<el-table-column width="110px" align="center" label="Author">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="80px" label="重要性">
|
||||
<el-table-column width="120px" label="Importance">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-for="n in +scope.row.importance" icon-class="star" :key="n"></svg-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="阅读数" width="95">
|
||||
<el-table-column align="center" label="Readings" width="95">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.pageviews}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column class-name="status-col" label="状态" width="110">
|
||||
<el-table-column class-name="status-col" label="Status" width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
tabMapOptions: [
|
||||
{ label: '中国', key: 'CN' },
|
||||
{ label: '美国', key: 'US' },
|
||||
{ label: '日本', key: 'JP' },
|
||||
{ label: '欧元区', key: 'EU' }
|
||||
{ label: 'China', key: 'CN' },
|
||||
{ label: 'USA', key: 'US' },
|
||||
{ label: 'Japan', key: 'JP' },
|
||||
{ label: 'Eurozone', key: 'EU' }
|
||||
],
|
||||
activeName: 'CN',
|
||||
createdTimes: 0
|
||||
|
|
|
|||
|
|
@ -1,78 +1,78 @@
|
|||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<div class="filter-container">
|
||||
<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="标题" v-model="listQuery.title">
|
||||
<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" :placeholder="$t('table.title')" v-model="listQuery.title">
|
||||
</el-input>
|
||||
<el-select clearable style="width: 90px" class="filter-item" v-model="listQuery.importance" placeholder="重要性">
|
||||
<el-select clearable style="width: 90px" class="filter-item" v-model="listQuery.importance" :placeholder="$t('table.importance')">
|
||||
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.type" placeholder="类型">
|
||||
<el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.type" :placeholder="$t('table.type')">
|
||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select @change='handleFilter' style="width: 120px" class="filter-item" v-model="listQuery.sort" placeholder="排序">
|
||||
<el-select @change='handleFilter' style="width: 140px" class="filter-item" v-model="listQuery.sort">
|
||||
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
|
||||
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加</el-button>
|
||||
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button>
|
||||
<el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
|
||||
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
|
||||
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">{{$t('table.add')}}</el-button>
|
||||
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">{{$t('table.export')}}</el-button>
|
||||
<el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showReviewer">{{$t('table.reviewer')}}</el-checkbox>
|
||||
</div>
|
||||
|
||||
<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
|
||||
style="width: 100%">
|
||||
<el-table-column align="center" label="序号" width="65">
|
||||
<el-table-column align="center" :label="$t('table.id')" width="65">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="180px" align="center" label="时间">
|
||||
<el-table-column width="150px" align="center" :label="$t('table.date')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150px" label="标题">
|
||||
<el-table-column min-width="150px" :label="$t('table.title')">
|
||||
<template slot-scope="scope">
|
||||
<span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
|
||||
<el-tag>{{scope.row.type | typeFilter}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="110px" align="center" label="作者">
|
||||
<el-table-column width="110px" align="center" :label="$t('table.author')">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="110px" v-if='showAuditor' align="center" label="审核人">
|
||||
<el-table-column width="110px" v-if='showReviewer' align="center" :label="$t('table.reviewer')">
|
||||
<template slot-scope="scope">
|
||||
<span style='color:red;'>{{scope.row.auditor}}</span>
|
||||
<span style='color:red;'>{{scope.row.reviewer}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="80px" label="重要性">
|
||||
<el-table-column width="80px" :label="$t('table.importance')">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="阅读数" width="95">
|
||||
<el-table-column align="center" :label="$t('table.readings')" width="95">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.pageviews" class="link-type" @click='handleFetchPv(scope.row.pageviews)'>{{scope.row.pageviews}}</span>
|
||||
<span v-else>无</span>
|
||||
<span v-else>0</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column class-name="status-col" label="状态" width="100">
|
||||
<el-table-column class-name="status-col" :label="$t('table.status')" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作" width="220" class-name="small-padding">
|
||||
<el-table-column align="center" :label="$t('table.actions')" width="230" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
|
||||
<el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">发布
|
||||
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
|
||||
<el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">{{$t('table.publish')}}
|
||||
</el-button>
|
||||
<el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">草稿
|
||||
<el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">{{$t('table.draft')}}
|
||||
</el-button>
|
||||
<el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
|
||||
<el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">{{$t('table.delete')}}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -86,47 +86,47 @@
|
|||
|
||||
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
||||
<el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select class="filter-item" v-model="temp.type" placeholder="请选择">
|
||||
<el-form-item :label="$t('table.type')" prop="type">
|
||||
<el-select class="filter-item" v-model="temp.type" placeholder="Please select">
|
||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间" prop="timestamp">
|
||||
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="选择日期时间">
|
||||
<el-form-item :label="$t('table.date')" prop="timestamp">
|
||||
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-form-item :label="$t('table.title')" prop="title">
|
||||
<el-input v-model="temp.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select class="filter-item" v-model="temp.status" placeholder="请选择">
|
||||
<el-form-item :label="$t('table.status')">
|
||||
<el-select class="filter-item" v-model="temp.status" placeholder="Please select">
|
||||
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="重要性">
|
||||
<el-form-item :label="$t('table.importance')">
|
||||
<el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max='3'></el-rate>
|
||||
</el-form-item>
|
||||
<el-form-item label="点评">
|
||||
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="temp.remark">
|
||||
<el-form-item :label="$t('table.remark')">
|
||||
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="Please input" v-model="temp.remark">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确 定</el-button>
|
||||
<el-button v-else type="primary" @click="updateData">确 定</el-button>
|
||||
<el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
|
||||
<el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
|
||||
<el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="阅读数统计" :visible.sync="dialogPvVisible">
|
||||
<el-dialog title="Reading statistics" :visible.sync="dialogPvVisible">
|
||||
<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column prop="key" label="渠道"> </el-table-column>
|
||||
<el-table-column prop="pv" label="pv"> </el-table-column>
|
||||
<el-table-column prop="key" label="Channel"> </el-table-column>
|
||||
<el-table-column prop="pv" label="Pv"> </el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogPvVisible = false">确 定</el-button>
|
||||
<el-button type="primary" @click="dialogPvVisible = false">{{$t('table.confirm')}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
|
|
@ -139,13 +139,13 @@ import waves from '@/directive/waves' // 水波纹指令
|
|||
import { parseTime } from '@/utils'
|
||||
|
||||
const calendarTypeOptions = [
|
||||
{ key: 'CN', display_name: '中国' },
|
||||
{ key: 'US', display_name: '美国' },
|
||||
{ key: 'JP', display_name: '日本' },
|
||||
{ key: 'EU', display_name: '欧元区' }
|
||||
{ key: 'CN', display_name: 'China' },
|
||||
{ key: 'US', display_name: 'USA' },
|
||||
{ key: 'JP', display_name: 'Japan' },
|
||||
{ key: 'EU', display_name: 'Eurozone' }
|
||||
]
|
||||
|
||||
// arr to obj ,such as { CN : "中国", US : "美国" }
|
||||
// arr to obj ,such as { CN : "China", US : "USA" }
|
||||
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
|
||||
acc[cur.key] = cur.display_name
|
||||
return acc
|
||||
|
|
@ -172,9 +172,9 @@ export default {
|
|||
},
|
||||
importanceOptions: [1, 2, 3],
|
||||
calendarTypeOptions,
|
||||
sortOptions: [{ label: '按ID升序列', key: '+id' }, { label: '按ID降序', key: '-id' }],
|
||||
sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
|
||||
statusOptions: ['published', 'draft', 'deleted'],
|
||||
showAuditor: false,
|
||||
showReviewer: false,
|
||||
temp: {
|
||||
id: undefined,
|
||||
importance: 1,
|
||||
|
|
@ -187,8 +187,8 @@ export default {
|
|||
dialogFormVisible: false,
|
||||
dialogStatus: '',
|
||||
textMap: {
|
||||
update: '编辑',
|
||||
create: '创建'
|
||||
update: 'Edit',
|
||||
create: 'Create'
|
||||
},
|
||||
dialogPvVisible: false,
|
||||
pvData: [],
|
||||
|
|
@ -267,7 +267,7 @@ export default {
|
|||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
|
||||
this.temp.author = '原创作者'
|
||||
this.temp.author = 'vue-element-admin'
|
||||
createArticle(this.temp).then(() => {
|
||||
this.list.unshift(this.temp)
|
||||
this.dialogFormVisible = false
|
||||
|
|
@ -333,10 +333,10 @@ export default {
|
|||
handleDownload() {
|
||||
this.downloadLoading = true
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const tHeader = ['时间', '地区', '类型', '标题', '重要性']
|
||||
const filterVal = ['timestamp', 'province', 'type', 'title', 'importance']
|
||||
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const data = this.formatJson(filterVal, this.list)
|
||||
excel.export_json_to_excel(tHeader, data, 'table数据')
|
||||
excel.export_json_to_excel(tHeader, data, 'table-list')
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,58 +3,58 @@
|
|||
<!-- Note that row-key is necessary to get a correct row order. -->
|
||||
<el-table :data="list" row-key="id" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
|
||||
|
||||
<el-table-column align="center" label="序号" width="65">
|
||||
<el-table-column align="center" label="ID" width="65">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="180px" align="center" label="时间">
|
||||
<el-table-column width="180px" align="center" label="Date">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column min-width="300px" label="标题">
|
||||
<el-table-column min-width="300px" label="Title">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.title}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="110px" align="center" label="作者">
|
||||
<el-table-column width="110px" align="center" label="Author">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="100px" label="重要性">
|
||||
<el-table-column width="100px" label="Importance">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="icon-star" :key="n"></svg-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="阅读数" width="95">
|
||||
<el-table-column align="center" label="Readings" width="95">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.pageviews}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column class-name="status-col" label="状态" width="110">
|
||||
<el-table-column class-name="status-col" label="Status" width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="拖拽" width="80">
|
||||
<el-table-column align="center" label="Drag" width="80">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon class='drag-handler' icon-class="drag"></svg-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
<div class='show-d'>默认顺序 {{ oldList}}</div>
|
||||
<div class='show-d'>拖拽后顺序{{newList}}</div>
|
||||
<!-- $t is vue-i18n global function to translate lang (lang in @/lang) -->
|
||||
<div class='show-d'>{{$t('table.dragTips1')}} : {{ oldList}}</div>
|
||||
<div class='show-d'>{{$t('table.dragTips2')}} : {{newList}}</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<el-table :data="tableData" :key='key' border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column prop="name" label="fruitName" width="180"></el-table-column>
|
||||
<el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
|
||||
<el-table-column :key='fruit' v-for='fruit in formThead' :label="fruit">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row[fruit]}}
|
||||
</template>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
const defaultFormThead = ['apple', 'banana'] // 默认选中项
|
||||
const defaultFormThead = ['apple', 'banana']
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -42,15 +42,15 @@ export default {
|
|||
}
|
||||
],
|
||||
key: 1, // table key
|
||||
formTheadOptions: ['apple', 'banana', 'orange'], // 可选择表头
|
||||
formTheadOptions: ['apple', 'banana', 'orange'],
|
||||
checkboxVal: defaultFormThead, // checkboxVal
|
||||
formThead: defaultFormThead // 默认表头
|
||||
formThead: defaultFormThead // 默认表头 Default header
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checkboxVal(valArr) {
|
||||
this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
|
||||
this.key = this.key + 1// 为了保证table 每次都会重渲 （牺牲性能保证效果，当然也可以不用）
|
||||
this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div style='margin:0 0 5px 20px'>固定表头 按照表头顺序排序</div>
|
||||
<div style='margin:0 0 5px 20px'>{{$t('table.dynamicTips1')}}</div>
|
||||
<fixed-thead></fixed-thead>
|
||||
|
||||
<div style='margin:30px 0 5px 20px'>不固定表头 按照点击顺序排序</div>
|
||||
<div style='margin:30px 0 5px 20px'>{{$t('table.dynamicTips2')}}</div>
|
||||
<unfixed-thead></unfixed-thead>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<el-table :data="tableData" border fit highlight-current-row style="width: 100%">
|
||||
<el-table-column prop="name" label="fruitName" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
|
||||
<el-table-column :key='fruit' v-for='fruit in formThead' :label="fruit">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row[fruit]}}
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,37 +3,37 @@
|
|||
|
||||
<el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
|
||||
|
||||
<el-table-column align="center" label="序号" width="80">
|
||||
<el-table-column align="center" label="ID" width="80">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.id}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="180px" align="center" label="时间">
|
||||
<el-table-column width="180px" align="center" label="Date">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="120px" align="center" label="作者">
|
||||
<el-table-column width="120px" align="center" label="Author">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.author}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column width="100px" label="重要性">
|
||||
<el-table-column width="100px" label="Importance">
|
||||
<template slot-scope="scope">
|
||||
<svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column class-name="status-col" label="状态" width="110">
|
||||
<el-table-column class-name="status-col" label="Status" width="110">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column min-width="300px" label="标题">
|
||||
<el-table-column min-width="300px" label="Title">
|
||||
<template slot-scope="scope">
|
||||
<template v-if="scope.row.edit">
|
||||
<el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
|
||||
|
|
@ -43,10 +43,10 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label="编辑" width="120">
|
||||
<el-table-column align="center" label="Actions" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">完成</el-button>
|
||||
<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">编辑</el-button>
|
||||
<el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">Ok</el-button>
|
||||
<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">Edit</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
@ -89,7 +89,9 @@ export default {
|
|||
const items = response.data.items
|
||||
this.list = items.map(v => {
|
||||
this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
|
||||
|
||||
v.originalTitle = v.title // will be used when user click the cancel botton
|
||||
|
||||
return v
|
||||
})
|
||||
this.listLoading = false
|
||||
|
|
|
|||
|
|
@ -1,29 +1,30 @@
|
|||
<template>
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<div class="app-container">
|
||||
<el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出excel</el-button>
|
||||
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
|
||||
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||
<el-table-column align="center" label='ID' width="95">
|
||||
<el-table-column align="center" label='Id' width="95">
|
||||
<template slot-scope="scope">
|
||||
{{scope.$index}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="文章标题">
|
||||
<el-table-column label="Title">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.title}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="作者" width="95" align="center">
|
||||
<el-table-column label="Author" width="110" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag>{{scope.row.author}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="阅读数" width="115" align="center">
|
||||
<el-table-column label="Readings" width="115" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.pageviews}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="created_at" label="发布时间" width="220">
|
||||
<el-table-column align="center" label="Date" width="220">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
|
||||
|
|
@ -61,7 +62,7 @@ export default {
|
|||
handleDownload() {
|
||||
this.downloadLoading = true
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
|
||||
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
|
||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||
const list = this.list
|
||||
const data = this.formatJson(filterVal, list)
|
||||
|
|
|
|||
|
|
@ -1,31 +1,32 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||
<el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出已选择项</el-button>
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||
<el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.selectedExport')}}</el-button>
|
||||
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
|
||||
ref="multipleTable">
|
||||
<el-table-column type="selection" align="center"></el-table-column>
|
||||
<el-table-column align="center" label='ID' width="95">
|
||||
<el-table-column align="center" label='Id' width="95">
|
||||
<template slot-scope="scope">
|
||||
{{scope.$index}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="文章标题">
|
||||
<el-table-column label="Title">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.title}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="作者" width="95" align="center">
|
||||
<el-table-column label="Author" width="110" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag>{{scope.row.author}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="阅读数" width="115" align="center">
|
||||
<el-table-column label="Readings" width="115" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.pageviews}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="created_at" label="发布时间" width="220">
|
||||
<el-table-column align="center" label="PDate" width="220">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span>{{scope.row.display_time}}</span>
|
||||
|
|
@ -66,18 +67,18 @@ export default {
|
|||
handleDownload() {
|
||||
if (this.multipleSelection.length) {
|
||||
this.downloadLoading = true
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
|
||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||
const list = this.multipleSelection
|
||||
const data = this.formatJson(filterVal, list)
|
||||
excel.export_json_to_excel(tHeader, data, this.filename)
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.downloadLoading = false
|
||||
})
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
|
||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||
const list = this.multipleSelection
|
||||
const data = this.formatJson(filterVal, list)
|
||||
excel.export_json_to_excel(tHeader, data, this.filename)
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.downloadLoading = false
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请至少选择一条记录',
|
||||
message: 'Please select at least one item',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ export default {
|
|||
name: 'AppMain',
|
||||
computed: {
|
||||
cachedViews() {
|
||||
// console.log(this.$store.state.tagsView.cachedViews)
|
||||
return this.$store.state.tagsView.cachedViews
|
||||
}
|
||||
// key() {
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
<div class="right-menu">
|
||||
<error-log class="errLog-container right-menu-item"></error-log>
|
||||
|
||||
<el-tooltip effect="dark" content="全屏" placement="bottom">
|
||||
<el-tooltip effect="dark" :content="$t('navbar.screenfull')" placement="bottom">
|
||||
<screenfull class="screenfull right-menu-item"></screenfull>
|
||||
</el-tooltip>
|
||||
|
||||
<lang-select class="international right-menu-item"></lang-select>
|
||||
|
||||
<el-tooltip effect="dark" content="换肤" placement="bottom">
|
||||
<el-tooltip effect="dark" :content="$t('navbar.theme')" placement="bottom">
|
||||
<theme-picker class="theme-switch right-menu-item"></theme-picker>
|
||||
</el-tooltip>
|
||||
|
||||
|
|
@ -25,16 +25,16 @@
|
|||
<el-dropdown-menu slot="dropdown">
|
||||
<router-link to="/">
|
||||
<el-dropdown-item>
|
||||
首页
|
||||
{{$t('navbar.dashboard')}}
|
||||
</el-dropdown-item>
|
||||
</router-link>
|
||||
<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
|
||||
<el-dropdown-item>
|
||||
项目地址
|
||||
{{$t('navbar.github')}}
|
||||
</el-dropdown-item>
|
||||
</a>
|
||||
<el-dropdown-item divided>
|
||||
<span @click="logout" style="display:block;">退出登录</span>
|
||||
<span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
|
@ -73,7 +73,7 @@ export default {
|
|||
},
|
||||
logout() {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.reload()// 为了重新实例化vue-router对象 避免bug
|
||||
location.reload()// In order to re-instantiate the vue-router object to avoid bugs
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'authredirect',
|
||||
created() {
|
||||
const hash = window.location.search.slice(1)
|
||||
window.opener.location.href = window.location.origin + '/login#' + hash
|
||||
window.close()
|
||||
}
|
||||
export default {
|
||||
name: 'authredirect',
|
||||
created() {
|
||||
const hash = window.location.search.slice(1)
|
||||
window.opener.location.href = window.location.origin + '/login#' + hash
|
||||
window.close()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="login-container">
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
|
||||
<div class="title-container">
|
||||
<h3 class="title">{{ translateKey('title')}}</h3>
|
||||
<h3 class="title">{{$t('login.title')}}</h3>
|
||||
<lang-select class="set-language"></lang-select>
|
||||
</div>
|
||||
<el-form-item prop="username">
|
||||
|
|
@ -16,29 +16,28 @@
|
|||
<span class="svg-container">
|
||||
<svg-icon icon-class="password" />
|
||||
</span>
|
||||
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
|
||||
placeholder="password" />
|
||||
<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="password" />
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon icon-class="eye" />
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">{{translateKey('logIn')}}</el-button>
|
||||
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">{{$t('login.logIn')}}</el-button>
|
||||
|
||||
<div class="tips">
|
||||
<span>{{translateKey('username')}} : admin</span>
|
||||
<span>{{translateKey('password')}} : {{translateKey('any')}}</span>
|
||||
<span>{{$t('login.username')}} : admin</span>
|
||||
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
|
||||
</div>
|
||||
<div class="tips">
|
||||
<span>{{translateKey('username')}} : editor </span>
|
||||
<span>{{translateKey('password')}} : {{translateKey('any')}}</span>
|
||||
<span style="margin-right:18px;">{{$t('login.username')}} : editor</span>
|
||||
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
|
||||
</div>
|
||||
|
||||
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{translateKey('thirdparty')}}</el-button>
|
||||
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{$t('login.thirdparty')}}</el-button>
|
||||
</el-form>
|
||||
|
||||
<el-dialog :title="translateKey('thirdparty')" :visible.sync="showDialog">
|
||||
{{translateKey('thirdpartyTips')}}
|
||||
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
|
||||
{{$t('login.thirdpartyTips')}}
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
|
@ -51,10 +50,10 @@
|
|||
<script>
|
||||
import { isvalidUsername } from '@/utils/validate'
|
||||
import LangSelect from '@/components/LangSelect'
|
||||
import socialSign from './socialsignin'
|
||||
import SocialSign from './socialsignin'
|
||||
|
||||
export default {
|
||||
components: { LangSelect, socialSign },
|
||||
components: { LangSelect, SocialSign },
|
||||
name: 'login',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
|
|
@ -80,20 +79,17 @@ export default {
|
|||
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
||||
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
|
||||
},
|
||||
pwdType: 'password',
|
||||
passwordType: 'password',
|
||||
loading: false,
|
||||
showDialog: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
translateKey(key) {
|
||||
return this.$t('login.' + key)
|
||||
},
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
if (this.passwordType === 'password') {
|
||||
this.passwordType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
this.passwordType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
|
|
@ -103,7 +99,6 @@ export default {
|
|||
this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
|
||||
this.loading = false
|
||||
this.$router.push({ path: '/' })
|
||||
// this.showDialog = true
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
|
|
@ -172,7 +167,6 @@ $light_gray:#eee;
|
|||
color: #454545;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div style="margin-bottom:15px;">你的权限： {{roles}}</div>
|
||||
切换权限：
|
||||
<div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
|
||||
{{$t('permission.switchRoles')}}：
|
||||
<el-radio-group v-model="role">
|
||||
<el-radio-button label="editor"></el-radio-button>
|
||||
</el-radio-group>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<div class="icons-container">
|
||||
<p class="warn-content">
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/#/icon" target="_blank">添加和使用方式</a>
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/#/icon" target="_blank">Add and use
|
||||
</a>
|
||||
</p>
|
||||
<div class="icons-wrapper">
|
||||
<div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
|
||||
|
|
|
|||
|
|
@ -2,21 +2,23 @@
|
|||
<div class="app-container">
|
||||
<el-card class="box-card">
|
||||
<div slot="header">
|
||||
<span style="line-height: 36px;">偏好设置</span>
|
||||
<a class='link-type link-title' target="_blank" href='https://panjiachen.github.io/vue-element-admin-site/#/theme'>换肤文档</a>
|
||||
<a class='link-type link-title' target="_blank" href='https://panjiachen.github.io/vue-element-admin-site/#/theme'>
|
||||
{{$t('theme.documentation')}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-item">
|
||||
<span class="field-label">换肤:</span>
|
||||
<span class="field-label">{{$t('theme.change')}} : </span>
|
||||
<el-switch v-model="theme"></el-switch>
|
||||
<code style="margin-top:15px;">{{$t('theme.tips')}}</code>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div class="block">
|
||||
<el-button type="primary">成功按钮</el-button>
|
||||
<el-button type="success">成功按钮</el-button>
|
||||
<el-button type="warning">警告按钮</el-button>
|
||||
<el-button type="danger">危险按钮</el-button>
|
||||
<el-button type="info">信息按钮</el-button>
|
||||
<el-button type="primary">Primary</el-button>
|
||||
<el-button type="success">Success</el-button>
|
||||
<el-button type="info">Info</el-button>
|
||||
<el-button type="warning">Warning</el-button>
|
||||
<el-button type="danger">Danger</el-button>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
|
|
@ -24,7 +26,8 @@
|
|||
<el-button type="primary" icon="el-icon-share"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
<el-button type="primary" icon="el-icon-search">Search</el-button>
|
||||
<el-button type="primary">Upload
|
||||
<el-button type="primary">
|
||||
Upload
|
||||
<i class="el-icon-upload el-icon-right"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
@ -52,7 +55,7 @@
|
|||
|
||||
<script>
|
||||
import { toggleClass } from '@/utils'
|
||||
import '@/assets/custom-theme/index.css' // 换肤版本element-ui css
|
||||
import '@/assets/custom-theme/index.css' // the theme changed version element-ui css
|
||||
|
||||
export default {
|
||||
name: 'theme',
|
||||
|
|
@ -79,6 +82,9 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.field-label{
|
||||
vertical-align: middle;
|
||||
}
|
||||
.box-card {
|
||||
width: 400px;
|
||||
margin: 20px auto;
|
||||
|
|
|
|||
|
|
@ -1,29 +1,30 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-input style='width:240px;' placeholder="请输入文件名(默认file)" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出zip</el-button>
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<el-input style='width:300px;' :placeholder="$t('zip.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
|
||||
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('zip.export')}} zip</el-button>
|
||||
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||
<el-table-column align="center" label='ID' width="95">
|
||||
<template slot-scope="scope">
|
||||
{{scope.$index}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="文章标题">
|
||||
<el-table-column label="Title">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.title}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="作者" width="95" align="center">
|
||||
<el-table-column label="Author" width="95" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag>{{scope.row.author}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="阅读数" width="115" align="center">
|
||||
<el-table-column label="Readings" width="115" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.pageviews}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="created_at" label="发布时间" width="220">
|
||||
<el-table-column align="center" label="Date" width="220">
|
||||
<template slot-scope="scope">
|
||||
<i class="el-icon-time"></i>
|
||||
<span>{{scope.row.display_time}}</span>
|
||||
|
|
@ -60,7 +61,7 @@ export default {
|
|||
handleDownload() {
|
||||
this.downloadLoading = true
|
||||
import('@/vendor/Export2Zip').then(zip => {
|
||||
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
|
||||
const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
|
||||
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
|
||||
const list = this.list
|
||||
const data = this.formatJson(filterVal, list)
|
||||
|
|
|
|||
Loading…
Reference in a new issue