From 5b2de3fb27f1e278b2d3833a9f83bea6bbd5c5ac Mon Sep 17 00:00:00 2001
From: g7hoo <liubin_9396@163.com>
Date: Sat, 8 Oct 2022 09:39:47 +0800
Subject: [PATCH] =?UTF-8?q?update=20AddOrUpdateConfig=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AddOrUpdateConfig.md | 94 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 86 insertions(+), 8 deletions(-)

diff --git a/AddOrUpdateConfig.md b/AddOrUpdateConfig.md
index ff0a2f8..8ad61ab 100644
--- a/AddOrUpdateConfig.md
+++ b/AddOrUpdateConfig.md
@@ -2,6 +2,82 @@
 
 > 通过传入合理的配置项来使用 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
@@ -79,7 +155,7 @@ const addOrUpdateConfigs = {
 }
 ```
 
-## 配置项
+## 配置项解释
 
 <br>
 
@@ -136,6 +212,7 @@ const addOrUpdateConfigs = {
 含义：有些对话框里需要额外的表格来展示更深层次的数据，如“产品属性”
 类型：object
 选项：
+
 - title, 内嵌表格的标题
 - url, 内嵌表格的数据地址
 - tableConfigs，内嵌表格的配置选项
@@ -154,13 +231,14 @@ const addOrUpdateConfigs = {
       - 值：`edit` | `delete` | `detail`，需要其他可自行添加（修改 base-table 组件）
 
 ### extraComponents
+
 含义: 需要在对话框里使用的自定义组件列表
 类型: Array<object>
 对象选项：
- - name: 该组件对应的 dataForm 字段（需要参照后端文档来指定）
- - hasModel: boolean, 上传组件一般设置为 false，设置是否和 dataForm 关联
- - label
- - fieldType: 设置该组件的数据将以什么数据类型形式来保存
- - component: 组件
- - props 传给组件的配置
- 
\ No newline at end of file
+
+- name: 该组件对应的 dataForm 字段（需要参照后端文档来指定）
+- hasModel: boolean, 上传组件一般设置为 false，设置是否和 dataForm 关联
+- label
+- fieldType: 设置该组件的数据将以什么数据类型形式来保存
+- component: 组件
+- props 传给组件的配置