|
|
@@ -1,78 +1,101 @@
|
|
|
<template>
|
|
|
- <div class="mainBox">
|
|
|
- <!--搜索功能 start------------------------------------------------------------>
|
|
|
- <div class="layerBoxNoBg">
|
|
|
- <div>
|
|
|
- <el-button type="primary" @click="openWindow">添加菜单</el-button>
|
|
|
+ <div class="mainBox">
|
|
|
+ <!--搜索功能 start------------------------------------------------------------>
|
|
|
+ <div class="layerBoxNoBg">
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="openWindow">添加菜单</el-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
-
|
|
|
+ <!--搜索功能 end------------------------------------------------------------>
|
|
|
+
|
|
|
+ <!--表格内容 start------------------------------------------------------------>
|
|
|
+ <div class="layerBox">
|
|
|
+ <tableTitle :name="tableDivTitle"/>
|
|
|
+ <el-row>
|
|
|
+ <template>
|
|
|
+ <!--设置default-expand-all将展开全部-->
|
|
|
+ <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
|
|
|
+ <el-table-column
|
|
|
+ prop="id"
|
|
|
+ label="id"
|
|
|
+ sortable
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="label"
|
|
|
+ label="菜单名称"
|
|
|
+ sortable
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="url"
|
|
|
+ label="路由地址">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="200" header-align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="listBtnBox">
|
|
|
+ <div class="listDeleteBtn" @click="deleteRow(scope.row.id)"><i class="el-icon-delete"></i>删除</div>
|
|
|
+ <div class="listEditBtn" @click="editRow(scope.row)"><i class="el-icon-edit-outline"></i>编辑</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </template>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!--搜索功能 end------------------------------------------------------------>
|
|
|
-
|
|
|
- <!--表格内容 start------------------------------------------------------------>
|
|
|
- <div class="layerBox">
|
|
|
- <tableTitle :name="tableDivTitle"/>
|
|
|
- <el-row>
|
|
|
- <template>
|
|
|
- <!--设置default-expand-all将展开全部-->
|
|
|
- <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
|
|
|
- <el-table-column
|
|
|
- prop="id"
|
|
|
- label="id"
|
|
|
- sortable
|
|
|
- width="180">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="label"
|
|
|
- label="菜单名称"
|
|
|
- sortable
|
|
|
- width="180">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="url"
|
|
|
- label="路由地址">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column fixed="right" label="操作" width="200" header-align="center">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="listBtnBox">
|
|
|
- <div class="listDeleteBtn" @click="deleteRow(scope.row.id)"><i class="el-icon-delete"></i>删除</div>
|
|
|
- <div class="listEditBtn" @click="editRow(scope.row)"><i class="el-icon-edit-outline"></i>编辑</div>
|
|
|
+ <!--表格内容 end------------------------------------------------------------>
|
|
|
+
|
|
|
+ <!--弹出框 start------------------------------------------------------------>
|
|
|
+ <el-dialog :title="editId ? '编辑菜单' : '添加菜单'" :visible.sync="windowStatus" :close-on-click-modal="false">
|
|
|
+ <el-form :model="form" ref="form" :rules="formRules" label-position="left">
|
|
|
+ <div class="formDiv">
|
|
|
+ <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="label" class="custom-align-right">
|
|
|
+ <el-input v-model="form.label" autocomplete="off" placeholder="请输入菜单名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否为顶级菜单" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
+ <el-radio v-model="radio" label="1">是</el-radio>
|
|
|
+ <el-radio v-model="radio" label="2">否</el-radio>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="菜单路由" :label-width="formLabelWidth" prop="" class="custom-align-right" v-if="radio === '2'">
|
|
|
+ <el-input v-model="form.url" autocomplete="off" placeholder="请输入菜单路由"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="父级菜单名称" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right" v-if="radio === '2'">
|
|
|
+ <el-cascader :key="parentKey" v-model="form.pid_arr" :props="{checkStrictly:true}" :options="pidArrData" clearable></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="默认图标" :label-width="formLabelWidth" prop="icon" class="custom-align-right" v-if="radio == '1'">
|
|
|
+ <!--图片上传组件 start ------------------------------------------------------------>
|
|
|
+ <div class="uploaderBox">
|
|
|
+ <div class="avatar-upload-container" @mouseenter="hovering = true" @mouseleave="hovering = false">
|
|
|
+ <!-- 上传组件 -->
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
|
|
|
+ <!-- 预览图片 -->
|
|
|
+ <img v-if="iconSrc" :src="iconSrc" class="avatar">
|
|
|
+ <div v-else class="chooseImgDiv">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/public/upload/noImage.png">
|
|
|
+ <div>选择图片</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <!-- 删除按钮，当鼠标悬浮时显示 -->
|
|
|
+ <div v-if="hovering && iconSrc" class="delete-button" @click="handleDelete">
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </template>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <!--表格内容 end------------------------------------------------------------>
|
|
|
-
|
|
|
- <!--弹出框 start------------------------------------------------------------>
|
|
|
- <el-dialog :title="editId ? '编辑菜单' : '添加菜单'" :visible.sync="windowStatus" :close-on-click-modal="false">
|
|
|
- <el-form :model="form" ref="form" :rules="formRules" label-position="left">
|
|
|
- <div class="formDiv">
|
|
|
- <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="label" class="custom-align-right">
|
|
|
- <el-input v-model="form.label" autocomplete="off" placeholder="请输入菜单名称"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="是否为顶级菜单" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
- <el-radio v-model="radio" label="1">是</el-radio>
|
|
|
- <el-radio v-model="radio" label="2">否</el-radio>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="菜单路由" :label-width="formLabelWidth" prop="" class="custom-align-right" v-if="radio === '2'">
|
|
|
- <el-input v-model="form.url" autocomplete="off" placeholder="请输入菜单路由"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="父级菜单名称" :label-width="formLabelWidth" prop="pid_arr" class="custom-align-right" v-if="radio === '2'">
|
|
|
- <el-cascader :key="parentKey" v-model="form.pid_arr" :props="{checkStrictly:true}" :options="pidArrData" clearable></el-cascader>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="默认图标" :label-width="formLabelWidth" prop="icon" class="custom-align-right" v-if="radio == '1'">
|
|
|
- <!--图片上传组件 start ------------------------------------------------------------>
|
|
|
+ <!--图片上传组件 end ------------------------------------------------------------>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="选中时图标" :label-width="formLabelWidth" prop="selected_icon" class="custom-align-right" v-if="radio == '1'">
|
|
|
+ <!--图片上传组件 start ------------------------------------------------------------>
|
|
|
<div class="uploaderBox">
|
|
|
- <div class="avatar-upload-container" @mouseenter="hovering = true" @mouseleave="hovering = false">
|
|
|
+ <div class="avatar-upload-container" @mouseenter="hoveringTwo = true" @mouseleave="hoveringTwo = false">
|
|
|
<!-- 上传组件 -->
|
|
|
- <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUploadTwo">
|
|
|
<!-- 预览图片 -->
|
|
|
- <img v-if="iconSrc" :src="iconSrc" class="avatar">
|
|
|
+ <img v-if="iconSrcSelect" :src="iconSrcSelect" class="avatar">
|
|
|
<div v-else class="chooseImgDiv">
|
|
|
<div>
|
|
|
<img src="@/assets/public/upload/noImage.png">
|
|
|
@@ -81,440 +104,419 @@
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
<!-- 删除按钮，当鼠标悬浮时显示 -->
|
|
|
- <div v-if="hovering && iconSrc" class="delete-button" @click="handleDelete">
|
|
|
+ <div v-if="hoveringTwo && iconSrcSelect" class="delete-button" @click="handleDeleteTwo">
|
|
|
<i class="el-icon-delete"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--图片上传组件 end ------------------------------------------------------------>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="选中时图标" :label-width="formLabelWidth" prop="selected_icon" class="custom-align-right" v-if="radio == '1'">
|
|
|
- <!--图片上传组件 start ------------------------------------------------------------>
|
|
|
- <div class="uploaderBox">
|
|
|
- <div class="avatar-upload-container" @mouseenter="hoveringTwo = true" @mouseleave="hoveringTwo = false">
|
|
|
- <!-- 上传组件 -->
|
|
|
- <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUploadTwo">
|
|
|
- <!-- 预览图片 -->
|
|
|
- <img v-if="iconSrcSelect" :src="iconSrcSelect" class="avatar">
|
|
|
- <div v-else class="chooseImgDiv">
|
|
|
- <div>
|
|
|
- <img src="@/assets/public/upload/noImage.png">
|
|
|
- <div>选择图片</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-upload>
|
|
|
- <!-- 删除按钮，当鼠标悬浮时显示 -->
|
|
|
- <div v-if="hoveringTwo && iconSrcSelect" class="delete-button" @click="handleDeleteTwo">
|
|
|
- <i class="el-icon-delete"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--图片上传组件 end ------------------------------------------------------------>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="权重" :label-width="formLabelWidth" prop="sort" class="custom-align-right">
|
|
|
- <el-input v-model="form.sort" autocomplete="off" placeholder="请输入权重"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <div>
|
|
|
- <el-button @click="closeWindow">取 消</el-button>
|
|
|
- <el-button type="primary" @click="editToServe" v-if="editBtn==true">编辑</el-button>
|
|
|
- <el-button type="primary" @click="addToServe" v-else>提交</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="权重" :label-width="formLabelWidth" prop="sort" class="custom-align-right">
|
|
|
+ <el-input v-model="form.sort" autocomplete="off" placeholder="请输入权重"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <div>
|
|
|
+ <el-button @click="closeWindow">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="editToServe" v-if="editBtn==true">编辑</el-button>
|
|
|
+ <el-button type="primary" @click="addToServe" v-else>提交</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- <!--弹出框 end------------------------------------------------------------>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-//表格标题
|
|
|
-import openWindow from '@/utils/open-window';
|
|
|
-import tableTitle from './components/tableTitle';
|
|
|
-//引入公用样式
|
|
|
-import '@/styles/global.less';
|
|
|
-
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- tableTitle,//表格标题
|
|
|
- },
|
|
|
- data() {
|
|
|
- //0.全局操作 start ------------------------------------------------------------>
|
|
|
- const validateEmpty = (rule,value,callback) => {
|
|
|
- if (value.length == 0) {
|
|
|
- callback(new Error('该项不能为空！'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- const validateArray = (rule,value,callback) => {
|
|
|
- if (value.length == 0) {
|
|
|
- callback(new Error('该项不能为空！'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- //0.全局操作 end ------------------------------------------------------------>
|
|
|
- return {
|
|
|
- //1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
- tableDivTitle:"菜单列表",
|
|
|
- tableData: [],//内容列表
|
|
|
- editId:"",//编辑id
|
|
|
- radio: '2',//是否为顶级菜单 1=是 2=否
|
|
|
- //分页相关 end ------------------------------------------------------------>
|
|
|
-
|
|
|
- //2.弹出框设置 start ------------------------------------------------------------>
|
|
|
- //是否显示弹出窗口
|
|
|
- windowStatus:false,
|
|
|
- formLabelWidth: '120px',
|
|
|
- editBtn:false,//当显示编辑按钮的时候，就不显示提交
|
|
|
- //弹出框设置 end ------------------------------------------------------------>
|
|
|
-
|
|
|
- //3.弹出框中的表单设置 start ------------------------------------------------------------>
|
|
|
- form: {
|
|
|
- label:"",//菜单名称
|
|
|
- url:"",//菜单路由地址
|
|
|
- icon:"",//默认图标
|
|
|
- selected_icon:"",//选中时图标
|
|
|
- sort:"",//权重
|
|
|
- pid_arr:[]//父级id
|
|
|
- },
|
|
|
- //通过api获的的菜单列表
|
|
|
- parentKey:0,
|
|
|
- pidArrData:[],
|
|
|
- //3.1 上传默认图标
|
|
|
- iconSrc:'',//默认图标缩略图
|
|
|
- hovering: false,//显示删除图标
|
|
|
- iconSrcSelect:'',//选中时图标缩略图
|
|
|
- hoveringTwo: false,//显示删除图标
|
|
|
- //3.2 表单验证规则
|
|
|
- formRules: {
|
|
|
- label:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
- url:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
- icon:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
- selected_icon:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
- sort:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
- pid_arr:[{required:true,trigger:'blur',validator:validateArray}],
|
|
|
- },
|
|
|
- //弹出框中的表单设置 end ------------------------------------------------------------>
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
- //1.1 开始请求列表信息方法
|
|
|
- getData(){
|
|
|
- this.$store.dispatch('menu/getMenuList').then(res=> {
|
|
|
- this.tableData = res.data
|
|
|
- console.log(this.tableData)
|
|
|
- //格式化以后放入级联选择器
|
|
|
- let arrData = this.transformData(res.data)
|
|
|
- this.pidArrData = arrData;
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '网络错误，请重试！'
|
|
|
- });
|
|
|
- })
|
|
|
+ </el-dialog>
|
|
|
+ <!--弹出框 end------------------------------------------------------------>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ //表格标题
|
|
|
+ import openWindow from '@/utils/open-window';
|
|
|
+ import tableTitle from './components/tableTitle';
|
|
|
+ //引入公用样式
|
|
|
+ import '@/styles/global.less';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ tableTitle,//表格标题
|
|
|
},
|
|
|
- //1.2格式化菜单列表
|
|
|
- transformData(arrData) {
|
|
|
- let that = this;
|
|
|
- return arrData.map(item => {
|
|
|
- // 创建一个新的对象，替换键名
|
|
|
- let newItem = {
|
|
|
- label: item.label,
|
|
|
- value: item.id,
|
|
|
- };
|
|
|
- // 如果有 children，则递归处理 children 数组
|
|
|
- if (item.children && item.children.length > 0) {
|
|
|
- newItem.children = that.transformData(item.children);
|
|
|
+ data() {
|
|
|
+ //0.全局操作 start ------------------------------------------------------------>
|
|
|
+ const validateEmpty = (rule,value,callback) => {
|
|
|
+ if (value.length == 0) {
|
|
|
+ callback(new Error('该项不能为空！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
}
|
|
|
- return newItem;
|
|
|
- });
|
|
|
+ }
|
|
|
+ const validateArray = (rule,value,callback) => {
|
|
|
+ if (value.length == 0) {
|
|
|
+ callback(new Error('该项不能为空！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //0.全局操作 end ------------------------------------------------------------>
|
|
|
+ return {
|
|
|
+ //1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
+ tableDivTitle:"菜单列表",
|
|
|
+ tableData: [],//内容列表
|
|
|
+ editId:"",//编辑id
|
|
|
+ radio: '2',//是否为顶级菜单 1=是 2=否
|
|
|
+ //分页相关 end ------------------------------------------------------------>
|
|
|
+
|
|
|
+ //2.弹出框设置 start ------------------------------------------------------------>
|
|
|
+ //是否显示弹出窗口
|
|
|
+ windowStatus:false,
|
|
|
+ formLabelWidth: '120px',
|
|
|
+ editBtn:false,//当显示编辑按钮的时候，就不显示提交
|
|
|
+ //弹出框设置 end ------------------------------------------------------------>
|
|
|
+
|
|
|
+ //3.弹出框中的表单设置 start ------------------------------------------------------------>
|
|
|
+ form: {
|
|
|
+ label:"",//菜单名称
|
|
|
+ url:"",//菜单路由地址
|
|
|
+ icon:"",//默认图标
|
|
|
+ selected_icon:"",//选中时图标
|
|
|
+ sort:"",//权重
|
|
|
+ pid_arr:[]//父级id
|
|
|
+ },
|
|
|
+ //通过api获的的菜单列表
|
|
|
+ parentKey:0,
|
|
|
+ pidArrData:[],
|
|
|
+ //3.1 上传默认图标
|
|
|
+ iconSrc:'',//默认图标缩略图
|
|
|
+ hovering: false,//显示删除图标
|
|
|
+ iconSrcSelect:'',//选中时图标缩略图
|
|
|
+ hoveringTwo: false,//显示删除图标
|
|
|
+ //3.2 表单验证规则
|
|
|
+ formRules: {
|
|
|
+ label:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ url:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ icon:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ selected_icon:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ sort:[{required:true,trigger:'blur',validator:validateEmpty}],
|
|
|
+ pid_arr:[{required:true,trigger:'blur',validator:validateArray}],
|
|
|
+ },
|
|
|
+ //弹出框中的表单设置 end ------------------------------------------------------------>
|
|
|
+ }
|
|
|
},
|
|
|
- //1.2 删除内容
|
|
|
- deleteRow(id){
|
|
|
- this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- console.log("当前删除：" + id)
|
|
|
- this.$store.dispatch('menu/delMenu',{id:id}).then(res=> {
|
|
|
- this.getData();
|
|
|
- if(res.code==200){
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '删除成功!'
|
|
|
- });
|
|
|
- this.getData();
|
|
|
- }else{
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '请先删除子菜单！'
|
|
|
- });
|
|
|
- }
|
|
|
+ methods: {
|
|
|
+ //1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
+ //1.1 开始请求列表信息方法
|
|
|
+ getData(){
|
|
|
+ this.$store.dispatch('menu/getMenuList').then(res=> {
|
|
|
+ this.tableData = res.data
|
|
|
+ console.log(this.tableData)
|
|
|
+ //格式化以后放入级联选择器
|
|
|
+ let arrData = this.transformData(res.data)
|
|
|
+ this.pidArrData = arrData;
|
|
|
}).catch(() => {
|
|
|
this.$message({
|
|
|
type: 'warning',
|
|
|
message: '网络错误，请重试！'
|
|
|
});
|
|
|
})
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '已取消删除'
|
|
|
+ },
|
|
|
+ //1.2格式化菜单列表
|
|
|
+ transformData(arrData) {
|
|
|
+ let that = this;
|
|
|
+ return arrData.map(item => {
|
|
|
+ // 创建一个新的对象，替换键名
|
|
|
+ let newItem = {
|
|
|
+ label: item.label,
|
|
|
+ value: item.id,
|
|
|
+ };
|
|
|
+ // 如果有 children，则递归处理 children 数组
|
|
|
+ if (item.children && item.children.length > 0) {
|
|
|
+ newItem.children = that.transformData(item.children);
|
|
|
+ }
|
|
|
+ return newItem;
|
|
|
});
|
|
|
- });
|
|
|
- },
|
|
|
- //1.3 回显数据
|
|
|
- editRow(data){
|
|
|
- this.editId = data.id;
|
|
|
- console.log(data)
|
|
|
- this.openWindow();
|
|
|
- this.form.label = data.label;
|
|
|
- this.form.url = data.url;
|
|
|
- this.form.icon = data.icon;
|
|
|
- this.form.selected_icon = data.selected_icon;
|
|
|
- this.form.sort = data.sort;
|
|
|
- //回显父级
|
|
|
- if(data.pid==0){
|
|
|
- //如果是顶级菜单
|
|
|
- this.radio = "1";//是顶级菜单
|
|
|
- }else{
|
|
|
- this.radio = "2";//不是顶级菜单
|
|
|
- //如果不是顶级菜单 显示到选择器中
|
|
|
- this.parentKey += 1;
|
|
|
- console.log(this.pidArrData)
|
|
|
- console.log(data.pid)
|
|
|
- //将JSON字符串转换为数组
|
|
|
- let pidArr = JSON.parse(data.pid_arr);
|
|
|
- if(pidArr.length==1){ // 如果只有一个父级，直接赋值
|
|
|
- this.form.pid_arr = [data.pid];
|
|
|
- }else{ // 否则，赋值最后一个父级
|
|
|
- this.form.pid_arr = pidArr[pidArr.length-1];
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //回显示icon
|
|
|
- this.iconSrc = data.icon;
|
|
|
- this.iconSrcSelect = data.selected_icon;
|
|
|
- //显示编辑按钮
|
|
|
- this.editBtn = true;
|
|
|
- },
|
|
|
- //提交
|
|
|
- addToServe(){
|
|
|
- //先判断是不是顶级菜单
|
|
|
- if(this.radio=="1"){
|
|
|
- //如果是顶级菜单
|
|
|
- this.form.pid_arr = [0];
|
|
|
- }
|
|
|
-
|
|
|
- //执行验证
|
|
|
- this.$refs.form.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- this.$store.dispatch('menu/addMenu',this.form).then(res=> {
|
|
|
+ },
|
|
|
+ //1.2 删除内容
|
|
|
+ deleteRow(id){
|
|
|
+ this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ console.log("当前删除：" + id)
|
|
|
+ this.$store.dispatch('menu/delMenu',{id:id}).then(res=> {
|
|
|
+ this.getData();
|
|
|
if(res.code==200){
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
- message: '成功添加路由！'
|
|
|
+ message: '删除成功!'
|
|
|
});
|
|
|
this.getData();
|
|
|
- this.closeWindow();
|
|
|
+ }else{
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '请先删除子菜单！'
|
|
|
+ });
|
|
|
}
|
|
|
}).catch(() => {
|
|
|
this.$message({
|
|
|
type: 'warning',
|
|
|
- message: '网络错误！'
|
|
|
+ message: '网络错误，请重试！'
|
|
|
});
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '已取消删除'
|
|
|
});
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //1.3 回显数据
|
|
|
+ editRow(data){
|
|
|
+ this.editId = data.id;
|
|
|
+ console.log(data)
|
|
|
+ this.openWindow();
|
|
|
+ this.form.label = data.label;
|
|
|
+ this.form.url = data.url;
|
|
|
+ this.form.icon = data.icon;
|
|
|
+ this.form.selected_icon = data.selected_icon;
|
|
|
+ this.form.sort = data.sort;
|
|
|
+ //回显父级
|
|
|
+ if(data.pid==0){
|
|
|
+ //如果是顶级菜单
|
|
|
+ this.radio = "1";//是顶级菜单
|
|
|
+ }else{
|
|
|
+ this.radio = "2";//不是顶级菜单
|
|
|
+ //如果不是顶级菜单 显示到选择器中
|
|
|
+ this.parentKey += 1;
|
|
|
+ console.log(this.pidArrData)
|
|
|
+ console.log(data.pid)
|
|
|
+ //将JSON字符串转换为数组
|
|
|
+ let pidArr = JSON.parse(data.pid_arr);
|
|
|
+ if(pidArr.length==1){ // 如果只有一个父级，直接赋值
|
|
|
+ this.form.pid_arr = [data.pid];
|
|
|
+ }else{ // 否则，赋值最后一个父级
|
|
|
+ //this.form.pid_arr = pidArr[pidArr.length-1];
|
|
|
+ this.form.pid_arr = pidArr;
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- //修改
|
|
|
- editToServe(){
|
|
|
- //是否为顶级菜单 1=是 2=否
|
|
|
+
|
|
|
+ //回显示icon
|
|
|
+ this.iconSrc = data.icon;
|
|
|
+ this.iconSrcSelect = data.selected_icon;
|
|
|
+ //显示编辑按钮
|
|
|
+ this.editBtn = true;
|
|
|
+ },
|
|
|
+ //提交
|
|
|
+ addToServe(){
|
|
|
+ //先判断是不是顶级菜单
|
|
|
if(this.radio=="1"){
|
|
|
- this.$refs.form.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- let data = this.form;
|
|
|
- data.url = "";
|
|
|
- data.pid_arr = [0];
|
|
|
- data.id = this.editId;
|
|
|
- this.$store.dispatch('menu/updateMenu',data).then(res=> {
|
|
|
- if(res.code==200){
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '路由状态已修改!'
|
|
|
- });
|
|
|
- this.getData();
|
|
|
- this.closeWindow();
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '操作已取消！'
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- }else{
|
|
|
- this.$refs.form.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- let data = this.form;
|
|
|
- data.id = this.editId;
|
|
|
- this.$store.dispatch('menu/updateMenu',data).then(res=> {
|
|
|
- if(res.code==200){
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '路由状态已修改!'
|
|
|
- });
|
|
|
- this.getData();
|
|
|
- this.closeWindow();
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'warning',
|
|
|
- message: '操作已取消！'
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
+ //如果是顶级菜单
|
|
|
+ this.form.pid_arr = [0];
|
|
|
}
|
|
|
- },
|
|
|
- //列表和分页相关 end ------------------------------------------------------------>
|
|
|
-
|
|
|
-
|
|
|
- //2.弹出框设置 start ------------------------------------------------------------>
|
|
|
- //2.1 打开弹出框
|
|
|
- openWindow() {
|
|
|
- this.windowStatus = true;
|
|
|
- this.clearToServe();
|
|
|
- //显示添加按钮
|
|
|
- this.editBtn = false;
|
|
|
- },
|
|
|
- //2.2 关闭弹出框
|
|
|
- closeWindow(){
|
|
|
- this.windowStatus = false;
|
|
|
- this.clearToServe();
|
|
|
- },
|
|
|
- //2.3 清理弹出框
|
|
|
- clearToServe(){
|
|
|
- this.form.label = "";
|
|
|
- this.form.url = "";
|
|
|
- this.form.icon = "";
|
|
|
- this.form.selected_icon = "";
|
|
|
- this.form.sort = "";
|
|
|
- this.form.pid_arr = [];
|
|
|
- //this.pidArrData=[];
|
|
|
- this.iconSrc = "";
|
|
|
- this.hovering = false;
|
|
|
- this.iconSrcSelect = "";
|
|
|
- this.hoveringTwo = false;
|
|
|
- this.editBtn = false;
|
|
|
- },
|
|
|
- //弹出框设置 end ------------------------------------------------------------>
|
|
|
-
|
|
|
- //3.添加菜单 start ------------------------------------------------------------>
|
|
|
- //3.1 上传默认图标
|
|
|
- beforeAvatarUpload(file) {
|
|
|
- const isJPG = file.type === 'image/jpeg';
|
|
|
- const isPNG = file.type === 'image/png';
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
-
|
|
|
- if (!isJPG && !isPNG) {
|
|
|
- this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
|
|
|
- return false;
|
|
|
- }
|
|
|
- if (!isLt2M) {
|
|
|
- this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- const formData = new FormData();
|
|
|
- formData.append('file', file);
|
|
|
-
|
|
|
- this.$store.dispatch('pool/uploadFile',formData).then(res=> {
|
|
|
- this.iconSrc = res.data.imgUrl;//显示缩略图
|
|
|
- this.form.icon = res.data.imgUrl;//提供表单地址
|
|
|
- console.log(res.data.imgUrl)
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '网络错误，请重试！'
|
|
|
- });
|
|
|
- })
|
|
|
-
|
|
|
- // 阻止默认的上传行为
|
|
|
- return false;
|
|
|
- },
|
|
|
- handleDelete() {
|
|
|
- // 删除图片
|
|
|
- this.form.icon = ''; //清空选中的图片
|
|
|
- this.iconSrc = ''; // 清空图片 URL
|
|
|
- },
|
|
|
- //3.2 上传选中时图标
|
|
|
- beforeAvatarUploadTwo(file) {
|
|
|
- const isJPG = file.type === 'image/jpeg';
|
|
|
- const isPNG = file.type === 'image/png';
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
-
|
|
|
- if (!isJPG && !isPNG) {
|
|
|
- this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
|
|
|
+ //添加时无需id
|
|
|
+ delete this.form.id;
|
|
|
+ //执行验证
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.$store.dispatch('menu/addMenu',this.form).then(res=> {
|
|
|
+ if(res.code==200){
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '成功添加路由！'
|
|
|
+ });
|
|
|
+ this.getData();
|
|
|
+ this.closeWindow();
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '网络错误！'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //修改
|
|
|
+ editToServe(){
|
|
|
+ //是否为顶级菜单 1=是 2=否
|
|
|
+ if(this.radio=="1"){
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ let data = this.form;
|
|
|
+ data.url = "";
|
|
|
+ data.pid_arr = [0];
|
|
|
+ data.id = this.editId;
|
|
|
+ this.$store.dispatch('menu/updateMenu',data).then(res=> {
|
|
|
+ if(res.code==200){
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '路由状态已修改!'
|
|
|
+ });
|
|
|
+ this.getData();
|
|
|
+ this.closeWindow();
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '操作已取消！'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ let data = this.form;
|
|
|
+ data.id = this.editId;
|
|
|
+ this.$store.dispatch('menu/updateMenu',data).then(res=> {
|
|
|
+ if(res.code==200){
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '路由状态已修改!'
|
|
|
+ });
|
|
|
+ this.getData();
|
|
|
+ this.closeWindow();
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '操作已取消！'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //列表和分页相关 end ------------------------------------------------------------>
|
|
|
+
|
|
|
+
|
|
|
+ //2.弹出框设置 start ------------------------------------------------------------>
|
|
|
+ //2.1 打开弹出框
|
|
|
+ openWindow() {
|
|
|
+ this.windowStatus = true;
|
|
|
+ this.clearToServe();
|
|
|
+ //显示添加按钮
|
|
|
+ this.editBtn = false;
|
|
|
+ },
|
|
|
+ //2.2 关闭弹出框
|
|
|
+ closeWindow(){
|
|
|
+ this.windowStatus = false;
|
|
|
+ this.clearToServe();
|
|
|
+ },
|
|
|
+ //2.3 清理弹出框
|
|
|
+ clearToServe(){
|
|
|
+ this.form.label = "";
|
|
|
+ this.form.url = "";
|
|
|
+ this.form.icon = "";
|
|
|
+ this.form.selected_icon = "";
|
|
|
+ this.form.sort = "";
|
|
|
+ this.form.pid_arr = [];
|
|
|
+ //this.pidArrData=[];
|
|
|
+ this.iconSrc = "";
|
|
|
+ this.hovering = false;
|
|
|
+ this.iconSrcSelect = "";
|
|
|
+ this.hoveringTwo = false;
|
|
|
+ this.editBtn = false;
|
|
|
+ },
|
|
|
+ //弹出框设置 end ------------------------------------------------------------>
|
|
|
+
|
|
|
+ //3.添加菜单 start ------------------------------------------------------------>
|
|
|
+ //3.1 上传默认图标
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isPNG = file.type === 'image/png';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isJPG && !isPNG) {
|
|
|
+ this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+
|
|
|
+ this.$store.dispatch('pool/uploadFile',formData).then(res=> {
|
|
|
+ this.iconSrc = res.data.imgUrl;//显示缩略图
|
|
|
+ this.form.icon = res.data.imgUrl;//提供表单地址
|
|
|
+ console.log(res.data.imgUrl)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ // 阻止默认的上传行为
|
|
|
return false;
|
|
|
- }
|
|
|
- if (!isLt2M) {
|
|
|
- this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
+ },
|
|
|
+ handleDelete() {
|
|
|
+ // 删除图片
|
|
|
+ this.form.icon = ''; //清空选中的图片
|
|
|
+ this.iconSrc = ''; // 清空图片 URL
|
|
|
+ },
|
|
|
+ //3.2 上传选中时图标
|
|
|
+ beforeAvatarUploadTwo(file) {
|
|
|
+ const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isPNG = file.type === 'image/png';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isJPG && !isPNG) {
|
|
|
+ this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+
|
|
|
+ this.$store.dispatch('pool/uploadFile',formData).then(res=> {
|
|
|
+ this.iconSrcSelect = res.data.imgUrl;//显示缩略图
|
|
|
+ this.form.selected_icon = res.data.imgUrl;//提供表单地址
|
|
|
+ // 确保 Vue 能够检测到变化
|
|
|
+ this.$forceUpdate();
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ // 阻止默认的上传行为
|
|
|
return false;
|
|
|
- }
|
|
|
-
|
|
|
- const formData = new FormData();
|
|
|
- formData.append('file', file);
|
|
|
-
|
|
|
- this.$store.dispatch('pool/uploadFile',formData).then(res=> {
|
|
|
- this.iconSrcSelect = res.data.imgUrl;//显示缩略图
|
|
|
- this.form.selected_icon = res.data.imgUrl;//提供表单地址
|
|
|
- // 确保 Vue 能够检测到变化
|
|
|
- this.$forceUpdate();
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '网络错误，请重试！'
|
|
|
- });
|
|
|
- })
|
|
|
-
|
|
|
- // 阻止默认的上传行为
|
|
|
- return false;
|
|
|
- },
|
|
|
- handleDeleteTwo() {
|
|
|
- // 删除图片
|
|
|
- this.form.selected_icon = ''; //清空选中的图片
|
|
|
- this.iconSrcSelect = ''; // 清空图片 URL
|
|
|
+ },
|
|
|
+ handleDeleteTwo() {
|
|
|
+ // 删除图片
|
|
|
+ this.form.selected_icon = ''; //清空选中的图片
|
|
|
+ this.iconSrcSelect = ''; // 清空图片 URL
|
|
|
+ },
|
|
|
+ //添加菜单 end ------------------------------------------------------------>
|
|
|
+
|
|
|
},
|
|
|
- //添加菜单 end ------------------------------------------------------------>
|
|
|
-
|
|
|
- },
|
|
|
- mounted(){
|
|
|
- //1.获得初始数据
|
|
|
- this.getData();
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="less">
|
|
|
- .layerBoxNoBg {
|
|
|
- padding:30px 0 0 0;
|
|
|
- }
|
|
|
- //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
|
|
|
- ::v-deep .custom-form-item > .el-form-item__label {
|
|
|
- line-height: 140px !important;
|
|
|
- }
|
|
|
- ::v-deep .custom-textarea .el-textarea__inner {
|
|
|
- resize: none; /* 禁止用户拖拽调整大小 */
|
|
|
- }
|
|
|
- ::v-deep .custom-align-right .el-form-item__label {
|
|
|
- text-align: right; /* 设置标签文字右对齐 */
|
|
|
+ mounted(){
|
|
|
+ //1.获得初始数据
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
}
|
|
|
- //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
|
|
|
-</style>
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style scoped lang="less">
|
|
|
+ .layerBoxNoBg {
|
|
|
+ padding:30px 0 0 0;
|
|
|
+ }
|
|
|
+ //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
|
|
|
+ ::v-deep .custom-form-item > .el-form-item__label {
|
|
|
+ line-height: 140px !important;
|
|
|
+ }
|
|
|
+ ::v-deep .custom-textarea .el-textarea__inner {
|
|
|
+ resize: none; /* 禁止用户拖拽调整大小 */
|
|
|
+ }
|
|
|
+ ::v-deep .custom-align-right .el-form-item__label {
|
|
|
+ text-align: right; /* 设置标签文字右对齐 */
|
|
|
+ }
|
|
|
+ //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
|
|
|
+ </style>
|
