149 lines
4.7 KiB
PHP
149 lines
4.7 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" class="w-max-700">
|
|
<el-form-item label="角色名称" prop="title">
|
|
<el-input v-model="form.title" placeholder="角色名称"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="描述" prop="description">
|
|
<el-input v-model="form.description" placeholder="描述"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="权限" prop="roles">
|
|
<div class="roles-wrap border">
|
|
<div class="header-wrap bg-dark p-2 text-dark bg-opacity-10 px-2">
|
|
<el-button size="small" @click="updateAllState(true)">选中所有</el-button>
|
|
<el-button size="small" @click="updateAllState(false)">取消选中</el-button>
|
|
</div>
|
|
<div v-for="role, index in form.roles" :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 px-3">
|
|
<div v-for="method,index in role.methods" 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: {
|
|
name: '',
|
|
roles: [
|
|
{
|
|
title: '商品权限',
|
|
methods: [
|
|
{name:'列表', code: 'list', selected: false},
|
|
{name:'创建', code: 'create', selected: false},
|
|
{name:'查看', code: 'show', selected: false},
|
|
{name:'编辑', code: 'update', selected: false},
|
|
{name:'删除', code: 'destroy', selected: false},
|
|
]
|
|
},
|
|
{
|
|
title: '订单权限',
|
|
methods: [
|
|
{name:'列表', code: 'list', selected: false},
|
|
{name:'创建', code: 'create', selected: false},
|
|
{name:'查看', code: 'show', selected: false},
|
|
{name:'编辑', code: 'update', selected: false},
|
|
{name:'删除', code: 'destroy', selected: false},
|
|
]
|
|
},
|
|
]
|
|
},
|
|
|
|
source: {
|
|
|
|
},
|
|
|
|
rules: {
|
|
title: [{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.roles[index].methods.map(e => e.selected = !!type)
|
|
},
|
|
|
|
updateAllState(type) {
|
|
this.form.roles.forEach(e => {
|
|
e.methods.forEach(method => {
|
|
method.selected = !!type
|
|
});
|
|
});
|
|
},
|
|
|
|
addFormSubmit(form) {
|
|
const self = this;
|
|
const type = this.type == 'add' ? 'post' : 'put';
|
|
const url = this.type == 'add' ? 'roles' : 'roles/' + this.form.id;
|
|
|
|
this.$refs[form].validate((valid) => {
|
|
if (!valid) {
|
|
this.$message.error('请检查表单是否填写正确');
|
|
return;
|
|
}
|
|
|
|
// $http[type](url, this.form).then((res) => {
|
|
// this.$message.success(res.message);
|
|
// if (this.type == 'add') {
|
|
// this.roles.push(res.data)
|
|
// } else {
|
|
// this.roles[this.index] = res.data
|
|
// }
|
|
|
|
// this.show = false
|
|
// })
|
|
});
|
|
},
|
|
}
|
|
})
|
|
</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
|