🔨 执行命令.

2024-03-15 19:32:22 +08:00
parent 87bbcfa845
commit 03c334a507
28 changed files with 791 additions and 202 deletions
--- a/orion-ops-ui/src/components/exec/template/modal/index.vue
+++ b/orion-ops-ui/src/components/exec/template/modal/index.vue
@@ -0,0 +1,165 @@
+<template>
+  <a-modal v-model:visible="visible"
+           title-align="start"
+           title="执行模板"
+           width="86%"
+           :top="80"
+           :body-style="{padding: '0 8px'}"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           :footer="false"
+           @close="handleClose">
+    <!-- 搜索 -->
+    <a-card class="general-card table-search-card"
+            style="margin-bottom: 0;">
+      <query-header :model="formModel"
+                    label-align="left"
+                    @submit="fetchTableData"
+                    @reset="fetchTableData"
+                    @keyup.enter="() => fetchTableData()">
+        <!-- id -->
+        <a-form-item field="id" label="id">
+          <a-input-number v-model="formModel.id"
+                          placeholder="请输入id"
+                          allow-clear
+                          hide-button />
+        </a-form-item>
+        <!-- 模板名称 -->
+        <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>
+      </query-header>
+    </a-card>
+    <!-- 表格 -->
+    <a-card class="general-card table-card">
+      <!-- table -->
+      <a-table row-key="id"
+               ref="tableRef"
+               :loading="loading"
+               :columns="columns"
+               :data="tableRenderData"
+               :pagination="pagination"
+               :scroll="{ x: '100%', y: '60vh' }"
+               @page-change="(page) => fetchTableData(page, pagination.pageSize)"
+               @page-size-change="(size) => fetchTableData(1, size)"
+               :bordered="false">
+        <!-- 模板名称 -->
+        <template #name="{ record }">
+          <span class="span-blue">{{ record.name }}</span>
+        </template>
+        <!-- 模板命令 -->
+        <template #command="{ record }">
+          <span class="copy-left" @click="copy(record.command, '已复制')">
+            <icon-copy />
+          </span>
+          <span :title="record.command">{{ record.command }}</span>
+        </template>
+        <!-- 操作 -->
+        <template #handle="{ record }">
+          <div class="table-handle-wrapper">
+            <!-- 选择 -->
+            <a-button type="text"
+                      size="mini"
+                      @click="selectedTemplate(record)">
+              选择
+            </a-button>
+          </div>
+        </template>
+      </a-table>
+    </a-card>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'execTemplateModal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecTemplateQueryRequest, ExecTemplateQueryResponse } from '@/api/exec/exec-template';
+  import { reactive, ref } from 'vue';
+  import { usePagination } from '@/types/table';
+  import useVisible from '@/hooks/visible';
+  import useLoading from '@/hooks/loading';
+  import useCopy from '@/hooks/copy';
+  import columns from './table.columns';
+  import { getExecTemplatePage } from '@/api/exec/exec-template';
+
+  const emits = defineEmits(['selected']);
+
+  const { visible, setVisible } = useVisible();
+  const { loading, setLoading } = useLoading();
+  const { copy } = useCopy();
+  const pagination = usePagination();
+
+  const tableRenderData = ref<ExecTemplateQueryResponse[]>([]);
+  const formModel = reactive<ExecTemplateQueryRequest>({
+    id: undefined,
+    name: undefined,
+    command: undefined,
+  });
+
+  // 打开
+  const open = () => {
+    setVisible(true);
+    // 加载数据
+    if (!tableRenderData.value.length) {
+      fetchTableData();
+    }
+  };
+
+  defineExpose({ open });
+
+  // 选择模板
+  const selectedTemplate = (record: ExecTemplateQueryResponse) => {
+    emits('selected', record);
+    handleClose();
+  };
+
+  // 加载数据
+  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 });
+  };
+
+  // 关闭回调
+  const handleClose = () => {
+    handleClear();
+  };
+
+  // 清空
+  const handleClear = () => {
+    setLoading(false);
+    setVisible(false);
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
--- a/orion-ops-ui/src/components/exec/template/modal/table.columns.ts
+++ b/orion-ops-ui/src/components/exec/template/modal/table.columns.ts
@@ -0,0 +1,43 @@
+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',
+    width: 200,
+    ellipsis: true,
+  }, {
+    title: '模板命令',
+    dataIndex: 'command',
+    slotName: 'command',
+    align: 'left',
+    ellipsis: true,
+  }, {
+    title: '修改时间',
+    dataIndex: 'updateTime',
+    slotName: 'updateTime',
+    align: 'center',
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(new Date(record.updateTime));
+    },
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 80,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;
--- a/orion-ops-ui/src/components/meta/history/modal/index.vue
+++ b/orion-ops-ui/src/components/meta/history/modal/index.vue
@@ -76,7 +76,6 @@
 </script>

 <script lang="ts" setup>
-  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import type { HistoryValueQueryRequest, HistoryValueQueryResponse } from '@/api/meta/history-value';
  import { reactive, ref } from 'vue';
  import useLoading from '@/hooks/loading';
@@ -84,54 +83,9 @@
  import { getHistoryValuePage } from '@/api/meta/history-value';
  import { usePagination } from '@/types/table';
  import useCopy from '@/hooks/copy';
-  import { dateFormat } from '@/utils';
+  import columns from './table.columns';
  import { Message } from '@arco-design/web-vue';

-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      slotName: 'id',
-      width: 70,
-      align: 'left',
-      fixed: 'left',
-    }, {
-      title: '修改前',
-      dataIndex: 'beforeValue',
-      slotName: 'beforeValue',
-      align: 'left',
-      ellipsis: true,
-      tooltip: true,
-    }, {
-      title: '修改后',
-      dataIndex: 'afterValue',
-      slotName: 'afterValue',
-      align: 'left',
-      ellipsis: true,
-      tooltip: true,
-    }, {
-      title: '修改时间',
-      dataIndex: 'createTime',
-      slotName: 'createTime',
-      align: 'center',
-      width: 180,
-      render: ({ record }) => {
-        return dateFormat(new Date(record.createTime));
-      },
-    }, {
-      title: '修改人',
-      dataIndex: 'creator',
-      slotName: 'creator',
-      width: 80,
-    }, {
-      title: '操作',
-      slotName: 'handle',
-      width: 80,
-      align: 'center',
-      fixed: 'right',
-    },
-  ] as TableColumnData[];
-
  const props = defineProps({
    type: String,
    rollback: Function
--- a/orion-ops-ui/src/components/meta/history/modal/table.columns.ts
+++ b/orion-ops-ui/src/components/meta/history/modal/table.columns.ts
@@ -0,0 +1,49 @@
+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: 'beforeValue',
+    slotName: 'beforeValue',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '修改后',
+    dataIndex: 'afterValue',
+    slotName: 'afterValue',
+    align: 'left',
+    ellipsis: true,
+    tooltip: true,
+  }, {
+    title: '修改时间',
+    dataIndex: 'createTime',
+    slotName: 'createTime',
+    align: 'center',
+    width: 180,
+    render: ({ record }) => {
+      return dateFormat(new Date(record.createTime));
+    },
+  }, {
+    title: '修改人',
+    dataIndex: 'creator',
+    slotName: 'creator',
+    width: 80,
+  }, {
+    title: '操作',
+    slotName: 'handle',
+    width: 80,
+    align: 'center',
+    fixed: 'right',
+  },
+] as TableColumnData[];
+
+export default columns;
--- a/orion-ops-ui/src/components/view/exec-editor/const.ts
+++ b/orion-ops-ui/src/components/view/exec-editor/const.ts
@@ -1,8 +1,9 @@
 // 模板参数
 export interface TemplateParam {
  name?: string;
-  default?: string;
  desc?: string;
+  defaultValue?: any;
+  value?: any;
 }

 // 内置参数