mirror of
https://gitee.com/dotnetchina/OpenAuth.Net.git
synced 2025-04-30 20:58:01 +08:00
docs: 分离vue2和vue3版本
This commit is contained in:
yubaolee
parent
af1c436212
commit
65ea5ec8d2
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: yubaolee <yubaolee@163.com> | ahfu~ <954478625@qq.com>
|
||||
* @Date: 2023-08-12 10:48:24
|
||||
* @LastEditTime: 2025-04-06 00:45:14
|
||||
* @LastEditTime: 2025-04-08 16:59:10
|
||||
* @Description:
|
||||
* @
|
||||
* @Copyright (c) 2023 by yubaolee | ahfu~ , All Rights Reserved.
|
||||
@ -46,9 +46,14 @@ module.exports = {
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
text: 'OpenAuth.Pro(企业vue2/vue3)',
|
||||
text: 'OpenAuth.Pro(vue3版本)',
|
||||
link: '/pro/',
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
text: 'OpenAuth.Pro(vue2版本)',
|
||||
link: '/vue2/',
|
||||
target: '_blank'
|
||||
}
|
||||
],
|
||||
},
|
||||
@ -149,6 +154,34 @@ module.exports = {
|
||||
'components',
|
||||
'faq',
|
||||
],
|
||||
'/vue2/': [
|
||||
['', '项目介绍'],
|
||||
'deploy',
|
||||
'structure',
|
||||
'devnew',
|
||||
{
|
||||
title: '基础开发', // 必要的
|
||||
sidebarDepth: 1, // 可选的, 默认值是 1
|
||||
collapsable: false,
|
||||
children: ['router','openurl','keepalive'],
|
||||
},
|
||||
'datapropertyrule',
|
||||
'printerplan',
|
||||
{
|
||||
title: '表单设计', // 必要的
|
||||
sidebarDepth: 1, // 可选的, 默认值是 1
|
||||
collapsable: false,
|
||||
children: ['startform','dragform','dragformdetail'],
|
||||
},
|
||||
{
|
||||
title: '工作流', // 必要的
|
||||
sidebarDepth: 1, // 可选的, 默认值是 1
|
||||
collapsable: false,
|
||||
children: ['startflow','form'],
|
||||
},
|
||||
'components',
|
||||
'faq',
|
||||
],
|
||||
|
||||
'/net/': [
|
||||
['', '项目介绍'], 'start', 'deploy', 'devnew'
|
||||
|
||||
97
docs/vue2/README.md
Normal file
97
docs/vue2/README.md
Normal file
@ -0,0 +1,97 @@
|
||||
OpenAuth.Pro是一套全新的前端界面，基于vue2 + element-ui /vue3 + element-plus，采用VUE全家桶（VUE+VUEX+VUE-ROUTER）单页面SPA开发。它使用开源版OpenAuth.Net的API接口（即：OpenAuth.WebApi）提供数据服务。二者的关系如下：
|
||||
|
||||
|
||||
|
||||
企业版代码获取方式：[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)
|
||||
|
||||
Vue2演示地址： [http://demo.openauth.net.cn:1803/](http://demo.openauth.net.cn:1803/)
|
||||
|
||||
Vue3演示地址： [http://demo.openauth.net.cn:1805/](http://demo.openauth.net.cn:1805/)
|
||||
|
||||
移动H5版本演示（请使用浏览器移动模式或直接用手机打开）：[http://demo.openauth.net.cn:1804/](http://demo.openauth.net.cn:1804/)
|
||||
|
||||
## 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/)。其中：
|
||||
|
||||
OpenAuth.Pro v4.6.4及以后的版本使用Node 18
|
||||
|
||||
OpenAuth.Pro v4.6.3-v4.3 使用Node 16
|
||||
|
||||
OpenAuth.Pro v4.3及以前的版本使用Node 14
|
||||
|
||||
#### visual studio code
|
||||
|
||||
下载最新版的vs code，用来作为OpenAuth.Pro的开发工具。
|
||||
|
||||
|
||||
## 创建数据库
|
||||
|
||||
* 如果只使用开源的OpenAuth.Mvc。则新建一个空数据库：OpenAuthDB。然后在OpenAuth.Net项目文件夹【sql server 初始化脚本】中，运行`Sql Server脚本.sql`（或mysql初始化脚本）
|
||||
|
||||
* 如果只使用企业版的OpenAuth.WebApi,则新建一个空数据库：OpenAuthPro。使用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/) 即可打开企业版界面
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
89
docs/vue2/components.md
Normal file
89
docs/vue2/components.md
Normal file
@ -0,0 +1,89 @@
|
||||
# 内置组件
|
||||
|
||||
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', ''),
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
|
||||
73
docs/vue2/datapropertyrule.md
Normal file
73
docs/vue2/datapropertyrule.md
Normal file
@ -0,0 +1,73 @@
|
||||
# 权限控制
|
||||
|
||||
## 数据权限
|
||||
|
||||
关于数据权限控制，可以详细查看博文：[通用权限设计与实现](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
|
||||
})
|
||||
```
|
||||
### 运行界面配置
|
||||
|
||||
完成代码编写后，在【基础配置】--【角色管理】--【为角色分配模块】最后为角色分配【可见字段】中分配权限
|
||||
|
||||
|
||||
|
||||
|
||||
42
docs/vue2/deploy.md
Normal file
42
docs/vue2/deploy.md
Normal file
@ -0,0 +1,42 @@
|
||||
# 部署
|
||||
|
||||
后端接口部署请参考：[部署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;
|
||||
}
|
||||
|
||||
```
|
||||
174
docs/vue2/devnew.md
Normal file
174
docs/vue2/devnew.md
Normal file
@ -0,0 +1,174 @@
|
||||
# 企业版代码生成器
|
||||
|
||||
本章节视频讲解请参考：[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`。
|
||||
|
||||
## 其他
|
||||
|
||||
当采用动态头部时，如果数据库新加了字段，需要使用【同步结构】功能把新字段同步到代码生成器中。为了防止对已有的配置造成影响，该功能只新增字段，不会对已有字段进行调整。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
56
docs/vue2/dragform.md
Normal file
56
docs/vue2/dragform.md
Normal file
@ -0,0 +1,56 @@
|
||||
# 可拖拽表单
|
||||
|
||||
适用场景和普通的动态表单一样。但该表单操作方便，与系统界面风格匹配度高，缺点是排版没有普通的动态表单灵活，只能做简单的行排列。
|
||||
|
||||
## 设计表单
|
||||
|
||||
功能【基础配置】-【表单设计】中，点击`新增`按钮，拖拽设计自己想要的表单，然后点击右上角`保存`按钮即可完成添加表单。
|
||||
|
||||
|
||||
|
||||
#### `关联数据库表`选项
|
||||
|
||||
在设计表单时，如果在`关联数据库表`中新增一个表名，并对拖拽的控件进行标准化命名，如：
|
||||
|
||||
|
||||
|
||||
这时保存后，会自动在数据库生成该表单对应的表：
|
||||
|
||||
|
||||
|
||||
在后面进行流程流转时，流程使用的表单数据会自动存放在该表中，方便统计及其他程序开发应用。
|
||||
|
||||
|
||||
::: 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
|
||||
}
|
||||
```
|
||||
配置完成后，在流程实例中即可正常使用上传功能。
|
||||
|
||||
|
||||
34
docs/vue2/dragformdetail.md
Normal file
34
docs/vue2/dragformdetail.md
Normal file
@ -0,0 +1,34 @@
|
||||
# 可拖拽表单常规设置
|
||||
|
||||
企业版可拖拽表单使用的是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
|
||||
}
|
||||
```
|
||||
102
docs/vue2/faq.md
Normal file
102
docs/vue2/faq.md
Normal file
@ -0,0 +1,102 @@
|
||||
# 常见问题处理
|
||||
|
||||
## 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`命令来启动项目
|
||||
|
||||
|
||||
## NodeJs v16中node-sass报错
|
||||
|
||||
在使用`npm install`时，最常见的一个错误就是关于node-sass包安装的错误，如下：
|
||||
|
||||
```shell
|
||||
|
||||
npm ERR! code 1
|
||||
npm ERR! path D:\OpenAuth.Pro\Client\node_modules\node-sass
|
||||
npm ERR! command failed
|
||||
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js
|
||||
npm ERR! Building: C:\Program Files\nodejs\node.exe D:\OpenAuth.Pro\Client\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
|
||||
npm ERR! gyp info it worked if it ends with ok
|
||||
npm ERR! gyp verb cli [
|
||||
npm ERR! gyp verb cli 'C:\\Program Files\\nodejs\\node.exe',
|
||||
npm ERR! gyp verb cli 'D:\\OpenAuth.Pro\\Client\\node_modules\\node-gyp\\bin\\node-gyp.js',
|
||||
npm ERR! gyp verb cli 'rebuild',
|
||||
npm ERR! gyp verb cli '--verbose',
|
||||
npm ERR! gyp verb cli '--libsass_ext=',
|
||||
npm ERR! gyp verb cli '--libsass_cflags=',
|
||||
npm ERR! gyp verb cli '--libsass_ldflags=',
|
||||
npm ERR! gyp verb cli '--libsass_library='
|
||||
npm ERR! gyp verb cli ]
|
||||
npm ERR! gyp info using node-gyp@3.8.0
|
||||
npm ERR! gyp info using node@16.13.2 | win32 | x64
|
||||
npm ERR! gyp verb command rebuild []
|
||||
npm ERR! gyp verb command clean []
|
||||
npm ERR! gyp verb clean removing "build" directory
|
||||
npm ERR! gyp verb command configure []
|
||||
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
|
||||
npm ERR! gyp verb `which` failed Error: not found: python2
|
||||
...
|
||||
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
|
||||
npm ERR! gyp verb `which` failed Error: not found: python
|
||||
npm ERR! gyp verb `which` failed at getNotFoundError (D:\OpenAuth.Pro\Client\node_modules\which\which.js:13:12)
|
||||
...
|
||||
npm ERR! gyp verb could not find "python". checking python launcher
|
||||
npm ERR! gyp verb could not find "python". guessing location
|
||||
npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe
|
||||
npm ERR! gyp ERR! configure error
|
||||
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
|
||||
npm ERR! gyp ERR! stack at PythonFinder.failNoPython (D:\OpenAuth.Pro\Client\node_modules\node-gyp\lib\configure.js:484:19)
|
||||
npm ERR! gyp ERR! stack at PythonFinder.<anonymous> (D:\OpenAuth.Pro\Client\node_modules\node-gyp\lib\configure.js:509:16)
|
||||
npm ERR! gyp ERR! stack at FSReqCallback.oncomplete (node:fs:198:21)
|
||||
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\OpenAuth.Pro\\Client\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
|
||||
npm ERR! gyp ERR! cwd D:\OpenAuth.Pro\Client\node_modules\node-sass
|
||||
npm ERR! gyp ERR! node -v v16.13.2
|
||||
npm ERR! gyp ERR! node-gyp -v v3.8.0
|
||||
npm ERR! gyp ERR! not ok
|
||||
npm ERR! Build failed with error code: 1
|
||||
```
|
||||
|
||||
修复方法：
|
||||
|
||||
* 修改package.json文件中node-sass版本：
|
||||
|
||||
```javascript
|
||||
|
||||
"node-sass": "^6.0.1",
|
||||
```
|
||||
|
||||
* 清理node缓存，重新安装：
|
||||
|
||||
```shell
|
||||
npm cache clean --force
|
||||
npm i
|
||||
|
||||
```
|
||||
101
docs/vue2/form.md
Normal file
101
docs/vue2/form.md
Normal file
@ -0,0 +1,101 @@
|
||||
# 工作流添加自定义表单
|
||||
|
||||
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)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 配置表单
|
||||
|
||||
编写完上面代码后，运行企业版。使用【基础配置】--【表单设计】--【添加】功能添加刚刚的表单：
|
||||
|
||||
|
||||
|
||||
这样就可以在流程设计里面，选择使用刚刚添加的表单了。
|
||||
16
docs/vue2/keepalive.md
Normal file
16
docs/vue2/keepalive.md
Normal file
@ -0,0 +1,16 @@
|
||||
# 界面缓存
|
||||
|
||||
OpenAuth.Pro以前的版本采用vue [keepAlive](https://cn.vuejs.org/guide/built-ins/keep-alive.html)的方式缓存所有前端组件。从v5.2版本开始，可以在【模块管理】中配置前端是否缓存。如图：
|
||||
|
||||
|
||||
|
||||
|
||||
::: tip 提示
|
||||
目前框架除了【消息日志/系统日志】外，其他界面都是默认自动缓存的。
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
25
docs/vue2/openurl.md
Normal file
25
docs/vue2/openurl.md
Normal file
@ -0,0 +1,25 @@
|
||||
# 打开指定URL
|
||||
|
||||
上一章节通过添加模块或直接在路由表中添加固定路由实现路由控制。在有些场景下，需要代码中直接打开一个外部指定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' })
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
58
docs/vue2/printerplan.md
Normal file
58
docs/vue2/printerplan.md
Normal file
@ -0,0 +1,58 @@
|
||||
# 智能打印
|
||||
|
||||
OpenAuth.Pro提供灵活无代码（可能需要写SQL）的打印解决方案，无需开发人员参与即可配置自己需要的打印。
|
||||
|
||||
打印模板设计界面如下：
|
||||
|
||||
|
||||
|
||||
挂载到业务系统中效果：
|
||||
|
||||
|
||||
|
||||
|
||||
## 使用指南
|
||||
|
||||
#### 设计打印模版
|
||||
|
||||
在打印中心-打印模版功能新增打印模版。设计界面说明如下：
|
||||
|
||||
|
||||
|
||||
左边为设计工具栏，中间为画布，右边为属性框。可以根据自己需要调整打印界面。
|
||||
|
||||
#### 设置数据源
|
||||
|
||||
打印模版的核心是设计数据源。用户通过设计数据源，实现无开发打印。如下：
|
||||
|
||||
|
||||
|
||||
1. 数据源：用于查询打印打印数据。
|
||||
|
||||
2. Id:由数据源中的SQL自动生成的参数文本框。
|
||||
|
||||
3. 分组字段：如果配置了`分组字段`，则默认对应列表式打印模版。否则，可以看做卡片式。
|
||||
|
||||
* 【卡片式】用于打印一页只有一条数据的情况。比如快递的标签、用户名片等。
|
||||
|
||||
* 【列表式】用于打印一页有多条数据的情况，通常是主从结构的表，同时打印主表及从表详情。如客户的发货清单。
|
||||
|
||||
|
||||
::: warning 注意
|
||||
|
||||
两种模版类型没有严格的区分。在后端返回相同的数据情况下，如果配置了`分组字段`，后端返回的数据会被转化成主从结构。上图即为官网【入库随货同行单（列表式）【带参数】】按OrderId进行分组后的数据。
|
||||
|
||||
:::
|
||||
|
||||
#### 功能模块挂载打印方案
|
||||
|
||||
制作完打印方案后，在【模块管理】功能里面，把刚刚打印方案与功能关联。
|
||||
|
||||
|
||||
|
||||
|
||||
#### 使用打印
|
||||
|
||||
最后就可以在功能里面使用打印了。
|
||||
|
||||
|
||||
49
docs/vue2/router.md
Normal file
49
docs/vue2/router.md
Normal file
@ -0,0 +1,49 @@
|
||||
# 路由操作
|
||||
|
||||
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`即可：
|
||||
|
||||
|
||||
|
||||
|
||||
29
docs/vue2/startflow.md
Normal file
29
docs/vue2/startflow.md
Normal file
@ -0,0 +1,29 @@
|
||||
# 操作手册
|
||||
|
||||
一个完整的工作流包括流程设计及流程实例处理。分别对应系统中【基础配置/流程设计】及【流程中心】两个板块。具体包含以下几个步骤：
|
||||
|
||||
## 添加流程模版
|
||||
|
||||
在【基础配置/流程设计】中添加一个流程模版，建好流程模版，拥有该模版权限的用户就可以基于改模版创建流程实例。操作如下：
|
||||
|
||||
|
||||
|
||||
::: warning 注意
|
||||
|
||||
流程模版使用的表单，需要在【基础配置/表单设计】中添加，具体查看[表单设计-基本介绍](/pro/startform.html)
|
||||
|
||||
:::
|
||||
|
||||
## 添加流程实例
|
||||
|
||||
在【流程中心/我的流程】中【新的申请】创建一个流程实例。创建成功后就可以在列表中看到该流程。
|
||||
|
||||
|
||||
## 流程审批
|
||||
|
||||
流程节点对应的执行用户会在【流程中心/待处理流程】中看到该流程，并进行相应的处理；
|
||||
适用场景和普通的动态表单一样。但该表单操作方便，与系统界面风格匹配度高，缺点是排版没有普通的动态表单灵活，只能做简单的行排列。
|
||||
|
||||
|
||||
|
||||
|
||||
16
docs/vue2/startform.md
Normal file
16
docs/vue2/startform.md
Normal file
@ -0,0 +1,16 @@
|
||||
# 基本介绍
|
||||
|
||||
OpenAuth.Pro内置的表单类型有以下三种：
|
||||
|
||||
## 动态表单
|
||||
|
||||
动态表单适用于灵活设计界面，逻辑简单的表单。这种表单无需编码，即可直接集成到流程功能。
|
||||
|
||||
## 自定义开发表单
|
||||
|
||||
该类型表单需要开发者在源码中先编写好表单界面（基于vue component）,再提供给用户选择使用。适用于交互复杂的界面。详细请参考：[企业版工作流添加自定义表单](/pro/form.html)
|
||||
|
||||
## 可拖拽表单
|
||||
|
||||
适用场景和普通的动态表单一样。但该表单操作方便，与系统界面风格匹配度高，缺点是排版没有普通的动态表单灵活，只能做简单的行排列。详细请参考：[可拖拽表单](/pro/dragform.html)
|
||||
|
||||
11
docs/vue2/structure.md
Normal file
11
docs/vue2/structure.md
Normal file
@ -0,0 +1,11 @@
|
||||
# 项目结构
|
||||
|
||||
|
||||
|
||||
整个vue的入口是main.js，这个可以在webpack.base.conf.js中调整配置，代码如下：
|
||||
```javascript
|
||||
entry: {
|
||||
app: './src/main.js'
|
||||
}
|
||||
```
|
||||
通过打包之后，编译后的代码全部会注入到index.html的`<div id="app"></div>`里面。
|
||||
Loading…
Reference in New Issue
Block a user