fix(dueros): dueros form

src/pages/Northbound/DuerOS/Detail/Doc.tsx

@@ -1,3 +1,7 @@
+import { Image } from 'antd';
+
+const image = require('/public/images/cloud/dueros-doc.jpg');
+
 const Doc = () => {
   return (
     <div className="doc">
@@ -14,6 +18,9 @@ const Doc = () => {
       <h1>2. 操作步骤</h1>
       <div>
         <h2>1、在百度小度技能平台创建技能，并授权。完成物联网平台与dueros的关联。</h2>
+        <div className={'image'}>
+          <Image width="100%" src={image} />
+        </div>
         <h2>2、登录物联网平台，进行平台内产品与dueros产品的数据映射。</h2>
         <h2>
           3、智能家居用户通过物联网平台中的用户，登录小度APP，获取平台内当前用户的所属设备。获取后即可进行语音控制。

src/pages/Northbound/DuerOS/Detail/index.tsx

@@ -15,7 +15,14 @@ import {
 } from '@formily/antd';
 import { PermissionButton } from '@/components';
 import { useMemo } from 'react';
-import { createForm, Field, onFieldReact, onFieldValueChange, onFormInit } from '@formily/core';
+import {
+  createForm,
+  Field,
+  FormPath,
+  onFieldReact,
+  onFieldValueChange,
+  onFormInit,
+} from '@formily/core';
 import { useAsyncDataSource } from '@/utils/util';
 import { service } from '..';
 import { Store } from 'jetlinks-store';
@@ -80,9 +87,24 @@ const Save = () => {
             }
             form1.setInitialValues(_data);
           });
-          onFieldReact('actionMappings.*.layout.action', (field) => {
+          onFieldReact('actionMappings.*.layout.action', (field, f) => {
             const productType = field.query('applianceType').value();
-            (field as Field).setDataSource(findApplianceType(productType)?.actions);
+            const actions = findApplianceType(productType)?.actions;
+            (field as Field).setDataSource(actions);
+
+            const actionPath = FormPath.transform(
+              field.path,
+              /\d+/,
+              (index) => `actionMappings.${index}`,
+            );
+            const value = (field as Field).value;
+
+            const title = actions.find((item: any) => item.id === value)?.name;
+            f.setFieldState(actionPath, (state) => {
+              state.componentProps = {
+                header: title || '动作映射',
+              };
+            });
           });
           onFieldReact('actionMappings.*.layout.command.message.properties', (field) => {
             const product = field.query('id').value();
@@ -109,9 +131,22 @@ const Save = () => {
               });
             },
           );
-          onFieldReact('propertyMappings.*.layout.source', (field) => {
+          onFieldReact('propertyMappings.*.layout.source', (field, f) => {
             const productType = field.query('applianceType').value();
-            (field as Field).setDataSource(findApplianceType(productType)?.properties);
+            const propertiesList = findApplianceType(productType)?.properties;
+            (field as Field).setDataSource();
+            const propertyMappingPath = FormPath.transform(
+              field.path,
+              /\d+/,
+              (index) => `propertyMappings.${index}`,
+            );
+            const value = (field as Field).value;
+            const title = propertiesList.find((item: any) => item.id === value)?.name;
+            f.setFieldState(propertyMappingPath, (state) => {
+              state.componentProps = {
+                header: title || '动作映射',
+              };
+            });
           });
           onFieldReact('propertyMappings.*.layout.target', (field) => {
             const product = field.query('id').value();
@@ -143,7 +178,7 @@ const Save = () => {
     const index = checked.findIndex((i) => i === f.value);
     checked.splice(index, 1);
     const _productType = form.getValuesIn('applianceType');
-    const targetList = findApplianceType(_productType?.value)?.properties;
+    const targetList = findApplianceType(_productType)?.properties;
     const list = targetList?.filter((i: { id: string }) => !checked.includes(i.id));
     return new Promise((resolve) => resolve(list));
   };