mirror of
https://gitee.com/dotnetchina/OpenAuth.Net.git
synced 2025-09-18 17:48:01 +08:00
docs: 优化组件文档
This commit is contained in:
yubaolee
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: yubaolee <yubaolee@163.com> | 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',
|
||||
{
|
||||
|
||||
51
newdocs/docs/notes/pro/authform.md
Normal file
51
newdocs/docs/notes/pro/authform.md
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: 其他组件
|
||||
createTime: 2025/04/23 23:43:26
|
||||
permalink: /pro/authform/
|
||||
---
|
||||
|
||||
OpenAuth.Pro封装了一些组件，方便开发使用，组件全部在`src\components`中定义。目前提供的三大核心组件关系如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## 表单组件 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', ''),
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
|
||||
145
newdocs/docs/notes/pro/authselect.md
Normal file
145
newdocs/docs/notes/pro/authselect.md
Normal file
@@ -0,0 +1,145 @@
|
||||
---
|
||||
title: 通用下拉组件
|
||||
createTime: 2025/05/12 10:24:28
|
||||
permalink: /pro/authselect/
|
||||
---
|
||||
|
||||
通用下拉选择`AuthSelect`用于渲染和编辑字典结构和动态列表返回key-valuel格式的数据。该组件与其他组件的关系如下：
|
||||
|
||||
|
||||
## 基本用法
|
||||
|
||||
下拉选择组件目前支持`静态字典数据`和`动态接口数据`两种模式。
|
||||
|
||||
### 字典数据模式
|
||||
静态字典。根据【字典分类】模块的`分类标识`关键字获取，如：
|
||||
```vue
|
||||
<auth-select
|
||||
:isEdit="true"
|
||||
@change="handleChange"
|
||||
:data-source="'SYS_STATUS'"
|
||||
v-model="value">
|
||||
</auth-select>
|
||||
```
|
||||
|
||||
### 动态接口模式
|
||||
动态列表。从指定Url获取value/label结构的数据进行渲染，如：
|
||||
```vue
|
||||
<auth-select
|
||||
:isEdit="true"
|
||||
@change="handleChange"
|
||||
:type="'dynamic'"
|
||||
:data-source="'/CategoryTypes/Load'"
|
||||
v-model="value">
|
||||
</auth-select>
|
||||
```
|
||||
|
||||
### 直接传入数组
|
||||
|
||||
```vue
|
||||
<auth-select
|
||||
:isEdit="true"
|
||||
@change="handleChange"
|
||||
:data-source="[{label: '选项1', value: '1'}, {label: '选项2', value: '2'}]"
|
||||
v-model="value">
|
||||
</auth-select>
|
||||
```
|
||||
|
||||
## 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
|
||||
<template>
|
||||
<auth-select
|
||||
:isEdit="isEdit"
|
||||
@change="onChange"
|
||||
:data-source="'SYS_STATUS'"
|
||||
v-model="status">
|
||||
</auth-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const isEdit = ref(true)
|
||||
const status = ref('')
|
||||
|
||||
const onChange = (val) => {
|
||||
console.log('选中值：', val)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 动态接口数据
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<auth-select
|
||||
:isEdit="isEdit"
|
||||
@change="onChange"
|
||||
:type="'dynamic'"
|
||||
:data-source="'/CategoryTypes/Load'"
|
||||
:search-key="searchParams"
|
||||
v-model="selectedValue">
|
||||
</auth-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
const isEdit = ref(true)
|
||||
const selectedValue = ref('')
|
||||
const searchParams = reactive({
|
||||
key: 'value',
|
||||
otherParam: 'test'
|
||||
})
|
||||
|
||||
const onChange = (val) => {
|
||||
console.log('选中值：', val)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 自定义字段名
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<auth-select
|
||||
:isEdit="isEdit"
|
||||
:type="'dynamic'"
|
||||
:data-source="'/api/users'"
|
||||
:default-props="{label: 'username', value: 'id'}"
|
||||
v-model="userId">
|
||||
</auth-select>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const isEdit = ref(true)
|
||||
const userId = ref('')
|
||||
</script>
|
||||
```
|
||||
@@ -4,9 +4,7 @@ createTime: 2025/05/07 20:24:28
|
||||
permalink: /pro/columnsetting/
|
||||
---
|
||||
|
||||
## 功能简介
|
||||
|
||||
`ColumnSetting` 是一个用于表格列显示与顺序自定义的弹窗组件，支持列的拖拽排序、显示/隐藏切换，并将用户设置持久化到本地存储。用于配合框架el-table及[通用表格组件](./table.md)的列设置。
|
||||
列设置组件`ColumnSetting` 是一个用于表格列显示与顺序自定义的弹窗组件，支持列的拖拽排序、显示/隐藏切换，并将用户设置持久化到本地存储。用于配合框架el-table及[通用表格组件](./table.md)的列设置。
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
---
|
||||
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-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', ''),
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -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 片段生成与复制、条件本地缓存等功能。
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -4,9 +4,7 @@ createTime: 2025/05/07 19:10:57
|
||||
permalink: /pro/table/
|
||||
---
|
||||
|
||||
## 组件简介
|
||||
|
||||
`AuthTable` 是一个通用表格组件，支持自定义列模板、单选/多选、可编辑、导出 Excel 等功能。
|
||||
通用表格组件`AuthTable` 是OpenAuth.Net框架的核心组件之一，支持自定义列模板、单选/多选、可编辑、导出 Excel 等功能。
|
||||
|
||||
## 使用示例
|
||||
|
||||
|
||||
Reference in New Issue
Block a user