添加主机秘钥列表.

2023-09-20 17:13:38 +08:00
parent 9a009dfd95
commit d29cdac130
24 changed files with 525 additions and 476 deletions
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-drawer.vue
+++ b/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>
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue
+++ b/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();
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
+++ b/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[]>();
--- a/orion-ops-ui/src/views/asset/host-identity/index.vue
+++ b/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>

--- a/orion-ops-ui/src/views/asset/host-key/components/host-key-form-drawer.vue
+++ b/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>
--- a/orion-ops-ui/src/views/asset/host-key/components/host-key-table.vue
+++ b/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 {
--- a/orion-ops-ui/src/views/asset/host-key/index.vue
+++ b/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>

--- a/orion-ops-ui/src/views/asset/host-key/types/form.rules.ts
+++ b/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[]>;
--- a/orion-ops-ui/src/views/asset/host-key/types/table.columns.ts
+++ b/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',