From 0d6e9d8ae8c375dcf5c20aea3920be59a4ee6f1d Mon Sep 17 00:00:00 2001
From: XieYongHong <18010623010@163.com>
Date: Tue, 4 Jul 2023 18:19:33 +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=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PermissionButton/index.vue     |  2 +-
 .../device/components/Metadata/Base/Base.vue  | 15 ++-
 .../Metadata/Base/DetailModal/EventModal.vue  | 87 ++++++++++++++++
 .../Base/DetailModal/FunctionModal.vue        | 81 +++++++++++++++
 .../Base/DetailModal/PropertiesModal.vue      | 99 ++++++++++++++++---
 .../Metadata/Base/DetailModal/index.ts        |  4 +-
 .../components/Metadata/Base/columns.tsx      |  3 +-
 .../Metadata/Base/components/DataType.vue     |  6 ++
 .../components/Events/OtherConfigInfo.vue     |  2 +-
 .../Metadata/Base/components/Source.vue       |  1 +
 yarn.lock                                     |  4 +-
 11 files changed, 283 insertions(+), 21 deletions(-)
 create mode 100644 src/views/device/components/Metadata/Base/DetailModal/EventModal.vue
 create mode 100644 src/views/device/components/Metadata/Base/DetailModal/FunctionModal.vue

diff --git a/src/components/PermissionButton/index.vue b/src/components/PermissionButton/index.vue
index 1b8e41d7..65310577 100644
--- a/src/components/PermissionButton/index.vue
+++ b/src/components/PermissionButton/index.vue
@@ -84,7 +84,7 @@ const props = defineProps({
     type: Object as PropType<PopconfirmProps>,
   },
   hasPermission: {
-    type: String || Array || Boolean,
+    type: [String , Array, Boolean],
   },
   style: {
     type: Object as PropType<CSSProperties>
diff --git a/src/views/device/components/Metadata/Base/Base.vue b/src/views/device/components/Metadata/Base/Base.vue
index debb3a1a..288252b8 100644
--- a/src/views/device/components/Metadata/Base/Base.vue
+++ b/src/views/device/components/Metadata/Base/Base.vue
@@ -176,6 +176,16 @@
         :data="detailData.data"
         @cancel="cancelDetailModal"
     />
+    <FunctionModal
+        v-else-if="type === 'functions' && detailData.visible"
+        :data="detailData.data"
+        @cancel="cancelDetailModal"
+    />
+    <EventModal
+        v-else-if="type === 'events' && detailData.visible"
+        :data="detailData.data"
+        @cancel="cancelDetailModal"
+    />
 </template>
 
 <script setup lang="ts" name="BaseMetadata">
@@ -200,7 +210,7 @@ import { DeviceInstance } from '@/views/device/Instance/typings';
 import { onlyMessage } from '@/utils/comm';
 import {omit} from "lodash-es";
 import {useAction} from "@/views/device/components/Metadata/Base/hooks/useAction";
-import { PropertiesModal } from './DetailModal'
+import { PropertiesModal, FunctionModal, EventModal } from './DetailModal'
 
 const props = defineProps({
     // target: {
@@ -333,7 +343,7 @@ const handleAddClick = (_data?: any, index?: number) => {
 
 const copyItem = (record: any, index: number) => {
   const copyData = omit(record, ['_uuid'])
-  copyData.id = `copy_${copyData.id}`
+  copyData.id = `copy_${copyData.id}`.slice(0,64)
   handleAddClick(copyData, index)
 }
 
@@ -390,6 +400,7 @@ const handleSaveClick = async () => {
       const _data = updateMetadata(props.type!, arr, _detail, updateStore)
       const result = await asyncUpdateMetadata(target, _data)
       if(result.success) {
+        dataSource.value = resp
         onlyMessage('操作成功！')
       }
     }
diff --git a/src/views/device/components/Metadata/Base/DetailModal/EventModal.vue b/src/views/device/components/Metadata/Base/DetailModal/EventModal.vue
new file mode 100644
index 00000000..c913d632
--- /dev/null
+++ b/src/views/device/components/Metadata/Base/DetailModal/EventModal.vue
@@ -0,0 +1,87 @@
+<template>
+  <j-modal
+      visible
+      title="事件详情"
+      width="650px"
+      @cancel="cancel"
+      @ok="ok"
+  >
+    <j-descriptions
+        :column="1"
+        :labelStyle="{
+          width: '72px',
+          textAlign: 'right',
+          justifyContent: 'end'
+        }"
+    >
+      <a-descriptions-item label="事件标识">{{ data.id }}</a-descriptions-item>
+      <a-descriptions-item label="事件名称">{{ data.name }}</a-descriptions-item>
+      <a-descriptions-item label="事件级别">{{ EventLevel[data.expands.level] }}</a-descriptions-item>
+      <a-descriptions-item label="输出参数"></a-descriptions-item>
+      <a-descriptions-item>
+        <j-table
+            :columns="dataTypeTable.columns"
+            :dataSource="dataTypeTable.dataSource"
+            :pagination="false"
+            :scroll="{y: 200}"
+            size="small"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'type'">
+              {{ record.valueType?.type }}
+            </template>
+            <template v-if="column.dataIndex === 'valueType'">
+              <OtherConfigInfo :value="record.valueType" />
+            </template>
+          </template>
+        </j-table>
+      </a-descriptions-item>
+    </j-descriptions>
+    <template #footer>
+      <j-button type="primary" @click="ok">确认</j-button>
+    </template>
+  </j-modal>
+</template>
+
+<script setup lang="ts" name="EventModal">
+import {OtherConfigInfo} from "@/views/device/components/Metadata/Base/components";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const EventLevel = {
+  ordinary: '普通',
+  warn: '警告',
+  urgent: '紧急'
+}
+
+const dataTypeTable = reactive<{ columns: any[], dataSource: any }>({
+  columns: [
+    { title: '参数标识', dataIndex: 'id', width: 150, ellipsis: true },
+    { title: '参数名称', dataIndex: 'name', width: 150, ellipsis: true },
+    { title: '数据类型', dataIndex: 'type', width: 100 },
+    { title: '其它配置', dataIndex: 'valueType', ellipsis: true },
+  ],
+  dataSource: props.data?.valueType?.properties || []
+})
+
+const emit = defineEmits(['cancel'])
+const cancel = () => {
+  emit('cancel')
+}
+
+const ok = () => {
+  cancel()
+}
+
+
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Base/DetailModal/FunctionModal.vue b/src/views/device/components/Metadata/Base/DetailModal/FunctionModal.vue
new file mode 100644
index 00000000..309928c9
--- /dev/null
+++ b/src/views/device/components/Metadata/Base/DetailModal/FunctionModal.vue
@@ -0,0 +1,81 @@
+<template>
+  <j-modal
+      visible
+      title="功能详情"
+      width="650px"
+      @cancel="cancel"
+      @ok="ok"
+  >
+    <j-descriptions
+        :column="1"
+        :labelStyle="{
+          width: '72px',
+          textAlign: 'right',
+          justifyContent: 'end'
+        }"
+    >
+      <a-descriptions-item label="功能标识">{{ data.id }}</a-descriptions-item>
+      <a-descriptions-item label="功能名称">{{ data.name }}</a-descriptions-item>
+      <a-descriptions-item label="是否异步">{{ data.async ? '是' : '否' }}</a-descriptions-item>
+      <a-descriptions-item label="输入参数"></a-descriptions-item>
+      <a-descriptions-item>
+        <j-table
+            :columns="dataTypeTable.columns"
+            :dataSource="dataTypeTable.dataSource"
+            :pagination="false"
+            :scroll="{y: 200}"
+            size="small"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'type'">
+              {{ record.valueType?.type }}
+            </template>
+            <template v-if="column.dataIndex === 'valueType'">
+              <OtherConfigInfo :value="record.valueType" />
+            </template>
+          </template>
+        </j-table>
+      </a-descriptions-item>
+    </j-descriptions>
+    <template #footer>
+      <j-button type="primary" @click="ok">确认</j-button>
+    </template>
+  </j-modal>
+</template>
+
+<script setup lang="ts" name="FunctionModal">
+import {OtherConfigInfo} from "@/views/device/components/Metadata/Base/components";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const dataTypeTable = reactive<{ columns: any[], dataSource: any }>({
+  columns: [
+    { title: '参数标识', dataIndex: 'id', width: 120, ellipsis: true },
+    { title: '参数名称', dataIndex: 'name', width: 120, ellipsis: true },
+    { title: '数据类型', dataIndex: 'type', width: 100 },
+    { title: '其它配置', dataIndex: 'valueType', ellipsis: true },
+  ],
+  dataSource: props.data?.inputs || []
+})
+
+const emit = defineEmits(['cancel'])
+const cancel = () => {
+  emit('cancel')
+}
+
+const ok = () => {
+  cancel()
+}
+
+
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Base/DetailModal/PropertiesModal.vue b/src/views/device/components/Metadata/Base/DetailModal/PropertiesModal.vue
index f799ac87..16bed5ae 100644
--- a/src/views/device/components/Metadata/Base/DetailModal/PropertiesModal.vue
+++ b/src/views/device/components/Metadata/Base/DetailModal/PropertiesModal.vue
@@ -5,7 +5,7 @@
       @cancel="cancel"
       @ok="ok"
   >
-    <a-descriptions
+    <j-descriptions
         :column="1"
         :labelStyle="{
           width: '72px',
@@ -16,23 +16,58 @@
       <a-descriptions-item label="属性标识">{{ data.id }}</a-descriptions-item>
       <a-descriptions-item label="属性名称">{{ data.name }}</a-descriptions-item>
       <a-descriptions-item label="属性类型">{{ data.valueType.type }}</a-descriptions-item>
-<!--      <j-table-->
-<!--        :paging="false"-->
-<!--      >-->
-
-<!--      </j-table>-->
+      <a-descriptions-item v-if="['int', 'long', 'float', 'double'].includes(data.valueType.type)" label="单位">{{ data.valueType?.unit }}</a-descriptions-item>
+      <a-descriptions-item v-if="['float', 'double'].includes(data.valueType.type)" label="精度">{{ data.valueType?.scale }}</a-descriptions-item>
+      <a-descriptions-item v-if="['string', 'password'].includes(data.valueType.type)" label="最大长度">{{ data.valueType?.maxLength }}</a-descriptions-item>
+      <a-descriptions-item v-if="data.valueType.type === 'file'" label="文件类型">{{ data.valueType?.fileType }}</a-descriptions-item>
+      <a-descriptions-item v-if="data.valueType.type === 'date'" label="格式">{{ data.valueType?.format }}</a-descriptions-item>
+      <a-descriptions-item
+          v-if="
+          ['enum', 'object', 'boolean'].includes(data.valueType.type) ||
+          (data.valueType.type === 'array' &&  data.valueType.elementType === 'enum')
+          "
+      >
+        <j-table
+            :columns="dataTypeTable.columns"
+            :dataSource="dataTypeTable.dataSource"
+            :pagination="false"
+            size="small"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'type'">
+              {{ record.valueType?.type }}
+            </template>
+            <template v-if="column.dataIndex === 'valueType'">
+              <OtherConfigInfo :value="record.valueType" />
+            </template>
+          </template>
+        </j-table>
+      </a-descriptions-item>
       <a-descriptions-item label="来源">
         {{ sourceMap[data.expands.source] }}
       </a-descriptions-item>
       <a-descriptions-item label="读写类型">{{ readTypeText }}</a-descriptions-item>
       <a-descriptions-item v-if="showSetting" label="存储方式">{{ data.id }}</a-descriptions-item>
-      <a-descriptions-item v-if="showMetrics" label="指标配置">{{ data.id }}</a-descriptions-item>
-    </a-descriptions>
+      <a-descriptions-item v-if="showMetrics" label="指标配置"></a-descriptions-item>
+      <a-descriptions-item v-if="showMetrics">
+        <j-table
+            :columns="metrics.columns"
+            :dataSource="metrics.dataSource"
+            :pagination="false"
+            size="small"
+        >
+
+        </j-table>
+      </a-descriptions-item>
+    </j-descriptions>
+    <template #footer>
+      <j-button type="primary" @click="ok">确认</j-button>
+    </template>
   </j-modal>
 </template>
 
 <script setup lang="ts" name="PropertiesModal">
-
+import {OtherConfigInfo} from "@/views/device/components/Metadata/Base/components";
 import {omit} from "lodash-es";
 import {watch} from "vue";
 
@@ -61,13 +96,26 @@ const readTypeText = computed(() => {
   return props.data?.expands?.type?.map?.((key: string) => type[key]).join('、')
 })
 
-const dataTypeTable = reactive({
+const dataTypeTable = reactive<{ columns: any[], dataSource: any }>({
   columns: [],
   dataSource: []
 })
 
+const metrics = reactive<{ columns: any[], dataSource: any }>({
+  columns: [
+    { title: '指标标识', dataIndex: 'id' },
+    { title: '指标名称', dataIndex: 'name' },
+    { title: '指标治', dataIndex: 'value' },
+  ],
+  dataSource: []
+})
+
 const showMetrics = computed(() => {
-  return props.data?.expands?.metrics?.length
+  const show = props.data?.expands?.metrics?.length
+  if (show) {
+      metrics.dataSource = props.data?.expands?.metrics
+  }
+  return show
 })
 
 const showSetting = computed(() => {
@@ -75,10 +123,35 @@ const showSetting = computed(() => {
   return Object.values(setting).length
 })
 
-watch(() => props.data.valueType.type, () => {
-
+const settingValue = computed(() => {
+  console.log(showSetting.value)
+  return ''
 })
 
+const handleDataTable = (type: string) => {
+  switch (type) {
+    case 'enum':
+      dataTypeTable.columns = [
+        { title: 'Value', dataIndex: 'value'},
+        { title: 'Text', dataIndex: 'text'},
+      ]
+      dataTypeTable.dataSource = [{ unit: props.data.valueType?.unit }]
+      break;
+    case 'object':
+      dataTypeTable.columns = [
+        { title: '标识', dataIndex: 'id', width: 50},
+        { title: '名称', dataIndex: 'name'},
+        { title: '名称', dataIndex: 'name'},
+      ]
+      dataTypeTable.dataSource = [{ unit: props.data.valueType?.unit, scale: props.data.valueType?.scale }]
+      break;
+  }
+}
+
+watch(() => props.data.valueType.type, () => {
+  handleDataTable(props.data.valueType.type === 'array' ? props.data.valueType.elementType : props.data.valueType.type)
+}, { immediate: true })
+
 const cancel = () => {
   emit('cancel')
 }
diff --git a/src/views/device/components/Metadata/Base/DetailModal/index.ts b/src/views/device/components/Metadata/Base/DetailModal/index.ts
index 330b52b1..54dcd73e 100644
--- a/src/views/device/components/Metadata/Base/DetailModal/index.ts
+++ b/src/views/device/components/Metadata/Base/DetailModal/index.ts
@@ -1 +1,3 @@
-export { default as PropertiesModal } from './PropertiesModal.vue'
\ No newline at end of file
+export { default as PropertiesModal } from './PropertiesModal.vue'
+export { default as FunctionModal } from './FunctionModal.vue'
+export { default as EventModal } from './EventModal.vue'
\ No newline at end of file
diff --git a/src/views/device/components/Metadata/Base/columns.tsx b/src/views/device/components/Metadata/Base/columns.tsx
index b1f0a2f6..9cc766ba 100644
--- a/src/views/device/components/Metadata/Base/columns.tsx
+++ b/src/views/device/components/Metadata/Base/columns.tsx
@@ -11,6 +11,7 @@ interface DataTableColumnProps extends ColumnProps {
   }
   form?: {
     rules: any[]
+    [key: string]: any
   },
   options?: any[]
 }
@@ -56,7 +57,6 @@ const EventColumns: DataTableColumnProps[] = BaseColumns.concat([
   {
     title: '输出参数',
     dataIndex: 'outInput',
-    type: 'components',
   },
   {
     title: '配置参数',
@@ -144,6 +144,7 @@ const PropertyColumns: DataTableColumnProps[] = BaseColumns.concat([
       name: Source
     },
     form: {
+      required: true,
       rules: [
         {
           validator: async (_: Record<string, any>, value: any) => {
diff --git a/src/views/device/components/Metadata/Base/components/DataType.vue b/src/views/device/components/Metadata/Base/components/DataType.vue
index 606ad348..f10b0120 100644
--- a/src/views/device/components/Metadata/Base/components/DataType.vue
+++ b/src/views/device/components/Metadata/Base/components/DataType.vue
@@ -6,6 +6,7 @@
         <DataTableArray
             v-if="type === 'array'"
             v-model:value="_valueType.elementType"
+            :unitOptions="options"
             @confirm="valueChange"
         />
         <DataTableObject
@@ -14,6 +15,7 @@
             :columns="[
                 { title: '参数标识', dataIndex: 'id', type: 'text', width: 100 },
                 { title: '参数名称', dataIndex: 'name', type: 'text', width: 100 },
+                { title: '填写约束', dataIndex: 'required', type: 'booleanSelect', width: 100, components: { props: { tureTitle: '必填', falseTitle: '不必填' }} },
                 {
                     title: '数据类型',
                     type: 'components',
@@ -111,6 +113,10 @@ const typeChange = (e: string) => {
 };
 
 const valueChange = () => {
+  console.log({
+    ...props.value,
+    valueType: {...(_valueType.value || {}), type: type.value},
+  })
   emit('update:value', {
     ...props.value,
     valueType: {...(_valueType.value || {}), type: type.value},
diff --git a/src/views/device/components/Metadata/Base/components/Events/OtherConfigInfo.vue b/src/views/device/components/Metadata/Base/components/Events/OtherConfigInfo.vue
index 0a5acfa5..8c838d92 100644
--- a/src/views/device/components/Metadata/Base/components/Events/OtherConfigInfo.vue
+++ b/src/views/device/components/Metadata/Base/components/Events/OtherConfigInfo.vue
@@ -3,7 +3,7 @@
     <div class="values-text" v-else-if="value.type == 'boolean'">{{ value.trueText }}-{{ value.trueValue }}; {{ value.falseText }}-{{ value.falseValue }}</div>
     <div class="values-text" v-else-if="['string', 'password'].includes(value.type)">{{ value.expands?.maxLength }}</div>
     <div class="values-text" v-else-if="value.type == 'date'">{{ value.date }}</div>
-    <div class="values-text" v-else-if="value.type == 'enum'">{{ value.elements?.map((item) => item.text).join(',')   }}</div>
+    <div class="values-text" v-else-if="value.type == 'enum'">{{ value.elements?.map((item) => item.text).join(';')   }}</div>
     <div class="values-text" v-else-if="['int', 'long'].includes(value.type)">无</div>
 </template>
 
diff --git a/src/views/device/components/Metadata/Base/components/Source.vue b/src/views/device/components/Metadata/Base/components/Source.vue
index 01db17c1..3f234b2f 100644
--- a/src/views/device/components/Metadata/Base/components/Source.vue
+++ b/src/views/device/components/Metadata/Base/components/Source.vue
@@ -113,6 +113,7 @@ const confirm = async () => {
                     ...data,
                 },
             };
+          console.log(obj)
             emit('update:value', obj);
             resolve(true);
         } else {
diff --git a/yarn.lock b/yarn.lock
index 4d690b27..8de0de9b 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#ca6ce161bc1ee4d0f6ecaa27a5dbc337b7405b4c"
-  integrity sha512-FILHvwT5ndedwRuL1vxqpj6X+0P/MIfegWRoz46hdjpJvnWbhfTHIJ+5bvLH49Bgh8RJ9khXXevYO073NSlyUw==
+  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#003c3763daad1722543e6a8c8df0fc620a8122d1"
+  integrity sha512-GmtuxQKg6+6V/B/AmKhuDNfUhfdBMvoOg5Nm/q9XSYsMYpODzn+noqqYrNV0QLWFCGNccM2k1fojaAkirRT2yw==
   dependencies:
     "@vueuse/core" "^9.12.0"
     "@vueuse/router" "^9.13.0"