feat(subform): add check

Liberty-liu · Sep 6, 2023 · 49f706f · 49f706f
1 parent c1b340c
commit 49f706f
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 35 deletions.
diff --git a/packages/formEditor/components/Layout/SubformLayout.jsx b/packages/formEditor/components/Layout/SubformLayout.jsx
@@ -47,7 +47,10 @@ export default defineComponent({
                   props.data.list.map((node, index) =>
                     (
                       <div
-                        class={[ns.e('item')]}
+                        class={[
+                          ns.e('item'),
+                          !unref(isEditModel) && ns.e('edit')
+                        ]}
                       >
                         <div
                           class={[ns.e('button')]}>
@@ -74,13 +77,17 @@ export default defineComponent({
                       </div>
                     ))
                 }
-                <el-button
-                  link
-                  type="primary"
-                  onClick={handleAdd}
+                <div
+                  class={[ns.e('addButton')]}
                 >
-                  Add new
-                </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    onClick={!unref(isEditModel) && handleAdd}
+                  >
+                    Add new
+                  </el-button>
+                </div>
               </div>
             </el-form-item>
           </div>

diff --git a/packages/formEditor/components/Panels/Config/components/DataComponent2.jsx b/packages/formEditor/components/Panels/Config/components/DataComponent2.jsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, resolveComponent, unref, ref, watch, reactive, defineExpose, nextTick } from 'vue'
+import { computed, defineComponent, resolveComponent, unref, ref, watch, reactive, defineExpose, nextTick, h } from 'vue'
 import utils from '@ER/utils'
 import hooks from '@ER/hooks'
 import Icon from '@ER/icon'
@@ -158,7 +158,23 @@ export default defineComponent({
           {this.shows[index] && (
             <div class={[ns.e('control')]}>
               <el-button
-                icon={'CirclePlus'}
+                icon={h('svg', {
+                  viewBox: '0 0 1024 1024',
+                  xmlns: 'http://www.w3.org/2000/svg'
+                },
+                h('path', {
+                  fill: 'currentColor',
+                  d: 'M352 480h320a32 32 0 1 1 0 64H352a32 32 0 0 1 0-64z'
+                }),
+                h('path', {
+                  fill: 'currentColor',
+                  d: 'M480 672V352a32 32 0 1 1 64 0v320a32 32 0 0 1-64 0z'
+                }),
+                h('path', {
+                  fill: 'currentColor',
+                  d: 'M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z'
+                })
+                )}
                 onClick={() => handleAction(1, index, items)}
                 text>
                 {t('er.config.dataComponent2.add')}

diff --git a/packages/hooks/use-props/index.js b/packages/hooks/use-props/index.js
@@ -5,6 +5,17 @@ import _ from 'lodash-es'
 import Region from '@ER/region/Region'
 import { areaList } from '@vant/area-data'
 import { useI18n } from '../use-i18n'
+const findPosition = (node, parent) => {
+  for (let y = 0; y < parent.list.length; y++) {
+    const row = parent.list[y]
+    const x = row.indexOf(node)
+    if (x !== -1) {
+      return { x, y }
+    }
+  }
+
+  return { x: -1, y: -1 }
+}
 const addValidate = (result, node, isPc, t) => {
   const {
     options
@@ -17,17 +28,25 @@ const addValidate = (result, node, isPc, t) => {
       } else {
         const parent = e.context.parent
         let nodes = []
-        if (parent.columns) {
-          nodes = parent.columns
-          result += 'columns.'
-        } else if (parent.list) {
-          nodes = parent.list
-          result += 'list.'
-        } else if (parent.rows) {
-          nodes = parent.rows
-          result += 'rows.'
+        if (parent.type === 'subform') {
+          const {
+            x,
+            y
+          } = findPosition(e, parent)
+          result += `list.${y}.${x}`
+        } else {
+          if (parent.columns) {
+            nodes = parent.columns
+            result += 'columns.'
+          } else if (parent.list) {
+            nodes = parent.list
+            result += 'list.'
+          } else if (parent.rows) {
+            nodes = parent.rows
+            result += 'rows.'
+          }
+          result += nodes.indexOf(e)
         }
-        result += nodes.indexOf(e)
       }
       return result
     }).join('.') + '.options.defaultValue'

diff --git a/packages/theme/formEditor/SubformLayout.scss b/packages/theme/formEditor/SubformLayout.scss
@@ -4,17 +4,6 @@
   }
   @include e(item) {
     position: relative;
-    &:hover {
-      background: #F9F9F9;
-      .#{$namespace}-SubformLayout__button {
-        button:first-child {
-          display: none;
-        }
-        button:last-child {
-          display: inline-flex;
-        }
-      }
-    }
     [data-layout-type="subform"] {
       padding-left: 50px;
     }
@@ -44,10 +33,26 @@
       }
     }
   }
-  .#{$namespace}-InlineLayout {
-    //&:hover {
-    //  background: #F9F9F9;
+  @include e(edit) {
+    &:hover {
+      background: #F9F9F9;
+      .#{$namespace}-SubformLayout__button {
+        button:first-child {
+          display: none;
+        }
+        button:last-child {
+          display: inline-flex;
+        }
+      }
+    }
+  }
+  @include e(addButton) {
+    padding-top: 20px;
+    //width: 100%;
+    //button {
+    //  //border: 1px dashed #409EFF;
+    //  width: 100%;
+    //  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
     //}
-    //background: #000;
   }
 }
diff --git a/packages/utils/field.js b/packages/utils/field.js
@@ -3,7 +3,7 @@ import { nanoid } from './nanoid'
 const fieldsRe = /^(input|textarea|number|radio|checkbox|select|time|date|rate|switch|slider|html|cascader|uploadfile|signature|region|subform)$/
 const deepTraversal = (node, fn) => {
   fn(node)
-  const nodes = node.list || node.rows || node.columns || node.children || []
+  const nodes = node.type === 'subform' ? node.list[0] : (node.list || node.rows || node.columns || node.children || [])
   nodes.forEach(e => {
     deepTraversal(e, fn)
   })