mirror of
https://github.com/bufanyun/hotgo.git
synced 2026-05-01 07:24:32 +08:00
发布v2.15.1版本，更新内容请查看：https://github.com/bufanyun/hotgo/blob/v2.0/docs/guide-zh-CN/start-update-log.md
This commit is contained in:
孟帅
@@ -1,400 +0,0 @@
|
||||
<template>
|
||||
<n-drawer v-model:show="isDrawer" :width="width" :placement="placement" :mask-closable="false">
|
||||
<n-drawer-content :title="title" closable>
|
||||
<n-form
|
||||
:model="formParams"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
:label-width="100"
|
||||
>
|
||||
<n-divider title-placement="left">基本设置</n-divider>
|
||||
<n-form-item label="类型" path="type">
|
||||
<n-radio-group v-model:value="formParams.type" name="type">
|
||||
<n-radio-button
|
||||
v-for="menuType in menuTypes"
|
||||
:key="menuType.value"
|
||||
:value="menuType.value"
|
||||
:label="menuType.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
<n-form-item label="上级目录" path="pid">
|
||||
<n-tree-select
|
||||
filterable
|
||||
:options="optionTreeData"
|
||||
:default-value="formParams.pid"
|
||||
@update:value="handleUpdateValue"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item
|
||||
:label="
|
||||
formParams.type === 1 ? '目录名称' : formParams.type === 2 ? '菜单名称' : '按钮名称'
|
||||
"
|
||||
path="title"
|
||||
>
|
||||
<n-input placeholder="请输入" v-model:value="formParams.title" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item path="icon" v-if="formParams.type !== 3">
|
||||
<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-form-item path="path" v-if="formParams.type !== 3">
|
||||
<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-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-form-item label="组件路径" path="component" v-if="formParams.type !== 3">
|
||||
<n-input placeholder="组件路径" v-model:value="formParams.component" />
|
||||
<template #feedback>
|
||||
主目录填 `LAYOUT`;多级父目录填
|
||||
`ParentLayout`;页面填具体的组件路径，如：`/system/menu/menu`</template
|
||||
>
|
||||
</n-form-item>
|
||||
<n-form-item label="默认跳转" path="redirect" v-if="formParams.type === 1">
|
||||
<n-input placeholder="默认路由跳转地址" v-model:value="formParams.redirect" />
|
||||
<template #feedback
|
||||
>默认跳转路由地址，如：`/system/menu/menu` 多级路由情况下适用</template
|
||||
>
|
||||
</n-form-item>
|
||||
<n-divider title-placement="left">功能设置</n-divider>
|
||||
<n-form-item label="分配权限" path="permissions">
|
||||
<n-input
|
||||
placeholder="请输入分配权限，多个权限用,分割"
|
||||
v-model:value="formParams.permissions"
|
||||
/>
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请填写API路由地址，可同时作用于服务端和web端。多个权限用,分割
|
||||
</n-tooltip>
|
||||
分配权限</template
|
||||
>
|
||||
</n-form-item>
|
||||
<!-- <n-form-item label="权限名称" path="permissionName">-->
|
||||
<!-- <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
|
||||
<!-- </n-form-item>-->
|
||||
<n-form-item label="高亮路由" path="activeMenu" v-if="formParams.type !== 3">
|
||||
<n-input placeholder="高亮路由" v-model:value="formParams.activeMenu" />
|
||||
</n-form-item>
|
||||
<n-form-item label="菜单排序" path="sort">
|
||||
<n-input-number style="width: 100%" v-model:value="formParams.sort" clearable />
|
||||
</n-form-item>
|
||||
|
||||
<n-grid x-gap="24" :cols="2" v-if="formParams.type !== 3">
|
||||
<n-gi>
|
||||
<n-form-item label="根路由" path="isRoot">
|
||||
<n-radio-group v-model:value="formParams.isRoot" name="isRoot">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="页签固定" path="affix">
|
||||
<n-radio-group v-model:value="formParams.affix" name="affix">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="简化路由" path="alwaysShow">
|
||||
<n-radio-group v-model:value="formParams.alwaysShow" name="alwaysShow">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid x-gap="24" :cols="2" v-if="formParams.type !== 3">
|
||||
<n-gi>
|
||||
<n-form-item label="缓存路由" path="keepAlive">
|
||||
<n-radio-group v-model:value="formParams.keepAlive" name="keepAlive">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="是否隐藏" path="hidden">
|
||||
<n-radio-group v-model:value="formParams.hidden" name="hidden">
|
||||
<n-radio-button
|
||||
v-for="hidden in hiddenMap"
|
||||
:key="hidden.value"
|
||||
:value="hidden.value"
|
||||
:label="hidden.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid x-gap="24" :cols="2" v-if="formParams.type !== 3">
|
||||
<n-gi>
|
||||
<n-form-item label="是否外链" path="isFrame">
|
||||
<n-radio-group v-model:value="formParams.isFrame" name="isFrame">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === 1">
|
||||
<n-input placeholder="内联外部地址" v-model:value="formParams.frameSrc" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-form-item label="状态" path="status">
|
||||
<n-radio-group v-model:value="formParams.status" name="status">
|
||||
<n-radio-button
|
||||
v-for="status in statusMap"
|
||||
:key="status.value"
|
||||
:value="status.value"
|
||||
:label="status.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<template #footer>
|
||||
<n-space>
|
||||
<n-button type="primary" :loading="subLoading" @click="formSubmit">确认添加</n-button>
|
||||
<n-button @click="handleReset">重置</n-button>
|
||||
<n-button @click="closeDrawer">取消</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-drawer-content>
|
||||
</n-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRefs } from 'vue';
|
||||
import { FormItemRule, TreeSelectOption, useMessage } from 'naive-ui';
|
||||
import { QuestionCircleOutlined } from '@vicons/antd';
|
||||
import { EditMenu } from '@/api/system/menu';
|
||||
import { newState } from '@/views/permission/menu/model';
|
||||
|
||||
const menuTypes = [
|
||||
{
|
||||
value: 1,
|
||||
label: '目录',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '菜单',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '按钮',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const switchStatusMap = [
|
||||
{
|
||||
value: 0,
|
||||
label: '关闭',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '开启',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const statusMap = [
|
||||
{
|
||||
value: 0,
|
||||
label: '禁用',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '启用',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const hiddenMap = [
|
||||
{
|
||||
value: 0,
|
||||
label: '否',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '是',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CreateDrawer',
|
||||
components: {},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '添加顶级菜单',
|
||||
},
|
||||
optionTreeData: {
|
||||
type: Object || Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
emits: ['loadData'],
|
||||
setup(_props, context) {
|
||||
const message = useMessage();
|
||||
const formRef: any = ref(null);
|
||||
const state = reactive<any>({
|
||||
width: 700,
|
||||
isDrawer: false,
|
||||
subLoading: false,
|
||||
formParams: newState(null),
|
||||
placement: 'right',
|
||||
});
|
||||
const rules = {
|
||||
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) {
|
||||
if (state.formParams.type != 3 && !value) {
|
||||
callback(new Error('请输入路由地址'));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function openDrawer(pid: number) {
|
||||
if (document.body.clientWidth < 700) {
|
||||
state.width = document.body.clientWidth;
|
||||
}
|
||||
state.isDrawer = true;
|
||||
state.formParams = newState(null);
|
||||
state.formParams.pid = pid;
|
||||
if (pid > 0) {
|
||||
state.formParams.type = 2;
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
state.isDrawer = false;
|
||||
}
|
||||
|
||||
function formSubmit() {
|
||||
formRef.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
state.subLoading = true;
|
||||
EditMenu({ ...state.formParams })
|
||||
.then(async (_res) => {
|
||||
state.subLoading = false;
|
||||
message.success('操作成功');
|
||||
handleReset();
|
||||
await context.emit('loadData');
|
||||
closeDrawer();
|
||||
})
|
||||
.catch((_e: Error) => {
|
||||
state.subLoading = false;
|
||||
});
|
||||
} else {
|
||||
message.error('请填写完整信息');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
formRef.value.restoreValidation();
|
||||
state.formParams = newState(null);
|
||||
}
|
||||
|
||||
// 处理选项更新
|
||||
function handleUpdateValue(
|
||||
value: string | number | Array<string | number> | null,
|
||||
_option: TreeSelectOption | null | Array<TreeSelectOption | null>
|
||||
) {
|
||||
state.formParams.pid = value;
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
formRef,
|
||||
rules,
|
||||
formSubmit,
|
||||
handleReset,
|
||||
openDrawer,
|
||||
closeDrawer,
|
||||
menuTypes,
|
||||
switchStatusMap,
|
||||
statusMap,
|
||||
hiddenMap,
|
||||
handleUpdateValue,
|
||||
QuestionCircleOutlined,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
84
web/src/views/permission/menu/addModal.vue
Normal file
84
web/src/views/permission/menu/addModal.vue
Normal file
@@ -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>
|
||||
417
web/src/views/permission/menu/editForm.vue
Normal file
417
web/src/views/permission/menu/editForm.vue
Normal file
@@ -0,0 +1,417 @@
|
||||
<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 options.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="options.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-gi>-->
|
||||
<!-- <n-form-item label="权限名称" path="permissionName">-->
|
||||
<!-- <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
|
||||
<!-- <template #feedback>分配权限存在多个时，权限名称只绑定到第一个权限</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="options.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 options.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, options } 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';
|
||||
|
||||
const rules = {
|
||||
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) {
|
||||
if (formParams.value.type != 3 && !value) {
|
||||
callback(new Error('请输入路由地址'));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const emit = defineEmits(['reloadTable', 'closeForm']);
|
||||
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>
|
||||
@@ -1,11 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="n-layout-page-header">
|
||||
<div class="n-layout-page-header" v-if="!isModal">
|
||||
<n-card :bordered="false" title="菜单管理">
|
||||
在这里可以管理编辑系统下的所有菜单导航和分配相应的菜单权限
|
||||
</n-card>
|
||||
</div>
|
||||
<n-grid class="mt-4" cols="1 s:1 m:1 l:3 xl:3 2xl:3" responsive="screen" :x-gap="12">
|
||||
<n-grid
|
||||
:class="isModal ? '' : 'mt-4'"
|
||||
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">
|
||||
<template #header>
|
||||
@@ -24,7 +29,7 @@
|
||||
type="info"
|
||||
icon-placement="left"
|
||||
@click="openChildCreateDrawer"
|
||||
:disabled="!isEditMenu"
|
||||
:disabled="formParams.id == 0"
|
||||
>
|
||||
<template #icon>
|
||||
<div class="flex items-center">
|
||||
@@ -48,7 +53,7 @@
|
||||
</n-space>
|
||||
</template>
|
||||
<div class="w-full menu">
|
||||
<n-input type="input" v-model:value="pattern" placeholder="输入菜单名称搜索">
|
||||
<n-input type="text" v-model:value="pattern" placeholder="输入菜单名称搜索">
|
||||
<template #suffix>
|
||||
<n-icon size="18" class="cursor-pointer">
|
||||
<SearchOutlined />
|
||||
@@ -68,7 +73,7 @@
|
||||
checkable
|
||||
:virtual-scroll="true"
|
||||
:pattern="pattern"
|
||||
:data="treeData"
|
||||
:data="treeOption"
|
||||
:expandedKeys="expandedKeys"
|
||||
style="max-height: 650px; overflow: hidden"
|
||||
@update:selected-keys="selectedTree"
|
||||
@@ -87,540 +92,104 @@
|
||||
<FormOutlined />
|
||||
</n-icon>
|
||||
<span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}` : '' }}</span>
|
||||
<!-- <span style="font-size: 14px">{{ treeItemTitle }}</span>-->
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<n-result
|
||||
v-show="!isEditMenu"
|
||||
v-show="formParams.id == 0"
|
||||
status="info"
|
||||
title="提示"
|
||||
description="从菜单列表中选择一项进行编辑"
|
||||
/>
|
||||
<n-form
|
||||
:model="formParams"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
:label-width="100"
|
||||
v-if="isEditMenu"
|
||||
class="py-4"
|
||||
>
|
||||
<n-divider title-placement="left">基本设置</n-divider>
|
||||
|
||||
<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">
|
||||
<n-radio-button
|
||||
v-for="menuType in menuTypes"
|
||||
: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-tree-select
|
||||
filterable
|
||||
:options="optionTreeDataEdit"
|
||||
:value="formParams.pid"
|
||||
@update:value="handleUpdateValue"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="2 300:1 600:2">
|
||||
<n-gi>
|
||||
<n-form-item
|
||||
:label="
|
||||
formParams.type === 1
|
||||
? '目录名称'
|
||||
: formParams.type === 2
|
||||
? '菜单名称'
|
||||
: '按钮名称'
|
||||
"
|
||||
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-grid>
|
||||
|
||||
<n-grid cols="2 300:1 600:2">
|
||||
<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>
|
||||
<n-form-item label="组件路径" path="component">
|
||||
<n-input placeholder="组件路径" v-model:value="formParams.component" />
|
||||
<template #feedback>
|
||||
主目录填 `LAYOUT`;多级父目录填
|
||||
`ParentLayout`;页面填具体的组件路径，如：`/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-input
|
||||
:type="formParams.permissions.length > 30 ? 'textarea' : ''"
|
||||
placeholder="请输入分配权限，多个权限用,分割"
|
||||
v-model:value="formParams.permissions"
|
||||
/>
|
||||
<template #label>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-icon :component="QuestionCircleOutlined" :size="18" :depth="3" />
|
||||
</template>
|
||||
请填写API路由地址，可同时作用于服务端和web端。多个权限用,分割
|
||||
</n-tooltip>
|
||||
分配权限
|
||||
</template>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<!-- <n-gi>-->
|
||||
<!-- <n-form-item label="权限名称" path="permissionName">-->
|
||||
<!-- <n-input placeholder="权限名称" v-model:value="formParams.permissionName" />-->
|
||||
<!-- <template #feedback>分配权限存在多个时，权限名称只绑定到第一个权限</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-grid>
|
||||
|
||||
<n-grid cols="4 300:1 400:2 600:3 800:4" v-if="formParams.type !== 3">
|
||||
<n-gi>
|
||||
<n-form-item label="根路由" path="isRoot">
|
||||
<n-radio-group v-model:value="formParams.isRoot" name="isRoot">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="页签固定" path="affix">
|
||||
<n-radio-group v-model:value="formParams.affix" name="affix">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="简化路由" path="alwaysShow">
|
||||
<n-radio-group v-model:value="formParams.alwaysShow" name="alwaysShow">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="缓存路由" path="keepAlive">
|
||||
<n-radio-group v-model:value="formParams.keepAlive" name="keepAlive">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-form-item label="是否隐藏" path="hidden">
|
||||
<n-radio-group v-model:value="formParams.hidden" name="hidden">
|
||||
<n-radio-button
|
||||
v-for="hidden in hiddenMap"
|
||||
:key="hidden.value"
|
||||
:value="hidden.value"
|
||||
:label="hidden.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-grid cols="4 300:1 400:2 600:3 800:4">
|
||||
<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 statusMap"
|
||||
:key="status.value"
|
||||
:value="status.value"
|
||||
:label="status.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item label="是否外链" path="isFrame">
|
||||
<n-radio-group v-model:value="formParams.isFrame" name="isFrame">
|
||||
<n-radio-button
|
||||
v-for="switchStatus in statusMap"
|
||||
:key="switchStatus.value"
|
||||
:value="switchStatus.value"
|
||||
:label="switchStatus.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
<n-gi v-if="formParams.type !== 3">
|
||||
<n-form-item label="外部地址" path="frameSrc" v-show="formParams.isFrame === 1">
|
||||
<n-input placeholder="内联外部地址" v-model:value="formParams.frameSrc" />
|
||||
</n-form-item>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-form-item path="auth" style="margin-left: 100px">
|
||||
<n-space>
|
||||
<n-button type="primary" :loading="subLoading" @click="formSubmit"
|
||||
>保存修改
|
||||
</n-button>
|
||||
<n-button @click="handleReset">重置</n-button>
|
||||
<n-button @click="handleDel">删除</n-button>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
<EditForm
|
||||
v-if="formParams.id > 0"
|
||||
v-model:formParams="formParams"
|
||||
v-model:treeOption="treeOption"
|
||||
@reloadTable="loadTreeOption"
|
||||
/>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<CreateDrawer
|
||||
ref="createDrawerRef"
|
||||
:title="drawerTitle"
|
||||
:optionTreeData="optionTreeData"
|
||||
@loadData="loadData"
|
||||
/>
|
||||
<AddModal ref="addModalRef" v-model:treeOption="treeOption" @reloadTable="loadTreeOption" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, unref, computed } from 'vue';
|
||||
import { FormItemRule, useDialog, useMessage } from 'naive-ui';
|
||||
import {
|
||||
AlignLeftOutlined,
|
||||
FormOutlined,
|
||||
PlusOutlined,
|
||||
QuestionCircleOutlined,
|
||||
SearchOutlined,
|
||||
} from '@vicons/antd';
|
||||
import { DeleteMenu, EditMenu, getMenuList } from '@/api/system/menu';
|
||||
import { getTreeItem } from '@/utils';
|
||||
import CreateDrawer from './CreateDrawer.vue';
|
||||
import IconSelector from '@/components/IconSelector/index.vue';
|
||||
import { newState, State } from '@/views/permission/menu/model';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
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 menuTypes = [
|
||||
{
|
||||
value: 1,
|
||||
label: '目录',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '菜单',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '按钮',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const statusMap = [
|
||||
{
|
||||
value: 0,
|
||||
label: '禁用',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '启用',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const hiddenMap = [
|
||||
{
|
||||
value: 0,
|
||||
label: '否',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '是',
|
||||
},
|
||||
].map((s) => {
|
||||
return s;
|
||||
});
|
||||
|
||||
const rules = {
|
||||
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) {
|
||||
if (formParams.type != 3 && !value) {
|
||||
callback(new Error('请输入路由地址'));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const formRef: any = ref(null);
|
||||
const createDrawerRef = ref();
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const treeData = ref([]);
|
||||
const loading = ref(true);
|
||||
const subLoading = ref(false);
|
||||
const isEditMenu = ref(false);
|
||||
const treeItemTitle = ref('');
|
||||
const addModalRef = ref();
|
||||
const loading = ref(false);
|
||||
const treeOption = ref([]);
|
||||
const pattern = ref('');
|
||||
const drawerTitle = ref('');
|
||||
const treeItemKey = ref([]);
|
||||
const expandedKeys = ref([]);
|
||||
const optionTreeData = ref<any>([]);
|
||||
const formParams = reactive<State>(newState(null));
|
||||
const optionTreeDataEdit = computed(() => {
|
||||
let list = cloneDeep(optionTreeData.value);
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const item = list[i];
|
||||
if (item.id === formParams.id) {
|
||||
item.disabled = true;
|
||||
setChildrenDisabled(item.children);
|
||||
} else {
|
||||
const foundChild = findItemById(item.children, formParams.id);
|
||||
if (foundChild) {
|
||||
foundChild.disabled = true;
|
||||
setChildrenDisabled(foundChild.children);
|
||||
}
|
||||
}
|
||||
const formParams = ref<State>(newState(null));
|
||||
const treeItemTitle = computed(() => {
|
||||
if (formParams.value.id > 0) {
|
||||
return formParams.value.label + ' #' + formParams.value.id;
|
||||
}
|
||||
return list;
|
||||
return '';
|
||||
});
|
||||
|
||||
function setChildrenDisabled(children) {
|
||||
if (!children) return;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const child = children[i];
|
||||
child.disabled = true;
|
||||
setChildrenDisabled(child.children);
|
||||
}
|
||||
}
|
||||
|
||||
function findItemById(children, id) {
|
||||
if (!children) return null;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const item = children[i];
|
||||
if (item.id === id) {
|
||||
return item;
|
||||
}
|
||||
const foundChild = findItemById(item.children, id);
|
||||
if (foundChild) {
|
||||
return foundChild;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const isModal = defineModel<boolean>('isModal', { default: false });
|
||||
|
||||
function openCreateDrawer() {
|
||||
drawerTitle.value = '添加菜单';
|
||||
const { openDrawer } = createDrawerRef.value;
|
||||
openDrawer(0);
|
||||
addModalRef.value.openModal(null);
|
||||
}
|
||||
|
||||
function openChildCreateDrawer() {
|
||||
drawerTitle.value = '添加菜单';
|
||||
const { openDrawer } = createDrawerRef.value;
|
||||
openDrawer(formParams.id);
|
||||
const state = newState(null);
|
||||
state.pid = formParams.value.id;
|
||||
state.type = formParams.value.type;
|
||||
addModalRef.value.openModal(state);
|
||||
}
|
||||
|
||||
function selectedTree(keys) {
|
||||
function selectedTree(keys: number[], option: any[]) {
|
||||
let item = null;
|
||||
if (keys.length) {
|
||||
const treeItem = getTreeItem(unref(treeData), keys[0]);
|
||||
treeItemKey.value = keys;
|
||||
treeItemTitle.value = treeItem.label + ' #' + treeItem.id;
|
||||
Object.assign(formParams, treeItem);
|
||||
isEditMenu.value = true;
|
||||
} else {
|
||||
isEditMenu.value = false;
|
||||
treeItemKey.value = [];
|
||||
treeItemTitle.value = '';
|
||||
item = option[0];
|
||||
}
|
||||
}
|
||||
|
||||
function handleDel() {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: `您确定要删除此菜单吗?`,
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: () => {
|
||||
DeleteMenu({ ...formParams }).then(async (_res) => {
|
||||
message.success('操作成功');
|
||||
await loadData();
|
||||
});
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
message.error('已取消');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
const treeItem = getTreeItem(unref(treeData), treeItemKey.value[0]);
|
||||
Object.assign(formParams, treeItem);
|
||||
}
|
||||
|
||||
function formSubmit() {
|
||||
formRef.value.validate((errors: boolean) => {
|
||||
if (!errors) {
|
||||
subLoading.value = true;
|
||||
EditMenu({ ...formParams })
|
||||
.then(async (_res) => {
|
||||
subLoading.value = false;
|
||||
message.success('操作成功');
|
||||
await loadData();
|
||||
})
|
||||
.catch((_e: Error) => {
|
||||
subLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
message.error('请填写完整信息');
|
||||
}
|
||||
});
|
||||
formParams.value = newState(item);
|
||||
}
|
||||
|
||||
function packHandle() {
|
||||
if (expandedKeys.value.length) {
|
||||
expandedKeys.value = [];
|
||||
} else {
|
||||
expandedKeys.value = unref(treeData).map((item: any) => item.key as string) as [];
|
||||
expandedKeys.value = unref(treeOption).map((item: any) => item.key as string) as [];
|
||||
}
|
||||
}
|
||||
|
||||
// 处理选项更新
|
||||
function handleUpdateValue(value) {
|
||||
formParams.pid = value as number;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadData();
|
||||
});
|
||||
|
||||
async function loadData() {
|
||||
const treeMenuList = await getMenuList();
|
||||
const keys = treeMenuList.list.map((item) => item.key);
|
||||
Object.assign(formParams, keys);
|
||||
treeData.value = [];
|
||||
treeData.value = treeMenuList.list;
|
||||
optionTreeData.value = [
|
||||
{
|
||||
id: 0,
|
||||
key: 0,
|
||||
label: '根目录',
|
||||
pid: 0,
|
||||
title: '根目录',
|
||||
type: 1,
|
||||
},
|
||||
];
|
||||
optionTreeData.value = optionTreeData.value.concat(treeMenuList.list);
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
function onExpandedKeys(keys) {
|
||||
expandedKeys.value = keys;
|
||||
}
|
||||
|
||||
// 加载菜单选项树
|
||||
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>
|
||||
|
||||
43
web/src/views/permission/menu/menuModal.vue
Normal file
43
web/src/views/permission/menu/menuModal.vue
Normal file
@@ -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 showModal = ref(false);
|
||||
const isModal = ref(true);
|
||||
const dialogWidth = computed(() => {
|
||||
return adaModalWidth(1280);
|
||||
});
|
||||
|
||||
const emit = defineEmits(['reloadTable']);
|
||||
|
||||
function openModal() {
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
emit('reloadTable');
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
@@ -1,8 +1,11 @@
|
||||
import { ref } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { Option } from '@/utils/hotgo';
|
||||
import { Dicts } from '@/api/dict/dict';
|
||||
|
||||
export interface State {
|
||||
id: number;
|
||||
pid: number;
|
||||
pid?: number;
|
||||
title: string;
|
||||
name: string;
|
||||
path: string;
|
||||
@@ -12,7 +15,7 @@ export interface State {
|
||||
redirect: string;
|
||||
permissions: string;
|
||||
permissionName: string;
|
||||
component: string;
|
||||
component?: string;
|
||||
alwaysShow: number;
|
||||
activeMenu: string;
|
||||
isRoot: number;
|
||||
@@ -23,9 +26,11 @@ export interface State {
|
||||
affix: number;
|
||||
status: number;
|
||||
sort: number;
|
||||
disabled: boolean;
|
||||
children?: State[];
|
||||
}
|
||||
|
||||
export const defaultState = {
|
||||
export const defaultState: State = {
|
||||
id: 0,
|
||||
pid: 0,
|
||||
title: '',
|
||||
@@ -37,22 +42,70 @@ export const defaultState = {
|
||||
redirect: '',
|
||||
permissions: '',
|
||||
permissionName: '',
|
||||
component: '',
|
||||
alwaysShow: 1,
|
||||
component: null,
|
||||
alwaysShow: 2,
|
||||
activeMenu: '',
|
||||
isRoot: 0,
|
||||
isRoot: 2,
|
||||
isFrame: 2,
|
||||
frameSrc: '',
|
||||
keepAlive: 0,
|
||||
hidden: 0,
|
||||
affix: 0,
|
||||
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 cloneDeep(state);
|
||||
return defaultValueCheck(cloneDeep(state));
|
||||
}
|
||||
return cloneDeep(defaultState);
|
||||
return defaultValueCheck(cloneDeep(defaultState));
|
||||
}
|
||||
|
||||
// 默认值校正，主要为了解决历史数据格式不规范问题
|
||||
export function defaultValueCheck(state: State): State {
|
||||
if (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 const options = ref({
|
||||
sys_menu_types: [] as Option[],
|
||||
sys_menu_component: [] as Option[],
|
||||
sys_normal_disable: [] as Option[],
|
||||
sys_switch: [] as Option[],
|
||||
});
|
||||
|
||||
// 加载字典数据选项
|
||||
export function loadOptions() {
|
||||
Dicts({
|
||||
types: ['sys_menu_types', 'sys_menu_component', 'sys_normal_disable', 'sys_switch'],
|
||||
}).then((res) => {
|
||||
options.value = res;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -46,27 +46,27 @@ export const columns = [
|
||||
// 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: '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',
|
||||
|
||||
116
web/src/views/permission/role/editDataAuth.vue
Normal file
116
web/src/views/permission/role/editDataAuth.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<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"
|
||||
: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>
|
||||
216
web/src/views/permission/role/editMenuAuth.vue
Normal file
216
web/src/views/permission/role/editMenuAuth.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:show-icon="false"
|
||||
:mask-closable="false"
|
||||
preset="dialog"
|
||||
:title="'分配 ' + formValue.name + ' 的菜单权限'"
|
||||
>
|
||||
<n-spin :show="loading" description="请稍候...">
|
||||
<div class="py-3 menu-list" :style="{ maxHeight: '90vh', height: '70vh' }">
|
||||
<n-input size="small" 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"
|
||||
:expandedKeys="expandedKeys"
|
||||
:checked-keys="checkedKeys"
|
||||
style="max-height: 950px; overflow: hidden"
|
||||
@update:checked-keys="checkedTree"
|
||||
@update:expanded-keys="onExpandedKeys"
|
||||
/>
|
||||
</div>
|
||||
</n-spin>
|
||||
<template #action>
|
||||
<n-space class="mt-6" v-if="showImportSelect">
|
||||
<n-input-group>
|
||||
<n-tree-select
|
||||
size="small"
|
||||
placeholder="请选择一个要导入的角色"
|
||||
:consistent-menu-width="false"
|
||||
clearable
|
||||
filterable
|
||||
default-expand-all
|
||||
:options="editRoleOption"
|
||||
key-field="id"
|
||||
label-field="name"
|
||||
:on-update:value="handleImportSelect"
|
||||
/>
|
||||
<div class="mr-2"></div>
|
||||
<n-button ghost @click="showImportSelect = false" size="small"> 取消 </n-button>
|
||||
</n-input-group>
|
||||
</n-space>
|
||||
|
||||
<n-space class="mt-6 space-group" v-if="!showImportSelect" size="small">
|
||||
<n-button ghost @click="showImportSelect = true" size="small"> 导入权限 </n-button>
|
||||
<n-button type="info" ghost icon-placement="left" @click="packHandle" size="small">
|
||||
全部{{ expandedKeys.length ? '收起' : '展开' }}
|
||||
</n-button>
|
||||
<n-button type="info" ghost icon-placement="left" @click="checkedAllHandle" size="small">
|
||||
全部{{ checkedAll ? '取消' : '选择' }}
|
||||
</n-button>
|
||||
|
||||
<n-popconfirm @positive-click="confirmForm">
|
||||
<template #trigger>
|
||||
<n-button type="primary" :loading="formBtnLoading" size="small">提交</n-button>
|
||||
</template>
|
||||
你正在修改 {{ formValue.name }} 的菜单权限，确定要提交吗？
|
||||
</n-popconfirm>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { GetPermissions, getRoleList, UpdatePermissions } from '@/api/system/role';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
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 settingStore = useProjectSettingStore();
|
||||
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(840);
|
||||
});
|
||||
|
||||
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 closeForm() {
|
||||
showModal.value = false;
|
||||
loading.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 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">
|
||||
.space-group {
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
</style>
|
||||
146
web/src/views/permission/role/editRole.vue
Normal file
146
web/src/views/permission/role/editRole.vue
Normal file
@@ -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>
|
||||
40
web/src/views/permission/role/model.ts
Normal file
40
web/src/views/permission/role/model.ts
Normal file
@@ -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();
|
||||
}
|
||||
@@ -14,9 +14,9 @@
|
||||
</n-space>
|
||||
|
||||
<n-data-table
|
||||
v-if="data.length > 0 || !loading"
|
||||
v-if="dataSource.length > 0 || !loading"
|
||||
:columns="columns.concat(actionColumn)"
|
||||
:data="data"
|
||||
:data="dataSource"
|
||||
:row-key="(row) => row.id"
|
||||
:loading="loading"
|
||||
:resizeHeightOffset="-20000"
|
||||
@@ -25,135 +25,9 @@
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:show-icon="false"
|
||||
:mask-closable="false"
|
||||
preset="dialog"
|
||||
:title="editRoleTitle"
|
||||
>
|
||||
<div class="py-3 menu-list" :style="{ maxHeight: '90vh', height: '70vh' }">
|
||||
<n-tree
|
||||
block-line
|
||||
checkable
|
||||
:check-on-click="true"
|
||||
:default-expand-all="true"
|
||||
:virtual-scroll="true"
|
||||
:data="treeData"
|
||||
:expandedKeys="expandedKeys"
|
||||
:checked-keys="checkedKeys"
|
||||
style="max-height: 950px; overflow: hidden"
|
||||
@update:checked-keys="checkedTree"
|
||||
@update:expanded-keys="onExpandedKeys"
|
||||
/>
|
||||
</div>
|
||||
<template #action>
|
||||
<n-space>
|
||||
<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-button type="primary" :loading="formBtnLoading" @click="confirmForm">提交</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
|
||||
<n-modal
|
||||
v-model:show="showModal2"
|
||||
:show-icon="false"
|
||||
preset="dialog"
|
||||
:title="formParams.id > 0 ? '编辑角色 #' + formParams.id : '添加角色'"
|
||||
>
|
||||
<n-form
|
||||
:model="formParams"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
:label-width="80"
|
||||
class="py-4"
|
||||
>
|
||||
<n-form-item label="上级角色" path="pid">
|
||||
<n-tree-select
|
||||
:options="optionTreeData"
|
||||
:default-value="formParams.pid"
|
||||
key-field="id"
|
||||
label-field="name"
|
||||
:on-update:value="onUpdateValuePid"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="角色名称" path="name">
|
||||
<n-input placeholder="请输入名称" v-model:value="formParams.name" />
|
||||
</n-form-item>
|
||||
<n-form-item label="权限编码" path="key">
|
||||
<n-input placeholder="请输入" v-model:value="formParams.key" />
|
||||
</n-form-item>
|
||||
<!-- <n-form-item label="排序" path="sort">-->
|
||||
<!-- <n-input-number v-model:value="formParams.sort" clearable />-->
|
||||
<!-- </n-form-item>-->
|
||||
|
||||
<n-form-item label="状态" path="status">
|
||||
<n-radio-group v-model:value="formParams.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="formParams.remark" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="() => (showModal2 = false)">取消</n-button>
|
||||
<n-button type="info" :loading="formBtnLoading2" @click="confirmForm2">确定</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
|
||||
<n-modal
|
||||
v-model:show="showDataModal"
|
||||
:show-icon="false"
|
||||
preset="dialog"
|
||||
:title="'修改 ' + dataForm?.name + ' 的数据权限'"
|
||||
>
|
||||
<n-form
|
||||
:model="dataForm"
|
||||
ref="dataFormRef"
|
||||
label-placement="left"
|
||||
:label-width="120"
|
||||
class="py-4"
|
||||
>
|
||||
<n-form-item label="数据范围" path="dataScope">
|
||||
<n-select v-model:value="dataForm.dataScope" :options="dataScopeOption" />
|
||||
</n-form-item>
|
||||
<n-form-item label="自定义权限" path="customDept" v-if="dataForm.dataScope === 4">
|
||||
<n-tree-select
|
||||
multiple
|
||||
key-field="id"
|
||||
:options="deptList"
|
||||
v-model:value="dataForm.customDept"
|
||||
:default-expand-all="true"
|
||||
@update:value="handleUpdateDeptValue"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<template #action>
|
||||
<n-space>
|
||||
<n-button @click="() => (showDataModal = false)">取消</n-button>
|
||||
<n-button type="info" :loading="dataFormBtnLoading" @click="confirmDataForm"
|
||||
>确定</n-button
|
||||
>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-modal>
|
||||
<EditRole ref="editRoleRef" @reloadTable="reloadTable" />
|
||||
<EditMenuAuth ref="editMenuAuthRef" @reloadTable="reloadTable" />
|
||||
<EditDataAuth ref="editDataAuthRef" @reloadTable="reloadTable" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -161,77 +35,24 @@
|
||||
import { h, onMounted, reactive, ref } from 'vue';
|
||||
import { NButton, useDialog, useMessage } from 'naive-ui';
|
||||
import { BasicColumn, TableAction } from '@/components/Table';
|
||||
import {
|
||||
Delete,
|
||||
Edit,
|
||||
GetPermissions,
|
||||
getRoleList,
|
||||
UpdatePermissions,
|
||||
DataScopeSelect,
|
||||
DataScopeEdit,
|
||||
} from '@/api/system/role';
|
||||
import { EditMenu, getMenuList } from '@/api/system/menu';
|
||||
import { Delete, getRoleList } from '@/api/system/role';
|
||||
import { columns } from './columns';
|
||||
import { PlusOutlined } from '@vicons/antd';
|
||||
import { getAllExpandKeys, getTreeAll } from '@/utils';
|
||||
import { statusOptions } from '@/enums/optionsiEnum';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { getDeptList } from '@/api/org/dept';
|
||||
import EditRole from './editRole.vue';
|
||||
import EditMenuAuth from './editMenuAuth.vue';
|
||||
import EditDataAuth from './editDataAuth.vue';
|
||||
import { newState } from '@/views/permission/role/model';
|
||||
|
||||
const formRef: any = ref(null);
|
||||
const message = useMessage();
|
||||
const dialog = useDialog();
|
||||
const showModal2 = ref(false);
|
||||
const showModal = ref(false);
|
||||
const formBtnLoading = ref(false);
|
||||
const formBtnLoading2 = ref(false);
|
||||
const checkedAll = ref<any>(false);
|
||||
const editRoleTitle = ref('');
|
||||
const treeData = ref([]);
|
||||
const expandedKeys = ref([]);
|
||||
const checkedKeys = ref<any>([]);
|
||||
const updatePermissionsParams = ref<any>({});
|
||||
const optionTreeData = ref<any>([]);
|
||||
const dataScopeOption = ref<any>();
|
||||
const deptList = ref<any>([]);
|
||||
const dataFormRef = ref<any>();
|
||||
const dataFormBtnLoading = ref(false);
|
||||
const showDataModal = ref(false);
|
||||
const dataForm = ref<any>();
|
||||
const loading = ref(false);
|
||||
const data = ref<any>([]);
|
||||
|
||||
const rules = {
|
||||
name: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
message: '请输入名称',
|
||||
},
|
||||
key: {
|
||||
required: true,
|
||||
trigger: ['blur', 'input'],
|
||||
message: '请输入角色编码',
|
||||
},
|
||||
};
|
||||
|
||||
const defaultState = {
|
||||
id: 0,
|
||||
pid: 0,
|
||||
level: 1,
|
||||
tree: '',
|
||||
name: '',
|
||||
key: '',
|
||||
remark: null,
|
||||
status: 1,
|
||||
sort: 0,
|
||||
dataScope: 1,
|
||||
customDept: [],
|
||||
};
|
||||
|
||||
const formParams = ref<any>(cloneDeep(defaultState));
|
||||
const dataSource = ref<any>([]);
|
||||
const editRoleRef = ref();
|
||||
const editMenuAuthRef = ref();
|
||||
const editDataAuthRef = ref();
|
||||
|
||||
const actionColumn = reactive<BasicColumn>({
|
||||
width: 300,
|
||||
width: 200,
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
@@ -255,12 +76,13 @@
|
||||
},
|
||||
type: 'default',
|
||||
},
|
||||
{
|
||||
label: '添加',
|
||||
onClick: handleAddSub.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
ifShow: () => {
|
||||
return record.id !== 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
@@ -274,62 +96,30 @@
|
||||
},
|
||||
});
|
||||
|
||||
const loadDataTable = async (res: any) => {
|
||||
function loadDataTable() {
|
||||
loading.value = true;
|
||||
const tmp = await getRoleList({ ...res, ...{ pageSize: 100, page: 1 } });
|
||||
data.value = tmp.list ?? [];
|
||||
loading.value = false;
|
||||
};
|
||||
getRoleList({ pageSize: 100, page: 1 }).then((res) => {
|
||||
dataSource.value = res.list ?? [];
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function reloadTable() {
|
||||
loadDataList();
|
||||
loadDataTable({});
|
||||
}
|
||||
|
||||
function confirmForm(e: any) {
|
||||
e.preventDefault();
|
||||
formBtnLoading.value = true;
|
||||
UpdatePermissions({
|
||||
...{
|
||||
id: updatePermissionsParams.value.id,
|
||||
menuIds:
|
||||
checkedKeys.value === undefined || checkedKeys.value == null ? [] : checkedKeys.value,
|
||||
},
|
||||
}).then((_res) => {
|
||||
message.success('操作成功');
|
||||
reloadTable();
|
||||
showModal.value = false;
|
||||
formBtnLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function confirmForm2(e) {
|
||||
e.preventDefault();
|
||||
formBtnLoading2.value = true;
|
||||
formRef.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
Edit(formParams.value).then((_res) => {
|
||||
message.success('操作成功');
|
||||
setTimeout(() => {
|
||||
showModal2.value = false;
|
||||
reloadTable();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
message.error('请填写完整信息');
|
||||
}
|
||||
formBtnLoading2.value = false;
|
||||
});
|
||||
loadDataTable();
|
||||
}
|
||||
|
||||
function addTable() {
|
||||
showModal2.value = true;
|
||||
formParams.value = cloneDeep(defaultState);
|
||||
editRoleRef.value.openModal(null);
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable) {
|
||||
showModal2.value = true;
|
||||
formParams.value = cloneDeep(record);
|
||||
editRoleRef.value.openModal(record);
|
||||
}
|
||||
|
||||
function handleAddSub(record: Recordable) {
|
||||
let state = newState(null);
|
||||
state.pid = record.id;
|
||||
editRoleRef.value.openModal(state);
|
||||
}
|
||||
|
||||
function handleDelete(record: Recordable) {
|
||||
@@ -348,118 +138,16 @@
|
||||
}
|
||||
|
||||
async function handleMenuAuth(record: Recordable) {
|
||||
editRoleTitle.value = `分配 ${record.name} 的菜单权限`;
|
||||
checkedKeys.value = [];
|
||||
checkedAll.value = false;
|
||||
const data = await GetPermissions({ ...{ id: record.id } });
|
||||
checkedKeys.value = data.menuIds;
|
||||
updatePermissionsParams.value.id = record.id;
|
||||
showModal.value = true;
|
||||
editMenuAuthRef.value.openModal(record);
|
||||
}
|
||||
|
||||
function handleDataAuth(record: Recordable) {
|
||||
dataForm.value = cloneDeep(record);
|
||||
showDataModal.value = true;
|
||||
editDataAuthRef.value.openModal(record);
|
||||
}
|
||||
|
||||
function handleUpdateDeptValue(value: string | number | Array<string | number> | null) {
|
||||
dataForm.value.customDept = value;
|
||||
}
|
||||
|
||||
function confirmDataForm(e) {
|
||||
e.preventDefault();
|
||||
dataFormBtnLoading.value = true;
|
||||
dataFormRef.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
DataScopeEdit(dataForm.value).then((_res) => {
|
||||
message.success('操作成功');
|
||||
setTimeout(() => {
|
||||
showDataModal.value = false;
|
||||
reloadTable();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
message.error('请填写完整信息');
|
||||
}
|
||||
dataFormBtnLoading.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 = getTreeAll(treeData.value);
|
||||
checkedAll.value = true;
|
||||
} else {
|
||||
checkedKeys.value = [];
|
||||
checkedAll.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loadDataList();
|
||||
loadMenuList();
|
||||
loadDeptList();
|
||||
loadDataScopeSelect();
|
||||
await loadDataTable({});
|
||||
onMounted(() => {
|
||||
loadDataTable();
|
||||
});
|
||||
|
||||
function loadDataList() {
|
||||
getRoleList({ pageSize: 100, page: 1 }).then((res) => {
|
||||
optionTreeData.value = [
|
||||
{
|
||||
id: 0,
|
||||
key: 0,
|
||||
label: '顶级角色',
|
||||
pid: 0,
|
||||
name: '顶级角色',
|
||||
},
|
||||
];
|
||||
optionTreeData.value = optionTreeData.value.concat(res.list);
|
||||
});
|
||||
}
|
||||
|
||||
function loadMenuList() {
|
||||
getMenuList().then((res) => {
|
||||
expandedKeys.value = getAllExpandKeys(res.list) as [];
|
||||
treeData.value = res.list;
|
||||
});
|
||||
}
|
||||
|
||||
function loadDeptList() {
|
||||
getDeptList({}).then((res) => {
|
||||
if (res.list) {
|
||||
deptList.value = res.list;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadDataScopeSelect() {
|
||||
DataScopeSelect().then((res) => {
|
||||
if (res.list) {
|
||||
dataScopeOption.value = res.list;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onUpdateValuePid(value: string | number) {
|
||||
formParams.value.pid = value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user