From 4e00feddb0b3d1f9bf4e0aa2b7b1d77d2221983c Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Mon, 8 Jul 2024 20:44:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=98=8E=E7=BB=86?=
 =?UTF-8?q?=E8=A1=A8=E5=88=A0=E9=99=A4=E8=A1=8C=E6=97=B6=EF=BC=8C=E4=BC=9A?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E7=AC=AC=E4=B8=80=E9=A1=B5=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/表单二开/6_只改JS不改模版的二开.md       | 31 +++++++++++++++++++
 .../Form/src/components/SubFormV2.vue         | 11 ++++---
 2 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 docs/表单二开/6_只改JS不改模版的二开.md

diff --git a/docs/表单二开/6_只改JS不改模版的二开.md b/docs/表单二开/6_只改JS不改模版的二开.md
new file mode 100644
index 0000000..4f9cfe7
--- /dev/null
+++ b/docs/表单二开/6_只改JS不改模版的二开.md
@@ -0,0 +1,31 @@
+# 如何在二开中只修改脚本不修改模版
+
+可以在继承SimpleFormSetup时，不指定模版
+
+```vue
+<script>
+    // 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本
+    import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
+
+    export default {
+        mixins: [SimpleFormSetup],
+        setup(props, ctx) {
+            const ret = SimpleFormSetup.setup(props, ctx);
+
+            return {
+                ...ret
+            };
+        },
+        watch: {
+            formModel: {
+                handler: function(oldVal, newVal){
+                    console.log('表单被改了！' + Math.random());
+                    this.formModel.zheDie17153 = this.formModel.zhaGe15916 + this.formModel.zhaGe22645
+                },
+                deep: true
+            }
+        }
+    };
+</script>
+```
+这里可以通过对formModel的监控和修改完成计算、赋值操作。
diff --git a/src/components/Form/src/components/SubFormV2.vue b/src/components/Form/src/components/SubFormV2.vue
index 7ffc6d9..9b826d3 100644
--- a/src/components/Form/src/components/SubFormV2.vue
+++ b/src/components/Form/src/components/SubFormV2.vue
@@ -1,6 +1,5 @@
 <template>
     <div>
-
         <a-table :bordered="showFormBorder" :columns="headColums.length > 0 ? headColums : columns" :data-source="addDataKey(data)" :pagination="showPagination ? { defaultPageSize: 10 } : false" :scroll="{ x: 'max-content' }">
             <template #summary>
                 <a-table-summary-row v-if="columns.some((x) => x.componentProps?.subTotal)">
@@ -54,11 +53,11 @@
                         <template v-else-if="column.key !== 'index'">
                             <component
                                 :is="componentMap.get(column.componentType)"
+                                :key="column.dataIndex + record['_key_']"
                                 v-model:value="record[column.dataIndex]"
                                 :bordered="showComponentBorder"
                                 :index="index"
                                 :mainKey="mainKey"
-                                :key="column.dataIndex + record['_key_']"
                                 :row="record"
                                 v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
                                 @blur="onFieldBlur(column, record, index)"
@@ -68,7 +67,7 @@
                     </FormItem>
                 </template>
                 <template v-if="column.key === 'action' && !disabled">
-                    <MinusCircleOutlined style="padding-bottom: 20px" @click="remove(index)" />
+                    <MinusCircleOutlined style="padding-bottom: 20px" @click="remove(record)" />
                 </template>
             </template>
         </a-table>
@@ -113,6 +112,7 @@
     import { getDicDetailList } from '/@/api/system/dic';
     import { useI18n } from '/@/hooks/web/useI18n';
     import { MutipleHeadInfo } from '/@/components/Designer';
+    import { buildUUID } from '/@/utils/uuid';
 
     const { t } = useI18n();
     // 用于包裹弹窗的form组件 因为一个FormItem 只能收集一个表单组件  所以弹窗的form 必须排除
@@ -237,7 +237,7 @@
     function addDataKey(rows) {
         rows.forEach((row) => {
             if (!row['_key_']) {
-                row['_key_'] = Math.random();
+                row['_key_'] = buildUUID();
             }
         });
         return rows;
@@ -375,7 +375,8 @@
         }
     };
 
-    const remove = (index) => {
+    const remove = (record) => {
+        const index = data.value.findIndex((r) => r._key_ === record._key_);
         data.value.splice(index, 1);
         emit('change', unref(data));
         emit('update:value', unref(data));