permission.vue
4.63 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<script setup lang="ts">
import { reactive, ref, getCurrentInstance, onMounted } from "vue";
import { rolePermissionSave, rolePermission } from "@/api/user/role";
import { useRoute } from "vue-router";
import { back } from "@/utils/tool";
import type Node from "element-plus/es/components/tree/src/model/node";
import type { ElForm } from "element-plus";
import type { ElTree } from "element-plus";
const {
appContext: {
config: { globalProperties },
},
} = getCurrentInstance();
let form = reactive({
data: {
roleId: useRoute().query.roleId,
permissionIds: [],
},
loading: false,
permissions: [],
collections: [],
});
const ruleFormRef = ref<InstanceType<typeof ElForm>>();
const addTreeTest = ref<InstanceType<typeof ElTree>>();
/**
* 表单重置
*/
const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
if (!formEl) return;
addTreeTest.value!.setCheckedNodes([]);
formEl.resetFields();
};
/**
* 表单提交
*/
const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
form.loading = true;
if (!formEl) return;
formEl.validate((valid) => {
if (valid) {
rolePermissionSave(form.data)
.then((res) => {
if (res) {
globalProperties.$message.success("操作成功");
history.go(-1);
}
})
.catch((error) => {
console.log(error);
})
.finally(() => {
form.loading = false;
});
} else {
globalProperties.$message.error("请检查表单格式");
form.loading = false;
return false;
}
});
};
/**
* 获取角色权限
* @param {number | string} roleId 角色id
*/
const getPermissions = async (roleId = useRoute().query.roleId) => {
try {
let res = await rolePermission({ roleId: roleId });
form.permissions = res?.data?.data;
form.data.permissionIds = getCheckedPermissions(res?.data?.data);
} catch (e) {
console.log(e);
}
};
interface Tree {
label: string;
children?: Tree[];
}
/**
* 树组件自定义属性
*/
const defaultProps: Tree = {
children: "menuList",
label: "name",
};
/**
* 选中树节点回显
* @param {array} menuArray 树数组
* @returns {array}
*/
const getCheckedPermissions = (menuArray: Tree[]) => {
if (menuArray) {
menuArray.map((item: Tree) => {
if (item.menuList) {
getCheckedPermissions(item.menuList);
}
if (item.selected) {
form.collections.push(item.id);
}
});
}
return form.collections;
};
/**
* 获取选中的树节点
* @param {object} node 树节点对象
* @param {array} array 树数组
*/
const getCheckedRoles = (node: Node, data: Node[]) => {
// form.data.permissionIds = data.checkedKeys;
// 严格模式用下面这句，选上级带下级一堆用上面这句
form.data.permissionIds = [...data.checkedKeys, ...data.halfCheckedKeys];
};
onMounted(() => {
getPermissions();
});
</script>
<template>
<div class="page-container">
<el-card class="form_card" style="max-width: 1303px">
<h1 v-show="form.dataType === 'edit'">角色权限</h1>
<el-form
:inline="true"
:model="form.data"
ref="ruleFormRef"
label-width="120px"
class="card-form"
>
<el-form-item label="角色名称" prop="roleName" style="width: 100%">
<el-input
v-model.trim="useRoute().query.roleName"
placeholder="请填写角色名称"
maxlength="15"
disabled
/>
</el-form-item>
<el-form-item label="角色ID" prop="roleDesc" style="width: 100%">
<el-input
v-model.trim="useRoute().query.roleId"
placeholder="请填写角色ID"
maxlength="15"
disabled
/>
</el-form-item>
<el-form-item label="角色权限" prop="permissionIds" style="width: 100%">
<el-tree
:data="form.permissions"
:props="defaultProps"
:default-checked-keys="form.data.permissionIds"
node-key="id"
ref="addTreeTest"
show-checkbox
:check-strictly="true"
@check="getCheckedRoles"
/>
</el-form-item>
<el-form-item style="width: 100%">
<el-button
type="primary"
@click.prevent="submitForm(ruleFormRef)"
:loading="form.loading"
>提交</el-button
>
<el-button type="info" @click="resetForm(ruleFormRef)"
>置空</el-button
>
<el-button type="info" @click="back">返回</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>