open-source/eladmin-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Elune
2019-12-16 13:24:36 +08:00
parent 412ccfa303
commit c321fa3814
30 changed files with 373 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/system/dept.js
View File

@@ -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 }

10
src/api/system/job.js
View File

@@ -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 }

10
src/api/system/menu.js
View File

@@ -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 }

10
src/api/system/role.js
View File

@@ -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 }

10
src/api/system/user.js
View File

@@ -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 }

2
src/assets/styles/index.scss
View File

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

12
src/components/Crud/CRUD.operation.vue
View File

@@ -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 {

18
src/components/Crud/UD.operation.vue
View File

@@ -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() {

88
src/components/Crud/crud.js
View File

@@ -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
},

2
src/store/modules/app.js
View File

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

2
src/views/mnt/app/index.vue
View File

@@ -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="部署后的文件或者目录名称，用于备份" />

2
src/views/mnt/database/execute.vue
View File

@@ -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"

2
src/views/mnt/database/index.vue
View File

@@ -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" />

2
src/views/mnt/deploy/deploy.vue
View File

@@ -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"

2
src/views/mnt/deploy/index.vue
View File

@@ -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">

2
src/views/mnt/deploy/sysRestore.vue
View File

@@ -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

2
src/views/mnt/server/index.vue
View File

@@ -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" />

2
src/views/monitor/log/search.vue
View File

@@ -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">

85
src/views/monitor/online/index.vue
View File

@@ -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" />
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
<!-- 导出 -->
<div v-if="crud.props.searchToggle">
<el-input v-model="query.filter" clearable size="small" placeholder="全表模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<rrOperation :crud="crud" />
</div>
<crudOperation>
<el-button
:loading="downloadLoading"
size="mini"
slot="left"
class="filter-item"
type="warning"
icon="el-icon-download"
@click="downloadMethod"
>导出</el-button>
type="danger"
icon="el-icon-delete"
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-column prop="userName" label="用户名" />
<el-table-column prop="nickName" label="用户昵称" />
<el-table-column prop="job" label="岗位" />
<el-table-column prop="ip" label="登录IP" />
<el-table-column :show-overflow-tooltip="true" prop="address" label="登录地点" />
<el-table-column prop="browser" label="浏览器" />
<el-table-column prop="loginTime" label="登录时间">
<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')" prop="userName" label="用户名" />
<el-table-column v-if="columns.visible('nickName')" prop="nickName" label="用户昵称" />
<el-table-column v-if="columns.visible('job')" prop="job" label="岗位" />
<el-table-column v-if="columns.visible('ip')" prop="ip" label="登录IP" />
<el-table-column v-if="columns.visible('address')" :show-overflow-tooltip="true" prop="address" 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
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
<pagination />
</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: '在线用户',
crudMethod: { del }
delLoading: false,
permission: {}
}
},
created() {
this.$nextTick(() => {
this.init()
})
this.crud.optShow = {
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()

2
src/views/monitor/server/index.vue
View File

@@ -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;" />

7
src/views/system/dept/index.vue
View File

@@ -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>

2
src/views/system/dict/dictDetail.vue
View File

@@ -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;" />

4
src/views/system/dict/index.vue
View File

@@ -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">

2
src/views/system/job/index.vue
View File

@@ -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="所属部门">

2
src/views/system/job/module/form.vue
View File

@@ -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"

128
src/views/system/menu/index.vue
View File

@@ -2,6 +2,7 @@
<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
@@ -15,27 +16,12 @@
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
<!-- 新增 -->
<el-button
class="filter-item"
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>
<rrOperation :crud="crud" />
</div>
<crudOperation :permission="permission" />
</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 :loading="loading" type="primary" @click="submitMethod">确认</el-button>
<el-button type="text" @click="crud.cancelCU">取消</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-column :show-overflow-tooltip="true" label="菜单名称" width="125px" prop="name" />
<el-table-column prop="icon" label="图标" align="center" width="60px">
<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 type="selection" width="55" />
<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 :show-overflow-tooltip="true" prop="permission" label="权限标识" />
<!--<el-table-column :show-overflow-tooltip="true" prop="componentName" label="组件名称"/>-->
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
<el-table-column prop="iframe" label="外链" width="75px">
<el-table-column v-if="columns.visible('path')" :show-overflow-tooltip="true" prop="path" label="路由地址" />
<el-table-column v-if="columns.visible('permission')" :show-overflow-tooltip="true" prop="permission" label="权限标识" />
<el-table-column v-if="columns.visible('component')" :show-overflow-tooltip="true" prop="component" label="组件路径" />
<el-table-column v-if="columns.visible('iframe')" 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)" />
<el-popover
:ref="scope.row.id"
v-permission="['admin','menu:del']"
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>
<udOperation
:data="scope.row"
:permission="permission"
msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
/>
</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 },
mixins: [crud],
components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation },
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() {
this.url = 'api/menus'
return true
},
// 打开新增弹窗前做的操作
beforeShowAddForm() {
this.getMenus()
},
// 打开新增弹窗前做的操作
beforeShowEditForm() {
this.getMenus()
},
// 选中图标
selected(name) {
this.form.icon = name
},
// 获取所有菜单
getMenus() {
this.crudMethod.getMenusTree().then(res => {
// 新增与编辑前做的操作
[CRUD.HOOK.afterToCU](crud, form) {
crudMenu.getMenusTree().then(res => {
this.menus = []
const menu = { id: 0, label: '顶级类目', children: [] }
menu.children = res
this.menus.push(menu)
})
},
// 选中图标
selected(name) {
this.form.icon = name
}
}
}

143
src/views/system/role/index.vue
View File

@@ -2,8 +2,9 @@
<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-input v-model="query.blurry" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<el-date-picker
v-model="query.createTime"
:default-time="['00:00:00','23:59:59']"
@@ -15,27 +16,12 @@
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
<!-- 新增 -->
<el-button
class="filter-item"
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>
<rrOperation :crud="crud" />
</div>
<crudOperation :permission="permission" />
</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 :loading="loading" type="primary" @click="submitMethod">确认</el-button>
<el-button type="text" @click="crud.cancelCU">取消</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-column prop="name" label="名称" />
<el-table-column prop="dataScope" label="数据权限" />
<el-table-column prop="permission" label="角色权限" />
<el-table-column prop="level" label="角色级别" />
<el-table-column :show-overflow-tooltip="true" prop="remark" label="描述" />
<el-table-column :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期">
<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 type="selection" width="55" />
<el-table-column v-if="columns.visible('name')" prop="name" label="名称" />
<el-table-column v-if="columns.visible('dataScope')" prop="dataScope" label="数据权限" />
<el-table-column v-if="columns.visible('permission')" prop="permission" label="角色权限" />
<el-table-column v-if="columns.visible('level')" prop="level" 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)" />
<el-popover
:ref="scope.row.id"
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>
<udOperation
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
<pagination />
</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 },
mixins: [crud],
components: { Treeselect, pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
data() {
return {
defaultProps: {
children: 'children',
label: 'label'
},
title: '角色',
defaultProps: { children: 'children', label: 'label' },
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: {
// 获取数据前设置好接口地址
beforeInit() {
this.showButton = false
this.url = 'api/roles'
this.sort = 'level,asc'
// 清空菜单的选中
[CRUD.HOOK.afterRefresh]() {
this.$refs.menu.setCheckedKeys([])
return true
},
// 打开编辑弹窗前做的操作
beforeShowEditForm(data) {
if (data.dataScope === '自定义') {
// 编辑前
[CRUD.HOOK.beforeToEdit](crud, form) {
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() {
if (this.form.dataScope === '自定义' && this.form.depts.length === 0) {
[CRUD.HOOK.afterValidateCU](crud) {
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 => {
this.notify('保存成功', 'success')
crudRoles.editMenu(role).then(res => {
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 => {
for (let i = 0; i < this.data.length; i++) {
if (res.id === this.data[i].id) {
this.data[i] = res
crudRoles.get(this.currentId).then(res => {
for (let i = 0; i < this.crud.data.length; i++) {
if (res.id === this.crud.data[i].id) {
this.crud.data[i] = res
break
}
}

22
src/views/system/user/index.vue
View File

@@ -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('email')" :show-overflow-tooltip="true" width="135" 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('phone')" :show-overflow-tooltip="true" prop="phone" width="100" 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="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) {

2
src/views/tools/picture/index.vue
View File

@@ -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">

2
src/views/tools/storage/local/index.vue
View File

@@ -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;" />