gin/collab-ledger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 移除java项目，改用hono + vercel function实现后端 (#1)

Browse Source 
Co-authored-by: gin <gin-18@qq.com>
Co-authored-by: gin <dengxinmin@owlscm.com>
Reviewed-on: #1
This commit was merged in pull request #1.
This commit is contained in:
GIN_18
2026-06-17 20:58:00 +08:00
parent 2757a4fb49
commit 1c3f8b39a3
605 changed files with 13301 additions and 31274 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/web/.dockerignore
-21
View File
@@ -1,21 +0,0 @@
node_modules
.DS_Store
dist
dist-ssr
*.local
.eslintcache
report.html
yarn.lock
npm-debug.log*
.pnpm-error.log*
.pnpm-debug.log
tests/**/coverage/
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
tsconfig.tsbuildinfo
frontend/web/.env
-2
View File
@@ -1,4 +1,2 @@
# Web default environment
VITE_PORT = 8848
VITE_HIDE_HOME = false
frontend/web/.env.production
+1 -2
View File
@@ -3,5 +3,4 @@ VITE_PUBLIC_PATH = ./
VITE_ROUTER_HISTORY = "hash"
VITE_CDN = false
VITE_COMPRESSION = "none"
VITE_APP_BASE_API = '/prod-api'
VITE_APP_BASE_API =
frontend/web/.env.staging
+1 -2
View File
@@ -3,5 +3,4 @@ VITE_PUBLIC_PATH = ./
VITE_ROUTER_HISTORY = "hash"
VITE_CDN = true
VITE_COMPRESSION = "none"
VITE_APP_BASE_API = '/stage-api'
VITE_APP_BASE_API =
frontend/web/.eslintrc.js
+1 -1
View File
@@ -33,7 +33,7 @@ module.exports = {
withDefaults: "readonly"
},
extends: [
"../eslint.base.cjs",
"../../eslint.base.cjs",
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
frontend/web/.gitignore
+1
View File
@@ -0,0 +1 @@
.vercel
frontend/web/Dockerfile
-20
View File
@@ -1,20 +0,0 @@
FROM node:16-alpine as build-stage
WORKDIR /app
RUN corepack enable
RUN corepack prepare pnpm@7.32.1 --activate
RUN npm config set registry https://registry.npmmirror.com
COPY .npmrc package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm build
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
frontend/web/README.md
+44 -123
View File
@@ -1,145 +1,66 @@
<p align="center">
<img src="https://img.shields.io/badge/Release-V1.8.0-green.svg" alt="Downloads">
<img src="https://img.shields.io/badge/JDK-1.8+-green.svg" alt="Build Status">
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Build Status">
<img src="https://img.shields.io/badge/Spring%20Boot-2.7.1-blue.svg" alt="Downloads">
<a target="_blank" href="https://bladex.vip">
<img src="https://img.shields.io/badge/Author-valarchie-ff69b4.svg" alt="Downloads">
</a>
<a target="_blank" href="https://bladex.vip">
<img src="https://img.shields.io/badge/Copyright%20-@Agileboot-%23ff3f59.svg" alt="Downloads">
</a>
</p>
<p align="center">
# CollabLedger Web
<img alt="logo" height="200" src="https://oscimg.oschina.net/oscnet/up-eda2a402cc061f1f5f40d9ac4c084f4c98c.png">
</p>
<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">AgileBoot v2.0.0</h1>
Vite + Vue 3 Web 管理端，作为根目录 pnpm workspace 的子包维护。
<h4 align="center">基于SpringBoot+Vue3前后端分离的Java快速开发框架</h4>
<p align="center">
</p>
## 本地开发
## ⚡ 平台简介 ⚡
从仓库根目录执行：
- 本仓库是 Agilboot 快速开发脚手架的配套前端项目。前端是基于优秀的开源项目[Pure-Admin](https://github.com/pure-admin/vue-pure-admin)开发而成。在此感谢 Pure-Admin 作者。
- 本仓库前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
- 配套后端代码仓库地址[AgileBoot-Back-End](https://github.com/valarchie/AgileBoot-Back-End) 版本。
- 规范请参照该文档 [前端规范](https://gitee.com/MinJieLiu/web-standard#/MinJieLiu/web-standard)
### 前端配套资料
#### 配套视频
- [点我查看教程](https://www.bilibili.com/video/BV1kg411v7QT)
- [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
#### 配套保姆级文档
- [查看文档](https://yiming_chang.gitee.io/pure-admin-doc)
#### Pure-Admin 框架预览
- [查看预览](https://pure-admin-thin.netlify.app/#/login)
#### Pure-Admin 维护者
- [xiaoxian521](https://github.com/xiaoxian521)
## ✨ 使用 ✨
### 开发环境
Node.js 版本要求：16.0+
pnpm 版本要求：6.0+
优先选择 node=16, pnpm=7.30.5的环境.
如果您还没安装 pnpm，请执行下面命令进行安装（mac 用户遇到安装报错请在命令前加上 sudo） 如果是 windows 用户，使用 power shell 管理员权限执行
```
npm install -g pnpm
```
安装依赖
```
```bash
pnpm install
pnpm dev:web
```
启动平台
`frontend/web/.env.development` 默认使用：
```
pnpm run dev
```env
VITE_PORT=80
VITE_APP_BASE_API=/dev-api
```
不管是什么源，我们都可以不用管，直接执行下面命令即可
开发环境下，`vite.config.ts` 会把 `/dev-api` 代理到本地后端 `http://localhost:3000`。
npm config set registry https://registry.npmmirror.com
## Vercel 部署
上面的命令是将本地的源换成国内源 npmmirror
(opens new window)，经过几轮测试，发现它的下载速度快且同步率高，同步频率 10 分钟一次，如果您之前的源是这个 http://registry.npm.taobao.org ，那您必须换成 npmmirror 啦，因为原淘宝 npm 域名即将停止解析
Web 管理端作为独立的 Vercel Project 部署。先全局安装并登录 Vercel CLI：
## 🙊 系统内置功能 🙊
🙂 大部分功能，均有通过 **单元测试** **集成测试** 保证质量。
| | 功能 | 描述 |
| --- | ---------- | ------------------------------------------------------------- |
| | 用户管理 | 用户是系统操作者，该功能主要完成系统用户配置 |
| ⭐ | 部门管理 | 配置系统组织机构（公司、部门、小组），树结构展现支持数据权限 |
| ⭐ | 岗位管理 | 配置系统用户所属担任职务 |
| | 菜单管理 | 配置系统菜单、操作权限、按钮权限标识等，本地缓存提供性能 |
| ⭐ | 角色管理 | 角色菜单权限分配、设置角色按机构进行数据范围权限划分 |
| | 参数管理 | 对系统动态配置常用参数 |
| | 通知公告 | 系统通知公告信息发布维护 |
| 🚀 | 操作日志 | 系统正常操作日志记录和查询；系统异常信息日志记录和查询 |
| | 登录日志 | 系统登录日志记录查询包含登录异常 |
| | 在线用户 | 当前系统中活跃用户状态监控 |
| | 系统接口 | 根据业务代码自动生成相关的 api 接口文档 |
| | 服务监控 | 监视当前系统 CPU、内存、磁盘、堆栈等相关信息 |
| | 缓存监控 | 对系统的缓存信息查询，命令统计等 |
| | 连接池监视 | 监视当前系统数据库连接池状态，可进行分析 SQL 找出系统性能瓶颈 |
## 💥 在线体验 💥
演示地址：
- <www.agileboot.vip>
- <www.agileboot.cc>
> 账号密码：admin/admin123
[项目文档](https://juejin.cn/column/7159946528827080734)
## 🎬 AgileBoot 全栈交流群 🎬
QQ 群： [![加入QQ群](https://img.shields.io/badge/1398880-blue.svg)](https://qm.qq.com/cgi-bin/qm/qr?k=TR5guoXS0HssErVWefmdFRirJvfpEvp1&jump_from=webapi&authKey=VkWMmVhp/pNdWuRD8sqgM+Sv2+Vy2qCJQSeLmeXlLtfER2RJBi6zL56PdcRlCmTs) 点击按钮入群。
如果觉得该项目对您有帮助，可以小额捐赠支持本项目演示网站服务器等费用~
<img alt="logo" height="200" src="https://oscimg.oschina.net/oscnet/up-28b63fdd7b3ce003bd30c25883f2276212b.png">
### 用法
#### 安装依赖
```
pnpm install
```bash
pnpm add -g vercel
vercel login
```
#### 安装一个包
进入 Web 目录并关联项目：
```
pnpm add 包名
```bash
cd frontend/web
vercel link
```
#### 卸载一个包
推荐配置：
```
pnpm remove 包名
```text
Framework Preset: Vite
Install Command: pnpm install
Build Command: pnpm build
Output Directory: dist
```
### 许可证
在 Vercel 项目环境变量中配置后端地址：
原则上不收取任何费用及版权，可商用，不过如需二次开源（比如用此平台二次开发并开源，要求前端代码必须开源免费）请联系作者获取许可！（免费，走个记录而已）
```bash
vercel env add VITE_APP_BASE_API production
```
变量值示例：
```env
VITE_APP_BASE_API=https://your-backend.example.com
```
部署：
```bash
vercel deploy --prod
```
`vercel.json` 已配置 SPA 路由回退，刷新管理端子路由时会返回 `index.html`。
frontend/web/build/index.ts
-1
View File
@@ -6,7 +6,6 @@ const wrapperEnv = (envConfigs: Recordable): ViteEnv => {
VITE_PUBLIC_PATH: "",
VITE_ROUTER_HISTORY: "",
VITE_CDN: false,
VITE_HIDE_HOME: "false",
VITE_COMPRESSION: "none",
VITE_APP_BASE_API: ""
};
frontend/web/build/info.ts
+2 -2
View File
@@ -21,8 +21,8 @@ export function viteBuildInfo(): Plugin {
bold(
green(
`👏欢迎使用${blue(
"[Agileboot全栈项目]"
)}，如果您感觉不错，记得点击后面链接给个star哦💖 https://github.com/valarchie/agileboot-back-end`
"[CollabLedger全栈项目]"
)}，如果您感觉不错，记得点击后面链接给个star哦💖 https://github.com/valarchie/collab_ledger-back-end`
)
)
);
frontend/web/index.html
+1 -1
View File
@@ -8,7 +8,7 @@
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<title>Agileboot管理系统</title>
<title>CollabLedger管理系统</title>
<link rel="icon" href="/favicon.ico" />
<script>
window.process = {};
frontend/web/package.json
+8 -6
View File
@@ -1,9 +1,10 @@
{
"name": "@simple-template/web",
"name": "@collab_ledger/web",
"version": "1.0.0",
"private": true,
"packageManager": "pnpm@10.14.0",
"scripts": {
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
"dev": "vite",
"serve": "pnpm dev",
"build": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 vite build",
"build:staging": "rimraf dist && vite build --mode staging",
@@ -13,9 +14,9 @@
"typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
"svgo": "svgo -f src/assets/svg -o src/assets/svg",
"clean:cache": "rimraf node_modules && pnpm install",
"lint:eslint": "eslint --ignore-path ../.eslintignore --cache --cache-location node_modules/.cache/eslint/.eslintcache --max-warnings 0 \"{src,build}/**/*.{vue,js,ts,tsx}\"",
"lint:prettier": "prettier --check \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\"",
"lint:stylelint": "pnpm --dir .. exec stylelint \"web/**/*.{html,vue,css,scss}\" --config ./stylelint.config.cjs --ignore-path ./.stylelintignore --cache --cache-location web/node_modules/.cache/stylelint/",
"lint:eslint": "eslint --ignore-path ../../.eslintignore --cache --cache-location node_modules/.cache/eslint/.eslintcache --max-warnings 0 \"{src,build}/**/*.{vue,js,ts,tsx}\"",
"lint:prettier": "prettier --check --ignore-path ../../.prettierignore \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\"",
"lint:stylelint": "pnpm --dir ../.. exec stylelint \"frontend/web/**/*.{html,vue,css,scss}\" --config stylelint.config.cjs --ignore-path .stylelintignore --cache --cache-location node_modules/.cache/stylelint/",
"lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint",
"prepare": "echo \"Git hooks are managed by ../../.githooks\"",
"preinstall": "npx only-allow pnpm"
@@ -50,6 +51,7 @@
"qs": "^6.11.2",
"responsive-storage": "^2.2.0",
"sortablejs": "^1.15.0",
"tippy.js": "^6.3.7",
"typeit": "^8.7.1",
"vue": "^3.3.4",
"vue-router": "^4.2.2",
@@ -95,7 +97,7 @@
"vue-eslint-parser": "^9.3.1",
"vue-tsc": "^1.8.1"
},
"repository": "git@github.com:valarchie/agileboot-front-end-pure.git",
"repository": "git@github.com:valarchie/collab_ledger-front-end-pure.git",
"author": "valarchie",
"license": "MIT"
}
frontend/web/public/serverConfig.json
+1 -6
View File
@@ -1,6 +1,6 @@
{
"Version": "4.4.0",
"Title": "Agileboot",
"Title": "CollabLedger",
"FixedHeader": true,
"HiddenSideBar": false,
"MultiTagsCache": false,
@@ -8,13 +8,8 @@
"Layout": "vertical",
"Theme": "default",
"DarkMode": false,
"Grey": false,
"Weak": false,
"HideTabs": false,
"SidebarStatus": true,
"EpThemeColor": "#409EFF",
"ShowLogo": true,
"ShowModel": "smart",
"MenuArrowIconNoTransition": true,
"CachingAsyncRoutes": false,
"TooltipEffect": "light",
frontend/web/src/api/collaboration/record.ts
+12 -2
View File
@@ -16,6 +16,7 @@ export interface CollaborationRecordListCommand extends BasePageQuery {
brand?: string;
goods?: string;
cooperationPlatform?: string;
creatorId?: number;
purchaseBeginTime?: string;
purchaseEndTime?: string;
}
@@ -89,6 +90,8 @@ export interface CollaborationRecordPageResponse {
completeDate?: string;
requirements?: string;
remark?: string;
creatorId?: number;
creatorName?: string;
tasksNum: number;
completedTasksNum: number;
purchaseSettlementStatus: SettlementStatusDTO;
@@ -182,12 +185,19 @@ export const getCollaborationOptionsApi = () => {
);
};
export const getCollaborationMonthlyStatisticsApi = (year: number) => {
export interface CollaborationMonthlyStatisticsCommand {
year: number;
creatorId?: number;
}
export const getCollaborationMonthlyStatisticsApi = (
params: CollaborationMonthlyStatisticsCommand
) => {
return http.request<ResponseData<CollaborationMonthlyStatisticsResponse[]>>(
"get",
"/collaboration/record/monthly-statistics",
{
params: { year }
params
}
);
};
frontend/web/src/api/common/login.ts
+26 -4
View File
@@ -11,6 +11,8 @@ export type CaptchaDTO = {
export type ConfigDTO = {
/** 验证码开关 */
isCaptchaOn: boolean;
/** 注册开关 */
isRegisterUserOn?: boolean;
/** 系统字典配置（下拉选项之类的） */
dictionary: Record<string, Array<DictionaryData>>;
};
@@ -26,6 +28,25 @@ export type LoginByPasswordDTO = {
captchaCodeKey: string;
};
export type RegisterUserCommand = {
/** 用户名 */
username: string;
/** 昵称 */
nickname?: string;
/** 密码 */
password: string;
/** 确认密码 */
confirmPassword: string;
/** 邮箱 */
email?: string;
/** 手机号 */
phoneNumber?: string;
/** 验证码 */
captchaCode: string;
/** 验证码对应的缓存key */
captchaCodeKey: string;
};
/**
* 后端token实现
*/
@@ -50,15 +71,11 @@ export interface CurrentUserInfoDTO {
createTime?: Date;
creatorId?: number;
creatorName?: string;
deptId?: number;
deptName?: string;
email?: string;
loginDate?: Date;
loginIp?: string;
nickName?: string;
phoneNumber?: string;
postId?: number;
postName?: string;
remark?: string;
roleId?: number;
roleName?: string;
@@ -93,6 +110,11 @@ export const loginByPassword = (data: LoginByPasswordDTO) => {
return http.request<ResponseData<TokenDTO>>("post", "/login", { data });
};
/** 注册接口 */
export const registerUser = (data: RegisterUserCommand) => {
return http.request<ResponseData<TokenDTO>>("post", "/register", { data });
};
/** 获取当前登录用户接口 */
export const getLoginUserInfo = () => {
return http.request<ResponseData<TokenDTO>>("get", "/getLoginUserInfo");
frontend/web/src/api/system/dept.ts
-83
View File
@@ -1,83 +0,0 @@
import { http } from "@/utils/http";
export interface DeptQuery extends BaseQuery {
// TODO 目前不需要这个参数
deptId?: number;
parentId?: number;
}
/**
* DeptDTO
*/
export interface DeptDTO {
createTime?: Date;
id?: number;
deptName?: string;
email?: string;
leaderName?: string;
orderNum?: number;
parentId?: number;
phone?: string;
status?: number;
statusStr?: string;
}
/**
* AddDeptCommand
*/
export interface DeptRequest {
deptName: string;
email?: string;
leaderName?: string;
orderNum: number;
parentId: number;
phone?: string;
status: number;
}
export interface DeptTreeDTO {
id: number;
parentId: number;
label: string;
children: [DeptTreeDTO];
}
/** 获取部门列表 */
export const getDeptListApi = (params?: DeptQuery) => {
return http.request<ResponseData<Array<DeptDTO>>>("get", "/system/depts", {
params
});
};
/** 新增部门 */
export const addDeptApi = (data: DeptRequest) => {
console.log(data);
return http.request<ResponseData<void>>("post", "/system/dept", {
data
});
};
/** 部门详情 */
export const getDeptInfoApi = (deptId: string) => {
return http.request<ResponseData<DeptDTO>>("get", `/system/dept/${deptId}`);
};
/** 修改部门 */
export const updateDeptApi = (deptId: string, data: DeptRequest) => {
return http.request<ResponseData<void>>("put", `/system/dept/${deptId}`, {
data
});
};
/** 删除部门 */
export const deleteDeptApi = (deptId: string) => {
return http.request<ResponseData<void>>("delete", `/system/dept/${deptId}`);
};
/** 获取部门树级结构 */
export const getDeptTree = () => {
return http.request<ResponseData<DeptTreeDTO>>(
"get",
"/system/depts/dropdown"
);
};
frontend/web/src/api/system/log.ts
-2
View File
@@ -11,8 +11,6 @@ export interface OperationLogDTO {
businessType?: number;
businessTypeStr?: string;
calledMethod?: string;
deptId?: number;
deptName?: string;
errorStack?: string;
operationId?: number;
operationParam?: string;
frontend/web/src/api/system/monitor.ts
-1
View File
@@ -7,7 +7,6 @@ export interface OnlineUserQuery {
export interface OnlineUserInfo {
browser?: string;
deptName?: string;
ipAddress?: string;
loginLocation?: string;
loginTime?: number;
frontend/web/src/api/system/post.ts
-70
View File
@@ -1,70 +0,0 @@
import { http } from "@/utils/http";
export interface PostListCommand extends BasePageQuery {
postCode?: string;
postName?: string;
status?: number;
}
export interface PostPageResponse {
createTime: string;
postCode: string;
postId: number;
postName: string;
postSort: number;
remark: string;
status: number;
statusStr: string;
}
export function getPostListApi(params: PostListCommand) {
return http.request<ResponseData<PageDTO<PostPageResponse>>>(
"get",
"/system/post/list",
{
params
}
);
}
export const exportPostExcelApi = (
params: PostListCommand,
fileName: string
) => {
return http.download("/system/post/excel", fileName, {
params
});
};
export const deletePostApi = (data: Array<number>) => {
return http.request<ResponseData<void>>("delete", "/system/post", {
params: {
// 需要将数组转换为字符串 否则Axios会将参数变成 noticeIds[0]:1 noticeIds[1]:2 这种格式，后端接收参数不成功
ids: data.toString()
}
});
};
export interface AddPostCommand {
postCode: string;
postName: string;
postSort: number;
remark?: string;
status?: string;
}
export const addPostApi = (data: AddPostCommand) => {
return http.request<ResponseData<void>>("post", "/system/post", {
data
});
};
export interface UpdatePostCommand extends AddPostCommand {
postId: number;
}
export const updatePostApi = (data: UpdatePostCommand) => {
return http.request<ResponseData<void>>("put", "/system/post", {
data
});
};
frontend/web/src/api/system/role.ts
-1
View File
@@ -15,7 +15,6 @@ export interface RoleDTO {
roleKey: string;
roleName: string;
roleSort: number;
selectedDeptList: number[];
selectedMenuList: number[];
status: number;
}
frontend/web/src/api/system/user.ts
+1 -7
View File
@@ -1,7 +1,6 @@
import { http } from "@/utils/http";
export interface UserQuery extends BasePageQuery {
deptId?: number;
phoneNumber?: string;
status?: number;
userId?: number;
@@ -16,14 +15,11 @@ export interface UserDTO {
createTime?: Date;
creatorId?: number;
creatorName?: string;
deptId?: number;
deptName?: string;
email?: string;
loginDate?: Date;
loginIp?: string;
nickname?: string;
phoneNumber?: string;
postId?: number;
remark?: string;
roleId?: number;
roleName?: string;
@@ -43,12 +39,10 @@ export interface UserDTO {
export interface UserRequest {
userId: number;
avatar?: string;
deptId?: number;
email?: string;
nickname?: string;
phoneNumber?: string;
password: string;
postId?: number;
remark?: string;
roleId?: number;
sex?: number;
@@ -71,8 +65,8 @@ export interface UserProfileRequest {
* ResetPasswordCommand
*/
export interface ResetPasswordRequest {
confirmPassword?: string;
newPassword?: string;
oldPassword?: string;
userId?: number;
}
frontend/web/src/components/ReIcon/src/offlineIcon.ts
-2
View File
@@ -21,7 +21,6 @@ import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
import FlUser from "@iconify-icons/ri/admin-line";
import Role from "@iconify-icons/ri/admin-fill";
import Setting from "@iconify-icons/ri/settings-3-line";
import Dept from "@iconify-icons/ri/git-branch-line";
import Lollipop from "@iconify-icons/ep/lollipop";
import Monitor from "@iconify-icons/ep/monitor";
addIcon("ubuntuFill", UbuntuFill);
@@ -40,6 +39,5 @@ addIcon("checkboxCircleLine", CheckboxCircleLine);
addIcon("flUser", FlUser);
addIcon("role", Role);
addIcon("setting", Setting);
addIcon("dept", Dept);
addIcon("lollipop", Lollipop);
addIcon("monitor", Monitor);
frontend/web/src/layout/components/appMain.vue
+3 -17
View File
@@ -8,7 +8,7 @@ const props = defineProps({
fixedHeader: Boolean
});
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
const { $config } = useGlobal<GlobalPropertiesApi>();
const keepAlive = computed(() => {
return $config?.KeepAlive;
@@ -20,22 +20,8 @@ const transitions = computed(() => {
};
});
const hideTabs = computed(() => {
return $storage?.configure.hideTabs;
});
const layout = computed(() => {
return $storage?.layout.layout === "vertical";
});
const getSectionStyle = computed(() => {
return [
hideTabs.value && layout ? "padding-top: 48px;" : "",
!hideTabs.value && layout ? "padding-top: 85px;" : "",
hideTabs.value && !layout.value ? "padding-top: 48px" : "",
!hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
props.fixedHeader ? "" : "padding-top: 0;"
];
return ["padding-top: 85px;", props.fixedHeader ? "" : "padding-top: 0;"];
});
const transitionMain = defineComponent({
@@ -143,6 +129,6 @@ const transitionMain = defineComponent({
}
.main-content {
margin: 24px;
margin: 8px;
}
</style>
frontend/web/src/layout/components/headerDarkSwitch.vue
+54
View File
@@ -0,0 +1,54 @@
<script setup lang="ts">
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";
const { dataTheme, dataThemeChange } = useDataThemeChange();
function handleThemeToggle() {
dataTheme.value = !dataTheme.value;
dataThemeChange();
}
</script>
<template>
<button
type="button"
class="header-dark-switch navbar-bg-hover"
title="切换暗黑模式"
aria-label="切换暗黑模式"
@click="handleThemeToggle"
>
<component
:is="dataTheme ? dayIcon : darkIcon"
class="header-dark-switch__icon"
/>
</button>
</template>
<style lang="scss" scoped>
.header-dark-switch {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 48px;
padding: 0;
color: var(--el-text-color-primary);
cursor: pointer;
background: transparent;
border: 0;
outline: none;
}
.header-dark-switch__icon {
width: 16px;
height: 16px;
fill: currentcolor;
}
:global(html.dark) .header-dark-switch {
color: #fff;
}
</style>
frontend/web/src/layout/components/navbar.vue
+2 -14
View File
@@ -1,19 +1,17 @@
<script setup lang="ts">
import Search from "./search/index.vue";
import Notice from "./notice/index.vue";
import mixNav from "./sidebar/mixNav.vue";
import HeaderDarkSwitch from "./headerDarkSwitch.vue";
import { useNav } from "@/layout/hooks/useNav";
import Breadcrumb from "./sidebar/breadCrumb.vue";
import topCollapse from "./sidebar/topCollapse.vue";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
const {
layout,
device,
logout,
userProfile,
onPanel,
pureApp,
username,
userAvatar,
@@ -41,11 +39,8 @@ const {
<mixNav v-if="layout === 'mix'" />
<div v-if="layout === 'vertical'" class="vertical-header-right">
<!-- 菜单搜索 -->
<Search />
<!-- 通知 -->
<Notice id="header-notice" />
<!-- 退出登录 -->
<HeaderDarkSwitch />
<el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover select-none">
<img :src="userAvatar" :style="avatarsStyle" />
@@ -72,13 +67,6 @@ const {
</el-dropdown-menu>
</template>
</el-dropdown>
<span
class="set-icon navbar-bg-hover"
title="打开项目配置"
@click="onPanel"
>
<IconifyIconOffline :icon="Setting" />
</span>
</div>
</div>
</template>
frontend/web/src/layout/components/notice/data.ts
-146
View File
@@ -1,146 +0,0 @@
export interface ListItem {
avatar: string;
title: string;
datetime: string;
type: string;
description: string;
status?: "" | "success" | "warning" | "info" | "danger";
extra?: string;
}
export interface TabItem {
key: string;
name: string;
list: ListItem[];
}
export const noticesData: TabItem[] = [
{
key: "1",
name: "通知",
list: [
{
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
title: "你收到了 12 份新周报",
datetime: "一年前",
description: "",
type: "1"
},
{
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
title: "你推荐的 前端高手 已通过第三轮面试",
datetime: "一年前",
description: "",
type: "1"
},
{
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
title: "这种模板可以区分多种通知类型",
datetime: "一年前",
description: "",
type: "1"
},
{
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
title:
"展示标题内容超过一行后的处理方式，如果内容超过1行将自动截断并支持tooltip显示完整标题。",
datetime: "一年前",
description: "",
type: "1"
},
{
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
title: "左侧图标用于区分不同的类型",
datetime: "一年前",
description: "",
type: "1"
},
{
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
title: "左侧图标用于区分不同的类型",
datetime: "一年前",
description: "",
type: "1"
}
]
},
{
key: "2",
name: "消息",
list: [
{
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
title: "李白 评论了你",
description: "长风破浪会有时,直挂云帆济沧海",
datetime: "一年前",
type: "2"
},
{
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
title: "李白 回复了你",
description: "行路难，行路难，多歧路，今安在。",
datetime: "一年前",
type: "2"
},
{
avatar:
"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
title: "标题",
description:
"请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容",
datetime: "一年前",
type: "2"
}
]
},
{
key: "3",
name: "代办",
list: [
{
avatar: "",
title: "任务名称",
description: "任务需要在 2022-11-16 20:00 前启动",
datetime: "",
extra: "未开始",
status: "info",
type: "3"
},
{
avatar: "",
title: "第三方紧急代码变更",
description:
"一拳提交于 2022-11-16，需在 2022-11-18 前完成代码变更任务",
datetime: "",
extra: "马上到期",
status: "danger",
type: "3"
},
{
avatar: "",
title: "信息安全考试",
description: "指派小仙于 2022-12-12 前完成更新并发布",
datetime: "",
extra: "已耗时 8 天",
status: "warning",
type: "3"
},
{
avatar: "",
title: "vue-pure-admin 版本发布",
description: "vue-pure-admin 版本发布",
datetime: "",
extra: "进行中",
type: "3"
}
]
}
];
frontend/web/src/layout/components/notice/index.vue
-88
View File
@@ -1,88 +0,0 @@
<script setup lang="ts">
import { ref } from "vue";
import { noticesData } from "./data";
import NoticeList from "./noticeList.vue";
import Bell from "@iconify-icons/ep/bell";
const noticesNum = ref(0);
const notices = ref(noticesData);
const activeKey = ref(noticesData[0].key);
notices.value.map(v => (noticesNum.value += v.list.length));
</script>
<template>
<el-dropdown trigger="click" placement="bottom-end">
<span class="dropdown-badge navbar-bg-hover select-none">
<el-badge :value="noticesNum" :max="99">
<span class="header-notice-icon">
<IconifyIconOffline :icon="Bell" />
</span>
</el-badge>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-tabs
:stretch="true"
v-model="activeKey"
class="dropdown-tabs"
:style="{ width: notices.length === 0 ? '200px' : '330px' }"
>
<el-empty
v-if="notices.length === 0"
description="暂无消息"
:image-size="60"
/>
<span v-else>
<template v-for="item in notices" :key="item.key">
<el-tab-pane
:label="`${item.name}(${item.list.length})`"
:name="`${item.key}`"
>
<el-scrollbar max-height="330px">
<div class="noticeList-container">
<NoticeList :list="item.list" />
</div>
</el-scrollbar>
</el-tab-pane>
</template>
</span>
</el-tabs>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<style lang="scss" scoped>
.dropdown-badge {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 48px;
margin-right: 10px;
cursor: pointer;
.header-notice-icon {
font-size: 18px;
}
}
.dropdown-tabs {
.noticeList-container {
padding: 15px 24px 0;
}
:deep(.el-tabs__header) {
margin: 0;
}
:deep(.el-tabs__nav-wrap)::after {
height: 1px;
}
:deep(.el-tabs__nav-wrap) {
padding: 0 36px;
}
}
</style>
frontend/web/src/layout/components/notice/noticeItem.vue
-177
View File
@@ -1,177 +0,0 @@
<script setup lang="ts">
import { ListItem } from "./data";
import { ref, PropType, nextTick } from "vue";
import { useNav } from "@/layout/hooks/useNav";
import { deviceDetection } from "@pureadmin/utils";
const props = defineProps({
noticeItem: {
type: Object as PropType<ListItem>,
default: () => {}
}
});
const titleRef = ref(null);
const titleTooltip = ref(false);
const descriptionRef = ref(null);
const descriptionTooltip = ref(false);
const { tooltipEffect } = useNav();
const isMobile = deviceDetection();
function hoverTitle() {
nextTick(() => {
titleRef.value?.scrollWidth > titleRef.value?.clientWidth
? (titleTooltip.value = true)
: (titleTooltip.value = false);
});
}
function hoverDescription(event, description) {
// currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除
const tempTag = document.createElement("span");
tempTag.innerText = description;
tempTag.className = "getDescriptionWidth";
document.querySelector("body").appendChild(tempTag);
const currentWidth = (
document.querySelector(".getDescriptionWidth") as HTMLSpanElement
).offsetWidth;
document.querySelector(".getDescriptionWidth").remove();
// cellWidth为容器的宽度
const cellWidth = event.target.offsetWidth;
// 当文本宽度大于容器宽度两倍时，代表文本显示超过两行
currentWidth > 2 * cellWidth
? (descriptionTooltip.value = true)
: (descriptionTooltip.value = false);
}
</script>
<template>
<div
class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
>
<el-avatar
v-if="props.noticeItem.avatar"
:size="30"
:src="props.noticeItem.avatar"
class="notice-container-avatar"
/>
<div class="notice-container-text">
<div class="notice-text-title text-[#000000d9] dark:text-white">
<el-tooltip
popper-class="notice-title-popper"
:effect="tooltipEffect"
:disabled="!titleTooltip"
:content="props.noticeItem.title"
placement="top-start"
:enterable="!isMobile"
>
<div
ref="titleRef"
class="notice-title-content"
@mouseover="hoverTitle"
>
{{ props.noticeItem.title }}
</div>
</el-tooltip>
<el-tag
v-if="props.noticeItem?.extra"
:type="props.noticeItem?.status"
size="small"
class="notice-title-extra"
>
{{ props.noticeItem?.extra }}
</el-tag>
</div>
<el-tooltip
popper-class="notice-title-popper"
:effect="tooltipEffect"
:disabled="!descriptionTooltip"
:content="props.noticeItem.description"
placement="top-start"
>
<div
ref="descriptionRef"
class="notice-text-description"
@mouseover="hoverDescription($event, props.noticeItem.description)"
>
{{ props.noticeItem.description }}
</div>
</el-tooltip>
<div class="notice-text-datetime text-[#00000073] dark:text-white">
{{ props.noticeItem.datetime }}
</div>
</div>
</div>
</template>
<style>
.notice-title-popper {
max-width: 238px;
}
</style>
<style scoped lang="scss">
.notice-container {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 12px 0;
// border-bottom: 1px solid #f0f0f0;
.notice-container-avatar {
margin-right: 16px;
background: #fff;
}
.notice-container-text {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
.notice-text-title {
display: flex;
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
line-height: 1.5715;
cursor: pointer;
.notice-title-content {
flex: 1;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice-title-extra {
float: right;
margin-top: -1.5px;
font-weight: 400;
}
}
.notice-text-description,
.notice-text-datetime {
font-size: 12px;
line-height: 1.5715;
}
.notice-text-description {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.notice-text-datetime {
margin-top: 4px;
}
}
}
</style>
frontend/web/src/layout/components/notice/noticeList.vue
-23
View File
@@ -1,23 +0,0 @@
<script setup lang="ts">
import { PropType } from "vue";
import { ListItem } from "./data";
import NoticeItem from "./noticeItem.vue";
const props = defineProps({
list: {
type: Array as PropType<Array<ListItem>>,
default: () => []
}
});
</script>
<template>
<div v-if="props.list.length">
<NoticeItem
v-for="(item, index) in props.list"
:noticeItem="item"
:key="index"
/>
</div>
<el-empty v-else description="暂无数据" />
</template>
frontend/web/src/layout/components/panel/index.vue
-158
View File
@@ -1,158 +0,0 @@
<script setup lang="ts">
import { emitter } from "@/utils/mitt";
import { onClickOutside } from "@vueuse/core";
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import Close from "@iconify-icons/ep/close";
const target = ref(null);
const show = ref<Boolean>(false);
const iconClass = computed(() => {
return [
"mr-[20px]",
"outline-none",
"width-[20px]",
"height-[20px]",
"rounded-[4px]",
"cursor-pointer",
"transition-colors",
"hover:bg-[#0000000f]",
"dark:hover:bg-[#ffffff1f]",
"dark:hover:text-[#ffffffd9]"
];
});
onClickOutside(target, (event: any) => {
if (event.clientX > target.value.offsetLeft) return;
show.value = false;
});
onMounted(() => {
emitter.on("openPanel", () => {
show.value = true;
});
});
onBeforeUnmount(() => {
// 解绑`openPanel`公共事件，防止多次触发
emitter.off("openPanel");
});
</script>
<template>
<div :class="{ show: show }" class="right-panel-container">
<div class="right-panel-background" />
<div ref="target" class="right-panel bg-bg_color">
<div class="right-panel-items">
<div class="project-configuration">
<h4 class="dark:text-white">项目配置</h4>
<span title="关闭配置" :class="iconClass">
<IconifyIconOffline
class="dark:text-white"
width="20px"
height="20px"
:icon="Close"
@click="show = !show"
/>
</span>
</div>
<div
class="border-b-[1px] border-solid border-[#dcdfe6] dark:border-[#303030]"
/>
<slot />
</div>
</div>
</div>
</template>
<style>
.showright-panel {
position: relative;
width: calc(100% - 15px);
overflow: hidden;
}
</style>
<style lang="scss" scoped>
.right-panel-background {
position: fixed;
top: 0;
left: 0;
z-index: -1;
background: rgb(0 0 0 / 20%);
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
}
.right-panel {
position: fixed;
top: 0;
right: 0;
z-index: 40000;
width: 100%;
max-width: 315px;
height: 100vh;
box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
transform: translate(100%);
}
.show {
transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
.right-panel-background {
z-index: 20000;
width: 100%;
height: 100%;
opacity: 1;
}
.right-panel {
transform: translate(0);
}
}
.handle-button {
position: absolute;
top: 45%;
left: -48px;
z-index: 0;
width: 48px;
height: 48px;
font-size: 24px;
line-height: 48px;
color: #fff;
text-align: center;
pointer-events: auto;
cursor: pointer;
background: rgb(24 144 255);
border-radius: 6px 0 0 6px !important;
i {
font-size: 24px;
line-height: 48px;
}
}
.right-panel-items {
height: calc(100vh - 60px);
margin-top: 60px;
overflow-y: auto;
}
.project-configuration {
position: fixed;
top: 15px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 30px;
margin-left: 10px;
}
:deep(.el-divider--horizontal) {
width: 90%;
margin: 20px auto 0;
}
</style>
frontend/web/src/layout/components/setting/index.vue
-529
View File
@@ -1,529 +0,0 @@
<script setup lang="ts">
import {
ref,
unref,
watch,
reactive,
computed,
nextTick,
onBeforeMount
} from "vue";
import {
useDark,
debounce,
useGlobal,
storageLocal,
storageSession
} from "@pureadmin/utils";
import { getConfig } from "@/config";
import { useRouter } from "vue-router";
import panel from "../panel/index.vue";
import { emitter } from "@/utils/mitt";
import { resetRouter } from "@/router";
import { removeToken } from "@/utils/auth";
import { routerArrays } from "@/layout/types";
import { useNav } from "@/layout/hooks/useNav";
import { useAppStoreHook } from "@/store/modules/app";
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";
import Check from "@iconify-icons/ep/check";
import Logout from "@iconify-icons/ri/logout-circle-r-line";
const router = useRouter();
const { isDark } = useDark();
const { device, tooltipEffect } = useNav();
const { $storage } = useGlobal<GlobalPropertiesApi>();
const mixRef = ref();
const verticalRef = ref();
const horizontalRef = ref();
const {
dataTheme,
layoutTheme,
themeColors,
dataThemeChange,
setEpThemeColor,
setLayoutThemeColor
} = useDataThemeChange();
/* body添加layout属性，作用于src/style/sidebar.scss */
if (unref(layoutTheme)) {
const layout = unref(layoutTheme).layout;
const theme = unref(layoutTheme).theme;
toggleTheme({
scopeName: `layout-theme-${theme}`
});
setLayoutModel(layout);
}
/** 默认灵动模式 */
const markValue = ref($storage.configure?.showModel ?? "smart");
const logoVal = ref($storage.configure?.showLogo ?? true);
const settings = reactive({
greyVal: $storage.configure.grey,
weakVal: $storage.configure.weak,
tabsVal: $storage.configure.hideTabs,
showLogo: $storage.configure.showLogo,
showModel: $storage.configure.showModel,
multiTagsCache: $storage.configure.multiTagsCache
});
const getThemeColorStyle = computed(() => {
return color => {
return { background: color };
};
});
/** 当网页为暗黑模式时不显示亮白色切换选项 */
const showThemeColors = computed(() => {
return themeColor => {
return themeColor === "light" && isDark.value ? false : true;
};
});
function storageConfigureChange<T>(key: string, val: T): void {
const storageConfigure = $storage.configure;
storageConfigure[key] = val;
$storage.configure = storageConfigure;
}
function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
const targetEl = target || document.body;
let { className } = targetEl;
className = className.replace(clsName, "").trim();
targetEl.className = flag ? `${className} ${clsName} ` : className;
}
/** 灰色模式设置 */
const greyChange = (value): void => {
toggleClass(settings.greyVal, "html-grey", document.querySelector("html"));
storageConfigureChange("grey", value);
};
/** 色弱模式设置 */
const weekChange = (value): void => {
toggleClass(
settings.weakVal,
"html-weakness",
document.querySelector("html")
);
storageConfigureChange("weak", value);
};
const tagsChange = () => {
const showVal = settings.tabsVal;
storageConfigureChange("hideTabs", showVal);
emitter.emit("tagViewsChange", showVal as unknown as string);
};
const multiTagsCacheChange = () => {
const multiTagsCache = settings.multiTagsCache;
storageConfigureChange("multiTagsCache", multiTagsCache);
useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
};
/** 清空缓存并返回登录页 */
function onReset() {
removeToken();
storageLocal().clear();
storageSession().clear();
const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
useAppStoreHook().setLayout(Layout);
setEpThemeColor(EpThemeColor);
useMultiTagsStoreHook().multiTagsCacheChange(MultiTagsCache);
toggleClass(Grey, "html-grey", document.querySelector("html"));
toggleClass(Weak, "html-weakness", document.querySelector("html"));
router.push("/login");
useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
resetRouter();
}
function onChange(label) {
storageConfigureChange("showModel", label);
emitter.emit("tagViewsShowModel", label);
}
/** 侧边栏Logo */
function logoChange() {
unref(logoVal)
? storageConfigureChange("showLogo", true)
: storageConfigureChange("showLogo", false);
emitter.emit("logoChange", unref(logoVal));
}
function setFalse(Doms): any {
Doms.forEach(v => {
toggleClass(false, "is-select", unref(v));
});
}
/** 主题色 激活选择项 */
const getThemeColor = computed(() => {
return current => {
if (
current === layoutTheme.value.theme &&
layoutTheme.value.theme !== "light"
) {
return "#fff";
} else if (
current === layoutTheme.value.theme &&
layoutTheme.value.theme === "light"
) {
return "#1d2b45";
} else {
return "transparent";
}
};
});
/** 设置导航模式 */
function setLayoutModel(layout: string) {
layoutTheme.value.layout = layout;
window.document.body.setAttribute("layout", layout);
$storage.layout = {
layout,
theme: layoutTheme.value.theme,
darkMode: $storage.layout?.darkMode,
sidebarStatus: $storage.layout?.sidebarStatus,
epThemeColor: $storage.layout?.epThemeColor
};
useAppStoreHook().setLayout(layout);
}
watch($storage, ({ layout }) => {
switch (layout["layout"]) {
case "vertical":
toggleClass(true, "is-select", unref(verticalRef));
debounce(setFalse([horizontalRef]), 50);
debounce(setFalse([mixRef]), 50);
break;
case "horizontal":
toggleClass(true, "is-select", unref(horizontalRef));
debounce(setFalse([verticalRef]), 50);
debounce(setFalse([mixRef]), 50);
break;
case "mix":
toggleClass(true, "is-select", unref(mixRef));
debounce(setFalse([verticalRef]), 50);
debounce(setFalse([horizontalRef]), 50);
break;
}
});
onBeforeMount(() => {
/* 初始化项目配置 */
nextTick(() => {
settings.greyVal &&
document.querySelector("html")?.setAttribute("class", "html-grey");
settings.weakVal &&
document.querySelector("html")?.setAttribute("class", "html-weakness");
settings.tabsVal && tagsChange();
});
});
</script>
<template>
<panel>
<el-divider>主题</el-divider>
<el-switch
v-model="dataTheme"
inline-prompt
class="pure-datatheme"
:active-icon="dayIcon"
:inactive-icon="darkIcon"
@change="dataThemeChange"
/>
<el-divider>导航栏模式</el-divider>
<ul class="pure-theme">
<el-tooltip
:effect="tooltipEffect"
class="item"
content="左侧模式"
placement="bottom"
popper-class="pure-tooltip"
>
<li
:class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
ref="verticalRef"
@click="setLayoutModel('vertical')"
>
<div />
<div />
</li>
</el-tooltip>
<el-tooltip
v-if="device !== 'mobile'"
:effect="tooltipEffect"
class="item"
content="顶部模式"
placement="bottom"
popper-class="pure-tooltip"
>
<li
:class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
ref="horizontalRef"
@click="setLayoutModel('horizontal')"
>
<div />
<div />
</li>
</el-tooltip>
<el-tooltip
v-if="device !== 'mobile'"
:effect="tooltipEffect"
class="item"
content="混合模式"
placement="bottom"
popper-class="pure-tooltip"
>
<li
:class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
ref="mixRef"
@click="setLayoutModel('mix')"
>
<div />
<div />
</li>
</el-tooltip>
</ul>
<el-divider>主题色</el-divider>
<ul class="theme-color">
<li
v-for="(item, index) in themeColors"
:key="index"
v-show="showThemeColors(item.themeColor)"
:style="getThemeColorStyle(item.color)"
@click="setLayoutThemeColor(item.themeColor)"
>
<el-icon
style="margin: 0.1em 0.1em 0 0"
:size="17"
:color="getThemeColor(item.themeColor)"
>
<IconifyIconOffline :icon="Check" />
</el-icon>
</li>
</ul>
<el-divider>界面显示</el-divider>
<ul class="setting">
<li>
<span class="dark:text-white">灰色模式</span>
<el-switch
v-model="settings.greyVal"
inline-prompt
inactive-color="#a6a6a6"
active-text="开"
inactive-text="关"
@change="greyChange"
/>
</li>
<li>
<span class="dark:text-white">色弱模式</span>
<el-switch
v-model="settings.weakVal"
inline-prompt
inactive-color="#a6a6a6"
active-text="开"
inactive-text="关"
@change="weekChange"
/>
</li>
<li>
<span class="dark:text-white">隐藏标签页</span>
<el-switch
v-model="settings.tabsVal"
inline-prompt
inactive-color="#a6a6a6"
active-text="开"
inactive-text="关"
@change="tagsChange"
/>
</li>
<li>
<span class="dark:text-white">侧边栏Logo</span>
<el-switch
v-model="logoVal"
inline-prompt
:active-value="true"
:inactive-value="false"
inactive-color="#a6a6a6"
active-text="开"
inactive-text="关"
@change="logoChange"
/>
</li>
<li>
<span class="dark:text-white">标签页持久化</span>
<el-switch
v-model="settings.multiTagsCache"
inline-prompt
inactive-color="#a6a6a6"
active-text="开"
inactive-text="关"
@change="multiTagsCacheChange"
/>
</li>
<li>
<span class="dark:text-white">标签风格</span>
<el-radio-group v-model="markValue" size="small" @change="onChange">
<el-radio label="card">卡片</el-radio>
<el-radio label="smart">灵动</el-radio>
</el-radio-group>
</li>
</ul>
<el-divider />
<el-button
type="danger"
style="width: 90%; margin: 24px 15px"
@click="onReset"
>
<IconifyIconOffline
:icon="Logout"
width="15"
height="15"
style="margin-right: 4px"
/>
清空缓存并返回登录页
</el-button>
</panel>
</template>
<style lang="scss" scoped>
:deep(.el-divider__text) {
font-size: 16px;
font-weight: 700;
}
.is-select {
border: 2px solid var(--el-color-primary);
}
.setting {
width: 100%;
li {
display: flex;
align-items: center;
justify-content: space-between;
margin: 25px;
}
}
.pure-datatheme {
display: block;
width: 100%;
height: 50px;
padding-top: 25px;
text-align: center;
}
.pure-theme {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
height: 50px;
margin-top: 25px;
li {
position: relative;
width: 18%;
height: 45px;
overflow: hidden;
cursor: pointer;
background: #f0f2f5;
border-radius: 4px;
box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
&:nth-child(1) {
div {
&:nth-child(1) {
width: 30%;
height: 100%;
background: #1b2a47;
}
&:nth-child(2) {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 30%;
background: #fff;
box-shadow: 0 0 1px #888;
}
}
}
&:nth-child(2) {
div {
&:nth-child(1) {
width: 100%;
height: 30%;
background: #1b2a47;
box-shadow: 0 0 1px #888;
}
}
}
&:nth-child(3) {
div {
&:nth-child(1) {
width: 100%;
height: 30%;
background: #1b2a47;
box-shadow: 0 0 1px #888;
}
&:nth-child(2) {
position: absolute;
bottom: 0;
left: 0;
width: 30%;
height: 70%;
background: #fff;
box-shadow: 0 0 1px #888;
}
}
}
}
}
.theme-color {
display: flex;
justify-content: center;
width: 100%;
height: 40px;
margin-top: 20px;
li {
float: left;
width: 20px;
height: 20px;
margin-top: 8px;
margin-right: 8px;
font-weight: 700;
text-align: center;
cursor: pointer;
border-radius: 2px;
&:nth-child(2) {
border: 1px solid #ddd;
}
}
}
</style>
frontend/web/src/layout/components/sidebar/horizontal.vue
+2 -14
View File
@@ -1,13 +1,12 @@
<script setup lang="ts">
import Search from "../search/index.vue";
import Notice from "../notice/index.vue";
import SidebarItem from "./sidebarItem.vue";
import HeaderDarkSwitch from "../headerDarkSwitch.vue";
import { isAllEmpty } from "@pureadmin/utils";
import { ref, nextTick, computed } from "vue";
import { useNav } from "@/layout/hooks/useNav";
import { usePermissionStoreHook } from "@/store/modules/permission";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
const menuRef = ref();
@@ -16,7 +15,6 @@ const {
title,
logout,
backTopMenu,
onPanel,
username,
userAvatar,
avatarsStyle
@@ -55,11 +53,8 @@ nextTick(() => {
/>
</el-menu>
<div class="horizontal-header-right">
<!-- 菜单搜索 -->
<Search />
<!-- 通知 -->
<Notice id="header-notice" />
<!-- 退出登录 -->
<HeaderDarkSwitch />
<el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover">
<img :src="userAvatar" :style="avatarsStyle" />
@@ -77,13 +72,6 @@ nextTick(() => {
</el-dropdown-menu>
</template>
</el-dropdown>
<span
class="set-icon navbar-bg-hover"
title="打开项目配置"
@click="onPanel"
>
<IconifyIconOffline :icon="Setting" />
</span>
</div>
</div>
</template>
frontend/web/src/layout/components/sidebar/mixNav.vue
+3 -16
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import extraIcon from "./extraIcon.vue";
import Search from "../search/index.vue";
import Notice from "../notice/index.vue";
import HeaderDarkSwitch from "../headerDarkSwitch.vue";
import { isAllEmpty } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import { ref, toRaw, watch, onMounted, nextTick } from "vue";
@@ -9,7 +9,6 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { getParentPaths, findRouteByPath } from "@/router/utils";
import { usePermissionStoreHook } from "@/store/modules/permission";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
const menuRef = ref();
const defaultActive = ref(null);
@@ -18,7 +17,6 @@ const {
route,
device,
logout,
onPanel,
resolvePath,
username,
userAvatar,
@@ -28,7 +26,6 @@ const {
function getDefaultActive(routePath) {
const wholeMenus = usePermissionStoreHook().wholeMenus;
/** 当前路由的父级路径 */
const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
defaultActive.value = !isAllEmpty(route.meta?.activePath)
? route.meta.activePath
@@ -54,8 +51,8 @@ watch(
<template>
<div
v-if="device !== 'mobile'"
class="horizontal-header"
v-loading="usePermissionStoreHook().wholeMenus.length === 0"
class="horizontal-header"
>
<el-menu
router
@@ -88,11 +85,8 @@ watch(
</el-menu-item>
</el-menu>
<div class="horizontal-header-right">
<!-- 菜单搜索 -->
<Search />
<!-- 通知 -->
<Notice id="header-notice" />
<!-- 退出登录 -->
<HeaderDarkSwitch />
<el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover select-none">
<img :src="userAvatar" :style="avatarsStyle" />
@@ -110,13 +104,6 @@ watch(
</el-dropdown-menu>
</template>
</el-dropdown>
<span
class="set-icon navbar-bg-hover"
title="打开项目配置"
@click="onPanel"
>
<IconifyIconOffline :icon="Setting" />
</span>
</div>
</div>
</template>
frontend/web/src/layout/components/sidebar/vertical.vue
+8 -31
View File
@@ -1,23 +1,15 @@
<script setup lang="ts">
import Logo from "./logo.vue";
import { useRoute } from "vue-router";
import { emitter } from "@/utils/mitt";
import SidebarItem from "./sidebarItem.vue";
import leftCollapse from "./leftCollapse.vue";
import { useNav } from "@/layout/hooks/useNav";
import { responsiveStorageNameSpace } from "@/config";
import { storageLocal, isAllEmpty } from "@pureadmin/utils";
import { isAllEmpty } from "@pureadmin/utils";
import { findRouteByPath, getParentPaths } from "@/router/utils";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
import { ref, computed, watch, onMounted } from "vue";
const route = useRoute();
const showLogo = ref(
storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}configure`
)?.showLogo ?? true
);
const { device, pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
const subMenuData = ref([]);
@@ -37,21 +29,18 @@ const defaultActive = computed(() =>
);
function getSubMenuData() {
let path = "";
path = defaultActive.value;
const path = defaultActive.value;
subMenuData.value = [];
// path的上级路由组成的数组
const parentPathArr = getParentPaths(
path,
usePermissionStoreHook().wholeMenus
);
// 当前路由的父级路由信息
const parenetRoute = findRouteByPath(
const parentRoute = findRouteByPath(
parentPathArr[0] || path,
usePermissionStoreHook().wholeMenus
);
if (!parenetRoute?.children) return;
subMenuData.value = parenetRoute?.children;
if (!parentRoute?.children) return;
subMenuData.value = parentRoute.children;
}
watch(
@@ -65,24 +54,12 @@ watch(
onMounted(() => {
getSubMenuData();
emitter.on("logoChange", key => {
showLogo.value = key;
});
});
onBeforeUnmount(() => {
// 解绑`logoChange`公共事件，防止多次触发
emitter.off("logoChange");
});
</script>
<template>
<div
v-loading="loading"
:class="['sidebar-container', showLogo ? 'has-logo' : '']"
>
<Logo v-if="showLogo" :collapse="isCollapse" />
<div v-loading="loading" :class="['sidebar-container', 'has-logo']">
<Logo :collapse="isCollapse" />
<el-scrollbar
wrap-class="scrollbar-wrapper"
:class="[device === 'mobile' ? 'mobile' : 'pc']"
frontend/web/src/layout/components/tag/index.scss
-19
View File
@@ -243,25 +243,6 @@
}
}
/* 卡片模式下鼠标移入显示蓝色边框 */
.card-in {
color: var(--el-color-primary);
a {
color: var(--el-color-primary);
}
}
/* 卡片模式下鼠标移出隐藏蓝色边框 */
.card-out {
color: #666;
border: none;
a {
color: #666;
}
}
/* 灵动模式 */
.schedule-active {
position: absolute;
frontend/web/src/layout/components/tag/index.vue
+10 -34
View File
@@ -21,13 +21,11 @@ const {
route,
router,
visible,
showTags,
instance,
multiTags,
tagsViews,
buttonTop,
buttonLeft,
showModel,
translateX,
pureSetting,
activeIndex,
@@ -49,7 +47,6 @@ const containerDom = ref();
const scrollbarDom = ref();
const isShowArrow = ref(false);
const topPath = getTopMenu()?.path;
const { VITE_HIDE_HOME } = import.meta.env;
const { isFullscreen, toggle } = useFullscreen();
const dynamicTagView = async () => {
@@ -188,10 +185,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
other?: boolean
): void => {
if (other) {
useMultiTagsStoreHook().handleTags("equal", [
VITE_HIDE_HOME === "false" ? routerArrays[0] : toRaw(getTopMenu()),
obj
]);
useMultiTagsStoreHook().handleTags("equal", getPinnedTags(obj));
} else {
useMultiTagsStoreHook().handleTags("splice", "", {
startIndex,
@@ -235,6 +229,11 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
}
}
function getPinnedTags(obj: RouteConfigs) {
const pinnedTag = routerArrays[0] ?? toRaw(getTopMenu());
return pinnedTag ? [pinnedTag, obj] : [obj];
}
function deleteMenu(item, tag?: string) {
deleteDynamicTag(item, item.path, tag);
handleAliveRoute(route as ToRouteType);
@@ -476,17 +475,6 @@ onMounted(() => {
// 根据当前路由初始化操作标签页的禁用状态
showMenuModel(route.fullPath);
// 触发隐藏标签页
emitter.on("tagViewsChange", (key: any) => {
if (unref(showTags as any) === key) return;
(showTags as any).value = key;
});
// 改变标签风格
emitter.on("tagViewsShowModel", key => {
showModel.value = key;
});
// 接收侧边栏切换传递过来的参数
emitter.on("changLayoutRoute", indexPath => {
dynamicRouteTag(indexPath);
@@ -502,15 +490,13 @@ onMounted(() => {
});
onBeforeUnmount(() => {
// 解绑`tagViewsChange`、`tagViewsShowModel`、`changLayoutRoute`公共事件，防止多次触发
emitter.off("tagViewsChange");
emitter.off("tagViewsShowModel");
// 解绑公共事件，防止多次触发
emitter.off("changLayoutRoute");
});
</script>
<template>
<div ref="containerDom" class="tags-view" v-if="!showTags">
<div ref="containerDom" class="tags-view">
<span v-show="isShowArrow" class="arrow-left">
<IconifyIconOffline :icon="ArrowLeftSLine" @click="handleScroll(200)" />
</span>
@@ -520,13 +506,7 @@ onBeforeUnmount(() => {
:ref="'dynamic' + index"
v-for="(item, index) in multiTags"
:key="index"
:class="[
'scroll-item is-closable',
linkIsActive(item),
route.path === item.path && showModel === 'card'
? 'card-active'
: ''
]"
:class="['scroll-item is-closable', linkIsActive(item)]"
@contextmenu.prevent="openMenu(item, $event)"
@mouseenter.prevent="onMouseenter(index)"
@mouseleave.prevent="onMouseleave(index)"
@@ -548,11 +528,7 @@ onBeforeUnmount(() => {
>
<IconifyIconOffline :icon="CloseBold" />
</span>
<div
:ref="'schedule' + index"
v-if="showModel !== 'card'"
:class="[scheduleIsActive(item)]"
/>
<div :ref="'schedule' + index" :class="[scheduleIsActive(item)]" />
</div>
</div>
</div>
frontend/web/src/layout/hooks/useLayout.ts
+1 -6
View File
@@ -24,14 +24,9 @@ export function useLayout() {
epThemeColor: $config?.EpThemeColor ?? "#409EFF"
};
}
/** 灰色模式、色弱模式、隐藏标签页 */
/** 标签页缓存配置 */
if (!$storage.configure) {
$storage.configure = {
grey: $config?.Grey ?? false,
weak: $config?.Weak ?? false,
hideTabs: $config?.HideTabs ?? false,
showLogo: $config?.ShowLogo ?? true,
showModel: $config?.ShowModel ?? "smart",
multiTagsCache: $config?.MultiTagsCache ?? false
};
}
frontend/web/src/layout/hooks/useNav.ts
-5
View File
@@ -87,10 +87,6 @@ export function useNav() {
router.push(getTopMenu()?.path);
}
function onPanel() {
emitter.emit("openPanel");
}
function toggleSideBar() {
pureApp.toggleSideBar();
}
@@ -130,7 +126,6 @@ export function useNav() {
routers,
$storage,
backTopMenu,
onPanel,
getDivStyle,
changeTitle,
toggleSideBar,
frontend/web/src/layout/hooks/useTag.ts
+23 -72
View File
@@ -1,6 +1,5 @@
import {
ref,
unref,
watch,
computed,
reactive,
@@ -11,16 +10,9 @@ import {
import { tagsViewsType } from "../types";
import { useEventListener } from "@vueuse/core";
import { useRoute, useRouter } from "vue-router";
import { responsiveStorageNameSpace } from "@/config";
import { useSettingStoreHook } from "@/store/modules/settings";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import {
isEqual,
isBoolean,
storageLocal,
toggleClass,
hasClass
} from "@pureadmin/utils";
import { isEqual, isBoolean, toggleClass, hasClass } from "@pureadmin/utils";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import CloseAllTags from "@iconify-icons/ri/subtract-line";
@@ -41,22 +33,7 @@ export function useTags() {
const translateX = ref(0);
const visible = ref(false);
const activeIndex = ref(-1);
// 当前右键选中的路由信息
const currentSelect = ref({});
/** 显示模式，默认灵动模式 */
const showModel = ref(
storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}configure`
)?.showModel || "smart"
);
/** 是否隐藏标签页，默认显示 */
const showTags =
ref(
storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}configure`
).hideTabs
) ?? ref("false");
const multiTags: any = computed(() => {
return useMultiTagsStoreHook().multiTags;
});
@@ -73,35 +50,35 @@ export function useTags() {
icon: Close,
text: "关闭当前标签页",
divided: false,
disabled: multiTags.value.length > 1 ? false : true,
disabled: multiTags.value.length <= 1,
show: true
},
{
icon: CloseLeftTags,
text: "关闭左侧标签页",
divided: true,
disabled: multiTags.value.length > 1 ? false : true,
disabled: multiTags.value.length <= 1,
show: true
},
{
icon: CloseRightTags,
text: "关闭右侧标签页",
divided: false,
disabled: multiTags.value.length > 1 ? false : true,
disabled: multiTags.value.length <= 1,
show: true
},
{
icon: CloseOtherTags,
text: "关闭其他标签页",
divided: true,
disabled: multiTags.value.length > 2 ? false : true,
disabled: multiTags.value.length <= 2,
show: true
},
{
icon: CloseAllTags,
text: "关闭全部标签页",
divided: false,
disabled: multiTags.value.length > 1 ? false : true,
disabled: multiTags.value.length <= 1,
show: true
},
{
@@ -124,12 +101,10 @@ export function useTags() {
if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
if (Object.keys(route.query).length > 0) {
return isEqual(route.query, item.query) ? previous : next;
} else {
return isEqual(route.params, item.params) ? previous : next;
}
} else {
return route.path === item.path ? previous : next;
return isEqual(route.params, item.params) ? previous : next;
}
return route.path === item.path ? previous : next;
}
const iconIsActive = computed(() => {
@@ -165,34 +140,25 @@ export function useTags() {
visible.value = false;
};
/** 鼠标移入添加激活样式 */
function onMouseenter(index) {
if (index) activeIndex.value = index;
if (unref(showModel) === "smart") {
if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
return;
toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
toggleClass(false, "schedule-out", instance.refs["schedule" + index][0]);
} else {
if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
toggleClass(true, "card-in", instance.refs["dynamic" + index][0]);
toggleClass(false, "card-out", instance.refs["dynamic" + index][0]);
}
function getScheduleElement(index) {
const refs = instance?.refs[`schedule${index}`];
return Array.isArray(refs) ? refs[0] : refs;
}
function onMouseenter(index) {
if (index) activeIndex.value = index;
const scheduleEl = getScheduleElement(index);
if (!scheduleEl || hasClass(scheduleEl, "schedule-active")) return;
toggleClass(true, "schedule-in", scheduleEl);
toggleClass(false, "schedule-out", scheduleEl);
}
/** 鼠标移出恢复默认样式 */
function onMouseleave(index) {
activeIndex.value = -1;
if (unref(showModel) === "smart") {
if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
return;
toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
toggleClass(true, "schedule-out", instance.refs["schedule" + index][0]);
} else {
if (hasClass(instance.refs["dynamic" + index][0], "card-active")) return;
toggleClass(false, "card-in", instance.refs["dynamic" + index][0]);
toggleClass(true, "card-out", instance.refs["dynamic" + index][0]);
}
const scheduleEl = getScheduleElement(index);
if (!scheduleEl || hasClass(scheduleEl, "schedule-active")) return;
toggleClass(false, "schedule-in", scheduleEl);
toggleClass(true, "schedule-out", scheduleEl);
}
function onContentFullScreen() {
@@ -201,19 +167,6 @@ export function useTags() {
: pureSetting.changeSetting({ key: "hiddenSideBar", value: true });
}
onMounted(() => {
if (!showModel.value) {
const configure = storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}configure`
);
configure.showModel = "card";
storageLocal().setItem(
`${responsiveStorageNameSpace()}configure`,
configure
);
}
});
watch(
() => visible.value,
() => {
@@ -225,10 +178,8 @@ export function useTags() {
route,
router,
visible,
showTags,
instance,
multiTags,
showModel,
tagsViews,
buttonTop,
buttonLeft,
frontend/web/src/layout/index.vue
+2 -17
View File
@@ -7,7 +7,7 @@ import { useLayout } from "./hooks/useLayout";
import { useResizeObserver } from "@vueuse/core";
import { useAppStoreHook } from "@/store/modules/app";
import { useSettingStoreHook } from "@/store/modules/settings";
import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
import { deviceDetection, useGlobal } from "@pureadmin/utils";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import {
h,
@@ -22,13 +22,11 @@ import {
import navbar from "./components/navbar.vue";
import tag from "./components/tag/index.vue";
import appMain from "./components/appMain.vue";
import setting from "./components/setting/index.vue";
import Vertical from "./components/sidebar/vertical.vue";
import Horizontal from "./components/sidebar/horizontal.vue";
import backTop from "@/assets/svg/back_top.svg?component";
const appWrapperRef = ref();
const { isDark } = useDark();
const { layout } = useLayout();
const isMobile = deviceDetection();
const pureSetting = useSettingStoreHook();
@@ -54,10 +52,6 @@ const set: setType = reactive({
withoutAnimation: set.sidebar.withoutAnimation,
mobile: set.device === "mobile"
};
}),
hideTabs: computed(() => {
return $storage?.configure.hideTabs;
})
});
@@ -122,14 +116,7 @@ const layoutHeader = defineComponent({
return h(
"div",
{
class: { "fixed-header": set.fixedHeader },
style: [
set.hideTabs && layout.value.includes("horizontal")
? isDark.value
? "box-shadow: 0 1px 4px #0d0d0d"
: "box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08)"
: ""
]
class: { "fixed-header": set.fixedHeader }
},
{
default: () => [
@@ -188,8 +175,6 @@ const layoutHeader = defineComponent({
<app-main :fixed-header="set.fixedHeader" />
</el-scrollbar>
</div>
<!-- 系统设置 -->
<setting />
</div>
</template>
frontend/web/src/layout/types.ts
+1 -14
View File
@@ -1,18 +1,6 @@
import type { IconifyIcon } from "@iconify/vue";
const { VITE_HIDE_HOME } = import.meta.env;
export const routerArrays: Array<RouteConfigs> =
VITE_HIDE_HOME === "false"
? [
{
path: "/welcome",
meta: {
title: "首页",
icon: "homeFilled"
}
}
]
: [];
export const routerArrays: Array<RouteConfigs> = [];
export type routeMetaType = {
title?: string;
@@ -57,7 +45,6 @@ export interface setType {
withoutAnimation: boolean;
mobile: boolean;
};
hideTabs: boolean;
}
export type menuType = {
frontend/web/src/router/defaultEntry.ts
+1
View File
@@ -0,0 +1 @@
export const DEFAULT_ENTRY_PATH = "/collaboration/record/index";
frontend/web/src/router/index.ts
-6
View File
@@ -99,8 +99,6 @@ export function resetRouter() {
/** 路由白名单 */
const whiteList = ["/login"];
const { VITE_HIDE_HOME } = import.meta.env;
router.beforeEach((to: ToRouteType, _from, next) => {
if (to.meta?.keepAlive) {
handleAliveRoute(to, "add");
@@ -130,10 +128,6 @@ router.beforeEach((to: ToRouteType, _from, next) => {
if (to.meta?.roles && !isOneOfArray(to.meta?.roles, [userInfo.roleKey])) {
next({ path: "/error/403" });
}
// 开启隐藏首页后在浏览器地址栏手动输入首页welcome路由则跳转到404页面
if (VITE_HIDE_HOME === "true" && to.fullPath === "/welcome") {
next({ path: "/error/404" });
}
if (_from?.name) {
// name为超链接
if (externalLink) {
frontend/web/src/router/modules/home.ts
+5 -14
View File
@@ -1,25 +1,16 @@
const { VITE_HIDE_HOME } = import.meta.env;
import { DEFAULT_ENTRY_PATH } from "@/router/defaultEntry";
const Layout = () => import("@/layout/index.vue");
export default {
path: "/",
name: "Home",
component: Layout,
redirect: "/welcome",
redirect: DEFAULT_ENTRY_PATH,
meta: {
icon: "homeFilled",
title: "首页",
showLink: false,
rank: 0
},
children: [
{
path: "/welcome",
name: "Welcome",
component: () => import("@/views/welcome/index.vue"),
meta: {
title: "首页",
showLink: VITE_HIDE_HOME === "true" ? false : true
}
}
]
}
} as RouteConfigsTable;
frontend/web/src/router/utils.ts
+19 -4
View File
@@ -20,6 +20,7 @@ import { getConfig } from "@/config";
import { menuType } from "@/layout/types";
import { buildHierarchyTree } from "@/utils/tree";
import { sessionKey } from "@/utils/auth";
import { DEFAULT_ENTRY_PATH } from "@/router/defaultEntry";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { usePermissionStoreHook } from "@/store/modules/permission";
const IFrame = () => import("@/layout/frameView.vue");
@@ -364,10 +365,24 @@ function hasAuth(value: string | Array<string>): boolean {
return isAuths ? true : false;
}
/** 获取所有菜单中的第一个菜单（顶级菜单）*/
function getTopMenu(tag = false): menuType {
const topMenu = usePermissionStoreHook().wholeMenus[0]?.children[0];
tag && useMultiTagsStoreHook().handleTags("push", topMenu);
function findMenuByPath(menus: menuType[], path: string): menuType | undefined {
for (const menu of menus) {
if (menu.path === path) return menu;
const matched = findMenuByPath(menu.children ?? [], path);
if (matched) return matched;
}
}
/** 获取默认入口菜单 */
function getTopMenu(tag = false): menuType | undefined {
const wholeMenus = usePermissionStoreHook().wholeMenus;
const topMenu =
findMenuByPath(wholeMenus, DEFAULT_ENTRY_PATH) ??
wholeMenus[0]?.children?.[0] ??
wholeMenus[0];
if (tag && topMenu) {
useMultiTagsStoreHook().handleTags("push", topMenu);
}
return topMenu;
}
frontend/web/src/style/dark.scss
-11
View File
@@ -39,17 +39,6 @@ html.dark {
}
}
/* 项目配置面板 */
.right-panel-items {
.el-divider__text {
--el-bg-color: var(--el-bg-color);
}
.el-divider--horizontal {
border-top: none;
}
}
/* element-plus */
.el-table__cell {
background: var(--el-bg-color);
frontend/web/src/style/element-plus.scss
-1
View File
@@ -48,7 +48,6 @@
/* 自定义 tooltip 的类名 */
.pure-tooltip {
// 右侧操作面板right-panel类名的z-index为40000，tooltip需要大于它才能显示
z-index: 41000 !important;
}
frontend/web/src/style/index.scss
-12
View File
@@ -3,18 +3,6 @@
@import "./sidebar";
@import "./dark";
/* 自定义全局 CssVar */
:root {
/* 左侧菜单展开、收起动画时长 */
--pure-transition-duration: 0.3s;
}
/* 灰色模式 */
.html-grey {
filter: grayscale(100%);
}
/* 色弱模式 */
.html-weakness {
filter: invert(80%);
}
frontend/web/src/style/sidebar.scss
+4 -9
View File
@@ -440,8 +440,8 @@
/* 搜索 */
.search-container,
/* 告警 */
.dropdown-badge,
/* 暗黑模式 */
.header-dark-switch,
/* 用户名 */
.el-dropdown-link,
/* 设置 */
@@ -451,11 +451,6 @@
}
}
.dropdown-badge {
height: 48px;
color: $subMenuActiveText;
}
.el-dropdown-link {
display: flex;
align-items: center;
@@ -611,8 +606,8 @@ body[layout="vertical"] {
/* 搜索 */
.search-container,
/* 告警 */
.dropdown-badge,
/* 暗黑模式 */
.header-dark-switch,
/* 用户名 */
.el-dropdown-link,
/* 设置 */
frontend/web/src/utils/crypt.ts
+1 -1
View File
@@ -23,7 +23,7 @@ export function rsaEncrypt(txt): string {
return encryptedValue;
}
const aesKey = "agileboot1234567";
const aesKey = "collab_ledger123";
export function aesEncrypt(txt): string {
if (isEmpty(txt)) {
frontend/web/src/utils/http/index.ts
+1
View File
@@ -84,6 +84,7 @@ class PureHttp {
const whiteList = [
"/refreshToken",
"/login",
"/register",
"/captchaImage",
"/getConfig"
];
frontend/web/src/utils/mitt.ts
-4
View File
@@ -3,10 +3,6 @@ import mitt from "mitt";
/** 全局公共事件需要在此处添加类型 */
type Events = {
openPanel: string;
tagViewsChange: string;
tagViewsShowModel: string;
logoChange: boolean;
changLayoutRoute: string;
};
frontend/web/src/utils/responsive.ts
-5
View File
@@ -17,11 +17,6 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
epThemeColor: config.EpThemeColor ?? "#409EFF"
},
configure: Storage.getData("configure", nameSpace) ?? {
grey: config.Grey ?? false,
weak: config.Weak ?? false,
hideTabs: config.HideTabs ?? false,
showLogo: config.ShowLogo ?? true,
showModel: config.ShowModel ?? "smart",
multiTagsCache: config.MultiTagsCache ?? false
}
},
frontend/web/src/utils/tree.ts
+1 -1
View File
@@ -141,7 +141,7 @@ export const appendFieldByUniqueId = (
};
/**
* 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示
* 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构。
*（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理）
* 这个是pure作者留下的例子， 也可以通过设置disabled 对应的字段来实现 比如disabled: 'status' (需要后端的字段为true/false)
* @param treeList
frontend/web/src/views/collaboration/record/index.vue
+19
View File
@@ -30,6 +30,9 @@ const {
deadlineRange,
purchaseRange,
optionMap,
creatorOptions,
isAdmin,
getUserDisplayName,
multipleSelection,
onSearch,
onSortChanged,
@@ -93,6 +96,22 @@ function openDialog(
class="!w-[180px]"
/>
</el-form-item>
<el-form-item v-if="isAdmin" label="创建者" prop="creatorId">
<el-select
v-model="searchFormParams.creatorId"
placeholder="请选择创建者"
clearable
filterable
class="!w-[160px]"
>
<el-option
v-for="item in creatorOptions"
:key="item.userId"
:label="getUserDisplayName(item)"
:value="item.userId"
/>
</el-select>
</el-form-item>
<el-form-item label="合作平台" prop="cooperationPlatform">
<el-select
v-model="searchFormParams.cooperationPlatform"
frontend/web/src/views/collaboration/record/record-form-modal.vue
+346 -254
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import { computed, nextTick, onMounted, reactive, ref } from "vue";
import type { CSSProperties, Ref } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import type {
UploadFile,
@@ -26,6 +27,9 @@ interface Props {
}
const props = defineProps<Props>();
type TabName = "basic" | "tasks" | "expenditures" | "settlements";
const tabNames: TabName[] = ["basic", "tasks", "expenditures", "settlements"];
const defaultFormData = (): AddCollaborationRecordCommand &
Partial<UpdateCollaborationRecordCommand> => ({
@@ -53,6 +57,13 @@ const defaultFormData = (): AddCollaborationRecordCommand &
const formData = reactive(defaultFormData());
const formRef = ref<FormInstance>();
const activeTab = ref<TabName>("basic");
const basicPaneRef = ref<HTMLElement>();
const tasksPaneRef = ref<HTMLElement>();
const expendituresPaneRef = ref<HTMLElement>();
const settlementsPaneRef = ref<HTMLElement>();
const isMeasuringTabHeight = ref(false);
const tabContentHeight = ref(0);
const previewImageUrl = ref("");
const isImagePreviewVisible = ref(false);
@@ -82,12 +93,19 @@ const attachmentUploadFiles = computed<UploadUserFile[]>(() =>
url: getFileUrl(file)
}))
);
const recordTabsStyle = computed<CSSProperties>(() => {
if (!tabContentHeight.value) return {};
return {
"--record-tab-content-height": `${tabContentHeight.value}px`
} as CSSProperties;
});
async function handleOpened() {
resetFormData();
if (props.type === "update" && props.row?.recordId) {
await loadDetail(props.row.recordId);
}
await setFixedTabContentHeight();
}
function resetFormData() {
@@ -206,6 +224,33 @@ function getFileUrl(file: CollaborationFileCommand) {
return `${import.meta.env.VITE_APP_BASE_API}${file.fileName}`;
}
async function setFixedTabContentHeight() {
isMeasuringTabHeight.value = true;
await waitForTabRender();
const heights = tabNames.map(getTabContentHeight);
tabContentHeight.value = Math.max(...heights, 0);
isMeasuringTabHeight.value = false;
}
async function waitForTabRender() {
await nextTick();
await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
}
function getTabContentHeight(tabName: TabName) {
return getTabPaneRef(tabName).value?.scrollHeight ?? 0;
}
function getTabPaneRef(tabName: TabName): Ref<HTMLElement | undefined> {
const paneRefMap = {
basic: basicPaneRef,
tasks: tasksPaneRef,
expenditures: expendituresPaneRef,
settlements: settlementsPaneRef
};
return paneRefMap[tabName];
}
async function handleConfirm() {
const isValid = await formRef.value?.validate().catch(() => false);
if (!isValid) return false;
@@ -242,266 +287,283 @@ defineExpose({ handleConfirm });
:rules="rules"
label-width="112px"
>
<el-tabs>
<el-tab-pane label="基本信息">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item prop="brand" label="品牌" required>
<el-input v-model="formData.brand" placeholder="请输入品牌" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="goods" label="物品" required>
<el-input v-model="formData.goods" placeholder="请输入物品" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="cooperationPlatform" label="合作平台" required>
<el-select v-model="formData.cooperationPlatform" clearable>
<el-option
v-for="item in optionMap.cooperationPlatform"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="imageReturnNum" label="返图数量" required>
<el-input-number
:min="1"
controls-position="right"
v-model="formData.imageReturnNum"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="留存方式">
<el-select v-model="formData.retainedMethod">
<el-option
v-for="item in optionMap.retainedMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合作方式">
<el-select v-model="formData.cooperatedMethod">
<el-option
v-for="item in optionMap.cooperatedMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入方式">
<el-select v-model="formData.purchaseMethod">
<el-option
v-for="item in optionMap.purchaseMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入金额">
<el-input-number
:min="0"
controls-position="right"
v-model="formData.purchasePrice"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入平台">
<el-select v-model="formData.purchasePlatform" clearable>
<el-option
v-for="item in optionMap.purchasePlatform"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入日期">
<el-date-picker
v-model="formData.purchaseDate"
value-format="YYYY-MM-DD"
type="date"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="deadline" label="预完成日期" required>
<el-date-picker
v-model="formData.deadline"
value-format="YYYY-MM-DD"
type="date"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="稿费">
<el-input-number
:min="0"
controls-position="right"
v-model="formData.remuneration"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="物品图片">
<el-upload
multiple
accept="image/*"
class="goods-image-upload"
list-type="picture-card"
:file-list="goodsImageUploadFiles"
:http-request="option => handleUpload(option, 'GOODS_IMAGE')"
:on-preview="handlePreviewImage"
:on-remove="handleRemoveGoodsImage"
<el-tabs
v-model="activeTab"
class="record-tabs"
:class="{ 'is-measuring': isMeasuringTabHeight }"
:style="recordTabsStyle"
>
<el-tab-pane label="基本信息" name="basic">
<div ref="basicPaneRef" class="tab-pane-content">
<el-row :gutter="16">
<el-col :span="12">
<el-form-item prop="brand" label="品牌" required>
<el-input v-model="formData.brand" placeholder="请输入品牌" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="goods" label="物品" required>
<el-input v-model="formData.goods" placeholder="请输入物品" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
prop="cooperationPlatform"
label="合作平台"
required
>
<IconifyIconOffline class="upload-plus" :icon="Plus" />
</el-upload>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="附件">
<el-upload
multiple
class="attachment-upload"
:file-list="attachmentUploadFiles"
:http-request="option => handleUpload(option, 'ATTACHMENT')"
:on-preview="handlePreviewAttachment"
:on-remove="handleRemoveAttachment"
>
<el-button>上传附件</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="拍摄要求">
<el-input
type="textarea"
:rows="3"
v-model="formData.requirements"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注">
<el-input type="textarea" :rows="3" v-model="formData.remark" />
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="笔记任务">
<el-button type="primary" plain @click="addTask">添加笔记</el-button>
<div
v-for="(item, index) in formData.tasks"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.releaseDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="发布日期"
/>
<el-button type="danger" link @click="removeTask(index)"
>删除</el-button
>
<el-select v-model="formData.cooperationPlatform" clearable>
<el-option
v-for="item in optionMap.cooperationPlatform"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="imageReturnNum" label="返图数量" required>
<el-input-number
:min="1"
controls-position="right"
v-model="formData.imageReturnNum"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="留存方式">
<el-select v-model="formData.retainedMethod">
<el-option
v-for="item in optionMap.retainedMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合作方式">
<el-select v-model="formData.cooperatedMethod">
<el-option
v-for="item in optionMap.cooperatedMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入方式">
<el-select v-model="formData.purchaseMethod">
<el-option
v-for="item in optionMap.purchaseMethod"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入金额">
<el-input-number
:min="0"
controls-position="right"
v-model="formData.purchasePrice"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入平台">
<el-select v-model="formData.purchasePlatform" clearable>
<el-option
v-for="item in optionMap.purchasePlatform"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购入日期">
<el-date-picker
v-model="formData.purchaseDate"
value-format="YYYY-MM-DD"
type="date"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="deadline" label="预完成日期" required>
<el-date-picker
v-model="formData.deadline"
value-format="YYYY-MM-DD"
type="date"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="稿费">
<el-input-number
:min="0"
controls-position="right"
v-model="formData.remuneration"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="物品图片">
<el-upload
multiple
accept="image/*"
class="goods-image-upload"
list-type="picture-card"
:file-list="goodsImageUploadFiles"
:http-request="option => handleUpload(option, 'GOODS_IMAGE')"
:on-preview="handlePreviewImage"
:on-remove="handleRemoveGoodsImage"
>
<IconifyIconOffline class="upload-plus" :icon="Plus" />
</el-upload>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="附件">
<el-upload
multiple
class="attachment-upload"
:file-list="attachmentUploadFiles"
:http-request="option => handleUpload(option, 'ATTACHMENT')"
:on-preview="handlePreviewAttachment"
:on-remove="handleRemoveAttachment"
>
<el-button>上传附件</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="拍摄要求">
<el-input
type="textarea"
:rows="3"
v-model="formData.requirements"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注">
<el-input type="textarea" :rows="3" v-model="formData.remark" />
</el-form-item>
</el-col>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane label="支出信息">
<el-button type="primary" plain @click="addExpenditure"
>添加支出</el-button
>
<div
v-for="(item, index) in formData.expenditures"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.spendDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="支出日期"
/>
<el-input-number
:min="0"
controls-position="right"
v-model="item.amount"
placeholder="金额"
/>
<el-select v-model="item.purpose" placeholder="用途" clearable>
<el-option
v-for="option in optionMap.expenditurePurpose"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-button type="danger" link @click="removeExpenditure(index)"
>删除</el-button
<el-tab-pane label="笔记任务" name="tasks">
<div ref="tasksPaneRef" class="tab-pane-content">
<el-button type="primary" plain @click="addTask">添加笔记</el-button>
<div
v-for="(item, index) in formData.tasks"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.releaseDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="发布日期"
/>
<el-button type="danger" link @click="removeTask(index)"
>删除</el-button
>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="结款信息">
<el-button type="primary" plain @click="addSettlement"
>添加结款</el-button
>
<div
v-for="(item, index) in formData.settlements"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.settleDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="结款日期"
/>
<el-select v-model="item.method" placeholder="方式" clearable>
<el-option
v-for="option in optionMap.settlementMethod"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-input-number
:min="0"
controls-position="right"
v-model="item.income"
placeholder="金额"
/>
<el-select v-model="item.purpose" placeholder="用途" clearable>
<el-option
v-for="option in optionMap.settlementPurpose"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-button type="danger" link @click="removeSettlement(index)"
>删除</el-button
<el-tab-pane label="支出信息" name="expenditures">
<div ref="expendituresPaneRef" class="tab-pane-content">
<el-button type="primary" plain @click="addExpenditure"
>添加支出</el-button
>
<div
v-for="(item, index) in formData.expenditures"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.spendDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="支出日期"
/>
<el-input-number
:min="0"
controls-position="right"
v-model="item.amount"
placeholder="金额"
/>
<el-select v-model="item.purpose" placeholder="用途" clearable>
<el-option
v-for="option in optionMap.expenditurePurpose"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-button type="danger" link @click="removeExpenditure(index)"
>删除</el-button
>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="结款信息" name="settlements">
<div ref="settlementsPaneRef" class="tab-pane-content">
<el-button type="primary" plain @click="addSettlement"
>添加结款</el-button
>
<div
v-for="(item, index) in formData.settlements"
:key="index"
class="line-item"
>
<el-date-picker
v-model="item.settleDate"
value-format="YYYY-MM-DD"
type="date"
placeholder="结款日期"
/>
<el-select v-model="item.method" placeholder="方式" clearable>
<el-option
v-for="option in optionMap.settlementMethod"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-input-number
:min="0"
controls-position="right"
v-model="item.income"
placeholder="金额"
/>
<el-select v-model="item.purpose" placeholder="用途" clearable>
<el-option
v-for="option in optionMap.settlementPurpose"
:key="option"
:label="option"
:value="option"
/>
</el-select>
<el-button type="danger" link @click="removeSettlement(index)"
>删除</el-button
>
</div>
</div>
</el-tab-pane>
</el-tabs>
@@ -531,6 +593,36 @@ defineExpose({ handleConfirm });
}
}
.record-tabs {
:deep(.el-tabs__content) {
height: var(--record-tab-content-height, auto);
max-height: calc(88vh - 190px);
overflow-y: auto;
}
&.is-measuring {
:deep(.el-tabs__content) {
position: relative;
visibility: hidden;
}
:deep(.el-tab-pane) {
position: absolute;
display: block !important;
width: 100%;
visibility: hidden;
}
:deep(.el-tab-pane.is-active) {
position: static;
}
}
}
.tab-pane-content {
padding-right: 4px;
}
.goods-image-upload {
:deep(.el-upload--picture-card),
:deep(.el-upload-list--picture-card .el-upload-list__item) {
frontend/web/src/views/collaboration/record/utils/hook.tsx
+52 -4
View File
@@ -1,9 +1,11 @@
import dayjs from "dayjs";
import { message } from "@/utils/message";
import { ElMessageBox, Sort } from "element-plus";
import { computed, onMounted, reactive, ref, toRaw } from "vue";
import { computed, onMounted, reactive, ref, toRaw, unref } from "vue";
import { CommonUtils } from "@/utils/common";
import { PaginationProps } from "@pureadmin/table";
import { getUserListApi, UserDTO } from "@/api/system/user";
import { useUserStoreHook } from "@/store/modules/user";
import {
CollaborationOptionResponse,
CollaborationRecordListCommand,
@@ -20,7 +22,14 @@ const statusTypeMap = {
PARTIAL: "warning"
};
function getUserDisplayName(user: UserDTO) {
return user.nickname || user.username || "";
}
export function useCollaborationRecordHook() {
const userStore = useUserStoreHook();
const isAdmin = computed(() => userStore.roles?.includes("admin"));
const defaultSort: Sort = {
prop: "deadline",
order: "descending"
@@ -36,6 +45,7 @@ export function useCollaborationRecordHook() {
const searchFormParams = reactive<CollaborationRecordListCommand>({
brand: "",
goods: "",
creatorId: undefined,
cooperationPlatform: undefined
});
@@ -55,6 +65,7 @@ export function useCollaborationRecordHook() {
const dataList = ref<CollaborationRecordPageResponse[]>([]);
const optionMap = ref<Record<string, string[]>>({});
const creatorOptions = ref<UserDTO[]>([]);
const pageLoading = ref(true);
const multipleSelection = ref<number[]>([]);
const sortState = ref<Sort>(defaultSort);
@@ -63,6 +74,12 @@ export function useCollaborationRecordHook() {
{ type: "selection", align: "left" },
{ label: "品牌", prop: "brand", minWidth: 120 },
{ label: "物品", prop: "goods", minWidth: 120 },
{
label: "创建者",
prop: "creatorName",
minWidth: 110,
hide: !isAdmin.value
},
{ label: "合作平台", prop: "cooperationPlatform", minWidth: 110 },
{ label: "留存方式", prop: "retainedMethod", minWidth: 100 },
{ label: "购入方式", prop: "purchaseMethod", minWidth: 100 },
@@ -126,8 +143,9 @@ export function useCollaborationRecordHook() {
function renderStatus(status, size) {
if (!status) return "";
const type = statusTypeMap[status.status] || "info";
return (
<el-tag size={size} type={statusTypeMap[status.status]} effect="plain">
<el-tag size={size} type={type} effect="plain">
{status.label}
</el-tag>
);
@@ -140,7 +158,27 @@ export function useCollaborationRecordHook() {
}
async function onSearch(tableRef) {
tableRef.getTableRef().sort("deadline", "descending");
pagination.currentPage = 1;
const shouldResetSort = !isDefaultSort(sortState.value);
sortState.value = defaultSort;
if (shouldResetSort && sortByDefault(tableRef)) return;
await getRecordList();
}
function isDefaultSort(sort: Sort) {
return sort.prop === defaultSort.prop && sort.order === defaultSort.order;
}
function sortByDefault(tableRef) {
const tableInstance = getTableInstance(tableRef);
if (!tableInstance?.sort) return false;
tableInstance.sort(defaultSort.prop, defaultSort.order);
return true;
}
function getTableInstance(tableRef) {
return unref(tableRef)?.getTableRef?.();
}
function resetForm(formEl, tableRef) {
@@ -175,6 +213,12 @@ export function useCollaborationRecordHook() {
);
}
async function getCreatorOptions() {
if (!isAdmin.value) return;
const { data } = await getUserListApi({ pageNum: 1, pageSize: 1000 });
creatorOptions.value = data.rows;
}
async function handleDelete(row: CollaborationRecordPageResponse) {
await deleteCollaborationRecordApi([row.recordId]);
message(`您删除了编号为${row.recordId}的合作记录`, { type: "success" });
@@ -203,7 +247,7 @@ export function useCollaborationRecordHook() {
.then(deleteSelectedRecords)
.catch(() => {
message("取消删除", { type: "info" });
tableRef.getTableRef().clearSelection();
getTableInstance(tableRef)?.clearSelection?.();
});
}
@@ -217,6 +261,7 @@ export function useCollaborationRecordHook() {
onMounted(() => {
getOptions();
getCreatorOptions();
getRecordList();
});
@@ -230,6 +275,9 @@ export function useCollaborationRecordHook() {
deadlineRange,
purchaseRange,
optionMap,
creatorOptions,
isAdmin,
getUserDisplayName,
multipleSelection,
onSearch,
onSortChanged,
frontend/web/src/views/collaboration/statistics/index.vue
+45 -14
View File
@@ -5,8 +5,16 @@ defineOptions({
name: "CollaborationStatistics"
});
const { chartRef, selectedYear, yearOptions, getStatistics } =
useCollaborationStatisticsHook();
const {
chartRef,
selectedYear,
selectedCreatorId,
yearOptions,
creatorOptions,
isAdmin,
getUserDisplayName,
getStatistics
} = useCollaborationStatisticsHook();
</script>
<template>
@@ -15,18 +23,36 @@ const { chartRef, selectedYear, yearOptions, getStatistics } =
<template #header>
<div class="card-header">
<span>月度统计</span>
<el-select
v-model="selectedYear"
class="!w-[140px]"
@change="getStatistics"
>
<el-option
v-for="year in yearOptions"
:key="year"
:label="`${year}年`"
:value="year"
/>
</el-select>
<div class="filters">
<el-select
v-if="isAdmin"
v-model="selectedCreatorId"
placeholder="全部用户"
clearable
filterable
class="!w-[160px]"
@change="getStatistics"
>
<el-option
v-for="user in creatorOptions"
:key="user.userId"
:label="getUserDisplayName(user)"
:value="user.userId"
/>
</el-select>
<el-select
v-model="selectedYear"
class="!w-[140px]"
@change="getStatistics"
>
<el-option
v-for="year in yearOptions"
:key="year"
:label="`${year}年`"
:value="year"
/>
</el-select>
</div>
</div>
</template>
<div ref="chartRef" class="chart" />
@@ -41,6 +67,11 @@ const { chartRef, selectedYear, yearOptions, getStatistics } =
justify-content: space-between;
}
.filters {
display: flex;
gap: 12px;
}
.chart {
width: 100%;
height: 600px;
frontend/web/src/views/collaboration/statistics/utils/hook.ts
+31 -6
View File
@@ -1,10 +1,19 @@
import { onMounted, ref } from "vue";
import { computed, onMounted, ref } from "vue";
import * as echarts from "echarts";
import { getCollaborationMonthlyStatisticsApi } from "@/api/collaboration/record";
import {
CollaborationMonthlyStatisticsResponse,
getCollaborationMonthlyStatisticsApi
} from "@/api/collaboration/record";
import { getUserListApi, UserDTO } from "@/api/system/user";
import { useUserStoreHook } from "@/store/modules/user";
export function useCollaborationStatisticsHook() {
const userStore = useUserStoreHook();
const isAdmin = computed(() => userStore.roles?.includes("admin"));
const currentYear = new Date().getFullYear();
const selectedYear = ref(currentYear);
const selectedCreatorId = ref<number>();
const creatorOptions = ref<UserDTO[]>([]);
const yearOptions = Array.from(
{ length: currentYear - 2012 },
(_, index) => currentYear - index
@@ -13,13 +22,24 @@ export function useCollaborationStatisticsHook() {
let chart: echarts.ECharts | undefined;
async function getStatistics() {
const { data } = await getCollaborationMonthlyStatisticsApi(
selectedYear.value
);
const { data } = await getCollaborationMonthlyStatisticsApi({
year: selectedYear.value,
creatorId: selectedCreatorId.value
});
renderChart(data);
}
function renderChart(data) {
async function getCreatorOptions() {
if (!isAdmin.value) return;
const { data } = await getUserListApi({ pageNum: 1, pageSize: 1000 });
creatorOptions.value = data.rows;
}
function getUserDisplayName(user: UserDTO) {
return user.nickname || user.username || "";
}
function renderChart(data: CollaborationMonthlyStatisticsResponse[]) {
chart?.dispose();
chart = echarts.init(chartRef.value);
chart.setOption({
@@ -71,6 +91,7 @@ export function useCollaborationStatisticsHook() {
}
onMounted(() => {
getCreatorOptions();
getStatistics();
window.addEventListener("resize", resizeChart);
});
@@ -78,7 +99,11 @@ export function useCollaborationStatisticsHook() {
return {
chartRef,
selectedYear,
selectedCreatorId,
yearOptions,
creatorOptions,
isAdmin,
getUserDisplayName,
getStatistics
};
}
frontend/web/src/views/login/components/phone.vue
-106
View File
@@ -1,106 +0,0 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { message } from "@/utils/message";
import { phoneRules } from "../utils/rule";
import type { FormInstance } from "element-plus";
import { useVerifyCode } from "../utils/verifyCode";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Iphone from "@iconify-icons/ep/iphone";
defineProps({
currentPage: {
type: Number,
default: 1
}
});
const $pageEmit = defineEmits(["update:currentPage"]);
const loading = ref(false);
const ruleForm = reactive({
phone: "",
verifyCode: ""
});
const ruleFormRef = ref<FormInstance>();
const { isDisabled, text } = useVerifyCode();
const onLogin = async (formEl: FormInstance | undefined) => {
loading.value = true;
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
// 模拟登录请求，需根据实际开发进行修改
setTimeout(() => {
message("登录成功", { type: "success" });
loading.value = false;
}, 2000);
} else {
loading.value = false;
return fields;
}
});
};
function onBack() {
useVerifyCode().end();
$pageEmit("update:currentPage", 0);
}
</script>
<template>
<el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules" size="large">
<Motion>
<el-form-item prop="phone">
<el-input
clearable
v-model="ruleForm.phone"
placeholder="手机号码"
:prefix-icon="useRenderIcon(Iphone)"
/>
</el-form-item>
</Motion>
<Motion :delay="100">
<el-form-item prop="verifyCode">
<div class="flex justify-between w-full">
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
/>
<el-button
:disabled="isDisabled"
class="ml-2"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
</el-button>
</div>
</el-form-item>
</Motion>
<Motion :delay="150">
<el-form-item>
<el-button
class="w-full"
size="default"
type="primary"
:loading="loading"
@click="onLogin(ruleFormRef)"
>
登录
</el-button>
</el-form-item>
</Motion>
<Motion :delay="200">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
返回
</el-button>
</el-form-item>
</Motion>
</el-form>
</template>
frontend/web/src/views/login/components/qrCode.vue
-27
View File
@@ -1,27 +0,0 @@
<script setup lang="ts">
import Motion from "../utils/motion";
import ReQrcode from "@/components/ReQrcode";
defineProps({
currentPage: {
type: Number,
default: 2
}
});
const $pageEmit = defineEmits(["update:currentPage"]);
</script>
<template>
<Motion class="-mt-2 -mb-2"> <ReQrcode text="模拟测试" /> </Motion>
<Motion :delay="100">
<el-divider>
<p class="text-xs text-gray-500">{{ '扫码后点击"确认",即可完成登录' }}</p>
</el-divider>
</Motion>
<Motion :delay="150">
<el-button class="w-full mt-4" @click="$pageEmit('update:currentPage', 0)">
返回
</el-button>
</Motion>
</template>
frontend/web/src/views/login/components/register.vue
-189
View File
@@ -1,189 +0,0 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { message } from "@/utils/message";
import { updateRules } from "../utils/rule";
import type { FormInstance } from "element-plus";
import { useVerifyCode } from "../utils/verifyCode";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Lock from "@iconify-icons/ri/lock-fill";
import Iphone from "@iconify-icons/ep/iphone";
import User from "@iconify-icons/ri/user-3-fill";
defineProps({
currentPage: {
type: Number,
default: 3
}
});
const $pageEmit = defineEmits(["update:currentPage"]);
const checked = ref(false);
const loading = ref(false);
const ruleForm = reactive({
username: "",
phone: "",
verifyCode: "",
password: "",
repeatPassword: ""
});
const ruleFormRef = ref<FormInstance>();
const { isDisabled, text } = useVerifyCode();
const repeatPasswordRule = [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入确认密码"));
} else if (ruleForm.password !== value) {
callback(new Error("两次密码不一致"));
} else {
callback();
}
},
trigger: "blur"
}
];
const onUpdate = async (formEl: FormInstance | undefined) => {
loading.value = true;
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
if (checked.value) {
// 模拟请求，需根据实际开发进行修改
setTimeout(() => {
message("注册成功", {
type: "success"
});
loading.value = false;
}, 2000);
} else {
loading.value = false;
message("请勾选隐私政策", { type: "warning" });
}
} else {
loading.value = false;
return fields;
}
});
};
function onBack() {
useVerifyCode().end();
$pageEmit("update:currentPage", 0);
}
</script>
<template>
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="updateRules"
size="large"
>
<Motion>
<el-form-item
:rules="[
{
required: true,
message: '请输入账号',
trigger: 'blur'
}
]"
prop="username"
>
<el-input
clearable
v-model="ruleForm.username"
placeholder="账号"
:prefix-icon="useRenderIcon(User)"
/>
</el-form-item>
</Motion>
<Motion :delay="100">
<el-form-item prop="phone">
<el-input
clearable
v-model="ruleForm.phone"
placeholder="手机号码"
:prefix-icon="useRenderIcon(Iphone)"
/>
</el-form-item>
</Motion>
<Motion :delay="150">
<el-form-item prop="verifyCode">
<div class="flex justify-between w-full">
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
/>
<el-button
:disabled="isDisabled"
class="ml-2"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
</el-button>
</div>
</el-form-item>
</Motion>
<Motion :delay="200">
<el-form-item prop="password">
<el-input
clearable
show-password
v-model="ruleForm.password"
placeholder="密码"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
</Motion>
<Motion :delay="250">
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
<el-input
clearable
show-password
v-model="ruleForm.repeatPassword"
placeholder="确认密码"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
</Motion>
<Motion :delay="300">
<el-form-item>
<el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox>
<el-button link type="primary"> 隐私政策 </el-button>
</el-form-item>
</Motion>
<Motion :delay="350">
<el-form-item>
<el-button
class="w-full"
size="default"
type="primary"
:loading="loading"
@click="onUpdate(ruleFormRef)"
>
确定
</el-button>
</el-form-item>
</Motion>
<Motion :delay="400">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
返回
</el-button>
</el-form-item>
</Motion>
</el-form>
</template>
frontend/web/src/views/login/components/resetPassword.vue
-154
View File
@@ -1,154 +0,0 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { message } from "@/utils/message";
import { updateRules } from "../utils/rule";
import type { FormInstance } from "element-plus";
import { useVerifyCode } from "../utils/verifyCode";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Lock from "@iconify-icons/ri/lock-fill";
import Iphone from "@iconify-icons/ep/iphone";
defineProps({
currentPage: {
type: Number,
default: 4
}
});
const $pageEmit = defineEmits(["update:currentPage"]);
const loading = ref(false);
const ruleForm = reactive({
phone: "",
verifyCode: "",
password: "",
repeatPassword: ""
});
const ruleFormRef = ref<FormInstance>();
const { isDisabled, text } = useVerifyCode();
const repeatPasswordRule = [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入确认密码"));
} else if (ruleForm.password !== value) {
callback(new Error("两次密码不一致"));
} else {
callback();
}
},
trigger: "blur"
}
];
const onUpdate = async (formEl: FormInstance | undefined) => {
loading.value = true;
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
// 模拟请求，需根据实际开发进行修改
setTimeout(() => {
message("修改密码成功", {
type: "success"
});
loading.value = false;
}, 2000);
} else {
loading.value = false;
return fields;
}
});
};
function onBack() {
useVerifyCode().end();
$pageEmit("update:currentPage", 0);
}
</script>
<template>
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="updateRules"
size="large"
>
<Motion>
<el-form-item prop="phone">
<el-input
clearable
v-model="ruleForm.phone"
placeholder="手机号码"
:prefix-icon="useRenderIcon(Iphone)"
/>
</el-form-item>
</Motion>
<Motion :delay="100">
<el-form-item prop="verifyCode">
<div class="flex justify-between w-full">
<el-input
clearable
v-model="ruleForm.verifyCode"
placeholder="短信验证码"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
/>
<el-button
:disabled="isDisabled"
class="ml-2"
@click="useVerifyCode().start(ruleFormRef, 'phone')"
>
{{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
</el-button>
</div>
</el-form-item>
</Motion>
<Motion :delay="150">
<el-form-item prop="password">
<el-input
clearable
show-password
v-model="ruleForm.password"
placeholder="密码"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
</Motion>
<Motion :delay="200">
<el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
<el-input
clearable
show-password
v-model="ruleForm.repeatPassword"
placeholder="确认密码"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
</Motion>
<Motion :delay="250">
<el-form-item>
<el-button
class="w-full"
size="default"
type="primary"
:loading="loading"
@click="onUpdate(ruleFormRef)"
>
确定
</el-button>
</el-form-item>
</Motion>
<Motion :delay="300">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
返回
</el-button>
</el-form-item>
</Motion>
</el-form>
</template>
frontend/web/src/views/login/index.vue
+296 -91
View File
@@ -11,21 +11,19 @@ import {
import Motion from "./utils/motion";
import { useRouter } from "vue-router";
import { message } from "@/utils/message";
import { loginRules } from "./utils/rule";
import phone from "./components/phone.vue";
import { buildRegisterRules, loginRules } from "./utils/rule";
import TypeIt from "@/components/ReTypeit";
import qrCode from "./components/qrCode.vue";
import register from "./components/register.vue";
import resetPassword from "./components/resetPassword.vue";
import { useNav } from "@/layout/hooks/useNav";
import type { FormInstance } from "element-plus";
import { operates, thirdParty } from "./utils/enums";
import { ElMessage } from "element-plus";
import { useLayout } from "@/layout/hooks/useLayout";
import { rsaEncrypt } from "@/utils/crypt";
import { getTopMenu, initRouter } from "@/router/utils";
import { findRouteByPath, initRouter } from "@/router/utils";
import { avatar, bg, illustration } from "./utils/static";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import { DEFAULT_ENTRY_PATH } from "@/router/defaultEntry";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import {
getIsRememberMe,
getPassword,
@@ -50,13 +48,14 @@ defineOptions({
const captchaCodeBase64 = ref("");
const isCaptchaOn = ref(false);
const isRegisterUserOn = ref(true);
const isRegisterMode = ref(false);
const router = useRouter();
const loading = ref(false);
const isRememberMe = ref(false);
const ruleFormRef = ref<FormInstance>();
// 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
const currentPage = ref(0);
const registerFormRef = ref<FormInstance>();
const { initStorage } = useLayout();
initStorage();
@@ -66,51 +65,141 @@ dataThemeChange();
const { title } = useNav();
const ruleForm = reactive({
username: "admin",
username: "",
password: getPassword(),
captchaCode: "",
captchaCodeKey: ""
});
const onLogin = async (formEl: FormInstance | undefined) => {
loading.value = true;
const registerForm = reactive({
username: "",
nickname: "",
password: "",
confirmPassword: "",
email: "",
phoneNumber: "",
captchaCode: "",
captchaCodeKey: ""
});
const registerRules = buildRegisterRules(() => registerForm.password);
const onLogin = async () => {
const formEl = ruleFormRef.value;
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
CommonAPI.loginByPassword({
username: ruleForm.username,
password: rsaEncrypt(ruleForm.password),
captchaCode: ruleForm.captchaCode,
captchaCodeKey: ruleForm.captchaCodeKey
})
.then(({ data }) => {
// 登录成功后 将token存储到sessionStorage中
setTokenFromBackend(data);
// 获取后端路由
initRouter().then(() => {
router.push(getTopMenu(true).path);
message("登录成功", { type: "success" });
});
if (isRememberMe.value) {
savePassword(ruleForm.password);
}
})
.catch(() => {
loading.value = false;
//如果登陆失败则重新获取验证码
getCaptchaCode();
});
} else {
loading.value = false;
return fields;
}
});
loading.value = true;
const isValid = await formEl.validate().catch(() => false);
if (!isValid) {
loading.value = false;
return;
}
await submitLogin();
};
async function submitLogin() {
try {
const { data } = await CommonAPI.loginByPassword({
username: ruleForm.username,
password: rsaEncrypt(ruleForm.password),
captchaCode: ruleForm.captchaCode,
captchaCodeKey: ruleForm.captchaCodeKey
});
await handleLoginSuccess(data, "", "登录成功");
saveRememberedPassword();
} catch {
loading.value = false;
await getCaptchaCode();
}
}
const onRegister = async () => {
const formEl = registerFormRef.value;
if (!formEl) {
ElMessage.error("注册表单未初始化，请刷新页面后重试");
return;
}
loading.value = true;
const isValid = await formEl.validate().catch(() => false);
if (!isValid) {
loading.value = false;
ElMessage.error("请检查注册表单信息");
return;
}
await submitRegister();
};
async function submitRegister() {
try {
const command = toRegisterCommand();
const { data } = await CommonAPI.registerUser(command);
await handleLoginSuccess(data, DEFAULT_ENTRY_PATH, "注册成功");
} catch (error) {
loading.value = false;
await getCaptchaCode();
if (error instanceof Error) {
ElMessage.error(error.message);
}
}
}
function toRegisterCommand() {
assertRegisterFormReady();
return {
username: registerForm.username,
nickname: registerForm.nickname,
password: rsaEncrypt(registerForm.password),
confirmPassword: rsaEncrypt(registerForm.confirmPassword),
email: registerForm.email,
phoneNumber: registerForm.phoneNumber,
captchaCode: registerForm.captchaCode,
captchaCodeKey: registerForm.captchaCodeKey
};
}
function assertRegisterFormReady() {
if (!registerForm.username || !registerForm.password) {
throw new Error("请输入账号和密码");
}
if (registerForm.password !== registerForm.confirmPassword) {
throw new Error("两次输入的密码不一致");
}
}
async function handleLoginSuccess(
data: CommonAPI.TokenDTO,
path: string,
successMessage: string
) {
setTokenFromBackend(data);
await initRouter();
const entryPath = path || DEFAULT_ENTRY_PATH;
pushEntryTag(entryPath);
router.push(entryPath);
message(successMessage, { type: "success" });
}
function pushEntryTag(entryPath: string) {
const children = router.options.routes[0]?.children ?? [];
const route = findRouteByPath(entryPath, children);
if (!route?.meta?.title) return;
const { path, name, meta } = route;
useMultiTagsStoreHook().handleTags("push", { path, name, meta });
}
function saveRememberedPassword() {
if (isRememberMe.value) {
savePassword(ruleForm.password);
}
}
/** 使用公共函数，避免`removeEventListener`失效 */
function onkeypress({ code }: KeyboardEvent) {
if (code === "Enter") {
onLogin(ruleFormRef.value);
if (isRegisterMode.value) {
onRegister();
return;
}
onLogin();
}
}
@@ -118,11 +207,32 @@ async function getCaptchaCode() {
if (isCaptchaOn.value) {
await CommonAPI.getCaptchaCode().then(res => {
captchaCodeBase64.value = `data:image/gif;base64,${res.data.captchaCodeImg}`;
ruleForm.captchaCodeKey = res.data.captchaCodeKey;
setCaptchaCodeKey(res.data.captchaCodeKey);
});
}
}
function setCaptchaCodeKey(captchaCodeKey: string) {
if (isRegisterMode.value) {
registerForm.captchaCodeKey = captchaCodeKey;
return;
}
ruleForm.captchaCodeKey = captchaCodeKey;
}
function switchMode(isRegister: boolean) {
isRegisterMode.value = isRegister;
clearCaptchaCode();
getCaptchaCode();
}
function clearCaptchaCode() {
ruleForm.captchaCode = "";
ruleForm.captchaCodeKey = "";
registerForm.captchaCode = "";
registerForm.captchaCodeKey = "";
}
watch(isRememberMe, newVal => {
saveIsRememberMe(newVal);
if (newVal === false) {
@@ -133,6 +243,7 @@ watch(isRememberMe, newVal => {
onBeforeMount(async () => {
await CommonAPI.getConfig().then(res => {
isCaptchaOn.value = res.data.isCaptchaOn;
isRegisterUserOn.value = res.data.isRegisterUserOn !== false;
useUserStoreHook().SET_DICTIONARY(res.data.dictionary);
});
@@ -182,7 +293,7 @@ onBeforeUnmount(() => {
</Motion>
<el-form
v-if="currentPage === 0"
v-if="!isRegisterMode"
ref="ruleFormRef"
:model="ruleForm"
:rules="loginRules"
@@ -251,80 +362,174 @@ onBeforeUnmount(() => {
<el-form-item>
<div class="w-full h-[20px] flex justify-between items-center">
<el-checkbox v-model="isRememberMe"> 记住密码</el-checkbox>
<el-button link type="primary" @click="currentPage = 4">
忘记密码
<el-button
v-if="isRegisterUserOn"
link
native-type="button"
type="primary"
@click.prevent="switchMode(true)"
>
注册账号
</el-button>
</div>
<el-button
:loading="loading"
class="w-full mt-4"
native-type="button"
size="default"
type="primary"
@click="onLogin(ruleFormRef)"
@click.prevent="onLogin"
>
登录
</el-button>
</el-form-item>
</Motion>
</el-form>
<el-form
v-else
ref="registerFormRef"
:model="registerForm"
:rules="registerRules"
size="large"
>
<Motion :delay="100">
<el-form-item prop="username">
<el-input
v-model="registerForm.username"
:prefix-icon="useRenderIcon(User)"
clearable
placeholder="账号"
/>
</el-form-item>
</Motion>
<Motion :delay="150">
<el-form-item prop="nickname">
<el-input
v-model="registerForm.nickname"
:prefix-icon="useRenderIcon('ri:user-smile-line')"
clearable
placeholder="昵称"
/>
</el-form-item>
</Motion>
<Motion :delay="200">
<el-form-item prop="password">
<el-input
v-model="registerForm.password"
:prefix-icon="useRenderIcon(Lock)"
clearable
placeholder="密码"
show-password
/>
</el-form-item>
</Motion>
<Motion :delay="250">
<el-form-item prop="confirmPassword">
<el-input
v-model="registerForm.confirmPassword"
:prefix-icon="useRenderIcon(Lock)"
clearable
placeholder="确认密码"
show-password
/>
</el-form-item>
</Motion>
<Motion :delay="300">
<el-form-item prop="email">
<el-input
v-model="registerForm.email"
:prefix-icon="useRenderIcon('ri:mail-line')"
clearable
placeholder="邮箱"
/>
</el-form-item>
</Motion>
<Motion :delay="350">
<el-form-item prop="phoneNumber">
<el-input
v-model="registerForm.phoneNumber"
:prefix-icon="useRenderIcon('ri:phone-line')"
clearable
placeholder="手机号"
/>
</el-form-item>
</Motion>
<Motion :delay="400">
<el-form-item
v-if="isCaptchaOn"
:rules="[
{
required: true,
message: '请输入验证码',
trigger: 'blur'
}
]"
prop="captchaCode"
>
<el-input
v-model="registerForm.captchaCode"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
clearable
placeholder="验证码"
>
<template v-slot:append>
<el-image
:src="captchaCodeBase64"
style="
justify-content: center;
width: 120px;
height: 40px;
"
@click="getCaptchaCode"
>
<template #error>
<span>Loading</span>
</template>
</el-image>
</template>
</el-input>
</el-form-item>
</Motion>
<Motion :delay="450">
<el-form-item>
<div class="w-full h-[20px] flex justify-between items-center">
<div class="w-full h-[20px] flex justify-end items-center">
<el-button
v-for="(item, index) in operates"
:key="index"
class="w-full mt-4"
size="default"
@click="currentPage = item.page"
link
native-type="button"
type="primary"
@click.prevent="switchMode(false)"
>
{{ item.title }}
返回登录
</el-button>
</div>
<el-button
:loading="loading"
class="w-full mt-4"
native-type="button"
size="default"
type="primary"
@click.prevent="onRegister"
>
注册
</el-button>
</el-form-item>
</Motion>
</el-form>
<Motion v-if="currentPage === 0" :delay="350">
<el-form-item>
<el-divider>
<p class="text-xs text-gray-500">{{ "第三方登录" }}</p>
</el-divider>
<div class="flex w-full justify-evenly">
<span
v-for="(item, index) in thirdParty"
:key="index"
:title="item.title"
>
<IconifyIconOnline
:icon="`ri:${item.icon}-fill`"
class="text-gray-500 cursor-pointer hover:text-blue-400"
width="20"
/>
</span>
</div>
</el-form-item>
</Motion>
<!-- 手机号登录 -->
<phone v-if="currentPage === 1" v-model:current-page="currentPage" />
<!-- 二维码登录 -->
<qrCode v-if="currentPage === 2" v-model:current-page="currentPage" />
<!-- 注册 -->
<register
v-if="currentPage === 3"
v-model:current-page="currentPage"
/>
<!-- 忘记密码 -->
<resetPassword
v-if="currentPage === 4"
v-model:current-page="currentPage"
/>
</div>
</div>
</div>
<!-- 底部 -->
<div class="flex items-center justify-center h-full">
<div class="flex flex-col items-center justify-center mb-3">
<span>Copyright © 2018-2023 Agileboot All Rights Reserved. </span>
<span>Copyright © 2018-2023 CollabLedger All Rights Reserved. </span>
<el-link
href="https://beian.miit.gov.cn"
rel="external nofollow"
frontend/web/src/views/login/utils/enums.ts
-35
View File
@@ -1,35 +0,0 @@
const operates = [
{
title: "手机登录",
page: 1
},
{
title: "二维码登录",
page: 2
},
{
title: "注册",
page: 3
}
];
const thirdParty = [
{
title: "微信登录",
icon: "wechat"
},
{
title: "支付宝登录",
icon: "alipay"
},
{
title: "QQ登录",
icon: "qq"
},
{
title: "微博登录",
icon: "weibo"
}
];
export { operates, thirdParty };
frontend/web/src/views/login/utils/rule.ts
+63 -114
View File
@@ -1,10 +1,5 @@
import { reactive } from "vue";
import { isPhone } from "@pureadmin/utils";
import type { FormRules } from "element-plus";
import { useUserStoreHook } from "@/store/modules/user";
/** 6位数字验证码正则 */
export const REGEXP_SIX = /^\d{6}$/;
/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
export const REGEXP_PWD =
@@ -12,116 +7,70 @@ export const REGEXP_PWD =
/** 登录校验 */
const loginRules = reactive<FormRules>({
password: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else if (!REGEXP_PWD.test(value)) {
callback(
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
);
} else {
callback();
}
},
trigger: "blur"
}
],
verifyCode: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入验证码"));
} else if (useUserStoreHook().verifyCode !== value) {
callback(new Error("请输入正确的验证码"));
} else {
callback();
}
},
trigger: "blur"
}
]
password: [getLoginPasswordRule()]
});
/** 手机登录校验 */
const phoneRules = reactive<FormRules>({
phone: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号码"));
} else if (!isPhone(value)) {
callback(new Error("请输入正确的手机号码格式"));
} else {
callback();
}
},
trigger: "blur"
}
],
verifyCode: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入验证码"));
} else if (!REGEXP_SIX.test(value)) {
callback(new Error("请输入6位数字验证码"));
} else {
callback();
}
},
trigger: "blur"
}
]
});
function getLoginPasswordRule() {
return {
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
return;
}
if (!REGEXP_PWD.test(value)) {
callback(new Error("密码格式应为8-18位数字、字母、符号的任意两种组合"));
return;
}
callback();
},
trigger: "blur"
};
}
/** 忘记密码校验 */
const updateRules = reactive<FormRules>({
phone: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号码"));
} else if (!isPhone(value)) {
callback(new Error("请输入正确的手机号码格式"));
} else {
callback();
}
},
trigger: "blur"
}
],
verifyCode: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入验证码"));
} else if (!REGEXP_SIX.test(value)) {
callback(new Error("请输入6位数字验证码"));
} else {
callback();
}
},
trigger: "blur"
}
],
password: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else if (!REGEXP_PWD.test(value)) {
callback(
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
);
} else {
callback();
}
},
trigger: "blur"
}
]
});
function getRegisterPasswordRule() {
return {
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
return;
}
callback();
},
trigger: "blur"
};
}
export { loginRules, phoneRules, updateRules };
function buildRegisterRules(getPassword: () => string) {
return reactive<FormRules>({
username: [
{ required: true, message: "请输入账号", trigger: "blur" },
{ max: 64, message: "账号长度不能超过64个字符", trigger: "blur" }
],
nickname: [
{ max: 32, message: "昵称长度不能超过32个字符", trigger: "blur" }
],
email: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }],
phoneNumber: [
{ max: 18, message: "手机号长度不能超过18个字符", trigger: "blur" }
],
password: [getRegisterPasswordRule()],
confirmPassword: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
return;
}
if (value !== getPassword()) {
callback(new Error("两次输入的密码不一致"));
return;
}
callback();
},
trigger: "blur"
}
]
});
}
export { buildRegisterRules, loginRules };
frontend/web/src/views/login/utils/verifyCode.ts
-50
View File
@@ -1,50 +0,0 @@
import type { FormInstance, FormItemProp } from "element-plus";
import { clone } from "@pureadmin/utils";
import { ref } from "vue";
const isDisabled = ref(false);
const timer = ref(null);
const text = ref("");
export const useVerifyCode = () => {
const start = async (
formEl: FormInstance | undefined,
props: FormItemProp,
time = 60
) => {
if (!formEl) return;
const initTime = clone(time, true);
await formEl.validateField(props, isValid => {
if (isValid) {
clearInterval(timer.value);
isDisabled.value = true;
text.value = `${time}`;
timer.value = setInterval(() => {
if (time > 0) {
time -= 1;
text.value = `${time}`;
} else {
text.value = "";
isDisabled.value = false;
clearInterval(timer.value);
time = initTime;
}
}, 1000);
}
});
};
const end = () => {
text.value = "";
isDisabled.value = false;
clearInterval(timer.value);
};
return {
isDisabled,
timer,
text,
start,
end
};
};
frontend/web/src/views/system/dept/form.vue
-134
View File
@@ -1,134 +0,0 @@
<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { usePublicHooks } from "../hooks";
import { DeptRequest } from "@/api/system/dept";
interface FormProps {
formInline: DeptRequest;
higherDeptOptions: any[];
}
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({
id: 0,
parentId: 0,
deptName: "",
leaderName: "",
phone: "",
email: "",
orderNum: 0,
status: 1
}),
higherDeptOptions: () => []
});
const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);
const deptOptions = ref(props.higherDeptOptions);
function getRef() {
return ruleFormRef.value;
}
defineExpose({ getRef });
</script>
<template>
<el-form
ref="ruleFormRef"
:model="newFormInline"
:rules="formRules"
label-width="82px"
>
<el-row :gutter="30">
<re-col>
<el-form-item label="上级部门">
<el-cascader
class="w-full"
v-model="newFormInline.parentId"
:options="deptOptions"
:props="{
value: 'id',
label: 'deptName',
emitPath: false,
checkStrictly: true
}"
clearable
placeholder="请选择上级部门"
/>
<!-- 这种写法可以自定义选项的内容 比如括号后面加上子节点的数字 -->
<!-- <template #default="{ node, data }">
<span>{{ data.deptName }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template> -->
<!-- </el-cascader> -->
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="部门名称" prop="deptName">
<el-input
v-model="newFormInline.deptName"
clearable
placeholder="请输入部门名称"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="部门负责人">
<el-input
v-model="newFormInline.leaderName"
clearable
placeholder="请输入部门负责人"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="手机号" prop="phone">
<el-input
v-model="newFormInline.phone"
clearable
placeholder="请输入手机号"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="邮箱" prop="email">
<el-input
v-model="newFormInline.email"
clearable
placeholder="请输入邮箱"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="排序">
<el-input-number
v-model="newFormInline.orderNum"
:min="0"
:max="9999"
controls-position="right"
/>
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
<el-form-item label="部门状态">
<el-switch
v-model="newFormInline.status"
inline-prompt
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="停用"
:style="switchStyle"
/>
</el-form-item>
</re-col>
</el-row>
</el-form>
</template>
frontend/web/src/views/system/dept/index.vue
-149
View File
@@ -1,149 +0,0 @@
<script setup lang="ts">
import { ref } from "vue";
import { useHook } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
defineOptions({
name: "SystemDept"
});
const formRef = ref();
const tableRef = ref();
const {
searchFormParams,
loading,
columns,
dataList,
onSearch,
resetForm,
openDialog,
handleDelete
} = useHook();
</script>
<template>
<div class="main">
<el-form
ref="formRef"
:inline="true"
:model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
>
<el-form-item label="部门名称：" prop="name">
<el-input
v-model="searchFormParams.deptName"
placeholder="请输入部门名称"
clearable
class="!w-[200px]"
/>
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-select
v-model="searchFormParams.status"
placeholder="请选择状态"
clearable
class="!w-[180px]"
>
<el-option label="启用" :value="1" />
<el-option label="停用" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="useRenderIcon(Search)"
:loading="loading"
@click="onSearch"
>
搜索
</el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
重置
</el-button>
</el-form-item>
</el-form>
<PureTableBar
title="部门列表（仅演示，操作后不生效）"
:columns="columns"
:tableRef="tableRef?.getTableRef()"
@refresh="onSearch"
>
<template #buttons>
<el-button
type="primary"
:icon="useRenderIcon(AddFill)"
@click="openDialog()"
>
新增部门
</el-button>
</template>
<template v-slot="{ size, dynamicColumns }">
<pure-table
ref="tableRef"
border
adaptive
:adaptiveConfig="{ offsetBottom: 32 }"
align-whole="center"
row-key="id"
showOverflowTooltip
table-layout="auto"
default-expand-all
:loading="loading"
:size="size"
:data="dataList"
:columns="dynamicColumns"
:header-cell-style="{
background: 'var(--el-table-row-hover-bg-color)',
color: 'var(--el-text-color-primary)'
}"
>
<template #operation="{ row }">
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(EditPen)"
@click="openDialog('编辑', row)"
>
编辑
</el-button>
<el-popconfirm
:title="`是否确认删除部门名称为${row.deptName}的这条数据`"
@confirm="handleDelete(row)"
>
<template #reference>
<el-button
class="reset-margin"
link
type="danger"
:size="size"
:icon="useRenderIcon(Delete)"
>
删除
</el-button>
</template>
</el-popconfirm>
</template>
</pure-table>
</template>
</PureTableBar>
</div>
</template>
<style lang="scss" scoped>
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
}
}
</style>
frontend/web/src/views/system/dept/utils/hook.tsx
-206
View File
@@ -1,206 +0,0 @@
import dayjs from "dayjs";
import editForm from "../form.vue";
import { setDisabledForTreeOptions, handleTree } from "@/utils/tree";
import { message } from "@/utils/message";
import {
DeptDTO,
DeptRequest,
addDeptApi,
deleteDeptApi,
getDeptInfoApi,
getDeptListApi,
updateDeptApi
} from "@/api/system/dept";
import { usePublicHooks } from "../../hooks";
import { addDialog } from "@/components/ReDialog";
import { reactive, ref, onMounted, h, computed } from "vue";
import { isAllEmpty } from "@pureadmin/utils";
export function useHook() {
const searchFormParams = reactive({
deptName: "",
status: null
});
const formRef = ref();
const originalDataList = ref([]);
const dataList = computed(() => {
let filterDataList = [...originalDataList.value];
if (!isAllEmpty(searchFormParams.deptName)) {
// 前端搜索部门名称
filterDataList = filterDataList.filter((item: DeptDTO) =>
item.deptName.includes(searchFormParams.deptName)
);
}
if (!isAllEmpty(searchFormParams.status)) {
// 前端搜索状态
filterDataList = filterDataList.filter(
(item: DeptDTO) => item.status === searchFormParams.status
);
}
// 处理成树结构
return [...handleTree(filterDataList)];
});
const loading = ref(true);
const { tagStyle } = usePublicHooks();
const columns: TableColumnList = [
{
label: "部门名称",
prop: "deptName",
width: 240,
align: "left"
},
{
label: "部门编号",
prop: "id",
width: 100,
align: "center"
},
{
label: "部门负责人",
prop: "leaderName",
minWidth: 70
},
{
label: "状态",
prop: "status",
minWidth: 100,
cellRenderer: ({ row, props }) => (
<el-tag size={props.size} style={tagStyle.value(row.status)}>
{row.status === 1 ? "启用" : "停用"}
</el-tag>
)
},
{
label: "排序",
prop: "orderNum",
minWidth: 70
},
{
label: "创建时间",
minWidth: 200,
prop: "createTime",
formatter: ({ createTime }) =>
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
},
{
label: "操作",
fixed: "right",
width: 240,
slot: "operation"
}
];
function resetForm(formEl) {
if (!formEl) return;
formEl.resetFields();
onSearch();
}
async function onSearch() {
loading.value = true;
// 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
const { data } = await getDeptListApi().finally(() => {
loading.value = false;
});
originalDataList.value = data;
}
async function handleAdd(row, done) {
await addDeptApi(row).then(() => {
message(`您新增了部门:${row.deptName}`, {
type: "success"
});
// 关闭弹框
done();
// 刷新列表
onSearch();
});
}
async function handleUpdate(row, done) {
await updateDeptApi(row.id, row).then(() => {
message(`您更新了部门${row.deptName}`, {
type: "success"
});
// 关闭弹框
done();
// 刷新列表
onSearch();
});
}
async function openDialog(title = "新增", row?: DeptDTO) {
const { data } = await getDeptListApi();
const treeList = setDisabledForTreeOptions(handleTree(data), "status");
if (title === "编辑") {
row = (await getDeptInfoApi(row.id + "")).data;
}
// TODO 为什么声明一个formInline变量,把变量填充进去， 再给props.formInline 结果就不生效
addDialog({
title: `${title}部门`,
props: {
formInline: {
id: row?.id ?? 0,
parentId: row?.parentId ?? 0,
deptName: row?.deptName ?? "",
leaderName: row?.leaderName ?? "",
phone: row?.phone ?? "",
email: row?.email ?? "",
orderNum: row?.orderNum ?? 0,
status: row?.status ?? 1
},
higherDeptOptions: [...treeList]
},
width: "40%",
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(editForm, { ref: formRef }),
beforeSure: (done, { options }) => {
const FormRef = formRef.value.getRef();
const curData = options.props.formInline as DeptRequest;
FormRef.validate(valid => {
if (valid) {
// 表单规则校验通过
if (title === "新增") {
handleAdd(curData, done);
} else {
// 实际开发先调用编辑接口，再进行下面操作
handleUpdate(curData, done);
}
}
});
}
});
}
async function handleDelete(row) {
await deleteDeptApi(row.id).then(() => {
message(`您删除了部门${row.deptName}`, { type: "success" });
// 刷新列表
onSearch();
});
}
onMounted(() => {
onSearch();
});
return {
searchFormParams,
loading,
columns,
dataList,
onSearch,
resetForm,
openDialog,
handleDelete
};
}
frontend/web/src/views/system/dept/utils/rule.ts
-37
View File
@@ -1,37 +0,0 @@
import { reactive } from "vue";
import type { FormRules } from "element-plus";
import { isPhone, isEmail } from "@pureadmin/utils";
/** 自定义表单规则校验 */
export const formRules = reactive(<FormRules>{
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
phone: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback();
} else if (!isPhone(value)) {
callback(new Error("请输入正确的手机号码格式"));
} else {
callback();
}
},
trigger: "blur"
// trigger: "click" // 如果想在点击确定按钮时触发这个校验，trigger 设置成 click 即可
}
],
email: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback();
} else if (!isEmail(value)) {
callback(new Error("请输入正确的邮箱格式"));
} else {
callback();
}
},
trigger: "blur"
}
]
});
frontend/web/src/views/system/log/loginLog/utils/hook.tsx
+1 -1
View File
@@ -162,7 +162,7 @@ export function useLoginLogHook() {
CommonUtils.fillPaginationParams(searchFormParams, pagination);
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
exportLoginLogExcelApi(toRaw(searchFormParams), "登录日志.xls");
exportLoginLogExcelApi(toRaw(searchFormParams), "登录日志.xlsx");
}
async function handleDelete(row) {
frontend/web/src/views/system/log/operationLog/description.vue
-3
View File
@@ -36,9 +36,6 @@ const operationLogStatusMap =
<el-descriptions-item label="操作人类型:">{{
props.operatorTypeStr
}}</el-descriptions-item>
<el-descriptions-item label="操作人部门:">{{
props.deptName
}}</el-descriptions-item>
<el-descriptions-item label="操作人IP:">{{
props.operatorIp
}}</el-descriptions-item>
frontend/web/src/views/system/log/operationLog/utils/hook.tsx
+1 -1
View File
@@ -175,7 +175,7 @@ export function useOperationLogHook() {
CommonUtils.fillPaginationParams(searchFormParams, pagination);
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
exportOperationLogExcelApi(toRaw(searchFormParams), "操作日志.xls");
exportOperationLogExcelApi(toRaw(searchFormParams), "操作日志.xlsx");
}
async function handleDelete(row) {
frontend/web/src/views/system/menu/form.vue
+2 -8
View File
@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<FormProps>(), {
const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);
const deptOptions = ref(props.higherMenuOptions);
const menuOptions = ref(props.higherMenuOptions);
const typeName = computed(() => {
return newFormInline.value.isButton ? "按钮" : "菜单";
@@ -57,7 +57,7 @@ defineExpose({ getRef });
<el-cascader
class="w-full"
v-model="newFormInline.parentId"
:options="deptOptions"
:options="menuOptions"
:props="{
value: 'id',
label: 'menuName',
@@ -67,12 +67,6 @@ defineExpose({ getRef });
clearable
placeholder="请选择父菜单（不选则为根目录菜单）"
/>
<!-- 这种写法可以自定义选项的内容 比如括号后面加上子节点的数字 -->
<!-- <template #default="{ node, data }">
<span>{{ data.deptName }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template> -->
<!-- </el-cascader> -->
</el-form-item>
</re-col>
<re-col :value="12" :xs="24" :sm="24">
frontend/web/src/views/system/menu/utils/rule.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import { isPhone, isEmail } from "@pureadmin/utils";
/** 自定义表单规则校验 */
export const formRules = reactive(<FormRules>{
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
name: [{ required: true, message: "菜单名称为必填项", trigger: "blur" }],
phone: [
{
validator: (rule, value, callback) => {
frontend/web/src/views/system/monitor/onlineUser/utils/hook.tsx
-5
View File
@@ -40,11 +40,6 @@ export function useHook() {
prop: "username",
minWidth: 120
},
{
label: "所属部门",
prop: "deptName",
minWidth: 120
},
{
label: "IP地址",
prop: "ipAddress",
frontend/web/src/views/system/post/index.vue
-271
View File
@@ -1,271 +0,0 @@
<script setup lang="ts">
import { h, ref } from "vue";
import { usePostHook } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { addDialog } from "@/components/ReDialog";
import Delete from "@iconify-icons/ep/delete";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import { useUserStoreHook } from "@/store/modules/user";
// TODO 这个导入声明好长 看看如何优化
import { CommonUtils } from "@/utils/common";
import PostFormModal from "@/views/system/post/post-form-modal.vue";
import EditPen from "@iconify-icons/ep/edit-pen";
import {
AddPostCommand,
PostPageResponse,
UpdatePostCommand,
addPostApi,
updatePostApi
} from "@/api/system/post";
import AddFill from "@iconify-icons/ri/add-circle-line";
import { ElMessage } from "element-plus";
/** 组件name最好和菜单表中的router_name一致 */
defineOptions({
name: "Post"
});
const loginLogStatusList = useUserStoreHook().dictionaryList["common.status"];
const tableRef = ref();
const searchFormRef = ref();
const {
searchFormParams,
pageLoading,
columns,
dataList,
pagination,
timeRange,
defaultSort,
multipleSelection,
onSearch,
resetForm,
onSortChanged,
exportAllExcel,
getPostList,
handleDelete,
handleBulkDelete
} = usePostHook();
const postFormRef = ref();
function getPostFormData(row?: PostPageResponse) {
return {
postId: row?.postId ?? 0,
postCode: row?.postCode ?? "",
postName: row?.postName ?? "",
postSort: row?.postSort ?? 1,
remark: row?.remark ?? "",
status: row?.status?.toString() ?? ""
};
}
async function submitPostForm(
type: "add" | "update",
formData: AddPostCommand & Partial<UpdatePostCommand>,
done: () => void
) {
if (type === "add") {
await addPostApi(formData);
} else {
await updatePostApi(formData as UpdatePostCommand);
}
ElMessage.success("提交成功");
done();
onSearch(tableRef);
}
function openDialog(type: "add" | "update", row?: PostPageResponse) {
const formInline = getPostFormData(row);
addDialog({
title: type === "add" ? "新增岗位" : "更新岗位",
props: { formInline },
width: "40%",
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(PostFormModal, { ref: postFormRef }),
beforeSure: (done, { options }) => {
const formRuleRef = postFormRef.value.getFormRuleRef();
const formData = options.props.formInline as AddPostCommand &
Partial<UpdatePostCommand>;
formRuleRef.validate(valid => {
if (valid) {
submitPostForm(type, formData, () => done());
}
});
}
});
}
</script>
<template>
<div class="main">
<!-- 搜索栏 -->
<el-form
ref="searchFormRef"
:inline="true"
:model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
>
<el-form-item label="岗位编码" prop="postCode">
<el-input
v-model="searchFormParams.postCode"
placeholder="请输入岗位编码"
clearable
class="!w-[200px]"
/>
</el-form-item>
<el-form-item label="岗位名称" prop="postName">
<el-input
v-model="searchFormParams.postName"
placeholder="请选择岗位名称"
clearable
class="!w-[200px]"
/>
</el-form-item>
<el-form-item label="状态：" prop="status">
<el-select
v-model="searchFormParams.status"
placeholder="请选择状态"
clearable
class="!w-[180px]"
>
<el-option
v-for="dict in loginLogStatusList"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
class="!w-[240px]"
v-model="timeRange"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:icon="useRenderIcon(Search)"
:loading="pageLoading"
@click="onSearch(tableRef)"
>
搜索
</el-button>
<el-button
:icon="useRenderIcon(Refresh)"
@click="resetForm(searchFormRef, tableRef)"
>
重置
</el-button>
</el-form-item>
</el-form>
<!-- table bar 包裹 table -->
<PureTableBar title="岗位列表" :columns="columns" @refresh="onSearch">
<!-- 表格操作栏 -->
<template #buttons>
<el-button
type="primary"
:icon="useRenderIcon(AddFill)"
@click="openDialog('add')"
>
新增岗位
</el-button>
<el-button
type="danger"
:icon="useRenderIcon(Delete)"
@click="handleBulkDelete(tableRef)"
>
批量删除
</el-button>
<el-button
type="primary"
@click="CommonUtils.exportExcel(columns, dataList, '岗位列表')"
>单页导出</el-button
>
<el-button type="primary" @click="exportAllExcel">全部导出</el-button>
</template>
<template v-slot="{ size, dynamicColumns }">
<pure-table
border
ref="tableRef"
align-whole="center"
showOverflowTooltip
table-layout="auto"
:loading="pageLoading"
:size="size"
adaptive
:data="dataList"
:columns="dynamicColumns"
:default-sort="defaultSort"
:pagination="pagination"
:paginationSmall="size === 'small' ? true : false"
:header-cell-style="{
background: 'var(--el-table-row-hover-bg-color)',
color: 'var(--el-text-color-primary)'
}"
@page-size-change="getPostList"
@page-current-change="getPostList"
@sort-change="onSortChanged"
@selection-change="
rows => (multipleSelection = rows.map(item => item.postId))
"
>
<template #operation="{ row }">
<el-button
class="reset-margin"
link
type="primary"
:size="size"
:icon="useRenderIcon(EditPen)"
@click="openDialog('update', row)"
>
编辑
</el-button>
<el-popconfirm
:title="`是否确认删除编号为${row.postId}的这个岗位`"
@confirm="handleDelete(row)"
>
<template #reference>
<el-button
class="reset-margin"
link
type="danger"
:size="size"
:icon="useRenderIcon(Delete)"
>
删除
</el-button>
</template>
</el-popconfirm>
</template>
</pure-table>
</template>
</PureTableBar>
</div>
</template>
<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
margin: 0;
}
.search-form {
:deep(.el-form-item) {
margin-bottom: 12px;
}
}
</style>
frontend/web/src/views/system/post/post-form-modal.vue
-79
View File
@@ -1,79 +0,0 @@
<script setup lang="ts">
import { ref } from "vue";
import { AddPostCommand, UpdatePostCommand } from "@/api/system/post";
import { useUserStoreHook } from "@/store/modules/user";
import { FormInstance, FormRules } from "element-plus";
interface Props {
formInline: AddPostCommand & Partial<UpdatePostCommand>;
}
const props = withDefaults(defineProps<Props>(), {
formInline: () => ({
postId: 0,
postCode: "",
postName: "",
postSort: 1,
remark: "",
status: ""
})
});
const formData = ref(props.formInline);
const statusList = useUserStoreHook().dictionaryMap["common.status"];
const rules: FormRules = {
postName: [
{
required: true,
message: "岗位名称不能为空"
}
],
postCode: [
{
required: true,
message: "岗位编码不能为空"
}
],
postSort: [
{
required: true,
message: "岗位序号不能为空"
}
]
};
const formRef = ref<FormInstance>();
function getFormRuleRef() {
return formRef.value;
}
defineExpose({ getFormRuleRef });
</script>
<template>
<el-form :model="formData" label-width="120px" :rules="rules" ref="formRef">
<el-form-item prop="postName" label="岗位名称" required inline-message>
<el-input v-model="formData.postName" />
</el-form-item>
<el-form-item prop="postCode" label="岗位编码" required>
<el-input v-model="formData.postCode" />
</el-form-item>
<el-form-item prop="postSort" label="岗位顺序" required>
<el-input-number :min="1" v-model="formData.postSort" />
</el-form-item>
<el-form-item prop="status" label="岗位状态">
<el-radio-group v-model="formData.status">
<el-radio
v-for="item in Object.keys(statusList)"
:key="item"
:label="statusList[item].value"
>{{ statusList[item].label }}</el-radio
>
</el-radio-group>
</el-form-item>
<el-form-item prop="remark" label="备注" style="margin-bottom: 0">
<el-input type="textarea" v-model="formData.remark" />
</el-form-item>
</el-form>
</template>
frontend/web/src/views/system/post/utils/hook.tsx
-229
View File
@@ -1,229 +0,0 @@
import dayjs from "dayjs";
import { message } from "@/utils/message";
import { ElMessageBox, Sort } from "element-plus";
import { reactive, ref, onMounted, toRaw, computed } from "vue";
import { useUserStoreHook } from "@/store/modules/user";
import { CommonUtils } from "@/utils/common";
import { PaginationProps } from "@pureadmin/table";
import {
PostListCommand,
getPostListApi,
exportPostExcelApi,
deletePostApi
} from "@/api/system/post";
const statusMap = useUserStoreHook().dictionaryMap["common.status"];
export function usePostHook() {
const defaultSort: Sort = {
prop: "postSort",
order: "ascending"
};
const pagination: PaginationProps = {
total: 0,
pageSize: 10,
currentPage: 1,
background: true
};
const timeRange = computed<[string, string] | null>({
get() {
if (searchFormParams.beginTime && searchFormParams.endTime) {
return [searchFormParams.beginTime, searchFormParams.endTime];
} else {
return null;
}
},
set(v) {
if (v?.length === 2) {
searchFormParams.beginTime = v[0];
searchFormParams.endTime = v[1];
} else {
searchFormParams.beginTime = undefined;
searchFormParams.endTime = undefined;
}
}
});
const searchFormParams = reactive<PostListCommand>({
postCode: "",
postName: "",
status: undefined
});
const dataList = ref([]);
const pageLoading = ref(true);
const multipleSelection = ref([]);
const sortState = ref<Sort>(defaultSort);
const columns: TableColumnList = [
{
type: "selection",
align: "left"
},
{
label: "岗位编号",
prop: "postId",
minWidth: 100
},
{
label: "岗位编码",
prop: "postCode",
minWidth: 120
},
{
label: "岗位名称",
prop: "postName",
minWidth: 120
},
{
label: "岗位排序",
prop: "postSort",
sortable: "custom",
minWidth: 120
},
{
label: "状态",
prop: "status",
minWidth: 120,
cellRenderer: ({ row, props }) => (
<el-tag
size={props.size}
type={statusMap[row.status].cssTag}
effect="plain"
>
{statusMap[row.status].label}
</el-tag>
)
},
{
label: "创建时间",
minWidth: 160,
prop: "createTime",
sortable: "custom",
formatter: ({ createTime }) =>
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
},
{
label: "操作",
fixed: "right",
width: 140,
slot: "operation"
}
];
function onSortChanged(sort: Sort) {
sortState.value = sort;
// 表格列的排序变化的时候，需要重置分页
pagination.currentPage = 1;
getPostList();
}
async function onSearch(tableRef) {
// 点击搜索的时候，需要重置排序，重新排序的时候会重置分页并发起查询请求
tableRef.getTableRef().sort("postSort", "ascending");
}
function resetForm(formEl, tableRef) {
if (!formEl) return;
// 清空查询参数
formEl.resetFields();
// 清空时间查询 TODO 这块有点繁琐 有可以优化的地方吗？
// Form组件的resetFields方法无法清除datepicker里面的数据。
searchFormParams.beginTime = undefined;
searchFormParams.endTime = undefined;
// 重置分页并查询
onSearch(tableRef);
}
async function getPostList() {
pageLoading.value = true;
CommonUtils.fillSortParams(searchFormParams, sortState.value);
CommonUtils.fillPaginationParams(searchFormParams, pagination);
const { data } = await getPostListApi(toRaw(searchFormParams)).finally(
() => {
pageLoading.value = false;
}
);
dataList.value = data.rows;
pagination.total = data.total;
}
async function exportAllExcel() {
if (sortState.value != null) {
CommonUtils.fillSortParams(searchFormParams, sortState.value);
}
CommonUtils.fillPaginationParams(searchFormParams, pagination);
CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
exportPostExcelApi(toRaw(searchFormParams), "岗位数据.xlsx");
}
async function handleDelete(row) {
await deletePostApi([row.postId]).then(() => {
message(`您删除了编号为${row.postId}的这条岗位数据`, {
type: "success"
});
// 刷新列表
getPostList();
});
}
async function handleBulkDelete(tableRef) {
if (multipleSelection.value.length === 0) {
message("请选择需要删除的数据", { type: "warning" });
return;
}
ElMessageBox.confirm(
`确认要<strong>删除</strong>编号为<strong style='color:var(--el-color-primary)'>[ ${multipleSelection.value} ]</strong>的岗位数据吗?`,
"系统提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
dangerouslyUseHTMLString: true,
draggable: true
}
)
.then(async () => {
await deletePostApi(multipleSelection.value).then(() => {
message(`您删除了编号为[ ${multipleSelection.value} ]的岗位数据`, {
type: "success"
});
// 刷新列表
getPostList();
});
})
.catch(() => {
message("取消删除", {
type: "info"
});
// 清空checkbox选择的数据
tableRef.getTableRef().clearSelection();
});
}
onMounted(getPostList);
return {
searchFormParams,
pageLoading,
columns,
dataList,
pagination,
defaultSort,
timeRange,
multipleSelection,
onSearch,
onSortChanged,
exportAllExcel,
// exportExcel,
getPostList,
resetForm,
handleDelete,
handleBulkDelete
};
}
frontend/web/src/views/system/role/index.vue
+1 -2
View File
@@ -44,7 +44,7 @@ const roleFormRef = ref();
function getRoleFormData(row?: RoleDTO) {
return {
roleId: row?.roleId ?? 0,
dataScope: row?.dataScope?.toString() ?? "",
dataScope: row?.dataScope?.toString() ?? "5",
menuIds: row?.selectedMenuList ?? [],
remark: row?.remark ?? "",
roleKey: row?.roleKey ?? "",
@@ -75,7 +75,6 @@ async function openDialog(type: "add" | "update", row?: RoleDTO) {
if (row) {
const { data } = await getRoleInfoApi(row.roleId);
row.selectedMenuList = data.selectedMenuList;
row.selectedDeptList = data.selectedDeptList;
}
} catch (e) {
console.error(e);
frontend/web/src/views/system/role/role-form-modal.vue
+1 -1
View File
@@ -13,7 +13,7 @@ interface Props {
const props = withDefaults(defineProps<Props>(), {
formInline: () => ({
roleId: 0,
dataScope: "",
dataScope: "5",
menuIds: [],
remark: "",
roleKey: "",
frontend/web/src/views/system/user/form.vue
-48
View File
@@ -3,14 +3,11 @@ import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./rule";
import { UserRequest } from "@/api/system/user";
import { PostPageResponse } from "@/api/system/post";
import { RoleDTO } from "@/api/system/role";
import { useUserStoreHook } from "@/store/modules/user";
interface FormProps {
formInline: UserRequest;
deptOptions: any[];
postOptions: PostPageResponse[];
roleOptions: RoleDTO[];
}
@@ -19,25 +16,19 @@ const props = withDefaults(defineProps<FormProps>(), {
userId: 0,
username: "",
nickname: "",
deptId: 0,
phone: "",
email: "",
password: "",
sex: 0,
status: 1,
postId: 0,
roleId: 0,
remark: ""
}),
deptOptions: () => [],
postOptions: () => [],
roleOptions: () => []
});
const newFormInline = ref(props.formInline);
const deptOptions = ref(props.deptOptions);
const roleOptions = ref(props.roleOptions);
const postOptions = ref(props.postOptions);
const formRuleRef = ref();
@@ -65,26 +56,6 @@ defineExpose({ getFormRuleRef });
/>
</el-form-item>
</re-col>
<re-col :value="12">
<el-form-item label="部门">
<el-tree-select
class="w-full"
v-model="newFormInline.deptId"
:data="deptOptions"
:show-all-levels="false"
value-key="id"
:props="{
value: 'id',
label: 'deptName',
emitPath: false,
checkStrictly: true
}"
clearable
placeholder="请选择部门"
/>
</el-form-item>
</re-col>
<re-col :value="12">
<el-form-item label="手机号码" prop="phoneNumber">
<el-input
@@ -133,25 +104,6 @@ defineExpose({ getFormRuleRef });
</el-form-item>
</re-col>
<re-col :value="12">
<el-form-item label="岗位" prop="postId">
<el-select
class="w-full"
v-model="newFormInline.postId"
placeholder="请选择岗位"
clearable
>
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == 0"
/>
</el-select>
</el-form-item>
</re-col>
<re-col :value="12">
<el-form-item label="角色" prop="roleId">
<el-select
frontend/web/src/views/system/user/hook.tsx
+1 -31
View File
@@ -20,14 +20,10 @@ import { type PaginationProps } from "@pureadmin/table";
import { reactive, ref, computed, onMounted, toRaw, h } from "vue";
import { CommonUtils } from "@/utils/common";
import { addDialog } from "@/components/ReDialog";
import { handleTree, setDisabledForTreeOptions } from "@/utils/tree";
import { getDeptListApi } from "@/api/system/dept";
import { getPostListApi } from "@/api/system/post";
import { getRoleListApi } from "@/api/system/role";
export function useHook() {
const searchFormParams = reactive<UserQuery>({
deptId: null,
phoneNumber: undefined,
status: undefined,
username: undefined,
@@ -47,8 +43,6 @@ export function useHook() {
background: true
});
const deptTreeList = ref([]);
const postOptions = ref([]);
const roleOptions = ref([]);
const columns: TableColumnList = [
@@ -82,17 +76,6 @@ export function useHook() {
</el-tag>
)
},
{
label: "部门ID",
prop: "deptId",
minWidth: 130,
hide: true
},
{
label: "部门",
prop: "deptName",
minWidth: 130
},
{
label: "手机号码",
prop: "phoneNumber",
@@ -193,7 +176,7 @@ export function useHook() {
async function exportAllExcel() {
CommonUtils.fillPaginationParams(searchFormParams, pagination);
exportUserExcelApi(toRaw(searchFormParams), "用户列表.xls");
exportUserExcelApi(toRaw(searchFormParams), "用户列表.xlsx");
}
async function handleAdd(row, done) {
@@ -252,18 +235,14 @@ export function useHook() {
userId: row?.userId ?? 0,
username: row?.username ?? "",
nickname: row?.nickname ?? "",
deptId: row?.deptId ?? undefined,
phoneNumber: row?.phoneNumber ?? "",
email: row?.email ?? "",
password: title == "新增" ? "" : undefined,
sex: row?.sex ?? undefined,
status: row?.status ?? undefined,
postId: row?.postId ?? undefined,
roleId: row?.roleId ?? undefined,
remark: row?.remark ?? ""
},
deptOptions: deptTreeList,
postOptions: postOptions,
roleOptions: roleOptions
},
@@ -356,15 +335,6 @@ export function useHook() {
onMounted(async () => {
onSearch();
const deptResponse = await getDeptListApi();
deptTreeList.value = await setDisabledForTreeOptions(
handleTree(deptResponse.data),
"status"
);
const postResponse = await getPostListApi({});
postOptions.value = postResponse.data.rows;
const roleResponse = await getRoleListApi({});
roleOptions.value = roleResponse.data.rows;
});
frontend/web/src/views/system/user/index.vue
+3 -12
View File
@@ -1,6 +1,5 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import tree from "./tree.vue";
import { ref } from "vue";
import { useHook } from "./hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
@@ -37,24 +36,16 @@ const {
getList,
openUploadDialog
} = useHook();
watch(
() => searchFormParams.deptId,
() => {
onSearch();
}
);
</script>
<template>
<div class="main">
<tree class="w-[17%] float-left" v-model="searchFormParams.deptId" />
<div class="float-right w-[82%]">
<div>
<el-form
ref="formRef"
:inline="true"
:model="searchFormParams"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
class="search-form bg-bg_color w-full pl-8 pt-[12px]"
>
<el-form-item label="用户编号：" prop="userId">
<el-input
frontend/web/src/views/system/user/profile/index.vue
+1 -7
View File
@@ -12,8 +12,7 @@ import { useUserStoreHook } from "@/store/modules/user";
const activeTab = ref("userinfo");
const state = reactive({
user: {},
roleName: {},
postName: {}
roleName: {}
});
/** 用户名 */
@@ -26,7 +25,6 @@ function getUser() {
// userApi.getUserProfile().then(response => {
// state.user = response.user;
// state.roleName = response.roleName;
// state.postName = response.postName;
// });
}
@@ -58,10 +56,6 @@ getUser();
<el-descriptions-item label="用户邮箱">{{
currentUserInfo.email
}}</el-descriptions-item>
<el-descriptions-item label="部门 / 职位">
{{ currentUserInfo.deptName }} /
{{ currentUserInfo.postName }}
</el-descriptions-item>
<el-descriptions-item label="角色">
{{ currentUserInfo.roleName }}
</el-descriptions-item>
frontend/web/src/views/system/user/profile/resetPwd.vue
+2 -13
View File
@@ -4,13 +4,12 @@ import {
updateCurrentUserPasswordApi,
ResetPasswordRequest
} from "@/api/system/user";
import { FormInstance } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { message } from "@/utils/message";
// const { proxy } = getCurrentInstance();
const user = reactive<ResetPasswordRequest>({
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined
});
@@ -24,8 +23,7 @@ const equalToPassword = (rule, value, callback) => {
callback();
}
};
const rules = ref({
oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
const rules = reactive<FormRules>({
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
{
@@ -43,7 +41,6 @@ const rules = ref({
/** 提交按钮 */
function submit() {
console.log(user);
pwdRef.value.validate(valid => {
if (valid) {
updateCurrentUserPasswordApi(toRaw(user)).then(() => {
@@ -58,14 +55,6 @@ function submit() {
<template>
<el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
<el-form-item label="旧密码" prop="oldPassword">
<el-input
v-model="user.oldPassword"
placeholder="请输入旧密码"
type="password"
show-password
/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input
v-model="user.newPassword"
frontend/web/src/views/system/user/rule.ts
-1
View File
@@ -4,7 +4,6 @@ import { isPhone, isEmail } from "@pureadmin/utils";
/** 自定义表单规则校验 */
export const formRules = reactive(<FormRules>{
name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
phone: [
{
validator: (rule, value, callback) => {
frontend/web/src/views/system/user/svg/expand.svg
-1
View File
@@ -1 +0,0 @@
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 163 B

frontend/web/src/views/system/user/svg/unexpand.svg
-1
View File
@@ -1 +0,0 @@
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H2v20h2v-9h14.17l-5.5 5.5l1.41 1.42L22 12l-7.92-7.92l-1.41 1.42l5.5 5.5H4V2Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 166 B

frontend/web/src/views/system/user/tree.vue
-212
View File
@@ -1,212 +0,0 @@
<script setup lang="ts">
import { handleTree } from "@/utils/tree";
import { getDeptListApi } from "@/api/system/dept";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
import Dept from "@iconify-icons/ri/git-branch-line";
import Reset from "@iconify-icons/ri/restart-line";
import Search from "@iconify-icons/ep/search";
import More2Fill from "@iconify-icons/ri/more-2-fill";
import OfficeBuilding from "@iconify-icons/ep/office-building";
import LocationCompany from "@iconify-icons/ep/add-location";
import ExpandIcon from "./svg/expand.svg?component";
import UnExpandIcon from "./svg/unexpand.svg?component";
// TODO 这个类可以抽取作为SideBar TreeSelect组件
interface Tree {
id: number;
deptName: string;
highlight?: boolean;
children?: Tree[];
}
defineProps({
modelValue: {
type: Number,
required: true
}
});
const treeRef = ref();
const treeData = ref([]);
const isExpand = ref(true);
const searchValue = ref("");
const highlightMap = ref({});
const { proxy } = getCurrentInstance();
const defaultProps = {
children: "children",
label: "deptName"
};
const buttonClass = computed(() => {
return [
"!h-[20px]",
"reset-margin",
"!text-gray-500",
"dark:!text-white",
"dark:hover:!text-primary"
];
});
const filterNode = (value: string, data: Tree) => {
if (!value) return true;
return data.deptName.includes(value);
};
function nodeClick(value) {
console.log(value);
const nodeId = value.$treeNodeId;
console.log(nodeId);
highlightMap.value[nodeId] = highlightMap.value[nodeId]?.highlight
? Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
highlight: false
})
: Object.assign({ id: nodeId }, highlightMap.value[nodeId], {
highlight: true
});
Object.values(highlightMap.value).forEach((v: Tree) => {
if (v.id !== nodeId) {
v.highlight = false;
}
});
proxy.$emit("update:modelValue", value.id);
}
function toggleRowExpansionAll(status) {
isExpand.value = status;
const nodes = (proxy.$refs["treeRef"] as any).store._getAllNodes();
for (let i = 0; i < nodes.length; i++) {
nodes[i].expanded = status;
}
}
/** 重置状态（选中状态、搜索框值、树初始化） */
function onReset() {
highlightMap.value = {};
searchValue.value = "";
toggleRowExpansionAll(true);
}
watch(searchValue, val => {
treeRef.value!.filter(val);
});
onMounted(async () => {
const { data } = await getDeptListApi();
treeData.value = handleTree(data);
});
</script>
<template>
<div
class="h-full bg-bg_color overflow-auto"
:style="{ minHeight: `calc(100vh - 133px)` }"
>
<div class="flex items-center h-[56px]">
<p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
部门列表
</p>
<el-input
style="flex: 2"
size="default"
v-model="searchValue"
placeholder="请输入部门名称"
clearable
>
<template #suffix>
<el-icon class="el-input__icon">
<IconifyIconOffline
v-show="searchValue.length === 0"
:icon="Search"
/>
</el-icon>
</template>
</el-input>
<el-dropdown :hide-on-click="false">
<IconifyIconOffline
class="w-[38px] cursor-pointer"
width="20px"
:icon="More2Fill"
/>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>
<el-button
:class="buttonClass"
link
type="primary"
:icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
@click="toggleRowExpansionAll(isExpand ? false : true)"
>
{{ isExpand ? "折叠全部" : "展开全部" }}
</el-button>
</el-dropdown-item>
<el-dropdown-item>
<el-button
:class="buttonClass"
link
type="primary"
:icon="useRenderIcon(Reset)"
@click="onReset"
>
重置状态
</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<el-divider />
<el-tree
ref="treeRef"
:data="treeData"
node-key="id"
size="default"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false"
:filter-node-method="filterNode"
@node-click="nodeClick"
>
<template #default="{ node, data }">
<span
:class="[
'text-base',
'flex',
'items-center',
'tracking-wider',
'gap-2',
'select-none',
searchValue.trim().length > 0 &&
node.label.includes(searchValue) &&
'text-red-500',
highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
]"
:style="{
background: highlightMap[node.id]?.highlight
? 'var(--el-color-primary-light-7)'
: 'transparent'
}"
>
<IconifyIconOffline
:icon="
data.parentId === 0
? OfficeBuilding
: data.type === 2
? LocationCompany
: Dept
"
/>
{{ node.label }}
</span>
</template>
</el-tree>
</div>
</template>
<style lang="scss" scoped>
:deep(.el-divider) {
margin: 0;
}
</style>
frontend/web/src/views/system/user/uploadForm.vue
+1 -1
View File
@@ -25,7 +25,7 @@ const upload = reactive({
function downloadTemplate() {
http.download(
"system/users/excelTemplate",
`user_template_${new Date().getTime()}.xls`
`user_template_${new Date().getTime()}.xlsx`
);
}
frontend/web/src/views/welcome/index.vue
-9
View File
@@ -1,9 +0,0 @@
<script setup lang="ts">
defineOptions({
name: "Welcome"
});
</script>
<template>
<h1>Agileboot前端预览</h1>
</template>
frontend/web/tsconfig.json
-1
View File
@@ -1,5 +1,4 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"target": "esnext",
"module": "esnext",
frontend/web/types/global.d.ts
Vendored
-16
View File
@@ -62,7 +62,6 @@ declare global {
VITE_PUBLIC_PATH: string;
VITE_ROUTER_HISTORY: string;
VITE_CDN: boolean;
VITE_HIDE_HOME: string;
VITE_COMPRESSION: ViteCompression;
VITE_APP_BASE_API: string;
}
@@ -87,13 +86,8 @@ declare global {
Layout?: string;
Theme?: string;
DarkMode?: boolean;
Grey?: boolean;
Weak?: boolean;
HideTabs?: boolean;
SidebarStatus?: boolean;
EpThemeColor?: string;
ShowLogo?: boolean;
ShowModel?: string;
MenuArrowIconNoTransition?: boolean;
CachingAsyncRoutes?: boolean;
TooltipEffect?: Effect;
@@ -115,13 +109,8 @@ declare global {
layout?: string;
theme?: string;
darkMode?: boolean;
grey?: boolean;
weak?: boolean;
hideTabs?: boolean;
sidebarStatus?: boolean;
epThemeColor?: string;
showLogo?: boolean;
showModel?: string;
username?: string;
}
@@ -140,11 +129,6 @@ declare global {
epThemeColor?: string;
};
configure: {
grey?: boolean;
weak?: boolean;
hideTabs?: boolean;
showLogo?: boolean;
showModel?: string;
multiTagsCache?: boolean;
};
tags?: Array<any>;
frontend/web/types/router.d.ts
Vendored
+2 -2
View File
@@ -30,8 +30,8 @@ declare global {
/** 内嵌的`iframe`链接 `可选` */
frameSrc?: string;
/** 是否是内部页面 使用frameSrc来嵌入页面时，当isFrameSrcInternal=true的时候, 前端需要做特殊处理 */
/** 比如链接是 /druid/login.html */
/** 前端需要处理成 http://localhost:8080/druid/login.html */
/** 比如链接是 /internal/page.html */
/** 前端需要处理成当前后端服务可访问的完整地址 */
isFrameSrcInternal?: boolean;
/** `iframe`页是否开启首次加载动画（默认`true`）`可选` */
frameLoading?: boolean;
frontend/web/vercel.json
+11
View File
@@ -0,0 +1,11 @@
{
"installCommand": "pnpm install --no-frozen-lockfile",
"buildCommand": "pnpm build",
"outputDirectory": "dist",
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}
frontend/web/vite.config.ts
+1 -1
View File
@@ -45,7 +45,7 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
// 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
proxy: {
"/dev-api": {
target: "http://localhost:8080",
target: "http://localhost:3000",
changeOrigin: true,
rewrite: path => path.replace(/^\/dev-api/, "")
}