123 lines
3.8 KiB
PHP
123 lines
3.8 KiB
PHP
@extends('admin::layouts.master')
|
|
|
|
@section('title', '角色管理')
|
|
|
|
@section('content')
|
|
<div id="app" class="card" v-cloak>
|
|
<div class="card-body h-min-600">
|
|
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
|
<el-form-item label="角色名称" prop="name">
|
|
<el-input v-model="form.name" placeholder="角色名称" class="w-auto"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="权限" prop="roles">
|
|
<div class="roles-wrap border w-max-900">
|
|
<div class="header-wrap bg-dark p-2 text-dark bg-opacity-10 px-2">
|
|
<el-button size="small" @click="updateAllState(true)">@lang('admin/admin_roles.select_all')</el-button>
|
|
<el-button size="small" @click="updateAllState(false)">@lang('admin/admin_roles.unselect_all')</el-button>
|
|
</div>
|
|
<div v-for="role, index in form.permissions" :key="index">
|
|
<div class="bg-light px-2 d-flex">
|
|
@{{ role.title }}
|
|
<div class="row-update ms-2 link-secondary">[<span @click="updateState(true, index)">全选</span> / <span @click="updateState(false, index)">取消</span>]</div>
|
|
</div>
|
|
<div class="role-methods">
|
|
<div class="d-flex flex-wrap px-3">
|
|
<div v-for="method,index in role.permissions" class="me-3">
|
|
<el-checkbox class="text-dark" v-model="method.selected">@{{ method.name }}</el-checkbox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item class="mt-5">
|
|
<el-button type="primary" @click="addFormSubmit('form')">保存</el-button>
|
|
<el-button @click="closeCustomersDialog('form')">取消</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('footer')
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
|
|
data: {
|
|
form: {
|
|
id: @json($role->id ?? null),
|
|
name: @json($role->name ?? ''),
|
|
permissions: @json($permissions ?? []),
|
|
},
|
|
|
|
source: {
|
|
|
|
},
|
|
|
|
rules: {
|
|
name: [{required: true,message: '请输入角色名称',trigger: 'blur'}, ],
|
|
description: [{required: true,message: '请输入描述',trigger: 'blur'}, ],
|
|
}
|
|
},
|
|
|
|
beforeMount() {
|
|
// this.source.languages.forEach(e => {
|
|
// this.$set(this.form.name, e.code, '')
|
|
// this.$set(this.form.description, e.code, '')
|
|
// })
|
|
},
|
|
|
|
methods: {
|
|
updateState(type, index) {
|
|
this.form.permissions[index].permissions.map(e => e.selected = !!type)
|
|
},
|
|
|
|
updateAllState(type) {
|
|
this.form.permissions.forEach(e => {
|
|
e.permissions.forEach(method => {
|
|
method.selected = !!type
|
|
});
|
|
});
|
|
},
|
|
|
|
addFormSubmit(form) {
|
|
const self = this;
|
|
const type = this.form.id == null ? 'post' : 'put';
|
|
const url = this.form.id == null ? 'admin_roles' : 'admin_roles/' + this.form.id;
|
|
|
|
this.$refs[form].validate((valid) => {
|
|
// this.form.permissions.forEach(e => {
|
|
// e.permissions = e.permissions.filter(x => x.selected).map(j => j.code)
|
|
// });
|
|
|
|
if (!valid) {
|
|
this.$message.error('请检查表单是否填写正确');
|
|
return;
|
|
}
|
|
|
|
$http[type](url, this.form).then((res) => {
|
|
layer.msg(res.message);
|
|
window.history.back();
|
|
})
|
|
});
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.roles-wrap .el-checkbox.text-dark .el-checkbox__label {
|
|
font-size: 12px;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.row-update {
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
@endpush
|