| | |
| | | v-model="queryParams.menuName"
|
| | | placeholder="请输入菜单名称"
|
| | | clearable
|
| | | size="small"
|
| | | @keyup.enter="handleQuery"
|
| | | />
|
| | | </el-form-item>
|
| | | <el-form-item label="状态" prop="status">
|
| | | <el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small">
|
| | | <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
|
| | | <el-option
|
| | | v-for="dict in sys_normal_disable"
|
| | | :key="dict.value"
|
| | |
| | | </el-select>
|
| | | </el-form-item>
|
| | | <el-form-item>
|
| | | <el-button type="primary" icon="Search" size="mini" @click="handleQuery">搜索</el-button>
|
| | | <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
|
| | | <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
| | | <el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
| | | </el-form-item>
|
| | | </el-form>
|
| | |
|
| | |
| | | type="primary"
|
| | | plain
|
| | | icon="Plus"
|
| | | size="mini"
|
| | | @click="handleAdd"
|
| | | v-hasPermi="['system:menu:add']"
|
| | | >新增</el-button>
|
| | |
| | | type="info"
|
| | | plain
|
| | | icon="Sort"
|
| | | size="mini"
|
| | | @click="toggleExpandAll"
|
| | | >展开/折叠</el-button>
|
| | | </el-col>
|
| | |
| | | <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
|
| | | <template #default="scope">
|
| | | <el-button
|
| | | size="mini"
|
| | | type="text"
|
| | | icon="Edit"
|
| | | @click="handleUpdate(scope.row)"
|
| | | v-hasPermi="['system:menu:edit']"
|
| | | >修改</el-button>
|
| | | <el-button
|
| | | size="mini"
|
| | | type="text"
|
| | | icon="Plus"
|
| | | @click="handleAdd(scope.row)"
|
| | | v-hasPermi="['system:menu:add']"
|
| | | >新增</el-button>
|
| | | <el-button
|
| | | size="mini"
|
| | | type="text"
|
| | | icon="Delete"
|
| | | @click="handleDelete(scope.row)"
|
| | |
| | | </el-table>
|
| | |
|
| | | <!-- 添加或修改菜单对话框 -->
|
| | | <el-dialog :title="title" v-model="open" width="680px" append-to-body>
|
| | | <el-dialog :title="title" v-model="open" width="680px" :before-close="handleClose" append-to-body>
|
| | | <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
|
| | | <el-row>
|
| | | <el-col :span="24">
|
| | | <el-form-item label="上级菜单">
|
| | | <tree-select
|
| | | v-model:value="form.parentId"
|
| | | :options="menuOptions"
|
| | | :objMap="{ value: 'menuId', label: 'menuName', children: 'children' }"
|
| | | <el-tree-select
|
| | | v-model="form.parentId"
|
| | | :data="menuOptions"
|
| | | :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
|
| | | value-key="menuId"
|
| | | placeholder="选择上级菜单"
|
| | | check-strictly
|
| | | />
|
| | | </el-form-item>
|
| | | </el-col>
|
| | |
| | | </el-form-item>
|
| | | </el-col>
|
| | | <el-col :span="24" v-if="form.menuType != 'F'">
|
| | | <el-form-item label="菜单图标">
|
| | | <el-form-item label="菜单图标" prop="icon">
|
| | | <el-popover
|
| | | placement="bottom-start"
|
| | | :width="540"
|
| | |
| | | trigger="click"
|
| | | @show="showSelectIcon"
|
| | | >
|
| | | <icon-select ref="iconSelectRef" @selected="selected" />
|
| | | <template #reference>
|
| | | <el-input v-model="form.icon" placeholder="点击选择图标" readonly>
|
| | | <el-input v-model="form.icon" placeholder="点击选择图标" @click="showSelectIcon" readonly>
|
| | | <template #prefix>
|
| | | <svg-icon
|
| | | v-if="form.icon"
|
| | |
| | | class="el-input__icon"
|
| | | style="height: 32px;width: 16px;"
|
| | | />
|
| | | <i v-else class="el-icon-search el-input__icon" />
|
| | | <el-icon v-else style="height: 32px;width: 16px;"><search /></el-icon>
|
| | | </template>
|
| | | </el-input>
|
| | | </template>
|
| | | <icon-select ref="iconSelectRef" @selected="selected" />
|
| | | </el-popover>
|
| | | </el-form-item>
|
| | | </el-col>
|
| | |
| | | <template #label>
|
| | | <span>
|
| | | <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
|
| | | <i class="el-icon-question"></i>
|
| | | <el-icon><question-filled /></el-icon>
|
| | | </el-tooltip>是否外链
|
| | | </span>
|
| | | </template>
|
| | |
| | | <template #label>
|
| | | <span>
|
| | | <el-tooltip content="访问的路由地址,如:`user`,如外网地址需内链访问则以`http(s)://`开头" placement="top">
|
| | | <i class="el-icon-question"></i>
|
| | | <el-icon><question-filled /></el-icon>
|
| | | </el-tooltip>
|
| | | 路由地址
|
| | | </span>
|
| | |
| | | <template #label>
|
| | | <span>
|
| | | <el-tooltip content="访问的组件路径,如:`system/user/index`,默认在`views`目录下" placement="top">
|
| | | <i class="el-icon-question"></i>
|
| | | <el-icon><question-filled /></el-icon>
|
| | | </el-tooltip>
|
| | | 组件路径
|
| | | </span>
|
| | |
| | | <template #label>
|
| | | <span>
|
| | | <el-tooltip content="控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
|
| | | <i class="el-icon-question"></i>
|
| | | <el-icon><question-filled /></el-icon>
|
| | | </el-tooltip>
|
| | | 权限字符
|
| | | </span>
|
| | |
| | | <template #label>
|
| | | <span>
|
| | | <el-tooltip content='访问路由的默认传递参数,如:`{"id": 1, "name": "ry"}`' placement="top">
|
| | | <i class="el-icon-question"></i>
|
| | | <el-icon><question-filled /></el-icon>
|
| | | </el-tooltip>
|
| | | 路由参数
|
| | | </span>
|
| | |
| | | <template #label>
|
| | | <span>
|
| | | <el-tooltip content="选择是则会被`keep-alive`缓存,需要匹配组件的`name`和地址保持一致" placement="top">
|
| | | <i class="el-icon-question"></i>
|
| | | <el-icon><question-filled /></el-icon>
|
| | | </el-tooltip>
|
| | | 是否缓存
|
| | | </span>
|
| | |
| | | <template #label>
|
| | | <span>
|
| | | <el-tooltip content="选择隐藏则路由将不会出现在侧边栏,但仍然可以访问" placement="top">
|
| | | <i class="el-icon-question"></i>
|
| | | <el-icon><question-filled /></el-icon>
|
| | | </el-tooltip>
|
| | | 显示状态
|
| | | </span>
|
| | |
| | | <template #label>
|
| | | <span>
|
| | | <el-tooltip content="选择停用则路由将不会出现在侧边栏,也不能被访问" placement="top">
|
| | | <i class="el-icon-question"></i>
|
| | | <el-icon><question-filled /></el-icon>
|
| | | </el-tooltip>
|
| | | 菜单状态
|
| | | </span>
|
| | |
| | | });
|
| | | }
|
| | | /** 查询菜单下拉树结构 */
|
| | | async function getTreeselect() {
|
| | | function getTreeselect() {
|
| | | menuOptions.value = [];
|
| | | await listMenu().then(response => {
|
| | | listMenu().then(response => {
|
| | | const menu = { menuId: 0, menuName: "主类目", children: [] };
|
| | | menu.children = proxy.handleTree(response.data, "menuId");
|
| | | menuOptions.value.push(menu);
|
| | |
| | | form.value.icon = name;
|
| | | showChooseIcon.value = false;
|
| | | }
|
| | | /** 关闭弹窗隐藏图标选择 */
|
| | | function handleClose() {
|
| | | cancel();
|
| | | showChooseIcon.value = false;
|
| | | }
|
| | | /** 搜索按钮操作 */
|
| | | function handleQuery() {
|
| | | getList();
|
| | |
| | | handleQuery();
|
| | | }
|
| | | /** 新增按钮操作 */
|
| | | async function handleAdd(row) {
|
| | | function handleAdd(row) {
|
| | | reset();
|
| | | await getTreeselect();
|
| | | getTreeselect();
|
| | | if (row != null && row.menuId) {
|
| | | form.value.parentId = row.menuId;
|
| | | } else {
|