update: 菜单管理优化
This commit is contained in:
easy
parent
b03b0f09df
commit
9a7c8d3bc7
|
|
@ -83,6 +83,7 @@ const selectItem = ref<any>({});
|
|||
const dialogVisible = ref(false);
|
||||
const dialogTitle = ref<'查看' | '新增' | '编辑'>('新增');
|
||||
const openDialog = (mode: '查看' | '新增' | '编辑', row: object) => {
|
||||
if(!routeParams.id) return message.warning('请先新增菜单基本信息')
|
||||
selectItem.value = { ...row };
|
||||
dialogTitle.value = mode;
|
||||
dialogVisible.value = true;
|
||||
|
|
|
|||
|
|
@ -1,132 +1,132 @@
|
|||
<template>
|
||||
<div class="setting-container">
|
||||
<a-card>
|
||||
<h5 class="top">
|
||||
<exclamation-circle-outlined />
|
||||
<span style="padding-left: 12px"
|
||||
>基于系统源代码中的菜单数据，配置系统菜单。</span
|
||||
>
|
||||
</h5>
|
||||
<h5 class="top">
|
||||
<exclamation-circle-outlined />
|
||||
<span style="padding-left: 12px"
|
||||
>基于系统源代码中的菜单数据，配置系统菜单。</span
|
||||
>
|
||||
</h5>
|
||||
|
||||
<div class="transfer">
|
||||
<!-- 左侧树 -->
|
||||
<div class="basic-tree left">
|
||||
<div class="title">
|
||||
<div class="title-label">
|
||||
<span>源菜单</span>
|
||||
<a-tooltip>
|
||||
<template #title
|
||||
>根据系统代码自动读取的菜单数据</template
|
||||
>
|
||||
<question-circle-outlined />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="title-func">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="dialogShow = true"
|
||||
ghost
|
||||
>一键拷贝</a-button
|
||||
<div class="transfer">
|
||||
<!-- 左侧树 -->
|
||||
<div class="basic-tree left">
|
||||
<div class="title">
|
||||
<div class="title-label">
|
||||
<span>源菜单</span>
|
||||
<j-tooltip>
|
||||
<template #title
|
||||
>根据系统代码自动读取的菜单数据</template
|
||||
>
|
||||
</div>
|
||||
<question-circle-outlined />
|
||||
</j-tooltip>
|
||||
</div>
|
||||
<div class="content">
|
||||
<a-input
|
||||
v-model:value="transfer.data.leftSearchValue"
|
||||
style="margin-bottom: 8px"
|
||||
placeholder="请输入菜单名称"
|
||||
<div class="title-func">
|
||||
<j-button
|
||||
type="primary"
|
||||
@click="dialogShow = true"
|
||||
ghost
|
||||
>一键拷贝</j-button
|
||||
>
|
||||
<template #prefix>
|
||||
<search-outlined style="color: #b3b3b3" />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-tree
|
||||
autoExpandParent
|
||||
:tree-data="transfer.data.leftTreeData"
|
||||
draggable
|
||||
>
|
||||
<template #title="row">
|
||||
<div>{{ row.name }}</div>
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center">
|
||||
<a-button>请拖动至右侧</a-button>
|
||||
</div>
|
||||
<!-- 右侧树 -->
|
||||
<div class="basic-tree right">
|
||||
<div class="title">
|
||||
<div class="title-label">
|
||||
<span>系统菜单</span>
|
||||
<a-tooltip>
|
||||
<template #title
|
||||
>菜单管理页面配置的菜单数据</template
|
||||
>
|
||||
<question-circle-outlined />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<a-input
|
||||
v-model:value="transfer.data.rightSearchValue"
|
||||
style="margin-bottom: 8px"
|
||||
placeholder="请输入菜单名称"
|
||||
>
|
||||
<template #prefix>
|
||||
<search-outlined style="color: #b3b3b3" />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-tree
|
||||
draggable
|
||||
autoExpandParent
|
||||
:tree-data="transfer.data.rightTreeData"
|
||||
@drop="transfer.onRightDrop"
|
||||
>
|
||||
<template #title="row">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<span>{{ row.name }}</span>
|
||||
<a-popconfirm
|
||||
title="确认删除？"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="transfer.removeItem(row)"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>删除</template>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
>
|
||||
<close-outlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
<div class="content">
|
||||
<j-input
|
||||
v-model:value="transfer.data.leftSearchValue"
|
||||
style="margin-bottom: 8px"
|
||||
placeholder="请输入菜单名称"
|
||||
>
|
||||
<template #prefix>
|
||||
<search-outlined style="color: #b3b3b3" />
|
||||
</template>
|
||||
</j-input>
|
||||
<j-tree
|
||||
autoExpandParent
|
||||
:tree-data="transfer.data.leftTreeData"
|
||||
draggable
|
||||
>
|
||||
<template #title="row">
|
||||
<div>{{ row.name }}</div>
|
||||
</template>
|
||||
</j-tree>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialogs">
|
||||
<a-modal
|
||||
v-model:visible="dialogShow"
|
||||
title="一键拷贝"
|
||||
@ok="transfer.copy"
|
||||
cancelText="取消"
|
||||
okText="确认"
|
||||
>
|
||||
<p>源数据将会覆盖当前的系统菜单数据，确定要一键拷贝吗？</p>
|
||||
</a-modal>
|
||||
<div class="center">
|
||||
<j-button>请拖动至右侧</j-button>
|
||||
</div>
|
||||
</a-card>
|
||||
<!-- 右侧树 -->
|
||||
<div class="basic-tree right">
|
||||
<div class="title">
|
||||
<div class="title-label">
|
||||
<span>系统菜单</span>
|
||||
<j-tooltip>
|
||||
<template #title
|
||||
>菜单管理页面配置的菜单数据</template
|
||||
>
|
||||
<question-circle-outlined />
|
||||
</j-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<j-input
|
||||
v-model:value="transfer.data.rightSearchValue"
|
||||
style="margin-bottom: 8px"
|
||||
placeholder="请输入菜单名称"
|
||||
>
|
||||
<template #prefix>
|
||||
<search-outlined style="color: #b3b3b3" />
|
||||
</template>
|
||||
</j-input>
|
||||
<j-tree
|
||||
draggable
|
||||
autoExpandParent
|
||||
:tree-data="transfer.data.rightTreeData"
|
||||
@drop="transfer.onRightDrop"
|
||||
>
|
||||
<template #title="row">
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<span>{{ row.name }}</span>
|
||||
<j-popconfirm
|
||||
title="确认删除？"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="transfer.removeItem(row)"
|
||||
>
|
||||
<j-tooltip>
|
||||
<template #title>删除</template>
|
||||
<j-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
>
|
||||
<close-outlined />
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
</j-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</j-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<j-button type="primary" style="margin-top: 24px;">保存</j-button>
|
||||
|
||||
<div class="dialogs">
|
||||
<j-modal
|
||||
v-model:visible="dialogShow"
|
||||
title="一键拷贝"
|
||||
@ok="transfer.copy"
|
||||
cancelText="取消"
|
||||
okText="确认"
|
||||
>
|
||||
<p>源数据将会覆盖当前的系统菜单数据，确定要一键拷贝吗？</p>
|
||||
</j-modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -282,6 +282,9 @@ const dialogShow = ref<boolean>(false);
|
|||
<style lang="less" scoped>
|
||||
.setting-container {
|
||||
padding: 24px;
|
||||
margin: 24px;
|
||||
background-color: #fff;
|
||||
|
||||
.top {
|
||||
font-size: inherit;
|
||||
margin-bottom: 24px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
visible
|
||||
:title="props.mode"
|
||||
width="660px"
|
||||
|
|
@ -8,8 +8,8 @@
|
|||
:maskClosable="false"
|
||||
:confirmLoading="loading"
|
||||
>
|
||||
<a-form :model="form.data" class="basic-form" ref="formRef">
|
||||
<a-form-item
|
||||
<j-form :model="form.data" class="basic-form" ref="formRef">
|
||||
<j-form-item
|
||||
label="编码"
|
||||
name="id"
|
||||
:rules="[
|
||||
|
|
@ -17,12 +17,12 @@
|
|||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.data.id"
|
||||
:disabled="props.mode !== '新增'"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
|
|
@ -30,12 +30,12 @@
|
|||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.data.name"
|
||||
:disabled="props.mode === '查看'"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="权限"
|
||||
name="permissions"
|
||||
:rules="[
|
||||
|
|
@ -53,17 +53,17 @@
|
|||
:disabled="props.mode === '查看'"
|
||||
:key="form.data.id || ''"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="describe">
|
||||
<a-textarea
|
||||
</j-form-item>
|
||||
<j-form-item label="说明" name="describe">
|
||||
<j-textarea
|
||||
v-model:value="form.data.describe"
|
||||
:rows="4"
|
||||
placeholder="请输入说明"
|
||||
:disabled="props.mode === '查看'"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="permission-choose-container">
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="searchValue"
|
||||
style="width: 300px"
|
||||
allowClear
|
||||
|
|
@ -10,35 +10,35 @@
|
|||
/>
|
||||
|
||||
<div class="permission-table">
|
||||
<a-row :gutter="24" class="table-head">
|
||||
<a-col :span="props.firstWidth">权限名称</a-col
|
||||
><a-col :span="24 - props.firstWidth">权限操作</a-col>
|
||||
</a-row>
|
||||
<j-row :gutter="24" class="table-head">
|
||||
<j-col :span="props.firstWidth">权限名称</j-col
|
||||
><j-col :span="24 - props.firstWidth">权限操作</j-col>
|
||||
</j-row>
|
||||
<div class="table-body" :style="{ 'max-height': props.maxHeight }">
|
||||
<a-row
|
||||
<j-row
|
||||
:gutter="24"
|
||||
class="row"
|
||||
v-for="rowItem in permission.list"
|
||||
>
|
||||
<a-col :span="props.firstWidth" class="item-name">
|
||||
<a-checkbox
|
||||
<j-col :span="props.firstWidth" class="item-name">
|
||||
<j-checkbox
|
||||
v-model:checked="rowItem.checkAll"
|
||||
:indeterminate="rowItem.indeterminate"
|
||||
@change="() => permission.selectAllOpions(rowItem)"
|
||||
:disabled="props.disabled"
|
||||
>
|
||||
{{ rowItem.name }}
|
||||
</a-checkbox>
|
||||
</a-col>
|
||||
<a-col :span="24 - props.firstWidth">
|
||||
<a-checkbox-group
|
||||
</j-checkbox>
|
||||
</j-col>
|
||||
<j-col :span="24 - props.firstWidth">
|
||||
<j-checkbox-group
|
||||
v-model:value="rowItem.checkedList"
|
||||
:options="rowItem.options"
|
||||
@change="((checkValue:string[])=>permission.selectOption(rowItem, checkValue))"
|
||||
:disabled="props.disabled"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue