style: lint格式化文件
This commit is contained in:
@ -1,33 +1,25 @@
|
||||
<template>
|
||||
<PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
|
||||
<div class="w-1/5 xl:w-1/5 mr-2">
|
||||
<BasicTree
|
||||
title="角色权限列表"
|
||||
toolbar
|
||||
:treeData="treeData"
|
||||
:fieldNames="{ title: 'title', key: 'id' }"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<BasicTree title="角色权限列表" toolbar :treeData="treeData" :fieldNames="{ title: 'title', key: 'id' }" @select="handleSelect">
|
||||
<template #title="{ title, systemName, parentId }">
|
||||
<div>{{ title }}</div>
|
||||
</template>
|
||||
</BasicTree>
|
||||
|
||||
</div>
|
||||
<div class="w-4/5 xl:w-4/5">
|
||||
<BasicTable @register="registerTable" ref="tableRef" @row-dbClick="dbClickRow">
|
||||
|
||||
<template #toolbar>
|
||||
<template v-for="button in tableButtonConfig" :key="button.code">
|
||||
<a-button v-if="button.isDefault" :type="button.type" @click="buttonClick(button.code)">
|
||||
<template #icon>
|
||||
<Icon :icon="button.icon"/>
|
||||
<Icon :icon="button.icon" />
|
||||
</template>
|
||||
{{ button.name }}
|
||||
</a-button>
|
||||
<a-button v-else :type="button.type">
|
||||
<template #icon>
|
||||
<Icon :icon="button.icon"/>
|
||||
<Icon :icon="button.icon" />
|
||||
</template>
|
||||
{{ button.name }}
|
||||
</a-button>
|
||||
@ -37,70 +29,62 @@
|
||||
<template v-if="column.dataIndex === 'roleGroup'">
|
||||
<div class="group-tags">
|
||||
<a-space>
|
||||
<a-tag
|
||||
v-for="(name, id) in record.roleGroup"
|
||||
:key="id"
|
||||
color="blue"
|
||||
@click.stop="handleGroupClick(id, name)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<a-tag v-for="(name, id) in record.roleGroup" :key="id" color="blue" @click.stop="handleGroupClick(id, name)" style="cursor: pointer">
|
||||
{{ name }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<TableAction :actions="getActions(record)"/>
|
||||
<TableAction :actions="getActions(record)" />
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
|
||||
<!--查看成员弹框-->
|
||||
<AuthModal @register="registerModal"/>
|
||||
<AuthModal @register="registerModal" />
|
||||
|
||||
<!--弹出角色选择框-->
|
||||
<RoleModal @register="registerRoleModal" @success="handleRoleSuccess"/>
|
||||
<RoleModal @register="registerRoleModal" @success="handleRoleSuccess" />
|
||||
|
||||
<!--用户组人员弹框-->
|
||||
<AuthModal @register="registerAuthModal"/>
|
||||
|
||||
<AuthModal @register="registerAuthModal" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref, computed, onMounted, onUnmounted, createVNode, getCurrentInstance,} from 'vue';
|
||||
import {Modal} from 'ant-design-vue';
|
||||
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
|
||||
import {BasicTable, useTable, TableAction, ActionItem} from '/@/components/Table';
|
||||
import {getRolePermissionPage, getMenuTree, updateRolePermission} from '/@/api/system/RolePermission';
|
||||
import {PageWrapper} from '/@/components/Page';
|
||||
import {useMessage} from '/@/hooks/web/useMessage';
|
||||
import {useI18n} from '/@/hooks/web/useI18n';
|
||||
import {usePermission} from '/@/hooks/web/usePermission';
|
||||
import {useFormConfig} from '/@/hooks/web/useFormConfig';
|
||||
import {useRouter} from 'vue-router';
|
||||
import {useModal} from '/@/components/Modal';
|
||||
import {formConfig, searchFormSchema, columns} from './components/config';
|
||||
import { ref, computed, onMounted, onUnmounted, createVNode, getCurrentInstance } from 'vue';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
|
||||
import { getRolePermissionPage, getMenuTree, updateRolePermission } from '/@/api/system/RolePermission';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { usePermission } from '/@/hooks/web/usePermission';
|
||||
import { useFormConfig } from '/@/hooks/web/useFormConfig';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { formConfig, searchFormSchema, columns } from './components/config';
|
||||
import Icon from '/@/components/Icon/index';
|
||||
|
||||
import {BasicTree, TreeItem} from '/@/components/Tree';
|
||||
import {apiConfigFunc} from '/@/utils/event/design';
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
import { apiConfigFunc } from '/@/utils/event/design';
|
||||
import useEventBus from '/@/hooks/event/useEventBus';
|
||||
import {cloneDeep} from 'lodash-es';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import AuthModal from '../dataAuthority/components/AuthModal.vue';
|
||||
import RoleModal from '../user/components/RoleModal.vue';
|
||||
import {getRoleUser} from "/@/api/system/role";
|
||||
import {getGroupUser} from "/@/api/system/group";
|
||||
import { getRoleUser } from '/@/api/system/role';
|
||||
import { getGroupUser } from '/@/api/system/group';
|
||||
|
||||
const {bus, CREATE_FLOW, FLOW_PROCESSED, FORM_LIST_MODIFIED} = useEventBus();
|
||||
const { bus, CREATE_FLOW, FLOW_PROCESSED, FORM_LIST_MODIFIED } = useEventBus();
|
||||
|
||||
const {notification} = useMessage();
|
||||
const {t} = useI18n();
|
||||
const { notification } = useMessage();
|
||||
const { t } = useI18n();
|
||||
defineEmits(['register']);
|
||||
const {filterColumnAuth, filterButtonAuth} = usePermission();
|
||||
const {mergeColumns, mergeSearchFormSchema, mergeButtons} = useFormConfig();
|
||||
const { filterColumnAuth, filterButtonAuth } = usePermission();
|
||||
const { mergeColumns, mergeSearchFormSchema, mergeButtons } = useFormConfig();
|
||||
|
||||
const filterColumns = cloneDeep(filterColumnAuth(columns));
|
||||
const customConfigColums = ref(filterColumns);
|
||||
@ -109,14 +93,14 @@
|
||||
const tableRef = ref();
|
||||
//所有按钮
|
||||
const buttons = ref([
|
||||
{"isUse": true, "name": "修改角色", "code": "editRole", "icon": "ant-design:usergroup-add-outlined", "isDefault": true},
|
||||
{"isUse": true, "name": "查看角色人员", "code": "roleUser", "isDefault": true},
|
||||
{ isUse: true, name: '修改角色', code: 'editRole', icon: 'ant-design:usergroup-add-outlined', isDefault: true },
|
||||
{ isUse: true, name: '查看角色人员', code: 'roleUser', isDefault: true }
|
||||
]);
|
||||
//展示在列表内的按钮
|
||||
const actionButtons = ref<string[]>(['roleUser']);
|
||||
const buttonConfigs = computed(() => {
|
||||
return filterButtonAuth(buttons.value);
|
||||
})
|
||||
});
|
||||
|
||||
const tableButtonConfig = computed(() => {
|
||||
return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
|
||||
@ -128,44 +112,44 @@
|
||||
|
||||
const btnEvent = {
|
||||
roleUser: handleRoleUser,
|
||||
editRole: handleEditRole,
|
||||
}
|
||||
editRole: handleEditRole
|
||||
};
|
||||
|
||||
const {currentRoute} = useRouter();
|
||||
const { currentRoute } = useRouter();
|
||||
const router = useRouter();
|
||||
const formIdComputedRef = ref();
|
||||
formIdComputedRef.value = currentRoute.value.meta.formId
|
||||
formIdComputedRef.value = currentRoute.value.meta.formId;
|
||||
const schemaIdComputedRef = ref();
|
||||
schemaIdComputedRef.value = currentRoute.value.meta.schemaId
|
||||
schemaIdComputedRef.value = currentRoute.value.meta.schemaId;
|
||||
const selectId = ref('');
|
||||
|
||||
const treeData = ref([]);
|
||||
|
||||
const roleDatasource = ref<any[]>([]);
|
||||
|
||||
const [registerModal, {openModal, setModalProps}] = useModal();
|
||||
const [registerRoleModal, {openModal: openRoleModal, setModalProps: setRoleModalProps}] = useModal();
|
||||
const [registerAuthModal, {openModal: openGroupUserModal, setModalProps: setGroupUserProps}] = useModal();
|
||||
const [registerModal, { openModal, setModalProps }] = useModal();
|
||||
const [registerRoleModal, { openModal: openRoleModal, setModalProps: setRoleModalProps }] = useModal();
|
||||
const [registerAuthModal, { openModal: openGroupUserModal, setModalProps: setGroupUserProps }] = useModal();
|
||||
|
||||
const formName = '角色权限查看';
|
||||
const [registerTable, {reload}] = useTable({
|
||||
title: '' || (formName + '列表'),
|
||||
const [registerTable, { reload }] = useTable({
|
||||
title: '' || formName + '列表',
|
||||
api: getRolePermissionPage,
|
||||
rowKey: 'id',
|
||||
columns: customConfigColums,
|
||||
formConfig: {
|
||||
rowProps: {
|
||||
gutter: 16,
|
||||
gutter: 16
|
||||
},
|
||||
schemas: customSearchFormSchema,
|
||||
fieldMapToTime: [],
|
||||
showResetButton: false,
|
||||
showResetButton: false
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
if (!params.menuId) {
|
||||
params.menuId = selectId.value;
|
||||
}
|
||||
return {...params, FormId: formIdComputedRef.value, PK: 'id'};
|
||||
return { ...params, FormId: formIdComputedRef.value, PK: 'id' };
|
||||
},
|
||||
afterFetch: (res) => {
|
||||
tableRef.value.setToolBarWidth();
|
||||
@ -177,28 +161,27 @@
|
||||
width: 220,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slots: {customRender: 'action'},
|
||||
slots: { customRender: 'action' }
|
||||
},
|
||||
tableSetting: {
|
||||
size: false,
|
||||
setting: false,
|
||||
},
|
||||
setting: false
|
||||
}
|
||||
});
|
||||
|
||||
function dbClickRow(record) {
|
||||
}
|
||||
function dbClickRow(record) {}
|
||||
|
||||
function handleGroupClick(groupId, groupName) {
|
||||
getGroupUser(groupId).then((res) => {
|
||||
openGroupUserModal(true, res);
|
||||
setGroupUserProps({title: t('查看用户组成员')});
|
||||
setGroupUserProps({ title: t('查看用户组成员') });
|
||||
});
|
||||
}
|
||||
|
||||
function handleRoleUser(record) {
|
||||
getRoleUser(record.id).then((res) => {
|
||||
openModal(true, res);
|
||||
setModalProps({title: t('查看成员')});
|
||||
setModalProps({ title: t('查看成员') });
|
||||
});
|
||||
}
|
||||
|
||||
@ -206,20 +189,20 @@
|
||||
if (!selectId.value) {
|
||||
notification.warning({
|
||||
message: t('警告'),
|
||||
description: t('必须选中一个菜单！'),
|
||||
description: t('必须选中一个菜单！')
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (selectId.value === 'menu') {
|
||||
notification.warning({
|
||||
message: t('警告'),
|
||||
description: t('此选项无效！'),
|
||||
description: t('此选项无效！')
|
||||
});
|
||||
return false;
|
||||
}
|
||||
//弹出角色选择框
|
||||
openRoleModal(true, {
|
||||
roles: roleDatasource.value,
|
||||
roles: roleDatasource.value
|
||||
});
|
||||
setRoleModalProps({
|
||||
okText: '修改角色',
|
||||
@ -231,13 +214,13 @@
|
||||
roleDatasource.value = data;
|
||||
let param = {
|
||||
menuId: selectId.value,
|
||||
roles: roleDatasource.value ? roleDatasource.value.map(e => e.id) : []
|
||||
}
|
||||
roles: roleDatasource.value ? roleDatasource.value.map((e) => e.id) : []
|
||||
};
|
||||
let res = await updateRolePermission(param);
|
||||
if (res) {
|
||||
notification.success({
|
||||
message: t('成功'),
|
||||
description: t('更新成功！'),
|
||||
description: t('更新成功！')
|
||||
});
|
||||
}
|
||||
await reload();
|
||||
@ -253,7 +236,7 @@
|
||||
|
||||
async function handleSelect(selectIds) {
|
||||
selectId.value = selectIds[0];
|
||||
let res = await reload({searchInfo: {menuId: selectIds[0]}});
|
||||
let res = await reload({ searchInfo: { menuId: selectIds[0] } });
|
||||
roleDatasource.value = res;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user