对树形表格的多选做了简单处理

src/api/system/dept.js

@@ -31,4 +31,12 @@ export function edit(data) {
   })
 }
 
-export default { add, edit, del, getDepts }
+export function delAll(ids) {
+  return request({
+    url: 'api/dept/',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export default { add, edit, del, getDepts, delAll }

src/api/system/job.js

@@ -36,4 +36,12 @@ export function edit(data) {
   })
 }
 
-export default { add, edit, del }
+export function delAll(ids) {
+  return request({
+    url: 'api/job/',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export default { add, edit, del, delAll }

src/api/system/menu.js

@@ -37,4 +37,12 @@ export function edit(data) {
   })
 }
 
-export default { add, edit, del, getMenusTree }
+export function delAll(ids) {
+  return request({
+    url: 'api/menus/',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export default { add, edit, del, getMenusTree, delAll }

src/api/system/role.js

@@ -53,4 +53,12 @@ export function editMenu(data) {
   })
 }
 
-export default { add, edit, del, get, editMenu }
+export function delAll(ids) {
+  return request({
+    url: 'api/roles/',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export default { add, edit, del, get, editMenu, delAll }

src/api/system/user.js

@@ -56,5 +56,13 @@ export function updateEmail(form) {
   })
 }
 
-export default { add, edit, del }
+export function delAll(ids) {
+  return request({
+    url: 'api/users/',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export default { add, edit, del, delAll }
 

src/assets/styles/index.scss

@@ -122,7 +122,7 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 20px 20px 45px 20px;
 }
 
 .components-container {

src/components/Crud/CRUD.operation.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="crud-opts">
     <span class="crud-opts-left">
+      <!--左侧插槽-->
+      <slot name="left" />
       <el-button
+        v-if="crud.optShow.add"
         v-permission="permission.add"
         class="filter-item"
         size="mini"
@@ -12,6 +15,7 @@
         新增
       </el-button>
       <el-button
+        v-if="crud.optShow.edit"
         v-permission="permission.edit"
         class="filter-item"
         size="mini"
@@ -23,18 +27,21 @@
         修改
       </el-button>
       <el-button
+        v-if="crud.optShow.del"
         slot="reference"
         v-permission="permission.del"
         class="filter-item"
         type="danger"
         icon="el-icon-delete"
         size="mini"
+        :loading="crud.delAllLoading"
         :disabled="crud.selections.length === 0"
         @click="toDelete(crud.selections)"
       >
         删除
       </el-button>
       <el-button
+        v-if="crud.optShow.download"
         :loading="crud.downloadLoading"
         class="filter-item"
         size="mini"
@@ -42,6 +49,8 @@
         icon="el-icon-download"
         @click="crud.doExport"
       >导出</el-button>
+      <!--右侧-->
+      <slot name="right" />
     </span>
     <el-button-group class="crud-opts-right">
       <el-button
@@ -97,7 +106,7 @@ export default {
   props: {
     permission: {
       type: Object,
-      required: true
+      default: null
     }
   },
   data() {
@@ -116,6 +125,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        this.crud.delAllLoading = true
         if (datas.length === 1) {
           this.crud.doDelete(datas[0])
         } else {

src/components/Crud/UD.operation.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <el-button v-permission="permission.edit" size="mini" type="primary" icon="el-icon-edit" @click="crud.toEdit(data)" />
+    <el-button v-permission="permission.edit" :disabled="disabledEdit" size="mini" type="primary" icon="el-icon-edit" @click="crud.toEdit(data)" />
     <el-popover v-model="pop" v-permission="permission.del" placement="top" width="180" trigger="manual" @show="onPopoverShow" @hide="onPopoverHide">
-      <p>确定删除本条数据吗？</p>
+      <p>{{ msg }}</p>
       <div style="text-align: right; margin: 0">
         <el-button size="mini" type="text" @click="doCancel">取消</el-button>
         <el-button :loading="crud.dataStatus[data.id].delete === 2" type="primary" size="mini" @click="crud.doDelete(data)">确定</el-button>
       </div>
-      <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" @click="toDelete" />
+      <el-button slot="reference" :disabled="disabledDle" type="danger" icon="el-icon-delete" size="mini" @click="toDelete" />
     </el-popover>
   </div>
 </template>
@@ -23,6 +23,18 @@ export default {
     permission: {
       type: Object,
       required: true
+    },
+    disabledEdit: {
+      type: Boolean,
+      default: false
+    },
+    disabledDle: {
+      type: Boolean,
+      default: false
+    },
+    msg: {
+      type: String,
+      default: '确定删除本条数据吗？'
     }
   },
   data() {

src/components/Crud/crud.js

@@ -38,6 +38,13 @@ function CRUD(options) {
       edit: (form) => {},
       get: (id) => {}
     },
+    // 主页操作栏显示哪些按钮
+    optShow: {
+      add: true,
+      edit: true,
+      del: true,
+      download: true
+    },
     // 自定义一些扩展属性
     props: {},
     // 在主页准备
@@ -86,7 +93,9 @@ function CRUD(options) {
     // 整体loading
     loading: true,
     // 导出的 Loading
-    downloadLoading: false
+    downloadLoading: false,
+    // 删除的 Loading
+    delAllLoading: false
   }
   const methods = {
     /**
@@ -150,10 +159,10 @@ function CRUD(options) {
      * @param {*} data 数据项
      */
     toEdit(data) {
+      crud.resetForm(JSON.parse(JSON.stringify(data)))
       if (!(callVmHook(crud, CRUD.HOOK.beforeToEdit, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
         return
       }
-      crud.resetForm(JSON.parse(JSON.stringify(data)))
       crud.status.edit = CRUD.STATUS.PREPARED
       crud.getDataStatus(data.id).edit = CRUD.STATUS.PREPARED
       callVmHook(crud, CRUD.HOOK.afterToEdit, crud.form)
@@ -280,10 +289,35 @@ function CRUD(options) {
         crud.delSuccessNotify()
         callVmHook(crud, CRUD.HOOK.afterDelete, data)
         crud.refresh()
+        crud.delAllLoading = false
       }).catch(() => {
+        crud.delAllLoading = false
         dataStatus.delete = CRUD.STATUS.PREPARED
       })
     },
+    /**
+     * 删除多条记录
+     * @param datas
+     * @returns {Promise<T>}
+     */
+    doDeletes(datas) {
+      const ids = []
+      datas.forEach(val => {
+        ids.push(val.id)
+      })
+      if (!callVmHook(crud, CRUD.HOOK.beforeDelete, data)) {
+        return
+      }
+      return crud.crudMethod.delAll(ids).then(() => {
+        crud.dleChangePage(1)
+        crud.delSuccessNotify()
+        callVmHook(crud, CRUD.HOOK.afterDelete, data)
+        crud.delAllLoading = false
+        crud.refresh()
+      }).catch(() => {
+        crud.delAllLoading = false
+      })
+    },
     /**
      * 通用导出
      */
@@ -384,6 +418,56 @@ function CRUD(options) {
     getDataStatus(id) {
       return crud.dataStatus[id]
     },
+    /**
+     * 用于树形表格多选, 选中所有
+     * @param selection
+     */
+    selectAllChange(selection) {
+      // 如果选中的数目与请求到的数目相同就选中子节点，否则就清空选中
+      if (selection && selection.length === crud.data.length) {
+        selection.forEach(val => {
+          crud.selectChange(selection, val)
+        })
+      } else {
+        crud.findVM('presenter').$refs['table'].clearSelection()
+      }
+    },
+    /**
+     * 用于树形表格多选，单选的封装
+     * @param selection
+     * @param row
+     */
+    selectChange(selection, row) {
+      // 如果selection中存在row代表是选中，否则是取消选中
+      if (selection.find(val => { return val.id === row.id })) {
+        if (row.children) {
+          row.children.forEach(val => {
+            crud.findVM('presenter').$refs['table'].toggleRowSelection(val, true)
+            selection.push(val)
+            if (val.children) {
+              crud.selectChange(selection, val)
+            }
+          })
+        }
+      } else {
+        crud.toggleRowSelection(selection, row)
+      }
+    },
+    /**
+     * 切换选中状态
+     * @param selection
+     * @param data
+     */
+    toggleRowSelection(selection, data) {
+      if (data.children) {
+        data.children.forEach(val => {
+          crud.findVM('presenter').$refs['table'].toggleRowSelection(val, false)
+          if (val.children) {
+            crud.toggleRowSelection(selection, val)
+          }
+        })
+      }
+    },
     findVM(type) {
       return crud.vms.find(vm => vm && vm.type === type).vm
     },

src/store/modules/app.js

@@ -6,7 +6,7 @@ const state = {
     withoutAnimation: false
   },
   device: 'desktop',
-  size: Cookies.get('size') || 'medium'
+  size: Cookies.get('size') || 'small'
 }
 
 const mutations = {

src/views/mnt/app/index.vue

@@ -36,7 +36,7 @@
       >复制新增</el-button>
     </div>
     <!--表单组件-->
-    <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="800px">
+    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="800px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
         <el-form-item label="应用名称" prop="name">
           <el-input v-model="form.name" style="width: 670px" placeholder="部署后的文件或者目录名称，用于备份" />

src/views/mnt/database/execute.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" title="执行脚本" width="400px">
+  <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" title="执行脚本" width="400px">
     <el-form ref="form" :rules="rules" size="small">
       <el-upload
         :action="databaseUploadApi"

src/views/mnt/database/index.vue

@@ -27,7 +27,7 @@
     </div>
     <!--表单组件-->
     <eForm ref="execute" :database-info="currentRow" />
-    <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="530px">
+    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="530px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
         <el-form-item label="数据库名称" prop="name">
           <el-input v-model="form.name" style="width: 370px" />

src/views/mnt/deploy/deploy.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" title="应用部署" width="400px">
+  <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" title="应用部署" width="400px">
     <el-form ref="form" :model="form" :rules="rules" size="small">
       <el-upload
         :action="deployUploadApi"

src/views/mnt/deploy/index.vue

@@ -73,7 +73,7 @@
       </el-button>
     </div>
     <!--表单组件-->
-    <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="500px">
+    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="500px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="应用" prop="app.id">
           <el-select v-model.number="form.app.id" placeholder="请选择" style="width: 370px">

src/views/mnt/deploy/sysRestore.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" title="系统还原" width="800px">
+  <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" title="系统还原" width="800px">
     <!--工具栏-->
     <div class="head-container">
       <el-date-picker

src/views/mnt/server/index.vue

@@ -28,7 +28,7 @@
       </el-button>
     </div>
     <!--表单组件-->
-    <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="470px">
+    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="dialog" :title="getFormTitle()" width="470px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="55px">
         <el-form-item label="名称" prop="name">
           <el-input v-model="form.name" style="width: 370px" />

src/views/monitor/log/search.vue

@@ -43,7 +43,7 @@
       size="mini"
       class="filter-item"
       icon="el-icon-delete"
-    >清空数据</el-button>
+    >清空</el-button>
     <el-popover ref="del_all" placement="top" width="200" trigger="click">
       <p>确定删除所有数据吗？</p>
       <div style="text-align: right; margin: 0">

src/views/monitor/online/index.vue

@@ -1,32 +1,40 @@
 <template>
   <div class="app-container">
     <div class="head-container">
-      <el-input v-model="query.filter" clearable size="small" placeholder="全表模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+      <div v-if="crud.props.searchToggle">
-      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
+        <el-input v-model="query.filter" clearable size="small" placeholder="全表模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-      <!-- 导出 -->
+        <rrOperation :crud="crud" />
-      <el-button
+      </div>
-        :loading="downloadLoading"
+      <crudOperation>
-        size="mini"
+        <el-button
-        class="filter-item"
+          slot="left"
-        type="warning"
+          class="filter-item"
-        icon="el-icon-download"
+          type="danger"
-        @click="downloadMethod"
+          icon="el-icon-delete"
-      >导出</el-button>
+          size="mini"
+          :loading="crud.delAllLoading"
+          :disabled="crud.selections.length === 0"
+          @click="crud.toDelete(crud.selections)"
+        >
+          强退
+        </el-button>
+      </crudOperation>
     </div>
     <!--表格渲染-->
-    <el-table v-loading="loading" :data="data" style="width: 100%;">
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
-      <el-table-column prop="userName" label="用户名" />
+      <el-table-column type="selection" width="55" />
-      <el-table-column prop="nickName" label="用户昵称" />
+      <el-table-column v-if="columns.visible('userName')" prop="userName" label="用户名" />
-      <el-table-column prop="job" label="岗位" />
+      <el-table-column v-if="columns.visible('nickName')" prop="nickName" label="用户昵称" />
-      <el-table-column prop="ip" label="登录IP" />
+      <el-table-column v-if="columns.visible('job')" prop="job" label="岗位" />
-      <el-table-column :show-overflow-tooltip="true" prop="address" label="登录地点" />
+      <el-table-column v-if="columns.visible('ip')" prop="ip" label="登录IP" />
-      <el-table-column prop="browser" label="浏览器" />
+      <el-table-column v-if="columns.visible('address')" :show-overflow-tooltip="true" prop="address" label="登录地点" />
-      <el-table-column prop="loginTime" label="登录时间">
+      <el-table-column v-if="columns.visible('browser')" prop="browser" label="浏览器" />
+      <el-table-column v-if="columns.visible('loginTime')" prop="loginTime" label="登录时间">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.loginTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" label="操作" width="100px" fixed="right">
+      <el-table-column label="操作" width="100px" fixed="right">
         <template slot-scope="scope">
           <el-popover
             :ref="scope.$index"
@@ -34,44 +42,47 @@
             placement="top"
             width="180"
           >
-            <p>确定踢出该用户吗？</p>
+            <p>确定强制退出该用户吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">取消</el-button>
               <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.key, scope.$index)">确定</el-button>
             </div>
-            <el-button slot="reference" size="mini" type="text">踢出</el-button>
+            <el-button slot="reference" size="mini" type="text">强退</el-button>
           </el-popover>
         </template>
       </el-table-column>
     </el-table>
     <!--分页组件-->
-    <el-pagination
+    <pagination />
-      :total="total"
-      :current-page="page + 1"
-      style="margin-top: 8px;"
-      layout="total, prev, pager, next, sizes"
-      @size-change="sizeChange"
-      @current-change="pageChange"
-    />
   </div>
 </template>
 
 <script>
-import crud from '@/mixins/crud'
 import { del } from '@/api/monitor/online'
+import CRUD, { presenter, header, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+
+// crud交由presenter持有
+const defaultCrud = CRUD({ url: 'auth/online', title: '在线用户' })
 export default {
   name: 'OnlineUser',
-  mixins: [crud],
+  components: { pagination, crudOperation, rrOperation },
+  mixins: [presenter(defaultCrud), header(), crud()],
   data() {
     return {
-      title: '在线用户',
+      delLoading: false,
-      crudMethod: { del }
+      permission: {}
     }
   },
   created() {
-    this.$nextTick(() => {
+    this.crud.optShow = {
-      this.init()
+      add: false,
-    })
+      edit: false,
+      del: false,
+      download: true
+    }
   },
   methods: {
     // 获取数据前设置好接口地址
@@ -82,12 +93,12 @@ export default {
     // 踢出用户
     delMethod(key, index) {
       this.delLoading = true
-      this.crudMethod.del(key).then(() => {
+      del(key).then(() => {
         this.delLoading = false
         this.$refs[index].doClose()
         this.dleChangePage()
         this.notify('踢出成功', 'success')
-        this.init()
+        this.crud.toQuery()
       }).catch(() => {
         this.delLoading = false
         this.$refs[index].doClose()

src/views/monitor/server/index.vue

@@ -26,7 +26,7 @@
       </el-button>
     </div>
     <!--表单组件-->
-    <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
       <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="名称" prop="name">
           <el-input v-model="form.name" style="width: 370px;" />

src/views/system/dept/index.vue

@@ -24,7 +24,7 @@
       <crudOperation :permission="permission" />
     </div>
     <!--表单组件-->
-    <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="名称" prop="name">
           <el-input v-model="form.name" style="width: 370px;" />
@@ -42,7 +42,8 @@
       </div>
     </el-dialog>
     <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" default-expand-all :data="crud.data" row-key="id" @selection-change="crud.selectionChangeHandler">
+    <el-table ref="table" v-loading="crud.loading" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" default-expand-all :data="crud.data" row-key="id" @select="crud.selectChange" @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler">
+      <el-table-column type="selection" width="55" />
       <el-table-column v-if="columns.visible('name')" label="名称" prop="name" />
       <el-table-column v-if="columns.visible('enabled')" label="状态" align="center" prop="enabled">
         <template slot-scope="scope">
@@ -65,6 +66,8 @@
           <udOperation
             :data="scope.row"
             :permission="permission"
+            :disabled-dle="scope.row.id === 1"
+            msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
           />
         </template>
       </el-table-column>

src/views/system/dict/dictDetail.vue

@@ -11,7 +11,7 @@
         <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
       </div>
       <!--表单组件-->
-      <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
+      <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
         <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
           <el-form-item label="字典标签" prop="label">
             <el-input v-model="form.label" style="width: 370px;" />

src/views/system/dict/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <!--表单组件-->
-    <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="字典名称" prop="name">
           <el-input v-model="form.name" style="width: 370px;" />
@@ -48,7 +48,7 @@
             >导出</el-button>
           </div>
           <!--表格渲染-->
-          <el-table v-loading="loading" :data="data" size="small" highlight-current-row style="width: 100%;" @current-change="handleCurrentChange">
+          <el-table v-loading="loading" :data="data" highlight-current-row style="width: 100%;" @current-change="handleCurrentChange">
             <el-table-column :show-overflow-tooltip="true" prop="name" label="名称" />
             <el-table-column :show-overflow-tooltip="true" prop="remark" label="描述" />
             <el-table-column v-if="checkPermission(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">

src/views/system/job/index.vue

@@ -6,7 +6,7 @@
       <crudOperation :permission="permission" />
     </div>
     <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
       <el-table-column type="selection" width="55" />
       <el-table-column v-if="columns.visible('name')" prop="name" label="名称" />
       <el-table-column v-if="columns.visible('dept')" prop="dept" label="所属部门">

src/views/system/job/module/form.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    :append-to-body="true"
+    append-to-body
     :close-on-click-modal="false"
     :before-close="crud.cancelCU"
     :visible="crud.status.cu > 0"

src/views/system/menu/index.vue

@@ -2,40 +2,26 @@
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <!-- 搜索 -->
+      <div v-if="crud.props.searchToggle">
-      <el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+        <!-- 搜索 -->
-      <el-date-picker
+        <el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
-        v-model="query.createTime"
+        <el-date-picker
-        :default-time="['00:00:00','23:59:59']"
+          v-model="query.createTime"
-        type="daterange"
+          :default-time="['00:00:00','23:59:59']"
-        range-separator=":"
+          type="daterange"
-        size="small"
+          range-separator=":"
-        class="date-item"
+          size="small"
-        value-format="yyyy-MM-dd HH:mm:ss"
+          class="date-item"
-        start-placeholder="开始日期"
+          value-format="yyyy-MM-dd HH:mm:ss"
-        end-placeholder="结束日期"
+          start-placeholder="开始日期"
-      />
+          end-placeholder="结束日期"
-      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
+        />
-      <!-- 新增 -->
+        <rrOperation :crud="crud" />
-      <el-button
+      </div>
-        class="filter-item"
+      <crudOperation :permission="permission" />
-        size="mini"
-        type="primary"
-        icon="el-icon-plus"
-        @click="showAddFormDialog"
-      >新增</el-button>
-      <!-- 导出 -->
-      <el-button
-        :loading="downloadLoading"
-        size="mini"
-        class="filter-item"
-        type="warning"
-        icon="el-icon-download"
-        @click="downloadMethod"
-      >导出</el-button>
     </div>
     <!--表单渲染-->
-    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="getFormTitle()" append-to-body width="580px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
       <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="菜单类型" prop="type">
           <el-radio-group v-model="form.type" size="mini" style="width: 178px">
@@ -102,66 +88,57 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
+        <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
       </div>
     </el-dialog>
     <!--表格渲染-->
-    <el-table v-loading="loading" :data="data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id" size="small">
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id" @select="crud.selectChange" @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler">
-      <el-table-column :show-overflow-tooltip="true" label="菜单名称" width="125px" prop="name" />
+      <el-table-column type="selection" width="55" />
-      <el-table-column prop="icon" label="图标" align="center" width="60px">
+      <el-table-column v-if="columns.visible('name')" :show-overflow-tooltip="true" label="菜单名称" width="125px" prop="name" />
+      <el-table-column v-if="columns.visible('icon')" prop="icon" label="图标" align="center" width="60px">
         <template slot-scope="scope">
           <svg-icon :icon-class="scope.row.icon" />
         </template>
       </el-table-column>
-      <el-table-column prop="sort" align="center" label="排序">
+      <el-table-column v-if="columns.visible('sort')" prop="sort" align="center" label="排序">
         <template slot-scope="scope">
           {{ scope.row.sort }}
         </template>
       </el-table-column>
-      <el-table-column :show-overflow-tooltip="true" prop="path" label="路由地址" />
+      <el-table-column v-if="columns.visible('path')" :show-overflow-tooltip="true" prop="path" label="路由地址" />
-      <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
+      <el-table-column v-if="columns.visible('permission')" :show-overflow-tooltip="true" prop="permission" label="权限标识" />
-      <!--<el-table-column :show-overflow-tooltip="true" prop="componentName" label="组件名称"/>-->
+      <el-table-column v-if="columns.visible('component')" :show-overflow-tooltip="true" prop="component" label="组件路径" />
-      <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
+      <el-table-column v-if="columns.visible('iframe')" prop="iframe" label="外链" width="75px">
-      <el-table-column prop="iframe" label="外链" width="75px">
         <template slot-scope="scope">
           <span v-if="scope.row.iframe">是</span>
           <span v-else>否</span>
         </template>
       </el-table-column>
-      <el-table-column prop="iframe" label="缓存" width="75px">
+      <el-table-column v-if="columns.visible('cache')" prop="cache" label="缓存" width="75px">
         <template slot-scope="scope">
           <span v-if="scope.row.cache">是</span>
           <span v-else>否</span>
         </template>
       </el-table-column>
-      <el-table-column prop="iframe" label="可见" width="75px">
+      <el-table-column v-if="columns.visible('hidden')" prop="hidden" label="可见" width="75px">
         <template slot-scope="scope">
           <span v-if="scope.row.hidden">否</span>
           <span v-else>是</span>
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" label="创建日期" width="135px">
+      <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期" width="135px">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-if="checkPermission(['admin','menu:edit','menu:del'])" label="操作" width="130px" align="center" fixed="right">
+      <el-table-column v-permission="['admin','menu:edit','menu:del']" label="操作" width="130px" align="center" fixed="right">
         <template slot-scope="scope">
-          <el-button v-permission="['admin','menu:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
+          <udOperation
-          <el-popover
+            :data="scope.row"
-            :ref="scope.row.id"
+            :permission="permission"
-            v-permission="['admin','menu:del']"
+            msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
-            placement="top"
+          />
-            width="200"
-          >
-            <p>确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！</p>
-            <div style="text-align: right; margin: 0">
-              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-              <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
-            </div>
-            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
-          </el-popover>
         </template>
       </el-table-column>
     </el-table>
@@ -169,21 +146,30 @@
 </template>
 
 <script>
-import crud from '@/mixins/crud'
 import crudMenu from '@/api/system/menu'
-import Treeselect from '@riophae/vue-treeselect'
 import IconSelect from '@/components/IconSelect'
+import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+
+// crud交由presenter持有
+const defaultCrud = CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }})
+const defaultForm = { name: null, sort: 999, path: null, component: null, componentName: null, iframe: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null }
 export default {
   name: 'Menu',
-  components: { Treeselect, IconSelect },
+  components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation },
-  mixins: [crud],
+  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
   data() {
     return {
-      title: '菜单',
-      crudMethod: { ...crudMenu },
       menus: [],
-      form: { name: null, sort: 999, path: null, component: null, componentName: null, iframe: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null },
+      permission: {
+        add: ['admin', 'menu:add'],
+        edit: ['admin', 'menu:edit'],
+        del: ['admin', 'menu:del']
+      },
       rules: {
         name: [
           { required: true, message: '请输入名称', trigger: 'blur' }
@@ -194,37 +180,19 @@ export default {
       }
     }
   },
-  created() {
-    this.$nextTick(() => {
-      this.init()
-    })
-  },
   methods: {
-    // 获取数据前设置好接口地址
+    // 新增与编辑前做的操作
-    beforeInit() {
+    [CRUD.HOOK.afterToCU](crud, form) {
-      this.url = 'api/menus'
+      crudMenu.getMenusTree().then(res => {
-      return true
-    },
-    // 打开新增弹窗前做的操作
-    beforeShowAddForm() {
-      this.getMenus()
-    },
-    // 打开新增弹窗前做的操作
-    beforeShowEditForm() {
-      this.getMenus()
-    },
-    // 选中图标
-    selected(name) {
-      this.form.icon = name
-    },
-    // 获取所有菜单
-    getMenus() {
-      this.crudMethod.getMenusTree().then(res => {
         this.menus = []
         const menu = { id: 0, label: '顶级类目', children: [] }
         menu.children = res
         this.menus.push(menu)
       })
+    },
+    // 选中图标
+    selected(name) {
+      this.form.icon = name
     }
   }
 }

src/views/system/role/index.vue

@@ -2,40 +2,26 @@
   <div class="app-container">
     <!--工具栏-->
     <div class="head-container">
-      <!-- 搜索 -->
+      <div v-if="crud.props.searchToggle">
-      <el-input v-model="query.blurry" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+        <!-- 搜索 -->
-      <el-date-picker
+        <el-input v-model="query.blurry" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        v-model="query.createTime"
+        <el-date-picker
-        :default-time="['00:00:00','23:59:59']"
+          v-model="query.createTime"
-        type="daterange"
+          :default-time="['00:00:00','23:59:59']"
-        range-separator=":"
+          type="daterange"
-        size="small"
+          range-separator=":"
-        class="date-item"
+          size="small"
-        value-format="yyyy-MM-dd HH:mm:ss"
+          class="date-item"
-        start-placeholder="开始日期"
+          value-format="yyyy-MM-dd HH:mm:ss"
-        end-placeholder="结束日期"
+          start-placeholder="开始日期"
-      />
+          end-placeholder="结束日期"
-      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
+        />
-      <!-- 新增 -->
+        <rrOperation :crud="crud" />
-      <el-button
+      </div>
-        class="filter-item"
+      <crudOperation :permission="permission" />
-        size="mini"
-        type="primary"
-        icon="el-icon-plus"
-        @click="showAddFormDialog"
-      >新增</el-button>
-      <!-- 导出 -->
-      <el-button
-        :loading="downloadLoading"
-        size="mini"
-        class="filter-item"
-        type="warning"
-        icon="el-icon-download"
-        @click="downloadMethod"
-      >导出</el-button>
     </div>
     <!-- 表单渲染 -->
-    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="getFormTitle()" append-to-body width="520px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="520px">
       <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
         <el-form-item label="角色名称" prop="name">
           <el-input v-model="form.name" style="width: 145px;" />
@@ -64,8 +50,8 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="text" @click="cancel">取消</el-button>
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
+        <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
       </div>
     </el-dialog>
     <el-row :gutter="15">
@@ -75,45 +61,29 @@
           <div slot="header" class="clearfix">
             <span class="role-span">角色列表</span>
           </div>
-          <el-table v-loading="loading" :data="data" highlight-current-row style="width: 100%;" @current-change="handleCurrentChange">
+          <el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" :data="crud.data" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
-            <el-table-column prop="name" label="名称" />
+            <el-table-column type="selection" width="55" />
-            <el-table-column prop="dataScope" label="数据权限" />
+            <el-table-column v-if="columns.visible('name')" prop="name" label="名称" />
-            <el-table-column prop="permission" label="角色权限" />
+            <el-table-column v-if="columns.visible('dataScope')" prop="dataScope" label="数据权限" />
-            <el-table-column prop="level" label="角色级别" />
+            <el-table-column v-if="columns.visible('permission')" prop="permission" label="角色权限" />
-            <el-table-column :show-overflow-tooltip="true" prop="remark" label="描述" />
+            <el-table-column v-if="columns.visible('level')" prop="level" label="角色级别" />
-            <el-table-column :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期">
+            <el-table-column v-if="columns.visible('remark')" :show-overflow-tooltip="true" prop="remark" label="描述" />
+            <el-table-column v-if="columns.visible('createTime')" :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期">
               <template slot-scope="scope">
                 <span>{{ parseTime(scope.row.createTime) }}</span>
               </template>
             </el-table-column>
-            <el-table-column v-if="checkPermission(['admin','roles:edit','roles:del'])" label="操作" width="130px" align="center" fixed="right">
+            <el-table-column v-permission="['admin','roles:edit','roles:del']" label="操作" width="130px" align="center" fixed="right">
               <template slot-scope="scope">
-                <el-button v-permission="['admin','roles:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
+                <udOperation
-                <el-popover
+                  :data="scope.row"
-                  :ref="scope.row.id"
+                  :permission="permission"
-                  v-permission="['admin','roles:del']"
+                />
-                  placement="top"
-                  width="180"
-                >
-                  <p>确定删除本条数据吗？</p>
-                  <div style="text-align: right; margin: 0">
-                    <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-                    <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
-                  </div>
-                  <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
-                </el-popover>
               </template>
             </el-table-column>
           </el-table>
           <!--分页组件-->
-          <el-pagination
+          <pagination />
-            :total="total"
-            :current-page="page + 1"
-            style="margin-top: 8px;"
-            layout="total, prev, pager, next, sizes"
-            @size-change="sizeChange"
-            @current-change="pageChange"
-          />
         </el-card>
       </el-col>
       <!-- 菜单授权 -->
@@ -151,28 +121,35 @@
 </template>
 
 <script>
-import crud from '@/mixins/crud'
 import crudRoles from '@/api/system/role'
 import { getDepts } from '@/api/system/dept'
 import { getMenusTree } from '@/api/system/menu'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+import pagination from '@crud/Pagination'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+// crud交由presenter持有
+const defaultCrud = CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }})
+const defaultForm = { name: null, depts: [], remark: null, dataScope: null, level: 3, permission: null }
 export default {
   name: 'Role',
-  components: { Treeselect },
+  components: { Treeselect, pagination, crudOperation, rrOperation, udOperation },
-  mixins: [crud],
+  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
   data() {
     return {
-      defaultProps: {
+      defaultProps: { children: 'children', label: 'label' },
-        children: 'children',
-        label: 'label'
-      },
-      title: '角色',
       dateScopes: ['全部', '本级', '自定义'],
-      crudMethod: { ...crudRoles },
       currentId: 0, menuLoading: false, showButton: false,
       menus: [], menuIds: [], depts: [],
-      form: { name: null, depts: [], remark: null, dataScope: null, level: 3, permission: null },
+      permission: {
+        add: ['admin', 'roles:add'],
+        edit: ['admin', 'roles:edit'],
+        del: ['admin', 'roles:del']
+      },
       rules: {
         name: [
           { required: true, message: '请输入名称', trigger: 'blur' }
@@ -186,33 +163,29 @@ export default {
   created() {
     this.getMenus()
     this.$nextTick(() => {
-      this.init()
+      this.crud.toQuery()
     })
   },
   methods: {
-    // 获取数据前设置好接口地址
+    [CRUD.HOOK.afterRefresh]() {
-    beforeInit() {
-      this.showButton = false
-      this.url = 'api/roles'
-      this.sort = 'level,asc'
-      // 清空菜单的选中
       this.$refs.menu.setCheckedKeys([])
-      return true
     },
-    // 打开编辑弹窗前做的操作
+    // 编辑前
-    beforeShowEditForm(data) {
+    [CRUD.HOOK.beforeToEdit](crud, form) {
-      if (data.dataScope === '自定义') {
+      console.log(form.dataScope)
+      if (form.dataScope === '自定义') {
         this.getDepts()
       }
       const depts = []
-      data.depts.forEach(function(dept, index) {
+      form.depts.forEach(function(dept, index) {
         depts.push(dept.id)
       })
-      this.form.depts = depts
+      form.depts = depts
+      console.log(form)
     },
     // 提交前做的操作
-    beforeSubmitMethod() {
+    [CRUD.HOOK.afterValidateCU](crud) {
-      if (this.form.dataScope === '自定义' && this.form.depts.length === 0) {
+      if (crud.form.dataScope === '自定义' && crud.form.depts.length === 0) {
         this.$message({
           message: '自定义数据权限不能为空',
           type: 'warning'
@@ -220,11 +193,11 @@ export default {
         return false
       } else {
         const depts = []
-        this.form.depts.forEach(function(data, index) {
+        crud.form.depts.forEach(function(data, index) {
           const dept = { id: data }
           depts.push(dept)
         })
-        this.form.depts = depts
+        crud.form.depts = depts
       }
       return true
     },
@@ -266,8 +239,8 @@ export default {
         const menu = { id: data }
         role.menus.push(menu)
       })
-      this.crudMethod.editMenu(role).then(res => {
+      crudRoles.editMenu(role).then(res => {
-        this.notify('保存成功', 'success')
+        this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
         this.menuLoading = false
         this.update()
       }).catch(err => {
@@ -278,10 +251,10 @@ export default {
     // 改变数据
     update() {
       // 无刷新更新 表格数据
-      this.crudMethod.get(this.currentId).then(res => {
+      crudRoles.get(this.currentId).then(res => {
-        for (let i = 0; i < this.data.length; i++) {
+        for (let i = 0; i < this.crud.data.length; i++) {
-          if (res.id === this.data[i].id) {
+          if (res.id === this.crud.data[i].id) {
-            this.data[i] = res
+            this.crud.data[i] = res
             break
           }
         }

src/views/system/user/index.vue

@@ -66,10 +66,10 @@
             </el-select>
             <rrOperation :crud="crud" />
           </div>
-          <crudOperation :permission="permission" />
+          <crudOperation show="" :permission="permission" />
         </div>
         <!--表单渲染-->
-        <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="570px">
+        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="570px">
           <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
             <el-form-item label="用户名" prop="username">
               <el-input v-model="form.username" />
@@ -143,12 +143,13 @@
         </el-dialog>
         <!--表格渲染-->
         <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+          <el-table-column type="selection" width="55" />
           <el-table-column v-if="columns.visible('username')" :show-overflow-tooltip="true" prop="username" label="用户名" />
           <el-table-column v-if="columns.visible('nickName')" :show-overflow-tooltip="true" prop="nickName" label="昵称" />
           <el-table-column v-if="columns.visible('sex')" prop="sex" label="性别" />
-          <el-table-column v-if="columns.visible('phone')" :show-overflow-tooltip="true" prop="phone" width="120" label="电话" />
+          <el-table-column v-if="columns.visible('phone')" :show-overflow-tooltip="true" prop="phone" width="100" label="电话" />
-          <el-table-column v-if="columns.visible('email')" :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" />
+          <el-table-column v-if="columns.visible('email')" :show-overflow-tooltip="true" width="125" prop="email" label="邮箱" />
-          <el-table-column v-if="columns.visible('dept')" :show-overflow-tooltip="true" width="120" prop="dept" label="部门 / 岗位">
+          <el-table-column v-if="columns.visible('dept')" :show-overflow-tooltip="true" width="110" prop="dept" label="部门 / 岗位">
             <template slot-scope="scope">
               <div>{{ scope.row.dept.name }} / {{ scope.row.job.name }}</div>
             </template>
@@ -164,7 +165,7 @@
               />
             </template>
           </el-table-column>
-          <el-table-column v-if="columns.visible('createTime')" :show-overflow-tooltip="true" prop="createTime" width="150" label="创建日期">
+          <el-table-column v-if="columns.visible('createTime')" :show-overflow-tooltip="true" prop="createTime" width="140" label="创建日期">
             <template slot-scope="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
             </template>
@@ -180,6 +181,7 @@
               <udOperation
                 :data="scope.row"
                 :permission="permission"
+                :disabled-dle="scope.row.id === user.id"
               />
             </template>
           </el-table-column>
@@ -316,6 +318,10 @@ export default {
       this.getRoles()
       this.getRoleLevel()
       form.enabled = form.enabled.toString()
+    },
+    // 打开编辑弹窗前做的操作
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      this.getJobs(this.form.dept.id)
       userRoles = []
       const roles = []
       form.roles.forEach(function(role, index) {
@@ -326,10 +332,6 @@ export default {
       })
       form.roles = roles
     },
-    // 打开编辑弹窗前做的操作
-    [CRUD.HOOK.beforeToEdit](crud, form) {
-      this.getJobs(this.form.dept.id)
-    },
     // 提交前做的操作
     [CRUD.HOOK.afterValidateCU](crud) {
       if (!crud.form.dept.id) {

src/views/tools/picture/index.vue

@@ -61,7 +61,7 @@
       >
         <i class="el-icon-plus" />
       </el-upload>
-      <el-dialog :append-to-body="true" :visible.sync="dialogVisible">
+      <el-dialog append-to-body :visible.sync="dialogVisible">
         <img :src="dialogImageUrl" width="100%" alt="">
       </el-dialog>
       <div slot="footer" class="dialog-footer">

src/views/tools/storage/local/index.vue

@@ -49,7 +49,7 @@
       >导出</el-button>
     </div>
     <!--表单组件-->
-    <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
       <el-form ref="form" :model="form" size="small" label-width="80px">
         <el-form-item label="文件名">
           <el-input v-model="form.name" style="width: 370px;" />