mirror of
https://gitee.com/dotnetchina/OpenAuth.Net.git
synced 2025-09-19 01:58:01 +08:00
docs: 增加vue3、vue2文档
This commit is contained in:
wintel
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: yubaolee <yubaolee@163.com> | ahfu~ <954478625@qq.com>
|
||||
* @Date: 2025-04-23 20:26:48
|
||||
* @LastEditTime: 2025-04-23 23:30:36
|
||||
* @LastEditTime: 2025-04-23 23:46:59
|
||||
* @Description: 笔记配置
|
||||
* Copyright (c) 2025 by yubaolee | ahfu~ , All Rights Reserved.
|
||||
*/
|
||||
@@ -45,8 +45,78 @@ const coreNote = defineNoteConfig({
|
||||
],
|
||||
})
|
||||
|
||||
// vue3版本
|
||||
const proNote = defineNoteConfig({
|
||||
dir: 'pro',
|
||||
link: '/pro',
|
||||
sidebar: [
|
||||
'',
|
||||
'deploy',
|
||||
'structure',
|
||||
'devnew',
|
||||
{
|
||||
text: '基础开发',
|
||||
collapsed: false,
|
||||
items: [ 'router','openurl','keepalive']
|
||||
},
|
||||
'datapropertyrule',
|
||||
'printerplan',
|
||||
{
|
||||
text: '表单设计',
|
||||
collapsed: true,
|
||||
items: ['startform','urlform','dragform','dragformdetail']
|
||||
},
|
||||
{
|
||||
text: '工作流',
|
||||
collapsed: true,
|
||||
items: ['startflow','form']
|
||||
},
|
||||
{
|
||||
text: '其他',
|
||||
collapsed: true,
|
||||
items: ['components','faq']
|
||||
}
|
||||
|
||||
]
|
||||
})
|
||||
|
||||
// vue3版本
|
||||
const vue2Note = defineNoteConfig({
|
||||
dir: 'vue2',
|
||||
link: '/vue2',
|
||||
sidebar: [
|
||||
'',
|
||||
'deploy',
|
||||
'structure',
|
||||
'devnew',
|
||||
{
|
||||
text: '基础开发',
|
||||
collapsed: false,
|
||||
items: [ 'router','openurl','keepalive']
|
||||
},
|
||||
'datapropertyrule',
|
||||
'printerplan',
|
||||
{
|
||||
text: '表单设计',
|
||||
collapsed: true,
|
||||
items: ['startform','dragform','dragformdetail']
|
||||
},
|
||||
{
|
||||
text: '工作流',
|
||||
collapsed: true,
|
||||
items: ['startflow','form']
|
||||
},
|
||||
{
|
||||
text: '其他',
|
||||
collapsed: true,
|
||||
items: ['components','faq']
|
||||
}
|
||||
|
||||
]
|
||||
})
|
||||
|
||||
export const notes = defineNotesConfig({
|
||||
dir: 'notes',
|
||||
link: '/',
|
||||
notes: [coreNote],
|
||||
notes: [coreNote, proNote, vue2Note],
|
||||
})
|
||||
|
||||
80
newdocs/docs/notes/pro/README.md
Normal file
80
newdocs/docs/notes/pro/README.md
Normal file
@@ -0,0 +1,80 @@
|
||||
---
|
||||
title: vue3版本介绍
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/
|
||||
---
|
||||
::: warning 注意事项
|
||||
如果你使用的是vue2版本，请参考：[OpenAuth.Pro Vue2版本](/vue2/)
|
||||
:::
|
||||
|
||||
OpenAuth.Pro Vue3版本基于vue3 + element-plus。它使用开源版OpenAuth.Net的API接口（即：OpenAuth.WebApi）提供数据服务。二者的关系如下：
|
||||
|
||||
|
||||
|
||||
vue3版源代码获取方式：[http://old.openauth.net.cn/question/detail.html?id=a2be2d61-7fcb-4df8-8be2-9f296c22a89c](http://old.openauth.net.cn/question/detail.html?id=a2be2d61-7fcb-4df8-8be2-9f296c22a89c)
|
||||
|
||||
演示地址： [http://demo.openauth.net.cn:1805/](http://demo.openauth.net.cn:1805/)
|
||||
|
||||
## OpenAuth.Net系列教学视频
|
||||
|
||||
[OpenAuth.Net视频合集--系统结构及代码下载](https://www.bilibili.com/video/BV1Z1421q7xU/)
|
||||
|
||||
[OpenAuth.Net视频合集--企业版代码启动](https://www.bilibili.com/video/BV1KSuQebEek/)
|
||||
|
||||
[OpenAuth.Net视频合集--使用企业版代码生成器](https://www.bilibili.com/video/BV1JCuyeaEFp/)
|
||||
|
||||
[OpenAuth.Net视频合集--权限管理介绍](https://www.bilibili.com/video/BV1M9KeejENf/)
|
||||
|
||||
[OpenAuth.Net视频合集--表单设计](https://www.bilibili.com/video/BV1dagEeFEVA/)
|
||||
|
||||
|
||||
## 工具准备
|
||||
|
||||
#### NodeJs
|
||||
|
||||
前端环境为NodeJs，下载地址：[http://nodejs.cn/download/current/](http://nodejs.cn/download/current/)
|
||||
|
||||
#### visual studio code
|
||||
|
||||
下载最新版的vs code，或Cursor、Windsurf、Trae等工具用来作为OpenAuth.Pro Vue3版的开发工具。
|
||||
|
||||
## 源码下载
|
||||
|
||||
根据授权文件的下载指示，下载Vue3源码。注意：一定要使用下图中的数据库脚本：
|
||||
|
||||
|
||||
|
||||
## 创建数据库
|
||||
|
||||
* 新建一个空数据库：OpenAuthPro。使用上一步下载的【sql脚本】文件夹，根据你的数据库类型，选择运行你需要的脚本：`Sql Server脚本.sql`或`mysql脚本.sql`
|
||||
|
||||
## 启动后端
|
||||
|
||||
启动后端请参考：[快速开始](/core/start.html)
|
||||
|
||||
## 启动前端
|
||||
|
||||
使用Vs Code（或个人喜欢的工具）打开openauthvue3文件夹，修改配置文件`.env.dev`对应的后端接口地址，调整为自己的接口地址：
|
||||
|
||||
```javascript
|
||||
VITE_BASE_API = http://localhost:52789/api
|
||||
VITE_BASE_IMG_URL = http://localhost:52789
|
||||
```
|
||||
|
||||
::: warning 注意事项
|
||||
如果是发布打包，调整的文件为`.env.production`
|
||||
:::
|
||||
|
||||
使用`npm install`命令安装程序运行所需的第三方包。再用`npm run dev`命令运行。如下图：
|
||||
|
||||
|
||||
|
||||
启动成功后，使用浏览器访问[http://localhost:1803/](http://localhost:1803/) 即可打开vue3版界面：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
93
newdocs/docs/notes/pro/components.md
Normal file
93
newdocs/docs/notes/pro/components.md
Normal file
@@ -0,0 +1,93 @@
|
||||
---
|
||||
title: 内置组件
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/components/
|
||||
---
|
||||
|
||||
OpenAuth.Pro封装了一些组件，方便开发使用，组件全部在`src\components`中定义。目前提供的三大核心组件关系如下：
|
||||
|
||||
|
||||
|
||||
## 通用下拉选择 auth-select
|
||||
|
||||
通用下拉选择`auth-select`组件是用于渲染和编辑字典结构和动态列表返回key-valuel数据的组件。用法如下：
|
||||
|
||||
静态字典。根据【字典分类】模块的`分类标识`关键字获取，如：
|
||||
```html
|
||||
<auth-select :isEdit="isEdit" @change="change" :data-source="'SYS_STATUS'" v-model="val" size="small"></auth-select>
|
||||
```
|
||||
动态列表。从指定Url获取value/label结构的数据进行渲染，如：
|
||||
```html
|
||||
<auth-select :default-props="{label:'name', value:'id'}" :isEdit="isEdit" @change="change" :type="'dynamic'" :data-source="'/CategoryTypes/Load'" v-model="val" size="small"></auth-select>
|
||||
```
|
||||
|
||||
该组件有以下几个参数：
|
||||
|
||||
isEdit:是否编辑，如果为false则展示为label形式，如果为true则为编辑状态；
|
||||
|
||||
type：选择类型。'dynamic'表示动态加载，空或'static'则从系统Category表中获取；
|
||||
|
||||
data-source：数据源。当type=='dynamic'时，该值为一个Url地址，该地址返回一个id/name结构的数组。当type=='static'或空时，该值为【字典分类】模块的`分类标识`；
|
||||
|
||||
default-props: 数据源提供的数据类型。默认情况下为id/name的数组。如果设置该值，则需要提供对应结构的数据，如：:default-props="{label:'tableName', value:'id'}"，则提供的数据格式如下：
|
||||
|
||||
```javascript
|
||||
[
|
||||
{id:'1',tableName:'category'},
|
||||
{id:'2',tableName:'user'},
|
||||
{id:'3',tableName:'module'},
|
||||
....
|
||||
]
|
||||
```
|
||||
|
||||
## 表格组件 auth-table
|
||||
|
||||
用于渲染给定列定义，给定数据的表格，简单用法如下：
|
||||
```html
|
||||
<auth-table ref="tableName" :table-fields="tableFields" :data="dataList" ></auth-table>
|
||||
```
|
||||
|
||||
支持的事件：row-click selection-change
|
||||
|
||||
支持的方法：exportExcel clearSelection
|
||||
|
||||
## 表单组件 auth-form
|
||||
|
||||
根据定义动态渲染表单项，减少表单的开发。用法如下:
|
||||
```html
|
||||
<auth-form ref="dataForm" :edit-model="editModel" :form-fields="firstHeaderList" :data="firstTemp" :col-num="3"></auth-form>
|
||||
```
|
||||
|
||||
当父组件需要使用表单里面的数据，进行提交操作时，参考以下代码：
|
||||
|
||||
```javascript
|
||||
submit() {
|
||||
// 保存提交
|
||||
this.$refs['dataForm'].validate(() => {
|
||||
let tempData = Object.assign({}, this.firstTemp)
|
||||
api.add(tempData).then((resp) => {
|
||||
...
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '提交成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
该组件有以下几个参数：
|
||||
|
||||
form-fields：表单属性定义。为一个`ColumnDefine`的数组。典型的值如下：
|
||||
|
||||
```javascript
|
||||
this.firstHeaderList = [
|
||||
new ColumnDefine('id', 'id', false, false, 'text', '', 'string', 'varchar', ''),
|
||||
new ColumnDefine('tableName', '表名', true, true, 'text', '', 'string', 'varchar', ''),
|
||||
new ColumnDefine('parentTableId', '父表', true, true, 'selectDynamic', '/BuilderTables/AllMain', 'string', 'varchar', ''),
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
|
||||
76
newdocs/docs/notes/pro/datapropertyrule.md
Normal file
76
newdocs/docs/notes/pro/datapropertyrule.md
Normal file
@@ -0,0 +1,76 @@
|
||||
---
|
||||
title: 权限控制
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/datapropertyrule/
|
||||
---
|
||||
## 数据权限
|
||||
|
||||
关于数据权限控制，可以详细查看博文：[通用权限设计与实现](https://www.cnblogs.com/yubaolee/p/DataPrivilege.html)
|
||||
## 字段权限
|
||||
|
||||
::: warning 注意
|
||||
字段权限只针对【非系统模块】有效，即在添加新模块的时候，需要设置模块属性“是否系统”为false。
|
||||
:::
|
||||
|
||||
## 使用场景
|
||||
|
||||
字段权限控制分为两种：
|
||||
|
||||
1. 直接不返回字段的值。用于敏感数据不向客户端反馈。
|
||||
|
||||
1. 返回字段的值，但界面不显示。常常用于数据需要和后端交互，但不想在界面显示，比如各种Id。这种直接在返回实体增加`[Browsable(false)]`注解即可。
|
||||
|
||||
## 如何做？
|
||||
|
||||
### 后端代码处理
|
||||
|
||||
针对场景1，在做返回处理的时候，需要过滤数据库查询字段，如下：（本文以Resource表为例）
|
||||
|
||||
```csharp
|
||||
var columnFields = loginContext.GetTableColumns("Resource");
|
||||
if (columnFields == null || columnFields.Count == 0)
|
||||
{
|
||||
throw new Exception("请在代码生成界面配置Resource表的字段属性");
|
||||
}
|
||||
|
||||
var propertyStr = string.Join(',', columnFields.Select(u => u.ColumnName));
|
||||
result.columnFields = columnFields;
|
||||
result.data = resources.OrderBy(u => u.TypeId)
|
||||
.Skip((request.page - 1) * request.limit)
|
||||
.Take(request.limit).Select($"new ({propertyStr})");
|
||||
result.count = await resources.CountAsync();
|
||||
return result;
|
||||
```
|
||||
|
||||
::: warning 注意
|
||||
企业版表结构是通过【代码生成】功能获取获取表结构并存储在`buildertable`表中，因此需要先在【代码生成】功能添加要控制的表字段。然后使用loginContext.GetTableColumns获取可访问的字段。
|
||||
:::
|
||||
|
||||
### 前端代码处理
|
||||
|
||||
在做表格的时候需要使用动态列。以`views/Resources/index.vue`为例，如下：
|
||||
|
||||
```HTML
|
||||
<auth-table ref="mainTable" :table-fields="headerList"></auth-table>
|
||||
```
|
||||
|
||||
用户加载后台数据时，自动加载表格字段结构，并存储在`headerList`实现字段权限控制，如下：
|
||||
|
||||
```javascript
|
||||
//加载表头
|
||||
resources.getList(this.listQuery).then((response) => {
|
||||
this.list = response.data
|
||||
response.columnFields.forEach((item) => {
|
||||
// 首字母小写
|
||||
item.columnName = item.columnName.substring(0, 1).toLowerCase() + item.columnName.substring(1)
|
||||
})
|
||||
this.headerList = response.columnFields
|
||||
})
|
||||
```
|
||||
### 运行界面配置
|
||||
|
||||
完成代码编写后，在【基础配置】--【角色管理】--【为角色分配模块】最后为角色分配【可见字段】中分配权限
|
||||
|
||||
|
||||
|
||||
|
||||
43
newdocs/docs/notes/pro/deploy.md
Normal file
43
newdocs/docs/notes/pro/deploy.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: 部署
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/deploy/
|
||||
---
|
||||
|
||||
后端接口部署请参考：[部署API](/core/deployapi.html)，前端打包流程如下：
|
||||
|
||||
首先修改配置文件`.env.production`，打包构建前请调整为自己的接口地址：
|
||||
|
||||
```javascript
|
||||
VITE_BASE_API = http://demo.openauth.net.cn:52789/api
|
||||
|
||||
VITE_BASE_IMG_URL = demo.openauth.net.cn:52789
|
||||
```
|
||||
|
||||
然后使用`npm run build`进行打包构建：
|
||||
|
||||
|
||||
|
||||
构建完成后会生成dist文件夹。如下：
|
||||
|
||||
|
||||
|
||||
该文件夹为纯静态的页面，可以使用任何自己喜欢的Web服务器进行部署，如IIS/tomcat/nginx等。个人推荐使用nginx部署。
|
||||
|
||||
nginx下载安装可参考：[https://blog.csdn.net/github_39088222/article/details/79482461](https://blog.csdn.net/github_39088222/article/details/79482461)
|
||||
|
||||
nginx.conf推荐配置如下：
|
||||
|
||||
```javascript
|
||||
server {
|
||||
listen 1803;
|
||||
#server_name pro.openauth.net.cn;
|
||||
location / {
|
||||
alias /openauthvue3/dist/;
|
||||
expires 1d;
|
||||
}
|
||||
|
||||
access_log /www/wwwlogs/pro.log;
|
||||
}
|
||||
|
||||
```
|
||||
198
newdocs/docs/notes/pro/devnew.md
Normal file
198
newdocs/docs/notes/pro/devnew.md
Normal file
@@ -0,0 +1,198 @@
|
||||
---
|
||||
title: vue3代码生成器
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/devnew/
|
||||
---
|
||||
|
||||
本章节视频讲解请参考：[OpenAuth.Net视频合集--使用企业版代码生成器](https://www.bilibili.com/video/BV1JCuyeaEFp/)
|
||||
|
||||
## 前言
|
||||
|
||||
都什么年代了，还在用代码生成器？有这个想法的人，通常是拿来和低代码平台做对比。那我们就从多维度对比一下：
|
||||
|
||||
| 维度 | 低代码平台 | 代码生成器 |
|
||||
|------|------------|------------|
|
||||
| 用户群体 | 非专业开发者、业务人员、快速交付团队 | 专业开发者 |
|
||||
| 技术门槛 | 无需编码能力，强调业务逻辑可视化配置 | 需理解生成代码并手动集成/调试 |
|
||||
| 灵活性 | 受限于平台提供的组件和逻辑抽象能力 | 生成代码可自由修改，灵活性高 |
|
||||
| 技术依赖性 | 依赖平台运行时，可能面临厂商锁定风险 | 生成代码脱离工具，技术栈自主可控 |
|
||||
| 适用场景 | 快速构建标准化应用（如简单报表、问卷调查、信息登记等） | 减少重复编码，提升开发效率 |
|
||||
|
||||
从上面对比我们可以看出二者使用场景完全不同：
|
||||
|
||||
* 低代码平台：业务人员通过拖拽表单设计器、配置数据源等，直接发布到低代码平台，无需编写代码。
|
||||
* 代码生成器：**自动创建Entity、Controller、Service层基础代码，开发者手动补充业务逻辑**，一旦代码生成完成，就可以脱离工具，技术自主可控。
|
||||
|
||||
于是就有了本节的内容。当然，OpenAuth.Net即将推出低代码平台版本，敬请期待😀
|
||||
|
||||
|
||||
## 术语解释
|
||||
|
||||
在使用代码生成器添加新功能之前，需要先了解OpenAuth.Net生成代码时的两个概念：动态头部和固定头部
|
||||
|
||||
#### 动态头部
|
||||
|
||||
如果启用动态头部，表示前端渲染列表（或表单）时，列表的列定义是从后端返回。通常用于控制前端字段显示权限。配合后端：[权限控制/字段权限](http://doc.openauth.net.cn/pro/datapropertyrule.html#%E5%AD%97%E6%AE%B5%E6%9D%83%E9%99%90) 如：常见的前端代码如下：
|
||||
```html
|
||||
<auth-table ref="mainTable" :table-fields="headerList"></auth-table>
|
||||
```
|
||||
```javascript
|
||||
getList() {
|
||||
resources.getList(this.listQuery).then((response) => {
|
||||
...
|
||||
this.headerList = response.columnFields
|
||||
...
|
||||
})
|
||||
},
|
||||
|
||||
```
|
||||
|
||||
#### 固定头部
|
||||
|
||||
如果不是上面的情况，则生成的前端列为固定的头部。如下：
|
||||
|
||||
```html
|
||||
|
||||
<auth-table ref="mainTable" :table-fields="headerList"></auth-table>
|
||||
|
||||
```
|
||||
```javascript
|
||||
initCfg() {
|
||||
this.headerList = [
|
||||
new ColumnDefine('id', 'id', false, false, 'text', '', 'string', 'varchar', ''),
|
||||
new ColumnDefine('tableName', '表名', true, true, 'text', '', 'string', 'varchar', ''),
|
||||
new ColumnDefine('moduleName', '模块名称', true, true, 'text', '', 'string', 'varchar', ''),
|
||||
new ColumnDefine('parentTableId', '父表', true, true, 'selectDynamic', '/BuilderTables/AllMain', 'string', 'varchar', ''),
|
||||
new ColumnDefine('foreignKey', '外键', true, true, 'text', '', 'string', 'varchar', ''),
|
||||
]
|
||||
|
||||
```
|
||||
|
||||
## 准备工作
|
||||
|
||||
* 数据库OpenAuthPro中添加仓储表【Stock】，本文以该数据表为例。参考表结构如下：
|
||||
```SQL
|
||||
-- mysql示例
|
||||
create table stock
|
||||
(
|
||||
Id varchar(50) not null comment '数据ID'
|
||||
primary key,
|
||||
Name text not null comment '产品名称',
|
||||
Number int not null comment '产品数量',
|
||||
Price decimal(10, 1) not null comment '产品单价',
|
||||
Status int not null comment '出库/入库',
|
||||
Viewable varchar(50) not null comment '可见范围',
|
||||
User varchar(50) not null comment '操作人',
|
||||
Time datetime not null comment '操作时间',
|
||||
OrgId varchar(50) null comment '组织ID'
|
||||
)
|
||||
comment '出入库信息表' charset = utf8
|
||||
row_format = COMPACT;
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
* 使用Visual Studio 以开发模式启动后端。参考：[编译运行webapi](http://doc.openauth.net.cn/core/start.html#%E7%BC%96%E8%AF%91%E8%BF%90%E8%A1%8Cwebapi)
|
||||
|
||||
* 启动企业版前端。参考：[启动前端](http://doc.openauth.net.cn/pro/#%E5%90%AF%E5%8A%A8%E5%89%8D%E7%AB%AF)
|
||||
|
||||
后续操作全部在系统中完成。
|
||||
|
||||
## 单表添加
|
||||
|
||||
代码生成界面，点击`添加`按钮，输入想添加的模块信息。
|
||||
|
||||
|
||||
录入基础信息，点击`确认`保存后，系统会添加一条记录，并自动加载对应的字段信息。
|
||||
|
||||
|
||||
|
||||
这时，编辑字段具体的属性。如是否【可显示】【可编辑】等。
|
||||
|
||||
|
||||
## 子表添加
|
||||
|
||||
::: warning 注意
|
||||
如果只生成单表结构，可以跳过本节
|
||||
:::
|
||||
|
||||
如果需要添加主/从（父/子）结构，需要先添加子表信息。代码生成界面，点击`添加`按钮，输入想添加的模块信息。
|
||||
|
||||
|
||||
|
||||
::: warning 注意
|
||||
子表的`动态头部`属性务必与父表保持一致，否则会造成生成的代码不能正常运行
|
||||
:::
|
||||
|
||||
## 生成模块
|
||||
|
||||
选中刚刚添加的`Stock`表，依次点击【生成实体】【生成业务代码】【生成vue页面】;
|
||||
|
||||
如果存在子表，也进行相同的操作。即选中刚刚添加的`StockDetail`表，依次点击【生成实体】【生成业务代码】【生成vue页面】;
|
||||
|
||||
成功后生成的后端.Net代码位置如下：
|
||||
|
||||
OpenAuth.Repository\Domain\Stock.cs
|
||||
OpenAuth.App\StockApp\StockApp.cs
|
||||
OpenAuth.App\StockApp\Request\AddOrUpdateStockReq.cs
|
||||
OpenAuth.App\StockApp\Request\QueryStockListReq.cs
|
||||
OpenAuth.WebApi\Controllers\StocksController.cs
|
||||
|
||||
并且会在OpenAuth.Repository\OpenAuthDBContext.cs中自动添加：
|
||||
|
||||
```
|
||||
public virtual DbSet<Stock> Stocks { get; set; }
|
||||
```
|
||||
|
||||
|
||||
前端Vue代码：
|
||||
src\api\stocks.js
|
||||
src\views\stocks\index.vue
|
||||
|
||||
::: warning 注意
|
||||
完成以上步骤后，请重启OpenAuth.WebApi，用来重新加载刚刚生成的后台代码
|
||||
|
||||
子表不需要添加模块
|
||||
:::
|
||||
|
||||
## 配置模块地址
|
||||
|
||||
经过以上步骤，重启系统后，使用System账号重新登录，在【模块管理】中，添加"仓储管理"模块，如下图：
|
||||
|
||||
|
||||
|
||||
这样就可以访问刚刚新加的仓储管理功能，到此就完成了添加一个新模块功能：
|
||||
|
||||
|
||||
|
||||
## 代码生成功能字段详解
|
||||
|
||||
* 模块名称：表示这个生成的模块名称，根据自己需要填写。
|
||||
|
||||
* 表名：**必填** 表示数据库中对应的表名。
|
||||
|
||||
* 父表：表示主/从（父/子）表的父表。如果该项不选，则生成的是单表结构的代码，如果选择了父表，则生成主/从（父/子）表的代码。
|
||||
|
||||
* 外键：表示与父表关联的外键。如果选择了父表，则该项必填。
|
||||
|
||||
* 外部数据源：如果需要连接其他数据库生成代码，需要选对应的外部数据源，外部数据源在【数据源管理】功能中配置。
|
||||
|
||||
* 动态头部：如果选中，表示前端渲染列表（或表单）时，列表的列定义是从后端返回。通常用于控制前端字段显示权限。
|
||||
|
||||
* 实体类名称：**必填** 表示生成的实体类名称。
|
||||
|
||||
* 命名空间：**必填** 表示生成的实体类的命名空间。默认`OpenAuth.Repository.Domain`。
|
||||
|
||||
* 模块编码：**必填** 表示生成的模块业务类名称，比如`XxxxxApp`。
|
||||
|
||||
* Vue目录: 生成vue代码时，代码存放的目录。比如`D:\openauthvue3`。
|
||||
|
||||
## 其他
|
||||
|
||||
当采用动态头部时，如果数据库新加了字段，需要使用【同步结构】功能把新字段同步到代码生成器中。为了防止对已有的配置造成影响，该功能只新增字段，不会对已有字段进行调整。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
60
newdocs/docs/notes/pro/dragform.md
Normal file
60
newdocs/docs/notes/pro/dragform.md
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: 可拖拽表单
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/dragform/
|
||||
---
|
||||
|
||||
适用场景和普通的动态表单一样。但该表单操作方便，与系统界面风格匹配度高，缺点是排版没有普通的动态表单灵活，只能做简单的行排列。
|
||||
|
||||
## 设计表单
|
||||
|
||||
功能【基础配置】-【表单设计】中，点击`新增`按钮，拖拽设计自己想要的表单，然后点击右上角`保存`按钮即可完成添加表单。
|
||||
|
||||
|
||||
|
||||
#### `关联数据库表`选项
|
||||
|
||||
在设计表单时，如果在`关联数据库表`中新增一个表名，并对拖拽的控件进行标准化命名，如：
|
||||
|
||||
|
||||
|
||||
这时保存后，会自动在数据库生成该表单对应的表：
|
||||
|
||||
|
||||
|
||||
在后面进行流程流转时，流程使用的表单数据会自动存放在该表中，方便统计及其他程序开发应用。
|
||||
|
||||
|
||||
::: warning 注意
|
||||
|
||||
如果表单不配置关联数据库表，流程使用的表单数据只能以json格式存放在`flowinstance`表的`FrmData`字段中，不利于后期数据分析和扩展。至于是否需要关联数据库表，可以根据自己需要进行选择
|
||||
|
||||
:::
|
||||
|
||||
|
||||
## 上传组件
|
||||
|
||||
在vform设计表单时，【图片】【文件】两个组件需要和后端上传交互，需要做些特殊的处理。
|
||||
|
||||
|
||||
|
||||
1、修改【图片】【文件】组件的上传地址为OpenAuth.WebApi的上传接口，即：
|
||||
|
||||
```
|
||||
http://localhost:52789/api/Files/UploadWithFormData
|
||||
```
|
||||
根据实际情况调整IP，当然也可以配置云服务器的上传接口，或其他自己开发的上传接口。具体参考：[https://www.yuque.com/visualdev/vform/urf1hz](https://www.yuque.com/visualdev/vform/urf1hz)
|
||||
|
||||
|
||||
2、修改组件的onUploadSucess事件，添加以下代码将接口返回的数据转化为vform可识别的数据：
|
||||
|
||||
```javascript
|
||||
var imgServerIp ="http://localhost:52789"; //图片服务器IP
|
||||
return {
|
||||
name: result.result[0].fileName,
|
||||
url: new URL(result.result[0].filePath,imgServerIp).href
|
||||
}
|
||||
```
|
||||
配置完成后，在流程实例中即可正常使用上传功能。
|
||||
|
||||
|
||||
38
newdocs/docs/notes/pro/dragformdetail.md
Normal file
38
newdocs/docs/notes/pro/dragformdetail.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: 可拖拽表单常规设置
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/dragformdetail/
|
||||
---
|
||||
|
||||
企业版可拖拽表单使用的是VForm Pro版本，详细的配置可参考:[https://www.vform666.com/](https://www.vform666.com/) 本节只做常用的配置说明。
|
||||
|
||||
## 后端加载下拉列表值
|
||||
|
||||
官网推荐通过数据源的方式给下拉列表赋值，简单点的方式是使用组件的`onCreated`事件。新建一个下拉先选框，唯一名称改为：`SelectVals`，在组件的`onCreated`事件中添加以下代码：
|
||||
|
||||
```javascript
|
||||
var selectVals = this.getWidgetRef('SelectVals');
|
||||
var addressAPI= 'http://localhost:52789/api/SelectVals/'
|
||||
axios.get(addressAPI).then(function(res) {
|
||||
if (res.data.code==200) {
|
||||
selectVals.loadOptions(res.data.result);
|
||||
}
|
||||
}).catch(function(error) {
|
||||
console.error(error)
|
||||
})
|
||||
```
|
||||
|
||||
基于OpenAuth.WebApi返回的数据格式：
|
||||
```javascript
|
||||
{
|
||||
"result": [{
|
||||
"label": "选项值1",
|
||||
"value": "1"
|
||||
}, {
|
||||
"label": "选项值2",
|
||||
"value": "2"
|
||||
}],
|
||||
"message": "操作成功",
|
||||
"code": 200
|
||||
}
|
||||
```
|
||||
38
newdocs/docs/notes/pro/faq.md
Normal file
38
newdocs/docs/notes/pro/faq.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: 常见问题处理
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/faq/
|
||||
---
|
||||
|
||||
## vue3 启动时白屏
|
||||
|
||||
在启动vue3版本（不刷新浏览器）时，会出现白屏的现象。并且控制台报异常：
|
||||
|
||||
|
||||
|
||||
如果直接打开URL，也会得到504错误，比如:
|
||||
https://localhost:1803/app/node_modules/.vite/deps/pusher-js.js?v=601736dc
|
||||
|
||||
但是去掉版本信息后，又完全正常:
|
||||
https://ocalhost:1803/app/node_modules/.vite/deps/pusher-js.js
|
||||
|
||||
这时可以使用：
|
||||
|
||||
```shell
|
||||
npm rebuild
|
||||
```
|
||||
或者
|
||||
|
||||
```shell
|
||||
node ./node_modules/esbuild/install.js
|
||||
```
|
||||
详细原因可以查看：[https://github.com/vitejs/vite/discussions/8146](https://github.com/vitejs/vite/discussions/8146)
|
||||
|
||||
## vue运行的时候报错
|
||||
|
||||
在启动企业版的时候，如果提示下面错误：
|
||||
|
||||
|
||||
|
||||
请使用`npm run dev`命令来启动项目
|
||||
|
||||
93
newdocs/docs/notes/pro/form.md
Normal file
93
newdocs/docs/notes/pro/form.md
Normal file
@@ -0,0 +1,93 @@
|
||||
---
|
||||
title: 工作流添加自定义表单
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/form/
|
||||
---
|
||||
|
||||
OpenAuth.Pro使用的动态表单可以满足日常普通的审批功能，但如果想`对用户提交的表单数据进行统计分析`、需要用户提交附件、需要`复杂的表单交互`，这时就需要开发者开发自己的表单页面。实现更加丰富的功能，效果如下：
|
||||
|
||||
|
||||
|
||||
本文以如何添加一个请假流程为例：
|
||||
|
||||
## 添加数据库表结构
|
||||
|
||||
先在数据库中添加记录表单数据的表，即请假条中的内容。
|
||||
|
||||
|
||||
|
||||
## 编写后端代码
|
||||
|
||||
自定义表单后台数据库读写需要继承`ICustomerForm`接口。并且名称需要和数据库表名+App的形式，如：`FrmLeaveReqApp`。参考代码如下：
|
||||
|
||||
```csharp
|
||||
public class FrmLeaveReqApp : BaseStringApp<FrmLeaveReq,OpenAuthDBContext>, ICustomerForm
|
||||
{
|
||||
//其他逻辑代码略
|
||||
public void Add(FrmLeaveReq obj)
|
||||
{
|
||||
Repository.Add(obj);
|
||||
}
|
||||
|
||||
public FrmLeaveReqApp(IUnitWork<OpenAuthDBContext> unitWork, IRepository<FrmLeaveReq,OpenAuthDBContext> repository,
|
||||
IAuth auth) : base(unitWork, repository, auth)
|
||||
{
|
||||
}
|
||||
|
||||
public void Add(string flowInstanceId, string frmData)
|
||||
{
|
||||
var req = JsonHelper.Instance.Deserialize<FrmLeaveReq>(frmData);
|
||||
req.FlowInstanceId = flowInstanceId;
|
||||
Add(req);
|
||||
}
|
||||
|
||||
public void Update(string flowInstanceId, string frmData)
|
||||
{
|
||||
var req = JsonHelper.Instance.Deserialize<FrmLeaveReq>(frmData);
|
||||
UnitWork.Update<FrmLeaveReq>(u => u.FlowInstanceId == flowInstanceId, u => new FrmLeaveReq
|
||||
{
|
||||
UserName = req.UserName,
|
||||
RequestComment = req.RequestComment,
|
||||
RequestType = req.RequestType
|
||||
//补充其他需要更新的字段
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 编写请假条前端表单代码
|
||||
|
||||
系统约定，所有开发人员自己开发的表单，全部放在views/forms文件夹下。并且以下图的文件结构进行放置。
|
||||
|
||||
|
||||
|
||||
其中：
|
||||
|
||||
FrmLeaveReq：为业务表单的文件夹名称，必须与数据库表名保持一致。
|
||||
|
||||
* add.vue：为业务表单页面，负责编写业务输入逻辑。内部methods必须包含方法：
|
||||
|
||||
```javascript
|
||||
getData() {
|
||||
return this.temp
|
||||
}
|
||||
```
|
||||
|
||||
上层框架会调用该方法来获取表单中的数据，用于后续逻辑处理。
|
||||
|
||||
* detail.vue：为业务表单的展示页面。
|
||||
|
||||
## 注册表单
|
||||
|
||||
在表单添加的下拉框里添加：
|
||||
|
||||
|
||||
|
||||
## 配置表单
|
||||
|
||||
编写完上面代码后，运行企业版。使用【基础配置】--【表单设计】--【添加】功能添加刚刚的表单：
|
||||
|
||||
|
||||
|
||||
这样就可以在流程设计里面，选择使用刚刚添加的表单了。
|
||||
20
newdocs/docs/notes/pro/keepalive.md
Normal file
20
newdocs/docs/notes/pro/keepalive.md
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: 界面缓存
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/keepalive/
|
||||
---
|
||||
|
||||
OpenAuth.Pro以前的版本采用vue [keepAlive](https://cn.vuejs.org/guide/built-ins/keep-alive.html)的方式缓存所有前端组件。从v5.2版本开始，可以在【模块管理】中配置前端是否缓存。如图：
|
||||
|
||||
|
||||
|
||||
|
||||
::: tip 提示
|
||||
目前框架除了【消息日志/系统日志】外，其他界面都是默认自动缓存的。
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
33
newdocs/docs/notes/pro/openurl.md
Normal file
33
newdocs/docs/notes/pro/openurl.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: 打开指定URL
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/openurl/
|
||||
---
|
||||
|
||||
上一章节通过添加模块或直接在路由表中添加固定路由实现路由控制。在有些场景下，需要代码中直接打开一个外部指定URL的地址（不通过系统的【模块管理】功能添加到导航栏），如下图：
|
||||
|
||||
|
||||
|
||||
可以直接使用下面代码实现：
|
||||
|
||||
```javascript
|
||||
const openUrl = () => {
|
||||
const routes = router.getRoutes()
|
||||
routes.forEach(route => {
|
||||
if (route.path === '/redirect/iframe') {
|
||||
route.meta.title = 'OpenAuth.Net官网' // 设置标题
|
||||
}
|
||||
})
|
||||
router.push({
|
||||
path: '/redirect/iframe',
|
||||
query: {
|
||||
url: encodeURIComponent(`http://www.openauth.net.cn`) // 设置URL
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
62
newdocs/docs/notes/pro/printerplan.md
Normal file
62
newdocs/docs/notes/pro/printerplan.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: 智能打印
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/printerplan/
|
||||
---
|
||||
|
||||
OpenAuth.Pro提供灵活无代码（可能需要写SQL）的打印解决方案，无需开发人员参与即可配置自己需要的打印。
|
||||
|
||||
打印模板设计界面如下：
|
||||
|
||||
|
||||
|
||||
挂载到业务系统中效果：
|
||||
|
||||
|
||||
|
||||
|
||||
## 使用指南
|
||||
|
||||
#### 设计打印模版
|
||||
|
||||
在打印中心-打印模版功能新增打印模版。设计界面说明如下：
|
||||
|
||||
|
||||
|
||||
左边为设计工具栏，中间为画布，右边为属性框。可以根据自己需要调整打印界面。
|
||||
|
||||
#### 设置数据源
|
||||
|
||||
打印模版的核心是设计数据源。用户通过设计数据源，实现无开发打印。如下：
|
||||
|
||||
|
||||
|
||||
1. 数据源：用于查询打印打印数据。
|
||||
|
||||
2. Id:由数据源中的SQL自动生成的参数文本框。
|
||||
|
||||
3. 分组字段：如果配置了`分组字段`，则默认对应列表式打印模版。否则，可以看做卡片式。
|
||||
|
||||
* 【卡片式】用于打印一页只有一条数据的情况。比如快递的标签、用户名片等。
|
||||
|
||||
* 【列表式】用于打印一页有多条数据的情况，通常是主从结构的表，同时打印主表及从表详情。如客户的发货清单。
|
||||
|
||||
|
||||
::: warning 注意
|
||||
|
||||
两种模版类型没有严格的区分。在后端返回相同的数据情况下，如果配置了`分组字段`，后端返回的数据会被转化成主从结构。上图即为官网【入库随货同行单（列表式）【带参数】】按OrderId进行分组后的数据。
|
||||
|
||||
:::
|
||||
|
||||
#### 功能模块挂载打印方案
|
||||
|
||||
制作完打印方案后，在【模块管理】功能里面，把刚刚打印方案与功能关联。
|
||||
|
||||
|
||||
|
||||
|
||||
#### 使用打印
|
||||
|
||||
最后就可以在功能里面使用打印了。
|
||||
|
||||
|
||||
77
newdocs/docs/notes/pro/router.md
Normal file
77
newdocs/docs/notes/pro/router.md
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: router
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/router/
|
||||
---
|
||||
|
||||
OpenAuth.Pro采用的是标准vue router来管理页面跳转，基础知识请参考[https://router.vuejs.org/zh/](https://router.vuejs.org/zh/)。如果需要添加页面，可以通过以下两种方式：
|
||||
|
||||
## 模块管理添加页面
|
||||
|
||||
直接使用【基础配置】->【模块管理】功能添加自己想访问的页面。如图：
|
||||
|
||||
|
||||
|
||||
::: tip 提示
|
||||
如果添加的url里面带有`http`，系统会自动使用iframe加载一个三方的站点，无需特殊处理。如系统自带的【接口文档】模块
|
||||
:::
|
||||
|
||||
## 不通过模块管理添加页面
|
||||
|
||||
|
||||
在有些场景下，不想通过系统的【模块管理】功能添加页面，如登录、注册、帮助中心、站点介绍等，可以在路由表中直接添加。
|
||||
打开`src\router\modules\home.js`添加自己的路由信息：
|
||||
|
||||
```javascript
|
||||
{
|
||||
path: '/redirect',
|
||||
component: Layout,
|
||||
name: 'redirect',
|
||||
hidden: true, //是否在左侧导航栏隐藏
|
||||
meta: {
|
||||
title: '外部页面',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'iframe',
|
||||
hidden: true,
|
||||
name: 'iframe',
|
||||
component: IframeView,
|
||||
meta: {
|
||||
title: '外部页面',
|
||||
id: 'iframe',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
```
|
||||
|
||||
上面会添加一个带有layout的页面（即有顶部、左侧导航栏、面包屑等区域），如果不想使用layout，可以参考：
|
||||
|
||||
```javascript
|
||||
{
|
||||
path: '/wmsinboundordertbls/detail/:id',
|
||||
component: DetailWmsInboundOrderTbls,
|
||||
name: 'wmsinboundordertbls',
|
||||
hidden: true,
|
||||
meta: {
|
||||
notauth: true,
|
||||
title: '入库单详情',
|
||||
noCache: true,
|
||||
icon: 'list',
|
||||
}
|
||||
}
|
||||
```
|
||||
这种页面没有顶部、左侧导航栏、面包屑等区域，方便作为组件嵌入到其他页面中。
|
||||
|
||||
部分页面访问的时候，可能没有登录的用户信息，比如：用户注册页面等。会被系统的权限体系拦截从而跳转到登录页面。需要添加到白名单中。
|
||||
打开`src\permission.js`,在`whiteList`中加入刚刚的路由信息：
|
||||
|
||||
```javascript
|
||||
const whiteList = ['/regster', ...] // 不重定向白名单
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
143
newdocs/docs/notes/pro/startflow.md
Normal file
143
newdocs/docs/notes/pro/startflow.md
Normal file
@@ -0,0 +1,143 @@
|
||||
---
|
||||
title: 操作手册
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/startflow/
|
||||
---
|
||||
|
||||
一个完整的工作流从设计到发起，到审批，需要经过：
|
||||
|
||||
1. 表单设计：【基础配置/表单设计】中添加一个用于流程的表单；
|
||||
|
||||
2. 流程设计：【基础配置/流程设计】中添加一个流程模版，流程模版选择刚刚建的表单；
|
||||
|
||||
3. 流程发起：【流程中心/我的流程】中【新的申请】创建一个流程实例，或在业务系统中直接【送审】发起；
|
||||
|
||||
4. 流程审批：【流程中心/待处理流程】中进行审批；
|
||||
|
||||
表单设计已经在前面章节[表单设计-基本介绍](/pro/startform.html)中介绍，本章节介绍的后面几个步骤。
|
||||
|
||||
## 流程设计
|
||||
|
||||
在【基础配置/流程设计】界面，点击“添加模板”。填写好流程模板的名称及需要的信息。点击“下一步”进入选择流程关联的表单。
|
||||
|
||||
|
||||
|
||||
流程模版使用的表单，需要在【基础配置/表单设计】中添加，也可以直接选择"URL表单"，具体查看[表单设计-基本介绍](/pro/startform.html)
|
||||
|
||||
选择好表单后，点击“下一步”进入流程设计。
|
||||
|
||||
|
||||
|
||||
|
||||
#### 节点类型
|
||||
|
||||
关于节点的类型概念及区分可以参考[工作流中的概念](/core/flowinstanceconcept.html)
|
||||
* 开始节点：流程的开始节点，一个流程只有一个开始
|
||||
* 结束节点：流程的结束节点
|
||||
* 网关开始：对应BPMN的并行网关，当需要多个分支同时审批时，使用该节点作为并行分支的起点
|
||||
* 网关结束：与网关开始节点一一对应，该节点作为分支的终点
|
||||
* 会签节点：处理的是同一个任务需要多人审批的情况
|
||||
* 任务节点：普通的审批节点
|
||||
|
||||
#### 节点属性
|
||||
|
||||
* 名称：**必填** 节点名称
|
||||
* 网关/会签类型：当节点类型为网关、会签节点时有效
|
||||
* 依次：依次审批，需要指定审批人
|
||||
* 全部通过：全部审批通过后，流程继续
|
||||
* 至少一个通过：任意一个审批通过后，流程继续
|
||||
* 执行权限 **必填** 节点的执行权限，如：指定用户、指定角色等。
|
||||
* 所有人： 任何人都可以审批
|
||||
* 指定用户：指定用户审批，当选中这项时需要选择指定的用户
|
||||
* 指定角色：指定角色审批，当选中这项时需要选择指定的角色
|
||||
* 指定SQL： 流程上个节点审批时，会根据SQL执行的结果确定本节点的哪些用户可以审批。当选中这项时需要填写对应的SQL语句
|
||||
* 上一节点执行人的直属上级：流程上个节点审批时，会根据上一节点执行人的直属上级确定本节点的审批人
|
||||
* 连续多级直属上级：按人员的直属上级一直审批，直到碰到设定的多级主管审批终点。当选中这项时需要指定多级审批终点的角色
|
||||
* 部门负责人：指定部门负责人审批，当选中这项时需要选择对应的部门
|
||||
* 运行时指定角色：流程上个节点审批时，审批人指定的角色审批
|
||||
* 运行时指定用户：流程上个节点审批时，审批人指定的用户审批
|
||||
* 可编辑字段：流程审批时，该节点可以编辑的表单字段
|
||||
* 三方回调URL：当节点审批完成时，如果需要通知其他系统或模块,则填写对应系统的接口地址。
|
||||
|
||||
#### 连线属性
|
||||
|
||||
* 文本：连线上的文字
|
||||
* 表单字段条件：连线上的判断条件，只有当一个节点有多条发出的连线时，该设置生效。
|
||||
|
||||
|
||||
## 流程发起
|
||||
|
||||
OpenAuth.Net工作流分为两个大类：
|
||||
|
||||
1. 无业务关联流程，如请假、报销等。
|
||||
|
||||
2. 有业务关联流程，如采购、销售、入库等。
|
||||
|
||||
这两种流程的差异有以下几点：
|
||||
|
||||
| 对比维度 | 无业务关联流程 | 有业务关联流程 |
|
||||
|---------|--------------|--------------|
|
||||
| 适用场景 | 请假、报销等日常办公 | 采购、销售、入库等业务操作 |
|
||||
| 发起方式 | 流程中心 -> 我的流程 -> 新的申请 | 直接在业务模块中发起（如：仓储中心 -> 入库订单 -> 送审） |
|
||||
| 表单类型 | 简单表单，适用拖拽表单设计器 | 复杂表单，需要自定义表单或URL表单 |
|
||||
| 审批结束处理 | 仅更新流程状态 | 需要修改业务数据状态 |
|
||||
|
||||
我们分别介绍如何发起这两种流程。
|
||||
|
||||
### 无业务关联流程
|
||||
|
||||
完成流程模版设计后，在【流程中心/我的流程】中【新的申请】开始创建一个流程实例。
|
||||
|
||||
|
||||
|
||||
1. 在左边选择流程模版；
|
||||
|
||||
2. 填写待审批的表单内容；
|
||||
|
||||
3. 点击“下一步”，根据自己需要编辑流程实例标题，并保存。❗注意“审批完成后可以知会”，表示审批完成后，可以知会给其他用户。具体查看[工作流中的概念-知会](/core/flowinstanceconcept.md#知会)
|
||||
|
||||
保存完成后，在【流程中心/我的流程】中点击“搜索”按钮刷新查询，就可以看到刚刚发起的流程实例。
|
||||
|
||||
### 有业务关联流程
|
||||
|
||||
#### 挂载流程方案
|
||||
|
||||
与无业务关联流程不同，有业务关联流程需要先把流程模板挂载到业务模块中。在【模块管理】功能里面，把刚刚流程模板与功能关联。
|
||||
|
||||
|
||||
|
||||
#### 业务系统发起【送审】
|
||||
|
||||
挂载完成后，在【仓储中心/入库单】中，选择一个入库单，点击【送审】，选择刚刚设计的流程模板：
|
||||
|
||||
|
||||
|
||||
送审成功后就可以在【流程中心/我的流程】中看到刚刚送审的流程实例，点击进入后，就可以看到审批内容是业务详情的URL地址。
|
||||
|
||||
|
||||
|
||||
详情页面：
|
||||
|
||||
|
||||
|
||||
|
||||
## 流程审批
|
||||
|
||||
用户可以在【流程中心/待处理流程】中看到自己需要审批的流程，点击【处理】按钮并进行相应的处理；
|
||||
|
||||
|
||||
|
||||
其中：
|
||||
|
||||
* 同意：流程审批通过，流程结束；
|
||||
|
||||
* 不同意：流程审批不通过，流程结束；
|
||||
|
||||
* 驳回：可以驳回到指定的步骤，该步骤的人可以重新审批提交；
|
||||
|
||||
* 加签：在已有审批流程上临时添加审批人，协助自己审批；
|
||||
|
||||
* 撤销审批：针对自己发起的流程，可以撤销审批；
|
||||
|
||||
|
||||
|
||||
41
newdocs/docs/notes/pro/startform.md
Normal file
41
newdocs/docs/notes/pro/startform.md
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: 基本介绍
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/startform/
|
||||
---
|
||||
|
||||
一个完整的工作流从设计到发起，到审批，需要经过：
|
||||
|
||||
1. 表单设计：【基础配置/表单设计】中添加一个用于流程的表单；
|
||||
|
||||
2. 流程设计：【基础配置/流程设计】中添加一个流程模版，流程模版选择刚刚建的表单；
|
||||
|
||||
3. 流程发起：【流程中心/我的流程】中【新的申请】创建一个流程实例，或在业务系统中直接【送审】发起；
|
||||
|
||||
4. 流程审批：【流程中心/待处理流程】中进行审批；
|
||||
|
||||
其中第一步中的表单设计，即本章节介绍的内容。Vue3版本内置的表单类型有以下三种：
|
||||
|
||||
## URL表单
|
||||
|
||||
URL表单本质上不是实际存在的表单，指的是审批的过程中，审批内容是发起流程时传入的一个URL网址，审批人员根据这个URL展示的内容进行审批。
|
||||
|
||||
|
||||
|
||||
这样的作法，有以下优点：
|
||||
|
||||
* 省去上面提到的第一步，即【基础配置/表单设计】，可以直接进行流程设计；
|
||||
|
||||
* 审批人员在审批时，看到的表单内容是业务的详细页面，展示的内容更加丰富；
|
||||
|
||||
具体实现请参考：[URL表单](/pro/urlform.html)
|
||||
|
||||
## 自定义开发表单【企业版】
|
||||
|
||||
该类型表单需要开发者在源码中先编写好表单界面（基于vue component）,再提供给用户选择使用。适用于交互复杂的界面。详细请参考：[企业版工作流添加自定义表单](/pro/form.html)
|
||||
|
||||
|
||||
|
||||
## 可拖拽表单【企业版】
|
||||
|
||||
适用场景和普通的动态表单一样。但该表单操作方便，与系统界面风格匹配度高，缺点是排版没有普通的动态表单灵活，只能做简单的行排列。详细请参考：[可拖拽表单](/pro/dragform.html)
|
||||
53
newdocs/docs/notes/pro/structure.md
Normal file
53
newdocs/docs/notes/pro/structure.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: 项目结构
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/structure/
|
||||
---
|
||||
|
||||
OpenAuth.Net Vue3版本参考业界标准结构进行划分，如需二次开发，可以在对应的文件夹进行代码修改。结构如下：
|
||||
```
|
||||
📦openauthvue3
|
||||
┣ 📂mock //mock数据
|
||||
┣ 📂public //公共资源
|
||||
┣ 📂src
|
||||
┃ ┣ 📂api //与后端接口交互
|
||||
┃ ┣ 📂assets //样式图标等
|
||||
┃ ┣ 📂components //组件
|
||||
┃ ┣ 📂directive //指令
|
||||
┃ ┣ 📂extensions //原有选项式mixins扩展组件
|
||||
┃ ┣ 📂hooks //自定义hooks
|
||||
┃ ┣ 📂interface //前端类型约定
|
||||
┃ ┣ 📂layout //布局
|
||||
┃ ┃ ┣ 📂components //站点Layout组件
|
||||
┃ ┃ ┃ ┣ 📂Content //内容
|
||||
┃ ┃ ┃ ┣ 📂Sidebar //侧边栏
|
||||
┃ ┃ ┃ ┣ 📂Tagsbar //标签栏
|
||||
┃ ┃ ┃ ┗ 📂Topbar //顶部栏
|
||||
┃ ┣ 📂lib //外部引入的公共库
|
||||
┃ ┣ 📂router //路由
|
||||
┃ ┣ 📂store //状态管理
|
||||
┃ ┣ 📂stores //pinia状态管理，主题等
|
||||
┃ ┣ 📂styles //样式
|
||||
┃ ┣ 📂utils //通用工具类
|
||||
┃ ┣ 📂views //视图
|
||||
┃ ┣ 📜App.vue //主组件
|
||||
┃ ┣ 📜default-settings.js //默认配置
|
||||
┃ ┣ 📜error-log.js //错误日志
|
||||
┃ ┣ 📜global-components.js //全局组件
|
||||
┃ ┣ 📜main.js //主入口
|
||||
┃ ┗ 📜permission.js //权限
|
||||
┣ 📜.env.dev //开发环境配置
|
||||
┣ 📜.env.production //生产环境配置
|
||||
┣ 📜.eslintignore //eslint忽略文件
|
||||
┣ 📜.eslintrc.js //eslint配置
|
||||
┣ 📜.prettierrc.js //prettier配置
|
||||
┣ 📜index.html //入口文件
|
||||
┣ 📜jsconfig.json //js配置
|
||||
┣ 📜package.json //项目配置
|
||||
┣ 📜postcss.config.js //postcss配置
|
||||
┣ 📜README.md //项目说明
|
||||
┗ 📜vite.config.js //vite配置
|
||||
|
||||
```
|
||||
|
||||
整个vue的入口是main.js，打包之编译后的代码全部会注入到index.html的`<div id="app"></div>`里面。
|
||||
74
newdocs/docs/notes/pro/urlform.md
Normal file
74
newdocs/docs/notes/pro/urlform.md
Normal file
@@ -0,0 +1,74 @@
|
||||
---
|
||||
title: URL表单
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/urlform/
|
||||
---
|
||||
|
||||
URL表单本质上不是实际存在的表单，指的是审批的过程中，审批内容是发起流程时传入的一个URL网址，审批人员根据这个URL展示的内容进行审批。
|
||||
|
||||
## 实现步骤
|
||||
|
||||
#### 添加业务详情页面
|
||||
|
||||
参考：src\views\wmsinboundordertbls\detail.vue 开发一个业务详情页面。注意详情页面需要一个id参数，用于获取详情数据。
|
||||
|
||||
默认情况下，你不需要调整框架内容。当然如果详情页面参数名称不是id，或有多个参数，可以调整相关的前后端代码进行适配：
|
||||
|
||||
```csharp
|
||||
//OpenAuth.App\FlowInstance\FlowInstanceApp.cs
|
||||
addFlowInstanceReq.FrmData = scheme.FrmUrlTemplate.Replace("{id}", addFlowInstanceReq.BusinessId);
|
||||
```
|
||||
|
||||
```javascript
|
||||
//src\extensions\common.js
|
||||
....
|
||||
const createFlowInstance = (flowscheme, obj, customName) => {
|
||||
flowinstances.add({
|
||||
schemeId: flowscheme.id,
|
||||
code: new Date().getTime(),
|
||||
customName: customName?? '业务单据' + obj.id + '送审',
|
||||
businessId: obj.id,
|
||||
//👉可以在这里添加其他参数，如：detailUrl: 'http://localhost:8000/otherapp/detail?id=' + obj.id + ...
|
||||
})
|
||||
....
|
||||
}
|
||||
```
|
||||
|
||||
#### 添加流程模板
|
||||
|
||||
新加一个模板，名称如：订单送审流程。填写基本信息。选择表单时，选：URL表单，并指定URL表单模板。如下图：
|
||||
|
||||
|
||||
|
||||
::: warning 注意
|
||||
这里模板URL地址可以不填，可以在业务系统调用时，直接从前端传业务详情的URL地址。如第一步javascript代码中提到的`detailUrl`，赋值到流程实例的FrmData中。
|
||||
:::
|
||||
|
||||
#### 挂载流程方案
|
||||
|
||||
制作完流程模板后，在【模块管理】功能里面，把刚刚流程模板与功能关联。
|
||||
|
||||
|
||||
|
||||
#### 业务系统发起【送审】
|
||||
|
||||
在【仓储中心/入库单】中，选择一个入库单，点击【送审】，选择刚刚设计的流程模板：
|
||||
|
||||
|
||||
|
||||
送审成功后就可以在【流程中心/我的流程】中看到刚刚送审的流程实例，点击进入后，就可以看到审批内容是业务详情的URL地址。
|
||||
|
||||
|
||||
|
||||
详情页面：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
94
newdocs/docs/notes/vue2/README.md
Normal file
94
newdocs/docs/notes/vue2/README.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
title: vue2版本介绍
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/
|
||||
---
|
||||
::: warning 注意事项
|
||||
如果你使用的是vue3版本，请参考：[OpenAuth.Pro Vue3版本](/pro/)
|
||||
:::
|
||||
|
||||
OpenAuth.Pro Vue2版本基于vue2 + element-ui。它使用开源版OpenAuth.Net的API接口（即：OpenAuth.WebApi）提供数据服务。二者的关系如下：
|
||||
|
||||
|
||||
|
||||
vue2版源代码获取方式：[http://old.openauth.net.cn/question/detail.html?id=a2be2d61-7fcb-4df8-8be2-9f296c22a89c](http://old.openauth.net.cn/question/detail.html?id=a2be2d61-7fcb-4df8-8be2-9f296c22a89c)
|
||||
|
||||
演示地址： [http://demo.openauth.net.cn:1803/](http://demo.openauth.net.cn:1803/)
|
||||
|
||||
## OpenAuth.Net系列教学视频
|
||||
|
||||
[OpenAuth.Net视频合集--系统结构及代码下载](https://www.bilibili.com/video/BV1Z1421q7xU/)
|
||||
|
||||
[OpenAuth.Net视频合集--企业版代码启动](https://www.bilibili.com/video/BV1KSuQebEek/)
|
||||
|
||||
[OpenAuth.Net视频合集--使用企业版代码生成器](https://www.bilibili.com/video/BV1JCuyeaEFp/)
|
||||
|
||||
[OpenAuth.Net视频合集--权限管理介绍](https://www.bilibili.com/video/BV1M9KeejENf/)
|
||||
|
||||
[OpenAuth.Net视频合集--表单设计](https://www.bilibili.com/video/BV1dagEeFEVA/)
|
||||
|
||||
|
||||
## 工具准备
|
||||
|
||||
#### NodeJs
|
||||
|
||||
前端环境为NodeJs，下载地址：[http://nodejs.cn/download/current/](http://nodejs.cn/download/current/)
|
||||
|
||||
#### visual studio code
|
||||
|
||||
下载最新版的vs code，或Cursor、Windsurf、Trae等工具用来作为OpenAuth.Pro Vue2版的开发工具。
|
||||
|
||||
|
||||
## 创建数据库
|
||||
|
||||
* 使用下载的OpenAuth.Pro前端源码文件夹【sql脚本】中，运行`Sql Server脚本.sql`（或mysql脚本）
|
||||
|
||||
## 启动后端
|
||||
|
||||
启动后端请参考：[快速开始](/core/start.html)
|
||||
|
||||
## 启动前端
|
||||
|
||||
使用Vs Code（或个人喜欢的工具）打开OpenAuth.Pro/Client文件夹，如下图：
|
||||
|
||||
|
||||
|
||||
|
||||
安装程序运行所需的第三方包。使用npm install 命令经行安装，如下图：
|
||||
|
||||
|
||||
::: warning 注意事项
|
||||
4.6.4及以后的版本默认Node 18进行编译，如果使用的是Node 18以前的版本，请尝试把package.json中scripts改为下面内容：
|
||||
|
||||
```javascript
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve --mode dev",
|
||||
"dev": "vue-cli-service serve --mode dev",
|
||||
"build": "vue-cli-service build --mode prod",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
修改配置文件`.env.dev`对应的后端接口地址，调整为自己的接口地址：
|
||||
|
||||
```javascript
|
||||
VUE_APP_BASE_API = http://localhost:52789/api
|
||||
VUE_APP_BASE_IMG_URL = http://localhost:52789
|
||||
```
|
||||
|
||||
::: warning 注意事项
|
||||
如果是发布打包，调整的文件为`.env.prod`
|
||||
:::
|
||||
|
||||
使用npm run dev 命令运行。如下图：
|
||||
|
||||
|
||||
启动成功后，使用浏览器访问[http://localhost:1803/](http://localhost:1803/) 即可打开企业版界面
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
93
newdocs/docs/notes/vue2/components.md
Normal file
93
newdocs/docs/notes/vue2/components.md
Normal file
@@ -0,0 +1,93 @@
|
||||
---
|
||||
title: 内置组件
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/components/
|
||||
---
|
||||
|
||||
OpenAuth.Pro封装了一些组件，方便开发使用，组件全部在`src\components`中定义。目前提供的三大核心组件关系如下：
|
||||
|
||||
|
||||
|
||||
## 通用下拉选择 auth-select
|
||||
|
||||
通用下拉选择`auth-select`组件是用于渲染和编辑字典结构和动态列表返回key-valuel数据的组件。用法如下：
|
||||
|
||||
静态字典。根据【字典分类】模块的`分类标识`关键字获取，如：
|
||||
```html
|
||||
<auth-select :isEdit="isEdit" @change="change" :data-source="'SYS_STATUS'" v-model="val" size="small"></auth-select>
|
||||
```
|
||||
动态列表。从指定Url获取value/label结构的数据进行渲染，如：
|
||||
```html
|
||||
<auth-select :default-props="{label:'name', value:'id'}" :isEdit="isEdit" @change="change" :type="'dynamic'" :data-source="'/CategoryTypes/Load'" v-model="val" size="small"></auth-select>
|
||||
```
|
||||
|
||||
该组件有以下几个参数：
|
||||
|
||||
isEdit:是否编辑，如果为false则展示为label形式，如果为true则为编辑状态；
|
||||
|
||||
type：选择类型。'dynamic'表示动态加载，空或'static'则从系统Category表中获取；
|
||||
|
||||
data-source：数据源。当type=='dynamic'时，该值为一个Url地址，该地址返回一个id/name结构的数组。当type=='static'或空时，该值为【字典分类】模块的`分类标识`；
|
||||
|
||||
default-props: 数据源提供的数据类型。默认情况下为id/name的数组。如果设置该值，则需要提供对应结构的数据，如：:default-props="{label:'tableName', value:'id'}"，则提供的数据格式如下：
|
||||
|
||||
```javascript
|
||||
[
|
||||
{id:'1',tableName:'category'},
|
||||
{id:'2',tableName:'user'},
|
||||
{id:'3',tableName:'module'},
|
||||
....
|
||||
]
|
||||
```
|
||||
|
||||
## 表格组件 auth-table
|
||||
|
||||
用于渲染给定列定义，给定数据的表格，简单用法如下：
|
||||
```html
|
||||
<auth-table ref="tableName" :table-fields="tableFields" :data="dataList" ></auth-table>
|
||||
```
|
||||
|
||||
支持的事件：row-click selection-change
|
||||
|
||||
支持的方法：exportExcel clearSelection
|
||||
|
||||
## 表单组件 auth-form
|
||||
|
||||
根据定义动态渲染表单项，减少表单的开发。用法如下:
|
||||
```html
|
||||
<auth-form ref="dataForm" :edit-model="editModel" :form-fields="firstHeaderList" :data="firstTemp" :col-num="3"></auth-form>
|
||||
```
|
||||
|
||||
当父组件需要使用表单里面的数据，进行提交操作时，参考以下代码：
|
||||
|
||||
```javascript
|
||||
submit() {
|
||||
// 保存提交
|
||||
this.$refs['dataForm'].validate(() => {
|
||||
let tempData = Object.assign({}, this.firstTemp)
|
||||
api.add(tempData).then((resp) => {
|
||||
...
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '提交成功',
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
该组件有以下几个参数：
|
||||
|
||||
form-fields：表单属性定义。为一个`ColumnDefine`的数组。典型的值如下：
|
||||
|
||||
```javascript
|
||||
this.firstHeaderList = [
|
||||
new ColumnDefine('id', 'id', false, false, 'text', '', 'string', 'varchar', ''),
|
||||
new ColumnDefine('tableName', '表名', true, true, 'text', '', 'string', 'varchar', ''),
|
||||
new ColumnDefine('parentTableId', '父表', true, true, 'selectDynamic', '/BuilderTables/AllMain', 'string', 'varchar', ''),
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
|
||||
77
newdocs/docs/notes/vue2/datapropertyrule.md
Normal file
77
newdocs/docs/notes/vue2/datapropertyrule.md
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: 权限控制
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/datapropertyrule/
|
||||
---
|
||||
|
||||
## 数据权限
|
||||
|
||||
关于数据权限控制，可以详细查看博文：[通用权限设计与实现](https://www.cnblogs.com/yubaolee/p/DataPrivilege.html)
|
||||
## 字段权限
|
||||
|
||||
::: warning 注意
|
||||
字段权限只针对【非系统模块】有效，即在添加新模块的时候，需要设置模块属性“是否系统”为false。
|
||||
:::
|
||||
|
||||
## 使用场景
|
||||
|
||||
字段权限控制分为两种：
|
||||
|
||||
1. 直接不返回字段的值。用于敏感数据不向客户端反馈。
|
||||
|
||||
1. 返回字段的值，但界面不显示。常常用于数据需要和后端交互，但不想在界面显示，比如各种Id。这种直接在返回实体增加`[Browsable(false)]`注解即可。
|
||||
|
||||
## 如何做？
|
||||
|
||||
### 后端代码处理
|
||||
|
||||
针对场景1，在做返回处理的时候，需要过滤数据库查询字段，如下：（本文以Resource表为例）
|
||||
|
||||
```csharp
|
||||
var columnFields = loginContext.GetTableColumns("Resource");
|
||||
if (columnFields == null || columnFields.Count == 0)
|
||||
{
|
||||
throw new Exception("请在代码生成界面配置Resource表的字段属性");
|
||||
}
|
||||
|
||||
var propertyStr = string.Join(',', columnFields.Select(u => u.ColumnName));
|
||||
result.columnFields = columnFields;
|
||||
result.data = resources.OrderBy(u => u.TypeId)
|
||||
.Skip((request.page - 1) * request.limit)
|
||||
.Take(request.limit).Select($"new ({propertyStr})");
|
||||
result.count = await resources.CountAsync();
|
||||
return result;
|
||||
```
|
||||
|
||||
::: warning 注意
|
||||
企业版表结构是通过【代码生成】功能获取获取表结构并存储在`buildertable`表中，因此需要先在【代码生成】功能添加要控制的表字段。然后使用loginContext.GetTableColumns获取可访问的字段。
|
||||
:::
|
||||
|
||||
### 前端代码处理
|
||||
|
||||
在做表格的时候需要使用动态列。以`views/Resources/index.vue`为例，如下：
|
||||
|
||||
```HTML
|
||||
<auth-table ref="mainTable" :table-fields="headerList"></auth-table>
|
||||
```
|
||||
|
||||
用户加载后台数据时，自动加载表格字段结构，并存储在`headerList`实现字段权限控制，如下：
|
||||
|
||||
```javascript
|
||||
//加载表头
|
||||
resources.getList(this.listQuery).then((response) => {
|
||||
this.list = response.data
|
||||
response.columnFields.forEach((item) => {
|
||||
// 首字母小写
|
||||
item.columnName = item.columnName.substring(0, 1).toLowerCase() + item.columnName.substring(1)
|
||||
})
|
||||
this.headerList = response.columnFields
|
||||
})
|
||||
```
|
||||
### 运行界面配置
|
||||
|
||||
完成代码编写后，在【基础配置】--【角色管理】--【为角色分配模块】最后为角色分配【可见字段】中分配权限
|
||||
|
||||
|
||||
|
||||
|
||||
46
newdocs/docs/notes/vue2/deploy.md
Normal file
46
newdocs/docs/notes/vue2/deploy.md
Normal file
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: 部署
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/deploy/
|
||||
---
|
||||
|
||||
后端接口部署请参考：[部署API](/core/deployapi.html)，前端打包流程如下：
|
||||
|
||||
使用`npm run build`进行打包构建：
|
||||
|
||||
|
||||
|
||||
::: warning 注意事项
|
||||
前端部署时使用的配置文件为`.env.prod`，打包构建前请调整为自己的接口地址：
|
||||
|
||||
```javascript
|
||||
VUE_APP_BASE_API = http://demo.openauth.net.cn:52789/api
|
||||
|
||||
VUE_APP_BASE_IMG_URL = demo.openauth.net.cn:52789
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
构建完成后会生成dist文件夹。如下：
|
||||
|
||||
|
||||
|
||||
该文件夹为纯静态的页面，可以使用任何自己喜欢的Web服务器进行部署，如IIS/tomcat/nginx等。个人推荐使用nginx部署。
|
||||
|
||||
nginx下载安装可参考：[https://blog.csdn.net/github_39088222/article/details/79482461](https://blog.csdn.net/github_39088222/article/details/79482461)
|
||||
|
||||
nginx.conf推荐配置如下：
|
||||
|
||||
```javascript
|
||||
server {
|
||||
listen 1803;
|
||||
#server_name pro.openauth.me;
|
||||
location / {
|
||||
alias /openauth.pro/Client/dist/;
|
||||
expires 1d;
|
||||
}
|
||||
|
||||
access_log /www/wwwlogs/pro.log;
|
||||
}
|
||||
|
||||
```
|
||||
178
newdocs/docs/notes/vue2/devnew.md
Normal file
178
newdocs/docs/notes/vue2/devnew.md
Normal file
@@ -0,0 +1,178 @@
|
||||
---
|
||||
title: vue2代码生成器
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/devnew/
|
||||
---
|
||||
|
||||
本章节视频讲解请参考：[OpenAuth.Net视频合集--使用企业版代码生成器](https://www.bilibili.com/video/BV1JCuyeaEFp/)
|
||||
|
||||
## 术语解释
|
||||
|
||||
在添加新功能之前，需要先了解OpenAuth.Net生成代码时的两个概念：动态头部和固定头部
|
||||
|
||||
#### 动态头部
|
||||
|
||||
如果启用动态头部，表示前端渲染列表（或表单）时，列表的列定义是从后端返回。通常用于控制前端字段显示权限。配合后端：[权限控制/字段权限](http://doc.openauth.net.cn/pro/datapropertyrule.html#%E5%AD%97%E6%AE%B5%E6%9D%83%E9%99%90) 如：常见的前端代码如下：
|
||||
```html
|
||||
<auth-table ref="mainTable" :table-fields="headerList"></auth-table>
|
||||
```
|
||||
```javascript
|
||||
getList() {
|
||||
resources.getList(this.listQuery).then((response) => {
|
||||
...
|
||||
this.headerList = response.columnFields
|
||||
...
|
||||
})
|
||||
},
|
||||
|
||||
```
|
||||
|
||||
#### 固定头部
|
||||
|
||||
如果不是上面的情况，则生成的前端列为固定的头部。如下：
|
||||
|
||||
```html
|
||||
|
||||
<auth-table ref="mainTable" :table-fields="headerList"></auth-table>
|
||||
|
||||
```
|
||||
```javascript
|
||||
initCfg() {
|
||||
this.headerList = [
|
||||
new ColumnDefine('id', 'id', false, false, 'text', '', 'string', 'varchar', ''),
|
||||
new ColumnDefine('tableName', '表名', true, true, 'text', '', 'string', 'varchar', ''),
|
||||
new ColumnDefine('moduleName', '模块名称', true, true, 'text', '', 'string', 'varchar', ''),
|
||||
new ColumnDefine('parentTableId', '父表', true, true, 'selectDynamic', '/BuilderTables/AllMain', 'string', 'varchar', ''),
|
||||
new ColumnDefine('foreignKey', '外键', true, true, 'text', '', 'string', 'varchar', ''),
|
||||
]
|
||||
|
||||
```
|
||||
|
||||
## 准备工作
|
||||
|
||||
* 数据库OpenAuthPro中添加仓储表【Stock】，本文以该数据表为例。参考表结构如下：
|
||||
```SQL
|
||||
-- mysql示例
|
||||
create table stock
|
||||
(
|
||||
Id varchar(50) not null comment '数据ID'
|
||||
primary key,
|
||||
Name text not null comment '产品名称',
|
||||
Number int not null comment '产品数量',
|
||||
Price decimal(10, 1) not null comment '产品单价',
|
||||
Status int not null comment '出库/入库',
|
||||
Viewable varchar(50) not null comment '可见范围',
|
||||
User varchar(50) not null comment '操作人',
|
||||
Time datetime not null comment '操作时间',
|
||||
OrgId varchar(50) null comment '组织ID'
|
||||
)
|
||||
comment '出入库信息表' charset = utf8
|
||||
row_format = COMPACT;
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
* 使用Visual Studio 以开发模式启动后端。参考：[编译运行webapi](http://doc.openauth.net.cn/core/start.html#%E7%BC%96%E8%AF%91%E8%BF%90%E8%A1%8Cwebapi)
|
||||
|
||||
* 启动企业版前端。参考：[启动前端](http://doc.openauth.net.cn/pro/#%E5%90%AF%E5%8A%A8%E5%89%8D%E7%AB%AF)
|
||||
|
||||
后续操作全部在系统中完成。
|
||||
|
||||
## 单表添加
|
||||
|
||||
代码生成界面，点击`添加`按钮，输入想添加的模块信息。
|
||||
|
||||
|
||||
录入基础信息，点击`确认`保存后，系统会添加一条记录，并自动加载对应的字段信息。
|
||||
|
||||
|
||||
|
||||
这时，编辑字段具体的属性。如是否【可显示】【可编辑】等。
|
||||
|
||||
|
||||
## 子表添加
|
||||
|
||||
::: warning 注意
|
||||
如果只生成单表结构，可以跳过本节
|
||||
:::
|
||||
|
||||
如果需要添加主/从（父/子）结构，需要先添加子表信息。代码生成界面，点击`添加`按钮，输入想添加的模块信息。
|
||||
|
||||
|
||||
|
||||
::: warning 注意
|
||||
子表的`动态头部`属性务必与父表保持一致，否则会造成生成的代码不能正常运行
|
||||
:::
|
||||
|
||||
## 生成模块
|
||||
|
||||
选中刚刚添加的`Stock`表，依次点击【生成实体】【生成业务代码】【生成vue页面】;
|
||||
|
||||
如果存在子表，也进行相同的操作。即选中刚刚添加的`StockDetail`表，依次点击【生成实体】【生成业务代码】【生成vue页面】;
|
||||
|
||||
成功后生成的后端.Net代码位置如下：
|
||||
|
||||
OpenAuth.Repository\Domain\Stock.cs
|
||||
OpenAuth.App\StockApp\StockApp.cs
|
||||
OpenAuth.App\StockApp\Request\AddOrUpdateStockReq.cs
|
||||
OpenAuth.App\StockApp\Request\QueryStockListReq.cs
|
||||
OpenAuth.WebApi\Controllers\StocksController.cs
|
||||
|
||||
并且会在OpenAuth.Repository\OpenAuthDBContext.cs中自动添加：
|
||||
|
||||
```
|
||||
public virtual DbSet<Stock> Stocks { get; set; }
|
||||
```
|
||||
|
||||
|
||||
前端Vue代码：
|
||||
src\api\stocks.js
|
||||
src\views\stocks\index.vue
|
||||
|
||||
::: warning 注意
|
||||
完成以上步骤后，请重启OpenAuth.WebApi，用来重新加载刚刚生成的后台代码
|
||||
|
||||
子表不需要添加模块
|
||||
:::
|
||||
|
||||
## 配置模块地址
|
||||
|
||||
经过以上步骤，重启系统后，使用System账号重新登录，在【模块管理】中，添加“仓储管理”模块，如下图：
|
||||
|
||||
|
||||
|
||||
这样就可以访问刚刚新加的仓储管理功能，到此就完成了添加一个新模块功能：
|
||||
|
||||
|
||||
|
||||
## 代码生成功能字段详解
|
||||
|
||||
* 模块名称：表示这个生成的模块名称，根据自己需要填写。
|
||||
|
||||
* 表名：**必填** 表示数据库中对应的表名。
|
||||
|
||||
* 父表：表示主/从（父/子）表的父表。如果该项不选，则生成的是单表结构的代码，如果选择了父表，则生成主/从（父/子）表的代码。
|
||||
|
||||
* 外键：表示与父表关联的外键。如果选择了父表，则该项必填。
|
||||
|
||||
* 外部数据源：如果需要连接其他数据库生成代码，需要选对应的外部数据源，外部数据源在【数据源管理】功能中配置。
|
||||
|
||||
* 动态头部：如果选中，表示前端渲染列表（或表单）时，列表的列定义是从后端返回。通常用于控制前端字段显示权限。
|
||||
|
||||
* 实体类名称：**必填** 表示生成的实体类名称。
|
||||
|
||||
* 命名空间：**必填** 表示生成的实体类的命名空间。默认`OpenAuth.Repository.Domain`。
|
||||
|
||||
* 模块编码：**必填** 表示生成的模块业务类名称，比如`XxxxxApp`。
|
||||
|
||||
* Vue目录: 生成vue代码时，代码存放的目录。比如`D:\openauthvue3`。
|
||||
|
||||
## 其他
|
||||
|
||||
当采用动态头部时，如果数据库新加了字段，需要使用【同步结构】功能把新字段同步到代码生成器中。为了防止对已有的配置造成影响，该功能只新增字段，不会对已有字段进行调整。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
60
newdocs/docs/notes/vue2/dragform.md
Normal file
60
newdocs/docs/notes/vue2/dragform.md
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: 可拖拽表单
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/dragform/
|
||||
---
|
||||
|
||||
适用场景和普通的动态表单一样。但该表单操作方便，与系统界面风格匹配度高，缺点是排版没有普通的动态表单灵活，只能做简单的行排列。
|
||||
|
||||
## 设计表单
|
||||
|
||||
功能【基础配置】-【表单设计】中，点击`新增`按钮，拖拽设计自己想要的表单，然后点击右上角`保存`按钮即可完成添加表单。
|
||||
|
||||
|
||||
|
||||
#### `关联数据库表`选项
|
||||
|
||||
在设计表单时，如果在`关联数据库表`中新增一个表名，并对拖拽的控件进行标准化命名，如：
|
||||
|
||||
|
||||
|
||||
这时保存后，会自动在数据库生成该表单对应的表：
|
||||
|
||||
|
||||
|
||||
在后面进行流程流转时，流程使用的表单数据会自动存放在该表中，方便统计及其他程序开发应用。
|
||||
|
||||
|
||||
::: warning 注意
|
||||
|
||||
如果表单不配置关联数据库表，流程使用的表单数据只能以json格式存放在`flowinstance`表的`FrmData`字段中，不利于后期数据分析和扩展。至于是否需要关联数据库表，可以根据自己需要进行选择
|
||||
|
||||
:::
|
||||
|
||||
|
||||
## 上传组件
|
||||
|
||||
在vform设计表单时，【图片】【文件】两个组件需要和后端上传交互，需要做些特殊的处理。
|
||||
|
||||
|
||||
|
||||
1、修改【图片】【文件】组件的上传地址为OpenAuth.WebApi的上传接口，即：
|
||||
|
||||
```
|
||||
http://localhost:52789/api/Files/UploadWithFormData
|
||||
```
|
||||
根据实际情况调整IP，当然也可以配置云服务器的上传接口，或其他自己开发的上传接口。具体参考：[https://www.yuque.com/visualdev/vform/urf1hz](https://www.yuque.com/visualdev/vform/urf1hz)
|
||||
|
||||
|
||||
2、修改组件的onUploadSucess事件，添加以下代码将接口返回的数据转化为vform可识别的数据：
|
||||
|
||||
```javascript
|
||||
var imgServerIp ="http://localhost:52789"; //图片服务器IP
|
||||
return {
|
||||
name: result.result[0].fileName,
|
||||
url: new URL(result.result[0].filePath,imgServerIp).href
|
||||
}
|
||||
```
|
||||
配置完成后，在流程实例中即可正常使用上传功能。
|
||||
|
||||
|
||||
38
newdocs/docs/notes/vue2/dragformdetail.md
Normal file
38
newdocs/docs/notes/vue2/dragformdetail.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: 可拖拽表单常规设置
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/dragformdetail/
|
||||
---
|
||||
|
||||
企业版可拖拽表单使用的是VForm Pro版本，详细的配置可参考:[https://www.vform666.com/](https://www.vform666.com/) 本节只做常用的配置说明。
|
||||
|
||||
## 后端加载下拉列表值
|
||||
|
||||
官网推荐通过数据源的方式给下拉列表赋值，简单点的方式是使用组件的`onCreated`事件。新建一个下拉先选框，唯一名称改为：`SelectVals`，在组件的`onCreated`事件中添加以下代码：
|
||||
|
||||
```javascript
|
||||
var selectVals = this.getWidgetRef('SelectVals');
|
||||
var addressAPI= 'http://localhost:52789/api/SelectVals/'
|
||||
axios.get(addressAPI).then(function(res) {
|
||||
if (res.data.code==200) {
|
||||
selectVals.loadOptions(res.data.result);
|
||||
}
|
||||
}).catch(function(error) {
|
||||
console.error(error)
|
||||
})
|
||||
```
|
||||
|
||||
基于OpenAuth.WebApi返回的数据格式：
|
||||
```javascript
|
||||
{
|
||||
"result": [{
|
||||
"label": "选项值1",
|
||||
"value": "1"
|
||||
}, {
|
||||
"label": "选项值2",
|
||||
"value": "2"
|
||||
}],
|
||||
"message": "操作成功",
|
||||
"code": 200
|
||||
}
|
||||
```
|
||||
13
newdocs/docs/notes/vue2/faq.md
Normal file
13
newdocs/docs/notes/vue2/faq.md
Normal file
@@ -0,0 +1,13 @@
|
||||
---
|
||||
title: 常见问题处理
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/faq/
|
||||
---
|
||||
|
||||
## vue运行的时候报错
|
||||
|
||||
在启动企业版的时候，如果提示下面错误：
|
||||
|
||||
|
||||
|
||||
请使用`npm run dev`命令来启动项目
|
||||
105
newdocs/docs/notes/vue2/form.md
Normal file
105
newdocs/docs/notes/vue2/form.md
Normal file
@@ -0,0 +1,105 @@
|
||||
---
|
||||
title: 工作流添加自定义表单
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/form/
|
||||
---
|
||||
|
||||
OpenAuth.Pro使用的动态表单可以满足日常普通的审批功能，但如果想`对用户提交的表单数据进行统计分析`、需要用户提交附件、需要`复杂的表单交互`，这时就需要开发者开发自己的表单页面。实现更加丰富的功能，效果如下：
|
||||
|
||||
|
||||
|
||||
本文以如何添加一个请假流程为例：
|
||||
|
||||
## 添加数据库表结构
|
||||
|
||||
先在数据库中添加记录表单数据的表，即请假条中的内容。
|
||||
|
||||
|
||||
|
||||
## 编写后端代码
|
||||
|
||||
自定义表单后台数据库读写需要继承`ICustomerForm`接口。并且名称需要和数据库表名+App的形式，如：`FrmLeaveReqApp`。参考代码如下：
|
||||
|
||||
```csharp
|
||||
public class FrmLeaveReqApp : BaseStringApp<FrmLeaveReq,OpenAuthDBContext>, ICustomerForm
|
||||
{
|
||||
//其他逻辑代码略
|
||||
public void Add(FrmLeaveReq obj)
|
||||
{
|
||||
Repository.Add(obj);
|
||||
}
|
||||
|
||||
public FrmLeaveReqApp(IUnitWork<OpenAuthDBContext> unitWork, IRepository<FrmLeaveReq,OpenAuthDBContext> repository,
|
||||
IAuth auth) : base(unitWork, repository, auth)
|
||||
{
|
||||
}
|
||||
|
||||
public void Add(string flowInstanceId, string frmData)
|
||||
{
|
||||
var req = JsonHelper.Instance.Deserialize<FrmLeaveReq>(frmData);
|
||||
req.FlowInstanceId = flowInstanceId;
|
||||
Add(req);
|
||||
}
|
||||
|
||||
public void Update(string flowInstanceId, string frmData)
|
||||
{
|
||||
var req = JsonHelper.Instance.Deserialize<FrmLeaveReq>(frmData);
|
||||
UnitWork.Update<FrmLeaveReq>(u => u.FlowInstanceId == flowInstanceId, u => new FrmLeaveReq
|
||||
{
|
||||
UserName = req.UserName,
|
||||
RequestComment = req.RequestComment,
|
||||
RequestType = req.RequestType
|
||||
//补充其他需要更新的字段
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 编写请假条前端表单代码
|
||||
|
||||
系统约定，所有开发人员自己开发的表单，全部放在views/forms文件夹下。并且以下图的文件结构进行放置。
|
||||
|
||||
|
||||
|
||||
其中：
|
||||
|
||||
FrmLeaveReq：为业务表单的文件夹名称，必须与数据库表名保持一致。
|
||||
|
||||
* add.vue：为业务表单页面，负责编写业务输入逻辑。内部methods必须包含方法：
|
||||
|
||||
```javascript
|
||||
getData() {
|
||||
return this.temp
|
||||
}
|
||||
```
|
||||
|
||||
上层框架会调用该方法来获取表单中的数据，用于后续逻辑处理。
|
||||
|
||||
* detail.vue：为业务表单的展示页面。
|
||||
|
||||
## 注册表单
|
||||
|
||||
在表单添加的下拉框里添加：
|
||||
|
||||
|
||||
::: warning 注意
|
||||
企业Vue2 5.2或以前版本需要在项目main.js中注入：
|
||||
|
||||
```javascript
|
||||
// 请假条表单和详情
|
||||
import FrmLeaveReqAdd from '@/views/forms/userDefine/frmLeaveReq/add'
|
||||
import FrmLeaveReqDetail from '@/views/forms/userDefine/frmLeaveReq/detail'
|
||||
Vue.component('FrmLeaveReqAdd', FrmLeaveReqAdd)
|
||||
Vue.component('FrmLeaveReqDetail', FrmLeaveReqDetail)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 配置表单
|
||||
|
||||
编写完上面代码后，运行企业版。使用【基础配置】--【表单设计】--【添加】功能添加刚刚的表单：
|
||||
|
||||
|
||||
|
||||
这样就可以在流程设计里面，选择使用刚刚添加的表单了。
|
||||
20
newdocs/docs/notes/vue2/keepalive.md
Normal file
20
newdocs/docs/notes/vue2/keepalive.md
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: 界面缓存
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/keepalive/
|
||||
---
|
||||
|
||||
OpenAuth.Pro以前的版本采用vue [keepAlive](https://cn.vuejs.org/guide/built-ins/keep-alive.html)的方式缓存所有前端组件。从v5.2版本开始，可以在【模块管理】中配置前端是否缓存。如图：
|
||||
|
||||
|
||||
|
||||
|
||||
::: tip 提示
|
||||
目前框架除了【消息日志/系统日志】外，其他界面都是默认自动缓存的。
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
29
newdocs/docs/notes/vue2/openurl.md
Normal file
29
newdocs/docs/notes/vue2/openurl.md
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: 打开指定URL
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/openurl/
|
||||
---
|
||||
|
||||
上一章节通过添加模块或直接在路由表中添加固定路由实现路由控制。在有些场景下，需要代码中直接打开一个外部指定URL的地址（不通过系统的【模块管理】功能添加到导航栏），如下图：
|
||||
|
||||
|
||||
|
||||
可以直接使用下面代码实现：
|
||||
|
||||
```javascript
|
||||
openUrl() {
|
||||
let obj = {}
|
||||
obj['openauth'] = { //这里的openauth可以改成你希望在浏览器地址栏中看到的url
|
||||
name: '官网',
|
||||
url: 'http://www.openauth.net.cn',
|
||||
}
|
||||
this.$store.dispatch('setIframeTagViews', obj, { root: true })
|
||||
|
||||
this.$router.push({ path: '/iframePage/openauth' })
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
62
newdocs/docs/notes/vue2/printerplan.md
Normal file
62
newdocs/docs/notes/vue2/printerplan.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: 智能打印
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/printerplan/
|
||||
---
|
||||
|
||||
OpenAuth.Pro提供灵活无代码（可能需要写SQL）的打印解决方案，无需开发人员参与即可配置自己需要的打印。
|
||||
|
||||
打印模板设计界面如下：
|
||||
|
||||
|
||||
|
||||
挂载到业务系统中效果：
|
||||
|
||||
|
||||
|
||||
|
||||
## 使用指南
|
||||
|
||||
#### 设计打印模版
|
||||
|
||||
在打印中心-打印模版功能新增打印模版。设计界面说明如下：
|
||||
|
||||
|
||||
|
||||
左边为设计工具栏，中间为画布，右边为属性框。可以根据自己需要调整打印界面。
|
||||
|
||||
#### 设置数据源
|
||||
|
||||
打印模版的核心是设计数据源。用户通过设计数据源，实现无开发打印。如下：
|
||||
|
||||
|
||||
|
||||
1. 数据源：用于查询打印打印数据。
|
||||
|
||||
2. Id:由数据源中的SQL自动生成的参数文本框。
|
||||
|
||||
3. 分组字段：如果配置了`分组字段`，则默认对应列表式打印模版。否则，可以看做卡片式。
|
||||
|
||||
* 【卡片式】用于打印一页只有一条数据的情况。比如快递的标签、用户名片等。
|
||||
|
||||
* 【列表式】用于打印一页有多条数据的情况，通常是主从结构的表，同时打印主表及从表详情。如客户的发货清单。
|
||||
|
||||
|
||||
::: warning 注意
|
||||
|
||||
两种模版类型没有严格的区分。在后端返回相同的数据情况下，如果配置了`分组字段`，后端返回的数据会被转化成主从结构。上图即为官网【入库随货同行单（列表式）【带参数】】按OrderId进行分组后的数据。
|
||||
|
||||
:::
|
||||
|
||||
#### 功能模块挂载打印方案
|
||||
|
||||
制作完打印方案后，在【模块管理】功能里面，把刚刚打印方案与功能关联。
|
||||
|
||||
|
||||
|
||||
|
||||
#### 使用打印
|
||||
|
||||
最后就可以在功能里面使用打印了。
|
||||
|
||||
|
||||
53
newdocs/docs/notes/vue2/router.md
Normal file
53
newdocs/docs/notes/vue2/router.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: 路由操作
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/router/
|
||||
---
|
||||
|
||||
OpenAuth.Pro采用的是标准vue router来管理页面跳转，基础知识请参考[https://router.vuejs.org/zh/](https://router.vuejs.org/zh/)。如果需要添加页面，可以通过以下两种方式：
|
||||
|
||||
## 模块管理添加页面
|
||||
|
||||
直接使用【基础配置】->【模块管理】功能添加自己想访问的页面。如图：
|
||||
|
||||
|
||||
|
||||
::: tip 提示
|
||||
如果添加的url里面带有`http`，系统会自动使用iframe加载一个三方的站点，无需特殊处理。如系统自带的【接口文档】模块
|
||||
:::
|
||||
|
||||
## 不通过模块管理添加页面
|
||||
|
||||
|
||||
在有些场景下，不想通过系统的【模块管理】功能添加页面，如登录、注册、帮助中心、站点介绍等，可以在路由表中直接添加。
|
||||
打开`src\router\index.js`，在数组常量`constantRouterMap`中添加自己的路由信息：
|
||||
|
||||
```javascript
|
||||
{
|
||||
path: '/regster',
|
||||
name: 'regster',
|
||||
hidden: true, //是否在左侧导航栏隐藏
|
||||
meta: {
|
||||
title: '仓储中心',
|
||||
icon: 'guide',
|
||||
sortNo: 0
|
||||
},
|
||||
component: () => import('@/views/regster/index') //路由对应的页面视图
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
因为注册页面没有登录的用户信息，会被系统的权限体系拦截从而跳转到登录页面。需要添加到白名单中。
|
||||
打开`src\permission.js`,在`whiteList`中加入刚刚的路由信息：
|
||||
|
||||
|
||||
```javascript
|
||||
const whiteList = ['/regster', ...] // 不重定向白名单
|
||||
|
||||
```
|
||||
|
||||
添加完成后，启动站点，直接浏览器访问`http://localhost:1803/#/regster`即可：
|
||||
|
||||
|
||||
|
||||
|
||||
33
newdocs/docs/notes/vue2/startflow.md
Normal file
33
newdocs/docs/notes/vue2/startflow.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: 操作手册
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/startflow/
|
||||
---
|
||||
|
||||
一个完整的工作流包括流程设计及流程实例处理。分别对应系统中【基础配置/流程设计】及【流程中心】两个板块。具体包含以下几个步骤：
|
||||
|
||||
## 添加流程模版
|
||||
|
||||
在【基础配置/流程设计】中添加一个流程模版，建好流程模版，拥有该模版权限的用户就可以基于改模版创建流程实例。操作如下：
|
||||
|
||||
|
||||
|
||||
::: warning 注意
|
||||
|
||||
流程模版使用的表单，需要在【基础配置/表单设计】中添加，具体查看[表单设计-基本介绍](/pro/startform.html)
|
||||
|
||||
:::
|
||||
|
||||
## 添加流程实例
|
||||
|
||||
在【流程中心/我的流程】中【新的申请】创建一个流程实例。创建成功后就可以在列表中看到该流程。
|
||||
|
||||
|
||||
## 流程审批
|
||||
|
||||
流程节点对应的执行用户会在【流程中心/待处理流程】中看到该流程，并进行相应的处理；
|
||||
适用场景和普通的动态表单一样。但该表单操作方便，与系统界面风格匹配度高，缺点是排版没有普通的动态表单灵活，只能做简单的行排列。
|
||||
|
||||
|
||||
|
||||
|
||||
20
newdocs/docs/notes/vue2/startform.md
Normal file
20
newdocs/docs/notes/vue2/startform.md
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: 基本介绍
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/startform/
|
||||
---
|
||||
|
||||
OpenAuth.Pro内置的表单类型有以下三种：
|
||||
|
||||
## 动态表单
|
||||
|
||||
动态表单适用于灵活设计界面，逻辑简单的表单。这种表单无需编码，即可直接集成到流程功能。
|
||||
|
||||
## 自定义开发表单
|
||||
|
||||
该类型表单需要开发者在源码中先编写好表单界面（基于vue component）,再提供给用户选择使用。适用于交互复杂的界面。详细请参考：[企业版工作流添加自定义表单](/pro/form.html)
|
||||
|
||||
## 可拖拽表单
|
||||
|
||||
适用场景和普通的动态表单一样。但该表单操作方便，与系统界面风格匹配度高，缺点是排版没有普通的动态表单灵活，只能做简单的行排列。详细请参考：[可拖拽表单](/pro/dragform.html)
|
||||
|
||||
15
newdocs/docs/notes/vue2/structure.md
Normal file
15
newdocs/docs/notes/vue2/structure.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: 项目结构
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /vue2/structure/
|
||||
---
|
||||
|
||||
|
||||
|
||||
整个vue的入口是main.js，这个可以在webpack.base.conf.js中调整配置，代码如下：
|
||||
```javascript
|
||||
entry: {
|
||||
app: './src/main.js'
|
||||
}
|
||||
```
|
||||
通过打包之后，编译后的代码全部会注入到index.html的`<div id="app"></div>`里面。
|
||||
Reference in New Issue
Block a user