yqform-edit 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yqform-edit",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": false,
   "main": "dist/yqform-edit.umd.min.js",
   "scripts": {

package/src/components/common/rightConfig/formConfig.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="config-container">
     <!-- 页面标题配置 -->
-    <div class="page-config">
+    <div class="page-config" v-show="showPageConfig">
       <div class="config-title">页面设置</div>
       <div class="config-title-content">
         <div class="option-title">标题</div>
@@ -12,7 +12,7 @@
         </div>
       </div>
     </div>
-    <div class="page-config group-config second-config">
+    <div class="page-config group-config second-config" v-show="showPageConfig">
       <div class="config-title more-header">
         <span class="show-more" @click="moreHeaderShow = true" v-if="!moreHeaderShow">更多</span>
         <span class="show-more" @click="moreHeaderShow = false" v-if="moreHeaderShow">收起</span>
@@ -55,7 +55,7 @@
       </div>
     </div>
     <!-- 分组设置 -->
-    <div class="page-config split-group">
+    <div class="page-config split-group" v-show="showGroupConfig">
       <div class="config-title">分组设置</div>
       <div class="config-title-content">
         <div class="option-title">标题</div>
@@ -92,7 +92,7 @@ import { randomIdFactory } from '@/utils/index.js'
 export default {
   name: 'rightConfig',
   inject: ['getImgFile', 'currentFormSpec', 'form'],
-  props: ['currentPageIndex'],
+  props: ['currentPageIndex', 'showGroupConfig', 'showPageConfig'],
   data() {
     return {
       form_config: {
@@ -183,6 +183,9 @@ export default {
       },
       immediate: true,
     },
+    showGroupConfig(value) {
+      console.log('showGroupConfig >', value)
+    },
   },
   computed: {
     group_spec: {

package/src/components/dynamic-form/components/component-content.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="formContent" class="content" @click="clickPage">
+  <div id="formContent" class="content" :class="showPageConfig ? 'content-active' : ''" @click="clickPage">
     <!--状态栏-->
     <section class="status-bar">
       <time>9:41</time>
@@ -28,7 +28,9 @@
     <!--底部-->
     <footer
       class="bottom"
+      :class="showGroupConfig ? 'bottom-active' : ''"
       :style="{ gap: isNotFirstOrLast ? '48px' : '0px' }"
+      @click.stop="clickGroup"
       @mouseenter="asideShow = true"
       @mouseleave="asideShow = false">
       <template>
@@ -89,7 +91,7 @@ export default {
   name: 'ComponentContent',
   inject: ['pid', 'setPageIndex'],
   components: { Content },
-  emits: ['onSelect', 'selectPage'],
+  emits: ['onSelect', 'selectPage', 'selectGroup'],
   props: {
     noControl: {
       type: Boolean,
@@ -118,6 +120,14 @@ export default {
       required: false,
       default: true,
     },
+    showPageConfig: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showGroupConfig: {
+      type: Boolean,
+    },
   },
   data() {
     return {
@@ -195,9 +205,12 @@ export default {
     selectItem(key) {
       this.$emit('onSelect', key)
     },
-    clickPage(){
+    clickPage() {
       this.$emit('selectPage')
     },
+    clickGroup() {
+      this.$emit('selectGroup')
+    },
     getPage(index) {
       this.pageIndex = index
     },
@@ -287,6 +300,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.content.content-active {
+  border: 0.5px solid rgba(25, 137, 247, 1);
+}
 .content {
   border-radius: 30px;
   border: 0.5px solid rgba(166, 166, 166, 1);
@@ -425,6 +441,9 @@ export default {
     }
   }
 
+  .bottom.bottom-active {
+    border: 0.5px solid rgba(25, 137, 247, 1);
+  }
   .bottom {
     position: absolute;
     bottom: 0;

package/src/components/dynamic-form/components/component-options.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="options-container" :style="copyPreview ? '' : 'height: 80vh'">
-    <FormConfig v-if="!copyPreview" :currentPageIndex="currentPageIndex" v-show="showPageConfig" />
-    <div class="question" v-show="!noSelectItem && !showPageConfig">
+    <FormConfig
+      v-if="!copyPreview"
+      :currentPageIndex="currentPageIndex"
+      :showGroupConfig="showGroupConfig"
+      :showPageConfig="showPageConfig" />
+    <div class="question" v-show="!noSelectItem && !showPageConfig && !showGroupConfig">
       <div class="config-title">题目设置</div>
       <div class="question-config">
         <div class="config-title-content">
@@ -218,7 +222,7 @@
       </div>
     </div>
     <!-- 更多配置 -->
-    <div class="more" v-show="!noSelectItem && !showPageConfig">
+    <div class="more" v-show="!noSelectItem && !showGroupConfig && !showPageConfig">
       <div class="config-title more-header">
         <span class="show-more" @click="moreMoreShow = 'show'" v-if="moreMoreShow === 'hide'">更多</span>
         <span class="show-more" @click="moreMoreShow = 'hide'" v-if="moreMoreShow === 'show'">收起</span>
@@ -326,6 +330,9 @@ export default {
     showPageConfig: {
       type: Boolean,
     },
+    showGroupConfig: {
+      type: Boolean,
+    },
   },
   data() {
     return {

package/src/components/dynamic-form/dynamic-form.vue

@@ -5,14 +5,18 @@
       :currentKey="currentItemKey"
       :currentPageIndex="currentPageIndex"
       :form="form"
+      :showPageConfig="showPageConfig"
+      :showGroupConfig="showGroupConfig"
       @onSelect="setItemIndex"
-      @selectPage="selectPage" />
+      @selectPage="selectPage"
+      @selectGroup="selectGroup" />
     <ComponentOptions
       :item="currentItem"
       :currentItemKey="currentItemKey"
       :currentPageIndex="currentPageIndex"
       :form="form"
-      :showPageConfig="showPageConfig" />
+      :showPageConfig="showPageConfig"
+      :showGroupConfig="showGroupConfig" />
   </div>
 </template>
 
@@ -42,6 +46,7 @@ export default {
       dependValues: [],
       movePage: 0,
       showPageConfig: true,
+      showGroupConfig: false,
     }
   },
   props: {
@@ -101,6 +106,7 @@ export default {
   methods: {
     setItemIndex(index) {
       this.showPageConfig = false
+      this.showGroupConfig = false
       this.currentItemKey = index
     },
     setPageIndex(index) {
@@ -108,6 +114,13 @@ export default {
     },
     selectPage() {
       this.showPageConfig = true
+      this.showGroupConfig = false
+      this.currentItemKey = ''
+    },
+    selectGroup() {
+      console.log('selectGroup')
+      this.showGroupConfig = true
+      this.showPageConfig = false
       this.currentItemKey = ''
     },
     resetPage() {