@neatui/vue 5.1.0 → 5.1.2

package/src/components/loader/TableLoader/TableLoader.vue

@@ -101,14 +101,15 @@
             <td :colspan="columnCount" :style="virtualPadStyle(virtualSlice.padTop)"></td>
           </tr>
           <tr
-            v-for="{ item, idx } in virtualSlice.rows"
-            :key="rowKeyOf(item, idx)"
-            :ref="virtualEnabled ? (el: any) => bindVirtualRow(el, item) : undefined"
+            v-for="row in bodyRows"
+            :key="row.key"
+            :ref="virtualEnabled ? (el: any) => bindVirtualRow(el, row.item) : undefined"
             v-bind="rows.attrs"
-            v-on="event(rows.event, item, 'td')"
+            v-on="event(rows.event, row.item, 'td')"
+            :data-level="treeEnabled ? row.level : undefined"
           >
             <td v-if="selected" col-fixed="1" min-width :col-fixed-side="fixedSide('__select')" :style="fixedStyle('__select')">
-              <label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="item.__selected" /><span></span></label>
+              <label v-if="row.level === 1" class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="row.item.__selected" /><span></span></label>
             </td>
             <template v-for="(col, cid) in state.table" :key="cid">
               <td
@@ -119,12 +120,41 @@
                 :col-fixed-side="fixedSide(col.field)"
                 :style="fixedStyle(col.field)"
                 :data-field="col.field"
+                :data-tree="row.level > 1 && col.field === treeField ? 1 : undefined"
               >
-                <slot :name="col.field" :col="col" :item="item" :idx="idx"><TableRender :node="col" :data="item" /></slot>
+                <div v-if="treeEnabled && col.field === treeField && row.level === 1" class="table-tree-node" ui-flex="row lm">
+                  <i
+                    v-if="childrenOf(row.item).length"
+                    class="table-tree-toggle ux-none"
+                    :data-fold="row.item.__folding ? 1 : 0"
+                    @click.stop="row.item.__folding = !row.item.__folding"
+                  ></i>
+                  <i v-else class="table-tree-toggle-pad"></i>
+                  <slot :name="col.field" :col="col" :item="row.item" :idx="row.idx" :parent="row.parent" :level="1"><TableRender :node="col" :data="row.item" /></slot>
+                </div>
+                <div v-else-if="treeEnabled && col.field === treeField && row.level === 2" class="table-tree-child" :data-last="row.last ? 1 : 0">
+                  <div v-if="depth > 2" class="table-tree-node" ui-flex="row lm">
+                    <i
+                      v-if="childrenOf(row.item).length"
+                      class="table-tree-toggle ux-none"
+                      :data-fold="row.item.__folding ? 1 : 0"
+                      @click.stop="row.item.__folding = !row.item.__folding"
+                    ></i>
+                    <i v-else class="table-tree-toggle-pad"></i>
+                    <slot :name="col.field" :col="col" :item="row.item" :idx="row.idx" :parent="row.parent" :level="2"><TableRender v-if="childHas(col, row.item)" :node="col" :data="row.item" /></slot>
+                  </div>
+                  <slot v-else :name="col.field" :col="col" :item="row.item" :idx="row.idx" :parent="row.parent" :level="2"><TableRender v-if="childHas(col, row.item)" :node="col" :data="row.item" /></slot>
+                </div>
+                <div v-else-if="treeEnabled && col.field === treeField" class="table-tree-child" data-pass="1" :data-last="row.parentLast ? 1 : 0">
+                  <div class="table-tree-child" :data-last="row.last ? 1 : 0">
+                    <slot :name="col.field" :col="col" :item="row.item" :idx="row.idx" :parent="row.parent" :level="row.level"><TableRender v-if="childHas(col, row.item)" :node="col" :data="row.item" /></slot>
+                  </div>
+                </div>
+                <slot v-else :name="col.field" :col="col" :item="row.item" :idx="row.idx" :parent="row.parent" :level="row.level"><TableRender v-if="row.level === 1 || childHas(col, row.item)" :node="col" :data="row.item" /></slot>
               </td>
             </template>
             <td v-if="slots.operate" col-fixed="r" class="ar" :col-fixed-side="fixedSide('__operate')" :style="fixedStyle('__operate')">
-              <slot name="operate" :item="item" :idx="idx"></slot>
+              <slot name="operate" :item="row.item" :idx="row.idx" :parent="row.parent" :level="row.level"></slot>
             </td>
           </tr>
           <tr v-if="virtualSlice.padBottom" class="table-virtual-pad" aria-hidden="true">
@@ -158,21 +188,71 @@
             </IFollowView>
           </div>
         </li>
-        <li v-for="(item, idx) in lists" :key="rowKeyOf(item, idx)" class="bg-fore r-sm my-sl n-ms">
-          <table>
-            <tbody>
-              <template v-for="(col, idx) in state.table" :key="idx">
-                <tr v-if="!col.__close">
-                  <td class="nowrap vt n-ss">{{ col.label }}:</td>
-                  <td class="n-ss">
-                    <TableRender :node="col" :data="item" />
-                  </td>
-                </tr>
+        <template v-for="(item, idx) in lists" :key="rowKeyOf(item, idx)">
+          <li class="bg-fore r-sm my-sl n-ms">
+            <table>
+              <tbody>
+                <template v-for="(col, cid) in state.table" :key="cid">
+                  <tr v-if="!col.__close">
+                    <td class="nowrap vt n-ss">{{ col.label }}:</td>
+                    <td class="n-ss">
+                      <TableRender :node="col" :data="item" />
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+            <div v-if="slots.operate"><slot name="operate" :item="item" :idx="idx" :parent="noParent" :level="1"></slot></div>
+            <p v-if="treeEnabled && childrenOf(item).length" class="mt-ss">
+              <span class="ux-none co-main fs-sm" @click="item.__folding = !item.__folding">
+                {{ item.__folding ? words['common.expand'] || '展开' : words['common.collapse'] || '收起' }}
+              </span>
+            </p>
+          </li>
+          <template v-if="treeEnabled && !item.__folding">
+            <template v-for="(child, cidx) in childrenOf(item)" :key="`${rowKeyOf(item, idx)}-${cidx}`">
+              <li v-if="childVisible(child)" class="table-tree-item bg-fore r-sm my-sl n-ms">
+                <table>
+                  <tbody>
+                    <template v-for="(col, cid) in state.table" :key="cid">
+                      <tr v-if="!col.__close && childHas(col, child)">
+                        <td class="nowrap vt n-ss">{{ col.label }}:</td>
+                        <td class="n-ss">
+                          <TableRender :node="col" :data="child" />
+                        </td>
+                      </tr>
+                    </template>
+                  </tbody>
+                </table>
+                <div v-if="slots.operate"><slot name="operate" :item="child" :idx="cidx" :parent="item" :level="2"></slot></div>
+                <p v-if="depth > 2 && childrenOf(child).length" class="mt-ss">
+                  <span class="ux-none co-main fs-sm" @click="child.__folding = !child.__folding">
+                    {{ child.__folding ? words['common.expand'] || '展开' : words['common.collapse'] || '收起' }}
+                  </span>
+                </p>
+              </li>
+              <template v-if="depth > 2 && !child.__folding">
+                <template v-for="(grand, gidx) in childrenOf(child)" :key="`${rowKeyOf(item, idx)}-${cidx}-${gidx}`">
+                  <li v-if="childVisible(grand)" class="table-tree-item table-tree-item-3 bg-fore r-sm my-sl n-ms">
+                    <table>
+                      <tbody>
+                        <template v-for="(col, cid) in state.table" :key="cid">
+                          <tr v-if="!col.__close && childHas(col, grand)">
+                            <td class="nowrap vt n-ss">{{ col.label }}:</td>
+                            <td class="n-ss">
+                              <TableRender :node="col" :data="grand" />
+                            </td>
+                          </tr>
+                        </template>
+                      </tbody>
+                    </table>
+                    <div v-if="slots.operate"><slot name="operate" :item="grand" :idx="gidx" :parent="child" :level="3"></slot></div>
+                  </li>
+                </template>
               </template>
-            </tbody>
-          </table>
-          <div v-if="slots.operate"><slot name="operate" :item="item" :idx="idx"></slot></div>
-        </li>
+            </template>
+          </template>
+        </template>
       </ul>
     </div>
     <div v-if="!lists.length" class="ny-ls o-mm" ui-flex="col cm">
@@ -245,6 +325,12 @@
     rowKey?: string | ((item: any, idx: number) => string | number);
     /** 虚拟滚动（仅表格形态）：只渲染可视区附近的行，需要容器限定高度 */
     virtual?: boolean | { estimate?: number; overscan?: number };
+    /** 子行：字段名或函数，返回子行数组；子行沿用同一套列和插槽，折叠状态记在行的 __folding 上 */
+    children?: string | ((item: any) => any[]);
+    /** 折叠按钮和树线所在列的 field，默认第一个可见的非固定列 */
+    tree?: string;
+    /** 树的层数：默认 2（父行 + 子行）；3 时子行再按 children 取第三层 */
+    depth?: number;
   }
   // 外部入参
   const props: any = withDefaults(defineProps<Props>(), {
@@ -258,6 +344,7 @@
     allSelected: false,
     layout: 'auto',
     virtual: false,
+    depth: 2,
   });
 
   /**
@@ -347,7 +434,7 @@
   watch(
     () => props.table,
     () => {
-      const _cache = env.client ? JSON.parse(window.localStorage.getItem(`${name}_table`) || '{}') : {};
+      const _cache = env.client ? JSON.parse(window.localStorage.getItem(`${name.value}_table`) || '{}') : {};
       state.__last = 0;
       state.table = deepcopy(props.table || [])
         ?.map((col: TableColumn, idx: number) => {
@@ -426,7 +513,7 @@
           state.__last = idx;
         }
       });
-      if (env.client) window.localStorage.setItem(`${name}_table`, JSON.stringify(_table));
+      if (env.client) window.localStorage.setItem(`${name.value}_table`, JSON.stringify(_table));
     },
     { deep: true },
   );
@@ -540,6 +627,25 @@
     fixedCells.clear();
   });
 
+  // 子行
+  const treeEnabled = computed(() => !!props.children);
+  const childrenOf = (item: any): any[] => {
+    const key = props.children;
+    const list = isFunction(key) ? key(item) : key && item ? item[key] : undefined;
+    return Array.isArray(list) ? list : [];
+  };
+  // 父行的 parent 为空；声明成 any，插槽里两层行的 parent 类型才一致
+  const noParent: any = undefined;
+  // 子行常常只有部分字段，没有的列留空，不显示占位符
+  const childHas = (col: TableColumn, child: any) =>
+    (!!child && typeof child === 'object' && hasOwnProp(child, col.field)) || (col.value !== undefined && col.value !== null) || !!(col as any).child || !!(col as any).popup;
+  const childVisible = (child: any) => state.table.some((col) => !col.__close && childHas(col, child));
+  const treeField = computed(() => {
+    if (props.tree) return props.tree;
+    const visible = state.table.filter((col) => !col.__close);
+    return (visible.find((col) => !col.fixed) || visible[0])?.field;
+  });
+
   // 行标识
   const rowKeyOf = (item: any, idx: number) => {
     const key = props.rowKey;
@@ -553,7 +659,8 @@
    * 行高各不相同（单元格可能换行、放表单控件），按行对象缓存实测高度，
    * 没测过的按已测平均值估算；行对象不变则删行、排序后缓存仍有效。
    */
-  const virtualEnabled = computed(() => !!props.virtual);
+  // 行高按父行测量，展开的子行会让偏移失真，开了子行就不走虚拟滚动
+  const virtualEnabled = computed(() => !!props.virtual && !props.children);
   const virtualEstimate = computed(() => (isObject(props.virtual) && props.virtual.estimate) || 48);
   const virtualOverscan = computed(() => (isObject(props.virtual) && props.virtual.overscan) || 600);
   const scrollTop = ref(0);
@@ -586,6 +693,30 @@
     return { rows, padTop: offsets[start] || 0, padBottom: Math.max(0, offsets[offsets.length - 1] - (offsets[end] || 0)) };
   });
 
+  /** 桌面表格逐行渲染：开了子行时把树按展开状态摊平，记下层级、上级和是否同级最后一行（画树线用） */
+  const bodyRows = computed(() => {
+    if (!treeEnabled.value) {
+      return virtualSlice.value.rows.map(({ item, idx }: any) => ({ item, idx, level: 1, parent: noParent, key: rowKeyOf(item, idx), last: false, parentLast: false }));
+    }
+    const out: any[] = [];
+    props.lists.forEach((item: any, idx: number) => {
+      const key = rowKeyOf(item, idx);
+      out.push({ item, idx, level: 1, parent: noParent, key, last: false, parentLast: false });
+      if (item?.__folding) return;
+      const kids = childrenOf(item);
+      kids.forEach((child, cidx) => {
+        const last = cidx === kids.length - 1;
+        out.push({ item: child, idx: cidx, level: 2, parent: item, key: `${key}-${cidx}`, last, parentLast: false });
+        if (props.depth < 3 || child?.__folding) return;
+        const grand = childrenOf(child);
+        grand.forEach((g, gidx) => {
+          out.push({ item: g, idx: gidx, level: 3, parent: child, key: `${key}-${cidx}-${gidx}`, last: gidx === grand.length - 1, parentLast: last });
+        });
+      });
+    });
+    return out;
+  });
+
   let scrollFrame = 0;
   const onVirtualScroll = () => {
     if (!virtualEnabled.value || scrollFrame) return;
@@ -706,3 +837,81 @@
     return { ..._event };
   };
 </script>
+<style lang="scss" scoped>
+  .table-tree-node {
+    flex-wrap: nowrap;
+  }
+  .table-tree-toggle,
+  .table-tree-toggle-pad {
+    flex: none;
+    position: relative;
+    width: 1em;
+    height: 1em;
+    margin-right: 0.25em;
+  }
+  .table-tree-toggle {
+    cursor: pointer;
+    &::after {
+      position: absolute;
+      content: '';
+      top: 50%;
+      left: 50%;
+      border-width: 0.35em 0 0.35em 0.35em;
+      border-style: solid;
+      border-color: transparent transparent transparent currentColor;
+      border-radius: 30%;
+      transform: translate(-30%, -50%) rotate(90deg);
+      transition: transform 0.25s;
+    }
+    &[data-fold='1']::after {
+      transform: translate(-30%, -50%) rotate(0deg);
+    }
+  }
+
+  // 树线画在内层，纵向裁到单元格高度，横向不裁，固定列的阴影照常显示
+  td[data-tree] {
+    clip-path: inset(0 -100vw);
+    &:not([col-fixed]) {
+      position: relative;
+    }
+  }
+  .table-tree-child {
+    position: relative;
+    padding-left: 1.75em;
+    &::before,
+    &::after {
+      position: absolute;
+      content: '';
+      left: 0.5em;
+      background: var(--co-line);
+    }
+    &::before {
+      width: 1px;
+      top: -100vh;
+      bottom: -100vh;
+    }
+    &[data-last='1']::before {
+      bottom: 50%;
+    }
+    &::after {
+      width: 0.85em;
+      height: 1px;
+      top: 50%;
+    }
+  }
+  // 第三层：外层只画上一层的竖线（上一层是最后一行就不画），内层画自己的
+  .table-tree-child[data-pass='1'] {
+    &::after {
+      display: none;
+    }
+    &[data-last='1']::before {
+      display: none;
+    }
+  }
+  .table-tree-item {
+    margin-left: 1.5em;
+  }
+  .table-tree-item-3 {
+    margin-left: 3em;
+  }
+</style>