| | |
| | | v-model="queryParams.menuName"
|
| | | placeholder="请输入菜单名称"
|
| | | clearable
|
| | | style="width: 200px"
|
| | | @keyup.enter="handleQuery"
|
| | | />
|
| | | </el-form-item>
|
| | | <el-form-item label="状态" prop="status">
|
| | | <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
|
| | | <el-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
|
| | | <el-option
|
| | | v-for="dict in sys_normal_disable"
|
| | | :key="dict.value"
|
| | |
| | | <span>{{ parseTime(scope.row.createTime) }}</span>
|
| | | </template>
|
| | | </el-table-column>
|
| | | <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
|
| | | <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
|
| | | <template #default="scope">
|
| | | <el-button
|
| | | type="text"
|
| | | icon="Edit"
|
| | | @click="handleUpdate(scope.row)"
|
| | | v-hasPermi="['system:menu:edit']"
|
| | | >修改</el-button>
|
| | | <el-button
|
| | | type="text"
|
| | | icon="Plus"
|
| | | @click="handleAdd(scope.row)"
|
| | | v-hasPermi="['system:menu:add']"
|
| | | >新增</el-button>
|
| | | <el-button
|
| | | type="text"
|
| | | icon="Delete"
|
| | | @click="handleDelete(scope.row)"
|
| | | v-hasPermi="['system:menu:remove']"
|
| | | >删除</el-button>
|
| | | <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
|
| | | <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
|
| | | <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
|
| | | </template>
|
| | | </el-table-column>
|
| | | </el-table>
|
| | |
|
| | | <!-- 添加或修改菜单对话框 -->
|
| | | <el-dialog :title="title" v-model="open" width="680px" :before-close="handleClose" append-to-body>
|
| | | <el-dialog :title="title" v-model="open" width="680px" 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>
|
| | |
| | | @show="showSelectIcon"
|
| | | >
|
| | | <template #reference>
|
| | | <el-input v-model="form.icon" placeholder="点击选择图标" @click="showSelectIcon" readonly>
|
| | | <el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" v-click-outside="hideSelectIcon" readonly>
|
| | | <template #prefix>
|
| | | <svg-icon
|
| | | v-if="form.icon"
|
| | |
| | | import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
|
| | | import SvgIcon from "@/components/SvgIcon";
|
| | | import IconSelect from "@/components/IconSelect";
|
| | | import { ClickOutside as vClickOutside } from 'element-plus'
|
| | |
|
| | | const { proxy } = getCurrentInstance();
|
| | | const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
|
| | |
| | | });
|
| | | }
|
| | | /** 查询菜单下拉树结构 */
|
| | | 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 hideSelectIcon(event) {
|
| | | var elem = event.relatedTarget || event.srcElement || event.target || event.currentTarget;
|
| | | var className = elem.className;
|
| | | if (className !== "el-input__inner") {
|
| | | showChooseIcon.value = false;
|
| | | }
|
| | | }
|
| | | /** 搜索按钮操作 */
|
| | | function handleQuery() {
|
| | |
| | | handleQuery();
|
| | | }
|
| | | /** 新增按钮操作 */
|
| | | async function handleAdd(row) {
|
| | | function handleAdd(row) {
|
| | | reset();
|
| | | await getTreeselect();
|
| | | getTreeselect();
|
| | | if (row != null && row.menuId) {
|
| | | form.value.parentId = row.menuId;
|
| | | } else {
|