lw-cdp-ui 1.3.3 → 1.3.5

package/dist/components/lwFormMini/FormItem.vue

@@ -2,8 +2,8 @@
   <!-- 间隔标题 -->
   <div v-if="item.component == 'divider'"
        class="title-name title-name-divider"
-       :id="'divider-' + index"
-       :data-index="index">
+       :id="'divider-' + item.label"
+       :data-index="item.label">
     <span>
       {{ item.label }}
       <el-tooltip v-if="item.tips"
@@ -384,35 +384,6 @@ export default {
 
 
 <style lang="scss" scoped>
-:deep(.el-col) {
-  &:first-child {
-    .title-name {
-      border: 0;
-      padding-top: 25px;
-      margin-top: 0;
-    }
-  }
-}
-
-.title-name {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  margin-top: 25px;
-  border-top: 10px solid #f5f7fa;
-  padding-top: 20px;
-}
-
-.form-mini {
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-}
-.form-affix {
-  min-width: 130px;
-  padding-left: 20px;
-}
-
 .w-20 {
   width: 100px;
 }
@@ -422,48 +393,7 @@ export default {
     display: none !important;
   }
 }
-.affix-body {
-  background-color: var(--el-fill-color-light);
-  border: 1px solid var(--el-border-color-light);
-  margin: 0;
-  position: relative;
-  &::after {
-    content: "";
-    position: absolute;
-    left: -2px;
-    right: 0;
-    height: 16px;
-    background-color: #ffffff;
-    top: -17px;
-  }
-  .anchor-link {
-    padding: 0 20px;
-    height: var(--el-tabs-header-height);
-    box-sizing: border-box;
-    list-style: none;
-    font-size: var(--el-font-size-base);
-    font-weight: bold;
-    color: var(--el-text-color-secondary);
-    position: relative;
-    height: 40px;
-    display: inline-block;
-    line-height: 40px;
-    cursor: pointer;
-    border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
-  }
-  .active {
-    color: var(--el-color-primary);
-    background-color: var(--el-bg-color-overlay);
-    border-bottom: 1px solid var(--el-bg-color-overlay);
-    border-right-color: var(--el-border-color);
-    border-left: 1px solid var(--el-border-color-light);
-    border-right: 1px solid var(--el-border-color-light);
-    &:first-child {
-      border-left: 1px solid var(--el-fill-color-light);
-    }
-  }
-}
+
 
 :deep(.el-tag) {
   & + .button-new-tag {

package/dist/components/lwFormMini/ViewItem.vue

@@ -299,38 +299,6 @@ export default {
 
 
 <style lang="scss" scoped>
-:deep(.el-col) {
-  &:first-child {
-    .title-name {
-      border: 0;
-      padding-top: 25px;
-      margin-top: 0;
-    }
-  }
-}
-
-.title-name {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  margin-top: 25px;
-  border-top: 10px solid #f5f7fa;
-  padding-top: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.form-mini {
-  display: flex;
-  width: 100%;
-  box-sizing: border-box;
-}
-.form-affix {
-  min-width: 130px;
-  padding-left: 20px;
-}
-
 .w-20 {
   width: 100px;
 }
@@ -340,48 +308,6 @@ export default {
     display: none !important;
   }
 }
-.affix-body {
-  background-color: var(--el-fill-color-light);
-  border: 1px solid var(--el-border-color-light);
-  margin: 0;
-  position: relative;
-  &::after {
-    content: "";
-    position: absolute;
-    left: -2px;
-    right: 0;
-    height: 16px;
-    background-color: #ffffff;
-    top: -17px;
-  }
-  .anchor-link {
-    padding: 0 20px;
-    height: var(--el-tabs-header-height);
-    box-sizing: border-box;
-    list-style: none;
-    font-size: var(--el-font-size-base);
-    font-weight: bold;
-    color: var(--el-text-color-secondary);
-    position: relative;
-    height: 40px;
-    display: inline-block;
-    line-height: 40px;
-    cursor: pointer;
-    border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
-  }
-  .active {
-    color: var(--el-color-primary);
-    background-color: var(--el-bg-color-overlay);
-    border-bottom: 1px solid var(--el-bg-color-overlay);
-    border-right-color: var(--el-border-color);
-    border-left: 1px solid var(--el-border-color-light);
-    border-right: 1px solid var(--el-border-color-light);
-    &:first-child {
-      border-left: 1px solid var(--el-fill-color-light);
-    }
-  }
-}
 
 :deep(.el-tag) {
   & + .button-new-tag {

package/dist/components/lwFormMini/index.vue

@@ -7,8 +7,8 @@
                 :key="index">
         <a v-if="item.component === 'divider'"
            class="anchor-link"
-           :class="{active: affixIndex == index}"
-           @click="clickAffix(index)">
+           :class="{active: affixIndex == item.label}"
+           @click="clickAffix(item.label)">
           {{ item.label }}
         </a>
       </template>
@@ -20,68 +20,68 @@
 
   <el-form v-else
            ref="form"
+           class="lw-form-mini"
            :model="form"
            :label-width="config.labelWidth"
            :label-position="$i18n.locale == 'en-us' ? 'top' : config.labelPosition"
            v-loading="loading"
            :size="config?.size || 'default'"
            element-loading-text="Loading...">
-    <el-row :gutter="15">
+    <div class="lw-form-mini-card"
+         v-for="card in formItems">
+      <el-row :gutter="15">
+        <template v-for="(item, index) in card">
+          <el-col :span="item.span || 24"
+                  v-if="!hideHandle(item)">
+            <ViewItem v-if="isView && !item?.options?.isInput"
+                      :item="item"
+                      :form="form"
+                      :index="index">
+              <!-- 没有组件是component值 就是插槽名称 -->
+              <template v-if="!['input', 'upload', 'checkbox', 'checkboxGroup', 'switch', 'select', 'treeSelect', 'cascader', 'date', 'number', 'radio', 'color', 'rate', 'slider','tags', 'divider'].includes(item.component)"
+                        v-slot:[item.component]>
+                <slot :name="item.component"
+                      :itemCur="item"
+                      :formCur="form">
+                  <el-tag type="danger">[{{ item.component }}]
+                    没有这个默认组件也未自定义插槽内容</el-tag>
+                </slot>
+              </template>
+              <template v-if="item?.options?.component"
+                        v-slot:[item?.options?.component]>
+                <slot :name="item?.options?.component"></slot>
+              </template>
 
-      <template v-for="(item, index) in config.formItems">
-        <el-col :span="item.span || 24"
-                v-if="!hideHandle(item)">
-          <ViewItem v-if="isView && !item?.options?.isInput"
-                    :item="item"
-                    :form="form"
-                    :index="index">
-            <!-- 没有组件是component值 就是插槽名称 -->
-            <template v-if="!['input', 'upload', 'checkbox', 'checkboxGroup', 'switch', 'select', 'treeSelect', 'cascader', 'date', 'number', 'radio', 'color', 'rate', 'slider','tags', 'divider'].includes(item.component)"
-                      v-slot:[item.component]>
-              <slot :name="item.component"
-                    :itemCur="item"
-                    :formCur="form">
-                <el-tag type="danger">[{{ item.component }}]
-                  没有这个默认组件也未自定义插槽内容</el-tag>
-              </slot>
-            </template>
-            <template v-if="item?.options?.component"
-                      v-slot:[item?.options?.component]>
-              <slot :name="item?.options?.component"></slot>
-            </template>
-
-          </ViewItem>
-          <FormItem v-else
-                    :item="item"
-                    :form="form"
-                    :index="index">
-            <!-- 没有组件是component值 就是插槽名称 -->
-            <template v-if="!['input', 'upload', 'checkbox', 'checkboxGroup', 'switch', 'select', 'treeSelect', 'cascader', 'date', 'number', 'radio', 'color', 'rate', 'slider','tags', 'divider'].includes(item.component)"
-                      v-slot:[item.component]>
-              <slot :name="item.component"
-                    :itemCur="item"
-                    :formCur="form">
-                <el-tag type="danger">[{{ item.component }}]
-                  没有这个默认组件也未自定义插槽内容</el-tag>
-              </slot>
-            </template>
-            <template v-if="item?.options?.component"
-                      v-slot:[item?.options?.component]>
-              <slot :name="item?.options?.component"></slot>
-            </template>
-          </FormItem>
-        </el-col>
-      </template>
-      <el-col v-if="!isView"
-              :span="24">
-        <el-form-item>
-          <slot>
-            <el-button type="primary"
-                       @click="submit">提交</el-button>
-          </slot>
-        </el-form-item>
-      </el-col>
-    </el-row>
+            </ViewItem>
+            <FormItem v-else
+                      :item="item"
+                      :form="form"
+                      :index="index">
+              <!-- 没有组件是component值 就是插槽名称 -->
+              <template v-if="!['input', 'upload', 'checkbox', 'checkboxGroup', 'switch', 'select', 'treeSelect', 'cascader', 'date', 'number', 'radio', 'color', 'rate', 'slider','tags', 'divider'].includes(item.component)"
+                        v-slot:[item.component]>
+                <slot :name="item.component"
+                      :itemCur="item"
+                      :formCur="form">
+                  <el-tag type="danger">[{{ item.component }}]
+                    没有这个默认组件也未自定义插槽内容</el-tag>
+                </slot>
+              </template>
+              <template v-if="item?.options?.component"
+                        v-slot:[item?.options?.component]>
+                <slot :name="item?.options?.component"></slot>
+              </template>
+            </FormItem>
+          </el-col>
+        </template>
+      </el-row>
+    </div>
+    <el-form-item v-if="!isView">
+      <slot>
+        <el-button type="primary"
+                   @click="submit">提交</el-button>
+      </slot>
+    </el-form-item>
   </el-form>
 </template>
 
@@ -138,7 +138,7 @@ export default {
   data() {
     return {
       form: {},
-      affixIndex: 0,
+      affixIndex: '',
       isChange: true,
       scrollObserverEnabled: true,
       renderLoading: false
@@ -174,15 +174,38 @@ export default {
     hasValue() {
       return Object.keys(this.modelValue).length > 0
     },
+    formItems() {
+      const result = [];
+      let currentGroup = [];
+
+      this.config.formItems.forEach(item => {
+        if (item.component === "divider") {
+          if (!this.affixIndex) {
+            this.affixIndex = item.label
+          }
+
+          if (currentGroup.length) {
+            result.push(currentGroup);
+            currentGroup = [];
+          }
+          currentGroup.push(item);
+        } else {
+          currentGroup.push(item);
+        }
+      });
+
+      if (currentGroup.length) {
+        result.push(currentGroup);
+      }
 
+      return result;
+    }
   },
   mounted() {
     if (this.hasConfig) {
       this.render()
     }
   },
-  beforeDestroy() {
-  },
   methods: {
     /**
      * 渲染表单数据。
@@ -318,6 +341,7 @@ export default {
         if (distanceFromTop >= 0 && distanceFromTop <= 100 && _this.scrollObserverEnabled) {
           const dataIndex = entry.target.getAttribute('data-index');
           _this.affixIndex = dataIndex;  // 更新 affixIndex
+          console.log(dataIndex)
         }
       }, {
         root: elMain, // 设置根元素为 el-main
@@ -333,16 +357,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-:deep(.el-col) {
-  &:first-child {
-    .title-name {
-      border: 0;
-      padding-top: 25px;
-      margin-top: 0;
-    }
-  }
-}
-
 .form-mini {
   display: flex;
   width: 100%;
@@ -361,60 +375,9 @@ export default {
   margin-left: 10px;
 }
 
-.title-name {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  margin-top: 25px;
-  border-top: 10px solid #f5f7fa;
-  padding-top: 20px;
-}
-
 :deep(.form-item-name-null) {
   > .el-form-item__label {
     display: none !important;
   }
 }
-.affix-body {
-  background-color: var(--el-fill-color-light);
-  border: 1px solid var(--el-border-color-light);
-  margin: 0;
-  position: relative;
-  &::after {
-    content: "";
-    position: absolute;
-    left: -2px;
-    right: 0;
-    height: 16px;
-    background-color: #ffffff;
-    top: -17px;
-  }
-  .anchor-link {
-    padding: 0 20px;
-    height: var(--el-tabs-header-height);
-    box-sizing: border-box;
-    list-style: none;
-    font-size: var(--el-font-size-base);
-    font-weight: bold;
-    color: var(--el-text-color-secondary);
-    position: relative;
-    height: 40px;
-    display: inline-block;
-    line-height: 40px;
-    cursor: pointer;
-    border-left: 1px solid transparent;
-    border-right: 1px solid transparent;
-  }
-  .active {
-    color: var(--el-color-primary);
-    background-color: var(--el-bg-color-overlay);
-    border-bottom: 1px solid var(--el-bg-color-overlay);
-    border-right-color: var(--el-border-color);
-    border-left: 1px solid var(--el-border-color-light);
-    border-right: 1px solid var(--el-border-color-light);
-    &:first-child {
-      border-left: 1px solid var(--el-fill-color-light);
-    }
-  }
-}
 </style>