820 lines
37 KiB
Markdown
820 lines
37 KiB
Markdown
|
||
|
||
<p align="center">
|
||
<img alt="JeeSite" src="https://jeesite.com/assets/images/logo.png" width="120" height="120" style="margin-bottom: 10px;">
|
||
</p>
|
||
<h3 align="center" style="margin:30px 0 30px;font-weight:bold;font-size:30px;">
|
||
JeeSite Vue3 前端源码<br>
|
||
使用 Turborepo、Monorepo、pnpm<br>
|
||
快速构建、模块化、代码复用、高效管理
|
||
</h3>
|
||
<p align="center">
|
||
<a href="https://v3.cn.vuejs.org/" target="__blank"><img alt="TypeScript-Vue3" src="https://img.shields.io/badge/TypeScript-Vue3-green.svg"></a>
|
||
<a href="https://www.antdv.com/" target="__blank"><img alt="Ant Design Vue-V4.x" src="https://img.shields.io/badge/Ant Design Vue-V4.x-brightgreen.svg"></a>
|
||
<a href="https://jeesite.com" target="__blank"><img alt="JeeSite-V5.x" src="https://img.shields.io/badge/JeeSite-V5.x-blue.svg"></a>
|
||
<a href="https://gitee.com/thinkgem/jeesite5" target="__blank"><img alt="star" src="https://gitee.com/thinkgem/jeesite5/badge/star.svg?theme=dark"></a>
|
||
<a href="https://gitee.com/thinkgem/jeesite-vue" target="__blank"><img alt="star" src="https://gitee.com/thinkgem/jeesite-vue/badge/star.svg?theme=dark"></a>
|
||
<a href="https://gitee.com/thinkgem/jeesite" target="__blank"><img alt="star" src="https://gitee.com/thinkgem/jeesite/badge/star.svg?theme=gvp"></a>
|
||
<a href="https://gitcode.com/thinkgem/jeesite" target="__blank"><img alt="star" src="https://gitcode.com/thinkgem/jeesite/star/badge.svg"></a>
|
||
</p>
|
||
|
||
------
|
||
|
||
<div align="center">
|
||
如果你喜欢 JeeSite，请给她一个 ⭐️ Star，您的支持将是我们前行的动力。
|
||
</div>
|
||
|
||
------
|
||
|
||
1. 单仓多包 pnpm + Turborepo 涡轮增压，提升编译速度，方便统一管理脚本任务
|
||
2. 按功能模块进行拆分为不同的包，方便进行团队开发源码管理，可根据需要进行发包
|
||
3. 模块之间松耦合，单依赖，公共模块，公共组件，公共工具，方便代码复用
|
||
4. 可方便从传统架构版本，升级到 Monorepo 模块化、分包架构
|
||
|
||
## 技术交流
|
||
|
||
* 官方网站：<https://jeesite.com>
|
||
* 使用文档：<https://jeesite.com/docs>
|
||
* 问题反馈：[http://jeesite.net](https://gitee.com/thinkgem/jeesite5/issues/new) |
|
||
[gitcode](https://gitcode.com/thinkgem/jeesite/issues/create/choose) |
|
||
[新手必读](https://gitee.com/thinkgem/jeesite5/issues/I18ARR)
|
||
* 联系我们：<http://s.jeesite.com>
|
||
* 关注微信公众号，了解最新动态：
|
||
|
||
<p style="padding-left:40px">
|
||
<img alt="JeeSite微信公众号" src="https://jeesite.com/assets/images/mp.png" width="200">
|
||
</p>
|
||
|
||
* QQ 群：`127515876`、`209330483`、`223507718`、`709534275`、`730390092`、`1373527`、`183903863(外包)`
|
||
* 微信群：如果二维码过期，请尝试点击图片并F5刷新，或者添加客服微信 jeesitex 邀请您进群
|
||
|
||
<p style="padding-left:40px"><a href="https://jeesite.com/assets/images/wxg_cur.png" target="_blank">
|
||
<img alt="JeeSite微信群" src="https://jeesite.com/assets/images/wxg_cur.png" width="200"/></a>
|
||
</p>
|
||
|
||
* 后端源码仓库地址：
|
||
[Gitee](https://gitee.com/thinkgem/jeesite5)、
|
||
[GitCode](https://gitcode.com/thinkgem/jeesite5)、
|
||
[GitHub](https://github.com/thinkgem/jeesite5)
|
||
* 前端源码仓库地址：
|
||
[Gitee](https://gitee.com/thinkgem/jeesite-vue)、
|
||
[GitCode](https://gitcode.com/thinkgem/jeesite-vue)、
|
||
[GitHub](https://github.com/thinkgem/jeesite-vue)
|
||
* 源码合集仓库地址：
|
||
[GVP](https://gitee.com/thinkgem/jeesite/tree/main)、
|
||
[G-Star](https://gitcode.com/thinkgem/jeesite/tree/main)、
|
||
[GitHub](https://github.com/thinkgem/jeesite/tree/main)
|
||
|
||
## 平台介绍
|
||
|
||
* JeeSite 快速开发平台，低代码，轻量级，不仅仅是一个后台开发框架，它是一个企业级快速开发解决方案，后端基于经典组合 Spring Boot、Shiro、MyBatis，前端采用分离版 Vue3、Vite、Monorepo、Ant Design Vue、TypeScript、Vben Admin 最先进技术栈，或者 Beetl、Bootstrap、AdminLTE 经典开发模式。
|
||
|
||
* 提供在线数据源管理、数据表建模、代码生成等功能，可自动创建业务模块代码工程和微服务模块代码工程，自动生成前端代码和后端代码；包括核心功能模块如：组织机构、用户、角色、岗位、管理员、权限审计、菜单及按钮权限、数据权限、模块管理、系统参数、字典管理、系统监控、数据监控等；扩展功能如：工作流引擎、内容管理、消息推送、单点登录、第三方登录、在线作业调度、对象存储、可视化数据大屏、报表设计器、在线文件预览、国际化、全文检索、统一认证服务等。
|
||
|
||
* 本平台采用松耦合设计，真正的轻量级，微内核，快速部署，插件架构，模块增减便捷，支持扩展 SaaS 架构、集群部署、读写分离、分库分表、Spring Cloud 微服务架构；并内置了众多账号安全设置、密码策略、系统访问限制等安全解决方案，支持等保评测。
|
||
|
||
* 本平台专注于为初级研发人员提供强大的支持，使他们能够高效、快速地开发出复杂的业务功能，同时为中高级人员腾出宝贵的时间，专注于更具战略性和创新性的任务。我们致力于让开发者能够全心投入业务逻辑中，而将繁琐的技术细节交由平台来封装处理。这不仅降低了技术实现的难度，还确保了系统架构的稳定性和安全性，进而帮助企业节省人力成本、缩短项目周期，并提高整体软件的安全性和质量。
|
||
|
||
* 2013 年发布以来已被广大爱好者用到了企业、政府、医疗、金融、互联网等各个领域中，拥有：精良架构、易于扩展、大众思维的设计模式，工匠精神，用心打磨每一个细节，深入开发者的内心，并荣获开源中国《最受欢迎中国开源软件》多次奖项，期间也帮助了不少刚毕业的大学生，教师作为入门教材，快速的去实践。
|
||
|
||
* 2019 年换代升级，我们结合了多年总结和经验，以及各方面的应用案例，对架构完成了一次全部重构，也纳入很多新的思想。不管是从开发者模式、底层架构、逻辑处理还是到用户界面，用户交互体验上都有很大的进步，在不忘学习成本、提高开发效率的情况下，安全方面也做和很多工作，包括：身份认证、密码策略、安全审计、日志收集等众多安全选项供您选择。努力为大中小微企业打造全方位企业级快速开发解决方案。
|
||
|
||
* 2021 年终发布 Vue3 的前后分离版本，使得 JeeSite 拥有同一个后台服务 Web 来支撑分离版和全栈版两套前端技术栈。
|
||
|
||
* 对接 OpenAPI、Ollama、DeepSeek 等热门 AI 大模型，凭借检索增强生成 RAG 技术，为企业知识库打造专属智能对话。
|
||
|
||
* 提供大模型 Tool 本地工具调用及 MCP 服务端和客户端工具调用，助力大模型与您的业务深度融合，实现高效交互。
|
||
|
||
* 支持国产化软件和硬件环境，如国产芯片、操作系统、数据库、中间件、国密算法等。
|
||
|
||
## 核心优势
|
||
|
||
* JeeSite 非常易于二次开发，可控性高，整体架构清晰、技术稳定而先进、源代码书写规范、经典技术会的人多、易于维护、易于扩展、安全稳定。
|
||
|
||
* JeeSite 功能全，知识点非常多，也非常少。因为她使用的都是一些通用的技术，通俗的设计风格，大多数基础知识点，多数人都能掌握，所以每一个 JeeSite 的功能点都非常容易掌握。只要您学会使用这些功能和组件的应用，就可以顺利地完成系统开发了。
|
||
|
||
* JeeSite 是一个低代码开发平台，具有较高的封装度、扩展性，封装不是限制您去做一些事情，而是在便捷的同时，也具有较好的扩展性，在不具备一些功能的情况下，JeeSite 提供了扩展接口，提供了原生调用方法。
|
||
|
||
* 大家都在用 Spring，也在学习 Spring 的优点，Spring 提供了较好的扩展性，可又有多少人去修改它的源代码呢，退一步说，大家去修改了 Spring 的源码，反而会对未来升级造成很大困扰，您说不是呢？这样的例子很多，所以不要纠结，我们非常注重这一点，JeeSite 也一样具备强大的扩展性。为你解决升级的困扰。
|
||
|
||
* 为什么说 JeeSite 比较易于学习？JeeSite 很好的把握了设计的 “度”，避免过度设计的情况。过度设计是在产品设计过程中忽略了产品和用户的实际需求，反而带来了不必要的复杂性，而忽略了系统的学习、开发和维护成本。
|
||
|
||
------
|
||
|
||
* 至今 JeeSite 平台架构已经非常稳定，我们持续升级，并不失架构的先进性。
|
||
* JeeSite 精益求精，用心打磨每一个细节，界面 UI 操作便捷，体验性好。
|
||
* JeeSite 是一个专业的平台，是一个可以让您，用着省心的平台。
|
||
* 社区版基于 Apache License 2.0 开源协议，永久免费使用。
|
||
|
||
### 架构特点及安全方面的优势：<https://jeesite.com/docs/feature/>
|
||
|
||
## Vue 前端简介
|
||
|
||
基于 Vue3、Vite、Ant-Design-Vue、TypeScript 和 Vue Vben Admin 等前沿技术栈构建，本软件采用最先进的技术架构，
|
||
帮助初学者快速上手并融入团队开发。内置组织机构、角色用户、菜单授权、数据权限、系统参数等核心模块，结合强大的组件封装
|
||
与数据驱动视图设计，为微小、中大型项目提供开箱即用的解决方案和丰富的示例，助力高效开发。
|
||
|
||
用户界面专为信息化管理后台量身打造，在界面设计上精益求精，每一处细节都彰显着精致，为用户带来优雅且直观的操作体验。
|
||
它提供多样化的菜单布局、智能的页签管理、高效的树表操作体验、强大的表格组件、灵活的表单组件设计，具备强大的扩展能力，
|
||
同时支持黑暗布局风格，为用户提供高效、灵活且美观的操作体验，满足各类管理后台的复杂需求。
|
||
|
||
另外我们还支持 Turborepo + Monorepo 快速构建、模块化、代码复用、支持分包开发
|
||
详见：<https://gitee.com/thinkgem/jeesite-vue/tree/monorepo/>
|
||
|
||
## 前端技术特点
|
||
|
||
定义众多组件，非常贴心的组件属性及小功能，符合 JeeSite 以往的设计思想，列表和表单以数据驱动视图，
|
||
极大简化了业务功能开发， 注释分解详见【[源码解析](https://jeesite.com/docs/vue-crud-view)】
|
||
|
||
为什么做数据驱动视图？前端向下兼容一直是最大的问题，有了一套相应的标准，会对框架升级帮助很大。
|
||
比如你可以非常小的成本，业务代码改动非常小的情况下，去升级前端；数据驱动视图可以为未来自定义拖拽表单做更好的铺垫，
|
||
数据存储结构更清晰化，更利于维护。
|
||
|
||
提示：请仔细阅读源码解析，表单视图和列表视图上的注释哦，支持复杂表单以及多表单联合使用。
|
||
|
||
## 演示地址
|
||
|
||
1. 地址：<http://vue.jeesite.com/>
|
||
|
||
## 学习准备
|
||
|
||
- [VSCode](https://code.visualstudio.com/) - 推荐 IDE 集成开发工具
|
||
- [Node.js 20](https://nodejs.org/dist/latest-v20.x/) 和 [git](https://git-scm.com/) - 开发环境
|
||
- [Vite](https://vitejs.dev/) - 熟悉 Vite 特性
|
||
- [Vue-v3](https://cn.vuejs.org/) - 熟悉 Vue 基础语法
|
||
- [TypeScript](https://www.typescriptlang.org/) - 熟悉 TS 基本语法
|
||
- [ES6+](http://es6.ruanyifeng.com/) - 熟悉 ES6 基本语法
|
||
- [Vue-Router-v4](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
|
||
- [Vue-Vben-Admin](https://jeesite.com/front/vben-admin/) - 熟悉 UI 及表单列表及常用组件使用
|
||
- [Ant-Design-Vue](https://antdv.com/components/overview-cn/) - 熟悉 UI 基本使用
|
||
|
||
## 安装使用
|
||
|
||
- 如果没有安装 Node.js 20+，下载地址：<https://nodejs.org>
|
||
|
||
```bash
|
||
# 验证
|
||
node -v
|
||
# 配置国内源
|
||
npm config set registry https://registry.npmmirror.com
|
||
```
|
||
|
||
- 如果没有安装 Pnpm 执行安装
|
||
|
||
```bash
|
||
npm i -g pnpm
|
||
# 验证
|
||
pnpm -v
|
||
# 配置国内源
|
||
pnpm config set registry https://registry.npmmirror.com
|
||
```
|
||
|
||
- 获取源代码
|
||
|
||
```bash
|
||
git clone https://gitee.com/thinkgem/jeesite-vue.git
|
||
cd jeesite-vue
|
||
```
|
||
注意：不要放到中文或带空格的目录下。
|
||
|
||
- 安装依赖
|
||
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
- 开发环境运行访问（方式一）
|
||
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
开发环境会加载文件较多，便于调试，请耐心等待。
|
||
|
||
- 编译打包后运行访问（方式二）
|
||
|
||
```bash
|
||
pnpm preview
|
||
```
|
||
编译打包后，会整合这些文件，所以访问性能会大大提高，生产环境可以开启 gzip
|
||
|
||
- 打包发布程序
|
||
|
||
```bash
|
||
pnpm build
|
||
```
|
||
打包完成后，会在根目录生成 dist 文件夹，发布 nginx。
|
||
|
||
详见文档：<https://jeesite.com/docs/vue-install-deploy/#部署到正式服务器>
|
||
|
||
### 后端服务
|
||
|
||
- 安装后台服务 [JeeSite v5.x](https://gitee.com/thinkgem/jeesite5/tree/v5.springboot3/)
|
||
- 打开 [.env.development](https://jeesite.com/docs/vue-settings/#env-development-详解) 文件，修改后台接口：
|
||
|
||
```bash
|
||
# 代理设置，可配置多个，不能换行，格式：[访问接口的根路径, 代理地址, 是否保持Host头]
|
||
# VITE_PROXY = [["/js","https://vue.jeesite.com/js",true]]
|
||
VITE_PROXY = [["/js","http://127.0.0.1:8980/js",false]]
|
||
|
||
# 访问接口的根路径（例如：https://vue.jeesite.com）
|
||
VITE_GLOB_API_URL =
|
||
|
||
# 访问接口的前缀，在根路径之后
|
||
VITE_GLOB_API_URL_PREFIX = /js
|
||
```
|
||
|
||
### 如果您使用的 VSCode 的话，推荐安装以下插件：
|
||
|
||
* [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - UnoCSS 提示插件
|
||
* [Iconify](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Iconify 图标插件
|
||
* [I18n-ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) - i18n 插件
|
||
* [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue3 开发必备（Vetur禁用）
|
||
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 脚本代码检查
|
||
* [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化
|
||
* [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - CSS 格式化
|
||
* [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - .env 文件高亮
|
||
|
||
## 常见问题
|
||
|
||
* Vue 版本的浏览器支持情况：支持所有现代浏览器，Vue3 已不再支持 IE 浏览器。
|
||
* 为什么使用抽屉作为表单组件，因为抽屉空间更大，可以展示更多内容，且操作更友好。
|
||
* 如何将表单抽屉改为弹窗，替换 list 和 form 页面的 Drawer 为 Modal 即可，V5.6增加了路由表单和弹窗表单的代码生成。
|
||
* 打不开代码生成工具怎么办？提示 404，请检查 .env.development 中的代理配置 VITE_PROXY 最后一个参数（是否保持Host头），本地服务 127.0.0.1 应设置为 false，远程服务设置为 true。
|
||
* 更多文档详见：<https://jeesite.com/docs/vue-faq/#常见问题>
|
||
|
||
## 软件截图
|
||
|
||
<img src="https://oscimg.oschina.net/oscnet/up-db83c334daab05d89a0930d8497816da6a4.png"/>
|
||
<img src="https://oscimg.oschina.net/oscnet/up-685134ad2a721e0a7818efe4201d476e332.png"/>
|
||
<img src="https://oscimg.oschina.net/oscnet/up-3ac1f31bdb399431cd0f6af479acc7f2e58.png"/>
|
||
<img src="https://oscimg.oschina.net/oscnet/up-6a4c84696b589ba2a3bd034c2b9026b40e1.png"/>
|
||
<img src="https://oscimg.oschina.net/oscnet/up-b85f44704e4a8c1e3a50f1c10e7e413341a.png"/>
|
||
<img src="https://oscimg.oschina.net/oscnet/up-f03d07d58b351e1f2fc9931ea2dba550429.png"/>
|
||
<img src="https://oscimg.oschina.net/oscnet/up-a36a005290cb95bc625e0933c867edc7e6f.png"/>
|
||
|
||
## 附录
|
||
|
||
### 表单视图
|
||
|
||
```html
|
||
<template>
|
||
<!-- 弹出抽屉组件，如果想改为弹窗，Drawer 换为 Modal 即可快速替换 -->
|
||
<BasicDrawer
|
||
v-bind="$attrs" -- 传递来自父组件的属性
|
||
:showFooter="true" -- 显示弹窗底部按钮组
|
||
:okAuth="'test:testData:edit'" -- 提交按钮权限，控制按钮是否显示
|
||
@register="registerDrawer" -- 弹窗后的回调方法
|
||
@ok="handleSubmit" -- 提交按钮调用方法
|
||
width="60%" -- 弹窗宽度，支持按比例
|
||
>
|
||
<!-- 弹窗标题 -->
|
||
<template #title>
|
||
<Icon :icon="getTitle.icon" class="pr-1 m-1" /> -- 图标
|
||
<span> {{ getTitle.value }} </span> -- 标题名称
|
||
</template>
|
||
<!-- 表单组件 -->
|
||
<BasicForm @register="registerForm">
|
||
<!-- 定义表单控件插槽、个性化表单控件，如：这是一个表单子表插槽 -->
|
||
<template #testDataChildList>
|
||
<BasicTable
|
||
@register="registerTestDataChildTable"
|
||
@row-click="handleTestDataChildRowClick"
|
||
/>
|
||
<!-- 子表新增按钮 -->
|
||
<a-button class="mt-2" @click="handleTestDataChildAdd">
|
||
<Icon icon="i-ant-design:plus-circle-outlined" /> {{ t('新增') }}
|
||
</a-button>
|
||
</template>
|
||
</BasicForm>
|
||
</BasicDrawer>
|
||
</template>
|
||
<!-- script name: 当前组件名称（与路由名一致，如果不一致会页面缓存失效）-->
|
||
<script lang="ts" setup name="ViewsTestTestDataForm">
|
||
|
||
// 导入当前用到的对象，部分省略
|
||
import { ref, unref, computed } from 'vue';
|
||
import { officeTreeData } from '/@/api/sys/office';
|
||
|
||
// 页面事件定义
|
||
const emit = defineEmits(['success', 'register']);
|
||
|
||
// 国际化方法调用，参数是国际化编码的根路径
|
||
const { t } = useI18n('test.testData');
|
||
|
||
// 消息弹窗方法
|
||
const { showMessage } = useMessage();
|
||
|
||
// 路由meta信息
|
||
const { meta } = unref(router.currentRoute);
|
||
|
||
// 当前页面数据记录
|
||
const record = ref<Recordable>({});
|
||
|
||
// 当前页面标题定义，来自菜单管理定义
|
||
const getTitle = computed(() => ({
|
||
icon: meta.icon || 'ant-design:book-outlined',
|
||
value: record.value.isNewRecord ? t('新增数据') : t('编辑数据'),
|
||
}));
|
||
|
||
// 输入表单控件定义
|
||
const inputFormSchemas: FormSchema[] = [
|
||
{
|
||
label: t('单行文本'), // 控件前面的页签
|
||
field: 'testInput', // 字段提交参数名
|
||
component: 'Input', // 控件类型（可自定义，更多查看 componentMap.ts ）
|
||
componentProps: { // 组件属性定义
|
||
maxlength: 200,
|
||
},
|
||
required: true, // 表单验证，是否必填（快速定义）
|
||
rules: [ // 如果不只是必填，需要通过 rules 定义，举例：
|
||
{ required: true },
|
||
{ min: 4, max: 20, message: t('请输入长度在 4 到 20 个字符之间') },
|
||
{ pattern: /^[\u0391-\uFFE5\w]+$/, message: t('不能输入特殊字符') },
|
||
{
|
||
validator(_rule, value) {
|
||
return new Promise((resolve, reject) => {
|
||
if (!value || value === '') return resolve();
|
||
// 远程验证，访问后台校验数据是否重复
|
||
checkTestInput(record.value.testInput || '', value)
|
||
.then((res) => (res ? resolve() : reject(t('数据已存在'))))
|
||
.catch((err) => reject(err.message || t('验证失败')));
|
||
});
|
||
},
|
||
trigger: 'blur', // 如果是远程验证，可以减少请求频率
|
||
},
|
||
],
|
||
colProps: { lg: 24, md: 24 }, // 栅格布局（遵循 Ant Design 风格）
|
||
},
|
||
{
|
||
label: t('下拉框'),
|
||
field: 'testSelect',
|
||
component: 'Select', // 选择框还有 RadioGroup、CheckboxGroup
|
||
componentProps: {
|
||
dictType: 'sys_menu_type', // 下拉框选项数据（支持直接指定字典类型）
|
||
allowClear: true, // 启用空选项，可清空选择
|
||
mode: 'multiple', // 下拉框模块，启用多选
|
||
},
|
||
},
|
||
{
|
||
label: t('日期选择'),
|
||
field: 'testDate',
|
||
component: 'DatePicker',
|
||
componentProps: {
|
||
format: 'YYYY-MM-DD', // 日期选择
|
||
showTime: false, // 关闭时间选择
|
||
},
|
||
},
|
||
{
|
||
label: t('日期时间'),
|
||
field: 'testDatetime',
|
||
component: 'DatePicker',
|
||
componentProps: {
|
||
format: 'YYYY-MM-DD HH:mm', // 日期时间选择
|
||
showTime: { format: 'HH:mm' }, // 设置时间的格式
|
||
},
|
||
},
|
||
{
|
||
label: t('用户选择'),
|
||
field: 'testUser.userCode',
|
||
fieldLabel: 'testUser.userName', //【支持返回，如下拉框或树选择的节点名】
|
||
component: 'TreeSelect', // 树选择控件
|
||
componentProps: {
|
||
api: officeTreeData, // 数据源 API 定义，支持 ztree 格式
|
||
params: { isLoadUser: true, userIdPrefix: '' }, // API 参数
|
||
canSelectParent: false, // 是否允许选择父级
|
||
allowClear: true,
|
||
},
|
||
},
|
||
{
|
||
label: t('子表数据'),
|
||
field: 'testDataChildList',
|
||
component: 'Input',
|
||
colProps: { lg: 24, md: 24 },
|
||
slot: 'testDataChildList', // 指定插槽、个性化控件内容
|
||
},
|
||
];
|
||
|
||
// 当前表单的参数定义
|
||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||
labelWidth: 120, // 控件前面的标签宽度
|
||
schemas: inputFormSchemas, // 控件定义列表
|
||
baseColProps: { lg: 12, md: 24 }, // 控件默认栅格布局方式（响应式）
|
||
});
|
||
|
||
// 当前表单子表格定义
|
||
const [registerTestDataChildTable, testDataChildTable] = useTable({
|
||
actionColumn: { // 子表的操作列定义
|
||
width: 60, // 操作列宽度
|
||
actions: (record: Recordable) => [
|
||
{
|
||
icon: 'i-ant-design:delete-outlined',
|
||
color: 'error',
|
||
popConfirm: { // 是否需要启用确认框
|
||
title: '是否确认删除',
|
||
confirm: handleTestDataChildDelete.bind(this, record),
|
||
},
|
||
auth: 'sys:empUser:edit', // 按钮权限（可控制按钮是否显示）
|
||
},
|
||
],
|
||
},
|
||
rowKey: 'id', // 子表主键名
|
||
pagination: false,// 关闭分页
|
||
bordered: true, // 开启表格边框
|
||
size: 'small', // 单元格间距
|
||
inset: true, // 是否内嵌（去除一些边距）
|
||
});
|
||
|
||
// 当前表单子表自动定义
|
||
async function setTestDataChildTableData(_res: Recordable) {
|
||
testDataChildTable.setColumns([
|
||
{
|
||
title: t('单行文本'),
|
||
dataIndex: 'testInput',
|
||
width: 230,
|
||
align: 'left',
|
||
editRow: true, // 是否启用编辑
|
||
editComponent: 'Input', // 编辑控件（可自定义，更多查看 componentMap.ts ）
|
||
editRule: true, // 控件验证（是否必填）
|
||
},
|
||
{
|
||
title: t('下拉框'),
|
||
dataIndex: 'testSelect',
|
||
width: 130,
|
||
align: 'left',
|
||
dictType: 'sys_menu_type', // 指定字典类型，自动显示字典标签
|
||
editRow: true,
|
||
editComponent: 'Select',
|
||
editComponentProps: { // 控件属性
|
||
dictType: 'sys_menu_type', // 下拉框的字段类型
|
||
allowClear: true,
|
||
},
|
||
editRule: false,
|
||
},
|
||
// 更多组件控件不举例了，同表单控件 ...
|
||
]);
|
||
// 设定子表数据
|
||
testDataChildTable.setTableData(record.value.testDataChildList || []);
|
||
}
|
||
|
||
// 点击行，启用编辑
|
||
function handleTestDataChildRowClick(record: Recordable) {
|
||
record.onEdit?.(true, false);
|
||
}
|
||
|
||
// 添加编辑行，可指定初始数据
|
||
function handleTestDataChildAdd() {
|
||
testDataChildTable.insertTableDataRecord({
|
||
id: new Date().getTime(),
|
||
isNewRecord: true,
|
||
editable: true,
|
||
});
|
||
}
|
||
|
||
// 删除编辑行方法
|
||
function handleTestDataChildDelete(record: Recordable) {
|
||
testDataChildTable.deleteTableDataRecord(record);
|
||
}
|
||
|
||
// 获取子表数据（支持返回删除未提交的数据）
|
||
async function getTestDataChildList() {
|
||
let testDataChildListValid = true;
|
||
let testDataChildList: Recordable[] = [];
|
||
for (const record of testDataChildTable.getDataSource()) {
|
||
// 验证控件内容，并取消行的编辑状态（如果验证失败返回false）
|
||
if (!(await record.onEdit?.(false, true))) {
|
||
testDataChildListValid = false;
|
||
}
|
||
testDataChildList.push({
|
||
...record,
|
||
id: !!record.isNewRecord ? '' : record.id,
|
||
});
|
||
}
|
||
for (const record of testDataChildTable.getDelDataSource()) {
|
||
if (!!record.isNewRecord) continue;
|
||
testDataChildList.push({
|
||
...record,
|
||
status: '1',
|
||
});
|
||
}
|
||
// 子表验证事件，抛出异常消息
|
||
if (!testDataChildListValid) {
|
||
throw { errorFields: [{ name: ['testDataChildList'] }] };
|
||
}
|
||
return testDataChildList;
|
||
}
|
||
|
||
// 弹窗后的回调事件，进行一些表单数据初始化等操作
|
||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||
resetFields(); // 重置表单数据
|
||
setDrawerProps({ loading: true }); // 显示加载框
|
||
const res = await testDataForm(data); // 查询表单数据
|
||
record.value = (res.testData || {}) as Recordable;
|
||
setFieldsValue(record.value); // 设置字段值
|
||
setTestDataChildTableData(res); // 设置子表数据（没有子表可不写）
|
||
setDrawerProps({ loading: false }); // 隐藏加载框
|
||
});
|
||
|
||
// 表单提交按钮方法
|
||
async function handleSubmit() {
|
||
try {
|
||
const data = await validate(); // 验证表单，并返回数据
|
||
setDrawerProps({ confirmLoading: true }); // 显示提交加载中
|
||
// 设置提交的参数（QueryString，后台 Controller 的 get 接受）
|
||
const params: any = {
|
||
isNewRecord: record.value.isNewRecord,
|
||
id: record.value.id,
|
||
};
|
||
// 获取并设置子表数据
|
||
data.testDataChildList = await getTestDataChildList();
|
||
// console.log('submit', params, data, record);
|
||
// 将数据提交给后台（如果失败跳转到 catch）
|
||
const res = await testDataSave(params, data);
|
||
showMessage(res.message); // 显示提交结果
|
||
setTimeout(closeDrawer); // 隐藏抽屉弹窗
|
||
emit('success', data); // 触发事件，列表数据刷新
|
||
} catch (error: any) {
|
||
if (error && error.errorFields) {
|
||
showMessage(t('您填写的信息有误，请根据提示修正。'));
|
||
}
|
||
console.log('error', error);
|
||
} finally {
|
||
setDrawerProps({ confirmLoading: false }); // 隐藏提交加载中
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 列表视图
|
||
|
||
```html
|
||
<template>
|
||
<div>
|
||
<!-- 表格组件 -->
|
||
<BasicTable @register="registerTable">
|
||
<!-- 表格标题插槽 -->
|
||
<template #tableTitle>
|
||
<Icon :icon="getTitle.icon" class="m-1 pr-1" />
|
||
<span> {{ getTitle.value }} </span>
|
||
</template>
|
||
<!-- 表格右侧按钮插槽，其中 v-auth 是按钮权限控制 -->
|
||
<template #toolbar>
|
||
<a-button type="primary" @click="handleForm({})" v-auth="'test:testData:edit'">
|
||
<Icon icon="i-fluent:add-12-filled" /> {{ t('新增') }}
|
||
</a-button>
|
||
</template>
|
||
<!-- 首列插槽 -->
|
||
<template #firstColumn="{ record }">
|
||
<a @click="handleForm({ id: record.id })">
|
||
{{ record.testInput }}
|
||
</a>
|
||
</template>
|
||
</BasicTable>
|
||
<!-- 点击表格行进入的输入表单弹窗 -->
|
||
<InputForm @register="registerDrawer" @success="handleSuccess" />
|
||
</div>
|
||
</template>
|
||
<!-- script name: 当前组件名称（与路由名一致，如果不一致会页面缓存失效）-->
|
||
<script lang="ts" setup name="ViewsTestTestDataList">
|
||
|
||
// 导入当前用到的对象，部分省略
|
||
import InputForm from './form.vue';
|
||
|
||
// 国际化方法调用，参数是国际化编码的根路径
|
||
const { t } = useI18n('test.testData');
|
||
|
||
// 消息弹窗方法
|
||
const { showMessage } = useMessage();
|
||
|
||
// 路由meta信息
|
||
const { meta } = unref(router.currentRoute);
|
||
|
||
// 当前页面标题定义，来自菜单管理定义
|
||
const getTitle = {
|
||
icon: meta.icon || 'ant-design:book-outlined',
|
||
value: meta.title || t('数据管理'),
|
||
};
|
||
|
||
// 表格搜索表单控件定义
|
||
const searchForm: FormProps = {
|
||
baseColProps: { lg: 6, md: 8 }, // 表单栅格布局
|
||
labelWidth: 90, // 表单标签宽度
|
||
schemas: [
|
||
{
|
||
label: t('单行文本'), // 表单标签
|
||
field: 'testInput', // 字段提交参数名
|
||
component: 'Input', // 表单控件
|
||
},
|
||
{
|
||
label: t('下拉框'),
|
||
field: 'testSelect',
|
||
component: 'Select', // 选择框还有 RadioGroup、CheckboxGroup
|
||
componentProps: {
|
||
dictType: 'sys_menu_type', // 下拉框选项数据（支持直接指定字典类型）
|
||
allowClear: true, // 启用空选项，可清空选择
|
||
mode: 'multiple', // 下拉框模块，启用多选
|
||
},
|
||
},
|
||
// 更多控件，再次不展示了，和上一节表单视图一致
|
||
],
|
||
};
|
||
|
||
// 表格列定义
|
||
const tableColumns: BasicColumn[] = [
|
||
{
|
||
title: t('单行文本'), // 表头标题
|
||
dataIndex: 'testInput', // 表列实体属性名
|
||
key: 'a.test_input', // 排序数据库字段名
|
||
sorter: true, // 点击表头是否可排序
|
||
width: 230, // 列宽
|
||
align: 'left', // 列的对齐方式
|
||
// 个性化列，可定义插槽（如样式，增加控件等）
|
||
slot: 'firstColumn',
|
||
},
|
||
{
|
||
title: t('下拉框'),
|
||
dataIndex: 'testSelect',
|
||
key: 'a.test_select',
|
||
sorter: true,
|
||
width: 130,
|
||
align: 'center',
|
||
dictType: 'sys_menu_type', // 字典列，快速显示字典标签
|
||
},
|
||
];
|
||
|
||
// 表格操作列定义
|
||
const actionColumn: BasicColumn = {
|
||
width: 160, // 操作列宽
|
||
actions: (record: Recordable) => [
|
||
{
|
||
icon: 'i-clarity:note-edit-line',
|
||
title: t('编辑数据'),
|
||
onClick: handleForm.bind(this, { id: record.id }),
|
||
// 按钮权限控制，指定权限字符串
|
||
auth: 'test:testData:edit',
|
||
},
|
||
{
|
||
icon: 'i-ant-design:stop-outlined',
|
||
color: 'error',
|
||
title: t('停用数据'),
|
||
// 是否需要启用确认框
|
||
popConfirm: {
|
||
title: t('是否确认停用数据'),
|
||
confirm: handleDisable.bind(this, { id: record.id }),
|
||
},
|
||
// 按钮权限控制，指定权限字符串
|
||
auth: 'test:testData:edit',
|
||
// 控制按钮是否显示（区别：show 是显示或隐藏；ifShow 是显示或移除）
|
||
show: () => record.status === '0',
|
||
ifShow: () => record.status === '0',
|
||
},
|
||
],
|
||
// 操作列更多按钮定义
|
||
dropDownActions: (record: Recordable) => [
|
||
{
|
||
icon: 'i-ant-design:reload-outlined',
|
||
label: t('重置密码'),
|
||
onClick: handleResetpwd.bind(this, { userCode: record.userCode }),
|
||
auth: 'sys:empUser:resetpwd',
|
||
},
|
||
],
|
||
};
|
||
|
||
// 点击首列或编辑按钮是的抽屉弹窗定义
|
||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||
|
||
// 表格定义
|
||
const [registerTable, { reload }] = useTable({
|
||
api: testDataListData, // 表格数据源 API
|
||
beforeFetch: (params) => {
|
||
return params; // API 提交之前的参数修改
|
||
},
|
||
columns: tableColumns, // 表格列
|
||
actionColumn: actionColumn,// 操作列
|
||
formConfig: searchForm, // 搜索表单
|
||
showTableSetting: true, // 是否显示右上角的设置按钮
|
||
useSearchForm: true, // 是否显示搜索表单
|
||
canResize: true, // 是否自适应表单高度
|
||
});
|
||
|
||
// 弹窗操作方法
|
||
function handleForm(record: Recordable) {
|
||
openDrawer(true, record);
|
||
}
|
||
|
||
// 操作列停用按钮方法
|
||
async function handleDisable(record: Recordable) {
|
||
const res = await testDataDisable(record);
|
||
showMessage(res.message);
|
||
handleSuccess();
|
||
}
|
||
|
||
// 刷新表格数据（含表单回调）
|
||
function handleSuccess() {
|
||
reload();
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## 更多介绍
|
||
|
||
* 架构特点：<https://jeesite.com/docs/feature/>
|
||
* 内置功能：<https://jeesite.com/docs/function/>
|
||
* 目录结构：<https://jeesite.com/docs/catalog/>
|
||
* 参数配置：<https://jeesite.com/docs/config/>
|
||
* 开发规范：<https://jeesite.com/docs/standard/>
|
||
* 数表设计：<https://jeesite.com/docs/treetable/>
|
||
|
||
## 学习文档
|
||
|
||
* 库表生成、代码生成：<https://jeesite.com/docs/code-gen/>
|
||
* 菜单权限、按钮权限：<https://jeesite.com/docs/permi-shiro/>
|
||
* 数据权限、库事务：<https://jeesite.com/docs/service-datascope/#数据权限>
|
||
* 表结构、数据字典：<https://jeesite.com/docs/code-gen/#表结构数据字典>
|
||
* 持久层框架、SQL：<https://jeesite.com/docs/dao-mybatis/>
|
||
* 后端常用工具：<https://jeesite.com/docs/sys-utils/>
|
||
|
||
**分离版**
|
||
|
||
* 版本介绍：<https://jeesite.com/docs/jeesite-vue/>
|
||
* 源码解析：<https://jeesite.com/docs/vue-crud-view/>
|
||
* 表单组件：<https://jeesite.com/docs/vue-basic-form/>
|
||
* 表格组件：<https://jeesite.com/docs/vue-basic-table/>
|
||
* 参数配置：<https://jeesite.com/docs/vue-settings/>
|
||
* 常用组件：<https://jeesite.com/docs/vue-comp/>
|
||
* 前端权限：<https://jeesite.com/docs/vue-auth/>
|
||
* 图标组件：<https://jeesite.com/docs/vue-icon/>
|
||
* 前端样式库：<https://jeesite.com/docs/vue-style/>
|
||
* 多语言国际化：<https://jeesite.com/docs/vue-i18n/>
|
||
|
||
**经典版**
|
||
|
||
* 表单组件：<https://jeesite.com/docs/views-beetl/>
|
||
* 表格组件：<https://jeesite.com/docs/datagrid/>
|
||
* 常用工具：<https://jeesite.com/docs/jeesite-js/>
|
||
* 自定义主题：<https://jeesite.com/docs/custom-views/>
|
||
|
||
## 更多文档
|
||
|
||
* AI、CMS、RAG、Tool、MCP 人工智能助手：<https://jeesite.com/docs/ai-cms>
|
||
* BPM 业务流程引擎（Flowable）：<http://jeesite.com/docs/bpm/>
|
||
* CMS 多站点内容管理模块：<https://jeesite.com/docs/cms/>
|
||
|
||
* 消息推送消息提醒：<https://jeesite.com/docs/msg-push-use/>
|
||
* 对象存储模块：<https://jeesite.com/docs/oss-client>
|
||
* 单点登录模块：<https://jeesite.com/docs/sso-cas>
|
||
* 在线任务调度：<https://jeesite.com/docs/job/>
|
||
|
||
* 大屏设计器：<https://jeesite.com/docs/visual/>
|
||
* 报表设计器：<https://jeesite.com/docs/ureport/>
|
||
* 文件管理分享：<https://jeesite.com/docs/filemanager/>
|
||
* 文件在线预览：<https://jeesite.com/docs/filepreview/>
|
||
|
||
* 集群、高可用架构：<https://jeesite.com/docs/cluster/>
|
||
* SaaS 多租户架构：<https://jeesite.com/docs/saas-corp-use/>
|
||
* 读写分离分片分表：<https://jeesite.com/docs/sharding/>
|
||
* Spring监控系统：<https://jeesite.com/docs/webadmin/>
|
||
* 分布式跨应用事务：<https://jeesite.com/docs/seata/>
|
||
* 追踪系统集成：<https://jeesite.com/docs/skywalking/>
|
||
* ELK 日志收集：<https://jeesite.com/docs/elk-log/>
|
||
|
||
* MybatisPlus: <https://gitee.com/thinkgem/jeesite-mybatisplus>
|
||
* 接口快速开发：<https://gitee.com/thinkgem/jeesite-magic-api>
|
||
* 内外网中间件：<https://my.oschina.net/thinkgem/blog/4624519>
|
||
* 统一认证平台：<https://jeesite.com/docs/oauth2-server>
|
||
|
||
## 授权许可协议条款
|
||
|
||
1. 基于 Apache License Version 2.0 协议发布，可用于商业项目，但必须遵守以下补充条款。
|
||
2. 不得将本软件应用于危害国家安全、荣誉和利益的行为，不能以任何形式用于非法为目的的行为。
|
||
3. 在使用本软件时，由于它集成了众多第三方开源软件，请共同遵守这些开源软件的使用许可条款规定。
|
||
4. 在延伸的代码中（修改和有源代码衍生的代码中）需要带有原来代码中的协议、版权声明和其他原作者
|
||
规定需要包含的说明（请尊重原作者的著作权，不要删除或修改文件中的`Copyright`和`@author`信息）
|
||
更不要，全局替换源代码中的 jeesite 或 ThinkGem 等字样，否则你将违反本协议条款承担责任。
|
||
5. 基于本软件的作品，只能使用 JeeSite5 作为后台服务，除外情况不可商用且不允许二次分发或开源。
|
||
6. 您若套用本软件的一些代码或功能参考，请保留源文件中的版权和作者，需要在您的软件介绍明显位置
|
||
说明出处，举例：本软件基于 JeeSite Vue 快速开发平台，并附带链接：http://jeesite.com
|
||
7. 任何基于本软件而产生的一切法律纠纷和责任，均于我司无关。
|
||
8. 如果你对本软件有改进，希望可以贡献给我们，共同进步。
|
||
9. 本项目已申请软件著作权，请尊重开源，感谢阅读。
|
||
|
||
## 技术支持与服务
|
||
|
||
* 本软件免费，我们也提供了相应的收费服务，因为：
|
||
* 没有资金的支撑就很难得到发展，特别是一个好的产品，如果 JeeSite 帮助了您，请为我们点赞。支持我们，您可以获得更多回馈，我们会把公益事业做的更好，开放更多资源，回报社区和社会。请给我们一些动力吧，在此非常感谢已支持我们的朋友！
|
||
* **联系我们**：请访问技术支持与服务页面：<http://s.jeesite.com>
|
||
|
||
## 专业版增加的功能
|
||
|
||
1. 主题标签页的三种风格自由切换
|
||
2. 业务流程、流程设计、流程办理
|
||
3. 文件管理、上传秒传、文件预览
|
||
4. 高级折叠表单和个性化本地存储
|
||
5. 表格个性化设置参数本地存储
|
||
6. 租户管理功能、租户切换
|
||
7. 动态设置页面字体大小
|
||
8. 页签右键，在新窗口打开
|
||
9. 消息推送、消息提醒
|
||
10. 语言国际化、本地化
|
||
11. 快速升级到 Monorepo 脚本
|
||
12. 更多功能详见文档
|