|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- # 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 传给组件的配置
|