first commit
This commit is contained in:
czy_hys
@@ -0,0 +1,14 @@
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
insert_final_newline = false
|
||||
trim_trailing_whitespace = false
|
||||
@@ -0,0 +1,5 @@
|
||||
# just a flag
|
||||
ENV = 'development'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = /api
|
||||
@@ -0,0 +1,7 @@
|
||||
# just a flag
|
||||
ENV = 'production'
|
||||
|
||||
# base api 测试环境-打包代理
|
||||
#VUE_APP_BASE_API = '/charging_pile'
|
||||
# base api 生产环境-打包代理
|
||||
VUE_APP_BASE_API = '/api'
|
||||
@@ -0,0 +1,8 @@
|
||||
NODE_ENV = production
|
||||
|
||||
# just a flag
|
||||
ENV = 'staging'
|
||||
|
||||
# base api
|
||||
VUE_APP_BASE_API = ''
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
build/*.js
|
||||
src/assets
|
||||
public
|
||||
dist
|
||||
+287
@@ -0,0 +1,287 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint',
|
||||
sourceType: 'module'
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es6: true
|
||||
},
|
||||
extends: ['plugin:vue/recommended', 'eslint:recommended'],
|
||||
|
||||
// add your custom rules here
|
||||
//it is base on https://github.com/vuejs/eslint-config-vue
|
||||
rules: {
|
||||
'vue/max-attributes-per-line': [
|
||||
2,
|
||||
{
|
||||
singleline: 10,
|
||||
multiline: {
|
||||
max: 1,
|
||||
allowFirstLine: false
|
||||
}
|
||||
}
|
||||
],
|
||||
'vue/html-self-closing': [
|
||||
'error',
|
||||
{
|
||||
html: {
|
||||
void: 'never',
|
||||
normal: 'never',
|
||||
component: 'never'
|
||||
},
|
||||
svg: 'never',
|
||||
math: 'never'
|
||||
}
|
||||
],
|
||||
'vue/singleline-html-element-content-newline': 'off',
|
||||
'vue/multiline-html-element-content-newline': 'off',
|
||||
'vue/name-property-casing': ['error', 'PascalCase'],
|
||||
'vue/no-v-html': 'off',
|
||||
'accessor-pairs': 2,
|
||||
'arrow-spacing': [
|
||||
2,
|
||||
{
|
||||
before: true,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'block-spacing': [2, 'always'],
|
||||
'brace-style': [
|
||||
2,
|
||||
'1tbs',
|
||||
{
|
||||
allowSingleLine: true
|
||||
}
|
||||
],
|
||||
camelcase: [
|
||||
0,
|
||||
{
|
||||
properties: 'always'
|
||||
}
|
||||
],
|
||||
'comma-dangle': [2, 'never'],
|
||||
'comma-spacing': [
|
||||
2,
|
||||
{
|
||||
before: false,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'comma-style': [2, 'last'],
|
||||
'constructor-super': 2,
|
||||
curly: [2, 'multi-line'],
|
||||
'dot-location': [2, 'property'],
|
||||
'eol-last': 2,
|
||||
eqeqeq: ['error', 'always', { null: 'ignore' }],
|
||||
'generator-star-spacing': [
|
||||
2,
|
||||
{
|
||||
before: true,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'handle-callback-err': [2, '^(err|error)$'],
|
||||
indent: [
|
||||
2,
|
||||
2,
|
||||
{
|
||||
SwitchCase: 1
|
||||
}
|
||||
],
|
||||
'jsx-quotes': [2, 'prefer-single'],
|
||||
'key-spacing': [
|
||||
2,
|
||||
{
|
||||
beforeColon: false,
|
||||
afterColon: true
|
||||
}
|
||||
],
|
||||
'keyword-spacing': [
|
||||
2,
|
||||
{
|
||||
before: true,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'new-cap': [
|
||||
2,
|
||||
{
|
||||
newIsCap: true,
|
||||
capIsNew: false
|
||||
}
|
||||
],
|
||||
'new-parens': 2,
|
||||
'no-array-constructor': 2,
|
||||
'no-caller': 2,
|
||||
'no-console': 'off',
|
||||
'no-class-assign': 2,
|
||||
'no-cond-assign': 2,
|
||||
'no-const-assign': 2,
|
||||
'no-control-regex': 0,
|
||||
'no-delete-var': 2,
|
||||
'no-dupe-args': 2,
|
||||
'no-dupe-class-members': 2,
|
||||
'no-dupe-keys': 2,
|
||||
'no-duplicate-case': 2,
|
||||
'no-empty-character-class': 2,
|
||||
'no-empty-pattern': 2,
|
||||
'no-eval': 2,
|
||||
'no-ex-assign': 2,
|
||||
'no-extend-native': 2,
|
||||
'no-extra-bind': 2,
|
||||
'no-extra-boolean-cast': 2,
|
||||
'no-extra-parens': [2, 'functions'],
|
||||
'no-fallthrough': 2,
|
||||
'no-floating-decimal': 2,
|
||||
'no-func-assign': 2,
|
||||
'no-implied-eval': 2,
|
||||
'no-inner-declarations': [2, 'functions'],
|
||||
'no-invalid-regexp': 2,
|
||||
'no-irregular-whitespace': 2,
|
||||
'no-iterator': 2,
|
||||
'no-label-var': 2,
|
||||
'no-labels': [
|
||||
2,
|
||||
{
|
||||
allowLoop: false,
|
||||
allowSwitch: false
|
||||
}
|
||||
],
|
||||
'no-lone-blocks': 2,
|
||||
'no-mixed-spaces-and-tabs': 2,
|
||||
'no-multi-spaces': 2,
|
||||
'no-multi-str': 2,
|
||||
'no-multiple-empty-lines': [
|
||||
2,
|
||||
{
|
||||
max: 1
|
||||
}
|
||||
],
|
||||
'no-native-reassign': 2,
|
||||
'no-negated-in-lhs': 2,
|
||||
'no-new-object': 2,
|
||||
'no-new-require': 2,
|
||||
'no-new-symbol': 2,
|
||||
'no-new-wrappers': 2,
|
||||
'no-obj-calls': 2,
|
||||
'no-octal': 2,
|
||||
'no-octal-escape': 2,
|
||||
'no-path-concat': 2,
|
||||
'no-proto': 2,
|
||||
'no-redeclare': 2,
|
||||
'no-regex-spaces': 2,
|
||||
'no-return-assign': [2, 'except-parens'],
|
||||
'no-self-assign': 2,
|
||||
'no-self-compare': 2,
|
||||
'no-sequences': 2,
|
||||
'no-shadow-restricted-names': 2,
|
||||
'no-spaced-func': 2,
|
||||
'no-sparse-arrays': 2,
|
||||
'no-this-before-super': 2,
|
||||
'no-throw-literal': 2,
|
||||
'no-trailing-spaces': 2,
|
||||
'no-undef': 2,
|
||||
'no-undef-init': 2,
|
||||
'no-unexpected-multiline': 2,
|
||||
'no-unmodified-loop-condition': 2,
|
||||
'no-unneeded-ternary': [
|
||||
2,
|
||||
{
|
||||
defaultAssignment: false
|
||||
}
|
||||
],
|
||||
'no-unreachable': 2,
|
||||
'no-unsafe-finally': 2,
|
||||
'no-unused-vars': [
|
||||
2,
|
||||
{
|
||||
vars: 'all',
|
||||
args: 'none'
|
||||
}
|
||||
],
|
||||
'no-useless-call': 2,
|
||||
'no-useless-computed-key': 2,
|
||||
'no-useless-constructor': 2,
|
||||
'no-useless-escape': 0,
|
||||
'no-whitespace-before-property': 2,
|
||||
'no-with': 2,
|
||||
'one-var': [
|
||||
2,
|
||||
{
|
||||
initialized: 'never'
|
||||
}
|
||||
],
|
||||
'operator-linebreak': [
|
||||
2,
|
||||
'after',
|
||||
{
|
||||
overrides: {
|
||||
'?': 'before',
|
||||
':': 'before'
|
||||
}
|
||||
}
|
||||
],
|
||||
'padded-blocks': [2, 'never'],
|
||||
quotes: [
|
||||
2,
|
||||
'single',
|
||||
{
|
||||
avoidEscape: true,
|
||||
allowTemplateLiterals: true
|
||||
}
|
||||
],
|
||||
semi: [2, 'never'],
|
||||
'semi-spacing': [
|
||||
2,
|
||||
{
|
||||
before: false,
|
||||
after: true
|
||||
}
|
||||
],
|
||||
'space-before-blocks': [2, 'always'],
|
||||
'space-before-function-paren': [2, 'never'],
|
||||
'space-in-parens': [2, 'never'],
|
||||
'space-infix-ops': 2,
|
||||
'space-unary-ops': [
|
||||
2,
|
||||
{
|
||||
words: true,
|
||||
nonwords: false
|
||||
}
|
||||
],
|
||||
'spaced-comment': [
|
||||
2,
|
||||
'always',
|
||||
{
|
||||
markers: [
|
||||
'global',
|
||||
'globals',
|
||||
'eslint',
|
||||
'eslint-disable',
|
||||
'*package',
|
||||
'!',
|
||||
','
|
||||
]
|
||||
}
|
||||
],
|
||||
'template-curly-spacing': [2, 'never'],
|
||||
'use-isnan': 2,
|
||||
'valid-typeof': 2,
|
||||
'wrap-iife': [2, 'any'],
|
||||
'yield-star-spacing': [2, 'both'],
|
||||
yoda: [2, 'never'],
|
||||
'prefer-const': 2,
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
||||
'object-curly-spacing': [
|
||||
2,
|
||||
'always',
|
||||
{
|
||||
objectsInObjects: false
|
||||
}
|
||||
],
|
||||
'array-bracket-spacing': [2, 'never']
|
||||
}
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
package-lock.json
|
||||
tests/**/coverage/
|
||||
*.zip
|
||||
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
@@ -0,0 +1,5 @@
|
||||
language: node_js
|
||||
node_js: 10
|
||||
script: npm run test
|
||||
notifications:
|
||||
email: false
|
||||
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2017-present PanJiaChen
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
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.
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
# vue-admin-template
|
||||
|
||||
> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
|
||||
|
||||
[线上地址](http://panjiachen.github.io/vue-admin-template)
|
||||
|
||||
[国内访问](https://panjiachen.gitee.io/vue-admin-template)
|
||||
|
||||
目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。
|
||||
|
||||
<p align="center">
|
||||
<b>SPONSORED BY</b>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank">
|
||||
<img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Extra
|
||||
|
||||
如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
|
||||
|
||||
## 相关项目
|
||||
|
||||
- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
|
||||
|
||||
- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||
|
||||
- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
|
||||
|
||||
- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
|
||||
|
||||
写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
|
||||
|
||||
- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
|
||||
- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
|
||||
- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
|
||||
- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
|
||||
- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
|
||||
|
||||
## Build Setup
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://github.com/PanJiaChen/vue-admin-template.git
|
||||
|
||||
# 进入项目目录
|
||||
cd vue-admin-template
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
|
||||
npm install --registry=https://registry.npm.taobao.org
|
||||
|
||||
# 启动服务
|
||||
npm run dev
|
||||
```
|
||||
|
||||
浏览器访问 [http://localhost:9528](http://localhost:9528)
|
||||
|
||||
## 发布
|
||||
|
||||
```bash
|
||||
# 构建测试环境
|
||||
npm run build:stage
|
||||
|
||||
# 构建生产环境
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
## 其它
|
||||
|
||||
```bash
|
||||
# 预览发布环境效果
|
||||
npm run preview
|
||||
|
||||
# 预览发布环境效果 + 静态资源分析
|
||||
npm run preview -- --report
|
||||
|
||||
# 代码格式检查
|
||||
npm run lint
|
||||
|
||||
# 代码格式检查并自动修复
|
||||
npm run lint -- --fix
|
||||
```
|
||||
|
||||
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
|
||||
|
||||
## 购买贴纸
|
||||
|
||||
你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸，我们将获得 2 元的捐赠。
|
||||
|
||||
## Demo
|
||||
|
||||
|
||||
|
||||
## Browsers support
|
||||
|
||||
Modern browsers and Internet Explorer 10+.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --------- | --------- | --------- | --------- |
|
||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
|
||||
|
||||
Copyright (c) 2017-present PanJiaChen
|
||||
@@ -0,0 +1,41 @@
|
||||
# 格绿班充电桩-项目帮助
|
||||
|
||||
## 开发
|
||||
|
||||
```powershell
|
||||
|
||||
## 1. 设置API代理服务器
|
||||
# $env:VUE_PROXY="http://192.168.0.139:9011" // 张琪
|
||||
# $env:VUE_PROXY="http://192.168.0.204:9011" // 许强
|
||||
# $env:VUE_PROXY="http://218.59.175.31:9018" // 测试环境
|
||||
# $env:VUE_PROXY="" // 使用默认代理: http://218.59.175.31:9018
|
||||
|
||||
## 2. 运行开发
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
```
|
||||
|
||||
This will automatically open <http://localhost:9528>
|
||||
|
||||
## 打包
|
||||
|
||||
```bash
|
||||
# build for test environment
|
||||
npm run build:stage
|
||||
|
||||
# build for production environment
|
||||
npm run build:prod
|
||||
备注：1.项目打包，vue.config.js文件第40行，打包生成环境，百度地图的key也需要使用生产环境，如果是测试环境打包，则需要注释生产环境的key
|
||||
1.项目打包，.env.production 文件注意区分 测试环境环境打包代理是：VUE_APP_BASE_API = '/charging_pile' 生产环境打包代理是：VUE_APP_BASE_API = '/api'
|
||||
|
||||
## 添加新页面步骤
|
||||
1.创建页面后，需要注意里面的name（组件名称）赋值需要和文件名一致 比如：carDeviceInformation.vue文件里面的name为 name: "carDeviceInformation",
|
||||
2.其他就是在【菜单管理（开发使用）】页面添加路由，接着就是要记得给角色授权，否则页面不展示出来
|
||||
3. 同时需要同步添加的文件：\locales\en.json 和：\locales\zh.json （添加页面的标题翻译），请注意父级也需要在这个文件添加，并且和要和【菜单管理（开发使用）】页面添加路由时的国际化翻译一致，否则会报错"Error in render: "ReferenceError: title is not defined"
|
||||
|
||||
|
||||
## 测试环境账号： admin zheshimimacp 如果报错500或者502则需要后台开启服务才可以正常登录
|
||||
|
||||
|
||||
1. 2026年6029号上线的功能：电单车充电收费计算：国家标准电费单价*充电度数+功率阶梯收的服务费*充电时长=总的充电价格（其中前面2分钟是免费的），添加了国家电费单价的数据框
|
||||
@@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
// https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
],
|
||||
'env': {
|
||||
'development': {
|
||||
// babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
|
||||
// This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
|
||||
// https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
|
||||
'plugins': ['dynamic-import-node']
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
const { run } = require('runjs')
|
||||
const chalk = require('chalk')
|
||||
const config = require('../vue.config.js')
|
||||
const rawArgv = process.argv.slice(2)
|
||||
const args = rawArgv.join(' ')
|
||||
|
||||
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
|
||||
const report = rawArgv.includes('--report')
|
||||
|
||||
run(`vue-cli-service build ${args}`)
|
||||
|
||||
const port = 9526
|
||||
const publicPath = config.publicPath
|
||||
|
||||
var connect = require('connect')
|
||||
var serveStatic = require('serve-static')
|
||||
const app = connect()
|
||||
|
||||
app.use(
|
||||
publicPath,
|
||||
serveStatic('./dist', {
|
||||
index: ['index.html', '/']
|
||||
})
|
||||
)
|
||||
|
||||
app.listen(port, function () {
|
||||
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
|
||||
if (report) {
|
||||
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
|
||||
}
|
||||
|
||||
})
|
||||
} else {
|
||||
run(`vue-cli-service build ${args}`)
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
|
||||
module.exports = {
|
||||
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
|
||||
transform: {
|
||||
'^.+\\.vue$': 'vue-jest',
|
||||
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
|
||||
'jest-transform-stub',
|
||||
'^.+\\.jsx?$': 'babel-jest'
|
||||
},
|
||||
moduleNameMapper: {
|
||||
'^@/(.*)$': '<rootDir>/src/$1'
|
||||
},
|
||||
snapshotSerializers: ['jest-serializer-vue'],
|
||||
testMatch: [
|
||||
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
|
||||
],
|
||||
collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
|
||||
coverageDirectory: '<rootDir>/tests/unit/coverage',
|
||||
// 'collectCoverage': true,
|
||||
'coverageReporters': [
|
||||
'lcov',
|
||||
'text-summary'
|
||||
],
|
||||
testURL: 'http://localhost/'
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
{
|
||||
"name": "car-operation-management",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"author": "",
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve",
|
||||
"build:prod": "vue-cli-service build",
|
||||
"build:stage": "vue-cli-service build --mode staging",
|
||||
"preview": "node build/index.js --preview",
|
||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||
"test:ci": "npm run lint && npm run test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.18.1",
|
||||
"core-js": "^3.20.3",
|
||||
"dayjs": "^1.11.7",
|
||||
"echarts": "^6.1.0",
|
||||
"element-ui": "2.15.7",
|
||||
"js-cookie": "^2.2.0",
|
||||
"js-image-compressor": "^2.0.0",
|
||||
"md5": "^2.3.0",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"qs": "^6.10.3",
|
||||
"v-viewer": "^1.6.4",
|
||||
"vue": "2.6.10",
|
||||
"vue-i18n": "^7.3.2",
|
||||
"vue-router": "3.0.6",
|
||||
"vuex": "3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "4.4.4",
|
||||
"@vue/cli-plugin-eslint": "4.4.4",
|
||||
"@vue/cli-plugin-unit-jest": "4.4.4",
|
||||
"@vue/cli-service": "4.4.4",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"autoprefixer": "9.5.1",
|
||||
"babel-eslint": "^7.2.3",
|
||||
"babel-jest": "23.6.0",
|
||||
"babel-plugin-dynamic-import-node": "2.3.3",
|
||||
"chalk": "2.4.2",
|
||||
"connect": "3.6.6",
|
||||
"eslint": "6.7.2",
|
||||
"eslint-plugin-vue": "6.2.2",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"runjs": "4.3.2",
|
||||
"sass": "^1.39.2",
|
||||
"sass-loader": "^10.2.1",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
"serve-static": "1.13.2",
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.2",
|
||||
"vue-template-compiler": "2.6.10"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
|
||||
module.exports = {
|
||||
'plugins': {
|
||||
// to edit target browsers: use "browserslist" field in package.json
|
||||
'autoprefixer': {}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
|
||||
/>
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<!-- <title><%= webpackConfig.name %></title> -->
|
||||
<title>沃尔核材工作台</title>
|
||||
</head>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=<%= htmlWebpackPlugin.options.baidu_key %>"
|
||||
></script>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong
|
||||
>We're sorry but <%= webpackConfig.name %> 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>
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,82 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 列表
|
||||
export function getCarListReq (parameter) {
|
||||
return request({
|
||||
url: '/car/list',
|
||||
method: 'POST',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
// 部门列表树
|
||||
export function getBDepartmentList (parameter) {
|
||||
return request({
|
||||
url: '/sys/Department/departmentList',
|
||||
method: 'POST',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
// 区域列表树
|
||||
export function listByLoginUser (parameter) {
|
||||
return request({
|
||||
url: '/sys/area/listByLoginUser',
|
||||
method: 'POST',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
// 车辆类型
|
||||
export function getCarTypeInfoList () {
|
||||
return request({
|
||||
url: '/carType/findAll',
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function saveOrUpdate (parameter) {
|
||||
return request({
|
||||
url: '/car/saveOrUpdate',
|
||||
method: 'post',
|
||||
data: parameter
|
||||
})
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteCar (parameter) {
|
||||
return request({
|
||||
url: '/car/delete',
|
||||
method: 'post',
|
||||
data: parameter
|
||||
})
|
||||
}
|
||||
|
||||
// 导入模板下载
|
||||
export function downloadMouldReq () {
|
||||
return request({
|
||||
url: '/car/car/v1/downloadMould',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 导入
|
||||
export function doImportReq (file) {
|
||||
const formData = new FormData()
|
||||
formData.append('files[]', file)
|
||||
|
||||
return request({
|
||||
url: '/car/car/v1/importExcel',
|
||||
method: 'post',
|
||||
processData: false,
|
||||
data: formData
|
||||
})
|
||||
}
|
||||
|
||||
// 导出
|
||||
export function exportReq () {
|
||||
return request({
|
||||
url: '/car/car/v1/export',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import request from '@/utils/request'
|
||||
// import { classify } from '@/utils/request'
|
||||
import qs from 'qs' // axios自带的工具不需要安装npm依赖
|
||||
// 上传图片
|
||||
export function uploadFile(file) {
|
||||
const formData = new FormData()
|
||||
formData.append('multiPath', file)
|
||||
return request({
|
||||
url: '/upload/v1/uploadPic',
|
||||
method: 'POST',
|
||||
data: formData,
|
||||
headers: {
|
||||
'content-type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 分类上传图片
|
||||
export function classifyUploadFile(file) {
|
||||
const formData = new FormData()
|
||||
formData.append('multiPath', file)
|
||||
// return classify({
|
||||
return request({
|
||||
url: '/upload/uploadPicFile',
|
||||
method: 'POST',
|
||||
data: formData,
|
||||
headers: {
|
||||
'content-type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
export function geUploadfiles(file) {
|
||||
const formData = new FormData()
|
||||
formData.append('multiPath', file)
|
||||
return request({
|
||||
url: '/upload/v1/uploadPic',
|
||||
method: 'POST',
|
||||
data: formData,
|
||||
headers: {
|
||||
'content-type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// ====================================
|
||||
// 代码生成器生成后，要根据实际情况补足 url
|
||||
// 相关接口
|
||||
// ====================================
|
||||
const api = {
|
||||
SysMenuList: "/web/sysMenu/sysMenuList",
|
||||
addEditSysMenu: "/web/sysMenu/addOrUpdate",
|
||||
deleteSysMenu: "/web/sysMenu/delete"
|
||||
};
|
||||
|
||||
export default api;
|
||||
|
||||
// 列表
|
||||
export function getSysMenuListReq(parameter) {
|
||||
return request({
|
||||
url: api.SysMenuList,
|
||||
method: "post",
|
||||
params: parameter
|
||||
});
|
||||
}
|
||||
|
||||
// 新增修改
|
||||
export function addEditSysMenuReq(parameter) {
|
||||
return request({
|
||||
url: api.addEditSysMenu,
|
||||
method: "post",
|
||||
data: JSON.parse(JSON.stringify(parameter))
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteSysMenuReq(parameter) {
|
||||
return request({
|
||||
url: api.deleteSysMenu,
|
||||
method: "post",
|
||||
data: parameter
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import request from "@/utils/request";
|
||||
import qs from "qs";
|
||||
// ====================================
|
||||
// 代码生成器生成后，要根据实际情况补足 url
|
||||
// 相关接口
|
||||
// ====================================
|
||||
const api = {
|
||||
checkValidData: "/web/sysRole/checkValidData",
|
||||
SysRoleList: "/web/sysRole/list",
|
||||
addEditSysRole: "/web/sysRole/addOrUpdate",
|
||||
deleteSysRole: "/web/sysRole/batchDelete",
|
||||
downloadMould: "/sys/sysRole/v1/downloadMould",
|
||||
importMould: "/sys/sysRole/v1/export",
|
||||
export: "/sys/sysRole/v1/importExcel",
|
||||
getRoleMenu: "/web/sysRole/systemManagementList",
|
||||
roleAuthorization: "/web/sysRole/roleAuthorization",
|
||||
yueNengDropDown: "/web/sysRole/yueNengDropDown"
|
||||
};
|
||||
|
||||
export default api;
|
||||
|
||||
// 验证角色名称
|
||||
export function checkValidData(parameter) {
|
||||
return request({
|
||||
url: api.checkValidData,
|
||||
method: "post",
|
||||
params: parameter
|
||||
});
|
||||
}
|
||||
// 列表
|
||||
export function getSysRoleListReq(parameter) {
|
||||
return request({
|
||||
url: api.SysRoleList,
|
||||
method: "post",
|
||||
data: parameter
|
||||
});
|
||||
}
|
||||
|
||||
// 新增修改
|
||||
export function addEditSysRoleReq(parameter) {
|
||||
return request({
|
||||
url: api.addEditSysRole,
|
||||
method: "post",
|
||||
data: JSON.parse(JSON.stringify(parameter))
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteSysRoleReq(parameter) {
|
||||
return request({
|
||||
url: api.deleteSysRole,
|
||||
method: "post",
|
||||
data: parameter
|
||||
});
|
||||
}
|
||||
|
||||
// 导入模板下载
|
||||
export function downloadMouldReq() {
|
||||
return request({
|
||||
url: api.downloadMould,
|
||||
method: "post"
|
||||
});
|
||||
}
|
||||
|
||||
// 导入
|
||||
export function doImportReq(file) {
|
||||
const formData = new FormData();
|
||||
formData.append("files[]", file);
|
||||
|
||||
return request({
|
||||
url: api.importMould,
|
||||
method: "post",
|
||||
processData: false,
|
||||
data: formData
|
||||
});
|
||||
}
|
||||
|
||||
// 导出
|
||||
export function exportReq() {
|
||||
return request({
|
||||
url: api.export,
|
||||
method: "post"
|
||||
});
|
||||
}
|
||||
// 获取角色绑定的菜单
|
||||
export function getRoleMenu(params) {
|
||||
return request({
|
||||
url: api.getRoleMenu,
|
||||
method: "post",
|
||||
data: params
|
||||
});
|
||||
}
|
||||
// 角色授权菜单
|
||||
export function roleAuthorization(params) {
|
||||
return request({
|
||||
url: api.roleAuthorization,
|
||||
method: "post",
|
||||
data: params
|
||||
});
|
||||
}
|
||||
// 下拉框-所有角色
|
||||
export function yueNengDropDown(params) {
|
||||
return request({
|
||||
url: api.yueNengDropDown,
|
||||
method: "post",
|
||||
data: params
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import request from "@/utils/request";
|
||||
import qs from "qs/lib/index";
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
export function login(data) {
|
||||
return request({
|
||||
url: "/login/login",
|
||||
method: "post",
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
/** 废弃 */
|
||||
export function getInfo(token) {
|
||||
return request({
|
||||
url: "/login/v1/info",
|
||||
method: "get",
|
||||
params: { token }
|
||||
});
|
||||
}
|
||||
|
||||
export function logout() {
|
||||
return request({
|
||||
url: "/login/logout",
|
||||
method: "post"
|
||||
});
|
||||
}
|
||||
|
||||
export function getCurrentUserNav() {
|
||||
return request({
|
||||
url: "/login/nav",
|
||||
method: "post",
|
||||
data: { tag: 1 }
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export function getUserButton() {
|
||||
return request({
|
||||
url: "/login/button",
|
||||
method: "post"
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import request from "@/utils/request";
|
||||
// 绑定小程序的用户
|
||||
export function getList(parameter) {
|
||||
return request({
|
||||
url: "/web/member/divideIntoUserInfoList",
|
||||
method: "post",
|
||||
data: parameter
|
||||
});
|
||||
}
|
||||
|
||||
export function getListUser(parameter) {
|
||||
return request({
|
||||
url: "/web/member/list",
|
||||
method: "post",
|
||||
data: parameter
|
||||
});
|
||||
}
|
||||
|
||||
export function addOrUpdate(parameter) {
|
||||
return request({
|
||||
url: "/web/member/addOrUpdate",
|
||||
method: "post",
|
||||
data: parameter
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 导出
|
||||
export function exportReq(parameter) {
|
||||
return request({
|
||||
url: '/web/member/export',
|
||||
method: 'get',
|
||||
responseType: 'blob',
|
||||
params: parameter,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 导入
|
||||
export function doImportReq (file) {
|
||||
const formData = new FormData()
|
||||
formData.append('files[]', file)
|
||||
|
||||
return request({
|
||||
url: '/car/car/v1/importExcel',
|
||||
method: 'post',
|
||||
processData: false,
|
||||
data: formData
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
+24733
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 413 B |
Binary file not shown.
|
After Width: | Height: | Size: 555 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 986 B |
Binary file not shown.
|
After Width: | Height: | Size: 967 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 661 B |
Binary file not shown.
|
After Width: | Height: | Size: 619 B |
Binary file not shown.
|
After Width: | Height: | Size: 548 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 712 B |
Binary file not shown.
|
After Width: | Height: | Size: 788 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 660 B |
Binary file not shown.
|
After Width: | Height: | Size: 617 B |
Binary file not shown.
|
After Width: | Height: | Size: 839 B |
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div ref="gis_container" class="gis_container">
|
||||
<mapSearch />
|
||||
<div ref="map_container" class="map_container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mapStyleJson from './mapConfig2022926.json'
|
||||
import mapSearch from './mapsearch.vue'
|
||||
export default {
|
||||
name: 'Gis',
|
||||
components: {
|
||||
mapSearch
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.map_instance.destroy()
|
||||
this.map_instance = null
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* @description: gis 初始化
|
||||
*/
|
||||
init () {
|
||||
var map = new BMapGL.Map(this.$refs.map_container)
|
||||
map.centerAndZoom('青岛市', 18) // 初始化地图,设置中心点坐标和地图级别
|
||||
map.setMapStyleV2({ styleJson: mapStyleJson })
|
||||
map.enableKeyboard()
|
||||
this.map_instance = map
|
||||
this.mapCenter = map.getCenter()
|
||||
//map.disableInertialDragging()
|
||||
map.enableScrollWheelZoom(true)
|
||||
},
|
||||
|
||||
//用户打点
|
||||
setPoInt (resualt) {
|
||||
this.resualt = resualt
|
||||
this.clearMap()
|
||||
this.defaultCur = this.map_instance.getDefaultCursor()
|
||||
this.map_instance.setDefaultCursor('crosshair')
|
||||
this.map_instance.addEventListener('click', this.createPoint)
|
||||
},
|
||||
|
||||
//地图标记
|
||||
createPoint (e) {
|
||||
this.draw_complete_handle(e) //获取需要的地址数据
|
||||
//辅助显示--视觉效果标记
|
||||
const point = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
|
||||
// console.log(e.latlng.lng, e.latlng.lat);
|
||||
var marker = new BMapGL.Marker(point)
|
||||
this.map_instance.addOverlay(marker)
|
||||
this.map_instance.removeEventListener('click', this.createPoint)
|
||||
if (this.defaultCur) this.map_instance.setDefaultCursor(this.defaultCur)
|
||||
},
|
||||
|
||||
//位置反显
|
||||
showPoint (lng, lat) {
|
||||
setTimeout(() => {
|
||||
//防止地图没有初始化
|
||||
this.clearMap()
|
||||
const point = new BMapGL.Point(lng, lat)
|
||||
var marker = new BMapGL.Marker(point)
|
||||
this.map_instance.flyTo(point, 15)
|
||||
this.map_instance.addOverlay(marker)
|
||||
}, 2000)
|
||||
},
|
||||
|
||||
// 携带位置信息
|
||||
draw_complete_handle (e) {
|
||||
BMapGL.Geocoder.prototype.getLocation(
|
||||
e.latlng,
|
||||
geocoderResult => {
|
||||
this.resualt({ latlng: e.latlng, geocoderResult })
|
||||
},
|
||||
null
|
||||
)
|
||||
},
|
||||
|
||||
/** 清空地图
|
||||
* @return undefied
|
||||
*/
|
||||
clearMap () {
|
||||
this.map_instance && this.map_instance.clearOverlays()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gis_container,
|
||||
.map_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="map_search_container">
|
||||
<input
|
||||
ref="suggestId"
|
||||
results="s"
|
||||
type="search"
|
||||
class="searchTerm"
|
||||
placeholder="位置检索"
|
||||
/>
|
||||
<div class="btn">
|
||||
<i class="el-icon-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
var ac = new BMapGL.Autocomplete({
|
||||
input: this.$refs.suggestId,
|
||||
location: this.$parent.map_instance,
|
||||
});
|
||||
ac.addEventListener("onconfirm", (e) => {
|
||||
var _value = e.item.value;
|
||||
var cilick_value =
|
||||
_value.province +
|
||||
_value.city +
|
||||
_value.district +
|
||||
_value.street +
|
||||
_value.business;
|
||||
var local = new BMapGL.LocalSearch(this.$parent.map_instance, {
|
||||
onSearchComplete: () => {
|
||||
var pp = local.getResults().getPoi(0).point;
|
||||
this.$parent.map_instance.flyTo(pp, 18);
|
||||
let marPoint = new BMapGL.Marker(pp);
|
||||
this.$parent.map_instance.addOverlay(marPoint); // 添加标注
|
||||
setTimeout(() => {
|
||||
this.$parent.map_instance.removeOverlay(marPoint);
|
||||
}, 3000);
|
||||
},
|
||||
});
|
||||
local.search(cilick_value);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.map_search_container {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
margin-top: 20px;
|
||||
margin-left: 18px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.searchTerm {
|
||||
position: relative;
|
||||
width: 283px;
|
||||
height: 33px;
|
||||
border: 3px solid #ffffff;
|
||||
padding: 5px;
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
outline: none;
|
||||
color: #9dbfaf;
|
||||
}
|
||||
|
||||
.btn {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
background-color: #3385ff;
|
||||
width: 56px;
|
||||
height: 33px;
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
top: 0px;
|
||||
left: 283px;
|
||||
font-size: 20px;
|
||||
line-height: 33px;
|
||||
border: 1px solid #3385ff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #327ef1;
|
||||
}
|
||||
|
||||
.searchTerm:focus {
|
||||
color: #00b4cc;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<el-breadcrumb class="app-breadcrumb" separator-class="el-icon-arrow-right">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
||||
<span
|
||||
v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
|
||||
class="no-redirect"
|
||||
>{{ generateTitle(item) }}</span
|
||||
>
|
||||
<a v-else class="redirect" @click.prevent="handleLink(item)">{{
|
||||
generateTitle(item)
|
||||
}}</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { generateTitle } from "@/utils/i18n";
|
||||
import pathToRegexp from "path-to-regexp";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
levelList: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.getBreadcrumb();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getBreadcrumb();
|
||||
},
|
||||
methods: {
|
||||
generateTitle,
|
||||
getBreadcrumb() {
|
||||
// only show routes with meta.title
|
||||
let matched = this.$route.matched.filter(
|
||||
(item) => item.meta && item.meta.title
|
||||
);
|
||||
const first = matched[0];
|
||||
|
||||
if (!this.isDashboard(first)) {
|
||||
matched = [
|
||||
{
|
||||
path: "/dashboard",
|
||||
meta: { title: "Dashboard", i18n: "Dashboard" },
|
||||
},
|
||||
].concat(matched);
|
||||
}
|
||||
|
||||
this.levelList = matched.filter(
|
||||
(item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
|
||||
);
|
||||
},
|
||||
isDashboard(route) {
|
||||
const name = route && route.name;
|
||||
if (!name) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
name.trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase()
|
||||
);
|
||||
},
|
||||
pathCompile(path) {
|
||||
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
|
||||
const { params } = this.$route;
|
||||
var toPath = pathToRegexp.compile(path);
|
||||
return toPath(params);
|
||||
},
|
||||
handleLink(item) {
|
||||
const { redirect, path } = item;
|
||||
if (redirect) {
|
||||
this.$router.push(redirect);
|
||||
return;
|
||||
}
|
||||
this.$router.push(this.pathCompile(path));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
// font-size: 14px;
|
||||
line-height: 50px;
|
||||
margin-left: 8px;
|
||||
font-size: 16px;
|
||||
.redirect {
|
||||
color: #6e8aa0;
|
||||
}
|
||||
.no-redirect {
|
||||
color: #97a8be;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
:width="width"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
:before-close="onCancel"
|
||||
>
|
||||
<el-form
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="Form"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
label-suffix=":"
|
||||
>
|
||||
<el-row>
|
||||
<el-col
|
||||
:span="item.span ? 24 / item.span : 24 / span"
|
||||
v-for="(item, index) in formList"
|
||||
:key="index"
|
||||
>
|
||||
<!-- 下拉框 -->
|
||||
<el-form-item
|
||||
v-if="item.type == 'select'"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-select
|
||||
v-model="form[item.value]"
|
||||
filterable
|
||||
:placeholder="item.placeholder"
|
||||
style="width: 100%"
|
||||
:multiple="item.multiple"
|
||||
:collapse-tags="item.multiple"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<el-option
|
||||
v-for="(it, i) in item.options"
|
||||
:key="i"
|
||||
:label="it.i18n ? $t(it.i18n) : it.label"
|
||||
:value="it.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 树形下拉框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'treeSelect'"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<select-tree
|
||||
:props="item.defaultProps"
|
||||
:options="item.options"
|
||||
v-model="form[item.value]"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 级联 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'cascader'"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-cascader
|
||||
style="width: 100%"
|
||||
:placeholder="item.placeholder"
|
||||
v-model="form[item.value]"
|
||||
:options="item.options"
|
||||
@change="item.handleChange ? item.handleChange : () => {}"
|
||||
:props="item.props ? item.props : { value: 'id', label: 'text' }"
|
||||
:show-all-levels="false"
|
||||
:disabled="item.disabled"
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
<!-- 时间选择器 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'datePicker'"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-date-picker
|
||||
type="date"
|
||||
:placeholder="item.placeholder"
|
||||
v-model="form[item.value]"
|
||||
style="width: 100%"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
:disabled="item.disabled"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<!-- 切换按钮 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'switch'"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-switch
|
||||
v-model="form[item.value]"
|
||||
:disabled="item.disabled"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<!-- 复选框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'checkbox'"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-checkbox-group
|
||||
v-model="form[item.value]"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<el-checkbox
|
||||
v-for="it in item.options"
|
||||
:key="it.value"
|
||||
:label="it.value"
|
||||
>{{ it.i18n ? $t(it.i18n) : it.label }}</el-checkbox
|
||||
>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<!-- 单选框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'radio'"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-radio-group
|
||||
v-model="form[item.value]"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<el-radio
|
||||
v-for="it in item.options"
|
||||
:key="it.value"
|
||||
:label="it.value"
|
||||
>{{ it.i18n ? $t(it.i18n) : it.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- 数字输入框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'number'"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-input-number
|
||||
style="width: 100%"
|
||||
:disabled="item.disabled"
|
||||
v-model="form[item.value]"
|
||||
:min="item.min ? item.min : 0"
|
||||
:max="item.max"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文本域 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'textarea'"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form[item.value]"
|
||||
:disabled="item.disabled"
|
||||
:placeholder="item.placeholder"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- 密码框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'password'"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="form[item.value]"
|
||||
:disabled="item.disabled"
|
||||
:placeholder="item.placeholder"
|
||||
@focus="item.focus?item.focus():()=>{}"
|
||||
@blur="item.blur?item.blur():()=>{}"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-else
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-input
|
||||
v-model="form[item.value]"
|
||||
:disabled="item.disabled"
|
||||
:placeholder="item.placeholder"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="onCancel">{{ $t("common.cancel") }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit" :loading="dialogLoading">{{
|
||||
$t("common.confirm")
|
||||
}}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import SelectTree from "../SelectTree";
|
||||
export default {
|
||||
name: "FormDialog",
|
||||
components: { SelectTree },
|
||||
props: {
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
dialogLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
span: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "添加",
|
||||
},
|
||||
width: {
|
||||
type: String | Number,
|
||||
default: "50%",
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
formList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: "确定",
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: "取消",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// dialogVisible:false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
onSubmit() {
|
||||
this.$refs["Form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$emit("submit");
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetFields(){
|
||||
this.$refs.Form.resetFields();
|
||||
},
|
||||
onCancel() {
|
||||
this.$refs.Form.resetFields();
|
||||
// this.$destroy(true)
|
||||
this.$emit("cancel");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div style="padding: 0 15px;" @click="toggleClick">
|
||||
<svg
|
||||
:class="{'is-active':isActive}"
|
||||
class="hamburger"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="64"
|
||||
height="64"
|
||||
fill="#ffffff"
|
||||
>
|
||||
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Hamburger',
|
||||
props: {
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleClick() {
|
||||
this.$emit('toggleClick')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
/* filter: drop-shadow(#ffffff 0px 0); */
|
||||
}
|
||||
|
||||
.hamburger.is-active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
:width="width"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
:before-close="onCancel"
|
||||
center
|
||||
>
|
||||
<div style="display: flex; align-items: center; justify-content: center;max-width:960px">
|
||||
<viewer :images="[src]">
|
||||
<img style="object-fit: cover;width:100%" v-for="item in [src]" :key="item" :src="item" />
|
||||
<!-- <img style="object-fit: cover" :src="src" alt="" /> -->
|
||||
</viewer>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '50%',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '图片',
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onCancel () {
|
||||
this.$destroy(true);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
|
||||
<div>
|
||||
<!-- <svg-icon class-name="international-icon" icon-class="language" /> -->
|
||||
<img :src="icon" alt="">
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :disabled="language==='zh'" command="zh">
|
||||
中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="language==='en'" command="en">
|
||||
English
|
||||
</el-dropdown-item>
|
||||
<!-- <el-dropdown-item :disabled="language==='es'" command="es">
|
||||
Español
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="language==='ja'" command="ja">
|
||||
日本語
|
||||
</el-dropdown-item> -->
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
language() {
|
||||
return this.$store.getters.language
|
||||
},
|
||||
icon(){
|
||||
return require(`../../assets/layout/${this.$store.getters.theme}/language.png`)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLanguage(lang) {
|
||||
this.$i18n.locale = lang
|
||||
this.$store.dispatch('app/setLanguage', lang)
|
||||
this.$message({
|
||||
message: 'Switch Language Success',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
:width="width"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
:before-close="onCancel"
|
||||
center
|
||||
>
|
||||
<el-form
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="searchForm"
|
||||
label-position="right"
|
||||
label-width="100px"
|
||||
label-suffix=":"
|
||||
>
|
||||
<el-row>
|
||||
<el-col
|
||||
:span="item.span ? 24 / item.span : 24 / span"
|
||||
v-for="(item, index) in query"
|
||||
:key="index"
|
||||
>
|
||||
<!-- 下拉框 -->
|
||||
<el-form-item
|
||||
v-if="item.type == 'select'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-select
|
||||
v-model="form[item.value]"
|
||||
:placeholder="item.placeholder"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(it, i) in item.options"
|
||||
:key="i"
|
||||
:label="it.label"
|
||||
:value="it.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 树形下拉框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'cascader'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-cascader
|
||||
style="width: 100%"
|
||||
:placeholder="item.placeholder"
|
||||
v-model="form[item.value]"
|
||||
:options="item.options"
|
||||
@change="item.handleChange ? item.handleChange : () => {}"
|
||||
:props="item.props ? item.props : { value: 'id', label: 'text' }"
|
||||
:show-all-levels="false"
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
<!-- 时间选择器 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'datePicker'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-date-picker
|
||||
type="date"
|
||||
:placeholder="item.placeholder"
|
||||
v-model="form[item.value]"
|
||||
style="width: 100%"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<!-- 切换按钮 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'switch'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-switch v-model="form[item.value]"></el-switch>
|
||||
</el-form-item>
|
||||
<!-- 复选框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'checkbox'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-checkbox-group v-model="form[item.value]">
|
||||
<el-checkbox
|
||||
v-for="it in item.options"
|
||||
:key="it.value"
|
||||
:label="it.value"
|
||||
>{{ it.label }}</el-checkbox
|
||||
>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<!-- 单选框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'radio'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-radio-group v-model="form[item.value]">
|
||||
<el-radio
|
||||
v-for="it in item.options"
|
||||
:key="it.value"
|
||||
:label="it.value"
|
||||
>{{ it.name }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'textarea'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-input type="textarea" v-model="form[item.value]"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-else :label="item.label" :prop="item.value">
|
||||
<el-input v-model="form[item.value]"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="onReset">重置</el-button>
|
||||
<el-button type="primary" @click="onSubmit">搜索</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "SearchDialog",
|
||||
props: {
|
||||
rules: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
query: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title:'搜索',
|
||||
dialogVisible:true,
|
||||
span: 1,
|
||||
width:'30%',
|
||||
form:{}
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.initForm()
|
||||
},
|
||||
methods: {
|
||||
initForm(){
|
||||
let query = {}
|
||||
this.query.forEach((item,index)=>{
|
||||
if(item.type == 'checkbox'){
|
||||
query[item.value] = []
|
||||
}else{
|
||||
query[item.value] = ''
|
||||
}
|
||||
})
|
||||
this.$set(this,'form', query)
|
||||
},
|
||||
onSubmit() {
|
||||
this.$refs["searchForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$emit("done",this.form);
|
||||
this.onCancel()
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel(){
|
||||
// this.$refs["searchForm"].resetFields();
|
||||
// const {parentNode} = this.$el
|
||||
this.$destroy(true)
|
||||
// if (parentNode) {
|
||||
// parentNode.removeChild(this.$el)
|
||||
// }
|
||||
},
|
||||
onReset() {
|
||||
this.$refs["searchForm"].resetFields();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,239 @@
|
||||
<!-- 树状选择器 -->
|
||||
<template>
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="bottom-start"
|
||||
trigger="click"
|
||||
:width="popoverWidth"
|
||||
@show="onShowPopover"
|
||||
@hide="onHidePopover"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<el-tree
|
||||
ref="tree"
|
||||
class="select-tree"
|
||||
highlight-current
|
||||
:style="`min-width: ${treeWidth}`"
|
||||
:data="data"
|
||||
:props="props"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
:default-expand-all="false"
|
||||
@node-click="onClickNode"
|
||||
>
|
||||
</el-tree>
|
||||
<el-input
|
||||
slot="reference"
|
||||
ref="input"
|
||||
v-model="labelModel"
|
||||
clearable
|
||||
:style="`width: ${width}px`"
|
||||
:class="{ rotate: showStatus }"
|
||||
suffix-icon="el-icon-arrow-down"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
>
|
||||
</el-input>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
props: {
|
||||
// 接收绑定参数
|
||||
value: String | Number,
|
||||
// 输入框宽度
|
||||
width: String,
|
||||
popoverWidth: {
|
||||
type: Number,
|
||||
default: 361
|
||||
},
|
||||
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 选项数据
|
||||
options: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// 输入框占位符
|
||||
placeholder: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '请选择'
|
||||
},
|
||||
// 树节点配置选项
|
||||
props: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({
|
||||
parent: 'parentId',
|
||||
value: 'value',
|
||||
label: 'label',
|
||||
children: 'children'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 设置绑定参数
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'selected'
|
||||
},
|
||||
computed: {
|
||||
// 是否为树状结构数据
|
||||
dataType () {
|
||||
// this.options = [{ areaId: "20018", areaName: '玉林', parentId: "20016",children:[]},{ areaId: "20019", areaName: '南宁', parentId: "20016",children:[]}];
|
||||
const jsonStr = JSON.stringify(this.options)
|
||||
return jsonStr.indexOf(this.props.children) !== -1
|
||||
},
|
||||
// 若非树状结构，则转化为树状结构数据
|
||||
data () {
|
||||
return this.dataType ? this.options : this.switchTree()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
labelModel (val) {
|
||||
if (!val) {
|
||||
this.valueModel = ''
|
||||
}
|
||||
this.$refs.tree.filter(val)
|
||||
},
|
||||
value (val) {
|
||||
this.labelModel = this.queryTree(this.data, val)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 树状菜单显示状态
|
||||
showStatus: false,
|
||||
// 菜单宽度
|
||||
treeWidth: 'auto',
|
||||
// 输入框显示值
|
||||
labelModel: '',
|
||||
// 实际请求传值
|
||||
valueModel: '0'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 检测输入框原有值并显示对应 label
|
||||
if (this.value) {
|
||||
this.labelModel = this.queryTree(this.data, this.value)
|
||||
}
|
||||
// 获取输入框宽度同步至树状菜单宽度
|
||||
this.$nextTick(() => {
|
||||
this.treeWidth = `${(this.width || this.$refs.input.clientWidth) - 24}px`
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 单击节点
|
||||
onClickNode (node) {
|
||||
this.labelModel = node[this.props.label]
|
||||
this.valueModel = node[this.props.value]
|
||||
this.onCloseTree()
|
||||
},
|
||||
// 偏平数组转化为树状层级结构
|
||||
switchTree () {
|
||||
return this.cleanChildren(this.buildTree(this.options, '0'))
|
||||
},
|
||||
// 隐藏树状菜单
|
||||
onCloseTree () {
|
||||
this.$refs.popover.showPopper = false
|
||||
},
|
||||
// 显示时触发
|
||||
onShowPopover () {
|
||||
this.showStatus = true
|
||||
this.$refs.tree.filter(false)
|
||||
},
|
||||
// 隐藏时触发
|
||||
onHidePopover () {
|
||||
this.showStatus = false
|
||||
this.$emit('selected', this.valueModel, this.labelModel)
|
||||
},
|
||||
// 树节点过滤方法
|
||||
filterNode (query, data) {
|
||||
if (!query) return true
|
||||
return data[this.props.label].indexOf(query) !== -1
|
||||
},
|
||||
// 搜索树状数据中的 ID
|
||||
queryTree (tree, id) {
|
||||
let stark = []
|
||||
stark = stark.concat(tree)
|
||||
while (stark.length) {
|
||||
const temp = stark.shift()
|
||||
if (temp[this.props.children]) {
|
||||
stark = stark.concat(temp[this.props.children])
|
||||
}
|
||||
if (temp[this.props.value] === id) {
|
||||
return temp[this.props.label]
|
||||
}
|
||||
}
|
||||
return ''
|
||||
},
|
||||
// 将一维的扁平数组转换为多层级对象
|
||||
buildTree (data, id = '0') {
|
||||
const fa = parentId => {
|
||||
const temp = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const n = data[i]
|
||||
if (n[this.props.parent] === parentId) {
|
||||
n.children = fa(n.rowGuid)
|
||||
temp.push(n)
|
||||
}
|
||||
}
|
||||
return temp
|
||||
}
|
||||
return fa(id)
|
||||
},
|
||||
// 清除空 children项
|
||||
cleanChildren (data) {
|
||||
const fa = list => {
|
||||
list.map(e => {
|
||||
if (e.children.length) {
|
||||
fa(e.children)
|
||||
} else {
|
||||
delete e.children
|
||||
}
|
||||
return e
|
||||
})
|
||||
return list
|
||||
}
|
||||
return fa(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-input.el-input--suffix {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-input.el-input--suffix.rotate .el-input__suffix {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.select-tree {
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
/* 菜单滚动条 */
|
||||
.select-tree::-webkit-scrollbar {
|
||||
z-index: 11;
|
||||
width: 6px;
|
||||
}
|
||||
.select-tree::-webkit-scrollbar-track,
|
||||
.select-tree::-webkit-scrollbar-corner {
|
||||
background: #fff;
|
||||
}
|
||||
.select-tree::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
width: 6px;
|
||||
background: #b4bccc;
|
||||
}
|
||||
.select-tree::-webkit-scrollbar-track-piece {
|
||||
background: #fff;
|
||||
width: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
|
||||
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
|
||||
<use :xlink:href="iconName" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
|
||||
import { isExternal } from '@/utils/validate'
|
||||
|
||||
export default {
|
||||
name: 'SvgIcon',
|
||||
props: {
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isExternal() {
|
||||
return isExternal(this.iconClass)
|
||||
},
|
||||
iconName() {
|
||||
return `#icon-${this.iconClass}`
|
||||
},
|
||||
svgClass() {
|
||||
if (this.className) {
|
||||
return 'svg-icon ' + this.className
|
||||
} else {
|
||||
return 'svg-icon'
|
||||
}
|
||||
},
|
||||
styleExternalIcon() {
|
||||
return {
|
||||
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
|
||||
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.svg-external-icon {
|
||||
background-color: currentColor;
|
||||
mask-size: cover!important;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- :row-key="rowKey" -->
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
:height="height + 'vh'"
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
stripe
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
tooltip-effect="dark"
|
||||
highlight-current-row
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="rowClick"
|
||||
>
|
||||
<slot name="header"></slot>
|
||||
<el-table-column v-if="selection" type="selection" width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-if="serialNumber"
|
||||
type="index"
|
||||
width="55"
|
||||
label="序号"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
v-for="(item, index) in tableColumn"
|
||||
:key="index"
|
||||
:prop="item.prop"
|
||||
:label="item.i18n ? $t(item.i18n) : item.label"
|
||||
:width="item.width"
|
||||
:fixed="item.fixed"
|
||||
align="center"
|
||||
:formatter="item.formatter"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<slot></slot>
|
||||
</el-table>
|
||||
|
||||
<div v-if="pagination.handleCurrentChange" class="pagination">
|
||||
<!-- hide-on-single-page -->
|
||||
<el-pagination
|
||||
v-if="pagination.handleCurrentChange"
|
||||
:current-page="pagination.pageNo"
|
||||
:page-size="pagination.pageSize"
|
||||
background
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:total="pagination.total"
|
||||
@current-change="pagination.handleCurrentChange"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
default: 70
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
rowKey: {
|
||||
type: String | Number,
|
||||
default: ''
|
||||
},
|
||||
selection: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
serialNumber: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tableColumn: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
pagination: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
rowClick: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleSelection (row) {
|
||||
this.$refs.table.toggleRowSelection(row)
|
||||
},
|
||||
clearSelection () {
|
||||
this.$refs.table.clearSelection()
|
||||
},
|
||||
handleSelectionChange (val) {
|
||||
this.$emit('selectChange', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pagination {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
|
||||
<div>
|
||||
<img :src="icon" alt="">
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :disabled="theme==='dark'" command="dark">
|
||||
暗色
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="theme==='light'" command="light">
|
||||
亮色
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
theme() {
|
||||
return this.$store.getters.theme
|
||||
},
|
||||
icon(){
|
||||
return require(`../../assets/layout/${this.theme}/switch-color.png`)
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
link:null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLanguage(theme) {
|
||||
this.$store.dispatch('app/setTheme', theme)
|
||||
if(this.theme=='dark'){
|
||||
document.head.removeChild(this.link);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.theme == 'light') {
|
||||
const link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = this.getLinkHref();
|
||||
this.link = link
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
},
|
||||
getLinkHref() {
|
||||
const href =
|
||||
document.head.querySelector("link[rel=stylesheet][href*=css]").href ||
|
||||
"";
|
||||
return href.replace(/[^\/]+.css$/, "light.css");
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="tip_message"
|
||||
title="导入失败提示"
|
||||
:visible.sync="tipMessage"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
width="40%"
|
||||
center
|
||||
>
|
||||
<p class="title">{{ msg }}</p>
|
||||
<div class="items">
|
||||
<p v-for="item in tips" :key="item">{{ item }}</p>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="tipMessage = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
message: {
|
||||
type: String,
|
||||
return: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tipMessage: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
msg () {
|
||||
let a = this.message.split(':|')
|
||||
return a[0]
|
||||
},
|
||||
tips () {
|
||||
let a = this.message.split(':|')
|
||||
let b = []
|
||||
if (a.length > 1) {
|
||||
b = a[1].split('|')
|
||||
}
|
||||
return b
|
||||
}
|
||||
},
|
||||
mounted () {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog {
|
||||
.el-dialog__body {
|
||||
max-height: 500px !important;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
p {
|
||||
width: 30%;
|
||||
padding: 15px;
|
||||
background-color: rgb(31, 32, 39);
|
||||
border-radius: 8px;
|
||||
&:nth-child(3n-2) {
|
||||
margin-right: 5%;
|
||||
}
|
||||
&:nth-child(3n-1) {
|
||||
margin-right: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,6 @@
|
||||
### 使用方法
|
||||
|
||||
```vue
|
||||
this.$FailedDialog('需提示的信息');
|
||||
```
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="导入文件"
|
||||
width="20%"
|
||||
:visible.sync="dialogVisible"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
:before-close="onCancel"
|
||||
>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList"
|
||||
>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
只能上传jpg/png文件，且不超过500kb
|
||||
</div>
|
||||
</el-upload>
|
||||
<span slot="footer">
|
||||
<el-button @click="onCancel">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
fileList: [
|
||||
{
|
||||
name: "food.jpeg",
|
||||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||||
},
|
||||
{
|
||||
name: "food2.jpeg",
|
||||
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||||
},
|
||||
],
|
||||
form: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
||||
files.length + fileList.length
|
||||
} 个文件`
|
||||
);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${file.name}？`);
|
||||
},
|
||||
onSubmit() {},
|
||||
onCancel() {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
import Vue from "vue";
|
||||
import SearchDialog from "./SearchDialog";
|
||||
import FormDialog from "./FormDialog";
|
||||
import Table from "./Table";
|
||||
import SelectTree from "./SelectTree";
|
||||
import ImageDialog from "./ImageDialog";
|
||||
import importFailedDialog from "./importFailedDialog";
|
||||
|
||||
const SearchConstructor = Vue.extend(SearchDialog);
|
||||
const ImageConstructor = Vue.extend(ImageDialog);
|
||||
const FailedDialog = Vue.extend(importFailedDialog);
|
||||
|
||||
Vue.component("Table", Table);
|
||||
Vue.component("FormDialog", FormDialog);
|
||||
Vue.component("SelectTree", SelectTree);
|
||||
|
||||
const components = {
|
||||
SearchDialog,
|
||||
FormDialog,
|
||||
Table,
|
||||
SelectTree
|
||||
};
|
||||
|
||||
Vue.use({
|
||||
install: function(vue) {
|
||||
vue.prototype.$search = async function(query, rules) {
|
||||
const search = new SearchConstructor({
|
||||
propsData: {
|
||||
query,
|
||||
rules
|
||||
}
|
||||
});
|
||||
search.$mount();
|
||||
document.body.appendChild(search.$el);
|
||||
return new Promise((resolve, reject) => {
|
||||
search.$on("done", function(e) {
|
||||
if (e) {
|
||||
resolve(e);
|
||||
} else {
|
||||
reject(new Error("cancel"));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
vue.prototype.$ImageDialog = async function(src, width, title) {
|
||||
const Image = new ImageConstructor({
|
||||
propsData: { src, width, title }
|
||||
});
|
||||
Image.$mount();
|
||||
document.body.appendChild(Image.$el);
|
||||
return new Promise((resolve, reject) => {
|
||||
Image.$on("done", function(e) {
|
||||
if (e) {
|
||||
resolve(e);
|
||||
} else {
|
||||
reject(new Error("cancel"));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
vue.prototype.$FailedDialog = async function(message) {
|
||||
const dialog = new FailedDialog({
|
||||
propsData: { message }
|
||||
});
|
||||
dialog.$mount();
|
||||
document.body.appendChild(dialog.$el);
|
||||
return new Promise((resolve, reject) => {
|
||||
dialog.$on("done", function(e) {
|
||||
if (e) {
|
||||
resolve(e);
|
||||
} else {
|
||||
reject(new Error("cancel"));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default components;
|
||||
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<el-form
|
||||
ref="nxForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
label-suffix=":"
|
||||
>
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item, index) in formList"
|
||||
:key="index"
|
||||
:span="item.span ? 24 / item.span : 24 / span"
|
||||
>
|
||||
<!-- 下拉框 -->
|
||||
<el-form-item
|
||||
v-if="item.type == 'select'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-select
|
||||
v-model="form[item.value]"
|
||||
filterable
|
||||
:placeholder="item.placeholder"
|
||||
style="width: 100%"
|
||||
:multiple="item.multiple"
|
||||
:collapse-tags="item.multiple"
|
||||
>
|
||||
<el-option
|
||||
v-for="(it, i) in item.options"
|
||||
:key="i"
|
||||
:label="it.label"
|
||||
:value="it.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 树形下拉框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'treeSelect'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<select-tree
|
||||
v-model="form[item.value]"
|
||||
:props="item.defaultProps"
|
||||
:options="item.options"
|
||||
></select-tree>
|
||||
</el-form-item>
|
||||
<!-- 级联 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'cascader'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-cascader
|
||||
v-model="form[item.value]"
|
||||
style="width: 100%"
|
||||
:placeholder="item.placeholder"
|
||||
:options="item.options"
|
||||
:props="item.props ? item.props : { value: 'id', label: 'text' }"
|
||||
:show-all-levels="false"
|
||||
@change="item.handleChange ? item.handleChange : () => {}"
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
<!-- 时间选择器 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'datePicker'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="form[item.value]"
|
||||
type="date"
|
||||
:placeholder="item.placeholder"
|
||||
style="width: 100%"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<!-- 切换按钮 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'switch'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-switch v-model="form[item.value]"></el-switch>
|
||||
</el-form-item>
|
||||
<!-- 复选框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'checkbox'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-checkbox-group v-model="form[item.value]">
|
||||
<el-checkbox
|
||||
v-for="it in item.options"
|
||||
:key="it.value"
|
||||
:label="it.value"
|
||||
>{{ it.label }}</el-checkbox
|
||||
>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<!-- 单选框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'radio'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-radio-group v-model="form[item.value]">
|
||||
<el-radio
|
||||
v-for="it in item.options"
|
||||
:key="it.value"
|
||||
:label="it.value"
|
||||
>{{ it.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- 数字输入框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'number'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="form[item.value]"
|
||||
style="width: 100%"
|
||||
:min="item.min ? item.min : 0"
|
||||
:max="item.max"
|
||||
:label="item.label"
|
||||
:placeholder="item.placeholder"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 文本域 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'textarea'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-input
|
||||
v-model="form[item.value]"
|
||||
type="textarea"
|
||||
:placeholder="item.placeholder"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- 密码框 -->
|
||||
<el-form-item
|
||||
v-else-if="item.type == 'password'"
|
||||
:label="item.label"
|
||||
:prop="item.value"
|
||||
>
|
||||
<el-input
|
||||
v-model="form[item.value]"
|
||||
type="password"
|
||||
:placeholder="item.placeholder"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-else :label="item.label" :prop="item.value">
|
||||
<el-input
|
||||
v-model="form[item.value]"
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import SelectTree from '../SelectTree'
|
||||
export default {
|
||||
components: { SelectTree },
|
||||
props: {
|
||||
span: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
formList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validate () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs['nxForm'].validate(valid => {
|
||||
resolve(valid)
|
||||
})
|
||||
})
|
||||
},
|
||||
resetFields () {
|
||||
this.$refs['nxForm'].resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<el-upload
|
||||
action="#"
|
||||
list-type="picture-card"
|
||||
:show-file-list="false"
|
||||
:http-request="httpRequest"
|
||||
:name="name"
|
||||
>
|
||||
<div v-if="imageUrl" class="upload_img_box" @click.stop="() => {}">
|
||||
<img :src="imageUrl" class="avatar" />
|
||||
<div v-if="onPreview || onRemove" class="box-actions">
|
||||
<i v-if="onPreview" class="el-icon-zoom-in" @click.stop="onPreview(name)"></i>
|
||||
<i v-if="onRemove" class="el-icon-delete" @click.stop="onRemove(name)"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</template>
|
||||
<script>
|
||||
import { uploadFile, classifyUploadFile } from '@/api/common';
|
||||
import ImageCompressor from 'js-image-compressor';
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: 'file',
|
||||
},
|
||||
imageUrl: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
onPreview: Function,
|
||||
onRemove: Function,
|
||||
onSuccess: Function,
|
||||
// 单位mb
|
||||
size: {
|
||||
type: Number,
|
||||
default: 0.78,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async httpRequest(file) {
|
||||
let systemId = parseInt(localStorage.getItem('systemId'));
|
||||
const name = file.filename;
|
||||
let fileCompression = await this.compressionImage(file.file);
|
||||
if (this.beforeAvatarUpload(fileCompression, this.size)) {
|
||||
//判断是否在垃圾分类子系统
|
||||
if (systemId === 4) {
|
||||
classifyUploadFile(fileCompression)
|
||||
.then((res) => {
|
||||
this.$message.success('上传成功');
|
||||
this.onSuccess(res.data.sourceRootUrl, name);
|
||||
// this.form[name] = res.data.sourceRootUrl
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err, '上传失败');
|
||||
});
|
||||
} else {
|
||||
uploadFile(fileCompression)
|
||||
.then((res) => {
|
||||
this.$message.success('上传成功');
|
||||
this.onSuccess(res.data.sourceRootUrl, name);
|
||||
// this.form[name] = res.data.sourceRootUrl
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err, '上传失败');
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
// 图片压缩
|
||||
compressionImage(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// eslint-disable-next-line no-new
|
||||
new ImageCompressor({
|
||||
file: file,
|
||||
quality: 0.8,
|
||||
maxWidth: 960,
|
||||
maxHeight: 620,
|
||||
redressOrientation: false,
|
||||
|
||||
// 压缩前回调
|
||||
beforeCompress: function (result) {
|
||||
console.log('压缩前：', result);
|
||||
// console.log('压缩之前图片尺寸大小: ', result.size);
|
||||
// console.log('mime 类型: ', result.type);
|
||||
},
|
||||
|
||||
success: function (result) {
|
||||
console.log('压缩后：', result);
|
||||
// console.log('压缩之后图片尺寸大小: ', result.size);
|
||||
// console.log('mime 类型: ', result.type);
|
||||
console.log(
|
||||
'实际压缩率： ',
|
||||
(((file.size - result.size) / file.size) * 100).toFixed(2) + '%'
|
||||
);
|
||||
//将Bolb对象转为File对象
|
||||
// let files = new window.File([result], result.name, { type: result.type });
|
||||
resolve(result);
|
||||
},
|
||||
error(e) {
|
||||
reject(e);
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
// 图片大小判断
|
||||
beforeAvatarUpload(file, size) {
|
||||
//不能导入大小超过 size Mb的图片
|
||||
if (file.size > size * 1024 * 1024) {
|
||||
this.$message(`上传的图片请不要超过${size * 1024}kb！`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.upload_img_box {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
height: 146px;
|
||||
width: 146px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.box-actions {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: default;
|
||||
opacity: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
transition: opacity 0.3s;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
i {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.box-actions:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
import Vue from 'vue'
|
||||
import SvgIcon from '@/components/SvgIcon'// svg component
|
||||
|
||||
// register globally
|
||||
Vue.component('svg-icon', SvgIcon)
|
||||
|
||||
const req = require.context('./svg', false, /\.svg$/)
|
||||
const requireAll = requireContext => requireContext.keys().map(requireContext)
|
||||
requireAll(req)
|
||||
@@ -0,0 +1 @@
|
||||
<svg width="128" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>
|
||||
|
After Width: | Height: | Size: 497 B |
@@ -0,0 +1 @@
|
||||
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>
|
||||
|
After Width: | Height: | Size: 944 B |
@@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M83.287 103.01c-1.57-3.84-6.778-10.414-15.447-19.548-2.327-2.444-2.182-4.306-1.338-9.862v-.64c.553-3.81 1.513-6.05 14.313-8.087 6.516-1.018 8.203 1.57 10.589 5.178l.785 1.193a12.625 12.625 0 0 0 6.43 5.207c1.134.524 2.53 1.164 4.421 2.24 4.596 2.53 4.596 5.41 4.596 11.753v.727a26.91 26.91 0 0 1-5.178 17.454 59.055 59.055 0 0 1-19.025 11.026c3.49-6.546.814-14.313 0-16.553l-.146-.087zM64 5.12a58.502 58.502 0 0 1 25.484 5.818 54.313 54.313 0 0 0-12.859 10.327c-.93 1.28-1.716 2.473-2.472 3.579-2.444 3.694-3.637 5.352-5.818 5.614a25.105 25.105 0 0 1-4.219 0c-4.276-.29-10.094-.64-11.956 4.422-1.193 3.23-1.396 11.956 2.444 16.495.66 1.077.778 2.4.32 3.578a7.01 7.01 0 0 1-2.066 3.229 18.938 18.938 0 0 1-2.909-2.91 18.91 18.91 0 0 0-8.32-6.603c-1.25-.349-2.647-.64-3.985-.93-3.782-.786-8.03-1.688-9.019-3.812a14.895 14.895 0 0 1-.727-5.818 21.935 21.935 0 0 0-1.396-9.25 8.873 8.873 0 0 0-5.557-4.946A58.705 58.705 0 0 1 64 5.12zM0 64c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-35.346-28.654-64-64-64C28.654 0 0 28.654 0 64z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="128" fill="#ffffff" height="128" xmlns="http://www.w3.org/2000/svg" ><path d="M84.742 36.8c2.398 7.2 5.595 12.8 11.19 18.4 4.795-4.8 7.992-11.2 10.39-18.4h-21.58zm-52.748 40h20.78l-10.39-28-10.39 28z"/><path d="M111.916 0H16.009C7.218 0 .025 7.2.025 16v96c0 8.8 7.193 16 15.984 16h95.907c8.791 0 15.984-7.2 15.984-16V16c0-8.8-6.394-16-15.984-16zM72.754 103.2c-1.598 1.6-3.197 1.6-4.795 1.6-.8 0-2.398 0-3.197-.8-.8-.8-1.599 0-1.599-.8s-.799-1.6-1.598-3.2c-.8-1.6-.8-2.4-1.599-4l-3.196-8.8H28.797L25.6 96c-1.598 3.2-2.398 5.6-3.197 7.2-.8 1.6-2.398 1.6-4.795 1.6-1.599 0-3.197-.8-4.796-1.6-1.598-1.6-2.397-2.4-2.397-4 0-.8 0-1.6.799-3.2.8-1.6.8-2.4 1.598-4l17.583-44.8c.8-1.6.8-3.2 1.599-4.8.799-1.6 1.598-3.2 2.397-4 .8-.8 1.599-2.4 3.197-3.2 1.599-.8 3.197-.8 4.796-.8 1.598 0 3.196 0 4.795.8 1.598.8 2.398 1.6 3.197 3.2.799.8 1.598 2.4 2.397 4 .8 1.6 1.599 3.2 2.398 5.6l17.583 44c1.598 3.2 2.398 5.6 2.398 7.2-.8.8-1.599 2.4-2.398 4zM116.711 72c-8.791-3.2-15.185-7.2-20.78-12-5.594 5.6-12.787 9.6-21.579 12l-2.397-4c8.791-2.4 15.984-5.6 21.579-11.2C87.939 51.2 83.144 44 81.545 36h-7.992v-3.2h21.58c-1.6-2.4-3.198-5.6-4.796-8l2.397-.8c1.599 2.4 3.997 5.6 5.595 8.8h19.98v4h-7.992c-2.397 8-6.393 15.2-11.189 20 5.595 4.8 11.988 8.8 20.78 11.2l-3.197 4z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>
|
||||
|
After Width: | Height: | Size: 285 B |
@@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.002 9.2c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-5.043-3.58-9.132-7.997-9.132S.002 4.157.002 9.2zM31.997.066h95.981V18.33H31.997V.066zm0 45.669c0 5.044 3.58 9.132 7.998 9.132 4.417 0 7.997-4.088 7.997-9.132 0-3.263-1.524-6.278-3.998-7.91-2.475-1.63-5.524-1.63-7.998 0-2.475 1.632-4 4.647-4 7.91zM63.992 36.6h63.986v18.265H63.992V36.6zm-31.995 82.2c0 5.043 3.58 9.132 7.998 9.132 4.417 0 7.997-4.089 7.997-9.132 0-5.044-3.58-9.133-7.997-9.133s-7.998 4.089-7.998 9.133zm31.995-9.131h63.986v18.265H63.992V109.67zm0-27.404c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-3.263-1.524-6.277-3.998-7.909-2.475-1.631-5.524-1.631-7.998 0-2.475 1.632-4 4.646-4 7.91zm31.995-9.13h31.991V91.4H95.987V73.135z"/></svg>
|
||||
|
After Width: | Height: | Size: 821 B |
@@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
|
||||
|
After Width: | Height: | Size: 623 B |
@@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg>
|
||||
|
After Width: | Height: | Size: 597 B |
@@ -0,0 +1 @@
|
||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M126.713 90.023c.858.985 1.287 2.134 1.287 3.447v29.553c0 1.423-.429 2.6-1.287 3.53-.858.93-1.907 1.395-3.146 1.395H97.824c-1.145 0-2.146-.465-3.004-1.395-.858-.93-1.287-2.107-1.287-3.53V93.47c0-.875.19-1.696.572-2.462.382-.766.906-1.368 1.573-1.806a3.84 3.84 0 0 1 2.146-.657h9.725V69.007a3.84 3.84 0 0 0-.43-1.806 3.569 3.569 0 0 0-1.143-1.313 2.714 2.714 0 0 0-1.573-.492h-36.47v23.149h9.725c1.144 0 2.145.492 3.004 1.478.858.985 1.287 2.134 1.287 3.447v29.553c0 .876-.191 1.696-.573 2.463-.38.766-.905 1.368-1.573 1.806a3.84 3.84 0 0 1-2.145.656H51.915a3.84 3.84 0 0 1-2.145-.656c-.668-.438-1.216-1.04-1.645-1.806a4.96 4.96 0 0 1-.644-2.463V93.47c0-1.313.43-2.462 1.288-3.447.858-.986 1.907-1.478 3.146-1.478h9.582v-23.15h-37.9c-.953 0-1.74.356-2.359 1.068-.62.711-.93 1.56-.93 2.544v19.538h9.726c1.239 0 2.264.492 3.074 1.478.81.985 1.216 2.134 1.216 3.447v29.553c0 1.423-.405 2.6-1.216 3.53-.81.93-1.835 1.395-3.074 1.395H4.29c-.476 0-.93-.082-1.358-.246a4.1 4.1 0 0 1-1.144-.657 4.658 4.658 0 0 1-.93-1.067 5.186 5.186 0 0 1-.643-1.395 5.566 5.566 0 0 1-.215-1.56V93.47c0-.437.048-.875.143-1.313a3.95 3.95 0 0 1 .429-1.15c.19-.328.429-.656.715-.984.286-.329.572-.602.858-.821.286-.22.62-.383 1.001-.493.382-.11.763-.164 1.144-.164h9.726V61.619c0-.985.31-1.833.93-2.544.619-.712 1.358-1.068 2.216-1.068h44.335V39.62h-9.582c-1.24 0-2.288-.492-3.146-1.477a5.09 5.09 0 0 1-1.287-3.448V5.14c0-1.423.429-2.627 1.287-3.612.858-.985 1.907-1.477 3.146-1.477h25.743c.763 0 1.478.246 2.145.739a5.17 5.17 0 0 1 1.573 1.888c.382.766.573 1.587.573 2.462v29.553c0 1.313-.43 2.463-1.287 3.448-.859.985-1.86 1.477-3.004 1.477h-9.725v18.389h42.762c.954 0 1.74.355 2.36 1.067.62.711.93 1.56.93 2.545v26.925h9.582c1.239 0 2.288.492 3.146 1.478z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1 @@
|
||||
<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
|
||||
|
After Width: | Height: | Size: 440 B |
@@ -0,0 +1,22 @@
|
||||
# replace default config
|
||||
|
||||
# multipass: true
|
||||
# full: true
|
||||
|
||||
plugins:
|
||||
|
||||
# - name
|
||||
#
|
||||
# or:
|
||||
# - name: false
|
||||
# - name: true
|
||||
#
|
||||
# or:
|
||||
# - name:
|
||||
# param1: 1
|
||||
# param2: 2
|
||||
|
||||
- removeAttrs:
|
||||
attrs:
|
||||
- 'fill'
|
||||
- 'fill-rule'
|
||||
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<section class="app-main scrollbar_less app-container">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<router-view :key="key" />
|
||||
</transition>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AppMain",
|
||||
computed: {
|
||||
key() {
|
||||
return this.$route.path;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-main {
|
||||
/*50 = navbar */
|
||||
// min-height: calc(100vh - 50px);
|
||||
// min-height: 100vh;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
overflow-x: scroll;
|
||||
background-color: $--app-main-background-color;
|
||||
}
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.hasTagsView {
|
||||
.app-main {
|
||||
/* 84 = navbar + tags-view = 50 + 34 */
|
||||
// min-height: calc(100vh - 84px);
|
||||
// min-height: 100vh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 90px;
|
||||
}
|
||||
}
|
||||
.scrollbar_less {
|
||||
transition: all 0.2s;
|
||||
overflow: auto;
|
||||
scrollbar-color: transparent transparent;
|
||||
// scrollbar-width: thin;
|
||||
scrollbar-width:10px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #a5a6ac;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #a5a6ac transparent;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #a5a6ac;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
// fix css style bug in open el-dialog
|
||||
// .el-popup-parent--hidden {
|
||||
// .fixed-header {
|
||||
// padding-right: 15px;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<div class="brand-panel">
|
||||
<img class="brand-logo" src="../../assets/layout/woer.jpg" alt="沃尔核材">
|
||||
<span class="version">V2.0</span>
|
||||
</div>
|
||||
|
||||
<div class="page-title">
|
||||
<span class="title-text">工作台</span>
|
||||
<span class="title-sub">DASHBOARD</span>
|
||||
</div>
|
||||
|
||||
<div class="right-panel">
|
||||
<div class="mes-status">
|
||||
<span class="status-dot"></span>
|
||||
<span>MES 已连接</span>
|
||||
</div>
|
||||
|
||||
<div class="clock">
|
||||
<span class="time">{{ currentTime }}</span>
|
||||
<span class="date">{{ currentDate }} 周{{ currentWeek }}</span>
|
||||
</div>
|
||||
|
||||
<div class="notice">
|
||||
<i class="el-icon-bell"></i>
|
||||
<span class="notice-badge">18</span>
|
||||
</div>
|
||||
|
||||
<div class="role-switch">
|
||||
<button
|
||||
v-for="role in roles"
|
||||
:key="role.value"
|
||||
class="role-button"
|
||||
:class="{ active: activeRole === role.value }"
|
||||
@click="handleRoleChange(role.value)"
|
||||
>
|
||||
{{ role.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="user-info">
|
||||
<img class="user-icon" src="../../assets/layout/user.png" alt="">
|
||||
<span>{{ $store.getters.name || 'admin' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="logout" @click="logout">
|
||||
<img class="logout-icon" src="../../assets/layout/logout.png" alt="">
|
||||
<span>退出</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const weekMap = ['日', '一', '二', '三', '四', '五', '六']
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
now: new Date(),
|
||||
roles: [
|
||||
{ label: '仓管员', value: 'warehouse' },
|
||||
{ label: '产线工人', value: 'worker' },
|
||||
{ label: '管理员', value: 'admin' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentTime() {
|
||||
return this.formatDate(this.now, 'HH:mm:ss')
|
||||
},
|
||||
currentDate() {
|
||||
return this.formatDate(this.now, 'yyyy/MM/dd')
|
||||
},
|
||||
currentWeek() {
|
||||
return weekMap[this.now.getDay()]
|
||||
},
|
||||
activeRole() {
|
||||
return this.$route.path === '/dashboard'
|
||||
? (this.$route.query.role || 'warehouse')
|
||||
: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timer = window.setInterval(() => {
|
||||
this.now = new Date()
|
||||
}, 1000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timer) {
|
||||
window.clearInterval(this.timer)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
padZero(value) {
|
||||
return String(value).padStart(2, '0')
|
||||
},
|
||||
formatDate(date, format) {
|
||||
const dateMap = {
|
||||
yyyy: date.getFullYear(),
|
||||
MM: this.padZero(date.getMonth() + 1),
|
||||
dd: this.padZero(date.getDate()),
|
||||
HH: this.padZero(date.getHours()),
|
||||
mm: this.padZero(date.getMinutes()),
|
||||
ss: this.padZero(date.getSeconds())
|
||||
}
|
||||
|
||||
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, key => dateMap[key])
|
||||
},
|
||||
handleRoleChange(role) {
|
||||
if (this.$route.path === '/dashboard' && this.$route.query.role === role) {
|
||||
return
|
||||
}
|
||||
|
||||
this.$router.push({
|
||||
path: '/dashboard',
|
||||
query: { role }
|
||||
}).catch(() => {})
|
||||
},
|
||||
logout() {
|
||||
this.$confirm('确定要退出登录吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async() => {
|
||||
await this.$store.dispatch('user/logout')
|
||||
await this.$store.dispatch('permission/reset_router')
|
||||
|
||||
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 56px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #0b1219;
|
||||
border-bottom: 1px solid rgba(42, 72, 91, 0.75);
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #d9e7f5;
|
||||
}
|
||||
|
||||
.brand-panel {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
padding: 0 14px 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(90deg, #111b25 0%, #18232d 100%);
|
||||
border-right: 1px solid rgba(255, 144, 35, 0.16);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 142px;
|
||||
height: 38px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.version {
|
||||
height: 18px;
|
||||
padding: 0 7px;
|
||||
border: 1px solid #d87212;
|
||||
color: #ff921e;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
background: rgba(255, 137, 28, 0.08);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
height: 100%;
|
||||
padding-left: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
color: #f4f8ff;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.title-sub {
|
||||
color: #6e7f90;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
letter-spacing: 4px;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.mes-status {
|
||||
height: 30px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #36f39a;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
border: 1px solid rgba(54, 243, 154, 0.28);
|
||||
background: rgba(12, 92, 67, 0.28);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: #28f18c;
|
||||
box-shadow: 0 0 12px rgba(40, 241, 140, 0.85);
|
||||
}
|
||||
|
||||
.clock {
|
||||
min-width: 112px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #b7c7d9;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-top: 4px;
|
||||
color: #637486;
|
||||
font-size: 10px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.notice {
|
||||
width: 38px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #9fb2c7;
|
||||
font-size: 18px;
|
||||
border: 1px solid rgba(91, 119, 145, 0.32);
|
||||
background: rgba(20, 30, 42, 0.82);
|
||||
}
|
||||
|
||||
.notice-badge {
|
||||
min-width: 17px;
|
||||
height: 17px;
|
||||
padding: 0 4px;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
border-radius: 9px;
|
||||
color: #fff;
|
||||
background: #ff4b4b;
|
||||
font-size: 10px;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.role-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.role-button {
|
||||
height: 34px;
|
||||
min-width: 76px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
color: #97a9bb;
|
||||
background: transparent;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #f7a43d;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #1b222b;
|
||||
background: #f08a23;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info,
|
||||
.logout {
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #aebdcd;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
width: 18px;
|
||||
height: 26px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logout {
|
||||
padding-left: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #ff9b33;
|
||||
}
|
||||
}
|
||||
|
||||
.logout-icon {
|
||||
width: 18px;
|
||||
height: 21px;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
export default {
|
||||
computed: {
|
||||
device() {
|
||||
return this.$store.state.app.device
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// In order to fix the click on menu on the ios device will trigger the mouseleave bug
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/1135
|
||||
this.fixBugIniOS()
|
||||
},
|
||||
methods: {
|
||||
fixBugIniOS() {
|
||||
const $subMenu = this.$refs.subMenu
|
||||
if ($subMenu) {
|
||||
const handleMouseleave = $subMenu.handleMouseleave
|
||||
$subMenu.handleMouseleave = (e) => {
|
||||
if (this.device === 'mobile') {
|
||||
return
|
||||
}
|
||||
handleMouseleave(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'MenuItem',
|
||||
functional: true,
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
render(h, context) {
|
||||
const { icon, title } = context.props
|
||||
const vnodes = []
|
||||
|
||||
if (icon) {
|
||||
if (icon.includes('el-icon')) {
|
||||
vnodes.push(<i class={[icon, 'sub-el-icon']} />)
|
||||
} else {
|
||||
vnodes.push(<svg-icon icon-class={icon}/>)
|
||||
}
|
||||
}
|
||||
|
||||
if (title) {
|
||||
vnodes.push(<span slot='title'>{(title)}</span>)
|
||||
}
|
||||
return vnodes
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sub-el-icon {
|
||||
color: currentColor;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<component :is="type" v-bind="linkProps(to)">
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isExternal } from '@/utils/validate'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
to: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isExternal() {
|
||||
return isExternal(this.to)
|
||||
},
|
||||
type() {
|
||||
if (this.isExternal) {
|
||||
return 'a'
|
||||
}
|
||||
return 'router-link'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
linkProps(to) {
|
||||
if (this.isExternal) {
|
||||
return {
|
||||
href: to,
|
||||
target: '_blank',
|
||||
rel: 'noopener'
|
||||
}
|
||||
}
|
||||
return {
|
||||
to: to
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
<h1 v-else class="sidebar-title">{{ title }} </h1>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
<h1 class="sidebar-title">{{ title }} </h1>
|
||||
</router-link>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SidebarLogo',
|
||||
props: {
|
||||
collapse: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: 'Vue Admin Template',
|
||||
logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sidebarLogoFade-enter-active {
|
||||
transition: opacity 1.5s;
|
||||
}
|
||||
|
||||
.sidebarLogoFade-enter,
|
||||
.sidebarLogoFade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-logo-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background: #2b2f3a;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
& .sidebar-logo-link {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
& .sidebar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
& .sidebar-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapse {
|
||||
.sidebar-logo {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div v-if="!item.hidden">
|
||||
<template
|
||||
v-if="
|
||||
hasOneShowingChild(item.children, item) &&
|
||||
(!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
|
||||
!item.alwaysShow
|
||||
"
|
||||
>
|
||||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
|
||||
<el-menu-item
|
||||
:index="resolvePath(onlyOneChild.path)"
|
||||
:class="{ 'submenu-title-noDropdown': !isNest }"
|
||||
>
|
||||
<item
|
||||
:icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
|
||||
:title="generateTitle(onlyOneChild)"
|
||||
/>
|
||||
</el-menu-item>
|
||||
</app-link>
|
||||
</template>
|
||||
|
||||
<el-submenu
|
||||
v-else
|
||||
ref="subMenu"
|
||||
:index="resolvePath(item.path)"
|
||||
popper-append-to-body
|
||||
>
|
||||
<template slot="title">
|
||||
<item
|
||||
v-if="item.meta"
|
||||
:icon="item.meta && item.meta.icon"
|
||||
:title="generateTitle(item)"
|
||||
/>
|
||||
</template>
|
||||
<sidebar-item
|
||||
v-for="child in item.children"
|
||||
:key="child.path"
|
||||
:is-nest="true"
|
||||
:item="child"
|
||||
:base-path="resolvePath(child.path)"
|
||||
class="nest-menu"
|
||||
/>
|
||||
</el-submenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import path from 'path'
|
||||
import { isExternal } from '@/utils/validate'
|
||||
import { generateTitle } from '@/utils/i18n'
|
||||
import Item from './Item'
|
||||
import AppLink from './Link'
|
||||
import FixiOSBug from './FixiOSBug'
|
||||
|
||||
export default {
|
||||
name: 'SidebarItem',
|
||||
components: { Item, AppLink },
|
||||
mixins: [FixiOSBug],
|
||||
props: {
|
||||
// route object
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isNest: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
|
||||
// TODO: refactor with render function
|
||||
this.onlyOneChild = null
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
hasOneShowingChild (children = [], parent) {
|
||||
const showingChildren = children.filter(item => {
|
||||
if (item.hidden) {
|
||||
return false
|
||||
} else {
|
||||
// Temp set(will be used if only has one showing child)
|
||||
this.onlyOneChild = item
|
||||
return true
|
||||
}
|
||||
})
|
||||
// When there is only one child router, the child router is displayed by default
|
||||
if (showingChildren.length === 1) {
|
||||
return true
|
||||
}
|
||||
|
||||
// Show parent if there are no child router to display
|
||||
if (showingChildren.length === 0) {
|
||||
this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
resolvePath (routePath) {
|
||||
if (isExternal(routePath)) {
|
||||
return routePath
|
||||
}
|
||||
if (isExternal(this.basePath)) {
|
||||
return this.basePath
|
||||
}
|
||||
return path.resolve(this.basePath, routePath)
|
||||
},
|
||||
generateTitle
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div :class="{'has-logo':showLogo}">
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="variables.menuBg"
|
||||
:text-color="variables.menuText"
|
||||
:unique-opened="false"
|
||||
:active-text-color="variables.menuActiveText"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
>
|
||||
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import {constantRoutes} from '@/router'
|
||||
import Logo from './Logo'
|
||||
import SidebarItem from './SidebarItem'
|
||||
import variables from '@/styles/variables.scss'
|
||||
|
||||
export default {
|
||||
components: { SidebarItem, Logo },
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sidebar'
|
||||
]),
|
||||
routes() {
|
||||
// return constantRoutes
|
||||
return this.$store.getters.permission_routes
|
||||
},
|
||||
activeMenu() {
|
||||
const route = this.$route
|
||||
const { meta, path } = route
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu
|
||||
}
|
||||
return path
|
||||
},
|
||||
showLogo() {
|
||||
return this.$store.state.settings.sidebarLogo
|
||||
},
|
||||
variables() {
|
||||
return variables
|
||||
},
|
||||
isCollapse() {
|
||||
return !this.sidebar.opened
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
|
||||
<slot />
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const tagAndTagSpacing = 4 // tagAndTagSpacing
|
||||
|
||||
export default {
|
||||
name: 'ScrollPane',
|
||||
data() {
|
||||
return {
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
scrollWrapper() {
|
||||
return this.$refs.scrollContainer.$refs.wrap
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
|
||||
},
|
||||
methods: {
|
||||
update(){
|
||||
this.$refs.scrollContainer.update();
|
||||
},
|
||||
handleScroll(e) {
|
||||
const eventDelta = e.wheelDelta || -e.deltaY * 40
|
||||
const $scrollWrapper = this.scrollWrapper
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
|
||||
},
|
||||
emitScroll() {
|
||||
this.$emit('scroll')
|
||||
},
|
||||
moveToTarget(currentTag) {
|
||||
const $container = this.$refs.scrollContainer.$el
|
||||
const $containerWidth = $container.offsetWidth
|
||||
const $scrollWrapper = this.scrollWrapper
|
||||
const tagList = this.$parent.$refs.tag
|
||||
|
||||
let firstTag = null
|
||||
let lastTag = null
|
||||
|
||||
// find first tag and last tag
|
||||
if (tagList.length > 0) {
|
||||
firstTag = tagList[0]
|
||||
lastTag = tagList[tagList.length - 1]
|
||||
}
|
||||
|
||||
if (firstTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = 0
|
||||
} else if (lastTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
|
||||
} else {
|
||||
// find preTag and nextTag
|
||||
const currentIndex = tagList.findIndex(item => item === currentTag)
|
||||
const prevTag = tagList[currentIndex - 1]
|
||||
const nextTag = tagList[currentIndex + 1]
|
||||
|
||||
// the tag's offsetLeft after of nextTag
|
||||
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
|
||||
|
||||
// the tag's offsetLeft before of prevTag
|
||||
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
|
||||
|
||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
||||
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
|
||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
||||
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scroll-container {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// width: 100%;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
::v-deep {
|
||||
.el-scrollbar__bar {
|
||||
bottom: 0px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.el-scrollbar__wrap {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-scrollbar__view{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.scroll-container::-webkit-scrollbar{
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,359 @@
|
||||
<template>
|
||||
<div id="tags-view-container" class="tags-view-container">
|
||||
<div class="location-box">
|
||||
<img src="../../../assets/layout/zs.png" alt="" />
|
||||
<img class="arrow" src="../../../assets/layout/arrow.png" alt="" />
|
||||
<span class="title">您当前位置：</span>
|
||||
<breadcrumb></breadcrumb>
|
||||
</div>
|
||||
|
||||
<scroll-pane
|
||||
ref="scrollPane"
|
||||
class="tags-view-wrapper"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<router-link
|
||||
v-for="tag in visitedViews"
|
||||
ref="tag"
|
||||
:key="tag.path"
|
||||
:class="isActive(tag) ? 'active' : ''"
|
||||
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
|
||||
tag="span"
|
||||
class="tags-view-item"
|
||||
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
|
||||
@contextmenu.prevent.native="openMenu(tag, $event)"
|
||||
>
|
||||
{{ generateTitle(tag) }}
|
||||
<span
|
||||
v-if="!isAffix(tag)"
|
||||
class="el-icon-close"
|
||||
@click.prevent.stop="closeSelectedTag(tag)"
|
||||
></span>
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
<ul
|
||||
v-show="visible"
|
||||
:style="{ left: left + 'px', top: top + 'px' }"
|
||||
class="contextmenu"
|
||||
>
|
||||
<li @click="refreshSelectedTag(selectedTag)">
|
||||
{{ $t('tagsView.refresh') }}
|
||||
</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
|
||||
{{ $t('tagsView.close') }}
|
||||
</li>
|
||||
<li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
|
||||
<li @click="closeAllTags(selectedTag)">{{ $t('tagsView.closeAll') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ScrollPane from './ScrollPane'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import { generateTitle } from '@/utils/i18n'
|
||||
import path from 'path'
|
||||
|
||||
export default {
|
||||
components: { ScrollPane, Breadcrumb },
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
top: 0,
|
||||
left: 0,
|
||||
selectedTag: {},
|
||||
affixTags: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
visitedViews () {
|
||||
return this.$store.state.tagsView.visitedViews
|
||||
},
|
||||
routes () {
|
||||
return this.$store.state.permission.routes
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
this.addTags()
|
||||
this.moveToCurrentTag()
|
||||
},
|
||||
visible (value) {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', this.closeMenu)
|
||||
} else {
|
||||
document.body.removeEventListener('click', this.closeMenu)
|
||||
}
|
||||
},
|
||||
'visitedViews.length': {
|
||||
handler (v) {
|
||||
if (v >= 7) {
|
||||
this.$nextTick(() => {
|
||||
// 解决滚动条初始化消失的问题
|
||||
this.$refs.scrollPane.update()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initTags()
|
||||
this.addTags()
|
||||
},
|
||||
methods: {
|
||||
generateTitle, // generateTitle by vue-i18n
|
||||
isActive (route) {
|
||||
return route.path === this.$route.path
|
||||
},
|
||||
isAffix (tag) {
|
||||
return tag.meta && tag.meta.affix
|
||||
},
|
||||
filterAffixTags (routes, basePath = '/') {
|
||||
let tags = []
|
||||
routes.forEach(route => {
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = path.resolve(basePath, route.path)
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name,
|
||||
meta: { ...route.meta }
|
||||
})
|
||||
}
|
||||
if (route.children) {
|
||||
const tempTags = this.filterAffixTags(route.children, route.path)
|
||||
if (tempTags.length >= 1) {
|
||||
tags = [...tags, ...tempTags]
|
||||
}
|
||||
}
|
||||
})
|
||||
return tags
|
||||
},
|
||||
initTags () {
|
||||
const affixTags = (this.affixTags = this.filterAffixTags(this.routes))
|
||||
for (const tag of affixTags) {
|
||||
// Must have tag name
|
||||
if (tag.name) {
|
||||
this.$store.dispatch('tagsView/addVisitedView', tag)
|
||||
}
|
||||
}
|
||||
},
|
||||
addTags () {
|
||||
const { name } = this.$route
|
||||
if (name) {
|
||||
this.$store.dispatch('tagsView/addView', this.$route)
|
||||
}
|
||||
return false
|
||||
},
|
||||
moveToCurrentTag () {
|
||||
const tags = this.$refs.tag
|
||||
this.$nextTick(() => {
|
||||
for (const tag of tags) {
|
||||
if (tag.to.path === this.$route.path) {
|
||||
this.$refs.scrollPane.moveToTarget(tag)
|
||||
// when query is different then update
|
||||
if (tag.to.fullPath !== this.$route.fullPath) {
|
||||
this.$store.dispatch('tagsView/updateVisitedView', this.$route)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
refreshSelectedTag (view) {
|
||||
this.$store.dispatch('tagsView/delCachedView', view).then(() => {
|
||||
const { fullPath } = view
|
||||
this.$nextTick(() => {
|
||||
this.$router.replace({
|
||||
path: '/redirect' + fullPath
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
closeSelectedTag (view) {
|
||||
this.$store
|
||||
.dispatch('tagsView/delView', view)
|
||||
.then(({ visitedViews }) => {
|
||||
if (this.isActive(view)) {
|
||||
this.toLastView(visitedViews, view)
|
||||
}
|
||||
})
|
||||
},
|
||||
closeOthersTags () {
|
||||
this.$router.push(this.selectedTag)
|
||||
this.$store
|
||||
.dispatch('tagsView/delOthersViews', this.selectedTag)
|
||||
.then(() => {
|
||||
this.moveToCurrentTag()
|
||||
})
|
||||
},
|
||||
closeAllTags (view) {
|
||||
this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
|
||||
if (this.affixTags.some(tag => tag.path === view.path)) {
|
||||
return
|
||||
}
|
||||
this.toLastView(visitedViews, view)
|
||||
})
|
||||
},
|
||||
toLastView (visitedViews, view) {
|
||||
const latestView = visitedViews.slice(-1)[0]
|
||||
if (latestView) {
|
||||
this.$router.push(latestView.fullPath)
|
||||
} else {
|
||||
// now the default is to redirect to the home page if there is no tags-view,
|
||||
// you can adjust it according to your needs.
|
||||
if (view.name === 'Dashboard') {
|
||||
// to reload home page
|
||||
this.$router.replace({ path: '/redirect' + view.fullPath })
|
||||
} else {
|
||||
this.$router.push('/')
|
||||
}
|
||||
}
|
||||
},
|
||||
openMenu (tag, e) {
|
||||
const menuMinWidth = 105
|
||||
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
|
||||
const offsetWidth = this.$el.offsetWidth // container width
|
||||
const maxLeft = offsetWidth - menuMinWidth // left boundary
|
||||
const left = e.clientX - offsetLeft + 15 // 15: margin right
|
||||
|
||||
if (left > maxLeft) {
|
||||
this.left = maxLeft
|
||||
} else {
|
||||
this.left = left
|
||||
}
|
||||
|
||||
this.top = e.clientY
|
||||
this.visible = true
|
||||
this.selectedTag = tag
|
||||
},
|
||||
closeMenu () {
|
||||
this.visible = false
|
||||
},
|
||||
handleScroll () {
|
||||
this.closeMenu()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags-view-container {
|
||||
height: 55px;
|
||||
width: 100%;
|
||||
background: $--background-color-base;
|
||||
border-bottom: 5px solid;
|
||||
border-image: $--tags-view-border-image;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.location-box {
|
||||
min-width: 566px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.arrow {
|
||||
margin: 0 22px;
|
||||
}
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #6e8aa0;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-view-wrapper {
|
||||
.tags-view-item {
|
||||
min-width: 180px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
line-height: 55px;
|
||||
text-align: center;
|
||||
border: 1px solid $--app-main-background-color;
|
||||
color: $--color-text-secondary;
|
||||
background: $--app-main-background-color;
|
||||
padding: 0 8px;
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
// margin-top: 4px;
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: 15px;
|
||||
}
|
||||
&.active {
|
||||
background-color: $--app-main-background-color;
|
||||
color: $--activate--color;
|
||||
border-color: $--app-main-background-color;
|
||||
// &::before {
|
||||
// content: "";
|
||||
// background: $--activate--color;
|
||||
// display: inline-block;
|
||||
// width: 8px;
|
||||
// height: 8px;
|
||||
// border-radius: 50%;
|
||||
// position: relative;
|
||||
// margin-right: 2px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
z-index: 3000;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 7px 16px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
//reset element css of el-icon-close
|
||||
.tags-view-wrapper {
|
||||
.tags-view-item {
|
||||
.el-icon-close {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
background-color: $--tagView-colse;
|
||||
font-size: 21px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transform-origin: 100% 50%;
|
||||
&:before {
|
||||
transform: scale(0.6);
|
||||
display: inline-block;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #b4bccc;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,4 @@
|
||||
export { default as Navbar } from './Navbar'
|
||||
export { default as Sidebar } from './Sidebar'
|
||||
export { default as AppMain } from './AppMain'
|
||||
export { default as TagsView } from './TagsView'
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div :class="classObj" class="app-wrapper">
|
||||
<!-- <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> -->
|
||||
<div :class="{'fixed-header':fixedHeader}">
|
||||
<navbar />
|
||||
<tags-view v-if="needTagsView" />
|
||||
</div>
|
||||
|
||||
<div :class="{hasTagsView:needTagsView}" class="main-container">
|
||||
<sidebar class="sidebar-container" />
|
||||
<app-main />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Navbar, Sidebar, AppMain,TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
|
||||
export default {
|
||||
name: 'Layout',
|
||||
components: {
|
||||
Navbar,
|
||||
Sidebar,
|
||||
AppMain,
|
||||
TagsView
|
||||
},
|
||||
mixins: [ResizeMixin],
|
||||
computed: {
|
||||
sidebar() {
|
||||
return this.$store.state.app.sidebar
|
||||
},
|
||||
device() {
|
||||
return this.$store.state.app.device
|
||||
},
|
||||
fixedHeader() {
|
||||
return this.$store.state.settings.fixedHeader
|
||||
},
|
||||
classObj() {
|
||||
return {
|
||||
hideSidebar: !this.sidebar.opened,
|
||||
openSidebar: this.sidebar.opened,
|
||||
withoutAnimation: this.sidebar.withoutAnimation,
|
||||
mobile: this.device === 'mobile'
|
||||
}
|
||||
},
|
||||
needTagsView(){
|
||||
return this.$store.state.settings.tagsView
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClickOutside() {
|
||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/styles/mixin.scss";
|
||||
@import "~@/styles/variables.scss";
|
||||
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.mobile.openSidebar{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.drawer-bg {
|
||||
background: #000;
|
||||
opacity: 0.3;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
// width: calc(100% - #{$sideBarWidth});
|
||||
width: 100%;
|
||||
transition: width 0.28s;
|
||||
}
|
||||
|
||||
.hideSidebar .fixed-header {
|
||||
// width: calc(100% - 54px)
|
||||
}
|
||||
|
||||
.mobile .fixed-header {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
import store from '@/store'
|
||||
|
||||
const { body } = document
|
||||
const WIDTH = 992 // refer to Bootstrap's responsive design
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
$route(route) {
|
||||
if (this.device === 'mobile' && this.sidebar.opened) {
|
||||
store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
// window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
// window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
mounted() {
|
||||
const isMobile = this.$_isMobile()
|
||||
if (isMobile) {
|
||||
store.dispatch('app/toggleDevice', 'mobile')
|
||||
store.dispatch('app/closeSideBar', { withoutAnimation: true })
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_isMobile() {
|
||||
const rect = body.getBoundingClientRect()
|
||||
return rect.width - 1 < WIDTH
|
||||
},
|
||||
$_resizeHandler() {
|
||||
if (!document.hidden) {
|
||||
const isMobile = this.$_isMobile()
|
||||
store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
|
||||
|
||||
if (isMobile) {
|
||||
store.dispatch('app/closeSideBar', { withoutAnimation: true })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"route": {
|
||||
"Dashboard": "Dashboard",
|
||||
"accountSetting": "Account Settings",
|
||||
"customerServiceManagement": "Customer Service Management",
|
||||
"customerUnitSetting": "Customer Organization Settings",
|
||||
"departmentSetting": "Department Settings",
|
||||
"jurisdictionSetting": "Permission settings",
|
||||
"roleSetting": "role settings",
|
||||
"systemManagement": "System Management",
|
||||
"menuManagement": "menu management",
|
||||
"userManagement": "user management",
|
||||
"userInfo": "User information",
|
||||
"rechargeInfo": "Account recharge information",
|
||||
"consumptionInfo": "Consumption information",
|
||||
"communityManagement": "Community management",
|
||||
"communityInfo": "Community information",
|
||||
"deviceInformation": "Device information",
|
||||
"carDviceInformation": "Car device information",
|
||||
"areaSetting": "Area Setting",
|
||||
"accountArea": "Account area authorization",
|
||||
"chargingInfo": "User charging information",
|
||||
"carChargingInfo": "User carcharging information",
|
||||
"motorcycleStatistics": "Motorcycle monthly statistics",
|
||||
"vehicleStatistics": "Electric vehicle monthly statistics",
|
||||
"electricityEquipment": "Electricity meter equipment management",
|
||||
"electricAndCharging": "Meter load pile associated settings",
|
||||
"meterMonthlyStatistics": "Meter monthly statistics",
|
||||
"divideIntoManagement": "Divide Into Management",
|
||||
"divideIntoPerson": "Divide Into Person List",
|
||||
"divideIntoProportionSet": "Share ratio setting",
|
||||
"monthlySettlement": "monthly Settlement",
|
||||
"monthlySplit": "monthly Split",
|
||||
"chargingpileMaintenanceRecords": "Charging pile maintenance records"
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import Cookies from 'js-cookie'
|
||||
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
|
||||
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
|
||||
import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
|
||||
import elementJaLocale from 'element-ui/lib/locale/lang/ja'// element-ui lang
|
||||
import enLocale from './en'
|
||||
import zhLocale from './zh'
|
||||
import esLocale from './es'
|
||||
import jaLocale from './ja'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
...enLocale,
|
||||
...elementEnLocale
|
||||
},
|
||||
zh: {
|
||||
...zhLocale,
|
||||
...elementZhLocale
|
||||
},
|
||||
es: {
|
||||
...esLocale,
|
||||
...elementEsLocale
|
||||
},
|
||||
ja: {
|
||||
...jaLocale,
|
||||
...elementJaLocale
|
||||
}
|
||||
}
|
||||
export function getLanguage() {
|
||||
const chooseLanguage = Cookies.get('language')
|
||||
if (chooseLanguage) return chooseLanguage
|
||||
|
||||
// if has not choose language
|
||||
const language = (navigator.language || navigator.browserLanguage).toLowerCase()
|
||||
const locales = Object.keys(messages)
|
||||
for (const locale of locales) {
|
||||
if (language.indexOf(locale) > -1) {
|
||||
return locale
|
||||
}
|
||||
}
|
||||
return 'en'
|
||||
}
|
||||
const i18n = new VueI18n({
|
||||
// set locale
|
||||
// options: en | zh | es
|
||||
locale: getLanguage(),
|
||||
// set locale messages
|
||||
messages
|
||||
})
|
||||
|
||||
export default i18n
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user