update

.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 工具与技术交流管理系统
+VUE_APP_TITLE = 工具管理与技术交流平台
 
 # 开发环境配置
 ENV = 'development'

.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 工具与技术交流管理系统
+VUE_APP_TITLE = 工具管理与技术交流平台
 
 # 生产环境配置
 ENV = 'production'

.env.staging

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 工具与技术交流管理系统
+VUE_APP_TITLE = 工具管理与技术交流平台
 
 NODE_ENV = production
 

src/components/Breadcrumb/index.vue

@@ -34,9 +34,9 @@ export default {
       let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
       const first = matched[0]
 
-      if (!this.isDashboard(first)) {
+      /*if (!this.isDashboard(first)) {
         matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
-      }
+      }*/
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
     },

src/layout/components/Navbar.vue

@@ -6,25 +6,21 @@
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <!--<template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-      </template>
-
+      </template>-->
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar" class="user-avatar">
+          <span style="font-size: 16px"><i class="el-icon-user"/> {{nickName}}</span>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/user/profile">
             <el-dropdown-item>个人中心</el-dropdown-item>
           </router-link>
-          <el-dropdown-item @click.native="setting = true">
-            <span>布局设置</span>
-          </el-dropdown-item>
           <el-dropdown-item divided @click.native="logout">
             <span>退出登录</span>
           </el-dropdown-item>
@@ -54,6 +50,7 @@ export default {
     ...mapGetters([
       'sidebar',
       'avatar',
+      'nickName',
       'device'
     ]),
     setting: {

src/main.js

@@ -5,6 +5,7 @@ import Cookies from 'js-cookie'
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 import  '../public/css/poctstyle.css'
+import  '../public/css/tool.css'
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css
 import App from './App'

src/router/index.js

@@ -69,8 +69,8 @@ export const constantRoutes = [
       {
         path: 'index',
         component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        /*name: 'Index',
+        meta: { title: '首页', icon: 'dashboard', affix: true }*/
       }
     ]
   },

src/store/getters.js

@@ -8,6 +8,7 @@ const getters = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
+  nickName: state => state.user.nickName,
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,
   permissions: state => state.user.permissions,

src/store/modules/user.js

@@ -6,6 +6,7 @@ const user = {
     token: getToken(),
     id: '',
     name: '',
+    nickName: '',
     avatar: '',
     roles: [],
     permissions: []
@@ -21,6 +22,9 @@ const user = {
     SET_NAME: (state, name) => {
       state.name = name
     },
+    SET_NICK_NAME: (state, nickName) => {
+      state.nickName = nickName
+    },
     SET_AVATAR: (state, avatar) => {
       state.avatar = avatar
     },
@@ -64,6 +68,7 @@ const user = {
           }
           commit('SET_ID', user.userId)
           commit('SET_NAME', user.userName)
+          commit('SET_NICK_NAME', user.nickName)
           commit('SET_AVATAR', avatar)
           resolve(res)
         }).catch(error => {

src/utils/request.js

@@ -116,7 +116,7 @@ service.interceptors.response.use(res => {
     } else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
-    //Message({ message: message, type: 'error', duration: 5 * 1000 })
+    Message({ message: message, type: 'error', duration: 5 * 1000 })
     return Promise.reject(error)
   }
 )

src/views/document/index.vue

@@ -1,119 +1,176 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-      <el-form-item label="文档名称" prop="roleName">
-        <el-input
-          v-model="queryParams.docName"
-          placeholder="请输入文档名称"
-          clearable
-          style="width: 240px"
-          @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>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-upload2"
-          size="mini"
-          @click="handleAdd"
-        >上传文档</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="docList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="文档编号" prop="docCode" width="120" />
-      <el-table-column label="文档名称" prop="docName" :show-overflow-tooltip="true" />
-      <el-table-column label="类别" prop="docType" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="负责人" prop="docPrincipals" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="归属部门" prop="docRespDept" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="来源" prop="docSource" width="100" />
-      <el-table-column label="上传进度" prop="docUploadProgress" width="200" >
-        <template slot-scope="scope">
-          <el-tag type="success" v-if="scope.row.docStatus == 'ysc'">已上传</el-tag>
-          <el-progress v-else :percentage="progress" status="success"></el-progress>
-        </template>
-      </el-table-column>
-      <el-table-column label="关联工具" prop="roleSort" width="100" />
-      <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" width="180">
-        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handlePriew(scope.row)"
-          >预览</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</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="title" :visible.sync="open" width="800px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="类别" prop="docType">
-          <el-input v-model="form.docType" placeholder="请输入类别" />
-        </el-form-item>
-        <el-form-item label="负责人" prop="docPrincipals">
-          <el-input v-model="form.docPrincipals" placeholder="请输入负责人" />
-        </el-form-item>
-        <el-form-item label="归属部门" prop="docRespDept">
-          <el-input v-model="form.docRespDept" placeholder="请输入归属部门" />
-        </el-form-item>
-        <el-form-item label="文档来源" prop="docSource">
-          <el-input v-model="form.docSource" placeholder="请输入文档来源" />
-        </el-form-item>
-        <el-form-item label="文件">
-          <el-upload
-            class="upload-component"
-            ref="upload"
-            :auto-upload="false"
-            :file-list="fileList"
-            :on-change="onChange"
-            :on-remove="onRemove"
-            :limit="1"
-            action=""
-          >
-            <el-button size="small" type="primary">点击上传</el-button>
-            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="备注">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-        </el-form-item>
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <div class="search">
+          <div class="sl">
+            <el-form-item label="文档名称" prop="roleName">
+              <el-input
+                v-model="queryParams.docName"
+                placeholder="请输入文档名称"
+                clearable
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+          </div>
+          <div class="sr">
+            <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>
+          </div>
+        </div>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+    </el-card>
+    <el-card class="lrtt">
+      <div class="lt">
+        <el-input
+          v-model="deptName"
+          placeholder="请输入部门名称"
+          clearable
+          size="small"
+          prefix-icon="el-icon-search"
+          style="margin-bottom: 20px"
+        />
+        <div class="divide"></div><!--divide 分隔-->
+        <el-tree
+          :data="deptOptions"
+          :props="defaultProps"
+          :expand-on-click-node="false"
+          :filter-node-method="filterNode"
+          ref="tree"
+          node-key="id"
+          default-expand-all
+          highlight-current
+          @node-click="handleNodeClick"
+        />
+      </div><!--lt 左-->
+      <div class="rt">
+        <div class="operate">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-upload2"
+            size="mini"
+            @click="handleAdd"
+          >上传文档</el-button>
+          <el-button type="primary" icon="el-icon-position">发布</el-button>
+          <el-button icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
+        </div><!--operate 操作按钮-->
+
+        <el-table v-loading="loading" :data="docList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="文档编号" prop="docCode" width="120" />
+          <el-table-column label="文档名称" prop="docName" :show-overflow-tooltip="true" />
+          <el-table-column label="类别" prop="docType" :show-overflow-tooltip="true" width="80" />
+          <el-table-column label="负责人" prop="docPrincipals" :show-overflow-tooltip="true" width="80" />
+          <el-table-column label="归属部门" prop="docRespDept" :show-overflow-tooltip="true" width="150" />
+          <el-table-column label="来源" prop="docSource" width="100" />
+          <el-table-column label="关联工具" prop="roleSort" width="100" />
+          <el-table-column label="上传进度" prop="docUploadProgress" width="100" >
+            <template slot-scope="scope">
+              <el-tag type="success" v-if="scope.row.docStatus == 'ysc'">已上传</el-tag>
+              <el-progress v-else :percentage="progress" status="success"></el-progress>
+            </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" width="180">
+            <template slot-scope="scope" v-if="scope.row.roleId !== 1">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-view"
+                @click="handlePriew(scope.row)"
+              >预览</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+              >删除</el-button>
+              <el-button type="text" icon="el-icon-download">下载</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-dialog>
+    </el-card>
+
+    <el-drawer :visible.sync="open" size="75%">
+      <template #title>
+        <span class="title">新增文档资源</span>
+        <div class="drawer-head-btn">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div><!--drawer-head-btn 抽屉顶部按钮区域-->
+      </template>
+      <div class="el-form-border">
+        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
+          <el-row>
+            <el-col :span="24">
+              <!--<el-form-item label="文档类别" required>
+                <el-select placeholder="请选择">
+                  <el-option label="管理手册" value=""></el-option>
+                  <el-option label="操作手册" value=""></el-option>
+                  <el-option label="程序文件" value=""></el-option>
+                  <el-option label="需求文档" value=""></el-option>
+                </el-select>
+              </el-form-item>-->
+              <el-form-item label="文档类别" prop="docType">
+                <el-input v-model="form.docType" placeholder="请输入文档类别" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="文档来源" prop="docSource">
+                <el-input v-model="form.docSource" placeholder="请输入文档来源" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="文件" required>
+                <el-upload
+                  class="upload-component"
+                  ref="upload"
+                  :auto-upload="false"
+                  :file-list="fileList"
+                  :on-change="onChange"
+                  :on-remove="onRemove"
+                  :limit="1"
+                  action=""
+                >
+                  <el-button size="small" type="primary">点击上传</el-button>
+                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+                </el-upload>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="负责人" prop="docPrincipals">
+                <el-input v-model="form.docPrincipals" placeholder="请输入负责人" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="归属部门" prop="docRespDept">
+                <el-input v-model="form.docRespDept" placeholder="请输入归属部门" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form><!--el-form-->
+      </div><!--el-form-border 表单-->
+    </el-drawer><!--el-drawer 新增抽屉-->
 
     <el-dialog :title="viewDialogTitle" :visible.sync="viewDialogOpen" fullscreen width="500px" append-to-body>
       <i-frame :src="previewUrl" />
@@ -123,6 +180,7 @@
 
 <script>
 import { listDocument, getDocument, delDocument, addDocument, updateDocument } from "@/api/document/document";
+import { deptTreeSelect } from "@/api/system/user";
 import { Base64 } from 'js-base64';
 import iFrame from "@/components/iFrame/index";
 import { w3cwebsocket as WebSocket } from 'websocket';
@@ -144,6 +202,14 @@ export default {
       multiple: true,
       // 显示搜索条件
       showSearch: true,
+      // 部门名称
+      deptName: undefined,
+      // 部门树选项
+      deptOptions: undefined,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
       // 总条数
       total: 0,
       // 表格数据
@@ -187,9 +253,26 @@ export default {
   },
   created() {
     this.getList();
+    this.getDeptTree();
     this.initWebSocket();
   },
   methods: {
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.toolRespDept = data.id;
+      this.handleQuery();
+    },
     generateUniqueID() {
       // 使用时间戳来生成唯一ID
       const timestamp = new Date().getTime();
@@ -306,7 +389,7 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.fileId)
+      this.ids = selection.map(item => item.docId)
       this.single = selection.length!=1
       this.multiple = !selection.length
     },

src/views/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard-editor-container">
+  <!--<div class="dashboard-editor-container">
 
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
 
@@ -25,8 +25,8 @@
       </el-col>
     </el-row>
 
-    
-  </div>
+
+  </div>-->
 </template>
 
 <script>
@@ -69,6 +69,9 @@ export default {
       lineChartData: lineChartData.newVisitis
     }
   },
+  created(){
+    this.$router.push('/tool')
+  },
   methods: {
     handleSetLineChartData(type) {
       this.lineChartData = lineChartData[type]

src/views/login.vue

@@ -1,64 +1,33 @@
 <template>
-  <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">工具与技术交流管理系统</h3>
-      <el-form-item prop="username">
-        <el-input
-          v-model="loginForm.username"
-          type="text"
-          auto-complete="off"
-          placeholder="账号"
-        >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+    <div class="login-page">
+      <div class="loleft"></div>
+      <div class="loright">
+        <div class="locont">
+          <div class="logoi"><img src="images/logo.png" /></div>
+          <div class="title">工具管理及技术交流平台</div>
+          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+            <el-form-item>
+              <el-input placeholder="请输入账号" v-model="loginForm.username" auto-complete="off" prefix-icon="el-icon-user"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-input type="password" placeholder="请输入密码"  v-model="loginForm.password" auto-complete="off" @keyup.enter.native="handleLogin" prefix-icon="el-icon-lock"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                :loading="loading"
+                size="medium"
+                type="primary"
+                style="width:100%;"
+                @click.native.prevent="handleLogin"
+              >
+                <span v-if="!loading">登 录</span>
+                <span v-else>登 录 中...</span>
+              </el-button>
+            </el-form-item>
+          </el-form>
         </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2024 ruoyi.vip All Rights Reserved.</span>
-    </div>
-  </div>
+      </div>
+    </div><!--login-page 登录-->
 </template>
 
 <script>
@@ -104,7 +73,7 @@ export default {
     }
   },
   created() {
-    this.getCode();
+    //this.getCode();
     this.getCookie();
   },
   methods: {

src/views/monitor/logininfor/index.vue

@@ -1,131 +1,125 @@
 <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="ipaddr">
-        <el-input
-          v-model="queryParams.ipaddr"
-          placeholder="请输入登录地址"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="用户名称" prop="userName">
-        <el-input
-          v-model="queryParams.userName"
-          placeholder="请输入用户名称"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </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-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="登录地址" prop="ipaddr">
+          <el-input
+            v-model="queryParams.ipaddr"
+            placeholder="请输入登录地址"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="登录时间">
-        <el-date-picker
-          v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']"
-        ></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>
+        </el-form-item>
+        <el-form-item label="用户名称" prop="userName">
+          <el-input
+            v-model="queryParams.userName"
+            placeholder="请输入用户名称"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </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 HH:mm:ss"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="['00:00:00', '23:59:59']"
+          ></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>
+    </el-card>
 
-    <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:logininfor: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:logininfor:remove']"
-        >清空</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-unlock"
-          size="mini"
-          :disabled="single"
-          @click="handleUnlock"
-          v-hasPermi="['monitor:logininfor:unlock']"
-        >解锁</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:logininfor:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+    <el-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
+          <el-button
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
+            v-hasPermi="['monitor:logininfor:remove']"
+          >删除</el-button>
+          <el-button
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            @click="handleClean"
+            v-hasPermi="['monitor:logininfor:remove']"
+          >清空</el-button>
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-unlock"
+            size="mini"
+            :disabled="single"
+            @click="handleUnlock"
+            v-hasPermi="['monitor:logininfor:unlock']"
+          >解锁</el-button>
+          <el-button
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['monitor:logininfor:export']"
+          >导出</el-button>
+        </div>
+        <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="访问编号" align="center" prop="infoId" />
+          <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
+          <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
+          <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+          <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
+          <el-table-column label="操作系统" align="center" prop="os" />
+          <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="msg" :show-overflow-tooltip="true" />
+          <el-table-column label="登录日期" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.loginTime) }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
 
-    <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="访问编号" align="center" prop="infoId" />
-      <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
-      <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
-      <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
-      <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
-      <el-table-column label="操作系统" align="center" prop="os" />
-      <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="msg" :show-overflow-tooltip="true" />
-      <el-table-column label="登录日期" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.loginTime) }}</span>
-        </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-card>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
   </div>
 </template>
 

src/views/monitor/operlog/index.vue

@@ -1,163 +1,158 @@
 <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="operIp">
-        <el-input
-          v-model="queryParams.operIp"
-          placeholder="请输入操作地址"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="系统模块" prop="title">
-        <el-input
-          v-model="queryParams.title"
-          placeholder="请输入系统模块"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="操作人员" prop="operName">
-        <el-input
-          v-model="queryParams.operName"
-          placeholder="请输入操作人员"
-          clearable
-          style="width: 240px;"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="类型" prop="businessType">
-        <el-select
-          v-model="queryParams.businessType"
-          placeholder="操作类型"
-          clearable
-          style="width: 240px"
-        >
-          <el-option
-            v-for="dict in dict.type.sys_oper_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="操作地址" prop="operIp">
+          <el-input
+            v-model="queryParams.operIp"
+            placeholder="请输入操作地址"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
           />
-        </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-form-item>
+        <el-form-item label="系统模块" prop="title">
+          <el-input
+            v-model="queryParams.title"
+            placeholder="请输入系统模块"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="操作时间">
-        <el-date-picker
-          v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']"
-        ></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>
+        </el-form-item>
+        <el-form-item label="操作人员" prop="operName">
+          <el-input
+            v-model="queryParams.operName"
+            placeholder="请输入操作人员"
+            clearable
+            style="width: 240px;"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="类型" prop="businessType">
+          <el-select
+            v-model="queryParams.businessType"
+            placeholder="操作类型"
+            clearable
+            style="width: 240px"
+          >
+            <el-option
+              v-for="dict in dict.type.sys_oper_type"
+              :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 HH:mm:ss"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="['00:00:00', '23:59:59']"
+          ></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>
+    </el-card>
 
-    <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:operlog: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:operlog: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:operlog:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
-      <el-table-column type="selection" width="50" align="center" />
-      <el-table-column label="日志编号" align="center" prop="operId" />
-      <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
-      <el-table-column label="操作类型" align="center" prop="businessType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作人员" align="center" prop="operName" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
-      <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
-      <el-table-column label="操作地点" align="center" prop="operLocation" :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="operTime" width="160" sortable="custom" :sort-orders="['descending', 'ascending']">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.operTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
-        <template slot-scope="scope">
-          <span>{{ scope.row.costTime }}毫秒</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+    <el-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
           <el-button
+            plain
+            icon="el-icon-delete"
             size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handleView(scope.row,scope.index)"
-            v-hasPermi="['monitor:operlog:query']"
-          >详细</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+            :disabled="multiple"
+            @click="handleDelete"
+            v-hasPermi="['monitor:operlog:remove']"
+          >删除</el-button>
+          <el-button
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            @click="handleClean"
+            v-hasPermi="['monitor:operlog:remove']"
+          >清空</el-button>
+          <el-button
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['monitor:operlog:export']"
+          >导出</el-button>
+        </div>
+        <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="日志编号" align="center" prop="operId" />
+          <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
+          <el-table-column label="操作类型" align="center" prop="businessType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作人员" align="center" prop="operName" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
+          <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
+          <el-table-column label="操作地点" align="center" prop="operLocation" :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="operTime" width="160" sortable="custom" :sort-orders="['descending', 'ascending']">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.operTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
+            <template slot-scope="scope">
+              <span>{{ scope.row.costTime }}毫秒</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,scope.index)"
+                v-hasPermi="['monitor:operlog: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"
-    />
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </el-card>
 
     <!-- 操作日志详细 -->
     <el-dialog title="操作日志详细" :visible.sync="open" width="800px" append-to-body>

src/views/statistic/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="工具统计" name="first">
+        <div class="app-container"><!--从这一层开始嵌入页面-->
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-card>
+                <div slot="header" class="clearfix"><span class="tline">工具类别统计</span></div>
+                <div class="tjbox2"><img src="images/tjt1.jpg" /></div>
+              </el-card><!--el-card-->
+            </el-col><!--el-col-->
+            <el-col :span="12">
+              <el-card>
+                <div slot="header" class="clearfix"><span class="tline">工具使用情况</span></div>
+                <div class="tjbox2"><img src="images/tjt2.jpg" /></div>
+              </el-card><!--el-card-->
+            </el-col><!--el-col-->
+          </el-row><!--el-row-->
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-card>
+                <div slot="header" class="clearfix"><span class="tline">工具归属单位分布情况</span></div>
+                <div class="tjbox2"><img src="images/tjt5.jpg" /></div>
+              </el-card><!--el-card-->
+            </el-col><!--el-col-->
+            <el-col :span="12">
+              <el-card>
+                <div slot="header" class="clearfix"><span class="tline">近一年工具使用数量统计</span></div>
+                <div class="tjbox2"><img src="images/tjt6.jpg" /></div>
+              </el-card><!--el-card-->
+            </el-col><!--el-col-->
+          </el-row><!--el-row-->
+
+        </div><!--app-container-->
+      </el-tab-pane>
+      <el-tab-pane label="文档统计" name="second">
+        <div class="app-container"><!--从这一层开始嵌入页面-->
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-card>
+                <div slot="header" class="clearfix"><span class="tline">文档类别统计</span></div>
+                <div class="tjbox2"><img src="images/tjt3.jpg" /></div>
+              </el-card><!--el-card-->
+            </el-col><!--el-col-->
+            <el-col :span="12">
+              <el-card>
+                <div slot="header" class="clearfix"><span class="tline">文档来源统计</span></div>
+                <div class="tjbox2"><img src="images/tjt4.jpg" /></div>
+              </el-card><!--el-card-->
+            </el-col><!--el-col-->
+          </el-row><!--el-row-->
+
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-card>
+                <div slot="header" class="clearfix"><span class="tline">文档归属单位分布情况</span></div>
+                <div class="tjbox2"><img src="images/tjt5.jpg" /></div>
+              </el-card><!--el-card-->
+            </el-col><!--el-col-->
+            <el-col :span="12">
+              <el-card>
+                <div slot="header" class="clearfix"><span class="tline">近一年文档数量统计</span></div>
+                <div class="tjbox2"><img src="images/tjt6.jpg" /></div>
+              </el-card><!--el-card-->
+            </el-col><!--el-col-->
+          </el-row><!--el-row-->
+
+        </div><!--app-container-->
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    name: 'statistic',
+    data() {
+      return {
+        activeName: 'first'
+      };
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/system/config/index.vue

@@ -1,151 +1,141 @@
 <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="configName">
-        <el-input
-          v-model="queryParams.configName"
-          placeholder="请输入参数名称"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="参数键名" prop="configKey">
-        <el-input
-          v-model="queryParams.configKey"
-          placeholder="请输入参数键名"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="系统内置" prop="configType">
-        <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
-          <el-option
-            v-for="dict in dict.type.sys_yes_no"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="参数名称" prop="configName">
+          <el-input
+            v-model="queryParams.configName"
+            placeholder="请输入参数名称"
+            clearable
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
           />
-        </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>
+        </el-form-item>
+        <el-form-item label="参数键名" prop="configKey">
+          <el-input
+            v-model="queryParams.configKey"
+            placeholder="请输入参数键名"
+            clearable
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="系统内置" prop="configType">
+          <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
+            <el-option
+              v-for="dict in dict.type.sys_yes_no"
+              :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>
+    </el-card>
 
-    <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:config: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:config: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:config: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:config:export']"
-        >导出</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-refresh"
-          size="mini"
-          @click="handleRefreshCache"
-          v-hasPermi="['system:config:remove']"
-        >刷新缓存</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="参数主键" align="center" prop="configId" />
-      <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
-      <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
-      <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
-      <el-table-column label="系统内置" align="center" prop="configType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.configType"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-      <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-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
           <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
             size="mini"
-            type="text"
+            @click="handleAdd"
+            v-hasPermi="['system:config:add']"
+          >新增</el-button>
+          <el-button
+            plain
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
             v-hasPermi="['system:config:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
-            type="text"
+            plain
             icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
             v-hasPermi="['system:config:remove']"
           >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+          <el-button
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['system:config:export']"
+          >导出</el-button>
+          <el-button
+            plain
+            icon="el-icon-refresh"
+            size="mini"
+            @click="handleRefreshCache"
+            v-hasPermi="['system:config:remove']"
+          >刷新缓存</el-button>
+        </div>
+        <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="参数主键" align="center" prop="configId" />
+          <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
+          <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
+          <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
+          <el-table-column label="系统内置" align="center" prop="configType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.configType"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+          <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-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:config:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:config: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-card>
 
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>

src/views/system/dept/index.vue

@@ -1,100 +1,99 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-      <el-form-item label="部门名称" prop="deptName">
-        <el-input
-          v-model="queryParams.deptName"
-          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_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <el-form-item label="部门名称" prop="deptName">
+          <el-input
+            v-model="queryParams.deptName"
+            placeholder="请输入部门名称"
+            clearable
+            @keyup.enter.native="handleQuery"
           />
-        </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>
-
-    <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:dept:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-sort"
-          size="mini"
-          @click="toggleExpandAll"
-        >展开/折叠</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table
-      v-if="refreshTable"
-      v-loading="loading"
-      :data="deptList"
-      row-key="deptId"
-      :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-    >
-      <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
-      <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
-      <el-table-column prop="status" label="状态" width="100">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
-        <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-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_normal_disable"
+              :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>
+    </el-card>
+    <el-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
           <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:dept:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
+            type="primary"
+            plain
             icon="el-icon-plus"
-            @click="handleAdd(scope.row)"
+            size="mini"
+            @click="handleAdd"
             v-hasPermi="['system:dept:add']"
           >新增</el-button>
           <el-button
-            v-if="scope.row.parentId != 0"
+            type="info"
+            plain
+            icon="el-icon-sort"
             size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:dept:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+            @click="toggleExpandAll"
+          >展开/折叠</el-button>
+        </div>
+        <el-table
+          v-if="refreshTable"
+          v-loading="loading"
+          :data="deptList"
+          row-key="deptId"
+          :default-expand-all="isExpandAll"
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        >
+          <el-table-column prop="deptName" label="部门名称"></el-table-column>
+          <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
+          <el-table-column prop="status" label="状态" width="100">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+            <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" width="200">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:dept:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-plus"
+                @click="handleAdd(scope.row)"
+                v-hasPermi="['system:dept:add']"
+              >新增</el-button>
+              <el-button
+                v-if="scope.row.parentId != 0"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:dept:remove']"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
 
     <!-- 添加或修改部门对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>

src/views/system/dict/data.vue

@@ -1,144 +1,134 @@
 <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="dictType">
-        <el-select v-model="queryParams.dictType">
-          <el-option
-            v-for="item in typeOptions"
-            :key="item.dictId"
-            :label="item.dictName"
-            :value="item.dictType"
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="字典名称" prop="dictType">
+          <el-select v-model="queryParams.dictType">
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.dictId"
+              :label="item.dictName"
+              :value="item.dictType"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="字典标签" prop="dictLabel">
+          <el-input
+            v-model="queryParams.dictLabel"
+            placeholder="请输入字典标签"
+            clearable
+            @keyup.enter.native="handleQuery"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="字典标签" prop="dictLabel">
-        <el-input
-          v-model="queryParams.dictLabel"
-          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_normal_disable"
-            :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>
+        </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_normal_disable"
+              :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>
+    </el-card>
 
-    <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:dict: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:dict: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:dict: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:dict: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-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="字典编码" align="center" prop="dictCode" />
-      <el-table-column label="字典标签" align="center" prop="dictLabel">
-        <template slot-scope="scope">
-          <span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>
-          <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="字典键值" align="center" prop="dictValue" />
-      <el-table-column label="字典排序" align="center" prop="dictSort" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-      <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-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
           <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
             size="mini"
-            type="text"
+            @click="handleAdd"
+            v-hasPermi="['system:dict:add']"
+          >新增</el-button>
+          <el-button
+            plain
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
             v-hasPermi="['system:dict:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
-            type="text"
+            plain
             icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
             v-hasPermi="['system:dict:remove']"
           >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+          <el-button
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['system:dict:export']"
+          >导出</el-button>
+          <el-button
+            plain
+            icon="el-icon-close"
+            size="mini"
+            @click="handleClose"
+          >关闭</el-button>
+        </div>
+        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="字典编码" align="center" prop="dictCode" />
+          <el-table-column label="字典标签" align="center" prop="dictLabel">
+            <template slot-scope="scope">
+              <span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>
+              <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="字典键值" align="center" prop="dictValue" />
+          <el-table-column label="字典排序" align="center" prop="dictSort" />
+          <el-table-column label="状态" align="center" prop="status">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+          <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-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:dict:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:dict: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-card>
 
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -399,4 +389,4 @@ export default {
     }
   }
 };
-</script>
+</script>

src/views/system/dict/index.vue

@@ -1,161 +1,151 @@
 <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="dictName">
-        <el-input
-          v-model="queryParams.dictName"
-          placeholder="请输入字典名称"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="字典类型" prop="dictType">
-        <el-input
-          v-model="queryParams.dictType"
-          placeholder="请输入字典类型"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </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_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="字典名称" prop="dictName">
+          <el-input
+            v-model="queryParams.dictName"
+            placeholder="请输入字典名称"
+            clearable
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
           />
-        </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>
+        </el-form-item>
+        <el-form-item label="字典类型" prop="dictType">
+          <el-input
+            v-model="queryParams.dictType"
+            placeholder="请输入字典类型"
+            clearable
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
+          />
+        </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_normal_disable"
+              :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>
+    </el-card>
 
-    <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:dict: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:dict: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:dict: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:dict:export']"
-        >导出</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-refresh"
-          size="mini"
-          @click="handleRefreshCache"
-          v-hasPermi="['system:dict:remove']"
-        >刷新缓存</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="字典编号" align="center" prop="dictId" />
-      <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
-      <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
-        <template slot-scope="scope">
-          <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
-            <span>{{ scope.row.dictType }}</span>
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-      <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-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
           <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
             size="mini"
-            type="text"
+            @click="handleAdd"
+            v-hasPermi="['system:dict:add']"
+          >新增</el-button>
+          <el-button
+            plain
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
             v-hasPermi="['system:dict:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
-            type="text"
+            plain
             icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
             v-hasPermi="['system:dict:remove']"
           >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+          <el-button
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['system:dict:export']"
+          >导出</el-button>
+          <el-button
+            plain
+            icon="el-icon-refresh"
+            size="mini"
+            @click="handleRefreshCache"
+            v-hasPermi="['system:dict:remove']"
+          >刷新缓存</el-button>
+        </div>
+        <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="字典编号" align="center" prop="dictId" />
+          <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
+          <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+                <span>{{ scope.row.dictType }}</span>
+              </router-link>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" prop="status">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+          <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-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:dict:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:dict: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-card>
 
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -344,4 +334,4 @@ export default {
     }
   }
 };
-</script>
+</script>

src/views/system/menu/index.vue

@@ -1,106 +1,105 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-      <el-form-item label="菜单名称" prop="menuName">
-        <el-input
-          v-model="queryParams.menuName"
-          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_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <el-form-item label="菜单名称" prop="menuName">
+          <el-input
+            v-model="queryParams.menuName"
+            placeholder="请输入菜单名称"
+            clearable
+            @keyup.enter.native="handleQuery"
           />
-        </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>
-
-    <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:menu:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-sort"
-          size="mini"
-          @click="toggleExpandAll"
-        >展开/折叠</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table
-      v-if="refreshTable"
-      v-loading="loading"
-      :data="menuList"
-      row-key="menuId"
-      :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-    >
-      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
-      <el-table-column prop="icon" label="图标" align="center" width="100">
-        <template slot-scope="scope">
-          <svg-icon :icon-class="scope.row.icon" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
-      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="status" label="状态" width="80">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime">
-        <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-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_normal_disable"
+              :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>
+    </el-card>
+    <el-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
           <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:menu:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
+            type="primary"
+            plain
             icon="el-icon-plus"
-            @click="handleAdd(scope.row)"
+            size="mini"
+            @click="handleAdd"
             v-hasPermi="['system:menu:add']"
           >新增</el-button>
           <el-button
+            type="info"
+            plain
+            icon="el-icon-sort"
             size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:menu:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+            @click="toggleExpandAll"
+          >展开/折叠</el-button>
+        </div>
+        <el-table
+          v-if="refreshTable"
+          v-loading="loading"
+          :data="menuList"
+          row-key="menuId"
+          :default-expand-all="isExpandAll"
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        >
+          <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
+          <el-table-column prop="icon" label="图标" align="center" width="100">
+            <template slot-scope="scope">
+              <svg-icon :icon-class="scope.row.icon" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
+          <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
+          <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+          <el-table-column prop="status" label="状态" width="80">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime">
+            <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-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:menu:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-plus"
+                @click="handleAdd(scope.row)"
+                v-hasPermi="['system:menu:add']"
+              >新增</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:menu:remove']"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
 
     <!-- 添加或修改菜单对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>

src/views/system/notice/index.vue

@@ -1,126 +1,122 @@
 <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="noticeTitle">
-        <el-input
-          v-model="queryParams.noticeTitle"
-          placeholder="请输入公告标题"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="操作人员" prop="createBy">
-        <el-input
-          v-model="queryParams.createBy"
-          placeholder="请输入操作人员"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="类型" prop="noticeType">
-        <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable>
-          <el-option
-            v-for="dict in dict.type.sys_notice_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="公告标题" prop="noticeTitle">
+          <el-input
+            v-model="queryParams.noticeTitle"
+            placeholder="请输入公告标题"
+            clearable
+            @keyup.enter.native="handleQuery"
           />
-        </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>
+        </el-form-item>
+        <el-form-item label="操作人员" prop="createBy">
+          <el-input
+            v-model="queryParams.createBy"
+            placeholder="请输入操作人员"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="类型" prop="noticeType">
+          <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable>
+            <el-option
+              v-for="dict in dict.type.sys_notice_type"
+              :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>
+    </el-card>
 
-    <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:notice: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:notice: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:notice:remove']"
-        >删除</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" align="center" prop="noticeId" width="100" />
-      <el-table-column
-        label="公告标题"
-        align="center"
-        prop="noticeTitle"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" align="center" prop="status" width="100">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建者" align="center" prop="createBy" width="100" />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="100">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+    <el-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
           <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
             size="mini"
-            type="text"
+            @click="handleAdd"
+            v-hasPermi="['system:notice:add']"
+          >新增</el-button>
+          <el-button
+            plain
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
             v-hasPermi="['system:notice:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
-            type="text"
+            plain
             icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
             v-hasPermi="['system:notice:remove']"
           >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        </div>
+        <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="序号" align="center" prop="noticeId" width="100" />
+          <el-table-column
+            label="公告标题"
+            align="center"
+            prop="noticeTitle"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" prop="status" width="100">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建者" align="center" prop="createBy" width="100" />
+          <el-table-column label="创建时间" align="center" prop="createTime" width="100">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</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-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:notice:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:notice: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-card>
 
     <!-- 添加或修改公告对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>

src/views/system/post/index.vue

@@ -1,127 +1,119 @@
 <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="postCode">
-        <el-input
-          v-model="queryParams.postCode"
-          placeholder="请输入岗位编码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="岗位名称" prop="postName">
-        <el-input
-          v-model="queryParams.postName"
-          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_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="岗位编码" prop="postCode">
+          <el-input
+            v-model="queryParams.postCode"
+            placeholder="请输入岗位编码"
+            clearable
+            @keyup.enter.native="handleQuery"
           />
-        </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>
-
-    <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:post: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:post: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:post: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:post:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="岗位编号" align="center" prop="postId" />
-      <el-table-column label="岗位编码" align="center" prop="postCode" />
-      <el-table-column label="岗位名称" align="center" prop="postName" />
-      <el-table-column label="岗位排序" align="center" prop="postSort" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :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-form-item>
+        <el-form-item label="岗位名称" prop="postName">
+          <el-input
+            v-model="queryParams.postName"
+            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_normal_disable"
+              :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>
+    </el-card>
+    <el-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
           <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
             size="mini"
-            type="text"
+            @click="handleAdd"
+            v-hasPermi="['system:post:add']"
+          >新增</el-button>
+          <el-button
+            plain
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
             v-hasPermi="['system:post:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
-            type="text"
+            plain
             icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
             v-hasPermi="['system:post:remove']"
           >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+          <el-button
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['system:post:export']"
+          >导出</el-button>
+        </div>
+        <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="岗位编号" align="center" prop="postId" />
+          <el-table-column label="岗位编码" align="center" prop="postCode" />
+          <el-table-column label="岗位名称" align="center" prop="postName" />
+          <el-table-column label="岗位排序" align="center" prop="postSort" />
+          <el-table-column label="状态" align="center" prop="status">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_normal_disable" :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-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:post:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:post: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-card>
 
     <!-- 添加或修改岗位对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>

src/views/system/role/authUser.vue

@@ -1,100 +1,97 @@
 <template>
   <div class="app-container">
-     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-      <el-form-item label="用户名称" prop="userName">
-        <el-input
-          v-model="queryParams.userName"
-          placeholder="请输入用户名称"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="手机号码" prop="phonenumber">
-        <el-input
-          v-model="queryParams.phonenumber"
-          placeholder="请输入手机号码"
-          clearable
-          style="width: 240px"
-          @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>
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <el-form-item label="用户名称" prop="userName">
+          <el-input
+            v-model="queryParams.userName"
+            placeholder="请输入用户名称"
+            clearable
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="手机号码" prop="phonenumber">
+          <el-input
+            v-model="queryParams.phonenumber"
+            placeholder="请输入手机号码"
+            clearable
+            style="width: 240px"
+            @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>
+    </el-card>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="openSelectUser"
-          v-hasPermi="['system:role:add']"
-        >添加用户</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-circle-close"
-          size="mini"
-          :disabled="multiple"
-          @click="cancelAuthUserAll"
-          v-hasPermi="['system:role:remove']"
-        >批量取消授权</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-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
-      <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
-      <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
-      <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :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-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
           <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
             size="mini"
-            type="text"
+            @click="openSelectUser"
+            v-hasPermi="['system:role:add']"
+          >添加用户</el-button>
+          <el-button
+            plain
             icon="el-icon-circle-close"
-            @click="cancelAuthUser(scope.row)"
+            size="mini"
+            :disabled="multiple"
+            @click="cancelAuthUserAll"
             v-hasPermi="['system:role:remove']"
-          >取消授权</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+          >批量取消授权</el-button>
+          <el-button
+            plain
+            icon="el-icon-close"
+            size="mini"
+            @click="handleClose"
+          >关闭</el-button>
+        </div>
+        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+          <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+          <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+          <el-table-column label="手机" prop="phonenumber" :show-overflow-tooltip="true" />
+          <el-table-column label="状态" align="center" prop="status">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.sys_normal_disable" :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-circle-close"
+                @click="cancelAuthUser(scope.row)"
+                v-hasPermi="['system:role: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>
+    </el-card>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
     <select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />
   </div>
 </template>
@@ -196,4 +193,4 @@ export default {
     }
   }
 };
-</script>
+</script>

src/views/system/role/index.vue

@@ -1,159 +1,152 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
-      <el-form-item label="角色名称" prop="roleName">
-        <el-input
-          v-model="queryParams.roleName"
-          placeholder="请输入角色名称"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="权限字符" prop="roleKey">
-        <el-input
-          v-model="queryParams.roleKey"
-          placeholder="请输入权限字符"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </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_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input
+            v-model="queryParams.roleName"
+            placeholder="请输入角色名称"
+            clearable
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
           />
-        </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>
-
-    <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:role: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:role: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:role: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:role:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="角色编号" prop="roleId" width="120" />
-      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="显示顺序" prop="roleSort" width="100" />
-      <el-table-column label="状态" align="center" width="100">
-        <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" 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" v-if="scope.row.roleId !== 1">
+        </el-form-item>
+        <el-form-item label="权限字符" prop="roleKey">
+          <el-input
+            v-model="queryParams.roleKey"
+            placeholder="请输入权限字符"
+            clearable
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
+          />
+        </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_normal_disable"
+              :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>
+    </el-card>
+    <el-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
           <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
             size="mini"
-            type="text"
+            @click="handleAdd"
+            v-hasPermi="['system:role:add']"
+          >新增</el-button>
+          <el-button
+            plain
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
             v-hasPermi="['system:role:edit']"
           >修改</el-button>
           <el-button
-            size="mini"
-            type="text"
+            plain
             icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
             v-hasPermi="['system:role:remove']"
           >删除</el-button>
-          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
-            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
-                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
-              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
-                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
+          <el-button
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['system:role:export']"
+          >导出</el-button>
+        </div>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+        <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="角色编号" prop="roleId" />
+          <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" />
+          <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" />
+          <el-table-column label="显示顺序" prop="roleSort" width="100" />
+          <el-table-column label="状态" align="center" width="100">
+            <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" 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" width="180">
+            <template slot-scope="scope" v-if="scope.row.roleId !== 1">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:role:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:role:remove']"
+              >删除</el-button>
+              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
+                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
+                                    v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
+                  <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
+                                    v-hasPermi="['system:role:edit']">分配用户</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>
+    </el-card>
 
     <!-- 添加或修改角色配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -602,4 +595,4 @@ export default {
     }
   }
 };
-</script>
+</script>

src/views/system/tool/gen/index.vue

@@ -1,173 +1,165 @@
 <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>
+    <el-card>
+      <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>
+    </el-card>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          :disabled="multiple"
-          @click="handleGenTable"
-          v-hasPermi="['tool:gen:code']"
-        >生成</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="openCreateTable"
-          v-hasRole="['admin']"
-        >创建</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-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-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-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <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-card class="lrtt">
+      <div class="rt">
+        <div class="operate">
           <el-button
-            type="text"
-            size="small"
-            icon="el-icon-view"
-            @click="handlePreview(scope.row)"
-            v-hasPermi="['tool:gen:preview']"
-          >预览</el-button>
+            type="primary"
+            plain
+            icon="el-icon-download"
+            size="mini"
+            :disabled="multiple"
+            @click="handleGenTable"
+            v-hasPermi="['tool:gen:code']"
+          >生成</el-button>
           <el-button
-            type="text"
-            size="small"
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="openCreateTable"
+            v-hasRole="['admin']"
+          >创建</el-button>
+          <el-button
+            plain
+            icon="el-icon-upload"
+            size="mini"
+            @click="openImportTable"
+            v-hasPermi="['tool:gen:import']"
+          >导入</el-button>
+          <el-button
+            plain
             icon="el-icon-edit"
-            @click="handleEditTable(scope.row)"
+            size="mini"
+            :disabled="single"
+            @click="handleEditTable"
             v-hasPermi="['tool:gen:edit']"
-          >编辑</el-button>
+          >修改</el-button>
           <el-button
-            type="text"
-            size="small"
+            plain
             icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
             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"
+        />
+      </div>
+    </el-card>
+
     <!-- 预览界面 -->
     <el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
       <el-tabs v-model="preview.activeName">

src/views/system/user/authRole.vue

@@ -1,47 +1,51 @@
 <template>
   <div class="app-container">
-    <h4 class="form-header h4">基本信息</h4>
-    <el-form ref="form" :model="form" label-width="80px">
-      <el-row>
-        <el-col :span="8" :offset="2">
-          <el-form-item label="用户昵称" prop="nickName">
-            <el-input v-model="form.nickName" disabled />
+    <el-card class="lrtt">
+      <div class="rt">
+        <h4 class="form-header h4">基本信息</h4>
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-row>
+            <el-col :span="8" :offset="2">
+              <el-form-item label="用户昵称" prop="nickName">
+                <el-input v-model="form.nickName" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8" :offset="2">
+              <el-form-item label="登录账号" prop="userName">
+                <el-input  v-model="form.userName" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+        <h4 class="form-header h4">角色信息</h4>
+        <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
+          <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 type="selection" :reserve-selection="true" width="55"></el-table-column>
+          <el-table-column label="角色编号" align="center" prop="roleId" />
+          <el-table-column label="角色名称" align="center" prop="roleName" />
+          <el-table-column label="权限字符" align="center" prop="roleKey" />
+          <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>
+
+        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
+
+        <el-form label-width="100px">
+          <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
+            <el-button type="primary" @click="submitForm()">确定</el-button>
+            <el-button @click="close()">返回</el-button>
           </el-form-item>
-        </el-col>
-        <el-col :span="8" :offset="2">
-          <el-form-item label="登录账号" prop="userName">
-            <el-input  v-model="form.userName" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-
-    <h4 class="form-header h4">角色信息</h4>
-    <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
-      <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 type="selection" :reserve-selection="true" width="55"></el-table-column>
-      <el-table-column label="角色编号" align="center" prop="roleId" />
-      <el-table-column label="角色名称" align="center" prop="roleName" />
-      <el-table-column label="权限字符" align="center" prop="roleKey" />
-      <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>
-
-    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
-
-    <el-form label-width="100px">
-      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
-        <el-button type="primary" @click="submitForm()">提交</el-button>
-        <el-button @click="close()">返回</el-button>
-      </el-form-item>
-    </el-form>
+        </el-form>
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -114,4 +118,4 @@ export default {
     },
   },
 };
-</script>
+</script>

src/views/system/user/index.vue

@@ -1,141 +1,121 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
-      <!--部门数据-->
-      <el-col :span="4" :xs="24">
-        <div class="head-container">
+    <el-card>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="用户名称" prop="userName">
           <el-input
-            v-model="deptName"
-            placeholder="请输入部门名称"
+            v-model="queryParams.userName"
+            placeholder="请输入用户名称"
             clearable
-            size="small"
-            prefix-icon="el-icon-search"
-            style="margin-bottom: 20px"
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
           />
-        </div>
-        <div class="head-container">
-          <el-tree
-            :data="deptOptions"
-            :props="defaultProps"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            ref="tree"
-            node-key="id"
-            default-expand-all
-            highlight-current
-            @node-click="handleNodeClick"
+        </el-form-item>
+        <el-form-item label="手机号码" prop="phonenumber">
+          <el-input
+            v-model="queryParams.phonenumber"
+            placeholder="请输入手机号码"
+            clearable
+            style="width: 240px"
+            @keyup.enter.native="handleQuery"
           />
+        </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_normal_disable"
+              :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>
+    </el-card>
+    <el-card class="lrtt">
+      <div class="lt">
+        <el-input
+          v-model="deptName"
+          placeholder="请输入部门名称"
+          clearable
+          size="small"
+          prefix-icon="el-icon-search"
+          style="margin-bottom: 20px"
+        />
+        <div class="divide"></div><!--divide 分隔-->
+        <el-tree
+          :data="deptOptions"
+          :props="defaultProps"
+          :expand-on-click-node="false"
+          :filter-node-method="filterNode"
+          ref="tree"
+          node-key="id"
+          default-expand-all
+          highlight-current
+          @node-click="handleNodeClick"
+        />
+      </div><!--lt 左-->
+      <div class="rt">
+        <div class="operate">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['system:user:add']"
+          >新增</el-button>
+          <el-button
+            plain
+            icon="el-icon-edit"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
+            v-hasPermi="['system:user:edit']"
+          >修改</el-button>
+          <el-button
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
+            v-hasPermi="['system:user:remove']"
+          >删除</el-button>
+          <el-button
+            plain
+            icon="el-icon-upload2"
+            size="mini"
+            @click="handleImport"
+            v-hasPermi="['system:user:import']"
+          >导入</el-button>
+          <el-button
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['system:user:export']"
+          >导出</el-button>
         </div>
-      </el-col>
-      <!--用户数据-->
-      <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-          <el-form-item label="用户名称" prop="userName">
-            <el-input
-              v-model="queryParams.userName"
-              placeholder="请输入用户名称"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="手机号码" prop="phonenumber">
-            <el-input
-              v-model="queryParams.phonenumber"
-              placeholder="请输入手机号码"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </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_normal_disable"
-                :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>
-
-        <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:user: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:user: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:user:remove']"
-            >删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="info"
-              plain
-              icon="el-icon-upload2"
-              size="mini"
-              @click="handleImport"
-              v-hasPermi="['system:user:import']"
-            >导入</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:user:export']"
-            >导出</el-button>
-          </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-        </el-row>
-
         <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="50" align="center" />
           <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
@@ -183,9 +163,9 @@
                 <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
-                    v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
+                                    v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
                   <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
-                    v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
+                                    v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
             </template>
@@ -199,8 +179,8 @@
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
-      </el-col>
-    </el-row>
+      </div>
+    </el-card>
 
     <!-- 添加或修改用户配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>

src/views/tool/index.vue

@@ -1,141 +1,100 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
-      <!--部门数据-->
-      <el-col :span="4" :xs="24">
-        <div class="head-container">
-          <el-input
-            v-model="deptName"
-            placeholder="请输入部门名称"
-            clearable
-            size="small"
-            prefix-icon="el-icon-search"
-            style="margin-bottom: 20px"
-          />
-        </div>
-        <div class="head-container">
-          <el-tree
-            :data="deptOptions"
-            :props="defaultProps"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            ref="tree"
-            node-key="id"
-            default-expand-all
-            highlight-current
-            @node-click="handleNodeClick"
-          />
-        </div>
-      </el-col>
-      <!--用户数据-->
-      <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-          <el-form-item label="工具编号" prop="toolCode">
-            <el-input
-              v-model="queryParams.toolCode"
-              placeholder="请输入工具编号"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="工具名称" prop="toolName">
-            <el-input
-              v-model="queryParams.toolName"
-              placeholder="请输入工具名称"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
-          </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_normal_disable"
-                :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>
-
-        <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:user: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:user: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:user: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:user:export']"
-            >导出</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleUseApply"
-              v-hasPermi="['system:user:export']"
-            >使用申请</el-button>
-          </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-        </el-row>
+    <el-card>
+      <el-form label-width="80px">
+        <div class="grab"  id="add">
+          <div class="search">
+            <div class="sl">
+              <el-form-item label="工具编号" prop="toolCode">
+                <el-input
+                  v-model="queryParams.toolCode"
+                  placeholder="请输入工具编号"
+                  clearable
+                  @keyup.enter.native="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item label="工具名称" prop="toolName">
+                <el-input
+                  v-model="queryParams.toolName"
+                  placeholder="请输入工具名称"
+                  clearable
+                  @keyup.enter.native="handleQuery"
+                />
+              </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_normal_disable"
+                    :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>
+            </div>
+            <div class="sr">
+              <el-button type="primary" icon="el-icon-search">搜索</el-button>
+              <el-button icon="el-icon-refresh-left">重置</el-button>
+            </div>
+          </div><!--search 默认查询-->
+        </div><!--grab-->
+      </el-form><!--el-form-->
+    </el-card><!--el-card-->
 
+    <el-card class="lrtt">
+      <div class="lt">
+        <el-input
+          v-model="deptName"
+          placeholder="请输入部门名称"
+          clearable
+          size="small"
+          prefix-icon="el-icon-search"
+          style="margin-bottom: 20px"
+        />
+        <div class="divide"></div><!--divide 分隔-->
+        <el-tree
+          :data="deptOptions"
+          :props="defaultProps"
+          :expand-on-click-node="false"
+          :filter-node-method="filterNode"
+          ref="tree"
+          node-key="id"
+          default-expand-all
+          highlight-current
+          @node-click="handleNodeClick"
+        />
+      </div><!--lt 左-->
+      <div class="rt">
+        <div class="operate">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            @click="handleAdd"
+            v-hasPermi="['system:user:add']"
+          >新增</el-button>
+          <el-button type="primary" icon="el-icon-upload2">上传</el-button>
+          <el-button type="primary" icon="el-icon-position">发布</el-button>
+          <el-button icon="el-icon-thumb" @click="drawer2 = true">申请使用</el-button>
+          <el-button icon="el-icon-delete">批量删除</el-button>
+          <el-button icon="el-icon-download" @click="drawer3 = true">导出</el-button>
+        </div><!--operate 操作按钮-->
         <el-table v-loading="loading" :data="toolList" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="50" align="center" />
           <el-table-column label="工具编号" align="center" key="toolCode" prop="toolCode" v-if="columns[0].visible" />
@@ -163,17 +122,19 @@
           <el-table-column
             label="操作"
             align="center"
-            width="160"
+            width="250"
             class-name="small-padding fixed-width"
           >
-            <template slot-scope="scope" v-if="scope.row.userId !== 1">
+            <template slot-scope="scope">
+              <el-button type="text" icon="el-icon-info" @click="drawer4 = true">详情</el-button>
+              <el-button type="text" icon="el-icon-download">下载</el-button>
               <el-button
                 size="mini"
                 type="text"
                 icon="el-icon-edit"
                 @click="handleUpdate(scope.row)"
                 v-hasPermi="['system:user:edit']"
-              >修改</el-button>
+              >编辑</el-button>
               <el-button
                 size="mini"
                 type="text"
@@ -181,17 +142,9 @@
                 @click="handleDelete(scope.row)"
                 v-hasPermi="['system:user:remove']"
               >删除</el-button>
-              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
-                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="handlePublish" icon="el-icon-key"
-                    v-hasPermi="['system:user:resetPwd']">发布</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
             </template>
           </el-table-column>
         </el-table>
-
         <pagination
           v-show="total>0"
           :total="total"
@@ -199,119 +152,312 @@
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
-      </el-col>
-    </el-row>
+      </div><!--rt 右-->
+    </el-card><!--el-card-->
 
-    <!-- 添加或修改工具信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="60%" :close-on-click-modal="false" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="工具编号" prop="toolCode">
-              <el-input v-model="form.toolCode" placeholder="请输入工具编号"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="工具名称" prop="toolName">
-              <el-input v-model="form.toolName" placeholder="请输入工具名称"/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="负责人" prop="toolPrincipals">
-              <el-input v-model="form.toolPrincipalsName" placeholder="请选择负责人" maxlength="11" @focus="toolPrincipalsChoose = true"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="归属部门" prop="toolRespDept">
-              <treeselect v-model="form.toolRespDept" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
-            </el-form-item>
-          </el-col>
+    <el-drawer :visible.sync="open" size="75%">
+      <template #title>
+        <span>新增工具</span>
+        <div class="drawer-head-btn">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div><!--drawer-head-btn 抽屉顶部按钮区域-->
+      </template>
+      <div class="el-form-border">
+        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="工具编号" prop="toolCode">
+                <el-input v-model="form.toolCode" placeholder="请输入工具编号"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="工具名称" prop="toolName">
+                <el-input v-model="form.toolName" placeholder="请输入工具名称"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="负责人" prop="toolPrincipals">
+                <el-input v-model="form.toolPrincipalsName" placeholder="请选择负责人" maxlength="11" @focus="toolPrincipalsChoose = true"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="归属部门" prop="toolRespDept">
+                <treeselect v-model="form.toolRespDept" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
+              </el-form-item>
+            </el-col>
 
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="工具来源" prop="toolSource">
-              <el-input v-model="form.toolSource" placeholder="请输入工具来源"/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="工具用途" prop="toolUse">
-              <el-input v-model="form.toolUse" placeholder="请输入工具用途" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="工具类别">
-              <el-select v-model="form.toolType" placeholder="请选择工具类别" style="width: 100%">
-                <el-option
-                  v-for="dict in dict.type.tool_type"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="状态">
-              <el-radio-group v-model="form.status">
-                <el-radio
-                  v-for="dict in dict.type.sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.value"
-                >{{dict.label}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="测试情况">
-              <el-input v-model="form.testSituation" type="textarea" placeholder="请输入内容" maxlength="500" show-word-limit></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="功能描述">
-              <el-input v-model="form.functionDesc" type="textarea" placeholder="请输入内容" maxlength="500" show-word-limit></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="适用条件">
-              <el-input v-model="form.applyCondition" type="textarea" placeholder="请输入内容" maxlength="500" show-word-limit></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="操作说明">
-              <el-input v-model="form.operateExplain" type="textarea" placeholder="请输入内容" maxlength="500" show-word-limit></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" maxlength="500" show-word-limit></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="工具来源" prop="toolSource">
+                <el-input v-model="form.toolSource" placeholder="请输入工具来源"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="工具用途" prop="toolUse">
+                <el-input v-model="form.toolUse" placeholder="请输入工具用途" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="工具类别">
+                <el-select v-model="form.toolType" placeholder="请选择工具类别" style="width: 100%">
+                  <el-option
+                    v-for="dict in dict.type.tool_type"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="状态">
+                <el-radio-group v-model="form.status">
+                  <el-radio
+                    v-for="dict in dict.type.sys_normal_disable"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{dict.label}}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="测试情况">
+                <el-input v-model="form.testSituation" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="功能描述">
+                <el-input v-model="form.functionDesc" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="适用条件">
+                <el-input v-model="form.applyCondition" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="操作说明">
+                <el-input v-model="form.operateExplain" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div><!--el-form-border 表单-->
+    </el-drawer><!--el-drawer 新增抽屉-->
 
-    <!-- 转派选人组件 -->
-    <bl-user-selector  ref="peopleSelect" :type="'single'" :isCheck="true" :open="toolPrincipalsChoose" @cancel="toolPrincipalsChoose=false"   @submit="submitPeople"></bl-user-selector>
-  </div>
+    <el-drawer :visible.sync="drawer2" size="75%">
+      <template #title>
+        <span class="title">申请使用</span>
+        <div class="drawer-head-btn">
+          <el-button type="primary">提交</el-button>
+          <el-button>取消</el-button>
+        </div><!--drawer-head-btn 抽屉顶部按钮区域-->
+      </template>
+      <div class="el-form-border">
+        <el-form ref="form" label-width="150px">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="申请人" required>
+                <el-input placeholder="张莹" ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="申请部门" required>信息部</el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="申请理由">
+                <el-input type="textarea" :rows="4" maxlength="1000" show-word-limit></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form><!--el-form-->
+      </div><!--el-form-border 表单-->
+      <div class="divide double"></div><!--divide 分隔-->
+      <div class="tboper">
+        <div class="tit">具体变更内容</div>
+        <div class="boper">
+          <el-button type="primary">添加</el-button>
+        </div>
+      </div><!--tboper 标题与操作按钮-->
+      <el-table :data="tableData2" style="width: 100%">
+        <el-table-column prop="prop1"  label="工具编号"></el-table-column>
+        <el-table-column prop="prop2" label="工具名称"></el-table-column>
+        <el-table-column prop="prop3" label="归属单位" width="180"> </el-table-column>
+        <el-table-column prop="prop4" label="负责人" width="100" ></el-table-column>
+        <el-table-column prop="prop5" label="工具类别"  ></el-table-column>
+        <el-table-column label="操作" width="100">
+          <el-button type="text">删除</el-button>
+        </el-table-column>
+      </el-table><!--el-table-->
+    </el-drawer><!--el-drawer 申请使用-->
+
+    <el-drawer :visible.sync="drawer3" size="75%">
+      <template #title>
+        <span class="title">导出</span>
+        <div class="drawer-head-btn">
+          <el-button type="primary">提交</el-button>
+          <el-button>取消</el-button>
+        </div><!--drawer-head-btn 抽屉顶部按钮区域-->
+      </template>
+      <div class="el-form-border">
+        <el-form ref="form" label-width="200px">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="选择需要导出的字段信息">
+                <el-checkbox-group v-model="checkList1">
+                  <el-checkbox label="A">工具名称</el-checkbox>
+                  <el-checkbox label="B">工具类别</el-checkbox>
+                  <el-checkbox label="C">工具来源</el-checkbox>
+                  <el-checkbox label="D">负责人</el-checkbox>
+                  <el-checkbox label="E">归属单位</el-checkbox>
+                  <el-checkbox label="F">状态</el-checkbox>
+                  <el-checkbox label="G">工具名称</el-checkbox>
+                  <el-checkbox label="H">工具类别</el-checkbox>
+                  <el-checkbox label="I">工具来源</el-checkbox>
+                  <el-checkbox label="J">负责人</el-checkbox>
+                  <el-checkbox label="K">归属单位</el-checkbox>
+                  <el-checkbox label="L">状态</el-checkbox>
+                </el-checkbox-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form><!--el-form-->
+      </div><!--el-form-border 表单-->
+    </el-drawer><!--el-drawer 导出抽屉-->
+
+    <el-drawer :visible.sync="drawer4" size="85%" class="no-padding">
+      <template #title>
+        <span>工具名称</span>
+      </template>
+      <div class="fbox1">
+        <div class="fl">
+          <el-tabs v-model="activeName1"  @tab-click="handleClick">
+            <el-tab-pane label="基本信息" name="first">
+              <div class="el-form-border">
+                <el-form ref="form" label-width="150px">
+                  <el-row>
+                    <el-col :span="12"> <el-form-item label="工具名称">工具名称2</el-form-item> </el-col>
+                    <el-col :span="12"> <el-form-item label="工具类别">网络工具</el-form-item> </el-col>
+                    <el-col :span="12"> <el-form-item label="工具来源">单位自建</el-form-item> </el-col>
+                    <el-col :span="12"> <el-form-item label="负责人">赵宁宇</el-form-item> </el-col>
+                    <el-col :span="12"> <el-form-item label="归属单位">人力资源部/员工关系组</el-form-item> </el-col>
+                    <el-col :span="12"> <el-form-item label="状态"><span class="green">启用中</span></el-form-item> </el-col>
+                    <el-col :span="12"> <el-form-item label="工具用途">主要用于单位网络使用</el-form-item> </el-col>
+                    <el-col :span="12"> <el-form-item label="测评情况">运行良好，可正常使用</el-form-item> </el-col>
+                    <el-col :span="12"> <el-form-item label="功能描述">单位网络使用</el-form-item> </el-col>
+                    <el-col :span="12"> <el-form-item label="适用条件">网络正常</el-form-item> </el-col>
+                    <el-col :span="12"> <el-form-item label="操作说明">正常开启即可用</el-form-item> </el-col>
+                    <el-col :span="12"> <el-form-item label="备注">工具使用完成后，请做好保养工作。</el-form-item> </el-col>
+                  </el-row>
+                </el-form><!--el-form-->
+              </div><!--el-form-border 表单-->
+            </el-tab-pane><!--el-tab-pane-->
+            <el-tab-pane label="文件来源" name="second">
+              <div class="operate">
+                <el-button type="primary">上传</el-button>
+                <el-button>编辑</el-button>
+                <el-button>删除</el-button>
+                <el-button>下载</el-button>
+              </div><!--operate 操作按钮-->
+              <el-table :data="tableData2" style="width: 100%">
+                <el-table-column type="selection" width="50" align="center"> </el-table-column>
+                <el-table-column prop="prop1" label="文档名称"><a>网络信息管理文件.doc</a></el-table-column>
+                <el-table-column prop="prop2" label="文件类别"></el-table-column>
+                <el-table-column prop="prop3" label="文档类型"></el-table-column>
+                <el-table-column prop="prop4" label="归属单位"></el-table-column>
+                <el-table-column prop="prop5" label="更新时间"></el-table-column>
+              </el-table><!--el-table-->
+            </el-tab-pane><!--el-tab-pane-->
+          </el-tabs><!--el-tabs-->
+        </div><!--fl 左侧页签-->
+        <div class="fr">
+          <div class="tboper">
+            <div class="tit">评论</div>
+          </div><!--tboper 标题与操作按钮-->
+          <div class="pltextarea">
+            <el-input type="textarea" placeholder="请输入您的意见" :rows="4" maxlength="1000" show-word-limit></el-input>
+            <div class="plbtn"><el-button>发布</el-button></div>
+          </div><!--pltextarea-->
+          <div class="pllist">
+            <div class="list">
+              <div class="luser"><span class="xuser">张</span></div>
+              <div class="ltext">
+                <div class="nt"><span class="name">张鑫辉</span><span class="time">05/01 12:00</span></div>
+                <div class="te">这个工具可以！</div>
+                <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
+                <div class="pltextarea">
+                  <el-input type="textarea" placeholder="请输入您的意见" :rows="2" maxlength="1000" show-word-limit></el-input>
+                  <div class="plbtn"><el-button>取消</el-button><el-divider direction="vertical"></el-divider><el-button>发布</el-button></div>
+                </div><!--pltextarea-->
+              </div>
+            </div><!--list-->
+            <div class="list">
+              <div class="luser"><span class="xuser">钱</span></div>
+              <div class="ltext">
+                <div class="nt"><span class="name">钱多多</span><span class="time">05/01 12:00</span></div>
+                <div class="te">好用！</div>
+                <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
+                <div class="list">
+                  <div class="luser"><span class="xuser">赵</span></div>
+                  <div class="ltext">
+                    <div class="nt"><span class="name">赵宇</span><span class="time">05/01 12:00</span></div>
+                    <div class="te">希望再选代一下，还有待完善的地方。</div>
+                    <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
+                  </div>
+                </div><!--list-->
+                <div class="list">
+                  <div class="luser"><span class="xuser">李</span></div>
+                  <div class="ltext">
+                    <div class="nt"><span class="name">李志</span><span class="time">05/01 12:00</span></div>
+                    <div class="te">很好的解决了我的问题，感谢！</div>
+                    <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
+                  </div>
+                </div><!--list-->
+              </div>
+            </div><!--list-->
+            <div class="list">
+              <div class="luser"><span class="xuser">赵</span></div>
+              <div class="ltext">
+                <div class="nt"><span class="name">赵宇</span><span class="time">05/01 12:00</span></div>
+                <div class="te">希望再选代一下，还有待完善的地方。</div>
+                <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
+              </div>
+            </div><!--list-->
+            <div class="list">
+              <div class="luser"><span class="xuser">李</span></div>
+              <div class="ltext">
+                <div class="nt"><span class="name">李志</span><span class="time">05/01 12:00</span></div>
+                <div class="te">很好的解决了我的问题，感谢！</div>
+                <div class="hb"><a class="btn"><i class="el-icon-chat-line-round"></i>回复</a></div>
+              </div>
+            </div><!--list-->
+          </div><!--pllist-->
+        </div><!--fl 右侧评论-->
+      </div><!--fbox1 左右分栏-->
+    </el-drawer><!--el-drawer 详情-抽屉-->
+
+  </div><!--app-container-->
 </template>
 
 <script>
@@ -349,8 +495,14 @@ export default {
       // 部门树选项
       deptOptions: undefined,
       toolPrincipalsData: [],
+      tableData2: [],
+      checkList1: [],
       // 是否显示弹出层
       open: false,
+      drawer2: false,
+      drawer3: false,
+      drawer4: false,
+      activeName1: '',
       // 部门名称
       deptName: undefined,
       // 默认密码
@@ -436,6 +588,9 @@ export default {
     });
   },
   methods: {
+    handleClick(){
+
+    },
     submitPeople(peopleList){
       console.log(peopleList);
       this.form.toolPrincipals = peopleList[0]['userId']

src/views/workstuff/apply/index.vue

@@ -0,0 +1,336 @@
+<template>
+  <div class="app-container"><!--从这一层开始嵌入页面-->
+
+    <el-card>
+      <el-form label-width="80px">
+        <div class="search">
+          <div class="sl">
+            <el-form-item label="流程状态">
+              <el-select placeholder="请选择">
+                <el-option label="进行中" value=""></el-option>
+                <el-option label="已办结" value=""></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="创建时间">
+              <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+            </el-form-item>
+          </div>
+          <div class="sr">
+            <el-button type="primary" icon="el-icon-search">搜索</el-button>
+            <el-button icon="el-icon-refresh-left">重置</el-button>
+          </div>
+        </div><!--search 搜索-->
+      </el-form><!--el-form-->
+    </el-card><!--el-card-->
+
+    <el-card>
+      <el-table :data="tableData1" style="width: 100%" height="529">
+        <el-table-column prop="prop1" label="申请类型"></el-table-column>
+        <el-table-column prop="prop2" label="流程状态">
+          <template slot-scope="scope">
+            <span :class="getClassName(scope.row.prop2)">{{ scope.row.prop2 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="prop3" label="当前环节"  width="180"> </el-table-column>
+        <el-table-column prop="prop4" label="当前环节处理人" width="150"></el-table-column>
+        <el-table-column prop="prop5" label="创建时间" width="150"></el-table-column>
+        <el-table-column prop="prop6" label="结束时间"  width="150"></el-table-column>
+        <el-table-column label="操作" width="100" >
+          <el-button type="text" icon="el-icon-info" @click="drawer1 = true">详情</el-button>
+        </el-table-column>
+      </el-table><!--el-table-->
+      <el-pagination  :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
+    </el-card><!--el-card-->
+
+    <el-drawer :visible.sync="drawer1" :direction="direction" :before-close="handleClose" size="75%">
+      <template #title>
+        <span class="title">申请使用</span>
+        <div class="drawer-head-btn">
+          <el-button  @click="drawer2 = true">流程监控</el-button>
+          <el-button type="primary">提交</el-button>
+          <el-button>取消</el-button>
+        </div><!--drawer-head-btn 抽屉顶部按钮区域-->
+      </template>
+      <el-tabs v-model="activeName1"  @tab-click="handleClick">
+        <el-tab-pane label="信息内容" name="first">
+          <div class="el-form-border">
+            <el-form ref="form" label-width="150px">
+              <el-row>
+                <el-col :span="24">
+                  <el-form-item label="申请人">张莹</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="申请部门">信息部</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="申请理由">
+                    <el-input type="textarea"  maxlength="1000" placeholder="工作需要额外申请，请批准！" :disabled="true"></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form><!--el-form-->
+          </div><!--el-form-border 表单-->
+          <div class="divide double"></div><!--divide 分隔-->
+          <div class="tboper">
+            <div class="tit">申请工具</div>
+          </div><!--tboper 标题与操作按钮-->
+          <el-table :data="tableData2" style="width: 100%">
+            <el-table-column prop="prop1"  label="工具编号"></el-table-column>
+            <el-table-column prop="prop2" label="工具名称"></el-table-column>
+            <el-table-column prop="prop3" label="归属单位" width="200"> </el-table-column>
+            <el-table-column prop="prop4" label="负责人" width="100" ></el-table-column>
+            <el-table-column prop="prop5" label="工具类别"  ></el-table-column>
+          </el-table><!--el-table-->
+          <div class="divide double"></div><!--divide 分隔-->
+          <div class="tboper">
+            <div class="tit">审批信息</div>
+          </div><!--tboper 标题与操作按钮-->
+          <div class="el-form-border">
+            <el-form ref="form" label-width="150px">
+              <el-row>
+                <el-col :span="24">
+                  <el-form-item label="审批结论">
+                    <el-radio-group v-model="radio1">
+                      <el-radio label="1">通过</el-radio>
+                      <el-radio label="2" >不通过</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="审批理由">
+                    <el-input type="textarea" rows="4"  maxlength="1000" placeholder="请输入" show-word-limit></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form><!--el-form-->
+          </div><!--el-form-border 表单-->
+        </el-tab-pane><!--el-tab-pane-->
+        <el-tab-pane label="审批记录" name="second">
+          <el-table :data="tableData3" style="width: 100%">
+            <el-table-column prop="prop1"  label="环节"></el-table-column>
+            <el-table-column prop="prop2" label="意见">
+              <template slot-scope="scope">
+                <span :class="getClassName(scope.row.prop2)">{{ scope.row.prop2 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="prop3" label="操作人" width="200"> </el-table-column>
+            <el-table-column prop="prop4" label="操作人部门" width="200" ></el-table-column>
+            <el-table-column prop="prop5" label="操作时间"  ></el-table-column>
+          </el-table><!--el-table-->
+        </el-tab-pane><!--el-tab-pane-->
+      </el-tabs><!--el-tabs-->
+    </el-drawer><!--el-drawer 申请详情-抽屉-->
+
+    <el-drawer :visible.sync="drawer2" :direction="direction" :before-close="handleClose" size="75%">
+      <template #title>
+        <span class="title">流程监控</span>
+      </template>
+      <div class="lctitle">流程标题：【申请使用】工具名称1 ，流程定义名称：申请使用流程</div><!--lctitle-->
+      <el-tabs v-model="activeName2"  @tab-click="handleClick">
+        <el-tab-pane label="文本监控" name="first">
+          <el-table :data="tableData4" style="width: 100%">
+            <el-table-column prop="prop1"  label="接受环节"></el-table-column>
+            <el-table-column prop="prop2" label="接收人"></el-table-column>
+            <el-table-column prop="prop3" label="发送环节"> </el-table-column>
+            <el-table-column prop="prop4" label="发送人"></el-table-column>
+            <el-table-column prop="prop5" label="审批意见" ></el-table-column>
+            <el-table-column prop="prop6" label="开始时间" ></el-table-column>
+            <el-table-column prop="prop7" label="结束时间" ></el-table-column>
+            <el-table-column prop="prop8" label="持续时间" ></el-table-column>
+            <el-table-column prop="prop9" label="任务状态" ></el-table-column>
+          </el-table><!--el-table-->
+        </el-tab-pane><!--el-tab-pane-->
+        <el-tab-pane label="图形监控" name="second">
+          <img style="width:auto; max-width: 100%;" src="images/lcjk1.jpg" />
+        </el-tab-pane><!--el-tab-pane-->
+      </el-tabs><!--el-tabs-->
+    </el-drawer><!--el-drawer 流程监控-抽屉-->
+
+  </div><!--app-container-->
+</template>
+
+<script>
+  export default {
+    name: 'apply',
+    data() {
+      return {
+        drawer1: false,
+        drawer2: false,
+        activeName1: 'first',
+        activeName2: 'second',
+        radio1: '',
+        tableData1: [
+          {
+            prop1: '使用申请',
+            prop2: '进行中',
+            prop3: '直接领导审核',
+            prop4: '赵宇',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '已办结',
+            prop3: '直接领导审核',
+            prop4: '钱多多',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '进行中',
+            prop3: '直接领导审核',
+            prop4: '赵宇',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '已办结',
+            prop3: '直接领导审核',
+            prop4: '钱多多',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '进行中',
+            prop3: '直接领导审核',
+            prop4: '赵宇',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '已办结',
+            prop3: '直接领导审核',
+            prop4: '钱多多',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '进行中',
+            prop3: '直接领导审核',
+            prop4: '赵宇',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '已办结',
+            prop3: '直接领导审核',
+            prop4: '钱多多',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '进行中',
+            prop3: '直接领导审核',
+            prop4: '赵宇',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '已办结',
+            prop3: '直接领导审核',
+            prop4: '钱多多',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          }
+        ],
+        tableData2: [
+          {
+            prop1: '0021',
+            prop2: '工具名称1',
+            prop3: '人力资源部/培训组',
+            prop4: '赵宇',
+            prop5: '网络工具',
+          },
+          {
+            prop1: '0022',
+            prop2: '工具名称2',
+            prop3: '人力资源部/招聘组',
+            prop4: '钱多多',
+            prop5: '网络工具',
+          },
+          {
+            prop1: '0023',
+            prop2: '工具名称3',
+            prop3: '人力资源部/薪资组',
+            prop4: '孙瑶',
+            prop5: '网络工具',
+          }
+        ],
+        tableData3: [
+          {
+            prop1: '总监批准',
+            prop2: '不通过',
+            prop3: '赵宇 ',
+            prop4: '总裁办',
+            prop5: '2024/02/09 12:00',
+          },
+          {
+            prop1: '部门领导审核',
+            prop2: '通过',
+            prop3: '钱多多',
+            prop4: '设备部',
+            prop5: '2024/02/09 12:00',
+          },
+          {
+            prop1: '管理员审核',
+            prop2: '通过',
+            prop3: '孙瑶',
+            prop4: '人力资源部',
+            prop5: '2024/02/09 12:00',
+          }
+        ],
+        tableData4: [
+          {
+            prop1: '部门领导审核',
+            prop2: '张宇',
+            prop3: '管理员审核 ',
+            prop4: '赵定',
+            prop5: '同意',
+            prop6: '2024/02/09 12:00',
+            prop7: '2024/02/09 12:03',
+            prop8: '耗时0天',
+            prop9: '已完成',
+          },
+          {
+            prop1: '管理员审核',
+            prop2: '赵定',
+            prop3: '直接领导审核 ',
+            prop4: '钱多多',
+            prop5: '同意',
+            prop6: '2024/02/09 12:00',
+            prop7: '2024/02/09 12:03',
+            prop8: '耗时0天',
+            prop9: '已完成',
+          }
+        ],
+      }
+    },
+    methods: {
+      getClassName(prop2) {
+        // 根据不同的文本内容返回不同的类名
+        if (prop2 === '进行中') {
+          return 'blue';
+        } else if (prop2 === '已办结') {
+          return 'green';
+        }else if (prop2 === '不通过') {
+          return 'red';
+        } else if (prop2 === '通过') {
+          return 'green';
+        }
+      },
+
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/workstuff/dispose/index.vue

@@ -0,0 +1,545 @@
+<template>
+  <div class="app-container"><!--从这一层开始嵌入页面-->
+
+    <el-card>
+      <el-form label-width="50px">
+        <div class="search">
+          <el-form-item label="关键字">
+            <el-input placeholder="输入流程标题搜索"></el-input>
+          </el-form-item>
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+          <el-button icon="el-icon-refresh-left">重置</el-button>
+        </div><!--search 搜索-->
+      </el-form><!--el-form-->
+    </el-card><!--el-card-->
+
+    <el-card>
+      <el-tabs v-model="activeName3"  @tab-click="handleClick">
+        <el-tab-pane label="待办(4)" name="first">
+          <el-table :data="tableData5" style="width: 100%" height="529">
+            <el-table-column prop="prop1" label="流程类型"></el-table-column>
+            <el-table-column prop="prop2" label="流程标题"><a @click="drawer1 = true">【使用申请】工具名称11</a></el-table-column>
+            <el-table-column prop="prop3" label="当前环节"></el-table-column>
+            <el-table-column prop="prop4" label="上一环节"></el-table-column>
+            <el-table-column prop="prop5" label="上一环节处理人"></el-table-column>
+            <el-table-column prop="prop6" label="发起人"></el-table-column>
+            <el-table-column prop="prop7" label="接收时间"></el-table-column>
+          </el-table><!--el-table-->
+          <el-pagination  :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
+        </el-tab-pane><!--el-tab-pane-->
+        <el-tab-pane label="已办(10)" name="second">
+          <el-table :data="tableData6" style="width: 100%" height="529">
+            <el-table-column prop="prop1" label="流程类型"></el-table-column>
+            <el-table-column prop="prop2" label="流程标题"><a>【使用申请】工具名称1</a></el-table-column>
+            <el-table-column prop="prop3" label="当前环节"></el-table-column>
+            <el-table-column prop="prop4" label="上一环节"></el-table-column>
+            <el-table-column prop="prop5" label="上一环节处理人"></el-table-column>
+            <el-table-column prop="prop6" label="发起人"></el-table-column>
+            <el-table-column prop="prop7" label="接收时间"></el-table-column>
+          </el-table><!--el-table-->
+          <el-pagination  :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
+        </el-tab-pane><!--el-tab-pane-->
+        <el-tab-pane label="办结(10)" name="third">
+          <el-table :data="tableData7" style="width: 100%" height="529">
+            <el-table-column prop="prop1" label="流程类型"></el-table-column>
+            <el-table-column prop="prop2" label="流程标题"><a>【使用申请】工具名称1</a></el-table-column>
+            <el-table-column prop="prop3" label="当前环节"></el-table-column>
+            <el-table-column prop="prop4" label="上一环节"></el-table-column>
+            <el-table-column prop="prop5" label="上一环节处理人"></el-table-column>
+            <el-table-column prop="prop6" label="发起人"></el-table-column>
+            <el-table-column prop="prop7" label="接收时间"></el-table-column>
+          </el-table><!--el-table-->
+          <el-pagination  :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
+        </el-tab-pane><!--el-tab-pane-->
+      </el-tabs><!--el-tabs-->
+    </el-card><!--el-card-->
+
+    <el-drawer :visible.sync="drawer1" :direction="direction" :before-close="handleClose" size="75%">
+      <template #title>
+        <span class="title">申请使用</span>
+        <div class="drawer-head-btn">
+          <el-button  @click="drawer2 = true">流程监控</el-button>
+          <el-button type="primary">提交</el-button>
+          <el-button>取消</el-button>
+        </div><!--drawer-head-btn 抽屉顶部按钮区域-->
+      </template>
+      <el-tabs v-model="activeName1"  @tab-click="handleClick">
+        <el-tab-pane label="信息内容" name="first">
+          <div class="el-form-border">
+            <el-form ref="form" label-width="150px">
+              <el-row>
+                <el-col :span="24">
+                  <el-form-item label="申请人">张莹</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="申请部门">信息部</el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="申请理由">
+                    <el-input type="textarea"  maxlength="1000" placeholder="工作需要额外申请，请批准！" :disabled="true"></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form><!--el-form-->
+          </div><!--el-form-border 表单-->
+          <div class="divide double"></div><!--divide 分隔-->
+          <div class="tboper">
+            <div class="tit">申请工具</div>
+          </div><!--tboper 标题与操作按钮-->
+          <el-table :data="tableData2" style="width: 100%">
+            <el-table-column prop="prop1"  label="工具编号"></el-table-column>
+            <el-table-column prop="prop2" label="工具名称"></el-table-column>
+            <el-table-column prop="prop3" label="归属单位" width="200"> </el-table-column>
+            <el-table-column prop="prop4" label="负责人" width="100" ></el-table-column>
+            <el-table-column prop="prop5" label="工具类别"  ></el-table-column>
+          </el-table><!--el-table-->
+          <div class="divide double"></div><!--divide 分隔-->
+          <div class="tboper">
+            <div class="tit">审批信息</div>
+          </div><!--tboper 标题与操作按钮-->
+          <div class="el-form-border">
+            <el-form ref="form" label-width="150px">
+              <el-row>
+                <el-col :span="24">
+                  <el-form-item label="审批结论">
+                    <el-radio-group v-model="radio1">
+                      <el-radio label="1">通过</el-radio>
+                      <el-radio label="2" >不通过</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="审批理由">
+                    <el-input type="textarea" rows="4"  maxlength="1000" placeholder="请输入" show-word-limit></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form><!--el-form-->
+          </div><!--el-form-border 表单-->
+        </el-tab-pane><!--el-tab-pane-->
+        <el-tab-pane label="审批记录" name="second">
+          <el-table :data="tableData3" style="width: 100%">
+            <el-table-column prop="prop1"  label="环节"></el-table-column>
+            <el-table-column prop="prop2" label="意见">
+              <template slot-scope="scope">
+                <span :class="getClassName(scope.row.prop2)">{{ scope.row.prop2 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="prop3" label="操作人" width="200"> </el-table-column>
+            <el-table-column prop="prop4" label="操作人部门" width="200" ></el-table-column>
+            <el-table-column prop="prop5" label="操作时间"  ></el-table-column>
+          </el-table><!--el-table-->
+        </el-tab-pane><!--el-tab-pane-->
+      </el-tabs><!--el-tabs-->
+    </el-drawer><!--el-drawer 申请详情-抽屉-->
+
+    <el-drawer :visible.sync="drawer2" :direction="direction" :before-close="handleClose" size="75%">
+      <template #title>
+        <span class="title">流程监控</span>
+      </template>
+      <div class="lctitle">流程标题：【申请使用】工具名称1 ，流程定义名称：申请使用流程</div><!--lctitle-->
+      <el-tabs v-model="activeName2"  @tab-click="handleClick">
+        <el-tab-pane label="文本监控" name="first">
+          <el-table :data="tableData4" style="width: 100%">
+            <el-table-column prop="prop1"  label="接受环节"></el-table-column>
+            <el-table-column prop="prop2" label="接收人"></el-table-column>
+            <el-table-column prop="prop3" label="发送环节"> </el-table-column>
+            <el-table-column prop="prop4" label="发送人"></el-table-column>
+            <el-table-column prop="prop5" label="审批意见" ></el-table-column>
+            <el-table-column prop="prop6" label="开始时间" ></el-table-column>
+            <el-table-column prop="prop7" label="结束时间" ></el-table-column>
+            <el-table-column prop="prop8" label="持续时间" ></el-table-column>
+            <el-table-column prop="prop9" label="任务状态" ></el-table-column>
+          </el-table><!--el-table-->
+        </el-tab-pane><!--el-tab-pane-->
+        <el-tab-pane label="图形监控" name="second">
+          <img style="width:auto; max-width: 100%;" src="images/lcjk1.jpg" />
+        </el-tab-pane><!--el-tab-pane-->
+      </el-tabs><!--el-tabs-->
+    </el-drawer><!--el-drawer 流程监控-抽屉-->
+  </div><!--app-container-->
+</template>
+
+<script>
+  export default {
+    name: 'dispose',
+    data() {
+      return {
+        drawer1: false,
+        drawer2: false,
+        activeName1: 'first',
+        activeName2: 'second',
+        activeName3: 'first',
+        radio1: '',
+        tableData1: [
+          {
+            prop1: '使用申请',
+            prop2: '进行中',
+            prop3: '直接领导审核',
+            prop4: '赵宇',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '已办结',
+            prop3: '直接领导审核',
+            prop4: '钱多多',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '进行中',
+            prop3: '直接领导审核',
+            prop4: '赵宇',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '已办结',
+            prop3: '直接领导审核',
+            prop4: '钱多多',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '进行中',
+            prop3: '直接领导审核',
+            prop4: '赵宇',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '已办结',
+            prop3: '直接领导审核',
+            prop4: '钱多多',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '进行中',
+            prop3: '直接领导审核',
+            prop4: '赵宇',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '已办结',
+            prop3: '直接领导审核',
+            prop4: '钱多多',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '进行中',
+            prop3: '直接领导审核',
+            prop4: '赵宇',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop2: '已办结',
+            prop3: '直接领导审核',
+            prop4: '钱多多',
+            prop5: '2024/02/09 12:00',
+            prop6: '2024/02/09 12:00',
+          }
+        ],
+        tableData2: [
+          {
+            prop1: '0021',
+            prop2: '工具名称1',
+            prop3: '人力资源部/培训组',
+            prop4: '赵宇',
+            prop5: '网络工具',
+          },
+          {
+            prop1: '0022',
+            prop2: '工具名称2',
+            prop3: '人力资源部/招聘组',
+            prop4: '钱多多',
+            prop5: '网络工具',
+          },
+          {
+            prop1: '0023',
+            prop2: '工具名称3',
+            prop3: '人力资源部/薪资组',
+            prop4: '孙瑶',
+            prop5: '网络工具',
+          }
+        ],
+        tableData3: [
+          {
+            prop1: '总监批准',
+            prop2: '不通过',
+            prop3: '赵宇 ',
+            prop4: '总裁办',
+            prop5: '2024/02/09 12:00',
+          },
+          {
+            prop1: '部门领导审核',
+            prop2: '通过',
+            prop3: '钱多多',
+            prop4: '设备部',
+            prop5: '2024/02/09 12:00',
+          },
+          {
+            prop1: '管理员审核',
+            prop2: '通过',
+            prop3: '孙瑶',
+            prop4: '人力资源部',
+            prop5: '2024/02/09 12:00',
+          }
+        ],
+        tableData4: [
+          {
+            prop1: '部门领导审核',
+            prop2: '张宇',
+            prop3: '管理员审核 ',
+            prop4: '赵定',
+            prop5: '同意',
+            prop6: '2024/02/09 12:00',
+            prop7: '2024/02/09 12:03',
+            prop8: '耗时0天',
+            prop9: '已完成',
+          },
+          {
+            prop1: '管理员审核',
+            prop2: '赵定',
+            prop3: '直接领导审核 ',
+            prop4: '钱多多',
+            prop5: '同意',
+            prop6: '2024/02/09 12:00',
+            prop7: '2024/02/09 12:03',
+            prop8: '耗时0天',
+            prop9: '已完成',
+          }
+        ],
+        tableData5: [
+          {
+            prop1: '使用申请',
+            prop3: '部门经理审核',
+            prop4: '直接领导审核',
+            prop5: '张鑫辉',
+            prop6: '张慧玉',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '管理员审核',
+            prop4: '总监审核',
+            prop5: '柳青',
+            prop6: '刘青',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '总经理审核',
+            prop4: '直接领导审核',
+            prop5: '张庆幸',
+            prop6: '王慧',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '总监审核',
+            prop4: '部门经理审核',
+            prop5: '刘宁',
+            prop6: '赵媛',
+            prop7: '2022/10/10  12:00',
+          }
+        ],
+        tableData6: [
+          {
+            prop1: '使用申请',
+            prop3: '部门经理审核',
+            prop4: '直接领导审核',
+            prop5: '张鑫辉',
+            prop6: '张慧玉',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '管理员审核',
+            prop4: '总监审核',
+            prop5: '柳青',
+            prop6: '刘青',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '总经理审核',
+            prop4: '直接领导审核',
+            prop5: '张庆幸',
+            prop6: '王慧',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '总监审核',
+            prop4: '部门经理审核',
+            prop5: '刘宁',
+            prop6: '赵媛',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '部门经理审核',
+            prop4: '直接领导审核',
+            prop5: '张鑫辉',
+            prop6: '张慧玉',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '管理员审核',
+            prop4: '总监审核',
+            prop5: '柳青',
+            prop6: '刘青',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '总经理审核',
+            prop4: '直接领导审核',
+            prop5: '张庆幸',
+            prop6: '王慧',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '总监审核',
+            prop4: '部门经理审核',
+            prop5: '刘宁',
+            prop6: '赵媛',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '部门经理审核',
+            prop4: '直接领导审核',
+            prop5: '张鑫辉',
+            prop6: '张慧玉',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '管理员审核',
+            prop4: '总监审核',
+            prop5: '柳青',
+            prop6: '刘青',
+            prop7: '2022/10/10  12:00',
+          },
+        ],
+        tableData7: [
+          {
+            prop1: '使用申请',
+            prop3: '部门经理审核',
+            prop4: '直接领导审核',
+            prop5: '张鑫辉',
+            prop6: '张慧玉',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '管理员审核',
+            prop4: '总监审核',
+            prop5: '柳青',
+            prop6: '刘青',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '总经理审核',
+            prop4: '直接领导审核',
+            prop5: '张庆幸',
+            prop6: '王慧',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '总监审核',
+            prop4: '部门经理审核',
+            prop5: '刘宁',
+            prop6: '赵媛',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '部门经理审核',
+            prop4: '直接领导审核',
+            prop5: '张鑫辉',
+            prop6: '张慧玉',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '管理员审核',
+            prop4: '总监审核',
+            prop5: '柳青',
+            prop6: '刘青',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '总经理审核',
+            prop4: '直接领导审核',
+            prop5: '张庆幸',
+            prop6: '王慧',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '总监审核',
+            prop4: '部门经理审核',
+            prop5: '刘宁',
+            prop6: '赵媛',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '部门经理审核',
+            prop4: '直接领导审核',
+            prop5: '张鑫辉',
+            prop6: '张慧玉',
+            prop7: '2022/10/10  12:00',
+          },
+          {
+            prop1: '使用申请',
+            prop3: '管理员审核',
+            prop4: '总监审核',
+            prop5: '柳青',
+            prop6: '刘青',
+            prop7: '2022/10/10  12:00',
+          },
+        ],
+      }
+    },
+    methods: {
+      getClassName(prop2) {
+        // 根据不同的文本内容返回不同的类名
+        if (prop2 === '进行中') {
+          return 'blue';
+        } else if (prop2 === '已办结') {
+          return 'green';
+        }else if (prop2 === '不通过') {
+          return 'red';
+        } else if (prop2 === '通过') {
+          return 'green';
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/workstuff/message/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="app-container"><!--从这一层开始嵌入页面-->
+
+    <el-card>
+      <el-form label-width="50px">
+        <div class="search">
+          <el-form-item label="关键字">
+            <el-input placeholder="请输入关键字"></el-input>
+          </el-form-item>
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+          <el-button icon="el-icon-refresh-left">重置</el-button>
+        </div><!--search 搜索-->
+      </el-form><!--el-form-->
+    </el-card><!--el-card-->
+
+    <el-card>
+      <div class="operate">
+        <el-button type="primary" icon="el-icon-check">全部标记已读</el-button>
+      </div><!--operate 操作按钮-->
+      <el-table :data="tableData" style="width: 100%" height="529">
+        <el-table-column prop="prop1" label="消息内容"></el-table-column>
+        <el-table-column prop="prop2" label="接收时间"></el-table-column>
+        <el-table-column prop="prop3" label="消息状态">
+          <template slot-scope="scope">
+            <span :class="getClassName(scope.row.prop3)">{{ scope.row.prop3 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" >
+          <el-button type="text" icon="el-icon-check">标记已读</el-button>
+        </el-table-column>
+      </el-table><!--el-table-->
+      <el-pagination  :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"></el-pagination>
+    </el-card><!--el-card-->
+
+  </div><!--app-container-->
+</template>
+
+<script>
+  export default {
+    name: 'message',
+    data() {
+      return {
+        tableData: [
+          {
+            prop1: '网络资源信息名称1 已过期',
+            prop2: '2024/02/09 12:00',
+            prop3: '未读',
+          },
+          {
+            prop1: '网络资源信息名称2 已过期',
+            prop2: '2024/02/09 12:00',
+            prop3: '已读',
+          },
+          {
+            prop1: '网络资源信息名称3 已过期',
+            prop2: '2024/02/09 12:00',
+            prop3: '未读',
+          },
+          {
+            prop1: '网络资源信息名称4 已过期',
+            prop2: '2024/02/09 12:00',
+            prop3: '已读',
+          },
+          {
+            prop1: '网络资源信息名称5 已过期',
+            prop2: '2024/02/09 12:00',
+            prop3: '未读',
+          }
+        ],
+      }
+    },
+    methods: {
+      getClassName(prop3) {
+        // 根据不同的文本内容返回不同的类名
+        if (prop3 === '已读') {
+          return 'green';
+        } else if (prop3 === '未读') {
+          return 'red';
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>