From dcc331236e2cdb58d2ce4683cfccbbb460b5c19f Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Wed, 12 Jun 2024 17:48:44 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BF=AE=E6=AD=A3=E4=BA=8C=E5=BC=80?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=85=B3=E4=BA=8E=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=E7=9A=84=E9=83=A8=E5=88=86=EF=BC=8C=E8=A1=A5?=
 =?UTF-8?q?=E5=85=85onchange=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/dev_readme.md                | 100 +++++++-----------------------
 docs/表单二开/5_自定义表单字段.md |  66 ++++++++++++++++++++
 2 files changed, 88 insertions(+), 78 deletions(-)
 create mode 100644 docs/表单二开/5_自定义表单字段.md

diff --git a/docs/dev_readme.md b/docs/dev_readme.md
index 0ecb24e..20f28d8 100644
--- a/docs/dev_readme.md
+++ b/docs/dev_readme.md
@@ -20,7 +20,23 @@
 
 两种方法表单设计器支持内容一致，也都支持流程，差别只是UI方面。建议在设计业务模块优先使用代码模版。
 
-## 在Tab页中打开表单/流程
+### 如何定义onChange/blur事件
+
+所有的事件都在字段的events中，如change、blur，没有on，主表单的函数定义为
+```javascript
+function change(schema, formModel, formApi, { formData }) {
+    
+}
+```
+明细表的函数参数定义为
+```javascript
+function change({ column, row, rowIndex, formModel }) {
+    
+}
+```
+这两个定义的formModel都可以取到全部表单的值，也可以赋值做修改。
+
+### 如何在Tab页中打开表单/流程
 如果你需要自己编程实现Tab页跳转，或者升级旧版框架的页面，可以参考下面步骤：
 ```typescript
 const { currentRoute } = useRouter();
@@ -82,7 +98,7 @@ onMounted(async () => {
     emits('form-mounted', formProps); // 补上这一句
 });
 ```
-## 如何修改选项卡标题
+### 如何修改选项卡标题
 ```javascript
 import { useMultipleTabStore } from '/@/store/modules/multipleTab';
 import { useRouter } from 'vue-router';
@@ -97,7 +113,7 @@ tabStore.changeTitle(fullPath, `选项卡标题`);
 tabStore.closeTab(currentRoute, router);
 ```
 
-## 如何在表单二开中自定义布局
+### 如何在表单二开中自定义布局
 ```vue
 <Col v-if="getIfShow2('d7fxx515')" v-show="getIsShow2('d7f2xx515')" :span="getColWidth(schemaMap['d7fxx515'])">
 </Col>
@@ -109,7 +125,7 @@ tabStore.closeTab(currentRoute, router);
 <div style="width: 100%"></div>
 ```
 
-## 如何添加自定义校验
+### 如何添加自定义校验
 可以在config.ts中定义，componentProps里默认有空的rules数组，可以自己添加，antd vue所有支持的校验都可以在这里使用。
 ```javascript
 {
@@ -122,84 +138,12 @@ tabStore.closeTab(currentRoute, router);
     ]
 }
 ```
-## 如何设置字段联动
+### 如何设置数据源字段联动
 编辑器中选择Api即可配置字段联动，只要在magic-api配置参数即可，参数值可以直接选择表单或者明细表字段。
 
 选择字典没有效果。
 
-## 如何在表单二开中定义字段
-下面的代码为一个支持多层加载的级联选择器，同时值和文字描述分开存储，不会在表单打开时加载数据：
-```vue
-<FormItem :labelCol="{ style: { width: '120px' } }" label="级联本体" name="jiLianBenTi7352">
-    <a-input v-model:value="formModel.jiLianBenTi7352" style="display: none"/>
-    <!-- 当一个formitem里有多个表单字段时，不需要取值的用form-item-rest包起来 -->
-    <a-form-item-rest>
-        <a-cascader v-model:value="cascadeValue" :load-data="onCascadeLoad" :options="cascadeData" placeholder="请选择" @change="onCascadeChange">
-            <a href="#">{{ formModel.jiLianWenZi5194 || '请选择' }}</a>
-        </a-cascader>
-    </a-form-item-rest>
-</FormItem>
-```
-这里特别注意下，因为cascade的值为数组，而数组在数据库是不能存储的，所以这里cascadeValue为数组值，a-input里存储的为逗号分开的id。
-
-特别注意，FormItem在本框架里获取值依靠form的validate方法，因此FormItem里必须有**antd vue的表单元素**，如果为纯手动开发的组件，建议用一个a-input储存表单值。
-
-脚本部分
-```vue
-<script>
-export default {
-    setup(props, ctx) {
-        const ret = SimpleFormSetup.setup(props, ctx);
-        const schemaMap = {};
-        const cascadeData = ref([]);
-        const cascadeValue = ref([]);
-        ret.getSchemas._value.forEach((schema) => {
-            schemaMap[schema.key] = schema;
-        });
-        return {
-            schemaMap,
-            cascadeData,
-            cascadeValue,
-            ...ret
-        };
-    },
-    mounted() {
-        this.getCascadeData();
-    },
-    methods: {
-        getCascadeData: function (parent = {}) {
-            defHttp
-                .get({
-                    url: '/system/dev-demo/cascade-data',
-                    params: {
-                        level: parent.level
-                    }
-                })
-                .then((data) => {
-                    if (!parent.level) {
-                        this.cascadeData = data;
-                    } else {
-                        parent.children = data;
-                    }
-                });
-        },
-
-        onCascadeChange: function (value, selectedOptions) {
-            // 将级联选择器的文字和值分别赋值到2个字段保存
-            this.formModel.jiLianWenZi5194 = selectedOptions.map((item) => item.label).join(' > ');
-            this.formModel.jiLianBenTi7352 = selectedOptions.map((item) => item.value).join(',');
-        },
-
-        onCascadeLoad: function (selectedOptions) {
-            const targetOption = selectedOptions[selectedOptions.length - 1];
-            this.getCascadeData(targetOption);
-        }
-    }
-};
-</script>
-```
-
-## 如何在新建流程时，从其他表单带数据过来
+### 如何在新建流程时，从其他表单带数据过来
 这里的例子是从列表创建单据，其余的场景可以参考此修改。
 
 首先在模版里加入新建单据的按钮：
diff --git a/docs/表单二开/5_自定义表单字段.md b/docs/表单二开/5_自定义表单字段.md
new file mode 100644
index 0000000..0652fc6
--- /dev/null
+++ b/docs/表单二开/5_自定义表单字段.md
@@ -0,0 +1,66 @@
+# 如何在表单二开中定义字段
+首先，需要按照文档**1_拆分表单**将表单拆开，分解成独立字段。
+
+下面的代码为一个支持多层加载的级联选择器，同时值和文字描述分开存储，不会在表单打开时加载数据：
+```vue
+<!-- 非SimpleFormItem的组件需要自己包一层FormItem才有标准表单样式 -->
+<FormItem :labelCol="{ style: { width: '120px' } }" label="级联本体" name="jiLianBenTi7352">
+    <!-- 实际存储值的是a-input，因为取值是校验方法的返回值，非antd表单组件无法取到值 -->
+    <a-input v-model:value="formModel.jiLianBenTi7352" style="display: none"/>
+    <!-- 当一个formitem里有多个表单字段时，不需要取值的用form-item-rest包起来 -->
+    <a-form-item-rest>
+        <a-cascader v-model:value="cascadeValue" :load-data="onCascadeLoad" :options="cascadeData" placeholder="请选择" @change="onCascadeChange">
+            <!-- 这里是选择器的触发链接，如果已经有选择值了，就显示中文结果 -->
+            <!-- 就算是没有加载选项部分，因为文字部分已经存库了，已选内容也不为空 -->
+            <a href="#">{{ formModel.jiLianWenZi5194 || '请选择' }}</a>
+        </a-cascader>
+    </a-form-item-rest>
+</FormItem>
+```
+这里特别注意下，因为cascade的值为数组，而数组在数据库是不能存储的，所以这里cascadeValue为数组值，a-input里存储的为逗号分开的id。
+
+特别注意，FormItem在本框架里获取值依靠form的validate方法，因此FormItem里必须有**antd vue的表单元素**，如果为纯手动开发的组件，建议用一个a-input储存表单值。
+
+脚本部分
+```vue
+<script>
+export default {
+    setup(props, ctx) {
+        // 参考表单拆分，这里省略
+    },
+    mounted() {
+        this.getCascadeData();
+    },
+    methods: {
+        getCascadeData: function (parent = {}) {
+            defHttp
+                .get({
+                    url: '/system/dev-demo/cascade-data',
+                    params: {
+                        level: parent.level
+                    }
+                })
+                .then((data) => {
+                    if (!parent.level) {
+                        this.cascadeData = data;
+                    } else {
+                        parent.children = data;
+                    }
+                });
+        },
+
+        onCascadeChange: function (value, selectedOptions) {
+            // 将级联选择器的文字和值分别赋值到2个字段保存
+            this.formModel.jiLianWenZi5194 = selectedOptions.map((item) => item.label).join(' > ');
+            this.formModel.jiLianBenTi7352 = selectedOptions.map((item) => item.value).join(',');
+        },
+
+        onCascadeLoad: function (selectedOptions) {
+            // 具体参考官方文档，级联选择器的返回值为一组数组，所以要取最后一级的值，以加载下一层选项
+            const targetOption = selectedOptions[selectedOptions.length - 1];
+            this.getCascadeData(targetOption);
+        }
+    }
+};
+</script>
+```