修改卡片模板.

orion-ops-ui/src/components/card/list/index.vue

@@ -163,10 +163,12 @@
                            ]">
                       <slot :name="field.slotName" :record="item" :index="index" :key="item[key]">
                         <a-tooltip v-if="field.tooltip" :content="item[field.dataIndex]">
-                          <span>{{ item[field.dataIndex] }}</span>
+                          <span v-if="field.render" v-html="field.render({ record: item, index })" />
+                          <span v-else>{{ item[field.dataIndex] }}</span>
                         </a-tooltip>
                         <template v-else>
-                          <span>{{ item[field.dataIndex] }}</span>
+                          <span v-if="field.render" v-html="field.render({ record: item, index })" />
+                          <span v-else>{{ item[field.dataIndex] }}</span>
                         </template>
                       </slot>
                     </a-col>

orion-ops-ui/src/types/card.ts

@@ -1,5 +1,5 @@
 import { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
-import { reactive } from 'vue';
+import { reactive, VNodeChild } from 'vue';
 
 /**
  * 字段对齐方式
@@ -48,6 +48,10 @@ export interface CardField {
   valueClass?: string;
   ellipsis?: boolean;
   tooltip?: boolean;
+  render?: (data: {
+    record: CardRecord;
+    index: number;
+  }) => VNodeChild;
 }
 
 /**

orion-ops-ui/src/views/asset/host/components/host-card-list.vue

@@ -59,7 +59,9 @@
               配置
             </a-doption>
             <!-- 删除 -->
-            <a-doption class="span-red" @click="deleteRow(record.id)">
+            <a-doption v-permission="['asset:host:delete']"
+                       class="span-red"
+                       @click="deleteRow(record.id)">
               <icon-delete />
               删除
             </a-doption>
@@ -111,7 +113,7 @@
 
 <script lang="ts">
   export default {
-    name: 'host-card-list'
+    name: 'asset-host-card-list'
   };
 </script>
 

orion-ops-ui/src/views/asset/host/index.vue

@@ -44,8 +44,7 @@
   const appStore = useAppStore();
   const cacheStore = useCacheStore();
 
-  // FIXME 临时
-  const renderTable = computed(() => appStore.hostView === 'card');
+  const renderTable = computed(() => appStore.hostView === 'table');
 
   // 添加回调
   const modalAddCallback = () => {
@@ -58,7 +57,6 @@
 
   // 修改回调
   const modalUpdateCallback = () => {
-    console.log(renderTable.value);
     if (renderTable.value) {
       table.value.updatedCallback();
     } else {

orion-ops-ui/src/views/asset/host/types/card.fields.ts

@@ -18,7 +18,7 @@ export const fieldConfig = {
       label: '主机标签',
       dataIndex: 'tags',
       slotName: 'tags',
-      rowAlign: 'start'
+      rowAlign: 'start',
     },
   ] as CardField[]
 } as CardFieldConfig;