|
|
@ -1,31 +1,32 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="app-container">
|
|
|
|
<div class="app-container">
|
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
|
|
|
<el-card shadow="never">
|
|
|
|
<el-form-item label="菜单名称" prop="menuName">
|
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
|
|
|
<el-input
|
|
|
|
<el-form-item label="菜单名称" prop="menuName">
|
|
|
|
v-model="queryParams.menuName"
|
|
|
|
<el-input
|
|
|
|
placeholder="请输入菜单名称"
|
|
|
|
v-model="queryParams.menuName"
|
|
|
|
clearable
|
|
|
|
placeholder="请输入菜单名称"
|
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
|
clearable
|
|
|
|
/>
|
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="状态" prop="status">
|
|
|
|
|
|
|
|
<el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
|
|
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
|
|
v-for="dict in dict.type.sys_normal_disable"
|
|
|
|
|
|
|
|
:key="dict.value"
|
|
|
|
|
|
|
|
:label="dict.label"
|
|
|
|
|
|
|
|
:value="dict.value"
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="状态" prop="status">
|
|
|
|
<el-form-item>
|
|
|
|
<el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
|
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
|
<el-option
|
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
|
v-for="dict in dict.type.sys_normal_disable"
|
|
|
|
</el-form-item>
|
|
|
|
:key="dict.value"
|
|
|
|
</el-form>
|
|
|
|
:label="dict.label"
|
|
|
|
|
|
|
|
:value="dict.value"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item>
|
|
|
|
|
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
|
|
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
|
<!-- <el-col :span="1.5">-->
|
|
|
|
<!-- <el-col :span="1.5">-->
|
|
|
|
<!-- <el-button-->
|
|
|
|
<!-- <el-button-->
|
|
|
|
<!-- type="primary"-->
|
|
|
|
<!-- type="primary"-->
|
|
|
@ -55,6 +56,7 @@
|
|
|
|
row-key="menuId"
|
|
|
|
row-key="menuId"
|
|
|
|
:default-expand-all="isExpandAll"
|
|
|
|
:default-expand-all="isExpandAll"
|
|
|
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
|
|
|
|
|
:stripe="true"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<el-table-column prop="menuName" align="left" label="菜单名称" :show-overflow-tooltip="true"></el-table-column>
|
|
|
|
<el-table-column prop="menuName" align="left" label="菜单名称" :show-overflow-tooltip="true"></el-table-column>
|
|
|
|
<el-table-column prop="icon" label="图标" align="center" width="100">
|
|
|
|
<el-table-column prop="icon" label="图标" align="center" width="100">
|
|
|
@ -101,47 +103,63 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 添加或修改菜单对话框 -->
|
|
|
|
<!-- 添加或修改菜单对话框 -->
|
|
|
|
<el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
|
|
|
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-position="top">
|
|
|
|
<el-row>
|
|
|
|
<!-- <el-row>-->
|
|
|
|
<el-col :span="24">
|
|
|
|
<!-- <el-col :span="24">-->
|
|
|
|
<el-form-item label="菜单图标" prop="icon">
|
|
|
|
<!-- <el-form-item label="上级菜单" prop="parentId">-->
|
|
|
|
<el-popover
|
|
|
|
<!-- <treeselect-->
|
|
|
|
placement="bottom-start"
|
|
|
|
<!-- v-model="form.parentId"-->
|
|
|
|
width="460"
|
|
|
|
<!-- :options="menuOptions"-->
|
|
|
|
trigger="click"
|
|
|
|
<!-- :normalizer="normalizer"-->
|
|
|
|
@show="$refs['iconSelect'].reset()"
|
|
|
|
<!-- :show-count="true"-->
|
|
|
|
>
|
|
|
|
<!-- placeholder="请选择上级菜单"-->
|
|
|
|
<IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
|
|
|
|
<!-- />-->
|
|
|
|
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
<svg-icon
|
|
|
|
<!-- </el-col>-->
|
|
|
|
v-if="form.icon"
|
|
|
|
<el-form-item label="菜单图标" prop="icon">
|
|
|
|
slot="prefix"
|
|
|
|
<el-popover
|
|
|
|
:icon-class="form.icon"
|
|
|
|
placement="bottom-start"
|
|
|
|
style="width: 25px;"
|
|
|
|
width="460"
|
|
|
|
/>
|
|
|
|
trigger="click"
|
|
|
|
<i v-else slot="prefix" class="el-icon-search el-input__icon" />
|
|
|
|
@show="$refs['iconSelect'].reset()"
|
|
|
|
</el-input>
|
|
|
|
>
|
|
|
|
</el-popover>
|
|
|
|
<IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
|
|
|
|
</el-form-item>
|
|
|
|
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
|
|
|
|
</el-col>
|
|
|
|
<svg-icon
|
|
|
|
<el-col :span="12">
|
|
|
|
v-if="form.icon"
|
|
|
|
<el-form-item label="菜单名称" prop="menuName">
|
|
|
|
slot="prefix"
|
|
|
|
<el-input v-model="form.menuName" placeholder="请输入菜单名称" />
|
|
|
|
:icon-class="form.icon"
|
|
|
|
</el-form-item>
|
|
|
|
style="width: 25px;"
|
|
|
|
</el-col>
|
|
|
|
/>
|
|
|
|
<el-col :span="12">
|
|
|
|
<i v-else slot="prefix" class="el-icon-search el-input__icon" />
|
|
|
|
<el-form-item label="显示排序" prop="orderNum">
|
|
|
|
</el-input>
|
|
|
|
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
|
|
|
|
</el-popover>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
<el-form-item label="菜单名称" prop="menuName">
|
|
|
|
</el-row>
|
|
|
|
<el-input v-model="form.menuName" placeholder="请输入菜单名称" />
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="显示排序" prop="orderNum">
|
|
|
|
|
|
|
|
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" style="width: 100%;" />
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<!-- <el-col :span="12" v-if="form.menuType != 'F'">-->
|
|
|
|
|
|
|
|
<!-- <el-form-item prop="isFrame">-->
|
|
|
|
|
|
|
|
<!-- <span slot="label">-->
|
|
|
|
|
|
|
|
<!-- <el-radio-group v-model="form.isFrame">-->
|
|
|
|
|
|
|
|
<!-- <el-radio label="1">是</el-radio>-->
|
|
|
|
|
|
|
|
<!-- <el-radio label="0">否</el-radio>-->
|
|
|
|
|
|
|
|
<!-- </el-radio-group>-->
|
|
|
|
|
|
|
|
<!-- </span>-->
|
|
|
|
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
|
|
|
|
<!-- </el-col>-->
|
|
|
|
|
|
|
|
<!-- </el-row>-->
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
|
<el-button @click="cancel" icon="el-icon-close">取 消</el-button>
|
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
|
<el-button type="primary" @click="submitForm" icon="el-icon-check">确 定</el-button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -293,7 +311,7 @@ export default {
|
|
|
|
getMenu(row.menuId).then(response => {
|
|
|
|
getMenu(row.menuId).then(response => {
|
|
|
|
this.form = response.data;
|
|
|
|
this.form = response.data;
|
|
|
|
this.open = true;
|
|
|
|
this.open = true;
|
|
|
|
this.title = "修改菜单";
|
|
|
|
this.title = `修改菜单 - ${row.menuName}`;
|
|
|
|
this.isEdit = true;
|
|
|
|
this.isEdit = true;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -329,3 +347,83 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
/* 卡片化布局美化 */
|
|
|
|
|
|
|
|
.el-card {
|
|
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
|
|
border: 1px solid #ebeef5;
|
|
|
|
|
|
|
|
padding: 16px;
|
|
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 搜索表单横向排列,增加间距 */
|
|
|
|
|
|
|
|
.app-container .el-form {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
column-gap: 12px;
|
|
|
|
|
|
|
|
row-gap: 8px;
|
|
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 搜索表单标签加粗 */
|
|
|
|
|
|
|
|
.el-form-item__label {
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 斑马纹表格行悬停高亮 */
|
|
|
|
|
|
|
|
.el-table__body tr:hover > td {
|
|
|
|
|
|
|
|
background-color: #f0f9ff !important;
|
|
|
|
|
|
|
|
color: #409EFF;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 表格标题加粗 */
|
|
|
|
|
|
|
|
.el-table th {
|
|
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
|
|
color: #303133;
|
|
|
|
|
|
|
|
background-color: #fafafa;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 操作按钮颜色 */
|
|
|
|
|
|
|
|
.el-button--text {
|
|
|
|
|
|
|
|
color: #409EFF;
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.el-button--text:hover {
|
|
|
|
|
|
|
|
color: #66b1ff;
|
|
|
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 对话框标题加粗 */
|
|
|
|
|
|
|
|
.el-dialog__title {
|
|
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
|
|
color: #303133;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 对话框表单项上下留白 */
|
|
|
|
|
|
|
|
.el-dialog .el-form-item {
|
|
|
|
|
|
|
|
margin-bottom: 18px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 对话框底部按钮右对齐,并增加间距 */
|
|
|
|
|
|
|
|
.dialog-footer {
|
|
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.el-button + .el-button {
|
|
|
|
|
|
|
|
margin-left: 12px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 确认按钮更突出 */
|
|
|
|
|
|
|
|
.dialog-footer .el-button--primary {
|
|
|
|
|
|
|
|
background-color: #409EFF;
|
|
|
|
|
|
|
|
border-color: #409EFF;
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.dialog-footer .el-button--primary:hover {
|
|
|
|
|
|
|
|
background-color: #66b1ff;
|
|
|
|
|
|
|
|
border-color: #66b1ff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|