1.定时任务页面

cpp-ui/src/views/monitor/job/index.vue

@@ -4,29 +4,29 @@
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
         <el-form-item label="任务名称" prop="jobName">
           <el-input
-              v-model="queryParams.jobName"
-              placeholder="请输入任务名称"
-              clearable
-              @keyup.enter.native="handleQuery"
+            v-model="queryParams.jobName"
+            placeholder="请输入任务名称"
+            clearable
+            @keyup.enter.native="handleQuery"
           />
         </el-form-item>
         <el-form-item label="任务组名" prop="jobGroup">
           <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable popper-class="cpp-popper">
             <el-option
-                v-for="dict in dict.type.sys_job_group"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
+              v-for="dict in dict.type.sys_job_group"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
             />
           </el-select>
         </el-form-item>
         <el-form-item label="任务状态" prop="status">
           <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable popper-class="cpp-popper">
             <el-option
-                v-for="dict in dict.type.sys_job_status"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
+              v-for="dict in dict.type.sys_job_status"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
             />
           </el-select>
         </el-form-item>
@@ -39,65 +39,65 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAdd"
-            v-hasPermi="['monitor:job:add']"
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['monitor:job:add']"
         >新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-            type="success"
-            plain
-            icon="el-icon-edit"
-            size="mini"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['monitor:job:edit']"
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['monitor:job:edit']"
         >修改
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['monitor:job:remove']"
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['monitor:job:remove']"
         >删除
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['monitor:job:export']"
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['monitor:job:export']"
         >导出
         </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-            type="info"
-            plain
-            icon="el-icon-s-operation"
-            size="mini"
-            @click="handleJobLog"
-            v-hasPermi="['monitor:job:query']"
+          type="info"
+          plain
+          icon="el-icon-s-operation"
+          size="mini"
+          @click="handleJobLog"
+          v-hasPermi="['monitor:job:query']"
         >日志
         </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange" element-loading-background="rgba(8, 61, 92,1)">
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column label="任务编号" width="100" align="center" prop="jobId"/>
       <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true"/>
@@ -111,29 +111,29 @@
       <el-table-column label="状态" align="center">
         <template slot-scope="scope">
           <el-switch
-              v-model="scope.row.status"
-              active-value="0"
-              inactive-value="1"
-              @change="handleStatusChange(scope.row)"
+            v-model="scope.row.status"
+            active-value="0"
+            inactive-value="1"
+            @change="handleStatusChange(scope.row)"
           ></el-switch>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdate(scope.row)"
-              v-hasPermi="['monitor:job:edit']"
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['monitor:job:edit']"
           >修改
           </el-button>
           <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
-              v-hasPermi="['monitor:job:remove']"
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['monitor:job:remove']"
           >删除
           </el-button>
           <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
@@ -156,37 +156,38 @@
     </el-table>
 
     <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
     />
 
     <!-- 添加或修改定时任务对话框 -->
-    <div class="dark-el-dialog">
-      <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="任务名称" prop="jobName">
-                  <el-input v-model="form.jobName" placeholder="请输入任务名称" popper-class="cpp-popper"/>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="任务分组" prop="jobGroup">
-                  <el-select v-model="form.jobGroup" placeholder="请选择任务分组" popper-class="cpp-popper">
-                    <el-option
-                        v-for="dict in dict.type.sys_job_group"
-                        :key="dict.value"
-                        :label="dict.label"
-                        :value="dict.value"
-                    ></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item prop="invokeTarget">
+
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <div class="dark-el-dialog">
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="任务名称" prop="jobName">
+                <el-input v-model="form.jobName" placeholder="请输入任务名称" popper-class="cpp-popper"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="任务分组" prop="jobGroup">
+                <el-select v-model="form.jobGroup" placeholder="请选择任务分组" popper-class="cpp-popper">
+                  <el-option
+                    v-for="dict in dict.type.sys_job_group"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item prop="invokeTarget">
                 <span slot="label">
                   调用方法
                   <el-tooltip placement="top">
@@ -198,58 +199,59 @@
                     <i class="el-icon-question"></i>
                   </el-tooltip>
                 </span>
-                  <el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" popper-class="cpp-popper"/>
-                </el-form-item>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item label="cron表达式" prop="cronExpression">
-                  <el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式" popper-class="cpp-popper">
-                    <template slot="append">
-                      <el-button type="primary" @click="handleShowCron">
-                        生成表达式
-                        <i class="el-icon-time el-icon--right"></i>
-                      </el-button>
-                    </template>
-                  </el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="24" v-if="form.jobId !== undefined">
-                <el-form-item label="状态">
-                  <el-radio-group v-model="form.status" popper-class="cpp-popper">
-                    <el-radio
-                        v-for="dict in dict.type.sys_job_status"
-                        :key="dict.value"
-                        :label="dict.value"
-                    >{{ dict.label }}
-                    </el-radio>
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="执行策略" prop="misfirePolicy">
-                  <el-radio-group v-model="form.misfirePolicy" size="small" popper-class="cpp-popper">
-                    <el-radio-button label="1">立即执行</el-radio-button>
-                    <el-radio-button label="2">执行一次</el-radio-button>
-                    <el-radio-button label="3">放弃执行</el-radio-button>
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="是否并发" prop="concurrent">
-                  <el-radio-group v-model="form.concurrent" size="small" popper-class="cpp-popper">
-                    <el-radio-button label="0">允许</el-radio-button>
-                    <el-radio-button label="1">禁止</el-radio-button>
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-          <div slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="submitForm">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
-          </div>
-      </el-dialog>
-    </div>
+                <el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" popper-class="cpp-popper"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="cron表达式" prop="cronExpression">
+                <el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式" popper-class="cpp-popper">
+                  <template slot="append">
+                    <el-button type="primary" @click="handleShowCron" style="background-image: none">
+                      生成表达式
+                      <i class="el-icon-time el-icon--right"></i>
+                    </el-button>
+                  </template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="form.jobId !== undefined">
+              <el-form-item label="状态">
+                <el-radio-group v-model="form.status" popper-class="cpp-popper">
+                  <el-radio
+                    v-for="dict in dict.type.sys_job_status"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{ dict.label }}
+                  </el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="执行策略" prop="misfirePolicy">
+                <el-radio-group v-model="form.misfirePolicy" size="small" popper-class="cpp-popper">
+                  <el-radio-button label="1">立即执行</el-radio-button>
+                  <el-radio-button label="2">执行一次</el-radio-button>
+                  <el-radio-button label="3">放弃执行</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="是否并发" prop="concurrent">
+                <el-radio-group v-model="form.concurrent" size="small" popper-class="cpp-popper">
+                  <el-radio-button label="0">允许</el-radio-button>
+                  <el-radio-button label="1">禁止</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer flex" style="justify-content: end">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
 
     <el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
       <crontab @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>