lw-cdp-ui 1.2.6 → 1.2.8

package/dist/components/lwFormJson/JsonItem.vue

@@ -18,7 +18,14 @@
                       :form="form[item.name]"
                       class="object-item"
                       :hideBorder="hideBorder"
-                      @curClick="changeClick"></JsonItem>
+                      @curClick="changeClick">
+              <template v-for="item in custom"
+                        v-slot:[item.component]="{ itemCur, formCur }">
+                <slot :name="item.component"
+                      :itemCur="itemCur"
+                      :formCur="formCur"></slot>
+              </template>
+            </JsonItem>
           </el-form-item>
 
         </template>
@@ -43,7 +50,14 @@
                           :formItems="x"
                           :form="form[item.name][xIndex]"
                           :hideBorder="hideBorder"
-                          @curClick="changeClick"></JsonItem>
+                          @curClick="changeClick">
+                  <template v-for="item in custom"
+                            v-slot:[item.component]="{ itemCur, formCur }">
+                    <slot :name="item.component"
+                          :itemCur="itemCur"
+                          :formCur="formCur"></slot>
+                  </template>
+                </JsonItem>
                 <el-icon class="remove-btn"
                          size="14"
                          v-if="!hideBorder && item.value.length > 1"
@@ -105,7 +119,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>
@@ -356,15 +376,22 @@ export default {
   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 +401,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 +504,10 @@ export default {
   .w-20 {
     width: 100px;
   }
+
+  .input-body {
+    display: flex;
+    align-items: center;
+  }
 }
 </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,
@@ -145,17 +146,9 @@ export default {
     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
     },
   },

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,32 +255,38 @@ 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 = '') {
-      console.log(obj, key)
       if (!key || !obj) { return false }
       const keys = key.split('.');  // 将路径拆分成数组
 
@@ -293,28 +300,25 @@ export default {
         // 否则，继续向下查找
         current = current[keys[i]];
       }
-      
       return current;
     },
     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[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]; // 进入下一层
         }
       });
 
-
     },
     // 删除tag
     tagClose(tag, item) {

package/dist/components/lwFormMini/index.vue

@@ -3,7 +3,7 @@
             :offset="100"
             style="width: 100%; height: 45px;">
     <ul class="affix-body">
-      <template v-for="(item, index) in localConfig.formItems"
+      <template v-for="(item, index) in config.formItems"
                 :key="index">
         <a v-if="item.component === 'divider'"
            class="anchor-link"
@@ -21,14 +21,14 @@
   <el-form v-else
            ref="form"
            :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 :gutter="15">
 
-      <template v-for="(item, index) in localConfig.formItems">
+      <template v-for="(item, index) in config.formItems">
         <el-col :span="item.span || 24"
                 v-if="!hideHandle(item)">
           <FormItem :item="item"
@@ -110,7 +110,6 @@ export default {
   data() {
     return {
       form: {},
-      localConfig: {},
       affixIndex: 0,
       isChange: true,
       scrollObserverEnabled: true,
@@ -128,24 +127,17 @@ export default {
     },
     config: {
       handler(val) {
-        this.render()
+        this.render(val)
         if (this.showMenu) {
           this.$nextTick(() => {
             this.handleScroll()
           })
         }
-        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
-    },
+    }
   },
   computed: {
     hasConfig() {