From 8dcb2a00e2bab333470e12733652b93464c27088 Mon Sep 17 00:00:00 2001
From: wangshuaiswim <shuai-1991@qq.com>
Date: Fri, 17 Feb 2023 17:43:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=89=A9=E6=A8=A1=E5=9E=8B=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E8=A1=A8=E5=8D=95=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/instance.ts                    |   7 +
 src/components/InputSelect/index.vue          |  40 ++++
 src/components/Metadata/ArrayParam/index.vue  |  67 +++++++
 .../Metadata/BooleanParam/index.vue           |  81 +++++++++
 src/components/Metadata/EnumParam/index.vue   | 160 ++++++++++++++++
 src/components/Metadata/JsonParam/index.vue   | 172 ++++++++++++++++++
 src/views/device/Instance/typings.d.ts        |   2 +
 .../Metadata/Base/Edit/PropertyForm.vue       |  99 ++++++++++
 .../Metadata/Base/Edit/ValueTypeForm.vue      | 151 +++++++++++++++
 .../components/Metadata/Base/Edit/index.vue   |   9 +-
 .../device/components/Metadata/Base/index.vue |  19 +-
 src/views/device/data.ts                      | 135 ++++++++++++++
 12 files changed, 931 insertions(+), 11 deletions(-)
 create mode 100644 src/components/InputSelect/index.vue
 create mode 100644 src/components/Metadata/ArrayParam/index.vue
 create mode 100644 src/components/Metadata/BooleanParam/index.vue
 create mode 100644 src/components/Metadata/EnumParam/index.vue
 create mode 100644 src/components/Metadata/JsonParam/index.vue
 create mode 100644 src/views/device/components/Metadata/Base/Edit/PropertyForm.vue
 create mode 100644 src/views/device/components/Metadata/Base/Edit/ValueTypeForm.vue
 create mode 100644 src/views/device/data.ts

diff --git a/src/api/device/instance.ts b/src/api/device/instance.ts
index a8a7213c..06aa8431 100644
--- a/src/api/device/instance.ts
+++ b/src/api/device/instance.ts
@@ -2,6 +2,7 @@ import { LocalStore } from '@/utils/comm'
 import server from '@/utils/request'
 import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable'
 import { DeviceInstance } from '@/views/device/Instance/typings'
+import { UnitType } from '@/views/device/Product/typings';
 
 /**
  * 删除设备物模型
@@ -242,3 +243,9 @@ export const unbindBatchDevice = (deviceId: string, data: Record<string, any>) =
  * @returns 
  */
 export const bindDevice = (deviceId: string, data: Record<string, any>) => server.post(`/device/gateway/${deviceId}/bind`, data)
+
+/**
+ * 获取单位列表
+ * @returns 单位列表
+ */
+export const getUnit = () => server.get<UnitType[]>(`/protocol/units`)
\ No newline at end of file
diff --git a/src/components/InputSelect/index.vue b/src/components/InputSelect/index.vue
new file mode 100644
index 00000000..61035f31
--- /dev/null
+++ b/src/components/InputSelect/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <a-select v-model:value="_value" mode="tags" :options="options" :size="size" @change="change"></a-select>
+</template>
+<script setup lang="ts" name="InputSelect">
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
+import { PropType } from 'vue';
+type valueType = string | number
+type Emits = {
+  (e: 'update:value', data: valueType | undefined): void;
+  (e: 'change'): void;
+};
+const emit = defineEmits<Emits>();
+const props = defineProps({
+  value: [String, Number],
+  options: {
+    type: Array as PropType<DefaultOptionType[]> | undefined,
+  },
+  size: String as PropType<SizeType>
+})
+const _value = ref<valueType[]>();
+watch(
+  () => props.value,
+  (val) => {
+    _value.value = val ? [val] : undefined
+  },
+  { immediate: true }
+)
+
+const change = (value: SelectValue) => {
+  const _val = (value as valueType[])
+  if (_val.length > 1) {
+    emit('update:value', _val.slice(_val.length - 1)?.[0])
+  } else {
+    emit('update:value', value?.[0])
+  }
+}
+</script>
+<style scoped lang="less">
+</style>
\ No newline at end of file
diff --git a/src/components/Metadata/ArrayParam/index.vue b/src/components/Metadata/ArrayParam/index.vue
new file mode 100644
index 00000000..576c63fa
--- /dev/null
+++ b/src/components/Metadata/ArrayParam/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <a-popover :visible="visible" placement="left">
+    <template #title>
+      <div style="display: flex; justify-content: space-between; align-items: center;">
+        <div style="width: 150px;">配置元素</div>
+        <close-outlined @click="visible = false" />
+      </div>
+    </template>
+    <template #content>
+      <div style="max-width: 400px;">
+        <a-form layout="vertical" :model="_value">
+          <value-type-form v-model:value="_value" :name="[]" isSub key="sub"></value-type-form>
+          <a-form-item label="说明" name="description" :rules="[
+            { max: 200, message: '最多可输入200个字符' },
+          ]">
+            <a-textarea v-model:value="_value.description" size="small"></a-textarea>
+          </a-form-item>
+        </a-form>
+      </div>
+    </template>
+    <a-button type="dashed" block @click="visible = true">
+      配置元素<edit-outlined class="item-icon" />
+    </a-button>
+  </a-popover>
+
+</template>
+<script setup lang="ts" name="ArrayParam">
+import ValueTypeForm from '@/views/device/components/Metadata/Base/Edit/ValueTypeForm.vue';
+import { EditOutlined, CloseOutlined } from '@ant-design/icons-vue';
+import { PropType } from 'vue';
+
+type ValueType = Record<any, any>;
+
+const props = defineProps({
+  value: {
+    type: Object as PropType<ValueType>,
+    default: () => ({ extends: {} })
+  },
+  name: {
+    type: Array as PropType<string[]>,
+    required: true
+  }
+})
+interface Emits {
+  (e: 'update:value', data: ValueType): void;
+}
+const emit = defineEmits<Emits>()
+
+const _value = computed({
+  get: () => props.value,
+  set: val => {
+    emit('update:value', val)
+  }
+})
+
+const visible = ref(false)
+
+onMounted(() => {
+  emit('update:value', { extends: {}, ...props.value })
+})
+</script>
+<style lang="less" scoped>
+.item-icon {
+  color: rgb(136, 136, 136);
+  font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Metadata/BooleanParam/index.vue b/src/components/Metadata/BooleanParam/index.vue
new file mode 100644
index 00000000..4e14a89a
--- /dev/null
+++ b/src/components/Metadata/BooleanParam/index.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="boolean-param">
+    <a-row :gutter="4">
+      <a-col :span="12">
+        <a-form-item label=" " :name="name.concat(['trueText'])" :rules="[
+          { required: true, message: '请输入trueText' },
+        ]">
+          <a-input v-model:value="value.trueText" placeholder="trueText" size="small" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item label="-" :name="name.concat(['trueValue'])" :rules="[
+          { required: true, message: '请输入trueValue' },
+        ]">
+          <a-input v-model:value="value.trueValue" placeholder="trueValue" size="small"/>
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item label=" " :name="name.concat(['falseText'])" :rules="[
+          { required: true, message: '请输入falseText' },
+        ]">
+          <a-input v-model:value="value.falseText" placeholder="falseText" size="small" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item label="-" :name="name.concat(['falseValue'])" :rules="[
+          { required: true, message: '请输入falseValue' },
+        ]">
+          <a-input v-model:value="value.falseValue" placeholder="falseValue" size="small" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script setup lang="ts" name="BooleanParam">
+import { PropType } from 'vue';
+type ModelValueType = Record<string, string>
+
+interface Emits {
+  (e: 'update:value', data: ModelValueType): void;
+}
+const emit = defineEmits<Emits>()
+const props = defineProps({
+  value: {
+    type: Object as PropType<ModelValueType>,
+    default: () => ({
+    })
+  },
+  name: {
+    type: Array as PropType<string[]>,
+    required: true
+  }
+})
+
+onMounted(() => {
+  emit('update:value',
+    {
+      trueText: '是',
+      trueValue: 'true',
+      falseText: '否',
+      falseValue: 'false',
+      ...props.value
+    })
+})
+
+</script>
+<style lang="less" scoped>
+.boolean-param {
+  :deep(.ant-form-item) {
+    flex-direction: row;
+
+    .ant-form-item-label {
+      >label {
+        margin: 0 10px 0 0;
+        height: 28px;
+        line-height: 28px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Metadata/EnumParam/index.vue b/src/components/Metadata/EnumParam/index.vue
new file mode 100644
index 00000000..bb9daf5d
--- /dev/null
+++ b/src/components/Metadata/EnumParam/index.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="enum-param">
+    <div class="list-item" v-for="(item, index) in _value" :key="index">
+      <div class="item-left">
+        <menu-outlined class="item-drag item-icon" />
+      </div>
+      <div class="item-middle item-editable">
+        <a-popover :visible="editIndex === index" placement="top">
+          <template #title>
+            <div class="edit-title" style="display: flex; justify-content: space-between; align-items: center;">
+              <div style="width: 150px;">枚举项配置</div>
+              <close-outlined @click="handleClose" />
+            </div>
+          </template>
+          <template #content>
+            <a-form :model="_value[index]" layout="vertical">
+              <a-form-item label="Value" name="value" :rules="[
+                { required: true, message: '请输入Value' },
+              ]">
+                <a-input v-model:value="_value[index].value" size="small"></a-input>
+              </a-form-item>
+              <a-form-item label="Text" name="text" :rules="[
+                { required: true, message: '请输入Text' },
+              ]">
+                <a-input v-model:value="_value[index].text" size="small"></a-input>
+              </a-form-item>
+            </a-form>
+          </template>
+          <div class="item-edit" @click="handleEdit(index)">
+            {{ item.text || '枚举项配置' }}
+            <edit-outlined class="item-icon" />
+          </div>
+        </a-popover>
+      </div>
+      <div class="item-right">
+        <delete-outlined @click="handleDelete(index)"/>
+      </div>
+    </div>
+    <a-button type="dashed" block @click="handleAdd">
+      <template #icon><plus-outlined class="item-icon" /></template>
+      新增枚举型
+    </a-button>
+  </div>
+</template>
+<script setup lang="ts" name="BooleanParam">
+import { PropType } from 'vue'
+import { MenuOutlined, EditOutlined, DeleteOutlined, PlusOutlined, CloseOutlined } from '@ant-design/icons-vue';
+
+type EnumType = {
+  text?: string,
+  value?: string,
+}
+
+interface Emits {
+  (e: 'update:value', data: EnumType[]): void;
+}
+const emit = defineEmits<Emits>()
+const props = defineProps({
+  value: {
+    type: Object as PropType<EnumType[]>,
+    default: () => ([])
+  }
+})
+
+const _value = ref<EnumType[]>([])
+watchEffect(() => {
+  _value.value = props.value
+})
+
+watch(_value,
+() => {
+  emit('update:value', _value.value)
+},
+{ deep: true })
+
+const editIndex = ref<number>(-1)
+const handleEdit = (index: number) => {
+  editIndex.value = index
+}
+const handleDelete = (index: number) => {
+  editIndex.value = -1
+  _value.value.splice(index, 1)
+}
+const handleClose = () => {
+  editIndex.value = -1
+}
+const handleAdd = () => {
+  _value.value.push({})
+  emit('update:value', _value.value)
+}
+</script>
+<style lang="less" scoped>
+.enum-param {
+  .list-item {
+    border: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    color: rgba(0, 0, 0, 0.85);
+    padding: 3px 6px;
+    margin-bottom: 10px;
+    background-color: #fff;
+    line-height: 26px;
+    font-size: 14px;
+
+    // .item-left {
+    //   .item-drag {
+    //     cursor: move;
+    //   }
+    // }
+    .item-edit {
+      cursor: pointer;
+    }
+
+    .item-icon {
+      color: rgb(136, 136, 136);
+      font-size: 12px;
+    }
+  }
+}
+
+:deep(.ant-form-item-label) {
+  line-height: 1;
+
+  >label {
+    font-size: 12px;
+
+    &.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+      font-size: 12px;
+    }
+  }
+}
+
+:deep(.ant-form-item-explain) {
+  font-size: 12px;
+}
+
+:deep(.ant-form-item-with-help) {
+  .ant-form-item-explain {
+    min-height: 20px;
+    line-height: 20px;
+  }
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 20px;
+
+  &.ant-form-item-with-help {
+    margin-bottom: 0;
+  }
+
+  input {
+    font-size: 12px;
+  }
+}
+
+:deep(.ant-input),
+:deep(.ant-select) {
+  font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Metadata/JsonParam/index.vue b/src/components/Metadata/JsonParam/index.vue
new file mode 100644
index 00000000..2b77587c
--- /dev/null
+++ b/src/components/Metadata/JsonParam/index.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="json-param">
+    <div class="list-item" v-for="(item, index) in _value" :key="`object_${index}`">
+      <div class="item-left">
+        <menu-outlined class="item-drag item-icon" />
+      </div>
+      <div class="item-middle item-editable">
+        <a-popover :visible="editIndex === index" placement="left">
+          <template #title>
+            <div class="edit-title" style="display: flex; justify-content: space-between; align-items: center;">
+              <div style="width: 150px;">配置参数</div>
+              <close-outlined @click="handleClose" />
+            </div>
+          </template>
+          <template #content>
+            <div style="max-width: 400px;">
+              <a-form :model="_value[index]" layout="vertical">
+                <a-form-item label="标识" name="id" :rules="[
+                  { required: true, message: '请输入标识' },
+                  { max: 64, message: '最多可输入64个字符' },
+                  {
+                    pattern: /^[a-zA-Z0-9_]+$/,
+                    message: '请输入英文或者数字或者-或者_',
+                  },
+                ]">
+                  <a-input v-model:value="_value[index].id" size="small"></a-input>
+                </a-form-item>
+                <a-form-item label="名称" name="name" :rules="[
+                  { required: true, message: '请输入名称' },
+                  { max: 64, message: '最多可输入64个字符' },
+                ]">
+                  <a-input v-model:value="_value[index].name" size="small"></a-input>
+                </a-form-item>
+                <value-type-form v-model:value="_value[index].valueType" :name="['valueType']" isSub
+                  key="json_sub"></value-type-form>
+              </a-form>
+            </div>
+          </template>
+          <div class="item-edit" @click="handleEdit(index)">
+            {{ item.name || '配置参数' }}
+            <edit-outlined class="item-icon" />
+          </div>
+        </a-popover>
+      </div>
+      <div class="item-right">
+        <delete-outlined @click="handleDelete(index)" />
+      </div>
+    </div>
+    <a-button type="dashed" block @click="handleAdd">
+      <template #icon><plus-outlined class="item-icon" /></template>
+      添加参数
+    </a-button>
+  </div>
+</template>
+<script setup lang="ts" name="JsonParam">
+import { PropType } from 'vue'
+import { MenuOutlined, EditOutlined, DeleteOutlined, PlusOutlined, CloseOutlined } from '@ant-design/icons-vue';
+import ValueTypeForm from '@/views/device/components/Metadata/Base/Edit/ValueTypeForm.vue';
+
+type JsonType = Record<any, any>;
+
+interface Emits {
+  (e: 'update:value', data: JsonType[]): void;
+}
+const emit = defineEmits<Emits>()
+const props = defineProps({
+  value: {
+    type: Object as PropType<JsonType[]>,
+    default: () => ([])
+  }
+})
+
+const _value = ref<JsonType[]>([])
+watchEffect(() => {
+  _value.value = props.value
+})
+
+watch(_value,
+  () => {
+    emit('update:value', _value.value)
+  },
+  { deep: true })
+
+const editIndex = ref<number>(-1)
+const handleEdit = (index: number) => {
+  editIndex.value = index
+}
+const handleDelete = (index: number) => {
+  editIndex.value = -1
+  _value.value.slice(index, 1)
+}
+const handleClose = () => {
+  editIndex.value = -1
+}
+const handleAdd = () => {
+  _value.value.push({
+    valueType: {
+      expands: {}
+    },
+  })
+  emit('update:value', _value.value)
+}
+</script>
+<style lang="less" scoped>
+.json-param {
+  .list-item {
+    border: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    color: rgba(0, 0, 0, 0.85);
+    padding: 3px 6px;
+    margin-bottom: 10px;
+    background-color: #fff;
+    line-height: 26px;
+    font-size: 14px;
+
+    // .item-left {
+    //   .item-drag {
+    //     cursor: move;
+    //   }
+    // }
+    .item-edit {
+      cursor: pointer;
+    }
+
+    .item-icon {
+      color: rgb(136, 136, 136);
+      font-size: 12px;
+    }
+  }
+}
+
+:deep(.ant-form-item-label) {
+  line-height: 1;
+
+  >label {
+    font-size: 12px;
+
+    &.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+      font-size: 12px;
+    }
+  }
+}
+
+:deep(.ant-form-item-explain) {
+  font-size: 12px;
+}
+
+:deep(.ant-form-item-with-help) {
+  .ant-form-item-explain {
+    min-height: 20px;
+    line-height: 20px;
+  }
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 20px;
+
+  &.ant-form-item-with-help {
+    margin-bottom: 0;
+  }
+
+  input {
+    font-size: 12px;
+  }
+}
+
+:deep(.ant-input),
+:deep(.ant-select) {
+  font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/device/Instance/typings.d.ts b/src/views/device/Instance/typings.d.ts
index 2fbe7f1c..e00c9319 100644
--- a/src/views/device/Instance/typings.d.ts
+++ b/src/views/device/Instance/typings.d.ts
@@ -1,3 +1,5 @@
+import { MetadataItem } from "../Product/typings";
+
 export type DeviceInstance = {
   id: string;
   name: string;
diff --git a/src/views/device/components/Metadata/Base/Edit/PropertyForm.vue b/src/views/device/components/Metadata/Base/Edit/PropertyForm.vue
new file mode 100644
index 00000000..8c58661c
--- /dev/null
+++ b/src/views/device/components/Metadata/Base/Edit/PropertyForm.vue
@@ -0,0 +1,99 @@
+<template>
+  <a-form ref="addFormRef" :model="form.model" layout="vertical">
+    <a-form-item label="标识" name="id" :rules="[
+      { required: true, message: '请输入标识' },
+      { max: 64, message: '最多可输入64个字符' },
+      {
+        pattern: /^[a-zA-Z0-9_]+$/,
+        message: '请输入英文或者数字或者-或者_',
+      },
+    ]">
+      <a-input v-model:value="form.model.id" size="small"></a-input>
+    </a-form-item>
+    <a-form-item label="名称" name="name" :rules="[
+      { required: true, message: '请输入名称' },
+      { max: 64, message: '最多可输入64个字符' },
+    ]">
+      <a-input v-model:value="form.model.name" size="small"></a-input>
+    </a-form-item>
+    <ValueTypeForm :name="['valueType']" v-model:value="form.model.valueType" key="property"></ValueTypeForm>
+    <a-form-item label="读写类型" :name="['expands', 'type']" :rules="[
+      { required: true, message: '请选择读写类型' },
+    ]">
+      <a-select v-model:value="form.model.expands.type" :options="form.expandsType" mode="multiple" size="small"></a-select>
+    </a-form-item>
+    <a-form-item label="说明" name="description" :rules="[
+      { max: 200, message: '最多可输入200个字符' },
+    ]">
+      <a-textarea v-model:value="form.model.description" size="small"></a-textarea>
+    </a-form-item>
+  </a-form>
+</template>
+<script setup lang="ts" name="PropertyForm">
+import ValueTypeForm from './ValueTypeForm.vue'
+
+const form = reactive({
+  model: {
+    valueType: {
+      expands: {}
+    },
+    expands: {}
+  } as any,
+  expandsType: [
+    {
+      label: '读',
+      value: 'read',
+    },
+    {
+      label: '写',
+      value: 'write',
+    },
+    {
+      label: '上报',
+      value: 'report',
+    },
+  ]
+})
+
+</script>
+<style scoped lang="less">
+:deep(.ant-form-item-label) {
+  line-height: 1;
+
+  >label {
+    font-size: 12px;
+
+    &.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+      font-size: 12px;
+    }
+  }
+}
+
+:deep(.ant-form-item-explain) {
+  font-size: 12px;
+}
+
+:deep(.ant-form-item-with-help) {
+  .ant-form-item-explain {
+    min-height: 20px;
+    line-height: 20px;
+  }
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 20px;
+
+  &.ant-form-item-with-help {
+    margin-bottom: 0;
+  }
+
+  input {
+    font-size: 12px;
+  }
+}
+
+:deep(.ant-input),
+:deep(.ant-select) {
+  font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Base/Edit/ValueTypeForm.vue b/src/views/device/components/Metadata/Base/Edit/ValueTypeForm.vue
new file mode 100644
index 00000000..2efa7b2a
--- /dev/null
+++ b/src/views/device/components/Metadata/Base/Edit/ValueTypeForm.vue
@@ -0,0 +1,151 @@
+<template>
+  <a-form-item label="数据类型" :name="name.concat(['type'])" :rules="[
+    { required: true, message: '请选择数据类型' },
+  ]">
+    <a-select v-model:value="value.type" :options="_dataTypeList" size="small"></a-select>
+  </a-form-item>
+  <a-form-item label="单位" :name="name.concat(['unit'])" v-if="['int', 'float', 'long', 'double'].includes(value.type)">
+    <InputSelect v-model:value="value.unit" :options="unit.unitOptions" size="small"></InputSelect>
+  </a-form-item>
+  <a-form-item label="精度" :name="name.concat(['scale'])" v-if="['float', 'double'].includes(value.type)">
+    <a-input-number v-model:value="value.scale" size="small" :min="0" :max="2147483647" :precision="0"
+      :default-value="2" style="width: 100%"></a-input-number>
+  </a-form-item>
+  <a-form-item label="布尔值" name="booleanConfig" v-if="['boolean'].includes(value.type)">
+    <BooleanParam 
+      :name="name"
+      v-model:value="_value"
+    ></BooleanParam>
+  </a-form-item>
+  <a-form-item label="枚举项" :name="name.concat(['elements'])" v-if="['enum'].includes(value.type)" :rules="[
+    { required: true, message: '请配置枚举项' }
+  ]">
+    <EnumParam v-model:value="value.elements"></EnumParam>
+  </a-form-item>
+  <a-form-item :name="name.concat(['expands', 'maxLength'])" v-if="['string', 'password'].includes(value.type)">
+    <template #label>
+      <a-space>
+        最大长度
+        <a-tooltip title="字节">
+          <question-circle-outlined style="color: rgb(136, 136, 136); font-size: 12px;" />
+        </a-tooltip>
+      </a-space>
+    </template>
+    <a-input-number v-model:value="value.expands.maxLength" size="small" :max="2147483647" :min="1" :precision="0"
+      style="width: 100%;"></a-input-number>
+  </a-form-item>
+  <a-form-item label="元素配置" :name="name.concat(['elementType'])" v-if="['array'].includes(value.type)">
+    <ArrayParam v-model:value="value.elementType" :name="name.concat(['elementType'])"></ArrayParam>
+  </a-form-item>
+  <a-form-item label="JSON对象" :name="name.concat(['properties'])" v-if="['object'].includes(value.type)">
+    <JsonParam v-model:value="value.jsonConfig" :name="name.concat(['properties'])"></JsonParam>
+  </a-form-item>
+  <a-form-item label="文件类型" :name="name.concat(['fileType'])" v-if="['file'].includes(value.type)" initialValue="url" :rules="[
+    { required: true, message: '请选择文件类型' },
+  ]">
+    <a-select v-model:value="value.fileType" :options="FileTypeList" size="small"></a-select>
+  </a-form-item>
+</template>
+<script lang="ts" setup mame="BaseForm">
+import { DataTypeList, FileTypeList } from '@/views/device/data';
+import { DefaultOptionType } from 'ant-design-vue/es/select';
+import { PropType } from 'vue'
+import { getUnit } from '@/api/device/instance';
+import { Store } from 'jetlinks-store';
+import InputSelect from '@/components/InputSelect/index.vue';
+import BooleanParam from '@/components/Metadata/BooleanParam/index.vue'
+import EnumParam from '@/components/Metadata/EnumParam/index.vue'
+import ArrayParam from '@/components/Metadata/ArrayParam/index.vue'
+import JsonParam from '@/components/Metadata/JsonParam/index.vue'
+
+type ValueType = Record<any, any>;
+const props = defineProps({
+  value: {
+    type: Object as PropType<ValueType>,
+    default: () => ({
+      extends: {}
+    })
+  },
+  isSub: {
+    type: Boolean,
+    default: false
+  },
+  name: {
+    type: Array as PropType<string[]>,
+    default: () => ([]),
+    required: true
+  }
+})
+
+interface Emits {
+  (e: 'update:value', data: ValueType): void;
+}
+const emit = defineEmits<Emits>()
+
+
+const _value = computed({
+  get: () => props.value,
+  set: val => {
+    emit('update:value', val)
+  }
+})
+
+const unit = {
+  unitOptions: [] as DefaultOptionType[],
+  getUnit: () => {
+    getUnit().then(resp => {
+      const _data = resp.result.map(item => ({
+        label: item.description,
+        value: item.id,
+      }));
+      // 缓存单位数据
+      Store.set('units', _data);
+      unit.unitOptions = _data;
+    })
+  },
+}
+unit.getUnit()
+
+const _dataTypeList = computed(() => props.isSub ? DataTypeList.filter(item => item.value !== 'array' && item.value !== 'object') : DataTypeList)
+</script>
+<style lang="less" scoped>
+:deep(.ant-form-item-label) {
+  line-height: 1;
+
+  >label {
+    font-size: 12px;
+
+    &.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+      font-size: 12px;
+    }
+  }
+}
+
+:deep(.ant-form-item-explain) {
+  font-size: 12px;
+}
+
+:deep(.ant-form-item-with-help) {
+  .ant-form-item-explain {
+    min-height: 20px;
+    line-height: 20px;
+  }
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 20px;
+
+  &.ant-form-item-with-help {
+    margin-bottom: 0;
+  }
+
+  input {
+    font-size: 12px;
+  }
+}
+
+:deep(.ant-input),
+:deep(.ant-select) {
+  font-size: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Base/Edit/index.vue b/src/views/device/components/Metadata/Base/Edit/index.vue
index 5a86c950..d783b65e 100644
--- a/src/views/device/components/Metadata/Base/Edit/index.vue
+++ b/src/views/device/components/Metadata/Base/Edit/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <a-drawer :mask-closable="false" width="25vw" visible :title="`新增${typeMapping[metadataStore.model.type]}`"
+  <a-drawer :mask-closable="false" width="25vw" visible :title="`${title}-${typeMapping[metadataStore.model.type]}`"
     @close="close" destroy-on-close :z-index="1000" placement="right">
     <template #extra>
       <a-button :loading="save.loading" type="primary" @click="save.saveMetadata">保存</a-button>
     </template>
-    <a-form ref="addFormRef" :model="form.model"></a-form>
+    <PropertyForm v-if="metadataStore.model.type === 'properties'"></PropertyForm>
   </a-drawer>
 </template>
 <script lang="ts" setup name="Edit">
@@ -19,6 +19,7 @@ import { Store } from 'jetlinks-store';
 import { SystemConst } from '@/utils/consts';
 import { detail } from '@/api/device/instance';
 import { DeviceInstance } from '@/views/device/Instance/typings';
+import PropertyForm from './PropertyForm.vue';
 
 interface Props {
   type: 'product' | 'device';
@@ -41,6 +42,8 @@ const close = () => {
   metadataStore.set('item', {})
 }
 
+const title = computed(() => metadataStore.model.action === 'add' ? '新增' : '修改')
+
 const addFormRef = ref<FormInstance>()
 /**
  * 保存按钮
@@ -113,7 +116,7 @@ const save = reactive({
 })
 
 const form = reactive({
-  model: {}
+  model: {} as Record<string, any>
 })
 </script>
 <style lang="less" scoped>
diff --git a/src/views/device/components/Metadata/Base/index.vue b/src/views/device/components/Metadata/Base/index.vue
index dc262b6d..1358ce61 100644
--- a/src/views/device/components/Metadata/Base/index.vue
+++ b/src/views/device/components/Metadata/Base/index.vue
@@ -2,8 +2,10 @@
   <JTable :loading="loading" :data-source="data" size="small" :columns="columns" row-key="id" model="TABLE">
     <template #headerTitle>
       <a-input-search v-model:value="searchValue" placeholder="请输入名称" @search="handleSearch"></a-input-search>
+    </template>
+    <template #rightExtraRender>
       <PermissionButton type="primary" :uhas-permission="`${permission}:update`" key="add" @click="handleAddClick"
-        :udisabled="operateLimits('add', type)" :tooltip="{
+        :disabled="operateLimits('add', type)" :tooltip="{
           title: operateLimits('add', type) ? '当前的存储方式不支持新增' : '新增',
         }">
         <template #icon>
@@ -31,20 +33,20 @@
       </a-tag>
     </template>
     <template #action="slotProps">
-      <PermissionButton :has-permission="`${permission}:update`" type="link" key="edit" style="padding: 0"
-        :disabled="operateLimits('updata', type)" @click="handleEditClick(slotProps)" :tooltip="{
+      <PermissionButton :uhas-permission="`${permission}:update`" type="link" key="edit" style="padding: 0"
+        :udisabled="operateLimits('updata', type)" @click="handleEditClick(slotProps)" :tooltip="{
           title: operateLimits('updata', type) ? '当前的存储方式不支持编辑' : '编辑',
         }">
         <EditOutlined />
-      </PermissionButton>,
-      <PermissionButton :has-permission="`${permission}:delete`" type="link" key="delete" style="padding: 0"
+      </PermissionButton>
+      <PermissionButton :uhas-permission="`${permission}:delete`" type="link" key="delete" style="padding: 0"
         :pop-confirm="{
           title: '确认删除？', onConfirm: async () => {
             await removeItem(slotProps);
           },
         }" :tooltip="{
-  title: '删除',
-}">
+          title: '删除',
+        }">
         <DeleteOutlined />
       </PermissionButton>
     </template>
@@ -58,12 +60,13 @@ import { useInstanceStore } from '@/store/instance'
 import { useProductStore } from '@/store/product'
 import { useMetadataStore } from '@/store/metadata'
 import PermissionButton from '@/components/PermissionButton/index.vue'
-import { PlusOutlined } from '@ant-design/icons-vue'
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue/es'
 import { SystemConst } from '@/utils/consts'
 import { Store } from 'jetlinks-store'
 import { asyncUpdateMetadata, removeMetadata } from '../metadata'
 import { detail } from '@/api/device/instance'
+import Edit from './Edit/index.vue'
 // import { detail } from '@/api/device/instance'
 // import { detail as productDetail } from '@/api/device/product'
 interface Props {
diff --git a/src/views/device/data.ts b/src/views/device/data.ts
new file mode 100644
index 00000000..eb571cd0
--- /dev/null
+++ b/src/views/device/data.ts
@@ -0,0 +1,135 @@
+import { isNoCommunity } from '@/utils/utils';
+
+export const DataTypeList: { label: string; value: string }[] = [
+  {
+    value: 'int',
+    label: 'int(整数型)',
+  },
+  {
+    value: 'long',
+    label: 'long(长整数型)',
+  },
+  {
+    value: 'float',
+    label: 'float(单精度浮点型)',
+  },
+  {
+    value: 'double',
+    label: 'double(双精度浮点数)',
+  },
+  {
+    value: 'string',
+    label: 'text(字符串)',
+  },
+  {
+    value: 'boolean',
+    label: 'boolean(布尔型)',
+  },
+  {
+    value: 'date',
+    label: 'date(时间型)',
+  },
+  {
+    value: 'enum',
+    label: 'enum(枚举)',
+  },
+  {
+    value: 'array',
+    label: 'array(数组)',
+  },
+  {
+    value: 'object',
+    label: 'object(结构体)',
+  },
+  {
+    value: 'file',
+    label: 'file(文件)',
+  },
+  {
+    value: 'password',
+    label: 'password(密码)',
+  },
+  {
+    value: 'geoPoint',
+    label: 'geoPoint(地理位置)',
+  },
+];
+
+export const PropertySource: { label: string; value: string }[] = isNoCommunity
+  ? [
+      {
+        value: 'device',
+        label: '设备',
+      },
+      {
+        value: 'manual',
+        label: '手动',
+      },
+      {
+        value: 'rule',
+        label: '规则',
+      },
+    ]
+  : [
+      {
+        value: 'device',
+        label: '设备',
+      },
+      {
+        value: 'manual',
+        label: '手动',
+      },
+    ];
+
+export const FileTypeList: { label: string; value: string }[] = [
+  {
+    label: 'URL(链接)',
+    value: 'url',
+  },
+  {
+    label: 'Base64(Base64编码)',
+    value: 'base64',
+  },
+  {
+    label: 'binary',
+    value: 'Binary(二进制)',
+  },
+];
+
+export const EventLevel: { label: string; value: string }[] = [
+  {
+    label: '普通',
+    value: 'ordinary',
+  },
+  {
+    label: '警告',
+    value: 'warn',
+  },
+  {
+    value: 'urgent',
+    label: '紧急',
+  },
+];
+
+export const DateTypeList = [
+  // {
+  //   label: 'String类型的UTC时间戳 (毫秒)',
+  //   value: 'string',
+  // },
+  {
+    label: 'yyyy-MM-dd',
+    value: 'yyyy-MM-dd',
+  },
+  {
+    label: 'yyyy-MM-DD HH:mm:ss',
+    value: 'yyyy-MM-DD HH:mm:ss',
+  },
+  // {
+  //   label: 'yyyy-MM-dd HH:mm:ss EE',
+  //   value: 'yyyy-MM-dd HH:mm:ss EE',
+  // },
+  // {
+  //   label: 'yyyy-MM-dd HH:mm:ss zzz',
+  //   value: 'yyyy-MM-dd HH:mm:ss zzz',
+  // },
+];