🔨 执行模板页面.

orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-router.ts.vm

@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
 
 const $vue.moduleConst: AppRouteRecordRaw = {
   name: '${vue.moduleEntityFirstLower}Module',
+  path: '/${vue.moduleEntityFirstLower}-module',
   component: DEFAULT_LAYOUT,
   children: [
     {

orion-ops-ui/src/router/guard/router-permission.ts

@@ -22,7 +22,6 @@ export default function setupPermissionGuard(router: Router) {
     if (access && to.meta.locale === undefined && menuStore.menuFetched) {
       to.meta = to.matched[to.matched.length - 1].meta;
     }
-
     if (access) {
       // 正常跳转
       next();

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

@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
 
 const ASSET_AUDIT: AppRouteRecordRaw = {
   name: 'assetAuditModule',
+  path: '/asset-audit-module',
   component: DEFAULT_LAYOUT,
   children: [
     {

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

@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
 
 const ASSET: AppRouteRecordRaw = {
   name: 'assetModule',
+  path: '/asset-module',
   component: DEFAULT_LAYOUT,
   children: [
     {

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

@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
 
 const DASHBOARD: AppRouteRecordRaw = {
   name: 'dashboard',
+  path: '/dashboard',
   component: DEFAULT_LAYOUT,
   children: [
     {

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

@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
 
 const EXEC: AppRouteRecordRaw = {
   name: 'execModule',
+  path: '/exec-module',
   component: DEFAULT_LAYOUT,
   children: [
     {

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

@@ -3,6 +3,7 @@ import { FULL_LAYOUT } from '../base';
 
 const HOST: AppRouteRecordRaw = {
   name: 'hostModule',
+  path: '/host-module',
   component: FULL_LAYOUT,
   children: [
     {

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

@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
 
 const SYSTEM: AppRouteRecordRaw = {
   name: 'systemModule',
+  path: '/system-module',
   component: DEFAULT_LAYOUT,
   children: [
     {

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

@@ -3,6 +3,7 @@ import { DEFAULT_LAYOUT } from '../base';
 
 const USER: AppRouteRecordRaw = {
   name: 'userModule',
+  path: '/user-module',
   component: DEFAULT_LAYOUT,
   children: [
     {

orion-ops-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue

@@ -0,0 +1,151 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            :title="title"
+            :width="430"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            :ok-button-props="{ disabled: loading }"
+            :cancel-button-props="{ disabled: loading }"
+            :on-before-ok="handlerOk"
+            @cancel="handleClose">
+    <a-spin class="full" :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="请输入名称"
+                   allow-clear/>
+        </a-form-item>
+        <!-- 命令 -->
+        <a-form-item field="command" label="命令">
+          <a-input v-model="formModel.command"
+                   placeholder="请输入命令"
+                   allow-clear/>
+        </a-form-item>
+        <!-- 超时时间秒 0不超时 -->
+        <a-form-item field="timeout" label="超时时间秒 0不超时">
+          <a-input-number v-model="formModel.timeout"
+                          placeholder="请输入超时时间秒 0不超时"
+                          hide-button />
+        </a-form-item>
+        <!-- 参数 -->
+        <a-form-item field="parameter" label="参数">
+          <a-input v-model="formModel.parameter"
+                   placeholder="请输入参数"
+                   allow-clear/>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execTemplateFormDrawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecTemplateUpdateRequest } from '@/api/exec/exec-template';
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useVisible from '@/hooks/visible';
+  import formRules from '../types/form.rules';
+  import {} from '../types/const';
+  import { createExecTemplate, updateExecTemplate } from '@/api/exec/exec-template';
+  import { Message } from '@arco-design/web-vue';
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+
+  const title = ref<string>();
+  const isAddHandle = ref<boolean>(true);
+
+  const defaultForm = (): ExecTemplateUpdateRequest => {
+    return {
+      id: undefined,
+      name: undefined,
+      command: undefined,
+      timeout: undefined,
+      parameter: undefined,
+    };
+  };
+
+  const formRef = ref<any>();
+  const formModel = ref<ExecTemplateUpdateRequest>({});
+
+  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) => {
+    formModel.value = Object.assign({}, record);
+  };
+
+  defineExpose({ openAdd, openUpdate });
+
+  // 确定
+  const handlerOk = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return false;
+      }
+      if (isAddHandle.value) {
+        // 新增
+        await createExecTemplate(formModel.value);
+        Message.success('创建成功');
+        emits('added');
+      } else {
+        // 修改
+        await updateExecTemplate(formModel.value);
+        Message.success('修改成功');
+        emits('updated');
+      }
+      // 清空
+      handlerClear();
+    } catch (e) {
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 关闭
+  const handleClose = () => {
+    handlerClear();
+  };
+
+  // 清空
+  const handlerClear = () => {
+    setLoading(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-ui/src/views/exec/exec-template/components/exec-template-table.vue

@@ -0,0 +1,181 @@
+<template>
+  <!-- 搜索 -->
+  <a-card class="general-card table-search-card">
+    <query-header :model="formModel"
+                  label-align="left"
+                  @submit="fetchTableData"
+                  @reset="fetchTableData"
+                  @keyup.enter="() => fetchTableData()">
+      <!-- id -->
+      <a-form-item field="id" label="id" label-col-flex="50px">
+        <a-input-number v-model="formModel.id"
+                        placeholder="请输入id"
+                        allow-clear
+                        hide-button />
+      </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="command" label="命令" label-col-flex="50px">
+        <a-input v-model="formModel.command"
+                 placeholder="请输入命令"
+                 allow-clear />
+      </a-form-item>
+    </query-header>
+  </a-card>
+  <!-- 表格 -->
+  <a-card class="general-card table-card">
+    <template #title>
+      <!-- 左侧操作 -->
+      <div class="table-left-bar-handle">
+        <!-- 标题 -->
+        <div class="table-title">
+          执行模板列表
+        </div>
+      </div>
+      <!-- 右侧操作 -->
+      <div class="table-right-bar-handle">
+        <a-space>
+          <!-- 新增 -->
+          <a-button v-permission="['asset:exec-template:create']"
+                    type="primary"
+                    @click="emits('openAdd')">
+            新增
+            <template #icon>
+              <icon-plus />
+            </template>
+          </a-button>
+        </a-space>
+      </div>
+    </template>
+    <!-- table -->
+    <a-table row-key="id"
+             ref="tableRef"
+             :loading="loading"
+             :columns="columns"
+             :data="tableRenderData"
+             :pagination="pagination"
+             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+             @page-size-change="(size) => fetchTableData(1, size)"
+             :bordered="false">
+      <!-- 操作 -->
+      <template #handle="{ record }">
+        <div class="table-handle-wrapper">
+          <!-- 修改 -->
+          <a-button v-permission="['asset:exec-template:update']"
+                    type="text"
+                    size="mini"
+                    @click="emits('openUpdate', record)">
+            修改
+          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm content="确认删除这条记录吗?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteRow(record)">
+            <a-button v-permission="['asset:exec-template:delete']"
+                      type="text"
+                      size="mini"
+                      status="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </div>
+      </template>
+    </a-table>
+  </a-card>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execTemplateTable'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecTemplateQueryRequest, ExecTemplateQueryResponse } from '@/api/exec/exec-template';
+  import { reactive, ref, onMounted } from 'vue';
+  import { deleteExecTemplate, getExecTemplatePage } from '@/api/exec/exec-template';
+  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import columns from '../types/table.columns';
+  import {} from '../types/const';
+  import { usePagination } from '@/types/table';
+
+  const emits = defineEmits(['openAdd', 'openUpdate']);
+
+  const tableRenderData = ref<ExecTemplateQueryResponse[]>([]);
+
+  const pagination = usePagination();
+  const { loading, setLoading } = useLoading();
+
+  const formModel = reactive<ExecTemplateQueryRequest>({
+    id: undefined,
+    name: undefined,
+    command: undefined,
+  });
+
+  // 删除当前行
+  const deleteRow = async ({ id }: {
+    id: number
+  }) => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await deleteExecTemplate(id);
+      Message.success('删除成功');
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 添加后回调
+  const addedCallback = () => {
+    fetchTableData();
+  };
+
+  // 更新后回调
+  const updatedCallback = () => {
+    fetchTableData();
+  };
+
+  defineExpose({
+    addedCallback, updatedCallback
+  });
+
+  // 加载数据
+  const doFetchTableData = async (request: ExecTemplateQueryRequest) => {
+    try {
+      setLoading(true);
+      const { data } = await getExecTemplatePage(request);
+      tableRenderData.value = data.rows;
+      pagination.total = data.total;
+      pagination.current = request.page;
+      pagination.pageSize = request.limit;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 切换页码
+  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
+    doFetchTableData({ page, limit, ...form });
+  };
+
+  onMounted(() => {
+    fetchTableData();
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-ui/src/views/exec/exec-template/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="layout-container" v-if="render">
+    <!-- 列表-表格 -->
+    <exec-template-table ref="table"
+                  @openAdd="() => drawer.openAdd()"
+                  @openUpdate="(e) => drawer.openUpdate(e)" />
+    <!-- 添加修改模态框 -->
+    <exec-template-form-drawer ref="drawer"
+                   @added="modalAddCallback"
+                   @updated="modalUpdateCallback" />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execTemplate'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref, onBeforeMount } from 'vue';
+  import ExecTemplateTable from './components/exec-template-table.vue';
+  import ExecTemplateFormDrawer from './components/exec-template-form-drawer.vue';
+
+  const render = ref(false);
+  const table = ref();
+  const drawer = ref();
+
+  // 添加回调
+  const modalAddCallback = () => {
+    table.value.addedCallback();
+  };
+
+  // 修改回调
+  const modalUpdateCallback = () => {
+    table.value.updatedCallback();
+  };
+
+  onBeforeMount(async () => {
+    render.value = true;
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

orion-ops-ui/src/views/exec/exec-template/types/form.rules.ts

@@ -0,0 +1,31 @@
+import type { FieldRule } from '@arco-design/web-vue';
+
+export const name = [{
+  required: true,
+  message: '请输入名称'
+}, {
+  maxLength: 64,
+  message: '名称长度不能大于64位'
+}] as FieldRule[];
+
+export const command = [{
+  required: true,
+  message: '请输入命令'
+}] as FieldRule[];
+
+export const timeout = [{
+  required: true,
+  message: '请输入超时时间秒 0不超时'
+}] as FieldRule[];
+
+export const parameter = [{
+  required: true,
+  message: '请输入参数'
+}] as FieldRule[];
+
+export default {
+  name,
+  command,
+  timeout,
+  parameter,
+} as Record<string, FieldRule | FieldRule[]>;

orion-ops-ui/src/views/exec/exec-template/types/table.columns.ts

@@ -0,0 +1,60 @@
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+import { dateFormat } from '@/utils';
+
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    slotName: 'id',
+    width: 70,
+    align: 'left',
+    fixed: 'left',
+  }, {
+    title: '名称',
+    dataIndex: 'name',
+    slotName: 'name',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '命令',
+    dataIndex: 'command',
+    slotName: 'command',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '超时时间',
+    dataIndex: 'timeout',
+    slotName: 'timeout',
+    align: 'left',
+  }, {
+    title: '参数',
+    dataIndex: 'parameter',
+    slotName: 'parameter',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '修改时间',
+    dataIndex: 'updateTime',
+    slotName: 'updateTime',
+    align: 'center',
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(new Date(record.updateTime));
+    },
+  }, {
+    title: '修改人',
+    dataIndex: 'updater',
+    slotName: 'updater',
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 130,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;