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 98 <!-- 添加或修改菜单对话框 -->
99 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 108 <el-form-item label="上级菜单">
103 109 <el-tree-select
104 110 node-key="id"
... ... @@ -109,9 +115,11 @@
109 115 check-strictly
110 116 />
111 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 123 <el-form-item label="菜单类型" prop="type">
116 124 <el-radio-group v-model="menuForm.type">
117 125 <el-radio-button
... ... @@ -127,74 +135,88 @@
127 135 <el-form-item label="菜单图标">
128 136 <IconSelect v-model="menuForm.icon" clearable />
129 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 149 </template>
140 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 156 </template>
145 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 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 186 </el-radio-group>
183 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 204 </template>
185 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 220 </template>
199 221 </el-form>
200 222 <template #footer>
... ... @@ -218,6 +240,7 @@ import { useI18n } from &#39;@/hooks/web/useI18n&#39;
218 240 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
219 241 import { useMessage } from '@/hooks/web/useMessage'
220 242 import {
  243 + ElCol,
221 244 ElForm,
222 245 ElFormItem,
223 246 ElInput,
... ...