添加主机秘钥列表.

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

@@ -110,10 +110,3 @@ export function batchDeleteHostIdentity(idList: Array<number>) {
     }
   });
 }
-
-/**
- * 导出主机身份
- */
-export function exportHostIdentity(request: HostIdentityQueryRequest) {
-  return axios.post('/asset/host-identity/export', request);
-}

orion-ops-ui/src/api/asset/host-key.ts

@@ -1,5 +1,4 @@
 import axios from 'axios';
-import qs from 'query-string';
 import { DataGrid, Pagination } from '@/types/global';
 
 /**
@@ -27,7 +26,6 @@ export interface HostKeyQueryRequest extends Pagination {
   name?: string;
   publicKey?: string;
   privateKey?: string;
-  password?: string;
 }
 
 /**
@@ -41,8 +39,6 @@ export interface HostKeyQueryResponse {
   password?: string;
   createTime: number;
   updateTime: number;
-  creator: string;
-  updater: string;
 }
 
 /**
@@ -66,23 +62,11 @@ export function getHostKey(id: number) {
   return axios.get<HostKeyQueryResponse>('/asset/host-key/get', { params: { id } });
 }
 
-/**
- * 通过 id 批量查询主机秘钥
- */
-export function getHostKeyList(idList: Array<number>) {
-  return axios.get<HostKeyQueryResponse[]>('/asset/host-key/list', {
-    params: { idList },
-    paramsSerializer: params => {
-      return qs.stringify(params, { arrayFormat: 'comma' });
-    }
-  });
-}
-
 /**
  * 查询主机秘钥
  */
-export function getHostKeyListAll(request: HostKeyQueryRequest) {
-  return axios.post<Array<HostKeyQueryResponse>>('/asset/host-key/list-all', request);
+export function getHostKeyListAll() {
+  return axios.post<Array<HostKeyQueryResponse>>('/asset/host-key/list-all');
 }
 
 /**
@@ -98,22 +82,3 @@ export function getHostKeyPage(request: HostKeyQueryRequest) {
 export function deleteHostKey(id: number) {
   return axios.delete('/asset/host-key/delete', { params: { id } });
 }
-
-/**
- * 通过 id 批量删除主机秘钥
- */
-export function batchDeleteHostKey(idList: Array<number>) {
-  return axios.delete('/asset/host-key/delete-batch', {
-    params: { idList },
-    paramsSerializer: params => {
-      return qs.stringify(params, { arrayFormat: 'comma' });
-    }
-  });
-}
-
-/**
- * 导出主机秘钥
- */
-export function exportHostKey(request: HostKeyQueryRequest) {
-  return axios.post('/asset/host-key/export', request);
-}

orion-ops-ui/src/utils/file.ts

@@ -8,12 +8,12 @@ export function getBase64Data(e: string) {
 }
 
 /**
- * 读取文件 base64 返回 promise
+ * 读取文件内容 返回 promise
  */
-export function readFileBase64(e: any) {
+export function readFileText(e: File, encoding = 'UTF-8') {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
-    reader.readAsDataURL(e);
+    reader.readAsText(e, encoding);
     reader.onload = res => {
       resolve(res.target?.result);
     };

orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-drawer.vue

@@ -0,0 +1,145 @@
+<template>
+  <a-drawer :visible="visible"
+            :title="title"
+            :width="430"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            :on-before-ok="handlerOk"
+            @cancel="handleClose">
+    <a-spin :loading="loading">
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :style="{ width: '380px' }"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }"
+              :rules="formRules">
+        <!-- 名称 -->
+        <a-form-item field="name" label="名称">
+          <a-input v-model="formModel.name" placeholder="请输入名称" />
+        </a-form-item>
+        <!-- 用户名 -->
+        <a-form-item field="username" label="用户名">
+          <a-input v-model="formModel.username" placeholder="请输入用户名" />
+        </a-form-item>
+        <!-- 用户密码 -->
+        <a-form-item field="password" label="用户密码">
+          <a-input v-model="formModel.password" placeholder="请输入用户密码" />
+        </a-form-item>
+        <!-- 秘钥id -->
+        <a-form-item field="keyId" label="秘钥id">
+          <a-input-number v-model="formModel.keyId" placeholder="请输入秘钥id" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'asset-host-identity-form-drawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import formRules from '../types/form.rules';
+  import { createHostIdentity, updateHostIdentity } from '@/api/asset/host-identity';
+  import { Message } from '@arco-design/web-vue';
+  import {} from '../types/enum.types';
+  import {} from '../types/const';
+  import { toOptions } from '@/utils/enum';
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const title = ref<string>();
+  const isAddHandle = ref<boolean>(true);
+
+  const defaultForm = () => {
+    return {
+      id: undefined,
+      name: undefined,
+      username: undefined,
+      password: undefined,
+      keyId: undefined,
+    };
+  };
+
+  const formRef = ref<any>();
+  const formModel = reactive<Record<string, any>>(defaultForm());
+
+  const emits = defineEmits(['added', 'updated']);
+
+  // 打开新增
+  const openAdd = () => {
+    title.value = '添加主机身份';
+    isAddHandle.value = true;
+    renderForm({ ...defaultForm() });
+    setVisible(true);
+  };
+
+  // 打开修改
+  const openUpdate = (record: any) => {
+    title.value = '修改主机身份';
+    isAddHandle.value = false;
+    renderForm({ ...defaultForm(), ...record });
+    setVisible(true);
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    Object.keys(formModel).forEach(k => {
+      formModel[k] = record[k];
+    });
+  };
+
+  defineExpose({ openAdd, openUpdate });
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      if (isAddHandle.value) {
+        // 新增
+        await createHostIdentity(formModel as any);
+        Message.success('创建成功');
+        emits('added');
+      } else {
+        // 修改
+        await updateHostIdentity(formModel as any);
+        Message.success('修改成功');
+        emits('updated');
+      }
+      // 清空
+      handlerClear();
+    } catch (e) {
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+    setVisible(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue

@@ -54,8 +54,8 @@
   import formRules from '../types/form.rules';
   import { createHostIdentity, updateHostIdentity } from '@/api/asset/host-identity';
   import { Message } from '@arco-design/web-vue';
-  import { } from '../types/enum.types';
-  import { } from '../types/const';
+  import {} from '../types/enum.types';
+  import {} from '../types/const';
   import { toOptions } from '@/utils/enum';
 
   const { visible, setVisible } = useVisible();

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

@@ -119,8 +119,8 @@
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   import { defaultPagination, defaultRowSelection } from '@/types/table';
-  import { } from '../types/enum.types';
-  import { } from '../types/const';
+  import {} from '../types/enum.types';
+  import {} from '../types/const';
   import { toOptions } from '@/utils/enum';
 
   const tableRenderData = ref<HostIdentityQueryResponse[]>();

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

@@ -2,12 +2,13 @@
   <div class="layout-container">
     <!-- 表格 -->
     <host-identity-table ref="table"
-                  @openAdd="() => modal.openAdd()"
-                  @openUpdate="(e) => modal.openUpdate(e)" />
+                         @openAdd="() => drawer.openAdd()"
+                         @openUpdate="(e) => drawer.openUpdate(e)" />
     <!-- 添加修改模态框 -->
-    <host-identity-form-modal ref="modal"
-                       @added="() => table.addedCallback()"
-                       @updated="() => table.updatedCallback()" />
+    <host-identity-form-drawer ref="drawer"
+                               @added="() => table.addedCallback()"
+                               @updated="() => table.updatedCallback()" />
+
   </div>
 </template>
 
@@ -19,11 +20,12 @@
 
 <script lang="ts" setup>
   import HostIdentityTable from './components/host-identity-table.vue';
-  import HostIdentityFormModal from './components/host-identity-form-modal.vue';
+  import HostIdentityFormDrawer from './components/host-identity-form-drawer.vue';
+
   import { ref } from 'vue';
 
   const table = ref();
-  const modal = ref();
+  const drawer = ref();
 
 </script>
 

orion-ops-ui/src/views/asset/host-key/components/host-key-form-drawer.vue

@@ -0,0 +1,186 @@
+<template>
+  <a-drawer :visible="visible"
+            :title="title"
+            :width="470"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            :on-before-ok="handlerOk"
+            @cancel="handleClose">
+    <a-spin :loading="loading">
+      <a-alert style="margin-bottom: 18px;">请使用 ssh-keygen -m PEM -t rsa 生成秘钥</a-alert>
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :style="{ width: '420px' }"
+              :label-col-props="{ span: 4 }"
+              :wrapper-col-props="{ span: 20 }"
+              :rules="formRules">
+        <!-- 名称 -->
+        <a-form-item field="name" label="名称">
+          <a-input v-model="formModel.name" placeholder="请输入名称" />
+        </a-form-item>
+        <!-- 公钥文本 -->
+        <a-form-item field="publicKey" label="公钥">
+          <a-upload :auto-upload="false"
+                    :show-file-list="false"
+                    draggable
+                    @change="selectPublicFile"
+                    @click.prevent="() => {}">
+            <template #upload-button>
+              <a-textarea v-model="formModel.publicKey"
+                          placeholder="请输入公钥文本或将文件拖拽到此处"
+                          :auto-size="{ minRows: 7, maxRows: 7}" />
+            </template>
+          </a-upload>
+        </a-form-item>
+        <!-- 私钥文本 -->
+        <a-form-item field="privateKey" label="私钥">
+          <a-upload :auto-upload="false"
+                    :show-file-list="false"
+                    draggable
+                    @change="selectPrivateFile"
+                    @click.prevent="() => {}">
+            <template #upload-button>
+              <a-textarea v-model="formModel.privateKey"
+                          placeholder="请输入私钥文本或将文件拖拽到此处"
+                          :auto-size="{ minRows: 8, maxRows: 8}" />
+            </template>
+          </a-upload>
+        </a-form-item>
+        <!-- 密码 -->
+        <a-form-item field="password" label="密码">
+          <a-input-password v-model="formModel.password" placeholder="请输入私钥密码" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'asset-host-key-form-drawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import formRules from '../types/form.rules';
+  import { createHostKey, updateHostKey, getHostKey } from '@/api/asset/host-key';
+  import { FileItem, Message } from '@arco-design/web-vue';
+  import {} from '../types/enum.types';
+  import {} from '../types/const';
+  import { readFileText } from '@/utils/file';
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const title = ref<string>();
+  const isAddHandle = ref<boolean>(true);
+
+  const defaultForm = () => {
+    return {
+      id: undefined,
+      name: undefined,
+      publicKey: undefined,
+      privateKey: undefined,
+      password: undefined,
+    };
+  };
+
+  const formRef = ref<any>();
+  const formModel = reactive<Record<string, any>>(defaultForm());
+
+  const emits = defineEmits(['added', 'updated']);
+
+  // 打开新增
+  const openAdd = () => {
+    title.value = '添加主机秘钥';
+    isAddHandle.value = true;
+    renderForm({ ...defaultForm() });
+    setVisible(true);
+  };
+
+  // 打开修改
+  const openUpdate = async (record: any) => {
+    title.value = '修改主机秘钥';
+    isAddHandle.value = false;
+    setVisible(true);
+    setLoading(true);
+    try {
+      const { data } = await getHostKey(record.id);
+      renderForm({ ...data });
+    } catch (e) {
+      setVisible(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    Object.keys(formModel).forEach(k => {
+      formModel[k] = record[k];
+    });
+  };
+
+  defineExpose({ openAdd, openUpdate });
+
+  // 选择公钥文件
+  const selectPublicFile = async (fileList: FileItem[]) => {
+    formModel.publicKey = await readFileText(fileList[0].file as File);
+    formRef.value.clearValidate('publicKey');
+  };
+
+  // 选择私钥文件
+  const selectPrivateFile = async (fileList: FileItem[]) => {
+    formModel.privateKey = await readFileText(fileList[0].file as File);
+    formRef.value.clearValidate('privateKey');
+  };
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      if (isAddHandle.value) {
+        // 新增
+        await createHostKey(formModel as any);
+        Message.success('创建成功');
+        emits('added');
+      } else {
+        // 修改
+        await updateHostKey(formModel as any);
+        Message.success('修改成功');
+        emits('updated');
+      }
+      // 清空
+      handlerClear();
+    } catch (e) {
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+    setVisible(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue

@@ -6,24 +6,12 @@
                     @submit="fetchTableData"
                     @reset="fetchTableData">
       <!-- id -->
-      <a-form-item field="id" label="id" label-col-flex="50px">
-        <a-input-number v-model="formModel.id" placeholder="请输入id" allow-clear/>
+      <a-form-item field="id" label="id" label-col-flex="30px">
+        <a-input-number v-model="formModel.id" placeholder="请输入id" allow-clear />
       </a-form-item>
       <!-- 名称 -->
-      <a-form-item field="name" label="名称" label-col-flex="50px">
-        <a-input v-model="formModel.name" placeholder="请输入名称" allow-clear/>
-      </a-form-item>
-      <!-- 公钥文本 -->
-      <a-form-item field="publicKey" label="公钥文本" label-col-flex="50px">
-        <a-input v-model="formModel.publicKey" placeholder="请输入公钥文本" allow-clear/>
-      </a-form-item>
-      <!-- 私钥文本 -->
-      <a-form-item field="privateKey" label="私钥文本" label-col-flex="50px">
-        <a-input v-model="formModel.privateKey" placeholder="请输入私钥文本" allow-clear/>
-      </a-form-item>
-      <!-- 密码 -->
-      <a-form-item field="password" label="密码" label-col-flex="50px">
-        <a-input v-model="formModel.password" placeholder="请输入密码" allow-clear/>
+      <a-form-item field="name" label="名称" label-col-flex="30px">
+        <a-input v-model="formModel.name" placeholder="请输入名称" allow-clear />
       </a-form-item>
     </a-query-header>
   </a-card>
@@ -46,21 +34,6 @@
               <icon-plus />
             </template>
           </a-button>
-          <!-- 删除 -->
-          <a-popconfirm position="br"
-                        type="warning"
-                        :content="`确认删除选中的${selectedKeys.length}条记录吗?`"
-                        @ok="deleteSelectRows">
-            <a-button v-permission="['asset:host-key:delete']"
-                      type="secondary"
-                      status="danger"
-                      :disabled="selectedKeys.length === 0">
-              删除
-              <template #icon>
-                <icon-delete />
-              </template>
-            </a-button>
-          </a-popconfirm>
         </a-space>
       </div>
     </template>
@@ -71,8 +44,6 @@
              label-align="left"
              :loading="loading"
              :columns="columns"
-             v-model:selectedKeys="selectedKeys"
-             :row-selection="rowSelection"
              :data="tableRenderData"
              :pagination="pagination"
              @page-change="(page) => fetchTableData(page, pagination.pageSize)"
@@ -114,13 +85,13 @@
 
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
-  import { batchDeleteHostKey, deleteHostKey, getHostKeyPage, HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key';
+  import { deleteHostKey, getHostKeyPage, HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
-  import { defaultPagination, defaultRowSelection } from '@/types/table';
-  import { } from '../types/enum.types';
-  import { } from '../types/const';
+  import { defaultPagination } from '@/types/table';
+  import {} from '../types/enum.types';
+  import {} from '../types/const';
   import { toOptions } from '@/utils/enum';
 
   const tableRenderData = ref<HostKeyQueryResponse[]>();
@@ -128,8 +99,6 @@
   const emits = defineEmits(['openAdd', 'openUpdate']);
 
   const pagination = reactive(defaultPagination());
-  const selectedKeys = ref<number[]>([]);
-  const rowSelection = reactive(defaultRowSelection());
 
   const formModel = reactive<HostKeyQueryRequest>({
     id: undefined,
@@ -139,21 +108,6 @@
     password: undefined,
   });
 
-  // 删除选中行
-  const deleteSelectRows = async () => {
-    try {
-      setLoading(true);
-      // 调用删除接口
-      await batchDeleteHostKey(selectedKeys.value);
-      Message.success(`成功删除${selectedKeys.value.length}条数据`);
-      selectedKeys.value = [];
-      // 重新加载数据
-      await fetchTableData();
-    } finally {
-      setLoading(false);
-    }
-  };
-
   // 删除当前行
   const deleteRow = async ({ id }: { id: number }) => {
     try {

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

@@ -2,10 +2,10 @@
   <div class="layout-container">
     <!-- 表格 -->
     <host-key-table ref="table"
-                  @openAdd="() => modal.openAdd()"
-                  @openUpdate="(e) => modal.openUpdate(e)" />
+                  @openAdd="() => drawer.openAdd()"
+                  @openUpdate="(e) => drawer.openUpdate(e)" />
     <!-- 添加修改模态框 -->
-    <host-key-form-modal ref="modal"
+    <host-key-form-drawer ref="drawer"
                        @added="() => table.addedCallback()"
                        @updated="() => table.updatedCallback()" />
   </div>
@@ -19,11 +19,11 @@
 
 <script lang="ts" setup>
   import HostKeyTable from './components/host-key-table.vue';
-  import HostKeyFormModal from './components/host-key-form-modal.vue';
+  import HostKeyFormDrawer from './components/host-key-form-drawer.vue';
   import { ref } from 'vue';
 
   const table = ref();
-  const modal = ref();
+  const drawer = ref();
 
 </script>
 

orion-ops-ui/src/views/asset/host-key/types/form.rules.ts

@@ -8,33 +8,18 @@ export const name = [{
   message: '名称长度不能大于64位'
 }] as FieldRule[];
 
-export const publicKey = [{
-  required: true,
-  message: '请输入公钥文本'
-}, {
-  maxLength: 65535,
-  message: '公钥文本长度不能大于65535位'
-}] as FieldRule[];
-
 export const privateKey = [{
   required: true,
   message: '请输入私钥文本'
-}, {
-  maxLength: 65535,
-  message: '私钥文本长度不能大于65535位'
 }] as FieldRule[];
 
 export const password = [{
-  required: true,
-  message: '请输入密码'
-}, {
   maxLength: 512,
   message: '密码长度不能大于512位'
 }] as FieldRule[];
 
 export default {
   name,
-  publicKey,
   privateKey,
   password,
 } as Record<string, FieldRule | FieldRule[]>;

orion-ops-ui/src/views/asset/host-key/types/table.columns.ts

@@ -6,43 +6,18 @@ const columns = [
     title: 'id',
     dataIndex: 'id',
     slotName: 'id',
-    width: 70,
+    width: 100,
     align: 'left',
     fixed: 'left',
   }, {
     title: '名称',
     dataIndex: 'name',
     slotName: 'name',
-    align: 'center',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '公钥文本',
-    dataIndex: 'publicKey',
-    slotName: 'publicKey',
-    align: 'center',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '私钥文本',
-    dataIndex: 'privateKey',
-    slotName: 'privateKey',
-    align: 'center',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '密码',
-    dataIndex: 'password',
-    slotName: 'password',
-    align: 'center',
-    ellipsis: true,
-    tooltip: true,
   }, {
     title: '创建时间',
     dataIndex: 'createTime',
     slotName: 'createTime',
     align: 'center',
-    width: 180,
     render: ({ record }) => {
       return dateFormat(new Date(record.createTime));
     },
@@ -51,18 +26,9 @@ const columns = [
     dataIndex: 'updateTime',
     slotName: 'updateTime',
     align: 'center',
-    width: 180,
     render: ({ record }) => {
       return dateFormat(new Date(record.updateTime));
     },
-  }, {
-    title: '创建人',
-    dataIndex: 'creator',
-    slotName: 'creator',
-  }, {
-    title: '修改人',
-    dataIndex: 'updater',
-    slotName: 'updater',
   }, {
     title: '操作',
     slotName: 'handle',