Skip to content

Commit

Permalink
feat: 优化文档，修复上传问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@JackySoft
JackySoft committed Aug 15, 2023
1 parent a93c722 commit 44fc87e
Show file tree
Hide file tree
Showing 13 changed files with 179 additions and 1,061 deletions.
84 changes: 39 additions & 45 deletions docs/FormType.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,29 +26,38 @@
19. `type='label'`文本组件
20. `type='tips'`tips 组件
21. `type='table'` 支持表单中内嵌表格组件
22. `type='slot'` 如果想自定义，可以使用 slot 来自定义组件。

### 自定义参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :----- | :----------------- | :-------------------------- | :------- | :----: |
| type | 支持大部分组件 | String | 参考上文 | 无 |
| label | 表单文本 | String | 无 | 无 |
| model | 需要渲染的 v-model | String | 无 | 无 |
| tips | 提示语 | String | 无 | 无 |
| change | 自定义事件 | fn(val,values,model,config) | 无 | 无 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :----------- | :----------------------- | :-------------------------- | :------- | :----: |
| type | 支持大部分组件 | String | 参考上文 | 无 |
| label | 表单文本 | String | 无 | 无 |
| model | 需要渲染的 v-model | String | 无 | 无 |
| tips | 提示语 | String | 无 | 无 |
| change | 自定义事件 | fn(val,values,model,config) | 无 | 无 |
| show | 是否显示此字段 | fn(values) | 无 | 无 |
| fetchOptions | 下拉框独有，可以拉取接口 | fn() | 无 | 无 |

> 每个表单都支持 change 事件，用来处理自定义业务。
> 每个表单都支持 show 方法，用来处理显隐功能。当前只支持在 rocket-form 中做显隐。
## Input 组件

:::demo

```html
<search-form inline="flex" :json="form" :model.sync="queryForm" />
<search-form :json="form" :model.sync="queryForm" />

<script>
export default {
data() {
return {
queryForm: {},
queryForm: {
status: 1,
type: 1,
},
form: [
{
type: 'text',
Expand All @@ -62,8 +71,8 @@
* model 当前表单对象
*/
change(val, values, model) {
// 重置query_field、修改其它表单值等，不过对于查询表单而言，我们有专门的重置按钮
values.query_field = 0;
// 修改其它表单项值
values.type = 0;
},
},
],
Expand All @@ -75,22 +84,21 @@

:::

> input 组件配置废除 prepend，可通过独立的 select 配置来增加下拉选项
> prepend 只支持 字符串，不支持配置组件。
## Select 组件

:::demo

```html
<search-form inline="flex" :json="form" :model.sync="queryForm" />
<search-form :json="form" :model.sync="queryForm" />

<script>
export default {
data() {
return {
queryForm: {
userStatus: [1, 2],
userName: 'tom',
},
form: [
{
Expand All @@ -101,6 +109,7 @@
filterable: true, //支持输入过滤
clearable: true,
change: this.getSelectList, // 自定义事件，回调接口
// 字段映射，用来处理接口返回字段，避免前端去循环处理一次。
field: {
label: 'name',
value: 'id',
Expand All @@ -112,12 +121,6 @@
{ name: '新用户', id: 3 },
],
},
{
type: 'text',
model: 'userName',
label: '用户名',
placeholder: '请输入用户名',
},
],
};
},
Expand All @@ -143,7 +146,7 @@
:::demo

```html
<search-form inline="flex" :json.sync="form" :model.sync="queryForm" />
<search-form :json.sync="form" :model.sync="queryForm" />

<script>
export default {
Expand All @@ -157,11 +160,14 @@
type: 'select',
model: 'userStatus',
label: '用户状态',
filterable: true,
// 字段映射
field: {
label: 'name',
value: 'id',
},
options: [],
// 如果下拉是动态的，可以使用此方式直接获取
fetchOptions: async () => {
return [
{
Expand All @@ -178,23 +184,6 @@
],
};
},
mounted() {
setTimeout(() => {
this.getList();
});
},
methods: {
getList() {
// 此处可调用接口、修改form对象等
this.form[0].options.push({
name: '测试',
id: Math.floor(Math.random() * 100),
});
// 或者
this.form.$userStatus.options.push({ name: 'hello', id: 3 });
},
},
};
</script>
```
Expand Down Expand Up @@ -230,8 +219,9 @@
label: '日期范围',
// 对于日期范围控件来说，一般接口需要拆分为两个字段，通过export可以很方便的实现字段拆分
export: ['startTime', 'endTime'],
// 日期换换为时间戳单位
valueFormat: 'timestamp',
// 日期转换为时间戳单位
valueFormat: 'timestamp', // 支持：yyyy-MM-dd HH:mm:ss
defaultTime: ['00:00:00', '23:59:59'], //可以设置默认时间，有时候非常有用。后端查询的时候，必须从0点开始才能查到数据。
},
{
type: 'datetime',
Expand Down Expand Up @@ -275,7 +265,7 @@
:::demo

```html
<search-form inline="flex" :json="form" :model.sync="queryForm" />
<search-form :json="form" :model.sync="queryForm" />

<script>
export default {
Expand Down Expand Up @@ -314,7 +304,7 @@
:::demo

```html
<search-form inline="flex" :json="form" :model.sync="queryForm" />
<search-form :json="form" :model.sync="queryForm" />

<script>
export default {
Expand Down Expand Up @@ -364,6 +354,7 @@
{ label: '在线', value: 1 },
{ label: '离线', value: 2 },
],
// 支持fetchOptions来动态获取
},
],
};
Expand All @@ -379,7 +370,7 @@
:::demo

```html
<search-form inline="flex" :json="form" :model.sync="queryForm" />
<search-form :json="form" :model.sync="queryForm" />

<script>
export default {
Expand Down Expand Up @@ -450,7 +441,7 @@ field
:::demo

```html
<search-form inline="flex" :json="form" :model.sync="queryForm" />
<search-form :json="form" :model.sync="queryForm" />
<script>
export default {
data() {
Expand Down Expand Up @@ -629,5 +620,8 @@ field
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :----- | :--------------------------------------- | :--- | :----- | :----: |
| change | 所有表单均暴露 change 事件，可做业务处理 | fn | 无 | 无 |
| show | 所有表单均暴露 show 事件，可做显示和隐藏 | fn | 无 | 无 |

> change 事件返回三个参数 fn(val,values,model,json)，分别为当前组件值、当前表单所有值、当前组件 model 和当前 json 配置.
> change 事件返回三个参数 fn(val,values,model,json)，分别为当前组件值、当前表单所有值、当前组件 model 和当前 json 配置
> show 函数主要用来处理显隐功能，返回 true，显示；返回 false，不显示；
85 changes: 46 additions & 39 deletions docs/RocketTable.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,29 +15,26 @@
9. 通过 v-bind="$attrs"和v-on="$listners"保留大部分原生属性和事件
10. 支持表格索引列、支持表格多选功能
11. 支持表格自定义列
12. 表格中的列表按钮，支持使用 permission 来控制显示和隐藏，permission 支持布尔、函数和对象等三种配置方式。

## 基本用法[支持复选、单元格点击、图片、formatter、badge]

:::demo

```html
<div class="search-box">
<search-form
:json="searchJson"
:model.sync="queryForm"
@handleQuery="getTableList"
/>
</div>
<search-form
:json="searchJson"
:model.sync="queryForm"
@handleQuery="getTableList"
/>
<!-- 列表区域 -->
<div class="table-box">
<rocket-table
:json.sync="tableJson"
@handleCellClick="handleCellClick"
@handleOperate="handleOperate"
@handleChange="getTableList"
@handleAction="handleAction"
/>
</div>
<rocket-table
:json.sync="tableJson"
@handleCellClick="handleCellClick"
@handleOperate="handleOperate"
@handleChange="getTableList"
@handleAction="handleAction"
/>
<script>
export default {
data() {
Expand Down Expand Up @@ -149,7 +146,10 @@
},
{
text: '编辑',
permission: true,
// 支持函数的形式判断是否显示
permission: (row) => {
return row.status == 1;
},
},
{
text: '删除',
Expand Down Expand Up @@ -207,7 +207,8 @@
}
},
// action为点击的按钮索引，row为当前行的数据
handleAction({ index, row }) {
handleAction({ index, text, row }) {
// 也可以根据text的按钮文本来判断，因为索引不太可靠，有时候，删除一个按钮以后，索引会发生变化。
if (index === 0) {
this.$message.success('你选择了第一个按钮');
} else if (index === 1) {
Expand Down Expand Up @@ -773,6 +774,8 @@

:::

> permission 用来控制操作按钮或者列表中的按钮的显示和隐藏，也可以直接使用函数来处理更加方便。
## RocketTable - json 参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
Expand All @@ -787,25 +790,29 @@

## RocketTable - json - columns 对象

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :------------------ | :----------------------------- | :------ | :-------------------- | :--------: |
| prop | 列属性 | String | 无 | 无 |
| label | 列头 | String | 无 | 无 |
| width | 设置列宽度 | Number | 无 | 无 |
| type | 列特殊类型显示 | String | 参考 column-type | 无 |
| list | 显示操作列表 | Array | 参考 column-list | 无 |
| sortable | 是否排序 | Boolean | `true/false/custom` | 无 |
| sortOrders | 设置排序方式 | Array | 参考 Element | 无 |
| span | 多级表头 | Array | 参考示例 | 无 |
| empty | 当返回空的时候，设置默认显示值 | String | `--` | 无 |
| tips | 表头增加提示语 | String | `--` | 无 |
| formatter | 数据格式化，同官方 | String | `--` | 无 |
| filter | 过滤器，用来处理日期和金额 | String | 'money/date/datetime' | 无 |
| showOverflowTooltip | 当内容过长被隐藏时显示 tooltip | Boolean | true | flase/true |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :------------------ | :----------------------------- | :--------------- | :-------------------- | :--------: |
| prop | 列属性 | String | 无 | 无 |
| label | 列头 | String | 无 | 无 |
| width | 设置列宽度 | Number | 无 | 无 |
| type | 列特殊类型显示 | String | 参考 column-type | 无 |
| list | 显示操作列表 | Array | 参考 column-list | 无 |
| sortable | 是否排序 | Boolean | `true/false/custom` | 无 |
| sortOrders | 设置排序方式 | Array | 参考 Element | 无 |
| span | 多级表头 | Array | 参考示例 | 无 |
| empty | 当返回空的时候，设置默认显示值 | String | `--` | 无 |
| tips | 表头增加提示语 | String | `--` | 无 |
| formatter | 数据格式化，同官方 | String | `--` | 无 |
| filter | 过滤器，用来处理日期和金额 | String | 'money/date/datetime' | 无 |
| showOverflowTooltip | 当内容过长被隐藏时显示 tooltip | Boolean | true | flase/true |
| permissions | 控制按钮是否显示 | Boolean/Function | true | flase/true |

> showOverflowTooltip 官方默认为关闭，为了表格体验，统一开启，也可以手动关闭
> type=action 时，只有设置了 width 才会关闭 tool-tip，否则也会开启。
> permissions 对于有 RBAC 权限设置的系统，非常管用，配置如果觉得麻烦，可以使用函数定义，更加简单。
## pagination

> 默认只需要设置 total 即可，如果产品有要求，可手动调整
Expand Down Expand Up @@ -840,12 +847,12 @@

> 主要用于操作按钮列（新增、编辑、删除）
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :--------- | :----------- | :-------------- | :------------------------------------------- | :----: |
| text | 按钮文本 | String | 无 | 无 |
| permission | 是否可见 | Object | `true、false、{prop:'status',show:{1:true}}` | 无 |
| prop | 按钮映射字段 | `Object/String` | 参考上文 Demo | 无 |
| val | 根据值去映射 | Object | 参考上文 Demo | 无 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :--------- | :----------- | :---------------------- | :-------------------------------------------------------------------- | :----: |
| text | 按钮文本 | String | 无 | 无 |
| permission | 是否可见 | Boolean/Function/Object | `true、false、{prop:'status',show:{1:true}}、function(){return true}` | 无 |
| prop | 按钮映射字段 | `Object/String` | 参考上文 Demo | 无 |
| val | 根据值去映射 | Object | 参考上文 Demo | 无 |

## 事件

Expand Down
14 changes: 7 additions & 7 deletions docs/SearchForm.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,13 +112,13 @@

## json 参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :------ | :------------------------------- | :----------------------------------- | :------- | :----: |
| type | 控件类型 | String | 参考上文 | 无 |
| model | 绑定的动态属性，用于保存表单值 | String | 无 | 无 |
| options | 通用配置列表 | Array | 无 | 无 |
| change | 所有 UI 组件的自定义事件 | Function(val,values,model,config) | 无 | 无 |
| action | 按钮的行为，主要用来重置其它表单 | {type:'reset',model:'all'/['name'] } | | 无 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :----------- | :----------------------------- | :-------------------------------- | :------- | :----: |
| type | 控件类型 | String | 参考上文 | 无 |
| model | 绑定的动态属性，用于保存表单值 | String | 无 | 无 |
| options | 通用配置列表 | Array | 无 | 无 |
| change | 所有 UI 组件的自定义事件 | Function(val,values,model,config) | 无 | 无 |
| fetchOptions | 动态拉取下拉值 | Function | 无 | 无 |

> 表格列出来的为自定义参数，其它参数请参考原生 ElementUI
> 当 type='number'时，会生成 H5 原生数字框，鼠标悬浮时会出现数字上下滚动箭头，通过设置 arrow:false，可手动隐藏箭头
Expand Down
Loading

0 comments on commit 44fc87e

Please sign in to comment.