mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-23 07:41:53 +08:00
芋道源码
Gitee
commit
ee3ac7b663
14
README.md
14
README.md
@ -175,16 +175,16 @@ 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+ | |
|
||||
| [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) |
|
||||
| [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) |
|
||||
| [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) |
|
||||
@ -193,7 +193,7 @@ ps：核心功能已经实现，正在对接微信小程序中...
|
||||
| [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) |
|
||||
| [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 | - |
|
||||
@ -210,8 +210,8 @@ ps：核心功能已经实现，正在对接微信小程序中...
|
||||
| 框架 | 说明 | 版本 |
|
||||
|----------------------------------------------------------------------|-----------------|--------|
|
||||
| [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 |
|
||||
| [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
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>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 |
|
||||
| [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 |
|
||||
| [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.5 |
|
||||
| [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.21 |
|
||||
| [wangeditor](https://www.wangeditor.com/) | 富文本编辑器 | 5.1.22 |
|
||||
|
||||
### 推荐 VScode 开发，插件如下
|
||||
|
||||
|
||||
@ -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
7329
yudao-ui-admin-vue3/pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
@ -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
|
||||
}
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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'
|
||||
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
178
yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
Normal 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
|
||||
}
|
||||
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -1,63 +1,230 @@
|
||||
<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 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 submitForm = async () => {
|
||||
const elForm = unref(formRef)?.getElFormRef()
|
||||
if (!elForm) return
|
||||
elForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
const submitForm: VxeFormEvents.Submit = async () => {
|
||||
actionLoading.value = true
|
||||
// 提交请求
|
||||
try {
|
||||
const data = unref(formRef)?.formModel as PostVO
|
||||
const data = formData.value as PostVO
|
||||
if (actionType.value === 'create') {
|
||||
await PostApi.createPostApi(data)
|
||||
ElMessage.success(t('common.createSuccess'))
|
||||
@ -67,73 +234,29 @@ const submitForm = async () => {
|
||||
}
|
||||
// 操作成功，重新加载列表
|
||||
dialogVisible.value = false
|
||||
await getList()
|
||||
} finally {
|
||||
actionLoading.value = false
|
||||
xGrid.value?.commitProxy('query')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// ========== 详情相关 ==========
|
||||
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">
|
||||
<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>
|
||||
<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 }">
|
||||
</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,23 +272,38 @@ 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">
|
||||
<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>
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<Form
|
||||
<vxe-form
|
||||
ref="xForm"
|
||||
v-if="['create', 'update'].includes(actionType)"
|
||||
:schema="allSchemas.formSchema"
|
||||
:data="formData"
|
||||
:items="formItems"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
@submit="submitForm"
|
||||
/>
|
||||
<!-- 对话框(详情) -->
|
||||
<Descriptions
|
||||
v-if="actionType === 'detail'"
|
||||
:schema="allSchemas.detailSchema"
|
||||
@ -178,17 +316,6 @@ getList()
|
||||
<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>
|
||||
</vxe-modal>
|
||||
</template>
|
||||
|
||||
194
yudao-ui-admin-vue3/src/views/system/post/indexd.vue
Normal file
194
yudao-ui-admin-vue3/src/views/system/post/indexd.vue
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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)'
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user