huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-22 23:31:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

!282 修复 vue3 部分问题，引入 vxe-table

Browse Source 
Merge pull request !282 from xingyu/dev
This commit is contained in:
芋道源码 2022-11-03 04:32:34 +00:00 committed by Gitee
commit ee3ac7b663
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
32 changed files with 8097 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
README.md
View File

@ -174,29 +174,29 @@ ps：核心功能已经实现，正在对接微信小程序中...
### 后端
| 框架 | 说明 | 版本 | 学习指南 |
|---------------------------------------------------------------------------------------------|-----------------------|------------------|----------------------------------------------------------------|
| [Spring Boot](https://spring.io/projects/spring-boot) | 应用开发框架 | 2.6.12 | [文档](https://github.com/YunaiV/SpringBoot-Labs) |
| [MySQL](https://www.mysql.com/cn/) | 数据库服务器 | 5.7 / 8.0+ | |
| [Druid](https://github.com/alibaba/druid) | JDBC 连接池、监控组件 | 1.2.13-SNSAPSHOT | [文档](http://www.iocoder.cn/Spring-Boot/datasource-pool/?yudao) |
| [MyBatis Plus](https://mp.baomidou.com/) | MyBatis 增强工具包 | 3.5.2 | [文档](http://www.iocoder.cn/Spring-Boot/MyBatis/?yudao) |
| [Dynamic Datasource](https://dynamic-datasource.com/) | 动态数据源 | 3.5.2 | [文档](http://www.iocoder.cn/Spring-Boot/datasource-pool/?yudao) |
| [Redis](https://redis.io/) | key-value 数据库 | 5.0 | |
| [Redisson](https://github.com/redisson/redisson) | Redis 客户端 | 3.17.7 | [文档](http://www.iocoder.cn/Spring-Boot/Redis/?yudao) |
| [Spring MVC](https://github.com/spring-projects/spring-framework/tree/master/spring-webmvc) | MVC 框架 | 5.3.20 | [文档](http://www.iocoder.cn/SpringMVC/MVC/?yudao) |
| [Spring Security](https://github.com/spring-projects/spring-security) | Spring 安全框架 | 5.6.5 | [文档](http://www.iocoder.cn/Spring-Boot/Spring-Security/?yudao) |
| [Hibernate Validator](https://github.com/hibernate/hibernate-validator) | 参数校验组件 | 6.2.3 | [文档](http://www.iocoder.cn/Spring-Boot/Validation/?yudao) |
| [Flowable](https://github.com/flowable/flowable-engine) | 工作流引擎 | 6.7.2 | [文档](https://doc.iocoder.cn/bpm/) |
| [Quartz](https://github.com/quartz-scheduler) | 任务调度组件 | 2.3.2 | [文档](http://www.iocoder.cn/Spring-Boot/Job/?yudao) |
| [Knife4j](https://gitee.com/xiaoym/knife4j) | Swagger 增强 UI 实现 | 3.0.3 | [文档](http://www.iocoder.cn/Spring-Boot/Swagger/?yudao) |
| [Resilience4j](https://github.com/resilience4j/resilience4j) | 服务保障组件 | 1.7.1 | [文档](http://www.iocoder.cn/Spring-Boot/Resilience4j/?yudao) |
| [SkyWalking](https://skywalking.apache.org/) | 分布式应用追踪系统 | 8.5.0 | [文档](http://www.iocoder.cn/Spring-Boot/SkyWalking/?yudao) |
| [Spring Boot Admin](https://github.com/codecentric/spring-boot-admin) | Spring Boot 监控平台 | 2.6.9 | [文档](http://www.iocoder.cn/Spring-Boot/Admin/?yudao) |
| [Jackson](https://github.com/FasterXML/jackson) | JSON 工具库 | 2.13.3 | |
| [MapStruct](https://mapstruct.org/) | Java Bean 转换 | 1.5.2.Final | [文档](http://www.iocoder.cn/Spring-Boot/MapStruct/?yudao) |
| [Lombok](https://projectlombok.org/) | 消除冗长的 Java 代码 | 1.18.24 | [文档](http://www.iocoder.cn/Spring-Boot/Lombok/?yudao) |
| [JUnit](https://junit.org/junit5/) | Java 单元测试框架 | 5.8.2 | - |
| [Mockito](https://github.com/mockito/mockito) | Java Mock 框架 | 4.8.0 | - |
| 框架 | 说明 | 版本 | 学习指南 |
|---------------------------------------------------------------------------------------------|-----------------------|-------------|----------------------------------------------------------------|
| [Spring Boot](https://spring.io/projects/spring-boot) | 应用开发框架 | 2.6.13 | [文档](https://github.com/YunaiV/SpringBoot-Labs) |
| [MySQL](https://www.mysql.com/cn/) | 数据库服务器 | 5.7 / 8.0+ | |
| [Druid](https://github.com/alibaba/druid) | JDBC 连接池、监控组件 | 1.2.14 | [文档](http://www.iocoder.cn/Spring-Boot/datasource-pool/?yudao) |
| [MyBatis Plus](https://mp.baomidou.com/) | MyBatis 增强工具包 | 3.5.2 | [文档](http://www.iocoder.cn/Spring-Boot/MyBatis/?yudao) |
| [Dynamic Datasource](https://dynamic-datasource.com/) | 动态数据源 | 3.5.2 | [文档](http://www.iocoder.cn/Spring-Boot/datasource-pool/?yudao) |
| [Redis](https://redis.io/) | key-value 数据库 | 5.0 | |
| [Redisson](https://github.com/redisson/redisson) | Redis 客户端 | 3.17.7 | [文档](http://www.iocoder.cn/Spring-Boot/Redis/?yudao) |
| [Spring MVC](https://github.com/spring-projects/spring-framework/tree/master/spring-webmvc) | MVC 框架 | 5.3.20 | [文档](http://www.iocoder.cn/SpringMVC/MVC/?yudao) |
| [Spring Security](https://github.com/spring-projects/spring-security) | Spring 安全框架 | 5.6.7 | [文档](http://www.iocoder.cn/Spring-Boot/Spring-Security/?yudao) |
| [Hibernate Validator](https://github.com/hibernate/hibernate-validator) | 参数校验组件 | 6.2.3 | [文档](http://www.iocoder.cn/Spring-Boot/Validation/?yudao) |
| [Flowable](https://github.com/flowable/flowable-engine) | 工作流引擎 | 6.7.2 | [文档](https://doc.iocoder.cn/bpm/) |
| [Quartz](https://github.com/quartz-scheduler) | 任务调度组件 | 2.3.2 | [文档](http://www.iocoder.cn/Spring-Boot/Job/?yudao) |
| [Knife4j](https://gitee.com/xiaoym/knife4j) | Swagger 增强 UI 实现 | 3.0.3 | [文档](http://www.iocoder.cn/Spring-Boot/Swagger/?yudao) |
| [Resilience4j](https://github.com/resilience4j/resilience4j) | 服务保障组件 | 1.7.1 | [文档](http://www.iocoder.cn/Spring-Boot/Resilience4j/?yudao) |
| [SkyWalking](https://skywalking.apache.org/) | 分布式应用追踪系统 | 8.5.0 | [文档](http://www.iocoder.cn/Spring-Boot/SkyWalking/?yudao) |
| [Spring Boot Admin](https://github.com/codecentric/spring-boot-admin) | Spring Boot 监控平台 | 2.6.9 | [文档](http://www.iocoder.cn/Spring-Boot/Admin/?yudao) |
| [Jackson](https://github.com/FasterXML/jackson) | JSON 工具库 | 2.13.3 | |
| [MapStruct](https://mapstruct.org/) | Java Bean 转换 | 1.5.3.Final | [文档](http://www.iocoder.cn/Spring-Boot/MapStruct/?yudao) |
| [Lombok](https://projectlombok.org/) | 消除冗长的 Java 代码 | 1.18.24 | [文档](http://www.iocoder.cn/Spring-Boot/Lombok/?yudao) |
| [JUnit](https://junit.org/junit5/) | Java 单元测试框架 | 5.8.2 | - |
| [Mockito](https://github.com/mockito/mockito) | Java Mock 框架 | 4.8.0 | - |
### [管理后台 Vue2 前端](./yudao-ui-admin)
@ -207,11 +207,11 @@ ps：核心功能已经实现，正在对接微信小程序中...
### [管理后台 Vue3 前端](./yudao-ui-admin-vue3)
| 框架 | 说明 | 版本 |
| 框架 | 说明 | 版本 |
|----------------------------------------------------------------------|-----------------|--------|
| [Vue](https://staging-cn.vuejs.org/) | Vue 框架 | 3.2.41 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 3.1.8 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.18 |
| [Vue](https://staging-cn.vuejs.org/) | Vue 框架 | 3.2.41 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 3.2.2 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.19 |
| [TypeScript](https://www.typescriptlang.org/docs/) | TypeScript | 4.8.4 |
| [pinia](https://pinia.vuejs.org/) | vuex5 | 2.0.23 |
| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.2 |

2
pom.xml
View File

@ -38,7 +38,7 @@
<maven-compiler-plugin.version>3.8.0</maven-compiler-plugin.version>
<!-- 看看咋放到 bom 里 -->
<lombok.version>1.18.24</lombok.version>
<mapstruct.version>1.5.2.Final</mapstruct.version>
<mapstruct.version>1.5.3.Final</mapstruct.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>

4
sql/mysql/vue3-menu.sql
View File

@ -257,7 +257,7 @@ INSERT INTO `system_menu` VALUES (1264, '客户端查询', 'system:oauth2-client
INSERT INTO `system_menu` VALUES (1265, '客户端创建', 'system:oauth2-client:create', 3, 2, 1263, '', '', '', 0, b'1', b'1', '', '2022-05-10 16:26:33', '1', '2022-05-11 00:31:23', b'0');
INSERT INTO `system_menu` VALUES (1266, '客户端更新', 'system:oauth2-client:update', 3, 3, 1263, '', '', '', 0, b'1', b'1', '', '2022-05-10 16:26:33', '1', '2022-05-11 00:31:28', b'0');
INSERT INTO `system_menu` VALUES (1267, '客户端删除', 'system:oauth2-client:delete', 3, 4, 1263, '', '', '', 0, b'1', b'1', '', '2022-05-10 16:26:33', '1', '2022-05-11 00:31:33', b'0');
INSERT INTO `system_menu` (`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `status`, `visible`, `keep_alive`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (1281, '可视化报表', '', 1, 12, 0, '/visualization', 'ep:histogram', NULL, 0, b'1', b'1', '1', '2022-07-10 20:22:15', '1', '2022-07-10 20:33:30', b'0');
INSERT INTO `system_menu` (`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `status`, `visible`, `keep_alive`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (1282, '积木报表', '', 2, 1, 1281, 'jimu-report', 'ep:histogram', 'visualization/jmreport/index', 0, b'1', b'1', '1', '2022-07-10 20:26:36', '1', '2022-07-28 21:17:34', b'0');
INSERT INTO `system_menu` VALUES (1281, '可视化报表', '', 1, 12, 0, '/visualization', 'ep:histogram', NULL, 0, b'1', b'1', '1', '2022-07-10 20:22:15', '1', '2022-07-10 20:33:30', b'0');
INSERT INTO `system_menu` VALUES (1282, '积木报表', '', 2, 1, 1281, 'jimu-report', 'ep:histogram', 'visualization/jmreport/index', 0, b'1', b'1', '1', '2022-07-10 20:26:36', '1', '2022-07-28 21:17:34', b'0');
SET FOREIGN_KEY_CHECKS = 1;

6
yudao-dependencies/pom.xml
View File

@ -16,13 +16,13 @@
<properties>
<revision>1.6.4-snapshot</revision>
<!-- 统一依赖管理 -->
<spring.boot.version>2.6.12</spring.boot.version>
<spring.boot.version>2.6.13</spring.boot.version>
<!-- Web 相关 -->
<knife4j.version>3.0.3</knife4j.version>
<swagger-annotations.version>1.6.7</swagger-annotations.version>
<servlet.versoin>2.5</servlet.versoin>
<!-- DB 相关 -->
<druid.version>1.2.13-SNSAPSHOT</druid.version>
<druid.version>1.2.14</druid.version>
<mybatis-plus.version>3.5.2</mybatis-plus.version>
<mybatis-plus-generator.version>3.5.2</mybatis-plus-generator.version>
<dynamic-datasource.version>3.5.2</dynamic-datasource.version>
@ -45,7 +45,7 @@
<!-- 工具类相关 -->
<jasypt-spring-boot-starter.version>3.0.4</jasypt-spring-boot-starter.version>
<lombok.version>1.18.24</lombok.version>
<mapstruct.version>1.5.2.Final</mapstruct.version>
<mapstruct.version>1.5.3.Final</mapstruct.version>
<hutool.version>5.8.8</hutool.version>
<easyexcel.verion>3.1.1</easyexcel.verion>
<velocity.version>2.3</velocity.version>

20
yudao-ui-admin-vue3/README.md
View File

@ -2,7 +2,7 @@
<p align="center">
<img src="https://img.shields.io/badge/-Vue3.2-34495e?logo=vue.j" />
<img src="https://img.shields.io/badge/-Vite3-646cff?logo=vite&logoColor=white" />
<img src="https://img.shields.io/badge/-TypeScript4.7-blue?logo=typescript&logoColor=white" />
<img src="https://img.shields.io/badge/-TypeScript4.8-blue?logo=typescript&logoColor=white" />
<img src="https://img.shields.io/badge/-Pinia2-yellow?logo=picpay&logoColor=white" />
<img src="https://img.shields.io/badge/-ESLint-4b32c3?logo=eslint&logoColor=white" />
<img src="https://img.shields.io/badge/-pnpm7-F69220?logo=pnpm&logoColor=white" />
@ -28,16 +28,16 @@
| 框架 | 说明 | 版本 |
| --- | --- |--------|
| [Vue](https://staging-cn.vuejs.org/) | vue 框架 | 3.2.41 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 3.1.8 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.18 |
| [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 的超集 | 4.8.4 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 3.2.2 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.19 |
| [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 的超集 | 4.8.4 |
| [pinia](https://pinia.vuejs.org/) | Vue 存储库 替代 vuex5 | 2.0.23 |
| [vueuse](https://vueuse.org//) | 常用工具集 | 9.3.1 |
| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.2 |
| [vue-router](https://router.vuejs.org/) | vue 路由 | 4.1.5 |
| [windicss](https://cn.windicss.org/) | 下一代工具优先的 CSS 框架 | 3.5.6 |
| [iconify](https://icon-sets.iconify.design/) | 在线图标库 | 3.0.0 |
| [wangeditor](https://www.wangeditor.com/) | 富文本编辑器 | 5.1.21 |
| [vueuse](https://vueuse.org//) | 常用工具集 | 9.4.0 |
| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.2 |
| [vue-router](https://router.vuejs.org/) | vue 路由 | 4.1.6 |
| [windicss](https://cn.windicss.org/) | 下一代工具优先的 CSS 框架 | 3.5.6 |
| [iconify](https://icon-sets.iconify.design/) | 在线图标库 | 3.0.0 |
| [wangeditor](https://www.wangeditor.com/) | 富文本编辑器 | 5.1.22 |
### 推荐 VScode 开发，插件如下

14
yudao-ui-admin-vue3/index.html
View File

@ -6,13 +6,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="keywords"
content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite + element plus 的后台开源免费管理系统！"
/>
<meta
name="description"
content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite + element plus 的后台开源免费管理系统！"
/>
name="keywords"
content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite + element plus 的后台开源免费管理系统！"
/>
<meta
name="description"
content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite + element plus 的后台开源免费管理系统！"
/>
<title><%= title %></title>
</head>
<body>

55
yudao-ui-admin-vue3/package.json
View File

@ -1,7 +1,7 @@
{
"name": "ruoyi-vue-pro-vue3",
"version": "1.6.4.1811",
"description": "基于vue3、element-plus、typesScript、vite3",
"version": "1.6.4.1831",
"description": "基于vue3、vite3、element-plus、typesScript",
"author": "xingyu",
"private": false,
"scripts": {
@ -26,20 +26,20 @@
},
"dependencies": {
"@iconify/iconify": "^3.0.0",
"@vueuse/core": "^9.3.1",
"@wangeditor/editor": "^5.1.21",
"@vueuse/core": "^9.4.0",
"@wangeditor/editor": "^5.1.22",
"@wangeditor/editor-for-vue": "^5.1.10",
"@zxcvbn-ts/core": "^2.0.5",
"@zxcvbn-ts/core": "^2.1.0",
"animate.css": "^4.1.1",
"axios": "^0.27.2",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.5",
"dayjs": "^1.11.6",
"echarts": "^5.4.0",
"echarts-wordcloud": "^2.0.0",
"element-plus": "2.2.18",
"element-plus": "2.2.19",
"intro.js": "^6.0.0",
"jsencrypt": "^3.3.0",
"js-cookie": "^3.0.1",
"jsencrypt": "^3.2.1",
"lodash-es": "^4.17.21",
"mitt": "^3.0.0",
"nprogress": "^0.2.0",
@ -50,32 +50,34 @@
"vue": "3.2.41",
"vue-cropper": "^1.0.3",
"vue-i18n": "9.2.2",
"vue-router": "^4.1.5",
"vue-router": "^4.1.6",
"vue-types": "^4.2.1",
"web-storage-cache": "^1.1.1"
"vxe-table": "^4.3.5",
"web-storage-cache": "^1.1.1",
"xe-utils": "^3.5.7"
},
"devDependencies": {
"@commitlint/cli": "^17.1.2",
"@commitlint/config-conventional": "^17.1.0",
"@iconify/json": "^2.1.122",
"@commitlint/cli": "^17.2.0",
"@commitlint/config-conventional": "^17.2.0",
"@iconify/json": "^2.1.131",
"@intlify/vite-plugin-vue-i18n": "^6.0.3",
"@purge-icons/generated": "^0.9.0",
"@types/intro.js": "^5.1.0",
"@types/lodash-es": "^4.17.6",
"@types/node": "^18.11.0",
"@types/node": "^18.8.0",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.5.0",
"@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.40.0",
"@typescript-eslint/parser": "^5.40.0",
"@vitejs/plugin-vue": "^3.1.2",
"@vitejs/plugin-vue-jsx": "^2.0.1",
"autoprefixer": "^10.4.12",
"eslint": "^8.25.0",
"@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0",
"@vitejs/plugin-vue": "^3.2.0",
"@vitejs/plugin-vue-jsx": "^2.1.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.26.0",
"eslint-config-prettier": "^8.5.0",
"eslint-define-config": "^1.7.0",
"eslint-define-config": "^1.11.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.6.0",
"eslint-plugin-vue": "^9.7.0",
"less": "^4.1.3",
"lint-staged": "^13.0.3",
"plop": "^3.1.1",
@ -92,8 +94,8 @@
"stylelint-config-standard": "^29.0.0",
"stylelint-order": "^5.0.0",
"typescript": "4.8.4",
"unplugin-vue-macros": "^0.13.2",
"vite": "3.1.8",
"unplugin-vue-macros": "^0.15.2",
"vite": "3.2.2",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-html": "^3.2.0",
@ -101,9 +103,8 @@
"vite-plugin-style-import": "2.0.0",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-windicss": "^1.8.8",
"vue-tsc": "^1.0.8",
"windicss": "^3.5.6",
"windicss-analysis": "^0.3.5"
"vue-tsc": "^1.0.9",
"windicss": "^3.5.6"
},
"engines": {
"node": ">= 14.18.0"

7329
yudao-ui-admin-vue3/pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

8
yudao-ui-admin-vue3/src/api/system/post/types.ts
View File

@ -1,5 +1,5 @@
export type PostVO = {
id: number
id?: number
name: string
code: string
sort: number
@ -11,11 +11,13 @@ export type PostVO = {
export type PostPageReqVO = {
code: string
name: string
status: number
status?: number
pageSize?: number
pageNo?: number
}
export type PostExportReqVO = {
code: string
name: string
status: number
status?: number
}

2
yudao-ui-admin-vue3/src/components/ContextMenu/src/ContextMenu.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { PropType, ref, defineEmits } from 'vue'
import { PropType, ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useDesign } from '@/hooks/web/useDesign'
import type { RouteLocationNormalizedLoaded } from 'vue-router'

2
yudao-ui-admin-vue3/src/components/CountTo/src/CountTo.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, computed, watch, onMounted, unref, toRef, PropType, defineEmits } from 'vue'
import { reactive, computed, watch, onMounted, unref, toRef, PropType } from 'vue'
import { isNumber } from '@/utils/is'
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'

2
yudao-ui-admin-vue3/src/components/Crontab/src/Crontab.vue
View File

@ -24,7 +24,7 @@ import {
ElRadioButton,
ElMessage
} from 'element-plus'
import { ref, computed, onMounted, reactive, watch, PropType, defineEmits } from 'vue'
import { ref, computed, onMounted, reactive, watch, PropType } from 'vue'
interface shortcutsType {
text: string
value: string

7
yudao-ui-admin-vue3/src/components/Descriptions/src/Descriptions.vue
View File

@ -2,7 +2,7 @@
import { ElCollapseTransition, ElDescriptions, ElDescriptionsItem, ElTooltip } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign'
import { propTypes } from '@/utils/propTypes'
import { ref, unref, PropType, computed, useAttrs } from 'vue'
import { ref, unref, PropType, computed, useAttrs, useSlots } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { DescriptionsSchema } from '@/types/descriptions'
@ -12,6 +12,8 @@ const mobile = computed(() => appStore.getMobile)
const attrs = useAttrs()
const slots = useSlots()
const props = defineProps({
title: propTypes.string.def(''),
message: propTypes.string.def(''),
@ -96,6 +98,9 @@ const toggleClick = () => {
:direction="mobile ? 'vertical' : 'horizontal'"
v-bind="getBindValue"
>
<template v-if="slots['extra']" #extra>
<slot name="extra"></slot>
</template>
<ElDescriptionsItem
v-for="item in schema"
:key="item.field"

1
yudao-ui-admin-vue3/src/components/Error/src/Error.vue
View File

@ -4,7 +4,6 @@ import networkError from '@/assets/svgs/500.svg'
import noPermission from '@/assets/svgs/403.svg'
import { propTypes } from '@/utils/propTypes'
import { useI18n } from '@/hooks/web/useI18n'
import { defineEmits } from 'vue'
interface ErrorMap {
url: string

2
yudao-ui-admin-vue3/src/components/Icon/src/IconSelect.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { cloneDeep } from 'lodash-es'
import { ref, computed, CSSProperties, toRef, watch, defineEmits } from 'vue'
import { ref, computed, CSSProperties, toRef, watch } from 'vue'
import {
ElInput,
ElPopover,

2
yudao-ui-admin-vue3/src/components/Infotip/src/Infotip.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { PropType, defineEmits } from 'vue'
import { PropType } from 'vue'
import { Highlight } from '@/components/Highlight'
import { useDesign } from '@/hooks/web/useDesign'
import { propTypes } from '@/utils/propTypes'

2
yudao-ui-admin-vue3/src/components/InputPassword/src/InputPassword.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, unref, computed, watch, defineEmits } from 'vue'
import { ref, unref, computed, watch } from 'vue'
import { ElInput } from 'element-plus'
import { propTypes } from '@/utils/propTypes'
import { useConfigGlobal } from '@/hooks/web/useConfigGlobal'

2
yudao-ui-admin-vue3/src/components/Qrcode/src/Qrcode.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { PropType, nextTick, ref, watch, computed, unref, defineEmits } from 'vue'
import { PropType, nextTick, ref, watch, computed, unref } from 'vue'
import QRCode from 'qrcode'
import { QRCodeRenderersOptions } from 'qrcode'
import { cloneDeep } from 'lodash-es'

2
yudao-ui-admin-vue3/src/components/Search/src/Search.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { Form } from '@/components/Form'
import { PropType, computed, unref, ref, defineEmits } from 'vue'
import { PropType, computed, unref, ref } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { ElButton } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'

2
yudao-ui-admin-vue3/src/components/Setting/src/components/ColorRadioPicker.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { PropType, watch, unref, ref, defineEmits } from 'vue'
import { PropType, watch, unref, ref } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'

10
yudao-ui-admin-vue3/src/layout/components/ToolHeader.vue
View File

@ -48,25 +48,25 @@ export default defineComponent({
{layout.value !== 'top' ? (
<div class="h-full flex items-center">
{hamburger.value && layout.value !== 'cutMenu' ? (
<Collapse class="hover-tigger" color="var(--top-header-text-color)"></Collapse>
<Collapse class="hover-trigger" color="var(--top-header-text-color)"></Collapse>
) : undefined}
{breadcrumb.value ? <Breadcrumb class="<md:hidden"></Breadcrumb> : undefined}
</div>
) : undefined}
<div class="h-full flex items-center">
{screenfull.value ? (
<Screenfull class="hover-tigger" color="var(--top-header-text-color)"></Screenfull>
<Screenfull class="hover-trigger" color="var(--top-header-text-color)"></Screenfull>
) : undefined}
{size.value ? (
<SizeDropdown class="hover-tigger" color="var(--top-header-text-color)"></SizeDropdown>
<SizeDropdown class="hover-trigger" color="var(--top-header-text-color)"></SizeDropdown>
) : undefined}
{locale.value ? (
<LocaleDropdown
class="hover-tigger"
class="hover-trigger"
color="var(--top-header-text-color)"
></LocaleDropdown>
) : undefined}
<UserInfo class="hover-tigger"></UserInfo>
<UserInfo class="hover-trigger"></UserInfo>
</div>
</div>
)

6
yudao-ui-admin-vue3/src/layout/components/useRenderLayout.tsx
View File

@ -110,7 +110,7 @@ export const useRenderLayout = () => {
return (
<>
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
{logo.value ? <Logo class="hover-tigger !pr-15px"></Logo> : undefined}
{logo.value ? <Logo class="hover-trigger !pr-15px"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader>
</div>
@ -167,7 +167,7 @@ export const useRenderLayout = () => {
return (
<>
<div class="flex items-center justify-between bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
{logo.value ? <Logo class="hover-tigger"></Logo> : undefined}
{logo.value ? <Logo class="hover-trigger"></Logo> : undefined}
<Menu class="flex-1 px-10px h-[var(--top-tool-height)]"></Menu>
<ToolHeader></ToolHeader>
</div>
@ -204,7 +204,7 @@ export const useRenderLayout = () => {
return (
<>
<div class="flex items-center bg-[var(--top-header-bg-color)] border-bottom-1 border-solid border-[var(--top-tool-border-color)] dark:border-[var(--el-border-color)]">
{logo.value ? <Logo class="hover-tigger !pr-15px"></Logo> : undefined}
{logo.value ? <Logo class="hover-trigger !pr-15px"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader>
</div>

5
yudao-ui-admin-vue3/src/main.ts
View File

@ -16,6 +16,9 @@ import { setupGlobCom } from '@/components'
// 引入element-plus
import { setupElementPlus } from '@/plugins/elementPlus'
// 引入vxe-table
import { setupVxeTable } from '@/plugins/vxeTable'
// 引入全局样式
import '@/styles/index.less'
@ -44,6 +47,8 @@ const setupAll = async () => {
setupElementPlus(app)
setupVxeTable(app)
setupRouter(app)
setupAuth(app)

178
yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts Normal file
View File

@ -0,0 +1,178 @@
import { App, unref } from 'vue'
import 'xe-utils'
import XEUtils from 'xe-utils'
import { i18n } from '@/plugins/vueI18n'
import zhCN from 'vxe-table/es/locale/lang/zh-CN'
import enUS from 'vxe-table/lib/locale/lang/en-US'
import {
// 全局对象
VXETable,
// 表格功能
Filter,
Edit,
Menu,
Export,
Keyboard,
Validator,
// 可选组件
Icon,
Column,
Colgroup,
Grid,
Tooltip,
Toolbar,
Pager,
Form,
FormItem,
FormGather,
Checkbox,
CheckboxGroup,
Radio,
RadioGroup,
RadioButton,
Switch,
Input,
Select,
Optgroup,
Option,
Textarea,
Button,
Modal,
List,
Pulldown,
// 表格
Table
} from 'vxe-table'
// 全局默认参数
VXETable.setup({
size: 'medium', // 全局尺寸
version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
zIndex: 1008, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
loadingText: '加载中...', // 全局loading提示内容，如果为null则不显示文本
height: 600,
table: {
border: 'inner', // default（默认）, full（完整边框）, outer（外边框）, inner（内边框）, none（无边框）
align: 'center', // eft（左对齐）, center（居中对齐）, right（右对齐）
autoResize: true, // 自动监听父元素的变化去重新计算表格
resizable: true, // 列是否允许拖动列宽调整大小
emptyText: '暂无数据', // 空表单
highlightHoverRow: true // 自动监听父元素的变化去重新计算表格
},
grid: {
toolbarConfig: {
refresh: true,
import: true,
export: true,
print: true,
zoom: true,
custom: true
},
pagerConfig: {
border: false,
background: true,
autoHidden: true,
perfect: true,
pageSize: 10,
pagerCount: 7,
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500],
layouts: [
'PrevJump',
'PrevPage',
'Jump',
'PageCount',
'NextPage',
'NextJump',
'Sizes',
'Total'
]
}
},
pager: {
background: true,
autoHidden: false,
perfect: true,
pageSize: 10,
pagerCount: 7,
pageSizes: [10, 15, 20, 50, 100],
layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
},
input: {
clearable: true
},
form: {
titleColon: true // 是否显示标题冒号
},
modal: {
width: 600, // 窗口的宽度
height: 400, // 窗口的高度
showZoom: true, // 标题是否标显示最大化与还原按钮
resize: true, // 是否允许窗口边缘拖动调整窗口大小
marginSize: 0, // 只对 resize 启用后有效，用于设置可拖动界限范围，如果为负数则允许拖动超出屏幕边界
remember: false, // 记忆功能，会记住最后操作状态，再次打开窗口时还原窗口状态
destroyOnClose: true, // 在窗口关闭时销毁内容
storage: false, // 是否启用 localStorage 本地保存，会将窗口拖动的状态保存到本地
transfer: true, // 是否将弹框容器插入于 body 内
showFooter: true, // 是否显示底部
mask: true, // 是否显示遮罩层
maskClosable: true, // 是否允许点击遮罩层关闭窗口
escClosable: true // 是否允许按 Esc 键关闭窗口
},
i18n: (key, args) => {
return unref(i18n.global.locale) === 'zh-CN'
? XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
: XEUtils.toFormatString(XEUtils.get(enUS, key), args)
}
})
// 格式金额，默认2位数
VXETable.formats.add('formatAmount', ({ cellValue }, digits = 2) => {
return XEUtils.commafy(XEUtils.toNumber(cellValue), { digits })
})
// 格式日期，默认 yyyy-MM-dd HH:mm:ss
VXETable.formats.add('formatDate', ({ cellValue }, format = 'yyyy-MM-dd HH:mm:ss') => {
return XEUtils.toDateString(cellValue, format)
})
export const setupVxeTable = (app: App<Element>) => {
// 表格功能
app.use(Filter).use(Edit).use(Menu).use(Export).use(Keyboard).use(Validator)
// 可选组件
app
.use(Icon)
.use(Column)
.use(Colgroup)
.use(Grid)
.use(Tooltip)
.use(Toolbar)
.use(Pager)
.use(Form)
.use(FormItem)
.use(FormGather)
.use(Checkbox)
.use(CheckboxGroup)
.use(Radio)
.use(RadioGroup)
.use(RadioButton)
.use(Switch)
.use(Input)
.use(Select)
.use(Optgroup)
.use(Option)
.use(Textarea)
.use(Button)
.use(Modal)
.use(List)
.use(Pulldown)
// 安装表格
.use(Table)
// 给 vue 实例挂载内部对象，例如：
// app.config.globalProperties.$XModal = VXETable.modal
// app.config.globalProperties.$XPrint = VXETable.print
// app.config.globalProperties.$XSaveFile = VXETable.saveFile
// app.config.globalProperties.$XReadFile = VXETable.readFile
}

2
yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
View File

@ -138,7 +138,7 @@ const doSocialLogin = async (type: string) => {
location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/')
// 进行跳转
const res = await LoginApi.socialAuthRedirectApi(type, encodeURIComponent(redirectUri))
window.open = res
window.location.href = res
}
watch(
() => currentRoute.value,

2
yudao-ui-admin-vue3/src/views/infra/codegen/components/ImportTable.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, ref, defineEmits } from 'vue'
import { reactive, ref } from 'vue'
import { getSchemaTableListApi, createCodegenListApi } from '@/api/infra/codegen'
import {
ElMessage,

395
yudao-ui-admin-vue3/src/views/system/post/index.vue
View File

@ -1,139 +1,262 @@
<script setup lang="ts">
import { ref, unref } from 'vue'
import { reactive, ref } from 'vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { DICT_TYPE } from '@/utils/dict'
import { useTable } from '@/hooks/web/useTable'
import { useI18n } from '@/hooks/web/useI18n'
import { FormExpose } from '@/components/Form'
import type { PostVO } from '@/api/system/post/types'
import { rules, allSchemas } from './post.data'
import {
VxeFormEvents,
VxeFormInstance,
VxeFormItemProps,
VxeGrid,
VxeGridInstance,
VxeGridProps
} from 'vxe-table'
import * as PostApi from '@/api/system/post'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { ContentWrap } from '@/components/ContentWrap'
import { PostPageReqVO, PostVO } from '@/api/system/post/types'
import { rules, allSchemas } from './post.data'
import { ElMessage, ElMessageBox } from 'element-plus'
const { t } = useI18n() // 国际化
// ========== 列表相关 ==========
const { register, tableObject, methods } = useTable<PostVO>({
getListApi: PostApi.getPostPageApi,
delListApi: PostApi.deletePostApi,
exportListApi: PostApi.exportPostApi
})
const { getList, setSearchParams, delList, exportList } = methods
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const xGrid = ref<VxeGridInstance>()
const xForm = ref<VxeFormInstance>()
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const formRef = ref<FormExpose>() // 表单 Ref
const actionType = ref('') // 操作按钮的类型
const actionLoading = ref(false) // 遮罩层
const gridOptions = reactive<VxeGridProps>({
loading: false,
rowConfig: {
keyField: 'id',
isHover: true
},
toolbarConfig: {
custom: true,
slots: { buttons: 'toolbar_buttons' }
},
printConfig: {
columns: [
{ field: 'name' },
{ field: 'code' },
{ field: 'sort' },
{ field: 'status' },
{ field: 'createTime' }
]
},
formConfig: {
titleWidth: 100,
titleAlign: 'right',
items: [
{
field: 'name',
title: '岗位名称',
span: 6,
itemRender: { name: '$input', props: { placeholder: '请输入岗位名称' } }
},
{
field: 'code',
title: '岗位编码',
span: 6,
itemRender: { name: '$input', props: { placeholder: '请输入岗位编码' } }
},
{
field: 'status',
title: t('common.status'),
span: 6,
itemRender: { name: '$select', options: getIntDictOptions(DICT_TYPE.COMMON_STATUS) }
},
{
span: 24,
align: 'center',
collapseNode: true,
itemRender: {
name: '$buttons',
children: [
{ props: { type: 'submit', content: t('common.query'), status: 'primary' } },
{ props: { type: 'reset', content: t('common.reset') } }
]
}
}
]
},
columns: [
{ type: 'seq', title: t('common.index'), width: 100 },
{ field: 'name', title: '岗位名称' },
{ field: 'code', title: '岗位编码' },
{ field: 'sort', title: '岗位顺序' },
{
field: 'status',
title: t('common.status'),
slots: {
default: 'status_default'
}
},
{
field: 'createTime',
title: t('common.createTime'),
width: 160,
sortable: true,
formatter: 'formatDate'
},
{
field: 'action',
title: t('table.action'),
width: '240px',
showOverflow: true,
slots: {
default: 'action_default'
}
}
],
pagerConfig: {
border: false,
background: false,
perfect: true,
pageSize: 10,
pagerCount: 7,
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500],
layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
},
proxyConfig: {
seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
props: { result: 'list', total: 'total' },
ajax: {
query: ({ page, form }) => {
const queryParams: PostPageReqVO = Object.assign({}, form)
queryParams.pageSize = page.pageSize
queryParams.pageNo = page.currentPage
return new Promise(async (resolve) => {
resolve(await PostApi.getPostPageApi(queryParams))
})
}
}
}
})
const formData = ref<PostVO>()
const formItems = ref<VxeFormItemProps[]>([
{ field: 'id', title: 'id', visible: false },
{
field: 'name',
title: '岗位名称',
span: 12,
itemRender: { name: '$input', props: { placeholder: '请输入岗位名称' } }
},
{
field: 'code',
title: '岗位编码',
span: 12,
itemRender: { name: '$input', props: { placeholder: '请输入岗位编码' } }
},
{
field: 'sort',
title: '岗位顺序',
span: 12,
itemRender: { name: '$input', props: { type: 'number', placeholder: '请输入岗位顺序' } }
},
{
field: 'status',
title: t('common.status'),
span: 12,
itemRender: {
name: '$select',
options: getIntDictOptions(DICT_TYPE.COMMON_STATUS),
props: { placeholder: '请选择' }
}
},
{
align: 'center',
span: 24,
itemRender: {
name: '$buttons',
children: [
{ props: { type: 'submit', content: t('action.save'), status: 'primary' } },
{ props: { type: 'reset', content: t('common.reset') } }
]
}
}
])
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// ========== 详情相关 ==========
const detailRef = ref() // 详情 Ref
// 详情操作
const handleDetail = (row: PostVO) => {
setDialogTile('detail')
detailRef.value = row
}
// 新增操作
const handleCreate = () => {
setDialogTile('create')
// 重置表单
unref(formRef)?.getElFormRef()?.resetFields()
xForm.value?.reset()
}
// 修改操作
const handleUpdate = async (row: PostVO) => {
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
// 设置数据
const res = await PostApi.getPostApi(row.id)
unref(formRef)?.setValues(res)
const res = await PostApi.getPostApi(rowId)
formData.value = res
}
// 提交按钮
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
try {
const data = unref(formRef)?.formModel as PostVO
if (actionType.value === 'create') {
await PostApi.createPostApi(data)
ElMessage.success(t('common.createSuccess'))
} else {
await PostApi.updatePostApi(data)
ElMessage.success(t('common.updateSuccess'))
}
// 操作成功，重新加载列表
dialogVisible.value = false
await getList()
} finally {
actionLoading.value = false
}
}
// 删除操作
const handleDelete = (rowId: number) => {
ElMessageBox.confirm(t('common.delMessage'), t('common.confirmTitle'), {
confirmButtonText: t('common.ok'),
cancelButtonText: t('common.cancel'),
type: 'warning'
})
.then(async () => {
await PostApi.deletePostApi(rowId)
})
.finally(() => {
ElMessage.success(t('common.delSuccess'))
xGrid.value?.commitProxy('query')
})
}
// ========== 详情相关 ==========
const detailRef = ref() // 详情 Ref
// 详情操作
const handleDetail = async (row: PostVO) => {
// 设置数据
detailRef.value = row
setDialogTile('detail')
// 提交按钮
const submitForm: VxeFormEvents.Submit = async () => {
actionLoading.value = true
// 提交请求
try {
const data = formData.value as PostVO
if (actionType.value === 'create') {
await PostApi.createPostApi(data)
ElMessage.success(t('common.createSuccess'))
} else {
await PostApi.updatePostApi(data)
ElMessage.success(t('common.updateSuccess'))
}
// 操作成功，重新加载列表
dialogVisible.value = false
} finally {
actionLoading.value = false
xGrid.value?.commitProxy('query')
}
}
// ========== 初始化 ==========
getList()
</script>
<template>
<!-- 搜索工作区 -->
<ContentWrap>
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
</ContentWrap>
<ContentWrap>
<!-- 操作工具栏 -->
<div class="mb-10px">
<el-button type="primary" v-hasPermi="['system:post:create']" @click="handleCreate">
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
</el-button>
<el-button
type="warning"
v-hasPermi="['system:post:export']"
:loading="tableObject.exportLoading"
@click="exportList('岗位数据.xls')"
>
<Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
</el-button>
</div>
<!-- 列表 -->
<Table
:columns="allSchemas.tableColumns"
:selection="false"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{
total: tableObject.total
}"
v-model:pageSize="tableObject.pageSize"
v-model:currentPage="tableObject.currentPage"
@register="register"
>
<template #status="{ row }">
<vxe-grid ref="xGrid" v-bind="gridOptions">
<template #toolbar_buttons>
<el-button type="primary" v-hasPermi="['system:post:create']" @click="handleCreate">
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
</el-button>
</template>
<template #status_default="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #createTime="{ row }">
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
<template #action="{ row }">
<template #action_default="{ row }">
<el-button
link
type="primary"
v-hasPermi="['system:post:update']"
@click="handleUpdate(row)"
@click="handleUpdate(row.id)"
>
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
</el-button>
@ -149,46 +272,50 @@ getList()
link
type="primary"
v-hasPermi="['system:post:delete']"
@click="delList(row.id, false)"
@click="handleDelete(row.id)"
>
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
</el-button>
</template>
</Table>
</vxe-grid>
</ContentWrap>
<Dialog v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
ref="formRef"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailRef"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #createTime="{ row }">
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
</Descriptions>
<!-- 操作按钮 -->
<template #footer>
<el-button
<vxe-modal
v-model="dialogVisible"
id="myModal6"
:title="dialogTitle"
width="800"
height="400"
min-width="460"
min-height="320"
show-zoom
resize
remember
storage
transfer
show-footer
>
<template #default>
<!-- 对话框(添加 / 修改) -->
<vxe-form
ref="xForm"
v-if="['create', 'update'].includes(actionType)"
type="primary"
:loading="actionLoading"
@click="submitForm"
:data="formData"
:items="formItems"
:rules="rules"
@submit="submitForm"
/>
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailRef"
>
{{ t('action.save') }}
</el-button>
<el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #createTime="{ row }">
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
</Descriptions>
</template>
</Dialog>
</vxe-modal>
</template>

194
yudao-ui-admin-vue3/src/views/system/post/indexd.vue Normal file
View File

@ -0,0 +1,194 @@
<script setup lang="ts">
import { ref, unref } from 'vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { DICT_TYPE } from '@/utils/dict'
import { useTable } from '@/hooks/web/useTable'
import { useI18n } from '@/hooks/web/useI18n'
import { FormExpose } from '@/components/Form'
import type { PostVO } from '@/api/system/post/types'
import { rules, allSchemas } from './post.data'
import * as PostApi from '@/api/system/post'
const { t } = useI18n() // 国际化
// ========== 列表相关 ==========
const { register, tableObject, methods } = useTable<PostVO>({
getListApi: PostApi.getPostPageApi,
delListApi: PostApi.deletePostApi,
exportListApi: PostApi.exportPostApi
})
const { getList, setSearchParams, delList, exportList } = methods
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
const formRef = ref<FormExpose>() // 表单 Ref
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)
actionType.value = type
dialogVisible.value = true
}
// 新增操作
const handleCreate = () => {
setDialogTile('create')
// 重置表单
unref(formRef)?.getElFormRef()?.resetFields()
}
// 修改操作
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
// 设置数据
const res = await PostApi.getPostApi(rowId)
unref(formRef)?.setValues(res)
}
// 提交按钮
const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef()
if (!elForm) return
elForm.validate(async (valid) => {
if (valid) {
actionLoading.value = true
// 提交请求
try {
const data = unref(formRef)?.formModel as PostVO
if (actionType.value === 'create') {
await PostApi.createPostApi(data)
ElMessage.success(t('common.createSuccess'))
} else {
await PostApi.updatePostApi(data)
ElMessage.success(t('common.updateSuccess'))
}
// 操作成功，重新加载列表
dialogVisible.value = false
await getList()
} finally {
actionLoading.value = false
}
}
})
}
// ========== 详情相关 ==========
const detailRef = ref() // 详情 Ref
// 详情操作
const handleDetail = async (row: PostVO) => {
// 设置数据
detailRef.value = row
setDialogTile('detail')
}
// ========== 初始化 ==========
getList()
</script>
<template>
<!-- 搜索工作区 -->
<ContentWrap>
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
</ContentWrap>
<ContentWrap>
<!-- 操作工具栏 -->
<div class="mb-10px">
<el-button type="primary" v-hasPermi="['system:post:create']" @click="handleCreate">
<Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
</el-button>
<el-button
type="warning"
v-hasPermi="['system:post:export']"
:loading="tableObject.exportLoading"
@click="exportList('岗位数据.xls')"
>
<Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
</el-button>
</div>
<!-- 列表 -->
<Table
:columns="allSchemas.tableColumns"
:selection="false"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{
total: tableObject.total
}"
v-model:pageSize="tableObject.pageSize"
v-model:currentPage="tableObject.currentPage"
@register="register"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #createTime="{ row }">
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
<template #action="{ row }">
<el-button
link
type="primary"
v-hasPermi="['system:post:update']"
@click="handleUpdate(row.id)"
>
<Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
</el-button>
<el-button
link
type="primary"
v-hasPermi="['system:post:update']"
@click="handleDetail(row)"
>
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
</el-button>
<el-button
link
type="primary"
v-hasPermi="['system:post:delete']"
@click="delList(row.id, false)"
>
<Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
</el-button>
</template>
</Table>
</ContentWrap>
<Dialog v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
<Form
v-if="['create', 'update'].includes(actionType)"
:schema="allSchemas.formSchema"
:rules="rules"
ref="formRef"
/>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailRef"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #createTime="{ row }">
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
</Descriptions>
<!-- 操作按钮 -->
<template #footer>
<el-button
v-if="['create', 'update'].includes(actionType)"
type="primary"
:loading="actionLoading"
@click="submitForm"
>
{{ t('action.save') }}
</el-button>
<el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
</template>
</Dialog>
</template>

9
yudao-ui-admin-vue3/src/views/system/user/index.vue
View File

@ -121,9 +121,10 @@ const handleAdd = () => {
// 修改操作
const handleUpdate = async (row: UserVO) => {
await setDialogTile('update')
unref(formRef)?.delSchema('username')
unref(formRef)?.delSchema('password')
// 设置数据
const res = await UserApi.getUserApi(row.id)
console.info(res)
deptId.value = res.deptId
postIds.value = res.postIds
unref(formRef)?.setValues(res)
@ -358,9 +359,6 @@ onMounted(async () => {
v-model:currentPage="tableObject.currentPage"
@register="register"
>
<template #sex="{ row }">
<DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
</template>
<template #status="{ row }">
<el-switch
v-model="row.status"
@ -461,9 +459,6 @@ onMounted(async () => {
</template>
</el-tag>
</template>
<template #sex="{ row }">
<DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
</template>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>

18
yudao-ui-admin-vue3/src/views/system/user/user.data.ts
View File

@ -36,13 +36,20 @@ const crudSchemas = reactive<CrudSchema[]>([
{
label: '用户账号',
field: 'username',
form: {
show: false
},
search: {
show: true
}
},
{
label: '用户密码',
field: 'password',
form: {
component: 'InputPassword'
},
detail: {
show: false
}
},
{
label: '用户昵称',
field: 'nickname'
@ -58,11 +65,6 @@ const crudSchemas = reactive<CrudSchema[]>([
show: true
}
},
{
label: '用户性别',
field: 'sex',
dictType: DICT_TYPE.SYSTEM_USER_SEX
},
{
label: '部门',
field: 'deptId',

10
yudao-ui-admin-vue3/vite.config.ts
View File

@ -6,7 +6,7 @@ import WindiCSS from 'vite-plugin-windicss'
import VueJsx from '@vitejs/plugin-vue-jsx'
import EslintPlugin from 'vite-plugin-eslint'
import VueI18n from '@intlify/vite-plugin-vue-i18n'
import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
import { createStyleImportPlugin, ElementPlusResolve, VxeTableResolve } from 'vite-plugin-style-import'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import PurgeIcons from 'vite-plugin-purge-icons'
import { createHtmlPlugin } from 'vite-plugin-html'
@ -56,13 +56,19 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
VueJsx(),
WindiCSS(),
createStyleImportPlugin({
resolves: [ElementPlusResolve()],
resolves: [ElementPlusResolve(),VxeTableResolve()],
libs: [{
libraryName: 'element-plus',
esModule: true,
resolveStyle: (name) => {
return `element-plus/es/components/${name.substring(3)}/style/css`
}
},{
libraryName: 'vxe-table',
esModule: true,
resolveStyle: (name) => {
return `vxe-table/es/${name}/style.css`
}
}]
}),
EslintPlugin({

4
yudao-ui-admin-vue3/windi.config.ts
View File

@ -38,7 +38,7 @@ export default defineConfig({
}
})
addComponents({
'.hover-tigger': {
'.hover-trigger': {
display: 'flex',
height: '100%',
padding: '1px 10px 0',
@ -49,7 +49,7 @@ export default defineConfig({
backgroundColor: 'var(--top-header-hover-color)'
}
},
'.dark .hover-tigger': {
'.dark .hover-trigger': {
'&:hover': {
backgroundColor: 'var(--el-bg-color-overlay)'
}