添加卡片列表模板.

orion-ops-launch/src/main/java/com/orion/ops/launch/generator/CodeGenerator.java

@@ -358,14 +358,18 @@ public class CodeGenerator {
                 new String[]{"/templates/orion-vue-views-components-form-drawer.vue.vm", "${feature}-form-drawer.vue", "vue/views/${module}/${feature}/components"},
                 // table.vue 文件
                 new String[]{"/templates/orion-vue-views-components-table.vue.vm", "${feature}-table.vue", "vue/views/${module}/${feature}/components"},
+                // card-list.vue 文件
+                new String[]{"/templates/orion-vue-views-components-card-list.vue.vm", "${feature}-card-list.vue", "vue/views/${module}/${feature}/components"},
                 // enum.types.ts 文件
                 new String[]{"/templates/orion-vue-views-types-enum.types.ts.vm", "enum.types.ts", "vue/views/${module}/${feature}/types"},
                 // const.ts 文件
                 new String[]{"/templates/orion-vue-views-types-const.ts.vm", "const.ts", "vue/views/${module}/${feature}/types"},
                 // form.rules.ts 文件
                 new String[]{"/templates/orion-vue-views-types-form.rules.ts.vm", "form.rules.ts", "vue/views/${module}/${feature}/types"},
-                // table.vue 文件
+                // table.columns.ts 文件
                 new String[]{"/templates/orion-vue-views-types-table.columns.ts.vm", "table.columns.ts", "vue/views/${module}/${feature}/types"},
+                // card.fields.ts 文件
+                new String[]{"/templates/orion-vue-views-types-card.fields.ts.vm", "card.fields.ts", "vue/views/${module}/${feature}/types"},
                 // menu.sql 文件
                 new String[]{"/templates/orion-sql-menu.sql.vm", "${feature}-menu.sql", "sql"},
         };

orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm

@@ -11,8 +11,8 @@
              :add-permission="['${package.ModuleName}:${typeHyphen}:create']"
              @add="emits('openAdd')"
              @reset="reset"
-             @search="fetchTableData"
+             @search="fetchCardData"
-             @page-change="fetchTableData">
+             @page-change="fetchCardData">
     <!-- 拓展操作 -->
     <template #extra="{ record }">
       <a-space>
@@ -90,33 +90,25 @@
   import useLoading from '@/hooks/loading';
   import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
   import fieldConfig from '../types/card.fields';
-  import { deleteHost, getHostPage, HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
+  import { delete${vue.featureEntity}, get${vue.featureEntity}Page, ${vue.featureEntity}QueryRequest, ${vue.featureEntity}QueryResponse } from '@/api/${vue.module}/${vue.feature}';
   import { Message } from '@arco-design/web-vue';
-  import { tagColor } from '@/views/asset/host/types/const';
-  import TagMultiSelector from '@/components/tag/tag-multi-selector.vue';
-  import useCopy from '@/hooks/copy';
 
-  const { copy } = useCopy();
   const { loading, setLoading } = useLoading();
   const cardColLayout = useColLayout();
   const pagination = usePagination();
-  const list = ref<HostQueryResponse[]>([]);
+  const list = ref<${vue.featureEntity}QueryResponse[]>([]);
   const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
 
-  const formModel = reactive<HostQueryRequest>({
+  const formModel = reactive<${vue.featureEntity}QueryRequest>({
     searchValue: undefined,
-    id: undefined,
+    #foreach($field in ${table.fields})
-    name: undefined,
+    ${field.propertyName}: undefined,
-    code: undefined,
+    #end
-    address: undefined,
-    favorite: undefined,
-    tags: undefined,
-    extra: true
   });
 
   // 条件数量
   const filterCount = computed(() => {
-    return objectTruthKeyCount(formModel, ['searchValue', 'extra']);
+    return objectTruthKeyCount(formModel, ['searchValue']);
   });
 
   // 删除当前行
@@ -124,10 +116,10 @@
     try {
       setLoading(true);
       // 调用删除接口
-      await deleteHost(id);
+      await delete${vue.featureEntity}(id);
       Message.success('删除成功');
       // 重新加载数据
-      await fetchTableData();
+      await fetchCardData();
     } catch (e) {
     } finally {
       setLoading(false);
@@ -136,12 +128,12 @@
 
   // 添加后回调
   const addedCallback = () => {
-    fetchTableData();
+    fetchCardData();
   };
 
   // 更新后回调
   const updatedCallback = () => {
-    fetchTableData();
+    fetchCardData();
   };
 
   defineExpose({
@@ -150,15 +142,15 @@
 
   // 重置条件
   const reset = () => {
-    resetObject(formModel, ['extra']);
+    resetObject(formModel']);
-    fetchTableData();
+    fetchCardData();
   };
 
   // 加载数据
-  const doFetchTableData = async (request: HostQueryRequest) => {
+  const doFetchCardData = async (request: ${vue.featureEntity}QueryRequest) => {
     try {
       setLoading(true);
-      const { data } = await getHostPage(request);
+      const { data } = await get${vue.featureEntity}Page(request);
       list.value = data.rows;
       pagination.total = data.total;
       pagination.current = request.page;
@@ -170,10 +162,10 @@
   };
 
   // 切换页码
-  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+  const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
-    doFetchTableData({ page, limit, ...form });
+    doFetchCardData({ page, limit, ...form });
   };
-  fetchTableData();
+  fetchCardData();
 
 </script>
 

orion-ops-launch/src/main/resources/templates/orion-vue-views-index.vue.vm

@@ -38,12 +38,18 @@
 </script>
 
 <script lang="ts" setup>
+  #if($vue.enableCardView)
+  import ${vue.featureEntity}CardList from './components/${vue.feature}-card-list.vue';
+  #end
   import ${vue.featureEntity}Table from './components/${vue.feature}-table.vue';
   #if($vue.enableDrawerForm)
   import ${vue.featureEntity}FormDrawer from './components/${vue.feature}-form-drawer.vue';
   #else
   import ${vue.featureEntity}FormModal from './components/${vue.feature}-form-modal.vue';
   #end
+  #if($vue.enableCardView)
+  import { useAppStore } from '@/store';
+  #end
 
   import { ref } from 'vue';
 
@@ -59,6 +65,7 @@
   #if($vue.enableCardView)
   const appStore = useAppStore();
 
+  // FIXME 这里需要修改一下字段名称
   const renderTable = computed(() => appStore.${vue.featureEntityFirstLower}View === 'table');
   #end
 

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,

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"
+             @search="fetchListData"
-             @page-change="fetchTableData">
+             @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) => {
+  const fetchListData = (page = 1, limit = pagination.pageSize, form = formModel) => {
-    doFetchTableData({ page, limit, ...form });
+    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', []);
   });