Skip to content

F
front-backend
Commit ff0c36b5 by 郑杰
Options

代码优化，组件复用

parent 22a95e6f
Showing with 586 additions and 842 deletions
package.json
......@@ -88,7 +88,7 @@
"webpack": "4.16.5",
"webpack-bundle-analyzer": "2.13.1",
"webpack-cli": "3.1.0",
"webpack-dev-server": "3.1.5",
"webpack-dev-server": ">= 3.1.11",
"webpack-merge": "4.1.4"
},
"engines": {
......
src/icons/svg/dev.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546567861908" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2422" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M318.577778 819.2L17.066667 512l301.511111-307.2 45.511111 45.511111L96.711111 512l267.377778 261.688889zM705.422222 819.2l-45.511111-45.511111L927.288889 512l-267.377778-261.688889 45.511111-45.511111L1006.933333 512zM540.785778 221.866667l55.751111 11.150222L483.157333 802.133333l-55.751111-11.093333z" fill="#bfbfbf" p-id="2423"></path></svg>
\ No newline at end of file
src/icons/svg/generate.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546567963456" class="icon" style="" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3728" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.78125" height="200"><defs><style type="text/css"></style></defs><path d="M320.747082 1024H0V0h1024v501.540856h-69.727626V69.727626H69.727626v884.544748h251.019456z" p-id="3729" fill="#bfbfbf"></path><path d="M903.171984 669.385214L786.228794 786.228794h87.657587c0 96.722179-78.592996 175.315175-175.315175 175.315175-28.588327 0.099611-56.678599-6.972763-81.780545-20.420234l-42.633463 42.633463c37.154864 23.707393 80.385992 36.258366 124.513619 36.258366C827.766537 1020.015564 932.357977 915.424125 932.357977 786.228794h87.657587L903.171984 669.385214zM523.256031 786.228794c0-96.722179 78.592996-175.315175 175.315175-175.315175 29.484825 0 57.575097 7.271595 81.780545 20.420233l42.633463-42.633463c-37.154864-23.707393-80.385992-36.258366-124.513619-36.258366-129.195331 0-233.78677 104.59144-233.78677 233.786771h-87.657588L494.070039 903.171984l116.84358-116.843579h-87.657588v-0.099611zM806.848249 241.357198H139.455253V295.844358h667.392996zM517.976654 482.814008H139.455253v54.387548h378.521401zM309.789883 724.171206H139.455253v54.48716h170.33463z" p-id="3730" fill="#bfbfbf"></path></svg>
\ No newline at end of file
src/styles/index.scss
......@@ -12,6 +12,12 @@ body {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
.el-dialog__body {
padding: 20px 20px;
color: #606266;
font-size: 14px;
}
label {
font-weight: 700;
}
......
src/views/login/index.vue
......@@ -40,13 +40,6 @@ import { md5 } from '@/utils/md5'
export default {
name: 'Login',
data() {
const validatePass = (rule, value, callback) => {
if (value.length < 5) {
callback(new Error('密码不能小于5位'))
} else {
callback()
}
}
return {
loginForm: {
username: 'admin',
......@@ -54,7 +47,7 @@ export default {
},
loginRules: {
username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
password: [{ required: true, trigger: 'blur', validator: validatePass }]
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
},
loading: false,
pwdType: 'password',
......
src/views/monitor/log/index.vue
<template>
<div class="app-container">
<search :query="query"/>
<eHeader :query="query"/>
<!--表格渲染-->
<el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
<el-table-column prop="username" label="用户名"/>
......@@ -8,7 +8,7 @@
<el-table-column prop="description" label="描述"/>
<el-table-column :show-overflow-tooltip="true" prop="method" label="方法名称"/>
<el-table-column :show-overflow-tooltip="true" prop="params" label="参数"/>
<el-table-column :show-overflow-tooltip="true" prop="exceptionDetail" label="异常详细"/>
<el-table-column :show-overflow-tooltip="true" prop="exceptionDetail" label="异常堆栈信息"/>
<el-table-column prop="time" label="请求耗时" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
......@@ -41,9 +41,9 @@
<script>
import initData from '../../../mixins/initData'
import { parseTime } from '@/utils/index'
import search from './module/search'
import eHeader from './module/header'
export default {
components: { search },
components: { eHeader },
mixins: [initData],
created() {
this.$nextTick(() => {
......
src/views/monitor/log/module/search.vue → src/views/monitor/log/module/header.vue
......@@ -9,7 +9,6 @@
</template>
<script>
// 查询条件
export default {
props: {
query: {
......
src/views/monitor/log/msg.vue
......@@ -24,8 +24,8 @@ export default {
name: 'Msg',
data() {
return {
height: document.documentElement.clientHeight - 132 + 'px;',
data: [{ name: 'elAdmin-', timestamp: parseTime(new Date().getTime()), threadName: 'system-prompt-message', level: 'INFO', className: 'me.zhengjie.AppRun' + ' :', body: '(*^ω^*) 欢迎使用，暂无日志输出~' }],
height: document.documentElement.clientHeight - 95 + 'px;',
data: [{ name: 'elAdmin-', timestamp: new Date(), threadName: 'system-prompt-message', level: 'INFO', className: 'me.zhengjie.AppRun' + ' :', body: 'Welcome, no log output~' }],
// level
INFO: '#0000ff', WARN: '#FFFF00', ERROR: '#FF0000', DEBUG: '#DEA000'
}
......@@ -99,7 +99,6 @@ export default {
}
},
getColor(level) {
// INFO: '#0000ff', WARN: '#FFFF00', ERROR: '#FF0000', DEBUG: '#DEA000',
if (level === 'INFO') {
return this.INFO
} else if (level === 'WARN') {
......@@ -115,5 +114,5 @@ export default {
</script>
<style scoped>
textarea,input,button{outline:0}.container .buttons .closes,.container .buttons .minimize,.container .buttons .maximize{padding:0;margin:0;margin-right:6px;width:12px;height:12px;border:1px solid rgba(0,0,0,0);border-radius:6px}.container{width:100%;margin:5px}.container .handle{height:38px;background:#f9f9f9;border:1px solid #eee;border-top-left-radius:3px;border-top-right-radius:3px;font-family:'consolas';font-size:13px;line-height:38px;text-align:center}.container .buttons{position:absolute;float:left;margin:0 8px}.container .buttons .closes{background-color:#fc625d}.container .buttons .minimize{margin-left:8px;background-color:#fdbc40}.container .buttons .maximize{margin-left:8px;background-color:#35cd4b}.container .console{font-family:consolas;overflow-y:scroll;background:#494949;color:#f7f7f7;padding:10px;font-size:14px}
button,input,textarea{outline:0}.container .buttons .closes,.container .buttons .maximize,.container .buttons .minimize{padding:0;margin:0;margin-right:6px;width:12px;height:12px;border:1px solid transparent;border-radius:6px}.container{width:100%;margin:5px}.container .console{font-family:consolas;overflow-y:scroll;background:#494949;color:#f7f7f7;padding:10px;font-size:14px}
</style>
src/views/monitor/redis/index.vue
<template>
<div class="app-container">
<search :query="query"/>
<eHeader :query="query"/>
<!--表格渲染-->
<el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
<el-table-column label="序号" width="80" align="center">
......@@ -44,10 +44,10 @@ import initData from '../../../mixins/initData'
import { del } from '@/api/redis'
import { getPermissionTree } from '@/api/permission'
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 {
......
src/views/monitor/redis/module/edit.vue
<template>
<div>
<el-button size="mini" type="success" @click="to">编辑</el-button>
<el-dialog :visible.sync="dialog" :title="title" style="text-align: left" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
<el-form-item label="key" prop="key">
<el-input v-model="form.key" style="width: 370px;"/>
</el-form-item>
<el-form-item label="value" prop="value">
<el-input v-model="form.value" style="width: 370px;" rows="6" type="textarea"/>
</el-form-item>
</el-form>
</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" :sup_this="sup_this" :is-add="false"/>
</div>
</template>
<script>
import { edit } from '@/api/redis'
import eForm from './form'
export default {
components: { eForm },
props: {
data: {
type: Object,
......@@ -32,63 +18,16 @@ export default {
required: true
}
},
data() {
return {
loading: false, dialog: false, title: '编辑缓存',
form: { key: '', value: '' },
rules: {
key: [
{ required: true, message: '请输入Key', trigger: 'blur' }
],
value: [
{ required: true, message: '请输入Value', trigger: 'blur' }
]
}
}
},
methods: {
to() {
this.form = { key: this.data.key, value: this.data.value }
this.dialog = true
},
cancel() {
this.resetForm()
},
doSubmit() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true
const _this = this
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.form = { key: '', value: '' }
const _this = this.$refs.form
_this.form = { key: this.data.key, value: this.data.value }
_this.dialog = true
}
}
}
</script>
<style scoped>
div{
display: inline-block;
margin-right: 3px;
}
div{display: inline-block;margin-right: 3px;}
</style>
src/views/monitor/redis/module/add.vue → src/views/monitor/redis/module/form.vue
<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="key" prop="key">
<el-input v-model="form.key" style="width: 370px;"/>
</el-form-item>
<el-form-item label="value" prop="value">
<el-input v-model="form.value" style="width: 370px;" rows="6" type="textarea"/>
</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>
<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="key" prop="key">
<el-input v-model="form.key" style="width: 370px;"/>
</el-form-item>
<el-form-item label="value" prop="value">
<el-input v-model="form.value" style="width: 370px;" rows="6" type="textarea"/>
</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 } from '@/api/redis'
import { add, edit } from '@/api/redis'
export default {
props: {
isAdd: {
type: Boolean,
required: true
},
sup_this: {
type: Object,
default: null
}
},
data() {
return {
loading: false, dialog: false, title: '新增缓存',
......@@ -42,24 +50,44 @@ export default {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
type: 'success',
duration: 2500
})
this.loading = false
this.$parent.$parent.init()
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
if (this.isAdd) {
this.doAdd()
} else this.doEdit()
} else {
return false
}
})
},
doAdd() {
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
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()
......@@ -70,9 +98,5 @@ export default {
</script>
<style scoped>
div{
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
</style>
src/views/monitor/redis/module/search.vue → src/views/monitor/redis/module/header.vue
<template>
<div class="head-container">
<!-- 搜索 -->
<el-input v-model="query.value" clearable placeholder="输入关键词搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
<add v-if="checkPermission(['ADMIN','REDIS_ALL','REDIS_CREATE'])"/>
<!-- 新增 -->
<div style="display: inline-block;margin: 0px 2px;">
<el-button
v-if="checkPermission(['ADMIN','REDIS_ALL','REDIS_CREATE'])"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="$refs.form.dialog = true">新增</el-button>
<eForm ref="form" :is-add="true"/>
</div>
<!-- 清空缓存 -->
<el-button v-if="checkPermission(['ADMIN','REDIS_ALL','REDIS_DELETE'])" :loading="deleteAllLoading" type="warning" size="mini" class="filter-item" icon="el-icon-delete" @click="deleteAll">清空缓存</el-button>
</div>
</template>
<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import add from './add'
import eForm from './form'
import { delAll } from '@/api/redis'
// 查询条件
export default {
components: { add },
components: { eForm },
props: {
query: {
type: Object,
......
src/views/system/menu/index.vue
<template>
<div class="app-container">
<search :roles="roles" :menus="menus" :query="query"/>
<eHeader :roles="roles" :menus="menus" :query="query"/>
<!--表格渲染-->
<tree-table v-loading="loading" :data="data" :expand-all="true" :columns="columns" border size="small">
<el-table-column prop="icon" label="图标" align="center" width="80px">
......@@ -54,10 +54,10 @@ import treeTable from '@/components/TreeTable'
import initData from '../../../mixins/initData'
import { del, getMenusTree } from '@/api/menu'
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, treeTable },
components: { eHeader, edit, treeTable },
mixins: [initData],
data() {
return {
......
src/views/system/menu/module/edit.vue
<template>
<div>
<el-button size="mini" type="success" @click="to">编辑</el-button>
<el-dialog :visible.sync="dialog" :title="title" style="text-align: left" width="600px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="菜单图标">
<el-popover
placement="bottom-start"
width="460"
trigger="click"
@show="$refs['iconSelect'].reset()">
<IconSelect ref="iconSelect" @selected="selected" />
<el-input slot="reference" v-model="form.icon" style="width: 460px;" placeholder="点击选择图标" readonly>
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
<i v-else slot="prefix" class="el-icon-search el-input__icon"/>
</el-input>
</el-popover>
</el-form-item>
<el-form-item label="菜单名称" prop="name">
<el-input v-model="form.name" placeholder="名称" style="width: 460px;"/>
</el-form-item>
<el-form-item label="菜单排序" prop="sort">
<el-input v-model.number="form.sort" placeholder="序号越小越靠前" style="width: 460px;"/>
</el-form-item>
<el-form-item label="内部菜单" prop="iframe">
<el-radio v-model="form.iframe" label="false">是</el-radio>
<el-radio v-model="form.iframe" label="true" >否</el-radio>
</el-form-item>
<el-form-item label="链接地址">
<el-input v-model="form.path" placeholder="菜单路径" style="width: 460px;"/>
</el-form-item>
<el-form-item v-if="form.iframe === 'false'" label="组件路径">
<el-input v-model="form.component" placeholder="菜单路径" style="width: 460px;"/>
</el-form-item>
<el-form-item label="上级类目">
<treeselect v-model="form.pid" :options="menus" style="width: 460px;" placeholder="选择上级类目" />
</el-form-item>
<el-form-item style="margin-top: -10px;margin-bottom: 0px;" label="选择角色">
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 460px;" 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" :menus="menus" :sup_this="sup_this" :is-add="false"/>
</div>
</template>
<script>
import { edit } from '@/api/menu'
import IconSelect from '@/components/IconSelect'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import eForm from './form'
export default {
components: { Treeselect, IconSelect },
components: { eForm },
props: {
data: {
type: Object,
......@@ -71,74 +26,15 @@ export default {
required: true
}
},
data() {
return {
loading: false, dialog: false, title: '编辑菜单',
form: { id: '', name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }, roleIds: [],
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
sort: [
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
],
iframe: [
{ required: true, message: '请选择菜单类型', trigger: 'blur' }
]
}
}
},
methods: {
to() {
const _this = this
this.form = { id: this.data.id, component: this.data.component, name: this.data.name, sort: this.data.sort, pid: this.data.pid, path: this.data.path, iframe: this.data.iframe.toString(), roles: [], icon: this.data.icon }
const _this = this.$refs.form
_this.roleIds = []
_this.form = { id: this.data.id, component: this.data.component, name: this.data.name, sort: this.data.sort, pid: this.data.pid, path: this.data.path, iframe: this.data.iframe.toString(), roles: [], icon: this.data.icon }
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
setTimeout(() => {
_this.sup_this.init()
_this.sup_this.getMenus()
}, 200)
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
} else {
return false
}
})
},
resetForm() {
this.dialog = false
this.$refs['form'].resetFields()
this.form = { id: '', name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }
this.roleIds = []
},
selected(name) {
this.form.icon = name
_this.dialog = true
}
}
}
......
src/views/system/menu/module/add.vue → src/views/system/menu/module/form.vue
<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="600px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="菜单图标">
<el-popover
placement="bottom-start"
width="460"
trigger="click"
@show="$refs['iconSelect'].reset()">
<IconSelect ref="iconSelect" @selected="selected" />
<el-input slot="reference" v-model="form.icon" style="width: 460px;" placeholder="点击选择图标" readonly>
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
<i v-else slot="prefix" class="el-icon-search el-input__icon"/>
</el-input>
</el-popover>
</el-form-item>
<el-form-item label="菜单名称" prop="name">
<el-input v-model="form.name" placeholder="名称" style="width: 460px;"/>
</el-form-item>
<el-form-item label="菜单排序" prop="sort">
<el-input v-model.number="form.sort" placeholder="序号越小越靠前" style="width: 460px;"/>
</el-form-item>
<el-form-item label="内部菜单" prop="iframe">
<el-radio v-model="form.iframe" label="false">是</el-radio>
<el-radio v-model="form.iframe" label="true" >否</el-radio>
</el-form-item>
<el-form-item label="链接地址">
<el-input v-model="form.path" placeholder="菜单路径" style="width: 460px;"/>
</el-form-item>
<el-form-item v-if="form.iframe === 'false'" label="组件路径">
<el-input v-model="form.component" placeholder="菜单路径" style="width: 460px;"/>
</el-form-item>
<el-form-item label="上级类目">
<treeselect v-model="form.pid" :options="menus" style="width: 460px;" placeholder="选择上级类目" />
</el-form-item>
<el-form-item style="margin-top: -10px;margin-bottom: 0px;" label="选择角色">
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 460px;" 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>
<el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增菜单' : '编辑菜单'" width="600px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="菜单图标">
<el-popover
placement="bottom-start"
width="460"
trigger="click"
@show="$refs['iconSelect'].reset()">
<IconSelect ref="iconSelect" @selected="selected" />
<el-input slot="reference" v-model="form.icon" style="width: 460px;" placeholder="点击选择图标" readonly>
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
<i v-else slot="prefix" class="el-icon-search el-input__icon"/>
</el-input>
</el-popover>
</el-form-item>
<el-form-item label="菜单名称" prop="name">
<el-input v-model="form.name" placeholder="名称" style="width: 460px;"/>
</el-form-item>
<el-form-item label="菜单排序" prop="sort">
<el-input v-model.number="form.sort" placeholder="序号越小越靠前" style="width: 460px;"/>
</el-form-item>
<el-form-item label="内部菜单" prop="iframe">
<el-radio v-model="form.iframe" label="false">是</el-radio>
<el-radio v-model="form.iframe" label="true" >否</el-radio>
</el-form-item>
<el-form-item label="链接地址">
<el-input v-model="form.path" placeholder="菜单路径" style="width: 460px;"/>
</el-form-item>
<el-form-item v-if="form.iframe === 'false'" label="组件路径">
<el-input v-model="form.component" placeholder="菜单路径" style="width: 460px;"/>
</el-form-item>
<el-form-item label="上级类目">
<treeselect v-model="form.pid" :options="menus" style="width: 460px;" placeholder="选择上级类目" />
</el-form-item>
<el-form-item style="margin-top: -10px;margin-bottom: 0px;" label="选择角色">
<treeselect v-model="roleIds" :multiple="true" :options="roles" style="width: 460px;" 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 } from '@/api/menu'
import { add, edit } from '@/api/menu'
import Treeselect from '@riophae/vue-treeselect'
import IconSelect from '@/components/IconSelect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
......@@ -61,11 +59,19 @@ export default {
roles: {
type: Array,
required: true
},
isAdd: {
type: Boolean,
required: true
},
sup_this: {
type: Object,
default: null
}
},
data() {
return {
loading: false, dialog: false, title: '新增菜单',
loading: false, dialog: false,
form: { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }, roleIds: [],
rules: {
name: [
......@@ -94,27 +100,50 @@ export default {
const role = { id: data }
_this.form.roles.push(role)
})
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
type: 'success',
duration: 2500
})
this.loading = false
setTimeout(() => {
this.$parent.$parent.init()
this.$parent.$parent.getMenus()
}, 200)
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
if (this.isAdd) {
this.doAdd()
} else this.doEdit()
} else {
return false
}
})
},
doAdd() {
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
type: 'success',
duration: 2500
})
this.loading = false
setTimeout(() => {
this.$parent.$parent.init()
this.$parent.$parent.getMenus()
}, 200)
}).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
setTimeout(() => {
this.sup_this.init()
this.sup_this.getMenus()
}, 200)
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
},
resetForm() {
this.dialog = false
this.$refs['form'].resetFields()
......@@ -128,10 +157,6 @@ export default {
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
div{
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
<style scoped>
</style>
src/views/system/menu/module/search.vue → src/views/system/menu/module/header.vue
<template>
<div class="head-container">
<!-- 搜索 -->
<el-input v-model="query.value" clearable placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
<add v-if="checkPermission(['ADMIN','MENU_ALL','MENU_CREATE'])" :roles="roles" :menus="menus"/>
<!-- 新增 -->
<div style="display: inline-block;margin: 0px 2px;">
<el-button
v-if="checkPermission(['ADMIN','MENU_ALL','MENU_CREATE'])"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="$refs.form.dialog = true">新增</el-button>
<eForm ref="form" :roles="roles" :menus="menus" :is-add="true"/>
</div>
</div>
</template>
<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import add from './add'
// 查询条件
import checkPermission from '@/utils/permission'
import eForm from './form'
export default {
components: { add },
components: { eForm },
props: {
query: {
type: Object,
......
src/views/system/permission/index.vue
<template>
<div class="app-container">
<search :permissions="permissions" :query="query"/>
<eHeader :permissions="permissions" :query="query"/>
<!--表格渲染-->
<tree-table v-loading="loading" :data="data" :expand-all="true" :columns="columns" border size="small">
<el-table-column prop="createTime" label="创建日期">
......@@ -36,10 +36,10 @@ import initData from '../../../mixins/initData'
import { del } from '@/api/permission'
import { getPermissionTree } from '@/api/permission'
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, treeTable },
components: { eHeader, edit, treeTable },
mixins: [initData],
data() {
return {
......
src/views/system/permission/module/edit.vue
<template>
<div>
<el-button :disabled="data.id === 1" size="mini" type="success" @click="to">编辑</el-button>
<el-dialog :visible.sync="dialog" :title="title" style="text-align: left" 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: 360px;"/>
</el-form-item>
<el-form-item label="别名" prop="alias">
<el-input v-model="form.alias" style="width: 360px;"/>
</el-form-item>
<el-form-item style="margin-bottom: 0px;" label="上级类目">
<treeselect v-model="form.pid" :options="permissions" style="width: 360px;" 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" :permissions="permissions" :sup_this="sup_this" :is-add="false"/>
</div>
</template>
<script>
import { edit } from '@/api/permission'
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: {
data: {
type: Object,
......@@ -40,58 +22,11 @@ export default {
required: true
}
},
data() {
return {
loading: false, dialog: false, title: '编辑权限',
form: { id: '', name: '', alias: '', pid: 0 },
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
alias: [
{ required: true, message: '请输入别名', trigger: 'blur' }
]
}
}
},
methods: {
to() {
this.form = { id: this.data.id, name: this.data.name, alias: this.data.alias, pid: this.data.pid }
this.dialog = true
},
cancel() {
this.resetForm()
},
doSubmit() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true
const _this = this
edit(this.form).then(res => {
this.resetForm()
this.$notify({
title: '修改成功',
type: 'success',
duration: 2500
})
this.loading = false
setTimeout(() => {
_this.sup_this.init()
_this.sup_this.getPermissions()
}, 200)
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
} else {
return false
}
})
},
resetForm() {
this.dialog = false
this.$refs['form'].resetFields()
this.form = { id: '', name: '', alias: '', pid: 0 }
const _this = this.$refs.form
_this.form = { id: this.data.id, name: this.data.name, alias: this.data.alias, pid: this.data.pid }
_this.dialog = true
}
}
}
......
src/views/system/permission/module/add.vue → src/views/system/permission/module/form.vue
<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="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" style="width: 360px;"/>
</el-form-item>
<el-form-item label="别名" prop="alias">
<el-input v-model="form.alias" style="width: 360px;"/>
</el-form-item>
<el-form-item style="margin-bottom: 0px;" label="上级类目">
<treeselect v-model="form.pid" :options="permissions" style="width: 360px;" 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>
<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="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" style="width: 360px;"/>
</el-form-item>
<el-form-item label="别名" prop="alias">
<el-input v-model="form.alias" style="width: 360px;"/>
</el-form-item>
<el-form-item style="margin-bottom: 0px;" label="上级类目">
<treeselect v-model="form.pid" :options="permissions" style="width: 360px;" 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 } from '@/api/permission'
import { add, edit } from '@/api/permission'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
......@@ -30,11 +28,19 @@ export default {
permissions: {
type: Array,
required: true
},
isAdd: {
type: Boolean,
required: true
},
sup_this: {
type: Object,
default: null
}
},
data() {
return {
loading: false, dialog: false, title: '新增权限',
loading: false, dialog: false,
form: { name: '', alias: '', pid: 0 },
rules: {
name: [
......@@ -54,27 +60,50 @@ export default {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
type: 'success',
duration: 2500
})
this.loading = false
setTimeout(() => {
this.$parent.$parent.init()
this.$parent.$parent.getPermissions()
}, 200)
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
if (this.isAdd) {
this.doAdd()
} else this.doEdit()
} else {
return false
}
})
},
doAdd() {
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
type: 'success',
duration: 2500
})
this.loading = false
setTimeout(() => {
this.$parent.$parent.init()
this.$parent.$parent.getPermissions()
}, 200)
}).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
setTimeout(() => {
this.sup_this.init()
this.sup_this.getPermissions()
}, 200)
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
},
resetForm() {
this.dialog = false
this.$refs['form'].resetFields()
......@@ -85,9 +114,5 @@ export default {
</script>
<style scoped>
div{
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
</style>
src/views/system/permission/module/search.vue → src/views/system/permission/module/header.vue
<template>
<div class="head-container">
<!-- 搜索 -->
<el-input v-model="query.value" clearable placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
<add v-if="checkPermission(['ADMIN','PERMISSION_ALL','PERMISSION_CREATE'])" :permissions="permissions"/>
<!-- 新增 -->
<div style="display: inline-block;margin: 0px 2px;">
<el-button
v-if="checkPermission(['ADMIN','PERMISSION_ALL','PERMISSION_CREATE'])"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="$refs.form.dialog = true">新增</el-button>
<eForm ref="form" :permissions="permissions" :is-add="true"/>
</div>
</div>
</template>
<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import add from './add'
// 查询条件
import checkPermission from '@/utils/permission'
import eForm from './form'
export default {
components: { add },
components: { eForm },
props: {
query: {
type: Object,
......
src/views/system/role/index.vue
<template>
<div class="app-container">
<search :permissions="permissions" :query="query"/>
<eHeader :permissions="permissions" :query="query"/>
<!--表格渲染-->
<el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
<el-table-column prop="name" label="名称"/>
......@@ -39,15 +39,15 @@
</template>
<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import checkPermission from '@/utils/permission'
import initData from '../../../mixins/initData'
import { del } from '@/api/role'
import { getPermissionTree } from '@/api/permission'
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 {
......
src/views/system/role/module/edit.vue
<template>
<div>
<el-button :disabled="data.id === 1" size="mini" type="success" @click="to">编辑</el-button>
<el-dialog :visible.sync="dialog" :title="title" style="text-align: left" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" style="width: 370px;"/>
</el-form-item>
<el-form-item label="权限">
<treeselect v-model="permissionIds" :multiple="true" :options="permissions" style="width: 370px;" placeholder="请选择权限" />
</el-form-item>
<el-form-item style="margin-top: -10px;" label="描述">
<el-input v-model="form.remark" rows="5" style="width: 370px;" type="textarea"/>
</el-form-item>
</el-form>
</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" :permissions="permissions" :sup_this="sup_this" :is-add="false"/>
</div>
</template>
<script>
import { edit } from '@/api/role'
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: {
data: {
type: Object,
......@@ -42,62 +22,15 @@ export default {
required: true
}
},
data() {
return {
loading: false, dialog: false, title: '编辑角色',
form: { id: '', name: '', permissions: [], remark: '' }, permissionIds: [],
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
]
}
}
},
methods: {
to() {
const _this = this
this.form = { id: this.data.id, name: this.data.name, remark: this.data.remark, permissions: [] }
const _this = this.$refs.form
_this.permissionIds = []
_this.form = { id: this.data.id, name: this.data.name, remark: this.data.remark, permissions: [] }
this.data.permissions.forEach(function(data, index) {
_this.permissionIds.push(data.id)
})
this.dialog = true
},
cancel() {
this.resetForm()
},
doSubmit() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.loading = true
this.form.permissions = []
const _this = this
this.permissionIds.forEach(function(data, index) {
const permission = { id: data }
_this.form.permissions.push(permission)
})
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.permissionIds = []
this.form = { name: '', permissions: [], remark: '' }
_this.dialog = true
}
}
}
......
src/views/system/role/module/add.vue → src/views/system/role/module/form.vue
<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="name">
<el-input v-model="form.name" style="width: 370px;"/>
</el-form-item>
<el-form-item label="权限">
<treeselect v-model="permissionIds" :multiple="true" :options="permissions" style="width: 370px;" placeholder="请选择权限" />
</el-form-item>
<el-form-item style="margin-top: -10px;" label="描述">
<el-input v-model="form.remark" style="width: 370px;" rows="5" type="textarea"/>
</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>
<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="name">
<el-input v-model="form.name" style="width: 370px;"/>
</el-form-item>
<el-form-item label="权限">
<treeselect v-model="permissionIds" :multiple="true" :options="permissions" style="width: 370px;" placeholder="请选择权限" />
</el-form-item>
<el-form-item style="margin-top: -10px;" label="描述">
<el-input v-model="form.remark" style="width: 370px;" rows="5" type="textarea"/>
</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 } from '@/api/role'
import { add, edit } from '@/api/role'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
......@@ -30,11 +28,19 @@ export default {
permissions: {
type: Array,
required: true
},
isAdd: {
type: Boolean,
required: true
},
sup_this: {
type: Object,
default: null
}
},
data() {
return {
loading: false, dialog: false, title: '新增角色',
loading: false, dialog: false,
form: { name: '', permissions: [], remark: '' }, permissionIds: [],
rules: {
name: [
......@@ -57,24 +63,44 @@ export default {
const permission = { id: data }
_this.form.permissions.push(permission)
})
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
type: 'success',
duration: 2500
})
this.loading = false
this.$parent.$parent.init()
}).catch(err => {
this.loading = false
console.log(err.response.data.message)
})
if (this.isAdd) {
this.doAdd()
} else this.doEdit()
} else {
return false
}
})
},
doAdd() {
add(this.form).then(res => {
this.resetForm()
this.$notify({
title: '添加成功',
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()
......@@ -86,9 +112,5 @@ export default {
</script>
<style scoped>
div{
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
</style>
src/views/system/role/module/search.vue → src/views/system/role/module/header.vue
<template>
<div class="head-container">
<!-- 搜索 -->
<el-input v-model="query.value" clearable placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
<add v-if="checkPermission(['ADMIN','ROLE_ALL','ROLE_CREATE'])" :permissions="permissions"/>
<!-- 新增 -->
<div style="display: inline-block;margin: 0px 2px;">
<el-button
v-if="checkPermission(['ADMIN','ROLE_ALL','ROLE_CREATE'])"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-plus"
@click="$refs.form.dialog = true">新增</el-button>
<eForm ref="form" :permissions="permissions" :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>
......@@ -10,10 +22,10 @@
<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: {
query: {
type: Object,
......@@ -32,7 +44,6 @@ export default {
methods: {
checkPermission,
toQuery() {
console.log(this.query)
this.$parent.page = 0
this.$parent.init()
},
......
src/views/system/user/center.vue
<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>
src/views/system/user/index.vue
<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 {
......
src/views/system/user/module/edit.vue
<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>
src/views/system/user/module/add.vue → src/views/system/user/module/form.vue
<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>
<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 } from '@/api/user'
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 {
loading: false, dialog: false, title: '新增用户',
form: { username: '', email: '', enabled: 'false', roles: [] }, roleIds: [],
dialog: false, loading: false, form: { username: '', email: '', enabled: 'false', roles: [] }, roleIds: [],
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
......@@ -69,25 +75,45 @@ export default {
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)
})
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()
......@@ -99,9 +125,5 @@ export default {
</script>
<style scoped>
div{
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
</style>
src/views/system/user/module/search.vue → src/views/system/user/module/header.vue
<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') {
......
src/views/tools/picture/index.vue
<template>
<div class="app-container">
<search :query="query"/>
<eHeader :query="query"/>
<!--表格渲染-->
<el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
<el-table-column prop="filename" label="文件名"/>
......@@ -50,9 +50,9 @@ import checkPermission from '@/utils/permission' // 权限判断函数
import initData from '../../../mixins/initData'
import { del } from '@/api/picture'
import { parseTime } from '@/utils/index'
import search from './module/search'
import eHeader from './module/header'
export default {
components: { search },
components: { eHeader },
mixins: [initData],
data() {
return {
......
src/views/tools/picture/module/add.vue → src/views/tools/picture/module/form.vue
<template>
<div>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传图片</el-button>
<el-dialog :visible.sync="dialog" width="600px" @close="doSubmit">
<el-upload
:on-preview="handlePictureCardPreview"
:before-remove="handleBeforeRemove"
:on-success="handleSuccess"
:on-error="handleError"
:headers="headers"
:file-list="fileList"
:action="imagesUploadApi"
list-type="picture-card">
<i class="el-icon-plus"/>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSubmit">确认</el-button>
</div>
<el-dialog :visible.sync="dialog" width="600px" @close="doSubmit">
<el-upload
:on-preview="handlePictureCardPreview"
:before-remove="handleBeforeRemove"
:on-success="handleSuccess"
:on-error="handleError"
:headers="headers"
:file-list="fileList"
:action="imagesUploadApi"
list-type="picture-card">
<i class="el-icon-plus"/>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSubmit">确认</el-button>
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import { del } from '@/api/picture'
......@@ -84,9 +82,5 @@ export default {
</script>
<style scoped>
div{
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
</style>
src/views/tools/picture/module/search.vue → src/views/tools/picture/module/header.vue
<template>
<div class="head-container">
<!--搜索-->
<el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
<add v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_UPLOAD'])"/>
<!-- 上传 -->
<div style="display: inline-block;margin: 0px 2px;">
<el-button
v-if="checkPermission(['ADMIN','PICTURE_ALL','PICTURE_UPLOAD'])"
class="filter-item"
size="mini"
type="primary"
icon="el-icon-upload"
@click="$refs.form.dialog = true">上传图片</el-button>
<eForm ref="form"/>
</div>
</div>
</template>
<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import add from './add'
import eForm from './form'
// 查询条件
export default {
components: { add },
components: { eForm },
props: {
query: {
type: Object,
......
src/views/tools/qiniu/module/list.vue
<template>
<div class="app-container">
<search :query="query"/>
<eHeader :query="query"/>
<!--表格渲染-->
<el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
<el-table-column :show-overflow-tooltip="true" prop="key" label="文件名"/>
......@@ -53,9 +53,9 @@ import checkPermission from '@/utils/permission' // 权限判断函数
import initData from '../../../../mixins/initData'
import { del, download } from '@/api/qiniu'
import { parseTime } from '@/utils/index'
import search from './module/search'
import eHeader from './module/header'
export default {
components: { search },
components: { eHeader },
mixins: [initData],
data() {
return {
......
src/views/tools/qiniu/module/module/add.vue → src/views/tools/qiniu/module/module/form.vue
<template>
<div>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传文件</el-button>
<el-dialog :visible.sync="dialog" width="400px" @close="doSubmit">
<el-upload
:before-remove="handleBeforeRemove"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
:headers="headers"
:action="qiNiuUploadApi"
class="upload-demo"
multiple>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" style="display: block;width: 330px" class="el-upload__tip">请勿上传违法文件，且文件不超过5M</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSubmit">确认</el-button>
</div>
</el-dialog>
</div>
<el-dialog :visible.sync="dialog" width="500px" @close="doSubmit">
<el-upload
:before-remove="handleBeforeRemove"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
:headers="headers"
:action="qiNiuUploadApi"
class="upload-demo"
multiple>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" style="display: block;" class="el-upload__tip">请勿上传违法文件，且文件不超过5M</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSubmit">确认</el-button>
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import { del } from '@/api/qiniu'
......@@ -82,9 +80,5 @@ export default {
</script>
<style scoped>
div{
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
</style>
src/views/tools/qiniu/module/module/search.vue → src/views/tools/qiniu/module/module/header.vue
<template>
<div class="head-container">
<!-- 搜索 -->
<el-input v-model="query.value" clearable placeholder="输入文件名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
<add/>
<!-- 上传 -->
<div style="display: inline-block;margin: 0px 2px;">
<el-button
class="filter-item"
size="mini"
type="primary"
icon="el-icon-upload"
@click="$refs.form.dialog = true">上传文件</el-button>
<eForm ref="form"/>
</div>
<!-- 同步 -->
<el-button :icon="icon" class="filter-item" size="mini" type="primary" @click="synchronize">{{ buttonName }}</el-button>
</div>
</template>
<script>
import add from './add'
import eForm from './form'
import { sync } from '@/api/qiniu'
// 查询条件
export default {
components: { add },
components: { eForm },
props: {
query: {
type: Object,
......
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