mirror of
https://github.com/Cccc-owo/CheckInApp.git
synced 2026-06-17 14:06:28 +00:00
refactor: v2
backend & frontend
This commit is contained in:
@@ -0,0 +1,779 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50 p-6">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-8 animate-fade-in">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-gradient mb-2">任务管理</h1>
|
||||
<p class="text-gray-600">管理您的自动打卡任务</p>
|
||||
</div>
|
||||
<button
|
||||
@click="showCreateDialog = true"
|
||||
class="md3-button-filled shadow-md3-3 hover:scale-105 transform transition-all"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
创建任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<div class="fluent-card p-6 animate-slide-up">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 mb-1">总任务数</p>
|
||||
<p class="text-3xl font-bold text-primary-600">{{ taskStore.taskStats.total }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-primary-100 rounded-md3 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fluent-card p-6 animate-slide-up" style="animation-delay: 0.1s">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 mb-1">启用中</p>
|
||||
<p class="text-3xl font-bold text-green-600">{{ taskStore.taskStats.active }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-green-100 rounded-md3 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fluent-card p-6 animate-slide-up" style="animation-delay: 0.2s">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 mb-1">已禁用</p>
|
||||
<p class="text-3xl font-bold text-gray-600">{{ taskStore.taskStats.inactive }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-gray-100 rounded-md3 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tasks List -->
|
||||
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div v-for="i in 6" :key="i" class="fluent-card p-6">
|
||||
<div class="skeleton h-6 w-3/4 mb-4"></div>
|
||||
<div class="skeleton h-4 w-full mb-2"></div>
|
||||
<div class="skeleton h-4 w-2/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="taskStore.tasks.length === 0" class="fluent-card p-12 text-center">
|
||||
<svg class="w-20 h-20 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<h3 class="text-xl font-semibold text-gray-700 mb-2">暂无任务</h3>
|
||||
<p class="text-gray-500 mb-6">点击右上角的"创建任务"按钮开始添加您的第一个打卡任务</p>
|
||||
<button @click="showCreateDialog = true" class="md3-button-outlined">
|
||||
创建第一个任务
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
v-for="task in taskStore.tasks"
|
||||
:key="task.id"
|
||||
class="fluent-card p-6 hover:scale-105 transform transition-all cursor-pointer animate-slide-up"
|
||||
@click="viewTask(task)"
|
||||
>
|
||||
<!-- Task Header -->
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-1">{{ task.name || '未命名任务' }}</h3>
|
||||
<p class="text-sm text-gray-500">任务 ID: {{ task.id }}</p>
|
||||
</div>
|
||||
<span :class="task.is_active ? 'status-success' : 'status-info'">
|
||||
{{ task.is_active ? '启用' : '禁用' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Task Details -->
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
</svg>
|
||||
接龙ID: {{ task.thread_id || '未知' }}
|
||||
</div>
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
最后打卡: {{ task.last_check_in_time ? formatDateTime(task.last_check_in_time) : '未打卡' }}
|
||||
</div>
|
||||
<div class="flex items-center text-sm">
|
||||
<svg class="w-4 h-4 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span v-if="task.last_check_in_status" :class="{
|
||||
'text-green-600 font-medium': task.last_check_in_status === 'success',
|
||||
'text-blue-600 font-medium': task.last_check_in_status === 'out_of_time',
|
||||
'text-red-600 font-medium': task.last_check_in_status === 'failure',
|
||||
'text-yellow-600 font-medium': task.last_check_in_status === 'unknown'
|
||||
}">
|
||||
{{
|
||||
task.last_check_in_status === 'success' ? '✅ 打卡成功' :
|
||||
task.last_check_in_status === 'out_of_time' ? '🕐 时间范围外' :
|
||||
task.last_check_in_status === 'failure' ? '❌ 打卡失败' :
|
||||
'❗ 打卡异常'
|
||||
}}
|
||||
</span>
|
||||
<span v-else class="text-gray-500">暂无打卡记录</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task Actions -->
|
||||
<div class="flex gap-2 pt-4 border-t border-gray-100">
|
||||
<button
|
||||
@click.stop="handleCheckIn(task.id)"
|
||||
:disabled="checkInLoading[task.id]"
|
||||
class="flex-1 py-2 px-4 bg-primary-50 text-primary-600 rounded-lg hover:bg-primary-100 transition-colors text-sm font-medium disabled:opacity-50"
|
||||
>
|
||||
{{ checkInLoading[task.id] ? '打卡中...' : '立即打卡' }}
|
||||
</button>
|
||||
<button
|
||||
@click.stop="toggleTaskStatus(task)"
|
||||
class="flex-1 py-2 px-4 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium"
|
||||
>
|
||||
{{ task.is_active ? '禁用' : '启用' }}
|
||||
</button>
|
||||
<button
|
||||
@click.stop="editTask(task)"
|
||||
class="p-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
@click.stop="deleteTask(task)"
|
||||
class="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit Task Dialog -->
|
||||
<el-dialog
|
||||
v-model="showCreateDialog"
|
||||
:title="editingTask ? '编辑任务' : '从模板创建任务'"
|
||||
width="700px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<!-- 只显示从模板创建 -->
|
||||
<div v-if="!editingTask">
|
||||
<div v-if="loadingTemplates" class="text-center py-8">
|
||||
<el-icon class="is-loading" :size="32"><Loading /></el-icon>
|
||||
<p class="text-gray-500 mt-2">加载模板中...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="activeTemplates.length === 0" class="text-center py-8">
|
||||
<p class="text-gray-500">暂无可用模板</p>
|
||||
<p class="text-sm text-gray-400 mt-2">请联系管理员创建模板</p>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<!-- Template Selection -->
|
||||
<el-form-item label="选择模板" label-width="100px" v-if="!selectedTemplate">
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
<div
|
||||
v-for="template in activeTemplates"
|
||||
:key="template.id"
|
||||
@click="selectTemplate(template)"
|
||||
class="border rounded-lg p-4 cursor-pointer hover:border-primary-500 hover:bg-primary-50 transition-all"
|
||||
>
|
||||
<h4 class="font-semibold text-gray-800 mb-1">{{ template.name }}</h4>
|
||||
<p class="text-sm text-gray-600">{{ template.description || '无描述' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- Template Form -->
|
||||
<el-form v-if="selectedTemplate" :model="templateTaskForm" ref="templateFormRef" label-width="120px">
|
||||
<div class="mb-4 p-3 bg-blue-50 rounded-lg flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-blue-900">使用模板：{{ selectedTemplate.name }}</span>
|
||||
</div>
|
||||
<el-button size="small" text @click="selectedTemplate = null">更换模板</el-button>
|
||||
</div>
|
||||
|
||||
<el-form-item label="任务名称" prop="task_name">
|
||||
<el-input v-model="templateTaskForm.task_name" placeholder="可选，留空则自动生成" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="接龙 ID" prop="thread_id" required>
|
||||
<el-input v-model="templateTaskForm.thread_id" placeholder="请输入接龙项目 ID" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">填写字段信息</el-divider>
|
||||
|
||||
<!-- Dynamic Fields -->
|
||||
<div v-for="(fieldConfig, key) in visibleFields" :key="key">
|
||||
<el-form-item
|
||||
:label="fieldConfig.display_name"
|
||||
:required="fieldConfig.required"
|
||||
>
|
||||
<!-- Text Input -->
|
||||
<el-input
|
||||
v-if="fieldConfig.field_type === 'text'"
|
||||
v-model="templateTaskForm.field_values[key]"
|
||||
:placeholder="fieldConfig.placeholder || `请输入${fieldConfig.display_name}`"
|
||||
/>
|
||||
|
||||
<!-- Textarea -->
|
||||
<el-input
|
||||
v-else-if="fieldConfig.field_type === 'textarea'"
|
||||
v-model="templateTaskForm.field_values[key]"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
:placeholder="fieldConfig.placeholder || `请输入${fieldConfig.display_name}`"
|
||||
/>
|
||||
|
||||
<!-- Number Input -->
|
||||
<el-input-number
|
||||
v-else-if="fieldConfig.field_type === 'number'"
|
||||
v-model="templateTaskForm.field_values[key]"
|
||||
:placeholder="fieldConfig.placeholder || `请输入${fieldConfig.display_name}`"
|
||||
style="width: 100%"
|
||||
/>
|
||||
|
||||
<!-- Select -->
|
||||
<el-select
|
||||
v-else-if="fieldConfig.field_type === 'select'"
|
||||
v-model="templateTaskForm.field_values[key]"
|
||||
:placeholder="fieldConfig.placeholder || `请选择${fieldConfig.display_name}`"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fieldConfig.options"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<span v-if="fieldConfig.default_value" class="text-xs text-gray-500 mt-1">
|
||||
默认值: {{ fieldConfig.default_value }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Mode Form - 简化版，只显示任务名称和启用状态 -->
|
||||
<el-form v-if="editingTask" :model="taskForm" :rules="taskRules" ref="taskFormRef" label-width="100px">
|
||||
<el-form-item label="任务名称" prop="name">
|
||||
<el-input v-model="taskForm.name" placeholder="请输入任务名称（例如：公司打卡）" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用状态">
|
||||
<el-switch v-model="taskForm.is_active" />
|
||||
<span class="ml-2 text-sm text-gray-500">
|
||||
{{ taskForm.is_active ? '启用自动打卡' : '禁用自动打卡（仍可手动打卡）' }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 新增：Crontab 编辑器 -->
|
||||
<el-form-item label="打卡时间表">
|
||||
<CrontabEditor v-model="taskForm.cron_expression" />
|
||||
</el-form-item>
|
||||
|
||||
<el-divider content-position="left">任务 Payload 配置（只读）</el-divider>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm text-gray-600">完整的打卡请求配置</span>
|
||||
<button
|
||||
@click="copyPayload"
|
||||
type="button"
|
||||
class="px-3 py-1 text-xs bg-blue-50 text-blue-600 rounded hover:bg-blue-100 transition-colors flex items-center gap-1"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="formattedPayload"
|
||||
type="textarea"
|
||||
:rows="12"
|
||||
readonly
|
||||
class="font-mono text-xs"
|
||||
style="resize: vertical; min-height: 200px; max-height: 400px;"
|
||||
/>
|
||||
<p class="text-xs text-gray-500 mt-1">
|
||||
💡 此配置由模板自动生成，如需修改请删除任务后从模板重新创建
|
||||
</p>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex gap-3 justify-end">
|
||||
<button @click="showCreateDialog = false" class="md3-button-text">取消</button>
|
||||
<button @click="handleSubmit" :disabled="submitting" class="md3-button-filled">
|
||||
{{ submitting ? '提交中...' : (editingTask ? '保存修改' : '创建任务') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import Layout from '@/components/Layout.vue'
|
||||
import CrontabEditor from '@/components/CrontabEditor.vue'
|
||||
import { useTaskStore } from '@/stores/task'
|
||||
import { useTemplateStore } from '@/stores/template'
|
||||
import { copyToClipboard, formatDateTime } from '@/utils/helpers'
|
||||
|
||||
const router = useRouter()
|
||||
const taskStore = useTaskStore()
|
||||
const templateStore = useTemplateStore()
|
||||
|
||||
const loading = ref(false)
|
||||
const showCreateDialog = ref(false)
|
||||
const submitting = ref(false)
|
||||
const editingTask = ref(null)
|
||||
const taskFormRef = ref(null)
|
||||
const templateFormRef = ref(null)
|
||||
const checkInLoading = ref({})
|
||||
|
||||
// Template mode
|
||||
const createMode = ref('template') // 'template' or 'manual'
|
||||
const loadingTemplates = ref(false)
|
||||
const activeTemplates = ref([])
|
||||
const selectedTemplate = ref(null)
|
||||
const templatePreview = ref(null) // 存储从 preview 接口获取的合并后配置
|
||||
|
||||
// Manual create form
|
||||
const taskForm = reactive({
|
||||
name: '',
|
||||
thread_id: '',
|
||||
is_active: true,
|
||||
payload_config: '',
|
||||
cron_expression: '0 20 * * *', // 新增：Crontab 表达式，默认每天 20:00
|
||||
})
|
||||
|
||||
// Template create form
|
||||
const templateTaskForm = reactive({
|
||||
task_name: '',
|
||||
thread_id: '',
|
||||
field_values: {}
|
||||
})
|
||||
|
||||
const taskRules = {
|
||||
name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
|
||||
thread_id: [{ required: true, message: '请输入接龙 ID', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
// Compute visible fields from selected template (using merged config)
|
||||
const visibleFields = computed(() => {
|
||||
if (!templatePreview.value) return {}
|
||||
|
||||
// 使用合并后的完整字段配置（包含从父模板继承的字段）
|
||||
const fieldConfig = templatePreview.value.field_config
|
||||
const visible = {}
|
||||
|
||||
// 递归函数：提取所有可见的普通字段
|
||||
const extractVisibleFields = (config, parentPath = '') => {
|
||||
for (const [key, value] of Object.entries(config)) {
|
||||
const currentPath = parentPath ? `${parentPath}.${key}` : key
|
||||
|
||||
// 判断是否为字段配置对象（包含 display_name）
|
||||
if (value && typeof value === 'object' && 'display_name' in value) {
|
||||
// 这是一个普通字段配置
|
||||
if (!value.hidden) {
|
||||
visible[currentPath] = value
|
||||
}
|
||||
}
|
||||
// 判断是否为数组字段
|
||||
else if (Array.isArray(value)) {
|
||||
// 数组字段：遍历每个元素
|
||||
if (value.length > 0) {
|
||||
const firstElement = value[0]
|
||||
// 如果数组元素是字段配置对象，直接提取
|
||||
if (firstElement && typeof firstElement === 'object' && 'display_name' in firstElement) {
|
||||
if (!firstElement.hidden) {
|
||||
visible[`${currentPath}[0]`] = firstElement
|
||||
}
|
||||
}
|
||||
// 如果数组元素是对象（但不是字段配置），递归处理
|
||||
else if (firstElement && typeof firstElement === 'object') {
|
||||
extractVisibleFields(firstElement, `${currentPath}[0]`)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 判断是否为对象字段（不包含 display_name 的对象）
|
||||
else if (value && typeof value === 'object' && !('display_name' in value)) {
|
||||
// 递归处理对象字段
|
||||
extractVisibleFields(value, currentPath)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extractVisibleFields(fieldConfig)
|
||||
|
||||
return visible
|
||||
})
|
||||
|
||||
// Formatted payload for display in edit mode
|
||||
const formattedPayload = computed(() => {
|
||||
if (!taskForm.payload_config) return '{}'
|
||||
|
||||
try {
|
||||
const payload = JSON.parse(taskForm.payload_config)
|
||||
return JSON.stringify(payload, null, 2)
|
||||
} catch (e) {
|
||||
return taskForm.payload_config
|
||||
}
|
||||
})
|
||||
|
||||
// Copy payload to clipboard
|
||||
const copyPayload = async () => {
|
||||
const success = await copyToClipboard(formattedPayload.value)
|
||||
if (success) {
|
||||
ElMessage.success('Payload 已复制到剪贴板')
|
||||
} else {
|
||||
ElMessage.error('复制失败')
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize field values with defaults when template is selected
|
||||
watch(selectedTemplate, async (newTemplate) => {
|
||||
if (!newTemplate) {
|
||||
templatePreview.value = null
|
||||
return
|
||||
}
|
||||
|
||||
// 获取模板的合并后配置（包含父模板的字段）
|
||||
try {
|
||||
templatePreview.value = await templateStore.previewTemplate(newTemplate.id)
|
||||
} catch (error) {
|
||||
ElMessage.error('获取模板配置失败')
|
||||
templatePreview.value = null
|
||||
return
|
||||
}
|
||||
|
||||
const fieldConfig = templatePreview.value.field_config
|
||||
const fieldValues = {}
|
||||
|
||||
// 递归函数：提取所有字段的默认值
|
||||
const extractDefaultValues = (config, parentPath = '') => {
|
||||
for (const [key, value] of Object.entries(config)) {
|
||||
const currentPath = parentPath ? `${parentPath}.${key}` : key
|
||||
|
||||
// 判断是否为字段配置对象（包含 display_name）
|
||||
if (value && typeof value === 'object' && 'display_name' in value) {
|
||||
fieldValues[currentPath] = value.default_value || ''
|
||||
}
|
||||
// 判断是否为数组字段
|
||||
else if (Array.isArray(value)) {
|
||||
// 数组字段：处理第一个元素的默认值
|
||||
if (value.length > 0) {
|
||||
const firstElement = value[0]
|
||||
// 如果数组元素是字段配置对象，直接提取默认值
|
||||
if (firstElement && typeof firstElement === 'object' && 'display_name' in firstElement) {
|
||||
fieldValues[`${currentPath}[0]`] = firstElement.default_value || ''
|
||||
}
|
||||
// 如果数组元素是对象（但不是字段配置），递归处理
|
||||
else if (firstElement && typeof firstElement === 'object') {
|
||||
extractDefaultValues(firstElement, `${currentPath}[0]`)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 判断是否为对象字段（不包含 display_name 的对象）
|
||||
else if (value && typeof value === 'object' && !('display_name' in value)) {
|
||||
// 递归处理对象字段
|
||||
extractDefaultValues(value, currentPath)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
extractDefaultValues(fieldConfig)
|
||||
|
||||
templateTaskForm.field_values = fieldValues
|
||||
})
|
||||
|
||||
// Load templates
|
||||
const loadTemplates = async () => {
|
||||
loadingTemplates.value = true
|
||||
try {
|
||||
activeTemplates.value = await templateStore.fetchActiveTemplates()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '加载模板失败')
|
||||
} finally {
|
||||
loadingTemplates.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Select template
|
||||
const selectTemplate = (template) => {
|
||||
selectedTemplate.value = template
|
||||
}
|
||||
|
||||
// Handle mode change
|
||||
const handleModeChange = (mode) => {
|
||||
selectedTemplate.value = null
|
||||
templateTaskForm.task_name = ''
|
||||
templateTaskForm.thread_id = ''
|
||||
templateTaskForm.field_values = {}
|
||||
}
|
||||
|
||||
// 加载任务列表
|
||||
const fetchTasks = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await taskStore.fetchMyTasks()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '加载任务列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 查看任务详情
|
||||
const viewTask = (task) => {
|
||||
router.push(`/tasks/${task.id}/records`)
|
||||
}
|
||||
|
||||
// 编辑任务
|
||||
const editTask = (task) => {
|
||||
editingTask.value = task
|
||||
Object.assign(taskForm, {
|
||||
name: task.name,
|
||||
thread_id: task.thread_id,
|
||||
is_active: task.is_active,
|
||||
payload_config: task.payload_config || '{}',
|
||||
cron_expression: task.cron_expression || '0 20 * * *', // 新增：加载 cron_expression
|
||||
})
|
||||
showCreateDialog.value = true
|
||||
}
|
||||
|
||||
// 删除任务
|
||||
const deleteTask = async (task) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除任务"${task.name || '未命名任务'}"吗？此操作不可恢复。`,
|
||||
'删除确认',
|
||||
{
|
||||
confirmButtonText: '确定删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
|
||||
await taskStore.deleteTask(task.id)
|
||||
ElMessage.success('任务删除成功')
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '删除任务失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 切换任务状态
|
||||
const toggleTaskStatus = async (task) => {
|
||||
try {
|
||||
await taskStore.toggleTask(task.id)
|
||||
ElMessage.success(task.is_active ? '任务已禁用' : '任务已启用')
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '切换任务状态失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 手动打卡 (异步轮询方式)
|
||||
const handleCheckIn = async (taskId) => {
|
||||
checkInLoading.value[taskId] = true
|
||||
|
||||
try {
|
||||
// 调用异步打卡接口，立即返回 record_id
|
||||
const result = await taskStore.checkInTask(taskId)
|
||||
|
||||
// 获取 record_id
|
||||
const recordId = result.record_id
|
||||
if (!recordId) {
|
||||
ElMessage.error('打卡请求失败:未获取到记录ID')
|
||||
checkInLoading.value[taskId] = false
|
||||
return
|
||||
}
|
||||
|
||||
// 如果初始状态就是失败,显示错误并刷新任务列表
|
||||
if (result.status === 'failure') {
|
||||
ElMessage.error(result.message || '打卡失败')
|
||||
checkInLoading.value[taskId] = false
|
||||
await fetchTasks()
|
||||
return
|
||||
}
|
||||
|
||||
// 显示提示消息
|
||||
ElMessage.info('打卡任务已启动，正在后台处理...')
|
||||
|
||||
// 用于存储 interval ID，以便在超时时清理
|
||||
let pollIntervalId = null
|
||||
|
||||
// 开始轮询检查打卡状态
|
||||
pollIntervalId = setInterval(async () => {
|
||||
try {
|
||||
const status = await taskStore.getCheckInRecordStatus(recordId)
|
||||
|
||||
// 只要状态不是 pending，说明打卡请求已经处理完成
|
||||
if (status.status !== 'pending') {
|
||||
clearInterval(pollIntervalId)
|
||||
checkInLoading.value[taskId] = false
|
||||
|
||||
if (status.status === 'success') {
|
||||
// 打卡成功
|
||||
ElMessage.success('打卡成功！')
|
||||
await fetchTasks()
|
||||
} else {
|
||||
// 打卡失败或其他状态 (failure, out_of_time, unknown 等)
|
||||
const errorMsg = status.error_message || status.response_text || '打卡失败'
|
||||
ElMessage.error(errorMsg)
|
||||
await fetchTasks()
|
||||
}
|
||||
}
|
||||
// status === 'pending' 时继续轮询
|
||||
} catch (error) {
|
||||
// 查询状态失败，停止轮询
|
||||
console.error('轮询状态失败:', error)
|
||||
clearInterval(pollIntervalId)
|
||||
checkInLoading.value[taskId] = false
|
||||
ElMessage.error('查询打卡状态失败')
|
||||
}
|
||||
}, 2000) // 每 2 秒查询一次
|
||||
|
||||
// 设置超时保护（30 秒后停止轮询）
|
||||
setTimeout(() => {
|
||||
if (checkInLoading.value[taskId]) {
|
||||
clearInterval(pollIntervalId)
|
||||
checkInLoading.value[taskId] = false
|
||||
ElMessage.warning('打卡处理时间较长，请稍后查看打卡记录')
|
||||
}
|
||||
}, 30000)
|
||||
|
||||
} catch (error) {
|
||||
console.error('启动打卡失败:', error)
|
||||
checkInLoading.value[taskId] = false
|
||||
ElMessage.error(error.message || '启动打卡任务失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
submitting.value = true
|
||||
|
||||
try {
|
||||
// Edit mode
|
||||
if (editingTask.value) {
|
||||
if (!taskFormRef.value) return
|
||||
await taskFormRef.value.validate()
|
||||
|
||||
await taskStore.updateTask(editingTask.value.id, taskForm)
|
||||
ElMessage.success('任务更新成功')
|
||||
}
|
||||
// Create from template
|
||||
else if (createMode.value === 'template') {
|
||||
if (!selectedTemplate.value) {
|
||||
ElMessage.warning('请选择一个模板')
|
||||
return
|
||||
}
|
||||
|
||||
if (!templateTaskForm.thread_id) {
|
||||
ElMessage.warning('请输入接龙 ID')
|
||||
return
|
||||
}
|
||||
|
||||
await templateStore.createTaskFromTemplate(
|
||||
selectedTemplate.value.id,
|
||||
templateTaskForm.thread_id,
|
||||
templateTaskForm.field_values,
|
||||
templateTaskForm.task_name || null
|
||||
)
|
||||
|
||||
ElMessage.success('任务创建成功')
|
||||
}
|
||||
// Create manually
|
||||
else {
|
||||
if (!taskFormRef.value) return
|
||||
await taskFormRef.value.validate()
|
||||
|
||||
await taskStore.createTask(taskForm)
|
||||
ElMessage.success('任务创建成功')
|
||||
}
|
||||
|
||||
showCreateDialog.value = false
|
||||
resetForm()
|
||||
await fetchTasks()
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
editingTask.value = null
|
||||
selectedTemplate.value = null
|
||||
createMode.value = 'template'
|
||||
|
||||
Object.assign(taskForm, {
|
||||
name: '',
|
||||
thread_id: '',
|
||||
is_active: true,
|
||||
payload_config: '',
|
||||
})
|
||||
|
||||
templateTaskForm.task_name = ''
|
||||
templateTaskForm.thread_id = ''
|
||||
templateTaskForm.field_values = {}
|
||||
|
||||
taskFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// Watch dialog open to load templates
|
||||
watch(showCreateDialog, (isOpen) => {
|
||||
if (isOpen && !editingTask.value) {
|
||||
loadTemplates()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
fetchTasks()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Additional component-specific styles if needed */
|
||||
</style>
|
||||
Reference in New Issue
Block a user