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