角色管理,权限管理,以及sql语句
parent
19c632b06b
commit
cb945a007d
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<layout-content
|
||||
:header="formType == 'add' ? $t('role.add') : $t('role.edit')"
|
||||
back-name="system-dept"
|
||||
>
|
||||
<el-form ref="roleForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="form.name" :placeholder="$t('commons.name')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('commons.description')" prop="description">
|
||||
<el-input type="textarea" v-model="form.deptSort" :placeholder="$t('commons.description')" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="save">{{ $t('commons.confirm') }}</el-button>
|
||||
<el-button @click="reset">{{ $t('commons.reset') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</layout-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import { execute } from '@/api/system/dynamic'
|
||||
export default {
|
||||
name: 'SystemRoleForm',
|
||||
components: { LayoutContent },
|
||||
data() {
|
||||
return {
|
||||
formType: 'add',
|
||||
form: {},
|
||||
rule: {
|
||||
name: [{ required: true, trigger: 'blur', validator: this.roleValidator }, { min: 1, max: 10, message: this.$t('commons.input_limit', [1, 10]), trigger: 'blur' }],
|
||||
description: [{ max: 50, message: this.$t('commons.char_can_not_more_50'), trigger: 'blur' }]
|
||||
},
|
||||
roles: [],
|
||||
originName: null
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.$router.currentRoute.params && this.$router.currentRoute.params.roleId) {
|
||||
var row = this.$router.currentRoute.params
|
||||
this.edit(row)
|
||||
} else {
|
||||
this.create()
|
||||
}
|
||||
this.setLoyoutInfo()
|
||||
this.queryAllRoles()
|
||||
},
|
||||
mounted() {
|
||||
this.bindKey()
|
||||
},
|
||||
destroyed() {
|
||||
this.unBindKey()
|
||||
},
|
||||
methods: {
|
||||
entryKey(event) {
|
||||
const keyCode = event.keyCode
|
||||
if (keyCode === 13) {
|
||||
this.save()
|
||||
}
|
||||
},
|
||||
bindKey() {
|
||||
document.addEventListener('keypress', this.entryKey)
|
||||
},
|
||||
unBindKey() {
|
||||
document.removeEventListener('keypress', this.entryKey)
|
||||
},
|
||||
executeAxios(url, type, data, callBack) {
|
||||
var param = {
|
||||
url: url,
|
||||
type: type,
|
||||
data: data,
|
||||
callBack: callBack
|
||||
}
|
||||
execute(param)
|
||||
.then(function(res) {
|
||||
if (param.callBack) {
|
||||
param.callBack(res)
|
||||
}
|
||||
})
|
||||
.catch(function(e) {
|
||||
if (param.error) {
|
||||
param.error(e)
|
||||
}
|
||||
})
|
||||
},
|
||||
create: function create() {
|
||||
this.formType = 'add'
|
||||
},
|
||||
edit: function edit(row) {
|
||||
this.formType = 'modify'
|
||||
this.form = Object.assign()({}, row)
|
||||
this.originName = row.name
|
||||
},
|
||||
setLoyoutInfo() {
|
||||
this.$emit('on-plugin-layout', {
|
||||
header: this.formType === 'add' ? this.$t('role.add') : this.$t('role.modify'),
|
||||
backName: 'system-role'
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
if (this.formType !== 'add') {
|
||||
const row = this.$router.currentRoute.params
|
||||
this.edit(row)
|
||||
} else {
|
||||
this.$refs.roleForm.resetFields()
|
||||
}
|
||||
},
|
||||
save() {
|
||||
const _this = this
|
||||
|
||||
this.$refs.roleForm.validate(function(valid) {
|
||||
if (valid) {
|
||||
const url = _this.formType === 'add' ? '/plugin/role/create' : '/plugin/role/update'
|
||||
_this.executeAxios(url, 'post', _this.form, function(res) {
|
||||
_this.$success(_this.$t('commons.save_success'))
|
||||
_this.backToList()
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
queryAllRoles() {
|
||||
const _this2 = this
|
||||
|
||||
this.executeAxios('/plugin/role/all', 'post', {}, function(res) {
|
||||
_this2.roles = res.data
|
||||
})
|
||||
},
|
||||
nameRepeat(value) {
|
||||
if (!this.roles || this.roles.length === 0) {
|
||||
return false
|
||||
}
|
||||
// 编辑场景 不能 因为名称重复而报错
|
||||
if (this.formType === 'modify' && this.originName === value) {
|
||||
return false
|
||||
}
|
||||
return this.roles.some(function(role) {
|
||||
return role.name === value
|
||||
})
|
||||
},
|
||||
roleValidator(rule, value, callback) {
|
||||
if (!value || value.length === 0) {
|
||||
callback(new Error('请输入名称'))
|
||||
} else if (this.nameRepeat(value)) {
|
||||
callback(new Error('角色名称已存在'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
backToList() {
|
||||
this.$router.push({ name: 'system-role' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue