feat: 优化物模型单个拷贝

src/views/device/components/Metadata/Base/Base.vue

@@ -3,7 +3,6 @@
         ref="tableRef"
         :data-source="dataSource"
         :columns="columns"
-        row-key="id"
         :height="560"
         serial
     >
@@ -122,13 +121,25 @@
                 key="edit"
                 style="padding: 0"
                 :disabled="operateLimits('add', type)"
-                @click="handleAddClick(data.index)"
+                @click="handleAddClick(null, data.index)"
                 :tooltip="{
                   title: operateLimits('add', type) ? '当前的存储方式不支持新增' : '新增',
                 }"
             >
               <AIcon type="PlusSquareOutlined" />
             </PermissionButton>
+            <PermissionButton
+                :has-permission="true"
+                type="link"
+                key="edit"
+                style="padding: 0"
+                @click="showDetail(data.record)"
+                :tooltip="{
+                  title: '详情',
+                }"
+            >
+              <AIcon type="FileSearchOutlined" />
+            </PermissionButton>
             <PermissionButton
                 :has-permission="`${permission}:delete`"
                 type="link"
@@ -138,7 +149,7 @@
                 :pop-confirm="{
                 title: '确认删除？',
                 onConfirm: async () => {
-                    await removeItem(data.record);
+                    await removeItem(data.index);
                   },
                 }"
                 :tooltip="{
@@ -150,6 +161,11 @@
           </j-space>
         </template>
     </j-data-table>
+    <PropertiesModal
+        v-if="type === 'properties' && detailData.visible"
+        :data="detailData.data"
+        @cancel="cancelDetailModal"
+    />
 </template>
 
 <script setup lang="ts" name="BaseMetadata">
@@ -174,6 +190,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'
 
 const props = defineProps({
     // target: {
@@ -203,10 +220,24 @@ const dataSource = ref<MetadataItem[]>(metadata.value || []);
 const tableRef = ref();
 const columns = computed(() => MetadataMapping.get(props.type!));
 
+const detailData = reactive({
+  data: {},
+  visible:false
+})
 const { addAction, copyAction, removeAction } = useAction(tableRef)
 
 provide('_dataSource', dataSource.value)
 
+const showDetail = (data: any) => {
+  detailData.data = data
+  detailData.visible = true
+}
+
+const cancelDetailModal = () => {
+  detailData.data = {}
+  detailData.visible = false
+}
+
 const operateLimits = (action: 'add' | 'updata', types: MetadataType) => {
   return (
       target === 'device' &&
@@ -222,9 +253,9 @@ const handleSearch = (searchValue: string) => {
         : metadata.value;
 };
 
-const handleAddClick = (index?: number) => {
+const handleAddClick = (_data: any, index?: number) => {
 
-  const newObject = {
+  const newObject = _data || {
     id: undefined,
     name: undefined,
     expands: {
@@ -236,14 +267,28 @@ const handleAddClick = (index?: number) => {
   }
 
   tableRef.value?.addItem?.(newObject, index)
+
+  const data = [...dataSource.value];
+
+  if (index !== undefined) {
+    data.splice(index + 1, 0, newObject);
+  } else {
+    data.push(newObject);
+  }
+  dataSource.value = data
 };
 
 const copyItem = (record: any, index: number) => {
-  copyAction(omit(record, ['_uuid']), index)
+  const copyData = omit(record, ['_uuid'])
+  copyData.id = `copy_${copyData.id}`
+  handleAddClick(omit(record, ['_uuid']), index)
 }
 
 const removeItem = (index: number) => {
-  removeAction(index)
+  const data = [...dataSource.value];
+  console.log(index)
+  data.splice(index, 1);
+  dataSource.value = data
 }
 
 const handleSaveClick = async () => {

src/views/device/components/Metadata/Base/DetailModal/PropertiesModal.vue

@@ -0,0 +1,94 @@
+<template>
+  <j-modal
+      visible
+      title="属性详情"
+      @cancel="cancel"
+      @ok="ok"
+  >
+    <a-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.valueType.type }}</a-descriptions-item>
+<!--      <j-table-->
+<!--        :paging="false"-->
+<!--      >-->
+
+<!--      </j-table>-->
+      <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>
+  </j-modal>
+</template>
+
+<script setup lang="ts" name="PropertiesModal">
+
+import {omit} from "lodash-es";
+import {watch} from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['cancel'])
+
+const sourceMap = {
+    'device': '设备',
+    'manual': '手动',
+    'rule': '规则',
+}
+
+const readTypeText = computed(() => {
+  const type = {
+    "read": "读",
+    "write": "写",
+    "report": "上报",
+  }
+
+  return props.data?.expands?.type?.map?.((key: string) => type[key]).join('、')
+})
+
+const dataTypeTable = reactive({
+  columns: [],
+  dataSource: []
+})
+
+const showMetrics = computed(() => {
+  return props.data?.expands?.metrics?.length
+})
+
+const showSetting = computed(() => {
+  const setting = omit((props.data?.expands || {}), ['type', 'source'])
+  return Object.values(setting).length
+})
+
+watch(() => props.data.valueType.type, () => {
+
+})
+
+const cancel = () => {
+  emit('cancel')
+}
+
+const ok = () => {
+  cancel()
+}
+
+</script>
+
+<style scoped>
+
+</style>

src/views/device/components/Metadata/Base/DetailModal/index.ts

@@ -0,0 +1 @@
+export { default as PropertiesModal } from './PropertiesModal.vue'

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#747dbd3c6d8af389d4eb02ffc37e9ee9a8da94c5"
-  integrity sha512-gJ+IJ90p6Q8YQJxfBjep3BCBHg/conxYOHv3v0aiGrzKzdidSk075OcXxOx7bIeAWoqBbY1uCNhYfnhFWCwVIQ==
+  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#7cf4c22f37f47e49fc186b6de667e527bc2d7b95"
+  integrity sha512-mP33feZvyCJbrSO+xzVdiSX62t/ZPCsWXtdYNHXsLPu7sBx7ZgeTaMYxY3xNNECTEEiA1WqCfuQWXA5h6Claaw==
   dependencies:
     "@vueuse/core" "^9.12.0"
     "@vueuse/router" "^9.13.0"