forked from mt-fe-group/mt-yd-ui
245 lines
7.2 KiB
Markdown
245 lines
7.2 KiB
Markdown
# Add Or Update Dialog Configs
|
||
|
||
> 通过传入合理的配置项来使用 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
|
||
const addOrUpdateConfigs = {
|
||
type: 'dialog', // dialog | drawer | page
|
||
infoUrl: '/monitoring/product',
|
||
fields: [
|
||
'name',
|
||
{
|
||
name: 'code',
|
||
api: '/monitoring/product/getCode'
|
||
},
|
||
{
|
||
name: 'processTime',
|
||
label: '加工时间',
|
||
placeholder: '请输入加工时间',
|
||
type: 'number', // type: number(input+number) | default(input) | textarea | select(options在父组件里获取) | datetime
|
||
required: true,
|
||
rules: [
|
||
// 除了required之外的验证规则
|
||
{
|
||
type: 'number',
|
||
trigger: 'blur',
|
||
transform: val => Number(val),
|
||
message: '必须输入数字'
|
||
}
|
||
]
|
||
},
|
||
'remark',
|
||
'specifications',
|
||
{
|
||
name: 'typeDictValue',
|
||
rules: [{ required: true, trigger: 'blur' }],
|
||
label: '产品类型', // 对于非常见属性，最好自己指定label
|
||
type: 'select',
|
||
options: [
|
||
// 动态获取
|
||
]
|
||
},
|
||
{
|
||
name: 'unitDictValue',
|
||
label: '单位',
|
||
type: 'select',
|
||
placeholder: '请选择单位',
|
||
options: [
|
||
// 动态获取
|
||
]
|
||
}
|
||
],
|
||
operations: [
|
||
// { name: 'reset', url: true },
|
||
{ name: 'cancel', url: true, showAlways: true },
|
||
{ name: 'save', url: '/monitoring/product', permission: '', showOnEdit: false },
|
||
{ name: 'update', url: '/monitoring/product', permission: '', showOnEdit: true }
|
||
],
|
||
subtable: {
|
||
// for i18n
|
||
title: '动态属性',
|
||
url: '/monitoring/productArrt',
|
||
tableConfigs: [
|
||
{ type: 'index', name: '序号' },
|
||
{ prop: 'createTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
|
||
{ prop: 'name', name: '属性名', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
|
||
{ prop: 'code', name: '属性值', formField: true },
|
||
{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
|
||
]
|
||
},
|
||
extraComponents: [
|
||
{
|
||
name: 'CompName',
|
||
label: 'markdown编辑器',
|
||
component: () => import('xx.vue')
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 配置项解释
|
||
|
||
<br>
|
||
|
||
### type
|
||
|
||
类型: string
|
||
值：dialog | drawer | page
|
||
含义：对话框、抽屉、新页面
|
||
|
||
### infoUrl
|
||
|
||
类型：string
|
||
含义：详情的接口，如 `/monitoring/product`
|
||
|
||
### fields
|
||
|
||
含义：设置新增、编辑时的字段
|
||
类型：`Array<string | object>`
|
||
|
||
- 当类型为 string 时，默认渲染 `<input>`
|
||
- 当类型为 object 时，有如下选项：
|
||
- name: 字段名
|
||
- label: 字段的 label
|
||
- api: 如果设置了该属性，则该字段会自动从服务器获取值，一般为 code 字段需要
|
||
- placeholder
|
||
- type: 渲染何种类型的组件，默认值: 'input'
|
||
- options: 当上一条 type 值为 'select' 时，需要自行动态获取并加载 options 列表
|
||
- required: 是否是必须填写的字段（或可用过 rules 做更加具体的设定，设定方式参考 async-validator ）
|
||
- rules: 验证规则数组，如果只有"必填"的需求，可直接用上一条
|
||
|
||
### operations
|
||
|
||
含义：设置对话框等组件里，需要哪些按钮
|
||
类型：`Array<object>`
|
||
属性：
|
||
|
||
- name，按钮的类型，决定按钮的文字和颜色
|
||
- url，按钮操作的接口地址，不需要的可以给 null 或 true
|
||
- permission，该操作需要的权限，如 "sys:xxx:add" 形式
|
||
- showOnEdit: boolean，是否编辑页面展示，不设置则始终展示
|
||
示例:
|
||
|
||
```js
|
||
operations: [
|
||
{ name: 'reset', url: true },
|
||
{ name: 'cancel', url: true, showAlways: true },
|
||
{ name: 'save', url: '/monitoring/product', permission: '', showOnEdit: false },
|
||
{ name: 'update', url: '/monitoring/product', permission: '', showOnEdit: true }
|
||
],
|
||
```
|
||
|
||
### subtable
|
||
|
||
含义：有些对话框里需要额外的表格来展示更深层次的数据，如“产品属性”
|
||
类型：object
|
||
选项：
|
||
|
||
- title, 内嵌表格的标题
|
||
- url, 内嵌表格的数据地址
|
||
- tableConfigs，内嵌表格的配置选项
|
||
- 类型：`Array<object>`
|
||
- 配置：
|
||
- type: 同 element-ui 的 table 属性的 type
|
||
- fixed: 同 element-ui 的 table 属性的 fixed
|
||
- width: 同 element-ui 的 table 属性的 width
|
||
- name: 表头显示的内容
|
||
- filter: 一般用于转换时间
|
||
- prop: 字段
|
||
- formField: boolean, 是否用于表单的填写
|
||
- rules: 表单验证规则，详见：async-validator
|
||
- subcomponent: 同 base-table 的 subcomponent
|
||
- options: 表格操作列需要哪些操作
|
||
- 值：`edit` | `delete` | `detail`，需要其他可自行添加（修改 base-table 组件）
|
||
|
||
### extraComponents
|
||
|
||
含义: 需要在对话框里使用的自定义组件列表
|
||
类型: Array<object>
|
||
对象选项：
|
||
|
||
- name: 该组件对应的 dataForm 字段（需要参照后端文档来指定）
|
||
- hasModel: boolean, 上传组件一般设置为 false，设置是否和 dataForm 关联
|
||
- label
|
||
- fieldType: 设置该组件的数据将以什么数据类型形式来保存
|
||
- component: 组件
|
||
- props 传给组件的配置
|