feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

2026-09-12 14:18:41 +08:00
parent 16f365a045
commit c65a69c34e
401 changed files with 22932 additions and 140 deletions
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Aurora Admin · MergedCellTable</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="./MergedCellTable.css" />
+</head>
+<body>
+  <div class="aa-page">
+    <h2 class="aa-h2">MergedCellTable 合并单元格表格</h2>
+    <p class="aa-desc">按字段纵向合并相同内容单元格，合并后垂直居中，适用于报表 / 统计表。</p>
+
+    <div class="aa-demo">
+      <div class="aa-demo__title">部门销售额报表（部门列合并）</div>
+      <table class="aa-mergetable" id="mergetable">
+        <thead><tr><th>部门</th><th>季度</th><th>销售额(万)</th><th>负责人</th></tr></thead>
+        <tbody></tbody>
+      </table>
+    </div>
+  </div>
+
+  <script>
+    var data = [
+      { dept: '华东大区', q: 'Q1', sale: 120, owner: '王伟' },
+      { dept: '华东大区', q: 'Q2', sale: 135, owner: '王伟' },
+      { dept: '华东大区', q: 'Q3', sale: 150, owner: '王伟' },
+      { dept: '华南大区', q: 'Q1', sale: 90, owner: '李娜' },
+      { dept: '华南大区', q: 'Q2', sale: 110, owner: '李娜' },
+      { dept: '华北大区', q: 'Q1', sale: 80, owner: '张强' }
+    ];
+    var tbody = document.querySelector('#mergetable tbody');
+
+    // 计算连续相同 dept 的 rowspan
+    var spans = {};
+    var i = 0;
+    while (i < data.length) {
+      var j = i;
+      while (j + 1 < data.length && data[j + 1].dept === data[i].dept) j++;
+      spans[data[i].dept] = j - i + 1;
+      i = j + 1;
+    }
+
+    var html = '';
+    data.forEach(function (d, idx) {
+      var first = idx === 0 || data[idx - 1].dept !== d.dept;
+      html += '<tr>';
+      if (first) html += '<td class="aa-merged" rowspan="' + spans[d.dept] + '">' + d.dept + '</td>';
+      html += '<td>' + d.q + '</td><td>' + d.sale + '</td><td>' + d.owner + '</td></tr>';
+    });
+    tbody.innerHTML = html;
+  </script>
+</body>
+</html>
@@ -0,0 +1,48 @@
+import React from 'react';
+import './MergedCellTable.css';
+
+export default function MergedCellTable({ data = [], columns = [] }) {
+  const merged = data.map((row) => ({ ...row, _first: {}, _span: {} }));
+  columns.filter((c) => c.merge).forEach((c) => {
+    let i = 0;
+    while (i < merged.length) {
+      let j = i;
+      while (j + 1 < merged.length && merged[j + 1][c.key] === merged[i][c.key]) j++;
+      const span = j - i + 1;
+      for (let k = i; k <= j; k++) {
+        merged[k]._first[c.key] = k === i;
+        merged[k]._span[c.key] = span;
+      }
+      i = j + 1;
+    }
+  });
+
+  return (
+    <table className="aa-mergetable">
+      <thead>
+        <tr>
+          {columns.map((c) => (
+            <th key={c.key}>{c.title}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {merged.map((row, idx) => (
+          <tr key={idx}>
+            {columns.map((c) =>
+              !c.merge || row._first[c.key] ? (
+                <td
+                  key={c.key}
+                  className={c.merge && row._first[c.key] ? 'aa-merged' : ''}
+                  rowSpan={c.merge && row._first[c.key] ? row._span[c.key] : undefined}
+                >
+                  {row[c.key]}
+                </td>
+              ) : null
+            )}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
@@ -0,0 +1,56 @@
+<template>
+  <table class="aa-mergetable">
+    <thead>
+      <tr><th v-for="c in columns" :key="c.key">{{ c.title }}</th></tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, idx) in merged" :key="idx">
+        <td
+          v-for="c in columns"
+          :key="c.key"
+          :class="{ 'aa-merged': c.merge && row._first[c.key] }"
+          :rowspan="c.merge && row._first[c.key] ? row._span[c.key] : undefined"
+          v-if="!c.merge || row._first[c.key]"
+        >{{ row[c.key] }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  name: 'AaMergedCellTable',
+  props: {
+    data: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] }
+  },
+  computed: {
+    merged() {
+      var spans = {};
+      var first = {};
+      var result = this.data.map(function (row) {
+        var copy = Object.assign({}, row);
+        copy._first = {};
+        copy._span = {};
+        return copy;
+      });
+      this.columns.filter(function (c) { return c.merge; }).forEach(function (c) {
+        var i = 0;
+        while (i < result.length) {
+          var j = i;
+          while (j + 1 < result.length && result[j + 1][c.key] === result[i][c.key]) j++;
+          var span = j - i + 1;
+          for (var k = i; k <= j; k++) {
+            result[k]._first[c.key] = k === i;
+            result[k]._span[c.key] = span;
+          }
+          i = j + 1;
+        }
+      });
+      return result;
+    }
+  }
+};
+</script>
+
+<style src="./MergedCellTable.css"></style>
@@ -0,0 +1,47 @@
+<template>
+  <table class="aa-mergetable">
+    <thead>
+      <tr><th v-for="c in columns" :key="c.key">{{ c.title }}</th></tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, idx) in merged" :key="idx">
+        <template v-for="c in columns" :key="c.key">
+          <td
+            v-if="!c.merge || row._first[c.key]"
+            :class="{ 'aa-merged': c.merge && row._first[c.key] }"
+            :rowspan="c.merge && row._first[c.key] ? row._span[c.key] : undefined"
+          >{{ row[c.key] }}</td>
+        </template>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  data: { type: Array, default: () => [] },
+  columns: { type: Array, default: () => [] }
+});
+
+const merged = computed(() => {
+  const result = props.data.map((row) => ({ ...row, _first: {}, _span: {} }));
+  props.columns.filter((c) => c.merge).forEach((c) => {
+    let i = 0;
+    while (i < result.length) {
+      let j = i;
+      while (j + 1 < result.length && result[j + 1][c.key] === result[i][c.key]) j++;
+      const span = j - i + 1;
+      for (let k = i; k <= j; k++) {
+        result[k]._first[c.key] = k === i;
+        result[k]._span[c.key] = span;
+      }
+      i = j + 1;
+    }
+  });
+  return result;
+});
+</script>
+
+<style src="./MergedCellTable.css"></style>