|
|
@@ -15,7 +15,15 @@
|
|
|
<ElButton type="primary">查找</ElButton>
|
|
|
</ElCol>
|
|
|
</ElFormItem>
|
|
|
-
|
|
|
+ <div style="height: 500px;overflow-y: auto;">
|
|
|
+ <div class="pad-2 roleitem flex f-c " v-for="(item, index) in roleList" :key="index"
|
|
|
+ @click="roleitemClick(item.id)">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <span style="margin-top: 10px;font-size: 12px;color: #999;">{{ item.remark }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <PaginationWrapper v-if="totalSize > 0" style="position: absolute;bottom: 0;" :pageNum="PageNum"
|
|
|
+ :pageSize="PageSize" @pageChange="pageChange" @sizeChange="sizeChange" :total="totalSize" />
|
|
|
</PageMain>
|
|
|
</ElCol>
|
|
|
<ElCol :md="18">
|
|
|
@@ -35,16 +43,17 @@
|
|
|
<ElInput v-model="roleInfo.name" placeholder="输入20个字以内的角色名称" type="text" tabindex="1">
|
|
|
</ElInput>
|
|
|
</ElFormItem>
|
|
|
- <ElFormItem prop="desc" label="角色描述">
|
|
|
- <ElInput v-model="roleInfo.desc" placeholder="请输入" type="textarea" tabindex="2">
|
|
|
+ <ElFormItem label="角色描述">
|
|
|
+ <ElInput v-model="roleInfo.remark" placeholder="请输入" type="textarea" tabindex="2">
|
|
|
</ElInput>
|
|
|
</ElFormItem>
|
|
|
</ElForm>
|
|
|
<ElDivider></ElDivider>
|
|
|
<div>
|
|
|
<h5>角色权限</h5>
|
|
|
- <ElTree style="max-height: 350px;overflow-y: auto;" :data="treeData" :props="defaultProps" show-checkbox
|
|
|
- node-key="id" :default-expand-all="true" :default-checked-keys="[6]" @check="handleCheckChange" />
|
|
|
+ <ElTree style="max-height: 350px;overflow-y: auto;" ref="treeRef" :data="treeData" :props="defaultProps"
|
|
|
+ show-checkbox node-key="id" :default-expand-all="true" :default-checked-keys="checkedKeys"
|
|
|
+ @check="handleCheckChange" />
|
|
|
</div>
|
|
|
</PageMain>
|
|
|
</ElCol>
|
|
|
@@ -55,24 +64,48 @@
|
|
|
|
|
|
<script lang='ts' setup>
|
|
|
import { asyncRoutes } from '@/router/routes' // 请根据实际路径调整
|
|
|
-import { ref, reactive, onMounted } from 'vue';
|
|
|
-import type { FormRules } from 'element-plus';
|
|
|
+import { ref, reactive, onBeforeMount } from 'vue';
|
|
|
+import type { FormRules, ElTree } from 'element-plus';
|
|
|
import { preprocessRoutes, convertToTreeData, TreeNode } from '@/utils/composables/routeUtils'; // 导入工具方法
|
|
|
import api from '@/api'
|
|
|
+import Message from 'vue-m-message'
|
|
|
+
|
|
|
+onBeforeMount(() => {
|
|
|
+ rolequery()//角色列表
|
|
|
+ // 对 asyncRoutes 进行预处理并转换为树形结构
|
|
|
+ const processedRoutes = preprocessRoutes(asyncRoutes);
|
|
|
+ treeData.value = convertToTreeData(0, processedRoutes);
|
|
|
+});
|
|
|
+interface roleList {
|
|
|
+ id: string,
|
|
|
+ name: string,
|
|
|
+ remark: string,
|
|
|
+ [key: string]: any
|
|
|
+}
|
|
|
+interface Perm {
|
|
|
+ id: string; // 根据实际情况，id 可能是数字或字符串
|
|
|
+}
|
|
|
+const treeRef = ref<InstanceType<typeof ElTree>>();
|
|
|
const roleName = ref<string>("");
|
|
|
+const PageNum = ref<number>(1);
|
|
|
+const PageSize = ref<number>(20);
|
|
|
+const checkedKeys = ref<string[]>([])
|
|
|
+const totalSize = ref(0)
|
|
|
|
|
|
const roleInfo = reactive<{
|
|
|
name: string;
|
|
|
- desc: string;
|
|
|
+ remark: string;
|
|
|
system: string,
|
|
|
- permsId: number[],
|
|
|
- perms: string[]
|
|
|
+ permsId: (number | string)[],
|
|
|
+ perms: object[],
|
|
|
+ id?: string,
|
|
|
}>({
|
|
|
name: "",//角色
|
|
|
- desc: "",//描述
|
|
|
+ remark: "",//描述
|
|
|
system: "PLATFORM",//系统
|
|
|
permsId: [],//权限id
|
|
|
perms: [],//权限标识
|
|
|
+ id: '',
|
|
|
});
|
|
|
const roleRules = ref<FormRules>({
|
|
|
name: [
|
|
|
@@ -80,6 +113,7 @@ const roleRules = ref<FormRules>({
|
|
|
],
|
|
|
|
|
|
});
|
|
|
+const roleList = ref<roleList[]>([])
|
|
|
const treeData = ref<TreeNode[]>([]);
|
|
|
const defaultProps = {
|
|
|
children: 'children',
|
|
|
@@ -94,33 +128,79 @@ const handleCheckChange = (
|
|
|
halfCheckedNodes: TreeNode[];
|
|
|
}
|
|
|
) => {
|
|
|
- // console.log('Checked keys:', checkedInfo.checkedKeys);
|
|
|
- // console.log(checkedInfo.checkedNodes);
|
|
|
roleInfo.permsId = checkedInfo.checkedKeys;
|
|
|
roleInfo.perms = [];
|
|
|
- checkedInfo.checkedNodes.forEach(val => {
|
|
|
- if (val.type === '2' ) {
|
|
|
- roleInfo.perms.push(val.auth);
|
|
|
- }
|
|
|
- });
|
|
|
+ roleInfo.perms = checkedInfo.checkedNodes;
|
|
|
+
|
|
|
};
|
|
|
- function roleSubmit() {
|
|
|
- api.roleApi.roleAdd(roleInfo).then((res)=>{
|
|
|
- console.log(res)
|
|
|
+
|
|
|
+async function roleSubmit() {
|
|
|
+ if (roleInfo.id) {
|
|
|
+ await api.roleApi.roleUpdate(roleInfo).then((res: any) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ rolequery();
|
|
|
+ Message.success(res.msg, {
|
|
|
+ zIndex: 2000,
|
|
|
+ })
|
|
|
+ resetForm();
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ await api.roleApi.roleAdd(roleInfo).then((res:any) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ rolequery();
|
|
|
+ Message.success(res.msg, {
|
|
|
+ zIndex: 2000,
|
|
|
+ })
|
|
|
+ resetForm();
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
-onMounted(() => {
|
|
|
- // 对 asyncRoutes 进行预处理并转换为树形结构
|
|
|
- const processedRoutes = preprocessRoutes(asyncRoutes);
|
|
|
- treeData.value = convertToTreeData(processedRoutes);
|
|
|
|
|
|
-});
|
|
|
+}
|
|
|
+function pageChange(e: number) {
|
|
|
+ PageNum.value = e;
|
|
|
+ PageSize.value = 20;
|
|
|
+}
|
|
|
+function sizeChange(val: number) {
|
|
|
+ PageSize.value = val;
|
|
|
+}
|
|
|
+function roleitemClick(id: string) {
|
|
|
+ api.roleApi.roleGet({ roleId: id }).then((res: any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ checkedKeys.value = res.data.perms.map((val: Perm) => val.id);
|
|
|
+ roleInfo.permsId = res.data.perms.map((val: Perm) => val.id);
|
|
|
+ roleInfo.perms = res.data.perms;
|
|
|
+ roleInfo.name = res.data.name;
|
|
|
+ roleInfo.remark = res.data.remark;
|
|
|
+ roleInfo.id = res.data.id;
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+async function rolequery() {
|
|
|
+ await api.roleApi.roleList({ pageNum: PageNum.value, pageSize: PageSize.value }).then((res: any) => {
|
|
|
+ totalSize.value = res.data.total;
|
|
|
+ roleList.value = res.data.records;
|
|
|
+ })
|
|
|
+}
|
|
|
+function resetForm() {
|
|
|
+ roleInfo.name = "";
|
|
|
+ roleInfo.remark = "";
|
|
|
+ roleInfo.system = "PLATFORM";
|
|
|
+ roleInfo.permsId = [];
|
|
|
+ roleInfo.perms = [];
|
|
|
+ roleInfo.id = '';
|
|
|
+ if (treeRef.value) {
|
|
|
+ treeRef.value.setCheckedKeys([]);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.roleitem {
|
|
|
- padding: 20px;
|
|
|
cursor: pointer;
|
|
|
background: white;
|
|
|
}
|
|
|
@@ -133,4 +213,9 @@ onMounted(() => {
|
|
|
.active {
|
|
|
background: #b4b2b2;
|
|
|
}
|
|
|
+
|
|
|
+.el-pagination {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
</style>
|
