mirror of
https://gitee.com/lyt-top/vue-next-admin
synced 2026-06-07 10:22:14 +08:00
Compare commits
22 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4228b58434 | |||
| cc7520976e | |||
| e3aa4d4816 | |||
| af13922492 | |||
| 6467f57cf2 | |||
| 04ca9b04c1 | |||
| 3f4c08c119 | |||
| 99431138c5 | |||
| fe70746902 | |||
| cea507e688 | |||
| 15a3025928 | |||
| 4f9ddc6c26 | |||
| f6ff10c4a9 | |||
| 8b1c80a8d4 | |||
| a4da51c179 | |||
| 12e6b2b4bc | |||
| 25fa3536de | |||
| ea5dccebe6 | |||
| e0960f9009 | |||
| c49736ae7d | |||
| dfcf817d70 | |||
| 71eb623cef |
@ -44,6 +44,7 @@ module.exports = {
|
||||
'vue/comment-directive': 'off',
|
||||
'vue/no-parsing-error': 'off',
|
||||
'vue/no-deprecated-v-on-native-modifier': 'off',
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'no-useless-escape': 'off',
|
||||
'no-sparse-arrays': 'off',
|
||||
'no-prototype-builtins': 'off',
|
||||
|
||||
89
CHANGELOG.md
89
CHANGELOG.md
@ -2,6 +2,95 @@
|
||||
|
||||
🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
|
||||
|
||||
## 1.2.0
|
||||
|
||||
`2021.11.28`
|
||||
|
||||
- 🌟 更新 依赖更新最新版本
|
||||
- 🎯 优化 深色模式
|
||||
- 🎯 优化 `/@/utils` 文件夹，合并删除单一内容
|
||||
- 🎯 优化 系统设置：菜单管理（新增、修改）、角色管理（新增菜单权限）、用户管理、部门管理、字典管理
|
||||
- 🎯 优化 登录界面逻辑、权限管理逻辑
|
||||
- 🎯 优化 同步 [vue-next-admin-images](https://gitee.com/lyt-top/vue-next-admin-images/tree/master/menu) 后端控制菜单模拟数据
|
||||
- 🎉 新增 适配 Font Icon 向 SVG Icon 迁移（改动大，"element-plus": "^1.2.0-beta.4" 谨慎更新）
|
||||
- 🐞 修复 热更新问题，感谢@甜蜜蜜
|
||||
- 🐞 修复 页面/element 字体图标演示
|
||||
- 🐞 修复 功能/图标选择器演示，新增高级功能 [issues #I4GJXQ](https://gitee.com/lyt-top/vue-next-admin/issues/I4GJXQ)
|
||||
|
||||
## 1.1.2
|
||||
|
||||
`2021.10.17`
|
||||
|
||||
- 🌟 更新 依赖更新最新版本
|
||||
- 🐞 修复 开启全屏时，刷新界面被还原成未全屏的状态
|
||||
- 🎯 优化 tagsView 右键菜单关闭逻辑
|
||||
- 🎯 优化 wangeditor 富文本编辑器（增加双向绑定）
|
||||
- 🎉 新增 工作流（暂不开源）
|
||||
- 🎉 新增 基础版 ts（不带国际化），切换 `vue-next-admin-template` 分支
|
||||
|
||||
## 1.1.1
|
||||
|
||||
`2021.09.25`
|
||||
|
||||
- 🌟 更新 依赖更新最新版本（`"element-plus": "^1.1.0-beta.13"` 版本运行错误，`^1.1.0-beta.16`修复横向菜单卡死问题）
|
||||
- 🐞 修复 Dialog 弹窗位置错误、Drawer 抽屉内边距、el-menu 菜单收起时背景色问题
|
||||
- 🎯 优化 锁屏界面自动锁屏(s/秒)必须设置至少 1 秒
|
||||
- 🎉 新增 分栏布局，鼠标移入当前项时，显示当前项菜单内容
|
||||
- 🎉 新增 工作流（未完成）
|
||||
|
||||
## 1.1.0
|
||||
|
||||
`2021.09.10`
|
||||
|
||||
- 🌟 更新 依赖更新最新版本
|
||||
- 🎯 优化 小屏模式下登录页二维码遮挡标题问题
|
||||
- 🎉 新增 图片验证器
|
||||
- 🎉 新增 动态复杂表单
|
||||
- 🎉 新增 工作流（未完成）
|
||||
- 🎉 新增 深色主题(伪深色，样式变动大，谨慎更新)
|
||||
|
||||
## 1.0.18
|
||||
|
||||
`2021.08.29`
|
||||
|
||||
- 🌟 更新 依赖更新最新版本
|
||||
- 🎯 优化 权限组件去掉顶级 div（`/src/components/auth`）
|
||||
- 🎉 新增 布局配置添加恢复默认按钮
|
||||
- 🐞 修复 升级 <a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">element plus 1.1.0-beta.7</a>后项目无法启动、el-menu 菜单
|
||||
- 🐞 修复 表格固定列时的层级、设置了相对定位时，遮挡左侧导航菜单问题
|
||||
|
||||
## 1.0.17
|
||||
|
||||
`2021.08.22`
|
||||
|
||||
- 🌟 更新 依赖更新最新版本
|
||||
- 🎯 优化 去除设置布局切换，重置主题样式（initSetLayoutChange），切换布局需手动设置样式，设置的样式自动同步各布局
|
||||
- 🎯 优化 Dropdown 下拉菜单用户账号靠边时换行问题
|
||||
- 🎯 优化 左侧导航菜单，共用菜单树，防止 `布局配置` 设置 `菜单 / 顶栏` 时，样式丢失等问题
|
||||
- 🐞 修复 固定 header 后没有回到顶部的 bug，拉取项目后运行不起来的 bug。<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/14" target="_blank">!14</a>，感谢<a href="https://gitee.com/wjs0509" target="_blank">@wjs0509</a>
|
||||
- 🐞 修复 tagView 右键全屏后，浏览器窗口大小发生任何变化都会导致左边菜单显示出来，并且可点击打开对应页面。<a href="https://gitee.com/lyt-top/vue-next-admin/issues/I46E6T" target="_blank">I46E6T</a>
|
||||
- 🐞 修复 默认设置 `菜单 / 顶栏` 样式不生效问题（/@/src/store/modules/themeConfig.ts）
|
||||
|
||||
## 1.0.16
|
||||
|
||||
`2021.08.14`
|
||||
|
||||
- 🌟 更新 依赖更新最新版本
|
||||
- 🎯 优化 菜单高亮（详情且详情设置了 meta.isHide 时，顶级菜单高亮），感谢群友@YourObject
|
||||
- 🎯 优化 详情路径写法：如父级（/pages/filtering），那么详情为（/pages/filtering/details?id=1）。这样写可实现（详情时，父级菜单高亮），否则写成（/pages/filteringDetails?id=1）顶级菜单将不会高亮。可参考：`页面/过滤筛选组件`，点击当前图片进行测试
|
||||
- 🎯 优化 tagsView 右键菜单全屏时，打开的界面高度问题
|
||||
- 🎯 优化 图表批量 resize 问题
|
||||
- 🐞 修复 菜单收起时（设置全局主题：primary 且有二级菜单时），文字高亮颜色不对
|
||||
- 🐞 修复 国际化 <a href="https://gitee.com/lyt-top/vue-next-admin/issues/I43NPE" target="_blank">#I43NPE</a>。可参考：`页面/过滤筛选组件`，点击顶部语言切换，进行底部分页国际化查看
|
||||
|
||||
## 1.0.15
|
||||
|
||||
`2021.08.06`
|
||||
|
||||
- 🌟 更新 依赖更新最新版本
|
||||
- 🎯 优化 tagsView 右键菜单点击时的字段名（id 已修改成 contextMenuClickId）与路由中返回的 id 名冲突问题，感谢群友@伯牙已遇钟子期
|
||||
- 🎉 新增 多个 form 表单验证界面演示
|
||||
|
||||
## 1.0.14
|
||||
|
||||
`2021.07.29`
|
||||
|
||||
25
README.md
25
README.md
@ -39,6 +39,14 @@
|
||||
- 复制代码(桌面 cmd 运行) `npm install -g cnpm --registry=https://registry.npm.taobao.org`
|
||||
- 复制代码(桌面 cmd 运行) `npm install -g yarn`
|
||||
|
||||
#### 🏭 环境支持
|
||||
|
||||
| Edge | last 2 versions | last 2 versions | last 2 versions |
|
||||
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
|
||||
|  |  |  |  |
|
||||
|
||||
> 由于 Vue3 不再支持 IE11，故而 ElementPlus 也不支持 IE11 及之前版本。
|
||||
|
||||
#### ⚡ 使用说明
|
||||
|
||||
建议使用 cnpm，因为 yarn 有时会报错。<a href="http://nodejs.cn/" target="_blank">node 版本 > 12xx.xx.x</a>
|
||||
@ -71,11 +79,18 @@ cnpm run build
|
||||
|
||||
#### 💯 学习交流加 QQ 群
|
||||
|
||||
- 若加群了没同意（一般不会超过一天），那就是群满了，请换一个群试试
|
||||
- 查看开发文档、<a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank">vue-next-admin</a> 开发文档正在编写中...
|
||||
- 群号码：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">665452019</a>
|
||||
- 群号码：
|
||||
1 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">665452019</a>
|
||||
2 群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">766356862</a>
|
||||
|
||||
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">
|
||||
<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/user/qqs.png" width="220" alt="vue-next-admin 讨论群" title="vue-next-admin 讨论群"/></a>
|
||||
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">
|
||||
<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/user/qq1.png" width="220" height="220" alt="vue-next-admin 讨论群" title="vue-next-admin 讨论群1"/>
|
||||
</a>
|
||||
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">
|
||||
<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/user/qq2.png" width="220" height="220" alt="vue-next-admin 讨论群" title="vue-next-admin 讨论群2"/>
|
||||
</a>
|
||||
|
||||
#### ❤️ 鸣谢列表
|
||||
|
||||
@ -103,10 +118,12 @@ cnpm run build
|
||||
- <a href="https://github.com/likaia/screen-shot" target="_blank">vue-web-screen-shot</a>
|
||||
- <a href="https://github.com/jbaysolutions/vue-grid-layout" target="_blank">vue-grid-layout</a>
|
||||
- <a href="https://github.com/antoniandre/splitpanes" target="_blank">splitpanes</a>
|
||||
- <a href="https://github.com/yimijianfang/vue-drag-verify" target="_blank">vue-drag-verify</a>
|
||||
- <a href="https://github.com/jsplumb/jsplumb" target="_blank">jsplumb</a>
|
||||
|
||||
#### 💕 特别感谢
|
||||
|
||||
特别感谢群里老哥的建议、指导与帮忙，谢谢！
|
||||
特别感谢老哥们的建议、指导与帮忙。谢谢！
|
||||
|
||||
- <a href="https://gitee.com/click33/sa-plus" target="_blank">@省长</a>
|
||||
- <a href="https://gitee.com/jskz/Jskz-SpringCloud" target="_blank">@唐参
|
||||
|
||||
76
package.json
76
package.json
@ -1,58 +1,82 @@
|
||||
{
|
||||
"name": "vue-next-admin",
|
||||
"version": "1.0.14",
|
||||
"version": "1.2.0",
|
||||
"description": "vue3 vite next admin template",
|
||||
"author": "lyt_20201208",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "vite --force",
|
||||
"build": "vite build",
|
||||
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"axios": "^0.24.0",
|
||||
"countup.js": "^2.0.8",
|
||||
"cropperjs": "^1.5.12",
|
||||
"echarts": "^5.1.2",
|
||||
"echarts-gl": "^2.0.7",
|
||||
"echarts": "^5.2.2",
|
||||
"echarts-gl": "^2.0.8",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"element-plus": "^1.0.2-beta.65",
|
||||
"element-plus": "^1.2.0-beta.5",
|
||||
"jsplumb": "^2.15.6",
|
||||
"mitt": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"print-js": "^1.6.0",
|
||||
"qrcodejs2-fixes": "^0.0.2",
|
||||
"screenfull": "^5.1.0",
|
||||
"screenfull": "^6.0.0",
|
||||
"sortablejs": "^1.14.0",
|
||||
"splitpanes": "^3.0.4",
|
||||
"vue": "^3.1.5",
|
||||
"vue": "^3.2.20",
|
||||
"vue-clipboard3": "^1.0.1",
|
||||
"vue-grid-layout": "^3.0.0-beta1",
|
||||
"vue-i18n": "^9.1.7",
|
||||
"vue-router": "^4.0.10",
|
||||
"vue-web-screen-shot": "^1.2.0",
|
||||
"vue-i18n": "^9.1.9",
|
||||
"vue-router": "^4.0.12",
|
||||
"vue-web-screen-shot": "^1.3.0",
|
||||
"vuex": "^4.0.2",
|
||||
"wangeditor": "^4.7.6"
|
||||
"wangeditor": "^4.7.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/axios": "^0.14.0",
|
||||
"@types/clipboard": "^2.0.1",
|
||||
"@types/node": "^16.4.9",
|
||||
"@types/node": "^16.11.11",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/sortablejs": "^1.10.7",
|
||||
"@typescript-eslint/eslint-plugin": "^4.28.5",
|
||||
"@typescript-eslint/parser": "^4.28.5",
|
||||
"@vitejs/plugin-vue": "^1.3.0",
|
||||
"@vue/compiler-sfc": "^3.1.5",
|
||||
"@typescript-eslint/eslint-plugin": "^5.5.0",
|
||||
"@typescript-eslint/parser": "^5.5.0",
|
||||
"@vitejs/plugin-vue": "^1.10.1",
|
||||
"@vue/compiler-sfc": "^3.2.23",
|
||||
"dotenv": "^10.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^7.15.0",
|
||||
"prettier": "^2.3.2",
|
||||
"sass": "^1.37.0",
|
||||
"sass-loader": "^12.1.0",
|
||||
"typescript": "^4.3.5",
|
||||
"vite": "^2.4.4",
|
||||
"vue-eslint-parser": "^7.10.0"
|
||||
"eslint": "^8.4.0",
|
||||
"eslint-plugin-vue": "^8.1.1",
|
||||
"prettier": "^2.5.0",
|
||||
"sass": "^1.44.0",
|
||||
"sass-loader": "^12.3.0",
|
||||
"typescript": "^4.5.2",
|
||||
"vite": "^2.6.14",
|
||||
"vue-eslint-parser": "^8.0.1"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://gitee.com/lyt-top/vue-next-admin/issues"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0",
|
||||
"npm": ">= 6.0.0"
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
"vue3",
|
||||
"vuejs/vue-next",
|
||||
"element-ui",
|
||||
"element-plus",
|
||||
"vue-next-admin",
|
||||
"next-admin"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitee.com/lyt-top/vue-next-admin.git"
|
||||
}
|
||||
}
|
||||
|
||||
34
src/App.vue
34
src/App.vue
@ -1,16 +1,18 @@
|
||||
<template>
|
||||
<router-view v-show="getThemeConfig.lockScreenTime !== 0" />
|
||||
<LockScreen v-if="getThemeConfig.isLockScreen" />
|
||||
<Setings ref="setingsRef" v-show="getThemeConfig.lockScreenTime !== 0" />
|
||||
<CloseFull />
|
||||
<el-config-provider :locale="i18nLocale">
|
||||
<router-view v-show="getThemeConfig.lockScreenTime !== 0" />
|
||||
<LockScreen v-if="getThemeConfig.isLockScreen" />
|
||||
<Setings ref="setingsRef" v-show="getThemeConfig.lockScreenTime !== 0" />
|
||||
<CloseFull />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent, watch } from 'vue';
|
||||
import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent, watch, reactive, toRefs } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore } from '/@/store/index';
|
||||
import { useTitle } from '/@/utils/setWebTitle';
|
||||
import { Local } from '/@/utils/storage';
|
||||
import other from '/@/utils/other';
|
||||
import { Local, Session } from '/@/utils/storage';
|
||||
import setIntroduction from '/@/utils/setIconfont';
|
||||
import LockScreen from '/@/layout/lockScreen/index.vue';
|
||||
import Setings from '/@/layout/navBars/breadcrumb/setings.vue';
|
||||
@ -23,7 +25,9 @@ export default defineComponent({
|
||||
const setingsRef = ref();
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
const title = useTitle();
|
||||
const state = reactive({
|
||||
i18nLocale: null,
|
||||
});
|
||||
// 获取布局配置信息
|
||||
const getThemeConfig = computed(() => {
|
||||
return store.state.themeConfig.themeConfig;
|
||||
@ -46,27 +50,37 @@ export default defineComponent({
|
||||
proxy.mittBus.on('openSetingsDrawer', () => {
|
||||
openSetingsDrawer();
|
||||
});
|
||||
// 设置 i18n，App.vue 中的 el-config-provider
|
||||
proxy.mittBus.on('getI18nConfig', (locale: string) => {
|
||||
state.i18nLocale = locale;
|
||||
});
|
||||
// 获取缓存中的布局配置
|
||||
if (Local.get('themeConfig')) {
|
||||
store.dispatch('themeConfig/setThemeConfig', Local.get('themeConfig'));
|
||||
document.documentElement.style.cssText = Local.get('themeConfigStyle');
|
||||
}
|
||||
// 获取缓存中的全屏配置
|
||||
if (Session.get('isTagsViewCurrenFull')) {
|
||||
store.dispatch('tagsViewRoutes/setCurrenFullscreen', Session.get('isTagsViewCurrenFull'));
|
||||
}
|
||||
});
|
||||
});
|
||||
// 页面销毁时，关闭监听布局配置
|
||||
// 页面销毁时，关闭监听布局配置/i18n监听
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off('openSetingsDrawer', () => {});
|
||||
proxy.mittBus.off('getI18nConfig', () => {});
|
||||
});
|
||||
// 监听路由的变化，设置网站标题
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
title();
|
||||
other.useTitle();
|
||||
}
|
||||
);
|
||||
return {
|
||||
setingsRef,
|
||||
getThemeConfig,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div v-if="getUserAuthBtnList">
|
||||
<slot />
|
||||
</div>
|
||||
<slot v-if="getUserAuthBtnList" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div v-if="getUserAuthBtnList">
|
||||
<slot />
|
||||
</div>
|
||||
<slot v-if="getUserAuthBtnList" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div v-if="getUserAuthBtnList">
|
||||
<slot />
|
||||
</div>
|
||||
<slot v-if="getUserAuthBtnList" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -98,12 +98,12 @@ export default {
|
||||
display: inline-block;
|
||||
height: 350px;
|
||||
flex: 1;
|
||||
border: 1px solid #ebeef5;
|
||||
background: #fff;
|
||||
border: var(--el-border-base);
|
||||
background: var(--color-whites);
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
cursor: move;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--el-border-radius-base);
|
||||
.cropper-warp-left-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -124,7 +124,7 @@ export default {
|
||||
.cropper-warp-right-value-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
border-radius: var(--el-border-radius-circle);
|
||||
margin: auto;
|
||||
}
|
||||
.cropper-size {
|
||||
@ -135,7 +135,7 @@ export default {
|
||||
.cropper-warp-right-label {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
color: var(--el-text-color-primary);
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
296
src/components/dragVerify/dragVerify.vue
Normal file
296
src/components/dragVerify/dragVerify.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div
|
||||
ref="dragVerify"
|
||||
class="drag_verify"
|
||||
:style="dragVerifyStyle"
|
||||
@mousemove="dragMoving"
|
||||
@mouseup="dragFinish"
|
||||
@mouseleave="dragFinish"
|
||||
@touchmove="dragMoving"
|
||||
@touchend="dragFinish"
|
||||
>
|
||||
<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle"></div>
|
||||
<div class="dv_text" :style="textStyle" ref="message">
|
||||
<slot name="textBefore" v-if="$slots.textBefore"></slot>
|
||||
{{ message }}
|
||||
<slot name="textAfter" v-if="$slots.textAfter"></slot>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="dv_handler dv_handler_bg"
|
||||
:class="{ goFirst: isOk }"
|
||||
@mousedown="dragStart"
|
||||
@touchstart="dragStart"
|
||||
ref="handler"
|
||||
:style="handlerStyle"
|
||||
>
|
||||
<i :class="handlerIcon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'dragVerify',
|
||||
props: {
|
||||
isPassing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 250,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'swiping to the right side',
|
||||
},
|
||||
successText: {
|
||||
type: String,
|
||||
default: 'success',
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#eee',
|
||||
},
|
||||
progressBarBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
completedBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '4px',
|
||||
},
|
||||
handlerIcon: {
|
||||
type: String,
|
||||
},
|
||||
successIcon: {
|
||||
type: String,
|
||||
},
|
||||
handlerBg: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
textSize: {
|
||||
type: String,
|
||||
default: '14px',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
const dragEl = this.$refs.dragVerify;
|
||||
dragEl.style.setProperty('--textColor', this.textColor);
|
||||
dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
|
||||
dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
|
||||
console.log(this.$slots);
|
||||
},
|
||||
computed: {
|
||||
handlerStyle: function () {
|
||||
return {
|
||||
width: this.height + 'px',
|
||||
height: this.height + 'px',
|
||||
background: this.handlerBg,
|
||||
};
|
||||
},
|
||||
message: function () {
|
||||
return this.isPassing ? this.successText : this.text;
|
||||
},
|
||||
dragVerifyStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
height: this.height + 'px',
|
||||
lineHeight: this.height + 'px',
|
||||
background: this.background,
|
||||
borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
progressBarStyle: function () {
|
||||
return {
|
||||
background: this.progressBarBg,
|
||||
height: this.height + 'px',
|
||||
borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
textStyle: function () {
|
||||
return {
|
||||
height: this.height + 'px',
|
||||
width: this.width + 'px',
|
||||
fontSize: this.textSize,
|
||||
};
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMoving: false,
|
||||
x: 0,
|
||||
isOk: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
dragStart: function (e) {
|
||||
if (!this.isPassing) {
|
||||
this.isMoving = true;
|
||||
this.x = e.pageX || e.touches[0].pageX;
|
||||
}
|
||||
this.$emit('handlerMove');
|
||||
},
|
||||
dragMoving: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.touches[0].pageX) - this.x;
|
||||
var handler = this.$refs.handler;
|
||||
if (_x > 0 && _x <= this.width - this.height) {
|
||||
handler.style.left = _x + 'px';
|
||||
this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
|
||||
} else if (_x > this.width - this.height) {
|
||||
handler.style.left = this.width - this.height + 'px';
|
||||
this.$refs.progressBar.style.width = this.width - this.height / 2 + 'px';
|
||||
this.passVerify();
|
||||
}
|
||||
}
|
||||
},
|
||||
dragFinish: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.changedTouches[0].pageX) - this.x;
|
||||
if (_x < this.width - this.height) {
|
||||
this.isOk = true;
|
||||
var that = this;
|
||||
setTimeout(function () {
|
||||
that.$refs.handler.style.left = '0';
|
||||
that.$refs.progressBar.style.width = '0';
|
||||
that.isOk = false;
|
||||
}, 500);
|
||||
this.$emit('passfail');
|
||||
} else {
|
||||
var handler = this.$refs.handler;
|
||||
handler.style.left = this.width - this.height + 'px';
|
||||
this.$refs.progressBar.style.width = this.width - this.height / 2 + 'px';
|
||||
this.passVerify();
|
||||
}
|
||||
this.isMoving = false;
|
||||
}
|
||||
},
|
||||
passVerify: function () {
|
||||
this.$emit('update:isPassing', true);
|
||||
this.isMoving = false;
|
||||
var handler = this.$refs.handler;
|
||||
handler.children[0].className = this.successIcon;
|
||||
this.$refs.progressBar.style.background = this.completedBg;
|
||||
this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
|
||||
this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
|
||||
this.$refs.message.style.color = '#fff';
|
||||
this.$emit('passcallback');
|
||||
},
|
||||
reset: function () {
|
||||
const oriData = this.$options.data();
|
||||
for (const key in oriData) {
|
||||
if (Object.prototype.hasOwnProperty.call(oriData, key)) {
|
||||
this[key] = oriData[key];
|
||||
}
|
||||
}
|
||||
var handler = this.$refs.handler;
|
||||
var message = this.$refs.message;
|
||||
handler.style.left = '0';
|
||||
this.$refs.progressBar.style.width = '0';
|
||||
handler.children[0].className = this.handlerIcon;
|
||||
message.style['-webkit-text-fill-color'] = 'transparent';
|
||||
message.style.animation = 'slidetounlock 3s infinite';
|
||||
message.style.color = this.background;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.drag_verify {
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.drag_verify .dv_handler {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
.drag_verify .dv_handler i {
|
||||
color: #666;
|
||||
padding-left: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.drag_verify .dv_handler .el-icon-circle-check {
|
||||
color: #6c6;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.drag_verify .dv_progress_bar {
|
||||
position: absolute;
|
||||
height: 34px;
|
||||
width: 0px;
|
||||
}
|
||||
.drag_verify .dv_text {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
color: transparent;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, var(--textColor)),
|
||||
color-stop(0.4, var(--textColor)),
|
||||
color-stop(0.5, #fff),
|
||||
color-stop(0.6, var(--textColor)),
|
||||
color-stop(1, var(--textColor))
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-size-adjust: none;
|
||||
animation: slidetounlock 3s infinite;
|
||||
}
|
||||
.drag_verify .dv_text * {
|
||||
-webkit-text-fill-color: var(--textColor);
|
||||
}
|
||||
.goFirst {
|
||||
left: 0px !important;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
.goFirst2 {
|
||||
width: 0px !important;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@-webkit-keyframes slidetounlock {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--width) 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slidetounlock2 {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
453
src/components/dragVerify/dragVerifyImg.vue
Normal file
453
src/components/dragVerify/dragVerifyImg.vue
Normal file
@ -0,0 +1,453 @@
|
||||
<template>
|
||||
<div class="drag-verify-container">
|
||||
<div :style="dragVerifyImgStyle">
|
||||
<img ref="checkImg" :src="imgsrc" @load="checkimgLoaded" style="width: 100%" alt="" />
|
||||
<div class="move-bar" :class="{ goFirst: isOk, goKeep: isKeep }" :style="movebarStyle" ref="moveBar" v-show="showBar"></div>
|
||||
<div class="clip-bar" :style="clipbarStyle" ref="clipBar"></div>
|
||||
<div class="refresh" v-if="showRefresh && !isPassing">
|
||||
<i :class="refreshIcon" @click="refreshimg"></i>
|
||||
</div>
|
||||
<div class="tips success" v-if="showTips && isPassing">{{ successTip }}</div>
|
||||
<div class="tips danger" v-if="showTips && !isPassing && showErrorTip">{{ failTip }}</div>
|
||||
</div>
|
||||
<div
|
||||
ref="dragVerify"
|
||||
class="drag_verify"
|
||||
:style="dragVerifyStyle"
|
||||
@mousemove="dragMoving"
|
||||
@mouseup="dragFinish"
|
||||
@mouseleave="dragFinish"
|
||||
@touchmove="dragMoving"
|
||||
@touchend="dragFinish"
|
||||
>
|
||||
<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle">
|
||||
{{ successMessage }}
|
||||
</div>
|
||||
<div class="dv_text" :style="textStyle" ref="message">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="dv_handler dv_handler_bg"
|
||||
:class="{ goFirst: isOk }"
|
||||
@mousedown="dragStart"
|
||||
@touchstart="dragStart"
|
||||
ref="handler"
|
||||
:style="handlerStyle"
|
||||
>
|
||||
<i :class="handlerIcon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'dragVerify',
|
||||
props: {
|
||||
isPassing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 250,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'swiping to the right side',
|
||||
},
|
||||
successText: {
|
||||
type: String,
|
||||
default: 'success',
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#eee',
|
||||
},
|
||||
progressBarBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
completedBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '4px',
|
||||
},
|
||||
handlerIcon: {
|
||||
type: String,
|
||||
},
|
||||
successIcon: {
|
||||
type: String,
|
||||
},
|
||||
handlerBg: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
textSize: {
|
||||
type: String,
|
||||
default: '14px',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
imgsrc: {
|
||||
type: String,
|
||||
},
|
||||
barWidth: {
|
||||
type: Number,
|
||||
default: 70,
|
||||
},
|
||||
barHeight: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
barRadius: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
showRefresh: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
refreshIcon: {
|
||||
type: String,
|
||||
},
|
||||
showTips: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
successTip: {
|
||||
type: String,
|
||||
default: '验证通过，超过80%用户',
|
||||
},
|
||||
failTip: {
|
||||
type: String,
|
||||
default: '验证未通过，拖动滑块将悬浮图像正确合并',
|
||||
},
|
||||
diffWidth: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
const dragEl = this.$refs.dragVerify;
|
||||
dragEl.style.setProperty('--textColor', this.textColor);
|
||||
dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
|
||||
dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
|
||||
},
|
||||
computed: {
|
||||
handlerStyle: function () {
|
||||
return {
|
||||
width: this.height + 'px',
|
||||
height: this.height + 'px',
|
||||
background: this.handlerBg,
|
||||
};
|
||||
},
|
||||
message: function () {
|
||||
return this.isPassing ? '' : this.text;
|
||||
},
|
||||
successMessage: function () {
|
||||
return this.isPassing ? this.successText : '';
|
||||
},
|
||||
dragVerifyStyle: function () {
|
||||
console.log(this.width, 'width');
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
height: this.height + 'px',
|
||||
lineHeight: this.height + 'px',
|
||||
background: this.background,
|
||||
borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
dragVerifyImgStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
};
|
||||
},
|
||||
progressBarStyle: function () {
|
||||
return {
|
||||
background: this.progressBarBg,
|
||||
height: this.height + 'px',
|
||||
borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
textStyle: function () {
|
||||
return {
|
||||
height: this.height + 'px',
|
||||
width: this.width + 'px',
|
||||
fontSize: this.textSize,
|
||||
};
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMoving: false,
|
||||
x: 0,
|
||||
isOk: false,
|
||||
isKeep: false,
|
||||
movebarStyle: {},
|
||||
clipbarStyle: {},
|
||||
showBar: false,
|
||||
clipBarx: 0,
|
||||
showErrorTip: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
checkimgLoaded: function () {
|
||||
//生成图片缺失位置
|
||||
var barWidth = this.barWidth;
|
||||
var barHeight = this.barHeight;
|
||||
var imgHeight = this.$refs.checkImg.height;
|
||||
var halfWidth = Math.floor(this.width / 2);
|
||||
var refreshHeigth = 25;
|
||||
var tipHeight = 20;
|
||||
var x = halfWidth + Math.ceil(Math.random() * (halfWidth - barWidth));
|
||||
var y = refreshHeigth + Math.floor(Math.random() * (imgHeight - barHeight - refreshHeigth - tipHeight));
|
||||
this.clipbarStyle = {
|
||||
width: barWidth + 'px',
|
||||
height: barHeight + 'px',
|
||||
top: y + 'px',
|
||||
left: x + 'px',
|
||||
'border-radius': this.barRadius + 'px',
|
||||
};
|
||||
this.clipBarx = x;
|
||||
var imgsrc = this.imgsrc;
|
||||
var width = this.width;
|
||||
this.movebarStyle = {
|
||||
background: `url(${imgsrc})`,
|
||||
'background-position': `-${x}px -${y}px`,
|
||||
'background-size': `${width}px`,
|
||||
width: barWidth + 'px',
|
||||
height: barHeight + 'px',
|
||||
top: y + 'px',
|
||||
'border-radius': this.barRadius + 'px',
|
||||
};
|
||||
},
|
||||
dragStart: function (e) {
|
||||
if (!this.isPassing) {
|
||||
this.isMoving = true;
|
||||
this.x = e.pageX || e.touches[0].pageX;
|
||||
}
|
||||
this.showBar = true;
|
||||
this.showErrorTip = false;
|
||||
this.$emit('handlerMove');
|
||||
},
|
||||
dragMoving: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.touches[0].pageX) - this.x;
|
||||
var handler = this.$refs.handler;
|
||||
handler.style.left = _x + 'px';
|
||||
this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
|
||||
this.$refs.moveBar.style.left = _x + 'px';
|
||||
}
|
||||
},
|
||||
dragFinish: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.changedTouches[0].pageX) - this.x;
|
||||
if (Math.abs(_x - this.clipBarx) > this.diffWidth) {
|
||||
this.isOk = true;
|
||||
var that = this;
|
||||
setTimeout(function () {
|
||||
that.$refs.handler.style.left = '0';
|
||||
that.$refs.progressBar.style.width = '0';
|
||||
that.$refs.moveBar.style.left = '0';
|
||||
that.isOk = false;
|
||||
}, 500);
|
||||
this.showErrorTip = true;
|
||||
this.$emit('passfail');
|
||||
} else {
|
||||
this.passVerify();
|
||||
}
|
||||
this.isMoving = false;
|
||||
}
|
||||
},
|
||||
passVerify: function () {
|
||||
this.$emit('update:isPassing', true);
|
||||
this.isMoving = false;
|
||||
var handler = this.$refs.handler;
|
||||
handler.children[0].className = this.successIcon;
|
||||
this.$refs.progressBar.style.background = this.completedBg;
|
||||
this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
|
||||
this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
|
||||
this.$refs.progressBar.style.color = '#fff';
|
||||
this.$refs.progressBar.style.fontSize = this.textSize;
|
||||
this.isKeep = true;
|
||||
setTimeout(() => {
|
||||
this.$refs.moveBar.style.left = this.clipBarx + 'px';
|
||||
setTimeout(() => {
|
||||
this.isKeep = false;
|
||||
}, 200);
|
||||
}, 100);
|
||||
this.$emit('passcallback');
|
||||
},
|
||||
reset: function () {
|
||||
this.reImg();
|
||||
this.checkimgLoaded();
|
||||
},
|
||||
reImg: function () {
|
||||
this.$emit('update:isPassing', false);
|
||||
const oriData = this.$options.data();
|
||||
for (const key in oriData) {
|
||||
if (Object.prototype.hasOwnProperty.call(oriData, key)) {
|
||||
this[key] = oriData[key];
|
||||
}
|
||||
}
|
||||
var handler = this.$refs.handler;
|
||||
var message = this.$refs.message;
|
||||
handler.style.left = '0';
|
||||
this.$refs.progressBar.style.width = '0';
|
||||
handler.children[0].className = this.handlerIcon;
|
||||
message.style['-webkit-text-fill-color'] = 'transparent';
|
||||
message.style.animation = 'slidetounlock 3s infinite';
|
||||
message.style.color = this.background;
|
||||
},
|
||||
refreshimg: function () {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
imgsrc: {
|
||||
immediate: false,
|
||||
handler: function () {
|
||||
this.reImg();
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.drag_verify {
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.drag_verify .dv_handler {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
.drag_verify .dv_handler i {
|
||||
color: #666;
|
||||
padding-left: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.drag_verify .dv_handler .el-icon-circle-check {
|
||||
color: #6c6;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.drag_verify .dv_progress_bar {
|
||||
position: absolute;
|
||||
height: 34px;
|
||||
width: 0px;
|
||||
}
|
||||
.drag_verify .dv_text {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
color: transparent;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, var(--textColor)),
|
||||
color-stop(0.4, var(--textColor)),
|
||||
color-stop(0.5, #fff),
|
||||
color-stop(0.6, var(--textColor)),
|
||||
color-stop(1, var(--textColor))
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-size-adjust: none;
|
||||
animation: slidetounlock 3s infinite;
|
||||
}
|
||||
.drag_verify .dv_text * {
|
||||
-webkit-text-fill-color: var(--textColor);
|
||||
}
|
||||
.goFirst {
|
||||
left: 0px !important;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
.goKeep {
|
||||
transition: left 0.2s;
|
||||
}
|
||||
.goFirst2 {
|
||||
width: 0px !important;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
.drag-verify-container {
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
.move-bar {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
.clip-bar {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.refresh {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips.success {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
color: green;
|
||||
}
|
||||
.tips.danger {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@-webkit-keyframes slidetounlock {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--width) 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slidetounlock2 {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
473
src/components/dragVerify/dragVerifyImgChip.vue
Normal file
473
src/components/dragVerify/dragVerifyImgChip.vue
Normal file
@ -0,0 +1,473 @@
|
||||
<template>
|
||||
<div class="drag-verify-container">
|
||||
<div :style="dragVerifyImgStyle">
|
||||
<img ref="checkImg" crossOrigin="anonymous" :src="imgsrc" @load="checkimgLoaded" style="width: 100%" alt="" />
|
||||
<canvas ref="maincanvas" class="main-canvas"></canvas>
|
||||
<canvas ref="movecanvas" :class="{ goFirst: isOk, goKeep: isKeep }" class="move-canvas"></canvas>
|
||||
<div class="refresh" v-if="showRefresh && !isPassing">
|
||||
<i :class="refreshIcon" @click="refreshimg"></i>
|
||||
</div>
|
||||
<div class="tips success" v-if="showTips && isPassing">{{ successTip }}</div>
|
||||
<div class="tips danger" v-if="showTips && !isPassing && showErrorTip">{{ failTip }}</div>
|
||||
</div>
|
||||
<div
|
||||
ref="dragVerify"
|
||||
class="drag_verify"
|
||||
:style="dragVerifyStyle"
|
||||
@mousemove="dragMoving"
|
||||
@mouseup="dragFinish"
|
||||
@mouseleave="dragFinish"
|
||||
@touchmove="dragMoving"
|
||||
@touchend="dragFinish"
|
||||
>
|
||||
<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle">
|
||||
{{ successMessage }}
|
||||
</div>
|
||||
<div class="dv_text" :style="textStyle" ref="message">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="dv_handler dv_handler_bg"
|
||||
:class="{ goFirst: isOk }"
|
||||
@mousedown="dragStart"
|
||||
@touchstart="dragStart"
|
||||
ref="handler"
|
||||
:style="handlerStyle"
|
||||
>
|
||||
<i :class="handlerIcon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'dragVerifyImgChip',
|
||||
props: {
|
||||
isPassing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 250,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'swiping to the right side',
|
||||
},
|
||||
successText: {
|
||||
type: String,
|
||||
default: 'success',
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#eee',
|
||||
},
|
||||
progressBarBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
completedBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '4px',
|
||||
},
|
||||
handlerIcon: {
|
||||
type: String,
|
||||
},
|
||||
successIcon: {
|
||||
type: String,
|
||||
},
|
||||
handlerBg: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
textSize: {
|
||||
type: String,
|
||||
default: '14px',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
imgsrc: {
|
||||
type: String,
|
||||
},
|
||||
barWidth: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
barRadius: {
|
||||
type: Number,
|
||||
default: 8,
|
||||
},
|
||||
showRefresh: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
refreshIcon: {
|
||||
type: String,
|
||||
},
|
||||
showTips: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
successTip: {
|
||||
type: String,
|
||||
default: '验证通过，超过80%用户',
|
||||
},
|
||||
failTip: {
|
||||
type: String,
|
||||
default: '验证未通过，拖动滑块将悬浮图像正确合并',
|
||||
},
|
||||
diffWidth: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
const dragEl = this.$refs.dragVerify;
|
||||
dragEl.style.setProperty('--textColor', this.textColor);
|
||||
dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
|
||||
dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
|
||||
},
|
||||
computed: {
|
||||
handlerStyle: function () {
|
||||
return {
|
||||
width: this.height + 'px',
|
||||
height: this.height + 'px',
|
||||
background: this.handlerBg,
|
||||
};
|
||||
},
|
||||
message: function () {
|
||||
return this.isPassing ? '' : this.text;
|
||||
},
|
||||
successMessage: function () {
|
||||
return this.isPassing ? this.successText : '';
|
||||
},
|
||||
dragVerifyStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
height: this.height + 'px',
|
||||
lineHeight: this.height + 'px',
|
||||
background: this.background,
|
||||
borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
dragVerifyImgStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
};
|
||||
},
|
||||
progressBarStyle: function () {
|
||||
return {
|
||||
background: this.progressBarBg,
|
||||
height: this.height + 'px',
|
||||
borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
textStyle: function () {
|
||||
return {
|
||||
height: this.height + 'px',
|
||||
width: this.width + 'px',
|
||||
fontSize: this.textSize,
|
||||
};
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMoving: false,
|
||||
x: 0,
|
||||
isOk: false,
|
||||
isKeep: false,
|
||||
clipBarx: 0,
|
||||
showErrorTip: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
draw: function (ctx, x, y, operation) {
|
||||
var l = this.barWidth;
|
||||
var r = this.barRadius;
|
||||
const PI = Math.PI;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
|
||||
ctx.lineTo(x + l, y);
|
||||
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
|
||||
ctx.lineTo(x + l, y + l);
|
||||
ctx.lineTo(x, y + l);
|
||||
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.lineWidth = 2;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
|
||||
ctx.stroke();
|
||||
ctx[operation]();
|
||||
ctx.globalCompositeOperation = 'destination-over';
|
||||
},
|
||||
checkimgLoaded: function () {
|
||||
// 生成图片缺失位置
|
||||
var barWidth = this.barWidth;
|
||||
var imgHeight = this.$refs.checkImg.height;
|
||||
var imgWidth = this.$refs.checkImg.width;
|
||||
var halfWidth = Math.floor(this.width / 2);
|
||||
var refreshHeigth = 25;
|
||||
var tipHeight = 20;
|
||||
var x = halfWidth + Math.ceil(Math.random() * (halfWidth - barWidth - this.barRadius - 5));
|
||||
var y = refreshHeigth + Math.floor(Math.random() * (imgHeight - barWidth - refreshHeigth - tipHeight));
|
||||
this.$refs.maincanvas.setAttribute('width', imgWidth);
|
||||
this.$refs.maincanvas.setAttribute('height', imgHeight);
|
||||
this.$refs.maincanvas.style.display = 'block';
|
||||
var canvasCtx = this.$refs.maincanvas.getContext('2d');
|
||||
this.draw(canvasCtx, x, y, 'fill');
|
||||
this.clipBarx = x;
|
||||
var moveCanvas = this.$refs.movecanvas;
|
||||
moveCanvas.setAttribute('width', imgWidth);
|
||||
moveCanvas.setAttribute('height', imgHeight);
|
||||
this.$refs.movecanvas.style.display = 'block';
|
||||
const L = barWidth + this.barRadius * 2 + 3; //实际宽度
|
||||
var moveCtx = this.$refs.movecanvas.getContext('2d');
|
||||
moveCtx.clearRect(0, 0, imgWidth, imgHeight);
|
||||
this.draw(moveCtx, x, y, 'clip');
|
||||
moveCtx.drawImage(this.$refs.checkImg, 0, 0, imgWidth, imgHeight);
|
||||
var y = y - this.barRadius * 2 - 1;
|
||||
const ImageData = moveCtx.getImageData(x, y, L, L);
|
||||
moveCanvas.setAttribute('width', L);
|
||||
moveCanvas.setAttribute('height', imgHeight);
|
||||
moveCtx.putImageData(ImageData, 0, y);
|
||||
},
|
||||
dragStart: function (e) {
|
||||
if (!this.isPassing) {
|
||||
this.isMoving = true;
|
||||
this.x = e.pageX || e.touches[0].pageX;
|
||||
}
|
||||
this.showBar = true;
|
||||
this.showErrorTip = false;
|
||||
this.$emit('handlerMove');
|
||||
},
|
||||
dragMoving: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.touches[0].pageX) - this.x;
|
||||
var handler = this.$refs.handler;
|
||||
handler.style.left = _x + 'px';
|
||||
this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
|
||||
this.$refs.movecanvas.style.left = _x + 'px';
|
||||
}
|
||||
},
|
||||
dragFinish: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.changedTouches[0].pageX) - this.x;
|
||||
if (Math.abs(_x - this.clipBarx) > this.diffWidth) {
|
||||
this.isOk = true;
|
||||
var that = this;
|
||||
setTimeout(function () {
|
||||
that.$refs.handler.style.left = '0';
|
||||
that.$refs.progressBar.style.width = '0';
|
||||
that.$refs.movecanvas.style.left = '0';
|
||||
that.isOk = false;
|
||||
}, 500);
|
||||
this.$emit('passfail');
|
||||
this.showErrorTip = true;
|
||||
} else {
|
||||
this.passVerify();
|
||||
}
|
||||
this.isMoving = false;
|
||||
}
|
||||
},
|
||||
passVerify: function () {
|
||||
this.$emit('update:isPassing', true);
|
||||
this.isMoving = false;
|
||||
var handler = this.$refs.handler;
|
||||
handler.children[0].className = this.successIcon;
|
||||
this.$refs.progressBar.style.background = this.completedBg;
|
||||
this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
|
||||
this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
|
||||
this.$refs.progressBar.style.color = '#fff';
|
||||
this.$refs.progressBar.style.fontSize = this.textSize;
|
||||
this.isKeep = true;
|
||||
setTimeout(() => {
|
||||
this.$refs.movecanvas.style.left = this.clipBarx + 'px';
|
||||
setTimeout(() => {
|
||||
this.isKeep = false;
|
||||
this.$refs.maincanvas.style.display = 'none';
|
||||
this.$refs.movecanvas.style.display = 'none';
|
||||
}, 200);
|
||||
}, 100);
|
||||
this.$emit('passcallback');
|
||||
},
|
||||
reset: function () {
|
||||
this.reImg();
|
||||
this.checkimgLoaded();
|
||||
},
|
||||
reImg: function () {
|
||||
this.$emit('update:isPassing', false);
|
||||
const oriData = this.$options.data();
|
||||
for (const key in oriData) {
|
||||
if (Object.prototype.hasOwnProperty.call(oriData, key)) {
|
||||
this[key] = oriData[key];
|
||||
}
|
||||
}
|
||||
var handler = this.$refs.handler;
|
||||
var message = this.$refs.message;
|
||||
handler.style.left = '0';
|
||||
this.$refs.progressBar.style.width = '0';
|
||||
handler.children[0].className = this.handlerIcon;
|
||||
message.style['-webkit-text-fill-color'] = 'transparent';
|
||||
message.style.animation = 'slidetounlock 3s infinite';
|
||||
message.style.color = this.background;
|
||||
this.$refs.movecanvas.style.left = '0px';
|
||||
},
|
||||
refreshimg: function () {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
imgsrc: {
|
||||
immediate: false,
|
||||
handler: function () {
|
||||
this.reImg();
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.drag_verify {
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.drag_verify .dv_handler {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
.drag_verify .dv_handler i {
|
||||
color: #666;
|
||||
padding-left: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.drag_verify .dv_handler .el-icon-circle-check {
|
||||
color: #6c6;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.drag_verify .dv_progress_bar {
|
||||
position: absolute;
|
||||
height: 34px;
|
||||
width: 0px;
|
||||
}
|
||||
.drag_verify .dv_text {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
color: transparent;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, var(--textColor)),
|
||||
color-stop(0.4, var(--textColor)),
|
||||
color-stop(0.5, #fff),
|
||||
color-stop(0.6, var(--textColor)),
|
||||
color-stop(1, var(--textColor))
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-size-adjust: none;
|
||||
animation: slidetounlock 3s infinite;
|
||||
}
|
||||
.drag_verify .dv_text * {
|
||||
-webkit-text-fill-color: var(--textColor);
|
||||
}
|
||||
.goFirst {
|
||||
left: 0px !important;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
.goKeep {
|
||||
transition: left 0.2s;
|
||||
}
|
||||
.goFirst2 {
|
||||
width: 0px !important;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
.drag-verify-container {
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
.refresh {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips.success {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
color: green;
|
||||
}
|
||||
.tips.danger {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: yellow;
|
||||
}
|
||||
.main-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.move-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@-webkit-keyframes slidetounlock {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--width) 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slidetounlock2 {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
434
src/components/dragVerify/dragVerifyImgRotate.vue
Normal file
434
src/components/dragVerify/dragVerifyImgRotate.vue
Normal file
@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<div class="drag-verify-container">
|
||||
<div :style="dragVerifyImgStyle">
|
||||
<img ref="checkImg" :src="imgsrc" class="check-img" :class="{ goOrigin: isOk }" @load="checkimgLoaded" :style="imgStyle" alt="" />
|
||||
<div class="tips success" v-if="showTips && isPassing">{{ successTip }}</div>
|
||||
<div class="tips danger" v-if="showTips && !isPassing && showErrorTip">{{ failTip }}</div>
|
||||
</div>
|
||||
<div
|
||||
ref="dragVerify"
|
||||
class="drag_verify"
|
||||
:style="dragVerifyStyle"
|
||||
@mousemove="dragMoving"
|
||||
@mouseup="dragFinish"
|
||||
@mouseleave="dragFinish"
|
||||
@touchmove="dragMoving"
|
||||
@touchend="dragFinish"
|
||||
>
|
||||
<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle">
|
||||
{{ successMessage }}
|
||||
</div>
|
||||
<div class="dv_text" :style="textStyle" ref="message">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="dv_handler dv_handler_bg"
|
||||
:class="{ goFirst: isOk }"
|
||||
@mousedown="dragStart"
|
||||
@touchstart="dragStart"
|
||||
ref="handler"
|
||||
:style="handlerStyle"
|
||||
>
|
||||
<i :class="handlerIcon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'dragVerify',
|
||||
props: {
|
||||
isPassing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 250,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'swiping to the right side',
|
||||
},
|
||||
successText: {
|
||||
type: String,
|
||||
default: 'success',
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#eee',
|
||||
},
|
||||
progressBarBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
completedBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '4px',
|
||||
},
|
||||
handlerIcon: {
|
||||
type: String,
|
||||
},
|
||||
successIcon: {
|
||||
type: String,
|
||||
},
|
||||
handlerBg: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
textSize: {
|
||||
type: String,
|
||||
default: '14px',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
imgsrc: {
|
||||
type: String,
|
||||
},
|
||||
showTips: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
successTip: {
|
||||
type: String,
|
||||
default: '验证通过',
|
||||
},
|
||||
failTip: {
|
||||
type: String,
|
||||
default: '验证失败',
|
||||
},
|
||||
diffDegree: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
minDegree: {
|
||||
type: Number,
|
||||
default: 90,
|
||||
},
|
||||
maxDegree: {
|
||||
type: Number,
|
||||
default: 270,
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
const dragEl = this.$refs.dragVerify;
|
||||
dragEl.style.setProperty('--textColor', this.textColor);
|
||||
dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
|
||||
dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
|
||||
},
|
||||
computed: {
|
||||
handlerStyle: function () {
|
||||
return {
|
||||
width: this.height + 'px',
|
||||
height: this.height + 'px',
|
||||
background: this.handlerBg,
|
||||
};
|
||||
},
|
||||
message: function () {
|
||||
return this.isPassing ? '' : this.text;
|
||||
},
|
||||
successMessage: function () {
|
||||
return this.isPassing ? this.successText : '';
|
||||
},
|
||||
dragVerifyStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
height: this.height + 'px',
|
||||
lineHeight: this.height + 'px',
|
||||
background: this.background,
|
||||
borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
dragVerifyImgStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
height: this.width + 'px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
'border-radius': '50%',
|
||||
};
|
||||
},
|
||||
progressBarStyle: function () {
|
||||
return {
|
||||
background: this.progressBarBg,
|
||||
height: this.height + 'px',
|
||||
borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
textStyle: function () {
|
||||
return {
|
||||
height: this.height + 'px',
|
||||
width: this.width + 'px',
|
||||
fontSize: this.textSize,
|
||||
};
|
||||
},
|
||||
factor: function () {
|
||||
//避免指定旋转角度时一直拖动到最右侧才验证通过
|
||||
if (this.minDegree == this.maxDegree) {
|
||||
return Math.floor(1 + Math.random() * 6) / 10 + 1;
|
||||
}
|
||||
return 1;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMoving: false,
|
||||
x: 0,
|
||||
isOk: false,
|
||||
showBar: false,
|
||||
showErrorTip: false,
|
||||
ranRotate: 0,
|
||||
cRotate: 0,
|
||||
imgStyle: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
checkimgLoaded: function () {
|
||||
//生成旋转角度
|
||||
var minDegree = this.minDegree;
|
||||
var maxDegree = this.maxDegree;
|
||||
var ranRotate = Math.floor(minDegree + Math.random() * (maxDegree - minDegree)); //生成随机角度
|
||||
this.ranRotate = ranRotate;
|
||||
console.log('旋转' + ranRotate);
|
||||
this.imgStyle = {
|
||||
transform: `rotateZ(${ranRotate}deg)`,
|
||||
};
|
||||
},
|
||||
dragStart: function (e) {
|
||||
if (!this.isPassing) {
|
||||
this.isMoving = true;
|
||||
this.x = e.pageX || e.touches[0].pageX;
|
||||
}
|
||||
this.showBar = true;
|
||||
this.showErrorTip = false;
|
||||
this.$emit('handlerMove');
|
||||
},
|
||||
dragMoving: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.touches[0].pageX) - this.x;
|
||||
console.log(_x, '_x');
|
||||
var handler = this.$refs.handler;
|
||||
handler.style.left = _x + 'px';
|
||||
this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
|
||||
var cRotate = Math.ceil((_x / (this.width - this.height)) * this.maxDegree * this.factor);
|
||||
console.log(cRotate, 'cRotate');
|
||||
this.cRotate = cRotate;
|
||||
var rotate = this.ranRotate - cRotate;
|
||||
this.imgStyle = {
|
||||
transform: `rotateZ(${rotate}deg)`,
|
||||
};
|
||||
}
|
||||
},
|
||||
dragFinish: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
if (Math.abs(this.ranRotate - this.cRotate) > this.diffDegree) {
|
||||
this.isOk = true;
|
||||
this.imgStyle = {
|
||||
transform: `rotateZ(${this.ranRotate}deg)`,
|
||||
};
|
||||
var that = this;
|
||||
setTimeout(function () {
|
||||
that.$refs.handler.style.left = '0';
|
||||
that.$refs.progressBar.style.width = '0';
|
||||
that.isOk = false;
|
||||
}, 500);
|
||||
this.showErrorTip = true;
|
||||
this.$emit('passfail');
|
||||
} else {
|
||||
this.passVerify();
|
||||
}
|
||||
this.isMoving = false;
|
||||
}
|
||||
},
|
||||
passVerify: function () {
|
||||
this.$emit('update:isPassing', true);
|
||||
this.isMoving = false;
|
||||
var handler = this.$refs.handler;
|
||||
handler.children[0].className = this.successIcon;
|
||||
this.$refs.progressBar.style.background = this.completedBg;
|
||||
this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
|
||||
this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
|
||||
this.$refs.progressBar.style.color = '#fff';
|
||||
this.$refs.progressBar.style.fontSize = this.textSize;
|
||||
this.$emit('passcallback');
|
||||
},
|
||||
reset: function () {
|
||||
this.reImg();
|
||||
this.checkimgLoaded();
|
||||
},
|
||||
reImg: function () {
|
||||
this.$emit('update:isPassing', false);
|
||||
const oriData = this.$options.data();
|
||||
for (const key in oriData) {
|
||||
if (Object.prototype.hasOwnProperty.call(oriData, key)) {
|
||||
this[key] = oriData[key];
|
||||
}
|
||||
}
|
||||
var handler = this.$refs.handler;
|
||||
var message = this.$refs.message;
|
||||
handler.style.left = '0';
|
||||
this.$refs.progressBar.style.width = '0';
|
||||
handler.children[0].className = this.handlerIcon;
|
||||
message.style['-webkit-text-fill-color'] = 'transparent';
|
||||
message.style.animation = 'slidetounlock 3s infinite';
|
||||
message.style.color = this.background;
|
||||
},
|
||||
refreshimg: function () {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
imgsrc: {
|
||||
immediate: false,
|
||||
handler: function () {
|
||||
this.reImg();
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.drag_verify {
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.drag_verify .dv_handler {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
.drag_verify .dv_handler i {
|
||||
color: #666;
|
||||
padding-left: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.drag_verify .dv_handler .el-icon-circle-check {
|
||||
color: #6c6;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.drag_verify .dv_progress_bar {
|
||||
position: absolute;
|
||||
height: 34px;
|
||||
width: 0px;
|
||||
}
|
||||
.drag_verify .dv_text {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
color: transparent;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, var(--textColor)),
|
||||
color-stop(0.4, var(--textColor)),
|
||||
color-stop(0.5, #fff),
|
||||
color-stop(0.6, var(--textColor)),
|
||||
color-stop(1, var(--textColor))
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-size-adjust: none;
|
||||
animation: slidetounlock 3s infinite;
|
||||
}
|
||||
.drag_verify .dv_text * {
|
||||
-webkit-text-fill-color: var(--textColor);
|
||||
}
|
||||
.goFirst {
|
||||
left: 0px !important;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
.goOrigin {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
.goKeep {
|
||||
transition: left 0.2s;
|
||||
}
|
||||
.goFirst2 {
|
||||
width: 0px !important;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
.drag-verify-container {
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.move-bar {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
.clip-bar {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.refresh {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips {
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips.success {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
color: green;
|
||||
}
|
||||
.tips.danger {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: yellow;
|
||||
}
|
||||
.check-img {
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@-webkit-keyframes slidetounlock {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--width) 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slidetounlock2 {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
src/components/editor/index.vue
Normal file
59
src/components/editor/index.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="editor-container">
|
||||
<div :id="id"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted } from 'vue';
|
||||
import wangeditor from 'wangeditor';
|
||||
export default {
|
||||
name: 'wngEditor',
|
||||
props: {
|
||||
// 节点 id
|
||||
id: {
|
||||
type: String,
|
||||
default: () => 'wangeditor',
|
||||
},
|
||||
// 是否禁用
|
||||
isDisable: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
// 双向绑定
|
||||
// 双向绑定值，字段名为固定，改了之后将不生效
|
||||
// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
|
||||
modelValue: String,
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const state = reactive({
|
||||
editor: null,
|
||||
});
|
||||
// 初始化富文本
|
||||
// https://doc.wangeditor.com/
|
||||
const initWangeditor = () => {
|
||||
state.editor = new wangeditor('#wangeditor');
|
||||
state.editor.config.placeholder = '请输入内容';
|
||||
state.editor.config.uploadImgShowBase64 = true;
|
||||
state.editor.config.showLinkImg = false;
|
||||
onWangeditorChange();
|
||||
state.editor.create();
|
||||
state.editor.txt.html(props.modelValue);
|
||||
props.isDisable ? state.editor.disable() : state.editor.enable();
|
||||
};
|
||||
// 内容改变时
|
||||
const onWangeditorChange = () => {
|
||||
state.editor.config.onchange = (html: string) => {
|
||||
emit('update:modelValue', html);
|
||||
};
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initWangeditor();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -14,29 +14,33 @@
|
||||
@blur="onIconBlur"
|
||||
>
|
||||
<template #prepend>
|
||||
<i
|
||||
:class="[
|
||||
fontIconPrefix === '' ? prepend : fontIconPrefix,
|
||||
{ iconfont: fontIconTabsIndex === 0 },
|
||||
{ ele: fontIconTabsIndex === 1 },
|
||||
{ fa: fontIconTabsIndex === 2 },
|
||||
]"
|
||||
<SvgIcon
|
||||
:name="fontIconPrefix === '' ? prepend : fontIconPrefix"
|
||||
class="font14"
|
||||
></i>
|
||||
v-if="fontIconPrefix === '' ? prepend?.indexOf('element') > -1 : fontIconPrefix?.indexOf('element') > -1"
|
||||
/>
|
||||
<i v-else :class="fontIconPrefix === '' ? prepend : fontIconPrefix" class="font14"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="icon-selector-warp" v-show="fontIconVisible">
|
||||
<div class="icon-selector-warp-title">{{ title }}</div>
|
||||
<div class="icon-selector-warp-title flex">
|
||||
<div class="flex-auto">{{ title }}</div>
|
||||
<div class="icon-selector-warp-title-tab" v-if="type === 'all'">
|
||||
<span :class="{ 'span-active': fontIconType === 'ali' }" @click="onIconChange('ali')" class="ml10" title="iconfont 图标">ali</span>
|
||||
<span :class="{ 'span-active': fontIconType === 'ele' }" @click="onIconChange('ele')" class="ml10" title="elementPlus 图标">ele</span>
|
||||
<span :class="{ 'span-active': fontIconType === 'awe' }" @click="onIconChange('awe')" class="ml10" title="fontawesome 图标">awe</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-selector-warp-row">
|
||||
<el-scrollbar>
|
||||
<el-scrollbar ref="selectorScrollbarRef">
|
||||
<el-row :gutter="10" v-if="fontIconSheetsFilterList.length > 0">
|
||||
<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" @click="onColClick(v)" v-for="(v, k) in fontIconSheetsFilterList" :key="k">
|
||||
<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': fontIconPrefix === v }">
|
||||
<div class="flex-margin">
|
||||
<div class="icon-selector-warp-item-value">
|
||||
<i :class="v"></i>
|
||||
<SvgIcon :name="v" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -61,7 +65,7 @@ export default {
|
||||
// 输入框前置内容
|
||||
prepend: {
|
||||
type: String,
|
||||
default: () => 'el-icon-thumb',
|
||||
default: () => 'elementPointer',
|
||||
},
|
||||
// 输入框占位文本
|
||||
placeholder: {
|
||||
@ -104,6 +108,7 @@ export default {
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const inputWidthRef = ref();
|
||||
const selectorScrollbarRef = ref();
|
||||
const state: any = reactive({
|
||||
fontIconPrefix: '',
|
||||
fontIconVisible: false,
|
||||
@ -112,6 +117,8 @@ export default {
|
||||
fontIconTabsIndex: 0,
|
||||
fontIconSheetsList: [],
|
||||
fontIconPlaceholder: '',
|
||||
fontIconType: 'ali',
|
||||
fontIconShow: true,
|
||||
});
|
||||
// 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
|
||||
const onIconFocus = () => {
|
||||
@ -153,21 +160,19 @@ export default {
|
||||
});
|
||||
};
|
||||
// 初始化数据
|
||||
const initFontIconData = async () => {
|
||||
if (props.type === 'ali') {
|
||||
const initFontIconData = async (type: string) => {
|
||||
state.fontIconSheetsList = [];
|
||||
if (type === 'ali') {
|
||||
await initIconfont.ali().then((res: any) => {
|
||||
state.fontIconTabsIndex = 0;
|
||||
// 阿里字体图标使用 `iconfont xxx`
|
||||
state.fontIconSheetsList = res.map((i) => `iconfont ${i}`);
|
||||
});
|
||||
} else if (props.type === 'ele') {
|
||||
} else if (type === 'ele') {
|
||||
await initIconfont.ele().then((res: any) => {
|
||||
state.fontIconTabsIndex = 1;
|
||||
state.fontIconSheetsList = res;
|
||||
});
|
||||
} else if (props.type === 'awe') {
|
||||
} else if (type === 'awe') {
|
||||
await initIconfont.awe().then((res: any) => {
|
||||
state.fontIconTabsIndex = 2;
|
||||
// fontawesome字体图标使用 `fa xxx`
|
||||
state.fontIconSheetsList = res.map((i) => `fa ${i}`);
|
||||
});
|
||||
@ -177,14 +182,19 @@ export default {
|
||||
state.fontIconPlaceholder = props.placeholder;
|
||||
// 初始化双向绑定回显
|
||||
initModeValueEcho();
|
||||
// 切换时，滚动条置顶。感兴趣可以使用 keep-alive <component :is="xxx"/> 进行缓存
|
||||
selectorScrollbarRef.value.wrap$.scrollTop = 0;
|
||||
};
|
||||
// 图标点击切换
|
||||
const onIconChange = (type: string) => {
|
||||
state.fontIconType = type;
|
||||
initFontIconData(type);
|
||||
};
|
||||
// 获取当前点击的 icon 图标
|
||||
const onColClick = (v: any) => {
|
||||
state.fontIconPlaceholder = v;
|
||||
state.fontIconVisible = false;
|
||||
if (state.fontIconTabsIndex === 0) state.fontIconPrefix = `${v}`;
|
||||
else if (state.fontIconTabsIndex === 1) state.fontIconPrefix = `${v}`;
|
||||
else if (state.fontIconTabsIndex === 2) state.fontIconPrefix = `${v}`;
|
||||
state.fontIconPrefix = v;
|
||||
emit('get', state.fontIconPrefix);
|
||||
emit('update:modelValue', state.fontIconPrefix);
|
||||
};
|
||||
@ -196,7 +206,15 @@ export default {
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initFontIconData();
|
||||
// 判断默认进来是什么类型图标，进行 tab 回显
|
||||
if (props.type === 'all') {
|
||||
if (props.modelValue?.indexOf('iconfont') > -1) onIconChange('ali');
|
||||
else if (props.modelValue?.indexOf('element') > -1) onIconChange('ele');
|
||||
else if (props.modelValue?.indexOf('fa') > -1) onIconChange('awe');
|
||||
else onIconChange('ali');
|
||||
} else {
|
||||
onIconChange(props.type);
|
||||
}
|
||||
initResize();
|
||||
getInputWidth();
|
||||
});
|
||||
@ -209,8 +227,10 @@ export default {
|
||||
);
|
||||
return {
|
||||
inputWidthRef,
|
||||
selectorScrollbarRef,
|
||||
fontIconSheetsFilterList,
|
||||
onColClick,
|
||||
onIconChange,
|
||||
onClearFontIcon,
|
||||
onIconFocus,
|
||||
onIconBlur,
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="notice-bar-warp-text" ref="noticeBarTextRef" v-if="!scrollable">{{ text }}</div>
|
||||
<div class="notice-bar-warp-slot" v-else><slot /></div>
|
||||
</div>
|
||||
<i v-if="rightIcon" class="notice-bar-warp-right-icon" :class="rightIcon" @click="onRightIconClick"></i>
|
||||
<SvgIcon :name="rightIcon" v-if="rightIcon" class="notice-bar-warp-right-icon" @click="onRightIconClick" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
28
src/components/svgIcon/index.vue
Normal file
28
src/components/svgIcon/index.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<script lang="ts">
|
||||
// 渲染函数：https://v3.cn.vuejs.org/guide/render-function.html
|
||||
import { h, resolveComponent, defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
name: 'svgIcon',
|
||||
props: {
|
||||
// svg 图标组件名字
|
||||
name: {
|
||||
type: String,
|
||||
},
|
||||
// svg 大小
|
||||
size: {
|
||||
type: Number,
|
||||
},
|
||||
// svg 颜色
|
||||
color: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
if (props.name?.indexOf('element') > -1) {
|
||||
return () => h('i', { class: 'el-icon', style: `--font-size: ${props.size};--color: ${props.color}` }, [h(resolveComponent(props.name))]);
|
||||
} else {
|
||||
return () => h('i', { class: props.name, style: `font-size: ${props.size};color: ${props.color}` });
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -26,7 +26,7 @@ import pagesFormI18nZhtw from '/@/i18n/pages/formI18n/zh-tw';
|
||||
*/
|
||||
const messages = {
|
||||
[zhcnLocale.name]: {
|
||||
el: zhcnLocale.el,
|
||||
...zhcnLocale,
|
||||
message: {
|
||||
...nextZhcn,
|
||||
...pagesHomeZhcn,
|
||||
@ -35,7 +35,7 @@ const messages = {
|
||||
},
|
||||
},
|
||||
[enLocale.name]: {
|
||||
el: enLocale.el,
|
||||
...enLocale,
|
||||
message: {
|
||||
...nextEn,
|
||||
...pagesHomeEn,
|
||||
@ -44,7 +44,7 @@ const messages = {
|
||||
},
|
||||
},
|
||||
[zhtwLocale.name]: {
|
||||
el: zhtwLocale.el,
|
||||
...zhtwLocale,
|
||||
message: {
|
||||
...nextZhtw,
|
||||
...pagesHomeZhtw,
|
||||
|
||||
@ -4,7 +4,10 @@ export default {
|
||||
home: 'home',
|
||||
system: 'system',
|
||||
systemMenu: 'systemMenu',
|
||||
systemRole: 'systemRole',
|
||||
systemUser: 'systemUser',
|
||||
systemDept: 'systemDept',
|
||||
systemDic: 'systemDic',
|
||||
limits: 'limits',
|
||||
limitsFrontEnd: 'FrontEnd',
|
||||
limitsFrontEndPage: 'FrontEndPage',
|
||||
@ -34,6 +37,7 @@ export default {
|
||||
funScreenShort: 'screenCapture',
|
||||
funGridLayout: 'Drag layout',
|
||||
funSplitpanes: 'Pane splitter',
|
||||
funDragVerify: 'Validator',
|
||||
pagesIndex: 'pages',
|
||||
pagesFiltering: 'Filtering',
|
||||
pagesFilteringDetails: 'FilteringDetails',
|
||||
@ -44,6 +48,9 @@ export default {
|
||||
pagesCityLinkage: 'CityLinkage',
|
||||
pagesFormAdapt: 'FormAdapt',
|
||||
pagesFormI18n: 'FormI18n',
|
||||
pagesFormRules: 'Multi form validation',
|
||||
pagesDynamicForm: 'Dynamic complex form',
|
||||
pagesWorkflow: 'Workflow',
|
||||
pagesListAdapt: 'ListAdapt',
|
||||
pagesWaterfall: 'Waterfall',
|
||||
pagesSteps: 'Steps',
|
||||
@ -152,6 +159,7 @@ export default {
|
||||
fourIsFooter: 'Open footer',
|
||||
fourIsGrayscale: 'Grey model',
|
||||
fourIsInvert: 'Color weak mode',
|
||||
fourIsDark: 'Dark Mode',
|
||||
fourIsWartermark: 'Turn on watermark',
|
||||
fourWartermarkText: 'Watermark copy',
|
||||
fiveTitle: 'Other settings',
|
||||
@ -166,6 +174,7 @@ export default {
|
||||
sixColumns: 'Four',
|
||||
tipText: 'Click the button below to copy the layout configuration to `/src/store/modules/themeConfig.ts` It has been modified in.',
|
||||
copyText: 'replication configuration',
|
||||
resetText: 'restore default',
|
||||
copyTextSuccess: 'Copy succeeded!',
|
||||
copyTextError: 'Copy failed!',
|
||||
},
|
||||
|
||||
@ -4,7 +4,10 @@ export default {
|
||||
home: '首页',
|
||||
system: '系统设置',
|
||||
systemMenu: '菜单管理',
|
||||
systemRole: '角色管理',
|
||||
systemUser: '用户管理',
|
||||
systemDept: '部门管理',
|
||||
systemDic: '字典管理',
|
||||
limits: '权限管理',
|
||||
limitsFrontEnd: '前端控制',
|
||||
limitsFrontEndPage: '页面权限',
|
||||
@ -34,6 +37,7 @@ export default {
|
||||
funScreenShort: 'web端自定义截屏',
|
||||
funGridLayout: '拖拽布局',
|
||||
funSplitpanes: '窗格拆分器',
|
||||
funDragVerify: '验证器',
|
||||
pagesIndex: '页面',
|
||||
pagesFiltering: '过滤筛选组件',
|
||||
pagesFilteringDetails: '过滤筛选组件详情',
|
||||
@ -44,6 +48,9 @@ export default {
|
||||
pagesCityLinkage: '城市多级联动',
|
||||
pagesFormAdapt: '表单自适应',
|
||||
pagesFormI18n: '表单国际化',
|
||||
pagesFormRules: '多表单验证',
|
||||
pagesDynamicForm: '动态复杂表单',
|
||||
pagesWorkflow: '工作流',
|
||||
pagesListAdapt: '列表自适应',
|
||||
pagesWaterfall: '瀑布屏',
|
||||
pagesSteps: '步骤条',
|
||||
@ -152,6 +159,7 @@ export default {
|
||||
fourIsFooter: '开启 Footer',
|
||||
fourIsGrayscale: '灰色模式',
|
||||
fourIsInvert: '色弱模式',
|
||||
fourIsDark: '深色模式',
|
||||
fourIsWartermark: '开启水印',
|
||||
fourWartermarkText: '水印文案',
|
||||
fiveTitle: '其它设置',
|
||||
@ -166,6 +174,7 @@ export default {
|
||||
sixColumns: '分栏',
|
||||
tipText: '点击下方按钮，复制布局配置去 `src/store/modules/themeConfig.ts` 中修改。',
|
||||
copyText: '一键复制配置',
|
||||
resetText: '一键恢复默认',
|
||||
copyTextSuccess: '复制成功！',
|
||||
copyTextError: '复制失败！',
|
||||
},
|
||||
|
||||
@ -4,7 +4,10 @@ export default {
|
||||
home: '首頁',
|
||||
system: '系統設置',
|
||||
systemMenu: '選單管理',
|
||||
systemRole: '角色管理',
|
||||
systemUser: '用戶管理',
|
||||
systemDept: '部門管理',
|
||||
systemDic: '字典管理',
|
||||
limits: '許可權管理',
|
||||
limitsFrontEnd: '前端控制',
|
||||
limitsFrontEndPage: '頁面許可權',
|
||||
@ -34,6 +37,7 @@ export default {
|
||||
funScreenShort: '自定義截圖',
|
||||
funGridLayout: '拖拽佈局',
|
||||
funSplitpanes: '窗格折開器',
|
||||
funDragVerify: '驗證器',
|
||||
pagesIndex: '頁面',
|
||||
pagesFiltering: '過濾篩選組件',
|
||||
pagesFilteringDetails: '過濾篩選組件詳情',
|
||||
@ -44,6 +48,9 @@ export default {
|
||||
pagesCityLinkage: '都市多級聯動',
|
||||
pagesFormAdapt: '表單自我調整',
|
||||
pagesFormI18n: '表單國際化',
|
||||
pagesFormRules: '多表單驗證',
|
||||
pagesDynamicForm: '動態複雜表單',
|
||||
pagesWorkflow: '工作流',
|
||||
pagesListAdapt: '清單自我調整',
|
||||
pagesWaterfall: '瀑布屏',
|
||||
pagesSteps: '步驟條',
|
||||
@ -152,6 +159,7 @@ export default {
|
||||
fourIsFooter: '開啟 Footer',
|
||||
fourIsGrayscale: '灰色模式',
|
||||
fourIsInvert: '色弱模式',
|
||||
fourIsDark: '深色模式',
|
||||
fourIsWartermark: '開啟浮水印',
|
||||
fourWartermarkText: '浮水印文案',
|
||||
fiveTitle: '其它設定',
|
||||
@ -166,6 +174,7 @@ export default {
|
||||
sixColumns: '分欄',
|
||||
tipText: '點擊下方按鈕，複製佈局配寘去`src/store/modules/themeConfig.ts`中修改。',
|
||||
copyText: '一鍵複製配寘',
|
||||
resetText: '一鍵恢復默認',
|
||||
copyTextSuccess: '複製成功！',
|
||||
copyTextError: '複製失敗！',
|
||||
},
|
||||
|
||||
@ -1,20 +1,12 @@
|
||||
<template>
|
||||
<template v-if="clientWidth > 1000">
|
||||
<el-aside class="layout-aside" :class="setCollapseWidth" v-show="!isTagsViewCurrenFull">
|
||||
<div class="h100" v-show="!isTagsViewCurrenFull">
|
||||
<el-aside class="layout-aside" :class="setCollapseStyle">
|
||||
<Logo v-if="setShowLogo" />
|
||||
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
|
||||
<Vertical :menuList="menuList" :class="setCollapseWidth" />
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
</template>
|
||||
<el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
|
||||
<el-aside class="layout-aside w100 h100">
|
||||
<Logo v-if="setShowLogo" />
|
||||
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
|
||||
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef" @mouseenter="onAsideEnterLeave(true)" @mouseleave="onAsideEnterLeave(false)">
|
||||
<Vertical :menuList="menuList" />
|
||||
</el-scrollbar>
|
||||
</el-aside>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -41,25 +33,51 @@ export default {
|
||||
return store.state.tagsViewRoutes.isTagsViewCurrenFull;
|
||||
});
|
||||
// 设置菜单展开/收起时的宽度
|
||||
const setCollapseWidth = computed(() => {
|
||||
let { layout, isCollapse, menuBar } = store.state.themeConfig.themeConfig;
|
||||
let asideBrColor = menuBar === '#FFFFFF' || menuBar === '#FFF' || menuBar === '#fff' || menuBar === '#ffffff' ? 'layout-el-aside-br-color' : '';
|
||||
if (layout === 'columns') {
|
||||
// 分栏布局，菜单收起时宽度给 1px
|
||||
const setCollapseStyle = computed(() => {
|
||||
const { layout, isCollapse, menuBar } = store.state.themeConfig.themeConfig;
|
||||
const asideBrColor =
|
||||
menuBar === '#FFFFFF' || menuBar === '#FFF' || menuBar === '#fff' || menuBar === '#ffffff' ? 'layout-el-aside-br-color' : '';
|
||||
// 判断是否是手机端
|
||||
if (state.clientWidth <= 1000) {
|
||||
if (isCollapse) {
|
||||
return ['layout-aside-width1', asideBrColor];
|
||||
document.body.setAttribute('class', 'el-popup-parent--hidden');
|
||||
const asideEle = document.querySelector('.layout-container') as HTMLElement;
|
||||
const modeDivs = document.createElement('div');
|
||||
modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
|
||||
asideEle.appendChild(modeDivs);
|
||||
modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
|
||||
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
|
||||
} else {
|
||||
return ['layout-aside-width-default', asideBrColor];
|
||||
// 关闭弹窗
|
||||
closeLayoutAsideMobileMode();
|
||||
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
|
||||
}
|
||||
} else {
|
||||
// 其它布局给 64px
|
||||
if (isCollapse) {
|
||||
return ['layout-aside-width64', asideBrColor];
|
||||
if (layout === 'columns') {
|
||||
// 分栏布局，菜单收起时宽度给 1px
|
||||
if (isCollapse) {
|
||||
return [asideBrColor, 'layout-aside-pc-1'];
|
||||
} else {
|
||||
return [asideBrColor, 'layout-aside-pc-220'];
|
||||
}
|
||||
} else {
|
||||
return ['layout-aside-width-default', asideBrColor];
|
||||
// 其它布局给 64px
|
||||
if (isCollapse) {
|
||||
return [asideBrColor, 'layout-aside-pc-64'];
|
||||
} else {
|
||||
return [asideBrColor, 'layout-aside-pc-220'];
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// 关闭移动端蒙版
|
||||
const closeLayoutAsideMobileMode = () => {
|
||||
const el = document.querySelector('.layout-aside-mobile-mode');
|
||||
el && el.parentNode?.removeChild(el);
|
||||
const clientWidth = document.body.clientWidth;
|
||||
if (clientWidth < 1000) store.state.themeConfig.themeConfig.isCollapse = false;
|
||||
document.body.setAttribute('class', '');
|
||||
};
|
||||
// 设置显示/隐藏 logo
|
||||
const setShowLogo = computed(() => {
|
||||
let { layout, isShowLogo } = store.state.themeConfig.themeConfig;
|
||||
@ -84,6 +102,13 @@ export default {
|
||||
const initMenuFixed = (clientWidth: number) => {
|
||||
state.clientWidth = clientWidth;
|
||||
};
|
||||
// 鼠标移入、移出
|
||||
const onAsideEnterLeave = (bool: Boolean) => {
|
||||
let { layout } = store.state.themeConfig.themeConfig;
|
||||
if (layout !== 'columns') return false;
|
||||
if (!bool) proxy.mittBus.emit('restoreDefault');
|
||||
store.dispatch('routesList/setColumnsMenuHover', bool);
|
||||
};
|
||||
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
|
||||
watch(store.state.themeConfig.themeConfig, (val) => {
|
||||
if (val.isShowLogoChange !== val.isShowLogo) {
|
||||
@ -118,13 +143,15 @@ export default {
|
||||
});
|
||||
proxy.mittBus.on('layoutMobileResize', (res: any) => {
|
||||
initMenuFixed(res.clientWidth);
|
||||
closeLayoutAsideMobileMode();
|
||||
});
|
||||
});
|
||||
return {
|
||||
setCollapseWidth,
|
||||
setCollapseStyle,
|
||||
setShowLogo,
|
||||
getThemeConfig,
|
||||
isTagsViewCurrenFull,
|
||||
onAsideEnterLeave,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
<template>
|
||||
<div class="layout-columns-aside">
|
||||
<el-scrollbar>
|
||||
<ul>
|
||||
<ul @mouseleave="onColumnsAsideMenuMouseleave()">
|
||||
<li
|
||||
v-for="(v, k) in columnsAsideList"
|
||||
:key="k"
|
||||
@click="onColumnsAsideMenuClick(v, k)"
|
||||
@mouseenter="onColumnsAsideMenuMouseenter(v, k)"
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) columnsAsideOffsetTopRefs[k] = el;
|
||||
}
|
||||
"
|
||||
:class="{ 'layout-columns-active': liIndex === k }"
|
||||
:class="{ 'layout-columns-active': liIndex === k, 'layout-columns-hover': liHoverIndex === k }"
|
||||
:title="$t(v.meta.title)"
|
||||
>
|
||||
<div :class="setColumnsAsidelayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
|
||||
<i :class="v.meta.icon"></i>
|
||||
<SvgIcon :name="v.meta.icon" />
|
||||
<div class="columns-vertical-title font12">
|
||||
{{
|
||||
$t(v.meta.title) && $t(v.meta.title).length >= 4
|
||||
@ -26,7 +27,7 @@
|
||||
</div>
|
||||
<div :class="setColumnsAsidelayout" v-else>
|
||||
<a :href="v.meta.isLink" target="_blank">
|
||||
<i :class="v.meta.icon"></i>
|
||||
<SvgIcon :name="v.meta.icon" />
|
||||
<div class="columns-vertical-title font12">
|
||||
{{
|
||||
$t(v.meta.title) && $t(v.meta.title).length >= 4
|
||||
@ -44,7 +45,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, ref, computed, onMounted, nextTick, getCurrentInstance, watch } from 'vue';
|
||||
import { reactive, toRefs, ref, computed, onMounted, nextTick, getCurrentInstance, watch, onUnmounted } from 'vue';
|
||||
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
|
||||
import { useStore } from '/@/store/index';
|
||||
export default {
|
||||
@ -59,8 +60,12 @@ export default {
|
||||
const state: any = reactive({
|
||||
columnsAsideList: [],
|
||||
liIndex: 0,
|
||||
liOldIndex: null,
|
||||
liHoverIndex: null,
|
||||
liOldPath: null,
|
||||
difference: 0,
|
||||
routeSplit: [],
|
||||
isNavHover: false,
|
||||
});
|
||||
// 设置分栏高亮风格
|
||||
const setColumnsAsideStyle = computed(() => {
|
||||
@ -82,6 +87,27 @@ export default {
|
||||
if (redirect) router.push(redirect);
|
||||
else router.push(path);
|
||||
};
|
||||
// 鼠标移入时，显示当前的子级菜单
|
||||
const onColumnsAsideMenuMouseenter = (v: Object, k: number) => {
|
||||
let { path } = v;
|
||||
state.liOldPath = path;
|
||||
state.liOldIndex = k;
|
||||
state.liHoverIndex = k;
|
||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(path));
|
||||
store.dispatch('routesList/setColumnsMenuHover', false);
|
||||
store.dispatch('routesList/setColumnsNavHover', true);
|
||||
state.isNavHover = true;
|
||||
};
|
||||
// 鼠标移走时，显示原来的子级菜单
|
||||
const onColumnsAsideMenuMouseleave = async () => {
|
||||
await store.dispatch('routesList/setColumnsNavHover', false);
|
||||
// 添加延时器，防止拿到的 store.state.routesList 值不是最新的
|
||||
setTimeout(() => {
|
||||
const { isColumnsMenuHover, isColumnsNavHover } = store.state.routesList;
|
||||
if (!isColumnsMenuHover && !isColumnsNavHover) proxy.mittBus.emit('restoreDefault');
|
||||
}, 100);
|
||||
// state.isNavHover = false;
|
||||
};
|
||||
// 设置高亮动态位置
|
||||
const onColumnsAsideDown = (k: number) => {
|
||||
nextTick(() => {
|
||||
@ -135,10 +161,27 @@ export default {
|
||||
// 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
|
||||
watch(store.state, (val) => {
|
||||
val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
|
||||
if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
|
||||
state.liHoverIndex = null;
|
||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
|
||||
} else {
|
||||
state.liHoverIndex = state.liOldIndex;
|
||||
if (!state.liOldPath) return false;
|
||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
|
||||
}
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
setFilterRoutes();
|
||||
// 销毁变量，防止鼠标再次移入时，保留了上次的记录
|
||||
proxy.mittBus.on('restoreDefault', () => {
|
||||
state.liOldIndex = null;
|
||||
state.liOldPath = null;
|
||||
});
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off('restoreDefault', () => {});
|
||||
});
|
||||
// 路由更新时
|
||||
onBeforeRouteUpdate((to) => {
|
||||
@ -152,6 +195,8 @@ export default {
|
||||
setColumnsAsideStyle,
|
||||
setColumnsAsidelayout,
|
||||
onColumnsAsideMenuClick,
|
||||
onColumnsAsideMenuMouseenter,
|
||||
onColumnsAsideMenuMouseleave,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
@ -202,12 +247,18 @@ export default {
|
||||
}
|
||||
}
|
||||
.layout-columns-active {
|
||||
color: #ffffff;
|
||||
color: var(--color-whites) !important;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
.layout-columns-hover {
|
||||
color: var(--color-primary);
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
.columns-round {
|
||||
background: var(--color-primary);
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 2px;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
class="layout-scrollbar"
|
||||
ref="layoutScrollbarRef"
|
||||
:style="{
|
||||
minHeight: `calc(100vh - ${headerHeight}`,
|
||||
minHeight: `calc(100vh - ${headerHeight})`,
|
||||
padding: currentRouteMeta.isLink && currentRouteMeta.isIframe ? 0 : '',
|
||||
transition: 'padding 0.3s ease-in-out',
|
||||
}"
|
||||
|
||||
@ -36,7 +36,7 @@ export default {
|
||||
display: flex;
|
||||
&-warp {
|
||||
margin: auto;
|
||||
color: #9e9e9e;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-align: center;
|
||||
animation: logoAnimation 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@ -144,7 +144,7 @@ export default defineComponent({
|
||||
const initLockScreen = () => {
|
||||
if (store.state.themeConfig.themeConfig.isLockScreen) {
|
||||
state.isShowLockScreenIntervalTime = window.setInterval(() => {
|
||||
if (store.state.themeConfig.themeConfig.lockScreenTime <= 0) {
|
||||
if (store.state.themeConfig.themeConfig.lockScreenTime <= 1) {
|
||||
state.isShowLockScreen = true;
|
||||
setLocalThemeConfig();
|
||||
return false;
|
||||
@ -198,12 +198,10 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
}
|
||||
.layout-lock-screen-filter {
|
||||
filter: blur(5px);
|
||||
transform: scale(1.01);
|
||||
transition: all 0.1s 0.1s ease-in-out;
|
||||
filter: blur(1px);
|
||||
}
|
||||
.layout-lock-screen-mask {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
background: var(--el-color-white);
|
||||
@extend .layout-lock-screen-fixed;
|
||||
z-index: 9999990;
|
||||
}
|
||||
@ -222,7 +220,7 @@ export default defineComponent({
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
color: var(--el-color-white);
|
||||
z-index: 9999993;
|
||||
user-select: none;
|
||||
&-box {
|
||||
@ -231,9 +229,11 @@ export default defineComponent({
|
||||
bottom: 50px;
|
||||
&-time {
|
||||
font-size: 100px;
|
||||
color: var(--color-whites);
|
||||
}
|
||||
&-info {
|
||||
font-size: 40px;
|
||||
color: var(--color-whites);
|
||||
}
|
||||
&-minutes {
|
||||
font-size: 16px;
|
||||
@ -244,9 +244,9 @@ export default defineComponent({
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 100%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
@ -262,7 +262,7 @@ export default defineComponent({
|
||||
position: absolute;
|
||||
top: 150%;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
left: 50%;
|
||||
line-height: 1.2;
|
||||
transform: translate(-50%, -50%);
|
||||
@ -273,7 +273,7 @@ export default defineComponent({
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease;
|
||||
i {
|
||||
@ -298,7 +298,7 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
&-box {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
@ -334,13 +334,13 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
::v-deep(.el-input-group__append) {
|
||||
background: #ffffff;
|
||||
background: var(--el-color-white);
|
||||
padding: 0px 15px;
|
||||
}
|
||||
::v-deep(.el-input__inner) {
|
||||
border-right-color: #f6f6f6;
|
||||
border-right-color: var(--el-border-color-extra-light);
|
||||
&:hover {
|
||||
border-color: #f6f6f6;
|
||||
border-color: var(--el-border-color-extra-light);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<ColumnsAside />
|
||||
<div class="layout-columns-warp">
|
||||
<Aside />
|
||||
<el-container class="flex-center layout-backtop">
|
||||
<el-container class="flex-center layout-backtop" :class="{ 'layout-backtop': !isFixedHeader }">
|
||||
<Header v-if="isFixedHeader" />
|
||||
<el-scrollbar>
|
||||
<el-scrollbar :class="{ 'layout-backtop': isFixedHeader }">
|
||||
<Header v-if="!isFixedHeader" />
|
||||
<Main />
|
||||
</el-scrollbar>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<el-container class="layout-container">
|
||||
<Aside />
|
||||
<el-container class="flex-center layout-backtop">
|
||||
<el-container class="flex-center" :class="{ 'layout-backtop': !isFixedHeader }">
|
||||
<Header v-if="isFixedHeader" />
|
||||
<el-scrollbar ref="layoutDefaultsScrollbarRef">
|
||||
<el-scrollbar ref="layoutDefaultsScrollbarRef" :class="{ 'layout-backtop': isFixedHeader }">
|
||||
<Header v-if="!isFixedHeader" />
|
||||
<Main />
|
||||
</el-scrollbar>
|
||||
@ -23,7 +23,7 @@ export default {
|
||||
name: 'layoutDefaults',
|
||||
components: { Aside, Header, Main },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const isFixedHeader = computed(() => {
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
proxy.$refs.layoutDefaultsScrollbarRef.wrap.scrollTop = 0;
|
||||
proxy.$refs.layoutDefaultsScrollbarRef.wrap$.scrollTop = 0;
|
||||
}
|
||||
);
|
||||
return {
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="layout-navbars-breadcrumb" :style="{ display: isShowBreadcrumb }">
|
||||
<i
|
||||
<SvgIcon
|
||||
class="layout-navbars-breadcrumb-icon"
|
||||
:class="getThemeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
|
||||
:name="getThemeConfig.isCollapse ? 'elementExpand' : 'elementFold'"
|
||||
@click="onThemeConfigChange"
|
||||
></i>
|
||||
/>
|
||||
<el-breadcrumb class="layout-navbars-breadcrumb-hide">
|
||||
<transition-group name="breadcrumb" mode="out-in">
|
||||
<el-breadcrumb-item v-for="(v, k) in breadcrumbList" :key="v.meta.title">
|
||||
<span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
|
||||
<i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon"></i>{{ $t(v.meta.title) }}
|
||||
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
|
||||
</span>
|
||||
<a v-else @click.prevent="onBreadcrumbClick(v)">
|
||||
<i :class="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon"></i>{{ $t(v.meta.title) }}
|
||||
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
|
||||
</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="layout-navbars-close-full" v-if="isTagsViewCurrenFull">
|
||||
<div class="layout-navbars-close-full-box" :title="$t('message.tagsView.closeFullscreen')" @click="onCloseFullscreen">
|
||||
<i class="el-icon-close"></i>
|
||||
<SvgIcon name="elementClose" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -109,7 +109,6 @@ export default {
|
||||
align-items: center;
|
||||
padding-right: 15px;
|
||||
background: var(--bg-topBar);
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #f1f2f3;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,13 +5,20 @@
|
||||
v-model="menuQuery"
|
||||
:fetch-suggestions="menuSearch"
|
||||
:placeholder="$t('message.user.searchPlaceholder')"
|
||||
prefix-icon="el-icon-search"
|
||||
ref="layoutMenuAutocompleteRef"
|
||||
@select="onHandleSelect"
|
||||
@blur="onSearchBlur"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<elementSearch />
|
||||
</el-icon>
|
||||
</template>
|
||||
<template #default="{ item }">
|
||||
<div><i :class="item.meta.icon" class="mr10"></i>{{ $t(item.meta.title) }}</div>
|
||||
<div>
|
||||
<SvgIcon :name="item.meta.icon" class="mr5" />
|
||||
{{ $t(item.meta.title) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</el-dialog>
|
||||
|
||||
@ -146,7 +146,7 @@
|
||||
<el-input-number
|
||||
v-model="getThemeConfig.lockScreenTime"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
:min="1"
|
||||
:max="9999"
|
||||
@change="setLocalThemeConfig"
|
||||
size="mini"
|
||||
@ -231,6 +231,12 @@
|
||||
<el-switch v-model="getThemeConfig.isInvert" @change="onAddFilterChange('invert')"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsDark') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isIsDark" @change="onAddDarkChange"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsWartermark') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
@ -276,7 +282,7 @@
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15 mb28">
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15 mb27">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveColumnsAsideLayout') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-select v-model="getThemeConfig.columnsAsideLayout" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
|
||||
@ -356,14 +362,17 @@
|
||||
</div>
|
||||
<div class="copy-config">
|
||||
<el-alert :title="$t('message.layout.tipText')" type="warning" :closable="false"> </el-alert>
|
||||
<el-button
|
||||
size="small"
|
||||
class="copy-config-btn"
|
||||
icon="el-icon-document-copy"
|
||||
type="primary"
|
||||
ref="copyConfigBtnRef"
|
||||
@click="onCopyConfigClick"
|
||||
>{{ $t('message.layout.copyText') }}
|
||||
<el-button size="small" class="copy-config-btn" type="primary" ref="copyConfigBtnRef" @click="onCopyConfigClick">
|
||||
<el-icon>
|
||||
<elementCopyDocument />
|
||||
</el-icon>
|
||||
{{ $t('message.layout.copyText') }}
|
||||
</el-button>
|
||||
<el-button size="small" class="copy-config-btn-reset" type="info" @click="onResetConfigClick">
|
||||
<el-icon>
|
||||
<elementRefreshRight />
|
||||
</el-icon>
|
||||
{{ $t('message.layout.resetText') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
@ -500,6 +509,12 @@ export default defineComponent({
|
||||
appEle.setAttribute('style', `filter: ${cssAttr}`);
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 深色模式
|
||||
const onAddDarkChange = () => {
|
||||
const body = document.documentElement as HTMLElement;
|
||||
if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
|
||||
else body.setAttribute('data-theme', '');
|
||||
};
|
||||
// 4、界面显示 --> 开启水印
|
||||
const onWartermarkChange = () => {
|
||||
getThemeConfig.value.isWartermark ? Watermark.set(getThemeConfig.value.wartermarkText) : Watermark.del();
|
||||
@ -518,38 +533,9 @@ export default defineComponent({
|
||||
if (getThemeConfig.value.layout === layout) return false;
|
||||
getThemeConfig.value.layout = layout;
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
initSetLayoutChange();
|
||||
initLayoutChangeFun();
|
||||
onMenuBarHighlightChange();
|
||||
};
|
||||
// 设置布局切换，重置主题样式
|
||||
const initSetLayoutChange = () => {
|
||||
if (getThemeConfig.value.layout === 'classic') {
|
||||
getThemeConfig.value.menuBar = '#FFFFFF';
|
||||
getThemeConfig.value.menuBarColor = '#606266';
|
||||
getThemeConfig.value.topBar = '#ffffff';
|
||||
getThemeConfig.value.topBarColor = '#606266';
|
||||
initLayoutChangeFun();
|
||||
} else if (getThemeConfig.value.layout === 'transverse') {
|
||||
getThemeConfig.value.menuBarColor = '#FFFFFF';
|
||||
getThemeConfig.value.topBar = '#545c64';
|
||||
getThemeConfig.value.topBarColor = '#FFFFFF';
|
||||
initLayoutChangeFun();
|
||||
} else if (getThemeConfig.value.layout === 'columns') {
|
||||
// 1.0.11 更新日志
|
||||
getThemeConfig.value.isShowLogo = false;
|
||||
getThemeConfig.value.menuBar = '#FFFFFF';
|
||||
getThemeConfig.value.menuBarColor = '#606266';
|
||||
getThemeConfig.value.topBar = '#ffffff';
|
||||
getThemeConfig.value.topBarColor = '#606266';
|
||||
initLayoutChangeFun();
|
||||
} else {
|
||||
getThemeConfig.value.menuBar = '#545c64';
|
||||
getThemeConfig.value.menuBarColor = '#eaeaea';
|
||||
getThemeConfig.value.topBar = '#FFFFFF';
|
||||
getThemeConfig.value.topBarColor = '#606266';
|
||||
initLayoutChangeFun();
|
||||
}
|
||||
};
|
||||
// 设置布局切换函数
|
||||
const initLayoutChangeFun = () => {
|
||||
onBgColorPickerChange('menuBar');
|
||||
@ -590,6 +576,11 @@ export default defineComponent({
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
});
|
||||
};
|
||||
// 一键恢复默认
|
||||
const onResetConfigClick = () => {
|
||||
Local.clear();
|
||||
window.location.reload();
|
||||
};
|
||||
// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
|
||||
const initSetStyle = () => {
|
||||
setTimeout(() => {
|
||||
@ -606,7 +597,7 @@ export default defineComponent({
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
// 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
|
||||
if (!Local.get('frequency')) initSetLayoutChange();
|
||||
if (!Local.get('frequency')) initLayoutChangeFun();
|
||||
Local.set('frequency', 1);
|
||||
// 修复防止退出登录再进入界面时，需要刷新样式才生效的问题，初始化布局样式等(登录的时候触发，目前方案)
|
||||
proxy.mittBus.on('onSignInClick', () => {
|
||||
@ -618,10 +609,9 @@ export default defineComponent({
|
||||
});
|
||||
// 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
|
||||
proxy.mittBus.on('layoutMobileResize', (res: any) => {
|
||||
if (getThemeConfig.value.layout === res.layout) return false;
|
||||
getThemeConfig.value.layout = res.layout;
|
||||
getThemeConfig.value.isDrawer = false;
|
||||
initSetLayoutChange();
|
||||
initLayoutChangeFun();
|
||||
onMenuBarHighlightChange();
|
||||
});
|
||||
setTimeout(() => {
|
||||
@ -631,6 +621,8 @@ export default defineComponent({
|
||||
if (getThemeConfig.value.isGrayscale) onAddFilterChange('grayscale');
|
||||
// 色弱模式
|
||||
if (getThemeConfig.value.isInvert) onAddFilterChange('invert');
|
||||
// 深色模式
|
||||
if (getThemeConfig.value.isIsDark) onAddDarkChange();
|
||||
// 开启水印
|
||||
onWartermarkChange();
|
||||
// 语言国际化
|
||||
@ -658,6 +650,7 @@ export default defineComponent({
|
||||
getThemeConfig,
|
||||
onDrawerClose,
|
||||
onAddFilterChange,
|
||||
onAddDarkChange,
|
||||
onWartermarkChange,
|
||||
onWartermarkTextInput,
|
||||
onSetLayout,
|
||||
@ -667,6 +660,7 @@ export default defineComponent({
|
||||
onSortableTagsViewChange,
|
||||
onShareTagsViewChange,
|
||||
onCopyConfigClick,
|
||||
onResetConfigClick,
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -803,7 +797,8 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.copy-config-last-btn {
|
||||
.copy-config-btn-reset {
|
||||
width: 100%;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,7 +26,9 @@
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
|
||||
<i class="el-icon-search" :title="$t('message.user.title2')"></i>
|
||||
<el-icon :title="$t('message.user.title2')">
|
||||
<elementSearch />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
|
||||
<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
|
||||
@ -35,7 +37,9 @@
|
||||
<el-popover placement="bottom" trigger="click" v-model:visible="isShowUserNewsPopover" :width="300" popper-class="el-popover-pupop-user-news">
|
||||
<template #reference>
|
||||
<el-badge :is-dot="true" @click="isShowUserNewsPopover = !isShowUserNewsPopover">
|
||||
<i class="el-icon-bell" :title="$t('message.user.title4')"></i>
|
||||
<el-icon :title="$t('message.user.title4')">
|
||||
<elementBell />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</template>
|
||||
<transition name="el-zoom-in-top">
|
||||
@ -54,7 +58,9 @@
|
||||
<span class="layout-navbars-breadcrumb-user-link">
|
||||
<img :src="getUserInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
|
||||
{{ getUserInfos.userName === '' ? 'test' : getUserInfos.userName }}
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
<el-icon class="el-icon--right">
|
||||
<elementArrowDown />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
@ -79,7 +85,7 @@ import screenfull from 'screenfull';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { resetRoute } from '/@/router/index';
|
||||
import { useStore } from '/@/store/index';
|
||||
import { useTitle } from '/@/utils/setWebTitle';
|
||||
import other from '/@/utils/other';
|
||||
import { Session, Local } from '/@/utils/storage';
|
||||
import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue';
|
||||
import Search from '/@/layout/navBars/breadcrumb/search.vue';
|
||||
@ -91,7 +97,6 @@ export default {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const title = useTitle();
|
||||
const searchRef = ref();
|
||||
const state = reactive({
|
||||
isScreenfull: false,
|
||||
@ -192,19 +197,26 @@ export default {
|
||||
Local.set('themeConfig', getThemeConfig.value);
|
||||
proxy.$i18n.locale = lang;
|
||||
initI18n();
|
||||
title();
|
||||
other.useTitle();
|
||||
};
|
||||
// 设置 element plus 组件的国际化
|
||||
const setI18nConfig = (locale: string) => {
|
||||
proxy.mittBus.emit('getI18nConfig', proxy.$i18n.messages[locale]);
|
||||
};
|
||||
// 初始化言语国际化
|
||||
const initI18n = () => {
|
||||
switch (Local.get('themeConfig').globalI18n) {
|
||||
case 'zh-cn':
|
||||
state.disabledI18n = 'zh-cn';
|
||||
setI18nConfig('zh-cn');
|
||||
break;
|
||||
case 'en':
|
||||
state.disabledI18n = 'en';
|
||||
setI18nConfig('en');
|
||||
break;
|
||||
case 'zh-tw':
|
||||
state.disabledI18n = 'zh-tw';
|
||||
setI18nConfig('zh-tw');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
@ -11,8 +11,15 @@
|
||||
>
|
||||
<ul class="el-dropdown-menu">
|
||||
<template v-for="(v, k) in dropdownList">
|
||||
<li class="el-dropdown-menu__item" aria-disabled="false" tabindex="-1" :key="k" v-if="!v.affix" @click="onCurrentContextmenuClick(v.id)">
|
||||
<i :class="v.icon"></i>
|
||||
<li
|
||||
class="el-dropdown-menu__item"
|
||||
aria-disabled="false"
|
||||
tabindex="-1"
|
||||
:key="k"
|
||||
v-if="!v.affix"
|
||||
@click="onCurrentContextmenuClick(v.contextMenuClickId)"
|
||||
>
|
||||
<SvgIcon :name="v.icon" />
|
||||
<span>{{ $t(v.txt) }}</span>
|
||||
</li>
|
||||
</template>
|
||||
@ -35,12 +42,12 @@ export default defineComponent({
|
||||
const state = reactive({
|
||||
isShow: false,
|
||||
dropdownList: [
|
||||
{ id: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'el-icon-refresh-right' },
|
||||
{ id: 1, txt: 'message.tagsView.close', affix: false, icon: 'el-icon-close' },
|
||||
{ id: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'el-icon-circle-close' },
|
||||
{ id: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'el-icon-folder-delete' },
|
||||
{ contextMenuClickId: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'elementRefreshRight' },
|
||||
{ contextMenuClickId: 1, txt: 'message.tagsView.close', affix: false, icon: 'elementClose' },
|
||||
{ contextMenuClickId: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'elementCircleClose' },
|
||||
{ contextMenuClickId: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'elementFolderDelete' },
|
||||
{
|
||||
id: 4,
|
||||
contextMenuClickId: 4,
|
||||
txt: 'message.tagsView.fullscreen',
|
||||
affix: false,
|
||||
icon: 'iconfont icon-fullscreen',
|
||||
@ -53,8 +60,8 @@ export default defineComponent({
|
||||
return props.dropdown;
|
||||
});
|
||||
// 当前项菜单点击
|
||||
const onCurrentContextmenuClick = (id: number) => {
|
||||
emit('currentContextmenuClick', Object.assign({}, { id }, state.item));
|
||||
const onCurrentContextmenuClick = (contextMenuClickId: number) => {
|
||||
emit('currentContextmenuClick', Object.assign({}, { contextMenuClickId }, state.item));
|
||||
};
|
||||
// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
|
||||
const openContextmenu = (item: any) => {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
v-for="(v, k) in tagsViewList"
|
||||
:key="k"
|
||||
class="layout-navbars-tagsview-ul-li"
|
||||
:data-name="v.name"
|
||||
:data-url="v.url"
|
||||
:class="{ 'is-active': isActive(v) }"
|
||||
@contextmenu.prevent="onContextmenu(v, $event)"
|
||||
@click="onTagsClick(v, k)"
|
||||
@ -17,21 +17,23 @@
|
||||
"
|
||||
>
|
||||
<i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v)"></i>
|
||||
<i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.meta.icon" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon"></i>
|
||||
<SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont" v-if="!isActive(v) && getThemeConfig.isTagsviewIcon" />
|
||||
<span>{{ $t(v.meta.title) }}</span>
|
||||
<template v-if="isActive(v)">
|
||||
<i class="el-icon-refresh-right ml5" @click.stop="refreshCurrentTagsView($route.fullPath)"></i>
|
||||
<i
|
||||
class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-active"
|
||||
<SvgIcon name="elementRefreshRight" class="ml5" @click.stop="refreshCurrentTagsView($route.fullPath)" />
|
||||
<SvgIcon
|
||||
name="elementClose"
|
||||
class="layout-navbars-tagsview-ul-li-icon layout-icon-active"
|
||||
v-if="!v.meta.isAffix"
|
||||
@click.stop="closeCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.url)"
|
||||
></i>
|
||||
/>
|
||||
</template>
|
||||
<i
|
||||
class="el-icon-close layout-navbars-tagsview-ul-li-icon layout-icon-three"
|
||||
<SvgIcon
|
||||
name="elementClose"
|
||||
class="layout-navbars-tagsview-ul-li-icon layout-icon-three"
|
||||
v-if="!v.meta.isAffix"
|
||||
@click.stop="closeCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.url)"
|
||||
></i>
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</el-scrollbar>
|
||||
@ -46,7 +48,6 @@ import Sortable from 'sortablejs';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useStore } from '/@/store/index';
|
||||
import { Session } from '/@/utils/storage';
|
||||
import { NextLoading } from '/@/utils/loading';
|
||||
import { isObjectValueEqual } from '/@/utils/arrayOperation';
|
||||
import Contextmenu from '/@/layout/navBars/tagsView/contextmenu.vue';
|
||||
export default {
|
||||
@ -83,7 +84,7 @@ export default {
|
||||
if (getThemeConfig.value.isShareTagsView) {
|
||||
return v.path === state.routePath;
|
||||
} else {
|
||||
return v.url === state.routeActive;
|
||||
return v.url ? v.url === state.routeActive : v.path === state.routeActive;
|
||||
}
|
||||
};
|
||||
// 存储 tagsViewList 到浏览器临时缓存中，页面刷新时，保留记录
|
||||
@ -195,10 +196,12 @@ export default {
|
||||
// 最后一个且高亮时
|
||||
if (arr[arr.length - 1].meta.isDynamic) {
|
||||
// 动态路由（xxx/:id/:name"）
|
||||
router.push({ name: arr[arr.length - 1].name, params: arr[arr.length - 1].params });
|
||||
if (k !== arr.length) router.push({ name: arr[k].name, params: arr[k].params });
|
||||
else router.push({ name: arr[arr.length - 1].name, params: arr[arr.length - 1].params });
|
||||
} else {
|
||||
// 普通路由
|
||||
router.push({ path: arr[arr.length - 1].path, query: arr[arr.length - 1].query });
|
||||
if (k !== arr.length) router.push({ path: arr[k].path, query: arr[k].query });
|
||||
else router.push({ path: arr[arr.length - 1].path, query: arr[arr.length - 1].query });
|
||||
}
|
||||
} else {
|
||||
// 非最后一个且高亮时，跳转到下一个
|
||||
@ -242,19 +245,7 @@ export default {
|
||||
const item = state.tagsViewList.find((v: any) => (getThemeConfig.value.isShareTagsView ? v.path === path : v.url === path));
|
||||
if (item.meta.isDynamic) await router.push({ name: item.name, params: item.params });
|
||||
else await router.push({ name: item.name, query: item.query });
|
||||
NextLoading.start();
|
||||
setTimeout(() => {
|
||||
nextTick(() => {
|
||||
store.dispatch('tagsViewRoutes/setCurrenFullscreen', true);
|
||||
if (store.state.tagsViewRoutes.isTagsViewCurrenFull) {
|
||||
const element = document.querySelector('.layout-main .layout-view-bg-white') as HTMLElement;
|
||||
if (!element) return false;
|
||||
// 非当前页开启 iframes 高度会有问题
|
||||
if (route.path === '/iframes') element.style.height = `100vh`;
|
||||
else element.style.height = `calc(100vh - 30px)`;
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
store.dispatch('tagsViewRoutes/setCurrenFullscreen', true);
|
||||
};
|
||||
// 当前项右键菜单点击，拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组，取当前点击项的详细路由信息
|
||||
// 防止 tagsView 非当前页演示时，操作异常
|
||||
@ -279,7 +270,7 @@ export default {
|
||||
const cParams = item.meta.isDynamic ? item.params : item.query;
|
||||
if (!getCurrentRouteItem(item.path, cParams)) return ElMessage({ type: 'warning', message: '请正确输入路径及完整参数（query、params）' });
|
||||
const { path, name, params, query, meta, url } = getCurrentRouteItem(item.path, cParams);
|
||||
switch (item.id) {
|
||||
switch (item.contextMenuClickId) {
|
||||
case 0:
|
||||
// 刷新当前
|
||||
if (meta.isDynamic) await router.push({ name, params });
|
||||
@ -335,7 +326,7 @@ export default {
|
||||
};
|
||||
// 鼠标滚轮滚动
|
||||
const onHandleScroll = (e: any) => {
|
||||
proxy.$refs.scrollbarRef.$refs.wrap.scrollLeft += e.wheelDelta / 4;
|
||||
proxy.$refs.scrollbarRef.$refs.wrap$.scrollLeft += e.wheelDelta / 4;
|
||||
};
|
||||
// tagsView 横向滚动
|
||||
const tagsViewmoveToCurrentTag = () => {
|
||||
@ -352,7 +343,7 @@ export default {
|
||||
// 最后 li
|
||||
let liLast: any = tagsRefs.value[tagsRefs.value.length - 1];
|
||||
// 当前滚动条的值
|
||||
let scrollRefs = proxy.$refs.scrollbarRef.$refs.wrap;
|
||||
let scrollRefs = proxy.$refs.scrollbarRef.$refs.wrap$;
|
||||
// 当前滚动条滚动宽度
|
||||
let scrollS = scrollRefs.scrollWidth;
|
||||
// 当前滚动条偏移宽度
|
||||
@ -412,13 +403,13 @@ export default {
|
||||
state.sortable && state.sortable.destroy();
|
||||
state.sortable = Sortable.create(el, {
|
||||
animation: 300,
|
||||
dataIdAttr: 'data-name',
|
||||
dataIdAttr: 'data-url',
|
||||
disabled: getThemeConfig.value.isSortableTagsView ? false : true,
|
||||
onEnd: () => {
|
||||
const sortEndList: any = [];
|
||||
state.sortable.toArray().map((val: any) => {
|
||||
state.tagsViewList.map((v: any) => {
|
||||
if (v.name === val) sortEndList.push({ ...v });
|
||||
if (v.url === val) sortEndList.push({ ...v });
|
||||
});
|
||||
});
|
||||
addBrowserSetSession(sortEndList);
|
||||
@ -516,9 +507,10 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.layout-navbars-tagsview {
|
||||
flex: 1;
|
||||
background-color: #ffffff;
|
||||
background-color: var(--el-color-white);
|
||||
border-bottom: 1px solid #f1f2f3;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
::v-deep(.el-scrollbar__wrap) {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
@ -529,7 +521,7 @@ export default {
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #606266;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
padding: 0 15px;
|
||||
@ -565,7 +557,7 @@ export default {
|
||||
line-height: 14px;
|
||||
right: -5px;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
color: var(--color-whites);
|
||||
background-color: var(--color-primary-light-3);
|
||||
}
|
||||
}
|
||||
@ -577,9 +569,10 @@ export default {
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transition: border-color 3s ease;
|
||||
}
|
||||
}
|
||||
// 风格2
|
||||
@ -628,7 +621,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
background: white !important;
|
||||
background: var(--el-color-white) !important;
|
||||
color: var(--color-primary) !important;
|
||||
border-top: 1px solid !important;
|
||||
border-top-color: var(--color-primary) !important;
|
||||
|
||||
@ -3,21 +3,21 @@
|
||||
<el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
|
||||
<el-menu router :default-active="defaultActive" background-color="transparent" mode="horizontal">
|
||||
<template v-for="val in menuLists">
|
||||
<el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
|
||||
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
|
||||
<template #title>
|
||||
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
<span>{{ $t(val.meta.title) }}</span>
|
||||
</template>
|
||||
<SubItem :chil="val.children" />
|
||||
</el-submenu>
|
||||
</el-sub-menu>
|
||||
<el-menu-item :index="val.path" :key="val.path" v-else>
|
||||
<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
|
||||
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
{{ $t(val.meta.title) }}
|
||||
</template>
|
||||
<template #title v-else>
|
||||
<a :href="val.meta.isLink" target="_blank" rel="opener">
|
||||
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
{{ $t(val.meta.title) }}
|
||||
</a>
|
||||
</template>
|
||||
@ -29,7 +29,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted, nextTick } from 'vue';
|
||||
import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted, nextTick, onBeforeMount } from 'vue';
|
||||
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
|
||||
import { useStore } from '/@/store/index';
|
||||
import SubItem from '/@/layout/navMenu/subItem.vue';
|
||||
@ -46,7 +46,7 @@ export default defineComponent({
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
const state: any = reactive({
|
||||
const state = reactive({
|
||||
defaultActive: null,
|
||||
});
|
||||
// 获取父级菜单数据
|
||||
@ -66,15 +66,6 @@ export default defineComponent({
|
||||
proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft = els.offsetLeft;
|
||||
});
|
||||
};
|
||||
// 设置页面当前路由高亮
|
||||
const setCurrentRouterHighlight = (path: string) => {
|
||||
const currentPathSplit = path.split('/');
|
||||
if (store.state.themeConfig.themeConfig.layout === 'classic') {
|
||||
state.defaultActive = `/${currentPathSplit[1]}`;
|
||||
} else {
|
||||
state.defaultActive = path;
|
||||
}
|
||||
};
|
||||
// 路由过滤递归函数
|
||||
const filterRoutesFun = (arr: Array<object>) => {
|
||||
return arr
|
||||
@ -99,15 +90,29 @@ export default defineComponent({
|
||||
});
|
||||
return currentData;
|
||||
};
|
||||
// 设置页面当前路由高亮
|
||||
const setCurrentRouterHighlight = (currentRoute) => {
|
||||
const { path, meta } = currentRoute;
|
||||
if (store.state.themeConfig.themeConfig.layout === 'classic') {
|
||||
state.defaultActive = `/${path.split('/')[1]}`;
|
||||
} else {
|
||||
const pathSplit = meta.isDynamic ? meta.isDynamicPath.split('/') : path.split('/');
|
||||
if (pathSplit.length >= 4 && meta.isHide) state.defaultActive = pathSplit.splice(0, 3).join('/');
|
||||
else state.defaultActive = path;
|
||||
}
|
||||
};
|
||||
// 页面加载前
|
||||
onBeforeMount(() => {
|
||||
setCurrentRouterHighlight(route);
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initElMenuOffsetLeft();
|
||||
setCurrentRouterHighlight(route.meta.isDynamic ? route.meta.isDynamicPath : route.path);
|
||||
});
|
||||
// 路由更新时
|
||||
onBeforeRouteUpdate((to) => {
|
||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||
setCurrentRouterHighlight(to.meta.isDynamic ? to.meta.isDynamicPath : to.path);
|
||||
setCurrentRouterHighlight(to);
|
||||
proxy.mittBus.emit('onMenuClick');
|
||||
// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
|
||||
let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<template v-for="val in chils">
|
||||
<el-submenu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
|
||||
<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
|
||||
<template #title>
|
||||
<i :class="val.meta.icon"></i>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
<span>{{ $t(val.meta.title) }}</span>
|
||||
</template>
|
||||
<sub-item :chil="val.children" />
|
||||
</el-submenu>
|
||||
</el-sub-menu>
|
||||
<el-menu-item :index="val.path" :key="val.path" v-else>
|
||||
<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
|
||||
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
<span>{{ $t(val.meta.title) }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a :href="val.meta.isLink" target="_blank" rel="opener">
|
||||
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
{{ $t(val.meta.title) }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
@ -3,33 +3,33 @@
|
||||
router
|
||||
:default-active="defaultActive"
|
||||
background-color="transparent"
|
||||
:collapse="setIsCollapse"
|
||||
:collapse="isCollapse"
|
||||
:unique-opened="getThemeConfig.isUniqueOpened"
|
||||
:collapse-transition="false"
|
||||
>
|
||||
<template v-for="val in menuLists">
|
||||
<el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
|
||||
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
|
||||
<template #title>
|
||||
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
<span>{{ $t(val.meta.title) }}</span>
|
||||
</template>
|
||||
<SubItem :chil="val.children" />
|
||||
</el-submenu>
|
||||
</el-sub-menu>
|
||||
<el-menu-item :index="val.path" :key="val.path" v-else>
|
||||
<i :class="val.meta.icon ? val.meta.icon : ''"></i>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
|
||||
<span>{{ $t(val.meta.title) }}</span>
|
||||
</template>
|
||||
<template #title v-else>
|
||||
<a :href="val.meta.isLink" target="_blank" rel="opener">{{ $t(val.meta.title) }}</a></template
|
||||
>
|
||||
<a :href="val.meta.isLink" target="_blank" rel="opener">{{ $t(val.meta.title) }}</a>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, defineComponent, getCurrentInstance } from 'vue';
|
||||
import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted, watch } from 'vue';
|
||||
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
|
||||
import { useStore } from '/@/store/index';
|
||||
import SubItem from '/@/layout/navMenu/subItem.vue';
|
||||
@ -49,6 +49,7 @@ export default defineComponent({
|
||||
const state = reactive({
|
||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||
defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
|
||||
isCollapse: false,
|
||||
});
|
||||
// 获取父级菜单数据
|
||||
const menuLists = computed(() => {
|
||||
@ -58,14 +59,31 @@ export default defineComponent({
|
||||
const getThemeConfig = computed(() => {
|
||||
return store.state.themeConfig.themeConfig;
|
||||
});
|
||||
// 菜单高亮（详情时，父级高亮）
|
||||
const setParentHighlight = (currentRoute) => {
|
||||
const { path, meta } = currentRoute;
|
||||
const pathSplit = meta.isDynamic ? meta.isDynamicPath.split('/') : path.split('/');
|
||||
if (pathSplit.length >= 4 && meta.isHide) return pathSplit.splice(0, 3).join('/');
|
||||
else return path;
|
||||
};
|
||||
// 设置菜单的收起/展开
|
||||
const setIsCollapse = computed(() => {
|
||||
return document.body.clientWidth < 1000 ? false : getThemeConfig.value.isCollapse;
|
||||
watch(
|
||||
store.state.themeConfig.themeConfig,
|
||||
() => {
|
||||
document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = getThemeConfig.value.isCollapse);
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
state.defaultActive = setParentHighlight(route);
|
||||
});
|
||||
// 路由更新时
|
||||
onBeforeRouteUpdate((to) => {
|
||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||
state.defaultActive = to.meta.isDynamic ? to.meta.isDynamicPath : to.path;
|
||||
state.defaultActive = setParentHighlight(to);
|
||||
proxy.mittBus.emit('onMenuClick');
|
||||
const clientWidth = document.body.clientWidth;
|
||||
if (clientWidth < 1000) getThemeConfig.value.isCollapse = false;
|
||||
@ -73,7 +91,6 @@ export default defineComponent({
|
||||
return {
|
||||
menuLists,
|
||||
getThemeConfig,
|
||||
setIsCollapse,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setIframeHeight}`, border: 'none' }" v-loading="iframeLoading">
|
||||
<div class="layout-view-bg-white flex mt1" :style="{ height: `calc(100vh - ${setIframeHeight}`, border: 'none' }" v-loading="iframeLoading">
|
||||
<iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" v-show="!iframeLoading"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
@ -32,8 +32,13 @@ export default defineComponent({
|
||||
// 设置 iframe 的高度
|
||||
const setIframeHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return `84px`;
|
||||
else return `50px`;
|
||||
let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
|
||||
if (isTagsViewCurrenFull) {
|
||||
return `0px`;
|
||||
} else {
|
||||
if (isTagsview) return `83px`;
|
||||
else return `49px`;
|
||||
}
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
|
||||
12
src/main.ts
12
src/main.ts
@ -4,25 +4,27 @@ import router from './router';
|
||||
import { store, key } from './store';
|
||||
import { directive } from '/@/utils/directive';
|
||||
import { i18n } from '/@/i18n/index';
|
||||
import { globalComponentSize } from '/@/utils/componentSize';
|
||||
import other from '/@/utils/other';
|
||||
|
||||
import ElementPlus from 'element-plus';
|
||||
import 'element-plus/lib/theme-chalk/index.css';
|
||||
import 'element-plus/dist/index.css';
|
||||
import '/@/theme/index.scss';
|
||||
import mitt from 'mitt';
|
||||
import screenShort from 'vue-web-screen-shot';
|
||||
import VueGridLayout from 'vue-grid-layout';
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
directive(app);
|
||||
other.elSvg(app);
|
||||
|
||||
app
|
||||
.use(router)
|
||||
.use(store, key)
|
||||
.use(ElementPlus, { i18n: i18n.global.t, size: globalComponentSize })
|
||||
.use(ElementPlus, { i18n: i18n.global.t, size: other.globalComponentSize })
|
||||
.use(i18n)
|
||||
.use(screenShort, { enableWebRtc: false })
|
||||
.use(VueGridLayout)
|
||||
.mount('#app');
|
||||
|
||||
app.config.globalProperties.mittBus = mitt();
|
||||
|
||||
directive(app);
|
||||
|
||||
@ -48,7 +48,7 @@ export async function initBackEndControlRoutes() {
|
||||
*/
|
||||
export function getBackEndControlRoutes() {
|
||||
// 模拟 admin 与 test
|
||||
const auth = store.state.userInfos.userInfos.authPageList[0];
|
||||
const auth = store.state.userInfos.userInfos.roles[0];
|
||||
// 管理员 admin
|
||||
if (auth === 'admin') return getMenuAdmin();
|
||||
// 其它用户 test
|
||||
|
||||
@ -81,34 +81,34 @@ export function formatTwoStageRoutes(arr: any) {
|
||||
*/
|
||||
export function setCacheTagsViewRoutes() {
|
||||
// 获取有权限的路由，否则 tagsView、菜单搜索中无权限的路由也将显示
|
||||
let authsRoutes = setFilterHasAuthMenu(dynamicRoutes, store.state.userInfos.userInfos.authPageList);
|
||||
let rolesRoutes = setFilterHasRolesMenu(dynamicRoutes, store.state.userInfos.userInfos.roles);
|
||||
// 添加到 vuex setTagsViewRoutes 中
|
||||
store.dispatch('tagsViewRoutes/setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(authsRoutes))[0].children);
|
||||
store.dispatch('tagsViewRoutes/setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(rolesRoutes))[0].children);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断路由 `meta.auth` 中是否包含当前登录用户权限字段
|
||||
* @param auths 用户权限标识，在 userInfos（用户信息）的 authPageList（登录页登录时缓存到浏览器）数组
|
||||
* 判断路由 `meta.roles` 中是否包含当前登录用户权限字段
|
||||
* @param roles 用户权限标识，在 userInfos（用户信息）的 roles（登录页登录时缓存到浏览器）数组
|
||||
* @param route 当前循环时的路由项
|
||||
* @returns 返回对比后有权限的路由项
|
||||
*/
|
||||
export function hasAuth(auths: any, route: any) {
|
||||
if (route.meta && route.meta.auth) return auths.some((auth: any) => route.meta.auth.includes(auth));
|
||||
export function hasRoles(roles: any, route: any) {
|
||||
if (route.meta && route.meta.roles) return roles.some((role: any) => route.meta.roles.includes(role));
|
||||
else return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前用户权限标识去比对路由表，设置递归过滤有权限的路由
|
||||
* @param routes 当前路由 children
|
||||
* @param auth 用户权限标识，在 userInfos（用户信息）的 authPageList（登录页登录时缓存到浏览器）数组
|
||||
* @returns 返回有权限的路由数组 `meta.auth` 中控制
|
||||
* @param roles 用户权限标识，在 userInfos（用户信息）的 roles（登录页登录时缓存到浏览器）数组
|
||||
* @returns 返回有权限的路由数组 `meta.roles` 中控制
|
||||
*/
|
||||
export function setFilterHasAuthMenu(routes: any, auth: any) {
|
||||
export function setFilterHasRolesMenu(routes: any, roles: any) {
|
||||
const menu: any = [];
|
||||
routes.forEach((route: any) => {
|
||||
const item = { ...route };
|
||||
if (hasAuth(auth, item)) {
|
||||
if (item.children) item.children = setFilterHasAuthMenu(item.children, auth);
|
||||
if (hasRoles(roles, item)) {
|
||||
if (item.children) item.children = setFilterHasRolesMenu(item.children, roles);
|
||||
menu.push(item);
|
||||
}
|
||||
});
|
||||
@ -121,7 +121,7 @@ export function setFilterHasAuthMenu(routes: any, auth: any) {
|
||||
* @description 用于 tagsView、菜单搜索中：未过滤隐藏的(isHide)
|
||||
*/
|
||||
export function setFilterMenuAndCacheTagsViewRoutes() {
|
||||
store.dispatch('routesList/setRoutesList', setFilterHasAuthMenu(dynamicRoutes[0].children, store.state.userInfos.userInfos.authPageList));
|
||||
store.dispatch('routesList/setRoutesList', setFilterHasRolesMenu(dynamicRoutes[0].children, store.state.userInfos.userInfos.roles));
|
||||
setCacheTagsViewRoutes();
|
||||
}
|
||||
|
||||
@ -135,10 +135,10 @@ export function setFilterMenuAndCacheTagsViewRoutes() {
|
||||
export function setFilterRoute(chil: any) {
|
||||
let filterRoute: any = [];
|
||||
chil.forEach((route: any) => {
|
||||
if (route.meta.auth) {
|
||||
route.meta.auth.forEach((metaAuth: any) => {
|
||||
store.state.userInfos.userInfos.authPageList.forEach((auth: any) => {
|
||||
if (metaAuth === auth) filterRoute.push({ ...route });
|
||||
if (route.meta.roles) {
|
||||
route.meta.roles.forEach((metaRoles: any) => {
|
||||
store.state.userInfos.userInfos.roles.forEach((roles: any) => {
|
||||
if (metaRoles === roles) filterRoute.push({ ...route });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ import { RouteRecordRaw } from 'vue-router';
|
||||
* isKeepAlive： 是否缓存组件状态
|
||||
* isAffix： 是否固定在 tagsView 栏上
|
||||
* isIframe： 是否内嵌窗口，，开启条件，`1、isIframe:true 2、链接地址不为空`
|
||||
* auth： 当前路由权限标识（多个请用逗号隔开），最后转成数组格式，用于与当前用户权限进行对比，控制路由显示、隐藏
|
||||
* roles： 当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common
|
||||
* icon： 菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
|
||||
* }
|
||||
*/
|
||||
@ -41,7 +41,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: true,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-shouye',
|
||||
},
|
||||
},
|
||||
@ -57,7 +57,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-xitongshezhi',
|
||||
},
|
||||
children: [
|
||||
@ -72,10 +72,25 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-caidan',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/system/role',
|
||||
name: 'systemRole',
|
||||
component: () => import('/@/views/system/role/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.systemRole',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin'],
|
||||
icon: 'elementColdDrink',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/system/user',
|
||||
name: 'systemUser',
|
||||
@ -87,13 +102,42 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-icon-',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/system/dept',
|
||||
name: 'systemDept',
|
||||
component: () => import('/@/views/system/dept/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.systemDept',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin'],
|
||||
icon: 'elementOfficeBuilding',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/system/dic',
|
||||
name: 'systemDic',
|
||||
component: () => import('/@/views/system/dic/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.systemDic',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin'],
|
||||
icon: 'elementSetUp',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: '/limits',
|
||||
name: 'limits',
|
||||
@ -106,7 +150,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-quanxian',
|
||||
},
|
||||
children: [
|
||||
@ -122,7 +166,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: '',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -136,7 +181,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -150,7 +196,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -166,7 +213,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: '',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -180,7 +228,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -199,7 +248,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-caidan',
|
||||
},
|
||||
children: [
|
||||
@ -215,7 +264,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-caidan',
|
||||
},
|
||||
children: [
|
||||
@ -230,7 +279,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-caidan',
|
||||
},
|
||||
},
|
||||
@ -246,7 +295,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-caidan',
|
||||
},
|
||||
children: [
|
||||
@ -261,7 +310,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-caidan',
|
||||
},
|
||||
},
|
||||
@ -276,7 +325,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-caidan',
|
||||
},
|
||||
},
|
||||
@ -293,7 +342,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-caidan',
|
||||
},
|
||||
},
|
||||
@ -310,7 +359,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-caidan',
|
||||
},
|
||||
},
|
||||
@ -328,7 +377,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-crew_feature',
|
||||
},
|
||||
children: [
|
||||
@ -343,8 +392,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-thumb',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementPointer',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -358,8 +407,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-odometer',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementOdometer',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -373,8 +422,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-connection',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementConnection',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -388,7 +437,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-xuanzeqi',
|
||||
},
|
||||
},
|
||||
@ -403,8 +452,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-bell',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementBell',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -418,7 +467,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-fuwenbenkuang',
|
||||
},
|
||||
},
|
||||
@ -433,7 +482,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-caijian',
|
||||
},
|
||||
},
|
||||
@ -448,7 +497,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-ico',
|
||||
},
|
||||
},
|
||||
@ -463,7 +512,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-ditu',
|
||||
},
|
||||
},
|
||||
@ -478,8 +527,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-printer',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementPrinter',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -493,8 +542,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-document-copy',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementDocumentCopy',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -508,8 +557,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-crop',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementCrop',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -523,7 +572,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-tuodong',
|
||||
},
|
||||
},
|
||||
@ -538,10 +587,25 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon--chaifenlie',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/fun/dragVerify',
|
||||
name: 'funDragVerify',
|
||||
component: () => import('/@/views/fun/dragVerify/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.funDragVerify',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementPromotion',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -556,7 +620,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-fuzhiyemian',
|
||||
},
|
||||
children: [
|
||||
@ -571,27 +635,35 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-sell',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementSell',
|
||||
},
|
||||
/**
|
||||
* 注意此处详情写法：
|
||||
* 1、嵌套进父级里时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情
|
||||
* 2、不嵌套进父级时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情
|
||||
* 3、想要父级不高亮，面包屑显示为：首页/页面/过滤筛选组件详情，设置路径为：/pages/filteringDetails
|
||||
*/
|
||||
children: [
|
||||
{
|
||||
path: '/pages/filtering/details',
|
||||
name: 'pagesFilteringDetails',
|
||||
component: () => import('/@/views/pages/filtering/details.vue'),
|
||||
meta: {
|
||||
title: 'message.router.pagesFilteringDetails',
|
||||
isLink: '',
|
||||
isHide: true,
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementSunny',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/pages/filteringDetails',
|
||||
name: 'pagesFilteringDetails',
|
||||
component: () => import('/@/views/pages/filtering/details.vue'),
|
||||
meta: {
|
||||
title: 'message.router.pagesFilteringDetails',
|
||||
isLink: '',
|
||||
isHide: true,
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-s-order',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/pages/filteringDetails1',
|
||||
path: '/pages/filtering/details1',
|
||||
name: 'pagesFilteringDetails1',
|
||||
component: () => import('/@/views/pages/filtering/details1.vue'),
|
||||
meta: {
|
||||
@ -601,8 +673,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-s-order',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementSunny',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -616,8 +688,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-present',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementPresent',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -631,8 +703,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-platform-eleme',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementEleme',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -646,8 +718,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-set-up',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementSetUp',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -661,7 +733,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-jiliandongxuanzeqi',
|
||||
},
|
||||
},
|
||||
@ -676,7 +748,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-biaodan',
|
||||
},
|
||||
},
|
||||
@ -691,10 +763,25 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-diqiu',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/pages/formRules',
|
||||
name: 'pagesFormRules',
|
||||
component: () => import('/@/views/pages/formRules/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.pagesFormRules',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-shuxing',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/pages/listAdapt',
|
||||
name: 'pagesListAdapt',
|
||||
@ -706,7 +793,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-chazhaobiaodanliebiao',
|
||||
},
|
||||
},
|
||||
@ -721,7 +808,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-zidingyibuju',
|
||||
},
|
||||
},
|
||||
@ -736,7 +823,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-step',
|
||||
},
|
||||
},
|
||||
@ -751,7 +838,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-15tupianyulan',
|
||||
},
|
||||
},
|
||||
@ -766,7 +853,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-bolangneng',
|
||||
},
|
||||
},
|
||||
@ -781,7 +868,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-shuxingtu',
|
||||
},
|
||||
},
|
||||
@ -796,8 +883,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-thumb',
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'elementPointer',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -811,8 +898,38 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
icon: 'el-icon-picture-outline',
|
||||
roles: ['admin'],
|
||||
icon: 'elementPictureFilled',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/pages/dynamicForm',
|
||||
name: 'pagesDynamicForm',
|
||||
component: () => import('/@/views/pages/dynamicForm/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.pagesDynamicForm',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-diannao',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/pages/workflow',
|
||||
name: 'pagesWorkflow',
|
||||
component: () => import('/@/views/pages/workflow/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.pagesWorkflow',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
roles: ['admin'],
|
||||
icon: 'elementConnection',
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -829,7 +946,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-zhongduancanshu',
|
||||
},
|
||||
children: [
|
||||
@ -844,7 +961,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-putong',
|
||||
},
|
||||
},
|
||||
@ -859,8 +976,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
icon: 'el-icon-s-order',
|
||||
roles: ['admin'],
|
||||
icon: 'elementComment',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -874,7 +991,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-dongtai',
|
||||
},
|
||||
},
|
||||
@ -889,8 +1006,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
icon: 'el-icon-s-order',
|
||||
roles: ['admin'],
|
||||
icon: 'elementLightning',
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -907,8 +1024,8 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
icon: 'el-icon-data-line',
|
||||
roles: ['admin'],
|
||||
icon: 'elementChatLineRound',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -922,7 +1039,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-caozuo-wailian',
|
||||
},
|
||||
},
|
||||
@ -937,7 +1054,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-caozuo-wailian',
|
||||
},
|
||||
},
|
||||
@ -954,7 +1071,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-ico_shuju',
|
||||
},
|
||||
},
|
||||
@ -969,7 +1086,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-gerenzhongxin',
|
||||
},
|
||||
},
|
||||
@ -984,7 +1101,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
roles: ['admin', 'common'],
|
||||
icon: 'iconfont icon-gongju',
|
||||
},
|
||||
},
|
||||
@ -999,7 +1116,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
isKeepAlive: false,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-caozuo-wailian',
|
||||
},
|
||||
},
|
||||
@ -1009,12 +1126,12 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
component: () => import('/@/layout/routerView/iframes.vue'),
|
||||
meta: {
|
||||
title: 'message.router.layoutIfameView',
|
||||
isLink: 'https://gitee.com/lyt-top/vue-next-admin',
|
||||
isLink: 'https://wdd.js.org/jsplumb-chinese-tutorial/#/',
|
||||
isHide: false,
|
||||
isKeepAlive: false,
|
||||
isAffix: true,
|
||||
isIframe: true,
|
||||
auth: ['admin'],
|
||||
roles: ['admin'],
|
||||
icon: 'iconfont icon-neiqianshujuchucun',
|
||||
},
|
||||
},
|
||||
|
||||
@ -38,6 +38,7 @@ export interface ThemeConfigState {
|
||||
isFooter: boolean;
|
||||
isGrayscale: boolean;
|
||||
isInvert: boolean;
|
||||
isIsDark: boolean;
|
||||
isWartermark: boolean;
|
||||
wartermarkText: string;
|
||||
tagsStyle: string;
|
||||
@ -56,6 +57,8 @@ export interface ThemeConfigState {
|
||||
// 路由列表
|
||||
export interface RoutesListState {
|
||||
routesList: Array<object>;
|
||||
isColumnsMenuHover: Boolean;
|
||||
isColumnsNavHover: Boolean;
|
||||
}
|
||||
|
||||
// 路由缓存列表
|
||||
|
||||
@ -6,18 +6,36 @@ const routesListModule: Module<RoutesListState, RootStateTypes> = {
|
||||
namespaced: true,
|
||||
state: {
|
||||
routesList: [],
|
||||
isColumnsMenuHover: false,
|
||||
isColumnsNavHover: false,
|
||||
},
|
||||
mutations: {
|
||||
// 设置路由，菜单中使用到
|
||||
getRoutesList(state: any, data: Array<object>) {
|
||||
state.routesList = data;
|
||||
},
|
||||
// 设置分栏布局，鼠标是否移入移出（菜单）
|
||||
getColumnsMenuHover(state: any, bool: Boolean) {
|
||||
state.isColumnsMenuHover = bool;
|
||||
},
|
||||
// 设置分栏布局，鼠标是否移入移出（导航）
|
||||
getColumnsNavHover(state: any, bool: Boolean) {
|
||||
state.isColumnsNavHover = bool;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
// 设置路由，菜单中使用到
|
||||
async setRoutesList({ commit }, data: any) {
|
||||
commit('getRoutesList', data);
|
||||
},
|
||||
// 设置分栏布局，鼠标是否移入移出（菜单）
|
||||
async setColumnsMenuHover({ commit }, bool: Boolean) {
|
||||
commit('getColumnsMenuHover', bool);
|
||||
},
|
||||
// 设置分栏布局，鼠标是否移入移出（菜单）
|
||||
async setColumnsNavHover({ commit }, bool: Boolean) {
|
||||
commit('getColumnsNavHover', bool);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Module } from 'vuex';
|
||||
// 此处加上 `.ts` 后缀报错，具体原因不详
|
||||
import { TagsViewRoutesState, RootStateTypes } from '/@/store/interface/index';
|
||||
import { Session } from '/@/utils/storage';
|
||||
|
||||
const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
|
||||
namespaced: true,
|
||||
@ -15,6 +16,7 @@ const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
|
||||
},
|
||||
// 设置卡片全屏
|
||||
getCurrenFullscreen(state: any, bool: boolean) {
|
||||
Session.set('isTagsViewCurrenFull', bool);
|
||||
state.isTagsViewCurrenFull = bool;
|
||||
},
|
||||
},
|
||||
|
||||
@ -5,6 +5,7 @@ import { ThemeConfigState, RootStateTypes } from '/@/store/interface/index';
|
||||
/**
|
||||
* 2020.05.28 by lyt 优化
|
||||
* 修改一下配置时，需要每次都清理 `window.localStorage` 浏览器永久缓存，配置才会生效
|
||||
* 哪个大佬有解决办法，欢迎pr，感谢💕！
|
||||
*/
|
||||
const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
|
||||
namespaced: true,
|
||||
@ -29,8 +30,9 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
|
||||
|
||||
/**
|
||||
* 菜单 / 顶栏
|
||||
* 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/breadcrumb/setings.vue
|
||||
* 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
|
||||
* 注意：v1.0.17 版本去除设置布局切换，重置主题样式（initSetLayoutChange），
|
||||
* 切换布局需手动设置样式，设置的样式自动同步各布局，
|
||||
* 代码位置：/@/layout/navBars/breadcrumb/setings.vue
|
||||
*/
|
||||
// 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
|
||||
topBar: '#ffffff',
|
||||
@ -52,7 +54,6 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
|
||||
isColumnsMenuBarColorGradual: false,
|
||||
// 是否开启菜单字体背景高亮
|
||||
isMenuBarColorHighlight: false,
|
||||
// 是否开启菜单字体背景高亮
|
||||
|
||||
/**
|
||||
* 界面设置
|
||||
@ -99,6 +100,8 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
|
||||
isGrayscale: false,
|
||||
// 是否开启色弱模式
|
||||
isInvert: false,
|
||||
// 是否开启深色模式
|
||||
isIsDark: false,
|
||||
// 是否开启水印
|
||||
isWartermark: false,
|
||||
// 水印文案
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Module } from 'vuex';
|
||||
import { Session } from '/@/utils/storage.ts';
|
||||
import { Session } from '/@/utils/storage';
|
||||
// 此处加上 `.ts` 后缀报错，具体原因不详
|
||||
import { UserInfosState, RootStateTypes } from '/@/store/interface/index';
|
||||
|
||||
|
||||
@ -56,27 +56,54 @@ body,
|
||||
}
|
||||
// 此字段多次用到，建议不删除，如需修改，请重写覆盖样式
|
||||
.layout-view-bg-white {
|
||||
background: white;
|
||||
background: var(--el-color-white);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ebeef5;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
}
|
||||
.layout-el-aside-br-color {
|
||||
border-right: 1px solid rgb(238, 238, 238);
|
||||
}
|
||||
.layout-aside-width-default {
|
||||
// pc端左侧导航样式
|
||||
.layout-aside-pc-220 {
|
||||
width: 220px !important;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.layout-aside-width64 {
|
||||
.layout-aside-pc-64 {
|
||||
width: 64px !important;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.layout-aside-width1 {
|
||||
.layout-aside-pc-1 {
|
||||
width: 1px !important;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
// 手机端左侧导航样式
|
||||
.layout-aside-mobile {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -220px;
|
||||
width: 220px;
|
||||
z-index: 9999999;
|
||||
}
|
||||
.layout-aside-mobile-close {
|
||||
left: -220px;
|
||||
transition: all 0.3s cubic-bezier(1, -0.04, 0, 1.32);
|
||||
}
|
||||
.layout-aside-mobile-open {
|
||||
left: 0;
|
||||
transition: all 0.3s cubic-bezier(0.53, -0.26, 0.42, 1.18);
|
||||
}
|
||||
.layout-aside-mobile-mode {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 9999998;
|
||||
}
|
||||
.layout-scrollbar {
|
||||
@extend .el-scrollbar;
|
||||
padding: 15px;
|
||||
@ -97,14 +124,6 @@ body,
|
||||
/* element plus 全局样式
|
||||
------------------------------- */
|
||||
.layout-breadcrumb-seting {
|
||||
.el-drawer__header {
|
||||
padding: 0 15px !important;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom: 1px solid rgb(230, 230, 230);
|
||||
}
|
||||
.el-divider {
|
||||
background-color: rgb(230, 230, 230);
|
||||
}
|
||||
@ -150,6 +169,25 @@ body,
|
||||
}
|
||||
}
|
||||
|
||||
/* cursor 鼠标形状
|
||||
------------------------------- */
|
||||
// 默认
|
||||
.cursor-default {
|
||||
cursor: default !important;
|
||||
}
|
||||
// 帮助
|
||||
.cursor-help {
|
||||
cursor: help !important;
|
||||
}
|
||||
// 手指
|
||||
.cursor-pointer {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
// 移动
|
||||
.cursor-move {
|
||||
cursor: move !important;
|
||||
}
|
||||
|
||||
/* 宽高 100%
|
||||
------------------------------- */
|
||||
.w100 {
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
------------------------------- */
|
||||
$--color-primary: #409eff !default;
|
||||
$--color-whites: #ffffff !default;
|
||||
$--color-blacks: #000000 !default;
|
||||
$--color-primary-light-1: mix($--color-whites, $--color-primary, 10%) !default;
|
||||
$--color-primary-light-2: mix($--color-whites, $--color-primary, 20%) !default;
|
||||
$--color-primary-light-3: mix($--color-whites, $--color-primary, 30%) !default;
|
||||
@ -70,7 +69,6 @@ $--bg-columnsMenuBarColor: #e6e6e6;
|
||||
:root {
|
||||
--color-primary: #{$--color-primary};
|
||||
--color-whites: #{$--color-whites};
|
||||
--color-blacks: #{$--color-blacks};
|
||||
--color-primary-light-1: #{$--color-primary-light-1};
|
||||
--color-primary-light-2: #{$--color-primary-light-2};
|
||||
--color-primary-light-3: #{$--color-primary-light-3};
|
||||
|
||||
57
src/theme/dark.scss
Normal file
57
src/theme/dark.scss
Normal file
@ -0,0 +1,57 @@
|
||||
/* 深色模式样式
|
||||
------------------------------- */
|
||||
[data-theme='dark'] {
|
||||
// 全局
|
||||
filter: invert(0.9) hue-rotate(180deg);
|
||||
img,
|
||||
.layout-lock-screen-img,
|
||||
.visualizing-demo2,
|
||||
.w-e-panel-tab-content {
|
||||
filter: invert(1) hue-rotate(180deg);
|
||||
}
|
||||
.error img {
|
||||
filter: unset;
|
||||
}
|
||||
|
||||
// element plus
|
||||
.el-radio-button__original-radio:checked + .el-radio-button__inner,
|
||||
.el-image-viewer__close,
|
||||
.el-image-viewer__actions__inner,
|
||||
.el-image-viewer__next,
|
||||
.el-image-viewer__prev {
|
||||
color: #000000 !important;
|
||||
}
|
||||
.el-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
.el-drawer {
|
||||
box-shadow: 0 8px 10px -5px rgb(0 0 0 / 1%), 0 16px 24px 2px rgb(0 0 0 / 2%), 0 6px 30px 5px rgb(0 0 0 / 1%);
|
||||
}
|
||||
|
||||
// 数据可视化演示
|
||||
.visualizing-container-head {
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.02)) !important;
|
||||
.visualizing-container-head-left-text-box {
|
||||
color: #000000 !important;
|
||||
}
|
||||
}
|
||||
.visualizing-container-content-left {
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.01)) !important;
|
||||
}
|
||||
.visualizing-container-content-center {
|
||||
background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.01)) !important;
|
||||
}
|
||||
.visualizing-container-content-right {
|
||||
background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.01)) !important;
|
||||
}
|
||||
.cropper-modal {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
// 其它菜单等
|
||||
--bg-menuBar: #ffffff !important;
|
||||
--bg-menuBarColor: #303133 !important;
|
||||
--bg-columnsMenuBar: #ffffff !important;
|
||||
--bg-columnsMenuBarColor: #303133 !important;
|
||||
--color-whites: #000000 !important;
|
||||
}
|
||||
@ -747,9 +747,14 @@
|
||||
// 默认样式修改
|
||||
.el-menu {
|
||||
border-right: none !important;
|
||||
width: 220px;
|
||||
}
|
||||
// 修复点击左侧菜单折叠再展开时，宽度不跟随问题
|
||||
.el-menu--collapse {
|
||||
width: 64px !important;
|
||||
}
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
.el-sub-menu__title {
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
color: var(--bg-menuBarColor);
|
||||
@ -757,31 +762,31 @@
|
||||
}
|
||||
// horizontal 水平方向时
|
||||
.el-menu--horizontal > .el-menu-item.is-active,
|
||||
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
||||
.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
|
||||
border-bottom: 3px solid !important;
|
||||
border-bottom-color: set-color(primary);
|
||||
color: set-color(primary) !important;
|
||||
}
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
|
||||
.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
|
||||
.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
|
||||
.el-menu--horizontal > .el-sub-menu:focus .el-sub-menu__title,
|
||||
.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title,
|
||||
.el-menu--horizontal .el-menu .el-menu-item.is-active,
|
||||
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
|
||||
.el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
|
||||
color: set-color(primary) !important;
|
||||
}
|
||||
.el-menu.el-menu--horizontal {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.el-menu--horizontal > .el-menu-item,
|
||||
.el-menu--horizontal > .el-submenu .el-submenu__title {
|
||||
.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
|
||||
color: var(--bg-topBarColor);
|
||||
}
|
||||
// 外部链接时
|
||||
.el-menu-item a,
|
||||
.el-menu-item a:hover,
|
||||
.el-menu-item i,
|
||||
.el-submenu__title i {
|
||||
.el-sub-menu__title i {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -791,22 +796,23 @@
|
||||
}
|
||||
// 默认 hover 时
|
||||
.el-menu-item:hover,
|
||||
.el-submenu__title:hover {
|
||||
.el-sub-menu__title:hover {
|
||||
color: set-color(primary) !important;
|
||||
background-color: transparent !important;
|
||||
i {
|
||||
color: set-color(primary);
|
||||
}
|
||||
}
|
||||
// 高亮时
|
||||
.el-menu-item.is-active {
|
||||
// 高亮时/菜单收起时
|
||||
.el-menu-item.is-active,
|
||||
.el-menu--collapse .el-sub-menu.is-active i {
|
||||
color: set-color(primary);
|
||||
}
|
||||
.el-active-extend {
|
||||
color: #ffffff !important;
|
||||
color: var(--color-whites) !important;
|
||||
background-color: set-color(primary) !important;
|
||||
i {
|
||||
color: #ffffff !important;
|
||||
color: var(--color-whites) !important;
|
||||
}
|
||||
}
|
||||
#add-is-active {
|
||||
@ -817,33 +823,37 @@
|
||||
}
|
||||
// 菜单收起时且是a链接
|
||||
.el-popper.is-dark a {
|
||||
color: #ffffff !important;
|
||||
color: var(--color-whites) !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
// 菜单收起时鼠标经过背景颜色/字体颜色
|
||||
.el-popper.is-light {
|
||||
.el-menu--vertical {
|
||||
background: var(--bg-menuBar);
|
||||
.el-menu {
|
||||
background: var(--bg-menuBar);
|
||||
}
|
||||
}
|
||||
.el-menu--horizontal {
|
||||
background: var(--bg-topBar);
|
||||
.el-menu,
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
.el-sub-menu__title {
|
||||
color: var(--bg-topBarColor);
|
||||
background: var(--bg-topBar);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 第三方图标字体间距/大小设置
|
||||
.el-menu-item .iconfont,
|
||||
.el-submenu .iconfont {
|
||||
.el-sub-menu .iconfont {
|
||||
@include generalIcon;
|
||||
}
|
||||
.el-menu-item .fa,
|
||||
.el-submenu .fa {
|
||||
.el-sub-menu .fa {
|
||||
@include generalIcon;
|
||||
}
|
||||
// element plus 本身字体图标
|
||||
.el-submenu [class^='el-icon-'] {
|
||||
.el-sub-menu .el-icon {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
// 去掉离开浏览器时，菜单的默认高亮
|
||||
@ -885,6 +895,9 @@
|
||||
color: set-color(primary);
|
||||
background-color: set-color(primary-light-9);
|
||||
}
|
||||
.el-dropdown-menu .el-dropdown-menu__item {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Steps 步骤条
|
||||
------------------------------- */
|
||||
@ -928,14 +941,20 @@
|
||||
color: set-color(primary);
|
||||
}
|
||||
.el-overlay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.el-dialog {
|
||||
margin: 0 auto !important;
|
||||
position: absolute;
|
||||
.el-dialog__body {
|
||||
padding: 20px !important;
|
||||
overflow: hidden;
|
||||
.el-overlay-dialog {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: unset !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.el-dialog {
|
||||
margin: 0 auto !important;
|
||||
position: absolute;
|
||||
.el-dialog__body {
|
||||
padding: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -996,6 +1015,9 @@
|
||||
|
||||
/* scrollbar
|
||||
------------------------------- */
|
||||
.el-scrollbar__bar {
|
||||
z-index: 4;
|
||||
}
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden !important;
|
||||
max-height: 100%; /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
|
||||
@ -1012,10 +1034,21 @@
|
||||
|
||||
/* Drawer 抽屉
|
||||
------------------------------- */
|
||||
.el-drawer__body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
.el-drawer {
|
||||
--el-drawer-padding-primary: unset !important;
|
||||
.el-drawer__header {
|
||||
padding: 0 15px !important;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom: 1px solid rgb(230, 230, 230);
|
||||
}
|
||||
.el-drawer__body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.el-drawer-fade-enter-active .el-drawer.rtl {
|
||||
animation: rtl-drawer-animation 0.3s ease-in reverse !important;
|
||||
|
||||
@ -9,11 +9,24 @@
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 15px;
|
||||
.icon-selector-warp-title-tab {
|
||||
span {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.span-active {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-selector-warp-row {
|
||||
height: 230px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #ebeef5;
|
||||
border-top: var(--el-border-base);
|
||||
.el-row {
|
||||
padding: 15px;
|
||||
}
|
||||
@ -22,14 +35,14 @@
|
||||
}
|
||||
.icon-selector-warp-item {
|
||||
display: flex;
|
||||
border: 1px solid #ebeef5;
|
||||
border: var(--el-border-base);
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
.icon-selector-warp-item-value {
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: #606266;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
|
||||
@ -5,3 +5,4 @@
|
||||
@import './iconSelector.scss';
|
||||
@import './media/media.scss';
|
||||
@import './waves.scss';
|
||||
@import './dark.scss';
|
||||
|
||||
@ -24,3 +24,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于375px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: 376px) {
|
||||
.login-container {
|
||||
.login-content-title {
|
||||
font-size: 18px !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import { Local } from '/@/utils/storage';
|
||||
|
||||
/**
|
||||
* 全局组件大小
|
||||
* @returns 返回 `window.localStorage` 中读取的缓存值 `globalComponentSize`
|
||||
*/
|
||||
export const globalComponentSize: string = Local.get('themeConfig')?.globalComponentSize;
|
||||
@ -1,21 +0,0 @@
|
||||
/**
|
||||
* 对象深克隆
|
||||
* @param obj 源对象
|
||||
* @returns 克隆后的对象
|
||||
*/
|
||||
export function deepClone(obj: any) {
|
||||
let newObj: any;
|
||||
try {
|
||||
newObj = obj.push ? [] : {};
|
||||
} catch (error) {
|
||||
newObj = {};
|
||||
}
|
||||
for (let attr in obj) {
|
||||
if (typeof obj[attr] === 'object') {
|
||||
newObj[attr] = deepClone(obj[attr]);
|
||||
} else {
|
||||
newObj[attr] = obj[attr];
|
||||
}
|
||||
}
|
||||
return newObj;
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import { nextTick } from 'vue';
|
||||
import * as svg from '@element-plus/icons';
|
||||
|
||||
// 获取阿里字体图标
|
||||
const getAlicdnIconfont = () => {
|
||||
@ -27,24 +28,16 @@ const getAlicdnIconfont = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化获取 css 样式，获取 element plus 自带图标
|
||||
// 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 element 前缀，使用时：elementAim
|
||||
const getElementPlusIconfont = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
const styles: any = document.styleSheets;
|
||||
let sheetsIconList = [];
|
||||
for (let i = 0; i < styles.length; i++) {
|
||||
for (let j = 0; j < styles[i].cssRules.length; j++) {
|
||||
if (styles[i].cssRules[j].selectorText && styles[i].cssRules[j].selectorText.indexOf('.el-icon-') === 0) {
|
||||
if (/::before/.test(styles[i].cssRules[j].selectorText)) {
|
||||
sheetsIconList.push(
|
||||
`${styles[i].cssRules[j].selectorText.substring(1, styles[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
const icons = svg as any;
|
||||
const sheetsIconList = [];
|
||||
for (const i in icons) {
|
||||
sheetsIconList.push(`element${icons[i].name}`);
|
||||
}
|
||||
if (sheetsIconList.length > 0) resolve(sheetsIconList.reverse());
|
||||
if (sheetsIconList.length > 0) resolve(sheetsIconList);
|
||||
else reject('未获取到值，请刷新重试');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
/**
|
||||
* 图片懒加载
|
||||
* @param el dom 目标元素
|
||||
* @param arr 列表数据
|
||||
* @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
|
||||
*/
|
||||
export const lazyImgLoading = (el: any, arr: any) => {
|
||||
const io = new IntersectionObserver((res) => {
|
||||
res.forEach((v: any) => {
|
||||
if (v.isIntersecting) {
|
||||
const { img, key } = v.target.dataset;
|
||||
v.target.src = img;
|
||||
v.target.onload = () => {
|
||||
io.unobserve(v.target);
|
||||
arr[key]['loading'] = false;
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
nextTick(() => {
|
||||
document.querySelectorAll(el).forEach((img) => io.observe(img));
|
||||
});
|
||||
};
|
||||
121
src/utils/other.ts
Normal file
121
src/utils/other.ts
Normal file
@ -0,0 +1,121 @@
|
||||
import { nextTick } from 'vue';
|
||||
import type { App } from 'vue';
|
||||
import * as svg from '@element-plus/icons';
|
||||
import router from '/@/router/index';
|
||||
import { store } from '/@/store/index';
|
||||
import { i18n } from '/@/i18n/index';
|
||||
import { Local } from '/@/utils/storage';
|
||||
import SvgIcon from '/@/components/svgIcon/index.vue';
|
||||
|
||||
/**
|
||||
* 导出全局注册 element plus svg 图标
|
||||
* @param app vue 实例
|
||||
* @description 使用：https://element-plus.gitee.io/zh-CN/component/icon.html
|
||||
*/
|
||||
export function elSvg(app: App) {
|
||||
const icons = svg as any;
|
||||
for (const i in icons) {
|
||||
app.component(`element${icons[i].name}`, icons[i]);
|
||||
}
|
||||
app.component('SvgIcon', SvgIcon);
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置浏览器标题国际化
|
||||
* @method const title = useTitle(); ==> title()
|
||||
*/
|
||||
export function useTitle() {
|
||||
return () => {
|
||||
nextTick(() => {
|
||||
let webTitle = '';
|
||||
let globalTitle: string = store.state.themeConfig.themeConfig.globalTitle;
|
||||
router.currentRoute.value.path === '/login'
|
||||
? (webTitle = router.currentRoute.value.meta.title as any)
|
||||
: (webTitle = i18n.global.t(router.currentRoute.value.meta.title as any));
|
||||
document.title = `${webTitle} - ${globalTitle}` || globalTitle;
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 图片懒加载
|
||||
* @param el dom 目标元素
|
||||
* @param arr 列表数据
|
||||
* @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
|
||||
*/
|
||||
export const lazyImg = (el: any, arr: any) => {
|
||||
const io = new IntersectionObserver((res) => {
|
||||
res.forEach((v: any) => {
|
||||
if (v.isIntersecting) {
|
||||
const { img, key } = v.target.dataset;
|
||||
v.target.src = img;
|
||||
v.target.onload = () => {
|
||||
io.unobserve(v.target);
|
||||
arr[key]['loading'] = false;
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
nextTick(() => {
|
||||
document.querySelectorAll(el).forEach((img) => io.observe(img));
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 全局组件大小
|
||||
* @returns 返回 `window.localStorage` 中读取的缓存值 `globalComponentSize`
|
||||
*/
|
||||
export function globalComponentSize() {
|
||||
return Local.get('themeConfig')?.globalComponentSize;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象深克隆
|
||||
* @param obj 源对象
|
||||
* @returns 克隆后的对象
|
||||
*/
|
||||
export function deepClone(obj: any) {
|
||||
let newObj: any;
|
||||
try {
|
||||
newObj = obj.push ? [] : {};
|
||||
} catch (error) {
|
||||
newObj = {};
|
||||
}
|
||||
for (let attr in obj) {
|
||||
if (typeof obj[attr] === 'object') {
|
||||
newObj[attr] = deepClone(obj[attr]);
|
||||
} else {
|
||||
newObj[attr] = obj[attr];
|
||||
}
|
||||
}
|
||||
return newObj;
|
||||
}
|
||||
|
||||
/**
|
||||
* 统一批量导出
|
||||
* @method elSvg 导出全局注册 element plus svg 图标
|
||||
* @method useTitle 设置浏览器标题国际化
|
||||
* @method lazyImg 图片懒加载
|
||||
* @method globalComponentSize element plus 全局组件大小
|
||||
* @method deepClone 对象深克隆
|
||||
*/
|
||||
const other = {
|
||||
elSvg: (app: App) => {
|
||||
elSvg(app);
|
||||
},
|
||||
useTitle: () => {
|
||||
useTitle();
|
||||
},
|
||||
lazyImg: (el: any, arr: any) => {
|
||||
lazyImg(el, arr);
|
||||
},
|
||||
globalComponentSize: () => {
|
||||
globalComponentSize();
|
||||
},
|
||||
deepClone: (obj: any) => {
|
||||
deepClone(obj);
|
||||
},
|
||||
};
|
||||
|
||||
// 统一批量导出
|
||||
export default other;
|
||||
@ -1,20 +0,0 @@
|
||||
import { nextTick } from 'vue';
|
||||
import router from '/@/router/index';
|
||||
import { store } from '/@/store/index';
|
||||
import { i18n } from '/@/i18n/index';
|
||||
|
||||
/**
|
||||
* 设置浏览器标题国际化
|
||||
*/
|
||||
export function useTitle() {
|
||||
return () => {
|
||||
nextTick(() => {
|
||||
let webTitle = '';
|
||||
let globalTitle: string = store.state.themeConfig.themeConfig.globalTitle;
|
||||
router.currentRoute.value.path === '/login'
|
||||
? (webTitle = router.currentRoute.value.meta.title as any)
|
||||
: (webTitle = i18n.global.t(router.currentRoute.value.meta.title as any));
|
||||
document.title = `${webTitle} - ${globalTitle}` || globalTitle;
|
||||
});
|
||||
};
|
||||
}
|
||||
@ -8,7 +8,7 @@ import { ElMessage } from 'element-plus';
|
||||
export function hexToRgb(str: any) {
|
||||
let hexs: any = '';
|
||||
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
||||
if (!reg.test(str)) return ElMessage({ type: 'warning', message: '输入错误的hex' });
|
||||
if (!reg.test(str)) return ElMessage.warning('输入错误的hex');
|
||||
str = str.replace('#', '');
|
||||
hexs = str.match(/../g);
|
||||
for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
|
||||
@ -24,7 +24,7 @@ export function hexToRgb(str: any) {
|
||||
*/
|
||||
export function rgbToHex(r: any, g: any, b: any) {
|
||||
let reg = /^\d{1,3}$/;
|
||||
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage({ type: 'warning', message: '输入错误的rgb颜色值' });
|
||||
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage.warning('输入错误的rgb颜色值');
|
||||
let hexs = [r.toString(16), g.toString(16), b.toString(16)];
|
||||
for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
|
||||
return `#${hexs.join('')}`;
|
||||
@ -38,7 +38,7 @@ export function rgbToHex(r: any, g: any, b: any) {
|
||||
*/
|
||||
export function getDarkColor(color: any, level: number) {
|
||||
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
||||
if (!reg.test(color)) return ElMessage({ type: 'warning', message: '输入错误的hex颜色值' });
|
||||
if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值');
|
||||
let rgb = hexToRgb(color);
|
||||
for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
|
||||
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||
@ -52,7 +52,7 @@ export function getDarkColor(color: any, level: number) {
|
||||
*/
|
||||
export function getLightColor(color: any, level: number) {
|
||||
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
||||
if (!reg.test(color)) return ElMessage({ type: 'warning', message: '输入错误的hex颜色值' });
|
||||
if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值');
|
||||
let rgb = hexToRgb(color);
|
||||
for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
|
||||
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||
|
||||
@ -3,19 +3,18 @@ const setWatermark = (str: string) => {
|
||||
const id = '1.23452384164.123412416';
|
||||
if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id) as any);
|
||||
const can = document.createElement('canvas');
|
||||
can.width = 250;
|
||||
can.height = 180;
|
||||
can.width = 200;
|
||||
can.height = 130;
|
||||
const cans: any = can.getContext('2d');
|
||||
cans.rotate((-20 * Math.PI) / 180);
|
||||
cans.font = '12px Vedana';
|
||||
cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
|
||||
cans.textAlign = 'center';
|
||||
cans.textBaseline = 'Middle';
|
||||
cans.fillText(str, can.width / 10, can.height / 2);
|
||||
const div = document.createElement('div');
|
||||
div.id = id;
|
||||
div.style.pointerEvents = 'none';
|
||||
div.style.top = '35px';
|
||||
div.style.top = '15px';
|
||||
div.style.left = '0px';
|
||||
div.style.position = 'fixed';
|
||||
div.style.zIndex = '10000000';
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border: 1px solid #ebeef5;
|
||||
background: var(--el-color-white);
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
}
|
||||
.big-data-down-left {
|
||||
color: #303133;
|
||||
color: var(--el-text-color-primary);
|
||||
.sky {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -67,7 +67,7 @@
|
||||
background: #22bc76;
|
||||
border-radius: 2px;
|
||||
padding: 0 5px;
|
||||
color: white;
|
||||
color: var(--color-whites);
|
||||
}
|
||||
}
|
||||
.sky-right {
|
||||
@ -117,7 +117,10 @@
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
flex-shrink: 1;
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.i-bg1 {
|
||||
background: #22bc76;
|
||||
@ -189,9 +192,9 @@
|
||||
padding: 0 7.5px 15px;
|
||||
.big-data-down-center-one-content {
|
||||
height: 100%;
|
||||
background: white;
|
||||
background: var(--el-color-white);
|
||||
padding: 15px;
|
||||
border: 1px solid #ebeef5;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
@ -206,11 +209,11 @@
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
background: var(--el-color-white);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
border: 1px solid #ebeef5;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
@ -317,7 +320,7 @@
|
||||
height: 45px;
|
||||
.task-item {
|
||||
flex: 1;
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.task-item-box {
|
||||
|
||||
@ -13,14 +13,14 @@ export const skyList = [
|
||||
},
|
||||
{
|
||||
v1: '今天',
|
||||
v2: 'el-icon-cloudy-and-sunny',
|
||||
v2: 'elementSunny',
|
||||
v3: '20°/26°',
|
||||
v5: '50%',
|
||||
v7: '13m/s',
|
||||
},
|
||||
{
|
||||
v1: '明天',
|
||||
v2: 'el-icon-lightning',
|
||||
v2: 'elementLightning',
|
||||
v3: '20°/26°',
|
||||
v5: '50%',
|
||||
v7: '13m/s',
|
||||
@ -57,34 +57,3 @@ export const chartData4List = [
|
||||
label: '风力',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 3DEarth 地图周围按钮组
|
||||
* @returns 返回模拟数据
|
||||
*/
|
||||
export const earth3DBtnList = [
|
||||
{
|
||||
topLevelClass: 'fixed-top',
|
||||
icon: 'el-icon-s-marketing',
|
||||
label: '环境监测',
|
||||
type: 0,
|
||||
},
|
||||
{
|
||||
topLevelClass: 'fixed-right',
|
||||
icon: 'el-icon-s-cooperation',
|
||||
label: '精准管理',
|
||||
type: 1,
|
||||
},
|
||||
{
|
||||
topLevelClass: 'fixed-bottom',
|
||||
icon: 'el-icon-s-order',
|
||||
label: '数据报表',
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
topLevelClass: 'fixed-left',
|
||||
icon: 'el-icon-s-claim',
|
||||
label: '产品追溯',
|
||||
type: 3,
|
||||
},
|
||||
];
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<div class="flex-title">天气预报</div>
|
||||
<div class="flex-content">
|
||||
<div class="sky">
|
||||
<i class="sky-left el-icon-cloudy-and-sunny"></i>
|
||||
<SvgIcon name="elementSunny" class="sky-left" />
|
||||
<div class="sky-center">
|
||||
<div class="mb2">
|
||||
<span>多云转晴</span>
|
||||
@ -30,7 +30,7 @@
|
||||
<div>{{ v.v1 }}</div>
|
||||
<div v-if="v.type === 'title'">{{ v.v2 }}</div>
|
||||
<div v-else>
|
||||
<i :class="v.v2"></i>
|
||||
<SvgIcon :name="v.v2" />
|
||||
</div>
|
||||
<div>{{ v.v3 }}</div>
|
||||
<div class="tip">{{ v.v5 }}</div>
|
||||
@ -46,23 +46,23 @@
|
||||
<div class="flex-content flex-content-overflow">
|
||||
<div class="d-states">
|
||||
<div class="d-states-item">
|
||||
<i class="el-icon-odometer i-bg1"></i>
|
||||
<SvgIcon name="elementOdometer" class="i-bg1" />
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">设备</div>
|
||||
<div class="d-states-item-label">园区设备数</div>
|
||||
<div class="d-states-item-value">99</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-states-item">
|
||||
<i class="el-icon-first-aid-kit i-bg2"></i>
|
||||
<SvgIcon name="elementFirstAidKit" class="i-bg2" />
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">预警</div>
|
||||
<div class="d-states-item-label">预警设备数</div>
|
||||
<div class="d-states-item-value">10</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-states-item">
|
||||
<i class="el-icon-video-play i-bg3"></i>
|
||||
<SvgIcon name="elementVideoPlay" class="i-bg3" />
|
||||
<div class="d-states-flex">
|
||||
<div class="d-states-item-label">运行</div>
|
||||
<div class="d-states-item-label">运行设备数</div>
|
||||
<div class="d-states-item-value">20</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -202,12 +202,12 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, onMounted, getCurrentInstance, watch, nextTick } from 'vue';
|
||||
import { toRefs, reactive, computed, onMounted, getCurrentInstance, watch, nextTick, onActivated } from 'vue';
|
||||
import { useStore } from '/@/store/index';
|
||||
import ChartHead from '/@/views/chart/head.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-wordcloud';
|
||||
import { skyList, dBtnList, chartData4List, earth3DBtnList } from '/@/views/chart/chart';
|
||||
import { skyList, dBtnList, chartData4List } from '/@/views/chart/chart';
|
||||
export default {
|
||||
name: 'chartIndex',
|
||||
components: { ChartHead },
|
||||
@ -219,14 +219,18 @@ export default {
|
||||
skyList,
|
||||
dBtnList,
|
||||
chartData4List,
|
||||
earth3DBtnList,
|
||||
myCharts: [],
|
||||
});
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
|
||||
if (isTagsViewCurrenFull) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// 初始化中间图表1
|
||||
const initChartsCenterOne = () => {
|
||||
@ -440,13 +444,17 @@ export default {
|
||||
state.myCharts.push(myChart);
|
||||
};
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResize = () => {
|
||||
window.addEventListener('resize', () => {
|
||||
const initEchartsResizeFun = () => {
|
||||
nextTick(() => {
|
||||
for (let i = 0; i < state.myCharts.length; i++) {
|
||||
state.myCharts[i].resize();
|
||||
}
|
||||
});
|
||||
};
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResize = () => {
|
||||
window.addEventListener('resize', initEchartsResizeFun);
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initChartsCenterOne();
|
||||
@ -456,15 +464,15 @@ export default {
|
||||
initChartsInvestment();
|
||||
initEchartsResize();
|
||||
});
|
||||
// 由于页面缓存原因，keep-alive
|
||||
onActivated(() => {
|
||||
initEchartsResizeFun();
|
||||
});
|
||||
// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
|
||||
watch(
|
||||
() => store.state.tagsViewRoutes.isTagsViewCurrenFull,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
for (let i = 0; i < state.myCharts.length; i++) {
|
||||
state.myCharts[i].resize();
|
||||
}
|
||||
});
|
||||
initEchartsResizeFun();
|
||||
}
|
||||
);
|
||||
return {
|
||||
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.error {
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
background-color: var(--el-color-white);
|
||||
display: flex;
|
||||
.error-flex {
|
||||
margin: auto;
|
||||
@ -59,17 +59,17 @@ export default {
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.left-item-num {
|
||||
color: #d6e0f6;
|
||||
color: var(--el-color-info);
|
||||
font-size: 55px;
|
||||
}
|
||||
.left-item-title {
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
color: var(--el-text-color-primary);
|
||||
margin: 15px 0 5px 0;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.left-item-msg {
|
||||
color: #c0bebe;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
margin-bottom: 30px;
|
||||
animation-delay: 0.2s;
|
||||
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.error {
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
background-color: var(--el-color-white);
|
||||
display: flex;
|
||||
.error-flex {
|
||||
margin: auto;
|
||||
@ -57,17 +57,17 @@ export default {
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.left-item-num {
|
||||
color: #d6e0f6;
|
||||
color: var(--el-color-info);
|
||||
font-size: 55px;
|
||||
}
|
||||
.left-item-title {
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
color: var(--el-text-color-primary);
|
||||
margin: 15px 0 5px 0;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.left-item-msg {
|
||||
color: #c0bebe;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
margin-bottom: 30px;
|
||||
animation-delay: 0.2s;
|
||||
|
||||
@ -23,7 +23,12 @@
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="small" icon="el-icon-refresh-right" @click="refreshCurrent">重置/刷新数值 </el-button>
|
||||
<el-button type="primary" size="small" @click="refreshCurrent">
|
||||
<el-icon>
|
||||
<elementRefreshRight />
|
||||
</el-icon>
|
||||
重置/刷新数值
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -110,7 +115,7 @@ export default {
|
||||
.countup-card-item {
|
||||
width: 100%;
|
||||
height: 103px;
|
||||
background: gray;
|
||||
background: var(--el-text-color-secondary);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
@ -140,7 +145,7 @@ export default {
|
||||
}
|
||||
.countup-card-item-flex {
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
color: var(--color-whites);
|
||||
.countup-card-item-title,
|
||||
.countup-card-item-tip {
|
||||
font-size: 13px;
|
||||
|
||||
@ -11,7 +11,12 @@
|
||||
<div class="mb15 mt15">
|
||||
<img class="cropper-img" :src="cropperImg" />
|
||||
</div>
|
||||
<el-button type="primary" icon="el-icon-crop" size="small" @click="onCropperDialogOpen">更换头像</el-button>
|
||||
<el-button type="primary" size="small" @click="onCropperDialogOpen">
|
||||
<el-icon>
|
||||
<elementCrop />
|
||||
</el-icon>
|
||||
更换头像
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<CropperDialog ref="cropperDialogRef" />
|
||||
|
||||
107
src/views/fun/dragVerify/index.vue
Normal file
107
src/views/fun/dragVerify/index.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="dragVerify-container">
|
||||
<el-card shadow="hover" header="验证器：基本滑块验证组件">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<DragVerify
|
||||
v-model:isPassing="isPassingOne"
|
||||
text="请按住滑块拖动"
|
||||
successText="验证通过"
|
||||
handlerIcon="el-icon-d-arrow-right"
|
||||
successIcon="el-icon-circle-check"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="验证器：图片滑块组件" class="mt15">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<DragVerifyImg
|
||||
:imgsrc="imgTwo"
|
||||
v-model:isPassing="isPassingTwo"
|
||||
:showRefresh="true"
|
||||
text="请按住滑块拖动"
|
||||
successText="验证通过"
|
||||
handlerIcon="el-icon-d-arrow-right"
|
||||
successIcon="el-icon-circle-check"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="验证器：图片滑块组件(拼图)" class="mt15">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<DragVerifyImgChip
|
||||
:imgsrc="imgThree"
|
||||
v-model:isPassing="isPassingThree"
|
||||
:showRefresh="true"
|
||||
text="请按住滑块拖动"
|
||||
successText="验证通过"
|
||||
handlerIcon="el-icon-d-arrow-right"
|
||||
successIcon="el-icon-circle-check"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="验证器：旋转图片滑块组件" class="mt15">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<DragVerifyImgRotate
|
||||
:imgsrc="imgThree"
|
||||
v-model:isPassing="isPassingFour"
|
||||
:showRefresh="true"
|
||||
text="请按住滑块拖动"
|
||||
successText="验证通过"
|
||||
handlerIcon="el-icon-d-arrow-right"
|
||||
successIcon="el-icon-circle-check"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from 'vue';
|
||||
// 基本滑块验证组件
|
||||
import DragVerify from '/@/components/dragVerify/dragVerify.vue';
|
||||
// 图片滑块组件
|
||||
import DragVerifyImg from '/@/components/dragVerify/dragVerifyImg.vue';
|
||||
// 图片滑块组件(拼图)
|
||||
import DragVerifyImgChip from '/@/components/dragVerify/dragVerifyImgChip.vue';
|
||||
// 旋转图片滑块组件
|
||||
import DragVerifyImgRotate from '/@/components/dragVerify/dragVerifyImgRotate.vue';
|
||||
export default {
|
||||
name: 'funDragVerify',
|
||||
components: {
|
||||
DragVerify,
|
||||
DragVerifyImg,
|
||||
DragVerifyImgChip,
|
||||
DragVerifyImgRotate,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
isPassingOne: false,
|
||||
isPassingTwo: false,
|
||||
isPassingThree: false,
|
||||
isPassingFour: false,
|
||||
imgTwo: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
|
||||
imgThree: 'https://img1.baidu.com/it/u=2813520958,2218166536&fm=26&fmt=auto&gp=0.jpg',
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -23,8 +23,13 @@ export default {
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
|
||||
if (isTagsViewCurrenFull) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// echartsMap 将坐标信息和对应物理量的值合在一起
|
||||
const convertData = (data) => {
|
||||
|
||||
@ -55,7 +55,7 @@ export default {
|
||||
.grid-layout-container {
|
||||
.vue-grid-item {
|
||||
background: var(--color-primary);
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
|
||||
的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
|
||||
leftIcon="iconfont icon-tongzhi2"
|
||||
rightIcon="el-icon-arrow-right"
|
||||
rightIcon="elementArrowRight"
|
||||
background="#ecf5ff"
|
||||
color="#409eff"
|
||||
/>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="printRref">
|
||||
<div id="printRef">
|
||||
<el-card shadow="hover" header="打印演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
|
||||
@ -7,7 +7,10 @@
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<el-button @click="onPrintJs" size="small" type="primary" icon="iconfont icon-dayin">点击打印演示</el-button>
|
||||
<el-button @click="onPrintJs" size="small" type="primary">
|
||||
<SvgIcon name="iconfont icon-dayin" />
|
||||
点击打印演示
|
||||
</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
@ -22,7 +25,7 @@ export default {
|
||||
// 打印点击
|
||||
const onPrintJs = () => {
|
||||
printJs({
|
||||
printable: 'printRref',
|
||||
printable: 'printRef',
|
||||
type: 'html',
|
||||
css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', 'https://unpkg.com/element-plus/lib/theme-chalk/index.css'],
|
||||
scanStyles: false,
|
||||
|
||||
@ -11,7 +11,12 @@
|
||||
<div class="mb30 mt30 qrcode-img">
|
||||
<div class="qrcode" ref="qrcodeRef"></div>
|
||||
</div>
|
||||
<el-button type="primary" icon="el-icon-refresh" size="small" @click="onInitQrcode">重新生成</el-button>
|
||||
<el-button type="primary" size="small" @click="onInitQrcode">
|
||||
<el-icon>
|
||||
<elementRefresh />
|
||||
</el-icon>
|
||||
重新生成
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,10 @@
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<ScreenShort ref="screenShortRef" @getBase64="onGetBase64" />
|
||||
<el-button type="primary" size="small" @click="onScreenShortClick" icon="el-icon-crop">点击截屏</el-button>
|
||||
<el-button type="primary" size="small" @click="onScreenShortClick">
|
||||
<SvgIcon name="elementCrop" />
|
||||
点击截屏
|
||||
</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="selector-container">
|
||||
<el-card shadow="hover" header="图标选择器(宽度自动)：简单版本">
|
||||
<el-card shadow="hover" header="图标选择器(宽度自动)：">
|
||||
<IconSelector @get="onGetIcon" @clear="onClearIcon" v-model="modelIcon" />
|
||||
</el-card>
|
||||
|
||||
@ -40,7 +40,7 @@ export default defineComponent({
|
||||
a2: '输入框前置内容，只能字体图标',
|
||||
a3: 'string',
|
||||
a4: '',
|
||||
a5: 'el-icon-thumb',
|
||||
a5: 'elementPointer',
|
||||
},
|
||||
{
|
||||
a1: 'placeholder',
|
||||
@ -67,7 +67,7 @@ export default defineComponent({
|
||||
a1: 'type',
|
||||
a2: 'icon 图标类型',
|
||||
a3: 'string',
|
||||
a4: 'ali / ele / awe',
|
||||
a4: 'ali / ele / awe / all',
|
||||
a5: 'ele',
|
||||
},
|
||||
{
|
||||
|
||||
@ -9,27 +9,52 @@
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="small" icon="el-icon-refresh-right" @click="refreshCurrentTagsView">刷新当前页 </el-button>
|
||||
<el-button type="primary" size="small" @click="refreshCurrentTagsView">
|
||||
<el-icon>
|
||||
<elementRefreshRight />
|
||||
</el-icon>
|
||||
刷新当前页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="small" icon="el-icon-close" @click="closeCurrentTagsView">关闭当前页</el-button>
|
||||
<el-button type="info" size="small" @click="closeCurrentTagsView">
|
||||
<el-icon>
|
||||
<elementClose />
|
||||
</el-icon>
|
||||
关闭当前页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="warning" size="small" icon="el-icon-circle-close" @click="closeOtherTagsView">关闭其它 </el-button>
|
||||
<el-button type="warning" size="small" @click="closeOtherTagsView">
|
||||
<el-icon>
|
||||
<elementCircleClose />
|
||||
</el-icon>
|
||||
关闭其它
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="small" icon="el-icon-folder-delete" @click="closeAllTagsView">全部关闭 </el-button>
|
||||
<el-button type="danger" size="small" @click="closeAllTagsView">
|
||||
<el-icon>
|
||||
<elementFolderDelete />
|
||||
</el-icon>
|
||||
全部关闭
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="small" icon="el-icon-full-screen" @click="openCurrenFullscreen">当前页全屏 </el-button>
|
||||
<el-button type="success" size="small" @click="openCurrenFullscreen">
|
||||
<el-icon>
|
||||
<elementFullScreen />
|
||||
</el-icon>
|
||||
当前页全屏
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,23 +76,23 @@ export default {
|
||||
// 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
|
||||
// 1、刷新当前 tagsView
|
||||
const refreshCurrentTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 0, ...route }));
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 0, ...route }));
|
||||
};
|
||||
// 2、关闭当前 tagsView
|
||||
const closeCurrentTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 1, ...route }));
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
|
||||
};
|
||||
// 3、关闭其它 tagsView
|
||||
const closeOtherTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 2, ...route }));
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 2, ...route }));
|
||||
};
|
||||
// 4、关闭全部 tagsView
|
||||
const closeAllTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 3, ...route }));
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 3, ...route }));
|
||||
};
|
||||
// 5、开启当前页面全屏
|
||||
const openCurrenFullscreen = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { id: 4, ...route }));
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 4, ...route }));
|
||||
};
|
||||
return {
|
||||
refreshCurrentTagsView,
|
||||
|
||||
@ -23,8 +23,13 @@ export default {
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
|
||||
if (isTagsViewCurrenFull) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// 初始化数据
|
||||
const initEchartsTree = () => {
|
||||
|
||||
@ -7,34 +7,23 @@
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<div id="wangeditor"></div>
|
||||
<Editor :is-disable="false" v-model="editorVal" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted } from 'vue';
|
||||
import wangeditor from 'wangeditor';
|
||||
import Editor from '/@/components/editor/index.vue';
|
||||
export default {
|
||||
name: 'funWangEditor',
|
||||
components: { Editor },
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
// 初始化富文本
|
||||
// https://doc.wangeditor.com/
|
||||
const initWangeditor = () => {
|
||||
const editor = new wangeditor('#wangeditor');
|
||||
editor.config.placeholder = '请输入内容';
|
||||
editor.config.onchange = (html: string) => {
|
||||
console.log(html);
|
||||
// console.log(editor.txt.html());
|
||||
// console.log(editor.txt.text());
|
||||
};
|
||||
editor.create();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initWangeditor();
|
||||
const state = reactive({
|
||||
editorVal: '',
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
</div>
|
||||
<div class="home-dynamic-item-right">
|
||||
<div class="home-dynamic-item-right-title mb5">
|
||||
<i class="el-icon-s-comment"></i>
|
||||
<SvgIcon name="elementComment" />
|
||||
<span>{{ v.title }}</span>
|
||||
</div>
|
||||
<div class="home-dynamic-item-right-label">{{ v.label }}</div>
|
||||
@ -96,7 +96,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, nextTick, computed, getCurrentInstance, watch } from 'vue';
|
||||
import { toRefs, reactive, onMounted, nextTick, computed, getCurrentInstance, watch, onActivated } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { CountUp } from 'countup.js';
|
||||
import { formatAxis } from '/@/utils/formatTime';
|
||||
@ -290,13 +290,17 @@ export default {
|
||||
state.myCharts.push(myChart);
|
||||
};
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResize = () => {
|
||||
window.addEventListener('resize', () => {
|
||||
const initEchartsResizeFun = () => {
|
||||
nextTick(() => {
|
||||
for (let i = 0; i < state.myCharts.length; i++) {
|
||||
state.myCharts[i].resize();
|
||||
}
|
||||
});
|
||||
};
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResize = () => {
|
||||
window.addEventListener('resize', initEchartsResizeFun);
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initNumCountUp();
|
||||
@ -304,15 +308,15 @@ export default {
|
||||
initHomeOvertime();
|
||||
initEchartsResize();
|
||||
});
|
||||
// 由于页面缓存原因，keep-alive
|
||||
onActivated(() => {
|
||||
initEchartsResizeFun();
|
||||
});
|
||||
// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
|
||||
watch(
|
||||
() => store.state.tagsViewRoutes.isTagsViewCurrenFull,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
for (let i = 0; i < state.myCharts.length; i++) {
|
||||
state.myCharts[i].resize();
|
||||
}
|
||||
});
|
||||
initEchartsResizeFun();
|
||||
}
|
||||
);
|
||||
return {
|
||||
@ -330,7 +334,7 @@ export default {
|
||||
.home-card-item {
|
||||
width: 100%;
|
||||
height: 103px;
|
||||
background: gray;
|
||||
background: var(--el-text-color-secondary);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
@ -360,7 +364,7 @@ export default {
|
||||
}
|
||||
.home-card-item-flex {
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
color: var(--color-whites);
|
||||
.home-card-item-title,
|
||||
.home-card-item-tip {
|
||||
font-size: 13px;
|
||||
@ -374,8 +378,8 @@ export default {
|
||||
}
|
||||
}
|
||||
.home-card-first {
|
||||
background: white;
|
||||
border: 1px solid #ebeef5;
|
||||
background: var(--el-color-white);
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
@ -388,9 +392,12 @@ export default {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.home-card-first-right-title {
|
||||
color: var(--el-color-black);
|
||||
}
|
||||
.home-card-first-right-msg {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -404,6 +411,7 @@ export default {
|
||||
margin: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -433,12 +441,12 @@ export default {
|
||||
}
|
||||
.home-dynamic-item-left-time2 {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
.home-dynamic-item-line {
|
||||
height: 60px;
|
||||
border-right: 2px dashed #dfdfdf;
|
||||
border-right: 2px dashed var(--el-border-color-light, #ebeef5);
|
||||
margin: 0 20px;
|
||||
position: relative;
|
||||
i {
|
||||
@ -448,7 +456,7 @@ export default {
|
||||
top: 1px;
|
||||
left: -6px;
|
||||
transform: rotate(46deg);
|
||||
background: white;
|
||||
background: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
.home-dynamic-item-right {
|
||||
@ -456,7 +464,7 @@ export default {
|
||||
.home-dynamic-item-right-title {
|
||||
i {
|
||||
margin-right: 5px;
|
||||
border: 1px solid #dfdfdf;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
@ -467,7 +475,7 @@ export default {
|
||||
}
|
||||
.home-dynamic-item-right-label {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,12 @@
|
||||
type="warning"
|
||||
:closable="false"
|
||||
></el-alert>
|
||||
<el-button type="primary" size="small" class="mt15" icon="el-icon-position" @click="onGoToFrontEndPage">立即前往前端控制路由 </el-button>
|
||||
<el-button type="primary" size="small" class="mt15" @click="onGoToFrontEndPage">
|
||||
<el-icon>
|
||||
<elementPosition />
|
||||
</el-icon>
|
||||
立即前往前端控制路由
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -8,28 +8,48 @@
|
||||
<Auth :value="'btn.add'">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
|
||||
<el-button type="primary" size="small">
|
||||
<el-icon>
|
||||
<elementDocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auth>
|
||||
<Auth :value="'btn.edit'">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||||
<el-button type="info" size="small">
|
||||
<el-icon>
|
||||
<elementEdit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auth>
|
||||
<Auth :value="'btn.del'">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
|
||||
<el-button type="danger" size="small">
|
||||
<el-icon>
|
||||
<elementDelete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auth>
|
||||
<Auth :value="'btn.link'">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
|
||||
<el-button type="success" size="small">
|
||||
<el-icon>
|
||||
<elementLink />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auth>
|
||||
@ -40,28 +60,48 @@
|
||||
<Auths :value="['btn.addsss', 'btn.edit', 'btn.delsss', 'btn.linksss']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
|
||||
<el-button type="primary" size="small">
|
||||
<el-icon>
|
||||
<elementDocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auths>
|
||||
<Auths :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||||
<el-button type="info" size="small">
|
||||
<el-icon>
|
||||
<elementEdit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auths>
|
||||
<Auths :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
|
||||
<el-button type="danger" size="small">
|
||||
<el-icon>
|
||||
<elementDelete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auths>
|
||||
<Auths :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
|
||||
<el-button type="success" size="small">
|
||||
<el-icon>
|
||||
<elementLink />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</Auths>
|
||||
@ -72,28 +112,48 @@
|
||||
<AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
|
||||
<el-button type="primary" size="small">
|
||||
<el-icon>
|
||||
<elementDocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</AuthAll>
|
||||
<AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||||
<el-button type="info" size="small">
|
||||
<el-icon>
|
||||
<elementEdit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</AuthAll>
|
||||
<AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
|
||||
<el-button type="danger" size="small">
|
||||
<el-icon>
|
||||
<elementDelete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</AuthAll>
|
||||
<AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
|
||||
<el-button type="success" size="small">
|
||||
<el-icon>
|
||||
<elementLink />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</AuthAll>
|
||||
@ -106,22 +166,42 @@
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item" v-auth="'btn.add'">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
|
||||
<el-button type="primary" size="small">
|
||||
<el-icon>
|
||||
<elementDocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth="'btn.edit'">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||||
<el-button type="info" size="small">
|
||||
<el-icon>
|
||||
<elementEdit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth="'btn.del'">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
|
||||
<el-button type="danger" size="small">
|
||||
<el-icon>
|
||||
<elementDelete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth="'btn.link'">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
|
||||
<el-button type="success" size="small">
|
||||
<el-icon>
|
||||
<elementLink />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -130,22 +210,42 @@
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item" v-auths="['btn.addsss', 'btn.edit', 'btn.delsss', 'btn.linksss']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
|
||||
<el-button type="primary" size="small">
|
||||
<el-icon>
|
||||
<elementDocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||||
<el-button type="info" size="small">
|
||||
<el-icon>
|
||||
<elementEdit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
|
||||
<el-button type="danger" size="small">
|
||||
<el-icon>
|
||||
<elementDelete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
|
||||
<el-button type="success" size="small">
|
||||
<el-icon>
|
||||
<elementLink />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -154,22 +254,42 @@
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="small" icon="el-icon-document-add">新增 </el-button>
|
||||
<el-button type="primary" size="small">
|
||||
<el-icon>
|
||||
<elementDocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="small" icon="el-icon-edit-outline">编辑</el-button>
|
||||
<el-button type="info" size="small">
|
||||
<el-icon>
|
||||
<elementEdit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="small" icon="el-icon-delete">删除 </el-button>
|
||||
<el-button type="danger" size="small">
|
||||
<el-icon>
|
||||
<elementDelete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="small" icon="el-icon-link">跳转 </el-button>
|
||||
<el-button type="success" size="small">
|
||||
<el-icon>
|
||||
<elementLink />
|
||||
</el-icon>
|
||||
跳转
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -181,17 +301,32 @@
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="small" icon="el-icon-document-add" @click="onAuthClick">新增 </el-button>
|
||||
<el-button type="primary" size="small" @click="onAuthClick">
|
||||
<el-icon>
|
||||
<elementDocumentAdd />
|
||||
</el-icon>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="small" icon="el-icon-edit-outline" @click="onAuthsClick">编辑</el-button>
|
||||
<el-button type="info" size="small" @click="onAuthsClick">
|
||||
<el-icon>
|
||||
<elementEdit />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="small" icon="el-icon-delete" @click="onAuthAllClick">删除 </el-button>
|
||||
<el-button type="danger" size="small" @click="onAuthAllClick">
|
||||
<el-icon>
|
||||
<elementDelete />
|
||||
</el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
:closable="false"
|
||||
></el-alert>
|
||||
<el-alert
|
||||
:title="`当前用户页面权限：[${getAuthPageList}]，当前用户按钮权限：[${getAuthBtnList}]`"
|
||||
:title="`当前用户页面权限：[${getRoles}]，当前用户按钮权限：[${getAuthBtnList}]`"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mt15"
|
||||
@ -36,8 +36,8 @@ export default {
|
||||
userAuth: '',
|
||||
});
|
||||
// 获取用户页面权限信息
|
||||
const getAuthPageList = computed(() => {
|
||||
return store.state.userInfos.userInfos.authPageList;
|
||||
const getRoles = computed(() => {
|
||||
return store.state.userInfos.userInfos.roles;
|
||||
});
|
||||
// 获取用户按钮权限信息
|
||||
const getAuthBtnList = computed(() => {
|
||||
@ -45,27 +45,28 @@ export default {
|
||||
});
|
||||
// 初始化用户权限
|
||||
const initUserAuth = () => {
|
||||
state.userAuth = store.state.userInfos.userInfos.authPageList[0];
|
||||
state.userAuth = store.state.userInfos.userInfos.roles[0];
|
||||
};
|
||||
// 用户权限改变时
|
||||
const onRadioChange = async () => {
|
||||
// 模拟数据
|
||||
resetRoute();
|
||||
let defaultAuthPageList: Array<string> = [];
|
||||
let defaultRoles: Array<string> = [];
|
||||
let defaultAuthBtnList: Array<string> = [];
|
||||
// admin 页面权限标识，对应路由 meta.auth，用于控制路由的显示/隐藏
|
||||
let adminAuthPageList: Array<string> = ['admin'];
|
||||
// admin 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
|
||||
let adminRoles: Array<string> = ['admin'];
|
||||
// admin 按钮权限标识
|
||||
let adminAuthBtnList: Array<string> = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
|
||||
// test 页面权限标识，对应路由 meta.auth，用于控制路由的显示/隐藏
|
||||
let testAuthPageList: Array<string> = ['test'];
|
||||
// test 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
|
||||
let testRoles: Array<string> = ['common'];
|
||||
// test 按钮权限标识
|
||||
let testAuthBtnList: Array<string> = ['btn.add', 'btn.link'];
|
||||
// 不同用户模拟不同的用户权限
|
||||
if (state.userAuth === 'admin') {
|
||||
defaultAuthPageList = adminAuthPageList;
|
||||
defaultRoles = adminRoles;
|
||||
defaultAuthBtnList = adminAuthBtnList;
|
||||
} else {
|
||||
defaultAuthPageList = testAuthPageList;
|
||||
defaultRoles = testRoles;
|
||||
defaultAuthBtnList = testAuthBtnList;
|
||||
}
|
||||
const userInfos = {
|
||||
@ -75,7 +76,7 @@ export default {
|
||||
? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
|
||||
: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
|
||||
time: new Date().getTime(),
|
||||
authPageList: defaultAuthPageList,
|
||||
roles: defaultRoles,
|
||||
authBtnList: defaultAuthBtnList,
|
||||
};
|
||||
Session.set('userInfo', userInfos);
|
||||
@ -88,7 +89,7 @@ export default {
|
||||
initUserAuth();
|
||||
});
|
||||
return {
|
||||
getAuthPageList,
|
||||
getRoles,
|
||||
getAuthBtnList,
|
||||
onRadioChange,
|
||||
...toRefs(state),
|
||||
|
||||
@ -1,24 +1,22 @@
|
||||
<template>
|
||||
<el-form class="login-content-form">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
type="text"
|
||||
:placeholder="$t('message.account.accountPlaceholder1')"
|
||||
prefix-icon="el-icon-user"
|
||||
v-model="ruleForm.userName"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
>
|
||||
<el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.userName" clearable autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><elementUser /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
:type="isShowPassword ? 'text' : 'password'"
|
||||
:placeholder="$t('message.account.accountPlaceholder2')"
|
||||
prefix-icon="el-icon-lock"
|
||||
v-model="ruleForm.password"
|
||||
autocomplete="off"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><elementUnlock /></el-icon>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<i
|
||||
class="iconfont el-input__icon login-content-password"
|
||||
@ -36,11 +34,14 @@
|
||||
type="text"
|
||||
maxlength="4"
|
||||
:placeholder="$t('message.account.accountPlaceholder3')"
|
||||
prefix-icon="el-icon-position"
|
||||
v-model="ruleForm.code"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><elementPosition /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="login-content-code">
|
||||
@ -68,7 +69,7 @@ import { useStore } from '/@/store/index';
|
||||
import { Session } from '/@/utils/storage';
|
||||
import { formatAxis } from '/@/utils/formatTime';
|
||||
export default defineComponent({
|
||||
name: 'login',
|
||||
name: 'loginAccount',
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
@ -92,23 +93,24 @@ export default defineComponent({
|
||||
});
|
||||
// 登录
|
||||
const onSignIn = async () => {
|
||||
// 模拟数据
|
||||
state.loading.signIn = true;
|
||||
let defaultAuthPageList: Array<string> = [];
|
||||
let defaultRoles: Array<string> = [];
|
||||
let defaultAuthBtnList: Array<string> = [];
|
||||
// admin 页面权限标识，对应路由 meta.auth，用于控制路由的显示/隐藏
|
||||
let adminAuthPageList: Array<string> = ['admin'];
|
||||
// admin 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
|
||||
let adminRoles: Array<string> = ['admin'];
|
||||
// admin 按钮权限标识
|
||||
let adminAuthBtnList: Array<string> = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
|
||||
// test 页面权限标识，对应路由 meta.auth，用于控制路由的显示/隐藏
|
||||
let testAuthPageList: Array<string> = ['test'];
|
||||
// test 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
|
||||
let testRoles: Array<string> = ['common'];
|
||||
// test 按钮权限标识
|
||||
let testAuthBtnList: Array<string> = ['btn.add', 'btn.link'];
|
||||
// 不同用户模拟不同的用户权限
|
||||
if (state.ruleForm.userName === 'admin') {
|
||||
defaultAuthPageList = adminAuthPageList;
|
||||
defaultRoles = adminRoles;
|
||||
defaultAuthBtnList = adminAuthBtnList;
|
||||
} else {
|
||||
defaultAuthPageList = testAuthPageList;
|
||||
defaultRoles = testRoles;
|
||||
defaultAuthBtnList = testAuthBtnList;
|
||||
}
|
||||
// 用户信息模拟数据
|
||||
@ -119,7 +121,7 @@ export default defineComponent({
|
||||
? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
|
||||
: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
|
||||
time: new Date().getTime(),
|
||||
authPageList: defaultAuthPageList,
|
||||
roles: defaultRoles,
|
||||
authBtnList: defaultAuthBtnList,
|
||||
};
|
||||
// 存储 token 到浏览器缓存
|
||||
|
||||
@ -1,28 +1,20 @@
|
||||
<template>
|
||||
<el-form class="login-content-form">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
type="text"
|
||||
:placeholder="$t('message.mobile.placeholder1')"
|
||||
prefix-icon="iconfont icon-dianhua"
|
||||
v-model="ruleForm.userName"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
>
|
||||
<el-input type="text" :placeholder="$t('message.mobile.placeholder1')" v-model="ruleForm.userName" clearable autocomplete="off">
|
||||
<template #prefix>
|
||||
<i class="iconfont icon-dianhua el-input__icon"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-row :gutter="15">
|
||||
<el-col :span="16">
|
||||
<el-input
|
||||
type="text"
|
||||
maxlength="4"
|
||||
:placeholder="$t('message.mobile.placeholder2')"
|
||||
prefix-icon="el-icon-position"
|
||||
v-model="ruleForm.code"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
<el-input type="text" maxlength="4" :placeholder="$t('message.mobile.placeholder2')" v-model="ruleForm.code" clearable autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><elementPosition /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button class="login-content-code">{{ $t('message.mobile.codeText') }}</el-button>
|
||||
@ -40,7 +32,7 @@
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
name: 'login',
|
||||
name: 'loginMobile',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
@ -58,9 +50,6 @@ export default defineComponent({
|
||||
<style scoped lang="scss">
|
||||
.login-content-form {
|
||||
margin-top: 20px;
|
||||
::v-deep(.el-input__icon) {
|
||||
display: inline-block;
|
||||
}
|
||||
.login-content-code {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
import { toRefs, reactive, defineComponent, onMounted, getCurrentInstance } from 'vue';
|
||||
import QRCode from 'qrcodejs2-fixes';
|
||||
export default defineComponent({
|
||||
name: 'login11',
|
||||
name: 'loginScan',
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const state = reactive({});
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
<Scan v-else />
|
||||
<div class="login-content-main-sacn" @click="isScan = !isScan">
|
||||
<i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
|
||||
<div class="login-content-main-sacn-delta"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,7 +45,7 @@ import Mobile from '/@/views/login/component/mobile.vue';
|
||||
import Scan from '/@/views/login/component/scan.vue';
|
||||
import { useStore } from '/@/store/index';
|
||||
export default {
|
||||
name: 'login',
|
||||
name: 'loginIndex',
|
||||
components: { Account, Mobile, Scan },
|
||||
setup() {
|
||||
const store = useStore();
|
||||
@ -114,6 +115,9 @@ export default {
|
||||
letter-spacing: 4px;
|
||||
margin: 15px 0 30px;
|
||||
white-space: nowrap;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.login-content-main-sacn {
|
||||
@ -124,18 +128,16 @@ export default {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: all ease 0.3s;
|
||||
&::before {
|
||||
content: '';
|
||||
&-delta {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 50px solid #ffffff;
|
||||
border-right: 50px solid transparent;
|
||||
width: 35px;
|
||||
height: 70px;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
right: 21px;
|
||||
background: var(--el-color-white);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@ -143,14 +145,13 @@ export default {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
i {
|
||||
content: '';
|
||||
width: 48px;
|
||||
width: 47px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
font-size: 48px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
font-size: 47px;
|
||||
z-index: 1;
|
||||
right: 2px;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -163,7 +164,7 @@ export default {
|
||||
transform: translateX(-50%);
|
||||
bottom: 30px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
color: var(--color-whites);
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
.login-copyright-company {
|
||||
|
||||
@ -1,15 +1,23 @@
|
||||
<template>
|
||||
<div class="drag-container">
|
||||
<el-card shadow="hover" header="拖动指令效果（v-drag）作用于 Dialog 对话框">
|
||||
<el-button type="primary" @click="dialogVisible = true" size="small" icon="el-icon-thumb">点击打开 Dialog</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = true" size="small">
|
||||
<el-icon>
|
||||
<elementPointer />
|
||||
</el-icon>
|
||||
点击打开 Dialog
|
||||
</el-button>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="自定义div" class="mt15">
|
||||
<div class="drag-dom">
|
||||
<div class="drag-header">
|
||||
<el-button type="success" size="small" icon="el-icon-thumb" v-drag="['.drag-container .drag-dom', '.drag-container .drag-header']"
|
||||
>按住进行拖动测试</el-button
|
||||
>
|
||||
<el-button type="success" size="small" v-drag="['.drag-container .drag-dom', '.drag-container .drag-header']">
|
||||
<el-icon>
|
||||
<elementPointer />
|
||||
</el-icon>
|
||||
按住进行拖动测试
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
175
src/views/pages/dynamicForm/index.vue
Normal file
175
src/views/pages/dynamicForm/index.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="dynamic-form-container">
|
||||
<el-card shadow="hover" header="动态复杂表单">
|
||||
<el-form :model="form" ref="formRulesOneRef" size="small" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col
|
||||
:xs="val.xs"
|
||||
:sm="val.sm"
|
||||
:md="val.md"
|
||||
:lg="val.md"
|
||||
:xl="val.xl"
|
||||
class="mb20"
|
||||
v-show="val.isShow"
|
||||
v-for="(val, key) in formData"
|
||||
:key="key"
|
||||
>
|
||||
<template v-if="val.type !== ''">
|
||||
<el-form-item
|
||||
:label="val.label"
|
||||
:prop="val.prop"
|
||||
:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
|
||||
v-if="val.type !== ''"
|
||||
>
|
||||
<el-input
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
clearable
|
||||
v-if="val.type === 'input'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
></el-input>
|
||||
<el-date-picker
|
||||
v-model="form[val.prop]"
|
||||
type="date"
|
||||
:placeholder="val.placeholder"
|
||||
v-else-if="val.type === 'date'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-select
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
v-else-if="val.type === 'select'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
>
|
||||
<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
clearable
|
||||
v-if="val.type === 'textarea'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-row :gutter="35" v-for="(v, k) in form.list" :key="k">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="年度" :prop="`list[${k}].year`" :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
|
||||
<template #label>
|
||||
<el-button type="primary" circle size="mini" @click="onAddRow" v-if="k === 0">
|
||||
<el-icon>
|
||||
<elementPlus />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button type="danger" circle size="mini" @click="onDelRow(k)" v-else>
|
||||
<el-icon>
|
||||
<elementDelete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<span class="ml10">年度</span>
|
||||
</template>
|
||||
<el-input v-model="form.list[k].year" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="月度" :prop="`list[${k}].month`" :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
|
||||
<el-input v-model="form.list[k].month" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="日度" :prop="`list[${k}].day`" :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
|
||||
<el-input v-model="form.list[k].day" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-row class="flex mt15">
|
||||
<div class="flex-margin">
|
||||
<el-button size="small" @click="onResetForm">
|
||||
<el-icon>
|
||||
<elementRefreshRight />
|
||||
</el-icon>
|
||||
重置表单
|
||||
</el-button>
|
||||
<el-button size="small" type="primary" @click="onSubmitForm">
|
||||
<SvgIcon name="iconfont icon-shuxing" />
|
||||
验证表单
|
||||
</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, getCurrentInstance } from 'vue';
|
||||
import { formData } from './mock';
|
||||
export default {
|
||||
name: 'pagesDynamicForm',
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const state = reactive({
|
||||
formData,
|
||||
form: {
|
||||
name: '',
|
||||
email: '',
|
||||
autograph: '',
|
||||
occupation: '',
|
||||
list: [
|
||||
{
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
},
|
||||
],
|
||||
remarks: '',
|
||||
},
|
||||
});
|
||||
// 新增行
|
||||
const onAddRow = () => {
|
||||
state.form.list.push({
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
});
|
||||
};
|
||||
// 删除行
|
||||
const onDelRow = (k) => {
|
||||
state.form.list.splice(k, 1);
|
||||
};
|
||||
// 表单验证
|
||||
const onSubmitForm = () => {
|
||||
proxy.$refs.formRulesOneRef.validate((valid) => {
|
||||
if (valid) {
|
||||
proxy.$message.success('验证成功');
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 重置表单
|
||||
const onResetForm = () => {
|
||||
proxy.$refs.formRulesOneRef.resetFields();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {});
|
||||
return {
|
||||
onAddRow,
|
||||
onDelRow,
|
||||
onSubmitForm,
|
||||
onResetForm,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
119
src/views/pages/dynamicForm/mock.ts
Normal file
119
src/views/pages/dynamicForm/mock.ts
Normal file
@ -0,0 +1,119 @@
|
||||
// 表单数据选项(自行扩展)
|
||||
export const formData = [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name',
|
||||
placeholder: '请输入姓名',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'input',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
prop: 'email',
|
||||
placeholder: '请输入用户邮箱',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'input',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '登陆时间',
|
||||
prop: 'autograph',
|
||||
placeholder: '选择时间',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'date',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '职务',
|
||||
prop: 'occupation',
|
||||
placeholder: '请选择职务',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'select',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
options: [
|
||||
{
|
||||
label: '计算机 / 互联网 / 通信',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '生产 / 工艺 / 制造',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '医疗 / 护理 / 制药',
|
||||
value: '3',
|
||||
},
|
||||
],
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
prop: '',
|
||||
placeholder: '',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: '',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 24,
|
||||
lg: 24,
|
||||
xl: 24,
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remarks',
|
||||
placeholder: '请输入',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'textarea',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 24,
|
||||
lg: 24,
|
||||
xl: 24,
|
||||
},
|
||||
];
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="element-container">
|
||||
<el-card shadow="hover" :header="`element plus 字体图标(自动载入)：${sheetsIconList.length - 2}个`">
|
||||
<el-card shadow="hover" :header="`element plus 字体图标(自动载入，增加了 element 前缀，使用时：elementAim)：${sheetsIconList.length}个`">
|
||||
<el-row class="iconfont-row">
|
||||
<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
|
||||
<div class="iconfont-warp">
|
||||
<div class="flex-margin">
|
||||
<div class="iconfont-warp-value">
|
||||
<i :class="v"></i>
|
||||
<SvgIcon :name="v" />
|
||||
</div>
|
||||
<div class="iconfont-warp-label mt10">{{ v }}</div>
|
||||
</div>
|
||||
@ -26,9 +26,11 @@ export default {
|
||||
const state = reactive({
|
||||
sheetsIconList: [],
|
||||
});
|
||||
// 初始化获取 css 样式，获取 element plus 自带图标
|
||||
// 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 element 前缀，使用时：elementAim
|
||||
const initGetStyleSheets = () => {
|
||||
initIconfont.ele().then((res: any) => (state.sheetsIconList = res));
|
||||
initIconfont.ele().then((res: any) => {
|
||||
state.sheetsIconList = res;
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
|
||||
@ -21,8 +21,13 @@ export default {
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
|
||||
if (isTagsViewCurrenFull) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
return {
|
||||
initTagViewHeight,
|
||||
|
||||
@ -21,8 +21,13 @@ export default {
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
|
||||
if (isTagsViewCurrenFull) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
return {
|
||||
initTagViewHeight,
|
||||
|
||||
@ -145,12 +145,12 @@ export default {
|
||||
const onTableItemClick = (v: object) => {
|
||||
if (v.id === 1) {
|
||||
router.push({
|
||||
path: '/pages/filteringDetails',
|
||||
path: '/pages/filtering/details',
|
||||
query: { id: v.id },
|
||||
});
|
||||
} else {
|
||||
router.push({
|
||||
path: '/pages/filteringDetails1',
|
||||
path: '/pages/filtering/details1',
|
||||
query: { id: v.id },
|
||||
});
|
||||
}
|
||||
|
||||
@ -72,7 +72,10 @@
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="iconfont icon-biaodan">更新个人信息</el-button>
|
||||
<el-button type="primary">
|
||||
<SvgIcon name="iconfont icon-biaodan" />
|
||||
更新个人信息
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
67
src/views/pages/formRules/component/formRulesOne.vue
Normal file
67
src/views/pages/formRules/component/formRulesOne.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="form-rules-one-container">
|
||||
<el-form :model="form" :rules="rules" ref="formRulesOneRef" size="small" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入用户邮箱" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="登陆账户名" prop="autograph">
|
||||
<el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="职务" prop="occupation">
|
||||
<el-select v-model="form.occupation" placeholder="请选择职务" clearable class="w100">
|
||||
<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
|
||||
<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
|
||||
<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted } from 'vue';
|
||||
export default {
|
||||
name: 'pagesFormRulesOne',
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const state = reactive({
|
||||
form: {},
|
||||
rules: {
|
||||
name: { required: true, message: '请输入姓名', trigger: 'blur' },
|
||||
email: { required: true, message: '请输入用户邮箱', trigger: 'blur' },
|
||||
autograph: { required: true, message: '请输入登陆账户名', trigger: 'blur' },
|
||||
occupation: { required: true, message: '请选择职务', trigger: 'change' },
|
||||
},
|
||||
});
|
||||
// 赋值回显
|
||||
const initForm = () => {
|
||||
state.form = props.data;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initForm();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
49
src/views/pages/formRules/component/formRulesThree.vue
Normal file
49
src/views/pages/formRules/component/formRulesThree.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="form-rules-three-container">
|
||||
<el-form :model="form" :rules="rules" ref="formRulesThreeRef" size="small" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="创建用户" prop="createUser">
|
||||
<el-input v-model="form.createUser" placeholder="请输入创建用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="修改用户" prop="editUser">
|
||||
<el-input v-model="form.editUser" placeholder="请输入修改用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="所属用户" prop="user">
|
||||
<el-input v-model="form.user" placeholder="请输入所属用户" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="所属部门" prop="department">
|
||||
<el-input v-model="form.department" placeholder="请输入所属部门" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from 'vue';
|
||||
export default {
|
||||
name: 'pagesFormRulesThree',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
form: {},
|
||||
rules: {
|
||||
createUser: { required: true, message: '请输入创建用户', trigger: 'blur' },
|
||||
editUser: { required: true, message: '请输入修改用户', trigger: 'blur' },
|
||||
user: { required: true, message: '请输入所属用户', trigger: 'blur' },
|
||||
department: { required: true, message: '请输入所属部门', trigger: 'blur' },
|
||||
},
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user