权限模块功能基本改写完成
This commit is contained in:
+171
-119
@@ -1,129 +1,181 @@
|
||||
<template>
|
||||
<el-dialog title="角色权限设置" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
|
||||
<el-tabs tab-position="top">
|
||||
<el-tab-pane label="菜单权限">
|
||||
<div class="treeMain">
|
||||
<el-tree ref="menu" node-key="id" :data="menu.list" :default-checked-keys="menu.checked" :props="menu.props" check-strictly show-checkbox></el-tree>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="数据权限">
|
||||
<el-form label-width="100px" label-position="left">
|
||||
<el-form-item label="数据权限">
|
||||
<sc-select v-model="form.data_range" dic="data_auth" style="width: 80%;"></sc-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="控制台">
|
||||
<el-form label-width="100px" label-position="left">
|
||||
<el-form-item label="控制台视图">
|
||||
<el-select v-model="form.dashboard" placeholder="请选择">
|
||||
<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template #footer>
|
||||
<el-button @click="visible=false" >取 消</el-button>
|
||||
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<a-modal title="角色权限设置" :open="visible" :width="600" :destroy-on-close="true" :footer="null" @cancel="handleCancel">
|
||||
<a-tabs tab-position="top">
|
||||
<a-tab-pane key="menu" tab="菜单权限">
|
||||
<div class="treeMain">
|
||||
<a-tree ref="menuTreeRef" v-model:checkedKeys="menu.checked" :tree-data="menu.list"
|
||||
:field-names="menu.fieldNames" :checkable="true" :default-expand-all="true"
|
||||
:check-strictly="true" :selectable="false">
|
||||
<template #title="{ title }">
|
||||
{{ title }}
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="data" tab="数据权限">
|
||||
<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="数据权限">
|
||||
<a-select v-model:value="form.data_range" placeholder="请选择数据权限" style="width: 100%">
|
||||
<a-select-option value="0">全部数据权限</a-select-option>
|
||||
<a-select-option value="1">本部门及以下数据</a-select-option>
|
||||
<a-select-option value="2">本部门数据权限</a-select-option>
|
||||
<a-select-option value="3">仅本人数据权限</a-select-option>
|
||||
<a-select-option value="4">自定义数据权限</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="dashboard" tab="控制台">
|
||||
<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="控制台视图">
|
||||
<a-select v-model:value="form.dashboard" placeholder="请选择" style="width: 100%">
|
||||
<a-select-option value="0">
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<span>数据统计</span>
|
||||
<span style="color: #8492a6; font-size: 12px">stats</span>
|
||||
</div>
|
||||
</a-select-option>
|
||||
<a-select-option value="1">
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<span>工作台</span>
|
||||
<span style="color: #8492a6; font-size: 12px">work</span>
|
||||
</div>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<div class="ant-form-item-explain">用于控制角色登录后控制台的视图</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<template #footer>
|
||||
<a-button @click="handleCancel">取 消</a-button>
|
||||
<a-button type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['success', 'closed'],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
isSaveing: false,
|
||||
menu: {
|
||||
list: [],
|
||||
checked: [],
|
||||
props: {
|
||||
label: (data)=>{
|
||||
return data.title
|
||||
}
|
||||
}
|
||||
},
|
||||
group: {
|
||||
list: [],
|
||||
checked: [],
|
||||
props: {}
|
||||
},
|
||||
type: {
|
||||
list: [],
|
||||
checked: [],
|
||||
props: {}
|
||||
},
|
||||
form: {
|
||||
role_id: 0,
|
||||
auth: [],
|
||||
data_range: "",
|
||||
dashboard: "work",
|
||||
},
|
||||
dashboardOptions: [
|
||||
{
|
||||
value: '0',
|
||||
label: '数据统计',
|
||||
views: 'stats'
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '工作台',
|
||||
views: 'work'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getMenu();
|
||||
},
|
||||
methods: {
|
||||
open(){
|
||||
this.visible = true;
|
||||
return this;
|
||||
},
|
||||
async submit(){
|
||||
let authSelect = this.$refs.menu.getCheckedNodes();
|
||||
this.form.permissions = [];
|
||||
authSelect.map(item => {
|
||||
this.form.permissions.push(item.id);
|
||||
})
|
||||
this.isSaveing = true;
|
||||
var res = await this.$API.auth.role.auth.post(this.form);
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
this.isSaveing = false;
|
||||
if(res.code == 1){
|
||||
this.$emit('success', this.form)
|
||||
this.visible = false;
|
||||
this.$message.success("操作成功")
|
||||
}else{
|
||||
this.$alert(res.message, "提示", {type: 'error'})
|
||||
}
|
||||
},
|
||||
async getMenu(){
|
||||
var res = await this.$API.auth.menu.list.get({is_tree: 1});
|
||||
this.menu.list = res.data;
|
||||
},
|
||||
//表单注入数据
|
||||
setData(data){
|
||||
this.form.id = data.id;
|
||||
this.form.data_range = data.data_range;
|
||||
this.form.dashboard = data.dashboard;
|
||||
// this.form.mobile_module = data.mobile_module;
|
||||
data.permissions.map(item => {
|
||||
this.menu.checked.push(item.id);
|
||||
})
|
||||
}
|
||||
const emit = defineEmits(['success', 'closed'])
|
||||
|
||||
const visible = ref(false)
|
||||
const isSaveing = ref(false)
|
||||
const menuTreeRef = ref()
|
||||
|
||||
const menu = reactive({
|
||||
list: [],
|
||||
checked: [],
|
||||
fieldNames: {
|
||||
title: 'title',
|
||||
key: 'id',
|
||||
children: 'children'
|
||||
}
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
role_id: 0,
|
||||
permissions: [],
|
||||
data_range: '',
|
||||
dashboard: '1'
|
||||
})
|
||||
|
||||
// 打开对话框
|
||||
const open = () => {
|
||||
visible.value = true
|
||||
return {
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭对话框
|
||||
const close = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('closed')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
// 提交保存
|
||||
const submit = async () => {
|
||||
try {
|
||||
isSaveing.value = true
|
||||
|
||||
// 获取选中的菜单权限 ID
|
||||
form.permissions = menu.checked || []
|
||||
form.role_id = form.id
|
||||
|
||||
const res = await authApi.role.auth.post(form)
|
||||
|
||||
isSaveing.value = false
|
||||
if (res.code === 1) {
|
||||
emit('success', form)
|
||||
visible.value = false
|
||||
message.success('操作成功')
|
||||
} else {
|
||||
message.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存权限失败:', error)
|
||||
isSaveing.value = false
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取菜单列表
|
||||
const getMenu = async () => {
|
||||
try {
|
||||
const res = await authApi.menu.list.get({ is_tree: 1 })
|
||||
menu.list = res.data || []
|
||||
} catch (error) {
|
||||
console.error('获取菜单列表失败:', error)
|
||||
message.error('获取菜单列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 设置数据
|
||||
const setData = (data) => {
|
||||
form.id = data.id
|
||||
form.data_range = data.data_range || ''
|
||||
form.dashboard = data.dashboard || '1'
|
||||
|
||||
// 设置选中的菜单权限
|
||||
if (data.permissions && data.permissions.length > 0) {
|
||||
menu.checked = data.permissions.map(item => item.id)
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
getMenu()
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
open,
|
||||
setData,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.treeMain {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
|
||||
.treeMain {
|
||||
height: 280px;
|
||||
overflow: auto;
|
||||
border: 1px solid #dcdfe6;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.ant-form-item-explain {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user