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

代码优化，组件复用

Browse Source
This commit is contained in:
郑杰
2019-01-06 12:45:24 +08:00
parent 22a95e6fcc
commit ff0c36b5d4
40 changed files with 858 additions and 1116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/system/user/center.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="app-container">
<div id="content-main" :style="'width:'+width">
<div id="content-main" style="width:600px;">
<el-card shadow="never" class="box-card user-info">
<div class="avatar-content">
<el-upload
@@ -54,7 +54,6 @@ export default {
components: { updatePass, updateEmail },
data() {
return {
width: document.documentElement.clientWidth - 180 + 'px;',
headers: {
'Authorization': 'Bearer ' + getToken()
}
@@ -95,78 +94,5 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss">
.box-card{
border: 0px;
border-bottom: 1px solid #ECEDFE;
border-radius: unset;
h4{
height: 26px;
margin: 0 0 7px;
line-height: 26px;
font-size: 1.1rem;
font-weight: 500;
color: #444242;
display: inline-block;
}
p{
font-family: Lantinghei;
font-size: 90%;
color: #747474;
}
ul{
padding: 0;
margin: 7px 0 0;
list-style: none;
font-size: 80%;
}
li {
float: left;
margin: 0 30px 10px 0!important;
}
li:before {
width: 8px;
height: 8px;
background-color: #52acd9;
color: #52acd9;
display: inline-block;
border-radius: 50%;
margin-right: 5px;
content: '';
box-sizing: border-box;
}
}
.user-info{
height: 170px;
}
.reset-email{
border-bottom: 0px;
}
.avatar-content, .user-info-content {
float: left;
}
.user-info-content{
font-family: Lantinghei;
position: relative;
font-size: 14px;
margin: 25px;
div{
margin-bottom: 15px;
}
}
.avatar-uploader-icon {
font-size: 28px;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
}
.avatar {
width: 120px;
height: 120px;
display: block;
border-radius: 50%;
}
.box-card{border:0;border-bottom:1px solid #ECEDFE;border-radius:unset;h4{height:26px;margin:0 0 7px;line-height:26px;font-size:1.1rem;font-weight:500;color:#444242;display:inline-block}p{font-family:Lantinghei;font-size:90%;color:#747474}ul{padding:0;margin:7px 0 0;list-style:none;font-size:80%}li{float:left;margin:0 30px 10px 0!important}li:before{width:8px;height:8px;background-color:#52acd9;color:#52acd9;display:inline-block;border-radius:50%;margin-right:5px;content:'';box-sizing:border-box}}.user-info{height:170px}.reset-email{border-bottom:0}.avatar-content,.user-info-content{float:left}.user-info-content{font-family:Lantinghei;position:relative;font-size:14px;margin:25px;div{margin-bottom:15px}}.avatar-uploader-icon{font-size:28px;width:120px;height:120px;line-height:120px;text-align:center}.avatar{width:120px;height:120px;display:block;border-radius:50%}
</style>

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

@@ -1,6 +1,6 @@
<template>
<div class="app-container">
<search :roles="roles" :query="query"/>
<eHeader :roles="roles" :query="query"/>
<!--表格渲染-->
<el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
<el-table-column prop="username" label="用户名"/>
@@ -49,15 +49,15 @@
</template>
<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import checkPermission from '@/utils/permission'
import initData from '../../../mixins/initData'
import { del } from '@/api/user'
import { getRoleTree } from '@/api/role'
import { parseTime } from '@/utils/index'
import search from './module/search'
import eHeader from './module/header'
import edit from './module/edit'
export default {
components: { search, edit },
components: { eHeader, edit },
mixins: [initData],
data() {
return {

107
src/views/system/user/module/add.vue
View File

@@ -1,107 +0,0 @@
<template>
<div>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="dialog = true">新增</el-button>
<el-dialog :visible.sync="dialog" :title="title" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" style="width: 370px;"/>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" style="width: 370px;"/>
</el-form-item>
<el-form-item label="状态" prop="enabled">
<el-radio v-model="form.enabled" label="true">激活</el-radio>
<el-radio v-model="form.enabled" label="false" >锁定</el-radio>
</el-form-item>
<el-form-item style="margin-bottom: 0px;" label="角色">
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 370px;" placeholder="请选择角色" />
</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="doSubmit">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { add } from '@/api/user'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Treeselect },
props: {
roles: {
type: Array,
required: true
}
},
data() {
return {
loading: false, dialog: false, title: '新增用户',
form: { username: '', email: '', enabled: 'false', roles: [] }, roleIds: [],
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
],
enabled: [
{ required: true, message: '状态不能为空', trigger: 'blur' }
]
}
}
},
methods: {
cancel() {
this.resetForm()
},
doSubmit() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true
this.form.roles = []
const _this = this
this.roleIds.forEach(function(data, index) {
const role = { id: data }
_this.form.roles.push(role)
})
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
message: '默认密码：123456',
type: 'success',
duration: 2500
})
this.loading = false
this.$parent.$parent.init()
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
} else {
return false
}
})
},
resetForm() {
this.dialog = false
this.$refs['form'].resetFields()
this.roleIds = []
this.form = { username: '', email: '', enabled: 'false', roles: [] }
}
}
}
</script>
<style scoped>
div{
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
</style>

97
src/views/system/user/module/edit.vue
View File

@@ -1,35 +1,13 @@
<template>
<div>
<el-button :disabled="data.id === 1" size="mini" type="success" @click="to">编辑</el-button>
<el-dialog :visible.sync="dialog" :close-on-click-modal="false" :title="title" style="text-align: left" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" style="width: 370px;"/>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" style="width: 370px;"/>
</el-form-item>
<el-form-item label="状态" prop="enabled">
<el-radio v-model="form.enabled" label="true">激活</el-radio>
<el-radio v-model="form.enabled" label="false" >锁定</el-radio>
</el-form-item>
<el-form-item style="margin-bottom: 0px;" label="角色">
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 370px;" placeholder="请选择角色" />
</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="doSubmit">确认</el-button>
</div>
</el-dialog>
<eForm ref="form" :roles="roles" :sup_this="sup_this" :is-add="false"/>
</div>
</template>
<script>
import { edit } from '@/api/user'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import eForm from './form'
export default {
components: { Treeselect },
components: { eForm },
props: {
roles: {
type: Array,
@@ -39,83 +17,26 @@ export default {
type: Object,
required: true
},
// index.vue 的this 可用于刷新数据
sup_this: {
type: Object,
required: true
}
},
data() {
return {
loading: false, dialog: false, title: '编辑用户',
form: { id: '', username: '', email: '', enabled: '', roles: [] }, roleIds: [],
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
],
enabled: [
{ required: true, message: '状态不能为空', trigger: 'blur' }
]
}
}
},
methods: {
to() {
const _this = this
this.form = { id: this.data.id, username: this.data.username, email: this.data.email, enabled: this.data.enabled.toString(), roles: [] }
const _this = this.$refs.form
_this.roleIds = []
_this.form = { id: this.data.id, username: this.data.username, email: this.data.email, enabled: this.data.enabled.toString(), roles: [] }
this.data.roles.forEach(function(data, index) {
_this.roleIds.push(data.id)
})
this.dialog = true
},
cancel() {
this.resetForm()
},
doSubmit() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true
this.form.roles = []
const _this = this
this.roleIds.forEach(function(data, index) {
const role = { id: data }
_this.form.roles.push(role)
})
edit(this.form).then(res => {
this.resetForm()
this.$notify({
title: '修改成功',
type: 'success',
duration: 2500
})
this.loading = false
_this.sup_this.init()
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
} else {
return false
}
})
},
resetForm() {
this.dialog = false
this.$refs['form'].resetFields()
this.roleIds = []
this.form = { id: '', username: '', email: '', enabled: '', roles: [] }
_this.dialog = true
}
}
}
</script>
<style scoped>
div{
display: inline-block;
margin-right: 3px;
}
div{display: inline-block;margin-right: 3px;}
</style>

129
src/views/system/user/module/form.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增用户' : '编辑用户'" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" style="width: 370px;"/>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" style="width: 370px;"/>
</el-form-item>
<el-form-item label="状态" prop="enabled">
<el-radio v-model="form.enabled" label="true">激活</el-radio>
<el-radio v-model="form.enabled" label="false" >锁定</el-radio>
</el-form-item>
<el-form-item style="margin-bottom: 0px;" label="角色">
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 370px;" placeholder="请选择角色" />
</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="doSubmit">确认</el-button>
</div>
</el-dialog>
</template>
<script>
import { add, edit } from '@/api/user'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
name: 'Form',
components: { Treeselect },
props: {
roles: {
type: Array,
required: true
},
isAdd: {
type: Boolean,
required: true
},
sup_this: {
type: Object,
default: null
}
},
data() {
return {
dialog: false, loading: false, form: { username: '', email: '', enabled: 'false', roles: [] }, roleIds: [],
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
],
enabled: [
{ required: true, message: '状态不能为空', trigger: 'blur' }
]
}
}
},
methods: {
cancel() {
this.resetForm()
},
doSubmit() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true
this.form.roles = []
const _this = this
this.roleIds.forEach(function(data, index) {
const role = { id: data }
_this.form.roles.push(role)
})
if (this.isAdd) {
this.doAdd()
} else this.doEdit()
} else {
return false
}
})
},
doAdd() {
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
message: '默认密码：123456',
type: 'success',
duration: 2500
})
this.loading = false
this.$parent.$parent.init()
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
},
doEdit() {
edit(this.form).then(res => {
this.resetForm()
this.$notify({
title: '修改成功',
type: 'success',
duration: 2500
})
this.loading = false
this.sup_this.init()
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
},
resetForm() {
this.dialog = false
this.$refs['form'].resetFields()
this.roleIds = []
this.form = { username: '', email: '', enabled: 'false', roles: [] }
}
}
}
</script>
<style scoped>
</style>

30
src/views/system/user/module/search.vue → src/views/system/user/module/header.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="head-container">
<!-- 搜索 -->
<el-input v-model="query.value" clearable placeholder="输入关键字搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
<el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
<el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
@@ -8,18 +9,36 @@
<el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
</el-select>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
<add v-if="checkPermission(['ADMIN','USER_ALL','USER_CREATE'])" :roles="roles"/>
<el-button v-if="checkPermission(['ADMIN'])" :loading="downloadLoading" size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="download">导出</el-button>
<!-- 新增 -->
<div style="display: inline-block;margin: 0px 2px;">
<el-button
v-if="checkPermission(['ADMIN','USER_ALL','USER_CREATE'])"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="$refs.form.dialog = true">新增</el-button>
<eForm ref="form" :roles="roles" :is-add="true"/>
</div>
<!-- 导出 -->
<el-button
v-if="checkPermission(['ADMIN'])"
:loading="downloadLoading"
size="mini"
class="filter-item"
type="primary"
icon="el-icon-download"
@click="download">导出</el-button>
</div>
</template>
<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import { parseTime } from '@/utils/index'
import add from './add'
import eForm from './form'
// 查询条件
export default {
components: { add },
components: { eForm },
props: {
roles: {
type: Array,
@@ -45,10 +64,12 @@ export default {
},
methods: {
checkPermission,
// 去查询
toQuery() {
this.$parent.page = 0
this.$parent.init()
},
// 导出
download() {
this.downloadLoading = true
import('@/vendor/Export2Excel').then(excel => {
@@ -63,6 +84,7 @@ export default {
this.downloadLoading = false
})
},
// 数据转换
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'createTime' || j === 'lastPasswordResetTime') {