Compare commits
23 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
de3b29b5f3 | ||
|
|
54acf1e0d5 | ||
|
|
de08e49f19 | ||
|
|
2472107768 | ||
|
|
d18902dfee | ||
|
|
9ba2648689 | ||
|
|
1d0b26cec8 | ||
|
|
ea7e139696 | ||
|
|
deac95da1b | ||
|
|
2b51b987be | ||
|
|
45fef9b431 | ||
|
|
83e56488d8 | ||
|
|
f3bfaa0f2b | ||
|
|
e261fbcbfb | ||
|
|
471c297f13 | ||
|
|
093475ee50 | ||
|
|
cb3578e5c3 | ||
|
fe25c4d96b | ||
|
|
7fef8568c2 | ||
|
|
0dfa56c73e | ||
|
|
642d48e372 | ||
|
|
021c147b31 | ||
|
|
04d9b849dd |
@@ -2,8 +2,9 @@
|
||||
|
||||
module.exports = {
|
||||
"plugins": {
|
||||
// to edit target browsers: use "browserslist" field in package.json
|
||||
"postcss-import": {},
|
||||
"postcss-url": {},
|
||||
// to edit target browsers: use "browserslist" field in package.json
|
||||
"autoprefixer": {}
|
||||
}
|
||||
}
|
||||
|
||||
2
LICENSE
2
LICENSE
@@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2017 PanJiaChen
|
||||
Copyright (c) 2017-present 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-present 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-present PanJiaChen
|
||||
@@ -49,7 +49,7 @@ module.exports = {
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader?cacheDirectory',
|
||||
include: [resolve('src'), resolve('test')]
|
||||
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-element-admin",
|
||||
"version": "3.4.0",
|
||||
"version": "3.5.1",
|
||||
"description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features",
|
||||
"author": "Pan <panfree23@gmail.com>",
|
||||
"license": "MIT",
|
||||
@@ -39,7 +39,7 @@
|
||||
"vue-splitpane": "1.0.2",
|
||||
"vuedraggable": "2.15.0",
|
||||
"vuex": "3.0.1",
|
||||
"xlsx": "^0.11.7"
|
||||
"xlsx": "^0.11.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "7.2.3",
|
||||
@@ -60,7 +60,6 @@
|
||||
"eslint-friendly-formatter": "3.0.0",
|
||||
"eslint-loader": "1.9.0",
|
||||
"eslint-plugin-html": "4.0.1",
|
||||
"eventsource-polyfill": "0.9.6",
|
||||
"extract-text-webpack-plugin": "3.0.2",
|
||||
"file-loader": "1.1.5",
|
||||
"friendly-errors-webpack-plugin": "1.6.1",
|
||||
@@ -72,6 +71,7 @@
|
||||
"portfinder": "1.0.13",
|
||||
"postcss-import": "11.0.0",
|
||||
"postcss-loader": "2.0.9",
|
||||
"postcss-url": "7.3.0",
|
||||
"pushstate-server": "3.0.1",
|
||||
"rimraf": "2.6.2",
|
||||
"sass-loader": "6.0.6",
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="errorLogs.length>0">
|
||||
<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
|
||||
<el-button size="small" type="danger" class="bug-btn">
|
||||
<svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
|
||||
@@ -11,7 +11,7 @@
|
||||
</el-badge>
|
||||
|
||||
<el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
|
||||
<el-table :data="logsList" border>
|
||||
<el-table :data="errorLogs" border>
|
||||
<el-table-column label="Message">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
@@ -44,15 +44,15 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'errorLog',
|
||||
props: {
|
||||
logsList: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogTableVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
errorLogs() {
|
||||
return this.$store.getters.errorLogs
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
41
src/components/LangSelect/index.vue
Normal file
41
src/components/LangSelect/index.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" class='international' @command="handleSetLanguage">
|
||||
<div>
|
||||
<svg-icon class-name='international-icon' icon-class="language" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
|
||||
<el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
language() {
|
||||
return this.$store.getters.language
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLanguage(lang) {
|
||||
this.$i18n.locale = lang
|
||||
this.$store.dispatch('setLanguage', lang)
|
||||
this.$message({
|
||||
message: 'switch language success',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.international-icon {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
vertical-align: -5px!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button :loading="loading" type="primary" @click="handleUpload">select excel file</el-button>
|
||||
<input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
|
||||
<div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
|
||||
Drop excel file here or
|
||||
<el-button style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">browse</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -22,16 +25,35 @@ export default {
|
||||
generateDate({ header, results }) {
|
||||
this.excelData.header = header
|
||||
this.excelData.results = results
|
||||
this.loading = false
|
||||
this.$emit('on-selected-file', this.excelData)
|
||||
},
|
||||
handleDrop(e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
const files = e.dataTransfer.files
|
||||
if (files.length !== 1) {
|
||||
this.$message.error('Only support uploading one file!')
|
||||
return
|
||||
}
|
||||
const itemFile = files[0] // only use files[0]
|
||||
this.readerData(itemFile)
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
},
|
||||
handleDragover(e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
},
|
||||
handleUpload() {
|
||||
document.getElementById('excel-upload-input').click()
|
||||
},
|
||||
handkeFileChange(e) {
|
||||
this.loading = true
|
||||
const files = e.target.files
|
||||
const itemFile = files[0] // only use files[0]
|
||||
this.readerData(itemFile)
|
||||
},
|
||||
readerData(itemFile) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
const data = e.target.result
|
||||
@@ -75,4 +97,16 @@ export default {
|
||||
display: none;
|
||||
z-index: -9999;
|
||||
}
|
||||
#drop{
|
||||
border: 2px dashed #bbb;
|
||||
width: 600px;
|
||||
height: 160px;
|
||||
line-height: 160px;
|
||||
margin: 0 auto;
|
||||
font-size: 24px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
color: #bbb;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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',
|
||||
@@ -44,5 +44,83 @@ export default {
|
||||
theme: 'Theme',
|
||||
clipboardDemo: 'Clipboard',
|
||||
i18n: 'I18n'
|
||||
},
|
||||
navbar: {
|
||||
logOut: 'Log Out',
|
||||
dashboard: 'Dashboard',
|
||||
github: 'Github',
|
||||
screenfull: 'screenfull',
|
||||
theme: 'theme'
|
||||
},
|
||||
login: {
|
||||
title: 'Login Form',
|
||||
logIn: 'Log in',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
any: 'any',
|
||||
thirdparty: 'Or connect with',
|
||||
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.'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ const messages = {
|
||||
}
|
||||
|
||||
const i18n = new VueI18n({
|
||||
locale: Cookies.get('language') || 'zh', // set locale
|
||||
locale: Cookies.get('language') || 'en', // set locale
|
||||
messages // set locale messages
|
||||
})
|
||||
|
||||
|
||||
@@ -44,5 +44,83 @@ export default {
|
||||
theme: '换肤',
|
||||
clipboardDemo: 'clipboard',
|
||||
i18n: '国际化'
|
||||
},
|
||||
navbar: {
|
||||
logOut: '退出登录',
|
||||
dashboard: '首页',
|
||||
github: '项目地址',
|
||||
screenfull: '全屏',
|
||||
theme: '换肤'
|
||||
},
|
||||
login: {
|
||||
title: '系统登录',
|
||||
logIn: '登录',
|
||||
username: '账号',
|
||||
password: '密码',
|
||||
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,11 +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', // 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,
|
||||
|
||||
@@ -2,14 +2,14 @@ import { param2Obj } from '@/utils'
|
||||
|
||||
const userMap = {
|
||||
admin: {
|
||||
role: ['admin'],
|
||||
roles: ['admin'],
|
||||
token: 'admin',
|
||||
introduction: '我是超级管理员',
|
||||
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
|
||||
name: 'Super Admin'
|
||||
},
|
||||
editor: {
|
||||
role: ['editor'],
|
||||
roles: ['editor'],
|
||||
token: 'editor',
|
||||
introduction: '我是编辑',
|
||||
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
|
||||
|
||||
@@ -1,60 +1,63 @@
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import NProgress from 'nprogress' // Progress 进度条
|
||||
import 'nprogress/nprogress.css'// Progress 进度条样式
|
||||
import { getToken } from '@/utils/auth' // 验权
|
||||
import { Message } from 'element-ui'
|
||||
import NProgress from 'nprogress' // progress bar
|
||||
import 'nprogress/nprogress.css'// progress bar style
|
||||
import { getToken } from '@/utils/auth' // getToken from cookie
|
||||
|
||||
// permissiom judge
|
||||
NProgress.configure({ showSpinner: false })// NProgress Configuration
|
||||
|
||||
// permissiom judge function
|
||||
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
|
||||
if (getToken()) { // 判断是否有token
|
||||
NProgress.start() // start progress bar
|
||||
if (getToken()) { // determine if there has token
|
||||
/* has token*/
|
||||
if (to.path === '/login') {
|
||||
next({ path: '/' })
|
||||
NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
|
||||
NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
|
||||
} else {
|
||||
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
|
||||
store.dispatch('GetUserInfo').then(res => { // 拉取user_info
|
||||
const roles = res.data.role
|
||||
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
|
||||
const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
|
||||
store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
|
||||
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' })
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
|
||||
if (hasPermission(store.getters.roles, to.meta.role)) {
|
||||
if (hasPermission(store.getters.roles, to.meta.roles)) {
|
||||
next()//
|
||||
} else {
|
||||
next({ path: '/401', query: { noGoBack: true }})
|
||||
NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
|
||||
next({ path: '/401', replace: true, query: { noGoBack: true }})
|
||||
}
|
||||
// 可删 ↑
|
||||
}
|
||||
}
|
||||
} else {
|
||||
/* has no token*/
|
||||
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
|
||||
next()
|
||||
} else {
|
||||
next('/login') // 否则全部重定向到登录页
|
||||
NProgress.done() // router在hash模式下 手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！
|
||||
NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
router.afterEach(() => {
|
||||
NProgress.done() // 结束Progress
|
||||
NProgress.done() // finish progress bar
|
||||
})
|
||||
|
||||
@@ -9,12 +9,16 @@ 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
|
||||
* name:'router-name' the name is used by <keep-alive> (must set!!!)
|
||||
* meta : {
|
||||
role: ['admin','editor'] will control the page role (you can set multiple roles)
|
||||
roles: ['admin','editor'] will control the page roles (you can set multiple roles)
|
||||
title: 'title' the name show in submenu and breadcrumb (recommend set)
|
||||
icon: 'svg-name' the icon show in the sidebar,
|
||||
noCache: true if fasle ,the page will no be cached(default is false)
|
||||
@@ -50,7 +54,7 @@ export const constantRouterMap = [
|
||||
]
|
||||
|
||||
export default new Router({
|
||||
// mode: 'history', //后端支持可开
|
||||
// mode: 'history', // require service support
|
||||
scrollBehavior: () => ({ y: 0 }),
|
||||
routes: constantRouterMap
|
||||
})
|
||||
@@ -60,7 +64,7 @@ export const asyncRouterMap = [
|
||||
path: '/permission',
|
||||
component: Layout,
|
||||
redirect: '/permission/index',
|
||||
meta: { role: ['admin'] },
|
||||
meta: { roles: ['admin'] }, // you can set roles in root nav
|
||||
children: [{
|
||||
path: 'index',
|
||||
component: _import('permission/index'),
|
||||
@@ -68,7 +72,7 @@ export const asyncRouterMap = [
|
||||
meta: {
|
||||
title: 'permission',
|
||||
icon: 'lock',
|
||||
role: ['admin']
|
||||
roles: ['admin'] // or you can only set roles in sub nav
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
@@ -5,7 +5,7 @@ const app = {
|
||||
sidebar: {
|
||||
opened: !+Cookies.get('sidebarStatus')
|
||||
},
|
||||
language: Cookies.get('language') || 'zh'
|
||||
language: Cookies.get('language') || 'en'
|
||||
},
|
||||
mutations: {
|
||||
TOGGLE_SIDEBAR: state => {
|
||||
|
||||
@@ -6,8 +6,8 @@ import { asyncRouterMap, constantRouterMap } from '@/router'
|
||||
* @param route
|
||||
*/
|
||||
function hasPermission(roles, route) {
|
||||
if (route.meta && route.meta.role) {
|
||||
return roles.some(role => route.meta.role.indexOf(role) >= 0)
|
||||
if (route.meta && route.meta.roles) {
|
||||
return roles.some(role => route.meta.roles.indexOf(role) >= 0)
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@ const tagsView = {
|
||||
for (const i of state.cachedViews) {
|
||||
if (i === view.name) {
|
||||
const index = state.cachedViews.indexOf(i)
|
||||
state.cachedViews.splice(index, 1)
|
||||
state.cachedViews.splice(index, index + 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,7 +67,7 @@ const user = {
|
||||
reject('error')
|
||||
}
|
||||
const data = response.data
|
||||
commit('SET_ROLES', data.role)
|
||||
commit('SET_ROLES', data.roles)
|
||||
commit('SET_NAME', data.name)
|
||||
commit('SET_AVATAR', data.avatar)
|
||||
commit('SET_INTRODUCTION', data.introduction)
|
||||
@@ -116,13 +116,13 @@ const user = {
|
||||
},
|
||||
|
||||
// 动态修改权限
|
||||
ChangeRole({ commit }, role) {
|
||||
ChangeRoles({ commit }, role) {
|
||||
return new Promise(resolve => {
|
||||
commit('SET_TOKEN', role)
|
||||
setToken(role)
|
||||
getUserInfo(role).then(response => {
|
||||
const data = response.data
|
||||
commit('SET_ROLES', data.role)
|
||||
commit('SET_ROLES', data.roles)
|
||||
commit('SET_NAME', data.name)
|
||||
commit('SET_AVATAR', data.avatar)
|
||||
commit('SET_INTRODUCTION', data.introduction)
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
//覆盖一些element-ui样式
|
||||
|
||||
.el-breadcrumb__inner, .el-breadcrumb__inner a{
|
||||
font-weight: 400!important;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
input[type="file"] {
|
||||
display: none !important;
|
||||
@@ -23,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,3 +1,10 @@
|
||||
// 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
|
||||
const hasKey = this.$te('route.' + title)
|
||||
const translatedTitle = this.$t('route.' + title) // $t :this method from vue-i18n, inject in @/lang/index.js
|
||||
|
||||
if (hasKey) {
|
||||
return translatedTitle
|
||||
}
|
||||
return title
|
||||
}
|
||||
|
||||
@@ -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,84 +1,84 @@
|
||||
<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" 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>
|
||||
</el-table>
|
||||
|
||||
<div v-show="!listLoading" class="pagination-container">
|
||||
<div class="pagination-container">
|
||||
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
|
||||
:page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
|
||||
</el-pagination>
|
||||
@@ -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: [],
|
||||
@@ -196,7 +196,8 @@ export default {
|
||||
type: [{ required: true, message: 'type is required', trigger: 'change' }],
|
||||
timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
|
||||
title: [{ required: true, message: 'title is required', trigger: 'blur' }]
|
||||
}
|
||||
},
|
||||
downloadLoading: false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
@@ -266,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
|
||||
@@ -330,12 +331,13 @@ export default {
|
||||
})
|
||||
},
|
||||
handleDownload() {
|
||||
require.ensure([], () => {
|
||||
const { export_json_to_excel } = require('@/vendor/Export2Excel')
|
||||
const tHeader = ['时间', '地区', '类型', '标题', '重要性']
|
||||
const filterVal = ['timestamp', 'province', 'type', 'title', 'importance']
|
||||
this.downloadLoading = true
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||
const data = this.formatJson(filterVal, this.list)
|
||||
export_json_to_excel(tHeader, data, 'table数据')
|
||||
excel.export_json_to_excel(tHeader, data, 'table-list')
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
||||
formatJson(filterVal, jsonData) {
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<!-- Note that row-key is necessary to get a correct row order. -->
|
||||
<el-table :data="list" row-key="id" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
|
||||
|
||||
<el-table :data="list" 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="80px" 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>
|
||||
<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="95">
|
||||
<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'>默认顺序 {{ olderList}}</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>
|
||||
@@ -75,7 +75,7 @@ export default {
|
||||
limit: 10
|
||||
},
|
||||
sortable: null,
|
||||
olderList: [],
|
||||
oldList: [],
|
||||
newList: []
|
||||
}
|
||||
},
|
||||
@@ -99,8 +99,8 @@ export default {
|
||||
this.list = response.data.items
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
this.olderList = this.list.map(v => v.id)
|
||||
this.newList = this.olderList.slice()
|
||||
this.oldList = this.list.map(v => v.id)
|
||||
this.newList = this.oldList.slice()
|
||||
this.$nextTick(() => {
|
||||
this.setSort()
|
||||
})
|
||||
@@ -109,7 +109,12 @@ export default {
|
||||
setSort() {
|
||||
const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
|
||||
this.sortable = Sortable.create(el, {
|
||||
ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
|
||||
onEnd: evt => {
|
||||
const targetRow = this.list.splice(evt.oldIndex, 1)[0]
|
||||
this.list.splice(evt.newIndex, 0, targetRow)
|
||||
|
||||
// for show the changes, you can delete in you code
|
||||
const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
|
||||
this.newList.splice(evt.newIndex, 0, tempIndex)
|
||||
}
|
||||
@@ -119,10 +124,21 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sortable-ghost{
|
||||
opacity: .8;
|
||||
color: #fff!important;
|
||||
background: #42b983!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.icon-star{
|
||||
margin-right:2px;
|
||||
}
|
||||
.drag-handler{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.show-d{
|
||||
|
||||
@@ -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
|
||||
@@ -122,6 +124,6 @@ export default {
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 13px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
@@ -60,13 +61,12 @@ export default {
|
||||
},
|
||||
handleDownload() {
|
||||
this.downloadLoading = true
|
||||
require.ensure([], () => {
|
||||
const { export_json_to_excel } = require('@/vendor/Export2Excel')
|
||||
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
|
||||
import('@/vendor/Export2Excel').then(excel => {
|
||||
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)
|
||||
export_json_to_excel(tHeader, data, this.filename)
|
||||
excel.export_json_to_excel(tHeader, data, this.filename)
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
@@ -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,19 +67,18 @@ export default {
|
||||
handleDownload() {
|
||||
if (this.multipleSelection.length) {
|
||||
this.downloadLoading = true
|
||||
require.ensure([], () => {
|
||||
const { export_json_to_excel } = require('@/vendor/Export2Excel')
|
||||
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
|
||||
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)
|
||||
export_json_to_excel(tHeader, data, this.filename)
|
||||
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'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</router-link>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<el-button>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}
|
||||
<el-button plain>{{!postForm.comment_disabled?'评论已打开':'评论已关闭'}}
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-padding" slot="dropdown">
|
||||
@@ -24,7 +24,7 @@
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<el-button>平台
|
||||
<el-button plain>平台
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu class="no-border" slot="dropdown">
|
||||
@@ -37,7 +37,7 @@
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<el-button>
|
||||
<el-button plain>
|
||||
外链
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
|
||||
@@ -13,7 +13,6 @@ export default {
|
||||
name: 'AppMain',
|
||||
computed: {
|
||||
cachedViews() {
|
||||
// console.log(this.$store.state.tagsView.cachedViews)
|
||||
return this.$store.state.tagsView.cachedViews
|
||||
}
|
||||
// key() {
|
||||
|
||||
@@ -5,23 +5,15 @@
|
||||
<breadcrumb class="breadcrumb-container"></breadcrumb>
|
||||
|
||||
<div class="right-menu">
|
||||
<error-log v-if="errorLogs.length>0" class="errLog-container right-menu-item" :logsList="errorLogs"></error-log>
|
||||
<error-log class="errLog-container right-menu-item"></error-log>
|
||||
|
||||
<el-tooltip effect="dark" content="全屏" placement="bottom">
|
||||
<el-tooltip effect="dark" :content="$t('navbar.screenfull')" placement="bottom">
|
||||
<screenfull class="screenfull right-menu-item"></screenfull>
|
||||
</el-tooltip>
|
||||
|
||||
<el-dropdown trigger="click" class='international' @command="handleSetLanguage">
|
||||
<div>
|
||||
<svg-icon class-name='right-menu-item international-icon' icon-class="language" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
|
||||
<el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<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>
|
||||
|
||||
@@ -33,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>
|
||||
@@ -54,42 +46,34 @@
|
||||
import { mapGetters } from 'vuex'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
import ThemePicker from '@/components/ThemePicker'
|
||||
import Screenfull from '@/components/Screenfull'
|
||||
import ErrorLog from '@/components/ErrorLog'
|
||||
import Screenfull from '@/components/Screenfull'
|
||||
import LangSelect from '@/components/LangSelect'
|
||||
import ThemePicker from '@/components/ThemePicker'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
Hamburger,
|
||||
ThemePicker,
|
||||
ErrorLog,
|
||||
Screenfull
|
||||
Screenfull,
|
||||
LangSelect,
|
||||
ThemePicker
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'name',
|
||||
'avatar',
|
||||
'language',
|
||||
'errorLogs'
|
||||
'avatar'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('toggleSideBar')
|
||||
},
|
||||
handleSetLanguage(lang) {
|
||||
this.$i18n.locale = lang
|
||||
this.$store.dispatch('setLanguage', lang)
|
||||
this.$message({
|
||||
message: 'switch language success',
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
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
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -129,11 +113,6 @@ export default {
|
||||
}
|
||||
.international{
|
||||
vertical-align: top;
|
||||
.international-icon{
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
vertical-align: -5px;
|
||||
}
|
||||
}
|
||||
.theme-switch {
|
||||
vertical-align: 15px;
|
||||
@@ -161,6 +140,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<template v-for="item in routes" v-if="!item.hidden&&item.children">
|
||||
|
||||
<router-link v-if="item.children.length===1 && !item.children[0].children" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
|
||||
<el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
|
||||
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
|
||||
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
|
||||
<span v-if="item.children[0].meta&&item.children[0].meta.title">{{generateTitle(item.children[0].meta.title)}}</span>
|
||||
</el-menu-item>
|
||||
@@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<template v-for="child in item.children" v-if="!child.hidden">
|
||||
<sidebar-item class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
|
||||
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
|
||||
|
||||
<router-link v-else :to="item.path+'/'+child.path" :key="child.name">
|
||||
<el-menu-item :index="item.path+'/'+child.path">
|
||||
@@ -39,6 +39,10 @@ export default {
|
||||
props: {
|
||||
routes: {
|
||||
type: Array
|
||||
},
|
||||
isNest: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<scroll-bar>
|
||||
<el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#fff" active-text-color="#409EFF">
|
||||
<el-menu mode="vertical" :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
|
||||
<sidebar-item :routes="permission_routers"></sidebar-item>
|
||||
</el-menu>
|
||||
</scroll-bar>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,35 +1,46 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-form class="card-box login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
|
||||
<h3 class="title">系统登录</h3>
|
||||
|
||||
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
|
||||
<div class="title-container">
|
||||
<h3 class="title">{{$t('login.title')}}</h3>
|
||||
<lang-select class="set-language"></lang-select>
|
||||
</div>
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="邮箱" />
|
||||
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<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="密码" />
|
||||
<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
|
||||
<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">登录</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">账号:admin 密码随便填</div>
|
||||
<div class="tips">账号:editor 密码随便填</div>
|
||||
<div class="tips">
|
||||
<span>{{$t('login.username')}} : admin</span>
|
||||
<span>{{$t('login.password')}} : {{$t('login.any')}}</span>
|
||||
</div>
|
||||
<div class="tips">
|
||||
<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">打开第三方登录</el-button>
|
||||
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">{{$t('login.thirdparty')}}</el-button>
|
||||
</el-form>
|
||||
|
||||
<el-dialog title="第三方验证" :visible.sync="showDialog">
|
||||
本地不能模拟，请结合自己业务进行模拟！！！<br/><br/><br/>
|
||||
邮箱登录成功,请选择第三方验证<br/>
|
||||
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
|
||||
{{$t('login.thirdpartyTips')}}
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<social-sign />
|
||||
</el-dialog>
|
||||
|
||||
@@ -38,22 +49,23 @@
|
||||
|
||||
<script>
|
||||
import { isvalidUsername } from '@/utils/validate'
|
||||
import socialSign from './socialsignin'
|
||||
import LangSelect from '@/components/LangSelect'
|
||||
import SocialSign from './socialsignin'
|
||||
|
||||
export default {
|
||||
components: { socialSign },
|
||||
components: { LangSelect, SocialSign },
|
||||
name: 'login',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!isvalidUsername(value)) {
|
||||
callback(new Error('请输入正确的用户名'))
|
||||
callback(new Error('Please enter the correct user name'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (value.length < 6) {
|
||||
callback(new Error('密码不能小于6位'))
|
||||
callback(new Error('The password can not be less than 6 digits'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
@@ -67,17 +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: {
|
||||
showPwd() {
|
||||
if (this.pwdType === 'password') {
|
||||
this.pwdType = ''
|
||||
if (this.passwordType === 'password') {
|
||||
this.passwordType = ''
|
||||
} else {
|
||||
this.pwdType = 'password'
|
||||
this.passwordType = 'password'
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
@@ -87,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
|
||||
})
|
||||
@@ -126,19 +137,15 @@ export default {
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
@import "src/styles/mixin.scss";
|
||||
$bg:#2d3a4b;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
$bg:#2d3a4b;
|
||||
$light_gray:#eee;
|
||||
|
||||
.login-container {
|
||||
@include relative;
|
||||
height: 100vh;
|
||||
background-color: $bg;
|
||||
input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
|
||||
-webkit-text-fill-color: #fff !important;
|
||||
}
|
||||
/* reset element-ui css */
|
||||
.login-container {
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
@@ -147,27 +154,61 @@ export default {
|
||||
padding: 12px 5px 12px 15px;
|
||||
color: $light_gray;
|
||||
height: 47px;
|
||||
}
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
}
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
&_login {
|
||||
font-size: 20px;
|
||||
&:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||
-webkit-text-fill-color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
$bg:#2d3a4b;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
|
||||
.login-container {
|
||||
@include relative;
|
||||
height: 100vh;
|
||||
background-color: $bg;
|
||||
.login-form {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 520px;
|
||||
padding: 35px 35px 15px 35px;
|
||||
margin: 120px auto;
|
||||
}
|
||||
.tips {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
span {
|
||||
&:first-of-type {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.svg-container {
|
||||
padding: 6px 5px 6px 15px;
|
||||
color: $dark_gray;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
&_login {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.title-container {
|
||||
position: relative;
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
@@ -176,33 +217,26 @@ export default {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
.login-form {
|
||||
.set-language {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
padding: 35px 35px 15px 35px;
|
||||
margin: 120px auto;
|
||||
}
|
||||
.el-form-item {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
color: #454545;
|
||||
}
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select:none;
|
||||
}
|
||||
.thirdparty-button{
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
bottom: 28px;
|
||||
top: 5px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: $dark_gray;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.thirdparty-button {
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
bottom: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div style="margin-bottom:15px;">你的权限： {{roles}}</div>
|
||||
切换权限：
|
||||
<el-radio-group v-model="role">
|
||||
<div style="margin-bottom:15px;">{{$t('permission.roles')}}： {{roles}}</div>
|
||||
{{$t('permission.switchRoles')}}：
|
||||
<el-radio-group v-model="switchRoles">
|
||||
<el-radio-button label="editor"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
@@ -15,7 +15,7 @@ export default{
|
||||
name: 'permission',
|
||||
data() {
|
||||
return {
|
||||
role: ''
|
||||
switchRoles: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -24,8 +24,8 @@ export default{
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
role(val) {
|
||||
this.$store.dispatch('ChangeRole', val).then(() => {
|
||||
switchRoles(val) {
|
||||
this.$store.dispatch('ChangeRoles', val).then(() => {
|
||||
this.$router.push({ path: '/permission/index?' + +new Date() })
|
||||
})
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -59,13 +60,12 @@ export default {
|
||||
},
|
||||
handleDownload() {
|
||||
this.downloadLoading = true
|
||||
require.ensure([], () => {
|
||||
const { export_txt_to_zip } = require('@/vendor/Export2Zip')
|
||||
const tHeader = ['序号', '文章标题', '作者', '阅读数', '发布时间']
|
||||
import('@/vendor/Export2Zip').then(zip => {
|
||||
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)
|
||||
export_txt_to_zip(tHeader, data, this.filename, this.filename)
|
||||
zip.export_txt_to_zip(tHeader, data, this.filename, this.filename)
|
||||
this.downloadLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user