From 5b361e135bd89ef5cf3b5406f5c1dc40b1441b84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= <wuduoyi@baidu.com>
Date: Mon, 13 May 2024 14:56:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Table=20View=20=E7=9A=84=E8=A1=8C?=
 =?UTF-8?q?=E5=92=8C=E5=88=97=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=20visibl?=
 =?UTF-8?q?eOn=20Closes=20#9621=20(#10222)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/zh-CN/components/table-view.md           | 88 +++++++++++++++++++
 .../__tests__/renderers/TableView.test.tsx    | 64 ++++++++++++++
 .../__snapshots__/TableView.test.tsx.snap     | 44 ++++++++++
 packages/amis/src/renderers/TableView.tsx     | 24 +++--
 4 files changed, 212 insertions(+), 8 deletions(-)

diff --git a/docs/zh-CN/components/table-view.md b/docs/zh-CN/components/table-view.md
index 863d390ec..74e6a18dc 100644
--- a/docs/zh-CN/components/table-view.md
+++ b/docs/zh-CN/components/table-view.md
@@ -353,6 +353,94 @@ table-view 的所有属性都支持变量，比如下面的例子通过表达式
 }
 ```
 
+### tr 和 td 支持 visibleOn
+
+> 6.5 及以后版本
+
+可以在行和列上配置 visibleOn 或 hiddenOn 属性来实现根据数据动态渲染界面。
+
+```schema: scope="body"
+{
+  "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "body": [
+      {
+        "name": "firstRow",
+        "type": "switch",
+        "label": "显示第一行",
+        "value": true,
+      },
+      {
+        "name": "displayBeijing",
+        "type": "switch",
+        "label": "显示北京",
+        "value": true,
+      },
+      {
+        "type": "table-view",
+        "trs": [
+          {
+            "background": "#F7F7F7",
+            "visibleOn": "firstRow",
+            "tds": [
+              {
+                "body": {
+                  "type": "tpl",
+                  "tpl": "地区"
+                }
+              },
+              {
+                "body": {
+                  "type": "tpl",
+                  "tpl": "城市"
+                }
+              },
+              {
+                "body": {
+                  "type": "tpl",
+                  "tpl": "销量"
+                }
+              }
+            ]
+          },
+          {
+            "tds": [
+              {
+                "body": {
+                  "type": "tpl",
+                  "tpl": ""
+                },
+                "style": {
+                  "borderBottomWidth": 0,
+                  "borderLeftWidth": 0
+                }
+              },
+              {
+                "visibleOn": "displayBeijing",
+                "body": {
+                  "type": "tpl",
+                  "tpl": "北京"
+                }
+              },
+              {
+                "body": {
+                  "type": "tpl",
+                  "tpl": ""
+                },
+                "style": {
+                  "borderBottomWidth": 0,
+                  "borderRightWidth": 0
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+}
+
+```
+
 ## 作为布局方法
 
 table-view 除了可以用来展现表格类型的数据，还能用来实现复杂布局效果，只需要将 `border` 隐藏就行，除了拆分单元格还能通过嵌套的方式实现布局，比如：
diff --git a/packages/amis/__tests__/renderers/TableView.test.tsx b/packages/amis/__tests__/renderers/TableView.test.tsx
index dba21a468..5d8758261 100644
--- a/packages/amis/__tests__/renderers/TableView.test.tsx
+++ b/packages/amis/__tests__/renderers/TableView.test.tsx
@@ -200,3 +200,67 @@ test('Renderer:tableview layout', () => {
 
   expect(container).toMatchSnapshot();
 });
+
+test('Renderer:tableview visibleOn', () => {
+  const {container} = render(
+    amisRender(
+      {
+        type: 'page',
+        body: {
+          type: 'table-view',
+          trs: [
+            {
+              background: '#F7F7F7',
+              visibleOn: 'false',
+              tds: [
+                {
+                  body: {
+                    type: 'tpl',
+                    tpl: '地区'
+                  }
+                },
+                {
+                  body: {
+                    type: 'tpl',
+                    tpl: '城市'
+                  }
+                },
+                {
+                  body: {
+                    type: 'tpl',
+                    tpl: '销量'
+                  }
+                }
+              ]
+            },
+            {
+              tds: [
+                {
+                  body: {
+                    type: 'tpl',
+                    tpl: ''
+                  },
+                  style: {
+                    borderBottomWidth: 0,
+                    borderLeftWidth: 0
+                  }
+                },
+                {
+                  visibleOn: 'false',
+                  body: {
+                    type: 'tpl',
+                    tpl: '北京'
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      },
+      {},
+      makeEnv({})
+    )
+  );
+
+  expect(container).toMatchSnapshot();
+});
diff --git a/packages/amis/__tests__/renderers/__snapshots__/TableView.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/TableView.test.tsx.snap
index 3a697d564..4a130090c 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/TableView.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/TableView.test.tsx.snap
@@ -270,3 +270,47 @@ exports[`Renderer:tableview layout 1`] = `
   </div>
 </div>
 `;
+
+exports[`Renderer:tableview visibleOn 1`] = `
+<div>
+  <div
+    class="cxd-Page"
+  >
+    <div
+      class="cxd-Page-content"
+    >
+      <div
+        class="cxd-Page-main"
+      >
+        <div
+          class="cxd-Page-body"
+          role="page-body"
+        >
+          <table
+            class="cxd-TableView"
+            style="width: 100%; border-collapse: collapse;"
+          >
+            <tbody>
+              <tr>
+                <td
+                  style="font-weight: normal; width: auto; text-align: left; vertical-align: center; border-bottom-width: 0; border-left-width: 0;"
+                >
+                  <span
+                    class="cxd-TplField"
+                  >
+                    <span>
+                      <span
+                        class="text-muted"
+                      />
+                    </span>
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/amis/src/renderers/TableView.tsx b/packages/amis/src/renderers/TableView.tsx
index d666d071d..12a97f425 100644
--- a/packages/amis/src/renderers/TableView.tsx
+++ b/packages/amis/src/renderers/TableView.tsx
@@ -8,7 +8,8 @@ import {
   RendererProps,
   resolveMappingObject,
   CustomStyle,
-  setThemeClassName
+  setThemeClassName,
+  isVisible
 } from 'amis-core';
 import {BaseSchema, SchemaObject} from '../Schema';
 
@@ -68,6 +69,10 @@ export type TdObject = {
    * 自定义样式
    */
   style?: object;
+
+  visibleOn?: string;
+
+  hiddenOn?: string;
 };
 
 /**
@@ -90,6 +95,10 @@ export type TrObject = {
   tds: TdObject[];
 
   style?: object;
+
+  visibleOn?: string;
+
+  hiddenOn?: string;
 };
 
 /**
@@ -177,13 +186,13 @@ export default class TableView extends React.Component<TableViewProps, object> {
   }
 
   renderTd(td: TdObject, colIndex: number, rowIndex: number) {
-    const {border, borderColor, render, style, padding} = this.props;
+    const {border, borderColor, render, data, padding} = this.props;
     const key = `td-${colIndex}`;
     let styleBorder;
     if (border) {
       styleBorder = `1px solid ${borderColor}`;
     }
-    return (
+    return isVisible(td, data) ? (
       <td
         style={{
           border: styleBorder,
@@ -204,7 +213,7 @@ export default class TableView extends React.Component<TableViewProps, object> {
       >
         {this.renderTdBody(td.body)}
       </td>
-    );
+    ) : null;
   }
 
   renderTdBody(body?: SchemaObject) {
@@ -221,14 +230,15 @@ export default class TableView extends React.Component<TableViewProps, object> {
 
   renderTr(tr: TrObject, rowIndex: number) {
     const key = `tr-${rowIndex}`;
-    return (
+    const {data} = this.props;
+    return isVisible(tr, data) ? (
       <tr
         style={{height: tr.height, background: tr.background, ...tr.style}}
         key={key}
       >
         {this.renderTds(tr.tds || [], rowIndex)}
       </tr>
-    );
+    ) : null;
   }
 
   renderTrs(trs: TrObject[]) {
@@ -276,8 +286,6 @@ export default class TableView extends React.Component<TableViewProps, object> {
       wrapperCustomStyle,
       env,
       themeCss,
-      testid,
-      baseControlClassName,
       style
     } = this.props;