通过传入合理的配置项来使用 addOrUpdate Dialog
通过给对话框传递配置项,并自动根据这些配置项来初始化对话框的功能
<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[]
}
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')
}
]
}
类型: string 值:dialog | drawer | page 含义:对话框、抽屉、新页面
类型:string
含义:详情的接口,如 /monitoring/product
含义:设置新增、编辑时的字段
类型:Array<string | object>
<input>
含义:设置对话框等组件里,需要哪些按钮
类型:Array<object>
属性:
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 }
],
含义:有些对话框里需要额外的表格来展示更深层次的数据,如“产品属性” 类型:object 选项:
Array<object>
edit
| delete
| detail
,需要其他可自行添加(修改 base-table 组件)含义: 需要在对话框里使用的自定义组件列表 类型: Array