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

Merge pull request !282 from xingyu/dev

README.md

@@ -174,29 +174,29 @@ ps：核心功能已经实现，正在对接微信小程序中...
 
 ### 后端
 
-| 框架                                                                                         | 说明                   | 版本               | 学习指南                                                           |
+| 框架                                                                                         | 说明                   | 版本          | 学习指南                                                           |
-|---------------------------------------------------------------------------------------------|-----------------------|------------------|----------------------------------------------------------------|
+|---------------------------------------------------------------------------------------------|-----------------------|-------------|----------------------------------------------------------------|
-| [Spring Boot](https://spring.io/projects/spring-boot)                                       | 应用开发框架             | 2.6.12           | [文档](https://github.com/YunaiV/SpringBoot-Labs)                |
+| [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+       |                                                                |
+| [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) |
+| [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)         |
+| [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) |
+| [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              |                                                                |
+| [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)           |
+| [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 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) |
+| [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)      |
+| [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/)                                                     |
+| [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)             |
+| [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)         |
+| [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)    |
+| [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)      |
+| [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)           |
+| [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           |                                                                |
+| [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)       |
+| [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)          |
+| [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            | -                                                              |
+| [JUnit](https://junit.org/junit5/)                                                          | Java 单元测试框架        | 5.8.2       | -                                                              |
-| [Mockito](https://github.com/mockito/mockito)                                               | Java Mock 框架         | 4.8.0            | -                                                              |
+| [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 |
+| [Vue](https://staging-cn.vuejs.org/)                                 | Vue 框架         | 3.2.41 |
-| [Vite](https://cn.vitejs.dev//)                                      | 开发与构建工具         | 3.1.8  |
+| [Vite](https://cn.vitejs.dev//)                                      | 开发与构建工具     | 3.2.2  |
-| [Element Plus](https://element-plus.org/zh-CN/)                      | Element Plus    | 2.2.18 |
+| [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  |

pom.xml

@@ -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>
 

sql/mysql/vue3-menu.sql

@@ -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` 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 (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;

yudao-dependencies/pom.xml

@@ -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>

yudao-ui-admin-vue3/README.md

@@ -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 |
+| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 3.2.2  |
-| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.18 |
+| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.19 |
-| [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 的超集 | 4.8.4 |
+| [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 |
+| [vueuse](https://vueuse.org//) | 常用工具集 | 9.4.0  |
-| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.2 |
+| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.2.2  |
-| [vue-router](https://router.vuejs.org/) | vue 路由 | 4.1.5 |
+| [vue-router](https://router.vuejs.org/) | vue 路由 | 4.1.6  |
-| [windicss](https://cn.windicss.org/) | 下一代工具优先的 CSS 框架 | 3.5.6 |
+| [windicss](https://cn.windicss.org/) | 下一代工具优先的 CSS 框架 | 3.5.6  |
-| [iconify](https://icon-sets.iconify.design/) | 在线图标库 | 3.0.0 |
+| [iconify](https://icon-sets.iconify.design/) | 在线图标库 | 3.0.0  |
-| [wangeditor](https://www.wangeditor.com/) | 富文本编辑器 | 5.1.21 |
+| [wangeditor](https://www.wangeditor.com/) | 富文本编辑器 | 5.1.22 |
 
 ### 推荐 VScode 开发，插件如下
 

yudao-ui-admin-vue3/index.html

@@ -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"
+      name="keywords"
-			content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite + element plus 的后台开源免费管理系统！"
+      content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite + element plus 的后台开源免费管理系统！"
-		/>
+    />
-		<meta
+    <meta
-			name="description"
+      name="description"
-			content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite + element plus 的后台开源免费管理系统！"
+      content="芋道管理系统 基于 vue3 + CompositionAPI + typescript + vite + element plus 的后台开源免费管理系统！"
-		/>
+    />
     <title><%= title %></title>
   </head>
   <body>

yudao-ui-admin-vue3/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ruoyi-vue-pro-vue3",
-  "version": "1.6.4.1811",
+  "version": "1.6.4.1831",
-  "description": "基于vue3、element-plus、typesScript、vite3",
+  "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",
+    "@vueuse/core": "^9.4.0",
-    "@wangeditor/editor": "^5.1.21",
+    "@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/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.1.0",
+    "@commitlint/config-conventional": "^17.2.0",
-    "@iconify/json": "^2.1.122",
+    "@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/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.40.0",
+    "@typescript-eslint/parser": "^5.42.0",
-    "@vitejs/plugin-vue": "^3.1.2",
+    "@vitejs/plugin-vue": "^3.2.0",
-    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vitejs/plugin-vue-jsx": "^2.1.0",
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.4.13",
-    "eslint": "^8.25.0",
+    "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",
+    "unplugin-vue-macros": "^0.15.2",
-    "vite": "3.1.8",
+    "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",
+    "vue-tsc": "^1.0.9",
-    "windicss": "^3.5.6",
+    "windicss": "^3.5.6"
-    "windicss-analysis": "^0.3.5"
   },
   "engines": {
     "node": ">= 14.18.0"

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

@@ -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
 }

yudao-ui-admin-vue3/src/components/ContextMenu/src/ContextMenu.vue

@@ -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'

yudao-ui-admin-vue3/src/components/CountTo/src/CountTo.vue

@@ -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'

yudao-ui-admin-vue3/src/components/Crontab/src/Crontab.vue

@@ -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

yudao-ui-admin-vue3/src/components/Descriptions/src/Descriptions.vue

@@ -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"

yudao-ui-admin-vue3/src/components/Error/src/Error.vue

@@ -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

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

@@ -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,

yudao-ui-admin-vue3/src/components/Infotip/src/Infotip.vue

@@ -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'

yudao-ui-admin-vue3/src/components/InputPassword/src/InputPassword.vue

@@ -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'

yudao-ui-admin-vue3/src/components/Qrcode/src/Qrcode.vue

@@ -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'

yudao-ui-admin-vue3/src/components/Search/src/Search.vue

@@ -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'

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

@@ -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'
 

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

@@ -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>
     )

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

@@ -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>

yudao-ui-admin-vue3/src/main.ts

@@ -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)

yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts

@@ -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
+}

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

@@ -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,

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

@@ -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,

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

@@ -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 {
-import type { PostVO } from '@/api/system/post/types'
+  VxeFormEvents,
-import { rules, allSchemas } from './post.data'
+  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 xGrid = ref<VxeGridInstance>()
-const { register, tableObject, methods } = useTable<PostVO>({
+const xForm = ref<VxeFormInstance>()
-  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 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')
-  // 重置表单
+  xForm.value?.reset()
-  unref(formRef)?.getElFormRef()?.resetFields()
 }
 
 // 修改操作
-const handleUpdate = async (row: PostVO) => {
+const handleUpdate = async (rowId: number) => {
   setDialogTile('update')
   // 设置数据
-  const res = await PostApi.getPostApi(row.id)
+  const res = await PostApi.getPostApi(rowId)
-  unref(formRef)?.setValues(res)
+  formData.value = res
 }
-
+// 删除操作
-// 提交按钮
+const handleDelete = (rowId: number) => {
-const submitForm = async () => {
+  ElMessageBox.confirm(t('common.delMessage'), t('common.confirmTitle'), {
-  const elForm = unref(formRef)?.getElFormRef()
+    confirmButtonText: t('common.ok'),
-  if (!elForm) return
+    cancelButtonText: t('common.cancel'),
-  elForm.validate(async (valid) => {
+    type: 'warning'
-    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
-      }
-    }
   })
+    .then(async () => {
+      await PostApi.deletePostApi(rowId)
+    })
+    .finally(() => {
+      ElMessage.success(t('common.delSuccess'))
+      xGrid.value?.commitProxy('query')
+    })
 }
-
+// 提交按钮
-// ========== 详情相关 ==========
+const submitForm: VxeFormEvents.Submit = async () => {
-const detailRef = ref() // 详情 Ref
+  actionLoading.value = true
-
+  // 提交请求
-// 详情操作
+  try {
-const handleDetail = async (row: PostVO) => {
+    const data = formData.value as PostVO
-  // 设置数据
+    if (actionType.value === 'create') {
-  detailRef.value = row
+      await PostApi.createPostApi(data)
-  setDialogTile('detail')
+      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" />
+    <vxe-grid ref="xGrid" v-bind="gridOptions">
-  </ContentWrap>
+      <template #toolbar_buttons>
-  <ContentWrap>
+        <el-button type="primary" v-hasPermi="['system:post:create']" @click="handleCreate">
-    <!-- 操作工具栏 -->
+          <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
-    <div class="mb-10px">
+        </el-button>
-      <el-button type="primary" v-hasPermi="['system:post:create']" @click="handleCreate">
+      </template>
-        <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
+      <template #status_default="{ row }">
-      </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 }">
+      <template #action_default="{ 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)"
+          @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>
-
+  <vxe-modal
-  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    v-model="dialogVisible"
-    <!-- 对话框(添加 / 修改) -->
+    id="myModal6"
-    <Form
+    :title="dialogTitle"
-      v-if="['create', 'update'].includes(actionType)"
+    width="800"
-      :schema="allSchemas.formSchema"
+    height="400"
-      :rules="rules"
+    min-width="460"
-      ref="formRef"
+    min-height="320"
-    />
+    show-zoom
-    <!-- 对话框(详情) -->
+    resize
-    <Descriptions
+    remember
-      v-if="actionType === 'detail'"
+    storage
-      :schema="allSchemas.detailSchema"
+    transfer
-      :data="detailRef"
+    show-footer
-    >
+  >
-      <template #status="{ row }">
+    <template #default>
-        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
+      <!-- 对话框(添加 / 修改) -->
-      </template>
+      <vxe-form
-      <template #createTime="{ row }">
+        ref="xForm"
-        <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"
+        :data="formData"
-        :loading="actionLoading"
+        :items="formItems"
-        @click="submitForm"
+        :rules="rules"
+        @submit="submitForm"
+      />
+      <Descriptions
+        v-if="actionType === 'detail'"
+        :schema="allSchemas.detailSchema"
+        :data="detailRef"
       >
-        {{ t('action.save') }}
+        <template #status="{ row }">
-      </el-button>
+          <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
-      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
+        </template>
+        <template #createTime="{ row }">
+          <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+        </template>
+      </Descriptions>
     </template>
-  </Dialog>
+  </vxe-modal>
 </template>

yudao-ui-admin-vue3/src/views/system/post/indexd.vue

@@ -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>

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

@@ -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>

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

@@ -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',

yudao-ui-admin-vue3/vite.config.ts

@@ -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({

yudao-ui-admin-vue3/windi.config.ts

@@ -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)'
           }