Feat/subform

examples/main.js

@@ -1,6 +1,5 @@
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import Vant, { Locale } from 'vant'
 import enUS from 'vant/es/locale/lang/en-US'
 // import '@vant/touch-emulator'
@@ -14,6 +13,3 @@ app.use(router)
 app.use(ElementPlus)
 app.use(Vant)
 app.mount('#app')
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}

examples/views/formEditor.vue

@@ -1,9 +1,27 @@
 <script setup>
-import { ref, onMounted, getCurrentInstance } from 'vue'
+import { ref, onMounted, getCurrentInstance, inject } from 'vue'
 import { erFormEditor } from '@ER/formEditor'
+const {
+  lang
+} = inject('globalConfig')
 const EReditorRef = ref(null)
+const handleListener = async ({ type, data }) => {
+  // console.log(data)
+  switch (type) {
+    case 'lang':
+      lang.value = data
+      localStorage.setItem('er-lang', data)
+      break
+  }
+}
+const checkFieldsForNewBadge = (field) => {
+  return field.type === 'subform'
+}
 </script>
 <template>
   <er-form-editor
+    :checkFieldsForNewBadge="checkFieldsForNewBadge"
+    :lang="lang"
+    @listener="handleListener"
     ref="EReditorRef"/>
 </template>

examples/views/formEditor/objEdit.vue

@@ -41,7 +41,6 @@ const getObjData = async () => {
   }
 }
 const handleListener = async ({ type, data }) => {
-  console.log(type)
   switch (type) {
     case 'lang':
       lang.value = data
@@ -53,6 +52,8 @@ const handleListener = async ({ type, data }) => {
       }
       loading.value = true
       try {
+        // console.log(data)
+        // data.fields[0].options.defaultValue = []
         const postData = {
           name: state.name,
           content: Object.assign({
@@ -89,13 +90,17 @@ const quickImages = ref([
   '/public/Everright-logo.svg',
   '/public/Everright-logo.svg'
 ])
+const checkFieldsForNewBadge = (field) => {
+  return field.type === 'subform'
+}
 </script>
 <template>
   <div
     v-loading="loading"
   >
     <er-form-editor
       :checkPropsBySelected="checkPropsBySelected"
+      :checkFieldsForNewBadge="checkFieldsForNewBadge"
       v-if="isRender"
       :quickImages="quickImages"
       :layoutType="layoutType"

examples/views/formEditorConfig.vue

@@ -41,6 +41,11 @@ watch(lang, (newLang) => {
         node.columns[0].rows[0].columns[0].label = `${node.columns[0].label} > ${node.columns[0].rows[0].columns[0].type}`
         store.layouts.push(node.columns[0].rows[0].columns[0])
         break
+      case 'subform':
+        node.columns[0].list[0].push(erGeneratorData(erComponentsConfig.fieldsConfig[1].list[0], true, 'en'))
+        // node.columns[0].rows[0].columns[0].label = `${node.columns[0].label} > ${node.columns[0].rows[0].columns[0].type}`
+        // store.layouts.push(node.columns[0].rows[0].columns[0])
+        break
     }
   })
   all.value = [...store.fields, ...store.layouts]

package.json

@@ -57,7 +57,7 @@
     "canvas": "^2.11.2",
     "dayjs": "^1.11.7",
     "element-plus": "^2.2.28",
-    "everright-filter": "^0.0.22",
+    "everright-filter": "^1.1.1",
     "jss": "^10.9.2",
     "jss-preset-default": "^10.9.2",
     "lodash-es": "^4.17.21",
@@ -79,7 +79,6 @@
     "@ckeditor/ckeditor5-vue": "^4.0.1",
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
-    "@element-plus/icons-vue": "^2.0.10",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
     "@vue/compiler-sfc": "^3.2.47",

packages/formEditor/components/FormTypes/Uploadfile/pc.vue

@@ -80,7 +80,9 @@ const handleError = (error) => {
     :before-upload="beforeAvatarUpload"
     :on-error="handleError"
   >
-    <el-icon><Plus /></el-icon>
+    <el-icon>
+      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"></path></svg>
+    </el-icon>
   </el-upload>
 
   <el-image-viewer

packages/formEditor/components/Layout/ControlInsertionPlugin.js

@@ -163,7 +163,7 @@ const setBorder = (el, className) => {
   el.classList.add(className)
 }
 const getDragElement = (node) => {
-  return node.__draggable_context.element
+  return node.__draggable_context?.element
 }
 
 const setStates = (newTarget, ev, ER) => {
@@ -313,14 +313,6 @@ function ControlInsertionPlugin (ER) {
   }
   ControlInsertion.prototype = {
     dragStart (e) {
-      // const {
-      //   rootEl,
-      //   target
-      // } = e
-      // const isBlock = _.get(e, 'sortable.options.dataSource', false) === 'block'
-      // if (isBlock) return false
-      // const targetContainer = rootEl.parentNode
-      // targetContainer.style.zIndex = 2
     },
     drop (e) {
       if (!prevEl || !e.activeSortable) {
@@ -344,7 +336,12 @@ function ControlInsertionPlugin (ER) {
         }
       }
       if (inserRowIndex !== '') {
-        const store = Array.isArray(prevSortable.options.parent) ? prevSortable.options.parent : prevSortable.options.parent.list
+        let store = []
+        if (prevSortable.options.parent.type === 'subform') {
+          store = prevSortable.options.parent.list[0]
+        } else {
+          store = Array.isArray(prevSortable.options.parent) ? prevSortable.options.parent : prevSortable.options.parent.list
+        }
         store.splice(inserRowIndex, 0, newElement)
         utils.addContext(store[inserRowIndex], prevSortable.options.parent)
       }
@@ -382,7 +379,7 @@ function ControlInsertionPlugin (ER) {
       const {
         activeSortable: {
           constructor: {
-            utils
+            utils: SortableUtils
           },
           options: {
             dataSource
@@ -413,15 +410,26 @@ function ControlInsertionPlugin (ER) {
       if (target.dataset.layoutType === 'grid') {
         return false
       }
+      const dragNode = getDragElement(dragEl)
+      const targetNode = getDragElement(target)
+      if ((!utils.checkIsField(dragNode) || dragNode.type === 'subform') && utils.checkIsInSubform(targetNode)) {
+        return false
+      }
+      if (target.dataset.layoutType === 'subform') {
+        // console.log(utils)
+        if (!utils.checkIsField(dragNode) || dragNode.type === 'subform') {
+          return false
+        }
+      }
       originalEvent.stopPropagation && originalEvent.stopPropagation()
       const direction = ''
       const targetContainer = el.parentNode
       const targetOnlyOne = targetList.length === 1
-      let newTarget = utils.closest(target, this.options.draggable, sortable.el)
+      let newTarget = SortableUtils.closest(target, this.options.draggable, sortable.el)
       if (dragEl.contains(newTarget)) {
         return false
       }
-      if (/^(grid-col|tabs-col|td|collapse-col|root|inline)$/.test(target.dataset.layoutType)) {
+      if (/^(grid-col|tabs-col|td|collapse-col|root|inline|subform)$/.test(target.dataset.layoutType)) {
         newTarget = target
         const state = (newTarget.__draggable_component__ || newTarget.children[0].__draggable_component__)
         if (!state.list.length) {
@@ -433,9 +441,6 @@ function ControlInsertionPlugin (ER) {
           if (/^(root|grid-col)$/.test(target.dataset.layoutType)) {
             const rows = el.children
             prevEl = lastChild(el)
-            // if (prevEl.contains(dragEl) && list.length === 1) {
-            // console.log(prevEl)
-            // console.log(dragEl)
             if (prevEl === dragEl.parentNode.parentNode && list.length === 1) {
               prevEl = ''
               return false

packages/formEditor/components/Layout/DragGable.jsx

@@ -21,6 +21,7 @@ import LayoutTabsLayout from './TabsLayout'
 import LayoutCollapseLayout from './CollapseLayout'
 import LayoutTableLayout from './TableLayout'
 import LayoutInlineLayout from './InlineLayout'
+import LayoutSubformLayout from './SubformLayout'
 import Selection from '@ER/formEditor/components/Selection/selectElement.jsx'
 import ControlInsertionPlugin from './ControlInsertionPlugin'
 const dragGableWrap = defineComponent({
@@ -143,6 +144,11 @@ export default defineComponent({
           case 'inline':
             node = (<LayoutInlineLayout key={element.id} data={element} parent={props.data}></LayoutInlineLayout>)
             break
+          case 'subform':
+            if (unref(isEditModel) || _.get(state.fieldsLogicState.get(element), 'visible', undefined) !== 0) {
+              node = (<LayoutSubformLayout key={element.id} data={element} parent={props.data}></LayoutSubformLayout>)
+            }
+            break
           default:
             let TypeComponent = ''
             if (unref(isEditModel) || _.get(state.fieldsLogicState.get(element), 'visible', undefined) !== 0) {

packages/formEditor/components/Layout/SubformLayout.jsx

@@ -0,0 +1,164 @@
+import {
+  defineComponent,
+  useAttrs,
+  unref,
+  inject,
+  onBeforeUnmount
+} from 'vue'
+import Selection from '@ER/formEditor/components/Selection/selectElement.jsx'
+import LayoutDragGable from './DragGable.jsx'
+import hooks from '@ER/hooks'
+import _ from 'lodash-es'
+import utils from '@ER/utils'
+import Icon from '@ER/icon'
+export default defineComponent({
+  name: 'SubformLayout',
+  inheritAttrs: false,
+  customOptions: {},
+  props: {
+    data: Object,
+    parent: Array
+  },
+  setup (props) {
+    const ER = inject('Everright')
+    const ExtraParams = inject('EverrightExtraParams', {})
+    const ns = hooks.useNamespace('SubformLayout')
+    const {
+      state,
+      isEditModel,
+      isPc,
+      setSelection
+    } = hooks.useTarget()
+    const typeProps = hooks.useProps(state, props.data, unref(isPc))
+    const addData = unref(isEditModel) ? [] : _.cloneDeep(props.data.list[0])
+    const handleAdd = () => {
+      props.data.list.splice(props.data.list.length, 0, _.cloneDeep(addData))
+      // console.log(props.data.list)
+      // console.log(props.data.list[props.data.list.length - 1])
+      props.data.list[props.data.list.length - 1].forEach(e => {
+        utils.addContext(e, props.data)
+      })
+    }
+    const clearList = () => {
+      props.data.list.splice(0, props.data.list.length)
+    }
+    const setList = (length, values) => {
+      clearList()
+      for (let i = 0; i < length; i++) {
+        handleAdd()
+      }
+      props.data.list.forEach((e, index) => {
+        e.forEach(e => {
+          e.columns.forEach(e => {
+            if (props.data.options.defaultValue) {
+              try {
+                ER.setValue(e, values[index][e.key])
+              } catch (e) {
+              }
+            }
+          })
+        })
+      })
+    }
+    if (!unref(isEditModel)) {
+      onBeforeUnmount(() => {
+        props.data.list[0] = addData
+      })
+      clearList()
+      if (ER.state.remoteValues.has(props.data.key)) {
+        const values = ER.state.remoteValues.get(props.data.key)
+        setList(values.length, values)
+      } else {
+        if (props.data.options.defaultValue.length) {
+          setList(props.data.options.defaultValue.length, props.data.options.defaultValue)
+        }
+      }
+    }
+    if (ExtraParams.inSubformDefaultValueComponent) {
+      ExtraParams.handle.handleAdd = handleAdd
+    }
+    const params = {
+      hasCopy: true,
+      hasDel: true,
+      hasDrag: true,
+      hasWidthScale: true,
+      data: props.data,
+      parent: props.parent
+    }
+    if (process.env.NODE_ENV === 'test') {
+      params['data-field-id'] = `${props.data.id}`
+    }
+    return () => {
+      return (
+        <Selection
+          {...useAttrs()}
+          {
+            ...params
+          }
+        >
+          <div class={ns.b()}>
+            <el-form-item
+              {...typeProps.value}
+            >
+              <div
+                class={[ns.e('content')]}
+              >
+                {
+                  props.data.list.map((node, index) =>
+                    (
+                      <div
+                        class={[
+                          ns.e('item'),
+                          !unref(isEditModel) && !typeProps.value.disabled && ns.e('edit')
+                        ]}
+                        {...utils.addTestId('SubformLayout:item')}
+                      >
+                        <div
+                          class={[ns.e('button')]}>
+                          <el-button
+                            size="large"
+                            circle
+                          >
+                            {index + 1}
+                          </el-button>
+                          <el-button
+                            size="large"
+                            circle
+                            type="danger"
+                            onClick={() => props.data.list.splice(index, 1)}
+                            icon={<Icon class={[ns.e('icon')]} icon="delete"></Icon>}
+                          >
+                          </el-button>
+                        </div>
+                        <LayoutDragGable
+                          data-layout-type={'subform'}
+                          data={node}
+                          ControlInsertion={true}
+                          parent={props.data}/>
+                      </div>
+                    ))
+                }
+                {
+                  (!typeProps.value.disabled && !ExtraParams.inSubformDefaultValueComponent && addData.length)
+                    ? (<div
+                  class={[ns.e('addButton')]}
+                  {...utils.addTestId('SubformLayout:addButton')}
+                >
+                  <el-button
+                    link
+                    type="primary"
+                    onClick={!unref(isEditModel) && handleAdd}
+                  >
+                    Add new
+                  </el-button>
+                </div>)
+                    : ''
+                }
+              </div>
+            </el-form-item>
+          </div>
+        </Selection>
+      )
+    }
+  }
+})

packages/formEditor/components/Panels/Config/components/BackgroundComponent.vue

@@ -227,7 +227,9 @@ const handleSuccess = (response, uploadFile) => {
             :on-success="handleSuccess"
             :on-error="handleError"
           >
-            <el-icon><Plus /></el-icon>
+            <el-icon>
+              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"></path></svg>
+            </el-icon>
           </el-upload>
         </li>
         <li