✨定时任务新增卡片模式显示

src/views/monitor/job/index.vue

@@ -7,13 +7,13 @@
         </el-select>
       </el-form-item>
       <el-form-item prop="queryText">
-        <el-input
+        <el-input v-model="queryParams.queryText" placeholder="请输入计划任务名称" clearable @keyup.enter="handleQuery" @clear="handleQuery" />
-          v-model="queryParams.queryText"
+      </el-form-item>
-          placeholder="请输入计划任务名称"
+      <el-form-item>
-          clearable
+        <el-radio-group v-model="viewSwitch">
-          prefix-icon="el-icon-search"
+          <el-radio-button label="1">表格</el-radio-button>
-          @keyup.enter="handleQuery"
+          <el-radio-button label="2">卡片</el-radio-button>
-          @clear="handleQuery" />
+        </el-radio-group>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="search" @click="handleQuery">{{ $t('btn.search') }}</el-button>
@@ -39,8 +39,7 @@
       </el-col>
       <right-toolbar :showSearch="searchToggle" :columns="columns" @queryTable="handleQuery"></right-toolbar>
     </el-row>
-    <el-row>
+    <el-table v-if="viewSwitch == 1" ref="tasks" v-loading="loading" :data="dataTasks" border row-key="id" @sort-change="handleSortable">
-      <el-table ref="tasks" v-loading="loading" :data="dataTasks" border="" row-key="id" @sort-change="handleSortable">
       <!-- <el-table-column type="index" :index="handleIndexCalc" label="#" align="center" /> -->
       <el-table-column prop="id" label="id" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('id')" />
       <el-table-column prop="name" label="任务名称" width="100" />
@@ -138,8 +137,51 @@
         </template>
       </el-table-column>
     </el-table>
-      <pagination v-model:total="total" v-model:page="queryParams.PageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+    <el-row :gutter="20" v-if="viewSwitch == 2">
+      <el-col v-for="item in dataTasks" :lg="8" :span="24">
+        <el-card :body-style="{ padding: '15px 15px 0' }">
+          <el-descriptions :column="1" :title="item.name" size="small" border>
+            <el-descriptions-item label="任务类型">
+              <dict-tag :options="options.taskTypeOptions" :value="item.taskType" />
+            </el-descriptions-item>
+            <el-descriptions-item label="触发器类型" width="90px">
+              <dict-tag :options="options.triggerTypeOptions" :value="item.triggerType" />
+            </el-descriptions-item>
+            <el-descriptions-item label="任务状态" width="90px">
+              <dict-tag :options="options.isStartOptions" :value="item.isStart"></dict-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="任务分组" width="90px">
+              {{ item.jobGroup }}
+            </el-descriptions-item>
+            <el-descriptions-item label="程序集" width="90px">
+              {{ item.assemblyName }}
+            </el-descriptions-item>
+            <el-descriptions-item label="最后运行时间" width="90px">
+              {{ item.lastRunTime }}
+            </el-descriptions-item>
+            <el-descriptions-item label="运行表达式" width="90px">
+              {{ item.cron }}
+            </el-descriptions-item>
+            <el-descriptions-item label="运行次数" width="90px">
+              {{ item.runTimes }}
+            </el-descriptions-item>
+            <el-descriptions-item label="apiUrl" width="90px">
+              {{ item.apiUrl }}
+            </el-descriptions-item>
+          </el-descriptions>
+          <div>
+            <el-button text icon="view" v-hasPermi="['monitor:job:query']" @click="handleDetails(item)">
+              {{ $t('btn.details') }}
+            </el-button>
+            <el-button text icon="view" v-hasPermi="['monitor:job:query']" @click="handleJobLog(item)">
+              {{ $t('btn.log') }}
+            </el-button>
+          </div>
+        </el-card>
+      </el-col>
     </el-row>
+    <pagination v-model:total="total" v-model:page="queryParams.PageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
     <el-dialog :title="title" v-model="open" width="600px" draggable append-to-body>
       <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
@@ -372,7 +414,7 @@ const jobLogList = ref([])
 const logTitle = ref('')
 const formRef = ref(null)
 const queryRef = ref(null)
-
+const viewSwitch = ref(1)
 const state = reactive({
   form: {},
   // 表单校验