chore: seed migration objects batch 17
This commit is contained in:
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:mask-closable="false"
|
||||
:show-icon="false"
|
||||
preset="dialog"
|
||||
transform-origin="center"
|
||||
title="添加菜单"
|
||||
:style="{
|
||||
width: dialogWidth,
|
||||
}"
|
||||
>
|
||||
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||
<n-spin :show="loading" description="请稍候...">
|
||||
<EditForm
|
||||
ref="editFormRef"
|
||||
v-model:formParams="formParams"
|
||||
v-model:treeOption="treeOption"
|
||||
@reloadTable="reloadTable"
|
||||
@closeForm="closeForm"
|
||||
/>
|
||||
</n-spin>
|
||||
</n-scrollbar>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="closeForm"> 关闭 </n-button>
|
||||
<n-button @click="handleReset"> 重置 </n-button>
|
||||
<n-button type="primary" :loading="formLoading" @click="formSubmit"> 确定添加 </n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { State, newState } from './model';
|
||||
import { adaModalWidth } from '@/utils/hotgo';
|
||||
import EditForm from '@/views/permission/menu/editForm.vue';
|
||||
|
||||
const emit = defineEmits(['reloadTable']);
|
||||
const formParams = ref<State>(newState(null));
|
||||
const treeOption = defineModel<any[]>('treeOption');
|
||||
const loading = ref(false);
|
||||
const showModal = ref(false);
|
||||
const editFormRef = ref();
|
||||
const formLoading = computed(() => {
|
||||
return editFormRef.value?.getFormLoading();
|
||||
});
|
||||
|
||||
const dialogWidth = computed(() => {
|
||||
return adaModalWidth(960);
|
||||
});
|
||||
|
||||
function reloadTable() {
|
||||
emit('reloadTable');
|
||||
}
|
||||
|
||||
function openModal(state: State) {
|
||||
showModal.value = true;
|
||||
formParams.value = newState(state);
|
||||
}
|
||||
|
||||
function formSubmit(e) {
|
||||
e.preventDefault();
|
||||
editFormRef.value.formSubmit();
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
editFormRef.value.handleReset();
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
showModal.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-form
|
||||
:model="formParams"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
:label-width="100"
|
||||
class="py-4"
|
||||
>
|
||||
<n-grid cols="2 300:1 600:2">
|
||||
<n-gi>
|
||||
<n-form-item label="菜单类型" path="type">
|
||||
<n-radio-group
|
||||
v-model:value="formParams.type"
|
||||
name="type"
|
||||
:on-update:value="handleUpdateType"
|
||||
>
|
||||
<n-radio-button
|
||||
v-for="menuType in dict.getOptionUnRef('sys_menu_types')"
|
||||
:key="menuType.value"
|
||||
:value="menuType.value"
|
||||
:label="menuType.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="上级目录" path="pid">
|
||||
<n-cascader
|
||||
clearable
|
||||
filterable
|
||||
:options="filterTreeOption"
|
||||
v-model:value="formParams.pid"
|
||||
value-field="key"
|
||||
label-field="label"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item :label="titleLabel" path="title">
|
||||
<n-input placeholder="请输入" v-model:value="formParams.title" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item path="icon">
|
||||
<IconSelector style="width: 100%" v-model:value="formParams.icon" option="antd" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请填写图标编码，可以参考图标库，也可以不填使用默认图标
|
||||
</n-tooltip>
|
||||
菜单图标
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item path="path">
|
||||
<n-input placeholder="路由地址" v-model:value="formParams.path" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请路由地址，如：user
|
||||
</n-tooltip>
|
||||
路由地址
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item path="name">
|
||||
<n-input placeholder="路由别名" v-model:value="formParams.name" />
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
对应路由配置文件中 `name` 只能是唯一性，配置 `http(s)://` 开头地址 则会新窗口打开
|
||||
</n-tooltip>
|
||||
路由别名
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="2 300:1 600:2" v-if="formParams.type !== 3">
|
||||
<n-gi v-if="formParams.type === 1">
|
||||
<n-form-item label="目录组件" path="component">
|
||||
<n-select
|
||||
v-if="formParams.type === 1"
|
||||
:options="dict.getOptionUnRef('sys_menu_component')"
|
||||
v-model:value="formParams.component"
|
||||
placeholder="请选择目录组件"
|
||||
clearable
|
||||
tag
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
|
||||
<n-gi v-if="formParams.type === 2">
|
||||
<n-form-item label="组件路径" path="component">
|
||||
<n-input placeholder="组件路径" v-model:value="formParams.component" />
|
||||
<template #feedback> 填 Vue 组件路径，如：`/system/menu/menu` </template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type === 1">
|
||||
<n-form-item label="默认跳转" path="redirect">
|
||||
<n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
|
||||
<template #feedback>当目录下存在多个同级菜单时适用，如：`/system/menu/menu`</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-divider title-placement="left">功能设置</n-divider>
|
||||
|
||||
<n-grid cols="1">
|
||||
<n-gi>
|
||||
<n-form-item label="分配权限" path="permissions">
|
||||
<n-dynamic-tags
|
||||
v-model:value="permissions"
|
||||
:on-update:value="handleUpdatePermissions"
|
||||
type="success"
|
||||
/>
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请填写API路径地址，可同时作用于server端接口鉴权和web端细粒度权限
|
||||
</n-tooltip>
|
||||
分配权限
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="2 300:1 600:2">
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item label="高亮路由" path="activeMenu">
|
||||
<n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="菜单排序" path="sort">
|
||||
<n-input-number style="width: 100%" v-model:value="formParams.sort" clearable />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item label="内嵌链接" path="frameSrc">
|
||||
<n-input-group>
|
||||
<n-select
|
||||
:style="{ width: '33%', minWidth: '80px' }"
|
||||
:options="dict.getOptionUnRef('sys_switch')"
|
||||
v-model:value="formParams.isFrame"
|
||||
/>
|
||||
<n-input
|
||||
placeholder="格式：http://www.xxx.cn 或 https://www.xxx.cn"
|
||||
v-model:value="formParams.frameSrc"
|
||||
/>
|
||||
</n-input-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="菜单状态" path="status">
|
||||
<n-radio-group v-model:value="formParams.status" name="status">
|
||||
<n-radio-button
|
||||
v-for="status in dict.getOptionUnRef('sys_normal_disable')"
|
||||
:key="status.value"
|
||||
:value="status.value"
|
||||
:label="status.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-form-item label="高级选项" path="senior" v-if="formParams.type !== 3">
|
||||
<n-checkbox-group v-model:value="senior" :on-update:value="handleSeniorChecked">
|
||||
<n-space item-style="display: flex;">
|
||||
<n-checkbox value="keepAlive" label="缓存路由" />
|
||||
<n-checkbox value="hidden" label="隐藏菜单" />
|
||||
<n-checkbox value="alwaysShow" label="简化路由" />
|
||||
<n-checkbox value="affix" label="页签固定" />
|
||||
<n-checkbox value="isRoot" label="根路由" />
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item path="auth" style="margin-left: 100px" v-if="formParams.id > 0">
|
||||
<n-space>
|
||||
<n-button type="primary" :loading="loading" @click="formSubmit">保存修改 </n-button>
|
||||
<n-button @click="handleReset">重置</n-button>
|
||||
<n-button @click="handleDel">删除</n-button>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { QuestionCircleOutlined } from '@vicons/antd';
|
||||
import IconSelector from '@/components/IconSelector/index.vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { newState, State } from '@/views/permission/menu/model';
|
||||
import { FormItemRule, useDialog, useMessage } from 'naive-ui';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { DeleteMenu, EditMenu } from '@/api/system/menu';
|
||||
import { findTreeNode } from '@/utils';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
import type { FormRules } from 'naive-ui/es/form/src/interface';
|
||||
|
||||
const rules: FormRules = {
|
||||
title: {
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
label: {
|
||||
required: true,
|
||||
message: '请输入标题',
|
||||
trigger: 'blur',
|
||||
},
|
||||
path: {
|
||||
required: false,
|
||||
message: '请输入路由地址',
|
||||
trigger: 'blur',
|
||||
validator: function (_rule: FormItemRule, value: any, callback: Function): boolean | Error {
|
||||
if (formParams.value.type != 3 && !value) {
|
||||
callback(new Error('请输入路由地址'));
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const emit = defineEmits(['reloadTable', 'closeForm']);
|
||||
const dict = useDictStore();
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const loading = ref(false);
|
||||
const formRef = ref();
|
||||
const formParams = defineModel<State>('formParams', { required: true });
|
||||
const treeOption = defineModel<any[]>('treeOption');
|
||||
const titleLabel = computed(() => {
|
||||
const type = formParams.value.type as number;
|
||||
if (type == 1) {
|
||||
return '目录名称';
|
||||
}
|
||||
if (type == 2) {
|
||||
return '菜单名称';
|
||||
}
|
||||
return '按钮名称';
|
||||
});
|
||||
|
||||
const filterTreeOption = computed(() => {
|
||||
const list = cloneDeep(treeOption.value) as any[];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const item = list[i];
|
||||
if (item.id === formParams.value.id) {
|
||||
item.disabled = true;
|
||||
if (item.children) {
|
||||
setChildrenDisabled(item.children);
|
||||
}
|
||||
} else {
|
||||
if (item.children) {
|
||||
const foundChild = findItemById(item.children, formParams.value.id);
|
||||
if (foundChild) {
|
||||
foundChild.disabled = true;
|
||||
setChildrenDisabled(foundChild.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return list;
|
||||
});
|
||||
|
||||
const senior = computed(() => {
|
||||
let opts: string[] = [];
|
||||
if (formParams.value.keepAlive == 1) {
|
||||
opts.push('keepAlive');
|
||||
}
|
||||
if (formParams.value.hidden == 1) {
|
||||
opts.push('hidden');
|
||||
}
|
||||
if (formParams.value.alwaysShow == 1) {
|
||||
opts.push('alwaysShow');
|
||||
}
|
||||
if (formParams.value.affix == 1) {
|
||||
opts.push('affix');
|
||||
}
|
||||
if (formParams.value.isRoot == 1) {
|
||||
opts.push('isRoot');
|
||||
}
|
||||
return opts;
|
||||
});
|
||||
|
||||
function handleSeniorChecked(_: string, opt: { actionType: 'check' | 'uncheck'; value: string }) {
|
||||
if (opt.actionType == 'check') {
|
||||
formParams.value[opt.value] = 1;
|
||||
} else {
|
||||
formParams.value[opt.value] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function setChildrenDisabled(children: State[]) {
|
||||
if (!children) return;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const child = children[i];
|
||||
child.disabled = true;
|
||||
if (child.children) {
|
||||
setChildrenDisabled(child.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function findItemById(children: State[], id: number) {
|
||||
if (!children) {
|
||||
return null;
|
||||
}
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const item = children[i];
|
||||
if (item.id === id) {
|
||||
return item;
|
||||
}
|
||||
|
||||
if (item.children) {
|
||||
const child = findItemById(item.children, id);
|
||||
if (child) {
|
||||
return child;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getFormLoading() {
|
||||
return loading.value;
|
||||
}
|
||||
|
||||
function handleDel() {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: `您确定要删除 ` + formParams.value.title + ` 菜单吗?`,
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
DeleteMenu(formParams.value).then((_res) => {
|
||||
message.success('操作成功');
|
||||
formParams.value = newState(null);
|
||||
emit('reloadTable');
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
const item = findTreeNode(treeOption.value, formParams.value.id);
|
||||
formParams.value = newState(item);
|
||||
}
|
||||
|
||||
function formSubmit() {
|
||||
formRef.value.validate((errors: boolean) => {
|
||||
if (!errors) {
|
||||
loading.value = true;
|
||||
EditMenu(formParams.value)
|
||||
.then((_res) => {
|
||||
message.success('操作成功');
|
||||
emit('reloadTable');
|
||||
emit('closeForm');
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
message.error('请填写完整信息');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const permissions = computed(() => {
|
||||
if (formParams.value.permissions.length == 0) {
|
||||
return [];
|
||||
}
|
||||
return formParams.value.permissions.split(',');
|
||||
});
|
||||
|
||||
function handleUpdatePermissions(values: string[]) {
|
||||
formParams.value.permissions = Array.from(new Set(values)).join(',');
|
||||
}
|
||||
|
||||
function handleUpdateType(value: number) {
|
||||
formParams.value.type = value;
|
||||
if (value == 1) {
|
||||
formParams.value.component = null;
|
||||
} else {
|
||||
formParams.value.component = '';
|
||||
}
|
||||
|
||||
const item = findTreeNode(treeOption.value, formParams.value.id);
|
||||
if (item && item.type == value) {
|
||||
formParams.value.component = item.component;
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
handleReset,
|
||||
formSubmit,
|
||||
getFormLoading,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="n-layout-page-header" v-if="!isModal">
|
||||
<n-card :bordered="false" title="菜单管理">
|
||||
在这里可以管理编辑系统下的所有菜单导航和分配相应的菜单权限
|
||||
</n-card>
|
||||
</div>
|
||||
<n-grid
|
||||
cols="1 s:1 m:1 l:3 xl:3 2xl:3"
|
||||
responsive="screen"
|
||||
:x-gap="12"
|
||||
>
|
||||
<n-gi span="1">
|
||||
<n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
|
||||
<template #header>
|
||||
<n-space>
|
||||
<n-button type="info" icon-placement="left" @click="openCreateDrawer">
|
||||
<template #icon>
|
||||
<div class="flex items-center">
|
||||
<n-icon size="14">
|
||||
<PlusOutlined />
|
||||
</n-icon>
|
||||
</div>
|
||||
</template>
|
||||
添加菜单
|
||||
</n-button>
|
||||
<n-button
|
||||
type="info"
|
||||
icon-placement="left"
|
||||
@click="openChildCreateDrawer"
|
||||
:disabled="formParams.id == 0"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center">
|
||||
<n-icon size="14">
|
||||
<PlusOutlined />
|
||||
</n-icon>
|
||||
</div>
|
||||
</template>
|
||||
添加子菜单
|
||||
</n-button>
|
||||
<n-button type="primary" icon-placement="left" @click="packHandle">
|
||||
全部{{ expandedKeys.length ? '收起' : '展开' }}
|
||||
<template #icon>
|
||||
<div class="flex items-center">
|
||||
<n-icon size="14">
|
||||
<AlignLeftOutlined />
|
||||
</n-icon>
|
||||
</div>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
<div class="w-full menu">
|
||||
<n-input type="text" v-model:value="pattern" placeholder="输入菜单名称或权限路径搜索">
|
||||
<template #suffix>
|
||||
<n-icon size="18" class="cursor-pointer">
|
||||
<SearchOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-input>
|
||||
<div class="py-3 menu-list">
|
||||
<template v-if="loading">
|
||||
<div class="flex items-center justify-center py-4">
|
||||
<n-spin size="medium" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<n-tree
|
||||
block-line
|
||||
cascade
|
||||
checkable
|
||||
:virtual-scroll="true"
|
||||
:pattern="pattern"
|
||||
:filter="filterTreeNode"
|
||||
:data="treeOption"
|
||||
:expandedKeys="expandedKeys"
|
||||
style="max-height: 650px; overflow: hidden"
|
||||
@update:selected-keys="selectedTree"
|
||||
@update:expanded-keys="onExpandedKeys"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi span="2">
|
||||
<n-card :segmented="{ content: true }" :bordered="false" size="small" class="proCard">
|
||||
<template #header>
|
||||
<n-space>
|
||||
<n-icon size="18">
|
||||
<FormOutlined />
|
||||
</n-icon>
|
||||
<span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<n-result
|
||||
v-show="formParams.id == 0"
|
||||
status="info"
|
||||
title="提示"
|
||||
description="从菜单列表中选择一项进行编辑"
|
||||
/>
|
||||
<EditForm
|
||||
v-if="formParams.id > 0"
|
||||
v-model:formParams="formParams"
|
||||
v-model:treeOption="treeOption"
|
||||
@reloadTable="loadTreeOption"
|
||||
/>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<AddModal ref="addModalRef" v-model:treeOption="treeOption" @reloadTable="loadTreeOption" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref, unref } from 'vue';
|
||||
import { AlignLeftOutlined, FormOutlined, PlusOutlined, SearchOutlined } from '@vicons/antd';
|
||||
import { getMenuList } from '@/api/system/menu';
|
||||
import { newState, State, loadOptions } from '@/views/permission/menu/model';
|
||||
import EditForm from '@/views/permission/menu/editForm.vue';
|
||||
import AddModal from '@/views/permission/menu/addModal.vue';
|
||||
|
||||
const addModalRef = ref();
|
||||
const loading = ref(false);
|
||||
const treeOption = ref([]);
|
||||
const pattern = ref('');
|
||||
const expandedKeys = ref([]);
|
||||
const formParams = ref<State>(newState(null));
|
||||
const treeItemTitle = computed(() => {
|
||||
if (formParams.value.id > 0) {
|
||||
return formParams.value.label + ' #' + formParams.value.id;
|
||||
}
|
||||
return '';
|
||||
});
|
||||
const isModal = defineModel<boolean>('isModal', { default: false });
|
||||
|
||||
function openCreateDrawer() {
|
||||
addModalRef.value.openModal(null);
|
||||
}
|
||||
|
||||
function openChildCreateDrawer() {
|
||||
const state = newState(null);
|
||||
state.pid = formParams.value.id;
|
||||
state.type = formParams.value.type;
|
||||
addModalRef.value.openModal(state);
|
||||
}
|
||||
|
||||
function selectedTree(keys: number[], option: any[]) {
|
||||
let item = null;
|
||||
if (keys.length) {
|
||||
item = option[0];
|
||||
}
|
||||
formParams.value = newState(item);
|
||||
}
|
||||
|
||||
function packHandle() {
|
||||
if (expandedKeys.value.length) {
|
||||
expandedKeys.value = [];
|
||||
} else {
|
||||
expandedKeys.value = unref(treeOption).map((item: any) => item.key as string) as [];
|
||||
}
|
||||
}
|
||||
|
||||
function onExpandedKeys(keys) {
|
||||
expandedKeys.value = keys;
|
||||
}
|
||||
|
||||
// 按名称和权限搜索
|
||||
function filterTreeNode(pattern: string, node: any) {
|
||||
if (!pattern) return true;
|
||||
const searchText = pattern.toLowerCase();
|
||||
|
||||
const label = (node.label || node.title || '').toLowerCase();
|
||||
if (label.includes(searchText)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const permissions = node.permissions || '';
|
||||
if (permissions) {
|
||||
const permissionsLower = permissions.toLowerCase();
|
||||
if (permissionsLower.includes(searchText)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 加载菜单选项树
|
||||
function loadTreeOption() {
|
||||
const needLoading = treeOption.value.length == 0;
|
||||
if (needLoading) {
|
||||
loading.value = true;
|
||||
}
|
||||
|
||||
getMenuList()
|
||||
.then((res) => {
|
||||
if (res.list && res.list.length > 0) {
|
||||
treeOption.value = res.list;
|
||||
} else {
|
||||
treeOption.value = [];
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (needLoading) {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTreeOption();
|
||||
loadOptions();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal
|
||||
title="菜单管理"
|
||||
v-model:show="showModal"
|
||||
:block-scroll="false"
|
||||
:mask-closable="false"
|
||||
:show-icon="false"
|
||||
:on-after-leave="handleCancel"
|
||||
preset="card"
|
||||
:style="{
|
||||
width: dialogWidth,
|
||||
}"
|
||||
>
|
||||
<Menu v-model:isModal="isModal" />
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import Menu from './menu.vue';
|
||||
import { adaModalWidth } from '@/utils/hotgo';
|
||||
|
||||
const emit = defineEmits(['reloadTable']);
|
||||
const showModal = ref(false);
|
||||
const isModal = ref(true);
|
||||
const dialogWidth = computed(() => {
|
||||
return adaModalWidth(1280);
|
||||
});
|
||||
|
||||
function openModal() {
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
emit('reloadTable');
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,102 @@
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { useDictStore } from '@/store/modules/dict';
|
||||
|
||||
const dict = useDictStore();
|
||||
|
||||
export interface State {
|
||||
id: number;
|
||||
pid?: number | null;
|
||||
title: string;
|
||||
name: string;
|
||||
path: string;
|
||||
label: string;
|
||||
icon: string;
|
||||
type: number;
|
||||
redirect: string;
|
||||
permissions: string;
|
||||
permissionName: string;
|
||||
component?: string | null;
|
||||
alwaysShow: number;
|
||||
activeMenu: string;
|
||||
isRoot: number;
|
||||
isFrame: number;
|
||||
frameSrc: string;
|
||||
keepAlive: number;
|
||||
hidden: number;
|
||||
affix: number;
|
||||
status: number;
|
||||
sort: number;
|
||||
disabled: boolean;
|
||||
children?: State[] | null;
|
||||
}
|
||||
|
||||
export const defaultState: State = {
|
||||
id: 0,
|
||||
pid: 0,
|
||||
title: '',
|
||||
name: '',
|
||||
path: '',
|
||||
label: '',
|
||||
icon: '',
|
||||
type: 1,
|
||||
redirect: '',
|
||||
permissions: '',
|
||||
permissionName: '',
|
||||
component: null,
|
||||
alwaysShow: 2,
|
||||
activeMenu: '',
|
||||
isRoot: 2,
|
||||
isFrame: 2,
|
||||
frameSrc: '',
|
||||
keepAlive: 2,
|
||||
hidden: 2,
|
||||
affix: 2,
|
||||
status: 1,
|
||||
sort: 10,
|
||||
disabled: false,
|
||||
children: null,
|
||||
};
|
||||
|
||||
export function newState(state: State | null): State {
|
||||
if (state !== null) {
|
||||
return defaultValueCheck(cloneDeep(state));
|
||||
}
|
||||
return defaultValueCheck(cloneDeep(defaultState));
|
||||
}
|
||||
|
||||
// 默认值校正，主要为了解决历史数据格式不规范问题
|
||||
export function defaultValueCheck(state: State): State {
|
||||
if (!state) {
|
||||
state = newState(null);
|
||||
}
|
||||
if (!state.pid || state.pid < 1) {
|
||||
state.pid = null;
|
||||
}
|
||||
if (state.alwaysShow != 1) {
|
||||
state.alwaysShow = 2;
|
||||
}
|
||||
if (state.isRoot != 1) {
|
||||
state.isRoot = 2;
|
||||
}
|
||||
if (state.isFrame != 1) {
|
||||
state.isFrame = 2;
|
||||
}
|
||||
if (state.keepAlive != 1) {
|
||||
state.keepAlive = 2;
|
||||
}
|
||||
if (state.hidden != 1) {
|
||||
state.hidden = 2;
|
||||
}
|
||||
if (state.affix != 1) {
|
||||
state.affix = 2;
|
||||
}
|
||||
if (state.status != 1) {
|
||||
state.status = 2;
|
||||
}
|
||||
return state;
|
||||
}
|
||||
|
||||
// 加载字典数据选项
|
||||
export function loadOptions() {
|
||||
dict.loadOptions(['sys_menu_types', 'sys_menu_component', 'sys_normal_disable', 'sys_switch']);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { h } from 'vue';
|
||||
import { NTag, NButton } from 'naive-ui';
|
||||
import { HelpCircleOutline } from '@vicons/ionicons5';
|
||||
import { renderTooltip, renderIcon } from '@/utils';
|
||||
export const columns = [
|
||||
// {
|
||||
// title: '角色ID',
|
||||
// key: 'id',
|
||||
// },
|
||||
{
|
||||
title(_column) {
|
||||
return renderTooltip(
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
strong: true,
|
||||
size: 'small',
|
||||
text: true,
|
||||
iconPlacement: 'right',
|
||||
},
|
||||
{ default: () => '角色', icon: renderIcon(HelpCircleOutline) }
|
||||
),
|
||||
'支持上下级角色，点击列表中左侧 > 按钮可展开下级角色列表'
|
||||
);
|
||||
},
|
||||
key: 'name',
|
||||
render(row) {
|
||||
return h(
|
||||
NTag,
|
||||
{
|
||||
type: 'info',
|
||||
},
|
||||
{
|
||||
default: () => row.name,
|
||||
}
|
||||
);
|
||||
},
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '角色编码',
|
||||
key: 'key',
|
||||
width: 150,
|
||||
},
|
||||
// {
|
||||
// title: '上级角色',
|
||||
// key: 'pid',
|
||||
// },
|
||||
// {
|
||||
// title: '默认角色',
|
||||
// key: 'isDefault',
|
||||
// render(row) {
|
||||
// return h(
|
||||
// NTag,
|
||||
// {
|
||||
// type: row.id == 1 ? 'success' : 'error',
|
||||
// },
|
||||
// {
|
||||
// default: () => (row.id == 1 ? '是' : '否'),
|
||||
// }
|
||||
// );
|
||||
// },
|
||||
// width: 80,
|
||||
// },
|
||||
// {
|
||||
// title: '排序',
|
||||
// key: 'sort',
|
||||
// width: 100,
|
||||
// },
|
||||
{
|
||||
title: '备注',
|
||||
key: 'remark',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 80,
|
||||
render(row) {
|
||||
return h(
|
||||
NTag,
|
||||
{
|
||||
style: {
|
||||
marginRight: '6px',
|
||||
},
|
||||
type: row.status == 1 ? 'info' : 'error',
|
||||
bordered: false,
|
||||
},
|
||||
{
|
||||
default: () => (row.status == 1 ? '正常' : '已禁用'),
|
||||
}
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createdAt',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:mask-closable="false"
|
||||
:show-icon="false"
|
||||
preset="dialog"
|
||||
transform-origin="center"
|
||||
:title="'修改 ' + formValue.name + ' 的数据权限'"
|
||||
>
|
||||
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||
<n-spin :show="loading" description="请稍候...">
|
||||
<n-form
|
||||
:model="formValue"
|
||||
ref="formRef"
|
||||
:label-placement="settingStore.isMobile ? 'top' : 'left'"
|
||||
:label-width="100"
|
||||
class="py-4"
|
||||
>
|
||||
<n-form-item label="数据范围" path="dataScope">
|
||||
<n-select v-model:value="formValue.dataScope" :options="dataScopeOption" />
|
||||
</n-form-item>
|
||||
<n-form-item label="自定义权限" path="customDept" v-if="formValue.dataScope === 4">
|
||||
<n-tree-select
|
||||
multiple
|
||||
key-field="id"
|
||||
label-field="name"
|
||||
:options="deptList"
|
||||
v-model:value="formValue.customDept"
|
||||
:default-expand-all="true"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-spin>
|
||||
</n-scrollbar>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="closeForm">取消</n-button>
|
||||
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { DataScopeEdit, DataScopeSelect } from '@/api/system/role';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { newState, State } from '@/views/permission/role/model';
|
||||
import { getDeptList } from '@/api/org/dept';
|
||||
|
||||
const emit = defineEmits(['reloadTable']);
|
||||
const message = useMessage();
|
||||
const settingStore = useProjectSettingStore();
|
||||
const loading = ref(false);
|
||||
const showModal = ref(false);
|
||||
const formValue = ref<State>(newState(null));
|
||||
const formRef = ref();
|
||||
const formBtnLoading = ref(false);
|
||||
const dataScopeOption = ref<any>([]);
|
||||
const deptList = ref<any>([]);
|
||||
|
||||
function confirmForm(e) {
|
||||
e.preventDefault();
|
||||
formBtnLoading.value = true;
|
||||
formRef.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
DataScopeEdit(formValue.value).then((_res) => {
|
||||
message.success('操作成功');
|
||||
setTimeout(() => {
|
||||
showModal.value = false;
|
||||
emit('reloadTable');
|
||||
});
|
||||
});
|
||||
} else {
|
||||
message.error('请填写完整信息');
|
||||
}
|
||||
formBtnLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
showModal.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function loadDataScopeSelect() {
|
||||
const res = await DataScopeSelect();
|
||||
if (res.list) {
|
||||
dataScopeOption.value = res.list;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDeptList() {
|
||||
const res = await getDeptList({});
|
||||
if (res.list) {
|
||||
deptList.value = res.list;
|
||||
}
|
||||
}
|
||||
|
||||
async function openModal(record: Recordable) {
|
||||
showModal.value = true;
|
||||
loading.value = true;
|
||||
formValue.value = newState(record);
|
||||
await loadDeptList();
|
||||
await loadDataScopeSelect();
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-drawer v-model:show="showModal" :width="dialogWidth" :show-icon="false" preset="dialog">
|
||||
<n-drawer-content closable :title="`分配 ${formValue.name} 的菜单权限`">
|
||||
<n-spin :show="loading" description="请稍候...">
|
||||
<div :style="{ maxHeight: '78vh', height: '78vh' }">
|
||||
<n-input v-model:value="pattern" placeholder="输入菜单名称或权限路径搜索" class="mb-2">
|
||||
<template #suffix>
|
||||
<n-icon size="18" class="cursor-pointer">
|
||||
<SearchOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-input>
|
||||
<n-tree
|
||||
block-line
|
||||
checkable
|
||||
check-on-click
|
||||
default-expand-all
|
||||
virtual-scroll
|
||||
:data="treeData"
|
||||
:pattern="pattern"
|
||||
:filter="filterTreeNode"
|
||||
:expandedKeys="expandedKeys"
|
||||
:checked-keys="checkedKeys"
|
||||
style="max-height: 950px; overflow: hidden"
|
||||
@update:checked-keys="checkedTree"
|
||||
@update:expanded-keys="onExpandedKeys"
|
||||
/>
|
||||
</div>
|
||||
</n-spin>
|
||||
<template #footer>
|
||||
<n-space v-if="showImportSelect">
|
||||
<n-input-group>
|
||||
<n-tree-select
|
||||
placeholder="请选择一个要导入的角色"
|
||||
:consistent-menu-width="false"
|
||||
clearable
|
||||
filterable
|
||||
default-expand-all
|
||||
:options="editRoleOption"
|
||||
key-field="id"
|
||||
label-field="name"
|
||||
:on-update:value="handleImportSelect"
|
||||
style="width: 300px"
|
||||
/>
|
||||
<div class="mr-2"></div>
|
||||
<n-button ghost @click="showImportSelect = false"> 取消 </n-button>
|
||||
</n-input-group>
|
||||
</n-space>
|
||||
|
||||
<n-space v-if="!showImportSelect">
|
||||
<n-button ghost @click="showImportSelect = true"> 导入权限 </n-button>
|
||||
<n-button type="info" ghost icon-placement="left" @click="packHandle">
|
||||
全部{{ expandedKeys.length ? '收起' : '展开' }}
|
||||
</n-button>
|
||||
<n-button type="info" ghost icon-placement="left" @click="checkedAllHandle">
|
||||
全部{{ checkedAll ? '取消' : '选择' }}
|
||||
</n-button>
|
||||
|
||||
<n-popconfirm @positive-click="confirmForm">
|
||||
<template #trigger>
|
||||
<n-button type="primary" :loading="formBtnLoading">提交</n-button>
|
||||
</template>
|
||||
你正在修改 {{ formValue.name }} 的菜单权限，确定要提交吗？
|
||||
</n-popconfirm>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-drawer-content>
|
||||
</n-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { GetPermissions, getRoleList, UpdatePermissions } from '@/api/system/role';
|
||||
import { NButton, useMessage } from 'naive-ui';
|
||||
import { adaModalWidth, getTreeKeys } from '@/utils/hotgo';
|
||||
import { findTreeNode, getAllExpandKeys } from '@/utils';
|
||||
import { getMenuList } from '@/api/system/menu';
|
||||
import { SearchOutlined } from '@vicons/antd';
|
||||
import { State, newState } from '@/views/permission/role/model';
|
||||
|
||||
const emit = defineEmits(['reloadTable']);
|
||||
const message = useMessage();
|
||||
const loading = ref(false);
|
||||
const showModal = ref(false);
|
||||
const formValue = ref<State>(newState(null));
|
||||
const formBtnLoading = ref(false);
|
||||
const rawRoleOption = ref<State[]>([]);
|
||||
const checkedAll = ref(false);
|
||||
const treeData = ref([]);
|
||||
const expandedKeys = ref<any[]>([]);
|
||||
const checkedKeys = ref<any[]>([]);
|
||||
const pattern = ref('');
|
||||
const showImportSelect = ref(false);
|
||||
|
||||
const editRoleOption = computed<State[]>(() => {
|
||||
if (!rawRoleOption.value) {
|
||||
return [];
|
||||
}
|
||||
const role = findTreeNode(rawRoleOption.value, formValue.value.id, 'id');
|
||||
if (role) {
|
||||
role.disabled = true;
|
||||
}
|
||||
return rawRoleOption.value;
|
||||
});
|
||||
|
||||
const dialogWidth = computed(() => {
|
||||
return adaModalWidth(630);
|
||||
});
|
||||
|
||||
function confirmForm(e) {
|
||||
e.preventDefault();
|
||||
formBtnLoading.value = true;
|
||||
const params = {
|
||||
id: formValue.value.id,
|
||||
menuIds: checkedKeys.value ?? [],
|
||||
};
|
||||
UpdatePermissions(params)
|
||||
.then((_res) => {
|
||||
message.success('操作成功');
|
||||
setTimeout(() => {
|
||||
showModal.value = false;
|
||||
emit('reloadTable');
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
formBtnLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function checkedTree(keys) {
|
||||
checkedKeys.value = keys;
|
||||
}
|
||||
|
||||
function onExpandedKeys(keys) {
|
||||
expandedKeys.value = keys;
|
||||
}
|
||||
|
||||
function packHandle() {
|
||||
if (expandedKeys.value.length) {
|
||||
expandedKeys.value = [];
|
||||
} else {
|
||||
expandedKeys.value = getAllExpandKeys(treeData) as [];
|
||||
}
|
||||
}
|
||||
|
||||
function checkedAllHandle() {
|
||||
if (!checkedAll.value) {
|
||||
checkedKeys.value = getTreeKeys(treeData.value);
|
||||
checkedAll.value = true;
|
||||
} else {
|
||||
checkedKeys.value = [];
|
||||
checkedAll.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 按名称和权限搜索
|
||||
function filterTreeNode(pattern: string, node: any) {
|
||||
if (!pattern) return true;
|
||||
const searchText = pattern.toLowerCase();
|
||||
|
||||
const label = (node.label || node.title || '').toLowerCase();
|
||||
if (label.includes(searchText)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const permissions = node.permissions || '';
|
||||
if (permissions) {
|
||||
const permissionsLower = permissions.toLowerCase();
|
||||
if (permissionsLower.includes(searchText)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function handleImportSelect(key: number) {
|
||||
showImportSelect.value = false;
|
||||
showModal.value = true;
|
||||
getPermissions(key);
|
||||
|
||||
// 默认全部展开
|
||||
expandedKeys.value = getAllExpandKeys(treeData);
|
||||
message.success('导入成功，提交后生效');
|
||||
}
|
||||
|
||||
async function loadMenuList() {
|
||||
const res = await getMenuList();
|
||||
expandedKeys.value = getAllExpandKeys(res.list) as [];
|
||||
treeData.value = res.list;
|
||||
}
|
||||
|
||||
async function getPermissions(id: number) {
|
||||
checkedKeys.value = [];
|
||||
checkedAll.value = false;
|
||||
const res = await GetPermissions({ id: id });
|
||||
checkedKeys.value = res.menuIds;
|
||||
}
|
||||
|
||||
async function loadDataList() {
|
||||
const res = await getRoleList({ pageSize: 100, page: 1 });
|
||||
rawRoleOption.value = res.list;
|
||||
}
|
||||
|
||||
async function openModal(record: Recordable) {
|
||||
loading.value = true;
|
||||
formValue.value = newState(record);
|
||||
showModal.value = true;
|
||||
await loadMenuList();
|
||||
await getPermissions(record.id);
|
||||
await loadDataList();
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:mask-closable="false"
|
||||
:show-icon="false"
|
||||
preset="dialog"
|
||||
transform-origin="center"
|
||||
:title="formValue.id > 0 ? '编辑角色 #' + formValue.id : '添加角色'"
|
||||
>
|
||||
<n-scrollbar style="max-height: 87vh" class="pr-5">
|
||||
<n-spin :show="loading" description="请稍候...">
|
||||
<n-form
|
||||
:model="formValue"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
:label-placement="settingStore.isMobile ? 'top' : 'left'"
|
||||
:label-width="100"
|
||||
class="py-4"
|
||||
>
|
||||
<n-form-item label="上级角色" path="pid">
|
||||
<n-tree-select
|
||||
:options="editRoleOption"
|
||||
v-model:value="formValue.pid"
|
||||
key-field="id"
|
||||
label-field="name"
|
||||
clearable
|
||||
filterable
|
||||
default-expand-all
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="角色名称" path="name">
|
||||
<n-input placeholder="请输入名称" v-model:value="formValue.name" />
|
||||
</n-form-item>
|
||||
<n-form-item label="角色编码" path="key">
|
||||
<n-input placeholder="请输入" v-model:value="formValue.key" />
|
||||
</n-form-item>
|
||||
<n-form-item label="排序" path="sort">
|
||||
<n-input-number v-model:value="formValue.sort" clearable style="width: 100%" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="状态" path="status">
|
||||
<n-radio-group v-model:value="formValue.status" name="status">
|
||||
<n-radio-button
|
||||
v-for="status in statusOptions"
|
||||
:key="status.value"
|
||||
:value="status.value"
|
||||
:label="status.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
<n-form-item label="备注" path="remark">
|
||||
<n-input type="textarea" placeholder="请输入" v-model:value="formValue.remark" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-spin>
|
||||
</n-scrollbar>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="closeForm">取消</n-button>
|
||||
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { Edit, getRoleList } from '@/api/system/role';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { statusOptions } from '@/enums/optionsiEnum';
|
||||
import { newState, State } from '@/views/permission/role/model';
|
||||
|
||||
const emit = defineEmits(['reloadTable']);
|
||||
const message = useMessage();
|
||||
const settingStore = useProjectSettingStore();
|
||||
const loading = ref(false);
|
||||
const showModal = ref(false);
|
||||
const formValue = ref<State>(newState(null));
|
||||
const formRef = ref();
|
||||
const formBtnLoading = ref(false);
|
||||
const rawRoleOption = ref([]);
|
||||
|
||||
const editRoleOption = computed(() => {
|
||||
return rawRoleOption.value;
|
||||
});
|
||||
|
||||
const rules = {
|
||||
name: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
message: '请输入名称',
|
||||
},
|
||||
key: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
message: '请输入角色编码',
|
||||
},
|
||||
};
|
||||
|
||||
function confirmForm(e) {
|
||||
e.preventDefault();
|
||||
formBtnLoading.value = true;
|
||||
formRef.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
Edit(formValue.value).then((_res) => {
|
||||
message.success('操作成功');
|
||||
setTimeout(() => {
|
||||
showModal.value = false;
|
||||
emit('reloadTable');
|
||||
});
|
||||
});
|
||||
} else {
|
||||
message.error('请填写完整信息');
|
||||
}
|
||||
formBtnLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
showModal.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
function loadDataList() {
|
||||
loading.value = true;
|
||||
getRoleList({ pageSize: 100, page: 1 }).then((res) => {
|
||||
rawRoleOption.value = res.list;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function openModal(record: Recordable) {
|
||||
loadDataList();
|
||||
showModal.value = true;
|
||||
formValue.value = newState(record);
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less"></style>
|
||||
@@ -0,0 +1,40 @@
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
export class State {
|
||||
id = 0;
|
||||
name = '';
|
||||
key = '';
|
||||
dataScope = 1;
|
||||
customDept: any[] = [];
|
||||
pid = 0;
|
||||
level = 1;
|
||||
tree = '';
|
||||
remark = '';
|
||||
sort = 0;
|
||||
status = 1;
|
||||
createdAt = '';
|
||||
updatedAt = '';
|
||||
label = '';
|
||||
value = 0;
|
||||
children: State[] | null = null;
|
||||
|
||||
constructor(state?: Partial<State>) {
|
||||
if (state) {
|
||||
Object.keys(this).forEach((key) => {
|
||||
if (state[key] !== undefined) {
|
||||
this[key] = state[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function newState(state: State | Record<string, any> | null): State {
|
||||
if (state !== null) {
|
||||
if (state instanceof State) {
|
||||
return cloneDeep(state);
|
||||
}
|
||||
return new State(state);
|
||||
}
|
||||
return new State();
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card :bordered="false" class="proCard" title="角色管理">
|
||||
<n-space vertical :size="12">
|
||||
<n-space>
|
||||
<n-button type="primary" @click="addTable">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<PlusOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
添加角色
|
||||
</n-button>
|
||||
</n-space>
|
||||
|
||||
<n-data-table
|
||||
v-if="dataSource.length > 0 || !loading"
|
||||
:columns="columns.concat(actionColumn)"
|
||||
:data="dataSource"
|
||||
:row-key="(row) => row.id"
|
||||
:loading="loading"
|
||||
:resizeHeightOffset="-20000"
|
||||
default-expand-all
|
||||
/>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<EditRole ref="editRoleRef" @reloadTable="reloadTable" />
|
||||
<EditMenuAuth ref="editMenuAuthRef" @reloadTable="reloadTable" />
|
||||
<EditDataAuth ref="editDataAuthRef" @reloadTable="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, onMounted, reactive, ref } from 'vue';
|
||||
import { NButton, useDialog, useMessage } from 'naive-ui';
|
||||
import { BasicColumn, TableAction } from '@/components/Table';
|
||||
import { Delete, getRoleList } from '@/api/system/role';
|
||||
import { columns } from './columns';
|
||||
import { PlusOutlined } from '@vicons/antd';
|
||||
import EditRole from './editRole.vue';
|
||||
import EditMenuAuth from './editMenuAuth.vue';
|
||||
import EditDataAuth from './editDataAuth.vue';
|
||||
import { newState } from '@/views/permission/role/model';
|
||||
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const loading = ref(false);
|
||||
const dataSource = ref<any>([]);
|
||||
const editRoleRef = ref();
|
||||
const editMenuAuthRef = ref();
|
||||
const editDataAuthRef = ref();
|
||||
|
||||
const actionColumn = reactive<BasicColumn>({
|
||||
width: 200,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction, {
|
||||
style: 'primary',
|
||||
actions: [
|
||||
{
|
||||
label: '菜单权限',
|
||||
onClick: handleMenuAuth.bind(null, record),
|
||||
ifShow: () => {
|
||||
return record.id !== 1;
|
||||
},
|
||||
type: 'default',
|
||||
},
|
||||
{
|
||||
label: '数据权限',
|
||||
onClick: handleDataAuth.bind(null, record),
|
||||
ifShow: () => {
|
||||
return record.id !== 1;
|
||||
},
|
||||
type: 'default',
|
||||
},
|
||||
{
|
||||
label: '添加子角色',
|
||||
onClick: handleAddSub.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
ifShow: () => {
|
||||
return record.id !== 1;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function loadDataTable() {
|
||||
loading.value = true;
|
||||
getRoleList({ pageSize: 100, page: 1 }).then((res) => {
|
||||
dataSource.value = res.list ?? [];
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
loadDataTable();
|
||||
}
|
||||
|
||||
function addTable() {
|
||||
editRoleRef.value.openModal(null);
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable) {
|
||||
editRoleRef.value.openModal(record);
|
||||
}
|
||||
|
||||
function handleAddSub(record: Recordable) {
|
||||
let state = newState(null);
|
||||
state.pid = record.id;
|
||||
editRoleRef.value.openModal(state);
|
||||
}
|
||||
|
||||
function handleDelete(record: Recordable) {
|
||||
dialog.warning({
|
||||
title: '警告',
|
||||
content: '你确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
Delete(record).then((_res) => {
|
||||
message.success('操作成功');
|
||||
reloadTable();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function handleMenuAuth(record: Recordable) {
|
||||
editMenuAuthRef.value.openModal(record);
|
||||
}
|
||||
|
||||
function handleDataAuth(record: Recordable) {
|
||||
editDataAuthRef.value.openModal(record);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadDataTable();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Reference in New Issue
Block a user