添加 主机列表页面.

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

@@ -0,0 +1,109 @@
+import axios from 'axios';
+import qs from 'query-string';
+import { DataGrid, Pagination } from '@/types/global';
+
+/**
+ * 主机创建请求
+ */
+export interface HostCreateRequest {
+  name?: string;
+  code?: string;
+  address?: string;
+}
+
+/**
+ * 主机更新请求
+ */
+export interface HostUpdateRequest extends HostCreateRequest {
+  id: number;
+}
+
+/**
+ * 主机查询请求
+ */
+export interface HostQueryRequest extends Pagination {
+  id?: number;
+  name?: string;
+  code?: string;
+  address?: string;
+}
+
+/**
+ * 主机查询响应
+ */
+export interface HostQueryResponse {
+  id?: number;
+  name?: string;
+  code?: string;
+  address?: string;
+  createTime: number;
+  updateTime: number;
+  creator: string;
+  updater: string;
+}
+
+/**
+ * 创建主机
+ */
+export function createHost(request: HostCreateRequest) {
+  return axios.post('/asset/host/create', request);
+}
+
+/**
+ * 通过 id 更新主机
+ */
+export function updateHost(request: HostUpdateRequest) {
+  return axios.put('/asset/host/update', request);
+}
+
+/**
+ * 通过 id 查询主机
+ */
+export function getHost(id: number) {
+  return axios.get<HostQueryResponse>('/asset/host/get', { params: { id } });
+}
+
+/**
+ * 通过 id 批量查询主机
+ */
+export function getHostList(idList: Array<number>) {
+  return axios.get<HostQueryResponse[]>('/asset/host/list', {
+    params: { idList },
+    paramsSerializer: params => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    }
+  });
+}
+
+/**
+ * 查询主机
+ */
+export function getHostListAll(request: HostQueryRequest) {
+  return axios.post<Array<HostQueryResponse>>('/asset/host/list-all', request);
+}
+
+/**
+ * 分页查询主机
+ */
+export function getHostPage(request: HostQueryRequest) {
+  return axios.post<DataGrid<HostQueryResponse>>('/asset/host/query', request);
+}
+
+/**
+ * 通过 id 删除主机
+ */
+export function deleteHost(id: number) {
+  return axios.delete('/asset/host/delete', { params: { id } });
+}
+
+/**
+ * 通过 id 批量删除主机
+ */
+export function batchDeleteHost(idList: Array<number>) {
+  return axios.delete('/asset/host/delete-batch', {
+    params: { idList },
+    paramsSerializer: params => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    }
+  });
+}

orion-ops-ui/src/hooks/copy.ts

@@ -0,0 +1,24 @@
+import { useClipboard } from '@vueuse/core';
+import { Message } from '@arco-design/web-vue';
+
+export default function useCopy() {
+  const { isSupported, copy: c, text, copied } = useClipboard();
+  const copy = (value: string, tips = `${value} 已复制`) => {
+    return c(value)
+    .then(() => {
+      if (tips) {
+        Message.success(tips);
+      }
+    }).catch(() => {
+      Message.error('复制失败');
+    });
+  };
+  return {
+    isSupported,
+    copy,
+    text,
+    copied
+  };
+}
+
+

orion-ops-ui/src/router/routes/modules/asset.ts

@@ -0,0 +1,17 @@
+import { DEFAULT_LAYOUT } from '../base';
+import { AppRouteRecordRaw } from '../types';
+
+const ASSET: AppRouteRecordRaw = {
+  name: 'asset',
+  path: '/asset',
+  component: DEFAULT_LAYOUT,
+  children: [
+    {
+      name: 'assetHost',
+      path: '/asset/host',
+      component: () => import('@/views/asset/host/index.vue'),
+    },
+  ],
+};
+
+export default ASSET;

orion-ops-ui/src/router/routes/modules/system.ts

@@ -1,8 +1,8 @@
 import { DEFAULT_LAYOUT } from '../base';
 import { AppRouteRecordRaw } from '../types';
 
-const MENU: AppRouteRecordRaw = {
-  name: 'menu',
+const SYSTEM: AppRouteRecordRaw = {
+  name: 'system',
   path: '/system',
   component: DEFAULT_LAYOUT,
   children: [
@@ -14,4 +14,4 @@ const MENU: AppRouteRecordRaw = {
   ],
 };
 
-export default MENU;
+export default SYSTEM;

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

@@ -0,0 +1,146 @@
+<template>
+  <a-modal v-model:visible="visible"
+           body-class="modal-form"
+           title-align="start"
+           :title="title"
+           :top="80"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           :ok-button-props="{ disabled: loading }"
+           :cancel-button-props="{ disabled: loading }"
+           :on-before-ok="handlerOk"
+           @close="handleClose">
+    <a-spin :loading="loading">
+      <a-form :model="formModel"
+              ref="formRef"
+              label-align="right"
+              :style="{ width: '460px' }"
+              :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="code" label="主机编码">
+          <a-input v-model="formModel.code" placeholder="请输入主机编码" />
+        </a-form-item>
+        <!-- 主机地址 -->
+        <a-form-item field="address" label="主机地址">
+          <a-input v-model="formModel.address" placeholder="请输入主机地址" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'asset-host-form-modal'
+  };
+</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 { createHost, updateHost } from '@/api/asset/host';
+  import { Message } from '@arco-design/web-vue';
+  import {} from '../types/enum.types';
+  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,
+      code: undefined,
+      address: undefined,
+      favorite: 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 createHost(formModel as any);
+        Message.success('创建成功');
+        emits('added');
+      } else {
+        // 修改
+        await updateHost(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/components/host-table.vue

@@ -0,0 +1,242 @@
+<template>
+  <!-- 搜索 -->
+  <a-card class="general-card table-search-card">
+    <a-query-header :model="formModel"
+                    label-align="left"
+                    @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>
+      <!-- 主机名称 -->
+      <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="code" label="主机编码" label-col-flex="50px">
+        <a-input v-model="formModel.code" placeholder="请输入主机编码" allow-clear />
+      </a-form-item>
+      <!-- 主机地址 -->
+      <a-form-item field="address" label="主机地址" label-col-flex="50px">
+        <a-input v-model="formModel.address" placeholder="请输入主机地址" allow-clear />
+      </a-form-item>
+    </a-query-header>
+  </a-card>
+  <!-- 表格 -->
+  <a-card class="general-card table-card">
+    <template #title>
+      <!-- 左侧标题 -->
+      <div class="table-title">
+        主机列表
+      </div>
+      <!-- 右侧按钮 -->
+      <div class="table-bar-handle">
+        <a-space>
+          <!-- 新增 -->
+          <a-button type="primary"
+                    v-permission="['asset:host:create']"
+                    @click="emits('openAdd')">
+            新增
+            <template #icon>
+              <icon-plus />
+            </template>
+          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm position="br"
+                        type="warning"
+                        :content="`确认删除选中的${selectedKeys.length}条记录吗?`"
+                        @ok="deleteSelectRows">
+            <a-button v-permission="['asset:host:delete']"
+                      type="secondary"
+                      status="danger"
+                      :disabled="selectedKeys.length === 0">
+              删除
+              <template #icon>
+                <icon-delete />
+              </template>
+            </a-button>
+          </a-popconfirm>
+        </a-space>
+      </div>
+    </template>
+    <!-- table -->
+    <a-table row-key="id"
+             class="table-wrapper-8"
+             ref="tableRef"
+             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)"
+             @page-size-change="(size) => fetchTableData(pagination.current, size)"
+             :bordered="false">
+      <!-- 地址 -->
+      <template #address="{ record }">
+        <span class="host-address" title="点击复制" @click="copy(record.address)">
+          {{ record.address }}
+        </span>
+      </template>
+      <!-- 操作 -->
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper row-handle-wrapper">
+          <!-- 修改 -->
+          <a-button type="text"
+                    size="mini"
+                    v-permission="['asset:host:update']"
+                    @click="emits('openUpdate', record)">
+            修改
+          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm content="确认删除这条记录吗?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteRow(record)">
+            <a-button v-permission="['asset:host:delete']"
+                      type="text"
+                      size="mini"
+                      status="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+          <!-- 收藏 -->
+          <a-tooltip :content="record.favorite ? '取消收藏' : '收藏'">
+            <icon-star-fill v-if="record.favorite" class="host-favorite host-favorite-choice" />
+            <icon-star v-else class="host-favorite host-favorite-un-choice" />
+          </a-tooltip>
+        </div>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'asset-host-table'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import { batchDeleteHost, deleteHost, getHostPage, HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
+  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 { toOptions } from '@/utils/enum';
+  import useCopy from '@/hooks/copy';
+
+  const tableRenderData = ref<HostQueryResponse[]>();
+  const { loading, setLoading } = useLoading();
+  const emits = defineEmits(['openAdd', 'openUpdate']);
+
+  const pagination = reactive(defaultPagination());
+  const selectedKeys = ref<number[]>([]);
+  const rowSelection = reactive(defaultRowSelection());
+  const { copy } = useCopy();
+
+  const formModel = reactive<HostQueryRequest>({
+    id: undefined,
+    name: undefined,
+    code: undefined,
+    address: undefined,
+  });
+
+  // 删除选中行
+  const deleteSelectRows = async () => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await batchDeleteHost(selectedKeys.value);
+      Message.success(`成功删除${selectedKeys.value.length}条数据`);
+      selectedKeys.value = [];
+      // 重新加载数据
+      await fetchTableData();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 删除当前行
+  const deleteRow = async ({ id }: { id: number }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteHost(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      await fetchTableData();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 添加后回调
+  const addedCallback = () => {
+    fetchTableData();
+  };
+
+  // 更新后回调
+  const updatedCallback = () => {
+    fetchTableData();
+  };
+
+  defineExpose({
+    addedCallback, updatedCallback
+  });
+
+  // 加载数据
+  const doFetchTableData = async (request: HostQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getHostPage(request);
+      tableRenderData.value = data.rows;
+      pagination.total = data.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchTableData({ page, limit, ...form });
+  };
+  fetchTableData();
+
+</script>
+
+<style lang="less" scoped>
+
+  .host-address {
+    cursor: pointer;
+    color: rgb(var(--arcoblue-6))
+  }
+
+  .row-handle-wrapper {
+    display: flex;
+    align-items: center;
+
+    .host-favorite {
+      cursor: pointer;
+      line-height: 19px;
+      font-size: 19px;
+      margin: 0 4px;
+    }
+
+    .host-favorite-choice {
+      color: rgb(var(--yellow-6));
+    }
+
+    .host-favorite-un-choice {
+      color: rgb(var(--gray-6));
+    }
+
+  }
+
+</style>

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="layout-container">
+    <!-- 表格 -->
+    <host-table ref="table"
+                  @openAdd="() => modal.openAdd()"
+                  @openUpdate="(e) => modal.openUpdate(e)" />
+    <!-- 添加修改模态框 -->
+    <host-form-modal ref="modal"
+                       @added="() => table.addedCallback()"
+                       @updated="() => table.updatedCallback()" />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'assetHost'
+  };
+</script>
+
+<script lang="ts" setup>
+  import HostTable from './components/host-table.vue';
+  import HostFormModal from './components/host-form-modal.vue';
+  import { ref } from 'vue';
+
+  const table = ref();
+  const modal = ref();
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

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

@@ -0,0 +1,31 @@
+import { FieldRule } from '@arco-design/web-vue';
+
+export const name = [{
+  required: true,
+  message: '请输入主机名称'
+}, {
+  maxLength: 64,
+  message: '主机名称长度不能大于64位'
+}] as FieldRule[];
+
+export const code = [{
+  required: true,
+  message: '请输入主机编码'
+}, {
+  maxLength: 64,
+  message: '主机编码长度不能大于64位'
+}] as FieldRule[];
+
+export const address = [{
+  required: true,
+  message: '请输入主机地址'
+}, {
+  maxLength: 128,
+  message: '主机地址长度不能大于128位'
+}] as FieldRule[];
+
+export default {
+  name,
+  code,
+  address,
+} as Record<string, FieldRule | FieldRule[]>;

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

@@ -0,0 +1,35 @@
+import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    slotName: 'id',
+    width: 70,
+    align: 'left',
+    fixed: 'left',
+  }, {
+    title: '主机名称',
+    dataIndex: 'name',
+    slotName: 'name',
+    align: 'center',
+  }, {
+    title: '主机编码',
+    dataIndex: 'code',
+    slotName: 'code',
+    align: 'center',
+  }, {
+    title: '主机地址',
+    dataIndex: 'address',
+    slotName: 'address',
+    align: 'center',
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 130,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;