manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加卡片列表模板.

Browse Source
This commit is contained in:
lijiahangmax
2023-10-07 22:17:01 +08:00
parent 6d37fb51cf
commit da6e1e2eee
10 changed files with 60 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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"},
};

48
orion-ops-launch/src/main/resources/templates/orion-vue-views-components-host-card-list.vue.vm → orion-ops-launch/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm
View File

@@ -11,8 +11,8 @@
:add-permission="['${package.ModuleName}:${typeHyphen}:create']"
@add="emits('openAdd')"
@reset="reset"
@search="fetchTableData"
@page-change="fetchTableData">
@search="fetchCardData"
@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,
name: undefined,
code: undefined,
address: undefined,
favorite: undefined,
tags: undefined,
extra: true
#foreach($field in ${table.fields})
${field.propertyName}: undefined,
#end
});
// 条件数量
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']);
fetchTableData();
resetObject(formModel']);
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) => {
doFetchTableData({ page, limit, ...form });
const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
doFetchCardData({ page, limit, ...form });
};
fetchTableData();
fetchCardData();
</script>

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

@@ -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

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

@@ -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>

4
orion-ops-ui/src/store/modules/cache/index.ts vendored
View File

@@ -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: [],
}),

2
orion-ops-ui/src/store/modules/cache/types.ts vendored
View File

@@ -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[];

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

@@ -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>

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

@@ -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);
};

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

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

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

@@ -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', []);
});