✨ 授权主机选择模态框.
This commit is contained in:
lijiahang
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible"
|
||||
title-align="start"
|
||||
title="授权主机"
|
||||
:top="80"
|
||||
:width="900"
|
||||
:align-center="false"
|
||||
:draggable="true"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
:cancel-button-props="{ disabled: loading }"
|
||||
:on-before-ok="handlerOk"
|
||||
@close="handleClose">
|
||||
<!-- 加载中 -->
|
||||
<a-skeleton v-if="loading"
|
||||
style="padding: 0 12px"
|
||||
:animation="true">
|
||||
<a-skeleton-line :rows="6"
|
||||
:line-height="48"
|
||||
:line-spacing="12" />
|
||||
</a-skeleton>
|
||||
<!-- 主机列表 -->
|
||||
<div v-else class="layout-container">
|
||||
11
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'authorizedHostModal'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useLoading from '@/hooks/loading';
|
||||
import useVisible from '@/hooks/visible';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
|
||||
const { loading, setLoading } = useLoading();
|
||||
const { visible, setVisible } = useVisible(true);
|
||||
|
||||
// 打开
|
||||
const open = () => {
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
|
||||
// 确定
|
||||
const handlerOk = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
Message.success('修改成功');
|
||||
// 清空
|
||||
handlerClear();
|
||||
} catch (e) {
|
||||
return false;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭
|
||||
const handleClose = () => {
|
||||
handlerClear();
|
||||
};
|
||||
|
||||
// 清空
|
||||
const handlerClear = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.layout-container {
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 300px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="group-view-container">
|
||||
<!-- 主机分组 -->
|
||||
<div class="host-group-container">
|
||||
<a-scrollbar>
|
||||
<a-tree v-model:selected-keys="selectedGroup"
|
||||
class="host-tree block-tree"
|
||||
:data="groups"
|
||||
:blockNode="true">
|
||||
<!-- 组内数量 -->
|
||||
<template #extra="node">
|
||||
<span class="node-host-count span-blue">{{ nodes[node.key]?.length || 0 }}</span>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-scrollbar>
|
||||
</div>
|
||||
<!-- 主机列表 -->
|
||||
<host-table class="host-list"
|
||||
v-model:selected-keys="selectedKeysValue"
|
||||
:host-list="hostList"
|
||||
empty-message="当前分组内无授权主机/主机未启用 SSH 配置!" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'hostGroup'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { HostQueryResponse } from '@/api/asset/host';
|
||||
import type { HostGroupQueryResponse } from '@/api/asset/host-group';
|
||||
import { computed } from 'vue';
|
||||
import HostTable from './host-table.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
selectedKeys: Array<number>;
|
||||
selectedGroup: number,
|
||||
hostList: Array<HostQueryResponse>;
|
||||
groups: Array<HostGroupQueryResponse>;
|
||||
nodes: Record<string, Array<number>>;
|
||||
}>();
|
||||
|
||||
const emits = defineEmits(['update:selectedKeys', 'update:selectedGroup']);
|
||||
|
||||
// 选中数据
|
||||
const selectedKeysValue = computed<Array<number>>({
|
||||
get() {
|
||||
return props.selectedKeys;
|
||||
},
|
||||
set(e) {
|
||||
if (e) {
|
||||
emits('update:selectedKeys', e);
|
||||
} else {
|
||||
emits('update:selectedKeys', []);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 选中分组
|
||||
const selectedGroup = computed({
|
||||
get() {
|
||||
return [props.selectedGroup];
|
||||
},
|
||||
set(e) {
|
||||
emits('update:selectedGroup', e[0]);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@tree-width: 298px;
|
||||
@tree-gap: 24px;
|
||||
|
||||
.group-view-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.host-group-container {
|
||||
:deep(.arco-scrollbar) {
|
||||
width: @tree-width;
|
||||
height: 100%;
|
||||
margin-right: @tree-gap;
|
||||
border-radius: 4px;
|
||||
|
||||
&-container {
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.host-tree {
|
||||
min-width: 100%;
|
||||
width: max-content;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
|
||||
.node-host-count {
|
||||
margin-right: 10px;
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.host-list {
|
||||
width: calc(100% - @tree-width - @tree-gap);
|
||||
border-radius: 4px;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<a-table row-key="id"
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
v-model:selected-keys="selectedKeysValue"
|
||||
:row-selection="rowSelection"
|
||||
row-class="pointer"
|
||||
:data="hostList"
|
||||
:scroll="{ y: '100%' }"
|
||||
:pagination="false"
|
||||
:bordered="true"
|
||||
@row-click="clickRow">
|
||||
<!-- 空 -->
|
||||
<template #empty>
|
||||
<a-empty>
|
||||
{{ emptyMessage }}
|
||||
</a-empty>
|
||||
</template>
|
||||
<!-- 名称 -->
|
||||
<template #name="{ record }">
|
||||
{{ record.alias || `${record.name} (${record.code})` }}
|
||||
</template>
|
||||
<!-- 编码 -->
|
||||
<template #code="{ record }">
|
||||
<a-tag>{{ record.code }}</a-tag>
|
||||
</template>
|
||||
<!-- 地址 -->
|
||||
<template #address="{ record }">
|
||||
<span class="span-blue">{{ record.address }}</span>
|
||||
</template>
|
||||
<!-- 标签 -->
|
||||
<template #tags="{ record }">
|
||||
<a-space v-if="record.tags"
|
||||
style="margin-bottom: -8px;"
|
||||
:wrap="true">
|
||||
<a-tag v-for="tag in record.tags"
|
||||
:key="tag.id"
|
||||
:color="dataColor(tag.name, tagColor)">
|
||||
{{ tag.name }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'hostTable'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { TableData } from '@arco-design/web-vue';
|
||||
import type { HostQueryResponse } from '@/api/asset/host';
|
||||
import { dataColor } from '@/utils';
|
||||
import { tagColor } from '@/views/asset/host-list/types/const';
|
||||
import { useRowSelection } from '@/types/table';
|
||||
import columns from '../types/table.columns';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const rowSelection = useRowSelection();
|
||||
|
||||
const props = defineProps<{
|
||||
selectedKeys: Array<number>;
|
||||
hostList: Array<HostQueryResponse>;
|
||||
emptyMessage: string;
|
||||
}>();
|
||||
|
||||
const emits = defineEmits(['update:selectedKeys']);
|
||||
|
||||
// 选中数据
|
||||
const selectedKeysValue = computed<Array<number>>({
|
||||
get() {
|
||||
return props.selectedKeys;
|
||||
},
|
||||
set(e) {
|
||||
if (e) {
|
||||
emits('update:selectedKeys', e);
|
||||
} else {
|
||||
emits('update:selectedKeys', []);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 点击行
|
||||
const clickRow = ({ id }: TableData) => {
|
||||
const result = [...props.selectedKeys];
|
||||
const index = result.indexOf(id);
|
||||
if (index === -1) {
|
||||
result.push(id);
|
||||
} else {
|
||||
result.splice(index, 1);
|
||||
}
|
||||
emits('update:selectedKeys', result);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible"
|
||||
title-align="start"
|
||||
title="授权主机"
|
||||
:top="60"
|
||||
:width="968"
|
||||
:align-center="false"
|
||||
:draggable="true"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
:body-style="{ padding: '0' }"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
:cancel-button-props="{ disabled: loading }"
|
||||
:on-before-ok="handlerOk"
|
||||
@close="handleClose">
|
||||
<!-- 加载中 -->
|
||||
<a-skeleton v-if="loading"
|
||||
style="padding: 16px"
|
||||
:animation="true">
|
||||
<a-skeleton-line :rows="6"
|
||||
:line-height="42"
|
||||
:line-spacing="12" />
|
||||
</a-skeleton>
|
||||
<!-- 主机列表容器 -->
|
||||
<div v-else class="host-layout-container">
|
||||
<!-- 顶部操作 -->
|
||||
<div class="top-side-container">
|
||||
<!-- 视图类型 -->
|
||||
<a-radio-group v-model="newConnectionType"
|
||||
type="button"
|
||||
class="usn"
|
||||
:options="toRadioOptions(newConnectionTypeKey)" />
|
||||
<!-- 过滤 -->
|
||||
<a-auto-complete v-model="filterValue"
|
||||
class="host-filter"
|
||||
placeholder="别名/名称/编码/IP @标签"
|
||||
:allow-clear="true"
|
||||
:data="filterOptions"
|
||||
:filter-option="tagLabelFilter">
|
||||
<template #option="{ data: { raw: { label, isTag } } }">
|
||||
<!-- tag -->
|
||||
<a-tag v-if="isTag" :color="dataColor(label, tagColor)">
|
||||
{{ label }}
|
||||
</a-tag>
|
||||
<!-- 文本 -->
|
||||
<template v-else>
|
||||
{{ label }}
|
||||
</template>
|
||||
</template>
|
||||
</a-auto-complete>
|
||||
</div>
|
||||
<!-- 主机列表 -->
|
||||
<div class="host-container">
|
||||
<!-- 分组视图 -->
|
||||
<host-group v-if="newConnectionType === NewConnectionType.GROUP"
|
||||
v-model:selected-keys="selectedKeys"
|
||||
v-model:selected-group="selectedGroup"
|
||||
:host-list="hostList"
|
||||
:groups="hosts?.groupTree as any"
|
||||
:nodes="treeNodes" />
|
||||
<!-- 列表视图 -->
|
||||
<host-table v-else
|
||||
v-model:selected-keys="selectedKeys"
|
||||
:host-list="hostList"
|
||||
:empty-message="emptyMessage" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'authorizedHostModal'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { SelectOptionData } from '@arco-design/web-vue';
|
||||
import type { AuthorizedHostQueryResponse } from '@/api/asset/asset-authorized-data';
|
||||
import type { HostQueryResponse } from '@/api/asset/host';
|
||||
import { onMounted, ref, watch, computed } from 'vue';
|
||||
import { dataColor } from '@/utils';
|
||||
import { dictKeys, NewConnectionType, newConnectionTypeKey } from './types/const';
|
||||
import { useDictStore } from '@/store';
|
||||
import { tagLabelFilter } from '@/types/form';
|
||||
import { tagColor } from '@/views/asset/host-list/types/const';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import useVisible from '@/hooks/visible';
|
||||
import { getCurrentAuthorizedHost } from '@/api/asset/asset-authorized-data';
|
||||
import { getAuthorizedHostOptions } from '@/types/options';
|
||||
import HostTable from './components/host-table.vue';
|
||||
import HostGroup from './components/host-group.vue';
|
||||
|
||||
const emits = defineEmits(['selected']);
|
||||
|
||||
const { toRadioOptions, loadKeys } = useDictStore();
|
||||
const { loading, setLoading } = useLoading();
|
||||
const { visible, setVisible } = useVisible();
|
||||
|
||||
const hosts = ref<AuthorizedHostQueryResponse>();
|
||||
const hostList = ref<Array<HostQueryResponse>>([]);
|
||||
const treeNodes = ref<Record<string, Array<number>>>({});
|
||||
const selectedGroup = ref<number>(0);
|
||||
const selectedKeys = ref<Array<number>>([]);
|
||||
const newConnectionType = ref(NewConnectionType.GROUP);
|
||||
const filterValue = ref('');
|
||||
const filterOptions = ref<Array<SelectOptionData>>([]);
|
||||
|
||||
const emptyMessage = computed(() => {
|
||||
if (newConnectionType.value === NewConnectionType.LIST) {
|
||||
// 列表
|
||||
return '无授权主机/主机未启用 SSH 配置!';
|
||||
} else if (newConnectionType.value === NewConnectionType.FAVORITE) {
|
||||
// 收藏
|
||||
return '无收藏主机/主机未启用 SSH 配置!';
|
||||
} else if (newConnectionType.value === NewConnectionType.LATEST) {
|
||||
// 最近连接
|
||||
return '暂无连接记录!';
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
// 打开
|
||||
const open = async (hostIdList: Array<number>) => {
|
||||
setVisible(true);
|
||||
// 加载主机列表
|
||||
await fetchHosts();
|
||||
// 设置选中分组
|
||||
selectedGroup.value = hosts.value?.groupTree?.length ? hosts.value.groupTree[0].key : 0;
|
||||
// 设置主机数据
|
||||
shuffleHosts();
|
||||
// 设置选中项
|
||||
selectedKeys.value = hosts.value?.hostList
|
||||
.map(s => s.id)
|
||||
.filter(s => hostIdList.includes(s)) || [];
|
||||
};
|
||||
|
||||
// 加载主机列表
|
||||
const fetchHosts = async () => {
|
||||
if (hosts.value) {
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
// 加载主机列表
|
||||
const { data } = await getCurrentAuthorizedHost('ssh');
|
||||
hosts.value = data;
|
||||
// 设置主机搜索选项
|
||||
filterOptions.value = getAuthorizedHostOptions(data.hostList);
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
|
||||
// 主机数据处理
|
||||
const shuffleHosts = () => {
|
||||
if (!hosts.value) {
|
||||
return;
|
||||
}
|
||||
let list = [...hosts.value.hostList];
|
||||
// 过滤
|
||||
const filterVal = filterValue.value.toLowerCase();
|
||||
if (filterVal) {
|
||||
list = filterVal.startsWith('@')
|
||||
// tag 过滤
|
||||
? list.filter(item => item.tags.some(tag => (tag.name as string).toLowerCase().startsWith(filterVal.substring(1, filterVal.length))))
|
||||
// 名称/编码/地址 过滤
|
||||
: list.filter(item => {
|
||||
return (item.name as string)?.toLowerCase().indexOf(filterVal) > -1
|
||||
|| (item.code as string)?.toLowerCase().indexOf(filterVal) > -1
|
||||
|| (item.alias as string)?.toLowerCase().indexOf(filterVal) > -1
|
||||
|| (item.address as string)?.toLowerCase().indexOf(filterVal) > -1;
|
||||
});
|
||||
}
|
||||
// 判断类型
|
||||
if (NewConnectionType.GROUP === newConnectionType.value) {
|
||||
// 过滤-分组
|
||||
const groupNodes = { ...hosts.value.treeNodes };
|
||||
Object.keys(groupNodes).forEach(k => {
|
||||
groupNodes[k] = (groupNodes[k] || []).filter(item => list.some(host => host.id === item));
|
||||
});
|
||||
treeNodes.value = groupNodes;
|
||||
// 当前组内数据
|
||||
list = list.filter(item => groupNodes[selectedGroup.value]?.some(id => id === item.id));
|
||||
} else if (NewConnectionType.FAVORITE === newConnectionType.value) {
|
||||
// 过滤-个人收藏
|
||||
list = list.filter(item => item.favorite);
|
||||
} else if (NewConnectionType.LATEST === newConnectionType.value) {
|
||||
// 过滤-最近连接
|
||||
list = hosts.value.latestHosts
|
||||
.map(s => list.find(item => item.id === s) as HostQueryResponse)
|
||||
.filter(Boolean);
|
||||
}
|
||||
// 非最近连接排序
|
||||
if (NewConnectionType.LATEST !== newConnectionType.value) {
|
||||
hostList.value = list.sort((o1, o2) => {
|
||||
if (o1.favorite || o2.favorite) {
|
||||
if (o1.favorite && o2.favorite) {
|
||||
return o2.id < o1.id ? 1 : -1;
|
||||
}
|
||||
return o2.favorite ? 1 : -1;
|
||||
} else {
|
||||
return o2.id < o1.id ? 1 : -1;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 最近连接不排序
|
||||
hostList.value = list;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听搜索值变化
|
||||
watch(filterValue, shuffleHosts);
|
||||
|
||||
// 监听类型变化
|
||||
watch(newConnectionType, shuffleHosts);
|
||||
|
||||
// 监听分组变化
|
||||
watch(selectedGroup, shuffleHosts);
|
||||
|
||||
// 确定
|
||||
const handlerOk = async () => {
|
||||
emits('selected', selectedKeys.value);
|
||||
// 清空
|
||||
handlerClear();
|
||||
};
|
||||
|
||||
// 关闭
|
||||
const handleClose = () => {
|
||||
handlerClear();
|
||||
};
|
||||
|
||||
// 清空
|
||||
const handlerClear = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
// 加载字典值
|
||||
onMounted(async () => {
|
||||
await loadKeys([...dictKeys]);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.host-layout-container {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 248px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top-side-container {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
|
||||
:deep(.host-filter) {
|
||||
width: 42%;
|
||||
}
|
||||
}
|
||||
|
||||
.host-container {
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
// 新建连接类型
|
||||
export const NewConnectionType = {
|
||||
GROUP: 'group',
|
||||
LIST: 'list',
|
||||
FAVORITE: 'favorite',
|
||||
LATEST: 'latest'
|
||||
};
|
||||
|
||||
// 新建连接类型
|
||||
export const newConnectionTypeKey = 'hostNewConnectionType';
|
||||
|
||||
// 加载的字典值
|
||||
export const dictKeys = [
|
||||
newConnectionTypeKey,
|
||||
];
|
||||
@@ -0,0 +1,22 @@
|
||||
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '主机名称',
|
||||
dataIndex: 'name',
|
||||
slotName: 'name',
|
||||
ellipsis: true,
|
||||
tooltip: true
|
||||
}, {
|
||||
title: '主机地址',
|
||||
dataIndex: 'address',
|
||||
slotName: 'address',
|
||||
}, {
|
||||
title: '主机标签',
|
||||
dataIndex: 'tags',
|
||||
slotName: 'tags',
|
||||
align: 'left',
|
||||
},
|
||||
] as TableColumnData[];
|
||||
|
||||
export default columns;
|
||||
Reference in New Issue
Block a user