ContiNew/continew-admin-ui
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin-ui.git synced 2025-09-11 06:57:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(system/menu): 优化菜单表单布局

Browse Source
This commit is contained in:
Charles7c
2024-12-13 22:49:47 +08:00
parent 438c2af4a6
commit 84be614d4c
1 changed files with 51 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/system/menu/MenuAddModal.vue
View File

@@ -4,12 +4,13 @@
:title="title" :title="title"
:mask-closable="false" :mask-closable="false"
:esc-to-close="false" :esc-to-close="false"
:width="width >= 600 ? 600 : '100%'" :body-style="{ maxHeight: width >= 650 ? '76vh' : '100vh' }"
:width="width >= 650 ? 650 : '100%'"
draggable draggable
@before-ok="save" @before-ok="save"
@close="reset" @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-form-item label="菜单类型" field="type">
<a-radio-group v-model="form.type" type="button" :disabled="isUpdate" @change="onChangeType"> <a-radio-group v-model="form.type" type="button" :disabled="isUpdate" @change="onChangeType">
<a-radio :value="1">目录</a-radio> <a-radio :value="1">目录</a-radio>
@@ -28,38 +29,56 @@
:filter-tree-node="filterOptions" :filter-tree-node="filterOptions"
/> />
</a-form-item> </a-form-item>
<a-form-item v-if="[1, 2].includes(form.type)" label="菜单图标" field="icon"> <a-row>
<GiIconSelector v-model="form.icon" /> <a-col v-bind="colProps">
</a-form-item> <a-form-item label="菜单标题" field="title">
<a-form-item label="菜单标题" field="title"> <a-input v-model.trim="form.title" placeholder="请输入菜单标题" :max-length="30" show-word-limit allow-clear />
<a-input v-model.trim="form.title" placeholder="请输入菜单标题" allow-clear /> </a-form-item>
</a-form-item> </a-col>
<a-form-item v-if="[1, 2].includes(form.type)" label="路由地址" field="path"> <a-col v-bind="colProps">
<a-input v-model.trim="form.path" placeholder="请输入路由地址" allow-clear /> <a-form-item v-if="[1, 2].includes(form.type)" label="菜单图标" field="icon">
</a-form-item> <GiIconSelector v-model="form.icon" />
<a-form-item v-if="[1, 2].includes(form.type) && !form.isExternal" label="重定向" field="redirect"> </a-form-item>
<a-input v-model.trim="form.redirect" placeholder="请输入重定向地址" allow-clear /> <a-form-item v-else label="权限标识" field="permission">
</a-form-item> <a-input v-model.trim="form.permission" placeholder="system:user:add" allow-clear />
<a-form-item v-if="[1, 2].includes(form.type) && !form.isExternal" label="组件名称" field="name"> </a-form-item>
<a-input v-model.trim="form.name" placeholder="请输入组件名称" allow-clear /> </a-col>
<template #extra> </a-row>
<div v-if="componentName"> <a-row>
<span>建议组件名称：</span> <a-col v-bind="colProps">
<a-tag checkable @check="inputComponentName">{{ componentName }}</a-tag> <a-form-item v-if="[1, 2].includes(form.type)" label="路由地址" field="path">
</div> <a-input v-model.trim="form.path" placeholder="请输入路由地址" allow-clear />
</template> </a-form-item>
</a-form-item> </a-col>
<a-form-item v-if="form.type === 2" label="组件路径" field="component"> <a-col v-bind="colProps">
<a-input v-if="form.isExternal" v-model.trim="form.component" placeholder="请输入组件路径" allow-clear /> <a-form-item v-if="form.type === 1 || (form.type === 2 && !form.isExternal)" label="重定向" field="redirect">
<a-select v-else v-model="form.component" placeholder="请选择组件路径" allow-clear allow-create :options="componentOptions"> <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 }"> <template #label="{ data }">
{{ data?.value }} {{ data?.value }}
</template> </template>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item v-if="form.type === 3" label="权限标识" field="permission"> <a-row>
<a-input v-model.trim="form.permission" placeholder="system:user:add" allow-clear /> <a-col v-bind="colProps">
</a-form-item> <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-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-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8" :xxl="8">
<a-form-item label="是否隐藏" field="hidden"> <a-form-item label="是否隐藏" field="hidden">
@@ -116,7 +135,7 @@
</template> </template>
<script setup lang="ts"> <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 { useWindowSize } from '@vueuse/core'
import { mapTree } from 'xe-utils' import { mapTree } from 'xe-utils'
import { type MenuResp, addMenu, getMenu, updateMenu } from '@/apis/system/menu' import { type MenuResp, addMenu, getMenu, updateMenu } from '@/apis/system/menu'
@@ -137,6 +156,8 @@ const emit = defineEmits<{
const { width } = useWindowSize() const { width } = useWindowSize()
const colProps: ColProps = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 }
const dataId = ref('') const dataId = ref('')
const visible = ref(false) const visible = ref(false)
const isUpdate = computed(() => !!dataId.value) const isUpdate = computed(() => !!dataId.value)