123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382 |
- <template>
- <div class="permission-config">
- <!-- <div class="config-header" @click="togglePanel">
- <img src="../../assets/lock.png" alt="permission" class="config-icon" />
- <span>权限配置</span>
- <img
- :src="isPanelOpen ? upIcon : downIcon"
- alt="toggle"
- class="toggle-icon"
- />
- </div> -->
- <!-- v-show="isPanelOpen" :checked="getParentChecked(group)" -->
- <div class="config-panel">
- <div class="permission-list">
- <div class="permission-group" v-for="group in permissionGroups" :key="group.label">
- <div class="group-header">
- <a-checkbox :value="group.value"
-
- @change="(e) => handleParentChange(group, e)">
- {{ group.label }}
- </a-checkbox>
- <a-button type="link" style="padding: 0;" size="small" @click="showButtonConfig(group)">
- <img src="../../assets/svg/setting.png" style="margin-top: 2px;" alt="">
- </a-button>
- </div>
- <div class="checkbox-list">
- <a-checkbox-group v-model:value="selectedPermissions[group.key]">
- <div v-for="item in group.items" :key="item.value" class="checkbox-item">
- <a-checkbox :value="item.value" style="padding-right: 0;">
- {{ item.label }}
- </a-checkbox>
- <a-button type="link" style="padding: 0;" size="small" @click="showButtonConfig(group)">
- <img src="../../assets/svg/setting.png" style="margin-top: 2px;" alt="">
- </a-button>
- </div>
- </a-checkbox-group>
- </div>
- </div>
- </div>
- <!-- 按钮权限配置弹窗 -->
- <a-modal
- v-model:visible="buttonModalVisible"
- title="按钮权限配置"
- @ok="handleButtonConfigSave"
- @cancel="handleButtonConfigCancel"
- width="600px"
- >
- <div class="button-config-list">
- <div v-for="button in currentGroupButtons" :key="button.value" class="button-config-item">
- <a-checkbox
- v-model:checked="button.isCheck"
- :value="button.value"
- >
- {{ button.label }}
- </a-checkbox>
- <span class="button-desc">{{ button.description }}</span>
- </div>
- </div>
- </a-modal>
- <!-- <div class="action-buttons">
- <a-button type="primary" :loading="saving" @click="saveConfig">
- 保存配置
- </a-button>
- </div> -->
- </div>
- </div>
- </template>
- <script setup>
- import { ref, reactive, onMounted } from 'vue';
- import { message } from 'ant-design-vue';
- import axios from 'axios';
- import upIcon from '@/assets/svg/ups.svg';
- import downIcon from '@/assets/svg/down.svg';
- // 按钮配置相关
- const buttonModalVisible = ref(false);
- const currentGroupButtons = ref([]);
- const currentGroup = ref(null);
- // 显示按钮配置弹窗
- const showButtonConfig = (group) => {
- currentGroup.value = group;
- // 这里可以根据实际需求从后端获取按钮权限列表
- currentGroupButtons.value = [
- { label: '新增', value: 'add', description: '新增数据权限', isCheck: false },
- { label: '编辑', value: 'edit', description: '编辑数据权限', isCheck: false },
- { label: '删除', value: 'delete', description: '删除数据权限', isCheck: false },
- { label: '查询', value: 'query', description: '查询数据权限', isCheck: false },
- // 可以根据需求添加更多按钮
- ];
- buttonModalVisible.value = true;
- };
- // 保存按钮配置
- const handleButtonConfigSave = () => {
- // 这里可以添加保存按钮配置的逻辑
- const buttonPermissions = currentGroupButtons.value
- .filter(button => button.isCheck)
- .map(button => button.value);
- // 更新当前组的按钮权限
- if (currentGroup.value) {
- if (!selectedPermissions[`${currentGroup.value.key}_buttons`]) {
- selectedPermissions[`${currentGroup.value.key}_buttons`] = [];
- }
- selectedPermissions[`${currentGroup.value.key}_buttons`] = buttonPermissions;
- }
- buttonModalVisible.value = false;
- message.success('按钮权限配置已保存');
- };
- // 取消按钮配置
- const handleButtonConfigCancel = () => {
- buttonModalVisible.value = false;
- };
- // 计算父级选中状态
- const getParentChecked = (group) => {
- if (!selectedPermissions[group.key] || !group.items || group.items.length === 0) {
- return false;
- }
- // 检查父级是否被选中
- return selectedPermissions[group.key].includes(group.value);
- };
- // 处理父级选中状态变化
- const handleParentChange = (parent, e) => {
- const checked = e.target.checked;
- // 获取当前组的选中状态数组
- if (!selectedPermissions[parent.key]) {
- selectedPermissions[parent.key] = [];
- }
-
- // 如果父级被选中,将所有子项添加到选中数组
- if (checked) {
- selectedPermissions[parent.key] = [...parent.items.map(item => item.value), parent.value];
- } else {
- // 如果父级取消选中,清空该组的选中数组
- selectedPermissions[parent.key] = [];
- }
- };
- // 权限组数据
- const permissionGroups = ref([]);
- const isPanelOpen = ref(false);
- const saving = ref(false);
- // 用于存储每个权限组的选中状态
- const selectedPermissions = reactive({});
- const togglePanel = () => {
- isPanelOpen.value = !isPanelOpen.value;
- };
- const saveConfig = async () => {
- saving.value = true;
- try {
- // 保存配置到 localStorage
- localStorage.setItem('permissionConfig', JSON.stringify(selectedPermissions));
- message.success('权限配置保存成功');
- } catch (error) {
- message.error('权限配置保存失败');
- } finally {
- saving.value = false;
- }
- };
- // 初始化配置
- const initConfig = () => {
- const savedConfig = localStorage.getItem('permissionConfig');
- if (savedConfig) {
- const config = JSON.parse(savedConfig);
- Object.keys(config).forEach(key => {
- selectedPermissions[key] = config[key];
- });
- }
- };
- // 获取权限列表
- const fetchPermissionGroups = async () => {
- try {
- const response = await axios.get(`http://58.246.234.210:8085/api/system/role_menu_button_permission/get_role_menu/?roleId=9&merchant=1`,{
- headers: {
- 'authorization': `JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzU2MTczNjAwLCJpYXQiOjE3NTYwODcyMDAsImp0aSI6IjU0ZTBiZGJhODBjMTQ4MDBhZDFiNjVjZDBkYjBkM2U4IiwidXNlcl9pZCI6OX0.rUOnghQpH4Sd5ChrD_Pqam6kAoqKV8O6TvSQQQF76fg`
- }
- });
- console.log(response);
- // 构建权限树
- const buildPermissionTree = (permissions) => {
- // 创建一个映射表,用于快速查找权限项
- const permMap = {};
- permissions.forEach(perm => {
- permMap[perm.id] = {
- label: perm.name,
- value: perm.id,
- is_catalog: perm.is_catalog,
- isCheck: perm.isCheck,
- children: []
- };
- });
- // 构建树形结构
- const tree = [];
- permissions.forEach(perm => {
- const currentNode = permMap[perm.id];
- if (perm.parent === null) {
- // 如果没有父节点,则为根节点
- tree.push(currentNode);
- } else {
- // 如果有父节点,将当前节点添加到父节点的children中
- const parentNode = permMap[perm.parent];
- if (parentNode) {
- parentNode.children.push(currentNode);
- }
- }
- });
- return tree;
- };
- // 处理权限数据
- const permissionTree = buildPermissionTree(response.data.data);
-
- // 转换为组件所需的数据格式
- const groupsData = permissionTree.map(node => ({
- label: node.label,
- key: node.value,
- is_catalog: node.is_catalog,
- value: node.isCheck,
- items: node.children.map(child => ({
- label: child.label,
- value: child.value,
- is_catalog: child.is_catalog,
- isCheck: child.isCheck
- }))
- }));
- permissionGroups.value = groupsData;
-
- // 初始化选中状态对象
- permissionGroups.value.forEach(group => {
- if (!selectedPermissions[group.key]) {
- selectedPermissions[group.key] = [];
- }
- });
- } catch (error) {
- message.error('获取权限信息失败');
- console.error('获取权限信息失败:', error);
- }
- };
- // 组件挂载时获取数据
- onMounted(async () => {
- await fetchPermissionGroups();
- initConfig();
- });
- </script>
- <style scoped>
- .permission-config {
-
- background: var(--secondary-bg);
- color: var(--primary-text);
- }
- .config-header {
- padding: 12px 20px;
- display: flex;
- align-items: center;
- gap: 8px;
- cursor: pointer;
- transition: background-color 0.2s;
- }
- .config-header:hover {
- background: rgba(0, 0, 0, 0.02);
- }
- .config-icon {
- width: 16px;
- height: 16px;
- }
- .toggle-icon {
- width: 12px;
- height: 12px;
- margin-left: auto;
- }
- .config-panel {
- padding: 12px 20px;
-
- }
- .permission-list {
- margin-bottom: 16px;
- /* height: 100%;
- overflow: auto; */
- }
- .permission-group {
- /* margin-bottom: 16px; */
- }
- .permission-group:last-child {
- margin-bottom: 0;
- }
- .group-header {
- font-size: 13px;
- color: var(--primary-text);
- margin-bottom: 8px;
- }
- .checkbox-list {
- margin-left: 14px;
- display: flex;
- flex-direction: column;
- gap: 8px;
- }
- .checkbox-item {
- display: flex;
- align-items: flex-start;
- padding-right: 0;
- }
- .item-desc {
- margin-left: 8px;
- font-size: 12px;
- color: var(--primary-text);
- }
- .action-buttons {
- display: flex;
- justify-content: flex-end;
- margin-top: 16px;
- }
- :deep(.ant-checkbox-wrapper) {
- font-size: 14px;
- }
- :deep(.ant-checkbox-group) {
- width: 100%;
- flex-direction: column;
- }
- :deep(.ant-checkbox-wrapper + .ant-checkbox-wrapper) {
- margin-left: 0;
- }
- .group-header {
- font-size: 13px;
- color: var(--primary-text);
- margin-bottom: 8px;
- display: flex;
- align-items: center;
- /* justify-content: space-between; */
- }
- .button-config-list {
- max-height: 400px;
- overflow-y: auto;
- }
- .button-config-item {
- margin-bottom: 12px;
- display: flex;
- align-items: center;
- }
- .button-desc {
- margin-left: 12px;
- font-size: 12px;
- color: rgba(0, 0, 0, 0.45);
- }
- </style>
|