lw-cdp-ui 1.2.7 → 1.2.9

package/dist/components/lwFormJson/JsonItem.vue

@@ -10,15 +10,23 @@
       <el-col :span="['list'].includes(item.component) ? 24 : item.span || 24"
               :class="{ borderItem: hideBorder, cur: hideBorder &&  curIndex == (item.name || item?.options?.items[0]?.name) }"
               v-if="!hideHandle(item)">
-        <!-- 组合/列表 -->
+        <!-- 组合 -->
         <template v-if="['object'].includes(item.component)">
           <el-form-item :label="item.label"
                         @click.capture="changeClick(item)">
             <JsonItem :formItems="item.value"
                       :form="form[item.name]"
                       class="object-item"
+                      :custom="custom"
                       :hideBorder="hideBorder"
-                      @curClick="changeClick"></JsonItem>
+                      @curClick="changeClick">
+              <template v-for="c in custom"
+                        v-slot:[c.component]="{ itemCur, formCur }">
+                <slot :name="c.component"
+                      :itemCur="itemCur"
+                      :formCur="formCur"></slot>
+              </template>
+            </JsonItem>
           </el-form-item>
 
         </template>
@@ -41,9 +49,17 @@
                    :class="{borderItem: hideBorder}">
                 <JsonItem v-if="form[item.name]"
                           :formItems="x"
+                          :custom="custom"
                           :form="form[item.name][xIndex]"
                           :hideBorder="hideBorder"
-                          @curClick="changeClick"></JsonItem>
+                          @curClick="changeClick">
+                  <template v-for="c in custom"
+                            v-slot:[c.component]="{ itemCur, formCur }">
+                    <slot :name="c.component"
+                          :itemCur="itemCur"
+                          :formCur="formCur"></slot>
+                  </template>
+                </JsonItem>
                 <el-icon class="remove-btn"
                          size="14"
                          v-if="!hideBorder && item.value.length > 1"
@@ -105,7 +121,9 @@ export default {
       default: () => { }
     },
     // 是否是显示边界
-    hideBorder: { type: Boolean, default: true }
+    hideBorder: { type: Boolean, default: true },
+    // 自定义组件
+    custom: { type: Array, default: () => [] },
   },
   computed: {
     curIndex() {

package/dist/components/lwFormJson/StatsConfig.vue

@@ -310,17 +310,37 @@
         <el-form-item label="提交校验">
           <el-select v-model="item.rules"
                      multiple
+                     value-key="label"
                      clearable
                      placeholder="请选择">
             <el-option v-for="item in rules"
+                       :key="item.label"
                        :label="item.label"
-                       :value="item.value" />
+                       :value="item" />
           </el-select>
         </el-form-item>
-        <el-form-item label="隐藏校验">
-          <el-input v-model="item.hideHandle"
-                    placeholder="请输入"
-                    clearable />
+        <el-form-item label="隐藏校验(满足条件时将隐藏该项)">
+          <div class="input-body">
+            <el-cascader v-model="hideForm.label"
+                         :show-all-levels="false"
+                         :props="{ emitPath: false }"
+                         style="flex:1.2;"
+                         :options="strList" />
+            <el-select v-model="hideForm.filter"
+                       clearable
+                       style="flex:1;"
+                       placeholder="条件">
+              <el-option v-for="item in filter"
+                         :key="item.label"
+                         :label="item.label"
+                         :value="item.value" />
+            </el-select>
+            <el-input v-model="hideForm.value"
+                      style="flex:1;"
+                      placeholder="值"
+                      clearable />
+          </div>
+
         </el-form-item>
 
       </div>
@@ -345,26 +365,38 @@
           </el-select>
         </el-form-item>
       </div>
-
+      <div class="form-title">数据层级</div>
+      <TreeItem :formItems="config.formItems" />
     </template>
   </el-form>
 </template>
 
 <script>
+import TreeItem from './TreeItem.vue'
 export default {
   name: 'StatsConfig',
+  components: {
+    TreeItem
+  },
   data() {
     return {
       tagVisible: {},
+      hideForm: {},
       tagValue: '',
+      filter: [
+        { label: '等于', value: '==' },
+        { label: '大于', value: '>' },
+        { label: '大于等于', value: '>=' },
+        { label: '小于', value: '<' },
+        { label: '小于等于', value: '<=' },
+        { label: '不等于', value: '!=' }
+      ],
       rules: [
         {
-          label: '必填',
-          value: { required: true, message: '请输入', trigger: 'blur' }
+          label: '必填', required: true, message: '请输入', trigger: 'blur'
         },
         {
-          label: '必选',
-          value: { required: true, message: '请选择', trigger: 'change' }
+          label: '必选', required: true, message: '请选择', trigger: 'change'
         },
       ]
     }
@@ -374,13 +406,53 @@ export default {
       type: Object,
       default: () => ({})
     },
-    form: {
+    config: {
       type: Object,
       default: () => ({})
-    },
-    isBorder: {
-      type: Boolean,
-      default: false
+    }
+  },
+  watch: {
+    hideForm: {
+      handler(val) {
+        if (!val?.label || !val.filter || !val.value) {
+          this.item.hideHandle = ''
+          return
+        }
+        this.item.hideHandle = `$.${val.label} ${val.filter} ${val.value}`
+      },
+      deep: true
+    }
+  },
+  computed: {
+    // 字段
+    strList() {
+      function parse(data) {
+        const parseItem = (item) => {
+          let node = {
+            label: item.label,
+            value: item.name || item.label
+          };
+
+          if (item.component === 'object' || item.component === 'list') {
+            // 如果是组合或者列表，递归处理子节点
+            node.children = (item.value || []).map((subItem) => {
+              if (Array.isArray(subItem)) {
+                return subItem.map(parseItem); // 处理二维数组的情况
+              }
+              return parseItem(subItem);
+            }).flat();
+          } else if (item.component === 'checkbox' || item.component === 'upload') {
+            // 如果是复选框或者上传组件，从 options.items 中提取子节点
+            node.value = item.options?.items[0].name
+          }
+
+          return node;
+        };
+
+        return data.formItems.map(parseItem);
+      }
+      let list = parse(this.config)
+      return list
     }
   },
   methods: {
@@ -437,5 +509,10 @@ export default {
   .w-20 {
     width: 100px;
   }
+
+  .input-body {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>

package/dist/components/lwFormJson/TreeItem.vue

@@ -0,0 +1,149 @@
+<template>
+  <draggable :list="formItems"
+             item-key="name"
+             group="people"
+             class="draggable-item"
+             ghost-class="draggable-ghost">
+    <template #item="{element: item, index}">
+      <div>
+        <!-- 组合 -->
+        <template v-if="['object'].includes(item.component)">
+          <div class="form-item">
+            {{item.label}}<span>「{{item.name || item.options?.items[0]?.name}}」</span>
+            <div class="tool-list">
+              <el-icon class="btn"
+                       size="14"
+                       @click="copyItem(item, index)"
+                       title="复制"><el-icon-copy-document /></el-icon>
+              <el-icon class="btn"
+                       size="14"
+                       @click="deleteItem(index)"
+                       title="删除"><el-icon-delete /></el-icon>
+            </div>
+          </div>
+          <TreeItem :formItems="item.value"></TreeItem>
+        </template>
+
+        <!-- 列表 显示时 -->
+        <template v-else-if="['list'].includes(item.component)">
+          <div class="list-item">
+            <div class="form-item">
+              {{item.label}}<span>「{{item.name || item.options?.items[0]?.name}}」</span>
+              <div class="tool-list">
+                <el-icon class="btn"
+                         size="14"
+                         @click="copyItem(item, index)"
+                         title="复制"><el-icon-copy-document /></el-icon>
+                <el-icon class="btn"
+                         size="14"
+                         @click="deleteItem(index)"
+                         title="删除"><el-icon-delete /></el-icon>
+              </div>
+            </div>
+            <TreeItem :formItems="x"
+                      v-for="x in item.value"></TreeItem>
+          </div>
+
+        </template>
+
+        <div v-else
+             class="form-item">
+          {{item.label}}<span>「{{item.name || item.options?.items[0]?.name}}」</span>
+          <div class="tool-list">
+            <el-icon class="btn"
+                     size="14"
+                     @click="copyItem(item, index)"
+                     title="复制"><el-icon-copy-document /></el-icon>
+            <el-icon class="btn"
+                     size="14"
+                     @click="deleteItem(index)"
+                     title="删除"><el-icon-delete /></el-icon>
+          </div>
+        </div>
+      </div>
+    </template>
+  </draggable>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+export default {
+  name: 'TreeItem',
+  components: {
+    draggable
+  },
+  props: {
+    formItems: {
+      type: Object,
+      default: []
+    }
+  },
+  computed: {
+    curIndex() {
+      return this.$store.state?.curIndex || ''
+    }
+  },
+  emits: ['curClick'],
+  methods: {
+    // 删除
+    deleteItem(index) {
+      this.formItems.splice(index, 1)
+    },
+    // 复制
+    copyItem(item, index) {
+      let x = JSON.parse(JSON.stringify(item))
+      x.name = `${item.component}-${this.$tool.getUUID('', 2)}`
+      this.formItems.splice(index + 1, 0, x)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.draggable-item {
+  // padding-left: 10px;
+  border-left: 10px solid rgba($color: #000, $alpha: 0.05);
+  background-color: rgba($color: #000, $alpha: 0.01);
+  backdrop-filter: blur(10px);
+  color: var(--el-text-color-regular);
+  cursor: move;
+  .list-item {
+  }
+  .form-item {
+    padding: 8px 0 8px 10px;
+    border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);
+    position: relative;
+    span{
+      color: var(--el-color-primary-light-6);
+    }
+    .tool-list {
+      display: none;
+    }
+    &:hover {
+      // border: 1px dashed var(--el-color-primary) !important;
+      background-color: var(--el-color-primary-light-9);
+      .tool-list {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        display: block;
+        border-top-left-radius: 10px;
+        z-index: 8;
+        background-color: var(--el-color-primary);
+        color: #fff;
+        display: flex;
+        gap: 10px;
+        padding: 2px 10px;
+        .btn {
+          cursor: pointer;
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+  }
+  :deep(.draggable-ghost) {
+    background: var(--el-border-color-light);
+    width: 100%;
+  }
+}
+</style>

package/dist/components/lwFormJson/index.vue

@@ -32,21 +32,22 @@
         <el-form ref="form"
                  @click.capture="back(config)"
                  :model="form"
-                 :label-width="localConfig.labelWidth"
-                 :label-position="$i18n.locale == 'en-us' ? 'top' : localConfig.labelPosition"
+                 :label-width="config.labelWidth"
+                 :label-position="$i18n.locale == 'en-us' ? 'top' : config.labelPosition"
                  v-loading="loading"
                  :disabled="isView"
                  element-loading-text="Loading...">
           <el-row>
-            <JsonItem :formItems="localConfig.formItems"
+            <JsonItem :formItems="config.formItems"
                       :hideBorder="hideBorder"
                       :form="form"
+                      :custom="custom"
                       @curClick="selectItem">
               <template v-for="item in custom"
-                        v-slot:[item.component]>
+                        v-slot:[item.component]="{ itemCur, formCur }">
                 <slot :name="item.component"
-                      :itemCur="item"
-                      :formCur="form"></slot>
+                      :itemCur="itemCur"
+                      :formCur="formCur"></slot>
               </template>
             </JsonItem>
           </el-row>
@@ -58,7 +59,8 @@
     <el-aside v-if="hideTool"
               width="300px"
               class="aside-right">
-      <StatsConfig :item="curItem" />
+      <StatsConfig :item="curItem"
+                   :config="config" />
     </el-aside>
   </el-container>
 </template>
@@ -125,7 +127,6 @@ export default {
   data() {
     return {
       form: {},
-      localConfig: {},
       curItem: {},
       scrollObserverEnabled: true,
       renderLoading: false,
@@ -143,19 +144,11 @@ export default {
       deep: true
     },
     config: {
-      handler(val) {
-        this.render()
-        this.localConfig = JSON.parse(JSON.stringify(val))
-      },
-      immediate: true,
-      deep: true
-    },
-    localConfig: {
       handler(val) {
         this.render(val)
         this.$emit("update:config", val)
-
       },
+      immediate: true,
       deep: true
     },
   },
@@ -238,10 +231,10 @@ export default {
       }
 
       let form = parse(config.formItems, this.modelValue);
-      form = {
-        ...this.modelValue,
-        ...form
-      }
+      // form = {
+      //   ...this.modelValue,
+      //   ...form
+      // }
       this.form = this.parseNestedObject(form)
       this.$emit("update:modelValue", this.form);
     },

package/dist/components/lwFormMini/FormItem.vue

@@ -31,7 +31,7 @@
 
     <!-- input -->
     <template v-if="item.component == 'input'">
-      <el-input v-model="item.value"
+      <el-input v-model="objItem.value"
                 :placeholder="item?.options?.placeholder"
                 clearable
                 :type="item?.options?.type"
@@ -47,7 +47,7 @@
     </template>
     <!-- upload -->
     <template v-else-if="item.component == 'upload'">
-      <template v-for="(_item, _index) in item?.options.items"
+      <template v-for="(_item, _index) in objItem?.options.items"
                 :key="_index">
         <lw-upload v-model="_item.value"
                    :height="item.height"
@@ -69,12 +69,12 @@
     <template v-else-if="item.component == 'checkbox'">
       <el-checkbox v-model="_item.value"
                    :label="_item.label"
-                   v-for="(_item, _index) in item?.options.items"
+                   v-for="(_item, _index) in objItem?.options.items"
                    :key="_index"></el-checkbox>
     </template>
     <!-- checkboxGroup -->
     <template v-else-if="item.component == 'checkboxGroup'">
-      <el-checkbox-group v-model="item.value">
+      <el-checkbox-group v-model="objItem.value">
         <el-checkbox v-for="_item in item?.options.items"
                      :key="_item.value"
                      :value="_item.value">{{ _item.label }}</el-checkbox>
@@ -83,14 +83,14 @@
 
     <!-- switch -->
     <template v-else-if="item.component == 'switch'">
-      <el-switch v-model="item.value"
+      <el-switch v-model="objItem.value"
                  inline-prompt
                  :active-text="item?.options?.activeText"
                  :inactive-text="item?.options?.inactiveText" />
     </template>
     <!-- select -->
     <template v-else-if="item.component == 'select'">
-      <el-select v-model="item.value"
+      <el-select v-model="objItem.value"
                  :multiple="item?.options?.multiple"
                  :allow-create="item?.options?.allowCreate"
                  default-first-option
@@ -110,7 +110,7 @@
     </template>
     <!-- treeSelect -->
     <template v-else-if="item.component == 'treeSelect'">
-      <el-tree-select v-model="item.value"
+      <el-tree-select v-model="objItem.value"
                       :props="item?.options?.props"
                       :node-Key="item?.options?.nodeKey"
                       :multiple="item?.options?.multiple"
@@ -120,7 +120,7 @@
     </template>
     <!-- cascader -->
     <template v-else-if="item.component == 'cascader'">
-      <el-cascader v-model="item.value"
+      <el-cascader v-model="objItem.value"
                    style="width: 100%;"
                    :props="item?.options?.props"
                    :separator="item?.options?.separator"
@@ -130,7 +130,7 @@
     </template>
     <!-- date -->
     <template v-else-if="item.component == 'date'">
-      <el-date-picker v-model="item.value"
+      <el-date-picker v-model="objItem.value"
                       style="width: 100%;"
                       :type="item?.options?.type"
                       :start-placeholder="item?.options?.startPlaceholder"
@@ -145,7 +145,7 @@
     </template>
     <!-- number -->
     <template v-else-if="item.component == 'number'">
-      <el-input-number v-model="item.value"
+      <el-input-number v-model="objItem.value"
                        :disabled="item?.options?.disabled"
                        :min="item?.options?.min"
                        :max="item?.options?.max"
@@ -161,7 +161,7 @@
     </template>
     <!-- radio -->
     <template v-else-if="item.component == 'radio'">
-      <el-radio-group v-model="item.value"
+      <el-radio-group v-model="objItem.value"
                       :disabled="item?.options.disabled">
         <el-radio v-for="_item in item?.options.items"
                   :key="_item.value"
@@ -170,35 +170,35 @@
     </template>
     <!-- color -->
     <template v-else-if="item.component == 'color'">
-      <el-color-picker v-model="item.value" />
+      <el-color-picker v-model="objItem.value" />
     </template>
     <!-- rate -->
     <template v-else-if="item.component == 'rate'">
       <el-rate style="margin-top: 6px;"
-               v-model="item.value"></el-rate>
+               v-model="objItem.value"></el-rate>
     </template>
     <!-- slider -->
     <template v-else-if="item.component == 'slider'">
-      <el-slider v-model="item.value"
+      <el-slider v-model="objItem.value"
                  :marks="item?.options.marks"></el-slider>
     </template>
 
     <!-- tags -->
     <template v-else-if="item.component == 'tags'">
       <div class="tags-list">
-        <el-tag v-for="tag in item.value"
+        <el-tag v-for="tag in objItem.value"
                 :key="tag"
                 closable
                 :disable-transitions="false"
-                @close="tagClose(tag, item.value)">
+                @close="tagClose(tag, objItem.value)">
           {{ tag }}
         </el-tag>
         <el-input v-if="tagVisible[item.name]"
                   v-model="tagValue"
                   class="w-20"
                   size="small"
-                  @keyup.enter="tagInputConfirm(item, item.value)"
-                  @blur="tagInputConfirm(item, item.value)" />
+                  @keyup.enter="tagInputConfirm(item, objItem.value)"
+                  @blur="tagInputConfirm(item, objItem.value)" />
         <el-button v-else
                    class="button-new-tag"
                    size="small"
@@ -230,6 +230,7 @@ export default {
     return {
       tagVisible: {},
       dataForm: {},
+      objItem: {},
       tagValue: ''
     }
   },
@@ -254,28 +255,35 @@ export default {
     form: {
       handler(val) {
         if (this.item.component === 'checkbox' || this.item.component === 'upload') {
-          this.item.options?.items?.forEach((option) => {
+          this.objItem.options?.items?.forEach((option) => {
             option.value = this.flattenObject(this.form, option.name, option.value)
           });
         } else {
-          this.item.value = this.flattenObject(this.form, this.item.name, this.item.value)
+          this.objItem.value= this.flattenObject(this.form, this.item.name, this.objItem.value)
         }
       },
       immediate: true,
       deep: true
     },
     item: {
+      handler(val) {
+        this.objItem = val
+      },
+      immediate: true,
+      deep: true
+    },
+    objItem: {
       handler(val) {
         if (val.component === 'checkbox' || val.component === 'upload') {
           val.options?.items?.forEach((option) => {
             this.unflattenObject(this.form, option.name, option.value)
           });
         } else {
-          this.unflattenObject(this.form, this.item.name, val.value)
+          this.unflattenObject(this.form, val.name, val.value)
         }
       },
       deep: true
-    }
+    },
   },
   methods: {
     flattenObject(obj, key, defaultValue = '') {
@@ -297,18 +305,17 @@ export default {
     unflattenObject(obj, path, value) {
       if (!path || !obj) { return false }
       const keys = path.split('.'); // 按点分隔路径
-      let current = obj; // 指向传入的对象（如 this.form）
 
       keys.forEach((key, index) => {
         if (index === keys.length - 1) {
           // 最后一级，直接赋值
-          current[key] = value || obj[path];
+          obj[key] = value || obj[path];
         } else {
           // 如果不存在该层级，创建空对象
-          if (!current[key] || typeof current[key] !== 'object') {
-            current[key] = {};
+          if (!obj[key] || typeof obj[key] !== 'object') {
+            obj[key] = {};
           }
-          current = current[key]; // 进入下一层
+          obj = obj[key]; // 进入下一层
         }
       });