feat: 场景联动服务调用新增根据物模型服务配置下发参数表单

@@ -40,6 +40,7 @@ import StructForm from './externalCompns/components/StructForm/StructForm.vue';
 import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
 import TransferModal from './components/TransferModal.vue';
 import TransferTableModal from './components/TransferTableModal.vue';
+import ObjectModelValidateForm from './externalCompns/components/ObjectModelValidateForm/ObjectModelValidateForm.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -87,6 +88,7 @@ componentMap.set('StructForm', StructForm);
 componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
 componentMap.set('TransferModal', TransferModal);
 componentMap.set('TransferTableModal', TransferTableModal);
+componentMap.set('ObjectModelValidateForm', ObjectModelValidateForm);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

+<script lang="ts" setup>
+  import { Card } from 'ant-design-vue';
+  import { nextTick, onBeforeUpdate, onUpdated } from 'vue';
+  import { DataTypeEnum } from '../StructForm/config';
+  import { BasicCreateFormParams } from './type';
+  import { DynamicProps } from '/#/utils';
+  import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
+  import { BasicForm, FormProps, FormSchema, useForm } from '/@/components/Form';
+
+  const props = withDefaults(
+    defineProps<{
+      inputData?: StructJSON[];
+      formProps?: FormProps;
+      value?: Recordable;
+    }>(),
+    {
+      inputData: () => [] as StructJSON[],
+      formProps: () => ({}),
+      value: () => ({}),
+    }
+  );
+
+  const emit = defineEmits(['update:value']);
+
+  const [register, { setProps, getFieldsValue, setFieldsValue }] = useForm({
+    schemas: [],
+    showActionButtonGroup: false,
+    layout: 'inline',
+    labelWidth: 80,
+    wrapperCol: { span: 12 },
+    ...(props.formProps || ({} as unknown as Partial<DynamicProps<FormProps>>)),
+  });
+
+  const syncValue = (key: string, value: any) => {
+    const record = getFieldsValue();
+    emit('update:value', { ...record, [key]: value });
+  };
+
+  const createInputNumber = ({
+    identifier,
+    functionName,
+    specs,
+  }: BasicCreateFormParams): FormSchema => {
+    const { valueRange } = specs! as Partial<Specs>;
+    const { max = 2147483647, min = -2147483648 } = valueRange || {};
+    return {
+      field: identifier,
+      label: functionName,
+      component: 'InputNumber',
+      rules: [
+        {
+          type: 'number',
+          trigger: 'change',
+          validator: (_rule, value) => {
+            if (value < min || value > max) {
+              return Promise.reject(`${functionName}取值范围在${min}~${max}之间`);
+            }
+            return Promise.resolve(value);
+          },
+        },
+      ],
+      componentProps: {
+        max,
+        min,
+        // step: step,
+        // formatter: (value: string) => value,
+        // parser: (string: string) => {
+        //   if (dataType === DataTypeEnum.IS_NUMBER_INT) {
+        //     return Number(Number(string).toFixed());
+        //   }
+        //   return Number(string);
+        // },
+        onChange: (value: string) => {
+          syncValue(identifier, value);
+        },
+      },
+    } as FormSchema;
+  };
+
+  const createInput = ({ identifier, functionName, specs }: BasicCreateFormParams): FormSchema => {
+    const { length = 10240 } = specs! as Partial<Specs>;
+    return {
+      field: identifier,
+      label: functionName,
+      component: 'Input',
+      rules: [
+        {
+          type: 'string',
+          trigger: 'change',
+          validator: (_rule, value) => {
+            if (value.length > length) {
+              return Promise.reject(`${functionName}数据长度应该小于${length}`);
+            }
+            return Promise.resolve(value);
+          },
+        },
+      ],
+      componentProps: {
+        maxLength: length,
+        onChange: (value: InputEvent) => {
+          syncValue(identifier, (value.target as HTMLInputElement).value);
+        },
+      },
+    } as FormSchema;
+  };
+
+  const createSelect = ({ identifier, functionName, specs }: BasicCreateFormParams): FormSchema => {
+    const { boolClose, boolOpen } = specs! as Partial<Specs>;
+    return {
+      field: identifier,
+      label: functionName,
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: `${boolClose}-0`, value: 0 },
+          { label: `${boolOpen}-0`, value: 1 },
+        ],
+        onChange: (value: string) => {
+          syncValue(identifier, value);
+        },
+      },
+    };
+  };
+
+  const createInputJson = ({ identifier, functionName }: BasicCreateFormParams): FormSchema => {
+    return {
+      field: identifier,
+      label: functionName,
+      component: 'InputTextArea',
+      componentProps: {
+        onChange: (value: InputEvent) => {
+          syncValue(identifier, (value.target as HTMLInputElement).value);
+        },
+      },
+    };
+  };
+
+  const transformToFormSchema = (inputData: StructJSON[]) => {
+    const schemas: FormSchema[] = [];
+    for (const item of inputData) {
+      const { dataType, identifier, functionName } = item;
+      const { type, specs } = dataType! || {};
+
+      const params: BasicCreateFormParams = {
+        identifier: identifier!,
+        functionName: functionName!,
+        dataType: dataType! as unknown as DataTypeEnum,
+        specs: specs as Partial<Specs>,
+      };
+      if (type === DataTypeEnum.IS_NUMBER_INT || type === DataTypeEnum.IS_NUMBER_DOUBLE) {
+        schemas.push(createInputNumber(params));
+      }
+
+      if (type === DataTypeEnum.IS_BOOL) {
+        schemas.push(createSelect(params));
+      }
+
+      if (type === DataTypeEnum.IS_STRING) {
+        schemas.push(createInput(params));
+      }
+
+      if (type === DataTypeEnum.IS_STRUCT) {
+        schemas.push(createInputJson(params));
+      }
+    }
+
+    return schemas;
+  };
+
+  onBeforeUpdate(() => {
+    if (props.inputData && props.inputData.length) {
+      const schemas = transformToFormSchema(props.inputData);
+      setProps({ schemas });
+    }
+  });
+
+  onUpdated(async () => {
+    if (props.inputData && props.inputData.length) {
+      await nextTick();
+      setFieldsValue(props.value);
+    }
+  });
+</script>
+
+<template>
+  <Card bordered class="!border-dashed !rounded-lg !border-2px">
+    <!-- <Alert class="!mb-4 w-32" message="服务参数配置" type="info" /> -->
+    <BasicForm class="object-model-validate-form" @register="register" />
+  </Card>
+</template>
+
+<style lang="less">
+  .object-model-validate-form {
+    .ant-input-number {
+      width: 100% !important;
+    }
+  }
+</style>

+import { DataTypeEnum } from '../StructForm/config';
+import { Specs } from '/@/api/device/model/modelOfMatterModel';
+
+export interface BasicCreateFormParams {
+  identifier: string;
+  functionName: string;
+  dataType: DataTypeEnum;
+  specs: Partial<Specs>;
+}

@@ -121,4 +121,5 @@ export type ComponentType =
   | 'StructForm'
   | 'ApiSelectScrollLoad'
   | 'TransferModal'
-  | 'TransferTableModal';
+  | 'TransferTableModal'
+  | 'ObjectModelValidateForm';

@@ -20,6 +20,11 @@ export type TOption = {
   value: string;
 };
 
+export enum CommandTypeEnum {
+  CUSTOM = 0,
+  SERVICE = 1,
+}
+
 /**
  * 所使用的枚举值
  */
@@ -575,11 +580,28 @@ export const actionSchema: FormSchema[] = [
       span: 6,
     },
     componentProps: ({ formModel, formActionType }) => {
-      const { setFieldsValue } = formActionType;
-      const deviceProfileId = formModel['deviceProfileId'];
+      const { updateSchema } = formActionType;
+      const deviceProfileId = Reflect.get(formModel, 'deviceProfileId');
+      const thingsModelId = Reflect.get(formModel, 'thingsModelId');
       return {
         placeholder: '请选择服务',
-        api: getModelServices,
+        api: async (params: Recordable) => {
+          try {
+            const record = await getModelServices(params as Record<'deviceProfileId', string>);
+            const selected = record.find((item) => item.id === thingsModelId);
+            selected &&
+              updateSchema({
+                field: 'serviceInputValue',
+                componentProps: {
+                  inputData: selected?.functionJson.inputData,
+                },
+              });
+            return record;
+          } catch (error) {
+            console.error(error);
+            return [];
+          }
+        },
         params: {
           deviceProfileId,
         },
@@ -587,7 +609,15 @@ export const actionSchema: FormSchema[] = [
         valueField: 'id',
         getPopupContainer: () => document.body,
         onChange: (_, options: ModelOfMatterParams) => {
-          setFieldsValue({ doContext: { ...options.functionJson, callType: options.callType } });
+          if (options) {
+            // setFieldsValue({ doContext: { ...options.functionJson, callType: options.callType } });
+            updateSchema({
+              field: 'serviceInputValue',
+              componentProps: {
+                inputData: options.functionJson.inputData,
+              },
+            });
+          }
         },
       };
     },
@@ -665,6 +695,18 @@ export const actionSchema: FormSchema[] = [
     },
     slot: 'clearAlarm',
   },
+  {
+    field: 'serviceInputValue',
+    component: 'ObjectModelValidateForm',
+    label: '',
+    changeEvent: 'update:value',
+    valueField: 'value',
+    show: ({ values }) => values['thingsModelId'],
+    colProps: {
+      span: 24,
+    },
+    componentProps: {},
+  },
 ];
 
 export const alarmScheduleSchemas: FormSchema[] = [

@@ -103,7 +103,7 @@
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { Tooltip, Select, Checkbox, Card } from 'ant-design-vue';
   import { Icon } from '/@/components/Icon';
-  import { actionSchema } from '../config/config.data';
+  import { actionSchema, CommandTypeEnum } from '../config/config.data';
   import jsoneditor from 'jsoneditor';
   import 'jsoneditor/dist/jsoneditor.min.css';
   import { QuestionCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
@@ -261,19 +261,26 @@
     //TODO-fengtao-设备验证
     const value = getFieldsValue();
     const doContext = unref(jsonInstance)?.get() || {};
+    const serviceInputValue = Reflect.get(value, 'serviceInputValue');
+
     return {
       ...value,
-      ...(Number(value.commandType) === 0 ? { doContext } : {}),
+      ...(Number(value.commandType) === CommandTypeEnum.CUSTOM
+        ? { doContext }
+        : { doContext: serviceInputValue }),
       clearRule,
     };
   };
 
   const setFieldsFormValueFun = (fieldsValue) => {
+    const doContext = Reflect.get(fieldsValue, 'doContext');
+    const commandType = Reflect.get(fieldsValue, 'commandType');
     setFieldsValue({
       ...fieldsValue,
       ...(isNumber(fieldsValue.commandType)
         ? { commandType: String(fieldsValue.commandType) }
         : {}),
+      serviceInputValue: commandType === CommandTypeEnum.SERVICE ? doContext.params || {} : {},
     });
   };
   //ft-add