|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- # Add Or Update Dialog Configs
-
- > 通过传入合理的配置项来使用 addOrUpdate Dialog
-
- ## 示例
-
- ```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 组件)
|