fix: 修复 mapping 结合其他组件兜底显示时取值错误 Close: #9613

packages/amis/__tests__/renderers/Mapping.test.tsx

@@ -1,27 +1,23 @@
 import {render} from '@testing-library/react';
 import '../../src';
 import {render as amisRender} from '../../src';
-import {makeEnv} from '../helper';
+import {makeEnv, wait} from '../helper';
 
-const tag = (label: string) => render(
+const tag = (label: string) =>
-  amisRender(
+  render(amisRender({type: 'tag', label}, {}, makeEnv({}))).container;
-    {type: 'tag', label},
-    {},
-    makeEnv({})
-  )
-).container;
 
 test('Renderer:mapping width object map', async () => {
-  const setup = (value?: any) => render(
+  const setup = (value?: any) =>
+    render(
       amisRender(
         {
           type: 'mapping',
           map: {
-          1: "漂亮",
+            1: '漂亮',
-          2: "开心",
+            2: '开心',
-          3: "惊吓",
+            3: '惊吓',
-          4: "紧张",
+            4: '紧张',
-          '*': '其他',
+            '*': '其他'
           },
           ...(value !== undefined ? {value} : {})
         },
@@ -30,26 +26,33 @@ test('Renderer:mapping width object map', async () => {
       )
     ).container;
 
-  const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+  const noValue = setup().querySelector(
+    '.cxd-MappingField .text-muted'
+  )! as HTMLElement;
   expect(noValue.innerHTML).toBe('-');
 
-  const value1 = setup(1).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+  const value1 = setup(1).querySelector(
+    '.cxd-MappingField .cxd-TplField span'
+  )! as HTMLElement;
   expect(value1.innerHTML).toBe('漂亮');
 
-  const value5 = setup(5).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+  const value5 = setup(5).querySelector(
+    '.cxd-MappingField .cxd-TplField span'
+  )! as HTMLElement;
   expect(value5.innerHTML).toBe('其他');
 });
 
 test('Renderer:mapping width array map', async () => {
-  const setup = (value?: any) => render(
+  const setup = (value?: any) =>
+    render(
       amisRender(
         {
           type: 'mapping',
           map: [
-          {1: "漂亮"},
+            {1: '漂亮'},
-          {2: "开心"},
+            {2: '开心'},
-          {3: "惊吓"},
+            {3: '惊吓'},
-          {4: "紧张"},
+            {4: '紧张'},
             {'*': '其他'}
           ],
           ...(value !== undefined ? {value} : {})
@@ -59,18 +62,25 @@ test('Renderer:mapping width array map', async () => {
       )
     ).container;
 
-  const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+  const noValue = setup().querySelector(
+    '.cxd-MappingField .text-muted'
+  )! as HTMLElement;
   expect(noValue.innerHTML).toBe('-');
 
-  const value1 = setup(1).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+  const value1 = setup(1).querySelector(
+    '.cxd-MappingField .cxd-TplField span'
+  )! as HTMLElement;
   expect(value1.innerHTML).toBe('漂亮');
 
-  const value5 = setup(5).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+  const value5 = setup(5).querySelector(
+    '.cxd-MappingField .cxd-TplField span'
+  )! as HTMLElement;
   expect(value5.innerHTML).toBe('其他');
 });
 
 test('Renderer:mapping attr: valueField and labelField', async () => {
-  const setup = (value?: any) => render(
+  const setup = (value?: any) =>
+    render(
       amisRender(
         {
           type: 'mapping',
@@ -97,26 +107,33 @@ test('Renderer:mapping attr: valueField and labelField', async () => {
       )
     ).container;
 
-  const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+  const noValue = setup().querySelector(
+    '.cxd-MappingField .text-muted'
+  )! as HTMLElement;
   expect(noValue.innerHTML).toBe('-');
 
-  const value1 = setup(1).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+  const value1 = setup(1).querySelector(
+    '.cxd-MappingField .cxd-TplField span'
+  )! as HTMLElement;
   expect(value1.innerHTML).toBe('漂亮');
 
-  const value5 = setup(5).querySelector('.cxd-MappingField .cxd-TplField span')! as HTMLElement;
+  const value5 = setup(5).querySelector(
+    '.cxd-MappingField .cxd-TplField span'
+  )! as HTMLElement;
   expect(value5.innerHTML).toBe('其他');
 });
 
 test('Renderer:mapping attr: itemSchema when simple map', async () => {
-  const setup = (value?: any) => render(
+  const setup = (value?: any) =>
+    render(
       amisRender(
         {
           type: 'mapping',
           map: [
-          {1: "漂亮"},
+            {1: '漂亮'},
-          {2: "开心"},
+            {2: '开心'},
-          {3: "惊吓"},
+            {3: '惊吓'},
-          {4: "紧张"},
+            {4: '紧张'},
             {'*': '其他'}
           ],
           valueField: 'name',
@@ -131,7 +148,9 @@ test('Renderer:mapping attr: itemSchema when simple map', async () => {
       )
     ).container;
 
-  const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+  const noValue = setup().querySelector(
+    '.cxd-MappingField .text-muted'
+  )! as HTMLElement;
   expect(noValue.innerHTML).toBe('-');
 
   const value1 = setup(1).querySelector('.cxd-MappingField')! as HTMLElement;
@@ -142,7 +161,8 @@ test('Renderer:mapping attr: itemSchema when simple map', async () => {
 });
 
 test('Renderer:mapping attr: itemSchema when normal map', async () => {
-  const setup = (value?: any) => render(
+  const setup = (value?: any) =>
+    render(
       amisRender(
         {
           type: 'mapping',
@@ -172,7 +192,9 @@ test('Renderer:mapping attr: itemSchema when normal map', async () => {
       )
     ).container;
 
-  const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+  const noValue = setup().querySelector(
+    '.cxd-MappingField .text-muted'
+  )! as HTMLElement;
   expect(noValue.innerHTML).toBe('-');
 
   const value1 = setup(1).querySelector('.cxd-MappingField')! as HTMLElement;
@@ -204,7 +226,8 @@ test('Renderer:mapping', async () => {
 });
 
 test('Renderer:mapping html', async () => {
-  const setup = (value?: any) => render(
+  const setup = (value?: any) =>
+    render(
       amisRender(
         {
           type: 'mapping',
@@ -228,7 +251,8 @@ test('Renderer:mapping html', async () => {
 });
 
 test('Renderer:mapping schema', async () => {
-  const setup = (value?: any) => render(
+  const setup = (value?: any) =>
+    render(
       amisRender(
         {
           type: 'mapping',
@@ -246,7 +270,9 @@ test('Renderer:mapping schema', async () => {
       )
     ).container;
 
-  const noValue = setup().querySelector('.cxd-MappingField .text-muted')! as HTMLElement;
+  const noValue = setup().querySelector(
+    '.cxd-MappingField .text-muted'
+  )! as HTMLElement;
   expect(noValue.innerHTML).toBe('-');
 
   const value1 = setup(1).querySelector('.cxd-MappingField')! as HTMLElement;
@@ -255,3 +281,68 @@ test('Renderer:mapping schema', async () => {
   const value5 = setup(5).querySelector('.cxd-MappingField')! as HTMLElement;
   expect(value5.innerHTML).toBe(tag('其他').innerHTML);
 });
+
+// 对应 issue https://github.com/baidu/amis/issues/9613
+test('Renderer:mapping schema status', async () => {
+  const {container, getByText} = render(
+    amisRender(
+      {
+        type: 'page',
+        data: {
+          items: [
+            {
+              status: 1,
+              id: 1
+            }
+          ]
+        },
+        body: [
+          {
+            type: 'table',
+            title: '表格',
+            columns: [
+              {
+                name: 'id',
+                label: 'ID'
+              },
+              {
+                name: 'status',
+                label: '状态2',
+                type: 'mapping',
+                map: {
+                  '*': {
+                    type: 'status',
+                    map: {
+                      '0': 'schedule',
+                      '1': 'rolling',
+                      '2': 'success',
+                      '3': 'fail',
+                      '4': 'warning'
+                    },
+                    labelMap: {
+                      '2': '任务成功',
+                      '1': '处理中',
+                      '3': '异常终止',
+                      '0': '等待中',
+                      '4': '已过期'
+                    }
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {},
+      makeEnv({})
+    )
+  );
+
+  await wait(200);
+
+  expect(
+    [].slice
+      .call(container.querySelectorAll('tbody td'))
+      .map((td: any) => td.textContent)
+  ).toEqual(['1', '处理中']);
+});

packages/amis/src/renderers/Mapping.tsx

@@ -253,7 +253,7 @@ export const MappingField = withStore(props =>
     }
 
     renderViewValue(value: any) {
-      const {render, itemSchema, data, labelField} = this.props;
+      const {render, itemSchema, data, labelField, name} = this.props;
 
       if (!itemSchema) {
         let label = value;
@@ -265,6 +265,12 @@ export const MappingField = withStore(props =>
               // object 也没有 type，不能作为schema渲染
               // 默认取 label 字段
               label = value['label'];
+            } else {
+              // 不会下发 value 了，所以要把 name 下发一下
+              label = {
+                name,
+                ...label
+              };
             }
           } else {
             label = value[labelField || 'label'];