From aaa8c1498f265bc32baa8dfdb673102192f49b67 Mon Sep 17 00:00:00 2001
From: XieYongHong <18010623010@163.com>
Date: Mon, 3 Jul 2023 20:01:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=89=A9=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B-=E5=8A=9F=E8=83=BD=E6=97=A0=E6=B3=95=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/components/Metadata/Base/Base.vue  | 66 +++++++++++++++++--
 .../components/Metadata/Base/columns.tsx      | 16 +++--
 .../Metadata/Base/components/DataType.vue     | 10 ++-
 .../Base/components/Events/ConfigParams.vue   | 42 ++++++++----
 .../Base/components/Function/InputParams.vue  | 38 ++++++++---
 .../Base/components/Function/OutputParams.vue | 56 ++++++++++------
 .../Metadata/Base/components/Tags/Type.vue    | 55 ++++++++++++++++
 .../Metadata/Base/components/index.ts         |  1 +
 yarn.lock                                     |  4 +-
 9 files changed, 230 insertions(+), 58 deletions(-)
 create mode 100644 src/views/device/components/Metadata/Base/components/Tags/Type.vue

diff --git a/src/views/device/components/Metadata/Base/Base.vue b/src/views/device/components/Metadata/Base/Base.vue
index 62775f29..debb3a1a 100644
--- a/src/views/device/components/Metadata/Base/Base.vue
+++ b/src/views/device/components/Metadata/Base/Base.vue
@@ -12,7 +12,7 @@
               v-if="!dataSource.length"
               :hasPermission="`${permission}:update`"
               key="add"
-              @click="handleAddClick"
+              @click="handleAddClick()"
               :disabled="hasOperate('add', type)"
               :tooltip="{
                     title: hasOperate('add', type)
@@ -74,6 +74,7 @@
                     {{ expandsType[item] }}
                 </j-tag>
             </template>
+
             <template v-if="column.dataIndex === 'action'"> </template>
         </template>
         <template #valueType="{ data }">
@@ -95,9 +96,17 @@
           {{ levelMap?.[data.record.expands?.level] || '-' }}
         </template>
         <template #properties="{ data }">
-          {{ data.record.valueType.properties?.map(item => item.name).join(',') }}
+          {{ data.record.valueType?.properties?.map(item => item.name).join(',') }}
         </template>
-        <template #other="{ data, }">
+        <template #outInput>
+          object
+        </template>
+        <template #readType="{data}">
+          <j-tag v-for="item in data.record?.expands?.type || []" :key="item">
+            {{ expandsType[item] }}
+          </j-tag>
+        </template>
+        <template #other="{ data }">
           配置
         </template>
         <template #action="{data}">
@@ -254,9 +263,8 @@ const handleSearch = (searchValue: string) => {
         : metadata.value;
 };
 
-const handleAddClick = (_data: any, index?: number) => {
-
-  const newObject = _data || {
+const getDataByType = () => {
+  let _data: any = {
     id: undefined,
     name: undefined,
     expands: {
@@ -267,6 +275,50 @@ const handleAddClick = (_data: any, index?: number) => {
     }
   }
 
+  if (props.type === 'functions') {
+    _data = {
+      id: undefined,
+      name: undefined,
+      async: false,
+      inputs: [],
+      output: {
+        type: undefined
+      }
+    }
+  } else if (props.type === 'events') {
+    _data = {
+      id: undefined,
+      name: undefined,
+      async: false,
+      valueType: {
+        type: 'object',
+        properties: []
+      },
+      expands: {
+        level: undefined
+      }
+
+    }
+  } else if (props.type === 'tags') {
+    _data = {
+      id: undefined,
+      name: undefined,
+      valueType: {
+        type: undefined
+      },
+      expands: {
+        type: undefined
+      }
+    }
+  }
+
+  return _data
+}
+
+const handleAddClick = (_data?: any, index?: number) => {
+
+  const newObject = _data || getDataByType()
+
   tableRef.value?.addItem?.(newObject, index)
 
   const data = [...dataSource.value];
@@ -299,7 +351,7 @@ const handleSaveClick = async () => {
     if(resp && resp.length) {
       const virtual: any[] = [];
       const arr = resp.map((item: any) => {
-        if(item.expands.virtualRule) {
+        if(item.expands?.virtualRule) {
           virtual.push({
             ...item.expands.virtualRule,
             propertyId: item.id
diff --git a/src/views/device/components/Metadata/Base/columns.tsx b/src/views/device/components/Metadata/Base/columns.tsx
index cf6d170b..b1f0a2f6 100644
--- a/src/views/device/components/Metadata/Base/columns.tsx
+++ b/src/views/device/components/Metadata/Base/columns.tsx
@@ -1,17 +1,18 @@
 import { ColumnProps } from "ant-design-vue/es/table";
-import { DataType, Source, InputParams, OtherSetting, OutputParams, ConfigParams } from './components'
+import { DataType, Source, InputParams, OtherSetting, OutputParams, ConfigParams, TagsType } from './components'
 import SelectColumn from './components/Events/SelectColumn.vue';
 import AsyncSelect from './components/Function/AsyncSelect.vue';
 import { EventLevel } from "@/views/device/data";
 interface DataTableColumnProps extends ColumnProps {
   type?: string,
   components?: {
-    name: any
+    name?: any
     [key: string]: any
   }
   form?: {
     rules: any[]
-  }
+  },
+  options?: any[]
 }
 
 const SourceMap = {
@@ -54,7 +55,8 @@ const EventColumns: DataTableColumnProps[] = BaseColumns.concat([
   },
   {
     title: '输出参数',
-    dataIndex: 'valueType',
+    dataIndex: 'outInput',
+    type: 'components',
   },
   {
     title: '配置参数',
@@ -195,7 +197,11 @@ const TagColumns: DataTableColumnProps[] = BaseColumns.concat([
   },
   {
     title: '读写类型',
-    dataIndex: 'type',
+    dataIndex: 'readType',
+    type: 'components',
+    components: {
+      name: TagsType
+    }
   },
   {
     title: '说明',
diff --git a/src/views/device/components/Metadata/Base/components/DataType.vue b/src/views/device/components/Metadata/Base/components/DataType.vue
index 7773cbf6..606ad348 100644
--- a/src/views/device/components/Metadata/Base/components/DataType.vue
+++ b/src/views/device/components/Metadata/Base/components/DataType.vue
@@ -1,6 +1,8 @@
 <template>
     <div class="metadata-type">
+      <div class="metadata-type-select">
         <DataTableTypeSelect v-model:value="type" @change="typeChange" />
+      </div>
         <DataTableArray
             v-if="type === 'array'"
             v-model:value="_valueType.elementType"
@@ -143,8 +145,12 @@ watch(
     gap: 12px;
     align-items: center;
 
-    :deep(.j-data-table-config--icon) {
-        padding-right: 12px;
+    .metadata-type-select {
+      flex: 1;
     }
+
+  :deep(.j-data-table-config--icon) {
+    padding-right: 12px;
+  }
 }
 </style>
diff --git a/src/views/device/components/Metadata/Base/components/Events/ConfigParams.vue b/src/views/device/components/Metadata/Base/components/Events/ConfigParams.vue
index 12a2cebf..369a95ea 100644
--- a/src/views/device/components/Metadata/Base/components/Events/ConfigParams.vue
+++ b/src/views/device/components/Metadata/Base/components/Events/ConfigParams.vue
@@ -1,12 +1,14 @@
 <template>
     <div class="metadata-config-params">
+      <div class="metadata-config-value">
         {{ value?.map((item: any) => item.name).join(',') }}
-        <DataTableObject v-model:value="value" :columns="columns">
+      </div>
+        <DataTableObject v-model:value="value" :columns="columns" @confirm="confirm">
             <template #valueType="{ data }">
-                <span>{{ data.data.record.valueType?.type }}</span>
+                <span>{{ data.record.valueType?.type }}</span>
             </template>
             <template #config="{ data }">
-                <OtherConfigInfo :value="data.data.record.valueType"></OtherConfigInfo>
+                <OtherConfigInfo :value="data.record.valueType"></OtherConfigInfo>
             </template>
         </DataTableObject>
     </div>
@@ -41,6 +43,8 @@ const columns = [
     },
     {
         title: '操作',
+        dataIndex: 'action',
+        width: 80
     },
 ];
 
@@ -72,6 +76,16 @@ const change = (v: string) => {
     emit('change', v);
 };
 
+const confirm = () => {
+  emit('update:value', {
+    ...props.value,
+    valueType: {
+      properties: value.value,
+      type: props.value.valueType.type,
+    }
+  })
+}
+
 watch(
     () => props.value,
     (newV) => {
@@ -80,15 +94,17 @@ watch(
     { immediate: true },
 );
 
-watch(() => value.value, () => {
-    emit('update:value', {
-        ...props.value,
-        valueType: {
-            properties: value.value,
-            type: props.value.valueType.type,
-        }
-    })
-})
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+.metadata-config-params {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding-right: 12px;
+
+  .metadata-config-value {
+    flex: 1;
+  }
+}
+</style>
diff --git a/src/views/device/components/Metadata/Base/components/Function/InputParams.vue b/src/views/device/components/Metadata/Base/components/Function/InputParams.vue
index a5353135..4d56b1a5 100644
--- a/src/views/device/components/Metadata/Base/components/Function/InputParams.vue
+++ b/src/views/device/components/Metadata/Base/components/Function/InputParams.vue
@@ -1,13 +1,19 @@
 <template>
-    {{ value?.map((item) => item.name).join(',') }}
+  <div class="input-params">
+    <div class="input-params-text">
+      {{ value?.map((item) => item.name).join(',') }}
+    </div>
     <DataTableObject v-model:value="value" :columns="columns">
-        <template #valueType="{ data }">
-            <span>{{ data.data.record.valueType?.type }}</span>
-        </template>
-        <template #config="{ data }">
-            <OtherConfigInfo :value="data.data.record.valueType"></OtherConfigInfo>
-        </template>
+      <template #valueType="{ data }">
+        <span>{{ data.record.valueType?.type }}</span>
+      </template>
+      <template #config="{ data }">
+        <OtherConfigInfo :value="data.record.valueType"></OtherConfigInfo>
+      </template>
     </DataTableObject>
+  </div>
+
+
 </template>
 
 <script setup lang="ts" name="InputParams">
@@ -39,6 +45,8 @@ const columns = [
     },
     {
         title: '操作',
+        dataIndex: 'action',
+        width: 80
     },
 ];
 
@@ -87,4 +95,18 @@ watch(() => value.value, () => {
 })
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+.input-params{
+  display: flex;
+  gap: 12px;
+  align-items: center;
+
+  .input-params-text {
+    flex: 1;
+  }
+
+  :deep(.j-data-table-config--icon) {
+    padding-right: 12px;
+  }
+}
+</style>
diff --git a/src/views/device/components/Metadata/Base/components/Function/OutputParams.vue b/src/views/device/components/Metadata/Base/components/Function/OutputParams.vue
index 8cd2c778..f1b1eaf8 100644
--- a/src/views/device/components/Metadata/Base/components/Function/OutputParams.vue
+++ b/src/views/device/components/Metadata/Base/components/Function/OutputParams.vue
@@ -1,9 +1,12 @@
 <template>
     <div class="metadata-type">
+      <div class="metadata-type-select">
         <DataTableTypeSelect v-model:value="type" @change="typeChange" />
+      </div>
         <DataTableArray
             v-if="type === 'array'"
             v-model:value="data.elementType"
+            @confirm="valueChange"
         />
         <DataTableObject
             v-else-if="type === 'object'"
@@ -31,24 +34,28 @@
                   title: '操作'
                 }
             ]"
+            @confirm="valueChange"
         />
-        <DataTableEnum v-else-if="type === 'enum'" v-model:value="data" />
-        <DataTableBoolean v-else-if="type === 'boolean'" v-model:value="data" />
+        <DataTableEnum v-else-if="type === 'enum'" v-model:value="data" @confirm="valueChange"/>
+        <DataTableBoolean v-else-if="type === 'boolean'" v-model:value="data" @confirm="valueChange"/>
         <DataTableDouble
             v-else-if="['float', 'double'].includes(type)"
             :options="options"
             v-model:value="data"
+            @confirm="valueChange"
         />
         <DataTableInteger
             v-else-if="['int', 'long'].includes(type)"
             :options="options"
             v-model:value="data.unit"
+            @confirm="valueChange"
         />
-        <DataTableFile v-else-if="type === 'file'" v-model:value="data.fileType"/>
-        <DataTableDate v-else-if="type === 'date'" v-model:value="data.date"/>
+        <DataTableFile v-else-if="type === 'file'" v-model:value="data.fileType" @confirm="valueChange"/>
+        <DataTableDate v-else-if="type === 'date'" v-model:value="data.date" @confirm="valueChange"/>
         <DataTableString
             v-else-if="['string', 'password'].includes(type)"
             v-model:value="data.expands.maxLength"
+            @confirm="valueChange"
         />
     </div>
 </template>
@@ -80,8 +87,8 @@ const props = defineProps({
 const options = ref<{ label: string; value: string }[]>([]);
 const emit = defineEmits(['update:value']);
 
-const type = ref(props.value?.output.type);
-const data = ref(cloneDeep(props.value.output));
+const type = ref(props.value?.output?.type);
+const data = ref(cloneDeep(props.value?.output));
 
 const typeChange = () => {
     emit('update:value', {
@@ -93,7 +100,8 @@ const typeChange = () => {
 watch(
     () => props.value,
     () => {
-        type.value = props.value?.output.type;
+        type.value = props.value?.output?.type;
+        data.value = props.value?.output
         if (['float', 'double', 'int', 'long'].includes(type.value)) {
             const res = getUnit().then((res) => {
                 if (res.success) {
@@ -108,22 +116,28 @@ watch(
     { immediate: true, deep: true },
 );
 
-watch(
-    () => data.value,
-    (newVal) => {
-        emit('update:value', {
-            ...props.value,
-            output: {...newVal, type: type.value},
-        });
-    },
-    { deep: true },
-);
+const valueChange = () => {
+  emit('update:value', {
+    ...props.value,
+    output: {...data.value, type: type.value},
+  });
+}
+
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .metadata-type {
-    display: flex;
-    gap: 12px;
-    align-items: center;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+
+
+  .metadata-type-select {
+    flex: 1;
+  }
+
+  :deep(.j-data-table-config--icon) {
+    padding-right: 12px;
+  }
 }
 </style>
diff --git a/src/views/device/components/Metadata/Base/components/Tags/Type.vue b/src/views/device/components/Metadata/Base/components/Tags/Type.vue
new file mode 100644
index 00000000..5de16344
--- /dev/null
+++ b/src/views/device/components/Metadata/Base/components/Tags/Type.vue
@@ -0,0 +1,55 @@
+<template>
+  <j-select
+      v-model:value="myValue"
+      mode="multiple"
+      :options="[
+        { label: '读', value: 'read'},
+        { label: '写', value: 'write'},
+        { label: '上报', value: 'report'},
+      ]"
+      placeholder="请选择读写类型"
+      @blur="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+
+import type {PropType} from "vue";
+
+type Emit = {
+(e: 'update:value', data: any): void
+}
+
+const props = defineProps({
+  value: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits<Emit>()
+
+const myValue = ref<Array<string>>([])
+
+const onChange = () =>{
+  const _data = {
+    ...props.value
+  }
+  console.log(props.value)
+  _data.expands['type'] = myValue.value
+  console.log(_data, myValue.value)
+  emit('update:value', {
+    ..._data
+  })
+}
+
+watch(() => props.value.expands, () => {
+  console.log(props.value)
+  myValue.value = props.value?.expands?.type
+}, { immediate: true})
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Base/components/index.ts b/src/views/device/components/Metadata/Base/components/index.ts
index fe968889..e52ae4fa 100644
--- a/src/views/device/components/Metadata/Base/components/index.ts
+++ b/src/views/device/components/Metadata/Base/components/index.ts
@@ -7,3 +7,4 @@ export { default as OutputParams } from './Function/OutputParams.vue';
 export { default as ValueObject } from './Events/ValueObject.vue';
 export { default as OtherConfigInfo } from './Events/OtherConfigInfo.vue';
 export { default as ConfigParams } from './Events/ConfigParams.vue';
+export { default as TagsType } from './Tags/Type.vue'
diff --git a/yarn.lock b/yarn.lock
index c64804d0..4d690b27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3825,8 +3825,8 @@ jetlinks-store@^0.0.3:
 
 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#ff46844f8f1b9f6e4358b099014cbe5cc80b9630"
-  integrity sha512-oc9MeVwJqar4LIICQWfNHFtD76h/Yl5v+xaj4u5xjIhDpvs1vwz/em9eHwToQ/yVCUShaexmweOOzhAN7od1cw==
+  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#ca6ce161bc1ee4d0f6ecaa27a5dbc337b7405b4c"
+  integrity sha512-FILHvwT5ndedwRuL1vxqpj6X+0P/MIfegWRoz46hdjpJvnWbhfTHIJ+5bvLH49Bgh8RJ9khXXevYO073NSlyUw==
   dependencies:
     "@vueuse/core" "^9.12.0"
     "@vueuse/router" "^9.13.0"