feat: 修改主机分组配置.
This commit is contained in:
lijiahangmax
@@ -2,17 +2,18 @@
|
||||
<div v-if="render" class="view-container">
|
||||
<a-tabs v-if="render"
|
||||
class="tabs-container"
|
||||
size="large"
|
||||
:default-active-key="1"
|
||||
position="left"
|
||||
:destroy-on-hide="true"
|
||||
:justify="true"
|
||||
:lazy-load="true">
|
||||
<!-- 左侧导航 -->
|
||||
<a-tab-pane :key="1" v-permission="['asset:host-group:query']">
|
||||
<a-tab-pane :key="1"
|
||||
title="分组配置"
|
||||
v-permission="['asset:host-group:query']">
|
||||
<host-group-view-setting />
|
||||
<template #title>
|
||||
<icon-unordered-list />
|
||||
分组配置
|
||||
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
<!-- 角色分配 -->
|
||||
@@ -28,7 +29,7 @@
|
||||
<host-group-view-user-grant />
|
||||
<template #title>
|
||||
<icon-user />
|
||||
用户授权
|
||||
用户授权2323
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
@@ -37,7 +38,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetHostGroup'
|
||||
name: 'assetGrant'
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -129,7 +130,7 @@
|
||||
background: var(--color-bg-2);
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-tab-title){
|
||||
:deep(.arco-tabs-tab-title) {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
0
orion-ops-ui/src/views/asset/grant/types/const.ts
Normal file
0
orion-ops-ui/src/views/asset/grant/types/const.ts
Normal file
@@ -67,7 +67,7 @@
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { useCacheStore } from '@/store';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/host-group';
|
||||
import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/asset-data-grant';
|
||||
import { AdminRoleCode } from '@/types/const';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import HostGroupTree from './host-group-tree.vue';
|
||||
@@ -113,7 +113,7 @@
|
||||
try {
|
||||
await grantHostGroup({
|
||||
roleId: roleId.value,
|
||||
groupIdList: checkedGroups.value
|
||||
idList: checkedGroups.value
|
||||
});
|
||||
Message.success('保存成功');
|
||||
} catch (e) {
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
<template>
|
||||
<!-- 左侧菜单 -->
|
||||
<a-spin class="simple-card tree-card"
|
||||
:loading="treeLoading">
|
||||
<!-- 主机分组头部 -->
|
||||
<div class="tree-card-header">
|
||||
<!-- 标题 -->
|
||||
<div class="tree-card-title">
|
||||
主机菜单
|
||||
</div>
|
||||
<!-- 操作 -->
|
||||
<div class="tree-card-handler">
|
||||
<div v-permission="['asset:host-group:create']"
|
||||
class="click-icon-wrapper handler-icon-wrapper"
|
||||
title="根节点添加"
|
||||
@click="addRootNode">
|
||||
<icon-plus />
|
||||
</div>
|
||||
<div class="click-icon-wrapper handler-icon-wrapper"
|
||||
title="刷新"
|
||||
@click="refreshTree">
|
||||
<icon-refresh />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主机分组树 -->
|
||||
<div class="tree-card-main">
|
||||
<host-group-tree ref="tree"
|
||||
:loading="treeLoading"
|
||||
@loading="setTreeLoading"
|
||||
@select-node="selectGroup" />
|
||||
</div>
|
||||
</a-spin>
|
||||
<!-- 身体部分 -->
|
||||
<a-spin class="simple-card transfer-body"
|
||||
:loading="dataLoading">
|
||||
<host-transfer ref="transfer"
|
||||
:group="currentGroup"
|
||||
@loading="setDataLoading" />
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'host-group-view-setting'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { TreeNodeData } from '@arco-design/web-vue';
|
||||
import { ref } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import HostGroupTree from './host-group-tree.vue';
|
||||
import HostTransfer from './host-transfer.vue';
|
||||
|
||||
const { loading: treeLoading, setLoading: setTreeLoading } = useLoading();
|
||||
const { loading: dataLoading, setLoading: setDataLoading } = useLoading();
|
||||
|
||||
const tree = ref();
|
||||
const transfer = ref();
|
||||
const currentGroup = ref();
|
||||
|
||||
// 添加根节点
|
||||
const addRootNode = () => {
|
||||
tree.value.addRootNode();
|
||||
};
|
||||
|
||||
// 刷新树
|
||||
const refreshTree = () => {
|
||||
tree.value.fetchTreeData(true);
|
||||
};
|
||||
|
||||
// 选中分组
|
||||
const selectGroup = (group: TreeNodeData) => {
|
||||
currentGroup.value = group;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@tree-width: 30%;
|
||||
|
||||
.tree-card {
|
||||
padding: 0 0 16px 8px;
|
||||
width: @tree-width;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-bottom: 1px var(--color-border-2) solid;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: rgba(var(--gray-10), .95);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-handler {
|
||||
display: flex;
|
||||
|
||||
.handler-icon-wrapper {
|
||||
margin-left: 2px;
|
||||
padding: 4px;
|
||||
font-size: 16px;
|
||||
background: unset;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-fill-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
padding: 8px 8px 8px 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.transfer-body {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 12px 16px 16px 16px;
|
||||
width: calc(100% - @tree-width);
|
||||
position: absolute;
|
||||
left: @tree-width;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -67,7 +67,7 @@
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { useCacheStore } from '@/store';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/host-group';
|
||||
import { getAuthorizedHostGroup, grantHostGroup } from '@/api/asset/asset-data-grant';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import HostGroupTree from './host-group-tree.vue';
|
||||
import HostList from './host-list.vue';
|
||||
@@ -112,7 +112,7 @@
|
||||
try {
|
||||
await grantHostGroup({
|
||||
userId: userId.value,
|
||||
groupIdList: checkedGroups.value
|
||||
idList: checkedGroups.value
|
||||
});
|
||||
Message.success('保存成功');
|
||||
} catch (e) {
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</template>
|
||||
<a-spin :loading="loading" class="host-config-container">
|
||||
<!-- SSH 配置 -->
|
||||
<host-config-ssh-form :content="config.SSH" @submitted="(e) => config.SSH.config = e" />
|
||||
<ssh-config-form :content="config.SSH" @submitted="(e) => config.SSH.config = e" />
|
||||
</a-spin>
|
||||
</a-drawer>
|
||||
</template>
|
||||
@@ -29,16 +29,16 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { HostConfigWrapper } from '../../types/const';
|
||||
import { ref, onBeforeMount } from 'vue';
|
||||
import useVisible from '@/hooks/visible';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { getHostConfigAll } from '@/api/asset/host';
|
||||
import HostConfigSshForm from './host-config-ssh-form.vue';
|
||||
import { useCacheStore } from '@/store';
|
||||
import { getHostKeyList } from '@/api/asset/host-key';
|
||||
import { getHostIdentityList } from '@/api/asset/host-identity';
|
||||
import { HostConfigWrapper } from '@/views/asset/host/types/host-config.types';
|
||||
import SshConfigForm from './ssh/ssh-config-form.vue';
|
||||
|
||||
const { visible, setVisible } = useVisible();
|
||||
const { loading, setLoading } = useLoading();
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<a-card class="general-card"
|
||||
:body-style="{padding: config.status === 1 ? '' : '0'}">
|
||||
:body-style="{ padding: config.status === 1 ? '' : '0' }">
|
||||
<!-- 标题 -->
|
||||
<template #title>
|
||||
<div class="config-title-wrapper">
|
||||
@@ -20,7 +20,7 @@
|
||||
label-align="right"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
:rules="sshRules">
|
||||
:rules="rules">
|
||||
<!-- 用户名 -->
|
||||
<a-form-item field="username"
|
||||
label="用户名"
|
||||
@@ -133,22 +133,22 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'host-config-ssh-form'
|
||||
name: 'ssh-config-form'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FieldRule } from '@arco-design/web-vue';
|
||||
import type { HostSshConfig } from '../types/host-config.types';
|
||||
import type { HostSshConfig } from './types/const';
|
||||
import { ref, watch } from 'vue';
|
||||
import { updateHostConfigStatus, updateHostConfig } from '@/api/asset/host';
|
||||
import { authTypeKey, AuthType } from '../types/const';
|
||||
import { sshRules } from '../types/host-config.form.rules';
|
||||
import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
|
||||
import HostIdentitySelector from '@/components/asset/host-identity/host-identity-selector.vue';
|
||||
import { authTypeKey, AuthType } from './types/const';
|
||||
import rules from './types/form.rules';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { useDictStore } from '@/store';
|
||||
import HostKeySelector from '@/components/asset/host-key/host-key-selector.vue';
|
||||
import HostIdentitySelector from '@/components/asset/host-identity/host-identity-selector.vue';
|
||||
|
||||
const { loading, setLoading } = useLoading();
|
||||
const { toOptions } = useDictStore();
|
||||
@@ -1,15 +1,4 @@
|
||||
/**
|
||||
* 主机所有配置
|
||||
*/
|
||||
export interface HostConfigWrapper {
|
||||
SSH: HostSshConfig | unknown;
|
||||
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
/**
|
||||
* 主机 SSH 配置
|
||||
*/
|
||||
// 主机 SSH 配置
|
||||
export interface HostSshConfig {
|
||||
port?: number;
|
||||
username?: string;
|
||||
@@ -24,3 +13,16 @@ export interface HostSshConfig {
|
||||
useNewPassword?: boolean;
|
||||
hasPassword?: boolean;
|
||||
}
|
||||
|
||||
// 主机验证方式
|
||||
export const AuthType = {
|
||||
// 密码验证
|
||||
PASSWORD: 'PASSWORD',
|
||||
// 秘钥验证
|
||||
KEY: 'KEY',
|
||||
// 身份验证
|
||||
IDENTITY: 'IDENTITY'
|
||||
};
|
||||
|
||||
// 主机验证方式 字典项
|
||||
export const authTypeKey = 'hostAuthTypeType';
|
||||
@@ -59,7 +59,7 @@ export const fileContentCharset = [{
|
||||
message: '文件内容编码长度不能超过12位'
|
||||
}] as FieldRule[];
|
||||
|
||||
export const sshRules = {
|
||||
export default {
|
||||
port,
|
||||
authType,
|
||||
keyId,
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<a-drawer v-model:visible="visible"
|
||||
class="host-group-drawer"
|
||||
width="70%"
|
||||
title="主机分组配置"
|
||||
:esc-to-close="false"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
ok-text="保存"
|
||||
cancel-text="关闭"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
:cancel-button-props="{ disabled: loading }"
|
||||
:on-before-ok="saveHost"
|
||||
@cancel="handleCancel">
|
||||
<a-spin :loading="loading"
|
||||
class="host-group-container">
|
||||
<div class="host-group-wrapper">
|
||||
<!-- 左侧菜单 -->
|
||||
<div class="simple-card tree-card">
|
||||
<!-- 主机分组头部 -->
|
||||
<div class="tree-card-header">
|
||||
<!-- 标题 -->
|
||||
<div class="tree-card-title">
|
||||
主机分组
|
||||
</div>
|
||||
<!-- 操作 -->
|
||||
<div class="tree-card-handler">
|
||||
<div v-permission="['asset:host-group:create']"
|
||||
class="click-icon-wrapper handler-icon-wrapper"
|
||||
title="根节点添加"
|
||||
@click="addRootNode">
|
||||
<icon-plus />
|
||||
</div>
|
||||
<div class="click-icon-wrapper handler-icon-wrapper"
|
||||
title="刷新"
|
||||
@click="refreshTree">
|
||||
<icon-refresh />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主机分组树 -->
|
||||
<div class="tree-card-main">
|
||||
<host-group-tree ref="tree"
|
||||
:loading="loading"
|
||||
@loading="setLoading"
|
||||
@select-node="selectGroup" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 身体部分 -->
|
||||
<a-spin class="simple-card transfer-body"
|
||||
:loading="hostLoading">
|
||||
<host-transfer v-model="currentGroupHost"
|
||||
:group="currentGroup"
|
||||
@loading="setHostLoading" />
|
||||
</a-spin>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'host-group-drawer'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { TreeNodeData } from '@arco-design/web-vue';
|
||||
import { ref } from 'vue';
|
||||
import useVisible from '@/hooks/visible';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { useCacheStore } from '@/store';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { updateHostGroupRel } from '@/api/asset/host-group';
|
||||
import HostTransfer from './host-transfer.vue';
|
||||
import HostGroupTree from '@/components/asset/host-group/host-group-tree.vue';
|
||||
|
||||
const { visible, setVisible } = useVisible();
|
||||
const { loading, setLoading } = useLoading();
|
||||
const { loading: hostLoading, setLoading: setHostLoading } = useLoading();
|
||||
|
||||
const cacheStore = useCacheStore();
|
||||
|
||||
const tree = ref();
|
||||
const currentGroup = ref();
|
||||
const currentGroupHost = ref<Array<string>>([]);
|
||||
|
||||
// 打开
|
||||
const open = async () => {
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
|
||||
// 添加根节点
|
||||
const addRootNode = () => {
|
||||
tree.value.addRootNode();
|
||||
};
|
||||
|
||||
// 刷新树
|
||||
const refreshTree = () => {
|
||||
tree.value.fetchTreeData(true);
|
||||
};
|
||||
|
||||
// 选中分组
|
||||
const selectGroup = (group: TreeNodeData) => {
|
||||
currentGroup.value = group;
|
||||
};
|
||||
|
||||
// 保存主机
|
||||
const saveHost = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await updateHostGroupRel({
|
||||
groupId: currentGroup.value?.key as number,
|
||||
hostIdList: currentGroupHost.value
|
||||
});
|
||||
Message.success('保存成功');
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// 关闭
|
||||
const handleCancel = () => {
|
||||
setLoading(false);
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@tree-width: 30%;
|
||||
|
||||
.host-group-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-fill-2);
|
||||
padding: 16px;
|
||||
|
||||
.host-group-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-card {
|
||||
width: @tree-width;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 8px 0 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
border-bottom: 1px var(--color-border-2) solid;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: rgba(var(--gray-10), .95);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&-handler {
|
||||
display: flex;
|
||||
|
||||
.handler-icon-wrapper {
|
||||
margin-left: 2px;
|
||||
padding: 4px;
|
||||
font-size: 16px;
|
||||
background: unset;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-fill-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
padding: 8px 8px 8px 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.transfer-body {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 12px 16px 16px 16px;
|
||||
width: calc(100% - @tree-width - 16px);
|
||||
position: absolute;
|
||||
left: calc(@tree-width + 16px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.host-group-drawer {
|
||||
.arco-drawer-footer {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.arco-drawer-body {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,30 +1,5 @@
|
||||
<template>
|
||||
<div class="transfer-container">
|
||||
<!-- 头部 -->
|
||||
<div class="transfer-header">
|
||||
<!-- 提示 -->
|
||||
<a-alert class="alert-wrapper" :show-icon="false">
|
||||
<!-- 已选中分组 -->
|
||||
<template v-if="group.key">
|
||||
<span>当前编辑的分组为 <span class="span-blue">{{ group.title }}</span></span>
|
||||
</template>
|
||||
<!-- 未选中分组 -->
|
||||
<template v-else>
|
||||
<span>点击左侧分组即可加载组内数据</span>
|
||||
</template>
|
||||
</a-alert>
|
||||
<!-- 保存按钮 -->
|
||||
<a-button v-permission="['asset:host:update']"
|
||||
class="save-button"
|
||||
type="primary"
|
||||
:disabled="!group.key"
|
||||
@click="save">
|
||||
保存
|
||||
<template #icon>
|
||||
<icon-check />
|
||||
</template>
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- 传输框 -->
|
||||
<a-transfer v-model="value"
|
||||
:data="data"
|
||||
@@ -75,12 +50,17 @@
|
||||
import type { TransferItem } from '@arco-design/web-vue/es/transfer/interface';
|
||||
import type { TreeNodeData } from '@arco-design/web-vue';
|
||||
import type { PropType } from 'vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { onMounted, ref, watch, computed } from 'vue';
|
||||
import { useCacheStore } from '@/store';
|
||||
import { getHostGroupRelList, updateHostGroupRel } from '@/api/asset/host-group';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { getHostList } from '@/api/asset/host';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Array<string>,
|
||||
default: []
|
||||
},
|
||||
group: {
|
||||
type: Object as PropType<TreeNodeData>,
|
||||
default: () => {
|
||||
@@ -89,12 +69,24 @@
|
||||
}
|
||||
});
|
||||
|
||||
const emits = defineEmits(['loading']);
|
||||
const emits = defineEmits(['loading', 'update:modelValue']);
|
||||
|
||||
const cacheStore = useCacheStore();
|
||||
|
||||
const data = ref<Array<TransferItem>>([]);
|
||||
const value = ref<Array<string>>([]);
|
||||
|
||||
const value = computed<Array<string>>({
|
||||
get() {
|
||||
return props.modelValue as Array<string>;
|
||||
},
|
||||
set(e) {
|
||||
if (e) {
|
||||
emits('update:modelValue', e);
|
||||
} else {
|
||||
emits('update:modelValue', []);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 渲染 label
|
||||
const renderLabel = (label: string) => {
|
||||
@@ -104,21 +96,6 @@
|
||||
return `${prefix} - <span class="span-blue">${ip}</span>`;
|
||||
};
|
||||
|
||||
// 保存
|
||||
const save = async () => {
|
||||
try {
|
||||
emits('loading', true);
|
||||
await updateHostGroupRel({
|
||||
groupId: props.group?.key as number,
|
||||
hostIdList: value.value
|
||||
});
|
||||
Message.success('保存成功');
|
||||
} catch (e) {
|
||||
} finally {
|
||||
emits('loading', false);
|
||||
}
|
||||
};
|
||||
|
||||
// 查询组内数据
|
||||
watch(() => props.group?.key, async (groupId) => {
|
||||
if (groupId) {
|
||||
@@ -137,8 +114,25 @@
|
||||
}
|
||||
});
|
||||
|
||||
// 加载主机
|
||||
onMounted(() => {
|
||||
// 加载主机列表
|
||||
const loadHostList = async () => {
|
||||
emits('loading', true);
|
||||
try {
|
||||
const { data } = await getHostList();
|
||||
// 设置到缓存
|
||||
cacheStore.set('hosts', data);
|
||||
} catch (e) {
|
||||
Message.error('主机列表加载失败');
|
||||
} finally {
|
||||
emits('loading', false);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!cacheStore.hosts.length) {
|
||||
// 加载主机列表
|
||||
await loadHostList();
|
||||
}
|
||||
data.value = cacheStore.hosts.map(s => {
|
||||
return {
|
||||
value: String(s.id),
|
||||
@@ -154,24 +148,10 @@
|
||||
.transfer-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.transfer-header {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.alert-wrapper {
|
||||
padding: 4px 16px;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arco-transfer) {
|
||||
height: calc(100% - 44px);
|
||||
height: 100%;
|
||||
|
||||
.arco-transfer-view {
|
||||
width: 100%;
|
||||
@@ -8,11 +8,31 @@
|
||||
:pagination="pagination"
|
||||
:card-layout-cols="cardColLayout"
|
||||
:filter-count="filterCount"
|
||||
:add-permission="['asset:host:create']"
|
||||
@add="emits('openAdd')"
|
||||
:handle-visible="{ disableAdd: true }"
|
||||
@reset="reset"
|
||||
@search="fetchCardData"
|
||||
@page-change="fetchCardData">
|
||||
<!-- 左侧操作 -->
|
||||
<template #leftHandle>
|
||||
<!-- 主机分组 -->
|
||||
<a-button v-permission="['asset:host-group:update']"
|
||||
class="click-icon-wrapper card-header-icon-wrapper"
|
||||
type="primary"
|
||||
title="分组配置"
|
||||
@click="emits('openHostGroup')">
|
||||
主机分组
|
||||
<template #icon>
|
||||
<icon-layers />
|
||||
</template>
|
||||
</a-button>
|
||||
<!-- 创建 -->
|
||||
<div v-permission="['asset:host:create']"
|
||||
class="click-icon-wrapper card-header-icon-wrapper"
|
||||
title="创建"
|
||||
@click="emits('openAdd')">
|
||||
<icon-plus />
|
||||
</div>
|
||||
</template>
|
||||
<!-- 过滤条件 -->
|
||||
<template #filterContent>
|
||||
<a-form :model="formModel"
|
||||
@@ -150,11 +170,11 @@
|
||||
import fieldConfig from '../types/host.card.fields';
|
||||
import { deleteHost, getHostPage } from '@/api/asset/host';
|
||||
import { Message, Modal } from '@arco-design/web-vue';
|
||||
import { tagColor } from '@/views/asset/host/types/const';
|
||||
import { tagColor } from '../types/const';
|
||||
import TagMultiSelector from '@/components/meta/tag/tag-multi-selector.vue';
|
||||
import useCopy from '@/hooks/copy';
|
||||
|
||||
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
|
||||
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig', 'openHostGroup']);
|
||||
|
||||
const list = ref<HostQueryResponse[]>([]);
|
||||
|
||||
@@ -62,6 +62,15 @@
|
||||
</a-tag>
|
||||
</template>
|
||||
</a-checkbox>
|
||||
<!-- 主机分组 -->
|
||||
<a-button type="primary"
|
||||
v-permission="['asset:host-group:update']"
|
||||
@click="emits('openHostGroup')">
|
||||
主机分组
|
||||
<template #icon>
|
||||
<icon-layers />
|
||||
</template>
|
||||
</a-button>
|
||||
<!-- 新增 -->
|
||||
<a-button type="primary"
|
||||
v-permission="['asset:host:create']"
|
||||
@@ -178,7 +187,7 @@
|
||||
const tagSelector = ref();
|
||||
const tableRenderData = ref<HostQueryResponse[]>([]);
|
||||
const { loading, setLoading } = useLoading();
|
||||
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);
|
||||
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig', 'openHostGroup']);
|
||||
|
||||
const { copy } = useCopy();
|
||||
const { toggle: toggleFavorite } = useFavorite('HOST');
|
||||
@@ -3,47 +3,53 @@
|
||||
<!-- 列表-表格 -->
|
||||
<host-table v-if="renderTable"
|
||||
ref="table"
|
||||
@openHostGroup="() => hostGroup.open()"
|
||||
@openAdd="() => modal.openAdd()"
|
||||
@openUpdate="(e) => modal.openUpdate(e.id)"
|
||||
@openUpdateConfig="(e) => config.open(e)" />
|
||||
@openUpdateConfig="(e) => hostConfig.open(e)" />
|
||||
<!-- 列表-卡片 -->
|
||||
<host-card-list v-else
|
||||
ref="card"
|
||||
@openHostGroup="() => hostGroup.open()"
|
||||
@openAdd="() => modal.openAdd()"
|
||||
@openUpdate="(e) => modal.openUpdate(e.id)"
|
||||
@openUpdateConfig="(e) => config.open(e)" />
|
||||
@openUpdateConfig="(e) => hostConfig.open(e)" />
|
||||
<!-- 添加修改模态框 -->
|
||||
<host-form-modal ref="modal"
|
||||
@added="modalAddCallback"
|
||||
@updated="modalUpdateCallback" />
|
||||
<!-- 配置面板 -->
|
||||
<host-config-drawer ref="config" />
|
||||
<host-config-drawer ref="hostConfig" />
|
||||
<!-- 分组配置 -->
|
||||
<host-group-drawer ref="hostGroup" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetHost'
|
||||
name: 'assetHostList'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
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';
|
||||
import HostConfigDrawer from '@/views/asset/host/components/host-config-drawer.vue';
|
||||
import { computed, ref, onBeforeMount, onUnmounted } from 'vue';
|
||||
import { useAppStore, useCacheStore, useDictStore } from '@/store';
|
||||
import { getTagList } from '@/api/meta/tag';
|
||||
import { dictKeys } from './types/const';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
import { computed, ref, onBeforeMount, onUnmounted } from 'vue';
|
||||
import { useAppStore, useCacheStore, useDictStore } from '@/store';
|
||||
import HostTable from './components/host-table.vue';
|
||||
import HostCardList from './components/host-card-list.vue';
|
||||
import HostFormModal from './components/host-form-modal.vue';
|
||||
import HostConfigDrawer from './components/config/host-config-drawer.vue';
|
||||
import HostGroupDrawer from './components/group/host-group-drawer.vue';
|
||||
|
||||
const render = ref(false);
|
||||
const table = ref();
|
||||
const card = ref();
|
||||
const modal = ref();
|
||||
const config = ref();
|
||||
const hostConfig = ref();
|
||||
const hostGroup = ref();
|
||||
|
||||
const appStore = useAppStore();
|
||||
const cacheStore = useCacheStore();
|
||||
|
||||
@@ -89,7 +95,7 @@
|
||||
|
||||
// 卸载时清除 cache
|
||||
onUnmounted(() => {
|
||||
cacheStore.reset('hostTags', 'hostKeys', 'hostIdentities', 'hostGroups');
|
||||
cacheStore.reset('hosts', 'hostTags', 'hostKeys', 'hostIdentities', 'hostGroups');
|
||||
});
|
||||
|
||||
</script>
|
||||
20
orion-ops-ui/src/views/asset/host-list/types/const.ts
Normal file
20
orion-ops-ui/src/views/asset/host-list/types/const.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { HostSshConfig } from '../components/config/ssh/types/const';
|
||||
|
||||
// 主机所有配置
|
||||
export interface HostConfigWrapper {
|
||||
SSH: HostSshConfig | unknown;
|
||||
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
// tag 颜色
|
||||
export const tagColor = [
|
||||
'arcoblue',
|
||||
'green',
|
||||
'purple',
|
||||
'pinkpurple',
|
||||
'magenta'
|
||||
];
|
||||
|
||||
// 加载的字典值
|
||||
export const dictKeys = ['hostAuthTypeType'];
|
||||
@@ -1,24 +0,0 @@
|
||||
// tag 颜色
|
||||
export const tagColor = [
|
||||
'arcoblue',
|
||||
'green',
|
||||
'purple',
|
||||
'pinkpurple',
|
||||
'magenta'
|
||||
];
|
||||
|
||||
// 主机验证方式
|
||||
export const AuthType = {
|
||||
// 密码验证
|
||||
PASSWORD: 'PASSWORD',
|
||||
// 秘钥验证
|
||||
KEY: 'KEY',
|
||||
// 身份验证
|
||||
IDENTITY: 'IDENTITY'
|
||||
};
|
||||
|
||||
// 主机验证方式 字典项
|
||||
export const authTypeKey = 'hostAuthTypeType';
|
||||
|
||||
// 加载的字典值
|
||||
export const dictKeys = [authTypeKey];
|
||||
@@ -49,7 +49,7 @@ const columns = [
|
||||
}, {
|
||||
title: '操作',
|
||||
slotName: 'handle',
|
||||
width: 158,
|
||||
width: 162,
|
||||
fixed: 'right',
|
||||
}
|
||||
] as TableColumnData[];
|
||||
|
||||
Reference in New Issue
Block a user