优化任务操作按钮布局

This commit is contained in:
不做码农 2022-12-15 10:54:08 +08:00
parent 950995d5bb
commit 9a2fed61d2
2 changed files with 74 additions and 64 deletions

View File

@ -66,11 +66,7 @@
label="任务分组" label="任务分组"
width="80" width="80"
v-if="columns.showColumn('jobGroup')" /> v-if="columns.showColumn('jobGroup')" />
<el-table-column <el-table-column prop="assemblyName" label="程序集名称" v-if="columns.showColumn('assemblyName')" :show-overflow-tooltip="true" />
prop="assemblyName"
label="程序集名称"
v-if="columns.showColumn('assemblyName')"
:show-overflow-tooltip="true" />
<el-table-column prop="className" label="任务类名" v-if="columns.showColumn('className')" /> <el-table-column prop="className" label="任务类名" v-if="columns.showColumn('className')" />
<el-table-column prop="runTimes" align="center" label="运行次数" width="80" /> <el-table-column prop="runTimes" align="center" label="运行次数" width="80" />
<el-table-column prop="intervalSecond" align="center" label="执行间隔(s)" v-if="columns.showColumn('intervalSecond')" width="90" /> <el-table-column prop="intervalSecond" align="center" label="执行间隔(s)" v-if="columns.showColumn('intervalSecond')" width="90" />
@ -84,67 +80,61 @@
:show-overflow-tooltip="true" :show-overflow-tooltip="true"
v-if="columns.showColumn('lastRunTime')" /> v-if="columns.showColumn('lastRunTime')" />
<el-table-column prop="apiUrl" label="网络请求地址" v-if="columns.showColumn('apiUrl')" /> <el-table-column prop="apiUrl" label="网络请求地址" v-if="columns.showColumn('apiUrl')" />
<el-table-column label="操作" width="250" class-name="small-padding fixed-width"> <el-table-column label="操作" width="190" align="center">
<template #default="scope"> <template #default="scope">
<el-link size="small" class="ml10" icon="view" v-hasPermi="['monitor:job:query']" @click="handleDetails(scope.row)"> <el-button text icon="view" v-hasPermi="['monitor:job:query']" @click="handleDetails(scope.row)">
{{ $t('btn.details') }} {{ $t('btn.details') }}
</el-link> </el-button>
<el-link size="small" class="ml10" icon="view" v-hasPermi="['monitor:job:query']" @click="handleJobLog(scope.row)"> <el-button text icon="view" v-hasPermi="['monitor:job:query']" @click="handleJobLog(scope.row)">
{{ $t('btn.log') }} {{ $t('btn.log') }}
</el-link> </el-button>
<el-link
size="small" <el-dropdown @command="handleCommand($event, scope.row)">
class="ml10" <el-button text class="ml5">
v-if="scope.row.isStart" {{ $t('btn.more') }}
v-hasPermi="['monitor:job:run']" <el-icon class="el-icon--right">
icon="remove" <arrow-down />
title="运行一次" </el-icon>
@click="handleRun(scope.row)"> </el-button>
{{ $t('btn.run') }}一次
</el-link> <template #dropdown>
<el-link <el-dropdown-menu>
size="small" <div v-hasPermi="['monitor:job:run']" v-if="scope.row.isStart">
class="ml10" <el-dropdown-item command="run">
v-if="scope.row.isStart" <el-button icon="remove" title="运行一次"> {{ $t('btn.run') }}一次 </el-button>
v-hasPermi="['monitor:job:stop']" </el-dropdown-item>
icon="video-pause" </div>
style="color: red" <div v-if="scope.row.isStart" v-hasPermi="['monitor:job:stop']">
title="停止" <el-dropdown-item command="stop">
@click="handleStop(scope.row)"> <el-button type="danger" icon="video-pause" title="停止">
{{ $t('btn.stop') }} {{ $t('btn.stop') }}
</el-link> </el-button>
</el-dropdown-item>
<el-link </div>
size="small" <div v-if="!scope.row.isStart" v-hasPermi="['monitor:job:start']">
class="ml10" <el-dropdown-item command="start">
v-if="!scope.row.isStart" <el-button icon="video-play" title="启动">
v-hasPermi="['monitor:job:start']"
icon="video-play"
title="启动"
@click="handleStart(scope.row)">
{{ $t('btn.start') }} {{ $t('btn.start') }}
</el-link> </el-button>
<el-link </el-dropdown-item>
class="ml10" </div>
size="small" <div v-if="!scope.row.isStart" v-hasPermi="['monitor:job:edit']">
v-if="!scope.row.isStart" <el-dropdown-item command="update">
v-hasPermi="['monitor:job:edit']" <el-button icon="edit" title="编辑">
icon="edit"
title="编辑"
@click="handleUpdate(scope.row)">
{{ $t('btn.edit') }} {{ $t('btn.edit') }}
</el-link> </el-button>
</el-dropdown-item>
<el-link </div>
class="ml10" <div v-if="!scope.row.isStart" v-hasPermi="['monitor:job:delete']">
size="small" <el-dropdown-item command="delete">
v-if="!scope.row.isStart" <el-button icon="delete" title="删除">
v-hasPermi="['monitor:job:delete']"
icon="delete"
title="删除"
@click="handleDelete(scope.row)">
{{ $t('btn.delete') }} {{ $t('btn.delete') }}
</el-link> </el-button>
</el-dropdown-item>
</div>
</el-dropdown-menu>
</template>
</el-dropdown>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -646,4 +636,25 @@ function handleDetails(row) {
btnVisible.value = false btnVisible.value = false
}) })
} }
function handleCommand(command, row) {
console.log(command, row)
switch (command) {
case 'update':
handleUpdate(row)
break
case 'start':
handleStart(row)
break
case 'stop':
handleStop(row)
break
case 'delete':
handleDelete(row)
break
case 'run':
handleRun(row)
break
}
}
</script> </script>

View File

@ -17,9 +17,8 @@
<el-form-item label="执行时间"> <el-form-item label="执行时间">
<el-date-picker <el-date-picker
v-model="dateRange" v-model="dateRange"
style="width: 240px" value-format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD" type="datetimerange"
type="daterange"
range-separator="-" range-separator="-"
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"