lw-cdp-ui 1.2.28 → 1.2.30

package/dist/components/lwFormJson/JsonItem.vue

@@ -2,25 +2,24 @@
   <draggable :list="formItems"
              item-key="name"
              group="people"
-             :disabled="!hideBorder"
+             :disabled="hideBorder"
              class="draggable-item"
              ghost-class="draggable-ghost"
-             :class="{ showBorder: hideBorder,  cur:  curIndex == (formItems.name || formItems?.options?.items[0]?.name) }">
+             :class="{ showBorder: !hideBorder,  cur:  curIndex == (`${this.uuid}${formItems.name || formItems?.options?.items[0]?.name}`) }">
     <template #item="{element: item, index}">
       <el-col :span="['list'].includes(item.component) ? 24 : item.span || 24"
-              :class="{ borderItem: hideBorder, cur: hideBorder &&  curIndex == (item.name || item?.options?.items[0]?.name) }"
+              :class="{ borderItem: !hideBorder, cur: !hideBorder &&  curIndex == (`${this.uuid}${item.name || item?.options?.items[0]?.name}`) }"
               v-if="!hideHandle(item)"
-              @click.capture="changeClick(item)">
+              @click.stop="changeClick(item)">
         <!-- 组合 -->
         <template v-if="['object'].includes(item.component)">
-          <el-form-item :label="item.label"
-                        @click.capture="changeClick(item)">
+          <el-form-item :label="item.label">
             <JsonItem :formItems="item.value"
                       :form="form[item.name]"
                       class="object-item"
                       :custom="custom"
                       :hideBorder="hideBorder"
-                      @curClick="changeClick">
+                      @curClick="emitClick">
               <template v-for="c in custom"
                         v-slot:[c.component]="{ itemCur, formCur }">
                 <slot :name="c.component"
@@ -33,10 +32,10 @@
         </template>
         <!-- 列表 显示时 -->
         <template v-else-if="['list'].includes(item.component)">
-          <el-form-item @click.capture="changeClick(item)">
+          <el-form-item>
             <template #label>
               {{ item.label }}
-              <el-button v-if="!hideBorder"
+              <el-button v-if="hideBorder"
                          type="primary"
                          class="add-btn"
                          plain
@@ -47,13 +46,13 @@
             <el-col :span="item.span || 24"
                     v-for="(x, xIndex) in item.value">
               <div class="list-item"
-                   :class="{borderItem: hideBorder}">
+                   :class="{borderItem: !hideBorder}">
                 <JsonItem v-if="form[item.name]"
                           :formItems="x"
                           :custom="custom"
                           :form="form[item.name][xIndex]"
                           :hideBorder="hideBorder"
-                          @curClick="changeClick">
+                          @curClick="emitClick">
                   <template v-for="c in custom"
                             v-slot:[c.component]="{ itemCur, formCur }">
                     <slot :name="c.component"
@@ -63,7 +62,7 @@
                 </JsonItem>
                 <el-icon class="remove-btn"
                          size="14"
-                         v-if="!hideBorder && item.value.length > 1"
+                         v-if="hideBorder && item.value.length > 1"
                          @click="deleteListItem(item.value, xIndex)"><el-icon-delete /></el-icon>
               </div>
 
@@ -83,9 +82,8 @@
                   :formCur="form"></slot>
           </template>
         </FormItem>
-
         <!-- 工具 -->
-        <div v-if="hideBorder && curIndex == (item.name || item?.options?.items[0]?.name)"
+        <div v-if="!hideBorder && curIndex == (`${this.uuid}${item.name || item?.options?.items[0]?.name}`)"
              class="tool-list">
           <el-icon class="btn"
                    size="14"
@@ -107,6 +105,11 @@ import FormItem from '../lwFormMini/FormItem'
 import draggable from 'vuedraggable'
 export default {
   name: 'JsonItem',
+  data() {
+    return {
+      uuid: this.$tool.getUUID('', 12)
+    }
+  },
   components: {
     FormItem,
     draggable
@@ -121,7 +124,7 @@ export default {
       default: () => { }
     },
     // 是否是显示边界
-    hideBorder: { type: Boolean, default: true },
+    hideBorder: { type: Boolean, default: false },
     // 自定义组件
     custom: { type: Array, default: () => [] },
   },
@@ -143,7 +146,10 @@ export default {
       return false
     },
     changeClick(item) {
-      this.$store.state.curIndex = item.name || item?.options.items[0]?.name
+      this.$store.state.curIndex = `${this.uuid}${item.name || item?.options.items[0]?.name}`
+      this.emitClick(item)
+    },
+    emitClick(item) {
       this.$emit('curClick', item)
     },
     // 列表删除

package/dist/components/lwFormJson/StatsConfig.vue

@@ -538,6 +538,7 @@ export default {
   .input-body {
     display: flex;
     align-items: center;
+    gap: 5px;
   }
 }
 </style>

package/dist/components/lwFormJson/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container :style="{ maxHeight }">
-    <el-aside v-if="hideTool"
+    <el-aside v-if="!hideModule"
               width="200px"
               class="form-json-body">
       <div class="menu-list">
@@ -15,7 +15,7 @@
                        :clone="cloneItem"
                        item-key="name">
               <template #item="{ element }">
-                <div class="list-group-item">
+                <div v-if="!element?.hide" class="list-group-item">
                   {{ element.label }}
                 </div>
               </template>
@@ -56,7 +56,7 @@
       </el-main>
     </el-container>
 
-    <el-aside v-if="hideTool"
+    <el-aside v-if="!hideConfig"
               width="300px"
               class="aside-right">
       <StatsConfig :item="curItem"
@@ -115,14 +115,19 @@ export default {
     maxHeight: { type: String, default: 'calc(100vh - 137px)' },
     // 自定义组件
     custom: { type: Array, default: () => [] },
+    customTitle: { type: String, default: '自定义组件' },
     // 是否显示加载中
     loading: { type: Boolean, default: false },
-    // 是否显示工具
+    // 隐藏工具、组件、属性
     hideTool: { type: Boolean, default: true },
+    hideModule: { type: Boolean, default: false },
+    hideConfig: { type: Boolean, default: false },
     // 是否是查看模式
     isView: { type: Boolean, default: false },
-    // 是否是显示边界
-    hideBorder: { type: Boolean, default: true }
+    // 隐藏边界
+    hideBorder: { type: Boolean, default: false },
+    // 隐藏默认组件
+    hideDefault: { type: Boolean, default: false }
   },
   data() {
     return {
@@ -154,23 +159,29 @@ export default {
     },
     custom: {
       handler(val) {
-        this.menuList = []
-        if (val && val.length > 0) {
-          let menuIndex = MenuList.findIndex((item) => {
-            return item.title == '自定义组件'
-          })
+        // 初始化菜单列表
+        this.menuList = this.hideDefault ? [] : [...MenuList];
 
-          if (menuIndex > -1) {
-            MenuList[menuIndex].list = val
+        // 如果有自定义组件
+        if (val.length) {
+
+          // 查找现有的自定义组件菜单
+          const existingCustomMenu = this.menuList.find(item => item.title === this.customTitle);
+
+          if (existingCustomMenu) {
+            // 更新现有的自定义组件列表
+            existingCustomMenu.list = val;
           } else {
-            let custom = {
-              title: '自定义组件',
+            // 添加新的自定义组件菜单
+            this.menuList.push({
+              title: this.customTitle,
               list: val
-            }
-            MenuList.push(custom)
+            });
           }
         }
-        this.menuList = MenuList
+
+        // 设置默认激活的菜单
+        this.activeNames = this.menuList[0]?.title ?? '';
       },
       immediate: true,
       deep: true