样式修改

ruoyi-ui/src/views/flowable/definition/index.vue

@@ -1,58 +1,54 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入名称"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="开始时间" prop="deployTime">
-        <el-date-picker clearable size="small"
-                        v-model="queryParams.deployTime"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="选择时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="名称" prop="name">
+            <el-input v-model="queryParams.name" placeholder="请输入名称" clearable size="small"
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="开始时间" prop="deployTime">
+            <el-date-picker clearable size="small" v-model="queryParams.deployTime" type="date"
+              value-format="yyyy-MM-dd" placeholder="选择时间" style="width: 100%;">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6"></el-col>
+        <el-col :span="6"></el-col>
+      </el-row>
+
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <!--      <el-col :span="1.5">-->
       <!--        <el-button-->
       <!--          type="primary"-->
-      <!--          plain-->
       <!--          icon="el-icon-upload"-->
-      <!--          size="mini"-->
+      <!--          size="small"-->
       <!--          @click="handleImport"-->
       <!--        >导入</el-button>-->
       <!--      </el-col>-->
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleLoadXml"
-        >新增</el-button>
+        <el-button type="success" icon="el-icon-plus" size="small" @click="handleLoadXml">新增</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="['system:deployment:remove']"
-        >删除</el-button>
+        <el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['system:deployment:remove']">删除</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -62,59 +58,65 @@
         <div>1、XML文件中的流程定义id属性用作流程定义的key参数。</div>
         <div>2、XML文件中的流程定义name属性用作流程定义的name参数。如果未给定name属性，会使用id作为name。</div>
         <div>3、当每个唯一key的流程第一次部署时，指定版本为1。对其后所有使用相同key的流程定义，部署时版本会在该key当前已部署的最高版本号基础上加1。key参数用于区分流程定义。</div>
-        <div>4、id参数设置为{processDefinitionKey}:{processDefinitionVersion}:{generated-id}，其中generated-id是一个唯一数字，用以保证在集群环境下，流程定义缓存中，流程id的唯一性。</div>
+        <div>
+          4、id参数设置为{processDefinitionKey}:{processDefinitionVersion}:{generated-id}，其中generated-id是一个唯一数字，用以保证在集群环境下，流程定义缓存中，流程id的唯一性。
+        </div>
       </template>
     </el-alert>
-    <el-table v-loading="loading" fit :data="definitionList" border   @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="流程编号" align="center" prop="deploymentId" :show-overflow-tooltip="true"/>
-      <el-table-column label="流程标识" align="center" prop="flowKey" :show-overflow-tooltip="true" />
-      <el-table-column label="流程分类" align="center" prop="category" />
-      <el-table-column label="流程名称" align="center" width="120" :show-overflow-tooltip="true">
-        <template slot-scope="scope">
-          <el-button type="text" @click="handleReadImage(scope.row.deploymentId)">
-            <span>{{ scope.row.name }}</span>
-          </el-button>
-        </template>
-      </el-table-column>
-      <el-table-column label="业务表单" align="center" :show-overflow-tooltip="true">
-        <template slot-scope="scope">
-          <el-button v-if="scope.row.formId" type="text" @click="handleForm(scope.row.formId)">
-            <span>{{ scope.row.formName }}</span>
-          </el-button>
-          <label v-else>暂无表单</label>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程版本" align="center">
-        <template slot-scope="scope">
-          <el-tag size="medium" >v{{ scope.row.version }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" align="center">
-        <template slot-scope="scope">
-          <el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
-          <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180"/>
-      <el-table-column label="操作" width="250" fixed="right"class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button @click="handleLoadXml(scope.row)" icon="el-icon-edit-outline" type="text" size="small">设计</el-button>
-          <el-button @click="handleAddForm(scope.row)" icon="el-icon-edit-el-icon-s-promotion" type="text" size="small" v-if="scope.row.formId == null">配置主表单</el-button>
-          <el-button @click="handleUpdateSuspensionState(scope.row)" icon="el-icon-video-pause" type="text" size="small" v-if="scope.row.suspensionState === 1">挂起</el-button>
-          <el-button @click="handleUpdateSuspensionState(scope.row)" icon="el-icon-video-play" type="text" size="small" v-if="scope.row.suspensionState === 2">激活</el-button>
-          <el-button @click="handleDelete(scope.row)" icon="el-icon-delete" type="text" size="small" v-hasPermi="['system:deployment:remove']">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="border-card">
+      <el-table height="450" v-loading="loading" fit :data="definitionList" border
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="流程编号" align="center" prop="deploymentId" :show-overflow-tooltip="true" />
+        <el-table-column label="流程标识" align="center" prop="flowKey" :show-overflow-tooltip="true" />
+        <el-table-column label="流程分类" align="center" prop="category" />
+        <el-table-column label="流程名称" align="center" width="120" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleReadImage(scope.row.deploymentId)">
+              <span>{{ scope.row.name }}</span>
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="业务表单" align="center" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.formId" type="text" @click="handleForm(scope.row.formId)">
+              <span>{{ scope.row.formName }}</span>
+            </el-button>
+            <label v-else>暂无表单</label>
+          </template>
+        </el-table-column>
+        <el-table-column label="流程版本" align="center">
+          <template slot-scope="scope">
+            <el-tag size="medium">v{{ scope.row.version }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center">
+          <template slot-scope="scope">
+            <el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
+            <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180" />
+        <el-table-column label="操作" width="250" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button @click="handleLoadXml(scope.row)" icon="el-icon-edit-outline" type="text"
+              size="small">设计</el-button>
+            <el-button @click="handleAddForm(scope.row)" icon="el-icon-edit-el-icon-s-promotion" type="text"
+              size="small" v-if="scope.row.formId == null">配置主表单</el-button>
+            <el-button @click="handleUpdateSuspensionState(scope.row)" icon="el-icon-video-pause" type="text"
+              size="small" v-if="scope.row.suspensionState === 1">挂起</el-button>
+            <el-button @click="handleUpdateSuspensionState(scope.row)" icon="el-icon-video-play" type="text"
+              size="small" v-if="scope.row.suspensionState === 2">激活</el-button>
+            <el-button class="custom-red-color" @click="handleDelete(scope.row)" icon="el-icon-delete" type="text"
+              size="small" v-hasPermi="['system:deployment:remove']">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+    </div>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改流程定义对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -131,35 +133,22 @@
 
     <!-- bpmn20.xml导入对话框 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload
-        ref="upload"
-        :limit="1"
-        accept=".xml"
-        :headers="upload.headers"
-        :action="upload.url + '?name=' + upload.name+'&category='+ upload.category"
-        :disabled="upload.isUploading"
-        :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess"
-        :auto-upload="false"
-        drag
-      >
+      <el-upload ref="upload" :limit="1" accept=".xml" :headers="upload.headers"
+        :action="upload.url + '?name=' + upload.name + '&category=' + upload.category" :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">
           将文件拖到此处，或
           <em>点击上传</em>
         </div>
         <div class="el-upload__tip" slot="tip">
-          流程名称：<el-input v-model="upload.name"/>
+          流程名称：<el-input v-model="upload.name" />
           流程分类：
           <div>
             <!--          <el-input v-model="upload.category"/>-->
             <el-select v-model="upload.category" placeholder="请选择流程分类">
-              <el-option
-                v-for="dict in dict.type.sys_process_category"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              ></el-option>
+              <el-option v-for="dict in dict.type.sys_process_category" :key="dict.value" :label="dict.label"
+                :value="dict.value"></el-option>
             </el-select>
           </div>
         </div>
@@ -174,18 +163,18 @@
     <!-- 流程图 -->
     <el-dialog :title="readImage.title" :visible.sync="readImage.open" width="70%" append-to-body>
       <!-- <el-image :src="readImage.src"></el-image> -->
-      <flow :flowData="flowData"/>
+      <flow :flowData="flowData" />
     </el-dialog>
 
     <!--表单配置详情-->
-<!--    <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="50%" append-to-body>
+    <!--    <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="50%" append-to-body>
       <div class="test-form">
         <parser :key="new Date().getTime()"  :form-conf="formConf" />
       </div>
     </el-dialog>-->
     <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="50%" append-to-body>
       <div class="test-form">
-        <v-form-render :form-data="formData" ref="vFormRef"/>
+        <v-form-render :form-data="formData" ref="vFormRef" />
       </div>
     </el-dialog>
 
@@ -193,40 +182,28 @@
     <el-dialog :title="formDeployTitle" :visible.sync="formDeployOpen" width="60%" append-to-body>
       <el-row :gutter="24">
         <el-col :span="10" :xs="24">
-          <el-table
-            ref="singleTable"
-            :data="formList"
-            border
-            highlight-current-row
-            @current-change="handleCurrentChange"
-            style="width: 100%">
+          <el-table ref="singleTable" :data="formList" border highlight-current-row
+            @current-change="handleCurrentChange" style="width: 100%">
             <el-table-column label="表单编号" align="center" prop="formId" />
             <el-table-column label="表单名称" align="center" prop="formName" />
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
               <template slot-scope="scope">
-                <el-button size="mini" type="text" @click="submitFormDeploy(scope.row)">确定</el-button>
+                <el-button size="small" type="text" @click="submitFormDeploy(scope.row)">确定</el-button>
               </template>
             </el-table-column>
           </el-table>
 
-          <pagination
-            small
-            layout="prev, pager, next"
-            v-show="formTotal>0"
-            :total="formTotal"
-            :page.sync="formQueryParams.pageNum"
-            :limit.sync="formQueryParams.pageSize"
-            @pagination="ListFormDeploy"
-          />
+          <pagination small layout="prev, pager, next" v-show="formTotal > 0" :total="formTotal"
+            :page.sync="formQueryParams.pageNum" :limit.sync="formQueryParams.pageSize" @pagination="ListFormDeploy" />
         </el-col>
-<!--        <el-col :span="14" :xs="24">
+        <!--        <el-col :span="14" :xs="24">
           <div v-if="currentRow">
             <parser :key="new Date().getTime()" :form-conf="currentRow" />
           </div>
         </el-col>-->
         <el-col :span="14" :xs="24">
           <div class="test-form">
-            <v-form-render :form-data="formData" ref="vFormCurrentRowRef"/>
+            <v-form-render :form-data="formData" ref="vFormCurrentRowRef" />
           </div>
         </el-col>
       </el-row>
@@ -257,7 +234,7 @@ import {
   flowXmlAndNode
 } from "@/api/flowable/definition";
 import { getToken } from "@/utils/auth";
-import { getForm, addDeployForm ,listForm } from "@/api/flowable/form";
+import { getForm, addDeployForm, listForm } from "@/api/flowable/form";
 import Parser from '@/components/parser/Parser'
 import flow from '@/views/flowable/task/myProcess/send/flow'
 import Model from './model';
@@ -296,10 +273,10 @@ export default {
       formDeployOpen: false,
       formDeployTitle: "",
       formList: [],
-      formTotal:0,
+      formTotal: 0,
       formConf: {}, // 默认表单数据
       formData: {}, // 默认表单数据
-      readImage:{
+      readImage: {
         open: false,
         src: "",
       },
@@ -332,12 +309,12 @@ export default {
         parentDeploymentId: null,
         engineVersion: null
       },
-      formQueryParams:{
+      formQueryParams: {
         pageNum: 1,
         pageSize: 10,
       },
       // 挂载表单到流程实例
-      formDeployParam:{
+      formDeployParam: {
         formId: null,
         deployId: null
       },
@@ -378,7 +355,7 @@ export default {
         type: 'warning'
       }).then(() => {
         done();
-      }).catch(() => {});
+      }).catch(() => { });
     },
     // 取消按钮
     cancel() {
@@ -414,7 +391,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.deploymentId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -424,17 +401,17 @@ export default {
       this.title = "添加流程定义";
     },
     /** 跳转到流程设计页面 */
-    handleLoadXml(row){
+    handleLoadXml(row) {
       // this.dialogVisible = true;
       // this.deployId = row.deploymentId;
-      this.$router.push({ path: '/flowable/definition/model',query: { deployId: row.deploymentId }})
+      this.$router.push({ path: '/flowable/definition/model', query: { deployId: row.deploymentId } })
     },
     /** 流程图查看 */
-    handleReadImage(deployId){
+    handleReadImage(deployId) {
       this.readImage.title = "流程图";
       this.readImage.open = true;
       // this.readImage.src = process.env.VUE_APP_BASE_API + "/flowable/definition/readImage/" + deploymentId;
-      flowXmlAndNode({deployId:deployId}).then(res => {
+      flowXmlAndNode({ deployId: deployId }).then(res => {
         this.flowData = res.data;
       })
     },
@@ -446,8 +423,8 @@ export default {
         this.formConf = JSON.parse(res.data.formContent)
       })
     },*/
-    handleForm(formId){
-      getForm(formId).then(res =>{
+    handleForm(formId) {
+      getForm(formId).then(res => {
         this.formTitle = "表单详情";
         this.formConfOpen = true;
         this.$nextTick(() => {
@@ -461,19 +438,19 @@ export default {
       })
     },
     /** 启动流程 */
-    handleDefinitionStart(row){
-      definitionStart(row.id).then(res =>{
+    handleDefinitionStart(row) {
+      definitionStart(row.id).then(res => {
         this.$modal.msgSuccess(res.msg);
       })
     },
     /** 挂载表单弹框 */
-    handleAddForm(row){
+    handleAddForm(row) {
       this.formDeployParam.deployId = row.deploymentId
       this.ListFormDeploy()
     },
     /** 挂载表单列表 */
-    ListFormDeploy(){
-      listForm(this.formQueryParams).then(res =>{
+    ListFormDeploy() {
+      listForm(this.formQueryParams).then(res => {
         this.formList = res.rows;
         this.formTotal = res.total;
         this.formDeployOpen = true;
@@ -494,19 +471,19 @@ export default {
     //   })
     // },
     /** 挂载表单 */
-    submitFormDeploy(row){
+    submitFormDeploy(row) {
       this.formDeployParam.formId = row.formId;
-      addDeployForm(this.formDeployParam).then(res =>{
+      addDeployForm(this.formDeployParam).then(res => {
         this.$modal.msgSuccess(res.msg);
         this.formDeployOpen = false;
         this.getList();
       })
     },
-   /* handleCurrentChange(data) {
-      if (data) {
-        this.currentRow = JSON.parse(data.formContent);
-      }
-    },*/
+    /* handleCurrentChange(data) {
+       if (data) {
+         this.currentRow = JSON.parse(data.formContent);
+       }
+     },*/
     handleCurrentChange(data) {
       if (data) {
         this.$nextTick(() => {
@@ -520,7 +497,7 @@ export default {
       }
     },
     /** 挂起/激活流程 */
-    handleUpdateSuspensionState(row){
+    handleUpdateSuspensionState(row) {
       let state = 1;
       if (row.suspensionState === 1) {
         state = 2
@@ -571,7 +548,7 @@ export default {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
-      }).then(function() {
+      }).then(function () {
         return delDeployment(deploymentIds);
       }).then(() => {
         this.getList();
@@ -585,14 +562,14 @@ export default {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
-      }).then(function() {
+      }).then(function () {
         return exportDeployment(queryParams);
       }).then(response => {
         this.download(response.msg);
       })
     },
     /** 导入bpmn.xml文件 */
-    handleImport(){
+    handleImport() {
       this.upload.title = "bpmn20.xml文件导入";
       this.upload.open = true;
     },

ruoyi-ui/src/views/flowable/expression/index.vue

@@ -1,113 +1,84 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入表达式名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
-          <el-option
-            v-for="dict in dict.type.sys_common_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="名称" prop="name">
+            <el-input v-model="queryParams.name" placeholder="请输入表达式名称" clearable @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 100%;">
+              <el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6"></el-col>
+        <el-col :span="6"></el-col>
+      </el-row>
+
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
 
     <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="['system:expression:add']"
-        >新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd"
+          v-hasPermi="['system:expression: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="['system:expression:edit']"
-        >修改</el-button>
+        <el-button type="success" icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['system:expression: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="['system:expression:remove']"
-        >删除</el-button>
+        <el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['system:expression: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="['system:expression:export']"
-        >导出</el-button>
+        <el-button type="warning" icon="el-icon-download" size="small" @click="handleExport"
+          v-hasPermi="['system:expression:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
+    <div class="border-card">
+      <el-table height="450" v-loading="loading" border :data="expressionList"
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="主键" align="center" prop="id" />
+        <el-table-column label="名称" align="center" prop="name" />
+        <el-table-column label="表达式内容" align="center" prop="expression" />
+        <el-table-column label="指定类型" align="center" prop="dataType">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.exp_data_type" :value="scope.row.dataType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+              v-hasPermi="['system:expression:edit']">修改</el-button>
+            <el-button class="custom-red-color" size="small" type="text" icon="el-icon-delete"
+              @click="handleDelete(scope.row)" v-hasPermi="['system:expression:remove']">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <el-table v-loading="loading" :data="expressionList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键" align="center" prop="id" />
-      <el-table-column label="名称" align="center" prop="name" />
-      <el-table-column label="表达式内容" align="center" prop="expression" />
-      <el-table-column label="指定类型" align="center" prop="dataType" >
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.exp_data_type" :value="scope.row.dataType"/>
-        </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="['system:expression:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:expression:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+    </div>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改流程达式对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -120,20 +91,14 @@
         </el-form-item>
         <el-form-item label="指定类型" prop="dataType">
           <el-radio-group v-model="form.dataType">
-            <el-radio
-              v-for="dict in dict.type.exp_data_type"
-              :key="dict.value"
-              :label="dict.value"
-            >{{dict.label}}</el-radio>
+            <el-radio v-for="dict in dict.type.exp_data_type" :key="dict.value"
+              :label="dict.value">{{ dict.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="状态" prop="status">
           <el-radio-group v-model="form.status">
-            <el-radio
-              v-for="dict in dict.type.sys_common_status"
-              :key="dict.value"
-              :label="parseInt(dict.value)"
-            >{{dict.label}}</el-radio>
+            <el-radio v-for="dict in dict.type.sys_common_status" :key="dict.value"
+              :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -153,7 +118,7 @@ import { listExpression, getExpression, delExpression, addExpression, updateExpr
 
 export default {
   name: "FlowExp",
-  dicts: ['sys_common_status','exp_data_type'],
+  dicts: ['sys_common_status', 'exp_data_type'],
   data() {
     return {
       // 遮罩层
@@ -237,7 +202,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -279,12 +244,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除流程达式编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除流程达式编号为"' + ids + '"的数据项？').then(function () {
         return delExpression(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {

ruoyi-ui/src/views/flowable/task/form/index.vue

@@ -1,330 +1,301 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="表单名称" prop="formName">
-        <el-input
-          v-model="queryParams.formName"
-          placeholder="请输入表单名称"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="表单名称" prop="formName">
+            <el-input v-model="queryParams.formName" placeholder="请输入表单名称" clearable size="small"
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+
+        </el-col>
+        <el-col :span="6">
+
+        </el-col>
+        <el-col :span="6">
+
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
 
     <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="['flowable:form:add']"
-        >新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd"
+          v-hasPermi="['flowable:form: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="['flowable:form:edit']"
-        >修改</el-button>
+        <el-button type="success" icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['flowable:form: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="['flowable:form:remove']"
-        >删除</el-button>
+        <el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['flowable:form: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="['flowable:form:export']"
-        >导出</el-button>
+        <el-button type="warning" icon="el-icon-download" size="small" @click="handleExport"
+          v-hasPermi="['flowable:form:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
+    <div class="border-card">
+      <el-table height="450" v-loading="loading" border :data="formList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="表单主键" align="center" prop="formId" />
+        <el-table-column label="表单名称" align="center" prop="formName" />
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button size="small" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
+            <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+              v-hasPermi="['flowable:form:edit']">修改</el-button>
+            <el-button class="custom-red-color" size="small" type="text" icon="el-icon-delete"
+              @click="handleDelete(scope.row)" v-hasPermi="['flowable:form:remove']">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <el-table v-loading="loading" :data="formList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="表单主键" align="center" prop="formId" />
-      <el-table-column label="表单名称" align="center" prop="formName" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <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-view"
-            @click="handleDetail(scope.row)"
-          >详情</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['flowable:form:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['flowable:form:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+    </div>
+    < <!-- 添加或修改流程表单对话框 -->
+      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+          <el-form-item label="表单名称" prop="formName">
+            <el-input v-model="form.formName" placeholder="请输入表单名称" />
+          </el-form-item>
+          <el-form-item label="表单内容">
+            <editor v-model="form.formContent" :min-height="192" />
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </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>
 
-    <!-- 添加或修改流程表单对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="表单名称" prop="formName">
-          <el-input v-model="form.formName" placeholder="请输入表单名称" />
-        </el-form-item>
-        <el-form-item label="表单内容">
-          <editor v-model="form.formContent" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </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>
-
-    <!--表单配置详情-->
-<!--    <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="60%" append-to-body>
+      <!--表单配置详情-->
+      <!--    <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="60%" append-to-body>
       <div class="test-form">
         <parser :key="new Date().getTime()"  :form-conf="formConf" />
       </div>
     </el-dialog>-->
-    <!--表单详情-->
-    <el-dialog :title="formTitle" :visible.sync="formRenderOpen" width="60%" append-to-body>
-      <v-form-render :form-data="formData" ref="vFormRef"/>
-    </el-dialog>
+      <!--表单详情-->
+      <el-dialog :title="formTitle" :visible.sync="formRenderOpen" width="60%" append-to-body>
+        <v-form-render :form-data="formData" ref="vFormRef" />
+      </el-dialog>
   </div>
 </template>
 
-<script>
-import { listForm, getForm, delForm, addForm, updateForm, exportForm } from "@/api/flowable/form";
-import Editor from '@/components/Editor';
-import Parser from '@/components/parser/Parser'
-export default {
-  name: "Form",
-  components: {
-    Editor,
-    Parser
-  },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 流程表单表格数据
-      formList: [],
-      // 弹出层标题
-      title: "",
-      formConf: {}, // 默认表单数据
-      formConfOpen: false,
-      formTitle: "",// 对话框标题，用于绑定到 el-dialog 的 :title
-      formRenderOpen: false,// 控制对话框的显示与隐藏，绑定到 el-dialog 的 :visible.sync
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        formName: null,
-        formContent: null,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      },
-      formData: {}// 表单数据，用于传递给 v-form-render 的 :form-data，存储表单的配置信息等
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询流程表单列表 */
-    getList() {
-      this.loading = true;
-      listForm(this.queryParams).then(response => {
-        this.formList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+  <script>
+  import { listForm, getForm, delForm, addForm, updateForm, exportForm } from "@/api/flowable/form";
+  import Editor from '@/components/Editor';
+  import Parser from '@/components/parser/Parser'
+  export default {
+    name: "Form",
+    components: {
+      Editor,
+      Parser
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        formId: null,
-        formName: null,
-        formContent: null,
-        createTime: null,
-        updateTime: null,
-        createBy: null,
-        updateBy: null,
-        remark: null
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 流程表单表格数据
+        formList: [],
+        // 弹出层标题
+        title: "",
+        formConf: {}, // 默认表单数据
+        formConfOpen: false,
+        formTitle: "",// 对话框标题，用于绑定到 el-dialog 的 :title
+        formRenderOpen: false,// 控制对话框的显示与隐藏，绑定到 el-dialog 的 :visible.sync
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          formName: null,
+          formContent: null,
+        },
+        // 表单参数
+        form: {},
+        // 表单校验
+        rules: {
+        },
+        formData: {}// 表单数据，用于传递给 v-form-render 的 :form-data，存储表单的配置信息等
       };
-      this.resetForm("form");
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
+    created() {
       this.getList();
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.formId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 表单配置信息 */
-   /* handleDetail(row){
-      this.formConfOpen = true;
-      this.formTitle = "流程表单配置详细";
-      this.formConf = JSON.parse(row.formContent)
-    },*/
-    /** 表单配置信息 */
-    handleDetail(row) {
-      this.formRenderOpen = true;
-      this.formTitle = "表单详情";
+    methods: {
+      /** 查询流程表单列表 */
+      getList() {
+        this.loading = true;
+        listForm(this.queryParams).then(response => {
+          this.formList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          formId: null,
+          formName: null,
+          formContent: null,
+          createTime: null,
+          updateTime: null,
+          createBy: null,
+          updateBy: null,
+          remark: null
+        };
+        this.resetForm("form");
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.formId)
+        this.single = selection.length !== 1
+        this.multiple = !selection.length
+      },
+      /** 表单配置信息 */
+      /* handleDetail(row){
+         this.formConfOpen = true;
+         this.formTitle = "流程表单配置详细";
+         this.formConf = JSON.parse(row.formContent)
+       },*/
+      /** 表单配置信息 */
+      handleDetail(row) {
+        this.formRenderOpen = true;
+        this.formTitle = "表单详情";
 
-      this.$nextTick(() => {
-        // 回显数据
-        this.$refs.vFormRef.setFormJson(JSON.parse(row.formContent))
         this.$nextTick(() => {
-          // 表单禁用
-          this.$refs.vFormRef.disableForm();
+          // 回显数据
+          this.$refs.vFormRef.setFormJson(JSON.parse(row.formContent))
+          this.$nextTick(() => {
+            // 表单禁用
+            this.$refs.vFormRef.disableForm();
+          })
         })
-      })
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      // this.reset();
-      // this.open = true;
-      // this.title = "添加流程表单";
-      /*this.$router.push({ path: '/tool/build/index', query: {formId: null }})*/
-      this.$router.push({ path: '/flowable/task/flowForm/index'})
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      // this.reset();
-      // const formId = row.formId || this.ids
-      // getForm(formId).then(response => {
-      //   this.form = response.data;
-      //   this.open = true;
-      //   this.title = "修改流程表单";
-      // });
-      //this.$router.push({ path: '/tool/build/index', query: {formId: row.formId }})
-      this.$router.push({ path: '/flowable/task/flowForm/index', query: {formId: row.formId }})
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.formId != null) {
-            updateForm(this.form).then(response => {
-             this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addForm(this.form).then(response => {
-             this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        // this.reset();
+        // this.open = true;
+        // this.title = "添加流程表单";
+        /*this.$router.push({ path: '/tool/build/index', query: {formId: null }})*/
+        this.$router.push({ path: '/flowable/task/flowForm/index' })
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        // this.reset();
+        // const formId = row.formId || this.ids
+        // getForm(formId).then(response => {
+        //   this.form = response.data;
+        //   this.open = true;
+        //   this.title = "修改流程表单";
+        // });
+        //this.$router.push({ path: '/tool/build/index', query: {formId: row.formId }})
+        this.$router.push({ path: '/flowable/task/flowForm/index', query: { formId: row.formId } })
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.formId != null) {
+              updateForm(this.form).then(response => {
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              addForm(this.form).then(response => {
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
           }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const formIds = row.formId || this.ids;
-      this.$confirm('是否确认删除流程表单编号为"' + formIds + '"的数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(function() {
-        return delForm(formIds);
-      }).then(() => {
-        this.getList();
-       this.$modal.msgSuccess("删除成功");
-      })
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有流程表单数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(function() {
-        return exportForm(queryParams);
-      }).then(response => {
-        this.download(response.msg);
-      })
+        });
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const formIds = row.formId || this.ids;
+        this.$confirm('是否确认删除流程表单编号为"' + formIds + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function () {
+          return delForm(formIds);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        const queryParams = this.queryParams;
+        this.$confirm('是否确认导出所有流程表单数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function () {
+          return exportForm(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+        })
+      }
     }
-  }
-};
+  };
 </script>
 
-<style lang="scss" scoped>
-.test-form {
-  margin: 15px auto;
-  width: 800px;
-  padding: 15px;
-}
-</style>
+  <style lang="scss" scoped>
+  .test-form {
+    margin: 15px auto;
+    width: 800px;
+    padding: 15px;
+  }
+</style>

ruoyi-ui/src/views/index.vue

@@ -44,6 +44,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
+::v-deep .el-card__body{
+  background-color: #fff;
+}
 .home {
   padding: 20px;
   blockquote {

ruoyi-ui/src/views/monitor/cache/index.vue

@@ -142,3 +142,8 @@ export default {
   }
 };
 </script>
+<style scoped lang="scss">
+::v-deep .el-card__body{
+  background-color: #fff;
+}
+</style>

ruoyi-ui/src/views/monitor/cache/list.vue

@@ -239,3 +239,11 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+::v-deep .el-card__body{
+  background-color: #fff;
+}
+.app-container {
+  height: 100vh;
+}
+</style>

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

@@ -1,155 +1,116 @@
 <template>
   <div class="app-container">
-    <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"
-        />
-      </el-form-item>
-      <el-form-item label="任务组名" prop="jobGroup">
-        <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable>
-          <el-option
-            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>
-          <el-option
-            v-for="dict in dict.type.sys_job_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="任务名称" prop="jobName">
+            <el-input v-model="queryParams.jobName" placeholder="请输入任务名称" clearable @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="任务组名" prop="jobGroup">
+            <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable style="width: 100%;">
+              <el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="任务状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable style="width: 100%;">
+              <el-option v-for="dict in dict.type.sys_job_status" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+
+        </el-col>
+      </el-row>
+
+
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
 
     <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']"
-        >新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" size="small" @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']"
-        >修改</el-button>
+        <el-button type="success" icon="el-icon-edit" size="small" :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']"
-        >删除</el-button>
+        <el-button type="danger" icon="el-icon-delete" size="small" :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']"
-        >导出</el-button>
+        <el-button type="warning" icon="el-icon-download" size="small" @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']"
-        >日志</el-button>
+        <el-button type="info" icon="el-icon-s-operation" size="small" @click="handleJobLog"
+          v-hasPermi="['monitor:job:query']">日志</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
+    <div class="border-card">
+      <el-table height="450" v-loading="loading" border :data="jobList" @selection-change="handleSelectionChange">
+        <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" />
+        <el-table-column label="任务组名" align="center" prop="jobGroup">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup" />
+          </template>
+        </el-table-column>
+        <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
+        <el-table-column label="cron执行表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
+        <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)"></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="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+              v-hasPermi="['monitor:job:edit']">修改</el-button>
+            <el-button class="custom-red-color" size="small" type="text" icon="el-icon-delete"
+              @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']">删除</el-button>
+            <el-dropdown size="small" @command="(command) => handleCommand(command, scope.row)"
+              v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
+              <el-button size="small" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="handleRun" icon="el-icon-caret-right"
+                  v-hasPermi="['monitor:job:changeStatus']">执行一次</el-dropdown-item>
+                <el-dropdown-item command="handleView" icon="el-icon-view"
+                  v-hasPermi="['monitor:job:query']">任务详细</el-dropdown-item>
+                <el-dropdown-item command="handleJobLog" icon="el-icon-s-operation"
+                  v-hasPermi="['monitor:job:query']">调度日志</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
-      <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" />
-      <el-table-column label="任务组名" align="center" prop="jobGroup">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
-      <el-table-column label="cron执行表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
-      <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)"
-          ></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']"
-          >修改</el-button>
-          <el-button
-            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)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
-            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="handleRun" icon="el-icon-caret-right"
-                v-hasPermi="['monitor:job:changeStatus']">执行一次</el-dropdown-item>
-              <el-dropdown-item command="handleView" icon="el-icon-view"
-                v-hasPermi="['monitor:job:query']">任务详细</el-dropdown-item>
-              <el-dropdown-item command="handleJobLog" icon="el-icon-s-operation"
-                v-hasPermi="['monitor:job:query']">调度日志</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+    </div>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改定时任务对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
@@ -163,12 +124,8 @@
           <el-col :span="12">
             <el-form-item label="任务分组" prop="jobGroup">
               <el-select v-model="form.jobGroup" placeholder="请选择任务分组">
-                <el-option
-                  v-for="dict in dict.type.sys_job_group"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                ></el-option>
+                <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>
@@ -203,11 +160,8 @@
           <el-col :span="24" v-if="form.jobId !== undefined">
             <el-form-item label="状态">
               <el-radio-group v-model="form.status">
-                <el-radio
-                  v-for="dict in dict.type.sys_job_status"
-                  :key="dict.value"
-                  :label="dict.value"
-                >{{dict.label}}</el-radio>
+                <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>
@@ -237,12 +191,12 @@
     </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>
+      <crontab @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
     </el-dialog>
 
     <!-- 任务日志详细 -->
     <el-dialog title="任务详细" :visible.sync="openView" width="700px" append-to-body>
-      <el-form ref="form" :model="form" label-width="120px" size="mini">
+      <el-form ref="form" :model="form" label-width="120px" size="small">
         <el-row>
           <el-col :span="12">
             <el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
@@ -419,21 +373,21 @@ export default {
     // 任务状态修改
     handleStatusChange(row) {
       let text = row.status === "0" ? "启用" : "停用";
-      this.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗？').then(function() {
+      this.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗？').then(function () {
         return changeJobStatus(row.jobId, row.status);
       }).then(() => {
         this.$modal.msgSuccess(text + "成功");
-      }).catch(function() {
+      }).catch(function () {
         row.status = row.status === "0" ? "1" : "0";
       });
     },
     /* 立即执行一次 */
     handleRun(row) {
-      this.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗？').then(function() {
+      this.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗？').then(function () {
         return runJob(row.jobId, row.jobGroup);
       }).then(() => {
         this.$modal.msgSuccess("执行成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 任务详细信息 */
     handleView(row) {
@@ -473,7 +427,7 @@ export default {
       });
     },
     /** 提交按钮 */
-    submitForm: function() {
+    submitForm: function () {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.jobId != undefined) {
@@ -495,12 +449,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const jobIds = row.jobId || this.ids;
-      this.$modal.confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项？').then(function () {
         return delJob(jobIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {

ruoyi-ui/src/views/monitor/job/log.vue

@@ -1,151 +1,110 @@
 <template>
   <div class="app-container">
-    <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
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="任务组名" prop="jobGroup">
-        <el-select
-          v-model="queryParams.jobGroup"
-          placeholder="请选择任务组名"
-          clearable
-          style="width: 240px"
-        >
-          <el-option
-            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
-          style="width: 240px"
-        >
-          <el-option
-            v-for="dict in dict.type.sys_common_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="执行时间">
-        <el-date-picker
-          v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="任务名称" prop="jobName">
+            <el-input v-model="queryParams.jobName" placeholder="请输入任务名称" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="任务组名" prop="jobGroup">
+            <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable style="width: 100%;">
+              <el-option v-for="dict in dict.type.sys_job_group" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="执行状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="请选择执行状态" clearable style="width: 100%;">
+              <el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label"
+                :value="dict.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="执行时间">
+            <el-date-picker v-model="dateRange" style="width: 100%;" value-format="yyyy-MM-dd" type="daterange"
+              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+
+
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <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']"
-        >删除</el-button>
+        <el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['monitor:job:remove']">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          @click="handleClean"
-          v-hasPermi="['monitor:job:remove']"
-        >清空</el-button>
+        <el-button type="danger" icon="el-icon-delete" size="small" @click="handleClean"
+          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']"
-        >导出</el-button>
+        <el-button type="warning" icon="el-icon-download" size="small" @click="handleExport"
+          v-hasPermi="['monitor:job:export']">导出</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-close"
-          size="mini"
-          @click="handleClose"
-        >关闭</el-button>
+        <el-button type="warning" icon="el-icon-close" size="small" @click="handleClose">关闭</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
+    <div class="border-card">
+      <el-table height="450" v-loading="loading" border :data="jobLogList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="日志编号" width="80" align="center" prop="jobLogId" />
+        <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
+        <el-table-column label="任务组名" align="center" prop="jobGroup" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup" />
+          </template>
+        </el-table-column>
+        <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
+        <el-table-column label="日志信息" align="center" prop="jobMessage" :show-overflow-tooltip="true" />
+        <el-table-column label="执行状态" align="center" prop="status">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column label="执行时间" align="center" prop="createTime" width="180">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button style="color:#1890ff" size="small" type="text" icon="el-icon-view" @click="handleView(scope.row)"
+              v-hasPermi="['monitor:job:query']">详细</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <el-table v-loading="loading" :data="jobLogList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="日志编号" width="80" align="center" prop="jobLogId" />
-      <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
-      <el-table-column label="任务组名" align="center" prop="jobGroup" :show-overflow-tooltip="true">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
-      <el-table-column label="日志信息" align="center" prop="jobMessage" :show-overflow-tooltip="true" />
-      <el-table-column label="执行状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="执行时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </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-view"
-            @click="handleView(scope.row)"
-            v-hasPermi="['monitor:job:query']"
-          >详细</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+    </div>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 调度日志详细 -->
     <el-dialog title="调度日志详细" :visible.sync="open" width="700px" append-to-body>
-      <el-form ref="form" :model="form" label-width="100px" size="mini">
+      <el-form ref="form" :model="form" label-width="100px" size="small">
         <el-row>
           <el-col :span="12">
             <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
@@ -180,7 +139,7 @@
 </template>
 
 <script>
-import { getJob} from "@/api/monitor/job";
+import { getJob } from "@/api/monitor/job";
 import { listJobLog, delJobLog, cleanJobLog } from "@/api/monitor/jobLog";
 
 export default {
@@ -233,10 +192,10 @@ export default {
     getList() {
       this.loading = true;
       listJobLog(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.jobLogList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
+        this.jobLogList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      }
       );
     },
     // 返回按钮
@@ -268,21 +227,21 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const jobLogIds = this.ids;
-      this.$modal.confirm('是否确认删除调度日志编号为"' + jobLogIds + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除调度日志编号为"' + jobLogIds + '"的数据项？').then(function () {
         return delJobLog(jobLogIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 清空按钮操作 */
     handleClean() {
-      this.$modal.confirm('是否确认清空所有调度日志数据项？').then(function() {
+      this.$modal.confirm('是否确认清空所有调度日志数据项？').then(function () {
         return cleanJobLog();
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("清空成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {

ruoyi-ui/src/views/monitor/online/index.vue

@@ -1,64 +1,68 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
-      <el-form-item label="登录地址" prop="ipaddr">
-        <el-input
-          v-model="queryParams.ipaddr"
-          placeholder="请输入登录地址"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="用户名称" prop="userName">
-        <el-input
-          v-model="queryParams.userName"
-          placeholder="请输入用户名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="登录地址" prop="ipaddr">
+            <el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="用户名称" prop="userName">
+            <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6"></el-col>
+        <el-col :span="6"></el-col>
+      </el-row>
+
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
 
     </el-form>
-    <el-table
-      v-loading="loading"
-      :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
-      style="width: 100%;"
-    >
-      <el-table-column label="序号" type="index" align="center">
-        <template slot-scope="scope">
-          <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
-      <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
-      <el-table-column label="部门名称" align="center" prop="deptName" />
-      <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
-      <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
-      <el-table-column label="浏览器" align="center" prop="browser" />
-      <el-table-column label="操作系统" align="center" prop="os" />
-      <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.loginTime) }}</span>
-        </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-delete"
-            @click="handleForceLogout(scope.row)"
-            v-hasPermi="['monitor:online:forceLogout']"
-          >强退</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="border-card">
+      <el-table height="450" v-loading="loading" :data="list.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
+        style="width: 100%;" border>
+        <el-table-column label="序号" type="index" align="center">
+          <template slot-scope="scope">
+            <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
+        <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
+        <el-table-column label="部门名称" align="center" prop="deptName" />
+        <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+        <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+        <el-table-column label="浏览器" align="center" prop="browser" />
+        <el-table-column label="操作系统" align="center" prop="os" />
+        <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.loginTime) }}</span>
+          </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-delete" @click="handleForceLogout(scope.row)"
+              v-hasPermi="['monitor:online:forceLogout']">强退</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
+    </div>
 
-    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
   </div>
 </template>
 
@@ -109,14 +113,13 @@ export default {
     },
     /** 强退按钮操作 */
     handleForceLogout(row) {
-      this.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户？').then(function() {
+      this.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户？').then(function () {
         return forceLogout(row.tokenId);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("强退成功");
-      }).catch(() => {});
+      }).catch(() => { });
     }
   }
 };
 </script>
-

ruoyi-ui/src/views/monitor/server/index.vue

@@ -205,3 +205,11 @@ export default {
   }
 };
 </script>
+<style scoped lang="scss">
+::v-deep .el-card__body{
+  background-color: #fff;
+}
+.app-container {
+  height: 100vh;
+}
+</style>

ruoyi-ui/src/views/system/user/profile/index.vue

@@ -89,3 +89,11 @@ export default {
   }
 };
 </script>
+<style scoped lang="scss">
+::v-deep .el-card__body{
+  background-color: #fff;
+}
+.app-container {
+  height: 100vh;
+}
+</style>

ruoyi-ui/src/views/tool/gen/index.vue

@@ -1,172 +1,106 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="表名称" prop="tableName">
-        <el-input
-          v-model="queryParams.tableName"
-          placeholder="请输入表名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="表描述" prop="tableComment">
-        <el-input
-          v-model="queryParams.tableComment"
-          placeholder="请输入表描述"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间">
-        <el-date-picker
-          v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-position="top">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="表名称" prop="tableName">
+            <el-input v-model="queryParams.tableName" placeholder="请输入表名称" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="表描述" prop="tableComment">
+            <el-input v-model="queryParams.tableComment" placeholder="请输入表描述" clearable
+              @keyup.enter.native="handleQuery" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="创建时间">
+            <el-date-picker v-model="dateRange" style="width: 100%;" value-format="yyyy-MM-dd" type="daterange"
+              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+
+        </el-col>
+      </el-row>
+
+
+
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-form-item label="搜索">
+            <el-button style="width: 100%;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="重置">
+            <el-button style="width: 100%;" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleGenTable"
-          v-hasPermi="['tool:gen:code']"
-        >生成</el-button>
+        <el-button type="primary" icon="el-icon-download" size="small" @click="handleGenTable"
+          v-hasPermi="['tool:gen:code']">生成</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-upload"
-          size="mini"
-          @click="openImportTable"
-          v-hasPermi="['tool:gen:import']"
-        >导入</el-button>
+        <el-button type="info" icon="el-icon-upload" size="small" @click="openImportTable"
+          v-hasPermi="['tool:gen:import']">导入</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleEditTable"
-          v-hasPermi="['tool:gen:edit']"
-        >修改</el-button>
+        <el-button type="success" icon="el-icon-edit" size="small" :disabled="single" @click="handleEditTable"
+          v-hasPermi="['tool:gen: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="['tool:gen:remove']"
-        >删除</el-button>
+        <el-button type="danger" icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['tool:gen:remove']">删除</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
+    <div class="border-card">
+      <el-table height="450" v-loading="loading" border :data="tableList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" align="center" width="55"></el-table-column>
+        <el-table-column label="序号" type="index" width="50" align="center">
+          <template slot-scope="scope">
+            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="表名称" align="center" prop="tableName" :show-overflow-tooltip="true" width="120" />
+        <el-table-column label="表描述" align="center" prop="tableComment" :show-overflow-tooltip="true" width="120" />
+        <el-table-column label="实体" align="center" prop="className" :show-overflow-tooltip="true" width="120" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
+        <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button style="color:#1890ff" type="text" size="small" icon="el-icon-view"
+              @click="handlePreview(scope.row)" v-hasPermi="['tool:gen:preview']">预览</el-button>
+            <el-button type="text" size="small" icon="el-icon-edit" @click="handleEditTable(scope.row)"
+              v-hasPermi="['tool:gen:edit']">编辑</el-button>
+            <el-button class="custom-red-color" type="text" size="small" icon="el-icon-delete"
+              @click="handleDelete(scope.row)" v-hasPermi="['tool:gen:remove']">删除</el-button>
+            <el-button type="text" size="small" icon="el-icon-refresh" @click="handleSynchDb(scope.row)"
+              v-hasPermi="['tool:gen:edit']">同步</el-button>
+            <el-button type="text" size="small" icon="el-icon-download" @click="handleGenTable(scope.row)"
+              v-hasPermi="['tool:gen:code']">生成代码</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+    </div>
 
-    <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" align="center" width="55"></el-table-column>
-      <el-table-column label="序号" type="index" width="50" align="center">
-        <template slot-scope="scope">
-          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="表名称"
-        align="center"
-        prop="tableName"
-        :show-overflow-tooltip="true"
-        width="120"
-      />
-      <el-table-column
-        label="表描述"
-        align="center"
-        prop="tableComment"
-        :show-overflow-tooltip="true"
-        width="120"
-      />
-      <el-table-column
-        label="实体"
-        align="center"
-        prop="className"
-        :show-overflow-tooltip="true"
-        width="120"
-      />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
-      <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            type="text"
-            size="small"
-            icon="el-icon-view"
-            @click="handlePreview(scope.row)"
-            v-hasPermi="['tool:gen:preview']"
-          >预览</el-button>
-          <el-button
-            type="text"
-            size="small"
-            icon="el-icon-edit"
-            @click="handleEditTable(scope.row)"
-            v-hasPermi="['tool:gen:edit']"
-          >编辑</el-button>
-          <el-button
-            type="text"
-            size="small"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['tool:gen:remove']"
-          >删除</el-button>
-          <el-button
-            type="text"
-            size="small"
-            icon="el-icon-refresh"
-            @click="handleSynchDb(scope.row)"
-            v-hasPermi="['tool:gen:edit']"
-          >同步</el-button>
-          <el-button
-            type="text"
-            size="small"
-            icon="el-icon-download"
-            @click="handleGenTable(scope.row)"
-            v-hasPermi="['tool:gen:code']"
-          >生成代码</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
     <!-- 预览界面 -->
-    <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
+    <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body
+      class="scrollbar">
       <el-tabs v-model="preview.activeName">
-        <el-tab-pane
-          v-for="(value, key) in preview.data"
-          :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
-          :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
-          :key="key"
-        >
-          <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="value" v-clipboard:success="clipboardSuccess" style="float:right">复制</el-link>
+        <el-tab-pane v-for="(value, key) in preview.data"
+          :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
+          :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))" :key="key">
+          <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="value"
+            v-clipboard:success="clipboardSuccess" style="float:right">复制</el-link>
           <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
         </el-tab-pane>
       </el-tabs>
@@ -244,10 +178,10 @@ export default {
     getList() {
       this.loading = true;
       listTable(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.tableList = response.rows;
-          this.total = response.total;
-          this.loading = false;
-        }
+        this.tableList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      }
       );
     },
     /** 搜索按钮操作 */
@@ -262,7 +196,7 @@ export default {
         this.$modal.msgError("请选择要生成的数据");
         return;
       }
-      if(row.genType === "1") {
+      if (row.genType === "1") {
         genCode(row.tableName).then(response => {
           this.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath);
         });
@@ -273,11 +207,11 @@ export default {
     /** 同步数据库操作 */
     handleSynchDb(row) {
       const tableName = row.tableName;
-      this.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function() {
+      this.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function () {
         return synchDb(tableName);
       }).then(() => {
         this.$modal.msgSuccess("同步成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 打开导入表弹窗 */
     openImportTable() {
@@ -325,12 +259,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const tableIds = row.tableId || this.ids;
-      this.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function () {
         return delTable(tableIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     }
   }
 };