添加主机秘钥列表.

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>