automas_admin/AUTO-MAS-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "feat(QueueItemManager, TimeSetManager): 增加定时列表和任务列表的拖拽功能"

Browse Source 
This reverts commit e569930287.
This commit is contained in:
DLmaster361
2025-09-19 10:34:36 +08:00
parent bd6d7e8189
commit d21d2f9a1d
2 changed files with 99 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
frontend/src/components/queue/QueueItemManager.vue
View File

@@ -11,84 +11,49 @@
</a-space>
</template>
<!-- 使用vuedraggable替换a-table实现拖拽功能 -->
<div class="draggable-table-container">
<!-- 表头 -->
<div class="draggable-table-header">
<div class="header-cell index-cell">序号</div>
<div class="header-cell script-cell">脚本任务</div>
<div class="header-cell actions-cell">操作</div>
</div>
<!-- 拖拽内容区域 -->
<draggable
v-model="queueItems"
group="queueItems"
item-key="id"
:animation="200"
:disabled="loading"
ghost-class="ghost"
chosen-class="chosen"
drag-class="drag"
@end="onDragEnd"
class="draggable-container"
>
<template #item="{ element: record, index }">
<div class="draggable-row" :class="{ 'row-dragging': loading }">
<div class="row-cell index-cell">{{ index + 1 }}</div>
<div class="row-cell script-cell">
<a-select
v-model:value="record.script"
@change="updateQueueItemScript(record)"
size="small"
style="width: 200px"
class="script-select"
placeholder="请选择脚本"
:options="scriptOptions"
allow-clear
/>
</div>
<div class="row-cell actions-cell">
<a-space>
<a-popconfirm
title="确定要删除这个任务吗？"
@confirm="deleteQueueItem(record.id)"
ok-text="确定"
cancel-text="取消"
>
<a-button size="middle" danger>
<DeleteOutlined />
删除
</a-button>
</a-popconfirm>
</a-space>
</div>
</div>
<a-table
:columns="queueColumns"
:data-source="queueItems"
:pagination="false"
size="middle"
:scroll="{ x: false, y: false }"
table-layout="auto"
class="queue-table"
>
<template #emptyText>
<span>暂无任务</span>
</template>
<template #bodyCell="{ column, record, index }">
<template v-if="column.key === 'index'"> {{ index + 1 }} </template>
<template v-else-if="column.key === 'script'">
<a-select
v-model:value="record.script"
@change="updateQueueItemScript(record)"
size="small"
style="width: 200px"
class="script-select"
placeholder="请选择脚本"
:options="scriptOptions"
allow-clear
/>
</template>
<template v-else-if="column.key === 'actions'">
<a-space>
<a-popconfirm
title="确定要删除这个任务吗？"
@confirm="deleteQueueItem(record.id)"
ok-text="确定"
cancel-text="取消"
>
<a-button size="middle" danger>
<DeleteOutlined />
删除
</a-button>
</a-popconfirm>
</a-space>
</template>
</template>
</a-table>
<!-- 队列项编辑弹窗 -->
<a-modal
v-model:open="modalVisible"
:title="editingQueueItem ? '编辑任务' : '添加任务'"
@ok="saveQueueItem"
@cancel="cancelEdit"
:confirm-loading="saving"
width="600px"
>
<a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
<a-form-item label="关联脚本" name="script">
<a-select
v-model:value="form.script"
placeholder="请选择关联脚本"
allow-clear
:options="scriptOptions"
class="script-select"
/>
</a-form-item>
</a-form>
</a-modal>
</a-card>
</template>
@@ -96,7 +61,6 @@
import { onMounted, ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
import draggable from 'vuedraggable'
import { Service } from '@/api'
// Props
@@ -187,7 +151,7 @@ const updateQueueItemScript = async (record: any) => {
const oldScript = record.script
try {
loading.value = true
const response = await Service.updateItemApiQueueItemUpdatePost({
queueId: props.queueId,
queueItemId: record.id,
@@ -220,7 +184,7 @@ const updateQueueItemScript = async (record: any) => {
const addQueueItem = async () => {
try {
loading.value = true
// 直接创建队列项，默认ScriptId为null（未选择）
const createResponse = await Service.addItemApiQueueItemAddPost({
queueId: props.queueId,
@@ -262,44 +226,6 @@ const deleteQueueItem = async (itemId: string) => {
}
}
// 拖拽结束处理函数
const onDragEnd = async (evt: any) => {
// 如果位置没有变化，直接返回
if (evt.oldIndex === evt.newIndex) {
return
}
try {
loading.value = true
// 构造排序后的ID列表
const sortedIds = queueItems.value.map(item => item.id)
// 调用排序API
const response = await Service.reorderItemApiQueueItemOrderPost({
queueId: props.queueId,
indexList: sortedIds,
})
if (response.code === 200) {
message.success('任务顺序已更新')
// 刷新数据以确保与服务器同步
emit('refresh')
} else {
message.error('更新任务顺序失败: ' + (response.message || '未知错误'))
// 如果失败，刷新数据恢复原状态
emit('refresh')
}
} catch (error: any) {
console.error('拖拽排序失败:', error)
message.error('更新任务顺序失败: ' + (error?.message || '网络错误'))
// 如果失败，刷新数据恢复原状态
emit('refresh')
} finally {
loading.value = false
}
}
// 初始化
onMounted(() => {
loadOptions()
@@ -563,124 +489,6 @@ onMounted(() => {
padding: 40px 0;
}
/* 拖拽表格样式 */
.draggable-table-container {
width: 100%;
border: 1px solid var(--ant-color-border);
border-radius: 6px;
overflow: hidden;
}
.draggable-table-header {
display: flex;
background-color: var(--ant-color-fill-quaternary);
border-bottom: 1px solid var(--ant-color-border);
}
.header-cell {
padding: 12px 16px;
font-weight: 600;
color: var(--ant-color-text);
text-align: center;
border-right: 1px solid var(--ant-color-border);
}
.header-cell:last-child {
border-right: none;
}
.index-cell {
width: 80px;
min-width: 80px;
max-width: 80px;
}
.script-cell {
flex: 1;
min-width: 200px;
}
.actions-cell {
width: 180px;
min-width: 180px;
max-width: 180px;
}
.draggable-container {
min-height: 60px;
}
.draggable-row {
display: flex;
align-items: center;
background: var(--ant-color-bg-container);
border-bottom: 1px solid var(--ant-color-border);
transition: all 0.2s ease;
cursor: move;
}
.draggable-row:last-child {
border-bottom: none;
}
.draggable-row:hover {
background-color: var(--ant-color-fill-quaternary);
}
.draggable-row.row-dragging {
cursor: not-allowed;
}
.row-cell {
padding: 12px 16px;
text-align: center;
border-right: 1px solid var(--ant-color-border);
display: flex;
align-items: center;
justify-content: center;
}
.row-cell:last-child {
border-right: none;
}
.row-cell.index-cell {
width: 80px;
min-width: 80px;
max-width: 80px;
font-weight: 500;
color: var(--ant-color-text-secondary);
}
.row-cell.script-cell {
flex: 1;
min-width: 200px;
}
.row-cell.actions-cell {
width: 180px;
min-width: 180px;
max-width: 180px;
}
/* 拖拽状态样式 */
.ghost {
opacity: 0.5;
background: var(--ant-color-primary-bg);
border: 2px dashed var(--ant-color-primary);
}
.chosen {
background: var(--ant-color-primary-bg-hover);
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.drag {
transform: rotate(5deg);
opacity: 0.8;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.queue-items-grid {
@@ -696,30 +504,6 @@ onMounted(() => {
.queue-item-card-item {
padding: 12px;
}
.draggable-row {
flex-direction: column;
align-items: stretch;
}
.row-cell,
.header-cell {
border-right: none;
border-bottom: 1px solid var(--ant-color-border);
}
.row-cell:last-child,
.header-cell:last-child {
border-bottom: none;
}
.index-cell,
.script-cell,
.actions-cell {
width: 100% !important;
min-width: auto !important;
max-width: none !important;
}
}
/* 标签样式 */
@@ -820,4 +604,4 @@ onMounted(() => {
.script-select :deep(.ant-select-item-option-content) {
font-size: 13px !important;
}
</style>
</style>

337
frontend/src/components/queue/TimeSetManager.vue
View File

@@ -16,78 +16,60 @@
</a-space>
</template>
<!-- 使用vuedraggable替换a-table实现拖拽功能 -->
<div class="draggable-table-container">
<!-- 表头 -->
<div class="draggable-table-header">
<div class="header-cell index-cell">序号</div>
<div class="header-cell status-cell">状态</div>
<div class="header-cell time-cell">执行时间</div>
<div class="header-cell actions-cell">操作</div>
</div>
<!-- 拖拽内容区域 -->
<draggable
v-model="timeSets"
group="timeSets"
item-key="id"
:animation="200"
:disabled="loading"
ghost-class="ghost"
chosen-class="chosen"
drag-class="drag"
@end="onDragEnd"
class="draggable-container"
>
<template #item="{ element: record, index }">
<div class="draggable-row" :class="{ 'row-dragging': loading }">
<div class="row-cell index-cell">{{ index + 1 }}</div>
<div class="row-cell status-cell">
<a-select
v-model:value="record.enabled"
@change="updateTimeSetStatus(record)"
size="small"
style="width: 80px"
class="status-select"
>
<a-select-option :value="true">启用</a-select-option>
<a-select-option :value="false">禁用</a-select-option>
</a-select>
</div>
<div class="row-cell time-cell">
<a-time-picker
v-model:value="record.timeValue"
format="HH:mm"
placeholder="请选择时间"
size="small"
@change="updateTimeSetTime(record)"
:disabled="loading"
/>
</div>
<div class="row-cell actions-cell">
<a-space>
<a-popconfirm
title="确定要删除这个定时吗？"
@confirm="deleteTimeSet(record.id)"
ok-text="确定"
cancel-text="取消"
>
<a-button size="middle" danger>
<DeleteOutlined />
删除
</a-button>
</a-popconfirm>
</a-space>
</div>
</div>
</template>
</draggable>
<!-- 空状态 -->
<div v-if="timeSets.length === 0" class="empty-state">
<a-table
:columns="timeColumns"
:data-source="timeSets"
:pagination="false"
size="middle"
:scroll="{ x: false, y: false }"
table-layout="auto"
class="time-set-table"
>
<template #emptyText>
<span>暂无定时</span>
</div>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'enabled'">
<a-select
v-model:value="record.enabled"
@change="updateTimeSetStatus(record)"
size="small"
style="width: 80px"
class="status-select"
>
<a-select-option :value="true">启用</a-select-option>
<a-select-option :value="false">禁用</a-select-option>
</a-select>
</template>
<template v-else-if="column.key === 'time'">
<a-time-picker
v-model:value="record.timeValue"
format="HH:mm"
placeholder="请选择时间"
size="small"
@change="updateTimeSetTime(record)"
:disabled="loading"
/>
</template>
<template v-else-if="column.key === 'actions'">
<a-space>
<a-popconfirm
title="确定要删除这个定时吗？"
@confirm="deleteTimeSet(record.id)"
ok-text="确定"
cancel-text="取消"
>
<a-button size="middle" danger>
<DeleteOutlined />
删除
</a-button>
</a-popconfirm>
</a-space>
</template>
</template>
</a-table>
</a-card>
</template>
@@ -95,7 +77,6 @@
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
import draggable from 'vuedraggable'
import { Service } from '@/api'
import dayjs from 'dayjs'
@@ -178,7 +159,7 @@ const timeSets = ref([...props.timeSets])
const processTimeSets = (rawTimeSets: any[]) => {
return rawTimeSets.map(item => ({
...item,
timeValue: parseTimeString(item.time),
timeValue: parseTimeString(item.time)
}))
}
@@ -240,7 +221,7 @@ const addTimeSet = async () => {
const updateTimeSetTime = async (timeSet: any) => {
try {
const timeString = formatTimeValue(timeSet.timeValue)
const response = await Service.updateTimeSetApiQueueTimeUpdatePost({
queueId: props.queueId,
timeSetId: timeSet.id,
@@ -316,44 +297,6 @@ const deleteTimeSet = async (timeSetId: string) => {
message.error('删除定时项失败: ' + (error?.message || '网络错误'))
}
}
// 拖拽结束处理函数
const onDragEnd = async (evt: any) => {
// 如果位置没有变化，直接返回
if (evt.oldIndex === evt.newIndex) {
return
}
try {
loading.value = true
// 构造排序后的ID列表
const sortedIds = timeSets.value.map(item => item.id)
// 调用排序API
const response = await Service.reorderTimeSetApiQueueTimeOrderPost({
queueId: props.queueId,
indexList: sortedIds,
})
if (response.code === 200) {
message.success('定时顺序已更新')
// 刷新数据以确保与服务器同步
emit('refresh')
} else {
message.error('更新定时顺序失败: ' + (response.message || '未知错误'))
// 如果失败，刷新数据恢复原状态
emit('refresh')
}
} catch (error: any) {
console.error('拖拽排序失败:', error)
message.error('更新定时顺序失败: ' + (error?.message || '网络错误'))
// 如果失败，刷新数据恢复原状态
emit('refresh')
} finally {
loading.value = false
}
}
</script>
<style scoped>
@@ -828,172 +771,6 @@ const onDragEnd = async (evt: any) => {
:deep(.ant-picker-time-panel-cell:hover) {
background: var(--ant-color-fill-tertiary);
}
/* 拖拽表格样式 */
.draggable-table-container {
width: 100%;
border: 1px solid var(--ant-color-border);
border-radius: 6px;
overflow: hidden;
}
.draggable-table-header {
display: flex;
background-color: var(--ant-color-fill-quaternary);
border-bottom: 1px solid var(--ant-color-border);
}
.header-cell {
padding: 12px 16px;
font-weight: 600;
color: var(--ant-color-text);
text-align: center;
border-right: 1px solid var(--ant-color-border);
}
.header-cell:last-child {
border-right: none;
}
.index-cell {
width: 80px;
min-width: 80px;
max-width: 80px;
}
.status-cell {
width: 120px;
min-width: 120px;
max-width: 120px;
}
.time-cell {
flex: 1;
min-width: 100px;
}
.actions-cell {
width: 180px;
min-width: 180px;
max-width: 180px;
}
.draggable-container {
min-height: 60px;
}
.draggable-row {
display: flex;
align-items: center;
background: var(--ant-color-bg-container);
border-bottom: 1px solid var(--ant-color-border);
transition: all 0.2s ease;
cursor: move;
}
.draggable-row:last-child {
border-bottom: none;
}
.draggable-row:hover {
background-color: var(--ant-color-fill-quaternary);
}
.draggable-row.row-dragging {
cursor: not-allowed;
}
.row-cell {
padding: 12px 16px;
text-align: center;
border-right: 1px solid var(--ant-color-border);
display: flex;
align-items: center;
justify-content: center;
}
.row-cell:last-child {
border-right: none;
}
.row-cell.index-cell {
width: 80px;
min-width: 80px;
max-width: 80px;
font-weight: 500;
color: var(--ant-color-text-secondary);
}
.row-cell.status-cell {
width: 120px;
min-width: 120px;
max-width: 120px;
}
.row-cell.time-cell {
flex: 1;
min-width: 100px;
}
.row-cell.actions-cell {
width: 180px;
min-width: 180px;
max-width: 180px;
}
/* 拖拽状态样式 */
.ghost {
opacity: 0.5;
background: var(--ant-color-primary-bg);
border: 2px dashed var(--ant-color-primary);
}
.chosen {
background: var(--ant-color-primary-bg-hover);
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.drag {
transform: rotate(5deg);
opacity: 0.8;
}
/* 空状态样式 */
.empty-state {
padding: 40px;
text-align: center;
color: var(--ant-color-text-tertiary);
background: var(--ant-color-bg-container);
}
/* 响应式设计 */
@media (max-width: 768px) {
.draggable-row {
flex-direction: column;
align-items: stretch;
}
.row-cell,
.header-cell {
border-right: none;
border-bottom: 1px solid var(--ant-color-border);
}
.row-cell:last-child,
.header-cell:last-child {
border-bottom: none;
}
.index-cell,
.status-cell,
.time-cell,
.actions-cell {
width: 100% !important;
min-width: auto !important;
max-width: none !important;
}
}
</style>
<!-- 全局样式 - 用于时间选择器弹出面板 -->
@@ -1054,9 +831,7 @@ const onDragEnd = async (evt: any) => {
transition: background 0.2s ease;
}
[data-theme='dark']
.ant-picker-dropdown
.ant-picker-time-panel-column::-webkit-scrollbar-thumb:hover {
[data-theme='dark'] .ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.45);
}