mirror of
https://gitee.com/dotnetchina/OpenAuth.Net.git
synced 2025-09-19 10:08:04 +08:00
add docs
This commit is contained in:
yubaolee
59
docs/pro/README.md
Normal file
59
docs/pro/README.md
Normal file
@@ -0,0 +1,59 @@
|
||||
OpenAuth.Pro是一套全新的前端界面，基于vue-element-admin，采用VUE全家桶（VUE+VUEX+VUE-ROUTER）单页面SPA开发。它使用开源版OpenAuth.Core的API接口（即：OpenAuth.WebApi）提供数据服务。二者的关系如下：
|
||||
|
||||
|
||||
|
||||
企业版代码获取方式：[http://www.openauth.net.cn/question/detail.html?id=a2be2d61-7fcb-4df8-8be2-9f296c22a89c](http://www.openauth.net.cn/question/detail.html?id=a2be2d61-7fcb-4df8-8be2-9f296c22a89c)
|
||||
|
||||
## 工具准备
|
||||
|
||||
#### 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.Core项目文件夹【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 命令经行安装，如下图：
|
||||
|
||||
|
||||
使用npm run dev 命令运行。如下图：
|
||||
|
||||
|
||||
启动成功后，使用浏览器访问[http://localhost:1803/](http://localhost:1803/) 即可打开企业版界面
|
||||
|
||||
::: warning 注意事项
|
||||
开发环境配置文件为`.env.dev`，调试前请调整为自己的接口地址：
|
||||
|
||||
```javascript
|
||||
VUE_APP_BASE_API = http://localhost:52789/api
|
||||
VUE_APP_BASE_IMG_URL = http://localhost:52789
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
89
docs/pro/components.md
Normal file
89
docs/pro/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="mini"></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="mini"></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/pro/datapropertyrule.md
Normal file
73
docs/pro/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/pro/deploy.md
Normal file
42
docs/pro/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;
|
||||
}
|
||||
|
||||
```
|
||||
118
docs/pro/devnew.md
Normal file
118
docs/pro/devnew.md
Normal file
@@ -0,0 +1,118 @@
|
||||
# 企业版代码生成器
|
||||
|
||||
## 术语解释
|
||||
|
||||
#### 动态头部
|
||||
|
||||
如果启用动态头部，表示前端渲染列表（或表单）时，列表的列定义是从后端返回。常见的前端代码如下：
|
||||
```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
|
||||
(
|
||||
createtime datetime not null comment '操作时间',
|
||||
status int not null comment '出库/入库',
|
||||
price decimal(10, 1) not null comment '产品单价',
|
||||
number int not null comment '产品数量',
|
||||
name text not null comment '产品名称',
|
||||
orgid varchar(50) null comment '组织ID',
|
||||
user varchar(50) not null comment '操作人',
|
||||
viewable varchar(50) not null comment '可见范围',
|
||||
id varchar(50) not null comment '数据ID'
|
||||
primary key
|
||||
)
|
||||
|
||||
```
|
||||
|
||||
* 使用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页面】;
|
||||
|
||||
## 配置模块地址
|
||||
|
||||
运行系统，使用System账号登录系统，在【模块管理】中，添加“仓储管理”模块，如下图：
|
||||
|
||||
|
||||
|
||||
::: warning 注意
|
||||
完成以上步骤后，请重启OpenAuth.WebApi，用来重新加载刚刚生成的后台代码
|
||||
|
||||
子表不需要添加模块
|
||||
:::
|
||||
|
||||
成功后可以进入新加的仓储管理界面：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
28
docs/pro/dragform.md
Normal file
28
docs/pro/dragform.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# 可拖拽表单
|
||||
|
||||
适用场景和普通的动态表单一样。但该表单操作方便，与系统界面风格匹配度高，缺点是排版没有普通的动态表单灵活，只能做简单的行排列。
|
||||
|
||||
## 设计表单
|
||||
|
||||
功能【基础配置】-【表单设计】中，点击`新增`按钮，拖拽设计自己想要的表单，然后点击右上角`保存`按钮即可完成添加表单。
|
||||
|
||||
|
||||
|
||||
#### `关联数据库表`选项
|
||||
|
||||
在设计表单时，如果在`关联数据库表`中新增一个表名，并对拖拽的控件进行标准化命名，如：
|
||||
|
||||
|
||||
|
||||
这时保存后，会自动在数据库生成该表单对应的表：
|
||||
|
||||
|
||||
|
||||
在后面进行流程流转时，流程使用的表单数据会自动存放在该表中，方便统计及其他程序开发应用。
|
||||
|
||||
|
||||
::: warning 注意
|
||||
|
||||
如果表单不配置关联数据库表，流程使用的表单数据只能以json格式存放在`flowinstance`表的`FrmData`字段中，不利于后期数据分析和扩展。至于是否需要关联数据库表，可以根据自己需要进行选择
|
||||
|
||||
:::
|
||||
34
docs/pro/dragformdetail.md
Normal file
34
docs/pro/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/pro/faq.md
Normal file
102
docs/pro/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
|
||||
|
||||
```
|
||||
58
docs/pro/form.md
Normal file
58
docs/pro/form.md
Normal file
@@ -0,0 +1,58 @@
|
||||
# 工作流添加自定义表单
|
||||
|
||||
OpenAuth.Pro使用的动态表单可以满足日常普通的审批功能，但如果想`对用户提交的表单数据进行统计分析`、需要用户提交附件、需要`复杂的表单交互`，这时就需要开发者开发自己的表单页面。实现更加丰富的功能，效果如下：
|
||||
|
||||
|
||||
|
||||
本文以如何添加一个请假流程为例：
|
||||
|
||||
## 添加数据库表结构
|
||||
|
||||
先在数据库中添加记录表单数据的表，即请假条中的内容。
|
||||
|
||||
|
||||
|
||||
|
||||
## 编写请假条表单代码
|
||||
|
||||
系统约定，所有开发人员自己开发的表单，全部放在views/forms文件夹下。并且以下图的文件结构进行放置。
|
||||
|
||||
|
||||
|
||||
其中：
|
||||
|
||||
frmLeaveReq：为业务表单的文件夹名称，必须与数据库表名保持一致。
|
||||
|
||||
* add.vue：为业务表单页面，负责编写业务输入逻辑。内部methods必须包含方法：
|
||||
|
||||
```javascript
|
||||
getData() {
|
||||
return this.temp
|
||||
}
|
||||
```
|
||||
|
||||
上层框架会调用该方法来获取表单中的数据，用于后续逻辑处理。
|
||||
|
||||
* detail.vue：为业务表单的展示页面。
|
||||
|
||||
## 注册表单
|
||||
在项目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)
|
||||
```
|
||||
|
||||
并在表单添加的下拉框里添加：
|
||||
|
||||
|
||||
## 配置表单
|
||||
|
||||
编写完上面代码后，运行企业版。使用【基础配置】--【表单设计】--【添加】功能添加刚刚的表单：
|
||||
|
||||
|
||||
|
||||
这样就可以在流程设计里面，选择使用刚刚添加的表单了。
|
||||
25
docs/pro/openurl.md
Normal file
25
docs/pro/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' })
|
||||
},
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
49
docs/pro/router.md
Normal file
49
docs/pro/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/pro/startflow.md
Normal file
29
docs/pro/startflow.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# 操作手册
|
||||
|
||||
一个完整的工作流包括流程设计及流程实例处理。分别对应系统中【基础配置/流程设计】及【流程中心】两个板块。具体包含以下几个步骤：
|
||||
|
||||
## 添加流程模版
|
||||
|
||||
在【基础配置/流程设计】中添加一个流程模版，建好流程模版，拥有该模版权限的用户就可以基于改模版创建流程实例。操作如下：
|
||||
|
||||
|
||||
|
||||
::: warning 注意
|
||||
|
||||
流程模版使用的表单，需要在【基础配置/表单设计】中添加，具体查看[表单设计-基本介绍](/pro/startform.html)
|
||||
|
||||
:::
|
||||
|
||||
## 添加流程实例
|
||||
|
||||
在【流程中心/我的流程】中【新的申请】创建一个流程实例。创建成功后就可以在列表中看到该流程。
|
||||
|
||||
|
||||
## 流程审批
|
||||
|
||||
流程节点对应的执行用户会在【流程中心/待处理流程】中看到该流程，并进行相应的处理；
|
||||
适用场景和普通的动态表单一样。但该表单操作方便，与系统界面风格匹配度高，缺点是排版没有普通的动态表单灵活，只能做简单的行排列。
|
||||
|
||||
|
||||
|
||||
|
||||
16
docs/pro/startform.md
Normal file
16
docs/pro/startform.md
Normal file
@@ -0,0 +1,16 @@
|
||||
# 基本介绍
|
||||
|
||||
OpenAuth.Pro内置的表单类型有以下三种：
|
||||
|
||||
## 动态表单
|
||||
|
||||
动态表单适用于灵活设计界面，逻辑简单的表单。这种表单无需编码，即可直接集成到流程功能。
|
||||
|
||||
## 自定义开发表单
|
||||
|
||||
该类型表单需要开发者在源码中先编写好表单界面（基于vue component）,再提供给用户选择使用。适用于交互复杂的界面。详细请参考：[企业版工作流添加自定义表单](/pro/form.html)
|
||||
|
||||
## 可拖拽表单
|
||||
|
||||
适用场景和普通的动态表单一样。但该表单操作方便，与系统界面风格匹配度高，缺点是排版没有普通的动态表单灵活，只能做简单的行排列。详细请参考：[可拖拽表单](/pro/dragform.html)
|
||||
|
||||
11
docs/pro/structure.md
Normal file
11
docs/pro/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>`里面。
|
||||
Reference in New Issue
Block a user