添加主机配置操作.

2023-09-20 10:40:59 +08:00
parent f2c4190a5c
commit 9c80c8536a
11 changed files with 9207 additions and 8 deletions
--- a/orion-ops-ui/pnpm-lock.yaml
+++ b/orion-ops-ui/pnpm-lock.yaml
--- a/orion-ops-ui/src/api/asset/host.ts
+++ b/orion-ops-ui/src/api/asset/host.ts
@@ -53,9 +53,9 @@ export interface HostQueryResponse {
 * 主机配置请求
 */
 export interface HostConfigRequest {
-  hostId?: number;
-  type?: string;
+  id?: number;
  version?: number;
+  status?: number;
  config?: string;
 }

@@ -64,7 +64,9 @@ export interface HostConfigRequest {
 */
 export interface HostConfigQueryResponse {
  id: number;
+  type: string;
  version: number;
+  status: number;
  config: Record<string, any>;
 }

@@ -130,3 +132,10 @@ export function getHostConfigAll(params: HostConfigRequest) {
 export function updateHostConfig(request: HostConfigRequest) {
  return axios.put('/asset/host/update-config', request);
 }
+
+/**
+ * 更新主机配置状态
+ */
+export function updateHostConfigStatus(request: HostConfigRequest) {
+  return axios.put('/asset/host/update-config-status', request);
+}
--- a/orion-ops-ui/src/assets/style/global.less
+++ b/orion-ops-ui/src/assets/style/global.less
@@ -109,6 +109,12 @@ body {
  }
 }

+.arco-drawer-container.drawer-body-padding-0 {
+  .arco-drawer-body {
+    padding: 0 !important;
+  }
+}
+
 #app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
--- a/orion-ops-ui/src/views/asset/host/components/host-config-drawer.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-config-drawer.vue
@@ -0,0 +1,120 @@
+<template>
+  <a-drawer class="drawer-body-padding-0"
+            :width="420"
+            :visible="visible"
+            :esc-to-close="false"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            :ok-button-props="{ disabled: loading }"
+            :cancel-button-props="{ disabled: loading }"
+            :footer="false"
+            @cancel="handleCancel">
+    <!-- 标题 -->
+    <template #title>
+      <span class="host-title-text">
+        主机配置 <span class="host-name-title-text">{{ record.name }}</span>
+      </span>
+    </template>
+    <a-spin :loading="loading" class="host-config-container">
+      <!-- SSH 配置 -->
+      <host-config-ssh-form :content="config.SSH" @submitted="(e) => config.SSH.config = e" />
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-config-drawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import useVisible from '@/hooks/visible';
+  import useLoading from '@/hooks/loading';
+  import { Message } from '@arco-design/web-vue';
+  import { getHostConfigAll } from '@/api/asset/host';
+  import HostConfigSshForm from './host-config-ssh-form.vue';
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const record = ref();
+  const config = ref<Record<string, any>>({});
+
+  // 打开
+  const open = async (e: any) => {
+    record.value = { ...e };
+    try {
+      setLoading(true);
+      setVisible(true);
+      // 加载配置
+      const { data } = await getHostConfigAll({ hostId: record.value.id });
+      data.forEach(s => {
+        config.value[s.type] = s;
+      });
+    } catch ({ message }) {
+      Message.error(`配置加载失败 ${message}`);
+      setVisible(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOk = () => {
+    console.log('ok');
+    setLoading(true);
+    setTimeout(() => {
+      setVisible(false);
+      setLoading(false);
+    }, 1000);
+  };
+
+  const handleCancel = () => {
+    console.log('cancel');
+    setLoading(false);
+    setVisible(false);
+  };
+
+  defineExpose({ open });
+
+</script>
+
+<style lang="less" scoped>
+  .host-title-text {
+    width: 368px;
+    display: flex;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 600;
+
+    .host-name-title-text {
+      max-width: 288px;
+      margin-left: 8px;
+      font-size: 14px;
+      display: inline-block;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      color: rgb(var(--arcoblue-6));
+    }
+
+    .host-name-title-text::before {
+      content: '(';
+    }
+
+    .host-name-title-text::after {
+      content: ')';
+    }
+  }
+
+  .host-config-container {
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-fill-2);
+  }
+
+  .arco-card {
+    margin: 18px 18px 0 18px;
+  }
+</style>
--- a/orion-ops-ui/src/views/asset/host/components/host-config-ssh-form.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-config-ssh-form.vue
@@ -0,0 +1,186 @@
+<template>
+  <a-card class="general-card"
+          :body-style="{padding: config.status === 1 ? '' : '0'}">
+    <!-- 标题 -->
+    <template #title>
+      <div class="config-title-wrapper">
+        <span>SSH 配置</span>
+        <a-switch v-model="config.status"
+                  :disabled="loading"
+                  type="round"
+                  :checked-value="1"
+                  :unchecked-value="0"
+                  :beforeChange="updateStatus" />
+      </div>
+    </template>
+    <a-spin v-show="config.status" :loading="loading" class="config-form-wrapper">
+      <!-- 表单 -->
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :label-col-props="{ span: 6 }"
+              :wrapper-col-props="{ span: 18 }"
+              :rules="{}">
+        <!-- 用户名 -->
+        <a-form-item field="username" label="用户名" label-col-flex="60px">
+          <a-input v-model="formModel.username" placeholder="请输入用户名" />
+        </a-form-item>
+        <!-- SSH 端口 -->
+        <a-form-item field="port" label="SSH端口" label-col-flex="60px">
+          <a-input-number v-model="formModel.port" placeholder="请输入SSH端口" />
+        </a-form-item>
+        <!-- 主机密码 -->
+        <a-form-item field="password" label="主机密码" label-col-flex="60px">
+          <a-input-password v-model="formModel.password" placeholder="主机密码 / 身份二选一" />
+          <a-button type="text" class="password-choose-text">选择</a-button>
+        </a-form-item>
+        <!-- 身份验证 -->
+        <a-form-item field="identityId" label="身份验证" label-col-flex="60px">
+          <a-input v-model="formModel.identityId" placeholder="" />
+        </a-form-item>
+        <!-- 用户名 -->
+        <a-form-item field="connectTimeout" label="连接超时时间" label-col-flex="86px">
+          <a-input-number v-model="formModel.connectTimeout" placeholder="请输入连接超时时间">
+            <template #suffix>
+              ms
+            </template>
+          </a-input-number>
+        </a-form-item>
+        <!-- 用户名 -->
+        <a-form-item field="charset" label="SSH输出编码" label-col-flex="86px">
+          <a-input v-model="formModel.charset" placeholder="请输入 SSH 输出编码" />
+        </a-form-item>
+        <!-- 文件名称编码 -->
+        <a-form-item field="fileNameCharset" label="文件名称编码" label-col-flex="86px">
+          <a-input v-model="formModel.fileNameCharset" placeholder="请输入 SFTP 文件名称编码" />
+        </a-form-item>
+        <!-- 文件内容编码 -->
+        <a-form-item field="fileContentCharset" label="文件内容编码" label-col-flex="86px">
+          <a-input v-model="formModel.fileContentCharset" placeholder="请输入 SFTP 文件内容编码" />
+        </a-form-item>
+      </a-form>
+      <!-- 操作按钮 -->
+      <div class="config-button-group">
+        <a-space>
+          <a-button @click="resetConfig">重置</a-button>
+          <a-button type="primary" @click="saveConfig">保存</a-button>
+        </a-space>
+      </div>
+    </a-spin>
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-config-ssh-form'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { reactive, ref, watch } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { updateHostConfigStatus, updateHostConfig } from '@/api/asset/host';
+
+  const { loading, setLoading } = useLoading();
+
+  const props = defineProps({
+    content: Object
+  });
+
+  const emits = defineEmits(['submitted']);
+
+  const config = ref({
+    status: undefined,
+    version: undefined,
+  });
+
+  const formRef = ref<any>();
+  const formModel = reactive<Record<string, any>>({
+    username: undefined,
+    port: undefined,
+    password: undefined,
+    identityId: undefined,
+    connectTimeout: undefined,
+    charset: undefined,
+    fileNameCharset: undefined,
+    fileContentCharset: undefined,
+  });
+
+  // 监听数据变化
+  watch(() => props.content, (v: any) => {
+    config.value.status = v?.status;
+    config.value.version = v?.version;
+    resetConfig();
+  });
+
+  // 修改状态
+  const updateStatus = (e: number) => {
+    setLoading(true);
+    return updateHostConfigStatus({
+      id: props?.content?.id,
+      status: e,
+      version: config.value.version
+    }).then(({ data }) => {
+      config.value.version = data;
+      setLoading(false);
+      return true;
+    }).catch(() => {
+      setLoading(false);
+      return false;
+    });
+  };
+
+  // 重置配置
+  const resetConfig = () => {
+    Object.keys(formModel).forEach(k => {
+      formModel[k] = props.content?.config[k];
+    });
+  };
+
+  // 保存配置
+  const saveConfig = async () => {
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      setLoading(true);
+      const { data } = await updateHostConfig({
+        id: props?.content?.id,
+        version: config.value.version,
+        config: JSON.stringify(formModel)
+      });
+      config.value.version = data;
+      setLoading(false);
+      // 回调 props
+      emits('submitted', { ...formModel });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+</script>
+
+<style lang="less" scoped>
+  .config-title-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .config-form-wrapper {
+    width: 100%;
+  }
+
+  .password-choose-text {
+    margin-left: 6px;
+    padding: 0 4px 0 4px;
+  }
+
+  .config-button-group {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+</style>
--- a/orion-ops-ui/src/views/asset/host/components/host-table.vue
+++ b/orion-ops-ui/src/views/asset/host/components/host-table.vue
@@ -104,6 +104,13 @@
                    @click="emits('openUpdate', record)">
            修改
          </a-button>
+          <!-- 配置 -->
+          <a-button type="text"
+                    size="mini"
+                    v-permission="['asset:host:update-config']"
+                    @click="emits('openUpdateConfig', record)">
+            配置
+          </a-button>
          <!-- 删除 -->
          <a-popconfirm content="确认删除这条记录吗?"
                        position="left"
@@ -159,7 +166,7 @@
  const tagSelector = ref();
  const tableRenderData = ref<HostQueryResponse[]>();
  const { loading, setLoading } = useLoading();
-  const emits = defineEmits(['openAdd', 'openUpdate']);
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig']);

  const pagination = reactive(defaultPagination());
  const { copy } = useCopy();
--- a/orion-ops-ui/src/views/asset/host/index.vue
+++ b/orion-ops-ui/src/views/asset/host/index.vue
@@ -3,11 +3,14 @@
    <!-- 表格 -->
    <host-table ref="table"
                @openAdd="() => modal.openAdd()"
-                @openUpdate="(e) => modal.openUpdate(e)" />
+                @openUpdate="(e) => modal.openUpdate(e)"
+                @openUpdateConfig="(e) => config.open(e)" />
    <!-- 添加修改模态框 -->
    <host-form-modal ref="modal"
                     @added="() => table.addedCallback()"
                     @updated="() => table.updatedCallback()" />
+    <!-- 配置面板 -->
+    <host-config-drawer ref="config" />
  </div>
 </template>

@@ -22,9 +25,11 @@
  import HostFormModal from './components/host-form-modal.vue';
  import { onUnmounted, ref } from 'vue';
  import { useCacheStore } from '@/store';
+  import HostConfigDrawer from '@/views/asset/host/components/host-config-drawer.vue';

  const table = ref();
  const modal = ref();
+  const config = ref();

  // 卸载时清除 tags cache
  onUnmounted(() => {
--- a/orion-ops-ui/src/views/asset/host/types/table.columns.ts
+++ b/orion-ops-ui/src/views/asset/host/types/table.columns.ts
@@ -31,7 +31,7 @@ const columns = [
  }, {
    title: '操作',
    slotName: 'handle',
-    width: 170,
+    width: 180,
    align: 'right',
    fixed: 'right',
  },
--- a/orion-ops-ui/src/views/dashboard/workplace/components/popular-content.vue
+++ b/orion-ops-ui/src/views/dashboard/workplace/components/popular-content.vue
@@ -15,7 +15,7 @@
        <a-radio-group
          v-model:model-value="type"
          type="button"
-          @change="typeChange as any"
+          @change="typeChange"
        >
          <a-radio value="text">
            {{ $t('workplace.popularContent.text') }}
--- a/orion-ops-ui/src/views/user/user/components/user-form-modal.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-form-modal.vue
@@ -120,7 +120,7 @@
      }
      if (isAddHandle.value) {
        // 新增
-        await createUser({ ...formModel, password: md5(formModel.password) } as any);
+        await createUser({ ...formModel, password: md5(formModel.password) });
        Message.success('创建成功');
        emits('added');
      } else {
--- a/orion-ops-ui/src/views/user/user/components/user-reset-password-form-modal.vue
+++ b/orion-ops-ui/src/views/user/user/components/user-reset-password-form-modal.vue
@@ -94,7 +94,7 @@
      await resetUserPassword({
        id: formModel.id,
        password: md5(formModel.password)
-      } as any);
+      });
      Message.success('修改成功');
      // 清空
      handlerClear();