添加卡片列表模板.

orion-ops-ui/src/components/tag/tag-multi-selector.vue

@@ -3,9 +3,9 @@
             :placeholder="placeholder"
             :options="optionData"
             :limit="limit as number"
+            :allow-create="allowCreate"
             @exceed-limit="onLimited"
             multiple
-            :allow-create="allowCreate"
             allow-clear>
   </a-select>
 </template>
@@ -27,7 +27,8 @@
     placeholder: String,
     limit: Number,
     type: String,
-    allowCreate: Boolean
+    allowCreate: Boolean,
+    tagType: String,
   });
 
   const emits = defineEmits(['update:modelValue']);
@@ -46,7 +47,8 @@
   const cacheStore = useCacheStore();
   const optionData = ref<SelectOptionData[]>([]);
   const initOptionData = () => {
-    optionData.value = cacheStore.tags.map(s => {
+    const tagCache = cacheStore[props.tagType as string] as Array<any>;
+    optionData.value = tagCache.map(s => {
       return {
         label: s.name,
         value: s.id,
@@ -92,7 +94,8 @@
       type: props.type
     } as unknown as TagCreateRequest);
     // 插入缓存
-    cacheStore.tags.push({ id, name });
+    const tagCache = cacheStore[props.tagType as string] as Array<any>;
+    tagCache.push({ id, name });
     // 插入 options
     optionData.value.push({
       label: name,
@@ -103,7 +106,7 @@
 
   // 超出限制
   const onLimited = () => {
-    Message.warning(`最多选择${ props.limit }个tag`);
+    Message.warning(`最多选择${props.limit}个tag`);
   };
 
 </script>

orion-ops-ui/src/store/modules/cache/index.ts

@@ -1,13 +1,13 @@
 import { defineStore } from 'pinia';
 import { CacheState } from './types';
 
-export type CacheType = 'menus' | 'roles' | 'tags' | 'hostKeys' | 'hostIdentities'
+export type CacheType = 'menus' | 'roles' | 'hostTags' | 'hostKeys' | 'hostIdentities'
 
 export default defineStore('cache', {
   state: (): CacheState => ({
     menus: [],
     roles: [],
-    tags: [],
+    hostTags: [],
     hostKeys: [],
     hostIdentities: [],
   }),

orion-ops-ui/src/store/modules/cache/types.ts

@@ -7,7 +7,7 @@ import { HostIdentityQueryResponse } from '@/api/asset/host-identity';
 export interface CacheState {
   menus: MenuQueryResponse[];
   roles: RoleQueryResponse[];
-  tags: TagQueryResponse[];
+  hostTags: TagQueryResponse[];
   hostKeys: HostKeyQueryResponse[];
   hostIdentities: HostIdentityQueryResponse[];
 

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

@@ -1,7 +1,7 @@
 <template>
   <card-list v-model:searchValue="formModel.searchValue"
              create-card-position="head"
-             :card-height="172"
+             :card-height="176"
              :loading="loading"
              :fieldConfig="fieldConfig"
              :list="list"
@@ -11,8 +11,8 @@
              :add-permission="['asset:host:create']"
              @add="emits('openAdd')"
              @reset="reset"
-             @search="fetchTableData"
-             @page-change="fetchTableData">
+             @search="fetchListData"
+             @page-change="fetchListData">
     <!-- 标题 -->
     <template #title="{ record }">
       {{ record.name }}
@@ -104,6 +104,7 @@
                               :allowCreate="false"
                               :limit="0"
                               type="HOST"
+                              tag-type="hostTags"
                               placeholder="请选择主机标签" />
         </a-form-item>
       </a-form>
@@ -160,7 +161,7 @@
       await deleteHost(id);
       Message.success('删除成功');
       // 重新加载数据
-      await fetchTableData();
+      await fetchListData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -169,12 +170,12 @@
 
   // 添加后回调
   const addedCallback = () => {
-    fetchTableData();
+    fetchListData();
   };
 
   // 更新后回调
   const updatedCallback = () => {
-    fetchTableData();
+    fetchListData();
   };
 
   defineExpose({
@@ -184,11 +185,11 @@
   // 重置条件
   const reset = () => {
     resetObject(formModel, ['extra']);
-    fetchTableData();
+    fetchListData();
   };
 
   // 加载数据
-  const doFetchTableData = async (request: HostQueryRequest) => {
+  const doFetchListData = async (request: HostQueryRequest) => {
     try {
       setLoading(true);
       const { data } = await getHostPage(request);
@@ -203,10 +204,10 @@
   };
 
   // 切换页码
-  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
-    doFetchTableData({ page, limit, ...form });
+  const fetchListData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchListData({ page, limit, ...form });
   };
-  fetchTableData();
+  fetchListData();
 
 </script>
 

orion-ops-ui/src/views/asset/host/components/host-form-modal.vue

@@ -38,6 +38,7 @@
                               :allowCreate="true"
                               :limit="5"
                               type="HOST"
+                              tag-type="hostTags"
                               placeholder="请选择主机标签" />
         </a-form-item>
       </a-form>
@@ -93,7 +94,7 @@
   const openUpdate = (record: any) => {
     title.value = '修改主机';
     isAddHandle.value = false;
-    const tags = record?.tags?.map((s: { id: any; }) => s.id);
+    const tags = record?.hostTags?.map((s: { id: any; }) => s.id);
     renderForm({ ...defaultForm(), ...record, tags });
     setVisible(true);
   };

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

@@ -31,6 +31,7 @@
                             :allowCreate="false"
                             :limit="0"
                             type="HOST"
+                            tag-type="hostTags"
                             placeholder="请选择主机标签" />
       </a-form-item>
     </a-query-header>

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

@@ -69,7 +69,7 @@
     try {
       const { data } = await getTagList('HOST');
       // 设置到缓存
-      cacheStore.set('tags', data);
+      cacheStore.set('hostTags', data);
     } catch {
       Message.error('tag加载失败');
     }
@@ -78,7 +78,7 @@
 
   // 卸载时清除 tags cache
   onUnmounted(() => {
-    cacheStore.set('tags', []);
+    cacheStore.set('hostTags', []);
     cacheStore.set('hostKeys', []);
     cacheStore.set('hostIdentities', []);
   });