From dd0bc8262b8bc31f6bfc4bbe7a060a8273b4e06c Mon Sep 17 00:00:00 2001
From: wuduoyi <wuduoyi@baidu.com>
Date: Wed, 20 Jul 2022 12:40:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20table-view=20=E7=9A=84=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E5=B1=9E=E6=80=A7=E6=94=AF=E6=8C=81=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/zh-CN/components/table-view.md         | 39 +++++++++++++++++++++
 packages/amis-core/src/utils/dataMapping.ts | 14 ++++++++
 packages/amis-core/src/utils/tpl-builtin.ts |  3 +-
 packages/amis/src/renderers/TableView.tsx   | 20 +++++++----
 4 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/docs/zh-CN/components/table-view.md b/docs/zh-CN/components/table-view.md
index 924d76738..ed7344afa 100644
--- a/docs/zh-CN/components/table-view.md
+++ b/docs/zh-CN/components/table-view.md
@@ -142,6 +142,45 @@ table view 的设置项有三层，可以分别对表格级别、行级别、单
 | rowspan    | `number`                                  |                | 单元格垂直跨几列                                                 |
 | body       | [SchemaNode](../../docs/types/schemanode) |                | 其它 amis 设置                                                   |
 
+### 支持变量及表达式
+
+> 2.1.0 及以上版本
+
+table-view 的所有属性都支持变量，比如下面的例子通过表达式实现了针对数据进行不同展示
+
+```schema
+{
+  "type": "page",
+  "title": "标题",
+  "data": {
+    "score": 40
+  },
+  "body": {
+    "type": "table-view",
+    "trs": [
+      {
+        "tds": [
+          {
+            "background": "${score>50 ? '#fef1d2': '#d7f8ff'}",
+            "body": {
+              "type": "tpl",
+              "tpl": "分数>50"
+            }
+          },
+          {
+            "background": "${score<100 ? '#fef1d2': '#d7f8ff'}",
+            "body": {
+              "type": "tpl",
+              "tpl": "分数<100"
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
 ### 列设置项
 
 列设置项主要是用于控制整列的样式，比如
diff --git a/packages/amis-core/src/utils/dataMapping.ts b/packages/amis-core/src/utils/dataMapping.ts
index e3f68f685..dbd20776a 100644
--- a/packages/amis-core/src/utils/dataMapping.ts
+++ b/packages/amis-core/src/utils/dataMapping.ts
@@ -17,6 +17,20 @@ export function resolveMapping(
     : value;
 }
 
+/**
+ * 遍历对象，对每个字符串 key 进行数据映射
+ * @param value 要映射的对象
+ * @param data 数据上下文
+ */
+export function resolveMappingObject(value: PlainObject, data: PlainObject) {
+  for (const key of Object.keys(value)) {
+    if (typeof value[key] === 'string') {
+      value[key] = resolveMapping(value[key], data);
+    }
+  }
+  return value;
+}
+
 export function dataMapping(
   to: any,
   from: PlainObject = {},
diff --git a/packages/amis-core/src/utils/tpl-builtin.ts b/packages/amis-core/src/utils/tpl-builtin.ts
index 2980b7370..751499a27 100644
--- a/packages/amis-core/src/utils/tpl-builtin.ts
+++ b/packages/amis-core/src/utils/tpl-builtin.ts
@@ -10,7 +10,7 @@ import {stripNumber} from './stripNumber';
 import {tokenize} from './tokenize';
 import {resolveVariable} from './resolveVariable';
 import {resolveVariableAndFilter} from './resolveVariableAndFilter';
-import {dataMapping, resolveMapping} from './dataMapping';
+import {dataMapping, resolveMapping, resolveMappingObject} from './dataMapping';
 import './filter'; // 扩充 formula 里面的 filter
 
 export {
@@ -29,6 +29,7 @@ export {
   resolveVariable,
   resolveVariableAndFilter,
   resolveMapping,
+  resolveMappingObject,
   dataMapping
 };
 
diff --git a/packages/amis/src/renderers/TableView.tsx b/packages/amis/src/renderers/TableView.tsx
index 26b72bba2..930f2e93a 100644
--- a/packages/amis/src/renderers/TableView.tsx
+++ b/packages/amis/src/renderers/TableView.tsx
@@ -3,9 +3,7 @@
  */
 
 import React from 'react';
-import {Renderer, RendererProps} from 'amis-core';
-import {Api, SchemaNode, Schema, ActionObject} from 'amis-core';
-import {isVisible} from 'amis-core';
+import {Renderer, RendererProps, resolveMappingObject} from 'amis-core';
 import {BaseSchema, SchemaObject} from '../Schema';
 
 // 为了方便编辑器，目前考虑不区分 th 和 td，但因为可以控制展现，所以能实现一样的效果，同时后续这个组件还承担复杂布局的功能，不适合用 th
@@ -209,7 +207,10 @@ export default class TableView extends React.Component<TableViewProps, object> {
   }
 
   renderTds(tds: TdObject[], rowIndex: number) {
-    return tds.map((td, colIndex) => this.renderTd(td, colIndex, rowIndex));
+    const {data} = this.props;
+    return tds.map((td, colIndex) =>
+      this.renderTd(resolveMappingObject(td, data), colIndex, rowIndex)
+    );
   }
 
   renderTr(tr: TrObject, rowIndex: number) {
@@ -225,14 +226,18 @@ export default class TableView extends React.Component<TableViewProps, object> {
   }
 
   renderTrs(trs: TrObject[]) {
-    const tr = trs.map((tr, rowIndex) => this.renderTr(tr, rowIndex));
+    const {data} = this.props;
+    const tr = trs.map((tr, rowIndex) =>
+      this.renderTr(resolveMappingObject(tr, data), rowIndex)
+    );
     return tr;
   }
 
   renderCols() {
-    const {cols} = this.props;
+    const {cols, data} = this.props;
     if (cols) {
       const colsElement = cols.map(col => {
+        col = resolveMappingObject(col, data);
         return <col span={col.span} style={col.style}></col>;
       });
       return <colgroup>{colsElement}</colgroup>;
@@ -282,6 +287,7 @@ export default class TableView extends React.Component<TableViewProps, object> {
 }
 
 @Renderer({
-  type: 'table-view'
+  type: 'table-view',
+  autoVar: true
 })
 export class TableViewRenderer extends TableView {}