add 添加dialog配置手册

2022-08-11 11:39:45 +08:00 · 2022-08-11 11:39:45 +08:00 · 0ddba21e1c
commit 0ddba21e1c
parent 535cb490b1
1 changed files with 154 additions and 0 deletions
--- a/AddOrUpdateConfig.md
+++ b/AddOrUpdateConfig.md
@ -0,0 +1,154 @@
+# 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 组件）