| 提交 | 用户 | 时间 | ||
| fd2207 | 1 | <template> |
| 懒 | 2 | <div class="app-container"> |
| 3 | <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> | |
| 4 | <el-form-item label="菜单名称" prop="menuName"> | |
| 5 | <el-input | |
| 6 | v-model="queryParams.menuName" | |
| 7 | placeholder="请输入菜单名称" | |
| 8 | clearable | |
| 9 | @keyup.enter.native="handleQuery" | |
| 10 | /> | |
| 11 | </el-form-item> | |
| 12 | <el-form-item label="状态" prop="status"> | |
| 13 | <el-select v-model="queryParams.status" placeholder="菜单状态" clearable> | |
| 14 | <el-option | |
| 15 | v-for="dict in dict.type.sys_normal_disable" | |
| 16 | :key="dict.value" | |
| 17 | :label="dict.label" | |
| 18 | :value="dict.value" | |
| 19 | /> | |
| 20 | </el-select> | |
| 21 | </el-form-item> | |
| 22 | <el-form-item> | |
| 23 | <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> | |
| 24 | <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> | |
| 25 | </el-form-item> | |
| 26 | </el-form> | |
| 27 | ||
| 28 | <el-row :gutter="10" class="mb8"> | |
| 29 | <el-col :span="1.5"> | |
| 30 | <el-button | |
| 31 | type="primary" | |
| 32 | plain | |
| 33 | icon="el-icon-plus" | |
| 34 | size="mini" | |
| 35 | @click="handleAdd" | |
| 36 | v-hasPermi="['system:menu:add']" | |
| 37 | >新增</el-button> | |
| 38 | </el-col> | |
| 39 | <el-col :span="1.5"> | |
| 40 | <el-button | |
| 41 | type="info" | |
| 42 | plain | |
| 43 | icon="el-icon-sort" | |
| 44 | size="mini" | |
| 45 | @click="toggleExpandAll" | |
| 46 | >展开/折叠</el-button> | |
| 47 | </el-col> | |
| 48 | <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> | |
| 49 | </el-row> | |
| 50 | ||
| 51 | <el-table | |
| 52 | v-if="refreshTable" | |
| 53 | v-loading="loading" | |
| 54 | :data="menuList" | |
| 55 | row-key="menuId" | |
| 56 | :default-expand-all="isExpandAll" | |
| 57 | :tree-props="{children: 'children', hasChildren: 'hasChildren'}" | |
| 58 | > | |
| 59 | <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> | |
| 60 | <el-table-column prop="icon" label="图标" align="center" width="100"> | |
| 61 | <template slot-scope="scope"> | |
| 62 | <svg-icon :icon-class="scope.row.icon" /> | |
| 63 | </template> | |
| 64 | </el-table-column> | |
| 65 | <el-table-column prop="orderNum" label="排序" width="60"></el-table-column> | |
| 66 | <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column> | |
| 67 | <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column> | |
| 68 | <el-table-column prop="status" label="状态" width="80"> | |
| 69 | <template slot-scope="scope"> | |
| 70 | <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/> | |
| 71 | </template> | |
| 72 | </el-table-column> | |
| 73 | <el-table-column label="创建时间" align="center" prop="createTime"> | |
| 74 | <template slot-scope="scope"> | |
| 75 | <span>{{ parseTime(scope.row.createTime) }}</span> | |
| 76 | </template> | |
| 77 | </el-table-column> | |
| 78 | <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> | |
| 79 | <template slot-scope="scope"> | |
| 80 | <el-button | |
| 81 | size="mini" | |
| 82 | type="text" | |
| 83 | icon="el-icon-edit" | |
| 84 | @click="handleUpdate(scope.row)" | |
| 85 | v-hasPermi="['system:menu:edit']" | |
| 86 | >修改</el-button> | |
| 87 | <el-button | |
| 88 | size="mini" | |
| 89 | type="text" | |
| 90 | icon="el-icon-plus" | |
| 91 | @click="handleAdd(scope.row)" | |
| 92 | v-hasPermi="['system:menu:add']" | |
| 93 | >新增</el-button> | |
| 94 | <el-button | |
| 95 | size="mini" | |
| 96 | type="text" | |
| 97 | icon="el-icon-delete" | |
| 98 | @click="handleDelete(scope.row)" | |
| 99 | v-hasPermi="['system:menu:remove']" | |
| 100 | >删除</el-button> | |
| 101 | </template> | |
| 102 | </el-table-column> | |
| 103 | </el-table> | |
| 104 | ||
| 105 | <!-- 添加或修改菜单对话框 --> | |
| 106 | <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body> | |
| 107 | <el-form ref="form" :model="form" :rules="rules" label-width="100px"> | |
| 108 | <el-row> | |
| 109 | <el-col :span="24"> | |
| 110 | <el-form-item label="上级菜单" prop="parentId"> | |
| 111 | <treeselect | |
| 112 | v-model="form.parentId" | |
| 113 | :options="menuOptions" | |
| 114 | :normalizer="normalizer" | |
| 115 | :show-count="true" | |
| 116 | placeholder="选择上级菜单" | |
| 117 | /> | |
| 118 | </el-form-item> | |
| 119 | </el-col> | |
| 120 | <el-col :span="24"> | |
| 121 | <el-form-item label="菜单类型" prop="menuType"> | |
| 122 | <el-radio-group v-model="form.menuType"> | |
| 123 | <el-radio label="M">目录</el-radio> | |
| 124 | <el-radio label="C">菜单</el-radio> | |
| 125 | <el-radio label="F">按钮</el-radio> | |
| 126 | </el-radio-group> | |
| 127 | </el-form-item> | |
| 128 | </el-col> | |
| 129 | <el-col :span="24" v-if="form.menuType != 'F'"> | |
| 130 | <el-form-item label="菜单图标" prop="icon"> | |
| 131 | <el-popover | |
| 132 | placement="bottom-start" | |
| 133 | width="460" | |
| 134 | trigger="click" | |
| 135 | @show="$refs['iconSelect'].reset()" | |
| 136 | > | |
| 137 | <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" /> | |
| 138 | <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly> | |
| 139 | <svg-icon | |
| 140 | v-if="form.icon" | |
| 141 | slot="prefix" | |
| 142 | :icon-class="form.icon" | |
| 143 | style="width: 25px;" | |
| 144 | /> | |
| 145 | <i v-else slot="prefix" class="el-icon-search el-input__icon" /> | |
| 146 | </el-input> | |
| 147 | </el-popover> | |
| 148 | </el-form-item> | |
| 149 | </el-col> | |
| 150 | <el-col :span="12"> | |
| 151 | <el-form-item label="菜单名称" prop="menuName"> | |
| 152 | <el-input v-model="form.menuName" placeholder="请输入菜单名称" /> | |
| 153 | </el-form-item> | |
| 154 | </el-col> | |
| 155 | <el-col :span="12"> | |
| 156 | <el-form-item label="显示排序" prop="orderNum"> | |
| 157 | <el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> | |
| 158 | </el-form-item> | |
| 159 | </el-col> | |
| 160 | <el-col :span="12" v-if="form.menuType != 'F'"> | |
| 161 | <el-form-item prop="isFrame"> | |
| 162 | <span slot="label"> | |
| 163 | <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top"> | |
| 164 | <i class="el-icon-question"></i> | |
| 165 | </el-tooltip> | |
| 166 | 是否外链 | |
| 167 | </span> | |
| 168 | <el-radio-group v-model="form.isFrame"> | |
| 169 | <el-radio label="0">是</el-radio> | |
| 170 | <el-radio label="1">否</el-radio> | |
| 171 | </el-radio-group> | |
| 172 | </el-form-item> | |
| 173 | </el-col> | |
| 174 | <el-col :span="12" v-if="form.menuType != 'F'"> | |
| 175 | <el-form-item prop="path"> | |
| 176 | <span slot="label"> | |
| 177 | <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top"> | |
| 178 | <i class="el-icon-question"></i> | |
| 179 | </el-tooltip> | |
| 180 | 路由地址 | |
| 181 | </span> | |
| 182 | <el-input v-model="form.path" placeholder="请输入路由地址" /> | |
| 183 | </el-form-item> | |
| 184 | </el-col> | |
| 185 | <el-col :span="12" v-if="form.menuType == 'C'"> | |
| 186 | <el-form-item prop="component"> | |
| 187 | <span slot="label"> | |
| 188 | <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top"> | |
| 189 | <i class="el-icon-question"></i> | |
| 190 | </el-tooltip> | |
| 191 | 组件路径 | |
| 192 | </span> | |
| 193 | <el-input v-model="form.component" placeholder="请输入组件路径" /> | |
| 194 | </el-form-item> | |
| 195 | </el-col> | |
| 196 | <el-col :span="12" v-if="form.menuType != 'M'"> | |
| 197 | <el-form-item prop="perms"> | |
| 198 | <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" /> | |
| 199 | <span slot="label"> | |
| 200 | <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top"> | |
| 201 | <i class="el-icon-question"></i> | |
| 202 | </el-tooltip> | |
| 203 | 权限字符 | |
| 204 | </span> | |
| 205 | </el-form-item> | |
| 206 | </el-col> | |
| 207 | <el-col :span="12" v-if="form.menuType == 'C'"> | |
| 208 | <el-form-item prop="query"> | |
| 209 | <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" /> | |
| 210 | <span slot="label"> | |
| 211 | <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top"> | |
| 212 | <i class="el-icon-question"></i> | |
| 213 | </el-tooltip> | |
| 214 | 路由参数 | |
| 215 | </span> | |
| 216 | </el-form-item> | |
| 217 | </el-col> | |
| 218 | <el-col :span="12" v-if="form.menuType == 'C'"> | |
| 219 | <el-form-item prop="isCache"> | |
| 220 | <span slot="label"> | |
| 221 | <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top"> | |
| 222 | <i class="el-icon-question"></i> | |
| 223 | </el-tooltip> | |
| 224 | 是否缓存 | |
| 225 | </span> | |
| 226 | <el-radio-group v-model="form.isCache"> | |
| 227 | <el-radio label="0">缓存</el-radio> | |
| 228 | <el-radio label="1">不缓存</el-radio> | |
| 229 | </el-radio-group> | |
| 230 | </el-form-item> | |
| 231 | </el-col> | |
| 232 | <el-col :span="12" v-if="form.menuType != 'F'"> | |
| 233 | <el-form-item prop="visible"> | |
| 234 | <span slot="label"> | |
| 235 | <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top"> | |
| 236 | <i class="el-icon-question"></i> | |
| 237 | </el-tooltip> | |
| 238 | 显示状态 | |
| 239 | </span> | |
| 240 | <el-radio-group v-model="form.visible"> | |
| 241 | <el-radio | |
| 242 | v-for="dict in dict.type.sys_show_hide" | |
| 243 | :key="dict.value" | |
| 244 | :label="dict.value" | |
| 245 | >{{dict.label}}</el-radio> | |
| 246 | </el-radio-group> | |
| 247 | </el-form-item> | |
| 248 | </el-col> | |
| 249 | <el-col :span="12"> | |
| 250 | <el-form-item prop="status"> | |
| 251 | <span slot="label"> | |
| 252 | <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top"> | |
| 253 | <i class="el-icon-question"></i> | |
| 254 | </el-tooltip> | |
| 255 | 菜单状态 | |
| 256 | </span> | |
| 257 | <el-radio-group v-model="form.status"> | |
| 258 | <el-radio | |
| 259 | v-for="dict in dict.type.sys_normal_disable" | |
| 260 | :key="dict.value" | |
| 261 | :label="dict.value" | |
| 262 | >{{dict.label}}</el-radio> | |
| 263 | </el-radio-group> | |
| 264 | </el-form-item> | |
| 265 | </el-col> | |
| 266 | </el-row> | |
| 267 | </el-form> | |
| 268 | <div slot="footer" class="dialog-footer"> | |
| 269 | <el-button type="primary" @click="submitForm">确 定</el-button> | |
| 270 | <el-button @click="cancel">取 消</el-button> | |
| 271 | </div> | |
| 272 | </el-dialog> | |
| 273 | </div> | |
| 274 | </template> | |
| 275 | ||
| 276 | <script> | |
| 277 | import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu"; | |
| 278 | import Treeselect from "@riophae/vue-treeselect"; | |
| 279 | import "@riophae/vue-treeselect/dist/vue-treeselect.css"; | |
| 280 | import IconSelect from "@/components/IconSelect"; | |
| 281 | ||
| 282 | export default { | |
| 283 | name: "Menu", | |
| 284 | dicts: ['sys_show_hide', 'sys_normal_disable'], | |
| 285 | components: { Treeselect, IconSelect }, | |
| 286 | data() { | |
| 287 | return { | |
| 288 | // 遮罩层 | |
| 289 | loading: true, | |
| 290 | // 显示搜索条件 | |
| 291 | showSearch: true, | |
| 292 | // 菜单表格树数据 | |
| 293 | menuList: [], | |
| 294 | // 菜单树选项 | |
| 295 | menuOptions: [], | |
| 296 | // 弹出层标题 | |
| 297 | title: "", | |
| 298 | // 是否显示弹出层 | |
| 299 | open: false, | |
| 300 | // 是否展开，默认全部折叠 | |
| 301 | isExpandAll: false, | |
| 302 | // 重新渲染表格状态 | |
| 303 | refreshTable: true, | |
| 304 | // 查询参数 | |
| 305 | queryParams: { | |
| 306 | menuName: undefined, | |
| 307 | visible: undefined | |
| 308 | }, | |
| 309 | // 表单参数 | |
| 310 | form: {}, | |
| 311 | // 表单校验 | |
| 312 | rules: { | |
| 313 | menuName: [ | |
| 314 | { required: true, message: "菜单名称不能为空", trigger: "blur" } | |
| 315 | ], | |
| 316 | orderNum: [ | |
| 317 | { required: true, message: "菜单顺序不能为空", trigger: "blur" } | |
| 318 | ], | |
| 319 | path: [ | |
| 320 | { required: true, message: "路由地址不能为空", trigger: "blur" } | |
| 321 | ] | |
| 322 | } | |
| 323 | }; | |
| 324 | }, | |
| 325 | created() { | |
| 326 | this.getList(); | |
| 327 | }, | |
| 328 | methods: { | |
| 329 | // 选择图标 | |
| 330 | selected(name) { | |
| 331 | this.form.icon = name; | |
| 332 | }, | |
| 333 | /** 查询菜单列表 */ | |
| 334 | getList() { | |
| 335 | this.loading = true; | |
| 336 | listMenu(this.queryParams).then(response => { | |
| 337 | this.menuList = this.handleTree(response.data, "menuId"); | |
| 338 | this.loading = false; | |
| 339 | }); | |
| 340 | }, | |
| 341 | /** 转换菜单数据结构 */ | |
| 342 | normalizer(node) { | |
| 343 | if (node.children && !node.children.length) { | |
| 344 | delete node.children; | |
| 345 | } | |
| 346 | return { | |
| 347 | id: node.menuId, | |
| 348 | label: node.menuName, | |
| 349 | children: node.children | |
| 350 | }; | |
| 351 | }, | |
| 352 | /** 查询菜单下拉树结构 */ | |
| 353 | getTreeselect() { | |
| 354 | listMenu().then(response => { | |
| 355 | this.menuOptions = []; | |
| 356 | const menu = { menuId: 0, menuName: '主类目', children: [] }; | |
| 357 | menu.children = this.handleTree(response.data, "menuId"); | |
| 358 | this.menuOptions.push(menu); | |
| 359 | }); | |
| 360 | }, | |
| 361 | // 取消按钮 | |
| 362 | cancel() { | |
| 363 | this.open = false; | |
| 364 | this.reset(); | |
| 365 | }, | |
| 366 | // 表单重置 | |
| 367 | reset() { | |
| 368 | this.form = { | |
| 369 | menuId: undefined, | |
| 370 | parentId: 0, | |
| 371 | menuName: undefined, | |
| 372 | icon: undefined, | |
| 373 | menuType: "M", | |
| 374 | orderNum: undefined, | |
| 375 | isFrame: "1", | |
| 376 | isCache: "0", | |
| 377 | visible: "0", | |
| 378 | status: "0" | |
| 379 | }; | |
| 380 | this.resetForm("form"); | |
| 381 | }, | |
| 382 | /** 搜索按钮操作 */ | |
| 383 | handleQuery() { | |
| 384 | this.getList(); | |
| 385 | }, | |
| 386 | /** 重置按钮操作 */ | |
| 387 | resetQuery() { | |
| 388 | this.resetForm("queryForm"); | |
| 389 | this.handleQuery(); | |
| 390 | }, | |
| 391 | /** 新增按钮操作 */ | |
| 392 | handleAdd(row) { | |
| 393 | this.reset(); | |
| 394 | this.getTreeselect(); | |
| 395 | if (row != null && row.menuId) { | |
| 396 | this.form.parentId = row.menuId; | |
| 397 | } else { | |
| 398 | this.form.parentId = 0; | |
| 399 | } | |
| 400 | this.open = true; | |
| 401 | this.title = "添加菜单"; | |
| 402 | }, | |
| 403 | /** 展开/折叠操作 */ | |
| 404 | toggleExpandAll() { | |
| 405 | this.refreshTable = false; | |
| 406 | this.isExpandAll = !this.isExpandAll; | |
| 407 | this.$nextTick(() => { | |
| 408 | this.refreshTable = true; | |
| 409 | }); | |
| 410 | }, | |
| 411 | /** 修改按钮操作 */ | |
| 412 | handleUpdate(row) { | |
| 413 | this.reset(); | |
| 414 | this.getTreeselect(); | |
| 415 | getMenu(row.menuId).then(response => { | |
| 416 | this.form = response.data; | |
| 417 | this.open = true; | |
| 418 | this.title = "修改菜单"; | |
| 419 | }); | |
| 420 | }, | |
| 421 | /** 提交按钮 */ | |
| 422 | submitForm: function() { | |
| 423 | this.$refs["form"].validate(valid => { | |
| 424 | if (valid) { | |
| 425 | if (this.form.menuId != undefined) { | |
| 426 | updateMenu(this.form).then(response => { | |
| 427 | this.$modal.msgSuccess("修改成功"); | |
| 428 | this.open = false; | |
| 429 | this.getList(); | |
| 430 | }); | |
| 431 | } else { | |
| 432 | addMenu(this.form).then(response => { | |
| 433 | this.$modal.msgSuccess("新增成功"); | |
| 434 | this.open = false; | |
| 435 | this.getList(); | |
| 436 | }); | |
| 437 | } | |
| 438 | } | |
| 439 | }); | |
| 440 | }, | |
| 441 | /** 删除按钮操作 */ | |
| 442 | handleDelete(row) { | |
| 443 | this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() { | |
| 444 | return delMenu(row.menuId); | |
| 445 | }).then(() => { | |
| 446 | this.getList(); | |
| 447 | this.$modal.msgSuccess("删除成功"); | |
| 448 | }).catch(() => {}); | |
| 449 | } | |
| 450 | } | |
| 451 | }; | |
| 452 | </script> | |
