From 4d995d98ed06bcf5df57e2a4d415c077a6823605 Mon Sep 17 00:00:00 2001
From: XieYongHong <18010623010@163.com>
Date: Fri, 7 Jul 2023 17:22:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=89=A9=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B-=E5=8A=9F=E8=83=BD=E5=AE=9A=E4=B9=89-=E8=BE=93?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/components/Metadata/Base/Base.vue  |   4 +-
 .../components/Metadata/Base/columns.tsx      |  13 +-
 .../Metadata/Base/components/ConfigModal.vue  | 205 ++++++++++++++++++
 .../Metadata/Base/components/DataType.vue     |  47 +++-
 .../Base/components/DataTypeObjectChild.vue   |   4 +-
 .../Base/components/Events/ValueObject.vue    |   6 +-
 .../Base/components/Function/InputParams.vue  |   3 -
 yarn.lock                                     |   4 +-
 8 files changed, 258 insertions(+), 28 deletions(-)
 create mode 100644 src/views/device/components/Metadata/Base/components/ConfigModal.vue

diff --git a/src/views/device/components/Metadata/Base/Base.vue b/src/views/device/components/Metadata/Base/Base.vue
index 8f05c94a..8d0ab6eb 100644
--- a/src/views/device/components/Metadata/Base/Base.vue
+++ b/src/views/device/components/Metadata/Base/Base.vue
@@ -1,7 +1,7 @@
 <template>
     <j-data-table
         ref="tableRef"
-        v-model:data-source="dataSource"
+        :data-source="dataSource"
         :columns="columns"
         :height="560"
         :searchProps="{
@@ -246,7 +246,7 @@ const dataSource = ref<MetadataItem[]>(metadata.value || []);
 const tableRef = ref();
 
 // const columns = computed(() => MetadataMapping.get(props.type!));
-const {columns} = useColumns(props.type, target, dataSource, noEdit)
+const {columns} = useColumns(props.type, target, noEdit)
 
 const detailData = reactive({
   data: {},
diff --git a/src/views/device/components/Metadata/Base/columns.tsx b/src/views/device/components/Metadata/Base/columns.tsx
index da2de2f2..58c5137a 100644
--- a/src/views/device/components/Metadata/Base/columns.tsx
+++ b/src/views/device/components/Metadata/Base/columns.tsx
@@ -73,7 +73,7 @@ export const typeSelectChange = (type: string) => {
   return obj
 }
 
-export const useColumns = (type?: MetadataType, target?: 'device' | 'product', dataSource?: Ref<any[]>, noEdit?: Ref<any>) => {
+export const useColumns = (type?: MetadataType, target?: 'device' | 'product', noEdit?: Ref<any>) => {
 
   const BaseColumns: DataTableColumnProps[] = [
     {
@@ -83,12 +83,11 @@ export const useColumns = (type?: MetadataType, target?: 'device' | 'product', d
       form: {
         required: true,
         rules: [{
-          validator(va:any,value: any) {
-            const fieldIndex = va.field.split('.')[1]
-            const oldValue = (dataSource!.value || []).filter((_, index) => index != fieldIndex)
-            console.log(oldValue)
-            const hasId = oldValue.some((item) => item.id === value)
+          callback(rule:any,value: any, dataSource: any[]) {
             if (value) {
+              const field = rule.field.split('.')
+              const fieldIndex = Number(field[1])
+              const hasId = dataSource.some((item, index) => item.id === value && fieldIndex !== index)
               if (hasId) {
                 return Promise.reject('该标识存在')
               }
@@ -302,7 +301,7 @@ export const useColumns = (type?: MetadataType, target?: 'device' | 'product', d
 
   const columns = ref<any[]>([])
 
-  watch(() => JSON.stringify(dataSource!.value), () => {
+  watch(() => JSON.stringify(noEdit!.value), () => {
     console.log(noEdit!.value)
     switch(type) {
       case 'properties':
diff --git a/src/views/device/components/Metadata/Base/components/ConfigModal.vue b/src/views/device/components/Metadata/Base/components/ConfigModal.vue
new file mode 100644
index 00000000..e492ec86
--- /dev/null
+++ b/src/views/device/components/Metadata/Base/components/ConfigModal.vue
@@ -0,0 +1,205 @@
+<template>
+  <DataTableArray
+      v-if="type === 'array'"
+      v-model:value="myValue.elementType"
+      :unitOptions="options"
+      placement="topRight"
+      @confirm="valueChange"
+  >
+    <j-button>
+      <AIcon type="SettingOutlined" />
+      配置
+    </j-button>
+  </DataTableArray>
+  <DataTableObject
+      v-else-if="type === 'object'"
+      :value="myValue.properties"
+      placement="topRight"
+      :onAdd="objectAdd"
+      :columns="[
+                { title: '参数标识', dataIndex: 'id', type: 'text', width: 100 },
+                { title: '参数名称', dataIndex: 'name', type: 'text', width: 100 },
+                {
+                    title: '数据类型',
+                    type: 'components',
+                    dataIndex: 'valueType',
+                    components: {
+                      name: ValueObject,
+                      props: {
+                        filter: ['object']
+                      }
+                    },
+                    width: 100
+                },
+                {
+                  title: '其他配置',
+                  type: 'components',
+                  dataIndex: 'config',
+                  components: {
+                    name: DataTypeObjectChild
+                  },
+                  width: 100
+                },
+                {
+                  title: '操作',
+                  dataIndex: 'action',
+                  width: 60
+                }
+            ]"
+      @confirm="valueChange"
+  >
+    <template #valueType="{ data }">
+      {{ data.record.valueType?.type }}
+    </template>
+    <template #config="{ data }">
+      <OtherConfigInfo :value="data.record.valueType"></OtherConfigInfo>
+    </template>
+    <j-button>
+      <AIcon type="SettingOutlined" />
+      配置
+    </j-button>
+  </DataTableObject>
+  <DataTableEnum
+      v-else-if="type === 'enum'"
+      v-model:value="myValue"
+      placement="topRight"
+      @confirm="valueChange"
+  >
+    <j-button>
+      <AIcon type="SettingOutlined" />
+      配置
+    </j-button>
+  </DataTableEnum>
+  <DataTableBoolean
+      v-else-if="type === 'boolean'"
+      v-model:value="myValue"
+      placement="topRight"
+      @confirm="valueChange"
+  >
+    <j-button>
+      <AIcon type="SettingOutlined" />
+      配置
+    </j-button>
+  </DataTableBoolean>
+  <DataTableDouble
+      v-else-if="['float', 'double'].includes(type)"
+      :options="options"
+      v-model:value="myValue"
+      placement="topRight"
+      @confirm="valueChange"
+  >
+    <j-button>
+      <AIcon type="SettingOutlined" />
+      配置
+    </j-button>
+  </DataTableDouble>
+  <DataTableInteger
+      v-else-if="['int', 'long'].includes(type)"
+      :options="options"
+      v-model:value="myValue.unit"
+      placement="topRight"
+      @confirm="valueChange"
+  >
+    <j-button>
+      <AIcon type="SettingOutlined" />
+      配置
+    </j-button>
+  </DataTableInteger>
+  <DataTableFile
+      v-else-if="type === 'file'"
+      v-model:value="myValue.fileType"
+      placement="topRight"
+      @confirm="valueChange"
+  >
+    <j-button>
+      <AIcon type="SettingOutlined" />
+      配置
+    </j-button>
+  </DataTableFile>
+  <DataTableDate
+      v-else-if="type === 'date'"
+      v-model:value="myValue.format"
+      placement="topRight"
+      @confirm="valueChange"
+  >
+    <j-button>
+      <AIcon type="SettingOutlined" />
+      配置
+    </j-button>
+  </DataTableDate>
+  <DataTableString
+      v-else-if="['string', 'password'].includes(type)"
+      v-model:value="myValue.maxLength"
+      placement="topRight"
+  >
+    <j-button>
+      <AIcon type="SettingOutlined" />
+      配置
+    </j-button>
+  </DataTableString>
+  <span v-else>
+    无
+  </span>
+</template>
+
+<script setup lang="ts" name="ConfigModal">
+import {
+  DataTableTypeSelect,
+  DataTableArray,
+  DataTableString,
+  DataTableInteger,
+  DataTableDouble,
+  DataTableBoolean,
+  DataTableEnum,
+  DataTableFile,
+  DataTableDate,
+  DataTableObject,
+} from 'jetlinks-ui-components';
+import ValueObject from '@/views/device/components/Metadata/Base/components/Events/ValueObject.vue'
+import DataTypeObjectChild from '@/views/device/components/Metadata/Base/components/DataTypeObjectChild.vue'
+import OtherConfigInfo from './Events/OtherConfigInfo.vue'
+
+const props = defineProps({
+  value: {
+    type: Object,
+    default: () => ({})
+  },
+  valueKey: {
+    type: String,
+    default: 'valueType'
+  }
+})
+
+const emit = defineEmits(['update:value'])
+
+const objectAdd = () => {
+  return {
+    id: undefined,
+    name: undefined,
+    valueType: {
+      type: undefined
+    }
+  }
+}
+
+const options = ref([])
+
+const type = ref(props.value?.[props.valueKey]?.type)
+
+const myValue = ref(props.value?.[props.valueKey])
+
+const valueChange = () => {
+
+}
+
+watch(() => JSON.stringify(props.value), () => {
+  console.log(props.value)
+  type.value = props.value?.[props.valueKey]?.type
+  myValue.value = props.value?.[props.valueKey]
+})
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Base/components/DataType.vue b/src/views/device/components/Metadata/Base/components/DataType.vue
index 2dcbb9b4..fe0da6d4 100644
--- a/src/views/device/components/Metadata/Base/components/DataType.vue
+++ b/src/views/device/components/Metadata/Base/components/DataType.vue
@@ -12,27 +12,51 @@
         />
         <DataTableObject
             v-else-if="type === 'object'"
-            v-model:value="_valueType.properties"
+            :value="_valueType.properties"
             placement="topRight"
             :columns="[
-                { title: '参数标识', dataIndex: 'id', type: 'text', width: 100 },
-                { title: '参数名称', dataIndex: 'name', type: 'text', width: 100 },
+                {
+                  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: '其他配置',
-                  type: 'components',
                   dataIndex: 'config',
-                  components: {
-                    name: DataTypeObjectChild
-                  },
                   width: 100
                 },
                 {
@@ -47,7 +71,8 @@
                 {{ data.record.valueType?.type }}
             </template>
             <template #config="{ data }">
-                <OtherConfigInfo :value="data.record.valueType"></OtherConfigInfo>
+<!--                <OtherConfigInfo :value="data.record.valueType"></OtherConfigInfo>-->
+              <ConfigModal v-model:value="data.record" />
             </template>
         </DataTableObject>
         <DataTableEnum v-else-if="type === 'enum'" v-model:value="_valueType" placement="topRight" @confirm="valueChange"/>
@@ -78,7 +103,7 @@
 
 <script setup lang="ts" name="MetadataDataType">
 import { getUnit } from '@/api/device/instance';
-import {InputParams, ValueObject, OtherConfigInfo, ConstraintSelect} from '../components'
+import { ValueObject } from '../components'
 import {
     DataTableTypeSelect,
     DataTableArray,
@@ -91,9 +116,9 @@ import {
     DataTableDate,
     DataTableObject,
 } from 'jetlinks-ui-components';
-import DataTypeObjectChild from './DataTypeObjectChild.vue';
 import { cloneDeep } from 'lodash-es';
 import { typeSelectChange } from '../columns'
+import ConfigModal from './ConfigModal.vue'
 
 const props = defineProps({
     value: {
@@ -143,7 +168,7 @@ watch(
             });
         }
     },
-    { immediate: true, deep: true },
+    { immediate: true },
 );
 
 </script>
diff --git a/src/views/device/components/Metadata/Base/components/DataTypeObjectChild.vue b/src/views/device/components/Metadata/Base/components/DataTypeObjectChild.vue
index 4de56128..de821096 100644
--- a/src/views/device/components/Metadata/Base/components/DataTypeObjectChild.vue
+++ b/src/views/device/components/Metadata/Base/components/DataTypeObjectChild.vue
@@ -21,7 +21,7 @@
             <DataTableDate v-else-if="formData.type === 'date'" v-model:value="formData.date" placement="topRight"/>
             <DataTableString
                 v-else-if="['string', 'password'].includes(formData.type)"
-                v-model:value="formData.expands.maxLength"
+                v-model:value="formData.maxLength"
                 placement="topRight"
             />
     </div>
@@ -103,7 +103,7 @@ const text = computed(() => {
                 return value?.trueText ? `${ value?.trueText }-${ value.trueValue }; ${ value.falseText }-${ value.falseValue }` : '';
             case 'string':
             case 'password':
-                return value?.expands?.maxLength;
+                return value?.maxLength;
             case 'int':
             case 'long':
                 return '无'
diff --git a/src/views/device/components/Metadata/Base/components/Events/ValueObject.vue b/src/views/device/components/Metadata/Base/components/Events/ValueObject.vue
index 9c876ed6..7deefa20 100644
--- a/src/views/device/components/Metadata/Base/components/Events/ValueObject.vue
+++ b/src/views/device/components/Metadata/Base/components/Events/ValueObject.vue
@@ -1,5 +1,5 @@
 <template>
-    <DataTableTypeSelect v-model:value="type" :filter="['object']" @change="change">
+    <DataTableTypeSelect v-model:value="type" @change="change" :filter="filter">
         
     </DataTableTypeSelect>
 </template>
@@ -33,6 +33,10 @@ const props = defineProps({
         type: Array as PropType<{ label: string; value: string }[]>,
         default: () => [],
     },
+    filter: {
+      type: Array,
+      default: undefined
+    }
 });
 
 
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 22e07450..4419c38a 100644
--- a/src/views/device/components/Metadata/Base/components/Function/InputParams.vue
+++ b/src/views/device/components/Metadata/Base/components/Function/InputParams.vue
@@ -111,9 +111,6 @@ watch(() => JSON.stringify(dataSource.value), () => {
       width: 100,
       components: {
         name: ConstraintSelect,
-        props: {
-          name: ['expands', 'required']
-        }
       }
     },
     {
diff --git a/yarn.lock b/yarn.lock
index 44bcd418..8025a1ef 100644
--- 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#4fed08d639873b642911b808d94ef64856c62cd1"
-  integrity sha512-bFdN1VdrOR8bmHlE81h5MoTSSwpXPS/qjW0ppDZU55qm8GtNszZfGBi8VeWD2Kvn1oTM43ldyVcGVqipl2DtMQ==
+  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#552bad6c9ef733c941168c01fcfe594317add9e2"
+  integrity sha512-34a8yGQpOHy3DsdRO+pc9Qn5HoeLSGhc2wJhVd22/EbyG5X08EENOsIu+Jg6o/ELmSB2gKnvvhpR4rxawN28hQ==
   dependencies:
     "@vueuse/core" "^9.12.0"
     "@vueuse/router" "^9.13.0"