|
|
@@ -3,97 +3,87 @@
|
|
|
<template #static>
|
|
|
<Breadcrumb />
|
|
|
</template>
|
|
|
+ <PageWrapper style="background: #fff; height: 100%; width: 100%">
|
|
|
+ <div class="main_page">
|
|
|
+ <div class="left_panel">
|
|
|
+ <div class="left_top">
|
|
|
+ <el-space>
|
|
|
+ <el-button type="primary" icon-placement="left" @click="openCreateDrawer" style="margin-left: 20px">
|
|
|
+ 添加权限
|
|
|
+ <template #icon>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <el-icon size="14">
|
|
|
+ <FileAddOutlined />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
|
|
|
- <div class="page-permission">
|
|
|
- <el-row :gutter="12">
|
|
|
- <!-- 左侧权限树 -->
|
|
|
- <el-col :span="6">
|
|
|
- <el-card shadow="never">
|
|
|
- <template #header>
|
|
|
+ <el-button type="primary" icon-placement="left" @click="packHandle">
|
|
|
+ 全部{{ expandedKeys.length ? '收起' : '展开' }}
|
|
|
+ <template #icon>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <el-icon size="14">
|
|
|
+ <AlignLeftOutlined />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-button>
|
|
|
+ </el-space>
|
|
|
+ </div>
|
|
|
+ <div class="w-full" style="margin-top: 20px; margin-left: 20px">
|
|
|
+ <div v-loading="loading">
|
|
|
+ <el-scrollbar height="620px">
|
|
|
+ <el-tree
|
|
|
+ ref="treeRef"
|
|
|
+ :data="permissionViewTree"
|
|
|
+ nodeKey="value"
|
|
|
+ highlight-current
|
|
|
+ check-strictly
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ @current-change="onSelectTreeNode"
|
|
|
+ @update:expanded-keys="onExpandedKeys"
|
|
|
+ />
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right_panel">
|
|
|
+ <div class="right_top">
|
|
|
+ <div class="editPermission" style="align-items: center">
|
|
|
<el-space>
|
|
|
- <el-button type="primary" icon-placement="left" @click="openCreateDrawer">
|
|
|
- 添加权限
|
|
|
- <template #icon>
|
|
|
- <div class="flex items-center">
|
|
|
- <el-icon size="14">
|
|
|
- <FileAddOutlined />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-button>
|
|
|
-
|
|
|
- <el-button type="primary" icon-placement="left" @click="packHandle">
|
|
|
- 全部{{ expandedKeys.length ? '收起' : '展开' }}
|
|
|
- <template #icon>
|
|
|
- <div class="flex items-center">
|
|
|
- <el-icon size="14">
|
|
|
- <AlignLeftOutlined />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-button>
|
|
|
+ <span style="color: #303133; margin-left: 20px">编辑权限 </span>
|
|
|
+ <span v-if="treeItemTitle" style="color: #303133">：{{ treeItemTitle }}</span>
|
|
|
</el-space>
|
|
|
- </template>
|
|
|
-
|
|
|
- <div class="w-full">
|
|
|
- <div v-loading="loading">
|
|
|
- <el-scrollbar height="620px">
|
|
|
- <el-tree
|
|
|
- ref="treeRef"
|
|
|
- :data="permissionViewTree"
|
|
|
- nodeKey="value"
|
|
|
- highlight-current
|
|
|
- check-strictly
|
|
|
- :expand-on-click-node="false"
|
|
|
- @current-change="onSelectTreeNode"
|
|
|
- @update:expanded-keys="onExpandedKeys"
|
|
|
- />
|
|
|
- </el-scrollbar>
|
|
|
- </div>
|
|
|
+ <el-popconfirm
|
|
|
+ v-if="isEditing"
|
|
|
+ :title="`确定要删除${treeItemTitle}吗？`"
|
|
|
+ width="200"
|
|
|
+ @confirm="handleDeletePermission"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <el-button type="danger" size="small" style="margin-left: 50px; align-items: center"
|
|
|
+ >删除权限</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-popconfirm>
|
|
|
</div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <!-- 右侧编辑权限 -->
|
|
|
- <el-col :span="18">
|
|
|
- <el-card shadow="never">
|
|
|
- <template #header>
|
|
|
- <div class="editPermission">
|
|
|
- <el-space>
|
|
|
- <span>编辑权限 </span>
|
|
|
- <span v-if="treeItemTitle">:{{ treeItemTitle }}</span>
|
|
|
- </el-space>
|
|
|
- <el-popconfirm
|
|
|
- v-if="isEditing"
|
|
|
- :title="`确定要删除${treeItemTitle}吗？`"
|
|
|
- width="200"
|
|
|
- @confirm="handleDeletePermission"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <el-button type="danger" size="small">删除权限</el-button>
|
|
|
- </template>
|
|
|
- </el-popconfirm>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <!-- 表单 -->
|
|
|
- <div class="pt-6">
|
|
|
- <PermissionForm
|
|
|
- v-show="selectedPermissionId != null"
|
|
|
- ref="formInstance"
|
|
|
- :permissionList="permissionViewTree"
|
|
|
- @change="handleChangePermssion"
|
|
|
- isShowSubmit
|
|
|
- class="w-2/3 ml-10"
|
|
|
- />
|
|
|
- <el-empty v-show="selectedPermissionId == null" description="从左侧列表选择一项后，进行编辑" />
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <!-- 添加新权限 -->
|
|
|
+ </div>
|
|
|
+ <div class="pt-6">
|
|
|
+ <PermissionForm
|
|
|
+ v-show="selectedPermissionId != null"
|
|
|
+ ref="formInstance"
|
|
|
+ :permissionList="permissionViewTree"
|
|
|
+ @change="handleChangePermssion"
|
|
|
+ isShowSubmit
|
|
|
+ class="w-2/3 ml-10"
|
|
|
+ />
|
|
|
+ <el-empty v-show="selectedPermissionId == null" description="从左侧列表选择一项后，进行编辑" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<CreateDrawer ref="drawerInstance" :permissionList="permissionViewTree" @change="handleChangePermssion" />
|
|
|
- </div>
|
|
|
+ </PageWrapper>
|
|
|
</VerticalFlexLayout>
|
|
|
</template>
|
|
|
|
|
|
@@ -101,6 +91,7 @@
|
|
|
import { ref, shallowRef, onMounted } from 'vue';
|
|
|
import PermissionForm from './PermissionForm.vue';
|
|
|
import CreateDrawer from './CreateDrawer.vue';
|
|
|
+ import { PageWrapper } from '@/components/Page';
|
|
|
import { AlignLeftOutlined, FileAddOutlined } from '@vicons/antd';
|
|
|
import {
|
|
|
PermissionTree,
|
|
|
@@ -255,3 +246,43 @@
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .main_page {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 172px);
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ .left_panel {
|
|
|
+ width: 25%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ border-right: 1px solid #eaeaea;
|
|
|
+ .left_top {
|
|
|
+ width: 100%;
|
|
|
+ height: 69px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ border-bottom: 1px solid #eaeaea;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right_panel {
|
|
|
+ width: 75%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .right_top {
|
|
|
+ width: 100%;
|
|
|
+ height: 69px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ border-bottom: 1px solid #eaeaea;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
shuangying yan