fix: 优化物模型-功能定义-(输入、输出)

src/views/device/components/Metadata/Base/DetailModal/PropertiesModal.vue

@@ -135,7 +135,7 @@ const handleDataTable = (type: string) => {
           break;
     case 'boolean':
       dataTypeTable.dataSource = {
-        ...props.data.valueType
+        ...omit(props.data.valueType, ['type'])
       }
       break;
     case 'array':

src/views/device/components/Metadata/Base/columns.tsx

@@ -32,6 +32,36 @@ const type = {
   report: '上报',
 };
 
+export const handleTypeValue = (type:string, value: any = {}) => {
+  let obj: any = {}
+  switch (type) {
+    case 'array':
+      obj.elementType = value
+      break;
+    case 'object':
+      obj.properties = value
+      break;
+    case 'int':
+    case 'long':
+      obj.unit = value
+      break;
+    case 'file':
+      obj.fileType = value
+      break;
+    case 'date':
+      obj.format = value
+      break;
+    case 'string':
+    case 'password':
+      obj.maxLength = value
+      break;
+    default:
+      obj = value
+      break;
+  }
+  return obj
+}
+
 export const typeSelectChange = (type: string) => {
   let obj: any = {}
   switch (type) {

src/views/device/components/Metadata/Base/components/Constraint.vue

@@ -20,7 +20,7 @@ const props = defineProps({
   },
   name: {
     type: [String, Array],
-    default: 'required'
+    default: ['expands','required']
   }
 })
 
@@ -28,10 +28,10 @@ const emit = defineEmits(['update:value'])
 
 const myValue = ref()
 
-const change = () => {
+const change = (e) => {
   const newData = { ...props.value }
   set(newData, props.name, myValue.value)
-  console.log(newData);
+  console.log(newData, e);
   emit('update:value', newData)
 }
 

src/views/device/components/Metadata/Base/components/DataType.vue

@@ -8,64 +8,14 @@
             v-model:value="_valueType.elementType"
             :unitOptions="options"
             placement="topRight"
-            @confirm="valueChange"
+            @confirm="(data) => {valueChange(data, 'array')}"
         />
         <DataTableObject
             v-else-if="type === 'object'"
             :value="_valueType.properties"
             placement="topRight"
-            :columns="[
+            :columns="columns"
-                {
+            @confirm="(data) => {valueChange(data, 'object')}"
-                  title: '参数标识',
-                  dataIndex: 'id',
-                  type: 'text',
-                  width: 100,
-                  form: {
-                    required: true,
-                    rules: [{
-                      callback() {
-
-                      }
-                    }]
-                  }
-                },
-                {
-                  title: '参数名称',
-                  dataIndex: 'name',
-                  type: 'text',
-                  width: 100,
-                  form: {
-                    required: true,
-                    rules: [{
-                      required: true,
-                      message: '请输入参数名称'
-                    }]
-                  }
-                },
-                {
-                    title: '数据类型',
-                    type: 'components',
-                    dataIndex: 'valueType',
-                    components: {
-                      name: ValueObject,
-                      props: {
-                        filter: ['object']
-                      }
-                    },
-                    width: 100
-                },
-                {
-                  title: '其他配置',
-                  dataIndex: 'config',
-                  width: 100
-                },
-                {
-                  title: '操作',
-                  dataIndex: 'action',
-                  width: 60
-                }
-            ]"
-            @confirm="valueChange"
         >
             <template #valueType="{ data }">
                 {{ data.record.valueType?.type }}
@@ -75,28 +25,29 @@
               <ConfigModal v-model:value="data.record" />
             </template>
         </DataTableObject>
-        <DataTableEnum v-else-if="type === 'enum'" v-model:value="_valueType" placement="topRight" @confirm="valueChange"/>
+        <DataTableEnum v-else-if="type === 'enum'" v-model:value="_valueType" placement="topRight" @confirm="(data) => {valueChange(data, 'enum')}"/>
-        <DataTableBoolean v-else-if="type === 'boolean'" v-model:value="_valueType" placement="topRight" @confirm="valueChange"/>
+        <DataTableBoolean v-else-if="type === 'boolean'" v-model:value="_valueType" placement="topRight" @confirm="(data) => {valueChange(data, 'boolean')}" />
         <DataTableDouble
             v-else-if="['float', 'double'].includes(type)"
             :options="options"
             v-model:value="_valueType"
             placement="topRight"
-            @confirm="valueChange"
+            @confirm="(data) => {valueChange(data, 'float')}"
         />
         <DataTableInteger
             v-else-if="['int', 'long'].includes(type)"
             :options="options"
             v-model:value="_valueType.unit"
             placement="topRight"
-            @confirm="valueChange"
+            @confirm="(data) => {valueChange(data, 'int')}"
         />
-        <DataTableFile v-else-if="type === 'file'" v-model:value="_valueType.fileType" placement="topRight" @confirm="valueChange"/>
+        <DataTableFile v-else-if="type === 'file'" v-model:value="_valueType.fileType" placement="topRight" @confirm="(data) => {valueChange(data, 'file')}"/>
-        <DataTableDate v-else-if="type === 'date'" v-model:value="_valueType.format" placement="topRight" @confirm="valueChange"/>
+        <DataTableDate v-else-if="type === 'date'" v-model:value="_valueType.format" placement="topRight" @confirm="(data) => {valueChange(data, 'date')}"/>
         <DataTableString
             v-else-if="['string', 'password'].includes(type)"
             v-model:value="_valueType.maxLength"
             placement="topRight"
+            @confirm="(data) => {valueChange(data, 'string')}"
         />
     </div>
 </template>
@@ -117,7 +68,7 @@ import {
     DataTableObject,
 } from 'jetlinks-ui-components';
 import { cloneDeep } from 'lodash-es';
-import { typeSelectChange } from '../columns'
+import {handleTypeValue, typeSelectChange} from '../columns'
 import ConfigModal from './ConfigModal.vue'
 
 const props = defineProps({
@@ -127,6 +78,56 @@ const props = defineProps({
     },
 });
 
+const columns = [{
+  title: '参数标识',
+  dataIndex: 'id',
+  type: 'text',
+  width: 100,
+  form: {
+    required: true,
+    rules: [{
+      callback() {
+        return Promise.resolve()
+      }
+    }]
+  }
+},
+  {
+    title: '参数名称',
+    dataIndex: 'name',
+    type: 'text',
+    width: 100,
+    form: {
+      required: true,
+      rules: [{
+        required: true,
+        message: '请输入参数名称'
+      }]
+    }
+  },
+  {
+    title: '数据类型',
+    type: 'components',
+    dataIndex: 'valueType',
+    components: {
+      name: ValueObject,
+      props: {
+        filter: ['object']
+      }
+    },
+    width: 100
+  },
+  {
+    title: '其他配置',
+    dataIndex: 'config',
+    width: 100
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 60
+  }]
+
 const options = ref<{ label: string; value: string }[]>([]);
 const emit = defineEmits(['update:value']);
 
@@ -144,10 +145,13 @@ const typeChange = (e: string) => {
     });
 };
 
-const valueChange = () => {
+const valueChange = (_data: any, _type: string) => {
+  console.log(_type, _data)
+  const newData = handleTypeValue(_type, _data)
+  console.log('dataType',{...newData, type: type.value})
   emit('update:value', {
     ...props.value,
-    valueType: {...(_valueType.value || {}), type: type.value},
+    valueType: {...newData, type: type.value},
   });
 }
 

src/views/device/components/Metadata/Base/components/Function/InputParams.vue

@@ -1,5 +1,5 @@
 <template>
-  <DataTableObject v-model:value="dataSource" :columns="columns" :onAdd="addItem" width="700px" @confirm="confirm">
+  <DataTableObject :value="dataSource" :columns="columns" :onAdd="addItem" width="700px" @confirm="confirm">
     <template #valueType="{ data }">
       <span>{{ data.record.valueType?.type }}</span>
     </template>
@@ -7,7 +7,7 @@
       <span>{{ data.record.expands?.required ? "是": '否' }}</span>
     </template>
     <template #config="{ data }">
-      <OtherConfigInfo :value="data.record.valueType"></OtherConfigInfo>
+      <ConfigModal v-model:value="data.record" />
     </template>
     <j-button>
       <AIcon type="SettingOutlined" />
@@ -18,26 +18,12 @@
 
 <script setup lang="ts" name="InputParams">
 import type { PropType } from 'vue';
-import DataTypeObjectChild from '../DataTypeObjectChild.vue'
+import ConfigModal from '@/views/device/components/Metadata/Base/components/ConfigModal.vue'
 import {
     DataTableObject,
 } from 'jetlinks-ui-components';
 import { ConstraintSelect, OtherConfigInfo, ValueObject } from '../index'
 
-const addItem = () => {
-  return {
-    id: undefined,
-    name: undefined,
-    valueType: {
-
-    },
-    expands: {
-      required: false
-    }
-  }
-}
-
-const columns = ref()
 
 type Emits = {
     (e: 'update:value', data: Record<string, any>): void;
@@ -60,6 +46,76 @@ const props = defineProps({
     },
 });
 
+
+const addItem = () => {
+  return {
+    id: undefined,
+    name: undefined,
+    valueType: {
+
+    },
+    expands: {
+      required: false
+    }
+  }
+}
+
+const columns = ref([
+  {
+    title: '参数标识',
+    dataIndex: 'id',
+    type: 'text',
+    form: {
+      required: true,
+      rules: [
+        { required: true, message: '请输入标识' },
+        {
+          validator(va:any,value: any) {
+            const fieldIndex = va.field.split('.')[1]
+            const oldValue = (dataSource!.value || []).filter((_, index) => index != fieldIndex)
+            console.log(dataSource!.value)
+            const hasId = oldValue.some((item) => item.id === value)
+            if (value) {
+              if (hasId) {
+                return Promise.reject('该标识存在')
+              }
+              return Promise.resolve()
+            }
+            return Promise.reject('请输入标识')
+          }
+        },
+      ]
+    }
+  },
+  { title: '参数名称', dataIndex: 'name', type: 'text', form: { required: true, rules: [{ required: true, message: '请输入名称'}]} },
+  {
+    title: '填写约束',
+    dataIndex: 'required',
+    type: 'components',
+    width: 100,
+    components: {
+      name: ConstraintSelect,
+    }
+  },
+  {
+    title: '数据类型',
+    type: 'components',
+    dataIndex: 'valueType',
+    components: {
+      name: ValueObject,
+    },
+  },
+  {
+    title: '其他配置',
+    dataIndex: 'config',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 60
+  },
+])
+
 const dataSource = ref(props.value);
 
 const change = (v: string) => {
@@ -68,76 +124,19 @@ const change = (v: string) => {
 };
 
 watch(
-    () => props.value,
+    () => JSON.stringify(props.value),
     (newV) => {
+      console.log('inputParams-change')
       dataSource.value = props.value.inputs;
     },
     { immediate: true },
 );
 
-watch(() => JSON.stringify(dataSource.value), () => {
-  columns.value = [
-    {
-      title: '参数标识',
-      dataIndex: 'id',
-      type: 'text',
-      form: {
-        required: true,
-        rules: [
-          { required: true, message: '请输入标识' },
-          {
-            validator(va:any,value: any) {
-              const fieldIndex = va.field.split('.')[1]
-              const oldValue = (dataSource!.value || []).filter((_, index) => index != fieldIndex)
-              console.log(dataSource!.value)
-              const hasId = oldValue.some((item) => item.id === value)
-              if (value) {
-                if (hasId) {
-                  return Promise.reject('该标识存在')
-                }
-                return Promise.resolve()
-              }
-              return Promise.reject('请输入标识')
-            }
-          },
-        ]
-      }
-    },
-    { title: '参数名称', dataIndex: 'name', type: 'text', form: { required: true, rules: [{ required: true, message: '请输入名称'}]} },
-    {
-      title: '填写约束',
-      dataIndex: 'required',
-      type: 'components',
-      width: 100,
-      components: {
-        name: ConstraintSelect,
-      }
-    },
-    {
-      title: '数据类型',
-      type: 'components',
-      dataIndex: 'valueType',
-      components: {
-        name: ValueObject,
-      },
-    },
-    {
-      title: '其他配置',
-      dataIndex: 'config',
-    },
-    {
-      title: '操作',
-      dataIndex: 'action',
-      width: 60
-    },
-  ]
-}, { immediate: true})
-
 const confirm = (v: any) => {
-  console.log(v)
+  console.log('inputParams',v)
   emit('update:value', {
     ...props.value,
-    inputs: dataSource.value
+    inputs: v
   })
 }
 </script>

yarn.lock

@@ -3825,8 +3825,8 @@ jetlinks-store@^0.0.3:
 
 jetlinks-ui-components@^1.0.23, jetlinks-ui-components@^1.0.24:
   version "1.0.24"
-  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#552bad6c9ef733c941168c01fcfe594317add9e2"
+  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#7d651f3d333ad52154f5dbbbcba7f6ed8e85e442"
-  integrity sha512-34a8yGQpOHy3DsdRO+pc9Qn5HoeLSGhc2wJhVd22/EbyG5X08EENOsIu+Jg6o/ELmSB2gKnvvhpR4rxawN28hQ==
+  integrity sha512-MtIwdFA2kq3s1rGLExYjjjuit05pjoIURDelUIE4swN3q9qh8QgHcjAOtwEor+UNp333LT2FnSQbMkfXctrqUQ==
   dependencies:
     "@vueuse/core" "^9.12.0"
     "@vueuse/router" "^9.13.0"