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

2023-07-07 18:21:17 +08:00 · 2023-07-07 18:21:17 +08:00 · 9eacdb2687
parent 7c2f4c410c
commit 9eacdb2687
6 changed files with 179 additions and 146 deletions
--- a/src/views/device/components/Metadata/Base/DetailModal/PropertiesModal.vue
+++ b/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':
--- a/src/views/device/components/Metadata/Base/columns.tsx
+++ b/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) {
--- a/src/views/device/components/Metadata/Base/components/Constraint.vue
+++ b/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)
 }

--- a/src/views/device/components/Metadata/Base/components/DataType.vue
+++ b/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="[
-                {
-                  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"
+            :columns="columns"
+            @confirm="(data) => {valueChange(data, 'object')}"
        >
            <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"/>
-        <DataTableBoolean v-else-if="type === 'boolean'" 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="(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"/>
-        <DataTableDate v-else-if="type === 'date'" v-model:value="_valueType.format" 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="(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},
  });
 }

--- a/src/views/device/components/Metadata/Base/components/Function/InputParams.vue
+++ b/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>
--- a/yarn.lock
+++ b/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"
-  integrity sha512-34a8yGQpOHy3DsdRO+pc9Qn5HoeLSGhc2wJhVd22/EbyG5X08EENOsIu+Jg6o/ELmSB2gKnvvhpR4rxawN28hQ==
+  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#7d651f3d333ad52154f5dbbbcba7f6ed8e85e442"
+  integrity sha512-MtIwdFA2kq3s1rGLExYjjjuit05pjoIURDelUIE4swN3q9qh8QgHcjAOtwEor+UNp333LT2FnSQbMkfXctrqUQ==
  dependencies:
    "@vueuse/core" "^9.12.0"
    "@vueuse/router" "^9.13.0"