feat: 支持关联多标签、计划任务立即执行、标签相关操作优化

2026-03-03 16:45:46 +08:00 · 2023-12-05 23:03:51 +08:00
parent b347bd7ef5
commit 57361d8241
107 changed files with 1819 additions and 825 deletions
--- a/mayfly_go_web/src/views/ops/machine/MachineEdit.vue
+++ b/mayfly_go_web/src/views/ops/machine/MachineEdit.vue
@@ -4,8 +4,19 @@
            <el-form :model="form" ref="machineForm" :rules="rules" label-width="auto">
                <el-tabs v-model="tabActiveName">
                    <el-tab-pane label="基础信息" name="basic">
-                        <el-form-item prop="tagId" label="标签">
-                            <tag-select v-model="form.tagId" v-model:tag-path="form.tagPath" style="width: 100%" />
+                        <el-form-item ref="tagSelectRef" prop="tagId" label="标签">
+                            <tag-tree-select
+                                multiple
+                                @change-tag="
+                                    (tagIds) => {
+                                        form.tagId = tagIds;
+                                        tagSelectRef.validate();
+                                    }
+                                "
+                                :resource-code="form.code"
+                                :resource-type="TagResourceTypeEnum.Machine.value"
+                                style="width: 100%"
+                            />
                        </el-form-item>
                        <el-form-item prop="name" label="名称" required>
                            <el-input v-model.trim="form.name" placeholder="请输入机器别名" auto-complete="off"></el-input>
@@ -71,9 +82,10 @@
 import { toRefs, reactive, watch, ref } from 'vue';
 import { machineApi } from './api';
 import { ElMessage } from 'element-plus';
-import TagSelect from '../component/TagSelect.vue';
+import TagTreeSelect from '../component/TagTreeSelect.vue';
 import SshTunnelSelect from '../component/SshTunnelSelect.vue';
 import AuthCertSelect from './authcert/AuthCertSelect.vue';
+import { TagResourceTypeEnum } from '@/common/commonEnum';

 const props = defineProps({
    visible: {
@@ -95,7 +107,7 @@ const rules = {
        {
            required: true,
            message: '请选择标签',
-            trigger: ['blur', 'change'],
+            trigger: ['change'],
        },
    ],
    name: [
@@ -126,17 +138,11 @@ const rules = {
            trigger: ['change', 'blur'],
        },
    ],
-    password: [
-        {
-            required: true,
-            message: '请输入授权密码',
-            trigger: ['change', 'blur'],
-        },
-    ],
 };

 const machineForm: any = ref(null);
 const authCertSelectRef: any = ref(null);
+const tagSelectRef: any = ref(null);

 const state = reactive({
    dialogVisible: false,
@@ -146,14 +152,14 @@ const state = reactive({
    authType: 1,
    form: {
        id: null,
+        code: '',
        ip: null,
        port: 22,
        name: null,
        authCertId: null as any,
        username: '',
        password: '',
-        tagId: null as any,
-        tagPath: null as any,
+        tagId: [],
        remark: '',
        sshTunnelMachineId: null as any,
        enableRecorder: -1,
@@ -173,6 +179,7 @@ watch(props, async (newValue: any) => {
    state.tabActiveName = 'basic';
    if (newValue.machine) {
        state.form = { ...newValue.machine };
+
        // 如果凭证类型为公共的，则表示使用授权凭证认证
        const authCertId = (state.form as any).authCertId;
        if (authCertId > 0) {
@@ -181,7 +188,7 @@ watch(props, async (newValue: any) => {
            state.authType = 1;
        }
    } else {
-        state.form = { port: 22 } as any;
+        state.form = { port: 22, tagId: [] } as any;
        state.authType = 1;
    }
 });
--- a/mayfly_go_web/src/views/ops/machine/MachineList.vue
+++ b/mayfly_go_web/src/views/ops/machine/MachineList.vue
@@ -24,13 +24,6 @@
                <el-button v-auth="perms.delMachine" :disabled="selectionData.length < 1" @click="deleteMachine()" type="danger" icon="delete">删除</el-button>
            </template>

-            <template #tagPath="{ data }">
-                <tag-info :tag-path="data.tagPath" />
-                <span class="ml5">
-                    {{ data.tagPath }}
-                </span>
-            </template>
-
            <template #ipPort="{ data }">
                <el-link :disabled="data.status == -1" @click="showMachineStats(data)" type="primary" :underline="false">
                    {{ `${data.ip}:${data.port}` }}
@@ -82,6 +75,10 @@
                ></el-switch>
            </template>

+            <template #tagPath="{ data }">
+                <resource-tag :resource-code="data.code" :resource-type="TagResourceTypeEnum.Machine.value" />
+            </template>
+
            <template #action="{ data }">
                <span v-auth="'machine:terminal'">
                    <el-tooltip :show-after="500" content="按住ctrl则为新标签打开" placement="top">
@@ -190,15 +187,17 @@

 <script lang="ts" setup>
 import { ref, toRefs, reactive, onMounted, defineAsyncComponent } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { machineApi, getMachineTerminalSocketUrl } from './api';
 import { dateFormat } from '@/common/utils/date';
-import TagInfo from '../component/TagInfo.vue';
+import ResourceTag from '../component/ResourceTag.vue';
 import PageTable from '@/components/pagetable/PageTable.vue';
 import { TableColumn, TableQuery } from '@/components/pagetable';
 import { hasPerms } from '@/components/auth/auth';
 import { formatByteSize } from '@/common/utils/format';
+import { tagApi } from '../tag/api';
+import { TagResourceTypeEnum } from '@/common/commonEnum';

 // 组件
 const TerminalDialog = defineAsyncComponent(() => import('@/components/terminal/TerminalDialog.vue'));
@@ -210,6 +209,7 @@ const MachineRec = defineAsyncComponent(() => import('./MachineRec.vue'));
 const ProcessList = defineAsyncComponent(() => import('./ProcessList.vue'));

 const router = useRouter();
+const route = useRoute();
 const pageTableRef: any = ref(null);
 const terminalDialogRef: any = ref(null);

@@ -224,13 +224,13 @@ const perms = {
 const queryConfig = [TableQuery.slot('tagPath', '标签', 'tagPathSelect'), TableQuery.text('ip', 'IP'), TableQuery.text('name', '名称')];

 const columns = ref([
-    TableColumn.new('tagPath', '标签路径').isSlot().setAddWidth(20),
    TableColumn.new('name', '名称'),
    TableColumn.new('ipPort', 'ip:port').isSlot().setAddWidth(50),
    TableColumn.new('stat', '运行状态').isSlot().setAddWidth(50),
    TableColumn.new('fs', '磁盘(挂载点=>可用/总)').isSlot().setAddWidth(20),
    TableColumn.new('username', '用户名'),
    TableColumn.new('status', '状态').isSlot().setMinWidth(85),
+    TableColumn.new('tagPath', '关联标签').isSlot().setAddWidth(10).alignCenter(),
    TableColumn.new('remark', '备注'),
    TableColumn.new('action', '操作').isSlot().setMinWidth(238).fixedRight().alignCenter(),
 ]);
@@ -245,7 +245,7 @@ const state = reactive({
        pageSize: 0,
        ip: null,
        name: null,
-        tagPath: null,
+        tagPath: '',
    },
    // 列表数据
    data: {
@@ -360,7 +360,7 @@ const closeCli = async (row: any) => {
 };

 const getTags = async () => {
-    state.tags = await machineApi.tagList.request(null);
+    state.tags = await tagApi.getResourceTagPaths.request({ resourceType: TagResourceTypeEnum.Machine.value });
 };

 const openFormDialog = async (machine: any) => {
@@ -434,6 +434,9 @@ const showFileManage = (selectionData: any) => {
 const search = async () => {
    try {
        pageTableRef.value.loading(true);
+        if (route.query.tagPath) {
+            state.params.tagPath = route.query.tagPath as string;
+        }
        const res = await machineApi.list.request(state.params);
        state.data = res;
    } finally {
--- a/mayfly_go_web/src/views/ops/machine/MachineRec.vue
+++ b/mayfly_go_web/src/views/ops/machine/MachineRec.vue
@@ -7,31 +7,44 @@
            :before-close="handleClose"
            :close-on-click-modal="false"
            :destroy-on-close="true"
+            width="800"
+        >
+            <page-table
+                height="100%"
+                v-model:query-form="query"
+                :data="data"
+                :columns="columns"
+                :total="total"
+                v-model:page-size="query.pageSize"
+                v-model:page-num="query.pageNum"
+                @pageChange="getTermOps()"
+            >
+                <template #action="{ data }">
+                    <el-button @click="playRec(data)" loading-icon="loading" :loading="data.playRecLoding" type="primary" link>回放</el-button>
+                </template>
+            </page-table>
+        </el-dialog>
+
+        <el-dialog
+            :title="title"
+            v-model="playerDialogVisible"
+            :before-close="handleClosePlayer"
+            :close-on-click-modal="false"
+            :destroy-on-close="true"
            width="70%"
        >
-            <div class="toolbar">
-                <el-select @change="getUsers" v-model="operateDate" placeholder="操作日期" filterable>
-                    <el-option v-for="item in operateDates" :key="item" :label="item" :value="item"> </el-option>
-                </el-select>
-                <el-select class="ml10" @change="getRecs" filterable v-model="user" placeholder="请选择操作人">
-                    <el-option v-for="item in users" :key="item" :label="item" :value="item"> </el-option>
-                </el-select>
-                <el-select class="ml10" @change="playRec" filterable v-model="rec" placeholder="请选择操作记录">
-                    <el-option v-for="item in recs" :key="item" :label="item" :value="item"> </el-option>
-                </el-select>
-                <el-divider direction="vertical" border-style="dashed" />
-                快捷键-> space[空格键]: 暂停/播放
-            </div>
            <div ref="playerRef" id="rc-player"></div>
        </el-dialog>
    </div>
 </template>

 <script lang="ts" setup>
-import { toRefs, watch, ref, reactive } from 'vue';
+import { toRefs, watch, ref, reactive, nextTick } from 'vue';
 import { machineApi } from './api';
 import * as AsciinemaPlayer from 'asciinema-player';
 import 'asciinema-player/dist/bundle/asciinema-player.css';
+import PageTable from '@/components/pagetable/PageTable.vue';
+import { TableColumn } from '@/components/pagetable';

 const props = defineProps({
    visible: { type: Boolean },
@@ -41,67 +54,75 @@ const props = defineProps({

 const emit = defineEmits(['update:visible', 'cancel', 'update:machineId']);

+const columns = [
+    TableColumn.new('creator', '操作者').setMinWidth(120),
+    TableColumn.new('createTime', '开始时间').isTime().setMinWidth(150),
+    TableColumn.new('endTime', '结束时间').isTime().setMinWidth(150),
+    TableColumn.new('recordFilePath', '文件路径').setMinWidth(200),
+    TableColumn.new('action', '操作').isSlot().setMinWidth(60).fixedRight().alignCenter(),
+];
+
 const playerRef = ref(null);
 const state = reactive({
    dialogVisible: false,
    title: '',
    machineId: 0,
-    operateDates: [],
-    users: [],
-    recs: [],
-    operateDate: '',
-    user: '',
-    rec: '',
+    data: [],
+    total: 0,
+    query: {
+        pageNum: 1,
+        pageSize: 10,
+    },
+
+    playerDialogVisible: false,
 });

-const { dialogVisible, title, operateDates, operateDate, users, recs, user, rec } = toRefs(state);
+const { dialogVisible, query, data, total, playerDialogVisible } = toRefs(state);

 watch(props, async (newValue: any) => {
    const visible = newValue.visible;
    if (visible) {
        state.machineId = newValue.machineId;
        state.title = newValue.title;
-        await getOperateDate();
+        await getTermOps();
    }
    state.dialogVisible = visible;
 });

-const getOperateDate = async () => {
-    const res = await machineApi.recDirNames.request({ path: state.machineId });
-    state.operateDates = res as any;
-};
-
-const getUsers = async (operateDate: string) => {
-    state.users = [];
-    state.user = '';
-    state.recs = [];
-    state.rec = '';
-    const res = await machineApi.recDirNames.request({ path: `${state.machineId}/${operateDate}` });
-    state.users = res as any;
-};
-
-const getRecs = async (user: string) => {
-    state.recs = [];
-    state.rec = '';
-    const res = await machineApi.recDirNames.request({ path: `${state.machineId}/${state.operateDate}/${user}` });
-    state.recs = res as any;
+const getTermOps = async () => {
+    const res = await machineApi.termOpRecs.request({ id: state.machineId, ...state.query });
+    state.data = res.list;
+    state.total = res.total;
 };

 let player: any = null;

-const playRec = async (rec: string) => {
-    if (player) {
-        player.dispose();
+const playRec = async (rec: any) => {
+    try {
+        if (player) {
+            player.dispose();
+        }
+        rec.playRecLoding = true;
+        const content = await machineApi.termOpRec.request({
+            recId: rec.id,
+            id: rec.machineId,
+        });
+
+        state.playerDialogVisible = true;
+        nextTick(() => {
+            player = AsciinemaPlayer.create(`data:text/plain;base64,${content}`, playerRef.value, {
+                autoPlay: true,
+                speed: 1.0,
+                idleTimeLimit: 2,
+            });
+        });
+    } finally {
+        rec.playRecLoding = false;
    }
-    const content = await machineApi.recDirNames.request({
-        isFile: '1',
-        path: `${state.machineId}/${state.operateDate}/${state.user}/${rec}`,
-    });
-    player = AsciinemaPlayer.create(`data:text/plain;base64,${content}`, playerRef.value, {
-        autoPlay: true,
-        speed: 1.0,
-        idleTimeLimit: 2,
-    });
+};
+
+const handleClosePlayer = () => {
+    state.playerDialogVisible = false;
 };

 /**
@@ -111,12 +132,8 @@ const handleClose = () => {
    emit('update:visible', false);
    emit('update:machineId', null);
    emit('cancel');
-    state.operateDates = [];
-    state.users = [];
-    state.recs = [];
-    state.operateDate = '';
-    state.user = '';
-    state.rec = '';
+    state.data = [];
+    state.total = 0;
 };
 </script>
 <style lang="scss">
@@ -124,5 +141,15 @@ const handleClose = () => {
    .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
        padding: 0px !important;
    }
+
+    #rc-player {
+        .ap-terminal {
+            font-size: 14px !important;
+        }
+
+        .ap-player {
+            height: 550px !important;
+        }
+    }
 }
 </style>
--- a/mayfly_go_web/src/views/ops/machine/api.ts
+++ b/mayfly_go_web/src/views/ops/machine/api.ts
@@ -43,7 +43,10 @@ export const machineApi = {
    // 删除配置的文件or目录
    delConf: Api.newDelete('/machines/{machineId}/files/{id}'),
    terminal: Api.newGet('/api/machines/{id}/terminal'),
-    recDirNames: Api.newGet('/machines/rec/names'),
+    // 机器终端操作记录列表
+    termOpRecs: Api.newGet('/machines/{id}/term-recs'),
+    // 机器终端操作记录详情
+    termOpRec: Api.newGet('/machines/{id}/term-recs/{recId}'),
 };

 export const authCertApi = {
@@ -59,6 +62,7 @@ export const cronJobApi = {
    relateCronJobIds: Api.newGet('/machine-cronjobs/cronjob-ids'),
    save: Api.newPost('/machine-cronjobs'),
    delete: Api.newDelete('/machine-cronjobs/{id}'),
+    run: Api.newPost('/machine-cronjobs/run/{key}'),
    execList: Api.newGet('/machine-cronjobs/execs'),
 };

--- a/mayfly_go_web/src/views/ops/machine/cronjob/CronJobExecList.vue
+++ b/mayfly_go_web/src/views/ops/machine/cronjob/CronJobExecList.vue
@@ -13,9 +13,9 @@
                ref="pageTableRef"
                :query="queryConfig"
                v-model:query-form="params"
-                :data="data.list"
+                :data="state.data.list"
                :columns="columns"
-                :total="data.total"
+                :total="state.data.total"
                v-model:page-size="params.pageSize"
                v-model:page-num="params.pageNum"
                @pageChange="search()"
@@ -88,7 +88,7 @@ const state = reactive({

 const machineMap: Map<number, any> = new Map();

-const { dialogVisible, params, data } = toRefs(state);
+const { dialogVisible, params } = toRefs(state);

 watch(props, async (newValue: any) => {
    state.dialogVisible = newValue.visible;
--- a/mayfly_go_web/src/views/ops/machine/cronjob/CronJobList.vue
+++ b/mayfly_go_web/src/views/ops/machine/cronjob/CronJobList.vue
@@ -24,6 +24,9 @@
            </template>

            <template #action="{ data }">
+                <el-button :disabled="data.status == CronJobStatusEnum.Disable.value" v-auth="perms.saveCronJob" type="primary" @click="runCronJob(data)" link
+                    >执行</el-button
+                >
                <el-button v-auth="perms.saveCronJob" type="primary" @click="openFormDialog(data)" link>编辑</el-button>
                <el-button type="primary" @click="showExec(data)" link>执行记录</el-button>
            </template>
@@ -111,6 +114,11 @@ const openFormDialog = async (data: any) => {
    state.cronJobEdit.visible = true;
 };

+const runCronJob = async (data: any) => {
+    await cronJobApi.run.request({ key: data.key });
+    ElMessage.success('执行成功');
+};
+
 const deleteCronJob = async () => {
    try {
        await ElMessageBox.confirm(`确定删除【${state.selectionData.map((x: any) => x.name).join(', ')}】计划任务信息? 该操作将同时删除执行记录`, '提示', {