代码优化，组件复用
This commit is contained in:
郑杰
@@ -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": {
|
||||
|
||||
1
src/icons/svg/dev.svg
Normal file
1
src/icons/svg/dev.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?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>
|
||||
|
After Width: | Height: | Size: 732 B |
1
src/icons/svg/generate.svg
Normal file
1
src/icons/svg/generate.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<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(() => {
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 查询条件
|
||||
export default {
|
||||
props: {
|
||||
query: {
|
||||
@@ -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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<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 {
|
||||
|
||||
@@ -1,78 +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="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>
|
||||
</template>
|
||||
<script>
|
||||
import { add } from '@/api/redis'
|
||||
export default {
|
||||
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: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
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)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { key: '', value: '' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div{
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,27 +1,13 @@
|
||||
<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>
|
||||
|
||||
102
src/views/monitor/redis/module/form.vue
Normal file
102
src/views/monitor/redis/module/form.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<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="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, 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: '新增缓存',
|
||||
form: { key: '', value: '' },
|
||||
rules: {
|
||||
key: [
|
||||
{ required: true, message: '请输入Key', trigger: 'blur' }
|
||||
],
|
||||
value: [
|
||||
{ required: true, message: '请输入Value', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
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()
|
||||
this.form = { key: '', value: '' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,19 +1,31 @@
|
||||
<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,
|
||||
@@ -1,6 +1,6 @@
|
||||
<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 {
|
||||
|
||||
@@ -1,137 +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="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>
|
||||
</template>
|
||||
<script>
|
||||
import { add } from '@/api/menu'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import IconSelect from '@/components/IconSelect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect, IconSelect },
|
||||
props: {
|
||||
menus: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
roles: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, title: '新增菜单',
|
||||
form: { 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: {
|
||||
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: '添加成功',
|
||||
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)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }
|
||||
this.roleIds = []
|
||||
},
|
||||
selected(name) {
|
||||
this.form.icon = name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
div{
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +1,13 @@
|
||||
<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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
162
src/views/system/menu/module/form.vue
Normal file
162
src/views/system/menu/module/form.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<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, edit } from '@/api/menu'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import IconSelect from '@/components/IconSelect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect, IconSelect },
|
||||
props: {
|
||||
menus: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
roles: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
sup_this: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false,
|
||||
form: { 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: {
|
||||
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: '添加成功',
|
||||
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()
|
||||
this.form = { name: '', sort: 999, path: '', component: '', iframe: 'false', roles: [], pid: 0, icon: '' }
|
||||
this.roleIds = []
|
||||
},
|
||||
selected(name) {
|
||||
this.form.icon = name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,17 +1,27 @@
|
||||
<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,
|
||||
@@ -1,6 +1,6 @@
|
||||
<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 {
|
||||
|
||||
@@ -1,93 +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="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>
|
||||
</template>
|
||||
<script>
|
||||
import { add } from '@/api/permission'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
permissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, title: '新增权限',
|
||||
form: { name: '', alias: '', pid: 0 },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
alias: [
|
||||
{ required: true, message: '请输入别名', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
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)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.form = { name: '', alias: '', pid: 0 }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div{
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +1,13 @@
|
||||
<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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
118
src/views/system/permission/module/form.vue
Normal file
118
src/views/system/permission/module/form.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<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="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, edit } from '@/api/permission'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
permissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
sup_this: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false,
|
||||
form: { name: '', alias: '', pid: 0 },
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
],
|
||||
alias: [
|
||||
{ required: true, message: '请输入别名', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.resetForm()
|
||||
},
|
||||
doSubmit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
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()
|
||||
this.form = { name: '', alias: '', pid: 0 }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,17 +1,27 @@
|
||||
<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,
|
||||
@@ -1,6 +1,6 @@
|
||||
<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 {
|
||||
|
||||
@@ -1,94 +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="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>
|
||||
</template>
|
||||
<script>
|
||||
import { add } from '@/api/role'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
permissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false, title: '新增角色',
|
||||
form: { name: '', permissions: [], remark: '' }, permissionIds: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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)
|
||||
})
|
||||
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)
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
this.permissionIds = []
|
||||
this.form = { name: '', permissions: [], remark: '' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
div{
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +1,13 @@
|
||||
<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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
116
src/views/system/role/module/form.vue
Normal file
116
src/views/system/role/module/form.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<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="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, edit } from '@/api/role'
|
||||
import Treeselect from '@riophae/vue-treeselect'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
export default {
|
||||
components: { Treeselect },
|
||||
props: {
|
||||
permissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
isAdd: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
sup_this: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false, dialog: false,
|
||||
form: { name: '', permissions: [], remark: '' }, permissionIds: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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)
|
||||
})
|
||||
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()
|
||||
this.permissionIds = []
|
||||
this.form = { name: '', permissions: [], remark: '' }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,8 +1,20 @@
|
||||
<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()
|
||||
},
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
@@ -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
129
src/views/system/user/module/form.vue
Normal 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>
|
||||
@@ -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') {
|
||||
@@ -1,6 +1,6 @@
|
||||
<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 {
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<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"
|
||||
@@ -20,8 +18,8 @@
|
||||
<el-button type="primary" @click="doSubmit">确认</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</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>
|
||||
@@ -1,17 +1,28 @@
|
||||
<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,
|
||||
@@ -1,6 +1,6 @@
|
||||
<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 {
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<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-dialog :visible.sync="dialog" width="500px" @close="doSubmit">
|
||||
<el-upload
|
||||
:before-remove="handleBeforeRemove"
|
||||
:on-success="handleSuccess"
|
||||
@@ -12,14 +10,14 @@
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
@@ -1,18 +1,29 @@
|
||||
<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,
|
||||
Reference in New Issue
Block a user