Skip to content

F
front-backend
Commit 412ccfa3 by Elune
Options

代码优化

parent 5d743c1d
Showing with 125 additions and 135 deletions
src/components/Crud/UD.operation.vue
<template> <template>
<div> <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" 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"> <el-popover v-model="pop" v-permission="permission.del" placement="top" width="180" trigger="manual" @show="onPopoverShow" @hide="onPopoverHide">
<p>确定删除本条数据吗？</p> <p>确定删除本条数据吗？</p>
<div style="text-align: right; margin: 0"> <div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="doCancel">取消</el-button> <el-button size="mini" type="text" @click="doCancel">取消</el-button>
...@@ -42,6 +42,17 @@ export default { ...@@ -42,6 +42,17 @@ export default {
if (data === this.data) { if (data === this.data) {
this.pop = false this.pop = false
} }
},
onPopoverShow() {
setTimeout(() => {
document.addEventListener('click', this.handleDocumentClick)
}, 0)
},
onPopoverHide() {
document.removeEventListener('click', this.handleDocumentClick)
},
handleDocumentClick(event) {
this.pop = false
} }
} }
} }
......
src/components/Crud/crud.js
...@@ -69,6 +69,12 @@ function CRUD(options) { ...@@ -69,6 +69,12 @@ function CRUD(options) {
return this.add > CRUD.STATUS.NORMAL ? `新增${crud.title}` : this.edit > CRUD.STATUS.NORMAL ? `编辑${crud.title}` : crud.title return this.add > CRUD.STATUS.NORMAL ? `新增${crud.title}` : this.edit > CRUD.STATUS.NORMAL ? `编辑${crud.title}` : crud.title
} }
}, },
msg: {
submit: '提交成功',
add: '新增成功',
edit: '编辑成功',
del: '删除成功'
},
page: { page: {
// 页码 // 页码
page: 0, page: 0,
...@@ -83,6 +89,21 @@ function CRUD(options) { ...@@ -83,6 +89,21 @@ function CRUD(options) {
downloadLoading: false downloadLoading: false
} }
const methods = { const methods = {
/**
* 通用的提示
*/
submitSuccessNotify() {
crud.notify(crud.msg.submit, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
addSuccessNotify() {
crud.notify(crud.msg.add, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
editSuccessNotify() {
crud.notify(crud.msg.edit, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
delSuccessNotify() {
crud.notify(crud.msg.del, CRUD.NOTIFICATION_TYPE.SUCCESS)
},
// 搜索 // 搜索
toQuery() { toQuery() {
crud.page.page = 1 crud.page.page = 1
...@@ -97,7 +118,7 @@ function CRUD(options) { ...@@ -97,7 +118,7 @@ function CRUD(options) {
crud.loading = true crud.loading = true
// 请求数据 // 请求数据
initData(crud.url, crud.getQueryParams()).then(data => { initData(crud.url, crud.getQueryParams()).then(data => {
crud.page.total = data.total crud.page.total = data.totalElements
crud.data = data.content crud.data = data.content
crud.resetDataStatus() crud.resetDataStatus()
// time 毫秒后显示表格 // time 毫秒后显示表格
...@@ -218,10 +239,12 @@ function CRUD(options) { ...@@ -218,10 +239,12 @@ function CRUD(options) {
crud.crudMethod.add(crud.form).then(() => { crud.crudMethod.add(crud.form).then(() => {
crud.status.add = CRUD.STATUS.NORMAL crud.status.add = CRUD.STATUS.NORMAL
crud.resetForm() crud.resetForm()
crud.notify('新增成功', CRUD.NOTIFICATION_TYPE.SUCCESS) crud.addSuccessNotify()
callVmHook(crud, CRUD.HOOK.afterSubmit) callVmHook(crud, CRUD.HOOK.afterSubmit)
crud.toQuery() crud.toQuery()
}).catch(() => {}) }).catch(() => {
callVmHook(crud, CRUD.HOOK.afterAddError)
})
}, },
/** /**
* 执行编辑 * 执行编辑
...@@ -234,10 +257,12 @@ function CRUD(options) { ...@@ -234,10 +257,12 @@ function CRUD(options) {
crud.status.edit = CRUD.STATUS.NORMAL crud.status.edit = CRUD.STATUS.NORMAL
crud.getDataStatus(crud.form.id).edit = CRUD.STATUS.NORMAL crud.getDataStatus(crud.form.id).edit = CRUD.STATUS.NORMAL
crud.resetForm() crud.resetForm()
crud.notify('编辑成功', CRUD.NOTIFICATION_TYPE.SUCCESS) crud.editSuccessNotify()
callVmHook(crud, CRUD.HOOK.afterSubmit) callVmHook(crud, CRUD.HOOK.afterSubmit)
crud.refresh() crud.refresh()
}).catch(() => {}) }).catch(() => {
callVmHook(crud, CRUD.HOOK.afterEditError)
})
}, },
/** /**
* 执行删除 * 执行删除
...@@ -252,7 +277,7 @@ function CRUD(options) { ...@@ -252,7 +277,7 @@ function CRUD(options) {
return crud.crudMethod.del(data.id).then(() => { return crud.crudMethod.del(data.id).then(() => {
dataStatus.delete = CRUD.STATUS.NORMAL dataStatus.delete = CRUD.STATUS.NORMAL
crud.dleChangePage(1) crud.dleChangePage(1)
crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS) crud.delSuccessNotify()
callVmHook(crud, CRUD.HOOK.afterDelete, data) callVmHook(crud, CRUD.HOOK.afterDelete, data)
crud.refresh() crud.refresh()
}).catch(() => { }).catch(() => {
...@@ -638,7 +663,9 @@ CRUD.HOOK = { ...@@ -638,7 +663,9 @@ CRUD.HOOK = {
/** 提交 - 之前 */ /** 提交 - 之前 */
beforeSubmit: 'beforeCrudSubmitCU', beforeSubmit: 'beforeCrudSubmitCU',
/** 提交 - 之后 */ /** 提交 - 之后 */
afterSubmit: 'afterCrudSubmitCU' afterSubmit: 'afterCrudSubmitCU',
afterAddError: 'afterCrudAddError',
afterEditError: 'afterCrudEditError'
} }
/** /**
......
src/views/system/dept/index.vue
...@@ -80,6 +80,7 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud' ...@@ -80,6 +80,7 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation' import udOperation from '@crud/UD.operation'
// crud交由presenter持有 // crud交由presenter持有
const defaultCrud = CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }}) const defaultCrud = CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
const defaultForm = { id: null, name: null, pid: 1, enabled: 'true' } const defaultForm = { id: null, name: null, pid: 1, enabled: 'true' }
...@@ -109,7 +110,7 @@ export default { ...@@ -109,7 +110,7 @@ export default {
} }
}, },
methods: { methods: {
// 打开新增与编辑弹窗前做的操作 // 新增与编辑前做的操作
[CRUD.HOOK.afterToCU](crud, form) { [CRUD.HOOK.afterToCU](crud, form) {
form.enabled = `${form.enabled}` form.enabled = `${form.enabled}`
// 获取所有部门 // 获取所有部门
......
src/views/system/user/index.vue
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
<el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20"> <el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20">
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<div v-if="crud.props.searchToggle">
<!-- 搜索 --> <!-- 搜索 -->
<el-input <el-input
v-model="query.blurry" v-model="query.blurry"
...@@ -34,7 +35,7 @@ ...@@ -34,7 +35,7 @@
placeholder="输入名称或者邮箱搜索" placeholder="输入名称或者邮箱搜索"
style="width: 200px;" style="width: 200px;"
class="filter-item" class="filter-item"
@keyup.enter.native="toQuery" @keyup.enter.native="crud.toQuery"
/> />
<el-date-picker <el-date-picker
v-model="query.createTime" v-model="query.createTime"
...@@ -54,7 +55,7 @@ ...@@ -54,7 +55,7 @@
placeholder="状态" placeholder="状态"
class="filter-item" class="filter-item"
style="width: 90px" style="width: 90px"
@change="toQuery" @change="crud.toQuery"
> >
<el-option <el-option
v-for="item in enabledTypeOptions" v-for="item in enabledTypeOptions"
...@@ -63,48 +64,13 @@ ...@@ -63,48 +64,13 @@
:value="item.key" :value="item.key"
/> />
</el-select> </el-select>
<el-button <rrOperation :crud="crud" />
class="filter-item" </div>
size="mini" <crudOperation :permission="permission" />
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>
</div> </div>
<!--表单渲染--> <!--表单渲染-->
<el-dialog <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">
:visible.sync="dialog" <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
:close-on-click-modal="false"
:before-close="cancel"
:title="getFormTitle()"
append-to-body
width="570px"
>
<el-form
ref="form"
:inline="true"
:model="form"
:rules="rules"
size="small"
label-width="66px"
>
<el-form-item label="用户名" prop="username"> <el-form-item label="用户名" prop="username">
<el-input v-model="form.username" /> <el-input v-model="form.username" />
</el-form-item> </el-form-item>
...@@ -143,7 +109,7 @@ ...@@ -143,7 +109,7 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="状态"> <el-form-item label="状态">
<el-radio-group v-model="form.enabled"> <el-radio-group v-model="form.enabled" :disabled="form.id === user.id">
<el-radio <el-radio
v-for="item in dict.user_status" v-for="item in dict.user_status"
:key="item.id" :key="item.id"
...@@ -171,101 +137,83 @@ ...@@ -171,101 +137,83 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <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> </div>
</el-dialog> </el-dialog>
<!--表格渲染--> <!--表格渲染-->
<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 :show-overflow-tooltip="true" prop="username" label="用户名" /> <el-table-column v-if="columns.visible('username')" :show-overflow-tooltip="true" prop="username" label="用户名" />
<el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" /> <el-table-column v-if="columns.visible('nickName')" :show-overflow-tooltip="true" prop="nickName" label="昵称" />
<el-table-column prop="sex" label="性别" /> <el-table-column v-if="columns.visible('sex')" prop="sex" label="性别" />
<el-table-column :show-overflow-tooltip="true" prop="phone" width="120" label="电话" /> <el-table-column v-if="columns.visible('phone')" :show-overflow-tooltip="true" prop="phone" width="120" label="电话" />
<el-table-column :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" /> <el-table-column v-if="columns.visible('email')" :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" />
<el-table-column :show-overflow-tooltip="true" width="120" label="部门 / 岗位"> <el-table-column v-if="columns.visible('dept')" :show-overflow-tooltip="true" width="120" prop="dept" label="部门 / 岗位">
<template slot-scope="scope"> <template slot-scope="scope">
<div>{{ scope.row.dept.name }} / {{ scope.row.job.name }}</div> <div>{{ scope.row.dept.name }} / {{ scope.row.job.name }}</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" align="center"> <el-table-column v-if="columns.visible('enabled')" label="状态" align="center" prop="enabled">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
v-model="scope.row.enabled" v-model="scope.row.enabled"
:disabled="user.id === scope.row.id"
active-color="#409EFF" active-color="#409EFF"
inactive-color="#F56C6C" inactive-color="#F56C6C"
@change="changeEnabled(scope.row, scope.row.enabled,)" @change="changeEnabled(scope.row, scope.row.enabled)"
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :show-overflow-tooltip="true" prop="createTime" width="150" label="创建日期"> <el-table-column v-if="columns.visible('createTime')" :show-overflow-tooltip="true" prop="createTime" width="150" label="创建日期">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
v-if="checkPermission(['admin','user:edit','user:del'])" v-permission="['admin','user:edit','user:del']"
label="操作" label="操作"
width="125" width="125"
align="center" align="center"
fixed="right" fixed="right"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <udOperation
v-permission="['admin','user:edit']" :data="scope.row"
size="mini" :permission="permission"
type="primary"
icon="el-icon-edit"
@click="showEditFormDialog(scope.row)"
/> />
<el-popover
:ref="scope.row.id"
v-permission="['admin','user: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> </template>
</el-table-column> </el-table-column>
</el-table> </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-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import crud from '@/mixins/crud'
import crudUser from '@/api/system/user' import crudUser from '@/api/system/user'
import { isvalidPhone } from '@/utils/validate' import { isvalidPhone } from '@/utils/validate'
import { getDepts } from '@/api/system/dept' import { getDepts } from '@/api/system/dept'
import { getAll, getLevel } from '@/api/system/role' import { getAll, getLevel } from '@/api/system/role'
import { getAllJob } from '@/api/system/job' import { getAllJob } from '@/api/system/job'
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 Treeselect from '@riophae/vue-treeselect'
import { mapGetters } from 'vuex'
import '@riophae/vue-treeselect/dist/vue-treeselect.css' import '@riophae/vue-treeselect/dist/vue-treeselect.css'
let userRoles = [] let userRoles = []
// crud交由presenter持有
const defaultCrud = CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
const defaultForm = { username: null, nickName: null, sex: '男', email: null, enabled: 'false', roles: [], job: { id: null }, dept: { id: null }, phone: null }
export default { export default {
name: 'User', name: 'User',
components: { Treeselect }, components: { Treeselect, crudOperation, rrOperation, udOperation, pagination },
mixins: [crud], mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
// 数据字典 // 数据字典
dicts: ['user_status'], dicts: ['user_status'],
data() { data() {
...@@ -280,18 +228,18 @@ export default { ...@@ -280,18 +228,18 @@ export default {
} }
} }
return { return {
crudMethod: {
...crudUser
},
title: '用户',
height: document.documentElement.clientHeight - 180 + 'px;', height: document.documentElement.clientHeight - 180 + 'px;',
deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [], deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
defaultProps: { children: 'children', label: 'name' }, defaultProps: { children: 'children', label: 'name' },
permission: {
add: ['admin', 'user:add'],
edit: ['admin', 'user:edit'],
del: ['admin', 'user:del']
},
enabledTypeOptions: [ enabledTypeOptions: [
{ key: 'true', display_name: '激活' }, { key: 'true', display_name: '激活' },
{ key: 'false', display_name: '锁定' } { key: 'false', display_name: '锁定' }
], ],
form: { username: null, nickName: null, sex: '男', email: null, enabled: 'false', roles: [], job: { id: null }, dept: { id: null }, phone: null },
rules: { rules: {
username: [ username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }, { required: true, message: '请输入用户名', trigger: 'blur' },
...@@ -311,10 +259,16 @@ export default { ...@@ -311,10 +259,16 @@ export default {
} }
} }
}, },
computed: {
...mapGetters([
'user'
])
},
created() { created() {
this.$nextTick(() => { this.$nextTick(() => {
this.getDeptDatas() this.getDeptDatas()
this.init() this.crud.toQuery()
this.crud.msg.add = '新增成功，默认密码：123456'
}) })
}, },
mounted: function() { mounted: function() {
...@@ -331,13 +285,19 @@ export default { ...@@ -331,13 +285,19 @@ export default {
userRoles.push(role) userRoles.push(role)
}) })
}, },
afterAddErrorMethod() { [CRUD.HOOK.afterAddError](crud) {
this.afterErrorMethod(crud)
},
[CRUD.HOOK.afterEditError](crud) {
this.afterErrorMethod(crud)
},
afterErrorMethod(crud) {
// 恢复select // 恢复select
const initRoles = [] const initRoles = []
userRoles.forEach(function(role, index) { userRoles.forEach(function(role, index) {
initRoles.push(role.id) initRoles.push(role.id)
}) })
this.form.roles = initRoles crud.form.roles = initRoles
}, },
deleteTag(value) { deleteTag(value) {
userRoles.forEach(function(data, index) { userRoles.forEach(function(data, index) {
...@@ -350,51 +310,48 @@ export default { ...@@ -350,51 +310,48 @@ export default {
this.url = 'api/users' this.url = 'api/users'
return true return true
}, },
// 打开新增弹窗前做的操作 // 新增与编辑前做的操作
beforeShowAddForm() { [CRUD.HOOK.afterToCU](crud, form) {
this.getDepts() this.getDepts()
this.getRoles() this.getRoles()
this.getRoleLevel() this.getRoleLevel()
}, form.enabled = form.enabled.toString()
// 打开编辑弹窗前做的操作
beforeShowEditForm(data) {
userRoles = [] userRoles = []
this.getDepts()
this.getRoles()
this.getRoleLevel()
this.getJobs(this.form.dept.id)
this.form.enabled = data.enabled.toString()
const roles = [] const roles = []
data.roles.forEach(function(role, index) { form.roles.forEach(function(role, index) {
roles.push(role.id) roles.push(role.id)
// 初始化编辑时候的角色 // 初始化编辑时候的角色
const rol = { id: role.id } const rol = { id: role.id }
userRoles.push(rol) userRoles.push(rol)
}) })
this.form.roles = roles form.roles = roles
},
// 打开编辑弹窗前做的操作
[CRUD.HOOK.beforeToEdit](crud, form) {
this.getJobs(this.form.dept.id)
}, },
// 提交前做的操作 // 提交前做的操作
beforeSubmitMethod() { [CRUD.HOOK.afterValidateCU](crud) {
if (!this.form.dept.id) { if (!crud.form.dept.id) {
this.$message({ this.$message({
message: '部门不能为空', message: '部门不能为空',
type: 'warning' type: 'warning'
}) })
return false return false
} else if (!this.form.job.id) { } else if (!crud.form.job.id) {
this.$message({ this.$message({
message: '岗位不能为空', message: '岗位不能为空',
type: 'warning' type: 'warning'
}) })
return false return false
} else if (this.form.roles.length === 0) { } else if (this.roles.length === 0) {
this.$message({ this.$message({
message: '角色不能为空', message: '角色不能为空',
type: 'warning' type: 'warning'
}) })
return false return false
} }
this.form.roles = userRoles crud.form.roles = userRoles
return true return true
}, },
// 获取左侧部门数据 // 获取左侧部门数据
...@@ -419,7 +376,7 @@ export default { ...@@ -419,7 +376,7 @@ export default {
} else { } else {
this.query.deptId = data.id this.query.deptId = data.id
} }
this.init() this.crud.toQuery()
}, },
// 改变状态 // 改变状态
changeEnabled(data, val) { changeEnabled(data, val) {
...@@ -428,8 +385,8 @@ export default { ...@@ -428,8 +385,8 @@ export default {
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.crudMethod.edit(data).then(res => { crudUser.edit(data).then(res => {
this.notify(this.dict.label.user_status[val] + '成功', 'success') this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
}).catch(() => { }).catch(() => {
data.enabled = !data.enabled data.enabled = !data.enabled
}) })
...@@ -452,19 +409,13 @@ export default { ...@@ -452,19 +409,13 @@ export default {
// 点击部门搜索对应的岗位 // 点击部门搜索对应的岗位
selectFun(node, instanceId) { selectFun(node, instanceId) {
this.getJobs(node.id) this.getJobs(node.id)
this.form.job.id = null
}, },
// 获取权限级别 // 获取权限级别
getRoleLevel() { getRoleLevel() {
getLevel().then(res => { getLevel().then(res => {
this.level = res.level this.level = res.level
}).catch(() => { }) }).catch(() => { })
},
addSuccessNotify() {
this.$notify({
title: '新增成功，默认密码：123456',
type: 'success',
duration: 2500
})
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment