From 5581f2bca9af16f480bb9dcb762c39eadf666304 Mon Sep 17 00:00:00 2001 From: yubaolee Date: Mon, 12 May 2025 14:36:01 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- newdocs/docs/.vuepress/notes.ts | 4 +- newdocs/docs/notes/pro/authform.md | 51 +++++++++ newdocs/docs/notes/pro/authselect.md | 145 ++++++++++++++++++++++++ newdocs/docs/notes/pro/columnsetting.md | 4 +- newdocs/docs/notes/pro/components.md | 82 -------------- newdocs/docs/notes/pro/querybuilder.md | 4 +- newdocs/docs/notes/pro/table.md | 4 +- 7 files changed, 201 insertions(+), 93 deletions(-) create mode 100644 newdocs/docs/notes/pro/authform.md create mode 100644 newdocs/docs/notes/pro/authselect.md delete mode 100644 newdocs/docs/notes/pro/components.md diff --git a/newdocs/docs/.vuepress/notes.ts b/newdocs/docs/.vuepress/notes.ts index 199445fe..07b372fe 100644 --- a/newdocs/docs/.vuepress/notes.ts +++ b/newdocs/docs/.vuepress/notes.ts @@ -1,7 +1,7 @@ /* * @Author: yubaolee | ahfu~ <954478625@qq.com> * @Date: 2025-04-23 20:26:48 - * @LastEditTime: 2025-05-07 20:49:08 + * @LastEditTime: 2025-05-12 14:00:21 * @Description: 笔记配置 * Copyright (c) 2025 by yubaolee | ahfu~ , All Rights Reserved. */ @@ -59,7 +59,7 @@ const proNote = defineNoteConfig({ { text: '内置组件', collapsed: false, - items: ['table','querybuilder','columnsetting','components'] + items: ['table','querybuilder','columnsetting','authselect','authform'] }, 'printerplan', { diff --git a/newdocs/docs/notes/pro/authform.md b/newdocs/docs/notes/pro/authform.md new file mode 100644 index 00000000..8267cd5f --- /dev/null +++ b/newdocs/docs/notes/pro/authform.md @@ -0,0 +1,51 @@ +--- +title: 其他组件 +createTime: 2025/04/23 23:43:26 +permalink: /pro/authform/ +--- + +OpenAuth.Pro封装了一些组件，方便开发使用，组件全部在`src\components`中定义。目前提供的三大核心组件关系如下： + +![20211230063538](http://img.openauth.net.cn/20211230063538.png) + + +## 表单组件 auth-form + +根据定义动态渲染表单项，减少表单的开发。用法如下: +```html + +``` + +当父组件需要使用表单里面的数据，进行提交操作时，参考以下代码： + +```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', ''), + ] +``` + + + diff --git a/newdocs/docs/notes/pro/authselect.md b/newdocs/docs/notes/pro/authselect.md new file mode 100644 index 00000000..508424b2 --- /dev/null +++ b/newdocs/docs/notes/pro/authselect.md @@ -0,0 +1,145 @@ +--- +title: 通用下拉组件 +createTime: 2025/05/12 10:24:28 +permalink: /pro/authselect/ +--- + +通用下拉选择`AuthSelect`用于渲染和编辑字典结构和动态列表返回key-valuel格式的数据。该组件与其他组件的关系如下： +![20211230063538](http://img.openauth.net.cn/20211230063538.png) + +## 基本用法 + +下拉选择组件目前支持`静态字典数据`和`动态接口数据`两种模式。 + +### 字典数据模式 +静态字典。根据【字典分类】模块的`分类标识`关键字获取，如： +```vue + + +``` + +### 动态接口模式 +动态列表。从指定Url获取value/label结构的数据进行渲染，如： +```vue + + +``` + +### 直接传入数组 + +```vue + + +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| type | 下拉框类型，`static`表示从数据字典加载，`dynamic`表示从接口获取 | String | `static` | +| dataSource | 数据源，当type=='dynamic'时，该值为一个Url地址，该地址返回一个id/name结构的数组。当type=='static'或空时，该值为【字典分类】模块的`分类标识` | String/Number/Array | - | +| value / v-model | 绑定值 | String/Number | `''` | +| isEdit | 是否为编辑状态，`false`时显示文本 | Boolean | `true` | +| disabled | 是否禁用 | Boolean | `false` | +| size | 输入框尺寸 | String | `default` | +| searchKey | 搜索参数，当`type`为`dynamic`时有效 | Object | `{}` | +| defaultProps | 自定义选项的值和标签字段。如果该值为空，则v-model需要传字段id/name的数组 | Object | `{label: 'label', value: 'value'}` | + +### Events + +| 事件名称 | 说明 | 回调参数 | +| --- | --- | --- | +| change | 选中值发生变化时触发 | 选中项的值 | +| update:value | 更新v-model值 | 选中项的值 | + +## 示例 + +### 基础用法 - 字典数据 + +```vue + + + +``` + +### 动态接口数据 + +```vue + + + +``` + +### 自定义字段名 + +```vue + + + +``` \ No newline at end of file diff --git a/newdocs/docs/notes/pro/columnsetting.md b/newdocs/docs/notes/pro/columnsetting.md index 7af9810f..27075aa7 100644 --- a/newdocs/docs/notes/pro/columnsetting.md +++ b/newdocs/docs/notes/pro/columnsetting.md @@ -4,9 +4,7 @@ createTime: 2025/05/07 20:24:28 permalink: /pro/columnsetting/ --- -## 功能简介 - -`ColumnSetting` 是一个用于表格列显示与顺序自定义的弹窗组件，支持列的拖拽排序、显示/隐藏切换，并将用户设置持久化到本地存储。用于配合框架el-table及[通用表格组件](./table.md)的列设置。 +列设置组件`ColumnSetting` 是一个用于表格列显示与顺序自定义的弹窗组件，支持列的拖拽排序、显示/隐藏切换，并将用户设置持久化到本地存储。用于配合框架el-table及[通用表格组件](./table.md)的列设置。 ![2025-05-07-20-24-28](http://img.openauth.net.cn/2025-05-07-20-24-28.png) diff --git a/newdocs/docs/notes/pro/components.md b/newdocs/docs/notes/pro/components.md deleted file mode 100644 index 3364295f..00000000 --- a/newdocs/docs/notes/pro/components.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 其他组件 -createTime: 2025/04/23 23:43:26 -permalink: /pro/components/ ---- - -OpenAuth.Pro封装了一些组件，方便开发使用，组件全部在`src\components`中定义。目前提供的三大核心组件关系如下： - -![20211230063538](http://img.openauth.net.cn/20211230063538.png) - -## 通用下拉选择 auth-select - -通用下拉选择`auth-select`组件是用于渲染和编辑字典结构和动态列表返回key-valuel数据的组件。用法如下： - -静态字典。根据【字典分类】模块的`分类标识`关键字获取，如： -```html - -``` -动态列表。从指定Url获取value/label结构的数据进行渲染，如： -```html - -``` - -该组件有以下几个参数： - -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-form - -根据定义动态渲染表单项，减少表单的开发。用法如下: -```html - -``` - -当父组件需要使用表单里面的数据，进行提交操作时，参考以下代码： - -```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', ''), - ] -``` - - - diff --git a/newdocs/docs/notes/pro/querybuilder.md b/newdocs/docs/notes/pro/querybuilder.md index e5ab62a4..4f7f89fe 100644 --- a/newdocs/docs/notes/pro/querybuilder.md +++ b/newdocs/docs/notes/pro/querybuilder.md @@ -4,9 +4,7 @@ createTime: 2025/05/07 19:10:57 permalink: /pro/querybuilder/ --- -## 组件简介 - -自定义查询组件是一个可复用的高级查询条件构建器组件，支持通过配置 columns 自动生成 SQL 查询条件。用于配合框架el-table及[通用表格组件](./table.md)的复杂筛选的场景，支持条件的增删、类型自动识别、SQL 片段生成与复制、条件本地缓存等功能。 +自定义查询组件`QueryBuilder`是一个可复用的高级查询条件构建器组件，支持通过配置 columns 自动生成 SQL 查询条件。用于配合框架el-table及[通用表格组件](./table.md)的复杂筛选的场景，支持条件的增删、类型自动识别、SQL 片段生成与复制、条件本地缓存等功能。 ![2025-05-07-19-20-48](http://img.openauth.net.cn/2025-05-07-19-20-48.png) diff --git a/newdocs/docs/notes/pro/table.md b/newdocs/docs/notes/pro/table.md index 6253b979..3dbc8afc 100644 --- a/newdocs/docs/notes/pro/table.md +++ b/newdocs/docs/notes/pro/table.md @@ -4,9 +4,7 @@ createTime: 2025/05/07 19:10:57 permalink: /pro/table/ --- -## 组件简介 - -`AuthTable` 是一个通用表格组件，支持自定义列模板、单选/多选、可编辑、导出 Excel 等功能。 +通用表格组件`AuthTable` 是OpenAuth.Net框架的核心组件之一，支持自定义列模板、单选/多选、可编辑、导出 Excel 等功能。 ## 使用示例