feat: checkFieldsForNewBadge

Through the checkFieldsForNewBadge function, a new badge can be added to a certain element in the fields panel.
Liberty-liu · Sep 12, 2023 · 8a2962b · 8a2962b
1 parent e525d2b
commit 8a2962b
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 3 deletions.
diff --git a/examples/views/formEditor.vue b/examples/views/formEditor.vue
@@ -14,9 +14,13 @@ const handleListener = async ({ type, data }) => {
       break
   }
 }
+const checkFieldsForNewBadge = (field) => {
+  return field.type === 'subform'
+}
 </script>
 <template>
   <er-form-editor
+    :checkFieldsForNewBadge="checkFieldsForNewBadge"
     :lang="lang"
     @listener="handleListener"
     ref="EReditorRef"/>

diff --git a/examples/views/formEditor/objEdit.vue b/examples/views/formEditor/objEdit.vue
@@ -90,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"

diff --git a/packages/formEditor/components/Panels/Fields/index.jsx b/packages/formEditor/components/Panels/Fields/index.jsx
@@ -23,7 +23,6 @@ export default {
     const {
       t
     } = hooks.useI18n()
-    // console.log(t('lhf'))
     const {
       state,
       setSelection
@@ -42,7 +41,7 @@ export default {
     const slots = {
       item: ({ element }) => {
         return (
-          <li onClick={() => addStore(element)}>
+          <li class={[ER.props.checkFieldsForNewBadge(element) ? ns.is('new') : '']} onClick={() => addStore(element)}>
             <Icon class={[ns.e('icon')]} icon={element.icon}></Icon>
             <span>{utils.fieldLabel(t, element)}</span>
           </li>

diff --git a/packages/formEditor/index.vue b/packages/formEditor/index.vue
@@ -51,6 +51,10 @@ const props = defineProps(_.merge({
     type: String,
     default: 'icon',
     validator: (value) => ['full', 'icon'].includes(value)
+  },
+  checkFieldsForNewBadge: {
+    type: Function,
+    default: () => {}
   }
 }, defaultProps))
 const layout = {

diff --git a/packages/theme/formEditor/Fields.scss b/packages/theme/formEditor/Fields.scss
@@ -21,7 +21,20 @@
     justify-content: space-between;
     flex-wrap: wrap;
     li {
-      overflow: hidden;
+      @include when(new) {
+        &::after {
+          content: 'new';
+          position: absolute;
+          top: -6px;
+          right: 0;
+          color: #fff;
+          background-color: #f00;
+          font-size: 12px;
+          padding: 0 6px;
+          border-radius: 10px;
+        }
+      }
+      position: relative;
       border-radius: 4px;
       margin: 4px;
       background: #F9F9F9;