添加主机秘钥列表.

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 {