Showing preview only (286K chars total). Download the full file or copy to clipboard to get everything.
Repository: iview/iview-admin
Branch: master
Commit: dd86e386a854
Files: 182
Total size: 246.7 KB
Directory structure:
gitextract_kkvwwkjv/
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── .travis.yml
├── LICENSE
├── README.md
├── cypress.json
├── package.json
├── public/
│ └── index.html
├── src/
│ ├── App.vue
│ ├── api/
│ │ ├── data.js
│ │ ├── routers.js
│ │ └── user.js
│ ├── assets/
│ │ └── icons/
│ │ └── iconfont.css
│ ├── components/
│ │ ├── charts/
│ │ │ ├── bar.vue
│ │ │ ├── index.js
│ │ │ ├── pie.vue
│ │ │ └── theme.json
│ │ ├── common/
│ │ │ ├── common.less
│ │ │ └── util.js
│ │ ├── common-icon/
│ │ │ ├── common-icon.vue
│ │ │ └── index.js
│ │ ├── count-to/
│ │ │ ├── count-to.vue
│ │ │ ├── index.js
│ │ │ └── index.less
│ │ ├── cropper/
│ │ │ ├── index.js
│ │ │ ├── index.less
│ │ │ └── index.vue
│ │ ├── drag-drawer/
│ │ │ ├── drag-drawer-trigger.vue
│ │ │ ├── drag-drawer.vue
│ │ │ ├── index.js
│ │ │ ├── index.less
│ │ │ └── mixin.js
│ │ ├── drag-list/
│ │ │ ├── drag-list.vue
│ │ │ └── index.js
│ │ ├── editor/
│ │ │ ├── editor.vue
│ │ │ └── index.js
│ │ ├── icons/
│ │ │ ├── icons.vue
│ │ │ └── index.js
│ │ ├── info-card/
│ │ │ ├── index.js
│ │ │ └── infor-card.vue
│ │ ├── login-form/
│ │ │ ├── index.js
│ │ │ └── login-form.vue
│ │ ├── main/
│ │ │ ├── components/
│ │ │ │ ├── a-back-top/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── index.vue
│ │ │ │ ├── error-store/
│ │ │ │ │ ├── error-store.vue
│ │ │ │ │ └── index.js
│ │ │ │ ├── fullscreen/
│ │ │ │ │ ├── fullscreen.vue
│ │ │ │ │ └── index.js
│ │ │ │ ├── header-bar/
│ │ │ │ │ ├── custom-bread-crumb/
│ │ │ │ │ │ ├── custom-bread-crumb.less
│ │ │ │ │ │ ├── custom-bread-crumb.vue
│ │ │ │ │ │ └── index.js
│ │ │ │ │ ├── header-bar.less
│ │ │ │ │ ├── header-bar.vue
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── sider-trigger/
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── sider-trigger.less
│ │ │ │ │ └── sider-trigger.vue
│ │ │ │ ├── language/
│ │ │ │ │ ├── index.js
│ │ │ │ │ └── language.vue
│ │ │ │ ├── side-menu/
│ │ │ │ │ ├── collapsed-menu.vue
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── item-mixin.js
│ │ │ │ │ ├── mixin.js
│ │ │ │ │ ├── side-menu-item.vue
│ │ │ │ │ ├── side-menu.less
│ │ │ │ │ └── side-menu.vue
│ │ │ │ ├── tags-nav/
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── tags-nav.less
│ │ │ │ │ └── tags-nav.vue
│ │ │ │ └── user/
│ │ │ │ ├── index.js
│ │ │ │ ├── user.less
│ │ │ │ └── user.vue
│ │ │ ├── index.js
│ │ │ ├── main.less
│ │ │ └── main.vue
│ │ ├── markdown/
│ │ │ ├── index.js
│ │ │ └── markdown.vue
│ │ ├── parent-view/
│ │ │ ├── index.js
│ │ │ └── parent-view.vue
│ │ ├── paste-editor/
│ │ │ ├── index.js
│ │ │ ├── paste-editor.less
│ │ │ ├── paste-editor.vue
│ │ │ └── plugins/
│ │ │ └── placeholder.js
│ │ ├── split-pane/
│ │ │ ├── index.js
│ │ │ ├── index.less
│ │ │ ├── split.vue
│ │ │ └── trigger.vue
│ │ ├── tables/
│ │ │ ├── edit.vue
│ │ │ ├── handle-btns.js
│ │ │ ├── index.js
│ │ │ ├── index.less
│ │ │ └── tables.vue
│ │ └── tree-select/
│ │ ├── index.js
│ │ ├── tree-select-tree.vue
│ │ └── tree-select.vue
│ ├── config/
│ │ └── index.js
│ ├── directive/
│ │ ├── directives.js
│ │ ├── index.js
│ │ └── module/
│ │ ├── clipboard.js
│ │ └── draggable.js
│ ├── index.less
│ ├── libs/
│ │ ├── api.request.js
│ │ ├── axios.js
│ │ ├── excel.js
│ │ ├── render-dom.js
│ │ ├── tools.js
│ │ └── util.js
│ ├── locale/
│ │ ├── index.js
│ │ └── lang/
│ │ ├── en-US.js
│ │ ├── zh-CN.js
│ │ └── zh-TW.js
│ ├── main.js
│ ├── mock/
│ │ ├── data/
│ │ │ ├── org-data.js
│ │ │ └── tree-select.js
│ │ ├── data.js
│ │ ├── index.js
│ │ ├── login.js
│ │ └── user.js
│ ├── plugin/
│ │ ├── error-store/
│ │ │ └── index.js
│ │ └── index.js
│ ├── router/
│ │ ├── before-close.js
│ │ ├── index.js
│ │ └── routers.js
│ ├── store/
│ │ ├── index.js
│ │ └── module/
│ │ ├── app.js
│ │ └── user.js
│ └── view/
│ ├── argu-page/
│ │ ├── params.vue
│ │ └── query.vue
│ ├── components/
│ │ ├── count-to/
│ │ │ └── count-to.vue
│ │ ├── cropper/
│ │ │ └── cropper.vue
│ │ ├── drag-drawer/
│ │ │ └── index.vue
│ │ ├── drag-list/
│ │ │ └── drag-list.vue
│ │ ├── editor/
│ │ │ └── editor.vue
│ │ ├── icons/
│ │ │ └── icons.vue
│ │ ├── markdown/
│ │ │ └── markdown.vue
│ │ ├── org-tree/
│ │ │ ├── components/
│ │ │ │ ├── org-view.vue
│ │ │ │ └── zoom-controller.vue
│ │ │ ├── index.less
│ │ │ └── index.vue
│ │ ├── split-pane/
│ │ │ └── split-pane.vue
│ │ ├── tables/
│ │ │ └── tables.vue
│ │ ├── tree-select/
│ │ │ └── index.vue
│ │ └── tree-table/
│ │ └── index.vue
│ ├── directive/
│ │ └── directive.vue
│ ├── error-page/
│ │ ├── 401.vue
│ │ ├── 404.vue
│ │ ├── 500.vue
│ │ ├── back-btn-group.vue
│ │ ├── error-content.vue
│ │ └── error.less
│ ├── error-store/
│ │ └── error-store.vue
│ ├── excel/
│ │ ├── common.less
│ │ ├── export-excel.vue
│ │ └── upload-excel.vue
│ ├── i18n/
│ │ └── i18n-page.vue
│ ├── join-page.vue
│ ├── login/
│ │ ├── login.less
│ │ └── login.vue
│ ├── multilevel/
│ │ ├── level-2-1.vue
│ │ ├── level-2-2/
│ │ │ ├── level-2-2-1.vue
│ │ │ └── level-2-2-2.vue
│ │ └── level-2-3.vue
│ ├── single-page/
│ │ ├── error-logger.vue
│ │ ├── home/
│ │ │ ├── example.vue
│ │ │ ├── home.vue
│ │ │ └── index.js
│ │ └── message/
│ │ └── index.vue
│ ├── tools-methods/
│ │ └── tools-methods.vue
│ └── update/
│ ├── update-paste.vue
│ └── update-table.vue
├── tests/
│ ├── e2e/
│ │ ├── .eslintrc
│ │ ├── plugins/
│ │ │ └── index.js
│ │ ├── specs/
│ │ │ └── test.js
│ │ └── support/
│ │ ├── commands.js
│ │ └── index.js
│ └── unit/
│ ├── .eslintrc.js
│ └── HelloWorld.spec.js
└── vue.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
"@vue/app"
]
}
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
================================================
FILE: .eslintignore
================================================
================================================
FILE: .eslintrc.js
================================================
module.exports = {
root: true,
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/no-parsing-error': [2, {
'x-invalid-end-tag': false
}],
'no-undef': 'off',
'camelcase': 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
/dist
package-lock.json
/tests/e2e/videos/
/tests/e2e/screenshots/
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
build/env.js
================================================
FILE: .postcssrc.js
================================================
module.exports = {
plugins: {
autoprefixer: {}
}
}
================================================
FILE: .travis.yml
================================================
language: node_js
node_js: stable
script: npm run lint
notifications:
email: false
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2017 TalkingData
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center">
<a href="https://www.iviewui.com">
<img width="200" src="https://file.iviewui.com/logo-new.svg">
</a>
</p>
<h1>
iView Admin
<h3>Vue.js 2.0 admin management system template based on iView.</h3>
</h1>
[](https://github.com/iview/iview-admin/releases)
[](https://travis-ci.org/iview/iview-admin)
[](https://github.com/vuejs/vue)
[](https://github.com/iview/iview)
[]()
## Introduction
iView Admin is a front-end management background integration solution. It based on [Vue.js](https://github.com/vuejs/vue) and use the UI Toolkit [iView](https://github.com/iview/iview).
- [Document](https://lison16.github.io/iview-admin-doc/)
- [Preview](https://admin.iviewui.com/)
- [Base template recommends using](https://github.com/iview/iview-admin/tree/template)
## Features
- Login / Logout
- Permission Authentication
- A list of filters
- Permission to switch
- i18n
- Components
- Rich Text Editor
- Markdown Editor
- City Cascader
- Photos preview and edit
- Draggable list
- File upload
- Digital gradient
- split-pane
- Form
- The article published
- Workflow
- Table
- Drag-and-drop sort
- Searchable form
- Table export data
- Export to Csv file
- Export to Xls file
- Table to picture
- Error Page
- 403
- 404
- 500
- Router
- Dynamic routing
- With reference page
- Theme
- Shrink the sidebar
- Tag navigation
- Breadcrumb navigation
- Full screen / exit full screen
- Lock screen
- The message center
- Personal center
## Getting started
```bush
# clone the project
git clone https://github.com/iview/iview-admin.git
// install dependencies
npm install
// develop
npm run dev
```
## Build
```bush
npm run build
```
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2016-present, TalkingData
================================================
FILE: cypress.json
================================================
{
"pluginsFile": "tests/e2e/plugins/index.js"
}
================================================
FILE: package.json
================================================
{
"name": "iview-admin",
"version": "2.0.0",
"author": "Lison<lison16new@163.com>",
"private": false,
"scripts": {
"dev": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e"
},
"dependencies": {
"axios": "^0.18.0",
"clipboard": "^2.0.0",
"codemirror": "^5.38.0",
"countup": "^1.8.2",
"cropperjs": "^1.2.2",
"dayjs": "^1.7.7",
"echarts": "^4.0.4",
"html2canvas": "^1.0.0-alpha.12",
"iview": "^3.2.2",
"iview-area": "^1.5.17",
"js-cookie": "^2.2.0",
"simplemde": "^1.11.2",
"sortablejs": "^1.7.0",
"tree-table-vue": "^1.1.0",
"v-org-tree": "^1.0.6",
"vue": "^2.5.10",
"vue-i18n": "^7.8.0",
"vue-router": "^3.0.1",
"vuedraggable": "^2.16.0",
"vuex": "^3.0.1",
"wangeditor": "^3.1.1",
"xlsx": "^0.13.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.1",
"@vue/cli-plugin-eslint": "^3.0.1",
"@vue/cli-plugin-unit-mocha": "^3.0.1",
"@vue/cli-service": "^3.0.1",
"@vue/eslint-config-standard": "^3.0.0-beta.10",
"@vue/test-utils": "^1.0.0-beta.10",
"chai": "^4.1.2",
"eslint-plugin-cypress": "^2.0.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"lint-staged": "^6.0.0",
"mockjs": "^1.0.1-beta3",
"vue-template-compiler": "^2.5.13"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
]
}
}
================================================
FILE: public/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title></title>
</head>
<body>
<noscript>
<strong>We're sorry but iview-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
================================================
FILE: src/App.vue
================================================
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
.size{
width: 100%;
height: 100%;
}
html,body{
.size;
overflow: hidden;
margin: 0;
padding: 0;
}
#app {
.size;
}
</style>
================================================
FILE: src/api/data.js
================================================
import axios from '@/libs/api.request'
export const getTableData = () => {
return axios.request({
url: 'get_table_data',
method: 'get'
})
}
export const getDragList = () => {
return axios.request({
url: 'get_drag_list',
method: 'get'
})
}
export const errorReq = () => {
return axios.request({
url: 'error_url',
method: 'post'
})
}
export const saveErrorLogger = info => {
return axios.request({
url: 'save_error_logger',
data: info,
method: 'post'
})
}
export const uploadImg = formData => {
return axios.request({
url: 'image/upload',
data: formData
})
}
export const getOrgData = () => {
return axios.request({
url: 'get_org_data',
method: 'get'
})
}
export const getTreeSelectData = () => {
return axios.request({
url: 'get_tree_select_data',
method: 'get'
})
}
================================================
FILE: src/api/routers.js
================================================
import axios from '@/libs/api.request'
export const getRouterReq = (access) => {
return axios.request({
url: 'get_router',
params: {
access
},
method: 'get'
})
}
================================================
FILE: src/api/user.js
================================================
import axios from '@/libs/api.request'
export const login = ({ userName, password }) => {
const data = {
userName,
password
}
return axios.request({
url: 'login',
data,
method: 'post'
})
}
export const getUserInfo = (token) => {
return axios.request({
url: 'get_info',
params: {
token
},
method: 'get'
})
}
export const logout = (token) => {
return axios.request({
url: 'logout',
method: 'post'
})
}
export const getUnreadCount = () => {
return axios.request({
url: 'message/count',
method: 'get'
})
}
export const getMessage = () => {
return axios.request({
url: 'message/init',
method: 'get'
})
}
export const getContentByMsgId = msg_id => {
return axios.request({
url: 'message/content',
method: 'get',
params: {
msg_id
}
})
}
export const hasRead = msg_id => {
return axios.request({
url: 'message/has_read',
method: 'post',
data: {
msg_id
}
})
}
export const removeReaded = msg_id => {
return axios.request({
url: 'message/remove_readed',
method: 'post',
data: {
msg_id
}
})
}
export const restoreTrash = msg_id => {
return axios.request({
url: 'message/restore',
method: 'post',
data: {
msg_id
}
})
}
================================================
FILE: src/assets/icons/iconfont.css
================================================
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1541579316141'); /* IE9*/
src: url('iconfont.eot?t=1541579316141#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAiEAAsAAAAADmgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8eUnXY21hcAAAAYAAAACjAAACLi+YJuBnbHlmAAACJAAABAgAAAcg4dRWHmhlYWQAAAYsAAAAMQAAADYTL8piaGhlYQAABmAAAAAgAAAAJAfdA4xobXR4AAAGgAAAABQAAAAsLAD//2xvY2EAAAaUAAAAGAAAABgImgpGbWF4cAAABqwAAAAfAAAAIAEcAG5uYW1lAAAGzAAAAUUAAAJtPlT+fXBvc3QAAAgUAAAAbgAAAI54roygeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeMTx/ytzwv4EhhrmBoRkozAiSAwDuUwzMeJzlkUEKwkAMRd/YabXFhQvxFF6qPYPrUujGY7jyIr1JoZNjtMnEhag3MOEN5MMk8D9QAoVyVSKEJwGrh6oh6wVN1iM3nc+cVImJVKdOehlklElmWdYVstp+ql8VdIv15a1NLW0zFXsO7Kjz3erH/3+rY37vr6kxnx1LKNWOJZlaxxJNnWOpSu+ot8jgqMvI6KjfyOSo88jsaAbI4tBsig89rQB4nLVUTWwbRRSeNzO767i2g7N/FP9s7MRrE5ON4/V6rSZyU0PiINSSNImES4IUoapWz6hEiqiMBDQqEojkAkiFStyKRC+9VSoFCeUEyqESVUAqEkcu3OAQb3hrJxAXwSGI3X0/szPz5vvm2x0i7O/vf8IJe5VkSJnUyUtklRBQJE1VIjRtUafkmk6pSu2ipleh4+xikkKxSksWTUeo8m8NoagpYtoslTmxrLl37z64e33esuJjU8P5Wd262LxoPVnPZ06Pxfe+C0YjkhSJygPhQCA8ABPOykwuN7NyuRvgUnAgLEnhATkaCQQiUe/7XKUyV6nQz+t2o7l66+rs7NVbq82GXTdrdjxjRGU5amTids2bUDMFtzCsqsMYMqr3IDY6OT05GjsI8Exv/6CSkOWEQigh+y3clxY5QVTcEZFIGtHLxDUJs6WsHR1y9SFKdr1HggCp3V1ICYL36OOpVmvKN9bC1u6R3vZ0qwWtVovgJfqOfUvfIYxIWL+fyETHNVJqSkIT1JTjW8ZWh3yDJDz0ctvsyt51etvrg9/QHhqGlzMM+vbmizPnDWPLMNbW19e7tffvsBzL99aWEfBRY46t+tbe3PypXv/IMDYN43WsQBe9HL2NC33RuxABrPsG+xH3o4bVRE2KgCRqulbWNf8W/UYVHM129aKra24VshZkq+CWD/Oy6Xt8cGYEthgHVlVliCfynAlqjo6oysTKlYUAD4docMI5/1ZioN+GwZNBcTwWUmTdBUqhTwX29QebXzF4An4JJMzwfMl+WQ01+IlQZVR4yhie53ycA16pOI/ODiYNGK4MChdCgXNnX5gIJXPCSYnf2OF850aQ+zJIyOs+u8+mMO8jQdwtg1TIWVRjKAnFcslMi8KfGUPoSUCergUyUk77dMyS69Ms6tijKZKYwUGKbpfdzu+iYeZYAHMFiOVi+MD7h9mb99qC0L7X8c+XatMfTj97KZ5IxJt/pd43tYYQKEjAnXMOB6kQEBrwg+LPjindAPOHNdC3q3ait0I3/ZIunZEARLNYNEUA6czSP3N/7j9wz6ZESdX0VNl1zGNS/szbQaQSIGk4DtVPcZf8AgXpf9A2OyTit5s2syZmand46bhEe2WtodLHkvaoqtTXuXN2/c42WADP9HGfbUcUW7JgqHss4xHtlMys679FqUomdP9VJBQBdnlPABBubpuNwqnmQj6/0HwNQzKxDUJFgKiXurBG6dqFjmeBzsvtRPJgGIZThYa5fdOvsReOticPh6JHHXxsv7ItJpOniYPYsmZ/x0QD/o5P105DeQwF6MH33ogoLi+KQp7zpY3HQV5bFMURzheXeds7gpP+jKNXljjHuYvXHke7cdCxLLZf6YX7B63UcCV4nGNgZGBgAOKAN2ZR8fw2Xxm4WRhA4AbHYRMY/f///1oWBuYGIJeDgQkkCgAvWgs2AAAAeJxjYGRgYG7438AQw8Lw/z8DAwsDA1AEBXADAHXiBHJ4nGNhYGBgYfj/nwVM48cATwECKwAAAAAAjAC6AOgBFAGAAf4CbgLqAzgDkHicY2BkYGDgZkhiYGcAASYg5gJCBob/YD4DABOmAYsAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicbYhdDoIwEAb3a6k/YIIX8VArWewmdJFWJOnpJTG+OQ+TzJCjLy39p4ODR4OAA4444YwWHS7U3IVzn6Voldtb8ksHnvohrlqjjmw1rmzXsvdT7fEbblnCmOfNfJIYStJJfGIL27yb6AOCGR89AAA=') format('woff'),
url('iconfont.ttf?t=1541579316141') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1541579316141#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-bear:before { content: "\e600"; }
.icon-resize-vertical:before { content: "\e7c3"; }
.icon-chuizhifanzhuan:before { content: "\e661"; }
.icon-shuipingfanzhuan:before { content: "\e662"; }
.icon-qq:before { content: "\e609"; }
.icon-frown:before { content: "\e77e"; }
.icon-meh:before { content: "\e780"; }
.icon-smile:before { content: "\e783"; }
.icon-man:before { content: "\e7e2"; }
.icon-woman:before { content: "\e7e5"; }
================================================
FILE: src/components/charts/bar.vue
================================================
<template>
<div ref="dom" class="charts chart-bar"></div>
</template>
<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
name: 'ChartBar',
props: {
value: Object,
text: String,
subtext: String
},
data () {
return {
dom: null
}
},
methods: {
resize () {
this.dom.resize()
}
},
mounted () {
this.$nextTick(() => {
let xAxisData = Object.keys(this.value)
let seriesData = Object.values(this.value)
let option = {
title: {
text: this.text,
subtext: this.subtext,
x: 'center'
},
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
series: [{
data: seriesData,
type: 'bar'
}]
}
this.dom = echarts.init(this.$refs.dom, 'tdTheme')
this.dom.setOption(option)
on(window, 'resize', this.resize)
})
},
beforeDestroy () {
off(window, 'resize', this.resize)
}
}
</script>
================================================
FILE: src/components/charts/index.js
================================================
import ChartPie from './pie.vue'
import ChartBar from './bar.vue'
export { ChartPie, ChartBar }
================================================
FILE: src/components/charts/pie.vue
================================================
<template>
<div ref="dom" class="charts chart-pie"></div>
</template>
<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
name: 'ChartPie',
props: {
value: Array,
text: String,
subtext: String
},
data () {
return {
dom: null
}
},
methods: {
resize () {
this.dom.resize()
}
},
mounted () {
this.$nextTick(() => {
let legend = this.value.map(_ => _.name)
let option = {
title: {
text: this.text,
subtext: this.subtext,
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: legend
},
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: this.value,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
this.dom = echarts.init(this.$refs.dom, 'tdTheme')
this.dom.setOption(option)
on(window, 'resize', this.resize)
})
},
beforeDestroy () {
off(window, 'resize', this.resize)
}
}
</script>
================================================
FILE: src/components/charts/theme.json
================================================
{
"color": [
"#2d8cf0",
"#19be6b",
"#ff9900",
"#E46CBB",
"#9A66E4",
"#ed3f14"
],
"backgroundColor": "rgba(0,0,0,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#516b91"
},
"subtextStyle": {
"color": "#93b7e3"
}
},
"line": {
"itemStyle": {
"normal": {
"borderWidth": "2"
}
},
"lineStyle": {
"normal": {
"width": "2"
}
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
},
"radar": {
"itemStyle": {
"normal": {
"borderWidth": "2"
}
},
"lineStyle": {
"normal": {
"width": "2"
}
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
},
"bar": {
"itemStyle": {
"normal": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
},
"emphasis": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
}
}
},
"pie": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"scatter": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"boxplot": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"parallel": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"sankey": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"funnel": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"gauge": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"candlestick": {
"itemStyle": {
"normal": {
"color": "#edafda",
"color0": "transparent",
"borderColor": "#d680bc",
"borderColor0": "#8fd3e8",
"borderWidth": "2"
}
}
},
"graph": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"lineStyle": {
"normal": {
"width": 1,
"color": "#aaa"
}
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true,
"color": [
"#2d8cf0",
"#19be6b",
"#f5ae4a",
"#9189d5",
"#56cae2",
"#cbb0e3"
],
"label": {
"normal": {
"textStyle": {
"color": "#eee"
}
}
}
},
"map": {
"itemStyle": {
"normal": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(165,231,240,1)",
"borderColor": "#516b91",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#000"
}
},
"emphasis": {
"textStyle": {
"color": "rgb(81,107,145)"
}
}
}
},
"geo": {
"itemStyle": {
"normal": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(165,231,240,1)",
"borderColor": "#516b91",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#000"
}
},
"emphasis": {
"textStyle": {
"color": "rgb(81,107,145)"
}
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"toolbox": {
"iconStyle": {
"normal": {
"borderColor": "#999"
},
"emphasis": {
"borderColor": "#666"
}
}
},
"legend": {
"textStyle": {
"color": "#999999"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#ccc",
"width": 1
},
"crossStyle": {
"color": "#ccc",
"width": 1
}
}
},
"timeline": {
"lineStyle": {
"color": "#8fd3e8",
"width": 1
},
"itemStyle": {
"normal": {
"color": "#8fd3e8",
"borderWidth": 1
},
"emphasis": {
"color": "#8fd3e8"
}
},
"controlStyle": {
"normal": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
},
"emphasis": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
}
},
"checkpointStyle": {
"color": "#8fd3e8",
"borderColor": "rgba(138,124,168,0.37)"
},
"label": {
"normal": {
"textStyle": {
"color": "#8fd3e8"
}
},
"emphasis": {
"textStyle": {
"color": "#8fd3e8"
}
}
}
},
"visualMap": {
"color": [
"#516b91",
"#59c4e6",
"#a5e7f0"
]
},
"dataZoom": {
"backgroundColor": "rgba(0,0,0,0)",
"dataBackgroundColor": "rgba(255,255,255,0.3)",
"fillerColor": "rgba(167,183,204,0.4)",
"handleColor": "#a7b7cc",
"handleSize": "100%",
"textStyle": {
"color": "#333"
}
},
"markPoint": {
"label": {
"normal": {
"textStyle": {
"color": "#eee"
}
},
"emphasis": {
"textStyle": {
"color": "#eee"
}
}
}
}
}
================================================
FILE: src/components/common/common.less
================================================
.no-select{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
================================================
FILE: src/components/common/util.js
================================================
export const showTitle = (item, vm) => {
return vm.$config.useI18n ? vm.$t(item.name) : ((item.meta && item.meta.title) || item.name)
}
================================================
FILE: src/components/common-icon/common-icon.vue
================================================
<template>
<component :is="iconType" :type="iconName" :color="iconColor" :size="iconSize"/>
</template>
<script>
import Icons from '_c/icons'
export default {
name: 'CommonIcon',
components: { Icons },
props: {
type: {
type: String,
required: true
},
color: String,
size: Number
},
computed: {
iconType () {
return this.type.indexOf('_') === 0 ? 'Icons' : 'Icon'
},
iconName () {
return this.iconType === 'Icons' ? this.getCustomIconName(this.type) : this.type
},
iconSize () {
return this.size || (this.iconType === 'Icons' ? 12 : undefined)
},
iconColor () {
return this.color || ''
}
},
methods: {
getCustomIconName (iconName) {
return iconName.slice(1)
}
}
}
</script>
<style>
</style>
================================================
FILE: src/components/common-icon/index.js
================================================
import CommonIcon from './common-icon.vue'
export default CommonIcon
================================================
FILE: src/components/count-to/count-to.vue
================================================
<template>
<div class="count-to-wrapper">
<slot name="left"/>
<p class="content-outer"><span :class="['count-to-count-text', countClass]" :id="counterId">{{ init }}</span><i :class="['count-to-unit-text', unitClass]">{{ unitText }}</i></p>
<slot name="right"/>
</div>
</template>
<script>
import CountUp from 'countup'
import './index.less'
export default {
name: 'CountTo',
props: {
init: {
type: Number,
default: 0
},
/**
* @description 起始值，即动画开始前显示的数值
*/
startVal: {
type: Number,
default: 0
},
/**
* @description 结束值，即动画结束后显示的数值
*/
end: {
type: Number,
required: true
},
/**
* @description 保留几位小数
*/
decimals: {
type: Number,
default: 0
},
/**
* @description 分隔整数和小数的符号，默认是小数点
*/
decimal: {
type: String,
default: '.'
},
/**
* @description 动画持续的时间，单位是秒
*/
duration: {
type: Number,
default: 2
},
/**
* @description 动画延迟开始的时间，单位是秒
*/
delay: {
type: Number,
default: 0
},
/**
* @description 是否禁用easing动画效果
*/
uneasing: {
type: Boolean,
default: false
},
/**
* @description 是否使用分组，分组后每三位会用一个符号分隔
*/
usegroup: {
type: Boolean,
default: false
},
/**
* @description 用于分组(usegroup)的符号
*/
separator: {
type: String,
default: ','
},
/**
* @description 是否简化显示，设为true后会使用unit单位来做相关省略
*/
simplify: {
type: Boolean,
default: false
},
/**
* @description 自定义单位，如[3, 'K+'], [6, 'M+']即大于3位数小于6位数的用k+来做省略
* 1000即显示为1K+
*/
unit: {
type: Array,
default () {
return [[3, 'K+'], [6, 'M+'], [9, 'B+']]
}
},
countClass: {
type: String,
default: ''
},
unitClass: {
type: String,
default: ''
}
},
data () {
return {
counter: null,
unitText: ''
}
},
computed: {
counterId () {
return `count_to_${this._uid}`
}
},
methods: {
getHandleVal (val, len) {
return {
endVal: parseInt(val / Math.pow(10, this.unit[len - 1][0])),
unitText: this.unit[len - 1][1]
}
},
transformValue (val) {
let len = this.unit.length
let res = {
endVal: 0,
unitText: ''
}
if (val < Math.pow(10, this.unit[0][0])) res.endVal = val
else {
for (let i = 1; i < len; i++) {
if (val >= Math.pow(10, this.unit[i - 1][0]) && val < Math.pow(10, this.unit[i][0])) res = this.getHandleVal(val, i)
}
}
if (val > Math.pow(10, this.unit[len - 1][0])) res = this.getHandleVal(val, len)
return res
},
getValue (val) {
let res = 0
if (this.simplify) {
let { endVal, unitText } = this.transformValue(val)
this.unitText = unitText
res = endVal
} else {
res = val
}
return res
}
},
mounted () {
this.$nextTick(() => {
let endVal = this.getValue(this.end)
this.counter = new CountUp(this.counterId, this.startVal, endVal, this.decimals, this.duration, {
useEasing: !this.uneasing,
useGrouping: this.useGroup,
separator: this.separator,
decimal: this.decimal
})
setTimeout(() => {
if (!this.counter.error) this.counter.start()
}, this.delay)
})
},
watch: {
end (newVal) {
let endVal = this.getValue(newVal)
this.counter.update(endVal)
}
}
}
</script>
================================================
FILE: src/components/count-to/index.js
================================================
import countTo from './count-to.vue'
export default countTo
================================================
FILE: src/components/count-to/index.less
================================================
@prefix: ~"count-to";
.@{prefix}-wrapper{
.content-outer{
display: inline-block;
.@{prefix}-unit-text{
font-style: normal;
}
}
}
================================================
FILE: src/components/cropper/index.js
================================================
import Cropper from './index.vue'
export default Cropper
================================================
FILE: src/components/cropper/index.less
================================================
.bg{
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")
}
.cropper-wrapper{
width: 600px;
height: 340px;
.img-box{
height: 340px;
width: 430px;
border: 1px solid #ebebeb;
display: inline-block;
.bg;
img{
max-width: 100%;
display: block;
}
}
.right-con{
display: inline-block;
width: 170px;
vertical-align: top;
box-sizing: border-box;
padding: 0 10px;
.preview-box{
height: 150px !important;
width: 100% !important;
overflow: hidden;
border: 1px solid #ebebeb;
.bg;
}
.button-box{
padding: 10px 0 0;
}
}
}
================================================
FILE: src/components/cropper/index.vue
================================================
<template>
<div class="cropper-wrapper">
<div class="img-box">
<img class="cropper-image" :id="imgId" alt="">
</div>
<div class="right-con">
<div v-if="preview" class="preview-box" :id="previewId"></div>
<div class="button-box">
<slot>
<Upload action="image/upload" :before-upload="beforeUpload">
<Button style="width: 150px;" type="primary">上传图片</Button>
</Upload>
</slot>
<div v-show="insideSrc">
<Button type="primary" @click="rotate">
<Icon type="md-refresh" :size="18"/>
</Button>
<Button type="primary" @click="shrink">
<Icon type="md-remove" :size="18"/>
</Button>
<Button type="primary" @click="magnify">
<Icon type="md-add" :size="18"/>
</Button>
<Button type="primary" @click="scale('X')">
<Icon custom="iconfont icon-shuipingfanzhuan" :size="18"/>
</Button>
<Button type="primary" @click="scale('Y')">
<Icon custom="iconfont icon-chuizhifanzhuan" :size="18"/>
</Button>
<Button type="primary" @click="move(0, -moveStep)">
<Icon type="md-arrow-round-up" :size="18"/>
</Button>
<Button type="primary" @click="move(-moveStep, 0)">
<Icon type="md-arrow-round-back" :size="18"/>
</Button>
<Button type="primary" @click="move(0, moveStep)">
<Icon type="md-arrow-round-down" :size="18"/>
</Button>
<Button type="primary" @click="move(moveStep, 0)">
<Icon type="md-arrow-round-forward" :size="18"/>
</Button>
<Button style="width: 150px;margin-top: 10px;" type="primary" @click="crop">{{ cropButtonText }}</Button>
</div>
</div>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs'
import './index.less'
import 'cropperjs/dist/cropper.min.css'
export default {
name: 'Cropper',
props: {
src: {
type: String,
default: ''
},
preview: {
type: Boolean,
default: true
},
moveStep: {
type: Number,
default: 4
},
cropButtonText: {
type: String,
default: '裁剪'
}
},
data () {
return {
cropper: null,
insideSrc: ''
}
},
computed: {
imgId () {
return `cropper${this._uid}`
},
previewId () {
return `cropper_preview${this._uid}`
}
},
watch: {
src (src) {
this.replace(src)
},
insideSrc (src) {
this.replace(src)
}
},
methods: {
beforeUpload (file) {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = (event) => {
this.insideSrc = event.srcElement.result
}
return false
},
replace (src) {
this.cropper.replace(src)
this.insideSrc = src
},
rotate () {
this.cropper.rotate(90)
},
shrink () {
this.cropper.zoom(-0.1)
},
magnify () {
this.cropper.zoom(0.1)
},
scale (d) {
this.cropper[`scale${d}`](-this.cropper.getData()[`scale${d}`])
},
move (...argu) {
this.cropper.move(...argu)
},
crop () {
this.cropper.getCroppedCanvas().toBlob(blob => {
this.$emit('on-crop', blob)
})
}
},
mounted () {
this.$nextTick(() => {
let dom = document.getElementById(this.imgId)
this.cropper = new Cropper(dom, {
preview: `#${this.previewId}`,
checkCrossOrigin: true
})
})
}
}
</script>
================================================
FILE: src/components/drag-drawer/drag-drawer-trigger.vue
================================================
<template>
<div :class="`${prefix}-move-trigger`">
<div :class="`${prefix}-move-trigger-point`">
<i></i><i></i><i></i><i></i><i></i>
</div>
</div>
</template>
<script>
import Mixin from './mixin'
export default {
name: 'DragDrawerTrigger',
mixins: [Mixin]
}
</script>
<style>
</style>
================================================
FILE: src/components/drag-drawer/drag-drawer.vue
================================================
<template>
<Drawer ref="drawerWrapper"
:value="value"
@input="handleInput"
:width="width"
:class-name="outerClasses"
v-bind="$attrs"
v-on="$listeners">
<!-- 所有插槽内容显示在这里 ↓ -->
<template v-for="(slots, slotsName) in $slots">
<template v-if="slotsName !== 'default'">
<render-dom v-for="(render, index) in slots"
:key="`b_drawer_${slotsName}_${index}`"
:render="() => render"
:slot="slotsName">
</render-dom>
</template>
<template v-else>
<div :class="`${prefix}-body-wrapper`"
:key="`b_drawer_${slotsName}`">
<render-dom v-for="(render, index) in slots"
:key="`b_drawer_${slotsName}_${index}`"
:render="() => render"
:slot="slotsName">
</render-dom>
</div>
</template>
</template>
<!-- 所有插槽内容显示在这里 ↑ -->
<div v-if="draggable"
:style="triggerStyle"
:class="`${prefix}-trigger-wrapper`"
@mousedown="handleTriggerMousedown">
<slot name="trigger">
<drag-drawer-trigger></drag-drawer-trigger>
</slot>
</div>
<div v-if="$slots.footer"
:class="`${prefix}-footer`">
<slot name="footer"></slot>
</div>
</Drawer>
</template>
<script>
import RenderDom from '@/libs/render-dom'
import DragDrawerTrigger from './drag-drawer-trigger.vue'
import Mixin from './mixin'
import { on, off } from '@/libs/tools'
import './index.less'
export default {
name: 'BDrawer',
components: {
RenderDom,
DragDrawerTrigger
},
mixins: [Mixin],
props: {
value: {
type: Boolean,
default: false
},
width: {
type: [String, Number],
default: 256
},
// 是否可拖动修改宽度
draggable: {
type: Boolean,
default: false
},
// 最小拖动宽度
minWidth: {
type: [String, Number],
default: 256
}
},
data () {
return {
canMove: false,
wrapperWidth: 0,
wrapperLeft: 0
}
},
computed: {
outerClasses () {
const classesArray = [
`${this.prefix}-wrapper`,
this.canMove ? 'no-select pointer-events-none' : ''
]
return classesArray.join(' ')
},
placement () {
return this.$attrs.placement
},
innerWidth () {
const width = this.width
return width <= 100 ? (this.wrapperWidth * width) / 100 : width
},
triggerStyle () {
return {
[this.placement]: `${this.innerWidth}px`,
position: this.$attrs.inner ? 'absolute' : 'fixed'
}
}
},
methods: {
handleInput (status) {
this.$emit('input', status)
},
handleTriggerMousedown (event) {
this.canMove = true
this.$emit('on-resize-start')
// 防止鼠标选中抽屉中文字，造成拖动trigger触发浏览器原生拖动行为
window.getSelection().removeAllRanges()
},
handleMousemove (event) {
if (!this.canMove) return
// 更新容器宽度和距离左侧页面距离，如果是window则距左侧距离为0
this.setWrapperWidth()
const left = event.pageX - this.wrapperLeft
// 如果抽屉方向为右边，宽度计算需用容器宽度减去left
let width = this.placement === 'right' ? this.wrapperWidth - left : left
// 限定做小宽度
width = Math.max(width, parseFloat(this.minWidth))
event.atMin = width === parseFloat(this.minWidth)
// 如果当前width不大于100，视为百分比
if (width <= 100) width = (width / this.wrapperWidth) * 100
this.$emit('update:width', parseInt(width))
this.$emit('on-resize', event)
},
handleMouseup (event) {
this.canMove = false
this.$emit('on-resize-end')
},
setWrapperWidth () {
const {
width,
left
} = this.$refs.drawerWrapper.$el.getBoundingClientRect()
this.wrapperWidth = width
this.wrapperLeft = left
}
},
mounted () {
on(document, 'mousemove', this.handleMousemove)
on(document, 'mouseup', this.handleMouseup)
this.setWrapperWidth()
},
beforeDestroy () {
off(document, 'mousemove', this.handleMousemove)
off(document, 'mouseup', this.handleMouseup)
}
}
</script>
================================================
FILE: src/components/drag-drawer/index.js
================================================
import DragDrawer from './drag-drawer.vue'
export default DragDrawer
================================================
FILE: src/components/drag-drawer/index.less
================================================
@prefix: ~"drag-drawer";
@drag-drawer-trigger-height: 100px;
@drag-drawer-trigger-width: 8px;
.@{prefix}-wrapper{
&.no-select{
user-select: none;
}
&.pointer-events-none{
pointer-events: none;
& .@{prefix}-trigger-wrapper{
pointer-events: all;
}
}
.ivu-drawer{
&-header{
overflow: hidden !important;
box-sizing: border-box;
}
&-body{
padding: 0;
overflow: visible;
position: static;
display: flex;
flex-direction: column;
}
}
.@{prefix}-body-wrapper{
width: 100%;
height: 100%;
padding: 16px;
overflow: auto;
}
.@{prefix}-trigger-wrapper{
top: 0;
height: 100%;
width: 0;
.@{prefix}-move-trigger{
position: absolute;
top: 50%;
height: @drag-drawer-trigger-height;
width: @drag-drawer-trigger-width;
background: rgb(243, 243, 243);
transform: translate(-50%, -50%);
border-radius: ~"4px / 6px";
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
line-height: @drag-drawer-trigger-height;
cursor: col-resize;
&-point{
display: inline-block;
width: 50%;
transform: translateX(50%);
i{
display: block;
border-bottom: 1px solid rgb(192, 192, 192);
padding-bottom: 2px;
}
}
}
}
.@{prefix}-footer{
flex-grow: 1;
width: 100%;
bottom: 0;
left: 0;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
background: #fff;
}
}
================================================
FILE: src/components/drag-drawer/mixin.js
================================================
export default {
data () {
return {
prefix: 'drag-drawer'
}
}
}
================================================
FILE: src/components/drag-list/drag-list.vue
================================================
<template>
<div class="drag-list-wrapper">
<div class="drag-list-con con1">
<slot name="left-title"></slot>
<draggable class="drop-box1" :class="dropConClass.left" :options="options" :value="list1" @input="handleListChange($event, 'left')" @end="handleEnd($event, 'left')">
<div class="drag-list-item" v-for="(itemLeft, index) in list1" :key="`drag_li1_${index}`">
<slot name="left" :itemLeft="itemLeft">{{ itemLeft }}</slot>
</div>
</draggable>
</div>
<div class="drag-list-con con2">
<slot name="right-title"></slot>
<draggable class="drop-box2" :class="dropConClass.right" :options="options" :value="list2" @input="handleListChange($event, 'right')" @end="handleEnd($event, 'right')">
<div class="drag-list-item" v-for="(itemRight, index) in list2" :key="`drag_li2_${index}`">
<slot name="right" :itemRight="itemRight">{{ itemRight }}</slot>
</div>
</draggable>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'DragList',
components: {
draggable
},
props: {
list1: {
type: Array,
required: true
},
list2: {
type: Array,
default: () => []
},
dropConClass: {
type: Object,
default: () => ({})
}
},
data () {
return {
options: { group: 'drag_list' }
}
},
methods: {
handleListChange (value, type) {
if (type === 'left') this.$emit('update:list1', value)
else this.$emit('update:list2', value)
},
handleEnd (event, type) {
const srcClassName = (event.srcElement || event.target).classList[0]
const targetClassName = event.to.classList[0]
let src = ''
let target = ''
if (srcClassName === targetClassName) {
if (type === 'left') {
src = 'left'
target = 'left'
} else {
src = 'right'
target = 'right'
}
} else {
if (type === 'left') {
src = 'left'
target = 'right'
} else {
src = 'right'
target = 'left'
}
}
this.$emit('on-change', {
src: src,
target: target,
oldIndex: event.oldIndex,
newIndex: event.newIndex
})
}
}
}
</script>
<style lang="less">
.drag-list-wrapper{
height: 100%;
.drag-list-con{
width: 50%;
float: left;
}
}
</style>
================================================
FILE: src/components/drag-list/index.js
================================================
import DragList from './drag-list.vue'
export default DragList
================================================
FILE: src/components/editor/editor.vue
================================================
<template>
<div class="editor-wrapper">
<div :id="editorId"></div>
</div>
</template>
<script>
import Editor from 'wangeditor'
import 'wangeditor/release/wangEditor.min.css'
import { oneOf } from '@/libs/tools'
export default {
name: 'Editor',
props: {
value: {
type: String,
default: ''
},
/**
* 绑定的值的类型, enum: ['html', 'text']
*/
valueType: {
type: String,
default: 'html',
validator: (val) => {
return oneOf(val, ['html', 'text'])
}
},
/**
* @description 设置change事件触发时间间隔
*/
changeInterval: {
type: Number,
default: 200
},
/**
* @description 是否开启本地存储
*/
cache: {
type: Boolean,
default: true
}
},
computed: {
editorId () {
return `editor${this._uid}`
}
},
methods: {
setHtml (val) {
this.editor.txt.html(val)
}
},
mounted () {
this.editor = new Editor(`#${this.editorId}`)
this.editor.customConfig.onchange = (html) => {
let text = this.editor.txt.text()
if (this.cache) localStorage.editorCache = html
this.$emit('input', this.valueType === 'html' ? html : text)
this.$emit('on-change', html, text)
}
this.editor.customConfig.onchangeTimeout = this.changeInterval
// create这个方法一定要在所有配置项之后调用
this.editor.create()
// 如果本地有存储加载本地存储内容
let html = this.value || localStorage.editorCache
if (html) this.editor.txt.html(html)
}
}
</script>
<style lang="less">
.editor-wrapper *{
z-index: 100 !important;
}
</style>
================================================
FILE: src/components/editor/index.js
================================================
import Editor from './editor.vue'
export default Editor
================================================
FILE: src/components/icons/icons.vue
================================================
<template>
<i :class="`iconfont icon-${type}`" :style="styles"></i>
</template>
<script>
export default {
name: 'Icons',
props: {
type: {
type: String,
required: true
},
color: {
type: String,
default: '#5c6b77'
},
size: {
type: Number,
default: 16
}
},
computed: {
styles () {
return {
fontSize: `${this.size}px`,
color: this.color
}
}
}
}
</script>
<style>
</style>
================================================
FILE: src/components/icons/index.js
================================================
import Icons from './icons.vue'
export default Icons
================================================
FILE: src/components/info-card/index.js
================================================
import InforCard from './infor-card.vue'
export default InforCard
================================================
FILE: src/components/info-card/infor-card.vue
================================================
<template>
<Card :shadow="shadow" class="info-card-wrapper" :padding="0">
<div class="content-con">
<div class="left-area" :style="{background: color, width: leftWidth}">
<common-icon class="icon" :type="icon" :size="iconSize" color="#fff"/>
</div>
<div class="right-area" :style="{width: rightWidth}">
<div>
<slot></slot>
</div>
</div>
</div>
</Card>
</template>
<script>
import CommonIcon from '_c/common-icon'
export default {
name: 'InforCard',
components: {
CommonIcon
},
props: {
left: {
type: Number,
default: 36
},
color: {
type: String,
default: '#2d8cf0'
},
icon: {
type: String,
default: ''
},
iconSize: {
type: Number,
default: 20
},
shadow: {
type: Boolean,
default: false
}
},
computed: {
leftWidth () {
return `${this.left}%`
},
rightWidth () {
return `${100 - this.left}%`
}
}
}
</script>
<style lang="less">
.common{
float: left;
height: 100%;
display: table;
text-align: center;
}
.size{
width: 100%;
height: 100%;
}
.middle-center{
display: table-cell;
vertical-align: middle;
}
.info-card-wrapper{
.size;
overflow: hidden;
.ivu-card-body{
.size;
}
.content-con{
.size;
position: relative;
.left-area{
.common;
& > .icon{
.middle-center;
}
}
.right-area{
.common;
& > div{
.middle-center;
}
}
}
}
</style>
================================================
FILE: src/components/login-form/index.js
================================================
import LoginForm from './login-form.vue'
export default LoginForm
================================================
FILE: src/components/login-form/login-form.vue
================================================
<template>
<Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
<FormItem prop="userName">
<Input v-model="form.userName" placeholder="请输入用户名">
<span slot="prepend">
<Icon :size="16" type="ios-person"></Icon>
</span>
</Input>
</FormItem>
<FormItem prop="password">
<Input type="password" v-model="form.password" placeholder="请输入密码">
<span slot="prepend">
<Icon :size="14" type="md-lock"></Icon>
</span>
</Input>
</FormItem>
<FormItem>
<Button @click="handleSubmit" type="primary" long>登录</Button>
</FormItem>
</Form>
</template>
<script>
export default {
name: 'LoginForm',
props: {
userNameRules: {
type: Array,
default: () => {
return [
{ required: true, message: '账号不能为空', trigger: 'blur' }
]
}
},
passwordRules: {
type: Array,
default: () => {
return [
{ required: true, message: '密码不能为空', trigger: 'blur' }
]
}
}
},
data () {
return {
form: {
userName: 'super_admin',
password: ''
}
}
},
computed: {
rules () {
return {
userName: this.userNameRules,
password: this.passwordRules
}
}
},
methods: {
handleSubmit () {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.$emit('on-success-valid', {
userName: this.form.userName,
password: this.form.password
})
}
})
}
}
}
</script>
================================================
FILE: src/components/main/components/a-back-top/index.js
================================================
import ABackTop from './index.vue'
export default ABackTop
================================================
FILE: src/components/main/components/a-back-top/index.vue
================================================
<template>
<div :class="classes" :style="styles" @click="back">
<slot>
<div :class="innerClasses">
<i class="ivu-icon ivu-icon-ios-arrow-up"></i>
</div>
</slot>
</div>
</template>
<script>
import { scrollTop } from '@/libs/util'
import { on, off } from '@/libs/tools'
const prefixCls = 'ivu-back-top'
export default {
name: 'ABackTop',
props: {
height: {
type: Number,
default: 400
},
bottom: {
type: Number,
default: 30
},
right: {
type: Number,
default: 30
},
duration: {
type: Number,
default: 1000
},
container: {
type: null,
default: window
}
},
data () {
return {
backTop: false
}
},
mounted () {
// window.addEventListener('scroll', this.handleScroll, false)
// window.addEventListener('resize', this.handleScroll, false)
on(this.containerEle, 'scroll', this.handleScroll)
on(this.containerEle, 'resize', this.handleScroll)
},
beforeDestroy () {
// window.removeEventListener('scroll', this.handleScroll, false)
// window.removeEventListener('resize', this.handleScroll, false)
off(this.containerEle, 'scroll', this.handleScroll)
off(this.containerEle, 'resize', this.handleScroll)
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-show`]: this.backTop
}
]
},
styles () {
return {
bottom: `${this.bottom}px`,
right: `${this.right}px`
}
},
innerClasses () {
return `${prefixCls}-inner`
},
containerEle () {
return this.container === window ? window : document.querySelector(this.container)
}
},
methods: {
handleScroll () {
this.backTop = this.containerEle.scrollTop >= this.height
},
back () {
let target = typeof this.container === 'string' ? this.containerEle : (document.documentElement || document.body)
const sTop = target.scrollTop
scrollTop(this.containerEle, sTop, 0, this.duration)
this.$emit('on-click')
}
}
}
</script>
================================================
FILE: src/components/main/components/error-store/error-store.vue
================================================
<template>
<div class="error-store">
<Badge dot :count="countComputed">
<Button type="text" @click="openErrorLoggerPage">
<Icon :size="20" type="ios-bug"/>
</Button>
</Badge>
</div>
</template>
<script>
export default {
name: 'ErrorStore',
props: {
count: {
type: Number,
default: 0
},
hasRead: {
type: Boolean,
default: false
}
},
computed: {
countComputed () {
return this.hasRead ? 0 : this.count
}
},
methods: {
openErrorLoggerPage () {
this.$router.push({
name: 'error_logger_page'
})
}
}
}
</script>
<style lang="less">
.error-store{
margin-right: 12px;
.ivu-badge-dot{
top: 20px;
}
.ivu-btn.ivu-btn-text{
padding: 5px 1px 6px;
}
}
</style>
================================================
FILE: src/components/main/components/error-store/index.js
================================================
import ErrorStore from './error-store.vue'
export default ErrorStore
================================================
FILE: src/components/main/components/fullscreen/fullscreen.vue
================================================
<template>
<div v-if="showFullScreenBtn" class="full-screen-btn-con">
<Tooltip :content="value ? '退出全屏' : '全屏'" placement="bottom">
<Icon @click.native="handleChange" :type="value ? 'md-contract' : 'md-expand'" :size="23"></Icon>
</Tooltip>
</div>
</template>
<script>
export default {
name: 'Fullscreen',
computed: {
showFullScreenBtn () {
return window.navigator.userAgent.indexOf('MSIE') < 0
}
},
props: {
value: {
type: Boolean,
default: false
}
},
methods: {
handleFullscreen () {
let main = document.body
if (this.value) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
} else {
if (main.requestFullscreen) {
main.requestFullscreen()
} else if (main.mozRequestFullScreen) {
main.mozRequestFullScreen()
} else if (main.webkitRequestFullScreen) {
main.webkitRequestFullScreen()
} else if (main.msRequestFullscreen) {
main.msRequestFullscreen()
}
}
},
handleChange () {
this.handleFullscreen()
}
},
mounted () {
let isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
isFullscreen = !!isFullscreen
document.addEventListener('fullscreenchange', () => {
this.$emit('input', !this.value)
this.$emit('on-change', !this.value)
})
document.addEventListener('mozfullscreenchange', () => {
this.$emit('input', !this.value)
this.$emit('on-change', !this.value)
})
document.addEventListener('webkitfullscreenchange', () => {
this.$emit('input', !this.value)
this.$emit('on-change', !this.value)
})
document.addEventListener('msfullscreenchange', () => {
this.$emit('input', !this.value)
this.$emit('on-change', !this.value)
})
this.$emit('input', isFullscreen)
}
}
</script>
<style lang="less">
.full-screen-btn-con .ivu-tooltip-rel{
height: 64px;
line-height: 56px;
i{
cursor: pointer;
}
}
</style>
================================================
FILE: src/components/main/components/fullscreen/index.js
================================================
import Fullscreen from './fullscreen.vue'
export default Fullscreen
================================================
FILE: src/components/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.less
================================================
.custom-bread-crumb{
display: inline-block;
vertical-align: top;
}
================================================
FILE: src/components/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.vue
================================================
<template>
<div class="custom-bread-crumb">
<Breadcrumb :style="{fontSize: `${fontSize}px`}">
<BreadcrumbItem v-for="item in list" :to="item.to" :key="`bread-crumb-${item.name}`">
<common-icon style="margin-right: 4px;" :type="item.icon || ''"/>
{{ showTitle(item) }}
</BreadcrumbItem>
</Breadcrumb>
</div>
</template>
<script>
import { showTitle } from '@/libs/util'
import CommonIcon from '_c/common-icon'
import './custom-bread-crumb.less'
export default {
name: 'customBreadCrumb',
components: {
CommonIcon
},
props: {
list: {
type: Array,
default: () => []
},
fontSize: {
type: Number,
default: 14
},
showIcon: {
type: Boolean,
default: false
}
},
methods: {
showTitle (item) {
return showTitle(item, this)
},
isCustomIcon (iconName) {
return iconName.indexOf('_') === 0
},
getCustomIconName (iconName) {
return iconName.slice(1)
}
}
}
</script>
================================================
FILE: src/components/main/components/header-bar/custom-bread-crumb/index.js
================================================
import customBreadCrumb from './custom-bread-crumb.vue'
export default customBreadCrumb
================================================
FILE: src/components/main/components/header-bar/header-bar.less
================================================
.header-bar{
width: 100%;
height: 100%;
position: relative;
.custom-content-con{
float: right;
height: auto;
padding-right: 20px;
line-height: 64px;
& > *{
float: right;
}
}
}
================================================
FILE: src/components/main/components/header-bar/header-bar.vue
================================================
<template>
<div class="header-bar">
<sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
<custom-bread-crumb show-icon style="margin-left: 30px;" :list="breadCrumbList"></custom-bread-crumb>
<div class="custom-content-con">
<slot></slot>
</div>
</div>
</template>
<script>
import siderTrigger from './sider-trigger'
import customBreadCrumb from './custom-bread-crumb'
import './header-bar.less'
export default {
name: 'HeaderBar',
components: {
siderTrigger,
customBreadCrumb
},
props: {
collapsed: Boolean
},
computed: {
breadCrumbList () {
return this.$store.state.app.breadCrumbList
}
},
methods: {
handleCollpasedChange (state) {
this.$emit('on-coll-change', state)
}
}
}
</script>
================================================
FILE: src/components/main/components/header-bar/index.js
================================================
import HeaderBar from './header-bar'
export default HeaderBar
================================================
FILE: src/components/main/components/header-bar/sider-trigger/index.js
================================================
import siderTrigger from './sider-trigger.vue'
export default siderTrigger
================================================
FILE: src/components/main/components/header-bar/sider-trigger/sider-trigger.less
================================================
.trans{
transition: transform .2s ease;
}
@size: 40px;
.sider-trigger-a{
padding: 6px;
width: @size;
height: @size;
display: inline-block;
text-align: center;
color: #5c6b77;
margin-top: 12px;
i{
.trans;
vertical-align: top;
}
&.collapsed i{
transform: rotateZ(90deg);
.trans;
}
}
================================================
FILE: src/components/main/components/header-bar/sider-trigger/sider-trigger.vue
================================================
<template>
<a @click="handleChange" type="text" :class="['sider-trigger-a', collapsed ? 'collapsed' : '']"><Icon :type="icon" :size="size" /></a>
</template>
<script>
export default {
name: 'siderTrigger',
props: {
collapsed: Boolean,
icon: {
type: String,
default: 'navicon-round'
},
size: {
type: Number,
default: 26
}
},
methods: {
handleChange () {
this.$emit('on-change', !this.collapsed)
}
}
}
</script>
<style lang="less">
@import './sider-trigger.less';
</style>
================================================
FILE: src/components/main/components/language/index.js
================================================
import Language from './language.vue'
export default Language
================================================
FILE: src/components/main/components/language/language.vue
================================================
<template>
<div>
<Dropdown trigger="click" @on-click="selectLang">
<a href="javascript:void(0)">
{{ title }}
<Icon :size="18" type="md-arrow-dropdown" />
</a>
<DropdownMenu slot="list">
<DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{{ value }}</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</template>
<script>
export default {
name: 'Language',
props: {
lang: String
},
data () {
return {
langList: {
'zh-CN': '语言',
'zh-TW': '語言',
'en-US': 'Lang'
},
localList: {
'zh-CN': '中文简体',
'zh-TW': '中文繁体',
'en-US': 'English'
}
}
},
watch: {
lang (lang) {
this.$i18n.locale = lang
}
},
computed: {
title () {
return this.langList[this.lang]
}
},
methods: {
selectLang (name) {
this.$emit('on-lang-change', name)
}
}
}
</script>
================================================
FILE: src/components/main/components/side-menu/collapsed-menu.vue
================================================
<template>
<Dropdown ref="dropdown" @on-click="handleClick" :class="hideTitle ? '' : 'collased-menu-dropdown'" :transfer="hideTitle" :placement="placement">
<a class="drop-menu-a" type="text" @mouseover="handleMousemove($event, children)" :style="{textAlign: !hideTitle ? 'left' : ''}"><common-icon :size="rootIconSize" :color="textColor" :type="parentItem.icon"/><span class="menu-title" v-if="!hideTitle">{{ showTitle(parentItem) }}</span><Icon style="float: right;" v-if="!hideTitle" type="ios-arrow-forward" :size="16"/></a>
<DropdownMenu ref="dropdown" slot="list">
<template v-for="child in children">
<collapsed-menu v-if="showChildren(child)" :icon-size="iconSize" :parent-item="child" :key="`drop-${child.name}`"></collapsed-menu>
<DropdownItem v-else :key="`drop-${child.name}`" :name="child.name"><common-icon :size="iconSize" :type="child.icon"/><span class="menu-title">{{ showTitle(child) }}</span></DropdownItem>
</template>
</DropdownMenu>
</Dropdown>
</template>
<script>
import mixin from './mixin'
import itemMixin from './item-mixin'
import { findNodeUpperByClasses } from '@/libs/util'
export default {
name: 'CollapsedMenu',
mixins: [ mixin, itemMixin ],
props: {
hideTitle: {
type: Boolean,
default: false
},
rootIconSize: {
type: Number,
default: 16
}
},
data () {
return {
placement: 'right-end'
}
},
methods: {
handleClick (name) {
this.$emit('on-click', name)
},
handleMousemove (event, children) {
const { pageY } = event
const height = children.length * 38
const isOverflow = pageY + height < window.innerHeight
this.placement = isOverflow ? 'right-start' : 'right-end'
}
},
mounted () {
let dropdown = findNodeUpperByClasses(this.$refs.dropdown.$el, ['ivu-select-dropdown', 'ivu-dropdown-transfer'])
if (dropdown) dropdown.style.overflow = 'visible'
}
}
</script>
================================================
FILE: src/components/main/components/side-menu/index.js
================================================
import SideMenu from './side-menu.vue'
export default SideMenu
================================================
FILE: src/components/main/components/side-menu/item-mixin.js
================================================
export default {
props: {
parentItem: {
type: Object,
default: () => {}
},
theme: String,
iconSize: Number
},
computed: {
parentName () {
return this.parentItem.name
},
children () {
return this.parentItem.children
},
textColor () {
return this.theme === 'dark' ? '#fff' : '#495060'
}
}
}
================================================
FILE: src/components/main/components/side-menu/mixin.js
================================================
import CommonIcon from '_c/common-icon'
import { showTitle } from '@/libs/util'
export default {
components: {
CommonIcon
},
methods: {
showTitle (item) {
return showTitle(item, this)
},
showChildren (item) {
return item.children && (item.children.length > 1 || (item.meta && item.meta.showAlways))
},
getNameOrHref (item, children0) {
return item.href ? `isTurnByHref_${item.href}` : (children0 ? item.children[0].name : item.name)
}
}
}
================================================
FILE: src/components/main/components/side-menu/side-menu-item.vue
================================================
<template>
<Submenu :name="`${parentName}`">
<template slot="title">
<common-icon :type="parentItem.icon || ''"/>
<span>{{ showTitle(parentItem) }}</span>
</template>
<template v-for="item in children">
<template v-if="item.children && item.children.length === 1">
<side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
<menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`"><common-icon :type="item.children[0].icon || ''"/><span>{{ showTitle(item.children[0]) }}</span></menu-item>
</template>
<template v-else>
<side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
<menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ showTitle(item) }}</span></menu-item>
</template>
</template>
</Submenu>
</template>
<script>
import mixin from './mixin'
import itemMixin from './item-mixin'
export default {
name: 'SideMenuItem',
mixins: [ mixin, itemMixin ]
}
</script>
================================================
FILE: src/components/main/components/side-menu/side-menu.less
================================================
.side-menu-wrapper{
user-select: none;
.menu-collapsed{
padding-top: 10px;
.ivu-dropdown{
width: 100%;
.ivu-dropdown-rel a{
width: 100%;
}
}
.ivu-tooltip{
width: 100%;
.ivu-tooltip-rel{
width: 100%;
}
.ivu-tooltip-popper .ivu-tooltip-content{
.ivu-tooltip-arrow{
border-right-color: #fff;
}
.ivu-tooltip-inner{
background: #fff;
color: #495060;
}
}
}
}
a.drop-menu-a{
display: inline-block;
padding: 6px 15px;
width: 100%;
text-align: center;
color: #495060;
}
}
.menu-title{
padding-left: 6px;
}
================================================
FILE: src/components/main/components/side-menu/side-menu.vue
================================================
<template>
<div class="side-menu-wrapper">
<slot></slot>
<Menu ref="menu" v-show="!collapsed" :active-name="activeName" :open-names="openedNames" :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect">
<template v-for="item in menuList">
<template v-if="item.children && item.children.length === 1">
<side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
<menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`"><common-icon :type="item.children[0].icon || ''"/><span>{{ showTitle(item.children[0]) }}</span></menu-item>
</template>
<template v-else>
<side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
<menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ showTitle(item) }}</span></menu-item>
</template>
</template>
</Menu>
<div class="menu-collapsed" v-show="collapsed" :list="menuList">
<template v-for="item in menuList">
<collapsed-menu v-if="item.children && item.children.length > 1" @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
<Tooltip transfer v-else :content="showTitle(item.children && item.children[0] ? item.children[0] : item)" placement="right" :key="`drop-menu-${item.name}`">
<a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{textAlign: 'center'}"><common-icon :size="rootIconSize" :color="textColor" :type="item.icon || (item.children && item.children[0].icon)"/></a>
</Tooltip>
</template>
</div>
</div>
</template>
<script>
import SideMenuItem from './side-menu-item.vue'
import CollapsedMenu from './collapsed-menu.vue'
import { getUnion } from '@/libs/tools'
import mixin from './mixin'
export default {
name: 'SideMenu',
mixins: [ mixin ],
components: {
SideMenuItem,
CollapsedMenu
},
props: {
menuList: {
type: Array,
default () {
return []
}
},
collapsed: {
type: Boolean
},
theme: {
type: String,
default: 'dark'
},
rootIconSize: {
type: Number,
default: 20
},
iconSize: {
type: Number,
default: 16
},
accordion: Boolean,
activeName: {
type: String,
default: ''
},
openNames: {
type: Array,
default: () => []
}
},
data () {
return {
openedNames: []
}
},
methods: {
handleSelect (name) {
this.$emit('on-select', name)
},
getOpenedNamesByActiveName (name) {
return this.$route.matched.map(item => item.name).filter(item => item !== name)
},
updateOpenName (name) {
if (name === this.$config.homeName) this.openedNames = []
else this.openedNames = this.getOpenedNamesByActiveName(name)
}
},
computed: {
textColor () {
return this.theme === 'dark' ? '#fff' : '#495060'
}
},
watch: {
activeName (name) {
if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name)
else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
},
openNames (newNames) {
this.openedNames = newNames
},
openedNames () {
this.$nextTick(() => {
this.$refs.menu.updateOpened()
})
}
},
mounted () {
this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
}
}
</script>
<style lang="less">
@import './side-menu.less';
</style>
================================================
FILE: src/components/main/components/tags-nav/index.js
================================================
import TagsNav from './tags-nav.vue'
export default TagsNav
================================================
FILE: src/components/main/components/tags-nav/tags-nav.less
================================================
.no-select{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.size{
width: 100%;
height: 100%;
}
.tags-nav{
position: relative;
border-top: 1px solid #F0F0F0;
border-bottom: 1px solid #F0F0F0;
.no-select;
.size;
.close-con{
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 32px;
background: #fff;
text-align: center;
z-index: 10;
}
.btn-con{
position: absolute;
top: 0px;
height: 100%;
background: #fff;
padding-top: 3px;
z-index: 10;
button{
padding: 6px 4px;
line-height: 14px;
text-align: center;
}
&.left-btn{
left: 0px;
}
&.right-btn{
right: 32px;
border-right: 1px solid #F0F0F0;
}
}
.scroll-outer{
position: absolute;
left: 28px;
right: 61px;
top: 0;
bottom: 0;
box-shadow: 0px 0 3px 2px rgba(100,100,100,.1) inset;
.scroll-body{
height: ~"calc(100% - 1px)";
display: inline-block;
padding: 1px 4px 0;
position: absolute;
overflow: visible;
white-space: nowrap;
transition: left .3s ease;
.ivu-tag-dot-inner{
transition: background .2s ease;
}
}
}
.contextmenu {
position: absolute;
margin: 0;
padding: 5px 0;
background: #fff;
z-index: 1000;
list-style-type: none;
border-radius: 4px;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .1);
li {
margin: 0;
padding: 5px 15px;
cursor: pointer;
&:hover {
background: #eee;
}
}
}
}
================================================
FILE: src/components/main/components/tags-nav/tags-nav.vue
================================================
<template>
<div class="tags-nav">
<div class="close-con">
<Dropdown transfer @on-click="handleTagsOption" style="margin-top:7px;">
<Button size="small" type="text">
<Icon :size="18" type="ios-close-circle-outline" />
</Button>
<DropdownMenu slot="list">
<DropdownItem name="close-all">关闭所有</DropdownItem>
<DropdownItem name="close-others">关闭其他</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<ul v-show="visible" :style="{left: contextMenuLeft + 'px', top: contextMenuTop + 'px'}" class="contextmenu">
<li v-for="(item, key) of menuList" @click="handleTagsOption(key)" :key="key">{{item}}</li>
</ul>
<div class="btn-con left-btn">
<Button type="text" @click="handleScroll(240)">
<Icon :size="18" type="ios-arrow-back" />
</Button>
</div>
<div class="btn-con right-btn">
<Button type="text" @click="handleScroll(-240)">
<Icon :size="18" type="ios-arrow-forward" />
</Button>
</div>
<div class="scroll-outer" ref="scrollOuter" @DOMMouseScroll="handlescroll" @mousewheel="handlescroll">
<div ref="scrollBody" class="scroll-body" :style="{left: tagBodyLeft + 'px'}">
<transition-group name="taglist-moving-animation">
<Tag
type="dot"
v-for="(item, index) in list"
ref="tagsPageOpened"
:key="`tag-nav-${index}`"
:name="item.name"
:data-route-item="item"
@on-close="handleClose(item)"
@click.native="handleClick(item)"
:closable="item.name !== $config.homeName"
:color="isCurrentTag(item) ? 'primary' : 'default'"
@contextmenu.prevent.native="contextMenu(item, $event)"
>{{ showTitleInside(item) }}</Tag>
</transition-group>
</div>
</div>
</div>
</template>
<script>
import { showTitle, routeEqual } from '@/libs/util'
import beforeClose from '@/router/before-close'
export default {
name: 'TagsNav',
props: {
value: Object,
list: {
type: Array,
default () {
return []
}
}
},
data () {
return {
tagBodyLeft: 0,
rightOffset: 40,
outerPadding: 4,
contextMenuLeft: 0,
contextMenuTop: 0,
visible: false,
menuList: {
others: '关闭其他',
all: '关闭所有'
}
}
},
computed: {
currentRouteObj () {
const { name, params, query } = this.value
return { name, params, query }
}
},
methods: {
handlescroll (e) {
var type = e.type
let delta = 0
if (type === 'DOMMouseScroll' || type === 'mousewheel') {
delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 40
}
this.handleScroll(delta)
},
handleScroll (offset) {
const outerWidth = this.$refs.scrollOuter.offsetWidth
const bodyWidth = this.$refs.scrollBody.offsetWidth
if (offset > 0) {
this.tagBodyLeft = Math.min(0, this.tagBodyLeft + offset)
} else {
if (outerWidth < bodyWidth) {
if (this.tagBodyLeft < -(bodyWidth - outerWidth)) {
this.tagBodyLeft = this.tagBodyLeft
} else {
this.tagBodyLeft = Math.max(this.tagBodyLeft + offset, outerWidth - bodyWidth)
}
} else {
this.tagBodyLeft = 0
}
}
},
handleTagsOption (type) {
if (type.includes('all')) {
// 关闭所有，除了home
let res = this.list.filter(item => item.name === this.$config.homeName)
this.$emit('on-close', res, 'all')
} else if (type.includes('others')) {
// 关闭除当前页和home页的其他页
let res = this.list.filter(item => routeEqual(this.currentRouteObj, item) || item.name === this.$config.homeName)
this.$emit('on-close', res, 'others', this.currentRouteObj)
setTimeout(() => {
this.getTagElementByRoute(this.currentRouteObj)
}, 100)
}
},
handleClose (current) {
if (current.meta && current.meta.beforeCloseName && current.meta.beforeCloseName in beforeClose) {
new Promise(beforeClose[current.meta.beforeCloseName]).then(close => {
if (close) {
this.close(current)
}
})
} else {
this.close(current)
}
},
close (route) {
let res = this.list.filter(item => !routeEqual(route, item))
this.$emit('on-close', res, undefined, route)
},
handleClick (item) {
this.$emit('input', item)
},
showTitleInside (item) {
return showTitle(item, this)
},
isCurrentTag (item) {
return routeEqual(this.currentRouteObj, item)
},
moveToView (tag) {
const outerWidth = this.$refs.scrollOuter.offsetWidth
const bodyWidth = this.$refs.scrollBody.offsetWidth
if (bodyWidth < outerWidth) {
this.tagBodyLeft = 0
} else if (tag.offsetLeft < -this.tagBodyLeft) {
// 标签在可视区域左侧
this.tagBodyLeft = -tag.offsetLeft + this.outerPadding
} else if (tag.offsetLeft > -this.tagBodyLeft && tag.offsetLeft + tag.offsetWidth < -this.tagBodyLeft + outerWidth) {
// 标签在可视区域
this.tagBodyLeft = Math.min(0, outerWidth - tag.offsetWidth - tag.offsetLeft - this.outerPadding)
} else {
// 标签在可视区域右侧
this.tagBodyLeft = -(tag.offsetLeft - (outerWidth - this.outerPadding - tag.offsetWidth))
}
},
getTagElementByRoute (route) {
this.$nextTick(() => {
this.refsTag = this.$refs.tagsPageOpened
this.refsTag.forEach((item, index) => {
if (routeEqual(route, item.$attrs['data-route-item'])) {
let tag = this.refsTag[index].$el
this.moveToView(tag)
}
})
})
},
contextMenu (item, e) {
if (item.name === this.$config.homeName) {
return
}
this.visible = true
const offsetLeft = this.$el.getBoundingClientRect().left
this.contextMenuLeft = e.clientX - offsetLeft + 10
this.contextMenuTop = e.clientY - 64
},
closeMenu () {
this.visible = false
}
},
watch: {
'$route' (to) {
this.getTagElementByRoute(to)
},
visible (value) {
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
}
},
mounted () {
setTimeout(() => {
this.getTagElementByRoute(this.$route)
}, 200)
}
}
</script>
<style lang="less">
@import './tags-nav.less';
</style>
================================================
FILE: src/components/main/components/user/index.js
================================================
import User from './user.vue'
export default User
================================================
FILE: src/components/main/components/user/user.less
================================================
.user{
&-avatar-dropdown{
cursor: pointer;
display: inline-block;
// height: 64px;
vertical-align: middle;
// line-height: 64px;
.ivu-badge-dot{
top: 16px;
}
}
}
================================================
FILE: src/components/main/components/user/user.vue
================================================
<template>
<div class="user-avatar-dropdown">
<Dropdown @on-click="handleClick">
<Badge :dot="!!messageUnreadCount">
<Avatar :src="userAvatar"/>
</Badge>
<Icon :size="18" type="md-arrow-dropdown"></Icon>
<DropdownMenu slot="list">
<DropdownItem name="message">
消息中心<Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>
</DropdownItem>
<DropdownItem name="logout">退出登录</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</template>
<script>
import './user.less'
import { mapActions } from 'vuex'
export default {
name: 'User',
props: {
userAvatar: {
type: String,
default: ''
},
messageUnreadCount: {
type: Number,
default: 0
}
},
methods: {
...mapActions([
'handleLogOut'
]),
logout () {
this.handleLogOut().then(() => {
this.$router.push({
name: 'login'
})
})
},
message () {
this.$router.push({
name: 'message_page'
})
},
handleClick (name) {
switch (name) {
case 'logout': this.logout()
break
case 'message': this.message()
break
}
}
}
}
</script>
================================================
FILE: src/components/main/index.js
================================================
import Main from './main.vue'
export default Main
================================================
FILE: src/components/main/main.less
================================================
.main{
.logo-con{
height: 64px;
padding: 10px;
img{
height: 44px;
width: auto;
display: block;
margin: 0 auto;
}
}
.header-con{
background: #fff;
padding: 0 20px;
width: 100%;
}
.main-layout-con{
height: 100%;
overflow: hidden;
}
.main-content-con{
height: ~"calc(100% - 60px)";
overflow: hidden;
}
.tag-nav-wrapper{
padding: 0;
height:40px;
background:#F0F0F0;
}
.content-wrapper{
padding: 18px;
height: ~"calc(100% - 80px)";
overflow: auto;
}
.left-sider{
.ivu-layout-sider-children{
overflow-y: scroll;
margin-right: -18px;
}
}
}
.ivu-menu-item > i{
margin-right: 12px !important;
}
.ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
margin-right: 8px !important;
}
.collased-menu-dropdown{
width: 100%;
margin: 0;
line-height: normal;
padding: 7px 0 6px 16px;
clear: both;
font-size: 12px !important;
white-space: nowrap;
list-style: none;
cursor: pointer;
transition: background 0.2s ease-in-out;
&:hover{
background: rgba(100, 100, 100, 0.1);
}
& * {
color: #515a6e;
}
.ivu-menu-item > i{
margin-right: 12px !important;
}
.ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
margin-right: 8px !important;
}
}
.ivu-select-dropdown.ivu-dropdown-transfer{
max-height: 400px;
}
================================================
FILE: src/components/main/main.vue
================================================
<template>
<Layout style="height: 100%" class="main">
<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
<side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
<!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
<div class="logo-con">
<img v-show="!collapsed" :src="maxLogo" key="max-logo" />
<img v-show="collapsed" :src="minLogo" key="min-logo" />
</div>
</side-menu>
</Sider>
<Layout>
<Header class="header-con">
<header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
<user :message-unread-count="unreadCount" :user-avatar="userAvatar"/>
<language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>
<error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store>
<fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
</header-bar>
</Header>
<Content class="main-content-con">
<Layout class="main-layout-con">
<div class="tag-nav-wrapper">
<tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/>
</div>
<Content class="content-wrapper">
<keep-alive :include="cacheList">
<router-view/>
</keep-alive>
<ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
</Content>
</Layout>
</Content>
</Layout>
</Layout>
</template>
<script>
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import ABackTop from './components/a-back-top'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import ErrorStore from './components/error-store'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { getNewTagList, routeEqual } from '@/libs/util'
import routers from '@/router/routers'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'
import './main.less'
export default {
name: 'Main',
components: {
SideMenu,
HeaderBar,
Language,
TagsNav,
Fullscreen,
ErrorStore,
User,
ABackTop
},
data () {
return {
collapsed: false,
minLogo,
maxLogo,
isFullscreen: false
}
},
computed: {
...mapGetters([
'errorCount'
]),
tagNavList () {
return this.$store.state.app.tagNavList
},
tagRouter () {
return this.$store.state.app.tagRouter
},
userAvatar () {
return this.$store.state.user.avatarImgPath
},
cacheList () {
const list = ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
return list
},
menuList () {
return this.$store.getters.menuList
},
local () {
return this.$store.state.app.local
},
hasReadErrorPage () {
return this.$store.state.app.hasReadErrorPage
},
unreadCount () {
return this.$store.state.user.unreadCount
}
},
methods: {
...mapMutations([
'setBreadCrumb',
'setTagNavList',
'addTag',
'setLocal',
'setHomeRoute',
'closeTag'
]),
...mapActions([
'handleLogin',
'getUnreadMessageCount'
]),
turnToPage (route) {
let { name, params, query } = {}
if (typeof route === 'string') name = route
else {
name = route.name
params = route.params
query = route.query
}
if (name.indexOf('isTurnByHref_') > -1) {
window.open(name.split('_')[1])
return
}
this.$router.push({
name,
params,
query
})
},
handleCollapsedChange (state) {
this.collapsed = state
},
handleCloseTag (res, type, route) {
if (type !== 'others') {
if (type === 'all') {
this.turnToPage(this.$config.homeName)
} else {
if (routeEqual(this.$route, route)) {
this.closeTag(route)
}
}
}
this.setTagNavList(res)
},
handleClick (item) {
this.turnToPage(item)
}
},
watch: {
'$route' (newRoute) {
const { name, query, params, meta } = newRoute
this.addTag({
route: { name, query, params, meta },
type: 'push'
})
this.setBreadCrumb(newRoute)
this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
this.$refs.sideMenu.updateOpenName(newRoute.name)
}
},
mounted () {
/**
* @description 初始化设置面包屑导航和标签导航
*/
this.setTagNavList()
this.setHomeRoute(routers)
const { name, params, query, meta } = this.$route
this.addTag({
route: { name, params, query, meta }
})
this.setBreadCrumb(this.$route)
// 设置初始语言
this.setLocal(this.$i18n.locale)
// 如果当前打开页面不在标签栏中，跳到homeName页
if (!this.tagNavList.find(item => item.name === this.$route.name)) {
this.$router.push({
name: this.$config.homeName
})
}
// 获取未读消息条数
this.getUnreadMessageCount()
}
}
</script>
================================================
FILE: src/components/markdown/index.js
================================================
import MarkdownEditor from './markdown.vue'
export default MarkdownEditor
================================================
FILE: src/components/markdown/markdown.vue
================================================
<template>
<div class="markdown-wrapper">
<textarea ref="editor"></textarea>
</div>
</template>
<script>
import Simplemde from 'simplemde'
import 'simplemde/dist/simplemde.min.css'
export default {
name: 'MarkdownEditor',
props: {
value: {
type: String,
default: ''
},
options: {
type: Object,
default: () => {
return {}
}
},
localCache: {
type: Boolean,
default: true
}
},
data () {
return {
editor: null
}
},
methods: {
addEvents () {
this.editor.codemirror.on('change', () => {
let value = this.editor.value()
if (this.localCache) localStorage.markdownContent = value
this.$emit('input', value)
this.$emit('on-change', value)
})
this.editor.codemirror.on('focus', () => {
this.$emit('on-focus', this.editor.value())
})
this.editor.codemirror.on('blur', () => {
this.$emit('on-blur', this.editor.value())
})
}
},
mounted () {
this.editor = new Simplemde(Object.assign(this.options, {
element: this.$refs.editor
}))
/**
* 事件列表为Codemirror编辑器的事件，更多事件类型，请参考：
* https://codemirror.net/doc/manual.html#events
*/
this.addEvents()
let content = localStorage.markdownContent
if (content) this.editor.value(content)
}
}
</script>
<style lang="less">
.markdown-wrapper{
.editor-toolbar.fullscreen{
z-index: 9999;
}
.CodeMirror-fullscreen{
z-index: 9999;
}
.CodeMirror-fullscreen ~ .editor-preview-side{
z-index: 9999;
}
}
</style>
================================================
FILE: src/components/parent-view/index.js
================================================
import ParentView from './parent-view.vue'
export default ParentView
================================================
FILE: src/components/parent-view/parent-view.vue
================================================
<template>
<keep-alive :include="cacheList" :exclude="notCacheName">
<router-view ref="child"/>
</keep-alive>
</template>
<script>
export default {
name: 'ParentView',
computed: {
tagNavList () {
return this.$store.state.app.tagNavList
},
notCacheName () {
return [(this.$route.meta && this.$route.meta.notCache) ? this.$route.name : '']
},
cacheList () {
return ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
}
}
}
</script>
================================================
FILE: src/components/paste-editor/index.js
================================================
import PasteEditor from './paste-editor.vue'
export default PasteEditor
================================================
FILE: src/components/paste-editor/paste-editor.less
================================================
.paste-editor-wrapper{
width: 100%;
height: 100%;
border: 1px dashed gainsboro;
textarea.textarea-el{
width: 100%;
height: 100%;
}
.CodeMirror{
height: 100%;
padding: 0;
.CodeMirror-code div .CodeMirror-line > span > span.cm-tab{
&::after{
content: '→';
color: #BFBFBF;
}
}
}
.first-row{
font-weight: 700;
font-size: 14px;
}
.incorrect-row{
background: #F5CBD1;
}
}
================================================
FILE: src/components/paste-editor/paste-editor.vue
================================================
<template>
<div class="paste-editor-wrapper">
<textarea ref="codemirror" class="textarea-el"></textarea>
</div>
</template>
<script>
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import { forEach } from '@/libs/tools'
import createPlaceholder from './plugins/placeholder'
export default {
name: 'PasteEditor',
props: {
value: Array,
pasteData: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '从网页或其他应用软件复制表格数据，粘贴到这里 。默认第一行是表头，使用回车键添加新行，使用Tab键区分列。'
}
},
data () {
return {
pasteDataArr: [],
rowArrLength: 0,
editor: null
}
},
watch: {
pasteData (val) {
if (val === '') {
this.editor.setValue('')
}
}
},
computed: {
rowNum () {
return this.pasteDataArr.length
},
colNum () {
return this.pasteDataArr[0] ? this.pasteDataArr[0].length : 0
}
},
methods: {
handleKeyup (e) {
this.handleAreaData()
},
/**
* @description 处理粘贴操作
*/
handleContentChanged (content) {
let pasteData = content.trim()
this.$emit('on-content-change', pasteData)
let rows = pasteData.split((/[\n\u0085\u2028\u2029]|\r\n?/g)).map(row => {
return row.split('\t')
})
if (content === '') rows = []
this.pasteDataArr = rows
this.clearLineClass()
this.checkColNumInEveryRow()
this.$emit('input', this.pasteDataArr)
},
/**
* @description 检查除第一行的每一行列数是否与第一行相同
*/
checkColNumInEveryRow () {
let i = 0
const len = this.rowNum
if (len === 0) return
while (++i < len) {
let item = this.pasteDataArr[i]
if (item.length !== this.colNum && (!(i === len - 1 && item.length === 1 && item[0] === '') || i !== len - 1)) {
this.markIncorrectRow(i)
this.$emit('on-error', i)
return false
}
}
this.$emit('on-success', this.pasteDataArr)
return true
},
/**
* @description 标记不符合格式的一行
*/
markIncorrectRow (index) {
this.editor.addLineClass(index, 'text', 'incorrect-row')
},
/**
* @description 标记不符合格式的一行
*/
clearLineClass () {
forEach(this.pasteDataArr, (item, index) => {
this.editor.removeLineClass(index, 'text', 'incorrect-row')
})
}
},
mounted () {
createPlaceholder(CodeMirror)
this.editor = CodeMirror.fromTextArea(this.$refs.codemirror, {
lineNumbers: true,
tabSize: 1,
lineWrapping: true,
placeholder: this.placeholder
})
this.editor.on('change', (editor) => {
this.handleContentChanged(editor.getValue())
})
this.editor.addLineClass(0, 'text', 'first-row')
}
}
</script>
<style lang="less">
@import './paste-editor.less';
</style>
================================================
FILE: src/components/paste-editor/plugins/placeholder.js
================================================
export default (codemirror) => {
(function (mod) {
mod(codemirror)
})(function (CodeMirror) {
CodeMirror.defineOption('placeholder', '', function (cm, val, old) {
var prev = old && old !== CodeMirror.Init
if (val && !prev) {
cm.on('blur', onBlur)
cm.on('change', onChange)
cm.on('swapDoc', onChange)
onChange(cm)
} else if (!val && prev) {
cm.off('blur', onBlur)
cm.off('change', onChange)
cm.off('swapDoc', onChange)
clearPlaceholder(cm)
var wrapper = cm.getWrapperElement()
wrapper.className = wrapper.className.replace(' CodeMirror-empty', '')
}
if (val && !cm.hasFocus()) onBlur(cm)
})
function clearPlaceholder (cm) {
if (cm.state.placeholder) {
cm.state.placeholder.parentNode.removeChild(cm.state.placeholder)
cm.state.placeholder = null
}
}
function setPlaceholder (cm) {
clearPlaceholder(cm)
var elt = cm.state.placeholder = document.createElement('pre')
elt.style.cssText = 'height: 0; overflow: visible; color: #80848f;'
elt.style.direction = cm.getOption('direction')
elt.className = 'CodeMirror-placeholder'
var placeHolder = cm.getOption('placeholder')
if (typeof placeHolder === 'string') placeHolder = document.createTextNode(placeHolder)
elt.appendChild(placeHolder)
cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild)
}
function onBlur (cm) {
if (isEmpty(cm)) setPlaceholder(cm)
}
function onChange (cm) {
let wrapper = cm.getWrapperElement()
let empty = isEmpty(cm)
wrapper.className = wrapper.className.replace(' CodeMirror-empty', '') + (empty ? ' CodeMirror-empty' : '')
if (empty) setPlaceholder(cm)
else clearPlaceholder(cm)
}
function isEmpty (cm) {
return (cm.lineCount() === 1) && (cm.getLine(0) === '')
}
})
}
================================================
FILE: src/components/split-pane/index.js
================================================
import Split from './split.vue'
export default Split
================================================
FILE: src/components/split-pane/index.less
================================================
@split-prefix-cls: ~"ivu-split";
@box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4);
@trigger-bar-background: rgba(23, 35, 61, 0.25);
@trigger-background: #F8F8F9;
@trigger-width: 6px;
@trigger-bar-width: 4px;
@trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2;
@trigger-bar-interval: 3px;
@trigger-bar-weight: 1px;
@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;
.@{split-prefix-cls}{
&-wrapper{
position: relative;
width: 100%;
height: 100%;
}
&-pane{
position: absolute;
&.left-pane, &.right-pane{
top: 0px;
bottom: 0px;
}
&.left-pane{
left: 0px;
}
&.right-pane{
right: 0px;
}
&.top-pane, &.bottom-pane{
left: 0px;
right: 0px;
}
&.top-pane{
top: 0px;
}
&.bottom-pane{
bottom: 0px;
}
}
&-trigger{
&-con{
position: absolute;
transform: translate(-50%, -50%);
z-index: 10;
}
&-bar-con{
position: absolute;
overflow: hidden;
&.vertical{
left: @trigger-bar-offset;
top: 50%;
height: @trigger-bar-con-height;
transform: translate(0, -50%);
}
&.horizontal{
left: 50%;
top: @trigger-bar-offset;
width: @trigger-bar-con-height;
transform: translate(-50%, 0);
}
}
&-vertical{
width: @trigger-width;
height: 100%;
background: @trigger-background;
box-shadow: @box-shadow;
cursor: col-resize;
.@{split-prefix-cls}-trigger-bar{
width: @trigger-bar-width;
height: 1px;
background: @trigger-bar-background;
float: left;
margin-top: @trigger-bar-interval;
}
}
&-horizontal{
height: @trigger-width;
width: 100%;
background: @trigger-background;
box-shadow: @box-shadow;
cursor: row-resize;
.@{split-prefix-cls}-trigger-bar{
height: @trigger-bar-width;
width: 1px;
background: @trigger-bar-background;
float: left;
margin-right: @trigger-bar-interval;
}
}
}
&-horizontal{
.@{split-prefix-cls}-trigger-con{
top: 50%;
height: 100%;
width: 0;
}
}
&-vertical{
.@{split-prefix-cls}-trigger-con{
left: 50%;
height: 0;
width: 100%;
}
}
.no-select{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
================================================
FILE: src/components/split-pane/split.vue
================================================
<template>
<div ref="outerWrapper" :class="wrapperClasses">
<div v-if="isHorizontal" :class="`${prefix}-horizontal`">
<div :style="{right: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'left-pane']"><slot name="left"/></div>
<div :class="`${prefix}-trigger-con`" :style="{left: `${offset}%`}" @mousedown="handleMousedown">
<slot name="trigger">
<trigger mode="vertical"/>
</slot>
</div>
<div :style="{left: `${offset}%`}" :class="[`${prefix}-pane`, 'right-pane']"><slot name="right"/></div>
</div>
<div v-else :class="`${prefix}-vertical`">
<div :style="{bottom: `${anotherOffset}%`}" :class="[`${prefix}-pane`, 'top-pane']"><slot name="top"/></div>
<div :class="`${prefix}-trigger-con`" :style="{top: `${offset}%`}" @mousedown="handleMousedown">
<slot name="trigger">
<trigger mode="horizontal"/>
</slot>
</div>
<div :style="{top: `${offset}%`}" :class="[`${prefix}-pane`, 'bottom-pane']"><slot name="bottom"/></div>
</div>
</div>
</template>
<script>
import { oneOf, on, off } from '@/libs/tools'
import Trigger from './trigger.vue'
export default {
name: 'SplitPane',
components: {
Trigger
},
props: {
value: {
type: [Number, String],
default: 0.5
},
mode: {
validator (value) {
return oneOf(value, ['horizontal', 'vertical'])
},
default: 'horizontal'
},
min: {
type: [Number, String],
default: '40px'
},
max: {
type: [Number, String],
default: '40px'
}
},
/**
* Events
* @on-move-start
* @on-moving 返回值：事件对象，但是在事件对象中加入了两个参数：atMin(当前是否在最小值处), atMax(当前是否在最大值处)
* @on-move-end
*/
data () {
return {
prefix: 'ivu-split',
offset: 0,
oldOffset: 0,
isMoving: false
}
},
computed: {
wrapperClasses () {
return [
`${this.prefix}-wrapper`,
this.isMoving ? 'no-select' : ''
]
},
isHorizontal () {
return this.mode === 'horizontal'
},
anotherOffset () {
return 100 - this.offset
},
valueIsPx () {
return typeof this.value === 'string'
},
offsetSize () {
return this.isHorizontal ? 'offsetWidth' : 'offsetHeight'
},
computedMin () {
return this.getComputedThresholdValue('min')
},
computedMax () {
return this.getComputedThresholdValue('max')
}
},
methods: {
px2percent (numerator, denominator) {
return parseFloat(numerator) / parseFloat(denominator)
},
getComputedThresholdValue (type) {
let size = this.$refs.outerWrapper[this.offsetSize]
if (this.valueIsPx) return typeof this[type] === 'string' ? this[type] : size * this[type]
else return typeof this[type] === 'string' ? this.px2percent(this[type], size) : this[type]
},
getMin (value1, value2) {
if (this.valueIsPx) return `${Math.min(parseFloat(value1), parseFloat(value2))}px`
else return Math.min(value1, value2)
},
getMax (value1, value2) {
if (this.valueIsPx) return `${Math.max(parseFloat(value1), parseFloat(value2))}px`
else return Math.max(value1, value2)
},
getAnotherOffset (value) {
let res = 0
if (this.valueIsPx) res = `${this.$refs.outerWrapper[this.offsetSize] - parseFloat(value)}px`
else res = 1 - value
return res
},
handleMove (e) {
let pageOffset = this.isHorizontal ? e.pageX : e.pageY
let offset = pageOffset - this.initOffset
let outerWidth = this.$refs.outerWrapper[this.offsetSize]
let value = this.valueIsPx ? `${parseFloat(this.oldOffset) + offset}px` : (this.px2percent(outerWidth * this.oldOffset + offset, outerWidth))
let anotherValue = this.getAnotherOffset(value)
if (parseFloat(value) <= parseFloat(this.computedMin)) value = this.getMax(value, this.computedMin)
if (parseFloat(anotherValue) <= parseFloat(this.computedMax)) value = this.getAnotherOffset(this.getMax(anotherValue, this.computedMax))
e.atMin = this.value === this.computedMin
e.atMax = this.valueIsPx ? this.getAnotherOffset(this.value) === this.computedMax : this.getAnotherOffset(this.value).toFixed(5) === this.computedMax.toFixed(5)
this.$emit('input', value)
this.$emit('on-moving', e)
},
handleUp () {
this.isMoving = false
off(document, 'mousemove', this.handleMove)
off(document, 'mouseup', this.handleUp)
this.$emit('on-move-end')
},
handleMousedown (e) {
this.initOffset = this.isHorizontal ? e.pageX : e.pageY
this.oldOffset = this.value
this.isMoving = true
on(document, 'mousemove', this.handleMove)
on(document, 'mouseup', this.handleUp)
this.$emit('on-move-start')
}
},
watch: {
value () {
this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100
}
},
mounted () {
this.$nextTick(() => {
this.offset = (this.valueIsPx ? this.px2percent(this.value, this.$refs.outerWrapper[this.offsetSize]) : this.value) * 10000 / 100
})
}
}
</script>
<style lang="less">
@import './index.less';
</style>
================================================
FILE: src/components/split-pane/trigger.vue
================================================
<template>
<div :class="classes">
<div :class="barConClasses">
<i :class="`${prefix}-bar`" v-once v-for="i in 8" :key="`trigger-${i}`"></i>
</div>
</div>
</template>
<script>
export default {
name: 'Trigger',
props: {
mode: String
},
data () {
return {
prefix: 'ivu-split-trigger',
initOffset: 0
}
},
computed: {
isVertical () {
return this.mode === 'vertical'
},
classes () {
return [
this.prefix,
this.isVertical ? `${this.prefix}-vertical` : `${this.prefix}-horizontal`
]
},
barConClasses () {
return [
`${this.prefix}-bar-con`,
this.isVertical ? 'vertical' : 'horizontal'
]
}
}
}
</script>
<style lang="less">
@import './index.less';
</style>
================================================
FILE: src/components/tables/edit.vue
================================================
<template>
<div class="tables-edit-outer">
<div v-if="!isEditting" class="tables-edit-con">
<span class="value-con">{{ value }}</span>
<Button v-if="editable" @click="startEdit" class="tables-edit-btn" style="padding: 2px 4px;" type="text"><Icon type="md-create"></Icon></Button>
</div>
<div v-else class="tables-editting-con">
<Input :value="value" @input="handleInput" class="tables-edit-input"/>
<Button @click="saveEdit" style="padding: 6px 4px;" type="text"><Icon type="md-checkmark"></Icon></Button>
<Button @click="canceltEdit" style="padding: 6px 4px;" type="text"><Icon type="md-close"></Icon></Button>
</div>
</div>
</template>
<script>
export default {
name: 'TablesEdit',
props: {
value: [String, Number],
edittingCellId: String,
params: Object,
editable: Boolean
},
computed: {
isEditting () {
return this.edittingCellId === `editting-${this.params.index}-${this.params.column.key}`
}
},
methods: {
handleInput (val) {
this.$emit('input', val)
},
startEdit () {
this.$emit('on-start-edit', this.params)
},
saveEdit () {
this.$emit('on-save-edit', this.params)
},
canceltEdit () {
this.$emit('on-cancel-edit', this.params)
}
}
}
</script>
<style lang="less">
.tables-edit-outer{
height: 100%;
.tables-edit-con{
position: relative;
height: 100%;
.value-con{
vertical-align: middle;
}
.tables-edit-btn{
position: absolute;
right: 10px;
top: 0;
display: none;
}
&:hover{
.tables-edit-btn{
display: inline-block;
}
}
}
.tables-editting-con{
.tables-edit-input{
width: ~"calc(100% - 60px)";
}
}
}
</style>
================================================
FILE: src/components/tables/handle-btns.js
================================================
const btns = {
delete: (h, params, vm) => {
return h('Poptip', {
props: {
confirm: true,
title: '你确定要删除吗?'
},
on: {
'on-ok': () => {
vm.$emit('on-delete', params)
vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
}
}
}, [
h('Button', {
props: {
type: 'text',
ghost: true
}
}, [
h('Icon', {
props: {
type: 'md-trash',
size: 18,
color: '#000000'
}
})
])
])
}
}
export default btns
================================================
FILE: src/components/tables/index.js
================================================
import Tables from './tables.vue'
export default Tables
================================================
FILE: src/components/tables/index.less
================================================
.search-con{
padding: 10px 0;
.search{
&-col{
display: inline-block;
width: 200px;
}
&-input{
display: inline-block;
width: 200px;
margin-left: 2px;
}
&-btn{
margin-left: 2px;
}
}
}
================================================
FILE: src/components/tables/tables.vue
================================================
<template>
<div>
<div v-if="searchable && searchPlace === 'top'" class="search-con search-con-top">
<Select v-model="searchKey" class="search-col">
<Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
</Select>
<Input @on-change="handleClear" clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
<Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/> 搜索</Button>
</div>
<Table
ref="tablesMain"
:data="insideTableData"
:columns="insideColumns"
:stripe="stripe"
:border="border"
:show-header="showHeader"
:width="width"
:height="height"
:loading="loading"
:disabled-hover="disabledHover"
:highlight-row="highlightRow"
:row-class-name="rowClassName"
:size="size"
:no-data-text="noDataText"
:no-filtered-data-text="noFilteredDataText"
@on-current-change="onCurrentChange"
@on-select="onSelect"
@on-select-cancel="onSelectCancel"
@on-select-all="onSelectAll"
@on-selection-change="onSelectionChange"
@on-sort-change="onSortChange"
@on-filter-change="onFilterChange"
@on-row-click="onRowClick"
@on-row-dblclick="onRowDblclick"
@on-expand="onExpand"
>
<slot name="header" slot="header"></slot>
<slot name="footer" slot="footer"></slot>
<slot name="loading" slot="loading"></slot>
</Table>
<div v-if="searchable && searchPlace === 'bottom'" class="search-con search-con-top">
<Select v-model="searchKey" class="search-col">
<Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
</Select>
<Input placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
<Button class="search-btn" type="primary"><Icon type="search"/> 搜索</Button>
</div>
<a id="hrefToExportTable" style="display: none;width: 0px;height: 0px;"></a>
</div>
</template>
<script>
import TablesEdit from './edit.vue'
import handleBtns from './handle-btns'
import './index.less'
export default {
name: 'Tables',
props: {
value: {
type: Array,
default () {
return []
}
},
columns: {
type: Array,
default () {
return []
}
},
size: String,
width: {
type: [Number, String]
},
height: {
type: [Number, String]
},
stripe: {
type: Boolean,
default: false
},
border: {
type: Boolean,
default: false
},
showHeader: {
type: Boolean,
default: true
},
highlightRow: {
type: Boolean,
default: false
},
rowClassName: {
type: Function,
default () {
return ''
}
},
context: {
type: Object
},
noDataText: {
type: String
},
noFilteredDataText: {
type: String
},
disabledHover: {
type: Boolean
},
loading: {
type: Boolean,
default: false
},
/**
* @description 全局设置是否可编辑
*/
editable: {
type: Boolean,
default: false
},
/**
* @description 是否可搜索
*/
searchable: {
type: Boolean,
default: false
},
/**
* @description 搜索控件所在位置，'top' / 'bottom'
*/
searchPlace: {
type: String,
default: 'top'
}
},
/**
* Events
* @on-start-edit 返回值 {Object} ：同iview中render函数中的params对象 { row, index, column }
* @on-cancel-edit 返回值 {Object} 同上
* @on-save-edit 返回值 {Object} ：除上面三个参数外，还有一个value: 修改后的数据
*/
data () {
return {
insideColumns: [],
insideTableData: [],
edittingCellId: '',
edittingText: '',
searchValue: '',
searchKey: ''
}
},
methods: {
suportEdit (item, index) {
item.render = (h, params) => {
return h(TablesEdit, {
props: {
params: params,
value: this.insideTableData[params.index][params.column.key],
edittingCellId: this.edittingCellId,
editable: this.editable
},
on: {
'input': val => {
this.edittingText = val
},
'on-start-edit': (params) => {
this.edittingCellId = `editting-${params.index}-${params.column.key}`
this.$emit('on-start-edit', params)
},
'on-cancel-edit': (params) => {
this.edittingCellId = ''
this.$emit('on-cancel-edit', params)
},
'on-save-edit': (params) => {
this.value[params.row.initRowIndex][params.column.key] = this.edittingText
this.$emit('input', this.value)
this.$emit('on-save-edit', Object.assign(params, { value: this.edittingText }))
this.edittingCellId = ''
}
}
})
}
return item
},
surportHandle (item) {
let options = item.options || []
let insideBtns = []
options.forEach(item => {
if (handleBtns[item]) insideBtns.push(handleBtns[item])
})
let btns = item.button ? [].concat(insideBtns, item.button) : insideBtns
item.render = (h, params) => {
params.tableData = this.value
return h('div', btns.map(item => item(h, params, this)))
}
return item
},
handleColumns (columns) {
this.insideColumns = columns.map((item, index) => {
let res = item
if (res.editable) res = this.suportEdit(res, index)
if (res.key === 'handle') res = this.surportHandle(res)
return res
})
},
setDefaultSearchKey () {
this.searchKey = this.columns[0].key !== 'handle' ? this.columns[0].key : (this.columns.length > 1 ? this.columns[1].key : '')
},
handleClear (e) {
if (e.target.value === '') this.insideTableData = this.value
},
handleSearch () {
this.insideTableData = this.value.filter(item => item[this.searchKey].indexOf(this.searchValue) > -1)
},
handleTableData () {
this.insideTableData = this.value.map((item, index) => {
let res = item
res.initRowIndex = index
return res
})
},
exportCsv (params) {
this.$refs.tablesMain.exportCsv(params)
},
clearCurrentRow () {
this.$refs.talbesMain.clearCurrentRow()
},
onCurrentChange (currentRow, oldCurrentRow) {
this.$emit('on-current-change', currentRow, oldCurrentRow)
},
onSelect (selection, row) {
this.$emit('on-select', selection, row)
},
onSelectCancel (selection, row) {
this.$emit('on-select-cancel', selection, row)
},
onSelectAll (selection) {
this.$emit('on-select-all', selection)
},
onSelectionChange (selection) {
this.$emit('on-selection-change', selection)
},
onSortChange (column, key, order) {
this.$emit('on-sort-change', column, key, order)
},
onFilterChange (row) {
this.$emit('on-filter-change', row)
},
onRowClick (row, index) {
this.$emit('on-row-click', row, index)
},
onRowDblclick (row, index) {
this.$emit('on-row-dblclick', row, index)
},
onExpand (row, status) {
this.$emit('on-expand', row, status)
}
},
watch: {
columns (columns) {
this.handleColumns(columns)
this.setDefaultSearchKey()
},
value (val) {
this.handleTableData()
if (this.searchable) this.handleSearch()
}
},
mounted () {
this.handleColumns(this.columns)
this.setDefaultSearchKey()
this.handleTableData()
}
}
</script>
================================================
FILE: src/components/tree-select/index.js
================================================
export { default } from './tree-select.vue'
================================================
FILE: src/components/tree-select/tree-select-tree.vue
================================================
<template>
<Tree
:data="data"
@on-check-change="handleCheckSelect"
v-on="parent.$listeners"
v-bind="parent.$attrs"
:load-data="loadDataCallback"
show-checkbox
></Tree>
</template>
<script>
import Emitter from 'iview/src/mixins/emitter.js'
const arrayEqual = (arr1, arr2) => {
// 判断数组的长度
if (arr1.length !== arr2.length) {
return false
} else {
// 循环遍历数组的值进行比较
for (let i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) {
return false
}
}
return true
}
}
export default {
name: 'TreeSelectTree',
mixins: [Emitter],
props: {
data: {
type: Array,
default: () => []
},
selectedArray: {
type: Array,
default: () => []
},
loadData: Function
},
data () {
return {
flatDic: {},
checkedArray: []
}
},
inject: ['parent'],
computed: {
expandAll () {
return this.parent.$attrs['expand-all']
}
},
watch: {
data (newData, oldVal) {
this.updateFlagDic(newData)
let selectArray = []
this.selectedArray.forEach(id => {
if (id in this.flatDic) selectArray.push(id)
})
this.$emit('on-check', selectArray.map(id => this.flatDic[id]))
if (this.expandAll) this.checkData(newData, false, true)
},
selectedArray (newVal, oldVal) {
if (arrayEqual(newVal, oldVal)) return
const filtedNewVal = newVal.filter(id => id in this.flatDic)
this.$emit('on-check', filtedNewVal.map(id => this.flatDic[id]))
this.$emit('on-clear')
this.$nextTick(() => {
this.checkData(this.data, true)
})
}
},
methods: {
checkEmit (value, label) {
this.dispatch('iSelect', 'on-select-selected', {
value,
label
})
this.$emit('on-select-selected', {
value,
label
})
},
updateFlagDic (newData) {
let newFlagDic = {}
this.setFlagDic(newData, item => {
newFlagDic[item.id] = item
})
this.flatDic = newFlagDic
},
setFlagDic (data, callback) {
data.forEach(item => {
if (item.children && item.children.length) { this.setFlagDic(item.children, callback) }
callback(item)
})
},
handleCheckSelect (selectArray, selectItem) {
this.$emit('on-check', selectArray)
this.parent.$emit('on-change', selectArray)
},
checkData (data, emit, expandAll) {
data.forEach(item => {
if (this.selectedArray.includes(item.id)) {
this.$set(item, 'checked', true)
this.checkedArray.push(item)
if (emit) this.checkEmit(item.id, item.title)
} else this.$set(item, 'checked', false)
if (item.children && item.children.length) {
if (this.expandAll && expandAll) this.$set(item, 'expand', true)
this.checkData(item.children, emit, expandAll)
}
})
},
loadDataCallback (item, callback) {
this.loadData(item, data => {
return (() => {
callback(data)
this.updateFlagDic(this.data)
})(data)
})
}
},
mounted () {
this.checkData(this.data, false, true)
this.$nextTick(() => {
this.$emit('on-check', this.checkedArray)
})
}
}
</script>
<style></style>
================================================
FILE: src/components/tree-select/tree-select.vue
================================================
<template>
<Select
ref="select"
class="tree-select"
v-bind="$attrs"
@on-change="handleChange"
multiple
>
<tree-select-tree-item
:selectedArray="value"
:data="data"
@on-clear="handleClear"
:load-data="loadData"
@on-check="handleTreeCheck"
></tree-select-tree-item>
</Select>
</template>
<script>
import Emitter from 'iview/src/mixins/emitter'
import TreeSelectTreeItem from './tree-select-tree.vue'
export default {
name: 'TreeSelect',
mixins: [Emitter],
components: {
TreeSelectTreeItem
},
props: {
value: {
type: Array,
default: () => []
},
data: {
type: Array,
default: () => []
},
loadData: Function
},
data () {
return {
isChangedByTree: true,
isInit: true
}
},
provide () {
return {
parent: this
}
},
methods: {
handleChange (selected) {
if (!this.isChangedByTree) this.$emit('input', selected)
this.isChangedByTree = false
},
handleTreeCheck (selectedArray) {
this.isChangedByTree = true
this.$emit('input', selectedArray.map(item => item.id))
},
handleClear () {
this.$refs.select.reset()
}
}
}
</script>
<style lang="less">
.tree-select {
.ivu-select-dropdown {
padding: 0 6px;
}
}
</style>
================================================
FILE: src/config/index.js
================================================
export default {
/**
* @description 配置显示在浏览器标签的title
*/
title: 'iView-admin',
/**
* @description token在Cookie中存储的天数，默认1天
*/
cookieExpires: 1,
/**
* @description 是否使用国际化，默认为false
* 如果不使用，则需要在路由中给需要在菜单中展示的路由设置meta: {title: 'xxx'}
* 用来在菜单中显示文字
*/
useI18n: true,
/**
* @description api请求基础路径
*/
baseUrl: {
dev: 'https://www.easy-mock.com/mock/5add9213ce4d0e69998a6f51/iview-admin/',
pro: 'https://produce.com'
},
/**
* @description 默认打开的首页的路由name值，默认为home
*/
homeName: 'home',
/**
* @description 需要加载的插件
*/
plugin: {
'error-store': {
showInHeader: true, // 设为false后不会在顶部显示错误日志徽标
developmentOff: true // 设为true后在开发环境不会收集错误信息，方便开发中排查错误
}
}
}
================================================
FILE: src/directive/directives.js
================================================
import draggable from './module/draggable'
import clipboard from './module/clipboard'
const directives = {
draggable,
clipboard
}
export default directives
================================================
FILE: src/directive/index.js
================================================
import directive from './directives'
const importDirective = Vue => {
/**
* 拖拽指令 v-draggable="options"
* options = {
* trigger: /这里传入作为拖拽触发器的CSS选择器/,
* body: /这里传入需要移动容器的CSS选择器/,
* recover: /拖动结束之后是否恢复到原来的位置/
* }
*/
Vue.directive('draggable', directive.draggable)
/**
* clipboard指令 v-draggable="options"
* options = {
* value: /在输入框中使用v-model绑定的值/,
* success: /复制成功后的回调/,
* error: /复制失败后的回调/
* }
*/
Vue.directive('clipboard', directive.clipboard)
}
export default importDirective
================================================
FILE: src/directive/module/clipboard.js
================================================
import Clipboard from 'clipboard'
export default {
bind: (el, binding) => {
const clipboard = new Clipboard(el, {
text: () => binding.value.value
})
el.__success_callback__ = binding.value.success
el.__error_callback__ = binding.value.error
clipboard.on('success', e => {
const callback = el.__success_callback__
callback && callback(e)
})
clipboard.on('error', e => {
const callback = el.__error_callback__
callback && callback(e)
})
el.__clipboard__ = clipboard
},
update: (el, binding) => {
el.__clipboard__.text = () => binding.value.value
el.__success_callback__ = binding.value.success
el.__error_callback__ = binding.value.error
},
unbind: (el, binding) => {
delete el.__success_callback__
delete el.__error_callback__
el.__clipboard__.destroy()
delete el.__clipboard__
}
}
================================================
FILE: src/directive/module/draggable.js
================================================
import { on } from '@/libs/tools'
export default {
inserted: (el, binding, vnode) => {
let triggerDom = document.querySelector(binding.value.trigger)
triggerDom.style.cursor = 'move'
let bodyDom = document.querySelector(binding.value.body)
let pageX = 0
let pageY = 0
let transformX = 0
let transformY = 0
let canMove = false
const handleMousedown = e => {
let transform = /\(.*\)/.exec(bodyDom.style.transform)
if (transform) {
transform = transform[0].slice(1, transform[0].length - 1)
let splitxy = transform.split('px, ')
transformX = parseFloat(splitxy[0])
transformY = parseFloat(splitxy[1].split('px')[0])
}
pageX = e.pageX
pageY = e.pageY
canMove = true
}
const handleMousemove = e => {
let xOffset = e.pageX - pageX + transformX
let yOffset = e.pageY - pageY + transformY
if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
}
const handleMouseup = e => {
canMove = false
}
on(triggerDom, 'mousedown', handleMousedown)
on(document, 'mousemove', handleMousemove)
on(document, 'mouseup', handleMouseup)
},
update: (el, binding, vnode) => {
if (!binding.value.recover) return
let bodyDom = document.querySelector(binding.value.body)
bodyDom.style.transform = ''
}
}
================================================
FILE: src/index.less
================================================
@import '~iview/src/styles/index.less';
@menu-dark-title: #001529;
@menu-dark-active-bg: #000c17;
@layout-sider-background: #001529;
================================================
FILE: src/libs/api.request.js
================================================
import HttpRequest from '@/libs/axios'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const axios = new HttpRequest(baseUrl)
export default axios
================================================
FILE: src/libs/axios.js
================================================
import axios from 'axios'
import store from '@/store'
// import { Spin } from 'iview'
const addErrorLog = errorInfo => {
const { statusText, status, request: { responseURL } } = errorInfo
let info = {
type: 'ajax',
code: status,
mes: statusText,
url: responseURL
}
if (!responseURL.includes('save_error_logger')) store.dispatch('addErrorLog', info)
}
class HttpRequest {
constructor (baseUrl = baseURL) {
this.baseUrl = baseUrl
this.queue = {}
}
getInsideConfig () {
const config = {
baseURL: this.baseUrl,
headers: {
//
}
}
return config
}
destroy (url) {
delete this.queue[url]
if (!Object.keys(this.queue).length) {
// Spin.hide()
}
}
interceptors (instance, url) {
// 请求拦截
instance.interceptors.request.use(config => {
// 添加全局的loading...
if (!Object.keys(this.queue).length) {
// Spin.show() // 不建议开启，因为界面不友好
}
this.queue[url] = true
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截
instance.interceptors.response.use(res => {
this.destroy(url)
const { data, status } = res
return { data, status }
}, error => {
this.destroy(url)
let errorInfo = error.response
if (!errorInfo) {
const { request: { statusText, status }, config } = JSON.parse(JSON.stringify(error))
errorInfo = {
statusText,
status,
request: { responseURL: config.url }
}
}
addErrorLog(errorInfo)
return Promise.reject(error)
})
}
request (options) {
const instance = axios.create()
options = Object.assign(this.getInsideConfig(), options)
this.interceptors(instance, options.url)
return instance(options)
}
}
export default HttpRequest
================================================
FILE: src/libs/excel.js
================================================
/* eslint-disable */
import XLSX from 'xlsx';
function auto_width(ws, data){
/*set worksheet max width per col*/
const colWidth = data.map(row => row.map(val => {
/*if null/undefined*/
if (val == null) {
return {'wch': 10};
}
/*if chinese*/
else if (val.toString().charCodeAt(0) > 255) {
return {'wch': val.toString().length * 2};
} else {
return {'wch': val.toString().length};
}
}))
/*start in the first row*/
let result = colWidth[0];
for (let i = 1; i < colWidth.length; i++) {
for (let j = 0; j < colWidth[i].length; j++) {
if (result[j]['wch'] < colWidth[i][j]['wch']) {
result[j]['wch'] = colWidth[i][j]['wch'];
}
}
}
ws['!cols'] = result;
}
function json_to_array(key, jsonData){
return jsonData.map(v => key.map(j => { return v[j] }));
}
// fix data,return string
function fixdata(data) {
let o = ''
let l = 0
const w = 10240
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
return o
}
// get head from excel file,return array
function get_header_row(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r /* start in the first row */
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
}
export const export_table_to_excel= (id, filename) => {
const table = document.getElementById(id);
const wb = XLSX.utils.table_to_book(table);
XLSX.writeFile(wb, filename);
/* the second way */
// const table = document.getElementById(id);
// const wb = XLSX.utils.book_new();
// const ws = XLSX.utils.table_to_sheet(table);
// XLSX.utils.book_append_sheet(wb, ws, filename);
// XLSX.writeFile(wb, filename);
}
export const export_json_to_excel = ({data, key, title, filename, autoWidth}) => {
const wb = XLSX.utils.book_new();
data.unshift(title);
const ws = XLSX.utils.json_to_sheet(data, {header: key, skipHeader: true});
if(autoWidth){
const arr = json_to_array(key, data);
auto_width(ws, arr);
}
XLSX.utils.book_append_sheet(wb, ws, filename);
XLSX.writeFile(wb, filename + '.xlsx');
}
export const export_array_to_excel = ({key, data, title, filename, autoWidth}) => {
const wb = XLSX.utils.book_new();
const arr = json_to_array(key, data);
arr.unshift(title);
const ws = XLSX.utils.aoa_to_sheet(arr);
if(autoWidth){
auto_width(ws, arr);
}
XLSX.utils.book_append_sheet(wb, ws, filename);
XLSX.writeFile(wb, filename + '.xlsx');
}
export const read = (data, type) => {
/* if type == 'base64' must fix data first */
// const fixedData = fixdata(data)
// const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
const workbook = XLSX.read(data, { type: type });
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
const header = get_header_row(worksheet);
const results = XLSX.utils.sheet_to_json(worksheet);
return {header, results};
}
export default {
export_table_to_excel,
export_array_to_excel,
export_json_to_excel,
read
}
================================================
FILE: src/libs/render-dom.js
================================================
export default {
name: 'RenderDom',
functional: true,
props: {
render: Function
},
render: (h, ctx) => {
return ctx.props.render(h)
}
}
================================================
FILE: src/libs/tools.js
================================================
export const forEach = (arr, fn) => {
if (!arr.length || !fn) return
let i = -1
let len = arr.length
while (++i < len) {
let item = arr[i]
fn(item, i, arr)
}
}
/**
* @param {Array} arr1
* @param {Array} arr2
* @description 得到两个数组的交集, 两个数组的元素为数值或字符串
*/
export const getIntersection = (arr1, arr2) => {
let len = Math.min(arr1.length, arr2.length)
let i = -1
let res = []
while (++i < len) {
const item = arr2[i]
if (arr1.indexOf(item) > -1) res.push(item)
}
return res
}
/**
* @param {Array} arr1
* @param {Array} arr2
* @description 得到两个数组的并集, 两个数组的元素为数值或字符串
*/
export const getUnion = (arr1, arr2) => {
return Array.from(new Set([...arr1, ...arr2]))
}
/**
* @param {Array} target 目标数组
* @param {Array} arr 需要查询的数组
* @description 判断要查询的数组是否至少有一个元素包含在目标数组中
*/
export const hasOneOf = (targetarr, arr) => {
return targetarr.some(_ => arr.indexOf(_) > -1)
}
/**
* @param {String|Number} value 要验证的字符串或数值
* @param {*} validList 用来验证的列表
*/
export function oneOf (value, validList) {
for (let i = 0; i < validList.length; i++) {
if (value === validList[i]) {
return true
}
}
return false
}
/**
* @param {Number} timeStamp 判断时间戳格式是否是毫秒
* @returns {Boolean}
*/
const isMillisecond = timeStamp => {
const timeStr = String(timeStamp)
return timeStr.length > 10
}
/**
* @param {Number} timeStamp 传入的时间戳
* @param {Number} currentTime 当前时间时间戳
* @returns {Boolean} 传入的时间戳是否早于当前时间戳
*/
const isEarly = (timeStamp, currentTime) => {
return timeStamp < currentTime
}
/**
* @param {Number} num 数值
* @returns {String} 处理后的字符串
* @description 如果传入的数值小于10，即位数只有1位，则在前面补充0
*/
const getHandledValue = num => {
return num < 10 ? '0' + num : num
}
/**
* @param {Number} timeStamp 传入的时间戳
* @param {Number} startType 要返回的时间字符串的格式类型，传入'year'则返回年开头的完整时间
*/
const getDate = (timeStamp, startType) => {
const d = new Date(timeStamp * 1000)
const year = d.getFullYear()
const month = getHandledValue(d.getMonth() + 1)
const date = getHandledValue(d.getDate())
const hours = getHandledValue(d.getHours())
const minutes = getHandledValue(d.getMinutes())
const second = getHandledValue(d.getSeconds())
let resStr = ''
if (startType === 'year') resStr = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + second
else resStr = month + '-' + date + ' ' + hours + ':' + minutes
return resStr
}
/**
* @param {String|Number} timeStamp 时间戳
* @returns {String} 相对时间字符串
*/
export const getRelativeTime = timeStamp => {
// 判断当前传入的时间戳是秒格式还是毫秒
const IS_MILLISECOND = isMillisecond(timeStamp)
// 如果是毫秒格式则转为秒格式
if (IS_MILLISECOND) Math.floor(timeStamp /= 1000)
// 传入的时间戳可以是数值或字符串类型，这里统一转为数值类型
timeStamp = Number(timeStamp)
// 获取当前时间时间戳
const currentTime = Math.floor(Date.parse(new Date()) / 1000)
// 判断传入时间戳是否早于当前时间戳
const IS_EARLY = isEarly(timeStamp, currentTime)
// 获取两个时间戳差值
let diff = currentTime - timeStamp
// 如果IS_EARLY为false则差值取反
if (!IS_EARLY) diff = -diff
let resStr = ''
const dirStr = IS_EARLY ? '前' : '后'
// 少于等于59秒
if (diff <= 59) resStr = diff + '秒' + dirStr
// 多于59秒，少于等于59分钟59秒
else if (diff > 59 && diff <= 3599) resStr = Math.floor(diff / 60) + '分钟' + dirStr
// 多于59分钟59秒，少于等于23小时59分钟59秒
else if (diff > 3599 && diff <= 86399) resStr = Math.floor(diff / 3600) + '小时' + dirStr
// 多于23小时59分钟59秒，少于等于29天59分钟59秒
else if (diff > 86399 && diff <= 2623859) resStr = Math.floor(diff / 86400) + '天' + dirStr
// 多于29天59分钟59秒，少于364天23小时59分钟59秒，且传入的时间戳早于当前
else if (diff > 2623859 && diff <= 31567859 && IS_EARLY) resStr = getDate(timeStamp)
else resStr = getDate(timeStamp, 'year')
return resStr
}
/**
* @returns {String} 当前浏览器名称
*/
export const getExplorer = () => {
const ua = window.navigator.userAgent
const isExplorer = (exp) => {
return ua.indexOf(exp) > -1
}
if (isExplorer('MSIE')) return 'IE'
else if (isExplorer('Firefox')) return 'Firefox'
else if (isExplorer('Chrome')) return 'Chrome'
else if (isExplorer('Opera')) return 'Opera'
else if (isExplorer('Safari')) return 'Safari'
}
/**
* @description 绑定事件 on(element, event, handler)
*/
export const on = (function () {
if (document.addEventListener) {
return function (element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false)
}
}
} else {
return function (element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler)
}
}
}
})()
/**
* @description 解绑事件 off(element, event, handler)
*/
export const off = (function () {
if (document.removeEventListener) {
return function (element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false)
}
}
} else {
return function (element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler)
}
}
}
})()
/**
* 判断一个对象是否存在key，如果传入第二个参数key，则是判断这个obj对象是否存在key这个属性
* 如果没有传入key这个参数，则判断obj对象是否有键值对
*/
export const hasKey = (obj, key) => {
if (key) return key in obj
else {
let keysArr = Object.keys(obj)
return keysArr.length
}
}
/**
* @param {*} obj1 对象
* @param {*} obj2 对象
* @description 判断两个对象是否相等，这两个对象的值只能是数字或字符串
*/
export const objEqual = (obj1, obj2) => {
const keysArr1 = Object.keys(obj1)
const keysArr2 = Object.keys(obj2)
if (keysArr1.length !== keysArr2.length) return false
else if (keysArr1.length === 0 && keysArr2.length === 0) return true
/* eslint-disable-next-line */
else return !keysArr1.some(key => obj1[key] != obj2[key])
}
================================================
FILE: src/libs/util.js
================================================
import Cookies from 'js-cookie'
// cookie保存的天数
import config from '@/config'
import { forEach, hasOneOf, objEqual } from '@/libs/tools'
const { title, cookieExpires, useI18n } = config
export const TOKEN_KEY = 'token'
export const setToken = (token) => {
Cookies.set(TOKEN_KEY, token, { expires: cookieExpires || 1 })
}
export const getToken = () => {
const token = Cookies.get(TOKEN_KEY)
if (token) return token
else return false
}
export const hasChild = (item) => {
return item.children && item.children.length !== 0
}
const showThisMenuEle = (item, access) => {
if (item.meta && item.meta.access && item.meta.access.length) {
if (hasOneOf(item.meta.access, access)) return true
else return false
} else return true
}
/**
* @param {Array} list 通过路由列表得到菜单列表
* @returns {Array}
*/
export const getMenuByRouter = (list, access) => {
let res = []
forEach(list, item => {
if (!item.meta || (item.meta && !item.meta.hideInMenu)) {
let obj = {
icon: (item.meta && item.meta.icon) || '',
name: item.name,
meta: item.meta
}
if ((hasChild(item) || (item.meta && item.meta.showAlways)) && showThisMenuEle(item, access)) {
obj.children = getMenuByRouter(item.children, access)
}
if (item.meta && item.meta.href) obj.href = item.meta.href
if (showThisMenuEle(item, access)) res.push(obj)
}
})
return res
}
/**
* @param {Array} routeMetched 当前路由metched
* @returns {Array}
*/
export const getBreadCrumbList = (route, homeRoute) => {
let homeItem = { ...homeRoute, icon: homeRoute.meta.icon }
let routeMetched = route.matched
if (routeMetched.some(item => item.name === homeRoute.name)) return [homeItem]
let res = routeMetched.filter(item => {
return item.meta === undefined || !item.meta.hideInBread
}).map(item => {
let meta = { ...item.meta }
if (meta.title && typeof meta.title === 'function') {
meta.__titleIsFunction__ = true
meta.title = meta.title(route)
}
let obj = {
icon: (item.meta && item.meta.icon) || '',
name: item.name,
meta: meta
}
return obj
})
res = res.filter(item => {
return !item.meta.hideInMenu
})
return [{ ...homeItem, to: homeRoute.path }, ...res]
}
export const getRouteTitleHandled = (route) => {
let router = { ...route }
let meta = { ...route.meta }
let title = ''
if (meta.title) {
if (typeof meta.title === 'function') {
meta.__titleIsFunction__ = true
title = meta.title(router)
} else title = meta.title
}
meta.title = title
router.meta = meta
return router
}
export const showTitle = (item, vm) => {
let { title, __titleIsFunction__ } = item.meta
if (!title) return
if (useI18n) {
if (title.includes('{{') && title.includes('}}') && useI18n) title = title.replace(/({{[\s\S]+?}})/, (m, str) => str.replace(/{{([\s\S]*)}}/, (m, _) => vm.$t(_.trim())))
else if (__titleIsFunction__) title = item.meta.title
else title = vm.$t(item.name)
} else title = (item.meta && item.meta.title) || item.name
return title
}
/**
* @description 本地存储和获取标签导航列表
*/
export const setTagNavListInLocalstorage = list => {
localStorage.tagNaveList = JSON.stringify(list)
}
/**
* @returns {Array} 其中的每个元素只包含路由原信息中的name, path, meta三项
*/
export const getTagNavListFromLocalstorage = () => {
const list = localStorage.tagNaveList
return list ? JSON.parse(list) : []
}
/**
* @param {Array} routers 路由列表数组
* @description 用于找到路由列表中name为home的对象
*/
export const getHomeRoute = (routers, homeName = 'home') => {
let i = -1
let len = routers.length
let homeRoute = {}
while (++i < len) {
let item = routers[i]
if (item.children && item.children.length) {
let res = getHomeRoute(item.children, homeName)
if (res.name) return res
} else {
if (item.name === homeName) homeRoute = item
}
}
return homeRoute
}
/**
* @param {*} list 现有标签导航列表
* @param {*} newRoute 新添加的路由原信息对象
* @description 如果该newRoute已经存在则不再添加
*/
export const getNewTagList = (list, newRoute) => {
const { name, path, meta } = newRoute
let newList = [...list]
if (newList.findIndex(item => item.name === name) >= 0) return newList
else newList.push({ name, path, meta })
return newList
}
/**
* @param {*} access 用户权限数组，如 ['super_admin', 'admin']
* @param {*} route 路由列表
*/
const hasAccess = (access, route) => {
if (route.meta && route.meta.access) return hasOneOf(access, route.meta.access)
else return true
}
/**
* 权鉴
* @param {*} name 即将跳转的路由name
* @param {*} access 用户权限数组
* @param {*} routes 路由列表
* @description 用户是否可跳转到该页
*/
export const canTurnTo = (name, access, routes) => {
const routePermissionJudge = (list) => {
return list.some(item => {
if (item.children && item.children.length) {
return routePermissionJudge(item.children)
} else if (item.name === name) {
return hasAccess(access, item)
}
})
}
return routePermissionJudge(routes)
}
/**
* @param {String} url
* @description 从URL中解析参数
*/
export const getParams = url => {
const keyValueArr = url.split('?')[1].split('&')
let paramObj = {}
keyValueArr.forEach(item => {
const keyValue = item.split('=')
paramObj[keyValue[0]] = keyValue[1]
})
return paramObj
}
/**
* @param {Array} list 标签列表
* @param {String} name 当前关闭的标签的name
*/
export const getNextRoute = (list, route) => {
let res = {}
if (list.length === 2) {
res = getHomeRoute(list)
} else {
const index = list.findIndex(item => routeEqual(item, route))
if (index === list.length - 1) res = list[list.length - 2]
else res = list[index + 1]
}
return res
}
/**
* @param {Number} times 回调函数需要执行的次数
* @param {Function} callback 回调函数
*/
export const doCustomTimes = (times, callback) => {
let i = -1
while (++i < times) {
callback(i)
}
}
/**
* @param {Object} file 从上传组件得到的文件对象
* @returns {Promise} resolve参数是解析后的二维数组
* @description 从Csv文件中解析出表格，解析成二维数组
*/
export const getArrayFromFile = (file) => {
let nameSplit = file.name.split('.')
let format = nameSplit[nameSplit.length - 1]
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.readAsText(file) // 以文本格式读取
let arr = []
reader.onload = function (evt) {
let data = evt.target.result // 读到的数据
let pasteData = data.trim()
arr = pasteData.split((/[\n\u0085\u2028\u2029]|\r\n?/g)).map(row => {
return row.split('\t')
}).map(item => {
return item[0].split(',')
})
if (format === 'csv') resolve(arr)
else reject(new Error('[Format Error]:你上传的不是Csv文件'))
}
})
}
/**
* @param {Array} array 表格数据二维数组
* @returns {Object} { columns, tableData }
* @description 从二维数组中获取表头和表格数据，将第一行作为表头，用于在iView的表格中展示数据
*/
export const getTableDataFromArray = (array) => {
let columns = []
let tableData = []
if (array.length > 1) {
let titles = array.shift()
columns = titles.map(item => {
return {
title: item,
key: item
}
})
tableData = array.map(item => {
let res = {}
item.forEach((col, i) => {
res[titles[i]] = col
})
return res
})
}
return {
columns,
tableData
}
}
export const findNodeUpper = (ele, tag) => {
if (ele.parentNode) {
if (ele.parentNode.tagName === tag.toUpperCase()) {
return ele.parentNode
} else {
return findNodeUpper(ele.parentNode, tag)
}
}
}
export const findNodeUpperByClasses = (ele, classes) => {
let parentNode = ele.parentNode
if (parentNode) {
let classList = parentNode.classList
if (classList && classes.every(className => classList.contains(className))) {
return parentNode
} else {
return findNodeUpperByClasses(parentNode, classes)
}
}
}
export const findNodeDownward = (ele, tag) => {
const tagName = tag.toUpperCase()
if (ele.childNodes.length) {
let i = -1
let len = ele.childNodes.length
while (++i < len) {
let child = ele.childNodes[i]
if (child.tagName === tagName) return child
else return findNodeDownward(child, tag)
}
}
}
export const showByAccess = (access, canViewAccess) => {
return hasOneOf(canViewAccess, access)
}
/**
* @description 根据name/params/query判断两个路由对象是否相等
* @param {*} route1 路由对象
* @param {*} route2 路由对象
*/
export const routeEqual = (route1, route2) => {
const params1 = route1.params || {}
const params2 = route2.params || {}
const query1 = route1.query || {}
const query2 = route2.query || {}
return (route1.name === route2.name) && objEqual(params1, params2) && objEqual(query1, query2)
}
/**
* 判断打开的标签列表里是否已存在这个新添加的路由对象
*/
export const routeHasExist = (tagNavList, routeItem) => {
let len = tagNavList.length
let res = false
doCustomTimes(len, (index) => {
if (routeEqual(tagNavList[index], routeItem)) res = true
})
return res
}
export const localSave = (key, value) => {
localStorage.setItem(key, value)
}
export const localRead = (key) => {
return localStorage.getItem(key) || ''
}
// scrollTop animation
export const scrollTop = (el, from = 0, to, duration = 500, endCallback) => {
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 1000 / 60)
}
)
}
const difference = Math.abs(from - to)
const step = Math.ceil(difference / duration * 50)
const scroll = (start, end, step) => {
if (start === end) {
endCallback && endCallback()
return
}
let d = (start + step > end) ? end : start + step
if (start > end) {
d = (start - step < end) ? end : start - step
}
if (el === window) {
window.scrollTo(d, d)
} else {
el.scrollTop = d
}
window.requestAnimationFrame(() => scroll(d, end, step))
}
scroll(from, to, step)
}
/**
* @description 根据当前跳转的路由设置显示在浏览器标签的title
* @param {Object} routeItem 路由对象
* @param {Object} vm Vue实例
*/
export const setTitle = (routeItem, vm) => {
const handledRoute = getRouteTitleHandled(routeItem)
const pageTitle = showTitle(handledRoute, vm)
const resTitle = pageTitle ? `${title} - ${pageTitle}` : title
window.document.title = resTitle
}
================================================
FILE: src/locale/index.js
================================================
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { localRead } from '@/libs/util'
import customZhCn from './lang/zh-CN'
import customZhTw from './lang/zh-TW'
import customEnUs from './lang/en-US'
import zhCnLocale from 'iview/src/locale/lang/zh-CN'
import enUsLocale from 'iview/src/locale/lang/en-US'
import zhTwLocale from 'iview/src/locale/lang/zh-TW'
Vue.use(VueI18n)
// 自动根据浏览器系统语言设置语言
const navLang = navigator.language
const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false
let lang = localLang || localRead('local') || 'zh-CN'
Vue.config.lang = lang
// vue-i18n 6.x+写法
Vue.locale = () => {}
const messages = {
'zh-CN': Object.assign(zhCnLocale, customZhCn),
'zh-TW': Object.assign(zhTwLocale, customZhTw),
'en-US': Object.assign(enUsLocale, customEnUs)
}
const i18n = new VueI18n({
locale: lang,
messages
})
export default i18n
// vue-i18n 5.x写法
// Vue.locale('zh-CN', Object.assign(zhCnLocale, customZhCn))
// Vue.locale('en-US', Object.assign(zhTwLocale, customZhTw))
// Vue.locale('zh-TW', Object.assign(enUsLocale, customEnUs))
================================================
FILE: src/locale/lang/en-US.js
================================================
export default {
home: 'Home',
login: 'Login',
components: 'Components',
count_to_page: 'Count-to',
tables_page: 'Table',
split_pane_page: 'Split-pane',
markdown_page: 'Markdown-editor',
editor_page: 'Rich-Text-Editor',
icons_page: 'Custom-icon',
img_cropper_page: 'Image-editor',
update: 'Update',
doc: 'Document',
join_page: 'QQ Group',
update_table_page: 'Update .CSV',
update_paste_page: 'Paste Table Data',
multilevel: 'multilevel',
directive_page: 'Directive',
level_1: 'Level-1',
level_2: 'Level-2',
level_2_1: 'Level-2-1',
level_2_3: 'Level-2-3',
level_2_2: 'Level-2-2',
level_2_2_1: 'Level-2-2-1',
level_2_2_2: 'Level-2-2-2',
excel: 'Excel',
'upload-excel': 'Upload Excel',
'export-excel': 'Export Excel',
tools_methods_page: 'Tools Methods',
drag_list_page: 'Drag-list',
i18n_page: 'Internationalization',
modalTitle: 'Modal Title',
content: 'This is the modal box content.',
buttonText: 'Show Modal',
'i18n-tip': 'Note: Only this page is multi-language, other pages do not add language content to the multi-language package.',
error_store_page: 'Error Collection',
error_logger_page: 'Error Logger',
query: 'Query',
params: 'Params',
cropper_page: 'Cropper',
message_page: 'Message Center',
tree_table_page: 'Tree Table',
org_tree_page: 'Org Tree',
drag_drawer_page: 'Draggable Drawer',
tree_select_page: 'Tree Selector'
}
================================================
FILE: src/locale/lang/zh-CN.js
================================================
export default {
home: '首页',
login: '登录',
components: '组件',
count_to_page: '数字渐变',
tables_page: '多功能表格',
split_pane_page: '分割窗口',
markdown_page: 'Markdown编辑器',
editor_page: '富文本编辑器',
icons_page: '自定义图标',
img_cropper_page: '图片编辑器',
update: '上传数据',
join_page: 'QQ群',
doc: '文档',
update_table_page: '上传CSV文件',
update_paste_page: '粘贴表格数据',
multilevel: '多级菜单',
directive_page: '指令',
level_1: 'Level-1',
level_2: 'Level-2',
level_2_1: 'Level-2-1',
level_2_3: 'Level-2-3',
level_2_2: 'Level-2-2',
level_2_2_1: 'Level-2-2-1',
level_2_2_2: 'Level-2-2-2',
excel: 'Excel',
'upload-excel': '上传excel',
'export-excel': '导出excel',
tools_methods_page: '工具函数',
drag_list_page: '拖拽列表',
i18n_page: '多语言',
modalTitle: '模态框题目',
content: '这是模态框内容',
buttonText: '显示模态框',
'i18n-tip': '注：仅此页做了多语言，其他页面没有在多语言包中添加语言内容',
error_store_page: '错误收集',
error_logger_page: '错误日志',
query: '带参路由',
params: '动态路由',
cropper_page: '图片裁剪',
message_page: '消息中心',
tree_table_page: '树状表格',
org_tree_page: '组织结构树',
drag_drawer_page: '可拖动抽屉',
tree_select_page: '树状下拉选择器'
}
================================================
FILE: src/locale/lang/zh-TW.js
================================================
export default {
home: '首頁',
login: '登錄',
components: '组件',
count_to_page: '数字渐变',
tables_page: '多功能表格',
split_pane_page: '分割窗口',
markdown_page: 'Markdown編輯器',
editor_page: '富文本編輯器',
icons_page: '自定義圖標',
img_cropper_page: '圖片編輯器',
update: '上傳數據',
join_page: 'QQ群',
doc: '文檔',
update_table_page: '上傳CSV文件',
update_paste_page: '粘貼表格數據',
multilevel: '多级菜单',
directive_page: '指令',
level_1: 'Level-1',
level_2: 'Level-2',
level_2_1: 'Level-2-1',
level_2_3: 'Level-2-3',
level_2_2: 'Level-2-2',
level_2_2_1: 'Level-2-2-1',
level_2_2_2: 'Level-2-2-2',
excel: 'Excel',
'upload-excel': '上傳excel',
'export-excel': '導出excel',
tools_methods_page: '工具函數',
drag_list_page: '拖拽列表',
i18n_page: '多語言',
modalTitle: '模態框題目',
content: '這是模態框內容',
buttonText: '顯示模態框',
'i18n-tip': '注：僅此頁做了多語言，其他頁面沒有在多語言包中添加語言內容',
error_store_page: '錯誤收集',
error_logger_page: '錯誤日誌',
query: '帶參路由',
params: '動態路由',
cropper_page: '圖片裁剪',
message_page: '消息中心',
tree_table_page: '樹狀表格',
org_tree_page: '組織結構樹',
drag_drawer_page: '可拖動抽屜',
tree_select_page: '樹狀下拉選擇器'
}
================================================
FILE: src/main.js
================================================
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import iView from 'iview'
import i18n from '@/locale'
import config from '@/config'
import importDirective from '@/directive'
import { directive as clickOutside } from 'v-click-outside-x'
import installPlugin from '@/plugin'
import './index.less'
import '@/assets/icons/iconfont.css'
import TreeTable from 'tree-table-vue'
import VOrgTree from 'v-org-tree'
import 'v-org-tree/dist/v-org-tree.css'
// 实际打包时应该不引入mock
/* eslint-disable */
if (process.env.NODE_ENV !== 'production') require('@/mock')
Vue.use(iView, {
i18n: (key, value) => i18n.t(key, value)
})
Vue.use(TreeTable)
Vue.use(VOrgTree)
/**
* @description 注册admin内置插件
*/
installPlugin(Vue)
/**
* @description 生产环境关掉提示
*/
Vue.config.productionTip = false
/**
* @description 全局注册应用配置
*/
Vue.prototype.$config = config
/**
* 注册指令
*/
importDirective(Vue)
Vue.directive('clickOutside', clickOutside)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
i18n,
store,
render: h => h(App)
})
================================================
FILE: src/mock/data/org-data.js
================================================
export default {
id: 0,
label: 'XXX科技有限公司',
children: [
{
id: 2,
label: '产品研发部',
children: [
{
id: 5,
label: '研发-前端'
}, {
id: 6,
label: '研发-后端'
}, {
id: 9,
label: 'UI设计'
}, {
id: 10,
label: '产品经理'
}
]
},
{
id: 3,
label: '销售部',
children: [
{
id: 7,
label: '销售一部'
}, {
id: 8,
label: '销售二部'
}
]
},
{
id: 4,
label: '财务部'
}, {
id: 11,
label: 'HR人事'
}
]
}
================================================
FILE: src/mock/data/tree-select.js
================================================
export const treeData = [
{
id: 1,
title: '1',
children: [
{
id: 11,
title: '1-1',
loading: false,
children: [
// {
// id: 111,
// title: '1-1-1'
// },
// {
// id: 112,
// title: '1-1-2'
// },
// {
// id: 113,
// title: '1-1-3'
// },
// {
// id: 114,
// title: '1-1-4'
// }
]
},
{
id: 12,
title: '1-2',
children: [
{
id: 121,
title: '1-2-1'
}
]
}
]
}
]
export const newTreeData = [
{
id: 'a',
title: 'a',
children: [
{
id: 'a1',
title: 'a-1',
children: [
{
id: 112,
title: '1-1-2'
},
{
id: 'a12',
title: 'a-1-2'
},
{
id: 'a13',
title: 'a-1-3'
},
{
id: 'a14',
title: 'a-1-4'
}
]
},
{
id: 'a2',
title: 'a-2',
children: [
{
id: 'a21',
title: 'b-2-1'
}
]
}
]
}
]
================================================
FILE: src/mock/data.js
================================================
import Mock from 'mockjs'
import { doCustomTimes } from '@/libs/util'
import orgData from './data/org-data'
import { treeData } from './data/tree-select'
const Random = Mock.Random
export const getTableData = req => {
let tableData = []
doCustomTimes(5, () => {
tableData.push(Mock.mock({
name: '@name',
email: '@email',
createTime: '@date'
}))
})
return tableData
}
export const getDragList = req => {
let dragList = []
doCustomTimes(5, () => {
dragList.push(Mock.mock({
name: Random.csentence(10, 13),
id: Random.increment(10)
}))
})
return dragList
}
export const uploadImage = req => {
return Promise.resolve()
}
export const getOrgData = req => {
return orgData
}
export const getTreeSelectData = req => {
return treeData
}
================================================
FILE: src/mock/index.js
================================================
import Mock from 'mockjs'
import { login, logout, getUserInfo } from './login'
import { getTableData, getDragList, uploadImage, getOrgData, getTreeSelectData } from './data'
import { getMessageInit, getContentByMsgId, hasRead, removeReaded, restoreTrash, messageCount } from './user'
// 配置Ajax请求延时，可用来测试网络延迟大时项目中一些效果
Mock.setup({
timeout: 1000
})
// 登录相关和获取用户信息
Mock.mock(/\/login/, login)
Mock.mock(/\/get_info/, getUserInfo)
Mock.mock(/\/logout/, logout)
Mock.mock(/\/get_table_data/, getTableData)
Mock.mock(/\/get_drag_list/, getDragList)
Mock.mock(/\/save_error_logger/, 'success')
Mock.mock(/\/image\/upload/, uploadImage)
Mock.mock(/\/message\/init/, getMessageInit)
Mock.mock(/\/message\/content/, getContentByMsgId)
Mock.mock(/\/message\/has_read/, hasRead)
Mock.mock(/\/message\/remove_readed/, removeReaded)
Mock.mock(/\/message\/restore/, restoreTrash)
Mock.mock(/\/message\/count/, messageCount)
Mock.mock(/\/get_org_data/, getOrgData)
Mock.mock(/\/get_tree_select_data/, getTreeSelectData)
export default Mock
================================================
FILE: src/mock/login.js
================================================
import { getParams } from '@/libs/util'
const USER_MAP = {
super_admin: {
name: 'super_admin',
user_id: '1',
access: ['super_admin', 'admin'],
token: 'super_admin',
avatar: 'https://file.iviewui.com/dist/a0e88e83800f138b94d2414621bd9704.png'
},
admin: {
name: 'admin',
user_id: '2',
access: ['admin'],
token: 'admin',
avatar: 'https://avatars0.githubusercontent.com/u/20942571?s=460&v=4'
}
}
export const login = req => {
req = JSON.parse(req.body)
return { token: USER_MAP[req.userName].token }
}
export const getUserInfo = req => {
const params = getParams(req.url)
return USER_MAP[params.token]
}
export const logout = req => {
return null
}
================================================
FILE: src/mock/user.js
================================================
import Mock from 'mockjs'
import { doCustomTimes } from '@/libs/util'
const Random = Mock.Random
export const getMessageInit = () => {
let unreadList = []
doCustomTimes(3, () => {
unreadList.push(Mock.mock({
title: Random.cword(10, 15),
create_time: '@date',
msg_id: Random.increment(100)
}))
})
let readedList = []
doCustomTimes(4, () => {
readedList.push(Mock.mock({
title: Random.cword(10, 15),
create_time: '@date',
msg_id: Random.increment(100)
}))
})
let trashList = []
doCustomTimes(2, () => {
trashList.push(Mock.mock({
title: Random.cword(10, 15),
create_time: '@date',
msg_id: Random.increment(100)
}))
})
return {
unread: unreadList,
readed: readedList,
trash: trashList
}
}
export const getContentByMsgId = () => {
return `<divcourier new',="" monospace;font-weight:="" normal;font-size:="" 12px;line-height:="" 18px;white-space:="" pre;"=""><div> <span style="font-size: medium;">这是消息内容，这个内容是使用<span style="color: rgb(255, 255, 255); background-color: rgb(28, 72, 127);">富文本编辑器</span>编辑的，所以你可以看到一些<span style="text-decoration-line: underline; font-style: italic; color: rgb(194, 79, 74);">格式</span></span></div><ol><li>你可以查看Mock返回的数据格式，和api请求的接口，来确定你的后端接口的开发</li><li>使用你的真实接口后，前端页面基本不需要修改即可满足基本需求</li><li>快来试试吧</li></ol><p>${Random.csentence(100, 200)}</p></divcourier>`
}
export const hasRead = () => {
return true
}
export const removeReaded = () => {
return true
}
export const restoreTrash = () => {
return true
}
export const messageCount = () => {
return 3
}
================================================
FILE: src/plugin/error-store/index.js
================================================
import store from '@/store'
export default {
install (Vue, options) {
if (options.developmentOff && process.env.NODE_ENV === 'development') return
Vue.config.errorHandler = (error, vm, mes) => {
let info = {
type: 'script',
code: 0,
mes: error.message,
url: window.location.href
}
Vue.nextTick(() => {
store.dispatch('addErrorLog', info)
})
}
}
}
================================================
FILE: src/plugin/index.js
================================================
import config from '@/config'
const { plugin } = config
export default (Vue) => {
for (let name in plugin) {
const value = plugin[name]
Vue.use(require(`./${name}`).default, typeof value === 'object' ? value : undefined)
}
}
================================================
FILE: src/router/before-close.js
================================================
import { Modal } from 'iview'
const beforeClose = {
before_close_normal: (resolve) => {
Modal.confirm({
title: '确定要关闭这一页吗',
onOk: () => {
resolve(true)
},
onCancel: () => {
resolve(false)
}
})
}
}
export default beforeClose
================================================
FILE: src/router/index.js
================================================
import Vue from 'vue'
import Router from 'vue-router'
import routes from './routers'
import store from '@/store'
import iView from 'iview'
import { setToken, getToken, canTurnTo, setTitle } from '@/libs/util'
import config from '@/config'
const { homeName } = config
Vue.use(Router)
const router = new Router({
routes,
mode: 'history'
})
const LOGIN_PAGE_NAME = 'login'
const turnTo = (to, access, next) => {
if (canTurnTo(to.name, access, routes)) next() // 有权限，可访问
else next({ replace: true, name: 'error_401' }) // 无权限，重定向到401页面
}
router.beforeEach((to, from, next) => {
iView.LoadingBar.start()
const token = getToken()
if (!token && to.name !== LOGIN_PAGE_NAME) {
// 未登录且要跳转的页面不是登录页
next({
name: LOGIN_PAGE_NAME // 跳转到登录页
})
} else if (!token && to.name === LOGIN_PAGE_NAME) {
// 未登陆且要跳转的页面是登录页
next() // 跳转
} else if (token && to.name === LOGIN_PAGE_NAME) {
// 已登录且要跳转的页面是登录页
next({
name: homeName // 跳转到homeName页
})
} else {
if (store.state.user.hasGetInfo) {
turnTo(to, store.state.user.access, next)
} else {
store.dispatch('getUserInfo').then(user => {
// 拉取用户信息，通过用户权限和跳转的页面的name来判断是否有权限访问;access必须是一个数组，如：['super_admin'] ['super_admin', 'admin']
turnTo(to, user.access, next)
}).catch(() => {
setToken('')
next({
name: 'login'
})
})
}
}
})
router.afterEach(to => {
setTitle(to, router.app)
iView.LoadingBar.finish()
window.scrollTo(0, 0)
})
export default router
================================================
FILE: src/router/routers.js
================================================
import Main from '@/components/main'
import parentView from '@/components/parent-view'
/**
* iview-admin中meta除了原生参数外可配置的参数:
* meta: {
* title: { String|Number|Function }
* 显示在侧边栏、面包屑和标签栏的文字
* 使用'{{ 多语言字段 }}'形式结合多语言使用，例子看多语言的路由配置;
* 可以传入一个回调函数，参数是当前路由对象，例子看动态路由和带参路由
* hideInBread: (false) 设为true后此级路由将不会出现在面包屑中，示例看QQ群路由配置
* hideInMenu: (false) 设为true后在左侧菜单不会显示该页面选项
* notCache: (false) 设为true后页面在切换标签后不会缓存，如果需要缓存，无需设置这个字段，而且需要设置页面组件name属性和路由配置的name一致
* access: (null) 可访问该页面的权限数组，当前路由设置的权限会影响子路由
* icon: (-) 该页面在左侧菜单、面包屑和标签导航处显示的图标，如果是自定义图标，需要在图标名称前加下划线'_'
* beforeCloseName: (-) 设置该字段，则在关闭当前tab页时会去'@/router/before-close.js'里寻找该字段名对应的方法，作为关闭前的钩子函数
* }
*/
export default [
{
path: '/login',
name: 'login',
meta: {
title: 'Login - 登录',
hideInMenu: true
},
component: () => import('@/view/login/login.vue')
},
{
path: '/',
name: '_home',
redirect: '/home',
component: Main,
meta: {
hideInMenu: true,
notCache: true
},
children: [
{
path: '/home',
name: 'home',
meta: {
hideInMenu: true,
title: '首页',
notCache: true,
icon: 'md-home'
},
component: () => import('@/view/single-page/home')
}
]
},
{
path: '',
name: 'doc',
meta: {
title: '文档',
href: 'https://lison16.github.io/iview-admin-doc/#/',
icon: 'ios-book'
}
},
{
path: '/join',
name: 'join',
component: Main,
meta: {
hideInBread: true
},
children: [
{
path: 'join_page',
name: 'join_page',
meta: {
icon: '_qq',
title: 'QQ群'
},
component: () => import('@/view/join-page.vue')
}
]
},
{
path: '/message',
name: 'message',
component: Main,
meta: {
hideInBread: true,
hideInMenu: true
},
children: [
{
path: 'message_page',
name: 'message_page',
meta: {
icon: 'md-notifications',
title: '消息中心'
},
component: () => import('@/view/single-page/message/index.vue')
}
]
},
{
path: '/components',
name: 'components',
meta: {
icon: 'logo-buffer',
title: '组件'
},
component: Main,
children: [
{
path: 'tree_select_page',
name: 'tree_select_page',
meta: {
icon: 'md-arrow-dropdown-circle',
title: '树状下拉选择器'
},
component: () => import('@/view/components/tree-select/index.vue')
},
{
path: 'count_to_page',
name: 'count_to_page',
meta: {
icon: 'md-trending-up',
title: '数字渐变'
},
component: () => import('@/view/components/count-to/count-to.vue')
},
{
path: 'drag_list_page',
name: 'drag_list_page',
meta: {
icon: 'ios-infinite',
title: '拖拽列表'
},
component: () => import('@/view/components/drag-list/drag-list.vue')
},
{
path: 'drag_drawer_page',
name: 'drag_drawer_page',
meta: {
icon: 'md-list',
title: '可拖拽抽屉'
},
component: () => import('@/view/components/drag-drawer')
},
{
path: 'org_tree_page',
name: 'org_tree_page',
meta: {
icon: 'ios-people',
title: '组织结构树'
},
component: () => import('@/view/components/org-tree')
},
{
path: 'tree_table_page',
name: 'tree_table_page',
meta: {
icon: 'md-git-branch',
title: '树状表格'
},
component: () => import('@/view/components/tree-table/index.vue')
},
{
path: 'cropper_page',
name: 'cropper_page',
meta: {
icon: 'md-crop',
title: '图片裁剪'
},
component: () => import('@/view/components/cropper/cropper.vue')
},
{
path: 'tables_page',
name: 'tables_page',
meta: {
icon: 'md-grid',
title: '多功能表格'
},
component: () => import('@/view/components/tables/tables.vue')
},
{
path: 'split_pane_page',
name: 'split_pane_page',
meta: {
icon: 'md-pause',
title: '分割窗口'
},
component: () => import('@/view/components/split-pane/split-pane.vue')
},
{
path: 'markdown_page',
name: 'markdown_page',
meta: {
icon: 'logo-markdown',
title: 'Markdown编辑器'
},
component: () => import('@/view/components/markdown/markdown.vue')
},
{
path: 'editor_page',
name: 'editor_page',
meta: {
icon: 'ios-create',
title: '富文本编辑器'
},
component: () => import('@/view/components/editor/editor.vue')
},
{
path: 'icons_page',
name: 'icons_page',
meta: {
icon: '_bear',
title: '自定义图标'
},
component: () => import('@/view/components/icons/icons.vue')
}
]
},
{
path: '/update',
name: 'update',
meta: {
icon: 'md-cloud-upload',
title: '数据上传'
},
component: Main,
children: [
{
path: 'update_table_page',
name: 'update_table_page',
meta: {
icon: 'ios-document',
title: '上传Csv'
},
component: () => import('@/view/update/update-table.vue')
},
{
path: 'update_paste_page',
name: 'update_paste_page',
meta: {
icon: 'md-clipboard',
title: '粘贴表格数据'
},
component: () => import('@/view/update/update-paste.vue')
}
]
},
{
path: '/excel',
name: 'excel',
meta: {
icon: 'ios-stats',
title: 'EXCEL导入导出'
},
component: Main,
children: [
{
path: 'upload-excel',
name: 'upload-excel',
meta: {
icon: 'md-add',
title: '导入EXCEL'
},
component: () => import('@/view/excel/upload-excel.vue')
},
{
path: 'export-excel',
name: 'export-excel',
meta: {
icon: 'md-download',
title: '导出EXCEL'
},
component: () => import('@/view/excel/export-excel.vue')
}
]
},
{
path: '/tools_methods',
name: 'tools_methods',
meta: {
hideInBread: true
},
component: Main,
children: [
{
path: 'tools_methods_page',
name: 'tools_methods_page',
meta: {
icon: 'ios-hammer',
title: '工具方法',
beforeCloseName: 'before_close_normal'
},
component: () => import('@/view/tools-methods/tools-methods.vue')
}
]
},
{
path: '/i18n',
name: 'i18n',
meta: {
hideInBread: true
},
component: Main,
children: [
{
path: 'i18n_page',
name: 'i18n_page',
meta: {
icon: 'md-planet',
title: 'i18n - {{ i18n_page }}'
},
component: () => import('@/view/i18n/i18n-page.vue')
}
]
},
{
path: '/error_store',
name: 'error_store',
meta: {
hideInBread: true
},
component: Main,
children: [
{
path: 'error_store_page',
name: 'error_store_page',
meta: {
icon: 'ios-bug',
title: '错误收集'
},
component: () => import('@/view/error-store/error-store.vue')
}
]
},
{
path: '/error_logger',
name: 'error_logger',
meta: {
hideInBread: true,
hideInMenu: true
},
component: Main,
children: [
{
path: 'error_logger_page',
name: 'error_logger_page',
meta: {
icon: 'ios-bug',
title: '错误收集'
},
component: () => import('@/view/single-page/error-logger.vue')
}
]
},
{
path: '/directive',
name: 'directive',
meta: {
hideInBread: true
},
component: Main,
children: [
{
path: 'directive_page',
name: 'directive_page',
meta: {
icon: 'ios-navigate',
title: '指令'
},
component: () => import('@/view/directive/directive.vue')
}
]
},
{
path: '/multilevel',
name: 'multilevel',
meta: {
icon: 'md-menu',
title: '多级菜单'
},
component: Main,
children: [
{
path: 'level_2_1',
name: 'level_2_1',
meta: {
icon: 'md-funnel',
title: '二级-1'
},
component: () => import('@/view/multilevel/level-2-1.vue')
},
{
path: 'level_2_2',
name: 'level_2_2',
meta: {
access: ['super_admin'],
icon: 'md-funnel',
showAlways: true,
title: '二级-2'
},
component: parentView,
children: [
{
path: 'level_2_2_1',
name: 'level_2_2_1',
meta: {
icon: 'md-funnel',
title: '三级'
},
component: () => import('@/view/multilevel/level-2-2/level-2-2-1.vue')
},
{
path: 'level_2_2_2',
name: 'level_2_2_2',
meta: {
icon: 'md-funnel',
title: '三级'
},
component: () => import('@/view/multilevel/level-2-2/level-2-2-2.vue')
}
]
},
{
path: 'level_2_3',
name: 'level_2_3',
meta: {
icon: 'md-funnel',
title: '二级-3'
},
component: () => import('@/view/multilevel/level-2-3.vue')
}
]
},
{
path: '/argu',
name: 'argu',
meta: {
hideInMenu: true
},
component: Main,
children: [
{
path: 'params/:id',
name: 'params',
meta: {
icon: 'md-flower',
title: route => `{{ params }}-${route.params.id}`,
notCache: true,
beforeCloseName: 'before_close_normal'
},
component: () => import('@/view/argu-page/params.vue')
},
{
path: 'query',
name: 'query',
meta: {
icon: 'md-flower',
title: route => `{{ query }}-${route.query.id}`,
notCache: true
},
component: () => import('@/view/argu-page/query.vue')
}
]
},
{
path: '/401',
name: 'error_401',
meta: {
hideInMenu: true
},
component: () => import('@/view/error-page/401.vue')
},
{
path: '/500',
name: 'error_500',
meta: {
hideInMenu: true
},
component: () => import('@/view/error-page/500.vue')
},
{
path: '*',
name: 'error_404',
meta: {
hideInMenu: true
},
component: () => import('@/view/error-page/404.vue')
}
]
================================================
FILE: src/store/index.js
================================================
import Vue from 'vue'
import Vuex from 'vuex'
import user from './module/user'
import app from './module/app'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//
},
mutations: {
//
},
actions: {
//
},
modules: {
user,
app
}
})
================================================
FILE: src/store/module/app.js
================================================
import {
getBreadCrumbList,
setTagNavListInLocalstorage,
getMenuByRouter,
getTagNavListFromLocalstorage,
getHomeRoute,
getNextRoute,
routeHasExist,
routeEqual,
getRouteTitleHandled,
localSave,
localRead
} from '@/libs/util'
import { saveErrorLogger } from '@/api/data'
import router from '@/router'
import routers from '@/router/routers'
import config from '@/config'
const { homeName } = config
const closePage = (state, route) => {
const nextRoute = getNextRoute(state.tagNavList, route)
state.tagNavList = state.tagNavList.filter(item => {
return !routeEqual(item, route)
})
router.push(nextRoute)
}
export default {
state: {
breadCrumbList: [],
tagNavList: [],
homeRoute: {},
local: localRead('local'),
errorList: [],
hasReadErrorPage: false
},
getters: {
menuList: (state, getters, rootState) => getMenuByRouter(routers, rootState.user.access),
errorCount: state => state.errorList.length
},
mutations: {
setBreadCrumb (state, route) {
state.breadCrumbList = getBreadCrumbList(route, state.homeRoute)
},
setHomeRoute (state, routes) {
state.homeRoute = getHomeRoute(routes, homeName)
},
setTagNavList (state, list) {
let tagList = []
if (list) {
tagList = [...list]
} else tagList = getTagNavListFromLocalstorage() || []
if (tagList[0] && tagList[0].name !== homeName) tagList.shift()
let homeTagIndex = tagList.findIndex(item => item.name === homeName)
if (homeTagIndex > 0) {
let homeTag = tagList.splice(homeTagIndex, 1)[0]
tagList.unshift(homeTag)
}
state.tagNavList = tagList
setTagNavListInLocalstorage([...tagList])
},
closeTag (state, route) {
let tag = state.tagNavList.filter(item => routeEqual(item, route))
route = tag[0] ? tag[0] : null
if (!route) return
closePage(state, route)
},
addTag (state, { route, type = 'unshift' }) {
let router = getRouteTitleHandled(route)
if (!routeHasExist(state.tagNavList, router)) {
if (type === 'push') state.tagNavList.push(router)
else {
if (router.name === homeName) state.tagNavList.unshift(router)
else state.tagNavList.splice(1, 0, router)
}
setTagNavListInLocalstorage([...state.tagNavList])
}
},
setLocal (state, lang) {
localSave('local', lang)
state.local = lang
},
addError (state, error) {
state.errorList.push(error)
},
setHasReadErrorLoggerStatus (state, status = true) {
state.hasReadErrorPage = status
}
},
actions: {
addErrorLog ({ commit, rootState }, info) {
if (!window.location.href.includes('error_logger_page')) commit('setHasReadErrorLoggerStatus', false)
const { user: { token, userId, userName } } = rootState
let data = {
...info,
time: Date.parse(new Date()),
token,
userId,
userName
}
saveErrorLogger(info).then(() => {
commit('addError', data)
})
}
}
}
================================================
FILE: src/store/module/user.js
================================================
import {
login,
logout,
getUserInfo,
getMessage,
getContentByMsgId,
hasRead,
removeReaded,
restoreTrash,
getUnreadCount
} from '@/api/user'
import { setToken, getToken } from '@/libs/util'
export default {
state: {
userName: '',
userId: '',
avatarImgPath: '',
token: getToken(),
access: '',
hasGetInfo: false,
unreadCount: 0,
messageUnreadList: [],
messageReadedList: [],
messageTrashList: [],
messageContentStore: {}
},
mutations: {
setAvatar (state, avatarPath) {
state.avatarImgPath = avatarPath
},
setUserId (state, id) {
state.userId = id
},
setUserName (state, name) {
state.userName = name
},
setAccess (state, access) {
state.access = access
},
setToken (state, token) {
state.token = token
setToken(token)
},
setHasGetInfo (state, status) {
state.hasGetInfo = status
},
setMessageCount (state, count) {
state.unreadCount = count
},
setMessageUnreadList (state, list) {
state.messageUnreadList = list
},
setMessageReadedList (state, list) {
state.messageReadedList = list
},
setMessageTrashList (state, list) {
state.messageTrashList = list
},
updateMessageContentStore (state, { msg_id, content }) {
state.messageContentStore[msg_id] = content
},
moveMsg (state, { from, to, msg_id }) {
const index = state[from].findIndex(_ => _.msg_id === msg_id)
const msgItem = state[from].splice(index, 1)[0]
msgItem.loading = false
state[to].unshift(msgItem)
}
},
getters: {
messageUnreadCount: state => state.messageUnreadList.length,
messageReadedCount: state => state.messageReadedList.length,
messageTrashCount: state => state.messageTrashList.length
},
actions: {
// 登录
handleLogin ({ commit }, { userName, password }) {
userName = userName.trim()
return new Promise((resolve, reject) => {
login({
userName,
password
}).then(res => {
const data = res.data
commit('setToken', data.token)
resolve()
}).catch(err => {
reject(err)
})
})
},
// 退出登录
handleLogOut ({ state, commit }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('setToken', '')
commit('setAccess', [])
resolve()
}).catch(err => {
reject(err)
})
// 如果你的退出登录无需请求接口，则可以直接使用下面三行代码而无需使用logout调用接口
// commit('setToken', '')
// commit('setAccess', [])
// resolve()
})
},
// 获取用户相关信息
getUserInfo ({ state, commit }) {
return new Promise((resolve, reject) => {
try {
getUserInfo(state.token).then(res => {
const data = res.data
commit('setAvatar', data.avatar)
commit('setUserName', data.name)
commit('setUserId', data.user_id)
commit('setAccess', data.access)
commit('setHasGetInfo', true)
resolve(data)
}).catch(err => {
reject(err)
})
} catch (error) {
reject(error)
}
})
},
// 此方法用来获取未读消息条数，接口只返回数值，不返回消息列表
getUnreadMessageCount ({ state, commit }) {
getUnreadCount().then(res => {
const { data } = res
commit('setMessageCount', data)
})
},
// 获取消息列表，其中包含未读、已读、回收站三个列表
getMessageList ({ state, commit }) {
return new Promise((resolve, reject) => {
getMessage().then(res => {
const { unread, readed, trash } = res.data
commit('setMessageUnreadList', unread.sort((a, b) => new Date(b.create_time) - new Date(a.create_time)))
commit('setMessageReadedList', readed.map(_ => {
_.loading = false
return _
}).sort((a, b) => new Date(b.create_time) - new Date(a.create_time)))
commit('setMessageTrashList', trash.map(_ => {
_.loading = false
return _
}).sort((a, b) => new Date(b.create_time) - new Date(a.create_time)))
resolve()
}).catch(error => {
reject(error)
})
})
},
// 根据当前点击的消息的id获取内容
getContentByMsgId ({ state, commit }, { msg_id }) {
return new Promise((resolve, reject) => {
let contentItem = state.messageContentStore[msg_id]
if (contentItem) {
resolve(contentItem)
} else {
getContentByMsgId(msg_id).then(res => {
const content = res.data
commit('updateMessageContentStore', { msg_id, content })
resolve(content)
})
}
})
},
// 把一个未读消息标记为已读
hasRead ({ state, commit }, { msg_id }) {
return new Promise((resolve, reject) => {
hasRead(msg_id).then(() => {
commit('moveMsg', {
from: 'messageUnreadList',
to: 'messageReadedList',
msg_id
})
commit('setMessageCount', state.unreadCount - 1)
resolve()
}).catch(error => {
reject(error)
})
})
},
// 删除一个已读消息到回收站
removeReaded ({ commit }, { msg_id }) {
return new Promise((resolve, reject) => {
removeReaded(msg_id).then(() => {
commit('moveMsg', {
from: 'messageReadedList',
to: 'messageTrashList',
msg_id
})
resolve()
}).catch(error => {
reject(error)
})
})
},
// 还原一个已删除消息到已读消息
restoreTrash ({ commit }, { msg_id }) {
return new Promise((resolve, reject) => {
restoreTrash(msg_id).then(() => {
commit('moveMsg', {
from: 'messageTrashList',
to: 'messageReadedList',
msg_id
})
resolve()
}).catch(error => {
reject(error)
})
})
}
}
}
================================================
FILE: src/view/argu-page/params.vue
================================================
<template>
<div>
<Card>
<h2>ID: {{ $route.params.id }}</h2>
<Button @click="close">调用closeTag方法关闭本页</Button>
</Card>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
name: 'params',
methods: {
...mapMutations([
'closeTag'
]),
close () {
/**
* 如果是调用closeTag方法，普通的页面传入的对象参数只需要写name字段即可
* 如果是动态路由和带参路由，需要传入query或params字段，用来区别关闭的是参数为多少的页面
*/
this.closeTag({
name: 'params',
params: {
id: this.$route.params.id
}
})
}
}
}
</script>
<style>
</style>
================================================
FILE: src/view/argu-page/query.vue
================================================
<template>
<div>
<Card>
<h2>ID: {{ $route.query.id }}</h2>
<Button @click="close">调用closeTag方法关闭本页</Button>
</Card>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
name: 'query',
methods: {
...mapMutations([
'closeTag'
]),
close () {
/**
* 如果是调用closeTag方法，普通的页面传入的对象参数只需要写name字段即可
* 如果是动态路由和带参路由，需要传入query或params字段，用来区别关闭的是参数为多少的页面
*/
this.closeTag({
name: 'query',
query: {
id: this.$route.query.id
}
})
}
}
}
</script>
<style>
</style>
================================================
FILE: src/view/components/count-to/count-to.vue
================================================
<template>
<div>
<Row :gutter="14">
<i-col span="3">
<Card>
<p slot="title">
<Icon type="waterdrop"></Icon>
count-to组件基础用法
</p>
<Row type="flex" justify="center" align="middle" class="countto-page-row">
<div class="count-to-con">
<count-to :end="2534"/>
</div>
</Row>
</Card>
</i-col>
<i-col span="5" class="padding-left-10">
<Card>
<p slot="title">
<Icon type="code"></Icon>
可添加左右文字
</p>
<Row type="flex" justify="center" align="middle" class="countto-page-row">
<div class="count-to-con">
<count-to :end="2534">
<span slot="left">Total: </span>
<span slot="right"> times</span>
</count-to>
</div>
</Row>
</Card>
</i-col>
<i-col span="8" class="padding-left-10">
<Card>
<p slot="title">
<Icon type="paintbucket"></Icon>
自定义样式
</p>
<Row type="flex" justify="center" align="middle" class="countto-page-row">
<div class="count-to-con">
<count-to :end="2534" count-class="count-text" unit-class="unit-class">
<span class="slot-text" slot="left">Total: </span>
<span class="slot-text" slot="right"> times</span>
</count-to>
</div>
</Row>
</Card>
</i-col>
<i-col span="8" class="padding-left-10">
<Card>
<p slot="title">
<Icon type="settings"></Icon>
设置数据格式
</
gitextract_kkvwwkjv/ ├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── .travis.yml ├── LICENSE ├── README.md ├── cypress.json ├── package.json ├── public/ │ └── index.html ├── src/ │ ├── App.vue │ ├── api/ │ │ ├── data.js │ │ ├── routers.js │ │ └── user.js │ ├── assets/ │ │ └── icons/ │ │ └── iconfont.css │ ├── components/ │ │ ├── charts/ │ │ │ ├── bar.vue │ │ │ ├── index.js │ │ │ ├── pie.vue │ │ │ └── theme.json │ │ ├── common/ │ │ │ ├── common.less │ │ │ └── util.js │ │ ├── common-icon/ │ │ │ ├── common-icon.vue │ │ │ └── index.js │ │ ├── count-to/ │ │ │ ├── count-to.vue │ │ │ ├── index.js │ │ │ └── index.less │ │ ├── cropper/ │ │ │ ├── index.js │ │ │ ├── index.less │ │ │ └── index.vue │ │ ├── drag-drawer/ │ │ │ ├── drag-drawer-trigger.vue │ │ │ ├── drag-drawer.vue │ │ │ ├── index.js │ │ │ ├── index.less │ │ │ └── mixin.js │ │ ├── drag-list/ │ │ │ ├── drag-list.vue │ │ │ └── index.js │ │ ├── editor/ │ │ │ ├── editor.vue │ │ │ └── index.js │ │ ├── icons/ │ │ │ ├── icons.vue │ │ │ └── index.js │ │ ├── info-card/ │ │ │ ├── index.js │ │ │ └── infor-card.vue │ │ ├── login-form/ │ │ │ ├── index.js │ │ │ └── login-form.vue │ │ ├── main/ │ │ │ ├── components/ │ │ │ │ ├── a-back-top/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── index.vue │ │ │ │ ├── error-store/ │ │ │ │ │ ├── error-store.vue │ │ │ │ │ └── index.js │ │ │ │ ├── fullscreen/ │ │ │ │ │ ├── fullscreen.vue │ │ │ │ │ └── index.js │ │ │ │ ├── header-bar/ │ │ │ │ │ ├── custom-bread-crumb/ │ │ │ │ │ │ ├── custom-bread-crumb.less │ │ │ │ │ │ ├── custom-bread-crumb.vue │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── header-bar.less │ │ │ │ │ ├── header-bar.vue │ │ │ │ │ ├── index.js │ │ │ │ │ └── sider-trigger/ │ │ │ │ │ ├── index.js │ │ │ │ │ ├── sider-trigger.less │ │ │ │ │ └── sider-trigger.vue │ │ │ │ ├── language/ │ │ │ │ │ ├── index.js │ │ │ │ │ └── language.vue │ │ │ │ ├── side-menu/ │ │ │ │ │ ├── collapsed-menu.vue │ │ │ │ │ ├── index.js │ │ │ │ │ ├── item-mixin.js │ │ │ │ │ ├── mixin.js │ │ │ │ │ ├── side-menu-item.vue │ │ │ │ │ ├── side-menu.less │ │ │ │ │ └── side-menu.vue │ │ │ │ ├── tags-nav/ │ │ │ │ │ ├── index.js │ │ │ │ │ ├── tags-nav.less │ │ │ │ │ └── tags-nav.vue │ │ │ │ └── user/ │ │ │ │ ├── index.js │ │ │ │ ├── user.less │ │ │ │ └── user.vue │ │ │ ├── index.js │ │ │ ├── main.less │ │ │ └── main.vue │ │ ├── markdown/ │ │ │ ├── index.js │ │ │ └── markdown.vue │ │ ├── parent-view/ │ │ │ ├── index.js │ │ │ └── parent-view.vue │ │ ├── paste-editor/ │ │ │ ├── index.js │ │ │ ├── paste-editor.less │ │ │ ├── paste-editor.vue │ │ │ └── plugins/ │ │ │ └── placeholder.js │ │ ├── split-pane/ │ │ │ ├── index.js │ │ │ ├── index.less │ │ │ ├── split.vue │ │ │ └── trigger.vue │ │ ├── tables/ │ │ │ ├── edit.vue │ │ │ ├── handle-btns.js │ │ │ ├── index.js │ │ │ ├── index.less │ │ │ └── tables.vue │ │ └── tree-select/ │ │ ├── index.js │ │ ├── tree-select-tree.vue │ │ └── tree-select.vue │ ├── config/ │ │ └── index.js │ ├── directive/ │ │ ├── directives.js │ │ ├── index.js │ │ └── module/ │ │ ├── clipboard.js │ │ └── draggable.js │ ├── index.less │ ├── libs/ │ │ ├── api.request.js │ │ ├── axios.js │ │ ├── excel.js │ │ ├── render-dom.js │ │ ├── tools.js │ │ └── util.js │ ├── locale/ │ │ ├── index.js │ │ └── lang/ │ │ ├── en-US.js │ │ ├── zh-CN.js │ │ └── zh-TW.js │ ├── main.js │ ├── mock/ │ │ ├── data/ │ │ │ ├── org-data.js │ │ │ └── tree-select.js │ │ ├── data.js │ │ ├── index.js │ │ ├── login.js │ │ └── user.js │ ├── plugin/ │ │ ├── error-store/ │ │ │ └── index.js │ │ └── index.js │ ├── router/ │ │ ├── before-close.js │ │ ├── index.js │ │ └── routers.js │ ├── store/ │ │ ├── index.js │ │ └── module/ │ │ ├── app.js │ │ └── user.js │ └── view/ │ ├── argu-page/ │ │ ├── params.vue │ │ └── query.vue │ ├── components/ │ │ ├── count-to/ │ │ │ └── count-to.vue │ │ ├── cropper/ │ │ │ └── cropper.vue │ │ ├── drag-drawer/ │ │ │ └── index.vue │ │ ├── drag-list/ │ │ │ └── drag-list.vue │ │ ├── editor/ │ │ │ └── editor.vue │ │ ├── icons/ │ │ │ └── icons.vue │ │ ├── markdown/ │ │ │ └── markdown.vue │ │ ├── org-tree/ │ │ │ ├── components/ │ │ │ │ ├── org-view.vue │ │ │ │ └── zoom-controller.vue │ │ │ ├── index.less │ │ │ └── index.vue │ │ ├── split-pane/ │ │ │ └── split-pane.vue │ │ ├── tables/ │ │ │ └── tables.vue │ │ ├── tree-select/ │ │ │ └── index.vue │ │ └── tree-table/ │ │ └── index.vue │ ├── directive/ │ │ └── directive.vue │ ├── error-page/ │ │ ├── 401.vue │ │ ├── 404.vue │ │ ├── 500.vue │ │ ├── back-btn-group.vue │ │ ├── error-content.vue │ │ └── error.less │ ├── error-store/ │ │ └── error-store.vue │ ├── excel/ │ │ ├── common.less │ │ ├── export-excel.vue │ │ └── upload-excel.vue │ ├── i18n/ │ │ └── i18n-page.vue │ ├── join-page.vue │ ├── login/ │ │ ├── login.less │ │ └── login.vue │ ├── multilevel/ │ │ ├── level-2-1.vue │ │ ├── level-2-2/ │ │ │ ├── level-2-2-1.vue │ │ │ └── level-2-2-2.vue │ │ └── level-2-3.vue │ ├── single-page/ │ │ ├── error-logger.vue │ │ ├── home/ │ │ │ ├── example.vue │ │ │ ├── home.vue │ │ │ └── index.js │ │ └── message/ │ │ └── index.vue │ ├── tools-methods/ │ │ └── tools-methods.vue │ └── update/ │ ├── update-paste.vue │ └── update-table.vue ├── tests/ │ ├── e2e/ │ │ ├── .eslintrc │ │ ├── plugins/ │ │ │ └── index.js │ │ ├── specs/ │ │ │ └── test.js │ │ └── support/ │ │ ├── commands.js │ │ └── index.js │ └── unit/ │ ├── .eslintrc.js │ └── HelloWorld.spec.js └── vue.config.js
SYMBOL INDEX (58 symbols across 14 files)
FILE: src/components/drag-drawer/mixin.js
method data (line 2) | data () {
FILE: src/components/main/components/side-menu/item-mixin.js
method parentName (line 11) | parentName () {
method children (line 14) | children () {
method textColor (line 17) | textColor () {
FILE: src/components/main/components/side-menu/mixin.js
method showTitle (line 8) | showTitle (item) {
method showChildren (line 11) | showChildren (item) {
method getNameOrHref (line 14) | getNameOrHref (item, children0) {
FILE: src/components/paste-editor/plugins/placeholder.js
function clearPlaceholder (line 24) | function clearPlaceholder (cm) {
function setPlaceholder (line 30) | function setPlaceholder (cm) {
function onBlur (line 42) | function onBlur (cm) {
function onChange (line 45) | function onChange (cm) {
function isEmpty (line 54) | function isEmpty (cm) {
FILE: src/libs/axios.js
class HttpRequest (line 15) | class HttpRequest {
method constructor (line 16) | constructor (baseUrl = baseURL) {
method getInsideConfig (line 20) | getInsideConfig () {
method destroy (line 29) | destroy (url) {
method interceptors (line 35) | interceptors (instance, url) {
method request (line 67) | request (options) {
FILE: src/libs/excel.js
function auto_width (line 4) | function auto_width(ws, data){
function json_to_array (line 30) | function json_to_array(key, jsonData){
function fixdata (line 35) | function fixdata(data) {
function get_header_row (line 45) | function get_header_row(sheet) {
FILE: src/libs/tools.js
function oneOf (line 49) | function oneOf (value, validList) {
FILE: src/libs/util.js
constant TOKEN_KEY (line 7) | const TOKEN_KEY = 'token'
FILE: src/mock/login.js
constant USER_MAP (line 2) | const USER_MAP = {
FILE: src/plugin/error-store/index.js
method install (line 3) | install (Vue, options) {
FILE: src/router/index.js
constant LOGIN_PAGE_NAME (line 15) | const LOGIN_PAGE_NAME = 'login'
FILE: src/store/module/app.js
method setBreadCrumb (line 42) | setBreadCrumb (state, route) {
method setHomeRoute (line 45) | setHomeRoute (state, routes) {
method setTagNavList (line 48) | setTagNavList (state, list) {
method closeTag (line 62) | closeTag (state, route) {
method addTag (line 68) | addTag (state, { route, type = 'unshift' }) {
method setLocal (line 79) | setLocal (state, lang) {
method addError (line 83) | addError (state, error) {
method setHasReadErrorLoggerStatus (line 86) | setHasReadErrorLoggerStatus (state, status = true) {
method addErrorLog (line 91) | addErrorLog ({ commit, rootState }, info) {
FILE: src/store/module/user.js
method setAvatar (line 29) | setAvatar (state, avatarPath) {
method setUserId (line 32) | setUserId (state, id) {
method setUserName (line 35) | setUserName (state, name) {
method setAccess (line 38) | setAccess (state, access) {
method setToken (line 41) | setToken (state, token) {
method setHasGetInfo (line 45) | setHasGetInfo (state, status) {
method setMessageCount (line 48) | setMessageCount (state, count) {
method setMessageUnreadList (line 51) | setMessageUnreadList (state, list) {
method setMessageReadedList (line 54) | setMessageReadedList (state, list) {
method setMessageTrashList (line 57) | setMessageTrashList (state, list) {
method updateMessageContentStore (line 60) | updateMessageContentStore (state, { msg_id, content }) {
method moveMsg (line 63) | moveMsg (state, { from, to, msg_id }) {
method handleLogin (line 77) | handleLogin ({ commit }, { userName, password }) {
method handleLogOut (line 93) | handleLogOut ({ state, commit }) {
method getUserInfo (line 109) | getUserInfo ({ state, commit }) {
method getUnreadMessageCount (line 129) | getUnreadMessageCount ({ state, commit }) {
method getMessageList (line 136) | getMessageList ({ state, commit }) {
method getContentByMsgId (line 156) | getContentByMsgId ({ state, commit }, { msg_id }) {
method hasRead (line 171) | hasRead ({ state, commit }, { msg_id }) {
method removeReaded (line 187) | removeReaded ({ commit }, { msg_id }) {
method restoreTrash (line 202) | restoreTrash ({ commit }, { msg_id }) {
FILE: vue.config.js
constant BASE_URL (line 15) | const BASE_URL = process.env.NODE_ENV === 'production'
Condensed preview — 182 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (278K chars).
[
{
"path": ".babelrc",
"chars": 38,
"preview": "{\n \"presets\": [\n \"@vue/app\"\n ]\n}\n"
},
{
"path": ".editorconfig",
"chars": 147,
"preview": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_"
},
{
"path": ".eslintignore",
"chars": 0,
"preview": ""
},
{
"path": ".eslintrc.js",
"chars": 469,
"preview": "module.exports = {\n root: true,\n 'extends': [\n 'plugin:vue/essential',\n '@vue/standard'\n ],\n rules: {\n // a"
},
{
"path": ".gitignore",
"chars": 291,
"preview": ".DS_Store\nnode_modules\n/dist\n\npackage-lock.json\n\n/tests/e2e/videos/\n/tests/e2e/screenshots/\n\n# local env files\n.env.loca"
},
{
"path": ".postcssrc.js",
"chars": 59,
"preview": "module.exports = {\n plugins: {\n autoprefixer: {}\n }\n}\n"
},
{
"path": ".travis.yml",
"chars": 85,
"preview": "language: node_js\nnode_js: stable\nscript: npm run lint\nnotifications:\n email: false\n"
},
{
"path": "LICENSE",
"chars": 1068,
"preview": "MIT License\n\nCopyright (c) 2017 TalkingData\n\nPermission is hereby granted, free of charge, to any person obtaining a cop"
},
{
"path": "README.md",
"chars": 2280,
"preview": "<p align=\"center\">\n <a href=\"https://www.iviewui.com\">\n <img width=\"200\" src=\"https://file.iviewui.com/logo-ne"
},
{
"path": "cypress.json",
"chars": 50,
"preview": "{\n \"pluginsFile\": \"tests/e2e/plugins/index.js\"\n}\n"
},
{
"path": "package.json",
"chars": 1732,
"preview": "{\n \"name\": \"iview-admin\",\n \"version\": \"2.0.0\",\n \"author\": \"Lison<lison16new@163.com>\",\n \"private\": false,\n \"scripts"
},
{
"path": "public/index.html",
"chars": 538,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n "
},
{
"path": "src/App.vue",
"chars": 278,
"preview": "<template>\n <div id=\"app\">\n <router-view/>\n </div>\n</template>\n\n<script>\nexport default {\n name: 'App'\n}\n</script>"
},
{
"path": "src/api/data.js",
"chars": 861,
"preview": "import axios from '@/libs/api.request'\n\nexport const getTableData = () => {\n return axios.request({\n url: 'get_table"
},
{
"path": "src/api/routers.js",
"chars": 189,
"preview": "import axios from '@/libs/api.request'\n\nexport const getRouterReq = (access) => {\n return axios.request({\n url: 'get"
},
{
"path": "src/api/user.js",
"chars": 1310,
"preview": "import axios from '@/libs/api.request'\n\nexport const login = ({ userName, password }) => {\n const data = {\n userName"
},
{
"path": "src/assets/icons/iconfont.css",
"chars": 3971,
"preview": "\n@font-face {font-family: \"iconfont\";\n src: url('iconfont.eot?t=1541579316141'); /* IE9*/\n src: url('iconfont.eot?t=15"
},
{
"path": "src/components/charts/bar.vue",
"chars": 1162,
"preview": "<template>\n <div ref=\"dom\" class=\"charts chart-bar\"></div>\n</template>\n\n<script>\nimport echarts from 'echarts'\nimport t"
},
{
"path": "src/components/charts/index.js",
"chars": 96,
"preview": "import ChartPie from './pie.vue'\nimport ChartBar from './bar.vue'\nexport { ChartPie, ChartBar }\n"
},
{
"path": "src/components/charts/pie.vue",
"chars": 1478,
"preview": "<template>\n <div ref=\"dom\" class=\"charts chart-pie\"></div>\n</template>\n\n<script>\nimport echarts from 'echarts'\nimport t"
},
{
"path": "src/components/charts/theme.json",
"chars": 11289,
"preview": "\n{\n \"color\": [\n \"#2d8cf0\",\n \"#19be6b\",\n \"#ff9900\",\n \"#E46CBB\",\n \"#9A66E4\",\n "
},
{
"path": "src/components/common/common.less",
"chars": 174,
"preview": ".no-select{\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: "
},
{
"path": "src/components/common/util.js",
"chars": 138,
"preview": "export const showTitle = (item, vm) => {\n return vm.$config.useI18n ? vm.$t(item.name) : ((item.meta && item.meta.title"
},
{
"path": "src/components/common-icon/common-icon.vue",
"chars": 809,
"preview": "<template>\n <component :is=\"iconType\" :type=\"iconName\" :color=\"iconColor\" :size=\"iconSize\"/>\n</template>\n\n<script>\nimpo"
},
{
"path": "src/components/common-icon/index.js",
"chars": 69,
"preview": "import CommonIcon from './common-icon.vue'\nexport default CommonIcon\n"
},
{
"path": "src/components/count-to/count-to.vue",
"chars": 3624,
"preview": "<template>\n <div class=\"count-to-wrapper\">\n <slot name=\"left\"/>\n <p class=\"content-outer\"><span :class=\"['count-t"
},
{
"path": "src/components/count-to/index.js",
"chars": 60,
"preview": "import countTo from './count-to.vue'\nexport default countTo\n"
},
{
"path": "src/components/count-to/index.less",
"chars": 152,
"preview": "@prefix: ~\"count-to\";\n\n.@{prefix}-wrapper{\n .content-outer{\n display: inline-block;\n .@{prefix}-unit-text{\n "
},
{
"path": "src/components/cropper/index.js",
"chars": 57,
"preview": "import Cropper from './index.vue'\nexport default Cropper\n"
},
{
"path": "src/components/cropper/index.less",
"chars": 853,
"preview": ".bg{\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAA"
},
{
"path": "src/components/cropper/index.vue",
"chars": 3591,
"preview": "<template>\n <div class=\"cropper-wrapper\">\n <div class=\"img-box\">\n <img class=\"cropper-image\" :id=\"imgId\" alt=\"\""
},
{
"path": "src/components/drag-drawer/drag-drawer-trigger.vue",
"chars": 309,
"preview": "<template>\n <div :class=\"`${prefix}-move-trigger`\">\n <div :class=\"`${prefix}-move-trigger-point`\">\n <i></i><i><"
},
{
"path": "src/components/drag-drawer/drag-drawer.vue",
"chars": 4161,
"preview": "<template>\n <Drawer ref=\"drawerWrapper\"\n :value=\"value\"\n @input=\"handleInput\"\n :width=\"width"
},
{
"path": "src/components/drag-drawer/index.js",
"chars": 69,
"preview": "import DragDrawer from './drag-drawer.vue'\nexport default DragDrawer\n"
},
{
"path": "src/components/drag-drawer/index.less",
"chars": 1513,
"preview": "@prefix: ~\"drag-drawer\";\n@drag-drawer-trigger-height: 100px;\n@drag-drawer-trigger-width: 8px;\n\n.@{prefix}-wrapper{\n &.n"
},
{
"path": "src/components/drag-drawer/mixin.js",
"chars": 82,
"preview": "export default {\n data () {\n return {\n prefix: 'drag-drawer'\n }\n }\n}\n"
},
{
"path": "src/components/drag-list/drag-list.vue",
"chars": 2442,
"preview": "<template>\n <div class=\"drag-list-wrapper\">\n <div class=\"drag-list-con con1\">\n <slot name=\"left-title\"></slot>\n"
},
{
"path": "src/components/drag-list/index.js",
"chars": 63,
"preview": "import DragList from './drag-list.vue'\nexport default DragList\n"
},
{
"path": "src/components/editor/editor.vue",
"chars": 1571,
"preview": "<template>\n <div class=\"editor-wrapper\">\n <div :id=\"editorId\"></div>\n </div>\n</template>\n\n<script>\nimport Editor fr"
},
{
"path": "src/components/editor/index.js",
"chars": 56,
"preview": "import Editor from './editor.vue'\nexport default Editor\n"
},
{
"path": "src/components/icons/icons.vue",
"chars": 479,
"preview": "<template>\n <i :class=\"`iconfont icon-${type}`\" :style=\"styles\"></i>\n</template>\n\n<script>\nexport default {\n name: 'Ic"
},
{
"path": "src/components/icons/index.js",
"chars": 53,
"preview": "import Icons from './icons.vue'\nexport default Icons\n"
},
{
"path": "src/components/info-card/index.js",
"chars": 66,
"preview": "import InforCard from './infor-card.vue'\nexport default InforCard\n"
},
{
"path": "src/components/info-card/infor-card.vue",
"chars": 1551,
"preview": "<template>\n <Card :shadow=\"shadow\" class=\"info-card-wrapper\" :padding=\"0\">\n <div class=\"content-con\">\n <div cla"
},
{
"path": "src/components/login-form/index.js",
"chars": 66,
"preview": "import LoginForm from './login-form.vue'\nexport default LoginForm\n"
},
{
"path": "src/components/login-form/login-form.vue",
"chars": 1612,
"preview": "<template>\n <Form ref=\"loginForm\" :model=\"form\" :rules=\"rules\" @keydown.enter.native=\"handleSubmit\">\n <FormItem prop"
},
{
"path": "src/components/main/components/a-back-top/index.js",
"chars": 59,
"preview": "import ABackTop from './index.vue'\nexport default ABackTop\n"
},
{
"path": "src/components/main/components/a-back-top/index.vue",
"chars": 2158,
"preview": "<template>\n <div :class=\"classes\" :style=\"styles\" @click=\"back\">\n <slot>\n <div :class=\"innerClasses"
},
{
"path": "src/components/main/components/error-store/error-store.vue",
"chars": 795,
"preview": "<template>\n <div class=\"error-store\">\n <Badge dot :count=\"countComputed\">\n <Button type=\"text\" @click=\"openErro"
},
{
"path": "src/components/main/components/error-store/index.js",
"chars": 69,
"preview": "import ErrorStore from './error-store.vue'\nexport default ErrorStore\n"
},
{
"path": "src/components/main/components/fullscreen/fullscreen.vue",
"chars": 2448,
"preview": "<template>\n <div v-if=\"showFullScreenBtn\" class=\"full-screen-btn-con\">\n <Tooltip :content=\"value ? '退出全屏' : '全屏'\" pl"
},
{
"path": "src/components/main/components/fullscreen/index.js",
"chars": 68,
"preview": "import Fullscreen from './fullscreen.vue'\nexport default Fullscreen\n"
},
{
"path": "src/components/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.less",
"chars": 71,
"preview": ".custom-bread-crumb{\n display: inline-block;\n vertical-align: top;\n}\n"
},
{
"path": "src/components/main/components/header-bar/custom-bread-crumb/custom-bread-crumb.vue",
"chars": 1011,
"preview": "<template>\n <div class=\"custom-bread-crumb\">\n <Breadcrumb :style=\"{fontSize: `${fontSize}px`}\">\n <BreadcrumbIte"
},
{
"path": "src/components/main/components/header-bar/custom-bread-crumb/index.js",
"chars": 88,
"preview": "import customBreadCrumb from './custom-bread-crumb.vue'\nexport default customBreadCrumb\n"
},
{
"path": "src/components/main/components/header-bar/header-bar.less",
"chars": 216,
"preview": ".header-bar{\n width: 100%;\n height: 100%;\n position: relative;\n .custom-content-con{\n float: right;\n height: a"
},
{
"path": "src/components/main/components/header-bar/header-bar.vue",
"chars": 822,
"preview": "<template>\n <div class=\"header-bar\">\n <sider-trigger :collapsed=\"collapsed\" icon=\"md-menu\" @on-change=\"handleCollpas"
},
{
"path": "src/components/main/components/header-bar/index.js",
"chars": 62,
"preview": "import HeaderBar from './header-bar'\nexport default HeaderBar\n"
},
{
"path": "src/components/main/components/header-bar/sider-trigger/index.js",
"chars": 75,
"preview": "import siderTrigger from './sider-trigger.vue'\nexport default siderTrigger\n"
},
{
"path": "src/components/main/components/header-bar/sider-trigger/sider-trigger.less",
"chars": 321,
"preview": ".trans{\n transition: transform .2s ease;\n}\n@size: 40px;\n.sider-trigger-a{\n padding: 6px;\n width: @size;\n height: @si"
},
{
"path": "src/components/main/components/header-bar/sider-trigger/sider-trigger.vue",
"chars": 541,
"preview": "<template>\n <a @click=\"handleChange\" type=\"text\" :class=\"['sider-trigger-a', collapsed ? 'collapsed' : '']\"><Icon :type"
},
{
"path": "src/components/main/components/language/index.js",
"chars": 62,
"preview": "import Language from './language.vue'\nexport default Language\n"
},
{
"path": "src/components/main/components/language/language.vue",
"chars": 967,
"preview": "<template>\n <div>\n <Dropdown trigger=\"click\" @on-click=\"selectLang\">\n <a href=\"javascript:void(0)\">\n {{ "
},
{
"path": "src/components/main/components/side-menu/collapsed-menu.vue",
"chars": 1967,
"preview": "<template>\n <Dropdown ref=\"dropdown\" @on-click=\"handleClick\" :class=\"hideTitle ? '' : 'collased-menu-dropdown'\" :transf"
},
{
"path": "src/components/main/components/side-menu/index.js",
"chars": 63,
"preview": "import SideMenu from './side-menu.vue'\nexport default SideMenu\n"
},
{
"path": "src/components/main/components/side-menu/item-mixin.js",
"chars": 367,
"preview": "export default {\n props: {\n parentItem: {\n type: Object,\n default: () => {}\n },\n theme: String,\n "
},
{
"path": "src/components/main/components/side-menu/mixin.js",
"chars": 493,
"preview": "import CommonIcon from '_c/common-icon'\nimport { showTitle } from '@/libs/util'\nexport default {\n components: {\n Com"
},
{
"path": "src/components/main/components/side-menu/side-menu-item.vue",
"chars": 1160,
"preview": "<template>\n <Submenu :name=\"`${parentName}`\">\n <template slot=\"title\">\n <common-icon :type=\"parentItem.icon || "
},
{
"path": "src/components/main/components/side-menu/side-menu.less",
"chars": 678,
"preview": ".side-menu-wrapper{\n user-select: none;\n .menu-collapsed{\n padding-top: 10px;\n\n .ivu-dropdown{\n width: 100%"
},
{
"path": "src/components/main/components/side-menu/side-menu.vue",
"chars": 3778,
"preview": "<template>\n <div class=\"side-menu-wrapper\">\n <slot></slot>\n <Menu ref=\"menu\" v-show=\"!collapsed\" :active-name=\"ac"
},
{
"path": "src/components/main/components/tags-nav/index.js",
"chars": 60,
"preview": "import TagsNav from './tags-nav.vue'\nexport default TagsNav\n"
},
{
"path": "src/components/main/components/tags-nav/tags-nav.less",
"chars": 1667,
"preview": ".no-select{\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: "
},
{
"path": "src/components/main/components/tags-nav/tags-nav.vue",
"chars": 6590,
"preview": "<template>\n <div class=\"tags-nav\">\n <div class=\"close-con\">\n <Dropdown transfer @on-click=\"handleTagsOption\" st"
},
{
"path": "src/components/main/components/user/index.js",
"chars": 50,
"preview": "import User from './user.vue'\nexport default User\n"
},
{
"path": "src/components/main/components/user/user.less",
"chars": 200,
"preview": ".user{\n &-avatar-dropdown{\n cursor: pointer;\n display: inline-block;\n // height: 64px;\n vertical-align: mid"
},
{
"path": "src/components/main/components/user/user.vue",
"chars": 1245,
"preview": "<template>\n <div class=\"user-avatar-dropdown\">\n <Dropdown @on-click=\"handleClick\">\n <Badge :dot=\"!!messageUnrea"
},
{
"path": "src/components/main/index.js",
"chars": 50,
"preview": "import Main from './main.vue'\nexport default Main\n"
},
{
"path": "src/components/main/main.less",
"chars": 1381,
"preview": ".main{\n .logo-con{\n height: 64px;\n padding: 10px;\n img{\n height: 44px;\n width: auto;\n display: "
},
{
"path": "src/components/main/main.vue",
"chars": 5551,
"preview": "<template>\n <Layout style=\"height: 100%\" class=\"main\">\n <Sider hide-trigger collapsible :width=\"256\" :collapsed-widt"
},
{
"path": "src/components/markdown/index.js",
"chars": 74,
"preview": "import MarkdownEditor from './markdown.vue'\nexport default MarkdownEditor\n"
},
{
"path": "src/components/markdown/markdown.vue",
"chars": 1599,
"preview": "<template>\n <div class=\"markdown-wrapper\">\n <textarea ref=\"editor\"></textarea>\n </div>\n</template>\n\n<script>\nimport"
},
{
"path": "src/components/parent-view/index.js",
"chars": 69,
"preview": "import ParentView from './parent-view.vue'\nexport default ParentView\n"
},
{
"path": "src/components/parent-view/parent-view.vue",
"chars": 574,
"preview": "<template>\n <keep-alive :include=\"cacheList\" :exclude=\"notCacheName\">\n <router-view ref=\"child\"/>\n </keep-alive>\n</"
},
{
"path": "src/components/paste-editor/index.js",
"chars": 72,
"preview": "import PasteEditor from './paste-editor.vue'\nexport default PasteEditor\n"
},
{
"path": "src/components/paste-editor/paste-editor.less",
"chars": 411,
"preview": ".paste-editor-wrapper{\n\twidth: 100%;\n\theight: 100%;\n\tborder: 1px dashed gainsboro;\n\ttextarea.textarea-el{\n\t\twidth: 100%;"
},
{
"path": "src/components/paste-editor/paste-editor.vue",
"chars": 2834,
"preview": "<template>\n <div class=\"paste-editor-wrapper\">\n <textarea ref=\"codemirror\" class=\"textarea-el\"></textarea>\n </div>\n"
},
{
"path": "src/components/paste-editor/plugins/placeholder.js",
"chars": 1955,
"preview": "export default (codemirror) => {\n (function (mod) {\n mod(codemirror)\n })(function (CodeMirror) {\n CodeMirror.def"
},
{
"path": "src/components/split-pane/index.js",
"chars": 53,
"preview": "import Split from './split.vue'\nexport default Split\n"
},
{
"path": "src/components/split-pane/index.less",
"chars": 2539,
"preview": "@split-prefix-cls: ~\"ivu-split\";\n@box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4);\n@trigger-bar-background: rgba(23, 35, 61,"
},
{
"path": "src/components/split-pane/split.vue",
"chars": 5237,
"preview": "<template>\n <div ref=\"outerWrapper\" :class=\"wrapperClasses\">\n <div v-if=\"isHorizontal\" :class=\"`${prefix}-horizontal"
},
{
"path": "src/components/split-pane/trigger.vue",
"chars": 791,
"preview": "<template>\n <div :class=\"classes\">\n <div :class=\"barConClasses\">\n <i :class=\"`${prefix}-bar`\" v-once v-for=\"i i"
},
{
"path": "src/components/tables/edit.vue",
"chars": 1771,
"preview": "<template>\n <div class=\"tables-edit-outer\">\n <div v-if=\"!isEditting\" class=\"tables-edit-con\">\n <span class=\"val"
},
{
"path": "src/components/tables/handle-btns.js",
"chars": 643,
"preview": "const btns = {\n delete: (h, params, vm) => {\n return h('Poptip', {\n props: {\n confirm: true,\n tit"
},
{
"path": "src/components/tables/index.js",
"chars": 56,
"preview": "import Tables from './tables.vue'\nexport default Tables\n"
},
{
"path": "src/components/tables/index.less",
"chars": 248,
"preview": ".search-con{\n padding: 10px 0;\n .search{\n &-col{\n display: inline-block;\n width: 200px;\n }\n &-input"
},
{
"path": "src/components/tables/tables.vue",
"chars": 7786,
"preview": "<template>\n <div>\n <div v-if=\"searchable && searchPlace === 'top'\" class=\"search-con search-con-top\">\n <Select "
},
{
"path": "src/components/tree-select/index.js",
"chars": 44,
"preview": "export { default } from './tree-select.vue'\n"
},
{
"path": "src/components/tree-select/tree-select-tree.vue",
"chars": 3291,
"preview": "<template>\n <Tree\n :data=\"data\"\n @on-check-change=\"handleCheckSelect\"\n v-on=\"parent.$listeners\"\n v-bind=\"pa"
},
{
"path": "src/components/tree-select/tree-select.vue",
"chars": 1333,
"preview": "<template>\n <Select\n ref=\"select\"\n class=\"tree-select\"\n v-bind=\"$attrs\"\n @on-change=\"handleChange\"\n mult"
},
{
"path": "src/config/index.js",
"chars": 760,
"preview": "export default {\n /**\n * @description 配置显示在浏览器标签的title\n */\n title: 'iView-admin',\n /**\n * @description token在Co"
},
{
"path": "src/directive/directives.js",
"chars": 162,
"preview": "import draggable from './module/draggable'\nimport clipboard from './module/clipboard'\n\nconst directives = {\n draggable,"
},
{
"path": "src/directive/index.js",
"chars": 548,
"preview": "import directive from './directives'\n\nconst importDirective = Vue => {\n /**\n * 拖拽指令 v-draggable=\"options\"\n * option"
},
{
"path": "src/directive/module/clipboard.js",
"chars": 887,
"preview": "import Clipboard from 'clipboard'\nexport default {\n bind: (el, binding) => {\n const clipboard = new Clipboard(el, {\n"
},
{
"path": "src/directive/module/draggable.js",
"chars": 1378,
"preview": "import { on } from '@/libs/tools'\nexport default {\n inserted: (el, binding, vnode) => {\n let triggerDom = document.q"
},
{
"path": "src/index.less",
"chars": 134,
"preview": "@import '~iview/src/styles/index.less';\n\n@menu-dark-title: #001529;\n@menu-dark-active-bg: #000c17;\n@layout-sider-backgro"
},
{
"path": "src/libs/api.request.js",
"chars": 227,
"preview": "import HttpRequest from '@/libs/axios'\nimport config from '@/config'\nconst baseUrl = process.env.NODE_ENV === 'developme"
},
{
"path": "src/libs/axios.js",
"chars": 1835,
"preview": "import axios from 'axios'\nimport store from '@/store'\n// import { Spin } from 'iview'\nconst addErrorLog = errorInfo => {"
},
{
"path": "src/libs/excel.js",
"chars": 3698,
"preview": "/* eslint-disable */\nimport XLSX from 'xlsx';\n\nfunction auto_width(ws, data){\n /*set worksheet max width per col*/\n "
},
{
"path": "src/libs/render-dom.js",
"chars": 156,
"preview": "export default {\n name: 'RenderDom',\n functional: true,\n props: {\n render: Function\n },\n render: (h, ctx) => {\n "
},
{
"path": "src/libs/tools.js",
"chars": 5658,
"preview": "export const forEach = (arr, fn) => {\n if (!arr.length || !fn) return\n let i = -1\n let len = arr.length\n while (++i "
},
{
"path": "src/libs/util.js",
"chars": 10386,
"preview": "import Cookies from 'js-cookie'\n// cookie保存的天数\nimport config from '@/config'\nimport { forEach, hasOneOf, objEqual } from"
},
{
"path": "src/locale/index.js",
"chars": 1093,
"preview": "import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport { localRead } from '@/libs/util'\nimport customZhCn from './l"
},
{
"path": "src/locale/lang/en-US.js",
"chars": 1422,
"preview": "export default {\n home: 'Home',\n login: 'Login',\n components: 'Components',\n count_to_page: 'Count-to',\n tables_pag"
},
{
"path": "src/locale/lang/zh-CN.js",
"chars": 1114,
"preview": "export default {\n home: '首页',\n login: '登录',\n components: '组件',\n count_to_page: '数字渐变',\n tables_page: '多功能表格',\n spl"
},
{
"path": "src/locale/lang/zh-TW.js",
"chars": 1114,
"preview": "export default {\n home: '首頁',\n login: '登錄',\n components: '组件',\n count_to_page: '数字渐变',\n tables_page: '多功能表格',\n spl"
},
{
"path": "src/main.js",
"chars": 1213,
"preview": "// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base."
},
{
"path": "src/mock/data/org-data.js",
"chars": 642,
"preview": "export default {\n id: 0,\n label: 'XXX科技有限公司',\n children: [\n {\n id: 2,\n label: '产品研发部',\n children: ["
},
{
"path": "src/mock/data/tree-select.js",
"chars": 1324,
"preview": "export const treeData = [\n {\n id: 1,\n title: '1',\n children: [\n {\n id: 11,\n title: '1-1',\n "
},
{
"path": "src/mock/data.js",
"chars": 802,
"preview": "import Mock from 'mockjs'\nimport { doCustomTimes } from '@/libs/util'\nimport orgData from './data/org-data'\nimport { tre"
},
{
"path": "src/mock/index.js",
"chars": 1029,
"preview": "import Mock from 'mockjs'\nimport { login, logout, getUserInfo } from './login'\nimport { getTableData, getDragList, uploa"
},
{
"path": "src/mock/login.js",
"chars": 706,
"preview": "import { getParams } from '@/libs/util'\nconst USER_MAP = {\n super_admin: {\n name: 'super_admin',\n user_id: '1',\n "
},
{
"path": "src/mock/user.js",
"chars": 1648,
"preview": "import Mock from 'mockjs'\nimport { doCustomTimes } from '@/libs/util'\nconst Random = Mock.Random\n\nexport const getMessag"
},
{
"path": "src/plugin/error-store/index.js",
"chars": 427,
"preview": "import store from '@/store'\nexport default {\n install (Vue, options) {\n if (options.developmentOff && process.env.NO"
},
{
"path": "src/plugin/index.js",
"chars": 238,
"preview": "import config from '@/config'\nconst { plugin } = config\n\nexport default (Vue) => {\n for (let name in plugin) {\n cons"
},
{
"path": "src/router/before-close.js",
"chars": 284,
"preview": "import { Modal } from 'iview'\n\nconst beforeClose = {\n before_close_normal: (resolve) => {\n Modal.confirm({\n tit"
},
{
"path": "src/router/index.js",
"chars": 1538,
"preview": "import Vue from 'vue'\nimport Router from 'vue-router'\nimport routes from './routers'\nimport store from '@/store'\nimport "
},
{
"path": "src/router/routers.js",
"chars": 10959,
"preview": "import Main from '@/components/main'\nimport parentView from '@/components/parent-view'\n\n/**\n * iview-admin中meta除了原生参数外可配"
},
{
"path": "src/store/index.js",
"chars": 272,
"preview": "import Vue from 'vue'\nimport Vuex from 'vuex'\n\nimport user from './module/user'\nimport app from './module/app'\n\nVue.use("
},
{
"path": "src/store/module/app.js",
"chars": 3085,
"preview": "import {\n getBreadCrumbList,\n setTagNavListInLocalstorage,\n getMenuByRouter,\n getTagNavListFromLocalstorage,\n getHo"
},
{
"path": "src/store/module/user.js",
"chars": 6007,
"preview": "import {\n login,\n logout,\n getUserInfo,\n getMessage,\n getContentByMsgId,\n hasRead,\n removeReaded,\n restoreTrash,"
},
{
"path": "src/view/argu-page/params.vue",
"chars": 604,
"preview": "<template>\n <div>\n <Card>\n <h2>ID: {{ $route.params.id }}</h2>\n <Button @click=\"close\">调用closeTag方法关闭本页</B"
},
{
"path": "src/view/argu-page/query.vue",
"chars": 599,
"preview": "<template>\n <div>\n <Card>\n <h2>ID: {{ $route.query.id }}</h2>\n <Button @click=\"close\">调用closeTag方法关闭本页</Bu"
},
{
"path": "src/view/components/count-to/count-to.vue",
"chars": 6312,
"preview": "<template>\n <div>\n <Row :gutter=\"14\">\n <i-col span=\"3\">\n <Card>\n <p slot=\"title\">\n <"
},
{
"path": "src/view/components/cropper/cropper.vue",
"chars": 893,
"preview": "<template>\n <div>\n <Row>\n <i-col span=\"12\">\n <Card>\n <div class=\"cropper-example cropper-first\""
},
{
"path": "src/view/components/drag-drawer/index.vue",
"chars": 2496,
"preview": "<template>\n <Card>\n <h3 style=\"padding: 10px 0;\">drag-drawer组件是对iview的drawer组件的封装，在支持drawer所有api的基础上，支持可拖动和footer底部插"
},
{
"path": "src/view/components/drag-list/drag-list.vue",
"chars": 2469,
"preview": "<template>\n <div>\n <Card>\n <div class=\"drag-box-card\">\n\n <!-- 切记设置list1和list2属性时，一定要添加.sync修饰符 -->\n "
},
{
"path": "src/view/components/editor/editor.vue",
"chars": 547,
"preview": "<template>\n <div>\n <editor ref=\"editor\" :value=\"content\" @on-change=\"handleChange\"/>\n <Button @click=\"changeConte"
},
{
"path": "src/view/components/icons/icons.vue",
"chars": 1662,
"preview": "<template>\n <Row>\n <i-col span=\"16\">\n <Row v-for=\"i in (customIconList.length / 3)\" :key=\"`custom-icon-row-${i}"
},
{
"path": "src/view/components/markdown/markdown.vue",
"chars": 298,
"preview": "<template>\n <div>\n <markdown-editor v-model=\"content\"/>\n </div>\n</template>\n\n<script>\nimport MarkdownEditor from '_"
},
{
"path": "src/view/components/org-tree/components/org-view.vue",
"chars": 4242,
"preview": "<template>\n <div\n ref=\"dragWrapper\"\n class=\"org-tree-drag-wrapper\"\n @mousedown=\"mousedownView\"\n @contextmen"
},
{
"path": "src/view/components/org-tree/components/zoom-controller.vue",
"chars": 1621,
"preview": "<template>\n <div class=\"zoom-wrapper\">\n <button class=\"zoom-button\" @click=\"scale('down')\">\n <Icon type=\"md-rem"
},
{
"path": "src/view/components/org-tree/index.less",
"chars": 1661,
"preview": "@wrapper: ~'department';\n.percent-100 {\n width: 100%;\n height: 100%;\n}\n.@{wrapper}-outer {\n .percent-100;\n overflow:"
},
{
"path": "src/view/components/org-tree/index.vue",
"chars": 1726,
"preview": "<template>\n <Card shadow style=\"height: 100%;width: 100%;overflow:hidden\">\n <div class=\"department-outer\">\n <di"
},
{
"path": "src/view/components/split-pane/split-pane.vue",
"chars": 1689,
"preview": "<template>\n <div class=\"split-pane-page-wrapper\">\n <split-pane v-model=\"offset\" @on-moving=\"handleMoving\">\n <di"
},
{
"path": "src/view/components/tables/tables.vue",
"chars": 1684,
"preview": "<template>\n <div>\n <Card>\n <tables ref=\"tables\" editable searchable search-place=\"top\" v-model=\"tableData\" :col"
},
{
"path": "src/view/components/tree-select/index.vue",
"chars": 2014,
"preview": "<template>\n <div>\n <tree-select\n v-model=\"treeSelected\"\n style=\"width: 300px;\"\n check-strictly\n"
},
{
"path": "src/view/components/tree-table/index.vue",
"chars": 5073,
"preview": "<template>\n <div>\n <Card shadow>\n 树状表格组件tree-table-vue，基于<a href=\"https://github.com/MisterTaki/vue-table-with-"
},
{
"path": "src/view/directive/directive.vue",
"chars": 2762,
"preview": "<template>\n <div>\n <Row>\n <i-col>\n <Card>\n <Row>\n <i-col span=\"8\">\n <Bu"
},
{
"path": "src/view/error-page/401.vue",
"chars": 353,
"preview": "<template>\n <error-content code=\"401\" desc=\"Oh~~您没有浏览这个页面的权限~\" :src=\"src\"/>\n</template>\n\n<script>\nimport error401 from "
},
{
"path": "src/view/error-page/404.vue",
"chars": 350,
"preview": "<template>\n <error-content code=\"404\" desc=\"Oh~~您的页面好像飞走了~\" :src=\"src\"/>\n</template>\n\n<script>\nimport error404 from '@/"
},
{
"path": "src/view/error-page/500.vue",
"chars": 352,
"preview": "<template>\n <error-content code=\"500\" desc=\"Oh~~鬼知道服务器经历了什么~\" :src=\"src\"/>\n</template>\n\n<script>\nimport error404 from '"
},
{
"path": "src/view/error-page/back-btn-group.vue",
"chars": 712,
"preview": "<template>\n <div>\n <Button size=\"large\" type=\"text\" @click=\"backHome\">返回首页</Button>\n <Button size=\"large\" type=\"t"
},
{
"path": "src/view/error-page/error-content.vue",
"chars": 535,
"preview": "<template>\n <div class=\"error-page\">\n <div class=\"content-con\">\n <img :src=\"src\" :alt=\"code\">\n <div class="
},
{
"path": "src/view/error-page/error.less",
"chars": 826,
"preview": ".error-page{\n width: 100%;\n height: 100%;\n position: relative;\n background: #f8f8f9;\n .content-con{\n width: 700p"
},
{
"path": "src/view/error-store/error-store.vue",
"chars": 1051,
"preview": "<template>\n <div>\n <Card>\n iview-admin会自动将你程序中的错误收集起来，你可以将错误日志发给后端保存起来。如果你不需要这个功能，将'./src/config/index.js'里的plu"
},
{
"path": "src/view/excel/common.less",
"chars": 901,
"preview": ".margin-top-8{\n margin-top: 8px;\n}\n.margin-top-10{\n margin-top: 10px;\n}\n.margin-top-20{\n margin-top: 20px;\n}\n.m"
},
{
"path": "src/view/excel/export-excel.vue",
"chars": 1587,
"preview": "<style lang=\"less\">\n @import \"./common.less\";\n</style>\n<template>\n <div>\n <Card title=\"导出EXCEL\">\n <Row>\n "
},
{
"path": "src/view/excel/upload-excel.vue",
"chars": 3122,
"preview": "<style lang=\"less\">\n @import \"./common.less\";\n</style>\n<template>\n <div>\n <Card title=\"导入EXCEL\">\n <Row>\n "
},
{
"path": "src/view/i18n/i18n-page.vue",
"chars": 1157,
"preview": "<template>\n <div>\n <Row :gutter=\"10\">\n <i-col span=\"6\">\n <Card>\n <div class=\"i18n-card-box\">\n "
},
{
"path": "src/view/join-page.vue",
"chars": 1859,
"preview": "<template>\n <div>\n <Card shadow title=\"社区\">\n <row class=\"join-page\" :gutter=\"32\">\n <i-col span=\"10\">\n "
},
{
"path": "src/view/login/login.less",
"chars": 664,
"preview": ".login{\n width: 100%;\n height: 100%;\n background-image: url('../../assets/images/login-bg.jpg');\n background"
},
{
"path": "src/view/login/login.vue",
"chars": 890,
"preview": "<style lang=\"less\">\n @import './login.less';\n</style>\n\n<template>\n <div class=\"login\">\n <div class=\"login-con\">\n "
},
{
"path": "src/view/multilevel/level-2-1.vue",
"chars": 107,
"preview": "<template>\n <div>多级菜单 -> 二级-1</div>\n</template>\n<script>\nexport default {\n name: 'level_2_1'\n}\n</script>\n"
},
{
"path": "src/view/multilevel/level-2-2/level-2-2-1.vue",
"chars": 238,
"preview": "<template>\n <div>\n <h3>多级菜单 -> 二级-2 -> 3级1</h3>\n <Input v-model=\"val\" style=\"width: 200px\"></Input>\n </div>\n</te"
},
{
"path": "src/view/multilevel/level-2-2/level-2-2-2.vue",
"chars": 238,
"preview": "<template>\n <div>\n <h3>多级菜单 -> 二级-2 -> 3级2</h3>\n <Input v-model=\"val\" style=\"width: 200px\"></Input>\n </div>\n</te"
},
{
"path": "src/view/multilevel/level-2-3.vue",
"chars": 107,
"preview": "<template>\n <div>多级菜单 -> 二级-3</div>\n</template>\n<script>\nexport default {\n name: 'level_2_3'\n}\n</script>\n"
},
{
"path": "src/view/single-page/error-logger.vue",
"chars": 1892,
"preview": "<template>\n <div>\n <Button @click=\"exportData\" type=\"primary\" style=\"margin: 0 10px 10px 0;\">导出日志记录</Button>\n <b>"
},
{
"path": "src/view/single-page/home/example.vue",
"chars": 2365,
"preview": "<template>\n <div ref=\"dom\"></div>\n</template>\n\n<script>\nimport echarts from 'echarts'\nimport { on, off } from '@/libs"
},
{
"path": "src/view/single-page/home/home.vue",
"chars": 2284,
"preview": "<template>\n <div>\n <Row :gutter=\"20\">\n <i-col :xs=\"12\" :md=\"8\" :lg=\"4\" v-for=\"(infor, i) in inforCardData\" :key"
},
{
"path": "src/view/single-page/home/index.js",
"chars": 50,
"preview": "import home from './home.vue'\nexport default home\n"
},
{
"path": "src/view/single-page/message/index.vue",
"chars": 5664,
"preview": "<template>\n <Card shadow>\n <div>\n <div class=\"message-page-con message-category-con\">\n <Menu width=\"auto"
},
{
"path": "src/view/tools-methods/tools-methods.vue",
"chars": 1582,
"preview": "<template>\n <div>\n <Card shadow>\n <Row>\n <i-col span=\"4\">\n <Button @click=\"createTagParams\">添加一"
},
{
"path": "src/view/update/update-paste.vue",
"chars": 1660,
"preview": "<template>\n <Row :gutter=\"10\">\n <i-col span=\"12\">\n <Card>\n <div class=\"update-paste-con\">\n <pas"
},
{
"path": "src/view/update/update-table.vue",
"chars": 1483,
"preview": "<template>\n <Row :gutter=\"10\">\n <i-col span=\"6\">\n <Card>\n <Upload action=\"\" :before-upload=\"beforeUpload"
},
{
"path": "tests/e2e/.eslintrc",
"chars": 138,
"preview": "{\n \"plugins\": [\n \"cypress\"\n ],\n \"env\": {\n \"mocha\": true,\n \"cypress/globals\": true\n },\n \"rules\": {\n \"str"
},
{
"path": "tests/e2e/plugins/index.js",
"chars": 331,
"preview": "// https://docs.cypress.io/guides/guides/plugins-guide.html\n\nmodule.exports = (on, config) => Object.assign({}, config, "
},
{
"path": "tests/e2e/specs/test.js",
"chars": 206,
"preview": "// https://docs.cypress.io/api/introduction/api.html\n\ndescribe('My First Test', () => {\n it('Visits the app root url', "
},
{
"path": "tests/e2e/support/commands.js",
"chars": 841,
"preview": "// ***********************************************\n// This example commands.js shows you how to\n// create various custom"
},
{
"path": "tests/e2e/support/index.js",
"chars": 670,
"preview": "// ***********************************************************\n// This example support/index.js is processed and\n// load"
},
{
"path": "tests/unit/.eslintrc.js",
"chars": 113,
"preview": "module.exports = {\n env: {\n mocha: true\n },\n rules: {\n 'import/no-extraneous-dependencies': 'off'\n }\n}\n"
},
{
"path": "tests/unit/HelloWorld.spec.js",
"chars": 362,
"preview": "import { expect } from 'chai'\nimport { shallow } from '@vue/test-utils'\nimport HelloWorld from '@/components/HelloWorld."
},
{
"path": "vue.config.js",
"chars": 1322,
"preview": "const path = require('path')\n\nconst resolve = dir => {\n return path.join(__dirname, dir)\n}\n\n// 项目部署基础\n// 默认情况下，我们假设你的应用"
}
]
About this extraction
This page contains the full source code of the iview/iview-admin GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 182 files (246.7 KB), approximately 77.2k tokens, and a symbol index with 58 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.