|
|
@@ -2,6 +2,82 @@ |
|
|
|
|
|
|
|
> 通过传入合理的配置项来使用 addOrUpdate Dialog |
|
|
|
|
|
|
|
## 用途 |
|
|
|
|
|
|
|
通过给对话框传递配置项,并自动根据这些配置项来初始化对话框的功能 |
|
|
|
|
|
|
|
## props |
|
|
|
|
|
|
|
- configs 对象 |
|
|
|
|
|
|
|
``` |
|
|
|
<my-dialog :configs="SomeConfigs" ... /> |
|
|
|
|
|
|
|
|
|
|
|
type Operation = { |
|
|
|
name: 'add' | 'edit' | 'detail' | 'delete' | ..., |
|
|
|
url: string, /** 该操作需要的接口地址,如删除接口 */ |
|
|
|
showAlways: boolean, |
|
|
|
showOnEdit: boolean, |
|
|
|
permission: string, |
|
|
|
} |
|
|
|
|
|
|
|
type SubTableConfig = { |
|
|
|
[_:string]: any, |
|
|
|
title: string, /** 表格的名称 */ |
|
|
|
url: string, /** 涉及的接口 */ |
|
|
|
tableConfigs: { |
|
|
|
[_:string]: any, |
|
|
|
type?: 'index' | ..., |
|
|
|
prop: string, |
|
|
|
name: string, |
|
|
|
rules?: any[], |
|
|
|
fixed?: string, |
|
|
|
width?: string, |
|
|
|
subcomponent: VueComponent, |
|
|
|
options: any[], |
|
|
|
formField: boolean, /** 是否在新增编辑子表单里出现该字段 */ |
|
|
|
}[], /** 表格prop配置数组,参考 components/base-table 组件和 element-ui 文档 */ |
|
|
|
} |
|
|
|
|
|
|
|
type ExtraComponent = { |
|
|
|
name: string, |
|
|
|
label: string, |
|
|
|
hasModel: boolean, /** 是否需要为该组件设置 v-model */ |
|
|
|
component: VueComponent, /** 动态加载的 vue 组件 */ |
|
|
|
props: { |
|
|
|
[_:string]: string | object |
|
|
|
extraParams?: { /** 上传组件使用 */ |
|
|
|
typeCode: string |
|
|
|
} |
|
|
|
}[] |
|
|
|
} |
|
|
|
|
|
|
|
type Field = { |
|
|
|
[_:string]: string | boolean | object | object[], |
|
|
|
name: string, |
|
|
|
type?: 'input' | 'select' | ..., |
|
|
|
options?: any[], /** 设置 type 为 select 时的选项数据 */ |
|
|
|
label?: string, /** 没有时会用 name 替代 */ |
|
|
|
placeholder?: string, /** 没有时会生成默认占位符 */ |
|
|
|
api?: string, /** 如果有该字段,就自动从api地址获取数据并填充到对应的输入框里,一般为 getCode 的接口 */ |
|
|
|
relatedField?: string, /** 关联字段,当设置此字段时,意味着需要在对话框组件上监听 select-change 事件,并当该字段数据被改变时刷新 relatedField 的列表,一般是像选择产线时更新工段列表这样的场景使用 */, |
|
|
|
required?: boolean, /** 验证规则的简写,只需要限制必填项时,不需要其他验证规则时使用 */ |
|
|
|
rules?: object[], /** 规则设置参考 element-ui 的表单验证配置 */ |
|
|
|
} |
|
|
|
|
|
|
|
type Configs = { |
|
|
|
type: 'dialog', |
|
|
|
infoUrl: string, /** 编辑时获取信息的接口地址 */ |
|
|
|
fields: Field[], |
|
|
|
extraComponents?: ExtraComponent[], |
|
|
|
subtable?: SubTableConfig[], |
|
|
|
operations?: Operation[] |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
``` |
|
|
|
|
|
|
|
## 示例 |
|
|
|
|
|
|
|
```js |
|
|
@@ -79,7 +155,7 @@ const addOrUpdateConfigs = { |
|
|
|
} |
|
|
|
``` |
|
|
|
|
|
|
|
## 配置项 |
|
|
|
## 配置项解释 |
|
|
|
|
|
|
|
<br> |
|
|
|
|
|
|
@@ -136,6 +212,7 @@ const addOrUpdateConfigs = { |
|
|
|
含义:有些对话框里需要额外的表格来展示更深层次的数据,如“产品属性” |
|
|
|
类型:object |
|
|
|
选项: |
|
|
|
|
|
|
|
- title, 内嵌表格的标题 |
|
|
|
- url, 内嵌表格的数据地址 |
|
|
|
- tableConfigs,内嵌表格的配置选项 |
|
|
@@ -154,13 +231,14 @@ const addOrUpdateConfigs = { |
|
|
|
- 值:`edit` | `delete` | `detail`,需要其他可自行添加(修改 base-table 组件) |
|
|
|
|
|
|
|
### extraComponents |
|
|
|
|
|
|
|
含义: 需要在对话框里使用的自定义组件列表 |
|
|
|
类型: Array<object> |
|
|
|
对象选项: |
|
|
|
- name: 该组件对应的 dataForm 字段(需要参照后端文档来指定) |
|
|
|
- hasModel: boolean, 上传组件一般设置为 false,设置是否和 dataForm 关联 |
|
|
|
- label |
|
|
|
- fieldType: 设置该组件的数据将以什么数据类型形式来保存 |
|
|
|
- component: 组件 |
|
|
|
- props 传给组件的配置 |
|
|
|
|
|
|
|
|
|
|
|
- name: 该组件对应的 dataForm 字段(需要参照后端文档来指定) |
|
|
|
- hasModel: boolean, 上传组件一般设置为 false,设置是否和 dataForm 关联 |
|
|
|
- label |
|
|
|
- fieldType: 设置该组件的数据将以什么数据类型形式来保存 |
|
|
|
- component: 组件 |
|
|
|
- props 传给组件的配置 |