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-08 01:05:52 +08:00
parent 1036713f74
commit c7defdb80d
20 changed files with 404 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,10 +56,9 @@ public class CodeGenerator {
// .values("value", 1, 2)
// .color("blue", "green")
// .build(),
Template.create("host_key", "主机秘钥", "host")
.vue("asset", "host-key")
Template.create("host_identity", "主机身份", "host")
.vue("asset", "host-identity")
.enableCardView()
.enableDrawerForm()
.build()
};
// jdbc 配置 - 使用配置文件

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

@@ -71,28 +71,28 @@
#foreach($field in ${table.fields})
<!-- $field.comment -->
<a-form-item field="${field.propertyName}" label="${field.comment}">
#if(${vue.enums.containsKey(${field.propertyName})})
<a-select v-model="formModel.${field.propertyName}"
:options="toOptions(${vue.enums.get(${field.propertyName}).className})"
placeholder="请选择${field.comment}"
allow-clear />
#else
#if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
<a-input-number v-model="formModel.${field.propertyName}"
placeholder="请输入${field.comment}"
allow-clear
hide-button />
#elseif("$field.propertyType" == "Date")
<a-date-picker v-model="formModel.${field.propertyName}"
style="width: 100%"
placeholder="请选择${field.comment}"
show-time
allow-clear />
#else
<a-input v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" allow-clear />
#end
#end
</a-form-item>
#if(${vue.enums.containsKey(${field.propertyName})})
<a-select v-model="formModel.${field.propertyName}"
:options="toOptions(${vue.enums.get(${field.propertyName}).className})"
placeholder="请选择${field.comment}"
allow-clear />
#else
#if("$field.propertyType" == "Integer" || "$field.propertyType" == "Long")
<a-input-number v-model="formModel.${field.propertyName}"
placeholder="请输入${field.comment}"
allow-clear
hide-button />
#elseif("$field.propertyType" == "Date")
<a-date-picker v-model="formModel.${field.propertyName}"
style="width: 100%"
placeholder="请选择${field.comment}"
show-time
allow-clear />
#else
<a-input v-model="formModel.${field.propertyName}" placeholder="请输入${field.comment}" allow-clear />
#end
#end
</a-form-item>
#end
</a-form>
</template>
@@ -120,6 +120,7 @@
const list = ref<${vue.featureEntity}QueryResponse[]>([]);
const emits = defineEmits(['openAdd', 'openUpdate']);
const formRef = ref();
const formModel = reactive<${vue.featureEntity}QueryRequest>({
searchValue: undefined,
#foreach($field in ${table.fields})
@@ -135,7 +136,7 @@
// 删除当前行
const deleteRow = (id: number) => {
Modal.confirm({
title: '删除前确认?',
title: '删除前确认!',
titleAlign: 'start',
content: '确定要删除这条记录吗?',
okText: '删除',

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

@@ -38,12 +38,6 @@
</script>
<script lang="ts" setup>
#if($vue.enableCardView)
import { computed, ref } from 'vue';
import { useAppStore } from '@/store';
#else
import { ref } from 'vue';
#end
#if($vue.enableCardView)
import ${vue.featureEntity}CardList from './components/${vue.feature}-card-list.vue';
#end
@@ -54,6 +48,13 @@
import ${vue.featureEntity}FormModal from './components/${vue.feature}-form-modal.vue';
#end
#if($vue.enableCardView)
import { computed, ref } from 'vue';
import { useAppStore } from '@/store';
#else
import { ref } from 'vue';
#end
const table = ref();
#if($vue.enableCardView)
const card = ref();

46
orion-ops-launch/src/main/resources/templates/orion-vue-views-types-card.fields.ts.vm
View File

@@ -2,7 +2,7 @@ import { CardField, CardFieldConfig } from '@/types/card';
import { dateFormat } from '@/utils';
const fieldConfig = {
rowGap: '10px',
rowGap: '12px',
labelSpan: 8,
fields: [
{
@@ -21,28 +21,28 @@ const fieldConfig = {
},
#end
}, #end#end{
label: '创建时间',
dataIndex: 'createTime',
slotName: 'createTime',
render: ({ record }) => {
return dateFormat(new Date(record.createTime));
},
}, {
label: '修改时间',
dataIndex: 'updateTime',
slotName: 'updateTime',
render: ({ record }) => {
return dateFormat(new Date(record.updateTime));
},
}, {
label: '创建人',
dataIndex: 'creator',
slotName: 'creator',
}, {
label: '修改人',
dataIndex: 'updater',
slotName: 'updater',
}
label: '创建时间',
dataIndex: 'createTime',
slotName: 'createTime',
render: ({ record }) => {
return dateFormat(new Date(record.createTime));
},
}, {
label: '修改时间',
dataIndex: 'updateTime',
slotName: 'updateTime',
render: ({ record }) => {
return dateFormat(new Date(record.updateTime));
},
}, {
label: '创建人',
dataIndex: 'creator',
slotName: 'creator',
}, {
label: '修改人',
dataIndex: 'updater',
slotName: 'updater',
}
] as CardField[]
} as CardFieldConfig;

3
orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/host/HostIdentityQueryRequest.java
View File

@@ -21,6 +21,9 @@ import javax.validation.constraints.Size;
@Schema(name = "HostIdentityQueryRequest", description = "主机身份 查询请求对象")
public class HostIdentityQueryRequest extends PageRequest {
@Schema(description = "搜索")
private String searchValue;
@Schema(description = "id")
private Long id;

9
orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostIdentityServiceImpl.java
View File

@@ -5,6 +5,7 @@ import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.orion.lang.define.wrapper.DataGrid;
import com.orion.lang.utils.Strings;
import com.orion.ops.framework.common.constant.Const;
import com.orion.ops.framework.common.constant.ErrorMessage;
import com.orion.ops.framework.common.security.PasswordModifier;
@@ -216,11 +217,17 @@ public class HostIdentityServiceImpl implements HostIdentityService {
* @return wrapper
*/
private LambdaQueryWrapper<HostIdentityDO> buildQueryWrapper(HostIdentityQueryRequest request) {
String searchValue = request.getSearchValue();
return hostIdentityDAO.wrapper()
.eq(HostIdentityDO::getId, request.getId())
.like(HostIdentityDO::getName, request.getName())
.like(HostIdentityDO::getUsername, request.getUsername())
.eq(HostIdentityDO::getKeyId, request.getKeyId());
.eq(HostIdentityDO::getKeyId, request.getKeyId())
.and(Strings.isNotEmpty(searchValue), c -> c
.eq(HostIdentityDO::getId, searchValue).or()
.like(HostIdentityDO::getName, searchValue).or()
.like(HostIdentityDO::getUsername, searchValue)
);
}
}

1
orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/HostServiceImpl.java
View File

@@ -257,6 +257,7 @@ public class HostServiceImpl implements HostService {
.like(HostDO::getCode, request.getCode())
.like(HostDO::getAddress, request.getAddress())
.and(Strings.isNotEmpty(searchValue), c -> c
.eq(HostDO::getId, searchValue).or()
.like(HostDO::getName, searchValue).or()
.like(HostDO::getCode, searchValue).or()
.like(HostDO::getAddress, searchValue)

2
orion-ops-ui/src/api/asset/host-identity.ts
View File

@@ -24,10 +24,10 @@ export interface HostIdentityUpdateRequest extends HostIdentityCreateRequest {
* 主机身份查询请求
*/
export interface HostIdentityQueryRequest extends Pagination {
searchValue?: string;
id?: number;
name?: string;
username?: string;
password?: string;
keyId?: number;
}

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

@@ -144,8 +144,9 @@
<template v-for="(field, index) in fieldConfig.fields">
<a-row :align="fieldConfig.rowAlign || field.rowAlign || 'center'"
:style="{
'margin-bottom': index !== fieldConfig.fields.length - 1 ? (fieldConfig.rowGap || '10px') : false,
'height': fieldConfig.height || field.height || 'unset'
'margin-bottom': index !== fieldConfig.fields.length - 1 ? (fieldConfig.rowGap || '12px') : false,
'height': fieldConfig.height || field.height || 'unset',
'min-height': fieldConfig.minHeight || field.minHeight || 'unset'
}">
<!-- label -->
<a-col :span="fieldConfig.labelSpan || 8" :offset="fieldConfig.labelOffset || 0"

2
orion-ops-ui/src/types/card.ts
View File

@@ -29,6 +29,7 @@ export interface CardFieldConfig {
valueAlign?: Align;
rowAlign?: RowAlign;
height?: string;
minHeight?: string;
labelClass?: string;
valueClass?: string;
@@ -44,6 +45,7 @@ export interface CardField {
slotName?: string;
rowAlign?: RowAlign;
height?: string;
minHeight?: string;
labelClass?: string;
valueClass?: string;
ellipsis?: boolean;

230
orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue Normal file
View File

@@ -0,0 +1,230 @@
<template>
<card-list v-model:searchValue="formModel.searchValue"
search-input-placeholder="输入id/名称/用户名"
create-card-position="head"
:card-height="184"
:loading="loading"
:fieldConfig="fieldConfig"
:list="list"
:pagination="pagination"
:card-layout-cols="cardColLayout"
:filter-count="filterCount"
:add-permission="['asset:host-identity:create']"
@add="emits('openAdd')"
@reset="reset"
@search="fetchCardData"
@page-change="fetchCardData">
<!-- 标题 -->
<template #title="{ record }">
{{ record.name }}
</template>
<!-- 用户名 -->
<template #username="{ record }">
<a-tooltip content="点击复制">
<span class="pointer span-blue" @click="copy(record.username)">
<icon-copy class="mr4" />{{ record.username }}
</span>
</a-tooltip>
</template>
<!-- 秘钥名称 -->
<template #keyId="{ record }">
<template v-if="record.keyId">
<!-- 可查看详情 -->
<a-tooltip v-if="hasAnyPermission(['asset:host-key:detail', 'asset:host-key:update'])"
content="点击查看详情">
<a-tag :checked="true"
checkable
@click="emits('openKeyView',{id: record.keyId})">
{{ record.keyName }}
</a-tag>
</a-tooltip>
<!-- 不可查看详情 -->
<a-tag v-else>
{{ record.keyName }}
</a-tag>
</template>
</template>
<!-- 拓展操作 -->
<template #extra="{ record }">
<a-space>
<!-- 更多操作 -->
<a-dropdown trigger="hover">
<icon-more class="card-extra-icon" />
<template #content>
<!-- 修改 -->
<a-doption v-permission="['asset:host-identity:update']"
@click="emits('openUpdate', record)">
<icon-edit />
修改
</a-doption>
<!-- 删除 -->
<a-doption v-permission="['asset:host-identity:delete']"
class="span-red"
@click="deleteRow(record.id)">
<icon-delete />
删除
</a-doption>
</template>
</a-dropdown>
</a-space>
</template>
<!-- 右键菜单 -->
<template #contextMenu="{ record }">
<!-- 修改 -->
<a-doption v-permission="['asset:host-identity:update']"
@click="emits('openUpdate', record)">
<icon-edit />
修改
</a-doption>
<!-- 删除 -->
<a-doption v-permission="['asset:host-identity:delete']"
class="span-red"
@click="deleteRow(record.id)">
<icon-delete />
删除
</a-doption>
</template>
<!-- 过滤条件 -->
<template #filterContent>
<a-form :model="formModel"
class="modal-form"
size="small"
ref="formRef"
label-align="right"
:style="{ width: '320px' }"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }">
<!-- id -->
<a-form-item field="id" label="id">
<a-input-number v-model="formModel.id"
placeholder="请输入id"
allow-clear
hide-button />
</a-form-item>
<!-- 名称 -->
<a-form-item field="name" label="名称">
<a-input v-model="formModel.name" placeholder="请输入名称" allow-clear />
</a-form-item>
<!-- 用户名 -->
<a-form-item field="username" label="用户名">
<a-input v-model="formModel.username" placeholder="请输入用户名" allow-clear />
</a-form-item>
<!-- 主机秘钥 -->
<a-form-item field="keyId" label="主机秘钥">
<host-key-selector v-model="formModel.keyId" allow-clear />
</a-form-item>
</a-form>
</template>
</card-list>
</template>
<script lang="ts">
export default {
name: 'asset-host-identity-card-list'
};
</script>
<script setup lang="ts">
import { usePagination, useColLayout } from '@/types/card';
import { computed, reactive, ref } from 'vue';
import useLoading from '@/hooks/loading';
import { objectTruthKeyCount, resetObject } from '@/utils';
import fieldConfig from '../types/card.fields';
import { deleteHostIdentity, getHostIdentityPage, HostIdentityQueryRequest, HostIdentityQueryResponse } from '@/api/asset/host-identity';
import { Message, Modal } from '@arco-design/web-vue';
import usePermission from '@/hooks/permission';
import useCopy from '@/hooks/copy';
import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
const { copy } = useCopy();
const { hasAnyPermission } = usePermission();
const { loading, setLoading } = useLoading();
const cardColLayout = useColLayout();
const pagination = usePagination();
const list = ref<HostIdentityQueryResponse[]>([]);
const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
const formRef = ref();
const formModel = reactive<HostIdentityQueryRequest>({
searchValue: undefined,
id: undefined,
name: undefined,
username: undefined,
keyId: undefined,
});
// 条件数量
const filterCount = computed(() => {
return objectTruthKeyCount(formModel, ['searchValue']);
});
// 删除当前行
const deleteRow = (id: number) => {
Modal.confirm({
title: '删除前确认!',
titleAlign: 'start',
content: '确定要删除这条记录吗?',
okText: '删除',
onOk: async () => {
try {
setLoading(true);
// 调用删除接口
await deleteHostIdentity(id);
Message.success('删除成功');
// 重新加载数据
await fetchCardData();
} catch (e) {
} finally {
setLoading(false);
}
}
});
};
// 添加后回调
const addedCallback = () => {
fetchCardData();
};
// 更新后回调
const updatedCallback = () => {
fetchCardData();
};
defineExpose({
addedCallback, updatedCallback
});
// 重置条件
const reset = () => {
resetObject(formModel);
fetchCardData();
};
// 加载数据
const doFetchCardData = async (request: HostIdentityQueryRequest) => {
try {
setLoading(true);
const { data } = await getHostIdentityPage(request);
list.value = data.rows;
pagination.total = data.total;
pagination.current = request.page;
pagination.pageSize = request.limit;
} catch (e) {
} finally {
setLoading(false);
}
};
// 切换页码
const fetchCardData = (page = 1, limit = pagination.pageSize, form = formModel) => {
doFetchCardData({ page, limit, ...form });
};
fetchCardData();
</script>
<style scoped lang="less">
</style>

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

@@ -127,8 +127,6 @@
import useLoading from '@/hooks/loading';
import columns from '../types/table.columns';
import { usePagination } from '@/types/table';
import { getHostKeyList } from '@/api/asset/host-key';
import { useCacheStore } from '@/store';
import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
import useCopy from '@/hooks/copy';
import usePermission from '@/hooks/permission';
@@ -140,7 +138,6 @@
const { loading, setLoading } = useLoading();
const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);
const cacheStore = useCacheStore();
const pagination = usePagination();
const formModel = reactive<HostIdentityQueryRequest>({
@@ -202,16 +199,6 @@
};
fetchTableData();
// 获取主机秘钥列表
const fetchHostKeyList = async () => {
try {
const { data } = await getHostKeyList();
cacheStore.set('hostKeys', data);
} catch (e) {
}
};
fetchHostKeyList();
</script>
<style lang="less" scoped>

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

@@ -1,14 +1,21 @@
<template>
<div class="layout-container">
<!-- 表格 -->
<host-identity-table ref="table"
<!-- 列表-表格 -->
<host-identity-table v-if="renderTable"
ref="table"
@openAdd="() => modal.openAdd()"
@openUpdate="(e) => modal.openUpdate(e)"
@openKeyView="(e) => keyDrawer.openView(e) " />
<!-- 列表-卡片 -->
<host-identity-card-list v-else
ref="card"
@openAdd="() => modal.openAdd()"
@openUpdate="(e) => modal.openUpdate(e)"
@openKeyView="(e) => keyDrawer.openView(e) " />
<!-- 添加修改模态框 -->
<host-identity-form-modal ref="modal"
@added="() => table.addedCallback()"
@updated="() => table.updatedCallback()" />
@added="modalAddCallback"
@updated="modalAddCallback" />
<!-- 添加修改模态框 -->
<host-key-form-drawer ref="keyDrawer" />
</div>
@@ -21,16 +28,51 @@
</script>
<script lang="ts" setup>
import HostIdentityCardList from './components/host-identity-card-list.vue';
import HostIdentityTable from './components/host-identity-table.vue';
import HostIdentityFormModal from './components/host-identity-form-modal.vue';
import HostKeyFormDrawer from '../host-key/components/host-key-form-drawer.vue';
import { getHostKeyList } from '@/api/asset/host-key';
import { onUnmounted, ref } from 'vue';
import { useCacheStore } from '@/store';
import { onUnmounted, ref, computed } from 'vue';
import { useAppStore, useCacheStore } from '@/store';
const table = ref();
const card = ref();
const modal = ref();
const keyDrawer = ref();
const appStore = useAppStore();
const cacheStore = useCacheStore();
const renderTable = computed(() => appStore.hostIdentityView === 'table');
// 添加回调
const modalAddCallback = () => {
if (renderTable.value) {
table.value.addedCallback();
} else {
card.value.addedCallback();
}
};
// 修改回调
const modalUpdateCallback = () => {
if (renderTable.value) {
table.value.updatedCallback();
} else {
card.value.updatedCallback();
}
};
// 获取主机秘钥列表
const fetchHostKeyList = async () => {
try {
const { data } = await getHostKeyList();
cacheStore.set('hostKeys', data);
} catch (e) {
}
};
fetchHostKeyList();
// 卸载时清除 tags cache
onUnmounted(() => {

33
orion-ops-ui/src/views/asset/host-identity/types/card.fields.ts Normal file
View File

@@ -0,0 +1,33 @@
import { CardField, CardFieldConfig } from '@/types/card';
import { dateFormat } from '@/utils';
const fieldConfig = {
rowGap: '12px',
labelSpan: 8,
fields: [
{
label: 'id',
dataIndex: 'id',
slotName: 'id',
}, {
label: '用户名',
dataIndex: 'username',
slotName: 'username',
ellipsis: true,
}, {
label: '主机秘钥',
dataIndex: 'keyId',
slotName: 'keyId',
height: '24px',
}, {
label: '修改时间',
dataIndex: 'updateTime',
slotName: 'updateTime',
render: ({ record }) => {
return dateFormat(new Date(record.updateTime));
},
}
] as CardField[]
} as CardFieldConfig;
export default fieldConfig;

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

@@ -1,6 +1,6 @@
<template>
<card-list v-model:searchValue="formModel.searchValue"
search-input-placeholder="输入名称/id"
search-input-placeholder="输入id/名称"
create-card-position="head"
:card-height="148"
:loading="loading"
@@ -101,7 +101,7 @@
// 删除当前行
const deleteRow = (id: number) => {
Modal.confirm({
title: '删除前确认?',
title: '删除前确认!',
titleAlign: 'start',
content: '确定要删除这条记录吗?',
okText: '删除',

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

@@ -26,12 +26,13 @@
</script>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useAppStore } from '@/store';
import HostKeyCardList from './components/host-key-card-list.vue';
import HostKeyTable from './components/host-key-table.vue';
import HostKeyFormDrawer from './components/host-key-form-drawer.vue';
import { computed, ref } from 'vue';
import { useAppStore } from '@/store';
const table = ref();
const card = ref();
const drawer = ref();

2
orion-ops-ui/src/views/asset/host-key/types/card.fields.ts
View File

@@ -2,7 +2,7 @@ import { CardField, CardFieldConfig } from '@/types/card';
import { dateFormat } from '@/utils';
const fieldConfig = {
rowGap: '10px',
rowGap: '12px',
labelSpan: 8,
fields: [
{

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

@@ -1,8 +1,8 @@
<template>
<card-list v-model:searchValue="formModel.searchValue"
search-input-placeholder="输入名称/地址"
search-input-placeholder="输入id/名称/标签/地址"
create-card-position="head"
:card-height="174"
:card-height="214"
:loading="loading"
:fieldConfig="fieldConfig"
:list="list"
@@ -160,6 +160,7 @@
const list = ref<HostQueryResponse[]>([]);
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
const formRef = ref();
const formModel = reactive<HostQueryRequest>({
searchValue: undefined,
id: undefined,
@@ -179,7 +180,7 @@
// 删除当前行
const deleteRow = (id: number) => {
Modal.confirm({
title: '删除前确认?',
title: '删除前确认!',
titleAlign: 'start',
content: '确定要删除这条记录吗?',
okText: '删除',

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

@@ -28,8 +28,6 @@
</script>
<script lang="ts" setup>
import { computed, onUnmounted, ref } from 'vue';
import { useAppStore, useCacheStore } from '@/store';
import HostTable from './components/host-table.vue';
import HostCardList from '@/views/asset/host/components/host-card-list.vue';
import HostFormModal from './components/host-form-modal.vue';
@@ -37,6 +35,9 @@
import { getTagList } from '@/api/meta/tag';
import { Message } from '@arco-design/web-vue';
import { computed, onUnmounted, ref } from 'vue';
import { useAppStore, useCacheStore } from '@/store';
const table = ref();
const card = ref();
const modal = ref();

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

@@ -1,10 +1,15 @@
import { CardField, CardFieldConfig } from '@/types/card';
const fieldConfig = {
rowGap: '10px',
rowGap: '12px',
labelSpan: 8,
minHeight: '24px',
fields: [
{
label: 'id',
dataIndex: 'id',
slotName: 'id',
}, {
label: '主机编码',
dataIndex: 'code',
slotName: 'code',
@@ -12,7 +17,6 @@ const fieldConfig = {
label: '主机地址',
dataIndex: 'address',
slotName: 'address',
height: '24px',
tooltip: true,
}, {
label: '主机标签',