合并dev
This commit is contained in:
gssong
commit
75f8929b50
@ -20,6 +20,8 @@ VITE_APP_PORT = 80
|
||||
|
||||
# 接口加密传输 RSA 公钥与后端解密私钥对应 如更换需前后端一同更换
|
||||
VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
|
||||
# 接口响应解密 RSA 私钥与后端加密公钥对应 如更换需前后端一同更换
|
||||
VITE_APP_RSA_PRIVATE_KEY = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3CuPiGL/LcIIm7zryCEIbl1SPzBkr75E2VMtxegyZ1lYRD+7TZGAPkvIsBcaMs6Nsy0L78n2qh+lIZMpLH8wIDAQABAkEAk82Mhz0tlv6IVCyIcw/s3f0E+WLmtPFyR9/WtV3Y5aaejUkU60JpX4m5xNR2VaqOLTZAYjW8Wy0aXr3zYIhhQQIhAMfqR9oFdYw1J9SsNc+CrhugAvKTi0+BF6VoL6psWhvbAiEAxPPNTmrkmrXwdm/pQQu3UOQmc2vCZ5tiKpW10CgJi8kCIFGkL6utxw93Ncj4exE/gPLvKcT+1Emnoox+O9kRXss5AiAMtYLJDaLEzPrAWcZeeSgSIzbL+ecokmFKSDDcRske6QIgSMkHedwND1olF8vlKsJUGK3BcdtM8w4Xq7BpSBwsloE='
|
||||
|
||||
# 客户端id
|
||||
VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
|
||||
|
||||
@ -23,6 +23,8 @@ VITE_APP_PORT = 80
|
||||
|
||||
# 接口加密传输 RSA 公钥与后端解密私钥对应 如更换需前后端一同更换
|
||||
VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
|
||||
# 接口响应解密 RSA 私钥与后端加密公钥对应 如更换需前后端一同更换
|
||||
VITE_APP_RSA_PRIVATE_KEY = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3CuPiGL/LcIIm7zryCEIbl1SPzBkr75E2VMtxegyZ1lYRD+7TZGAPkvIsBcaMs6Nsy0L78n2qh+lIZMpLH8wIDAQABAkEAk82Mhz0tlv6IVCyIcw/s3f0E+WLmtPFyR9/WtV3Y5aaejUkU60JpX4m5xNR2VaqOLTZAYjW8Wy0aXr3zYIhhQQIhAMfqR9oFdYw1J9SsNc+CrhugAvKTi0+BF6VoL6psWhvbAiEAxPPNTmrkmrXwdm/pQQu3UOQmc2vCZ5tiKpW10CgJi8kCIFGkL6utxw93Ncj4exE/gPLvKcT+1Emnoox+O9kRXss5AiAMtYLJDaLEzPrAWcZeeSgSIzbL+ecokmFKSDDcRske6QIgSMkHedwND1olF8vlKsJUGK3BcdtM8w4Xq7BpSBwsloE='
|
||||
|
||||
# 客户端id
|
||||
VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
|
||||
|
||||
27
.eslintrc.js
27
.eslintrc.js
@ -1,22 +1,37 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true
|
||||
node: true,
|
||||
es6: true
|
||||
},
|
||||
parser: 'vue-eslint-parser',
|
||||
extends: ['eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended', './.eslintrc-auto-import.json', 'plugin:prettier/recommended'],
|
||||
extends: [
|
||||
'plugin:vue/vue3-recommended',
|
||||
'./.eslintrc-auto-import.json',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'prettier',
|
||||
'plugin:prettier/recommended'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaVersion: '2020',
|
||||
sourceType: 'module',
|
||||
project: './tsconfig.*?.json',
|
||||
parser: '@typescript-eslint/parser'
|
||||
},
|
||||
plugins: ['vue', '@typescript-eslint'],
|
||||
plugins: ['vue', '@typescript-eslint', 'import', 'promise', 'node', 'prettier'],
|
||||
rules: {
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/no-unused-vars': 'off',
|
||||
'@typescript-eslint/no-this-alias': 'off',
|
||||
|
||||
// vue
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'vue/valid-define-props': 'off',
|
||||
'vue/no-v-model-argument': 'off',
|
||||
'prefer-rest-params': 'off',
|
||||
// prettier
|
||||
'prettier/prettier': 'error',
|
||||
'@typescript-eslint/ban-types': [
|
||||
'error',
|
||||
{
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -22,6 +22,7 @@ selenium-debug.log
|
||||
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
pnpm-lock.yaml
|
||||
|
||||
# 编译生成的文件
|
||||
auto-imports.d.ts
|
||||
|
||||
20
.prettierrc
Normal file
20
.prettierrc
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"printWidth": 150,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"quoteProps": "preserve",
|
||||
"jsxSingleQuote": false,
|
||||
"bracketSameLine": false,
|
||||
"trailingComma": "none",
|
||||
"bracketSpacing": true,
|
||||
"embeddedLanguageFormatting": "auto",
|
||||
"arrowParens": "always",
|
||||
"requirePragma": false,
|
||||
"insertPragma": false,
|
||||
"proseWrap": "preserve",
|
||||
"htmlWhitespaceSensitivity": "css",
|
||||
"vueIndentScriptAndStyle": false,
|
||||
"endOfLine": "auto"
|
||||
}
|
||||
102
README.md
102
README.md
@ -1,9 +1,9 @@
|
||||
## 平台简介
|
||||
|
||||
* 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [TS](https://www.typescriptlang.org/) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
|
||||
* 配套后端代码仓库地址
|
||||
* [RuoYi-Vue-Plus 5.X(注意版本号)](https://gitee.com/dromara/RuoYi-Vue-Plus)
|
||||
* [RuoYi-Cloud-Plus 2.X(注意版本号)](https://gitee.com/dromara/RuoYi-Cloud-Plus)
|
||||
- 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [TS](https://www.typescriptlang.org/) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
|
||||
- 配套后端代码仓库地址
|
||||
- [RuoYi-Vue-Plus 5.X(注意版本号)](https://gitee.com/dromara/RuoYi-Vue-Plus)
|
||||
- [RuoYi-Cloud-Plus 2.X(注意版本号)](https://gitee.com/dromara/RuoYi-Cloud-Plus)
|
||||
|
||||
## 前端运行
|
||||
|
||||
@ -17,57 +17,59 @@ npm install --registry=https://registry.npmmirror.com
|
||||
# 启动服务
|
||||
npm run dev
|
||||
|
||||
# 构建生产环境 yarn build:prod
|
||||
# 构建生产环境
|
||||
npm run build:prod
|
||||
|
||||
# 前端访问地址 http://localhost:80
|
||||
```
|
||||
|
||||
## 本框架与RuoYi的业务差异
|
||||
|
||||
| 业务 | 功能说明 | 本框架 | RuoYi |
|
||||
|--------|-----------------------------------------|-----|------------------|
|
||||
| 租户管理 | 系统内租户的管理 如:租户套餐、过期时间、用户数量、企业信息等 | 支持 | 无 |
|
||||
| 租户套餐管理 | 系统内租户所能使用的套餐管理 如:套餐内所包含的菜单等 | 支持 | 无 |
|
||||
| 用户管理 | 用户的管理配置 如:新增用户、分配用户所属部门、角色、岗位等 | 支持 | 支持 |
|
||||
| 部门管理 | 配置系统组织机构（公司、部门、小组） 树结构展现支持数据权限 | 支持 | 支持 |
|
||||
| 岗位管理 | 配置系统用户所属担任职务 | 支持 | 支持 |
|
||||
| 菜单管理 | 配置系统菜单、操作权限、按钮权限标识等 | 支持 | 支持 |
|
||||
| 角色管理 | 角色菜单权限分配、设置角色按机构进行数据范围权限划分 | 支持 | 支持 |
|
||||
| 字典管理 | 对系统中经常使用的一些较为固定的数据进行维护 | 支持 | 支持 |
|
||||
| 参数管理 | 对系统动态配置常用参数 | 支持 | 支持 |
|
||||
| 通知公告 | 系统通知公告信息发布维护 | 支持 | 支持 |
|
||||
| 操作日志 | 系统正常操作日志记录和查询 系统异常信息日志记录和查询 | 支持 | 支持 |
|
||||
| 登录日志 | 系统登录日志记录查询包含登录异常 | 支持 | 支持 |
|
||||
| 文件管理 | 系统文件展示、上传、下载、删除等管理 | 支持 | 无 |
|
||||
| 文件配置管理 | 系统文件上传、下载所需要的配置信息动态添加、修改、删除等管理 | 支持 | 无 |
|
||||
| 在线用户管理 | 已登录系统的在线用户信息监控与强制踢出操作 | 支持 | 支持 |
|
||||
| 定时任务 | 运行报表、任务管理(添加、修改、删除)、日志管理、执行器管理等 | 支持 | 仅支持任务与日志管理 |
|
||||
| 代码生成 | 多数据源前后端代码的生成（java、html、xml、sql）支持CRUD下载 | 支持 | 仅支持单数据源 |
|
||||
| 系统接口 | 根据业务代码自动生成相关的api接口文档 | 支持 | 支持 |
|
||||
| 服务监控 | 监视集群系统CPU、内存、磁盘、堆栈、在线日志、Spring相关配置等 | 支持 | 仅支持单机CPU、内存、磁盘监控 |
|
||||
| 缓存监控 | 对系统的缓存信息查询，命令统计等。 | 支持 | 支持 |
|
||||
| 在线构建器 | 拖动表单元素生成相应的HTML代码。 | 支持 | 支持 |
|
||||
| 使用案例 | 系统的一些功能案例 | 支持 | 不支持 |
|
||||
| 业务 | 功能说明 | 本框架 | RuoYi |
|
||||
| ------------ | ------------------------------------------------------------- | ------ | ----------------------------- |
|
||||
| 租户管理 | 系统内租户的管理 如:租户套餐、过期时间、用户数量、企业信息等 | 支持 | 无 |
|
||||
| 租户套餐管理 | 系统内租户所能使用的套餐管理 如:套餐内所包含的菜单等 | 支持 | 无 |
|
||||
| 用户管理 | 用户的管理配置 如:新增用户、分配用户所属部门、角色、岗位等 | 支持 | 支持 |
|
||||
| 部门管理 | 配置系统组织机构（公司、部门、小组） 树结构展现支持数据权限 | 支持 | 支持 |
|
||||
| 岗位管理 | 配置系统用户所属担任职务 | 支持 | 支持 |
|
||||
| 菜单管理 | 配置系统菜单、操作权限、按钮权限标识等 | 支持 | 支持 |
|
||||
| 角色管理 | 角色菜单权限分配、设置角色按机构进行数据范围权限划分 | 支持 | 支持 |
|
||||
| 字典管理 | 对系统中经常使用的一些较为固定的数据进行维护 | 支持 | 支持 |
|
||||
| 参数管理 | 对系统动态配置常用参数 | 支持 | 支持 |
|
||||
| 通知公告 | 系统通知公告信息发布维护 | 支持 | 支持 |
|
||||
| 操作日志 | 系统正常操作日志记录和查询 系统异常信息日志记录和查询 | 支持 | 支持 |
|
||||
| 登录日志 | 系统登录日志记录查询包含登录异常 | 支持 | 支持 |
|
||||
| 文件管理 | 系统文件展示、上传、下载、删除等管理 | 支持 | 无 |
|
||||
| 文件配置管理 | 系统文件上传、下载所需要的配置信息动态添加、修改、删除等管理 | 支持 | 无 |
|
||||
| 在线用户管理 | 已登录系统的在线用户信息监控与强制踢出操作 | 支持 | 支持 |
|
||||
| 定时任务 | 运行报表、任务管理(添加、修改、删除)、日志管理、执行器管理等 | 支持 | 仅支持任务与日志管理 |
|
||||
| 代码生成 | 多数据源前后端代码的生成（java、html、xml、sql）支持CRUD下载 | 支持 | 仅支持单数据源 |
|
||||
| 系统接口 | 根据业务代码自动生成相关的api接口文档 | 支持 | 支持 |
|
||||
| 服务监控 | 监视集群系统CPU、内存、磁盘、堆栈、在线日志、Spring相关配置等 | 支持 | 仅支持单机CPU、内存、磁盘监控 |
|
||||
| 缓存监控 | 对系统的缓存信息查询，命令统计等。 | 支持 | 支持 |
|
||||
| 在线构建器 | 拖动表单元素生成相应的HTML代码。 | 支持 | 支持 |
|
||||
| 使用案例 | 系统的一些功能案例 | 支持 | 不支持 |
|
||||
|
||||
## 演示图例
|
||||
|
||||
| | |
|
||||
|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
| | |
|
||||
| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
216
html/ie.html
216
html/ie.html
File diff suppressed because one or more lines are too long
31
index.html
31
index.html
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
@ -9,7 +9,7 @@
|
||||
<title>RuoYi-Vue-Plus多租户管理系统</title>
|
||||
<!--[if lt IE 11
|
||||
]><script>
|
||||
window.location.href='/html/ie.html';
|
||||
window.location.href = '/html/ie.html';
|
||||
</script><!
|
||||
[endif]-->
|
||||
<style>
|
||||
@ -47,7 +47,7 @@
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
border-top-color: #fff;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
-ms-animation: spin 2s linear infinite;
|
||||
-moz-animation: spin 2s linear infinite;
|
||||
@ -57,7 +57,7 @@
|
||||
}
|
||||
|
||||
#loader:before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
@ -65,7 +65,7 @@
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
border-top-color: #fff;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
-moz-animation: spin 3s linear infinite;
|
||||
-o-animation: spin 3s linear infinite;
|
||||
@ -74,7 +74,7 @@
|
||||
}
|
||||
|
||||
#loader:after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
@ -82,7 +82,7 @@
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
border-top-color: #fff;
|
||||
-moz-animation: spin 1.5s linear infinite;
|
||||
-o-animation: spin 1.5s linear infinite;
|
||||
-ms-animation: spin 1.5s linear infinite;
|
||||
@ -90,7 +90,6 @@
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
@ -119,13 +118,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#loader-wrapper .loader-section {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 51%;
|
||||
height: 100%;
|
||||
background: #7171C6;
|
||||
background: #7171c6;
|
||||
z-index: 1000;
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
@ -140,21 +138,20 @@
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-left {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-ms-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-right {
|
||||
-webkit-transform: translateX(100%);
|
||||
-ms-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.loaded #loader {
|
||||
@ -182,7 +179,7 @@
|
||||
|
||||
#loader-wrapper .load_title {
|
||||
font-family: 'Open Sans';
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
font-size: 19px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@ -197,7 +194,7 @@
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
83
package.json
83
package.json
@ -1,14 +1,15 @@
|
||||
{
|
||||
"name": "ruoyi-vue-plus",
|
||||
"version": "5.1.0",
|
||||
"version": "5.1.2",
|
||||
"description": "RuoYi-Vue-Plus多租户管理系统",
|
||||
"author": "LionLi",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vite serve --mode development",
|
||||
"build:prod": "vite build --mode production &&vue-tsc --noEmit",
|
||||
"build:prod": "vite build --mode production",
|
||||
"build:dev": "vite build --mode development",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint src/**/*.{ts,js,vue} --fix",
|
||||
"lint:eslint": "eslint --fix --ext .ts,.js,.vue ./src ",
|
||||
"prepare": "husky install",
|
||||
"prettier": "prettier --write ."
|
||||
},
|
||||
@ -17,68 +18,72 @@
|
||||
"url": "https://gitee.com/JavaLionLi/plus-ui.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "2.1.0",
|
||||
"@element-plus/icons-vue": "2.3.1",
|
||||
"@vueup/vue-quill": "1.2.0",
|
||||
"@vueuse/core": "9.5.0",
|
||||
"@vueuse/core": "10.7.0",
|
||||
"animate.css": "4.1.1",
|
||||
"await-to-js": "^3.0.0",
|
||||
"axios": "^1.3.4",
|
||||
"echarts": "5.4.0",
|
||||
"element-plus": "2.2.27",
|
||||
"crypto-js": "^4.1.1",
|
||||
"echarts": "5.4.3",
|
||||
"element-plus": "2.4.3",
|
||||
"file-saver": "2.0.5",
|
||||
"fuse.js": "6.6.2",
|
||||
"js-cookie": "3.0.1",
|
||||
"jsencrypt": "3.3.1",
|
||||
"crypto-js": "^4.1.1",
|
||||
"js-cookie": "3.0.5",
|
||||
"jsencrypt": "3.3.2",
|
||||
"nprogress": "0.2.0",
|
||||
"path-browserify": "1.0.1",
|
||||
"path-to-regexp": "6.2.0",
|
||||
"pinia": "2.0.22",
|
||||
"pinia": "2.1.7",
|
||||
"screenfull": "6.0.0",
|
||||
"vform3-builds": "3.0.8",
|
||||
"vue": "3.2.45",
|
||||
"vue-cropper": "1.0.3",
|
||||
"vue": "3.3.11",
|
||||
"vue-cropper": "1.1.1",
|
||||
"vue-i18n": "9.2.2",
|
||||
"vue-router": "4.1.4",
|
||||
"vue-types": "^5.0.3"
|
||||
"vue-router": "4.2.5",
|
||||
"vue-types": "5.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/json": "^2.2.40",
|
||||
"@intlify/unplugin-vue-i18n": "0.8.2",
|
||||
"@iconify/json": "^2.2.157",
|
||||
"@intlify/unplugin-vue-i18n": "1.6.0",
|
||||
"@types/crypto-js": "^4.1.1",
|
||||
"@types/file-saver": "2.0.5",
|
||||
"@types/js-cookie": "3.0.3",
|
||||
"@types/node": "18.14.2",
|
||||
"@types/nprogress": "0.2.0",
|
||||
"@types/path-browserify": "^1.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "5.56.0",
|
||||
"@typescript-eslint/parser": "5.56.0",
|
||||
"@unocss/preset-attributify": "^0.50.6",
|
||||
"@unocss/preset-icons": "^0.50.6",
|
||||
"@unocss/preset-uno": "^0.50.6",
|
||||
"@vitejs/plugin-vue": "4.0.0",
|
||||
"@vue/compiler-sfc": "3.2.45",
|
||||
"@typescript-eslint/eslint-plugin": "6.14.0",
|
||||
"@typescript-eslint/parser": "6.14.0",
|
||||
"@unocss/preset-attributify": "^0.58.0",
|
||||
"@unocss/preset-icons": "^0.58.0",
|
||||
"@unocss/preset-uno": "^0.58.0",
|
||||
"@vue/compiler-sfc": "3.3.9",
|
||||
"@vitejs/plugin-vue": "4.5.2",
|
||||
"autoprefixer": "10.4.14",
|
||||
"eslint": "8.36.0",
|
||||
"eslint-config-prettier": "8.8.0",
|
||||
"eslint-plugin-prettier": "4.2.1",
|
||||
"eslint-plugin-vue": "9.9.0",
|
||||
"eslint": "8.55.0",
|
||||
"eslint-config-prettier": "9.1.0",
|
||||
"eslint-define-config": "2.0.0",
|
||||
"eslint-plugin-prettier": "5.0.1",
|
||||
"eslint-plugin-promise": "6.1.1",
|
||||
"eslint-plugin-node": "11.1.0",
|
||||
"eslint-plugin-import": "2.29.0",
|
||||
"eslint-plugin-vue": "9.19.2",
|
||||
"fast-glob": "^3.2.11",
|
||||
"husky": "7.0.4",
|
||||
"postcss": "^8.4.21",
|
||||
"prettier": "2.8.6",
|
||||
"sass": "1.56.1",
|
||||
"typescript": "4.9.5",
|
||||
"unocss": "^0.50.6",
|
||||
"unplugin-auto-import": "0.13.0",
|
||||
"unplugin-icons": "0.15.1",
|
||||
"unplugin-vue-components": "0.23.0",
|
||||
"vite": "4.3.1",
|
||||
"prettier": "3.1.1",
|
||||
"sass": "1.69.5",
|
||||
"typescript": "5.2.2",
|
||||
"unocss": "^0.58.0",
|
||||
"unplugin-auto-import": "0.17.2",
|
||||
"unplugin-icons": "0.18.1",
|
||||
"unplugin-vue-components": "0.26.0",
|
||||
"unplugin-vue-setup-extend-plus": "1.0.0",
|
||||
"vite-plugin-compression": "0.5.1",
|
||||
"vite-plugin-svg-icons": "2.0.1",
|
||||
"unplugin-vue-setup-extend-plus": "0.4.9",
|
||||
"vitest": "^0.29.7",
|
||||
"vue-eslint-parser": "9.1.0",
|
||||
"vue-tsc": "0.35.0"
|
||||
"vue-eslint-parser": "9.3.2",
|
||||
"vue-tsc": "0.35.0",
|
||||
"vite": "5.0.4"
|
||||
}
|
||||
}
|
||||
|
||||
12
src/App.vue
12
src/App.vue
@ -5,17 +5,17 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import { handleThemeStyle } from '@/utils/theme'
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import { handleThemeStyle } from '@/utils/theme';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const size = computed(() => appStore.size as any);
|
||||
const size = computed(() => appStore.size);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
// 初始化主题样式
|
||||
handleThemeStyle(useSettingsStore().theme)
|
||||
})
|
||||
})
|
||||
handleThemeStyle(useSettingsStore().theme);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -20,7 +20,7 @@ export function getConfig(configId: string | number): AxiosPromise<ConfigVO> {
|
||||
}
|
||||
|
||||
// 根据参数键名查询参数值
|
||||
export function getConfigKey(configKey: string): AxiosPromise<String> {
|
||||
export function getConfigKey(configKey: string): AxiosPromise<string> {
|
||||
return request({
|
||||
url: '/system/config/configKey/' + configKey,
|
||||
method: 'get'
|
||||
|
||||
@ -28,7 +28,7 @@ export const getGenTable = (tableId: string | number): AxiosPromise<GenTableVO>
|
||||
};
|
||||
|
||||
// 修改代码生成信息
|
||||
export const updateGenTable = (data: DbTableForm) => {
|
||||
export const updateGenTable = (data: DbTableForm): AxiosPromise<GenTableVO> => {
|
||||
return request({
|
||||
url: '/tool/gen',
|
||||
method: 'put',
|
||||
@ -37,7 +37,7 @@ export const updateGenTable = (data: DbTableForm) => {
|
||||
};
|
||||
|
||||
// 导入表
|
||||
export const importTable = (data: { tables: string; dataName: string }) => {
|
||||
export const importTable = (data: { tables: string; dataName: string }): AxiosPromise<GenTableVO> => {
|
||||
return request({
|
||||
url: '/tool/gen/importTable',
|
||||
method: 'post',
|
||||
|
||||
@ -14,7 +14,14 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
font-family:
|
||||
Helvetica Neue,
|
||||
Helvetica,
|
||||
PingFang SC,
|
||||
Hiragino Sans GB,
|
||||
Microsoft YaHei,
|
||||
Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
label {
|
||||
|
||||
@ -28,7 +28,10 @@
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||
transition:
|
||||
0s width ease-in-out,
|
||||
0s padding-left ease-in-out,
|
||||
0s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
@ -106,7 +109,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .theme-dark .el-sub-menu .el-menu-item {
|
||||
background-color: $base-sub-menu-background !important;
|
||||
|
||||
@ -2,8 +2,7 @@
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
||||
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
|
||||
item.meta?.title }}</span>
|
||||
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta?.title }}</span>
|
||||
<a v-else @click.prevent="handleLink(item)">{{ item.meta?.title }}</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
@ -11,42 +10,42 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RouteLocationMatched } from 'vue-router'
|
||||
import { RouteLocationMatched } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const levelList = ref<RouteLocationMatched[]>([])
|
||||
const levelList = ref<RouteLocationMatched[]>([]);
|
||||
|
||||
const getBreadcrumb = () => {
|
||||
// only show routes with meta.title
|
||||
let matched = route.matched.filter(item => item.meta && item.meta.title);
|
||||
const first = matched[0]
|
||||
let matched = route.matched.filter((item) => item.meta && item.meta.title);
|
||||
const first = matched[0];
|
||||
// 判断是否为首页
|
||||
if (!isDashboard(first)) {
|
||||
matched = ([{ path: '/index', meta: { title: '首页' } }] as any).concat(matched)
|
||||
matched = ([{ path: '/index', meta: { title: '首页' } }] as any).concat(matched);
|
||||
}
|
||||
levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
||||
}
|
||||
levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false);
|
||||
};
|
||||
const isDashboard = (route: RouteLocationMatched) => {
|
||||
const name = route && route.name as string
|
||||
const name = route && (route.name as string);
|
||||
if (!name) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
return name.trim() === 'Index'
|
||||
}
|
||||
const handleLink = (item: RouteLocationMatched) => {
|
||||
const { redirect, path } = item
|
||||
redirect ? router.push(redirect as string) : router.push(path)
|
||||
}
|
||||
return name.trim() === 'Index';
|
||||
};
|
||||
const handleLink = (item) => {
|
||||
const { redirect, path } = item;
|
||||
redirect ? router.push(redirect) : router.push(path);
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
// if you go to the redirect page, do not update the breadcrumbs
|
||||
if (route.path.startsWith('/redirect/')) return
|
||||
getBreadcrumb()
|
||||
})
|
||||
if (route.path.startsWith('/redirect/')) return;
|
||||
getBreadcrumb();
|
||||
});
|
||||
onMounted(() => {
|
||||
getBreadcrumb();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,53 +1,50 @@
|
||||
<!-- 代码构建 -->
|
||||
<script setup lang="ts">
|
||||
|
||||
const props = defineProps({
|
||||
showBtn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
formJson: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
}
|
||||
})
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const buildRef = ref();
|
||||
const emits = defineEmits(['reJson', 'saveDesign']);
|
||||
|
||||
|
||||
|
||||
//获取表单json
|
||||
const getJson = () => {
|
||||
const formJson = JSON.stringify(buildRef.value.getFormJson())
|
||||
const fieldJson = JSON.stringify(buildRef.value.getFieldWidgets())
|
||||
let data = {
|
||||
formJson, fieldJson
|
||||
}
|
||||
emits("saveDesign", data)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.formJson) {
|
||||
buildRef.value.setFormJson(props.formJson)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 代码构建 -->
|
||||
<div>
|
||||
<v-form-designer
|
||||
class="build"
|
||||
ref="buildRef"
|
||||
class="build"
|
||||
:designer-config="{ importJsonButton: true, exportJsonButton: true, exportCodeButton: true, generateSFCButton: true, formTemplates: true }"
|
||||
>
|
||||
<template #customToolButtons v-if="showBtn">
|
||||
<template v-if="showBtn" #customToolButtons>
|
||||
<el-button link type="primary" icon="Select" @click="getJson">保存</el-button>
|
||||
</template>
|
||||
</v-form-designer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
showBtn: boolean;
|
||||
formJson: any;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
showBtn: true,
|
||||
formJson: ''
|
||||
});
|
||||
|
||||
const buildRef = ref();
|
||||
const emits = defineEmits(['reJson', 'saveDesign']);
|
||||
|
||||
//获取表单json
|
||||
const getJson = () => {
|
||||
const formJson = JSON.stringify(buildRef.value.getFormJson());
|
||||
const fieldJson = JSON.stringify(buildRef.value.getFieldWidgets());
|
||||
let data = {
|
||||
formJson,
|
||||
fieldJson
|
||||
};
|
||||
emits('saveDesign', data);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.formJson) {
|
||||
buildRef.value.setFormJson(props.formJson);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.build {
|
||||
margin: 0 !important;
|
||||
|
||||
@ -1,62 +1,57 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<v-form-render ref="vFormRef" :form-json="formJson" :form-data="formData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 动态表单渲染 -->
|
||||
<script setup name="Render">
|
||||
<script setup name="Render" lang="ts">
|
||||
interface Props {
|
||||
formJson: string | object;
|
||||
formData: string | object;
|
||||
isView: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
formJson: {
|
||||
type: [String, Object],
|
||||
default: ""
|
||||
},
|
||||
formData: {
|
||||
type: [String, Object],
|
||||
default: ""
|
||||
},
|
||||
isView: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
formJson: '',
|
||||
formData: '',
|
||||
isView: false
|
||||
});
|
||||
|
||||
const vFormRef = ref(null)
|
||||
const vFormRef = ref();
|
||||
// 获取表单数据-异步
|
||||
const getFormData = () => {
|
||||
return vFormRef.value.getFormData()
|
||||
}
|
||||
return vFormRef.value.getFormData();
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单内容
|
||||
* @param {表单配置} formConf
|
||||
* formConfig：{ formTemplate：表单模板，formData：表单数据，hiddenField：需要隐藏的字段字符串集合，disabledField：需要禁用的自读字符串集合}
|
||||
*/
|
||||
const initForm = (formConf) => {
|
||||
const { formTemplate, formData, hiddenField, disabledField } = toRaw(formConf)
|
||||
const initForm = (formConf: any) => {
|
||||
const { formTemplate, formData, hiddenField, disabledField } = toRaw(formConf);
|
||||
if (formTemplate) {
|
||||
vFormRef.value.setFormJson(formTemplate)
|
||||
vFormRef.value.setFormJson(formTemplate);
|
||||
if (formData) {
|
||||
vFormRef.value.setFormData(formData)
|
||||
vFormRef.value.setFormData(formData);
|
||||
}
|
||||
if (disabledField && disabledField.length > 0) {
|
||||
setTimeout(() => {
|
||||
vFormRef.value.disableWidgets(disabledField)
|
||||
}, 200)
|
||||
vFormRef.value.disableWidgets(disabledField);
|
||||
}, 200);
|
||||
}
|
||||
if (hiddenField && hiddenField.length > 0) {
|
||||
setTimeout(() => {
|
||||
vFormRef.value.hideWidgets(hiddenField)
|
||||
}, 200)
|
||||
vFormRef.value.hideWidgets(hiddenField);
|
||||
}, 200);
|
||||
}
|
||||
if (props.isView) {
|
||||
console.log(props.isView)
|
||||
setTimeout(() => {
|
||||
vFormRef.value.disableForm()
|
||||
}, 100)
|
||||
vFormRef.value.disableForm();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ getFormData, initForm })
|
||||
};
|
||||
defineExpose({ getFormData, initForm });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="">
|
||||
<v-form-render ref="vFormRef" :form-json="formJson" :form-data="formData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2,19 +2,23 @@
|
||||
<div>
|
||||
<template v-for="(item, index) in options">
|
||||
<template v-if="values.includes(item.value)">
|
||||
<span v-if="(item.elTagType == 'default' || item.elTagType == '') && (item.elTagClass == '' || item.elTagClass == null)"
|
||||
:key="item.value" :index="index" :class="item.elTagClass">
|
||||
{{ item.label + " " }}
|
||||
<span
|
||||
v-if="(item.elTagType === 'default' || item.elTagType === '') && (item.elTagClass === '' || item.elTagClass == null)"
|
||||
:key="item.value"
|
||||
:index="index"
|
||||
:class="item.elTagClass"
|
||||
>
|
||||
{{ item.label + ' ' }}
|
||||
</span>
|
||||
<el-tag
|
||||
v-else
|
||||
:disable-transitions="true"
|
||||
:key="item.value + ''"
|
||||
:disable-transitions="true"
|
||||
:index="index"
|
||||
:type="item.elTagType === 'primary' ? '' : item.elTagType"
|
||||
:type="item.elTagType === 'primary' || item.elTagType === 'default' ? '' : item.elTagType"
|
||||
:class="item.elTagClass"
|
||||
>
|
||||
{{ item.label + " " }}
|
||||
{{ item.label + ' ' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</template>
|
||||
@ -25,57 +29,53 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { propTypes } from '@/utils/propTypes';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
// 数据
|
||||
options: {
|
||||
type: Array as PropType<DictDataOption[]>,
|
||||
default: null,
|
||||
},
|
||||
// 当前的值
|
||||
value: [Number, String, Array] as PropType<number | string | Array<number | string>>,
|
||||
// 当未找到匹配的数据时，显示value
|
||||
showValue: propTypes.bool.def(true),
|
||||
separator: propTypes.string.def(","),
|
||||
interface Props {
|
||||
options: Array<DictDataOption>;
|
||||
value: number | string | Array<number | string>;
|
||||
showValue: boolean;
|
||||
separator: string;
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
showValue: true,
|
||||
separator: ','
|
||||
});
|
||||
|
||||
const values = computed(() => {
|
||||
if (props.value === '' || props.value === null || typeof props.value === "undefined") return []
|
||||
return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator);
|
||||
if (props.value === '' || props.value === null || typeof props.value === 'undefined') return [];
|
||||
return Array.isArray(props.value) ? props.value.map((item) => '' + item) : String(props.value).split(props.separator);
|
||||
});
|
||||
|
||||
const unmatch = computed(() => {
|
||||
if (props.options?.length == 0 || props.value === '' || props.value === null || typeof props.value === "undefined") return false
|
||||
if (props.options?.length == 0 || props.value === '' || props.value === null || typeof props.value === 'undefined') return false;
|
||||
// 传入值为非数组
|
||||
values.value.forEach(item => {
|
||||
if (!props.options.some(v => v.value === item)) {
|
||||
return true // 如果有未匹配项，将标志设置为true
|
||||
values.value.forEach((item) => {
|
||||
if (!props.options.some((v) => v.value === item)) {
|
||||
return true; // 如果有未匹配项，将标志设置为true
|
||||
}
|
||||
})
|
||||
return false // 返回标志的值
|
||||
});
|
||||
return false; // 返回标志的值
|
||||
});
|
||||
|
||||
const unmatchArray = computed(() => {
|
||||
// 记录未匹配的项
|
||||
// 记录未匹配的项
|
||||
const itemUnmatchArray: Array<string | number> = [];
|
||||
if (props.value !== '' && props.value !== null && typeof props.value !== "undefined") {
|
||||
values.value.forEach(item => {
|
||||
if (!props.options.some(v => v.value === item)) {
|
||||
if (props.value !== '' && props.value !== null && typeof props.value !== 'undefined') {
|
||||
values.value.forEach((item) => {
|
||||
if (!props.options.some((v) => v.value === item)) {
|
||||
itemUnmatchArray.push(item);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
// 没有value不显示
|
||||
return handleArray(itemUnmatchArray);
|
||||
});
|
||||
|
||||
const handleArray = (array: Array<string | number>) => {
|
||||
if (array.length === 0) return "";
|
||||
if (array.length === 0) return '';
|
||||
return array.reduce((pre, cur) => {
|
||||
return pre + " " + cur;
|
||||
return pre + ' ' + cur;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
v-if="type === 'url'"
|
||||
ref="uploadRef"
|
||||
:action="upload.url"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
@ -9,28 +11,29 @@
|
||||
name="file"
|
||||
:show-file-list="false"
|
||||
:headers="upload.headers"
|
||||
ref="uploadRef"
|
||||
v-if="type === 'url'"
|
||||
>
|
||||
</el-upload>
|
||||
<div class="editor">
|
||||
<quill-editor
|
||||
ref="quillEditorRef"
|
||||
v-model:content="content"
|
||||
contentType="html"
|
||||
@textChange="(e: any) => $emit('update:modelValue', content)"
|
||||
content-type="html"
|
||||
:options="options"
|
||||
:style="styles"
|
||||
@text-change="(e: any) => $emit('update:modelValue', content)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { QuillEditor, Quill } from '@vueup/vue-quill';
|
||||
import '@vueup/vue-quill/dist/vue-quill.snow.css';
|
||||
|
||||
import { QuillEditor, Quill } from '@vueup/vue-quill';
|
||||
import { propTypes } from '@/utils/propTypes';
|
||||
import { globalHeaders } from "@/utils/request";
|
||||
import { globalHeaders } from '@/utils/request';
|
||||
|
||||
defineEmits(['update:modelValue']);
|
||||
|
||||
const props = defineProps({
|
||||
/* 编辑器的内容 */
|
||||
@ -52,42 +55,42 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const upload = reactive<UploadOption>({
|
||||
headers: globalHeaders(),
|
||||
url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload'
|
||||
})
|
||||
});
|
||||
const quillEditorRef = ref();
|
||||
|
||||
const options = ref({
|
||||
theme: "snow",
|
||||
const options = ref<any>({
|
||||
theme: 'snow',
|
||||
bounds: document.body,
|
||||
debug: "warn",
|
||||
debug: 'warn',
|
||||
modules: {
|
||||
// 工具栏配置
|
||||
toolbar: {
|
||||
container: [
|
||||
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
|
||||
["blockquote", "code-block"], // 引用 代码块
|
||||
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
|
||||
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
||||
[{ size: ["small", false, "large", "huge"] }], // 字体大小
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||
[{ align: [] }], // 对齐方式
|
||||
["clean"], // 清除文本格式
|
||||
["link", "image", "video"] // 链接、图片、视频
|
||||
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
|
||||
['blockquote', 'code-block'], // 引用 代码块
|
||||
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
|
||||
[{ indent: '-1' }, { indent: '+1' }], // 缩进
|
||||
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
||||
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
||||
[{ align: [] }], // 对齐方式
|
||||
['clean'], // 清除文本格式
|
||||
['link', 'image', 'video'] // 链接、图片、视频
|
||||
],
|
||||
handlers: {
|
||||
image: function (value: any) {
|
||||
if (value) {
|
||||
// 调用element图片上传
|
||||
(document.querySelector(".editor-img-uploader>.el-upload") as HTMLDivElement)?.click();
|
||||
(document.querySelector('.editor-img-uploader>.el-upload') as HTMLDivElement)?.click();
|
||||
} else {
|
||||
Quill.format("image", true);
|
||||
Quill.format('image', true);
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
placeholder: "请输入内容",
|
||||
readOnly: props.readOnly,
|
||||
placeholder: '请输入内容',
|
||||
readOnly: props.readOnly
|
||||
});
|
||||
|
||||
const styles = computed(() => {
|
||||
@ -99,14 +102,18 @@ const styles = computed(() => {
|
||||
style.height = `${props.height}px`;
|
||||
}
|
||||
return style;
|
||||
})
|
||||
});
|
||||
|
||||
const content = ref("");
|
||||
watch(() => props.modelValue, (v) => {
|
||||
if (v !== content.value) {
|
||||
content.value = v === undefined ? "<p></p>" : v;
|
||||
}
|
||||
}, { immediate: true });
|
||||
const content = ref('');
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(v) => {
|
||||
if (v !== content.value) {
|
||||
content.value = v === undefined ? '<p></p>' : v;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 图片上传成功返回图片地址
|
||||
const handleUploadSuccess = (res: any) => {
|
||||
@ -117,7 +124,7 @@ const handleUploadSuccess = (res: any) => {
|
||||
// 获取光标位置
|
||||
let length = quill.selection.savedRange.index;
|
||||
// 插入图片，res为服务器返回的图片链接地址
|
||||
quill.insertEmbed(length, "image", res.data.url);
|
||||
quill.insertEmbed(length, 'image', res.data.url);
|
||||
// 调整光标到最后
|
||||
quill.setSelection(length + 1);
|
||||
proxy?.$modal.closeLoading();
|
||||
@ -125,11 +132,11 @@ const handleUploadSuccess = (res: any) => {
|
||||
proxy?.$modal.loading(res.msg);
|
||||
proxy?.$modal.closeLoading();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 图片上传前拦截
|
||||
const handleBeforeUpload = (file: any) => {
|
||||
const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
|
||||
const type = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg'];
|
||||
const isJPG = type.includes(file.type);
|
||||
//检验文件格式
|
||||
if (!isJPG) {
|
||||
@ -146,13 +153,13 @@ const handleBeforeUpload = (file: any) => {
|
||||
}
|
||||
proxy?.$modal.loading('正在上传文件，请稍候...');
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
// 图片失败拦截
|
||||
const handleUploadError = (err: any) => {
|
||||
console.error(err);
|
||||
proxy?.$modal.msgError('上传文件失败');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -167,71 +174,71 @@ const handleUploadError = (err: any) => {
|
||||
.quill-img {
|
||||
display: none;
|
||||
}
|
||||
.ql-snow .ql-tooltip[data-mode="link"]::before {
|
||||
content: "请输入链接地址:";
|
||||
.ql-snow .ql-tooltip[data-mode='link']::before {
|
||||
content: '请输入链接地址:';
|
||||
}
|
||||
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
|
||||
border-right: 0;
|
||||
content: "保存";
|
||||
content: '保存';
|
||||
padding-right: 0;
|
||||
}
|
||||
.ql-snow .ql-tooltip[data-mode="video"]::before {
|
||||
content: "请输入视频地址:";
|
||||
.ql-snow .ql-tooltip[data-mode='video']::before {
|
||||
content: '请输入视频地址:';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
|
||||
content: "14px";
|
||||
content: '14px';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
|
||||
content: "10px";
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
|
||||
content: '10px';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
|
||||
content: "18px";
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
|
||||
content: '18px';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
|
||||
content: "32px";
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
|
||||
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
|
||||
content: '32px';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
|
||||
content: "文本";
|
||||
content: '文本';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
|
||||
content: "标题1";
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
|
||||
content: '标题1';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
|
||||
content: "标题2";
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
|
||||
content: '标题2';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
|
||||
content: "标题3";
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
|
||||
content: '标题3';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
|
||||
content: "标题4";
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
|
||||
content: '标题4';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
|
||||
content: "标题5";
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
|
||||
content: '标题5';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
|
||||
content: "标题6";
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
|
||||
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
|
||||
content: '标题6';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
|
||||
content: "标准字体";
|
||||
content: '标准字体';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
|
||||
content: "衬线字体";
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
|
||||
content: '衬线字体';
|
||||
}
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
|
||||
content: "等宽字体";
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
|
||||
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
|
||||
content: '等宽字体';
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="upload-file">
|
||||
<el-upload
|
||||
ref="fileUploadRef"
|
||||
multiple
|
||||
:action="uploadFileUrl"
|
||||
:before-upload="handleBeforeUpload"
|
||||
@ -12,30 +13,29 @@
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
class="upload-file-uploader"
|
||||
ref="fileUploadRef"
|
||||
>
|
||||
<!-- 上传按钮 -->
|
||||
<el-button type="primary">选取文件</el-button>
|
||||
</el-upload>
|
||||
<!-- 上传提示 -->
|
||||
<div class="el-upload__tip" v-if="showTip">
|
||||
<div v-if="showTip" class="el-upload__tip">
|
||||
请上传
|
||||
<template v-if="fileSize">
|
||||
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
||||
</template>
|
||||
<template v-if="fileType">
|
||||
格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
|
||||
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
|
||||
</template>
|
||||
的文件
|
||||
</div>
|
||||
<!-- 文件列表 -->
|
||||
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
||||
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
|
||||
<li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
|
||||
<el-link :href="`${file.url}`" :underline="false" target="_blank">
|
||||
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
||||
</el-link>
|
||||
<div class="ele-upload-list__item-content-action">
|
||||
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
|
||||
<el-link :underline="false" type="danger" @click="handleDelete(index)">删除</el-link>
|
||||
</div>
|
||||
</li>
|
||||
</transition-group>
|
||||
@ -43,20 +43,23 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { listByIds, delOss } from "@/api/system/oss";
|
||||
import { listByIds, delOss } from '@/api/system/oss';
|
||||
import { propTypes } from '@/utils/propTypes';
|
||||
import { globalHeaders } from "@/utils/request";
|
||||
import { globalHeaders } from '@/utils/request';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: [String, Object, Array],
|
||||
// 数量限制
|
||||
limit: propTypes.number.def(5),
|
||||
// 大小限制(MB)
|
||||
fileSize: propTypes.number.def(5),
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: propTypes.array.def(["doc", "xls", "ppt", "txt", "pdf"]),
|
||||
// 是否显示提示
|
||||
isShowTip: propTypes.bool.def(true),
|
||||
modelValue: {
|
||||
type: [String, Object, Array],
|
||||
default: () => []
|
||||
},
|
||||
// 数量限制
|
||||
limit: propTypes.number.def(5),
|
||||
// 大小限制(MB)
|
||||
fileSize: propTypes.number.def(5),
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']),
|
||||
// 是否显示提示
|
||||
isShowTip: propTypes.bool.def(true)
|
||||
});
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
@ -65,153 +68,163 @@ const number = ref(0);
|
||||
const uploadList = ref<any[]>([]);
|
||||
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
||||
const uploadFileUrl = ref(baseUrl + "/resource/oss/upload"); // 上传文件服务器地址
|
||||
const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
|
||||
const headers = ref(globalHeaders());
|
||||
|
||||
const fileList = ref<any[]>([]);
|
||||
const showTip = computed(
|
||||
() => props.isShowTip && (props.fileType || props.fileSize)
|
||||
);
|
||||
const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
|
||||
|
||||
const fileUploadRef = ref<ElUploadInstance>();
|
||||
|
||||
watch(() => props.modelValue, async val => {
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
async (val) => {
|
||||
if (val) {
|
||||
let temp = 1;
|
||||
// 首先将值转为数组
|
||||
let list = [];
|
||||
if (Array.isArray(val)) {
|
||||
list = val;
|
||||
} else {
|
||||
const res = await listByIds(val as string)
|
||||
list = res.data.map((oss) => {
|
||||
const data = { name: oss.originalName, url: oss.url, ossId: oss.ossId };
|
||||
return data;
|
||||
});
|
||||
}
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map(item => {
|
||||
item = { name: item.name, url: item.url, ossId: item.ossId };
|
||||
item.uid = item.uid || new Date().getTime() + temp++;
|
||||
return item;
|
||||
let temp = 1;
|
||||
// 首先将值转为数组
|
||||
let list: any[] = [];
|
||||
if (Array.isArray(val)) {
|
||||
list = val;
|
||||
} else {
|
||||
const res = await listByIds(val);
|
||||
list = res.data.map((oss) => {
|
||||
const data = {
|
||||
name: oss.originalName,
|
||||
url: oss.url,
|
||||
ossId: oss.ossId
|
||||
};
|
||||
return data;
|
||||
});
|
||||
}
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map((item) => {
|
||||
item = { name: item.name, url: item.url, ossId: item.ossId };
|
||||
item.uid = item.uid || new Date().getTime() + temp++;
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
fileList.value = [];
|
||||
return [];
|
||||
fileList.value = [];
|
||||
return [];
|
||||
}
|
||||
}, { deep: true, immediate: true });
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
// 上传前校检格式和大小
|
||||
const handleBeforeUpload = (file: any) => {
|
||||
// 校检文件类型
|
||||
if (props.fileType.length) {
|
||||
const fileName = file.name.split('.');
|
||||
const fileExt = fileName[fileName.length - 1];
|
||||
const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
|
||||
if (!isTypeOk) {
|
||||
proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);
|
||||
return false;
|
||||
}
|
||||
// 校检文件类型
|
||||
if (props.fileType.length) {
|
||||
const fileName = file.name.split('.');
|
||||
const fileExt = fileName[fileName.length - 1];
|
||||
const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
|
||||
if (!isTypeOk) {
|
||||
proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
|
||||
return false;
|
||||
}
|
||||
// 校检文件大小
|
||||
if (props.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSize;
|
||||
if (!isLt) {
|
||||
proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 校检文件大小
|
||||
if (props.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSize;
|
||||
if (!isLt) {
|
||||
proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
proxy?.$modal.loading("正在上传文件，请稍候...");
|
||||
number.value++;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
proxy?.$modal.loading('正在上传文件，请稍候...');
|
||||
number.value++;
|
||||
return true;
|
||||
};
|
||||
|
||||
// 文件个数超出
|
||||
const handleExceed = () => {
|
||||
proxy?.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
|
||||
}
|
||||
proxy?.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
|
||||
};
|
||||
|
||||
// 上传失败
|
||||
const handleUploadError = () => {
|
||||
proxy?.$modal.msgError("上传文件失败");
|
||||
}
|
||||
proxy?.$modal.msgError('上传文件失败');
|
||||
};
|
||||
|
||||
// 上传成功回调
|
||||
const handleUploadSuccess = (res: any, file: UploadFile) => {
|
||||
if (res.code === 200) {
|
||||
uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
|
||||
uploadedSuccessfully();
|
||||
} else {
|
||||
number.value--;
|
||||
proxy?.$modal.closeLoading();
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
fileUploadRef.value?.handleRemove(file);
|
||||
uploadedSuccessfully();
|
||||
}
|
||||
}
|
||||
if (res.code === 200) {
|
||||
uploadList.value.push({
|
||||
name: res.data.fileName,
|
||||
url: res.data.url,
|
||||
ossId: res.data.ossId
|
||||
});
|
||||
uploadedSuccessfully();
|
||||
} else {
|
||||
number.value--;
|
||||
proxy?.$modal.closeLoading();
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
fileUploadRef.value?.handleRemove(file);
|
||||
uploadedSuccessfully();
|
||||
}
|
||||
};
|
||||
|
||||
// 删除文件
|
||||
const handleDelete = (index: number) => {
|
||||
let ossId = fileList.value[index].ossId;
|
||||
delOss(ossId);
|
||||
fileList.value.splice(index, 1);
|
||||
emit("update:modelValue", listToString(fileList.value));
|
||||
}
|
||||
let ossId = fileList.value[index].ossId;
|
||||
delOss(ossId);
|
||||
fileList.value.splice(index, 1);
|
||||
emit('update:modelValue', listToString(fileList.value));
|
||||
};
|
||||
|
||||
// 上传结束处理
|
||||
const uploadedSuccessfully = () => {
|
||||
if (number.value > 0 && uploadList.value.length === number.value) {
|
||||
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
|
||||
uploadList.value = [];
|
||||
number.value = 0;
|
||||
emit("update:modelValue", listToString(fileList.value));
|
||||
proxy?.$modal.closeLoading();
|
||||
}
|
||||
}
|
||||
if (number.value > 0 && uploadList.value.length === number.value) {
|
||||
fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value);
|
||||
uploadList.value = [];
|
||||
number.value = 0;
|
||||
emit('update:modelValue', listToString(fileList.value));
|
||||
proxy?.$modal.closeLoading();
|
||||
}
|
||||
};
|
||||
|
||||
// 获取文件名称
|
||||
const getFileName = (name: string) => {
|
||||
// 如果是url那么取最后的名字 如果不是直接返回
|
||||
if (name.lastIndexOf("/") > -1) {
|
||||
return name.slice(name.lastIndexOf("/") + 1);
|
||||
} else {
|
||||
return name;
|
||||
}
|
||||
}
|
||||
// 如果是url那么取最后的名字 如果不是直接返回
|
||||
if (name.lastIndexOf('/') > -1) {
|
||||
return name.slice(name.lastIndexOf('/') + 1);
|
||||
} else {
|
||||
return name;
|
||||
}
|
||||
};
|
||||
|
||||
// 对象转成指定字符串分隔
|
||||
const listToString = (list: any[], separator?: string) => {
|
||||
let strs = "";
|
||||
separator = separator || ",";
|
||||
list.forEach(item => {
|
||||
if (item.ossId) {
|
||||
strs += item.ossId + separator;
|
||||
}
|
||||
})
|
||||
return strs != "" ? strs.substring(0, strs.length - 1) : "";
|
||||
}
|
||||
let strs = '';
|
||||
separator = separator || ',';
|
||||
list.forEach((item) => {
|
||||
if (item.ossId) {
|
||||
strs += item.ossId + separator;
|
||||
}
|
||||
});
|
||||
return strs != '' ? strs.substring(0, strs.length - 1) : '';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upload-file-uploader {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.upload-file-list .el-upload-list__item {
|
||||
border: 1px solid #e4e7ed;
|
||||
line-height: 2;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
border: 1px solid #e4e7ed;
|
||||
line-height: 2;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upload-file-list .ele-upload-list__item-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ele-upload-list__item-content-action .el-link {
|
||||
margin-right: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="padding: 0 15px;" @click="toggleClick">
|
||||
<div style="padding: 0 15px" @click="toggleClick">
|
||||
<svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64">
|
||||
<path
|
||||
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
|
||||
@ -13,12 +13,12 @@ import { propTypes } from '@/utils/propTypes';
|
||||
|
||||
defineProps({
|
||||
isActive: propTypes.bool.def(false)
|
||||
})
|
||||
});
|
||||
|
||||
const emit = defineEmits(['toggleClick'])
|
||||
const emit = defineEmits(['toggleClick']);
|
||||
const toggleClick = () => {
|
||||
emit('toggleClick');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :class="{ 'show': show }" class="header-search">
|
||||
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click"/>
|
||||
<div :class="{ show: show }" class="header-search">
|
||||
<svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
|
||||
<el-select
|
||||
ref="headerSearchSelectRef"
|
||||
v-model="search"
|
||||
@ -12,23 +12,22 @@
|
||||
class="header-search-select"
|
||||
@change="change"
|
||||
>
|
||||
<el-option v-for="option in options" :key="option.item.path" :value="option.item"
|
||||
:label="option.item.title.join(' > ')"/>
|
||||
<el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="HeaderSearch">
|
||||
import Fuse from 'fuse.js';
|
||||
import {getNormalPath} from '@/utils/ruoyi';
|
||||
import {isHttp} from '@/utils/validate';
|
||||
import { getNormalPath } from '@/utils/ruoyi';
|
||||
import { isHttp } from '@/utils/validate';
|
||||
import usePermissionStore from '@/store/modules/permission';
|
||||
import {RouteOption} from 'vue-router';
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
type Router = Array<{
|
||||
path: string;
|
||||
title: string[];
|
||||
}>
|
||||
}>;
|
||||
|
||||
const search = ref('');
|
||||
const options = ref<any>([]);
|
||||
@ -40,36 +39,36 @@ const router = useRouter();
|
||||
const routes = computed(() => usePermissionStore().routes);
|
||||
|
||||
const click = () => {
|
||||
show.value = !show.value
|
||||
show.value = !show.value;
|
||||
if (show.value) {
|
||||
headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
|
||||
headerSearchSelectRef.value && headerSearchSelectRef.value.focus();
|
||||
}
|
||||
};
|
||||
const close = () => {
|
||||
headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
|
||||
options.value = []
|
||||
show.value = false
|
||||
}
|
||||
headerSearchSelectRef.value && headerSearchSelectRef.value.blur();
|
||||
options.value = [];
|
||||
show.value = false;
|
||||
};
|
||||
const change = (val: any) => {
|
||||
const path = val.path;
|
||||
const query = val.query;
|
||||
if (isHttp(path)) {
|
||||
// http(s):// 路径新窗口打开
|
||||
const pindex = path.indexOf("http");
|
||||
window.open(path.substr(pindex, path.length), "_blank");
|
||||
const pindex = path.indexOf('http');
|
||||
window.open(path.substr(pindex, path.length), '_blank');
|
||||
} else {
|
||||
if (query) {
|
||||
router.push({ path: path, query: JSON.parse(query) });
|
||||
} else {
|
||||
router.push(path)
|
||||
router.push(path);
|
||||
}
|
||||
}
|
||||
search.value = ''
|
||||
options.value = []
|
||||
search.value = '';
|
||||
options.value = [];
|
||||
nextTick(() => {
|
||||
show.value = false
|
||||
})
|
||||
}
|
||||
show.value = false;
|
||||
});
|
||||
};
|
||||
const initFuse = (list: Router) => {
|
||||
fuse.value = new Fuse(list, {
|
||||
shouldSort: true,
|
||||
@ -77,20 +76,23 @@ const initFuse = (list: Router) => {
|
||||
location: 0,
|
||||
distance: 100,
|
||||
minMatchCharLength: 1,
|
||||
keys: [{
|
||||
name: 'title',
|
||||
weight: 0.7
|
||||
}, {
|
||||
name: 'path',
|
||||
weight: 0.3
|
||||
}]
|
||||
})
|
||||
}
|
||||
keys: [
|
||||
{
|
||||
name: 'title',
|
||||
weight: 0.7
|
||||
},
|
||||
{
|
||||
name: 'path',
|
||||
weight: 0.3
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
// Filter out the routes that can be displayed in the sidebar
|
||||
// And generate the internationalized title
|
||||
const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: string[] = []) => {
|
||||
let res: Router = []
|
||||
routes.forEach(r => {
|
||||
const generateRoutes = (routes: RouteRecordRaw[], basePath = '', prefixTitle: string[] = []) => {
|
||||
let res: Router = [];
|
||||
routes.forEach((r) => {
|
||||
// skip hidden router
|
||||
if (!r.hidden) {
|
||||
const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
|
||||
@ -98,7 +100,7 @@ const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: strin
|
||||
path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
|
||||
title: [...prefixTitle],
|
||||
query: ''
|
||||
}
|
||||
};
|
||||
if (r.meta && r.meta.title) {
|
||||
data.title = [...data.title, r.meta.title];
|
||||
if (r.redirect !== 'noRedirect') {
|
||||
@ -109,7 +111,7 @@ const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: strin
|
||||
}
|
||||
|
||||
if (r.query) {
|
||||
data.query = r.query
|
||||
data.query = r.query;
|
||||
}
|
||||
|
||||
// recursive child routes
|
||||
@ -120,20 +122,20 @@ const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: strin
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
return res;
|
||||
}
|
||||
};
|
||||
const querySearch = (query: string) => {
|
||||
if (query !== '') {
|
||||
options.value = fuse.value.search(query)
|
||||
options.value = fuse.value.search(query);
|
||||
} else {
|
||||
options.value = []
|
||||
options.value = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
searchPool.value = generateRoutes(routes.value);
|
||||
})
|
||||
});
|
||||
|
||||
// watchEffect(() => {
|
||||
// searchPool.value = generateRoutes(routes.value)
|
||||
@ -141,15 +143,15 @@ onMounted(() => {
|
||||
|
||||
watch(show, (value) => {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', close)
|
||||
document.body.addEventListener('click', close);
|
||||
} else {
|
||||
document.body.removeEventListener('click', close)
|
||||
document.body.removeEventListener('click', close);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
watch(searchPool, (list) => {
|
||||
initFuse(list)
|
||||
})
|
||||
initFuse(list);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
<template>
|
||||
<div class="relative" :style="{ width: width }">
|
||||
<el-input v-model="modelValue" readonly @click="visible = !visible" placeholder="点击选择图标">
|
||||
<div class="relative" :style="{ 'width': width }">
|
||||
<el-input v-model="modelValue" readonly placeholder="点击选择图标" @click="visible = !visible">
|
||||
<template #prepend>
|
||||
<svg-icon :icon-class="modelValue as string" />
|
||||
<svg-icon :icon-class="modelValue" />
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<el-popover shadow="none" :visible="visible" placement="bottom-end" trigger="click" :width="450">
|
||||
<template #reference>
|
||||
<div @click="visible = !visible" class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]">
|
||||
<div class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]" @click="visible = !visible">
|
||||
<i-ep-caret-top v-show="visible"></i-ep-caret-top>
|
||||
<i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-input class="p-2" v-model="filterValue" placeholder="搜索图标" clearable @input="filterIcons" />
|
||||
<el-input v-model="filterValue" class="p-2" placeholder="搜索图标" clearable @input="filterIcons" />
|
||||
|
||||
<el-scrollbar height="w-[200px]">
|
||||
<ul class="icon-list">
|
||||
<el-tooltip v-for="(iconName, index) in iconNames" :key="index" :content="iconName" placement="bottom" effect="light">
|
||||
<li :class="['icon-item', {active: modelValue == iconName}]" @click="selectedIcon(iconName)">
|
||||
<li :class="['icon-item', { active: modelValue == iconName }]" @click="selectedIcon(iconName)">
|
||||
<svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" />
|
||||
</li>
|
||||
</el-tooltip>
|
||||
@ -50,13 +50,11 @@ const filterValue = ref('');
|
||||
*/
|
||||
const filterIcons = () => {
|
||||
if (filterValue.value) {
|
||||
iconNames.value = icons.filter(iconName =>
|
||||
iconName.includes(filterValue.value)
|
||||
);
|
||||
iconNames.value = icons.filter((iconName) => iconName.includes(filterValue.value));
|
||||
} else {
|
||||
iconNames.value = icons;
|
||||
}
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 选择图标
|
||||
* @param iconName 选择的图标名称
|
||||
@ -64,12 +62,12 @@ const filterIcons = () => {
|
||||
const selectedIcon = (iconName: string) => {
|
||||
emit('update:modelValue', iconName);
|
||||
visible.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-scrollbar {
|
||||
max-height: calc(50vh - 100px)!important;
|
||||
max-height: calc(50vh - 100px) !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
@ -99,8 +97,8 @@ const selectedIcon = (iconName: string) => {
|
||||
}
|
||||
}
|
||||
.active {
|
||||
border-color: var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
border-color: var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,11 +15,11 @@ const props = defineProps({
|
||||
src: propTypes.string.def(''),
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: ""
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
@ -27,29 +27,25 @@ const realSrc = computed(() => {
|
||||
if (!props.src) {
|
||||
return;
|
||||
}
|
||||
let real_src = props.src.split(",")[0];
|
||||
let real_src = props.src.split(',')[0];
|
||||
return real_src;
|
||||
});
|
||||
|
||||
const realSrcList = computed(() => {
|
||||
if (!props.src) {
|
||||
return;
|
||||
return [];
|
||||
}
|
||||
let real_src_list = props.src.split(",");
|
||||
let real_src_list = props.src.split(',');
|
||||
let srcList: string[] = [];
|
||||
real_src_list.forEach(item => {
|
||||
real_src_list.forEach((item: string) => {
|
||||
return srcList.push(item);
|
||||
});
|
||||
return srcList;
|
||||
});
|
||||
|
||||
const realWidth = computed(() =>
|
||||
typeof props.width == "string" ? props.width : `${props.width}px`
|
||||
);
|
||||
const realWidth = computed(() => (typeof props.width == 'string' ? props.width : `${props.width}px`));
|
||||
|
||||
const realHeight = computed(() =>
|
||||
typeof props.height == "string" ? props.height : `${props.height}px`
|
||||
);
|
||||
const realHeight = computed(() => (typeof props.height == 'string' ? props.height : `${props.height}px`));
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="component-upload-image">
|
||||
<el-upload
|
||||
ref="imageUpload"
|
||||
multiple
|
||||
:action="uploadImgUrl"
|
||||
list-type="picture-card"
|
||||
@ -9,7 +10,6 @@
|
||||
:limit="limit"
|
||||
:on-error="handleUploadError"
|
||||
:on-exceed="handleExceed"
|
||||
ref="imageUpload"
|
||||
:before-remove="handleDelete"
|
||||
:show-file-list="true"
|
||||
:headers="headers"
|
||||
@ -22,13 +22,13 @@
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<!-- 上传提示 -->
|
||||
<div class="el-upload__tip" v-if="showTip">
|
||||
<div v-if="showTip" class="el-upload__tip">
|
||||
请上传
|
||||
<template v-if="fileSize">
|
||||
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
|
||||
</template>
|
||||
<template v-if="fileType">
|
||||
格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
|
||||
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
|
||||
</template>
|
||||
的文件
|
||||
</div>
|
||||
@ -40,177 +40,179 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { listByIds, delOss } from "@/api/system/oss";
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
import { OssVO } from "@/api/system/oss/types";
|
||||
import { listByIds, delOss } from '@/api/system/oss';
|
||||
import { OssVO } from '@/api/system/oss/types';
|
||||
import { propTypes } from '@/utils/propTypes';
|
||||
import {globalHeaders} from "@/utils/request";
|
||||
import { globalHeaders } from '@/utils/request';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: [String, Object, Array],
|
||||
// 图片数量限制
|
||||
limit: propTypes.number.def(5),
|
||||
// 大小限制(MB)
|
||||
fileSize: propTypes.number.def(5),
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: propTypes.array.def(["png", "jpg", "jpeg"]),
|
||||
// 是否显示提示
|
||||
isShowTip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Object, Array],
|
||||
default: () => []
|
||||
},
|
||||
// 图片数量限制
|
||||
limit: propTypes.number.def(5),
|
||||
// 大小限制(MB)
|
||||
fileSize: propTypes.number.def(5),
|
||||
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
||||
fileType: propTypes.array.def(['png', 'jpg', 'jpeg']),
|
||||
// 是否显示提示
|
||||
isShowTip: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const number = ref(0);
|
||||
const uploadList = ref<any[]>([]);
|
||||
const dialogImageUrl = ref("");
|
||||
const dialogImageUrl = ref('');
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
||||
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload"); // 上传的图片服务器地址
|
||||
const uploadImgUrl = ref(baseUrl + '/resource/oss/upload'); // 上传的图片服务器地址
|
||||
const headers = ref(globalHeaders());
|
||||
|
||||
const fileList = ref<any[]>([]);
|
||||
const showTip = computed(
|
||||
() => props.isShowTip && (props.fileType || props.fileSize)
|
||||
);
|
||||
const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
|
||||
|
||||
const imageUploadRef = ref<ElUploadInstance>();
|
||||
|
||||
watch(() => props.modelValue, async val => {
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
async (val) => {
|
||||
if (val) {
|
||||
// 首先将值转为数组
|
||||
let list: OssVO[] = [];
|
||||
if (Array.isArray(val)) {
|
||||
list = val as OssVO[];
|
||||
// 首先将值转为数组
|
||||
let list: OssVO[] = [];
|
||||
if (Array.isArray(val)) {
|
||||
list = val as OssVO[];
|
||||
} else {
|
||||
const res = await listByIds(val as string);
|
||||
list = res.data;
|
||||
}
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map((item) => {
|
||||
// 字符串回显处理 如果此处存的是url可直接回显 如果存的是id需要调用接口查出来
|
||||
let itemData;
|
||||
if (typeof item === 'string') {
|
||||
itemData = { name: item, url: item };
|
||||
} else {
|
||||
const res = await listByIds(val as string)
|
||||
list = res.data
|
||||
// 此处name使用ossId 防止删除出现重名
|
||||
itemData = { name: item.ossId, url: item.url, ossId: item.ossId };
|
||||
}
|
||||
// 然后将数组转为对象数组
|
||||
fileList.value = list.map(item => {
|
||||
// 字符串回显处理 如果此处存的是url可直接回显 如果存的是id需要调用接口查出来
|
||||
let itemData;
|
||||
if (typeof item === "string") {
|
||||
itemData = { name: item, url: item };
|
||||
} else {
|
||||
// 此处name使用ossId 防止删除出现重名
|
||||
itemData = { name: item.ossId, url: item.url, ossId: item.ossId };
|
||||
}
|
||||
return itemData;
|
||||
});
|
||||
return itemData;
|
||||
});
|
||||
} else {
|
||||
fileList.value = [];
|
||||
return [];
|
||||
fileList.value = [];
|
||||
return [];
|
||||
}
|
||||
}, { deep: true, immediate: true });
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
/** 上传前loading加载 */
|
||||
const handleBeforeUpload = (file: any) => {
|
||||
let isImg = false;
|
||||
if (props.fileType.length) {
|
||||
let fileExtension = "";
|
||||
if (file.name.lastIndexOf(".") > -1) {
|
||||
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||||
}
|
||||
isImg = props.fileType.some((type: any) => {
|
||||
if (file.type.indexOf(type) > -1) return true;
|
||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
isImg = file.type.indexOf("image") > -1;
|
||||
let isImg = false;
|
||||
if (props.fileType.length) {
|
||||
let fileExtension = '';
|
||||
if (file.name.lastIndexOf('.') > -1) {
|
||||
fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
|
||||
}
|
||||
if (!isImg) {
|
||||
proxy?.$modal.msgError(
|
||||
`文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`
|
||||
);
|
||||
return false;
|
||||
isImg = props.fileType.some((type: any) => {
|
||||
if (file.type.indexOf(type) > -1) return true;
|
||||
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
isImg = file.type.indexOf('image') > -1;
|
||||
}
|
||||
if (!isImg) {
|
||||
proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}图片格式文件!`);
|
||||
return false;
|
||||
}
|
||||
if (props.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSize;
|
||||
if (!isLt) {
|
||||
proxy?.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
if (props.fileSize) {
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSize;
|
||||
if (!isLt) {
|
||||
proxy?.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
proxy?.$modal.loading("正在上传图片，请稍候...");
|
||||
number.value++;
|
||||
}
|
||||
}
|
||||
proxy?.$modal.loading('正在上传图片，请稍候...');
|
||||
number.value++;
|
||||
};
|
||||
|
||||
// 文件个数超出
|
||||
const handleExceed = () => {
|
||||
proxy?.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
|
||||
}
|
||||
proxy?.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
|
||||
};
|
||||
|
||||
// 上传成功回调
|
||||
const handleUploadSuccess = (res: any, file: UploadFile) => {
|
||||
if (res.code === 200) {
|
||||
uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
|
||||
uploadedSuccessfully();
|
||||
} else {
|
||||
number.value--;
|
||||
proxy?.$modal.closeLoading();
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
imageUploadRef.value?.handleRemove(file);
|
||||
uploadedSuccessfully();
|
||||
}
|
||||
}
|
||||
if (res.code === 200) {
|
||||
uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
|
||||
uploadedSuccessfully();
|
||||
} else {
|
||||
number.value--;
|
||||
proxy?.$modal.closeLoading();
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
imageUploadRef.value?.handleRemove(file);
|
||||
uploadedSuccessfully();
|
||||
}
|
||||
};
|
||||
|
||||
// 删除图片
|
||||
const handleDelete = (file: UploadFile): boolean => {
|
||||
const findex = fileList.value.map(f => f.name).indexOf(file.name);
|
||||
if (findex > -1 && uploadList.value.length === number.value) {
|
||||
let ossId = fileList.value[findex].ossId;
|
||||
delOss(ossId);
|
||||
fileList.value.splice(findex, 1);
|
||||
emit("update:modelValue", listToString(fileList.value));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
const findex = fileList.value.map((f) => f.name).indexOf(file.name);
|
||||
if (findex > -1 && uploadList.value.length === number.value) {
|
||||
let ossId = fileList.value[findex].ossId;
|
||||
delOss(ossId);
|
||||
fileList.value.splice(findex, 1);
|
||||
emit('update:modelValue', listToString(fileList.value));
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
// 上传结束处理
|
||||
const uploadedSuccessfully = () => {
|
||||
if (number.value > 0 && uploadList.value.length === number.value) {
|
||||
fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
|
||||
uploadList.value = [];
|
||||
number.value = 0;
|
||||
emit("update:modelValue", listToString(fileList.value));
|
||||
proxy?.$modal.closeLoading();
|
||||
}
|
||||
}
|
||||
if (number.value > 0 && uploadList.value.length === number.value) {
|
||||
fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value);
|
||||
uploadList.value = [];
|
||||
number.value = 0;
|
||||
emit('update:modelValue', listToString(fileList.value));
|
||||
proxy?.$modal.closeLoading();
|
||||
}
|
||||
};
|
||||
|
||||
// 上传失败
|
||||
const handleUploadError = () => {
|
||||
proxy?.$modal.msgError("上传图片失败");
|
||||
proxy?.$modal.closeLoading();
|
||||
}
|
||||
proxy?.$modal.msgError('上传图片失败');
|
||||
proxy?.$modal.closeLoading();
|
||||
};
|
||||
|
||||
// 预览
|
||||
const handlePictureCardPreview = (file: any) => {
|
||||
dialogImageUrl.value = file.url;
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
dialogImageUrl.value = file.url;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 对象转成指定字符串分隔
|
||||
const listToString = (list: any[], separator?: string) => {
|
||||
let strs = "";
|
||||
separator = separator || ",";
|
||||
for (let i in list) {
|
||||
if (undefined !== list[i].ossId && list[i].url.indexOf("blob:") !== 0) {
|
||||
strs += list[i].ossId + separator;
|
||||
}
|
||||
let strs = '';
|
||||
separator = separator || ',';
|
||||
for (let i in list) {
|
||||
if (undefined !== list[i].ossId && list[i].url.indexOf('blob:') !== 0) {
|
||||
strs += list[i].ossId + separator;
|
||||
}
|
||||
return strs != "" ? strs.substring(0, strs.length - 1) : "";
|
||||
}
|
||||
}
|
||||
return strs != '' ? strs.substring(0, strs.length - 1) : '';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// .el-upload--picture-card 控制加号部分
|
||||
:deep(.hide .el-upload--picture-card) {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,16 +20,15 @@ import { useAppStore } from '@/store/modules/app';
|
||||
const appStore = useAppStore();
|
||||
const { locale } = useI18n();
|
||||
|
||||
|
||||
const message: any = {
|
||||
zh_CN: '切换语言成功！',
|
||||
en_US: 'Switch Language Successful!',
|
||||
}
|
||||
en_US: 'Switch Language Successful!'
|
||||
};
|
||||
const handleLanguageChange = (lang: string) => {
|
||||
locale.value = lang;
|
||||
appStore.changeLanguage(lang);
|
||||
ElMessage.success(message[lang] || '切换语言成功！');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div :class="{ 'hidden': hidden }" class="pagination-container">
|
||||
<div :class="{ hidden: hidden }" class="pagination-container">
|
||||
<el-pagination
|
||||
:background="background"
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:background="background"
|
||||
:layout="layout"
|
||||
:page-sizes="pageSizes"
|
||||
:pager-count="pagerCount"
|
||||
@ -16,69 +16,69 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Pagination'
|
||||
}
|
||||
name: 'Pagination'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { scrollTo } from '@/utils/scroll-to'
|
||||
import { propTypes } from "@/utils/propTypes";
|
||||
import { scrollTo } from '@/utils/scroll-to';
|
||||
import { propTypes } from '@/utils/propTypes';
|
||||
|
||||
const props = defineProps({
|
||||
total: propTypes.number,
|
||||
page: propTypes.number.def(1),
|
||||
limit: propTypes.number.def(20),
|
||||
pageSizes: {
|
||||
type: Array as PropType<number[]>,
|
||||
default: () => [10, 20, 30, 50]
|
||||
},
|
||||
// 移动端页码按钮的数量端默认值5
|
||||
pagerCount: propTypes.number.def(document.body.clientWidth < 992 ? 5 : 7),
|
||||
layout: propTypes.string.def('total, sizes, prev, pager, next, jumper'),
|
||||
background: propTypes.bool.def(true),
|
||||
autoScroll: propTypes.bool.def(true),
|
||||
hidden: propTypes.bool.def(false),
|
||||
float: propTypes.string.def('right')
|
||||
})
|
||||
total: propTypes.number,
|
||||
page: propTypes.number.def(1),
|
||||
limit: propTypes.number.def(20),
|
||||
pageSizes: {
|
||||
type: Array,
|
||||
default: () => [10, 20, 30, 50]
|
||||
},
|
||||
// 移动端页码按钮的数量端默认值5
|
||||
pagerCount: propTypes.number.def(document.body.clientWidth < 992 ? 5 : 7),
|
||||
layout: propTypes.string.def('total, sizes, prev, pager, next, jumper'),
|
||||
background: propTypes.bool.def(true),
|
||||
autoScroll: propTypes.bool.def(true),
|
||||
hidden: propTypes.bool.def(false),
|
||||
float: propTypes.string.def('right')
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:page', 'update:limit', 'pagination']);
|
||||
const currentPage = computed({
|
||||
get() {
|
||||
return props.page
|
||||
},
|
||||
set(val) {
|
||||
emit('update:page', val)
|
||||
}
|
||||
})
|
||||
get() {
|
||||
return props.page;
|
||||
},
|
||||
set(val) {
|
||||
emit('update:page', val);
|
||||
}
|
||||
});
|
||||
const pageSize = computed({
|
||||
get() {
|
||||
return props.limit
|
||||
},
|
||||
set(val){
|
||||
emit('update:limit', val)
|
||||
}
|
||||
})
|
||||
get() {
|
||||
return props.limit;
|
||||
},
|
||||
set(val) {
|
||||
emit('update:limit', val);
|
||||
}
|
||||
});
|
||||
function handleSizeChange(val: number) {
|
||||
if (currentPage.value * val > props.total) {
|
||||
currentPage.value = 1
|
||||
}
|
||||
emit('pagination', { page: currentPage.value, limit: val })
|
||||
if (props.autoScroll) {
|
||||
scrollTo(0, 800)
|
||||
}
|
||||
if (currentPage.value * val > props.total) {
|
||||
currentPage.value = 1;
|
||||
}
|
||||
emit('pagination', { page: currentPage.value, limit: val });
|
||||
if (props.autoScroll) {
|
||||
scrollTo(0, 800);
|
||||
}
|
||||
}
|
||||
function handleCurrentChange(val: number) {
|
||||
emit('pagination', { page: val, limit: pageSize.value })
|
||||
if (props.autoScroll) {
|
||||
scrollTo(0, 800)
|
||||
}
|
||||
emit('pagination', { page: val, limit: pageSize.value });
|
||||
if (props.autoScroll) {
|
||||
scrollTo(0, 800);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pagination-container {
|
||||
padding: 32px 16px;
|
||||
.el-pagination{
|
||||
.el-pagination {
|
||||
float: v-bind(float);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="top-right-btn" :style="style">
|
||||
<el-row>
|
||||
<el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
|
||||
<el-tooltip v-if="search" class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
|
||||
<el-button circle icon="Search" @click="toggleSearch()" />
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
|
||||
<el-button circle icon="Refresh" @click="refresh()" />
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="显示/隐藏列" placement="top" v-if="columns">
|
||||
<el-tooltip v-if="columns" class="item" effect="dark" content="显示/隐藏列" placement="top">
|
||||
<div class="show-btn">
|
||||
<el-popover placement="bottom" trigger="click">
|
||||
<div class="tree-header">显示/隐藏列</div>
|
||||
@ -15,9 +15,9 @@
|
||||
ref="columnRef"
|
||||
:data="columns"
|
||||
show-checkbox
|
||||
@check="columnChange"
|
||||
node-key="key"
|
||||
:props="{ label: 'label', children: 'children' }"
|
||||
@check="columnChange"
|
||||
></el-tree>
|
||||
<template #reference>
|
||||
<el-button circle icon="Menu" />
|
||||
@ -33,51 +33,49 @@
|
||||
import { propTypes } from '@/utils/propTypes';
|
||||
|
||||
const props = defineProps({
|
||||
showSearch: propTypes.bool.def(true),
|
||||
columns: {
|
||||
type: Array as PropType<FieldOption[]>,
|
||||
},
|
||||
search: propTypes.bool.def(true),
|
||||
gutter: propTypes.number.def(10),
|
||||
})
|
||||
showSearch: propTypes.bool.def(true),
|
||||
columns: propTypes.fieldOption,
|
||||
search: propTypes.bool.def(true),
|
||||
gutter: propTypes.number.def(10)
|
||||
});
|
||||
|
||||
const columnRef = ref<ElTreeInstance>();
|
||||
const emits = defineEmits(['update:showSearch', 'queryTable']);
|
||||
|
||||
const style = computed(() => {
|
||||
const ret: any = {};
|
||||
if (props.gutter) {
|
||||
ret.marginRight = `${props.gutter / 2}px`;
|
||||
}
|
||||
return ret;
|
||||
const ret: any = {};
|
||||
if (props.gutter) {
|
||||
ret.marginRight = `${props.gutter / 2}px`;
|
||||
}
|
||||
return ret;
|
||||
});
|
||||
|
||||
// 搜索
|
||||
function toggleSearch() {
|
||||
emits("update:showSearch", !props.showSearch);
|
||||
emits('update:showSearch', !props.showSearch);
|
||||
}
|
||||
|
||||
// 刷新
|
||||
function refresh() {
|
||||
emits("queryTable");
|
||||
emits('queryTable');
|
||||
}
|
||||
|
||||
// 更改数据列的显示和隐藏
|
||||
function columnChange(...args: any[]) {
|
||||
props.columns?.forEach((item) => {
|
||||
item.visible = args[1].checkedKeys.includes(item.key);
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// 显隐列初始默认隐藏列
|
||||
onMounted(() => {
|
||||
props.columns?.forEach((item) => {
|
||||
if (item.visible) {
|
||||
columnRef.value?.setChecked(item.key, true, false);
|
||||
// value.value.push(item.key);
|
||||
}
|
||||
})
|
||||
})
|
||||
props.columns?.forEach((item) => {
|
||||
if (item.visible) {
|
||||
columnRef.value?.setChecked(item.key, true, false);
|
||||
// value.value.push(item.key);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -93,7 +91,7 @@ onMounted(() => {
|
||||
.my-el-transfer {
|
||||
text-align: center;
|
||||
}
|
||||
.tree-header{
|
||||
.tree-header {
|
||||
width: 100%;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
|
||||
@ -8,6 +8,6 @@
|
||||
const url = ref('https://plus-doc.dromara.org/');
|
||||
|
||||
function goto() {
|
||||
window.open(url.value)
|
||||
window.open(url.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -8,6 +8,6 @@
|
||||
const url = ref('https://gitee.com/dromara/RuoYi-Vue-Plus');
|
||||
|
||||
function goto() {
|
||||
window.open(url.value)
|
||||
window.open(url.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -16,20 +16,20 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useAppStore from "@/store/modules/app";
|
||||
import useAppStore from '@/store/modules/app';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const size = computed(() => appStore.size);
|
||||
|
||||
const sizeOptions = ref([
|
||||
{ label: "较大", value: "large" },
|
||||
{ label: "默认", value: "default" },
|
||||
{ label: "稍小", value: "small" },
|
||||
{ label: '较大', value: 'large' },
|
||||
{ label: '默认', value: 'default' },
|
||||
{ label: '稍小', value: 'small' }
|
||||
]);
|
||||
|
||||
const handleSetSize = (size: string) => {
|
||||
appStore.setSize(size);
|
||||
}
|
||||
const handleSetSize = (size: 'large' | 'default' | 'small') => {
|
||||
appStore.setSize(size);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -8,17 +8,17 @@
|
||||
import { propTypes } from '@/utils/propTypes';
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: propTypes.string.isRequired,
|
||||
className: propTypes.string.def(''),
|
||||
color: propTypes.string.def(''),
|
||||
})
|
||||
const iconName = computed(() => `#icon-${props.iconClass}`);
|
||||
iconClass: propTypes.string.isRequired,
|
||||
className: propTypes.string.def(''),
|
||||
color: propTypes.string.def('')
|
||||
});
|
||||
const iconName = computed(() => `#icon-${props.iconClass}`);
|
||||
const svgClass = computed(() => {
|
||||
if (props.className) {
|
||||
return `svg-icon ${props.className}`
|
||||
}
|
||||
return 'svg-icon'
|
||||
})
|
||||
if (props.className) {
|
||||
return `svg-icon ${props.className}`;
|
||||
}
|
||||
return 'svg-icon';
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scope lang="scss">
|
||||
|
||||
@ -1,19 +1,18 @@
|
||||
<template>
|
||||
<el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
|
||||
<el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false" @select="handleSelect">
|
||||
<template v-for="(item, index) in topMenus">
|
||||
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
|
||||
><svg-icon
|
||||
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
||||
:icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item
|
||||
<el-menu-item v-if="index < visibleNumber" :key="index" :style="{ '--theme': theme }" :index="item.path"
|
||||
><svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta ? item.meta.icon : ''" />
|
||||
{{ item.meta?.title }}</el-menu-item
|
||||
>
|
||||
</template>
|
||||
|
||||
<!-- 顶部菜单超出数量折叠 -->
|
||||
<el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
|
||||
<el-sub-menu v-if="topMenus.length > visibleNumber" :style="{ '--theme': theme }" index="more">
|
||||
<template #title>更多菜单</template>
|
||||
<template v-for="(item, index) in topMenus">
|
||||
<el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber"
|
||||
><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item
|
||||
<el-menu-item v-if="index >= visibleNumber" :key="index" :index="item.path"
|
||||
><svg-icon :icon-class="item.meta ? item.meta.icon : ''" /> {{ item.meta?.title }}</el-menu-item
|
||||
>
|
||||
</template>
|
||||
</el-sub-menu>
|
||||
@ -26,7 +25,7 @@ import { isHttp } from '@/utils/validate';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import usePermissionStore from '@/store/modules/permission';
|
||||
import { RouteOption } from 'vue-router';
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
// 顶部栏初始数
|
||||
const visibleNumber = ref<number>(-1);
|
||||
@ -35,9 +34,9 @@ const currentIndex = ref<string>();
|
||||
// 隐藏侧边栏路由
|
||||
const hideList = ['/index', '/user/profile'];
|
||||
|
||||
const appStore = useAppStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const permissionStore = usePermissionStore()
|
||||
const appStore = useAppStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
@ -48,73 +47,73 @@ const routers = computed(() => permissionStore.topbarRouters);
|
||||
|
||||
// 顶部显示菜单
|
||||
const topMenus = computed(() => {
|
||||
let topMenus:RouteOption[] = [];
|
||||
let topMenus: RouteRecordRaw[] = [];
|
||||
routers.value.map((menu) => {
|
||||
if (menu.hidden !== true) {
|
||||
// 兼容顶部栏一级菜单内部跳转
|
||||
if (menu.path === "/") {
|
||||
topMenus.push(menu.children? menu.children[0] : menu);
|
||||
if (menu.path === '/') {
|
||||
topMenus.push(menu.children ? menu.children[0] : menu);
|
||||
} else {
|
||||
topMenus.push(menu);
|
||||
topMenus.push(menu);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
return topMenus;
|
||||
})
|
||||
});
|
||||
|
||||
// 设置子路由
|
||||
const childrenMenus = computed(() => {
|
||||
let childrenMenus:RouteOption[] = [];
|
||||
let childrenMenus: RouteRecordRaw[] = [];
|
||||
routers.value.map((router) => {
|
||||
router.children?.forEach((item) => {
|
||||
if (item.parentPath === undefined) {
|
||||
if(router.path === "/") {
|
||||
item.path = "/" + item.path;
|
||||
if (router.path === '/') {
|
||||
item.path = '/' + item.path;
|
||||
} else {
|
||||
if(!isHttp(item.path)) {
|
||||
item.path = router.path + "/" + item.path;
|
||||
if (!isHttp(item.path)) {
|
||||
item.path = router.path + '/' + item.path;
|
||||
}
|
||||
}
|
||||
item.parentPath = router.path;
|
||||
}
|
||||
childrenMenus.push(item);
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
return constantRoutes.concat(childrenMenus);
|
||||
})
|
||||
});
|
||||
|
||||
// 默认激活的菜单
|
||||
const activeMenu = computed(() => {
|
||||
const path = route.path;
|
||||
let activePath = path;
|
||||
if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
|
||||
if (path !== undefined && path.lastIndexOf('/') > 0 && hideList.indexOf(path) === -1) {
|
||||
const tmpPath = path.substring(1, path.length);
|
||||
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
|
||||
activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'));
|
||||
if (!route.meta.link) {
|
||||
appStore.toggleSideBarHide(false);
|
||||
appStore.toggleSideBarHide(false);
|
||||
}
|
||||
} else if(!route.children) {
|
||||
} else if (!route.children) {
|
||||
activePath = path;
|
||||
appStore.toggleSideBarHide(true);
|
||||
}
|
||||
activeRoutes(activePath);
|
||||
return activePath;
|
||||
})
|
||||
});
|
||||
|
||||
const setVisibleNumber = () => {
|
||||
const width = document.body.getBoundingClientRect().width / 3;
|
||||
visibleNumber.value = parseInt(String(width / 85));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelect = (key: string) => {
|
||||
currentIndex.value = key;
|
||||
const route = routers.value.find(item => item.path === key);
|
||||
const route = routers.value.find((item) => item.path === key);
|
||||
if (isHttp(key)) {
|
||||
// http(s):// 路径新窗口打开
|
||||
window.open(key, "_blank");
|
||||
window.open(key, '_blank');
|
||||
} else if (!route || !route.children) {
|
||||
// 没有子路由路径内部打开
|
||||
const routeMenu = childrenMenus.value.find(item => item.path === key);
|
||||
const routeMenu = childrenMenus.value.find((item) => item.path === key);
|
||||
if (routeMenu && routeMenu.query) {
|
||||
let query = JSON.parse(routeMenu.query);
|
||||
router.push({ path: key, query: query });
|
||||
@ -127,35 +126,35 @@ const handleSelect = (key: string) => {
|
||||
activeRoutes(key);
|
||||
appStore.toggleSideBarHide(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const activeRoutes = (key: string) => {
|
||||
let routes:RouteOption[] = [];
|
||||
let routes: RouteRecordRaw[] = [];
|
||||
if (childrenMenus.value && childrenMenus.value.length > 0) {
|
||||
childrenMenus.value.map((item) => {
|
||||
if (key == item.parentPath || (key == "index" && "" == item.path)) {
|
||||
if (key == item.parentPath || (key == 'index' && '' == item.path)) {
|
||||
routes.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
if(routes.length > 0) {
|
||||
if (routes.length > 0) {
|
||||
permissionStore.setSidebarRouters(routes);
|
||||
} else {
|
||||
appStore.toggleSideBarHide(true);
|
||||
}
|
||||
return routes;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', setVisibleNumber)
|
||||
})
|
||||
window.addEventListener('resize', setVisibleNumber);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', setVisibleNumber)
|
||||
})
|
||||
window.removeEventListener('resize', setVisibleNumber);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
setVisibleNumber()
|
||||
})
|
||||
setVisibleNumber();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@ -168,7 +167,8 @@ onMounted(() => {
|
||||
margin: 0 10px !important;
|
||||
}
|
||||
|
||||
.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
|
||||
.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
|
||||
.el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
|
||||
border-bottom: 2px solid #{'var(--theme)'} !important;
|
||||
color: #303133;
|
||||
}
|
||||
@ -184,7 +184,9 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* 背景色隐藏 */
|
||||
.topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
|
||||
.topmenu-container.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
|
||||
.topmenu-container.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
|
||||
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="el-tree-select">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="valueId"
|
||||
ref="treeSelect"
|
||||
v-model="valueId"
|
||||
style="width: 100%"
|
||||
:filterable="true"
|
||||
:clearable="true"
|
||||
@clear="clearHandle"
|
||||
:filter-method="selectFilterData"
|
||||
:placeholder="placeholder"
|
||||
@clear="clearHandle"
|
||||
>
|
||||
<el-option :value="valueId" :label="valueTitle">
|
||||
<el-tree
|
||||
@ -29,43 +29,32 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface ObjMap {
|
||||
value: string;
|
||||
label: string;
|
||||
children: string;
|
||||
}
|
||||
interface Props {
|
||||
objMap: ObjMap;
|
||||
accordion: boolean;
|
||||
value: string | number;
|
||||
options: any[];
|
||||
placeholder: string;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
/* 配置项 */
|
||||
objMap: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
value: 'id', // ID字段名
|
||||
label: 'label', // 显示名称
|
||||
children: 'children' // 子级字段名
|
||||
}
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
objMap: () => {
|
||||
return {
|
||||
value: 'id',
|
||||
label: 'label',
|
||||
children: 'children'
|
||||
};
|
||||
},
|
||||
/* 自动收起 */
|
||||
accordion: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false
|
||||
}
|
||||
},
|
||||
/**当前双向数据绑定的值 */
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
/**当前的数据 */
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
/**输入框内部的文字 */
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
accordion: false,
|
||||
value: '',
|
||||
options: () => [],
|
||||
placeholder: ''
|
||||
});
|
||||
|
||||
const selectTree = ref<ElTreeSelectInstance>();
|
||||
|
||||
@ -74,7 +63,7 @@ const emit = defineEmits(['update:value']);
|
||||
const valueId = computed({
|
||||
get: () => props.value,
|
||||
set: (val) => {
|
||||
emit('update:value', val)
|
||||
emit('update:value', val);
|
||||
}
|
||||
});
|
||||
const valueTitle = ref('');
|
||||
@ -83,54 +72,54 @@ const defaultExpandedKey = ref<any[]>([]);
|
||||
const initHandle = () => {
|
||||
nextTick(() => {
|
||||
const selectedValue = valueId.value;
|
||||
if (selectedValue !== null && typeof (selectedValue) !== 'undefined') {
|
||||
const node = selectTree.value?.getNode(selectedValue)
|
||||
if (selectedValue !== null && typeof selectedValue !== 'undefined') {
|
||||
const node = selectTree.value?.getNode(selectedValue);
|
||||
if (node) {
|
||||
valueTitle.value = node.data[props.objMap.label]
|
||||
selectTree.value?.setCurrentKey(selectedValue) // 设置默认选中
|
||||
defaultExpandedKey.value = [selectedValue] // 设置默认展开
|
||||
valueTitle.value = node.data[props.objMap.label];
|
||||
selectTree.value?.setCurrentKey(selectedValue); // 设置默认选中
|
||||
defaultExpandedKey.value = [selectedValue]; // 设置默认展开
|
||||
}
|
||||
} else {
|
||||
clearHandle()
|
||||
clearHandle();
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
const handleNodeClick = (node: any) => {
|
||||
valueTitle.value = node[props.objMap.label]
|
||||
valueTitle.value = node[props.objMap.label];
|
||||
valueId.value = node[props.objMap.value];
|
||||
defaultExpandedKey.value = [];
|
||||
selectTree.value?.blur()
|
||||
selectFilterData('')
|
||||
}
|
||||
selectTree.value?.blur();
|
||||
selectFilterData('');
|
||||
};
|
||||
const selectFilterData = (val: any) => {
|
||||
selectTree.value?.filter(val)
|
||||
}
|
||||
selectTree.value?.filter(val);
|
||||
};
|
||||
const filterNode = (value: any, data: any) => {
|
||||
if (!value) return true
|
||||
return data[props.objMap['label']].indexOf(value) !== -1
|
||||
}
|
||||
if (!value) return true;
|
||||
return data[props.objMap['label']].indexOf(value) !== -1;
|
||||
};
|
||||
const clearHandle = () => {
|
||||
valueTitle.value = ''
|
||||
valueId.value = ''
|
||||
valueTitle.value = '';
|
||||
valueId.value = '';
|
||||
defaultExpandedKey.value = [];
|
||||
clearSelected()
|
||||
}
|
||||
clearSelected();
|
||||
};
|
||||
const clearSelected = () => {
|
||||
const allNode = document.querySelectorAll('#tree-option .el-tree-node')
|
||||
allNode.forEach((element) => element.classList.remove('is-current'))
|
||||
}
|
||||
const allNode = document.querySelectorAll('#tree-option .el-tree-node');
|
||||
allNode.forEach((element) => element.classList.remove('is-current'));
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initHandle()
|
||||
})
|
||||
initHandle();
|
||||
});
|
||||
|
||||
watch(valueId, () => {
|
||||
initHandle();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/styles/variables.module.scss";
|
||||
@import '@/assets/styles/variables.module.scss';
|
||||
|
||||
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
|
||||
padding: 0;
|
||||
|
||||
@ -9,18 +9,18 @@ import { propTypes } from '@/utils/propTypes';
|
||||
|
||||
const props = defineProps({
|
||||
src: propTypes.string.isRequired
|
||||
})
|
||||
});
|
||||
|
||||
const height = ref(document.documentElement.clientHeight - 94.5 + "px;")
|
||||
const loading = ref(true)
|
||||
const url = computed(() => props.src)
|
||||
const height = ref(document.documentElement.clientHeight - 94.5 + 'px;');
|
||||
const loading = ref(true);
|
||||
const url = computed(() => props.src);
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 300);
|
||||
window.onresize = function temp() {
|
||||
height.value = document.documentElement.clientHeight - 94.5 + "px;";
|
||||
height.value = document.documentElement.clientHeight - 94.5 + 'px;';
|
||||
};
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -9,7 +9,7 @@ export const hasPermi: Directive = {
|
||||
// 「其他角色」按钮权限校验
|
||||
const { value } = binding;
|
||||
if (value && value instanceof Array && value.length > 0) {
|
||||
const hasPermission = permissions.some((permi) => {
|
||||
const hasPermission = permissions.some((permi: string) => {
|
||||
return permi === '*:*:*' || value.includes(permi);
|
||||
});
|
||||
if (!hasPermission) {
|
||||
@ -30,7 +30,7 @@ export const hasRoles: Directive = {
|
||||
const { value } = binding;
|
||||
const { roles } = useUserStore();
|
||||
if (value && value instanceof Array && value.length > 0) {
|
||||
const hasRole = roles.some((role) => {
|
||||
const hasRole = roles.some((role: string) => {
|
||||
return role === 'admin' || value.includes(role);
|
||||
});
|
||||
if (!hasRole) {
|
||||
|
||||
5
src/enums/LanguageEnum.ts
Normal file
5
src/enums/LanguageEnum.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export enum LanguageEnum {
|
||||
zh_CN = 'zh_CN',
|
||||
|
||||
en_US = 'en_US'
|
||||
}
|
||||
@ -4,6 +4,7 @@ import { createI18n } from 'vue-i18n';
|
||||
// 本地语言包
|
||||
import enUSLocale from './en_US';
|
||||
import zhCNLocale from './zh_CN';
|
||||
import { LanguageEnum } from '@/enums/LanguageEnum';
|
||||
|
||||
const messages = {
|
||||
zh_CN: {
|
||||
@ -18,12 +19,12 @@ const messages = {
|
||||
* 获取当前语言
|
||||
* @returns zh-cn|en ...
|
||||
*/
|
||||
export const getLanguage = () => {
|
||||
const language = useStorage('language', 'zh_CN');
|
||||
export const getLanguage = (): LanguageEnum => {
|
||||
const language = useStorage<LanguageEnum>('language', LanguageEnum.zh_CN);
|
||||
if (language.value) {
|
||||
return language.value;
|
||||
}
|
||||
return 'zh_CN';
|
||||
return LanguageEnum.zh_CN;
|
||||
};
|
||||
|
||||
const i18n = createI18n({
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition :enter-active-class="animante" mode="out-in">
|
||||
<keep-alive :include="tagsViewStore.cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="route.path" />
|
||||
<component :is="Component" v-if="!route.meta.link" :key="route.path" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
@ -14,22 +14,25 @@
|
||||
<script setup name="AppMain" lang="ts">
|
||||
import useTagsViewStore from '@/store/modules/tagsView';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import IframeToggle from './IframeToggle/index.vue'
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
import IframeToggle from './IframeToggle/index.vue';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const tagsViewStore = useTagsViewStore();
|
||||
|
||||
// 随机动画集合
|
||||
const animante = ref<string>('');
|
||||
const animationEnable = ref(useSettingsStore().animationEnable);
|
||||
watch(()=> useSettingsStore().animationEnable, (val) => {
|
||||
watch(
|
||||
() => useSettingsStore().animationEnable,
|
||||
(val) => {
|
||||
animationEnable.value = val;
|
||||
if (val) {
|
||||
animante.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string;
|
||||
animante.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string;
|
||||
} else {
|
||||
animante.value = proxy?.animate.defaultAnimate as string;
|
||||
animante.value = proxy?.animate.defaultAnimate as string;
|
||||
}
|
||||
}, { immediate: true });
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -41,7 +44,7 @@ watch(()=> useSettingsStore().animationEnable, (val) => {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fixed-header+.app-main {
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
@ -51,7 +54,7 @@ watch(()=> useSettingsStore().animationEnable, (val) => {
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
.fixed-header+.app-main {
|
||||
.fixed-header + .app-main {
|
||||
padding-top: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,27 @@
|
||||
<template>
|
||||
<transition-group name="fade-transform" mode="out-in">
|
||||
<inner-link
|
||||
v-for="(item, index) in tagsViewStore.iframeViews"
|
||||
:key="item.path"
|
||||
:iframeId="'iframe' + index"
|
||||
v-show="route.path === item.path"
|
||||
:src="item.meta ? item.meta.link : ''"
|
||||
></inner-link>
|
||||
</transition-group>
|
||||
<inner-link
|
||||
v-for="(item, index) in tagsViewStore.iframeViews"
|
||||
v-show="route.path === item.path"
|
||||
:key="item.path"
|
||||
:iframe-id="'iframe' + index"
|
||||
:src="iframeUrl(item.meta ? item.meta.link : '', item.query)"
|
||||
></inner-link>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import InnerLink from "../InnerLink/index.vue";
|
||||
import InnerLink from '../InnerLink/index.vue';
|
||||
import useTagsViewStore from '@/store/modules/tagsView';
|
||||
|
||||
const route = useRoute();
|
||||
const tagsViewStore = useTagsViewStore()
|
||||
const tagsViewStore = useTagsViewStore();
|
||||
|
||||
function iframeUrl(url: string | undefined, query: any) {
|
||||
if (Object.keys(query).length > 0) {
|
||||
let params = Object.keys(query)
|
||||
.map((key) => key + '=' + query[key])
|
||||
.join('&');
|
||||
return url + '?' + params;
|
||||
}
|
||||
return url;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,18 +1,15 @@
|
||||
<template>
|
||||
<div :style="'height:' + height">
|
||||
<iframe :id="iframeId" style="width: 100%; height: 100%" :src="src" frameborder="no"></iframe>
|
||||
<iframe :id="iframeId" style="width: 100%; height: 100%; border: 0" :src="src"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { propTypes } from '@/utils/propTypes';
|
||||
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
default: "/"
|
||||
},
|
||||
iframeId: {
|
||||
type: String
|
||||
}
|
||||
src: propTypes.string.def('/'),
|
||||
iframeId: propTypes.string.isRequired
|
||||
});
|
||||
const height = ref(document.documentElement.clientHeight - 94.5 + "px");
|
||||
const height = ref(document.documentElement.clientHeight - 94.5 + 'px');
|
||||
</script>
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
|
||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
|
||||
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" />
|
||||
<breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
||||
<top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
|
||||
|
||||
<div class="right-menu flex align-center">
|
||||
<template v-if="appStore.device !== 'mobile'">
|
||||
<el-select
|
||||
v-if="userId === 1 && tenantEnabled"
|
||||
v-model="companyName"
|
||||
clearable
|
||||
filterable
|
||||
reserve-keyword
|
||||
:placeholder="$t('navbar.selectTenant')"
|
||||
v-if="userId === 1 && tenantEnabled"
|
||||
@change="dynamicTenantEvent"
|
||||
@clear="dynamicClearEvent"
|
||||
>
|
||||
@ -63,17 +63,17 @@
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<div class="avatar-container">
|
||||
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
|
||||
<el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
|
||||
<div class="avatar-wrapper">
|
||||
<img :src="userStore.avatar" class="user-avatar" />
|
||||
<el-icon><caret-bottom /></el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<router-link to="/user/profile" v-if="!dynamic">
|
||||
<router-link v-if="!dynamic" to="/user/profile">
|
||||
<el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
|
||||
</router-link>
|
||||
<el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
|
||||
<el-dropdown-item v-if="settingsStore.showSettings" command="setLayout">
|
||||
<span>{{ $t('navbar.layoutSetting') }}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided command="logout">
|
||||
@ -92,10 +92,9 @@ import SearchMenu from './TopBar/search.vue';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import { getTenantList } from "@/api/login";
|
||||
import { dynamicClear, dynamicTenant } from "@/api/system/tenant";
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
import { TenantVO } from "@/api/types";
|
||||
import { getTenantList } from '@/api/login';
|
||||
import { dynamicClear, dynamicTenant } from '@/api/system/tenant';
|
||||
import { TenantVO } from '@/api/types';
|
||||
import notice from './notice/index.vue';
|
||||
import useNoticeStore from '@/store/modules/notice';
|
||||
|
||||
@ -119,7 +118,7 @@ const searchMenuRef = ref<InstanceType<typeof SearchMenu>>();
|
||||
|
||||
const openSearchMenu = () => {
|
||||
searchMenuRef.value?.openSearch();
|
||||
}
|
||||
};
|
||||
|
||||
// 动态切换
|
||||
const dynamicTenantEvent = async (tenantId: string) => {
|
||||
@ -129,14 +128,14 @@ const dynamicTenantEvent = async (tenantId: string) => {
|
||||
proxy?.$tab.closeAllPage();
|
||||
proxy?.$router.push('/');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const dynamicClearEvent = async () => {
|
||||
await dynamicClear();
|
||||
dynamic.value = false;
|
||||
proxy?.$tab.closeAllPage();
|
||||
proxy?.$router.push('/');
|
||||
}
|
||||
};
|
||||
|
||||
/** 租户列表 */
|
||||
const initTenantList = async () => {
|
||||
@ -145,56 +144,58 @@ const initTenantList = async () => {
|
||||
if (tenantEnabled.value) {
|
||||
tenantList.value = data.voList;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
initTenantList,
|
||||
})
|
||||
initTenantList
|
||||
});
|
||||
|
||||
const toggleSideBar = () => {
|
||||
appStore.toggleSideBar(false);
|
||||
}
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
await userStore.logout()
|
||||
location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
|
||||
}
|
||||
await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
await userStore.logout();
|
||||
location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
|
||||
};
|
||||
|
||||
const emits = defineEmits(['setLayout'])
|
||||
const emits = defineEmits(['setLayout']);
|
||||
const setLayout = () => {
|
||||
emits('setLayout');
|
||||
}
|
||||
emits('setLayout');
|
||||
};
|
||||
// 定义Command方法对象 通过key直接调用方法
|
||||
const commandMap: {[key: string]: any} = {
|
||||
setLayout,
|
||||
logout
|
||||
const commandMap: { [key: string]: any } = {
|
||||
setLayout,
|
||||
logout
|
||||
};
|
||||
const handleCommand = (command: string) => {
|
||||
// 判断是否存在该方法
|
||||
if (commandMap[command]) {
|
||||
commandMap[command]();
|
||||
}
|
||||
}
|
||||
|
||||
// 判断是否存在该方法
|
||||
if (commandMap[command]) {
|
||||
commandMap[command]();
|
||||
}
|
||||
};
|
||||
//用深度监听 消息
|
||||
watch(() => noticeStore.state.value.notices, (newVal, oldVal) => {
|
||||
newNotice.value = newVal.filter((item: any) => !item.read).length;
|
||||
}, { deep: true });
|
||||
watch(
|
||||
() => noticeStore.state.value.notices,
|
||||
(newVal) => {
|
||||
newNotice.value = newVal.filter((item: any) => !item.read).length;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
:deep(.el-select .el-input__wrapper) {
|
||||
height:30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
:deep(.el-badge__content.is-fixed){
|
||||
top: 12px;
|
||||
:deep(.el-badge__content.is-fixed) {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px" close-on-click-modal>
|
||||
<el-drawer v-model="showSettings" :with-header="false" direction="rtl" size="300px" close-on-click-modal>
|
||||
<h3 class="drawer-title">主题风格设置</h3>
|
||||
|
||||
<div class="setting-drawer-block-checbox">
|
||||
<div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.DARK)">
|
||||
<img src="@/assets/images/dark.svg" alt="dark" />
|
||||
<div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
|
||||
<div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
|
||||
<i aria-label="图标: check" class="anticon anticon-check">
|
||||
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
|
||||
<path
|
||||
@ -17,7 +17,7 @@
|
||||
</div>
|
||||
<div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.LIGHT)">
|
||||
<img src="@/assets/images/light.svg" alt="light" />
|
||||
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
|
||||
<div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
|
||||
<i aria-label="图标: check" class="anticon anticon-check">
|
||||
<svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class>
|
||||
<path
|
||||
@ -37,7 +37,7 @@
|
||||
<div class="drawer-item">
|
||||
<span>深色模式</span>
|
||||
<span class="comp-style">
|
||||
<el-switch v-model="isDark" @change="toggleDark" class="drawer-switch" />
|
||||
<el-switch v-model="isDark" class="drawer-switch" @change="toggleDark" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -48,35 +48,35 @@
|
||||
<div class="drawer-item">
|
||||
<span>开启 TopNav</span>
|
||||
<span class="comp-style">
|
||||
<el-switch v-model="topNav" class="drawer-switch" />
|
||||
<el-switch v-model="settingsStore.topNav" class="drawer-switch" @change="topNavChange" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>开启 Tags-Views</span>
|
||||
<span class="comp-style">
|
||||
<el-switch v-model="tagsView" class="drawer-switch" />
|
||||
<el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>固定 Header</span>
|
||||
<span class="comp-style">
|
||||
<el-switch v-model="fixedHeader" class="drawer-switch" />
|
||||
<el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>显示 Logo</span>
|
||||
<span class="comp-style">
|
||||
<el-switch v-model="sidebarLogo" class="drawer-switch" />
|
||||
<el-switch v-model="settingsStore.sidebarLogo" class="drawer-switch" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>动态标题</span>
|
||||
<span class="comp-style">
|
||||
<el-switch v-model="dynamicTitle" class="drawer-switch" />
|
||||
<el-switch v-model="settingsStore.dynamicTitle" class="drawer-switch" @change="dynamicTitleChange" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -88,126 +88,92 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDynamicTitle } from '@/utils/dynamicTitle'
|
||||
import useAppStore from '@/store/modules/app'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import usePermissionStore from '@/store/modules/permission'
|
||||
import { handleThemeStyle } from '@/utils/theme'
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
import { SettingTypeEnum } from "@/enums/SettingTypeEnum";
|
||||
import { SideThemeEnum } from "@/enums/SideThemeEnum";
|
||||
import { useDynamicTitle } from '@/utils/dynamicTitle';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import usePermissionStore from '@/store/modules/permission';
|
||||
import { handleThemeStyle } from '@/utils/theme';
|
||||
import { SideThemeEnum } from '@/enums/SideThemeEnum';
|
||||
import defaultSettings from '@/settings';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const appStore = useAppStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const permissionStore = usePermissionStore()
|
||||
|
||||
const appStore = useAppStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
|
||||
const showSettings = ref(false);
|
||||
const theme = ref(settingsStore.theme);
|
||||
const sideTheme = ref(settingsStore.sideTheme);
|
||||
const storeSettings = computed(() => settingsStore);
|
||||
const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
|
||||
const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']);
|
||||
|
||||
// 是否暗黑模式
|
||||
const isDark = useDark({
|
||||
storageKey: 'useDarkKey',
|
||||
valueDark: 'dark',
|
||||
valueLight: 'light',
|
||||
valueLight: 'light'
|
||||
});
|
||||
watch(isDark, ()=> {
|
||||
// 匹配菜单颜色
|
||||
watch(isDark, () => {
|
||||
if (isDark.value) {
|
||||
settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: SideThemeEnum.DARK })
|
||||
settingsStore.sideTheme = SideThemeEnum.DARK;
|
||||
} else {
|
||||
settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: sideTheme.value })
|
||||
settingsStore.sideTheme = sideTheme.value;
|
||||
}
|
||||
})
|
||||
});
|
||||
const toggleDark = () => useToggle(isDark);
|
||||
|
||||
/** 是否需要topNav */
|
||||
const topNav = computed({
|
||||
get: () => storeSettings.value.topNav,
|
||||
set: (val) => {
|
||||
settingsStore.changeSetting({ key: SettingTypeEnum.TOP_NAV, value: val })
|
||||
if (!val) {
|
||||
appStore.toggleSideBarHide(false);
|
||||
permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
|
||||
}
|
||||
}
|
||||
})
|
||||
/** 是否需要tagview */
|
||||
const tagsView = computed({
|
||||
get: () => storeSettings.value.tagsView,
|
||||
set: (val) => {
|
||||
settingsStore.changeSetting({ key: SettingTypeEnum.TAGS_VIEW, value: val })
|
||||
}
|
||||
})
|
||||
/**是否需要固定头部 */
|
||||
const fixedHeader = computed({
|
||||
get: () => storeSettings.value.fixedHeader,
|
||||
set: (val) => {
|
||||
settingsStore.changeSetting({ key: SettingTypeEnum.FIXED_HEADER, value: val })
|
||||
}
|
||||
})
|
||||
/**是否需要侧边栏的logo */
|
||||
const sidebarLogo = computed({
|
||||
get: () => storeSettings.value.sidebarLogo,
|
||||
set: (val) => {
|
||||
settingsStore.changeSetting({ key: SettingTypeEnum.SIDEBAR_LOGO, value: val })
|
||||
}
|
||||
})
|
||||
/**是否需要侧边栏的动态网页的title */
|
||||
const dynamicTitle = computed({
|
||||
get: () => storeSettings.value.dynamicTitle,
|
||||
set: (val) => {
|
||||
settingsStore.changeSetting({ key: SettingTypeEnum.DYNAMIC_TITLE, value: val })
|
||||
// 动态设置网页标题
|
||||
useDynamicTitle()
|
||||
}
|
||||
})
|
||||
const topNavChange = (val: any) => {
|
||||
if (!val) {
|
||||
appStore.toggleSideBarHide(false);
|
||||
permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
|
||||
}
|
||||
};
|
||||
|
||||
const themeChange = (val: string | null) => {
|
||||
settingsStore.changeSetting({ key: SettingTypeEnum.THEME, value: val })
|
||||
theme.value = val;
|
||||
if (val) {
|
||||
handleThemeStyle(val);
|
||||
}
|
||||
}
|
||||
const dynamicTitleChange = () => {
|
||||
// 动态设置网页标题
|
||||
useDynamicTitle();
|
||||
};
|
||||
|
||||
const themeChange = (val: string) => {
|
||||
settingsStore.theme = val;
|
||||
handleThemeStyle(val);
|
||||
};
|
||||
const handleTheme = (val: string) => {
|
||||
sideTheme.value = val;
|
||||
if (isDark.value && val === SideThemeEnum.LIGHT) {
|
||||
// 暗黑模式颜色不变
|
||||
settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: SideThemeEnum.DARK })
|
||||
return
|
||||
}
|
||||
settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: val })
|
||||
}
|
||||
sideTheme.value = val;
|
||||
if (isDark.value && val === SideThemeEnum.LIGHT) {
|
||||
// 暗黑模式颜色不变
|
||||
settingsStore.sideTheme = SideThemeEnum.DARK;
|
||||
return;
|
||||
}
|
||||
settingsStore.sideTheme = val;
|
||||
};
|
||||
const saveSetting = () => {
|
||||
proxy?.$modal.loading("正在保存到本地，请稍候...");
|
||||
let layoutSetting = {
|
||||
"topNav": storeSettings.value.topNav,
|
||||
"tagsView": storeSettings.value.tagsView,
|
||||
"fixedHeader": storeSettings.value.fixedHeader,
|
||||
"sidebarLogo": storeSettings.value.sidebarLogo,
|
||||
"dynamicTitle": storeSettings.value.dynamicTitle,
|
||||
"sideTheme": storeSettings.value.sideTheme,
|
||||
"theme": storeSettings.value.theme
|
||||
};
|
||||
localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
|
||||
setTimeout(() => {proxy?.$modal.closeLoading()}, 1000)
|
||||
}
|
||||
proxy?.$modal.loading('正在保存到本地，请稍候...');
|
||||
const settings = useStorage<LayoutSetting>('layout-setting', defaultSettings);
|
||||
settings.value.topNav = storeSettings.value.topNav;
|
||||
settings.value.tagsView = storeSettings.value.tagsView;
|
||||
settings.value.fixedHeader = storeSettings.value.fixedHeader;
|
||||
settings.value.sidebarLogo = storeSettings.value.sidebarLogo;
|
||||
settings.value.dynamicTitle = storeSettings.value.dynamicTitle;
|
||||
settings.value.sideTheme = storeSettings.value.sideTheme;
|
||||
settings.value.theme = storeSettings.value.theme;
|
||||
setTimeout(() => {
|
||||
proxy?.$modal.closeLoading();
|
||||
}, 1000);
|
||||
};
|
||||
const resetSetting = () => {
|
||||
proxy?.$modal.loading("正在清除设置缓存并刷新，请稍候...");
|
||||
localStorage.removeItem("layout-setting")
|
||||
setTimeout("window.location.reload()", 1000)
|
||||
}
|
||||
proxy?.$modal.loading('正在清除设置缓存并刷新，请稍候...');
|
||||
useStorage<any>('layout-setting', null).value = null;
|
||||
setTimeout('window.location.reload()', 1000);
|
||||
};
|
||||
const openSetting = () => {
|
||||
showSettings.value = true;
|
||||
}
|
||||
showSettings.value = true;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
openSetting,
|
||||
})
|
||||
openSetting
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -5,36 +5,36 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { isExternal } from '@/utils/validate'
|
||||
import { isExternal } from '@/utils/validate';
|
||||
|
||||
const props = defineProps({
|
||||
to: {
|
||||
type: [String, Object],
|
||||
required: true
|
||||
}
|
||||
})
|
||||
to: {
|
||||
type: [String, Object],
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const isExt = computed(() => {
|
||||
return isExternal(props.to as string)
|
||||
})
|
||||
return isExternal(props.to as string);
|
||||
});
|
||||
|
||||
const type = computed(() => {
|
||||
if (isExt.value) {
|
||||
return 'a'
|
||||
}
|
||||
return 'router-link'
|
||||
})
|
||||
if (isExt.value) {
|
||||
return 'a';
|
||||
}
|
||||
return 'router-link';
|
||||
});
|
||||
|
||||
function linkProps() {
|
||||
if (isExt.value) {
|
||||
return {
|
||||
href: props.to,
|
||||
target: '_blank',
|
||||
rel: 'noopener'
|
||||
}
|
||||
}
|
||||
if (isExt.value) {
|
||||
return {
|
||||
to: props.to
|
||||
}
|
||||
href: props.to,
|
||||
target: '_blank',
|
||||
rel: 'noopener'
|
||||
};
|
||||
}
|
||||
return {
|
||||
to: props.to
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="sidebar-logo-container"
|
||||
:class="{ 'collapse': collapse }"
|
||||
:class="{ collapse: collapse }"
|
||||
:style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
|
||||
>
|
||||
<transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
|
||||
@ -22,18 +22,17 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import variables from '@/assets/styles/variables.module.scss'
|
||||
import logo from '@/assets/logo/logo.png'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
import variables from '@/assets/styles/variables.module.scss';
|
||||
import logo from '@/assets/logo/logo.png';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
defineProps({
|
||||
collapse: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
collapse: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const title = ref('RuoYi-Vue-Plus');
|
||||
const settingsStore = useSettingsStore();
|
||||
@ -77,7 +76,12 @@ const sideTheme = computed(() => settingsStore.sideTheme);
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
font-family:
|
||||
Avenir,
|
||||
Helvetica Neue,
|
||||
Arial,
|
||||
Helvetica,
|
||||
sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,13 +13,13 @@
|
||||
|
||||
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
|
||||
<template v-if="item.meta" #title>
|
||||
<svg-icon :icon-class="item.meta ? item.meta.icon : '' " />
|
||||
<svg-icon :icon-class="item.meta ? item.meta.icon : ''" />
|
||||
<span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
|
||||
</template>
|
||||
|
||||
<sidebar-item
|
||||
v-for="(child) in item.children as RouteOption[]"
|
||||
:key="child.path"
|
||||
v-for="(child, index) in item.children"
|
||||
:key="child.path + index"
|
||||
:is-nest="true"
|
||||
:item="child"
|
||||
:base-path="resolvePath(child.path)"
|
||||
@ -30,79 +30,74 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { isExternal } from '@/utils/validate'
|
||||
import AppLink from './Link.vue'
|
||||
import { getNormalPath } from '@/utils/ruoyi'
|
||||
import { RouteOption } from "vue-router";
|
||||
import { isExternal } from '@/utils/validate';
|
||||
import AppLink from './Link.vue';
|
||||
import { getNormalPath } from '@/utils/ruoyi';
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
const props = defineProps({
|
||||
// route object
|
||||
item: {
|
||||
type: Object as PropType<RouteOption>,
|
||||
required: true
|
||||
},
|
||||
isNest: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
item: {
|
||||
type: Object as PropType<RouteRecordRaw>,
|
||||
required: true
|
||||
},
|
||||
isNest: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
basePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
const onlyOneChild = ref<any>({});
|
||||
|
||||
const hasOneShowingChild = (parent: RouteOption, children?:RouteOption[]) => {
|
||||
if (!children) {
|
||||
children = [];
|
||||
const hasOneShowingChild = (parent: RouteRecordRaw, children?: RouteRecordRaw[]) => {
|
||||
if (!children) {
|
||||
children = [];
|
||||
}
|
||||
const showingChildren = children.filter((item) => {
|
||||
if (item.hidden) {
|
||||
return false;
|
||||
} else {
|
||||
// Temp set(will be used if only has one showing child)
|
||||
onlyOneChild.value = item;
|
||||
return true;
|
||||
}
|
||||
const showingChildren = children.filter(item => {
|
||||
if (item.hidden) {
|
||||
return false
|
||||
} else {
|
||||
// Temp set(will be used if only has one showing child)
|
||||
onlyOneChild.value = item
|
||||
return true
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// When there is only one child router, the child router is displayed by default
|
||||
if (showingChildren.length === 1) {
|
||||
return true
|
||||
}
|
||||
// When there is only one child router, the child router is displayed by default
|
||||
if (showingChildren.length === 1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Show parent if there are no child router to display
|
||||
if (showingChildren.length === 0) {
|
||||
onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
|
||||
if (parent.name === '2222') {
|
||||
console.log(onlyOneChild.value)
|
||||
}
|
||||
return true
|
||||
}
|
||||
// Show parent if there are no child router to display
|
||||
if (showingChildren.length === 0) {
|
||||
onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
return false
|
||||
return false;
|
||||
};
|
||||
|
||||
const resolvePath = (routePath:string, routeQuery?:string): any => {
|
||||
if (isExternal(routePath)) {
|
||||
return routePath
|
||||
}
|
||||
if (isExternal(props.basePath)) {
|
||||
return props.basePath
|
||||
}
|
||||
if (routeQuery) {
|
||||
let query = JSON.parse(routeQuery);
|
||||
return { path: getNormalPath(props.basePath + '/' + routePath), query: query }
|
||||
}
|
||||
return getNormalPath(props.basePath + '/' + routePath)
|
||||
}
|
||||
const resolvePath = (routePath: string, routeQuery?: string): any => {
|
||||
if (isExternal(routePath)) {
|
||||
return routePath;
|
||||
}
|
||||
if (isExternal(props.basePath as string)) {
|
||||
return props.basePath;
|
||||
}
|
||||
if (routeQuery) {
|
||||
let query = JSON.parse(routeQuery);
|
||||
return { path: getNormalPath(props.basePath + '/' + routePath), query: query };
|
||||
}
|
||||
return getNormalPath(props.basePath + '/' + routePath);
|
||||
};
|
||||
|
||||
const hasTitle = (title: string | undefined): string => {
|
||||
if(!title || title.length <= 5) {
|
||||
return "";
|
||||
}
|
||||
return title;
|
||||
}
|
||||
if (!title || title.length <= 5) {
|
||||
return '';
|
||||
}
|
||||
return title;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
>
|
||||
<sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
|
||||
<sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :item="r" :base-path="r.path" />
|
||||
</el-menu>
|
||||
</transition>
|
||||
</el-scrollbar>
|
||||
@ -21,35 +21,35 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Logo from './Logo.vue'
|
||||
import SidebarItem from './SidebarItem.vue'
|
||||
import variables from '@/assets/styles/variables.module.scss'
|
||||
import useAppStore from '@/store/modules/app'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import usePermissionStore from '@/store/modules/permission'
|
||||
import { RouteOption } from "vue-router";
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
import Logo from './Logo.vue';
|
||||
import SidebarItem from './SidebarItem.vue';
|
||||
import variables from '@/assets/styles/variables.module.scss';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import usePermissionStore from '@/store/modules/permission';
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const route = useRoute();
|
||||
const appStore = useAppStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const permissionStore = usePermissionStore()
|
||||
|
||||
const sidebarRouters = computed<RouteOption[]>(() => permissionStore.sidebarRouters);
|
||||
const appStore = useAppStore();
|
||||
const settingsStore = useSettingsStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
const sidebarRouters = computed<RouteRecordRaw[]>(() => permissionStore.sidebarRouters);
|
||||
const showLogo = computed(() => settingsStore.sidebarLogo);
|
||||
const sideTheme = computed(() => settingsStore.sideTheme);
|
||||
const theme = computed(() => settingsStore.theme);
|
||||
const isCollapse = computed(() => !appStore.sidebar.opened);
|
||||
|
||||
const activeMenu = computed(() => {
|
||||
const { meta, path } = route;
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu;
|
||||
}
|
||||
return path;
|
||||
})
|
||||
const { meta, path } = route;
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu;
|
||||
}
|
||||
return path;
|
||||
});
|
||||
|
||||
const bgColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground);
|
||||
const textColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor);
|
||||
const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
|
||||
const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
|
||||
</script>
|
||||
|
||||
@ -10,7 +10,6 @@ import { LoginData } from '@/api/types';
|
||||
const route = useRoute();
|
||||
const loading = ref(true);
|
||||
|
||||
|
||||
/**
|
||||
* 接收Route传递的参数
|
||||
* @param {Object} route.query.
|
||||
@ -18,8 +17,7 @@ const loading = ref(true);
|
||||
const code = route.query.code as string;
|
||||
const state = route.query.state as string;
|
||||
const source = route.query.source as string;
|
||||
const tenantId = localStorage.getItem("tenantId") ? localStorage.getItem("tenantId") as string : '000000';
|
||||
|
||||
const tenantId = localStorage.getItem('tenantId') ? (localStorage.getItem('tenantId') as string) : '000000';
|
||||
|
||||
const processResponse = async (res: any) => {
|
||||
if (res.code !== 200) {
|
||||
@ -52,7 +50,6 @@ const callbackByCode = async (data: LoginData) => {
|
||||
};
|
||||
|
||||
const loginByCode = async (data: LoginData) => {
|
||||
console.log(2)
|
||||
try {
|
||||
const res = await login(data);
|
||||
await processResponse(res);
|
||||
|
||||
@ -5,84 +5,85 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useTagsViewStore from '@/store/modules/tagsView'
|
||||
import { TagView } from 'vue-router'
|
||||
import useTagsViewStore from '@/store/modules/tagsView';
|
||||
import { TagView } from 'vue-router';
|
||||
|
||||
const tagAndTagSpacing = ref(4);
|
||||
|
||||
const scrollContainerRef = ref<ElScrollbarInstance>()
|
||||
const scrollContainerRef = ref<ElScrollbarInstance>();
|
||||
const scrollWrapper = computed(() => scrollContainerRef.value?.$refs.wrapRef as any);
|
||||
|
||||
onMounted(() => {
|
||||
scrollWrapper.value?.addEventListener('scroll', emitScroll, true)
|
||||
})
|
||||
scrollWrapper.value?.addEventListener('scroll', emitScroll, true);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
scrollWrapper.value?.removeEventListener('scroll', emitScroll)
|
||||
})
|
||||
scrollWrapper.value?.removeEventListener('scroll', emitScroll);
|
||||
});
|
||||
|
||||
const handleScroll = (e: WheelEvent) => {
|
||||
const eventDelta = (e as any).wheelDelta || - e.deltaY * 40
|
||||
const $scrollWrapper = scrollWrapper.value;
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
|
||||
}
|
||||
const emits = defineEmits(['scroll'])
|
||||
const eventDelta = (e as any).wheelDelta || -e.deltaY * 40;
|
||||
const $scrollWrapper = scrollWrapper.value;
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
|
||||
};
|
||||
const emits = defineEmits(['scroll']);
|
||||
const emitScroll = () => {
|
||||
emits('scroll')
|
||||
}
|
||||
emits('scroll');
|
||||
};
|
||||
|
||||
const tagsViewStore = useTagsViewStore()
|
||||
const tagsViewStore = useTagsViewStore();
|
||||
const visitedViews = computed(() => tagsViewStore.visitedViews);
|
||||
|
||||
const moveToTarget = (currentTag: TagView) => {
|
||||
const $container = scrollContainerRef.value?.$el
|
||||
const $containerWidth = $container.offsetWidth
|
||||
const $scrollWrapper = scrollWrapper.value;
|
||||
const $container = scrollContainerRef.value?.$el;
|
||||
const $containerWidth = $container.offsetWidth;
|
||||
const $scrollWrapper = scrollWrapper.value;
|
||||
|
||||
let firstTag = null
|
||||
let lastTag = null
|
||||
let firstTag = null;
|
||||
let lastTag = null;
|
||||
|
||||
// find first tag and last tag
|
||||
if (visitedViews.value.length > 0) {
|
||||
firstTag = visitedViews.value[0]
|
||||
lastTag = visitedViews.value[visitedViews.value.length - 1]
|
||||
// find first tag and last tag
|
||||
if (visitedViews.value.length > 0) {
|
||||
firstTag = visitedViews.value[0];
|
||||
lastTag = visitedViews.value[visitedViews.value.length - 1];
|
||||
}
|
||||
|
||||
if (firstTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = 0;
|
||||
} else if (lastTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
|
||||
} else {
|
||||
const tagListDom: any = document.getElementsByClassName('tags-view-item');
|
||||
const currentIndex = visitedViews.value.findIndex((item) => item === currentTag);
|
||||
let prevTag = null;
|
||||
let nextTag = null;
|
||||
|
||||
for (const k in tagListDom) {
|
||||
if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
|
||||
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
|
||||
prevTag = tagListDom[k];
|
||||
}
|
||||
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
|
||||
nextTag = tagListDom[k];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (firstTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = 0
|
||||
} else if (lastTag === currentTag) {
|
||||
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
|
||||
} else {
|
||||
const tagListDom: any = document.getElementsByClassName('tags-view-item');
|
||||
const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
|
||||
let prevTag = null
|
||||
let nextTag = null
|
||||
// the tag's offsetLeft after of nextTag
|
||||
const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value;
|
||||
|
||||
for (const k in tagListDom) {
|
||||
if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
|
||||
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
|
||||
prevTag = tagListDom[k];
|
||||
}
|
||||
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
|
||||
nextTag = tagListDom[k];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// the tag's offsetLeft after of nextTag
|
||||
const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value
|
||||
|
||||
// the tag's offsetLeft before of prevTag
|
||||
const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value
|
||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
||||
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
|
||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
||||
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
|
||||
}
|
||||
// the tag's offsetLeft before of prevTag
|
||||
const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value;
|
||||
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
|
||||
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
|
||||
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
|
||||
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
moveToTarget,
|
||||
})
|
||||
moveToTarget
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -14,36 +14,35 @@
|
||||
>
|
||||
{{ tag.title }}
|
||||
<span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
|
||||
<close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
|
||||
<close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
|
||||
</span>
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em;" /> 刷新页面</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em;" /> 关闭当前</li>
|
||||
<li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em;" /> 关闭其他</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em;" /> 关闭左侧</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em;" /> 关闭右侧</li>
|
||||
<li @click="closeAllTags(selectedTag)"><circle-close style="width: 1em; height: 1em;" /> 全部关闭</li>
|
||||
<li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> 刷新页面</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em" /> 关闭当前</li>
|
||||
<li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> 关闭其他</li>
|
||||
<li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em" /> 关闭左侧</li>
|
||||
<li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em" /> 关闭右侧</li>
|
||||
<li @click="closeAllTags(selectedTag)"><circle-close style="width: 1em; height: 1em" /> 全部关闭</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ScrollPane from './ScrollPane.vue'
|
||||
import { getNormalPath } from '@/utils/ruoyi'
|
||||
import useTagsViewStore from "@/store/modules/tagsView";
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import usePermissionStore from '@/store/modules/permission'
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
import { RouteOption, TagView, RouteLocationRaw } from "vue-router";
|
||||
import ScrollPane from './ScrollPane.vue';
|
||||
import { getNormalPath } from '@/utils/ruoyi';
|
||||
import useTagsViewStore from '@/store/modules/tagsView';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import usePermissionStore from '@/store/modules/permission';
|
||||
import { RouteRecordRaw, TagView } from 'vue-router';
|
||||
|
||||
const visible = ref(false);
|
||||
const top = ref(0);
|
||||
const left = ref(0);
|
||||
const selectedTag = ref<TagView>({});
|
||||
const affixTags = ref<TagView[]>([]);
|
||||
const scrollPaneRef = ref(ScrollPane);
|
||||
const scrollPaneRef = ref<InstanceType<typeof ScrollPane>>();
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const route = useRoute();
|
||||
@ -54,186 +53,186 @@ const routes = computed(() => usePermissionStore().routes);
|
||||
const theme = computed(() => useSettingsStore().theme);
|
||||
|
||||
watch(route, () => {
|
||||
addTags();
|
||||
moveToCurrentTag();
|
||||
})
|
||||
addTags();
|
||||
moveToCurrentTag();
|
||||
});
|
||||
watch(visible, (value) => {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', closeMenu);
|
||||
} else {
|
||||
document.body.removeEventListener('click', closeMenu);
|
||||
}
|
||||
})
|
||||
if (value) {
|
||||
document.body.addEventListener('click', closeMenu);
|
||||
} else {
|
||||
document.body.removeEventListener('click', closeMenu);
|
||||
}
|
||||
});
|
||||
|
||||
const isActive = (r: TagView): boolean => {
|
||||
return r.path === route.path;
|
||||
}
|
||||
return r.path === route.path;
|
||||
};
|
||||
const activeStyle = (tag: TagView) => {
|
||||
if (!isActive(tag)) return {};
|
||||
return {
|
||||
"background-color": theme.value,
|
||||
"border-color": theme.value
|
||||
};
|
||||
}
|
||||
if (!isActive(tag)) return {};
|
||||
return {
|
||||
'background-color': theme.value,
|
||||
'border-color': theme.value
|
||||
};
|
||||
};
|
||||
const isAffix = (tag: TagView) => {
|
||||
return tag.meta && tag.meta.affix;
|
||||
}
|
||||
return tag.meta && tag.meta.affix;
|
||||
};
|
||||
const isFirstView = () => {
|
||||
try {
|
||||
return selectedTag.value.fullPath === '/index' || selectedTag.value.fullPath === visitedViews.value[1].fullPath;
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
try {
|
||||
return selectedTag.value.fullPath === '/index' || selectedTag.value.fullPath === visitedViews.value[1].fullPath;
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const isLastView = () => {
|
||||
try {
|
||||
return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1].fullPath;
|
||||
} catch (err) {
|
||||
return false;
|
||||
try {
|
||||
return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1].fullPath;
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const filterAffixTags = (routes: RouteRecordRaw[], basePath = '') => {
|
||||
let tags: TagView[] = [];
|
||||
|
||||
routes.forEach((route) => {
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = getNormalPath(basePath + '/' + route.path);
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name as string,
|
||||
meta: { ...route.meta }
|
||||
});
|
||||
}
|
||||
}
|
||||
const filterAffixTags = (routes:RouteOption [], basePath = '') => {
|
||||
let tags:TagView[] = []
|
||||
routes.forEach(route => {
|
||||
if (route.meta && route.meta.affix) {
|
||||
const tagPath = getNormalPath(basePath + '/' + route.path);
|
||||
tags.push({
|
||||
fullPath: tagPath,
|
||||
path: tagPath,
|
||||
name: route.name,
|
||||
meta: { ...route.meta }
|
||||
})
|
||||
}
|
||||
if (route.children) {
|
||||
const tempTags = filterAffixTags(route.children, route.path);
|
||||
if (tempTags.length >= 1) {
|
||||
tags = [...tags, ...tempTags];
|
||||
}
|
||||
}
|
||||
})
|
||||
return tags
|
||||
}
|
||||
if (route.children) {
|
||||
const tempTags = filterAffixTags(route.children, route.path);
|
||||
if (tempTags.length >= 1) {
|
||||
tags = [...tags, ...tempTags];
|
||||
}
|
||||
}
|
||||
});
|
||||
return tags;
|
||||
};
|
||||
const initTags = () => {
|
||||
const res = filterAffixTags(routes.value);
|
||||
affixTags.value = res;
|
||||
for (const tag of res) {
|
||||
// Must have tag name
|
||||
if (tag.name) {
|
||||
useTagsViewStore().addVisitedView(tag);
|
||||
}
|
||||
const res = filterAffixTags(routes.value as any);
|
||||
affixTags.value = res;
|
||||
for (const tag of res) {
|
||||
// Must have tag name
|
||||
if (tag.name) {
|
||||
useTagsViewStore().addVisitedView(tag);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const addTags = () => {
|
||||
const { name } = route;
|
||||
if(route.query.title) {
|
||||
route.meta.title = route.query.title;
|
||||
}
|
||||
if (name) {
|
||||
useTagsViewStore().addView(route);
|
||||
if (route.meta.link) {
|
||||
useTagsViewStore().addIframeView(route);
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
const moveToCurrentTag = () => {
|
||||
nextTick(() => {
|
||||
for (const r of visitedViews.value) {
|
||||
if (r.path === route.path) {
|
||||
scrollPaneRef.value.moveToTarget(r);
|
||||
// when query is different then update
|
||||
if (r.fullPath !== route.fullPath) {
|
||||
useTagsViewStore().updateVisitedView(route);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const refreshSelectedTag = (view: TagView) => {
|
||||
proxy?.$tab.refreshPage(view);
|
||||
const { name } = route;
|
||||
if (route.query.title) {
|
||||
route.meta.title = route.query.title as string;
|
||||
}
|
||||
if (name) {
|
||||
useTagsViewStore().addView(route as any);
|
||||
if (route.meta.link) {
|
||||
useTagsViewStore().delIframeView(route);
|
||||
useTagsViewStore().addIframeView(route as any);
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
const moveToCurrentTag = () => {
|
||||
nextTick(() => {
|
||||
for (const r of visitedViews.value) {
|
||||
if (r.path === route.path) {
|
||||
scrollPaneRef.value?.moveToTarget(r);
|
||||
// when query is different then update
|
||||
if (r.fullPath !== route.fullPath) {
|
||||
useTagsViewStore().updateVisitedView(route as any);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const refreshSelectedTag = (view: TagView) => {
|
||||
proxy?.$tab.refreshPage(view);
|
||||
if (route.meta.link) {
|
||||
useTagsViewStore().delIframeView(route as any);
|
||||
}
|
||||
};
|
||||
const closeSelectedTag = (view: TagView) => {
|
||||
proxy?.$tab.closePage(view).then(({ visitedViews }: any) => {
|
||||
if (isActive(view)) {
|
||||
toLastView(visitedViews, view);
|
||||
}
|
||||
})
|
||||
}
|
||||
proxy?.$tab.closePage(view).then(({ visitedViews }: any) => {
|
||||
if (isActive(view)) {
|
||||
toLastView(visitedViews, view);
|
||||
}
|
||||
});
|
||||
};
|
||||
const closeRightTags = () => {
|
||||
proxy?.$tab.closeRightPage(selectedTag.value).then(visitedViews => {
|
||||
if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews);
|
||||
}
|
||||
})
|
||||
}
|
||||
proxy?.$tab.closeRightPage(selectedTag.value).then((visitedViews: TagView[]) => {
|
||||
if (!visitedViews.find((i: TagView) => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews);
|
||||
}
|
||||
});
|
||||
};
|
||||
const closeLeftTags = () => {
|
||||
proxy?.$tab.closeLeftPage(selectedTag.value).then(visitedViews => {
|
||||
if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews);
|
||||
}
|
||||
})
|
||||
}
|
||||
proxy?.$tab.closeLeftPage(selectedTag.value).then((visitedViews: TagView[]) => {
|
||||
if (!visitedViews.find((i: TagView) => i.fullPath === route.fullPath)) {
|
||||
toLastView(visitedViews);
|
||||
}
|
||||
});
|
||||
};
|
||||
const closeOthersTags = () => {
|
||||
router.push(selectedTag.value as RouteLocationRaw).catch(() => { });
|
||||
proxy?.$tab.closeOtherPage(selectedTag.value).then(() => {
|
||||
moveToCurrentTag();
|
||||
})
|
||||
}
|
||||
router.push(selectedTag.value).catch(() => {});
|
||||
proxy?.$tab.closeOtherPage(selectedTag.value).then(() => {
|
||||
moveToCurrentTag();
|
||||
});
|
||||
};
|
||||
const closeAllTags = (view: TagView) => {
|
||||
proxy?.$tab.closeAllPage().then(({ visitedViews }) => {
|
||||
if (affixTags.value.some(tag => tag.path === route.path)) {
|
||||
return;
|
||||
}
|
||||
toLastView(visitedViews, view);
|
||||
})
|
||||
}
|
||||
const toLastView = (visitedViews:TagView[], view?: TagView) => {
|
||||
const latestView = visitedViews.slice(-1)[0];
|
||||
if (latestView) {
|
||||
router.push(latestView.fullPath as string);
|
||||
} else {
|
||||
// now the default is to redirect to the home page if there is no tags-view,
|
||||
// you can adjust it according to your needs.
|
||||
if (view?.name === 'Dashboard') {
|
||||
// to reload home page
|
||||
router.replace({ path: '/redirect' + view?.fullPath });
|
||||
} else {
|
||||
router.push('/');
|
||||
}
|
||||
proxy?.$tab.closeAllPage().then(({ visitedViews }) => {
|
||||
if (affixTags.value.some((tag) => tag.path === route.path)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
toLastView(visitedViews, view);
|
||||
});
|
||||
};
|
||||
const toLastView = (visitedViews: TagView[], view?: TagView) => {
|
||||
const latestView = visitedViews.slice(-1)[0];
|
||||
if (latestView) {
|
||||
router.push(latestView.fullPath as string);
|
||||
} else {
|
||||
// now the default is to redirect to the home page if there is no tags-view,
|
||||
// you can adjust it according to your needs.
|
||||
if (view?.name === 'Dashboard') {
|
||||
// to reload home page
|
||||
router.replace({ path: '/redirect' + view?.fullPath });
|
||||
} else {
|
||||
router.push('/');
|
||||
}
|
||||
}
|
||||
};
|
||||
const openMenu = (tag: TagView, e: MouseEvent) => {
|
||||
const menuMinWidth = 105;
|
||||
const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
|
||||
const offsetWidth = proxy?.$el.offsetWidth; // container width
|
||||
const maxLeft = offsetWidth - menuMinWidth; // left boundary
|
||||
const l = e.clientX - offsetLeft + 15; // 15: margin right
|
||||
const menuMinWidth = 105;
|
||||
const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
|
||||
const offsetWidth = proxy?.$el.offsetWidth; // container width
|
||||
const maxLeft = offsetWidth - menuMinWidth; // left boundary
|
||||
const l = e.clientX - offsetLeft + 15; // 15: margin right
|
||||
|
||||
if (l > maxLeft) {
|
||||
left.value = maxLeft;
|
||||
} else {
|
||||
left.value = l;
|
||||
}
|
||||
if (l > maxLeft) {
|
||||
left.value = maxLeft;
|
||||
} else {
|
||||
left.value = l;
|
||||
}
|
||||
|
||||
top.value = e.clientY
|
||||
visible.value = true;
|
||||
selectedTag.value = tag;
|
||||
}
|
||||
top.value = e.clientY;
|
||||
visible.value = true;
|
||||
selectedTag.value = tag;
|
||||
};
|
||||
const closeMenu = () => {
|
||||
visible.value = false;
|
||||
}
|
||||
visible.value = false;
|
||||
};
|
||||
const handleScroll = () => {
|
||||
closeMenu();
|
||||
}
|
||||
|
||||
closeMenu();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initTags();
|
||||
addTags();
|
||||
})
|
||||
initTags();
|
||||
addTags();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -242,7 +241,9 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
background-color: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
|
||||
box-shadow:
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.12),
|
||||
0 0 3px 0 rgba(0, 0, 0, 0.04);
|
||||
.tags-view-wrapper {
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
@ -271,7 +272,7 @@ onMounted(() => {
|
||||
color: #fff;
|
||||
border-color: #42b983;
|
||||
&::before {
|
||||
content: "";
|
||||
content: '';
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
<el-dialog v-model="state.isShowSearch" destroy-on-close :show-close="false">
|
||||
<template #footer>
|
||||
<el-autocomplete
|
||||
ref="layoutMenuAutocompleteRef"
|
||||
v-model="state.menuQuery"
|
||||
:fetch-suggestions="menuSearch"
|
||||
placeholder="搜索"
|
||||
ref="layoutMenuAutocompleteRef"
|
||||
@select="onHandleSelect"
|
||||
:fit-input-width="true"
|
||||
@select="onHandleSelect"
|
||||
>
|
||||
<template #prefix>
|
||||
<svg-icon class-name="search-icon" icon-class="search" />
|
||||
@ -29,130 +29,129 @@
|
||||
import { getNormalPath } from '@/utils/ruoyi';
|
||||
import { isHttp } from '@/utils/validate';
|
||||
import usePermissionStore from '@/store/modules/permission';
|
||||
import { RouteOption } from 'vue-router';
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
type Router = Array<{
|
||||
path: string;
|
||||
icon: string;
|
||||
title: string[];
|
||||
}>
|
||||
path: string;
|
||||
icon: string;
|
||||
title: string[];
|
||||
}>;
|
||||
type SearchState<T = any> = {
|
||||
isShowSearch: boolean;
|
||||
menuQuery: string;
|
||||
menuList: T[];
|
||||
isShowSearch: boolean;
|
||||
menuQuery: string;
|
||||
menuList: T[];
|
||||
};
|
||||
// 定义变量内容
|
||||
const layoutMenuAutocompleteRef = ref();
|
||||
const router = useRouter();
|
||||
const routes = computed(() => usePermissionStore().routes);
|
||||
const state = reactive<SearchState>({
|
||||
isShowSearch: false,
|
||||
menuQuery: '',
|
||||
menuList: [],
|
||||
isShowSearch: false,
|
||||
menuQuery: '',
|
||||
menuList: []
|
||||
});
|
||||
|
||||
// 搜索弹窗打开
|
||||
const openSearch = () => {
|
||||
state.menuQuery = '';
|
||||
state.isShowSearch = true;
|
||||
state.menuList = generateRoutes(routes.value);
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
layoutMenuAutocompleteRef.value.focus();
|
||||
});
|
||||
});
|
||||
state.menuQuery = '';
|
||||
state.isShowSearch = true;
|
||||
state.menuList = generateRoutes(routes.value);
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
layoutMenuAutocompleteRef.value.focus();
|
||||
});
|
||||
});
|
||||
};
|
||||
// 搜索弹窗关闭
|
||||
const closeSearch = () => {
|
||||
state.isShowSearch = false;
|
||||
state.isShowSearch = false;
|
||||
};
|
||||
// 菜单搜索数据过滤
|
||||
const menuSearch = (queryString: string, cb: Function) => {
|
||||
let options = state.menuList.filter((item) => {
|
||||
return item.title.indexOf(queryString) > -1;
|
||||
});
|
||||
cb(options);
|
||||
let options = state.menuList.filter((item) => {
|
||||
return item.title.indexOf(queryString) > -1;
|
||||
});
|
||||
cb(options);
|
||||
};
|
||||
|
||||
// Filter out the routes that can be displayed in the sidebar
|
||||
// And generate the internationalized title
|
||||
const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: string[] = []) => {
|
||||
let res: Router = []
|
||||
routes.forEach(r => {
|
||||
// skip hidden router
|
||||
if (!r.hidden) {
|
||||
const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
|
||||
const data: any = {
|
||||
path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
|
||||
icon: r.meta?.icon,
|
||||
title: [...prefixTitle]
|
||||
}
|
||||
if (r.meta && r.meta.title) {
|
||||
data.title = [...data.title, r.meta.title];
|
||||
if (r.redirect !== 'noRedirect') {
|
||||
// only push the routes with title
|
||||
// special case: need to exclude parent router without redirect
|
||||
res.push(data);
|
||||
}
|
||||
}
|
||||
// recursive child routes
|
||||
if (r.children) {
|
||||
const tempRoutes = generateRoutes(r.children, data.path, data.title);
|
||||
if (tempRoutes.length >= 1) {
|
||||
res = [...res, ...tempRoutes];
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
res.forEach((item: any) => {
|
||||
if (item.title instanceof Array) {
|
||||
item.title = item.title.join('/');
|
||||
}
|
||||
});
|
||||
return res;
|
||||
}
|
||||
const generateRoutes = (routes: RouteRecordRaw[], basePath = '', prefixTitle: string[] = []) => {
|
||||
let res: Router = [];
|
||||
routes.forEach((r) => {
|
||||
// skip hidden router
|
||||
if (!r.hidden) {
|
||||
const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
|
||||
const data: any = {
|
||||
path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
|
||||
icon: r.meta?.icon,
|
||||
title: [...prefixTitle]
|
||||
};
|
||||
if (r.meta && r.meta.title) {
|
||||
data.title = [...data.title, r.meta.title];
|
||||
if (r.redirect !== 'noRedirect') {
|
||||
// only push the routes with title
|
||||
// special case: need to exclude parent router without redirect
|
||||
res.push(data);
|
||||
}
|
||||
}
|
||||
// recursive child routes
|
||||
if (r.children) {
|
||||
const tempRoutes = generateRoutes(r.children, data.path, data.title);
|
||||
if (tempRoutes.length >= 1) {
|
||||
res = [...res, ...tempRoutes];
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
res.forEach((item: any) => {
|
||||
if (item.title instanceof Array) {
|
||||
item.title = item.title.join('/');
|
||||
}
|
||||
});
|
||||
return res;
|
||||
};
|
||||
// 当前菜单选中时
|
||||
const onHandleSelect = (val: any) => {
|
||||
const paths = val.path;
|
||||
if (isHttp(paths)) {
|
||||
// http(s):// 路径新窗口打开
|
||||
const pindex = paths.indexOf("http");
|
||||
window.open(paths.substring(pindex, paths.length), "_blank");
|
||||
} else {
|
||||
router.push(paths);
|
||||
}
|
||||
state.menuQuery = ''
|
||||
closeSearch();
|
||||
|
||||
const paths = val.path;
|
||||
if (isHttp(paths)) {
|
||||
// http(s):// 路径新窗口打开
|
||||
const pindex = paths.indexOf('http');
|
||||
window.open(paths.substring(pindex, paths.length), '_blank');
|
||||
} else {
|
||||
router.push(paths);
|
||||
}
|
||||
state.menuQuery = '';
|
||||
closeSearch();
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openSearch
|
||||
openSearch
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.layout-search-dialog {
|
||||
position: relative;
|
||||
:deep(.el-dialog) {
|
||||
.el-dialog__header,
|
||||
.el-dialog__body {
|
||||
display: none;
|
||||
}
|
||||
.el-dialog__footer {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: -53vh;
|
||||
}
|
||||
}
|
||||
:deep(.el-autocomplete) {
|
||||
width: 560px;
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
position: relative;
|
||||
:deep(.el-dialog) {
|
||||
.el-dialog__header,
|
||||
.el-dialog__body {
|
||||
display: none;
|
||||
}
|
||||
.el-dialog__footer {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: -53vh;
|
||||
}
|
||||
}
|
||||
:deep(.el-autocomplete) {
|
||||
width: 560px;
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="layout-navbars-breadcrumb-user-news" v-loading="state.loading">
|
||||
<div v-loading="state.loading" class="layout-navbars-breadcrumb-user-news">
|
||||
<div class="head-box">
|
||||
<div class="head-box-title">通知公告</div>
|
||||
<div class="head-box-btn" @click="readAll">全部已读</div>
|
||||
</div>
|
||||
<div class="content-box" v-loading="state.loading">
|
||||
<div v-loading="state.loading" class="content-box">
|
||||
<template v-if="newsList.length > 0">
|
||||
<div class="content-box-item" v-for="(v, k) in newsList" :key="k" @click="onNewsClick(k)">
|
||||
<div v-for="(v, k) in newsList" :key="k" class="content-box-item" @click="onNewsClick(k)">
|
||||
<div class="item-conten">
|
||||
<div>{{ v.message }}</div>
|
||||
<div class="content-box-msg"></div>
|
||||
@ -17,26 +17,24 @@
|
||||
<span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty :description="'消息为空'" v-else></el-empty>
|
||||
<el-empty v-else :description="'消息为空'"></el-empty>
|
||||
</div>
|
||||
<div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">前往gitee</div>
|
||||
<div v-if="newsList.length > 0" class="foot-box" @click="onGoToGiteeClick">前往gitee</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="layoutBreadcrumbUserNews">
|
||||
import { ref } from "vue";
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { nextTick, onMounted, reactive } from "vue";
|
||||
import { storeToRefs } from 'pinia';
|
||||
import useNoticeStore from '@/store/modules/notice';
|
||||
|
||||
const noticeStore = storeToRefs(useNoticeStore());
|
||||
const {readAll} = useNoticeStore();
|
||||
const { readAll } = useNoticeStore();
|
||||
|
||||
// 定义变量内容
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
loading: false
|
||||
});
|
||||
const newsList =ref([]) as any;
|
||||
const newsList = ref([]) as any;
|
||||
|
||||
/**
|
||||
* 初始化数据
|
||||
@ -48,7 +46,6 @@ const getTableData = async () => {
|
||||
state.loading = false;
|
||||
};
|
||||
|
||||
|
||||
//点击消息，写入已读
|
||||
const onNewsClick = (item: any) => {
|
||||
newsList.value[item].read = true;
|
||||
@ -58,7 +55,7 @@ const onNewsClick = (item: any) => {
|
||||
|
||||
// 前往通知中心点击
|
||||
const onGoToGiteeClick = () => {
|
||||
window.open("https://gitee.com/dromara/RuoYi-Vue-Plus/tree/5.X/");
|
||||
window.open('https://gitee.com/dromara/RuoYi-Vue-Plus/tree/5.X/');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<settings ref="settingRef" />
|
||||
</el-scrollbar> -->
|
||||
<div :class="{ 'fixed-header': fixedHeader }">
|
||||
<navbar ref="navbarRef" @setLayout="setLayout" />
|
||||
<navbar ref="navbarRef" @set-layout="setLayout" />
|
||||
<tags-view v-if="needTagsView" />
|
||||
</div>
|
||||
<app-main />
|
||||
@ -22,12 +22,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SideBar from './components/Sidebar/index.vue'
|
||||
import { AppMain, Navbar, Settings, TagsView } from './components'
|
||||
import useAppStore from '@/store/modules/app'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import SideBar from './components/Sidebar/index.vue';
|
||||
import { AppMain, Navbar, Settings, TagsView } from './components';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useSettingsStore from '@/store/modules/settings';
|
||||
import { initWebSocket } from '@/utils/websocket';
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const settingsStore = useSettingsStore();
|
||||
const theme = computed(() => settingsStore.theme);
|
||||
const sidebar = computed(() => useAppStore().sidebar);
|
||||
const device = computed(() => useAppStore().device);
|
||||
@ -35,48 +36,53 @@ const needTagsView = computed(() => settingsStore.tagsView);
|
||||
const fixedHeader = computed(() => settingsStore.fixedHeader);
|
||||
|
||||
const classObj = computed(() => ({
|
||||
hideSidebar: !sidebar.value.opened,
|
||||
openSidebar: sidebar.value.opened,
|
||||
withoutAnimation: sidebar.value.withoutAnimation,
|
||||
mobile: device.value === 'mobile'
|
||||
}))
|
||||
hideSidebar: !sidebar.value.opened,
|
||||
openSidebar: sidebar.value.opened,
|
||||
withoutAnimation: sidebar.value.withoutAnimation,
|
||||
mobile: device.value === 'mobile'
|
||||
}));
|
||||
|
||||
const { width } = useWindowSize();
|
||||
const WIDTH = 992; // refer to Bootstrap's responsive design
|
||||
|
||||
watchEffect(() => {
|
||||
if (device.value === 'mobile' && sidebar.value.opened) {
|
||||
useAppStore().closeSideBar({ withoutAnimation: false })
|
||||
}
|
||||
if (width.value - 1 < WIDTH) {
|
||||
useAppStore().toggleDevice('mobile')
|
||||
useAppStore().closeSideBar({ withoutAnimation: true })
|
||||
} else {
|
||||
useAppStore().toggleDevice('desktop')
|
||||
}
|
||||
})
|
||||
if (device.value === 'mobile' && sidebar.value.opened) {
|
||||
useAppStore().closeSideBar({ withoutAnimation: false });
|
||||
}
|
||||
if (width.value - 1 < WIDTH) {
|
||||
useAppStore().toggleDevice('mobile');
|
||||
useAppStore().closeSideBar({ withoutAnimation: true });
|
||||
} else {
|
||||
useAppStore().toggleDevice('desktop');
|
||||
}
|
||||
});
|
||||
|
||||
const navbarRef = ref(Navbar);
|
||||
const settingRef = ref(Settings);
|
||||
const navbarRef = ref<InstanceType<typeof Navbar>>();
|
||||
const settingRef = ref<InstanceType<typeof Settings>>();
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
navbarRef.value.initTenantList();
|
||||
})
|
||||
})
|
||||
navbarRef.value?.initTenantList();
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
|
||||
initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');
|
||||
});
|
||||
|
||||
const handleClickOutside = () => {
|
||||
useAppStore().closeSideBar({ withoutAnimation: false })
|
||||
}
|
||||
useAppStore().closeSideBar({ withoutAnimation: false });
|
||||
};
|
||||
|
||||
const setLayout = () => {
|
||||
settingRef.value.openSetting();
|
||||
}
|
||||
settingRef.value?.openSetting();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/styles/mixin.scss";
|
||||
@import "@/assets/styles/variables.module.scss";
|
||||
@import '@/assets/styles/mixin.scss';
|
||||
@import '@/assets/styles/variables.module.scss';
|
||||
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
|
||||
21
src/main.ts
21
src/main.ts
@ -4,7 +4,7 @@ import ElementPlus from 'element-plus';
|
||||
import locale from 'element-plus/lib/locale/lang/zh-cn'; // 中文语言
|
||||
|
||||
// global css
|
||||
import 'uno.css';
|
||||
import 'virtual:uno.css';
|
||||
import '@/assets/styles/index.scss';
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css';
|
||||
|
||||
@ -18,10 +18,6 @@ import directive from './directive';
|
||||
|
||||
// 注册插件
|
||||
import plugins from './plugins/index'; // plugins
|
||||
import { download } from '@/utils/request';
|
||||
|
||||
// 预设动画
|
||||
import animate from './animate';
|
||||
|
||||
// svg图标
|
||||
import 'virtual:svg-icons-register';
|
||||
@ -30,25 +26,10 @@ import ElementIcons from '@/plugins/svgicon';
|
||||
// permission control
|
||||
import './permission';
|
||||
|
||||
import { useDict } from '@/utils/dict';
|
||||
import { getConfigKey, updateConfigByKey } from '@/api/system/config';
|
||||
import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi';
|
||||
|
||||
// 国际化
|
||||
import i18n from '@/lang/index';
|
||||
|
||||
const app = createApp(App);
|
||||
// 全局方法挂载
|
||||
app.config.globalProperties.useDict = useDict;
|
||||
app.config.globalProperties.getConfigKey = getConfigKey;
|
||||
app.config.globalProperties.updateConfigByKey = updateConfigByKey;
|
||||
app.config.globalProperties.download = download;
|
||||
app.config.globalProperties.parseTime = parseTime;
|
||||
app.config.globalProperties.handleTree = handleTree;
|
||||
app.config.globalProperties.addDateRange = addDateRange;
|
||||
app.config.globalProperties.selectDictLabel = selectDictLabel;
|
||||
app.config.globalProperties.selectDictLabels = selectDictLabels;
|
||||
app.config.globalProperties.animate = animate;
|
||||
|
||||
app.use(ElementIcons);
|
||||
app.use(router);
|
||||
|
||||
@ -20,6 +20,8 @@ router.beforeEach(async (to, from, next) => {
|
||||
if (to.path === '/login') {
|
||||
next({ path: '/' });
|
||||
NProgress.done();
|
||||
} else if (whiteList.indexOf(to.path as string) !== -1) {
|
||||
next();
|
||||
} else {
|
||||
if (useUserStore().roles.length === 0) {
|
||||
isRelogin.show = true;
|
||||
@ -38,7 +40,9 @@ router.beforeEach(async (to, from, next) => {
|
||||
router.addRoute(route); // 动态添加可访问路由表
|
||||
}
|
||||
});
|
||||
next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
|
||||
const n = { ...to, replace: true };
|
||||
console.log(n);
|
||||
next({ path: to.path, replace: true, params: to.params, query: to.query, hash: to.hash, name: to.name as string }); // hack方法 确保addRoutes已完成
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
@ -46,7 +50,7 @@ router.beforeEach(async (to, from, next) => {
|
||||
}
|
||||
} else {
|
||||
// 没有token
|
||||
if (whiteList.indexOf(to.path) !== -1) {
|
||||
if (whiteList.indexOf(to.path as string) !== -1) {
|
||||
// 在免登录白名单，直接进入
|
||||
next();
|
||||
} else {
|
||||
|
||||
@ -3,6 +3,13 @@ import tab from './tab';
|
||||
import download from './download';
|
||||
import cache from './cache';
|
||||
import auth from './auth';
|
||||
// 预设动画
|
||||
import animate from '@/animate';
|
||||
|
||||
import { download as dl } from '@/utils/request';
|
||||
import { useDict } from '@/utils/dict';
|
||||
import { getConfigKey, updateConfigByKey } from '@/api/system/config';
|
||||
import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi';
|
||||
|
||||
import { App } from 'vue';
|
||||
|
||||
@ -21,4 +28,16 @@ export default function installPlugin(app: App) {
|
||||
|
||||
// 认证对象
|
||||
app.config.globalProperties.$auth = auth;
|
||||
|
||||
// 全局方法挂载
|
||||
app.config.globalProperties.useDict = useDict;
|
||||
app.config.globalProperties.getConfigKey = getConfigKey;
|
||||
app.config.globalProperties.updateConfigByKey = updateConfigByKey;
|
||||
app.config.globalProperties.download = dl;
|
||||
app.config.globalProperties.parseTime = parseTime;
|
||||
app.config.globalProperties.handleTree = handleTree;
|
||||
app.config.globalProperties.addDateRange = addDateRange;
|
||||
app.config.globalProperties.selectDictLabel = selectDictLabel;
|
||||
app.config.globalProperties.selectDictLabels = selectDictLabels;
|
||||
app.config.globalProperties.animate = animate;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView';
|
||||
import router from '@/router';
|
||||
import { TagView, RouteLocationRaw } from 'vue-router';
|
||||
import { TagView, RouteLocationMatched } from 'vue-router';
|
||||
|
||||
export default {
|
||||
/**
|
||||
@ -10,7 +10,7 @@ export default {
|
||||
async refreshPage(obj?: TagView): Promise<void> {
|
||||
const { path, query, matched } = router.currentRoute.value;
|
||||
if (obj === undefined) {
|
||||
matched.forEach((m) => {
|
||||
matched.forEach((m: RouteLocationMatched) => {
|
||||
if (m.components && m.components.default && m.components.default.name) {
|
||||
if (!['Layout', 'ParentView'].includes(m.components.default.name)) {
|
||||
obj = { name: m.components.default.name, path: path, query: query };
|
||||
@ -31,8 +31,8 @@ export default {
|
||||
});
|
||||
},
|
||||
// 关闭当前tab页签，打开新页签
|
||||
closeOpenPage(obj: RouteLocationRaw): void {
|
||||
useTagsViewStore().delView(router.currentRoute.value);
|
||||
closeOpenPage(obj: TagView): void {
|
||||
useTagsViewStore().delView(router.currentRoute.value as any);
|
||||
if (obj !== undefined) {
|
||||
router.push(obj);
|
||||
}
|
||||
@ -41,10 +41,10 @@ export default {
|
||||
async closePage(obj?: TagView): Promise<{ visitedViews: TagView[]; cachedViews: string[] } | any> {
|
||||
if (obj === undefined) {
|
||||
// prettier-ignore
|
||||
const { visitedViews } = await useTagsViewStore().delView(router.currentRoute.value) as any
|
||||
const { visitedViews } = await useTagsViewStore().delView(router.currentRoute.value as any)
|
||||
const latestView = visitedViews.slice(-1)[0];
|
||||
if (latestView) {
|
||||
return router.push(latestView.fullPath);
|
||||
return router.push(latestView.fullPath as any);
|
||||
}
|
||||
return router.push('/');
|
||||
}
|
||||
@ -56,15 +56,15 @@ export default {
|
||||
},
|
||||
// 关闭左侧tab页签
|
||||
closeLeftPage(obj?: TagView) {
|
||||
return useTagsViewStore().delLeftTags(obj || router.currentRoute.value);
|
||||
return useTagsViewStore().delLeftTags(obj || (router.currentRoute.value as any));
|
||||
},
|
||||
// 关闭右侧tab页签
|
||||
closeRightPage(obj?: TagView) {
|
||||
return useTagsViewStore().delRightTags(obj || router.currentRoute.value);
|
||||
return useTagsViewStore().delRightTags(obj || (router.currentRoute.value as any));
|
||||
},
|
||||
// 关闭其他tab页签
|
||||
closeOtherPage(obj?: TagView) {
|
||||
return useTagsViewStore().delOthersViews(obj || router.currentRoute.value);
|
||||
return useTagsViewStore().delOthersViews(obj || (router.currentRoute.value as any));
|
||||
},
|
||||
/**
|
||||
* 打开tab页签
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createWebHistory, createRouter, RouteOption } from 'vue-router';
|
||||
import { createWebHistory, createRouter, RouteRecordRaw } from 'vue-router';
|
||||
/* Layout */
|
||||
import Layout from '@/layout/index.vue';
|
||||
|
||||
@ -25,7 +25,7 @@ import Layout from '@/layout/index.vue';
|
||||
*/
|
||||
|
||||
// 公共路由
|
||||
export const constantRoutes: RouteOption[] = [
|
||||
export const constantRoutes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/redirect',
|
||||
component: Layout,
|
||||
@ -92,7 +92,7 @@ export const constantRoutes: RouteOption[] = [
|
||||
];
|
||||
|
||||
// 动态路由，基于用户权限动态去加载
|
||||
export const dynamicRoutes: RouteOption[] = [
|
||||
export const dynamicRoutes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/system/user-auth',
|
||||
component: Layout,
|
||||
@ -139,7 +139,7 @@ export const dynamicRoutes: RouteOption[] = [
|
||||
path: '/system/oss-config',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['system:oss:list'],
|
||||
permissions: ['system:ossConfig:list'],
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { LanguageEnum } from '@/enums/LanguageEnum';
|
||||
|
||||
const setting: DefaultSettings = {
|
||||
/**
|
||||
* 网页标题
|
||||
@ -50,6 +52,11 @@ const setting: DefaultSettings = {
|
||||
|
||||
animationEnable: false,
|
||||
|
||||
dark: false
|
||||
dark: false,
|
||||
language: LanguageEnum.zh_CN,
|
||||
|
||||
size: 'default',
|
||||
|
||||
layout: ''
|
||||
};
|
||||
export default setting;
|
||||
|
||||
@ -9,7 +9,7 @@ export const useAppStore = defineStore('app', () => {
|
||||
hide: false
|
||||
});
|
||||
const device = ref<string>('desktop');
|
||||
const size = useStorage('size', 'default');
|
||||
const size = useStorage<'large' | 'default' | 'small'>('size', 'default');
|
||||
|
||||
// 语言
|
||||
const language = useStorage('language', 'zh_CN');
|
||||
@ -43,7 +43,7 @@ export const useAppStore = defineStore('app', () => {
|
||||
const toggleDevice = (d: string): void => {
|
||||
device.value = d;
|
||||
};
|
||||
const setSize = (s: string): void => {
|
||||
const setSize = (s: 'large' | 'default' | 'small'): void => {
|
||||
size.value = s;
|
||||
};
|
||||
const toggleSideBarHide = (status: boolean): void => {
|
||||
|
||||
@ -22,7 +22,7 @@ export const useNoticeStore = defineStore('notice', () => {
|
||||
|
||||
//实现全部已读
|
||||
const readAll = () => {
|
||||
state.notices.forEach((item) => {
|
||||
state.notices.forEach((item: any) => {
|
||||
item.read = true;
|
||||
});
|
||||
};
|
||||
|
||||
@ -2,35 +2,36 @@ import { defineStore } from 'pinia';
|
||||
import router, { constantRoutes, dynamicRoutes } from '@/router';
|
||||
import store from '@/store';
|
||||
import { getRouters } from '@/api/menu';
|
||||
import auth from '@/plugins/auth';
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import Layout from '@/layout/index.vue';
|
||||
import ParentView from '@/components/ParentView/index.vue';
|
||||
import InnerLink from '@/layout/components/InnerLink/index.vue';
|
||||
import auth from '@/plugins/auth';
|
||||
import { RouteOption } from 'vue-router';
|
||||
|
||||
// 匹配views里面所有的.vue文件
|
||||
const modules = import.meta.glob('./../../views/**/*.vue');
|
||||
|
||||
export const usePermissionStore = defineStore('permission', () => {
|
||||
const routes = ref<RouteOption[]>([]);
|
||||
const addRoutes = ref<RouteOption[]>([]);
|
||||
const defaultRoutes = ref<RouteOption[]>([]);
|
||||
const topbarRouters = ref<RouteOption[]>([]);
|
||||
const sidebarRouters = ref<RouteOption[]>([]);
|
||||
const routes = ref<RouteRecordRaw[]>([]);
|
||||
const addRoutes = ref<RouteRecordRaw[]>([]);
|
||||
const defaultRoutes = ref<RouteRecordRaw[]>([]);
|
||||
const topbarRouters = ref<RouteRecordRaw[]>([]);
|
||||
const sidebarRouters = ref<RouteRecordRaw[]>([]);
|
||||
|
||||
const setRoutes = (newRoutes: RouteOption[]): void => {
|
||||
const setRoutes = (newRoutes: RouteRecordRaw[]): void => {
|
||||
addRoutes.value = newRoutes;
|
||||
routes.value = constantRoutes.concat(newRoutes);
|
||||
};
|
||||
const setDefaultRoutes = (routes: RouteOption[]): void => {
|
||||
const setDefaultRoutes = (routes: RouteRecordRaw[]): void => {
|
||||
defaultRoutes.value = constantRoutes.concat(routes);
|
||||
};
|
||||
const setTopbarRoutes = (routes: RouteOption[]): void => {
|
||||
const setTopbarRoutes = (routes: RouteRecordRaw[]): void => {
|
||||
topbarRouters.value = routes;
|
||||
};
|
||||
const setSidebarRouters = (routes: RouteOption[]): void => {
|
||||
const setSidebarRouters = (routes: RouteRecordRaw[]): void => {
|
||||
sidebarRouters.value = routes;
|
||||
};
|
||||
const generateRoutes = async (): Promise<RouteOption[]> => {
|
||||
const generateRoutes = async (): Promise<RouteRecordRaw[]> => {
|
||||
const res = await getRouters();
|
||||
const { data } = res;
|
||||
const sdata = JSON.parse(JSON.stringify(data));
|
||||
@ -47,7 +48,7 @@ export const usePermissionStore = defineStore('permission', () => {
|
||||
setSidebarRouters(constantRoutes.concat(sidebarRoutes));
|
||||
setDefaultRoutes(sidebarRoutes);
|
||||
setTopbarRoutes(defaultRoutes);
|
||||
return new Promise<RouteOption[]>((resolve) => resolve(rewriteRoutes));
|
||||
return new Promise<RouteRecordRaw[]>((resolve) => resolve(rewriteRoutes));
|
||||
};
|
||||
|
||||
/**
|
||||
@ -56,22 +57,20 @@ export const usePermissionStore = defineStore('permission', () => {
|
||||
* @param lastRouter 上一级路由
|
||||
* @param type 是否是重写路由
|
||||
*/
|
||||
const filterAsyncRouter = (asyncRouterMap: RouteOption[], lastRouter?: RouteOption, type = false): RouteOption[] => {
|
||||
const filterAsyncRouter = (asyncRouterMap: RouteRecordRaw[], lastRouter?: RouteRecordRaw, type = false): RouteRecordRaw[] => {
|
||||
return asyncRouterMap.filter((route) => {
|
||||
if (type && route.children) {
|
||||
route.children = filterChildren(route.children, undefined);
|
||||
}
|
||||
if (route.component) {
|
||||
// Layout ParentView 组件特殊处理
|
||||
if (route.component === 'Layout') {
|
||||
route.component = Layout;
|
||||
} else if (route.component === 'ParentView') {
|
||||
route.component = ParentView;
|
||||
} else if (route.component === 'InnerLink') {
|
||||
route.component = InnerLink;
|
||||
} else {
|
||||
route.component = loadView(route.component);
|
||||
}
|
||||
// Layout ParentView 组件特殊处理
|
||||
if (route.component?.toString() === 'Layout') {
|
||||
route.component = Layout;
|
||||
} else if (route.component?.toString() === 'ParentView') {
|
||||
route.component = ParentView;
|
||||
} else if (route.component?.toString() === 'InnerLink') {
|
||||
route.component = InnerLink;
|
||||
} else {
|
||||
route.component = loadView(route.component);
|
||||
}
|
||||
if (route.children != null && route.children && route.children.length) {
|
||||
route.children = filterAsyncRouter(route.children, route, type);
|
||||
@ -82,11 +81,11 @@ export const usePermissionStore = defineStore('permission', () => {
|
||||
return true;
|
||||
});
|
||||
};
|
||||
const filterChildren = (childrenMap: RouteOption[], lastRouter?: RouteOption): RouteOption[] => {
|
||||
let children: RouteOption[] = [];
|
||||
const filterChildren = (childrenMap: RouteRecordRaw[], lastRouter?: RouteRecordRaw): RouteRecordRaw[] => {
|
||||
let children: RouteRecordRaw[] = [];
|
||||
childrenMap.forEach((el) => {
|
||||
if (el.children && el.children.length) {
|
||||
if (el.component === 'ParentView' && !lastRouter) {
|
||||
if (el.component?.toString() === 'ParentView' && !lastRouter) {
|
||||
el.children.forEach((c) => {
|
||||
c.path = el.path + '/' + c.path;
|
||||
if (c.children && c.children.length) {
|
||||
@ -100,6 +99,10 @@ export const usePermissionStore = defineStore('permission', () => {
|
||||
}
|
||||
if (lastRouter) {
|
||||
el.path = lastRouter.path + '/' + el.path;
|
||||
if (el.children && el.children.length) {
|
||||
children = children.concat(filterChildren(el.children, el));
|
||||
return;
|
||||
}
|
||||
}
|
||||
children = children.concat(el);
|
||||
});
|
||||
@ -109,8 +112,8 @@ export const usePermissionStore = defineStore('permission', () => {
|
||||
});
|
||||
|
||||
// 动态路由遍历，验证是否具备权限
|
||||
export const filterDynamicRoutes = (routes: RouteOption[]) => {
|
||||
const res: RouteOption[] = [];
|
||||
export const filterDynamicRoutes = (routes: RouteRecordRaw[]) => {
|
||||
const res: RouteRecordRaw[] = [];
|
||||
routes.forEach((route) => {
|
||||
if (route.permissions) {
|
||||
if (auth.hasPermiOr(route.permissions)) {
|
||||
|
||||
@ -1,35 +1,29 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import defaultSettings from '@/settings';
|
||||
import { SettingTypeEnum } from '@/enums/SettingTypeEnum';
|
||||
import { useDynamicTitle } from '@/utils/dynamicTitle';
|
||||
import { Ref } from 'vue';
|
||||
|
||||
export const useSettingsStore = defineStore('setting', () => {
|
||||
const storageSetting = JSON.parse(localStorage.getItem('layout-setting') || '{}');
|
||||
const storageSetting = useStorage<LayoutSetting>('layout-setting', {
|
||||
topNav: defaultSettings.topNav,
|
||||
tagsView: defaultSettings.tagsView,
|
||||
fixedHeader: defaultSettings.fixedHeader,
|
||||
sidebarLogo: defaultSettings.sidebarLogo,
|
||||
dynamicTitle: defaultSettings.dynamicTitle,
|
||||
sideTheme: defaultSettings.sideTheme,
|
||||
theme: defaultSettings.theme
|
||||
});
|
||||
const title = ref<string>(defaultSettings.title);
|
||||
const theme = ref<string>(storageSetting.value.theme);
|
||||
const sideTheme = ref<string>(storageSetting.value.sideTheme);
|
||||
const showSettings = ref<boolean>(defaultSettings.showSettings);
|
||||
const topNav = ref<boolean>(storageSetting.value.topNav);
|
||||
const tagsView = ref<boolean>(storageSetting.value.tagsView);
|
||||
const fixedHeader = ref<boolean>(storageSetting.value.fixedHeader);
|
||||
const sidebarLogo = ref<boolean>(storageSetting.value.sidebarLogo);
|
||||
const dynamicTitle = ref<boolean>(storageSetting.value.dynamicTitle);
|
||||
const animationEnable = ref<boolean>(defaultSettings.animationEnable);
|
||||
const dark = ref<boolean>(defaultSettings.dark);
|
||||
|
||||
const prop: { [key: string]: Ref<any> } = {
|
||||
title: ref<string>(''),
|
||||
theme: ref<string>(storageSetting.theme || defaultSettings.theme),
|
||||
sideTheme: ref<string>(storageSetting.sideTheme || defaultSettings.sideTheme),
|
||||
showSettings: ref<boolean>(storageSetting.showSettings || defaultSettings.showSettings),
|
||||
topNav: ref<boolean>(storageSetting.topNav === undefined ? defaultSettings.topNav : storageSetting.topNav),
|
||||
tagsView: ref<boolean>(storageSetting.tagsView === undefined ? defaultSettings.tagsView : storageSetting.tagsView),
|
||||
fixedHeader: ref<boolean>(storageSetting.fixedHeader === undefined ? defaultSettings.fixedHeader : storageSetting.fixedHeader),
|
||||
sidebarLogo: ref<boolean>(storageSetting.sidebarLogo === undefined ? defaultSettings.sidebarLogo : storageSetting.sidebarLogo),
|
||||
dynamicTitle: ref<boolean>(storageSetting.dynamicTitle === undefined ? defaultSettings.dynamicTitle : storageSetting.dynamicTitle),
|
||||
animationEnable: ref<boolean>(storageSetting.animationEnable === undefined ? defaultSettings.animationEnable : storageSetting.animationEnable),
|
||||
dark: ref<boolean>(storageSetting.dark || defaultSettings.dark)
|
||||
};
|
||||
|
||||
const { title, theme, sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle, animationEnable, dark } = prop;
|
||||
|
||||
// actions
|
||||
const changeSetting = (param: { key: SettingTypeEnum; value: any }) => {
|
||||
const { key, value } = param;
|
||||
if (key in prop) {
|
||||
prop[key].value = value;
|
||||
}
|
||||
};
|
||||
const setTitle = (value: string) => {
|
||||
title.value = value;
|
||||
useDynamicTitle();
|
||||
@ -46,7 +40,6 @@ export const useSettingsStore = defineStore('setting', () => {
|
||||
dynamicTitle,
|
||||
animationEnable,
|
||||
dark,
|
||||
changeSetting,
|
||||
setTitle
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { TagView } from 'vue-router';
|
||||
import { TagView, RouteRecordNormalized, RouteLocationNormalized } from 'vue-router';
|
||||
|
||||
export const useTagsViewStore = defineStore('tagsView', () => {
|
||||
const visitedViews = ref<TagView[]>([]);
|
||||
@ -11,7 +11,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
|
||||
};
|
||||
|
||||
const addIframeView = (view: TagView): void => {
|
||||
if (iframeViews.value.some((v) => v.path === view.path)) return;
|
||||
if (iframeViews.value.some((v: TagView) => v.path === view.path)) return;
|
||||
iframeViews.value.push(
|
||||
Object.assign({}, view, {
|
||||
title: view.meta?.title || 'no-name'
|
||||
@ -20,12 +20,12 @@ export const useTagsViewStore = defineStore('tagsView', () => {
|
||||
};
|
||||
const delIframeView = (view: TagView): Promise<TagView[]> => {
|
||||
return new Promise((resolve) => {
|
||||
iframeViews.value = iframeViews.value.filter((item) => item.path !== view.path);
|
||||
iframeViews.value = iframeViews.value.filter((item: TagView) => item.path !== view.path);
|
||||
resolve([...iframeViews.value]);
|
||||
});
|
||||
};
|
||||
const addVisitedView = (view: TagView): void => {
|
||||
if (visitedViews.value.some((v) => v.path === view.path)) return;
|
||||
if (visitedViews.value.some((v: TagView) => v.path === view.path)) return;
|
||||
visitedViews.value.push(
|
||||
Object.assign({}, view, {
|
||||
title: view.meta?.title || 'no-name'
|
||||
@ -35,7 +35,9 @@ export const useTagsViewStore = defineStore('tagsView', () => {
|
||||
const delView = (view: TagView): Promise<{ visitedViews: TagView[]; cachedViews: string[] }> => {
|
||||
return new Promise((resolve) => {
|
||||
delVisitedView(view);
|
||||
delCachedView(view);
|
||||
if (!isDynamicRoute(view)) {
|
||||
delCachedView(view);
|
||||
}
|
||||
resolve({
|
||||
visitedViews: [...visitedViews.value],
|
||||
cachedViews: [...cachedViews.value]
|
||||
@ -78,7 +80,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
|
||||
|
||||
const delOthersVisitedViews = (view: TagView): Promise<TagView[]> => {
|
||||
return new Promise((resolve) => {
|
||||
visitedViews.value = visitedViews.value.filter((v) => {
|
||||
visitedViews.value = visitedViews.value.filter((v: TagView) => {
|
||||
return v.meta?.affix || v.path === view.path;
|
||||
});
|
||||
resolve([...visitedViews.value]);
|
||||
@ -109,7 +111,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
|
||||
};
|
||||
const delAllVisitedViews = (): Promise<TagView[]> => {
|
||||
return new Promise((resolve) => {
|
||||
visitedViews.value = visitedViews.value.filter((tag) => tag.meta?.affix);
|
||||
visitedViews.value = visitedViews.value.filter((tag: TagView) => tag.meta?.affix);
|
||||
resolve([...visitedViews.value]);
|
||||
});
|
||||
};
|
||||
@ -131,11 +133,11 @@ export const useTagsViewStore = defineStore('tagsView', () => {
|
||||
};
|
||||
const delRightTags = (view: TagView): Promise<TagView[]> => {
|
||||
return new Promise((resolve) => {
|
||||
const index = visitedViews.value.findIndex((v) => v.path === view.path);
|
||||
const index = visitedViews.value.findIndex((v: TagView) => v.path === view.path);
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
visitedViews.value = visitedViews.value.filter((item, idx) => {
|
||||
visitedViews.value = visitedViews.value.filter((item: TagView, idx: number) => {
|
||||
if (idx <= index || (item.meta && item.meta.affix)) {
|
||||
return true;
|
||||
}
|
||||
@ -150,11 +152,11 @@ export const useTagsViewStore = defineStore('tagsView', () => {
|
||||
};
|
||||
const delLeftTags = (view: TagView): Promise<TagView[]> => {
|
||||
return new Promise((resolve) => {
|
||||
const index = visitedViews.value.findIndex((v) => v.path === view.path);
|
||||
const index = visitedViews.value.findIndex((v: TagView) => v.path === view.path);
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
visitedViews.value = visitedViews.value.filter((item, idx) => {
|
||||
visitedViews.value = visitedViews.value.filter((item: TagView, idx: number) => {
|
||||
if (idx >= index || (item.meta && item.meta.affix)) {
|
||||
return true;
|
||||
}
|
||||
@ -177,6 +179,11 @@ export const useTagsViewStore = defineStore('tagsView', () => {
|
||||
}
|
||||
};
|
||||
|
||||
const isDynamicRoute = (view: any): boolean => {
|
||||
// 检查匹配的路由记录中是否有动态段
|
||||
return view.matched.some((m: RouteRecordNormalized) => m.path.includes(':'));
|
||||
};
|
||||
|
||||
return {
|
||||
visitedViews,
|
||||
cachedViews,
|
||||
|
||||
@ -63,6 +63,10 @@ export const useUserStore = defineStore('user', () => {
|
||||
removeToken();
|
||||
};
|
||||
|
||||
const setAvatar = (value: string) => {
|
||||
avatar.value = value;
|
||||
};
|
||||
|
||||
return {
|
||||
userId,
|
||||
token,
|
||||
@ -72,7 +76,8 @@ export const useUserStore = defineStore('user', () => {
|
||||
permissions,
|
||||
login,
|
||||
getInfo,
|
||||
logout
|
||||
logout,
|
||||
setAvatar
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
2
src/types/axios.d.ts
vendored
2
src/types/axios.d.ts
vendored
@ -1,7 +1,7 @@
|
||||
import axios from 'axios';
|
||||
|
||||
declare module 'axios' {
|
||||
export interface AxiosResponse<T = any> {
|
||||
interface AxiosResponse<T = any> {
|
||||
code: number;
|
||||
msg: string;
|
||||
rows: T;
|
||||
|
||||
9
src/types/element.d.ts
vendored
9
src/types/element.d.ts
vendored
@ -1,12 +1,13 @@
|
||||
import type * as ep from 'element-plus';
|
||||
declare global {
|
||||
declare type ElTagType = '' | 'success' | 'warning' | 'info' | 'danger' | 'default' | 'primary';
|
||||
declare type ElFormInstance = InstanceType<typeof ep.ElForm>;
|
||||
declare type ElTableInstance = InstanceType<typeof ep.ElTable>;
|
||||
declare type ElFormInstance = ep.FormInstance;
|
||||
declare type ElTableInstance = ep.TableInstance;
|
||||
declare type ElUploadInstance = ep.UploadInstance;
|
||||
declare type ElScrollbarInstance = ep.ScrollbarInstance;
|
||||
declare type ElTreeInstance = InstanceType<typeof ep.ElTree>;
|
||||
declare type ElTreeSelectInstance = InstanceType<typeof ep.ElTreeSelect>;
|
||||
declare type ElSelectInstance = InstanceType<typeof ep.ElSelect>;
|
||||
declare type ElUploadInstance = InstanceType<typeof ep.ElUpload>;
|
||||
declare type ElCardInstance = InstanceType<typeof ep.ElCard>;
|
||||
declare type ElDialogInstance = InstanceType<typeof ep.ElDialog>;
|
||||
declare type ElInputInstance = InstanceType<typeof ep.ElInput>;
|
||||
@ -24,8 +25,6 @@ declare global {
|
||||
declare type ElColorPickerInstance = InstanceType<typeof ep.ElColorPicker>;
|
||||
declare type ElRateInstance = InstanceType<typeof ep.ElRate>;
|
||||
declare type ElSliderInstance = InstanceType<typeof ep.ElSlider>;
|
||||
declare type ElUploadInstance = InstanceType<typeof ep.ElUpload>;
|
||||
declare type ElScrollbarInstance = InstanceType<typeof ep.ElScrollbar>;
|
||||
|
||||
declare type TransferKey = ep.TransferKey;
|
||||
declare type CheckboxValueType = ep.CheckboxValueType;
|
||||
|
||||
60
src/types/env.d.ts
vendored
60
src/types/env.d.ts
vendored
@ -1,62 +1,9 @@
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue';
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
declare module '*.avif' {
|
||||
const src: string;
|
||||
export default src;
|
||||
const Component: DefineComponent<{}, {}, any>;
|
||||
export default Component;
|
||||
}
|
||||
|
||||
declare module '*.bmp' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.gif' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.jpg' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.jpeg' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.png' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.webp' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.svg' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.module.css' {
|
||||
const classes: { readonly [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
|
||||
declare module '*.module.scss' {
|
||||
const classes: { readonly [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
|
||||
declare module '*.module.sass' {
|
||||
const classes: { readonly [key: string]: string };
|
||||
export default classes;
|
||||
}
|
||||
// 环境变量
|
||||
interface ImportMetaEnv {
|
||||
VITE_APP_TITLE: string;
|
||||
@ -68,8 +15,9 @@ interface ImportMetaEnv {
|
||||
VITE_APP_POWERJOB_ADMIN: string;
|
||||
VITE_APP_ENV: string;
|
||||
VITE_APP_RSA_PUBLIC_KEY: string;
|
||||
VITE_APP_RSA_PRIVATE_KEY: string;
|
||||
VITE_APP_CLIENT_ID: string;
|
||||
VITE_APP_WEBSOCKET: boolean;
|
||||
VITE_APP_WEBSOCKET: string;
|
||||
}
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
|
||||
78
src/types/global.d.ts
vendored
78
src/types/global.d.ts
vendored
@ -1,4 +1,6 @@
|
||||
import type { ComponentInternalInstance as ComponentInstance, PropType as VuePropType } from 'vue';
|
||||
import type { ComponentInternalInstance as ComponentInstance } from 'vue/runtime-core';
|
||||
import type { PropType as VuePropType } from 'vue';
|
||||
import { LanguageEnum } from '@/enums/LanguageEnum';
|
||||
|
||||
declare global {
|
||||
/** vue Instance */
|
||||
@ -49,6 +51,8 @@ declare global {
|
||||
/** 是否禁用上传 */
|
||||
isUploading: boolean;
|
||||
|
||||
updateSupport: number;
|
||||
|
||||
/** 其他参数 */
|
||||
[key: string]: any;
|
||||
}
|
||||
@ -87,5 +91,77 @@ declare global {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
}
|
||||
declare interface LayoutSetting {
|
||||
/**
|
||||
* 是否显示顶部导航
|
||||
*/
|
||||
topNav: boolean;
|
||||
|
||||
/**
|
||||
* 是否显示多标签导航
|
||||
*/
|
||||
tagsView: boolean;
|
||||
/**
|
||||
* 是否固定头部
|
||||
*/
|
||||
fixedHeader: boolean;
|
||||
/**
|
||||
* 是否显示侧边栏Logo
|
||||
*/
|
||||
sidebarLogo: boolean;
|
||||
/**
|
||||
* 是否显示动态标题
|
||||
*/
|
||||
dynamicTitle: boolean;
|
||||
/**
|
||||
* 侧边栏主题 theme-dark | theme-light
|
||||
*/
|
||||
sideTheme: string;
|
||||
/**
|
||||
* 主题模式
|
||||
*/
|
||||
theme: string;
|
||||
}
|
||||
|
||||
declare interface DefaultSettings extends LayoutSetting {
|
||||
/**
|
||||
* 网页标题
|
||||
*/
|
||||
title: string;
|
||||
|
||||
/**
|
||||
* 是否显示系统布局设置
|
||||
*/
|
||||
showSettings: boolean;
|
||||
|
||||
/**
|
||||
* 导航栏布局
|
||||
*/
|
||||
layout: string;
|
||||
|
||||
/**
|
||||
* 布局大小
|
||||
*/
|
||||
size: 'large' | 'default' | 'small';
|
||||
|
||||
/**
|
||||
* 语言
|
||||
*/
|
||||
language: LanguageEnum;
|
||||
|
||||
/**
|
||||
* 是否启用动画效果
|
||||
*/
|
||||
animationEnable: boolean;
|
||||
/**
|
||||
* 是否启用暗黑模式
|
||||
*
|
||||
* true:暗黑模式
|
||||
* false: 明亮模式
|
||||
*/
|
||||
dark: boolean;
|
||||
|
||||
errorLog: string;
|
||||
}
|
||||
}
|
||||
export {};
|
||||
|
||||
25
src/types/module.d.ts
vendored
25
src/types/module.d.ts
vendored
@ -1,13 +1,13 @@
|
||||
import type modal from '@/plugins/modal';
|
||||
import type tab from '@/plugins/tab';
|
||||
import type download from '@/plugins/download';
|
||||
import type auth from '@/plugins/auth';
|
||||
import type cache from '@/plugins/cache';
|
||||
import type animate from '@/animate';
|
||||
import type { useDict } from '@/utils/dict';
|
||||
import type { addDateRange, handleTree, selectDictLabel, selectDictLabels, parseTime } from '@/utils/ruoyi';
|
||||
import type { getConfigKey, updateConfigByKey } from '@/api/system/config';
|
||||
import type { download as rd } from '@/utils/request';
|
||||
import modal from '@/plugins/modal';
|
||||
import tab from '@/plugins/tab';
|
||||
import download from '@/plugins/download';
|
||||
import auth from '@/plugins/auth';
|
||||
import cache from '@/plugins/cache';
|
||||
import animate from '@/animate';
|
||||
import { useDict } from '@/utils/dict';
|
||||
import handleTree, { addDateRange, selectDictLabel, selectDictLabels, parseTime } from '@/utils/ruoyi';
|
||||
import { getConfigKey, updateConfigByKey } from '@/api/system/config';
|
||||
import { download as rd } from '@/utils/request';
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
interface ComponentCustomProperties {
|
||||
@ -30,3 +30,8 @@ declare module '@vue/runtime-core' {
|
||||
parseTime: typeof parseTime;
|
||||
}
|
||||
}
|
||||
|
||||
declare module 'vform3-builds' {
|
||||
const content: any;
|
||||
export = content;
|
||||
}
|
||||
|
||||
49
src/types/router.d.ts
vendored
49
src/types/router.d.ts
vendored
@ -1,40 +1,35 @@
|
||||
import { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import { LocationQuery, type RouteMeta as VRouteMeta } from 'vue-router';
|
||||
declare module 'vue-router' {
|
||||
interface RouteMeta {
|
||||
title: string;
|
||||
interface RouteMeta extends VRouteMeta {
|
||||
link?: string;
|
||||
title?: string;
|
||||
affix?: boolean;
|
||||
noCache?: boolean;
|
||||
activeMenu?: string;
|
||||
icon?: string;
|
||||
breadcrumb?: boolean;
|
||||
}
|
||||
|
||||
declare type RouteOption = {
|
||||
hidden?: boolean;
|
||||
interface _RouteRecordBase {
|
||||
hidden?: boolean | string | number;
|
||||
permissions?: string[];
|
||||
roles?: string[];
|
||||
component?: any;
|
||||
children?: RouteOption[];
|
||||
alwaysShow?: boolean;
|
||||
parentPath?: string;
|
||||
meta?: {
|
||||
title: string;
|
||||
icon: string;
|
||||
};
|
||||
query?: string;
|
||||
} & RouteRecordRaw;
|
||||
|
||||
declare interface _RouteLocationBase {
|
||||
children?: RouteOption[];
|
||||
parentPath?: string;
|
||||
}
|
||||
|
||||
declare interface RouteLocationOptions {
|
||||
interface _RouteLocationBase {
|
||||
children?: _RouteRecordBase[];
|
||||
path?: string;
|
||||
}
|
||||
|
||||
interface TagView {
|
||||
fullPath?: string;
|
||||
}
|
||||
|
||||
declare interface TagView extends Partial<_RouteLocationBase> {
|
||||
name?: string;
|
||||
path?: string;
|
||||
title?: string;
|
||||
meta?: {
|
||||
link?: string;
|
||||
title?: string;
|
||||
affix?: boolean;
|
||||
noCache?: boolean;
|
||||
};
|
||||
meta?: RouteMeta;
|
||||
query?: LocationQuery;
|
||||
}
|
||||
}
|
||||
|
||||
70
src/types/setting.d.ts
vendored
70
src/types/setting.d.ts
vendored
@ -1,70 +0,0 @@
|
||||
declare type DefaultSettings = {
|
||||
/**
|
||||
* 网页标题
|
||||
*/
|
||||
title?: string;
|
||||
|
||||
/**
|
||||
* 侧边栏主题 theme-dark | theme-light
|
||||
*/
|
||||
sideTheme?: string;
|
||||
|
||||
/**
|
||||
* 是否显示系统布局设置
|
||||
*/
|
||||
showSettings?: boolean;
|
||||
|
||||
/**
|
||||
* 是否显示顶部导航
|
||||
*/
|
||||
topNav?: boolean;
|
||||
|
||||
/**
|
||||
* 是否显示多标签导航
|
||||
*/
|
||||
tagsView?: boolean;
|
||||
/**
|
||||
* 是否固定头部
|
||||
*/
|
||||
fixedHeader?: boolean;
|
||||
/**
|
||||
* 是否显示侧边栏Logo
|
||||
*/
|
||||
sidebarLogo?: boolean;
|
||||
/**
|
||||
* 导航栏布局
|
||||
*/
|
||||
layout?: string;
|
||||
/**
|
||||
* 主题模式
|
||||
*/
|
||||
theme?: string;
|
||||
|
||||
/**
|
||||
* 布局大小
|
||||
*/
|
||||
size?: string;
|
||||
|
||||
/**
|
||||
* 语言
|
||||
*/
|
||||
language?: string;
|
||||
|
||||
/**
|
||||
* 是否显示动态标题
|
||||
*/
|
||||
dynamicTitle?: boolean;
|
||||
/**
|
||||
* 是否启用动画效果
|
||||
*/
|
||||
animationEnable?: boolean;
|
||||
/**
|
||||
* 是否启用暗黑模式
|
||||
*
|
||||
* true:暗黑模式
|
||||
* false: 明亮模式
|
||||
*/
|
||||
dark?: boolean;
|
||||
|
||||
errorLog?: string;
|
||||
};
|
||||
4
src/types/vform3-builds.d.ts
vendored
4
src/types/vform3-builds.d.ts
vendored
@ -1,4 +0,0 @@
|
||||
declare module 'vform3-builds' {
|
||||
const content: any;
|
||||
export = content;
|
||||
}
|
||||
@ -30,6 +30,13 @@ export const encryptBase64 = (str: CryptoJS.lib.WordArray) => {
|
||||
return CryptoJS.enc.Base64.stringify(str);
|
||||
};
|
||||
|
||||
/**
|
||||
* 解密base64
|
||||
*/
|
||||
export const decryptBase64 = (str: string) => {
|
||||
return CryptoJS.enc.Base64.parse(str);
|
||||
};
|
||||
|
||||
/**
|
||||
* 使用密钥对数据进行加密
|
||||
* @param message
|
||||
@ -43,3 +50,17 @@ export const encryptWithAes = (message: string, aesKey: CryptoJS.lib.WordArray)
|
||||
});
|
||||
return encrypted.toString();
|
||||
};
|
||||
|
||||
/**
|
||||
* 使用密钥对数据进行解密
|
||||
* @param message
|
||||
* @param aesKey
|
||||
* @returns {string}
|
||||
*/
|
||||
export const decryptWithAes = (message: string, aesKey: CryptoJS.lib.WordArray) => {
|
||||
const decrypted = CryptoJS.AES.decrypt(message, aesKey, {
|
||||
mode: CryptoJS.mode.ECB,
|
||||
padding: CryptoJS.pad.Pkcs7
|
||||
});
|
||||
return decrypted.toString(CryptoJS.enc.Utf8);
|
||||
};
|
||||
|
||||
@ -89,7 +89,7 @@ export const byteLength = (str: string) => {
|
||||
* @returns {Array}
|
||||
*/
|
||||
export const cleanArray = (actual: Array<any>) => {
|
||||
const newArray = [];
|
||||
const newArray: any[] = [];
|
||||
for (let i = 0; i < actual.length; i++) {
|
||||
if (actual[i]) {
|
||||
newArray.push(actual[i]);
|
||||
|
||||
@ -4,7 +4,7 @@ import JSEncrypt from 'jsencrypt';
|
||||
const publicKey = import.meta.env.VITE_APP_RSA_PUBLIC_KEY;
|
||||
|
||||
// 前端不建议存放私钥 不建议解密数据 因为都是透明的意义不大
|
||||
const privateKey = '**********';
|
||||
const privateKey = import.meta.env.VITE_APP_RSA_PRIVATE_KEY;
|
||||
|
||||
// 加密
|
||||
export const encrypt = (txt: string) => {
|
||||
|
||||
@ -3,6 +3,7 @@ import VueTypes, { createTypes, toValidableType, VueTypeValidableDef, VueTypesIn
|
||||
|
||||
type PropTypes = VueTypesInterface & {
|
||||
readonly style: VueTypeValidableDef<CSSProperties>;
|
||||
readonly fieldOption: VueTypeValidableDef<Array<FieldOption>>;
|
||||
};
|
||||
|
||||
const propTypes = createTypes({
|
||||
|
||||
@ -8,9 +8,10 @@ import { errorCode } from '@/utils/errorCode';
|
||||
import { LoadingInstance } from 'element-plus/es/components/loading/src/loading';
|
||||
import FileSaver from 'file-saver';
|
||||
import { getLanguage } from '@/lang';
|
||||
import { encryptBase64, encryptWithAes, generateAesKey } from '@/utils/crypto';
|
||||
import { encrypt } from '@/utils/jsencrypt';
|
||||
import { encryptBase64, encryptWithAes, generateAesKey, decryptWithAes, decryptBase64 } from '@/utils/crypto';
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt';
|
||||
|
||||
const encryptHeader = 'encrypt-key';
|
||||
let downloadLoadingInstance: LoadingInstance;
|
||||
// 是否显示重新登录
|
||||
export const isRelogin = { show: false };
|
||||
@ -78,7 +79,7 @@ service.interceptors.request.use(
|
||||
if (isEncrypt && (config.method === 'post' || config.method === 'put')) {
|
||||
// 生成一个 AES 密钥
|
||||
const aesKey = generateAesKey();
|
||||
config.headers['encrypt-key'] = encrypt(encryptBase64(aesKey));
|
||||
config.headers[encryptHeader] = encrypt(encryptBase64(aesKey));
|
||||
config.data = typeof config.data === 'object' ? encryptWithAes(JSON.stringify(config.data), aesKey) : encryptWithAes(config.data, aesKey);
|
||||
}
|
||||
// FormData数据去请求头Content-Type
|
||||
@ -88,7 +89,6 @@ service.interceptors.request.use(
|
||||
return config;
|
||||
},
|
||||
(error: any) => {
|
||||
console.log(error);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
@ -96,6 +96,20 @@ service.interceptors.request.use(
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(
|
||||
(res: AxiosResponse) => {
|
||||
// 加密后的 AES 秘钥
|
||||
const keyStr = res.headers[encryptHeader];
|
||||
// 加密
|
||||
if (keyStr != null && keyStr != '') {
|
||||
const data = res.data;
|
||||
// 请求体 AES 解密
|
||||
const base64Str = decrypt(keyStr);
|
||||
// base64 解码 得到请求头的 AES 秘钥
|
||||
const aesKey = decryptBase64(base64Str.toString());
|
||||
// aesKey 解码 data
|
||||
const decryptData = decryptWithAes(data, aesKey);
|
||||
// 将结果 (得到的是 JSON 字符串) 转为 JSON
|
||||
res.data = JSON.parse(decryptData);
|
||||
}
|
||||
// 未设置状态码则默认成功状态
|
||||
const code = res.data.code || HttpStatus.SUCCESS;
|
||||
// 获取错误信息
|
||||
@ -123,7 +137,6 @@ service.interceptors.response.use(
|
||||
}
|
||||
return Promise.reject('无效的会话，或者会话已过期，请重新登录。');
|
||||
} else if (code === HttpStatus.SERVER_ERROR) {
|
||||
console.log(msg);
|
||||
ElMessage({ message: msg, type: 'error' });
|
||||
return Promise.reject(new Error(msg));
|
||||
} else if (code === HttpStatus.WARN) {
|
||||
|
||||
@ -68,7 +68,7 @@ export const selectDictLabel = (datas: any, value: number | string) => {
|
||||
if (value === undefined) {
|
||||
return '';
|
||||
}
|
||||
const actions = [];
|
||||
const actions: Array<string | number> = [];
|
||||
Object.keys(datas).some((key) => {
|
||||
if (datas[key].value == '' + value) {
|
||||
actions.push(datas[key].label);
|
||||
@ -245,3 +245,7 @@ export const getNormalPath = (p: string): string => {
|
||||
export const blobValidate = (data: any) => {
|
||||
return data.type !== 'application/json';
|
||||
};
|
||||
|
||||
export default {
|
||||
handleTree
|
||||
};
|
||||
|
||||
@ -19,10 +19,8 @@
|
||||
*/
|
||||
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { ElNotification } from 'element-plus';
|
||||
import useNoticeStore from '@/store/modules/notice';
|
||||
import { ElNotification } from "element-plus";
|
||||
|
||||
const { addNotice } = useNoticeStore();
|
||||
|
||||
let socketUrl: any = ''; // socket地址
|
||||
let websocket: any = null; // websocket 实例
|
||||
@ -33,7 +31,7 @@ let socketError = 0 as number; // 错误次数
|
||||
|
||||
// 初始化socket
|
||||
export const initWebSocket = (url: any) => {
|
||||
if (!import.meta.env.VITE_APP_WEBSOCKET) {
|
||||
if (import.meta.env.VITE_APP_WEBSOCKET === 'false') {
|
||||
return;
|
||||
}
|
||||
socketUrl = url;
|
||||
@ -125,7 +123,7 @@ export const websocketonmessage = () => {
|
||||
if (e.data.indexOf('ping') > 0) {
|
||||
return;
|
||||
}
|
||||
addNotice({
|
||||
useNoticeStore().addNotice({
|
||||
message: e.data,
|
||||
read: false,
|
||||
time: new Date().toLocaleString()
|
||||
@ -135,7 +133,7 @@ export const websocketonmessage = () => {
|
||||
message: e.data,
|
||||
type: 'success',
|
||||
duration: 3000
|
||||
})
|
||||
});
|
||||
return e.data;
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="mb-[10px]" v-show="showSearch">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
||||
<el-form-item label="部门id" prop="deptId">
|
||||
<el-input v-model="queryParams.deptId" placeholder="请输入部门id" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
@ -32,26 +32,26 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['demo:demo:add']">新增</el-button>
|
||||
<el-button v-hasPermi="['demo:demo:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['demo:demo:edit']">修改</el-button>
|
||||
<el-button v-hasPermi="['demo:demo:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['demo:demo:remove']"
|
||||
<el-button v-hasPermi="['demo:demo:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['demo:demo:export']">导出</el-button>
|
||||
<el-button v-hasPermi="['demo:demo:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="demoList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="主键" align="center" prop="id" v-if="true" />
|
||||
<el-table-column v-if="true" label="主键" align="center" prop="id" />
|
||||
<el-table-column label="部门id" align="center" prop="deptId" />
|
||||
<el-table-column label="用户id" align="center" prop="userId" />
|
||||
<el-table-column label="排序号" align="center" prop="orderNum" />
|
||||
@ -60,19 +60,19 @@
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['demo:demo:edit']"></el-button>
|
||||
<el-button v-hasPermi="['demo:demo:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['demo:demo:remove']"></el-button>
|
||||
<el-button v-hasPermi="['demo:demo:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改测试单对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
|
||||
<el-form ref="demoFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="部门id" prop="deptId">
|
||||
<el-input v-model="form.deptId" placeholder="请输入部门id" />
|
||||
@ -129,8 +129,8 @@ const initFormData: DemoForm = {
|
||||
userId: undefined,
|
||||
orderNum: undefined,
|
||||
testKey: undefined,
|
||||
value: undefined,
|
||||
}
|
||||
value: undefined
|
||||
};
|
||||
const data = reactive<PageData<DemoForm, DemoQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
@ -140,27 +140,15 @@ const data = reactive<PageData<DemoForm, DemoQuery>>({
|
||||
userId: undefined,
|
||||
orderNum: undefined,
|
||||
testKey: undefined,
|
||||
value: undefined,
|
||||
value: undefined
|
||||
},
|
||||
rules: {
|
||||
id: [
|
||||
{ required: true, message: "主键不能为空", trigger: "blur" }
|
||||
],
|
||||
deptId: [
|
||||
{ required: true, message: "部门id不能为空", trigger: "blur" }
|
||||
],
|
||||
userId: [
|
||||
{ required: true, message: "用户id不能为空", trigger: "blur" }
|
||||
],
|
||||
orderNum: [
|
||||
{ required: true, message: "排序号不能为空", trigger: "blur" }
|
||||
],
|
||||
testKey: [
|
||||
{ required: true, message: "key键不能为空", trigger: "blur" }
|
||||
],
|
||||
value: [
|
||||
{ required: true, message: "值不能为空", trigger: "blur" }
|
||||
],
|
||||
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
|
||||
deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
|
||||
userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
|
||||
orderNum: [{ required: true, message: '排序号不能为空', trigger: 'blur' }],
|
||||
testKey: [{ required: true, message: 'key键不能为空', trigger: 'blur' }],
|
||||
value: [{ required: true, message: '值不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
@ -173,55 +161,55 @@ const getList = async () => {
|
||||
demoList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
demoFormRef.value?.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: DemoVO[]) => {
|
||||
ids.value = selection.map(item => item.id);
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加测试单";
|
||||
}
|
||||
dialog.title = '添加测试单';
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: DemoVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0]
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getDemo(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改测试单";
|
||||
}
|
||||
dialog.title = '修改测试单';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
@ -229,32 +217,36 @@ const submitForm = () => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.id) {
|
||||
await updateDemo(form.value).finally(() => buttonLoading.value = false);
|
||||
await updateDemo(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addDemo(form.value).finally(() => buttonLoading.value = false);
|
||||
await addDemo(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess("修改成功");
|
||||
proxy?.$modal.msgSuccess('修改成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: DemoVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除测试单编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
|
||||
await proxy?.$modal.confirm('是否确认删除测试单编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delDemo(_ids);
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
}
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download('demo/demo/export', {
|
||||
...queryParams.value
|
||||
}, `demo_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
proxy?.download(
|
||||
'demo/demo/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`demo_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="mb-[10px]" v-show="showSearch">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
||||
<el-form-item label="树节点名" prop="treeName">
|
||||
<el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
@ -20,21 +20,21 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['demo:tree:add']">新增</el-button>
|
||||
<el-button v-hasPermi="['demo:tree:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
<el-table
|
||||
ref="treeTableRef"
|
||||
v-loading="loading"
|
||||
:data="treeList"
|
||||
row-key="id"
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
ref="treeTableRef"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column label="父id" align="center" prop="parentId" />
|
||||
<el-table-column label="部门id" align="center" prop="deptId" />
|
||||
@ -43,20 +43,20 @@
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['demo:tree:edit']" />
|
||||
<el-button v-hasPermi="['demo:tree:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="新增" placement="top">
|
||||
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['demo:tree:add']" />
|
||||
<el-button v-hasPermi="['demo:tree:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['demo:tree:remove']" />
|
||||
<el-button v-hasPermi="['demo:tree:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<!-- 添加或修改测试树对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
|
||||
<el-form ref="treeFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="父id" prop="parentId">
|
||||
<el-tree-select
|
||||
@ -89,18 +89,16 @@
|
||||
</template>
|
||||
|
||||
<script setup name="Tree" lang="ts">
|
||||
import { listTree, getTree, delTree, addTree, updateTree } from "@/api/demo/tree";
|
||||
import { listTree, getTree, delTree, addTree, updateTree } from '@/api/demo/tree';
|
||||
import { TreeVO, TreeQuery, TreeForm } from '@/api/demo/tree/types';
|
||||
|
||||
|
||||
type TreeOption = {
|
||||
id: number;
|
||||
treeName: string;
|
||||
children?: TreeOption[];
|
||||
}
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;;
|
||||
};
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const treeList = ref<TreeVO[]>([]);
|
||||
const treeOptions = ref<TreeOption[]>([]);
|
||||
@ -111,46 +109,35 @@ const loading = ref(false);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const treeFormRef = ref<ElFormInstance>();
|
||||
const treeTableRef = ref<ElTableInstance>()
|
||||
const treeTableRef = ref<ElTableInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
|
||||
const initFormData: TreeForm = {
|
||||
id: undefined,
|
||||
parentId: undefined,
|
||||
deptId: undefined,
|
||||
userId: undefined,
|
||||
treeName: undefined,
|
||||
}
|
||||
id: undefined,
|
||||
parentId: undefined,
|
||||
deptId: undefined,
|
||||
userId: undefined,
|
||||
treeName: undefined
|
||||
};
|
||||
|
||||
const data = reactive<PageData<TreeForm, TreeQuery>>({
|
||||
form: {...initFormData},
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
parentId: undefined,
|
||||
deptId: undefined,
|
||||
userId: undefined,
|
||||
treeName: undefined,
|
||||
treeName: undefined
|
||||
},
|
||||
rules: {
|
||||
id: [
|
||||
{ required: true, message: "主键不能为空", trigger: "blur" }
|
||||
],
|
||||
parentId: [
|
||||
{ required: true, message: "父id不能为空", trigger: "blur" }
|
||||
],
|
||||
deptId: [
|
||||
{ required: true, message: "部门id不能为空", trigger: "blur" }
|
||||
],
|
||||
userId: [
|
||||
{ required: true, message: "用户id不能为空", trigger: "blur" }
|
||||
],
|
||||
treeName: [
|
||||
{ required: true, message: "值不能为空", trigger: "blur" }
|
||||
],
|
||||
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
|
||||
parentId: [{ required: true, message: '父id不能为空', trigger: 'blur' }],
|
||||
deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
|
||||
userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
|
||||
treeName: [{ required: true, message: '值不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
@ -160,44 +147,44 @@ const { queryParams, form, rules } = toRefs(data);
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listTree(queryParams.value);
|
||||
const data = proxy?.handleTree<TreeVO>(res.data, "id", "parentId");
|
||||
const data = proxy?.handleTree<TreeVO>(res.data, 'id', 'parentId');
|
||||
if (data) {
|
||||
treeList.value = data;
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/** 查询测试树下拉树结构 */
|
||||
const getTreeselect = async () => {
|
||||
const res = await listTree();
|
||||
treeOptions.value = [];
|
||||
const data: TreeOption = { id: 0, treeName: '顶级节点', children: [] };
|
||||
data.children = proxy?.handleTree<TreeOption>(res.data, "id", "parentId");
|
||||
data.children = proxy?.handleTree<TreeOption>(res.data, 'id', 'parentId');
|
||||
treeOptions.value.push(data);
|
||||
}
|
||||
};
|
||||
|
||||
// 取消按钮
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 表单重置
|
||||
const reset = () => {
|
||||
form.value = {...initFormData}
|
||||
form.value = { ...initFormData };
|
||||
treeFormRef.value?.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
getList();
|
||||
}
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = (row?: TreeVO) => {
|
||||
@ -209,22 +196,22 @@ const handleAdd = (row?: TreeVO) => {
|
||||
form.value.parentId = 0;
|
||||
}
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加测试树";
|
||||
}
|
||||
dialog.title = '添加测试树';
|
||||
};
|
||||
|
||||
/** 展开/折叠操作 */
|
||||
const handleToggleExpandAll = () => {
|
||||
isExpandAll.value = !isExpandAll.value;
|
||||
toggleExpandAll(treeList.value, isExpandAll.value)
|
||||
}
|
||||
toggleExpandAll(treeList.value, isExpandAll.value);
|
||||
};
|
||||
|
||||
/** 展开/折叠操作 */
|
||||
const toggleExpandAll = (data: TreeVO[], status: boolean) => {
|
||||
data.forEach((item) => {
|
||||
treeTableRef.value?.toggleRowExpansion(item, status)
|
||||
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
|
||||
})
|
||||
}
|
||||
treeTableRef.value?.toggleRowExpansion(item, status);
|
||||
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
|
||||
});
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row: TreeVO) => {
|
||||
@ -236,8 +223,8 @@ const handleUpdate = async (row: TreeVO) => {
|
||||
const res = await getTree(row.id);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改测试树";
|
||||
}
|
||||
dialog.title = '修改测试树';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
@ -245,25 +232,25 @@ const submitForm = () => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.id) {
|
||||
await updateTree(form.value).finally(() => buttonLoading.value = false);
|
||||
await updateTree(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addTree(form.value).finally(() => buttonLoading.value = false);
|
||||
await addTree(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess("操作成功");
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row: TreeVO) => {
|
||||
await proxy?.$modal.confirm('是否确认删除测试树编号为"' + row.id + '"的数据项？');
|
||||
loading.value = true;
|
||||
await delTree(row.id).finally(() => loading.value = false);
|
||||
await delTree(row.id).finally(() => (loading.value = false));
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
}
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
|
||||
@ -24,11 +24,11 @@ import errImage from '@/assets/401_images/401.gif';
|
||||
|
||||
let { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const errGif = ref(errImage + "?" + +new Date());
|
||||
const errGif = ref(errImage + '?' + +new Date());
|
||||
|
||||
function back() {
|
||||
if (proxy?.$route.query.noGoBack) {
|
||||
proxy.$router.push({ path: "/" });
|
||||
proxy.$router.push({ path: '/' });
|
||||
} else {
|
||||
proxy?.$router.go(-1);
|
||||
}
|
||||
|
||||
@ -23,13 +23,13 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
let message = computed(() => {
|
||||
return '找不到网页！'
|
||||
})
|
||||
return '找不到网页！';
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wscn-http404-container{
|
||||
transform: translate(-50%,-50%);
|
||||
.wscn-http404-container {
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
* 部署方式 Docker 容器编排 一键部署业务集群<br />
|
||||
* 国际化 SpringMessage Spring标准国际化方案<br />
|
||||
</p>
|
||||
<p><b>当前版本:</b> <span>v5.1.0</span></p>
|
||||
<p><b>当前版本:</b> <span>v5.1.2</span></p>
|
||||
<p>
|
||||
<el-tag type="danger">¥免费开源</el-tag>
|
||||
</p>
|
||||
@ -76,7 +76,7 @@
|
||||
* 分布式监控 Prometheus、Grafana 全方位性能监控<br />
|
||||
* 其余与 Vue 版本一致<br />
|
||||
</p>
|
||||
<p><b>当前版本:</b> <span>v2.1.0</span></p>
|
||||
<p><b>当前版本:</b> <span>v2.1.2</span></p>
|
||||
<p>
|
||||
<el-tag type="danger">¥免费开源</el-tag>
|
||||
</p>
|
||||
@ -92,15 +92,9 @@
|
||||
</template>
|
||||
|
||||
<script setup name="Index" lang="ts">
|
||||
import { initWebSocket } from '@/utils/websocket';
|
||||
|
||||
onMounted(() => {
|
||||
initWebSocket("ws://" + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
|
||||
});
|
||||
|
||||
const goTarget = (url:string) => {
|
||||
window.open(url, '__blank')
|
||||
}
|
||||
const goTarget = (url: string) => {
|
||||
window.open(url, '__blank');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -126,7 +120,7 @@ const goTarget = (url:string) => {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #676a6c;
|
||||
overflow-x: hidden;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="login">
|
||||
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<h3 class="title">RuoYi-Vue-Plus多租户管理系统</h3>
|
||||
<el-form-item prop="tenantId" v-if="tenantEnabled">
|
||||
<el-form-item v-if="tenantEnabled" prop="tenantId">
|
||||
<el-select v-model="loginForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%">
|
||||
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
|
||||
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
|
||||
@ -18,16 +18,16 @@
|
||||
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaEnabled">
|
||||
<el-form-item v-if="captchaEnabled" prop="code">
|
||||
<el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleLogin">
|
||||
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img" />
|
||||
<img :src="codeUrl" class="login-code-img" @click="getCode" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
||||
<el-form-item style="float: right;">
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
|
||||
<el-form-item style="float: right">
|
||||
<el-button circle title="微信登录" @click="doSocialLogin('wechat')">
|
||||
<svg-icon icon-class="wechat" />
|
||||
</el-button>
|
||||
@ -41,12 +41,12 @@
|
||||
<svg-icon icon-class="github" />
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
|
||||
<el-form-item style="width: 100%">
|
||||
<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
<div style="float: right;" v-if="register">
|
||||
<div v-if="register" style="float: right">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@ -64,7 +64,7 @@ import { authBinding } from '@/api/system/social/auth';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { LoginData, TenantVO } from '@/api/types';
|
||||
import { to } from 'await-to-js';
|
||||
import { HttpStatus } from "@/enums/RespEnum";
|
||||
import { HttpStatus } from '@/enums/RespEnum';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
@ -79,7 +79,7 @@ const loginForm = ref<LoginData>({
|
||||
} as LoginData);
|
||||
|
||||
const loginRules: ElFormRules = {
|
||||
tenantId: [{ required: true, trigger: "blur", message: "请输入您的租户编号" }],
|
||||
tenantId: [{ required: true, trigger: 'blur', message: '请输入您的租户编号' }],
|
||||
username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
|
||||
password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
|
||||
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
|
||||
@ -92,7 +92,6 @@ const captchaEnabled = ref(true);
|
||||
// 租户开关
|
||||
const tenantEnabled = ref(true);
|
||||
|
||||
|
||||
// 注册开关
|
||||
const register = ref(false);
|
||||
const redirect = ref(undefined);
|
||||
@ -100,9 +99,13 @@ const loginRef = ref<ElFormInstance>();
|
||||
// 租户列表
|
||||
const tenantList = ref<TenantVO[]>([]);
|
||||
|
||||
watch(() => router.currentRoute.value, (newRoute: any) => {
|
||||
redirect.value = newRoute.query && newRoute.query.redirect;
|
||||
}, { immediate: true });
|
||||
watch(
|
||||
() => router.currentRoute.value,
|
||||
(newRoute: any) => {
|
||||
redirect.value = newRoute.query && newRoute.query.redirect;
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const handleLogin = () => {
|
||||
loginRef.value?.validate(async (valid: boolean, fields: any) => {
|
||||
@ -110,13 +113,13 @@ const handleLogin = () => {
|
||||
loading.value = true;
|
||||
// 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码
|
||||
if (loginForm.value.rememberMe) {
|
||||
localStorage.setItem("tenantId", String(loginForm.value.tenantId));
|
||||
localStorage.setItem('tenantId', String(loginForm.value.tenantId));
|
||||
localStorage.setItem('username', String(loginForm.value.username));
|
||||
localStorage.setItem('password', String(loginForm.value.password));
|
||||
localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
|
||||
} else {
|
||||
// 否则移除
|
||||
localStorage.removeItem("tenantId");
|
||||
localStorage.removeItem('tenantId');
|
||||
localStorage.removeItem('username');
|
||||
localStorage.removeItem('password');
|
||||
localStorage.removeItem('rememberMe');
|
||||
@ -153,7 +156,7 @@ const getCode = async () => {
|
||||
};
|
||||
|
||||
const getLoginData = () => {
|
||||
const tenantId = localStorage.getItem("tenantId");
|
||||
const tenantId = localStorage.getItem('tenantId');
|
||||
const username = localStorage.getItem('username');
|
||||
const password = localStorage.getItem('password');
|
||||
const rememberMe = localStorage.getItem('rememberMe');
|
||||
@ -163,8 +166,7 @@ const getLoginData = () => {
|
||||
password: password === null ? String(loginForm.value.password) : String(password),
|
||||
rememberMe: rememberMe === null ? false : Boolean(rememberMe)
|
||||
} as LoginData;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取租户列表
|
||||
@ -178,12 +180,15 @@ const initTenantList = async () => {
|
||||
loginForm.value.tenantId = tenantList.value[0].tenantId;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//检测租户选择框的变化
|
||||
watch(() => loginForm.value.tenantId, () => {
|
||||
localStorage.setItem("tenantId", String(loginForm.value.tenantId))
|
||||
});
|
||||
watch(
|
||||
() => loginForm.value.tenantId,
|
||||
() => {
|
||||
localStorage.setItem('tenantId', String(loginForm.value.tenantId));
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 第三方登录
|
||||
@ -200,8 +205,6 @@ const doSocialLogin = (type: string) => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getCode();
|
||||
initTenantList();
|
||||
@ -215,7 +218,7 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-image: url("../assets/images/login-background.jpg");
|
||||
background-image: url('../assets/images/login-background.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
74
src/views/monitor/cache/index.vue
vendored
74
src/views/monitor/cache/index.vue
vendored
@ -4,8 +4,8 @@
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<Monitor style="width: 1em; height: 1em; vertical-align: middle;" />
|
||||
<span style="vertical-align: middle;">基本信息</span>
|
||||
<Monitor style="width: 1em; height: 1em; vertical-align: middle" />
|
||||
<span style="vertical-align: middle">基本信息</span>
|
||||
</template>
|
||||
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
@ -16,25 +16,25 @@
|
||||
<div class="cell">Redis版本</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div>
|
||||
<div v-if="cache.info" class="cell">{{ cache.info.redis_version }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">运行模式</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.redis_mode === "standalone" ? "单机" : "集群" }}</div>
|
||||
<div v-if="cache.info" class="cell">{{ cache.info.redis_mode === 'standalone' ? '单机' : '集群' }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">端口</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div>
|
||||
<div v-if="cache.info" class="cell">{{ cache.info.tcp_port }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">客户端数</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div>
|
||||
<div v-if="cache.info" class="cell">{{ cache.info.connected_clients }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -42,25 +42,25 @@
|
||||
<div class="cell">运行时间(天)</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div>
|
||||
<div v-if="cache.info" class="cell">{{ cache.info.uptime_in_days }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">使用内存</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div>
|
||||
<div v-if="cache.info" class="cell">{{ cache.info.used_memory_human }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">使用CPU</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div>
|
||||
<div v-if="cache.info" class="cell">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">内存配置</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div>
|
||||
<div v-if="cache.info" class="cell">{{ cache.info.maxmemory_human }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -68,25 +68,25 @@
|
||||
<div class="cell">AOF是否开启</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.aof_enabled === "0" ? "否" : "是" }}</div>
|
||||
<div v-if="cache.info" class="cell">{{ cache.info.aof_enabled === '0' ? '否' : '是' }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">RDB是否成功</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div>
|
||||
<div v-if="cache.info" class="cell">{{ cache.info.rdb_last_bgsave_status }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">Key数量</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.dbSize">{{ cache.dbSize }}</div>
|
||||
<div v-if="cache.dbSize" class="cell">{{ cache.dbSize }}</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell">网络入口/出口</div>
|
||||
</td>
|
||||
<td class="el-table__cell is-leaf">
|
||||
<div class="cell" v-if="cache.info">
|
||||
<div v-if="cache.info" class="cell">
|
||||
{{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps
|
||||
</div>
|
||||
</td>
|
||||
@ -100,8 +100,8 @@
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<PieChart style="width: 1em; height: 1em; vertical-align: middle;" />
|
||||
<span style="vertical-align: middle;">命令统计</span>
|
||||
<PieChart style="width: 1em; height: 1em; vertical-align: middle" />
|
||||
<span style="vertical-align: middle">命令统计</span>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<div ref="commandstats" style="height: 420px" />
|
||||
@ -112,7 +112,7 @@
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<Odometer style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">内存信息</span>
|
||||
<Odometer style="width: 1em; height: 1em; vertical-align: middle" /> <span style="vertical-align: middle">内存信息</span>
|
||||
</template>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<div ref="usedmemory" style="height: 420px" />
|
||||
@ -133,38 +133,38 @@ const usedmemory = ref();
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const getList = async () => {
|
||||
proxy?.$modal.loading("正在加载缓存监控数据，请稍候！");
|
||||
proxy?.$modal.loading('正在加载缓存监控数据，请稍候！');
|
||||
const res = await getCache();
|
||||
proxy?.$modal.closeLoading();
|
||||
cache.value = res.data;
|
||||
const commandstatsIntance = echarts.init(commandstats.value, "macarons");
|
||||
const commandstatsIntance = echarts.init(commandstats.value, 'macarons');
|
||||
commandstatsIntance.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "命令",
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
name: '命令',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ["50%", "38%"],
|
||||
center: ['50%', '38%'],
|
||||
data: res.data.commandStats,
|
||||
animationEasing: "cubicInOut",
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 1000
|
||||
}
|
||||
]
|
||||
});
|
||||
const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
|
||||
const usedmemoryInstance = echarts.init(usedmemory.value, 'macarons');
|
||||
usedmemoryInstance.setOption({
|
||||
tooltip: {
|
||||
formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
|
||||
formatter: '{b} <br/>{a} : ' + cache.value.info.used_memory_human
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "峰值",
|
||||
type: "gauge",
|
||||
name: '峰值',
|
||||
type: 'gauge',
|
||||
min: 0,
|
||||
max: 1000,
|
||||
detail: {
|
||||
@ -173,19 +173,19 @@ const getList = async () => {
|
||||
data: [
|
||||
{
|
||||
value: parseFloat(cache.value.info.used_memory_human),
|
||||
name: "内存消耗"
|
||||
name: '内存消耗'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
window.addEventListener("resize",()=>{
|
||||
commandstatsIntance.resize()
|
||||
usedmemoryInstance.resize()
|
||||
});
|
||||
}
|
||||
window.addEventListener('resize', () => {
|
||||
commandstatsIntance.resize();
|
||||
usedmemoryInstance.resize();
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="mb-[10px]" v-show="showSearch">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
||||
<el-form-item label="登录地址" prop="ipaddr">
|
||||
<el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 240px;" @keyup.enter="handleQuery" />
|
||||
<el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px;" @keyup.enter="handleQuery" />
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="登录状态" clearable style="width: 240px">
|
||||
@ -39,22 +39,22 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['monitor:logininfor:remove']">
|
||||
<el-button v-hasPermi="['monitor:logininfor:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
|
||||
删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
|
||||
<el-button v-hasPermi="['monitor:logininfor:remove']" type="danger" plain icon="Delete" @click="handleClean">清空</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Unlock" :disabled="single" @click="handleUnlock" v-hasPermi="['monitor:logininfor:unlock']">
|
||||
<el-button v-hasPermi="['monitor:logininfor:unlock']" type="primary" plain icon="Unlock" :disabled="single" @click="handleUnlock">
|
||||
解锁
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['monitor:logininfor:export']">导出</el-button>
|
||||
<el-button v-hasPermi="['monitor:logininfor:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
@ -62,8 +62,8 @@
|
||||
ref="loginInfoTableRef"
|
||||
v-loading="loading"
|
||||
:data="loginInfoList"
|
||||
@selection-change="handleSelectionChange"
|
||||
:default-sort="defaultSort"
|
||||
@selection-change="handleSelectionChange"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
@ -99,18 +99,18 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Logininfor" lang="ts">
|
||||
import { list, delLoginInfo, cleanLoginInfo, unlockLoginInfo } from "@/api/monitor/loginInfo";
|
||||
import { LoginInfoQuery, LoginInfoVO } from "@/api/monitor/loginInfo/types";
|
||||
import { list, delLoginInfo, cleanLoginInfo, unlockLoginInfo } from '@/api/monitor/loginInfo';
|
||||
import { LoginInfoQuery, LoginInfoVO } from '@/api/monitor/loginInfo/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_device_type } = toRefs<any>(proxy?.useDict("sys_device_type"));
|
||||
const { sys_common_status } = toRefs<any>(proxy?.useDict("sys_common_status"));
|
||||
const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));
|
||||
const { sys_common_status } = toRefs<any>(proxy?.useDict('sys_common_status'));
|
||||
|
||||
const loginInfoList = ref<LoginInfoVO[]>([]);
|
||||
const loading = ref(true);
|
||||
@ -120,85 +120,89 @@ const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const selectName = ref<Array<string>>([]);
|
||||
const total = ref(0);
|
||||
const dateRange = ref<[DateModelType,DateModelType]>(['', '']);
|
||||
const defaultSort = ref<any>({ prop: "loginTime", order: "descending" });
|
||||
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
|
||||
const defaultSort = ref<any>({ prop: 'loginTime', order: 'descending' });
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const loginInfoTableRef = ref<ElTableInstance>();
|
||||
// 查询参数
|
||||
const queryParams = ref<LoginInfoQuery>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
ipaddr: '',
|
||||
userName: '',
|
||||
status: '',
|
||||
orderByColumn: defaultSort.value.prop,
|
||||
isAsc: defaultSort.value.order
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
ipaddr: '',
|
||||
userName: '',
|
||||
status: '',
|
||||
orderByColumn: defaultSort.value.prop,
|
||||
isAsc: defaultSort.value.order
|
||||
});
|
||||
|
||||
/** 查询登录日志列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await list(proxy?.addDateRange(queryParams.value, dateRange.value));
|
||||
loginInfoList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
loading.value = true;
|
||||
const res = await list(proxy?.addDateRange(queryParams.value, dateRange.value));
|
||||
loginInfoList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
dateRange.value = ['', ''];
|
||||
queryFormRef.value?.resetFields();
|
||||
queryParams.value.pageNum = 1;
|
||||
loginInfoTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
|
||||
}
|
||||
dateRange.value = ['', ''];
|
||||
queryFormRef.value?.resetFields();
|
||||
queryParams.value.pageNum = 1;
|
||||
loginInfoTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
|
||||
};
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: LoginInfoVO[]) => {
|
||||
ids.value = selection.map(item => item.infoId);
|
||||
multiple.value = !selection.length;
|
||||
single.value = selection.length != 1;
|
||||
selectName.value = selection.map(item => item.userName);
|
||||
}
|
||||
ids.value = selection.map((item) => item.infoId);
|
||||
multiple.value = !selection.length;
|
||||
single.value = selection.length != 1;
|
||||
selectName.value = selection.map((item) => item.userName);
|
||||
};
|
||||
/** 排序触发事件 */
|
||||
const handleSortChange = (column: any) => {
|
||||
queryParams.value.orderByColumn = column.prop;
|
||||
queryParams.value.isAsc = column.order;
|
||||
getList();
|
||||
}
|
||||
queryParams.value.orderByColumn = column.prop;
|
||||
queryParams.value.isAsc = column.order;
|
||||
getList();
|
||||
};
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: LoginInfoVO) => {
|
||||
const infoIds = row?.infoId || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?');
|
||||
await delLoginInfo(infoIds);
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
}
|
||||
const infoIds = row?.infoId || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?');
|
||||
await delLoginInfo(infoIds);
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
};
|
||||
/** 清空按钮操作 */
|
||||
const handleClean = async () => {
|
||||
await proxy?.$modal.confirm("是否确认清空所有登录日志数据项?");
|
||||
await cleanLoginInfo();
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("清空成功");
|
||||
}
|
||||
await proxy?.$modal.confirm('是否确认清空所有登录日志数据项?');
|
||||
await cleanLoginInfo();
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess('清空成功');
|
||||
};
|
||||
/** 解锁按钮操作 */
|
||||
const handleUnlock = async () => {
|
||||
const username = selectName.value;
|
||||
await proxy?.$modal.confirm('是否确认解锁用户"' + username + '"数据项?');
|
||||
await unlockLoginInfo(username);
|
||||
proxy?.$modal.msgSuccess("用户" + username + "解锁成功");
|
||||
}
|
||||
const username = selectName.value;
|
||||
await proxy?.$modal.confirm('是否确认解锁用户"' + username + '"数据项?');
|
||||
await unlockLoginInfo(username);
|
||||
proxy?.$modal.msgSuccess('用户' + username + '解锁成功');
|
||||
};
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download("monitor/logininfor/export", {
|
||||
...queryParams.value,
|
||||
}, `config_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
proxy?.download(
|
||||
'monitor/logininfor/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`config_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
})
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="p-2">
|
||||
<div class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="登录地址" prop="ipaddr">
|
||||
<el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 200px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
@ -20,7 +20,7 @@
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="onlineList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
|
||||
style="width: 100%;"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column label="序号" width="50" type="index" align="center">
|
||||
<template #default="scope">
|
||||
@ -48,24 +48,26 @@
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="强退" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">
|
||||
<el-button v-hasPermi="['monitor:online:forceLogout']" link type="primary" icon="Delete" @click="handleForceLogout(scope.row)">
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" />
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Online" lang="ts">
|
||||
import { forceLogout, list as initData } from "@/api/monitor/online";
|
||||
import { OnlineQuery, OnlineVO } from "@/api/monitor/online/types";
|
||||
import { forceLogout, list as initData } from '@/api/monitor/online';
|
||||
import { OnlineQuery, OnlineVO } from '@/api/monitor/online/types';
|
||||
import api from '@/api/system/user';
|
||||
import { to } from 'await-to-js';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_device_type } = toRefs<any>(proxy?.useDict("sys_device_type"));
|
||||
const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));
|
||||
|
||||
const onlineList = ref<OnlineVO[]>([]);
|
||||
const loading = ref(true);
|
||||
@ -87,26 +89,28 @@ const getList = async () => {
|
||||
onlineList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
};
|
||||
/** 强退按钮操作 */
|
||||
const handleForceLogout = async (row: OnlineVO) => {
|
||||
await proxy?.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?');
|
||||
await forceLogout(row.tokenId);
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
}
|
||||
const [err] = await to(proxy?.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?') as any);
|
||||
if (!err) {
|
||||
await forceLogout(row.tokenId);
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="mb-[10px]">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
||||
<el-form-item label="操作地址" prop="operIp">
|
||||
<el-input v-model="queryParams.operIp" placeholder="请输入操作地址" clearable style="width: 240px;" @keyup.enter="handleQuery"/>
|
||||
<el-input v-model="queryParams.operIp" placeholder="请输入操作地址" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="系统模块" prop="title">
|
||||
<el-input v-model="queryParams.title" placeholder="请输入系统模块" clearable style="width: 240px;" @keyup.enter="handleQuery" />
|
||||
<el-input v-model="queryParams.title" placeholder="请输入系统模块" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人员" prop="operName">
|
||||
<el-input v-model="queryParams.operName" placeholder="请输入操作人员" clearable style="width: 240px;" @keyup.enter="handleQuery" />
|
||||
<el-input v-model="queryParams.operName" placeholder="请输入操作人员" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="businessType">
|
||||
<el-select v-model="queryParams.businessType" placeholder="操作类型" clearable style="width: 240px">
|
||||
@ -47,17 +47,17 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['monitor:operlog:remove']">
|
||||
<el-button v-hasPermi="['monitor:operlog:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
|
||||
删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="WarnTriangleFilled" @click="handleClean" v-hasPermi="['monitor:operlog:remove']">清空</el-button>
|
||||
<el-button v-hasPermi="['monitor:operlog:remove']" type="danger" plain icon="WarnTriangleFilled" @click="handleClean">清空</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['monitor:operlog:export']">导出</el-button>
|
||||
<el-button v-hasPermi="['monitor:operlog:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
@ -65,8 +65,8 @@
|
||||
ref="operLogTableRef"
|
||||
v-loading="loading"
|
||||
:data="operlogList"
|
||||
@selection-change="handleSelectionChange"
|
||||
:default-sort="defaultSort"
|
||||
@selection-change="handleSelectionChange"
|
||||
@sort-change="handleSortChange"
|
||||
>
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
@ -86,6 +86,7 @@
|
||||
sortable="custom"
|
||||
:sort-orders="['descending', 'ascending']"
|
||||
/>
|
||||
<el-table-column label="部门" align="center" prop="deptName" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
@ -113,25 +114,26 @@
|
||||
<el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="详细" placement="top">
|
||||
<el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:operlog:query']"> </el-button>
|
||||
<el-button v-hasPermi="['monitor:operlog:query']" link type="primary" icon="View" @click="handleView(scope.row)"> </el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 操作日志详细 -->
|
||||
<el-dialog title="操作日志详细" v-model="dialog.visible" width="700px" append-to-body>
|
||||
<el-dialog v-model="dialog.visible" title="操作日志详细" width="700px" append-to-body>
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
|
||||
<el-form-item label="登录信息：">{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="登录信息：">{{ form.operName }} / {{ form.deptName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
|
||||
<el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
|
||||
<el-form-item label="请求信息：">{{ form.requestMethod }} {{ form.operUrl }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="操作方法：">{{ form.method }}</el-form-item>
|
||||
@ -155,7 +157,7 @@
|
||||
<el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
|
||||
<el-form-item v-if="form.status === 1" label="异常信息：">{{ form.errorMsg }}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
@ -173,7 +175,7 @@ import { list, delOperlog, cleanOperlog } from '@/api/monitor/operlog';
|
||||
import { OperLogForm, OperLogQuery, OperLogVO } from '@/api/monitor/operlog/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_oper_type, sys_common_status } = toRefs<any>(proxy?.useDict("sys_oper_type", "sys_common_status"));
|
||||
const { sys_oper_type, sys_common_status } = toRefs<any>(proxy?.useDict('sys_oper_type', 'sys_common_status'));
|
||||
|
||||
const operlogList = ref<OperLogVO[]>([]);
|
||||
const loading = ref(true);
|
||||
@ -182,7 +184,7 @@ const ids = ref<Array<number | string>>([]);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
|
||||
const defaultSort = ref<any>({ prop: "operTime", order: "descending" });
|
||||
const defaultSort = ref<any>({ prop: 'operTime', order: 'descending' });
|
||||
|
||||
const operLogTableRef = ref<ElTableInstance>();
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
@ -192,7 +194,6 @@ const dialog = reactive<DialogOption>({
|
||||
title: ''
|
||||
});
|
||||
|
||||
|
||||
const data = reactive<PageData<OperLogForm, OperLogQuery>>({
|
||||
form: {
|
||||
operId: undefined,
|
||||
@ -238,63 +239,67 @@ const getList = async () => {
|
||||
operlogList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
/** 操作日志类型字典翻译 */
|
||||
const typeFormat = (row: OperLogForm) => {
|
||||
return proxy?.selectDictLabel(sys_oper_type.value, row.businessType);
|
||||
}
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
dateRange.value = ['', ''];
|
||||
queryFormRef.value?.resetFields();
|
||||
queryParams.value.pageNum = 1;
|
||||
operLogTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
|
||||
}
|
||||
};
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: OperLogVO[]) => {
|
||||
ids.value = selection.map(item => item.operId);
|
||||
ids.value = selection.map((item) => item.operId);
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
};
|
||||
/** 排序触发事件 */
|
||||
const handleSortChange = (column: any) => {
|
||||
queryParams.value.orderByColumn = column.prop;
|
||||
queryParams.value.isAsc = column.order;
|
||||
getList();
|
||||
}
|
||||
};
|
||||
/** 详细按钮操作 */
|
||||
const handleView = (row: OperLogVO) => {
|
||||
dialog.visible = true;
|
||||
form.value = row;
|
||||
}
|
||||
};
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: OperLogVO) => {
|
||||
const operIds = row?.operId || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?');
|
||||
await delOperlog(operIds);
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
}
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
};
|
||||
|
||||
/** 清空按钮操作 */
|
||||
const handleClean = async () => {
|
||||
await proxy?.$modal.confirm("是否确认清空所有操作日志数据项?");
|
||||
await proxy?.$modal.confirm('是否确认清空所有操作日志数据项?');
|
||||
await cleanOperlog();
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("清空成功");
|
||||
}
|
||||
proxy?.$modal.msgSuccess('清空成功');
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download("monitor/operlog/export", {
|
||||
...queryParams.value,
|
||||
}, `config_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
proxy?.download(
|
||||
'monitor/operlog/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`config_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
onMounted(() => {
|
||||
getList();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { params, query } = route
|
||||
const { path } = params
|
||||
const { params, query } = route;
|
||||
const { path } = params;
|
||||
|
||||
router.replace({ path: '/' + path, query })
|
||||
router.replace({ path: '/' + path, query });
|
||||
</script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="register">
|
||||
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
|
||||
<h3 class="title">RuoYi-Vue-Plus多租户管理系统</h3>
|
||||
<el-form-item prop="tenantId" v-if="tenantEnabled">
|
||||
<el-form-item v-if="tenantEnabled" prop="tenantId">
|
||||
<el-select v-model="registerForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%">
|
||||
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
|
||||
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
|
||||
@ -30,20 +30,20 @@
|
||||
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaEnabled">
|
||||
<el-input size="large" v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleRegister">
|
||||
<el-form-item v-if="captchaEnabled" prop="code">
|
||||
<el-input v-model="registerForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleRegister">
|
||||
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
<div class="register-code">
|
||||
<img :src="codeUrl" @click="getCode" class="register-code-img" />
|
||||
<img :src="codeUrl" class="register-code-img" @click="getCode" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleRegister">
|
||||
<el-form-item style="width: 100%">
|
||||
<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleRegister">
|
||||
<span v-if="!loading">注 册</span>
|
||||
<span v-else>注 册 中...</span>
|
||||
</el-button>
|
||||
<div style="float: right;">
|
||||
<div style="float: right">
|
||||
<router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@ -63,64 +63,61 @@ import { to } from 'await-to-js';
|
||||
const router = useRouter();
|
||||
|
||||
const registerForm = ref<RegisterForm>({
|
||||
tenantId: "",
|
||||
username: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
code: "",
|
||||
uuid: "",
|
||||
userType: "sys_user"
|
||||
tenantId: '',
|
||||
username: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
code: '',
|
||||
uuid: '',
|
||||
userType: 'sys_user'
|
||||
});
|
||||
|
||||
// 租户开关
|
||||
const tenantEnabled = ref(true);
|
||||
|
||||
|
||||
const equalToPassword = (rule: any, value: string, callback: any) => {
|
||||
if (registerForm.value.password !== value) {
|
||||
callback(new Error("两次输入的密码不一致"));
|
||||
callback(new Error('两次输入的密码不一致'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const registerRules: ElFormRules = {
|
||||
tenantId: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的租户编号" }
|
||||
],
|
||||
tenantId: [{ required: true, trigger: 'blur', message: '请输入您的租户编号' }],
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的账号" },
|
||||
{ min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
|
||||
{ required: true, trigger: 'blur', message: '请输入您的账号' },
|
||||
{ min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "请输入您的密码" },
|
||||
{ min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }
|
||||
{ required: true, trigger: 'blur', message: '请输入您的密码' },
|
||||
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, trigger: "blur", message: "请再次输入您的密码" },
|
||||
{ required: true, validator: equalToPassword, trigger: "blur" }
|
||||
{ required: true, trigger: 'blur', message: '请再次输入您的密码' },
|
||||
{ required: true, validator: equalToPassword, trigger: 'blur' }
|
||||
],
|
||||
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
||||
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
|
||||
};
|
||||
const codeUrl = ref("");
|
||||
const codeUrl = ref('');
|
||||
const loading = ref(false);
|
||||
const captchaEnabled = ref(true);
|
||||
const registerRef = ref(ElForm);
|
||||
const registerRef = ref<ElFormInstance>();
|
||||
// 租户列表
|
||||
const tenantList = ref<TenantVO[]>([]);
|
||||
|
||||
const handleRegister = () => {
|
||||
registerRef.value.validate(async (valid: boolean) => {
|
||||
registerRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
const [err] = await to(register(registerForm.value));
|
||||
if (!err) {
|
||||
const username = registerForm.value.username;
|
||||
await ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
|
||||
await ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + ' 注册成功！</font>', '系统提示', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
type: "success",
|
||||
type: 'success'
|
||||
});
|
||||
await router.push("/login");
|
||||
await router.push('/login');
|
||||
} else {
|
||||
loading.value = false;
|
||||
if (captchaEnabled) {
|
||||
@ -129,7 +126,7 @@ const handleRegister = () => {
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getCode = async () => {
|
||||
const res = await getCodeImg();
|
||||
@ -150,12 +147,12 @@ const initTenantList = async () => {
|
||||
registerForm.value.tenantId = tenantList.value[0].tenantId;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getCode();
|
||||
initTenantList();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -164,7 +161,7 @@ onMounted(() => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-image: url("../assets/images/login-background.jpg");
|
||||
background-image: url('../assets/images/login-background.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="search" v-show="showSearch">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
|
||||
<div v-show="showSearch" class="search">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
|
||||
<el-form-item label="客户端key" prop="clientKey">
|
||||
<el-input v-model="queryParams.clientKey" placeholder="请输入客户端key" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
@ -26,28 +26,28 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:client:add']">新增</el-button>
|
||||
<el-button v-hasPermi="['system:client:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:client:edit']">
|
||||
<el-button v-hasPermi="['system:client:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">
|
||||
修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:client:remove']">
|
||||
<el-button v-hasPermi="['system:client:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
|
||||
删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:client:export']">导出</el-button>
|
||||
<el-button v-hasPermi="['system:client:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="clientList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="id" align="center" prop="id" v-if="true" />
|
||||
<el-table-column v-if="true" label="id" align="center" prop="id" />
|
||||
<el-table-column label="客户端id" align="center" prop="clientId" />
|
||||
<el-table-column label="客户端key" align="center" prop="clientKey" />
|
||||
<el-table-column label="客户端秘钥" align="center" prop="clientSecret" />
|
||||
@ -63,7 +63,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="Token活跃超时时间" align="center" prop="activeTimeout" />
|
||||
<el-table-column label="Token固定超时时间" align="center" prop="timeout" />
|
||||
<el-table-column label="状态" align="center" key="status">
|
||||
<el-table-column key="status" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
|
||||
</template>
|
||||
@ -71,19 +71,19 @@
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:client:edit']"></el-button>
|
||||
<el-button v-hasPermi="['system:client:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:client:remove']"></el-button>
|
||||
<el-button v-hasPermi="['system:client:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改客户端管理对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
|
||||
<el-form ref="clientFormRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="客户端key" prop="clientKey">
|
||||
<el-input v-model="form.clientKey" :disabled="form.id != null" placeholder="请输入客户端key" />
|
||||
@ -146,9 +146,9 @@ import { listClient, getClient, delClient, addClient, updateClient, changeStatus
|
||||
import { ClientVO, ClientQuery, ClientForm } from '@/api/system/client/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
|
||||
const { sys_grant_type } = toRefs<any>(proxy?.useDict("sys_grant_type"));
|
||||
const { sys_device_type } = toRefs<any>(proxy?.useDict("sys_device_type"));
|
||||
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
|
||||
const { sys_grant_type } = toRefs<any>(proxy?.useDict('sys_grant_type'));
|
||||
const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));
|
||||
|
||||
const clientList = ref<ClientVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
@ -176,10 +176,10 @@ const initFormData: ClientForm = {
|
||||
deviceType: undefined,
|
||||
activeTimeout: undefined,
|
||||
timeout: undefined,
|
||||
status: undefined,
|
||||
}
|
||||
status: undefined
|
||||
};
|
||||
const data = reactive<PageData<ClientForm, ClientQuery>>({
|
||||
form: {...initFormData},
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
@ -190,27 +190,15 @@ const data = reactive<PageData<ClientForm, ClientQuery>>({
|
||||
deviceType: undefined,
|
||||
activeTimeout: undefined,
|
||||
timeout: undefined,
|
||||
status: undefined,
|
||||
status: undefined
|
||||
},
|
||||
rules: {
|
||||
id: [
|
||||
{ required: true, message: "id不能为空", trigger: "blur" }
|
||||
],
|
||||
clientId: [
|
||||
{ required: true, message: "客户端id不能为空", trigger: "blur" }
|
||||
],
|
||||
clientKey: [
|
||||
{ required: true, message: "客户端key不能为空", trigger: "blur" }
|
||||
],
|
||||
clientSecret: [
|
||||
{ required: true, message: "客户端秘钥不能为空", trigger: "blur" }
|
||||
],
|
||||
grantTypeList: [
|
||||
{ required: true, message: "授权类型不能为空", trigger: "change" }
|
||||
],
|
||||
deviceType: [
|
||||
{ required: true, message: "设备类型不能为空", trigger: "change" }
|
||||
],
|
||||
id: [{ required: true, message: 'id不能为空', trigger: 'blur' }],
|
||||
clientId: [{ required: true, message: '客户端id不能为空', trigger: 'blur' }],
|
||||
clientKey: [{ required: true, message: '客户端key不能为空', trigger: 'blur' }],
|
||||
clientSecret: [{ required: true, message: '客户端秘钥不能为空', trigger: 'blur' }],
|
||||
grantTypeList: [{ required: true, message: '授权类型不能为空', trigger: 'change' }],
|
||||
deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }]
|
||||
}
|
||||
});
|
||||
|
||||
@ -223,55 +211,55 @@ const getList = async () => {
|
||||
clientList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = {...initFormData};
|
||||
form.value = { ...initFormData };
|
||||
clientFormRef.value?.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: ClientVO[]) => {
|
||||
ids.value = selection.map(item => item.id);
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加客户端管理";
|
||||
}
|
||||
dialog.title = '添加客户端管理';
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: ClientVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0]
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getClient(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改客户端管理";
|
||||
}
|
||||
dialog.title = '修改客户端管理';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
@ -279,44 +267,48 @@ const submitForm = () => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.id) {
|
||||
await updateClient(form.value).finally(() => buttonLoading.value = false);
|
||||
await updateClient(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addClient(form.value).finally(() => buttonLoading.value = false);
|
||||
await addClient(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess("修改成功");
|
||||
proxy?.$modal.msgSuccess('修改成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: ClientVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除客户端管理编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
|
||||
await proxy?.$modal.confirm('是否确认删除客户端管理编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delClient(_ids);
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
}
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download('system/client/export', {
|
||||
...queryParams.value
|
||||
}, `client_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
proxy?.download(
|
||||
'system/client/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`client_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
/** 状态修改 */
|
||||
const handleStatusChange = async (row: ClientVO) => {
|
||||
let text = row.status === "0" ? "启用" : "停用"
|
||||
let text = row.status === '0' ? '启用' : '停用';
|
||||
try {
|
||||
await proxy?.$modal.confirm('确认要"' + text + '"吗?');
|
||||
await changeStatus(row.id, row.status);
|
||||
proxy?.$modal.msgSuccess(text + "成功");
|
||||
proxy?.$modal.msgSuccess(text + '成功');
|
||||
} catch (err) {
|
||||
row.status = row.status === "0" ? "1" : "0";
|
||||
row.status = row.status === '0' ? '1' : '0';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="mb-[10px]" v-show="showSearch">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
@ -15,7 +15,7 @@
|
||||
<el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" style="width: 308px;">
|
||||
<el-form-item label="创建时间" style="width: 308px">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
@ -38,31 +38,31 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:config:add']">新增</el-button>
|
||||
<el-button v-hasPermi="['system:config:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:config:edit']">
|
||||
<el-button v-hasPermi="['system:config:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">
|
||||
修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:config:remove']">
|
||||
<el-button v-hasPermi="['system:config:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
|
||||
删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:config:export']">导出</el-button>
|
||||
<el-button v-hasPermi="['system:config:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Refresh" @click="handleRefreshCache" v-hasPermi="['system:config:remove']">刷新缓存</el-button>
|
||||
<el-button v-hasPermi="['system:config:remove']" type="danger" plain icon="Refresh" @click="handleRefreshCache">刷新缓存</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="参数主键" align="center" prop="configId" v-if="false" />
|
||||
<el-table-column v-if="false" label="参数主键" align="center" prop="configId" />
|
||||
<el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
|
||||
@ -80,19 +80,19 @@
|
||||
<el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']"></el-button>
|
||||
<el-button v-hasPermi="['system:config:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']"></el-button>
|
||||
<el-button v-hasPermi="['system:config:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
|
||||
<el-form ref="configFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input v-model="form.configName" placeholder="请输入参数名称" />
|
||||
@ -123,11 +123,11 @@
|
||||
</template>
|
||||
|
||||
<script setup name="Config" lang="ts">
|
||||
import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
|
||||
import { ConfigForm, ConfigQuery, ConfigVO } from "@/api/system/config/types";
|
||||
import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from '@/api/system/config';
|
||||
import { ConfigForm, ConfigQuery, ConfigVO } from '@/api/system/config/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_yes_no } = toRefs<any>(proxy?.useDict("sys_yes_no"));
|
||||
const { sys_yes_no } = toRefs<any>(proxy?.useDict('sys_yes_no'));
|
||||
|
||||
const configList = ref<ConfigVO[]>([]);
|
||||
const loading = ref(true);
|
||||
@ -149,9 +149,9 @@ const initFormData: ConfigForm = {
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configValue: '',
|
||||
configType: "Y",
|
||||
configType: 'Y',
|
||||
remark: ''
|
||||
}
|
||||
};
|
||||
const data = reactive<PageData<ConfigForm, ConfigQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
@ -159,12 +159,12 @@ const data = reactive<PageData<ConfigForm, ConfigQuery>>({
|
||||
pageSize: 10,
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configType: '',
|
||||
configType: ''
|
||||
},
|
||||
rules: {
|
||||
configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
|
||||
configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
|
||||
configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
|
||||
configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
|
||||
configKey: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
|
||||
configValue: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
@ -177,40 +177,40 @@ const getList = async () => {
|
||||
configList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
}
|
||||
};
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
configFormRef.value?.resetFields();
|
||||
}
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
dateRange.value = ['', ''];
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
};
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: ConfigVO[]) => {
|
||||
ids.value = selection.map(item => item.configId);
|
||||
ids.value = selection.map((item) => item.configId);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
};
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加参数";
|
||||
}
|
||||
dialog.title = '添加参数';
|
||||
};
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: ConfigVO) => {
|
||||
reset();
|
||||
@ -218,40 +218,44 @@ const handleUpdate = async (row?: ConfigVO) => {
|
||||
const res = await getConfig(configId);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改参数";
|
||||
}
|
||||
dialog.title = '修改参数';
|
||||
};
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
configFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
form.value.configId ? await updateConfig(form.value) : await addConfig(form.value);
|
||||
proxy?.$modal.msgSuccess("操作成功");
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: ConfigVO) => {
|
||||
const configIds = row?.configId || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？');
|
||||
await delConfig(configIds);
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
}
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
};
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download("system/config/export", {
|
||||
...queryParams.value
|
||||
}, `config_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
proxy?.download(
|
||||
'system/config/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`config_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
/** 刷新缓存按钮操作 */
|
||||
const handleRefreshCache = async () => {
|
||||
await refreshCache();
|
||||
proxy?.$modal.msgSuccess("刷新缓存成功");
|
||||
}
|
||||
proxy?.$modal.msgSuccess('刷新缓存成功');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="mb-[10px]" v-show="showSearch">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
@ -25,21 +25,21 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['system:dept:add']">新增 </el-button>
|
||||
<el-button v-hasPermi="['system:dept:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增 </el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table
|
||||
ref="deptTableRef"
|
||||
v-loading="loading"
|
||||
:data="deptList"
|
||||
row-key="deptId"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
ref="deptTableRef"
|
||||
:default-expand-all="isExpandAll"
|
||||
>
|
||||
<el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
|
||||
@ -57,23 +57,23 @@
|
||||
<el-table-column fixed="right" align="center" label="操作">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']" />
|
||||
<el-button v-hasPermi="['system:dept:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="新增" placement="top">
|
||||
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']" />
|
||||
<el-button v-hasPermi="['system:dept:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']" />
|
||||
<el-button v-hasPermi="['system:dept:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" destroy-on-close append-to-bod width="600px">
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close append-to-body width="600px">
|
||||
<el-form ref="deptFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="24" v-if="form.parentId !== 0">
|
||||
<el-col v-if="form.parentId !== 0" :span="24">
|
||||
<el-form-item label="上级部门" prop="parentId">
|
||||
<el-tree-select
|
||||
v-model="form.parentId"
|
||||
@ -115,8 +115,7 @@
|
||||
<el-col :span="12">
|
||||
<el-form-item label="部门状态">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
|
||||
}}</el-radio>
|
||||
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -133,26 +132,25 @@
|
||||
</template>
|
||||
|
||||
<script setup name="Dept" lang="ts">
|
||||
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"
|
||||
import { DeptForm, DeptQuery, DeptVO } from "@/api/system/dept/types";
|
||||
import {UserVO} from "@/api/system/user/types";
|
||||
import {listUserByDeptId} from "@/api/system/user";
|
||||
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from '@/api/system/dept';
|
||||
import { DeptForm, DeptQuery, DeptVO } from '@/api/system/dept/types';
|
||||
import { UserVO } from '@/api/system/user/types';
|
||||
import { listUserByDeptId } from '@/api/system/user';
|
||||
|
||||
interface DeptOptionsType {
|
||||
deptId: number | string;
|
||||
deptName: string;
|
||||
children: DeptOptionsType[];
|
||||
|
||||
}
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance
|
||||
const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
|
||||
|
||||
const deptList = ref<DeptVO[]>([])
|
||||
const loading = ref(true)
|
||||
const showSearch = ref(true)
|
||||
const deptOptions = ref<DeptOptionsType[]>([])
|
||||
const isExpandAll = ref(true)
|
||||
const deptList = ref<DeptVO[]>([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const deptOptions = ref<DeptOptionsType[]>([]);
|
||||
const isExpandAll = ref(true);
|
||||
const deptUserList = ref<UserVO[]>([]);
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
@ -172,8 +170,8 @@ const initFormData: DeptForm = {
|
||||
leader: undefined,
|
||||
phone: undefined,
|
||||
email: undefined,
|
||||
status: "0"
|
||||
}
|
||||
status: '0'
|
||||
};
|
||||
const data = reactive<PageData<DeptForm, DeptQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
@ -183,30 +181,30 @@ const data = reactive<PageData<DeptForm, DeptQuery>>({
|
||||
status: undefined
|
||||
},
|
||||
rules: {
|
||||
parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
|
||||
deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
|
||||
orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
|
||||
email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
|
||||
phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
|
||||
},
|
||||
})
|
||||
parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
|
||||
deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
|
||||
orderNum: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
|
||||
email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
|
||||
phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs<PageData<DeptForm, DeptQuery>>(data)
|
||||
const { queryParams, form, rules } = toRefs<PageData<DeptForm, DeptQuery>>(data);
|
||||
|
||||
/** 查询菜单列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listDept(queryParams.value);
|
||||
const data = proxy?.handleTree<DeptVO>(res.data, "deptId")
|
||||
const data = proxy?.handleTree<DeptVO>(res.data, 'deptId');
|
||||
if (data) {
|
||||
deptList.value = data
|
||||
deptList.value = data;
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 查询当前部门的所有用户 */
|
||||
async function getDeptAllUser(deptId: any) {
|
||||
if (deptId !== null && deptId !== "" && deptId !== undefined) {
|
||||
if (deptId !== null && deptId !== '' && deptId !== undefined) {
|
||||
const res = await listUserByDeptId(deptId);
|
||||
deptUserList.value = res.data;
|
||||
}
|
||||
@ -214,52 +212,52 @@ async function getDeptAllUser(deptId: any) {
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset()
|
||||
dialog.visible = false
|
||||
}
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
deptFormRef.value?.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
getList();
|
||||
}
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery()
|
||||
}
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 展开/折叠操作 */
|
||||
const handleToggleExpandAll = () => {
|
||||
isExpandAll.value = !isExpandAll.value;
|
||||
toggleExpandAll(deptList.value, isExpandAll.value)
|
||||
}
|
||||
toggleExpandAll(deptList.value, isExpandAll.value);
|
||||
};
|
||||
/** 展开/折叠所有 */
|
||||
const toggleExpandAll = (data: DeptVO[], status: boolean) => {
|
||||
data.forEach((item) => {
|
||||
deptTableRef.value?.toggleRowExpansion(item, status)
|
||||
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
|
||||
})
|
||||
}
|
||||
deptTableRef.value?.toggleRowExpansion(item, status);
|
||||
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
|
||||
});
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = async (row?: DeptVO) => {
|
||||
reset();
|
||||
const res = await listDept();
|
||||
const data = proxy?.handleTree<DeptOptionsType>(res.data, "deptId");
|
||||
const data = proxy?.handleTree<DeptOptionsType>(res.data, 'deptId');
|
||||
if (data) {
|
||||
deptOptions.value = data
|
||||
deptOptions.value = data;
|
||||
if (row && row.deptId) {
|
||||
form.value.parentId = row?.deptId;
|
||||
}
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加部门";
|
||||
dialog.title = '添加部门';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row: DeptVO) => {
|
||||
@ -267,9 +265,9 @@ const handleUpdate = async (row: DeptVO) => {
|
||||
//查询当前部门所有用户
|
||||
getDeptAllUser(row.deptId);
|
||||
const res = await getDept(row.deptId);
|
||||
form.value = res.data
|
||||
form.value = res.data;
|
||||
const response = await listDeptExcludeChild(row.deptId);
|
||||
const data = proxy?.handleTree<DeptOptionsType>(response.data, "deptId")
|
||||
const data = proxy?.handleTree<DeptOptionsType>(response.data, 'deptId');
|
||||
if (data) {
|
||||
deptOptions.value = data;
|
||||
if (data.length === 0) {
|
||||
@ -282,26 +280,26 @@ const handleUpdate = async (row: DeptVO) => {
|
||||
}
|
||||
}
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改部门";
|
||||
}
|
||||
dialog.title = '修改部门';
|
||||
};
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
deptFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
form.value.deptId ? await updateDept(form.value) : await addDept(form.value);
|
||||
proxy?.$modal.msgSuccess("操作成功");
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row: DeptVO) => {
|
||||
await proxy?.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?');
|
||||
await delDept(row.deptId);
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
}
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="mb-[10px]" v-show="showSearch">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
||||
<el-form-item label="字典名称" prop="dictType">
|
||||
<el-select v-model="queryParams.dictType" style="width: 200px">
|
||||
<el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictType" />
|
||||
@ -24,33 +24,41 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增</el-button>
|
||||
<el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
<el-button v-hasPermi="['system:dict:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:dict:remove']">
|
||||
<el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
|
||||
删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:dict:export']">导出</el-button>
|
||||
<el-button v-hasPermi="['system:dict:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="字典编码" align="center" prop="dictCode" v-if="false" />
|
||||
<el-table-column v-if="false" label="字典编码" align="center" prop="dictCode" />
|
||||
<el-table-column label="字典标签" align="center" prop="dictLabel">
|
||||
<template #default="scope">
|
||||
<span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>
|
||||
<el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
|
||||
<span
|
||||
v-if="(scope.row.listClass === '' || scope.row.listClass === 'default') && (scope.row.cssClass === '' || scope.row.cssClass == null)"
|
||||
>{{ scope.row.dictLabel }}</span
|
||||
>
|
||||
<el-tag
|
||||
v-else
|
||||
:type="scope.row.listClass === 'primary' || scope.row.listClass === 'default' ? '' : scope.row.listClass"
|
||||
:class="scope.row.cssClass"
|
||||
>{{ scope.row.dictLabel }}</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字典键值" align="center" prop="dictValue" />
|
||||
@ -64,19 +72,19 @@
|
||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']"></el-button>
|
||||
<el-button v-hasPermi="['system:dict:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']"></el-button>
|
||||
<el-button v-hasPermi="['system:dict:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="字典类型">
|
||||
<el-input v-model="form.dictType" :disabled="true" />
|
||||
@ -118,13 +126,13 @@
|
||||
</template>
|
||||
|
||||
<script setup name="Data" lang="ts">
|
||||
import useDictStore from '@/store/modules/dict'
|
||||
import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";
|
||||
import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
|
||||
import useDictStore from '@/store/modules/dict';
|
||||
import { optionselect as getDictOptionselect, getType } from '@/api/system/dict/type';
|
||||
import { listData, getData, delData, addData, updateData } from '@/api/system/dict/data';
|
||||
import { DictTypeVO } from '@/api/system/dict/type/types';
|
||||
import { DictDataForm, DictDataQuery, DictDataVO } from "@/api/system/dict/data/types";
|
||||
import { DictDataForm, DictDataQuery, DictDataVO } from '@/api/system/dict/data/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const route = useRoute();
|
||||
|
||||
const dataList = ref<DictDataVO[]>([]);
|
||||
@ -134,26 +142,25 @@ const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const defaultDictType = ref("");
|
||||
const defaultDictType = ref('');
|
||||
const typeOptions = ref<DictTypeVO[]>([]);
|
||||
|
||||
const dataFormRef = ref<ElFormInstance>();
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
// 数据标签回显样式
|
||||
const listClassOptions = ref<Array<{ value: string, label: string }>>([
|
||||
{ value: "default", label: "默认" },
|
||||
{ value: "primary", label: "主要" },
|
||||
{ value: "success", label: "成功" },
|
||||
{ value: "info", label: "信息" },
|
||||
{ value: "warning", label: "警告" },
|
||||
{ value: "danger", label: "危险" }
|
||||
const listClassOptions = ref<Array<{ value: string; label: string }>>([
|
||||
{ value: 'default', label: '默认' },
|
||||
{ value: 'primary', label: '主要' },
|
||||
{ value: 'success', label: '成功' },
|
||||
{ value: 'info', label: '信息' },
|
||||
{ value: 'warning', label: '警告' },
|
||||
{ value: 'danger', label: '危险' }
|
||||
]);
|
||||
|
||||
const initFormData: DictDataForm = {
|
||||
@ -161,10 +168,10 @@ const initFormData: DictDataForm = {
|
||||
dictLabel: '',
|
||||
dictValue: '',
|
||||
cssClass: '',
|
||||
listClass: "default",
|
||||
listClass: 'default',
|
||||
dictSort: 0,
|
||||
remark: ''
|
||||
}
|
||||
};
|
||||
const data = reactive<PageData<DictDataForm, DictDataQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
@ -175,9 +182,9 @@ const data = reactive<PageData<DictDataForm, DictDataQuery>>({
|
||||
dictLabel: ''
|
||||
},
|
||||
rules: {
|
||||
dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
|
||||
dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
|
||||
dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
|
||||
dictLabel: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
|
||||
dictValue: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
|
||||
dictSort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
@ -189,13 +196,13 @@ const getTypes = async (dictId: string | number) => {
|
||||
queryParams.value.dictType = data.dictType;
|
||||
defaultDictType.value = data.dictType;
|
||||
getList();
|
||||
}
|
||||
};
|
||||
|
||||
/** 查询字典类型列表 */
|
||||
const getTypeList = async () => {
|
||||
const res = await getDictOptionselect()
|
||||
const res = await getDictOptionselect();
|
||||
typeOptions.value = res.data;
|
||||
}
|
||||
};
|
||||
/** 查询字典数据列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
@ -203,46 +210,46 @@ const getList = async () => {
|
||||
dataList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
dialog.visible = false;
|
||||
reset();
|
||||
}
|
||||
};
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
dataFormRef.value?.resetFields();
|
||||
}
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
};
|
||||
/** 返回按钮操作 */
|
||||
const handleClose = () => {
|
||||
const obj = { path: "/system/dict" };
|
||||
const obj = { path: '/system/dict' };
|
||||
proxy?.$tab.closeOpenPage(obj);
|
||||
}
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
queryParams.value.dictType = defaultDictType.value;
|
||||
handleQuery();
|
||||
}
|
||||
};
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
form.value.dictType = queryParams.value.dictType;
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加字典数据";
|
||||
}
|
||||
dialog.title = '添加字典数据';
|
||||
};
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: DictDataVO[]) => {
|
||||
ids.value = selection.map(item => item.dictCode);
|
||||
ids.value = selection.map((item) => item.dictCode);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
};
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: DictDataVO) => {
|
||||
reset();
|
||||
@ -250,40 +257,42 @@ const handleUpdate = async (row?: DictDataVO) => {
|
||||
const res = await getData(dictCode);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改字典数据";
|
||||
}
|
||||
dialog.title = '修改字典数据';
|
||||
};
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
dataFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
form.value.dictCode ? await updateData(form.value) : await addData(form.value);
|
||||
useDictStore().removeDict(queryParams.value.dictType);
|
||||
proxy?.$modal.msgSuccess("操作成功");
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: DictDataVO) => {
|
||||
const dictCodes = row?.dictCode || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？');
|
||||
await delData(dictCodes);
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
useDictStore().removeDict(queryParams.value.dictType);
|
||||
|
||||
}
|
||||
};
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download("system/dict/data/export", {
|
||||
...queryParams.value
|
||||
}, `dict_data_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
proxy?.download(
|
||||
'system/dict/data/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`dict_data_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getTypes(route.params && route.params.dictId as string);
|
||||
getTypes(route.params && (route.params.dictId as string));
|
||||
getTypeList();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="mb-[10px]" v-show="showSearch">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
||||
<el-form-item label="字典名称" prop="dictName">
|
||||
<el-input v-model="queryParams.dictName" placeholder="请输入字典名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
@ -33,29 +33,29 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增</el-button>
|
||||
<el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:dict:edit']">修改</el-button>
|
||||
<el-button v-hasPermi="['system:dict:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:dict:remove']">
|
||||
<el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
|
||||
删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:dict:export']">导出</el-button>
|
||||
<el-button v-hasPermi="['system:dict:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Refresh" @click="handleRefreshCache" v-hasPermi="['system:dict:remove']">刷新缓存</el-button>
|
||||
<el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Refresh" @click="handleRefreshCache">刷新缓存</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="字典编号" align="center" prop="dictId" v-if="false" />
|
||||
<el-table-column v-if="false" label="字典编号" align="center" prop="dictId" />
|
||||
<el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
|
||||
<template #default="scope">
|
||||
@ -73,19 +73,19 @@
|
||||
<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']"></el-button>
|
||||
<el-button v-hasPermi="['system:dict:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']"></el-button>
|
||||
<el-button v-hasPermi="['system:dict:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改参数配置对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
|
||||
<el-form ref="dictFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="字典名称" prop="dictName">
|
||||
<el-input v-model="form.dictName" placeholder="请输入字典名称" />
|
||||
@ -108,9 +108,9 @@
|
||||
</template>
|
||||
|
||||
<script setup name="Dict" lang="ts">
|
||||
import useDictStore from '@/store/modules/dict'
|
||||
import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
|
||||
import { DictTypeForm, DictTypeQuery, DictTypeVO } from "@/api/system/dict/type/types";
|
||||
import useDictStore from '@/store/modules/dict';
|
||||
import { listType, getType, delType, addType, updateType, refreshCache } from '@/api/system/dict/type';
|
||||
import { DictTypeForm, DictTypeQuery, DictTypeVO } from '@/api/system/dict/type/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
@ -126,7 +126,6 @@ const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
|
||||
const dictFormRef = ref<ElFormInstance>();
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
@ -137,7 +136,7 @@ const initFormData: DictTypeForm = {
|
||||
dictName: '',
|
||||
dictType: '',
|
||||
remark: ''
|
||||
}
|
||||
};
|
||||
const data = reactive<PageData<DictTypeForm, DictTypeQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
@ -147,9 +146,9 @@ const data = reactive<PageData<DictTypeForm, DictTypeQuery>>({
|
||||
dictType: ''
|
||||
},
|
||||
rules: {
|
||||
dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
|
||||
dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
|
||||
},
|
||||
dictName: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
|
||||
dictType: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
@ -157,45 +156,45 @@ const { queryParams, form, rules } = toRefs(data);
|
||||
/** 查询字典类型列表 */
|
||||
const getList = () => {
|
||||
loading.value = true;
|
||||
listType(proxy?.addDateRange(queryParams.value, dateRange.value)).then(res => {
|
||||
listType(proxy?.addDateRange(queryParams.value, dateRange.value)).then((res) => {
|
||||
typeList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
}
|
||||
};
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
dictFormRef.value?.resetFields();
|
||||
}
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
dateRange.value = ['', ''];
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
};
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加字典类型";
|
||||
}
|
||||
dialog.title = '添加字典类型';
|
||||
};
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: DictTypeVO[]) => {
|
||||
ids.value = selection.map(item => item.dictId);
|
||||
ids.value = selection.map((item) => item.dictId);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
};
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: DictTypeVO) => {
|
||||
reset();
|
||||
@ -203,41 +202,45 @@ const handleUpdate = async (row?: DictTypeVO) => {
|
||||
const res = await getType(dictId);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改字典类型";
|
||||
}
|
||||
dialog.title = '修改字典类型';
|
||||
};
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
dictFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
form.value.dictId ? await updateType(form.value) : await addType(form.value);
|
||||
proxy?.$modal.msgSuccess("操作成功");
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: DictTypeVO) => {
|
||||
const dictIds = row?.dictId || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？');
|
||||
await delType(dictIds);
|
||||
getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
}
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
};
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download("system/dict/type/export", {
|
||||
...queryParams.value
|
||||
}, `dict_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
proxy?.download(
|
||||
'system/dict/type/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`dict_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
/** 刷新缓存按钮操作 */
|
||||
const handleRefreshCache = async () => {
|
||||
await refreshCache();
|
||||
proxy?.$modal.msgSuccess("刷新成功");
|
||||
proxy?.$modal.msgSuccess('刷新成功');
|
||||
useDictStore().cleanDict();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="mb-[10px]" v-show="showSearch">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
@ -25,21 +25,21 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['system:menu:add']">新增 </el-button>
|
||||
<el-button v-hasPermi="['system:menu:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增 </el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table
|
||||
ref="menuTableRef"
|
||||
v-loading="loading"
|
||||
:data="menuList"
|
||||
row-key="menuId"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
ref="menuTableRef"
|
||||
:default-expand-all="isExpandAll"
|
||||
>
|
||||
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
|
||||
@ -64,20 +64,20 @@
|
||||
<el-table-column fixed="right" label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']" />
|
||||
<el-button v-hasPermi="['system:menu:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="新增" placement="top">
|
||||
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']" />
|
||||
<el-button v-hasPermi="['system:menu:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']" />
|
||||
<el-button v-hasPermi="['system:menu:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" destroy-on-close append-to-bod width="750px">
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close append-to-bod width="750px">
|
||||
<el-form ref="menuFormRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
@ -101,7 +101,7 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="form.menuType !== 'F'">
|
||||
<el-col v-if="form.menuType !== 'F'" :span="24">
|
||||
<el-form-item label="菜单图标" prop="icon">
|
||||
<!-- 图标选择器 -->
|
||||
<icon-select v-model="form.icon" />
|
||||
@ -117,7 +117,7 @@
|
||||
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.menuType !== 'F'">
|
||||
<el-col v-if="form.menuType !== 'F'" :span="12">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>
|
||||
@ -134,7 +134,7 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.menuType !== 'F'">
|
||||
<el-col v-if="form.menuType !== 'F'" :span="12">
|
||||
<el-form-item prop="path">
|
||||
<template #label>
|
||||
<span>
|
||||
@ -149,7 +149,7 @@
|
||||
<el-input v-model="form.path" placeholder="请输入路由地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.menuType === 'C'">
|
||||
<el-col v-if="form.menuType === 'C'" :span="12">
|
||||
<el-form-item prop="component">
|
||||
<template #label>
|
||||
<span>
|
||||
@ -164,12 +164,12 @@
|
||||
<el-input v-model="form.component" placeholder="请输入组件路径" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.menuType !== 'M'">
|
||||
<el-col v-if="form.menuType !== 'M'" :span="12">
|
||||
<el-form-item>
|
||||
<el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
|
||||
<template #label>
|
||||
<span>
|
||||
<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
|
||||
<el-tooltip content="控制器中定义的权限字符，如：@SaCheckPermission('system:user:list')" placement="top">
|
||||
<el-icon>
|
||||
<question-filled />
|
||||
</el-icon>
|
||||
@ -179,7 +179,7 @@
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.menuType === 'C'">
|
||||
<el-col v-if="form.menuType === 'C'" :span="12">
|
||||
<el-form-item>
|
||||
<el-input v-model="form.queryParam" placeholder="请输入路由参数" maxlength="255" />
|
||||
<template #label>
|
||||
@ -194,7 +194,7 @@
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.menuType === 'C'">
|
||||
<el-col v-if="form.menuType === 'C'" :span="12">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>
|
||||
@ -212,7 +212,7 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.menuType !== 'F'">
|
||||
<el-col v-if="form.menuType !== 'F'" :span="12">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>
|
||||
@ -271,14 +271,14 @@ interface MenuOptionsType {
|
||||
children: MenuOptionsType[] | undefined;
|
||||
}
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance
|
||||
const { sys_show_hide, sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_show_hide", "sys_normal_disable"));
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_show_hide, sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_show_hide', 'sys_normal_disable'));
|
||||
|
||||
const menuList = ref<MenuVO[]>([])
|
||||
const loading = ref(true)
|
||||
const showSearch = ref(true)
|
||||
const menuOptions = ref<MenuOptionsType[]>([])
|
||||
const isExpandAll = ref(false)
|
||||
const menuList = ref<MenuVO[]>([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const menuOptions = ref<MenuOptionsType[]>([]);
|
||||
const isExpandAll = ref(false);
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
@ -295,11 +295,11 @@ const initFormData = {
|
||||
icon: '',
|
||||
menuType: MenuTypeEnum.M,
|
||||
orderNum: 1,
|
||||
isFrame: "1",
|
||||
isCache: "0",
|
||||
visible: "0",
|
||||
status: "0"
|
||||
}
|
||||
isFrame: '1',
|
||||
isCache: '0',
|
||||
visible: '0',
|
||||
status: '0'
|
||||
};
|
||||
const data = reactive<PageData<MenuForm, MenuQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
@ -307,73 +307,73 @@ const data = reactive<PageData<MenuForm, MenuQuery>>({
|
||||
status: undefined
|
||||
},
|
||||
rules: {
|
||||
menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
|
||||
orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
|
||||
path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
|
||||
},
|
||||
})
|
||||
menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
|
||||
orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
|
||||
path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const menuTableRef = ref<ElTableInstance>();
|
||||
|
||||
const { queryParams, form, rules } = toRefs<PageData<MenuForm, MenuQuery>>(data)
|
||||
const { queryParams, form, rules } = toRefs<PageData<MenuForm, MenuQuery>>(data);
|
||||
/** 查询菜单列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
loading.value = true;
|
||||
const res = await listMenu(queryParams.value);
|
||||
const data = proxy?.handleTree<MenuVO>(res.data, "menuId")
|
||||
const data = proxy?.handleTree<MenuVO>(res.data, 'menuId');
|
||||
if (data) {
|
||||
menuList.value = data
|
||||
menuList.value = data;
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
loading.value = false;
|
||||
};
|
||||
/** 查询菜单下拉树结构 */
|
||||
const getTreeselect = async () => {
|
||||
menuOptions.value = []
|
||||
menuOptions.value = [];
|
||||
const response = await listMenu();
|
||||
const menu: MenuOptionsType = { menuId: 0, menuName: "主类目", children: [] }
|
||||
menu.children = proxy?.handleTree<MenuOptionsType>(response.data, "menuId")
|
||||
menuOptions.value.push(menu)
|
||||
}
|
||||
const menu: MenuOptionsType = { menuId: 0, menuName: '主类目', children: [] };
|
||||
menu.children = proxy?.handleTree<MenuOptionsType>(response.data, 'menuId');
|
||||
menuOptions.value.push(menu);
|
||||
};
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset()
|
||||
dialog.visible = false
|
||||
}
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
menuFormRef.value?.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
getList();
|
||||
}
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
};
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = (row?: MenuVO) => {
|
||||
reset();
|
||||
getTreeselect();
|
||||
row && row.menuId ? form.value.parentId = row.menuId : form.value.parentId = 0;
|
||||
row && row.menuId ? (form.value.parentId = row.menuId) : (form.value.parentId = 0);
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加菜单";
|
||||
}
|
||||
dialog.title = '添加菜单';
|
||||
};
|
||||
/** 展开/折叠操作 */
|
||||
const handleToggleExpandAll = () => {
|
||||
isExpandAll.value = !isExpandAll.value;
|
||||
toggleExpandAll(menuList.value, isExpandAll.value)
|
||||
}
|
||||
toggleExpandAll(menuList.value, isExpandAll.value);
|
||||
};
|
||||
/** 展开/折叠所有 */
|
||||
const toggleExpandAll = (data: MenuVO[], status: boolean) => {
|
||||
data.forEach((item: MenuVO) => {
|
||||
menuTableRef.value?.toggleRowExpansion(item, status)
|
||||
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
|
||||
})
|
||||
}
|
||||
menuTableRef.value?.toggleRowExpansion(item, status);
|
||||
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
|
||||
});
|
||||
};
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row: MenuVO) => {
|
||||
reset();
|
||||
@ -383,26 +383,26 @@ const handleUpdate = async (row: MenuVO) => {
|
||||
form.value = data;
|
||||
}
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改菜单";
|
||||
}
|
||||
dialog.title = '修改菜单';
|
||||
};
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
menuFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
form.value.menuId ? await updateMenu(form.value) : await addMenu(form.value);
|
||||
proxy?.$modal.msgSuccess("操作成功");
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row: MenuVO) => {
|
||||
await proxy?.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?');
|
||||
await delMenu(row.menuId);
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
}
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="mb-[10px]" v-show="showSearch">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
||||
<el-form-item label="公告标题" prop="noticeTitle">
|
||||
<el-input v-model="queryParams.noticeTitle" placeholder="请输入公告标题" clearable style="width: 200px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
@ -28,25 +28,25 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:notice:add']">新增</el-button>
|
||||
<el-button v-hasPermi="['system:notice:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:notice:edit']"
|
||||
<el-button v-hasPermi="['system:notice:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
|
||||
>修改</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:notice:remove']">
|
||||
<el-button v-hasPermi="['system:notice:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
|
||||
删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="序号" align="center" prop="noticeId" width="100" v-if="false" />
|
||||
<el-table-column v-if="false" label="序号" align="center" prop="noticeId" width="100" />
|
||||
<el-table-column label="公告标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="公告类型" align="center" prop="noticeType" width="100">
|
||||
<template #default="scope">
|
||||
@ -67,19 +67,19 @@
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:notice:edit']"></el-button>
|
||||
<el-button v-hasPermi="['system:notice:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']"></el-button>
|
||||
<el-button v-hasPermi="['system:notice:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改公告对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="780px" append-to-body>
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="780px" append-to-body>
|
||||
<el-form ref="noticeFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
@ -97,8 +97,7 @@
|
||||
<el-col :span="24">
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="dict in sys_notice_status" :key="dict.value" :label="dict.value">{{ dict.label
|
||||
}}</el-radio>
|
||||
<el-radio v-for="dict in sys_notice_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -120,11 +119,11 @@
|
||||
</template>
|
||||
|
||||
<script setup name="Notice" lang="ts">
|
||||
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
|
||||
import { NoticeForm, NoticeQuery, NoticeVO } from "@/api/system/notice/types";
|
||||
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/system/notice';
|
||||
import { NoticeForm, NoticeQuery, NoticeVO } from '@/api/system/notice/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_notice_status, sys_notice_type } = toRefs<any>(proxy?.useDict("sys_notice_status", "sys_notice_type"));
|
||||
const { sys_notice_status, sys_notice_type } = toRefs<any>(proxy?.useDict('sys_notice_status', 'sys_notice_type'));
|
||||
|
||||
const noticeList = ref<NoticeVO[]>([]);
|
||||
const loading = ref(true);
|
||||
@ -137,7 +136,6 @@ const total = ref(0);
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const noticeFormRef = ref<ElFormInstance>();
|
||||
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
@ -148,10 +146,10 @@ const initFormData: NoticeForm = {
|
||||
noticeTitle: '',
|
||||
noticeType: '',
|
||||
noticeContent: '',
|
||||
status: "0",
|
||||
status: '0',
|
||||
remark: '',
|
||||
createByName: ''
|
||||
}
|
||||
};
|
||||
const data = reactive<PageData<NoticeForm, NoticeQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
@ -163,9 +161,9 @@ const data = reactive<PageData<NoticeForm, NoticeQuery>>({
|
||||
noticeType: ''
|
||||
},
|
||||
rules: {
|
||||
noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
|
||||
noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]
|
||||
},
|
||||
noticeTitle: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
|
||||
noticeType: [{ required: true, message: '公告类型不能为空', trigger: 'change' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
@ -177,39 +175,39 @@ const getList = async () => {
|
||||
noticeList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
}
|
||||
};
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
noticeFormRef.value?.resetFields();
|
||||
}
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
};
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: NoticeVO[]) => {
|
||||
ids.value = selection.map(item => item.noticeId);
|
||||
ids.value = selection.map((item) => item.noticeId);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
};
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加公告";
|
||||
}
|
||||
dialog.title = '添加公告';
|
||||
};
|
||||
/**修改按钮操作 */
|
||||
const handleUpdate = async (row?: NoticeVO) => {
|
||||
reset();
|
||||
@ -217,29 +215,29 @@ const handleUpdate = async (row?: NoticeVO) => {
|
||||
const { data } = await getNotice(noticeId);
|
||||
Object.assign(form.value, data);
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改公告";
|
||||
}
|
||||
dialog.title = '修改公告';
|
||||
};
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
noticeFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
form.value.noticeId ? await updateNotice(form.value) : await addNotice(form.value);
|
||||
proxy?.$modal.msgSuccess("修改成功");
|
||||
proxy?.$modal.msgSuccess('修改成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: NoticeVO) => {
|
||||
const noticeIds = row?.noticeId || ids.value
|
||||
const noticeIds = row?.noticeId || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？');
|
||||
await delNotice(noticeIds);
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
}
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="mb-[10px]" v-show="showSearch">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
||||
<el-form-item label="配置key" prop="configKey">
|
||||
<el-input v-model="queryParams.configKey" placeholder="配置key" clearable style="width: 200px" @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
@ -29,37 +29,39 @@
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:oss:add']">新增</el-button>
|
||||
<el-button v-hasPermi="['system:ossConfig:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:oss:edit']">修改</el-button>
|
||||
<el-button v-hasPermi="['system:ossConfig:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
|
||||
>修改</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:oss:remove']">
|
||||
<el-button v-hasPermi="['system:ossConfig:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
|
||||
删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="ossConfigList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="主建" align="center" prop="ossConfigId" v-if="columns[0].visible" />
|
||||
<el-table-column label="配置key" align="center" prop="configKey" v-if="columns[1].visible" />
|
||||
<el-table-column label="访问站点" align="center" prop="endpoint" v-if="columns[2].visible" width="200" />
|
||||
<el-table-column label="自定义域名" align="center" prop="domain" v-if="columns[3].visible" width="200" />
|
||||
<el-table-column label="桶名称" align="center" prop="bucketName" v-if="columns[4].visible" />
|
||||
<el-table-column label="前缀" align="center" prop="prefix" v-if="columns[5].visible" />
|
||||
<el-table-column label="域" align="center" prop="region" v-if="columns[6].visible" />
|
||||
<el-table-column label="桶权限类型" align="center" prop="accessPolicy" v-if="columns[7].visible">
|
||||
<el-table-column v-if="columns[0].visible" label="主建" align="center" prop="ossConfigId" />
|
||||
<el-table-column v-if="columns[1].visible" label="配置key" align="center" prop="configKey" />
|
||||
<el-table-column v-if="columns[2].visible" label="访问站点" align="center" prop="endpoint" width="200" />
|
||||
<el-table-column v-if="columns[3].visible" label="自定义域名" align="center" prop="domain" width="200" />
|
||||
<el-table-column v-if="columns[4].visible" label="桶名称" align="center" prop="bucketName" />
|
||||
<el-table-column v-if="columns[5].visible" label="前缀" align="center" prop="prefix" />
|
||||
<el-table-column v-if="columns[6].visible" label="域" align="center" prop="region" />
|
||||
<el-table-column v-if="columns[7].visible" label="桶权限类型" align="center" prop="accessPolicy">
|
||||
<template #default="scope">
|
||||
<el-tag type="warning" v-if="scope.row.accessPolicy === '0'">private</el-tag>
|
||||
<el-tag type="success" v-if="scope.row.accessPolicy === '1'">public</el-tag>
|
||||
<el-tag type="info" v-if="scope.row.accessPolicy === '2'">custom</el-tag>
|
||||
<el-tag v-if="scope.row.accessPolicy === '0'" type="warning">private</el-tag>
|
||||
<el-tag v-if="scope.row.accessPolicy === '1'" type="success">public</el-tag>
|
||||
<el-tag v-if="scope.row.accessPolicy === '2'" type="info">custom</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否默认" align="center" prop="status" v-if="columns[8].visible">
|
||||
<el-table-column v-if="columns[8].visible" label="是否默认" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
|
||||
</template>
|
||||
@ -67,19 +69,19 @@
|
||||
<el-table-column label="操作" fixed="right" align="center" width="150" class-name="small-padding">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:oss:edit']"></el-button>
|
||||
<el-button v-hasPermi="['system:ossConfig:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:oss:remove']"></el-button>
|
||||
<el-button v-hasPermi="['system:ossConfig:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改对象存储配置对话框 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="800px" append-to-body>
|
||||
<el-form ref="ossConfigFormRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="配置key" prop="configKey">
|
||||
<el-input v-model="form.configKey" placeholder="请输入配置key" />
|
||||
@ -132,19 +134,11 @@
|
||||
</template>
|
||||
|
||||
<script setup name="OssConfig" lang="ts">
|
||||
import {
|
||||
listOssConfig,
|
||||
getOssConfig,
|
||||
delOssConfig,
|
||||
addOssConfig,
|
||||
updateOssConfig,
|
||||
changeOssConfigStatus
|
||||
} from "@/api/system/ossConfig";
|
||||
import { OssConfigForm, OssConfigQuery, OssConfigVO } from "@/api/system/ossConfig/types";
|
||||
import { listOssConfig, getOssConfig, delOssConfig, addOssConfig, updateOssConfig, changeOssConfigStatus } from '@/api/system/ossConfig';
|
||||
import { OssConfigForm, OssConfigQuery, OssConfigVO } from '@/api/system/ossConfig/types';
|
||||
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance
|
||||
const { sys_yes_no } = toRefs<any>(proxy?.useDict("sys_yes_no"));
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_yes_no } = toRefs<any>(proxy?.useDict('sys_yes_no'));
|
||||
|
||||
const ossConfigList = ref<OssConfigVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
@ -176,7 +170,6 @@ const columns = ref<FieldOption[]>([
|
||||
{ key: 8, label: `状态`, visible: true }
|
||||
]);
|
||||
|
||||
|
||||
const initFormData: OssConfigForm = {
|
||||
ossConfigId: undefined,
|
||||
configKey: '',
|
||||
@ -186,12 +179,12 @@ const initFormData: OssConfigForm = {
|
||||
prefix: '',
|
||||
endpoint: '',
|
||||
domain: '',
|
||||
isHttps: "N",
|
||||
accessPolicy: "1",
|
||||
isHttps: 'N',
|
||||
accessPolicy: '1',
|
||||
region: '',
|
||||
status: "1",
|
||||
remark: '',
|
||||
}
|
||||
status: '1',
|
||||
remark: ''
|
||||
};
|
||||
const data = reactive<PageData<OssConfigForm, OssConfigQuery>>({
|
||||
form: { ...initFormData },
|
||||
// 查询参数
|
||||
@ -200,47 +193,47 @@ const data = reactive<PageData<OssConfigForm, OssConfigQuery>>({
|
||||
pageSize: 10,
|
||||
configKey: '',
|
||||
bucketName: '',
|
||||
status: '',
|
||||
status: ''
|
||||
},
|
||||
rules: {
|
||||
configKey: [{ required: true, message: "configKey不能为空", trigger: "blur" },],
|
||||
configKey: [{ required: true, message: 'configKey不能为空', trigger: 'blur' }],
|
||||
accessKey: [
|
||||
{ required: true, message: "accessKey不能为空", trigger: "blur" },
|
||||
{ required: true, message: 'accessKey不能为空', trigger: 'blur' },
|
||||
{
|
||||
min: 2,
|
||||
max: 200,
|
||||
message: "accessKey长度必须介于 2 和 100 之间",
|
||||
trigger: "blur",
|
||||
},
|
||||
message: 'accessKey长度必须介于 2 和 100 之间',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
secretKey: [
|
||||
{ required: true, message: "secretKey不能为空", trigger: "blur" },
|
||||
{ required: true, message: 'secretKey不能为空', trigger: 'blur' },
|
||||
{
|
||||
min: 2,
|
||||
max: 100,
|
||||
message: "secretKey长度必须介于 2 和 100 之间",
|
||||
trigger: "blur",
|
||||
},
|
||||
message: 'secretKey长度必须介于 2 和 100 之间',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
bucketName: [
|
||||
{ required: true, message: "bucketName不能为空", trigger: "blur" },
|
||||
{ required: true, message: 'bucketName不能为空', trigger: 'blur' },
|
||||
{
|
||||
min: 2,
|
||||
max: 100,
|
||||
message: "bucketName长度必须介于 2 和 100 之间",
|
||||
trigger: "blur",
|
||||
},
|
||||
message: 'bucketName长度必须介于 2 和 100 之间',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
endpoint: [
|
||||
{ required: true, message: "endpoint不能为空", trigger: "blur" },
|
||||
{ required: true, message: 'endpoint不能为空', trigger: 'blur' },
|
||||
{
|
||||
min: 2,
|
||||
max: 100,
|
||||
message: "endpoint名称长度必须介于 2 和 100 之间",
|
||||
trigger: "blur",
|
||||
},
|
||||
message: 'endpoint名称长度必须介于 2 和 100 之间',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
accessPolicy: [{ required: true, message: "accessPolicy不能为空", trigger: "blur" }]
|
||||
accessPolicy: [{ required: true, message: 'accessPolicy不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
@ -253,39 +246,39 @@ const getList = async () => {
|
||||
ossConfigList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
dialog.visible = false;
|
||||
reset();
|
||||
}
|
||||
};
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
ossConfigFormRef.value?.resetFields();
|
||||
}
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
};
|
||||
/** 选择条数 */
|
||||
const handleSelectionChange = (selection: OssConfigVO[]) => {
|
||||
ids.value = selection.map(item => item.ossConfigId);
|
||||
ids.value = selection.map((item) => item.ossConfigId);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
};
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = "添加对象存储配置";
|
||||
}
|
||||
dialog.title = '添加对象存储配置';
|
||||
};
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: OssConfigVO) => {
|
||||
reset();
|
||||
@ -293,49 +286,49 @@ const handleUpdate = async (row?: OssConfigVO) => {
|
||||
const res = await getOssConfig(ossConfigId);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = "修改对象存储配置";
|
||||
}
|
||||
dialog.title = '修改对象存储配置';
|
||||
};
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
ossConfigFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.ossConfigId) {
|
||||
await updateOssConfig(form.value).finally(() => buttonLoading.value = false);
|
||||
await updateOssConfig(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addOssConfig(form.value).finally(() => buttonLoading.value = false);
|
||||
await addOssConfig(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess("新增成功");
|
||||
proxy?.$modal.msgSuccess('新增成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
/** 状态修改 */
|
||||
const handleStatusChange = async (row: OssConfigVO) => {
|
||||
let text = row.status === "0" ? "启用" : "停用";
|
||||
let text = row.status === '0' ? '启用' : '停用';
|
||||
try {
|
||||
await proxy?.$modal.confirm('确认要"' + text + '""' + row.configKey + '"配置吗?');
|
||||
await changeOssConfigStatus(row.ossConfigId, row.status, row.configKey);
|
||||
await getList()
|
||||
proxy?.$modal.msgSuccess(text + "成功");
|
||||
} catch { return } finally {
|
||||
row.status = row.status === "0" ? "1" : "0";
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess(text + '成功');
|
||||
} catch {
|
||||
return;
|
||||
} finally {
|
||||
row.status = row.status === '0' ? '1' : '0';
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: OssConfigVO) => {
|
||||
const ossConfigIds = row?.ossConfigId || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除OSS配置编号为"' + ossConfigIds + '"的数据项?');
|
||||
loading.value = true;
|
||||
await delOssConfig(ossConfigIds).finally(() => loading.value = false);
|
||||
await delOssConfig(ossConfigIds).finally(() => (loading.value = false));
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
|
||||
}
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user