对接角色管理接口
parent
e23d2a6fbc
commit
b897bb1dab
|
|
@ -1,7 +1,7 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userModel';
|
||||
import { defHttp } from '/@/utils/http/axios'
|
||||
import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userModel'
|
||||
|
||||
import { ErrorMessageMode } from '/#/axios';
|
||||
import { ErrorMessageMode } from '/#/axios'
|
||||
|
||||
enum Api {
|
||||
Login = '/api/auth/login',
|
||||
|
|
@ -22,20 +22,101 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal')
|
|||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: getUserInfo
|
||||
*/
|
||||
export function getUserInfo() {
|
||||
return defHttp.get<GetUserInfoModel>({ url: Api.GetUserInfo }, { errorMessageMode: 'none' });
|
||||
return defHttp.get<GetUserInfoModel>({ url: Api.GetUserInfo }, { errorMessageMode: 'none' })
|
||||
}
|
||||
|
||||
export function getPermCode() {
|
||||
return defHttp.get<string[]>({ url: Api.GetPermCode });
|
||||
return defHttp.get<string[]>({ url: Api.GetPermCode })
|
||||
}
|
||||
|
||||
export function doLogout() {
|
||||
return defHttp.delete({ url: Api.Logout });
|
||||
return defHttp.delete({ url: Api.Logout })
|
||||
}
|
||||
/**
|
||||
* @description:权限数据
|
||||
*/
|
||||
export function getPermissions() {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: '/api/permissions',
|
||||
},
|
||||
{
|
||||
errorMessageMode: 'none',
|
||||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:角色列表
|
||||
*/
|
||||
export function getRoles(params, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: '/api/admin-roles',
|
||||
params,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:添加角色
|
||||
*/
|
||||
export function addRoles(data, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.post(
|
||||
{
|
||||
url: '/api/admin-roles',
|
||||
data,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:修改角色
|
||||
*/
|
||||
export function editRoles(id: string, data, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.put(
|
||||
{
|
||||
url: `/api/admin-roles/${id}`,
|
||||
data,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:获取角色详情
|
||||
*/
|
||||
export function getRolesInfo(id, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.get(
|
||||
{
|
||||
url: `/api/admin-roles/${id} `,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description:删除角色
|
||||
*/
|
||||
export function deleteRoles(id: string, mode: ErrorMessageMode = 'modal') {
|
||||
return defHttp.delete(
|
||||
{
|
||||
url: `/api/admin-roles/${id}`,
|
||||
},
|
||||
{
|
||||
errorMessageMode: mode,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import BasicTree from './src/BasicTree.vue';
|
||||
import './style';
|
||||
|
||||
export { BasicTree };
|
||||
export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
|
||||
export * from './src/types/tree';
|
||||
|
|
@ -0,0 +1,455 @@
|
|||
<script lang="tsx">
|
||||
import type { CSSProperties } from 'vue';
|
||||
import type {
|
||||
FieldNames,
|
||||
TreeState,
|
||||
TreeItem,
|
||||
KeyType,
|
||||
CheckKeys,
|
||||
TreeActionType,
|
||||
} from './types/tree';
|
||||
|
||||
import {
|
||||
defineComponent,
|
||||
reactive,
|
||||
computed,
|
||||
unref,
|
||||
ref,
|
||||
watchEffect,
|
||||
toRaw,
|
||||
watch,
|
||||
onMounted,
|
||||
} from 'vue';
|
||||
import TreeHeader from './components/TreeHeader.vue';
|
||||
import { Tree, Spin, Empty } from 'ant-design-vue';
|
||||
import { TreeIcon } from './TreeIcon';
|
||||
import { ScrollContainer } from '/@/components/Container';
|
||||
import { omit, get, difference, cloneDeep } from 'lodash-es';
|
||||
import { isArray, isBoolean, isEmpty, isFunction } from '/@/utils/is';
|
||||
import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
|
||||
import { filter, treeToList, eachTree } from '/@/utils/helper/treeHelper';
|
||||
import { useTree } from './hooks/useTree';
|
||||
import { useContextMenu } from '/@/hooks/web/useContextMenu';
|
||||
import { CreateContextOptions } from '/@/components/ContextMenu';
|
||||
import { treeEmits, treeProps } from './types/tree';
|
||||
import { createBEM } from '/@/utils/bem';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BasicTree',
|
||||
inheritAttrs: false,
|
||||
props: treeProps,
|
||||
emits: treeEmits,
|
||||
setup(props, { attrs, slots, emit, expose }) {
|
||||
const [bem] = createBEM('tree');
|
||||
|
||||
const state = reactive<TreeState>({
|
||||
checkStrictly: props.checkStrictly,
|
||||
expandedKeys: props.expandedKeys || [],
|
||||
selectedKeys: props.selectedKeys || [],
|
||||
checkedKeys: props.checkedKeys || [],
|
||||
});
|
||||
|
||||
const searchState = reactive({
|
||||
startSearch: false,
|
||||
searchText: '',
|
||||
searchData: [] as TreeItem[],
|
||||
});
|
||||
|
||||
const treeDataRef = ref<TreeItem[]>([]);
|
||||
|
||||
const [createContextMenu] = useContextMenu();
|
||||
|
||||
const getFieldNames = computed((): Required<FieldNames> => {
|
||||
const { fieldNames } = props;
|
||||
return {
|
||||
children: 'children',
|
||||
title: 'title',
|
||||
key: 'key',
|
||||
...fieldNames,
|
||||
};
|
||||
});
|
||||
|
||||
const getBindValues = computed(() => {
|
||||
let propsData = {
|
||||
blockNode: true,
|
||||
...attrs,
|
||||
...props,
|
||||
expandedKeys: state.expandedKeys,
|
||||
selectedKeys: state.selectedKeys,
|
||||
checkedKeys: state.checkedKeys,
|
||||
checkStrictly: state.checkStrictly,
|
||||
fieldNames: unref(getFieldNames),
|
||||
'onUpdate:expandedKeys': (v: KeyType[]) => {
|
||||
state.expandedKeys = v;
|
||||
emit('update:expandedKeys', v);
|
||||
},
|
||||
'onUpdate:selectedKeys': (v: KeyType[]) => {
|
||||
state.selectedKeys = v;
|
||||
emit('update:selectedKeys', v);
|
||||
},
|
||||
onCheck: (v: CheckKeys, e) => {
|
||||
let currentValue = toRaw(state.checkedKeys) as KeyType[];
|
||||
if (isArray(currentValue) && searchState.startSearch) {
|
||||
const { key } = unref(getFieldNames);
|
||||
currentValue = difference(currentValue, getChildrenKeys(e.node.$attrs.node[key]));
|
||||
if (e.checked) {
|
||||
currentValue.push(e.node.$attrs.node[key]);
|
||||
}
|
||||
state.checkedKeys = currentValue;
|
||||
} else {
|
||||
state.checkedKeys = v;
|
||||
}
|
||||
|
||||
const rawVal = toRaw(state.checkedKeys);
|
||||
emit('update:value', rawVal);
|
||||
emit('check', rawVal, e);
|
||||
},
|
||||
onRightClick: handleRightClick,
|
||||
};
|
||||
return omit(propsData, 'treeData', 'class');
|
||||
});
|
||||
|
||||
const getTreeData = computed((): TreeItem[] =>
|
||||
searchState.startSearch ? searchState.searchData : unref(treeDataRef),
|
||||
);
|
||||
|
||||
const getNotFound = computed((): boolean => {
|
||||
return !getTreeData.value || getTreeData.value.length === 0;
|
||||
});
|
||||
|
||||
const {
|
||||
deleteNodeByKey,
|
||||
insertNodeByKey,
|
||||
insertNodesByKey,
|
||||
filterByLevel,
|
||||
updateNodeByKey,
|
||||
getAllKeys,
|
||||
getChildrenKeys,
|
||||
getEnabledKeys,
|
||||
getSelectedNode,
|
||||
} = useTree(treeDataRef, getFieldNames);
|
||||
|
||||
function getIcon(params: Recordable, icon?: string) {
|
||||
if (!icon) {
|
||||
if (props.renderIcon && isFunction(props.renderIcon)) {
|
||||
return props.renderIcon(params);
|
||||
}
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
|
||||
async function handleRightClick({ event, node }: Recordable) {
|
||||
const { rightMenuList: menuList = [], beforeRightClick } = props;
|
||||
let contextMenuOptions: CreateContextOptions = { event, items: [] };
|
||||
|
||||
if (beforeRightClick && isFunction(beforeRightClick)) {
|
||||
let result = await beforeRightClick(node, event);
|
||||
if (Array.isArray(result)) {
|
||||
contextMenuOptions.items = result;
|
||||
} else {
|
||||
Object.assign(contextMenuOptions, result);
|
||||
}
|
||||
} else {
|
||||
contextMenuOptions.items = menuList;
|
||||
}
|
||||
if (!contextMenuOptions.items?.length) return;
|
||||
contextMenuOptions.items = contextMenuOptions.items.filter((item) => !item.hidden);
|
||||
createContextMenu(contextMenuOptions);
|
||||
}
|
||||
|
||||
function setExpandedKeys(keys: KeyType[]) {
|
||||
state.expandedKeys = keys;
|
||||
}
|
||||
|
||||
function getExpandedKeys() {
|
||||
return state.expandedKeys;
|
||||
}
|
||||
function setSelectedKeys(keys: KeyType[]) {
|
||||
state.selectedKeys = keys;
|
||||
}
|
||||
|
||||
function getSelectedKeys() {
|
||||
return state.selectedKeys;
|
||||
}
|
||||
|
||||
function setCheckedKeys(keys: CheckKeys) {
|
||||
state.checkedKeys = keys;
|
||||
}
|
||||
|
||||
function getCheckedKeys() {
|
||||
return state.checkedKeys;
|
||||
}
|
||||
|
||||
function checkAll(checkAll: boolean) {
|
||||
state.checkedKeys = checkAll ? getEnabledKeys() : ([] as KeyType[]);
|
||||
}
|
||||
|
||||
function expandAll(expandAll: boolean) {
|
||||
state.expandedKeys = expandAll ? getAllKeys() : ([] as KeyType[]);
|
||||
}
|
||||
|
||||
function onStrictlyChange(strictly: boolean) {
|
||||
state.checkStrictly = strictly;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.searchValue,
|
||||
(val) => {
|
||||
if (val !== searchState.searchText) {
|
||||
searchState.searchText = val;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.treeData,
|
||||
(val) => {
|
||||
if (val) {
|
||||
handleSearch(searchState.searchText);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
function handleSearch(searchValue: string) {
|
||||
if (searchValue !== searchState.searchText) searchState.searchText = searchValue;
|
||||
emit('update:searchValue', searchValue);
|
||||
if (!searchValue) {
|
||||
searchState.startSearch = false;
|
||||
return;
|
||||
}
|
||||
const { filterFn, checkable, expandOnSearch, checkOnSearch, selectedOnSearch } =
|
||||
unref(props);
|
||||
searchState.startSearch = true;
|
||||
const { title: titleField, key: keyField } = unref(getFieldNames);
|
||||
|
||||
const matchedKeys: string[] = [];
|
||||
searchState.searchData = filter(
|
||||
unref(treeDataRef),
|
||||
(node) => {
|
||||
const result = filterFn
|
||||
? filterFn(searchValue, node, unref(getFieldNames))
|
||||
: node[titleField]?.includes(searchValue) ?? false;
|
||||
if (result) {
|
||||
matchedKeys.push(node[keyField]);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
unref(getFieldNames),
|
||||
);
|
||||
|
||||
if (expandOnSearch) {
|
||||
const expandKeys = treeToList(searchState.searchData).map((val) => {
|
||||
return val[keyField];
|
||||
});
|
||||
if (expandKeys && expandKeys.length) {
|
||||
setExpandedKeys(expandKeys);
|
||||
}
|
||||
}
|
||||
|
||||
if (checkOnSearch && checkable && matchedKeys.length) {
|
||||
setCheckedKeys(matchedKeys);
|
||||
}
|
||||
|
||||
if (selectedOnSearch && matchedKeys.length) {
|
||||
setSelectedKeys(matchedKeys);
|
||||
}
|
||||
}
|
||||
|
||||
function handleClickNode(key: string, children: TreeItem[]) {
|
||||
if (!props.clickRowToExpand || !children || children.length === 0) return;
|
||||
if (!state.expandedKeys.includes(key)) {
|
||||
setExpandedKeys([...state.expandedKeys, key]);
|
||||
} else {
|
||||
const keys = [...state.expandedKeys];
|
||||
const index = keys.findIndex((item) => item === key);
|
||||
if (index !== -1) {
|
||||
keys.splice(index, 1);
|
||||
}
|
||||
setExpandedKeys(keys);
|
||||
}
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
treeDataRef.value = props.treeData as TreeItem[];
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
const level = parseInt(props.defaultExpandLevel);
|
||||
if (level > 0) {
|
||||
state.expandedKeys = filterByLevel(level);
|
||||
} else if (props.defaultExpandAll) {
|
||||
expandAll(true);
|
||||
}
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
state.expandedKeys = props.expandedKeys;
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
state.selectedKeys = props.selectedKeys;
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
state.checkedKeys = props.checkedKeys;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
() => {
|
||||
state.checkedKeys = toRaw(props.value || []);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => state.checkedKeys,
|
||||
() => {
|
||||
const v = toRaw(state.checkedKeys);
|
||||
emit('update:value', v);
|
||||
emit('change', v);
|
||||
},
|
||||
);
|
||||
|
||||
watchEffect(() => {
|
||||
state.checkStrictly = props.checkStrictly;
|
||||
});
|
||||
|
||||
const instance: TreeActionType = {
|
||||
setExpandedKeys,
|
||||
getExpandedKeys,
|
||||
setSelectedKeys,
|
||||
getSelectedKeys,
|
||||
setCheckedKeys,
|
||||
getCheckedKeys,
|
||||
insertNodeByKey,
|
||||
insertNodesByKey,
|
||||
deleteNodeByKey,
|
||||
updateNodeByKey,
|
||||
getSelectedNode,
|
||||
checkAll,
|
||||
expandAll,
|
||||
filterByLevel: (level: number) => {
|
||||
state.expandedKeys = filterByLevel(level);
|
||||
},
|
||||
setSearchValue: (value: string) => {
|
||||
handleSearch(value);
|
||||
},
|
||||
getSearchValue: () => {
|
||||
return searchState.searchText;
|
||||
},
|
||||
};
|
||||
|
||||
function renderAction(node: TreeItem) {
|
||||
const { actionList } = props;
|
||||
if (!actionList || actionList.length === 0) return;
|
||||
return actionList.map((item, index) => {
|
||||
let nodeShow = true;
|
||||
if (isFunction(item.show)) {
|
||||
nodeShow = item.show?.(node);
|
||||
} else if (isBoolean(item.show)) {
|
||||
nodeShow = item.show;
|
||||
}
|
||||
|
||||
if (!nodeShow) return null;
|
||||
|
||||
return (
|
||||
<span key={index} class={bem('action')}>
|
||||
{item.render(node)}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
const treeData = computed(() => {
|
||||
const data = cloneDeep(getTreeData.value);
|
||||
eachTree(data, (item, _parent) => {
|
||||
const searchText = searchState.searchText;
|
||||
const { highlight } = unref(props);
|
||||
const {
|
||||
title: titleField,
|
||||
key: keyField,
|
||||
children: childrenField,
|
||||
} = unref(getFieldNames);
|
||||
|
||||
const icon = getIcon(item, item.icon);
|
||||
const title = get(item, titleField);
|
||||
|
||||
const searchIdx = searchText ? title.indexOf(searchText) : -1;
|
||||
const isHighlight =
|
||||
searchState.startSearch && !isEmpty(searchText) && highlight && searchIdx !== -1;
|
||||
const highlightStyle = `color: ${isBoolean(highlight) ? '#f50' : highlight}`;
|
||||
|
||||
const titleDom = isHighlight ? (
|
||||
<span class={unref(getBindValues)?.blockNode ? `${bem('content')}` : ''}>
|
||||
<span>{title.substr(0, searchIdx)}</span>
|
||||
<span style={highlightStyle}>{searchText}</span>
|
||||
<span>{title.substr(searchIdx + (searchText as string).length)}</span>
|
||||
</span>
|
||||
) : (
|
||||
title
|
||||
);
|
||||
item[titleField] = (
|
||||
<span
|
||||
class={`${bem('title')} pl-2`}
|
||||
onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
|
||||
>
|
||||
{slots?.title ? (
|
||||
getSlot(slots, 'title', item)
|
||||
) : (
|
||||
<>
|
||||
{icon && <TreeIcon icon={icon} />}
|
||||
{titleDom}
|
||||
<span class={bem('actions')}>{renderAction(item)}</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
return item;
|
||||
});
|
||||
return data;
|
||||
});
|
||||
|
||||
expose(instance);
|
||||
|
||||
return () => {
|
||||
const { title, helpMessage, toolbar, search, checkable } = props;
|
||||
const showTitle = title || toolbar || search || slots.headerTitle;
|
||||
const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
|
||||
return (
|
||||
<div class={[bem(), 'h-full', attrs.class]}>
|
||||
{showTitle && (
|
||||
<TreeHeader
|
||||
checkable={checkable}
|
||||
checkAll={checkAll}
|
||||
expandAll={expandAll}
|
||||
title={title}
|
||||
search={search}
|
||||
toolbar={toolbar}
|
||||
helpMessage={helpMessage}
|
||||
onStrictlyChange={onStrictlyChange}
|
||||
onSearch={handleSearch}
|
||||
searchText={searchState.searchText}
|
||||
>
|
||||
{extendSlots(slots)}
|
||||
</TreeHeader>
|
||||
)}
|
||||
<Spin wrapperClassName={unref(props.treeWrapperClassName)} spinning={unref(props.loading)} tip="加载中...">
|
||||
<ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
|
||||
<Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value} />
|
||||
</ScrollContainer>
|
||||
<Empty
|
||||
v-show={unref(getNotFound)}
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
class="!mt-4"
|
||||
/>
|
||||
</Spin>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import type { VNode, FunctionalComponent } from 'vue';
|
||||
|
||||
import { h } from 'vue';
|
||||
import { isString } from '@vue/shared';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
|
||||
export const TreeIcon: FunctionalComponent = ({ icon }: { icon: VNode | string }) => {
|
||||
if (!icon) return null;
|
||||
if (isString(icon)) {
|
||||
return h(Icon, { icon, class: 'mr-1' });
|
||||
}
|
||||
return Icon;
|
||||
};
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<div :class="bem()" class="flex px-2 py-1.5 items-center">
|
||||
<slot name="headerTitle" v-if="slots.headerTitle"></slot>
|
||||
<BasicTitle :helpMessage="helpMessage" v-if="!slots.headerTitle && title">
|
||||
{{ title }}
|
||||
</BasicTitle>
|
||||
<div
|
||||
class="flex items-center flex-1 cursor-pointer justify-self-stretch"
|
||||
v-if="search || toolbar"
|
||||
>
|
||||
<div :class="getInputSearchCls" v-if="search">
|
||||
<InputSearch
|
||||
:placeholder="t('common.searchText')"
|
||||
size="small"
|
||||
allowClear
|
||||
v-model:value="searchValue"
|
||||
/>
|
||||
</div>
|
||||
<Dropdown @click.prevent v-if="toolbar">
|
||||
<Icon icon="ion:ellipsis-vertical" />
|
||||
<template #overlay>
|
||||
<Menu @click="handleMenuClick">
|
||||
<template v-for="item in toolbarList" :key="item.value">
|
||||
<MenuItem v-bind="{ key: item.value }">
|
||||
{{ item.label }}
|
||||
</MenuItem>
|
||||
<MenuDivider v-if="item.divider" />
|
||||
</template>
|
||||
</Menu>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watch, useSlots } from 'vue';
|
||||
import { Dropdown, Menu, MenuItem, MenuDivider, InputSearch } from 'ant-design-vue';
|
||||
import { Icon } from '/@/components/Icon';
|
||||
import { BasicTitle } from '/@/components/Basic';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
import { createBEM } from '/@/utils/bem';
|
||||
import { ToolbarEnum } from '../types/tree';
|
||||
|
||||
const searchValue = ref('');
|
||||
|
||||
const [bem] = createBEM('tree-header');
|
||||
|
||||
const props = defineProps({
|
||||
helpMessage: {
|
||||
type: [String, Array] as PropType<string | string[]>,
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
toolbar: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
checkable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
search: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
searchText: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
checkAll: {
|
||||
type: Function,
|
||||
default: undefined,
|
||||
},
|
||||
expandAll: {
|
||||
type: Function,
|
||||
default: undefined,
|
||||
},
|
||||
} as const);
|
||||
const emit = defineEmits(['strictly-change', 'search']);
|
||||
|
||||
const slots = useSlots();
|
||||
const { t } = useI18n();
|
||||
|
||||
const getInputSearchCls = computed(() => {
|
||||
const titleExists = slots.headerTitle || props.title;
|
||||
return [
|
||||
'mr-1',
|
||||
'w-full',
|
||||
{
|
||||
['ml-5']: titleExists,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const toolbarList = computed(() => {
|
||||
const { checkable } = props;
|
||||
const defaultToolbarList = [
|
||||
{ label: t('component.tree.expandAll'), value: ToolbarEnum.EXPAND_ALL },
|
||||
{
|
||||
label: t('component.tree.unExpandAll'),
|
||||
value: ToolbarEnum.UN_EXPAND_ALL,
|
||||
divider: checkable,
|
||||
},
|
||||
];
|
||||
|
||||
return checkable
|
||||
? [
|
||||
{ label: t('component.tree.selectAll'), value: ToolbarEnum.SELECT_ALL },
|
||||
{
|
||||
label: t('component.tree.unSelectAll'),
|
||||
value: ToolbarEnum.UN_SELECT_ALL,
|
||||
divider: checkable,
|
||||
},
|
||||
...defaultToolbarList,
|
||||
{ label: t('component.tree.checkStrictly'), value: ToolbarEnum.CHECK_STRICTLY },
|
||||
{ label: t('component.tree.checkUnStrictly'), value: ToolbarEnum.CHECK_UN_STRICTLY },
|
||||
]
|
||||
: defaultToolbarList;
|
||||
});
|
||||
|
||||
function handleMenuClick(e: { key: ToolbarEnum }) {
|
||||
const { key } = e;
|
||||
switch (key) {
|
||||
case ToolbarEnum.SELECT_ALL:
|
||||
props.checkAll?.(true);
|
||||
break;
|
||||
case ToolbarEnum.UN_SELECT_ALL:
|
||||
props.checkAll?.(false);
|
||||
break;
|
||||
case ToolbarEnum.EXPAND_ALL:
|
||||
props.expandAll?.(true);
|
||||
break;
|
||||
case ToolbarEnum.UN_EXPAND_ALL:
|
||||
props.expandAll?.(false);
|
||||
break;
|
||||
case ToolbarEnum.CHECK_STRICTLY:
|
||||
emit('strictly-change', false);
|
||||
break;
|
||||
case ToolbarEnum.CHECK_UN_STRICTLY:
|
||||
emit('strictly-change', true);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function emitChange(value?: string): void {
|
||||
emit('search', value);
|
||||
}
|
||||
|
||||
const debounceEmitChange = useDebounceFn(emitChange, 200);
|
||||
|
||||
watch(
|
||||
() => searchValue.value,
|
||||
(v) => {
|
||||
debounceEmitChange(v);
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.searchText,
|
||||
(v) => {
|
||||
if (v !== searchValue.value) {
|
||||
searchValue.value = v;
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
import type { InsertNodeParams, KeyType, FieldNames, TreeItem } from '../types/tree';
|
||||
import type { Ref, ComputedRef } from 'vue';
|
||||
import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
|
||||
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { unref } from 'vue';
|
||||
import { forEach } from '/@/utils/helper/treeHelper';
|
||||
|
||||
export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: ComputedRef<FieldNames>) {
|
||||
function getAllKeys(list?: TreeDataItem[]) {
|
||||
const keys: string[] = [];
|
||||
const treeData = list || unref(treeDataRef);
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return keys;
|
||||
|
||||
for (let index = 0; index < treeData.length; index++) {
|
||||
const node = treeData[index];
|
||||
keys.push(node[keyField]!);
|
||||
const children = node[childrenField];
|
||||
if (children && children.length) {
|
||||
keys.push(...(getAllKeys(children) as string[]));
|
||||
}
|
||||
}
|
||||
return keys as KeyType[];
|
||||
}
|
||||
|
||||
// get keys that can be checked and selected
|
||||
function getEnabledKeys(list?: TreeDataItem[]) {
|
||||
const keys: string[] = [];
|
||||
const treeData = list || unref(treeDataRef);
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return keys;
|
||||
|
||||
for (let index = 0; index < treeData.length; index++) {
|
||||
const node = treeData[index];
|
||||
node.disabled !== true && node.selectable !== false && keys.push(node[keyField]!);
|
||||
const children = node[childrenField];
|
||||
if (children && children.length) {
|
||||
keys.push(...(getEnabledKeys(children) as string[]));
|
||||
}
|
||||
}
|
||||
return keys as KeyType[];
|
||||
}
|
||||
|
||||
function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]) {
|
||||
const keys: KeyType[] = [];
|
||||
const treeData = list || unref(treeDataRef);
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return keys;
|
||||
for (let index = 0; index < treeData.length; index++) {
|
||||
const node = treeData[index];
|
||||
const children = node[childrenField];
|
||||
if (nodeKey === node[keyField]) {
|
||||
keys.push(node[keyField]!);
|
||||
if (children && children.length) {
|
||||
keys.push(...(getAllKeys(children) as string[]));
|
||||
}
|
||||
} else {
|
||||
if (children && children.length) {
|
||||
keys.push(...getChildrenKeys(nodeKey, children));
|
||||
}
|
||||
}
|
||||
}
|
||||
return keys as KeyType[];
|
||||
}
|
||||
|
||||
// Update node
|
||||
function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
|
||||
if (!key) return;
|
||||
const treeData = list || unref(treeDataRef);
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
|
||||
if (!childrenField || !keyField) return;
|
||||
|
||||
for (let index = 0; index < treeData.length; index++) {
|
||||
const element: any = treeData[index];
|
||||
const children = element[childrenField];
|
||||
|
||||
if (element[keyField] === key) {
|
||||
treeData[index] = { ...treeData[index], ...node };
|
||||
break;
|
||||
} else if (children && children.length) {
|
||||
updateNodeByKey(key, node, element[childrenField]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expand the specified level
|
||||
function filterByLevel(level = 1, list?: TreeDataItem[], currentLevel = 1) {
|
||||
if (!level) {
|
||||
return [];
|
||||
}
|
||||
const res: (string | number)[] = [];
|
||||
const data = list || unref(treeDataRef) || [];
|
||||
for (let index = 0; index < data.length; index++) {
|
||||
const item = data[index];
|
||||
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
const key = keyField ? item[keyField] : '';
|
||||
const children = childrenField ? item[childrenField] : [];
|
||||
res.push(key);
|
||||
if (children && children.length && currentLevel < level) {
|
||||
currentLevel += 1;
|
||||
res.push(...filterByLevel(level, children, currentLevel));
|
||||
}
|
||||
}
|
||||
return res as string[] | number[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加节点
|
||||
*/
|
||||
function insertNodeByKey({ parentKey = null, node, push = 'push' }: InsertNodeParams) {
|
||||
const treeData: any = cloneDeep(unref(treeDataRef));
|
||||
if (!parentKey) {
|
||||
treeData[push](node);
|
||||
treeDataRef.value = treeData;
|
||||
return;
|
||||
}
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return;
|
||||
|
||||
forEach(treeData, (treeItem) => {
|
||||
if (treeItem[keyField] === parentKey) {
|
||||
treeItem[childrenField] = treeItem[childrenField] || [];
|
||||
treeItem[childrenField][push](node);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
treeDataRef.value = treeData;
|
||||
}
|
||||
/**
|
||||
* 批量添加节点
|
||||
*/
|
||||
function insertNodesByKey({ parentKey = null, list, push = 'push' }: InsertNodeParams) {
|
||||
const treeData: any = cloneDeep(unref(treeDataRef));
|
||||
if (!list || list.length < 1) {
|
||||
return;
|
||||
}
|
||||
if (!parentKey) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
treeData[push](list[i]);
|
||||
}
|
||||
} else {
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return;
|
||||
|
||||
forEach(treeData, (treeItem) => {
|
||||
if (treeItem[keyField] === parentKey) {
|
||||
treeItem[childrenField] = treeItem[childrenField] || [];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
treeItem[childrenField][push](list[i]);
|
||||
}
|
||||
treeDataRef.value = treeData;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// Delete node
|
||||
function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
|
||||
if (!key) return;
|
||||
const treeData = list || unref(treeDataRef);
|
||||
const { key: keyField, children: childrenField } = unref(getFieldNames);
|
||||
if (!childrenField || !keyField) return;
|
||||
|
||||
for (let index = 0; index < treeData.length; index++) {
|
||||
const element: any = treeData[index];
|
||||
const children = element[childrenField];
|
||||
|
||||
if (element[keyField] === key) {
|
||||
treeData.splice(index, 1);
|
||||
break;
|
||||
} else if (children && children.length) {
|
||||
deleteNodeByKey(key, element[childrenField]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Get selected node
|
||||
function getSelectedNode(key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) {
|
||||
if (!key && key !== 0) return null;
|
||||
const treeData = list || unref(treeDataRef);
|
||||
treeData.forEach((item) => {
|
||||
if (selectedNode?.key || selectedNode?.key === 0) return selectedNode;
|
||||
if (item.key === key) {
|
||||
selectedNode = item;
|
||||
return;
|
||||
}
|
||||
if (item.children && item.children.length) {
|
||||
selectedNode = getSelectedNode(key, item.children, selectedNode);
|
||||
}
|
||||
});
|
||||
return selectedNode || null;
|
||||
}
|
||||
return {
|
||||
deleteNodeByKey,
|
||||
insertNodeByKey,
|
||||
insertNodesByKey,
|
||||
filterByLevel,
|
||||
updateNodeByKey,
|
||||
getAllKeys,
|
||||
getChildrenKeys,
|
||||
getEnabledKeys,
|
||||
getSelectedNode,
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
import type { ExtractPropTypes } from 'vue';
|
||||
import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
|
||||
|
||||
import { buildProps } from '/@/utils/props';
|
||||
|
||||
export enum ToolbarEnum {
|
||||
SELECT_ALL,
|
||||
UN_SELECT_ALL,
|
||||
EXPAND_ALL,
|
||||
UN_EXPAND_ALL,
|
||||
CHECK_STRICTLY,
|
||||
CHECK_UN_STRICTLY,
|
||||
}
|
||||
|
||||
export const treeEmits = [
|
||||
'update:expandedKeys',
|
||||
'update:selectedKeys',
|
||||
'update:value',
|
||||
'change',
|
||||
'check',
|
||||
'update:searchValue',
|
||||
];
|
||||
|
||||
export interface TreeState {
|
||||
expandedKeys: KeyType[];
|
||||
selectedKeys: KeyType[];
|
||||
checkedKeys: CheckKeys;
|
||||
checkStrictly: boolean;
|
||||
}
|
||||
|
||||
export interface FieldNames {
|
||||
children?: string;
|
||||
title?: string;
|
||||
key?: string;
|
||||
}
|
||||
|
||||
export type KeyType = string | number;
|
||||
|
||||
export type CheckKeys =
|
||||
| KeyType[]
|
||||
| { checked: string[] | number[]; halfChecked: string[] | number[] };
|
||||
|
||||
export const treeProps = buildProps({
|
||||
value: {
|
||||
type: [Object, Array] as PropType<KeyType[] | CheckKeys>,
|
||||
},
|
||||
|
||||
renderIcon: {
|
||||
type: Function as PropType<(params: Recordable) => string>,
|
||||
},
|
||||
|
||||
helpMessage: {
|
||||
type: [String, Array] as PropType<string | string[]>,
|
||||
default: '',
|
||||
},
|
||||
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
toolbar: Boolean,
|
||||
search: Boolean,
|
||||
searchValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
checkStrictly: Boolean,
|
||||
clickRowToExpand: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
checkable: Boolean,
|
||||
defaultExpandLevel: {
|
||||
type: [String, Number] as PropType<string | number>,
|
||||
default: '',
|
||||
},
|
||||
defaultExpandAll: Boolean,
|
||||
|
||||
fieldNames: {
|
||||
type: Object as PropType<FieldNames>,
|
||||
},
|
||||
|
||||
treeData: {
|
||||
type: Array as PropType<TreeDataItem[]>,
|
||||
},
|
||||
|
||||
actionList: {
|
||||
type: Array as PropType<TreeActionItem[]>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
expandedKeys: {
|
||||
type: Array as PropType<KeyType[]>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
selectedKeys: {
|
||||
type: Array as PropType<KeyType[]>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
checkedKeys: {
|
||||
type: Array as PropType<CheckKeys>,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
beforeRightClick: {
|
||||
type: Function as PropType<(...arg: any) => ContextMenuItem[] | ContextMenuOptions>,
|
||||
default: undefined,
|
||||
},
|
||||
|
||||
rightMenuList: {
|
||||
type: Array as PropType<ContextMenuItem[]>,
|
||||
},
|
||||
// 自定义数据过滤判断方法(注: 不是整个过滤方法，而是内置过滤的判断方法，用于增强原本仅能通过title进行过滤的方式)
|
||||
filterFn: {
|
||||
type: Function as PropType<
|
||||
(searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean
|
||||
>,
|
||||
default: undefined,
|
||||
},
|
||||
// 高亮搜索值，仅高亮具体匹配值（通过title）值为true时使用默认色值，值为#xxx时使用此值替代且高亮开启
|
||||
highlight: {
|
||||
type: [Boolean, String] as PropType<Boolean | String>,
|
||||
default: false,
|
||||
},
|
||||
// 搜索完成时自动展开结果
|
||||
expandOnSearch: Boolean,
|
||||
// 搜索完成自动选中所有结果,当且仅当 checkable===true 时生效
|
||||
checkOnSearch: Boolean,
|
||||
// 搜索完成自动select所有结果
|
||||
selectedOnSearch: Boolean,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
treeWrapperClassName: String
|
||||
});
|
||||
|
||||
export type TreeProps = ExtractPropTypes<typeof treeProps>;
|
||||
|
||||
export interface ContextMenuItem {
|
||||
label: string;
|
||||
icon?: string;
|
||||
hidden?: boolean;
|
||||
disabled?: boolean;
|
||||
handler?: Fn;
|
||||
divider?: boolean;
|
||||
children?: ContextMenuItem[];
|
||||
}
|
||||
|
||||
export interface ContextMenuOptions {
|
||||
icon?: string;
|
||||
styles?: any;
|
||||
items?: ContextMenuItem[];
|
||||
}
|
||||
|
||||
export interface TreeItem extends TreeDataItem {
|
||||
icon?: any;
|
||||
}
|
||||
|
||||
export interface TreeActionItem {
|
||||
render: (record: Recordable) => any;
|
||||
show?: boolean | ((record: Recordable) => boolean);
|
||||
}
|
||||
|
||||
export interface InsertNodeParams {
|
||||
parentKey: string | null;
|
||||
node: TreeDataItem;
|
||||
list?: TreeDataItem[];
|
||||
push?: 'push' | 'unshift';
|
||||
}
|
||||
|
||||
export interface TreeActionType {
|
||||
checkAll: (checkAll: boolean) => void;
|
||||
expandAll: (expandAll: boolean) => void;
|
||||
setExpandedKeys: (keys: KeyType[]) => void;
|
||||
getExpandedKeys: () => KeyType[];
|
||||
setSelectedKeys: (keys: KeyType[]) => void;
|
||||
getSelectedKeys: () => KeyType[];
|
||||
setCheckedKeys: (keys: CheckKeys) => void;
|
||||
getCheckedKeys: () => CheckKeys;
|
||||
filterByLevel: (level: number) => void;
|
||||
insertNodeByKey: (opt: InsertNodeParams) => void;
|
||||
insertNodesByKey: (opt: InsertNodeParams) => void;
|
||||
deleteNodeByKey: (key: string) => void;
|
||||
updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
|
||||
setSearchValue: (value: string) => void;
|
||||
getSearchValue: () => string;
|
||||
getSelectedNode: (
|
||||
key: KeyType,
|
||||
treeList?: TreeItem[],
|
||||
selectNode?: TreeItem | null,
|
||||
) => TreeItem | null;
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
@tree-prefix-cls: ~'@{namespace}-tree';
|
||||
|
||||
.@{tree-prefix-cls} {
|
||||
background-color: @component-background;
|
||||
|
||||
.ant-tree-node-content-wrapper {
|
||||
position: relative;
|
||||
|
||||
.ant-tree-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-right: 10px;
|
||||
|
||||
&:hover {
|
||||
.@{tree-prefix-cls}__action {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
position: absolute;
|
||||
//top: 2px;
|
||||
right: 3px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__action {
|
||||
margin-left: 4px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&-header {
|
||||
border-bottom: 1px solid @border-color-base;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
import './index.less';
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import type { AppRouteModule } from '/@/router/types';
|
||||
import { LAYOUT } from '/@/router/constant';
|
||||
import type { AppRouteModule } from '/@/router/types'
|
||||
import { LAYOUT } from '/@/router/constant'
|
||||
const main: AppRouteModule = {
|
||||
path: '/system',
|
||||
name: 'System',
|
||||
|
|
@ -19,7 +19,23 @@ const main: AppRouteModule = {
|
|||
title: '设备管理',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'role',
|
||||
name: 'SystemRole',
|
||||
component: () => import('/@/views/system/role/index.vue'),
|
||||
meta: {
|
||||
title: '角色管理',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'account',
|
||||
name: 'SystemAccount',
|
||||
component: () => import('/@/views/system/account/index.vue'),
|
||||
meta: {
|
||||
title: '账号管理',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
export default main;
|
||||
export default main
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
import { BasicColumn } from '/@/components/Table'
|
||||
import { FormSchema } from '/@/components/Table'
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '角色编码',
|
||||
dataIndex: 'slug',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
fixed: undefined,
|
||||
},
|
||||
]
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
// {
|
||||
// field: 'roleNme',
|
||||
// label: '角色名称',
|
||||
// component: 'Input',
|
||||
// colProps: { span: 8 },
|
||||
// },
|
||||
// {
|
||||
// field: 'status',
|
||||
// label: '状态',
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// { label: '启用', value: '0' },
|
||||
// { label: '停用', value: '1' },
|
||||
// ],
|
||||
// },
|
||||
// colProps: { span: 8 },
|
||||
// },
|
||||
]
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'id',
|
||||
label: '角色ID',
|
||||
required: false,
|
||||
dynamicDisabled: true,
|
||||
component: 'Input',
|
||||
ifShow: ({ values }) => {
|
||||
return !!values.id
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '角色名',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
field: 'slug',
|
||||
label: '角色编码',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: ' ',
|
||||
field: 'permission_ids',
|
||||
slot: 'menu',
|
||||
component: 'Input',
|
||||
ifShow: ({ values }) => {
|
||||
return !!values.id
|
||||
},
|
||||
},
|
||||
]
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<div class="flex items-center justify-center">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{ label: '编辑', onClick: handleEdit.bind(null, record) },
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
placement: 'topRight',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<RoleDrawer @register="registerDrawer" @success="handleSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table'
|
||||
import { getRoles, deleteRoles } from '/@/api/sys/user'
|
||||
import { useDrawer } from '/@/components/Drawer'
|
||||
import RoleDrawer from './RoleDrawer.vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { columns, searchFormSchema } from './role.data'
|
||||
const [registerDrawer, { openDrawer }] = useDrawer()
|
||||
const [registerTable, { reload }] = useTable({
|
||||
title: '账号管理',
|
||||
api: getRoles,
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
showIndexColumn: true,
|
||||
})
|
||||
const handleSuccess = () => {
|
||||
message.success('操作成功')
|
||||
reload()
|
||||
}
|
||||
const handleCreate = () => {
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
})
|
||||
}
|
||||
const handleEdit = (record: Recordable) => {
|
||||
openDrawer(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
})
|
||||
}
|
||||
const handleDelete = async (record: Recordable) => {
|
||||
await deleteRoles(record.id)
|
||||
message.success('删除成功')
|
||||
reload()
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<BasicDrawer
|
||||
v-bind="$attrs"
|
||||
@register="registerDrawer"
|
||||
showFooter
|
||||
:title="getTitle"
|
||||
width="500px"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<BasicForm @register="registerForm">
|
||||
<template #menu="{ model, field }">
|
||||
<BasicTree
|
||||
v-model:value="model[field]"
|
||||
:treeData="treeData"
|
||||
:defaultExpandLevel="1"
|
||||
:fieldNames="{ title: 'label', key: 'id' }"
|
||||
checkable
|
||||
toolbar
|
||||
title="菜单分配"
|
||||
/>
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref } from 'vue'
|
||||
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||
import { formSchema } from './role.data'
|
||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree'
|
||||
import { getPermissions, addRoles, getRolesInfo, editRoles } from '/@/api/sys/user'
|
||||
const emits = defineEmits(['success', 'register'])
|
||||
const isUpdate = ref(false)
|
||||
const treeData = ref<TreeItem[]>([])
|
||||
const getTitle = computed(() => (!isUpdate.value ? '新增角色' : '编辑角色'))
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||||
labelWidth: 90,
|
||||
baseColProps: { span: 24 },
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
})
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
resetFields()
|
||||
setDrawerProps({ confirmLoading: false })
|
||||
// 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
|
||||
if (unref(treeData).length === 0) {
|
||||
treeData.value = (await getPermissions()) as any as TreeItem[]
|
||||
}
|
||||
isUpdate.value = data?.isUpdate
|
||||
if (unref(isUpdate)) {
|
||||
const res = await getRolesInfo(data.id)
|
||||
await setFieldsValue({
|
||||
...res,
|
||||
permission_ids: res.permissions,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await validate()
|
||||
setDrawerProps({ confirmLoading: true })
|
||||
if (values.id) {
|
||||
// 修改
|
||||
await editRoles(values.id, values)
|
||||
} else {
|
||||
// 新增
|
||||
await addRoles(values)
|
||||
}
|
||||
closeDrawer()
|
||||
emits('success')
|
||||
} finally {
|
||||
setDrawerProps({ confirmLoading: false })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<div class="flex items-center justify-center">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{ label: '编辑', onClick: handleEdit.bind(null, record) },
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
placement: 'topRight',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<RoleDrawer @register="registerDrawer" @success="handleSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table'
|
||||
import { getRoles, deleteRoles } from '/@/api/sys/user'
|
||||
import { useDrawer } from '/@/components/Drawer'
|
||||
import RoleDrawer from './RoleDrawer.vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { columns, searchFormSchema } from './role.data'
|
||||
const [registerDrawer, { openDrawer }] = useDrawer()
|
||||
const [registerTable, { reload }] = useTable({
|
||||
title: '角色列表',
|
||||
api: getRoles,
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
showIndexColumn: true,
|
||||
})
|
||||
const handleSuccess = () => {
|
||||
message.success('操作成功')
|
||||
reload()
|
||||
}
|
||||
const handleCreate = () => {
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
})
|
||||
}
|
||||
const handleEdit = (record: Recordable) => {
|
||||
openDrawer(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
})
|
||||
}
|
||||
const handleDelete = async (record: Recordable) => {
|
||||
await deleteRoles(record.id)
|
||||
message.success('删除成功')
|
||||
reload()
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import { BasicColumn } from '/@/components/Table'
|
||||
import { FormSchema } from '/@/components/Table'
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'name',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '角色编码',
|
||||
dataIndex: 'slug',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
fixed: undefined,
|
||||
},
|
||||
]
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
// {
|
||||
// field: 'roleNme',
|
||||
// label: '角色名称',
|
||||
// component: 'Input',
|
||||
// colProps: { span: 8 },
|
||||
// },
|
||||
// {
|
||||
// field: 'status',
|
||||
// label: '状态',
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// { label: '启用', value: '0' },
|
||||
// { label: '停用', value: '1' },
|
||||
// ],
|
||||
// },
|
||||
// colProps: { span: 8 },
|
||||
// },
|
||||
]
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'id',
|
||||
label: '角色ID',
|
||||
required: false,
|
||||
dynamicDisabled: true,
|
||||
component: 'Input',
|
||||
ifShow: ({ values }) => {
|
||||
return !!values.id
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '角色名',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
field: 'slug',
|
||||
label: '角色编码',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: ' ',
|
||||
field: 'permission_ids',
|
||||
slot: 'menu',
|
||||
component: 'Input',
|
||||
ifShow: ({ values }) => {
|
||||
return !!values.id
|
||||
},
|
||||
},
|
||||
]
|
||||
Loading…
Reference in New Issue