wip: model of matter

@@ -9,12 +9,15 @@ export interface Specs {
   length: string;
   boolOpen: string;
   boolClose: string;
+  valueRange?: {
+    min: string;
+    max: string;
+  };
 }
 
 export interface FunctionJson {
   type: string;
-  specs?: Partial<Specs>;
-  specsList?: ModelOfMatterParams[];
+  specs?: Partial<Specs> | ModelOfMatterParams[];
 }
 
 export interface ModelOfMatterParams {

 <template>
-  <div style="display: flex">
-    <a-input
+  <div class="flex">
+    <InputNumber
       placeholder="最小值"
-      v-model:value="param.min"
+      :value="getValue.min"
       style="width: 38%"
-      @input="emitChange"
+      @change="(value) => emitChange(value, 'min')"
     />
     <span style="width: 8px"></span>
     <span>~</span>
     <span style="width: 8px"></span>
-    <a-input
+    <InputNumber
       placeholder="最大值"
-      v-model:value="param.max"
+      :value="getValue.max"
       style="width: 38%"
-      @input="emitChange"
+      @change="(value) => emitChange(value, 'max')"
     />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, watchEffect } from 'vue';
-  import { propTypes } from '/@/utils/propTypes';
-  import { isEmpty } from '/@/utils/is';
-
-  export default defineComponent({
-    name: 'JAddInput',
-    //--------------不继承Antd Design Vue Input的所有属性 否则控制台报大片警告--------------
+  export default {
     inheritAttrs: false,
-    props: {
-      value: propTypes.object.def({}),
-    },
-    emits: ['change', 'update:value'],
-    setup(props, { emit }) {
-      const param = reactive({
-        min: '',
-        max: '',
-      });
-      watchEffect(() => {
-        initVal();
-      });
-      function initVal() {
-        if (props.value) {
-          param.min = props.value.min;
-          param.max = props.value.max;
-        }
-      }
-      function emitChange() {
-        emit('change', isEmpty(param) ? '' : param);
-        emit('update:value', isEmpty(param) ? '' : param);
-      }
-      return {
-        emitChange,
-        param,
+  };
+</script>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { InputNumber } from 'ant-design-vue';
+
+  const emit = defineEmits(['change', 'update:value']);
+  const props = withDefaults(
+    defineProps<{
+      value?: {
+        min: Nullable<number>;
+        max: Nullable<number>;
       };
-    },
+    }>(),
+    {
+      value: () => ({ min: null, max: null }),
+    }
+  );
+
+  const getValue = computed(() => {
+    const { value } = props;
+    return value;
   });
+
+  function emitChange(value: number, key: 'min' | 'max') {
+    const _value = { ...props.value, [key]: value };
+    emit('update:value', _value);
+  }
 </script>
 <style scoped></style>

@@ -62,6 +62,8 @@ export const formSchemas: FormSchema[] = [
     field: FormField.VALUE_RANGE,
     label: '取值范围',
     component: 'CustomMinMaxInput',
+    valueField: 'value',
+    changeEvent: 'update:value',
     colProps: {
       span: 18,
     },
@@ -72,7 +74,7 @@ export const formSchemas: FormSchema[] = [
   {
     field: FormField.STEP,
     label: '步长',
-    component: 'Input',
+    component: 'InputNumber',
     colProps: {
       span: 18,
     },
@@ -198,6 +200,15 @@ export const formSchemas: FormSchema[] = [
     changeEvent: 'update:value',
     colProps: { span: 24 },
     ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_STRUCT,
+    rules: [
+      {
+        required: true,
+        validator(_rule, value, _callback) {
+          console.log(value);
+          return Promise.resolve();
+        },
+      },
+    ],
   },
   {
     field: FormField.REFARK,

@@ -48,18 +48,19 @@ export function transformFormValue(value: StructFormValue): Partial<ModelOfMatte
     functionName,
     identifier,
     remark,
-    specsList,
+    specs,
   } = value;
   const { min, max } = valueRange! || {};
   const basic = { functionName, identifier, remark };
   let functionJson = {} as unknown as ModelOfMatterParams['functionJson'];
 
+  console.log(value);
   switch (type) {
     case DateTypeEnum.IS_NUMBER_INT:
       validateValueRangeAndStep(Number(min), Number(step), Number(max));
       functionJson = {
         type,
-        specs: { max, min, step, unit, unitName },
+        specs: { max, min, valueRange, step, unit, unitName },
       };
       break;
 
@@ -67,7 +68,7 @@ export function transformFormValue(value: StructFormValue): Partial<ModelOfMatte
       validateValueRangeAndStep(Number(min), Number(step), Number(max));
       functionJson = {
         type,
-        specs: { max, min, step, unit, unitName },
+        specs: { max, min, valueRange, step, unit, unitName },
       };
       break;
 
@@ -92,7 +93,7 @@ export function transformFormValue(value: StructFormValue): Partial<ModelOfMatte
     case DateTypeEnum.IS_STRUCT:
       functionJson = {
         type,
-        specsList: specsList! as unknown as ModelOfMatterParams[],
+        specs: specs! as unknown as ModelOfMatterParams[],
       };
       break;
   }

@@ -99,7 +99,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, nextTick, onUnmounted, onMounted } from 'vue';
+  import { ref, nextTick, onUnmounted } from 'vue';
   import { BasicTable, TableImg, useTable, TableAction, BasicColumn } from '/@/components/Table';
   import { columns, searchFormSchema, defaultObj } from './device.profile.data';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -258,7 +258,6 @@
   }
 
   const [registerDrawer, { openDrawer }] = useDrawer();
-  onMounted(() => openDrawer(true));
   //详情
   function handleDetailView(record: Recordable) {
     openDrawer(true, { record });

@@ -27,7 +27,7 @@
           <div class="flex justify-between items-end">
             <div class="flex gap-2">
               <Authority value="">
-                <Button v-if="isShowBtn" type="primary" @click="handleCreateOrEdit">
+                <Button v-if="isShowBtn" type="primary" @click="handleCreateOrEdit()">
                   新增物模型
                 </Button>
                 <Button type="primary" @click="handleOpenTsl"> 物模型TSL </Button>
@@ -106,7 +106,6 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
   import { physicalColumn } from '../device.profile.data';
@@ -120,6 +119,7 @@
   import { deleteModel, getModelList } from '/@/api/device/modelOfMatter';
   import { OpenModelOfMatterModelParams, OpenModelMode } from './cpns/physical/types';
   import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { ref } from 'vue';
   defineEmits(['register']);
 
   defineProps<{

@@ -2,6 +2,7 @@
   <div>
     <BasicModal
       :maskClosable="false"
+      destroy-on-close
       v-bind="$attrs"
       width="55rem"
       @register="register"
@@ -24,7 +25,11 @@
         >
           <TabPane :key="FunctionType.PROPERTIES" tab="属性" />
           <TabPane :key="FunctionType.SERVICE" tab="服务" />
-          <TabPane :key="FunctionType.EVENTS" tab="事件" />
+          <TabPane
+            :key="FunctionType.EVENTS"
+            tab="事件"
+            :disabled="$props.record.transportType === 'TCP'"
+          />
         </Tabs>
         <Attribute v-show="activeKey === FunctionType.PROPERTIES" ref="AttrRef" />
         <Service v-show="activeKey === FunctionType.SERVICE" ref="ServiceRef" />
@@ -62,6 +67,7 @@
   const ServiceRef = ref<InstanceType<typeof Service>>();
   const EventsRef = ref<InstanceType<typeof Events>>();
   const openModalMode = ref<OpenModelMode>(OpenModelMode.CREATE);
+  const openModalParams = ref<OpenModelOfMatterModelParams>();
 
   const functionType = ref<FunctionType>();
   const { createMessage } = useMessage();
@@ -83,6 +89,7 @@
 
   const [register, { closeModal, setModalProps }] = useModalInner(
     async (data: OpenModelOfMatterModelParams) => {
+      openModalParams.value = data;
       const { mode, record } = data;
       openModalMode.value = mode;
       if (record) {
@@ -121,7 +128,7 @@
       if (activeKey.value == FunctionType.PROPERTIES) {
         params = (await AttrRef.value?.getFormData()) || {};
       } else if (activeKey.value == FunctionType.SERVICE) {
-        params = await ServiceRef.value?.getFormData();
+        params = (await ServiceRef.value?.getFormData()) || {};
       } else {
         params = await EventsRef.value?.getFormData();
       }
@@ -130,7 +137,7 @@
         await createModel(params);
         createMessage.success('创建成功');
       } else {
-        params.id = props.record.id;
+        params.id = unref(openModalParams)?.record.id;
         await updateModel(params);
         createMessage.success('修改成功');
       }

 <template>
-  <div>
-    <BasicForm @register="register" />
-  </div>
+  <BasicForm @register="register" />
 </template>
 <script lang="ts" setup>
   import { BasicForm, useForm } from '/@/components/Form';
@@ -12,6 +10,7 @@
     StructFormValue,
     StructRecord,
   } from '/@/components/Form/src/externalCompns/components/StructForm/type';
+  import { isObject } from 'lodash';
 
   const [register, { validate, resetFields, setFieldsValue }] = useForm({
     labelWidth: 100,
@@ -42,11 +41,7 @@
     const value = {
       ...record,
       ...functionJson,
-      ...specs,
-      valueRange: {
-        min: specs.min,
-        max: specs.max,
-      },
+      ...(isObject(specs) ? specs : {}),
     };
 
     setFieldsValue(value);

 <template>
-  <div>
-    <BasicForm @register="register">
-      <template #outputParamSlot>
-        <div>
-          <template v-for="(item, index) in outputParamData" :key="item">
-            <span style="display: none">{{ item }}</span>
-            <InputParamItem
-              :title="item.name"
-              :item="item"
-              class="mt-4"
-              :index="index"
-              :ref="dynamicBindRef.outputParamItemRef"
-              @delete="deleteOutParItem"
-              @edit="editOutParItem"
-            />
-          </template>
-          <div style="display: flex" :class="{ 'mt-2': outputParamData.length > 0 }">
-            <span class="add-style">+</span>
-            <span class="add-style" @click="handleAddOutParam">增加参数</span>
-          </div>
-        </div>
-      </template>
-    </BasicForm>
-    <AddParamsModal @register="registerModal" @data="getData" />
-  </div>
+  <BasicForm @register="register" />
 </template>
 <script lang="ts" setup>
-  import { ref, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { eventSchemas } from './config';
-  import { useModal } from '/@/components/Modal';
-  import InputParamItem from './components/InputParamItem.vue';
-  import AddParamsModal from './components/AddParamsModal.vue';
-  import { buildUUID } from '/@/utils/uuid';
+  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
 
-  const outputParamData: any = ref([]);
-  const dynamicBindRef = {
-    outputParamItemRef: ref([]),
-  };
-
-  const [registerModal, { openModal }] = useModal();
-
-  const [register, { validate, setFieldsValue, resetFields }] = useForm({
+  const [register, { validate, resetFields }] = useForm({
     labelWidth: 100,
     schemas: eventSchemas,
     actionColOptions: {
@@ -52,70 +17,18 @@
     showActionButtonGroup: false,
   });
 
-  const getData = (d, f) => {
-    if (f == 'output') {
-      if (d.id !== null) {
-        const findIndex = unref(outputParamData).findIndex((f) => f.id == d.id);
-        if (findIndex !== -1) unref(outputParamData).splice(findIndex, 1, d);
-      } else {
-        unref(outputParamData).push({ ...d, id: buildUUID() });
-      }
-    }
-  };
-
-  const handleAddOutParam = () => {
-    openModal(true, {
-      isUpdate: true,
-      flag: 'output',
-      excludeStruct: false,
-    });
-  };
-
-  const deleteOutParItem = (index) => {
-    unref(outputParamData).splice(index, 1);
-  };
-
-  const editOutParItem = (item) => {
-    openModal(true, {
-      isUpdate: false,
-      record: item,
-      flag: 'output',
-      excludeStruct: false,
-    });
-  };
-
   //回显数据
-  const setFormData = (v) => {
-    setFieldsValue(v[0]);
-    const { outputData } = v[0];
-    if (outputData !== undefined) {
-      outputParamData.value = [...new Array(outputData.length).keys()];
-      outputParamData.value = outputData;
-    }
-  };
-
-  //获取数据
-  const getStructList = () => {
-    const val = unref(dynamicBindRef.outputParamItemRef)?.map((item: any) => item.getFormData());
-    return val;
-  };
+  const setFormData = () => {};
 
   async function getFormData() {
-    const values = await validate();
+    const values = (await validate()) as ModelOfMatterParams;
     if (!values) return;
-    const outputData = getStructList();
-    const { outputParam, ...value } = values;
-    console.log(outputParam);
-    return {
-      ...value,
-      ...{ outputData },
-    };
+    console.log(values);
   }
 
   //清空数据
   const resetFormData = () => {
     resetFields();
-    outputParamData.value = [];
   };
 
   defineExpose({

 <template>
-  <div>
-    <BasicForm @register="register">
-      <template #inputParamSlot>
-        <div>
-          <template v-for="(item, index) in inputParamData" :key="item.id">
-            <span style="display: none">{{ item }}</span>
-            <InputParamItem
-              :title="item.name"
-              :item="item"
-              class="mt-4"
-              :index="index"
-              :ref="dynamicBindRef.inputParamItemRef"
-              @delete="deleteInParItem"
-              @edit="editInParItem"
-            />
-          </template>
-          <div style="display: flex" :class="{ 'mt-2': inputParamData.length > 0 }">
-            <span class="add-style">+</span>
-            <span class="add-style" @click="handleAddInParam">增加参数</span>
-          </div>
-        </div>
-      </template>
-      <template #outputParamSlot>
-        <div>
-          <template v-for="(item, index) in outputParamData" :key="item.id">
-            <span style="display: none">{{ item }}</span>
-            <InputParamItem
-              :title="item.name"
-              :item="item"
-              class="mt-4"
-              :index="index"
-              :ref="dynamicBindRef.outputParamItemRef"
-              @delete="deleteOutParItem"
-              @edit="editOutParItem"
-            />
-          </template>
-          <div style="display: flex" :class="{ 'mt-2': outputParamData.length > 0 }">
-            <span class="add-style">+</span>
-            <span class="add-style" @click="handleAddOutParam">增加参数</span>
-          </div>
-        </div>
-      </template>
-    </BasicForm>
-    <AddParamsModal @register="registerModal" @data="getData" />
-  </div>
+  <BasicForm @register="register" />
 </template>
 <script lang="ts" setup>
-  import { ref, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { serviceSchemas } from './config';
-  import { useModal } from '/@/components/Modal';
-  import InputParamItem from './components/InputParamItem.vue';
-  import AddParamsModal from './components/AddParamsModal.vue';
-  import { buildUUID } from '/@/utils/uuid';
-
-  const inputParamData: any = ref([]);
-  const outputParamData: any = ref([]);
-  const dynamicBindRef = {
-    inputParamItemRef: ref([]),
-    outputParamItemRef: ref([]),
-  };
-
-  const [registerModal, { openModal }] = useModal();
-
-  const [register, { validate, setFieldsValue, resetFields }] = useForm({
+  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { FunctionType } from './config';
+  const [register, { validate, resetFields }] = useForm({
     labelWidth: 100,
     schemas: serviceSchemas,
     actionColOptions: {
@@ -74,111 +17,21 @@
     showActionButtonGroup: false,
   });
 
-  const getData = (d, f) => {
-    if (f == 'input') {
-      if (d.id !== null) {
-        const findIndex = unref(inputParamData).findIndex((f) => f.id == d.id);
-        if (findIndex !== -1) unref(inputParamData).splice(findIndex, 1, d);
-      } else {
-        unref(inputParamData).push({ ...d, id: buildUUID() });
-      }
-    } else {
-      if (d.id !== null) {
-        const findIndex = unref(outputParamData).findIndex((f) => f.id == d.id);
-        if (findIndex !== -1) unref(outputParamData).splice(findIndex, 1, d);
-      } else {
-        unref(outputParamData).push({ ...d, id: buildUUID() });
-      }
-    }
-  };
-
-  const handleAddInParam = () => {
-    openModal(true, {
-      isUpdate: true,
-      flag: 'input',
-      excludeStruct: false,
-    });
-  };
-
-  const deleteInParItem = (index) => {
-    unref(inputParamData).splice(index, 1);
-  };
-
-  const editInParItem = (item) => {
-    openModal(true, {
-      isUpdate: false,
-      record: item,
-      flag: 'input',
-      excludeStruct: false,
-    });
-  };
-
-  const handleAddOutParam = () => {
-    openModal(true, {
-      isUpdate: true,
-      flag: 'output',
-      excludeStruct: false,
-    });
-  };
-
-  const deleteOutParItem = (index) => {
-    unref(outputParamData).splice(index, 1);
-  };
-
-  const editOutParItem = (item) => {
-    openModal(true, {
-      isUpdate: false,
-      record: item,
-      flag: 'output',
-      excludeStruct: false,
-    });
-  };
-
   //回显数据
-  const setFormData = (v) => {
-    setFieldsValue(v[0]);
-    const { inputParams, outputParams } = v[0];
-    if (outputParams !== undefined) {
-      outputParamData.value = [...new Array(outputParams.length).keys()];
-      outputParamData.value = outputParams;
-    }
-    if (inputParams !== undefined) {
-      inputParamData.value = [...new Array(inputParams.length).keys()];
-      inputParamData.value = inputParams;
-    }
-  };
-
-  const getInputStructList = () => {
-    const val = unref(dynamicBindRef.inputParamItemRef)?.map((item: any) => item.getFormData());
-    return val;
-  };
-
-  const getOutputStructList = () => {
-    const val = unref(dynamicBindRef.outputParamItemRef)?.map((item: any) => item.getFormData());
-    return val;
-  };
+  const setFormData = () => {};
 
   //获取数据
   async function getFormData() {
-    const values = await validate();
+    const values = (await validate()) as ModelOfMatterParams;
     if (!values) return;
-    const inputParams = getInputStructList();
-    const outputParams = getOutputStructList();
-    const { inputParam, outputParam, ...value } = values;
-    console.log(inputParam);
-    console.log(outputParam);
-    return {
-      ...value,
-      ...{ inputParams },
-      ...{ outputParams },
-    };
+    values.functionType = FunctionType.SERVICE;
+    console.log(values);
+    return values;
   }
 
   //清空数据
   const resetFormData = () => {
     resetFields();
-    inputParamData.value = [];
-    outputParamData.value = [];
   };
 
   defineExpose({

@@ -18,9 +18,10 @@ export enum FormField {
   BOOL_OPEN = 'boolOpen',
   LENGTH = 'length',
   R_W_FLAG = 'rwFlag',
-  SPECS_LIST = 'specsList',
+  SPECS_LIST = 'specs',
   CALL_TYPE = 'callType',
-  INPUT_PARAM = 'inputParam',
+  INPUT_PARAM = 'inputData',
+  OUTPUT_PARAM = 'outputData',
   EVENT_TYPE = 'eventType',
 
   STRUCT = 'struct',
@@ -130,15 +131,17 @@ export const serviceSchemas: FormSchema[] = [
   {
     field: FormField.INPUT_PARAM,
     label: '输入参数',
-    component: 'Input',
-    slot: 'inputParamSlot',
+    component: 'StructForm',
+    valueField: 'value',
+    changeEvent: 'update:value',
     colProps: { span: 24 },
   },
   {
-    field: FormField.SPECS_LIST,
+    field: FormField.OUTPUT_PARAM,
     label: '输出参数',
-    component: 'Input',
-    slot: 'outputParamSlot',
+    component: 'StructForm',
+    valueField: 'value',
+    changeEvent: 'update:value',
     colProps: { span: 24 },
   },
   {
@@ -200,10 +203,11 @@ export const eventSchemas: FormSchema[] = [
     },
   },
   {
-    field: FormField.SPECS_LIST,
+    field: FormField.OUTPUT_PARAM,
     label: '输出参数',
-    component: 'Input',
-    slot: 'outputParamSlot',
+    component: 'StructForm',
+    valueField: 'value',
+    changeEvent: 'update:value',
     colProps: { span: 24 },
   },
   {