BJ_ZTEITS-Developers / parking-cloud-yudao

Commit b447e4d02ede9e2bb7bbf14d9d1f19a452cc623f

Authored by xingyu
1 parent a97db275

fix: menu form 布局

Inline Side-by-side
Showing 1 changed file with 86 additions and 63 deletions
yudao-ui-admin-vue3/src/views/system/menu/index.vue
  View file @b447e4d
@@ -98,7 +98,13 @@ @@ -98,7 +98,13 @@
98 <!-- 添加或修改菜单对话框 --> 98 <!-- 添加或修改菜单对话框 -->
99 <XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle"> 99 <XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle">
100 <!-- 对话框(添加 / 修改) --> 100 <!-- 对话框(添加 / 修改) -->
101 - <el-form ref="formRef" :model="menuForm" :rules="rules" label-width="auto" label-position="top"> 101 + <el-form
  102 + ref="formRef"
  103 + :model="menuForm"
  104 + :rules="rules"
  105 + label-width="120px"
  106 + label-position="left"
  107 + >
102 <el-form-item label="上级菜单"> 108 <el-form-item label="上级菜单">
103 <el-tree-select 109 <el-tree-select
104 node-key="id" 110 node-key="id"
@@ -109,9 +115,11 @@ @@ -109,9 +115,11 @@
109 check-strictly 115 check-strictly
110 /> 116 />
111 </el-form-item> 117 </el-form-item>
112 - <el-form-item label="菜单名称" prop="name" span="12">  
113 - <el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />  
114 - </el-form-item> 118 + <el-col :span="8">
  119 + <el-form-item label="菜单名称" prop="name">
  120 + <el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
  121 + </el-form-item>
  122 + </el-col>
115 <el-form-item label="菜单类型" prop="type"> 123 <el-form-item label="菜单类型" prop="type">
116 <el-radio-group v-model="menuForm.type"> 124 <el-radio-group v-model="menuForm.type">
117 <el-radio-button 125 <el-radio-button
@@ -127,74 +135,88 @@ @@ -127,74 +135,88 @@
127 <el-form-item label="菜单图标"> 135 <el-form-item label="菜单图标">
128 <IconSelect v-model="menuForm.icon" clearable /> 136 <IconSelect v-model="menuForm.icon" clearable />
129 </el-form-item> 137 </el-form-item>
130 - <el-form-item label="路由地址" prop="path">  
131 - <template #label>  
132 - <Tooltip  
133 - titel="路由地址"  
134 - message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"  
135 - />  
136 - </template>  
137 - <el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />  
138 - </el-form-item> 138 + <el-col :span="8">
  139 + <el-form-item label="路由地址" prop="path">
  140 + <template #label>
  141 + <Tooltip
  142 + titel="路由地址"
  143 + message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
  144 + />
  145 + </template>
  146 + <el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
  147 + </el-form-item>
  148 + </el-col>
139 </template> 149 </template>
140 <template v-if="menuForm.type === 2"> 150 <template v-if="menuForm.type === 2">
141 - <el-form-item label="路由地址" prop="component">  
142 - <el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />  
143 - </el-form-item> 151 + <el-col :span="8">
  152 + <el-form-item label="路由地址" prop="component">
  153 + <el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
  154 + </el-form-item>
  155 + </el-col>
144 </template> 156 </template>
145 <template v-if="menuForm.type !== 1"> 157 <template v-if="menuForm.type !== 1">
146 - <el-form-item label="权限标识" prop="permission">  
147 - <template #label>  
148 - <Tooltip  
149 - titel="权限标识"  
150 - message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"  
151 - />  
152 - </template>  
153 - <el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />  
154 - </el-form-item> 158 + <el-col :span="8">
  159 + <el-form-item label="权限标识" prop="permission">
  160 + <template #label>
  161 + <Tooltip
  162 + titel="权限标识"
  163 + message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
  164 + />
  165 + </template>
  166 + <el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
  167 + </el-form-item>
  168 + </el-col>
155 </template> 169 </template>
156 - <el-form-item label="显示排序" prop="sort">  
157 - <el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable />  
158 - </el-form-item>  
159 - <el-form-item label="菜单状态" prop="status">  
160 - <el-radio-group v-model="menuForm.status">  
161 - <el-radio  
162 - border  
163 - v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"  
164 - :key="dict.value"  
165 - :label="dict.value"  
166 - >  
167 - {{ dict.label }}  
168 - </el-radio>  
169 - </el-radio-group>  
170 - </el-form-item>  
171 - <template v-if="menuForm.type !== 3">  
172 - <el-form-item label="显示状态" prop="status">  
173 - <template #label>  
174 - <Tooltip  
175 - titel="显示状态"  
176 - message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"  
177 - />  
178 - </template>  
179 - <el-radio-group v-model="menuForm.visible">  
180 - <el-radio border key="true" :label="true">显示</el-radio>  
181 - <el-radio border key="false" :label="false">隐藏</el-radio> 170 + <el-col :span="8">
  171 + <el-form-item label="显示排序" prop="sort">
  172 + <el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable />
  173 + </el-form-item>
  174 + </el-col>
  175 + <el-col :span="8">
  176 + <el-form-item label="菜单状态" prop="status">
  177 + <el-radio-group v-model="menuForm.status">
  178 + <el-radio
  179 + border
  180 + v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
  181 + :key="dict.value"
  182 + :label="dict.value"
  183 + >
  184 + {{ dict.label }}
  185 + </el-radio>
182 </el-radio-group> 186 </el-radio-group>
183 </el-form-item> 187 </el-form-item>
  188 + </el-col>
  189 + <template v-if="menuForm.type !== 3">
  190 + <el-col :span="8">
  191 + <el-form-item label="显示状态" prop="status">
  192 + <template #label>
  193 + <Tooltip
  194 + titel="显示状态"
  195 + message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
  196 + />
  197 + </template>
  198 + <el-radio-group v-model="menuForm.visible">
  199 + <el-radio border key="true" :label="true">显示</el-radio>
  200 + <el-radio border key="false" :label="false">隐藏</el-radio>
  201 + </el-radio-group>
  202 + </el-form-item>
  203 + </el-col>
184 </template> 204 </template>
185 <template v-if="menuForm.type === 2"> 205 <template v-if="menuForm.type === 2">
186 - <el-form-item label="缓存状态" prop="keepAlive">  
187 - <template #label>  
188 - <Tooltip  
189 - titel="缓存状态"  
190 - message="选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致"  
191 - />  
192 - </template>  
193 - <el-radio-group v-model="menuForm.keepAlive">  
194 - <el-radio border key="true" :label="true">缓存</el-radio>  
195 - <el-radio border key="false" :label="false">不缓存</el-radio>  
196 - </el-radio-group>  
197 - </el-form-item> 206 + <el-col :span="8">
  207 + <el-form-item label="缓存状态" prop="keepAlive">
  208 + <template #label>
  209 + <Tooltip
  210 + titel="缓存状态"
  211 + message="选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致"
  212 + />
  213 + </template>
  214 + <el-radio-group v-model="menuForm.keepAlive">
  215 + <el-radio border key="true" :label="true">缓存</el-radio>
  216 + <el-radio border key="false" :label="false">不缓存</el-radio>
  217 + </el-radio-group>
  218 + </el-form-item>
  219 + </el-col>
198 </template> 220 </template>
199 </el-form> 221 </el-form>
200 <template #footer> 222 <template #footer>
@@ -218,6 +240,7 @@ import { useI18n } from &#39;@/hooks/web/useI18n&#39; @@ -218,6 +240,7 @@ import { useI18n } from &#39;@/hooks/web/useI18n&#39;
218 import { CACHE_KEY, useCache } from '@/hooks/web/useCache' 240 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
219 import { useMessage } from '@/hooks/web/useMessage' 241 import { useMessage } from '@/hooks/web/useMessage'
220 import { 242 import {
  243 + ElCol,
221 ElForm, 244 ElForm,
222 ElFormItem, 245 ElFormItem,
223 ElInput, 246 ElInput,