package/go_process_manager
1
0
Fork 0
mirror of https://github.com/lzh-1625/go_process_manager.git synced 2025-10-05 16:06:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

add task ui

Browse Source
This commit is contained in:
akrike
2025-09-11 22:36:58 +08:00
parent 1844a843eb
commit c52f7e2097
6 changed files with 226 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
resources/src/views/task/Task.vue
View File

@@ -4,7 +4,7 @@
<v-data-table
:headers="headers"
:items="items"
:items="taskData"
:items-per-page="5"
item-key="id"
class="elevation-1"
@@ -15,21 +15,42 @@
</template>
<template #item.enable="{ item }">
<v-chip size="small" variant="tonal">{{
item.enable ? "启用" : "未启用"
}}</v-chip>
<v-switch
color="primary"
@change="changeEnable(item)"
v-model="item.enable"
></v-switch>
</template>
<template #item.apiEnable="{ item }">
<v-chip size="small" variant="tonal">{{
item.apiEnable ? "可用" : "不可用"
}}</v-chip>
<v-switch
color="primary"
@change="edit(item)"
v-model="item.apiEnable"
></v-switch>
</template>
<template #item.running="{ item }">
<v-chip size="small" variant="tonal">{{
item.running ? "运行中" : "未运行"
}}</v-chip>
<svg
v-if="item.running"
width="20"
height="20"
viewBox="0 0 48 48"
fill="#000000"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25 34a1 1 0 011 1v10a1 1 0 01-1 1h-2a1 1 0 01-1-1V35a1 1 0 011-1h2zm8.192-3.636l7.072 7.071a1 1 0 010 1.414l-1.415 1.415a1 1 0 01-1.414 0l-7.071-7.072a1 1 0 010-1.414l1.414-1.414a1 1 0 011.414 0zm-16.97 0l1.414 1.414a1 1 0 010 1.414l-7.071 7.072a1 1 0 01-1.414 0l-1.414-1.415a1 1 0 010-1.414l7.07-7.071a1 1 0 011.415 0zM45 22a1 1 0 011 1v2a1 1 0 01-1 1H35a1 1 0 01-1-1v-2a1 1 0 011-1h10zm-32 0a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1v-2a1 1 0 011-1h10zM10.565 7.737l7.071 7.07a1 1 0 010 1.415l-1.414 1.414a1 1 0 01-1.414 0l-7.071-7.071a1 1 0 010-1.414L9.15 7.737a1 1 0 011.414 0zm28.284 0l1.415 1.414a1 1 0 010 1.414l-7.072 7.071a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414l7.071-7.071a1 1 0 011.414 0zM25 2a1 1 0 011 1v10a1 1 0 01-1 1h-2a1 1 0 01-1-1V3a1 1 0 011-1h2z"
fill="#000000"
/>
</svg>
<svg v-else width="20" height="20" viewBox="0 0 48 48" fill="#000000">
<path
d="M42.02 12.71l-1.38-1.42a1 1 0 00-1.41 0L18.01 32.5l-9.9-9.89a1 1 0 00-1.41 0l-1.41 1.41a1 1 0 000 1.41l10.6 10.61 1.42 1.41a1 1 0 001.41 0l1.41-1.41 21.92-21.92a1 1 0 00-.03-1.41z"
fill="#000000"
/>
</svg>
</template>
<template #item.startTime="{ item }">
@@ -41,16 +62,138 @@
</template>
<!-- 如果需要可以加 actions 列 -->
<template #body.append>
<template #item.operate="{ item }">
<!-- 这里可以放底部说明或按钮 -->
<v-icon class="mr-2" v-if="!item.running"> mdi-play </v-icon>
<v-icon class="mr-2" v-else> mdi-stop </v-icon>
<v-icon class="mr-2"> mdi-pencil </v-icon>
<v-icon> mdi-delete </v-icon>
</template>
</v-data-table>
</v-card>
<v-dialog v-model="taskDialog" max-width="500px">
<v-card>
<v-card-title class="text-h5">{{
addTask ? "添加任务" : "修改任务"
}}</v-card-title>
<v-card-text style="margin-top: 20px">
<v-autocomplete
label="判断条件"
item-text="name"
item-value="value"
filled
dense
:items="conditionSelect"
v-model="taskForm.condition"
></v-autocomplete>
<v-autocomplete
v-if="taskForm.condition != 3"
label="判断目标"
item-text="name"
item-value="value"
filled
dense
:items="processSelect"
v-model="taskForm.processId"
></v-autocomplete>
<v-autocomplete
label="操作目标"
item-text="name"
item-value="value"
filled
dense
:items="processSelect"
v-model="taskForm.operationTarget"
></v-autocomplete>
<v-autocomplete
label="执行操作"
item-text="name"
item-value="value"
filled
dense
:items="operationSelect"
v-model="taskForm.operation"
></v-autocomplete>
<v-autocomplete
label="触发目标"
item-text="name"
item-value="value"
filled
dense
:items="processSelect"
v-model="taskForm.triggerTarget"
></v-autocomplete>
<v-autocomplete
v-if="taskForm.triggerTarget != null"
label="触发事件"
item-text="name"
item-value="value"
filled
dense
:items="eventSelect"
v-model="taskForm.triggerEvent"
></v-autocomplete>
<v-autocomplete
label="后续任务"
item-text="name"
item-value="value"
filled
dense
:items="taskSelect"
v-model="taskForm.nextId"
></v-autocomplete>
<v-text-field
label="定时任务"
filled
dense
v-model="taskForm.cron"
></v-text-field>
<v-text-field
@click="copyToClipboard"
:disabled="taskForm?.key == null"
label="api"
filled
dense
readonly
:value="taskForm.key != null ? urlBase + taskForm.key : '未创建api'"
></v-text-field>
<v-btn @click="changeApi" color="primary">
{{ taskForm?.key != null ? "刷新api" : "创建api" }}
<v-icon right dark>
{{ taskForm?.key != null ? "mdi-refresh" : "mdi-plus" }}</v-icon
>
</v-btn>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="taskDialog = false"
>取消</v-btn
>
<v-btn color="blue darken-1" text @click="submit">确认</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script setup>
<script setup lang="ts">
import { ref } from "vue";
import {
changeTaskKey,
editTask,
editTaskEnable,
getTaskAll,
getTaskById,
} from "~/src/api/task";
import { useSnackbarStore } from "~/src/stores/snackbarStore";
import { TaskItem } from "~/src/types/tassk/task";
const snackbarStore = useSnackbarStore();
const taskDialog = ref(false);
const taskForm = ref<Partial<TaskItem>>({});
const addTask = ref(false);
/**
* 自定义列头：title -> 显示标题（中文），key -> 对应数据字段名
* （Vuetify 3 的 headers 使用 title/key 风格）
@@ -58,47 +201,21 @@ import { ref } from "vue";
const headers = [
{ title: "任务ID", key: "id" },
{ title: "任务名", key: "processName" },
{ title: "流程 ID", key: "processId" },
{ title: "条件", key: "condition" },
{ title: "进程ID", key: "processId" },
{ title: "下一步 ID", key: "nextId" },
{ title: "触发进程", key: "targetName" },
{ title: "触发名称", key: "triggerName" },
{ title: "操作", key: "operation" },
{ title: "触发事件", key: "triggerEvent" },
{ title: "触发目标", key: "triggerTarget" },
{ title: "操作目标", key: "operationTarget" },
{ title: "定时任务", key: "cron" },
{ title: "是否启用", key: "enable" },
{ title: "API 可用", key: "apiEnable" },
{ title: "开始时间", key: "startTime" },
{ title: "状态", key: "running" },
{ title: "启用定时任务", key: "enable" },
{ title: "启用API", key: "apiEnable" },
{ title: "操作", key: "operate" },
];
const rawData = {
id: 1,
processId: 0,
condition: 3,
nextId: null,
operation: 0,
triggerEvent: null,
triggerTarget: null,
operationTarget: 112,
cron: "",
enable: false,
apiEnable: true,
key: "bhCSw2QDdu",
processName: "",
targetName: "push",
triggerName: "",
startTime: "0001-01-01T00:00:00Z",
running: false,
};
// 单行数组（v-data-table 接受 items 数组）
const items = ref([rawData]);
const taskData = ref<TaskItem[]>();
/** 格式化开始时间（兼容 null / 空字符串） */
function formatStartTime(v) {
const formatStartTime = (v) => {
if (!v) return "-";
try {
const d = new Date(v);
@@ -107,7 +224,49 @@ function formatStartTime(v) {
} catch (e) {
return v;
}
}
};
onMounted(() => {
initTask();
});
const initTask = () => {
getTaskAll().then((e) => {
taskData.value = e.data!;
});
};
const edit = (item) => {
editTask(item).then((e) => {
if (e.code == 0) {
snackbarStore.showSuccessMessage("success");
initTask();
}
});
};
const changeEnable = (item) => {
editTaskEnable({
id: item.id,
enable: item.enable,
}).then((e) => {
if (e.code == 0) {
snackbarStore.showSuccessMessage("success");
initTask();
}
});
};
const changeApi = () => {
changeTaskKey(taskForm.value?.id).then((resp) => {
if (resp.code == 0) {
snackbarStore.showSuccessMessage("success");
getTaskById(taskForm.value?.id).then((e) => {
Object.assign(taskForm.value, e.data);
});
}
});
};
</script>
<style scoped>