Skip to content

Commit

Permalink
style(system/menu): 优化菜单表单布局
Browse files Browse the repository at this point in the history
  • Loading branch information
@Charles7c
Charles7c committed Dec 13, 2024
1 parent 438c2af commit 84be614
Showing 1 changed file with 51 additions and 30 deletions.
81 changes: 51 additions & 30 deletions src/views/system/menu/MenuAddModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@
:title="title"
:mask-closable="false"
:esc-to-close="false"
:width="width >= 600 ? 600 : '100%'"
:body-style="{ maxHeight: width >= 650 ? '76vh' : '100vh' }"
:width="width >= 650 ? 650 : '100%'"
draggable
@before-ok="save"
@close="reset"
>
<a-form ref="formRef" :model="form" :rules="formRules" auto-label-width>
<a-form ref="formRef" :model="form" :rules="formRules" auto-label-width :layout="width >= 700 ? 'horizontal' : 'vertical'">
<a-form-item label="菜单类型" field="type">
<a-radio-group v-model="form.type" type="button" :disabled="isUpdate" @change="onChangeType">
<a-radio :value="1">目录</a-radio>
Expand All @@ -28,38 +29,56 @@
:filter-tree-node="filterOptions"
/>
</a-form-item>
<a-form-item v-if="[1, 2].includes(form.type)" label="菜单图标" field="icon">
<GiIconSelector v-model="form.icon" />
</a-form-item>
<a-form-item label="菜单标题" field="title">
<a-input v-model.trim="form.title" placeholder="请输入菜单标题" allow-clear />
</a-form-item>
<a-form-item v-if="[1, 2].includes(form.type)" label="路由地址" field="path">
<a-input v-model.trim="form.path" placeholder="请输入路由地址" allow-clear />
</a-form-item>
<a-form-item v-if="[1, 2].includes(form.type) && !form.isExternal" label="重定向" field="redirect">
<a-input v-model.trim="form.redirect" placeholder="请输入重定向地址" allow-clear />
</a-form-item>
<a-form-item v-if="[1, 2].includes(form.type) && !form.isExternal" label="组件名称" field="name">
<a-input v-model.trim="form.name" placeholder="请输入组件名称" allow-clear />
<template #extra>
<div v-if="componentName">
<span>建议组件名称：</span>
<a-tag checkable @check="inputComponentName">{{ componentName }}</a-tag>
</div>
</template>
</a-form-item>
<a-form-item v-if="form.type === 2" label="组件路径" field="component">
<a-input v-if="form.isExternal" v-model.trim="form.component" placeholder="请输入组件路径" allow-clear />
<a-select v-else v-model="form.component" placeholder="请选择组件路径" allow-clear allow-create :options="componentOptions">
<a-row>
<a-col v-bind="colProps">
<a-form-item label="菜单标题" field="title">
<a-input v-model.trim="form.title" placeholder="请输入菜单标题" :max-length="30" show-word-limit allow-clear />
</a-form-item>
</a-col>
<a-col v-bind="colProps">
<a-form-item v-if="[1, 2].includes(form.type)" label="菜单图标" field="icon">
<GiIconSelector v-model="form.icon" />
</a-form-item>
<a-form-item v-else label="权限标识" field="permission">
<a-input v-model.trim="form.permission" placeholder="system:user:add" allow-clear />
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col v-bind="colProps">
<a-form-item v-if="[1, 2].includes(form.type)" label="路由地址" field="path">
<a-input v-model.trim="form.path" placeholder="请输入路由地址" allow-clear />
</a-form-item>
</a-col>
<a-col v-bind="colProps">
<a-form-item v-if="form.type === 1 || (form.type === 2 && !form.isExternal)" label="重定向" field="redirect">
<a-input v-model.trim="form.redirect" placeholder="请输入重定向地址" allow-clear />
</a-form-item>
<a-form-item v-if="form.type === 2 && form.isExternal" label="组件路径" field="component">
<a-input v-model.trim="form.component" placeholder="请输入组件路径" allow-clear />
</a-form-item>
</a-col>
</a-row>
<a-form-item v-if="form.type === 2 && !form.isExternal" label="组件路径" field="component">
<a-select v-model="form.component" placeholder="请输入或选择组件路径" allow-clear allow-create :options="componentOptions">
<template #label="{ data }">
{{ data?.value }}
</template>
</a-select>
</a-form-item>
<a-form-item v-if="form.type === 3" label="权限标识" field="permission">
<a-input v-model.trim="form.permission" placeholder="system:user:add" allow-clear />
</a-form-item>
<a-row>
<a-col v-bind="colProps">
<a-form-item v-if="form.type === 1 || (form.type === 2 && !form.isExternal)" label="组件名称" field="name">
<a-input v-model.trim="form.name" placeholder="请输入组件名称" :max-length="50" show-word-limit allow-clear />
<template #extra>
<div v-if="componentName">
<span>建议组件名称：</span>
<a-tag checkable @check="inputComponentName">{{ componentName }}</a-tag>
</div>
</template>
</a-form-item>
</a-col>
</a-row>
<a-row v-if="[1, 2].includes(form.type)" :gutter="16">
<a-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8" :xxl="8">
<a-form-item label="是否隐藏" field="hidden">
Expand Down Expand Up @@ -116,7 +135,7 @@
</template>

<script setup lang="ts">
import { type FormInstance, Message, type TreeNodeData } from '@arco-design/web-vue'
import { type ColProps, type FormInstance, Message, type TreeNodeData } from '@arco-design/web-vue'
import { useWindowSize } from '@vueuse/core'
import { mapTree } from 'xe-utils'
import { type MenuResp, addMenu, getMenu, updateMenu } from '@/apis/system/menu'
Expand All @@ -137,6 +156,8 @@ const emit = defineEmits<{
const { width } = useWindowSize()
const colProps: ColProps = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 }
const dataId = ref('')
const visible = ref(false)
const isUpdate = computed(() => !!dataId.value)
Expand Down

0 comments on commit 84be614

Please sign in to comment.